hubiaoscreen.git

<template>
  <div style="position:relative">
    <div style="display: flex; justify-content: space-around; margin-bottom: 1vh">
      <div>
        <div class="num-title">
          <div><span class="high-text">总</span>累计用水量</div>
        </div>
        <div class="num-item">
          <span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
          <!-- <span class="unit-text">m³</span> -->
        </div>
      </div>
      <div>
        <div class="num-title">
          <div><span class="high-text">本</span>年度累计用水量</div>
        </div>
        <div class="num-item">
          <span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
          <!-- <span class="unit-text">万m³</span> -->
        </div>
      </div>
      <div>
        <div class="num-title">
          <div><span class="high-text">昨</span>日累计用水量</div>
        </div>
        <div class="num-item">
          <span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
          <!-- <span class="unit-text">万m³</span> -->
        </div>
      </div>
      <!-- <div v-for="(item,index) in processData" :key="index">
        <div class="num-title">
          <div><span class="high-text">{{ item.firstEle }}</span>{{ item.endEle }}</div>
 
        </div>
        <div class="num-item">
          <span class="num-style color0" :class="[{ 'num-bg0': s !== '.' && index==0 },{ 'num-bg2': s !== '.' && index==1 },{'color2':index==1}]" v-for="(s, i) in item.count" :key="i">{{ s }}</span>
          <span class="unit-text">{{ item.unit }}</span>
        </div>
      </div> -->
    </div>
    <div>
      <!-- <div id="echartMap" style="width: 500px; height: 500px"></div> -->
      <!--地图-->
      <div id="mapcontainer" ref="mapcontainer" style="width: 9rem; height: 80vh"></div>
      <div class="map-infos">
        <dv-border-box-13>
          <div class="map-title">吉木乃县</div>
          <div class="map-item">
            <div class="item-title">安装水表数量:</div> <div class="item-num">328个</div>
          </div>
          <div class="map-item">
            <div class="item-title">累计用水量:</div> <div class="item-num">2943.8 m³</div>
          </div>
          <div class="map-item">
            <div class="item-title">当前欠费数量:</div><div class="item-num">3 户</div>
          </div>
        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import echartsGL from 'echarts-gl'
