fix: 详情页异常处理

src/components/charts/ChartSingleValue.vue

@@ -11,6 +11,8 @@
         <slot name="title"></slot>
       </div>
     </div>
+    <div class="single-value__content" v-if="type === 52">
+    </div>
     <div class="single-value__content" v-if="type === 53">
       <div class="content__title"></div>
       <div class="content__data"></div>

src/views/charts/Chart.vue

@@ -20,7 +20,7 @@
         :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>
+        <chart v-if="activeTab == tab.id" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
       </template>
     </el-tab-pane>
   </el-tabs>
@@ -166,6 +166,7 @@ import {
   isEchartsWithStatistics,
   isMapLine,
   isMapBlock,
+  isSingleValueWithEcharts,
   isTabs,
   getChartColor
 } from '@/components/charts/chart-options'
@@ -185,7 +186,8 @@ export default {
   name: 'Chart',
   props: {
     chart: Object, // 图表对象，包括id、name、type等数据
-    timeFilter: Object
+    timeFilter: Object,
+    entity: Object
   },
   components: {
     EchartsFrame,
@@ -221,44 +223,54 @@ export default {
   },
   methods: {
     initChart () {
-      const chartParams = this.chartInfo.params
+      try {
-      if (this.isMap) {
+        const chartParams = this.chartInfo.params
-        const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
+        if (this.isMap) {
-        !this.myChart && (this.myChart = chart)
+          const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
-        if (chartParams) {
+          !this.myChart && (this.myChart = chart)
-          this.loadMap(polygonSeries)
+          if (chartParams) {
-        }
+            this.loadMap(polygonSeries)
-      } else if (this.isEcharts) {
+          }
-        const dom = document.getElementById(`chart${this.chartInfo.id}`)
+        } else if (this.isEcharts) {
-        !this.myChart && (this.myChart = echarts.init(dom))
+          const dom = document.getElementById(`chart${this.chartInfo.id}`)
-        this.chartOption = this.$_.cloneDeep(getOption(this.chart.type))
+          !this.myChart && (this.myChart = echarts.init(dom))
-        if (chartParams) {
+          this.chartOption = this.$_.cloneDeep(getOption(this.chart.type))
-          if (this.isEchartsWithTable) {
+          if (chartParams) {
-            this.initEchartsWithPieTable(chartParams)
+            if (this.isEchartsWithTable) {
-          } else if (this.isEchartsWithStatistics) {
+              this.initEchartsWithPieTable(chartParams)
-            this.initEchartsWithStatistics(chartParams)
+            } else if (this.isEchartsWithStatistics) {
-          } else {
+              this.initEchartsWithStatistics(chartParams)
-            this.initECharts(chartParams)
+            } else {
+              this.initECharts(chartParams)
+            }
+          }
+        } else if (this.isTable) {
+          if (chartParams) {
+            this.initChartTable(chartParams)
+          }
+        } else if (this.isSingleValue) {
+          if (chartParams) {
+            this.singleValue.icon = chartParams.icon
+            const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
+            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+              if (response.code === 200) {
+                this.singleValue.value = response.data.result
+              }
+            })
+            if (this.isSingleValueWithEcharts) { // 带曲线的单值图
+              get(replaceUrlPlaceholder(chartParams.urlLine, queryParams)).then(response => {
+                if (response.code === 200) {
+                }
+              })
+            }
+          }
+        } else if (this.isTabs) {
+          if (!this.$_.isEmpty(this.chartInfo.children)) {
+            this.activeTab = `${this.chartInfo.children[0].id}`
           }
         }
-      } else if (this.isTable) {
+      } catch (e) {
-        if (chartParams) {
+        console.error(e)
-          this.initChartTable(chartParams)
-        }
-      } else if (this.isSingleValue) {
-        if (chartParams) {
-          this.singleValue.icon = chartParams.icon
-          const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000) }
-          get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-            if (response.code === 200) {
-              this.singleValue.value = response.data.result
-            }
-          })
-        }
-      } else if (this.isTabs) {
-        if (!this.$_.isEmpty(this.chartInfo.children)) {
-          this.activeTab = `${this.chartInfo.children[0].id}`
-        }
       }
     },
     reloadChart () {
@@ -652,6 +664,7 @@ export default {
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
       isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
       isSingleValue: isSingleValue(props.chart.type),
+      isSingleValueWithEcharts: isSingleValueWithEcharts(props.chart.type),
       isTable: isTable(props.chart.type),
       isMap: isMap(props.chart.type),
       isTitle: isTitle(props.chart.type),

src/views/charts/Panel.vue

@@ -5,7 +5,7 @@
         <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
         <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
       </div>
-      <chart v-for="chart in chartList" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`"></chart>
+      <chart v-for="chart in chartList" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
       <!--    <grid-layout v-model:layout="chartList"
                        :col-num="12"
                        :row-height="30"
@@ -88,11 +88,7 @@ export default {
       }
     },
     recursionParamsConvert (chart) {
-      console.info(chart)
       chart.params = chart.params ? JSON.parse(chart.params) : null
-      if (this.entity) {
-        chart.params = { ...chart.params, ...this.entity }
-      }
       if (!this.$_.isEmpty(chart.children)) {
         chart.children.forEach(c => {
           this.recursionParamsConvert(c)