<template>
  <div class="main-boxs">
    <div class="left-box">
      <div class="common-block gw-box">
        <div class="common-title">智慧管网</div>
        <div class="gw-ul">
          <div class="gw-li" v-for="(item,index) in gwList" :key="index">
            <div class="gwli-title" :class="item.className">{{item.name}}</div>
            <div class="gwli-info">
              <div class="gwli-total">{{item.total}}</div>
              <div class="gwli-other">
                <div class="gwli-online">在线：{{item.total}}</div>
                <div class="gwli-offline">离线：{{item.offline-item.offline}}</div>
                <div class="gwli-warn">报警：{{item.warn}}</div>
              </div>
            </div>
          </div>
          <div class="tips" v-if="$Util.isEmpty(gwList)"> 暂无数据！</div>
        </div>
      </div>
      <div class="common-block aj-box">
        <div class="common-title">智慧安监</div>
        <div class="aj-ul">
          <div class="aj-li" v-for="(item,index) in ajList" :key="index">
            <div class="ajli-icon" :class="item.className"></div>
            <div class="ajli-total">{{item.total}}</div>
            <div class="ajli-name">{{item.name}}</div>
            <div class="ajli-other">
              <div class="ajli-online"><span></span>在线：{{item.online}}</div>
              <div class="ajli-offline"><span></span>离线：{{item.offline}}</div>
              <div class="ajli-warn" v-show="false"><span></span>报警：23</div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="center-box">
      <div class="map-box">
        <div class="map qu-map">
          <div class="map-info" :class="screenWidth <= 1366 ?'samllSize':'normalSize'">
            <div class="map-item"  v-for="item,index in mapList" :key="index" :class="[item.className,{'active':currentCode == item.code}]" @click="initAllData(item)" @mouseenter=""  @mouseleave="">
              <div class="name-dot" v-if="false"></div><div class="name-text" v-if="false">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="common-block hb-box">
        <div class="common-title">智慧环保</div>
        <div class="aj-ul">
          <div class="aj-li" v-for="(item,index) in hbList" :key="index">
            <div class="ajli-icon" :class="item.className"></div>
            <div class="ajli-total">{{item.total}}</div>
            <div class="ajli-name">{{item.name}}</div>
            <div class="ajli-other">
              <div class="ajli-online"><span></span>在线：{{item.online}}</div>
              <div class="ajli-offline"><span></span>离线：{{item.total-item.online}}</div>
              <div class="ajli-warn"><span></span>报警：{{item.warn}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-box common-block">
      <div class="common-title">产业经济</div>
      <div class="" style="color: #fff;width: calc(100% - 5px);padding-right:5px;height: 20px;font-size: 12px;text-align: right;margin-top: -10px;" v-if="false">数据截止时间： 2019-04</div>
      <div class="economic-ul">
        <div class="el-li">
          <div class="el-name">本年度累计工业总产值</div>
          <div class="el-info">
            <div class="el-total">{{gyjjTotalData.total}}</div>
            <div class="el-per" :class="gyjjTotalData.totalTb>=0?'up-red':'down-green'">{{gyjjTotalData.totalTb>=0?'+':''}}{{gyjjTotalData.totalTb}}%</div>
          </div>
        </div>
        <div class="el-li">
          <div class="el-name">{{gyjjTotalData.latestDate}}月工业总产值</div>
          <div class="el-info">
            <div class="el-total">{{gyjjTotalData.current}}</div>
            <div class="el-per" :class="gyjjTotalData.currentTb>=0?'up-red':'down-green'">{{gyjjTotalData.currentTb>=0?'+':''}}{{gyjjTotalData.currentTb}}%</div>
          </div>
        </div>
        <div class="el-li">
          <div class="el-name">本年度累计主导产业工业总产值</div>
          <div class="el-info">
            <div class="el-total">{{zdcyTotalData.total}}</div>
            <div class="el-per" :class="zdcyTotalData.totalTb>=0?'up-red':'down-green'">{{zdcyTotalData.totalTb>=0?'+':''}}{{zdcyTotalData.totalTb}}%</div>
          </div>
        </div>
        <div class="el-li">
          <div class="el-name">{{zdcyTotalData.latestDate}}月主导产业工业总产值</div>
          <div class="el-info">
            <div class="el-total">{{zdcyTotalData.current}}</div>
            <div class="el-per" :class="zdcyTotalData.currentTb>=0?'up-red':'down-green'">{{zdcyTotalData.currentTb>=0?'+':''}}{{zdcyTotalData.currentTb}}%</div>
          </div>
        </div>
        <div class="el-li">
          <div class="el-name" style="line-height: 20px;">本年度累计企业能耗值<br>(万吨标准煤)</div>
          <div class="el-info">
            <div class="el-total">{{zhnhTotalData.total}}</div>
            <div class="el-per" :class="zhnhTotalData.totalTb>=0?'up-red':'down-green'">{{zhnhTotalData.totalTb>=0?'+':''}}{{zhnhTotalData.totalTb}}%</div>
          </div>
        </div>
        <div class="el-li">
          <div class="el-name" style="line-height: 20px;">{{zhnhTotalData.latestDate}}月企业能耗值<br>(万吨标准煤)</div>
          <div class="el-info">
            <div class="el-total">{{zhnhTotalData.current}}</div>
            <div class="el-per" :class="zhnhTotalData.currentTb>=0?'up-red':'down-green'">{{zhnhTotalData.currentTb>=0?'+':''}}{{zhnhTotalData.currentTb}}%</div>
          </div>
        </div>
      </div>
      <div class="charts-box">
        <div class="tab-box">
          <div class="tab-li" :class="{active:activeTab == 'cz'}" style="width: 40%;" @click="initChartsByType('cz') ">规上工业产值行业分布图</div>
          <div class="tab-li" :class="{active:activeTab == 'qy'}" style="width: calc(30% - 1px)" @click="initChartsByType('qy')">企业发展分布图</div>
          <div class="tab-li" :class="{active:activeTab == 'nh'}" style="width: calc(30% - 1px)" @click="initChartsByType('nh')">综合能耗分布图</div>
        </div>
        <div class="chart-box" v-show="activeTab == 'cz'" id="chartsOne"></div>
        <div class="chart-box" v-show="activeTab == 'qy'" id="chartsTwo"></div>
        <div class="chart-box" v-show="activeTab == 'nh'" id="chartsThree"></div>
      </div>
    </div>
  </div>
</template>
<script>
  let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  let years = new Date().getFullYear();
  export default {
    name: 'mainPage',
    data () {
      return {
        token:null,
        gwList:[
          {"name": "液位测试仪","className":"ywcsy","total":4,"online":4,"offline":0,warn:0},
          {"name": "井盖状态监测仪","className":"jgzt", "total":30,"online":30,"offline":0,warn:0},
          {"name": "有害气体监测仪","className":"yhqt", "total":36,"online":36,"offline":0,warn:0},
          {"name": "数据集中器","className":"sjjzq", "total":300,"online":300,"offline":0,warn:0},
          {"name": "噪声记录仪","className":"zsjly", "total":30,"online":30,"offline":0,warn:0},
          {"name": "燃气智能检测综端","className":"rqznjczd", "total":20,"online":20,"offline":0,warn:0},
        ],
        ajList:[
          {"name": "球形摄像头","className":"qx","total":58,"online":58,"offline":0 },
          {"name": "枪机摄像头","className":"qj", "total":16,"online":16,"offline":0},
        ],
        hbList:[
          {"name": "空气质量监测仪","className":"kqzl","total":1,"online":1,"offline":0,"warn":0},
          {"name": "噪声扬尘监测仪","className":"zsyc", "total":10,"online":10,"offline":0,"warn":0},
          {"name": "烟气排放监测仪","className":"yqpf", "total":1,"online":1,"offline":0,"warn":0},
          {"name": "水质监测设备","className":"szjc", "total":3,"online":3,"offline":0,"warn":0},
        ],
        currentCode:'',
        mapList:[
          {name:'科技孵化园',className:'kjfhy',code:'361003406003'},
          {name:'大富工业园',className:'df',code:'361003406004'},
          {name:'浅水湾工业园',className:'qsw',code:'361003406002'},
          {name:'东山工业园',className:'ds',code:'361003406005'},
          {name:'渊山岗工业园',className:'ysg',code:'361003406001'},
        ],
        timeFilter:[new Date().format("yyyy-")+"01",new Date().format("yyyy-MM")],
        gyjjTotalData:{total:0,current: 0,currentTb: 0,totalTb: 0,latestDate:''},
        zdcyTotalData:{total: 0,current: 0,currentTb: 0,totalTb: 0,latestDate:''},
        zhnhTotalData:{total: 0,current: 0,currentTb: 0,totalTb: 0,latestDate:''},
        activeTab:'cz',
        chartsTitle:{ left:'',right:''},
        year:new Date(year).format("yyyy"),
        defaultOp:{
          title: { show: false },
          legend:{show:false,height:"0"},
          /*grid:{top:30,bottom:30},*/
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#777'
              },
              crossStyle: {
                color: 'rgba(255,255,255,.8)',
              }
            }
          },
          xAxis: {
            axisLabel:{color:'rgba(255,255,255,.9)',interval:1},
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
            splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
          }
        },
        screenWidth: document.body.clientWidth, // 屏幕尺寸
        timer:null,
        /**/
        ajData:{
          allList:[
            {"name": "球形摄像头","className":"qx","total":16,"online":14,"offline":2 },
            {"name": "枪机摄像头","className":"qj", "total":58,"online":52,"offline":4},
          ],
          kjfhyList:[
            {"name": "球形摄像头","className":"qx","total":6,"online":6,"offline":0 },
            {"name": "枪机摄像头","className":"qj", "total":2,"online":2,"offline":0},
          ],
          dfList:[
            {"name": "球形摄像头","className":"qx","total":7,"online":7,"offline":0 },
            {"name": "枪机摄像头","className":"qj", "total":2,"online":2,"offline":0},
          ],
          qswList:[
            {"name": "球形摄像头","className":"qx","total":5,"online":5,"offline":0 },
            {"name": "枪机摄像头","className":"qj", "total":1,"online":1,"offline":0},
          ],
          dsList:[
            {"name": "球形摄像头","className":"qx","total":8,"online":8,"offline":0 },
            {"name": "枪机摄像头","className":"qj", "total":2,"online":2,"offline":0},
          ],
          ysgList:[
            {"name": "球形摄像头","className":"qx","total":30,"online":30,"offline":0 },
            {"name": "枪机摄像头","className":"qj", "total":9,"online":9,"offline":0},
          ],
        },


      }
    },
    created (){
      this.token = JSON.parse(sessionStorage.getItem("token"))
      this.initData();
    },
    mounted () {
      const that = this
      window.screenWidth = document.body.clientWidth
      that.screenWidth = window.screenWidth
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
      that.$nextTick(function () {
        that.timer = setInterval(that.initThree,180000)
      })
    },
    beforeDestroy() {
      if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    methods:{
        resetData(){

        },
      initData(){
        let vm = this;
        this.initEconomic();
        this.gethbData();
        this.getGwData();
        this.getAjData();
        // if(vm.currentCode =='361003406003'){
        //   vm.ajList=vm.ajData.kjfhyList;
        // }else if(vm.currentCode =='361003406004'){
        //   vm.ajList=vm.ajData.dfList;
        // }else if(vm.currentCode =='361003406002'){
        //   vm.ajList=vm.ajData.qswList;
        // }else if(vm.currentCode =='361003406005'){
        //   vm.ajList=vm.ajData.dsList;
        // }else if(vm.currentCode =='361003406001'){
        //   vm.ajList=vm.ajData.ysgList;
        //   for(const item of vm.ajList){
        //       if(item.name==='枪机摄像头' && item.total>0){
        //           item.online = item.total - 4
        //           item.offline = 4
        //       }else{
        //           item.online = item.total - 2
        //           item.offline = 2
        //       }
        //   }
        // }else{
        //   vm.ajList= vm.ajData.allList;
        //   // 假数据
        //   for(const item of vm.ajList){
        //       if(item.name==='枪机摄像头' && item.total>0){
        //           item.online = item.total - 4
        //           item.offline = 4
        //       }else{
        //           item.online = item.total - 2
        //           item.offline = 2
        //       }
        //   }
        // }
        // console.log(ajList)


      },
      initThree(){
        this.gethbData();
        this.getGwData();
        this.getAjData()
      },
      initAllData(data){
        let vm = this;
        if(vm.$Util.isEmpty(vm.currentCode) ||  vm.currentCode !== data.code){
          vm.currentCode = data.code;
        }else{
          vm.currentCode = '';
        }
        vm.initData();
      },
      getGwData(){
        let vm = this;
        vm.$http.post('/baseService/gw/getData.do?areaCode='+vm.currentCode,{}).then(function (resp) {
          let t = resp.data
          vm.gwList = t.gw;
          /*if(t.status == 1){
            vm.hbList = t.retContent;
          }*/
        })
      },
      gethbData(){
        let vm = this;
        vm.$http.post('/smartdx/info/web/macInfo?ssyq='+vm.currentCode).then(function (resp) {
          let t = resp.data
          if(t.status == 1){
            vm.hbList = t.retContent;
            // 假数据
            for(const item of vm.hbList){
                if(item.name==='烟气排放监测仪' && item.total>0){
                }else{
                    item.online = item.total
                    item.offline = 0
                }
            }
          }
        })
      },
      getAjData(){
        let vm = this;
        vm.$http.get('/bmsVideo/videoList',{params:{areaCode:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.aj)) {
            // 假数据
            if(vm.currentCode =='361003406001'||vm.currentCode=='') {
                for (const item of _data.aj) {
                    if (item.name === '枪机摄像头') {
                        item.online = item.total - 4
                        item.offline = 4
                    } else if(item.name === '球形摄像头'){
                        item.online = item.total - 2
                        item.offline = 2
                    }
                }
            }else{
                for (const item of _data.aj) {
                    item.online = item.total
                    item.offline = 0
                }
            }vm.ajList = _data.aj;
            console.log(vm.ajList)
          }
        })
      },
      /*产业经济*/
      initEconomic(){
        let vm = this;
        vm.getGyjjTotalData();
        vm.getZdcyTotalData();
        vm.getZhnhTotalData();
        if (vm.activeTab =='qy'){  vm.getTwoData(); }else if(vm.activeTab =='nh'){ vm.getThreeData(); }else{ vm.getCzData(); }
      },
      getGyjjTotalData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/gyjj/total',{params:{year:vm.year,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            let t = resp.data.data
            vm.gyjjTotalData = t;
          }
        })
      },
      getZdcyTotalData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/zdcy/total',{params:{year:vm.year,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            let t = resp.data.data
            vm.zdcyTotalData = t;
          }
        })
      },
      getZhnhTotalData(){
        let vm = this;
        vm.$http.get('/dx-economy-api/subject/zhnh/total',{params:{year:vm.year,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            vm.zhnhTotalData = _data.data;
          }
        })
      },
      initChartsByType(tab){
        if (tab =='qy'){
          this.getTwoData();
        }else if(tab =='nh'){
          this.getThreeData();
        }else{
          this.getCzData();
        }
        this.activeTab = tab;

      },
      getCzData(){
        let vm = this;
        let _start = vm.year +'-01',_end =  vm.timeFilter[1];
        vm.$http.get('/dx-economy-api/zhyxCharts/czhy',{params:{startDate:_start,endDate:_end,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            let t = resp.data.data
            vm.chartsTitle.left = '总产值(亿元)';
            vm.draw('chartsOne', t.xAxis, t.value);
          }
        })
      },
      getTwoData(){
        let vm = this;
        let _start = vm.year +'-01',_end =  vm.timeFilter[1];
        vm.$http.get('/dx-economy-api/zhyxCharts/qyfz',{params:{startDate:_start,endDate:_end,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            let t = resp.data.data
            vm.chartsTitle.left = '金额(万元)';
            vm.draw('chartsTwo', t.xAxis, t.value);
          }
        })
      },
      getThreeData(){
        let vm = this;
        let _start = vm.year +'-01',_end =  vm.timeFilter[1];
        vm.$http.get('/dx-economy-api/zhyxCharts/zhnh',{params:{startDate:_start,endDate:_end,plat:vm.currentCode}}).then(function (resp) {
          let _data = resp.data;
          if(_data.code === 200 && !vm.$Util.isEmpty(_data.data)) {
            let t = resp.data.data
            vm.chartsTitle.left = '吨标准煤';
            vm.chartsTitle.right = '同比(%)';
            vm.drawLine('chartsThree', t.xAxis, t.value, null, t.value2);
          }
        })
      },
      drawLine(container,cate,d1,d2,d3){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          xAxis: {
            type:"category",
            data: cate,
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
          },
          grid:{top:30,bottom:30},
          yAxis:[
            {
              type: 'value',
              name: vm.chartsTitle.left,
              /*minInterval: 10,*/
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{
                color:'rgba(255,255,255,.8)',
                formatter: function (value) {
                  let texts = [];
                  if(value<1000){
                    texts.push(value)
                  }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
                    texts.push(Math.ceil(value/1000) + "千")
                  }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
                    texts.push(Math.ceil(value/10000) + "万")
                  }else if(Math.ceil(value/1000000)>=1){
                    texts.push(Math.ceil(value/1000000) + "百万")
                  }
                  return texts
                }},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
            },
            {
              type: 'value',
              name: vm.chartsTitle.right,
              /*minInterval: 100,*/
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{color:'rgba(255,255,255,.8)'},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{show:false}
            }
          ],
          series: [
            {
              name: vm.chartsTitle.left,
              type: 'bar',
              color:"#6ee988",
              data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
              itemStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6ee988' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#6ee988' // 100% 处的颜色
                  }]
                }
              }
            },
            {
              name: vm.chartsTitle.left,
              type: 'bar',
              color:"#16e1ff",
              data: d2,//[100,200,33,56,188,123,143,23,99],//res.zcz
              itemStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#16e1ff' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#16e1ff' // 100% 处的颜色
                  }]
                }
              }
            },
            {
              name: vm.chartsTitle.right,
              type: 'line',
              yAxisIndex: 1,
              color:"#e0e63d",
              data: d3,//[10,20,30,44,77,55,66,22,100],//res.tb
              areaStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#e0e63d' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }]
                }
              }
            }]
        }
        myChart.setOption($.extend(true,op,vm.defaultOp));
      },
      draw(container,cate,d1,d2,d3){
        let vm = this
        let myChart = vm.$echarts.init(document.getElementById(container))
        let op = {
          xAxis: {
            type:"category",
            data: cate,
            axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}}
          },
          grid:{top:30,bottom:30,right:10},
          yAxis:[
            {
              type: 'value',
              name: vm.chartsTitle.left,
              /*minInterval: 10,*/
              nameTextStyle:{color:'rgba(255,255,255,.8)'},
              axisLabel:{
                color:'rgba(255,255,255,.8)',
                formatter: function (value) {
                  let texts = [];
                  if(value<1000){
                    texts.push(value)
                  }else if(Math.ceil(value/1000)>=1&&Math.ceil(value/1000)<10){
                    texts.push(Math.ceil(value/1000) + "千")
                  }else if(Math.ceil(value/10000)>=1&&Math.ceil(value/10000)<100){
                    texts.push(Math.ceil(value/10000) + "万")
                  }else if(Math.ceil(value/1000000)>=1){
                    texts.push(Math.ceil(value/1000000) + "百万")
                  }
                  return value
                }},
              axisLine:{lineStyle:{color:'rgba(255,255,255,.3)'}},
              splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}}
            }
          ],
          series: [
            {
              name: vm.chartsTitle.left,
              type: 'bar',
              color:"#6ee988",
              data: d1,//[100,200,33,56,188,123,143,23,99],//res.zcz
              itemStyle: {
                color: {
                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6ee988' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#6ee988' // 100% 处的颜色
                  }]
                }
              }
            }
            ]
        }
        myChart.setOption($.extend(true,op,vm.defaultOp));
      }
    },
  }
