调整日报汇总页面看板不现实问题

src/views/pms/iotrhdailyreport/summary.vue

@@ -284,6 +284,7 @@ const handleSelectTab = (val: '表格' | '看板') => {
 
 const chartRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
+let chartContainerEl: HTMLDivElement | null = null
 
 const xAxisData = ref<string[]>([])
 
@@ -341,6 +342,9 @@ const resizer = () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', resizer)
+  chart?.dispose()
+  chart = null
+  chartContainerEl = null
 })
 
 const selectedLegends = ref<Record<string, boolean>>({})
@@ -418,27 +422,37 @@ const getSeries = () => {
   }))
 }
 
-const render = () => {
+const initChart = () => {
   if (!chartRef.value) return
 
-  if (!chart) {
-    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-    window.addEventListener('resize', resizer)
+  if (chart && chartContainerEl === chartRef.value) {
+    return
+  }
 
-    chart.on('legendselectchanged', (params: any) => {
-      selectedLegends.value = params.selected
+  chart?.dispose()
+  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+  chartContainerEl = chartRef.value
+  window.addEventListener('resize', resizer)
 
-      calcIntervals()
+  chart.on('legendselectchanged', (params: any) => {
+    selectedLegends.value = params.selected
 
-      chart?.setOption({
-        yAxis: {
-          min: -minInterval.value,
-          max: maxInterval.value
-        },
-        series: getSeries()
-      })
+    calcIntervals()
+
+    chart?.setOption({
+      yAxis: {
+        min: -minInterval.value,
+        max: maxInterval.value
+      },
+      series: getSeries()
     })
-  }
+  })
+}
+
+const render = () => {
+  if (!chartRef.value) return
+
+  initChart()
 
   legend.value.forEach(([name]) => {
     selectedLegends.value[name] = true
@@ -446,7 +460,7 @@ const render = () => {
 
   calcIntervals()
 
-  chart.setOption(
+  chart?.setOption(
     {
       tooltip: {
         trigger: 'axis',
@@ -793,7 +807,6 @@ const { ZmTable, ZmTableColumn } = useTableComponents()
                     <div
                       ref="chartRef"
                       v-loading="chartLoading"
-                      :key="dayjs().valueOf()"
                       v-else
                       :style="{ width: `100%`, height: `${height}px` }"
                     >

src/views/pms/iotrydailyreport/summary.vue

@@ -239,6 +239,7 @@ const handleSelectTab = (val: '表格' | '看板') => {
 
 const chartRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
+let chartContainerEl: HTMLDivElement | null = null
 
 const xAxisData = ref<string[]>([])
 
@@ -301,6 +302,9 @@ const resizer = () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', resizer)
+  chart?.dispose()
+  chart = null
+  chartContainerEl = null
 })
 
 const selectedLegends = ref<Record<string, boolean>>({})
@@ -378,27 +382,37 @@ const getSeries = () => {
   }))
 }
 
-const render = () => {
+const initChart = () => {
   if (!chartRef.value) return
 
-  if (!chart) {
-    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-    window.addEventListener('resize', resizer)
+  if (chart && chartContainerEl === chartRef.value) {
+    return
+  }
 
-    chart.on('legendselectchanged', (params: any) => {
-      selectedLegends.value = params.selected
+  chart?.dispose()
+  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+  chartContainerEl = chartRef.value
+  window.addEventListener('resize', resizer)
 
-      calcIntervals()
+  chart.on('legendselectchanged', (params: any) => {
+    selectedLegends.value = params.selected
 
-      chart?.setOption({
-        yAxis: {
-          min: -minInterval.value,
-          max: maxInterval.value
-        },
-        series: getSeries()
-      })
+    calcIntervals()
+
+    chart?.setOption({
+      yAxis: {
+        min: -minInterval.value,
+        max: maxInterval.value
+      },
+      series: getSeries()
     })
-  }
+  })
+}
+
+const render = () => {
+  if (!chartRef.value) return
+
+  initChart()
 
   legend.value.forEach(([name]) => {
     selectedLegends.value[name] = true
@@ -406,7 +420,7 @@ const render = () => {
 
   calcIntervals()
 
-  chart.setOption(
+  chart?.setOption(
     {
       tooltip: {
         trigger: 'axis',

src/views/pms/iotrydailyreport/xsummary.vue

@@ -245,6 +245,7 @@ const handleSelectTab = (val: '表格' | '看板') => {
 
 const chartRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
+let chartContainerEl: HTMLDivElement | null = null
 
 const xAxisData = ref<string[]>([])
 
@@ -299,6 +300,9 @@ const resizer = () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', resizer)
+  chart?.dispose()
+  chart = null
+  chartContainerEl = null
 })
 
 const selectedLegends = ref<Record<string, boolean>>({})
@@ -376,27 +380,37 @@ const getSeries = () => {
   }))
 }
 
-const render = () => {
+const initChart = () => {
   if (!chartRef.value) return
 
-  if (!chart) {
-    chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
-    window.addEventListener('resize', resizer)
+  if (chart && chartContainerEl === chartRef.value) {
+    return
+  }
 
-    chart.on('legendselectchanged', (params: any) => {
-      selectedLegends.value = params.selected
+  chart?.dispose()
+  chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
+  chartContainerEl = chartRef.value
+  window.addEventListener('resize', resizer)
 
-      calcIntervals()
+  chart.on('legendselectchanged', (params: any) => {
+    selectedLegends.value = params.selected
 
-      chart?.setOption({
-        yAxis: {
-          min: -minInterval.value,
-          max: maxInterval.value
-        },
-        series: getSeries()
-      })
+    calcIntervals()
+
+    chart?.setOption({
+      yAxis: {
+        min: -minInterval.value,
+        max: maxInterval.value
+      },
+      series: getSeries()
     })
-  }
+  })
+}
+
+const render = () => {
+  if (!chartRef.value) return
+
+  initChart()
 
   legend.value.forEach(([name]) => {
     selectedLegends.value[name] = true
@@ -404,7 +418,7 @@ const render = () => {
 
   calcIntervals()
 
-  chart.setOption(
+  chart?.setOption(
     {
       tooltip: {
         trigger: 'axis',