From dae3882b501370115d688420ba0ab22d613d3d5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Fri, 3 Nov 2023 14:42:24 +0800
Subject: [PATCH] =?UTF-8?q?Data=20Recevice=20status=20Monitoring=20?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=9B=BE=E8=A1=A8=E7=82=B9=E5=87=BBlegned?=
 =?UTF-8?q?=EF=BC=8C=E6=B8=B2=E6=9F=93=E5=9B=BE=E8=A1=A8=E7=9A=84=E6=97=B6?=
 =?UTF-8?q?=E5=80=99=EF=BC=8C=E4=BC=9A=E5=9B=9E=E5=88=B0=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E7=9A=84=E5=9C=B0=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomChart/index.vue          |  26 +--
 .../components/RealTimeDataChart.vue          | 154 +++++++++++-------
 2 files changed, 104 insertions(+), 76 deletions(-)

diff --git a/src/components/CustomChart/index.vue b/src/components/CustomChart/index.vue
index 8dac754..44a3a22 100644
--- a/src/components/CustomChart/index.vue
+++ b/src/components/CustomChart/index.vue
@@ -5,22 +5,22 @@
 import * as echarts from 'echarts'
 import 'echarts-gl'
 
-const events = ['click', 'brushEnd']
+const events = ['click', 'brushEnd', 'dataZoom']
 const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu']
 export default {
   props: {
     option: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     opts: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     height: {
       type: Number,
-      default: null
-    }
+      default: null,
+    },
   },
   data() {
     return {}
@@ -31,21 +31,21 @@ export default {
     this.initEventListener()
   },
   destroyed() {
-    if(this._chart) {
+    if (this._chart) {
       this._chart.dispose()
     }
   },
   methods: {
     initEventListener() {
-      events.forEach(eventName => {
+      events.forEach((eventName) => {
         this._chart.on(eventName, (params) => {
           this.$emit(eventName, params)
         })
       })
 
       const zr = this.getZRender()
-      zrEvents.forEach(eventName => {
-        zr.on(eventName, params => {
+      zrEvents.forEach((eventName) => {
+        zr.on(eventName, (params) => {
           this.$emit(`zr:${eventName}`, params)
         })
       })
@@ -62,7 +62,7 @@ export default {
 
     getZRender() {
       return this._chart.getZr()
-    }
+    },
   },
   watch: {
     option: {
@@ -71,14 +71,14 @@ export default {
           this._chart.setOption(this.option, this.opts)
         }
       },
-      deep: true
+      deep: true,
     },
     height() {
       this.$nextTick(() => {
         this._chart && this._chart.resize()
       })
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="less" scoped>
diff --git a/src/views/stationOperation/components/RealTimeDataChart.vue b/src/views/stationOperation/components/RealTimeDataChart.vue
index f76725a..a1afd86 100644
--- a/src/views/stationOperation/components/RealTimeDataChart.vue
+++ b/src/views/stationOperation/components/RealTimeDataChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
+  <div style="width: 100%; height: 100%; overflow: auto; padding-top: 76px">
     <!-- 图例 -->
     <div class="legend">
       <div
@@ -14,8 +14,14 @@
       </div>
     </div>
     <!-- 图例结束 -->
-    <custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
-    <a-spin style="z-index: 11;position: absolute;top: 45%;left: 48%;" :spinning="spinning" />
+    <custom-chart
+      ref="customChartRef"
+      :option="option"
+      :opts="{ notMerge: true }"
+      :height="list.length * 295"
+      @dataZoom="handleZoomChange"
+    ></custom-chart>
+    <a-spin style="z-index: 11; position: absolute; top: 45%; left: 48%" :spinning="spinning" />
   </div>
 </template>
 
@@ -32,76 +38,90 @@ const legendList = [
   {
     title: 'SPHDPREL',
     color: '#17a840',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'SPHDF',
     color: '#0cbfb0',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'QC',
     color: '#1c82eb',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'GASBKPHDPREL',
     color: '#d3ad16',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'GASBKPHDF',
     color: '#db6423',
-    isShow: true
+    isShow: true,
   },
   {
     title: 'SOH/MET',
     color: '#8852da',
-    isShow: true
-  }
+    isShow: true,
+  },
 ]
 
 // 图表配置
 const initialOption = {
   tooltip: {
-    formatter: params => {
+    formatter: (params) => {
       return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`
-    }
+    },
   },
   grid: [],
   xAxis: [],
   yAxis: [],
   series: [],
-  dataZoom: []
+  dataZoom: [],
 }
 
 export default {
   props: {
     title: {
-      type: String
+      type: String,
     },
     spinning: {
-      type: Boolean
+      type: Boolean,
     },
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     scaleSettings: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   components: {
-    CustomChart
+    CustomChart,
   },
   data() {
     return {
       legendList: cloneDeep(legendList),
-      option: {}
+      option: {},
+      zoomDataAll: [],
     }
   },
   methods: {
+    handleZoomChange(params) {
+      this.zoomDataAll = this.option.dataZoom.map((item) => {
+        if (item.id == params.batch[0].dataZoomId) {
+          return {
+            id: params.batch[0].dataZoomId,
+            start: params.batch[0].start,
+            end: params.batch[0].end,
+          }
+        } else {
+          return item
+        }
+      })
+    },
     renderItem(params, api) {
       let categoryIndex = api.value(0)
       let start = api.coord([api.value(1), categoryIndex])
@@ -113,20 +133,20 @@ export default {
           x: start[0],
           y: start[1] - height / 2,
           width: end[0] - start[0],
-          height: height
+          height: height,
         },
         {
           x: params.coordSys.x,
           y: params.coordSys.y,
           width: params.coordSys.width,
-          height: params.coordSys.height
+          height: params.coordSys.height,
         }
       )
       return (
         rectShape && {
           type: 'rect',
           shape: rectShape,
-          style: api.style()
+          style: api.style(),
         }
       )
     },
@@ -155,13 +175,9 @@ export default {
       }
     },
 
-    initChartOption() {
+    initChartOption(val) {
       let now = dayjs(new Date())
-      now = now
-        .add(1, 'hour')
-        .set('minute', 0)
-        .set('second', 0)
-        .set('millisecond', 0)
+      now = now.add(1, 'hour').set('minute', 0).set('second', 0).set('millisecond', 0)
 
       const max = now.valueOf()
       const min = max - this.scaleSettings.cacheTime * 24 * 60 * 60 * 1000
@@ -172,7 +188,7 @@ export default {
           left: 70,
           right: 20,
           top: 70 * index + 225 * index,
-          height: 225
+          height: 225,
         })
 
         xAxis.push({
@@ -182,17 +198,17 @@ export default {
           interval: this.scaleSettings.scaleInterval * 60 * 1000,
           axisLabel: {
             show: true,
-            formatter: val => {
+            formatter: (val) => {
               let dateTime = new Date(val)
               return dayjs(dateTime).format('HH:mm\nMM/DD')
             },
-            color: '#ade6ee'
+            color: '#ade6ee',
           },
           splitLine: {
             lineStyle: {
-              color: '#214751'
-            }
-          }
+              color: '#214751',
+            },
+          },
         })
 
         yAxis.push({
@@ -202,31 +218,31 @@ export default {
           nameTextStyle: {
             // 设置标题样式
             fontSize: 14,
-            color: '#5b9cba'
+            color: '#5b9cba',
           },
           nameGap: 46,
           data: typeList,
           splitLine: {
             show: true,
             lineStyle: {
-              color: '#214751'
-            }
+              color: '#214751',
+            },
           },
           axisLine: {
             lineStyle: {
-              color: '#214751'
-            }
+              color: '#214751',
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           axisLabel: {
-            color: '#ade6ee'
-          }
+            color: '#ade6ee',
+          },
         })
 
         const data = []
-        item.dataList.forEach(item => {
+        item.dataList.forEach((item) => {
           this.convertStatus(item)
 
           let startTime = new Date(item.beginTime * 1000).getTime()
@@ -236,17 +252,17 @@ export default {
 
           const endTime = new Date(item.endTime * 1000).getTime()
           const duration = endTime - startTime
-          const index = typeList.findIndex(type => item.type == type)
-          const find = this.legendList.find(legendItem => legendItem.title == item.status)
+          const index = typeList.findIndex((type) => item.type == type)
+          const find = this.legendList.find((legendItem) => legendItem.title == item.status)
           if (find.isShow) {
             data.push({
               name: item.status,
               value: [index, startTime, endTime, duration],
               itemStyle: {
                 normal: {
-                  color: find.color
-                }
-              }
+                  color: find.color,
+                },
+              },
             })
           }
         })
@@ -256,20 +272,22 @@ export default {
           renderItem: this.renderItem,
           encode: {
             x: [1, 2],
-            y: 0
+            y: 0,
           },
           data: data,
           xAxisIndex: index,
-          yAxisIndex: index
-        })
-
-        dataZoom.push({
-          type: 'inside',
-          xAxisIndex: index,
-          start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
-          end: 100,
-          zoomLock: true
+          yAxisIndex: index,
         })
+        if (!val) {
+          dataZoom.push({
+            type: 'inside',
+            id: index,
+            xAxisIndex: index,
+            start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
+            end: 100,
+            zoomLock: true,
+          })
+        }
       })
 
       this.option = option
@@ -279,20 +297,30 @@ export default {
     handleLegendChange(legend) {
       legend.isShow = !legend.isShow
       this.initChartOption()
+      this.option.dataZoom = this.zoomDataAll.map((item, index) => {
+        return {
+          type: 'inside',
+          id: item.id,
+          xAxisIndex: index,
+          start: item.start,
+          end: item.end,
+          zoomLock: true,
+        }
+      })
     },
 
     resize() {
       this.$refs.customChartRef.resize()
-    }
+    },
   },
   watch: {
     list: {
       handler() {
         this.initChartOption()
       },
-      immediate: true
-    }
-  }
+      immediate: true,
+    },
+  },
 }
 </script>