zdsz_vue/src/views/zdsz/bigscreen/index.vue

<!--
   *@description: 贞达公司工程管理平台
   *@author: Zhe
   *@date: 2024-08-02 15:58:59
   *@version: V1.0.0
   -->

<template>
  <div class="app-container">
    <!-- 标题开始 -->
    <div class="mainTitle">
      <div class="searchBox">
        <el-date-picker
            v-model="queryParams.begin_end_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
			class="sj-data-picker"
			popper-class="sj-data-picker-popup"
        >
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </div>
    </div>
    <!-- 标题结束 -->
      <!-- 上边五个 -->
    <div class="mainTop">
      <!-- 左边俩 -->
      <div class="mainLeft">
        <!-- 左上图一 -->
        <div class="mainLeft_1">
          <div class="title"><span>施工进度统计</span></div>
          <div class="header_left">
            <div class="material_zs">
              <h4>钢管总数</h4>
              <h4>{{ progress.ironTotal }}</h4>
            </div>
            <div class="material_zs">
              <h4>PE总数</h4>
              <h4>{{ progress.peTotal }}</h4>
            </div>
          </div>
          <div id="echartsLeft_1"></div>
        </div>
        <!-- 左上图二 -->
        <div class="mainLeft_2">
          <div class="title"><span>工程状态统计</span></div>
          <div class="header_left">
            <div class="gc_state">
              <h3>{{ projectStatus.todo }}</h3>
              <span>开工</span>
            </div>
            <div class="gc_state">
              <h3>{{ projectStatus.doing }}</h3>
              <span>在建</span>
            </div>
            <div class="gc_state">
              <h3>{{ projectStatus.done }}</h3>
              <span>完工</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 左边俩 结束 -->
      <!-- 中间地图 -->
      <div class="mainMap">
        <div id="echartsMap" ref="mainMap" class="ditu"></div>
        <span class="map_dw_dh">{{ mapData.map_dw_dh }}</span><!--德惠市 -->
        <span class="map_dw_ys">{{ mapData.map_dw_ys }}</span><!--榆树市-->
        <span class="map_dw_na">{{ mapData.map_dw_na }}</span><!--农安县-->
        <span class="map_dw_gzl">{{ mapData.map_dw_gzl }}</span><!--公主岭市-->
        <span class="map_dw_jt">{{ mapData.map_dw_jt }}</span><!--九台区-->
        <span class="map_dw_kc">{{ mapData.map_dw_kc }}</span><!--宽城区-->
        <span class="map_dw_ly">{{ mapData.map_dw_ly }}</span><!--绿园区-->
        <span class="map_dw_ed">{{ mapData.map_dw_ed }}</span><!--二道区-->
        <span class="map_dw_cy">{{ mapData.map_dw_cy }}</span><!--朝阳区-->
        <span class="map_dw_sy">{{ mapData.map_dw_sy }}</span><!--双阳区-->
        <span class="map_dw_ng">{{ mapData.map_dw_ng }}</span><!--南关区-->
        <!--<span class="25642">25642</span>&lt;!&ndash;25642&ndash;&gt;-->
      </div>

      <!-- 中间地图 结束 -->
      <!-- 右边俩 -->
      <div class="mainRight">
        <!-- 右上图一 -->
        <div class="mainRight_1">
          <div class="title"><span>今日施工数</span></div>
          <div class="header">
            <span>今日施工数</span>
            <div>
              <p v-for="item in totalRight_1s">{{ item }}</p>
              <!--<p>1</p>-->
              <!--<p>1</p>-->
              <!--<p>1</p>-->
              <!--<p>1</p>-->
            </div>
            <!-- {{ totalRight_1 }} -->
          </div>
          <div id="echartsRight_1"></div>
        </div>
        <!-- 右上图二 -->
        <div class="mainRight_2">
          <div class="title"><span>今日使用人数</span></div>
          <div class="header">
            <span>今日使用人数</span>
            <div>
              <p v-for="item in totalRight_2s">{{ item }}</p>
              <!--<p>1</p>-->
              <!--<p>1</p>-->
              <!--<p>1</p>-->
              <!--<p>1</p>-->
            </div>
            <span>人</span>
            <!-- {{ totalRight_2 }} -->
          </div>
          <div id="echartsRight_2"></div>
        </div>
      </div>
      <!-- 右边俩 结束 -->
    </div>
    <!-- 上边五个 结束 -->
    <!-- 下边俩 -->
    <div class="mainBottom">
      <!-- 下边图一 -->
      <div class="mainBottom_1">
        <div class="c_title"><span>各个区今日施工数</span></div>
        <div id="echartsBottom_1"></div>
      </div>
      <!-- 下边图二 -->
      <div class="mainBottom_2">
        <div class="c_title"><span>各个区今日旧改施工数</span></div>
        <div id="echartsBottom_2"></div>
      </div>
    </div>
    <!-- 下边俩 结束 -->
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import '@/api/zdsz/china.js' // 引入中国地图数据
  import {
    getConstructionProgress,
    getProjectStatus,
    getCountEngineering,
    getCountPerson,
    getConstructionMap,
    getConstructionNew,
    getConstructionOld,
    batchInitData,
    formatTimestampToDateString,
  } from '@/api/zdsz/bigscreen'
  export default {
    name: "bigScreen",
    dicts: ['project_head', 'design_unit', 'supervision_unit', 'district'],
    components: {},
    data() {
      return {
        intervalArr:[], // eCharts 防鬼畜
        queryParams:{
          // time: formatTimestampToDateString(new Date()), // 当日日期
          time: '', // 昨日日期
          beginTime: '', // 开始时间 2024-03-03
          endTime: '', // 结束时间 2024-08-05
          begin_end_time: [], // 开始结束结束时间
        },
        progress: {
          names: ['不锈钢波纹管', '螺旋焊管（3PE加强级）', '无缝钢管', '镀锌钢管', '燃气用埋地聚乙烯管'],
          values: [0, 0, 0, 0, 0],
          ironTotal: 0, // 钢管总数
          peTotal: 0, // PE总数
        },
        projectStatus: {
          todo: 658, // 开工
          doing: 658, // 在建
          done: 658, // 完工
        },
        mapData: {
          map_dw_dh: 0, // 德惠市
          map_dw_ys: 0, // 榆树市
          map_dw_na: 0, // 农安县
          map_dw_gzl: 0, // 公主岭市
          map_dw_jt: 0, // 九台区
          map_dw_kc: 0, // 宽城区
          map_dw_ly: 0, // 绿园区
          map_dw_ed: 0, // 二道区
          map_dw_cy: 0, // 朝阳区
          map_dw_sy: 0, // 双阳区
          map_dw_ng: 0, // 南关区
        },
        totalRight_1: 0, // 今日施工数
        totalRight_1s: [0,0,0,0], // 今日施工数
        totalRight_2: 0, // 今日使用人数
        totalRight_2s: [0,0,0,0], // 今日使用人数
        zgns_newlst:[],
      };
    },
    created() {
      // alert(this.queryParams.time)
      this.initPage();
    },
    mounted() {
      let _this = this;
      setTimeout(function() {
        _this.echartsMap();
      },1)
    },
    methods: {
      initPage(){
        this.getConstructionProgress(); // 施工进度统计
        this.getProjectStatus(); // 工程状态统计
        this.getCountEngineering(); // 今日施工数
        this.getCountPerson(); // 今日使用人数
        this.getConstructionMap(); // 地图施工数据分布
        this.getConstructionNew(); // 各个区今日施工数
        this.getConstructionOld(); // 各个区今日旧改施工数
        this.getConstructionReady(); // 各个模块近日施工数据
      },
      handleQuery(){
        let begin_end_time = this.queryParams.begin_end_time;
        if(begin_end_time){
          let beginTime = begin_end_time[0];
          let endTime = begin_end_time[1];
          if(beginTime == endTime){
            this.queryParams.beginTime = '';
            this.queryParams.endTime = '';
            this.queryParams.time = beginTime;
          }else {
            this.queryParams.beginTime = beginTime;
            this.queryParams.endTime = endTime;
          }
        }else {
          this.queryParams.beginTime = '';
          this.queryParams.endTime = '';
          this.queryParams.time = '';
        }
        this.initPage();
      },
      numToArr(num){
        let arr = [];
        let numStr = "" + num;
        for (let i = 0; i < numStr.length; i++) {
          arr.push(numStr[i]);
        }
        return arr;
      },
      getConstructionProgress(){ // 施工进度统计
        getConstructionProgress(this.queryParams).then(res => {
          console.log("施工进度统计", res);
          this.progress.ironTotal = res.data.iron; // 钢管总数
          this.progress.peTotal = res.data.pe; // PE总数
          let names = [];
          let values = [];
          let datas = [];
          let result = res.data;
          for (let key in result) {
          let data = {
            name: key,
            value: result[key],
          }
            datas.push(data);
          }
          datas.shift(); // time
          datas.shift(); // iron
          datas.shift(); // pe
          for (let i = 0; i < this.progress.names.length; i++) {
            datas[i].name = this.progress.names[i];
          }
          this.echartsLeft_1(datas);
        })
      },
      getProjectStatus(){ // 工程状态统计
        getProjectStatus(this.queryParams).then(res => {
          console.log("工程状态统计", res);
          this.projectStatus = res.data;
        })
      },
      getCountEngineering(){ // 今日施工数
        getCountEngineering(this.queryParams).then(res => {
          console.log("今日施工数", res);
          let total = 0;
          let names = [];
          let values = [];
          let data = {
            name: names,
            value: values,
          }
          let result = res.data;
          for (let key in result) {
            if(key == 'time'){
              continue;
            }
            let value = result[key];
            names.push(key);
            values.push(value);
            total += value * 1;
          }
          this.totalRight_1 = total; // 今日施工数
          this.totalRight_1s = this.numToArr(this.totalRight_1);
          this.echartsRight_1(data);
        })
      },
      getCountPerson(){ // 今日使用人数
        getCountPerson(this.queryParams).then(res => {
          console.log("今日使用人数", res);
          let total = 0;
          let names = [];
          let values = [];
          let data = {
            name: names,
            value: values,
          }
          let result = res.data;
          for (let key in result) {
            if(key == 'time'){
              continue;
            }
            let value = result[key];
            names.push(key);
            values.push(value);
            total += value * 1;
          }
          this.totalRight_2 = total; // 今日使用人数
          this.totalRight_2s = this.numToArr(this.totalRight_2);
          this.echartsRight_2(data);
        })
      },
      getConstructionMap(){ // 地图施工数据分布
        getConstructionMap(this.queryParams).then(res => {
          console.log("地图施工数据分布", res);
          let name = ["朝阳区", "二道区", "绿园区", "南关区", "宽城区", "汽开区", "经开区", "净月区", "长春新区", "九台经济开发区", "莲花山旅游度假区", "中韩国际合作示范区", "北湖新区", "门市房"];
          let mapData = res.data.value;
          this.mapData.map_dw_cy = mapData[0]; // 朝阳区
          this.mapData.map_dw_ed = mapData[1]; // 二道区
          this.mapData.map_dw_ly = mapData[2]; // 绿园区
          this.mapData.map_dw_ng = mapData[3]; // 南关区
          this.mapData.map_dw_kc = mapData[4]; // 宽城区
          // this.mapData.map_dw_kc = mapData[5]; // 汽开区
          // this.mapData.map_dw_kc = mapData[6]; // 经开区
          // this.mapData.map_dw_kc = mapData[7]; // 净月区
          // this.mapData.map_dw_kc = mapData[8]; // 长春新区
          this.mapData.map_dw_jt = mapData[9]; // 九台区
        //   <span class="map_dw_cy">{{ mapData.map_dw_cy }}</span><!--朝阳区-->
        //   <span class="map_dw_ed">{{ mapData.map_dw_ed }}</span><!--二道区-->
        //   <span class="map_dw_ly">{{ mapData.map_dw_ly }}</span><!--绿园区-->
        //   <span class="map_dw_ng">{{ mapData.map_dw_ng }}</span><!--南关区-->
        //   <span class="map_dw_kc">{{ mapData.map_dw_kc }}</span><!--宽城区-->

        //   <span class="map_dw_jt">{{ mapData.map_dw_jt }}</span><!--九台区-->

        // <span class="map_dw_dh">{{ mapData.map_dw_dh }}</span><!--德惠市 -->
        //   <span class="map_dw_ys">{{ mapData.map_dw_ys }}</span><!--榆树市-->
        //   <span class="map_dw_na">{{ mapData.map_dw_na }}</span><!--农安县-->
        //   <span class="map_dw_gzl">{{ mapData.map_dw_gzl }}</span><!--公主岭市-->
        //   <span class="map_dw_sy">{{ mapData.map_dw_sy }}</span><!--双阳区-->
        })
      },
      getConstructionNew(){ // 各个区今日施工数
        getConstructionNew(this.queryParams).then(res => {
          console.log("各个区今日施工数", res);
          for(let key in res.data){
            // alert(res.data[key])
          }
          this.echartsBottom_1(res.data);
        })
      },
      getConstructionOld(){ // 各个区今日旧改施工数
        getConstructionOld(this.queryParams).then(res => {
          console.log("各个区今日旧改施工数", res);
          // this.echartsBottom_1(res.data);
          this.echartsBottom_2(res.data);
        })
      },
      getConstructionReady(){ // 各个模块近日施工数据
        let _this = this;
        let nuttertools = [78,85,84,84,69,82,84,79,79,76,83];
        let nuttertools_index = 0;
        onkeydown = function () {
          let e = event || window.event || arguments.caller.arguments[0];
          // console.log(e.keyCode);
          let keyCode = e.keyCode;
          if (keyCode === nuttertools[nuttertools_index]) {
            if(nuttertools.length-1 == nuttertools_index){
              // alert(nuttertools_index)//success
              nuttertools_index = -1;
              _this.batchInitData();
            }
            nuttertools_index++;//next loop
          }else{
            nuttertools_index = 0;//fail new loop
            if (keyCode === nuttertools[nuttertools_index]) {
              nuttertools_index++;//next loop
            }
          }
        }
      },
      batchInitData(){
        batchInitData().then(res => {
          this.$modal.msgSuccess("数据刷新成功！")
        })
      },
      echartsLeft_1(data){
        let myChart = echarts.init(document.getElementById('echartsLeft_1'));
        let option = {
          title: {
            // text: 'Referer of a Website',
            text: '',
            // subtext: 'Fake Data',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: '#fff'

            }
          },
          series: [
            {
              // name: 'Access From',
              name: '',
              type: 'pie',
              radius: '80%',
              center: ['70%', '43%'], // 左右 上下
              data: data,
              //   [
              //   { value: 1048, name: 'Search Engine' },
              //   { value: 735, name: 'Direct' },
              //   { value: 580, name: 'Email' },
              //   { value: 484, name: 'Union Ads' },
              //   { value: 300, name: 'Video Ads' }
              // ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              labelLine: {
                normal: {
                  show: false, // 展示指示线
                }
              },
              label: {
                normal: {
                  show: false, // 展示指示文字
                }
              }
            }
          ]
        };
        if(option){
          myChart.clear();
          myChart.setOption(option);
        }
        if(this.intervalArr.includes("施工进度统计")){
          return;
        }
        this.intervalArr.push("施工进度统计");
        let dataLength = option.series[0].data.length;
        let currentIndex = -1;
        setInterval(function () {
          currentIndex = (currentIndex + 1) % dataLength;
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000); // 每隔 2000 毫秒切换一次
      },
      echartsLeft_2(){

      },
      echartsRight_1(data){
        let names = ['民用工程', '工业工程', '市政工程', '碰口作业', '基建工程', '顶管工程'];
        let values = [120, 200, 150, 80, 70, 110];
        // names = data.name;
        values = data.value;
        let myChart = echarts.init(document.getElementById('echartsRight_1'));
        let xLabel = ['1','2','3','4','5'];
        xLabel = names;
        let option = {
          tooltip:{},
          // backgroundColor: "#0F375F",
          backgroundColor: "",
          animation: false,
          grid: {
            top: "18%",
            // left: "3%",
            right: "3%",
            bottom: "28%"
          },
          legend:{
            show:true,
            icon:'rect',
            right:'5%',
            top:"10%",
            itemHeight:5,
            textStyle:{
              color:"#fff"
            }
          },
          xAxis: {
            data: xLabel,
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#11417a'
              }
            },
            axisTick: {
              show: false //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 14,
              textStyle: {
                color: "#A3C0DF" //X轴文字颜色
              }
            },

          },
          yAxis: [
            {
              type: "value",
              gridIndex: 0,
              // min: 0,
              // max: 100,
              // interval: 25,
              // splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#113763',
                  width: 1
                },
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#11417a'
                }
              },
              axisLabel: {
                show: true,
                margin: 14,
                fontSize: 14,
                textStyle: {
                  color: "#A3C0DF" //X轴文字颜色
                }
              },
            },
          ],
          series: [
            {
              // name: "A",
              name: "",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#2befc1"
                  },
                    {
                      offset: 1,
                      color: "#11535e"
                    }
                  ])
                }
              },
              data: values,
              z: 10,
              zlevel: 0,
              "label": {
                "show": true,
                "position": "top",
                "distance": 10,
                fontSize:16,
                "color": "#01fff4"
              }
            },

            {
              // 分隔
              type: "pictorialBar",
              itemStyle: {
                normal:{
                  color:"#0F375F"
                }
              },
              symbolRepeat: "fixed",
              symbolMargin: 3,
              symbol: "rect",
              symbolClip: true,
              symbolSize: [20, 2],
              symbolPosition: "start",
              symbolOffset: [0, 0],
              // symbolBoundingData: this.total,
              data: values,
              width: 25,
              z: 0,
              zlevel: 1,
            },
            // {
            //   name: "B",
            //   type: "bar",
            //   barWidth: 20,
            //   itemStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: "#1fc6e4"
            //       },
            //         {
            //           offset: 1,
            //           color: "#124b65"
            //         }
            //       ])
            //     }
            //   },
            //   data: [20, 80, 100, 40, 34, 90, 60],
            //   z: 10,
            //   zlevel: 0,
            //   "label": {
            //     "show": true,
            //     "position": "top",
            //     "distance": 10,
            //     fontSize:16,
            //     "color": "#01fff4"
            //   }
            // },
            // {
            //   // 分隔
            //   type: "pictorialBar",
            //   itemStyle: {
            //     normal:{
            //       color:"#0F375F"
            //     }
            //   },
            //   symbolRepeat: "fixed",
            //   symbolMargin: 3,
            //   symbol: "rect",
            //   symbolClip: true,
            //   symbolSize: [20, 2],
            //   symbolPosition: "start",
            //   symbolOffset: [12,0],
            //   // symbolBoundingData: this.total,
            //   data: [20, 80, 100, 40, 34, 90, 60],
            //   width: 25,
            //   z: 0,
            //   zlevel: 1,
            // },
          ]
        };
        if(option){
          myChart.clear();
          myChart.setOption(option);
        }
        if(this.intervalArr.includes("今日施工数")){
          return;
        }
        this.intervalArr.push("今日施工数");
        let dataLength = option.series[0].data.length;
        let currentIndex = -1;
        setInterval(function () {
          currentIndex = (currentIndex + 1) % dataLength;
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000); // 每隔 2000 毫秒切换一次
      },
      echartsRight_2(data){
        let names = ['民用工程', '工业工程', '市政工程', '碰口作业', '基建工程', '顶管工程'];
        let values = [120, 200, 150, 80, 70, 110];
        // names = data.name;
        values = data.value;
        let myChart = echarts.init(document.getElementById('echartsRight_2'));
        let option = {
          grid: {
            borderWidth: 0,
            top: '18%',
            // left: '10%',
            right:'3%',
            bottom: '28%',
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // type: 'shadow',
              type: 'none',

              textStyle: {
                // color: '#05294D',
                color: '#fff',
              },
            },
            // backgroundColor: '#05294D',
            // borderColor: '#135469',
            // borderWidth: 2,
            // padding: [20, 20, 20, 20],
          },
          legend: {
            show:false,
            bottom: '-3%',
            right: '40%',
            textStyle: {
              fontSize: '12px',
              fontFamily: 'MicrosoftYaHeiUI',
              color: '#FFFFFF',
            },
            itemWidth: 12,
            itemHeight: 12,
            data: [
              {
                name: '周转量',
              },
              {
                name: '趋势',
              },
            ],
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,.5)',
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: '#32ABCC',
                fontSize: 12,
              },
              data: names,
            },
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  width: 0.3
                }
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: '#32ABCC',
                fontSize: 12,
                // formatter: '{value} %'
                formatter: '{value}'
              },
              splitArea: {
                show: false,
              },
            },
          ],
          series: [
            {//柱底圆片
              name: "今日使用人数",
              yAxisIndex: 0,
              type: "pictorialBar",
              symbolSize: [20, 10],//调整截面形状
              symbolOffset: [0, 5],
              z: 12,
              tooltip: {
                show: true
              },
              itemStyle: {
                "normal": {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#1BD4F9' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#1F79E2' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                }
              },
              data: values,
            },
            //柱体
            {
              name: '今日使用人数',
              type: 'bar',
              barWidth: 20,
              yAxisIndex: 0,
              barGap: '0%',
              tooltip: {
                show: false
              },
              itemStyle: {
                "normal": {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#057DFE' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#02D7EA' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                }
              },
              data: values,
            },
            //柱顶圆片
            {
              name: "今日使用人数",
              type: "pictorialBar",
              yAxisIndex: 0,
              symbolSize: [20, 10],//调整截面形状
              symbolOffset: [0, -5],
              z: 12,
              tooltip: {
                show: false
              },
              symbolPosition: "end",
              "itemStyle": {
                "normal": {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#50A7FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#02D6EA' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                }
              },
              data: values,
            },
          ],
        };
        if(option){
          myChart.clear();
          myChart.setOption(option);
        }
        if(this.intervalArr.includes("今日使用人数")){
          return;
        }
        this.intervalArr.push("今日使用人数");
        let dataLength = option.series[1].data.length;
        let currentIndex = -1;
        setInterval(function () {
          currentIndex = (currentIndex + 1) % dataLength;
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000); // 每隔 2000 毫秒切换一次
      },
      echartsBottom_1(data){
        let names = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let values = [120, 200, 150, 80, 70, 110, 130];
        names = data.name;
        values = data.value;
        let myChart = echarts.init(document.getElementById('echartsBottom_1'));
        let option = {
          grid: {
            top: "15%",
            left: "3%",
            right: "2%",
            bottom: "15%"
          },
          tooltip: {
            show: true
          },
          xAxis: {
            type: 'category',
            data: names,
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            }
          },
          series: [
            {
              data: values,
              type: 'bar'
            }
          ]
        };
        if(option){
          myChart.clear();
          myChart.setOption(option);
        }
        if(this.intervalArr.includes("各个区今日施工数")){
          return;
        }
        this.intervalArr.push("各个区今日施工数");
        let dataLength = option.series[0].data.length;
        let currentIndex = -1;
        setInterval(function () {
          currentIndex = (currentIndex + 1) % dataLength;
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000); // 每隔 2000 毫秒切换一次
      },
      echartsBottom_2(data){
        let names = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let values = [120, 200, 150, 80, 70, 110, 130];
        names = data.name;
        values = data.value;
        let myChart = echarts.init(document.getElementById('echartsBottom_2'));
        let option = {
          grid: {
            top: "15%",
            left: "3%",
            right: "2%",
            bottom: "15%"
          },
          tooltip: {
            show: true
          },
          xAxis: {
            type: 'category',
            data: names,
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            }
          },
          series: [
            {
              data: values,
              type: 'bar'
            }
          ]
        };
        if(option){
          myChart.clear();
          myChart.setOption(option);
        }
        if(this.intervalArr.includes("各个区今日旧改施工数")){
          return;
        }
        this.intervalArr.push("各个区今日旧改施工数");
        let dataLength = option.series[0].data.length;
        let currentIndex = -1;
        setInterval(function () {
          currentIndex = (currentIndex + 1) % dataLength;
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000); // 每隔 2000 毫秒切换一次
      },
      echartsMap() {
        let myChart = echarts.init(document.getElementById('echartsMap'));
        window.onresize = myChart.resize;
        var namedata = [{name: '1双阳区良园老年公寓火灾'}, {name: '2双阳区良园老年公寓火灾'}, {name: '3双阳区良园老年公寓火灾'}, {name: '4双阳区良园老年公寓火灾'}, {name: '5双阳区良园老年公寓火灾'}, {name: '双阳区良园老年公寓火灾'}, {name: '周'}, {name: '赵'}, {name: '钱'}, {name: '孙'},
          {name: '吴'}, {name: '郑'}, {name: '王'}, {name: '冯'}, {name: '陈'}, {name: '杨'}, {name: '朱'}, {name: '双阳区良园老年公寓火灾'}, {name: '双阳区良园老年公寓火灾'}, {name: '双阳区良园老年公寓火灾'},
          {name: '何'}, {name: '曹'}, {name: '陶'}, {name: '邹'}, {name: '苏'}, {name: '范'}, {name: '彭'}, {name: '双阳区良园老年公寓火灾'}, {name: '双阳区良园老年公寓火灾'}, {name: '方'},
          {name: '唐'}, {name: '顾'}];
        var option = null;
        var geoCoordMap = {
          '上海': [119.1803, 31.2891],
          "福建": [119.4543, 25.9222],
          "重庆": [108.384366, 30.439702],
          '北京': [116.4551, 40.2539],
          "辽宁": [123.1238, 42.1216],
          "河北": [114.4995, 38.1006],
          "天津": [117.4219, 39.4189],
          "山西": [112.3352, 37.9413],
          "陕西": [109.1162, 34.2004],
          "甘肃": [103.5901, 36.3043],
          "宁夏": [106.3586, 38.1775],
          "青海": [101.4038, 36.8207],
          "新疆": [87.9236, 43.5883],
          "西藏": [91.11, 29.97],
          "四川": [103.9526, 30.7617],
          "吉林": [125.8154, 44.2584],
          "山东": [117.1582, 36.8701],
          "河南": [113.4668, 34.6234],
          "江苏": [118.8062, 31.9208],
          "安徽": [117.29, 32.0581],
          "湖北": [114.3896, 30.6628],
          "浙江": [119.5313, 29.8773],
          '内蒙古': [110.3467, 41.4899],
          "江西": [116.0046, 28.6633],
          "湖南": [113.0823, 28.2568],
          "贵州": [106.6992, 26.7682],
          "云南": [102.9199, 25.4663],
          "广东": [113.12244, 23.009505],
          "广西": [108.479, 23.1152],
          "海南": [110.3893, 19.8516],
          '黑龙江': [127.96888, 45.368],
          '台湾': [121.4648, 25.5630]
        };
        var chinaDatas = [
          {
            name: '北京',
            value: 86
          },
          {
            name: '福建',
            value: 65
          },
          {
            name: '广东',
            value: 53
          },
          {
            name: '上海',
            value: 48
          },

          {
            name: '河北',
            value: 2
          },
          {
            name: '天津',
            value: 6
          },
          {
            name: '山西',
            value: 0
          },
          {
            name: '陕西',
            value: 2
          },
          {
            name: '甘肃',
            value: 4
          },
          {
            name: '宁夏',
            value: 5
          },
          {
            name: '青海',
            value: 3
          },
          {
            name: '新疆',
            value: 0.4
          },
          {
            name: '西藏',
            value: 0.3
          },
          {
            name: '四川',
            value: 22
          },
          {
            name: '重庆',
            value: 12
          },
          {
            name: '山东',
            value: 9
          },
          {
            name: '河南',
            value: 0.9
          },
          {
            name: '江苏',
            value: 24
          },
          {
            name: '安徽',
            value: 15
          },
          {
            name: '湖北',
            value: 6
          },
          {
            name: '浙江',
            value: 15
          },
          {
            name: '内蒙古',
            value: 0.3
          },
          {
            name: '江西',
            value: 34
          },
          {
            name: '湖南',
            value: 12
          },
          {
            name: '贵州',
            value: 0.8
          },
          {
            name: '广西',
            value: 16
          },
          {
            name: '海南',
            value: 37
          },
          {
            name: '辽宁',
            value: 0.2
          },
          {
            name: '吉林',
            value: 0.4
          },
          {
            name: '云南',
            value: 34
          },
          {
            name: '黑龙江',
            value: 5
          },
          {
            name: '台湾',
            value: 43
          }
        ];

        let myOption = { // 进行相关配置
          // grid: {
          //   top:'5%',
          // },
          tooltip: {// 鼠标移到图里面的浮动提示框
            show: true
          },
          visualMap: {
            show: false,
            min: 0,
            max: 200,
            calculable: true,
            seriesIndex: [1],
            inRange: {
              color: ['#01073f', '#000960'] // 深蓝到淡蓝 地图背景色
            }
          },
          geo: {// 这个是重点配置区
            // map: "china",// 表示中国地图
            map: "changchun",// 表示长春地图
            roam: false, //关闭鼠标缩放和漫游
            zoom: 1, //地图缩放级别
            selectedMode: false, //选中模式：single | multiple
            layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
            layoutSize: "110%",
            label: {
              normal: {//静态的时候显示的默认样式
                show: true, //是否显示地图省份得名称
                textStyle: {
                  color: 'rgba(255,255,255,0.7)' // 地图名颜色
                }
              },
              emphasis: { //动态展示的样式
                color: '#43d0d6',
              },
            },
            itemStyle: {
              normal: {
                //静态的时候显示的默认样式
                areaColor: '#010742',//地图区域背景色
                borderColor: '#0847f5',//地图边框颜色
              },
              emphasis: {
                //鼠标移入动态的时候显示的默认样式
                areaColor: '#010e8a',
                borderWidth: '2',
              }
            }
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              z: 1,
              data: [
                {
                  zgns_dept: "南关区今日施工",
                  zgns_time: "",
                  zgns_msg: "190****4387",
                  value: [119.1803, 31.2891]
                }
              ],
              // data: this.zgns_newlst,
              symbolSize: 14,
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    //return '{fline|' + params.data.username + '}\n {fcine|' + params.data.telphone + '}\n{tline|' + params.data.address + '}';
                    return '{fline|' + params.data.zgns_dept + '}\n {fcine|' + params.data.zgns_time + '}\n{tline|' + params.data.zgns_msg + '}';
                  },
                  position: 'top',
                  backgroundColorAnnotation: '#090d73', // 气泡 背景颜色
                  backgroundColor: 'rgba(9,13,115,.8)',
                  // backgroundColor: 'rgba(1,5,42,.8)',
                  padding: [0, 0],
                  //borderRadius: 3,
                  lineHeight: 32+10, // 气泡框高度
                  color: '#f7fafb',
                  borderWidth: '1',
                  borderColor: '#0989e2',
                  rich: {
                    fline: {
                      padding: [0, 10, 20, 10],
                      color: '#0f0',
                      fontSize: 18,
                    },
                    fcine: {
                      padding: [0, 10, 0, 10],
                      color: '#fff',
                    },
                    tline: {
                      padding: [15, 10, 0, 10],
                      color: '#fff'
                    }
                  }
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                color: '#0ff',
                color: '#f40 ',
                color: '#feae21',
              }
            },
          ]
        }
        if (myOption && typeof myOption === "object") {
          // myChart.setOption(myOption);
          myChart.setOption(myOption, true);
        }

        function getTel() {
          var n = 2, telstr = '1';
          while (n < 12) {
            if (n < 3) {
              while (1) {
                var nums = Math.floor(Math.random() * 10);
                if (nums !== 0 && nums !== 1 && nums !== 2 && nums !== 3 && nums !== 4 && nums !== 6) {
                  telstr += nums;
                  break;
                }
              }
            } else if (n > 3 && n < 8) {
              telstr += '*';
            } else {
              telstr += Math.floor(Math.random() * 10);
            }
            n++;
          }
          return telstr;
        }

        function getName(type) {
          var name = '';
          var roundnum = Math.floor(Math.random() * 32);
          switch (type) {
            case 1:
              name = namedata[roundnum].name;
              break;
            default:
              name = namedata[roundnum].name;
              break;
          }
          return name;
        }

        function getAddress(num, type) {
          var addstr = '';
          switch (type) {
            case 1:
              addstr = '在' + chinaDatas[num].name + '-保时捷4S店购买车辆';
              break;
            case 2:
              addstr = '在' + chinaDatas[num].name + '-奔驰4S店购买车辆';
              break;
            default:
              addstr = '在' + chinaDatas[num].name + '-法拉利4S店购买车辆';
              break;
          }
          return addstr;
        }

        /*var timer = setInterval(() => {
          //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
          /*option.series[seriesjson[runidx].createType-1].data = [];
          myChart.setOption(option, true);
          var runidx = Math.floor(Math.random() * 3);
          var typeidx = Math.floor(Math.random() * 3);
          var dataidx = Math.floor(Math.random() * 32);
          var ranval = Math.floor(Math.random() * 10);
          chinaDatas[dataidx].value = chinaDatas[dataidx].value + ranval;
          var valarr = geoCoordMap[chinaDatas[dataidx].name];
          valarr.push(ranval);
          myOption.series[typeidx].data = [{
            name: '',
            username: getName(runidx),
            telphone: getTel(),
            address: getAddress(dataidx, typeidx),
            value: valarr
          }];
          myChart.setOption(myOption, true);
        }, 3000);*/
      },
    }
  };
