fix: 修复实体详情tabs和group中的图表有时宽度丢失的问题

src/assets/css/components/views/entityExplorer/entity-detail.scss

@@ -1,4 +1,8 @@
 .entity-detail.cn-home {
+  .panel-chart {
+    width: 100%;
+  }
+
   flex-direction: column;
 
   .entity-detail__header {
@@ -45,9 +49,6 @@
             .chart-header {
               border: none;
             }
-            .chart-drawing {
-              width: 530px;
-            }
           }
         }
       }

src/components/advancedSearch/TagMode.vue

@@ -391,7 +391,6 @@ export default {
       deep: true,
       handler (n) {
         if (!_.isEmpty(n)) {
-          console.info(n)
           this.metaList = n
         }
       }

src/components/advancedSearch/TextMode.vue

@@ -73,11 +73,9 @@ export default {
         const errorList = parser.validateStr(str)
         if (_.isEmpty(errorList)) {
           const metaList = parser.parseStr(str)
-          console.info(metaList)
           this.$emit('changeMode', 'tag', metaList)
         } else {
           this.$emit('changeMode', 'tag', { metaList: [], str: '' })
-          console.info(errorList)
         }
       } else {
         this.$emit('changeMode', 'tag', { str: '', metaList: [] })

src/views/charts/Chart.vue

@@ -149,6 +149,7 @@
         :time-filter="timeFilter"
         :query-params="queryParams"
         :entity="entity"
+        :need-timeout="needTimeout"
       ></chart-relation-ship>
 
       <chart-san-key
@@ -166,6 +167,7 @@
         :chart-data="chartData"
         :result-type="resultType"
         :time-filter="timeFilter"
+        :need-timeout="needTimeout"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-echart>
@@ -400,7 +402,8 @@ export default {
     table: Object,
     timeFilter: Object,
     orderPieTable: String,
-    tabHandleClickType: String
+    tabHandleClickType: String,
+    needTimeout: Boolean
   },
   computed: {
     isNoData () {
@@ -437,13 +440,13 @@ export default {
       this.$emit('showLoading', show)
     },
     getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
-      this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
+      this.$emit('getChartData', url, extraParams, timeFilter, isRefresh)
     },
     getChartData (url, extraParams) {
       this.$emit('getChartData', url, extraParams)
     },
     getDetectionData (url, extraParams, isRefresh, timeFilter) {
-      this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
+      this.$emit('getChartData', url, extraParams, timeFilter, isRefresh)
     },
     initEchartsWithTable () {
       this.$refs['chart' + this.chartInfo.id] &&

src/views/charts/PanelChart.vue

@@ -38,6 +38,7 @@
         :table="table"
         :is-fullscreen="isFullscreen"
         :order-pie-table="orderPieTable"
+        :need-timeout="needTimeout"
         :time-filter="timeFilter"
         @getChartData="getChartData"
         @showLoading="showLoading"
@@ -102,7 +103,8 @@ export default {
     timeFilter: Object, // 时间范围
     isFullscreen: Boolean,
     panelLock: Boolean,
-    entity: Object
+    entity: Object,
+    needTimeout: Boolean
   },
   data () {
     return {
@@ -170,7 +172,7 @@ export default {
       this.getChartData()
     },
     /* 参数 extraParams 额外请求参数 */
-    getChartData (url, extraParams = {}, chartTimeFilter, num) {
+    getChartData (url, extraParams = {}, chartTimeFilter, isRefresh) {
       this.loading = true
       try {
         if (chartTimeFilter) {
@@ -267,7 +269,13 @@ export default {
               this.errorInfo = response.msg || response.message || 'Unknown'
             }
           }).finally(() => {
+            if (this.needTimeout) {
+              setTimeout(() => {
                 this.loading = false
+              }, 3000)
+            } else {
+              this.loading = false
+            }
           })
         } else if (this.isGroup || this.isTabs) {
           this.$refs.chart && this.$refs.chart.$refs.chart && this.$refs.chart.$refs.chart.reload()

src/views/charts/PanelChartList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
+  <div :id='`chartList${timestamp}`' class="chart-list" ref="layoutBox">
     <grid-layout
         id="gridLayout"
         ref="layout"
@@ -22,7 +22,6 @@
           :y="item.y"
           :static="item.static"
           :ref="'grid-item' + item.id"
-          :isResizable="isGroup ? false: null"
           dragAllowFrom=".chart-header"
           dragIgnoreFrom=".chart-header__tools"
           v-bind="anchorPoint(item)"
@@ -32,6 +31,7 @@
             :chart-info="item"
             :time-filter="timeFilter"
             :entity="entity"
+            :need-timeout="needTimeout"
             @groupShow="groupShow"
             @showFullscreen="showFullscreen"
         ></panel-chart>
@@ -56,6 +56,7 @@
           :is-fullscreen="true"
           :panelLock="panelLock"
           :time-filter="timeFilter"
+          :need-timeout="needTimeout"
           @showFullscreen="showFullscreen"
       ></panel-chart>
     </el-dialog>
@@ -68,8 +69,6 @@ import VueGridLayout from 'vue-grid-layout'
 import { getGroupHeight, isGroup, getTypeCategory } from './charts/tools'
 import _ from 'lodash'
 import { useRouter } from 'vue-router'
-import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
-import { wholeScreenRouterMapping } from '@/utils/constants'
 import { ref } from 'vue'
 
 export default {
@@ -82,9 +81,9 @@ export default {
   props: {
     timeFilter: Object, // 时间范围
     panelLock: { type: Boolean, default: true },
-    isGroup: Boolean,
     entity: Object,
-    dataList: Array // 看板中所有图表信息
+    dataList: Array, // 看板中所有图表信息
+    needTimeout: Boolean // 对于tab和group，需要延迟渲染，避免丢失宽度
   },
   data () {
     return {
@@ -108,7 +107,7 @@ export default {
   },
   methods: {
     init () {
-      const dom = document.getElementById(this.isGroup ? `chartListGroup${this.timestamp}` : `chartList${this.timestamp}`)
+      const dom = document.getElementById(`chartList${this.timestamp}`)
       if (dom) {
         this.stepWidth = Math.floor(dom.offsetWidth / 12)
       }

src/views/charts/charts/ChartGroup.vue

@@ -5,6 +5,7 @@
       :data-list="dataList"
       :panel-lock="true"
       :entity="entity"
+      :need-timeout="true"
   >
   </panel-chart-list>
 </template>

src/views/charts/charts/ChartRelationShip.vue

@@ -114,7 +114,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import loadsh from 'lodash'
+import _ from 'lodash'
 import { relationShip } from './options/sankey'
 import ChartRelationShip from '@/views/charts/charts/chart-relation-ship'
 import { api } from '@/utils/api'
@@ -173,11 +173,11 @@ export default {
     chartData: [Array, Object],
     resultType: Object,
     queryParams: Object,
-    entity: Object
+    entity: Object,
+    needTimeout: Boolean
   },
   methods: {
     init (id) {
-      const chartParams = this.chartInfo.params
       const name = this.$route.query.name
       const path = window.location.protocol + '//' + window.location.host
       const dom = document.getElementById(id)
@@ -233,10 +233,10 @@ export default {
         if (item && !data.some(d => d.name === item.name)) {
           data.push({ name: item.name, ...handleStyle(item) })
         }
-        if (item && !loadsh.isEmpty(item.from) && !loadsh.isEmpty(item.to)) {
+        if (item && !_.isEmpty(item.from) && !_.isEmpty(item.to)) {
           links.push({ target: item.to, source: item.from })
         }
-        if (item && !loadsh.isEmpty(item.leaf)) {
+        if (item && !_.isEmpty(item.leaf)) {
           item.leaf.forEach(i => {
             handleData(data, links, i)
           })
@@ -296,7 +296,13 @@ export default {
     chartData: {
       deep: true,
       handler (n) {
+        if (this.needTimeout) {
+          setTimeout(() => {
             this.init(`chart${this.chartInfo.id}`)
+          }, 3000)
+        } else {
+          this.init(`chart${this.chartInfo.id}`)
+        }
       }
     }
   },

src/views/charts/charts/ChartTabs.vue

@@ -17,6 +17,7 @@
           :data-list="tab.children"
           :active-tab="activeTab"
           :panel-lock="true"
+          :need-timeout="true"
           :entity="entity"
       >
       </panel-chart-list>

src/views/charts/charts/chart-echart-mixin.js

@@ -13,6 +13,7 @@ import {
 import { handleEchartFontSize, getEchartsFontSize } from '@/utils/tools'
 export default {
   props: {
+    needTimeout: Boolean,
     chartInfo: Object,
     chartData: [Object, Array, String] // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
   },
@@ -238,9 +239,15 @@ export default {
       deep: true,
       handler (n) {
         if (this.chartData && this.chartData.length > 0) {
+          if (this.needTimeout) {
+            setTimeout(() => {
+              this.initEcharts(`chart${this.chartInfo.id}`)
+            }, 3000)
+          } else {
             this.initEcharts(`chart${this.chartInfo.id}`)
           }
         }
       }
     }
+  }
 }