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

2021-07-23 15:49:18 +08:00
parent 8dd6fa475d
commit 48cc2ae1fe
40 changed files with 196 additions and 166 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/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
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/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) {
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ b/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: {
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/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')
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/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
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/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) {
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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 = []
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/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 {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/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],
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTabNew.vue
+++ b/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 {
--- a/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
+++ b/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
-
-  return array[0]>avg?avg/array[0]:array[0]/avg;
+  const avg = eval(array.join('+')) / 3

+  return array[0] > avg ? avg / array[0] : array[0] / avg
 }

 function randomcolor () {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/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
--- a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
@@ -132,7 +132,7 @@ export default {
    },
    canvaspaste () {
      getTopology(this.index).paste()
-    },
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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')
--- a/nezha-fronted/src/components/common/project/L5/services/img.js
+++ b/nezha-fronted/src/components/common/project/L5/services/img.js
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/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: [{
--- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
+++ b/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: {
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -103,7 +103,6 @@
        </el-form>
      </div>

-
    </div>
    <!-- end--表单-->

--- a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
+++ b/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: {

--- a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
+++ b/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 },
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/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
        }
      ]
    }
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -183,7 +183,7 @@ export default {
    },
    shrink () {
      this.$store.commit('isShrink')
-    },
+    }
  },
  mounted () {
    this.$i18n.locale = this.language
--- a/nezha-fronted/src/components/page/alert/alertSilence.vue
+++ b/nezha-fronted/src/components/page/alert/alertSilence.vue
@@ -210,7 +210,7 @@ export default {
          }
        })
      })
-    },
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -130,7 +130,7 @@ export default {
    edit (u) {
      this.object = { ...u }
      this.rightBox.show = true
-    },
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/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 () {

--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/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)
        }
--- a/nezha-fronted/src/components/page/config/system/apiKeyTable.vue
+++ b/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
      }
--- a/nezha-fronted/src/components/page/config/system/linkTable.vue
+++ b/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',
--- a/nezha-fronted/src/components/page/config/template/chartTemp.vue
+++ b/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',