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">{{ systemTitle.title }}-{{ systemTitle.subTitle }}-统计分析</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">-->
<!--&lt;!&ndash;          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">&ndash;&gt;-->
<!--&lt;!&ndash;            <span>起火原因统计</span>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <chartFireCause></chartFireCause>&ndash;&gt;-->
<!--        </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-98">
          <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 mg-b-20 tall">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>设备分布</span>
          </div>
          <chartEquipmentDistribution></chartEquipmentDistribution>
        </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-1 m-l-15">-->
<!--        -->
<!--      </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>
          <chartDetector></chartDetector>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>车辆资源统计</span>
          </div>
          <chartPit></chartPit>
        </div>
      </div>
      <!-- 第七纵向-->
      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>大气监测分析年统计</span>
          </div>
          <chartAtmosphereYear></chartAtmosphereYear>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>大气监测分析日统计</span>
          </div>
          <chartAtmosphereMonth></chartAtmosphereMonth>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>污染源监测分析年统计</span>
          </div>
          <chartPollutionYear></chartPollutionYear>
        </div>
      </div>
      <!-- 第八纵向-->
      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>污染源监测分析日统计</span>
          </div>
          <chartPollutionMonth></chartPollutionMonth>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>土壤监测分析年统计</span>
          </div>
          <chartSoilYear></chartSoilYear>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>土壤源监测分析日统计</span>
          </div>
          <chartSoilMonth></chartSoilMonth>
        </div>
      </div>
      <!-- 第九纵向-->
      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>水质监测分析年统计</span>
          </div>
          <chartWaterqualityYear></chartWaterqualityYear>
        </div>
        <div class="b-con mg-b-20">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>水质监测分析日统计</span>
          </div>
          <chartWaterqualityMonth></chartWaterqualityMonth>
        </div>
        <div class="b-con">
          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
            <span>环保人员考勤</span>
          </div>
          <chartKaoqin></chartKaoqin>
        </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 chartDetector from './chart-detector' //16 设备分布、、
import chartPit from './chart-pit' //16 设备分布、、
import chartAtmosphereYear from './chart-atmosphereYear.vue' //26 大气 监测分析年统计
import chartAtmosphereMonth from './chart-atmosphereMonth.vue' //27 大气 监测分析月统计
import chartPollutionYear from './chart-pollutionYear.vue' //28 污染源 监测分析年统计
import chartPollutionMonth from './chart-pollutionMonth.vue' //29 污染源 监测分析月统计
import chartSoilYear from './chart-soilYear.vue' //30 土壤 监测分析年统计
import chartSoilMonth from './chart-soilMonth.vue' //31 土壤 监测分析月统计
import chartWaterqualityYear from './chart-waterqualityYear.vue' //32 水质 监测分析年统计
import chartWaterqualityMonth from './chart-waterqualityMonth.vue' //33 水质 监测分析月统计
import chartKaoqin from './chart-kaoqin.vue' //33 水质 监测分析月统计

import { getRlt } from '@/api/bigdata'
import {
  fontConfig
} from '@/api/login'

export default {
  components: {
    bigdataSupermap,
    tabbar,
    chartEvent,
    chartPollutionSource,
    chartEquipmentType,
    chartFireCause,
    chartDeviceReportingEvents,
    chartEventTrend,
    chartKeyArea,
    chartKeyEnterprises,
    chartWeatherTrends,
    chartNoBurningArea,
    // chartFireBrigade,
    // chartGridStaff,
    // chartWeatherStation,
    chartEquipmentDistribution,
    chartDetector,
    chartPit,
    chartAtmosphereYear,
    chartAtmosphereMonth,
    chartPollutionYear,
    chartPollutionMonth,
    chartSoilYear,
    chartSoilMonth,
    chartWaterqualityYear,
    chartWaterqualityMonth,
    chartKaoqin
  },
  data() {
    return {
      systemTitle: {
        title: '',  //标题
        subTitle: ''//副标题 数字环保
      },
      visited: '',
      navbar: [
        {
          //生态云图
          path: '/forest',
          name: '生态云图'
        },
        {
          //数据中心
          path: '/datacenter',
          name: '数据中心'
        },
        {
          //监控中心
          path: '/monitor',
          name: '监控中心'
        },
        {
          //环保人员
          path: '/leader',
          name: '巡查任务'
        },
        {
          path: '/bigdata',
          name: '统计分析'
        }
      ],
      total: 0, //事件总数
      untreated: 0, //事件-未处理
      processing: 0 // 事件-处理中

    }
  },
  created() {
    this.fontConfig()
  },
  methods: {
    fontConfig() {
      fontConfig().then(res => {
        this.systemTitle.title = res.data.fontTitle
        this.systemTitle.subTitle = res.data.subTitle
      })
    },
    rlt() {
      let that = this
      let data = {
        eventTypeId:['102'],
        day: new Date().getFullYear()
      }
      getRlt(data).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-98 {
      width: 100% !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>