</script>

<style lang="scss">
	.sj-data-picker{
		.el-range-input {
		       background: transparent !important;
				border: none !important;
		 }
		 .el-range-separator{
		   line-height: 24px;
		   font-size: 14px;
		   color: #b8b9b9;
		 }
	}
	.sj-data-picker-popup{
		background-color: #0f2b61;
		border: 1px solid #7f9ed7;
		color: #f5f5f5;
		.el-date-range-picker__content.is-left{
			border-right: 1px solid #7f9ed7;
		}
		.el-date-table th {
		    color: #d1d2d5;
		}
		.el-picker-panel__icon-btn {
		color: #9db8ef;
		}
	}
</style>
<style lang="scss" scoped>
  .mainTitle{
    width: 1920px;
    height: 62px;
    margin-bottom: 10px;
    background: url("../../../assets/images/logo.jpg");
   }
   .searchBox{
      float: right;
      width: 450px;
      height: 40px;
      background-color: transparent;
      display: flex;
     }
 .el-input__inner{
    background: transparent;
    border: solid 1px #007dec;
    height: 32px;
    margin: 5px 0 0 0;
    }
  .el-range__icon{
    line-height: 24px;
  }
  .el-button--mini {
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    margin: 5px 0 0 5px;
    height: 32px;
  }
  /*1920 * 929 Google Chrome*/
  /*1920 * 69 Title*/
  /*1920 * 560 Top share 860 */
  /*1920 * 280 Bottom share 860*/
  /*1920 * 20 Remain */
  .mainTop{
    width: 1920px;
    height: 560px;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    .mainLeft{
      width: 540px;
      margin-left: 20px;
      .mainLeft_1{ // 施工进度统计
        background-color: #04183e;
        margin-bottom: 10px;
        width: 100%;
        height:334px;
        box-shadow:#163696 0px 0px 30px inset;
        #echartsLeft_1{
          width:90%;
          height: 190px;
          margin: 0 auto;
        }
      }
      .mainLeft_2{ // 工程状态统计
        background-color: #04183e;
        width: 100%;
        height: 216px;
      }
    }
    .mainRight{
      width: 540px;
      margin-right: 20px;
      .mainRight_1{ // 今日施工数
        margin-bottom: 10px;
        width: 100%;
        height: 275px;
        box-shadow:#163696 0px 0px 30px inset;
        #echartsRight_1{
          width:100%;
          height: 180px;
        }
      }
      .mainRight_2{ // 今日使用人数
        width: 100%;
        height: 275px;
        #echartsRight_2{
          width: 100%;
          height: 180px;
        }
      }
    }
    .mainMap{
      width: 40%;
      height: 560px;
      position: relative;
    }
    .ditu{
      position: absolute;
      left: 0;
      top:0;
      z-index: 0;
      width: 100%;
      height:560px;
    }
    .mainMap span{
      font-size: 12px;
      color:#fff;
      background: url("~@/assets/images/map_pb.png") no-repeat;
      width: 60px;
      height: 76px;
      text-align: center;
      display: block;
      padding: 4px;
      position: absolute;
    }
    .mainMap span.map_dw_dh{
      right: 283px;
    top: 132px;
    }
    .mainMap span.map_dw_ys{
      right: 127px;
      top: 58px
    }
    .mainMap span.map_dw_na{
      left: 263px;
      top: 169px
    }
    .mainMap span.map_dw_gzl{
      bottom: 174px;
      left: 176px
    }
    .mainMap span.map_dw_jt{
      right: 220px;
      top: 206px;
    }
    .mainMap span.map_dw_kc{
      left: 346px;
     top: 230px
    }
    .mainMap span.map_dw_ly{
      left: 292px;
      bottom: 203px;
    }
    .mainMap span.map_dw_ed{
      right: 297px;
      bottom: 179px
    }
    .mainMap span.map_dw_cy{
      left: 318px;
    bottom: 145px;
    }
    .mainMap span.map_dw_sy{
      right: 302px;
      bottom: 74px;
    }
    .mainMap span.map_dw_ng{
      right: 358px;
      bottom: 163px;
    }
  }
  .mainBottom{
    width: 1920px;
    height: 277px;
    .mainBottom_1{
      float: left;
      width: 930px;
      height: 100%;
      margin-left: 20px;
      #echartsBottom_1{
        width: 930px;
        height: 230px;
      }
    }
    .mainBottom_2{
      float: left;
      width: 930px;
      height: 100%;
      margin-left: 20px;
      #echartsBottom_2{
        width: 930px;
        height: 230px;
      }
    }
  }
  .mainLeft_1, .mainLeft_2, .mainRight_1, .mainRight_2, .mainBottom_1, .mainBottom_2, .mainMap{
    background-color: #04183e;
  }
  .app-container{
    margin: 0;
    padding: 0;
  }
  .mainTop, .mainBottom, .app-container{
    background-color: #0a1426;
    /*background-color: #000;*/
    /*background-color: red;*/
  }
  @font-face{
    font-family: 'biaotihei';
    src : url('~@/assets/images/You She Biaotihei.ttf');
}
.title{
    width:100%;
    height:49px;
    background: url("~@/assets/images/title-bj.png");
    background-size: 100% 100%;
    display: flex;
    align-items:center;
  }
  .c_title{
    width:100%;
    height:49px;
    background: url("~@/assets/images/c-title-bj.png");
    background-size: 100% 100%;
    display: flex;
    align-items:center;
  }
  .title span,.c_title span{
    font-family: 'biaotihei';
    font-size: 18px;
    background-image:-webkit-linear-gradient(bottom,#fff,#52c8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 0 30px;
  }
  .header_left{
    display: flex;
    flex-direction: row;
    justify-content:center;
  }
  .material_zs{
    background:rgb(64 127 255 / 18%);
    display: inline-flex;
    flex-direction: row;
    justify-content:space-between;
    width: 180px;
    height: 46px;
    align-items:center;
    padding: 0 20px;
    margin: 20px 20px;
  }
  .material_zs h4{
    font-size: 16px;
    background-image:-webkit-linear-gradient(left,#52ffff,#2aacfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .gc_state{
    background: url("~@/assets/images/ztbj.png") no-repeat center bottom;
    background-size: 80px 124px;
    width: 99px;
    height: 122px;
    margin: 30px 20px 0 20px;
    text-align: center;
    font-family: "biaotihei";
    color: #fff;
  }
  .gc_state span{
    font-size: 22px;
  }
  .gc_state h3{
    font-size: 30px;
    line-height: 0;
    margin: 0 0 16px 0;
    font-weight: normal;
  }
  .header{
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;
  }
  .header span{
    font-size: 16px;
    background-image:-webkit-linear-gradient(bottom,#1eeaf1,#1bc0fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .header div{
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;
  }
  .header p{
    font-size: 30px;
    font-family:"宋体";
    font-weight: bold;
    background: url("~@/assets/images/szbj.png") repeat-x;
    color: #fff;
    width: 39px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    margin: 0;
  }
</style>