Project_yhfu/src/views/bigdata/bigdata.vue

<!--一体化首页-->
<template>
  <div class="bigdata-con">
    <!-- 头部B -->
    <div class="header">
      <!-- title -->
      <div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png"/>
        <h3 class="title">通榆县乡村振兴监管平台-数字环保-统计分析</h3>
      </div>
      <div class="bignav">
        <img src="@/assets/images/integrated/bigdata-header-nav-left.png"/>
        <router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list"
                     :class="index===navbar.length-1?'on':''" exact>
          {{navbar.name}}
        </router-link>
        <img src="@/assets/images/integrated/bigdata-header-nav-right.png"/>
      </div>
    </div>
    <!-- 头部E -->

    <div class="bigdata-body">
      <!-- 第一纵向-->
      <div class="bigdata-list wid-li-1">
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>事件来源，类型统计</span>
          </div>
          <chartEvent></chartEvent>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>污染源分布统计</span>
          </div>
          <chartPollutionSource></chartPollutionSource>
        </div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>设备类型统计</span>
          </div>
          <chartEquipmentType></chartEquipmentType>
        </div>
      </div>
      <!-- 第二纵向-->
      <div class="bigdata-list wid-li-2 m-l-15">
        <div class="bigdata-map mg-b-20">
          <!-- 地图 -->
          <bigdataSupermap ref="bigdataSupermap" style="width: 100%;height: 59vh;" class="indexSupermapClass"
                           :mapDiv="'bigdataMap'" dynamicPlotting="false" :mapSite="{doubleClickZoom:false}"
                           :codes="['9fa5']" :isSideBySide="false"/>
        </div>
        <tabbar></tabbar>
      </div>
      <!-- 第三纵向-->
      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
        <div class="b-con mg-b-20 b-49">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>起火原因统计</span>
          </div>
          <chartFireCause></chartFireCause>
        </div>
        <div class="b-con mg-b-20 b-49">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>设备上报事件数量</span>
          </div>
          <chartDeviceReportingEvents></chartDeviceReportingEvents>
        </div>
        <div class="b-con mg-b-20 b-49">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>重点区域</span>
          </div>
          <chartKeyArea></chartKeyArea>
        </div>
        <div class="b-con mg-b-20 b-49">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>重点企业</span>
          </div>
          <chartKeyEnterprises></chartKeyEnterprises>
        </div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>事件趋势</span>
          </div>
          <chartEventTrend></chartEventTrend>
          <strong></strong>
        </div>
      </div>
      <!-- 第四纵向-->
      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
        <div class="b-con mg-b-20 tall">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>禁烧区分布</span>
          </div>
          <chartNoBurningArea></chartNoBurningArea>
        </div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>天气趋势</span>
          </div>
          <chartWeatherTrends></chartWeatherTrends>
        </div>
      </div>
      <!-- 第五纵向-->
      <!--<div class="bigdata-list wid-li-3 m-l-15 flex-r">-->
      <!--<div class="b-con mg-b-20 tall">-->
      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
      <!--<span>网格人员</span>-->
      <!--</div>-->
      <!--<chartGridStaff></chartGridStaff>-->
      <!--</div>-->
      <!--<div class="b-con mg-b-20 b-49">-->
      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
      <!--<span>防火队</span>-->
      <!--</div>-->
      <!--<chartFireBrigade></chartFireBrigade>-->
      <!--</div>-->
      <!--<div class="b-con mg-b-20 b-49">-->
      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
      <!--<span>气象站</span>-->
      <!--</div>-->
      <!--<chartWeatherStation></chartWeatherStation>-->
      <!--</div>-->
      <!--</div>-->
      <!-- 第六纵向-->
      <div class="bigdata-list wid-li-1 m-l-15">
        <div class="b-con mg-b-20 taller">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>设备分布</span>
          </div>
          <chartEquipmentDistribution></chartEquipmentDistribution>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import tabbar from './tabbar.vue' //区域切换
  import bigdataSupermap from '@/components/supermap' //超图

  //echarts
  import chartEvent from './chart-event.vue' //1  事件、、
  import chartPollutionSource from './chart-pollutionSource.vue' //2  污染源分布、、
  import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
  import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
  import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
  import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
  import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
  import chartKeyEnterprises from './chart-keyEnterprises.vue' //8  重点企业、、
  import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
  import chartNoBurningArea from './chart-noBurningArea.vue' //10 禁烧区分布、、
  // import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
  // import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
  // import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
  import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
  import {getRlt} from '@/api/bigdata'

  export default {
    components: {
      bigdataSupermap,
      tabbar,
      chartEvent,
      chartPollutionSource,
      chartEquipmentType,
      chartFireCause,
      chartDeviceReportingEvents,
      chartEventTrend,
      chartKeyArea,
      chartKeyEnterprises,
      chartWeatherTrends,
      chartNoBurningArea,
      // chartFireBrigade,
      // chartGridStaff,
      // chartWeatherStation,
      chartEquipmentDistribution
    },
    data() {
      return {
        visited: '',
        navbar: [
          {
            //生态云图
            path: '/forest',
            name: '生态云图'
          },
          {
            //数据中心
            path: '/datacenter',
            name: '数据中心'
          },
          {
            //监控中心
            path: '/monitor',
            name: '监控中心'
          }, {
            path: '/',
            name: '土壤墒情'
          },
          {
            path: '/',
            name: '污染源'
          }, {
            path: '/',
            name: '水质环境'
          },
          {
            path: '/',
            name: '大气环境'
          },
          {
            path: '/bigdata',
            name: '统计分析'
          }
        ],
        total: 0, //事件总数
        untreated: 0, //事件-未处理
        processing: 0 // 事件-处理中

      }
    },
    methods: {

      rlt() {
        let that = this
        getRlt().then(resp => {
          setTimeout(() => {
            //事件分布
            that.$refs.bigdataSupermap.loadHeatMap(resp.data)
          }, 5000)
        })
      }
    },
    mounted() {
      this.rlt()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';


  .bigdata-con {
    width: -webkit-fit-content;
    height: 100%;
    background: #01020c;

    .el-loading-mask {
      background: none;
    }

    .header {
      height: 3rem;
      display: flex;
      align-items: center;

      .header-left {
        position: fixed;
        left: 10px;
        top: 5px;
        display: flex;
        align-items: center;
        color: $inBlue;
        font-family: $fontFk;

        .title {
          margin: 0 auto;
          text-align: center;
          background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #fff;
          font-size: 22px;
        }
      }

      .bignav {
        height: 40px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        z-index: 1000;
        border-radius: 5px;
        display: flex;
        justify-content: cetner;
        align-items: center;

        .bignav-list {
          background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
          float: left;
          display: flex;
          justify-content: cetner;
          align-items: center;
          color: #fff;
          height: 40px;
          font-size: 12px;
          padding: 0 23px;
          cursor: pointer;
          -webkit-transform: translateY(0);
          transform: translateY(0);
          transition: all 0.3s ease-in-out;
        }

        .router-link-active,
        .bignav-list:hover {
          filter: brightness(2.3);
          -webkit-transform: translateY(2px);
          transform: translateY(2px);
          color: $inBlueHover;
          border-bottom: 1px solid $inBlueHover;
          transition: all 0.3s ease-in-out;

        }
      }


    }

    .bigdata-body {
      margin: 15px;
      display: flex;
      align-items: top;
      // justify-content: center;

    }

    .flex-r {
      display: flex;
      flex-direction: row !important;
      align-content: flex-start;
      justify-content: space-between
    }

    .bigdata-list {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      .twins-con {
        width: 100% !important;
      }

      .b-49 {
        width: 49% !important;
      }

      .b-con {
        width: 100%;
        height: 28.5vh;

        box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
        -0 -0 30px rgba($color: #163696, $alpha: .5) inset;

        // display: flex;
        // flex-direction: column;
        .b-tit {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 10px;

          span {
            font-size: 15px;
            color: #00ceec;
            margin-left: 5px;
            text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
            -0 -0 10px rgba($color: #41fff8, $alpha: .9);
          }
        }

        .twins {
          width: 100%;
          display: flex;
          position: relative;

          .count {
            width: 100%;
            color: #fff;
            font-size: 12px;
            position: absolute;
            display: flex;
            align-items: center;
            left: 1rem;
            top: 9px;
            z-index: 100;

            .count-z {
              display: flex;
              margin: 0 .5rem;

              span {
                margin-left: .4rem;
                font-size: 1rem;
                color: #2ee0fb !important;
                font-weight: bolder;
              }
            }


          }
        }

      }

      .tall {
        height: 59vh !important;
      }

      .taller {
        height: 89.5vh !important;
      }

      .three {
        display: flex;
        flex-direction: column;
      }

      .el-row {
        width: 100%;
      }


      .bigdata-map {
        width: 100%;
        height: 59vh;
        position: relative;
        background: #00101f;

        .event-count {
          color: #fff;
          font-size: 14px;
          font-weight: bolder;
          padding: 10px;
          background-color: #000000;
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 1000;

          span {
            font-size: 16px;
            color: #d50000;
          }
        }

      }

    }

    .wid-li-1 {
      width: 396px;
    }

    .wid-li-2 {
      width: 760px;
    }

    .wid-li-3 {
      width: 850px;
    }

    .wid-li-4 {
      width: 304px;
    }

    .mg-b-20 {
      margin-bottom: 2vh;
    }

    .m-l-15 {
      margin-left: .5%;
    }
  }
</style>