</script>
<style scoped>
  .main-boxs{width: 100%;height: 100%;}
  .left-box{width: 412px;height: calc(100% - 10px);padding-top: 10px;float: left;}
  .center-box{width:calc(100% - 814px);height: calc(100% - 10px);float: left;margin:0 10px;}
  .right-box{width:380px;height: calc(100% - 8px);margin-top: 10px;float: right;}
  .common-block{border:1px solid #085ba8;background: rgba(8,91,168,0.05);}
  .common-title{width: 100%;height:34px;line-height:38px;background: url("../assets/images/index/titlebg.png") no-repeat center top;color:#ec9c45;text-align: center;font-size: 16px;margin-top: -3px;}
  .gw-box{width: calc(100% - 12px);height:calc(100% - 240px);padding: 0 6px;}
  .gw-ul{width:100%;height: calc(100% - 34px);}
  .gw-li{width: calc(50% - 15px);height:calc(100% / 3 - 10px);margin:0 0px 10px 0;float: left;padding: 0 5px;border:1px solid #034d81;background: rgba(8,91,168,0.2); }
  .gw-li:nth-child(2n+1){margin-right:6px;}
  .gwli-title{width: calc(100% - 36px);height:30px;line-height:30px;padding-left:36px;color:#20dbfd;}
  .gwli-title.ywcsy{background: url("../assets/images/index/gw1.png") no-repeat left center;background-size:auto 120%;}
  .gwli-title.jgzt{background: url("../assets/images/index/gw2.png") no-repeat left center;background-size:auto 120%;}
  .gwli-title.yhqt{background: url("../assets/images/index/gw3.png") no-repeat left center;background-size:auto 120%;}
  .gwli-title.sjjzq{background: url("../assets/images/index/gw4.png") no-repeat left center;background-size:auto 120%;}
  .gwli-title.zsjly{background: url("../assets/images/index/gw5.png") no-repeat left center;background-size:auto 120%;}
  .gwli-title.rqznjczd{background: url("../assets/images/index/gw6.png") no-repeat left center;background-size:auto 120%;}
  .gwli-info{width: 100%;height:calc(100% -  30px);}
  .gwli-info>div{float: left;}
  .gwli-total{color: #20dbfd;font-size:27px;width: calc(100% - 100px);font-family:'Century';text-shadow:0px 0px 13px rgba(0,198,255,.8);}
  .gwli-other{width: 100px;height: 100%;display: flex;flex-flow: column;float: right;}
  .gwli-other>div{width:calc(100% - 22px);padding-left: 22px;color: #fff;font-size: 12px;display: flex;flex: 1;align-items: center;}
  .gwli-online{background: url("../assets/images/index/online.png") no-repeat left center; }
  .gwli-offline{background: url("../assets/images/index/offline.png") no-repeat left center;}
  .gwli-warn{background: url("../assets/images/index/warn.png") no-repeat left center;}
  .aj-box{width: calc(100% - 12px);height:230px;padding: 0 6px;margin-top: 10px;}
  .aj-ul{width: 100%;height:calc(100% - 38px);}
  .aj-box .aj-li{width: calc(50% - 18px);height:calc(100% - 30px);margin:30px 6px 0px 0;float: left;padding: 0 5px;border:1px solid #034d81;background: rgba(8,91,168,0.2);}
  .ajli-icon{width: 57px;height: 65px;margin: -33px auto 0;}
  .ajli-icon.qx{background: url("../assets/images/index/ajball.png") no-repeat center;}
  .ajli-icon.qj{background: url("../assets/images/index/ajq.png") no-repeat center;}
  .ajli-icon.kqzl{background: url("../assets/images/index/hbAir.png") no-repeat center;}
  .ajli-icon.zsyc{background: url("../assets/images/index/hbNoice.png") no-repeat center;}
  .ajli-icon.yqpf{background: url("../assets/images/index/hbYan.png") no-repeat center;}
  .ajli-icon.szjc{background: url("../assets/images/index/hbWater.png") no-repeat center;}
  .ajli-total{width: 100%;color: #20dbfd;height: 30px;line-height:20px;font-size:27px;width:100%;font-family:'Century';text-shadow:0px 0px 13px rgba(0,198,255,.8);text-align: center;}
  .ajli-name{width: 100%;color: #20dbfd;height:24px;line-height:24px;text-align: center;}
  .ajli-other{width: 100%;height: calc(100% - 100px);text-align: center;display: flex;flex-flow: column}
  .ajli-other>div{width:100%;color: #fff;font-size: 12px;display: flex;flex: 1;align-items: center;justify-content: center;text-align: center;}
  .ajli-online span{width:20px;height: 16px;background: url("../assets/images/index/online.png") no-repeat left center; }
  .ajli-offline span{width:20px;height: 16px;background: url("../assets/images/index/offline.png") no-repeat left center;}
  .ajli-warn span{width:20px;height: 16px;background: url("../assets/images/index/warn.png") no-repeat left center;}
  /*map*/
  .map-box{width: 100%;height: calc(100% - 218px);overflow-x: hidden;margin-bottom:0px;position: relative;}
  .hb-box{width: calc(100% - 12px);height:230px;padding: 0 6px;}
  .hb-box .aj-li{width: calc(100% /4 - 18px);height:calc(100% - 30px);margin:30px 6px 0px 0;float: left;padding: 0 5px;border:1px solid #034d81;background: rgba(8,91,168,0.2);}
  /*产业经济*/
  .economic-ul{height:290px;width: calc(100% - 12px);padding:0 6px;margin-bottom: 20px;}
  .el-li{width: calc(50% - 15px);/*height:calc(100% / 3 - 10px);*/height:88px;margin:0 0px 10px 0;float: left;padding: 0 5px;border:1px solid #034d81;background: rgba(8,91,168,0.2); }
  .el-li:nth-child(2n+1){margin-right: 6px;}
  .el-name{width:100%;height:30px;line-height:30px;font-size: 12px;color:#20dbfd;}
  .el-info{width: 100%;height: calc(100% - 40px);}
  .el-info>div{float: left}
  .el-total{color: #20dbfd;font-size:27px;line-height: 60px;width: calc(100% - 55px);font-family:'Century';text-shadow:0px 0px 13px rgba(0,198,255,.8);}
  .el-per{width:54px;float: right;line-height:70px;text-align: right}
  .el-per.up-red{color:#ff0000;}
  .el-per.down-green{color:#12fe81;}
  .charts-box{height: calc(100% - 336px - 10px);width:calc(100% - 12px);padding:0 6px;overflow-y:hidden;}
  .tab-box{width:calc(100% - 2px);border:1px solid #034d82;height: 42px;text-align: center;}
  .tab-li{float: left;height: 42px;line-height: 42px;width: calc(100% / 3 - 1px);border-right:1px solid #034d82;color: #fff;font-size: 12px;background:rgba(8,91,168,0.3);cursor: pointer}
  .tab-li:last-child{border-right: 0px;width: calc(100% / 3);}
  .tab-li.active{color: #ec9c45;background:rgba(8,91,168,0.5);}
  .chart-box{width:calc(100% - 10px);height: calc(100% - 54px);background:rgba(8,91,168,0.2);padding: 5px;}

  .map-info{width: 360px;height:270px;position:absolute;top:calc(50% - 120px);left:calc(50% - 165px);}


  .map-info.samllSize{width:260px;height:230px;position:absolute;top:calc(50% - 96px);left:calc(50% - 130px);}
  .map-info.normalSize{width:400px;height:340px;position:absolute;top:calc(50% - 180px);left:calc(50% - 200px);}
  .map{width: 100%;height: 100%}
  .map{/*width:400px;height:368px;position:absolute;top:calc(50% - 200px);left:calc(50% - 200px);*/background:url("../assets/images/map.png") no-repeat center;background-size:auto 108%;}
  .map-item{position: absolute;z-index: 0;text-align: center;}
  .map-item:hover{cursor:pointer;}
  .samllSize .map-item.kjfhy{width:48px;height: 73px;top:34px;left:72px;background:url("../assets/images/small/kjfhy.png") no-repeat;}
  .samllSize .map-item.kjfhy:hover,.samllSize .map-item.kjfhy.active{width:54px;height: 73px;top:34px;left:69px;background:url("../assets/images/small/kjfhyOn.png") no-repeat;}
  .samllSize .map-item.df{width: 56px;height: 54px;top:36px;left:104px;background:url("../assets/images/small/df.png") no-repeat;}
  .samllSize .map-item.df:hover,.samllSize .map-item.df.active{width: 59px;height: 59px;top:31px;left: 104px;background:url("../assets/images/small/dfOn.png") no-repeat;}
  .samllSize .map-item.qsw{width:43px;height:41px;top:30px;left:172px;background:url("../assets/images/small/qsw.png") no-repeat;}
  .samllSize .map-item.qsw:hover,.samllSize .map-item.qsw.active{width:44px;height:46px;top:25px;left:172px;background:url("../assets/images/small/qswOn.png") no-repeat;}
  .samllSize .map-item.ds{width: 71px;height: 65px;top:95px;left:34px;background:url("../assets/images/small/ds.png") no-repeat;}
  .samllSize .map-item.ds:hover,.samllSize .map-item.ds.active{width: 71px;height: 71px;top:89px;left: 34px;background:url("../assets/images/small/dsOn.png") no-repeat;}
  .samllSize .map-item.ysg{width: 103px;height: 86px;top:140px;left:55px;background:url("../assets/images/small/ysg.png") no-repeat;}
  .samllSize .map-item.ysg:hover,.samllSize .map-item.ysg.active{width: 109px;height: 91px;top:135px;left: 55px;background:url("../assets/images/small/ysgOn.png") no-repeat;}

  .normalSize .map-item.kjfhy{width:71px;height: 94px;top:85px;left:105px;background:url("../assets/images/normal/kjfhy.png") no-repeat;}
  .normalSize .map-item.kjfhy:hover,.normalSize .map-item.kjfhy.active{width:71px;height: 97px;top:82px;left: 105px;background:url("../assets/images/normal/kjfhyOn.png") no-repeat;}
  .normalSize .map-item.df{width: 74px;height: 71px;top:83px;left:166px;background:url("../assets/images/normal/df.png") no-repeat;}
  .normalSize .map-item.df:hover,.normalSize .map-item.df.active{width: 125px;height: 123px;top:78px;left: 166px;background:url("../assets/images/normal/dfOn.png") no-repeat;}
  .normalSize .map-item.qsw{width:57px;height:51px;top:80px;left: 254px;background:url("../assets/images/normal/qsw.png") no-repeat;}
  .normalSize .map-item.qsw:hover,.normalSize .map-item.qsw.active{width:97px;height:102px;top:74px;left:254px;background:url("../assets/images/normal/qswOn.png") no-repeat;}
  .normalSize .map-item.ds{width: 96px;height: 89px;top:164px;left:55px;background:url("../assets/images/normal/ds.png") no-repeat;}
  .normalSize .map-item.ds:hover,.normalSize .map-item.ds.active{width: 148px;height: 139px;top:159px;left: 55px;background:url("../assets/images/normal/dsOn.png") no-repeat;}
  .normalSize .map-item.ysg{width: 145px;height: 120px;top:230px;left:85px;background:url("../assets/images/normal/ysg.png") no-repeat;}
  .normalSize .map-item.ysg:hover,.normalSize .map-item.ysg.active{width: 196px;height: 171px;top:225px;left: 85px;background:url("../assets/images/normal/ysgOn.png") no-repeat;}

</style>