From 0f4c38e89f67576b03c5e49b42188c470fddb9b6 Mon Sep 17 00:00:00 2001
From: lijun <lj7788@126.com>
Date: Sat, 23 Nov 2024 18:07:27 +0800
Subject: [PATCH] update code

---
 power.html          | 102 ++++++++++++++++++++++----------------------
 power/powerChart.js |   7 +++
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/power.html b/power.html
index 463abe1..dc7ba1f 100644
--- a/power.html
+++ b/power.html
@@ -130,7 +130,7 @@
                                         style="margin-top: 20px;">
                                         暂无数据
                                     </div>
-                                    <power-chart v-else id="eleLoadChart" className="ele-load-chart" width="100%"
+                                    <power-chart ref="chart2" v-else id="eleLoadChart" className="ele-load-chart" width="100%"
                                         height="240px" :render="renderEleLoad" />
 
                                 </div>
@@ -157,7 +157,7 @@
                                         style="margin-top: 20px;">
                                         暂无数据
                                     </div>
-                                    <power-chart v-else :key="block3.elKey" id="ele-trendChart"
+                                    <power-chart ref="chart3" v-else :key="block3.elKey" id="ele-trendChart"
                                         className="ele-trend-chart" width="100%" height="240px"
                                         :render="renderEleTrendSel" />
                                 </div>
@@ -340,7 +340,7 @@
                                                 style="margin-top: 20px;">
                                                 暂无数据
                                             </div>
-                                            <power-chart v-else :key="block4.elKey" id="current-trendChart"
+                                            <power-chart ref="chart4" v-else :key="block4.elKey" id="current-trendChart"
                                                 className="current-trend-chart" width="100%" height="240px"
                                                 :render="renderCurrentTrendSel" />
                                         </div>
@@ -349,7 +349,11 @@
                             </el-col>
                             <el-col :span="16">
                                 <module-one-1-2 label="区域用电趋势">
-                                    <power-chart id="area-ele-trendChart" className="area-ele-trend-chart" width="100%"
+                                    <div v-if="!block5.datas || block5.datas.length==0" class="pw-no-data"
+                                    style="margin-top: 20px;">
+                                    暂无数据
+                                </div>
+                                    <power-chart ref="chart5" v-else :key="block5.elKey" id="area-ele-trendChart" className="area-ele-trend-chart" width="100%"
                                         height="300px" :render="renderAreaEleTrendSel" />
                                 </module-one-1-2>
                             </el-col>
@@ -388,7 +392,7 @@
 <script>
     var mapDatas = [
         {
-            projectId: 3,
+            projectId: 1912,
             url: './power/prj3.png',
             regions: [
                 {
@@ -415,7 +419,7 @@
 </script>
 <script>
     let baseUrl = 'https://aqzg-t.makalu.cc';
-    let projectId = 3;
+    let projectId = 1912;
     let regionId = 1;
     var vm = new Vue({
         el: "#app",
@@ -597,7 +601,12 @@
                         this.block2.titles = [];
                         this.block2.datas = [];
                     }
-                    this.block2.elKey++;
+                   
+                    if(this.$refs.chart2 && this.block2.datas.length>0){
+                        this.$refs.chart2.reLoad();
+                    }else{
+                        this.block2.elKey++;
+                    }
                 });
             },
             loadEleTrend() {
@@ -641,7 +650,11 @@
                         this.block3.titles = [];
                         this.block3.datas = [];
                     }
-                    this.block3.elKey++;
+                    if(this.$refs.chart3 && this.block3.datas.length>0){
+                        this.$refs.chart3.reLoad();
+                    }else{
+                        this.block3.elKey++;
+                    }
                 });
             },
             loadCurrentTrend() {
@@ -707,7 +720,11 @@
                         this.block4.datas = [];
                     }
                     this.block4.rotate = this.currentTrendSel == 0 ? 0 : 45;
-                    this.block4.elKey++;
+                    if(this.$refs.chart4 && this.block4.datas.length>0){
+                        this.$refs.chart4.reLoad();
+                    }else{
+                        this.block4.elKey++;
+                    }                    
                 });
             },
             loadAreaEleTrendSel() {
@@ -720,9 +737,28 @@
                 postData.endTime = dts.dtEnd;
                 let url = '/api/device/smart_meter/electricity_consumption_trend'
                 this.post(url, postData).then(d => {
-                    //debugger
                     let data = d.data?.data || [];
-                    if (data.length > 0) { }
+                    if (data.length > 0 && data[0].list && data[0].list.length>0) { 
+                        this.block5.areas=data.map(it=>it.regionName);
+                        this.block5.titles=data[0].list.map(it=>it.time);
+                        this.block5.datas=data.map(it=>{
+                            return {
+                                name:it.regionName,
+                                type:"line",
+                                smooth:true,
+                                data:it.list.map(item=>item.statistics)
+                            }
+                        });
+                    }else{
+                        this.block5.areas=[];
+                        this.block5.titles=[];
+                        this.block5.datas=[];
+                    }
+                    if(this.$refs.chart5 && this.block5.datas.length>0){
+                        this.$refs.chart5.reLoad();
+                    }else{
+                        this.block5.elKey++;
+                    }    
                 });
             },
             //获取智能电表警告计数【预警概况】
@@ -1010,7 +1046,7 @@
                         trigger: 'axis'
                     },
                     legend: {
-                        data: ['区域A', '区域B', '区域C', '区域D'],
+                        data:this.block5.areas,
                         textStyle: { color: "#a2c8f9" },
 
                     },
@@ -1020,20 +1056,7 @@
                         {
                             type: 'category',
                             boundaryGap: false,
-                            data: [
-                                "1月",
-                                "2月",
-                                "3月",
-                                "4月",
-                                "5月",
-                                "6月",
-                                "7月",
-                                "8月",
-                                "9月",
-                                "10月",
-                                "11月",
-                                "12月",
-                            ],
+                            data: this.block5.titles,
                             axisLabel: { color: "#a2c8f9" },
                             splitLine: {
                                 lineStyle: {
@@ -1053,32 +1076,7 @@
                             }
                         }
                     ],
-                    series: [
-                        {
-                            name: '区域A',
-                            type: 'line',
-                            data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
-                            smooth: true,
-                        },
-                        {
-                            name: '区域B',
-                            type: 'line',
-                            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
-                            smooth: true,
-                        },
-                        {
-                            name: '区域C',
-                            type: 'line',
-                            data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
-                            smooth: true,
-                        },
-                        {
-                            name: '区域D',
-                            type: 'line',
-                            data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320],
-                            smooth: true,
-                        }
-                    ]
+                    series: this.block5.datas
                 };
 
 
diff --git a/power/powerChart.js b/power/powerChart.js
index e2d8868..cf87d1c 100644
--- a/power/powerChart.js
+++ b/power/powerChart.js
@@ -41,6 +41,13 @@ Vue.component("power-chart", {
     });
   },
   methods: {
+    reLoad(){
+      let opt={};
+      if (this.render) {
+        opt = this.render(opt);
+      }
+      this.chart.setOption(opt,true);
+    },
     setOption(opt) {
       if (this.render) {
         opt = this.render(opt);