NEZ-863 fix：修改panel 页面 搜素后样式错乱的问题

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -326,7 +326,7 @@ export default {
       handler (n, o) {
         if (n.id) {
           if (!n.param.state && n.param.state != Number) {
-            n.param.state = "1"
+            n.param.state = '1'
           }
           if (n.param.severity && n.param.severity != Number) {
             n.param.severity = 1

nezha-fronted/src/components/charts/chart-bar-statistics.vue

@@ -293,7 +293,9 @@ export default {
       this.screenModal = true
     },
     resize (chartItem) {
+      if (getChart(this.chartIndex)) {
         getChart(this.chartIndex).resize()
+      }
     },
     // 设置数据, filter区分
     setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {

nezha-fronted/src/components/charts/chart-group.vue

@@ -12,7 +12,7 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
               <span class="chart-title-text">
-                <span @click="showList=!showList">
+                <span @click="showListChange">
                   <i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
                 </span>
                 {{chartData.name}}
@@ -286,6 +286,14 @@ export default {
         that.firstShow = true
         that.endLoading('screen')
       })
+    },
+    showListChange () {
+      this.showList = !this.showList
+      if (this.showList) {
+        this.$nextTick(() => {
+          this.$refs.listGroup.resize()
+        })
+      }
     }
   },
   watch: {

nezha-fronted/src/components/charts/chart-list-group.vue

@@ -75,7 +75,7 @@
                           @sync="()=>{chartBySync(item)}"
                           :panel-id="filter.panelId"
                           :is-lock="panelLock"
-                          :chart-index="item.chartIndex"
+                          :chart-index="item.id"
                           @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                           :chart-data="item"
         ></line-chart-block>
@@ -92,7 +92,7 @@
                      :is-lock="panelLock"
                      :panel-id="filter.panelId"
                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="item.chartIndex"></chart-single-stat>
+                     :chart-index="item.id"></chart-single-stat>
 
         <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
                       @on-refresh-data="refreshChart"
@@ -106,7 +106,7 @@
                       :panel-id="filter.panelId"
                       :chart-data="item"
                       @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                      :chart-index="item.chartIndex"></chart-table>
+                      :chart-index="item.id"></chart-table>
 
         <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
                      @on-refresh-data="refreshChart"
@@ -120,11 +120,11 @@
                      :panel-id="filter.panelId"
                      :chart-data="item"
                       @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                     :chart-index="item.chartIndex"></chart-url>
+                     :chart-index="item.id"></chart-url>
 
         <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                           :from="from" :panel-id="filter.panelId"
-                          :chart-index="item.chartIndex"
+                          :chart-index="item.id"
                           @on-refresh-data="refreshChart"
                           :is-lock="panelLock"
                           :chart-data="item"
@@ -143,7 +143,7 @@
                     :is-lock="panelLock"
                     :panel-id="filter.panelId"
                     :chart-data="item"
-                    :chart-index="item.chartIndex"
+                    :chart-index="item.id"
         ></text-chart>
 
         <diagramChart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'diagram'"
@@ -162,7 +162,7 @@
 
         <chart-alert-list  :from="from" :ref="'editChart'+item.id"
                            :panel-id="filter.panelId"
-                          :chart-index="item.chartIndex"
+                          :chart-index="item.id"
                           v-if="item.type  === 'alertList'"
                           :editChartId="'editChartId' + item.id"
                            :is-lock="panelLock"
@@ -189,7 +189,7 @@
                          :is-lock="panelLock"
                          :panel-id="filter.panelId"
                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                         :chart-index="item.chartIndex"></chartBarStatis>
+                         :chart-index="item.id"></chartBarStatis>
         <chart-pie  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
                             @on-refresh-data="refreshChart"
                             @on-search-data="searchData"
@@ -202,7 +202,7 @@
                             :is-lock="panelLock"
                             :panel-id="filter.panelId"
                             @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
-                            :chart-index="item.chartIndex"></chart-pie>
+                            :chart-index="item.id"></chart-pie>
       </div>
    </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
@@ -424,13 +424,13 @@ export default {
       this.pagePanelId = this.filter.panelId
       this.getData(this.filter)
     },
-    searchCharts (searchName) {
+    searchCharts (searchName, group) {
       // this.dataList = [];
       // this.dataTotalList = [];
       const chartListTmp = []
       if (searchName && searchName.trim() !== '') {
         this.dataTotalListBak.forEach((item) => {
-          if (item.name.indexOf(searchName) > -1) {
+          if (item.name.indexOf(searchName) > -1 || group.name.indexOf(searchName) > -1) {
             item.isLoaded = false
             item.isHide = false
             chartListTmp.push(item)
@@ -455,7 +455,7 @@ export default {
         if (this.dataList.length > 0) {
           this.dataList.forEach((item, index) => {
             this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
-            this.setChartSize(item.span, index)// 设置该图表宽度
+            this.setChartSize(item, index)// 设置该图表宽度
             if (!item.isLoaded) {
               // 获得当前显示在浏览器的图表，从后台获取数据
               const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
@@ -1468,6 +1468,18 @@ export default {
         this.getChartData(item, index, this.filter)
       })
     },
+    resize () {
+      this.dataList.forEach((item, index) => {
+        if (item.isHide) {
+          return
+        }
+        if (this.$refs['editChart' + item.id][0].chartResize) {
+          this.$refs['editChart' + item.id][0].chartResize()
+        } else if (this.$refs['editChart' + item.id][0].resize) {
+          this.$refs['editChart' + item.id][0].resize()
+        }
+      })
+    },
     searchData (chartId, searchTime) {
       if (searchTime) { // 全屏时间查询
         this.filter.start_time = bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss')

nezha-fronted/src/components/charts/chart-list.vue

@@ -476,14 +476,22 @@ export default {
           } else {
             item.isLoaded = true
             item.isHide = true
+            let groupShowFlag = false // 判断group内的chart是否被匹配
             if (item.type === 'group' && item.children) {
               item.children.forEach(groupItem => {
                 if (groupItem.name.indexOf(searchName) > -1) {
                   item.isLoaded = false
                   item.isHide = false
-                  chartListTmp.push(item)
+                  groupShowFlag = true
                 }
               })
+              if (groupShowFlag) {
+                item.isLoaded = false
+                item.isHide = false
+                chartListTmp.push(item)
+              } else {
+                chartListTmp.push(item)
+              }
             } else {
               chartListTmp.push(item)
             }
@@ -504,14 +512,14 @@ export default {
         if (this.dataList.length > 0) {
           this.dataList.forEach((item, index) => {
             this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
-            this.setChartSize(item.span, index)// 设置该图表宽度
+            this.setChartSize(item, index)// 设置该图表宽度
             if (!item.isLoaded) {
               // 获得当前显示在浏览器的图表，从后台获取数据
               const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
               this.handleElementInViewport(chartBox, 0, item, index, true)
             }
             if (item.type === 'group') {
-              this.$refs['editChart' + item.id][0].$refs.listGroup.searchCharts(searchName)
+              this.$refs['editChart' + item.id][0].$refs.listGroup.searchCharts(searchName, item)
             }
           })
         }
@@ -833,7 +841,6 @@ export default {
 
       if (chartItem.type == 'diagram') {
         if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-
           if (filterType === 'refresh') {
             this.$get('visual/panel/chart/' + chartItem.id).then(res => {
               const data = res.data.data

nezha-fronted/src/components/charts/chart-pie.vue

@@ -289,7 +289,9 @@ export default {
       this.screenModal = true
     },
     resize (chartItem) {
+      if (getChart(this.chartIndex)) {
         getChart(this.chartIndex).resize()
+      }
     },
     // 设置数据, filter区分
     setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -1982,8 +1982,10 @@ export default {
       }
     },
     chartResize () {
+      if (getChart(this.chartIndex)) {
         getChart(this.chartIndex).resize()
       }
+    }
   },
   created () {
     this.legendListMore = []

nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue

@@ -58,7 +58,7 @@ import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import assetTable from '@/components/common/table/asset/assetTable'
 import assetBox from '@/components/common/rightBox/asset/assetBox'
-import { fromRoute } from "@/components/common/js/constants";
+import { fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -70,7 +70,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import cabinetTable from '@/components/common/table/settings/cabinetTable'
-import topToolMoreOptions from "@/components/common/popBox/topToolMoreOptions";
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 export default {
   name: 'cabinetTab',
   mixins: [dataListMixin, subDataListMixin],

nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue

@@ -47,7 +47,7 @@ import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import endpointTable from '@/components/common/table/settings/endpointTable'
 import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
-import { fromRoute } from "@/components/common/js/constants";
+import { fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
 
 export default {

nezha-fronted/src/components/common/js/radomcolor/randomcolor.js

@@ -1,11 +1,10 @@
 
 function randomNum () {
-  let array = window.crypto.getRandomValues(new Uint32Array(3))
+  const array = window.crypto.getRandomValues(new Uint32Array(3))
 
-  let avg = eval(array.join('+'))/3
+  const avg = eval(array.join('+')) / 3
-
-  return array[0]>avg?avg/array[0]:array[0]/avg;
 
+  return array[0] > avg ? avg / array[0] : array[0] / avg
 }
 
 function randomcolor () {

nezha-fronted/src/components/common/mixin/dataList.js

@@ -1,7 +1,7 @@
 import bus from '@/libs/bus'
 import { tableSet } from '@/components/common/js/tools'
 import { fromRoute } from '@/components/common/js/constants'
-import {object} from "cytoscape/src/is";
+import { object } from 'cytoscape/src/is'
 export default {
   data () {
     return {
@@ -234,7 +234,7 @@ export default {
         })
       } else if (type === 'alertRule') {
         this.objectSilence.matchers = [
-          { name: 'alertName', value: row.name, regex: 0 },
+          { name: 'alertName', value: row.name, regex: 0 }
         ]
       }
       this.silenceBoxShow = true

nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue

@@ -132,7 +132,7 @@ export default {
     },
     canvaspaste () {
       getTopology(this.index).paste()
-    },
+    }
   }
 }
 </script>

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -1135,7 +1135,7 @@ export default {
         {
           id: 'stackArea',
           name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
-        },
+        }
         // {
         //   id: 'bar',
         //   name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -89,18 +89,18 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 110,
+          width: 110
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
           show: true,
-          width: 110,
+          width: 110
         },
         {
           label: this.$t('asset.manageIp'),
           prop: 'manageIp',
           show: true,
-          width: 140,
+          width: 140
         },
         {
           label: this.$t('asset.pingInfo'),
@@ -111,12 +111,12 @@ export default {
           label: this.$t('asset.alertNum'),
           prop: 'alertNum',
           show: true,
-          width: 140,
+          width: 140
         }, {
           label: this.$t('asset.endpointNum2'),
           prop: 'endpointNum',
           show: true,
-          width: 160,
+          width: 160
         }],
       searchMsg: { // 给搜索框子组件传递的信息
         searchLabelList: [{

nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue

@@ -105,7 +105,7 @@ import editRigthBox from '../../mixin/editRigthBox'
 export default {
   name: 'assetTypeBox',
   components: {
-    'select-walk': selectWalk,
+    'select-walk': selectWalk
   },
   props: {
     obj: {

nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue

@@ -103,7 +103,6 @@
         </el-form>
       </div>
 
-
     </div>
     <!-- end--表单-->
 

nezha-fronted/src/components/common/table/settings/assetTypeTable.vue

@@ -109,7 +109,7 @@ export default {
         }, {
           label: this.$t('config.assetType.vm'),
           prop: 'vm',
-          show: true,
+          show: true
         }, {
           label: this.$t('config.assetType.vmh'),
           prop: 'vmh',
@@ -117,32 +117,31 @@ export default {
         }, {
           label: this.$t('config.assetType.authProtocol'),
           prop: 'authProtocol',
-          show: true,
+          show: true
         }, {
           label: this.$t('config.assetType.snmpEnable'),
           prop: 'snmpEnable',
-          show: true,
+          show: true
         }, {
           label: this.$t('config.assetType.snmpCollect'),
           prop: 'snmpCollect',
-          show: true,
+          show: true
         },
         {
           label: this.$t('config.assetType.sshCollect'),
           prop: 'sshCollect',
-          show: true,
+          show: true
         },
         {
           label: this.$t('config.assetType.sshCollectScript'),
           prop: 'sshCollectScript',
-          show: true,
+          show: true
         }
       ]
     }
   },
   methods: {
 
-
   },
   computed: {
 

nezha-fronted/src/components/common/table/settings/cabinetTable.vue

@@ -54,7 +54,7 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import Template from "../../../page/config/template";
+import Template from '../../../page/config/template'
 export default {
   name: 'cabinet Table',
   components: { Template },

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -104,7 +104,7 @@ export default {
           label: this.$t('overall.remark'),
           prop: 'remark',
           show: true,
-          minWidth: 200,
+          minWidth: 200
         }
       ]
     }

nezha-fronted/src/components/layout/header.vue

@@ -183,7 +183,7 @@ export default {
     },
     shrink () {
       this.$store.commit('isShrink')
-    },
+    }
   },
   mounted () {
     this.$i18n.locale = this.language

nezha-fronted/src/components/page/alert/alertSilence.vue

@@ -210,7 +210,7 @@ export default {
           }
         })
       })
-    },
+    }
   }
 }
 </script>

nezha-fronted/src/components/page/config/menus.vue

@@ -130,7 +130,7 @@ export default {
     edit (u) {
       this.object = { ...u }
       this.rightBox.show = true
-    },
+    }
   }
 }
 </script>

nezha-fronted/src/components/page/config/model.vue

@@ -68,7 +68,7 @@ import modelBox from '@/components/common/rightBox/administration/modelBox'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import modelTable from '@/components/common/table/settings/modelTable'
-import topToolMoreOptions from "@/components/common/popBox/topToolMoreOptions";
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 
 export default {
   name: 'model',
@@ -77,7 +77,7 @@ export default {
     modelBox,
     deleteButton,
     modelTable,
-    topToolMoreOptions,
+    topToolMoreOptions
   },
   mixins: [dataListMixin],
   data () {
@@ -120,7 +120,7 @@ export default {
           this.$message.error(res.msg)
         }
       })
-    },
+    }
   },
   created () {
 

nezha-fronted/src/components/page/config/system.vue

@@ -785,7 +785,7 @@ export default {
         const reader = new FileReader()
         reader.readAsDataURL(file)// 转化二进制流，异步方法
         let base64Str = ''
-        reader.onload = function () { // 完成后this.result为二进制流console.log(this.result);
+        reader.onload = function () { // 完成后this.result为二进制流;
           base64Str = this.result
           resolve(base64Str)
         }

nezha-fronted/src/components/page/config/system/apiKeyTable.vue

@@ -181,7 +181,7 @@ export default {
     },
     save: function (obj) {
       const copy = JSON.parse(JSON.stringify(obj))
-      copy.expireAt = this.timezoneToUtcTimeStr(copy.expireAt);
+      copy.expireAt = this.timezoneToUtcTimeStr(copy.expireAt)
       if (copy.role) {
         copy.roleId = copy.role.id
       }

nezha-fronted/src/components/page/config/system/linkTable.vue

@@ -82,7 +82,7 @@
 
 <script>
 import { tableCommon } from './systemCommon'
-import bus from "../../../../libs/bus";
+import bus from '../../../../libs/bus'
 import table from '@/components/common/mixin/table'
 export default {
   name: 'linkTable',

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -98,7 +98,7 @@ import chartBox from '@/components/page/dashboard/chartBox'
 import deleteButton from '@/components/common/deleteButton'
 import dataListMixin from '@/components/common/mixin/dataList'
 import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
-import topToolMoreOptions from "@/components/common/popBox/topToolMoreOptions";
+import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 
 export default {
   name: 'chartTemp',