From 53b115f07d60117c4fe2d931d95d6634bd5499b3 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 19 May 2021 18:03:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=E8=A7=86=E5=9B=BE=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E6=95=B0=E6=8D=AE=E9=9B=86=E8=A2=AB=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=8F=8B=E5=A5=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/chart/chart.js             |  9 ++++
 frontend/src/views/chart/view/ChartEdit.vue | 54 ++++++++++++++++++---
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
index 696ccb44b5..ab528b0aaa 100644
--- a/frontend/src/api/chart/chart.js
+++ b/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({
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index b66928c81f..539b00a074 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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: ''
+      }
     }
   }
 }