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) {
-      getChart(this.chartIndex).resize()
+      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) {
-      getChart(this.chartIndex).resize()
+      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,7 +1982,9 @@ export default {
      }
    },
    chartResize () {
-      getChart(this.chartIndex).resize()
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).resize()
+      }
    }
  },
  created () {
--- 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/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -113,11 +113,11 @@ export default {
      }
      // 登录后，你输入的内容从后台服务返回
      this.terminal.on('data', function (data) {
-          // let code = data.charCodeAt(0);
-          // if(code==13){
-          // }else {
-          //   that.term.write(data);
-          // }
+        // let code = data.charCodeAt(0);
+        // if(code==13){
+        // }else {
+        //   that.term.write(data);
+        // }
      })
      // 返回
      this.terminalSocket.onmessage = function (evt) {
--- 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))
+function randomNum () {
+  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/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -112,9 +112,9 @@ export default {
      }
    },
    licenseStat () {
-      /*this.license.valid = false
+      /* this.license.valid = false
      this.license.warnInfo = 'hehehe'
-      this.license.token = 'dRqrWja/PzI8FrWVJeGqLw=='*/
+      this.license.token = 'dRqrWja/PzI8FrWVJeGqLw==' */
      this.$get('/sys/license/state').then(response => {
        if (response.code && response.code === 200) {
          this.license.warnInfo = ''
--- 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
@@ -1109,22 +1109,22 @@
 </template>

 <script>
-import {alignNodes, spaceBetween, layout} from '@topology/layout'
-import {getTopology, resetZIndex} from '../../js/common'
+import { alignNodes, spaceBetween, layout } from '@topology/layout'
+import { getTopology, resetZIndex } from '../../js/common'
 import chartDataFormat from '../../../charts/chartDataFormat'
 import promqlInput from '../../../page/dashboard/explore/promqlInput'
 import nezhaColor from '../../nezhaColor'

 const rz = {
  methods: {
-    rz(e) {
+    rz (e) {
      resetZIndex(e)
    }
  }
 }
 export default {
  // pen.type 0为node 1位line
-  data() {
+  data () {
    return {
      expressions: [],
      chartTypeList: [
@@ -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')
@@ -1277,19 +1277,19 @@ export default {
        }
      ],
      penDash: [
-        {d: 'M5 14 l85 0', 'stroke-dasharray': ''},
-        {d: 'M5 14 l85 0', 'stroke-dasharray': '5,5'},
-        {d: 'M5 14 l85 0', 'stroke-dasharray': '10,10'},
-        {d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10'}
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '5,5' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10' }
      ],
      penLineType: [
-        {d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve'},
-        {d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline'},
-        {d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line'}
+        { d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
+        { d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
+        { d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' }
        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
      ],
      penLineFromTOArrow: [
-        {d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: ''},
+        { d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
        {
          d: 'M5 14 l85 0',
          points: '5 14,20 9,20 19',
@@ -1328,11 +1328,11 @@ export default {
        }
      ],
      lineAnimateOptions: [
-        {id: 1, name: this.$t('project.topology.flow')},
-        {id: 'beads', name: this.$t('project.topology.beads')},
-        {id: 'dot', name: this.$t('project.topology.dot')},
-        {id: 'comet', name: this.$t('project.topology.comet')},
-        {id: 'custom', name: this.$t('project.topology.none')}
+        { id: 1, name: this.$t('project.topology.flow') },
+        { id: 'beads', name: this.$t('project.topology.beads') },
+        { id: 'dot', name: this.$t('project.topology.dot') },
+        { id: 'comet', name: this.$t('project.topology.comet') },
+        { id: 'custom', name: this.$t('project.topology.none') }
      ],
      nodeAnimateOptions: [
        {
@@ -1440,7 +1440,7 @@ export default {
    //   immediate:false,
    // },
    selection: {
-      handler() {
+      handler () {
        // this.loading = false
        if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length === 0)) {
          this.selection.pen.data.expressAllArr = ['']
@@ -1451,7 +1451,7 @@ export default {
      immediate: true
    },
    fromDiagram: {
-      handler() {
+      handler () {
        if (this.selection.pen && this.selection.pen.data) {
          // eslint-disable-next-line vue/no-mutating-props
          this.selection.pen.data.iconToolState = false
@@ -1461,14 +1461,14 @@ export default {
      immediate: true
    },
    imgArr: {
-      handler() {
+      handler () {
        // this.loading = false
      },
      deep: true,
      immediate: true
    }
  },
-  created() {
+  created () {
    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
    if (!dataOption.data) {
      dataOption.data = {}
@@ -1481,14 +1481,14 @@ export default {
      }
    })
  },
-  mounted() {
+  mounted () {
    // this.queryMetrics()
    // this.topologyData.data.grid= !!dataOption.grid;
    // this.topologyData.data.rule= !!dataOption.rule;
    // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
    // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
  },
-  updated(n, o) {
+  updated (n, o) {
    if (!this.selection.pen) { // 没选中node line返回
      return
    }
@@ -1506,7 +1506,7 @@ export default {
    }
  },
  methods: {
-    queryMetrics() {
+    queryMetrics () {
      this.metricOptions = []
      this.$get('prom/api/v1/label/__name__/values').then(response => {
        if (response.status == 'success') {
@@ -1523,9 +1523,9 @@ export default {
            }
            if (metricMap.get(key)) {
              const values = metricMap.get(key)
-              values.push({label: item, value: item})
+              values.push({ label: item, value: item })
            } else {
-              const values = [{label: item, value: item}]
+              const values = [{ label: item, value: item }]
              metricMap.set(key, values)
            }
            // this.metricStore.push({label:item,value:item,insertText:item})
@@ -1543,9 +1543,9 @@ export default {
        }
      })
    },
-    tabClick(n) {
+    tabClick (n) {
    },
-    moduleIdChange(n) {
+    moduleIdChange (n) {
      this.selection.pen.data.moduleName = this.modules.find(item => item.id === n).name
      if (!this.selection.pen.data.title) {
        this.selection.pen.data.title = this.selection.pen.data.moduleName
@@ -1554,7 +1554,7 @@ export default {
        this.$emit('notModuleIDArrChange', this.selection.pen.id)
      }
    },
-    changeTitle(val) {
+    changeTitle (val) {
      if (!val) {
        this.selection.pen.text = this.selection.pen.data.moduleName || ''
        this.selection.pen.data.title = this.selection.pen.data.moduleName || ''
@@ -1563,7 +1563,7 @@ export default {
      }
      this.onChange()
    },
-    onChange(value) {
+    onChange (value) {
      if (value === 'lineWidth') {
        this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
      }
@@ -1574,27 +1574,27 @@ export default {
      //   this.$emit('change');
      // }
    },
-    changeExpand() {
+    changeExpand () {
      this.selection.expand = !this.selection.expand
    },
-    isJson(obj) {
+    isJson (obj) {
      return typeof (obj) === 'object' && Object.prototype.toString.call(obj).toLowerCase() == '[object object]' && !obj.length
    },

    // 组件事件
-    onNodesAlign(align) { // 对齐node
+    onNodesAlign (align) { // 对齐node
      alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
      getTopology(this.index).updateProps()
    },
-    onSpaceBetween() {
+    onSpaceBetween () {
      spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
      getTopology(this.index).updateProps()
    },
-    onLayout() { // 改变布局
+    onLayout () { // 改变布局
      layout(getTopology(this.index).activeLayer.pens, this.layout)
      getTopology(this.index).updateProps()
    },
-    onClickDash(number) { // 改变线型
+    onClickDash (number) { // 改变线型
      this.pen.dash = number
      this.drowdown = 0
      if (this.selection.pen) {
@@ -1603,7 +1603,7 @@ export default {

      this.onChange()
    },
-    onClickName(name) {
+    onClickName (name) {
      this.pen.name = name
      // this.pen.calcControlPoints()
      this.drowdown = 0
@@ -1612,7 +1612,7 @@ export default {
      }
      this.onChange()
    },
-    bkTypeChange(val) {
+    bkTypeChange (val) {
      this.selection.pen.data.gradientType = val
      this.$forceUpdate()
      if (val === 0) {
@@ -1638,17 +1638,17 @@ export default {
      }
      this.onChange()
    },
-    colorPickerClick(ref) {
+    colorPickerClick (ref) {
      this.$refs[ref].showPicker = true
    },
-    colorPickerClickTable(ref, row) {
+    colorPickerClickTable (ref, row) {
      row.showColor = row.color.fill
      row.showType = 'fill'
      this.$nextTick(() => {
        this.$refs[ref][0].showPicker = true
      })
    },
-    colorChange(val, name) { // 改变颜色
+    colorChange (val, name) { // 改变颜色
      const bktype = this.selection.pen.data.gradientType
      if (name === 'toArrowColor') {
        this.selection.pen.fromArrowColor = this.colorRGBtoHex(val)
@@ -1687,15 +1687,15 @@ export default {
      this.selection.pen.data[name] = this.colorRGBtoHex(val)
      this.onChange()
    },
-    colorChangeTable(item, val, key) { // 改变颜色
+    colorChangeTable (item, val, key) { // 改变颜色
      item.color[key] = this.colorRGBtoHex(val)
    },
-    changeShowPicker(item, type) {
+    changeShowPicker (item, type) {
      this.$refs['colorPickerBac' + item.level][0].showPicker = true
      item.showType = type
      item.showColor = item.color[type]
    },
-    colorOut(obj, e) {
+    colorOut (obj, e) {
      let flag = false
      e.path.forEach((item) => {
        if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
@@ -1708,7 +1708,7 @@ export default {
      obj.showType = ''
      obj.showColor = undefined
    },
-    changeTopologyOpt(val, key, isColor) {
+    changeTopologyOpt (val, key, isColor) {
      //
      // getTopology(this.index).data[key]=val;
      // getTopology(this.index).render();
@@ -1727,7 +1727,7 @@ export default {
      getTopology(this.index).render()
      this.$emit('changeProjectTitle')
    },
-    colorRGBtoHex(color) { // 获取颜色16进制数
+    colorRGBtoHex (color) { // 获取颜色16进制数
      if (!color) {
        return ''
      }
@@ -1742,17 +1742,17 @@ export default {
      const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
      return hex
    },
-    onClickToArrow(arrow) {
+    onClickToArrow (arrow) {
      this.selection.pen.toArrow = arrow
      this.drowdown = 0
      this.onChange()
    },
-    onClickFromArrow(arrow) {
+    onClickFromArrow (arrow) {
      this.selection.pen.fromArrow = arrow
      this.drowdown = 0
      this.onChange()
    },
-    changeAnimatePlay(val, type) {
+    changeAnimatePlay (val, type) {
      if (type === 'node') {
        if (val === 'custom') {
          this.selection.pen.data.animatePlay = false
@@ -1768,27 +1768,27 @@ export default {
      }
      this.onChange()
    },
-    onAnimate(val) {
+    onAnimate (val) {
      // this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
      // this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
      this.onChange()
      // this.$emit('animate');
    },
-    delTopologyPen() {
+    delTopologyPen () {
      const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
      this.$emit('del', delObj)
    },
-    getMetricOptions() {
+    getMetricOptions () {
      return this.metricOptions
    },
-    addExpression() {
+    addExpression () {
      this.selection.pen.data.expressAllArr.push('')
      this.selection.pen.data.legendsAll.push('')
    },
-    expressionChange(item) {
+    expressionChange (item) {

    },
-    removeExpression(index) {
+    removeExpression (index) {
      if (this.selection.pen.data.expressAllArr.length > 1) {
        this.selection.pen.data.expressAllArr.splice(index, 1)
        this.selection.pen.data.legendsAll.splice(index, 1)
@@ -1801,7 +1801,7 @@ export default {
        })
      }
    },
-    copyExpression(index) {
+    copyExpression (index) {
      this.selection.pen.data.expressAllArr.push(this.selection.pen.data.expressAllArr[index])
      this.selection.pen.data.legendsAll.push(this.selection.pen.data.legendsAll[index])
      this.$nextTick(() => {
@@ -1812,7 +1812,7 @@ export default {
        })
      })
    },
-    valueMappingAdd() {
+    valueMappingAdd () {
      if (this.selection.pen.data.valueMappingSort === 'desc') {
        this.selection.pen.data.valueMapping.push({
          color: {
@@ -1847,10 +1847,10 @@ export default {
        })
      }
    },
-    valueMappingValueChange(index, row) {
+    valueMappingValueChange (index, row) {

    },
-    changeValueMappingSort() {
+    changeValueMappingSort () {
      if (this.selection.pen.data.valueMappingSort === 'desc') {
        this.selection.pen.data.valueMappingSort = 'asc'
        const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
@@ -1867,17 +1867,17 @@ export default {
        this.selection.pen.data.valueMapping = arr
      }
    },
-    valueMappingDel(index, row) {
+    valueMappingDel (index, row) {
      this.selection.pen.data.valueMapping.splice(index, 1)
      this.selection.pen.data.valueMapping.forEach((item, index) => {
        item.level = index
      })
    },
-    inputFocus(e) {
+    inputFocus (e) {
      e.path[2].children[0].setAttribute('tabindex', '0')
      e.path[2].children[1].setAttribute('tabindex', '1')
    },
-    inputBlur(e) {
+    inputBlur (e) {
    }
  }
 }
--- 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/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -123,7 +123,7 @@ export default {
          prop: 'summary',
          show: true,
          minWidth: 100
-        },{
+        }, {
          label: this.$t('alert.list.state'),
          prop: 'state',
          show: true,
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/assetTable.vue
@@ -89,34 +89,34 @@ 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'),
          prop: 'pingInfo',
          show: true,
          width: 110
-        },{
+        }, {
          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: [{
@@ -129,7 +129,7 @@ export default {
          type: 'input',
          label: 'name',
          disabled: false
-        },{
+        }, {
          name: this.$t('asset.manageIp'),
          type: 'input',
          label: 'manageIp',
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -79,7 +79,7 @@ export default {
  data () {
    return {
      url: 'monitor/endpoint',
-      tableId:'endpointTableProject',
+      tableId: 'endpointTableProject',
      pageObj: {
        pageNo: 1,
        pageSize: this.$CONSTANTS.defaultPageSize,
@@ -166,7 +166,7 @@ export default {
          //     //console.error(response.data.list[i], err);
          //   }
          // }
-          response.data.list.map( d => {
+          response.data.list.map(d => {
            d.port = JSON.parse(d.configs).port
            d.path = d.module.type
          })
--- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
@@ -98,14 +98,14 @@
 </template>

 <script>
-import { asset as assetConstants} from '@/components/common/js/constants'
+import { asset as assetConstants } from '@/components/common/js/constants'
 import selectWalk from '../../popBox/selectWalk'
 import editRigthBox from '../../mixin/editRigthBox'

 export default {
  name: 'assetTypeBox',
  components: {
-    'select-walk': selectWalk,
+    'select-walk': selectWalk
  },
  props: {
    obj: {
@@ -125,13 +125,13 @@ export default {
      assetConstants,
      editAssetType: {},
      editModule: {},
-      assetTypeList:[
+      assetTypeList: [
        {
-          id:'',
-          authProtocol:''
+          id: '',
+          authProtocol: ''
        }
      ],
-      value:'',
+      value: '',
      url: 'asset/typeConf',
      // brandUrl: 'asset/brand',
      rightBox: { model: { show: false } },
@@ -207,7 +207,7 @@ export default {
        this.editModule.walk.push(walk)
      }
    },
-    assetType(){
+    assetType () {
      this.$get('asset/typeConf').then(res => {
        this.assetTypeList = res.data.list
      })
--- 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--表单-->

@@ -335,9 +334,9 @@ export default {
      this.editAlertSilence.matchers.splice(index, 1)
    },
    querySearch (queryString, cb) {
-      const labels = sameLabels.map(item=>{
+      const labels = sameLabels.map(item => {
        return {
-          name :item,
+          name: item,
          value: item
        }
      })
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -888,9 +888,9 @@ export default {
              objectInfo.type = val.val
            } else if (val.label === 'protocol') {
              objectInfo.protocol = val.val
-            }else if(val.label === 'operation'){
+            } else if (val.label === 'operation') {
              objectInfo.operation = val.val
-            }else if(val.label === 'state'){
+            } else if (val.label === 'state') {
              objectInfo.state = val.val
            }
          } else {
--- a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
@@ -99,50 +99,49 @@ export default {
          prop: 'id',
          show: true,
          width: 80,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.assetType.name'),
          prop: 'name',
          show: true,
          width: 120,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.assetType.vm'),
          prop: 'vm',
-          show: true,
+          show: true
        }, {
          label: this.$t('config.assetType.vmh'),
          prop: 'vmh',
          show: true
-        },{
+        }, {
          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,10 +54,10 @@

 <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},
+  components: { Template },
  mixins: [table],
  data () {
    return {
--- 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/common/table/settings/exprTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
@@ -72,17 +72,17 @@ export default {
          prop: 'id',
          show: true,
          width: 80,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.exprTemp.name'),
          prop: 'name',
          show: true,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.exprTemp.gname'),
          prop: 'gname',
          show: true,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.exprTemp.expression'),
          prop: 'expression',
--- a/nezha-fronted/src/components/common/table/settings/roleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/roleTable.vue
@@ -79,12 +79,12 @@ export default {
          prop: 'id',
          show: true,
          width: 80,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.roles.name'),
          prop: 'name',
          show: true,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('overall.remark'),
          prop: 'remark',
--- 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/agent.vue
+++ b/nezha-fronted/src/components/page/config/agent.vue
@@ -269,7 +269,7 @@ export default {
          link.click()
          window.URL.revokeObjectURL(link.href)
        }
-      }).catch(()=>{
+      }).catch(() => {
        this.downloadAgentFlag = false
      })
    }
--- a/nezha-fronted/src/components/page/config/assetType.vue
+++ b/nezha-fronted/src/components/page/config/assetType.vue
@@ -63,11 +63,11 @@ export default {
        id: '',
        name: '',
        vm: '',
-        vmh:'',
-        authProtocol:'',
-        snmpEnable:'',
-        snmpCollect:'',
-        sshCollect:''
+        vmh: '',
+        authProtocol: '',
+        snmpEnable: '',
+        snmpCollect: '',
+        sshCollect: ''
      },
      tableId: 'typeConfTable',
      searchMsg: { // 给搜索框子组件传递的信息
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -128,9 +128,9 @@ export default {
  },
  methods: {
    edit (u) {
-      this.object ={...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,9 +120,9 @@ export default {
          this.$message.error(res.msg)
        }
      })
-    },
+    }
  },
-  created() {
+  created () {

  },
  computed: {
--- 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',
@@ -111,7 +111,7 @@ export default {
      }
    }
  },
-  beforeUpdate() {
+  beforeUpdate () {
    bus.$emit('link-data-change')
  },
  methods: {
--- 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',
--- a/nezha-fronted/src/components/page/config/template/index.vue
+++ b/nezha-fronted/src/components/page/config/template/index.vue
@@ -46,7 +46,7 @@ export default {
    }
  },
  mounted () {
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
      this.showTab = 'exprTemp'
    })
  }
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -523,7 +523,7 @@ export default {
      default: false
    }
  },
-  mixins: [rz,editRigthBox],
+  mixins: [rz, editRigthBox],
  data () {
    return {
      fromRoute,