CN-65 fix: 修复嵌套chart异常的问题

src/views/charts/Chart.vue

@@ -11,11 +11,13 @@
       v-model="activeTab"
       @tab-click="changeTab"
       :style="computePosition"
+      :ref="`chart-${chart.id}`"
   >
     <el-tab-pane
         v-for="tab in chartInfo.children"
         :label="tab.i18n ? $t(tab.i18n) : tab.name" :name="`${tab.id}`"
         :key="tab.id"
+        :ref="`chart-${chart.id}`"
     >
       <template v-for="chart in tab.children">
         <chart v-if="activeTab == tab.id" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`"></chart>
@@ -212,7 +214,8 @@ export default {
       activeTab: '',
       statisticsData: [],
       orderPieTable: chartPieTableTopOptions[0].value,
-      selectPieChartName: ''
+      selectPieChartName: '',
+      chartOption: null
     }
   },
   methods: {
@@ -220,13 +223,14 @@ export default {
       const chartParams = this.chartInfo.params
       if (this.isMap) {
         const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
-        this.myChart = chart
+        !this.myChart && (this.myChart = chart)
         if (chartParams) {
           this.loadMap(polygonSeries)
         }
       } else if (this.isEcharts) {
         const dom = document.getElementById(`chart${this.chartInfo.id}`)
-        this.myChart = echarts.init(dom)
+        !this.myChart && (this.myChart = echarts.init(dom))
+        this.chartOption = JSON.parse(JSON.stringify(getOption(this.chart.type)))
         if (chartParams) {
           if (this.isEchartsWithTable) {
             this.initEchartsWithPieTable(chartParams)
@@ -259,11 +263,11 @@ export default {
     reloadChart () {
       this.initChart()
       this.$nextTick(() => {
-        this.$_.forIn(this.$refs, (ref, key) => {
+        if (!this.$_.isEmpty(this.chart.children)) {
-          if (this.$_.startsWith(key, 'chart-')) {
+          this.chart.children.forEach(chart => {
-            ref.reloadChart()
+            this.$refs[`chart-${chart.id}`].reloadChart()
-          }
+          })
-        })
+        }
       })
     },
     getTitle (r) {
@@ -595,7 +599,6 @@ export default {
         }
         default: break
       }
-      console.info(result)
       return result
     }
   },
@@ -611,6 +614,17 @@ export default {
           this.initChart()
         }
       }
+    },
+    timeFilter: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        if (n) {
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      }
     }
   },
   setup (props) {
@@ -622,7 +636,6 @@ export default {
       layoutConstant,
       chartTableTopOptions,
       chartPieTableTopOptions,
-      chartOption: getOption(props.chart.type),
       isEcharts: isEcharts(props.chart.type),
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
       isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
@@ -634,7 +647,7 @@ export default {
       isMapBlock: isMapBlock(props.chart.type),
       isTabs: isTabs(props.chart.type),
       layout: getLayout(props.chart.type),
-      myChart: shallowRef({})
+      myChart: shallowRef(null)
     }
   }
 }

src/views/charts/Panel.vue

@@ -57,7 +57,7 @@ export default {
     // data
     const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
-    const timeFilter = { startTime, endTime, dateRangeValue }
+    const timeFilter = ref({ startTime, endTime, dateRangeValue })
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params } = useRoute()
@@ -83,7 +83,11 @@ export default {
       }
     },
     timeRefreshChange () {
-      if (!this.$refs.dateTimeRange) {
+      if (!this.$refs.dateTimeRange.isCustom) {
+        const value = this.timeFilter.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      }
+      /* if (!this.$refs.dateTimeRange) {
         this.reloadCharts()
         return
       }
@@ -92,11 +96,13 @@ export default {
       } else {
         const value = this.timeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
-      }
+      } */
     },
     reload (s, e, v) {
       this.dateTimeRangeChange(s, e, v)
-      this.reloadCharts()
+      /* this.$nextTick(() => {
+        this.reloadCharts()
+      }) */
     },
     // methods
     dateTimeRangeChange (s, e, v) {