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>
          <chartForestFarm></chartForestFarm>
        </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>
          <chartAncientTree></chartAncientTree>
        </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>
          <chartGridDistribution></chartGridDistribution>
        </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 chartForestFarm from './chart-forestFarm.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 chartAncientTree from './chart-ancientTree.vue' //8  珍惜古树、、
import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
import chartGridDistribution from './chart-gridDistribution.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,
    chartForestFarm,
    chartEquipmentType,
    chartFireCause,
    chartDeviceReportingEvents,
    chartEventTrend,
    chartKeyArea,
    chartAncientTree,
    chartWeatherTrends,
    chartGridDistribution,
    chartFireBrigade,
    chartGridStaff,
    chartWeatherStation,
    chartEquipmentDistribution
  },
  data() {

    return {
      visited: '',
      navbar: [
        {
          //林业中心
          path: '/forest',
          name: '林业云图'
        },
        {
          //数据中心
          path: '/datacenter',
          name: '数据中心'
        },
        {
          //监控中心
          path: '/monitor',
          name: '监控中心'
        },
        {
          path: '/disaster',
          name: '灾后评估'
        },
        {
          path: '/leader',
          name: '网格化'
        },
        {
          path: '/afforestation',
          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: 20px;
      }
    }

    .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>