From f16acb06ab278cdcb1d39a29680634010638326d Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 08 五月 2024 17:35:48 +0800
Subject: [PATCH] 1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

---
 src/components/monitor/LineChart.vue |   46 ++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/monitor/LineChart.vue b/src/components/monitor/LineChart.vue
index 612cb61..2a0b846 100644
--- a/src/components/monitor/LineChart.vue
+++ b/src/components/monitor/LineChart.vue
@@ -6,7 +6,7 @@
     <template #footer>
       <!-- 鍗曢〉鏁版嵁閲�-->
       <SliderBar
-        @input="(e) => (progress = e)"
+        v-model:progress="progress"
         @size-change="(e) => (pageSize = e)"
       ></SliderBar>
     </template>
@@ -21,6 +21,7 @@
 
 export default {
   props: {
+    loading: Boolean,
     factorDatas: {
       type: FactorDatas
       // default: () => new FactorDatas()
@@ -28,7 +29,9 @@
     selectFactorType: {
       type: Array,
       default: () => ['1']
-    }
+    },
+    // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩
+    locateIndex: Number
   },
   data() {
     return {
@@ -39,6 +42,7 @@
       progress: 0
     };
   },
+  emits: ['chartClick'],
   watch: {
     factorDatas: {
       handler() {
@@ -56,6 +60,35 @@
       this.changeChartRange();
     },
     pageSize() {
+      this.changeChartRange();
+    },
+    locateIndex(nV, oV) {
+      if (nV == oV) return;
+      // 1. 瀹氫綅鐐瑰簲璇ュ睍绀哄湪瓒嬪娍鍥句腑闂达紝鍥犳瀹氫綅鐧惧垎姣斿線鍓嶅亸绉诲綋鍓峗size鐨勪竴鍗�
+      let i = nV - parseInt(this.pageSize / 2);
+      // 2. 纭繚绱㈠紩涓嶄細瓒呭嚭鑼冨洿
+      i = i < 0 ? 0 : i;
+      // 3. 鑾峰彇绱㈠紩瀵瑰簲鐨勮繘搴︾櫨鍒嗘瘮
+      this.progress = (i / (this.allXAxis.length - this.pageSize)) * 100;
+
+      for (const iterator of this.allSeries) {
+        // if (iterator.name == factorName || (iterator.name == 'TVOC' || factorName == 'VOC')) {
+        iterator.markLine = {
+          symbol: 'none',
+          data: [
+            {
+              name: '閫変腑',
+              xAxis: this.allXAxis[nV],
+              label: {
+                color: 'white'
+              },
+              lineStyle: {
+                color: 'yellow'
+              }
+            }
+          ]
+        };
+      }
       this.changeChartRange();
     }
   },
@@ -103,16 +136,18 @@
       }
       // this.option.dataZoom[0].start = startPer;
       // this.option.dataZoom[0].end = endPer;
-      this.lineChart.setOption(this.option);
+      this.lineChart.setOption(this.option, { notMerge: true });
     },
     getShowXAxis(sIndex, eIndex) {
       return this.allXAxis.slice(sIndex, eIndex);
     },
     getShowSeries(sIndex, eIndex) {
-      const res = this.allSeries.filter((s) => {
+      this.allSeries.forEach((s) => {
         if (sIndex && eIndex) {
           s.data = s.allData.slice(sIndex, eIndex);
         }
+      });
+      const res = this.allSeries.filter((s) => {
         return this.selectFactorType.includes(s.key);
       });
       return res;
@@ -137,6 +172,9 @@
   },
   mounted() {
     this.lineChart = echarts.init(this.$refs.lineChart);
+    this.lineChart.on('click', (e) => {
+      this.$emit('chartClick', e.dataIndex);
+    });
   }
 };
 </script>

--
Gitblit v1.9.3