From a35dbd2e364d0fb47ef021122179782fca5f9d21 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 17 Jan 2022 17:06:14 +0800
Subject: [PATCH] =?UTF-8?q?CN-268=20feat:=20panel=E9=87=8D=E6=9E=84--?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/Chart2.vue           |  6 +++---
 src/views/charts/ChartHeader.vue      |  7 ++++---
 src/views/charts/PanelChart.vue       |  7 +++++--
 src/views/charts/charts/ChartTabs.vue | 12 +++++-------
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 92e8f537..4a898a20 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cn-chart">
-    <loading :loading="loading"></loading>
-    <chart-no-data v-if="!loading && (isNoData || isError)"></chart-no-data>
+    <loading :loading="loading && !isTabs"></loading>
+    <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-else>
 
       <chart-tabs
@@ -79,7 +79,7 @@ export default {
   },
   computed: {
     isNoData () {
-      return _.isEmpty(this.chartData)
+      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs
     },
     chartOption () {
       if (this.customChartOption) {
diff --git a/src/views/charts/ChartHeader.vue b/src/views/charts/ChartHeader.vue
index 91d31c32..73a36b4f 100644
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -2,7 +2,7 @@
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
     <div class="chart-header__title">{{chartInfo.name}}</div>
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs">
       <el-popover trigger="click" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
         <template #reference>
           <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { isTitle } from './charts/tools'
+import { isTitle, isTabs } from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
 export default {
   name: 'ChartHeader',
@@ -45,7 +45,8 @@ export default {
   },
   setup (props) {
     return {
-      isTitle: isTitle(props.chartInfo.type)
+      isTitle: isTitle(props.chartInfo.type),
+      isTabs: isTabs(props.chartInfo.type)
     }
   }
 }
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index c355b4bd..ee5767e5 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -3,7 +3,7 @@
   <div :class="{'panel-chart--fullscreen': isFullscreen, 'panel-chart--title-chart': isTitle}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
     <!-- title和工具栏，支持浮动 -->
     <chart-header
-        v-if="!isFullscreen && showHeader"
+        v-if="!isFullscreen && showHeader && !isSingleValue"
         :is-error="isError"
         :error-info="errorInfo"
         :chart-data="chartData"
@@ -271,7 +271,10 @@ export default {
     }
   },
   mounted () {
-    this.getChartData()
+    this.showLoading(true)
+    setTimeout(() => {
+      this.getChartData()
+    }, 200)
   },
   setup (props) {
     const dateRangeValue = 60
diff --git a/src/views/charts/charts/ChartTabs.vue b/src/views/charts/charts/ChartTabs.vue
index f7b2dcf9..9d703d68 100644
--- a/src/views/charts/charts/ChartTabs.vue
+++ b/src/views/charts/charts/ChartTabs.vue
@@ -3,14 +3,13 @@
       class="cn-chart cn-chart__tabs"
       v-model="activeTab"
       @tab-click="changeTab"
-      :style="computePosition"
-      :ref="`chart-${chart.id}`"
+      :ref="`chart-${chartInfo.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}`"
+        :ref="`chart-${chartInfo.id}`"
     >
       <template v-for="chart in tab.children" :key="chart.id">
         <panel-chart
@@ -46,13 +45,12 @@ export default {
       }
     }
   },
-  data () {
-    return {
-    }
-  },
   methods: {
     showFullscreen () {
 
+    },
+    changeTab (tab) {
+      this.activeTab = tab.paneName
     }
   },
   setup (props) {