地图长春

src/views/zdsz/bigscreen/index.vue

@@ -73,10 +73,11 @@
           <div class="header">
             <span>今日施工数</span>
             <div>
-              <p>1</p>
-              <p>1</p>
-              <p>1</p>
-              <p>1</p>
+              <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>
@@ -84,14 +85,15 @@
         </div>
         <!-- 右上图二 -->
         <div class="mainRight_2">
-          <div class="title"><span>今日施工人数</span></div>
+          <div class="title"><span>今日使用人数</span></div>
           <div class="header">
-            <span>今日施工人数</span>
+            <span>今日使用人数</span>
             <div>
-              <p>1</p>
-              <p>1</p>
-              <p>1</p>
-              <p>1</p>
+              <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 }} -->
@@ -139,35 +141,31 @@
       return {
         queryParams:{
           time: formatTimestampToDateString(new Date()), // 当日日期
-          beginTime: '2024-03-03', // 开始时间
-          endTime: '2024-08-05', // 结束时间
+          beginTime: '', // 开始时间 2024-03-03
+          endTime: '', // 结束时间 2024-08-05
           begin_end_time: [], // 开始结束结束时间
         },
         progress: {
           names: ['不锈钢波纹管', '螺旋焊管', '无缝钢管', '镀锌钢管', '燃气用埋地聚乙烯管'],
-          values: [],
-          ironTotal: 1600, // 钢管总数
-          peTotal: 1600, // PE总数
+          values: [0, 0, 0, 0, 0],
+          ironTotal: 0, // 钢管总数
+          peTotal: 0, // PE总数
         },
         projectStatus: {
           todo: 658, // 开工
           doing: 658, // 在建
           done: 658, // 完工
         },
-        totalRight_1: 1111, // 今日施工数
-        totalRight_2: 1111, // 今日施工人数
+        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.getConstructionProgress(); // 施工进度统计
-      this.getProjectStatus(); // 工程状态统计
-      this.getCountEngineering(); // 今日施工数
-      this.getCountPerson(); // 今日使用人数
-      this.getConstructionMap(); // 地图施工数据分布
-      this.getConstructionNew(); // 各个区今日施工数
-      this.getConstructionOld(); // 各个区今日旧改施工数
+      this.initPage();
     },
     mounted() {
       let _this = this;
@@ -176,12 +174,41 @@
       },1)
     },
     methods: {
+      initPage(){
+        this.getConstructionProgress(); // 施工进度统计
+        this.getProjectStatus(); // 工程状态统计
+        this.getCountEngineering(); // 今日施工数
+        this.getCountPerson(); // 今日使用人数
+        this.getConstructionMap(); // 地图施工数据分布
+        this.getConstructionNew(); // 各个区今日施工数
+        this.getConstructionOld(); // 各个区今日旧改施工数
+      },
       handleQuery(){
-        alert(this.queryParams.begin_end_time);
+        let begin_end_time = this.queryParams.begin_end_time;
+        let beginTime = begin_end_time[0];
+        let endTime = begin_end_time[1];
+        if(beginTime == endTime){
+          this.queryParams.beginTime = '';
+          this.queryParams.endTime = '';
+        }else {
+          this.queryParams.beginTime = beginTime;
+          this.queryParams.endTime = endTime;
+        }
+        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 = [];
@@ -210,6 +237,7 @@
       getCountEngineering(){ // 今日施工数
         getCountEngineering(this.queryParams).then(res => {
           console.log("今日施工数", res);
+          let total = 0;
           let names = [];
           let values = [];
           let data = {
@@ -218,16 +246,20 @@
           }
           let result = res.data;
           for (let key in result) {
+            let value = result[key];
             names.push(key);
-            values.push(result[key]);
+            values.push(value);
+            total += value * 1;
           }
-          console.log("datadatadatadata",data)
+          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 = {
@@ -236,9 +268,13 @@
           }
           let result = res.data;
           for (let key in result) {
+            let value = result[key];
             names.push(key);
-            values.push(result[key]);
+            values.push(value);
+            total += value * 1;
           }
+          this.totalRight_2 = total; // 今日使用人数
+          this.totalRight_2s = this.numToArr(this.totalRight_2);
           this.echartsRight_2(data);
         })
       },
@@ -251,6 +287,9 @@
       getConstructionNew(){ // 各个区今日施工数
         getConstructionNew(this.queryParams).then(res => {
           console.log("各个区今日施工数", res);
+          for(let key in res.data){
+            // alert(res.data[key])
+          }
           this.echartsBottom_1(res.data);
         })
       },
@@ -265,8 +304,10 @@
         let myChart = echarts.init(document.getElementById('echartsLeft_1'));
         let option = {
           title: {
-            text: 'Referer of a Website',
-            subtext: 'Fake Data',
+            // text: 'Referer of a Website',
+            text: '',
+            // subtext: 'Fake Data',
+            subtext: '',
             left: 'center'
           },
           tooltip: {
@@ -281,7 +322,8 @@
               // name: 'Access From',
               name: '',
               type: 'pie',
-              radius: '50%',
+              radius: '80%',
+              center: ['70%', '43%'], // 左右 上下
               data: data,
               //   [
               //   { value: 1048, name: 'Search Engine' },
@@ -296,6 +338,16 @@
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
+              },
+              labelLine: {
+                normal: {
+                  show: false, // 展示指示线
+                }
+              },
+              label: {
+                normal: {
+                  show: false, // 展示指示文字
+                }
               }
             }
           ]
@@ -596,7 +648,8 @@
             }
           },
           geo: {// 这个是重点配置区
-            map: "china",// 表示中国地图
+            // map: "china",// 表示中国地图
+            map: "changchun",// 表示长春地图
             roam: false, //关闭鼠标缩放和漫游
             zoom: 1, //地图缩放级别
             selectedMode: false, //选中模式：single | multiple
@@ -854,7 +907,7 @@
           height: 180px;
         }
       }
-      .mainRight_2{ // 今日施工人数
+      .mainRight_2{ // 今日使用人数
         width: 100%;
         height: 275px;
         #echartsRight_2{