From d4f459860c4a3971cdf9e9a4dd1f97baab348516 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Sun, 26 Sep 2021 18:01:10 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1005=20fix=EF=BC=9A=20=E4=B8=8B=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86=E7=9A=84logs=20noData=20=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/logBottomTab.vue    | 14 +++++-----
 .../page/dashboard/explore/logTab.vue         | 27 ++++++++++++-------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
index ee603e5f9..0e7f5dc84 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
@@ -22,12 +22,8 @@
       </pick-time>
     </template>
     <template v-slot>
-      <template v-if="logData && logData.length > 0">
-        <log-tab ref="logDetail" v-loading="loading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-      </template>
-      <template v-else>
-        <div v-loading="loading" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>
-      </template>
+      <log-tab ref="logDetail" v-loading="loading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+      <div v-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>
     </template>
   </nz-bottom-data-list>
 </template>
@@ -49,7 +45,7 @@ export default {
   },
   data () {
     return {
-      logData: [],
+      logData: null,
       filterTime: [
         bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
         bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
@@ -126,7 +122,9 @@ export default {
     } else if (this.from === fromRoute.asset) {
       this.expressions = [`{asset="${this.obj.name}"}`]
     }
-    this.queryLogData()
+    this.$nextTick(()=>{
+      this.queryLogData()
+    })
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index 3029a3f72..871bcc4c0 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="log-detail">
-    <div :id="`logChart${tabIndex}`" class="log-chart" v-if="showSwitch&&!noData"></div>
-    <div class="log-chart chart-no-data" v-if="showSwitch&&noData">No data</div>
+    <div :id="`logChart${tabIndex}`" class="log-chart" v-if="showSwitch"></div>
+    <div class="log-chart chart-no-data" v-if="showSwitch&&noData" style="top: 150px">No data</div>
     <div class="log-operations" v-if="showSwitch">
       <div class="log-operation">
         <span class="operation-label">{{$t('overall.time')}}</span>
@@ -89,6 +89,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import chartConfig from '@/components/page/dashboard/overview/chartConfig'
 export default {
   name: 'logTab',
   props: {
@@ -204,6 +205,7 @@ export default {
       this.myChart = echarts.init(dom)
       window.addEventListener('resize', this.resizeChart)
       if (this.tableChartData.length > 0) {
+        this.noData = false
         let series = this.tableChartData.map(d => ({
           type: 'bar',
           name: d.name,
@@ -217,11 +219,6 @@ export default {
         series = series.sort((a, b) => {
           return this.levelOptions.findIndex(l => a.name === l.type) - this.levelOptions.findIndex(l => b.name === l.type)
         })
-        if (!series.length) {
-          this.noData = true
-        } else {
-          this.noData = false
-        }
         const option = {
           title: {
             show: false
@@ -332,6 +329,14 @@ export default {
             }
           }
         })
+      } else {
+        this.noData = true
+        const option = chartConfig.getOption('noData')
+        this.myChart.clear()
+        this.myChart.setOption(option)
+        this.$nextTick(() => {
+          this.myChart.resize()
+        })
       }
     },
     getCurrentStepTime (currentTime, currentStepTime, step) {
@@ -432,7 +437,7 @@ export default {
       return this.limit
     },
     resizeChart () {
-      setTimeout(()=>{
+      setTimeout(() => {
         this.myChart.resize()
       })
     },
@@ -508,7 +513,7 @@ export default {
   watch: {
     logData: {
       deep: true,
-      immediate: true,
+      immediate: false,
       handler (n, o) {
         const { logData } = this.filterLogType(n) // 过滤出不同resultType，合并去重
         const { tableData, tableChartData } = this.applyFilter(logData, this.operations) // 应用operation区域的过滤项
@@ -551,6 +556,10 @@ export default {
   * {
     box-sizing: border-box;
   }
+  .log-table{
+    position: relative;
+    min-height: 200px;
+  }
   .log-table .nz-table2 {
     padding: 10px 0 0 0;
     position: relative;