CN-268 feat: panel重构--地图

src/views/charts/Chart2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cn-chart">
-    <loading :loading="loading"></loading>
+    <loading :loading="loading && !isTabs"></loading>
-    <chart-no-data v-if="!loading && (isNoData || isError)"></chart-no-data>
+    <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) {

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)
     }
   }
 }

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

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-${chartInfo.id}`"
-      :ref="`chart-${chart.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) {