feat(frontend):视图关联数据集被删除时，友好提示

frontend/src/api/chart/chart.js

@@ -9,6 +9,15 @@ export function post(url, data) {
   })
 }
 
+export function ajaxGetData(id, data) {
+  return request({
+    url: '/chart/view/getData/' + id,
+    method: 'post',
+    loading: true,
+    hideMsg: true,
+    data
+  })
+}
 
 export function getChartTree(data) {
   return request({

frontend/src/views/chart/view/ChartEdit.vue

@@ -218,9 +218,15 @@
             </el-row>
           </el-row>
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
-            <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
-            <label-normal v-if="chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
+            <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+            <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
+            <div v-if="!httpRequest.status" style=";width: 100%;height: 100%;background-color: #ece7e7; text-align: center">
+              <div style="font-size: 12px; color: #9ea6b2;">
+                {{ $t('panel.error_data') }}<br>
+                {{ httpRequest.msg }}
+              </div>
+            </div>
           </div>
         </el-row>
       </el-col>
@@ -272,7 +278,7 @@
 </template>
 
 <script>
-import { post } from '@/api/dataset/dataset'
+import { post, ajaxGetData } from '@/api/chart/chart'
 import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
@@ -361,7 +367,11 @@ export default {
         ]
       },
       tabStatus: false,
-      data: {}
+      data: {},
+      httpRequest: {
+        status: true,
+        msg: ''
+      }
     }
   },
   computed: {
@@ -393,6 +403,11 @@ export default {
         post('/dataset/table/get/' + id, null).then(response => {
           this.table = response.data
           this.initTableField(id)
+        }).catch(err => {
+          this.resetView()
+          this.httpRequest.status = false
+          this.httpRequest.msg = err
+          return true
         })
       }
     },
@@ -400,6 +415,11 @@ export default {
       post('/dataset/table/getFieldsFromDE', this.table).then(response => {
         this.dimension = response.data.dimension
         this.quota = response.data.quota
+      }).catch(err => {
+        this.resetView()
+        this.httpRequest.status = false
+        this.httpRequest.msg = err
+        return true
       })
     },
     save(getData) {
@@ -521,7 +541,7 @@ export default {
     },
     getData(id) {
       if (id) {
-        post('/chart/view/getData/' + id, {
+        ajaxGetData(id, {
           filter: []
         }).then(response => {
           this.initTableData(response.data.tableId)
@@ -535,6 +555,12 @@ export default {
           this.chart = response.data
           this.data = response.data.data
           // console.log(JSON.stringify(this.chart))
+          this.httpRequest.status = true
+        }).catch(err => {
+          this.resetView()
+          this.httpRequest.status = false
+          this.httpRequest.msg = err
+          return true
         })
       } else {
         this.view = {}
@@ -553,6 +579,13 @@ export default {
 
           response.data.data = this.data
           this.chart = response.data
+
+          this.httpRequest.status = true
+        }).catch(err => {
+          this.resetView()
+          this.httpRequest.status = false
+          this.httpRequest.msg = err
+          return true
         })
       } else {
         this.view = {}
@@ -760,6 +793,15 @@ export default {
     },
     hideTab() {
       this.tabStatus = false
+    },
+    resetView() {
+      this.dimension = []
+      this.quota = []
+      this.view = {
+        xAxis: [],
+        yAxis: [],
+        type: ''
+      }
     }
   }
 }