CN-268 feat: panel重构--tabs（部分）

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

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>

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,
+    TimeRefresh
-    PanelChartList
   },
   data () {
     return {

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"

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-list
-        <panel-chart
+          :time-filter="timeFilter"
-            :ref="'chart' + chart.id"
+          :data-list="tab.children"
-            :chart-info="chart"
+          :panel-lock="true"
-            :show-header="true"
+      >
-            :time-filter="timeFilter"
+      </panel-chart-list>
-            @showFullscreen="showFullscreen"
-        ></panel-chart>
-      </template>
     </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 {