import datajson from './jimunai'
import { getScAmount } from '@/api/largeScreen'
// import { getLargeScreenProcessInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
export default {
  data() {
    return {
      amountTotal: [], // 今日累计处理量
      amountCurYearTotal: [], // 本年累计处理量
      amountYesterdayTotal: [], // 总累计处理量
      myChart: null,
      stationData: [],
      processData: [],
      data:[
        { name: '托普铁热克乡', value: (Math.random() * 1000 + 100).toFixed(0), centroid: [87.047533,47.875751], num: 1 },
        { name: '托普铁热克镇', value: (Math.random() * 1000 + 100).toFixed(0), centroid: [85.885448,47.439013],num: 1 },
        { name: '吉木乃镇', value: (Math.random() * 1000 + 100).toFixed(0),centroid: [85.882013,47.44893], num: 0 },
        { name: '喀尔交乡', value: (Math.random() * 1000 + 100).toFixed(0), centroid: [86.410528,47.201893],num: 0 },
        { name: '乌拉斯特镇', value: (Math.random() * 1000 + 100).toFixed(0),centroid: [85.782084,47.669236], num: 5 },
        { name: '托斯特乡', value: (Math.random() * 1000 + 100).toFixed(0), centroid: [86.13412,47.285077],num: 0 },
        { name: '恰勒什海乡', value: (Math.random() * 1000 + 100).toFixed(0),centroid: [86.153288,47.535675], num: 0 },
        { name: '别斯铁热克乡', value: (Math.random() * 1000 + 100).toFixed(0),centroid: [85.88913,47.309702], num: 0 },
        { name: '兵团一八六团', value: (Math.random() * 1000 + 100).toFixed(0),centroid: [85.678458,47.556221], num: 0 }
        // 托普铁热克镇、吉木乃镇、喀尔交乡、托斯特乡、兵团一八六团、别斯铁热克乡、恰勒什海乡、托普铁热克乡
      ]
    }
  },
  created() {
    this.getScAmount()
    // setTimeout(this.initChart, 5000)
    // this.initChart()
    // this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
  },
  props: {
    baseInfos: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
 
 
  },
  mounted() {
    // this.getData()
    this.$nextTick(() => {
      // this.getStationList()
      this.initCharts()
    })
  },
  methods: {
    getScAmount() {
      const param = {"orgTag":"dy"}
      getScAmount(param).then(res=>{
        if (res.succ == 1) {
          this.amountTotal = res.amountTotal.toString().split("")
          this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
          this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    initCharts() {
      const charts = echarts.init(this.$refs['mapcontainer'])
      let airData = this.data
      const option = {
        visualMap: {
         type: 'continuous',
         show: false,
         showLabel: true,
         left: '50',
         min: 0,
         inRange: {
            color: ['#0B3B79', '#146fd7']
         },
        //  seriesIndex:'0'
      },
      tooltip: {
         show: false
      },
      geo: {
         show: true,
         map: 'HUMAP',
         selectedMode: 'single',
         zoom:  1,
         roam: false,
         label: {
            normal: {
               show: false, // 省份名展示
               color: '#FFF',
            },
            emphasis: {
               show: true
            }
         },
         itemStyle: { // 最外层轮廓
            normal: {
               borderColor: '#2FB5FA',
               borderWidth: 2,
               shadowColor: '#01273F',
               shadowOffsetX: 0,
               shadowOffsetY: 10
            }
         }
      },
      series: [
         {
            name: 'light',
            zlevel: 30,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: airData,
            symbolSize: [8, 4],
            show:true,
            // encode: {
            //    value: 2
            // },
            showEffectOn: 'render', // 绘制完成后显示特效
            rippleEffect: {
               brushType: 'stroke',
              //  color: '#0efacc',
              //  period: 9,
              //  scale: 5
            },
            label: {
               show: false,
               color: '#FFF',
               formatter: '{b}',
               offset: [0, -12]
            },
            hoverAnimation: true,
         },
         {
            type: 'map',
            zlevel: 20,
            map: 'HUMAP',
            roam: false,
            zoom: 1,
            showLegendSymbol: true, // 存在legend时显示
            label: {
               show: true,
               color: '#fff'
            },
            itemStyle: {
               normal: {
                  borderColor: '#2FB5FA',
                  borderWidth: 2
               },
               emphasis: {
                  areaColor: '#2C7FD6',
                  label: {
                     show: true
                  }
               }
            },
            data: airData
         },
      ]
 
      }
      const dealWithData = (data) => {
      return data.map(item => {
         return {
            name: item.name,
            value: item.value,
            centroid: item.centroid,
            center: item.centroid
            // adcode: item.properties.adcode,
         }
      })
   }
   let dataValue = dealWithData(airData)
   option.series[1].data = dataValue;
   option.series[0].data = dataValue.map(item => {
      return {
         name: item.name,
         value: item.value,
         itemStyle: {
            normal: {
               color: '#0efacc'
            }
         },
        //  adcode: item.adcode,
      }
   })
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap('HUMAP', datajson)
      charts.setOption(option)
 
    }
  }
}
</script>
<style lang="scss" scoped>
.num-title {
  color: #fff;
  font-family: 'screen-font';
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  .high-text {
    font-size: 0.24rem;
    margin-right: 0.05rem;
  }
  .unit-text {
    font-size: 0.12rem;
    font-family: 'element-icons';
  }
}
 
.num-item {
  display: flex;
  // justify-content: space-between;
  overflow: hidden;
  align-items: flex-end;
  .num-style {
    font-size: 0.36rem;
    font-family: 'screen-font';
    padding: 0.05rem;
    background-size: 100% 100% !important;
  }
  .num-bg0 {
    background: url('../../../image/screen/bg_num_blue.png') no-repeat;
 
  }
  .num-bg1 {
    background: url('../../../image/screen/bg_num_green.png') no-repeat;
  }
  .num-bg2 {
    background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
  }
  .color0 {
    color: #36a8ff;
  }
  .color1 {
    color: #00f170;
  }
  .color2 {
    color: #04ddff;
  }
  .unit-text {
    color: #fff;
    margin-left: 5px;
  }
 
}
.map-infos {
    // border: 1px dashed #ddd;
    width: 4.0rem;
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    // margin-top: 0.5rem;
    font-size: .2rem;
    color: #d0cbcb;
  }
.map-title {
  padding: 0.15rem;
  text-align: center;
}
.map-item {
  display: flex;
  padding: 0.15rem;
  font-size: .2rem;
  align-items: center;
  .item-title {
    width: 50%;
    font-size: 0.1rem;
    letter-spacing: 2px;
  }
  .item-num {
    font-family: 'screen-font';
  }
}
.dv-border-box-13 {
  padding: .2rem;
}
</style>