From 14a3bfefa2d6e93c2e6672bb4f89a4ee2cfa414b Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 18 Jan 2022 13:56:01 +0800
Subject: [PATCH] =?UTF-8?q?CN-268=20feat:=20panel=E9=87=8D=E6=9E=84--tabs?=
 =?UTF-8?q?=EF=BC=88=E9=83=A8=E5=88=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                           |  4 ++++
 src/views/charts/Chart2.vue           |  2 ++
 src/views/charts/Panel.vue            |  4 +---
 src/views/charts/PanelChart.vue       |  2 +-
 src/views/charts/charts/ChartTabs.vue | 20 +++++++-------------
 5 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/main.js b/src/main.js
index 61a4928d..b3d4eab5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,8 @@ import timezone from 'dayjs/plugin/timezone'
 import advancedFormat from 'dayjs/plugin/advancedFormat'
 import weekday from 'dayjs/plugin/weekday'
 
+import PanelChartList from '@/views/charts/PanelChartList'
+
 const _ = require('lodash') // lodash工具
 
 dayjs.extend(utc)
@@ -45,5 +47,7 @@ app.config.globalProperties.$_ = _
 
 app.mixin(commonMixin)
 
+app.component('panel-chart-list', PanelChartList)
+
 app.mount('#app')
 export default app
diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 4a898a20..181aac11 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -18,6 +18,8 @@
           @showLoading="showLoading"
       ></chart-map>
 
+      <div v-else style="height: 100%; width: 100%; background-color: lightcyan;"></div>
+
     </template>
   </div>
 </template>
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index a0cc3757..d1411da3 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -62,7 +62,6 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
-import PanelChartList from './PanelChartList'
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 
@@ -75,8 +74,7 @@ export default {
   },
   components: {
     DateTimeRange,
-    TimeRefresh,
-    PanelChartList
+    TimeRefresh
   },
   data () {
     return {
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index ee5767e5..d3a5f312 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 && !isSingleValue"
+        v-if="!isFullscreen && showHeader && !isSingleValue && !isTabs"
         :is-error="isError"
         :error-info="errorInfo"
         :chart-data="chartData"
diff --git a/src/views/charts/charts/ChartTabs.vue b/src/views/charts/charts/ChartTabs.vue
index 9d703d68..99651e17 100644
--- a/src/views/charts/charts/ChartTabs.vue
+++ b/src/views/charts/charts/ChartTabs.vue
@@ -11,22 +11,19 @@
         :key="tab.id"
         :ref="`chart-${chartInfo.id}`"
     >
-      <template v-for="chart in tab.children" :key="chart.id">
-        <panel-chart
-            :ref="'chart' + chart.id"
-            :chart-info="chart"
-            :show-header="true"
-            :time-filter="timeFilter"
-            @showFullscreen="showFullscreen"
-        ></panel-chart>
-      </template>
+      <panel-chart-list
+          :time-filter="timeFilter"
+          :data-list="tab.children"
+          :panel-lock="true"
+      >
+      </panel-chart-list>
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <script>
 import _ from 'lodash'
-import PanelChart from '@/views/charts/PanelChart'
+
 export default {
   name: 'ChartTabs',
   props: {
@@ -34,9 +31,6 @@ export default {
     chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
     queryParams: Object // 接口请求参数
   },
-  components: {
-    PanelChart
-  },
   computed: {
     timeFilter () {
       return {