diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 03720947f..8f561dba5 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -7,7 +7,8 @@
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "lint": "eslint --fix --ext .js,.vue src"
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
@@ -57,6 +58,12 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "eslint": "^7.22.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.7.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "filemanager-webpack-plugin": "^2.0.5",
diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue
index fe9faed43..a12594375 100644
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -9,16 +9,16 @@
 <script>
 export default {
   name: 'App',
-  async created(){
-    const Timestamp=new Date().getTime();
-    let url="static/config.json?Timestamp="+Timestamp;
-    let result= await this.$http.get(url);
-    this.$axios.defaults.baseURL = result.body.baseUrl;
-    const version=result.body.version;
-    if(version!==localStorage.getItem('nz-version')){
-      sessionStorage.clear();
-      localStorage.clear();
-      localStorage.setItem('nz-version',version);
+  async created () {
+    const Timestamp = new Date().getTime()
+    const url = 'static/config.json?Timestamp=' + Timestamp
+    const result = await this.$http.get(url)
+    this.$axios.defaults.baseURL = result.body.baseUrl
+    const version = result.body.version
+    if (version !== localStorage.getItem('nz-version')) {
+      sessionStorage.clear()
+      localStorage.clear()
+      localStorage.setItem('nz-version', version)
     }
   }
 }
diff --git a/nezha-fronted/src/assets/stylus/table.scss b/nezha-fronted/src/assets/stylus/table.scss
new file mode 100644
index 000000000..ae82e5ffc
--- /dev/null
+++ b/nezha-fronted/src/assets/stylus/table.scss
@@ -0,0 +1,47 @@
+/* 重写更改列宽的提示元素样式 */
+revogr-header .data-header-cell .resizable:hover {
+  background-color: #ccc !important;
+}
+/* 重写表头样式 */
+revo-grid[theme=compact] revogr-viewport revogr-header {
+  line-height: 32px;
+
+  .header-row {
+    height: 32px;
+  }
+  .data-header-cell {
+    border-right: 1px solid #d4d4d4;
+    color: #666666;
+    background-image: linear-gradient(#f8f8f8, #e6e6e6);
+    border-left: 1px solid white;
+    border-bottom: 1px solid #d4d4d4;
+  }
+}
+
+.data-cell {
+  font-size: 12px;
+}
+.data-cell .danger {
+  background-color: $danger-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.data-cell .success {
+  background-color: $success-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.data-cell .suspended {
+  background-color: $suspended-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
+.data-cell .warning {
+  background-color: $warning-color;
+  color: white;
+  padding:2px 5px;
+  border-radius: 4px;
+}
diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index eaeb17561..04bdf6cd8 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -118,106 +118,101 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
-import {Loading} from 'element-ui';
+import bus from '../../libs/bus'
 import chartDataFormat from './chartDataFormat'
-import loading from "../common/loading";
-import timePicker from '../common/timePicker'
-import nzAlertTag from "../page/alert/nzAlertTag";
-import axios from "axios";
-import pickTime from "../common/pickTime";
-import chart from "../page/dashboard/overview/chart";
+import loading from '../common/loading'
+import axios from 'axios'
+import pickTime from '../common/pickTime'
+import chart from '../page/dashboard/overview/chart'
 import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
 export default {
   name: 'chartTable',
   components: {
-    'loading': loading,
-    'time-picker':timePicker,
-    'nz-alert-tag':nzAlertTag,
-    'chart':chart,
-    'pick-time':pickTime,
-    'alertMessageTable':alertMessageTable
+    loading: loading,
+    chart: chart,
+    'pick-time': pickTime,
+    alertMessageTable: alertMessageTable
   },
   props: {
     // 看板id
     panelId: {
       type: Number,
-      default: 0,
+      default: 0
     },
     editChartId: {
       type: String,
-      default: 'editChartId',
+      default: 'editChartId'
     },
-    chartIndex:{
+    chartIndex: {
       type: Number,
-      default: 0,
+      default: 0
     },
-    chartInfo:{},
-    id:'',
-    from: {type: String},
-    isLock:{type:Boolean,default:false}
+    chartInfo: {},
+    id: { type: String },
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
   },
-  data() {
+  data () {
     return {
       tableHeight: 0,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
-        isError:false,
-        errorContent:'',
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        loadingTable:false,// 表格数据加载loading
-        screenPageObj:{
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        storedTableData:[],
-        requestIndex:0,
-        storedScreanTableData:[],
-        images: '',
-        //toolbox: false,
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        //showLoading:true,
-        //showLoadingScreen:false,
-        //showTable:true,
-        chartType: 'alertLIst', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-            start_time: '',
-            end_time: '',
-        },
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        minHeight:200,
-        chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-        titleHeight:38,//title-height:28,magrin-bottom:10
-        pageHeight:40,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-        searchLabel:{},
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("alert.alertName"),
-            prop: 'alertRule',
-            show: true,
-            width: 180
-          }, /*{
+      data: {}, // 该图表信息,chartItem
+      unit: {},
+      isError: false,
+      errorContent: '',
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      loadingTable: false, // 表格数据加载loading
+      screenPageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      storedTableData: [],
+      requestIndex: 0,
+      storedScreanTableData: [],
+      images: '',
+      // toolbox: false,
+      loading: Object,
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      // showLoading:true,
+      // showLoadingScreen:false,
+      // showTable:true,
+      chartType: 'alertLIst', // 图表类型
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+        start_time: '',
+        end_time: ''
+      },
+      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      minHeight: 200,
+      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
+      titleHeight: 38, // title-height:28,magrin-bottom:10
+      pageHeight: 40,
+      divFirstShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
+      oldSearchTime: [],
+      searchLabel: {},
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'alertRule',
+          show: true,
+          width: 180
+        }, /* {
           label: this.$t("alert.list.type"),
           prop: 'type',
           show: true,
@@ -228,696 +223,696 @@ export default {
           show: true,
           width: 140
         }, */{
-            label: this.$t("alert.list.labels"),
-            prop: 'labels',
-            show: true,
-            width: 200
-          }, {
-            label: this.$t("alert.severity"),
-            prop: 'severity',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true
-          }, {
-            label: this.$t('alert.description'),
-            prop: 'description',
-            show: true
-          }, {
-            label: this.$t('alert.list.state'),
-            prop: 'state',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.startAt"),
-            prop: 'startAt',
-            show: true,
-          }, {
-            label: this.$t('alert.endAt'),
-            prop: 'endAt',
-            show: true,
-          }, {
-            label: this.$t('alert.list.current'),
-            prop: 'current',
-            show: true
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 90
-          }
-        ],
-        tablelable:[],
-        dropCol: [],
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-        tableHover: false, //控制滚动条和top按钮同时出现
-        showTopBtn: false,
-        graphShow: false,
-        chartDatas: [],
-        chartUnit:5,
-        deleteBox: {show: false, ids: "", remark: '', state: 2},
-        isPreview:false,
-        ps: null
-      };
+          label: this.$t('alert.list.labels'),
+          prop: 'labels',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true
+        }, {
+          label: this.$t('alert.description'),
+          prop: 'description',
+          show: true
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.startAt'),
+          prop: 'startAt',
+          show: true
+        }, {
+          label: this.$t('alert.endAt'),
+          prop: 'endAt',
+          show: true
+        }, {
+          label: this.$t('alert.list.current'),
+          prop: 'current',
+          show: true
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 90
+        }
+      ],
+      tablelable: [],
+      dropCol: [],
+      toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+      tableHover: false, // 控制滚动条和top按钮同时出现
+      showTopBtn: false,
+      graphShow: false,
+      chartDatas: [],
+      chartUnit: 5,
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      isPreview: false,
+      ps: null
+    }
   },
   computed: {
-    tagType() {
+    tagType () {
       return (key) => {
         if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-          return "normal";
+          return 'normal'
         } else {
-          return "info";
+          return 'info'
         }
       }
     },
-    tagValue() {
+    tagValue () {
       return (key, value) => {
         if (key == 'type') {
-          if (value ==  1) {
-            value = this.$t("project.project.project");
+          if (value == 1) {
+            value = this.$t('project.project.project')
           } else if (value == 2) {
-            value = this.$t("module.module.module");
+            value = this.$t('module.module.module')
           } else if (value == 3) {
-            value = this.$t("asset.asset");
+            value = this.$t('asset.asset')
           }
         }
-        return key + "：" + value;
+        return key + '：' + value
       }
     }
   },
-    watch: {
-      chartInfo:{
-        deep:true,
-        immediate:true,
-        handler(n,o){
-          this.data=Object.assign({},n)
-        }
-      },
-      panelId:{
-        immediate:true,
-        handler(n,o){
-          this.panelIdInner=n
-        }
-      },
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+  watch: {
+    chartInfo: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        this.data = Object.assign({}, n)
       }
     },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      formatThreshold:function(value,unit){
-        let unitMethod=chartDataFormat.getUnit(unit)
-        if(unitMethod&&value){
-          return unitMethod.compute(value,null,2);
-        }else{
-          return value
+    panelId: {
+      immediate: true,
+      handler (n, o) {
+        this.panelIdInner = n
+      }
+    },
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    formatThreshold: function (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    },
+    computeDistance: function (str) {
+      let width = 0
+      const html = document.createElement('span')
+      html.innerText = str
+      html.className = 'getTextWidth'
+      document.querySelector('body').appendChild(html)
+      width = document.querySelector('.getTextWidth').offsetWidth
+      document.querySelector('.getTextWidth').remove()
+      return Number('-' + (width + 5))
+    },
+    returnMarkArea: function () {
+      if (this.currentMsg) {
+        if (this.currentMsg.alertRule.operator == '>' || this.currentMsg.alertRule.operator == '>=') {
+          return [{ yAxis: this.currentMsg.alertRule.threshold }, {}]
+        } else {
+          return [{}, { yAxis: this.currentMsg.alertRule.threshold }]
         }
-      },
-      computeDistance:function(str){
-        var width = 0;
-        var html = document.createElement('span');
-        html.innerText = str;
-        html.className = 'getTextWidth';
-        document.querySelector('body').appendChild(html);
-        width = document.querySelector('.getTextWidth').offsetWidth;
-        document.querySelector('.getTextWidth').remove();
-        return Number('-'+(width+5));
-      },
-      returnMarkArea:function(){
-        if(this.currentMsg){
-          if(this.currentMsg.alertRule.operator=='>'||this.currentMsg.alertRule.operator=='>='){
-            return[{yAxis:this.currentMsg.alertRule.threshold},{}]
-          }else{
-            return[{},{yAxis:this.currentMsg.alertRule.threshold}]
-          }
+      }
+    },
+    detail (obj) {
+      this.chartDatas = []
+      this.legend = []
+      this.graphShow = true
+      this.currentMsg = obj
+      this.chartUnit = obj.alertRule.unit ? obj.alertRule.unit : 5
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    dialogClose () {
+      this.graphShow = false
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    screenDialogClose: function () {
+      this.screenModal = false
+      this.deleteBox.ids = []
+      this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection()
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    deleteMessage (deleltebox, cb) {
+      this.$put('alert/message', deleltebox).then(res => {
+        if (res.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.deleteBox.show = false
+          this.deleteBox.ids = ''
+          this.getAlertList()
+          cb()
+        } else {
+          this.$message.error(res.msg)
         }
-      },
-      detail(obj) {
-        this.chartDatas = [];
-        this.legend = [];
-        this.graphShow = true;
-        this.currentMsg = obj;
-        this.chartUnit=obj.alertRule.unit?obj.alertRule.unit:5;
-        this.$nextTick(() => {
-          this.queryChartDate();
-        });
-      },
-      dialogClose() {
-        this.graphShow = false;
-      },
-      closeDialog() {
-        this.importBox.show = false;
-        this.deleteBox.show = false;
-      },
-      screenDialogClose:function(){
-        this.screenModal = false
-        this.deleteBox.ids=[];
-        this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection();
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
-      deleteMessage(deleltebox,cb) {
-        this.$put("alert/message", deleltebox).then(res => {
-          if (res.code === 200) {
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-            this.deleteBox.show = false;
-            this.deleteBox.ids="";
-            this.getAlertList();
-            cb();
-          } else {
-            this.$message.error(res.msg);
-          }
-        })
-      },
-      chartUnitChange:function(unit){
-        this.chartUnit=unit;
-        this.$nextTick(()=>{
-          this.queryChartDate()
-        })
-      },
-      queryChartDate() {
-        let $temp=this;
-        let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
-        let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
-        this.searchTime = [start, end];
-        let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
-        let step = '15s';
-        if(timeDiff< 1){
-          step='15s';
-        }else if(timeDiff < 7){
-          step='5m';
-        }else if(timeDiff<30){
-          step='10m';
-        }else{
-          step='30m';
-        }
-        if(this.$refs.messageChart){
-          this.$refs.messageChart.startLoading();
-        }
-        let axiosArr=[];
-        let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
-        if(paramStr&&paramStr.trim()!='""'){
-          axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
-          this.legend = [];
-          this.chartDatas = [];
-          axios.all(axiosArr).then(res =>{
-            try {
-              res.forEach((response, promIndex) => {
-                if (response.status == 200) {
-                  if (response.data.status == 'success') {
-                    let queryData = response.data.data.result[0];
-                    if (queryData) {
-                      let chartData = {
-                        type: "line",
-                        symbol: 'none',  //去掉点
-                        smooth: 0.2,  //曲线变平滑
-                        name: '',
+      })
+    },
+    chartUnitChange: function (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    queryChartDate () {
+      const $temp = this
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      if (this.$refs.messageChart) {
+        this.$refs.messageChart.startLoading()
+      }
+      const axiosArr = []
+      const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
+      if (paramStr && paramStr.trim() != '""') {
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+        this.legend = []
+        this.chartDatas = []
+        axios.all(axiosArr).then(res => {
+          try {
+            res.forEach((response, promIndex) => {
+              if (response.status == 200) {
+                if (response.data.status == 'success') {
+                  const queryData = response.data.data.result[0]
+                  if (queryData) {
+                    const chartData = {
+                      type: 'line',
+                      symbol: 'none', // 去掉点
+                      smooth: 0.2, // 曲线变平滑
+                      name: '',
+                      lineStyle: {
+                        width: 1,
+                        opacity: 0.9
+                      },
+                      markLine: {
+                        silent: true,
+                        symbol: ['circle', 'circle'],
+                        label: {
+                          distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
+                          formatter: function (params) {
+                            return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
+                          }
+                        },
                         lineStyle: {
-                          width: 1,
-                          opacity: 0.9
+                          color: '#d64f40',
+                          width: 2,
+                          type: 'dotted'
                         },
-                        markLine: {
-                          silent: true,
-                          symbol: ['circle', 'circle'],
-                          label: {
-                            distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
-                            formatter: function (params) {
-                              return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
-                            }
-                          },
-                          lineStyle: {
-                            color:'#d64f40',
-                            width:2,
-                            type:'dotted'
-                          },
-                          data: [{
-                            yAxis: Number(this.currentMsg.alertRule.threshold)
-                          }, ]
+                        data: [{
+                          yAxis: Number(this.currentMsg.alertRule.threshold)
+                        }]
+                      },
+                      markArea: {
+                        itemStyle: {
+                          color: '#d64f40',
+                          opacity: 0.1
                         },
-                        markArea:{
-                          itemStyle:{
-                            color:'#d64f40',
-                            opacity:0.1
-                          },
-                          data:[
-                           this.returnMarkArea()
-                          ]
-                        }
-                      };
-                      chartData.name += "{";
-                      alias += "{";
-                      Object.keys(queryData.metric).forEach((item, index) => {
-                        let label = item;
-                        let value = queryData.metric[label];
-                        chartData.name += label + "='" + value + "',";
-                      });
-                      chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
-                      chartData.name += "}";
-                      let alias = chartData.name;
-                      let legend = {
-                        name: chartData.name,
-                        alias: alias,
-                        isGray: false
+                        data: [
+                          this.returnMarkArea()
+                        ]
                       }
-                      this.legend.push(legend);
-                      chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                        return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
-                      });
-                      this.chartDatas.push(chartData);
                     }
-                  } else {
-                    this.$message.error(response.data.error)
-                    console.error(response.data)
+                    chartData.name += '{'
+                    let alias = chartData.name
+                    alias += '{'
+                    Object.keys(queryData.metric).forEach((item, index) => {
+                      const label = item
+                      const value = queryData.metric[label]
+                      chartData.name += label + "='" + value + "',"
+                    })
+                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                    chartData.name += '}'
+                    const legend = {
+                      name: chartData.name,
+                      alias: alias,
+                      isGray: false
+                    }
+                    this.legend.push(legend)
+                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                      return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)]
+                    })
+                    this.chartDatas.push(chartData)
                   }
+                } else {
+                  this.$message.error(response.data.error)
+                  console.error(response.data)
                 }
-              });
-              this.$nextTick(() => {
-                this.$refs.messageChart.setRandomColors(this.chartDatas.length);
-                this.$refs.messageChart.setLegend(this.legend);
-                this.$refs.messageChart.setSeries(this.chartDatas);
-                this.$refs.messageChart.endLoading();
-              });
-            } catch(err) {
-              this.$message.error(err);
-              this.$refs.messageChart.endLoading();
+              }
+            })
+            this.$nextTick(() => {
+              this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+              this.$refs.messageChart.setLegend(this.legend)
+              this.$refs.messageChart.setSeries(this.chartDatas)
+              this.$refs.messageChart.endLoading()
+            })
+          } catch (err) {
+            this.$message.error(err)
+            this.$refs.messageChart.endLoading()
+          }
+        })
+      }
+    },
+    getAlertList: function (filterType, isPreview = false, chartInfo) {
+      this.resize()
+      this.loadingTable = true
+      this.isPreview = isPreview
+      const queryParam = {
+        pageSize: this.pageObj.pageSize,
+        pageNo: this.pageObj.pageNo
+      }
+      let chart
+      if (chartInfo) {
+        chart = Object.assign({}, chartInfo)
+      } else {
+        chart = Object.assign({}, this.chartInfo)
+      }
+      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
+        const param = chart.param
+        if (param.endpointId && param.endpointId != '') {
+          queryParam.endpointId = param.endpointId
+        } else {
+          if (param.moduleId && param.moduleId != '') {
+            queryParam.moduleId = param.moduleId
+          } else {
+            if (param.projectId && param.projectId != '') {
+              queryParam.projectId = param.projectId
             }
+          }
+        }
+
+        if (param.ruleId && param.ruleId != '') {
+          queryParam.ruleId = param.ruleId
+        }
+        if (param.severity && param.severity != '') {
+          queryParam.severity = param.severity
+        }
+        if (param.state && param.state != '') {
+          queryParam.state = param.state
+        }
+      }
+      if (this.searchLabel.orderBy) {
+        queryParam.orderBy = this.searchLabel.orderBy
+      }
+      // this.startLoading(filterType);
+      this.$get('/alert/message', queryParam).then(response => {
+        if (response.code == 200) {
+          this.storedTableData = response.data.list
+          this.storedScreanTableData = response.data.list
+          const axiosAll = []
+          this.$nextTick(() => {
+            this.storedTableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels)
+              if (item.alertRule.buildIn != 1) {
+                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+              } else {
+                axiosAll.push('')
+              }
+            })
+            axios.all(axiosAll).then(res => {
+              res.forEach((item, index) => {
+                let current = []
+                const response2 = item.data
+                if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item)
+                    } else {
+                      return parseFloat(item).toFixed(2)
+                    }
+                  })
+                } else {
+                  current = [null, null]
+                }
+                this.storedTableData[index].current = current
+              })
+              this.$set(this.storedTableData, [...this.storedTableData])
+            })
           })
+          this.pageObj.total = response.data.total
+          this.isError = false
+          this.errorContent = ''
+          this.divFirstShow = true
+
+          this.firstShow = true // 展示操作按键
+          this.loadingTable = false
+          this.endLoading(filterType)
+        } else {
+          this.isError = true
+          this.errorContent = response.msg
         }
-      },
-      getAlertList: function (filterType,isPreview=false,chartInfo) {
-        this.resize();
-        this.loadingTable=true;
-        this.isPreview = isPreview;
-        let queryParam={
-          pageSize:this.pageObj.pageSize,
-          pageNo:this.pageObj.pageNo,
-        }
-        let chart;
-        if(chartInfo){
-          chart=Object.assign({},chartInfo)
-        }else{
-          chart=Object.assign({},this.chartInfo)
-        }
-        if(chart && chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
-          let param=chart.param;
-          if(param.endpointId&&param.endpointId != ''){
-            queryParam.endpointId=param.endpointId;
-          }else{
-            if(param.moduleId&&param.moduleId!=''){
-              queryParam.moduleId=param.moduleId;
-            }else{
-              if(param.projectId&&param.projectId!=''){
-                queryParam.projectId=param.projectId;
-              }
+      })
+    },
+    getAlerScreetList: function (filterType, isPreview = false, chartInfo) {
+      this.resize()
+      this.loadingTable = true
+      this.isPreview = isPreview
+      const queryParam = {
+        pageSize: this.screenPageObj.pageSize,
+        pageNo: this.screenPageObj.pageNo
+      }
+      let chart
+      if (chartInfo) {
+        chart = Object.assign({}, chartInfo)
+      } else {
+        chart = Object.assign({}, this.chartInfo)
+      }
+      if (chart && chart.param) { // 按照粒度，project>module>endpoint  查询只传最细粒度
+        const param = chart.param
+        if (param.endpointId && param.endpointId != '') {
+          queryParam.endpointId = param.endpointId
+        } else {
+          if (param.moduleId && param.moduleId != '') {
+            queryParam.moduleId = param.moduleId
+          } else {
+            if (param.projectId && param.projectId != '') {
+              queryParam.projectId = param.projectId
             }
           }
+        }
 
-          if(param.ruleId&&param.ruleId!=''){
-            queryParam.ruleId=param.ruleId;
-          }
-          if(param.severity&&param.severity!=''){
-            queryParam.severity=param.severity;
-          }
-          if(param.state&&param.state!=''){
-            queryParam.state=param.state;
-          }
+        if (param.ruleId && param.ruleId != '') {
+          queryParam.ruleId = param.ruleId
         }
-        if(this.searchLabel.orderBy){
-          queryParam.orderBy=this.searchLabel.orderBy;
+        if (param.severity && param.severity != '') {
+          queryParam.severity = param.severity
         }
-        // this.startLoading(filterType);
-        this.$get('/alert/message', queryParam).then(response => {
-          if (response.code == 200) {
-            this.storedTableData = response.data.list;
-            this.storedScreanTableData=response.data.list;
-            let axiosAll=[]
-            this.$nextTick(() => {
-             this.storedTableData.forEach((item) => {
-               item.labels = JSON.parse(item.labels);
-               if(item.alertRule.buildIn != 1){
-                 let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                 axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
-               }else{
-                 axiosAll.push('')
-               }
-             });
-             axios.all(axiosAll).then(res=>{
-               res.forEach((item,index)=>{
-                 let current = [];
-                 let response2 = item.data;
-                 if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                   current = response2.data.result[0].value.map((item, i) => {
-                     if (i == 0) {
-                       return bus.computeTimezone(item);
-                     } else {
-                       return parseFloat(item).toFixed(2);
-                     }
-                   });
-                 }else{
-                   current=[null,null]
-                 }
-                 this.storedTableData[index].current=current;
-               });
-               this.$set( this.storedTableData,[...this.storedTableData]);
-             })
-           });
-            this.pageObj.total = response.data.total;
-            this.isError = false;
-            this.errorContent = '';
-            this.divFirstShow = true;
-
-            this.firstShow = true; // 展示操作按键
-            this.loadingTable=false;
-            this.endLoading(filterType);
-          }else{
-            this.isError = true;
-            this.errorContent = response.msg;
-          }
-        });
-      },
-      getAlerScreetList: function (filterType,isPreview=false,chartInfo) {
-        this.resize();
-        this.loadingTable=true;
-        this.isPreview = isPreview;
-        let queryParam={
-          pageSize:this.screenPageObj.pageSize,
-          pageNo:this.screenPageObj.pageNo,
+        if (param.state && param.state != '') {
+          queryParam.state = param.state
         }
-        let chart;
-        if(chartInfo){
-          chart=Object.assign({},chartInfo)
-        }else{
-          chart=Object.assign({},this.chartInfo)
-        }
-        if(chart && chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
-          let param=chart.param;
-          if(param.endpointId&&param.endpointId != ''){
-            queryParam.endpointId=param.endpointId;
-          }else{
-            if(param.moduleId&&param.moduleId!=''){
-              queryParam.moduleId=param.moduleId;
-            }else{
-              if(param.projectId&&param.projectId!=''){
-                queryParam.projectId=param.projectId;
+      }
+      if (this.searchLabel.orderBy) {
+        queryParam.orderBy = this.searchLabel.orderBy
+      }
+      this.startLoading(filterType)
+      this.$get('/alert/message', queryParam).then(response => {
+        if (response.code == 200) {
+          this.storedTableData = response.data.list
+          this.storedScreanTableData = response.data.list
+          const axiosAll = []
+          this.$nextTick(() => {
+            this.storedScreanTableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels)
+              if (item.alertRule.buildIn != 1) {
+                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+              } else {
+                axiosAll.push('')
               }
-            }
-          }
+            })
+            axios.all(axiosAll).then(res => {
+              res.forEach((item, index) => {
+                let current = []
+                const response2 = item.data
+                if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item)
+                    } else {
+                      return parseFloat(item).toFixed(2)
+                    }
+                  })
+                } else {
+                  current = [null, null]
+                }
+                this.storedScreanTableData[index].current = current
+              })
+              this.$set(this.storedScreanTableData, [...this.storedScreanTableData])
+            })
+          })
+          this.screenPageObj.total = response.data.total
+          this.isError = false
+          this.errorContent = ''
+          this.divFirstShow = true
 
-          if(param.ruleId&&param.ruleId!=''){
-            queryParam.ruleId=param.ruleId;
-          }
-          if(param.severity&&param.severity!=''){
-            queryParam.severity=param.severity;
-          }
-          if(param.state&&param.state!=''){
-            queryParam.state=param.state;
-          }
+          this.firstShow = true // 展示操作按键
+          this.loadingTable = false
+          this.endLoading(filterType)
+        } else {
+          this.isError = true
+          this.errorContent = response.msg
         }
-        if(this.searchLabel.orderBy){
-          queryParam.orderBy=this.searchLabel.orderBy;
-        }
-        this.startLoading(filterType);
-        this.$get('/alert/message', queryParam).then(response => {
-          if (response.code == 200) {
-            this.storedTableData = response.data.list;
-            this.storedScreanTableData=response.data.list;
-            let axiosAll=[]
-            this.$nextTick(() => {
-             this.storedScreanTableData.forEach((item) => {
-               item.labels = JSON.parse(item.labels);
-               if(item.alertRule.buildIn != 1){
-                 let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                 axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
-               }else{
-                 axiosAll.push('')
-               }
-             });
-             axios.all(axiosAll).then(res=>{
-               res.forEach((item,index)=>{
-                 let current = [];
-                 let response2 = item.data;
-                 if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                   current = response2.data.result[0].value.map((item, i) => {
-                     if (i == 0) {
-                       return bus.computeTimezone(item);
-                     } else {
-                       return parseFloat(item).toFixed(2);
-                     }
-                   });
-                 }else{
-                   current=[null,null]
-                 }
-                 this.storedScreanTableData[index].current=current;
-               })
-               this.$set(this.storedScreanTableData,[...this.storedScreanTableData])
-             })
-           })
-            this.screenPageObj.total = response.data.total;
-            this.isError = false;
-            this.errorContent = '';
-            this.divFirstShow = true;
-
-            this.firstShow = true; // 展示操作按键
-            this.loadingTable=false;
-            this.endLoading(filterType);
-          }else{
-            this.isError = true;
-            this.errorContent = response.msg;
-          }
-        });
-      },
-      screenRefreshChart(){
-        this.getAlerScreetList();
-      },
-      promQueryParamConvert(obj) {
-        if(obj){
-          return "(" + obj.alertRule.expr + ") and (" + function(){
-            let q = "{";
-            for (let k in obj.labels) {
-              if (k != 'alertname' && k != 'severity') {
-                q += k;
-                q += "=";
-                q += ("'" + obj.labels[k] + "',");
-              }
-            };
-            if (q.length > 1) {
-              q = q.substring(0, q.length-1);
+      })
+    },
+    screenRefreshChart () {
+      this.getAlerScreetList()
+    },
+    promQueryParamConvert (obj) {
+      if (obj) {
+        return '(' + obj.alertRule.expr + ') and (' + (function () {
+          let q = '{'
+          for (const k in obj.labels) {
+            if (k != 'alertname' && k != 'severity') {
+              q += k
+              q += '='
+              q += ("'" + obj.labels[k] + "',")
             }
-            q += "}";
-            return q;
-          }() + ")";
-        }
-        return '';
-      },
-      elementsetShow(s, e) {
-        var eventfixed = {
-          shezhi: 0,
-          screen: 0
-        };
-        eventfixed[s] = 1;
-        e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
-        this.$store.commit('setEventfixed', eventfixed);
-        const h = document.documentElement.clientHeight;
-        const w = document.documentElement.clientWidth;
-        const dw = this.$refs.elementset.$el.offsetWidth;
-        const dh = this.$refs.elementset.$el.offsetHeight;
-        let positionx =
-          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
-        let positiony =
+          };
+          if (q.length > 1) {
+            q = q.substring(0, q.length - 1)
+          }
+          q += '}'
+          return q
+        }()) + ')'
+      }
+      return ''
+    },
+    elementsetShow (s, e) {
+      const eventfixed = {
+        shezhi: 0,
+        screen: 0
+      }
+      eventfixed[s] = 1
+      e.preventDefault()
+      this.$store.commit('setHeaderTable', this.tablelable)
+      this.$store.commit('setEventfixed', eventfixed)
+      const h = document.documentElement.clientHeight
+      const w = document.documentElement.clientWidth
+      const dw = this.$refs.elementset.$el.offsetWidth
+      const dh = this.$refs.elementset.$el.offsetHeight
+      const positionx =
+          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw
+      const positiony =
           e.clientY + dh <= h - 10
             ? e.clientY + 20
-            : e.clientY + 20 - (e.clientY + dh - h);
-        this.$store.commit('setPosition', {positionx, positiony});
-      },
-      elementsetHide() {
-        //悬浮点击空白隐藏
-        this.$refs.elementset.elementsetHide();
-      },
-      tablelabelEmit(data) {
-        //获取子组件传过来的参数
-        this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
-      },
-        pageNo(val) {
-          this.pageObj.pageNo = val;
-          this.getAlertList();
-        },
-        pageSize(val) {
-          this.pageObj.pageSize = val;
-          this.getAlertList();
-        },
+            : e.clientY + 20 - (e.clientY + dh - h)
+      this.$store.commit('setPosition', { positionx, positiony })
+    },
+    elementsetHide () {
+      // 悬浮点击空白隐藏
+      this.$refs.elementset.elementsetHide()
+    },
+    tablelabelEmit (data) {
+      // 获取子组件传过来的参数
+      this.$store.commit('setHeaderTable', data)
+      this.tablelable = data
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAlertList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getAlertList()
+    },
 
-        screenPageNo(val) {
-          this.screenPageObj.pageNo = val;
-          this.getAlerScreetList();
-        },
-        screenPageSize(val) {
-          this.screenPageObj.pageSize = val;
-          this.getAlerScreetList();
-        },
-        startLoading(area){
-          if(area==='showFullScreen'){
-            //this.showLoadingScreen = true;
-            this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-          }else {
-            //this.showLoading = true;
-            this.$refs['localLoading'+this.chartIndex].startLoading();
-          }
-        },
-        endLoading(area){
-          if(area==='showFullScreen'){
-            //this.showLoadingScreen = false;
-            this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-          }else {
-            //this.showLoading = false;
-            this.$refs['localLoading'+this.chartIndex].endLoading();
-          }
-        },
-      resize(chartItem) {
-        let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
-        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
-        container.style.height = `calc(100% - ${deHeight}px)`;
-        this.tableHeight = `calc(100% - 34px)`;
-      },
-      showLoad(chartItem) {
-        //设置高度 chart-table
-        this.$nextTick(() => {
-          this.resize(chartItem);
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      //全屏时间条件查询
-      dateChange(time) {
-        //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-        //this.showTable = false;
-        this.seriesItemScreen = [];
-        for(let i=0;i<8;i++){
-          this.seriesItemScreen.push({//表格数据
-            // label: '',//label
-            // metric: '',//metric列
-            element:'',
-            time: '',//采集时间
-            value: '',//数值
-          });
-        }
-        // this.startLoading('screen');
-        //this.tableLoading = true;
-        //this.firstShow = false;
-        this.$emit('on-search-data', this.data.id, this.searchTime);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
+    screenPageNo (val) {
+      this.screenPageObj.pageNo = val
+      this.getAlerScreetList()
+    },
+    screenPageSize (val) {
+      this.screenPageObj.pageSize = val
+      this.getAlerScreetList()
+    },
+    startLoading (area) {
+      if (area === 'showFullScreen') {
+        // this.showLoadingScreen = true;
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        // this.showLoading = true;
+        this.$refs['localLoading' + this.chartIndex].startLoading()
+      }
+    },
+    endLoading (area) {
+      if (area === 'showFullScreen') {
+        // this.showLoadingScreen = false;
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        // this.showLoading = false;
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    resize (chartItem) {
+      const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
+      const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
+      container.style.height = `calc(100% - ${deHeight}px)`
+      this.tableHeight = 'calc(100% - 34px)'
+    },
+    showLoad (chartItem) {
+      // 设置高度 chart-table
+      this.$nextTick(() => {
+        this.resize(chartItem)
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 全屏时间条件查询
+    dateChange (time) {
+      // this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+      // this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+      // this.showTable = false;
+      this.seriesItemScreen = []
+      for (let i = 0; i < 8; i++) {
+        this.seriesItemScreen.push({ // 表格数据
+          // label: '',//label
+          // metric: '',//metric列
+          element: '',
+          time: '', // 采集时间
+          value: ''// 数值
+        })
+      }
+      // this.startLoading('screen');
+      // this.tableLoading = true;
+      // this.firstShow = false;
+      this.$emit('on-search-data', this.data.id, this.searchTime)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
-          });
-        });
-      },
-        // 全屏查看
-        showAllScreen() {
-            this.dropdownMenuShow=false;
-            this.storedScreanTableData = this.storedTableData
-            this.screenModal = true;
-            this.deleteBox.ids=[];
-            this.$refs.alertListTable.$refs.alertListTable.clearSelection();
-            this.screenPageObj={...this.pageObj}
-        },
-        // 设置数据, filter区分
-        setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-          // console.info(chartItem,title)
-        },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAlertList();
-      },
+          }
+        })
+      })
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.storedScreanTableData = this.storedTableData
+      this.screenModal = true
+      this.deleteBox.ids = []
+      this.$refs.alertListTable.$refs.alertListTable.clearSelection()
+      this.screenPageObj = { ...this.pageObj }
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
+      // console.info(chartItem,title)
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAlertList()
+    }
 
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted() {
-        this.firstLoad = false;
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList')
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList'))
-        : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList')
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList'))
-        : this.tableTitle;
-    },
-    beforeDestroy() {
-      this.clearChart();
-      if (this.ps) {
-        this.ps.destroy();
-      }
-    },
-};
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+    this.tablelable = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList'))
+      : this.tableTitle
+    this.dropCol = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList'))
+      : this.tableTitle
+  },
+  beforeDestroy () {
+    this.clearChart()
+    if (this.ps) {
+      this.ps.destroy()
+    }
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 68ffd25a5..fe11e3431 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -35,7 +35,7 @@
                   <template v-for="(value, key, i) in item.data">
 
                     <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
-                    <div class="content-item" v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
+                    <div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{assetKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
@@ -78,7 +78,7 @@
                       </div>
                     </div>
                     <!-- endpoint-detail、asset、model的assetInfo的feature-->
-                    <div class="content-item" v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'">
+                    <div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{key}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
@@ -122,7 +122,7 @@
                     </div>
 
                     <!-- project的projectInfo的project详情-->
-                    <div class="content-item" v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && projectKey[key]">
+                    <div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && projectKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{projectKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
@@ -143,7 +143,7 @@
                       </div>
                     </div>
                     <!-- project的projectInfo的module详情-->
-                    <div class="content-item" v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && moduleKey[key]">
+                    <div v-else-if="data.from == $CONSTANTS.fromRoute.project && data.type == 'projectInfo' && moduleKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{moduleKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
@@ -171,7 +171,7 @@
                     </div>
 
                     <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                    <div class="content-item" v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]">
+                    <div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{endpointKey[key]}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
@@ -185,7 +185,7 @@
                       </div>
                     </div>
                     <!-- endpoint-detail的endpointInfo的alert详情-->
-                    <div class="content-item" v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
+                    <div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && item.title == $t('overall.alert')" :key="i" class="content-item">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">{{key}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
@@ -197,7 +197,7 @@
                     </div>
 
                     <!-- alertRule-detail的详情-->
-                    <div @click="showDeep(`deep-${index}-${i}`)" class="content-item" v-else-if="data.from == $CONSTANTS.fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'">
+                    <div v-else-if="data.from == $CONSTANTS.fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
                       <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                         <span class="content-text">
                           <span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
@@ -213,7 +213,7 @@
                       <el-collapse-transition>
                         <div class="chart-third-content" v-show="deepShow.indexOf(`deep-${index}-${i}`) > -1">
                           <template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
-                            <div class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)" v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'">
+                            <div v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'" :key="fi" class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)">
                               <div class="content-item-key item-tip deep" :id="`key-${index}-${i}-${ti}-${fi}`">
                                 <span class="content-text">
                                   <span><i v-if="module._endpoint_[moduleName]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
@@ -229,7 +229,7 @@
                               <el-collapse-transition>
                                 <div class="chart-forth-content" v-show="deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1">
                                   <template v-if="eModuleName == moduleName" v-for="(endpoint, eModuleName, si) in module._endpoint_">
-                                    <div class="content-item" @click.stop v-for="(endpointNum, endpointName, ei) in endpoint">
+                                    <div v-for="(endpointNum, endpointName, ei) in endpoint" :key="ei" class="content-item" @click.stop>
                                       <div class="content-item-key item-tip deepp" :id="`key-${index}-${i}-${ti}-${fi}-${si}-${ei}`">
                                         <span class="content-text">
                                           <span>{{endpointName}}</span>
@@ -263,316 +263,313 @@
 </template>
 
 <script>
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker';
-  import chartPreview from './chartPreview';
-  import * as echarts from 'echarts';
-  import nzAlertTag from '../page/alert/nzAlertTag';
-  import bus from '../../libs/bus';
+import loading from '../common/loading'
+import chartPreview from './chartPreview'
+import * as echarts from 'echarts'
+import nzAlertTag from '../page/alert/nzAlertTag'
+import bus from '../../libs/bus'
 
-  export default {
-    name: 'chartDetail',
-    components: {
-      'loading': loading,
-      'time-picker': timePicker,
-      'chart-preview': chartPreview,
-      'nz-alert-tag': nzAlertTag
+export default {
+  name: 'chartDetail',
+  components: {
+    loading: loading,
+    'chart-preview': chartPreview,
+    'nz-alert-tag': nzAlertTag
+  },
+  props: {
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
     },
-    props: {
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-      isLock:{type:Boolean,default:false}
+    editChartId: {
+      type: String,
+      default: 'editChartId'
     },
-    data() {
-      return {
-        ready: false,
-        data: {}, // 该图表信息,chartItem
-        detail: [], //展示的详情
-        unit: {},
-        show: [0], //控制展开/隐藏
-        deepShow: [], //控制二级/三级的展开/隐藏
-        isError:false,
-        errorContent:'',
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
+    chartIndex: {
+      type: Number,
+      default: 0
+    },
+    isLock: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      ready: false,
+      data: {}, // 该图表信息,chartItem
+      detail: [], // 展示的详情
+      unit: {},
+      show: [0], // 控制展开/隐藏
+      deepShow: [], // 控制二级/三级的展开/隐藏
+      isError: false,
+      errorContent: '',
+      loading: Object,
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+        start_time: '',
+        end_time: ''
+      },
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
+      oldSearchTime: [],
 
-        assetKey: {
-          host: this.$t("asset.tableTitle.host"),
-          id: "Id",
-          assetType: this.$t("asset.tableTitle.assetType"),
-          sn: this.$t("asset.tableTitle.device"),
-          state: this.$t("asset.tableTitle.assetState"),
-          pingRtt: this.$t('asset.tableTitle.assetPing'),
-          dataCenter: this.$t("asset.tableTitle.dataCenter"),
-          cabinet: this.$t("asset.tableTitle.cabinet"),
-          model: this.$t("asset.tableTitle.model"),
-          vendor: this.$t("asset.tableTitle.vendor"),
-          purchaseDate: this.$t("asset.tableTitle.procurementDate"),
-          principal: this.$t("asset.tableTitle.principal"),
-          tel: this.$t("asset.tableTitle.principalTel"),
-          pingStatus: this.$t('asset.tableTitle.assetPing'),
-          pingLastReply: this.$t('asset.tableTitle.lastReply'),
-          endpoint: this.$t("asset.tableTitle.modules"),
-          alert: this.$t("asset.tableTitle.alerts"),
-          tags: this.$t("overall.tag")
-        },
-        projectKey: {
-          id: "ID",
-          name: this.$t("overall.name"),
-          remark: this.$t("overall.remark"),
-          alertStat: this.$t("project.chart.alertStat"),
-        },
-        moduleKey: {
-          id: "ID",
-          name: this.$t("overall.name"),
-          type: this.$t("overall.type"),
-          remark: this.$t("overall.remark"),
-          endpointStat: this.$t("project.chart.endpointStat"),
-          alertStat: this.$t("project.chart.alertStat"),
-        },
-        endpointKey: {
-          id: "ID",
-          host: this.$t("project.endpoint.host"),
-          port: this.$t("project.endpoint.port"),
-          path: this.$t("project.endpoint.path"),
-          param: this.$t("project.endpoint.param"),
-          port: this.$t("project.endpoint.port"),
-          state: this.$t("alert.list.state"),
-          project: this.$t("project.project.project"),
-          module: this.$t("project.module.module")
-        },
-      };
-    },
-    computed: {
-      itemTip() {
-        return function(type, content, index, ready) {
-          let className = "item-tip-show";
-          this.$nextTick(() => {
-            if (ready) {
-              let cellDom = document.querySelector(`#${type}-${index}`);
-              let spanDom = document.querySelector(`#${type}-${index} .content-text`);
-              if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
-                document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className);
-              } else {
-                document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className);
-              }
-            }
-          });
-          return "";
-        }
+      assetKey: {
+        host: this.$t('asset.tableTitle.host'),
+        id: 'Id',
+        assetType: this.$t('asset.tableTitle.assetType'),
+        sn: this.$t('asset.tableTitle.device'),
+        state: this.$t('asset.tableTitle.assetState'),
+        pingRtt: this.$t('asset.tableTitle.assetPing'),
+        dataCenter: this.$t('asset.tableTitle.dataCenter'),
+        cabinet: this.$t('asset.tableTitle.cabinet'),
+        model: this.$t('asset.tableTitle.model'),
+        vendor: this.$t('asset.tableTitle.vendor'),
+        purchaseDate: this.$t('asset.tableTitle.procurementDate'),
+        principal: this.$t('asset.tableTitle.principal'),
+        tel: this.$t('asset.tableTitle.principalTel'),
+        pingStatus: this.$t('asset.tableTitle.assetPing'),
+        pingLastReply: this.$t('asset.tableTitle.lastReply'),
+        endpoint: this.$t('asset.tableTitle.modules'),
+        alert: this.$t('asset.tableTitle.alerts'),
+        tags: this.$t('overall.tag')
       },
-    },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
+      projectKey: {
+        id: 'ID',
+        name: this.$t('overall.name'),
+        remark: this.$t('overall.remark'),
+        alertStat: this.$t('project.chart.alertStat')
       },
-      setLabels:function(source){
-        let labels = Object.keys(source[0]);
-        labels = labels.map(item=>{
-          return{
-            label:this.replaceSplit(item),
-            prop:item,
-            show:true,
-          }
-        });
-        //console.info(labels);
-        return labels;
+      moduleKey: {
+        id: 'ID',
+        name: this.$t('overall.name'),
+        type: this.$t('overall.type'),
+        remark: this.$t('overall.remark'),
+        endpointStat: this.$t('project.chart.endpointStat'),
+        alertStat: this.$t('project.chart.alertStat')
       },
-      replaceSplit(key){
-        if(key) {
-          return key.replace(/\$_\$/g,' ')
-        }
-      },
-      hideElement(index) {
-        if (this.show.indexOf(index) > -1) {
-          this.show.splice(this.show.indexOf(index), 1);
-        } else {
-          this.show.push(index);
-        }
-      },
-      showDeep(index) {
-        if (this.deepShow.indexOf(index) > -1) {
-          this.deepShow.splice(this.deepShow.indexOf(index), 1);
-        } else {
-          this.deepShow.push(index);
-        }
-      },
-      startLoading(area){
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-      },
-      endLoading(area){
-        this.$refs['localLoading'+this.chartIndex].endLoading();
-      },
-      preview() {
-        this.$refs.chartsPreview.show(this.data);
-      },
-      resize() {
-        let container = document.querySelector('#chartInfoDiv' + this.chartIndex);
-        container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`;
-      },
-      showLoad(chartItem) {
+      endpointKey: {
+        id: 'ID',
+        host: this.$t('project.endpoint.host'),
+        port: this.$t('project.endpoint.port'),
+        path: this.$t('project.endpoint.path'),
+        param: this.$t('project.endpoint.param'),
+        state: this.$t('alert.list.state'),
+        project: this.$t('project.project.project'),
+        module: this.$t('project.module.module')
+      }
+    }
+  },
+  computed: {
+    itemTip () {
+      return function (type, content, index, ready) {
+        const className = 'item-tip-show'
         this.$nextTick(() => {
-          this.resize();
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow = false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow = false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      clearChart(){
-        this.data = {};
-      },
-
-      // 设置数据, filter区分
-      setData(chartItem, detail, panelId, filter, area, errorMsg) {
-        if(errorMsg && errorMsg !== ''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        this.divFirstShow = true;
-
-        this.firstShow = true; // 展示操作按键
-
-        this.panelIdInner = panelId;
-        this.data = chartItem;
-        this.detail = detail;
-        if (this.detail[0] && this.detail[0].type && this.detail[0].type == "endpointInfo") { //endpointInfo的小图表
-          this.$nextTick(() => {
-            this.initChart(this.detail[0].data.stateSeries);
-          });
-        }
-        this.endLoading();
-      },
-      initChart(series) {
-        series.forEach((item)=>{
-          item.areaStyle={
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [{
-                offset: 0, color: 'rgb(35,191,154)' // 0% 处的颜色
-              }, {
-                offset: 1, color: 'rgb(255, 255, 255)' // 100% 处的颜色
-              }],
-              global: false
+          if (ready) {
+            const cellDom = document.querySelector(`#${type}-${index}`)
+            const spanDom = document.querySelector(`#${type}-${index} .content-text`)
+            if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+              document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className)
+            } else {
+              document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className)
             }
           }
-        });
-        let option = {
-          title: {show: false},
-          grid: {top: 20, bottom: 20},
-          tooltip: {
-            show: true,
-            trigger: "axis",
-            extraCssText: 'z-index:3100;',
-            position: [100, 1],
-            textStyle: {
-              fontSize: 12,
-            },
-            padding: 3,
-            formatter: function(param) {
-              let time = param[0].data[0];
-              time = bus.computeTimezone(time);
-              let date = new Date(time);
-              let hour = date.getHours();
-              hour = hour > 9 ? hour : "0" + hour; //加0补充为两位数字
-              let minute = date.getMinutes();
-              minute = minute > 9 ? minute : "0" + minute; //如果分钟小于10,则在前面加0补充为两位数字
-
-              let value = param[0].data[1];
-              if (value == "1") {
-                value = "up";
-              } else {
-                value = "down";
-              }
-              return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("/") + " " + [hour, minute].join(":") + "\n" + value;
-            }
-          },
-          legend: {show: false},
-          xAxis: {
-            show: false,
-            type: 'time'
-          },
-          yAxis: {
-            type: 'value',
-            show: false
-          },
-          useUTC: false,//使用本地时间
-          visualMap: {
-            show: false,
-            pieces: [{
-              gt: -0.5,
-              lt: 0.5,
-              color: '#d64f40'
-            }, {
-              gt: 0.6,
-              lt: 1.5,
-              color: '#50d050'
-            }]
-          },
-          series: series
-        };
-        let chart = echarts.init(document.querySelector("#littleChart"));
-        chart.setOption(option);//创建图表
-      },
-      timeFormat(val){
-        return this.utcTimeToTimezoneStr(val)
+        })
+        return ''
+      }
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    setLabels: function (source) {
+      let labels = Object.keys(source[0])
+      labels = labels.map(item => {
+        return {
+          label: this.replaceSplit(item),
+          prop: item,
+          show: true
+        }
+      })
+      // console.info(labels);
+      return labels
+    },
+    replaceSplit (key) {
+      if (key) {
+        return key.replace(/\$_\$/g, ' ')
       }
     },
-    mounted() {
-      this.firstLoad = false;
-      setTimeout(() => {
-        this.ready = true;
-      }, 300);
+    hideElement (index) {
+      if (this.show.indexOf(index) > -1) {
+        this.show.splice(this.show.indexOf(index), 1)
+      } else {
+        this.show.push(index)
+      }
     },
-    beforeDestroy() {
-      this.clearChart();
+    showDeep (index) {
+      if (this.deepShow.indexOf(index) > -1) {
+        this.deepShow.splice(this.deepShow.indexOf(index), 1)
+      } else {
+        this.deepShow.push(index)
+      }
     },
-  };
+    startLoading (area) {
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+    },
+    endLoading (area) {
+      this.$refs['localLoading' + this.chartIndex].endLoading()
+    },
+    preview () {
+      this.$refs.chartsPreview.show(this.data)
+    },
+    resize () {
+      const container = document.querySelector('#chartInfoDiv' + this.chartIndex)
+      container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`
+    },
+    showLoad (chartItem) {
+      this.$nextTick(() => {
+        this.resize()
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    clearChart () {
+      this.data = {}
+    },
+
+    // 设置数据, filter区分
+    setData (chartItem, detail, panelId, filter, area, errorMsg) {
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      this.divFirstShow = true
+
+      this.firstShow = true // 展示操作按键
+
+      this.panelIdInner = panelId
+      this.data = chartItem
+      this.detail = detail
+      if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
+        this.$nextTick(() => {
+          this.initChart(this.detail[0].data.stateSeries)
+        })
+      }
+      this.endLoading()
+    },
+    initChart (series) {
+      series.forEach((item) => {
+        item.areaStyle = {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: 'rgb(35,191,154)' // 0% 处的颜色
+            }, {
+              offset: 1, color: 'rgb(255, 255, 255)' // 100% 处的颜色
+            }],
+            global: false
+          }
+        }
+      })
+      const option = {
+        title: { show: false },
+        grid: { top: 20, bottom: 20 },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          extraCssText: 'z-index:3100;',
+          position: [100, 1],
+          textStyle: {
+            fontSize: 12
+          },
+          padding: 3,
+          formatter: function (param) {
+            let time = param[0].data[0]
+            time = bus.computeTimezone(time)
+            const date = new Date(time)
+            let hour = date.getHours()
+            hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
+            let minute = date.getMinutes()
+            minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
+
+            let value = param[0].data[1]
+            if (value == '1') {
+              value = 'up'
+            } else {
+              value = 'down'
+            }
+            return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + ' ' + [hour, minute].join(':') + '\n' + value
+          }
+        },
+        legend: { show: false },
+        xAxis: {
+          show: false,
+          type: 'time'
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        useUTC: false, // 使用本地时间
+        visualMap: {
+          show: false,
+          pieces: [{
+            gt: -0.5,
+            lt: 0.5,
+            color: '#d64f40'
+          }, {
+            gt: 0.6,
+            lt: 1.5,
+            color: '#50d050'
+          }]
+        },
+        series: series
+      }
+      const chart = echarts.init(document.querySelector('#littleChart'))
+      chart.setOption(option)// 创建图表
+    },
+    timeFormat (val) {
+      return this.utcTimeToTimezoneStr(val)
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+    setTimeout(() => {
+      this.ready = true
+    }, 300)
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 8f0abc9c2..943602b14 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -51,7 +51,7 @@
 
     <span class="temp-dom"></span>
 
-    <draggable v-model="dataList" @start="start" @end="end" :move="move" :key :disabled="panelLock"
+    <draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
                :scroll-sensitivity="150"
                :options="{
                  group:{name:'chartGroup',pull:'false'},
@@ -178,790 +178,780 @@
 </template>
 
 <script>
-  import axios from 'axios';
-  import bus from '../../libs/bus';
-  import lineChartBlock from './line-chart-block';
-  import chartTable from './chart-table';
-  import chartUrl from './chart-url';
-  import chartSingleStat from './chart-single-stat';
-  import chartDetail from './chart-detail';
-  import draggable from 'vuedraggable'
-  import chartDataFormat from "./chartDataFormat";
-  import chartAlertList from './chart-alert-list'
-  import textChart from './text-chart'
-  import chartPie from './chart-pie'
-  // import visNetwork from './visNetwork'
-  export default {
-    name: 'chartList',
-    props: {
-      isModel: {type: Boolean, default: false},
-      additionalInfo:{},
-      draggable: {type: Boolean, default: true},
-      detail: Object,
-      from: {type: String},
-      panelLock:{type:Boolean,default:false}
-    },
+import axios from 'axios'
+import bus from '../../libs/bus'
+import lineChartBlock from './line-chart-block'
+import chartTable from './chart-table'
+import chartUrl from './chart-url'
+import chartSingleStat from './chart-single-stat'
+import chartDetail from './chart-detail'
+import draggable from 'vuedraggable'
+import chartDataFormat from './chartDataFormat'
+import chartAlertList from './chart-alert-list'
+import textChart from './text-chart'
+import chartPie from './chart-pie'
+// import visNetwork from './visNetwork'
+export default {
+  name: 'chartList',
+  props: {
+    isModel: { type: Boolean, default: false },
+    additionalInfo: {},
+    draggable: { type: Boolean, default: true },
+    detail: Object,
+    from: { type: String },
+    panelLock: { type: Boolean, default: false }
+  },
 
-    components: {
-      chartAlertList,
-      chartDetail,
-      lineChartBlock,
-      chartTable,
-      chartUrl,
-      chartSingleStat,
-      draggable,
-      textChart,
-      chartPie,
-      // visNetwork,
-    },
-    data() {
-      return {
-        filter: {},
-        dataList: [], // 看板中所有图表信息
-        dataListDragTmp:[],
-        time: {
-          start: '',
-          end: '',
-        },
-        extraMarginBottom: 0, //dom额外的margin
-        panelId: '',
-        timer: null,
-        dataTotalList:[],//懒加载：总记录数
-        dataTotalListBak:[],//用于查询：懒加载，总记录备份
-        isPage:false,//是否分页懒加载
-        currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
-        lineNum:3,//每页加载的行数
-        pagePanelId:'',//当前分页的panelId
-        dragging: null,
-        //chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
-        stepHeight: 50,
+  components: {
+    chartAlertList,
+    chartDetail,
+    lineChartBlock,
+    chartTable,
+    chartUrl,
+    chartSingleStat,
+    draggable,
+    textChart,
+    chartPie
+    // visNetwork,
+  },
+  data () {
+    return {
+      filter: {},
+      dataList: [], // 看板中所有图表信息
+      dataListDragTmp: [],
+      time: {
+        start: '',
+        end: ''
+      },
+      extraMarginBottom: 0, // dom额外的margin
+      panelId: '',
+      timer: null,
+      dataTotalList: [], // 懒加载：总记录数
+      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
+      isPage: false, // 是否分页懒加载
+      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
+      lineNum: 3, // 每页加载的行数
+      pagePanelId: '', // 当前分页的panelId
+      dragging: null,
+      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+      stepHeight: 50,
 
-        tempDom: {height: "", width: ""},
-        //showShadow:false,
-      };
-    },
-    methods: {
-      dropmenuChange(id, show) {
-        if (show) {
-          let chart = this.$refs["chart" + id][0];
-          let container = this.$refs.listContainer;
-          let heightDifference = container.offsetHeight - chart.offsetTop;
-          if (heightDifference < 235) {
-            this.extraMarginBottom = 235-heightDifference;
-            this.$nextTick(() => {
-              container.scrollTop = container.offsetHeight;
-            });
-          }
-        } else {
-          this.extraMarginBottom = 0;
-        }
-      },
-      tempDomInit() {
-        let span = document.querySelector(".temp-dom");
-        this.tempDom.width = span.offsetWidth;
-      },
-      start (event) {
-        // console.log('start', event, this.dataList);
-        event.item.querySelector('.chartTitle').style.background = '#d8dce1';
-        let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
-        if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
-          projectAndAssetFeatureInfos.forEach(item => {
-            item.classList.remove("unfold");
-            item.classList.remove("fold");
-          });
-        }
-        this.dataListDragTmp = [...this.dataList];
-      },
-      end(event) {
-        if (event.oldIndex !== event.newIndex) {
-          let newWeights = [];
-          this.dataList.forEach((item, index) => {
-            item.weight = index;
-            newWeights.push({id: item.id, weight: index});
-          });
-          this.$put('panel/'+ this.pagePanelId+'/charts/weights', newWeights).then(response => {
-            if (response.code !== 200) {
-
-            }
-          });
-        }
-      },
-      move(event, orgin) {
-        let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
-
-        let chartTitle = dragClass.querySelector('.chartTitle');
-        chartTitle.style.background = '#d8dce1';
-
-      },
-      clone(event){
-        //console.log('clone',event );
-        let canvas = event.item.querySelector('canvas');
-        //console.log('clone-canvas',canvas);
-        let canvasclone = event.clone.querySelector('canvas');
-        canvasclone.style.border='solid 1px yellow';
-        //console.log('clone-canvasclone',canvasclone);
-        if(canvas&&canvasclone){
-          let ctx = canvas.getContext("2d");
-          let image = new Image();
-          image.src= canvas.toDataURL();
-          //console.log('clone-image',image);
-          let ctxClone = canvasclone.getContext("2d");
-          //ctxClone.drawImage(image,0,0);
-          image.onload = function(){
-            ctxClone.drawImage(image,0,0);
-          }
-        }
-      },
-      dragPosition:function(e){
-        let odiv=e;//目标元素e.target
-        //var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
-        //得到点击时该容器的：
-        var startY=e.clientY;
-        var startX=e.clientX;
-        var _this=this;
-//鼠标相对元素的位置
-        var distY=e.clientY-odiv.offsetLeft;
-        var distX=e.clientX-odiv.offsetTop;
-        document.onmousemove=function(e){
-          e.preventDefault();
-          let left=e.clientX-distX;
-          let top=e.clientY-distY;
-          odiv.style.top=top+'px';
-          odiv.style.left=left+'px';
-        };
-
-        document.onmouseup=function(){
-          document.onmousemove=null;
-          document.onmouseup = null;
-        }
-      },
-      handleDragStart(e,item){
-        this.dragging = item;
-      },
-      handleDragEnd(e,item){
-        this.dragging = null
-      },
-      //首先把div变成可以放置的元素，即重写dragenter/dragover
-      handleDragOver(e) {
-        e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-      },
-      handleDragEnter(e,item){
-        e.dataTransfer.effectAllowed = "move";//为需要移动的元素设置dragstart事件
-        if(item === this.dragging){
-          return
-        }
-        const newItems = [...this.dataList];
-        const src = newItems.indexOf(this.dragging);
-        const dst = newItems.indexOf(item);
-
-        newItems.splice(dst, 0, ...newItems.splice(src, 1));
-
-        this.dataList = newItems
-      },
-      initCurrentRecordNum(){
-        this.currentRecordNum = 0;
-      },
-      cleanData(){
-        this.dataList = [];
-        this.chartDataCacheGroup.clear();
-      },
-      initData(filter) {
-        this.cleanData();
-        // 内含 panelId,开始时间,结束时间
-        this.filter = filter;
-        this.pagePanelId = this.filter.panelId;
-        this.getData(this.filter);
-      },
-      searchCharts(searchName){
-        // this.dataList = [];
-        // this.dataTotalList = [];
-        let chartListTmp = [];
-        if(searchName && searchName.trim()!==''){
-          this.dataTotalListBak.forEach((item)=>{
-            if(item.title.indexOf(searchName)>-1){
-              item.isLoaded = false;
-              item.isHide=false;
-              chartListTmp.push(item);
-            }else{
-              item.isLoaded = true;
-              item.isHide=true;
-              chartListTmp.push(item);
-            }
-          });
-        }else{
-          this.dataTotalListBak.forEach((item)=>{
-            item.isLoaded = false;
-            item.isHide=false;
-            chartListTmp.push(item);
-          });
-        }
-
-        this.dataTotalList = [...chartListTmp];
-        this.dataList = [...this.dataTotalList];
-
-        this.$nextTick(() => {
-          if (this.dataList.length > 0 ) {
-            this.dataList.forEach((item,index) => {
-
-              this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
-              this.setChartSize(item.span, index);//设置该图表宽度
-              if(!item.isLoaded ){
-                //获得当前显示在浏览器的图表，从后台获取数据
-                let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
-                this.handleElementInViewport(chartBox,0,item,index,true);
-              }
-            });
-          }
-        });
-      },
-      pageDataList(isAdd,panelId,isSearch){
-        if(panelId!==this.pagePanelId){
-          this.currentRecordNum = 0;
-        }
-        if(this.dataTotalList && this.dataTotalList.length>0){
-          if(this.currentRecordNum>=this.dataTotalList.length){
-            //alert('数据加载完毕！');
-          }else {
-            let dataTmpList = [];
-            let spanSum = 0;
-            let line = 0;//行数
-            let isDataFull=false;
-            let curRecNum = this.currentRecordNum;
-            let len = this.dataTotalList.length;
-            for(let i=curRecNum;!isDataFull && i<len;i++){
-              if(line<this.lineNum){
-                let item = this.dataTotalList[i];
-                let span = item.span;
-                let sumTmp = spanSum+span;
-                if(sumTmp<=12){
-                  spanSum =sumTmp;
-                }else{//大于12表示够1行了，
-                  line = line +1;
-                  spanSum = span;
-                }
-                if(line<this.lineNum){
-                  dataTmpList.push(item);
-                  this.currentRecordNum = i+1;
-                }else{
-                  this.currentRecordNum = i;
-                  break;
-                }
-              }else {//数据加载够了
-                isDataFull=true;
-                this.currentRecordNum = i;
-                break;
-              }
-            }
-            if(isAdd){
-              let oldDataListLen = this.dataList.length;
-              let dataListTmp = [...this.dataList];
-              this.dataList =  [...dataListTmp.concat(dataTmpList)];
-              this.$nextTick(() => {
-                this.dataSetFirst(dataTmpList,oldDataListLen,isSearch);
-              });
-            }else {
-              this.dataList = [...dataTmpList];
-            }
-          }
-        }
-      },
-
-      // 获取panel详情数据,获取panel下所有chart列表
-      getData(params) {
-        const param = {
-          panelId: params.panelId,
-          query: params.query,
-          from: params.from
-        };
-        //alert-rule单独处理
-        if (param.from == this.$CONSTANTS.fromRoute.rule) {
-          this.dataList = [];
-          this.dataList.push({
-            id: -10,
-            panelId: 0,
-            title: this.$t("alert.config.chart.affectEntity"),
-            span: 4,
-            height: 350,
-            type: "alertRuleInfo",
-            prev: 0,
-            next: -9,
-            buildIn: 1,
-            draggable: false,
-            resizable: false,
-            editable: false,
-          });
-          this.dataList.push({
-            id: -9,
-            panelId: 0,
-            title: this.$t("alert.config.chart.alertNumTrend"),
-            span: 8,
-            height: 350,
-            type: "line",
-            prev: -10,
-            next: -1,
-            unit: 1,
-            buildIn: 1,
-            elements: [{
-              id: '',
-              expression: `nz_alert_nums{id="${this.detail.id}"}`,
-              type: ''
-            }]
-          });
-          this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-24*60*60*1000, "yyyy-MM-dd hh:mm:ss"));
-          this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
+      tempDom: { height: '', width: '' }
+      // showShadow:false,
+    }
+  },
+  methods: {
+    dropmenuChange (id, show) {
+      if (show) {
+        const chart = this.$refs['chart' + id][0]
+        const container = this.$refs.listContainer
+        const heightDifference = container.offsetHeight - chart.offsetTop
+        if (heightDifference < 235) {
+          this.extraMarginBottom = 235 - heightDifference
           this.$nextTick(() => {
-            this.dataList.forEach((item,index) => {
-              this.$set(item, "from", params.from);
-              this.setChartSize(item, index);//设置该图表宽度
-              let chartBox = document.getElementById('chart-' + item.id);
-              this.handleElementInViewport(chartBox, 0, item, index);
-            });
-          });
-          return;
+            container.scrollTop = container.offsetHeight
+          })
         }
-        //endpoint单独处理
-        if (param.from == this.$CONSTANTS.fromRoute.endpoint) {
-          this.dataList = [];
-          // this.dataList.push({
-          //   id: -8,
-          //   panelId: 0,
-          //   title: this.$t("alert.alertList"),
-          //   span: 8,
-          //   height: 700,
-          //   type: "alertList",
-          //   prev: -9,
-          //   next: -1,
-          //   buildIn: 1,
-          //   draggable: false,
-          //   resizable: false,
-          //   editable: false,
-          // });
-          this.dataList.push({
-            id: -10,
-            panelId: 0,
-            dataId: this.additionalInfo.id,
-            title: this.$t("project.chart.endpointInfo"),
-            span: 6,
-            height: 350,
-            type: "endpointInfo",
-            prev: 0,
-            next: -9,
-            buildIn: 1,
-            elements: [{
-              expression: `up{endpoint="${this.additionalInfo.id}"}`
-            }],
-            draggable: false,
-            resizable: false,
-            editable: false,
-          });
-          this.dataList.push({
-            id: -9,
-            panelId: 0,
-            title: this.$t("asset.assetInfo"),
-            span: 6,
-            height: 350,
-            type: "assetInfo",
-            prev: -10,
-            next: -8,
-            buildIn: 1,
-            draggable: false,
-            resizable: false,
-            editable: false,
-          });
-          this.$nextTick(() => {
-            this.dataList.forEach((item,index) => {
-              this.$set(item, "from", params.from);
-              this.setChartSize(item, index);//设置该图表宽度
-              let chartBox = document.getElementById('chart-' + item.id);
-              this.handleElementInViewport(chartBox, 0, item, index);
-            });
-          });
-          return;
-        }
-        if (!param.query) delete param.query;
-        //根据panelId获得panel下的所有图表
-        this.$get('panel/'+ params.panelId+'/charts').then(response => {
-          if (response.code === 200) {
-            response.data.list.forEach((item,index)=>{
-              item.isLoaded = false;
-            });
+      } else {
+        this.extraMarginBottom = 0
+      }
+    },
+    tempDomInit () {
+      const span = document.querySelector('.temp-dom')
+      this.tempDom.width = span.offsetWidth
+    },
+    start (event) {
+      // console.log('start', event, this.dataList);
+      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
+      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
+      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+        projectAndAssetFeatureInfos.forEach(item => {
+          item.classList.remove('unfold')
+          item.classList.remove('fold')
+        })
+      }
+      this.dataListDragTmp = [...this.dataList]
+    },
+    end (event) {
+      if (event.oldIndex !== event.newIndex) {
+        const newWeights = []
+        this.dataList.forEach((item, index) => {
+          item.weight = index
+          newWeights.push({ id: item.id, weight: index })
+        })
+        this.$put('panel/' + this.pagePanelId + '/charts/weights', newWeights)
+      }
+    },
+    move (event, orgin) {
+      const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
 
-            if(response.data.list){
-              this.dataTotalListBak =  response.data.list;
-            }else {
-              this.dataTotalListBak = response.data;
-            }
+      const chartTitle = dragClass.querySelector('.chartTitle')
+      chartTitle.style.background = '#d8dce1'
+    },
+    clone (event) {
+      // console.log('clone',event );
+      const canvas = event.item.querySelector('canvas')
+      // console.log('clone-canvas',canvas);
+      const canvasclone = event.clone.querySelector('canvas')
+      canvasclone.style.border = 'solid 1px yellow'
+      // console.log('clone-canvasclone',canvasclone);
+      if (canvas && canvasclone) {
+        const image = new Image()
+        image.src = canvas.toDataURL()
+        // console.log('clone-image',image);
+        const ctxClone = canvasclone.getContext('2d')
+        // ctxClone.drawImage(image,0,0);
+        image.onload = function () {
+          ctxClone.drawImage(image, 0, 0)
+        }
+      }
+    },
+    dragPosition (e) {
+      const odiv = e// 目标元素e.target
+      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+      // 得到点击时该容器的：
+      /* const startY = e.clientY
+      const startX = e.clientX
+      const _this = this */
+      // 鼠标相对元素的位置
+      const distY = e.clientY - odiv.offsetLeft
+      const distX = e.clientX - odiv.offsetTop
+      document.onmousemove = function (e) {
+        e.preventDefault()
+        const left = e.clientX - distX
+        const top = e.clientY - distY
+        odiv.style.top = top + 'px'
+        odiv.style.left = left + 'px'
+      }
 
-            let chartListTmp = [];
-            //查询条件带name
-            if(this.filter.searchName&&this.filter.searchName!=''){
-              let searchTitleStr = this.filter.searchName;
-              this.dataTotalListBak.forEach((item)=>{
-                if(item.title.indexOf(searchTitleStr)>-1){
-                  chartListTmp.push(item);
-                }
-              });
-            } else {
-              chartListTmp = this.dataTotalListBak;
-            }
-            this.dataTotalList = [...chartListTmp];
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    },
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      this.dragging = null
+    },
+    // 首先把div变成可以放置的元素，即重写dragenter/dragover
+    handleDragOver (e) {
+      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+    },
+    handleDragEnter (e, item) {
+      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
+      if (item === this.dragging) {
+        return
+      }
+      const newItems = [...this.dataList]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
 
-            this.dataList = [...this.dataTotalList];
-            //this.showShadow=false;
-            this.$nextTick(() => {
-              if (this.dataList.length > 0 ) {
-                this.dataList.forEach((item,index) => {
-                  this.setChartSize(item, index);//设置该图表宽度
-                  this.$set(item, "from", params.from);
-                  if (param.from == this.$CONSTANTS.fromRoute.asset) {
-                    if (item.type == "assetInfo") {
-                      this.$set(item, "draggable", true);
-                      this.$set(item, "resizable", true);
-                    }
-                  } else if (param.from == this.$CONSTANTS.fromRoute.project) {
-                    if (item.type == "projectInfo") {
-                      this.$set(item, "draggable", true);
-                      this.$set(item, "resizable", true);
-                    }
-                  } else if (!param.from) {
-                    this.$set(item, "draggable", true);
-                    this.$set(item, "resizable", true);
-                    this.$set(item, "editable", true);
-                  }
-                  if(!item.isLoaded){
-                    //获得当前显示在浏览器的图表，从后台获取数据
-                    let chartBox = document.getElementById('chart-' + item.id);
-                    this.handleElementInViewport(chartBox, 0, item, index);
-                  }
-                });
-              }
-            });
-          }
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
 
-        });
-      },
-      loadChartData(scrollTop){
-        if (this.dataList.length > 0 ) {
-          this.dataList.forEach((item,index) => {
-            if(!item.isLoaded){
-              //获得当前显示在浏览器的图表，从后台获取数据
-              let chartBox = document.getElementById('chart-' + item.id);//this.$refs['editChart'+item.id][0];
-              this.handleElementInViewport(chartBox,scrollTop,item,index);
-            }
-          });
-        }
-      },
-      // arr: 该panel下图表list,生成该看板下所有图表
-      dataSetFirst(arr,oldDataListLen,isSearch) {
-        if (arr.length) {
-          arr.forEach((item, index) => {
-            let realIndex = index;
-            if(oldDataListLen){
-              realIndex += oldDataListLen;
-            }
-            let chartType = item.type;
-            if(chartType!=='url'){
-              if(isSearch){
-                this.getChartDataForSearch(item,realIndex);
-              }else {
-                this.getChartData(item, realIndex);
-              }
-            }else {
-              if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
-
-                this.$refs['editChart'+item.id][0].showLoad(item);
-              }
-              this.setChartSize(item, realIndex); // 设置该图表宽度
-            }
-          });
-        }
-      },
-      getChartDataForSearch(chartItem,realIndex){
-        let chartData = this.chartDataCacheGroup.get(chartItem.id);
-        if(chartData){
-          let filterType = chartData.filterType;
-          let errorMsg = chartData.errorMsg;
-          let tableData = chartData.tableData;
-          let panelId = chartData.panelId;
-          let filter = chartData.filter;
-          let legend = chartData.legend;
-          let series = chartData.series;
-          let singleStatRlt = chartData.singleStatRlt;
-          if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
-            if (chartItem.type === 'table') {//表格
-              if (filterType === 'showFullScreen') {//全屏查询
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
-                  panelId, filter, filterType,errorMsg);
-              } else {
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
-                  panelId, filter,'',errorMsg);
-              }
-            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type ==='pie') {
-              if (filterType === 'showFullScreen') {//全屏查询
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
-                  panelId, filter, legend, filterType,errorMsg);
-              } else {
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
-                  panelId, filter, legend,'',errorMsg);
-              }
-            }else if(chartItem.type ==='singleStat'){
-              if (filterType === 'showFullScreen') {//全屏查询
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
-                  this.filter.panelId, this.filter, filterType,errorMsg);
-              } else {
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
-                  this.filter.panelId, this.filter,'',errorMsg);
-              }
-            }else if(chartItem.type == 'text'){
-              if (filterType === 'showFullScreen') {//全屏查询
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, null,
-                  panelId, filter, null, filterType);
-              } else {
-                this.$refs['editChart'+chartItem.id][0].setData(chartItem, null,
-                  panelId, filter, null,'');
-              }
-            }
-          }
-        }else {
-          this.getChartData(chartItem, realIndex);
-        }
-        chartData = null;
-      },
-      // 获取一个图表具体数据,图表信息，图表位置index
-      getChartData(chartInfo, pos, filterType) {
-        const chartItem = chartInfo;
-        const index = pos; // 指标
-        if(chartItem.type === 'assetInfo'){
-          if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
-            this.$set(chartItem, "draggable", true);
-            this.$set(chartItem, "resizable", true);
-          }
-          this.getAssetInfoChartData(chartItem);
-          return;
-        }
-        if(chartItem.type === 'endpointInfo'){
-          this.getEndpointInfoChartData(chartItem);
-          return;
-        }
-        if(chartItem.type == 'projectInfo'){
-          chartItem.title = this.$t("project.chart.projectInfo");
-          this.getProjectInfoChartData(chartItem);
-          return;
-        }
-        if(chartItem.type === 'alertList'){
-          this.getAlertListChartData(chartItem,filterType);
-          return;
-        }
-        if(chartItem.type === 'alertRuleInfo'){
-          this.getAlertRuleChartData(chartItem);
-          return;
-        }
-
-        if(chartItem.type == 'text'){
-          if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-              if (filterType === 'showFullScreen') {//全屏查询
-                this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                  this.filter.panelId, null, filterType);
-              } else {
-                this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
-                  this.filter.panelId, null, '');
-              }
-            }
-          return;
-        }
-
-        if (this.isModel) {
-          this.modelStaticData(chartInfo, filterType);
-        } else {
-          // 没有数据的设置提示信息暂无数据-针对每一个图
-          const len = chartItem.elements.length;
-          if (len === 0) {
-            this.$nextTick(() => {
-              if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
-              }
-            });
+      this.dataList = newItems
+    },
+    initCurrentRecordNum () {
+      this.currentRecordNum = 0
+    },
+    cleanData () {
+      this.dataList = []
+      this.chartDataCacheGroup.clear()
+    },
+    initData (filter) {
+      this.cleanData()
+      // 内含 panelId,开始时间,结束时间
+      this.filter = filter
+      this.pagePanelId = this.filter.panelId
+      this.getData(this.filter)
+    },
+    searchCharts (searchName) {
+      // this.dataList = [];
+      // this.dataTotalList = [];
+      const chartListTmp = []
+      if (searchName && searchName.trim() !== '') {
+        this.dataTotalListBak.forEach((item) => {
+          if (item.title.indexOf(searchName) > -1) {
+            item.isLoaded = false
+            item.isHide = false
+            chartListTmp.push(item)
           } else {
-            let startTime = '';
-            let endTime = '';
-            if (filterType === 'refresh') {//刷新
-              const now = new Date(bus.computeTimezone(new Date().getTime()));
-              const origin = new Date(this.filter.end_time);
-              const numInterval = now.getTime() - origin.getTime();
-              if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
-                startTime = this.getNewTime(this.filter.start_time, numInterval);
-                endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-              } else {
-                startTime = this.filter.start_time;
-                endTime = this.filter.end_time;
-              }
-            } else if (filterType === 'showFullScreen') {//全屏时间查询
-              startTime = this.filter.start_time;
-              endTime = this.filter.end_time;
-              //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-            } else {
-              startTime = this.filter.start_time;
-              endTime = this.filter.end_time;
-            }
+            item.isLoaded = true
+            item.isHide = true
+            chartListTmp.push(item)
+          }
+        })
+      } else {
+        this.dataTotalListBak.forEach((item) => {
+          item.isLoaded = false
+          item.isHide = false
+          chartListTmp.push(item)
+        })
+      }
 
-            let step = bus.getStep(startTime, endTime);
+      this.dataTotalList = [...chartListTmp]
+      this.dataList = [...this.dataTotalList]
+
+      this.$nextTick(() => {
+        if (this.dataList.length > 0) {
+          this.dataList.forEach((item, index) => {
+            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
+            this.setChartSize(item.span, index)// 设置该图表宽度
+            if (!item.isLoaded) {
+              // 获得当前显示在浏览器的图表，从后台获取数据
+              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+              this.handleElementInViewport(chartBox, 0, item, index, true)
+            }
+          })
+        }
+      })
+    },
+    pageDataList (isAdd, panelId, isSearch) {
+      if (panelId !== this.pagePanelId) {
+        this.currentRecordNum = 0
+      }
+      if (this.dataTotalList && this.dataTotalList.length > 0) {
+        if (this.currentRecordNum >= this.dataTotalList.length) {
+          // alert('数据加载完毕！');
+        } else {
+          const dataTmpList = []
+          let spanSum = 0
+          let line = 0// 行数
+          let isDataFull = false
+          const curRecNum = this.currentRecordNum
+          const len = this.dataTotalList.length
+          for (let i = curRecNum; !isDataFull && i < len; i++) {
+            if (line < this.lineNum) {
+              const item = this.dataTotalList[i]
+              const span = item.span
+              const sumTmp = spanSum + span
+              if (sumTmp <= 12) {
+                spanSum = sumTmp
+              } else { // 大于12表示够1行了，
+                line = line + 1
+                spanSum = span
+              }
+              if (line < this.lineNum) {
+                dataTmpList.push(item)
+                this.currentRecordNum = i + 1
+              } else {
+                this.currentRecordNum = i
+                break
+              }
+            } else { // 数据加载够了
+              isDataFull = true
+              this.currentRecordNum = i
+              break
+            }
+          }
+          if (isAdd) {
+            const oldDataListLen = this.dataList.length
+            const dataListTmp = [...this.dataList]
+            this.dataList = [...dataListTmp.concat(dataTmpList)]
             this.$nextTick(() => {
-              const axiosArr = chartItem.elements.map((ele) => {
-                const filterItem = ele;
-                let query = encodeURIComponent(filterItem.expression);
-                if((chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea'||chartInfo.type==='table')&&chartInfo.param){//如果是这三个 默认给connected
-                  chartInfo.param.nullType=chartInfo.param.nullType||'connected';
-                  query+='&nullType='+chartInfo.param.nullType;
+              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
+            })
+          } else {
+            this.dataList = [...dataTmpList]
+          }
+        }
+      }
+    },
+
+    // 获取panel详情数据,获取panel下所有chart列表
+    getData (params) {
+      const param = {
+        panelId: params.panelId,
+        query: params.query,
+        from: params.from
+      }
+      // alert-rule单独处理
+      if (param.from == this.$CONSTANTS.fromRoute.rule) {
+        this.dataList = []
+        this.dataList.push({
+          id: -10,
+          panelId: 0,
+          title: this.$t('alert.config.chart.affectEntity'),
+          span: 4,
+          height: 350,
+          type: 'alertRuleInfo',
+          prev: 0,
+          next: -9,
+          buildIn: 1,
+          draggable: false,
+          resizable: false,
+          editable: false
+        })
+        this.dataList.push({
+          id: -9,
+          panelId: 0,
+          title: this.$t('alert.config.chart.alertNumTrend'),
+          span: 8,
+          height: 350,
+          type: 'line',
+          prev: -10,
+          next: -1,
+          unit: 1,
+          buildIn: 1,
+          elements: [{
+            id: '',
+            expression: `nz_alert_nums{id="${this.detail.id}"}`,
+            type: ''
+          }]
+        })
+        this.$set(this.filter, 'start_time', bus.timeFormate(new Date().getTime() - 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss'))
+        this.$set(this.filter, 'end_time', bus.timeFormate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss'))
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+          })
+        })
+        return
+      }
+      // endpoint单独处理
+      if (param.from == this.$CONSTANTS.fromRoute.endpoint) {
+        this.dataList = []
+        // this.dataList.push({
+        //   id: -8,
+        //   panelId: 0,
+        //   title: this.$t("alert.alertList"),
+        //   span: 8,
+        //   height: 700,
+        //   type: "alertList",
+        //   prev: -9,
+        //   next: -1,
+        //   buildIn: 1,
+        //   draggable: false,
+        //   resizable: false,
+        //   editable: false,
+        // });
+        this.dataList.push({
+          id: -10,
+          panelId: 0,
+          dataId: this.additionalInfo.id,
+          title: this.$t('project.chart.endpointInfo'),
+          span: 6,
+          height: 350,
+          type: 'endpointInfo',
+          prev: 0,
+          next: -9,
+          buildIn: 1,
+          elements: [{
+            expression: `up{endpoint="${this.additionalInfo.id}"}`
+          }],
+          draggable: false,
+          resizable: false,
+          editable: false
+        })
+        this.dataList.push({
+          id: -9,
+          panelId: 0,
+          title: this.$t('asset.assetInfo'),
+          span: 6,
+          height: 350,
+          type: 'assetInfo',
+          prev: -10,
+          next: -8,
+          buildIn: 1,
+          draggable: false,
+          resizable: false,
+          editable: false
+        })
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+          })
+        })
+        return
+      }
+      if (!param.query) delete param.query
+      // 根据panelId获得panel下的所有图表
+      this.$get('panel/' + params.panelId + '/charts').then(response => {
+        if (response.code === 200) {
+          response.data.list.forEach((item, index) => {
+            item.isLoaded = false
+          })
+
+          if (response.data.list) {
+            this.dataTotalListBak = response.data.list
+          } else {
+            this.dataTotalListBak = response.data
+          }
+
+          let chartListTmp = []
+          // 查询条件带name
+          if (this.filter.searchName && this.filter.searchName != '') {
+            const searchTitleStr = this.filter.searchName
+            this.dataTotalListBak.forEach((item) => {
+              if (item.title.indexOf(searchTitleStr) > -1) {
+                chartListTmp.push(item)
+              }
+            })
+          } else {
+            chartListTmp = this.dataTotalListBak
+          }
+          this.dataTotalList = [...chartListTmp]
+
+          this.dataList = [...this.dataTotalList]
+          // this.showShadow=false;
+          this.$nextTick(() => {
+            if (this.dataList.length > 0) {
+              this.dataList.forEach((item, index) => {
+                this.setChartSize(item, index)// 设置该图表宽度
+                this.$set(item, 'from', params.from)
+                if (param.from == this.$CONSTANTS.fromRoute.asset) {
+                  if (item.type == 'assetInfo') {
+                    this.$set(item, 'draggable', true)
+                    this.$set(item, 'resizable', true)
+                  }
+                } else if (param.from == this.$CONSTANTS.fromRoute.project) {
+                  if (item.type == 'projectInfo') {
+                    this.$set(item, 'draggable', true)
+                    this.$set(item, 'resizable', true)
+                  }
+                } else if (!param.from) {
+                  this.$set(item, 'draggable', true)
+                  this.$set(item, 'resizable', true)
+                  this.$set(item, 'editable', true)
                 }
-                // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
-                //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-                // }
-                return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-              });
-              // 一个图表的所有element单独获取数据
-              axios.all(axiosArr).then((res) => {
-                if (res.length > 0) {
-                  let series = [];
-                  let singleStatRlt = '';
-                  let legend = [];
-                  let tableData = [];
-                  /*let sumData = {
+                if (!item.isLoaded) {
+                  // 获得当前显示在浏览器的图表，从后台获取数据
+                  const chartBox = document.getElementById('chart-' + item.id)
+                  this.handleElementInViewport(chartBox, 0, item, index)
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    loadChartData (scrollTop) {
+      if (this.dataList.length > 0) {
+        this.dataList.forEach((item, index) => {
+          if (!item.isLoaded) {
+            // 获得当前显示在浏览器的图表，从后台获取数据
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, scrollTop, item, index)
+          }
+        })
+      }
+    },
+    // arr: 该panel下图表list,生成该看板下所有图表
+    dataSetFirst (arr, oldDataListLen, isSearch) {
+      if (arr.length) {
+        arr.forEach((item, index) => {
+          let realIndex = index
+          if (oldDataListLen) {
+            realIndex += oldDataListLen
+          }
+          const chartType = item.type
+          if (chartType !== 'url') {
+            if (isSearch) {
+              this.getChartDataForSearch(item, realIndex)
+            } else {
+              this.getChartData(item, realIndex)
+            }
+          } else {
+            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
+              this.$refs['editChart' + item.id][0].showLoad(item)
+            }
+            this.setChartSize(item, realIndex) // 设置该图表宽度
+          }
+        })
+      }
+    },
+    getChartDataForSearch (chartItem, realIndex) {
+      let chartData = this.chartDataCacheGroup.get(chartItem.id)
+      if (chartData) {
+        const filterType = chartData.filterType
+        const errorMsg = chartData.errorMsg
+        const tableData = chartData.tableData
+        const panelId = chartData.panelId
+        const filter = chartData.filter
+        const legend = chartData.legend
+        const series = chartData.series
+        const singleStatRlt = chartData.singleStatRlt
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (chartItem.type === 'table') { // 表格
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, '', errorMsg)
+            }
+          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, '', errorMsg)
+            }
+          } else if (chartItem.type === 'singleStat') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, '', errorMsg)
+            }
+          } else if (chartItem.type == 'text') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          }
+        }
+      } else {
+        this.getChartData(chartItem, realIndex)
+      }
+      chartData = null
+    },
+    // 获取一个图表具体数据,图表信息，图表位置index
+    getChartData (chartInfo, pos, filterType) {
+      const chartItem = chartInfo
+      if (chartItem.type === 'assetInfo') {
+        if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
+          this.$set(chartItem, 'draggable', true)
+          this.$set(chartItem, 'resizable', true)
+        }
+        this.getAssetInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'endpointInfo') {
+        this.getEndpointInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type == 'projectInfo') {
+        chartItem.title = this.$t('project.chart.projectInfo')
+        this.getProjectInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'alertList') {
+        this.getAlertListChartData(chartItem, filterType)
+        return
+      }
+      if (chartItem.type === 'alertRuleInfo') {
+        this.getAlertRuleChartData(chartItem)
+        return
+      }
+
+      if (chartItem.type == 'text') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+
+      if (this.isModel) {
+        this.modelStaticData(chartInfo, filterType)
+      } else {
+        // 没有数据的设置提示信息暂无数据-针对每一个图
+        const len = chartItem.elements.length
+        if (len === 0) {
+          this.$nextTick(() => {
+            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
+            }
+          })
+        } else {
+          let startTime = ''
+          let endTime = ''
+          if (filterType === 'refresh') { // 刷新
+            const now = new Date(bus.computeTimezone(new Date().getTime()))
+            const origin = new Date(this.filter.end_time)
+            const numInterval = now.getTime() - origin.getTime()
+            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+              startTime = this.getNewTime(this.filter.start_time, numInterval)
+              endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+            } else {
+              startTime = this.filter.start_time
+              endTime = this.filter.end_time
+            }
+          } else if (filterType === 'showFullScreen') { // 全屏时间查询
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+          } else {
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+          }
+
+          const step = bus.getStep(startTime, endTime)
+          this.$nextTick(() => {
+            const axiosArr = chartItem.elements.map((ele) => {
+              const filterItem = ele
+              let query = encodeURIComponent(filterItem.expression)
+              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给connected
+                chartInfo.param.nullType = chartInfo.param.nullType || 'connected'
+                query += '&nullType=' + chartInfo.param.nullType
+              }
+              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              // }
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            // 一个图表的所有element单独获取数据
+            axios.all(axiosArr).then((res) => {
+              if (res.length > 0) {
+                const series = []
+                let singleStatRlt = ''
+                const legend = []
+                const tableData = []
+                /* let sumData = {
                     name: 'sum',
                     data: [],
                     visible: true,
                     threshold: null,
-                  };*/
-                  let errorMsg = "";
-                  let pieSeries;
-                  if(chartInfo.type ==='pie'){
-                    pieSeries={
-                      type: 'pie',
-                      radius: '100%',
-                      center: ['50%', '50%'],
-                      top:"20%",
-                      bottom:"20%",
-                      // roseType: 'radius',
-                      minAngle:10,
-                      itemStyle: {
-                        borderRadius: 5,
-                        borderColor: '#fff',
-                        borderWidth: 1
-                      },
+                  }; */
+                let errorMsg = ''
+                let pieSeries
+                if (chartInfo.type === 'pie') {
+                  pieSeries = {
+                    type: 'pie',
+                    radius: '100%',
+                    center: ['50%', '50%'],
+                    top: '20%',
+                    bottom: '20%',
+                    // roseType: 'radius',
+                    minAngle: 10,
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
                       label: {
                         show: false
-                      },
-                      emphasis: {
-                        label: {
-                          show: false
-                        }
-                      },
-                      data:[]
-                    }
+                      }
+                    },
+                    data: []
                   }
-                  res.forEach((response, innerPos) => {
-                    if (response.status === 'success') {
-                      errorMsg = "";
-                      if (response.data.result) {
-                        // 循环处理每个elements下获取的数据列
-                        if (chartItem.type === 'singleStat') {
-                          if (response.data.result.length === 1) {
-                            let statistics = chartItem.param.statistics;
-                            if (response.data.result[0].values) {
-                              singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
-                            }
-                          } else if (response.data.result.length > 1) {
-                            singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
+                }
+                res.forEach((response, innerPos) => {
+                  if (response.status === 'success') {
+                    errorMsg = ''
+                    if (response.data.result) {
+                      // 循环处理每个elements下获取的数据列
+                      if (chartItem.type === 'singleStat') {
+                        if (response.data.result.length === 1) {
+                          const statistics = chartItem.param.statistics
+                          if (response.data.result[0].values) {
+                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
                           }
-                        } else {
-                          response.data.result.forEach((queryItem, resIndex) => {
-                            let seriesItem = {
-                              theData: {
-                                name: '',
-                                symbol: 'emptyCircle',  //去掉点
-                                symbolSize: [2, 2],
-                                smooth: 0.2,  //曲线变平滑
-                                showSymbol: false,
-                                data: [],
-                                lineStyle: {
-                                  width: 1,
-                                  opacity: 0.9
-                                },
-                                animation: false,
-                                type: chartInfo.type,
+                        } else if (response.data.result.length > 1) {
+                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                        }
+                      } else {
+                        response.data.result.forEach((queryItem, resIndex) => {
+                          let seriesItem = {
+                            theData: {
+                              name: '',
+                              symbol: 'emptyCircle', // 去掉点
+                              symbolSize: [2, 2],
+                              smooth: 0.2, // 曲线变平滑
+                              showSymbol: false,
+                              data: [],
+                              lineStyle: {
+                                width: 1,
+                                opacity: 0.9
                               },
-                              metric_name: '',
-                            };
+                              animation: false,
+                              type: chartInfo.type
+                            },
+                            metric_name: ''
+                          }
 
-                            if (chartInfo.type === 'stackArea') {
-                              seriesItem.theData.type = 'line';
-                              seriesItem.theData.stack = chartInfo.title;
-                              seriesItem.theData.areaStyle = {"opacity": 0.3};
-                            }
-                            if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
-                              seriesItem.theData.markLine={
-                                silent: true,
-                                symbol:['circle','circle'],
-                                label:{
-                                  distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
-                                  formatter:function(params){
-                                    return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
-                                  }
-                                },
-                                lineStyle:{
-                                  color:'#d64f40',
-                                  width:2,
-                                  type:'dotted'
-                                },
-                                data: [{
-                                  yAxis: Number(chartInfo.param.threshold)
-                                }, ]
-                              }
-                            }
-                            // 图表中每条线的名字,后半部分
-                            let host = '';//up,
-                            if (queryItem.metric.__name__) {
-                              host = `${queryItem.metric.__name__}{`;//up,
-                            }
-                            const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                            // 设置时间-数据格式对
-                            let tempArr = [];
-                            let dpsArr = [];
-                            tempArr = queryItem.values;
-                            dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                            dpsArr = dpsArr.map(item => {
-                              return [item[0], [item[1][0], Number(item[1][1])]]
-                            });
-                            // 判断是否有数据, && tagsArr.length > 0
-                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                              tagsArr.forEach((tag, i) => {
-                                if (tag !== '__name__') {
-                                  host += `${tag}="${queryItem.metric[tag]}",`;
+                          if (chartInfo.type === 'stackArea') {
+                            seriesItem.theData.type = 'line'
+                            seriesItem.theData.stack = chartInfo.title
+                            seriesItem.theData.areaStyle = { opacity: 0.3 }
+                          }
+                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
+                            seriesItem.theData.markLine = {
+                              silent: true,
+                              symbol: ['circle', 'circle'],
+                              label: {
+                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
+                                formatter (params) {
+                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
                                 }
-                              });
-                              if (host.endsWith(',')) {
-                                host = host.substr(0, host.length - 1);
+                              },
+                              lineStyle: {
+                                color: '#d64f40',
+                                width: 2,
+                                type: 'dotted'
+                              },
+                              data: [{
+                                yAxis: Number(chartInfo.param.threshold)
+                              }]
+                            }
+                          }
+                          // 图表中每条线的名字,后半部分
+                          let host = ''// up,
+                          if (queryItem.metric.__name__) {
+                            host = `${queryItem.metric.__name__}{`// up,
+                          }
+                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                          // 设置时间-数据格式对
+                          let tempArr = []
+                          let dpsArr = []
+                          tempArr = queryItem.values
+                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                          dpsArr = dpsArr.map(item => {
+                            return [item[0], [item[1][0], Number(item[1][1])]]
+                          })
+                          // 判断是否有数据, && tagsArr.length > 0
+                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                            tagsArr.forEach((tag, i) => {
+                              if (tag !== '__name__') {
+                                host += `${tag}="${queryItem.metric[tag]}",`
                               }
-                              if (queryItem.metric.__name__) {
-                                host += "}";
-                              }
-                              if (!host || host === '') {
-                                host = chartItem.elements[innerPos].expression;
-                              }
-                              //处理legend别名
-                              let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                              if (!alias || alias === '') {
-                                alias = host;
-                              }
-                              legend.push({name: host+"-"+chartItem.elements[innerPos].id+"-" + resIndex, alias: alias});
-                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                            })
+                            if (host.endsWith(',')) {
+                              host = host.substr(0, host.length - 1)
+                            }
+                            if (queryItem.metric.__name__) {
+                              host += '}'
+                            }
+                            if (!host || host === '') {
+                              host = chartItem.elements[innerPos].expression
+                            }
+                            // 处理legend别名
+                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                            if (!alias || alias === '') {
+                              alias = host
+                            }
+                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
 
-                              seriesItem.theData.name = host +"-"+chartItem.elements[innerPos].id+"-"+ resIndex;
-                              //alert(seriesItem.theData.name);
-                              seriesItem.metric_name = seriesItem.theData.name;
-                              // 将秒改为毫秒
-                              //alert('table=='+JSON.stringify(queryItem))
-                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                                /*曲线汇总暂不需要
+                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                            // alert(seriesItem.theData.name);
+                            seriesItem.metric_name = seriesItem.theData.name
+                            // 将秒改为毫秒
+                            // alert('table=='+JSON.stringify(queryItem))
+                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                              /* 曲线汇总暂不需要
                                 if (sumData.data[dpsIndex]) {
                                   const sumNum = sumData.data[dpsIndex][1] || 0;
                                   sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
@@ -969,27 +959,27 @@
                                   sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
                                 }
                                 */
-                                // let t_date = new Date(dpsItem[0] * 1000);
-                                // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                                tableData.push({//表格数据
-                                  // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                  // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                  element: {element: host, alias: alias},
-                                  // time: timeTmp,//采集时间
-                                  // value: dpsItem[1],//数值
-                                  data:[dpsItem[0] * 1000, dpsItem[1]]
-                                });
-                                return [dpsItem[0] * 1000, dpsItem[1]];
-                              });
-                              if(chartInfo.type === 'pie'){
-                                pieSeries.data.push({value:bus.getSingleStatRlt(chartInfo.param.statistics,seriesItem.theData.data),name:host+"-"+chartItem.elements[innerPos].id+"-" + resIndex})
-                              }else{
-                                series.push(seriesItem.theData);
-                                seriesItem = null;
-                              }
-                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                              // 无数据提示
-                              /*
+                              // let t_date = new Date(dpsItem[0] * 1000);
+                              // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                              tableData.push({ // 表格数据
+                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                element: { element: host, alias: alias },
+                                // time: timeTmp,//采集时间
+                                // value: dpsItem[1],//数值
+                                data: [dpsItem[0] * 1000, dpsItem[1]]
+                              })
+                              return [dpsItem[0] * 1000, dpsItem[1]]
+                            })
+                            if (chartInfo.type === 'pie') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else {
+                              series.push(seriesItem.theData)
+                              seriesItem = null
+                            }
+                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                            // 无数据提示
+                            /*
                               const currentInfo = chartItem.elements[innerPos];
                               const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
                               this.$message.warning({
@@ -998,666 +988,664 @@
                                 closable: true,
                               });
                               */
-                            }
-                          });
-                        }
+                          }
+                        })
                       }
+                    }
+                  } else {
+                    if (response.msg) {
+                      // this.$message.error(response.msg);
+                      errorMsg = response.msg
+                    } else if (response.error) {
+                      // this.$message.error(response.error);
+                      errorMsg = response.error
                     } else {
-                      if (response.msg) {
-                        //this.$message.error(response.msg);
-                        errorMsg = response.msg;
-                      } else if (response.error) {
-                        //this.$message.error(response.error);
-                        errorMsg = response.error;
-                      } else {
-                        //this.$message.error(response);
-                        errorMsg = response;
-                      }
+                      // this.$message.error(response);
+                      errorMsg = response
                     }
-                  });
-
-                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                    if(chartInfo.type === 'pie'){
-                      series.push(pieSeries)
-                    }
-                    let chartData = {
-                      chartItem: chartItem,
-                      series: series,
-                      singleStatRlt: singleStatRlt,
-                      legend: legend,
-                      tableData: tableData,
-                      panelId: this.filter.panelId,
-                      filter: this.filter,
-                      filterType: filterType,
-                      errorMsg: errorMsg,
-                    }
-                    this.chartDataCacheGroup.set(chartInfo.id, chartData);
-                    if (chartItem.type === 'table') {//表格
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                          this.filter.panelId, this.filter, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
-                          this.filter.panelId, this.filter, '', errorMsg);
-                      }
-                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type == 'pie') {
-                      if (series.length && chartItem.type === 4) {//曲线汇总
-                        //series.push(sumData);//后续需要
-                      }
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                          this.filter.panelId, this.filter, legend, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
-                          this.filter.panelId, this.filter, legend, '', errorMsg);
-                      }
-                    } else if (chartItem.type === 'singleStat') {
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                          this.filter.panelId, this.filter, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
-                          this.filter.panelId, this.filter, '', errorMsg);
-                      }
-                    }
-                  }
-                } else {
-                  const type = chartItem.type;
-                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
-                    if (type === 'table') {
-                      if (filterType === 'showFullScreen') {//table的全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                          this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                          this.filter);
-                      }
-                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4||chartItem.type === 'pie') {
-                      if (filterType === 'showFullScreen') {//table的全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                          this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
-                          this.filter);
-                      }
-                    } else if (chartItem.type === 'singleStat') {
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                          this.filter.panelId, this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
-                          this.filter.panelId, this.filter);
-                      }
-                    }
-                  }
-                }
-              }).catch((error) => {
-                if (error) {
-                  this.$message.error(error.toString());
-                  console.error(error)
-                }
-              });
-            });
-          }
-        }
-      },
-      computeDistance:function(str){
-        let span = document.querySelector(".temp-dom");
-        if(span){
-          span.textContent = str;
-          let txtWidth = parseFloat(window.getComputedStyle(span).width);
-          return Number('-'+(txtWidth+5));
-        }
-      },
-      modelStaticData(chartInfo, filterType) {
-        let series = [];
-        let legend = [];
-        let tableData = [];
-        let singleStatRlt = 999;
-        if (chartInfo.type === 'singleStat') {
-          let statistics = chartInfo.param.statistics;
-        } else {
-          let seriesItem = {
-            theData: {
-              name: '',
-              symbol: 'emptyCircle',  //去掉点
-              symbolSize: [2, 2],
-              smooth: 0.2,  //曲线变平滑
-              showSymbol: false,
-              data: [],
-              lineStyle: {
-                width: 1,
-                opacity: 0.9
-              },
-              type: chartInfo.type,
-            },
-            //visible: true,
-            //threshold: null,
-            metric_name: '',
-          };
-          if (chartInfo.type === 'stackArea') {
-            seriesItem.theData.type = 'line';
-            seriesItem.theData.stack = chartInfo.title;
-            seriesItem.theData.areaStyle = {"opacity": 0.3};
-          }
-          // 图表中每条线的名字,后半部分
-          let host = 'host';//up,
-          let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
-          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-          // 设置时间-数据格式对
-          let tempArr = [];
-          let dpsArr = [];
-          let timeStamp = Math.floor(new Date().getTime() / 1000);
-          for (let i = 0; i < 20; i++) {
-            tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ""]);
-            queryItem.values.push(tempArr[i])
-            dpsArr.push([i + "", tempArr[i]]);
-          }
-          // 判断是否有数据, && tagsArr.length > 0
-          if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-            tagsArr.forEach((tag, i) => {
-              if (tag !== '__name__') {
-                host += `${tag}="${queryItem.metric[tag]}",`;
-              }
-            });
-            if (queryItem.metric.__name__) {
-              host += "}";
-            }
-            //处理legend别名
-            let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend);
-            if (!alias || alias === '') {
-              alias = host;
-            }
-            legend.push({name: host, alias: alias});
-            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-            seriesItem.theData.name = host;
-            //alert(seriesItem.theData.name);
-            seriesItem.metric_name = seriesItem.theData.name;
-            // 将秒改为毫秒
-            //alert('table=='+JSON.stringify(queryItem))
-            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-              let t_date = new Date(dpsItem[0] * 1000);
-              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-              tableData.push({//表格数据
-                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                element: {element: host, alias: alias},
-                time: timeTmp,//采集时间
-                value: dpsItem[1],//数值
-              });
-              return [dpsItem[0] * 1000, dpsItem[1]];
-            });
-            series.push(seriesItem.theData);
-          }
-        }
-        if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
-          let errorMsg = '';
-          let chartData = {
-            chartItem: chartInfo,
-            series: series,
-            singleStatRlt: singleStatRlt,
-            legend: legend,
-            tableData: tableData,
-            panelId: this.filter.panelId,
-            filter: this.filter,
-            filterType: filterType,
-            errorMsg: errorMsg
-          }
-          this.chartDataCacheGroup.set(chartInfo.id, chartData);
-          if (chartInfo.type === 'table') {//表格
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-                this.filter.panelId, this.filter, filterType, '');
-            } else {
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
-                this.filter.panelId, this.filter, '', '');
-            }
-          } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
-            if (series.length && chartInfo.type === 4) {//曲线汇总
-              //series.push(sumData);//后续需要
-            }
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-                this.filter.panelId, this.filter, legend, filterType, errorMsg);
-            } else {
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
-                this.filter.panelId, this.filter, legend, '', errorMsg);
-            }
-          } else if (chartInfo.type === 'singleStat') {
-            if (filterType === 'showFullScreen') {//全屏查询
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-                this.filter.panelId, this.filter, filterType, errorMsg);
-            } else {
-              this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
-                this.filter.panelId, this.filter, '', errorMsg);
-            }
-          }
-        }
-      },
-      getEndpointInfoChartData(chartInfo) {
-        let detail = [];
-        this.$refs['editChart'+chartInfo.id][0].showLoad();
-        chartInfo.title = this.$t("project.chart.endpointInfo");
-
-        let basicInfo = JSON.parse(JSON.stringify(this.detail));
-        let basicInfoReq = new Promise((resolve, reject) => {
-          let now = new Date();
-          let startTime = bus.timeFormate(new Date(now).setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-          let step = bus.getStep(startTime, endTime);
-          this.$nextTick(() => {
-            let query = chartInfo.elements[0].expression;
-            if((chartInfo.type==='line'||chartInfo.type==='bar'||chartInfo.type==='stackArea')&&chartInfo.param){
-              chartInfo.param.nullType=chartInfo.param.nullType||'connected';
-              query+='&nullType='+chartInfo.param.nullType;
-            }
-            this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
-              if (response.status === 'success') {
-                if (response.data.result) {
-                  let series = {
-                    name: '',
-                    symbol: 'emptyCircle',  //去掉点
-                    symbolSize: 4,
-                    smooth: 0.2,  //曲线变平滑
-                    showSymbol: false,
-                    data: [],
-                    type: "line",
-                    lineStyle: {
-                      width: 1,
-                      opacity: 0.9
-                    },
-                    itemStyle: {
-                      color: function(params) {
-                        if (params.data[1] == "1") {
-                          return "#50d050";
-                        } else {
-                          return "#d64f40";
-                        }
-                      }
-                    }
-                  };
-                  response.data.result.forEach((queryItem, resInnerPos) => {
-                    // 将秒改为毫秒
-                    series.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                      return [dpsItem[0] * 1000, dpsItem[1]];
-                    });
-                  });
-                  basicInfo.stateSeries = [series];
-                  basicInfo.state = "";
-                  resolve({title: this.$t("project.chart.basicTitle"), data: basicInfo, type: "endpointInfo"});
-                }
-              }
-            });
-          });
-        });
-
-        let endpointId = this.additionalInfo.id;
-        let alertMsg = new Promise((resolve, reject) => {
-          this.$get('/alert/message?endpointId=' + endpointId+"&state=1&pageSize=-1").then(response => {
-            if (response.code == 200) {
-              let alerts = {};
-              if(response.data){
-                response.data.list.forEach(t=>{
-                  let alertRule = t.alertRule.alertName;
-                  if(alerts[alertRule]){
-                    alerts[alertRule]++
-                  }else{
-                    alerts[alertRule]=1
                   }
                 })
-              }
-              resolve({title: this.$t("overall.alert"), data: alerts});
-            }
-          });
-        });
-        Promise.all([basicInfoReq, alertMsg]).then(resolves => {
-          resolves.forEach(t=>detail.push(t))
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
-        });
-      },
-      getAssetInfoChartData(chartInfo){
-        let vm = this;
-        chartInfo.title = this.$t("asset.assetInfo");
-        let detail = [];
-        if(!this.isModel){
-          this.$refs['editChart'+chartInfo.id][0].showLoad();
-          let assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id;
-          this.$get('/asset/info?id=' + assetId).then(response=>{
-            if(response.code == 200){
-              response.data && function() {
-                response.data.Basic && detail.push({
-                  title: vm.$t('project.chart.basicTitle'),
-                  type: 'basic',
-                  data: response.data.Basic
-                });
-                response.data.Attribute && detail.push({
-                  title: vm.$t('asset.featureTitle'),
-                  type: 'attribute',
-                  data: response.data.Attribute
-                });
-              }();
-            }
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
-          });
-        }else {
-          detail.push({
-            title: vm.$t('project.chart.basicTitle'),
-            type: 'basic',
-            data: {
-              sn: 'assetInfo Test',
-              host: '192.168.40.42',
-              pingStatus: 1,
-              pingRtt: 80,
-              cpuNum: '8',
-              memery: '12GB',
-              memery$_$free: '3GB'
-            }
-          });
-          detail.push({
-            title: vm.$t('asset.featureTitle'),
-            type: 'feature',
-            data: {
-              CPU: "Intel E500",
-              Memory: "256GB",
-              NetworkInterface: ["eth0", "eth1"],
-              Disk: [{
-                mount: "/",
-                total: "256GB",
-                free: "128GB",
-                usageRate: "50%"
-              }]
-            }
-          });
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
-        }
-      },
-      getProjectInfoChartData(chartInfo){
-        let vm = this;
-        let detail = [];
-        if(!this.isModel){
-          this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
-          this.$get('/project/info?id='+this.additionalInfo.id).then(response=>{
-            if(response.code == 200){
-              response.data && function() {
-                response.data.basic && detail.push({
-                  title: vm.$t('project.chart.basicTitle'),
-                  data: response.data.basic,
-                  type: "project"
-                });
-                response.data.module && function() {
-                  response.data.module.forEach(d => {
-                    detail.push({
-                      title: `${vm.$t('project.module.module')}：${d.name}`,
-                      data: d,
-                      type: "module"
-                    });
-                  });
-                }();
-              }();
-            }
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg);
-          })
-        }else {
-          detail.push({
-            title: "system",
-            data: {
-              id: 1,
-              name: "system",
-              remark: "描述信息",
-              alertStat: [1,2,3],
-            }
-          });
-          detail.push({
-            title: `${this.$t("project.module.module")}：kafka`,
-            data: {
-              id: 1,
-              name: "kafka",
-              type: "http",
-              remark: "描述信息",
-              endpointStat: [3,23],
-              alertStat: [2,3,4],
-            }
-          });
-          detail.push({
-            title: `${this.$t("project.module.module")}：kafkakafkakafkakafkakafkakafkakafka`,
-            data: {
-              id: 2,
-              name: "kafkakafkakafkakafkakafkakafkakafka",
-              type: "http",
-              remark: "描述信息",
-              endpointStat: [3,23],
-              alertStat: [2,0,4],
-            }
-          });
-          detail.push({
-            title: `${this.$t("project.module.module")}：kafkakafka`,
-            data: {
-              id: 3,
-              name: "kafkakafka",
-              type: "snmp",
-              remark: "描述信息",
-              endpointStat: [3,0],
-              alertStat: [2,3,4],
-            }
-          });
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
-        }
-      },
-      getAlertListChartData:function(chartInfo,filterType){
-        if(this.additionalInfo){
-          this.$set(chartInfo, "param", {endpointId: this.additionalInfo.id});
-        }
-        this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
-      },
-      getAlertRuleChartData(chartInfo) {
-        let vm = this;
-        let detail = [];
-        let req = new Promise((resolve, reject) => {
-          this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
-            if (response.code == 200) {
-              response.data && function () {
-                if (response.data.project && response.data.project.length > 0) {
-                  detail.push({title: vm.$t("overall.entity"), data: convert(response.data.project)});
+
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (chartInfo.type === 'pie') {
+                    series.push(pieSeries)
+                  }
+                  const chartData = {
+                    chartItem: chartItem,
+                    series: series,
+                    singleStatRlt: singleStatRlt,
+                    legend: legend,
+                    tableData: tableData,
+                    panelId: this.filter.panelId,
+                    filter: this.filter,
+                    filterType: filterType,
+                    errorMsg: errorMsg
+                  }
+                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
+                  if (chartItem.type === 'table') { // 表格
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
+                    if (series.length && chartItem.type === 4) { // 曲线汇总
+                      // series.push(sumData);//后续需要
+                    }
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  }
                 }
-                /*if (response.data.module && response.data.module.length > 0) {
+              } else {
+                const type = chartItem.type
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (type === 'table') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  }
+                }
+              }
+            }).catch((error) => {
+              if (error) {
+                this.$message.error(error.toString())
+                console.error(error)
+              }
+            })
+          })
+        }
+      }
+    },
+    computeDistance (str) {
+      const span = document.querySelector('.temp-dom')
+      if (span) {
+        span.textContent = str
+        const txtWidth = parseFloat(window.getComputedStyle(span).width)
+        return Number('-' + (txtWidth + 5))
+      }
+    },
+    modelStaticData (chartInfo, filterType) {
+      const series = []
+      const legend = []
+      const tableData = []
+      const singleStatRlt = 999
+      if (chartInfo.type === 'singleStat') {
+        // const statistics = chartInfo.param.statistics
+      } else {
+        const seriesItem = {
+          theData: {
+            name: '',
+            symbol: 'emptyCircle', // 去掉点
+            symbolSize: [2, 2],
+            smooth: 0.2, // 曲线变平滑
+            showSymbol: false,
+            data: [],
+            lineStyle: {
+              width: 1,
+              opacity: 0.9
+            },
+            type: chartInfo.type
+          },
+          // visible: true,
+          // threshold: null,
+          metric_name: ''
+        }
+        if (chartInfo.type === 'stackArea') {
+          seriesItem.theData.type = 'line'
+          seriesItem.theData.stack = chartInfo.title
+          seriesItem.theData.areaStyle = { opacity: 0.3 }
+        }
+        // 图表中每条线的名字,后半部分
+        let host = 'host'// up,
+        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
+        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+        // 设置时间-数据格式对
+        const tempArr = []
+        const dpsArr = []
+        const timeStamp = Math.floor(new Date().getTime() / 1000)
+        for (let i = 0; i < 20; i++) {
+          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
+          queryItem.values.push(tempArr[i])
+          dpsArr.push([i + '', tempArr[i]])
+        }
+        // 判断是否有数据, && tagsArr.length > 0
+        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+          tagsArr.forEach((tag, i) => {
+            if (tag !== '__name__') {
+              host += `${tag}="${queryItem.metric[tag]}",`
+            }
+          })
+          if (queryItem.metric.__name__) {
+            host += '}'
+          }
+          // 处理legend别名
+          let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend)
+          if (!alias || alias === '') {
+            alias = host
+          }
+          legend.push({ name: host, alias: alias })
+          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+          seriesItem.theData.name = host
+          // alert(seriesItem.theData.name);
+          seriesItem.metric_name = seriesItem.theData.name
+          // 将秒改为毫秒
+          // alert('table=='+JSON.stringify(queryItem))
+          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+            const tData = new Date(dpsItem[0] * 1000)
+            const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+            tableData.push({ // 表格数据
+              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+              element: { element: host, alias: alias },
+              time: timeTmp, // 采集时间
+              value: dpsItem[1]// 数值
+            })
+            return [dpsItem[0] * 1000, dpsItem[1]]
+          })
+          series.push(seriesItem.theData)
+        }
+      }
+      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+        const errorMsg = ''
+        const chartData = {
+          chartItem: chartInfo,
+          series: series,
+          singleStatRlt: singleStatRlt,
+          legend: legend,
+          tableData: tableData,
+          panelId: this.filter.panelId,
+          filter: this.filter,
+          filterType: filterType,
+          errorMsg: errorMsg
+        }
+        this.chartDataCacheGroup.set(chartInfo.id, chartData)
+        if (chartInfo.type === 'table') { // 表格
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, filterType, '')
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, '', '')
+          }
+        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+          if (series.length && chartInfo.type === 4) { // 曲线汇总
+            // series.push(sumData);//后续需要
+          }
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'singleStat') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        }
+      }
+    },
+    getEndpointInfoChartData (chartInfo) {
+      const detail = []
+      this.$refs['editChart' + chartInfo.id][0].showLoad()
+      chartInfo.title = this.$t('project.chart.endpointInfo')
+
+      const basicInfo = JSON.parse(JSON.stringify(this.detail))
+      const basicInfoReq = new Promise((resolve, reject) => {
+        const now = new Date()
+        const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+        // const step = bus.getStep(startTime, endTime)
+        this.$nextTick(() => {
+          let query = chartInfo.elements[0].expression
+          if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
+            chartInfo.param.nullType = chartInfo.param.nullType || 'connected'
+            query += '&nullType=' + chartInfo.param.nullType
+          }
+          this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
+            if (response.status === 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: '',
+                  symbol: 'emptyCircle', // 去掉点
+                  symbolSize: 4,
+                  smooth: 0.2, // 曲线变平滑
+                  showSymbol: false,
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                  itemStyle: {
+                    color (params) {
+                      if (params.data[1] == '1') {
+                        return '#50d050'
+                      } else {
+                        return '#d64f40'
+                      }
+                    }
+                  }
+                }
+                response.data.result.forEach((queryItem, resInnerPos) => {
+                  // 将秒改为毫秒
+                  series.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                    return [dpsItem[0] * 1000, dpsItem[1]]
+                  })
+                })
+                basicInfo.stateSeries = [series]
+                basicInfo.state = ''
+                resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
+              }
+            }
+          })
+        })
+      })
+
+      const endpointId = this.additionalInfo.id
+      const alertMsg = new Promise((resolve, reject) => {
+        this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
+          if (response.code == 200) {
+            const alerts = {}
+            if (response.data) {
+              response.data.list.forEach(t => {
+                const alertRule = t.alertRule.alertName
+                if (alerts[alertRule]) {
+                  alerts[alertRule]++
+                } else {
+                  alerts[alertRule] = 1
+                }
+              })
+            }
+            resolve({ title: this.$t('overall.alert'), data: alerts })
+          }
+        })
+      })
+      Promise.all([basicInfoReq, alertMsg]).then(resolves => {
+        resolves.forEach(t => detail.push(t))
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+    },
+    getAssetInfoChartData (chartInfo) {
+      const vm = this
+      chartInfo.title = this.$t('asset.assetInfo')
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad()
+        const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
+        this.$get('/asset/info?id=' + assetId).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.Basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                type: 'basic',
+                data: response.data.Basic
+              })
+              response.data.Attribute && detail.push({
+                title: vm.$t('asset.featureTitle'),
+                type: 'attribute',
+                data: response.data.Attribute
+              })
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+        })
+      } else {
+        detail.push({
+          title: vm.$t('project.chart.basicTitle'),
+          type: 'basic',
+          data: {
+            sn: 'assetInfo Test',
+            host: '192.168.40.42',
+            pingStatus: 1,
+            pingRtt: 80,
+            cpuNum: '8',
+            memery: '12GB',
+            memery$_$free: '3GB'
+          }
+        })
+        detail.push({
+          title: vm.$t('asset.featureTitle'),
+          type: 'feature',
+          data: {
+            CPU: 'Intel E500',
+            Memory: '256GB',
+            NetworkInterface: ['eth0', 'eth1'],
+            Disk: [{
+              mount: '/',
+              total: '256GB',
+              free: '128GB',
+              usageRate: '50%'
+            }]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getProjectInfoChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
+        this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                data: response.data.basic,
+                type: 'project'
+              })
+              response.data.module && (function () {
+                response.data.module.forEach(d => {
+                  detail.push({
+                    title: `${vm.$t('project.module.module')}：${d.name}`,
+                    data: d,
+                    type: 'module'
+                  })
+                })
+              }())
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
+        })
+      } else {
+        detail.push({
+          title: 'system',
+          data: {
+            id: 1,
+            name: 'system',
+            remark: '描述信息',
+            alertStat: [1, 2, 3]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafka`,
+          data: {
+            id: 1,
+            name: 'kafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 3, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
+          data: {
+            id: 2,
+            name: 'kafkakafkakafkakafkakafkakafkakafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 0, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafka`,
+          data: {
+            id: 3,
+            name: 'kafkakafka',
+            type: 'snmp',
+            remark: '描述信息',
+            endpointStat: [3, 0],
+            alertStat: [2, 3, 4]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getAlertListChartData (chartInfo, filterType) {
+      if (this.additionalInfo) {
+        this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
+      }
+      this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
+    },
+    getAlertRuleChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      const req = new Promise((resolve, reject) => {
+        this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              if (response.data.project && response.data.project.length > 0) {
+                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
+              }
+              /* if (response.data.module && response.data.module.length > 0) {
                   detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
                 }
                 if (response.data.endpoint && response.data.endpoint.length > 0) {
                   detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
-                }*/
-                if (response.data.asset && response.data.asset.length > 0) {
-                  detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
-                }
-              }();
-              resolve(true);
-            }
-          });
-        });
-        req.then(result => {
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
-        }, err => {});
-
-        function convert(d) {
-          let data = {};
-          d.forEach(item => {
-            data[item.name] = item.nums;
-            !data._module_ ? (data._module_ = {}) : "";
-            if (item.module && item.module instanceof Array && item.module.length > 0) {
-              data._module_[item.name] = {};;
-              item.module.forEach(m => {
-                data._module_[item.name][m.name] = m.nums;
-                !data._module_[item.name]._endpoint_ ? (data._module_[item.name]._endpoint_ = {}) : "";
-                if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
-                  data._module_[item.name]._endpoint_[m.name] = {};
-                  m.endpoint.forEach(e => {
-                    data._module_[item.name]._endpoint_[m.name][e.name] = e.nums;
-                  })
-                }
-              })
-            }
-          });
-          return data;
-        }
-      },
-
-      // 设置图表的尺寸
-      setChartSize(item, index) {
-        this.$nextTick(() => {
-          let chartBox = document.getElementById("chart-" + item.id);
-          if(chartBox){
-            chartBox.style.width = `${(item.span / 12) * 100}%`;
-            chartBox.style.height = `${item.height}px`;
+                } */
+              if (response.data.asset && response.data.asset.length > 0) {
+                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
+              }
+            }())
+            resolve(true)
           }
-        });
-      },
-      getNewTime(time, num) {
-        const date = new Date(time);
-        const newDate = new Date(parseInt(date.getTime(), 10) + num);
-        return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
-      },
-      // 删除图表
-      removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
-        const chart = this.dataList.find(item => item.id === chartId);
-        if (chart) {
-          this.$emit('on-remove-chart', chart);
-        }
-      },
-      //复制图表
-      duplicateChart(chartId,duplicateChartBack){
-        let duplicateChartId = duplicateChartBack.id;
-        let chart;
-        let chartIndex = -1;
-        this.dataList.forEach((item,index)=>{
-          if(item.id===chartId){
-            chartIndex = index;
-            chart = item;
-          }
-        });
-        let chartNext;
-        let chartNextIndex = chartIndex+1;
-        if(chartNextIndex<=(this.dataList.length-1)){
-          chartNext = this.dataList[chartNextIndex];
-        }
+        })
+      })
+      req.then(result => {
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
 
-        if (chart) {
-          chart.next = duplicateChartId;
-          let duplicateChart = JSON.parse(JSON.stringify(chart));
-          duplicateChart.id = duplicateChartId;
-          duplicateChart.prev = duplicateChartBack.prev;
-          duplicateChart.next = duplicateChartBack.next;
-          duplicateChart.title = duplicateChartBack.title;
-          duplicateChart.elements = duplicateChartBack.elements;
-          if(chartNext){
-            chartNext.prev = duplicateChartId;
-          }
-
-          this.dataList.splice(chartNextIndex,0,duplicateChart);
-
-          let indexInTotal = this.dataTotalList.indexOf(chart);
-          this.dataTotalList.splice(indexInTotal+1,0,duplicateChart);
-          let chartInTotal = this.dataTotalList.find(item => item.id === chartId);
-          chartInTotal.next = duplicateChartId;
-          if(chartNext) {
-            let chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id);
-            chartNextInTotal.prev = chartNext.prev;
-          }
-
-          let indexInTotalBak = this.dataTotalListBak.indexOf(chart);
-          this.dataTotalListBak.splice(indexInTotalBak+1,0,duplicateChart);
-          let chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId);
-          chartInTotalBak.next = duplicateChartId;
-          if(chartNext) {
-            let chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id);
-            chartNextInTotalBak.prev = chartNext.prev;
-          }
-
-          this.currentRecordNum = this.currentRecordNum+1;
-          let chartData = this.chartDataCacheGroup.get(chart.id);
-          //console.log("__chartItem00__", chartData)
-          if (duplicateChartBack.type === "alertList") {
-            this.$nextTick(() => {
-              this.getAlertListChartData(duplicateChartBack);
-              this.setChartSize(duplicateChart, chartNextIndex); // 设置该图表宽度
+      function convert (d) {
+        const data = {}
+        d.forEach(item => {
+          data[item.name] = item.nums
+          !data._module_ && (data._module_ = {})
+          if (item.module && item.module instanceof Array && item.module.length > 0) {
+            data._module_[item.name] = {}
+            item.module.forEach(m => {
+              data._module_[item.name][m.name] = m.nums
+              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
+              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
+                data._module_[item.name]._endpoint_[m.name] = {}
+                m.endpoint.forEach(e => {
+                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
+                })
+              }
             })
-          } else {
-            let duplicateChartData ={};
-            try{
-              duplicateChartData = JSON.parse(JSON.stringify(chartData));
-            }catch (e) {
-              console.warn(e);
+          }
+        })
+        return data
+      }
+    },
+
+    // 设置图表的尺寸
+    setChartSize (item, index) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chart-' + item.id)
+        if (chartBox) {
+          chartBox.style.width = `${(item.span / 12) * 100}%`
+          chartBox.style.height = `${item.height}px`
+        }
+      })
+    },
+    getNewTime (time, num) {
+      const date = new Date(time)
+      const newDate = new Date(parseInt(date.getTime(), 10) + num)
+      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss')
+    },
+    // 删除图表
+    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-remove-chart', chart)
+      }
+    },
+    // 复制图表
+    duplicateChart (chartId, duplicateChartBack) {
+      const duplicateChartId = duplicateChartBack.id
+      let chart
+      let chartIndex = -1
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          chartIndex = index
+          chart = item
+        }
+      })
+      let chartNext
+      const chartNextIndex = chartIndex + 1
+      if (chartNextIndex <= (this.dataList.length - 1)) {
+        chartNext = this.dataList[chartNextIndex]
+      }
+
+      if (chart) {
+        chart.next = duplicateChartId
+        const duplicateChart = JSON.parse(JSON.stringify(chart))
+        duplicateChart.id = duplicateChartId
+        duplicateChart.prev = duplicateChartBack.prev
+        duplicateChart.next = duplicateChartBack.next
+        duplicateChart.title = duplicateChartBack.title
+        duplicateChart.elements = duplicateChartBack.elements
+        if (chartNext) {
+          chartNext.prev = duplicateChartId
+        }
+
+        this.dataList.splice(chartNextIndex, 0, duplicateChart)
+
+        const indexInTotal = this.dataTotalList.indexOf(chart)
+        this.dataTotalList.splice(indexInTotal + 1, 0, duplicateChart)
+        const chartInTotal = this.dataTotalList.find(item => item.id === chartId)
+        chartInTotal.next = duplicateChartId
+        if (chartNext) {
+          const chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id)
+          chartNextInTotal.prev = chartNext.prev
+        }
+
+        const indexInTotalBak = this.dataTotalListBak.indexOf(chart)
+        this.dataTotalListBak.splice(indexInTotalBak + 1, 0, duplicateChart)
+        const chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId)
+        chartInTotalBak.next = duplicateChartId
+        if (chartNext) {
+          const chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id)
+          chartNextInTotalBak.prev = chartNext.prev
+        }
+
+        this.currentRecordNum = this.currentRecordNum + 1
+        const chartData = this.chartDataCacheGroup.get(chart.id)
+        // console.log("__chartItem00__", chartData)
+        if (duplicateChartBack.type === 'alertList') {
+          this.$nextTick(() => {
+            this.getAlertListChartData(duplicateChartBack)
+            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
+          })
+        } else {
+          let duplicateChartData = {}
+          try {
+            duplicateChartData = JSON.parse(JSON.stringify(chartData))
+          } catch (e) {
+            console.warn(e)
+          }
+          duplicateChartData.chartItem = duplicateChart
+          this.chartDataCacheGroup.set(duplicateChartId, duplicateChartData)
+          this.$nextTick(() => {
+            if (this.$refs['editChart' + duplicateChartId][0]) {
+              this.$refs['editChart' + duplicateChartId][0].showLoad(duplicateChart)// 之后要实现
             }
-            duplicateChartData.chartItem = duplicateChart;
-            this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
-            this.$nextTick(() => {
-              if (this.$refs['editChart'+duplicateChartId][0]) {
 
-                this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
-              }
-
-              let chartType = duplicateChart.type;
-              if(chartType!=='url'){
-                this.getChartDataForSearch(duplicateChart,chartNextIndex);
-              }
-              this.setChartSize(duplicateChart, chartNextIndex); // 设置该图表宽度
-
-            });
-          }
+            const chartType = duplicateChart.type
+            if (chartType !== 'url') {
+              this.getChartDataForSearch(duplicateChart, chartNextIndex)
+            }
+            this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
+          })
         }
-      },
-      // 编辑图表
-      editData(chartId) {
-        // 获取该id下chart的相关信息
-        const chart = this.dataList.find(item => item.id === chartId);
-        if (chart) {
-          this.$emit('on-edit-chart', chart);
-        }
-      },
+      }
+    },
+    // 编辑图表
+    editData (chartId) {
+      // 获取该id下chart的相关信息
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-edit-chart', chart)
+      }
+    },
 
-      editChartForDrag(chartItem){
-        let chart = this.dataList.find(item => item.id === chartItem.id);
-        chart.span = chartItem.span;
-        chart.height = chartItem.height;
-      },
-      // 刷新列表中的一个图表
-      refreshChart(chartId,searchTime) {
-        this.dataList.forEach((item, index) => {
-          if (item.id === chartId) {
-            this.getChartData(item, index, 'refresh');
-          }
-        });
-      },
-      searchData(chartId,searchTime){
-        if(searchTime){//全屏时间查询
-          this.filter.start_time=bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-          this.filter.end_time=bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+    editChartForDrag (chartItem) {
+      const chart = this.dataList.find(item => item.id === chartItem.id)
+      chart.span = chartItem.span
+      chart.height = chartItem.height
+    },
+    // 刷新列表中的一个图表
+    refreshChart (chartId, searchTime) {
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'refresh')
         }
-        this.dataList.forEach((item, index) => {
-          if (item.id === chartId) {
-            this.getChartData(item, index, 'showFullScreen');
-          }
-        });
-      },
-      //懒加载，判断网页区域，加载可见区的prom数据
-      handleElementInViewport(ele,scrollTop,item,index,isSearch) {
-        /*
+      })
+    },
+    searchData (chartId, searchTime) {
+      if (searchTime) { // 全屏时间查询
+        this.filter.start_time = bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        this.filter.end_time = bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      }
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'showFullScreen')
+        }
+      })
+    },
+    // 懒加载，判断网页区域，加载可见区的prom数据
+    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
+      /*
         网页被卷去的高：document.body.scrollTop
         网页正文全文高：document.body.scrollHeight
         网页可见区域高（包括边线的高）：document.body.offsetHeight；
         网页可见区域高：document.body.clientHeight
         */
-        let that = this;
-        setTimeout(function () {
-          let itemHeight = item.height;
-          //1.元素距离页面顶部的距离
-          var mainOffsetTop = ele.offsetTop;//offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
-          //2.元素的高度
-          var mainHeight = itemHeight;//ele.offsetHeight;//itemHeight;
-          //3.页面滚动的距离
-          var windowScrollTop = scrollTop;//document.documentElement.scrollTop || document.body.scrollTop;
-          //4.浏览器可见区域的高度
-          var windowHeight = (window.innerHeight || document.documentElement.clientHeight)-50-42;
+      const that = this
+      setTimeout(function () {
+        const itemHeight = item.height
+        // 1.元素距离页面顶部的距离
+        const mainOffsetTop = ele.offsetTop// offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
+        // 2.元素的高度
+        const mainHeight = itemHeight// ele.offsetHeight;//itemHeight;
+        // 3.页面滚动的距离
+        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
+        // 4.浏览器可见区域的高度
+        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
 
-          /*
+        /*
           * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
           1.向上滚动超出可见区域
           2.向下滚动超出可视区域
@@ -1665,30 +1653,30 @@
           * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
           * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
           * */
-          /*console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
+        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
           console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
           console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
           console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
-          console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight)))*/
-          if((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight)){
-            let chartType = item.type;
-            item.isLoaded = true;
-            if(chartType!=='url'){
-              that.getChartDataForSearch(item, index);
-            } else {
-              that.$refs['editChart'+item.id][0].showLoad(item);
-            }
+          console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
+        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
+          const chartType = item.type
+          item.isLoaded = true
+          if (chartType !== 'url') {
+            that.getChartDataForSearch(item, index)
+          } else {
+            that.$refs['editChart' + item.id][0].showLoad(item)
           }
-        }, 500);
-      },
-    },
-    created() {
-      this.chartDataCacheGroup = new Map;
-    },
-    mounted() {
-      this.tempDomInit();
-    },
+        }
+      }, 500)
+    }
+  },
+  created () {
+    this.chartDataCacheGroup = new Map()
+  },
+  mounted () {
+    this.tempDomInit()
+  }
 
-  };
+}
 
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 924e1e10e..06ff643b7 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -78,591 +78,584 @@
 
 <script>
 import chartDataFormat from './chartDataFormat'
-import loading from "../common/loading";
-import timePicker from '../common/timePicker'
+import loading from '../common/loading'
 import * as echarts from 'echarts'
-import {getChart, setChart, lineChartMove,getMousePoint} from "../common/js/common";
-import chart from '../page/dashboard/overview/chart'
-import chartConfig from "../page/dashboard/overview/chartConfig";
-import {randomcolor} from "../common/js/radomcolor/randomcolor";
+import { getChart, setChart, getMousePoint } from '../common/js/common'
+import chartConfig from '../page/dashboard/overview/chartConfig'
+import { randomcolor } from '../common/js/radomcolor/randomcolor'
 export default {
   name: 'pieChart',
   components: {
-    'loading': loading,
-    'time-picker':timePicker,
-    chart,
+    loading: loading
   },
   props: {
-    tempDom:Object,
+    tempDom: Object,
     chartData: {
       type: Object
     },
     // 看板id
     panelId: {
       type: Number,
-      default: 0,
+      default: 0
     },
     editChartId: {
       type: String,
-      default: 'editChartId',
+      default: 'editChartId'
     },
-    chartIndex:{
+    chartIndex: {
       type: Number,
-      default: 0,
+      default: 0
     },
-    from: {type: String},
-    isLock:{type:Boolean,default:false}
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
   },
-  data() {
+  data () {
     return {
       data: {}, // 该图表信息,chartItem
-      noData:false,
-      unit:{},
-      isError:false,
-      errorContent:'',
+      noData: false,
+      unit: {},
+      isError: false,
+      errorContent: '',
       seriesItem: [], // 保存信息
-      seriesItemScreen:[],//全屏数据
-      pieData:[],
-      mapping:'',//满足valueMapping时 mapping的值
+      seriesItemScreen: [], // 全屏数据
+      pieData: [],
+      mapping: '', // 满足valueMapping时 mapping的值
       images: '',
-      loading:Object,
+      loading: Object,
       items: {
         metric_name: [], // 每条数据列名称
         xAxis: [],
-        theData: [], // series数据组
+        theData: [] // series数据组
       },
       panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
       firstLoad: false, // 是否第一次加载
       screenModal: false,
       // 查询数据使用
       filter: {
-          start_time: '',
-          end_time: '',
+        start_time: '',
+        end_time: ''
       },
       firstShow: false, // 默认不显示操作按钮,
-      caretShow:false,
-      dragTitleShow:false,
-      dropdownMenuShow:false,
-      divFirstShow:false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
       oldSearchTime: [],
-      legend:[],
-      legendScreen:[],
-      isGrey:[],
-      isGreyScreen:[],
-      echart:null,
-      echartScreen:null,
-      bgColorList:[],
-      option:{
+      legend: [],
+      legendScreen: [],
+      isGrey: [],
+      isGreyScreen: [],
+      echart: null,
+      echartScreen: null,
+      bgColorList: [],
+      option: {
         title: {
-          show: false,
+          show: false
         },
-        legend:{
-          show:false,
+        legend: {
+          show: false
         },
         grid: {
-          left:'center',
-          top:'middle',
+          left: 'center',
+          top: 'middle'
         },
-        tooltip:{
-          trigger:'item',
-          backgroundColor:'rgba(221,228,237,1)',
-          borderColor :'rgba(255,255,255,0)',
-          textStyle:{
-            color:'#000'
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(221,228,237,1)',
+          borderColor: 'rgba(255,255,255,0)',
+          textStyle: {
+            color: '#000'
           },
-          axisPointer:{
-            snap:false,
-            animation:false,
+          axisPointer: {
+            snap: false,
+            animation: false
           },
-          extraCssText:'z-index:1000;',
+          extraCssText: 'z-index:1000;'
         },
-        series:null,
+        series: null
       }
-    };
+    }
   },
-  created() {
+  created () {
   },
   computed: {},
-    watch: {
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
+    },
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        // this.showLoading = true;
+        this.$refs['localLoading' + this.chartIndex].startLoading()
       }
     },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e,this.chartIndex);
-      },
-      startLoading(area){
-        if(area==='screen'){
-          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-        }else {
-          //this.showLoading = true;
-          this.$refs['localLoading'+this.chartIndex].startLoading();
+    endLoading (area) {
+      if (area === 'screen') {
+        // this.showLoadingScreen = false;
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        // this.showLoading = false;
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    showLoad (chartItem) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
+        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
+        if (height < this.$chartResizeTool.minHeight) {
+          height = this.$chartResizeTool.minHeight
         }
-      },
-      endLoading(area){
-        if(area==='screen'){
-          //this.showLoadingScreen = false;
-          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-        }else {
-          //this.showLoading = false;
-          this.$refs['localLoading'+this.chartIndex].endLoading();
-        }
-      },
-      showLoad(chartItem) {
-        this.$nextTick(() => {
-          const chartBox = document.getElementById('chartPieChart'+this.chartIndex);
-          let height = Math.floor(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
-          if(height<this.$chartResizeTool.minHeight){
-            height = this.$chartResizeTool.minHeight;
+        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
+      })
+      this.clearData()
+      this.firstShow = false
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.divFirstShow = true
+    },
+    clearData () {
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).clear()
+        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
+      }
+    },
+    screenRefreshChart () {
+      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      const id = this.data.id
+      this.clearChart()
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 全屏时间条件查询
+    dateChange (time) {
+      this.seriesItemScreen = []
+      this.seriePieChart = ''
+      this.startLoading('screen')
+      this.$emit('on-search-data', this.data.id, this.searchTime)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
+            }
           }
-          chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
-        });
-        this.clearData();
-        this.firstShow = false;
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.divFirstShow = true;
-      },
-      clearData(){
-        if(getChart(this.chartIndex)){
-          getChart(this.chartIndex).clear();
-          // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-        }
-      },
-      screenRefreshChart(){
-        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        let id = this.data.id;
-        this.clearChart();
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      //全屏时间条件查询
-      dateChange(time) {
-        this.seriesItemScreen = [];
-        this.seriePieChart = "";
-        this.startLoading('screen');
-        this.$emit('on-search-data', this.data.id, this.searchTime);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
-            }
-          });
-        });
-      },
-      // 全屏查看
-      showAllScreen() {
-          this.dropdownMenuShow=false;
-          this.searchTime = [];
-          this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-          this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-          // this.$refs.calendarPanel.setCustomTime(this.searchTime);
-          this.screenModal = true;
-      },
-      resize(chartItem) {
-        getChart(this.chartIndex).resize()
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
-        if(errorMsg && errorMsg!==''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        if(seriesItem||seriesItem.data.length<1){ //0 为false
-          this.noData=false;
-        }else{
-          this.noData=true;
-        }
-        this.legend = legend;
-        this.legendScreen=legend
-        legend && this.setColor(legend.length);
-        legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
-
-        this.$set(this.option,'color',this.bgColorList)
-        this.pieData = seriesItem;
-        if(area==='showFullScreen'){//全屏按时间查询
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          this.initChart('screen')
-          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time;
-          this.endLoading('screen');
-        }else{
-          this.divFirstShow = true;
-
-          this.firstShow = true; // 展示操作按键
-
-          this.panelIdInner = panelId;
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          this.initChart('local')
-          if (filter) { // 保存数据,用于同步时间
-            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = filter.end_time;
-            this.oldSearchTime[0] = this.searchTime[0];
-            this.oldSearchTime[1] = this.searchTime[1];
-          }
-          this.endLoading();
-        }
-      },
-      formatLegend(chartWidth,name){
-        if(!name){
-          return '';
-        }
-        //计算宽度
-        let span = document.querySelector(".temp-dom");
-        span.textContent = name;
-        let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
-        if(txtWidth < chartWidth){
-          return name;
-        }else {
-          let charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-          return name.slice(0,charNum)+'...';
-        }
-      },
-      initChart:function(type){
-        this.option.series = this.pieData;
-        if(type == 'local'){
-          this.initLocal();
-        }else{
-          this.initScreen()
-        }
-      },
-      initLocal:function(){
-        let self=this;
-        let dom = document.getElementById('pie-chart-local-'+this.chartIndex)
-        if(!this.echart){
-          this.echart= echarts.init(dom);
-          setChart(this.chartIndex, this.echart);
-        }
-        if(this.legend){
-          this.isGrey=[];
-          this.legend.map((item, i) => {
-            const legend = {
-              name:item.name,
-              alias:item.alias,
-              color:item.color,
-              showText:this.formatLegend(dom.clientWidth,item.name)
-            };
-            self.isGrey.push(false);
-            return legend
-          });
-        }
-
-        this.$nextTick(() => {
-          setTimeout(function () {
-            let divHeight = self.$refs.legendArea.offsetHeight;
-            if(!self.chartData.height){
-              getChart(self.chartIndex).resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-            }else {
-              getChart(self.chartIndex).resize({height:(self.chartData.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-            }
-            self.$set(self.option.tooltip,'formatter',self.formatterFunc)
-            self.$set(self.option.tooltip,'position', function(point,params,dom,rect,size){
-              dom.style.transform = "translateZ(0)";
-              var windowWidth=window.innerWidth;//窗口宽度
-              var windowHeight=window.innerHeight;//窗口高度
-              var windowMouse=getMousePoint();
-              //提示框位置
-              var x=0;
-              var y=0;
-              //当前鼠标位置
-              var pointX = point[0];
-              var pointY = point[1];
-              //外层div大小
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              //提示框大小
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              if (!self.screenModal) { // 本地显示
-                let chartDom = document.getElementById(self.chartData.title+"_"+self.chartData.id);
-                if(chartDom){
-                  let parTop = document.getElementById(self.chartData.title+"_"+self.chartData.id).offsetTop;
-                  let parleft = document.getElementById(self.chartData.title+"_"+self.chartData.id).offsetLeft;
-
-                  let parent = document.getElementById('tableList');
-                  let parClientHeight = parent.clientHeight;//可视高度
-                  let parClientWidth = parent.clientWidth;//可视宽度
-                  let parScrollTop = parent.scrollTop;
-                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-                    x=pointX+10;
-                  }else{
-                    x = pointX - boxWidth;
-                  }
-                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                    y = pointY + 15;
-                  }else {
-                    y = pointY - boxHeight - 10;
-                  }
-                  return [x,y];
-                }else {//preview page
-
-                  if(windowMouse.x<(windowWidth/2)){//说明鼠标在左边放不下提示框
-                    x=pointX + 15;
-                  }else{
-                    x = pointX - boxWidth - 15;
-                  }
-                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                    y = pointY + 15;
-                  }else {
-                    y = pointY - boxHeight - 10;
-                  }
-                  return [x,y];
-                }
-              }else {
-                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
-                  x=pointX+10;
-                }else{
-                  x = pointX - boxWidth;
-                }
-                if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                  y = pointY + 15;
-                }else {
-                  y = pointY - boxHeight - 10;
-                }
-                return [x,y];
-              }
-            },)
-            if(self.pieData[0].data.length>0){
-              getChart(self.chartIndex).clear();
-              getChart(self.chartIndex).setOption(self.option);//创建图表
-              self.noData=false;
-            }else{
-              self.noData=true;
-              self.option=chartConfig.getOption('noData')
-              getChart(self.chartIndex).clear();
-              getChart(self.chartIndex).setOption(self.option);//创建图表
-            }
-
-            self.$refs['localLoading'+self.chartIndex].endLoading();
-            self.firstShow = true; // 展示操作按键
-          }, 100);
         })
-      },
-      initScreen:function(){
-        let self=this;
-        let  dom = document.getElementById('pie-chart-screen-'+this.chartIndex)
-        if(!this.echartScreen){
-          this.echartScreen = echarts.init(dom)
+      })
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.searchTime = []
+      this.$set(this.searchTime, 0, this.oldSearchTime[0])
+      this.$set(this.searchTime, 1, this.oldSearchTime[1])
+      // this.$refs.calendarPanel.setCustomTime(this.searchTime);
+      this.screenModal = true
+    },
+    resize (chartItem) {
+      getChart(this.chartIndex).resize()
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      if (seriesItem || seriesItem.data.length < 1) { // 0 为false
+        this.noData = false
+      } else {
+        this.noData = true
+      }
+      this.legend = legend
+      this.legendScreen = legend
+      legend && this.setColor(legend.length)
+      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
+
+      this.$set(this.option, 'color', this.bgColorList)
+      this.pieData = seriesItem
+      if (area === 'showFullScreen') { // 全屏按时间查询
+        this.data = chartItem
+        this.unit = chartDataFormat.getUnit(this.data.unit)
+        this.initChart('screen')
+        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+        this.searchTime[1] = filter.end_time
+        this.endLoading('screen')
+      } else {
+        this.divFirstShow = true
+
+        this.firstShow = true // 展示操作按键
+
+        this.panelIdInner = panelId
+        this.data = chartItem
+        this.unit = chartDataFormat.getUnit(this.data.unit)
+        this.initChart('local')
+        if (filter) { // 保存数据,用于同步时间
+          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time
+          this.oldSearchTime[0] = this.searchTime[0]
+          this.oldSearchTime[1] = this.searchTime[1]
         }
-        if(this.legendScreen){
-          this.isGreyScreen=[];
-          this.legendScreen=this.legendScreen.map((item, i) => {
-            const legend = {
-              name:item.name,
-              alias:item.alias,
-              color:item.color,
-              showText:this.formatLegend(dom.clientWidth,item.name)
-            };
-            self.isGreyScreen.push(false);
-            return legend
-          });
-        }
-        if(self.echartScreen){
-          self.echartScreen.clear();
-          self.showLegend = true;
-          self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
-        }
-        this.$nextTick(() => {
-            let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-            let divHeight = legendDiv.offsetHeight;
-            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-            let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
-            self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
-            setTimeout(function () {
-              if(self.pieData[0].data.length>0){
-                self.echartScreen.setOption(self.option);//显示全屏界面
-                self.noData=false;
-              }else{
-                self.noData=true;
-                self.option=chartConfig.getOption('noData')
-                self.echartScreen.setOption(self.option);//显示全屏界面
+        this.endLoading()
+      }
+    },
+    formatLegend (chartWidth, name) {
+      if (!name) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.querySelector('.temp-dom')
+      span.textContent = name
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
+      if (txtWidth < chartWidth) {
+        return name
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
+        return name.slice(0, charNum) + '...'
+      }
+    },
+    initChart: function (type) {
+      this.option.series = this.pieData
+      if (type == 'local') {
+        this.initLocal()
+      } else {
+        this.initScreen()
+      }
+    },
+    initLocal: function () {
+      const self = this
+      const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
+      if (!this.echart) {
+        this.echart = echarts.init(dom)
+        setChart(this.chartIndex, this.echart)
+      }
+      if (this.legend) {
+        this.isGrey = []
+        this.legend.map((item, i) => {
+          const legend = {
+            name: item.name,
+            alias: item.alias,
+            color: item.color,
+            showText: this.formatLegend(dom.clientWidth, item.name)
+          }
+          self.isGrey.push(false)
+          return legend
+        })
+      }
+
+      this.$nextTick(() => {
+        setTimeout(function () {
+          const divHeight = self.$refs.legendArea.offsetHeight
+          if (!self.chartData.height) {
+            getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+          } else {
+            getChart(self.chartIndex).resize({ height: (self.chartData.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+          }
+          self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
+          self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
+            dom.style.transform = 'translateZ(0)'
+            const windowWidth = window.innerWidth// 窗口宽度
+            const windowHeight = window.innerHeight// 窗口高度
+            const windowMouse = getMousePoint()
+            // 提示框位置
+            let x = 0
+            let y = 0
+            // 当前鼠标位置
+            const pointX = point[0]
+            const pointY = point[1]
+            // 外层div大小
+            const viewWidth = size.viewSize[0]
+            // const viewHeight = size.viewSize[1]
+            // 提示框大小
+            const boxWidth = size.contentSize[0]
+            const boxHeight = size.contentSize[1]
+            if (!self.screenModal) { // 本地显示
+              const chartDom = document.getElementById(self.chartData.title + '_' + self.chartData.id)
+              if (chartDom) {
+                // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
+                const parleft = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetLeft
+
+                const parent = document.getElementById('tableList')
+                // const parClientHeight = parent.clientHeight// 可视高度
+                const parClientWidth = parent.clientWidth// 可视宽度
+                // const parScrollTop = parent.scrollTop
+                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+                  x = pointX + 10
+                } else {
+                  x = pointX - boxWidth
+                }
+                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                  y = pointY + 15
+                } else {
+                  y = pointY - boxHeight - 10
+                }
+                return [x, y]
+              } else { // preview page
+                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
+                  x = pointX + 15
+                } else {
+                  x = pointX - boxWidth - 15
+                }
+                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                  y = pointY + 15
+                } else {
+                  y = pointY - boxHeight - 10
+                }
+                return [x, y]
               }
-              self.echartScreen.on('finished', function () {
-                let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-                let divHeight = legendDiv.offsetHeight;
-                let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-                let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-                self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
-                self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
-                self.echartScreen.off('finished');
-              })
-            }, 100);
-
-          })
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            } else {
+              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
+                x = pointX + 10
+              } else {
+                x = pointX - boxWidth
+              }
+              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                y = pointY + 15
+              } else {
+                y = pointY - boxHeight - 10
+              }
+              return [x, y]
             }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
+          })
+          if (self.pieData[0].data.length > 0) {
+            getChart(self.chartIndex).clear()
+            getChart(self.chartIndex).setOption(self.option)// 创建图表
+            self.noData = false
+          } else {
+            self.noData = true
+            self.option = chartConfig.getOption('noData')
+            getChart(self.chartIndex).clear()
+            getChart(self.chartIndex).setOption(self.option)// 创建图表
+          }
 
-      },
-      clickLegend(legendName, index){
-        /*点击legend
+          self.$refs['localLoading' + self.chartIndex].endLoading()
+          self.firstShow = true // 展示操作按键
+        }, 100)
+      })
+    },
+    initScreen: function () {
+      const self = this
+      const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
+      if (!this.echartScreen) {
+        this.echartScreen = echarts.init(dom)
+      }
+      if (this.legendScreen) {
+        this.isGreyScreen = []
+        this.legendScreen = this.legendScreen.map((item, i) => {
+          const legend = {
+            name: item.name,
+            alias: item.alias,
+            color: item.color,
+            showText: this.formatLegend(dom.clientWidth, item.name)
+          }
+          self.isGreyScreen.push(false)
+          return legend
+        })
+      }
+      if (self.echartScreen) {
+        self.echartScreen.clear()
+        self.showLegend = true
+        self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
+      }
+      this.$nextTick(() => {
+        const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+        const divHeight = legendDiv.offsetHeight
+        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+        self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
+        self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
+        setTimeout(function () {
+          if (self.pieData[0].data.length > 0) {
+            self.echartScreen.setOption(self.option)// 显示全屏界面
+            self.noData = false
+          } else {
+            self.noData = true
+            self.option = chartConfig.getOption('noData')
+            self.echartScreen.setOption(self.option)// 显示全屏界面
+          }
+          self.echartScreen.on('finished', function () {
+            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+            const divHeight = legendDiv.offsetHeight
+            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
+            self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
+            self.echartScreen.off('finished')
+          })
+        }, 100)
+      })
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    clickLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.isGrey.forEach(g => {
-          if (!g) {
-            highlightNum++;
-          }
-        });
-        let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
-        let curIsGrey = this.isGrey[index]; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
-
-        let echart = getChart(this.chartIndex)
-        if (echart) {
-          if (!hasGrey) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.isGrey = this.isGrey.map((g, i) => i !== index);
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.isGrey = this.isGrey.map(() => false);
-          } else {
-            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            this.$set(this.isGrey, index, !this.isGrey[index]);
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGrey.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-      },
-      clickScreenLegend(legendName,index){
-        /*点击legend
+      })
+      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
+      const curIsGrey = this.isGrey[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = getChart(this.chartIndex)
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGrey = this.isGrey.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGrey = this.isGrey.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGrey, index, !this.isGrey[index])
+        }
+      }
+    },
+    clickScreenLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.isGreyScreen.forEach(g => {
-          if (!g) {
-            highlightNum++;
-          }
-        });
-        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
-        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+      let highlightNum = 0 // 高亮数量
+      this.isGreyScreen.forEach(g => {
+        if (!g) {
+          highlightNum++
+        }
+      })
+      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
+      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
 
-        let echart = this.echartScreen;
-        if (echart) {
-          if (!hasGrey) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.isGreyScreen = this.isGreyScreen.map(() => false);
-          } else {
-            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
-          }
+      const echart = this.echartScreen
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGreyScreen = this.isGreyScreen.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
         }
-      },
-      setColor(colorNum){
-        this.bgColorList = [
-          '#FF5200','#3685FF','#FF8D00','#00DCA2',
-          '#954Eff','#FFCB01','#f65A96','#00BFD0',
-          '#FF8BEA','#4D7693','#72577C','#99D750',
-          '#DD8270','#C475EE','#7E83FB','#7EB090',
-          '#FF9094','#00CCF5','#CF6684','#4E55FF'
-        ];
-        for(let i=0;i<colorNum-19;i++) {
-          this.bgColorList.push(randomcolor())
-        }
-      },
-      formatterFunc:function(params, ticket, callback){
-        let chartInfo=this.chartData;
-        return `
+      }
+    },
+    setColor (colorNum) {
+      this.bgColorList = [
+        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
+        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
+        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
+        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
+        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
+      ]
+      for (let i = 0; i < colorNum - 19; i++) {
+        this.bgColorList.push(randomcolor())
+      }
+    },
+    formatterFunc: function (params, ticket, callback) {
+      const chartInfo = this.chartData
+      return `
                 <div>
                     <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
                         <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value,null,-1,2)}</div>
+                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
                         </div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>percent</div>
@@ -671,13 +664,13 @@ export default {
                     </div>
                 </div>
                `
-      }
-    },
-    mounted() {
-      this.firstLoad = false;
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-};
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index ee7c1b063..661b3d746 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -73,18 +73,10 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
-import {Loading} from 'element-ui';
 import chartDataFormat from './chartDataFormat'
-import loading from "../common/loading";
-import timePicker from '../common/timePicker'
 
 export default {
   name: 'chartSingleStat',
-  components: {
-    'loading': loading,
-    'time-picker':timePicker
-  },
   props: {
     chartData: {
       type: Object
@@ -92,408 +84,408 @@ export default {
     // 看板id
     panelId: {
       type: Number,
-      default: 0,
+      default: 0
     },
     editChartId: {
       type: String,
-      default: 'editChartId',
+      default: 'editChartId'
     },
-    chartIndex:{
+    chartIndex: {
       type: Number,
-      default: 0,
+      default: 0
     },
-    from: {type: String},
-    isLock:{type:Boolean,default:false}
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
   },
-  data() {
+  data () {
     return {
       data: {}, // 该图表信息,chartItem
-      noData:false,
-      unit:{},
-      isError:false,
-      errorContent:'',
+      noData: false,
+      unit: {},
+      isError: false,
+      errorContent: '',
       seriesItem: [], // 保存信息
-      seriesItemScreen:[],//全屏数据
-      serieSingleStat:'',
-      mapping:'',//满足valueMapping时 mapping的值
+      seriesItemScreen: [], // 全屏数据
+      serieSingleStat: '',
+      mapping: '', // 满足valueMapping时 mapping的值
       images: '',
-      loading:Object,
+      loading: Object,
       items: {
         metric_name: [], // 每条数据列名称
         xAxis: [],
-        theData: [], // series数据组
+        theData: [] // series数据组
       },
       panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
       firstLoad: false, // 是否第一次加载
       screenModal: false,
       // 查询数据使用
       filter: {
-          start_time: '',
-          end_time: '',
+        start_time: '',
+        end_time: ''
       },
       firstShow: false, // 默认不显示操作按钮,
-      caretShow:false,
-      dragTitleShow:false,
-      dropdownMenuShow:false,
-      divFirstShow:false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-      oldSearchTime: [],
-    };
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
+      oldSearchTime: []
+    }
   },
-  created() {
+  created () {
   },
   computed: {},
-    watch: {
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    dragResize: function (e) {
+      const diffWidth = 20 // 界面的宽度空白的地方的宽度
+      const chartBoxPadding = 22
+      const targetDiv = document.getElementById('chartSingleStatDiv' + this.chartIndex) // e.target.parentNode.parentNode;.children[0]
+      const targetDivContainer = document.getElementById('listContainer') // e.target.parentNode.parentNode;.children[0]
+      const maxWidth = targetDivContainer.offsetWidth - diffWidth
+      const minWidth = maxWidth / 12
+      const stepWidth = maxWidth / 12
+      const stepHeight = 10
+
+      // 得到点击时该容器的宽高：
+      const targetDivHeight = targetDiv.offsetHeight
+      const targetDivWidth = targetDiv.offsetWidth
+      const startY = e.clientY
+      const startX = e.clientX
+      const _this = this
+
+      document.onmousemove = function (e) {
+        e.preventDefault()
+        // 得到鼠标拖动的宽高距离：取绝对值
+        const distY = Math.abs(e.clientY - startY)
+        const distX = Math.abs(e.clientX - startX)
+
+        // 往上方拖动：
+        if (e.clientY < startY) {
+          targetDiv.style.height = targetDivHeight - distY + 'px'
+          // heightTmp = targetDivHeight-distY;
+        }
+        if (e.clientX < startX) {
+          targetDiv.style.width = targetDivWidth - distX + 'px'
+          // widthTmp = targetDivWidth-distX;
+        }
+        // 往下方拖动：
+        if (e.clientY > startY) {
+          targetDiv.style.height = (targetDivHeight + distY) + 'px'
+          // heightTmp = targetDivHeight+distY;
+        }
+        if (e.clientX > startX) {
+          targetDiv.style.width = (targetDivWidth + distX) + 'px'
+          // widthTmp = targetDivWidth+distX;
+        }
+
+        if (parseInt(targetDiv.style.height) <= _this.minHeight) {
+          targetDiv.style.height = _this.minHeight + 'px'
+          // heightTmp = _this.minHeight;
+        }
+
+        if (parseInt(targetDiv.style.width) >= maxWidth) {
+          targetDiv.style.width = maxWidth + 'px'
+          // widthTmp = maxWidth;
+        }
+        if (parseInt(targetDiv.style.width) <= minWidth) {
+          targetDiv.style.width = minWidth + 'px'
+          // widthTmp = minWidth;
+        }
+        // 调整表格大小
+        const containerHeight = parseInt(targetDiv.style.height)
+        const containerWidth = parseInt(targetDiv.style.width)
+        const chartBox = document.getElementsByClassName('chartBox')
+        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
+        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
+        // 表格的高度
+        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
+        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`// -75-32+25
+      }
+
+      document.onmouseup = function () {
+        const targetDivHeightNew = parseInt(targetDiv.style.height)
+        // let targetDivHeightNew = heightTmp
+        const targetDivWidthNew = parseInt(targetDiv.style.width)
+        // let targetDivWidthNew = widthTmp;
+
+        const diffHeight = Math.abs(targetDivHeight - targetDivHeightNew)
+        if (targetDivHeight > targetDivHeightNew) {
+          const finalDiffHeight = Math.floor(diffHeight / stepHeight) * stepHeight
+          // alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
+          targetDiv.style.height = (targetDivHeight - finalDiffHeight) + 'px'
+        }
+        if (targetDivHeight < targetDivHeightNew) {
+          const finalDiffHeight = Math.ceil(diffHeight / stepHeight) * stepHeight
+          targetDiv.style.height = (targetDivHeight + finalDiffHeight) + 'px'
+        }
+
+        let span = _this.data.span
+        if (targetDivWidth > targetDivWidthNew) {
+          span = Math.floor((targetDivWidthNew * 12) / maxWidth)
+          const finalWidth = Math.floor((targetDivWidthNew * 12) / maxWidth) * stepWidth
+          if ((finalWidth) < minWidth) {
+            targetDiv.style.width = minWidth + 'px'
+            span = 1
+          } else {
+            targetDiv.style.width = finalWidth + 'px'
+          }
+        }
+        if (targetDivWidth < targetDivWidthNew) {
+          span = Math.ceil((targetDivWidthNew * 12) / maxWidth)
+          const spanUnit = Math.ceil((targetDivWidthNew * 12) / maxWidth)
+          const finalWidth = spanUnit * stepWidth
+          if (finalWidth > maxWidth || spanUnit === 12) {
+            targetDiv.style.width = maxWidth + 'px'
+            span = 12
+          } else {
+            targetDiv.style.width = finalWidth + 'px'
+          }
+        }
+        // 调整表格大小
+        const containerHeight = parseInt(targetDiv.style.height)
+        const containerWidth = parseInt(targetDiv.style.width)
+
+        const chartBox = document.getElementsByClassName('chartBox')
+        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
+        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
+        // 表格的高度
+        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
+        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`
+
+        const modifyParams = {
+          id: _this.data.id,
+          span: span,
+          height: (containerHeight + _this.chartSpaceHeight),
+          prev: parseInt(_this.data.prev),
+          next: parseInt(_this.data.next)
+        }
+        targetDiv.style.height = (Math.floor((containerHeight + _this.chartSpaceHeight) / 10) * 10 - _this.chartSpaceHeight) + 'px'// 图表实际渲染高度，采用个位数字四舍五入
+        _this.$put('panel/' + _this.panelIdInner + '/charts/modify', modifyParams).then(response => {
+          if (response.code === 200) {
+            // 更新当前图表数据
+            _this.data.span = span
+            _this.data.height = containerHeight + _this.chartSpaceHeight
+            _this.$emit('on-drag-chart', _this.data)
+          } else {
+            if (response.msg) {
+              _this.$message.error(response.msg)
+            } else if (response.error) {
+              _this.$message.error(response.error)
+            } else {
+              _this.$message.error(response)
+            }
+          }
+        })
+        document.onmousemove = null
+        document.onmouseup = null
       }
     },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      dragResize:function(e){
-        var diffWidth =20; //界面的宽度空白的地方的宽度
-        var chartBoxPadding = 22;
-        var targetDiv= document.getElementById('chartSingleStatDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
-        var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
-        var maxWidth = targetDivContainer.offsetWidth-diffWidth;
-        var minWidth = maxWidth/12;
-        var stepWidth = maxWidth/12;
-        var stepHeight = 10;
-
-        //得到点击时该容器的宽高：
-        var targetDivHeight=targetDiv.offsetHeight;
-        var targetDivWidth=targetDiv.offsetWidth;
-        var startY=e.clientY;
-        var startX=e.clientX;
-        var _this=this;
-
-        document.onmousemove=function(e){
-          e.preventDefault();
-          //得到鼠标拖动的宽高距离：取绝对值
-          var distY=Math.abs(e.clientY-startY);
-          var distX=Math.abs(e.clientX-startX);
-
-          //往上方拖动：
-          if( e.clientY < startY){
-            targetDiv.style.height=targetDivHeight-distY+'px';
-            //heightTmp = targetDivHeight-distY;
-          }
-          if( e.clientX < startX){
-            targetDiv.style.width=targetDivWidth-distX+'px';
-            //widthTmp = targetDivWidth-distX;
-          }
-          //往下方拖动：
-          if (e.clientY > startY) {
-            targetDiv.style.height=(targetDivHeight+distY)+'px';
-            //heightTmp = targetDivHeight+distY;
-          }
-          if (e.clientX > startX) {
-            targetDiv.style.width=(targetDivWidth+distX)+'px';
-            //widthTmp = targetDivWidth+distX;
-          }
-
-          if(parseInt(targetDiv.style.height)<=_this.minHeight){
-            targetDiv.style.height=_this.minHeight+'px';
-            //heightTmp = _this.minHeight;
-          }
-
-          if(parseInt(targetDiv.style.width)>=maxWidth){
-            targetDiv.style.width=maxWidth+'px';
-            //widthTmp = maxWidth;
-          }
-          if(parseInt(targetDiv.style.width)<=minWidth){
-            targetDiv.style.width=minWidth+'px';
-            //widthTmp = minWidth;
-          }
-          //调整表格大小
-            let containerHeight = parseInt(targetDiv.style.height);
-            let containerWidth = parseInt(targetDiv.style.width);
-            const chartBox = document.getElementsByClassName('chartBox');
-            chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-            //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-            //表格的高度
-            const chartSingleStatBox = document.getElementById('chartContainer'+_this.chartIndex);
-          chartSingleStatBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        // this.showLoading = true;
+        this.$refs['localLoading' + this.chartIndex].startLoading()
+      }
+    },
+    endLoading (area) {
+      if (area === 'screen') {
+        // this.showLoadingScreen = false;
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        // this.showLoading = false;
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    showLoad (chartItem) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
+        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
+        if (height < this.minHeight) {
+          height = this.minHeight
         }
-
-        document.onmouseup=function(){
-          let targetDivHeightNew = parseInt(targetDiv.style.height);
-          //let targetDivHeightNew = heightTmp
-          let targetDivWidthNew = parseInt(targetDiv.style.width);
-          //let targetDivWidthNew = widthTmp;
-
-          let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
-          if(targetDivHeight>targetDivHeightNew){
-            let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
-            //alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-            targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
-          }
-          if(targetDivHeight<targetDivHeightNew){
-            let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
-            targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
-          }
-
-          var span = _this.data.span;
-          if(targetDivWidth>targetDivWidthNew){
-            span =  Math.floor((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
-            if((finalWidth)<minWidth){
-              targetDiv.style.width=minWidth+'px';
-              span = 1;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
+        chartBox.style.height = `${height - this.chartSpaceHeight}px`
+        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
+        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    screenRefreshChart () {
+      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 全屏时间条件查询
+    dateChange (time) {
+      this.seriesItemScreen = []
+      this.serieSingleStat = ''
+      this.startLoading('screen')
+      this.$emit('on-search-data', this.data.id, this.searchTime)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
           }
-          if(targetDivWidth<targetDivWidthNew){
-            span =  Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
-            let finalWidth = spanUnit*stepWidth;
-            if(finalWidth>maxWidth || spanUnit===12){
-              targetDiv.style.width=maxWidth+'px';
-              span = 12;
-            }else {
-              targetDiv.style.width = finalWidth+'px';
-            }
-          }
-          //调整表格大小
-          let containerHeight = parseInt(targetDiv.style.height);
-          let containerWidth = parseInt(targetDiv.style.width);
+        })
+      })
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.searchTime = []
+      this.$set(this.searchTime, 0, this.oldSearchTime[0])
+      this.$set(this.searchTime, 1, this.oldSearchTime[1])
+      // this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
-          const chartBox = document.getElementsByClassName('chartBox');
-          chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
-          //chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-          //表格的高度
-          const chartSingleStatBox = document.getElementById('chartContainer'+_this.chartIndex);
-          chartSingleStatBox.style.height = `${containerHeight-_this.titleHeight}px`;
+      this.seriesItemScreen = this.seriesItem
+      this.screenModal = true
+    },
+    resize (chartItem) {
+      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .single-stat-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      if (seriesItem || (typeof seriesItem === 'number' && seriesItem == 0) || (typeof seriesItem === 'string' && seriesItem != '')) { // 0 为false
+        this.noData = false
+      } else {
+        this.noData = true
+      }
 
-          const modifyParams = {
-            id:_this.data.id,
-            span:span,
-            height:(containerHeight+_this.chartSpaceHeight),
-            prev:parseInt(_this.data.prev),
-            next:parseInt(_this.data.next),
-          }
-          targetDiv.style.height = (Math.floor((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
-          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
-            if (response.code === 200) {
-              //更新当前图表数据
-              _this.data.span= span;
-              _this.data.height= containerHeight+_this.chartSpaceHeight;
-              _this.$emit('on-drag-chart', _this.data);
-            }else {
-              if(response.msg){
-                _this.$message.error(response.msg);
-              }else if(response.error){
-                _this.$message.error(response.error);
-              }else {
-                _this.$message.error(response);
-              }
+      if (area === 'showFullScreen') { // 全屏按时间查询
+        this.data = chartItem
+        this.unit = chartDataFormat.getUnit(this.data.unit)
+        if (Number(seriesItem)) {
+          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
+            const type = chartItem.param.valueMapping.type
+            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
+            let mapping
+            if (type == 'value') {
+              mapping = mappings.find(item => { return item.value == singleStatTmp })
+            } else {
+              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
             }
-          });
-          document.onmousemove=null;
-          document.onmouseup = null;
+            this.mapping = mapping
+            if (this.mapping && !this.mapping.color) {
+              this.mapping.color = { bac: '#fff', text: '#000' }
+            }
+            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
+          } else {
+            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
+          }
+        } else {
+          this.serieSingleStat = seriesItem
         }
-      },
-      startLoading(area){
-        if(area==='screen'){
-          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-        }else {
-          //this.showLoading = true;
-          this.$refs['localLoading'+this.chartIndex].startLoading();
-        }
-      },
-      endLoading(area){
-        if(area==='screen'){
-          //this.showLoadingScreen = false;
-          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-        }else {
-          //this.showLoading = false;
-          this.$refs['localLoading'+this.chartIndex].endLoading();
-        }
-      },
-      showLoad(chartItem) {
+        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+        this.searchTime[1] = filter.end_time
+        this.endLoading('screen')
+      } else {
         this.$nextTick(() => {
-          const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
-          let height = Math.floor(chartItem.height/10)*10;//图表高度四舍五入
-          if(height<this.minHeight){
-            height = this.minHeight;
-          }
-          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-          const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
-          singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      screenRefreshChart(){
-        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      //全屏时间条件查询
-      dateChange(time) {
-        this.seriesItemScreen = [];
-        this.serieSingleStat = "";
-        this.startLoading('screen');
-        this.$emit('on-search-data', this.data.id, this.searchTime);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
+          this.resize(chartItem)
+        })
+        this.divFirstShow = true
+
+        this.firstShow = true // 展示操作按键
+
+        this.panelIdInner = panelId
+        this.data = chartItem
+        this.unit = chartDataFormat.getUnit(this.data.unit)
+        if (Number(seriesItem)) {
+          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
+            const type = chartItem.param.valueMapping.type
+            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
+            let mapping
+            if (type == 'value') {
+              mapping = mappings.find(item => { return item.value == singleStatTmp })
+            } else {
+              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
             }
-          });
-        });
-      },
-      // 全屏查看
-      showAllScreen() {
-          this.dropdownMenuShow=false;
-          this.searchTime = [];
-          this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-          this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-          // this.$refs.calendarPanel.setCustomTime(this.searchTime);
-
-          this.seriesItemScreen = this.seriesItem;
-          this.screenModal = true;
-      },
-      resize(chartItem) {
-        document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .single-stat-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-        if(errorMsg && errorMsg!==''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        if(seriesItem||(typeof seriesItem == 'number'&&seriesItem == 0) ||(typeof seriesItem=='string'&& seriesItem !='')){ //0 为false
-          this.noData=false;
-        }else{
-          this.noData=true;
-        }
-
-        if(area==='showFullScreen'){//全屏按时间查询
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          if(Number(seriesItem)){
-            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-            if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
-              let type=chartItem.param.valueMapping.type;
-              let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
-              let mapping;
-              if(type == 'value'){
-                mapping=mappings.find(item=>{return item.value == singleStatTmp})
-              }else{
-                mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
-              }
-              this.mapping=mapping;
-              if(this.mapping&&!this.mapping.color){
-                this.mapping.color={bac:'#fff',text:'#000'}
-              }
-              this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-            }else{
-              this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            this.mapping = mapping
+            if (this.mapping && !this.mapping.color) {
+              this.mapping.color = { bac: '#fff', text: '#000' }
             }
-          }else {
-            this.serieSingleStat =seriesItem;
+            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
+          } else {
+            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
           }
-          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time;
-          this.endLoading('screen');
-        }else{
-          this.$nextTick(() => {
-            this.resize(chartItem);
-          });
-          this.divFirstShow = true;
-
-          this.firstShow = true; // 展示操作按键
-
-          this.panelIdInner = panelId;
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          if(Number(seriesItem)){
-            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-            if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
-              let type=chartItem.param.valueMapping.type;
-              let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
-              let mapping;
-              if(type == 'value'){
-                mapping=mappings.find(item=>{return item.value == singleStatTmp})
-              }else{
-                mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
-              }
-              this.mapping=mapping;
-              if(this.mapping&&!this.mapping.color){
-                this.mapping.color={bac:'#fff',text:'#000'}
-              }
-              this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-            }else{
-              this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-            }
-          }else {
-            this.serieSingleStat =seriesItem;
-          }
-          if (filter) { // 保存数据,用于同步时间
-            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = filter.end_time;
-            this.oldSearchTime[0] = this.searchTime[0];
-            this.oldSearchTime[1] = this.searchTime[1];
-          }
-          this.endLoading();
+        } else {
+          this.serieSingleStat = seriesItem
         }
-      },
-    },
-    mounted() {
-      this.firstLoad = false;
-    },
-    beforeDestroy() {
-      this.clearChart();
-    },
-};
+        if (filter) { // 保存数据,用于同步时间
+          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time
+          this.oldSearchTime[0] = this.searchTime[0]
+          this.oldSearchTime[1] = this.searchTime[1]
+        }
+        this.endLoading()
+      }
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 555047838..4f607577e 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -53,16 +53,16 @@
           <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
                     :data="seriesItem" border tooltip-effect="light" v-cloak
                     @sort-change="tableDataSort" >
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
+            <el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
-            <el-table-column sortable prop="element" :show-overflow-tooltip="true"
+            <el-table-column :show-overflow-tooltip="true" prop="element"
                              :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
               </template>
             </el-table-column>
-            <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" class-name="costom-value"
+            <el-table-column :label="$t('dashboard.panel.chartTableColumn.value')" class-name="costom-value" min-width="90" prop="value"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
@@ -88,16 +88,16 @@
           </div>
           <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
                     @sort-change="tableDataSortScreen" tooltip-effect="light">
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
+            <el-table-column :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" prop="time"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
-            <el-table-column sortable prop="element" :show-overflow-tooltip="true"
+            <el-table-column :show-overflow-tooltip="true" prop="element"
                              :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
               </template>
             </el-table-column>
-            <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" class-name="costom-value"
+            <el-table-column :label="$t('dashboard.panel.chartTableColumn.value')" class-name="costom-value" min-width="90" prop="value"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}" >
@@ -117,488 +117,488 @@
 </template>
 
 <script>
-  import bus from '../../libs/bus';
-  import {Loading} from 'element-ui';
-  import chartDataFormat from './chartDataFormat'
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
+import bus from '../../libs/bus'
+import chartDataFormat from './chartDataFormat'
 
-  export default {
-    name: 'chartTable',
-    components: {
-      'loading': loading,
-      'time-picker': timePicker
+export default {
+  name: 'chartTable',
+  props: {
+    chartData: {
+      type: Object
     },
-    props: {
-      chartData: {
-        type: Object
-      },
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex: {
-        type: Number,
-        default: 0,
-      },
-      from: {type: String},
-      isLock:{type:Boolean,default:false}
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
     },
-    data() {
-      return {
-        tableHeight: 0,
-        data: {}, // 该图表信息,chartItem
-        unit: {},
-        isError: false,
-        errorContent: '',
-        pageSizes: [20, 50, 100],
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        screenPageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        storedTableDataOld: [],//原始信息
-        storedTableDataScreenOld: [],//全屏原始信息
-        storedTableData: [],
-        storedScreanTableData: [],
-        seriesItem: [], // 保存信息
-        seriesItemScreen: [],//全屏数据,
-        orderBy: null,//排序非全屏
-        orderByScreen: null,//排序全屏
-        images: '',
-        loading: Object,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [], // series数据组
-        },
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        chartType: 'table', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow: false,
-        dragTitleShow: false,
-        dropdownMenuShow: false,
-        divFirstShow: false,
-        columns: [
-          {
-            title: 'Element',
-            key: 'element',
-            sortable: true
-          }
-          , {
-            title: '采集时间',
-            key: 'time',
-            width: 160,
-            render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
-          }, {
-            title: '数值',
-            key: 'value',
-            width: 160,
-            sortable: true,
-            render: (h, params) => h('span', this.getNumStr(params.row.value)),
-          }],
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
-        mapping:{},
-      };
+    editChartId: {
+      type: String,
+      default: 'editChartId'
     },
-    created() {
-      this.pageObj.pageSize = this.pageSizes[0];
-      this.screenPageObj.pageSize = this.pageSizes[0];
+    chartIndex: {
+      type: Number,
+      default: 0
     },
-    computed: {},
-    watch: {
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      tableHeight: 0,
+      data: {}, // 该图表信息,chartItem
+      unit: {},
+      isError: false,
+      errorContent: '',
+      pageSizes: [20, 50, 100],
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      screenPageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      storedTableDataOld: [], // 原始信息
+      storedTableDataScreenOld: [], // 全屏原始信息
+      storedTableData: [],
+      storedScreanTableData: [],
+      seriesItem: [], // 保存信息
+      seriesItemScreen: [], // 全屏数据,
+      orderBy: null, // 排序非全屏
+      orderByScreen: null, // 排序全屏
+      images: '',
+      loading: Object,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [] // series数据组
+      },
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      chartType: 'table', // 图表类型
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+        start_time: '',
+        end_time: ''
+      },
+      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false,
+      columns: [
+        {
+          title: 'Element',
+          key: 'element',
+          sortable: true
+        },
+        {
+          title: '采集时间',
+          key: 'time',
+          width: 160,
+          render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss'))
+        }, {
+          title: '数值',
+          key: 'value',
+          width: 160,
+          sortable: true,
+          render: (h, params) => h('span', this.getNumStr(params.row.value))
+        }],
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
+      oldSearchTime: [],
+      mapping: {}
+    }
+  },
+  created () {
+    this.pageObj.pageSize = this.pageSizes[0]
+    this.screenPageObj.pageSize = this.pageSizes[0]
+  },
+  computed: {},
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
+    },
+    filterShowData (source, pageObj, from) {
+      let orderBy = null
+      let sourceData = null
+      if (from === 'series') {
+        sourceData = this.storedTableDataOld
+        orderBy = this.orderBy
+      }
+      if (from === 'seriesScreen') {
+        sourceData = this.storedTableDataScreenOld
+        orderBy = this.orderByScreen
+      }
+      if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
+        source = Object.assign([], sourceData)
+      } else { // 排序之后的顺序
+        if (orderBy.order === 'ascending') {
+          source = source.sort(this.$tableSet.asce(orderBy.prop))
+        }
+        if (orderBy.order === 'descending') {
+          source = source.sort(this.$tableSet.desc(orderBy.prop))
+        }
+      }
+      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
+    },
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    screenPageNo (val) {
+      this.screenPageObj.pageNo = val
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+    },
+    screenPageSize (val) {
+      this.screenPageObj.pageSize = val
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+    },
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].startLoading()
       }
     },
-    methods: {
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
-      },
-      filterShowData(source, pageObj, from) {
-        let orderBy = null;
-        let sourceData = null;
-        if (from === 'series') {
-          sourceData = this.storedTableDataOld;
-          orderBy = this.orderBy;
-        }
-        if (from === 'seriesScreen') {
-          sourceData = this.storedTableDataScreenOld;
-          orderBy = this.orderByScreen;
-        }
-        if (!orderBy || !orderBy.order) {//没有排序 恢复默认值
-          source = Object.assign([], sourceData);
-        } else {//排序之后的顺序
-          if (orderBy.order === 'ascending') {
-            source = source.sort(this.$tableSet.asce(orderBy.prop));
-          }
-          if (orderBy.order === 'descending') {
-            source = source.sort(this.$tableSet.desc(orderBy.prop));
-          }
-        }
-        return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
-
-      },
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      screenPageNo(val) {
-        this.screenPageObj.pageNo = val;
-        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-      },
-      screenPageSize(val) {
-        this.screenPageObj.pageSize = val;
-        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-      },
-      startLoading(area) {
-        if (area === 'screen') {
-          this.$refs['localLoadingScreen' + this.chartIndex].startLoading();
-        } else {
-          this.$refs['localLoading' + this.chartIndex].startLoading();
-        }
-      },
-      endLoading(area) {
-        if (area === 'screen') {
-          this.$refs['localLoadingScreen' + this.chartIndex].endLoading();
-        } else {
-          this.$refs['localLoading' + this.chartIndex].endLoading();
-        }
-      },
-      resize(chartItem) {
-        let deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight;
-        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
-        container.style.height = `calc(100% - ${deHeight * 2}px)`;
-        this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
-      },
-      showLoad(chartItem) {
-        //设置高度 chart-table
-        this.$nextTick(() => {
-          this.resize(chartItem);
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      screenRefreshChart(){
-        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow = false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow = false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow = false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      //全屏时间条件查询
-      dateChange(time) {
-        this.seriesItemScreen = [];
-        for (let i = 0; i < 8; i++) {
-          this.seriesItemScreen.push({//表格数据
-            element: '',
-            time: '',//采集时间
-            value: '',//数值
-          });
-        }
-        this.startLoading('screen');
-        this.$emit('on-search-data', this.data.id, this.searchTime);
-      },
-      clickos() {
-        this.dropdownMenuShow = false;
-      },
-      clearChart() {
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
-            }
-          });
-        });
-      },
-      // 全屏查看
-      showAllScreen() {
-        this.dropdownMenuShow = false;
-        // 初始化同步时间
-        this.searchTime = [];
-        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-        // this.$refs.calendarPanel.setCustomTime(this.searchTime);
-
-        this.seriesItemScreen = this.seriesItem;
-        this.screenModal = true;
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter, area, errorMsg) {
-        if (errorMsg && errorMsg !== '') {
-          this.isError = true;
-          this.errorContent = errorMsg;
-        } else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        this.data = chartItem;
-        this.unit = chartDataFormat.getUnit(this.data.unit);
-        let statistics = chartItem.param.statistics;
-        seriesItem = this.getStatisticsResult(statistics,seriesItem)
-        seriesItem && (seriesItem = seriesItem.map(item=>{
-          if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
-            let type=chartItem.param.valueMapping.type;
-            let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
-            let value = Number(item.value);
-
-            let mapping;
-            if(type == 'value'){
-              mapping=mappings.find(t=>{return Number(t.value) == value})
-            }else{
-              mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value});
-            }
-            this.mapping=mapping;
-            item.mapping=mapping;
-            item.value = mapping?mapping.text.replace('{{value}}', item.value).replace('{{name}}', item.element.alias):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
-          }
-          return item;
-        }));
-        if (area === 'showFullScreen') {//全屏按时间查询
-
-          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time;
-          // this.seriesItemScreen = seriesItem;
-          this.storedScreanTableData = seriesItem;
-          this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
-          this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
-          this.screenPageObj.total = this.storedScreanTableData.length;
-          this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen');
-          this.endLoading('screen');
-        } else {
-          //设置高度 chart-table
-          this.divFirstShow = true;
-          this.$nextTick(() => {
-            this.resize(chartItem);
-          });
-          this.firstShow = true; // 展示操作按键
-
-          this.panelIdInner = panelId;
-          this.storedTableData = seriesItem;
-          this.storedScreanTableData = seriesItem;
-          this.storedTableData = Object.assign([], this.storedTableData.reverse());
-          this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
-          this.storedTableDataOld = Object.assign([], this.storedTableData);
-          this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
-          this.pageObj.total = this.storedTableData.length;
-          this.screenPageObj.total = this.storedScreanTableData.length;
-          this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
-          this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-          if (filter) { // 保存数据,用于同步时间
-            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = filter.end_time;
-            this.oldSearchTime[0] = this.searchTime[0];
-            this.oldSearchTime[1] = this.searchTime[1];
-          }
-          this.endLoading();
-        }
-      },
-      getStatisticsResult(statistics,seriesItem){
-        if(!seriesItem||!seriesItem.length>0) return [];
-        if (!statistics) return seriesItem;
-        let copy=JSON.parse(JSON.stringify(seriesItem));
-        let last,result;
-        last=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[0];
-        switch (statistics) {
-          case 'null':
-            return copy.map(item=>{
-              return {
-                element:item.element,
-                time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-                value:item.data[1]
-              }
+    endLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    resize (chartItem) {
+      const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
+      const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
+      container.style.height = `calc(100% - ${deHeight * 2}px)`
+      this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`
+    },
+    showLoad (chartItem) {
+      // 设置高度 chart-table
+      this.$nextTick(() => {
+        this.resize(chartItem)
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    screenRefreshChart () {
+      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 全屏时间条件查询
+    dateChange (time) {
+      this.seriesItemScreen = []
+      for (let i = 0; i < 8; i++) {
+        this.seriesItemScreen.push({ // 表格数据
+          element: '',
+          time: '', // 采集时间
+          value: ''// 数值
+        })
+      }
+      this.startLoading('screen')
+      this.$emit('on-search-data', this.data.id, this.searchTime)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
             })
-          case 'min':
-            result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0];
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'max':
-            result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0];
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'average':
-            copy = copy.map(t=>parseFloat(t.data[1]));
-            let sum = eval(copy.join('+'));
-            let avg = sum / copy.length;
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:avg
-            }]
-            break;
-          case 'total':
-            copy = copy.map(t=>parseFloat(t.data[1]));
-            let total = eval(copy.join('+'));
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:total
-            }]
-            break;
-          case 'first':
-            result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'last':
-            result=last;
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'range':
-            let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})
-            let max = sort[0]
-            let min = sort[sort.length-1]
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:max.data[1] - min.data[1]
-            }]
-            break;
-          case 'different':
-            let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1];
-            result = [{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:last.data[1] - first.data[1]
-            }]
-            break;
-        }
-        return result;
-      },
-      // 数据排序
-      tableDataSort(item) {
-        this.orderBy = {order: item.order, prop: item.prop};
-        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
-      },
-      // 全屏数据排序
-      tableDataSortScreen(item) {
-        this.orderByScreen = {order: item.order, prop: item.prop};
-        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
-      },
-      dealLegendAlias: function (legend, expression) {
-        if (/\{\{.+\}\}/.test(expression)) {
-          let labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-            let label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-            let reg = new RegExp(label + '=".+?"')
-            let value = null;
-            if (reg.test(legend)) {
-              let find = legend.match(reg)[0];
-              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1);
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
-            return value ? value : label;
-          })
-          return labelValue
-        } else {
-          return expression;
-        }
-      },
-      // 获取格式
-      getNumStr(num) {
-        if (num) {
-          if (num >= 1000) {
-            const kbNum = num / 1000;
-            if (kbNum >= 1000) {
-              const mbNum = kbNum / 1000;
-              if (mbNum >= 1000) {
-                const gbNum = mbNum / 1000;
-                if (gbNum >= 1000) {
-                  const tbNum = gbNum / 1000;
-                  if (tbNum >= 1000) {
-                    const pbNum = tbNum / 1000;
-                    return `${pbNum.toFixed(2)}PB`;
-                  }
-                  return `${tbNum.toFixed(2)}TB`;
-                }
-                return `${gbNum.toFixed(2)}GB`;
-              }
-              return `${mbNum.toFixed(2)}MB`;
-            }
-            return `${kbNum.toFixed(2)}KB`;
           }
-          return num.toFixed(2);
+        })
+      })
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      // 初始化同步时间
+      this.searchTime = []
+      this.$set(this.searchTime, 0, this.oldSearchTime[0])
+      this.$set(this.searchTime, 1, this.oldSearchTime[1])
+      // this.$refs.calendarPanel.setCustomTime(this.searchTime);
+
+      this.seriesItemScreen = this.seriesItem
+      this.screenModal = true
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      this.data = chartItem
+      this.unit = chartDataFormat.getUnit(this.data.unit)
+      const statistics = chartItem.param.statistics
+      seriesItem = this.getStatisticsResult(statistics, seriesItem)
+      seriesItem && (seriesItem = seriesItem.map(item => {
+        if (chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
+          const type = chartItem.param.valueMapping.type
+          const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
+          const value = Number(item.value)
+
+          let mapping
+          if (type == 'value') {
+            mapping = mappings.find(t => { return Number(t.value) == value })
+          } else {
+            mapping = mappings.find(t => { return Number(t.from) <= value && Number(t.to) >= value })
+          }
+          this.mapping = mapping
+          item.mapping = mapping
+          item.value = mapping ? mapping.text.replace('{{value}}', item.value).replace('{{name}}', item.element.alias) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(value, null, 2)
         }
-        return num;
-      },
+        return item
+      }))
+      if (area === 'showFullScreen') { // 全屏按时间查询
+        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+        this.searchTime[1] = filter.end_time
+        // this.seriesItemScreen = seriesItem;
+        this.storedScreanTableData = seriesItem
+        this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse())
+        this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData)
+        this.screenPageObj.total = this.storedScreanTableData.length
+        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+        this.endLoading('screen')
+      } else {
+        // 设置高度 chart-table
+        this.divFirstShow = true
+        this.$nextTick(() => {
+          this.resize(chartItem)
+        })
+        this.firstShow = true // 展示操作按键
+
+        this.panelIdInner = panelId
+        this.storedTableData = seriesItem
+        this.storedScreanTableData = seriesItem
+        this.storedTableData = Object.assign([], this.storedTableData.reverse())
+        this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse())
+        this.storedTableDataOld = Object.assign([], this.storedTableData)
+        this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData)
+        this.pageObj.total = this.storedTableData.length
+        this.screenPageObj.total = this.storedScreanTableData.length
+        this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
+        this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+        if (filter) { // 保存数据,用于同步时间
+          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time
+          this.oldSearchTime[0] = this.searchTime[0]
+          this.oldSearchTime[1] = this.searchTime[1]
+        }
+        this.endLoading()
+      }
     },
-    mounted() {
-      this.firstLoad = false;
+    getStatisticsResult (statistics, seriesItem) {
+      if (!seriesItem || !seriesItem.length > 0) return []
+      if (!statistics) return seriesItem
+      let copy = JSON.parse(JSON.stringify(seriesItem))
+      const last = copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[0]
+      let result
+      switch (statistics) {
+        case 'null': {
+          return copy.map(item => {
+            return {
+              element: item.element,
+              time: bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value: item.data[1]
+            }
+          })
+        }
+        case 'min': {
+          result = copy.sort((x, y) => { return parseFloat(x.data[1]) - parseFloat(y.data[1]) })[0]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'max': {
+          result = copy.sort((x, y) => { return parseFloat(y.data[1]) - parseFloat(x.data[1]) })[0]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'average': {
+          copy = copy.map(t => parseFloat(t.data[1]))
+          const sum = eval(copy.join('+'))
+          const avg = sum / copy.length
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: avg
+          }]
+          break
+        }
+        case 'total': {
+          copy = copy.map(t => parseFloat(t.data[1]))
+          const total = eval(copy.join('+'))
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: total
+          }]
+          break
+        }
+        case 'first': {
+          result = copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[copy.length - 1]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'last': {
+          result = last
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'range': {
+          const sort = copy.sort((x, y) => { return parseFloat(y.data[1]) - parseFloat(x.data[1]) })
+          const max = sort[0]
+          const min = sort[sort.length - 1]
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: max.data[1] - min.data[1]
+          }]
+          break
+        }
+        case 'different': {
+          const first = copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[copy.length - 1]
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: last.data[1] - first.data[1]
+          }]
+          break
+        }
+      }
+      return result
     },
-    beforeDestroy() {
-      this.clearChart();
+    // 数据排序
+    tableDataSort (item) {
+      this.orderBy = { order: item.order, prop: item.prop }
+      this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
     },
-  };
+    // 全屏数据排序
+    tableDataSortScreen (item) {
+      this.orderByScreen = { order: item.order, prop: item.prop }
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取格式
+    getNumStr (num) {
+      if (num) {
+        if (num >= 1000) {
+          const kbNum = num / 1000
+          if (kbNum >= 1000) {
+            const mbNum = kbNum / 1000
+            if (mbNum >= 1000) {
+              const gbNum = mbNum / 1000
+              if (gbNum >= 1000) {
+                const tbNum = gbNum / 1000
+                if (tbNum >= 1000) {
+                  const pbNum = tbNum / 1000
+                  return `${pbNum.toFixed(2)}PB`
+                }
+                return `${tbNum.toFixed(2)}TB`
+              }
+              return `${gbNum.toFixed(2)}GB`
+            }
+            return `${mbNum.toFixed(2)}MB`
+          }
+          return `${kbNum.toFixed(2)}KB`
+        }
+        return num.toFixed(2)
+      }
+      return num
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/charts/chart-url.vue b/nezha-fronted/src/components/charts/chart-url.vue
index 56d4d55ed..59c34f981 100644
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -57,252 +57,246 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
-import chartDataFormat from './chartDataFormat'
-import loading from "../common/loading";
+import loading from '../common/loading'
 
 export default {
   name: 'chartUrl',
   components: {
-    'loading': loading,
+    loading: loading
   },
   props: {
-    chartData: {
-      type: Object
-    },
     chartData: {
       type: Object
     },
     // 看板id
     panelId: {
       type: Number,
-      default: 0,
+      default: 0
     },
     editChartId: {
       type: String,
-      default: 'editChartId',
+      default: 'editChartId'
     },
-    chartIndex:{
+    chartIndex: {
       type: Number,
-      default: 0,
+      default: 0
     },
-    from: {type: String},
-    isLock:{type:Boolean,default:false}
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
   },
-  data() {
+  data () {
     return {
       data: {}, // 该图表信息,chartItem
-      unit:{},
+      unit: {},
 
       images: '',
-      loading:Object,
+      loading: Object,
       panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
       firstLoad: false, // 是否第一次加载
       screenModal: false,
       firstShow: false, // 默认不显示操作按钮,
-      caretShow:false,
-      dragTitleShow:false,
-      dropdownMenuShow:false,
-      minHeight:200,
-      chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight:38,//title-height:28,magrin-bottom:10
-      paddingBottom:6,
-      divFirstShow:false,
-      showStatic:false,
-    };
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      minHeight: 200,
+      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
+      titleHeight: 38, // title-height:28,magrin-bottom:10
+      paddingBottom: 6,
+      divFirstShow: false,
+      showStatic: false
+    }
   },
   methods: {
-    startResize(e) {
-      let vm = this;
-      this.$chartResizeTool.start(vm, this.chartData, e);
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.chartData, e)
     },
-    resize(chartItem) {
-      let chartBox = document.getElementById('chartUrlDiv'+this.chartIndex);
-      chartBox.querySelector(".url-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
+    resize (chartItem) {
+      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
+      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
     },
-    showLoad(chartItem) {
-      this.data = chartItem;
-      this.panelIdInner = this.panelId;
-      //设置高度
+    showLoad (chartItem) {
+      this.data = chartItem
+      this.panelIdInner = this.panelId
+      // 设置高度
       this.$nextTick(() => {
-        this.resize(chartItem);
-      });
-      this.startLoading();
+        this.resize(chartItem)
+      })
+      this.startLoading()
 
-      if(/\{\{.*?\}\}/g.test(this.data.param.url)){
-        this.showStatic=true;
-        this.setStaticContent();
-      }else{
-        this.showStatic=false;
-        this.setLoadFrame();
+      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
+        this.showStatic = true
+        this.setStaticContent()
+      } else {
+        this.showStatic = false
+        this.setLoadFrame()
       }
-      this.divFirstShow = true;
+      this.divFirstShow = true
     },
-    setStaticContent:function(){
-      let that = this;
+    setStaticContent: function () {
+      const that = this
       this.$nextTick(() => {
-        let staticDiv = document.querySelector('#staticContainer'+this.chartIndex);
-        staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true;
-        that.endLoading();
-      });
+        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
+        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+        that.firstShow = true
+        that.endLoading()
+      })
     },
-    setLoadFrame(){
-      let that = this;
+    setLoadFrame () {
+      const that = this
       this.$nextTick(() => {
-        let iframe = document.querySelector('#urlContainer'+this.chartIndex);
+        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
         // 处理兼容行问题
         if (iframe.attachEvent) {
           iframe.attachEvent('onload', function () {
             // iframe加载完毕以后执行操作
-            that.firstShow = true;
+            that.firstShow = true
             // console.log('iframe已加载完毕');
-            that.endLoading();
+            that.endLoading()
           })
         } else {
           iframe.onload = function () {
             // iframe加载完毕以后执行操作
-            that.firstShow = true;
+            that.firstShow = true
             // console.log('iframe已加载完毕');
-            that.endLoading();
+            that.endLoading()
           }
         }
-        iframe.src = that.data.param.url;
-      });
+        iframe.src = that.data.param.url
+      })
     },
-    initDialog(){
-      this.startLoading('screen');
-      if(/\{\{.*?\}\}/g.test(this.data.param.url)){
-        this.showStatic=true;
-        this.setStaticContentFull();
-      }else{
-        this.showStatic=false;
-        this.setLoadFrameFull();
-      }
-
-    },
-    startLoading(area){
-      if(area==='screen'){
-        this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-      }else {
-        this.$refs['localLoading'+this.chartIndex].startLoading();
+    initDialog () {
+      this.startLoading('screen')
+      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
+        this.showStatic = true
+        this.setStaticContentFull()
+      } else {
+        this.showStatic = false
+        this.setLoadFrameFull()
       }
     },
-    endLoading(area){
-      if(area==='screen'){
-        this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-      }else {
-        this.$refs['localLoading'+this.chartIndex].endLoading();
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].startLoading()
       }
     },
-    clearChart(){
-      this.data = {};
+    endLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
     },
-    screenRefreshChart(){
-     ('urlContainerFull'+this.chartIndex).window.location.reload()
+    clearChart () {
+      this.data = {}
+    },
+    screenRefreshChart () {
+      ('urlContainerFull' + this.chartIndex).window.location.reload()
     },
     // 重新请求数据 刷新操作-local
-    refreshChart() {
-        this.dropdownMenuShow=false;
-        this.startLoading();
-        this.firstShow = false;
-        let iframe = document.querySelector('#urlContainer'+this.chartIndex);
-        iframe.src = '';
-        iframe.src = this.data.param.url;
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      const iframe = document.querySelector('#urlContainer' + this.chartIndex)
+      iframe.src = ''
+      iframe.src = this.data.param.url
     },
     // 编辑图表
-    editChart() {
-      this.dropdownMenuShow=false;
-      this.$emit('on-edit-chart-block', this.data.id);
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
     },
     // 删除该图表
-    removeChart() {
-      this.dropdownMenuShow=false;
-      this.$emit('on-remove-chart-block', this.data.id);
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
     },
-    clickos() {
-      this.dropdownMenuShow=false;
+    clickos () {
+      this.dropdownMenuShow = false
     },
     // 全屏查看
-    showAllScreen() {
-      this.dropdownMenuShow=false;
-      this.screenModal = true;
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.screenModal = true
     },
-    duplicate(){
-      this.dropdownMenuShow=false;
-      this.$confirm(this.$t("tip.confirmDuplicate"), {
-        confirmButtonText: this.$t("tip.yes"),
-        cancelButtonText: this.$t("tip.no"),
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
         type: 'info'
       }).then(() => {
-        const param = {id:this.data.id};
-        this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
           if (response.code === 200) {
             this.$message({
               duration: 2000,
               type: 'success',
-              message: this.$t("tip.duplicateSuccess")
-            });
-            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-          }else {
-            if(response.msg){
-              this.$message.error(response.msg);
-            }else if(response.error){
-              this.$message.error(response.error);
-            }else {
-              this.$message.error(response);
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
           }
-        });
-      });
+        })
+      })
     },
-    setLoadFrameFull(){
-      let that = this;
+    setLoadFrameFull () {
+      const that = this
       this.$nextTick(() => {
-        let iframe = document.querySelector('#urlContainerFull'+this.chartIndex);
+        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
 
         // 处理兼容行问题
         if (iframe.attachEvent) {
           iframe.attachEvent('onload', function () {
             // iframe加载完毕以后执行操作
-            that.firstShow = true;
+            that.firstShow = true
             // console.log('iframe已加载完毕');
-            that.endLoading('screen');
+            that.endLoading('screen')
           })
         } else {
           iframe.onload = function () {
             // iframe加载完毕以后执行操作
-            that.firstShow = true;
+            that.firstShow = true
             // console.log('iframe已加载完毕');
-            that.endLoading('screen');
+            that.endLoading('screen')
           }
         }
 
-        iframe.src = this.data.param.url;
-      });
+        iframe.src = this.data.param.url
+      })
     },
-    setStaticContentFull:function(){
-      let that = this;
+    setStaticContentFull: function () {
+      const that = this
       this.$nextTick(() => {
-        let staticDiv = document.querySelector('#staticContainerFull'+this.chartIndex);
-        staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true;
-        that.endLoading('screen');
-      });
-    },
-  },
-  watch: {
-    dropdownMenuShow(n) {
-      this.$emit("dropmenu-change", n);
+        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
+        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+        that.firstShow = true
+        that.endLoading('screen')
+      })
     }
   },
-  mounted() {
-    this.firstLoad = false;
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
   },
-  beforeDestroy() {
-    this.clearChart();
+  mounted () {
+    this.firstLoad = false
   },
-};
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
 <style>
   .center-content .content-static-url{
diff --git a/nezha-fronted/src/components/charts/chartDataFormat.js b/nezha-fronted/src/components/charts/chartDataFormat.js
index 339f5c3f3..6f0e2ed75 100644
--- a/nezha-fronted/src/components/charts/chartDataFormat.js
+++ b/nezha-fronted/src/components/charts/chartDataFormat.js
@@ -3,310 +3,289 @@
 * index:yAxis 默认第二个参数 y轴的位置
 * type:自定义参数，用于区分是y轴调用还是tooltip调用,以设置不同精度  type =1 y轴调用 type=2 tooltip调用
 * */
-import bus from "../../libs/bus"
+import bus from '../../libs/bus'
 
-function none(value, index){
-  return value;
+function none (value, index) {
+  return value
 }
-function short(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],dot)
-  }else{
-    return asciiCompute(value,1000,[' ','K','Mil','Bil','Til','Quadrillion','Quintillion'],2)
+function short (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion'], dot)
+  } else {
+    return asciiCompute(value, 1000, [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion'], 2)
   }
-
 }
-function percent01(value,index){
-  value=parseFloat((new Number(value)).toPrecision(12));
-  return `${value} %`;
+function percent01 (value, index) {
+  value = parseFloat((Number(value)).toPrecision(12))
+  return `${value} %`
 }
-function percent02(value,index){
-  value=parseFloat((new Number(value)*100).toPrecision(12));
-  return `${value} %`;
+function percent02 (value, index) {
+  value = parseFloat((Number(value) * 100).toPrecision(12))
+  return `${value} %`
 }
-function localFormat(value,index){
-  let num = (value || 0).toString();
-  let result = '';
+function localFormat (value, index) {
+  let num = (value || 0).toString()
+  let result = ''
   while (num.length > 3) {
-    result = ',' + num.slice(-3) + result;
-    num = num.slice(0, num.length - 3);
+    result = ',' + num.slice(-3) + result
+    num = num.slice(0, num.length - 3)
   }
-  if (num) { result = num + result; }
-  return result;
+  if (num) { result = num + result }
+  return result
 }
-function bits(value,index,type=1,dot=0){
-  if(type == 1){
-    return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
+function bits (value, index, type = 1, dot = 0) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['b', 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['b', 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['b', 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function bytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
-  }
-
-}
-function kilobytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],2)
-  }
-
-}
-function megabytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],2)
-  }
-
-}
-function gigabytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],2)
+function bytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function terabytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],2)
+function kilobytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function petabytes(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1024,['PB','EB','ZB','YB'],0)
-  }else if(type == -1){
-    return asciiCompute(value,1024,['PB','EB','ZB','YB'],dot)
-  }else{
-    return asciiCompute(value,1024,['PB','EB','ZB','YB'],2)
+function megabytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function packetsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],dot)
-  }else{
-    return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],2)
+function gigabytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function bitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],dot)
-  }else{
-    return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],2)
+function terabytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['TB', 'PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['TB', 'PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['TB', 'PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function bytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
+function petabytes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1024, ['PB', 'EB', 'ZB', 'YB'], 0)
+  } else if (type == -1) {
+    return asciiCompute(value, 1024, ['PB', 'EB', 'ZB', 'YB'], dot)
+  } else {
+    return asciiCompute(value, 1024, ['PB', 'EB', 'ZB', 'YB'], 2)
   }
 }
-function kilobytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+function packetsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['pps', 'Kpps', 'Mpps', 'Gpps', 'Tpps', 'Ppps', 'Epps', 'Zpps', 'Ypps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['pps', 'Kpps', 'Mpps', 'Gpps', 'Tpps', 'Ppps', 'Epps', 'Zpps', 'Ypps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['pps', 'Kpps', 'Mpps', 'Gpps', 'Tpps', 'Ppps', 'Epps', 'Zpps', 'Ypps'], 2)
   }
 }
-function kilobitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
-  }else{
-    return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
+function bitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Epps', 'Zpps', 'Ypps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Epps', 'Zpps', 'Ypps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Epps', 'Zpps', 'Ypps'], 2)
   }
-
 }
-function megabytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
+function bytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Bs', 'KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Bs', 'KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Bs', 'KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 2)
   }
-
 }
-function megabitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
-  }else{
-    return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
+function kilobytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['KBs', 'MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
   }
-
 }
-function gigabytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],2)
+function kilobitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 2)
   }
-
 }
-function gigabitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
-  }else{
-    return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
+function megabytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['MBs', 'GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 2)
   }
-
 }
-function terabytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],2)
+function megabitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 2)
   }
-
 }
-function terabitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],dot)
-  }else{
-    return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],2)
+function gigabytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['GBs', 'TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 2)
   }
-
 }
-function petabytesSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],dot)
-  }else{
-    return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],2)
+function gigabitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 2)
   }
-
 }
-function petabitsSec(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],1)
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],dot)
-  }else{
-    return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],2)
+function terabytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['TBs', 'PBs', 'EBs', 'ZBs', 'YBs'], 2)
   }
-
 }
-function Hertz(value,index,type=1,dot){
-  if(type == 1){
-    return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],1);
-  }else if(type == -1){
-    return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],dot);
-  }else{
-    return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],2);
+function terabitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'], 2)
   }
-
 }
-function nanoseconds(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'ns');
-  }else if(type == -1){
-    return timeCompute(value,'ns',dot);
-  }else{
-    return timeCompute(value,'ns',2);
+function petabytesSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['PBs', 'EBs', 'ZBs', 'YBs'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['PBs', 'EBs', 'ZBs', 'YBs'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['PBs', 'EBs', 'ZBs', 'YBs'], 2)
   }
-
 }
-function microseconds(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'us')
-  }else if(type == -1){
-    return timeCompute(value,'us',dot)
-  }else{
-    return timeCompute(value,'us',2)
+function petabitsSec (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Pbps', 'Ebps', 'Zbps', 'Ybps'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Pbps', 'Ebps', 'Zbps', 'Ybps'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Pbps', 'Ebps', 'Zbps', 'Ybps'], 2)
   }
-
 }
-function milliseconds(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'ms')
-  }else if(type == -1){
-    return timeCompute(value,'ms',dot)
-  }else{
-    return timeCompute(value,'ms',2)
+function Hertz (value, index, type = 1, dot) {
+  if (type == 1) {
+    return asciiCompute(value, 1000, ['Hz', 'KHz', 'MHz', 'GHz', 'THz', 'PHz', 'EHz', 'ZHz', 'YHz'], 1)
+  } else if (type == -1) {
+    return asciiCompute(value, 1000, ['Hz', 'KHz', 'MHz', 'GHz', 'THz', 'PHz', 'EHz', 'ZHz', 'YHz'], dot)
+  } else {
+    return asciiCompute(value, 1000, ['Hz', 'KHz', 'MHz', 'GHz', 'THz', 'PHz', 'EHz', 'ZHz', 'YHz'], 2)
   }
-
 }
-function seconds(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'s');
-  }else if(type == -1){
-    return timeCompute(value,'s',dot);
-  }else{
-    return timeCompute(value,'s',2);
+function nanoseconds (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'ns')
+  } else if (type == -1) {
+    return timeCompute(value, 'ns', dot)
+  } else {
+    return timeCompute(value, 'ns', 2)
   }
-
 }
-function minutes(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'m');
-  }else if(type == -1){
-    return timeCompute(value,'m',dot);
-  }else{
-    return timeCompute(value,'m',2);
+function microseconds (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'us')
+  } else if (type == -1) {
+    return timeCompute(value, 'us', dot)
+  } else {
+    return timeCompute(value, 'us', 2)
   }
-
 }
-function hours(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'h');
-  }else if(type == -1){
-    return timeCompute(value,'h',dot);
-  }else{
-    return timeCompute(value,'h',2);
+function milliseconds (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'ms')
+  } else if (type == -1) {
+    return timeCompute(value, 'ms', dot)
+  } else {
+    return timeCompute(value, 'ms', 2)
   }
-
 }
-function days(value,index,type=1,dot){
-  if(type == 1){
-    return timeCompute(value,'day');
-  }else if(type == -1){
-    return timeCompute(value,'day',dot);
-  }else{
-    return timeCompute(value,'day',3);
+function seconds (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 's')
+  } else if (type == -1) {
+    return timeCompute(value, 's', dot)
+  } else {
+    return timeCompute(value, 's', 2)
+  }
+}
+function minutes (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'm')
+  } else if (type == -1) {
+    return timeCompute(value, 'm', dot)
+  } else {
+    return timeCompute(value, 'm', 2)
+  }
+}
+function hours (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'h')
+  } else if (type == -1) {
+    return timeCompute(value, 'h', dot)
+  } else {
+    return timeCompute(value, 'h', 2)
+  }
+}
+function days (value, index, type = 1, dot) {
+  if (type == 1) {
+    return timeCompute(value, 'day')
+  } else if (type == -1) {
+    return timeCompute(value, 'day', dot)
+  } else {
+    return timeCompute(value, 'day', 3)
   }
-
 }
 /*
 * 一般数值格式化方法
@@ -315,473 +294,472 @@ function days(value,index,type=1,dot){
 * units：单位列表
 * dot：保留的小数位，
 * */
-function asciiCompute(num,ascii,units,dot=2){
-  if(!num && num!==0 && num!=='0'){
+function asciiCompute (num, ascii, units, dot = 2) {
+  if (!num && num !== 0 && num !== '0') {
     return ''
   }
-  num=Number(num);
-  let carry=0;
-  if(num > 1){
-    let log=Math.log(num)/Math.log(ascii);
+  num = Number(num)
+  let carry = 0
+  if (num > 1) {
+    const log = Math.log(num) / Math.log(ascii)
     carry = parseInt(log)
-    num = num / Math.pow(ascii,carry)
+    num = num / Math.pow(ascii, carry)
   }
-  if(Number.isInteger(num)){
-    return num +' '+units[carry];
-  }else{
-    return num.toFixed(dot) +' '+units[carry];
+  if (Number.isInteger(num)) {
+    return num + ' ' + units[carry]
+  } else {
+    return num.toFixed(dot) + ' ' + units[carry]
   }
 }
-function asciiCompute2(num,ascii,units,dot=2,unitIndex=0){
-  num=Number(num)
-  let quotient=num / ascii;
-  if(unitIndex <= units.length-1){
-    if(quotient <1 ){ //不足以进位
-      let toFixed=parseFloat(num.toFixed(dot));
-      if(toFixed == 0){
+// eslint-disable-next-line no-unused-vars
+function asciiCompute2 (num, ascii, units, dot = 2, unitIndex = 0) {
+  num = Number(num)
+  const quotient = num / ascii
+  if (unitIndex <= units.length - 1) {
+    if (quotient < 1) { // 不足以进位
+      const toFixed = parseFloat(num.toFixed(dot))
+      if (toFixed == 0) {
         return `${num} ${units[unitIndex]}`
-      }else{
-        return `${num.toFixed(dot)} ${units[unitIndex]}`;
+      } else {
+        return `${num.toFixed(dot)} ${units[unitIndex]}`
       }
-    }else if(quotient >= 1 && quotient <10){ //可以进位，但是又不足以更进一位
-      if(unitIndex >= units.length-1){
-        unitIndex++;
-        return asciiCompute(num,ascii,units,dot,unitIndex);
-      }else{
-        unitIndex++;
-        return `${quotient.toFixed(dot)} ${units[unitIndex]}`;
+    } else if (quotient >= 1 && quotient < 10) { // 可以进位，但是又不足以更进一位
+      if (unitIndex >= units.length - 1) {
+        unitIndex++
+        return asciiCompute(num, ascii, units, dot, unitIndex)
+      } else {
+        unitIndex++
+        return `${quotient.toFixed(dot)} ${units[unitIndex]}`
       }
-    } else{ //可以更进一位
-      if(unitIndex >=  units.length-1){
-        unitIndex++;
-        return asciiCompute(num,ascii,units,dot,unitIndex);
-      }else{
-        unitIndex++;
-        num=quotient;
-        return asciiCompute(num,ascii,units,dot,unitIndex);
+    } else { // 可以更进一位
+      if (unitIndex >= units.length - 1) {
+        unitIndex++
+        return asciiCompute(num, ascii, units, dot, unitIndex)
+      } else {
+        unitIndex++
+        num = quotient
+        return asciiCompute(num, ascii, units, dot, unitIndex)
       }
     }
-  }else{
-    return `${num.toFixed(2)} ${units[units.length-1]}`;
+  } else {
+    return `${num.toFixed(2)} ${units[units.length - 1]}`
   }
-
 }
 /*
 * 时间格式化方法
 * value:需要格式化的数值
 * unit:设置的单位
 * */
-function timeCompute(value,unit,dot=0){
-  if(unit == 'year'){
-    return `${value.toFixed(dot)} ${unit}`;
+function timeCompute (value, unit, dot = 0) {
+  if (unit == 'year') {
+    return `${value.toFixed(dot)} ${unit}`
   }
-  let units=[
-    {unit:'ns',ascii:1},
-    {unit:'us',ascii:1000},
-    {unit:'ms',ascii:1000},
-    {unit:'s',ascii:60},
-    {unit:'m',ascii:60},
-    {unit:'h',ascii:24},
-    {unit:'day',ascii:7},
-    {unit:'week',ascii:52},
-    {unit:'year',ascii:''}
+  const units = [
+    { unit: 'ns', ascii: 1 },
+    { unit: 'us', ascii: 1000 },
+    { unit: 'ms', ascii: 1000 },
+    { unit: 's', ascii: 60 },
+    { unit: 'm', ascii: 60 },
+    { unit: 'h', ascii: 24 },
+    { unit: 'day', ascii: 7 },
+    { unit: 'week', ascii: 52 },
+    { unit: 'year', ascii: '' }
   ]
-  for(let i in units){
-    let u = units[i];
-    if(u.unit == unit){ //找到最小单位
-      let result = (time,minUnit)=>{
-        if(minUnit.unit == 'year'){
-          if(Number.isInteger(time)) {
-            dot=0;
+  for (let i in units) {
+    const u = units[i]
+    if (u.unit == unit) { // 找到最小单位
+      const result = (time, minUnit) => {
+        if (minUnit.unit == 'year') {
+          if (Number.isInteger(time)) {
+            dot = 0
           }
           return `${time.toFixed(dot)} ${minUnit.unit}`
         }
-        let quotient = time / minUnit.ascii;
-        if(quotient < 1){
-          if(Number.isInteger(time)) {
-            dot=0;
+        const quotient = time / minUnit.ascii
+        if (quotient < 1) {
+          if (Number.isInteger(time)) {
+            dot = 0
           }
-          return `${Number(time).toFixed(dot)} ${minUnit.unit}`;
-        }else{
-          minUnit = units[++i];
-          return result(quotient,minUnit);
+          return `${Number(time).toFixed(dot)} ${minUnit.unit}`
+        } else {
+          minUnit = units[++i]
+          return result(quotient, minUnit)
         }
       }
-      return result(value,u);
+      return result(value, u)
     }
   }
 }
 
-function timeFormat34(value) {
-  return bus.timeFormate(parseInt(value), "yyyy-MM-dd hh:mm:ss");
+function timeFormat34 (value) {
+  return bus.timeFormate(parseInt(value), 'yyyy-MM-dd hh:mm:ss')
 }
-function timeFormat35(value) {
-  return bus.timeFormate(parseInt(value), "MM/dd/yyyy h:mm:ss a");
+function timeFormat35 (value) {
+  return bus.timeFormate(parseInt(value), 'MM/dd/yyyy h:mm:ss a')
 }
-//unit转化配置信息
+// unit转化配置信息
 /*
 * value:传递给数据库的值
 * label：下拉选显示的名字
 * compute：用于格式化计算的方法，返回一个string类型的串
 * */
-let unitOptions=[
-  {//Misc start
-    value:'Misc',
-    label:'Misc',
-    children:[
-      {
-        value:1,
-        compute:none,
-        label:'none'
-      },
-      {
-        value:2,
-        compute:short,
-        label:'short'
-      },
-      {
-        value:3,
-        compute:percent01,
-        label:'percent(0-100)'
-      },
-      {
-        value:4,
-        compute:percent02,
-        label:'percent(0.0-1.0)'
-      },
-      {
-        value:5,
-        compute:localFormat,
-        label:'local format'
-      }
-    ]
-  },//Misc end
-  {//Data start
-    value:'Data',
-    label:'Data',
+const unitOptions = [
+  { // Misc start
+    value: 'Misc',
+    label: 'Misc',
     children: [
       {
-        value:6,
-        compute:bits,
-        label:'bits',
+        value: 1,
+        compute: none,
+        label: 'none'
       },
       {
-        value:7,
-        compute:bytes,
-        label:'bytes',
+        value: 2,
+        compute: short,
+        label: 'short'
       },
       {
-        value:8,
-        compute:kilobytes,
-        label:'kilobytes',
+        value: 3,
+        compute: percent01,
+        label: 'percent(0-100)'
       },
       {
-        value:9,
-        compute:megabytes,
-        label:'megabytes',
+        value: 4,
+        compute: percent02,
+        label: 'percent(0.0-1.0)'
       },
       {
-        value:10,
-        compute:gigabytes,
-        label:'gigabytes',
-      },
-      {
-        value:11,
-        compute:terabytes,
-        label:'terabytes',
-      },
-      {
-        value:12,
-        compute:petabytes,
-        label:'petabytes',
+        value: 5,
+        compute: localFormat,
+        label: 'local format'
       }
     ]
-  },//Data end
-  {//DataRate start
-    value:'DataRate',
-    label:'DataRate',
+  }, // Misc end
+  { // Data start
+    value: 'Data',
+    label: 'Data',
     children: [
       {
-        value:13,
-        compute:packetsSec,
-        label:'packets/sec',
+        value: 6,
+        compute: bits,
+        label: 'bits'
       },
       {
-        value:14,
-        compute:bitsSec,
-        label:'bits/sec',
+        value: 7,
+        compute: bytes,
+        label: 'bytes'
       },
       {
-        value:15,
-        compute:bytesSec,
-        label:'bytes/sec',
+        value: 8,
+        compute: kilobytes,
+        label: 'kilobytes'
       },
       {
-        value:16,
-        compute:kilobytesSec,
-        label:'kilobytes/sec',
+        value: 9,
+        compute: megabytes,
+        label: 'megabytes'
       },
       {
-        value:17,
-        compute:kilobitsSec,
-        label:'kilobits/sec',
+        value: 10,
+        compute: gigabytes,
+        label: 'gigabytes'
       },
       {
-        value:18,
-        compute:megabytesSec,
-        label:'megabytes/sec',
+        value: 11,
+        compute: terabytes,
+        label: 'terabytes'
       },
       {
-        value:19,
-        compute:megabitsSec,
-        label:'megabits/sec',
-      },
-      {
-        value:20,
-        compute:gigabytesSec,
-        label:'gigabytes/sec',
-      },
-      {
-        value:21,
-        compute:gigabitsSec,
-        label:'gigabits/sec',
-      },
-      {
-        value:22,
-        compute:terabytesSec,
-        label:'terabytes/sec'
-      },
-      {
-        value:23,
-        compute:terabitsSec,
-        label:'terabits/sec'
-      },
-      {
-        value:24,
-        compute:petabytesSec,
-        label:'petabytes/sec'
-      },
-      {
-        value:25,
-        compute:petabitsSec,
-        label:'petabits/sec'
+        value: 12,
+        compute: petabytes,
+        label: 'petabytes'
       }
     ]
-  },//DataRate end
-  {//Time start
-    value:'Time',
+  }, // Data end
+  { // DataRate start
+    value: 'DataRate',
+    label: 'DataRate',
+    children: [
+      {
+        value: 13,
+        compute: packetsSec,
+        label: 'packets/sec'
+      },
+      {
+        value: 14,
+        compute: bitsSec,
+        label: 'bits/sec'
+      },
+      {
+        value: 15,
+        compute: bytesSec,
+        label: 'bytes/sec'
+      },
+      {
+        value: 16,
+        compute: kilobytesSec,
+        label: 'kilobytes/sec'
+      },
+      {
+        value: 17,
+        compute: kilobitsSec,
+        label: 'kilobits/sec'
+      },
+      {
+        value: 18,
+        compute: megabytesSec,
+        label: 'megabytes/sec'
+      },
+      {
+        value: 19,
+        compute: megabitsSec,
+        label: 'megabits/sec'
+      },
+      {
+        value: 20,
+        compute: gigabytesSec,
+        label: 'gigabytes/sec'
+      },
+      {
+        value: 21,
+        compute: gigabitsSec,
+        label: 'gigabits/sec'
+      },
+      {
+        value: 22,
+        compute: terabytesSec,
+        label: 'terabytes/sec'
+      },
+      {
+        value: 23,
+        compute: terabitsSec,
+        label: 'terabits/sec'
+      },
+      {
+        value: 24,
+        compute: petabytesSec,
+        label: 'petabytes/sec'
+      },
+      {
+        value: 25,
+        compute: petabitsSec,
+        label: 'petabits/sec'
+      }
+    ]
+  }, // DataRate end
+  { // Time start
+    value: 'Time',
     label: 'Time',
     children: [
       {
-        value:26,
-        compute:Hertz,
-        label:'Hertz (1/s)',
-        ascii:1,
+        value: 26,
+        compute: Hertz,
+        label: 'Hertz (1/s)',
+        ascii: 1
       },
       {
-        value:27,
-        compute:nanoseconds,
-        label:'nanoseconds (ns)',
-        ascii:1000,
+        value: 27,
+        compute: nanoseconds,
+        label: 'nanoseconds (ns)',
+        ascii: 1000
       },
       {
-        value:28,
-        compute:microseconds,
-        label:'microseconds (us)',
-        ascii:1000,
+        value: 28,
+        compute: microseconds,
+        label: 'microseconds (us)',
+        ascii: 1000
       },
       {
-        value:29,
-        compute:milliseconds,
-        label:'milliseconds (ms)',
-        ascii:60,
+        value: 29,
+        compute: milliseconds,
+        label: 'milliseconds (ms)',
+        ascii: 60
       },
       {
-        value:30,
-        compute:seconds,
-        label:'seconds (s)',
-        ascii:60,
+        value: 30,
+        compute: seconds,
+        label: 'seconds (s)',
+        ascii: 60
       },
       {
-        value:31,
-        compute:minutes,
-        label:'minutes (m)',
-        ascii:60,
+        value: 31,
+        compute: minutes,
+        label: 'minutes (m)',
+        ascii: 60
       },
       {
-        value:32,
-        compute:hours,
-        label:'hours (h)',
-        ascii:24,
+        value: 32,
+        compute: hours,
+        label: 'hours (h)',
+        ascii: 24
       },
       {
-        value:33,
-        compute:days,
-        label:'days (d)',
-        ascii:7,
-      },
+        value: 33,
+        compute: days,
+        label: 'days (d)',
+        ascii: 7
+      }
     ]
-  },//Time end
+  }, // Time end
   {
-    value:'Date&Time',
+    value: 'Date&Time',
     label: 'Date & Time',
     children: [
       {
-        value:34,
+        value: 34,
         compute: timeFormat34,
-        label:'YYYY-MM-DD HH:mm:ss',
+        label: 'YYYY-MM-DD HH:mm:ss'
       },
       {
-        value:35,
+        value: 35,
         compute: timeFormat35,
-        label:'MM/DD/YYYY h:mm:ss a',
+        label: 'MM/DD/YYYY h:mm:ss a'
       }
     ]
   }
 ]
-let units=[];
-window.onload=function(){
-  if(units.length <1){
-    unitOptions.forEach((item,index)=>{
-      item.children.forEach((n,i)=>{
-        units.push(n);
+const units = []
+window.onload = function () {
+  if (units.length < 1) {
+    unitOptions.forEach((item, index) => {
+      item.children.forEach((n, i) => {
+        units.push(n)
       })
     })
   }
 }
 
 export default {
-  unitOptions:function(){
-    return unitOptions;
+  unitOptions: function () {
+    return unitOptions
   },
-  getUnit:function(index){
-    if(units.length < 1){
-      unitOptions.forEach((item,index)=>{
-        item.children.forEach((n,i)=>{
-          units.push({...n,type:item.label});
+  getUnit: function (index) {
+    if (units.length < 1) {
+      unitOptions.forEach((item, index) => {
+        item.children.forEach((n, i) => {
+          units.push({ ...n, type: item.label })
         })
       })
     }
-    return units[index-1];
+    return units[index - 1]
   },
-  formatData:function(value,unit){
-    return this.getUnit(unit).compute(value,null,2)
+  formatData: function (value, unit) {
+    return this.getUnit(unit).compute(value, null, 2)
   },
-  formatDatas:function(value,type,flow='ceil',ascii){
-    let pow=0;
-    if(value<1&&value!=0){
-      while(value<1){
-        pow++;
-        value=value*10;
+  formatDatas: function (value, type, flow = 'ceil', ascii) {
+    let pow = 0
+    if (value < 1 && value != 0) {
+      while (value < 1) {
+        pow++
+        value = value * 10
       }
-      return Math.ceil(value+1)/Math.pow(10,pow);
+      return Math.ceil(value + 1) / Math.pow(10, pow)
     }
-    if(type ==='Time'){
-        return value
+    if (type === 'Time') {
+      return value
     }
 
-    if(type==='Data'){
-     if(value>1){
-       while(value>1024){
-         pow++;
-         value=value/1024
-       }
-
-       if(flow==='ceil'){
-         let length=JSON.stringify(Math.ceil(value)).length;
-         value=value/Math.pow(10,length-1);
-         return Math.ceil(value)*Math.pow(1024,pow)*Math.pow(10,length-1);
-       }else if(flow==='floor'){
-         let length=JSON.stringify(Math.floor(value)).length;
-         value=value/Math.pow(10,length-1);
-         return Math.floor(value)*Math.pow(1024,pow)*Math.pow(10,length-1);
-       }
-     }else{
-       return value
-     }
-    }
-
-    if(type==='Misc' || type==='DataRate'){
-      if(value>1){
-        while(value>1000){
-          pow++;
-          value=value/1000
+    if (type === 'Data') {
+      if (value > 1) {
+        while (value > 1024) {
+          pow++
+          value = value / 1024
         }
 
-        if(flow==='ceil'){
-          let length=JSON.stringify(Math.ceil(value)).length;
-          value=value/Math.pow(10,length-1);
-          return Math.ceil(value)*Math.pow(1000,pow)*Math.pow(10,length-1);
-        }else if(flow==='floor'){
-          let length=JSON.stringify(Math.floor(value)).length;
-          value=value/Math.pow(10,length-1);
-          return Math.floor(value)*Math.pow(1000,pow)*Math.pow(10,length-1);
+        if (flow === 'ceil') {
+          const length = JSON.stringify(Math.ceil(value)).length
+          value = value / Math.pow(10, length - 1)
+          return Math.ceil(value) * Math.pow(1024, pow) * Math.pow(10, length - 1)
+        } else if (flow === 'floor') {
+          const length = JSON.stringify(Math.floor(value)).length
+          value = value / Math.pow(10, length - 1)
+          return Math.floor(value) * Math.pow(1024, pow) * Math.pow(10, length - 1)
         }
-      }else{
+      } else {
         return value
       }
     }
 
-    return value;
+    if (type === 'Misc' || type === 'DataRate') {
+      if (value > 1) {
+        while (value > 1000) {
+          pow++
+          value = value / 1000
+        }
 
-  },
-  copies:function(value){
-    switch(parseInt(value)){
-      case 1: return 5;
-      case 2: return 4;
-      case 3: return 3;
-      case 4: return 4;
-      case 5: return 5;
-      case 6: return 3;
-      case 7: return 7;
-      case 8: return 4;
-      case 9: return 3;
-      case 10: return 5;
-    }
-  },
-  Interval:function(value,copies,type,interValType){
-    if(interValType==='max'&&value<1){
-      if(value<1){
-        value=1;
+        if (flow === 'ceil') {
+          const length = JSON.stringify(Math.ceil(value)).length
+          value = value / Math.pow(10, length - 1)
+          return Math.ceil(value) * Math.pow(1000, pow) * Math.pow(10, length - 1)
+        } else if (flow === 'floor') {
+          const length = JSON.stringify(Math.floor(value)).length
+          value = value / Math.pow(10, length - 1)
+          return Math.floor(value) * Math.pow(1000, pow) * Math.pow(10, length - 1)
+        }
+      } else {
+        return value
       }
-      return value?value:1;
     }
 
-    if(value<1024&&type==='Data'){
-      let interVal=value/copies;
-      return interVal
+    return value
+  },
+  copies: function (value) {
+    switch (parseInt(value)) {
+      case 1: return 5
+      case 2: return 4
+      case 3: return 3
+      case 4: return 4
+      case 5: return 5
+      case 6: return 3
+      case 7: return 7
+      case 8: return 4
+      case 9: return 3
+      case 10: return 5
     }
-    if(value<1000&&(type==='DataRate' || type==='Misc')){
-      let interVal=value/copies;
-      return interVal
-    }
-    if(type==='Data'){
-      let interVal=value/copies;
-      let pow=0;
-      if(interVal){
-        while(interVal>1024){
-          pow++;
-          interVal=interVal/1024;
-        }
-        interVal=Math.ceil(interVal)*Math.pow(1024,pow);
+  },
+  Interval: function (value, copies, type, interValType) {
+    if (interValType === 'max' && value < 1) {
+      if (value < 1) {
+        value = 1
       }
-      interVal = interVal || 1;
+      return value || 1
+    }
+
+    if (value < 1024 && type === 'Data') {
+      const interVal = value / copies
       return interVal
     }
-    if(type==='DataRate' || type==='Misc'){
-      let interVal=value/copies;
-      let pow=0;
-      if(interVal){
-        while(interVal>1000){
-          pow++;
-          interVal=interVal/1000;
+    if (value < 1000 && (type === 'DataRate' || type === 'Misc')) {
+      const interVal = value / copies
+      return interVal
+    }
+    if (type === 'Data') {
+      let interVal = value / copies
+      let pow = 0
+      if (interVal) {
+        while (interVal > 1024) {
+          pow++
+          interVal = interVal / 1024
         }
-        interVal=Math.ceil(interVal)*Math.pow(1000,pow);
+        interVal = Math.ceil(interVal) * Math.pow(1024, pow)
       }
-      interVal = interVal || 1;
+      interVal = interVal || 1
       return interVal
     }
-    return 1;
+    if (type === 'DataRate' || type === 'Misc') {
+      let interVal = value / copies
+      let pow = 0
+      if (interVal) {
+        while (interVal > 1000) {
+          pow++
+          interVal = interVal / 1000
+        }
+        interVal = Math.ceil(interVal) * Math.pow(1000, pow)
+      }
+      interVal = interVal || 1
+      return interVal
+    }
+    return 1
     // let interVal=value/copies;
     // interVal = interVal || 1;
     // return interVal
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 98040a064..2c6c3e0bd 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -32,7 +32,6 @@
     padding: 20px 20px 0px !important;
   }
 
-
 </style>
 <template>
     <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
@@ -92,21 +91,21 @@
             <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                 <th style="width: 100%"></th>
-                <template v-for="legendOption in screenLegendOptions">
-                  <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
+                <template v-for="(legendOption, index) in screenLegendOptions">
+                  <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
                     <span @click="legendValueSort(legendOption,screenLegendList,screenLegendOptions)">{{legendOption.option}}</span>
                     <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
                   </th>
                 </template>
                 <tbody>
-                <tr  v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
+                <tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
                       <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
                     </div>
                   </td>
-                  <template v-for="legendOption in screenLegendOptions">
-                    <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
+                  <template v-for="(legendOption, i) in screenLegendOptions">
+                    <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
                   </template>
                 </tr>
                 </tbody>
@@ -175,372 +174,367 @@
     </el-dialog>
 </template>
 <script>
-  import axios from 'axios';
-  import * as echarts from 'echarts';
-  import bus from '../../libs/bus';
-  import loading from "../common/loading";
-  import chartDataFormat from './chartDataFormat'
-  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
-  import timePicker from '../common/timePicker'
-  import chartAlertList from './chart-alert-list'
-  import chartConfig from "../page/dashboard/overview/chartConfig";
-  import textChart from './text-chart'
-  export default {
-    name: 'chartPreview',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker,
-      'chart-alert-list':chartAlertList,
-      'text-chart':textChart
-    },
-    props: {
-      panelId:Number,
-      fromEndpoint:Boolean,
-    },
-    data() {
-      return {
-        chart:{},
-        noData:false,
-        //data: {}, // 该图表信息,chartItem
-        dailogWidth:'80%',
-        //seriesItem: [], // 保存信息
-        isError:false,
-        errorContent:'',
-        serieSingleStat:'',
-        seriesItemScreen:[],
-        screenPageObj:{
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        unit:{},
-        //images: '',
-        //toolbox: false,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [], // series数据组
-        },
-        isStackArea:false,
-        echartModalStore: null, // 全屏查看时数据
-        chartType: 'line', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        legend:[],
-        legendList:[],
-        screenLegendList:[],
-        isGrey:[],
-        isGreyScreen:[],
-        bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
-          '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
-          '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
-          '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
-          '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
-          '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
-          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-        ],
-        //firstShow: false, // 默认不显示操作按钮,
-        //dropdownMenuShow:false,
-        showLegend:true,
-        tableShow:true,
-        urlShow:true,
-        searchTime: bus.getTimezontDateRange(),
-        //oldSearchTime:[],
-        minHeight:200,
-        chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
-        titleHeight:58,
-        legendHeight:80,
-        pageHeight:40,
-        hasLegendOptions:false,
-        screenLegendOptions:[],
-        mapping:{},
-      };
-    },
-    computed: {
-    },
-    watch: {},
-    methods: {
-      // 全屏查看
-      show(chartInfo) {
-        this.isError = false;
-        this.searchTime = bus.getTimezontDateRange();
-        this.chart = JSON.parse(JSON.stringify(chartInfo));
-        let chartType= chartInfo.type;
-        let chartContainerId = 'chartEchartPreview';
-        if(chartType==='table'){
-          this.tableShow = false;
-          chartContainerId = 'chartTablePreview';
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4||chartType == 'pie') {
-          this.isGreyScreen=[];
-          this.showLegend = false;
-          chartContainerId = 'chartEchartPreview';
-        }else if(chartType==='url'){
-          this.urlShow = false;
-          chartContainerId = 'chartUrlPreview';
-        }else if (chartType === 'singleStat') {
-          chartContainerId = 'chartSingleStatPreview';
-        }else if(chartType === 'alertList'){
-          chartContainerId = 'chartAlertListPreview';
-        }else if(chartType == 'text'){
-          chartContainerId = 'chartTextPreview'
+import axios from 'axios'
+import * as echarts from 'echarts'
+import bus from '../../libs/bus'
+import loading from '../common/loading'
+import chartDataFormat from './chartDataFormat'
+import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import chartAlertList from './chart-alert-list'
+import chartConfig from '../page/dashboard/overview/chartConfig'
+export default {
+  name: 'chartPreview',
+  components: {
+    loading: loading,
+    'chart-alert-list': chartAlertList
+  },
+  props: {
+    panelId: Number,
+    fromEndpoint: Boolean
+  },
+  data () {
+    return {
+      chart: {},
+      noData: false,
+      // data: {}, // 该图表信息,chartItem
+      dailogWidth: '80%',
+      // seriesItem: [], // 保存信息
+      isError: false,
+      errorContent: '',
+      serieSingleStat: '',
+      seriesItemScreen: [],
+      screenPageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      unit: {},
+      // images: '',
+      // toolbox: false,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [] // series数据组
+      },
+      isStackArea: false,
+      echartModalStore: null, // 全屏查看时数据
+      chartType: 'line', // 图表类型
+      screenModal: false,
+      // 查询数据使用
+      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+      legend: [],
+      legendList: [],
+      screenLegendList: [],
+      isGrey: [],
+      isGreyScreen: [],
+      bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+        '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+        '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+        '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+        '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+        '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+        '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
+      ],
+      // firstShow: false, // 默认不显示操作按钮,
+      // dropdownMenuShow:false,
+      showLegend: true,
+      tableShow: true,
+      urlShow: true,
+      searchTime: bus.getTimezontDateRange(),
+      // oldSearchTime:[],
+      minHeight: 200,
+      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
+      titleHeight: 58,
+      legendHeight: 80,
+      pageHeight: 40,
+      hasLegendOptions: false,
+      screenLegendOptions: [],
+      mapping: {}
+    }
+  },
+  computed: {
+  },
+  watch: {},
+  methods: {
+    // 全屏查看
+    show (chartInfo) {
+      this.isError = false
+      this.searchTime = bus.getTimezontDateRange()
+      this.chart = JSON.parse(JSON.stringify(chartInfo))
+      const chartType = chartInfo.type
+      let chartContainerId = 'chartEchartPreview'
+      if (chartType === 'table') {
+        this.tableShow = false
+        chartContainerId = 'chartTablePreview'
+      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == 'pie') {
+        this.isGreyScreen = []
+        this.showLegend = false
+        chartContainerId = 'chartEchartPreview'
+      } else if (chartType === 'url') {
+        this.urlShow = false
+        chartContainerId = 'chartUrlPreview'
+      } else if (chartType === 'singleStat') {
+        chartContainerId = 'chartSingleStatPreview'
+      } else if (chartType === 'alertList') {
+        chartContainerId = 'chartAlertListPreview'
+      } else if (chartType == 'text') {
+        chartContainerId = 'chartTextPreview'
+      }
+
+      // 设置高度 chart-table
+      this.$nextTick(() => {
+        // const chartBox = document.getElementById('chartPreviewDailog');
+        // let height = this.chart.height;
+        let height = Math.round(this.chart.height / 10) * 10
+        if (height < this.minHeight) {
+          height = this.minHeight
         }
 
-        //设置高度 chart-table
-        this.$nextTick(() => {
-          //const chartBox = document.getElementById('chartPreviewDailog');
-          //let height = this.chart.height;
-          let height = Math.round(this.chart.height/10)*10
-          if(height<this.minHeight){
-            height = this.minHeight;
-          }
+        const dailogBox = document.querySelector('#chartPreviewDailog  .el-dialog')
+        dailogBox.style.height = `${height}px`
 
-          let dailogBox = document.querySelector("#chartPreviewDailog  .el-dialog");
-          dailogBox.style.height = `${height}px`;
-
-          const addChartBox = document.querySelector('.right-box-add-chart');
-          //addChartBox.style.cssText =  'z-index:1500 !important';
-          if(chartType==='table'){
-            const chartDiv = document.getElementById(chartContainerId);
-            chartDiv.style.height = `${height-this.chartSpaceHeight-this.titleHeight-25}px`;
-            const tableBox = document.getElementById('tableContainer');
-            tableBox.style.height = `${height-this.titleHeight-this.pageHeight-25}px`;//-75-32+25
-          }else{
-            const chartDiv = document.getElementById(chartContainerId);
-            chartDiv.style.height = `${height-this.chartSpaceHeight-this.titleHeight-15}px`;
-          }
-        });
-
-        this.screenModal = true;
-
-      },
-      setLoadFrame(){
-        if(this.chart.type==='url'){
-          let that = this;
-          this.$nextTick(() => {
-            let iframeBox = document.querySelector('#chartUrlPreview');
-            let iframe = document.querySelector('#chartUrlFrame');
-
-            // 处理兼容行问题
-            if (iframe.attachEvent) {
-              iframe.attachEvent('onload', function () {
-                // iframe加载完毕以后执行操作
-                that.$refs.loadingPreview.endLoading();
-              })
-            } else {
-              iframe.onload = function () {
-                // iframe加载完毕以后执行操作
-                that.$refs.loadingPreview.endLoading();
-              }
-            }
-            iframe.src = this.chart.param.url;
-          });
-        }
-      },
-      filterShowData(source,pageObj){
-        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
-      },
-      initDialog(){
-        //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
-        let chartType= this.chart.type;
-        if(chartType==='table'){
-
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo"||chartType == 'pie') {
-          if(this.echartModalStore){
-            this.echartModalStore.clear();
-          }
-        }else if(chartType==='url'){
-
-        }
-        //后台获得数据
-        if(this.chart.type!=='url'&&this.chart.type !=='text'){
-          this.$refs.loadingPreview.startLoading();
-          this.getChartData();
-        }else if(this.chart.type == 'url'){
-          this.$refs.loadingPreview.startLoading();
-          this.urlShow = true;
-          this.setLoadFrame();
-        }
-      },
-      getAlertListChartData:function(chartInfo,filterType){
-        this.$refs.alertListChart.getAlertList(filterType,true,this.chart);
-        this.$refs.loadingPreview.endLoading();
-      },
-      // 获取一个图表具体数据
-      getChartData() {
-        const chartItem = this.chart;
-        if(chartItem.type === 'alertList'){
-          this.getAlertListChartData(chartItem,null);
-          return;
-        }
-        const len = chartItem.elements.length;
-        // 没有数据的设置提示信息暂无数据-针对每一个图
-        if (len === 0) {
-          this.noData=true;
-          this.$nextTick(() => {
-            if (chartItem.type === 'table') {//表格
-              this.setTableData([]);
-            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo"||chartItem == 'pie') {
-              this.setData(chartItem, [], []);
-            }else if(chartItem.type ==='singleStat'){
-              this.serieSingleStat = "";
-              this.$refs.loadingPreview.endLoading();
-            }
-          });
+        // const addChartBox = document.querySelector('.right-box-add-chart')
+        // addChartBox.style.cssText =  'z-index:1500 !important';
+        if (chartType === 'table') {
+          const chartDiv = document.getElementById(chartContainerId)
+          chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 25}px`
+          const tableBox = document.getElementById('tableContainer')
+          tableBox.style.height = `${height - this.titleHeight - this.pageHeight - 25}px`// -75-32+25
         } else {
-          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
-            let now = new Date(bus.computeTimezone(new Date().getTime()));
-            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-            this.searchTime[0] = startTime;
-            this.searchTime[1] = endTime;
+          const chartDiv = document.getElementById(chartContainerId)
+          chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 15}px`
+        }
+      })
+
+      this.screenModal = true
+    },
+    setLoadFrame () {
+      if (this.chart.type === 'url') {
+        const that = this
+        this.$nextTick(() => {
+          // const iframeBox = document.querySelector('#chartUrlPreview')
+          const iframe = document.querySelector('#chartUrlFrame')
+
+          // 处理兼容行问题
+          if (iframe.attachEvent) {
+            iframe.attachEvent('onload', function () {
+              // iframe加载完毕以后执行操作
+              that.$refs.loadingPreview.endLoading()
+            })
+          } else {
+            iframe.onload = function () {
+              // iframe加载完毕以后执行操作
+              that.$refs.loadingPreview.endLoading()
+            }
           }
-          let step = bus.getStep(startTime,endTime);
-          this.$nextTick(() => {
-            const axiosArr = chartItem.elements.map((ele) => {
-              const filterItem = ele;
-              let query = encodeURIComponent(filterItem.expression);
-              // if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
-              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
-              // }
-              return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-            });
-            // 一个图表的所有element单独获取数据
-            axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = [];
-                let singleStatRlt = '';
-                const legend = [];
-                const tableData = [];
-                let pieSeries;
-                if(chartItem.type ==='pie'){
-                  pieSeries={
-                    type: 'pie',
-                    radius: '100%',
-                    center: ['50%', '50%'],
-                    top:"20%",
-                    bottom:"20%",
-                    // roseType: 'radius',
-                    minAngle:10,
-                    itemStyle: {
-                      borderRadius: 5,
-                      borderColor: '#fff',
-                      borderWidth: 1
-                    },
+          iframe.src = this.chart.param.url
+        })
+      }
+    },
+    filterShowData (source, pageObj) {
+      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
+    },
+    initDialog () {
+      // 此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
+      const chartType = this.chart.type
+      if (chartType === 'table') {
+        //
+      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == 'endpointInfo' || chartType == 'pie') {
+        if (this.echartModalStore) {
+          this.echartModalStore.clear()
+        }
+      } else if (chartType === 'url') {
+        //
+      }
+      // 后台获得数据
+      if (this.chart.type !== 'url' && this.chart.type !== 'text') {
+        this.$refs.loadingPreview.startLoading()
+        this.getChartData()
+      } else if (this.chart.type == 'url') {
+        this.$refs.loadingPreview.startLoading()
+        this.urlShow = true
+        this.setLoadFrame()
+      }
+    },
+    getAlertListChartData: function (chartInfo, filterType) {
+      this.$refs.alertListChart.getAlertList(filterType, true, this.chart)
+      this.$refs.loadingPreview.endLoading()
+    },
+    // 获取一个图表具体数据
+    getChartData () {
+      const chartItem = this.chart
+      if (chartItem.type === 'alertList') {
+        this.getAlertListChartData(chartItem, null)
+        return
+      }
+      const len = chartItem.elements.length
+      // 没有数据的设置提示信息暂无数据-针对每一个图
+      if (len === 0) {
+        this.noData = true
+        this.$nextTick(() => {
+          if (chartItem.type === 'table') { // 表格
+            this.setTableData([])
+          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'endpointInfo' || chartItem == 'pie') {
+            this.setData(chartItem, [], [])
+          } else if (chartItem.type === 'singleStat') {
+            this.serieSingleStat = ''
+            this.$refs.loadingPreview.endLoading()
+          }
+        })
+      } else {
+        let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
+          const now = new Date(bus.computeTimezone(new Date().getTime()))
+          startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+          this.searchTime[0] = startTime
+          this.searchTime[1] = endTime
+        }
+        const step = bus.getStep(startTime, endTime)
+        this.$nextTick(() => {
+          const axiosArr = chartItem.elements.map((ele) => {
+            const filterItem = ele
+            const query = encodeURIComponent(filterItem.expression)
+            // if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
+            //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+            // }
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+          })
+          // 一个图表的所有element单独获取数据
+          axios.all(axiosArr).then((res) => {
+            if (res.length > 0) {
+              const series = []
+              let singleStatRlt = ''
+              const legend = []
+              const tableData = []
+              let pieSeries
+              if (chartItem.type === 'pie') {
+                pieSeries = {
+                  type: 'pie',
+                  radius: '100%',
+                  center: ['50%', '50%'],
+                  top: '20%',
+                  bottom: '20%',
+                  // roseType: 'radius',
+                  minAngle: 10,
+                  itemStyle: {
+                    borderRadius: 5,
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  label: {
+                    show: false
+                  },
+                  emphasis: {
                     label: {
                       show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    },
-                    data:[]
-                  }
+                    }
+                  },
+                  data: []
                 }
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    this.isError = false;
-                    this.errorContent = "";
-                    if (response.data.result) {
-                      if(chartItem.type==='singleStat'){
-                        if(response.data.result.length===1){
-                          let statistics = chartItem.param.statistics;
-                          if(response.data.result[0].values){
-                            singleStatRlt  = bus.getSingleStatRlt(statistics,response.data.result[0].values);
-                            this.noData=false
-                          }else{
-                            this.noData=true;
-                          }
-                        }else if(response.data.result.length > 1){
-                          this.noData=true;
-                          singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
+              }
+              res.forEach((response, innerPos) => {
+                if (response.status === 'success') {
+                  this.isError = false
+                  this.errorContent = ''
+                  if (response.data.result) {
+                    if (chartItem.type === 'singleStat') {
+                      if (response.data.result.length === 1) {
+                        const statistics = chartItem.param.statistics
+                        if (response.data.result[0].values) {
+                          singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
+                          this.noData = false
+                        } else {
+                          this.noData = true
                         }
-                      }else {
-                        // 循环处理每个elements下获取的数据列
-                        response.data.result.forEach((queryItem, resInnerPos) => {
-                          const seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle',  //去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2,  //曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              type: chartItem.type,
-                              lineStyle: {
-                                width: 1,
-                                opacity: 0.9
-                              },
-                            },
-                            metric_name: '',
-                          };
-                          if (chartItem.type === 'stackArea') {
-                            seriesItem.theData.type = 'line';
-                            seriesItem.theData.stack = chartItem.title;
-                            seriesItem.theData.areaStyle = {"opacity": 0.3};
+                      } else if (response.data.result.length > 1) {
+                        this.noData = true
+                        singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                      }
+                    } else {
+                      // 循环处理每个elements下获取的数据列
+                      response.data.result.forEach((queryItem, resInnerPos) => {
+                        const seriesItem = {
+                          theData: {
+                            name: '',
+                            symbol: 'emptyCircle', // 去掉点
+                            symbolSize: [2, 2],
+                            smooth: 0.2, // 曲线变平滑
+                            showSymbol: false,
+                            data: [],
+                            type: chartItem.type,
+                            lineStyle: {
+                              width: 1,
+                              opacity: 0.9
+                            }
+                          },
+                          metric_name: ''
+                        }
+                        if (chartItem.type === 'stackArea') {
+                          seriesItem.theData.type = 'line'
+                          seriesItem.theData.stack = chartItem.title
+                          seriesItem.theData.areaStyle = { opacity: 0.3 }
+                        }
+                        if (chartItem.type === 'endpointInfo') {
+                          seriesItem.theData.type = 'line'
+                        }
+                        // 图表中每条线的名字,后半部分
+                        let host = ''// up,
+                        if (queryItem.metric.__name__) {
+                          host = `${queryItem.metric.__name__}{`// up,
+                        }
+                        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                        // 设置时间-数据格式对
+                        const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                        // 判断是否有数据, && tagsArr.length > 0
+                        if (dpsArr.length > 0) {
+                          tagsArr.forEach((tag, i) => {
+                            if (tag !== '__name__') {
+                              host += `${tag}="${queryItem.metric[tag]}",`
+                            }
+                          })
+                          if (host.endsWith(',')) {
+                            host = host.substr(0, host.length - 1)
                           }
-                          if (chartItem.type === "endpointInfo") {
-                            seriesItem.theData.type = 'line';
-                          }
-                          // 图表中每条线的名字,后半部分
-                          let host = '';//up,
                           if (queryItem.metric.__name__) {
-                            host = `${queryItem.metric.__name__}{`;//up,
+                            host += '}'
                           }
-                          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`;
-                              }
-                            });
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1);
-                            }
-                            if (queryItem.metric.__name__) {
-                              host += "}";
-                            }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression;
-                            }
-                            //处理legend别名
-                            let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                            if (!alias || alias === '') {
-                              alias = host;
-                            }
-                            legend.push({name: host + resInnerPos, alias: alias});
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                            seriesItem.theData.name = host + resInnerPos;
-                            seriesItem.metric_name = seriesItem.theData.name;
-                            // 将秒改为毫秒
-                            //alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                              let t_date = new Date(dpsItem[0] * 1000);
-                              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                              tableData.push({//表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: {element: host, alias: alias},
-                                // time: timeTmp,//采集时间
-                                // value: dpsItem[1],//数值
-                                data:[dpsItem[0] * 1000, dpsItem[1]]
-                              });
-                              return [dpsItem[0] * 1000, dpsItem[1]];
-                            });
-                            if(chartItem.type === 'pie'){
-                              pieSeries.data.push({value:bus.getSingleStatRlt(chartItem.param.statistics,seriesItem.theData.data),name:host + resInnerPos})
-                            }else{
-                              series.push(seriesItem.theData);
-                            }
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /*
+                          if (!host || host === '') {
+                            host = chartItem.elements[innerPos].expression
+                          }
+                          // 处理legend别名
+                          let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                          if (!alias || alias === '') {
+                            alias = host
+                          }
+                          legend.push({ name: host + resInnerPos, alias: alias })
+                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                          seriesItem.theData.name = host + resInnerPos
+                          seriesItem.metric_name = seriesItem.theData.name
+                          // 将秒改为毫秒
+                          // alert('table=='+JSON.stringify(queryItem))
+                          seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                            // const tData = new Date(dpsItem[0] * 1000)
+                            // const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+                            tableData.push({ // 表格数据
+                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                              element: { element: host, alias: alias },
+                              // time: timeTmp,//采集时间
+                              // value: dpsItem[1],//数值
+                              data: [dpsItem[0] * 1000, dpsItem[1]]
+                            })
+                            return [dpsItem[0] * 1000, dpsItem[1]]
+                          })
+                          if (chartItem.type === 'pie') {
+                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartItem.param.statistics, seriesItem.theData.data), name: host + resInnerPos })
+                          } else {
+                            series.push(seriesItem.theData)
+                          }
+                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                          // 无数据提示
+                          /*
                             const currentInfo = chartItem.elements[innerPos];
                             const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
                             this.$message.warning({
@@ -549,136 +543,136 @@
                               closable: true,
                             });
                             */
-                          }
-                        });
-                    }
-                    }
-                  }else{
-                    this.isError = true;
-                    if(response.msg){
-                      this.errorContent = response.msg;
-                    }else if(response.error){
-                      this.errorContent = response.error;
-                    }else {
-                      this.errorContent = response;
-                    }
-                  }
-                });
-                //if(this.$refs.editChart&&this.$refs.editChart[index]) {
-                  if (chartItem.type === 'table') {//表格
-                      this.setTableData(tableData);
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == "endpoint") {
-                    if (series.length && chartItem.type === 4) {//曲线汇总
-                    }
-                    if(series.length<1){
-                      this.noData=true;
-                    }else{
-                      this.noData=false;
-                    }
-                    let _chartItem = JSON.parse(JSON.stringify(chartItem));
-                    if (chartItem.from == this.$CONSTANTS.fromRoute.endpoint) {
-                      _chartItem.type = "line";
-                    }
-                    this.setData(_chartItem, series, legend);
-                  }else if(chartItem.type ==='singleStat'){
-                    if(Number(singleStatRlt)){
-                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-                      if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
-                        let type=chartItem.param.valueMapping.type;
-                        let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
-                        let mapping;
-                        if(type == 'value'){
-                          mapping=mappings.find(item=>{return item.value == singleStatTmp})
-                        }else{
-                          mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
                         }
-                        this.mapping=mapping;
-                        if(this.mapping&&!this.mapping.color){
-                          this.mapping.color={bac:'#fff',text:'#000'}
-                        }
-                        this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-                      }else{
-                        this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-                      }
-                    }else {
-                      this.serieSingleStat =singleStatRlt;
+                      })
                     }
-                    this.$refs.loadingPreview.endLoading();
-                  }else if(chartItem.type == 'pie'){
-                    series.push(pieSeries)
-                    if(series[0].data.length<1){
-                      this.noData=true;
-                    }else{
-                      this.noData=false;
+                  }
+                } else {
+                  this.isError = true
+                  if (response.msg) {
+                    this.errorContent = response.msg
+                  } else if (response.error) {
+                    this.errorContent = response.error
+                  } else {
+                    this.errorContent = response
+                  }
+                }
+              })
+              // if(this.$refs.editChart&&this.$refs.editChart[index]) {
+              if (chartItem.type === 'table') { // 表格
+                this.setTableData(tableData)
+              } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == 'endpoint') {
+                if (series.length && chartItem.type === 4) { // 曲线汇总
+                }
+                if (series.length < 1) {
+                  this.noData = true
+                } else {
+                  this.noData = false
+                }
+                const _chartItem = JSON.parse(JSON.stringify(chartItem))
+                if (chartItem.from == this.$CONSTANTS.fromRoute.endpoint) {
+                  _chartItem.type = 'line'
+                }
+                this.setData(_chartItem, series, legend)
+              } else if (chartItem.type === 'singleStat') {
+                if (Number(singleStatRlt)) {
+                  const singleStatTmp = parseFloat(Number(singleStatRlt).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+                  if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
+                    const type = chartItem.param.valueMapping.type
+                    const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
+                    let mapping
+                    if (type == 'value') {
+                      mapping = mappings.find(item => { return item.value == singleStatTmp })
+                    } else {
+                      mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
                     }
-                    this.setData(chartItem,series,legend)
+                    this.mapping = mapping
+                    if (this.mapping && !this.mapping.color) {
+                      this.mapping.color = { bac: '#fff', text: '#000' }
+                    }
+                    this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
+                  } else {
+                    this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
                   }
-                //}
-              } else {
-                const type = chartItem.type;
-                //if(this.$refs.editChart[index]) {
-                  if (type === 'table') {
-                      this.setTableData([]);
-                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4||chartItem.type == 'pie') {
-                      this.setData(chartItem, []);
-                  }else if(chartItem.type ==='singleStat'){
-                    this.serieSingleStat = "";
-                    this.$refs.loadingPreview.endLoading();
-                  }
-                //}
+                } else {
+                  this.serieSingleStat = singleStatRlt
+                }
+                this.$refs.loadingPreview.endLoading()
+              } else if (chartItem.type == 'pie') {
+                series.push(pieSeries)
+                if (series[0].data.length < 1) {
+                  this.noData = true
+                } else {
+                  this.noData = false
+                }
+                this.setData(chartItem, series, legend)
               }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString());
-                console.error(error)
+              // }
+            } else {
+              const type = chartItem.type
+              // if(this.$refs.editChart[index]) {
+              if (type === 'table') {
+                this.setTableData([])
+              } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4 || chartItem.type == 'pie') {
+                this.setData(chartItem, [])
+              } else if (chartItem.type === 'singleStat') {
+                this.serieSingleStat = ''
+                this.$refs.loadingPreview.endLoading()
               }
-            });
-          });
-        }
-      },
-      clickScreenLegend(legendName,index){
-        /*点击legend
+              // }
+            }
+          }).catch((error) => {
+            if (error) {
+              this.$message.error(error.toString())
+              console.error(error)
+            }
+          })
+        })
+      }
+    },
+    clickScreenLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.isGreyScreen.forEach(g => {
-          if (!g) {
-            highlightNum++;
-          }
-        });
-        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
-        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
-
-        let echart = this.echartModalStore;
-        if (echart) {
-          if (!hasGrey) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.isGreyScreen = this.isGreyScreen.map(() => false);
-          } else {
-            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGreyScreen.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        /*let curIsGrey=this.isGreyScreen[index];
+      })
+      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
+      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = this.echartModalStore
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGreyScreen = this.isGreyScreen.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
+        }
+      }
+      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+      /* let curIsGrey=this.isGreyScreen[index];
         if(this.echartModalStore){
           this.screenLegendList.forEach((item,i)=>{
             let isGrey = this.isGreyScreen[i];
@@ -721,596 +715,601 @@
               }
             }
           })
-        }*/
-      },
-      formatLegend(chartWidth,name){
-        if(!name){
-          return '';
-        }
-        //计算宽度
-        var span = document.createElement("span");
-        var result = {};
-        result.width = span.offsetWidth;
-        result.height = span.offsetHeight;
-        span.style.visibility = "hidden";
-        span.style.fontSize = 14;
-        span.style.fontFamily = "Arial";
-        span.style.display = "inline-block";
-        document.body.appendChild(span);
-        if(typeof span.textContent != "undefined"){
-          span.textContent = name;
-        }else{
-          span.innerText = name;
-        }
-        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-        document.body.removeChild(span);
+        } */
+    },
+    formatLegend (chartWidth, name) {
+      if (!name) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.createElement('span')
+      const result = {}
+      result.width = span.offsetWidth
+      result.height = span.offsetHeight
+      span.style.visibility = 'hidden'
+      span.style.fontSize = 14
+      span.style.fontFamily = 'Arial'
+      span.style.display = 'inline-block'
+      document.body.appendChild(span)
+      if (typeof span.textContent !== 'undefined') {
+        span.textContent = name
+      } else {
+        span.innerText = name
+      }
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width
+      document.body.removeChild(span)
+
+      if (txtWidth < chartWidth) {
+        return name
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
+        return name.slice(0, charNum) + '...'
+      }
+    },
+    // chartSite用于区分是全屏显示还是局部显示
+    initChart (chartInfo, dataArg, ele, legend) {
+      const self = this
+      let minTime = null
+      let maxTime = null
+      if (dataArg.length > 0 && dataArg[0].data &&
+          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
+        const len = dataArg[0].data.length - 1
+        minTime = dataArg[0].data[0][0]
+        maxTime = dataArg[0].data[len][0]
+        // console.log('time==========',minTime,maxTime)
+      }
+      this.chartType = '' // 图表类型
+      if (chartInfo.type === 4) { // line,bar
+        this.chartType = 'line'
+      }
+      this.echartModalStore = echarts.init(ele)
+      const chartWidth = ele.clientWidth
+      /* const title = {
+        show: false,
+        text: chartInfo.title || null,
+        textAlign: 'left',
+        useHTML: true,
+        textStyle: {
+          width: '60%',
+          fontStyle: 'normal',
+          fontWeight: 'bold',
+          color: '#333'
 
-        if(txtWidth < chartWidth){
-          return name;
-        }else {
-          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-          return name.slice(0,charNum)+'...';
         }
-      },
-      // chartSite用于区分是全屏显示还是局部显示
-      initChart(chartInfo, dataArg, ele,legend) {
-        const self = this;
-        let minTime = null;
-        let maxTime = null
-        if(dataArg.length>0 && dataArg[0].data
-          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
-          let len = dataArg[0].data.length-1;
-          minTime = dataArg[0].data[0][0];
-          maxTime = dataArg[0].data[len][0];
-          //console.log('time==========',minTime,maxTime)
-        }
-        this.chartType = ''; // 图表类型
-        if ( chartInfo.type === 4) {//line,bar
-          this.chartType = 'line';
-        }
-        this.echartModalStore = echarts.init(ele);
-        var chartWidth = ele.clientWidth;
-        var title = {
-          show:false,
-          text: chartInfo.title || null,
-          textAlign: 'left',
-          useHTML: true,
+      } */
+      const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
+      const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
+      const option = {
+        title: {
+          show: false
+        },
+        color: this.bgColorList,
+        toolbox: {
+          show: false,
+          top: '0',
+          showTitle: false,
+          feature: {
+            dataZoom: {
+              yAxisIndex: false
+            },
+            magicType: {
+              type: ['stack'],
+              iconStyle: {
+                borderColor: stackIconBorderColor
+              },
+              emphasis: {
+                borderColor: stackIconChooseBorderColor
+              }
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          backgroundColor: 'rgba(221,228,237,1)',
           textStyle: {
-            width: '60%',
-            fontStyle:'normal',
-            fontWeight:'bold',
-            color: "#333",
-
-          }
-        };
-        let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
-        let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
-        var option = {
-          title:{
-            show:false,
+            color: '#000'
           },
-          color: this.bgColorList,
-          toolbox:{
-            show:false,
-            top:'0',
-            showTitle:false,
-            feature:{
-              dataZoom:{
-                yAxisIndex:false
-              },
-              magicType:{
-                type:['stack'],
-                iconStyle:{
-                  borderColor:stackIconBorderColor,
-                },
-                emphasis:{
-                  borderColor:stackIconChooseBorderColor,
-                }
-              }
+          axisPointer: {
+            snap: false,
+            animation: false
+          },
+          extraCssText: 'z-index:1000;',
+          /* enterable:true, 导致tooltip不消失，显示多个tooltip */
+          position: function (point, params, dom, rect, size) {
+            dom.style.transform = 'translateZ(0)'
+            // 提示框位置
+            let x = 0
+            let y = 0
+            // 当前鼠标位置
+            const pointX = point[0]
+            const pointY = point[1]
+            // 外层div大小
+            const viewWidth = size.viewSize[0]
+            const viewHeight = size.viewSize[1]
+            // 提示框大小
+            const boxWidth = size.contentSize[0]
+            const boxHeight = size.contentSize[1]
+            if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
+              x = pointX + 10
+            } else {
+              x = pointX - boxWidth
             }
-          },
-          tooltip: {
-            trigger: 'axis',
-            confine:false,
-            backgroundColor:'rgba(221,228,237,1)',
-            textStyle:{
-              color:'#000'
-            },
-            axisPointer:{
-              snap:false,
-              animation:false,
-            },
-            extraCssText:'z-index:1000;',
-            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
-            position:function(point,params,dom,rect,size){
-              dom.style.transform = "translateZ(0)";
-              //提示框位置
-              var x=0;
-              var y=0;
-              //当前鼠标位置
-              var pointX = point[0];
-              var pointY = point[1];
-              //外层div大小
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              //提示框大小
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
-                x=pointX+10;
-              }else{
-                x = pointX - boxWidth;
-              }
-              if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
-                y = pointY+10;
-              }else {
-                y = pointY-boxHeight;
-              }
-              return [x,y];
-            },
-            formatter:function(params){
-              let str = `<div>`;
-              let sum = 0;
-              params.forEach((item, i) => {
-                let tip=legend[item.seriesIndex];
-                let color = self.bgColorList[item.seriesIndex];
-                if(i===0){
-                  let t_date = new Date(item.data[0]);
-                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                  str +=`<br/>`;
-                }
-                let val = parseFloat(Number(item.data[1]).toFixed(2));
-                if(val===0){
-                  val = Number(item.data[1]).toExponential(2);
-                }
-                sum += self.numberWithEConvent(val);
-                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                str += `<div style="padding-left: 10px;">`;
-                str += function(){
-                  if (chartInfo.from == 'endpoint') {
-                    return val == 1 ? "up" : "down";
-                  }
-                  return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                }();
-                str += `</div>`;
-                str += `</div>`;
-
-              });
-              if(chartInfo.type==='stackArea' || self.isStackArea){
-                sum = parseFloat(Number(sum).toFixed(2));
-                str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                str +=self.$t("dashboard.panel.chartTotal");
-                str +=`</div>`;
-                str +=`<div style="padding-left: 10px;">`;
-                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                str +=`</div>`;
-                str += `</div>`;
-              }
-              str +=`</div>`;
-              return str;
-              },
-          },
-          legend: {
-            show:false,
-          },
-          grid: {
-            top: 30,
-            left: 0,
-            right: 30,
-            containLabel: true,
-            bottom: 8,//156
-          },
-          xAxis: {
-            type: 'time',
-            // boundaryGap: false,//line-false; bar-true;
-            //data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
-            axisLabel: {
-              interval: 0,
-              rotate: 0,
-              formatter: function (value) {
-                value = bus.computeTimezone(value);
-                let t_date = new Date(value);
-                let hour = t_date.getHours();
-                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
-                let minute = t_date.getMinutes();
-                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
-                if(minTime!==null && maxTime!==null){
-                  let diffSec = (maxTime-minTime)/1000;
-                  let secOneDay = 24*60*60;//1天的秒数
-                  let secOneMonth = secOneDay*30;//30天的秒数
-                  if(diffSec<=secOneDay) {//同一天
-                    return [hour,minute ].join(':');
-                  }else if(diffSec<secOneMonth){//大于1天，小于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
-                  }else {//大于等于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
-                  }
-                }else {
-                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
-                    + [hour, minute].join(':');
-                }
-              }
-            },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
-            splitLine:{
-              show:true
+            if (pointY < (viewHeight / 2)) { // 说明鼠标上面放不下提示框
+              y = pointY + 10
+            } else {
+              y = pointY - boxHeight
             }
+            return [x, y]
           },
-          yAxis: {
-            type: 'value',
-            minInterval: 1,
-            splitLine:{
-              show:true
-            },
-            //去掉y轴--start
-            axisLine:{
-              show:false
-            },
-            axisTick: {
-              show: false,
-            },
-            //去掉y轴--end
-            axisLabel: {
-              formatter: function(value,index){
-                if (self.chart.from == 'endpoint') {
-                  if (value == 1) {
-                    return "up";
-                  } else {
-                    return "down";
-                  }
-                }
-                let chartUnit=chartInfo.unit;
-                chartUnit=chartUnit?chartUnit:2;
-                let unit=chartDataFormat.getUnit(chartUnit);
-                return unit.compute(value,index);
-              },
-            },
-            //boundaryGap:[0,0.2]
-          },
-          useUTC: false,//使用本地时间
-          series: dataArg
-        };
-        if(this.echartModalStore){
-          this.echartModalStore.clear();
-        }
-        option.title = {};
-        //this.echartModalStore.setOption(option);//显示全屏界面
-        this.showLegend = true;
-        if(legend){
-          this.screenLegendList = [];
-          legend.forEach((item, i) => {
-            let _legend = {
-              name:item.name,
-              alias:item.alias,
-              color:item.color,
-              showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
-            };
-            this.screenLegendList.push(_legend);
-            this.isGreyScreen.push(false);
-          });
-        }
-        if(this.hasLegendOptions){
-          this.computeLegendData(this.screenLegendList,dataArg,'screen');
-        }
-        this.$nextTick(() => {
-          let divHeight = this.$refs.screenLegendArea.offsetHeight;
-          this.echartModalStore.resize({height:(chartInfo.height-this.chartSpaceHeight-divHeight-this.titleHeight)});
-          this.echartModalStore.clear();
-          if(dataArg.length<1){
-            this.echartModalStore.setOption(chartConfig.getOption('noData'))
-          }else{
-            this.echartModalStore.setOption(option);//创建图表
-          }
-
-          this.$refs.loadingPreview.endLoading();
-        });
-        this.echartModalStore.on('magictypechanged', function (params) {
-          self.isStackArea = !self.isStackArea;
-          if(self.isStackArea){
-            this.setOption({
-              toolbox:{
-                feature:{
-                  magicType:{
-                    iconStyle:{
-                      borderColor:'#7e7e7e',
-                    },
-                  },
-                }
-              },
-              tooltip: {
-                axisPointer:{
-                  snap:false,
-                  animation:false,
-                },
-                formatter:function(params){
-                  let str = `<div>`;let sum = 0;
-                  params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                    let color = self.bgColorList[item.seriesIndex];
-                    if(i===0){
-                      let value=bus.computeTimezone(item.data[0]);
-                      let t_date = new Date(value);
-                      str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                        + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                      str +=`<br/>`;
-                    }
-                    let val = parseFloat(Number(item.data[1]).toFixed(2));
-                    if(val===0){
-                      val = Number(item.data[1]).toExponential(2);
-                    }
-                    sum += self.numberWithEConvent(val);
-                    str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                    str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                    str += `<div style="padding-left: 10px;">`;
-                    str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                    str += `</div>`;
-                    str += `</div>`;
-                  });
-                  if(chartInfo.type==='stackArea' || self.isStackArea){
-                    sum = parseFloat(Number(sum).toFixed(2));
-                    str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                    str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                    str +=self.$t("dashboard.panel.chartTotal");
-                    str +=`</div>`;
-                    str +=`<div style="padding-left: 10px;">`;
-                    str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                    str +=`</div>`;
-                    str += `</div>`;
-                  }
-
-                  str +=`</div>`;
-                  return str;
-                },
+          formatter: function (params) {
+            let str = '<div>'
+            let sum = 0
+            params.forEach((item, i) => {
+              const tip = legend[item.seriesIndex]
+              const color = self.bgColorList[item.seriesIndex]
+              if (i === 0) {
+                const tData = new Date(item.data[0])
+                str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+                    [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
+                str += '<br/>'
               }
-            });
-          }
-        });
-      },
-      initPie:function(chartInfo, dataArg, legend){
-        let option={
-          title: {
-            show: false,
-          },
-          legend:{
-            show:false,
-          },
-          grid: {
-            left:'center',
-            top:'middle',
-          },
-          tooltip:{
-            trigger:'item',
-            backgroundColor:'rgba(221,228,237,1)',
-            borderColor :'rgba(255,255,255,0)',
-            textStyle:{
-              color:'#000'
-            },
-            textStyle:{
-              color:'#000'
-            },
-            axisPointer:{
-              snap:false,
-              animation:false,
-            },
-            extraCssText:'z-index:1000;',
-          },
-          series:null,
-        }
-        option.series = dataArg;
-        option.color = this.bgColorList;
-        option.tooltip.formatter=this.pieFormatterFunc;
-        let self=this;
-        let  dom = document.getElementById('screenShowArea')
-        this.echartModalStore = echarts.init(dom)
-        this.showLegend = true;
-        if(legend){
-          this.screenLegendList = [];
-          legend.forEach((item, i) => {
-            let _legend = {
-              name:item.name,
-              alias:item.alias,
-              color:item.color,
-              showText:this.formatLegend(dom.clientWidth,item.alias?item.alias:item.name)
-            };
-            this.screenLegendList.push(_legend);
-            this.isGreyScreen.push(false);
-          });
-        }
-        this.$nextTick(() => {
-          let divHeight = this.$refs.screenLegendArea.offsetHeight;
-          this.echartModalStore.resize({height:(chartInfo.height-this.chartSpaceHeight-divHeight-this.titleHeight)});
-          this.echartModalStore.clear();
-          if(dataArg[0].data.length<1){
-            this.echartModalStore.setOption(chartConfig.getOption('noData'))
-          }else{
-            this.echartModalStore.setOption(option);//创建图表
-          }
-
-          this.$refs.loadingPreview.endLoading();
-        });
-      },
-      mouseEnterFullChart(){
-        if (this.echartModalStore) {
-          this.echartModalStore.setOption({
-            toolbox: {
-              show:true,
-            }
-          })
-        }
-      },
-      mouseLeaveFullChart(){
-        if (this.echartModalStore) {
-          this.echartModalStore.setOption({
-            toolbox: {
-              show:false,
-            }
-          })
-        }
-      },
-      setColor(colorNum){
-        this.bgColorList = [];
-        for(let i=0;i<colorNum;i++) {
-          this.bgColorList.push(randomcolor())
-        }
-      },
-      // 设置数据
-      setData(chartItem, seriesItem,legend) {
-          this.setColor(legend.length);
-          legend.forEach((t,i)=>{t.color = this.bgColorList[i]})
-          this.legend = legend;
-          //this.data = chartItem;
-          //this.seriesItem = seriesItem;
-          this.seriesItemScreen = seriesItem;
-          this.hasLegendOptions=this.findLegendOptions()
-          if(this.hasLegendOptions){
-            let sortedOptionKeys=['min','max','avg','last','total']
-            this.screenLegendOptions=sortedOptionKeys.map(item=>{ return {option:item,sort:'',value:chartItem.param.legendValue[item]}})
-          }
-          if(chartItem.type == 'pie'){
-            this.initPie(chartItem,seriesItem,legend)
-            return;
-          }
-          this.initChart(chartItem, seriesItem, this.$refs.screenShowArea,legend);
-      },
-      // 设置数据
-      setTableData(seriesItem) {
-        this.unit = chartDataFormat.getUnit(this.chart.unit);
-        let statistics = this.chart.param.statistics;
-        seriesItem = this.getStatisticsResult(statistics,seriesItem)
-        seriesItem=seriesItem.map(item=>{
-          if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){
-            let type=this.chart.param.valueMapping.type;
-            let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[];
-            let value = Number(item.value);
-
-            let mapping;
-            if(type == 'value'){
-              mapping=mappings.find(t=>{return Number(t.value) == value})
-            }else{
-              mapping=mappings.find(t=>{return Number(t.from) <= value&& Number(t.to) >= value});
-            }
-            this.mapping=mapping;
-            item.mapping=mapping;
-            item.value = mapping?mapping.text.replace('{{value}}', item.value).replace('{{name}}', item.element.alias):this.unit.compute(value,null,2);
-          }
-          return item;
-        })
-        this.storedScreanTableData=seriesItem;
-        this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-        this.screenPageObj.total=this.storedScreanTableData.length;
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
-
-        this.tableShow = true;
-        this.$refs.loadingPreview.endLoading();
-      },
-      getStatisticsResult(statistics,seriesItem){
-        let copy=JSON.parse(JSON.stringify(seriesItem));
-        let last,result;
-        last=copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0];
-        switch (statistics) {
-          case 'null':
-            return copy.map(item=>{
-              return {
-                element:item.element,
-                time:bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-                value:item.data[1]
+              let val = parseFloat(Number(item.data[1]).toFixed(2))
+              if (val === 0) {
+                val = Number(item.data[1]).toExponential(2)
               }
+              sum += self.numberWithEConvent(val)
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+              str += '<div style="padding-left: 10px;">'
+              str += (function () {
+                if (chartInfo.from == 'endpoint') {
+                  return val == 1 ? 'up' : 'down'
+                }
+                return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+              }())
+              str += '</div>'
+              str += '</div>'
             })
-          case 'min':
-            result= copy.sort((x,y)=>{return parseFloat(x.data[1]) - parseFloat(y.data[1])})[0];
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'max':
-            result= copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})[0];
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'average':
-            copy = copy.map(t=>parseFloat(t.data[1]));
-            let sum = eval(copy.join('+'));
-            let avg = sum / copy.length;
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:avg
-            }]
-            break;
-          case 'total':
-            copy = copy.map(t=>parseFloat(t.data[1]));
-            let total = eval(copy.join('+'));
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:total
-            }]
-            break;
-          case 'first':
-            result=copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1]
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'last':
-            result=last;
-            result = [{
-              element:result.element,
-              time:bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:result.data[1],
-            }]
-            break;
-          case 'range':
-            let sort = copy.sort((x,y)=>{return parseFloat(y.data[1]) - parseFloat(x.data[1])})
-            let max = sort[0]
-            let min = sort[sort.length-1]
-            result=[{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:max.data[1] - min.data[1]
-            }]
-            break;
-          case 'different':
-            let first = copy.sort((x,y)=>{return parseFloat(y.data[0]) - parseFloat(x.data[0])})[copy.length-1];
-            result = [{
-              element:last.element,
-              time:bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
-              value:last.data[1] - first.data[1]
-            }]
-            break;
+            if (chartInfo.type === 'stackArea' || self.isStackArea) {
+              sum = parseFloat(Number(sum).toFixed(2))
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+              str += self.$t('dashboard.panel.chartTotal')
+              str += '</div>'
+              str += '<div style="padding-left: 10px;">'
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+              str += '</div>'
+              str += '</div>'
+            }
+            str += '</div>'
+            return str
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: 30,
+          left: 0,
+          right: 30,
+          containLabel: true,
+          bottom: 8// 156
+        },
+        xAxis: {
+          type: 'time',
+          // boundaryGap: false,//line-false; bar-true;
+          // data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
+          axisLabel: {
+            interval: 0,
+            rotate: 0,
+            formatter: function (value) {
+              value = bus.computeTimezone(value)
+              const tData = new Date(value)
+              let hour = tData.getHours()
+              hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
+              let minute = tData.getMinutes()
+              minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
+              if (minTime !== null && maxTime !== null) {
+                const diffSec = (maxTime - minTime) / 1000
+                const secOneDay = 24 * 60 * 60// 1天的秒数
+                const secOneMonth = secOneDay * 30// 30天的秒数
+                if (diffSec <= secOneDay) { // 同一天
+                  return [hour, minute].join(':')
+                } else if (diffSec < secOneMonth) { // 大于1天，小于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
+                } else { // 大于等于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/')
+                }
+              } else {
+                return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
+                    [hour, minute].join(':')
+              }
+            }
+          },
+          axisPointer: { // y轴上显示指针对应的值
+            show: true
+          },
+          splitLine: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: 'value',
+          minInterval: 1,
+          splitLine: {
+            show: true
+          },
+          // 去掉y轴--start
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          // 去掉y轴--end
+          axisLabel: {
+            formatter: function (value, index) {
+              if (self.chart.from == 'endpoint') {
+                if (value == 1) {
+                  return 'up'
+                } else {
+                  return 'down'
+                }
+              }
+              let chartUnit = chartInfo.unit
+              chartUnit = chartUnit || 2
+              const unit = chartDataFormat.getUnit(chartUnit)
+              return unit.compute(value, index)
+            }
+          }
+          // boundaryGap:[0,0.2]
+        },
+        useUTC: false, // 使用本地时间
+        series: dataArg
+      }
+      if (this.echartModalStore) {
+        this.echartModalStore.clear()
+      }
+      option.title = {}
+      // this.echartModalStore.setOption(option);//显示全屏界面
+      this.showLegend = true
+      if (legend) {
+        this.screenLegendList = []
+        legend.forEach((item, i) => {
+          const _legend = {
+            name: item.name,
+            alias: item.alias,
+            color: item.color,
+            showText: this.formatLegend(chartWidth, item.alias ? item.alias : item.name)
+          }
+          this.screenLegendList.push(_legend)
+          this.isGreyScreen.push(false)
+        })
+      }
+      if (this.hasLegendOptions) {
+        this.computeLegendData(this.screenLegendList, dataArg, 'screen')
+      }
+      this.$nextTick(() => {
+        const divHeight = this.$refs.screenLegendArea.offsetHeight
+        this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
+        this.echartModalStore.clear()
+        if (dataArg.length < 1) {
+          this.echartModalStore.setOption(chartConfig.getOption('noData'))
+        } else {
+          this.echartModalStore.setOption(option)// 创建图表
         }
-        return result;
-      },
-      clearChart(){
-        if(this.echartModalStore){
-          this.echartModalStore.clear();
-        }
-        this.chart = {};
-        //this.seriesItem = [];
-        this.seriesItemScreen = [];
-        this.searchTime[0] = new Date().setHours(new Date().getHours()-1);
-        this.searchTime[1] =new Date();
 
-        let iframe = document.querySelector('#chartUrlFrame');
-        if(iframe){
-          iframe.src="";
+        this.$refs.loadingPreview.endLoading()
+      })
+      this.echartModalStore.on('magictypechanged', function (params) {
+        self.isStackArea = !self.isStackArea
+        if (self.isStackArea) {
+          this.setOption({
+            toolbox: {
+              feature: {
+                magicType: {
+                  iconStyle: {
+                    borderColor: '#7e7e7e'
+                  }
+                }
+              }
+            },
+            tooltip: {
+              axisPointer: {
+                snap: false,
+                animation: false
+              },
+              formatter: function (params) {
+                let str = '<div>'; let sum = 0
+                params.forEach((item, i) => {
+                  const tip = legend[item.seriesIndex]
+                  const color = self.bgColorList[item.seriesIndex]
+                  if (i === 0) {
+                    const value = bus.computeTimezone(item.data[0])
+                    const tData = new Date(value)
+                    str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+                        [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
+                    str += '<br/>'
+                  }
+                  let val = parseFloat(Number(item.data[1]).toFixed(2))
+                  if (val === 0) {
+                    val = Number(item.data[1]).toExponential(2)
+                  }
+                  sum += self.numberWithEConvent(val)
+                  str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                  str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                  str += '<div style="padding-left: 10px;">'
+                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                  str += '</div>'
+                  str += '</div>'
+                })
+                if (chartInfo.type === 'stackArea' || self.isStackArea) {
+                  sum = parseFloat(Number(sum).toFixed(2))
+                  str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                  str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+                  str += self.$t('dashboard.panel.chartTotal')
+                  str += '</div>'
+                  str += '<div style="padding-left: 10px;">'
+                  str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                  str += '</div>'
+                  str += '</div>'
+                }
+
+                str += '</div>'
+                return str
+              }
+            }
+          })
         }
-        this.isStackArea = false;
-        this.serieSingleStat = '';
-      },
-      // 重新请求数据 刷新操作
-      /*
+      })
+    },
+    initPie: function (chartInfo, dataArg, legend) {
+      const option = {
+        title: {
+          show: false
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: 'center',
+          top: 'middle'
+        },
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(221,228,237,1)',
+          borderColor: 'rgba(255,255,255,0)',
+          textStyle: {
+            color: '#000'
+          },
+          axisPointer: {
+            snap: false,
+            animation: false
+          },
+          extraCssText: 'z-index:1000;'
+        },
+        series: null
+      }
+      option.series = dataArg
+      option.color = this.bgColorList
+      option.tooltip.formatter = this.pieFormatterFunc
+      const dom = document.getElementById('screenShowArea')
+      this.echartModalStore = echarts.init(dom)
+      this.showLegend = true
+      if (legend) {
+        this.screenLegendList = []
+        legend.forEach((item, i) => {
+          const _legend = {
+            name: item.name,
+            alias: item.alias,
+            color: item.color,
+            showText: this.formatLegend(dom.clientWidth, item.alias ? item.alias : item.name)
+          }
+          this.screenLegendList.push(_legend)
+          this.isGreyScreen.push(false)
+        })
+      }
+      this.$nextTick(() => {
+        const divHeight = this.$refs.screenLegendArea.offsetHeight
+        this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
+        this.echartModalStore.clear()
+        if (dataArg[0].data.length < 1) {
+          this.echartModalStore.setOption(chartConfig.getOption('noData'))
+        } else {
+          this.echartModalStore.setOption(option)// 创建图表
+        }
+
+        this.$refs.loadingPreview.endLoading()
+      })
+    },
+    mouseEnterFullChart () {
+      if (this.echartModalStore) {
+        this.echartModalStore.setOption({
+          toolbox: {
+            show: true
+          }
+        })
+      }
+    },
+    mouseLeaveFullChart () {
+      if (this.echartModalStore) {
+        this.echartModalStore.setOption({
+          toolbox: {
+            show: false
+          }
+        })
+      }
+    },
+    setColor (colorNum) {
+      this.bgColorList = []
+      for (let i = 0; i < colorNum; i++) {
+        this.bgColorList.push(randomcolor())
+      }
+    },
+    // 设置数据
+    setData (chartItem, seriesItem, legend) {
+      this.setColor(legend.length)
+      legend.forEach((t, i) => { t.color = this.bgColorList[i] })
+      this.legend = legend
+      // this.data = chartItem;
+      // this.seriesItem = seriesItem;
+      this.seriesItemScreen = seriesItem
+      this.hasLegendOptions = this.findLegendOptions()
+      if (this.hasLegendOptions) {
+        const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
+        this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
+      }
+      if (chartItem.type == 'pie') {
+        this.initPie(chartItem, seriesItem, legend)
+        return
+      }
+      this.initChart(chartItem, seriesItem, this.$refs.screenShowArea, legend)
+    },
+    // 设置数据
+    setTableData (seriesItem) {
+      this.unit = chartDataFormat.getUnit(this.chart.unit)
+      const statistics = this.chart.param.statistics
+      seriesItem = this.getStatisticsResult(statistics, seriesItem)
+      seriesItem = seriesItem.map(item => {
+        if (this.chart.param.valueMapping && this.chart.param.valueMapping.type) {
+          const type = this.chart.param.valueMapping.type
+          const mappings = this.chart.param.valueMapping.mapping ? this.chart.param.valueMapping.mapping : []
+          const value = Number(item.value)
+
+          let mapping
+          if (type == 'value') {
+            mapping = mappings.find(t => { return Number(t.value) == value })
+          } else {
+            mapping = mappings.find(t => { return Number(t.from) <= value && Number(t.to) >= value })
+          }
+          this.mapping = mapping
+          item.mapping = mapping
+          item.value = mapping ? mapping.text.replace('{{value}}', item.value).replace('{{name}}', item.element.alias) : this.unit.compute(value, null, 2)
+        }
+        return item
+      })
+      this.storedScreanTableData = seriesItem
+      this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse())
+      this.screenPageObj.total = this.storedScreanTableData.length
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
+
+      this.tableShow = true
+      this.$refs.loadingPreview.endLoading()
+    },
+    getStatisticsResult (statistics, seriesItem) {
+      let copy = JSON.parse(JSON.stringify(seriesItem))
+      const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0]
+      let result
+      switch (statistics) {
+        case 'null': {
+          return copy.map(item => {
+            return {
+              element: item.element,
+              time: bus.timeFormate(new Date(item.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+              value: item.data[1]
+            }
+          })
+        }
+        case 'min': {
+          result = copy.sort((x, y) => { return parseFloat(x.data[1]) - parseFloat(y.data[1]) })[0]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'max': {
+          result = copy.sort((x, y) => { return parseFloat(y.data[1]) - parseFloat(x.data[1]) })[0]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'average': {
+          copy = copy.map(t => parseFloat(t.data[1]))
+          const sum = eval(copy.join('+'))
+          const avg = sum / copy.length
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: avg
+          }]
+          break
+        }
+        case 'total': {
+          copy = copy.map(t => parseFloat(t.data[1]))
+          const total = eval(copy.join('+'))
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: total
+          }]
+          break
+        }
+        case 'first': {
+          result = copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[copy.length - 1]
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'last': {
+          result = last
+          result = [{
+            element: result.element,
+            time: bus.timeFormate(new Date(result.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: result.data[1]
+          }]
+          break
+        }
+        case 'range': {
+          const sort = copy.sort((x, y) => { return parseFloat(y.data[1]) - parseFloat(x.data[1]) })
+          const max = sort[0]
+          const min = sort[sort.length - 1]
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: max.data[1] - min.data[1]
+          }]
+          break
+        }
+        case 'different': {
+          const first = copy.sort((x, y) => { return parseFloat(y.data[0]) - parseFloat(x.data[0]) })[copy.length - 1]
+          result = [{
+            element: last.element,
+            time: bus.timeFormate(new Date(last.data[0]), 'yyyy-MM-dd hh:mm:ss'),
+            value: last.data[1] - first.data[1]
+          }]
+          break
+        }
+      }
+      return result
+    },
+    clearChart () {
+      if (this.echartModalStore) {
+        this.echartModalStore.clear()
+      }
+      this.chart = {}
+      // this.seriesItem = [];
+      this.seriesItemScreen = []
+      this.searchTime[0] = new Date().setHours(new Date().getHours() - 1)
+      this.searchTime[1] = new Date()
+
+      const iframe = document.querySelector('#chartUrlFrame')
+      if (iframe) {
+        iframe.src = ''
+      }
+      this.isStackArea = false
+      this.serieSingleStat = ''
+    },
+    // 重新请求数据 刷新操作
+    /*
       refreshChart() {
         //this.dropdownMenuShow=false;
         this.clearChart();
@@ -1319,324 +1318,322 @@
         this.$emit('on-refresh-data', this.data.id);
       },
       */
-      dateChange(time) {
-        let chartType = this.chart.type;
-        if (chartType === 'table') {
-          this.seriesItemScreen = [];
-          for(let i=0;i<8;i++){
-            this.seriesItemScreen.push({//表格数据
-              // label: '',//label
-              // metric: '',//metric列
-              element:'',
-              time: '',//采集时间
-              value: '',//数值
-            });
-          }
-          this.tableShow = false;
-          this.$refs.loadingPreview.startLoading();
-          this.getChartData();
-        } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || this.chart.from == 'endpoint') {
-          this.echartModalStore.clear();
-          if (this.chart.from != this.$CONSTANTS.fromRoute.endpoint) {
-            this.showLegend = false;
-          }
-          this.$refs.loadingPreview.startLoading();
-          this.getQueryChart();
-        }else if (chartType === 'singleStat') {
-          this.serieSingleStat = "";
-          this.$refs.loadingPreview.startLoading();
-          this.getChartData();
+    dateChange (time) {
+      const chartType = this.chart.type
+      if (chartType === 'table') {
+        this.seriesItemScreen = []
+        for (let i = 0; i < 8; i++) {
+          this.seriesItemScreen.push({ // 表格数据
+            // label: '',//label
+            // metric: '',//metric列
+            element: '',
+            time: '', // 采集时间
+            value: ''// 数值
+          })
         }
-      },
-      // 查询数据,修改日期查询全屏数据
-      getQueryChart(type) {
-        let axiosArr = [];
-        const chartItem = this.chart;
-        this.$nextTick(() => {
-          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
-            let now = new Date();
-            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-            this.searchTime[0] = startTime;
-            this.searchTime[1] = endTime;
+        this.tableShow = false
+        this.$refs.loadingPreview.startLoading()
+        this.getChartData()
+      } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || this.chart.from == 'endpoint') {
+        this.echartModalStore.clear()
+        if (this.chart.from != this.$CONSTANTS.fromRoute.endpoint) {
+          this.showLegend = false
+        }
+        this.$refs.loadingPreview.startLoading()
+        this.getQueryChart()
+      } else if (chartType === 'singleStat') {
+        this.serieSingleStat = ''
+        this.$refs.loadingPreview.startLoading()
+        this.getChartData()
+      }
+    },
+    // 查询数据,修改日期查询全屏数据
+    getQueryChart (type) {
+      let axiosArr = []
+      const chartItem = this.chart
+      this.$nextTick(() => {
+        let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
+          const now = new Date()
+          startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+          this.searchTime[0] = startTime
+          this.searchTime[1] = endTime
+        }
+        const step = bus.getStep(startTime, endTime)
+        axiosArr = this.chart.elements.map((ele) => {
+          const filterItem = ele
+          const query = encodeURIComponent(filterItem.expression)
+          if (chartItem.type === 'table' && chartItem.param && chartItem.param.last == 1) {
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(endTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
           }
-          let step = bus.getStep(startTime,endTime);
-          axiosArr = this.chart.elements.map((ele) => {
-            const filterItem = ele;
-            let query = encodeURIComponent(filterItem.expression);
-            if(chartItem.type === 'table'&&chartItem.param&&chartItem.param.last == 1){
-              return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+          return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+        })
+        // 一个图表
+        axios.all(axiosArr).then(res => {
+          if (res.length > 0) {
+            const series = []
+            const legend = []
+            /* const sumData = {
+              name: 'sum',
+              data: [],
+              visible: true,
+              threshold: null
+            } */
+            if (!this.chart.type || this.chart.from == 'endpoint') {
+              this.chart.type = 'line'
             }
-            return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-          });
-          // 一个图表
-          axios.all(axiosArr).then(res => {
-            if (res.length > 0) {
-              const series = [];
-              const legend = [];
-              const sumData = {
-                name: 'sum',
-                data: [],
-                visible: true,
-                threshold: null,
-              };
-              if(!this.chart.type || this.chart.from == 'endpoint'){
-                this.chart.type='line';
-              }
-              res.forEach((response,pos) => {
-                if (response.status === 'success') {
-                  this.isError = false;
-                  this.errorContent = "";
-                  if (response.data.result) {
-                    // 循环处理每个elements下获取的数据列
-                    response.data.result.forEach((queryItem,innerPos) => {
-                      const seriesItem = {
-                        theData: {
-                          name: '',
-                          symbol:'emptyCircle',  //去掉点
-                          symbolSize:[2,2],
-                          smooth:0.2,  //曲线变平滑
-                          showSymbol:false,
-                          data: [],
-                          type:this.chart.type,
-                          lineStyle: {
-                            width: 1,
-                            opacity: 0.9
-                          },
-                          //visible: true,
-                          //threshold: null,
-                        },
-                        metric_name: '',
-                      };
-                      if(this.chart.type === 'stackArea'){
-                        seriesItem.theData.type='line';
-                        seriesItem.theData.stack=this.chart.title;
-                        seriesItem.theData.areaStyle={"opacity": 0.3};
-                      }
-                      // 图表中每条线的名字,后半部分
-                      // let host = `${queryItem.metric.__name__}{`;//up,
-                      let host = '';//up,
-                      if(queryItem.metric.__name__){
-                        host = `${queryItem.metric.__name__}{`;//up,
-                      }
-                      const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                      // 设置时间-数据格式对
-                      const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据,&& tagsArr.length > 0
-                      if (dpsArr.length > 0 ) {
-                        tagsArr.forEach((tag, i) => {
-                          if (tag !== '__name__') {
-                            host += `${tag}="${queryItem.metric[tag]}",`;
-                          }
-                        });
-                        if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                        if(queryItem.metric.__name__){
-                          host +="}";
+            res.forEach((response, pos) => {
+              if (response.status === 'success') {
+                this.isError = false
+                this.errorContent = ''
+                if (response.data.result) {
+                  // 循环处理每个elements下获取的数据列
+                  response.data.result.forEach((queryItem, innerPos) => {
+                    const seriesItem = {
+                      theData: {
+                        name: '',
+                        symbol: 'emptyCircle', // 去掉点
+                        symbolSize: [2, 2],
+                        smooth: 0.2, // 曲线变平滑
+                        showSymbol: false,
+                        data: [],
+                        type: this.chart.type,
+                        lineStyle: {
+                          width: 1,
+                          opacity: 0.9
                         }
-                        if(!host || host===''){
-                          host = this.chart.elements[pos].expression;
+                        // visible: true,
+                        // threshold: null,
+                      },
+                      metric_name: ''
+                    }
+                    if (this.chart.type === 'stackArea') {
+                      seriesItem.theData.type = 'line'
+                      seriesItem.theData.stack = this.chart.title
+                      seriesItem.theData.areaStyle = { opacity: 0.3 }
+                    }
+                    // 图表中每条线的名字,后半部分
+                    // let host = `${queryItem.metric.__name__}{`;//up,
+                    let host = ''// up,
+                    if (queryItem.metric.__name__) {
+                      host = `${queryItem.metric.__name__}{`// up,
+                    }
+                    const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                    // 设置时间-数据格式对
+                    const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                    // 判断是否有数据,&& tagsArr.length > 0
+                    if (dpsArr.length > 0) {
+                      tagsArr.forEach((tag, i) => {
+                        if (tag !== '__name__') {
+                          host += `${tag}="${queryItem.metric[tag]}",`
                         }
-                        let alias=this.dealLegendAlias(host,this.chart.elements[pos].legend);
-                        if(!alias || alias===''){
-                          alias = host;
-                        }
-                        legend.push({name:host+innerPos,alias:alias});
-                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                        seriesItem.theData.name = host+innerPos;
-                        seriesItem.metric_name = seriesItem.theData.name;
-                        // 将秒改为毫秒
-                        //alert('table=='+JSON.stringify(queryItem))
-                        seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                          return [dpsItem[0] * 1000, dpsItem[1]];
-                        });
-                        series.push(seriesItem.theData);
-
-                      } else if (this.chart.elements && this.chart.elements[innerPos]) {
-                        // 无数据提示
+                      })
+                      if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
+                      if (queryItem.metric.__name__) {
+                        host += '}'
                       }
-                    });
-                  }
-                }else{
-                  this.isError = true;
-                  if(response.msg){
-                    this.errorContent = response.msg;
-                  }else if(response.error){
-                    this.errorContent = response.error;
-                  }else {
-                    this.errorContent = response;
-                  }
+                      if (!host || host === '') {
+                        host = this.chart.elements[pos].expression
+                      }
+                      let alias = this.dealLegendAlias(host, this.chart.elements[pos].legend)
+                      if (!alias || alias === '') {
+                        alias = host
+                      }
+                      legend.push({ name: host + innerPos, alias: alias })
+                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                      seriesItem.theData.name = host + innerPos
+                      seriesItem.metric_name = seriesItem.theData.name
+                      // 将秒改为毫秒
+                      // alert('table=='+JSON.stringify(queryItem))
+                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                        return [dpsItem[0] * 1000, dpsItem[1]]
+                      })
+                      series.push(seriesItem.theData)
+                    } else if (this.chart.elements && this.chart.elements[innerPos]) {
+                      // 无数据提示
+                    }
+                  })
                 }
-              });
-              this.setColor(legend.length);
-              this.initChart(this.chart,series, this.$refs.screenShowArea,legend);
-            }
-          }).catch(error => {
-            if (error) {
-              this.$message.error(error.toString());
-            }
-          });
-        });
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
-
-      },
-      screenPageNo(val) {
-        this.screenPageObj.pageNo = val;
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-      },
-      screenPageSize(val) {
-        this.screenPageObj.pageSize = val;
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-      },
-      handleClose(){
-        this.screenModal = false;
-        this.clearChart();
-      },
-      findLegendOptions:function(){
-        if((!this.chart.param) || (!this.chart.param.legendValue) || Object.keys(this.chart.param.legendValue)<1) return false;
-        let legendOptions= this.chart.param.legendValue;
-        let onVal=Object.keys(legendOptions).find(item=>{return legendOptions[item] == 'on'});
-
-        return onVal;
-      },
-      computeLegendData:function(legend,dataArr){
-        let options=this.screenLegendOptions;
-        let keys=options.filter(item=>{return item.value == 'on'}).map(item=>{return item.option});
-        let $self=this;
-        keys.forEach(item=>{
-          switch (item) {
-            case 'min':
-              $self.legendMinValue(legend,dataArr);
-              break;
-            case 'max':
-              $self.legendMaxValue(legend,dataArr);
-              break;
-            case 'avg':
-              $self.legendAvgValue(legend,dataArr);
-              break;
-            case 'last':
-              $self.legendLastValue(legend,dataArr);
-              break;
-            case 'total':
-              $self.legendTotalValue(legend,dataArr);
-              break;
+              } else {
+                this.isError = true
+                if (response.msg) {
+                  this.errorContent = response.msg
+                } else if (response.error) {
+                  this.errorContent = response.error
+                } else {
+                  this.errorContent = response
+                }
+              }
+            })
+            this.setColor(legend.length)
+            this.initChart(this.chart, series, this.$refs.screenShowArea, legend)
+          }
+        }).catch(error => {
+          if (error) {
+            this.$message.error(error.toString())
           }
         })
-      },
-      legendMinValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1]
-              item['min']=parseFloat(min)
-            }
-          })
+      })
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    screenPageNo (val) {
+      this.screenPageObj.pageNo = val
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
+    },
+    screenPageSize (val) {
+      this.screenPageObj.pageSize = val
+      this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj)
+    },
+    handleClose () {
+      this.screenModal = false
+      this.clearChart()
+    },
+    findLegendOptions: function () {
+      if ((!this.chart.param) || (!this.chart.param.legendValue) || Object.keys(this.chart.param.legendValue) < 1) return false
+      const legendOptions = this.chart.param.legendValue
+      const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
 
-          resolve();
-        })
-      },
-      legendMaxValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1]
-              item['max']=parseFloat(max)
-            }
-          })
-          resolve();
-        })
-      },
-      legendAvgValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              copy = copy.map(t=>parseFloat(t[1]))
-              let sum = eval(copy.join('+'));
-              let avg = sum / copy.length;
-
-              item['avg'] = avg;
-            }
-          })
-          resolve();
-        })
-      },
-      legendLastValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1]
-              item['last']=parseFloat(last)
-            }
-          })
-          resolve();
-        })
-      },
-      legendTotalValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              copy = copy.map(t=>parseFloat(t[1]))
-              let sum = eval(copy.join('+'));
-
-              item['total'] = sum;
-            }
-          });
-          resolve();
-        })
-      },
-      formatLegendData:function(data){
-        return chartDataFormat.getUnit(this.chart.unit).compute(data,null,2)
-      },
-      legendValueSort:function(option,legend,options){
-        options.forEach(item=>{
-          if(item.option != option.option){
-            item.sort='';
+      return onVal
+    },
+    computeLegendData: function (legend, dataArr) {
+      const options = this.screenLegendOptions
+      const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
+      const $self = this
+      keys.forEach(item => {
+        switch (item) {
+          case 'min':
+            $self.legendMinValue(legend, dataArr)
+            break
+          case 'max':
+            $self.legendMaxValue(legend, dataArr)
+            break
+          case 'avg':
+            $self.legendAvgValue(legend, dataArr)
+            break
+          case 'last':
+            $self.legendLastValue(legend, dataArr)
+            break
+          case 'total':
+            $self.legendTotalValue(legend, dataArr)
+            break
+        }
+      })
+    },
+    legendMinValue: function (legend, dataArr) {
+      return new Promise(resolve => {
+        legend.forEach(item => {
+          const data = dataArr.find(t => t.name == item.name)
+          if (data && data.data) {
+            const copy = JSON.parse(JSON.stringify(data.data))
+            const min = copy.sort((x, y) => { return parseFloat(x[1]) - parseFloat(y[1]) })[0][1]
+            item.min = parseFloat(min)
           }
         })
-        if(!option.sort || option.sort == 'asc'){
-          legend.sort((x,y)=>x[option.option] - y[option.option])
-          option.sort = 'desc'
-        }else{
-          legend.sort((x,y)=>y[option.option] - x[option.option])
-          option.sort = 'asc'
+
+        resolve()
+      })
+    },
+    legendMaxValue: function (legend, dataArr) {
+      return new Promise(resolve => {
+        legend.forEach(item => {
+          const data = dataArr.find(t => t.name == item.name)
+          if (data && data.data) {
+            const copy = JSON.parse(JSON.stringify(data.data))
+            const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
+            item.max = parseFloat(max)
+          }
+        })
+        resolve()
+      })
+    },
+    legendAvgValue: function (legend, dataArr) {
+      return new Promise(resolve => {
+        legend.forEach(item => {
+          const data = dataArr.find(t => t.name == item.name)
+          if (data && data.data) {
+            let copy = JSON.parse(JSON.stringify(data.data))
+            copy = copy.map(t => parseFloat(t[1]))
+            const sum = eval(copy.join('+'))
+            const avg = sum / copy.length
+
+            item.avg = avg
+          }
+        })
+        resolve()
+      })
+    },
+    legendLastValue: function (legend, dataArr) {
+      return new Promise(resolve => {
+        legend.forEach(item => {
+          const data = dataArr.find(t => t.name == item.name)
+          if (data && data.data) {
+            const copy = JSON.parse(JSON.stringify(data.data))
+            const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
+            item.last = parseFloat(last)
+          }
+        })
+        resolve()
+      })
+    },
+    legendTotalValue: function (legend, dataArr) {
+      return new Promise(resolve => {
+        legend.forEach(item => {
+          const data = dataArr.find(t => t.name == item.name)
+          if (data && data.data) {
+            let copy = JSON.parse(JSON.stringify(data.data))
+            copy = copy.map(t => parseFloat(t[1]))
+            const sum = eval(copy.join('+'))
+
+            item.total = sum
+          }
+        })
+        resolve()
+      })
+    },
+    formatLegendData: function (data) {
+      return chartDataFormat.getUnit(this.chart.unit).compute(data, null, 2)
+    },
+    legendValueSort: function (option, legend, options) {
+      options.forEach(item => {
+        if (item.option != option.option) {
+          item.sort = ''
         }
-      },
-      pieFormatterFunc:function(params, ticket, callback){
-        let chartInfo=this.chart;
-        return `
+      })
+      if (!option.sort || option.sort == 'asc') {
+        legend.sort((x, y) => x[option.option] - y[option.option])
+        option.sort = 'desc'
+      } else {
+        legend.sort((x, y) => y[option.option] - x[option.option])
+        option.sort = 'asc'
+      }
+    },
+    pieFormatterFunc: function (params, ticket, callback) {
+      const chartInfo = this.chart
+      return `
                 <div>
                     <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
                         <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value,null,-1,2)}</div>
+                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
                         </div>
                         <div style="font-size:12px;display:flex;justify-content: space-between;">
                             <div>percent</div>
@@ -1645,16 +1642,14 @@
                     </div>
                 </div>
                `
-      }
-    },
-    beforeDestroy() {
-      this.clearChart();
-      try {
-        if(this.echartModalStore){
-          this.echartModalStore.off('magictypechanged');
-        }
-      } finally{}
-    },
-  };
+    }
+  },
+  beforeDestroy () {
+    this.clearChart()
+    if (this.echartModalStore) {
+      this.echartModalStore.off('magictypechanged')
+    }
+  }
+}
 
 </script>
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index bceac1784..be3a0d946 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -67,21 +67,21 @@
           <div class='legend-container' ref="legendArea" v-show="firstShow">
             <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
               <th style="width: 100%"></th>
-              <template v-for="legendOption in legendOptions">
-                <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
+              <template v-for="(legendOption, index) in legendOptions">
+                <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
                   <span @click="legendValueSort(legendOption,legendListMore,legendOptions)">{{legendOption.option}}</span>
                   <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
                 </th>
               </template>
               <tbody>
-                <tr  v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
+                <tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
                       <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
                     </div>
                   </td>
-                  <template v-for="legendOption in legendOptions">
-                    <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
+                  <template v-for="(legendOption, i) in legendOptions">
+                    <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
                   </template>
                 </tr>
               </tbody>
@@ -149,21 +149,21 @@
             <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                 <th style="width: 100%"></th>
-                <template v-for="legendOption in screenLegendOptions">
-                  <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
-                    <span @click="legendValueSort(legendOption,screenLegendListMore,screenLegendOptions)">{{legendOption.option}}</span>
+                <template v-for="(legendOption, index) in screenLegendOptions">
+                  <th v-if="legendOption.value == 'on'" :key="index" class="option-th legend-option-cell" >
+                    <span @click="legendValueSort(legendOption,screenLegendListMore, screenLegendOptions)">{{legendOption.option}}</span>
                     <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
                   </th>
                 </template>
                 <tbody>
-                <tr  v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
+                <tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
                       <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
                     </div>
                   </td>
-                  <template v-for="legendOption in screenLegendOptions">
-                    <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
+                  <template v-for="(legendOption, i) in screenLegendOptions">
+                    <td v-if="legendOption.value == 'on'" :key="i" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
                   </template>
                 </tr>
                 </tbody>
@@ -180,1077 +180,1072 @@
 </template>
 
 <script>
-  import axios from 'axios';
-  import * as echarts from 'echarts';
-  import bus from '../../libs/bus';
-  import loading from "../common/loading";
-  import chartDataFormat from './chartDataFormat';
-  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js';
-  import timePicker from '../common/timePicker';
-  import chartConfig from "../page/dashboard/overview/chartConfig";
-  import {getChart, setChart,lineChartMove,getMousePoint} from "../common/js/common";
-  import {getMetricTypeValue} from "../common/js/tools";
+import axios from 'axios'
+import * as echarts from 'echarts'
+import bus from '../../libs/bus'
+import loading from '../common/loading'
+import chartDataFormat from './chartDataFormat'
+import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import chartConfig from '../page/dashboard/overview/chartConfig'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
+import { getMetricTypeValue } from '../common/js/tools'
 
-  export default {
-    name: 'lineChartBlock',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
+export default {
+  name: 'lineChartBlock',
+  components: {
+    loading: loading
+  },
+  props: {
+    chartData: {
+      type: Object
     },
-    props: {
-      chartData: {
-        type: Object
-      },
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-      // 展示设置内容
-      showSetting: {
-        type: Boolean,
-        default: true,
-      },
-      isExplore:{
-        type:Boolean,
-        default:false,
-      },
-      tempDom: Object,
-      from: {type: String},
-      isLock:{type:Boolean,default:false},
-      chartTitleShow:{
-        type:Boolean,
-        default:true
-      }
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
     },
-    computed: {
-      getButtonCode() {
-        return function(from, type) {
-          let code = "";
-          switch (from) {
-            case this.$CONSTANTS.fromRoute.panel:
-              if (type == 'chartToEdit') {
-                code = "";
-              }
-          }
+    chartIndex: {
+      type: Number,
+      default: 0
+    },
+    // 展示设置内容
+    showSetting: {
+      type: Boolean,
+      default: true
+    },
+    isExplore: {
+      type: Boolean,
+      default: false
+    },
+    tempDom: Object,
+    from: { type: String },
+    isLock: { type: Boolean, default: false },
+    chartTitleShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    getButtonCode () {
+      return function (from, type) {
+        let code = ''
+        switch (from) {
+          case this.$CONSTANTS.fromRoute.panel:
+            if (type == 'chartToEdit') {
+              code = ''
+            }
         }
+        return code
       }
-    },
-    data() {
-      return {
-        data: {}, // 该图表信息,chartItem
-        noData:false,
-        seriesLength:20,
-        seriesItem: [], // 保存信息
-        seriesItemArr:[],// 初次加载的数据
-        seriesItemScreen:[],
-        seriesItemArrScreen:[],
-        legendListMore:[],
-        screenLegendListMore:[],
-        chartInfo:{},
-        images: '',
-        isStackArea:false,
-        isError:false,
-        errorContent:'',
-        toolbox: false,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [], // series数据组
-        },
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        chartName: '',
-        firstLoad: false, // 是否第一次加载
-        divFirstShow:false,
-        /*highchartStore: null, // 保存图表数据
+    }
+  },
+  data () {
+    return {
+      data: {}, // 该图表信息,chartItem
+      noData: false,
+      seriesLength: 20,
+      seriesItem: [], // 保存信息
+      seriesItemArr: [], // 初次加载的数据
+      seriesItemScreen: [],
+      seriesItemArrScreen: [],
+      legendListMore: [],
+      screenLegendListMore: [],
+      chartInfo: {},
+      images: '',
+      isStackArea: false,
+      isError: false,
+      errorContent: '',
+      toolbox: false,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [] // series数据组
+      },
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      chartName: '',
+      firstLoad: false, // 是否第一次加载
+      divFirstShow: false,
+      /* highchartStore: null, // 保存图表数据
         echartStore:null,// 保存图表数据
-        echartModalStore: null, // 全屏查看时数据*/
-        chartType: 'line', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-          from: ""
-        },
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        /*legend:[],
+        echartModalStore: null, // 全屏查看时数据 */
+      chartType: 'line', // 图表类型
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+        start_time: '',
+        end_time: '',
+        from: ''
+      },
+      stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+      /* legend:[],
         legendList:[],
-        screenLegendList:[],*/
-        isGrey:[],
-        isGreyScreen:[],
-        /*bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+        screenLegendList:[], */
+      isGrey: [],
+      isGreyScreen: [],
+      /* bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
           '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
           '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
           '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
           '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
           '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
           '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-        ],*/
-        stackTotalColor:null,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dropdownMenuShow:false,
-        showLegend:true,
-        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
-        oldSearchTime:[],
-        screenTitleHeight:58,
-        hasLegendOptions:false,
-        /*legendOptions:[],
-        screenLegendOptions:[],*/
-      };
+        ], */
+      stackTotalColor: null,
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dropdownMenuShow: false,
+      showLegend: true,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      oldSearchTime: [],
+      screenTitleHeight: 58,
+      hasLegendOptions: false,
+      /* legendOptions:[], */
+      screenLegendOptions: []
+    }
+  },
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.chartData, e, this.chartIndex)
     },
-    watch: {
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+    setDivFirstShow (showDiv) {
+      this.divFirstShow = showDiv
+    },
+    mouseEnterChart () {
+      this.caretShow = true
+      if (getChart(this.chartIndex)) {
+        setTimeout(() => {
+          getChart(this.chartIndex).setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }, 300)
       }
     },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.chartData, e,this.chartIndex);
-      },
-      setDivFirstShow(showDiv){
-        this.divFirstShow = showDiv;
-      },
-      mouseEnterChart(){
-        this.caretShow=true;
-        if (getChart(this.chartIndex)) {
-          setTimeout(() => {
-            getChart(this.chartIndex).setOption({
-              toolbox: {
-                show:true,
-              }
-            })
-          }, 300);
-
-        }
-      },
-      mouseLeaveChart(){
-        this.caretShow=false;
-        if (getChart(this.chartIndex)) {
-          setTimeout(() => {
-            getChart(this.chartIndex).setOption({
-              toolbox: {
-                show: false,
-              }
-            })
-          }, 300);
-        }
-      },
-      mouseEnterFullChart(){
-        if (this.echartModalStore) {
-          setTimeout(() => {
-            this.echartModalStore.setOption({
-              toolbox: {
-                show:true,
-              }
-            })
-          }, 300);
-        }
-      },
-      mouseLeaveFullChart(){
-        if (this.echartModalStore) {
-          setTimeout(() => {
-            this.echartModalStore.setOption({
-              toolbox: {
-                show: false,
-              }
-            })
-          }, 300);
-        }
-      },
-      clickLegend(legendName, index){
-        /*点击legend
+    mouseLeaveChart () {
+      this.caretShow = false
+      if (getChart(this.chartIndex)) {
+        setTimeout(() => {
+          getChart(this.chartIndex).setOption({
+            toolbox: {
+              show: false
+            }
+          })
+        }, 300)
+      }
+    },
+    mouseEnterFullChart () {
+      if (this.echartModalStore) {
+        setTimeout(() => {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show: true
+            }
+          })
+        }, 300)
+      }
+    },
+    mouseLeaveFullChart () {
+      if (this.echartModalStore) {
+        setTimeout(() => {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show: false
+            }
+          })
+        }, 300)
+      }
+    },
+    clickLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.isGrey.forEach(g => {
-          if (!g) {
-            highlightNum++;
-          }
-        });
-        let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
-        let curIsGrey = this.isGrey[index]; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
-
-        let echart = getChart(this.chartIndex)
-        if (echart) {
-          if (!hasGrey) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.isGrey = this.isGrey.map((g, i) => i !== index);
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.isGrey = this.isGrey.map(() => false);
-          } else {
-            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            this.$set(this.isGrey, index, !this.isGrey[index]);
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGrey.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-      },
-      clickLegend2(legendName,index){
-        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        let curIsGrey=this.isGrey[index];
-        if(getChart(this.chartIndex)){
-          this.legendListMore.forEach((item,i)=>{
-            let isGrey = this.isGrey[i];
-            if(index != i){
-              if(!curIsGrey && !isGrey){
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }else if(!curIsGrey && isGrey){
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                });
-              }else{
-                getChart(this.chartIndex).dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }
-            }else {
+      })
+      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
+      const curIsGrey = this.isGrey[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = getChart(this.chartIndex)
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGrey = this.isGrey.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGrey = this.isGrey.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGrey, index, !this.isGrey[index])
+        }
+      }
+    },
+    clickLegend2 (legendName, index) {
+      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+      const curIsGrey = this.isGrey[index]
+      if (getChart(this.chartIndex)) {
+        this.legendListMore.forEach((item, i) => {
+          const isGrey = this.isGrey[i]
+          if (index != i) {
+            if (!curIsGrey && !isGrey) {
+              getChart(this.chartIndex).dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+            } else if (!curIsGrey && isGrey) {
               getChart(this.chartIndex).dispatchAction({
                 type: 'legendSelect',
                 name: item.name
-              });
+              })
+            } else {
+              getChart(this.chartIndex).dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
             }
-          });
-          this.isGrey.forEach((item,i)=>{
-            if(index != i){
-              if(!curIsGrey && !item){
-                this.$set(this.isGrey, i, true);
-              }else if(!curIsGrey && item){
-                this.$set(this.isGrey, i, false);
-              }else{
-                this.$set(this.isGrey, i, true);
-              }
-            }else{
-              if(item === true){
-                this.$set(this.isGrey, i, false);
-              }
+          } else {
+            getChart(this.chartIndex).dispatchAction({
+              type: 'legendSelect',
+              name: item.name
+            })
+          }
+        })
+        this.isGrey.forEach((item, i) => {
+          if (index != i) {
+            if (!curIsGrey && !item) {
+              this.$set(this.isGrey, i, true)
+            } else if (!curIsGrey && item) {
+              this.$set(this.isGrey, i, false)
+            } else {
+              this.$set(this.isGrey, i, true)
             }
-          })
-        }
-      },
-      clickScreenLegend(legendName,index){
-        /*点击legend
+          } else {
+            if (item === true) {
+              this.$set(this.isGrey, i, false)
+            }
+          }
+        })
+      }
+    },
+    clickScreenLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.isGreyScreen.forEach(g => {
-          if (!g) {
-            highlightNum++;
-          }
-        });
-        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
-        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
-
-        let echart = this.echartModalStore;
-        if (echart) {
-          if (!hasGrey) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.isGreyScreen = this.isGreyScreen.map(() => false);
-          } else {
-            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
-          }
+      let highlightNum = 0 // 高亮数量
+      this.isGreyScreen.forEach(g => {
+        if (!g) {
+          highlightNum++
         }
-      },
-      clickScreenLegend2(legendName,index){
-        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
-        let curIsGrey=this.isGreyScreen[index];
-        if(this.echartModalStore){
-          this.screenLegendListMore.forEach((item,i)=>{
-            let isGrey = this.isGreyScreen[i];
-            if(index != i){
-              if(!curIsGrey && !isGrey){
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }else if(!curIsGrey && isGrey){
-                this.echartModalStore.dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                });
-              }else{
-                this.echartModalStore.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-              }
-            }else {
+      })
+      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
+      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = this.echartModalStore
+      if (echart) {
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.isGreyScreen = this.isGreyScreen.map(() => false)
+        } else {
+          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
+        }
+      }
+    },
+    clickScreenLegend2 (legendName, index) {
+      // 点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+      const curIsGrey = this.isGreyScreen[index]
+      if (this.echartModalStore) {
+        this.screenLegendListMore.forEach((item, i) => {
+          const isGrey = this.isGreyScreen[i]
+          if (index != i) {
+            if (!curIsGrey && !isGrey) {
+              this.echartModalStore.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+            } else if (!curIsGrey && isGrey) {
               this.echartModalStore.dispatchAction({
                 type: 'legendSelect',
                 name: item.name
-              });
+              })
+            } else {
+              this.echartModalStore.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
             }
-          });
-          this.isGreyScreen.forEach((item,i)=>{
-            if(index != i){
-              if(!curIsGrey && !item){
-                this.$set(this.isGreyScreen, i, true);
-              }else if(!curIsGrey && item){
-                this.$set(this.isGreyScreen, i, false);
-              }else{
-                this.$set(this.isGreyScreen, i, true);
+          } else {
+            this.echartModalStore.dispatchAction({
+              type: 'legendSelect',
+              name: item.name
+            })
+          }
+        })
+        this.isGreyScreen.forEach((item, i) => {
+          if (index != i) {
+            if (!curIsGrey && !item) {
+              this.$set(this.isGreyScreen, i, true)
+            } else if (!curIsGrey && item) {
+              this.$set(this.isGreyScreen, i, false)
+            } else {
+              this.$set(this.isGreyScreen, i, true)
+            }
+          } else {
+            if (item === true) {
+              this.$set(this.isGreyScreen, i, false)
+            }
+          }
+        })
+      }
+    },
+    clearData () {
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).clear()
+        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
+      }
+    },
+    formatLegend (chartWidth, name) {
+      if (!name) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.querySelector('.temp-dom')
+      span.textContent = name
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
+      if (txtWidth < chartWidth) {
+        return name
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
+        return name.slice(0, charNum) + '...'
+      }
+    },
+    // chartSite用于区分是全屏显示还是局部显示
+    initChart (chartInfo, dataArg, ele, chartSite, legend) {
+      this.chartInfo = chartInfo
+      const self = this
+      this.chartType = '' // 图表类型
+      if (chartInfo.type === 4) { // line,bar
+        this.chartType = 'line'
+      }
+      let minTime = null
+      let maxTime = null
+      if (dataArg.length > 0 && dataArg[0].data &&
+          dataArg[0].data.length > 0 && dataArg[0].data[0].length > 0) {
+        const len = dataArg[0].data.length - 1
+        minTime = dataArg[0].data[0][0]
+        maxTime = dataArg[0].data[len][0]
+      }
+      if (chartSite === 'local') {
+        setChart(this.chartIndex, echarts.init(ele))
+        // getChart(this.chartIndex) = echarts.init(ele);
+        // chartId='lineChartArea';
+      } else if (chartSite === 'screen') {
+        this.echartModalStore = echarts.init(ele)
+        // chartId='screenShowArea';
+      }
+      const chartWidth = ele.clientWidth
+
+      const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
+      const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
+      let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      let maxValue = maxValueCopies.maxValue
+      // let minValue = maxValueCopies.minValue
+      if (chartInfo.unit && dataArg.length > 0) {
+        maxValue = dataArg[0].data[0][1]
+        // minValue = dataArg[0].data[0][1]
+        for (let j = 0; j < dataArg.length; j++) {
+          dataArg[j].showAllSymbol = false
+        }
+      }
+      let dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      const oldDot = maxValueCopies.oldDot
+      let option = {
+        title: {
+          show: false
+        },
+        color: this.bgColorList,
+        toolbox: {
+          show: false,
+          top: '0',
+          right: '18',
+          showTitle: false,
+          feature: {
+            dataZoom: {
+              yAxisIndex: false,
+              title: {
+                zoom: self.$t('overall.toolBox.zoom'),
+                back: self.$t('overall.toolBox.back')
               }
-            }else{
-              if(item === true){
-                this.$set(this.isGreyScreen, i, false);
+            },
+            magicType: {
+              type: ['stack'],
+              title: {
+                stack: self.$t('overall.toolBox.stack')
+              },
+              iconStyle: {
+                borderColor: stackIconBorderColor
+              },
+              emphasis: {
+                borderColor: stackIconChooseBorderColor
               }
             }
+          },
+          tooltip: { // 和 option.tooltip 的配置项相同
+            show: true,
+            position: 'top',
+            formatter: function (param) {
+              return param.title // 自定义的 DOM 结构
+            },
+            backgroundColor: 'rgba(255,255,255,0)',
+            borderColor: 'rgba(255,255,255,0)',
+            textStyle: {
+              fontSize: 12,
+              color: '#439AC6'
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          confine: false,
+          backgroundColor: 'rgba(221,228,237,1)',
+          textStyle: {
+            color: '#000'
+          },
+          axisPointer: {
+            snap: false,
+            animation: false
+          },
+          extraCssText: 'z-index:1000;',
+          /* enterable:true, 导致tooltip不消失，显示多个tooltip */
+          position: function (point, params, dom, rect, size) {
+            dom.style.transform = 'translateZ(0)'
+            const windowWidth = window.innerWidth// 窗口宽度
+            const windowHeight = window.innerHeight// 窗口高度
+            const windowMouse = getMousePoint()
+            // 提示框位置
+            let x = 0
+            let y = 0
+            // 当前鼠标位置
+            const pointX = point[0]
+            const pointY = point[1]
+            // 外层div大小
+            const viewWidth = size.viewSize[0]
+            // const viewHeight = size.viewSize[1]
+            // 提示框大小
+            const boxWidth = size.contentSize[0]
+            const boxHeight = size.contentSize[1]
+            if (chartSite === 'local') { // 本地显示
+              const chartDom = document.getElementById(chartInfo.title + '_' + chartInfo.id)
+              if (chartDom) {
+                // const parTop = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetTop
+                const parleft = document.getElementById(chartInfo.title + '_' + chartInfo.id).offsetLeft
+
+                const parent = document.getElementById('tableList')
+                // const parClientHeight = parent.clientHeight// 可视高度
+                const parClientWidth = parent.clientWidth// 可视宽度
+                // const parScrollTop = parent.scrollTop
+                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+                  x = pointX + 10
+                } else {
+                  x = pointX - boxWidth
+                }
+                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                  y = pointY + 15
+                } else {
+                  y = pointY - boxHeight - 10
+                }
+                return [x, y]
+              } else { // preview page
+                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
+                  x = pointX + 15
+                } else {
+                  x = pointX - boxWidth - 15
+                }
+                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                  y = pointY + 15
+                } else {
+                  y = pointY - boxHeight - 10
+                }
+                return [x, y]
+              }
+            } else {
+              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
+                x = pointX + 10
+              } else {
+                x = pointX - boxWidth
+              }
+              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+                y = pointY + 15
+              } else {
+                y = pointY - boxHeight - 10
+              }
+              return [x, y]
+            }
+          },
+          formatter: function (params) {
+            let str = '<div>'
+            let sum = 0
+            params.forEach((item, i) => {
+              const tip = legend[item.seriesIndex]
+              const color = self.bgColorList[item.seriesIndex]
+              if (i === 0) {
+                const value = item.data[0]
+                const tData = new Date(value)
+                str += '<div style="margin-bottom: 5px">'
+                str += bus.timeFormate(tData)
+                str += '</div>'
+              }
+              let val = item.data[1] ? parseFloat(Number(item.data[1]).toFixed(2)) : ''
+              if (val === 0) {
+                val = Number(item.data[1]).toExponential(2)
+              }
+              sum += self.numberWithEConvent(val)
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+              str += '<div style="padding-left: 10px;">'
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, -1, oldDot)
+              str += '</div>'
+              str += '</div>'
+            })
+            if (self.data.type === 'stackArea' || self.isStackArea) {
+              if (!self.stackTotalColor || self.stackTotalColor == '') {
+                self.stackTotalColor = randomcolor()
+              }
+              sum = parseFloat(Number(sum).toFixed(2))
+              str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+              str += '<div style="line-height: 18px; font-size: 12px;padding-left:0px;">'
+              str += `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`
+              str += self.$t('dashboard.panel.chartTotal')
+              str += '</div>'
+              str += '<div style="padding-left: 10px;">'
+              str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+              str += '</div>'
+              str += '</div>'
+            }
+
+            str += '</div>'
+            return str
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          top: 30,
+          left: 0,
+          right: 30,
+          containLabel: true,
+          bottom: 8// 156
+        },
+        xAxis: {
+          type: 'time',
+          animation: false,
+          showAllSymbol: false,
+          axisLabel: {
+            interval: '0',
+            showMaxLabel: false,
+            rotate: 0,
+            show: true,
+            fontSize: 10,
+            formatter: function (value) {
+              const tData = new Date(value)
+              let hour = tData.getHours()
+              hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
+              let minute = tData.getMinutes()
+              minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
+              if (minTime !== null && maxTime !== null) {
+                const diffSec = (maxTime - minTime) / 1000
+                const secOneDay = 24 * 60 * 60// 1天的秒数
+                const secOneMonth = secOneDay * 30// 30天的秒数
+                if (diffSec <= secOneDay) { // 同一天
+                  return [hour, minute].join(':')
+                } else if (diffSec < secOneMonth) { // 大于1天，小于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/') + ' ' + [hour, minute].join(':')
+                } else { // 大于等于30天
+                  return [tData.getMonth() + 1, tData.getDate()].join('/')
+                }
+              } else {
+                return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('/') + '\n' +
+                    [hour, minute].join(':')
+              }
+            }
+          },
+          axisPointer: { // y轴上显示指针对应的值
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#d9d9d9',
+              opacity: 0.8,
+              width: 1
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+          // boundaryGap:['20%', '0'],
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#d9d9d9',
+              opacity: 0.8,
+              width: 1
+            }
+          },
+          // maxInterval:{},
+          // 去掉y轴--start
+          axisLine: {
+            show: false
+          },
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5),
+          axisTick: {
+            show: false
+          },
+          // 去掉y轴--end
+          axisLabel: {
+            show: true,
+            fontSize: 10,
+            formatter: function (val, index) {
+              let value = val
+              if (val !== 0) {
+                value = parseFloat(Number(val).toFixed(2))
+                if (value === 0) {
+                  value = Number(val).toExponential(2)
+                }
+              }
+              let chartUnit = chartInfo.unit
+              chartUnit = chartUnit || 2
+              const unit = chartDataFormat.getUnit(chartUnit)
+              const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
+              if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
+                dot = 2
+              }
+              if (flag || dot == 0) {
+                dot = 1
+              }
+              return unit.compute(value, index, -1, dot)
+            }
+          }
+          // boundaryGap:[0,0.2]
+        },
+        useUTC: false, // 使用本地时间
+        series: dataArg
+      }
+      if (unit.type == 'Time') {
+        delete option.yAxis.maxInterval
+      }
+      // params.series = dataArg;
+      if (chartSite === 'local') { // 本地显示
+        if (legend) {
+          this.legendList = []
+          this.isGrey = []
+          legend.forEach((item, i) => {
+            const legend = {
+              name: item.name,
+              alias: item.alias,
+              color: item.color,
+              showText: this.formatLegend(chartWidth, item.name)
+            }
+            this.legendList.push(legend)
+            this.isGrey.push(false)
           })
         }
-      },
-      clearData(){
-        if(getChart(this.chartIndex)){
-          getChart(this.chartIndex).clear();
-          // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
+        this.legendListMore = this.legendList.filter((item, index) => index < this.seriesLength)
+        if (this.hasLegendOptions) {
+          this.computeLegendData(this.legendListMore, dataArg, 'local')
         }
-      },
-      formatLegend(chartWidth,name){
-        if(!name){
-          return '';
-        }
-        //计算宽度
-        let span = document.querySelector(".temp-dom");
-        span.textContent = name;
-        let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
-        if(txtWidth < chartWidth){
-          return name;
-        }else {
-          let charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-          return name.slice(0,charNum)+'...';
-        }
-      },
-      // chartSite用于区分是全屏显示还是局部显示
-      initChart(chartInfo, dataArg, ele, chartSite,legend) {
-        this.chartInfo=chartInfo;
-        const self = this;
-        this.chartType = ''; // 图表类型
-        if ( chartInfo.type === 4) {//line,bar
-          this.chartType = 'line';
-        }
-        let minTime = null;
-        let maxTime = null;
-        if(dataArg.length>0 && dataArg[0].data
-          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
-          let len = dataArg[0].data.length-1;
-          minTime = dataArg[0].data[0][0];
-          maxTime = dataArg[0].data[len][0];
-        }
-        if (chartSite === 'local') {
-          setChart(this.chartIndex, echarts.init(ele));
-          //getChart(this.chartIndex) = echarts.init(ele);
-          //chartId='lineChartArea';
-        }else if (chartSite === 'screen') {
-          this.echartModalStore = echarts.init(ele);
-          //chartId='screenShowArea';
-        }
-        var chartWidth = ele.clientWidth;
-
-        let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
-        let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
-        if(chartInfo.unit &&dataArg.length>0){
-          maxValue=dataArg[0].data[0][1];
-          minValue=dataArg[0].data[0][1];
-          for(let j = 0; j < dataArg.length ; j++){
-            dataArg[j].showAllSymbol=false;
-          }
-        }
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        var option = {
-          title:{
-            show:false,
-          },
-          color: this.bgColorList,
-          toolbox:{
-            show:false,
-            top:'0',
-            right:'18',
-            showTitle:false,
-            feature:{
-              dataZoom:{
-                yAxisIndex:false,
-                title:{
-                  zoom:self.$t('overall.toolBox.zoom'),
-                  back:self.$t('overall.toolBox.back'),
-                }
-              },
-              magicType:{
-                type:['stack'],
-                title:{
-                  stack:self.$t('overall.toolBox.stack'),
-                },
-                iconStyle:{
-                  borderColor:stackIconBorderColor,
-                },
-                emphasis:{
-                  borderColor:stackIconChooseBorderColor,
-                },
-              },
-            },
-            tooltip: { // 和 option.tooltip 的配置项相同
-              show: true,
-              position:'top',
-              formatter: function (param) {
-                return param.title; // 自定义的 DOM 结构
-              },
-              backgroundColor:'rgba(255,255,255,0)',
-              borderColor :'rgba(255,255,255,0)',
-              textStyle: {
-                fontSize: 12,
-                color : '#439AC6'
-              },
+        this.$nextTick(() => {
+          setTimeout(function () {
+            const divHeight = self.$refs.legendArea.offsetHeight
+            if (!chartInfo.height) {
+              getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+            } else {
+              getChart(self.chartIndex).resize({ height: (chartInfo.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+            }
+            if (dataArg && dataArg.length > 0) {
+              getChart(self.chartIndex).clear()
+              getChart(self.chartIndex).setOption(option)// 创建图表
+              self.noData = false
+            } else {
+              self.noData = true
+              option = chartConfig.getOptionNoData('noData')
+              getChart(self.chartIndex).clear()
+              getChart(self.chartIndex).setOption(option)// 创建图表
             }
-          },
-          tooltip: {
-            trigger: 'axis',
-            confine:false,
-            backgroundColor:'rgba(221,228,237,1)',
-            textStyle:{
-              color:'#000'
-            },
-            axisPointer:{
-              snap:false,
-              animation:false,
-            },
-            extraCssText:'z-index:1000;',
-            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
-            position:function(point,params,dom,rect,size){
-              dom.style.transform = "translateZ(0)";
-              var windowWidth=window.innerWidth;//窗口宽度
-              var windowHeight=window.innerHeight;//窗口高度
-              var windowMouse=getMousePoint();
-              //提示框位置
-              var x=0;
-              var y=0;
-              //当前鼠标位置
-              var pointX = point[0];
-              var pointY = point[1];
-              //外层div大小
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              //提示框大小
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              if (chartSite === 'local') { // 本地显示
-                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
-                if(chartDom){
-                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
-                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
 
-                  let parent = document.getElementById('tableList');
-                  let parClientHeight = parent.clientHeight;//可视高度
-                  let parClientWidth = parent.clientWidth;//可视宽度
-                  let parScrollTop = parent.scrollTop;
-                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-                    x=pointX+10;
-                  }else{
-                    x = pointX - boxWidth;
-                  }
-                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                    y = pointY + 15;
-                  }else {
-                    y = pointY - boxHeight - 10;
-                  }
-                  return [x,y];
-                }else {//preview page
+            self.$refs['localLoading' + self.chartIndex].endLoading()
+            self.firstShow = true // 展示操作按键
+          }, 100)
 
-                  if(windowMouse.x<(windowWidth/2)){//说明鼠标在左边放不下提示框
-                    x=pointX + 15;
-                  }else{
-                    x = pointX - boxWidth - 15;
-                  }
-                  if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                    y = pointY + 15;
-                  }else {
-                    y = pointY - boxHeight - 10;
-                  }
-                  return [x,y];
-                }
-              }else {
-                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
-                  x=pointX+10;
-                }else{
-                  x = pointX - boxWidth;
-                }
-                if(windowMouse.y + 50 +boxHeight<windowHeight){//说明鼠标上面放不下提示框
-                  y = pointY + 15;
-                }else {
-                  y = pointY - boxHeight - 10;
-                }
-                return [x,y];
-              }
-            },
-            formatter:function(params){
-              let str = `<div>`;
-              let sum = 0;
-              params.forEach((item, i) => {
-                let tip=legend[item.seriesIndex];
-                let color = self.bgColorList[item.seriesIndex];
-                if(i===0){
-                  let value=item.data[0];
-                  let t_date = new Date(value);
-                  str +=`<div style="margin-bottom: 5px">`;
-                  str += bus.timeFormate(t_date);
-                  str +=`</div>`;
-                }
-                let val =item.data[1]?parseFloat(Number(item.data[1]).toFixed(2)):'';
-                if(val===0){
-                  val = Number(item.data[1]).toExponential(2);
-                }
-                sum += self.numberWithEConvent(val);
-                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                str += `<div style="padding-left: 10px;">`;
-                str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,-1,oldDot);
-                str += `</div>`;
-                str += `</div>`;
-              });
-              if(self.data.type==='stackArea' || self.isStackArea){
-                if(!self.stackTotalColor||self.stackTotalColor==''){
-                  self.stackTotalColor=randomcolor();
-                }
-                sum = parseFloat(Number(sum).toFixed(2));
-                str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str +=`<div style="line-height: 18px; font-size: 12px;padding-left:0px;">`
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`;
-                str +=self.$t("dashboard.panel.chartTotal");
-                str +=`</div>`;
-                str +=`<div style="padding-left: 10px;">`;
-                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                str +=`</div>`;
-                str += `</div>`;
-              }
-
-              str +=`</div>`;
-              return str;
-            },
-          },
-          legend: {
-            show:false,
-          },
-          grid: {
-            top: 30,
-            left: 0,
-            right: 30,
-            containLabel: true,
-            bottom:8,//156
-          },
-          xAxis: {
-            type: 'time',
-            animation:false,
-            showAllSymbol:false,
-            axisLabel: {
-              interval: '0',
-              showMaxLabel:false,
-              rotate: 0,
-              show:true,
-              fontSize: 10,
-              formatter: function (value) {
-                value = value;
-                let t_date = new Date(value);
-                let hour = t_date.getHours();
-                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
-                let minute = t_date.getMinutes();
-                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
-                if(minTime!==null && maxTime!==null){
-                  let diffSec = (maxTime-minTime)/1000;
-                  let secOneDay = 24*60*60;//1天的秒数
-                  let secOneMonth = secOneDay*30;//30天的秒数
-                  if(diffSec<=secOneDay) {//同一天
-                    return [hour,minute ].join(':');
-                  }else if(diffSec<secOneMonth){//大于1天，小于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
-                  }else {//大于等于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
-                  }
-                }else {
-                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
-                    + [hour, minute].join(':');
-                }
-
-              }
-            },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            //boundaryGap:['20%', '0'],
-          },
-          yAxis: {
-            type: 'value',
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            // maxInterval:{},
-            //去掉y轴--start
-            axisLine:{
-              show:false
-            },
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-            axisTick: {
-              show: false,
-            },
-            //去掉y轴--end
-            axisLabel: {
-              show:true,
-              fontSize: 10,
-              formatter: function(val,index){
-                let value = val;
-                if (val !== 0) {
-                  value = parseFloat(Number(val).toFixed(2));
-                  if(value === 0){
-                    value = Number(val).toExponential(2);
-                  }
-                }
-                let chartUnit=chartInfo.unit;
-                chartUnit=chartUnit?chartUnit:2;
-                let unit=chartDataFormat.getUnit(chartUnit);
-                let flag=JSON.stringify(value).length>JSON.stringify(chartDataFormat.Interval(maxValue,copies,unit.type)).length;
-                if(chartDataFormat.Interval(maxValue,copies,unit.type,'min')<1&&dot<2){
-                  dot=2;
-                }
-                if(flag || dot==0){
-                  dot=1;
-                }
-                return unit.compute(value,index,-1,dot);
-              },
-            },
-            //boundaryGap:[0,0.2]
-          },
-          useUTC: false,//使用本地时间
-          series: dataArg
-        };
-        if(unit.type=='Time'){
-          delete option.yAxis.maxInterval;
-        }
-        // params.series = dataArg;
-        if (chartSite === 'local') { // 本地显示
-          if(legend){
-            this.legendList = [];
-            this.isGrey=[];
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                color:item.color,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.legendList.push(legend);
-              this.isGrey.push(false);
-            });
-          }
-          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
-          if(this.hasLegendOptions){
-            this.computeLegendData(this.legendListMore,dataArg,'local');
-          }
-          this.$nextTick(() => {
-            setTimeout(function () {
-              let divHeight = self.$refs.legendArea.offsetHeight;
-              if(!chartInfo.height){
-                getChart(self.chartIndex).resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }else {
-                getChart(self.chartIndex).resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }
-              if(dataArg&&dataArg.length>0){
-                getChart(self.chartIndex).clear();
-                getChart(self.chartIndex).setOption(option);//创建图表
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOptionNoData('noData')
-                getChart(self.chartIndex).clear();
-                getChart(self.chartIndex).setOption(option);//创建图表
-              }
-
-              self.$refs['localLoading'+self.chartIndex].endLoading();
-              self.firstShow = true; // 展示操作按键
-            }, 100);
-
-            window.addEventListener('resize', this.chartResize);
-            getChart(this.chartIndex).on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                getChart(self.chartIndex).setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-                  },
-                  tooltip: {
-                    axisPointer:{
-                      snap:false,
-                      animation:false,
-                    },
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=item.data[0];
-                          let t_date = new Date(value);
-                          str +=`<div style="margin-bottom: 5px">`;
-                          str += bus.timeFormate(t_date);
-                          str +=`</div>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]).toExponential(2);
-                        }
-                        sum += self.numberWithEConvent(val);
-                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                        str += `<div style="padding-left: 10px;">`;
-                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                        str += `</div>`;
-                        str += `</div>`;
-                      });
-                      if(self.data.type==='stackArea' || self.isStackArea){
-                        sum = parseFloat(Number(sum).toFixed(2));
-                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                        str +=self.$t("dashboard.panel.chartTotal");
-                        str +=`</div>`;
-                        str +=`<div style="padding-left: 10px;">`;
-                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                        str +=`</div>`;
-                        str += `</div>`;
+          window.addEventListener('resize', this.chartResize)
+          getChart(this.chartIndex).on('magictypechanged', function (params) {
+            self.isStackArea = !self.isStackArea
+            if (self.isStackArea) {
+              getChart(self.chartIndex).setOption({
+                toolbox: {
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: false,
+                      title: {
+                        zoom: self.$t('overall.toolBox.zoom'),
+                        back: self.$t('overall.toolBox.back')
                       }
-
-                      str +=`</div>`;
-                      return str;
                     },
-                  }
-                });
-              }else{
-                getChart(self.chartIndex).setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
+                    magicType: {
+                      type: ['stack'],
+                      title: {
+                        stack: self.$t('overall.toolBox.stack')
                       },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
+                      iconStyle: {
+                        borderColor: '#7e7e7e'
                       },
+                      emphasis: {
+                        borderColor: stackIconChooseBorderColor
+                      }
                     }
+                  }
+                },
+                tooltip: {
+                  axisPointer: {
+                    snap: false,
+                    animation: false
                   },
-                })
-              }
-            });
-          });
-        } else if (chartSite === 'screen') { // 全屏显示
-          // eslint-disable-next-line
-          if(legend){
-            this.screenLegendList = [];
-            this.isGreyScreen=[]
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                color:item.color,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.screenLegendList.push(legend);
-              this.isGreyScreen.push(false);
-            });
-          }
-          if(this.screenLegendListMore.length!==this.screenLegendList.length){
-            this.screenLegendListMore=[];
-            let screenLegendListMore=this.screenLegendList.filter((item,index)=>index<this.seriesLength);
-            this.$set(this,"screenLegendListMore",screenLegendListMore)
-            this.$forceUpdate();
-          }
-          if(this.hasLegendOptions){
-            this.computeLegendData(this.screenLegendListMore,dataArg,'screen');
-          }
-          if(self.echartModalStore){
-            self.echartModalStore.clear();
-            option.title = {};
-            self.showLegend = true;
-            self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
-          }
-          this.$nextTick(() => {
-            let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-            let divHeight = legendDiv.offsetHeight;
-            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-            let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-            self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-            setTimeout(function () {
-              if(self.screenLegendListMore.length!==self.screenLegendList.length){
-                self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index<self.seriesLength);
+                  formatter: function (params) {
+                    let str = '<div>'
+                    let sum = 0
+                    params.forEach((item, i) => {
+                      const tip = legend[item.seriesIndex]
+                      const color = self.bgColorList[item.seriesIndex]
+                      if (i === 0) {
+                        const value = item.data[0]
+                        const tData = new Date(value)
+                        str += '<div style="margin-bottom: 5px">'
+                        str += bus.timeFormate(tData)
+                        str += '</div>'
+                      }
+                      let val = parseFloat(Number(item.data[1]).toFixed(2))
+                      if (val === 0) {
+                        val = Number(item.data[1]).toExponential(2)
+                      }
+                      sum += self.numberWithEConvent(val)
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    })
+                    if (self.data.type === 'stackArea' || self.isStackArea) {
+                      sum = parseFloat(Number(sum).toFixed(2))
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+                      str += self.$t('dashboard.panel.chartTotal')
+                      str += '</div>'
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    }
 
-              }else{
-                self.seriesItemArrScreen=self.seriesItemScreen
-              }
-              option.series=self.seriesItemArrScreen;
-              if(dataArg&&dataArg.length>0){
-                self.echartModalStore.setOption(option);//显示全屏界面
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOptionNoData('noData')
-                self.echartModalStore.setOption(option);//显示全屏界面
-              }
-              self.echartModalStore.on('finished', function () {
-                let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
-                let divHeight = legendDiv.offsetHeight;
-                let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-                let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-                self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-                self.echartModalStore.off('finished');
+                    str += '</div>'
+                    return str
+                  }
+                }
               })
-            }, 100);
-
-            this.echartModalStore.on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-
-                  },
-                  tooltip: {
-                    axisPointer:{
-                      snap:false,
-                      animation:false,
-                    },
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=item.data[0];
-                          let t_date = new Date(value);
-                          str +=`<div style="margin-bottom: 5px">`;
-                          str += bus.timeFormate(t_date);
-                          str +=`</div>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]).toExponential(2);
-                        }
-                        sum += self.numberWithEConvent(val);
-                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                        str += `<div style="padding-left: 10px;">`;
-                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                        str += `</div>`;
-                        str += `</div>`;
-                      });
-                      if(self.data.type==='stackArea' || self.isStackArea){
-                        sum = parseFloat(Number(sum).toFixed(2));
-                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                        str +=self.$t("dashboard.panel.chartTotal");
-                        str +=`</div>`;
-                        str +=`<div style="padding-left: 10px;">`;
-                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                        str +=`</div>`;
-                        str += `</div>`;
+            } else {
+              getChart(self.chartIndex).setOption({
+                toolbox: {
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: false,
+                      title: {
+                        zoom: self.$t('overall.toolBox.zoom'),
+                        back: self.$t('overall.toolBox.back')
                       }
-
-                      str +=`</div>`;
-                      return str;
                     },
-                  }
-                });
-              }else{
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
+                    magicType: {
+                      type: ['stack'],
+                      title: {
+                        stack: self.$t('overall.toolBox.stack')
                       },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
+                      iconStyle: {
+                        borderColor: '#7e7e7e'
                       },
+                      emphasis: {
+                        borderColor: stackIconChooseBorderColor
+                      }
                     }
+                  }
+                }
+              })
+            }
+          })
+        })
+      } else if (chartSite === 'screen') { // 全屏显示
+        // eslint-disable-next-line
+          if(legend){
+          this.screenLegendList = []
+          this.isGreyScreen = []
+          legend.forEach((item, i) => {
+            const legend = {
+              name: item.name,
+              alias: item.alias,
+              color: item.color,
+              showText: this.formatLegend(chartWidth, item.name)
+            }
+            this.screenLegendList.push(legend)
+            this.isGreyScreen.push(false)
+          })
+        }
+        if (this.screenLegendListMore.length !== this.screenLegendList.length) {
+          this.screenLegendListMore = []
+          const screenLegendListMore = this.screenLegendList.filter((item, index) => index < this.seriesLength)
+          this.$set(this, 'screenLegendListMore', screenLegendListMore)
+          this.$forceUpdate()
+        }
+        if (this.hasLegendOptions) {
+          this.computeLegendData(this.screenLegendListMore, dataArg, 'screen')
+        }
+        if (self.echartModalStore) {
+          self.echartModalStore.clear()
+          option.title = {}
+          self.showLegend = true
+          self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
+        }
+        this.$nextTick(() => {
+          const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+          const divHeight = legendDiv.offsetHeight
+          const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+          const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+          self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
+          self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
+          setTimeout(function () {
+            if (self.screenLegendListMore.length !== self.screenLegendList.length) {
+              self.seriesItemArrScreen = self.seriesItemScreen.filter((item, index) => index < self.seriesLength)
+            } else {
+              self.seriesItemArrScreen = self.seriesItemScreen
+            }
+            option.series = self.seriesItemArrScreen
+            if (dataArg && dataArg.length > 0) {
+              self.echartModalStore.setOption(option)// 显示全屏界面
+              self.noData = false
+            } else {
+              self.noData = true
+              option = chartConfig.getOptionNoData('noData')
+              self.echartModalStore.setOption(option)// 显示全屏界面
+            }
+            self.echartModalStore.on('finished', function () {
+              const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
+              const divHeight = legendDiv.offsetHeight
+              const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+              const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+              self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`
+              self.echartModalStore.resize({ height: (sumHeight - divHeight - self.screenTitleHeight) })// 图表的高度
+              self.echartModalStore.off('finished')
+            })
+          }, 100)
+
+          this.echartModalStore.on('magictypechanged', function (params) {
+            self.isStackArea = !self.isStackArea
+            if (self.isStackArea) {
+              this.setOption({
+                toolbox: {
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: false,
+                      title: {
+                        zoom: self.$t('overall.toolBox.zoom'),
+                        back: self.$t('overall.toolBox.back')
+                      }
+                    },
+                    magicType: {
+                      type: ['stack'],
+                      title: {
+                        stack: self.$t('overall.toolBox.stack')
+                      },
+                      iconStyle: {
+                        borderColor: '#7e7e7e'
+                      },
+                      emphasis: {
+                        borderColor: stackIconChooseBorderColor
+                      }
+                    }
+                  }
+
+                },
+                tooltip: {
+                  axisPointer: {
+                    snap: false,
+                    animation: false
                   },
-                })
-              }
-            });
-          });
-        }
-        maxValueCopies = null;
-        setTimeout(() => {option = null}, 1000);
-      },
-      handleLineFeed(str,chartWidth){
-        let rlt='';
-        if(!str){
-          return '';
-        }
-        //计算宽度
-        let span = document.querySelector(".temp-dom");
-        span.textContent = name;
-        let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
-        if(txtWidth < chartWidth){
-          return str;
-        }else {
-          var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
-          return str.slice(0,charNum)+'...';
-        }
-      },
-      setColor(colorNum){
-        this.bgColorList = [
-          '#FF5200','#3685FF','#FF8D00','#00DCA2',
-          '#954Eff','#FFCB01','#f65A96','#00BFD0',
-          '#FF8BEA','#4D7693','#72577C','#99D750',
-          '#DD8270','#C475EE','#7E83FB','#7EB090',
-          '#FF9094','#00CCF5','#CF6684','#4E55FF'
-        ];
-        for(let i=0;i<colorNum-19;i++) {
-          this.bgColorList.push(randomcolor())
-        }
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
-        legend && this.setColor(legend.length);
-        legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
-        this.filter.from = filter.from;
-        if(errorMsg && errorMsg!==''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        if(area==='showFullScreen'){//全屏按时间查询
-          /*
+                  formatter: function (params) {
+                    let str = '<div>'
+                    let sum = 0
+                    params.forEach((item, i) => {
+                      const tip = legend[item.seriesIndex]
+                      const color = self.bgColorList[item.seriesIndex]
+                      if (i === 0) {
+                        const value = item.data[0]
+                        const tData = new Date(value)
+                        str += '<div style="margin-bottom: 5px">'
+                        str += bus.timeFormate(tData)
+                        str += '</div>'
+                      }
+                      let val = parseFloat(Number(item.data[1]).toFixed(2))
+                      if (val === 0) {
+                        val = Number(item.data[1]).toExponential(2)
+                      }
+                      sum += self.numberWithEConvent(val)
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip ? (tip.alias ? tip.alias : tip.name) : item.seriesName}  </div>`
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(val, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    })
+                    if (self.data.type === 'stackArea' || self.isStackArea) {
+                      sum = parseFloat(Number(sum).toFixed(2))
+                      str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+                      str += '<div style="line-height: 18px; font-size: 12px;padding-left:20px;">'
+                      str += self.$t('dashboard.panel.chartTotal')
+                      str += '</div>'
+                      str += '<div style="padding-left: 10px;">'
+                      str += chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(sum, null, 2)
+                      str += '</div>'
+                      str += '</div>'
+                    }
+
+                    str += '</div>'
+                    return str
+                  }
+                }
+              })
+            } else {
+              this.setOption({
+                toolbox: {
+                  feature: {
+                    dataZoom: {
+                      yAxisIndex: false,
+                      title: {
+                        zoom: self.$t('overall.toolBox.zoom'),
+                        back: self.$t('overall.toolBox.back')
+                      }
+                    },
+                    magicType: {
+                      type: ['stack'],
+                      title: {
+                        stack: self.$t('overall.toolBox.stack')
+                      },
+                      iconStyle: {
+                        borderColor: '#7e7e7e'
+                      },
+                      emphasis: {
+                        borderColor: stackIconChooseBorderColor
+                      }
+                    }
+                  }
+                }
+              })
+            }
+          })
+        })
+      }
+      maxValueCopies = null
+      setTimeout(() => { option = null }, 1000)
+    },
+    handleLineFeed (str, chartWidth) {
+      if (!str) {
+        return ''
+      }
+      // 计算宽度
+      const span = document.querySelector('.temp-dom')
+      span.textContent = name
+      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
+      if (txtWidth < chartWidth) {
+        return str
+      } else {
+        const charNum = `${(chartWidth - 100) / (txtWidth / str.length)}`
+        return str.slice(0, charNum) + '...'
+      }
+    },
+    setColor (colorNum) {
+      this.bgColorList = [
+        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
+        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
+        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
+        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
+        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
+      ]
+      for (let i = 0; i < colorNum - 19; i++) {
+        this.bgColorList.push(randomcolor())
+      }
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
+      legend && this.setColor(legend.length)
+      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
+      this.filter.from = filter.from
+      if (errorMsg && errorMsg !== '') {
+        this.isError = true
+        this.errorContent = errorMsg
+      } else {
+        this.isError = false
+        this.errorContent = ''
+      }
+      if (area === 'showFullScreen') { // 全屏按时间查询
+        /*
           this.legend = legend;
           this.data = chartItem;
           this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
@@ -1259,320 +1254,317 @@
           //this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
           */
-        }else{
-          this.legend = legend;
-          this.$refs['localLoading'+this.chartIndex].startLoading();
-          this.divFirstShow = true;
-          this.firstShow = true; // 展示操作按键
-          this.panelIdInner = panelId;
-          this.data = chartItem;
-          this.seriesItem = seriesItem;
-          this.seriesItemScreen = seriesItem;
+      } else {
+        this.legend = legend
+        this.$refs['localLoading' + this.chartIndex].startLoading()
+        this.divFirstShow = true
+        this.firstShow = true // 展示操作按键
+        this.panelIdInner = panelId
+        this.data = chartItem
+        this.seriesItem = seriesItem
+        this.seriesItemScreen = seriesItem
 
-          this.hasLegendOptions=this.findLegendOptions()
-          if(this.hasLegendOptions){
-            let sortedOptionKeys=['min','max','avg','last','total']
-            this.legendOptions=sortedOptionKeys.map(item=>{ return {option:item,sort:'',value:chartItem.param.legendValue[item]}})
-            this.screenLegendOptions=sortedOptionKeys.map(item=>{ return {option:item,sort:'',value:chartItem.param.legendValue[item]}})
-          }
-
-          if (filter) { // 保存数据,用于同步时间
-            this.stableFilter = filter;
-            this.searchTime[0] = filter.start_time;
-            this.searchTime[1] = filter.end_time;
-            this.oldSearchTime[0] = this.searchTime[0];
-            this.oldSearchTime[1] = this.searchTime[1];
-          }
-          //this.seriesItem=seriesItem;
-          let seriesItemArr=seriesItem;
-          if(seriesItem.length>this.seriesLength){
-            seriesItemArr=seriesItem.filter((item,index)=>index<this.seriesLength); // 只查看前seriesLength条
-            this.seriesItemArr=seriesItemArr;
-            this.seriesItemArrScreen=seriesItemArr;
-
-          }else{
-            this.seriesItemArr=seriesItem
-          }
-
-          this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local',legend);
+        this.hasLegendOptions = this.findLegendOptions()
+        if (this.hasLegendOptions) {
+          const sortedOptionKeys = ['min', 'max', 'avg', 'last', 'total']
+          this.legendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
+          this.screenLegendOptions = sortedOptionKeys.map(item => { return { option: item, sort: '', value: chartItem.param.legendValue[item] } })
         }
 
-      },
-      resize(chartItem) {
-        let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
-      },
-      clearChart(){
-        if(getChart(this.chartIndex)){
-          getChart(this.chartIndex).clear();
+        if (filter) { // 保存数据,用于同步时间
+          this.stableFilter = filter
+          this.searchTime[0] = filter.start_time
+          this.searchTime[1] = filter.end_time
+          this.oldSearchTime[0] = this.searchTime[0]
+          this.oldSearchTime[1] = this.searchTime[1]
         }
-        if(this.echartModalStore){
-          this.echartModalStore.clear();
+        // this.seriesItem=seriesItem;
+        let seriesItemArr = seriesItem
+        if (seriesItem.length > this.seriesLength) {
+          seriesItemArr = seriesItem.filter((item, index) => index < this.seriesLength) // 只查看前seriesLength条
+          this.seriesItemArr = seriesItemArr
+          this.seriesItemArrScreen = seriesItemArr
+        } else {
+          this.seriesItemArr = seriesItem
         }
-        this.data = {};
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 重新请求数据 刷新操作
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        let id = this.data.id;
-        this.clearChart();
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', id);
-      },
-      screenRefreshChart(){
-        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
-      },
-      initDialog(){
-        //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
-        this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);
-        // 日期组件同步时间
-        /*
+
+        this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local', legend)
+      }
+    },
+    resize (chartItem) {
+      const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
+      chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`
+    },
+    clearChart () {
+      if (getChart(this.chartIndex)) {
+        getChart(this.chartIndex).clear()
+      }
+      if (this.echartModalStore) {
+        this.echartModalStore.clear()
+      }
+      this.data = {}
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 重新请求数据 刷新操作
+    refreshChart () {
+      this.dropdownMenuShow = false
+      const id = this.data.id
+      this.clearChart()
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', id)
+    },
+    screenRefreshChart () {
+      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
+    },
+    initDialog () {
+      // 此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
+      this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen', this.legend)
+      // 日期组件同步时间
+      /*
         this.$refs.calendar.initTime({
           start: this.stableFilter.start_time,
           end: this.stableFilter.end_time,
         });
         */
-      },
-      changeDate(st){
-        this.oldSearchTime=st;
-        this.searchTime = st;
-        this.filter.start_time = st[0];
-        this.filter.end_time = st[1];
-      },
-      // 全屏查看
-      showAllScreen() {
-        this.dropdownMenuShow=false;
-        // 初始化同步时间
-        this.filter.start_time = this.stableFilter.start_time;
-        this.filter.end_time = this.stableFilter.end_time;
-        //this.searchTime = this.oldSearchTime;
-        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-        // this.$refs.calendarPanel.setCustomTime(this.searchTime);
-        this.screenModal = true;
-        this.isGreyScreen=[];
+    },
+    changeDate (st) {
+      this.oldSearchTime = st
+      this.searchTime = st
+      this.filter.start_time = st[0]
+      this.filter.end_time = st[1]
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      // 初始化同步时间
+      this.filter.start_time = this.stableFilter.start_time
+      this.filter.end_time = this.stableFilter.end_time
+      // this.searchTime = this.oldSearchTime;
+      this.$set(this.searchTime, 0, this.oldSearchTime[0])
+      this.$set(this.searchTime, 1, this.oldSearchTime[1])
+      // this.$refs.calendarPanel.setCustomTime(this.searchTime);
+      this.screenModal = true
+      this.isGreyScreen = []
 
-        this.seriesItemScreen = this.seriesItem;
-        // this.seriesItemScreen = this.seriesItem;
-        /*
+      this.seriesItemScreen = this.seriesItem
+      // this.seriesItemScreen = this.seriesItem;
+      /*
                 this.searchTime = [];
                 this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
                 this.searchTime[1] = this.oldSearchTime[1];
                 this.seriesItemScreen = this.seriesItem;
                 this.screenModal = true;
                 */
-        // this.dateChange();
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
+      // this.dateChange();
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
-          });
-        });
-      },
-      dateChange(time) {
-        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-        this.echartModalStore.clear();
-        this.showLegend = false;
-        this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-        if (this.showSetting) {
-          this.getQueryChart('list');
-        } else {
-          this.getQueryChart('dashboard');
-        }
-      },
-      // 查询数据,修改日期查询全屏数据
-      getQueryChart(type) {
-        /*
+          }
+        })
+      })
+    },
+    dateChange (time) {
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.echartModalStore.clear()
+      this.showLegend = false
+      this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      if (this.showSetting) {
+        this.getQueryChart('list')
+      } else {
+        this.getQueryChart('dashboard')
+      }
+    },
+    // 查询数据,修改日期查询全屏数据
+    getQueryChart (type) {
+      /*
         if (this.echartModalStore) {
           this.echartModalStore.showLoading();
         }
         */
-        let axiosArr = [];
-        this.$nextTick(() => {
-          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
-            let now = new Date();
-            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-            this.searchTime[0] = startTime;
-            this.searchTime[1] = endTime;
-          }
-          let step = bus.getStep(startTime,endTime);
-          if (type === 'list') { // 普通模式,主控台使用
-            axiosArr = this.data.elements.map((ele) => {
-              const filterItem = ele;
-              let query = encodeURIComponent(filterItem.expression);
-              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
-                !this.chartInfo.param && (this.chartInfo.param = {});
-                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
-                query+='&nullType='+this.chartInfo.param.nullType;
-              }
-              return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-            });
-          } else if (type === 'dashboard') { // 概览模式,指标概览中使用
-            // 概览模式,需要区分单独一个和多个
-            if (this.stableFilter.chartCount === 'multiple') {
-              let query = encodeURIComponent(this.data.title);
-              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
-                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
-                query+='&nullType='+this.chartInfo.param.nullType;
-              }
-              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
-            } else {
-              let query = encodeURIComponent(this.data.elements[0].expression);
-              if(this.chartInfo.type==='line'||this.chartInfo.type==='bar'||this.chartInfo.type==='stackArea'){//如果是这三个 默认给connected
-                this.chartInfo.param.nullType=this.chartInfo.param.nullType||'connected';
-                query+='&nullType='+this.chartInfo.param.nullType;
-              }
-              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
+      let axiosArr = []
+      this.$nextTick(() => {
+        let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        if (!startTime || !endTime) { // 如果时间为空，则默认取最近1小时
+          const now = new Date()
+          startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+          endTime = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+          this.searchTime[0] = startTime
+          this.searchTime[1] = endTime
+        }
+        const step = bus.getStep(startTime, endTime)
+        if (type === 'list') { // 普通模式,主控台使用
+          axiosArr = this.data.elements.map((ele) => {
+            const filterItem = ele
+            let query = encodeURIComponent(filterItem.expression)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              !this.chartInfo.param && (this.chartInfo.param = {})
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
             }
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+          })
+        } else if (type === 'dashboard') { // 概览模式,指标概览中使用
+          // 概览模式,需要区分单独一个和多个
+          if (this.stableFilter.chartCount === 'multiple') {
+            let query = encodeURIComponent(this.data.title)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
+            }
+            axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
+          } else {
+            let query = encodeURIComponent(this.data.elements[0].expression)
+            if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
+              this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
+              query += '&nullType=' + this.chartInfo.param.nullType
+            }
+            axiosArr = [this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)]
           }
-          // 一个图表
-          axios.all(axiosArr).then((res) => {
-            if (res.length > 0) {
-              const series = [];
-              const legend = [];
-              const sumData = {
-                name: 'sum',
-                data: [],
-                visible: true,
-                threshold: null,
-              };
-              if(!this.data.type){
-                this.data.type='line';
-              }
-              res.forEach((response,pos) => {
-                if (response.status === 'success') {
-                  this.isError = false;
-                  this.errorContent = "";
-                  if (response.data.result) {
-                    // 循环处理每个elements下获取的数据列
-                    response.data.result.forEach((queryItem,innerPos) => {
-                      const seriesItem = {
-                        theData: {
-                          name: '',
-                          symbol:'emptyCircle',  //去掉点
-                          symbolSize:[2,2],
-                          smooth:0.2,  //曲线变平滑
-                          showSymbol:false,
-                          data: [],
-                          type:this.data.type,
-                          lineStyle: {
-                            width: 1,
-                            opacity: 0.9
-                          },
-                          //visible: true,
-                          //threshold: null,
-                        },
-                        metric_name: '',
-                      };
-                      if(this.data.type === 'stackArea'){
-                        seriesItem.theData.type='line';
-                        seriesItem.theData.stack=this.data.title;
-                        seriesItem.theData.areaStyle={"opacity": 0.3};
-                      }
-
-                      if((this.data.type === 'line'||this.data.type === 'stackArea'||this.data.type === 'bar')&& this.data.param && this.data.param.threshold){
-                        seriesItem.theData.markLine={
-                          silent: true,
-                          symbol:['circle','circle'],
-                          label:{
-                            distance:this.computeDistance(chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(this.data.param.threshold)),
-                            formatter:function(params){
-                              return chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(params.value)
-                            }
-                          },
-                          lineStyle:{
-                            color:'#d64f40',
-                            width:2,
-                            type:'dotted'
-                          },
-                          data: [{
-                            yAxis: Number(this.data.param.threshold)
-                          }, ]
+        }
+        // 一个图表
+        axios.all(axiosArr).then((res) => {
+          if (res.length > 0) {
+            const series = []
+            const legend = []
+            /* const sumData = {
+              name: 'sum',
+              data: [],
+              visible: true,
+              threshold: null
+            } */
+            if (!this.data.type) {
+              this.data.type = 'line'
+            }
+            res.forEach((response, pos) => {
+              if (response.status === 'success') {
+                this.isError = false
+                this.errorContent = ''
+                if (response.data.result) {
+                  // 循环处理每个elements下获取的数据列
+                  response.data.result.forEach((queryItem, innerPos) => {
+                    const seriesItem = {
+                      theData: {
+                        name: '',
+                        symbol: 'emptyCircle', // 去掉点
+                        symbolSize: [2, 2],
+                        smooth: 0.2, // 曲线变平滑
+                        showSymbol: false,
+                        data: [],
+                        type: this.data.type,
+                        lineStyle: {
+                          width: 1,
+                          opacity: 0.9
                         }
-                      }
+                        // visible: true,
+                        // threshold: null,
+                      },
+                      metric_name: ''
+                    }
+                    if (this.data.type === 'stackArea') {
+                      seriesItem.theData.type = 'line'
+                      seriesItem.theData.stack = this.data.title
+                      seriesItem.theData.areaStyle = { opacity: 0.3 }
+                    }
 
-                      // 图表中每条线的名字,后半部分
-                      // let host = `${queryItem.metric.__name__}{`;//up,
-                      let host = '';//up,
-                      if(queryItem.metric.__name__){
-                        host = `${queryItem.metric.__name__}{`;//up,
-                      }
-                      const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                      // 设置时间-数据格式对
-                      const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      // 判断是否有数据,&& tagsArr.length > 0
-                      if (dpsArr.length > 0 ) {
-                        tagsArr.forEach((tag, i) => {
-                          if (tag !== '__name__') {
-                            host += `${tag}="${queryItem.metric[tag]}",`;
+                    if ((this.data.type === 'line' || this.data.type === 'stackArea' || this.data.type === 'bar') && this.data.param && this.data.param.threshold) {
+                      seriesItem.theData.markLine = {
+                        silent: true,
+                        symbol: ['circle', 'circle'],
+                        label: {
+                          distance: this.computeDistance(chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(this.data.param.threshold)),
+                          formatter: function (params) {
+                            return chartDataFormat.getUnit(this.data.unit ? this.data.unit : 2).compute(params.value)
                           }
-                        });
-                        if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                        if(queryItem.metric.__name__){
-                          host +="}";
-                        }
-                        if(!host || host===''){
-                          host = this.data.elements[pos].expression;
-                        }
-                        let alias=this.dealLegendAlias(host,this.data.elements[pos].legend);
-                        if(!alias || alias===''){
-                          alias = host;
-                        }
-                        legend.push({name: host+"-"+this.data.elements[pos].id+"-" + innerPos, alias: alias});
-                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                        },
+                        lineStyle: {
+                          color: '#d64f40',
+                          width: 2,
+                          type: 'dotted'
+                        },
+                        data: [{
+                          yAxis: Number(this.data.param.threshold)
+                        }]
+                      }
+                    }
 
-                        seriesItem.theData.name = host +"-"+this.data.elements[pos].id+"-"+ innerPos;
-                        seriesItem.metric_name = seriesItem.theData.name;
-                        // 将秒改为毫秒
-                        //alert('table=='+JSON.stringify(queryItem))
-                        seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                          return [dpsItem[0] * 1000, dpsItem[1]];
-                        });
-                        series.push(seriesItem.theData);
+                    // 图表中每条线的名字,后半部分
+                    // let host = `${queryItem.metric.__name__}{`;//up,
+                    let host = ''// up,
+                    if (queryItem.metric.__name__) {
+                      host = `${queryItem.metric.__name__}{`// up,
+                    }
+                    const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                    // 设置时间-数据格式对
+                    const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                    // 判断是否有数据,&& tagsArr.length > 0
+                    if (dpsArr.length > 0) {
+                      tagsArr.forEach((tag, i) => {
+                        if (tag !== '__name__') {
+                          host += `${tag}="${queryItem.metric[tag]}",`
+                        }
+                      })
+                      if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
+                      if (queryItem.metric.__name__) {
+                        host += '}'
+                      }
+                      if (!host || host === '') {
+                        host = this.data.elements[pos].expression
+                      }
+                      let alias = this.dealLegendAlias(host, this.data.elements[pos].legend)
+                      if (!alias || alias === '') {
+                        alias = host
+                      }
+                      legend.push({ name: host + '-' + this.data.elements[pos].id + '-' + innerPos, alias: alias })
+                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
 
-                      } else if (this.data.elements && this.data.elements[innerPos]) {
-                        // 无数据提示
-                        /*
+                      seriesItem.theData.name = host + '-' + this.data.elements[pos].id + '-' + innerPos
+                      seriesItem.metric_name = seriesItem.theData.name
+                      // 将秒改为毫秒
+                      // alert('table=='+JSON.stringify(queryItem))
+                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                        return [dpsItem[0] * 1000, dpsItem[1]]
+                      })
+                      series.push(seriesItem.theData)
+                    } else if (this.data.elements && this.data.elements[innerPos]) {
+                      // 无数据提示
+                      /*
                         const currentInfo = chartItem.elements[innerPos];
                         const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
                         this.$message.warning({
@@ -1581,293 +1573,291 @@
                           closable: true,
                         });
                         */
-                      }
-                    });
-                  }
-                }else{
-                  this.isError = true;
-                  if(response.msg){
-                    this.errorContent = response.msg;
-                  }else if(response.error){
-                    this.errorContent = response.error;
-                  }else {
-                    this.errorContent = response;
-                  }
+                    }
+                  })
+                }
+              } else {
+                this.isError = true
+                if (response.msg) {
+                  this.errorContent = response.msg
+                } else if (response.error) {
+                  this.errorContent = response.error
+                } else {
+                  this.errorContent = response
                 }
-              });
-              this.setColor(legend.length);
-              this.seriesItemScreen=series;
-              // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
-              this.initChart(this.data,series, this.$refs.screenShowArea, 'screen',legend);
-            }
-          }).catch((error) => {
-            if (error) {
-              this.$message.error(error.toString());
-            }
-          });
-        });
-      },
-      computeDistance:function(str){
-        let span = document.querySelector(".temp-dom");
-        span.textContent = str;
-        let txtWidth = parseFloat(window.getComputedStyle(span).width);
-        return Number('-'+(txtWidth+5));
-      },
-      showLoad(chartItem) {
-        //设置高度
-        this.$nextTick(() => {
-          const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
-          let height = Math.floor(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
-          if(height<this.$chartResizeTool.minHeight){
-            height = this.$chartResizeTool.minHeight;
-          }
-          chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
-        });
-        this.clearData();
-        this.firstShow = false;
-        this.$refs['localLoading'+this.chartIndex].startLoading();
-        this.divFirstShow = true;
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
-
-      },
-      // 获取格式
-      getNumStr(num) {
-        if (num >= 1000) {
-          const kbNum = num / 1000;
-          if (kbNum >= 1000) {
-            const mbNum = kbNum / 1000;
-            if (mbNum > 1000) {
-              const gbNum = mbNum / 1000;
-              return `${gbNum.toFixed(2)}B`;
-            }
-            return `${mbNum.toFixed(2)}M`;
-          }
-          return `${kbNum.toFixed(2)}K`;
-        }
-        return num.toFixed(2);
-      },
-      handleClose(){},
-      // 加载更多
-      loadMore(){
-        this.seriesItemArr=this.seriesItem;
-        this.legendListMore=this.legendList;
-        let chartInfo=this.data;
-        let dataArg=this.seriesItem;
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        getChart(this.chartIndex).setOption({
-          series:this.seriesItem,
-          yAxis:{
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-          }
-        });
-        if(this.hasLegendOptions){
-          this.computeLegendData(this.legendListMore,this.seriesItemArr,'local')
-        }
-        this.$nextTick(()=>{
-          let divHeight = this.$refs.legendArea.offsetHeight;
-          if(!this.chartInfo.height){
-            getChart(this.chartIndex).resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
-          }else {
-            getChart(this.chartIndex).resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
-          }
-        })
-      },
-      // 加载更多
-      loadScreenMore(){
-        this.seriesItemArrScreen=this.seriesItemScreen;
-        this.screenLegendListMore=this.screenLegendList;
-        let chartInfo=this.data;
-        let dataArg=this.seriesItem;
-
-        let maxValueCopies = this.getMaxValue(dataArg,chartInfo);
-        let maxValue=maxValueCopies.maxValue;
-        let minValue=maxValueCopies.minValue;
-        let dot=maxValueCopies.dot;
-        let copies=maxValueCopies.copies;
-        let unit=maxValueCopies.unit;
-        let oldDot=maxValueCopies.oldDot;
-        this.echartModalStore.setOption({
-          series:this.seriesItemScreen,
-          yAxis:{
-            minInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'min'),
-            maxInterval: chartDataFormat.Interval(maxValue,copies,unit.type,'max')*Math.ceil(dataArg.length/5),
-          }
-        });
-        if(this.hasLegendOptions){
-          this.computeLegendData(this.screenLegendListMore,this.seriesItemArrScreen,'screen')
-        }
-        this.$nextTick(()=>{
-          let legendDiv = document.getElementById('screenLegendArea'+this.chartIndex);
-          let divHeight = legendDiv.offsetHeight;
-          let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-          let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
-          this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
-          this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
-        })
-      },
-      findLegendOptions:function(){
-        if(!this.data.param||!this.data.param.legendValue || Object.keys(this.data.param.legendValue)<1) return false;
-        let legendOptions= this.data.param.legendValue;
-        let onVal=Object.keys(legendOptions).find(item=>{return legendOptions[item] == 'on'});
-
-        return onVal;
-      },
-      computeLegendData:function(legend,dataArr,where){
-        let options=where =='local'?this.legendOptions:this.screenLegendOptions;
-        let keys=options.filter(item=>{return item.value == 'on'}).map(item=>{return item.option});
-        let $self=this;
-        keys.forEach(key=>{
-          return new Promise(resolve => {
-            legend.forEach(item=>{
-              let data=dataArr.find(t=>t.name == item.name)
-              if(data&&data.data){
-                let value=getMetricTypeValue(data.data,key)
-                item[key] = parseFloat(value)
               }
             })
-            resolve();
-          })
-        })
-      },
-      formatLegendData:function(data){
-        return chartDataFormat.getUnit(this.chartInfo.unit).compute(data,null,2)
-      },
-      legendValueSort:function(option,legend,options){
-        options.forEach(item=>{
-          if(item.option != option.option){
-            item.sort='';
+            this.setColor(legend.length)
+            this.seriesItemScreen = series
+            // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
+            this.initChart(this.data, series, this.$refs.screenShowArea, 'screen', legend)
+          }
+        }).catch((error) => {
+          if (error) {
+            this.$message.error(error.toString())
           }
         })
-        if(!option.sort || option.sort == 'asc'){
-          legend.sort((x,y)=>x[option.option] - y[option.option])
-          option.sort = 'desc'
-        }else{
-          legend.sort((x,y)=>y[option.option] - x[option.option])
-          option.sort = 'asc'
+      })
+    },
+    computeDistance: function (str) {
+      const span = document.querySelector('.temp-dom')
+      span.textContent = str
+      const txtWidth = parseFloat(window.getComputedStyle(span).width)
+      return Number('-' + (txtWidth + 5))
+    },
+    showLoad (chartItem) {
+      // 设置高度
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('lineChartDiv' + this.chartIndex)
+        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
+        if (height < this.$chartResizeTool.minHeight) {
+          height = this.$chartResizeTool.minHeight
         }
-      },
-      getMaxValue(dataArg,chartInfo){
-        let maxValue=0;
-        let minValue=0;
-        if(chartInfo.unit &&dataArg.length>0){
-          maxValue=0;
-          minValue=0;
-          for(let j = 0; j < dataArg.length ; j++){
-            for (let i = 0; i < dataArg[j].data.length - 1; i++) {
-              if(dataArg[j].data[i+1][1]!=='NaN'){
-                maxValue = (maxValue < Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : maxValue);
-                minValue = (minValue > Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : minValue);
-              }
+        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
+      })
+      this.clearData()
+      this.firstShow = false
+      this.$refs['localLoading' + this.chartIndex].startLoading()
+      this.divFirstShow = true
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取格式
+    getNumStr (num) {
+      if (num >= 1000) {
+        const kbNum = num / 1000
+        if (kbNum >= 1000) {
+          const mbNum = kbNum / 1000
+          if (mbNum > 1000) {
+            const gbNum = mbNum / 1000
+            return `${gbNum.toFixed(2)}B`
+          }
+          return `${mbNum.toFixed(2)}M`
+        }
+        return `${kbNum.toFixed(2)}K`
+      }
+      return num.toFixed(2)
+    },
+    handleClose () {},
+    // 加载更多
+    loadMore () {
+      this.seriesItemArr = this.seriesItem
+      this.legendListMore = this.legendList
+      const chartInfo = this.data
+      const dataArg = this.seriesItem
+      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      const maxValue = maxValueCopies.maxValue
+      // const minValue = maxValueCopies.minValue
+      // const dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      // const oldDot = maxValueCopies.oldDot
+      getChart(this.chartIndex).setOption({
+        series: this.seriesItem,
+        yAxis: {
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+        }
+      })
+      if (this.hasLegendOptions) {
+        this.computeLegendData(this.legendListMore, this.seriesItemArr, 'local')
+      }
+      this.$nextTick(() => {
+        const divHeight = this.$refs.legendArea.offsetHeight
+        if (!this.chartInfo.height) {
+          getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
+        } else {
+          getChart(this.chartIndex).resize({ height: (this.chartInfo.height - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
+        }
+      })
+    },
+    // 加载更多
+    loadScreenMore () {
+      this.seriesItemArrScreen = this.seriesItemScreen
+      this.screenLegendListMore = this.screenLegendList
+      const chartInfo = this.data
+      const dataArg = this.seriesItem
+
+      const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+      const maxValue = maxValueCopies.maxValue
+      // const minValue = maxValueCopies.minValue
+      // const dot = maxValueCopies.dot
+      const copies = maxValueCopies.copies
+      const unit = maxValueCopies.unit
+      // const oldDot = maxValueCopies.oldDot
+      this.echartModalStore.setOption({
+        series: this.seriesItemScreen,
+        yAxis: {
+          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+        }
+      })
+      if (this.hasLegendOptions) {
+        this.computeLegendData(this.screenLegendListMore, this.seriesItemArrScreen, 'screen')
+      }
+      this.$nextTick(() => {
+        const legendDiv = document.getElementById('screenLegendArea' + this.chartIndex)
+        const divHeight = legendDiv.offsetHeight
+        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
+        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
+        this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`
+        this.echartModalStore.resize({ height: (sumHeight - divHeight - this.screenTitleHeight) })// 图表的高度
+      })
+    },
+    findLegendOptions: function () {
+      if (!this.data.param || !this.data.param.legendValue || Object.keys(this.data.param.legendValue) < 1) return false
+      const legendOptions = this.data.param.legendValue
+      const onVal = Object.keys(legendOptions).find(item => { return legendOptions[item] == 'on' })
+
+      return onVal
+    },
+    computeLegendData: function (legend, dataArr, where) {
+      const options = where == 'local' ? this.legendOptions : this.screenLegendOptions
+      const keys = options.filter(item => { return item.value == 'on' }).map(item => { return item.option })
+      keys.forEach(key => {
+        return new Promise(resolve => {
+          legend.forEach(item => {
+            const data = dataArr.find(t => t.name == item.name)
+            if (data && data.data) {
+              const value = getMetricTypeValue(data.data, key)
+              item[key] = parseFloat(value)
+            }
+          })
+          resolve()
+        })
+      })
+    },
+    formatLegendData: function (data) {
+      return chartDataFormat.getUnit(this.chartInfo.unit).compute(data, null, 2)
+    },
+    legendValueSort: function (option, legend, options) {
+      options.forEach(item => {
+        if (item.option != option.option) {
+          item.sort = ''
+        }
+      })
+      if (!option.sort || option.sort == 'asc') {
+        legend.sort((x, y) => x[option.option] - y[option.option])
+        option.sort = 'desc'
+      } else {
+        legend.sort((x, y) => y[option.option] - x[option.option])
+        option.sort = 'asc'
+      }
+    },
+    getMaxValue (dataArg, chartInfo) {
+      let maxValue = 0
+      let minValue = 0
+      if (chartInfo.unit && dataArg.length > 0) {
+        maxValue = 0
+        minValue = 0
+        for (let j = 0; j < dataArg.length; j++) {
+          for (let i = 0; i < dataArg[j].data.length - 1; i++) {
+            if (dataArg[j].data[i + 1][1] !== 'NaN') {
+              maxValue = (maxValue < Number(dataArg[j].data[i + 1][1]) ? Number(dataArg[j].data[i + 1][1]) : maxValue)
+              minValue = (minValue > Number(dataArg[j].data[i + 1][1]) ? Number(dataArg[j].data[i + 1][1]) : minValue)
             }
           }
         }
-        let chartUnit=chartInfo.unit?chartInfo.unit:2;
-        let unit=chartDataFormat.getUnit(chartUnit);
-        minValue=minValue>0?0:minValue;
-        maxValue=maxValue-minValue;
-        maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil',unit.ascii);
-        let oldValue=maxValue;
-        let dot=0;
-        if(maxValue==1){
-          dot++;
+      }
+      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
+      const unit = chartDataFormat.getUnit(chartUnit)
+      minValue = minValue > 0 ? 0 : minValue
+      maxValue = maxValue - minValue
+      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
+      let oldValue = maxValue
+      let dot = 0
+      if (maxValue == 1) {
+        dot++
+      }
+      if (oldValue > 10) {
+        while (oldValue > 10) {
+          oldValue = oldValue / 10
         }
-        if(oldValue>10){
-          while(oldValue>10){
-            oldValue=oldValue/10;
-          }
-        }else if(oldValue<1&&maxValue!==0){
-          while(oldValue<1&&oldValue>0){
-            oldValue=oldValue*10;
-            dot++;
-          }
-          maxValue=Math.floor(oldValue)/Math.pow(10,dot);
-          dot++;
+      } else if (oldValue < 1 && maxValue !== 0) {
+        while (oldValue < 1 && oldValue > 0) {
+          oldValue = oldValue * 10
+          dot++
         }
-        let copies=chartDataFormat.copies(oldValue,unit.type);
-        let oldDot=2;
-        if(maxValue<=1){
-          oldDot=dot>6?6:dot;
-        }
-        return {
-          maxValue,
-          dot,
-          copies,
-          minValue,
-          unit,
-          oldDot
-        }
-      },
-      chartResize() {
-        getChart(this.chartIndex).resize();
+        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
+        dot++
+      }
+      const copies = chartDataFormat.copies(oldValue, unit.type)
+      let oldDot = 2
+      if (maxValue <= 1) {
+        oldDot = dot > 6 ? 6 : dot
+      }
+      return {
+        maxValue,
+        dot,
+        copies,
+        minValue,
+        unit,
+        oldDot
       }
     },
-    created() {
-      this.legendListMore = [];
-      this.screenLegendListMore = [];
-      this.chartInfo = {};
-      this.seriesItem = []; // 保存信息
-      this.seriesItemArr = [];// 初次加载的数据
-      this.seriesItemScreen = [];
-      this.seriesItemArrScreen = [];
-      this.legend = [];
-      this.legendList = [];
-      this.screenLegendList = [];
-      this.legendOptions = [];
-      this.screenLegendOptions = [];
+    chartResize () {
+      getChart(this.chartIndex).resize()
+    }
+  },
+  created () {
+    this.legendListMore = []
+    this.screenLegendListMore = []
+    this.chartInfo = {}
+    this.seriesItem = [] // 保存信息
+    this.seriesItemArr = []// 初次加载的数据
+    this.seriesItemScreen = []
+    this.seriesItemArrScreen = []
+    this.legend = []
+    this.legendList = []
+    this.screenLegendList = []
+    this.legendOptions = []
+    this.screenLegendOptions = []
 
-      this.highchartStore = null, // 保存图表数据
-        this.echartStore = null,// 保存图表数据
-        this.echartModalStore = null, // 全屏查看时数据
+    // this.highchartStore = null, // 保存图表数据
+    this.echartStore = null // 保存图表数据
+    this.echartModalStore = null // 全屏查看时数据
 
-        this.bgColorList = ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
-          '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
-          '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
-          '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
-          '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
-          '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
-          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-        ];
-    },
-    mounted() {
-      this.firstLoad = false;
-      if(!document.onmousemove){// 添加鼠标移动事件监听
-        document.onmousemove=lineChartMove
-      }
-    },
-    beforeDestroy() {
-      this.clearChart();
-      if(getChart(this.chartIndex)){
-        getChart(this.chartIndex).dispose();
-      }
-      if(!document.onmousemove){// 移除鼠标移动事件监听
-        document.onmousemove=null;
-      }
-      setChart(this.chartIndex, null);
-      window.removeEventListener('resize', this.chartResize);
-    },
-  };
+    this.bgColorList = ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+      '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+      '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+      '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+      '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+      '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+      '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
+    ]
+  },
+  mounted () {
+    this.firstLoad = false
+    if (!document.onmousemove) { // 添加鼠标移动事件监听
+      document.onmousemove = lineChartMove
+    }
+  },
+  beforeDestroy () {
+    this.clearChart()
+    if (getChart(this.chartIndex)) {
+      getChart(this.chartIndex).dispose()
+    }
+    if (!document.onmousemove) { // 移除鼠标移动事件监听
+      document.onmousemove = null
+    }
+    setChart(this.chartIndex, null)
+    window.removeEventListener('resize', this.chartResize)
+  }
+}
 
 </script>
diff --git a/nezha-fronted/src/components/charts/richTextEditor.vue b/nezha-fronted/src/components/charts/richTextEditor.vue
index 36cfea4eb..b19349109 100644
--- a/nezha-fronted/src/components/charts/richTextEditor.vue
+++ b/nezha-fronted/src/components/charts/richTextEditor.vue
@@ -6,102 +6,102 @@
 </template>
 
 <script>
-  import 'quill/dist/quill.snow.css'
-  import Quill from 'quill'
-  export default {
-    name: "richTextEditor",
-    props:{
-      editData:String,
-    },
-    data(){
-      return {
-        id:'editor-'+this.guid(),
-        quill:null,
-        options:{
-          theme: 'snow',
-          modules:{
-            toolbar:[
-              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-              ['bold', 'italic', 'underline', 'strike'],
-              ['link','code-block'],
-              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-              [{ 'color': [] }, { 'background': [] }],
-              [{ 'align': [] }],
-            ]
-          }
-        },
-        maxLength:0,//记录最大长度
-        tooLong:false,
-      }
-    },
-    created() {
-    },
-    methods:{
-      initEditor:function(){
-        let $self=this;
-        if(!this.quill){
-          this.quill = new Quill(this.$refs.editor, this.options);
-          this.quill.on('selection-change',function(range, oldRange, source){
-            let tooltip=$self.$el.querySelector('.ql-tooltip')
-            if(tooltip){
-              let left=tooltip.style.left;
-              if(left&&/\-\d+\.?\d+?px/.test(left)){
-                tooltip.style.left = '10px';
-              }
-            }
-          })
-          this.quill.on('text-change',function(delta, oldDelta, source){
-            let length=$self.getHtml().length;
-            if(length>60000){
-              $self.quill.deleteText($self.maxLength-1,$self.quill.getText().length-1,'api')
-              $self.tooLong=true;
-            }else{
-              $self.maxLength=$self.quill.getText().length;
-              $self.tooLong=false;
-            }
-          })
-          this.$nextTick(()=>{
-            this.$emit('after-init')
-          })
+import 'quill/dist/quill.snow.css'
+import Quill from 'quill'
+export default {
+  name: 'richTextEditor',
+  props: {
+    editData: String
+  },
+  data () {
+    return {
+      id: 'editor-' + this.guid(),
+      quill: null,
+      options: {
+        theme: 'snow',
+        modules: {
+          toolbar: [
+            [{ header: [1, 2, 3, 4, 5, 6, false] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            ['link', 'code-block'],
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            [{ color: [] }, { background: [] }],
+            [{ align: [] }]
+          ]
         }
       },
-      getHtml:function(){
-        let html=`<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${this.quill.root.innerHTML}</div></div>`;
-        return html;
-      },
-      getContent:function(){
-        if(this.tooLong){
-          return false;
-        }else{
-          return this.getHtml();
-        }
-      },
-      guid() {
-        function S4() {
-          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-        }
-        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-      },
-    },
-    watch:{
-      editData:{
-        immediate:true,
-        handler(n,o){
-          this.$nextTick(()=>{
-            this.initEditor();
-            this.quill.clipboard.dangerouslyPasteHTML(null,this.editData,'api')
-          })
-        }
-      }
-    },
-    mounted() {
-      this.initEditor();
-    },
-    beforeDestroy(){
-      this.quill.off('selection-change');
-      this.quill.off('text-change');
+      maxLength: 0, // 记录最大长度
+      tooLong: false
     }
+  },
+  created () {
+  },
+  methods: {
+    initEditor: function () {
+      const $self = this
+      if (!this.quill) {
+        this.quill = new Quill(this.$refs.editor, this.options)
+        this.quill.on('selection-change', function (range, oldRange, source) {
+          const tooltip = $self.$el.querySelector('.ql-tooltip')
+          if (tooltip) {
+            const left = tooltip.style.left
+            if (left && /\-\d+\.?\d+?px/.test(left)) {
+              tooltip.style.left = '10px'
+            }
+          }
+        })
+        this.quill.on('text-change', function (delta, oldDelta, source) {
+          const length = $self.getHtml().length
+          if (length > 60000) {
+            $self.quill.deleteText($self.maxLength - 1, $self.quill.getText().length - 1, 'api')
+            $self.tooLong = true
+          } else {
+            $self.maxLength = $self.quill.getText().length
+            $self.tooLong = false
+          }
+        })
+        this.$nextTick(() => {
+          this.$emit('after-init')
+        })
+      }
+    },
+    getHtml: function () {
+      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${this.quill.root.innerHTML}</div></div>`
+      return html
+    },
+    getContent: function () {
+      if (this.tooLong) {
+        return false
+      } else {
+        return this.getHtml()
+      }
+    },
+    guid () {
+      function S4 () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+      }
+      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+    }
+  },
+  watch: {
+    editData: {
+      immediate: true,
+      handler (n, o) {
+        this.$nextTick(() => {
+          this.initEditor()
+          this.quill.clipboard.dangerouslyPasteHTML(null, this.editData, 'api')
+        })
+      }
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  beforeDestroy () {
+    this.quill.off('selection-change')
+    this.quill.off('text-change')
   }
+}
 </script>
 
 <style>
diff --git a/nezha-fronted/src/components/charts/text-chart.vue b/nezha-fronted/src/components/charts/text-chart.vue
index e0abb2952..6c3561b62 100644
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -58,178 +58,175 @@
 </template>
 
 <script>
-  import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
-  import 'quill/dist/quill.snow.css'
-  export default {
-    name: 'chartSingleStat',
-    components: {
-      'loading': loading,
-      'time-picker':timePicker
+import loading from '../common/loading'
+import 'quill/dist/quill.snow.css'
+export default {
+  name: 'chartSingleStat',
+  components: {
+    loading: loading
+  },
+  props: {
+    chartData: {
+      type: Object
     },
-    props: {
-      chartData: {
-        type: Object
-      },
-      // 看板id
-      panelId: {
-        type: Number,
-        default: 0,
-      },
-      editChartId: {
-        type: String,
-        default: 'editChartId',
-      },
-      chartIndex:{
-        type: Number,
-        default: 0,
-      },
-      from: {type: String},
-      isLock:{type:Boolean,default:false}
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
     },
-    data() {
-      return {
-        data: {}, // 该图表信息,chartItem
-        noData:false,
-        unit:{},
-        text: '', // 保存信息
-        screenText:'',//全屏数据
-        loading:Object,
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: false, // 是否第一次加载
-        screenModal: false,
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-      };
+    editChartId: {
+      type: String,
+      default: 'editChartId'
     },
-    created() {
+    chartIndex: {
+      type: Number,
+      default: 0
     },
-    computed: {},
-    watch: {
-      dropdownMenuShow(n) {
-        this.$emit("dropmenu-change", n);
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      data: {}, // 该图表信息,chartItem
+      noData: false,
+      unit: {},
+      text: '', // 保存信息
+      screenText: '', // 全屏数据
+      loading: Object,
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false
+    }
+  },
+  created () {
+  },
+  computed: {},
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        // this.showLoading = true;
+        this.$refs['localLoading' + this.chartIndex].startLoading()
       }
     },
-    methods: {
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      startLoading(area){
-        if(area==='screen'){
-          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-        }else {
-          //this.showLoading = true;
-          this.$refs['localLoading'+this.chartIndex].startLoading();
+    endLoading (area) {
+      if (area === 'screen') {
+        // this.showLoadingScreen = false;
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        // this.showLoading = false;
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    showLoad (chartItem) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
+        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
+        if (height < this.minHeight) {
+          height = this.minHeight
         }
-      },
-      endLoading(area){
-        if(area==='screen'){
-          //this.showLoadingScreen = false;
-          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-        }else {
-          //this.showLoading = false;
-          this.$refs['localLoading'+this.chartIndex].endLoading();
-        }
-      },
-      showLoad(chartItem) {
-        this.$nextTick(() => {
-          const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
-          let height = Math.floor(chartItem.height/10)*10;//图表高度四舍五入
-          if(height<this.minHeight){
-            height = this.minHeight;
-          }
-          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-          const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
-          singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        this.$confirm(this.$t("tip.confirmDuplicate"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'info'
-        }).then(() => {
-          const param = {id:this.data.id};
-          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.duplicateSuccess")
-              });
-              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
+        chartBox.style.height = `${height - this.chartSpaceHeight}px`
+        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
+        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
             }
-          });
-        });
-      },
-      // 全屏查看
-      showAllScreen() {
-        this.dropdownMenuShow=false;
-        this.screenModal = true;
-      },
-      resize(chartItem) {
-        document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .rich-text-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,area) {
-        this.$nextTick(() => {
-          this.resize(chartItem);
-        });
-        this.divFirstShow = true;
-
-        this.firstShow = true; // 展示操作按键
-
-        this.panelIdInner = panelId;
-        this.data = chartItem;
-        this.text=chartItem.param.text;
-        this.screenText=chartItem.param.text;
-        this.endLoading();
-
-      },
+          }
+        })
+      })
     },
-    mounted() {
-      this.firstLoad = false;
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.screenModal = true
     },
-    beforeDestroy() {
-      this.clearChart();
+    resize (chartItem) {
+      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
     },
-  };
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, area) {
+      this.$nextTick(() => {
+        this.resize(chartItem)
+      })
+      this.divFirstShow = true
+
+      this.firstShow = true // 展示操作按键
+
+      this.panelIdInner = panelId
+      this.data = chartItem
+      this.text = chartItem.param.text
+      this.screenText = chartItem.param.text
+      this.endLoading()
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/cli/console.vue b/nezha-fronted/src/components/cli/console.vue
index c6fbbf33e..8d7fd4a4b 100644
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/nezha-fronted/src/components/cli/console.vue
@@ -15,126 +15,126 @@
 import Terminal from '../common/js/Xterm'
 export default {
   name: 'console',
-  props:{
-    terminal:{  },
-    idIndex:{
+  props: {
+    terminal: { },
+    idIndex: {
       type: Number,
-      default: 0,
+      default: 0
     },
-    isFullScreen:{
+    isFullScreen: {
       type: Boolean,
-      default: false,
+      default: false
     },
-    fontSize:{}
+    fontSize: {}
   },
   data () {
     return {
       term: null,
       terminalSocket: null,
-      termimalRows:15,
-      termimalHeight:270,
-      topMenuHeight:30,
-      dragHeigh:8,
-      minRow:1,
-      fontSpaceHeight:2,//一行高度=fontSize+fontSpaceHeight
-      obj:{
-        id:2
+      termimalRows: 15,
+      termimalHeight: 270,
+      topMenuHeight: 30,
+      dragHeigh: 8,
+      minRow: 1,
+      fontSpaceHeight: 2, // 一行高度=fontSize+fontSpaceHeight
+      obj: {
+        id: 2
       },
-      successBackContent:'Connecting to',
-      failBackContent:'Sorry',
-      connectFailContent:'Connection failed',
-      welcomeBackContent:'Welcome',
-      psdCont:'password: ',
-      conFinish:false,
-      conSuccessNum:0,
-      inputSecret:false,
+      successBackContent: 'Connecting to',
+      failBackContent: 'Sorry',
+      connectFailContent: 'Connection failed',
+      welcomeBackContent: 'Welcome',
+      psdCont: 'password: ',
+      conFinish: false,
+      conSuccessNum: 0,
+      inputSecret: false
     }
   },
-  watch:{
+  watch: {
   },
   methods: {
-    prompt(term) {
-      term.write('\r\n ');//term.write('\r\n~$ ');
+    prompt (term) {
+      term.write('\r\n ')// term.write('\r\n~$ ');
     },
-    resize(consoleHeigt,consoleWidth){
-      this.resizeConsole(consoleHeigt,consoleWidth);
-      this.resizeServiceConsole(consoleHeigt);
+    resize (consoleHeigt, consoleWidth) {
+      this.resizeConsole(consoleHeigt, consoleWidth)
+      this.resizeServiceConsole(consoleHeigt)
     },
-    resizeConsole(consoleHeigt,consoleWidth){
-      //调整终端容器高度
-      const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-      consoleBox.style.height = `${consoleHeigt-55}px`;
-      //调整终端高度
-      let cols = this.term.cols;
-      if(consoleWidth){//需要调整宽度???
-        cols = consoleWidth/11;//目前字体，一个字母宽11
-      }
-      //调整终端可视区域高度
-      document.getElementsByClassName('xterm-screen')[this.idIndex].style.height=`${consoleHeigt-10}px`;
+    resizeConsole (consoleHeigt, consoleWidth) {
+      // 调整终端容器高度
+      const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+      consoleBox.style.height = `${consoleHeigt - 55}px`
+      // 调整终端高度
+      /* let cols = this.term.cols
+      if (consoleWidth) { // 需要调整宽度???
+        cols = consoleWidth / 11// 目前字体，一个字母宽11
+      } */
+      // 调整终端可视区域高度
+      document.getElementsByClassName('xterm-screen')[this.idIndex].style.height = `${consoleHeigt - 10}px`
       // this.term.resize(parseInt(cols),(parseInt(rows)-this.minRow));
-      this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
-        this.setFontSize(this.fontSize);
+      this.$nextTick(() => { // 解决进入全屏和退出全屏是底部隐藏
+        this.setFontSize(this.fontSize)
       })
     },
-    resizeServiceConsole(height){
-      let width = document.body.clientWidth;//可视宽度
-      const winStyle={
-        width:width,
-        height:height-100,
-        cols:this.term.cols,//cols和rows在resizeConsole方法已经设置
-        rows:this.term.rows,
-      };
-      //alert(JSON.stringify(winStyle));
-      this.$post('terminal/resize',winStyle).then(response => {
+    resizeServiceConsole (height) {
+      const width = document.body.clientWidth// 可视宽度
+      const winStyle = {
+        width: width,
+        height: height - 100,
+        cols: this.term.cols, // cols和rows在resizeConsole方法已经设置
+        rows: this.term.rows
+      }
+      // alert(JSON.stringify(winStyle));
+      this.$post('terminal/resize', winStyle).then(response => {
         if (response.code === 200) {
-          this.term.fit();
-          //this.term.scrollToBottom();
+          this.term.fit()
+          // this.term.scrollToBottom();
         } else {
-          this.$message.error(response.msg);
+          this.$message.error(response.msg)
         }
-      });
+      })
     },
-    fullScreenConsole(isFullScreen, resizeHeight){
+    fullScreenConsole (isFullScreen, resizeHeight) {
       if (resizeHeight) {
-        this.termimalHeight = resizeHeight;
+        this.termimalHeight = resizeHeight
       }
       // this.isFullScreen = isFullScreen;
-      //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
-      let height = document.body.clientHeight-this.topMenuHeight;//可视高度
-      let width = document.body.clientWidth;//可视宽度
-      let rows = height/(this.fontSize+this.fontSpaceHeight);
-      rows = parseInt(rows);
-      if(isFullScreen){
-        //容器高度设置100%
-        const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-        consoleBox.style.height = `${height-25}px`;//减去菜单的高度
-      }else {
-        //rows = this.termimalRows-this.minRow;
-        height = this.termimalHeight;
-        //容器高度设置
-        const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-        consoleBox.style.height = `${this.termimalHeight+this.topMenuHeight-55}px`;
-        rows = (height-10)/(this.fontSize+this.fontSpaceHeight);//padding  5*2
-        rows = parseInt(rows);
+      // this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
+      let height = document.body.clientHeight - this.topMenuHeight// 可视高度
+      const width = document.body.clientWidth// 可视宽度
+      let rows = height / (this.fontSize + this.fontSpaceHeight)
+      rows = parseInt(rows)
+      if (isFullScreen) {
+        // 容器高度设置100%
+        const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+        consoleBox.style.height = `${height - 25}px`// 减去菜单的高度
+      } else {
+        // rows = this.termimalRows-this.minRow;
+        height = this.termimalHeight
+        // 容器高度设置
+        const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+        consoleBox.style.height = `${this.termimalHeight + this.topMenuHeight - 55}px`
+        rows = (height - 10) / (this.fontSize + this.fontSpaceHeight)// padding  5*2
+        rows = parseInt(rows)
       }
 
-      this.term.resize(this.term.cols,rows);//this.term.setOption('rows', rows);
-      const winStyl={
-        width:width,
-        height:height-50,
-        cols:this.term.cols,
-        rows:parseInt(rows),
-      };
-      this.$post('terminal/resize',winStyl).then(response => {
+      this.term.resize(this.term.cols, rows)// this.term.setOption('rows', rows);
+      const winStyl = {
+        width: width,
+        height: height - 50,
+        cols: this.term.cols,
+        rows: parseInt(rows)
+      }
+      this.$post('terminal/resize', winStyl).then(response => {
         if (response.code === 200) {
-          //this.term.fit();
-          //this.term.scrollToBottom();
+          // this.term.fit();
+          // this.term.scrollToBottom();
         } else {
-          this.$message.error(response.msg);
+          this.$message.error(response.msg)
         }
-      });
-      this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
-        this.setFontSize(this.fontSize);
+      })
+      this.$nextTick(() => { // 解决进入全屏和退出全屏是底部隐藏
+        this.setFontSize(this.fontSize)
       })
 
       /*
@@ -151,74 +151,74 @@ export default {
         window.removeEventListener('resize',this.windowChange)
       }; */
     },
-    focusConsole(){
-      this.term.focus();
+    focusConsole () {
+      this.term.focus()
     },
-    create(){
-      let that = this;
-      let rows = this.termimalRows;
-      if(this.isFullScreen){
-        //容器高度设置100%
-        const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-        let height = document.body.clientHeight;//高度
-        consoleBox.style.height = `${height-55}px`;
-        rows = (height-this.topMenuHeight)/(this.fontSize+this.fontSpaceHeight);
-        rows = parseInt(rows);
-      }else{
-        //容器高度设置100%
-        const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-        let height = this.terminal.height;//可视高度
-        consoleBox.style.height = `${height}px`;
-        rows = (height-this.topMenuHeight-this.dragHeigh)/(this.fontSize+this.fontSpaceHeight);//menu 30 ,drag  8
-        rows = parseInt(rows);
+    create () {
+      const that = this
+      let rows = this.termimalRows
+      if (this.isFullScreen) {
+        // 容器高度设置100%
+        const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+        const height = document.body.clientHeight// 高度
+        consoleBox.style.height = `${height - 55}px`
+        rows = (height - this.topMenuHeight) / (this.fontSize + this.fontSpaceHeight)
+        rows = parseInt(rows)
+      } else {
+        // 容器高度设置100%
+        const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+        const height = this.terminal.height// 可视高度
+        consoleBox.style.height = `${height}px`
+        rows = (height - this.topMenuHeight - this.dragHeigh) / (this.fontSize + this.fontSpaceHeight)// menu 30 ,drag  8
+        rows = parseInt(rows)
       }
-      let terminalContainer = document.getElementById('terminal'+this.idIndex);
+      const terminalContainer = document.getElementById('terminal' + this.idIndex)
       this.term = new Terminal({
-        rows:rows,//15行大概300px高，无法设置heigh，只能设置rows
-        //cursorBlink:true,//光标闪烁
-        cursorStyle:'block', // 光标样式  null | 'block' | 'underline' | 'bar'
-        //bellStyle:'sound',
-        disableStdin:false,//是否应禁用输入
-        fontSize:this.fontSize,
-        //lineHeight:1,
-        //fontFamily: 'NotoSans',
-        //scrollback: 800, //回滚
-        //tabStopWidth: 8, //制表宽度
-        //screenKeys: true//
+        rows: rows, // 15行大概300px高，无法设置heigh，只能设置rows
+        // cursorBlink:true,//光标闪烁
+        cursorStyle: 'block', // 光标样式  null | 'block' | 'underline' | 'bar'
+        // bellStyle:'sound',
+        disableStdin: false, // 是否应禁用输入
+        fontSize: this.fontSize
+        // lineHeight:1,
+        // fontFamily: 'NotoSans',
+        // scrollback: 800, //回滚
+        // tabStopWidth: 8, //制表宽度
+        // screenKeys: true//
         /*
         theme:{
           foreground:'yellow',//字体
           background:'#060101',//背景色
           cursor:'help',//鼠标
-        }*/
-      });
-      this.term.open(terminalContainer);
-      this.term.focus();
-      let token = sessionStorage.getItem('nz-token');
-      let baseUrl = this.$axios.defaults.baseURL;
-      if (baseUrl.startsWith("/")) {
-        baseUrl = "ws://" + window.location.host + baseUrl;
+        } */
+      })
+      this.term.open(terminalContainer)
+      this.term.focus()
+      const token = sessionStorage.getItem('nz-token')
+      let baseUrl = this.$axios.defaults.baseURL
+      if (baseUrl.startsWith('/')) {
+        baseUrl = 'ws://' + window.location.host + baseUrl
       } else {
-        baseUrl = baseUrl.replace("http://", "ws://").replace("https://", "ws://");
+        baseUrl = baseUrl.replace('http://', 'ws://').replace('https://', 'ws://')
       }
-      let url = baseUrl+"/terminal.ws?width="+this.terminal.width+"&height="+this.terminal.height+"&cols="+this.terminal.cols+"&rows="+this.terminal.rows+"&token="+token+"&assetId="+this.terminal.assetId+"&accountId="+this.terminal.accountId+"&uuid="+this.terminal.uuid;
-      console.info(baseUrl, url);
-      this.terminalSocket = new WebSocket(url);
-      //连接成功
-      this.terminalSocket.onopen = () =>{
-      };
-      //登录后，你输入的内容从后台服务返回
-      this.term.on("data", function(data) {
+      const url = baseUrl + '/terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.terminal.cols + '&rows=' + this.terminal.rows + '&token=' + token + '&assetId=' + this.terminal.assetId + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid
+      console.info(baseUrl, url)
+      this.terminalSocket = new WebSocket(url)
+      // 连接成功
+      this.terminalSocket.onopen = () => {
+      }
+      // 登录后，你输入的内容从后台服务返回
+      this.term.on('data', function (data) {
         /*
         let code = data.charCodeAt(0);
         if(code==13){
         }else {
           //that.term.write(data);
-        }*/
-      });
-      //返回
-      this.terminalSocket.onmessage = function(evt) {
-        let backContent = evt.data;
+        } */
+      })
+      // 返回
+      this.terminalSocket.onmessage = function (evt) {
+        let backContent = evt.data
         /*
         if(that.inputSecret){//当前为密码输入状态
         }
@@ -227,133 +227,130 @@ export default {
           if(pwdInput){//输入密码
             that.inputSecret = true;
           }
-        }*/
+        } */
 
-        let welComIndex = backContent.indexOf(that.welcomeBackContent);
-        if(welComIndex>-1){//无服务器信息（只与nezha进行了连接）
+        const welComIndex = backContent.indexOf(that.welcomeBackContent)
+        if (welComIndex > -1) { // 无服务器信息（只与nezha进行了连接）
           const connectResult = {
-            title:'',
-            color:1,
-          };
-          that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-        }else {
-            let successContentIndex = backContent.indexOf(that.successBackContent);
-            if(successContentIndex>-1 ){
-              //that.conFinish = true;
-              let startIndex = successContentIndex+that.successBackContent.length+1;
-              backContent = backContent.substring(startIndex);
-              let endIndex = backContent.indexOf('\r\n');
-              let title = backContent.substring(0,endIndex);
-              const connectResult = {
-                title:title,
-                color:2,
-              };
-              that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-            }else {//失败
-              let failContentIndex = backContent.indexOf(that.failBackContent);
-              let connectFailIndex = backContent.indexOf(that.connectFailContent);
-              if(failContentIndex>-1 ){
-                //that.conFinish = true;
-                const connectResult = {
-                  title:'',
-                  color:3,
-                };
-                that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-              }else if(connectFailIndex>-1){
-                let startIndex = successContentIndex+that.successBackContent.length+1;
-                backContent = backContent.substring(startIndex);
-                let endIndex = backContent.indexOf('\r\n');
-                let title = backContent.substring(0,endIndex);
-                const connectResult = {
-                  title:'',
-                  color:3,
-                };
-                that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-              }
+            title: '',
+            color: 1
+          }
+          that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+        } else {
+          const successContentIndex = backContent.indexOf(that.successBackContent)
+          if (successContentIndex > -1) {
+            // that.conFinish = true;
+            const startIndex = successContentIndex + that.successBackContent.length + 1
+            backContent = backContent.substring(startIndex)
+            const endIndex = backContent.indexOf('\r\n')
+            const title = backContent.substring(0, endIndex)
+            const connectResult = {
+              title: title,
+              color: 2
             }
+            that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+          } else { // 失败
+            const failContentIndex = backContent.indexOf(that.failBackContent)
+            const connectFailIndex = backContent.indexOf(that.connectFailContent)
+            if (failContentIndex > -1) {
+              // that.conFinish = true;
+              const connectResult = {
+                title: '',
+                color: 3
+              }
+              that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+            } else if (connectFailIndex > -1) {
+              const startIndex = successContentIndex + that.successBackContent.length + 1
+              backContent = backContent.substring(startIndex)
+              // const endIndex = backContent.indexOf('\r\n')
+              // const title = backContent.substring(0, endIndex)
+              const connectResult = {
+                title: '',
+                color: 3
+              }
+              that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+            }
+          }
         }
-      };
-      //关闭
-      this.terminalSocket.onclose = () =>{
-        //报错sorry的，还没来得及看信息就关闭
+      }
+      // 关闭
+      this.terminalSocket.onclose = () => {
+        // 报错sorry的，还没来得及看信息就关闭
         // this.$emit("closeConsole",this.terminal.name);//
-        this.term.setOption('disableStdin',true);
-      };
+        this.term.setOption('disableStdin', true)
+      }
 
+      // 错误
+      this.terminalSocket.onerror = (e) => {}
+      // 选中 复制
+      this.term.on('selection', function () {})
+      this.term.attachCustomKeyEventHandler(function (ev) { })
 
-      //错误
-      this.terminalSocket.onerror = (e) =>{};
-      //选中 复制
-      this.term.on("selection", function() {});
-      this.term.attachCustomKeyEventHandler(function(ev) {  });
-
-      this.term.attach(this.terminalSocket);
-      this.term._initialized = true;
-      this.term.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
-      this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
-        this.setFontSize(this.fontSize);
+      this.term.attach(this.terminalSocket)
+      this.term._initialized = true
+      this.term.fit()// 自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
+      this.$nextTick(() => { // 解决进入全屏和退出全屏是底部隐藏
+        this.setFontSize(this.fontSize)
       })
     },
 
-    closeSocket(){
-      if(this.terminalSocket){
-        this.terminalSocket.close();
+    closeSocket () {
+      if (this.terminalSocket) {
+        this.terminalSocket.close()
       }
-      if(this.term) {
-        this.term.destroy();
+      if (this.term) {
+        this.term.destroy()
       }
-      //初始化console的高度
-      const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-      if(consoleBox){
-        consoleBox.style.height = `${this.termimalHeight}px`;
+      // 初始化console的高度
+      const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+      if (consoleBox) {
+        consoleBox.style.height = `${this.termimalHeight}px`
       }
-      this.conFinish = false;
+      this.conFinish = false
     },
-    setFontSize(fontSize){
-      this.term.setOption('fontSize',fontSize);
-      const consoleBox = document.getElementById('ternimalContainer'+this.idIndex);
-      let width = document.body.clientWidth;//可视宽度
-      let height = parseInt(consoleBox.style.height);
-      if(height==null||!height){height=this.termimalHeight;}
-      const winStyle={
-        width:width,
-        height:height,
-        cols:this.term.cols,//cols和rows在resizeConsole方法已经设置
-        rows:this.term.rows,
-      };
-      //调整终端可视区域高度
-      document.getElementsByClassName('xterm-screen')[this.idIndex].style.height=height+'px'
-      this.$nextTick(()=>{
-        this.term.resize(this.term.cols,this.term.rows);
-        this.$post('terminal/resize',winStyle).then(response => {
+    setFontSize (fontSize) {
+      this.term.setOption('fontSize', fontSize)
+      const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
+      const width = document.body.clientWidth// 可视宽度
+      let height = parseInt(consoleBox.style.height)
+      if (height == null || !height) { height = this.termimalHeight }
+      const winStyle = {
+        width: width,
+        height: height,
+        cols: this.term.cols, // cols和rows在resizeConsole方法已经设置
+        rows: this.term.rows
+      }
+      // 调整终端可视区域高度
+      document.getElementsByClassName('xterm-screen')[this.idIndex].style.height = height + 'px'
+      this.$nextTick(() => {
+        this.term.resize(this.term.cols, this.term.rows)
+        this.$post('terminal/resize', winStyle).then(response => {
           if (response.code === 200) {
-            this.term.fit();
-            //this.term.scrollToBottom();
+            this.term.fit()
+            // this.term.scrollToBottom();
           } else {
-            this.$message.error(response.msg);
+            this.$message.error(response.msg)
           }
-        });
-      });
+        })
+      })
       // alert(JSON.stringify(winStyle));
 
-
       // console.log(winStyle)
     }
   },
   mounted () {
-    this.create();
+    this.create()
   },
-  created(){
+  created () {
 
   },
-  beforeCreate(){
+  beforeCreate () {
 
   },
   beforeDestroy () {
-    this.closeSocket();
-    this.term.off("selection");
-    this.term.off("data")
-
+    this.closeSocket()
+    this.term.off('selection')
+    this.term.off('data')
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index a5e88a7e7..ad4b44639 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -175,344 +175,342 @@
 </template>
 
 <script>
-  import Console from './console'
-  import uuidv1 from "uuid/v1";
-  import axios from 'axios'
+import Console from './console'
+import uuidv1 from 'uuid/v1'
+import axios from 'axios'
+
+export default {
+  name: 'webSSH',
+  components: {
+    'my-console': Console
+  },
+
+  data () {
+    const termFontSize = parseInt(localStorage.getItem('termFontSize'))
+    return {
+      consoleShow: false,
+      isFullScreen: false,
+      closeConfirmShow: false,
+      closeRemember: false,
+      initConsoleHeight: 300, // 只读,初始化高度
+      consoleHeight: 250, // console高度
+      resizeConsoleHeight: 250, // resize后的高度，用于记录最大化、最小化前的高度
+      currentTransform: 0,
+      editableTabsValue: '-1', // 当前显示的console
+      currentIndex: '-1',
+      editableTabs: [],
+      tabIndex: -1, // 添加tab的时候使用
+      // upoload-download
+
+      currentUuid: '',
+      uploadBox: { showUpload: false, title: this.$t('webshell.uploadTitle') },
+      uploadFile: { file: '', path: '', uuid: '' },
+      uploadFileList: [],
+      uploadResult: null,
+      downloadBox: { showDownload: false, title: this.$t('webshell.downloadTitle') },
+      downloadFile: { path: '', uuid: '' },
+      downloadFileList: [],
+      downloadResult: null,
+      // 字体大小
+      fontSize: termFontSize || 15,
+      webSSHHeight: ''// 最小化之前的高度
+    }
+  },
+  methods: {
+    getUuid () {
+      let uuid = uuidv1()
+      const now = new Date().getTime()
+      uuid = uuid + '-' + now + '-' + now
+      this.currentUuid = uuid
+      return uuid
+    },
+    addConsole (id, host, accountId, port) {
+      if (!id) { id = '' }
+      if (!host) { host = '' }
+      if (!accountId) { accountId = '' }
+      if (!port) { port = '' }
+      const uuid = this.getUuid()
+      const newTabName = ++this.tabIndex + ''
+      let title = host
+      if (port) {
+        title = title + ':' + port
+      }
+      if (!title) {
+        title = this.$t('webshell.shellTitle')
+      }
+      const width = document.body.clientWidth// 可视宽度
+      const console = {
+        title: title,
+        name: newTabName,
+        circleColor: 1, // 1 grey,2 green, 3 red
+        terminal: {
+          name: newTabName,
+          cols: 225,
+          rows: 200,
+          width: width,
+          height: this.consoleHeight,
+          assetId: id,
+          accountId: accountId,
+          uuid: uuid
+        }
+      }
+      this.editableTabsValue = newTabName
+      this.editableTabs.push(console)
+
+      setTimeout(function () {
+        const tabScroll = document.getElementsByClassName('el-tabs__nav is-top')
+        const tabViewWidth = document.getElementsByClassName('el-tabs__nav-scroll')
+        const scrollWidth = tabScroll[0].clientWidth
+        const viewWidth = tabViewWidth[0].clientWidth// 可视宽度
+
+        if (viewWidth < scrollWidth) {
+          tabScroll[0].style.transform = 'translateX(' + (viewWidth - scrollWidth) + 'px) '// 71(
+        }
+      }, 10)
+
+      // this.$store.commit('addConsole');
+    },
+    show (id, host, accountId, port) {
+      this.addConsole(id, host, accountId, port)
+      this.consoleShow = true
+    },
+    initDialog () {
 
-  export default {
-    name: 'webSSH',
-    components: {
-      'my-console': Console
     },
 
-    data() {
-      let termFontSize=parseInt(localStorage.getItem("termFontSize"));
-      return {
-        consoleShow:false,
-        isFullScreen:false,
-        closeConfirmShow:false,
-        closeRemember:false,
-        initConsoleHeight:300,//只读,初始化高度
-        consoleHeight:250,//console高度
-        resizeConsoleHeight: 250, //resize后的高度，用于记录最大化、最小化前的高度
-        currentTransform:0,
-        editableTabsValue: '-1',//当前显示的console
-        currentIndex:'-1',
-        editableTabs: [ ],
-        tabIndex: -1,//添加tab的时候使用
-        //upoload-download
+    // 可以做最小化的处理，点击窗口外的空白处会调用此方法
+    closeConsole () {
+      // 弹窗询问是否关闭所有链接，关闭窗口？复选框：记住我的选择（用户勾选且选择yes 后，保存到localstorage，之后关闭不再提醒）
+      if (this.editableTabs.length <= 1) {
+        this.closeShellWindow()
+      } else {
+        const remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false
+        if (remember) {
+          this.closeShellWindow()
+        } else {
+          this.closeConfirmShow = true
+        }
+      }
+      document.querySelector('.sub-list').style.height = ''
+    },
+    cancleConfirm () {
+      this.closeConfirmShow = false
+    },
+    closeShellWindow () {
+      if (this.closeRemember) { // remember me
+        localStorage.setItem('close-shell-remember', this.closeRemember)
+      }
+      // 关闭所有连接
+      this.editableTabs.forEach((tab, index) => {
+        this.$refs['console' + index][0].closeSocket()
+      })
+      this.editableTabs = []
+      this.editableTabsValue = '-1' // 当前显示的consol
+      this.tabIndex = -1
 
-        currentUuid:'',
-        uploadBox:{showUpload:false,title:this.$t('webshell.uploadTitle')},
-        uploadFile: {file: '',path: '',uuid: ''},
-        uploadFileList:[],
-        uploadResult:null,
-        downloadBox:{showDownload:false,title:this.$t('webshell.downloadTitle')},
-        downloadFile:{path: '',uuid: ''},
-        downloadFileList:[],
-        downloadResult:null,
-        // 字体大小
-        fontSize:termFontSize?termFontSize:15,
-        webSSHHeight:'',//最小化之前的高度
+      this.consoleShow = false
+      this.isFullScreen = false
+
+      const targetDiv = document.getElementById('shell-service')
+      targetDiv.style.height = 0 + 'px'
+      this.consoleHeight = this.initConsoleHeight - 50
+
+      this.$store.commit('closeConsole')
+
+      window.removeEventListener('resize', this.windowChange)
+      this.closeConfirmShow = false
+      const subListDom = document.querySelector('#shell-service .sub-list') // 副列表
+      subListDom.style.height = '250px'
+    },
+    handleClick () {
+
+    },
+    refreshTabTitle (connectResult) {
+      if (this.editableTabs && this.editableTabs.length > 0) {
+        this.editableTabs.forEach((tab, index) => {
+          if (tab.name === this.editableTabsValue) {
+            if (connectResult.title && connectResult.title != '') {
+              tab.title = connectResult.title
+            }
+            tab.circleColor = connectResult.color
+          }
+        })
       }
     },
-    methods: {
-      getUuid(){
-        let uuid = uuidv1();
-        let now = new Date().getTime();
-        uuid = uuid+"-"+now+"-"+now;
-        this.currentUuid = uuid;
-        return uuid;
-      },
-      addConsole(id,host,accountId,port){
-        if(!id){id=''}
-        if(!host){host=''}
-        if(!accountId){accountId=''}
-        if(!port){port=''}
-        let uuid = this.getUuid();
-        let newTabName = ++this.tabIndex + '';
-        let title = host;
-        if(port){
-          title = title+":"+port;
-        }
-        if(!title){
-          title=this.$t("webshell.shellTitle");
-        }
-        let width = document.body.clientWidth;//可视宽度
-        const console = {
-          title:title,
-          name:newTabName,
-          circleColor:1,//1 grey,2 green, 3 red
-          terminal: {
-            name:newTabName,
-            cols: 225,
-            rows: 200,
-            width:width,
-            height:this.consoleHeight,
-            assetId:id,
-            accountId:accountId,
-            uuid:uuid,
-          },
-        };
-        this.editableTabsValue = newTabName;
-        this.editableTabs.push(console);
-
-        setTimeout(function(){
-          let tabScroll = document.getElementsByClassName("el-tabs__nav is-top");
-          let tabViewWidth = document.getElementsByClassName("el-tabs__nav-scroll");
-          let scrollWidth = tabScroll[0].clientWidth;
-          let viewWidth = tabViewWidth[0].clientWidth;//可视宽度
-
-          if(viewWidth<scrollWidth){
-            tabScroll[0].style.transform = "translateX(" + (viewWidth-scrollWidth) + "px) ";//71(
+    removeTab (targetName) {
+      const tabs = this.editableTabs
+      let activeName = this.editableTabsValue
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.name === targetName) {
+            const nextTab = tabs[index + 1] || tabs[index - 1]
+            if (nextTab) {
+              activeName = nextTab.name
+            }
           }
-        },10)
+        })
+      }
+      this.editableTabsValue = activeName
+      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
+      this.$store.commit('removeConsole')
 
-        //this.$store.commit('addConsole');
-
-      },
-      show(id,host,accountId,port){
-        this.addConsole(id,host,accountId,port);
-        this.consoleShow = true;
-      },
-      initDialog(){
-
-      },
-
-      //可以做最小化的处理，点击窗口外的空白处会调用此方法
-      closeConsole(){
-        //弹窗询问是否关闭所有链接，关闭窗口？复选框：记住我的选择（用户勾选且选择yes 后，保存到localstorage，之后关闭不再提醒）
-        if(this.editableTabs.length<=1){
-          this.closeShellWindow();
-        }else {
-          let remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false;
-          if(remember){
-            this.closeShellWindow();
-          }else {
-            this.closeConfirmShow = true;
-          }
-        }
-        document.querySelector(".sub-list").style.height = "";
-      },
-      cancleConfirm(){
-        this.closeConfirmShow = false;
-      },
-      closeShellWindow(){
-        if(this.closeRemember){// remember me
-          localStorage.setItem('close-shell-remember', this.closeRemember);
-        }
-        //关闭所有连接
-        this.editableTabs.forEach((tab, index) => {
-          this.$refs['console' + index][0].closeSocket();
-        });
-        this.editableTabs = [];
-        this.editableTabsValue= '-1',//当前显示的consol
-          this.tabIndex = -1
-
-        this.consoleShow = false;
-        this.isFullScreen = false;
-
-        let targetDiv= document.getElementById('shell-service');
-        targetDiv.style.height=0+'px';
-        this.consoleHeight = this.initConsoleHeight-50;
-
-        this.$store.commit('closeConsole');
-
-        window.removeEventListener('resize',this.windowChange);
-        this.closeConfirmShow = false;
-        let subListDom = document.querySelector("#shell-service .sub-list"); //副列表
-        subListDom.style.height = "250px";
-      },
-      handleClick(){
-
-      },
-      refreshTabTitle(connectResult){
+      if (this.editableTabs.length <= 0) {
+        this.closeConsole()
+      }
+    },
+    /* 活动标签切换时触发 */
+    beforeLeave (currentName, oldName) {
+      // 重点，如果name是add，则什么都不触发
+      if (currentName === 'add') {
+        this.addTab()
+        return false
+      } else {
+        // 切换tab
+        this.$nextTick(() => {
           if (this.editableTabs && this.editableTabs.length > 0) {
             this.editableTabs.forEach((tab, index) => {
-              if (tab.name === this.editableTabsValue) {
-                if(connectResult.title && connectResult.title!=''){
-                  tab.title = connectResult.title;
-                }
-                tab.circleColor = connectResult.color;
+              if (tab.name === currentName) {
+                this.$refs['console' + index][0].focusConsole()
+                this.currentUuid = tab.terminal.uuid
               }
-            });
+            })
           }
-      },
-      removeTab(targetName) {
-        let tabs = this.editableTabs;
-        let activeName = this.editableTabsValue;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        this.editableTabsValue = activeName;
-        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-        this.$store.commit('removeConsole');
-
-        if(this.editableTabs.length<=0){
-          this.closeConsole();
-        }
-      },
-      /* 活动标签切换时触发 */
-      beforeLeave(currentName,oldName) {
-        var self=this;
-        //重点，如果name是add，则什么都不触发
-        if(currentName=="add"){
-          this.addTab()
-          return false
-        }else{
-          //切换tab
-          this.$nextTick(() => {
-            if (this.editableTabs && this.editableTabs.length > 0) {
-              this.editableTabs.forEach((tab, index) => {
-                if (tab.name === currentName) {
-                  this.$refs['console' + index][0].focusConsole();
-                  this.currentUuid = tab.terminal.uuid;
-                }
-              });
-            }
-          });
-          this.currentIndex=currentName;
-        }
-      },
-      addTab(targetName) {
-        this.$store.commit('addConsoleNum');
-        this.addConsole();
-      },
-      handleSelect(key, keyPath) {
-        //alert(keyPath);
-      },
-
-      /*upload--download  start*/
-      closeDialog:function(){
-        this.uploadBox.showUpload=false;
-        this.uploadResult=null;
-        this.uploadFileList=[];
-        this.uploadFile={file: '',path: '',uuid: ''};
-      },
-      closeDownloadDialog(){
-        this.downloadBox.showDownload=false;
-        this.downloadResult=null;
-        this.downloadFileList=[];
-        this.downloadFile={path: '',uuid: ''};
-      },
-      showUploadBox(){
-        this.uploadBox.showUpload=true;
-      },
-      handleChange:function(file,fileList){
-        if (fileList.length > 0) {
-          this.uploadFileList = [fileList[fileList.length - 1]]
-        }
-        this.uploadFile.file = this.uploadFileList[0];
-      },
-      upload() {
-          let form = new FormData();
-          form.append("uuid", this.currentUuid);
-          form.append("file", this.uploadFile.file.raw);
-          form.append("path", this.uploadFile.path);
-          this.$post('terminal/upload', form,{'Content-Type': 'multipart/form-data'}).then(res => {
-            if(res.code ==  200 ){
-              this.closeDialog();
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-            }else{
-              this.$message.error(res.msg);
-            }
-          })
-      },
-      showDownloadBox(){
-        this.downloadBox.showDownload=true;
-      },
-      download(){
-        this.downloadFile.uuid = this.currentUuid;
-        axios.post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
-          let fileName= this.downloadFile.path.substring(this.downloadFile.path.lastIndexOf('/')+1);
-          if(window.navigator.msSaveOrOpenBlob){
-            // 兼容ie11
-            let blobObject = new Blob([res.data]);
-            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
-          }else{
-            let url = URL.createObjectURL(new Blob([res.data]));
-            let a = document.createElement('a');
-            document.body.appendChild(a); //此处增加了将创建的添加到body当中
-            a.href = url;
-            a.download = fileName;
-            a.target = '_blank';
-            a.click();
-            a.remove(); //将a标签移除
-          }
-          this.closeDownloadDialog();
         })
-      },
-      /*upload--download  end*/
-      minScreen(){
-        this.consoleShow = false;
-        this.$store.commit('minConsole');
-        let targetDiv= document.getElementById('shell-service');
-        this.webSSHHeight=targetDiv.style.height;
-        targetDiv.style.height=0+'px';
-      },
-      fullScreen(isChange){
-        this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度
-        //dialog全屏
-        this.isFullScreen = !this.isFullScreen;
+        this.currentIndex = currentName
+      }
+    },
+    addTab (targetName) {
+      this.$store.commit('addConsoleNum')
+      this.addConsole()
+    },
+    handleSelect (key, keyPath) {
+      // alert(keyPath);
+    },
 
-        //所有的console全屏
+    /* upload--download  start */
+    closeDialog: function () {
+      this.uploadBox.showUpload = false
+      this.uploadResult = null
+      this.uploadFileList = []
+      this.uploadFile = { file: '', path: '', uuid: '' }
+    },
+    closeDownloadDialog () {
+      this.downloadBox.showDownload = false
+      this.downloadResult = null
+      this.downloadFileList = []
+      this.downloadFile = { path: '', uuid: '' }
+    },
+    showUploadBox () {
+      this.uploadBox.showUpload = true
+    },
+    handleChange: function (file, fileList) {
+      if (fileList.length > 0) {
+        this.uploadFileList = [fileList[fileList.length - 1]]
+      }
+      this.uploadFile.file = this.uploadFileList[0]
+    },
+    upload () {
+      const form = new FormData()
+      form.append('uuid', this.currentUuid)
+      form.append('file', this.uploadFile.file.raw)
+      form.append('path', this.uploadFile.path)
+      this.$post('terminal/upload', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        if (res.code == 200) {
+          this.closeDialog()
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    showDownloadBox () {
+      this.downloadBox.showDownload = true
+    },
+    download () {
+      this.downloadFile.uuid = this.currentUuid
+      axios.post('terminal/download', this.downloadFile, { responseType: 'blob' }).then(res => {
+        const fileName = this.downloadFile.path.substring(this.downloadFile.path.lastIndexOf('/') + 1)
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+        this.closeDownloadDialog()
+      })
+    },
+    /* upload--download  end */
+    minScreen () {
+      this.consoleShow = false
+      this.$store.commit('minConsole')
+      const targetDiv = document.getElementById('shell-service')
+      this.webSSHHeight = targetDiv.style.height
+      targetDiv.style.height = 0 + 'px'
+    },
+    fullScreen (isChange) {
+      this.resizeConsoleHeight = document.querySelector('#shell-service').offsetHeight // 记录全屏前主列表的高度
+      // dialog全屏
+      this.isFullScreen = !this.isFullScreen
+
+      // 所有的console全屏
+      this.editableTabs.forEach((tab, index) => {
+        this.$refs['console' + index][0].fullScreenConsole(this.isFullScreen)
+      })
+
+      if (!this.isFullScreen) {
+        const targetDiv = document.getElementById('shell-service')
+        targetDiv.style.height = this.initConsoleHeight + 'px'
+        this.consoleHeight = this.initConsoleHeight
+      } else {
+        const targetDiv = document.getElementById('shell-service')
+        targetDiv.style.height = `${100}%`
+        const height = document.body.clientHeight// 可视高度
+        this.consoleHeight = height
+      }
+
+      if (this.editableTabs && this.editableTabs.length > 0) {
         this.editableTabs.forEach((tab, index) => {
-          this.$refs['console'+index][0].fullScreenConsole(this.isFullScreen);
-        });
+          if (tab.name === this.editableTabsValue) {
+            this.$refs['console' + index][0].focusConsole()
+          }
+        })
+      }
+    },
+    exitFullScreen () {
+      this.isFullScreen = !this.isFullScreen
+      // 所有的console全屏
+      this.editableTabs.forEach((tab, index) => {
+        this.$refs['console' + index][0].fullScreenConsole(this.isFullScreen, this.resizeConsoleHeight - 30)
+      })
 
-        if(!this.isFullScreen){
-          let targetDiv= document.getElementById('shell-service');
-          targetDiv.style.height=this.initConsoleHeight+'px';
-          this.consoleHeight=this.initConsoleHeight;
-        }else {
-          let targetDiv= document.getElementById('shell-service');
-          targetDiv.style.height=`${100}%`;
-          let height = document.body.clientHeight;//可视高度
-          this.consoleHeight=height;
-        }
+      if (!this.isFullScreen) {
+        const targetDiv = document.getElementById('shell-service')
+        targetDiv.style.height = this.resizeConsoleHeight + 'px'
+        this.consoleHeight = this.resizeConsoleHeight
+      } else {
+        const targetDiv = document.getElementById('shell-service')
+        targetDiv.style.height = `${100}%`
+        const height = document.body.clientHeight// 可视高度
+        this.consoleHeight = height
+      }
 
-        if (this.editableTabs && this.editableTabs.length > 0) {
-          this.editableTabs.forEach((tab, index) => {
-            if (tab.name === this.editableTabsValue) {
-              this.$refs['console' + index][0].focusConsole();
-            }
-          });
-        }
-      },
-      exitFullScreen() {
-        this.isFullScreen = !this.isFullScreen;
-        //所有的console全屏
+      if (this.editableTabs && this.editableTabs.length > 0) {
         this.editableTabs.forEach((tab, index) => {
-          this.$refs['console'+index][0].fullScreenConsole(this.isFullScreen, this.resizeConsoleHeight-30);
-        });
-
-        if(!this.isFullScreen){
-          let targetDiv= document.getElementById('shell-service');
-          targetDiv.style.height=this.resizeConsoleHeight+'px';
-          this.consoleHeight=this.resizeConsoleHeight;
-        }else {
-          let targetDiv= document.getElementById('shell-service');
-          targetDiv.style.height=`${100}%`;
-          let height = document.body.clientHeight;//可视高度
-          this.consoleHeight=height;
-        }
-
-        if (this.editableTabs && this.editableTabs.length > 0) {
-          this.editableTabs.forEach((tab, index) => {
-            if (tab.name === this.editableTabsValue) {
-              this.$refs['console' + index][0].focusConsole();
-            }
-          });
-        }
-      },
-      /*dragEagle:function(e){
+          if (tab.name === this.editableTabsValue) {
+            this.$refs['console' + index][0].focusConsole()
+          }
+        })
+      }
+    },
+    /* dragEagle:function(e){
         var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
 
         //得到点击时该容器的宽高：
@@ -556,151 +554,151 @@
           _this.consoleHeight = parseInt(targetDiv.style.height);
           if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
         }
-      },*/
-      dragEagle(e) {
-        //let mainListDom = document.querySelector(".main-list"); //主列表
-        let subBoxDom = document.querySelector("#shell-service.sub-box"); //副列表
-        let subListDom = document.querySelector("#shell-service .sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let resizeBarHeight = 9; //resize横条高度
-        let minHeight = 15; //terminal最小高度限制为15
-        //let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
-        //let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
-        let resizeModalDom = document.querySelector("#shell-service .resize-modal"); //副列表遮罩
-        let resizeBarDom = document.querySelector("#shell-service .sub-list-resize"); //拖动条
+      }, */
+    dragEagle (e) {
+      // let mainListDom = document.querySelector(".main-list"); //主列表
+      const subBoxDom = document.querySelector('#shell-service.sub-box') // 副列表
+      const subListDom = document.querySelector('#shell-service .sub-list') // 副列表
+      const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+      const resizeBarHeight = 9 // resize横条高度
+      const minHeight = 15 // terminal最小高度限制为15
+      // let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
+      // let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
+      const resizeModalDom = document.querySelector('#shell-service .resize-modal') // 副列表遮罩
+      const resizeBarDom = document.querySelector('#shell-service .sub-list-resize') // 拖动条
 
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //点击时俩dom的初始高度：
-        let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
-        //mainModalDom.style.display = "block";
-        resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
-        resizeBarDom.style.display = "none";
-        let resizeModalEndHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
+      const contentRightHeight = contentRightDom.offsetHeight// 可视高度
+      // 点击时俩dom的初始高度：
+      const subInitialHeight = subListDom.offsetHeight + resizeBarHeight
+      // mainModalDom.style.display = "block";
+      resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`
+      resizeBarDom.style.display = 'none'
+      let resizeModalEndHeight
+      // 点击时鼠标的Y轴位置
+      const mouseInitialY = e.clientY
 
-        document.onmousemove = (e) => {
-          window.resizing = true;
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = e.clientY-mouseInitialY;
-          resizeModalEndHeight = subInitialHeight-mouseMoveY;
-          resizeModalDom.style.height = `${resizeModalEndHeight}px`;
+      document.onmousemove = (e) => {
+        window.resizing = true
+        e.preventDefault()
+        // 得到鼠标拖动的距离
+        const mouseMoveY = e.clientY - mouseInitialY
+        resizeModalEndHeight = subInitialHeight - mouseMoveY
+        resizeModalDom.style.height = `${resizeModalEndHeight}px`
 
-          // 主、副列表最大、最小高度限制
-          if(resizeModalEndHeight > contentRightHeight-minHeight){
-            resizeModalEndHeight = contentRightHeight-minHeight;
-          }
-          if(resizeModalEndHeight < minHeight){
-            resizeModalEndHeight = minHeight;
-          }
-          resizeModalDom.style.height = `${resizeModalEndHeight}px`;
-        };
-        let vm = this;
-        document.onmouseup = () => {
-          window.resizing = false;
-          //mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
-          subBoxDom.style.height = `${resizeModalEndHeight}px`;
-          subListDom.style.height = `${resizeModalEndHeight-resizeBarHeight}px`;
-          resizeModalDom.style.display = "none";
-          //mainModalDom.style.display = "none";
-          resizeBarDom.style.display = "";
-
-          vm.consoleHeight = resizeModalEndHeight;
-          vm.editableTabs.forEach((tab, index) => {
-            vm.$refs['console'+index][0].resizeConsole(resizeModalEndHeight);
-            vm.$refs['console'+index][0].resizeServiceConsole(resizeModalEndHeight);
-          });
-
-          document.onmousemove = null;
-          document.onmouseup = null;
+        // 主、副列表最大、最小高度限制
+        if (resizeModalEndHeight > contentRightHeight - minHeight) {
+          resizeModalEndHeight = contentRightHeight - minHeight
         }
-      },
+        if (resizeModalEndHeight < minHeight) {
+          resizeModalEndHeight = minHeight
+        }
+        resizeModalDom.style.height = `${resizeModalEndHeight}px`
+      }
+      const vm = this
+      document.onmouseup = () => {
+        window.resizing = false
+        // mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
+        subBoxDom.style.height = `${resizeModalEndHeight}px`
+        subListDom.style.height = `${resizeModalEndHeight - resizeBarHeight}px`
+        resizeModalDom.style.display = 'none'
+        // mainModalDom.style.display = "none";
+        resizeBarDom.style.display = ''
 
-      debounce(operate, delay) {
-        let time = null
-        let timer = null
-        let newTime = null
-        function task() {
-          newTime = +new Date()
-          if(newTime - time < delay){
-            timer = setTimeout(task, delay)
-          }else {
-            operate()
-            timer = null
-          }
-          time = newTime
-        }
-        return function () {
-          // 更新时间戳
-          time = +new Date()
-          if(!timer){
-            timer = setTimeout(task, delay)
-          }
-        }
-      },
-      windowChange(){
-        //alert('winChange');
-        if(this.editableTabs&&this.editableTabs.length>0){
-          let width = document.body.clientWidth;//可视宽度
-          var targetDiv= document.getElementById('shell-service'); //e.target.parentNode.parentNode;.children[0]
-          var targetDivHeight=targetDiv.offsetHeight;
-          this.editableTabs.forEach((tab, index) => {
-            this.$refs['console'+index][0].resize(targetDivHeight,width);
-          });
-        }
-      },
-      //改变黑窗口字体大小
-      changeFontSize(fontSize){
-        // this.$refs['console'+this.index].setFontSize(fontSize);
-        this.fontSize=fontSize;
-        localStorage.setItem("termFontSize", fontSize);
-        this.editableTabs.forEach((tab, index) => {
-          this.$refs['console'+index][0].setFontSize(fontSize);
-        });
-      },
+        vm.consoleHeight = resizeModalEndHeight
+        vm.editableTabs.forEach((tab, index) => {
+          vm.$refs['console' + index][0].resizeConsole(resizeModalEndHeight)
+          vm.$refs['console' + index][0].resizeServiceConsole(resizeModalEndHeight)
+        })
+
+        document.onmousemove = null
+        document.onmouseup = null
+      }
     },
-    watch: {
-      '$store.state.consoleShow':function(val){
-        if(val){
-          if(this.$store.state.isAddConsole){
-            let id = this.$store.state.consoleParam.id;
-            let host = this.$store.state.consoleParam.host;
-            let accountId = this.$store.state.consoleParam.accountId;
-            let port = this.$store.state.consoleParam.port;
-            let targetDiv= document.getElementById('shell-service');
-            targetDiv.style.height=this.initConsoleHeight+'px';
-            this.show(id,host,accountId,port);
-          }else {
-            this.consoleShow = true;
-            //min后，从header区域打开，获得焦点
-            this.$nextTick(() => {
-              if (this.editableTabs && this.editableTabs.length > 0) {
-                this.editableTabs.forEach((tab, index) => {
-                  if (tab.name === this.editableTabsValue ) {
-                    this.$refs['console' + index][0].focusConsole();
-                  }
-                });
-              }
-            });
-            let targetDiv= document.getElementById('shell-service');
-            targetDiv.style.height=this.webSSHHeight;
-          }
-          this.$store.state.consoleShow = false;
+
+    debounce (operate, delay) {
+      let time = null
+      let timer = null
+      let newTime = null
+      function task () {
+        newTime = +new Date()
+        if (newTime - time < delay) {
+          timer = setTimeout(task, delay)
+        } else {
+          operate()
+          timer = null
+        }
+        time = newTime
+      }
+      return function () {
+        // 更新时间戳
+        time = +new Date()
+        if (!timer) {
+          timer = setTimeout(task, delay)
         }
       }
     },
-    created() {
-      //window.addEventListener('resize',this.windowChange);
-      window.addEventListener('resize',this.debounce(this.windowChange, 1000),false);
+    windowChange () {
+      // alert('winChange');
+      if (this.editableTabs && this.editableTabs.length > 0) {
+        const width = document.body.clientWidth// 可视宽度
+        const targetDiv = document.getElementById('shell-service') // e.target.parentNode.parentNode;.children[0]
+        const targetDivHeight = targetDiv.offsetHeight
+        this.editableTabs.forEach((tab, index) => {
+          this.$refs['console' + index][0].resize(targetDivHeight, width)
+        })
+      }
     },
-    mounted() {
-
-    },
-    beforeDestroy(){
-      window.removeEventListener('resize',this.debounce(this.windowChange, 1000),false);
+    // 改变黑窗口字体大小
+    changeFontSize (fontSize) {
+      // this.$refs['console'+this.index].setFontSize(fontSize);
+      this.fontSize = fontSize
+      localStorage.setItem('termFontSize', fontSize)
+      this.editableTabs.forEach((tab, index) => {
+        this.$refs['console' + index][0].setFontSize(fontSize)
+      })
     }
+  },
+  watch: {
+    '$store.state.consoleShow': function (val) {
+      if (val) {
+        if (this.$store.state.isAddConsole) {
+          const id = this.$store.state.consoleParam.id
+          const host = this.$store.state.consoleParam.host
+          const accountId = this.$store.state.consoleParam.accountId
+          const port = this.$store.state.consoleParam.port
+          const targetDiv = document.getElementById('shell-service')
+          targetDiv.style.height = this.initConsoleHeight + 'px'
+          this.show(id, host, accountId, port)
+        } else {
+          this.consoleShow = true
+          // min后，从header区域打开，获得焦点
+          this.$nextTick(() => {
+            if (this.editableTabs && this.editableTabs.length > 0) {
+              this.editableTabs.forEach((tab, index) => {
+                if (tab.name === this.editableTabsValue) {
+                  this.$refs['console' + index][0].focusConsole()
+                }
+              })
+            }
+          })
+          const targetDiv = document.getElementById('shell-service')
+          targetDiv.style.height = this.webSSHHeight
+        }
+        this.$store.state.consoleShow = false
+      }
+    }
+  },
+  created () {
+    // window.addEventListener('resize',this.windowChange);
+    window.addEventListener('resize', this.debounce(this.windowChange, 1000), false)
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.debounce(this.windowChange, 1000), false)
   }
+}
 </script>
 <style scoped>
   .ani-webSHH-height{
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index ea2eab376..d164b3b63 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -128,15 +128,15 @@
 </template>
 
 <script>
-  export default {
-    name:"alertLabel",
-    props:{
-      id:{},
-      type:{},
-      //labelLoading:{},
-      that:{}
-    },
-    /*watch:{
+export default {
+  name: 'alertLabel',
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {}
+  },
+  /* watch:{
       labelLoading: {
         immediate: true,
         handler(n) {
@@ -172,107 +172,106 @@
           }
         }
       }
-    },*/
-    data() {
-      return {
-        alertLabelData:null,
-        loading: true
-      }
-    },
-    components:{
-
-    },
-    computed: {
-      calcPosition() {
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
-          if(position.top+elHeight>clientHeight){
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top -elHeight- 20}px`,
-            }
-          }else{
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top - 20}px`,
-            }
-          }
-        }
-      },
-      calcHeight(){
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
-           if(position.top+elHeight>clientHeight){
-             return 'alert-labelUp'
-           }else{
-             return 'alert-label'
-           }
-
-        }
-      }
-    },
-    methods:{
-      alertActiveStr(){
-        return this.$t('overall.active');
-      },
-      alertStateStr(num){
-        if( num == 1){
-          return this.$t('asset.inStock')
-        } else {
-          return this.$t('asset.notInStock')
-        }
-      },
-    },
-    mounted(){
-      if(this.type==='asset'){
-        this.$get('/asset/info?id='+this.id).then((res)=>{
-          if(res.msg==='success'){
-            this.loading=false;
-            this.alertLabelData=res.data.Basic;
-          } else{
-            this.$message.error(res.msg);
-          }
-        })
-      }
-      if(this.type==='project'){
-        this.$get('/project?id='+this.id).then((res)=>{
-          if(res.msg==='success'){
-            this.loading=false;
-            this.alertLabelData=res.data.list[0];
-          } else{
-            this.$message.error(res.msg);
-          }
-        })
-      }
-      if(this.type==='module'){
-        this.$get('/module?id='+this.id).then((res)=>{
-          if(res.msg==='success'){
-            this.loading=false;
-            this.alertLabelData=res.data.list[0];
-          } else{
-            this.$message.error(res.msg);
-          }
-        })
-      }
-      if(this.type==='endpoint'){
-        this.$get('/endpoint?id='+this.id).then((res)=>{
-          if(res.msg==='success'){
-            this.loading=false;
-            this.alertLabelData=res.data.list[0];
-          } else{
-            this.$message.error(res.msg);
-          }
-        })
-      }
-    },
-    beforeDestroy(){
-
+    }, */
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true
     }
+  },
+  components: {
+
+  },
+  computed: {
+    calcPosition () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - elHeight - 20}px`
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - 20}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    alertActiveStr () {
+      return this.$t('overall.active')
+    },
+    alertStateStr (num) {
+      if (num == 1) {
+        return this.$t('asset.inStock')
+      } else {
+        return this.$t('asset.notInStock')
+      }
+    }
+  },
+  mounted () {
+    if (this.type === 'asset') {
+      this.$get('/asset/info?id=' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertLabelData = res.data.Basic
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+    if (this.type === 'project') {
+      this.$get('/project?id=' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertLabelData = res.data.list[0]
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+    if (this.type === 'module') {
+      this.$get('/module?id=' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertLabelData = res.data.list[0]
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+    if (this.type === 'endpoint') {
+      this.$get('/endpoint?id=' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertLabelData = res.data.list[0]
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 
 </script>
 
diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue
index 90606d1de..654bfe8da 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel2.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue
@@ -128,177 +128,176 @@
 </template>
 
 <script>
-  export default {
-    name:"alertLabel",
-    props:{
-      id:{},
-      type:{},
-      //labelLoading:{},
-      that:{},
-      LRTriangle:{}
-    },
-    watch:{
-      // labelLoading: {
-      //   immediate: true,
-      //   handler(n) {
-      //     if(this.type==='asset'){
-      //       this.$get('/asset/info?id='+this.id).then((res)=>{
-      //         if(res.msg==='success'){
-      //           this.loading=false;
-      //           this.alertLabelData=res.data.Basic;
-      //         } else{
-      //           this.$message.error(res.msg);
-      //         }
-      //       })
-      //     }
-      //     if(this.type==='project'){
-      //       this.$get('/project/info?id='+this.id).then((res)=>{
-      //         if(res.msg==='success'){
-      //           this.loading=false;
-      //           this.alertLabelData=res.data.basic;
-      //         } else{
-      //           this.$message.error(res.msg);
-      //         }
-      //       })
-      //     }
-      //     if(this.type==='module'){
-      //       this.$get('/module?id='+this.id).then((res)=>{
-      //         if(res.msg==='success'){
-      //           this.loading=false;
-      //           this.alertLabelData=res.data.list[0];
-      //         } else{
-      //           this.$message.error(res.msg);
-      //         }
-      //       })
-      //     }
-      //   }
-      // }
-      id:{
-        immediate: true,
-        deep:true,
-        handler(n){
-          this.init()
-        }
-      },
-      that:{
-        immediate: true,
-        deep:true,
-        handler(n){
-
-        }
-      },
-      LRTriangle:{
-        immediate: true,
-        deep:true,
-        handler(n){
-
-        }
+export default {
+  name: 'alertLabel',
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    LRTriangle: {}
+  },
+  watch: {
+    // labelLoading: {
+    //   immediate: true,
+    //   handler(n) {
+    //     if(this.type==='asset'){
+    //       this.$get('/asset/info?id='+this.id).then((res)=>{
+    //         if(res.msg==='success'){
+    //           this.loading=false;
+    //           this.alertLabelData=res.data.Basic;
+    //         } else{
+    //           this.$message.error(res.msg);
+    //         }
+    //       })
+    //     }
+    //     if(this.type==='project'){
+    //       this.$get('/project/info?id='+this.id).then((res)=>{
+    //         if(res.msg==='success'){
+    //           this.loading=false;
+    //           this.alertLabelData=res.data.basic;
+    //         } else{
+    //           this.$message.error(res.msg);
+    //         }
+    //       })
+    //     }
+    //     if(this.type==='module'){
+    //       this.$get('/module?id='+this.id).then((res)=>{
+    //         if(res.msg==='success'){
+    //           this.loading=false;
+    //           this.alertLabelData=res.data.list[0];
+    //         } else{
+    //           this.$message.error(res.msg);
+    //         }
+    //       })
+    //     }
+    //   }
+    // }
+    id: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.init()
       }
     },
-    data() {
-      return {
-        alertLabelData:null,
-        loading: true
+    that: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+
       }
     },
-    components:{
+    LRTriangle: {
+      immediate: true,
+      deep: true,
+      handler (n) {
 
-    },
-    computed: {
-      calcPosition() {
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
-          if(position.top+elHeight>clientHeight){
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top -elHeight- 20}px`,
-            }
-          }else{
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top - 20}px`,
-            }
-          }
-        }
-      },
-      calcHeight(){
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=self.type==='asset'?318:(self.type==='project'?70:70);
-          if(position.top+elHeight>clientHeight){
-            return 'alert-labelUp'
-          }else{
-            return 'alert-label'
-          }
-
-        }
       }
-    },
-    methods:{
-      init(){
-        this.loading=true;
-        if(this.type==='asset'){
-          this.$get('/asset/info?id='+this.id).then((res)=>{
-            if(res.msg==='success'){
-              this.loading=false;
-              this.alertLabelData=res.data.Basic;
-            } else{
-              this.$message.error(res.msg);
-            }
-          })
-        }
-        if(this.type==='project'){
-          this.$get('/project?id='+this.id).then((res)=>{
-            if(res.msg==='success'){
-              this.loading=false;
-              this.alertLabelData=res.data.list[0];
-            } else{
-              this.$message.error(res.msg);
-            }
-          })
-        }
-        if(this.type==='module'){
-          this.$get('/module?id='+this.id).then((res)=>{
-            if(res.msg==='success'){
-              this.loading=false;
-              this.alertLabelData=res.data.list[0];
-            } else{
-              this.$message.error(res.msg);
-            }
-          })
-        }
-        if(this.type==='endpoint'){
-          this.$get('/endpoint?id='+this.id).then((res)=>{
-            if(res.msg==='success'){
-              this.loading=false;
-              this.alertLabelData=res.data.list[0];
-            } else{
-              this.$message.error(res.msg);
-            }
-          })
-        }
-      },
-      alertActiveStr(){
-        return this.$t('overall.active');
-      },
-      alertStateStr(num){
-        if( num == 1){
-          return this.$t('asset.inStock')
-        } else {
-          return this.$t('asset.notInStock')
-        }
-      },
-    },
-    mounted(){
-
-    },
-    beforeDestroy(){
-
     }
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true
+    }
+  },
+  components: {
+
+  },
+  computed: {
+    calcPosition () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - elHeight - 20}px`
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - 20}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.loading = true
+      if (this.type === 'asset') {
+        this.$get('/asset/info?id=' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data.Basic
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'project') {
+        this.$get('/project?id=' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data.list[0]
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'module') {
+        this.$get('/module?id=' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data.list[0]
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'endpoint') {
+        this.$get('/endpoint?id=' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data.list[0]
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+    },
+    alertActiveStr () {
+      return this.$t('overall.active')
+    },
+    alertStateStr (num) {
+      if (num == 1) {
+        return this.$t('asset.inStock')
+      } else {
+        return this.$t('asset.notInStock')
+      }
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
   }
+}
 
 </script>
 
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 5c0eb7ff5..df7c2d67e 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -44,14 +44,14 @@
         v-if="item.show"
         :key="`col-${index}`"
         :label="item.label"
-        :show-overflow-tooltip="item.prop != 'labels' && item.prop != 'alertRule'"
+        :show-overflow-tooltip="item.prop !== 'labels' && item.prop !== 'alertRule'"
         :min-width="item.minWidth || item.width"
         :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
         :prop="$tableSet.propTitle(item.prop,'alertMessage')"
         :sort-orders="['ascending', 'descending']"
       >
         <template slot-scope="scope" :column="item">
-          <template v-if="item.prop == 'alertRule'">
+          <template v-if="item.prop === 'alertRule'">
             <div v-if="scope.row.alertRule.alertName" >
               <span
                 @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)"
@@ -61,28 +61,28 @@
             </div>
             <template v-else>-</template>
           </template>
-          <template v-else-if="item.prop == 'summary'">
+          <template v-else-if="item.prop === 'summary'">
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <template v-else>-</template>
           </template>
-          <template v-else-if="item.prop == 'description'">
+          <template v-else-if="item.prop === 'description'">
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <span v-else>-</span>
           </template>
-          <template v-else-if="item.prop == 'remark'">
+          <template v-else-if="item.prop === 'remark'">
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <span v-else>-</span>
           </template>
-          <span v-else-if="item.prop == 'severity'" class="severity">
-            <span v-if="scope.row[item.prop] == 'P1'" class="P1">P1</span>
+          <span v-else-if="item.prop === 'severity'" class="severity">
+            <span v-if="scope.row[item.prop] === 'P1'" class="P1">P1</span>
             <!--<i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
-            <span v-if="scope.row[item.prop] == 'P2'" class="P2">P2</span>
+            <span v-if="scope.row[item.prop] === 'P2'" class="P2">P2</span>
             <!--{{returnSeverityLabel(scope.row[item.prop])}}-->
-            <span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
+            <span v-if="scope.row[item.prop] === 'P3'" class="P3">P3</span>
             <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
           </span>
-          <span v-else-if="item.prop == 'startAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-          <template v-else-if="item.prop == 'duration'">
+          <span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+          <template v-else-if="item.prop === 'duration'">
             <el-tooltip placement="right" effect="light" :disabled="!scope.row.endAt">
               <div slot="content">
                 {{$t('config.terminallog.endTime')}}<br/>
@@ -91,16 +91,16 @@
               <span>{{getDuration(scope.row)}}</span>
             </el-tooltip>
           </template>
-          <template v-else-if="item.prop == 'labels'" class="labels">
-            <span v-for="(item,i) in labelsSort(scope.row.labels)">
+          <template v-else-if="item.prop === 'labels'" class="labels">
+            <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
               <span
                 @mouseenter="labelHover(scope.row, item.label, true, $event)"
                 @mouseleave="labelHover(scope.row, item.label, false)">
                 <nz-alert-tag
                    :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
-                   :cursor-point="tagType(item.label) == 'info' ? false : true"
+                   v-if="item.label !== 'alertname' && item.label !== 'severity'"
                    :key="item.label"
-                   v-if="item.label != 'alertname' && item.label != 'severity'"
+                   :cursor-point="tagType(item.label) !== 'info'"
                 >
                  {{item.value}}
                 </nz-alert-tag>
@@ -140,11 +140,11 @@
             </el-tooltip>-->
 
           </template>
-          <span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
+          <span v-else-if="item.prop === 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
               {{scope.row['state'] == 1 ? "Pending" : ""}}
               {{scope.row['state'] == 2 ? "Expired" : ""}}
           </span>
-          <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
+          <div v-else-if="item.prop === 'current'" class="too-long-split pointer" @click="detail(scope.row)">
             <span v-if="!scope.row.current || scope.row.alertRule.buildIn == 1">-</span>
             <el-popover v-else placement="right" trigger="hover">
               <div slot="reference">
@@ -154,7 +154,7 @@
               <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
             </el-popover>
           </div>
-          <div v-else-if="item.prop == 'option'" class="content-right-options">
+          <div v-else-if="item.prop === 'option'" class="content-right-options">
             <span :id="'alert-list-delete-'+scope.row.id" :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" v-has="`${from}_delete`"><i  class="nz-icon nz-icon-delete"></i></span>
           </div>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -163,7 +163,7 @@
       </el-table-column>
 
       <el-table-column width="28" :resizable="true">
-        <template slot="header" slot-scope="scope">
+        <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -224,405 +224,402 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import axios from 'axios';
-  import nzAlertTag from '../../page/alert/nzAlertTag';
-  import chart from '../../page/dashboard/overview/chart'
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import alertRuleInfo from '../../common/alert/alertRuleInfo'
-  import alertLabel from '../../common/alert/alertLabel'
-  import {calcDurationByStringTimeB} from "../../common/js/tools";
-  export default {
-    name:"alertMessageTable",
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'chart': chart,
-      'alertRuleInfo':alertRuleInfo,
-      'alertLabel':alertLabel,
+import bus from '../../../libs/bus'
+import axios from 'axios'
+import nzAlertTag from '../../page/alert/nzAlertTag'
+import chart from '../../page/dashboard/overview/chart'
+import chartDataFormat from '../../charts/chartDataFormat'
+import alertRuleInfo from '../../common/alert/alertRuleInfo'
+import alertLabel from '../../common/alert/alertLabel'
+import { calcDurationByStringTimeB } from '../js/tools'
+export default {
+  name: 'alertMessageTable',
+  components: {
+    'nz-alert-tag': nzAlertTag,
+    chart: chart,
+    alertRuleInfo: alertRuleInfo,
+    alertLabel: alertLabel
+  },
+  mixins: [bus],
+  props: {
+    tableData: {},
+    loading: {},
+    tableHeight: {},
+    tableId: {},
+    projectAlertId: {},
+    showTopBtn: {
+      type: Boolean,
+      default: true
     },
-    mixins:[bus],
-    props:{
-      id:String,
-      tableData:{},
-      loading:{},
-      tableHeight:{},
-      tableId:{},
-      projectAlertId:{},
-      showTopBtn:{
-        type:Boolean,
-        default:true,
+    from: { type: String },
+    id: String,
+    nowTime: {}
+  },
+  data () {
+    return {
+      /* 二级列表相关 */
+      tabList: [], // 二级列表的标签
+      tabDetailList: [], // 多个详情
+      bottomBox: {
+        tabList: [], // 二级列表的标签
+        tabDetailList: [], // 多个详情
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
       },
-      from: {type: String},
-      id:String,
-      nowTime:{},
-    },
-    data() {
-      vm = this;
-      return {
-        /*二级列表相关*/
-        tabList: [], //二级列表的标签
-        tabDetailList: [], //多个详情
-        bottomBox: {
-          tabList: [], //二级列表的标签
-          tabDetailList: [], //多个详情
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
 
-        //导出相关
-        importBox: {show: false, title:this.$t('overall.exportExcel')},
-        deleteBox: {show: false, ids: "", remark: '', state: 2},
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
 
-        //详情相关
-        graphShow: false,
-        chartDatas: [],
-        sameLabels: ['instance','module','project','asset','endpoint','datacenter'],
-        legend: [],
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-        currentMsg: {},
-        chartUnit: 5,
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("alert.alertName"),
-            prop: 'alertRule',
-            show: true,
-            width: 180
-          }, {
-            label: this.$t("alert.list.labels"),
-            prop: 'labels',
-            show: true,
-            NotSet:true,
-            minWidth: 250
-          }, {
-            label: this.$t("alert.severity"),
-            prop: 'severity',
-            show: true,
-            width: 110,
-          }, {
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true,
-            minWidth:200
-          }, {
-            label: this.$t('alert.description'),
-            prop: 'description',
-            show: true,
-            minWidth:200
-          },{
-            label: this.$t('alert.list.remark'),
-            prop: 'remark',
-            show: false,
-            minWidth:200
-          }, {
-            label: this.$t('alert.list.state'),
-            prop: 'state',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.startAt"),
-            prop: 'startAt',
-            show: true,
-            width: 150
-          }, /*{
+      // 详情相关
+      graphShow: false,
+      chartDatas: [],
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      legend: [],
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      currentMsg: {},
+      chartUnit: 5,
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'alertRule',
+          show: true,
+          width: 180
+        }, {
+          label: this.$t('alert.list.labels'),
+          prop: 'labels',
+          show: true,
+          NotSet: true,
+          minWidth: 250
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true,
+          minWidth: 200
+        }, {
+          label: this.$t('alert.description'),
+          prop: 'description',
+          show: true,
+          minWidth: 200
+        }, {
+          label: this.$t('alert.list.remark'),
+          prop: 'remark',
+          show: false,
+          minWidth: 200
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.startAt'),
+          prop: 'startAt',
+          show: true,
+          width: 150
+        }, /* {
             label: this.$t('alert.endAt'),
             prop: 'endAt',
             show: true,
             width: 150
-          },*/
-          {
-            label:  this.$t('config.terminallog.duration'),
-            prop: 'duration',
-            show: true,
-            width: 150
-          },{
-            label: this.$t('overall.value'),
-            prop: 'current',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 90
-          }
-        ],
-        viewProjectData: {id: '', name: '', remark: ''},
-        viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
-        viewAssetState: false,
+          }, */
+        {
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.value'),
+          prop: 'current',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 90
+        }
+      ],
+      viewProjectData: { id: '', name: '', remark: '' },
+      viewModuleData: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [] },
+      viewAssetState: false,
 
-        scrollbarWrap: null,
-        delFlag:false,
-        tableDataInitNum:0,
+      scrollbarWrap: null,
+      delFlag: false,
+      tableDataInitNum: 0
+    }
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
       }
     },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
           }
         }
-      },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
-        }
-      },
-      getDuration() {
-        return function(record) {
-          if (record.endTime) {
-            return calcDurationByStringTimeB(record.startAt, record.endAt);
-          }
-          return calcDurationByStringTimeB(record.startAt, this.nowTime);
-        }
-      },
+        return key + '：' + value
+      }
     },
-    methods: {
-      labelsSort:function(obj){
-        let buildIn=['asset','endpoint','module','project','datacenter']
-        if(typeof obj == "string") obj=JSON.parse(obj)
-        let labels=JSON.parse(JSON.stringify(obj));
-        let result=[];
-        for(let key of buildIn){
-          if(key in labels){
-            result.push({label:key,value:labels[key]})
-            delete labels[key]
-          }
+    getDuration () {
+      return function (record) {
+        if (record.endTime) {
+          return calcDurationByStringTimeB(record.startAt, record.endAt)
         }
-        Object.keys(labels).sort().forEach(key=>{
-          result.push({label:key,value:labels[key]})
-        })
-        return result;
-      },
-      chartUnitChange:function(unit){
-        this.chartUnit=unit;
-        this.$nextTick(()=>{
-          this.queryChartDate()
-        })
-      },
+        return calcDurationByStringTimeB(record.startAt, this.nowTime)
+      }
+    }
+  },
+  methods: {
+    labelsSort: function (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      if (typeof obj === 'string') obj = JSON.parse(obj)
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of buildIn) {
+        if (key in labels) {
+          result.push({ label: key, value: labels[key] })
+          delete labels[key]
+        }
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+      })
+      return result
+    },
+    chartUnitChange: function (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
 
-      formatThreshold:function(value,unit){
-        let unitMethod=chartDataFormat.getUnit(unit)
-        if(unitMethod&&value){
-          return unitMethod.compute(value,null,2);
-        }else{
-          return value
-        }
-      },
-      queryChartDate() {
-        let $temp = this;
-        let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
-        let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h');
-        this.searchTime = [start, end];
-        let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
-        let step = '15s';
-        if(timeDiff< 1){
-          step='15s';
-        }else if(timeDiff < 7){
-          step='5m';
-        }else if(timeDiff<30){
-          step='10m';
-        }else{
-          step='30m';
-        }
-       if(this.$refs.messageChart){
-         this.$refs.messageChart.startLoading();
-         let axiosArr=[];
-         let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
-         axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
-         this.legend = [];
-         this.chartDatas = [];
-         axios.all(axiosArr).then(res =>{
-           try {
-             res.forEach((response, promIndex) => {
-               if (response.status == 200) {
-                 if (response.data.status == 'success') {
-                   let queryData = response.data.data.result[0];
-                   if (queryData) {
-                     let chartData = {
-                       type: "line",
-                       symbol: 'none',  //去掉点
-                       smooth: 0.2,  //曲线变平滑
-                       name: '',
-                       lineStyle: {
-                         width: 1,
-                         opacity: 0.9
-                       },
-                       markLine: {
-                         silent: true,
-                         symbol: ['circle', 'circle'],
-                         label: {
-                           distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
-                           formatter: function (params) {
-                             return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
-                           }
-                         },
-                         lineStyle: {
-                           color:'#d64f40',
-                           width:2,
-                           type:'dotted'
-                         },
-                         data: [{
-                           yAxis: Number(this.currentMsg.alertRule.threshold)
-                         }, ]
-                       },
-                       markArea:{
-                         itemStyle:{
-                           color:'#d64f40',
-                           opacity:0.1
-                         },
-                         data:[this.returnMarkArea()]
-                       }
-                     };
-                     if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){
-                       delete chartData.markArea;
-                     }
-                     chartData.name += "{";
-                     alias += "{";
-                     Object.keys(queryData.metric).forEach((item, index) => {
-                       let label = item;
-                       let value = queryData.metric[label];
-                       chartData.name += label + "='" + value + "',";
-                     });
-                     chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
-                     chartData.name += "}";
-                     let alias = chartData.name;
-                     let legend = {
-                       name: chartData.name,
-                       alias: alias,
-                       isGray: false
-                     }
-                     this.legend.push(legend);
-                     chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                       return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)];
-                     });
-                     this.chartDatas.push(chartData);
-                   }
-                 } else {
-                   this.$message.error(response.data.error)
-                 }
-               }
-             });
-             this.$nextTick(() => {
-               this.$refs.messageChart.setRandomColors(this.chartDatas.length);
-               this.$refs.messageChart.setLegend(this.legend);
-               this.$refs.messageChart.setSeries(this.chartDatas);
-               this.$refs.messageChart.endLoading();
-             });
-           } catch(err) {
-             this.$message.error(err);
-             this.$refs.messageChart.endLoading();
-           }
-         })
-       }
-      },
-      computeDistance:function(str){
-        var width = 0;
-        var html = document.createElement('span');
-        html.innerText = str;
-        html.className = 'getTextWidth';
-        document.querySelector('body').appendChild(html);
-        width = document.querySelector('.getTextWidth').offsetWidth;
-        document.querySelector('.getTextWidth').remove();
-        return Number('-'+(width+5));
-      },
-      returnMarkArea:function(){
-        if(this.currentMsg){
-          if(this.currentMsg.alertRule.operator=='>'||this.currentMsg.alertRule.operator=='>='){
-            return[{yAxis:this.currentMsg.alertRule.threshold},{}]
-          }else{
-            return[{},{yAxis:this.currentMsg.alertRule.threshold}]
-          }
-        }
-      },
-      detail(obj) {
-        if(!obj.current){return}
-        this.chartDatas = [];
-        this.legend = [];
-        this.graphShow = true;
-        this.currentMsg = obj;
-        this.chartUnit=obj.alertRule.unit?obj.alertRule.unit:5;
-        this.$nextTick(() => {
-          this.queryChartDate();
-        });
-      },
-      dialogClose() {
-        this.graphShow = false;
-      },
-      getAlertList() {
-        if (!this.scrollbarWrap) {
-          this.$nextTick(() => {
-            this.scrollbarWrap = this.$refs.alertListTable.bodyWrapper;
-            this.toTopBtnHandler(this.scrollbarWrap);
-          });
-        }
-      },
-      promQueryParamConvert(obj){
-        let r = "(" + obj.alertRule.expr + ")";
-        let intoLabels=false
-        if (Object.keys(obj.labels).length > 0) {
-          r += function(){
-            let group =" and " +  "(group({";
-            let by = " by (";
-
-            for (let k in obj.labels) {
-              if (k != 'alertname' && k != 'severity') {
-                intoLabels=true;
-                group += k;
-                group += "=";
-                group += ("'" + obj.labels[k] + "',");
-                by += k;
-                by += ","
+    formatThreshold: function (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    },
+    queryChartDate () {
+      const $temp = this
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      if (this.$refs.messageChart) {
+        this.$refs.messageChart.startLoading()
+        const axiosArr = []
+        const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+        this.legend = []
+        this.chartDatas = []
+        axios.all(axiosArr).then(res => {
+          try {
+            res.forEach((response, promIndex) => {
+              if (response.status == 200) {
+                if (response.data.status == 'success') {
+                  const queryData = response.data.data.result[0]
+                  if (queryData) {
+                    const chartData = {
+                      type: 'line',
+                      symbol: 'none', // 去掉点
+                      smooth: 0.2, // 曲线变平滑
+                      name: '',
+                      lineStyle: {
+                        width: 1,
+                        opacity: 0.9
+                      },
+                      markLine: {
+                        silent: true,
+                        symbol: ['circle', 'circle'],
+                        label: {
+                          distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
+                          formatter: function (params) {
+                            return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
+                          }
+                        },
+                        lineStyle: {
+                          color: '#d64f40',
+                          width: 2,
+                          type: 'dotted'
+                        },
+                        data: [{
+                          yAxis: Number(this.currentMsg.alertRule.threshold)
+                        }]
+                      },
+                      markArea: {
+                        itemStyle: {
+                          color: '#d64f40',
+                          opacity: 0.1
+                        },
+                        data: [this.returnMarkArea()]
+                      }
+                    }
+                    if (this.currentMsg.alertRule.operator == '==' || this.currentMsg.alertRule.operator == '!=') {
+                      delete chartData.markArea
+                    }
+                    let alias = chartData.name
+                    chartData.name += '{'
+                    alias += '{'
+                    Object.keys(queryData.metric).forEach((item, index) => {
+                      const label = item
+                      const value = queryData.metric[label]
+                      chartData.name += label + "='" + value + "',"
+                    })
+                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                    chartData.name += '}'
+                    const legend = {
+                      name: chartData.name,
+                      alias: alias,
+                      isGray: false
+                    }
+                    this.legend.push(legend)
+                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                      return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)]
+                    })
+                    this.chartDatas.push(chartData)
+                  }
+                } else {
+                  this.$message.error(response.data.error)
+                }
               }
-            }
-            if(intoLabels){
-              group = group.substring(0, group.length-1);
-              by = by.substring(0, by.length-1);
-              group += "})";
-              by += ")";
-              return group + by + ")";
-            }else{
-              return ''
-            }
-
-          }();
+            })
+            this.$nextTick(() => {
+              this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+              this.$refs.messageChart.setLegend(this.legend)
+              this.$refs.messageChart.setSeries(this.chartDatas)
+              this.$refs.messageChart.endLoading()
+            })
+          } catch (err) {
+            this.$message.error(err)
+            this.$refs.messageChart.endLoading()
+          }
+        })
+      }
+    },
+    computeDistance: function (str) {
+      let width = 0
+      const html = document.createElement('span')
+      html.innerText = str
+      html.className = 'getTextWidth'
+      document.querySelector('body').appendChild(html)
+      width = document.querySelector('.getTextWidth').offsetWidth
+      document.querySelector('.getTextWidth').remove()
+      return Number('-' + (width + 5))
+    },
+    returnMarkArea: function () {
+      if (this.currentMsg) {
+        if (this.currentMsg.alertRule.operator == '>' || this.currentMsg.alertRule.operator == '>=') {
+          return [{ yAxis: this.currentMsg.alertRule.threshold }, {}]
+        } else {
+          return [{}, { yAxis: this.currentMsg.alertRule.threshold }]
         }
-        return r;
-        /*let result="(" + obj.alertRule.expr + ")";
+      }
+    },
+    detail (obj) {
+      if (!obj.current) { return }
+      this.chartDatas = []
+      this.legend = []
+      this.graphShow = true
+      this.currentMsg = obj
+      this.chartUnit = obj.alertRule.unit ? obj.alertRule.unit : 5
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    dialogClose () {
+      this.graphShow = false
+    },
+    getAlertList () {
+      if (!this.scrollbarWrap) {
+        this.$nextTick(() => {
+          this.scrollbarWrap = this.$refs.alertListTable.bodyWrapper
+          this.toTopBtnHandler(this.scrollbarWrap)
+        })
+      }
+    },
+    promQueryParamConvert (obj) {
+      let r = '(' + obj.alertRule.expr + ')'
+      let intoLabels = false
+      if (Object.keys(obj.labels).length > 0) {
+        r += (function () {
+          let group = ' and ' + '(group({'
+          let by = ' by ('
+
+          for (const k in obj.labels) {
+            if (k != 'alertname' && k != 'severity') {
+              intoLabels = true
+              group += k
+              group += '='
+              group += ("'" + obj.labels[k] + "',")
+              by += k
+              by += ','
+            }
+          }
+          if (intoLabels) {
+            group = group.substring(0, group.length - 1)
+            by = by.substring(0, by.length - 1)
+            group += '})'
+            by += ')'
+            return group + by + ')'
+          } else {
+            return ''
+          }
+        }())
+      }
+      return r
+      /* let result="(" + obj.alertRule.expr + ")";
         if(obj.labels){
           if(obj.labels.alertname){
             delete obj.labels.alertname;
@@ -646,219 +643,219 @@
             return q;
           }() + ")";
         }
-        return result;*/
-      },
-      //asset弹框控制
-      tabControl(data) {
-        if (data === 'close') {
-          this.viewAssetState = false
-          this.$refs['assetEditUnit'].tabView = false
+        return result; */
+    },
+    // asset弹框控制
+    tabControl (data) {
+      if (data === 'close') {
+        this.viewAssetState = false
+        this.$refs.assetEditUnit.tabView = false
+      }
+    },
+    toDeleteMessage (obj) {
+      if (obj) {
+        this.deleteBox.ids = obj.id + ''
+      }
+      this.deleteBox.remark = ''
+      this.deleteBox.show = true
+    },
+    deleteMessage () {
+      this.$refs.remarkForm.validate(valid => {
+        if (valid) {
+          this.delFlag = true
+          this.$emit('deleteMessage', this.deleteBox, () => {
+            this.deleteBox.ids = []
+            bus.$emit('alert-message-change')
+          })
+          this.deleteBox.show = false
         }
-      },
-      toDeleteMessage(obj) {
-        if (obj) {
-          this.deleteBox.ids = obj.id + "";
-        }
-        this.deleteBox.remark="";
-        this.deleteBox.show = true;
-      },
-      deleteMessage() {
-        this.$refs.remarkForm.validate(valid => {
-          if (valid) {
-            this.delFlag=true;
-            this.$emit('deleteMessage',this.deleteBox,()=>{
-              this.deleteBox.ids=[];
-              bus.$emit("alert-message-change")
-            });
-            this.deleteBox.show = false;
-          }
-        })
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-        this.$emit('select-change',s)
-      },
-      showExportDialog() {
-        this.importBox.show = true;
-      },
-      openedDialog(){
-        this.$refs.remarkForm.clearValidate()
-      },
-      closeDialog() {
-        this.importBox.show = false;
-        this.deleteBox.show = false;
-      },
-      exportCur:function(){
-        let searchLabel=Object.assign({},this.searchLabel)
-        this.$set(searchLabel,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(searchLabel);
-        this.closeDialog();
-      },
-      exportAll:function(){
-        let temp = JSON.parse(JSON.stringify(this.searchLabel));
-        temp.pageSize = -1;
-        this.$set(temp,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(temp);
-        this.closeDialog();
-      },
-      getTimeString:function(){
-        let split='-';
-        let date=new Date();
-        let year=date.getFullYear();
-        let month=this.formatNum(date.getMonth()+1);
-        let day=this.formatNum(date.getDate());
-        let hours=this.formatNum(date.getHours());
-        let minutes=this.formatNum(date.getMinutes());
-        let seconds=this.formatNum(date.getSeconds());
-        return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds;
-      },
-      formatNum:function(num){
-        return num>9?num:'0'+num;
-      },
-      exportExcel:function(params){
-        for (let item in params) {
-          if (params[item]) {
-            if (item == "alertMessageState") {
-              this.$set(params, "state", params[item]);
-            } else{
-              this.$set(params, item, params[item]);
-            }
+      })
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+      this.$emit('select-change', s)
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    openedDialog () {
+      this.$refs.remarkForm.clearValidate()
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    exportCur: function () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll: function () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    getTimeString: function () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum: function (num) {
+      return num > 9 ? num : '0' + num
+    },
+    exportExcel: function (params) {
+      for (const item in params) {
+        if (params[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(params, 'state', params[item])
+          } else {
+            this.$set(params, item, params[item])
           }
         }
-        let temp=this;
-        if(!params){
-          params=temp.params;
-        }
-        axios.get("alert/message/export", {responseType:'blob', params: params}).then(res=>{
-          let fileName = 'alert-message-'+temp.getTimeString()+'.xlsx';
-          if(window.navigator.msSaveOrOpenBlob){
-            // 兼容ie11
-            let blobObject = new Blob([res.data]);
-            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
-          }else{
-            let url = URL.createObjectURL(new Blob([res.data]));
-            let a = document.createElement('a');
-            document.body.appendChild(a); //此处增加了将创建的添加到body当中
-            a.href = url;
-            a.download = fileName;
-            a.target = '_blank';
-            a.click();
-            a.remove(); //将a标签移除
-          }
-        })
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      showTagDetail(data, key) {
-        let open = false;
-        if (key == "asset" || key == "project" || key == "module" || key == "endpoint" || key == "datacenter") {
-          open = true;
-        }
-        if (open) {
-          let labelList = [];
-          let detailList = [];
-          for (let item in data) {
-            if (item == "asset" || item == "project" || item == "module" || item == "endpoint" || item == "dc") {
-              labelList.push(item);
-              detailList.push(data[item]);
-            }
-          }
-          this.bottomBox.showSubList = true;
-          this.tabList = labelList;
-        }
-      },
-      labelsClassName(row) {
-        if (row.column.label == this.$t("alert.list.labels")) {
-          return "alert-message-list-labels";
-        } else if (row.column.label == this.$t("alert.list.state")) {
-          if (row.row.state == 1) {
-            return "danger";
-          } else if (row.row.state == 2) {
-            return "success";
-          }
+      }
+      const temp = this
+      if (!params) {
+        params = temp.params
+      }
+      axios.get('alert/message/export', { responseType: 'blob', params: params }).then(res => {
+        const fileName = 'alert-message-' + temp.getTimeString() + '.xlsx'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
         } else {
-          return "";
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
-      },
-      fillProject: function (module) {
-        this.$get('project', {"id": module.projectId}).then(response => {
-          if (response.code == 200) {
-            module.project = response.data.list[0];
+      })
+    },
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    showTagDetail (data, key) {
+      let open = false
+      if (key == 'asset' || key == 'project' || key == 'module' || key == 'endpoint' || key == 'datacenter') {
+        open = true
+      }
+      if (open) {
+        const labelList = []
+        const detailList = []
+        for (const item in data) {
+          if (item == 'asset' || item == 'project' || item == 'module' || item == 'endpoint' || item == 'dc') {
+            labelList.push(item)
+            detailList.push(data[item])
           }
-        })
-      },
-      closeViews: function () {
-        this.$refs.alertConfigBox.show(false, false);
-        this.$refs.projectBox.show(false, false);
-        this.$refs.moduleBox.show(false, false);
-        this.viewAssetState = false;
-      },
-      // 数据排序
-      tableDataSort(item){
-        this.$emit('tableDataSort',item);
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      // label tooltip是否显示
-      labelToolTipDis(labelType){
-        switch(labelType){
-          case 'asset':
-          case 'module':
-          case 'endpoint':
-          case 'project':
-            return false;
-          default: return true;
         }
-      },
-      // alertNmae鼠标划入
-      alertMessagehover(item, loading, e) {
-        if (e) {
-          let dom = e.currentTarget;
-          let position = dom.getBoundingClientRect();
-          this.$set(item, "position", position);
+        this.bottomBox.showSubList = true
+        this.tabList = labelList
+      }
+    },
+    labelsClassName (row) {
+      if (row.column.label == this.$t('alert.list.labels')) {
+        return 'alert-message-list-labels'
+      } else if (row.column.label == this.$t('alert.list.state')) {
+        if (row.row.state == 1) {
+          return 'danger'
+        } else if (row.row.state == 2) {
+          return 'success'
         }
-        this.$set(item, "loading", loading);
-        //item.loading = true;
-       //this.$set(this.tableData,index,item);// 调用父组件
-      },
-      // label 鼠标划入
-      labelHover(item, type, loading, e){
-        if(this.labelToolTipDis(type)){
-          return;
+      } else {
+        return ''
+      }
+    },
+    fillProject: function (module) {
+      this.$get('project', { id: module.projectId }).then(response => {
+        if (response.code == 200) {
+          module.project = response.data.list[0]
         }
-        if (e) {
-          let dom = e.currentTarget;
-          let position = dom.getBoundingClientRect();
-          this.$set(item[type], "position", position);
-        }
-        this.$set(item[type], "loading", loading);
-        //this.$set(this.tableData,index,item);// 调用父组件
-      },
-      // Severity Label
-      returnSeverityLabel(key){
-        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
-      },
-      /*plpsscrolly(el,self){
+      })
+    },
+    closeViews: function () {
+      this.$refs.alertConfigBox.show(false, false)
+      this.$refs.projectBox.show(false, false)
+      this.$refs.moduleBox.show(false, false)
+      this.viewAssetState = false
+    },
+    // 数据排序
+    tableDataSort (item) {
+      this.$emit('tableDataSort', item)
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    // label tooltip是否显示
+    labelToolTipDis (labelType) {
+      switch (labelType) {
+        case 'asset':
+        case 'module':
+        case 'endpoint':
+        case 'project':
+          return false
+        default: return true
+      }
+    },
+    // alertNmae鼠标划入
+    alertMessagehover (item, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // item.loading = true;
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (this.labelToolTipDis(type)) {
+        return
+      }
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item[type], 'position', position)
+      }
+      this.$set(item[type], 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+    }
+    /* plpsscrolly(el,self){
         if (el._ps_.scrollbarYTop > 50) {
           self.tools.showTopBtn = true;
           self.tools.tableHover = true;
@@ -866,51 +863,52 @@
           self.tools.showTopBtn = false;
           self.tools.tableHover = false;
         }
-      },*/
+      }, */
+  },
+  watch: {
+    showSubList (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
     },
-    watch: {
-      showSubList(n) {
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
+    loading: {
+      handler: function (n, o) {
+        this.tools.loading = n
       },
-      loading:{
-        handler:function(n,o){
-          this.tools.loading=n;
-        },
-        immediate: true,
-        deep:true,
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){
-            this.$refs.alertListTable.bodyWrapper.scrollTop = 0
-          }
-          this.tableDataInitNum++;//因为异步加载的问题导致该表格加载三次 只有最后一次是稳定 故只有第三次是去除是否删除的标记
-          if(this.tableDataInitNum===2){
-            this.tableDataInitNum=0;
-            this.delFlag=false;
-          }
+      immediate: true,
+      deep: true
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) {
+          this.$refs.alertListTable.bodyWrapper.scrollTop = 0
+        }
+        this.tableDataInitNum++// 因为异步加载的问题导致该表格加载三次 只有最后一次是稳定 故只有第三次是去除是否删除的标记
+        if (this.tableDataInitNum === 2) {
+          this.tableDataInitNum = 0
+          this.delFlag = false
         }
-
-      }
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList')
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + '/alertList'))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
       }
 
-      this.getAlertList();
-      /*if(this.from=='alertMessage'){
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + '/alertList'))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+
+    this.getAlertList()
+    /* if(this.from=='alertMessage'){
         this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
           ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
           : this.tableTitle;
@@ -927,15 +925,15 @@
           : this.tableTitle;
       }
     */
-    },
-    beforeDestroy(){
-     if(this.scrollbarWrap){
-       if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-     }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      if (this.scrollbarWrap) {
+        this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+      }
     }
   }
+}
 
 </script>
 
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
index 1cfbdd6a9..cfe028520 100644
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -17,13 +17,13 @@
         <div class="alert-rule-title">Level</div>
         <div class="alert-rule-value severity">
           <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P1'}).label}}
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
           </span>
           <span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P2'}).label}}
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
           </span>
           <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value == 'P3'}).label}}
+            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
           </span>
         </div>
       </div>
@@ -32,15 +32,15 @@
 </template>
 
 <script>
-  import chartDataFormat from '../../charts/chartDataFormat'
-	export default {
-		name:"alert-rule-info",
-    props:{
-		  id:{},
-      messageLoad:{},
-      that: {}
-    },
-    /*watch:{
+import chartDataFormat from '../../charts/chartDataFormat'
+export default {
+  name: 'alert-rule-info',
+  props: {
+    id: {},
+    messageLoad: {},
+    that: {}
+  },
+  /* watch:{
       messageLoad:{
         handler:function(){
           this.$get('/alert/rule?id='+this.id).then((res)=>{
@@ -54,73 +54,67 @@
         },
         deep:true
       }
-    },*/
-    data() {
-		  return {
-		    loading:true,
-        alertRuleData:''
-      }
-    },
-    components:{
-
-    },
-    computed: {
-      calcPosition() {
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=50;
-          if(position.top+elHeight>clientHeight){
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top -elHeight- 20}px`,
-            }
-          }else{
-            return {
-              left: `${position.left + position.width + 20}px`,
-              top: `${position.top - 20}px`,
-            }
-          }
-        }
-      },
-      calcHeight(){
-        let self=this;
-        return function(position) {
-          let clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
-          let elHeight=50;
-          if(position.top+elHeight>clientHeight){
-            return 'alert-rule-tip-Up'
-          }else{
-            return 'alert-rule-tip'
-          }
-
-        }
-      }
-    },
-    methods:{
-      formatThreshold(value,unit) {
-        let unitMethod = chartDataFormat.getUnit(unit);
-        if (unitMethod&&value) {
-          return unitMethod.compute(value, null, 2);
-        } else {
-          return value;
-        }
-      },
-    },
-    mounted(){
-      this.$get('/alert/rule?id='+this.id).then((res)=>{
-        if(res.msg === 'success') {
-          this.loading = false;
-          this.alertRuleData=res.data.list[0];
-        } else{
-          this.$message.error(res.msg);
-        }
-      });
-    },
-    beforeDestroy(){
-
+    }, */
+  data () {
+    return {
+      loading: true,
+      alertRuleData: ''
     }
-	}
+  },
+  components: {
+
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = 50
+        if (position.top + elHeight > clientHeight) {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - elHeight - 20}px`
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + 20}px`,
+            top: `${position.top - 20}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = 50
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-rule-tip-Up'
+        } else {
+          return 'alert-rule-tip'
+        }
+      }
+    }
+  },
+  methods: {
+    formatThreshold (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    }
+  },
+  mounted () {
+    this.$get('/alert/rule?id=' + this.id).then((res) => {
+      if (res.msg === 'success') {
+        this.loading = false
+        this.alertRuleData = res.data.list[0]
+      } else {
+        this.$message.error(res.msg)
+      }
+    })
+  }
+}
 
 </script>
 
diff --git a/nezha-fronted/src/components/common/alert/selectAlertSilence.vue b/nezha-fronted/src/components/common/alert/selectAlertSilence.vue
index ff8b0c800..2d1708b66 100644
--- a/nezha-fronted/src/components/common/alert/selectAlertSilence.vue
+++ b/nezha-fronted/src/components/common/alert/selectAlertSilence.vue
@@ -18,7 +18,7 @@
             node-key="id"
             v-loading="typeContentLoading"
             ref="panelTree">
-            <div class="tree--node" slot-scope="{ node, data }">
+            <div slot-scope="{ node }" class="tree--node">
               <span>{{ node.label }}</span>
             </div>
           </el-tree>
@@ -32,26 +32,26 @@
 </template>
 
 <script>
-  export default {
-    name: "selectAlertSilence",
-    props:{
-      placement: {type: String},
-      isEdit: {type: Boolean, default: true},
-      silenceData: {type: Array},
-      filterSilence: {type: String},
-      typeContentLoading:{type: Boolean, default: false}
-    },
-    mounted() {
-      // this.$refs.panelTree.setCurrentKey();
-    },
-    watch: {
-      filterSilence: {
-        immediate: true,
-        handler(n) {
-          this.$refs.panelTree && this.$refs.panelTree.filter(n);
-        }
-      },
-      /*panel: {
+export default {
+  name: 'selectAlertSilence',
+  props: {
+    placement: { type: String },
+    isEdit: { type: Boolean, default: true },
+    silenceData: { type: Array },
+    filterSilence: { type: String },
+    typeContentLoading: { type: Boolean, default: false }
+  },
+  mounted () {
+    // this.$refs.panelTree.setCurrentKey();
+  },
+  watch: {
+    filterSilence: {
+      immediate: true,
+      handler (n) {
+        this.$refs.panelTree && this.$refs.panelTree.filter(n)
+      }
+    }
+    /* panel: {
         immediate: true,
         handler(n) {
           if (this.$refs.panelTree) {
@@ -59,76 +59,76 @@
             this.$refs.panelTree.setCurrentKey(n);
           }
         }
-      }*/
-    },
-    data(){
-      return {
-        popBox: {show: false},
-        panel: {id: 0, name: ""},
-      }
-    },
-    methods:{
-      /*
+      } */
+  },
+  data () {
+    return {
+      popBox: { show: false },
+      panel: { id: 0, name: '' }
+    }
+  },
+  methods: {
+    /*
       * node: 被拖的节点
       * relative: 发生关系的节点
       * position: ['before', 'after', 'inner'] 与relative节点的关系
       * */
-      nodeDrop(node, relative, position, event) {
-        if (position === 'inner') {
-          node.data.pid = relative.data.id;
-        } else {
-          node.data.pid = relative.data.pid;
-        }
-        this.updateWeight();
-      },
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.name.indexOf(value) !== -1;
-      },
-      updateWeight() {
-        let toUpdate = [];
-        let count = 0;
-        handler(this.silenceData);
+    nodeDrop (node, relative, position, event) {
+      if (position === 'inner') {
+        node.data.pid = relative.data.id
+      } else {
+        node.data.pid = relative.data.pid
+      }
+      this.updateWeight()
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    updateWeight () {
+      const toUpdate = []
+      let count = 0
+      handler(this.silenceData)
 
-        function handler(silenceData) {
-          silenceData.forEach(panel => {
-            panel.weight = count++;
-            toUpdate.push({id: panel.id, pid: panel.pid, weight: panel.weight});
-            if (panel.children && panel.children.length > 0) {
-              handler(panel.children);
-            }
-          });
-        }
+      function handler (silenceData) {
+        silenceData.forEach(panel => {
+          panel.weight = count++
+          toUpdate.push({ id: panel.id, pid: panel.pid, weight: panel.weight })
+          if (panel.children && panel.children.length > 0) {
+            handler(panel.children)
+          }
+        })
+      }
 
-        this.$put("/panel/tree", toUpdate);
-      },
-      deletePanel(data) {
-        this.$emit("deletePanel", data);
-      },
-      editPanel(data) {
-        this.$emit("editPanel", data);
-      },
-      esc(){
-        this.popBox.show = false;
-      },
-      //确认选择某个节点，与父组件交互
-      selectSilence(data, checked, child) {
-        if(data.children) return
-        this.$emit('selectSilence', data);
-        this.$refs.panelTree.setCurrentKey(data);
-        this.esc();
-      },
-      //tree设为单选
-      /*clearOthers(data, checked, child) {
+      this.$put('/panel/tree', toUpdate)
+    },
+    deletePanel (data) {
+      this.$emit('deletePanel', data)
+    },
+    editPanel (data) {
+      this.$emit('editPanel', data)
+    },
+    esc () {
+      this.popBox.show = false
+    },
+    // 确认选择某个节点，与父组件交互
+    selectSilence (data, checked, child) {
+      if (data.children) return
+      this.$emit('selectSilence', data)
+      this.$refs.panelTree.setCurrentKey(data)
+      this.esc()
+    }
+    // tree设为单选
+    /* clearOthers(data, checked, child) {
         if (checked) {
           this.panel = data;
           this.$refs.panelTree.setCheckedKeys([data.id]);
         } else {
           this.panel = {id: '', name: ''};
         }
-      }*/
-    },
+      } */
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index b46f87067..f73d74ad8 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -18,93 +18,93 @@
 
     <!------TAB区------>
       <!--机柜-->
-      <cabinet-tab :obj="obj" @changeTab="changeTab" v-if="from == $CONSTANTS.fromRoute.dc && targetTab == 'cabinet'" v-show="subResizeShow"></cabinet-tab>
+      <cabinet-tab v-if="from === $CONSTANTS.fromRoute.dc && targetTab === 'cabinet'" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
       <!--告警信息-->
-      <alert-message-tab :from="from" :obj="obj" @changeTab="changeTab" v-if="((from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.endpoint) && targetTab == 'alertMessage')" v-show="subResizeShow"></alert-message-tab>
+      <alert-message-tab v-if="((from === $CONSTANTS.fromRoute.rule || from === $CONSTANTS.fromRoute.asset || from === $CONSTANTS.fromRoute.endpoint) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
       <!--asset页的endpoint列表-->
-      <endpoint-tab :from="from" :obj="obj" @changeTab="changeTab" v-if="from == $CONSTANTS.fromRoute.asset && targetTab == $CONSTANTS.fromRoute.endpoint" v-show="subResizeShow"></endpoint-tab>
+      <endpoint-tab v-if="from === $CONSTANTS.fromRoute.asset && targetTab === $CONSTANTS.fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
       <!--endpoint-query-->
-      <endpoint-query-tab :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery" v-if="(from == $CONSTANTS.fromRoute.endpoint && targetTab == 'endpointQuery')" v-show="subResizeShow"></endpoint-query-tab>
+      <endpoint-query-tab v-if="(from === $CONSTANTS.fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
 
       <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab :from="from" :obj="obj" ref="panelTab" v-if="(from == $CONSTANTS.fromRoute.model || from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.project || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint) && targetTab == 'panel'" v-show="subResizeShow"
+      <panel-tab v-if="(from === $CONSTANTS.fromRoute.model || from === $CONSTANTS.fromRoute.asset || from === $CONSTANTS.fromRoute.project || from === $CONSTANTS.fromRoute.rule || from === $CONSTANTS.fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :from="from" :obj="obj"
                  @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
 
       <!--terminal-log的记录和回放-->
-      <terminal-log-cmd-tab :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogCMDTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'cmd'"></terminal-log-cmd-tab>
-      <terminal-log-record-tab :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogRecordTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'record'"></terminal-log-record-tab>
+      <terminal-log-cmd-tab v-if="from === $CONSTANTS.fromRoute.terminalLog && targetTab === 'cmd'" ref="reminalLogCMDTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-cmd-tab>
+      <terminal-log-record-tab v-if="from === $CONSTANTS.fromRoute.terminalLog && targetTab === 'record'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-record-tab>
 
-      <terminal-log-monitor-tab @exit="closeSubList" :from="from" :obj="obj" @changeTab="changeTab" ref="reminalLogRecordTab" v-if="from == $CONSTANTS.fromRoute.terminalLog && targetTab == 'monitor'"></terminal-log-monitor-tab>
+      <terminal-log-monitor-tab v-if="from === $CONSTANTS.fromRoute.terminalLog && targetTab === 'monitor'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
 
     </div>
   </div>
 </template>
 
 <script>
-  import cabinetTab from "./tabs/cabinetTab";
-  import alertMessageTab from "./tabs/alertMessageTab";
-  import endpointQueryTab from "./tabs/endpointQueryTab";
-  import endpointTab from "./tabs/endpointTab";
-  import panelTab from "./tabs/panelTab";
-  import terminalLogRecordTab from "./tabs/terminalLogRecordTab";
-  import terminalLogMonitorTab from "./tabs/terminalLogMonitorTab";
-  import terminalLogCMDTab from "./tabs/terminalLogCMDTab";
+import cabinetTab from './tabs/cabinetTab'
+import alertMessageTab from './tabs/alertMessageTab'
+import endpointQueryTab from './tabs/endpointQueryTab'
+import endpointTab from './tabs/endpointTab'
+import panelTab from './tabs/panelTab'
+import terminalLogRecordTab from './tabs/terminalLogRecordTab'
+import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
+import terminalLogCMDTab from './tabs/terminalLogCMDTab'
 
-  export default {
-    name: "bottomBox",
-    components:{
-      'cabinet-tab': cabinetTab,
-      'alert-message-tab': alertMessageTab,
-      'endpoint-query-tab': endpointQueryTab,
-      'endpoint-tab': endpointTab,
-      'panel-tab': panelTab,
-      terminalLogRecordTab,
-      'terminal-log-cmd-tab': terminalLogCMDTab,
-      terminalLogMonitorTab
-    },
-    props: {
-      isFullScreen: false, //是否全屏
-      subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
-      obj: Object, //关联的实体对象
-      from: String, //来自哪个页面
-      tabList: Array, //动态页签列表
-      targetTab: String, //展示哪个页签
-      detail: Object, //对象详情内容
-      detailList: Array, //多个对象详情内容
+export default {
+  name: 'bottomBox',
+  components: {
+    'cabinet-tab': cabinetTab,
+    'alert-message-tab': alertMessageTab,
+    'endpoint-query-tab': endpointQueryTab,
+    'endpoint-tab': endpointTab,
+    'panel-tab': panelTab,
+    terminalLogRecordTab,
+    'terminal-log-cmd-tab': terminalLogCMDTab,
+    terminalLogMonitorTab
+  },
+  props: {
+    isFullScreen: Boolean, // 是否全屏
+    subResizeShow: Boolean, // resize时，用v-show="subResizeShow"控制页面内容是否显示
+    obj: Object, // 关联的实体对象
+    from: String, // 来自哪个页面
+    tabList: Array, // 动态页签列表
+    targetTab: String, // 展示哪个页签
+    detail: Object, // 对象详情内容
+    detailList: Array, // 多个对象详情内容
 
-      assetDetail: Object, //endpoint页的asset详情
+    assetDetail: Object // endpoint页的asset详情
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    exitFullScreen () {
+      this.$emit('exitFullScreen')
+      this.$nextTick(() => { this.afterResize() })
     },
-    data() {
-      return {}
+    fullScreen () {
+      this.$emit('fullScreen')
+      this.$nextTick(() => { this.afterResize() })
     },
-    methods: {
-      exitFullScreen() {
-        this.$emit("exitFullScreen");
-        this.$nextTick(() => {this.afterResize()});
-      },
-      fullScreen() {
-        this.$emit("fullScreen");
-        this.$nextTick(() => {this.afterResize()});
-      },
-      closeSubList() {
-        this.$emit("closeSubList");
-      },
-      listResize(e) {
-        this.$emit('listResize', e);
-        this.$nextTick(() => {this.afterResize()});
-      },
-      changeTab(tab) {
-        this.$emit('update:targetTab', tab);
-      },
-      afterResize() {
-        if (this.from == this.$CONSTANTS.fromRoute.endpoint && this.targetTab == 'endpointQuery') {
-          this.$refs.endpointQuery.tableReload();
-        } else if (this.from == this.$CONSTANTS.fromRoute.terminalLog && this.targetTab == 'record') {
-          setTimeout(() => {
-            this.$refs.reminalLogRecordTab.consoleResize();
-          }, 600);
-        }
+    closeSubList () {
+      this.$emit('closeSubList')
+    },
+    listResize (e) {
+      this.$emit('listResize', e)
+      this.$nextTick(() => { this.afterResize() })
+    },
+    changeTab (tab) {
+      this.$emit('update:targetTab', tab)
+    },
+    afterResize () {
+      if (this.from === this.$CONSTANTS.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
+        this.$refs.endpointQuery.tableReload()
+      } else if (this.from === this.$CONSTANTS.fromRoute.terminalLog && this.targetTab === 'record') {
+        setTimeout(() => {
+          this.$refs.reminalLogRecordTab.consoleResize()
+        }, 600)
       }
-    },
+    }
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 40a73a14e..630e32521 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -87,518 +87,512 @@
 </template>
 
 <script>
-  import axios from 'axios';
-  import nzAlertTag from '../../../page/alert/nzAlertTag';
-  import chart from '../../../page/dashboard/overview/chart'
-  import bus from '../../../../libs/bus'
-  import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
-  import deleteButton from "../../deleteButton";
-  export default {
-    name: "alertMessageTab",
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'chart': chart,
-      'alertMessageTable':alertMessageTable,
-      'delete-button':deleteButton,
-    },
-    props: {
-      from: String, //来自哪个主页面，有："asset"、"alertRule"
-      obj: Object, //关联的实体对象
-    },
-    data() {
-      return {
-        //详情相关
-        graphShow: false,
-        chartDatas: [],
-        legend: [],
-        sameLabels: ['instance','module','project','asset','endpoint','datacenter'],
-        searchTime:[],
-        currentMsg: {},
-        chartUnit: 5,
-        requestIndex:0,
-        defaultSearchValue: this.obj.alertNum ? 1 : 0,
-        showElementSet: false,
-        batchDeleteObjs:[],
-        tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false, //top按钮是否显示
-        loading: false,
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-
-        tableHover: false, //控制滚动条和top按钮同时出现
-
-        importBox: {show: false, title:this.$t('overall.exportExcel')},
-        deleteBox: {show: false, ids: "", remark: '', state: 2},
-
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("alert.alertName"),
-            prop: 'alertRule',
-            show: true,
-            width: 180
-          }, {
-            label: this.$t("alert.list.labels"),
-            prop: 'labels',
-            show: true,
-          }, {
-            label: this.$t("alert.severity"),
-            prop: 'severity',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true
-          }, {
-            label: this.$t('alert.description'),
-            prop: 'description',
-            show: true
-          }, {
-            label: this.$t('alert.list.state'),
-            prop: 'state',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.startAt"),
-            prop: 'startAt',
-            show: true,
-          }, {
-            label: this.$t('alert.endAt'),
-            prop: 'endAt',
-            show: true,
-          }, {
-            label: this.$t('overall.value'),
-            prop: 'current',
-            show: true
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 90
-          }
-        ],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 2,
-            name: this.$t('alert.alertName'),
-            type: 'input',
-            label: 'alertName',
-            disabled: false
-          }, {
-            id:20,
-            name: this.$t('project.project.project'),
-            type: 'project',
-            label: 'project',
-            disabled: false
-          }, {
-            id:21,
-            name: this.$t('project.module.module'),
-            type: 'module',
-            label: 'module',
-            disabled: false
-          }, {
-            id:22,
-            name: this.$t('project.endpoint.endpoint'),
-            type: 'input',
-            label: 'endpointId',
-            disabled: false
-          }, {
-            id: 4,
-            name: this.$t('alert.severity'),
-            type: 'selectString',
-            label: 'severity',
-            disabled: false
-          }, {
-            id: 11,
-            name: this.$t('asset.asset'),
-            type: 'asset',
-            label: 'asset',
-            disabled: false
-          }, {
-            id: 12,
-            name: this.$t('alert.list.state'),
-            type: 'select',
-            label: 'alertMessageState',
-            disabled: false
-          },
-            {
-              id:26,
-              name: this.$t('alert.list.id'),
-              type: 'id',
-              label: 'id',
-              disabled: false
-            },{
-              id:27,
-              name: this.$t('config.dc.dc'),
-              type: 'idc',
-              label: 'idcId',
-              disabled: false,
-              readonly: true,
-            }],
-        },
-        searchLabel: { //搜索参数
-
-        },
-        tablelable: [],
-        dropCol: [],
-        tableData: [],
-        defaultPick:12,
-        nowTime:'',
-      }
-    },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
-          }
-        }
+import axios from 'axios'
+import bus from '../../../../libs/bus'
+import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
+import deleteButton from '../../deleteButton'
+export default {
+  name: 'alertMessageTab',
+  components: {
+    alertMessageTable: alertMessageTable,
+    'delete-button': deleteButton
+  },
+  props: {
+    from: String, // 来自哪个主页面，有："asset"、"alertRule"
+    obj: Object // 关联的实体对象
+  },
+  data () {
+    return {
+      // 详情相关
+      graphShow: false,
+      chartDatas: [],
+      legend: [],
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      searchTime: [],
+      currentMsg: {},
+      chartUnit: 5,
+      requestIndex: 0,
+      defaultSearchValue: this.obj.alertNum ? 1 : 0,
+      showElementSet: false,
+      batchDeleteObjs: [],
+      tableId: 'alertListTable', // 需要分页的table的id，用于记录每页数量
+      showTopBtn: false, // top按钮是否显示
+      loading: false,
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
       },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
+
+      tableHover: false, // 控制滚动条和top按钮同时出现
+
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'alertRule',
+          show: true,
+          width: 180
+        }, {
+          label: this.$t('alert.list.labels'),
+          prop: 'labels',
+          show: true
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true
+        }, {
+          label: this.$t('alert.description'),
+          prop: 'description',
+          show: true
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.startAt'),
+          prop: 'startAt',
+          show: true
+        }, {
+          label: this.$t('alert.endAt'),
+          prop: 'endAt',
+          show: true
+        }, {
+          label: this.$t('overall.value'),
+          prop: 'current',
+          show: true
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 90
+        }
+      ],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 2,
+          name: this.$t('alert.alertName'),
+          type: 'input',
+          label: 'alertName',
+          disabled: false
+        }, {
+          id: 20,
+          name: this.$t('project.project.project'),
+          type: 'project',
+          label: 'project',
+          disabled: false
+        }, {
+          id: 21,
+          name: this.$t('project.module.module'),
+          type: 'module',
+          label: 'module',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('project.endpoint.endpoint'),
+          type: 'input',
+          label: 'endpointId',
+          disabled: false
+        }, {
+          id: 4,
+          name: this.$t('alert.severity'),
+          type: 'selectString',
+          label: 'severity',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }, {
+          id: 12,
+          name: this.$t('alert.list.state'),
+          type: 'select',
+          label: 'alertMessageState',
+          disabled: false
+        },
+        {
+          id: 26,
+          name: this.$t('alert.list.id'),
+          type: 'id',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 27,
+          name: this.$t('config.dc.dc'),
+          type: 'idc',
+          label: 'idcId',
+          disabled: false,
+          readonly: true
+        }]
+      },
+      searchLabel: { // 搜索参数
+
+      },
+      tablelable: [],
+      dropCol: [],
+      tableData: [],
+      defaultPick: 12,
+      nowTime: ''
+    }
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
         }
       }
     },
-    methods: {
-      elementsetShow(s, e) {
-        this.showElementSet = true;
-        this.$nextTick(() => {
-          var eventfixed = {
-            shezhi: 0,
-            screen: 0
-          };
-          eventfixed[s] = 1;
-          e.preventDefault();
-          this.$store.commit('setHeaderTable', this.tablelable);
-          this.$store.commit('setEventfixed', eventfixed);
-          const h = document.documentElement.clientHeight;
-          const w = document.documentElement.clientWidth;
-          const dw = this.$refs.elementset.$el.offsetWidth;
-          const dh = this.$refs.elementset.$el.offsetHeight;
-          let positionx =
-            e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
-          let positiony =
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
+          }
+        }
+        return key + '：' + value
+      }
+    }
+  },
+  methods: {
+    elementsetShow (s, e) {
+      this.showElementSet = true
+      this.$nextTick(() => {
+        const eventfixed = {
+          shezhi: 0,
+          screen: 0
+        }
+        eventfixed[s] = 1
+        e.preventDefault()
+        this.$store.commit('setHeaderTable', this.tablelable)
+        this.$store.commit('setEventfixed', eventfixed)
+        const h = document.documentElement.clientHeight
+        const w = document.documentElement.clientWidth
+        const dw = this.$refs.elementset.$el.offsetWidth
+        const dh = this.$refs.elementset.$el.offsetHeight
+        const positionx =
+            e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw
+        const positiony =
             e.clientY + dh <= h - 10
               ? e.clientY
-              : e.clientY - (e.clientY + dh - h);
-          this.$store.commit('setPosition', {positionx, positiony});
-        });
-      },
-      elementsetHide() {
-        //悬浮点击空白隐藏
-        //this.$refs.elementset.elementsetHide();
-        this.showElementSet = false;
-      },
-      tablelabelEmit(data) {
-        //获取子组件传过来的参数
-        this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
-        this.dropCol = data;
-      },
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      deleteMessage(deleteBox,cb) {
-        this.$put("alert/message", deleteBox).then(res => {
-          if (res.code === 200) {
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-            this.getAlertList();
-            cb();
+              : e.clientY - (e.clientY + dh - h)
+        this.$store.commit('setPosition', { positionx, positiony })
+      })
+    },
+    elementsetHide () {
+      // 悬浮点击空白隐藏
+      // this.$refs.elementset.elementsetHide();
+      this.showElementSet = false
+    },
+    tablelabelEmit (data) {
+      // 获取子组件传过来的参数
+      this.$store.commit('setHeaderTable', data)
+      this.tablelable = data
+      this.dropCol = data
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    deleteMessage (deleteBox, cb) {
+      this.$put('alert/message', deleteBox).then(res => {
+        if (res.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.getAlertList()
+          cb()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    exportCur: function () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.importBox.show = false
+    },
+    exportAll: function () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.importBox.show = false
+    },
+    getTimeString: function () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum: function (num) {
+      return num > 9 ? num : '0' + num
+    },
+    exportExcel: function (params) {
+      const temp = this
+      if (!params) {
+        params = temp.params
+      }
+      axios.get('alert/message/export', { responseType: 'blob', params: params }).then(res => {
+        const fileName = 'alert-message-' + temp.getTimeString() + '.xlsx'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
           } else {
-            this.$message.error(res.msg);
+            console.error(error)
           }
-        })
-      },
-      exportCur:function(){
-        let searchLabel=Object.assign({},this.searchLabel)
-        this.$set(searchLabel,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(searchLabel);
-        this.importBox.show = false;
-      },
-      exportAll:function(){
-        let temp = JSON.parse(JSON.stringify(this.searchLabel));
-        temp.pageSize = -1;
-        this.$set(temp,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(temp);
-        this.importBox.show = false;
-      },
-      getTimeString:function(){
-        let split='-';
-        let date=new Date();
-        let year=date.getFullYear();
-        let month=this.formatNum(date.getMonth()+1);
-        let day=this.formatNum(date.getDate());
-        let hours=this.formatNum(date.getHours());
-        let minutes=this.formatNum(date.getMinutes());
-        let seconds=this.formatNum(date.getSeconds());
-        return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds;
-      },
-      formatNum:function(num){
-        return num>9?num:'0'+num;
-      },
-      exportExcel:function(params){
-        let temp=this;
-        if(!params){
-          params=temp.params;
         }
-        axios.get("alert/message/export", {responseType:'blob', params: params}).then(res=>{
-          let fileName = 'alert-message-'+temp.getTimeString()+'.xlsx';
-          if(window.navigator.msSaveOrOpenBlob){
-            // 兼容ie11
-            let blobObject = new Blob([res.data]);
-            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
-          }else{
-            let url = URL.createObjectURL(new Blob([res.data]));
-            let a = document.createElement('a');
-            document.body.appendChild(a); //此处增加了将创建的添加到body当中
-            a.href = url;
-            a.download = fileName;
-            a.target = '_blank';
-            a.click();
-            a.remove(); //将a标签移除
-          }
-        },error=>{
-          let $self=this;
-          let reader = new FileReader();
-          reader.onload = function(event){
-            let responseText = reader.result;
-            let exception = JSON.parse(responseText);
-            if(exception.message){
-              $self.$message.error(exception.message)
-            }else{
-              console.error(error)
-            }
-          };
-          reader.readAsText(error.response.data);
-        })
-      },
-      queryChartDate() {
-        let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
-        let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
-        this.searchTime = [start, end];
-        let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
-        let step = '15s';
-        if(timeDiff< 1){
-          step='15s';
-        }else if(timeDiff < 7){
-          step='5m';
-        }else if(timeDiff<30){
-          step='10m';
-        }else{
-          step='30m';
-        }
-        let axiosArr=[];
-        let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
-        axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
-        this.legend = [];
-        this.chartDatas = [];
-        axios.all(axiosArr).then(res =>{
-          try {
-            res.forEach((response, promIndex) => {
-              if (response.status == 200) {
-                if (response.data.status == 'success') {
-                  let queryData = response.data.data.result[0];
-                  if (queryData) {
-                    let chartData = {
-                      type: "line",
-                      symbol: 'none',  //去掉点
-                      smooth: 0.2,  //曲线变平滑
-                      name: '',
-                      lineStyle: {
-                        width: 1,
-                        opacity: 0.9
-                      },
-                    };
-                    chartData.name += "{";
-                    alias += "{";
-                    Object.keys(queryData.metric).forEach((item, index) => {
-                      let label = item;
-                      let value = queryData.metric[label];
-                      chartData.name += label + "='" + value + "',";
-                    });
-                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
-                    chartData.name += "}";
-                    let alias = chartData.name;
-                    let legend = {
-                      name: chartData.name,
-                      alias: alias,
-                      isGray: false
+        reader.readAsText(error.response.data)
+      })
+    },
+    queryChartDate () {
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      const axiosArr = []
+      const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
+      axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+      this.legend = []
+      this.chartDatas = []
+      axios.all(axiosArr).then(res => {
+        try {
+          res.forEach((response, promIndex) => {
+            if (response.status == 200) {
+              if (response.data.status == 'success') {
+                const queryData = response.data.data.result[0]
+                if (queryData) {
+                  const chartData = {
+                    type: 'line',
+                    symbol: 'none', // 去掉点
+                    smooth: 0.2, // 曲线变平滑
+                    name: '',
+                    lineStyle: {
+                      width: 1,
+                      opacity: 0.9
                     }
-                    this.legend.push(legend);
-                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                      return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
-                    });
-                    this.chartDatas.push(chartData);
-
                   }
-                } else {
-                  this.$message.error(response.data.error)
+                  let alias = chartData.name
+                  chartData.name += '{'
+                  alias += '{'
+                  Object.keys(queryData.metric).forEach((item, index) => {
+                    const label = item
+                    const value = queryData.metric[label]
+                    chartData.name += label + "='" + value + "',"
+                  })
+                  chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                  chartData.name += '}'
+                  const legend = {
+                    name: chartData.name,
+                    alias: alias,
+                    isGray: false
+                  }
+                  this.legend.push(legend)
+                  chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                    return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)]
+                  })
+                  this.chartDatas.push(chartData)
                 }
+              } else {
+                this.$message.error(response.data.error)
               }
-            });
-            this.$nextTick(() => {
-              this.$refs.messageChart.setRandomColors(this.chartDatas.length);
-              this.$refs.messageChart.setLegend(this.legend);
-              this.$refs.messageChart.setSeries(this.chartDatas);
-              this.$refs.messageChart.endLoading();
-            });
-          } catch(err) {
-            this.$message.error(err);
-            this.$refs.messageChart.endLoading();
-          }
-        })
-      },
-      detail(obj) {
-        this.chartDatas = [];
-        this.legend = [];
-        this.graphShow = true;
-        this.currentMsg = obj;
-        this.$nextTick(() => {
-          this.$refs.messageChart.startLoading();
-          this.queryChartDate();
-        });
-      },
-      chartUnitChange:function(unit){
-        this.chartUnit=unit;
-        this.$nextTick(()=>{
-          this.queryChartDate()
-        })
-      },
-
-      dialogClose() {
-        this.graphShow = false;
-      },
-      openDelMessageBox:function(){
-        if(this.batchDeleteObjs.length<1) return;
-        if(this.$refs.alertMessageTable){
-          this.$refs.alertMessageTable.toDeleteMessage(false);
-        }
-      },
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("alert/message?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getAlertList();
-            } else {
-              this.$message.error(response.msg);
             }
           })
-        });
-      },
-      getAlertList() {
-        this.tableData = [];
-        this.loading = true;
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-
-        if(this.searchTime&& this.searchTime.length>1){
-          this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
-          this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
-        }else{
-          delete this.searchLabel.startAt
-          delete this.searchLabel.endAt
+          this.$nextTick(() => {
+            this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+            this.$refs.messageChart.setLegend(this.legend)
+            this.$refs.messageChart.setSeries(this.chartDatas)
+            this.$refs.messageChart.endLoading()
+          })
+        } catch (err) {
+          this.$message.error(err)
+          this.$refs.messageChart.endLoading()
         }
-        setTimeout(() => {
-          this.$get('alert/message', this.searchLabel).then(response => {
-            if (response.code == 200) {
-              this.nowTime=this.utcTimeToTimezoneStr(response.time);
-              this.tableData = response.data.list;
-              let axiosAll=[]
-              this.$nextTick(() => {
-                this.tableData.forEach((item) => {
-                  item.labels = JSON.parse(item.labels);
-                  if(item.alertRule.buildIn != 1){
-                    let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                    axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
-                  }else{
-                    axiosAll.push('')
+      })
+    },
+    detail (obj) {
+      this.chartDatas = []
+      this.legend = []
+      this.graphShow = true
+      this.currentMsg = obj
+      this.$nextTick(() => {
+        this.$refs.messageChart.startLoading()
+        this.queryChartDate()
+      })
+    },
+    chartUnitChange: function (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+
+    dialogClose () {
+      this.graphShow = false
+    },
+    openDelMessageBox: function () {
+      if (this.batchDeleteObjs.length < 1) return
+      if (this.$refs.alertMessageTable) {
+        this.$refs.alertMessageTable.toDeleteMessage(false)
+      }
+    },
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/message?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getAlertList()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    getAlertList () {
+      this.tableData = []
+      this.loading = true
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+
+      if (this.searchTime && this.searchTime.length > 1) {
+        this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTime[0]))
+        this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTime[1]))
+      } else {
+        delete this.searchLabel.startAt
+        delete this.searchLabel.endAt
+      }
+      setTimeout(() => {
+        this.$get('alert/message', this.searchLabel).then(response => {
+          if (response.code == 200) {
+            this.nowTime = this.utcTimeToTimezoneStr(response.time)
+            this.tableData = response.data.list
+            const axiosAll = []
+            this.$nextTick(() => {
+              this.tableData.forEach((item) => {
+                item.labels = JSON.parse(item.labels)
+                if (item.alertRule.buildIn != 1) {
+                  const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                  axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+                } else {
+                  axiosAll.push('')
+                }
+              })
+              axios.all(axiosAll).then(res => {
+                res.forEach((item, index) => {
+                  let current = []
+                  const response2 = item.data
+                  if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                    current = response2.data.result[0].value.map((item, i) => {
+                      if (i == 0) {
+                        return bus.computeTimezone(item)
+                      } else {
+                        return parseFloat(item).toFixed(2)
+                      }
+                    })
+                  } else {
+                    current = [null, null]
                   }
-                });
-                axios.all(axiosAll).then(res=>{
-                  res.forEach((item,index)=>{
-                    let current = [];
-                    let response2 = item.data;
-                    if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                      current = response2.data.result[0].value.map((item, i) => {
-                        if (i == 0) {
-                          return bus.computeTimezone(item);
-                        } else {
-                          return parseFloat(item).toFixed(2);
-                        }
-                      });
-                    }else{
-                      current=[null,null]
-                    }
-                    this.tableData[index].current=current;
-                  })
-                  this.$set(this.tableData,[...this.tableData])
+                  this.tableData[index].current = current
                 })
-              });
-              this.pageObj.total = response.data.total;
-              this.loading = false;
-            }
-          });
-        }, 1000);
-      },
-      promQueryParamConvert(obj){
-        let r = "(" + obj.alertRule.expr + ")";
-        let intoLabels=false
-        if (Object.keys(obj.labels).length > 0) {
-          r += function(){
-            let group =" and " +  "(group({";
-            let by = " by (";
+                this.$set(this.tableData, [...this.tableData])
+              })
+            })
+            this.pageObj.total = response.data.total
+            this.loading = false
+          }
+        })
+      }, 1000)
+    },
+    promQueryParamConvert (obj) {
+      let r = '(' + obj.alertRule.expr + ')'
+      let intoLabels = false
+      if (Object.keys(obj.labels).length > 0) {
+        r += (function () {
+          let group = ' and ' + '(group({'
+          let by = ' by ('
 
-            for (let k in obj.labels) {
-              if (k != 'alertname' && k != 'severity') {
-                intoLabels=true;
-                group += k;
-                group += "=";
-                group += ("'" + obj.labels[k] + "',");
-                by += k;
-                by += ","
-              }
+          for (const k in obj.labels) {
+            if (k !== 'alertname' && k !== 'severity') {
+              intoLabels = true
+              group += k
+              group += '='
+              group += ("'" + obj.labels[k] + "',")
+              by += k
+              by += ','
             }
-            if(intoLabels){
-              group = group.substring(0, group.length-1);
-              by = by.substring(0, by.length-1);
-              group += "})";
-              by += ")";
-              return group + by + ")";
-            }else{
-              return ''
-            }
-
-          }();
-        }
-        return r;
-        /*let result="(" + obj.alertRule.expr + ")";
+          }
+          if (intoLabels) {
+            group = group.substring(0, group.length - 1)
+            by = by.substring(0, by.length - 1)
+            group += '})'
+            by += ')'
+            return group + by + ')'
+          } else {
+            return ''
+          }
+        }())
+      }
+      return r
+      /* let result="(" + obj.alertRule.expr + ")";
         if(obj.labels){
           if(obj.labels.alertname){
             delete obj.labels.alertname;
@@ -622,132 +616,132 @@
             return q;
           }() + ")";
         }
-        return result;*/
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getAlertList();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getAlertList();
-      },
-      labelsClassName(row) {
-        if (row.column.label == this.$t("alert.list.labels")) {
-          return "alert-message-list-labels";
-        } else {
-          return "";
-        }
-      },
-      fillProject: function (module) {
-        this.$get('project', {"id": module.projectId}).then(response => {
-          if (response.code == 200) {
-            module.project = response.data.list[0];
-          }
-        })
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        if (this.from == this.$CONSTANTS.fromRoute.rule) {
-          this.searchLabel.ruleId = this.obj.id;
-        } else if (this.from == this.$CONSTANTS.fromRoute.asset) {
-          this.searchLabel.assetId = this.obj.id;
-        }else if(this.from == this.$CONSTANTS.fromRoute.endpoint){
-          this.searchLabel.endpointId=this.obj.id;
-        }
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.alertMessageTable.$refs.alertListTable &&  this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper){
-          this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getAlertList();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAlertList();
-      },
+        return result; */
     },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if(n.alertNum==0){
-            this.defaultPick=8
-          }else{
-            this.defaultPick=12;
-          }
-          if (this.from == this.$CONSTANTS.fromRoute.rule) {
-            this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
-              return item.label != "alertName" && item.label != "severity"
-            });
-            this.searchLabel.ruleId = n.id;
-          } else if (this.from == this.$CONSTANTS.fromRoute.asset) {
-            this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
-              return item.label != "alertType" && item.label != "asset"
-            });
-            this.searchLabel.assetId = n.id;
-          } else if(this.from == this.$CONSTANTS.fromRoute.endpoint){
-            this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
-              return item.label != "alertType" && item.label != "endpoint"
-            });
-            this.searchLabel.endpointId = n.id;
-          }
-          if (n.alertNum) {
-            this.defaultSearchValue = 1;
-          }
-          this.getAlertList();
-        }
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-        }
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAlertList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAlertList()
+    },
+    labelsClassName (row) {
+      if (row.column.label === this.$t('alert.list.labels')) {
+        return 'alert-message-list-labels'
+      } else {
+        return ''
       }
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize) {
-        this.pageObj.pageSize = pageSize
+    fillProject: function (module) {
+      this.$get('project', { id: module.projectId }).then(response => {
+        if (response.code === 200) {
+          module.project = response.data.list[0]
+        }
+      })
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
       }
+      if (this.from === this.$CONSTANTS.fromRoute.rule) {
+        this.searchLabel.ruleId = this.obj.id
+      } else if (this.from === this.$CONSTANTS.fromRoute.asset) {
+        this.searchLabel.assetId = this.obj.id
+      } else if (this.from === this.$CONSTANTS.fromRoute.endpoint) {
+        this.searchLabel.endpointId = this.obj.id
+      }
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.alertMessageTable.$refs.alertListTable && this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper) {
+        this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0
+      }
+      this.getAlertList()
     },
-    mounted() {
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList")
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList"))
-        : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList")
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList"))
-        : this.tableTitle;
-      // this.$refs['alertMessageTable'].bottomBox.mainResizeShow=false;
-    },
-    beforeDestroy(){
-
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAlertList()
     }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n.alertNum === 0) {
+          this.defaultPick = 8
+        } else {
+          this.defaultPick = 12
+        }
+        if (this.from === this.$CONSTANTS.fromRoute.rule) {
+          this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
+            return item.label !== 'alertName' && item.label !== 'severity'
+          })
+          this.searchLabel.ruleId = n.id
+        } else if (this.from === this.$CONSTANTS.fromRoute.asset) {
+          this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
+            return item.label !== 'alertType' && item.label !== 'asset'
+          })
+          this.searchLabel.assetId = n.id
+        } else if (this.from === this.$CONSTANTS.fromRoute.endpoint) {
+          this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
+            return item.label !== 'alertType' && item.label !== 'endpoint'
+          })
+          this.searchLabel.endpointId = n.id
+        }
+        if (n.alertNum) {
+          this.defaultSearchValue = 1
+        }
+        this.getAlertList()
+      }
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    this.tablelable = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/alertList')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/alertList'))
+      : this.tableTitle
+    this.dropCol = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/alertList')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/alertList'))
+      : this.tableTitle
+      // this.$refs['alertMessageTable'].bottomBox.mainResizeShow=false;
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
index 844dffda4..6a78d47e0 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -88,194 +88,194 @@
 </template>
 
 <script>
-  import cabinetBox from "../../rightBox/cabinetBox";
-  import deleteButton from "../../deleteButton";
-  export default {
-    name: "cabinetTab",
-    components: {
-      "cabinet-box": cabinetBox,
-      'delete-button':deleteButton,
-    },
-    props: {
-      obj: Object, //关联的实体对象
-    },
-    data() {
-      return {
-        cabinet: {},
-        blankCabinet: {
-          id:'',
-          idcId:'',
-          name:'',
-          remark:'',
-          seq:'',
-          uSize:1
+import cabinetBox from '../../rightBox/cabinetBox'
+import deleteButton from '../../deleteButton'
+export default {
+  name: 'cabinetTab',
+  components: {
+    'cabinet-box': cabinetBox,
+    'delete-button': deleteButton
+  },
+  props: {
+    obj: Object // 关联的实体对象
+  },
+  data () {
+    return {
+      cabinet: {},
+      blankCabinet: {
+        id: '',
+        idcId: '',
+        name: '',
+        remark: '',
+        seq: '',
+        uSize: 1
+      },
+      batchDeleteObjs: [],
+      rightBox: { show: false },
+      showTopBtn: false, // top按钮是否显示
+      loading: false,
+      currentDc: {},
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
         },
-        batchDeleteObjs:[],
-        rightBox: {show: false},
-        showTopBtn: false, //top按钮是否显示
-        loading: false,
-        currentDc: {},
-        tableTitle: [
+        {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        },
+        {
+          label: this.$t('asset.uSize'),
+          prop: 'uSize',
+          show: true
+        },
+        {
+          label: this.$t('config.dc.assets'),
+          prop: 'assetStat',
+          show: true
+        },
+        {
+          label: this.$t('alert.alert'),
+          prop: 'alertStat',
+          show: true
+        },
+        {
+          label: this.$t('config.dc.remark'),
+          prop: 'remark',
+          show: true
+        },
+        {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
           {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
+            id: 11,
+            name: this.$t('overall.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
           },
           {
-            label:this.$t('overall.name'),
-            prop:'name',
-            show:true
+            id: 12,
+            name: this.$t('asset.uSize'),
+            label: 'uSize',
+            disabled: false
           },
           {
-            label:this.$t('asset.uSize'),
-            prop:'uSize',
-            show:true
-          },
-          {
-            label:this.$t('config.dc.assets'),
-            prop:'assetStat',
-            show:true
-          },
-          {
-            label:this.$t('alert.alert'),
-            prop:'alertStat',
-            show:true
-          },
-          {
-            label:this.$t('config.dc.remark'),
-            prop:'remark',
-            show:true
-          },
-          {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
+            id: 13,
+            name: this.$t('config.dc.remark'),
+            label: 'remark',
+            disabled: false
           }
-        ],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-            {
-              id: 11,
-              name: this.$t('overall.name'),
-              type: 'input',
-              label: 'name',
-              disabled: false
-            },
-            {
-              id:12,
-              name:this.$t('asset.uSize'),
-              label:'uSize',
-              disabled: false
-            },
-            {
-              id:13,
-              name:this.$t('config.dc.remark'),
-              label:'remark',
-              disabled: false
-            }
-          ],
-        },
-        searchLabel: { //搜索参数
-        },
-        tableData: [],
+        ]
+      },
+      searchLabel: { // 搜索参数
+      },
+      tableData: []
+    }
+  },
+  methods: {
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    add () {
+      this.cabinet = this.newCabinet()
+      this.rightBox.show = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.getTableData()
+        this.$store.commit('setDcDataRefresh')
       }
     },
-    methods: {
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      add() {
-        this.cabinet = this.newCabinet();
-        this.rightBox.show = true;
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.getTableData();
-          this.$store.commit('setDcDataRefresh');
+    newCabinet () {
+      return JSON.parse(JSON.stringify(this.blankCabinet))
+    },
+    edit (cabinet) {
+      this.cabinet = JSON.parse(JSON.stringify(cabinet))
+      this.rightBox.show = true
+    },
+    getTableData () {
+      if (!this.hasButton('dc_cabinet_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.tableData = []
+      this.loading = true
+      this.$set(this.searchLabel, 'pageNo', 1)
+      this.$set(this.searchLabel, 'pageSize', -1)
+      this.$get('/cabinet', this.searchLabel).then(response => {
+        this.loading = false
+        if (response.code == 200) {
+          this.tableData = response.data.list
         }
-      },
-      newCabinet() {
-        return JSON.parse(JSON.stringify(this.blankCabinet));
-      },
-      edit(cabinet) {
-        this.cabinet = JSON.parse(JSON.stringify(cabinet));
-        this.rightBox.show = true;
-      },
-      getTableData() {
-        if (!this.hasButton('dc_cabinet_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
+      })
+    },
+    search (searchObj) {
+      this.searchLabel = { idcId: this.currentDc.id, pageNo: 1, pageSize: -1 }
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
-        this.tableData = [];
-        this.loading = true;
-        this.$set(this.searchLabel, "pageNo", 1);
-        this.$set(this.searchLabel, "pageSize", -1);
-        this.$get("/cabinet", this.searchLabel).then(response => {
-          this.loading = false;
+      }
+      if (this.$refs.cabTable && this.$refs.cabTable.bodyWrapper) {
+        this.$refs.cabTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    assetStatClassName (param) {
+      if (param.column.label == this.$t('config.model.assets') || param.column.label == this.$t('alert.alert')) {
+        return 'asset-state'
+      }
+      return ''
+    },
+    del: function (cabinet) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/cabinet?ids=' + cabinet.id).then(response => {
           if (response.code == 200) {
-            this.tableData = response.data.list;
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.getTableData()
+            this.$store.commit('setDcDataRefresh')
+          } else {
+            this.$message.error(response.msg)
           }
-        });
-      },
-      search(searchObj) {
-        this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(this.$refs.cabTable&&this.$refs.cabTable.bodyWrapper){
-          this.$refs.cabTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      assetStatClassName(param) {
-        if (param.column.label == this.$t("config.model.assets") || param.column.label == this.$t("alert.alert")) {
-          return "asset-state";
-        }
-        return "";
-      },
-      del:function(cabinet){
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
-            if(response.code ==  200){
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getTableData();
-              this.$store.commit('setDcDataRefresh');
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
         })
-      },
-      allDelAfter(){
-        this.getTableData();
-        this.$store.commit('setDcDataRefresh');
-      },
+      })
     },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.currentDc = JSON.parse(JSON.stringify(n));
-            this.searchLabel = {idcId: this.currentDc.id};
-            this.getTableData();
-          }
+    allDelAfter () {
+      this.getTableData()
+      this.$store.commit('setDcDataRefresh')
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.currentDc = JSON.parse(JSON.stringify(n))
+          this.searchLabel = { idcId: this.currentDc.id }
+          this.getTableData()
         }
-      },
-    },
+      }
+    }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index a20238152..792c06b77 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -61,7 +61,7 @@
     <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
      <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
                :pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
-               @selection-change="selectChange" v-if="tableShow && plTableSHow" :border="true" :tooltip-effect="'light'" id="endpoint-list-table">
+               v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
       <pl-table-column
         type="selection"
         width="39"
@@ -124,567 +124,556 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts';
-  import chartBox from "../../../page/dashboard/chartBox";
-  import axios from 'axios';
-  import loading from "../../loading";
-  import bus from "../../../../libs/bus";
-  import chartDataFormat from "../../../charts/chartDataFormat";
-  import chart from '../../../page/dashboard/overview/chart'
-  var timeout;
-  var internal;
-  export default {
-    name: "endpointQueryTab",
-    components: {
-      'chart-box': chartBox,
-      'loading': loading,
-      'chart':chart
+import chartBox from '../../../page/dashboard/chartBox'
+import axios from 'axios'
+import bus from '../../../../libs/bus'
+import chart from '../../../page/dashboard/overview/chart'
+
+let timeout
+let internal
+export default {
+  name: 'endpointQueryTab',
+  components: {
+    'chart-box': chartBox,
+    chart: chart
+  },
+  props: {
+    obj: Object, // 关联的实体对象
+    from: String
+  },
+  data () {
+    return {
+      chart: {},
+      tableShow: true,
+      dropdownShow: false,
+      loading: false,
+      tools: {
+        showTopBtn: false, // 主列表top按钮
+        tableHover: false
+      },
+      currentEndpoint: {},
+      queryData: [], // endpoint 查询列表数据
+      tableData: [],
+      tableDataCopy: '',
+      queryExpression: '',
+      elementMetricDatas: [], // element 列提示信息列表
+      formatTime: '', // 查询endpoint的时间，
+      selectedEndpoints: [], // 选中的metric{label='value'}
+      chartDatas: [], // 从query_range查询到的数据
+      legend: [], // echart legend
+      graphShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      panelData: [], // chart-box的panel下拉框数据,
+      hideSameLabels: true,
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      chartUnit: 5,
+      rightBox: { show: false },
+      plTableSHow: true,
+      scrollTop: 0,
+      scrollbarWrap: null
+    }
+  },
+  methods: {
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
     },
-    props: {
-      obj: Object, //关联的实体对象
-      from: String,
-    },
-    data() {
-      let temp = this;
-      return {
-        chart: {},
-        tableShow: true,
-        dropdownShow: false,
-        loading: false,
-        tools: {
-          showTopBtn: false, //主列表top按钮
-          tableHover: false,
+    saveChart () { // 新增chart
+      const chart = {
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: this.chartUnit,
+        param: {
+          url: '',
+          threshold: ''
         },
-        currentEndpoint: {},
-        queryData: [],//endpoint 查询列表数据
-        tableData:[],
-        tableDataCopy: '',
-        queryExpression: '',
-        elementMetricDatas:[],//element 列提示信息列表
-        formatTime: '',//查询endpoint的时间，
-        selectedEndpoints:[],//选中的metric{label='value'}
-        chartDatas:[],//从query_range查询到的数据
-        legend:[],//echart legend
-        graphShow:false,
-        searchTime:[new Date().setHours(new Date().getHours() - 1), new Date()],
-        panelData: [], //chart-box的panel下拉框数据,
-        hideSameLabels: true,
-        sameLabels:['instance','module','project','asset','endpoint','datacenter'],
-        chartUnit:5,
-        rightBox: {show: false},
-        plTableSHow:true,
-        scrollTop:0,
-        scrollbarWrap: null,
+        elements: [],
+        panel: '',
+        sync: 0
+      }
+      for (let i = 0; i < this.selectedEndpoints.length; i++) {
+        if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
+          chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
+        }
+      }
+      this.chart = chart
+      this.rightBox.show = true
+    },
+    dropdownHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.dropdownShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.dropdownShow = false
+        }, 700)
       }
     },
-    methods: {
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      saveChart() { //新增chart
-        let chart = {
-          title: '',
-          type:'line',
-          span:12,
-          height:'400',
-          unit: this.chartUnit,
-          param: {
-            url:'',
-            threshold: '',
-          },
-          elements:[],
-          panel: '',
-          sync: 0
-        };
-        for (let i = 0; i < this.selectedEndpoints.length; i++) {
-          if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !=  '') {
-            chart.elements.push({chartId: "", expression: this.selectedEndpoints[i].element, type: 'expert'});
+    createSuccess (type, response, param, panel) {
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'success'
+      }).then(() => {
+        bus.$emit('menu-change', 'panel')
+        this.$store.state.showPanel.id = panel.id
+        this.$store.state.showPanel.name = panel.name
+        this.$router.push({
+          path: '/panel',
+          query: {
+            t: +new Date()
           }
+        })
+      })
+    },
+    tableReload () {
+      const table = this.$refs.endpointQueryTable
+      internal = setInterval(() => {
+        if (!window.resizing) {
+          table.setHeight()
+          clearInterval(internal)
         }
-        this.chart = chart;
-        this.rightBox.show = true;
-      },
-      dropdownHandler(show) {
-        if (show) {
-          clearTimeout(timeout);
-          this.dropdownShow = true;
+      }, 200)
+    },
+    queryEndpoint () {
+      this.loading = true
+      this.queryElementTips()
+      this.queryData = []
+      this.tableData = []
+      this.tableDataCopy = ''
+      setTimeout(() => {
+        this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response => {
+          this.loading = false
+          if (response.status === 'success') {
+            const results = response.data.result
+            this.queryData = JSON.parse(JSON.stringify(results))
+            this.tableData = this.handlerTableData(results)
+            this.tableDataCopy = JSON.stringify(this.tableData)
+            this.$nextTick(this.$refs.endpointQueryTable.doLayout())
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
+                console.info(this.scrollbarWrap)
+                this.toTopBtnHandler(this.scrollbarWrap)
+              })
+            }
+          }
+        })
+      }, 450)
+    },
+    clearSelectedMetrics () {
+      this.$refs.endpointQueryTable.clearSelection()
+    },
+    changeTime: function (size, unit) {
+      this.formatTime = this.getTime(size, unit)
+      this.showEndpoint()
+    },
+    pickTime: function () {
+      this.showEndpoint()
+    },
+    getTime: function (size, unit) { // 计算时间
+      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
+      if (unit) {
+        switch (unit) {
+          case 'y':
+            now.setFullYear(now.getFullYear() + size)
+            break
+          case 'M':
+            now.setMonth(now.getMonth() + size)
+            break
+          case 'd':
+            now.setDate(now.getDate() + size)
+            break
+          case 'h':
+            now.setHours(now.getHours() + size)
+            break
+          case 'm':
+            now.setMinutes(now.getMinutes() + size)
+            break
+          case 's':
+            now.setSeconds(now.getSeconds() + size)
+            break
+          default:
+            console.error('unit error')
+        }
+      } else {
+        now.setSeconds(now.getSeconds() + size)
+      }
+      const year = now.getFullYear()
+      let month = now.getMonth() + 1
+      month = month < 10 ? '0' + month : month
+      let day = now.getDate()
+      day = day < 10 ? '0' + day : day
+      let hour = now.getHours()
+      hour = hour < 10 ? '0' + hour : hour
+      let minute = now.getMinutes()
+      minute = minute < 10 ? '0' + minute : minute
+      let second = now.getSeconds()
+      second = second < 10 ? '0' + second : second
+      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    },
+    handlerTableData (results) {
+      const tableData = []
+      for (const result of results) {
+        const metricName = result.metric.__name__
+        let temp = metricName
+        let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
+        const metricColor = ''
+        const bracketsColor = '#eb7b18'// #eb7b18
+        const labelColor = '#65bbd1'// #66d9ef
+        const valueColor = '#61c261'// #74e680
+        let colorTemp = `<span style="${metricColor}">${metricName}</span>`
+        let colorSimpleTemp = `<span>${metricName}</span>`
+        let metricTip = {}
+        const queryInfos = (this.elementMetricDatas.filter((item) => {
+          return item.metric === temp
+        }))
+        if (queryInfos && queryInfos.length > 0) {
+          metricTip = queryInfos[0]
         } else {
-          timeout = setTimeout(() => {
-            this.dropdownShow = false;
-          }, 700);
+          metricTip.metric = temp
         }
-      },
-      createSuccess(type, response, param, panel) {
-        this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'success'
-        }).then(() => {
-          bus.$emit("menu-change", 'panel');
-          this.$store.state.showPanel.id = panel.id;
-          this.$store.state.showPanel.name = panel.name;
-          this.$router.push({
-            path: "/panel",
-            query: {
-              t: +new Date()
-            }
-          });
-        });
-      },
-      tableReload() {
-        let table = this.$refs.endpointQueryTable;
-        internal = setInterval(() => {
-          if (!window.resizing) {
-            table.setHeight();
-            clearInterval(internal);
+        delete result.metric.__name__
+        temp += '{'
+        simpleTemp += '{'
+        colorTemp += `<span style="color: ${bracketsColor}">{</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
+        const keys = Object.keys(result.metric)
+        for (const index in keys) {
+          const key = keys[index]
+          temp += key + "='" + result.metric[key] + "',"
+          colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
+          if (!this.sameLabels.some((i) => { return i == key })) {
+            simpleTemp += key + "='" + result.metric[key] + "',"
+            colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
           }
-        }, 200);
-      },
-      queryEndpoint() {
-        this.loading = true;
-        this.queryElementTips();
-        this.queryData = [];
-        this.tableData = [];
-        this.tableDataCopy = '';
-        setTimeout(() => {
-          this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
-            this.loading = false;
-            if(response.status==="success"){
-              let results = response.data.result;
-              this.queryData=JSON.parse(JSON.stringify(results));
-              this.tableData = this.handlerTableData(results);
-              this.tableDataCopy = JSON.stringify(this.tableData);
-              this.$nextTick(this.$refs.endpointQueryTable.doLayout());
-              if (!this.scrollbarWrap) {
-                this.$nextTick(() => {
-                  this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper;
-                  console.info(this.scrollbarWrap)
-                  this.toTopBtnHandler(this.scrollbarWrap);
-                });
-              }
-            }
-          });
-        }, 450);
-      },
-      clearSelectedMetrics() {
-        this.$refs.endpointQueryTable.clearSelection();
-      },
-      changeTime:function(size,unit){
-        let time=this.getTime(size,unit);
-        this.formatTime=time;
-        this.showEndpoint();
-      },
-      pickTime:function(){
-        this.showEndpoint();
-      },
-      getTime:function(size,unit){//计算时间
-        let now=!this.formatTime? new Date(bus.computeTimezone(new Date().getTime())):new Date(this.formatTime);
-        if(unit){
-          switch (unit) {
-            case 'y':
-              now.setFullYear(now.getFullYear()+size);
-              break;
-            case 'M':
-              now.setMonth(now.getMonth()+size);
-              break;
-            case 'd':
-              now.setDate(now.getDate()+size);
-              break;
-            case 'h':
-              now.setHours(now.getHours()+size);
-              break;
-            case 'm':
-              now.setMinutes(now.getMinutes()+size);
-              break;
-            case 's':
-              now.setSeconds(now.getSeconds()+size);
-              break;
-            default:
-              console.error('unit error');
-          }
-        }else{
-          now.setSeconds(now.getSeconds()+size);
         }
-        let year=now.getFullYear();
-        let month=now.getMonth()+1;
-        month=month<10?"0"+month:month;
-        let day=now.getDate();
-        day=day<10?"0"+day:day;
-        let hour=now.getHours();
-        hour=hour<10?"0"+hour:hour;
-        let minute=now.getMinutes();
-        minute=minute<10?"0"+minute:minute;
-        let second=now.getSeconds();
-        second=second<10?"0"+second:second;
-        let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
-        return current;
-      },
-      handlerTableData(results) {
-        let tableData = [];
-        for(let result of results) {
-          let metricName = result.metric.__name__;
-          let temp = metricName;
-          let simpleTemp = metricName;//显示简略信息：隐藏same labels后的结果
-          let metricColor = "";
-          let bracketsColor = "#eb7b18";//#eb7b18
-          let labelColor = "#65bbd1";//#66d9ef
-          let valueColor = "#61c261";//#74e680
-          let colorTemp = `<span style="${metricColor}">${metricName}</span>`;
-          let colorSimpleTemp = `<span>${metricName}</span>`;
-          let metricTip = {};
-          let queryInfos = (this.elementMetricDatas.filter((item)=> {
-            return item.metric === temp;
-          }));
-          if(queryInfos && queryInfos.length > 0) {
-            metricTip = queryInfos[0];
-          } else {
-            metricTip.metric=temp;
-          }
-          delete result.metric.__name__;
-          temp += "{";
-          simpleTemp += "{";
-          colorTemp += `<span style="color: ${bracketsColor}">{</span>`;
-          colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`;
-          let keys = Object.keys(result.metric);
-          for (let index in keys){
-            let key = keys[index];
-            temp += key + "='" + result.metric[key] + "',";
-            colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
-            if(!this.sameLabels.some((i)=> {return i == key})) {
-              simpleTemp += key + "='" + result.metric[key] + "',";
-              colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
-            }
-          }
-          if(temp.indexOf(',') != -1){
-            temp = temp.substr(0,temp.length-1);
-          }
-          if(simpleTemp.indexOf(',') != -1){
-            simpleTemp = simpleTemp.substr(0,simpleTemp.length-1);
-          }
-          if(colorTemp.indexOf(',') != -1){
-            colorTemp = colorTemp.substr(0,colorTemp.length-1);
-          }
-          if(colorSimpleTemp.indexOf(',') != -1){
-            colorSimpleTemp = colorSimpleTemp.substr(0,colorSimpleTemp.length-1);
-          }
-
-
-          temp += "}";
-          simpleTemp += "}";
-          colorTemp += `<span style="color: ${bracketsColor}">}</span>`;
-          colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`;
-          if(!/.+\{.+\}/.test(simpleTemp)) {
-            simpleTemp = simpleTemp.substr(0,simpleTemp.length-2);
-          }
-
-          if(!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)){
-            let metricReg=new RegExp("<span.*?>"+metricName+"<\/span>")
-            colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0];
-          }
-
-          let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
-          //this.tableData.push(edpQueryData);
-          tableData.push(edpQueryData);
+        if (temp.indexOf(',') !== -1) {
+          temp = temp.substr(0, temp.length - 1)
         }
-        return tableData;
-      },
-      selectChange:function(selection){//selection 选中的row的数组
-        this.selectedEndpoints=selection;
-      },
-      selectable:function(row,index){
-        if(this.selectedEndpoints.length>=20 && !this.selectedEndpoints.includes(row)){
-          return false;
-        }else{
-          return true;
+        if (simpleTemp.indexOf(',') !== -1) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
         }
-      },
-      viewGraph:function(){
-        if(this.selectedEndpoints.length < 1) {
-          return;
+        if (colorTemp.indexOf(',') !== -1) {
+          colorTemp = colorTemp.substr(0, colorTemp.length - 1)
+        }
+        if (colorSimpleTemp.indexOf(',') !== -1) {
+          colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
         }
 
-        this.chartDatas = [];
-        this.legend = [];
-        this.graphShow = true;
-        this.$nextTick(() => {
-          this.$refs.endpointChart.startLoading();
-          this.queryChartDate();
-        });
-      },
-      dialogClose:function(){
-        this.graphShow=false;
-      },
-      chartUnitChange:function(unit){
-        this.chartUnit=unit;
-        this.$nextTick(()=>{
-          this.queryChartDate()
-        })
-      },
-      queryChartDate:function(){
-        let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
-        let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
-        this.searchTime = [start, end];
-        let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
-        // end - start < 1 day : 15s
-        // end - start < 7 day : 5m
-        // end - start < 30 day : 10m
-        // end - start > 30 day : 30m
-        let step = '15s';
-        if(timeDiff< 1){
-          step='15s';
-        }else if(timeDiff < 7){
-          step='5m';
-        }else if(timeDiff<30){
-          step='10m';
-        }else{
-          step='30m';
+        temp += '}'
+        simpleTemp += '}'
+        colorTemp += `<span style="color: ${bracketsColor}">}</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
+        if (!/.+\{.+\}/.test(simpleTemp)) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
         }
-        let axiosArr=[];
-        for(let endpoint of this.selectedEndpoints){
-          axiosArr.push(axios.get("/prom/api/v1/query_range?query="+endpoint.element+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
+
+        if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
+          const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
+          colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
         }
-        this.legend=[];
-        this.chartDatas = [];
-        axios.all(axiosArr).then(res =>{
-          res.forEach((response,promIndex)=>{
-            if (response.status == 200) {
-              if(response.data.status == 'success'){
-                let queryData=response.data.data.result[0];
-                if(queryData){
-                  let chartData={
-                    type:"line",
-                    symbol:'none',  //去掉点
-                    smooth:0.2,
-                    lineStyle: {
-                      width: 1,
-                      opacity: 0.9
-                    },
-                  };
-                  chartData.name=queryData.metric.__name__;
-                  let alias=queryData.metric.__name__;
-                  delete queryData.metric.__name__;
-                  chartData.name+="{";
-                  alias+="{";
-                  Object.keys(queryData.metric).forEach((item,index)=>{
-                    let label=item;
-                    let value=queryData.metric[label];
-                    chartData.name+=label +"='"+value+"',";
-                    if(!this.sameLabels.some((i)=>{return i == label})){
-                      alias+=label +"='"+value+"',";
-                    }
-                  })
-                  chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name;
-                  alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias;
-                  chartData.name+="}";
-                  alias+="}";
-                  if(!/.+\{.+\}/.test(alias)){
-                    alias=alias.substr(0,alias.length-2);
+
+        const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
+        // this.tableData.push(edpQueryData);
+        tableData.push(edpQueryData)
+      }
+      return tableData
+    },
+    selectChange: function (selection) { // selection 选中的row的数组
+      this.selectedEndpoints = selection
+    },
+    selectable: function (row, index) {
+      if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
+        return false
+      } else {
+        return true
+      }
+    },
+    viewGraph: function () {
+      if (this.selectedEndpoints.length < 1) {
+        return
+      }
+
+      this.chartDatas = []
+      this.legend = []
+      this.graphShow = true
+      this.$nextTick(() => {
+        this.$refs.endpointChart.startLoading()
+        this.queryChartDate()
+      })
+    },
+    dialogClose: function () {
+      this.graphShow = false
+    },
+    chartUnitChange: function (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    queryChartDate: function () {
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      // end - start < 1 day : 15s
+      // end - start < 7 day : 5m
+      // end - start < 30 day : 10m
+      // end - start > 30 day : 30m
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      const axiosArr = []
+      for (const endpoint of this.selectedEndpoints) {
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+      }
+      this.legend = []
+      this.chartDatas = []
+      axios.all(axiosArr).then(res => {
+        res.forEach((response, promIndex) => {
+          if (response.status == 200) {
+            if (response.data.status == 'success') {
+              const queryData = response.data.data.result[0]
+              if (queryData) {
+                const chartData = {
+                  type: 'line',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2,
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
                   }
-                  let legend={
-                    name:chartData.name,
-                    alias:alias,
-                    // showText:this.formatLegend(chartData.name),
-                    isGray:false
-                  };
-                  this.legend.push(legend);
-                  chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
-                    return [dpsItem[0] * 1000, Number(dpsItem[1])];
-                  });
-                  this.chartDatas.push(chartData);
                 }
-              }else{
-                this.$message.error(response.data.error);
-                console.error(response.data);
+                chartData.name = queryData.metric.__name__
+                let alias = queryData.metric.__name__
+                delete queryData.metric.__name__
+                chartData.name += '{'
+                alias += '{'
+                Object.keys(queryData.metric).forEach((item, index) => {
+                  const label = item
+                  const value = queryData.metric[label]
+                  chartData.name += label + "='" + value + "',"
+                  if (!this.sameLabels.some((i) => { return i == label })) {
+                    alias += label + "='" + value + "',"
+                  }
+                })
+                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
+                chartData.name += '}'
+                alias += '}'
+                if (!/.+\{.+\}/.test(alias)) {
+                  alias = alias.substr(0, alias.length - 2)
+                }
+                const legend = {
+                  name: chartData.name,
+                  alias: alias,
+                  // showText:this.formatLegend(chartData.name),
+                  isGray: false
+                }
+                this.legend.push(legend)
+                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
+                })
+                this.chartDatas.push(chartData)
               }
+            } else {
+              this.$message.error(response.data.error)
+              console.error(response.data)
             }
-          });
-          this.$nextTick(()=>{
-           if( this.$refs.endpointChart){
-             this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
-             this.$refs.endpointChart.setLegend(this.legend)
-             this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-             this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
-             this.$refs.endpointChart.modifyOption("grid", "top", 30);
-             this.$refs.endpointChart.modifyOption("grid", "left", 0);
-             this.$refs.endpointChart.modifyOption("grid", "right", 30);
-             this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
-             this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
-             this.$refs.endpointChart.setSeries(this.chartDatas);
-             this.$refs.endpointChart.endLoading();
-           }
-          });
-
+          }
         })
-      },
-      cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’
-        if (row.columnIndex === 0) {
-          return 'disabledCheck'
-        }
-      },
-      getPanelData() { //获取panel数据
-        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list;
+        this.$nextTick(() => {
+          if (this.$refs.endpointChart) {
+            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
+            this.$refs.endpointChart.setLegend(this.legend)
+            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
+            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
+            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
+            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
+            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
+            this.$refs.endpointChart.setSeries(this.chartDatas)
+            this.$refs.endpointChart.endLoading()
           }
-        });
-      },
-      tableFilter() {
-        let temp = this;
-        let tableDatas = JSON.parse(this.tableDataCopy);
-        this.tableData = tableDatas.filter((item)=>{
-          let element = temp.hideSameLabels ? item.simpleElement: item.element;
-          return element.indexOf(this.queryExpression) != -1;
         })
-      },
-      tableFilterHistory:function(expression){
-        let metric='';
-        let labels=[];
-        if(/\w*\{.*\}.*/i.test(expression)){
-          metric=expression.substr(0,expression.indexOf('{'));
-          let labelStr=expression.substr(expression.indexOf('{')+1,expression.indexOf('}')-expression.indexOf('{')-1);
-          let labelArr=labelStr.split(',');
-
-          if(labelArr.length>0){
-            labels=labelArr.map((item,index)=>{
-              let temp=item.split('=');
-              let label=temp[0]&&temp[0]!=''?temp[0]:null;
-              let value=temp[1]&&temp[1]!=''?temp[1]:null;
-              return label?{label:label,value:value}:null;
-            })
-          }
-
-        }else{
-          metric=expression;
+      })
+    },
+    cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
+      if (row.columnIndex === 0) {
+        return 'disabledCheck'
+      }
+    },
+    getPanelData () { // 获取panel数据
+      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
         }
-        this.tableData=[];
-        let sourceData=JSON.parse(JSON.stringify(this.queryData))
-        sourceData=sourceData.filter((item)=>{
-          let metricName=item.metric.__name__;
-          if(metricName.indexOf(metric)==-1){
-            return false;
-          }
+      })
+    },
+    tableFilter () {
+      const temp = this
+      const tableDatas = JSON.parse(this.tableDataCopy)
+      this.tableData = tableDatas.filter((item) => {
+        const element = temp.hideSameLabels ? item.simpleElement : item.element
+        return element.indexOf(this.queryExpression) !== -1
+      })
+    },
+    tableFilterHistory: function (expression) {
+      let metric = ''
+      let labels = []
+      if (/\w*\{.*\}.*/i.test(expression)) {
+        metric = expression.substr(0, expression.indexOf('{'))
+        const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
+        const labelArr = labelStr.split(',')
 
-          if(labels.length>0){
-            for(let i in labels){
-              let label=labels[i];
-              if(label&&label.label){
-                let value=item.metric[label.label];
-                let queryVal=label.value;
-                debugger
-                if(/^'.+'$/.test(queryVal)){
-                  queryVal=queryVal.substr(1,queryVal.length-2);
-                }
-                if(!value || value != queryVal){
-                  return false;
-                }
-              }else{
-                return true;
+        if (labelArr.length > 0) {
+          labels = labelArr.map((item, index) => {
+            const temp = item.split('=')
+            const label = temp[0] ? temp[0] : null
+            const value = temp[1] ? temp[1] : null
+            return label ? { label: label, value: value } : null
+          })
+        }
+      } else {
+        metric = expression
+      }
+      this.tableData = []
+      let sourceData = JSON.parse(JSON.stringify(this.queryData))
+      sourceData = sourceData.filter((item) => {
+        const metricName = item.metric.__name__
+        if (metricName.indexOf(metric) === -1) {
+          return false
+        }
+
+        if (labels.length > 0) {
+          for (const i in labels) {
+            const label = labels[i]
+            if (label && label.label) {
+              const value = item.metric[label.label]
+              let queryVal = label.value
+              if (/^'.+'$/.test(queryVal)) {
+                queryVal = queryVal.substr(1, queryVal.length - 2)
               }
-            }
-          }
-
-          return true;
-        })
-        for(let i in sourceData){
-          let item=sourceData[i];
-          // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
-          let metricName=item.metric.__name__;
-          let temp=metricName;
-          delete item.metric.__name__;
-          temp+="{";
-          let hasLabel=true;
-          for (let key in item.metric){
-            let label=key;
-            let value=item.metric[label];
-            temp+=label +"='"+value+"',";
-          }
-          temp=temp.charAt(temp.length-1) == ","?temp.substr(0,temp.length-1):temp;
-          temp+="}";
-          if(hasLabel){
-            let edpQueryData={element:temp,value:item.value[1],type:(item.metric.type?item.metric.type:'2')};
-            this.tableData.push(edpQueryData);
-          }
-        }
-      },
-      focusInput:function(){
-        let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','query-input-active');
-        document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
-        this.$refs.elementQuery.focus();
-      },
-      blurInput:function(){
-        if(!this.queryExpression || this.queryExpression == ''){
-          setTimeout(function(){
-            let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
-            classVal=classVal.replace('query-input-active','query-input-inactive');
-            document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
-          },100)
-        }
-      },
-      clearInput:function(){
-        this.$refs.elementQuery.focus();
-      },
-      queryElementTips:async function(){
-        this.elementMetricDatas = [];
-        let response = await axios.get("/metric/metadata?endpointId="+this.currentEndpoint.id);
-        if(response && response.status === 200){
-          if(response.data.msg === 'success'){
-            this.elementMetricDatas = response.data.data.list;
-          }
-        }
-      },
-      getStateContent:function(row){
-        if(row){
-          if(row.state == 1){
-
-            return 'up'+'['+this.formatUpdateTime(row.lastUpdate)+']';
-          }else{
-            return 'down'+'['+this.getStateErrorMsg(row)+']';
-          }
-        }
-      },
-      formatUpdateTime:function(date){
-        let time=new Date(date);
-        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
-        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
-
-        return hours+':'+minutes;
-      },
-      getStateErrorMsg:function(row){
-        let errCodes=[230009,230010,230011];
-        if(row){
-          if(row.state == 0){
-            if(errCodes.find((item)=>{return row.stateInfo.code == item})){
-              return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
-            }else{
-              return row.stateInfo.msg;
-              this.$message.error('state code error');
+              if (!value || value != queryVal) {
+                return false
+              }
+            } else {
+              return true
             }
           }
         }
-      },
+
+        return true
+      })
+      for (const i in sourceData) {
+        const item = sourceData[i]
+        // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
+        const metricName = item.metric.__name__
+        let temp = metricName
+        delete item.metric.__name__
+        temp += '{'
+        const hasLabel = true
+        for (const key in item.metric) {
+          const label = key
+          const value = item.metric[label]
+          temp += label + "='" + value + "',"
+        }
+        temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
+        temp += '}'
+        if (hasLabel) {
+          const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
+          this.tableData.push(edpQueryData)
+        }
+      }
     },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.currentEndpoint = JSON.parse(JSON.stringify(n));
-            this.queryEndpoint();
+    focusInput: function () {
+      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+      this.$refs.elementQuery.focus()
+    },
+    blurInput: function () {
+      if (!this.queryExpression || this.queryExpression == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput: function () {
+      this.$refs.elementQuery.focus()
+    },
+    queryElementTips: async function () {
+      this.elementMetricDatas = []
+      const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
+      if (response && response.status === 200) {
+        if (response.data.msg === 'success') {
+          this.elementMetricDatas = response.data.data.list
+        }
+      }
+    },
+    getStateContent: function (row) {
+      if (row) {
+        if (row.state == 1) {
+          return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
+        } else {
+          return 'down' + '[' + this.getStateErrorMsg(row) + ']'
+        }
+      }
+    },
+    formatUpdateTime: function (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    },
+    getStateErrorMsg: function (row) {
+      const errCodes = [230009, 230010, 230011]
+      if (row) {
+        if (row.state == 0) {
+          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
+            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
+          } else {
+            this.$message.error('state code error')
+            return row.stateInfo.msg
           }
         }
-      },
-      queryExpression(n,o) {
-        let temp = this;
-        setTimeout(function() {
-          temp.tableFilter();
-        }, 500)
-      },
-    },
-    mounted() {
-      this.getPanelData();
-      setTimeout(() => {this.$refs.endpointQueryTable.setHeight();}, 700);
+      }
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.currentEndpoint = JSON.parse(JSON.stringify(n))
+          this.queryEndpoint()
+        }
+      }
     },
+    queryExpression (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    }
+  },
+  mounted () {
+    this.getPanelData()
+    setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
index a147c4393..b1f645fe6 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <div>
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">{{obj.host}}</div><div
@@ -73,26 +73,26 @@
         :min-width="item.minWidth || item.width"
       >
         <template slot-scope="scope" :column="item">
-          <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="">
+          <span v-if="item.prop === 'asset' && scope.row[item.prop]" class="link">
             {{scope.row[item.prop].sn}} :
             ({{scope.row[item.prop].host}})
           </span>
-          <span v-else-if="item.prop == 'project' && scope.row[item.prop]">{{scope.row.project.name}}</span>
-          <span v-else-if="item.prop == 'module' && scope.row[item.prop]">{{scope.row.module.name}}</span>
-          <span v-else-if="item.prop == 'param'">
+          <span v-else-if="item.prop === 'project' && scope.row[item.prop]">{{scope.row.project.name}}</span>
+          <span v-else-if="item.prop === 'module' && scope.row[item.prop]">{{scope.row.module.name}}</span>
+          <span v-else-if="item.prop === 'param'">
             <template v-if="scope.row.paramObj">
-              <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
+              <span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
             </template>
             <template v-else>-</template>
           </span>
-          <span v-else-if="item.prop == 'labels'">
+          <span v-else-if="item.prop === 'labels'">
             <template v-if="scope.row.labelModule">
-              <span v-for="(p,i) in scope.row.labelModule">{{p.key}}={{p.value}}<span v-if="i < scope.row.labelModule.length-1">，</span></span>
+              <span v-for="(p, i) in scope.row.labelModule" :key="i">{{p.key}}={{p.value}}<span v-if="i < scope.row.labelModule.length-1">，</span></span>
             </template>
             <template v-else>-</template>
           </span>
-          <template v-else-if="item.prop == 'type'">{{scope.row.module.type}}</template>
-          <div v-else-if="item.prop == 'option'">&nbsp;
+          <template v-else-if="item.prop === 'type'">{{scope.row.module.type}}</template>
+          <div v-else-if="item.prop === 'option'">&nbsp;
             <span
               :id="'edp-edit-'+scope.row.id"
               :title="$t('overall.edit')"
@@ -103,15 +103,15 @@
             </span>
             <span :id="'asset-del-'+scope.row.id" :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'asset_endpoint_delete'"><i class="nz-icon nz-icon-delete"></i></span>
           </div>
-          <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
-          <span v-else-if="item.prop == 'state'" >
+          <span v-else-if="item.prop === 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
+          <span v-else-if="item.prop === 'state'" >
             <el-popover placement="right" trigger="hover" :content="getStateContent(scope.row)" popper-class="small-pop">
               <div slot="reference" style="width: 20px">
                 <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
               </div>
             </el-popover>
           </span>
-          <template v-else-if="item.prop=='alerts'">
+          <template v-else-if="item.prop === 'alerts'">
                 <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
                   <span :id="'endpoint-alerts-'+scope.row.id" >
                     {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
@@ -125,7 +125,7 @@
         </template>
       </el-table-column>
       <el-table-column width="28" :resizable="false">
-        <template slot="header" slot-scope="scope">
+        <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -145,391 +145,388 @@
     <transition name="right-box">
       <edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
     </transition>
-  </span>
+  </div>
 </template>
 
 <script>
-  import exportXLSX from "../../exportXLSX";
-  import bus from '@/libs/bus'
-  import deleteButton from "../../deleteButton";
-  export default {
-    name: "endpointTab",
-    components: {
-      'export-excel': exportXLSX,
-      'delete-button':deleteButton,
-    },
-    props: {
-      obj: Object, //关联的实体对象
-    },
-    data() {
-      return {
-        rightBox: {
-          add: {show: false},
-          edit: {show: false},
-          editEndpoint: {show: false},
+import exportXLSX from '../../exportXLSX'
+import bus from '@/libs/bus'
+import deleteButton from '../../deleteButton'
+export default {
+  name: 'endpointTab',
+  components: {
+    'export-excel': exportXLSX,
+    'delete-button': deleteButton
+  },
+  props: {
+    obj: Object // 关联的实体对象
+  },
+  data () {
+    return {
+      rightBox: {
+        add: { show: false },
+        edit: { show: false },
+        editEndpoint: { show: false }
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      batchDeleteObjs: [],
+      endpoint: {}, // 用来查看详情和编辑的对象
+      tableTitle: [
+        {
+          label: this.$t('project.endpoint.endpointId'),
+          prop: 'id',
+          show: true
+        }, {
+          label: this.$t('project.project.project'),
+          prop: 'project',
+          show: true,
+          width: '120'
+        }, {
+          label: this.$t('project.module.module'),
+          prop: 'module',
+          show: true,
+          width: '120'
+        }, {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true,
+          minWidth: '400'
+        }, {
+          label: this.$t('project.endpoint.host'),
+          prop: 'host',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          show: true,
+          width: '120'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: false,
+          width: 120
+        }, {
+          label: this.$t('project.endpoint.labels'),
+          prop: 'labels',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.param'),
+          prop: 'param',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: '80'
+        }, {
+          label: this.$t('project.endpoint.alerts'),
+          prop: 'alerts',
+          show: true,
+          width: 150
         },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        endpoint: {}, //用来查看详情和编辑的对象
-        endpointSearchLabel:{
-
-        },
-        tableTitle: [
-          {
-            label: this.$t("project.endpoint.endpointId"),
-            prop: 'id',
-            show: true,
-          },{
-            label: this.$t("project.project.project"),
-            prop: 'project',
-            show: true,
-            width:'120',
-          },{
-            label: this.$t("project.module.module"),
-            prop: 'module',
-            show: true,
-            width:'120',
-          },{
-            label: this.$t("project.endpoint.asset"),
-            prop: 'asset',
-            show: true,
-            minWidth:'400',
-          },{
-            label: this.$t("project.endpoint.host"),
-            prop: 'host',
-            show: true,
-            width:120,
-          },{
-            label: this.$t("project.endpoint.port"),
-            prop: 'port',
-            show: true,
-            width:'120'
-          },{
-            label: this.$t("overall.type"),
-            prop: 'type',
-            show: false,
-            width:120,
-          },{
-            label: this.$t("project.endpoint.labels"),
-            prop: 'labels',
-            show: true,
-            width:200,
-          },{
-            label: this.$t("project.endpoint.param"),
-            prop: 'param',
-            show: true,
-            width:200,
-          },{
-            label: this.$t("project.endpoint.path"),
-            prop: 'path',
-            show: true,
-            width:200,
-          },{
-            label: this.$t("alert.list.state"),
-            prop: 'state',
-            show: true,
-            width:'80'
-          },{
-            label: this.$t("project.endpoint.alerts"),
-            prop: 'alerts',
-            show: true,
-            width:150,
-          },
-          /*{
+        /* {
             label: this.$t("project.endpoint.lastUpdate"),
             prop: 'lastUpdate',
             show: true,
-          },*/
-          {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
+          }, */
+        {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tablelable: [],
+      dropCol: [],
+      currentProject: { id: '', name: '', remark: '' }, // endpoint弹框、module列表用来回显project
+      currentModule: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [] }, // endpoint弹框用来回显module
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          type: 'query',
+          label: 'query',
+          disabled: false
+        }, {
+          id: 33,
+          name: this.$t('asset.state'),
+          // name: this.$t('asset.asset'),
+          type: 'select',
+          label: 'endpointState',
+          disabled: false,
+          readonly: true
+        }, {
+          id: 34,
+          name: this.$t('project.project.project'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'projectName',
+          disabled: false
+        }, {
+          id: 35,
+          name: this.$t('project.module.module'),
+          // name: this.$t('asset.asset'),
+          type: 'input',
+          label: 'moduleName',
+          disabled: false
+        }]
+      },
+      endpointSearchLabel: { // 搜索参数
+      },
+      tableData: []
+    }
+  },
+  methods: {
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    getTableData () {
+      this.tools.loading = true
+      this.$set(this.endpointSearchLabel, 'assetId', this.asset.id)
+      this.$set(this.endpointSearchLabel, 'pageSize', '-1')
+      this.$get('/endpoint', this.endpointSearchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            try {
+              const param = response.data.list[i].param || '{}'
+              const tempObj = JSON.parse(param)
+              response.data.list[i].paramObj = []
+              const labels = response.data.list[i].labels || '{}'
+              const tempObj1 = JSON.parse(labels)
+              response.data.list[i].labelModule = []
+              for (const k in tempObj) {
+                response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
+              }
+              for (const k in tempObj1) {
+                response.data.list[i].labelModule.push({ key: k, value: tempObj1[k] })
+              }
+            } catch (err) {
+              // console.error(response.data.list[i], err);
+            }
           }
-        ],
-        tablelable: [],
-        dropCol: [],
-        currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-        currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: "ID",
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 11,
-            name: this.$t('asset.asset'),
-            type: 'query',
-            label: 'query',
-            disabled: false
-          },{
-            id:33,
-            name:this.$t('asset.state'),
-            // name: this.$t('asset.asset'),
-            type:'select',
-            label:'endpointState',
-            disabled:false,
-            readonly:true,
-          },{
-            id:34,
-            name:this.$t('project.project.project'),
-            // name: this.$t('asset.asset'),
-            type:'input',
-            label:'projectName',
-            disabled:false,
-          },{
-            id:35,
-            name:this.$t('project.module.module'),
-            // name: this.$t('asset.asset'),
-            type:'input',
-            label:'moduleName',
-            disabled:false,
-          }],
-        },
-        endpointSearchLabel: { //搜索参数
-        },
-        tableData: [],
+          this.tableData = response.data.list
+          this.$emit('reload')
+        }
+      })
+    },
+    closeRightBox (refresh) {
+      this.rightBox.add.show = false
+      this.rightBox.edit.show = false
+      if (refresh) {
+        this.getTableData()
       }
     },
-    methods: {
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      getTableData() {
-        this.tools.loading = true;
-        this.$set(this.endpointSearchLabel, "assetId", this.asset.id);
-        this.$set(this.endpointSearchLabel, "pageSize", '-1');
-        this.$get('/endpoint',this.endpointSearchLabel).then(response => {
-          this.tools.loading = false;
+    delEndpoint (endpoint) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('endpoint?ids=' + endpoint.id).then(response => {
           if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              try {
-                let param=response.data.list[i].param|| '{}';
-                let tempObj = JSON.parse(param);
-                response.data.list[i].paramObj = [];
-                let labels=response.data.list[i].labels|| '{}';
-                let tempObj1=JSON.parse(labels);
-                response.data.list[i].labelModule = [];
-                for (let k in tempObj) {
-                  response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
-                }
-                for (let k in tempObj1) {
-                  response.data.list[i].labelModule.push({key: k, value: tempObj1[k]})
-                }
-              } catch (err) {
-                //console.error(response.data.list[i], err);
-              }
-            }
-            this.tableData = response.data.list;
-            this.$emit("reload");
-          }
-        });
-      },
-      closeRightBox(refresh) {
-        this.rightBox.add.show = false;
-        this.rightBox.edit.show = false;
-        if (refresh) {
-          this.getTableData();
-        }
-      },
-      delEndpoint(endpoint) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("endpoint?ids=" + endpoint.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      toEdit(endpoint) {
-        this.endpoint = JSON.parse(JSON.stringify(endpoint));
-        if (!this.endpoint.paramObj) {
-          this.$set(this.endpoint, 'paramObj', []);
-        }
-        this.rightBox.edit = true;
-        this.$nextTick(() => {
-          this.$refs.editEndpointBox.show(true);
-          this.$refs.editEndpointBox.toEdit(true, this.endpoint.id);
-        });
-      },
-      editEndpoint(endpoint) {
-        this.endpoint = JSON.parse(JSON.stringify(endpoint));
-        this.$set(this.endpoint,'projectId',this.endpoint.project.id);
-        this.$set(this.endpoint,'moduleId',this.endpoint.moduleId);
-
-        this.rightBox.editEndpoint.show = true;
-        if (!this.endpoint.paramObj) {
-          this.$set(this.endpoint, 'paramObj', []);
-        }
-        if (!this.endpoint.labelModule) {
-          this.$set(this.endpoint, 'labelModule', []);
-        }
-      },
-      closeEditEndpointRightBox(refresh) {
-        this.rightBox.editEndpoint.show = false;
-        if (refresh) {
-          this.getTableData();
-        }
-      },
-      add() {
-        this.rightBox.add.show = true;
-      },
-      search(searchObj) {
-        let orderBy = '';
-        if(this.endpointSearchLabel.orderBy){
-          orderBy=this.endpointSearchLabel.orderBy
-        }
-        this.endpointSearchLabel = {};
-        // this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item] || searchObj[item] === 0) {
-            if (item === "endpointState") {
-              this.$set(this.endpointSearchLabel, 'state', searchObj[item]);
-            } else {
-              this.$set(this.endpointSearchLabel,item,searchObj[item]);
-            }
-          }
-        }
-        if(orderBy){
-          this.$set(this.endpointSearchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.endpointTable&& this.$refs.endpointTable.bodyWrapper){
-          this.$refs.endpointTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      dateFormat(time) {
-        if (!time) {
-          return '-';
-        }
-        let date = new Date(time * 1000);
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-
-        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
-      },
-      getStateContent:function(row){
-        if (row) {
-          if (row.state == 1) {
-            return 'up';
-          } else if (row.state == 0){
-            return 'down';
-          } else if (row.state == 2) {
-            return 'suspended';
-          }
-        }
-      },
-      formatUpdateTime:function(date){
-        let time=new Date(date);
-        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
-        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
-
-        return hours+':'+minutes;
-      },
-      getStateErrorMsg:function(row){
-        let errCodes=[230009,230010,230011];
-        if(row){
-          if(row.state == 0){
-            if(errCodes.find((item)=>{return row.stateInfo.code == item})){
-              return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
-            }else{
-              return row.stateInfo.msg;
-              this.$message.error('state code error');
-            }
-          }
-        }
-      },
-      initEvent() {
-        bus.$on("current-project-change", project => {
-          this.currentProject = project;
-        });
-        bus.$on("current-module-change", module => {
-          this.currentModule = module;
-        });
-        // bus.$on("endpoint-list-change", menu => {
-        //   this.getEndpointTableData();
-        // });
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.endpointSearchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      messageStyle(e) {
-        if (e.column.label == 'Alerts' || e.column.label == this.$t("project.endpoint.alerts")) {
-          if (e.row.alertNum > 0) {
-            return 'danger';
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
           } else {
-            return 'success';
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    toEdit (endpoint) {
+      this.endpoint = JSON.parse(JSON.stringify(endpoint))
+      if (!this.endpoint.paramObj) {
+        this.$set(this.endpoint, 'paramObj', [])
+      }
+      this.rightBox.edit = true
+      this.$nextTick(() => {
+        this.$refs.editEndpointBox.show(true)
+        this.$refs.editEndpointBox.toEdit(true, this.endpoint.id)
+      })
+    },
+    editEndpoint (endpoint) {
+      this.endpoint = JSON.parse(JSON.stringify(endpoint))
+      this.$set(this.endpoint, 'projectId', this.endpoint.project.id)
+      this.$set(this.endpoint, 'moduleId', this.endpoint.moduleId)
+
+      this.rightBox.editEndpoint.show = true
+      if (!this.endpoint.paramObj) {
+        this.$set(this.endpoint, 'paramObj', [])
+      }
+      if (!this.endpoint.labelModule) {
+        this.$set(this.endpoint, 'labelModule', [])
+      }
+    },
+    closeEditEndpointRightBox (refresh) {
+      this.rightBox.editEndpoint.show = false
+      if (refresh) {
+        this.getTableData()
+      }
+    },
+    add () {
+      this.rightBox.add.show = true
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.endpointSearchLabel.orderBy) {
+        orderBy = this.endpointSearchLabel.orderBy
+      }
+      this.endpointSearchLabel = {}
+      // this.pageObj.pageNo = 1;
+      for (const item in searchObj) {
+        if (searchObj[item] || searchObj[item] === 0) {
+          if (item === 'endpointState') {
+            this.$set(this.endpointSearchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.endpointSearchLabel, item, searchObj[item])
           }
         }
-        return '';
-      },
+      }
+      if (orderBy) {
+        this.$set(this.endpointSearchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.endpointTable && this.$refs.endpointTable.bodyWrapper) {
+        this.$refs.endpointTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
     },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.asset = JSON.parse(JSON.stringify(n));
-            this.$nextTick(()=>{
-              this.getTableData();
-            })
+    dateFormat (time) {
+      if (!time) {
+        return '-'
+      }
+      const date = new Date(time * 1000)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+
+      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+    },
+    getStateContent: function (row) {
+      if (row) {
+        if (row.state == 1) {
+          return 'up'
+        } else if (row.state == 0) {
+          return 'down'
+        } else if (row.state == 2) {
+          return 'suspended'
+        }
+      }
+    },
+    formatUpdateTime: function (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    },
+    getStateErrorMsg: function (row) {
+      const errCodes = [230009, 230010, 230011]
+      if (row) {
+        if (row.state == 0) {
+          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
+            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
+          } else {
+            this.$message.error('state code error')
+            return row.stateInfo.msg
           }
         }
-      },
+      }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/projectBottom")
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/projectBottom"))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.initEvent();
-    },
-    beforeDestroy(){
-      bus.$off("current-project-change", project => {
-        this.currentProject = project;
-      });
-      bus.$on("current-module-change", module => {
-        this.currentModule = module;
-      });
+    initEvent () {
+      bus.$on('current-project-change', project => {
+        this.currentProject = project
+      })
+      bus.$on('current-module-change', module => {
+        this.currentModule = module
+      })
       // bus.$on("endpoint-list-change", menu => {
       //   this.getEndpointTableData();
       // });
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.endpointSearchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    },
+    messageStyle (e) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('project.endpoint.alerts')) {
+        if (e.row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      return ''
     }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.asset = JSON.parse(JSON.stringify(n))
+          this.$nextTick(() => {
+            this.getTableData()
+          })
+        }
+      }
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/projectBottom')
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-/projectBottom'))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.initEvent()
+  },
+  beforeDestroy () {
+    bus.$off('current-project-change', project => {
+      this.currentProject = project
+    })
+    bus.$on('current-module-change', module => {
+      this.currentModule = module
+    })
+    // bus.$on("endpoint-list-change", menu => {
+    //   this.getEndpointTableData();
+    // });
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index cec772b52..df25d3257 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -101,399 +101,397 @@
 </template>
 
 <script>
-  import ChartBox from "../../../page/dashboard/chartBox";
-  import ChartList from '../../../charts/chart-list';
-  import bus from '../../../../libs/bus';
-  import timePicker from '../../../common/timePicker';
-  import exportXLSX from "../../../common/exportXLSX";
+import ChartBox from '../../../page/dashboard/chartBox'
+import ChartList from '../../../charts/chart-list'
+import bus from '../../../../libs/bus'
+import exportXLSX from '../../../common/exportXLSX'
 
-  export default {
-    name: "panel",
-    props: {
-      from: String,
-      obj: Object,
-      draggable: {type: Boolean, default: true},
-      detail: Object,
+export default {
+  name: 'panel',
+  props: {
+    from: String,
+    obj: Object,
+    draggable: { type: Boolean, default: true },
+    detail: Object
+  },
+  data () {
+    return {
+      panelLock: true,
+      showTopBtn: false, // top按钮
+      visible: false,
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      tableHover: false,
+      searchTime: bus.getTimezontDateRange(),
+      intervalTimer: null,
+      interval: 0,
+      panel: { // 新增panel
+        id: '',
+        name: ''
+      },
+      chart: {},
+      blankChart: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
+        total: 0
+      },
+      chartsData: [], // 中间部分图表相关数据
+      panelData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      // ---图表相关参数--start
+      dataList: [], // 数据列表
+      // searchName: '', //  搜索名称
+      filter: { // 过滤条件
+        // productId: 0,
+        panelId: 0,
+        start_time: '',
+        end_time: '',
+        searchName: ''
+      },
+      showPanel: {
+        name: '',
+        type: this.from,
+        id: ''
+      },
+      // removeModal: false, // 删除弹出
+      // deleteObj: {}, // 删除对象
+      // ---图表相关参数--end
+      scrollbarWrap: null
+    }
+  },
+  components: {
+    'chart-box': ChartBox,
+    'chart-list': ChartList,
+    'export-excel': exportXLSX
+  },
+  methods: {
+    // 刷新
+    refresh () {
+      this.getTableData(this.obj.id)
     },
-    data() {
-      return {
-        panelLock:true,
-        showTopBtn: false, //top按钮
-        visible: false,
-        rightBox: { //面板弹出框相关
-          show: false,
-        },
-        tableHover: false,
-        searchTime: bus.getTimezontDateRange(),
-        intervalTimer: null,
-        interval: 0,
-        panel: { //新增panel
-          id: '',
-          name: ''
-        },
-        chart: {},
-        blankChart: {
-          id:'',
-          title: '',
-          type:'line',
-          span:12,
-          height:'400',
-          unit:2,
-          param:{
-            url:'',
-            threshold:'',
-          },
-          elements:[{expression: "", legend: "", type: "expert", id: ""}],
-          panel: '',
-          sync: 0
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: -1, //此处获取所有数据，所以设置一个较大的值
-          total: 0
-        },
-        chartsData: [], //中间部分图表相关数据
-        panelData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-          ],
-        },
-        searchLabel: {}, //搜索参数
-        //---图表相关参数--start
-        dataList: [], // 数据列表
-        //searchName: '', //  搜索名称
-        filter: { // 过滤条件
-          //productId: 0,
-          panelId: 0,
-          start_time: '',
-          end_time: '',
-          searchName: ''
-        },
-        showPanel: {
-          name: '',
-          type: this.from,
-          id: ''
-        },
-        //removeModal: false, // 删除弹出
-        //deleteObj: {}, // 删除对象
-        //---图表相关参数--end
-        scrollbarWrap: null,
+    refreshTime (st, et) {
+      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+    },
+    panelReloadForDel () {
+      this.getTableData(this.obj.id)
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.rightBox.show = true
+    },
+    newChart () {
+      return JSON.parse(JSON.stringify(this.blankChart))
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.refresh()
       }
     },
-    components: {
-      'chart-box': ChartBox,
-      'chart-list': ChartList,
-      'time-picker':timePicker,
-      'export-excel':exportXLSX,
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.rightBox.show = true
     },
-    methods: {
-      //刷新
-      refresh() {
-        this.getTableData(this.obj.id);
-      },
-      refreshTime(st, et) {
-        const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
-        const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
-        this.searchTime = [startTime, endTime];
-      },
-      panelReloadForDel() {
-        this.getTableData(this.obj.id);
-      },
-      /*图表相关操作--start*/
-      addChart() {
-        this.chart = this.newChart();
-        this.rightBox.show = true;
-      },
-      newChart() {
-        return JSON.parse(JSON.stringify(this.blankChart));
-      },
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.refresh();
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel/' + this.showPanel.id + '/charts?ids=' + data.id).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.rightBox.show = false
+            const chartList = this.$refs.chartList.dataList
+            let nextChart = null; let prevChart = null
+            for (let i = 0; i < chartList.length; i++) {
+              if (chartList[i].id === data.id) {
+                chartList.splice(i, 1)
+              }
+              if (data.next != -1) {
+                if (chartList[i].id === data.next) {
+                  nextChart = chartList[i]
+                }
+              }
+              if (data.prev != 0) {
+                if (chartList[i].id === data.prev) {
+                  prevChart = chartList[i]
+                }
+              }
+            }
+            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
+            if (nextChart && prevChart) { // 删除图表为中间位置
+              prevChart.next = nextChart.id
+              nextChart.prev = prevChart.id
+            } else {
+              if (!nextChart) prevChart.next = -1
+              if (!prevChart) nextChart.prev = 0
+            }
+            // this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
+          } else {
+            console.error(response.msg)
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    delChartOk () {
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params) {
+      this.getData(this.filter)
+    },
+    // 获取数据,用在子页面
+    getData (params) {
+      if (params.start_time === '' || params.end_time === '') {
+        const now = bus.getTimezontDateRange()
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        params.start_time = startTimeTmp
+        params.end_time = endTimeTmp
+        params.from = this.from
+      }
+      if (this.$refs.chartList) {
+        this.$refs.chartList.initData(params)
+      }
+    },
+
+    /* 图表相关操作--end */
+    /* 时间条件查询--start */
+    // 选择日期变化
+    dateChange (val) {
+      // this.searchTime = [...val];
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    /* 时间条件查询--end */
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 公用操作
+    getTableData (linkId) {
+      if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
+        this.getData(this.filter)
+      } else {
+        this.$get('panel', { type: this.from, link: linkId }).then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list
+            if (this.panelData.length > 0) {
+              this.showPanel.id = this.filter.panelId = this.panelData[0].id
+              this.getData(this.filter)
+            }
+          } else {
+            if (response.msg) {
+              console.error(response.msg)
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              console.error(response.error)
+              this.$message.error(response.error)
+            } else {
+              console.error(response)
+              this.$message.error(response)
+            }
+          }
+        }).catch((error) => {
+          if (error) {
+            console.error(error)
+            this.$message.error(error.toString())
+          }
+        })
+      }
+    },
+    // 定期刷新
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      if (val) {
+        this.interval = val
+        const start = new Date(this.searchTime[1])
+        const now = new Date()
+        const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
+          this.getIntervalData(interval)
         }
-      },
-      // 编辑图表信息,打开编辑弹窗
-      editChart(data) {
-        if (!data.param) {
-          data.param = {url: '', threshold: '',};
-        }
-        this.chart = JSON.parse(JSON.stringify(data));
-        this.rightBox.show = true;
-      },
-      // 移除图表:弹出确认框询问
-      delChart(data,from) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval)
+        }, val * 1000)
+      }
+    },
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
+      const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+      // 刷新数据
+      this.dateChange()
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData(this.obj.id)
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getTableData(this.obj.id)
+    },
+    search: function () {
+      if (this.$refs.chartList) {
+        this.$refs.chartList.searchCharts(this.filter.searchName)
+      }
+    },
+    // 滚动事件触发下拉加载
+    onScroll () {
+      const _self = this
+      this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
+        _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+      }, 300))
+    },
+    focusInput: function () {
+      let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+      this.$refs.queryPanel.focus()
+    },
+    blurInput: function () {
+      if (!this.filter.searchName || this.filter.searchName == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput: function () {
+      this.$refs.queryPanel.focus()
+    },
+    syncChart: function () {
+      if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
+        this.$confirm(this.$t('tip.syncTip'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
           type: 'warning'
         }).then(() => {
-          this.$delete("panel/" + this.showPanel.id + "/charts?ids=" + data.id).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.deleteSuccess")
-              });
-              this.rightBox.show = false;
-              let chartList=this.$refs.chartList.dataList;
-              let nextChart=null,prevChart=null
-              for (let i =0;i< chartList.length;i++){
-                if(chartList[i].id === data.id){
-                  chartList.splice(i,1);
-                }
-                if(data.next != -1){
-                  if(chartList[i].id === data.next){
-                    nextChart = chartList[i]
-                  }
-                }
-                if(data.prev != 0){
-                  if(chartList[i].id === data.prev){
-                    prevChart = chartList[i]
-                  }
-                }
-              }
-              this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop);
-              if(nextChart&&prevChart){ //删除图表为中间位置
-                prevChart.next = nextChart.id;
-                nextChart.prev = prevChart.id;
-              }else{
-                if(!nextChart) prevChart.next = -1;
-                if(!prevChart) nextChart.prev = 0;
-              }
-              // this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
-            } else {
-              console.error(response.msg);
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      delChartOk() {
-        this.getData(this.filter);
-      },
-      // 图表创建成功，回调panel页面，进行图表的刷新
-      createSuccess(msg, data, params) {
-        this.getData(this.filter);
-      },
-      // 获取数据,用在子页面
-      getData(params) {
-        if (params.start_time === '' || params.end_time === '') {
-          let now = bus.getTimezontDateRange();
-          let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          params.start_time = startTimeTmp;
-          params.end_time = endTimeTmp;
-          params.from = this.from;
-        }
-        if(this.$refs.chartList){
-          this.$refs.chartList.initData(params);
-        }
-      },
-
-      /*图表相关操作--end*/
-      /*时间条件查询--start*/
-      // 选择日期变化
-      dateChange(val) {
-        // this.searchTime = [...val];
-        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
-        this.setSearchTime(nowTimeType.type,nowTimeType.value);
-        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.panelId = this.showPanel.id;
-        this.getData(this.filter);
-      },
-      /*时间条件查询--end*/
-      setSearchTime(type,val){//设置searchTime
-        if(type==='minute'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "m");
-        }else if(type==='hour'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "h");
-        }else if(type==='date'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "d");
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
-      },
-      //公用操作
-      getTableData(linkId) {
-        if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
-          this.getData(this.filter);
-        } else {
-          this.$get('panel', {type: this.from, link: linkId}).then(response => {
-            if (response.code === 200) {
-              this.panelData = response.data.list;
-              if (this.panelData.length > 0) {
-                this.showPanel.id = this.filter.panelId = this.panelData[0].id;
-                this.getData(this.filter);
-              }
-            }else {
-              if(response.msg){
-                console.error(response.msg);
-                this.$message.error(response.msg);
-              }else if(response.error){
-                console.error(response.error);
-                this.$message.error(response.error);
-              }else {
-                console.error(response);
-                this.$message.error(response);
-              }
-            }
-          }).catch((error) => {
-            if (error) {
-              console.error(error);
-              this.$message.error(error.toString());
-            }
-          });
-        }
-      },
-      //定期刷新
-      selectInterval(val) {
-        this.visible = false;
-        clearInterval(this.intervalTimer);
-        if (val) {
-          this.interval = val;
-          const start = new Date(this.searchTime[1]);
-          const now = new Date();
-          const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
-            this.getIntervalData(interval);
+          const param = {
+            modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
+            assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
           }
-          this.intervalTimer = setInterval(() => {
-            this.getIntervalData(this.interval);
-          }, val * 1000);
-        }
-      },
-      getIntervalData(interval) { //interval:结束时间到现在的秒数
-        const start = new Date(this.searchTime[0]);
-        const end = new Date(this.searchTime[1]);
-        start.setSeconds(start.getSeconds() + interval);
-        end.setSeconds(end.getSeconds() + interval);
-        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
-        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
-        this.searchTime = [startTime, endTime];
-        //刷新数据
-        this.dateChange();
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData(this.obj.id);
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        this.getTableData(this.obj.id);
-      },
-      search:function(){
-        if(this.$refs.chartList){
-          this.$refs.chartList.searchCharts(this.filter.searchName);
-        }
-      },
-      // 滚动事件触发下拉加载
-      onScroll() {
-        let _self = this;
-        this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
-          _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
-          _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
-        }, 300));
-      },
-      focusInput:function(){
-        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','query-input-active');
-        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-        this.$refs.queryPanel.focus();
-      },
-      blurInput:function(){
-        if(!this.filter.searchName || this.filter.searchName == ''){
-          setTimeout(function(){
-            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-            classVal=classVal.replace('query-input-active','query-input-inactive');
-            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-          },100)
-        }
-      },
-      clearInput:function(){
-        this.$refs.queryPanel.focus();
-      },
-      syncChart:function(){
-        if(this.from== this.$CONSTANTS.fromRoute.asset||this.from== this.$CONSTANTS.fromRoute.model){
-          this.$confirm(this.$t("tip.syncTip"), {
-            confirmButtonText: this.$t("tip.yes"),
-            cancelButtonText: this.$t("tip.no"),
-            type: 'warning'
-          }).then(() => {
-            let param={
-              modelId:this.from==this.$CONSTANTS.fromRoute.model?this.obj.id:null,
-              assetId:this.from==this.$CONSTANTS.fromRoute.asset?this.obj.id:null,
-            }
-            this.$put('/model/syncChart',param).then(response=>{
-              if(response.code == 200){
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")});
-                if(this.from == this.$CONSTANTS.fromRoute.asset){
-                  this.refresh();
-                }
-              }else{
-                console.error(response.msg)
-                this.$message.error(response.msg)
+          this.$put('/model/syncChart', param).then(response => {
+            if (response.code == 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
+              if (this.from == this.$CONSTANTS.fromRoute.asset) {
+                this.refresh()
               }
-            })
-          })
-        }
-      },
-      tableListEnter(){
-        this.tableHover = true;
-      },
-      tableListLeave(){
-        this.tableHover = false;
-      },
-    },
-    mounted: function () {
-      this.scrollbarWrap = this.$refs.dashboardScrollbar;
-      this.onScroll();
-      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
-      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
-    },
-    watch: {
-      'filter.searchName':function(n,o){
-        let temp=this;
-        setTimeout(function(){
-          temp.search();
-        },1000)
-      },
-      obj: {
-        immediate: true,
-        handler(n, o) {
-          setTimeout(() => {
-            if (n && n.id) {
-              this.getTableData(n.id);
+            } else {
+              console.error(response.msg)
+              this.$message.error(response.msg)
             }
-          }, 500);
-        }
+          })
+        })
       }
     },
-    beforeDestroy(){
-      document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
-      document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    tableListEnter () {
+      this.tableHover = true
+    },
+    tableListLeave () {
+      this.tableHover = false
     }
+  },
+  mounted: function () {
+    this.scrollbarWrap = this.$refs.dashboardScrollbar
+    this.onScroll()
+    document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+  },
+  watch: {
+    'filter.searchName': function (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.search()
+      }, 1000)
+    },
+    obj: {
+      immediate: true,
+      handler (n, o) {
+        setTimeout(() => {
+          if (n && n.id) {
+            this.getTableData(n.id)
+          }
+        }, 500)
+      }
+    }
+  },
+  beforeDestroy () {
+    document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
   }
+}
 </script>
 <style scoped lang="scss">
   .panel {
@@ -735,4 +733,3 @@
     font-size: 12px;
   }
 </style>
-
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
index 9a90eee10..a01f15fec 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogCMDTab.vue
@@ -15,10 +15,10 @@
       <div class="record-container--record">
         <div class="record--title">{{$t('config.terminallog.cmd.history')}}</div>
         <div class="record--list">
-          <template v-for="(record, index) in records">
-            <template v-for="item in record.list">
-              <div class="detail--time"><span>{{calcTime(item.time)}}</span></div>
-              <div class="detail--cmd"><span :class="matchBgColor(item.cmd)">{{item.cmd}}</span></div>
+          <template v-for="record in records">
+            <template v-for="(item, index) in record.list">
+              <div :key="index" class="detail--time"><span>{{calcTime(item.time)}}</span></div>
+              <div :key="index" class="detail--cmd"><span :class="matchBgColor(item.cmd)">{{item.cmd}}</span></div>
             </template>
           </template>
         </div>
@@ -31,118 +31,118 @@
 </template>
 
 <script>
-  export default {
-    name: "terminalLogRecordTab",
-    components: {
-    },
-    props: {
-      obj: Object, //关联的实体对象
-    },
-    computed: {
-      calcTime() {
-        return function(time) {
-          if (this.obj.startTime) {
-            let startTime = new Date(this.obj.startTime).getTime();
-            if (startTime) {
-              let thisTime = startTime+time;
-              return this.dateFormat(thisTime);
-            }
+export default {
+  name: 'terminalLogRecordTab',
+  components: {
+  },
+  props: {
+    obj: Object // 关联的实体对象
+  },
+  computed: {
+    calcTime () {
+      return function (time) {
+        if (this.obj.startTime) {
+          const startTime = new Date(this.obj.startTime).getTime()
+          if (startTime) {
+            const thisTime = startTime + time
+            return this.dateFormat(thisTime)
           }
-          return "-";
         }
-      },
-      matchBgColor() {
-        return function(cmd) {
-          let className = "";
-          let dangerCmd = this.$CONSTANTS.terminalLog.dangerCmd;
-          let infoCmd = this.$CONSTANTS.terminalLog.infoCmd;
-          let cmdSplit = cmd.split(" ");
-          if (this.intersection(infoCmd, cmdSplit).length > 0) {
-            className = "detail--cmd__green";
-          }
-          if (this.intersection(dangerCmd, cmdSplit).length > 0) {
-            className = "detail--cmd__red";
-          }
-          return className;
-        }
-      },
-      hasNext() {
-        if (this.records.length > 0) {
-          return this.records[this.records.length-1].hasNext;
-        }
-        return false;
+        return '-'
       }
     },
-    data() {
-      return {
-        filter: {
-          uuid: "",
-          cmd: "",
-          time: "",
-          size: 200
-        },
-        records: [ // 加载更多时有多个record，否则只有一个
-
-        ],
+    matchBgColor () {
+      return function (cmd) {
+        let className = ''
+        const dangerCmd = this.$CONSTANTS.terminalLog.dangerCmd
+        const infoCmd = this.$CONSTANTS.terminalLog.infoCmd
+        const cmdSplit = cmd.split(' ')
+        if (this.intersection(infoCmd, cmdSplit).length > 0) {
+          className = 'detail--cmd__green'
+        }
+        if (this.intersection(dangerCmd, cmdSplit).length > 0) {
+          className = 'detail--cmd__red'
+        }
+        return className
       }
     },
-    methods: {
-      initData(filter) {
-        this.$get("/terminal/cmd", filter).then(res => {
-          if (res.code === 200) {
-            this.records.push(res.data);
-          } else {
-            this.$message.error(res.msg);
-          }
-        });
+    hasNext () {
+      if (this.records.length > 0) {
+        return this.records[this.records.length - 1].hasNext
+      }
+      return false
+    }
+  },
+  data () {
+    return {
+      filter: {
+        uuid: '',
+        cmd: '',
+        time: '',
+        size: 200
       },
-      loadMore() {
-        let filter = Object.assign({}, this.filter);
-        filter.time = this.records[this.records.length-1].time;
-        this.initData(filter);
-      },
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
-      },
-      intersection(a, b) {
-        let s = new Set(b);
-        return a.filter(x => s.has(x));
-      },
-      dateFormat(time) {
-        if (!time) {
-          return '-';
-        }
-        let date = new Date(time);
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      records: [ // 加载更多时有多个record，否则只有一个
 
-        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
-      },
-      formatUpdateTime(date) {
-        let time=new Date(date);
-        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
-        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
-
-        return hours+':'+minutes;
-      },
-    },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          this.records = [];
-          this.filter.uuid = n.uuid;
-          this.initData(this.filter);
+      ]
+    }
+  },
+  methods: {
+    initData (filter) {
+      this.$get('/terminal/cmd', filter).then(res => {
+        if (res.code === 200) {
+          this.records.push(res.data)
+        } else {
+          this.$message.error(res.msg)
         }
-      },
+      })
     },
+    loadMore () {
+      const filter = Object.assign({}, this.filter)
+      filter.time = this.records[this.records.length - 1].time
+      this.initData(filter)
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    intersection (a, b) {
+      const s = new Set(b)
+      return a.filter(x => s.has(x))
+    },
+    dateFormat (time) {
+      if (!time) {
+        return '-'
+      }
+      const date = new Date(time)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+
+      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+    },
+    formatUpdateTime (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.records = []
+        this.filter.uuid = n.uuid
+        this.initData(this.filter)
+      }
+    }
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
index fc9438011..d7e2d02dc 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
@@ -15,106 +15,103 @@
 </template>
 
 <script>
-  import Terminal from '../../js/Xterm';
-  import bus from "../../../../libs/bus";
+import Terminal from '../../js/Xterm'
+import bus from '../../../../libs/bus'
 
-  export default {
-    name:"terminalLogReplayTab",
-    components:{
-      Terminal
-    },
-    props:{
-      obj:Object, //关联的实体对象
-    },
-    data(){
-      return {
-        filter:{
-          size:1,
-          uuid:""
-        },
-        terminal:null,
-        term:null,
-        terminalSocket:null,
-        recordData:[],
-        isNeedStop:false, // 是否需要停止
-        playedCount:0, // 当前已经播放完的数量
-        isPlaying:true, // 是否正在播放
-        isFinish:false, //是否已结束
-        isDragging:false, //是否正在拖动进度条
-        draggingOriginalX:0, //开始拖拽时鼠标的x
-        draggingOriginalProgress:0, //开始拖拽时的进度
-        recordTick:50, // 输出间隔时间ms，默认50
-        playerTimer:null, // 定时器
-        playerCurrentTime:0, // 当前时间进度
-        speedTable:[ // 快进倍速选项
-          {speed:1,name:'×1'},
-          {speed:2,name:'×2'},
-          {speed:4,name:'×4'},
-          {speed:8,name:'×8'},
-          {speed:16,name:'×16'}
-        ],
-        speedOffset:0, // 快进倍数index
-        progress:0, // 进度条进度
-        needSkip:true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
-        timeUsed:0,
-        successBackContent:'Connecting to',
-        failBackContent:'Sorry',
-        connectFailContent:'Connection failed',
-        welcomeBackContent:'Welcome',
-        psdCont:'password: ',
+export default {
+  name: 'terminalLogReplayTab',
+  props: {
+    obj: Object // 关联的实体对象
+  },
+  data () {
+    return {
+      filter: {
+        size: 1,
+        uuid: ''
+      },
+      terminal: null,
+      term: null,
+      terminalSocket: null,
+      recordData: [],
+      isNeedStop: false, // 是否需要停止
+      playedCount: 0, // 当前已经播放完的数量
+      isPlaying: true, // 是否正在播放
+      isFinish: false, // 是否已结束
+      isDragging: false, // 是否正在拖动进度条
+      draggingOriginalX: 0, // 开始拖拽时鼠标的x
+      draggingOriginalProgress: 0, // 开始拖拽时的进度
+      recordTick: 50, // 输出间隔时间ms，默认50
+      playerTimer: null, // 定时器
+      playerCurrentTime: 0, // 当前时间进度
+      speedTable: [ // 快进倍速选项
+        { speed: 1, name: '×1' },
+        { speed: 2, name: '×2' },
+        { speed: 4, name: '×4' },
+        { speed: 8, name: '×8' },
+        { speed: 16, name: '×16' }
+      ],
+      speedOffset: 0, // 快进倍数index
+      progress: 0, // 进度条进度
+      needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
+      timeUsed: 0,
+      successBackContent: 'Connecting to',
+      failBackContent: 'Sorry',
+      connectFailContent: 'Connection failed',
+      welcomeBackContent: 'Welcome',
+      psdCont: 'password: '
+    }
+  },
+  methods: {
+    // 创建连接
+    create () {
+      const that = this
+      if (this.terminalSocket) {
+        this.terminalSocket.close()
       }
-    },
-    methods:{
-      //创建连接
-      create(){
-        let that=this;
-        if(this.terminalSocket){
-          this.terminalSocket.close();
-        }
-        if(this.terminal){
-          this.terminal.off("selection");
-          this.terminal.off("data")
-          this.terminal.destroy();
-        }
-        this.terminal=new Terminal({
-          rows:parseInt(this.$refs.recordConsole.offsetHeight/18),
-          cols:parseInt(this.$refs.recordConsole.offsetWidth/11),
-          cursorStyle:'block', // 光标样式  null | 'block' | 'underline' | 'bar'
-          //bellStyle:'sound',
-          disableStdin:true,//是否应禁用输入
-        });
-        this.terminal.open(document.getElementById(this.obj.uuid));
+      if (this.terminal) {
+        this.terminal.off('selection')
+        this.terminal.off('data')
+        this.terminal.destroy()
+      }
+      this.terminal = new Terminal({
+        rows: parseInt(this.$refs.recordConsole.offsetHeight / 18),
+        cols: parseInt(this.$refs.recordConsole.offsetWidth / 11),
+        cursorStyle: 'block', // 光标样式  null | 'block' | 'underline' | 'bar'
+        // bellStyle:'sound',
+        disableStdin: true// 是否应禁用输入
+      })
+      this.terminal.open(document.getElementById(this.obj.uuid))
 
-        let token=sessionStorage.getItem('nz-token');
-        let baseUrl=this.$axios.defaults.baseURL;
-        if(baseUrl.startsWith("/")){
-          baseUrl="ws://"+window.location.host+baseUrl;
-        }else{
-          baseUrl=baseUrl.replace("http://","ws://").replace("https://","ws://");
-        }
-        ///monitor
-        let url=baseUrl+"/terminal/monitor.ws?"+"&token="+token+"&uuid="+this.obj.uuid;
-        console.info(url);
-        if(this.terminalSocket){//如果存在之前的链接 先断开 再链接新的
-          this.terminalSocket.close();
-        }
-        this.terminalSocket=new WebSocket(url);
-//连接成功
-        this.terminalSocket.onopen=()=>{
-        };
-        //登录后，你输入的内容从后台服务返回
-        this.terminal.on("data",function(data){
-          /*
+      const token = sessionStorage.getItem('nz-token')
+      let baseUrl = this.$axios.defaults.baseURL
+      if (baseUrl.startsWith('/')) {
+        baseUrl = 'ws://' + window.location.host + baseUrl
+      } else {
+        baseUrl = baseUrl.replace('http://', 'ws://').replace('https://', 'ws://')
+      }
+      /// monitor
+      const url = baseUrl + '/terminal/monitor.ws?' + '&token=' + token + '&uuid=' + this.obj.uuid
+      console.info(url)
+      if (this.terminalSocket) { // 如果存在之前的链接 先断开 再链接新的
+        this.terminalSocket.close()
+      }
+      this.terminalSocket = new WebSocket(url)
+      // 连接成功
+      this.terminalSocket.onopen = () => {
+      }
+      // 登录后，你输入的内容从后台服务返回
+      this.terminal.on('data', function (data) {
+        /*
           let code = data.charCodeAt(0);
           if(code==13){
           }else {
             //that.term.write(data);
-          }*/
-        });
-        //返回
-        this.terminalSocket.onmessage=function(evt){
-          let backContent=evt.data;
-          /*
+          } */
+      })
+      // 返回
+      this.terminalSocket.onmessage = function (evt) {
+        let backContent = evt.data
+        /*
           if(that.inputSecret){//当前为密码输入状态
           }
           if(backContent.length>1){
@@ -122,172 +119,169 @@
             if(pwdInput){//输入密码
               that.inputSecret = true;
             }
-          }*/
+          } */
 
-          let welComIndex=backContent.indexOf(that.welcomeBackContent);
-          if(welComIndex> -1){//无服务器信息（只与nezha进行了连接）
-            const connectResult={
-              title:'',
-              color:1,
-            };
-            that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-          }else{
-            let successContentIndex=backContent.indexOf(that.successBackContent);
-            if(successContentIndex> -1){
-              //that.conFinish = true;
-              let startIndex=successContentIndex+that.successBackContent.length+1;
-              backContent=backContent.substring(startIndex);
-              let endIndex=backContent.indexOf('\r\n');
-              let title=backContent.substring(0,endIndex);
-              const connectResult={
-                title:title,
-                color:2,
-              };
-              that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-            }else{//失败
-              let failContentIndex=backContent.indexOf(that.failBackContent);
-              let connectFailIndex=backContent.indexOf(that.connectFailContent);
-              if(failContentIndex> -1){
-                //that.conFinish = true;
-                const connectResult={
-                  title:'',
-                  color:3,
-                };
-                that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
-              }else if(connectFailIndex> -1){
-                let startIndex=successContentIndex+that.successBackContent.length+1;
-                backContent=backContent.substring(startIndex);
-                let endIndex=backContent.indexOf('\r\n');
-                let title=backContent.substring(0,endIndex);
-                const connectResult={
-                  title:'',
-                  color:3,
-                };
-                that.$emit("refreshConsoleTitle",connectResult);//1:grey 2 green 3 red
+        const welComIndex = backContent.indexOf(that.welcomeBackContent)
+        if (welComIndex > -1) { // 无服务器信息（只与nezha进行了连接）
+          const connectResult = {
+            title: '',
+            color: 1
+          }
+          that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+        } else {
+          const successContentIndex = backContent.indexOf(that.successBackContent)
+          if (successContentIndex > -1) {
+            // that.conFinish = true;
+            const startIndex = successContentIndex + that.successBackContent.length + 1
+            backContent = backContent.substring(startIndex)
+            const endIndex = backContent.indexOf('\r\n')
+            const title = backContent.substring(0, endIndex)
+            const connectResult = {
+              title: title,
+              color: 2
+            }
+            that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+          } else { // 失败
+            const failContentIndex = backContent.indexOf(that.failBackContent)
+            const connectFailIndex = backContent.indexOf(that.connectFailContent)
+            if (failContentIndex > -1) {
+              // that.conFinish = true;
+              const connectResult = {
+                title: '',
+                color: 3
               }
+              that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
+            } else if (connectFailIndex > -1) {
+              const startIndex = successContentIndex + that.successBackContent.length + 1
+              backContent = backContent.substring(startIndex)
+              const connectResult = {
+                title: '',
+                color: 3
+              }
+              that.$emit('refreshConsoleTitle', connectResult)// 1:grey 2 green 3 red
             }
           }
-        };
-        //关闭
-        this.terminalSocket.onclose=()=>{
-          //报错sorry的，还没来得及看信息就关闭
-          // this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
-        };
-
-
-        //错误
-        this.terminalSocket.onerror=(e)=>{
-        };
-        //选中 复制
-        this.terminal.on("selection",function(){
-        });
-        this.terminal.attachCustomKeyEventHandler(function(ev){
-        });
-
-        this.terminal.attach(this.terminalSocket);
-        this.terminal._initialized=true;
-        this.terminal.fit();//自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
-        // this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
-        //   this.setFontSize(this.fontSize);
-        // })
-      },
-
-      //关闭连接
-      closeSocket(){
-        if(this.terminalSocket){
-          this.terminalSocket.close();
         }
-        if(this.terminal){
-          this.terminal.destroy();
-        }
-      },
-      // 切换tab
-      changeTab(tab){
-        this.$emit('changeTab',tab);
-      },
+      }
+      // 关闭
+      this.terminalSocket.onclose = () => {
+        // 报错sorry的，还没来得及看信息就关闭
+        // this.$emit("closeConsole",this.terminal.name);//应该调用父窗口
+      }
 
-      getRecordData(){
-        return new Promise(resolve=>{
-          this.$get("/terminal/record",this.filter).then(res=>{
-            if(res.code===200){
-              this.recordData=res.data.list;
-              this.timeUsed=res.data.endTime;
-            }
-            resolve();
-          });
-        });
-      },
+      // 错误
+      this.terminalSocket.onerror = (e) => {
+      }
+      // 选中 复制
+      this.terminal.on('selection', function () {
+      })
+      this.terminal.attachCustomKeyEventHandler(function (ev) {
+      })
 
-      consoleResize(){
-        this.terminal&&this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth/11),parseInt(this.$refs.recordConsole.offsetHeight/18));
-        this.$nextTick(()=>{
-          this.terminal&&this.terminal.fit();
-        });
-      },
-      shutdown(){
-        this.$confirm(this.$t("tip.killTerm"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$put("/terminal/kill",{uuid:this.obj.uuid}).then(res=>{
-            if(res.code===200){
-              this.$message.success(this.$t("config.terminallog.success"));
-              this.$emit('exit')
-            }else{
-              this.$message.error(this.$t("config.terminallog.killErrorTip"));
-            }
-          });
-        });
-      },
+      this.terminal.attach(this.terminalSocket)
+      this.terminal._initialized = true
+      this.terminal.fit()// 自适应大小(使终端的尺寸和几何尺寸适合于终端容器的尺寸) 只是width
+      // this.$nextTick(()=>{// 解决进入全屏和退出全屏是底部隐藏
+      //   this.setFontSize(this.fontSize);
+      // })
     },
-    watch:{
-      // 入口，监听terminal session的变化，开始功能
-      obj:{
-        immediate:true,
-        deep:true,
-        handler(n){
-          if(n.uuid){
-            this.recordData=[];
-            this.filter.uuid=n.uuid;
-            this.playerCurrentTime=0;
-            if(this.playerTimer){
-              clearTimeout(this.playerTimer);
-            }
-            setTimeout(()=>{
-              this.create();
-            },200);
+
+    // 关闭连接
+    closeSocket () {
+      if (this.terminalSocket) {
+        this.terminalSocket.close()
+      }
+      if (this.terminal) {
+        this.terminal.destroy()
+      }
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+
+    getRecordData () {
+      return new Promise(resolve => {
+        this.$get('/terminal/record', this.filter).then(res => {
+          if (res.code === 200) {
+            this.recordData = res.data.list
+            this.timeUsed = res.data.endTime
           }
-        }
-      },
-      progress(n){
-        let progressController=document.getElementById("progressController");
-        progressController.style.left=`${n}%`;
-      }
+          resolve()
+        })
+      })
     },
-    computed:{
-      parseCurrentTime(){
-        let currentTime=parseInt(this.playerCurrentTime/1000);
-        let totalTime=parseInt(this.timeUsed/1000);
-        if(currentTime>totalTime){
-          currentTime=totalTime;
-        }
-        return `${currentTime} / ${totalTime}`;
-      }
-    },
-    created(){
-      window.addEventListener('resize',bus.debounce(this.consoleResize,1000));
-    },
-    mounted(){
 
+    consoleResize () {
+      this.terminal && this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth / 11), parseInt(this.$refs.recordConsole.offsetHeight / 18))
+      this.$nextTick(() => {
+        this.terminal && this.terminal.fit()
+      })
     },
-    beforeDestroy(){
-      window.removeEventListener('resize',bus.debounce);
-      this.closeSocket();
-      this.terminal.off("selection");
-      this.terminal.off("data")
+    shutdown () {
+      this.$confirm(this.$t('tip.killTerm'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$put('/terminal/kill', { uuid: this.obj.uuid }).then(res => {
+          if (res.code === 200) {
+            this.$message.success(this.$t('config.terminallog.success'))
+            this.$emit('exit')
+          } else {
+            this.$message.error(this.$t('config.terminallog.killErrorTip'))
+          }
+        })
+      })
+    }
+  },
+  watch: {
+    // 入口，监听terminal session的变化，开始功能
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n.uuid) {
+          this.recordData = []
+          this.filter.uuid = n.uuid
+          this.playerCurrentTime = 0
+          if (this.playerTimer) {
+            clearTimeout(this.playerTimer)
+          }
+          setTimeout(() => {
+            this.create()
+          }, 200)
+        }
+      }
     },
+    progress (n) {
+      const progressController = document.getElementById('progressController')
+      progressController.style.left = `${n}%`
+    }
+  },
+  computed: {
+    parseCurrentTime () {
+      let currentTime = parseInt(this.playerCurrentTime / 1000)
+      const totalTime = parseInt(this.timeUsed / 1000)
+      if (currentTime > totalTime) {
+        currentTime = totalTime
+      }
+      return `${currentTime} / ${totalTime}`
+    }
+  },
+  created () {
+    window.addEventListener('resize', bus.debounce(this.consoleResize, 1000))
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', bus.debounce)
+    this.closeSocket()
+    this.terminal.off('selection')
+    this.terminal.off('data')
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
index 379e67e38..9462c8511 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/terminalLogRecordTab.vue
@@ -30,322 +30,316 @@
 </template>
 
 <script>
-  import Terminal from '../../js/Xterm';
-  import bus from "../../../../libs/bus";
+import Terminal from '../../js/Xterm'
+import bus from '../../../../libs/bus'
 
-  export default {
-    name: "terminalLogReplayTab",
-    components: {
-      Terminal
-    },
-    props: {
-      obj: Object, //关联的实体对象
-    },
-    data() {
-      return {
-        filter: {
-          size: 1,
-          uuid: ""
-        },
-        terminal: null,
-
-        recordData: [],
-        isNeedStop: false, // 是否需要停止
-        playedCount: 0, // 当前已经播放完的数量
-        isPlaying: true, // 是否正在播放
-        isFinish: false, //是否已结束
-        isDragging: false, //是否正在拖动进度条
-        draggingOriginalX: 0, //开始拖拽时鼠标的x
-        draggingOriginalProgress: 0, //开始拖拽时的进度
-        recordTick: 50, // 输出间隔时间ms，默认50
-        playerTimer: null, // 定时器
-        playerCurrentTime: 0, // 当前时间进度
-        speedTable: [ // 快进倍速选项
-          {speed: 1, name: '×1'},
-          {speed: 2, name: '×2'},
-          {speed: 4, name: '×4'},
-          {speed: 8, name: '×8'},
-          {speed: 16, name: '×16'}
-        ],
-        speedOffset: 0, // 快进倍数index
-        progress: 0, // 进度条进度
-        needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
-        timeUsed: 0,
-      }
-    },
-    methods: {
-      // 切换tab
-      changeTab(tab) {
-        this.$emit('changeTab', tab);
+export default {
+  name: 'terminalLogReplayTab',
+  props: {
+    obj: Object // 关联的实体对象
+  },
+  data () {
+    return {
+      filter: {
+        size: 1,
+        uuid: ''
       },
+      terminal: null,
 
-      getRecordData() {
-        return new Promise(resolve => {
-          this.$get("/terminal/record", this.filter).then(res => {
-            if (res.code === 200) {
-              this.recordData = res.data.list;
-              this.timeUsed = res.data.endTime;
-            }
-            resolve();
-          });
-        });
-      },
-
-      consoleResize() {
-        this.terminal && this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
-        this.$nextTick(() => {
-          this.terminal && this.terminal.fit();
-        });
-      },
-
-      initAndPlay() {
-        this.$nextTick(() => {
-          // terminal初始化
-          if (this.terminal) {
-            this.terminal.reset(parseInt(this.$refs.recordConsole.offsetWidth/11), parseInt(this.$refs.recordConsole.offsetHeight/18));
-          } else {
-            this.terminal = new Terminal({
-              rows: parseInt(this.$refs.recordConsole.offsetHeight/18),
-              cols: parseInt(this.$refs.recordConsole.offsetWidth/11)
-            });
-            this.terminal.open(document.getElementById(this.obj.uuid));
-          }
-
-          if (this.recordData.length > 0) {
-            this.isNeedStop = false;
-            this.isPlaying = true;
-            this.isFinished = false;
-            this.playedCount = 0;
-            this.doPlay();
-          } else {
-            let req = this.getRecordData();
-            req.then(() => {
-              if (this.recordData.length > 0) {
-                // 请求得到数据后，开始播放
-                this.isNeedStop = false;
-                this.isPlaying = true;
-                this.isFinished = false;
-                this.playedCount = 0;
-                this.doPlay();
-              }
-            });
-          }
-        });
-      },
-
-      /*原理：利用setTimeout和数据的时间偏移量来模拟实现视频播放效果*/
-      doPlay() {
-        if (this.isNeedStop) {
-          this.isPlaying = false;
-          return;
-        }
-
-        if (this.recordData.length <= this.playedCount) {
-          this.playerTimer = setTimeout(this.doPlay, this.recordTick);
-          return;
-        }
-
-        this.playerCurrentTime += this.recordTick * this.speedTable[this.speedOffset].speed;
-
-        let recordTick = this.recordTick;
-
-        let playData;
-        for (let i = this.playedCount; i < this.recordData.length; i++) {
-          if (this.isNeedStop) {
-            break;
-          }
-          playData = this.recordData[i];
-          if (playData.t < this.playerCurrentTime) {
-            this.terminal.write(playData.c);
-
-            if ((this.playedCount + 1) === this.recordData.length) {
-              //播放完成
-              this.progress = 100;
-              this.isFinished = true;
-              this.isPlaying = false;
-              return;
-            } else {
-              this.playedCount++;
-            }
-
-          } else {
-            break;
-          }
-        }
-        if (this.isNeedStop) {
-          return;
-        }
-
-        if (this.needSkip) {
-          if (playData.t - this.playerCurrentTime > 800) {
-            this.playerCurrentTime = playData.t; // - this.record_tick * this.speed_table[this.speed_offset].speed;
-            recordTick = 800;
-          }
-        }
-        // 同步进度条
-        this.progress = parseInt(this.playerCurrentTime * 100 / this.timeUsed);
-
-        if (this.playedCount >= this.recordData.length) {
-          this.progress = 100;
-          //播放完成
-          this.isFinished = true;
-          this.isPlaying = false;
-        } else {
-          if (!this.isNeedStop)
-            this.playerTimer = setTimeout(this.doPlay, recordTick);
-        }
-
-      },
-      play() {
-        if (this.isPlaying) {
-          return;
-        }
-
-        if (this.isFinished) {
-          this.restart();
-          return;
-        }
-
-        this.isNeedStop = false;
-        this.isPlaying = true;
-        this.playerTimer = setTimeout(this.doPlay, this.recordTick);
-      },
-
-      speedChange() {
-        let length = this.speedTable.length;
-        this.speedOffset += 1;
-        if (this.speedOffset === length) {
-          this.speedOffset = 0;
-        }
-      },
-
-      pause() {
-        if (this.playerTimer) {
-          clearTimeout(this.playerTimer);
-        }
-        this.isNeedStop = true;
-        this.isPlaying = false;
-      },
-
-      restart() {
-        if (this.playerTimer) {
-          clearTimeout(this.playerTimer);
-        }
-        this.playerCurrentTime = 0;
-        this.initAndPlay();
-      },
-      jumpProgress(e) {
-        e.preventDefault();
-        if (this.playerTimer) {
-          clearTimeout(this.playerTimer);
-        }
-        this.progress = parseInt(e.offsetX*100/500);
-        this.playerCurrentTime = parseInt(this.timeUsed * this.progress / 100);
-        this.initAndPlay();
-      },
-      startDragging(e) {
-        e.preventDefault();
-        if (this.playerTimer) {
-          clearTimeout(this.playerTimer);
-        }
-        let vm = this;
-
-        this.pause();
-        this.draggingOriginalX = e.clientX;
-        this.draggingOriginalProgress = this.progress;
-        this.isDragging = true;
-        document.addEventListener("mousemove", dragging);
-        document.addEventListener("mouseup", endDragging);
-
-        function endDragging(e) {
-          e.preventDefault();
-
-          vm.isDragging = false;
-          document.removeEventListener("mousemove", dragging);
-          document.removeEventListener("mouseup", endDragging);
-          vm.initAndPlay();
-        }
-        function dragging(e) {
-          e.preventDefault();
-
-          if (vm.isDragging) {
-            let nowX = e.clientX;
-            let diff = nowX - vm.draggingOriginalX; // x变化量
-
-            let diffProgress = parseInt(diff*100/500);
-            if ((diffProgress + vm.draggingOriginalProgress) > 100) {
-              vm.progress = 100;
-            } else if ((diffProgress + vm.draggingOriginalProgress) < 0) {
-              vm.progress = 0;
-            } else {
-              vm.progress = diffProgress + vm.draggingOriginalProgress;
-            }
-            vm.playerCurrentTime = parseInt(vm.timeUsed * vm.progress / 100);
-          }
-        }
-      },
-
-      dateFormat(time) {
-        if (!time) {
-          return '-';
-        }
-        let date = new Date(time * 1000);
-        let year = date.getFullYear();
-        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-
-        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
-      },
-      formatUpdateTime(date) {
-        let time=new Date(date);
-        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
-        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
-
-        return hours+':'+minutes;
-      },
-    },
-    watch: {
-      // 入口，监听terminal session的变化，开始功能
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n.uuid) {
-            this.recordData = [];
-            this.filter.uuid = n.uuid;
-            this.playerCurrentTime = 0;
-            if (this.playerTimer) {
-              clearTimeout(this.playerTimer);
-            }
-            setTimeout(() => {this.initAndPlay();}, 200);
-          }
-        }
-      },
-      progress(n) {
-        let progressController = document.getElementById("progressController");
-        progressController.style.left = `${n}%`;
-      }
-    },
-    computed: {
-      parseCurrentTime() {
-        let currentTime = parseInt(this.playerCurrentTime/1000);
-        let totalTime = parseInt(this.timeUsed/1000);
-        if (currentTime > totalTime) {
-          currentTime = totalTime;
-        }
-        return `${currentTime} / ${totalTime}`;
-      }
-    },
-    created() {
-      window.addEventListener('resize', bus.debounce(this.consoleResize, 1000));
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', bus.debounce);
+      recordData: [],
+      isNeedStop: false, // 是否需要停止
+      playedCount: 0, // 当前已经播放完的数量
+      isPlaying: true, // 是否正在播放
+      isFinish: false, // 是否已结束
+      isDragging: false, // 是否正在拖动进度条
+      draggingOriginalX: 0, // 开始拖拽时鼠标的x
+      draggingOriginalProgress: 0, // 开始拖拽时的进度
+      recordTick: 50, // 输出间隔时间ms，默认50
+      playerTimer: null, // 定时器
+      playerCurrentTime: 0, // 当前时间进度
+      speedTable: [ // 快进倍速选项
+        { speed: 1, name: '×1' },
+        { speed: 2, name: '×2' },
+        { speed: 4, name: '×4' },
+        { speed: 8, name: '×8' },
+        { speed: 16, name: '×16' }
+      ],
+      speedOffset: 0, // 快进倍数index
+      progress: 0, // 进度条进度
+      needSkip: true, // 是否跳过无操作时间，为true时表示需要，即不跳过无操作时间
+      timeUsed: 0
     }
+  },
+  methods: {
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+
+    getRecordData () {
+      return new Promise(resolve => {
+        this.$get('/terminal/record', this.filter).then(res => {
+          if (res.code === 200) {
+            this.recordData = res.data.list
+            this.timeUsed = res.data.endTime
+          }
+          resolve()
+        })
+      })
+    },
+
+    consoleResize () {
+      this.terminal && this.terminal.resize(parseInt(this.$refs.recordConsole.offsetWidth / 11), parseInt(this.$refs.recordConsole.offsetHeight / 18))
+      this.$nextTick(() => {
+        this.terminal && this.terminal.fit()
+      })
+    },
+
+    initAndPlay () {
+      this.$nextTick(() => {
+        // terminal初始化
+        if (this.terminal) {
+          this.terminal.reset(parseInt(this.$refs.recordConsole.offsetWidth / 11), parseInt(this.$refs.recordConsole.offsetHeight / 18))
+        } else {
+          this.terminal = new Terminal({
+            rows: parseInt(this.$refs.recordConsole.offsetHeight / 18),
+            cols: parseInt(this.$refs.recordConsole.offsetWidth / 11)
+          })
+          this.terminal.open(document.getElementById(this.obj.uuid))
+        }
+
+        if (this.recordData.length > 0) {
+          this.isNeedStop = false
+          this.isPlaying = true
+          this.isFinished = false
+          this.playedCount = 0
+          this.doPlay()
+        } else {
+          const req = this.getRecordData()
+          req.then(() => {
+            if (this.recordData.length > 0) {
+              // 请求得到数据后，开始播放
+              this.isNeedStop = false
+              this.isPlaying = true
+              this.isFinished = false
+              this.playedCount = 0
+              this.doPlay()
+            }
+          })
+        }
+      })
+    },
+
+    /* 原理：利用setTimeout和数据的时间偏移量来模拟实现视频播放效果 */
+    doPlay () {
+      if (this.isNeedStop) {
+        this.isPlaying = false
+        return
+      }
+
+      if (this.recordData.length <= this.playedCount) {
+        this.playerTimer = setTimeout(this.doPlay, this.recordTick)
+        return
+      }
+
+      this.playerCurrentTime += this.recordTick * this.speedTable[this.speedOffset].speed
+
+      let recordTick = this.recordTick
+
+      let playData
+      for (let i = this.playedCount; i < this.recordData.length; i++) {
+        if (this.isNeedStop) {
+          break
+        }
+        playData = this.recordData[i]
+        if (playData.t < this.playerCurrentTime) {
+          this.terminal.write(playData.c)
+
+          if ((this.playedCount + 1) === this.recordData.length) {
+            // 播放完成
+            this.progress = 100
+            this.isFinished = true
+            this.isPlaying = false
+            return
+          } else {
+            this.playedCount++
+          }
+        } else {
+          break
+        }
+      }
+      if (this.isNeedStop) {
+        return
+      }
+
+      if (this.needSkip) {
+        if (playData.t - this.playerCurrentTime > 800) {
+          this.playerCurrentTime = playData.t // - this.record_tick * this.speed_table[this.speed_offset].speed;
+          recordTick = 800
+        }
+      }
+      // 同步进度条
+      this.progress = parseInt(this.playerCurrentTime * 100 / this.timeUsed)
+
+      if (this.playedCount >= this.recordData.length) {
+        this.progress = 100
+        // 播放完成
+        this.isFinished = true
+        this.isPlaying = false
+      } else {
+        if (!this.isNeedStop) { this.playerTimer = setTimeout(this.doPlay, recordTick) }
+      }
+    },
+    play () {
+      if (this.isPlaying) {
+        return
+      }
+
+      if (this.isFinished) {
+        this.restart()
+        return
+      }
+
+      this.isNeedStop = false
+      this.isPlaying = true
+      this.playerTimer = setTimeout(this.doPlay, this.recordTick)
+    },
+
+    speedChange () {
+      const length = this.speedTable.length
+      this.speedOffset += 1
+      if (this.speedOffset === length) {
+        this.speedOffset = 0
+      }
+    },
+
+    pause () {
+      if (this.playerTimer) {
+        clearTimeout(this.playerTimer)
+      }
+      this.isNeedStop = true
+      this.isPlaying = false
+    },
+
+    restart () {
+      if (this.playerTimer) {
+        clearTimeout(this.playerTimer)
+      }
+      this.playerCurrentTime = 0
+      this.initAndPlay()
+    },
+    jumpProgress (e) {
+      e.preventDefault()
+      if (this.playerTimer) {
+        clearTimeout(this.playerTimer)
+      }
+      this.progress = parseInt(e.offsetX * 100 / 500)
+      this.playerCurrentTime = parseInt(this.timeUsed * this.progress / 100)
+      this.initAndPlay()
+    },
+    startDragging (e) {
+      e.preventDefault()
+      if (this.playerTimer) {
+        clearTimeout(this.playerTimer)
+      }
+      const vm = this
+
+      this.pause()
+      this.draggingOriginalX = e.clientX
+      this.draggingOriginalProgress = this.progress
+      this.isDragging = true
+      document.addEventListener('mousemove', dragging)
+      document.addEventListener('mouseup', endDragging)
+
+      function endDragging (e) {
+        e.preventDefault()
+
+        vm.isDragging = false
+        document.removeEventListener('mousemove', dragging)
+        document.removeEventListener('mouseup', endDragging)
+        vm.initAndPlay()
+      }
+      function dragging (e) {
+        e.preventDefault()
+
+        if (vm.isDragging) {
+          const nowX = e.clientX
+          const diff = nowX - vm.draggingOriginalX // x变化量
+
+          const diffProgress = parseInt(diff * 100 / 500)
+          if ((diffProgress + vm.draggingOriginalProgress) > 100) {
+            vm.progress = 100
+          } else if ((diffProgress + vm.draggingOriginalProgress) < 0) {
+            vm.progress = 0
+          } else {
+            vm.progress = diffProgress + vm.draggingOriginalProgress
+          }
+          vm.playerCurrentTime = parseInt(vm.timeUsed * vm.progress / 100)
+        }
+      }
+    },
+
+    dateFormat (time) {
+      if (!time) {
+        return '-'
+      }
+      const date = new Date(time * 1000)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+
+      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+    },
+    formatUpdateTime (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    }
+  },
+  watch: {
+    // 入口，监听terminal session的变化，开始功能
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n.uuid) {
+          this.recordData = []
+          this.filter.uuid = n.uuid
+          this.playerCurrentTime = 0
+          if (this.playerTimer) {
+            clearTimeout(this.playerTimer)
+          }
+          setTimeout(() => { this.initAndPlay() }, 200)
+        }
+      }
+    },
+    progress (n) {
+      const progressController = document.getElementById('progressController')
+      progressController.style.left = `${n}%`
+    }
+  },
+  computed: {
+    parseCurrentTime () {
+      let currentTime = parseInt(this.playerCurrentTime / 1000)
+      const totalTime = parseInt(this.timeUsed / 1000)
+      if (currentTime > totalTime) {
+        currentTime = totalTime
+      }
+      return `${currentTime} / ${totalTime}`
+    }
+  },
+  created () {
+    window.addEventListener('resize', bus.debounce(this.consoleResize, 1000))
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', bus.debounce)
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
index 9f5b9fc26..9adc07c30 100644
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -16,37 +16,37 @@
 </template>
 
 <script>
-  import chartDataFormat from "../charts/chartDataFormat";
-  export default {
-    name: "chartUnit",
-    model:{
-      event:'change',
-      prop:'postUnit'
+import chartDataFormat from '../charts/chartDataFormat'
+export default {
+  name: 'chartUnit',
+  model: {
+    event: 'change',
+    prop: 'postUnit'
+  },
+  props: {
+    postUnit: {},
+    id: { type: String, default: 'chart-unit' }
+  },
+  data () {
+    return {
+      chartUnits: chartDataFormat.unitOptions(),
+      visibel: false,
+      unit: 0
+    }
+  },
+  created () {
+    this.unit = this.postUnit
+  },
+  methods: {
+    unitSelected: function (value) {
+      this.unit = value
+      this.$emit('change', this.unit)
     },
-    props:{
-      postUnit:{},
-      id:{type:String,default:'chart-unit'}
-    },
-    data(){
-      return{
-        chartUnits:chartDataFormat.unitOptions(),
-        visibel:false,
-        unit:0,
-      }
-    },
-    created() {
-      this.unit=this.postUnit;
-    },
-    methods:{
-      unitSelected:function(value){
-        this.unit=value;
-        this.$emit('change',this.unit);
-      },
-      openSeletor:function(){
-        this.$refs.unitSelector.toggleDropDownVisible(!this.$refs.unitSelector.dropDownVisible);
-      }
+    openSeletor: function () {
+      this.$refs.unitSelector.toggleDropDownVisible(!this.$refs.unitSelector.dropDownVisible)
     }
   }
+}
 </script>
 
 <style >
diff --git a/nezha-fronted/src/components/common/deleteButton.vue b/nezha-fronted/src/components/common/deleteButton.vue
index 6f77e9954..836658136 100644
--- a/nezha-fronted/src/components/common/deleteButton.vue
+++ b/nezha-fronted/src/components/common/deleteButton.vue
@@ -5,51 +5,50 @@
 </template>
 
 <script>
-  export default {
-    name: "deleteButton",
-    props:{
-      filterFunction:Function,
-      //deleteObjs: Object,
-      deleteObjs: Array,
-      api:String,
-      clickFunction:Function,
-      id:String
+export default {
+  name: 'deleteButton',
+  props: {
+    filterFunction: Function,
+    // deleteObjs: Object,
+    deleteObjs: Array,
+    api: String,
+    clickFunction: Function,
+    id: String
+  },
+  methods: {
+    batchDelete: function () {
+      if (this.deleteObjs.length < 1) return
+      if (this.clickFunction) {
+        this.clickFunction()
+        return
+      }
+      this.$confirm(this.$t('tip.confirmBatchDelete', [this.deleteObjs.length]), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$emit('before')
+        const params = this.filterParam()
+        this.$delete(this.api + params).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.$emit('after')
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
     },
-    methods:{
-      batchDelete:function(){
-        if(this.deleteObjs.length<1) return;
-        if(this.clickFunction){
-          this.clickFunction();
-          return;
-        }
-        this.$confirm(this.$t("tip.confirmBatchDelete",[this.deleteObjs.length]), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$emit('before');
-          let params=this.filterParam();
-          this.$delete(this.api+params).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('after')
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      filterParam:function(){
-        let filterFunction=this.filterFunction
-        if(!filterFunction){
-          filterFunction=(arr)=>{return "?ids="+arr.map(t=>t.id).join(',')};
-        }
+    filterParam: function () {
+      let filterFunction = this.filterFunction
+      if (!filterFunction) {
+        filterFunction = (arr) => { return '?ids=' + arr.map(t => t.id).join(',') }
+      }
 
-        return filterFunction(this.deleteObjs);
-
-      },
+      return filterFunction(this.deleteObjs)
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index 57a0f5b0a..49c71c16f 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -17,8 +17,6 @@
           <span>{{item.label}}</span>
         </div>
 
-
-
       </div>
     </div>
     <div class="custom-bottom-btns">
@@ -42,90 +40,89 @@
 
 <script>
 export default {
-  props:{
-    customTableTitle: Array, //自定义的title
-    originalTableTitle: Array, //原始title
+  props: {
+    customTableTitle: Array, // 自定义的title
+    originalTableTitle: Array, // 原始title
     path: String,
-    allowedAll: {default: false},
-    id:{type:String,default:'table'}
+    allowedAll: { default: false },
+    id: { type: String, default: 'table' }
   },
-  data() {
+  data () {
     return {
-      custom: [],
-    };
+      custom: []
+    }
   },
-  created() {
-    let localStorageTitle = JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path));
-    if (localStorageTitle ){
-      for (let title of this.originalTableTitle) {
-        for (let lsTitle of localStorageTitle) {
-          if (lsTitle.prop === title.prop){
-            lsTitle.label = title.label;
+  created () {
+    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+    if (localStorageTitle) {
+      for (const title of this.originalTableTitle) {
+        for (const lsTitle of localStorageTitle) {
+          if (lsTitle.prop === title.prop) {
+            lsTitle.label = title.label
           }
         }
       }
-      localStorage.setItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path, JSON.stringify(localStorageTitle))
+      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path, JSON.stringify(localStorageTitle))
     }
-
   },
   watch: {
     customTableTitle: {
       immediate: true,
       deep: true,
-      handler(n) {
-        this.custom = JSON.parse(JSON.stringify(n));
-      },
-    },
+      handler (n) {
+        this.custom = JSON.parse(JSON.stringify(n))
+      }
+    }
   },
   methods: {
-    //悬浮点击空白隐藏
-    esc() {
-      this.$emit('close');
+    // 悬浮点击空白隐藏
+    esc () {
+      this.$emit('close')
     },
-    //全选all true 或者全取消cancel false按钮
-    batchHandler(state) {
+    // 全选all true 或者全取消cancel false按钮
+    batchHandler (state) {
       for (let index = 0; index < this.custom.length; index++) {
-        if(this.custom[index].type != 'title'){
+        if (this.custom[index].type != 'title') {
           if ((index == 0 || index == 1 || this.custom[index].NotSet)) {
-            this.custom[index].show = true;
+            this.custom[index].show = true
           } else {
-            this.custom[index].show = state;
+            this.custom[index].show = state
           }
         }
       }
     },
-    //单选
-    handler(val, index) {
-      if (!this.allowedAll&&!val.allowed && (index == 0 || index == 1 || val.NotSet)) {
+    // 单选
+    handler (val, index) {
+      if (!this.allowedAll && !val.allowed && (index == 0 || index == 1 || val.NotSet)) {
         // this.custom[index].show = true;
       } else {
-        this.custom[index].show = !this.custom[index].show;
+        this.custom[index].show = !this.custom[index].show
       }
     },
-    //点击第二个cancel
-    save() {
-      this.$emit('update:customTableTitle', this.custom);
+    // 点击第二个cancel
+    save () {
+      this.$emit('update:customTableTitle', this.custom)
       localStorage.setItem(
-        "nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + ((typeof this.path != 'undefined') ? this.path : this.$route.path),
+        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + ((typeof this.path !== 'undefined') ? this.path : this.$route.path),
         JSON.stringify(this.custom)
-      );
-      this.esc();
-    },
+      )
+      this.esc()
+    }
   },
   computed: {
-    //点击all是否是全部取消选中，true为是
-    isCancel() {
-      let isCancel = true;
+    // 点击all是否是全部取消选中，true为是
+    isCancel () {
+      let isCancel = true
       for (let i = 0; i < this.custom.length; i++) {
-        if (!this.custom[i].show&&this.custom[i].type != 'title') {
-          isCancel = false;
-          break;
+        if (!this.custom[i].show && this.custom[i].type != 'title') {
+          isCancel = false
+          break
         }
       }
-      return isCancel;
+      return isCancel
     }
   }
-};
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index aa12cef8e..2a54387a7 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -12,8 +12,8 @@
       </button>
     </div>
 
-    <el-dialog :visible.sync="importBox.show" :title="importBox.title" modal-append-to-body append-to-body :modal-append-to-body='false' :show-close="true" :width="importBox.width" @close="closeDialog" class="nz-dialog" :close-on-click-modal="importBox.type!=3">
-      <div v-if="importBox.type==1">
+    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+      <div v-if="importBox.type == 1">
         <div class="upload-body">
           <el-upload drag class="upload-demo" ref="uploadExcel"  action="" :file-list="importFileList" :on-change="importChange"  :auto-upload="false" accept=".xlsx,.xls" :id="id+'-xlsx-input-file'">
             <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
@@ -69,8 +69,8 @@
                    <!-- <ul>
                       <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
                     </ul>-->
-                    <template v-for="(item,index) in importResult.failDetail">
-                      <div class="import-result-block">
+                    <template v-for="(item, index) in importResult.failDetail">
+                      <div :key="index" class="import-result-block">
                         <div class="import-result-item">
                           <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
                           <div>{{item.errorMsg}}</div>
@@ -97,36 +97,36 @@
 </template>
 
 <script>
-  import axios from 'axios'
-  var timeout;
-  export default {
-    name: "exportXLSX",
-    props:{
-      exportUrl:{type:String,required:true},
-      params:{type:Object},
-      exportFileName:{type:String},
-      importUrl: {type:String,required:true},
-      link:{type:Object},
-      permissions: {type: Object},
-      showCur:{type:Boolean,default:true},
-      id:{type:String,default:'export'}
-    },
-    data:function(){
-      return {
-        importBox:{show:false,title:this.$t('overall.importExcel'),type:1},
-        importFile:null,
-        importFileList:[],
-        importResult:null,
-        exportShow: false,
-        paramsType:'',
-      }
-    },
-    created(){
-    },
-    mounted(){
-      this.getParamsType();
-    },
-    /*watch: {
+import axios from 'axios'
+let timeout
+export default {
+  name: 'exportXLSX',
+  props: {
+    exportUrl: { type: String, required: true },
+    params: { type: Object },
+    exportFileName: { type: String },
+    importUrl: { type: String, required: true },
+    link: { type: Object },
+    permissions: { type: Object },
+    showCur: { type: Boolean, default: true },
+    id: { type: String, default: 'export' }
+  },
+  data: function () {
+    return {
+      importBox: { show: false, title: this.$t('overall.importExcel'), type: 1 },
+      importFile: null,
+      importFileList: [],
+      importResult: null,
+      exportShow: false,
+      paramsType: ''
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.getParamsType()
+  },
+  /* watch: {
       permissions: {
         immediate: true,
         deep: true,
@@ -134,205 +134,204 @@
           this.permission = Object(n);
         }
       }
-    },*/
-    methods: {
-      importChange:function(file,fileList){
-        if (fileList.length > 0) {
-          this.importFileList = [fileList[fileList.length - 1]]
-        }
-        this.importFile = this.importFileList[0];
-        this.validateFile();
-      },
-      validateFile:function(){
+    }, */
+  methods: {
+    importChange: function (file, fileList) {
+      if (fileList.length > 0) {
+        this.importFileList = [fileList[fileList.length - 1]]
+      }
+      this.importFile = this.importFileList[0]
+      this.validateFile()
+    },
+    validateFile: function () {
 
-      },
-      rollbackImport:function(){
-        let url;
-        if (this.importUrl.indexOf("asset") > -1) {
-          url = "/asset/cancelImport";
-        } else if (this.importUrl.indexOf("endpoint") > -1) {
-          url = "/endpoint/cancelImport";
-        } else if (this.importUrl.indexOf("rule") > -1) {
-          url = "/alert/rule/cancelImport";
-        } else if(this.importUrl.indexOf("panel") > -1){
-          url = "/panel/cancelImport";
-        }else if(this.importUrl.indexOf("tmpl") > -1){
-          url = "/expression/tmpl/cancelImport";
-        }
-        this.$delete(url + '?seq='+this.importResult.seq).then(response=>{
-          if(response.code ==  200 ){
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-            this.$emit('afterImport')
-          }else{
-            this.$message.error(response.msg);
-          }
-          this.closeDialog();
-        })
-      },
-      importExcel:function(){
-        if(this.importFile && this.importFile.raw){
-          this.prevent_opt.import =true;
-          let form = new FormData();
-          form.append('excelFile',this.importFile.raw);
-          if(this.paramsType){
-            form.append('type',this.paramsType);
-            if(this.paramsType==='asset' || this.paramsType==='model'){
-              form.append('linkId',this.link?this.link.id:'');
-            }
-          }
-          form.append('language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-          this.$post(this.importUrl,form,{'Content-Type': 'multipart/form-data'}).then(response=>{
-            if(response.code==200 && response.msg=='success'){
-              this.importResult=response.data;
-              this.$emit('afterImport')
-              this.importBox.type=3;
-              this.importBox.width='600px';
-            }else{
-              this.$message.error(response.msg);
-            }
-            this.prevent_opt.import =false;
-          })
-        }else{
-          this.$message.error(this.$t('tip.noImportFile'));
-        }
-      },
-      exportMenuHandler(show) {
-        if (show) {
-          clearTimeout(timeout);
-          this.exportShow = true;
+    },
+    rollbackImport: function () {
+      let url
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/cancelImport'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/endpoint/cancelImport'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/cancelImport'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/cancelImport'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/cancelImport'
+      }
+      this.$delete(url + '?seq=' + this.importResult.seq).then(response => {
+        if (response.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.$emit('afterImport')
         } else {
-          timeout = setTimeout(() => {
-            this.exportShow = false;
-          }, 700);
+          this.$message.error(response.msg)
         }
-      },
-      closeDialog:function(){
-        this.importBox.show=false;
-        this.importResult=null;
-        this.importFileList=[];
-        this.importFile=null;
-      },
-      downloadTemplate:function(){
-        let language=localStorage.getItem('nz-language') || 'en'; //初始未选择默认 en 英文
-        let fileName=this.exportFileName+'-'+this.$t('overall.template')+'-'+this.getTimeString()+'.xlsx';
-
-        let url=null;
-        if (this.importUrl.indexOf("asset") > -1) {
-          url = "/asset/template";
-        } else if (this.importUrl.indexOf("rule") > -1) {
-          url = "/alert/rule/template";
-        } else if (this.importUrl.indexOf('panel') > -1){
-          url = "/panel/template";
-        }else if(this.importUrl.indexOf('endpoint') > -1){
-          url = '/endpoint/template'
-        }else if(this.importUrl.indexOf("tmpl") > -1){
-          url = "/expression/tmpl/template";
-        }
-
-        let param={language:language}
-        if(!url){
-          console.error('no interface support')
-        }
-        this.exportExcel(url,param,fileName)
-      },
-      formatJson(filterVal, jsonData) {
-        return jsonData.map(v => filterVal.map(j => v[j]))
-      },
-      exportCur:function(){
-        let params=Object.assign({},this.params);
-        params.language=localStorage.getItem('nz-language') || 'en';
-        this.exportExcel(this.exportUrl,params,this.exportFileName+'-'+this.getTimeString()+'.xlsx');
-        this.closeDialog();
-      },
-      exportAll:function(){
-        let params=JSON.parse(JSON.stringify(this.params));
-        params.pageSize=-1;
-        if (this.importUrl.indexOf('panel') > -1){
-          delete params.panelId
-        }
-        // if (this.importUrl.indexOf('endpoint') > -1){
-        //   delete params.moduleId
-        // }
-        params.language=localStorage.getItem('nz-language') || 'en';
-
-        this.exportExcel(this.exportUrl,params,this.exportFileName+'-'+this.getTimeString()+'.xlsx');
-        this.closeDialog();
-      },
-      exportExcel:function(url,params,fileName){
-        let temp=this;
-        if(this.paramsType){
-          params.type=this.paramsType;
-        }
-        axios.get(url,{responseType:'blob',params:params}).then(res=>{
-          if(window.navigator.msSaveOrOpenBlob){
-            // 兼容ie11
-            let blobObject = new Blob([res.data]);
-            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
-          }else{
-            let url = URL.createObjectURL(new Blob([res.data]));
-            let a = document.createElement('a');
-            document.body.appendChild(a); //此处增加了将创建的添加到body当中
-            a.href = url;
-            a.download = fileName;
-            a.target = '_blank';
-            a.click();
-            a.remove(); //将a标签移除
+        this.closeDialog()
+      })
+    },
+    importExcel: function () {
+      if (this.importFile && this.importFile.raw) {
+        this.prevent_opt.import = true
+        const form = new FormData()
+        form.append('excelFile', this.importFile.raw)
+        if (this.paramsType) {
+          form.append('type', this.paramsType)
+          if (this.paramsType === 'asset' || this.paramsType === 'model') {
+            form.append('linkId', this.link ? this.link.id : '')
           }
-        },error=>{
-          let $self=this;
-          let reader = new FileReader();
-          reader.onload = function(event){
-            let responseText = reader.result;
-            let exception = JSON.parse(responseText);
-            if(exception.message){
-              $self.$message.error(exception.message)
-            }else{
-              console.error(error)
-            }
-          };
-          reader.readAsText(error.response.data);
+        }
+        form.append('language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+        this.$post(this.importUrl, form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+          if (response.code == 200 && response.msg == 'success') {
+            this.importResult = response.data
+            this.$emit('afterImport')
+            this.importBox.type = 3
+            this.importBox.width = '600px'
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.prevent_opt.import = false
         })
-      },
-      showImportBox:function(type){
-        this.importBox.show=true;
-        this.importBox.type=type;
-        if(type == 2&&(!this.showCur)){
-          this.exportCur()
-          return
+      } else {
+        this.$message.error(this.$t('tip.noImportFile'))
+      }
+    },
+    exportMenuHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.exportShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.exportShow = false
+        }, 700)
+      }
+    },
+    closeDialog: function () {
+      this.importBox.show = false
+      this.importResult = null
+      this.importFileList = []
+      this.importFile = null
+    },
+    downloadTemplate: function () {
+      const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+      const fileName = this.exportFileName + '-' + this.$t('overall.template') + '-' + this.getTimeString() + '.xlsx'
+
+      let url = null
+      if (this.importUrl.indexOf('asset') > -1) {
+        url = '/asset/template'
+      } else if (this.importUrl.indexOf('rule') > -1) {
+        url = '/alert/rule/template'
+      } else if (this.importUrl.indexOf('panel') > -1) {
+        url = '/panel/template'
+      } else if (this.importUrl.indexOf('endpoint') > -1) {
+        url = '/endpoint/template'
+      } else if (this.importUrl.indexOf('tmpl') > -1) {
+        url = '/expression/tmpl/template'
+      }
+
+      const param = { language: language }
+      if (!url) {
+        console.error('no interface support')
+      }
+      this.exportExcel(url, param, fileName)
+    },
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    exportCur: function () {
+      const params = Object.assign({}, this.params)
+      params.language = localStorage.getItem('nz-language') || 'en'
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportAll: function () {
+      const params = JSON.parse(JSON.stringify(this.params))
+      params.pageSize = -1
+      if (this.importUrl.indexOf('panel') > -1) {
+        delete params.panelId
+      }
+      // if (this.importUrl.indexOf('endpoint') > -1){
+      //   delete params.moduleId
+      // }
+      params.language = localStorage.getItem('nz-language') || 'en'
+
+      this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx')
+      this.closeDialog()
+    },
+    exportExcel: function (url, params, fileName) {
+      if (this.paramsType) {
+        params.type = this.paramsType
+      }
+      axios.get(url, { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
-        if(type == 1){//import
-          this.importBox.title=this.$t('overall.importExcel');
-          this.importBox.width='600px';
-        }else if(type == 2){//export
-          this.importBox.title=this.$t('overall.exportExcel');
-          this.importBox.width='300px';
-        }
-      },
-      getTimeString:function(){
-        let split='-';
-        let date=new Date();
-        let year=date.getFullYear();
-        let month=this.formatNum(date.getMonth()+1);
-        let day=this.formatNum(date.getDate());
-        let hours=this.formatNum(date.getHours());
-        let minutes=this.formatNum(date.getMinutes());
-        let seconds=this.formatNum(date.getSeconds());
-        return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds;
-      },
-      formatNum:function(num){
-        return num>9?num:'0'+num;
-      },
-      getParamsType(){
-        let path=this.$route.path;
-        switch(path){
-          case '/panel': this.paramsType='dashboard';break;
-          case '/asset': this.paramsType='asset';break;
-          case '/model': this.paramsType='model';break;
-          default: this.paramsType='';break;
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
         }
+        reader.readAsText(error.response.data)
+      })
+    },
+    showImportBox: function (type) {
+      this.importBox.show = true
+      this.importBox.type = type
+      if (type == 2 && (!this.showCur)) {
+        this.exportCur()
+        return
+      }
+      if (type == 1) { // import
+        this.importBox.title = this.$t('overall.importExcel')
+        this.importBox.width = '600px'
+      } else if (type == 2) { // export
+        this.importBox.title = this.$t('overall.exportExcel')
+        this.importBox.width = '300px'
+      }
+    },
+    getTimeString: function () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum: function (num) {
+      return num > 9 ? num : '0' + num
+    },
+    getParamsType () {
+      const path = this.$route.path
+      switch (path) {
+        case '/panel': this.paramsType = 'dashboard'; break
+        case '/asset': this.paramsType = 'asset'; break
+        case '/model': this.paramsType = 'model'; break
+        default: this.paramsType = ''; break
       }
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index f1c501e7a..5df9db7b0 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -12,28 +12,28 @@
     >
       <template v-for="(menu, index) in getMenuList" v-if="menu.code == 'header' && menu.children && menu.children.length > 0">
         <template v-for="(subMenu, subIndex) in menu.children">
-          <el-submenu :disabled="!linkData||linkData.length <1" :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu" v-if="subMenu.code == 'header_link'">
+          <el-submenu v-if="subMenu.code == 'header_link'" :key="subIndex" :disabled="!linkData||linkData.length <1" :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu">
             <template slot="title">
               <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
             </template>
             <template v-for="(item, index) in linkData">
-              <el-menu-item :index="'0-' + index">
+              <el-menu-item :key="index" :index="'0-' + index">
                 <span class="linkTitle"><a :href='item.url' :title="item.name" class="nz-a" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
               </el-menu-item>
             </template>
           </el-submenu>
-          <el-submenu :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="display-none" v-if="subMenu.code == 'header_terminal'">
+          <el-submenu v-if="subMenu.code == 'header_terminal'" :key="subIndex" :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="display-none">
             <div @click="cli" class="el-submenu__title" slot="title" id="header-open-cli">
               <i class="nz-icon nz-icon-cli" style="font-size: 18px;"></i>
               <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
             </div>
           </el-submenu>
-          <el-submenu :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu" v-if="subMenu.code == 'header_add'">
+          <el-submenu v-if="subMenu.code == 'header_add'" :key="subIndex" :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu">
             <template slot="title">
               <i class="nz-icon-create-square nz-icon" style="font-size: 18px;"></i>
             </template>
             <template v-for="(item, createIndex) in createMenu">
-              <el-menu-item :index="`${index}-${subIndex}-${createIndex}`" v-has="item.permission">
+              <el-menu-item :key="createIndex" v-has="item.permission" :index="`${index}-${subIndex}-${createIndex}`">
                 <div @click="createBox(item)" :id="'create-box-'+createIndex">
                   <span>{{item.label}}</span>
                 </div>
@@ -159,419 +159,418 @@
 </template>
 
 <script>
-  import bus from '../../libs/bus';
-  import dcBox from "./rightBox/dcBox"; //dc弹框
-  import {mapActions} from "vuex";
-  import changePwd from "../page/config/changePwd";
-  export default {
-    name: "Header",
-    components: {
-      'change-password': changePwd,
-      'dc-box': dcBox,
-    },
-    data() {
-      return {
-        username: sessionStorage.getItem("nz-username"),
-        language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
+import bus from '../../libs/bus'
+import dcBox from './rightBox/dcBox' // dc弹框
+import { mapActions } from 'vuex'
+import changePwd from '../page/config/changePwd'
+export default {
+  name: 'Header',
+  components: {
+    'change-password': changePwd,
+    'dc-box': dcBox
+  },
+  data () {
+    return {
+      username: sessionStorage.getItem('nz-username'),
+      language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
 
-        //顶部菜单相关
-        /*activeIndex: '',*/
-        activeItemIndex: '',
-        activeItemIndexes: [],
-        hoverItemIndex: '',
-        systemName: localStorage.getItem('nz-sys-name'),
-        dc: {
-          id: '',
-          name: '',
-          location: '',
-          tel: '',
-          principal: '',
-          area: {
-            id: 0,
-            name: ''
-          }
-        },
-        userData: [],
-        assetData: [], //顶部菜单asset的下拉内容
-
-        //add侧滑相关
-        rightBox: {
-          project: {show: false},
-          module: {show: false},
-          endpoint: {show: false},
-          asset: {show: false},
-          alertRule: {show: false},
-          dc: {show: false}
-        },
-        projectData: [], //顶部菜单project列表中的数据
-        editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
-        currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
-        editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule:[],labels:'',}, //新增/编辑的module
-        currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [],labels:'',labelModule:[],}, //endpoint弹框用来回显module，此处固定为空对象
-        editEndpoint: { //新增/编辑的endpoint
-          id: '',
-          host: '',
-          port: '',
-          param: '',
-          path: '',
-          asset: {id: '', name: '', host: ''},
-          project: {id: '', name: ''},
-          module: {id: '', name: '', param: '', paramObj: {}, projectId: '',labelModule:[],labels:''},
-          moduleId: '',
-          assetId: '',
-          labelModule:[]
-        },
-        editAsset: {
-          id: '',
-          sn: '',
-          host: '',
-          state: 1,
-          purchaseDate: '',
-          idcId: '',
-          cabinetId: '',
-          modelId: '',
-          model: {type: {code: ""}},
-          assetType: '',
-          impi:{
-            host:'',
-            port:'',
-          },
-          tags: [],
-          accounts: [],
-        },
-        editAlertRule: {
-          id: '',
-          alertName: '',
-          linkObject: {id: '', name: ''},
-          expr: '',
-          unit:2,
-          operator: '>',
-          last: 60,
-          severity: 'P2',
-          summary: '',
-          description: '',
-        },
-        createMenu: [ //新增按钮内容
-          {
-            label: this.$t('project.project.project'),
-            url: 'project',
-            type: 1,
-            permission: 'header_add_project'
-          },
-          {
-            label: this.$t('project.module.module'),
-            url: 'project',
-            type: 2,
-            permission: 'header_add_module'
-          },
-          {
-            label: this.$t('project.endpoint.endpoint'),
-            url: 'project',
-            type: 3,
-            permission: 'header_add_endpoint'
-          },
-          {
-            label: this.$t('asset.asset'),
-            url: 'asset',
-            type: 4,
-            permission: 'header_add_asset'
-          },
-          {
-            label: this.$t('alert.config.alertConfig'),
-            url: 'alertConfig',
-            type: 5,
-            permission: 'header_add_rule'
-          },
-        ],
-        showChangePwd:false,
-      }
-    },
-    methods: {
-      ...mapActions(["logoutSuccess"]),
-      cli(){
-        this.$store.commit('openConsole');
+      // 顶部菜单相关
+      /* activeIndex: '', */
+      activeItemIndex: '',
+      activeItemIndexes: [],
+      hoverItemIndex: '',
+      systemName: localStorage.getItem('nz-sys-name'),
+      dc: {
+        id: '',
+        name: '',
+        location: '',
+        tel: '',
+        principal: '',
+        area: {
+          id: 0,
+          name: ''
+        }
       },
+      userData: [],
+      assetData: [], // 顶部菜单asset的下拉内容
 
-      /**
+      // add侧滑相关
+      rightBox: {
+        project: { show: false },
+        module: { show: false },
+        endpoint: { show: false },
+        asset: { show: false },
+        alertRule: { show: false },
+        dc: { show: false }
+      },
+      projectData: [], // 顶部菜单project列表中的数据
+      editProject: { id: '', name: '', remark: '' }, // 新增/编辑的project
+      currentProject: { id: '', name: '', remark: '' }, // module/endpoint弹框用来回显project
+      editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule: [], labels: '' }, // 新增/编辑的module
+      currentModule: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], labels: '', labelModule: [] }, // endpoint弹框用来回显module，此处固定为空对象
+      editEndpoint: { // 新增/编辑的endpoint
+        id: '',
+        host: '',
+        port: '',
+        param: '',
+        path: '',
+        asset: { id: '', name: '', host: '' },
+        project: { id: '', name: '' },
+        module: { id: '', name: '', param: '', paramObj: {}, projectId: '', labelModule: [], labels: '' },
+        moduleId: '',
+        assetId: '',
+        labelModule: []
+      },
+      editAsset: {
+        id: '',
+        sn: '',
+        host: '',
+        state: 1,
+        purchaseDate: '',
+        idcId: '',
+        cabinetId: '',
+        modelId: '',
+        model: { type: { code: '' } },
+        assetType: '',
+        impi: {
+          host: '',
+          port: ''
+        },
+        tags: [],
+        accounts: []
+      },
+      editAlertRule: {
+        id: '',
+        alertName: '',
+        linkObject: { id: '', name: '' },
+        expr: '',
+        unit: 2,
+        operator: '>',
+        last: 60,
+        severity: 'P2',
+        summary: '',
+        description: ''
+      },
+      createMenu: [ // 新增按钮内容
+        {
+          label: this.$t('project.project.project'),
+          url: 'project',
+          type: 1,
+          permission: 'header_add_project'
+        },
+        {
+          label: this.$t('project.module.module'),
+          url: 'project',
+          type: 2,
+          permission: 'header_add_module'
+        },
+        {
+          label: this.$t('project.endpoint.endpoint'),
+          url: 'project',
+          type: 3,
+          permission: 'header_add_endpoint'
+        },
+        {
+          label: this.$t('asset.asset'),
+          url: 'asset',
+          type: 4,
+          permission: 'header_add_asset'
+        },
+        {
+          label: this.$t('alert.config.alertConfig'),
+          url: 'alertConfig',
+          type: 5,
+          permission: 'header_add_rule'
+        }
+      ],
+      showChangePwd: false
+    }
+  },
+  methods: {
+    ...mapActions(['logoutSuccess']),
+    cli () {
+      this.$store.commit('openConsole')
+    },
+
+    /**
        * @param route 路由地址
        * @param parentMenu 菜单大类
        * */
-      jumpTo(route) {
-        if (route != "asset") {
-          this.activeItemIndexes = [];
+    jumpTo (route) {
+      if (route != 'asset') {
+        this.activeItemIndexes = []
+      }
+      this.$router.push({
+        path: route,
+        query: {
+          t: +new Date()
         }
-        this.$router.push({
-          path: route,
-          query: {
-            t: +new Date()
+      })
+    },
+    getLinkData () {
+      this.$get('link').then(response => {
+        this.$store.commit('setLinkData', response.data)
+      })
+    },
+    createBox (item) {
+      if (item.type == 1) {
+        this.rightBox.project.show = true
+        this.editProject = { id: '', name: '', remark: '' }
+      } else if (item.type == 2) {
+        this.rightBox.module.show = true
+        this.editModule = {
+          name: '',
+          project: {},
+          port: 9100,
+          path: '',
+          param: '',
+          labels: '',
+          type: 'http',
+          paramObj: [],
+          snmpParam: '',
+          labelModule: [],
+          // snmp setting 下划线命名是因为业务需求
+          walk: [],
+          version: 2, // 2/3
+          max_repetitions: 25,
+          retries: 3,
+          timeout: 10, // s
+          community: 'public',
+          username: '',
+          security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
+          password: '',
+          auth_protocol: 'MD5', // MD5/SHA
+          priv_protocol: 'DES', // DES/AES
+          priv_password: '',
+          context_name: ''
+        }
+      } else if (item.type == 3) {
+        this.rightBox.endpoint.show = true
+      } else if (item.type == 4) {
+        this.rightBox.asset.show = true
+      } else if (item.type == 5) {
+        this.rightBox.alertRule.show = true
+      } else if (item.type == 6) {
+        this.rightBox.dc.show = true
+      }
+    },
+    jumpToAsset (dc) {
+      if (dc) {
+        this.activeItemIndex = dc.id
+        this.$store.commit('setCurrentDc', dc.id)
+        bus.$emit('header-dc-change', dc.id) // 发送给leftMenu，顶部dc条件改变了
+      } else {
+        this.activeItemIndex = ''
+        this.$store.commit('setCurrentDc', '')
+        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
+      }
+      this.jumpTo('/asset')
+    },
+    jumpToProject (p) {
+      if (!this.hasButton('project_view')) {
+        return
+      }
+      this.currentProject = p
+      if (p.id !== this.$store.state.currentProject.id) {
+        bus.$emit('project-page-type', 'project')
+      }
+      this.$store.commit('currentProjectChange', p)
+      this.activeItemIndex = p.id
+      this.jumpTo('/project')
+    },
+    getAssetData () {
+      this.$get('idc', { pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.assetData = response.data.list
+          this.assetData.forEach(item => {
+            this.$set(item, item.name, false)
+          })
+          this.$store.commit('setIdcArr', this.assetData)
+        }
+      })
+    },
+    changeLocal (lang) {
+      if (lang != localStorage.getItem('nz-language')) {
+        localStorage.setItem('nz-language', lang)
+        this.$i18n.locale = lang
+        window.location.reload()
+      }
+    },
+    getProjectList () {
+      this.$get('project', { pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.projectData = response.data.list
+          let flag = false
+          // 如果currentProject不在新取到的数据里，说明它被删了
+          for (let i = 0; i < this.projectData.length; i++) {
+            if (this.projectData[i].id == this.currentProject.id) {
+              flag = true
+              break
+            }
           }
-        });
-      },
-      getLinkData(){
-        this.$get('link').then(response=>{
-          this.$store.commit('setLinkData', response.data);
-        });
-      },
-      createBox(item) {
-        if (item.type == 1) {
-          this.rightBox.project.show = true;
-          this.editProject = {id: '', name: '', remark: ''};
-        } else if (item.type == 2) {
-          this.rightBox.module.show = true;
-          this.editModule = {
-            name: '',
-            project: {},
-            port: 9100,
-            path: '',
-            param: '',
-            labels:'',
-            type: 'http',
-            paramObj: [],
-            snmpParam: '',
-            labelModule:[],
-            //snmp setting 下划线命名是因为业务需求
-            walk: [],
-            version: 2, //2/3
-            max_repetitions: 25,
-            retries: 3,
-            timeout: 10, //s
-            community: 'public',
-            username: '',
-            security_level: 'noAuthNoPriv', //noAuthNoPriv/authNoPriv/authPriv
-            password: '',
-            auth_protocol: 'MD5', //MD5/SHA
-            priv_protocol: 'DES', //DES/AES
-            priv_password: '',
-            context_name: ''
-          };
-        } else if (item.type == 3) {
-          this.rightBox.endpoint.show = true;
-        } else if (item.type == 4) {
-          this.rightBox.asset.show = true;
-        } else if (item.type == 5) {
-          this.rightBox.alertRule.show = true;
-        } else if (item.type == 6) {
-          this.rightBox.dc.show = true;
-        }
-      },
-      jumpToAsset(dc) {
-        if (dc) {
-          this.activeItemIndex = dc.id;
-          this.$store.commit('setCurrentDc',dc.id)
-          bus.$emit("header-dc-change", dc.id); //发送给leftMenu，顶部dc条件改变了
-        } else {
-          this.activeItemIndex = "";
-          this.$store.commit('setCurrentDc','');
-          bus.$emit("clear-asset-filter"); //清除leftMenu左侧菜单过滤条件
-        }
-        this.jumpTo("/asset");
-      },
-      jumpToProject(p) {
-        if (!this.hasButton('project_view')) {
-          return;
-        }
-        this.currentProject = p;
-        if(p.id!==this.$store.state.currentProject.id){
-          bus.$emit("project-page-type", "project");
-        }
-        this.$store.commit("currentProjectChange", p);
-        this.activeItemIndex = p.id;
-        this.jumpTo('/project');
-      },
-      getAssetData() {
-        this.$get('idc', {pageSize:-1}).then(response => {
-          if (response.code == 200) {
-            this.assetData = response.data.list;
-            this.assetData.forEach(item => {
-              this.$set(item, item.name, false)
-            });
-            this.$store.commit('setIdcArr',this.assetData);
+          if (!flag && this.projectData.length > 0) {
+            this.currentProject = this.projectData[0]
+            this.activeItemIndex = this.currentProject.id
+            this.$store.commit('currentProjectChange', this.currentProject)
           }
+        }
+      })
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user/list', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve()
         })
-      },
-      changeLocal(lang) {
-        if (lang != localStorage.getItem("nz-language")) {
-          localStorage.setItem("nz-language", lang);
-          this.$i18n.locale = lang;
-          window.location.reload();
-        }
-      },
-      getProjectList() {
-        this.$get('project', {pageSize:-1}).then(response => {
-          if (response.code == 200) {
-            this.projectData = response.data.list
-            let flag = false;
-            //如果currentProject不在新取到的数据里，说明它被删了
-            for (let i = 0; i < this.projectData.length; i++) {
-              if (this.projectData[i].id == this.currentProject.id) {
-                flag = true;
-                break;
-              }
-            }
-            if (!flag && this.projectData.length > 0) {
-              this.currentProject = this.projectData[0];
-              this.activeItemIndex = this.currentProject.id;
-              this.$store.commit('currentProjectChange', this.currentProject);
-            }
-          }
-        })
-      },
-      getUserData() {
-        return new Promise(resolve => {
-          this.$get('sys/user/list', {pageSize: -1, pageNo: 1}).then(response => {
-            if (response.code === 200) {
-              this.userData = response.data.list;
-            }
-            resolve();
-          });
-        });
-      },
-      closeProjectRightBox(refresh) {
-        this.rightBox.project.show = false;
-        if (refresh) {
-          this.getProjectList();
-          bus.$emit("project-list-change");
-        }
-      },
-      closeModuleRightBox(refresh) {
-        this.rightBox.module.show = false;
-        if (refresh) {
-          bus.$emit("module-list-change");
-        }
-      },
-      closeEndpointRightBox(refresh) {
-        this.rightBox.endpoint.show = false;
-        if (refresh) {
-          bus.$emit("endpoint-list-change");
-        }
-      },
-      closeAssetRightBox(refresh) {
-        this.rightBox.asset.show = false;
-        if (refresh) {
-          bus.$emit("asset-list-change");
-        }
-      },
-      closeAlertRuleRightBox(refresh) {
-        this.rightBox.alertRule.show = false;
-        if (refresh) {
-          bus.$emit("alert-rule-list-change");
-        }
-      },
-      closeDcBox(refresh) {
-        this.rightBox.dc.show = false;
-        if (refresh) {
-          this.getAssetData();
-          bus.$emit("dc-list-change");
-        }
-      },
-      toEditProject(p) {
-        this.editProject = Object.assign({}, p);
-        this.rightBox.project.show = true;
-      },
-      logout() {
-        this.$get('logout').then(() => {
-          this.logoutSuccess();
-          document.location.href = "/";
-        });
-
-        //this.jumpTo('/login');
-      },
-      refreshLang() {
-        this.language = localStorage.getItem("nz-language");
-        this.$i18n.locale = this.language;
-        this.$nextTick(() => {
-          window.location.reload();
-        });
-      },
-      showPwdDialog() {
-        this.showChangePwd = true;
-      },
-      dialogClosed() {
-        this.showChangePwd = false;
-      },
-      cancel() {
-        this.jumpTo(this.$route.path.slice(1, this.$route.path.length));
-      },
-
-      initEvent() {
-        bus.$on('login', () => {
-          this.username = sessionStorage.getItem("nz-username");
-          this.refreshLang();
-        });
-        bus.$on("dc-list-change", () => { //dc.vue增删改dc时刷新顶部菜单dc列表
-          this.getAssetData();
-        });
-        bus.$on("current-project-change", project => {
-          this.currentProject = project;
-          this.activeItemIndex = project.id;
-        });
-        if (window.history && window.history.pushState) {
-          history.pushState(null, null, document.URL);
-          window.addEventListener('popstate', this.cancel, false);
-        }
-      },
+      })
     },
-    mounted() {
-      this.$i18n.locale = this.language;
-      if (sessionStorage.getItem('nz-token')) {
-        this.initEvent();
-        this.getAssetData();
-        this.getUserData();
-        this.getProjectList();
-        this.getLinkData();
-      }
-      // 刷新后有高亮
-      /*let activePath = this.$route.path.slice(1);
-      this.activeIndex = activePath;*/
-    },
-    computed: {
-      linkData(){
-        return this.$store.getters.getLinkData;
-      },
-      route() {
-        return this.$route.path;
-      },
-      overViewProject(){
-        return this.$store.getters.getOverViewProject;
-      },
-      menuIsActive() {
-        return function(menu, isParent) {
-          if (isParent) {
-            let isCurrent = menu.children.some(sub => {
-              return sub.route == this.route;
-            });
-            if (isCurrent) {
-              return "menu-active";
-            } else {
-              return "";
-            }
-          } else {
-            if (menu.route == this.route) {
-              return "menu-item-active";
-            } else {
-              return "";
-            }
-          }
-        };
+    closeProjectRightBox (refresh) {
+      this.rightBox.project.show = false
+      if (refresh) {
+        this.getProjectList()
+        bus.$emit('project-list-change')
       }
     },
-    watch:{
-      overViewProject(n){
-        if(n){
-          this.jumpToProject(n)
-        }
+    closeModuleRightBox (refresh) {
+      this.rightBox.module.show = false
+      if (refresh) {
+        bus.$emit('module-list-change')
       }
     },
-    beforeDestroy(){
-      bus.$off('login');
-      bus.$off("dc-list-change");
-      bus.$off("current-project-change");
-
+    closeEndpointRightBox (refresh) {
+      this.rightBox.endpoint.show = false
+      if (refresh) {
+        bus.$emit('endpoint-list-change')
+      }
     },
-    destroyed() {
-      window.removeEventListener('popstate', this.cancel, false);
+    closeAssetRightBox (refresh) {
+      this.rightBox.asset.show = false
+      if (refresh) {
+        bus.$emit('asset-list-change')
+      }
+    },
+    closeAlertRuleRightBox (refresh) {
+      this.rightBox.alertRule.show = false
+      if (refresh) {
+        bus.$emit('alert-rule-list-change')
+      }
+    },
+    closeDcBox (refresh) {
+      this.rightBox.dc.show = false
+      if (refresh) {
+        this.getAssetData()
+        bus.$emit('dc-list-change')
+      }
+    },
+    toEditProject (p) {
+      this.editProject = Object.assign({}, p)
+      this.rightBox.project.show = true
+    },
+    logout () {
+      this.$get('logout').then(() => {
+        this.logoutSuccess()
+        document.location.href = '/'
+      })
+
+      // this.jumpTo('/login');
+    },
+    refreshLang () {
+      this.language = localStorage.getItem('nz-language')
+      this.$i18n.locale = this.language
+      this.$nextTick(() => {
+        window.location.reload()
+      })
+    },
+    showPwdDialog () {
+      this.showChangePwd = true
+    },
+    dialogClosed () {
+      this.showChangePwd = false
+    },
+    cancel () {
+      this.jumpTo(this.$route.path.slice(1, this.$route.path.length))
+    },
+
+    initEvent () {
+      bus.$on('login', () => {
+        this.username = sessionStorage.getItem('nz-username')
+        this.refreshLang()
+      })
+      bus.$on('dc-list-change', () => { // dc.vue增删改dc时刷新顶部菜单dc列表
+        this.getAssetData()
+      })
+      bus.$on('current-project-change', project => {
+        this.currentProject = project
+        this.activeItemIndex = project.id
+      })
+      if (window.history && window.history.pushState) {
+        history.pushState(null, null, document.URL)
+        window.addEventListener('popstate', this.cancel, false)
+      }
     }
+  },
+  mounted () {
+    this.$i18n.locale = this.language
+    if (sessionStorage.getItem('nz-token')) {
+      this.initEvent()
+      this.getAssetData()
+      this.getUserData()
+      this.getProjectList()
+      this.getLinkData()
+    }
+    // 刷新后有高亮
+    /* let activePath = this.$route.path.slice(1);
+      this.activeIndex = activePath; */
+  },
+  computed: {
+    linkData () {
+      return this.$store.getters.getLinkData
+    },
+    route () {
+      return this.$route.path
+    },
+    overViewProject () {
+      return this.$store.getters.getOverViewProject
+    },
+    menuIsActive () {
+      return function (menu, isParent) {
+        if (isParent) {
+          const isCurrent = menu.children.some(sub => {
+            return sub.route == this.route
+          })
+          if (isCurrent) {
+            return 'menu-active'
+          } else {
+            return ''
+          }
+        } else {
+          if (menu.route == this.route) {
+            return 'menu-item-active'
+          } else {
+            return ''
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    overViewProject (n) {
+      if (n) {
+        this.jumpToProject(n)
+      }
+    }
+  },
+  beforeDestroy () {
+    bus.$off('login')
+    bus.$off('dc-list-change')
+    bus.$off('current-project-change')
+  },
+  destroyed () {
+    window.removeEventListener('popstate', this.cancel, false)
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/home.vue b/nezha-fronted/src/components/common/home.vue
index 0c69a7f40..f9ae157c0 100644
--- a/nezha-fronted/src/components/common/home.vue
+++ b/nezha-fronted/src/components/common/home.vue
@@ -13,20 +13,20 @@
 </template>
 
 <script>
-import Header from "./header";
-import webSSH from "../cli/webSSH";
-import leftMenu from "./leftMenu";
-import menus from "../page/config/menus";
+import Header from './header'
+import webSSH from '../cli/webSSH'
+import leftMenu from './leftMenu'
+import menus from '../page/config/menus'
 export default {
-  name: "home",
+  name: 'home',
   components: {
     Header,
     'web-ssh': webSSH,
     'left-menu': leftMenu,
     menus
   },
-  computed:{
-    isMenuPage:function(){
+  computed: {
+    isMenuPage: function () {
       return this.$route.path == '/menu'
     }
   }
diff --git a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
index 437dcdbd3..6e02566d3 100644
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -16,844 +16,840 @@
 </template>
 
 <script>
-  import {SVG} from '@svgdotjs/svg.js'
-  import '@svgdotjs/svg.panzoom.js'
-  import {getHexagon,setHexagon,delHexagon} from "../js/common";
+import { SVG } from '@svgdotjs/svg.js'
+import '@svgdotjs/svg.panzoom.js'
+import { getHexagon, setHexagon, delHexagon } from '../js/common'
 
-  function PolylineOver(){
-    this.stroke({color:'#909090'})
-  }
+function PolylineOver () {
+  this.stroke({ color: '#909090' })
+}
 
-  function PolylineOut(){
-    this.stroke({color:'#DADADA'})
-  }
+function PolylineOut () {
+  this.stroke({ color: '#DADADA' })
+}
 
-  function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
-    return new Promise(resolve=>{
-      let arr;
-      let x1,x2,x3,x4,x5,x6;
-      let y1,y2,y3,y4,y5,y6;
-      let MathSqrt3=Math.sqrt(3);
-      x1=x;
-      y1=y+edge/2;
-      x2=x+MathSqrt3*edge/2;
-      y2=y;
-      x3=x+MathSqrt3*edge;
-      y3=y+edge/2;
-      x4=x+MathSqrt3*edge;
-      y4=y+edge/2+edge;
-      x5=x+MathSqrt3*edge/2;
-      y5=y+edge*2;
-      x6=x;
-      y6=y+edge/2+edge;
-      arr=[{x:x1,y:y1},{x:x2,y:y2},{x:x3,y:y3},{x:x4,y:y4},{x:x5,y:y5},{x:x6,y:y6}];
-      let svgStrPoint='';
-      arr.forEach((item)=>{
-        svgStrPoint+=item['x']+','+item['y']+' '
-      });
-      let center=[x+MathSqrt3*edge/2,y+edge];
-      resolve({
-        point:arr,
-        svgStrPoint,
-        center
-      })
+function hexagonPoint (x, y, edge) { // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
+  return new Promise(resolve => {
+    const MathSqrt3 = Math.sqrt(3)
+    const x1 = x
+    const y1 = y + edge / 2
+    const x2 = x + MathSqrt3 * edge / 2
+    const y2 = y
+    const x3 = x + MathSqrt3 * edge
+    const y3 = y + edge / 2
+    const x4 = x + MathSqrt3 * edge
+    const y4 = y + edge / 2 + edge
+    const x5 = x + MathSqrt3 * edge / 2
+    const y5 = y + edge * 2
+    const x6 = x
+    const y6 = y + edge / 2 + edge
+    const arr = [{ x: x1, y: y1 }, { x: x2, y: y2 }, { x: x3, y: y3 }, { x: x4, y: y4 }, { x: x5, y: y5 }, { x: x6, y: y6 }]
+    let svgStrPoint = ''
+    arr.forEach((item) => {
+      svgStrPoint += item.x + ',' + item.y + ' '
     })
-  }
+    const center = [x + MathSqrt3 * edge / 2, y + edge]
+    resolve({
+      point: arr,
+      svgStrPoint,
+      center
+    })
+  })
+}
 
-  function midpoint(point1,point2){//计算中点
+// eslint-disable-next-line no-unused-vars
+function midpoint (point1, point2) { // 计算中点
+  return {
+    x: (point1.x + point2.x) / 2,
+    y: (point1.y + point2.y) / 2
+  }
+}
+
+function borderMove (left, top, borderSize, type, svgPolyline) { // left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
+  const point = [null, null]
+  const MathSqrt3 = Math.sqrt(3)
+  const arr = svgPolyline.array()
+  switch (type) {
+    case 1: // 从左到右的斜上方运动
+      point[0] = left + MathSqrt3 * borderSize / 2
+      point[1] = top - borderSize / 2
+      break
+    case 2: // 从左到右的斜下方运动
+      point[0] = left + MathSqrt3 * borderSize / 2
+      point[1] = top + borderSize / 2
+      break
+    case 3: // 从上到下的正下方运动
+      point[0] = left
+      point[1] = top + borderSize
+      break
+    case 4: // 从右到左的斜下方运动
+      point[0] = left - MathSqrt3 * borderSize / 2
+      point[1] = top + borderSize / 2
+      break
+    case 5: // 从右到左的斜上方运动
+      point[0] = left - MathSqrt3 * borderSize / 2
+      point[1] = top - borderSize / 2
+      break
+    case 6: // 从右到左的斜上方运动
+      point[0] = left
+      point[1] = top - borderSize
+      break
+  }
+  arr.push(point)
+  svgPolyline.plot(arr)
+  return point
+}
+
+export default {
+  name: 'hexagonFigureSvg',
+  props: {
+    hexData: {}, // 数据
+    hexagonSvgID: { // 在同一个页面创建多个实例时 需要通过id区分
+      type: String,
+      required: true
+    },
+    col: {}, // 列数
+    colorFrom: { // 通过什么决定颜色
+      type: String,
+      default: ''
+    },
+    infoSet: { // 设置六边形内部内容  参数 group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
+      type: Function
+    },
+    colorSet: { // 设置方块对应颜色 参数 item 当前item的数据
+      type: Function,
+      default: () => {
+        return { color: '#99D7C2', hoverColor: '#B2ECD9' }
+      }
+    },
+    infoShow: { // 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
+      type: Function
+    },
+    infoHide: { // 设置六边形内部内容 缩小显示时的样式 参数 allHexagonRect
+      type: Function
+    },
+    hexagonEdgeProp: { // 边框长度
+      type: Number,
+      default: 90
+    },
+    magnifyRate: { // 放大倍率
+      type: Number,
+      default: 1
+    },
+    isClickRate: { // 是否支持点击放大
+      type: Boolean,
+      default: true
+    },
+    showTooltip: {
+      type: Boolean,
+      default: false
+    },
+    isPanning: { // 是否支持移动
+      type: Boolean,
+      default: true
+    },
+    isPinchZoom: { // 是否支持手指缩放
+      type: Boolean,
+      default: false
+    },
+    isWheelZoom: { // 是否支持手指缩放
+      type: Boolean,
+      default: false
+    },
+    zoomFactor: { // 鼠标滚轮放大倍数
+      type: Number,
+      default: 0.5
+    },
+    zoomMin: { // 最小倍数
+      type: Number,
+      default: 0.2
+    },
+    zoomMax: { // 最小倍数
+      type: Number,
+      default: 5
+    },
+    from: {
+      type: String,
+      default: 'asset'
+    }
+  },
+  watch: {
+    hexData: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    },
+    col: { // 列数
+      immediate: false,
+      deep: true,
+      handler () {
+        this.init()
+      }
+    },
+    hexagonEdgeProp: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+      }
+    }
+  },
+  data () {
     return {
-      x:(point1.x+point2.x)/2,
-      y:(point1.y+point2.y)/2,
+      allHexagon: [],
+      allGroup: [],
+      // col:5,
+      row: 5,
+      boxPadLeft: 360,
+      boxPadTop: 180,
+      hexagonData: [],
+      textAll: [],
+      hexSize: '',
+      MathSqrt3: Math.sqrt(3),
+      hexagonTextPos: {
+        top: 0,
+        left: 0,
+        show: false,
+        data: null
+      },
+      boxhexagonShow: false,
+      pan: false, // 是否移动
+      defaultColor: { color: '#99D7C2', hoverColor: '#B2ECD9' },
+      viewBox: null,
+      isShowHover: true, // 是否显示hover块
+      timer: null, // 定时器用来处理单击双击的冲突
+      firstInit: true, // 优化刚加载时的多次点击造成放大缩小功能的不正常
+      defaultRate: 0.33, // 默认倍率 最小0.2
+      defaultBoxWidth: 2288,
+      hexagonEdge: JSON.stringify(this.hexagonEdgeProp),
+      fontSize: 14,
+      maskShow: true,
+      windowRate: 1,
+      scaleFlag: true
     }
-  }
-
-  function borderMove(left,top,borderSize,type,svgPolyline){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
-    let point=[null,null];
-    let MathSqrt3=Math.sqrt(3);
-    let arr=svgPolyline.array();
-    switch(type){
-      case 1: //从左到右的斜上方运动
-        point[0]=left+MathSqrt3*borderSize/2;
-        point[1]=top-borderSize/2;
-        break;
-      case 2: //从左到右的斜下方运动
-        point[0]=left+MathSqrt3*borderSize/2;
-        point[1]=top+borderSize/2;
-        break;
-      case 3: //从上到下的正下方运动
-        point[0]=left;
-        point[1]=top+borderSize;
-        break;
-      case 4: //从右到左的斜下方运动
-        point[0]=left-MathSqrt3*borderSize/2;
-        point[1]=top+borderSize/2;
-        break;
-      case 5: //从右到左的斜上方运动
-        point[0]=left-MathSqrt3*borderSize/2;
-        point[1]=top-borderSize/2;
-        break;
-      case 6: //从右到左的斜上方运动
-        point[0]=left;
-        point[1]=top-borderSize;
-        break;
+  },
+  computed: {
+    interspace () {
+      return (this.hexagonEdge * this.MathSqrt3 / 5) * 0.5
     }
-    arr.push(point);
-    svgPolyline.plot(arr);
-    return point
-  }
-
-  export default {
-    name:"hexagonFigureSvg",
-    props:{
-      hexData:{},//数据
-      hexagonSvgID:{//在同一个页面创建多个实例时 需要通过id区分
-        type:String,
-        required:true,
-      },
-      col:{},//列数
-      colorFrom:{//通过什么决定颜色
-        type:String,
-        default:'',
-      },
-      infoSet:{// 设置六边形内部内容  参数 group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
-        type:Function,
-      },
-      colorSet:{ //设置方块对应颜色 参数 item 当前item的数据
-        type:Function,
-        default:()=>{
-          return {color:'#99D7C2',hoverColor:'#B2ECD9'}
-        }
-      },
-      infoShow:{// 设置六边形内部内容 放大显示时的样式 参数 allHexagonRect
-        type:Function,
-      },
-      infoHide:{// 设置六边形内部内容 缩小显示时的样式 参数 allHexagonRect
-        type:Function,
-      },
-      hexagonEdgeProp:{ // 边框长度
-        type:Number,
-        default:90,
-      },
-      magnifyRate:{//放大倍率
-        type:Number,
-        default:1,
-      },
-      isClickRate:{ // 是否支持点击放大
-        type:Boolean,
-        default:true,
-      },
-      showTooltip:{
-        type:Boolean,
-        default:false,
-      },
-      isPanning:{ // 是否支持移动
-        type:Boolean,
-        default:true,
-      },
-      isPinchZoom:{ //是否支持手指缩放
-        type:Boolean,
-        default:false,
-      },
-      isWheelZoom:{ //是否支持手指缩放
-        type:Boolean,
-        default:false,
-      },
-      zoomFactor:{ //鼠标滚轮放大倍数
-        type:Number,
-        default:0.5,
-      },
-      zoomMin:{//最小倍数
-        type:Number,
-        default:0.2,
-      },
-      zoomMax:{//最小倍数
-        type:Number,
-        default:5,
-      },
-      from:{
-        type:String,
-        default:'asset',
-      }
-    },
-    watch:{
-      hexData:{
-        immediate:false,
-        deep:true,
-        handler(n){
-          this.init();
-        }
-      },
-      col:{ // 列数
-        immediate:false,
-        deep:true,
-        handler(){
-          this.init();
-        }
-      },
-      hexagonEdgeProp:{
-        immediate:false,
-        deep:true,
-        handler(n){
-        }
-      }
-    },
-    data(){
-      return {
-        allHexagon:[],
-        allGroup:[],
-        // col:5,
-        row:5,
-        boxPadLeft:360,
-        boxPadTop:180,
-        hexagonData:[],
-        textAll:[],
-        hexSize:'',
-        MathSqrt3:Math.sqrt(3),
-        hexagonTextPos:{
-          top:0,
-          left:0,
-          show:false,
-          data:null
-        },
-        boxhexagonShow:false,
-        pan:false,//是否移动
-        defaultColor:{color:'#99D7C2',hoverColor:'#B2ECD9'},
-        viewBox:null,
-        isShowHover:true,//是否显示hover块
-        timer:null,// 定时器用来处理单击双击的冲突
-        firstInit:true,//优化刚加载时的多次点击造成放大缩小功能的不正常
-        defaultRate:0.33,// 默认倍率 最小0.2
-        defaultBoxWidth:2288,
-        hexagonEdge:JSON.stringify(this.hexagonEdgeProp),
-        fontSize:14,
-        maskShow:true,
-        windowRate:1,
-        scaleFlag:true,
-      }
-    },
-    computed:{
-      interspace(){
-        return (this.hexagonEdge*this.MathSqrt3/5)*0.5;
-      }
-    },
-    created(){
-    },
-    mounted(){
-      // this.init()
-      window.addEventListener("visibilitychange",this.reload);
-    },
-    methods:{
-      init(){ //创建svg实例
-        this.boxhexagonShow=false;
-        this.maskShow=true;
-        this.hexagonEdge=this.hexagonEdgeProp;
-        this.clearData().then(()=>{
-          this.boxhexagonShow=true;
-          this.$nextTick(()=>{
-            this.hexagonData=JSON.parse(JSON.stringify(this.hexData));
-            let box=`#${this.hexagonSvgID}`;
-            let hexagonSvg=SVG().addTo(box).size('100%','100%')
-              .panZoom({
-                zoomMin:this.zoomMin,
-                zoomMax:this.zoomMax,
-                zoomFactor:this.zoomFactor,
-                pinchZoom:this.isPinchZoom,
-                wheelZoom:this.isWheelZoom,
-                panning:this.isPanning
-              })
-              .attr('id','SvgHex')
-              .attr('class',this.hexagonSvgID)
-              .attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
-            hexagonSvg.on('click',this.hexagonSvgClearScale);
-            hexagonSvg.on('panStart',this.hexagonSvgPanStart);
-            hexagonSvg.on('mousemove',this.hexagonMove);
-            hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
-            let Rate=(this.$refs.box.offsetWidth/this.defaultBoxWidth);
-            Rate=(Rate>0.2?Rate:0.2);
-            this.windowRate=Rate;
-            this.hexagonEdge=(this.hexagonEdge/this.defaultRate)*Rate;
-            let fontSize=((this.fontSize/this.defaultRate)*Rate);
-            this.fontSize=fontSize<8?8:fontSize;
-            setHexagon(this.hexagonSvgID,{
-              hexagonSvg:hexagonSvg,
-              svgPolyline:null,
-              allHexagonRect:[],
-              allHexagonText:[],
-              hover:null
+  },
+  created () {
+  },
+  mounted () {
+    // this.init()
+    window.addEventListener('visibilitychange', this.reload)
+  },
+  methods: {
+    init () { // 创建svg实例
+      this.boxhexagonShow = false
+      this.maskShow = true
+      this.hexagonEdge = this.hexagonEdgeProp
+      this.clearData().then(() => {
+        this.boxhexagonShow = true
+        this.$nextTick(() => {
+          this.hexagonData = JSON.parse(JSON.stringify(this.hexData))
+          const box = `#${this.hexagonSvgID}`
+          const hexagonSvg = SVG().addTo(box).size('100%', '100%')
+            .panZoom({
+              zoomMin: this.zoomMin,
+              zoomMax: this.zoomMax,
+              zoomFactor: this.zoomFactor,
+              pinchZoom: this.isPinchZoom,
+              wheelZoom: this.isWheelZoom,
+              panning: this.isPanning
             })
-            this.getPadding().then(()=>{
-              getHexagon(this.hexagonSvgID).svgPolyline=getHexagon(this.hexagonSvgID).hexagonSvg.polyline().fill('none').stroke({
-                color:'#DADADA',
-                width:3,
-                linecap:'round',
-                linejoin:'round'
-              });
-              this.getDataPoint();
-            });//获取到上方和左方的距离;
-            setTimeout(()=>{
-              this.firstInit=false;
-            },500)
+            .attr('id', 'SvgHex')
+            .attr('class', this.hexagonSvgID)
+            .attr('viewBox', `0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`) // svg实例
+          hexagonSvg.on('click', this.hexagonSvgClearScale)
+          hexagonSvg.on('panStart', this.hexagonSvgPanStart)
+          hexagonSvg.on('mousemove', this.hexagonMove)
+          hexagonSvg.on('panEnd', this.hexagonSvgPanEnd)
+          let Rate = (this.$refs.box.offsetWidth / this.defaultBoxWidth)
+          Rate = (Rate > 0.2 ? Rate : 0.2)
+          this.windowRate = Rate
+          this.hexagonEdge = (this.hexagonEdge / this.defaultRate) * Rate
+          const fontSize = ((this.fontSize / this.defaultRate) * Rate)
+          this.fontSize = fontSize < 8 ? 8 : fontSize
+          setHexagon(this.hexagonSvgID, {
+            hexagonSvg: hexagonSvg,
+            svgPolyline: null,
+            allHexagonRect: [],
+            allHexagonText: [],
+            hover: null
           })
-        });
-      },
-      reload(){
-        if(!document.hidden){
-          this.init();
-        }
-      },
-      getPadding(){//确定到上方和下方的距离 保持居中
-        return new Promise(resolve=>{
-          let hexagonWidth=this.MathSqrt3*this.hexagonEdge+this.interspace;
-          let hexagonHeight=this.hexagonEdge*2+this.interspace;
-          let row=parseInt((this.hexagonData.length)/(this.col*2-1))*2;//行数是总数除2倍列数-1的整数部分 加上根据余数的判断
-          let dolNum=(this.hexagonData.length)%(this.col*2-1)
-          if(dolNum>0&&dolNum<=this.col){ //余数的判断
-            row+=1
-          }else if(dolNum>0&&dolNum>this.col){
-            row+=2
-          }
-          this.row=row;
-          if(this.hexagonData.length-1<=this.col){
-            // boxPadLeft:200, boxPadTop:75,
-            this.boxPadLeft=(this.$refs.box.offsetWidth-this.hexagonData.length*hexagonWidth)/2;
-            this.boxPadTop=(this.$refs.box.offsetHeight-hexagonHeight)/2; //只有一行是 到上方距离应该是两倍边长
-          }else{
-            this.boxPadLeft=(this.$refs.box.offsetWidth-this.col*hexagonWidth)/2;
-            this.boxPadTop=(this.$refs.box.offsetHeight-(hexagonHeight+(this.row-1)*hexagonHeight*3/4))/2; // 大于一行时 为一行的行高 + 3/2的行高
-          }
-          resolve();
+          this.getPadding().then(() => {
+            getHexagon(this.hexagonSvgID).svgPolyline = getHexagon(this.hexagonSvgID).hexagonSvg.polyline().fill('none').stroke({
+              color: '#DADADA',
+              width: 3,
+              linecap: 'round',
+              linejoin: 'round'
+            })
+            this.getDataPoint()
+          })// 获取到上方和左方的距离;
+          setTimeout(() => {
+            this.firstInit = false
+          }, 500)
         })
-      },
-      getDataPoint(){ // 确定所有坐标点的位置
-        let col=this.col;//确定列数
-        let row=this.row;//确定列数
-        let paddingTop=this.boxPadTop; // 到上方的距离
-        let paddingLeft=this.boxPadLeft; //整体到左侧的距离
-        let arrIndex=0;
-        this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
-        for(let i=0; i<row; i++){// 确定 所有 坐标点
-          if(arrIndex>this.hexagonData.length-1){
+      })
+    },
+    reload () {
+      if (!document.hidden) {
+        this.init()
+      }
+    },
+    getPadding () { // 确定到上方和下方的距离 保持居中
+      return new Promise(resolve => {
+        const hexagonWidth = this.MathSqrt3 * this.hexagonEdge + this.interspace
+        const hexagonHeight = this.hexagonEdge * 2 + this.interspace
+        let row = parseInt((this.hexagonData.length) / (this.col * 2 - 1)) * 2// 行数是总数除2倍列数-1的整数部分 加上根据余数的判断
+        const dolNum = (this.hexagonData.length) % (this.col * 2 - 1)
+        if (dolNum > 0 && dolNum <= this.col) { // 余数的判断
+          row += 1
+        } else if (dolNum > 0 && dolNum > this.col) {
+          row += 2
+        }
+        this.row = row
+        if (this.hexagonData.length - 1 <= this.col) {
+          // boxPadLeft:200, boxPadTop:75,
+          this.boxPadLeft = (this.$refs.box.offsetWidth - this.hexagonData.length * hexagonWidth) / 2
+          this.boxPadTop = (this.$refs.box.offsetHeight - hexagonHeight) / 2 // 只有一行是 到上方距离应该是两倍边长
+        } else {
+          this.boxPadLeft = (this.$refs.box.offsetWidth - this.col * hexagonWidth) / 2
+          this.boxPadTop = (this.$refs.box.offsetHeight - (hexagonHeight + (this.row - 1) * hexagonHeight * 3 / 4)) / 2 // 大于一行时 为一行的行高 + 3/2的行高
+        }
+        resolve()
+      })
+    },
+    getDataPoint () { // 确定所有坐标点的位置
+      const col = this.col// 确定列数
+      const row = this.row// 确定列数
+      const paddingTop = this.boxPadTop // 到上方的距离
+      const paddingLeft = this.boxPadLeft // 整体到左侧的距离
+      let arrIndex = 0
+      this.hexSize = this.MathSqrt3 * this.hexagonEdge / 2
+      for (let i = 0; i < row; i++) { // 确定 所有 坐标点
+        if (arrIndex > this.hexagonData.length - 1) {
+          break
+        }
+        for (let j = 0; j < col; j++) {
+          if (arrIndex > this.hexagonData.length - 1) {
             break
           }
-          for(let j=0; j<col; j++){
-            if(arrIndex>this.hexagonData.length-1){
+          if (i === 0) {
+            this.hexagonData[arrIndex].left = j * (this.hexSize * 2 + this.interspace) + paddingLeft
+            this.hexagonData[arrIndex].top = i * (this.hexSize * 2) + paddingTop
+            this.hexagonData[arrIndex].sub = i + '-' + j
+          } else if (i % 2 === 0) {
+            // if(i===2&&( j===1 || j==2)){
+            //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
+            //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
+            // }else{
+            //   continue;
+            // }
+            this.hexagonData[arrIndex].left = j * (this.hexSize * 2 + this.interspace) + paddingLeft
+            this.hexagonData[arrIndex].top = i * (this.hexSize * 2 + this.interspace / 2 * this.MathSqrt3 - this.hexSize * 2 / 8) + paddingTop
+            this.hexagonData[arrIndex].sub = i + '-' + j
+          } else {
+            if (j === col - 1) {
               break
             }
-            if(i===0){
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2)+paddingTop;
-              this.hexagonData[arrIndex].sub=i+'-'+j
-            }else if(i%2===0){
-              // if(i===2&&( j===1 || j==2)){
-              //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
-              //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
-              // }else{
-              //   continue;
-              // }
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
-              this.hexagonData[arrIndex].sub=i+'-'+j
-            }else{
-              if(j===col-1){
-                break
-              }
-              // if(i!==3){
-              //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
-              //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
-              // } else if(i==3&&(j===1)){
-              //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
-              //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
-              // }else{
-              //   continue;
-              // }
-              this.hexagonData[arrIndex].left=j*(this.hexSize*2+this.interspace)+this.hexSize*2/2+this.interspace/2+paddingLeft;
-              this.hexagonData[arrIndex].top=i*(this.hexSize*2+this.interspace/2*this.MathSqrt3-this.hexSize*2/8)+paddingTop;
-              this.hexagonData[arrIndex].sub=i+'-'+j
-            }
-            arrIndex++;
+            // if(i!==3){
+            //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
+            //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
+            // } else if(i==3&&(j===1)){
+            //   this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
+            //   this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
+            // }else{
+            //   continue;
+            // }
+            this.hexagonData[arrIndex].left = j * (this.hexSize * 2 + this.interspace) + this.hexSize * 2 / 2 + this.interspace / 2 + paddingLeft
+            this.hexagonData[arrIndex].top = i * (this.hexSize * 2 + this.interspace / 2 * this.MathSqrt3 - this.hexSize * 2 / 8) + paddingTop
+            this.hexagonData[arrIndex].sub = i + '-' + j
           }
+          arrIndex++
         }
-        this.renderSomeHexagonAll();
-      },
-      renderSomeHexagonAll(){// 遍历所有数据 绘画六边形 之后画边框
-        let arr=[]
-        this.hexagonData.forEach(item=>{
-          this.renderHexagon(item);
-          arr.push(this.renderHexagon.bind(this,item))
-        });
-        Promise.all(arr).then(()=>{
-          if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
-            this.borderHex();
-            getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate);
-            let hoverRect=getHexagon(this.hexagonSvgID).hexagonSvg.group().addClass('hoverRect');
-            hoverRect.rect();
-            hoverRect.text('a');
-            hoverRect.hide();
-            getHexagon(this.hexagonSvgID).hover=hoverRect;
-            setTimeout(()=>{
-              if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
-                this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox')
-              }
-              this.maskShow=false;
-            },300)
-          }
-        });
-      },
-      renderHexagon(item){ // 绘画六边形
-        return new Promise(resolve=>{
-          hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{
-            let color=this.colorSet?this.colorSet(item):this.defaultColor;
-            let group=getHexagon(this.hexagonSvgID).hexagonSvg.group();
-            let polygon=group.polygon(data.svgStrPoint).fill(color.color);
-            polygon.data({
-              ...data,
-              ...item,
-              ...color
-            });
-            group.on('mouseenter',this.hexagonOver.bind(this,group));
-            group.on('mouseleave',this.hexagonOut.bind(this,group));
-            group.on('click',this.changeScale.bind(this,polygon.data('center'),item,data,group));
-
-            this.allHexagon.push(polygon);
-            this.allGroup.push(group);
-            // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
-            if(this.infoSet){
-              this.infoSet(group,getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText,data,item,this.fontSize,this);
+      }
+      this.renderSomeHexagonAll()
+    },
+    renderSomeHexagonAll () { // 遍历所有数据 绘画六边形 之后画边框
+      const arr = []
+      this.hexagonData.forEach(item => {
+        this.renderHexagon(item)
+        arr.push(this.renderHexagon.bind(this, item))
+      })
+      Promise.all(arr).then(() => {
+        if (getHexagon(this.hexagonSvgID) && getHexagon(this.hexagonSvgID).hexagonSvg) {
+          this.borderHex()
+          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate)
+          const hoverRect = getHexagon(this.hexagonSvgID).hexagonSvg.group().addClass('hoverRect')
+          hoverRect.rect()
+          hoverRect.text('a')
+          hoverRect.hide()
+          getHexagon(this.hexagonSvgID).hover = hoverRect
+          setTimeout(() => {
+            if (getHexagon(this.hexagonSvgID) && getHexagon(this.hexagonSvgID).hexagonSvg) {
+              this.viewBox = getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox')
             }
-            resolve();
-          });
-        })
-      },
-      hexagonOver(that,e){// 移入六边形
-        let color=that.first().data('hoverColor');
-        that.first().timeline().unschedule(that.first().animate());
-        that.timeline().unschedule(that.first().animate());
-        that.first().animate(100).stroke({width:3,color:'#909090'}).fill(color);
-        that.animate(100).transform({scale:1.1});
-        that.parent().find('polyline').stroke({color:'#909090'});
-        let hover=that.parent().find('.hoverRect');
-
-        if(this.isShowHover&&hover&&this.from&&!this.showTooltip){//不显示气泡 显示基本信息
-          let center=that.first().data('center');
-          let str=this.from==='asset'?that.first().data('host'):that.first().data('module');
-          str+='';
-          hover.show();
-          hover.get(1).attr(
-            {
-              x:center[0]-(str.length*20+30)/2,
-              y:center[1]-this.hexagonEdge-76,
-            }
-          ).fill({ color: '#fff',weight:400}).text(str).font({size:36});
-          let textPaddingWidth=((str.length*20+30)-hover.get(1).bbox()[0].width)/2;
-          hover.get(1).attr(
-            {
-              x:center[0]-(str.length*20+30)/2+textPaddingWidth,
-              y:center[1]-this.hexagonEdge-76,
-            }
-          );
-          hover.get(0).attr(
-            {
-              x:center[0]-(str.length*20+30)/2,
-              y:center[1]-this.hexagonEdge-80,
-            }
-          ).fill({ color: `rgba(0,0,0,0.3)`}).size((str.length*20+30),72).attr({ rx:"10",ry:"10"});
+            this.maskShow = false
+          }, 300)
         }
-        if(this.isShowHover&&this.showTooltip){//显示气泡
-          this.$emit('changeAsset',that.first().data('id'),e)
-        }
-      },
-      hexagonMove(e){//六边形内移动
-        if(this.showTooltip){//显示气泡
-          this.$emit('assetMove',e)
-        }
-        // this.$emit('assetMove',e)
-      },
-      hexagonOut(that){// 移出六边形
-        let color=that.first().data('color');
-        that.first().timeline().unschedule(that.first().animate());
-        that.timeline().unschedule(that.first().animate());
-        that.first().animate(100).stroke({width:0,color:'#909090'}).fill(color);
-        that.animate(100).transform({scale:1});
-        that.parent().find('polyline').stroke({color:'#DADADA'});
-        let hover=that.parent().find('.hoverRect');
-        if(hover&&!this.showTooltip){//不显示气泡 显示基本信息
-          hover.hide();
-        }
-        if(this.showTooltip){//显示气泡
-          this.$emit('closeAsset')
-        }
-      },
-      changeScale(center,item1,data,group,e){
-        window.event? window.event.cancelBubble = true:e.stopPropagation();
-        if(this.scaleFlag){
-          this.hexagonSvgScale(center,item1,data,group,e);
-        }else{
-          this.hexagonSvgClearScale(e)
-        }
-
-      },
-      hexagonSvgScale(center,item1,data,group,e){
-        window.event? window.event.cancelBubble = true:e.stopPropagation();
-        this.$emit('closeAsset');
-        if(this.timer){
-          clearTimeout(this.timer);
-          this.timer=null;
-        }
-        this.group=group;
-        // this.group.on('dblclick',this.hexagonSvgClearScale);
-        if(!this.pan&&this.isClickRate){
-          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate,{x:center[0],y:center[1]});
-          if(this.infoShow){
-            this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
-          }
-          this.isShowHover=false;
-          this.scaleFlag=false;
-        }
-        let hover=getHexagon(this.hexagonSvgID).hexagonSvg.find('.hoverRect');
-        if(hover){
-          hover.hide();
-        }
-      },
-      hexagonSvgClearScale(e){
-        // window.event? window.event.cancelBubble = true:e.stopPropagation();
-        if(this.firstInit){return}
-        if(this.group){
-          // this.group.off('dblclick',this.hexagonSvgClearScale);
-          this.group=null;
-        }
-        if(!this.pan&&this.isClickRate){
-          getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate).attr('viewBox',this.viewBox);
-          this.scaleFlag=true;
-          if(this.infoHide){
-            this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect,getHexagon(this.hexagonSvgID).allHexagonText)
-          }
-          this.timer=setTimeout(()=>{
-            this.isShowHover=true;
-          },100)
-          window.getSelection().empty();//取消选中文字
-        }
-      },
-      hexColorToRgb(color){
-        let reg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-        // 把颜色值变成小写
-        if(reg.test(color)){
-          // 如果只有三位的值，需变成六位，如：#fff => #ffffff
-          if(color.length===4){
-            let colorNew="#";
-            for(let i=1; i<4; i+=1){
-              colorNew+=color.slice(i,i+1).concat(color.slice(i,i+1));
-            }
-            color=colorNew;
-          }
-          // 处理六位的颜色值，转为RGB
-          let colorChange=[];
-          for(let i=1; i<7; i+=2){
-            colorChange.push(parseInt("0x"+color.slice(i,i+2)));
-          }
-          return colorChange.join(",");
-        }else{
-          return color;
-        }
-      },
-      hexagonSvgPanStart(ev){ // 实例移动开始 解绑点击函数
-        ev.preventDefault();
-        setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
-          this.pan=true;
-        },100)
-      },
-      hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数
-        ev.preventDefault();
-        setTimeout(()=>{ // 设置延时 解决移动后的缩放问题
-          this.pan=false;
-        },100)
-        // if(this.isShowHover&&getHexagon(this.hexagonSvgID).hexagonSvg){ // 记录移动位置 对双击事件有一定影响 暂时关闭 后续优化
-        //   this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox');
-        // }
-      },
-      borderHex(){//外层边框 数组点
-        let length=this.allHexagon.length;
-        if(length==0){//为0 调出
-          return
-        }
-        let k={x:-this.interspace,y:-(this.interspace*2)*this.MathSqrt3/6};//边框对起点的偏移量
-        let item=this.allHexagon[0].data('point')[0];
-        let endItemSub=this.allHexagon[length-1].data('sub').split('-');
-        let borderCol=endItemSub[1];
-        let borderRow=endItemSub[0];
-        let borderPoint=[item.x+k.x,item.y+k.y];
-        let borderSize=this.hexagonEdge*1.2;
-        getHexagon(this.hexagonSvgID).svgPolyline.plot([borderPoint]);
-        //先从左到右划线 应该是 col的长度
-        let borderColTop=0;
-        if(borderRow==0){
-          borderColTop=borderCol;
-        }else{
-          borderColTop=this.col-1;
-        }
-        for(let i=0; i<=borderColTop*2; i++){
-          if(i===1){
-            borderSize=this.hexagonEdge*1.1
-          }
-          if(i%2===0){
-            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
-          }else{
-            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-          }
-        }
-        borderSize=this.hexagonEdge*1.2
-        // 从上到下 应该是row的长度 分情况
-        let borderRowRight=0;//右边循环次数
-        // 情况1 borderCol<=this.col && row==0时
-        if((borderCol<=this.col-1)&&borderRow==0){
-          borderRowRight=3;
-          for(let i=0; i<borderRowRight-1; i++){
-            if(i===1){
-              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-              borderSize=this.hexagonEdge*1.2
-            }
-            if(i===2){
-              // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-              borderSize=this.hexagonEdge*1.1
-            }
-            if(i%4===0){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-        }
-        // 情况2 border==this.col&& row>0时 且row 为奇数事
-        if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){
-          borderRowRight=2*(Number(borderRow)+1);
-          for(let i=0; i<borderRowRight; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.1;
-              if(i==0){
-                borderSize=this.hexagonEdge*1.2;
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.2;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.03;
-              if(i===borderRowRight-1){
-                borderSize=this.hexagonEdge*1.1;
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-        }
-        // 情况3 borderCol==this.col && row>0 且 row 为偶数事
-        if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){
-          borderRowRight=2*(Number(borderRow)+1)+1;
-          for(let i=0; i<borderRowRight-1; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.1
-              if(i==0){
-                borderSize=this.hexagonEdge*1.2
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.2;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.03;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-        }
-        // 情况4 border<this.col&& row>0时 且row 为奇数事
-        if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){
-          borderRowRight=2*(Number(borderRow-1)+1);
-          for(let i=0; i<borderRowRight; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.1
-              if(i==0){
-                borderSize=this.hexagonEdge*1.2
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.2;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.03;
-              if(i===borderRowRight-1){
-                borderSize=this.hexagonEdge*1.1;
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }//向下移动
-          borderSize=this.hexagonEdge*1.2
-          for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
-            if(i===1){
-              borderSize=this.hexagonEdge*1.1
-            }
-            if(i==(this.col-borderCol-1)*2-2){
-              borderSize=this.hexagonEdge
-            }
-            if(i%2===0){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else{
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-          borderSize=this.hexagonEdge*1.1
-          borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-        }
-        // 情况5 borderCol<this.col && row>0 且 row 为偶数事
-        if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){
-          borderRowRight=2*(Number(borderRow-1)+1)+1;
-          for(let i=0; i<borderRowRight-1; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.1
-              if(i==0){
-                borderSize=this.hexagonEdge*1.2
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,2,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.2;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.03;
-              if(i===borderRowRight-2){
-                borderSize=this.hexagonEdge*1.15;
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-          borderSize=this.hexagonEdge*1.2
-          for(let i=0; i<(this.col-borderCol-1)*2-1; i++){//向左移动
-            if(i==1){
-              borderSize=this.hexagonEdge*1.1
-            }
-            if(i==(this.col-borderCol-1)*2-2){
-              borderSize=this.hexagonEdge*1
-            }
-            if(((Number(borderCol)+2)==this.col)&&(i==0)){
-              borderSize=this.hexagonEdge*1.1
-            }
-            if(i%2===0){
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else{
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-          borderSize=this.hexagonEdge*1.1
-          borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,3,getHexagon(this.hexagonSvgID).svgPolyline);
-        }
-        // 从右到左 就是结束时的列数
-        borderSize=this.hexagonEdge*1.2
-        for(let i=0; i<=borderCol*2+1; i++){
-          if(i===1){
-            // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
-            borderSize=this.hexagonEdge*1.1
-          }
-          if(i==borderCol*2+1){
-            borderSize=this.hexagonEdge*1.2
-          }
-          if(i%2===0){
-            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,4,getHexagon(this.hexagonSvgID).svgPolyline);
-          }else{
-            borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
-          }
-        }
-        // 从下向上的移动
-        // 分兩種情況
-        borderSize=this.hexagonEdge*1.2;
-        if(borderRow%2==1){
-          for(let i=0; i<=borderRow*2; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.1;
-              if(i!==0){
-                borderSize=this.hexagonEdge*1.03;
-              }
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.2;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-        }
-        if(borderRow%2==0){
-          for(let i=0; i<=borderRow*2; i++){
-            if(i%4===0){
-              borderSize=this.hexagonEdge*1.2
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===1){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,1,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===2){
-              borderSize=this.hexagonEdge*1.03;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,6,getHexagon(this.hexagonSvgID).svgPolyline);
-            }else if(i%4===3){
-              borderSize=this.hexagonEdge*1.1;
-              borderPoint=borderMove(borderPoint[0],borderPoint[1],borderSize,5,getHexagon(this.hexagonSvgID).svgPolyline);
-            }
-          }
-        }
-
-
-        getHexagon(this.hexagonSvgID).svgPolyline.on('mouseover',PolylineOver)
-        getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout',PolylineOut);
-      },
-      clearData(){// 清除数据 以及解绑事件 防止内存崩溃
-        if(getHexagon(this.hexagonSvgID)&&getHexagon(this.hexagonSvgID).hexagonSvg){
-          this.allHexagon.forEach((item)=>{
-            item.off('mouseover',this.hexagonOver);
-            item.off('mouseout',this.hexagonOut);
-            item.off('click',this.changeScale);
-            // item.off('dblclick',this.hexagonSvgClearScale);
-            item.clear();
+      })
+    },
+    renderHexagon (item) { // 绘画六边形
+      return new Promise(resolve => {
+        hexagonPoint(item.left, item.top, this.hexagonEdge).then(data => {
+          const color = this.colorSet ? this.colorSet(item) : this.defaultColor
+          const group = getHexagon(this.hexagonSvgID).hexagonSvg.group()
+          const polygon = group.polygon(data.svgStrPoint).fill(color.color)
+          polygon.data({
+            ...data,
+            ...item,
+            ...color
           })
-          this.allHexagon=[];
-          this.hexagonData=[];
-          getHexagon(this.hexagonSvgID).hexagonSvg.off('click',this.hexagonSvgClearScale);
-          getHexagon(this.hexagonSvgID).hexagonSvg.off('mouseover',this.hexagonMove);
-          getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart',this.hexagonSvgPanStart);
-          getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd',this.hexagonSvgPanEnd);
-          getHexagon(this.hexagonSvgID).hexagonSvg=null;  //Svg的实例
-          getHexagon(this.hexagonSvgID).svgPolyline=null;// Svg hexagon的边框
-          delHexagon(this.hexagonSvgID)
-        }
-        return new Promise(resolve=>{
+          group.on('mouseenter', this.hexagonOver.bind(this, group))
+          group.on('mouseleave', this.hexagonOut.bind(this, group))
+          group.on('click', this.changeScale.bind(this, polygon.data('center'), item, data, group))
+
+          this.allHexagon.push(polygon)
+          this.allGroup.push(group)
+          // 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
+          if (this.infoSet) {
+            this.infoSet(group, getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText, data, item, this.fontSize, this)
+          }
           resolve()
         })
-      },
-
+      })
     },
-    beforeDestroy(){
-      this.clearData();
-      if(getHexagon(this.hexagonSvgID)){
-        getHexagon(this.hexagonSvgID).allHexagonRect=null;//文本框
-        getHexagon(this.hexagonSvgID).allHexagonText=null;// 文本内容
+    hexagonOver (that, e) { // 移入六边形
+      const color = that.first().data('hoverColor')
+      that.first().timeline().unschedule(that.first().animate())
+      that.timeline().unschedule(that.first().animate())
+      that.first().animate(100).stroke({ width: 3, color: '#909090' }).fill(color)
+      that.animate(100).transform({ scale: 1.1 })
+      that.parent().find('polyline').stroke({ color: '#909090' })
+      const hover = that.parent().find('.hoverRect')
+
+      if (this.isShowHover && hover && this.from && !this.showTooltip) { // 不显示气泡 显示基本信息
+        const center = that.first().data('center')
+        let str = this.from === 'asset' ? that.first().data('host') : that.first().data('module')
+        str += ''
+        hover.show()
+        hover.get(1).attr(
+          {
+            x: center[0] - (str.length * 20 + 30) / 2,
+            y: center[1] - this.hexagonEdge - 76
+          }
+        ).fill({ color: '#fff', weight: 400 }).text(str).font({ size: 36 })
+        const textPaddingWidth = ((str.length * 20 + 30) - hover.get(1).bbox()[0].width) / 2
+        hover.get(1).attr(
+          {
+            x: center[0] - (str.length * 20 + 30) / 2 + textPaddingWidth,
+            y: center[1] - this.hexagonEdge - 76
+          }
+        )
+        hover.get(0).attr(
+          {
+            x: center[0] - (str.length * 20 + 30) / 2,
+            y: center[1] - this.hexagonEdge - 80
+          }
+        ).fill({ color: 'rgba(0,0,0,0.3)' }).size((str.length * 20 + 30), 72).attr({ rx: '10', ry: '10' })
       }
-      window.removeEventListener("visibilitychange",this.reload);
-      // clearTimeout(this.timer)
+      if (this.isShowHover && this.showTooltip) { // 显示气泡
+        this.$emit('changeAsset', that.first().data('id'), e)
+      }
+    },
+    hexagonMove (e) { // 六边形内移动
+      if (this.showTooltip) { // 显示气泡
+        this.$emit('assetMove', e)
+      }
+      // this.$emit('assetMove',e)
+    },
+    hexagonOut (that) { // 移出六边形
+      const color = that.first().data('color')
+      that.first().timeline().unschedule(that.first().animate())
+      that.timeline().unschedule(that.first().animate())
+      that.first().animate(100).stroke({ width: 0, color: '#909090' }).fill(color)
+      that.animate(100).transform({ scale: 1 })
+      that.parent().find('polyline').stroke({ color: '#DADADA' })
+      const hover = that.parent().find('.hoverRect')
+      if (hover && !this.showTooltip) { // 不显示气泡 显示基本信息
+        hover.hide()
+      }
+      if (this.showTooltip) { // 显示气泡
+        this.$emit('closeAsset')
+      }
+    },
+    changeScale (center, item1, data, group, e) {
+      window.event ? window.event.cancelBubble = true : e.stopPropagation()
+      if (this.scaleFlag) {
+        this.hexagonSvgScale(center, item1, data, group, e)
+      } else {
+        this.hexagonSvgClearScale(e)
+      }
+    },
+    hexagonSvgScale (center, item1, data, group, e) {
+      window.event ? window.event.cancelBubble = true : e.stopPropagation()
+      this.$emit('closeAsset')
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      this.group = group
+      // this.group.on('dblclick',this.hexagonSvgClearScale);
+      if (!this.pan && this.isClickRate) {
+        getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.magnifyRate, { x: center[0], y: center[1] })
+        if (this.infoShow) {
+          this.infoShow(getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText)
+        }
+        this.isShowHover = false
+        this.scaleFlag = false
+      }
+      const hover = getHexagon(this.hexagonSvgID).hexagonSvg.find('.hoverRect')
+      if (hover) {
+        hover.hide()
+      }
+    },
+    hexagonSvgClearScale (e) {
+      // window.event? window.event.cancelBubble = true:e.stopPropagation();
+      if (this.firstInit) { return }
+      if (this.group) {
+        // this.group.off('dblclick',this.hexagonSvgClearScale);
+        this.group = null
+      }
+      if (!this.pan && this.isClickRate) {
+        getHexagon(this.hexagonSvgID).hexagonSvg.animate(300).zoom(this.defaultRate).attr('viewBox', this.viewBox)
+        this.scaleFlag = true
+        if (this.infoHide) {
+          this.infoHide(getHexagon(this.hexagonSvgID).allHexagonRect, getHexagon(this.hexagonSvgID).allHexagonText)
+        }
+        this.timer = setTimeout(() => {
+          this.isShowHover = true
+        }, 100)
+        window.getSelection().empty()// 取消选中文字
+      }
+    },
+    hexColorToRgb (color) {
+      const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+      // 把颜色值变成小写
+      if (reg.test(color)) {
+        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+        if (color.length === 4) {
+          let colorNew = '#'
+          for (let i = 1; i < 4; i += 1) {
+            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+          }
+          color = colorNew
+        }
+        // 处理六位的颜色值，转为RGB
+        const colorChange = []
+        for (let i = 1; i < 7; i += 2) {
+          colorChange.push(parseInt('0x' + color.slice(i, i + 2)))
+        }
+        return colorChange.join(',')
+      } else {
+        return color
+      }
+    },
+    hexagonSvgPanStart (ev) { // 实例移动开始 解绑点击函数
+      ev.preventDefault()
+      setTimeout(() => { // 设置延时 解决移动后的缩放问题
+        this.pan = true
+      }, 100)
+    },
+    hexagonSvgPanEnd (ev) { // 实例移动结束 重新绑定点击函数
+      ev.preventDefault()
+      setTimeout(() => { // 设置延时 解决移动后的缩放问题
+        this.pan = false
+      }, 100)
+      // if(this.isShowHover&&getHexagon(this.hexagonSvgID).hexagonSvg){ // 记录移动位置 对双击事件有一定影响 暂时关闭 后续优化
+      //   this.viewBox=getHexagon(this.hexagonSvgID).hexagonSvg.attr('viewBox');
+      // }
+    },
+    borderHex () { // 外层边框 数组点
+      const length = this.allHexagon.length
+      if (length == 0) { // 为0 调出
+        return
+      }
+      const k = { x: -this.interspace, y: -(this.interspace * 2) * this.MathSqrt3 / 6 }// 边框对起点的偏移量
+      const item = this.allHexagon[0].data('point')[0]
+      const endItemSub = this.allHexagon[length - 1].data('sub').split('-')
+      const borderCol = endItemSub[1]
+      const borderRow = endItemSub[0]
+      let borderPoint = [item.x + k.x, item.y + k.y]
+      let borderSize = this.hexagonEdge * 1.2
+      getHexagon(this.hexagonSvgID).svgPolyline.plot([borderPoint])
+      // 先从左到右划线 应该是 col的长度
+      let borderColTop = 0
+      if (borderRow == 0) {
+        borderColTop = borderCol
+      } else {
+        borderColTop = this.col - 1
+      }
+      for (let i = 0; i <= borderColTop * 2; i++) {
+        if (i === 1) {
+          borderSize = this.hexagonEdge * 1.1
+        }
+        if (i % 2 === 0) {
+          borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 1, getHexagon(this.hexagonSvgID).svgPolyline)
+        } else {
+          borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+        }
+      }
+      borderSize = this.hexagonEdge * 1.2
+      // 从上到下 应该是row的长度 分情况
+      let borderRowRight = 0// 右边循环次数
+      // 情况1 borderCol<=this.col && row==0时
+      if ((borderCol <= this.col - 1) && borderRow == 0) {
+        borderRowRight = 3
+        for (let i = 0; i < borderRowRight - 1; i++) {
+          if (i === 1) {
+            // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
+            borderSize = this.hexagonEdge * 1.2
+          }
+          if (i === 2) {
+            // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
+            borderSize = this.hexagonEdge * 1.1
+          }
+          if (i % 4 === 0) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+      }
+      // 情况2 border==this.col&& row>0时 且row 为奇数事
+      if (borderCol == this.col - 2 && borderRow > 0 && borderRow % 2 == 1) {
+        borderRowRight = 2 * (Number(borderRow) + 1)
+        for (let i = 0; i < borderRowRight; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.1
+            if (i == 0) {
+              borderSize = this.hexagonEdge * 1.2
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.03
+            if (i === borderRowRight - 1) {
+              borderSize = this.hexagonEdge * 1.1
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+      }
+      // 情况3 borderCol==this.col && row>0 且 row 为偶数事
+      if (borderCol == this.col - 1 && borderRow > 0 && borderRow % 2 == 0) {
+        borderRowRight = 2 * (Number(borderRow) + 1) + 1
+        for (let i = 0; i < borderRowRight - 1; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.1
+            if (i == 0) {
+              borderSize = this.hexagonEdge * 1.2
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.03
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+      }
+      // 情况4 border<this.col&& row>0时 且row 为奇数事
+      if (borderCol < this.col - 2 && borderRow > 0 && borderRow % 2 == 1) {
+        borderRowRight = 2 * (Number(borderRow - 1) + 1)
+        for (let i = 0; i < borderRowRight; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.1
+            if (i == 0) {
+              borderSize = this.hexagonEdge * 1.2
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.03
+            if (i === borderRowRight - 1) {
+              borderSize = this.hexagonEdge * 1.1
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }// 向下移动
+        borderSize = this.hexagonEdge * 1.2
+        for (let i = 0; i < (this.col - borderCol - 1) * 2 - 1; i++) { // 向左移动
+          if (i === 1) {
+            borderSize = this.hexagonEdge * 1.1
+          }
+          if (i == (this.col - borderCol - 1) * 2 - 2) {
+            borderSize = this.hexagonEdge
+          }
+          if (i % 2 === 0) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 5, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+        borderSize = this.hexagonEdge * 1.1
+        borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+      }
+      // 情况5 borderCol<this.col && row>0 且 row 为偶数事
+      if (borderCol < this.col - 1 && borderRow > 0 && borderRow % 2 == 0) {
+        borderRowRight = 2 * (Number(borderRow - 1) + 1) + 1
+        for (let i = 0; i < borderRowRight - 1; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.1
+            if (i == 0) {
+              borderSize = this.hexagonEdge * 1.2
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 2, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.03
+            if (i === borderRowRight - 2) {
+              borderSize = this.hexagonEdge * 1.15
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+        borderSize = this.hexagonEdge * 1.2
+        for (let i = 0; i < (this.col - borderCol - 1) * 2 - 1; i++) { // 向左移动
+          if (i == 1) {
+            borderSize = this.hexagonEdge * 1.1
+          }
+          if (i == (this.col - borderCol - 1) * 2 - 2) {
+            borderSize = this.hexagonEdge * 1
+          }
+          if (((Number(borderCol) + 2) == this.col) && (i == 0)) {
+            borderSize = this.hexagonEdge * 1.1
+          }
+          if (i % 2 === 0) {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else {
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 5, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+        borderSize = this.hexagonEdge * 1.1
+        borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 3, getHexagon(this.hexagonSvgID).svgPolyline)
+      }
+      // 从右到左 就是结束时的列数
+      borderSize = this.hexagonEdge * 1.2
+      for (let i = 0; i <= borderCol * 2 + 1; i++) {
+        if (i === 1) {
+          // borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,,getHexagon(this.hexagonSvgID).svgPolylinetrue);
+          borderSize = this.hexagonEdge * 1.1
+        }
+        if (i == borderCol * 2 + 1) {
+          borderSize = this.hexagonEdge * 1.2
+        }
+        if (i % 2 === 0) {
+          borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 4, getHexagon(this.hexagonSvgID).svgPolyline)
+        } else {
+          borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 5, getHexagon(this.hexagonSvgID).svgPolyline)
+        }
+      }
+      // 从下向上的移动
+      // 分兩種情況
+      borderSize = this.hexagonEdge * 1.2
+      if (borderRow % 2 == 1) {
+        for (let i = 0; i <= borderRow * 2; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.1
+            if (i !== 0) {
+              borderSize = this.hexagonEdge * 1.03
+            }
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 6, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 5, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 6, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 1, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+      }
+      if (borderRow % 2 == 0) {
+        for (let i = 0; i <= borderRow * 2; i++) {
+          if (i % 4 === 0) {
+            borderSize = this.hexagonEdge * 1.2
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 6, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 1) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 1, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 2) {
+            borderSize = this.hexagonEdge * 1.03
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 6, getHexagon(this.hexagonSvgID).svgPolyline)
+          } else if (i % 4 === 3) {
+            borderSize = this.hexagonEdge * 1.1
+            borderPoint = borderMove(borderPoint[0], borderPoint[1], borderSize, 5, getHexagon(this.hexagonSvgID).svgPolyline)
+          }
+        }
+      }
+
+      getHexagon(this.hexagonSvgID).svgPolyline.on('mouseover', PolylineOver)
+      getHexagon(this.hexagonSvgID).svgPolyline.on('mouseout', PolylineOut)
+    },
+    clearData () { // 清除数据 以及解绑事件 防止内存崩溃
+      if (getHexagon(this.hexagonSvgID) && getHexagon(this.hexagonSvgID).hexagonSvg) {
+        this.allHexagon.forEach((item) => {
+          item.off('mouseover', this.hexagonOver)
+          item.off('mouseout', this.hexagonOut)
+          item.off('click', this.changeScale)
+          // item.off('dblclick',this.hexagonSvgClearScale);
+          item.clear()
+        })
+        this.allHexagon = []
+        this.hexagonData = []
+        getHexagon(this.hexagonSvgID).hexagonSvg.off('click', this.hexagonSvgClearScale)
+        getHexagon(this.hexagonSvgID).hexagonSvg.off('mouseover', this.hexagonMove)
+        getHexagon(this.hexagonSvgID).hexagonSvg.off('panStart', this.hexagonSvgPanStart)
+        getHexagon(this.hexagonSvgID).hexagonSvg.off('panEnd', this.hexagonSvgPanEnd)
+        getHexagon(this.hexagonSvgID).hexagonSvg = null // Svg的实例
+        getHexagon(this.hexagonSvgID).svgPolyline = null// Svg hexagon的边框
+        delHexagon(this.hexagonSvgID)
+      }
+      return new Promise(resolve => {
+        resolve()
+      })
     }
+
+  },
+  beforeDestroy () {
+    this.clearData()
+    if (getHexagon(this.hexagonSvgID)) {
+      getHexagon(this.hexagonSvgID).allHexagonRect = null// 文本框
+      getHexagon(this.hexagonSvgID).allHexagonText = null// 文本内容
+    }
+    window.removeEventListener('visibilitychange', this.reload)
+    // clearTimeout(this.timer)
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/i18n.js b/nezha-fronted/src/components/common/i18n.js
index ad425df51..9fb820f06 100644
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -1,13 +1,13 @@
 import Vue from 'vue'
-import locale from 'element-ui/lib/locale';
+import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './language'
 Vue.use(VueI18n)
-//从localStorage获取语言选择。
+// 从localStorage获取语言选择。
 const i18n = new VueI18n({
-  locale: localStorage.getItem('nz-language') || 'en', //初始未选择默认 en 英文
-  messages,
+  locale: localStorage.getItem('nz-language') || 'en', // 初始未选择默认 en 英文
+  messages
 })
-locale.i18n((key, value) => i18n.t(key, value)) //兼容element
+locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
 
 export default i18n
diff --git a/nezha-fronted/src/components/common/js/Xterm.js b/nezha-fronted/src/components/common/js/Xterm.js
index e98c9f783..a0a528fdb 100644
--- a/nezha-fronted/src/components/common/js/Xterm.js
+++ b/nezha-fronted/src/components/common/js/Xterm.js
@@ -1,10 +1,10 @@
 import { Terminal } from 'xterm'
 import * as fit from 'xterm/lib/addons/fit/fit'
 import * as attach from 'xterm/lib/addons/attach/attach'
-//import 'xterm/dist/addons/fullscreen/fullscreen.css'
-//import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen'
+// import 'xterm/dist/addons/fullscreen/fullscreen.css'
+// import * as fullscreen from 'xterm/lib/addons/fullscreen/fullscreen'
 Terminal.applyAddon(fit)
 Terminal.applyAddon(attach)
-//Terminal.applyAddon(fullscreen);
+// Terminal.applyAddon(fullscreen);
 
 export default Terminal
diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js
index 12f03105c..e4e812903 100644
--- a/nezha-fronted/src/components/common/js/common.js
+++ b/nezha-fronted/src/components/common/js/common.js
@@ -1,63 +1,62 @@
-export function resetZIndex(e){
-  let popId=e.target.getAttribute('aria-describedby');//这里获取的属性 在包含slot='reference'
-  if(!popId){
-    popId=e.target.parentNode.getAttribute('aria-describedby');
+export function resetZIndex (e) {
+  let popId = e.target.getAttribute('aria-describedby')// 这里获取的属性 在包含slot='reference'
+  if (!popId) {
+    popId = e.target.parentNode.getAttribute('aria-describedby')
   }
-  let pop=document.getElementById(popId);
-  setTimeout(function(){
-    pop.style.zIndex=999999;
-  },100)
+  const pop = document.getElementById(popId)
+  setTimeout(function () {
+    pop.style.zIndex = 999999
+  }, 100)
 }
-export function getUUID(){
-  function S4() {
-    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+export function getUUID () {
+  function S4 () {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
   }
 
-  return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+  return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
 }
 
-const chartCache = {};
+const chartCache = {}
 
-export function getChart(key) {
-  return chartCache[`chart${key}`];
+export function getChart (key) {
+  return chartCache[`chart${key}`]
 }
 
-export function setChart(key, value) {
-  chartCache[`chart${key}`] = value;
+export function setChart (key, value) {
+  chartCache[`chart${key}`] = value
 }
-const hexagonCache = {};
-export function getHexagon(key) {
-  return hexagonCache[`hexagon${key}`];
+const hexagonCache = {}
+export function getHexagon (key) {
+  return hexagonCache[`hexagon${key}`]
 }
 
-const topologyCache = {};
+const topologyCache = {}
 
-export function getTopology(key) {
-  return topologyCache[`topology${key}`];
+export function getTopology (key) {
+  return topologyCache[`topology${key}`]
 }
 
-export function setTopology(key, value) {
-  topologyCache[`topology${key}`] = value;
+export function setTopology (key, value) {
+  topologyCache[`topology${key}`] = value
 }
 
-
-export function setHexagon(key, value) {
-  hexagonCache[`hexagon${key}`] = value;
+export function setHexagon (key, value) {
+  hexagonCache[`hexagon${key}`] = value
 }
-export function delHexagon(key) {
-  delete  hexagonCache[`hexagon${key}`];
+export function delHexagon (key) {
+  delete hexagonCache[`hexagon${key}`]
 }
-const mousePoint={ //在echart tooltip中获取不到鼠标在窗口的位置，在火狐没有window。event 在此兼容火狐 获取鼠标在窗口位置
-  x:'',
-  y:''
-};
-
-export function lineChartMove(e){
-  let event=e|| window.event;
-  mousePoint.x=event.pageX;
-  mousePoint.y=event.pageY;
+const mousePoint = { // 在echart tooltip中获取不到鼠标在窗口的位置，在火狐没有window。event 在此兼容火狐 获取鼠标在窗口位置
+  x: '',
+  y: ''
 }
 
-export function getMousePoint(){
+export function lineChartMove (e) {
+  const event = e || window.event
+  mousePoint.x = event.pageX
+  mousePoint.y = event.pageY
+}
+
+export function getMousePoint () {
   return mousePoint
 }
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index f6e550150..bbab43990 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -1,153 +1,153 @@
-import i18n from "../i18n";
+import i18n from '../i18n'
 
-export const defaultPageSize = 20;
+export const defaultPageSize = 20
 
 export const staticMenus = {
   settings: {
     title: i18n.t('overall.config'),
     menu: [
-      {route: '/account', name: i18n.t('config.account.account')},
-      {route: '/roles', name: i18n.t('config.roles.roles')},
-      {route: '/promServer', name: i18n.t('config.promServer.promServerList')},
-      {route: '/dc', name: i18n.t('config.dc.dc')},
-      {route: '/model', name: i18n.t('config.model.model')},
-      {route: '/mib', name: i18n.t('config.mib.mib')},
-      {route: '/system', name: i18n.t('config.system.system')},
-      {route: '/terminalLog', name: i18n.t('config.terminallog.terminallog')},
-      {route: '/operationLog', name: i18n.t('config.operationlog.operationlog')},
-      {route: '/about', name: i18n.t('overall.about')},
-    ],
+      { route: '/account', name: i18n.t('config.account.account') },
+      { route: '/roles', name: i18n.t('config.roles.roles') },
+      { route: '/promServer', name: i18n.t('config.promServer.promServerList') },
+      { route: '/dc', name: i18n.t('config.dc.dc') },
+      { route: '/model', name: i18n.t('config.model.model') },
+      { route: '/mib', name: i18n.t('config.mib.mib') },
+      { route: '/system', name: i18n.t('config.system.system') },
+      { route: '/terminalLog', name: i18n.t('config.terminallog.terminallog') },
+      { route: '/operationLog', name: i18n.t('config.operationlog.operationlog') },
+      { route: '/about', name: i18n.t('overall.about') }
+    ]
   },
   alerts: {
     title: i18n.t('alert.alert'),
-      menu: [
-      {route: '/alertList', name: i18n.t('alert.alertList')},
-      {route: '/alertConfig', name: i18n.t('alert.alertConfig')},
-    ],
+    menu: [
+      { route: '/alertList', name: i18n.t('alert.alertList') },
+      { route: '/alertConfig', name: i18n.t('alert.alertConfig') }
+    ]
   },
   dashboards: {
     title: i18n.t('dashboard.title'),
-      menu: [
-      {route: '/overview', name: i18n.t('dashboard.overview.title')},
-      {route: '/panel', name: i18n.t('dashboard.panel.title')},
-      {route: '/explore', name: i18n.t('dashboard.metricPreview.title')},
-    ],
-  },
-};
+    menu: [
+      { route: '/overview', name: i18n.t('dashboard.overview.title') },
+      { route: '/panel', name: i18n.t('dashboard.panel.title') },
+      { route: '/explore', name: i18n.t('dashboard.metricPreview.title') }
+    ]
+  }
+}
 
 export const promServer = {
-  theData:[
+  theData: [
     {
-      label:'Federation',
-      value:'federation',
-      children:[
+      label: 'Federation',
+      value: 'federation',
+      children: [
         {
-          label:'Global',
-          value:1,
-          text:'Global',
+          label: 'Global',
+          value: 1,
+          text: 'Global'
         },
         {
-          label:'Per-datacenter',
-          value:2,
-          text:'Per-datacenter',
+          label: 'Per-datacenter',
+          value: 2,
+          text: 'Per-datacenter'
         }
       ]
     },
     {
-      label:'Thanos',
-      value:'Thanos',
-      children:[
+      label: 'Thanos',
+      value: 'Thanos',
+      children: [
         {
-          label:'Query',
-          value:3,
-          text:'Thanos-Query'
+          label: 'Query',
+          value: 3,
+          text: 'Thanos-Query'
         },
         {
-          label:'Rule',
-          value:4,
-          text:'Thanos-Rule'
+          label: 'Rule',
+          value: 4,
+          text: 'Thanos-Rule'
         },
         {
-          label:'Sidecar',
-          value:5,
-          text:'Thanos-Sidecar'
+          label: 'Sidecar',
+          value: 5,
+          text: 'Thanos-Sidecar'
         },
         {
-          label:'Store',
-          value:6,
-          text:'Thanos-Store'
+          label: 'Store',
+          value: 6,
+          text: 'Thanos-Store'
         },
         {
-          label:'Compactor',
-          value:7,
-          text:'Thanos-Compactor'
+          label: 'Compactor',
+          value: 7,
+          text: 'Thanos-Compactor'
         }
       ]
     }
   ]
 
-};
+}
 
 export const asset = {
   pingData: [
-    {value: 1, label: 'up'},
-    {value: 0, label: 'down'},
+    { value: 1, label: 'up' },
+    { value: 0, label: 'down' }
   ],
   stateData: [
-    {value: 1, label: i18n.t('asset.inStock')},
-    {value: 2, label: i18n.t('asset.notInStock')},
-    {value: 3, label: i18n.t('asset.suspended')},
-  ],
-};
+    { value: 1, label: i18n.t('asset.inStock') },
+    { value: 2, label: i18n.t('asset.notInStock') },
+    { value: 3, label: i18n.t('asset.suspended') }
+  ]
+}
 
 export const alertMessage = {
   severityData: [
-    {value: 'P1', label: i18n.t("alert.config.P1")},
-    {value: 'P2', label: i18n.t("alert.config.P2")},
-    {value: 'P3', label: i18n.t("alert.config.P3")}
+    { value: 'P1', label: i18n.t('alert.config.P1') },
+    { value: 'P2', label: i18n.t('alert.config.P2') },
+    { value: 'P3', label: i18n.t('alert.config.P3') }
   ],
   typeData: [
-    {value: 1, label: i18n.t('alert.config.typeOption.project')},
-    {value: 2, label: i18n.t('alert.config.typeOption.module')},
-    {value: 3, label: i18n.t('alert.config.typeOption.asset')}
+    { value: 1, label: i18n.t('alert.config.typeOption.project') },
+    { value: 2, label: i18n.t('alert.config.typeOption.module') },
+    { value: 3, label: i18n.t('alert.config.typeOption.asset') }
   ],
-  levels:[
-    {value: 'P1', label: i18n.t("alert.config.P1")},
-    {value: 'P2', label: i18n.t("alert.config.P2")},
-    {value: 'P3', label: i18n.t("alert.config.P3")}
+  levels: [
+    { value: 'P1', label: i18n.t('alert.config.P1') },
+    { value: 'P2', label: i18n.t('alert.config.P2') },
+    { value: 'P3', label: i18n.t('alert.config.P3') }
   ],
-  states:[
-    {value: '1', label: i18n.t('alert.list.pending')},
-    {value: '2', label: i18n.t('alert.list.expired')}
-  ],
-};
+  states: [
+    { value: '1', label: i18n.t('alert.list.pending') },
+    { value: '2', label: i18n.t('alert.list.expired') }
+  ]
+}
 
 export const statisticsList = [
-  {value: "min", label: i18n.t("dashboard.panel.chartForm.statisticsVal.min")},
-  {value: "max", label: i18n.t("dashboard.panel.chartForm.statisticsVal.max")},
-  {value: "average", label: i18n.t("dashboard.panel.chartForm.statisticsVal.average")},
-  {value: "total", label: i18n.t("dashboard.panel.chartForm.statisticsVal.total")},
-  {value: "first", label: i18n.t("dashboard.panel.chartForm.statisticsVal.first")},
-  {value: "last", label: i18n.t("dashboard.panel.chartForm.statisticsVal.last")},
-  {value: "range", label: i18n.t("dashboard.panel.chartForm.statisticsVal.range")},
-  {value: "different", label: i18n.t("dashboard.panel.chartForm.statisticsVal.different")},
-];
+  { value: 'min', label: i18n.t('dashboard.panel.chartForm.statisticsVal.min') },
+  { value: 'max', label: i18n.t('dashboard.panel.chartForm.statisticsVal.max') },
+  { value: 'average', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
+  { value: 'total', label: i18n.t('dashboard.panel.chartForm.statisticsVal.total') },
+  { value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') },
+  { value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') },
+  { value: 'range', label: i18n.t('dashboard.panel.chartForm.statisticsVal.range') },
+  { value: 'different', label: i18n.t('dashboard.panel.chartForm.statisticsVal.different') }
+]
 
 export const intervalList = [
-  {value: -1, label: i18n.t("dashboard.panel.refreshInterval.never")},
-  {value: 30, label: '30s'},
-  {value: 60, label: '1m'},
-  {value: 300, label: '5m'},
-  {value: 900, label: '15m'},
-  {value: 1800, label: '30m'}
-];
+  { value: -1, label: i18n.t('dashboard.panel.refreshInterval.never') },
+  { value: 30, label: '30s' },
+  { value: 60, label: '1m' },
+  { value: 300, label: '5m' },
+  { value: 900, label: '15m' },
+  { value: 1800, label: '30m' }
+]
 
 export const setting = {
-    DcState:[
-      {value:'ON',label: i18n.t('config.dc.usable')},
-      {value:'OFF',label: i18n.t('config.dc.suspended')}
-    ]
-};
+  DcState: [
+    { value: 'ON', label: i18n.t('config.dc.usable') },
+    { value: 'OFF', label: i18n.t('config.dc.suspended') }
+  ]
+}
 
 export const terminalLog = {
   status: {
@@ -155,23 +155,23 @@ export const terminalLog = {
     1: i18n.t('config.terminallog.statusItem.connectionFailed'),
     2: i18n.t('config.terminallog.statusItem.over'),
     3: i18n.t('config.terminallog.statusItem.kickedOut'),
-    4: i18n.t('config.terminallog.statusItem.unknownError'),
+    4: i18n.t('config.terminallog.statusItem.unknownError')
   },
   dangerCmd: ['chmod', 'chown', 'kill', 'rm', 'su', 'sudo'],
   infoCmd: ['exit']
-};
+}
 
-//公共组件的跳转来源
+// 公共组件的跳转来源
 export const fromRoute = {
-  panel: "panel",
-  explore: "explore",
-  message: "message",
-  rule: "rule",
-  model: "model",
-  asset: "asset",
-  dc: "dc",
-  endpoint: "endpoint",
-  project: "project",
-  endpointQuery: "endpointQuery",
-  terminalLog: "terminal"
-};
+  panel: 'panel',
+  explore: 'explore',
+  message: 'message',
+  rule: 'rule',
+  model: 'model',
+  asset: 'asset',
+  dc: 'dc',
+  endpoint: 'endpoint',
+  project: 'project',
+  endpointQuery: 'endpointQuery',
+  terminalLog: 'terminal'
+}
diff --git a/nezha-fronted/src/components/common/js/divResize.js b/nezha-fronted/src/components/common/js/divResize.js
index 5eb7ba9ce..596489edb 100644
--- a/nezha-fronted/src/components/common/js/divResize.js
+++ b/nezha-fronted/src/components/common/js/divResize.js
@@ -1,108 +1,108 @@
-var EleResize = {
-  _handleResize: function (e) {
-    var ele = e.target || e.srcElement;
-    var trigger = ele.__resizeTrigger__;
+const EleResize = {
+  _handleResize (e) {
+    const ele = e.target || e.srcElement
+    const trigger = ele.__resizeTrigger__
     if (trigger) {
-      var handlers = trigger.__z_resizeListeners;
+      const handlers = trigger.__z_resizeListeners
       if (handlers) {
-        var size = handlers.length;
-        for (var i = 0; i < size; i++) {
-          var h = handlers[i];
-          var handler = h.handler;
-          var context = h.context;
-          handler.apply(context, [e]);
+        const size = handlers.length
+        for (let i = 0; i < size; i++) {
+          const h = handlers[i]
+          const handler = h.handler
+          const context = h.context
+          handler.apply(context, [e])
         }
       }
     }
   },
-  _removeHandler: function (ele, handler, context) {
-    var handlers = ele.__z_resizeListeners;
+  _removeHandler (ele, handler, context) {
+    const handlers = ele.__z_resizeListeners
     if (handlers) {
-      var size = handlers.length;
-      for (var i = 0; i < size; i++) {
-        var h = handlers[i];
+      const size = handlers.length
+      for (let i = 0; i < size; i++) {
+        const h = handlers[i]
         if (h.handler === handler && h.context === context) {
-          handlers.splice(i, 1);
-          return;
+          handlers.splice(i, 1)
+          return
         }
       }
     }
   },
-  _createResizeTrigger: function (ele) {
-    var obj = document.createElement('object');
+  _createResizeTrigger (ele) {
+    const obj = document.createElement('object')
     obj.setAttribute('style',
-      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
-    obj.onload = EleResize._handleObjectLoad;
-    obj.type = 'text/html';
-    ele.appendChild(obj);
-    obj.data = 'about:blank';
-    return obj;
+      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
+    obj.onload = EleResize._handleObjectLoad
+    obj.type = 'text/html'
+    ele.appendChild(obj)
+    obj.data = 'about:blank'
+    return obj
   },
-  _handleObjectLoad: function (evt) {
-    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
-    this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
+  _handleObjectLoad (evt) {
+    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
+    this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
   }
-};
-if (document.attachEvent) {//ie9-10
+}
+if (document.attachEvent) { // ie9-10
   EleResize.on = function (ele, handler, context) {
-    var handlers = ele.__z_resizeListeners;
+    let handlers = ele.__z_resizeListeners
     if (!handlers) {
-      handlers = [];
-      ele.__z_resizeListeners = handlers;
-      ele.__resizeTrigger__ = ele;
-      ele.attachEvent('onresize', EleResize._handleResize);
+      handlers = []
+      ele.__z_resizeListeners = handlers
+      ele.__resizeTrigger__ = ele
+      ele.attachEvent('onresize', EleResize._handleResize)
     }
     handlers.push({
       handler: handler,
       context: context
-    });
-  };
+    })
+  }
   EleResize.off = function (ele, handler, context) {
-    var handlers = ele.__z_resizeListeners;
+    const handlers = ele.__z_resizeListeners
     if (handlers) {
-      EleResize._removeHandler(ele, handler, context);
+      EleResize._removeHandler(ele, handler, context)
       if (handlers.length === 0) {
-        ele.detachEvent('onresize', EleResize._handleResize);
-        delete  ele.__z_resizeListeners;
+        ele.detachEvent('onresize', EleResize._handleResize)
+        delete ele.__z_resizeListeners
       }
     }
   }
 } else {
   EleResize.on = function (ele, handler, context) {
-    var handlers = ele.__z_resizeListeners;
+    let handlers = ele.__z_resizeListeners
     if (!handlers) {
-      handlers = [];
-      ele.__z_resizeListeners = handlers;
+      handlers = []
+      ele.__z_resizeListeners = handlers
 
       if (getComputedStyle(ele, null).position === 'static') {
-        ele.style.position = 'relative';
+        ele.style.position = 'relative'
       }
-      var obj = EleResize._createResizeTrigger(ele);
-      ele.__resizeTrigger__ = obj;
-      obj.__resizeElement__ = ele;
+      const obj = EleResize._createResizeTrigger(ele)
+      ele.__resizeTrigger__ = obj
+      obj.__resizeElement__ = ele
     }
-    if (context != "map") {
+    if (context != 'map') {
       handlers.push({
         handler: handler,
         context: context
-      });
+      })
     }
-  };
+  }
   EleResize.off = function (ele, handler, context) {
-    var handlers = ele.__z_resizeListeners;
+    const handlers = ele.__z_resizeListeners
     if (handlers) {
-      EleResize._removeHandler(ele, handler, context);
+      EleResize._removeHandler(ele, handler, context)
       if (handlers.length === 0) {
-        var trigger = ele.__resizeTrigger__;
+        const trigger = ele.__resizeTrigger__
         if (trigger) {
-          trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
-          ele.removeChild(trigger);
-          delete ele.__resizeTrigger__;
+          trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
+          ele.removeChild(trigger)
+          delete ele.__resizeTrigger__
         }
-        delete  ele.__z_resizeListeners;
+        delete ele.__z_resizeListeners
       }
     }
   }
 }
 
-export default EleResize;
+export default EleResize
diff --git a/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js b/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
index c353c5063..763543c44 100644
--- a/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
+++ b/nezha-fronted/src/components/common/js/radomcolor/randomcolor.js
@@ -1,259 +1,249 @@
-function randomcolor() {
-  var e = null,
-    t = {};
-  r("monochrome", null, [
+function randomcolor () {
+  let e = null
+  const t = {}
+  r('monochrome', null, [
     [0, 0],
     [100, 0]
   ]),
-    r("red", [-26, 18], [
-      [20, 100],
-      [30, 92],
-      [40, 89],
-      [50, 85],
-      [60, 78],
-      [70, 70],
-      [80, 60],
-      [90, 55],
-      [100, 50]
-    ]),
-    r("orange", [19, 46], [
-      [20, 100],
-      [30, 93],
-      [40, 88],
-      [50, 86],
-      [60, 85],
-      [70, 70],
-      [100, 70]
-    ]),
-    r("yellow", [47, 62], [
-      [25, 100],
-      [40, 94],
-      [50, 89],
-      [60, 86],
-      [70, 84],
-      [80, 82],
-      [90, 80],
-      [100, 75]
-    ]),
-    r("green", [63, 178], [
-      [30, 100],
-      [40, 90],
-      [50, 85],
-      [60, 81],
-      [70, 74],
-      [80, 64],
-      [90, 50],
-      [100, 40]
-    ]),
-    r("blue", [179, 257], [
-      [20, 100],
-      [30, 86],
-      [40, 80],
-      [50, 74],
-      [60, 60],
-      [70, 52],
-      [80, 44],
-      [90, 39],
-      [100, 35]
-    ]),
-    r("purple", [258, 282], [
-      [20, 100],
-      [30, 87],
-      [40, 79],
-      [50, 70],
-      [60, 65],
-      [70, 59],
-      [80, 52],
-      [90, 45],
-      [100, 42]
-    ]),
-    r("pink", [283, 334], [
-      [20, 100],
-      [30, 90],
-      [40, 86],
-      [60, 84],
-      [80, 80],
-      [90, 75],
-      [100, 73]
-    ]);
-  var n = function(r) {
-    if (void 0 !== (r = r || {}).seed && null !== r.seed && r.seed === parseInt(r.seed, 10))
-      e = r.seed;
-    else if ("string" == typeof r.seed)
-      e = function(e) {
-        for (var t = 0, n = 0; n !== e.length && !(t >= Number.MAX_SAFE_INTEGER); n++)
-          t += e.charCodeAt(n);
+  r('red', [-26, 18], [
+    [20, 100],
+    [30, 92],
+    [40, 89],
+    [50, 85],
+    [60, 78],
+    [70, 70],
+    [80, 60],
+    [90, 55],
+    [100, 50]
+  ]),
+  r('orange', [19, 46], [
+    [20, 100],
+    [30, 93],
+    [40, 88],
+    [50, 86],
+    [60, 85],
+    [70, 70],
+    [100, 70]
+  ]),
+  r('yellow', [47, 62], [
+    [25, 100],
+    [40, 94],
+    [50, 89],
+    [60, 86],
+    [70, 84],
+    [80, 82],
+    [90, 80],
+    [100, 75]
+  ]),
+  r('green', [63, 178], [
+    [30, 100],
+    [40, 90],
+    [50, 85],
+    [60, 81],
+    [70, 74],
+    [80, 64],
+    [90, 50],
+    [100, 40]
+  ]),
+  r('blue', [179, 257], [
+    [20, 100],
+    [30, 86],
+    [40, 80],
+    [50, 74],
+    [60, 60],
+    [70, 52],
+    [80, 44],
+    [90, 39],
+    [100, 35]
+  ]),
+  r('purple', [258, 282], [
+    [20, 100],
+    [30, 87],
+    [40, 79],
+    [50, 70],
+    [60, 65],
+    [70, 59],
+    [80, 52],
+    [90, 45],
+    [100, 42]
+  ]),
+  r('pink', [283, 334], [
+    [20, 100],
+    [30, 90],
+    [40, 86],
+    [60, 84],
+    [80, 80],
+    [90, 75],
+    [100, 73]
+  ])
+  var n = function (r) {
+    if (void 0 !== (r = r || {}).seed && r.seed !== null && r.seed === parseInt(r.seed, 10)) { e = r.seed } else if (typeof r.seed === 'string') {
+      e = (function (e) {
+        for (var t = 0, n = 0; n !== e.length && !(t >= Number.MAX_SAFE_INTEGER); n++) { t += e.charCodeAt(n) }
         return t
       }
-      (r.seed);
-    else {
-      if (void 0 !== r.seed && null !== r.seed)
-        throw new TypeError("The seed value must be an integer or string");
+      (r.seed))
+    } else {
+      if (void 0 !== r.seed && r.seed !== null) { throw new TypeError('The seed value must be an integer or string') }
       e = null
     }
-    var c,
-      l;
-    if (null !== r.count && void 0 !== r.count) {
-      var u = r.count,
-        d = [];
-      for (r.count = null; u > d.length;)
-        e && r.seed && (r.seed += 1), d.push(n(r));
+    let c,
+      l
+    if (r.count !== null && void 0 !== r.count) {
+      const u = r.count
+      const d = []
+      for (r.count = null; u > d.length;) { e && r.seed && (r.seed += 1), d.push(n(r)) }
       return r.count = u,
-        d
+      d
     }
-    return function(e, t) {
+    return (function (e, t) {
       switch (t.format) {
-        case "hsvArray":
-          return e;
-        case "hslArray":
-          return a(e);
-        case "hsl":
-          var n = a(e);
-          return "hsl(" + n[0] + ", " + n[1] + "%, " + n[2] + "%)";
-        case "hsla":
-          var s = a(e),
-            o = t.alpha || Math.random();
-          return "hsla(" + s[0] + ", " + s[1] + "%, " + s[2] + "%, " + o + ")";
-        case "rgbArray":
-          return i(e);
-        case "rgb":
-          return "rgb(" + i(e).join(", ") + ")";
-        case "rgba":
-          var r = i(e);
-          o = t.alpha || Math.random();
-          return "rgba(" + r.join(", ") + ", " + o + ")";
+        case 'hsvArray':
+          return e
+        case 'hslArray':
+          return a(e)
+        case 'hsl':
+          var n = a(e)
+          return 'hsl(' + n[0] + ', ' + n[1] + '%, ' + n[2] + '%)'
+        case 'hsla':
+          var s = a(e)
+          var o = t.alpha || Math.random()
+          return 'hsla(' + s[0] + ', ' + s[1] + '%, ' + s[2] + '%, ' + o + ')'
+        case 'rgbArray':
+          return i(e)
+        case 'rgb':
+          return 'rgb(' + i(e).join(', ') + ')'
+        case 'rgba':
+          var r = i(e)
+          o = t.alpha || Math.random()
+          return 'rgba(' + r.join(', ') + ', ' + o + ')'
         default:
-          return function(e) {
-            var t = i(e);
+          return (function (e) {
+            const t = i(e)
 
-            function n(e) {
-              var t = e.toString(16);
-              return 1 == t.length ? "0" + t : t
+            function n (e) {
+              const t = e.toString(16)
+              return t.length == 1 ? '0' + t : t
             }
-            return "#" + n(t[0]) + n(t[1]) + n(t[2])
+            return '#' + n(t[0]) + n(t[1]) + n(t[2])
           }
-          (e)
+          (e))
       }
     }
-    ([c = function(e) {
-      var n = o(function(e) {
-        if ("number" == typeof parseInt(e)) {
-          var n = parseInt(e);
-          if (n < 360 && n > 0)
-            return [n, n]
+    ([c = (function (e) {
+      let n = o(function (e) {
+        if (typeof parseInt(e) === 'number') {
+          const n = parseInt(e)
+          if (n < 360 && n > 0) { return [n, n] }
         }
-        if ("string" == typeof e)
+        if (typeof e === 'string') {
           if (t[e]) {
-            var s = t[e];
-            if (s.hueRange)
-              return s.hueRange
+            const s = t[e]
+            if (s.hueRange) { return s.hueRange }
           } else if (e.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
-            var o = function(e) {
-              e = 3 === (e = e.replace(/^#/, "")).length ? e.replace(/(.)/g, "$1$1") : e;
-              var t = parseInt(e.substr(0, 2), 16) / 255,
-                n = parseInt(e.substr(2, 2), 16) / 255,
-                s = parseInt(e.substr(4, 2), 16) / 255,
-                o = Math.max(t, n, s),
-                r = o - Math.min(t, n, s),
-                i = o ? r / o : 0;
+            const o = (function (e) {
+              e = (e = e.replace(/^#/, '')).length === 3 ? e.replace(/(.)/g, '$1$1') : e
+              const t = parseInt(e.substr(0, 2), 16) / 255
+              const n = parseInt(e.substr(2, 2), 16) / 255
+              const s = parseInt(e.substr(4, 2), 16) / 255
+              const o = Math.max(t, n, s)
+              const r = o - Math.min(t, n, s)
+              const i = o ? r / o : 0
               switch (o) {
                 case t:
-                  return [(n - s) / r % 6 * 60 || 0, i, o];
+                  return [(n - s) / r % 6 * 60 || 0, i, o]
                 case n:
-                  return [60 * ((s - t) / r + 2) || 0, i, o];
+                  return [60 * ((s - t) / r + 2) || 0, i, o]
                 case s:
                   return [60 * ((t - n) / r + 4) || 0, i, o]
               }
             }
-            (e)[0];
+            (e))[0]
             return [o, o]
           }
+        }
         return [0, 360]
       }
-      (e.hue));
-      n < 0 && (n = 360 + n);
+      (e.hue))
+      n < 0 && (n = 360 + n)
       return n
     }
-    (r), l = function(e, t) {
-      if ("monochrome" === t.hue)
-        return 0;
-      if ("random" === t.luminosity)
-        return o([0, 100]);
-      var n = function(e) {
-          return s(e).saturationRange
-        }
-        (e),
-        r = n[0],
-        i = n[1];
+    (r)), l = (function (e, t) {
+      if (t.hue === 'monochrome') { return 0 }
+      if (t.luminosity === 'random') { return o([0, 100]) }
+      const n = (function (e) {
+        return s(e).saturationRange
+      }
+      (e))
+      let r = n[0]
+      let i = n[1]
       switch (t.luminosity) {
-        case "bright":
-          r = 55;
-          break;
-        case "dark":
-          r = i - 10;
-          break;
-        case "light":
+        case 'bright':
+          r = 55
+          break
+        case 'dark':
+          r = i - 10
+          break
+        case 'light':
           i = 55
       }
       return o([r, i])
     }
-    (c, r),
-      function(e, t, n) {
-        var r = function(e, t) {
-            for (var n = s(e).lowerBounds, o = 0; o < n.length - 1; o++) {
-              var r = n[o][0],
-                i = n[o][1],
-                a = n[o + 1][0],
-                c = n[o + 1][1];
-              if (t >= r && t <= a) {
-                var l = (c - i) / (a - r);
-                return l * t + (i - l * r)
-              }
-            }
-            return 0
+    (c, r)),
+    (function (e, t, n) {
+      let r = (function (e, t) {
+        for (let n = s(e).lowerBounds, o = 0; o < n.length - 1; o++) {
+          const r = n[o][0]
+          const i = n[o][1]
+          const a = n[o + 1][0]
+          const c = n[o + 1][1]
+          if (t >= r && t <= a) {
+            const l = (c - i) / (a - r)
+            return l * t + (i - l * r)
           }
-          (e, t),
-          i = 100;
-        switch (n.luminosity) {
-          case "dark":
-            i = r + 20;
-            break;
-          case "light":
-            r = (i + r) / 2;
-            break;
-          case "random":
-            r = 0,
-              i = 100
         }
-        return o([r, i])
+        return 0
       }
-      (c, l, r)
-    ], r)
-  };
-
-  function s(e) {
-    for (var n in e >= 334 && e <= 360 && (e -= 360), t) {
-      var s = t[n];
-      if (s.hueRange && e >= s.hueRange[0] && e <= s.hueRange[1])
-        return t[n]
+      (e, t))
+      let i = 100
+      switch (n.luminosity) {
+        case 'dark':
+          i = r + 20
+          break
+        case 'light':
+          r = (i + r) / 2
+          break
+        case 'random':
+          r = 0,
+          i = 100
+      }
+      return o([r, i])
     }
-    return "Color not found"
+    (c, l, r))
+    ], r))
   }
 
-  function o(t) {
-    if (null === e)
-      return Math.floor(t[0] + Math.random() * (t[1] + 1 - t[0]));
-    var n = t[1] || 1,
-      s = t[0] || 0,
-      o = (e = (9301 * e + 49297) % 233280) / 233280;
+  function s (e) {
+    for (const n in e >= 334 && e <= 360 && (e -= 360), t) {
+      const s = t[n]
+      if (s.hueRange && e >= s.hueRange[0] && e <= s.hueRange[1]) { return t[n] }
+    }
+    return 'Color not found'
+  }
+
+  function o (t) {
+    if (e === null) { return Math.floor(t[0] + Math.random() * (t[1] + 1 - t[0])) }
+    const n = t[1] || 1
+    const s = t[0] || 0
+    const o = (e = (9301 * e + 49297) % 233280) / 233280
     return Math.floor(s + o * (n - s))
   }
 
-  function r(e, n, s) {
-    var o = s[0][0],
-      r = s[s.length - 1][0],
-      i = s[s.length - 1][1],
-      a = s[0][1];
+  function r (e, n, s) {
+    const o = s[0][0]
+    const r = s[s.length - 1][0]
+    const i = s[s.length - 1][1]
+    const a = s[0][1]
     t[e] = {
       hueRange: n,
       lowerBounds: s,
@@ -262,60 +252,60 @@ function randomcolor() {
     }
   }
 
-  function i(e) {
-    var t = e[0];
-    0 === t && (t = 1),
-    360 === t && (t = 359),
-      t /= 360;
-    var n = e[1] / 100,
-      s = e[2] / 100,
-      o = Math.floor(6 * t),
-      r = 6 * t - o,
-      i = s * (1 - n),
-      a = s * (1 - r * n),
-      c = s * (1 - (1 - r) * n),
-      l = 256,
-      u = 256,
-      d = 256;
+  function i (e) {
+    let t = e[0]
+    t === 0 && (t = 1),
+    t === 360 && (t = 359),
+    t /= 360
+    const n = e[1] / 100
+    const s = e[2] / 100
+    const o = Math.floor(6 * t)
+    const r = 6 * t - o
+    const i = s * (1 - n)
+    const a = s * (1 - r * n)
+    const c = s * (1 - (1 - r) * n)
+    let l = 256
+    let u = 256
+    let d = 256
     switch (o) {
       case 0:
         l = s,
-          u = c,
-          d = i;
-        break;
+        u = c,
+        d = i
+        break
       case 1:
         l = a,
-          u = s,
-          d = i;
-        break;
+        u = s,
+        d = i
+        break
       case 2:
         l = i,
-          u = s,
-          d = c;
-        break;
+        u = s,
+        d = c
+        break
       case 3:
         l = i,
-          u = a,
-          d = s;
-        break;
+        u = a,
+        d = s
+        break
       case 4:
         l = c,
-          u = i,
-          d = s;
-        break;
+        u = i,
+        d = s
+        break
       case 5:
         l = s,
-          u = i,
-          d = a
+        u = i,
+        d = a
     }
     return [Math.floor(255 * l), Math.floor(255 * u), Math.floor(255 * d)]
   }
 
-  function a(e) {
-    var t = e[0],
-      n = e[1] / 100,
-      s = e[2] / 100,
-      o = (2 - n) * s;
+  function a (e) {
+    const t = e[0]
+    const n = e[1] / 100
+    const s = e[2] / 100
+    const o = (2 - n) * s
     return [t, Math.round(n * s / (o < 1 ? o : 2 - o) * 1e4) / 100, o / 2 * 100]
   }
   return n()
@@ -324,5 +314,3 @@ function randomcolor() {
 export {
   randomcolor
 }
-
-
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 9f2f315dd..d885b78cb 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -1,59 +1,59 @@
-import PerfectScrollbar from "perfect-scrollbar";
-import {getChart} from "./common";
-import MessageBox from "element-ui/packages/message-box/src/main";
-import vuex from 'vuex'
-import i18n from "../i18n";
-/*弹窗点击外部后关闭*/
-const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion",'nz-temp-box']; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+import { getChart } from './common'
+import MessageBox from 'element-ui/packages/message-box/src/main'
+import i18n from '../i18n'
+/* 弹窗点击外部后关闭 */
+const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
-  bind(el, binding, vnode) {
-    if(!binding.expression) return;
-    let unsavedChange = localStorage.getItem('nz-unnsaved-change');
-    let oldValue;
-    try{
-      oldValue= JSON.parse(JSON.stringify(binding.value.obj));
-    }catch (e) {
+  bind (el, binding, vnode) {
+    if (!binding.expression) return
+    const unsavedChange = localStorage.getItem('nz-unnsaved-change')
+    let oldValue
+    try {
+      oldValue = JSON.parse(JSON.stringify(binding.value.obj))
+    } catch (e) {
 
     }
-    function documentHandler(e) {
+    function documentHandler (e) {
       if (el.contains(e.target)) {
-        return false;
+        return false
       } else {
-        let flag = true;
-        let path = e.path || (e.composedPath && e.composedPath());
+        let flag = true
+        const path = e.path || (e.composedPath && e.composedPath())
+        // eslint-disable-next-line no-labels
         top: for (let i = 0; i < path.length; i++) {
           for (let j = 0; j < exceptClassName.length; j++) {
-            if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) != -1) {
-              flag = false;
-              break top;
+            if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) !== -1) {
+              flag = false
+              // eslint-disable-next-line no-labels
+              break top
             }
           }
         }
         if (!flag) {
-          return false;
+          return false
         }
-        if(oldValue){
-          let newValue = JSON.parse(JSON.stringify(binding.value.obj));
-          if(unsavedChange=='on'&&!isEqual(oldValue,newValue)){
-            MessageBox.confirm(i18n.t("tip.confirmCancel"), {
-              confirmButtonText: i18n.t("tip.yes"),
-              cancelButtonText: i18n.t("tip.no"),
+        if (oldValue) {
+          const newValue = JSON.parse(JSON.stringify(binding.value.obj))
+          if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) {
+            MessageBox.confirm(i18n.t('tip.confirmCancel'), {
+              confirmButtonText: i18n.t('tip.yes'),
+              cancelButtonText: i18n.t('tip.no'),
               type: 'warning'
             }).then(() => {
-              if(binding.value.func){
-                binding.value.func();
+              if (binding.value.func) {
+                binding.value.func()
               }
             })
-          }else{
-            binding.value.func();
-          }
-        }else{
-          if (binding.arg) {
-            binding.value(e, binding.arg);
           } else {
-            if(binding.value){
-              binding.value(e);
+            binding.value.func()
+          }
+        } else {
+          if (binding.arg) {
+            binding.value(e, binding.arg)
+          } else {
+            if (binding.value) {
+              binding.value(e)
             }
           }
         }
@@ -61,426 +61,422 @@ export const clickoutside = {
     }
 
     // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
-    el.__vueClickOutside__ = documentHandler;
-    document.addEventListener('mousedown', documentHandler);
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('mousedown', documentHandler)
   },
-  unbind(el, binding) {
+  unbind (el, binding) {
     // 解除事件监听
-    document.removeEventListener('mousedown', el.__vueClickOutside__);
-    delete el.__vueClickOutside__;
-  },
-};
+    document.removeEventListener('mousedown', el.__vueClickOutside__)
+    delete el.__vueClickOutside__
+  }
+}
 function isEqual (o1, o2) {
   var isEqualForInner = function (obj1, obj2) {
-    var o1 = obj1 instanceof Object;
-    var o2 = obj2 instanceof Object;
+    const o1 = obj1 instanceof Object
+    const o2 = obj2 instanceof Object
     if (!o1 || !o2) {
-      return obj1 === obj2;
+      return obj1 === obj2
     }
     if (Object.keys(obj1).length !== Object.keys(obj2).length) {
-      return false;
+      return false
     }
 
-    for (var attr of Object.keys(obj1)) {
-
-      var t1 = obj1[attr] instanceof Object;
-      var t2 = obj2[attr] instanceof Object;
+    for (const attr of Object.keys(obj1)) {
+      const t1 = obj1[attr] instanceof Object
+      const t2 = obj2[attr] instanceof Object
       if (t1 && t2) {
-        if(!isEqualForInner(obj1[attr], obj2[attr])){
-          return false;
+        if (!isEqualForInner(obj1[attr], obj2[attr])) {
+          return false
         }
       } else if (obj1[attr] !== obj2[attr]) {
-        return false;
+        return false
       }
     }
-    return true;
+    return true
   }
-  return isEqualForInner(o1, o2);
+  return isEqualForInner(o1, o2)
 }
-export const cancelWithChange={
-  bind:function(el,binding){
-    if(!binding.value||!binding.value.obj) return;
-    let unsavedChange = localStorage.getItem('nz-unnsaved-change');
-    let oldValue = JSON.parse(JSON.stringify(binding.value.obj));
-    function domClick(e){
-      let newValue = JSON.parse(JSON.stringify(binding.value.obj));
-      if(unsavedChange=='on'&&!isEqual(oldValue,newValue)){
-        MessageBox.confirm(i18n.t("tip.confirmCancel"), {
-          confirmButtonText: i18n.t("tip.yes"),
-          cancelButtonText: i18n.t("tip.no"),
+export const cancelWithChange = {
+  bind: function (el, binding) {
+    if (!binding.value || !binding.value.obj) return
+    const unsavedChange = localStorage.getItem('nz-unnsaved-change')
+    const oldValue = JSON.parse(JSON.stringify(binding.value.obj))
+    function domClick (e) {
+      const newValue = JSON.parse(JSON.stringify(binding.value.obj))
+      if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) {
+        MessageBox.confirm(i18n.t('tip.confirmCancel'), {
+          confirmButtonText: i18n.t('tip.yes'),
+          cancelButtonText: i18n.t('tip.no'),
           type: 'warning'
         }).then(() => {
-          if(binding.value.func){
-            binding.value.func();
+          if (binding.value.func) {
+            binding.value.func()
           }
         })
-      }else{
-        binding.value.func();
+      } else {
+        binding.value.func()
       }
     }
     el.__vueDomClick__ = domClick
-    el.addEventListener('click',domClick)
+    el.addEventListener('click', domClick)
   },
-  unbind:function(el,binding){
-// 解除事件监听
-    document.removeEventListener('click', el.__vueDomClick__);
-    delete el.__vueDomClick__;
+  unbind: function (el, binding) {
+    // 解除事件监听
+    document.removeEventListener('click', el.__vueDomClick__)
+    delete el.__vueDomClick__
   }
 }
 // 底部上滑框窗口控制
 export const bottomBoxWindow = {
   // 鼠标拖动二级列表
-  listResize(vm, e) {
-    window.resizing = true;
-    let mainListDom = document.querySelector(".main-list"); //主列表
-    let subBoxDom = document.querySelector(".sub-box"); //副列表
-    let subListDom = document.querySelector(".sub-list"); //副列表
-    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-    let resizeBarHeight = 9; //resize横条高度
-    let minHeight = 15; //主、副列表最小高度限制为15
-    let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
-    let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
-    let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
-    let resizeBarDom = document.querySelector(".sub-list-resize"); //拖动条
+  listResize (vm, e) {
+    window.resizing = true
+    const mainListDom = document.querySelector('.main-list') // 主列表
+    const subBoxDom = document.querySelector('.sub-box') // 副列表
+    const subListDom = document.querySelector('.sub-list') // 副列表
+    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const resizeBarHeight = 9 // resize横条高度
+    const minHeight = 15 // 主、副列表最小高度限制为15
+    const contentHideHeight = 100 // 主、副列表高度低于100时隐藏内容
+    const mainModalDom = document.querySelector('.main-modal') // 主列表遮罩
+    const resizeModalDom = document.querySelector('.resize-modal') // 副列表遮罩
+    const resizeBarDom = document.querySelector('.sub-list-resize') // 拖动条
 
-    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-    //点击时俩dom的初始高度：
-    let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
+    const contentRightHeight = contentRightDom.offsetHeight// 可视高度
+    // 点击时俩dom的初始高度：
+    const subInitialHeight = subListDom.offsetHeight + resizeBarHeight
 
-    mainModalDom.style.display = "block";
-    resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
-    resizeBarDom.style.display = "none";
-    let resizeModalEndHeight;
-    //点击时鼠标的Y轴位置
-    let mouseInitialY = e.clientY;
+    mainModalDom.style.display = 'block'
+    resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`
+    resizeBarDom.style.display = 'none'
+    let resizeModalEndHeight
+    // 点击时鼠标的Y轴位置
+    const mouseInitialY = e.clientY
 
     document.onmousemove = (e) => {
-      window.resizing = true;
-      e.preventDefault();
-      //得到鼠标拖动的距离
-      let mouseMoveY = e.clientY-mouseInitialY;
-      resizeModalEndHeight = subInitialHeight-mouseMoveY;
+      window.resizing = true
+      e.preventDefault()
+      // 得到鼠标拖动的距离
+      const mouseMoveY = e.clientY - mouseInitialY
+      resizeModalEndHeight = subInitialHeight - mouseMoveY
 
       // 主、副列表高度限制
-      if(resizeModalEndHeight > contentRightHeight-minHeight){
-        resizeModalEndHeight = contentRightHeight-minHeight;
+      if (resizeModalEndHeight > contentRightHeight - minHeight) {
+        resizeModalEndHeight = contentRightHeight - minHeight
       }
-      if(resizeModalEndHeight < minHeight){
-        resizeModalEndHeight = minHeight;
+      if (resizeModalEndHeight < minHeight) {
+        resizeModalEndHeight = minHeight
       }
-      resizeModalDom.style.height = `${resizeModalEndHeight}px`;
-    };
+      resizeModalDom.style.height = `${resizeModalEndHeight}px`
+    }
     document.onmouseup = () => {
-      window.resizing = false;
-      mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
-      subBoxDom.style.height = `${resizeModalEndHeight}px`;
-      subListDom.style.height = `${resizeModalEndHeight-resizeBarHeight}px`;
-      resizeModalDom.style.display = "none";
-      mainModalDom.style.display = "none";
-      resizeBarDom.style.display = "";
+      window.resizing = false
+      mainListDom.style.height = `${contentRightHeight - resizeModalEndHeight}px`
+      subBoxDom.style.height = `${resizeModalEndHeight}px`
+      subListDom.style.height = `${resizeModalEndHeight - resizeBarHeight}px`
+      resizeModalDom.style.display = 'none'
+      mainModalDom.style.display = 'none'
+      resizeBarDom.style.display = ''
 
-      //当主副列表可视区域小于一定值时，不展示内容
-      if(contentRightHeight-resizeModalEndHeight <= contentHideHeight){
+      // 当主副列表可视区域小于一定值时，不展示内容
+      if (contentRightHeight - resizeModalEndHeight <= contentHideHeight) {
         if (vm.bottomBox.mainResizeShow) {
-          vm.bottomBox.mainResizeShow = false;
+          vm.bottomBox.mainResizeShow = false
         }
       } else {
         if (!vm.bottomBox.mainResizeShow) {
-          vm.bottomBox.mainResizeShow = true;
+          vm.bottomBox.mainResizeShow = true
         }
       }
-      if(resizeModalEndHeight < contentHideHeight){
+      if (resizeModalEndHeight < contentHideHeight) {
         if (vm.bottomBox.subResizeShow) {
-          vm.bottomBox.subResizeShow = false;
+          vm.bottomBox.subResizeShow = false
         }
       } else {
         if (!vm.bottomBox.subResizeShow) {
-          vm.bottomBox.subResizeShow = true;
+          vm.bottomBox.subResizeShow = true
         }
       }
 
-      document.onmousemove = null;
-      document.onmouseup = null;
+      document.onmousemove = null
+      document.onmouseup = null
     }
   },
-  exitFullScreen(vm) {
-    window.resizing = true;
-    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-    //主列表
-    document.querySelector(".main-list-with-sub").style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)';
+  exitFullScreen (vm) {
+    window.resizing = true
+    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const contentRightHeight = contentRightDom.offsetHeight// 可视高度
+    // 主列表
+    document.querySelector('.main-list-with-sub').style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)'
 
-    //副列表
-    document.querySelector(".sub-list").style.height = vm.bottomBox.mainListHeight ? contentRightHeight-vm.bottomBox.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
+    // 副列表
+    document.querySelector('.sub-list').style.height = vm.bottomBox.mainListHeight ? contentRightHeight - vm.bottomBox.mainListHeight - 9 + 'px' : 'calc(50% - 4px)'
     setTimeout(() => {
-      if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-        vm.bottomBox.mainResizeShow = true;
+      if (document.querySelector('.main-list-with-sub').offsetHeight >= 100) {
+        vm.bottomBox.mainResizeShow = true
       }
-      if (document.querySelector(".sub-list").offsetHeight >= 100) {
-        vm.bottomBox.subResizeShow = true;
+      if (document.querySelector('.sub-list').offsetHeight >= 100) {
+        vm.bottomBox.subResizeShow = true
       }
-      vm.bottomBox.isFullScreen = false;
-      window.resizing = false;
-    }, 210);
+      vm.bottomBox.isFullScreen = false
+      window.resizing = false
+    }, 210)
   },
-  fullScreen(vm) {
-    window.resizing = true;
-    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-    vm.bottomBox.isFullScreen = true;
-    //主列表
-    vm.bottomBox.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-    document.querySelector(".main-list-with-sub").style.height = '0';
-    vm.bottomBox.mainResizeShow = false;
-    //副列表
-    document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
-    window.resizing = false;
+  fullScreen (vm) {
+    window.resizing = true
+    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const contentRightHeight = contentRightDom.offsetHeight// 可视高度
+    vm.bottomBox.isFullScreen = true
+    // 主列表
+    vm.bottomBox.mainListHeight = document.querySelector('.main-list-with-sub').offsetHeight // 记录全屏前主列表的高度
+    document.querySelector('.main-list-with-sub').style.height = '0'
+    vm.bottomBox.mainResizeShow = false
+    // 副列表
+    document.querySelector('.sub-list').style.height = contentRightHeight + 'px'
+    window.resizing = false
   },
-  showSubListWatch(vm, n) {
-    vm.bottomBox.inTransform = n;
+  showSubListWatch (vm, n) {
+    vm.bottomBox.inTransform = n
     if (!n) {
-      vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
-      vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
-      vm.bottomBox.isFullScreen = false;
-      //移动分页组件的位置
-      let paginationTop = document.querySelector(".pagination-top");
-      let paginationBottom = document.querySelector(".pagination-bottom");
-      paginationTop.classList.remove("display-none");
-      if (paginationTop.classList.contains("pagination-top-show")) {
-        paginationTop.classList.remove("pagination-top-show");
+      vm.mainTableHeight = vm.$tableHeight.normal // 重置table的高度
+      vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop
+      vm.bottomBox.isFullScreen = false
+      // 移动分页组件的位置
+      const paginationTop = document.querySelector('.pagination-top')
+      const paginationBottom = document.querySelector('.pagination-bottom')
+      paginationTop.classList.remove('display-none')
+      if (paginationTop.classList.contains('pagination-top-show')) {
+        paginationTop.classList.remove('pagination-top-show')
       }
-      if (!paginationTop.classList.contains("pagination-top-hide")) {
-        paginationTop.classList.add("pagination-top-hide");
+      if (!paginationTop.classList.contains('pagination-top-hide')) {
+        paginationTop.classList.add('pagination-top-hide')
       }
       setTimeout(() => {
-        paginationTop.classList.add("display-none");
-        paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-      }, 210);
+        paginationTop.classList.add('display-none')
+        paginationBottom.appendChild(paginationTop.removeChild(document.querySelector('.pagination')))
+      }, 210)
 
       // 主列表恢复全屏
-      vm.bottomBox.mainResizeShow = vm.bottomBox.subResizeShow = true;
-      document.querySelector('.main-list').style.height = "";
-      //副列表高度清空
-      document.querySelector(".sub-list").style.height = "";
+      vm.bottomBox.mainResizeShow = vm.bottomBox.subResizeShow = true
+      document.querySelector('.main-list').style.height = ''
+      // 副列表高度清空
+      document.querySelector('.sub-list').style.height = ''
     } else {
-      vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度
-      vm.tools.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
-      //移动分页组件的位置
-      let paginationTop = document.querySelector(".pagination-top");
-      paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-      paginationTop.classList.remove("display-none");
+      vm.mainTableHeight = vm.$tableHeight.openSubList.mainList // 重置table高度
+      vm.tools.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop
+      // 移动分页组件的位置
+      const paginationTop = document.querySelector('.pagination-top')
+      paginationTop.appendChild(document.querySelector('.pagination-bottom').removeChild(document.querySelector('.pagination')))
+      paginationTop.classList.remove('display-none')
       setTimeout(() => {
-        if (paginationTop.classList.contains("pagination-top-hide")) {
-          paginationTop.classList.remove("pagination-top-hide");
+        if (paginationTop.classList.contains('pagination-top-hide')) {
+          paginationTop.classList.remove('pagination-top-hide')
         }
-        if (!paginationTop.classList.contains("pagination-top-show")) {
-          paginationTop.classList.add("pagination-top-show");
+        if (!paginationTop.classList.contains('pagination-top-show')) {
+          paginationTop.classList.add('pagination-top-show')
         }
-      }, 210);
+      }, 210)
     }
   }
-};
-export function stringTimeParseToUnix(stringTime){
-  let time=new Date(stringTime).getTime();
-  return time/1000;
 }
-export function calcDurationByStringTime(startTime, endTime) {
-  let durationSecond = stringTimeParseToUnix(endTime)-stringTimeParseToUnix(startTime);
-  let result = `${durationSecond%60}s`;
+export function stringTimeParseToUnix (stringTime) {
+  const time = new Date(stringTime).getTime()
+  return time / 1000
+}
+export function calcDurationByStringTime (startTime, endTime) {
+  const durationSecond = stringTimeParseToUnix(endTime) - stringTimeParseToUnix(startTime)
+  let result = `${durationSecond % 60}s`
   if (durationSecond > 60) {
-    result = `${(Math.floor(durationSecond/60))%60}m ${result}`;
+    result = `${(Math.floor(durationSecond / 60)) % 60}m ${result}`
   }
-  if (durationSecond > 60*60) {
-    result = `${Math.floor(durationSecond/(60*60))}h ${result}`;
+  if (durationSecond > 60 * 60) {
+    result = `${Math.floor(durationSecond / (60 * 60))}h ${result}`
   }
-  return result;
+  return result
 }
-export function calcDurationByStringTimeB(startTime, endTime) {
-  let durationSecond = stringTimeParseToUnix(endTime)-stringTimeParseToUnix(startTime);
-  let result = `${durationSecond%60}s`;
-  if(durationSecond >= 60*60 *24){
-    result = `${(Math.floor(durationSecond/3600))%24}h`
-    result = `${Math.floor(durationSecond/(60*60*24))}d ${result}`;
-  } else if (durationSecond >= 60*60) {
-    result = `${(Math.floor(durationSecond/60))%60}m`
-    result = `${Math.floor(durationSecond/(60*60))}h ${result}`;
-  }else if(durationSecond >= 60) {
-    result = `${(Math.floor(durationSecond/60))%60}m ${result}`;
+export function calcDurationByStringTimeB (startTime, endTime) {
+  const durationSecond = stringTimeParseToUnix(endTime) - stringTimeParseToUnix(startTime)
+  let result = `${durationSecond % 60}s`
+  if (durationSecond >= 60 * 60 * 24) {
+    result = `${(Math.floor(durationSecond / 3600)) % 24}h`
+    result = `${Math.floor(durationSecond / (60 * 60 * 24))}d ${result}`
+  } else if (durationSecond >= 60 * 60) {
+    result = `${(Math.floor(durationSecond / 60)) % 60}m`
+    result = `${Math.floor(durationSecond / (60 * 60))}h ${result}`
+  } else if (durationSecond >= 60) {
+    result = `${(Math.floor(durationSecond / 60)) % 60}m ${result}`
   }
 
-  return result;
+  return result
 }
-export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
-  let date=new Date(unixTime * 1000);
-  var o = {
-    "M+" : date.getMonth()+1,                 //月份
-    "d+" : date.getDate(),                    //日
-    "h+" : date.getHours(),                   //小时
-    "m+" : date.getMinutes(),                 //分
-    "s+" : date.getSeconds(),                 //秒
-    "q+" : Math.floor((date.getMonth()+3)/3), //季度
-    "S"  : date.getMilliseconds()             //毫秒
-  };
-  if(/(y+)/.test(fmt))
-    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
-  for(var k in o)
-    if(new RegExp("("+ k +")").test(fmt))
-      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
-  return fmt;
+export function unixTimeParseToString (unixTime, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  const date = new Date(unixTime * 1000)
+  const o = {
+    'M+': date.getMonth() + 1, // 月份
+    'd+': date.getDate(), // 日
+    'h+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
+  }
+  return fmt
 }
 
-//chart-resize工具
+// chart-resize工具
 export const chartResizeTool = {
-  minHeight: 200, //图表最小高度
-  chartPaddingTop: 2, //图表padding-top
-  chartBlankHeight:4, //图表空白占位高度(padding-top + border)
-  chartTableBlankHeight: 6, //表格型图表额外空白占位高度
-  chartBlankWidth: 2, //图表空白占位宽度
-  containerBlankWidth: 5, //容器空白占位宽度（#listContainer的padding）
-  titleHeight: 28, //标题dom高度
-  stepHeight: 50, //单元高度
-  timeouter:null,
-  stepWidth(containerWidth) { //单元宽度，参数为容器总宽度
-    return (containerWidth-this.containerBlankWidth)/12;
+  minHeight: 200, // 图表最小高度
+  chartPaddingTop: 2, // 图表padding-top
+  chartBlankHeight: 4, // 图表空白占位高度(padding-top + border)
+  chartTableBlankHeight: 6, // 表格型图表额外空白占位高度
+  chartBlankWidth: 2, // 图表空白占位宽度
+  containerBlankWidth: 5, // 容器空白占位宽度（#listContainer的padding）
+  titleHeight: 28, // 标题dom高度
+  stepHeight: 50, // 单元高度
+  timeouter: null,
+  stepWidth (containerWidth) { // 单元宽度，参数为容器总宽度
+    return (containerWidth - this.containerBlankWidth) / 12
   },
-  calculateHeight(original) {
-    let height = Math.floor(original/this.stepHeight)*this.stepHeight;
+  calculateHeight (original) {
+    let height = Math.floor(original / this.stepHeight) * this.stepHeight
     if (height < this.minHeight) {
-      height = this.minHeight;
+      height = this.minHeight
     }
-    return height-this.chartBlankHeight;
+    return height - this.chartBlankHeight
   },
-  start(vm, originalData, event, chartIndexs) {
-    let $self=this;
-    let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象
-    let shadow = vm.$refs.resizeShadow; //缩放时底部阴影dom
+  start (vm, originalData, event, chartIndexs) {
+    const $self = this
+    const data = JSON.parse(JSON.stringify(originalData)) // 将初始对象复制，后续操作使用复制对象
+    let shadow = vm.$refs.resizeShadow // 缩放时底部阴影dom
     if (!shadow) {
-      shadow = vm.$refs[0].resizeShadow;
+      shadow = vm.$refs[0].resizeShadow
     }
-    let box = vm.$refs.resizeBox; //图表内容dom
+    let box = vm.$refs.resizeBox // 图表内容dom
     if (!box) {
-      box = vm.$refs[0].resizeBox;
+      box = vm.$refs[0].resizeBox
     }
-    let chartPaddingTop = this.chartPaddingTop;
-    let chartBlankWidth = this.chartBlankWidth;
-    let chartBlankHeight = this.chartBlankHeight;
-    let titleHeight = this.titleHeight;
-    let stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth);
-    let stepHeight = this.stepHeight;
+    const chartPaddingTop = this.chartPaddingTop
+    const chartBlankWidth = this.chartBlankWidth
+    const chartBlankHeight = this.chartBlankHeight
+    const titleHeight = this.titleHeight
+    const stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth)
+    const stepHeight = this.stepHeight
 
-    let mouseOriginalX = event.clientX; //鼠标初始坐标
-    let mouseOriginalY = event.clientY;
-    let originalWidth = stepWidth*data.span; //图表、阴影初始宽高
-    let shadowNewWidth = originalWidth;
-    let originalHeight = data.height;
-    let shadowNewHeight = originalHeight;
+    const mouseOriginalX = event.clientX // 鼠标初始坐标
+    const mouseOriginalY = event.clientY
+    const originalWidth = stepWidth * data.span // 图表、阴影初始宽高
+    let shadowNewWidth = originalWidth
+    const originalHeight = data.height
+    let shadowNewHeight = originalHeight
 
-    //1.激活背景阴影
-    shadow.classList.add("resize-shadow-active");
-    //2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
-    document.addEventListener("mousemove", moveListener);
-    //3.鼠标松开，将resize-box宽高改为resize-shadow宽高，结束
-    document.addEventListener("mouseup", mouseupListener);
+    // 1.激活背景阴影
+    shadow.classList.add('resize-shadow-active')
+    // 2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
+    document.addEventListener('mousemove', moveListener)
+    // 3.鼠标松开，将resize-box宽高改为resize-shadow宽高，结束
+    document.addEventListener('mouseup', mouseupListener)
 
-
-    function moveListener(e) {
-      let mouseX = e.clientX;
-      let mouseY = e.clientY;
-      //调整resize-box的宽高
-      box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
-      box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
-      //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
-      let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
-      let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
-      boxStepHandler(remainderWidth, remainderHeight);
+    function moveListener (e) {
+      const mouseX = e.clientX
+      const mouseY = e.clientY
+      // 调整resize-box的宽高
+      box.style.width = `${originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth}px`
+      box.style.height = `${originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight}px`
+      // 监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
+      const remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % stepWidth // 宽的余数
+      const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % stepHeight // 高的余数
+      boxStepHandler(remainderWidth, remainderHeight)
     }
-    function mouseupListener(e) {
-      //将resize-box的宽高设为resize-shadow的宽高
-      box.style.width = `${shadow.offsetWidth}px`;
-      box.style.height = `${Math.round((shadow.offsetHeight )/chartPaddingTop)*chartPaddingTop}px`;
-      data.height = Math.round((box.offsetHeight+chartPaddingTop)/stepHeight)*stepHeight;
-      data.span = Math.round((box.offsetWidth+chartBlankWidth)/stepWidth);
-      //请求后台，保存变更
+    function mouseupListener (e) {
+      // 将resize-box的宽高设为resize-shadow的宽高
+      box.style.width = `${shadow.offsetWidth}px`
+      box.style.height = `${Math.round((shadow.offsetHeight) / chartPaddingTop) * chartPaddingTop}px`
+      data.height = Math.round((box.offsetHeight + chartPaddingTop) / stepHeight) * stepHeight
+      data.span = Math.round((box.offsetWidth + chartBlankWidth) / stepWidth)
+      // 请求后台，保存变更
       if (data.height != originalData.height || data.span != originalData.span) {
-
-        originalData.height = data.height;
-        originalData.span = data.span;
-        vm.$put("panel/" + vm.panelIdInner + "/charts/modify", originalData);
+        originalData.height = data.height
+        originalData.span = data.span
+        vm.$put('panel/' + vm.panelIdInner + '/charts/modify', originalData)
       }
-      //关闭背景阴影
-      shadow.classList.remove("resize-shadow-active");
+      // 关闭背景阴影
+      shadow.classList.remove('resize-shadow-active')
 
-      document.removeEventListener("mousemove", moveListener);
-      document.removeEventListener("mouseup", mouseupListener);
+      document.removeEventListener('mousemove', moveListener)
+      document.removeEventListener('mouseup', mouseupListener)
     }
-    function boxStepHandler(width, height, chartIndex) { //param: 宽高变化量，大于0放大，小于0缩小
-      let widthChange = false;
-      let heightChange = false;
-      if (width > stepWidth/2) { //放大shadow宽
-        widthChange = true;
-        //判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行
-        let currentWidth = shadow.offsetWidth+stepWidth;
-        let currentSpan = Math.round((currentWidth+chartBlankWidth)/stepWidth);
-        let calcWidth = currentSpan*stepWidth-chartBlankWidth; //不会换行的宽度
-        shadow.style.width = `${calcWidth}px`;
-      } else if (width <= 0-(stepWidth/2)) { //缩小shadow宽
-        widthChange = true;
-        let currentWidth = shadow.offsetWidth-stepWidth;
-        let currentSpan = Math.round(currentWidth/stepWidth);
-        let calcWidth = currentSpan*stepWidth-chartBlankWidth; //不会换行的宽度
-        shadow.style.width = `${calcWidth}px`;
+    function boxStepHandler (width, height, chartIndex) { // param: 宽高变化量，大于0放大，小于0缩小
+      let widthChange = false
+      let heightChange = false
+      if (width > stepWidth / 2) { // 放大shadow宽
+        widthChange = true
+        // 判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行
+        const currentWidth = shadow.offsetWidth + stepWidth
+        const currentSpan = Math.round((currentWidth + chartBlankWidth) / stepWidth)
+        const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+        shadow.style.width = `${calcWidth}px`
+      } else if (width <= 0 - (stepWidth / 2)) { // 缩小shadow宽
+        widthChange = true
+        const currentWidth = shadow.offsetWidth - stepWidth
+        const currentSpan = Math.round(currentWidth / stepWidth)
+        const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+        shadow.style.width = `${calcWidth}px`
       }
       if (widthChange) {
-        shadowNewWidth = shadow.offsetWidth;
+        shadowNewWidth = shadow.offsetWidth
       }
-      if (height > stepHeight/2) { //放大shadow高
-        heightChange = true;
-        shadow.style.height = `${Math.round(shadow.offsetHeight/chartPaddingTop)*chartPaddingTop+stepHeight}px`;
-      } else if (height <= 0-(stepHeight/2)) { //缩小shadow高
-        heightChange = true;
-        shadow.style.height = `${Math.round(shadow.offsetHeight/chartPaddingTop)*chartPaddingTop-stepHeight}px`;
+      if (height > stepHeight / 2) { // 放大shadow高
+        heightChange = true
+        shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + stepHeight}px`
+      } else if (height <= 0 - (stepHeight / 2)) { // 缩小shadow高
+        heightChange = true
+        shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - stepHeight}px`
       }
       if (heightChange) {
-        shadowNewHeight = shadow.offsetHeight+chartBlankHeight;
+        shadowNewHeight = shadow.offsetHeight + chartBlankHeight
       }
 
       if (widthChange || heightChange) {
         clearTimeout($self.timeouter)
-        $self.timeouter=setTimeout(()=>{
-          //step时chart重绘
-          if (box.classList.contains("resize-box-echarts")) { //echarts类型
-            getChart(chartIndexs).resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
+        $self.timeouter = setTimeout(() => {
+          // step时chart重绘
+          if (box.classList.contains('resize-box-echarts')) { // echarts类型
+            getChart(chartIndexs).resize({ width: shadow.offsetWidth - 16, height: shadow.offsetHeight - titleHeight - vm.$refs.legendArea.offsetHeight })
           }
-        },500)
-        //chart外层宽高调整
-        let outerBox = document.getElementById(`chart-${data.id}`);
-        outerBox.style.height = `${shadow.offsetHeight+chartPaddingTop}px`;
-        outerBox.style.width = `${parseFloat(shadow.style.width.split("px")[0])+chartBlankWidth}px`;
+        }, 500)
+        // chart外层宽高调整
+        const outerBox = document.getElementById(`chart-${data.id}`)
+        outerBox.style.height = `${shadow.offsetHeight + chartPaddingTop}px`
+        outerBox.style.width = `${parseFloat(shadow.style.width.split('px')[0]) + chartBlankWidth}px`
       }
-
     }
   }
-};
+}
 
-//table 方法
+// table 方法
 export const tableSet = {
-  //是否需要排序
-  sortableShow(prop,from){
-    switch(prop){
-      case 'state':
-        if( from === 'operationlog' ||from === 'alertSilence'){
+  // 是否需要排序
+  sortableShow (prop, from) {
+    switch (prop) {
+      case 'state': {
+        if (from === 'operationlog' || from === 'alertSilence') {
           return false
         }
-      case 'id':
-      case 'startAt':
-        if( from === 'alertSilence' ){
+        break
+      }
+      case 'id': break
+      case 'startAt': {
+        if (from === 'alertSilence') {
           return false
         }
-      case 'state':
-      case 'id':
+        break
+      }
       case 'alertRule':
       case 'severity':
-      case 'startAt':
       case 'endAt':
       case 'ID':
       case 'HOST':
@@ -516,267 +512,273 @@ export const tableSet = {
       case 'idc':
       case 'alertNum':
       case 'gname':
-        return'custom';
-      default : return false;
+        return 'custom'
+      default : return false
     }
   },
   // prop字段
-  propTitle(prop,from){
-    switch(from){
+  propTitle (prop, from) {
+    switch (from) {
       case 'asset':
-        switch(prop){
-          case 'ID': return'ass.id';
-          case 'HOST': return'ass.host';
-          case 'SN': return'ass.sn';
-          case 'assetType': return 'sdtt.value';
-          case 'purchaseDate': return'ass.purchase_date';
-          case 'state': return 'ass.state';
-          case 'pingStatus': return 'assp.rtt';
-          case 'dataCenter': return 'idc.name';
-          case 'cabinet': return 'cab.name';
-          case 'model': return 'mo.name';
-          case 'vendor': return 'sdt.value';
-          case 'principal': return 'su.username';
-          default : return prop;
+        switch (prop) {
+          case 'ID': return 'ass.id'
+          case 'HOST': return 'ass.host'
+          case 'SN': return 'ass.sn'
+          case 'assetType': return 'sdtt.value'
+          case 'purchaseDate': return 'ass.purchase_date'
+          case 'state': return 'ass.state'
+          case 'pingStatus': return 'assp.rtt'
+          case 'dataCenter': return 'idc.name'
+          case 'cabinet': return 'cab.name'
+          case 'model': return 'mo.name'
+          case 'vendor': return 'sdt.value'
+          case 'principal': return 'su.username'
+          default : return prop
         }
 
       case 'alertMessage':
-        switch(prop){
-          case 'id': return'am.id';
-          case 'state': return'am.state';
-          case 'alertRule': return'ar.alert_name';
-          case 'severity': return'am.severity';
-          case 'startAt': return'am.start_at';
-          case 'endAt': return'am.end_at';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'am.id'
+          case 'state': return 'am.state'
+          case 'alertRule': return 'ar.alert_name'
+          case 'severity': return 'am.severity'
+          case 'startAt': return 'am.start_at'
+          case 'endAt': return 'am.end_at'
+          default : return prop
         }
 
       case 'project':
-        switch(prop){
-          case 'id': return'e.id';
-          case 'asset': return'a.host';
-          case 'port': return'e.port';
-          case 'project': return'p.name';
-          case 'module': return'm.name';
-          case 'type':  return'm.type';
-          case 'state' :return 'es.state';
+        switch (prop) {
+          case 'id': return 'e.id'
+          case 'asset': return 'a.host'
+          case 'port': return 'e.port'
+          case 'project': return 'p.name'
+          case 'module': return 'm.name'
+          case 'type': return 'm.type'
+          case 'state' :return 'es.state'
           // case 'path': return'e.path';
-          default : return prop;
+          default : return prop
         }
 
       case 'dc':
-        switch(prop){
-          case 'id': return'i.id';
-          case 'name': return'i.name';
-          case 'area': return'sa.name';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'i.id'
+          case 'name': return 'i.name'
+          case 'area': return 'sa.name'
+          default : return prop
         }
 
       case 'endpointTab':
-        switch(prop){
-          case 'id': return'e.id';
-          case 'asset': return'a.host';
-          case 'port': return'e.port';
-          case 'project': return'p.name';
-          case 'module': return'm.name';
-          case 'type':  return'm.type';
-          case 'state' :return 'es.state';
+        switch (prop) {
+          case 'id': return 'e.id'
+          case 'asset': return 'a.host'
+          case 'port': return 'e.port'
+          case 'project': return 'p.name'
+          case 'module': return 'm.name'
+          case 'type': return 'm.type'
+          case 'state' :return 'es.state'
           // case 'path': return'e.path';
-          default : return prop;
+          default : return prop
         }
       case 'model':
-        switch(prop){
-          case 'id': return'mo.id';
-          case 'name': return'mo.name';
-          case 'type': return'dictt.value';
-          case 'vendor': return'dict.value';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'mo.id'
+          case 'name': return 'mo.name'
+          case 'type': return 'dictt.value'
+          case 'vendor': return 'dict.value'
+          default : return prop
         }
       case 'promServer':
-        switch(prop){
-          case 'id': return'id';
-          case 'idc': return'idc_id';
-          case 'host': return'host';
-          case 'port': return'port';
-          case 'type': return'type';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'id'
+          case 'idc': return 'idc_id'
+          case 'host': return 'host'
+          case 'port': return 'port'
+          case 'type': return 'type'
+          default : return prop
         }
       case 'mib':
-        switch(prop){
-          case 'id': return'sm.id';
-          case 'name': return'sm.name';
-          case 'filename': return'sm.file_name';
-          case 'updateAt': return'sm.update_at';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'sm.id'
+          case 'name': return 'sm.name'
+          case 'filename': return 'sm.file_name'
+          case 'updateAt': return 'sm.update_at'
+          default : return prop
         }
       case 'operationlog':
-        switch(prop){
-          case 'id': return 'sl.id';
-          case 'username': return 'su.username';
-          case 'ip': return 'sl.ip';
-          case 'operation': return 'sl.operation';
-          case 'type': return 'sl.type';
-          case 'createDate': return 'sl.create_date';
-          case 'time': return 'sl.time';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'sl.id'
+          case 'username': return 'su.username'
+          case 'ip': return 'sl.ip'
+          case 'operation': return 'sl.operation'
+          case 'type': return 'sl.type'
+          case 'createDate': return 'sl.create_date'
+          case 'time': return 'sl.time'
+          default : return prop
         }
       case 'temrminallog':
-        switch(prop){
-          case 'protocol': return 'protocol';
-          case 'startTime': return 'startTime';
-          default : return prop;
+        switch (prop) {
+          case 'protocol': return 'protocol'
+          case 'startTime': return 'startTime'
+          default : return prop
         }
       case 'alertRules':
-        switch(prop){
-          case 'id': return'ar.id';
-          case 'alertName': return'ar.alert_name';
-          case 'threshold': return'ar.threshold';
-          case 'severity': return'ar.severity';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'ar.id'
+          case 'alertName': return 'ar.alert_name'
+          case 'threshold': return 'ar.threshold'
+          case 'severity': return 'ar.severity'
+          default : return prop
         }
       case 'exprTemp':
-        switch(prop){
-          case 'id': return'id';
-          case 'name': return'name';
-          case 'gname': return'gname';
-          default : return prop;
+        switch (prop) {
+          case 'id': return 'id'
+          case 'name': return 'name'
+          case 'gname': return 'gname'
+          default : return prop
         }
-      default: break;
+      default: break
     }
   },
   // 本地正序
   asce (prop) {
     return function (obj1, obj2) {
-      let val1 = obj1[prop];
-      let val2 = obj2[prop];
-      if (!isNaN(val1) && !isNaN(val2) && prop==='value') {
-        val1 = Number(val1);
-        val2 = Number(val2);
+      let val1 = obj1[prop]
+      let val2 = obj2[prop]
+      if (!isNaN(val1) && !isNaN(val2) && prop === 'value') {
+        val1 = Number(val1)
+        val2 = Number(val2)
       }
-      if(prop==='time'){
-        val1 = tableSet.strTodate(val1);
-        val2 = tableSet.strTodate(val2);
+      if (prop === 'time') {
+        val1 = tableSet.strTodate(val1)
+        val2 = tableSet.strTodate(val2)
       }
-      if(prop==='element'){
-        if(val1.alias){
-          val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g,"");
-        }else{
-          val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g,"");
+      if (prop === 'element') {
+        if (val1.alias) {
+          val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g, '')
+        } else {
+          val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g, '')
         }
-        if(val2.alias){
-          val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g,"");
-        }else{
-          val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g,"");
+        if (val2.alias) {
+          val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g, '')
+        } else {
+          val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g, '')
         }
       }
       if (val1 < val2) {
-        return -1;
+        return -1
       } else if (val1 > val2) {
-        return 1;
+        return 1
       } else {
-        return 0;
+        return 0
       }
     }
   },
-  //本地倒序
+  // 本地倒序
   desc (prop) {
     return function (obj1, obj2) {
-      let val1 = obj1[prop];
-      let val2 = obj2[prop];
-      if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop!=='time') {
-        val1 = Number(val1);
-        val2 = Number(val2);
+      let val1 = obj1[prop]
+      let val2 = obj2[prop]
+      if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop !== 'time') {
+        val1 = Number(val1)
+        val2 = Number(val2)
       }
-      if(prop==='time'){
-        val1 = tableSet.strTodate(val1);
-        val2 = tableSet.strTodate(val2);
+      if (prop === 'time') {
+        val1 = tableSet.strTodate(val1)
+        val2 = tableSet.strTodate(val2)
       }
-      if(prop==='element'){
-        if(val1.alias){
-          val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g,"");
-        }else{
-          val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g,"");
+      if (prop === 'element') {
+        if (val1.alias) {
+          val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g, '')
+        } else {
+          val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g, '')
         }
-        if(val2.alias){
-          val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g,"");
-        }else{
-          val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g,"");
+        if (val2.alias) {
+          val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g, '')
+        } else {
+          val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g, '')
         }
       }
       if (val1 < val2) {
-        return 1;
+        return 1
       } else if (val1 > val2) {
-        return -1;
+        return -1
       } else {
-        return 0;
+        return 0
       }
     }
   },
   // 转化时间字符串为时间戳
-  strTodate(str){
-    let date = str.trim();
-    date = date.substring(0,19);
-    date = date.replace(/-/g,'/'); //必须把日期'-'转为'/'
-    return new Date(date).getTime();
+  strTodate (str) {
+    let date = str.trim()
+    date = date.substring(0, 19)
+    date = date.replace(/-/g, '/') // 必须把日期'-'转为'/'
+    return new Date(date).getTime()
   }
 }
 
-export function  getMetricTypeValue(queryItem,type){
-  let copy=JSON.parse(JSON.stringify(queryItem));
+export function getMetricTypeValue (queryItem, type) {
+  let copy = JSON.parse(JSON.stringify(queryItem))
   switch (type) {
-    case 'min':
-      let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1];
-      return min;
-    case 'max':
-      let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1];
-      return max;
-    case 'avg':
-      copy = copy.map(t=>parseFloat(t[1]));
-      let sum = eval(copy.join('+'));
-      let avg = sum / copy.length;
-      return avg;
-    case 'last':
-      let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
-      return last;
-    case 'first':
-      let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length-1][1];
-      return first;
-    case 'total':
-      copy = copy.map(t=>parseFloat(t[1]));
-      let total = eval(copy.join('+'));
-      return total;
+    case 'min': {
+      const min = copy.sort((x, y) => { return parseFloat(x[1]) - parseFloat(y[1]) })[0][1]
+      return min
+    }
+    case 'max': {
+      const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
+      return max
+    }
+    case 'avg': {
+      copy = copy.map(t => parseFloat(t[1]))
+      const sum = eval(copy.join('+'))
+      const avg = sum / copy.length
+      return avg
+    }
+    case 'last': {
+      const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
+      return last
+    }
+    case 'first': {
+      const first = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[copy.length - 1][1]
+      return first
+    }
+    case 'total': {
+      copy = copy.map(t => parseFloat(t[1]))
+      const total = eval(copy.join('+'))
+      return total
+    }
   }
 }
 
-export function blankPromise() {
-  return new Promise(resolve => {resolve();});
+export function blankPromise () {
+  return new Promise(resolve => { resolve() })
 }
 
-export function clickLegend(echart,legendName,index){
-  if(echart){
-
+export function clickLegend (echart, legendName, index) {
+  if (echart) {
+    //
   }
 }
 
-export function showTableTooltip(content, show = true, e) {
-  //console.info(content, e)
+export function showTableTooltip (content, show = true, e) {
+  // console.info(content, e)
   if (show) {
-    let dom = document.querySelector(".table-tooltip");
-    dom.innerHTML = content;
-    dom.setAttribute("style",  `visibility: visible; top: ${e.clientY-e.offsetY+e.target.offsetHeight*0.5-dom.offsetHeight*0.5}px; left: ${e.clientX-e.offsetX+e.target.offsetWidth}px`);
+    const dom = document.querySelector('.table-tooltip')
+    dom.innerHTML = content
+    dom.setAttribute('style', `visibility: visible; top: ${e.clientY - e.offsetY + e.target.offsetHeight * 0.5 - dom.offsetHeight * 0.5}px; left: ${e.clientX - e.offsetX + e.target.offsetWidth}px`)
   }
 }
-export function hideTableTooltip() {
-  let dom = document.querySelector(".table-tooltip");
-  dom.setAttribute("style", "visibility: hidden;");
-  dom.innerHTML = "";
+export function hideTableTooltip () {
+  const dom = document.querySelector('.table-tooltip')
+  dom.setAttribute('style', 'visibility: hidden;')
+  dom.innerHTML = ''
 }
 
-/*function getTdDom(dom) {
+/* function getTdDom(dom) {
   let tagName = dom.tagName;
   if (tagName.toLowerCase() === 'td') {
     return dom;
   } else {
     return getTdDom(dom.parentElement);
   }
-}*/
+} */
diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
index 3222a1bdf..06e9cfe49 100644
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -1,9 +1,8 @@
 import vm from '../../../main'
-import ca from "element-ui/src/locale/lang/ca";
-//ipv4 ip校验
-export function host(rule, value, callback) {
-  if(!value || value.trim() ==''){
-    callback();
+// ipv4 ip校验
+export function host (rule, value, callback) {
+  if (!value || value.trim() == '') {
+    callback()
   }
   const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
   setTimeout(() => {
@@ -14,13 +13,13 @@ export function host(rule, value, callback) {
     }
   }, 100)
 }
-export function hostPlus(rule,value,callback){
-  if(!value || value.trim() ==''){
-    callback();
+export function hostPlus (rule, value, callback) {
+  if (!value || value.trim() == '') {
+    callback()
   }
   const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
   const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
-  const domin = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+  const domin = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
 
   setTimeout(() => {
     if (ipv4.test(value) || ipv6.test(value) || domin.test(value)) {
@@ -29,10 +28,9 @@ export function hostPlus(rule,value,callback){
       callback(new Error(vm.$t('validate.host')))
     }
   }, 100)
-
 }
 
-export function phone(rule, value, callback) {
+export function phone (rule, value, callback) {
   const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
   setTimeout(() => {
     if (!value) {
@@ -49,36 +47,36 @@ export function phone(rule, value, callback) {
   }, 100)
 }
 
-export function port(rule, value, callback) {
+export function port (rule, value, callback) {
   setTimeout(() => {
     if (!value) {
-      callback();
-    } else if(isNaN(Number(value))){
+      callback()
+    } else if (isNaN(Number(value))) {
       callback(new Error(vm.$t('validate.number')))
-    }else{
-      if(value < 1 ||value > 65535){
+    } else {
+      if (value < 1 || value > 65535) {
         callback(new Error(vm.$t('validate.port')))
-      }else{
-        callback();
+      } else {
+        callback()
       }
     }
   }, 100)
 }
 
-export function nzNumber(rule, value, callback) {
+export function nzNumber (rule, value, callback) {
   setTimeout(() => {
     if (!value) {
-      callback();
-    } else if(isNaN(Number(value))){
+      callback()
+    } else if (isNaN(Number(value))) {
       callback(new Error(vm.$t('validate.number')))
-    }else{
-      callback();
+    } else {
+      callback()
     }
   }, 100)
 }
 
-export function noSpecialChar(rule, value, callback){
-  const charReg = /\w+/;
+export function noSpecialChar (rule, value, callback) {
+  const charReg = /\w+/
   setTimeout(() => {
     if (charReg.test(value)) {
       callback()
@@ -88,37 +86,36 @@ export function noSpecialChar(rule, value, callback){
   }, 100)
 }
 
-export function integer(rule, value, callback){
+export function integer (rule, value, callback) {
   setTimeout(() => {
-    if(isNaN(Number(value))){
+    if (isNaN(Number(value))) {
       callback(new Error(vm.$t('validate.number')))
-    }else{
-      if(Number.isInteger(Number(value))){
-        callback();
-      }else{
-        callback(new Error(vm.$t('validate.integer')));
+    } else {
+      if (Number.isInteger(Number(value))) {
+        callback()
+      } else {
+        callback(new Error(vm.$t('validate.integer')))
       }
-
     }
   }, 100)
 }
 
-export function positiveInteger(rule, value, callback){
+export function positiveInteger (rule, value, callback) {
   setTimeout(() => {
-    if(isNaN(Number(value))){
+    if (isNaN(Number(value))) {
       callback(new Error(vm.$t('validate.number')))
-    }else{
-      if(Number(value) >=0 ){
-        callback();
-      }else{
+    } else {
+      if (Number(value) >= 0) {
+        callback()
+      } else {
         callback(new Error(vm.$t('validate.positiveInteger')))
       }
     }
   }, 100)
 }
 
-export function domain(rule, value, callback){
-  let urlReg=/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+export function domain (rule, value, callback) {
+  const urlReg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
   setTimeout(() => {
     if (urlReg.test(value)) {
       callback()
@@ -128,19 +125,17 @@ export function domain(rule, value, callback){
   }, 100)
 }
 
-export function uSize(rule, value, callback){
-
+export function uSize (rule, value, callback) {
   setTimeout(() => {
-    if(isNaN(Number(value))){
+    if (isNaN(Number(value))) {
       callback(new Error(vm.$t('validate.number')))
-    }else{
-      let num=Number(value);
-      if(num<0 || num > 47 ){
+    } else {
+      const num = Number(value)
+      if (num < 0 || num > 47) {
         callback(new Error(vm.$t('validate.usize')))
-      }else{
-        callback();
+      } else {
+        callback()
       }
     }
   }, 100)
 }
-
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index c771cbd91..a19e3cbf1 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1,1538 +1,1538 @@
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
 const cn = {
   overall: {
-    dashboard: "仪表盘",
-    project: "系统",
-    alert: "告警",
-    asset: "资产",
-    config: "设置",
-    create: "新增",
-    edit: "编辑",
-    delete: "删除",
-    view: "查看",
-    esc: "取消",
-    cancel: "取消",
-    save: "保存",
-    preview: "预览",
-    download: "下载",
-    upload: "上传",
-    search: "搜索",
-    add: "新增",
-    addProject:"新增",
-    addAssetList: "新增",
-    batchEdit:'批量修改',
-    option: "操作",
-    remark: "描述",
-    clearAll: "清空",
-    clear: "清除",
-    name: "名称",
-    version: "版本",
-    components: "组件",
-    cover: "覆盖",
-    signOut: "登出",
-    select: "选择",
-    ok: "Ok",
-    entity: "实体",
-    all: "全选",
-    value: "值",
-    other: "其他",
+    dashboard: '仪表盘',
+    project: '系统',
+    alert: '告警',
+    asset: '资产',
+    config: '设置',
+    create: '新增',
+    edit: '编辑',
+    delete: '删除',
+    view: '查看',
+    esc: '取消',
+    cancel: '取消',
+    save: '保存',
+    preview: '预览',
+    download: '下载',
+    upload: '上传',
+    search: '搜索',
+    add: '新增',
+    addProject: '新增',
+    addAssetList: '新增',
+    batchEdit: '批量修改',
+    option: '操作',
+    remark: '描述',
+    clearAll: '清空',
+    clear: '清除',
+    name: '名称',
+    version: '版本',
+    components: '组件',
+    cover: '覆盖',
+    signOut: '登出',
+    select: '选择',
+    ok: 'Ok',
+    entity: '实体',
+    all: '全选',
+    value: '值',
+    other: '其他',
     about: '关于',
-    query: "查询",
-    back: "返回",
-    unavailable: "不可用",
-    available: "可用",
-    createChart: "新增图表",
-    createProject: "新增系统",
-    createEndpoint:'新增Endpoint',
-    createAsset: "新增资产",
-    createAlertRule: "新增告警规则",
-    createAccount: "新增用户名",
+    query: '查询',
+    back: '返回',
+    unavailable: '不可用',
+    available: '可用',
+    createChart: '新增图表',
+    createProject: '新增系统',
+    createEndpoint: '新增Endpoint',
+    createAsset: '新增资产',
+    createAlertRule: '新增告警规则',
+    createAccount: '新增用户名',
     createRole: '新增角色',
-    createPrometheusServer: "新增prometheus服务",
-    createDatacenter: "新增数据中心",
-    active: "活跃",
-    type: "类别",
-    detail: "详细信息",
-    changePwd: "修改密码",
-    createCabinet: "创建机柜",
-    createModel: "创建型号",
-    createModule: "创建模块",
-    createMib: "创建MIB",
-    createAssetType:'创建设备类型',
-    createAssetState:'创建设备状态',
-    exportExcel: "导出",
-    importExcel: "导入",
-    importExcelLower: "导入",
-    exportExcelLower: "导出",
-    rollbackImport: "回滚",
-    exportCur: "当前页",
-    exportAll: "总计",
-    importFile: "请上传文件",
-    importTip: "只允许xlsx/xls格式文件",
-    importTipImg: "只允许jpg/png格式文件",
-    dragFileTip: "将文件拖到此处",
-    or: "或",
-    clickUpload: "点击上传",
-    template: "模板",
+    createPrometheusServer: '新增prometheus服务',
+    createDatacenter: '新增数据中心',
+    active: '活跃',
+    type: '类别',
+    detail: '详细信息',
+    changePwd: '修改密码',
+    createCabinet: '创建机柜',
+    createModel: '创建型号',
+    createModule: '创建模块',
+    createMib: '创建MIB',
+    createAssetType: '创建设备类型',
+    createAssetState: '创建设备状态',
+    exportExcel: '导出',
+    importExcel: '导入',
+    importExcelLower: '导入',
+    exportExcelLower: '导出',
+    rollbackImport: '回滚',
+    exportCur: '当前页',
+    exportAll: '总计',
+    importFile: '请上传文件',
+    importTip: '只允许xlsx/xls格式文件',
+    importTipImg: '只允许jpg/png格式文件',
+    dragFileTip: '将文件拖到此处',
+    or: '或',
+    clickUpload: '点击上传',
+    template: '模板',
     result: {
-      total: "总计",
-      failed: "失败",
-      success: "成功",
-      failedDetail: "失败详情",
-      line:"第{0}行:"
+      total: '总计',
+      failed: '失败',
+      success: '成功',
+      failedDetail: '失败详情',
+      line: '第{0}行:'
     },
-    reset: "重置",
-    submit: "保存",
-    noData:'没有数据',
+    reset: '重置',
+    submit: '保存',
+    noData: '没有数据',
     tag: '标签',
-    syncChart:'同步图表',
-    placeHolder: "请输入",
-    toolBox:{
-      zoom:'区域缩放',
-      back:'区域缩放还原',
-      stack: "查看堆叠图",
-      stackBack:'返回原始图'
+    syncChart: '同步图表',
+    placeHolder: '请输入',
+    toolBox: {
+      zoom: '区域缩放',
+      back: '区域缩放还原',
+      stack: '查看堆叠图',
+      stackBack: '返回原始图'
     },
-    SyncSave:'保存同时更新 Assets'
+    SyncSave: '保存同时更新 Assets'
   },
-  setup:{
-    step0:"欢迎",
-    step1:"数据库",
-    step2:"Redis",
-    step3:"系统",
-    host:"Host",
-    port:"端口",
-    language:"语言",
-    welcome:{
-      header:"欢迎使用哪吒安装向导！",
-      guid:"向导将为您做什么?",
-      guid_1:"创建基本的配置",
-      guid_2:"尝试在数据库和Redis设置中查找问题",
-      toContinue:"继续",
-      creatFile:"出于安全原因，您需要通过创建文件来验证安装",
-      createFileTip:"这可以通过执行以下命令来完成",
-      next:"完成后单击“下一步”按钮."
+  setup: {
+    step0: '欢迎',
+    step1: '数据库',
+    step2: 'Redis',
+    step3: '系统',
+    host: 'Host',
+    port: '端口',
+    language: '语言',
+    welcome: {
+      header: '欢迎使用哪吒安装向导！',
+      guid: '向导将为您做什么?',
+      guid_1: '创建基本的配置',
+      guid_2: '尝试在数据库和Redis设置中查找问题',
+      toContinue: '继续',
+      creatFile: '出于安全原因，您需要通过创建文件来验证安装',
+      createFileTip: '这可以通过执行以下命令来完成',
+      next: '完成后单击“下一步”按钮.'
     },
-    database:{
-      configTitle:'配置数据库连接',
-      configTip:"请手动创建数据库，并设置连接到此数据库的配置参数，完成后按“下一步”按钮",
+    database: {
+      configTitle: '配置数据库连接',
+      configTip: '请手动创建数据库，并设置连接到此数据库的配置参数，完成后按“下一步”按钮'
     },
-    redis:{
-      configTitle:'配置Redis连接',
-      configTip:"请设置连接到此redis的配置参数，完成后按“下一步”按钮",
+    redis: {
+      configTitle: '配置Redis连接',
+      configTip: '请设置连接到此redis的配置参数，完成后按“下一步”按钮'
     },
-    system:{
-      configTitle:'系统配置',
-      configTip:"请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port"
+    system: {
+      configTitle: '系统配置',
+      configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port'
     },
-    name:"数据库名称",
-    username:"用户名",
-    password:"密码",
-    alertPath:'网站URL',
-    alertPrefix:'Alert prefix',
-    haMode:'HA mode',
-    haVip:'Virtual IP',
-    next:"下一步",
-    back:"返回",
-    finish:"完成",
-    invalidDb:"数据库配置可能存在一些错误",
-    invalidRedis:"Redis的配置可能有一些错误",
-    invalidPassword:"Redis的密码可能错误",
-    requirePassword:"Redis可能需要密码",
-    wait:"配置已保存，请耐心等待生效",
-    reloadTimeout:'重新启动服务器花了太多时间，安装可能有一些问题',
-    hadConfig:"已经有人开始配置系统",
-    invalidCode:"身份验证无效，请按照{page}中的描述继续",
-    welcomePage:"欢迎页面"
+    name: '数据库名称',
+    username: '用户名',
+    password: '密码',
+    alertPath: '网站URL',
+    alertPrefix: 'Alert prefix',
+    haMode: 'HA mode',
+    haVip: 'Virtual IP',
+    next: '下一步',
+    back: '返回',
+    finish: '完成',
+    invalidDb: '数据库配置可能存在一些错误',
+    invalidRedis: 'Redis的配置可能有一些错误',
+    invalidPassword: 'Redis的密码可能错误',
+    requirePassword: 'Redis可能需要密码',
+    wait: '配置已保存，请耐心等待生效',
+    reloadTimeout: '重新启动服务器花了太多时间，安装可能有一些问题',
+    hadConfig: '已经有人开始配置系统',
+    invalidCode: '身份验证无效，请按照{page}中的描述继续',
+    welcomePage: '欢迎页面'
   },
   webshell: {
-    shellTitle: "本地 Shell",
-    upload: "上传",
-    download: "下载",
-    uploadTitle: "上传",
-    downloadTitle: "下载",
-    uploadButtonTitle: "上传",
-    fileSelect: "选择",
-    downloadButtonTitle: "下载",
-    filePath: "文件路径",
-    closeTip: "是否断开所有连接，关闭窗口？",
-    remember: "记住我的决定"
+    shellTitle: '本地 Shell',
+    upload: '上传',
+    download: '下载',
+    uploadTitle: '上传',
+    downloadTitle: '下载',
+    uploadButtonTitle: '上传',
+    fileSelect: '选择',
+    downloadButtonTitle: '下载',
+    filePath: '文件路径',
+    closeTip: '是否断开所有连接，关闭窗口？',
+    remember: '记住我的决定'
   },
-  pageSize: "条/页",
+  pageSize: '条/页',
   login: {
-    username: "登录名",
-    password: "密码",
-    login: "登录"
+    username: '登录名',
+    password: '密码',
+    login: '登录'
   },
   dashboard: {
-    title: "仪表盘",
+    title: '仪表盘',
     panel: {
-      title: "面板",
+      title: '面板',
       searchItem: {
-        name: "名称"
+        name: '名称'
       },
-      chartTotal:'总和',
-      createPanelTitle: "新增面板",
-      selectPanelTitle: "选择面板",
-      createPanelTitleSec: "新增面板",
-      editPanelTitle: "面板",
-      singleStatErrorTip:'仅支持返回单个系列/表的查询',
+      chartTotal: '总和',
+      createPanelTitle: '新增面板',
+      selectPanelTitle: '选择面板',
+      createPanelTitleSec: '新增面板',
+      editPanelTitle: '面板',
+      singleStatErrorTip: '仅支持返回单个系列/表的查询',
       panelForm: {
-        panelName: "面板名称",
-        panelId: "ID"
+        panelName: '面板名称',
+        panelId: 'ID'
       },
-      createChartTitle: "新增图表",
-      editChartTitle: "编辑图表",
+      createChartTitle: '新增图表',
+      editChartTitle: '编辑图表',
       chartForm: {
-        chartId: "ID",
-        chartName: "图表名称",
-        type: "类型",
-        url: "URL",
-        statistics:'Statistics',
+        chartId: 'ID',
+        chartName: '图表名称',
+        type: '类型',
+        url: 'URL',
+        statistics: 'Statistics',
         sync: '同步到设备',
-        last:'Last',
-        threshold:'阈值',
-        thresholds:'阈值',
+        last: 'Last',
+        threshold: '阈值',
+        thresholds: '阈值',
         typeVal: {
           line: {
-            label: "曲线图"
+            label: '曲线图'
           },
           bar: {
-            label: "柱状图"
+            label: '柱状图'
           },
           table: {
-            label: "表格"
+            label: '表格'
           },
           stackArea: {
-            label: "堆叠区域图"
+            label: '堆叠区域图'
           },
           url: {
-            label: "URL",
-            staticTip:'双大括号中的内容将会在asset页面被替换',
+            label: 'URL',
+            staticTip: '双大括号中的内容将会在asset页面被替换'
           },
-          singleStat:{
-            label:"SingleStat"
+          singleStat: {
+            label: 'SingleStat'
           },
-          pie:{
-            label:"饼图"
+          pie: {
+            label: '饼图'
           },
-          alertList:{
-            label:"告警列表"
+          alertList: {
+            label: '告警列表'
           },
-          text:{
-            label:"文本"
+          text: {
+            label: '文本'
           }
         },
-        statisticsVal:{
-          min:'Min',
-          max:'Max',
-          average:'Average',
-          total:'Total',
-          first:'First',
-          last:'Last',
-          range:'Range',
-          different:'Different',
-          null:'Null'
+        statisticsVal: {
+          min: 'Min',
+          max: 'Max',
+          average: 'Average',
+          total: 'Total',
+          first: 'First',
+          last: 'Last',
+          range: 'Range',
+          different: 'Different',
+          null: 'Null'
         },
-        width: "宽",
-        high: "高",
-        metric: "指标",
-        addMetric: "添加指标",
-        unit: "单位",
-        legend: "图例",
-        legendTip: "使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。",
-        valueMappingTip: '使用{{name}}和{{value}}显示原名和原值\n'+
-          '例如：total alive: {{value}}\n'+
+        width: '宽',
+        high: '高',
+        metric: '指标',
+        addMetric: '添加指标',
+        unit: '单位',
+        legend: '图例',
+        legendTip: '使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。',
+        valueMappingTip: '使用{{name}}和{{value}}显示原名和原值\n' +
+          '例如：total alive: {{value}}\n' +
           '结果为：total alive: 100',
-        option: "操作",
-        alertParam:{
-          param:'参数',
-          select:'选择',
-          alertRule:'告警规则',
-          level:'级别',
-          state:'状态'
+        option: '操作',
+        alertParam: {
+          param: '参数',
+          select: '选择',
+          alertRule: '告警规则',
+          level: '级别',
+          state: '状态'
         },
-        valMapping:{
-          name:'Value mapping',
-          from:'From',
-          to:'To',
-          text:'Text',
-          value:'Value',
-          range:'Range',
+        valMapping: {
+          name: 'Value mapping',
+          from: 'From',
+          to: 'To',
+          text: 'Text',
+          value: 'Value',
+          range: 'Range'
         },
-        legendValue:'Legend option',
-        content:'内容',
-        tooltip:'Tooltip',
-        displayChart:'图表',
-        aggregation:"Aggregation",
+        legendValue: 'Legend option',
+        content: '内容',
+        tooltip: 'Tooltip',
+        displayChart: '图表',
+        aggregation: 'Aggregation'
       },
       chartTableColumn: {
-        metric: "指标",
-        label: "标签",
-        time: "时间",
-        value: "值",
-        element: "元素"
+        metric: '指标',
+        label: '标签',
+        time: '时间',
+        value: '值',
+        element: '元素'
       },
-      startTime: "开始时间",
-      endTime: "结束时间",
-      to: "至",
-      recOne: "最近1小时",
-      recFour: "最近4小时",
-      recOneDay: "最近1日",
-      yesterday: "昨日",
-      recSevenDay: "最近7日",
-      recOneMonth: "最近1月",
-      curMonth: "本月",
-      lastMonth: "上月",
-      customTimeRange: "自定义时间区间",
-      noDate:'无',
-      lastFiveMin: "最近5分钟",
-      lastFifteenMin: "最近15分钟",
-      lastThirtyMin: "最近30分钟",
-      lastOneHour: "最近1小时",
-      lastThreeHour: "最近3小时",
-      lastSixHour: "最近6小时",
-      lastTwelveHour: "最近12小时",
-      lastTwentyFourHour: "最近24小时",
-      lastTwo: "最近2天",
-      lastSevenDay: "最近7天",
-      lastThirtyDay: "最近30天",
+      startTime: '开始时间',
+      endTime: '结束时间',
+      to: '至',
+      recOne: '最近1小时',
+      recFour: '最近4小时',
+      recOneDay: '最近1日',
+      yesterday: '昨日',
+      recSevenDay: '最近7日',
+      recOneMonth: '最近1月',
+      curMonth: '本月',
+      lastMonth: '上月',
+      customTimeRange: '自定义时间区间',
+      noDate: '无',
+      lastFiveMin: '最近5分钟',
+      lastFifteenMin: '最近15分钟',
+      lastThirtyMin: '最近30分钟',
+      lastOneHour: '最近1小时',
+      lastThreeHour: '最近3小时',
+      lastSixHour: '最近6小时',
+      lastTwelveHour: '最近12小时',
+      lastTwentyFourHour: '最近24小时',
+      lastTwo: '最近2天',
+      lastSevenDay: '最近7天',
+      lastThirtyDay: '最近30天',
       refreshInterval: {
-        never: "关闭",
-        oneMinute: "1分钟",
-        threeMinutes: "3分钟",
-        fiveMinutes: "5分钟",
-        tenMinutes: "10分钟"
+        never: '关闭',
+        oneMinute: '1分钟',
+        threeMinutes: '3分钟',
+        fiveMinutes: '5分钟',
+        tenMinutes: '10分钟'
       },
-      view: "查看",
-      confirm: "Ok",
-      cancel: "取消",
-      lastTwoDay: "最近2天",
-      moreTitle:'仅显示 20 个时间序列。',
-      moreTitleOther:'仅显示 10 条数据。',
-      showAll:'全部显示 ',
-      showAllOther:'全部数据 ',
+      view: '查看',
+      confirm: 'Ok',
+      cancel: '取消',
+      lastTwoDay: '最近2天',
+      moreTitle: '仅显示 20 个时间序列。',
+      moreTitleOther: '仅显示 10 条数据。',
+      showAll: '全部显示 ',
+      showAllOther: '全部数据 '
     },
     metric: {
-      name: "指标名称",
-      normal: "普通",
-      expert: "专家",
-      label: "指标标签",
-      addMetric: "添加指标",
-      expertTip: "请输入表达式",
-      goPanelTip: "是否前去看板,查看创建的图表？",
-      previewChart: "预览图表",
-      singleChartShow: "单图展示",
-      multiChartsShow: "多图展示",
-      createPanel: "创建面板",
-      selectPanel: "选择已有面板",
-      saveChart: "保存图表",
-      saveChartToPanel: "保存图表到看板"
+      name: '指标名称',
+      normal: '普通',
+      expert: '专家',
+      label: '指标标签',
+      addMetric: '添加指标',
+      expertTip: '请输入表达式',
+      goPanelTip: '是否前去看板,查看创建的图表？',
+      previewChart: '预览图表',
+      singleChartShow: '单图展示',
+      multiChartsShow: '多图展示',
+      createPanel: '创建面板',
+      selectPanel: '选择已有面板',
+      saveChart: '保存图表',
+      saveChartToPanel: '保存图表到看板'
     },
     metricPreview: {
-      title: "探索",
-      inputTip:'输入PromQL查询语句',
-      runQuery:'查询',
-      historyTip:'{hour}小时内查询了{time}次',
+      title: '探索',
+      inputTip: '输入PromQL查询语句',
+      runQuery: '查询',
+      historyTip: '{hour}小时内查询了{time}次'
     },
-    refresh: "刷新",
-    edit: "编辑",
-    delete: "删除",
-    screen: "全屏",
-    duplicate:'复制',
+    refresh: '刷新',
+    edit: '编辑',
+    delete: '删除',
+    screen: '全屏',
+    duplicate: '复制',
     overview: {
-      title: "系统总览",
-      contentTitle: "Nezha 管理系统",
+      title: '系统总览',
+      contentTitle: 'Nezha 管理系统',
       traffic: '流量',
-      projectTopoLogy:"系统拓扑",
+      projectTopoLogy: '系统拓扑',
       asset: {
-        title: "资产",
-        assetType: "资产类型统计",
-        modelStat: "型号",
-        dcStat: "数据中心",
-        num: "数量",
-        alert: "告警",
-        alertTotal: "总计",
-        alertP3: "P3",
-        alertP2: "P2",
-        alertP1: "P1",
-        inStock: "在库",
-        outStock: "出库",
-        pingUp: "Up",
-        pingDown: "Down",
-        host: "主机",
+        title: '资产',
+        assetType: '资产类型统计',
+        modelStat: '型号',
+        dcStat: '数据中心',
+        num: '数量',
+        alert: '告警',
+        alertTotal: '总计',
+        alertP3: 'P3',
+        alertP2: 'P2',
+        alertP1: 'P1',
+        inStock: '在库',
+        outStock: '出库',
+        pingUp: 'Up',
+        pingDown: 'Down',
+        host: '主机',
         dropDownLabel: {
-          type: "类型",
-          model: "型号",
-          dc: "数据中心"
+          type: '类型',
+          model: '型号',
+          dc: '数据中心'
         }
       },
       project: {
-        project: "系统",
-        name: "名称",
-        module: "模块",
-        endpoint: "Endpoint"
+        project: '系统',
+        name: '名称',
+        module: '模块',
+        endpoint: 'Endpoint'
       },
       module: {
-        module: "模块",
+        module: '模块'
       },
       endpoint: {
-        endpoint: "Endpoints",
+        endpoint: 'Endpoints'
       },
       dataCenter: {
-        dataCenter: "数据中心",
-        cabinet: "机柜",
-        promServer: "prometheus 服务"
+        dataCenter: '数据中心',
+        cabinet: '机柜',
+        promServer: 'prometheus 服务'
       },
       alert: {
         alertMessage: '告警信息',
-        level: "级别",
-        alertRule: "告警规则",
-        ruleNum: "告警规则总数",
-        alertNum: "告警数量",
-        alertRuleTopN: "根据告警规则统计告警消息数量TOP10",
-        assetTopN: "根据资产统计告警消息数量TOP",
-        top: "Top",
+        level: '级别',
+        alertRule: '告警规则',
+        ruleNum: '告警规则总数',
+        alertNum: '告警数量',
+        alertRuleTopN: '根据告警规则统计告警消息数量TOP10',
+        assetTopN: '根据资产统计告警消息数量TOP',
+        top: 'Top',
         chart: {
-          chartTitle: "告警趋势"
+          chartTitle: '告警趋势'
         },
-        moduleTopN: "根据模块列出Top告警信息"
+        moduleTopN: '根据模块列出Top告警信息'
       },
       mapTooltip: {
-        asset: "资产",
-        state: "状态",
-        ping: "ping",
-        inStock: "在库",
-        outStock: "出库",
-        active: "在线",
-        inactive: "宕机",
-        alert: "告警",
-        P1: "P1",
-        P2: "P2",
-        P3: "P3",
-        endpoint: "Endpoint",
-        total: "总计",
-        up: "up",
-        down: "down",
-        prometheus: "prometheus",
+        asset: '资产',
+        state: '状态',
+        ping: 'ping',
+        inStock: '在库',
+        outStock: '出库',
+        active: '在线',
+        inactive: '宕机',
+        alert: '告警',
+        P1: 'P1',
+        P2: 'P2',
+        P3: 'P3',
+        endpoint: 'Endpoint',
+        total: '总计',
+        up: 'up',
+        down: 'down',
+        prometheus: 'prometheus'
       }
     }
   },
   validate: {
-    required: "必填项",
-    number: "必须是数字",
-    email: "不合法的E-mail地址",
-    tel: "不合法的电话号码",
-    host: "不合法的IP",
-    fileSize: "文件过大",
-    port: "不合法的端口",
-    special: "不能包含特殊字符",
+    required: '必填项',
+    number: '必须是数字',
+    email: '不合法的E-mail地址',
+    tel: '不合法的电话号码',
+    host: '不合法的IP',
+    fileSize: '文件过大',
+    port: '不合法的端口',
+    special: '不能包含特殊字符',
     config: {
       account: {}
     },
-    integer: "必须是整数",
-    positiveInteger: "必须是正整数",
-    domain: "不合法的域名",
-    usize: "必须是(1 - 49)的数字",
-    url: "不合法的URL",
-    uSize: "必须是(1 - 47)的数字",
-    requiredIdc:'机房为必选项',
-    tooLong:"文本太长",
-    key:"不合法的值",
+    integer: '必须是整数',
+    positiveInteger: '必须是正整数',
+    domain: '不合法的域名',
+    usize: '必须是(1 - 49)的数字',
+    url: '不合法的URL',
+    uSize: '必须是(1 - 47)的数字',
+    requiredIdc: '机房为必选项',
+    tooLong: '文本太长',
+    key: '不合法的值'
   },
   search: {
-    searchTip: "点击或回车执行搜索",
-    recentSearch: "搜索记录",
-    noRecentSearch: "无搜索记录"
+    searchTip: '点击或回车执行搜索',
+    recentSearch: '搜索记录',
+    noRecentSearch: '无搜索记录'
   },
   tip: {
-    confirmDelete: "确认删除吗？",
-    confirmOvertime: "确定关闭吗?", //Are you sure you want to delete?
-    killTerm:'确认关闭 terminal 吗？',
-    confirmBatchDelete:'确定删除这{0}条数据吗？',
-    assetConfirmDelete: "关联的Endpoint和告警将会被删除，确认删除吗？",
-    yes: "是",
-    no: "否",
-    deleteSuccess: "删除成功",
-    saveSuccess: "保存成功",
-    addSuccess: "添加成功",
-    duplicateSuccess: '复制成功', //"复制成功"
-    coverSuccess: "覆盖成功",
-    refreshLater: "请稍后刷新",
-    testSuccess: "测试成功",
-    downloadSuccess: "下载成功",
-    uploadSuccess: "上传成功",
-    pressEnterToAdd: "回车添加新行",
-    resetSuccess: "重置成功",
-    syncSuccess:'同步成功',
-    syncTip:"此操作可能造成原有数据或图表被覆盖，确认同步吗？",
-    noImportFile:'没有可导入的文件',
-    noAccess: "无访问权限",
-    confirmDuplicate:"确认复制吗？",
-    confirmCancel:'您所做的修改将不会被保存？',
+    confirmDelete: '确认删除吗？',
+    confirmOvertime: '确定关闭吗?', // Are you sure you want to delete?
+    killTerm: '确认关闭 terminal 吗？',
+    confirmBatchDelete: '确定删除这{0}条数据吗？',
+    assetConfirmDelete: '关联的Endpoint和告警将会被删除，确认删除吗？',
+    yes: '是',
+    no: '否',
+    deleteSuccess: '删除成功',
+    saveSuccess: '保存成功',
+    addSuccess: '添加成功',
+    duplicateSuccess: '复制成功', // "复制成功"
+    coverSuccess: '覆盖成功',
+    refreshLater: '请稍后刷新',
+    testSuccess: '测试成功',
+    downloadSuccess: '下载成功',
+    uploadSuccess: '上传成功',
+    pressEnterToAdd: '回车添加新行',
+    resetSuccess: '重置成功',
+    syncSuccess: '同步成功',
+    syncTip: '此操作可能造成原有数据或图表被覆盖，确认同步吗？',
+    noImportFile: '没有可导入的文件',
+    noAccess: '无访问权限',
+    confirmDuplicate: '确认复制吗？',
+    confirmCancel: '您所做的修改将不会被保存？'
   },
   asset: {
-    asset: "资产",
-    assetType:'资产类型',//'资产类型'
-    batchEditAsset:'批量修改资产',
-    selectAsset:'已选择的资产',
+    asset: '资产',
+    assetType: '资产类型', // '资产类型'
+    batchEditAsset: '批量修改资产',
+    selectAsset: '已选择的资产',
     editAssetTab: {
-      title: "新增资产",
-      sn: "SN",
-      host: "主机",
-      state: "状态",
-      modelId: "模块",
-      alert: "告警信息",
-      assetInfo: "资产信息",
-      assetType: "资产类型",
-      vendor: "厂商/型号",
+      title: '新增资产',
+      sn: 'SN',
+      host: '主机',
+      state: '状态',
+      modelId: '模块',
+      alert: '告警信息',
+      assetInfo: '资产信息',
+      assetType: '资产类型',
+      vendor: '厂商/型号',
       vendorTab: {
-        vendor: "厂商/型号",
-        vendorName: "新厂商",
-        existVendor: "已有厂商",
-        modelName: "新型号",
-        existModel: "已有型号"
+        vendor: '厂商/型号',
+        vendorName: '新厂商',
+        existVendor: '已有厂商',
+        modelName: '新型号',
+        existModel: '已有型号'
       },
-      purchaseDate: "购买日期",
-      dataSelectTip: "请选择日期",
-      dc: "数据中心",
-      dcName: "数据中心名称",
+      purchaseDate: '购买日期',
+      dataSelectTip: '请选择日期',
+      dc: '数据中心',
+      dcName: '数据中心名称',
       AddIdcTab: {
-        title: "新增数据中心",
-        dcName: "数据中心名称",
-        location: "地区",
-        principal: "负责人",
-        tel: "电话"
+        title: '新增数据中心',
+        dcName: '数据中心名称',
+        location: '地区',
+        principal: '负责人',
+        tel: '电话'
       },
       editIdcTab: {
-        title: "编辑数据中心",
-        dcName: "数据中心名称",
-        location: "地区",
-        principal: "负责人",
-        tel: "电话"
+        title: '编辑数据中心',
+        dcName: '数据中心名称',
+        location: '地区',
+        principal: '负责人',
+        tel: '电话'
       },
-      location: "地区",
-      principal: "负责人",
-      tel: "电话",
-      cabinet: "机柜",
+      location: '地区',
+      principal: '负责人',
+      tel: '电话',
+      cabinet: '机柜',
       AddCabinetTab: {
-        title: "新增机柜",
-        name: "名称",
-        uSize: "U位",
-        remark: "描述",
-        DC: "数据中心"
+        title: '新增机柜',
+        name: '名称',
+        uSize: 'U位',
+        remark: '描述',
+        DC: '数据中心'
       },
       editCabinetTab: {
-        title: "编辑机柜",
-        name: "名称",
-        uSize: "U位",
-        remark: "描述",
-        DC: "数据中心"
+        title: '编辑机柜',
+        name: '名称',
+        uSize: 'U位',
+        remark: '描述',
+        DC: '数据中心'
       },
-      uSize: "U位",
-      remark: "描述",
-      cli: "CLI账号",
-      loginType: "登录类型",
-      password: "密码",
-      ssh: "SSH-Key",
-      account: "用户名",
-      port: "端口",
-      upload: "上传",
-      clickToUpload: "上传"
+      uSize: 'U位',
+      remark: '描述',
+      cli: 'CLI账号',
+      loginType: '登录类型',
+      password: '密码',
+      ssh: 'SSH-Key',
+      account: '用户名',
+      port: '端口',
+      upload: '上传',
+      clickToUpload: '上传'
     },
     tableTitle: {
-      id: "ID",
-      assetType: "资产类型",
-      device: "SN",
-      host: "Host",
-      assetState: "状态",
-      modules: "Endpoint",
-      alerts: "告警信息",
-      dataCenter: "数据中心",
-      cabinet: "机柜",
-      model: "型号",
-      manufacturer: "厂商",
-      procurementDate: "购买日期",
-      principal: "负责人",
-      principalTel: "电话",
-      option: "操作",
-      assetPing: "Ping",
-      lastReply:'Ping最后应答',
-      vendor: "厂商"
+      id: 'ID',
+      assetType: '资产类型',
+      device: 'SN',
+      host: 'Host',
+      assetState: '状态',
+      modules: 'Endpoint',
+      alerts: '告警信息',
+      dataCenter: '数据中心',
+      cabinet: '机柜',
+      model: '型号',
+      manufacturer: '厂商',
+      procurementDate: '购买日期',
+      principal: '负责人',
+      principalTel: '电话',
+      option: '操作',
+      assetPing: 'Ping',
+      lastReply: 'Ping最后应答',
+      vendor: '厂商'
     },
     tagTableTitle: {
-      projectName: "系统名称",
-      moduleName: "模块名称",
-      endPoint: "EndPoint",
-      alert: "告警"
+      projectName: '系统名称',
+      moduleName: '模块名称',
+      endPoint: 'EndPoint',
+      alert: '告警'
     },
-    assets: "资产",
-    pingActive: "存活",
-    assetStatPre: "最后应答:",
-    assetStatDown: "未Ping通",
-    pingInactive: "宕机",
+    assets: '资产',
+    pingActive: '存活',
+    assetStatPre: '最后应答:',
+    assetStatDown: '未Ping通',
+    pingInactive: '宕机',
     left: {
-      dataCenter: "数据中心",
-      assetType: "资产类型",
-      vendor: "厂商",
-      ping: "Ping"
+      dataCenter: '数据中心',
+      assetType: '资产类型',
+      vendor: '厂商',
+      ping: 'Ping'
     },
-    editAsset: "编辑资产",
-    createAsset: "新增资产",
-    host: "Host",
-    state: "状态",
-    remark: "描述",
-    cli: "CLI账号",
-    loginType: "登录类型",
-    password: "密码",
-    ssh: "SSH key",
-    protocol: "协议",
-    sshProtocol: "SSH",
-    telnetProtocol: "Telnet",
-    userTip: "用户名提示",
-    passwordTip: "密码提示",
-    reloginPasswordTip: "RELOGIN提示",
-    userPwdIntroduce: "请指定用户名和密码提示以便TELNET登录过程可自动运行",
-    reLoginPwdIntroduce: "请指定密码提示以便RELOGIN登录过程可自动运行",
-    account: "用户名",
-    port: "端口",
-    upload: "上传",
-    clickToUpload: "上传",
-    clickToCover: "覆盖",
-    sshKeyWasConfig: "SSH-KEY已配置",
-    exporter: "Exporter",
-    assetInfo: "资产信息",
-    vendorModel: "厂商/型号",
-    purchaseDate: "购买日期",
-    location: "位置",
-    sn: "SN",
-    uSize: "U位",
-    inStock: "在库",
-    notInStock: "出库",
-    suspended:'停用',
-    principal: "负责人",
-    tel: "电话",
-    featureTitle: "属性",
-    endpointUpNum:'代表正常的数量',
-    endpointNum:'代表总的数量',
-    active:"Alive",// "存活",
-    total:"Total", // "总数",
-    down: "Down",
+    editAsset: '编辑资产',
+    createAsset: '新增资产',
+    host: 'Host',
+    state: '状态',
+    remark: '描述',
+    cli: 'CLI账号',
+    loginType: '登录类型',
+    password: '密码',
+    ssh: 'SSH key',
+    protocol: '协议',
+    sshProtocol: 'SSH',
+    telnetProtocol: 'Telnet',
+    userTip: '用户名提示',
+    passwordTip: '密码提示',
+    reloginPasswordTip: 'RELOGIN提示',
+    userPwdIntroduce: '请指定用户名和密码提示以便TELNET登录过程可自动运行',
+    reLoginPwdIntroduce: '请指定密码提示以便RELOGIN登录过程可自动运行',
+    account: '用户名',
+    port: '端口',
+    upload: '上传',
+    clickToUpload: '上传',
+    clickToCover: '覆盖',
+    sshKeyWasConfig: 'SSH-KEY已配置',
+    exporter: 'Exporter',
+    assetInfo: '资产信息',
+    vendorModel: '厂商/型号',
+    purchaseDate: '购买日期',
+    location: '位置',
+    sn: 'SN',
+    uSize: 'U位',
+    inStock: '在库',
+    notInStock: '出库',
+    suspended: '停用',
+    principal: '负责人',
+    tel: '电话',
+    featureTitle: '属性',
+    endpointUpNum: '代表正常的数量',
+    endpointNum: '代表总的数量',
+    active: 'Alive', // "存活",
+    total: 'Total', // "总数",
+    down: 'Down'
   },
   config: {
-    config: "设置",
+    config: '设置',
     account: {
-      accountList: "用户列表",
-      account: "用户",
-      roles:"角色",
-      language: "语言",
-      receiver: "接收人",
-      createTime: "创建时间",
-      enable: "可用",
-      option: "操作",
-      accountId: "用户ID",
-      createAccount: "新增用户",
-      editAccount: "编辑用户",
-      notCurrentlySupport: "暂不支持",
-      password: "密码",
-      oldPwd: "旧密码",
-      inputOldPwd: "请输入旧密码",
-      newPwd: "新密码",
-      inputNewPwd: "请输入新密码",
-      confirmPwd: "确认密码",
-      inputConfirmPwd: "请再次输入密码",
-      invalidPwd: "无效的密码，最少6个字符",
-      confirmPwdErr: "两次密码输入不一致",
-      reinputPwd: "请再次输入密码",
-      notification: "通知"
+      accountList: '用户列表',
+      account: '用户',
+      roles: '角色',
+      language: '语言',
+      receiver: '接收人',
+      createTime: '创建时间',
+      enable: '可用',
+      option: '操作',
+      accountId: '用户ID',
+      createAccount: '新增用户',
+      editAccount: '编辑用户',
+      notCurrentlySupport: '暂不支持',
+      password: '密码',
+      oldPwd: '旧密码',
+      inputOldPwd: '请输入旧密码',
+      newPwd: '新密码',
+      inputNewPwd: '请输入新密码',
+      confirmPwd: '确认密码',
+      inputConfirmPwd: '请再次输入密码',
+      invalidPwd: '无效的密码，最少6个字符',
+      confirmPwdErr: '两次密码输入不一致',
+      reinputPwd: '请再次输入密码',
+      notification: '通知'
     },
-    roles:{
-      roles:"角色",
-      name:"名称",
-      description:"描述",
-      option: '操作',//"操作"
-      permission:"权限",
-      menu:"菜单",
-      createRole:"新增角色",
-      editRole:"编辑角色",
-      remark:'描述'
+    roles: {
+      roles: '角色',
+      name: '名称',
+      description: '描述',
+      option: '操作', // "操作"
+      permission: '权限',
+      menu: '菜单',
+      createRole: '新增角色',
+      editRole: '编辑角色',
+      remark: '描述'
     },
-    menus:{
-      menus:'菜单',
-      name:"名称",
-      remark:"备注",
-      option: '操作',//"操作"
-      code:'Code',
-      i18n:'I18n',
-      type:'类型',
-      route:'路由',
-      perms:'权限',
-      button:"按钮",
-      menu:"菜单",
-      parent:"上级菜单",
-      mainMenu:"主菜单",
-      createMenu:"新增菜单",
-      editMenu:"编辑菜单",
-      orderNum:"排序",
+    menus: {
+      menus: '菜单',
+      name: '名称',
+      remark: '备注',
+      option: '操作', // "操作"
+      code: 'Code',
+      i18n: 'I18n',
+      type: '类型',
+      route: '路由',
+      perms: '权限',
+      button: '按钮',
+      menu: '菜单',
+      parent: '上级菜单',
+      mainMenu: '主菜单',
+      createMenu: '新增菜单',
+      editMenu: '编辑菜单',
+      orderNum: '排序'
     },
     promServer: {
-      promServerList: "Prometheus服务",
-      promId: "Prometheus服务ID",
-      createProm: "新增Prometheus服务",
-      editProm: "修改Prometheus服务",
-      type: "类别",
-      checkTime: "检查时间",
-      dataCenter:'数据中心',
+      promServerList: 'Prometheus服务',
+      promId: 'Prometheus服务ID',
+      createProm: '新增Prometheus服务',
+      editProm: '修改Prometheus服务',
+      type: '类别',
+      checkTime: '检查时间',
+      dataCenter: '数据中心'
     },
     terminallog: {
-      terminallog: "终端日志",
-      status: "状态",
+      terminallog: '终端日志',
+      status: '状态',
       statusItem: {
-        connecting: "连接中",
-        connectionFailed: "连接失败",
-        over: "已结束",
-        kickedOut: "被踢出",
-        unknownError: "未知错误"
+        connecting: '连接中',
+        connectionFailed: '连接失败',
+        over: '已结束',
+        kickedOut: '被踢出',
+        unknownError: '未知错误'
       },
-      option: "操作",
-      host: "主机",
-      port: "端口",
-      userId: "用户ID",
-      protocol: "协议",
-      user: "终端用户",
-      detail: "终端日志详情",
-      resize: "终端窗口调整",
-      download: "终端文件下载",
-      upload: "终端文件上传",
-      selectFile: "选择文件",
-      SSH: "SSH",
-      TELNET: "TELNET",
-      password:'密码',
-      key:'密钥',
-      endTime:'结束时间',
-      id: "ID",
-      time: "时间",
-      width: "窗口宽度",
-      height: "窗口高度",
-      cols: "显示的列数",
-      rows: "显示的行数",
-      uuid: "唯一标识",
-      path: "路径",
-      file: "文件",
-      success: "成功",
-      fail: "失败",
-      startTime: "开始时间",
-      duration: "持续",
-      remote: "远程连接",
-      replay: "回放",
-      source: "源IP",
-      log: "日志",
-      killErrorTip: "踢出失败",
-      monitor:{monitor: "监控",},
+      option: '操作',
+      host: '主机',
+      port: '端口',
+      userId: '用户ID',
+      protocol: '协议',
+      user: '终端用户',
+      detail: '终端日志详情',
+      resize: '终端窗口调整',
+      download: '终端文件下载',
+      upload: '终端文件上传',
+      selectFile: '选择文件',
+      SSH: 'SSH',
+      TELNET: 'TELNET',
+      password: '密码',
+      key: '密钥',
+      endTime: '结束时间',
+      id: 'ID',
+      time: '时间',
+      width: '窗口宽度',
+      height: '窗口高度',
+      cols: '显示的列数',
+      rows: '显示的行数',
+      uuid: '唯一标识',
+      path: '路径',
+      file: '文件',
+      success: '成功',
+      fail: '失败',
+      startTime: '开始时间',
+      duration: '持续',
+      remote: '远程连接',
+      replay: '回放',
+      source: '源IP',
+      log: '日志',
+      killErrorTip: '踢出失败',
+      monitor: { monitor: '监控' },
       cmd: {
-        cmd: "命令",
-        history: "历史命令",
-        dangerTip: "可能是危险命令",
-        legendTip: "图例说明"
+        cmd: '命令',
+        history: '历史命令',
+        dangerTip: '可能是危险命令',
+        legendTip: '图例说明'
       },
       record: {
-        record: "回放",
-        pause: "暂停",
-        play: "播放",
-        replay: "重播",
-        skipTip: "跳过无操作时间"
-      },
+        record: '回放',
+        pause: '暂停',
+        play: '播放',
+        replay: '重播',
+        skipTip: '跳过无操作时间'
+      }
     },
     dc: {
-      dc: "数据中心",
-      area: "地区",
+      dc: '数据中心',
+      area: '地区',
       dcName: '数据中心名称',
-      selectArea: "选择地区",
-      cabinetNum: "机柜数量",
-      assets: "资产",
-      remark: "备注",
-      cabinets: "机柜",
-      traffic:{
-        title:'流量配置',
-        add:'添加',
-        direction:'方向',
-        tags:'标签',
-        snmpSetting:'SNMP设置',
+      selectArea: '选择地区',
+      cabinetNum: '机柜数量',
+      assets: '资产',
+      remark: '备注',
+      cabinets: '机柜',
+      traffic: {
+        title: '流量配置',
+        add: '添加',
+        direction: '方向',
+        tags: '标签',
+        snmpSetting: 'SNMP设置'
       },
-      createDc: "新建数据中心",
-      editDc: "编辑数据中心",
-      editCabinet: "编辑机柜",
-      usable:'可用',
-      suspended:'停用',
-      state:'状态',
-      longitude:'经度',
-      latitude:'纬度',
+      createDc: '新建数据中心',
+      editDc: '编辑数据中心',
+      editCabinet: '编辑机柜',
+      usable: '可用',
+      suspended: '停用',
+      state: '状态',
+      longitude: '经度',
+      latitude: '纬度'
     },
     model: {
-      model: "资产型号",
-      vendor: "厂商",
-      assets: "资产",
-      editModel: "编辑型号",
-      createModel: "创建型号",
-      remark: "备注",
-      type: "类型"
+      model: '资产型号',
+      vendor: '厂商',
+      assets: '资产',
+      editModel: '编辑型号',
+      createModel: '创建型号',
+      remark: '备注',
+      type: '类型'
     },
     operationlog: {
-      operationlog: "操作日志",
-      id: "ID",
-      username: "用户名",
-      operation: "操作",
-      type: "类型",
-      createDate: "操作时间",
-      ip: "IP",
-      userId: "UserId",
-      operaId: "数据ID",
-      time: "耗时",
-      params: "请求参数",
-      state: "请求结果",
-      operations:{
-        add:'add',
-        query:'query',
-        update:'update',
-        import:'import',
-        export:'export',
-        delete:'delete',
-        reset:'reset',
-        unknown:'unknown'
+      operationlog: '操作日志',
+      id: 'ID',
+      username: '用户名',
+      operation: '操作',
+      type: '类型',
+      createDate: '操作时间',
+      ip: 'IP',
+      userId: 'UserId',
+      operaId: '数据ID',
+      time: '耗时',
+      params: '请求参数',
+      state: '请求结果',
+      operations: {
+        add: 'add',
+        query: 'query',
+        update: 'update',
+        import: 'import',
+        export: 'export',
+        delete: 'delete',
+        reset: 'reset',
+        unknown: 'unknown'
       },
-      response: "响应"
+      response: '响应'
     },
     mib: {
-      mib: "SNMP MIB",
-      fileName: "文件名称",
-      remark: "备注",
-      updateUser: "更新用户",
-      updateAt: "更新时间",
-      editMib: "编辑MIB",
-      models: "型号",
-      modelTip: "请选择型号",
-      createMib: "添加MIB",
-      mibFiles: "MIB文件",
-      uploadTip: "请上传MIB文件",
-      requiredMibFile: "必须上传MIB文件",
-      vendor: "厂商",
-      type: "类型",
-      mibBrowser: "MIB浏览器",
-      noData: "暂无数据"
+      mib: 'SNMP MIB',
+      fileName: '文件名称',
+      remark: '备注',
+      updateUser: '更新用户',
+      updateAt: '更新时间',
+      editMib: '编辑MIB',
+      models: '型号',
+      modelTip: '请选择型号',
+      createMib: '添加MIB',
+      mibFiles: 'MIB文件',
+      uploadTip: '请上传MIB文件',
+      requiredMibFile: '必须上传MIB文件',
+      vendor: '厂商',
+      type: '类型',
+      mibBrowser: 'MIB浏览器',
+      noData: '暂无数据'
     },
     system: {
-      system: "系统设置",
+      system: '系统设置',
       basic: {
-        basic: "基础设置",
-        alertApi: "告警API",
-        assetPingSwith: "资产Ping开关",
-        assetPingInterval: "间隔",
-        exporterTarget: "Exporter路径",
-        scrapeInterval: "获取数据间隔",
-        storageRetention: "本地保留时间",
-        systemName: "系统名称",
-        curUrl: "网站URL",
-        timezone: "时区",
-        defaultCabinetUsize: "机柜默认U位",
-        second:'秒',
-        day:'天',
-        maxSeries:'Query max series',
-        unsaved:'未保存提示',
-        mapConfig:"地图属性",
-        mapTitle:"配置地图",
-        lat:"纬度",
-        lng:"经度",
-        zoom:"缩放"
+        basic: '基础设置',
+        alertApi: '告警API',
+        assetPingSwith: '资产Ping开关',
+        assetPingInterval: '间隔',
+        exporterTarget: 'Exporter路径',
+        scrapeInterval: '获取数据间隔',
+        storageRetention: '本地保留时间',
+        systemName: '系统名称',
+        curUrl: '网站URL',
+        timezone: '时区',
+        defaultCabinetUsize: '机柜默认U位',
+        second: '秒',
+        day: '天',
+        maxSeries: 'Query max series',
+        unsaved: '未保存提示',
+        mapConfig: '地图属性',
+        mapTitle: '配置地图',
+        lat: '纬度',
+        lng: '经度',
+        zoom: '缩放'
       },
       email: {
-        email: "邮件",
-        enable: "使用Email",
-        smtpHost: "SMTP主机",
-        smtpPort: "SMTP端口",
-        smtpAccount: "SMTP账号",
-        smtpPwd: "SMTP密码",
-        sendAccount: "发送账号",
-        testAccount: "测试账号",
-        useSSL: "SSL",
-        useTLS: "TLS",
-        testConnection: "测试连接",
-        pwdTip: "提示：一些邮件提供商需要输入的是Token",
-        sendAccountTip: "提示：发送邮件账号，默认使用SMTP账号作为发送账号",
-        testAccountTip: "提示：仅用来作为测试邮件收件人",
-        sslTip: "如果SMTP端口是465，通常需要启用SSL",
-        tlsTip: "如果SMTP端口是587，通常需要启用TLS"
+        email: '邮件',
+        enable: '使用Email',
+        smtpHost: 'SMTP主机',
+        smtpPort: 'SMTP端口',
+        smtpAccount: 'SMTP账号',
+        smtpPwd: 'SMTP密码',
+        sendAccount: '发送账号',
+        testAccount: '测试账号',
+        useSSL: 'SSL',
+        useTLS: 'TLS',
+        testConnection: '测试连接',
+        pwdTip: '提示：一些邮件提供商需要输入的是Token',
+        sendAccountTip: '提示：发送邮件账号，默认使用SMTP账号作为发送账号',
+        testAccountTip: '提示：仅用来作为测试邮件收件人',
+        sslTip: '如果SMTP端口是465，通常需要启用SSL',
+        tlsTip: '如果SMTP端口是587，通常需要启用TLS'
       },
       terminal: {
-        terminal: "终端",
-        terminalNum: "最大终端数量"
+        terminal: '终端',
+        terminalNum: '最大终端数量'
       },
       ldap: {
-        ldap: "LDAP",
-        address: "LDAP地址",
-        dn: "Bind DN",
-        pwd: "密码",
-        ou: "用户OU",
+        ldap: 'LDAP',
+        address: 'LDAP地址',
+        dn: 'Bind DN',
+        pwd: '密码',
+        ou: '用户OU',
         ouTip: '使用符号 "|" 分隔OU',
-        filter: "用户过滤器",
+        filter: '用户过滤器',
         filterTip: '可能的选项是(cn或uid或sAMAccountName=%(user)s)',
-        map: "属性映射",
+        map: '属性映射',
         mapTip: '属性映射代表怎样将NEZHA用户属性映射到jumpserver用户上;username,email是jumpserver的属性',
-        active: "启用LDAP认证"
+        active: '启用LDAP认证'
       },
       link: {
-        link:'Link',
-        name: "名称",
-        url: "Url",
-        operation: "操作",
-        add: "添加",
-        update: "更新",
-        del: "删除",
-        nameMaxLength:"长度应小于64",
-        uriRequired:'请填写正确的网址'
+        link: 'Link',
+        name: '名称',
+        url: 'Url',
+        operation: '操作',
+        add: '添加',
+        update: '更新',
+        del: '删除',
+        nameMaxLength: '长度应小于64',
+        uriRequired: '请填写正确的网址'
       },
       notification: {
-        notification:'Notification',
-        name: "名称",
-        filePath: "文件路径",
-        operation: "操作",
-        add: "添加",
-        update: "更新",
-        del: "删除",
-        nameMaxLength:"长度应小于64",
-        uriRequired:'必填项',
-        filePathReg:'请输入正确的文件路径'
+        notification: 'Notification',
+        name: '名称',
+        filePath: '文件路径',
+        operation: '操作',
+        add: '添加',
+        update: '更新',
+        del: '删除',
+        nameMaxLength: '长度应小于64',
+        uriRequired: '必填项',
+        filePathReg: '请输入正确的文件路径'
       },
       reset: {
-        reset: "重置",
-        type: "类型",
-        pwd: "密码",
-        metric: "指标",
-        alert: "告警",
-        sysConfig: "系统设置",
-        pwdTip: "请输入密码",
-        promptTitle: "确认密码",
-        yes: "是",
-        no: "否"
+        reset: '重置',
+        type: '类型',
+        pwd: '密码',
+        metric: '指标',
+        alert: '告警',
+        sysConfig: '系统设置',
+        pwdTip: '请输入密码',
+        promptTitle: '确认密码',
+        yes: '是',
+        no: '否'
       }
     },
     assetType: {
-      assetType: "资产类型",
-      parent: "父级",
-      pname: "父级",
-      editAssetType: "编辑资产类型",
-      createAssetType: "新增资产类型"
+      assetType: '资产类型',
+      parent: '父级',
+      pname: '父级',
+      editAssetType: '编辑资产类型',
+      createAssetType: '新增资产类型'
     },
     assetState: {
-      assetState: "资产状态",
-      monitor: "监控",
-      alert: "告警",
-      assetTotal: "资产总数",
-      createAssetState: "新增资产状态",
-      editAssetState: "编辑资产状态",
+      assetState: '资产状态',
+      monitor: '监控',
+      alert: '告警',
+      assetTotal: '资产总数',
+      createAssetState: '新增资产状态',
+      editAssetState: '编辑资产状态'
     },
-    exprTemp:{
-      exprTemp:'expression模板',
-      exprTempInfo:'Expression 模板详情',
-      exprTempRender:'expression模板渲染',
-      exprTempDown:"expression模板下载",
-      exprTempImport:"expression模板导入",
-      exprTempExport:"expression模板导出",
-      exprTempImportCancel:"expression模板导入撤销",
-      name:'名称',
-      gname:'组名',
-      expression:'表达式',
-      remark:'描述',
-      errorStr:'请填写 {errorStr} 的值',
-      edit:'修改表达式模板',
-      create:'创建表达式模板',
-      expressionError:'请填写表达式',
+    exprTemp: {
+      exprTemp: 'expression模板',
+      exprTempInfo: 'Expression 模板详情',
+      exprTempRender: 'expression模板渲染',
+      exprTempDown: 'expression模板下载',
+      exprTempImport: 'expression模板导入',
+      exprTempExport: 'expression模板导出',
+      exprTempImportCancel: 'expression模板导入撤销',
+      name: '名称',
+      gname: '组名',
+      expression: '表达式',
+      remark: '描述',
+      errorStr: '请填写 {errorStr} 的值',
+      edit: '修改表达式模板',
+      create: '创建表达式模板',
+      expressionError: '请填写表达式'
     }
   },
   alert: {
-    alert: "告警",
-    message: "告警信息",
-    rule: "告警规则",
-    alertList: "告警信息",
-    alertConfig: "告警规则",
-    alertName: "告警名称",
-    severity: "等级",
-    description: "描述",
-    summary: "概要",
-    startAt: "开始时间",
-    endAt: "结束时间",
+    alert: '告警',
+    message: '告警信息',
+    rule: '告警规则',
+    alertList: '告警信息',
+    alertConfig: '告警规则',
+    alertName: '告警名称',
+    severity: '等级',
+    description: '描述',
+    summary: '概要',
+    startAt: '开始时间',
+    endAt: '结束时间',
     list: {
-      linked: "关联",
-      type: "类别",
-      state: "状态",
-      charts: "图表",
-      projectAlert: "系统告警",
-      moduleAlert: "模块告警",
-      deviceAlert: "设备告警",
-      pending: "待处理",
-      expired: "已过期",
-      labels: "标签",
-      current: "当前",
-      remark:'备注',
-      id:'ID',
+      linked: '关联',
+      type: '类别',
+      state: '状态',
+      charts: '图表',
+      projectAlert: '系统告警',
+      moduleAlert: '模块告警',
+      deviceAlert: '设备告警',
+      pending: '待处理',
+      expired: '已过期',
+      labels: '标签',
+      current: '当前',
+      remark: '备注',
+      id: 'ID'
     },
     config: {
-      name: "名称",
-      receiver: "用户组",
-      expr: "表达式",
-      for: "持续(秒)",
-      second:'秒',
-      link: "关联",
-      option: "操作",
-      alertConfig: "告警规则",
-      createAlertConfig: "新增告警规则",
-      editAlertConfig: "修改告警规则",
-      P1: "P1",
-      P2: "P2",
-      P3: "P3",
+      name: '名称',
+      receiver: '用户组',
+      expr: '表达式',
+      for: '持续(秒)',
+      second: '秒',
+      link: '关联',
+      option: '操作',
+      alertConfig: '告警规则',
+      createAlertConfig: '新增告警规则',
+      editAlertConfig: '修改告警规则',
+      P1: 'P1',
+      P2: 'P2',
+      P3: 'P3',
       typeOption: {
-        project: "系统",
-        module: "模块",
-        asset: "设备"
+        project: '系统',
+        module: '模块',
+        asset: '设备'
       },
-      alertNum: "告警数量",
-      operator:'比较符',
-      threshold:'阈值',
-      unit:'单位',
+      alertNum: '告警数量',
+      operator: '比较符',
+      threshold: '阈值',
+      unit: '单位',
       chart: {
-        alertRuleInfo: "告警规则",
-        alertNumTrend: "告警数量趋势",
-        affectEntity: "影响"
+        alertRuleInfo: '告警规则',
+        alertNumTrend: '告警数量趋势',
+        affectEntity: '影响'
       }
     },
-    silence:{
-      silence:"告警静默",
-      create:'创建告警静默',
-      edit:'修改告警静默',
-      time:'时间',
-      matcher:'Matcher',
-      reason:'描述',
-      selectTime:'请选择时间',
-      selectMather:'必填项',
-      datacenter:'数据中心',
-      project:'项目',
-      module:'模块',
-      endpoint:'endpoint',
-      asset:'资产',
+    silence: {
+      silence: '告警静默',
+      create: '创建告警静默',
+      edit: '修改告警静默',
+      time: '时间',
+      matcher: 'Matcher',
+      reason: '描述',
+      selectTime: '请选择时间',
+      selectMather: '必填项',
+      datacenter: '数据中心',
+      project: '项目',
+      module: '模块',
+      endpoint: 'endpoint',
+      asset: '资产'
     },
-    P1Rule:'P1: 万分紧急，可导致业务瘫痪的告警',
-    P2Rule:'P2: 急需处理，但不影响业务的告警',
-    P3Rule:'P3: 需要处理，但不紧急的告警',
+    P1Rule: 'P1: 万分紧急，可导致业务瘫痪的告警',
+    P2Rule: 'P2: 急需处理，但不影响业务的告警',
+    P3Rule: 'P3: 需要处理，但不紧急的告警'
   },
   project: {
     chart: {
-      basicTitle: "基础信息",
-      alertStat: "告警状态",
-      endpointStat: "Endpoint状态",
-      projectInfo: "系统信息",
-      endpointInfo: "Endpoint信息"
+      basicTitle: '基础信息',
+      alertStat: '告警状态',
+      endpointStat: 'Endpoint状态',
+      projectInfo: '系统信息',
+      endpointInfo: 'Endpoint信息'
     },
     project: {
-      project: "系统",
-      projectName: "系统名称",
-      editProject: "编辑系统",
-      description: "描述",
-      createProject: "新增系统"
+      project: '系统',
+      projectName: '系统名称',
+      editProject: '编辑系统',
+      description: '描述',
+      createProject: '新增系统'
     },
     module: {
-      module: "模块",
-      moduleName: "模块名称",
-      editModule: "编辑模块",
-      description: "描述",
-      createModule: "新增模块",
+      module: '模块',
+      moduleName: '模块名称',
+      editModule: '编辑模块',
+      description: '描述',
+      createModule: '新增模块',
       tip: {
-        defaultEndpointSet: "默认的Endpoint设置",
-        relation: "模块关联的Endpoint将默认配置以下端口/路径/参数"
+        defaultEndpointSet: '默认的Endpoint设置',
+        relation: '模块关联的Endpoint将默认配置以下端口/路径/参数'
       },
-      version: "版本",
-      walk: "Walk",
-      maxRepetitions: "最大迭代次数",
-      retries: "重试次数",
-      timeout: "连接超时时间",
-      community: "团体",
-      securityLevel: "安全等级",
-      authProtocol: "认证协议",
-      privProtocol: "隐私协议",
-      contextName: "内容名称",
-      privPassword: "隐私密码"
+      version: '版本',
+      walk: 'Walk',
+      maxRepetitions: '最大迭代次数',
+      retries: '重试次数',
+      timeout: '连接超时时间',
+      community: '团体',
+      securityLevel: '安全等级',
+      authProtocol: '认证协议',
+      privProtocol: '隐私协议',
+      contextName: '内容名称',
+      privPassword: '隐私密码'
     },
     endpoint: {
-      createEndpoint: "新增Endpoint",
-      editEndpoint: "编辑Endpoint",
-      endpoint: "Endpoint",
-      endpointId: "Endpoint ID",
-      host: "主机",
-      port: "端口",
-      param: "参数",
-      path: "路径",
-      asset: "资产",
-      lastUpdate: "最后更新时间",
-      moduleParameter: "模块参数",
-      addGraph: "查看图表",
-      element: "元素",
-      value: "值",
-      promExpr: "请输入表达式",
-      dialogTitle: "历史值",
-      hideSameLabels: "隐藏重复标签",
-      stateInfo_230009: "无法获取prometheus服务",
-      stateInfo_230010: "Prometheus服务可用",
-      stateInfo_230011: "Endpoint 连接错误",
-      alerts:"告警",
-      labels:'标签',
+      createEndpoint: '新增Endpoint',
+      editEndpoint: '编辑Endpoint',
+      endpoint: 'Endpoint',
+      endpointId: 'Endpoint ID',
+      host: '主机',
+      port: '端口',
+      param: '参数',
+      path: '路径',
+      asset: '资产',
+      lastUpdate: '最后更新时间',
+      moduleParameter: '模块参数',
+      addGraph: '查看图表',
+      element: '元素',
+      value: '值',
+      promExpr: '请输入表达式',
+      dialogTitle: '历史值',
+      hideSameLabels: '隐藏重复标签',
+      stateInfo_230009: '无法获取prometheus服务',
+      stateInfo_230010: 'Prometheus服务可用',
+      stateInfo_230011: 'Endpoint 连接错误',
+      alerts: '告警',
+      labels: '标签'
     },
     metrics: {
-      metrics: "指标",
-      name: "名称",
-      type: "类型",
-      description: "描述"
-    },
-    topology:{
-      module:'模块',
-      add:'添加',
-      selTwoNode:'请选择两个模块',
-      save:'保存',
-      cancel:'取消',
-      exit:'退出',
-      preview:'预览',
-      addLine:'添加连线',
-      editLine:'编辑连线',
-      lineName:'连线名称',
-      width:'宽',
-      height:'高',
-      dashes:'虚线',
-      option:'设置',
-      arrows:'箭头方向',
-      color:'颜色',
-      chartName:'图表名称',
-      unit:'单位',
-      addModule:'添加模块',
-      editModule:'编辑模块',
-      edit:'编辑',
-      refresh:'刷新',
-      endpoint:'Endpoint Table',
-      asset:'资产信息',
-      total:'图表',
-      info:'模块信息',
-      alert:'告警信息',
-      lineType:'线型',
-      straight:'直线',
-      upload:'上传文件',
-      requiredName:'名称不能为空',
-      imgFormat:'上传图片只能是 JPG/png 格式!',
-      imgSize:'上传图片大小不能超过 2MB!',
-      imgMeasure:'上传的图片宽高必须都大于100!',
-      data:"数据",
-      style:'样式',
-      title:'标题',
-      level:'等级',
-      value:'值',
-      animation:'动画',
-      animationType:'动画类型',
-      animationColor:'动画颜色',
-      link:'链接',
-      fill:'背景',
-      lines:'边框',
-      text:'文字',
-      name:'名称',
-      bac:'背景',
-      bacImage:'背景图片',
-      defaultLineWidth:'默认线宽',
-      defaultLineType:'默认连线类型',
-      lineWidth:'线条宽度',
-      grids:'网格',
-      gridSize:'网格大小',
-      gridColor:'网格颜色',
-      rule:'标尺',
-      ruleColor:"标尺颜色",
-      defaultStartArrow:'默认开始箭头',
-      defaultEndArrow:'默认结束箭头',
-      positionAndSize:"位置和大小",
-      circularBead:'圆角',
-      rotate:'旋转',
-      pl:"内边距 - 左",
-      pt:"内边距 - 上",
-      pr:"内边距 - 右",
-      pb:"内边距 - 下",
-      gradient:'渐变',
-      lineStyle:'线条样式',
-      lineColor:'线条颜色',
-      lineDash:'线条虚实',
-      fromArrow:"起点箭头",
-      toArrow:"终点箭头",
-      arrowColor:"箭头颜色",
-      fontSize:'字体大小',
-      fontColor:'字体颜色',
-      align:'对齐',
-      opacity:'透明度',
-      bounce:"上下跳动",
-      shakeX:'左右跳动',
-      swing:'摇摆',
-      heartBeat:'心跳',
-      flash:'闪烁',
-      fade:'若隐若现',
-      flow:'水流',
-      beads:'水珠流动',
-      dot:'圆点',
-      comet:'彗星',
-      curve:'曲线',
-      polyline:'折线',
-      line:'直线',
-      placeholderImg:'请输入名称',
-      unitError:'请选择对应的目录',
-      imgError:'请上传图片',
-      folder:'目录',
-      selMod:'请个所有节点绑定module',
+      metrics: '指标',
+      name: '名称',
+      type: '类型',
+      description: '描述'
     },
+    topology: {
+      module: '模块',
+      add: '添加',
+      selTwoNode: '请选择两个模块',
+      save: '保存',
+      cancel: '取消',
+      exit: '退出',
+      preview: '预览',
+      addLine: '添加连线',
+      editLine: '编辑连线',
+      lineName: '连线名称',
+      width: '宽',
+      height: '高',
+      dashes: '虚线',
+      option: '设置',
+      arrows: '箭头方向',
+      color: '颜色',
+      chartName: '图表名称',
+      unit: '单位',
+      addModule: '添加模块',
+      editModule: '编辑模块',
+      edit: '编辑',
+      refresh: '刷新',
+      endpoint: 'Endpoint Table',
+      asset: '资产信息',
+      total: '图表',
+      info: '模块信息',
+      alert: '告警信息',
+      lineType: '线型',
+      straight: '直线',
+      upload: '上传文件',
+      requiredName: '名称不能为空',
+      imgFormat: '上传图片只能是 JPG/png 格式!',
+      imgSize: '上传图片大小不能超过 2MB!',
+      imgMeasure: '上传的图片宽高必须都大于100!',
+      data: '数据',
+      style: '样式',
+      title: '标题',
+      level: '等级',
+      value: '值',
+      animation: '动画',
+      animationType: '动画类型',
+      animationColor: '动画颜色',
+      link: '链接',
+      fill: '背景',
+      lines: '边框',
+      text: '文字',
+      name: '名称',
+      bac: '背景',
+      bacImage: '背景图片',
+      defaultLineWidth: '默认线宽',
+      defaultLineType: '默认连线类型',
+      lineWidth: '线条宽度',
+      grids: '网格',
+      gridSize: '网格大小',
+      gridColor: '网格颜色',
+      rule: '标尺',
+      ruleColor: '标尺颜色',
+      defaultStartArrow: '默认开始箭头',
+      defaultEndArrow: '默认结束箭头',
+      positionAndSize: '位置和大小',
+      circularBead: '圆角',
+      rotate: '旋转',
+      pl: '内边距 - 左',
+      pt: '内边距 - 上',
+      pr: '内边距 - 右',
+      pb: '内边距 - 下',
+      gradient: '渐变',
+      lineStyle: '线条样式',
+      lineColor: '线条颜色',
+      lineDash: '线条虚实',
+      fromArrow: '起点箭头',
+      toArrow: '终点箭头',
+      arrowColor: '箭头颜色',
+      fontSize: '字体大小',
+      fontColor: '字体颜色',
+      align: '对齐',
+      opacity: '透明度',
+      bounce: '上下跳动',
+      shakeX: '左右跳动',
+      swing: '摇摆',
+      heartBeat: '心跳',
+      flash: '闪烁',
+      fade: '若隐若现',
+      flow: '水流',
+      beads: '水珠流动',
+      dot: '圆点',
+      comet: '彗星',
+      curve: '曲线',
+      polyline: '折线',
+      line: '直线',
+      placeholderImg: '请输入名称',
+      unitError: '请选择对应的目录',
+      imgError: '请上传图片',
+      folder: '目录',
+      selMod: '请个所有节点绑定module'
+    }
   },
-  date:{
-    week:{
-      one:'星期一',
-      two:'星期二',
-      three:'星期三',
-      four:'星期四',
-      five:'星期五',
-      six:'星期六',
-      seven:'星期日',
+  date: {
+    week: {
+      one: '星期一',
+      two: '星期二',
+      three: '星期三',
+      four: '星期四',
+      five: '星期五',
+      six: '星期六',
+      seven: '星期日'
     }
   },
   el: {
     colorpicker: {
-      confirm: "确定",
-      clear: "清空"
+      confirm: '确定',
+      clear: '清空'
     },
     datepicker: {
-      now: "此刻",
-      today: "今天",
-      cancel: "取消",
-      clear: "清空",
-      confirm: "确定",
-      selectDate: "选择日期",
-      selectTime: "选择时间",
-      startDate: "开始日期",
-      startTime: "开始时间",
-      endDate: "结束日期",
-      endTime: "结束时间",
-      prevYear: "前一年",
-      nextYear: "后一年",
-      prevMonth: "上个月",
-      nextMonth: "下个月",
-      year: "年",
-      month1: "1 月",
-      month2: "2 月",
-      month3: "3 月",
-      month4: "4 月",
-      month5: "5 月",
-      month6: "6 月",
-      month7: "7 月",
-      month8: "8 月",
-      month9: "9 月",
-      month10: "10 月",
-      month11: "11 月",
-      month12: "12 月",
+      now: '此刻',
+      today: '今天',
+      cancel: '取消',
+      clear: '清空',
+      confirm: '确定',
+      selectDate: '选择日期',
+      selectTime: '选择时间',
+      startDate: '开始日期',
+      startTime: '开始时间',
+      endDate: '结束日期',
+      endTime: '结束时间',
+      prevYear: '前一年',
+      nextYear: '后一年',
+      prevMonth: '上个月',
+      nextMonth: '下个月',
+      year: '年',
+      month1: '1 月',
+      month2: '2 月',
+      month3: '3 月',
+      month4: '4 月',
+      month5: '5 月',
+      month6: '6 月',
+      month7: '7 月',
+      month8: '8 月',
+      month9: '9 月',
+      month10: '10 月',
+      month11: '11 月',
+      month12: '12 月',
       weeks: {
-        sun: "日",
-        mon: "一",
-        tue: "二",
-        wed: "三",
-        thu: "四",
-        fri: "五",
-        sat: "六"
+        sun: '日',
+        mon: '一',
+        tue: '二',
+        wed: '三',
+        thu: '四',
+        fri: '五',
+        sat: '六'
       },
       months: {
-        jan: "一月",
-        feb: "二月",
-        mar: "三月",
-        apr: "四月",
-        may: "五月",
-        jun: "六月",
-        jul: "七月",
-        aug: "八月",
-        sep: "九月",
-        oct: "十月",
-        nov: "十一月",
-        dec: "十二月"
+        jan: '一月',
+        feb: '二月',
+        mar: '三月',
+        apr: '四月',
+        may: '五月',
+        jun: '六月',
+        jul: '七月',
+        aug: '八月',
+        sep: '九月',
+        oct: '十月',
+        nov: '十一月',
+        dec: '十二月'
       },
-      week: "周"
+      week: '周'
     },
     select: {
-      loading: "加载中",
-      noMatch: "无匹配数据",
-      noData: "无数据",
-      placeholder: "请选择"
+      loading: '加载中',
+      noMatch: '无匹配数据',
+      noData: '无数据',
+      placeholder: '请选择'
     },
     cascader: {
-      noMatch: "无匹配数据",
-      loading: "加载中",
-      placeholder: "请选择",
-      noData: "暂无数据"
+      noMatch: '无匹配数据',
+      loading: '加载中',
+      placeholder: '请选择',
+      noData: '暂无数据'
     },
     pagination: {
-      goto: "前往",
-      pagesize: "条/页",
-      total: "共 {total} 条",
-      pageClassifier: "页"
+      goto: '前往',
+      pagesize: '条/页',
+      total: '共 {total} 条',
+      pageClassifier: '页'
     },
     messagebox: {
-      title: "提示",
-      confirm: "确定",
-      cancel: "取消",
-      error: "输入的数据不合法!"
+      title: '提示',
+      confirm: '确定',
+      cancel: '取消',
+      error: '输入的数据不合法!'
     },
     upload: {
-      deleteTip: "按 delete 键可删除",
-      delete: "删除",
-      preview: "查看图片",
-      continue: "继续上传"
+      deleteTip: '按 delete 键可删除',
+      delete: '删除',
+      preview: '查看图片',
+      continue: '继续上传'
     },
     table: {
-      emptyText: "暂无数据",
-      confirmFilter: "筛选",
-      resetFilter: "重置",
-      clearFilter: "全部",
-      sumText: "合计"
+      emptyText: '暂无数据',
+      confirmFilter: '筛选',
+      resetFilter: '重置',
+      clearFilter: '全部',
+      sumText: '合计'
     },
     tree: {
-      emptyText: "暂无数据"
+      emptyText: '暂无数据'
     },
     transfer: {
-      noMatch: "无匹配数据",
-      noData: "无数据",
+      noMatch: '无匹配数据',
+      noData: '无数据',
       titles: [
-        "列表 1",
-        "列表 2"
+        '列表 1',
+        '列表 2'
       ],
-      filterPlaceholder: "请输入搜索内容",
-      noCheckedFormat: "共 {total} 项",
-      hasCheckedFormat: "已选 {checked}/{total} 项"
+      filterPlaceholder: '请输入搜索内容',
+      noCheckedFormat: '共 {total} 项',
+      hasCheckedFormat: '已选 {checked}/{total} 项'
     },
     image: {
-      error: "加载失败"
+      error: '加载失败'
     },
     pageHeader: {
-      title: "返回"
+      title: '返回'
     },
     popconfirm: {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消"
+      confirmButtonText: '确定',
+      cancelButtonText: '取消'
     }
   },
   buttons: {
     panel: {
-      view: "View panel",
-      toAdd: "Add panel",
-      toEdit: "Edit panel",
-      delete: "Delete panel",
-      save: "Save panel",
+      view: 'View panel',
+      toAdd: 'Add panel',
+      toEdit: 'Edit panel',
+      delete: 'Delete panel',
+      save: 'Save panel',
       chart: {
-        toAdd: "Add chart",
-        import: "Import chart",
-        export: "Export chart",
-        toEdit: "Edit chart",
-        save: "Save chart",
-        delete: "Delete chart",
-        duplicate: "Duplicate chart",
+        toAdd: 'Add chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        toEdit: 'Edit chart',
+        save: 'Save chart',
+        delete: 'Delete chart',
+        duplicate: 'Duplicate chart'
       }
     },
     explore: {
-      view: "View explore",
-      toAdd: "Add chart",
-      save: "Save chart",
+      view: 'View explore',
+      toAdd: 'Add chart',
+      save: 'Save chart'
     },
     asset: {
-      view: "View asset",
-      toAdd: "Add asset",
-      toEdit: "Edit asset",
-      toBatchEdit: "Batch edit asset",
-      delete: "Delete asset",
-      save: "Save asset",
-      import: "Import asset",
-      export: "Export asset",
-      connect: "Connect to asset",
+      view: 'View asset',
+      toAdd: 'Add asset',
+      toEdit: 'Edit asset',
+      toBatchEdit: 'Batch edit asset',
+      delete: 'Delete asset',
+      save: 'Save asset',
+      import: 'Import asset',
+      export: 'Export asset',
+      connect: 'Connect to asset',
       endpoint: {
-        view: "View endpoint",
-        toAdd: "Add endpoint",
-        toEdit: "Edit endpoint",
-        delete: "Delete endpoint",
-        save: "Save endpoint",
-        import: "Import endpoint",
-        export: "Export endpoint",
+        view: 'View endpoint',
+        toAdd: 'Add endpoint',
+        toEdit: 'Edit endpoint',
+        delete: 'Delete endpoint',
+        save: 'Save endpoint',
+        import: 'Import endpoint',
+        export: 'Export endpoint'
       },
       alerts: {
-        view: "View alerts",
-        delete: "Delete alerts",
-        export: "Export alerts",
+        view: 'View alerts',
+        delete: 'Delete alerts',
+        export: 'Export alerts'
       },
       chart: {
-        toAdd: "Add chart",
-        toEdit: "Edit chart",
-        delete: "Delete chart",
-        save: "Save chart",
-        import: "Import chart",
-        export: "Export chart",
-        duplicate: "Duplicate chart",
-        sync: "Sync chart"
+        toAdd: 'Add chart',
+        toEdit: 'Edit chart',
+        delete: 'Delete chart',
+        save: 'Save chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        duplicate: 'Duplicate chart',
+        sync: 'Sync chart'
       },
       vendor: {
-        toAdd: "Add vendor",
-        save: "Save chart",
+        toAdd: 'Add vendor',
+        save: 'Save chart'
       }
     },
     project: {
-      view: "View project",
-      toEdit: "Edit project",
-      delete: "Delete project",
-      save: "Save project",
+      view: 'View project',
+      toEdit: 'Edit project',
+      delete: 'Delete project',
+      save: 'Save project',
       topo: {
-        edit: "Edit topo",
-        save: "Save topo",
+        edit: 'Edit topo',
+        save: 'Save topo'
       },
       module: {
-        toEdit: "Edit module",
-        delete: "Delete module",
-        save: "Save module",
+        toEdit: 'Edit module',
+        delete: 'Delete module',
+        save: 'Save module'
       },
       endpoint: {
-        toAdd: "Add endpoint",
-        toEdit: "Edit endpoint",
-        delete: "Delete endpoint",
-        save: "Save endpoint",
-        import: "Import endpoint",
-        export: "Export endpoint",
+        toAdd: 'Add endpoint',
+        toEdit: 'Edit endpoint',
+        delete: 'Delete endpoint',
+        save: 'Save endpoint',
+        import: 'Import endpoint',
+        export: 'Export endpoint',
         alerts: {
-          view: "View alerts",
-          delete: "Delete alerts",
-          export: "Export alerts",
+          view: 'View alerts',
+          delete: 'Delete alerts',
+          export: 'Export alerts'
         },
         query: {
-          view: "View query",
-          toAdd: "Add chart",
-          save: "Save chart",
+          view: 'View query',
+          toAdd: 'Add chart',
+          save: 'Save chart'
         }
       }
     },
     message: {
-      view: "View alerts",
-      delete: "Delete alerts",
-      export: "Export alerts",
+      view: 'View alerts',
+      delete: 'Delete alerts',
+      export: 'Export alerts'
     },
     rule: {
-      view: "View rule",
-      toAdd: "Add rule",
-      toEdit: "Edit rule",
-      delete: "Delete rule",
-      save: "Save rule",
+      view: 'View rule',
+      toAdd: 'Add rule',
+      toEdit: 'Edit rule',
+      delete: 'Delete rule',
+      save: 'Save rule',
       alerts: {
-        view: "View alerts",
-        delete: "Delete alerts",
-        export: "Export alerts",
-      },
+        view: 'View alerts',
+        delete: 'Delete alerts',
+        export: 'Export alerts'
+      }
     },
     account: {
-      view: "View account",
-      toAdd: "Add account",
-      toEdit: "Edit account",
-      delete: "Delete account",
-      save: "Save account",
+      view: 'View account',
+      toAdd: 'Add account',
+      toEdit: 'Edit account',
+      delete: 'Delete account',
+      save: 'Save account'
     },
     role: {
-      view: "View role",
-      toAdd: "Add role",
-      toEdit: "Edit role",
-      delete: "Delete role",
-      save: "Save role",
+      view: 'View role',
+      toAdd: 'Add role',
+      toEdit: 'Edit role',
+      delete: 'Delete role',
+      save: 'Save role'
     },
     prom: {
-      view: "View prom",
-      toAdd: "Add prom",
-      toEdit: "Edit prom",
-      delete: "Delete prom",
-      save: "Save prom",
+      view: 'View prom',
+      toAdd: 'Add prom',
+      toEdit: 'Edit prom',
+      delete: 'Delete prom',
+      save: 'Save prom'
     },
     dc: {
-      view: "View data center",
-      toAdd: "Add data center",
-      toEdit: "Edit data center",
-      delete: "Delete data center",
-      save: "Save data center",
-      trafficSetting: "Traffic setting",
-      trafficSettingSave: "Save traffic setting",
+      view: 'View data center',
+      toAdd: 'Add data center',
+      toEdit: 'Edit data center',
+      delete: 'Delete data center',
+      save: 'Save data center',
+      trafficSetting: 'Traffic setting',
+      trafficSettingSave: 'Save traffic setting',
       cabinet: {
-        view: "View cabinet",
-        toAdd: "Add cabinet",
-        toEdit: "Edit cabinet",
-        delete: "Delete cabinet",
-        save: "Save cabinet",
+        view: 'View cabinet',
+        toAdd: 'Add cabinet',
+        toEdit: 'Edit cabinet',
+        delete: 'Delete cabinet',
+        save: 'Save cabinet'
       }
     },
     model: {
-      view: "View model",
-      toAdd: "Add model",
-      toEdit: "Edit model",
-      delete: "Delete model",
-      save: "Save model",
-      panel: "View panel",
+      view: 'View model',
+      toAdd: 'Add model',
+      toEdit: 'Edit model',
+      delete: 'Delete model',
+      save: 'Save model',
+      panel: 'View panel',
       chart: {
-        view: "View chart",
-        toAdd: "Add chart",
-        toEdit: "Edit chart",
-        delete: "Delete chart",
-        save: "Save chart",
-        import: "Import chart",
-        export: "Export chart",
-        duplicate: "Duplicate chart",
-        sync: "Sync chart"
-      },
+        view: 'View chart',
+        toAdd: 'Add chart',
+        toEdit: 'Edit chart',
+        delete: 'Delete chart',
+        save: 'Save chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        duplicate: 'Duplicate chart',
+        sync: 'Sync chart'
+      }
     },
     snmp: {
-      view: "View mib file",
-      toAdd: "Add mib file",
-      toEdit: "Edit mib file",
-      delete: "Delete mib file",
-      save: "Save mib file",
-      download: "Download mib file",
-      browserExport: "Export mib browser",
-      browserView: "View mib browser"
+      view: 'View mib file',
+      toAdd: 'Add mib file',
+      toEdit: 'Edit mib file',
+      delete: 'Delete mib file',
+      save: 'Save mib file',
+      download: 'Download mib file',
+      browserExport: 'Export mib browser',
+      browserView: 'View mib browser'
     },
     system: {
-      basic: "Basic save",
-      email: "Email save",
-      terminal: "Terminal save",
-      ldap: "LDAP save",
+      basic: 'Basic save',
+      email: 'Email save',
+      terminal: 'Terminal save',
+      ldap: 'LDAP save',
       notification: {
-        add: "Add notification",
-        toEdit: "Edit notification",
-        delete: "Delete notification",
-        save: "Save notification",
+        add: 'Add notification',
+        toEdit: 'Edit notification',
+        delete: 'Delete notification',
+        save: 'Save notification'
       },
       link: {
-        add: "Add link",
-        toEdit: "Edit link",
-        delete: "Delete link",
-        save: "Save link",
+        add: 'Add link',
+        toEdit: 'Edit link',
+        delete: 'Delete link',
+        save: 'Save link'
       },
-      reset: "Reset system config",
+      reset: 'Reset system config'
     },
     header: {
-      header: "Header",
-      link: "Link",
-      terminal: "Terminal",
-      terminalUpload: "Upload in terminal",
-      terminalDownload: "Download in terminal",
+      header: 'Header',
+      link: 'Link',
+      terminal: 'Terminal',
+      terminalUpload: 'Upload in terminal',
+      terminalDownload: 'Download in terminal',
       add: {
-        view: "View add button",
-        project: "Add project",
-        module: "Add module",
-        endpoint: "Add endpoint",
-        rule: "Add rule",
-        asset: "Add asset",
+        view: 'View add button',
+        project: 'Add project',
+        module: 'Add module',
+        endpoint: 'Add endpoint',
+        rule: 'Add rule',
+        asset: 'Add asset'
       }
     }
   },
   ...zhLocale
 }
 
-export default cn;
+export default cn
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 57019f8a6..a90b64290 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1,722 +1,722 @@
-import enLocale from 'element-ui/lib/locale/lang/en' //引入element语言包
+import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
 const en = {
-//命名原则
-//创建使用New
-//表示创建状态用Created，如创建时间Created Time
-//告警使用Alert，而不是Alarm
-//账号用Account，username、password等都属于account的一部分
+// 命名原则
+// 创建使用New
+// 表示创建状态用Created，如创建时间Created Time
+// 告警使用Alert，而不是Alarm
+// 账号用Account，username、password等都属于account的一部分
 // A user is the person who uses the account, the account is an inanimate object that is merely registered to an e-mail address.
-  overall:{
-    dashboard:'Dashboards',//'仪表盘'
-    project:'Projects',//'系统'
-    alert: 'Alerts',//"告警"
-    asset:'Assets', //'资产'
-    config:'Settings', //'设置'
-    create: 'New', //'新增'
-    edit: 'Edit', //'编辑'
-    delete: 'Delete', //'删除'
+  overall: {
+    dashboard: 'Dashboards', // '仪表盘'
+    project: 'Projects', // '系统'
+    alert: 'Alerts', // "告警"
+    asset: 'Assets', // '资产'
+    config: 'Settings', // '设置'
+    create: 'New', // '新增'
+    edit: 'Edit', // '编辑'
+    delete: 'Delete', // '删除'
     view: 'View',
     type: 'Type',
-    esc: 'Cancel', //'取消'
-    cancel: 'Cancel', //'取消'
-    save: 'Save', //'保存'
-    download: 'Download', //下载
-    preview:'Preview',//预览
-    search: 'Search', //'搜索'
-    add: 'Create', //"新增"
-    addProject:'Add',
-    addAssetList: "Add",
-    batchEdit:'Batch Edit',
-    option: 'Operation', //"操作"
-    remark: "Description",
-    clear: 'Clear', //"清除"
-    name: 'Name', //'名称'
-    version: "Version", //版本
-    components: "Components", //组件
-    cover: 'Override', //'覆盖'
-    signOut: 'Logout',//'登出'
-    select: 'Select',//'选择'
-    ok: 'Ok',//OK
+    esc: 'Cancel', // '取消'
+    cancel: 'Cancel', // '取消'
+    save: 'Save', // '保存'
+    download: 'Download', // 下载
+    preview: 'Preview', // 预览
+    search: 'Search', // '搜索'
+    add: 'Create', // "新增"
+    addProject: 'Add',
+    addAssetList: 'Add',
+    batchEdit: 'Batch Edit',
+    option: 'Operation', // "操作"
+    remark: 'Description',
+    clear: 'Clear', // "清除"
+    name: 'Name', // '名称'
+    version: 'Version', // 版本
+    components: 'Components', // 组件
+    cover: 'Override', // '覆盖'
+    signOut: 'Logout', // '登出'
+    select: 'Select', // '选择'
+    ok: 'Ok', // OK
     entity: 'Entity',
-    all: 'All',//'全选'
+    all: 'All', // '全选'
     value: 'Value',
-    other: 'Others',//"其他"
-    about: 'About',//关于
-    detail: 'Detail', //详情
-    query: 'Query', //查询
-    back: 'Back', //返回
+    other: 'Others', // "其他"
+    about: 'About', // 关于
+    detail: 'Detail', // 详情
+    query: 'Query', // 查询
+    back: 'Back', // 返回
     unavailable: 'Unavailable',
     available: 'Available',
-    changePwd:'Change password',//修改密码
-    createChart:'Create chart',
-    createProject:'Create project',
-    createEndpoint:'Create endpoint',
-    createAsset:'Create asset',
-    createAlertRule:'Create alert rule',
-    createAccount:'Create account',
+    changePwd: 'Change password', // 修改密码
+    createChart: 'Create chart',
+    createProject: 'Create project',
+    createEndpoint: 'Create endpoint',
+    createAsset: 'Create asset',
+    createAlertRule: 'Create alert rule',
+    createAccount: 'Create account',
     createRole: 'Create role',
-    createPrometheusServer:'Create prometheus server',
-    createDatacenter:'Create Data center',
-    createCabinet:'Create cabinet',
-    createModel:'Create model',
+    createPrometheusServer: 'Create prometheus server',
+    createDatacenter: 'Create Data center',
+    createCabinet: 'Create cabinet',
+    createModel: 'Create model',
     createModule: 'Create module',
-    createMib:'Create MIB',
-    createAssetType:'Create asset type',
-    createAssetState:'Create asset state',
-    exportExcel:'Export',
-    importExcel:'Import',
-    importExcelLower:'import',
-    exportExcelLower:'export',
-    rollbackImport:'Rollback',
-    exportCur:'Current page',
-    exportAll:'All',
-    importFile:'Please upload file',
-    importTip:'Only allowed xlsx/xls file',
-    importTipImg: "Only allowed jpg/png file",
-    dragFileTip:'Drag file here',
-    or:'or',
-    clickUpload:'Click to upload',
-    upload:'upload',
-    template:'Template',
+    createMib: 'Create MIB',
+    createAssetType: 'Create asset type',
+    createAssetState: 'Create asset state',
+    exportExcel: 'Export',
+    importExcel: 'Import',
+    importExcelLower: 'import',
+    exportExcelLower: 'export',
+    rollbackImport: 'Rollback',
+    exportCur: 'Current page',
+    exportAll: 'All',
+    importFile: 'Please upload file',
+    importTip: 'Only allowed xlsx/xls file',
+    importTipImg: 'Only allowed jpg/png file',
+    dragFileTip: 'Drag file here',
+    or: 'or',
+    clickUpload: 'Click to upload',
+    upload: 'upload',
+    template: 'Template',
     active: 'active',
-    result:{
-      total:'Total',
-      failed:'Failed',
-      success:'Success',
-      failedDetail:'Failed Detail',
-      line:'Line {0}:'
+    result: {
+      total: 'Total',
+      failed: 'Failed',
+      success: 'Success',
+      failedDetail: 'Failed Detail',
+      line: 'Line {0}:'
     },
-    reset:'Reset',
-    submit:'Save',
-    noData:'No data',
+    reset: 'Reset',
+    submit: 'Save',
+    noData: 'No data',
     tag: 'Tag',
-    placeHolder:'Please enter',
-    syncChart:'Synchronize chart',
-    toolBox:{
-      zoom:'Area scaling',
-      back:'Area scaling restore',
-      stack:'Show stack chart',
-      stackBack:'Back to original chart'
+    placeHolder: 'Please enter',
+    syncChart: 'Synchronize chart',
+    toolBox: {
+      zoom: 'Area scaling',
+      back: 'Area scaling restore',
+      stack: 'Show stack chart',
+      stackBack: 'Back to original chart'
     },
-    SyncSave:'Save&Sync'
+    SyncSave: 'Save&Sync'
   },
   pageSize: '/page',
-  setup:{
-    step0:"Welcome",
-    step1:"Database",
-    step2:"Redis",
-    step3:"System",
-    host:"Host",
-    port:"Port",
-    language:"Language",
-    welcome:{
-      header:"Welcome to Nezha setup wizard!",
-      guid:"What will the wizard do for you?",
-      guid_1:"Create a basic configuration",
-      guid_2:"Tries to find problems within your Database and Redis setup",
-      toContinue:"To continue",
-      creatFile:"For security reasons you need to authenticate for the installation by creating the file",
-      createFileTip:"This can be done by executing the following command",
-      next:"Click the 'Next' button when you've finished."
+  setup: {
+    step0: 'Welcome',
+    step1: 'Database',
+    step2: 'Redis',
+    step3: 'System',
+    host: 'Host',
+    port: 'Port',
+    language: 'Language',
+    welcome: {
+      header: 'Welcome to Nezha setup wizard!',
+      guid: 'What will the wizard do for you?',
+      guid_1: 'Create a basic configuration',
+      guid_2: 'Tries to find problems within your Database and Redis setup',
+      toContinue: 'To continue',
+      creatFile: 'For security reasons you need to authenticate for the installation by creating the file',
+      createFileTip: 'This can be done by executing the following command',
+      next: "Click the 'Next' button when you've finished."
     },
-    database:{
-      configTitle:'Configure DB connection',
-      configTip:"Please create database manually,and set the configuration parameters for connection to this database,Press 'Next' button when done",
+    database: {
+      configTitle: 'Configure DB connection',
+      configTip: "Please create database manually,and set the configuration parameters for connection to this database,Press 'Next' button when done"
     },
-    redis:{
-      configTitle:'Configure Redis connection',
-      configTip:"Please set the configuration parameters for connection to this redis,Press 'Next' button when done",
+    redis: {
+      configTitle: 'Configure Redis connection',
+      configTip: "Please set the configuration parameters for connection to this redis,Press 'Next' button when done"
     },
-    system:{
-      configTitle:'System configuration',
-      configTip:"Please enter username and password for administrator ,and set the Nezha WEB module install information,like IP:port"
+    system: {
+      configTitle: 'System configuration',
+      configTip: 'Please enter username and password for administrator ,and set the Nezha WEB module install information,like IP:port'
     },
-    name:"Database name",
-    username:"Username",
-    password:"Password",
-    alertPath:'Site URL',
-    alertPrefix:'Alert prefix',
-    haMode:'HA mode',
-    haVip:'Virtual IP',
-    next:"Next",
-    back:"Back",
-    finish:"Finish",
-    invalidDb:"There may be some errors in the configuration of the database",
-    invalidRedis:"There may be some errors in the configuration of the Redis",
-    invalidPassword:"Redis's password may be wrong",
-    requirePassword:"The password may be required by the Redis",
-    wait:"The configuration has been saved, please wait patiently for it to take effect",
-    reloadTimeout:'It took too much time to restart the server, there may be some problems when you install',
-    hadConfig:"Someone has started to configure the system",
-    invalidCode:"The authentication is invalid ,please follow the description in {page} 'To continue'",
-    welcomePage:"Welcome page"
+    name: 'Database name',
+    username: 'Username',
+    password: 'Password',
+    alertPath: 'Site URL',
+    alertPrefix: 'Alert prefix',
+    haMode: 'HA mode',
+    haVip: 'Virtual IP',
+    next: 'Next',
+    back: 'Back',
+    finish: 'Finish',
+    invalidDb: 'There may be some errors in the configuration of the database',
+    invalidRedis: 'There may be some errors in the configuration of the Redis',
+    invalidPassword: "Redis's password may be wrong",
+    requirePassword: 'The password may be required by the Redis',
+    wait: 'The configuration has been saved, please wait patiently for it to take effect',
+    reloadTimeout: 'It took too much time to restart the server, there may be some problems when you install',
+    hadConfig: 'Someone has started to configure the system',
+    invalidCode: "The authentication is invalid ,please follow the description in {page} 'To continue'",
+    welcomePage: 'Welcome page'
   },
-  webshell:{
-    shellTitle:'Local Shell',
-    upload:'Upload',
-    download:'DownLoad',
-    uploadTitle:'Upload',
-    downloadTitle:'DownLoad',
-    uploadButtonTitle:'Upload',
-    fileSelect:'select',
-    downloadButtonTitle:'Download',
-    filePath:'File path',
-    closeTip:'All connections will be closed, are you sure you want to close the window?',
-    remember:'Remember my decision'
+  webshell: {
+    shellTitle: 'Local Shell',
+    upload: 'Upload',
+    download: 'DownLoad',
+    uploadTitle: 'Upload',
+    downloadTitle: 'DownLoad',
+    uploadButtonTitle: 'Upload',
+    fileSelect: 'select',
+    downloadButtonTitle: 'Download',
+    filePath: 'File path',
+    closeTip: 'All connections will be closed, are you sure you want to close the window?',
+    remember: 'Remember my decision'
   },
   login: {
     username: 'Username',
     password: 'Password',
     login: 'Login'
   },
-  dashboard:{
-    title:'Dashboard',
-    panel:{
-      title:'Panel', //'面板'
-      searchItem:{
-        name:'name'
+  dashboard: {
+    title: 'Dashboard',
+    panel: {
+      title: 'Panel', // '面板'
+      searchItem: {
+        name: 'name'
       },
-      chartTotal:'total',
-      //面板-侧滑框
-      createPanelTitle: 'New panel', //"新增面板"
-      selectPanelTitle:'Select', //"选择面板"
-      createPanelTitleSec:'New panel',//"新增面板"
-      editPanelTitle: 'Panel', //"面板"
-      singleStatErrorTip:'Only queries that return single series/table is supported',
-      panelForm:{
-        panelName:'Panel name', //"面板名称"
-        panelId:"ID" //ID
+      chartTotal: 'total',
+      // 面板-侧滑框
+      createPanelTitle: 'New panel', // "新增面板"
+      selectPanelTitle: 'Select', // "选择面板"
+      createPanelTitleSec: 'New panel', // "新增面板"
+      editPanelTitle: 'Panel', // "面板"
+      singleStatErrorTip: 'Only queries that return single series/table is supported',
+      panelForm: {
+        panelName: 'Panel name', // "面板名称"
+        panelId: 'ID' // ID
       },
-      //图表-侧滑框
-      createChartTitle: 'New chart', //"新增图表"
-      editChartTitle: 'Edit',//"编辑图表"
-      chartForm:{
-        chartId:"ID",
-        chartName:"Chart Name",
-        type:"Type",
-        unit:"Unit",
-        url:"URL",
-        legend:'Legend',
-        statistics:'Statistics',
-        legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
-        valueMappingTip: 'Use {{name}} and {{value}} to display the original name and value\n'+
-          'For example: Total Alive: {{value}}\n'+
+      // 图表-侧滑框
+      createChartTitle: 'New chart', // "新增图表"
+      editChartTitle: 'Edit', // "编辑图表"
+      chartForm: {
+        chartId: 'ID',
+        chartName: 'Chart Name',
+        type: 'Type',
+        unit: 'Unit',
+        url: 'URL',
+        legend: 'Legend',
+        statistics: 'Statistics',
+        legendTip: 'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
+        valueMappingTip: 'Use {{name}} and {{value}} to display the original name and value\n' +
+          'For example: Total Alive: {{value}}\n' +
           'The result is: Total Alive: 100',
         sync: 'Sync to assets',
-        last:'Last',
-        threshold:'Threshold',
-        thresholds:'Thresholds',
-        typeVal:{
-          line:{
-            label:'Line Chart' //"曲线图"
+        last: 'Last',
+        threshold: 'Threshold',
+        thresholds: 'Thresholds',
+        typeVal: {
+          line: {
+            label: 'Line Chart' // "曲线图"
           },
-          bar:{
-            label:'Histogram' //"柱状图"
+          bar: {
+            label: 'Histogram' // "柱状图"
           },
-          table:{
-            label:'Table' //"表格"
+          table: {
+            label: 'Table' // "表格"
           },
-          stackArea:{
-            label:"Stack Area"
+          stackArea: {
+            label: 'Stack Area'
           },
-          url:{
-            label:"URL",
-            staticTip:'The content in the double curly braces will be replaced on the Asset page',
+          url: {
+            label: 'URL',
+            staticTip: 'The content in the double curly braces will be replaced on the Asset page'
           },
-          singleStat:{
-            label:"SingleStat"
+          singleStat: {
+            label: 'SingleStat'
           },
-          pie:{
-            label:"Pie"
+          pie: {
+            label: 'Pie'
           },
-          alertList:{
-            label:"Alert list"
+          alertList: {
+            label: 'Alert list'
           },
-          text:{
-            label:'Text'
+          text: {
+            label: 'Text'
           }
         },
-        statisticsVal:{
-          min:'Min',
-          max:'Max',
-          average:'Average',
-          total:'Total',
-          first:'First',
-          last:'Last',
-          range:'Range',
-          different:'Different',
-          null:'Null'
+        statisticsVal: {
+          min: 'Min',
+          max: 'Max',
+          average: 'Average',
+          total: 'Total',
+          first: 'First',
+          last: 'Last',
+          range: 'Range',
+          different: 'Different',
+          null: 'Null'
         },
-        width:'Width', //"宽"
-        high:'High', //"高"
-        metric:'Metric', //"指标"
-        option:'Option',
-        addMetric:'Add metric', //"添加指标"
-        alertParam:{
-          param:'Parameters',
-          select:'Select',
-          alertRule:'Alert rule',
-          level:'Priority',
-          state:'State'
+        width: 'Width', // "宽"
+        high: 'High', // "高"
+        metric: 'Metric', // "指标"
+        option: 'Option',
+        addMetric: 'Add metric', // "添加指标"
+        alertParam: {
+          param: 'Parameters',
+          select: 'Select',
+          alertRule: 'Alert rule',
+          level: 'Priority',
+          state: 'State'
         },
-        valMapping:{
-          name:'Value mapping',
-          from:'From',
-          to:'To',
-          text:'Text',
-          value:'Value',
-          range:'Range',
+        valMapping: {
+          name: 'Value mapping',
+          from: 'From',
+          to: 'To',
+          text: 'Text',
+          value: 'Value',
+          range: 'Range'
         },
-        legendValue:'Legend option',
-        content:'Content',
-        tooltip:'Tooltip',
-        displayChart:'Display chart',
-        aggregation:"Aggregation",
+        legendValue: 'Legend option',
+        content: 'Content',
+        tooltip: 'Tooltip',
+        displayChart: 'Display chart',
+        aggregation: 'Aggregation'
       },
-      chartTableColumn:{
-        metric:'Metric', //'指标'
-        label:'Label', //'标签'
-        element:'Element',
-        time:'Time', //'时间'
-        value:'Value', //'值'
+      chartTableColumn: {
+        metric: 'Metric', // '指标'
+        label: 'Label', // '标签'
+        element: 'Element',
+        time: 'Time', // '时间'
+        value: 'Value' // '值'
       },
-      startTime:'Start time', //'开始时间'
-      endTime:'End time',//'结束时间'
-      to:'to', //To
-      recOne:'Last 1 hour', //'最近1小时'
-      recFour:'Last 4 hours',//'最近4小时'
-      recOneDay:'Last 1 day',//'最近1日'
-      yesterday:'Yesterday', //'昨日'
-      recSevenDay:'Last 7 day',// Last 7 days
-      recOneMonth:'Last 1 month',//'最近1月'
-      curMonth:'This month',//'本月'
-      lastMonth:'Last month',//'上月'
-      customTimeRange:'Custom time range',
-      noDate:'Empty',
-      lastFiveMin:'Last 5 minutes',
-      lastFifteenMin:'Last 15 minutes',
-      lastThirtyMin:'Last 30 minutes',
-      lastOneHour:'Last 1 hour',
-      lastThreeHour:'Last 3 hours',
-      lastSixHour:'Last 6 hours',
-      lastTwelveHour:'Last 12 hours',
-      lastTwentyFourHour:'Last 24 hours',
-      lastTwoDay:'Last 2 days',
-      lastSevenDay:'Last 7 days',
-      lastThirtyDay:'Last 30 days',
-      refreshInterval:{
-        never:'Off', //'从不'
-        oneMinute:'1 minute', // 1 minute
-        threeMinutes:'3 minutes', //'3分钟'
-        fiveMinutes:'5 minutes', //'5分钟'
-        tenMinutes:'10 minutes', //'10分钟'
+      startTime: 'Start time', // '开始时间'
+      endTime: 'End time', // '结束时间'
+      to: 'to', // To
+      recOne: 'Last 1 hour', // '最近1小时'
+      recFour: 'Last 4 hours', // '最近4小时'
+      recOneDay: 'Last 1 day', // '最近1日'
+      yesterday: 'Yesterday', // '昨日'
+      recSevenDay: 'Last 7 day', // Last 7 days
+      recOneMonth: 'Last 1 month', // '最近1月'
+      curMonth: 'This month', // '本月'
+      lastMonth: 'Last month', // '上月'
+      customTimeRange: 'Custom time range',
+      noDate: 'Empty',
+      lastFiveMin: 'Last 5 minutes',
+      lastFifteenMin: 'Last 15 minutes',
+      lastThirtyMin: 'Last 30 minutes',
+      lastOneHour: 'Last 1 hour',
+      lastThreeHour: 'Last 3 hours',
+      lastSixHour: 'Last 6 hours',
+      lastTwelveHour: 'Last 12 hours',
+      lastTwentyFourHour: 'Last 24 hours',
+      lastTwoDay: 'Last 2 days',
+      lastSevenDay: 'Last 7 days',
+      lastThirtyDay: 'Last 30 days',
+      refreshInterval: {
+        never: 'Off', // '从不'
+        oneMinute: '1 minute', // 1 minute
+        threeMinutes: '3 minutes', // '3分钟'
+        fiveMinutes: '5 minutes', // '5分钟'
+        tenMinutes: '10 minutes' // '10分钟'
       },
-      view:'View',//'查看'
-      confirm:'Ok',// OK
-      cancel:'Cancel',//'取消',
-      moreTitle:'Showing only 20 time series. ',
-      moreTitleOther:'Showing only 10 the data. ',
-      showAll:'Show all ',
-      showAllOther:'All Data',
+      view: 'View', // '查看'
+      confirm: 'Ok', // OK
+      cancel: 'Cancel', // '取消',
+      moreTitle: 'Showing only 20 time series. ',
+      moreTitleOther: 'Showing only 10 the data. ',
+      showAll: 'Show all ',
+      showAllOther: 'All Data'
     },
-    metric:{
-      name:'Metric name', //"指标名称"
-      normal:'Normal', //"普通"
-      expert:"Expert",// Expert
-      label:'Label', //"指标标签"
-      addMetric:'Add metric',//"添加指标"
-      expertTip:'Add expression',//"请输入表达式"
-      goPanelTip:"View created panel?",//View created panel?
-      previewChart:'Preview',//"预览图表"
-      singleChartShow:'Signle chart',//"单图展示"
-      multiChartsShow:'Multiple charts',//"多图展示"
-      createPanel:'New panel', //"创建面板"
-      selectPanel:'Exist panel',//"选择已有面板"
+    metric: {
+      name: 'Metric name', // "指标名称"
+      normal: 'Normal', // "普通"
+      expert: 'Expert', // Expert
+      label: 'Label', // "指标标签"
+      addMetric: 'Add metric', // "添加指标"
+      expertTip: 'Add expression', // "请输入表达式"
+      goPanelTip: 'View created panel?', // View created panel?
+      previewChart: 'Preview', // "预览图表"
+      singleChartShow: 'Signle chart', // "单图展示"
+      multiChartsShow: 'Multiple charts', // "多图展示"
+      createPanel: 'New panel', // "创建面板"
+      selectPanel: 'Exist panel', // "选择已有面板"
       saveChart: 'Save chart',
-      saveChartToPanel:"Save chart to panel"//Save chart to panel.
+      saveChartToPanel: 'Save chart to panel'// Save chart to panel.
     },
-    metricPreview:{
-      title:'Explore',
-      inputTip:'Enter a PromQL query',
-      runQuery:'Run query',
-      historyTip:'Queried {time} times in the last {hour}h',
+    metricPreview: {
+      title: 'Explore',
+      inputTip: 'Enter a PromQL query',
+      runQuery: 'Run query',
+      historyTip: 'Queried {time} times in the last {hour}h'
     },
-    refresh:'Refresh',//'刷新'
-    edit:'Edit',//'编辑'
-    delete:'Delete',//'删除'
-    screen:'Full screen',//'全屏',
-    duplicate:'Duplicate',//复制
-    overview:{
-      title:'Overview',
-      contentTitle:'Nezha Management System',
+    refresh: 'Refresh', // '刷新'
+    edit: 'Edit', // '编辑'
+    delete: 'Delete', // '删除'
+    screen: 'Full screen', // '全屏',
+    duplicate: 'Duplicate', // 复制
+    overview: {
+      title: 'Overview',
+      contentTitle: 'Nezha Management System',
       traffic: 'Traffic',
-      projectTopoLogy:"Project Topology",
-      asset:{
-        title:'Assets',
-        assetType:'Asset type',
-        modelStat:'Model',
-        dcStat:'Data center',
-        num:'Num',
-        alert:'Alert',
-        alertTotal:'Total',
-        alertP3:'P3',
-        alertP2:'P2',
-        alertP1:'P1',
-        inStock:'In stock',
-        outStock:'Out stock',
-        pingUp:'Up',
-        pingDown:'Down',
-        host:'Host',
-        dropDownLabel:{
-          type:'type',
-          model:'model',
-          dc:'data center'
-        },
+      projectTopoLogy: 'Project Topology',
+      asset: {
+        title: 'Assets',
+        assetType: 'Asset type',
+        modelStat: 'Model',
+        dcStat: 'Data center',
+        num: 'Num',
+        alert: 'Alert',
+        alertTotal: 'Total',
+        alertP3: 'P3',
+        alertP2: 'P2',
+        alertP1: 'P1',
+        inStock: 'In stock',
+        outStock: 'Out stock',
+        pingUp: 'Up',
+        pingDown: 'Down',
+        host: 'Host',
+        dropDownLabel: {
+          type: 'type',
+          model: 'model',
+          dc: 'data center'
+        }
       },
-      project:{
-        project:'Projects',
-        name:'Name',
-        module:'Module',
-        endpoint:'Endpoint',
+      project: {
+        project: 'Projects',
+        name: 'Name',
+        module: 'Module',
+        endpoint: 'Endpoint'
       },
       module: {
-        module: "Modules",
+        module: 'Modules'
       },
       endpoint: {
-        endpoint: "Endpoints",
+        endpoint: 'Endpoints'
       },
-      dataCenter:{
-        dataCenter:'Data center',
-        cabinet:'Cabinet',
-        promServer:'Prom server',
+      dataCenter: {
+        dataCenter: 'Data center',
+        cabinet: 'Cabinet',
+        promServer: 'Prom server'
       },
-      alert:{
+      alert: {
         alertMessage: 'Alert messages',
-        level:'Priority',
-        alertRule:'Alert rule',
-        ruleNum:'Rule num',
-        alertNum:'Alert num',
+        level: 'Priority',
+        alertRule: 'Alert rule',
+        ruleNum: 'Rule num',
+        alertNum: 'Alert num',
         alertRuleTopN: 'Top10 alert message',
         assetTopN: 'Top alert message by Asset',
         moduleTopN: 'Top alert message by Module',
-        top:'Top',
-        chart:{
-          chartTitle:'Alert Trend'
-        },
+        top: 'Top',
+        chart: {
+          chartTitle: 'Alert Trend'
+        }
       },
-      mapTooltip:{
-        asset:'asset',
-        state:'state',
-        ping:'ping',
-        inStock:'In stock',
-        outStock:'Out stock',
-        active:'active',
-        inactive:'inactive',
-        alert:'alert',
-        P1: "P1",
-        P2: "P2",
-        P3: "P3",
-        endpoint:'endpoint',
-        total:'total',
-        up:'up',
-        down:'down',
-        prometheus:'prometheus',
+      mapTooltip: {
+        asset: 'asset',
+        state: 'state',
+        ping: 'ping',
+        inStock: 'In stock',
+        outStock: 'Out stock',
+        active: 'active',
+        inactive: 'inactive',
+        alert: 'alert',
+        P1: 'P1',
+        P2: 'P2',
+        P3: 'P3',
+        endpoint: 'endpoint',
+        total: 'total',
+        up: 'up',
+        down: 'down',
+        prometheus: 'prometheus'
       }
     }
   },
-  validate: { //校验规则
-    required: 'Required',//'必填项'
-    number: 'Numberic',//'必须是数字'
-    integer:'Integer',
-    positiveInteger:'Positive integer',
-    email:'Invalid email',//'不合法的E-mail地址'
-    tel:'Invalid phone number',//'不合法的电话号码'
-    host:'Invalid Host',//'不合法的Host'
-    domain:'Invalid domain',
-    usize:'Must be number(1 - 47)',
-    fileSize:'File exceed max size',//File exceed max size.
-    port:'Invalid port',
-    url:'Invalid URL',
-    uSize:'Must be number(1 - 47)',
-    requiredIdc:'dc is required',
-    key:'Invalid key',
-    repeat:'Repeat',
-    tooLong:'Too long content',
+  validate: { // 校验规则
+    required: 'Required', // '必填项'
+    number: 'Numberic', // '必须是数字'
+    integer: 'Integer',
+    positiveInteger: 'Positive integer',
+    email: 'Invalid email', // '不合法的E-mail地址'
+    tel: 'Invalid phone number', // '不合法的电话号码'
+    host: 'Invalid Host', // '不合法的Host'
+    domain: 'Invalid domain',
+    usize: 'Must be number(1 - 47)',
+    fileSize: 'File exceed max size', // File exceed max size.
+    port: 'Invalid port',
+    url: 'Invalid URL',
+    uSize: 'Must be number(1 - 47)',
+    requiredIdc: 'dc is required',
+    key: 'Invalid key',
+    repeat: 'Repeat',
+    tooLong: 'Too long content'
   },
   search: {
-    searchTip: 'Enter to search',//'点击或回车执行搜索'
-    recentSearch: 'Search history',//'搜索记录'
-    noRecentSearch: 'No Recent Search'//'无搜索记录'
+    searchTip: 'Enter to search', // '点击或回车执行搜索'
+    recentSearch: 'Search history', // '搜索记录'
+    noRecentSearch: 'No Recent Search'// '无搜索记录'
   },
   tip: {
-    confirmDelete: "Are you sure you want to delete?", //Are you sure you want to delete?
+    confirmDelete: 'Are you sure you want to delete?', // Are you sure you want to delete?
     confirmOvertime: "Are you sure it's off?",
-    killTerm:'Are you sure you want to kill terminal?',
-    confirmBatchDelete:'Are you sure to delete these {0} pieces of data',
-    assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?',//Related endpoints and alerts will be removed, are you sure you want to delete this asset?
-    yes: 'Yes', //"是"
-    no: "No",//No
-    deleteSuccess: 'Delete success',//"删除成功"
-    saveSuccess: 'Save success', //"保存成功"
-    addSuccess: 'Add success', //"保存成功"
-    duplicateSuccess: 'Duplicate success', //"复制成功"
-    coverSuccess: 'Override success',//'覆盖成功'
-    refreshLater:'Refresh later',//'请稍后刷新'
-    testSuccess:'Test success',
-    downloadSuccess : 'Download success',
+    killTerm: 'Are you sure you want to kill terminal?',
+    confirmBatchDelete: 'Are you sure to delete these {0} pieces of data',
+    assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?', // Related endpoints and alerts will be removed, are you sure you want to delete this asset?
+    yes: 'Yes', // "是"
+    no: 'No', // No
+    deleteSuccess: 'Delete success', // "删除成功"
+    saveSuccess: 'Save success', // "保存成功"
+    addSuccess: 'Add success', // "保存成功"
+    duplicateSuccess: 'Duplicate success', // "复制成功"
+    coverSuccess: 'Override success', // '覆盖成功'
+    refreshLater: 'Refresh later', // '请稍后刷新'
+    testSuccess: 'Test success',
+    downloadSuccess: 'Download success',
     uploadSuccess: 'Upload success',
     pressEnterToAdd: 'Press enter to add new line',
-    resetSuccess:'Reset success',
-    syncSuccess:'Synchronize success',
-    syncTip:'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
-    noImportFile:'No import file found',
-    noAccess: "No access",
-    confirmDuplicate:"Are you sure to duplicate this chart?",
-    confirmCancel:'Changes you made are not saved?',
+    resetSuccess: 'Reset success',
+    syncSuccess: 'Synchronize success',
+    syncTip: 'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
+    noImportFile: 'No import file found',
+    noAccess: 'No access',
+    confirmDuplicate: 'Are you sure to duplicate this chart?',
+    confirmCancel: 'Changes you made are not saved?'
   },
-  asset:{
+  asset: {
     asset: 'Asset',
-    assets: 'Assets',//'资产'
-    editAsset: 'Edit asset',//'编辑资产'
-    createAsset: 'New asset',//'编辑资产'
-    batchEditAsset:'Bulk edit',
-    selectAsset:'Selected assets',
-    host: "Host",
-    state: 'State',//'状态'
-    pingActive: 'active',//可ping通
+    assets: 'Assets', // '资产'
+    editAsset: 'Edit asset', // '编辑资产'
+    createAsset: 'New asset', // '编辑资产'
+    batchEditAsset: 'Bulk edit',
+    selectAsset: 'Selected assets',
+    host: 'Host',
+    state: 'State', // '状态'
+    pingActive: 'active', // 可ping通
     assetStatPre: 'Last reply:',
     assetStatDown: 'Never',
-    remark:'Description',//'描述'
-    cli:'CLI account',//'CLI账号'
-    loginType:'Login type',//'登录类型'
-    password:'Password',//'密码'
-    ssh:'SSH key',//'SSH-Key'
-    protocol:"Protocol",
-    sshProtocol:"SSH",
-    telnetProtocol:"Telnet",
-    userTip:"User tip",//用户名提示
-    passwordTip:"Password tip",//密码提示
-    reloginPasswordTip:"Relogin tip",//密码提示
-    userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
-    reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
-    account:'User name',//'用户名'
-    port:'Port',//'端口'
-    upload:'Upload',//'上传'
-    clickToUpload:'Upload',//'上传'
-    clickToCover:'Cover',//'覆盖'
-    sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
-    exporter:'Exporter',
+    remark: 'Description', // '描述'
+    cli: 'CLI account', // 'CLI账号'
+    loginType: 'Login type', // '登录类型'
+    password: 'Password', // '密码'
+    ssh: 'SSH key', // 'SSH-Key'
+    protocol: 'Protocol',
+    sshProtocol: 'SSH',
+    telnetProtocol: 'Telnet',
+    userTip: 'User tip', // 用户名提示
+    passwordTip: 'Password tip', // 密码提示
+    reloginPasswordTip: 'Relogin tip', // 密码提示
+    userPwdIntroduce: 'Please specify a user name and password so that the telenet login process can automatically log in',
+    reLoginPwdIntroduce: 'Please specify the password prompt so that the login process can run automatically',
+    account: 'User name', // '用户名'
+    port: 'Port', // '端口'
+    upload: 'Upload', // '上传'
+    clickToUpload: 'Upload', // '上传'
+    clickToCover: 'Cover', // '覆盖'
+    sshKeyWasConfig: 'SSH-KEY configured', // 'SSH-KEY已配置'
+    exporter: 'Exporter',
     pingInactive: 'inactive',
-    assetInfo: 'Asset information',//'资产信息'
-    vendorModel: 'Vendor/Model',//'厂商/型号'
-    purchaseDate: 'Purchase date',//'购买日期'
-    location: 'Location',//'地区'
-    sn: "SN",
+    assetInfo: 'Asset information', // '资产信息'
+    vendorModel: 'Vendor/Model', // '厂商/型号'
+    purchaseDate: 'Purchase date', // '购买日期'
+    location: 'Location', // '地区'
+    sn: 'SN',
     uSize: 'U size',
-    inStock: 'In stock',//'在库'
-    notInStock: 'Not in stock',//'出库'
-    suspended:'Suspended',
-    assetType:'Asset type',//'资产类型'
-    principal:'Administrator',//'负责人'
-    tel:'Telephone', //'电话'
-    left:{
-      dataCenter:'Data center',
-      vendor:'Vendor',
-      ping:'Ping',
+    inStock: 'In stock', // '在库'
+    notInStock: 'Not in stock', // '出库'
+    suspended: 'Suspended',
+    assetType: 'Asset type', // '资产类型'
+    principal: 'Administrator', // '负责人'
+    tel: 'Telephone', // '电话'
+    left: {
+      dataCenter: 'Data center',
+      vendor: 'Vendor',
+      ping: 'Ping'
     },
-    featureTitle:'Attribute',
-    endpointUpNum:'It\'s a normal number',
-    endpointNum:'Represents the total quantity',
-    editAssetTab:{
-      title:'New asset',//'新增资产'
-      sn:'SN',//SN
-      host:'Host',//'Host'
-      state:'State',//'状态'
-      modelId:'Module',//'组件'
-      alert:'Alert information',//'告警信息'
-      assetInfo:'Asset information',//'资产信息'
-      assetType:'Asset type',//'资产类型'
-      vendor:'Vendor',//'厂商/型号'
-      vendorTab:{
-        vendor:'Vendor/Model',//'厂商/型号'
-        vendorName:'New vendor',//'新厂商'
-        existVendor:'Existed vendor',//'已有厂商'
-        modelName:'New model',//'新型号'
-        existModel:'Existed model'//'已有型号'
+    featureTitle: 'Attribute',
+    endpointUpNum: 'It\'s a normal number',
+    endpointNum: 'Represents the total quantity',
+    editAssetTab: {
+      title: 'New asset', // '新增资产'
+      sn: 'SN', // SN
+      host: 'Host', // 'Host'
+      state: 'State', // '状态'
+      modelId: 'Module', // '组件'
+      alert: 'Alert information', // '告警信息'
+      assetInfo: 'Asset information', // '资产信息'
+      assetType: 'Asset type', // '资产类型'
+      vendor: 'Vendor', // '厂商/型号'
+      vendorTab: {
+        vendor: 'Vendor/Model', // '厂商/型号'
+        vendorName: 'New vendor', // '新厂商'
+        existVendor: 'Existed vendor', // '已有厂商'
+        modelName: 'New model', // '新型号'
+        existModel: 'Existed model'// '已有型号'
       },
-      purchaseDate:'Purchase date',//'购买日期'
-      dataSelectTip:'Please select date',//'请选择日期'
-      dc:'Data center',
-      dcName:'Data center name',//'DC名称'
-      AddIdcTab:{
-        title:'New Data center',//'新增DC'
-        dcName:'Data center name',//'DC名称'
-        location:'Location',//'地区'
-        principal:'Administrator',//'负责人'
-        tel:'Telephone'//'电话'
+      purchaseDate: 'Purchase date', // '购买日期'
+      dataSelectTip: 'Please select date', // '请选择日期'
+      dc: 'Data center',
+      dcName: 'Data center name', // 'DC名称'
+      AddIdcTab: {
+        title: 'New Data center', // '新增DC'
+        dcName: 'Data center name', // 'DC名称'
+        location: 'Location', // '地区'
+        principal: 'Administrator', // '负责人'
+        tel: 'Telephone'// '电话'
       },
-      editIdcTab:{
-        title:'Edit Data center',//'编辑DC'
-        dcName:'Data center name',//'DC名称'
-        location:'Location',//'地区'
-        principal:'Administrator',//'负责人'
-        tel:'Telephone'//'电话'
+      editIdcTab: {
+        title: 'Edit Data center', // '编辑DC'
+        dcName: 'Data center name', // 'DC名称'
+        location: 'Location', // '地区'
+        principal: 'Administrator', // '负责人'
+        tel: 'Telephone'// '电话'
       },
-      location:'Location',//'地区'
-      principal:'Administrator',//'负责人'
-      tel:'Telephone',//'电话'
-      cabinet: 'Cabinet',//'机柜'
-      AddCabinetTab:{
-        title:'New cabinet',//'新增机柜'
-        name:'Name',//'名称'
-        uSize:'U size',//'U位'
-        remark:'Description',//'描述'
-        DC:'Data center',//DC
+      location: 'Location', // '地区'
+      principal: 'Administrator', // '负责人'
+      tel: 'Telephone', // '电话'
+      cabinet: 'Cabinet', // '机柜'
+      AddCabinetTab: {
+        title: 'New cabinet', // '新增机柜'
+        name: 'Name', // '名称'
+        uSize: 'U size', // 'U位'
+        remark: 'Description', // '描述'
+        DC: 'Data center'// DC
       },
-      editCabinetTab:{
-        title:'Edit cabinet',//'编辑机柜'
-        name:'Name',//'名称'
-        uSize:'U size',//'U位'
-        remark:'Description',//'描述'
-        DC:'Data center',//DC
+      editCabinetTab: {
+        title: 'Edit cabinet', // '编辑机柜'
+        name: 'Name', // '名称'
+        uSize: 'U size', // 'U位'
+        remark: 'Description', // '描述'
+        DC: 'Data center'// DC
       },
-      uSize:'U size',//'U位'
-      remark:'Description',//'描述'
-      cli:'CLI account',//'CLI账号'
-      loginType:'Login type',//'登录类型'
-      password:'Password',//'密码'
-      ssh:'SSH-Key',//'SSH-Key'
-      account:'Username',//'用户名'
-      port:'Port',//'端口'
-      upload:'Upload',//'上传'
-      clickToUpload:'Upload',//'上传'
+      uSize: 'U size', // 'U位'
+      remark: 'Description', // '描述'
+      cli: 'CLI account', // 'CLI账号'
+      loginType: 'Login type', // '登录类型'
+      password: 'Password', // '密码'
+      ssh: 'SSH-Key', // 'SSH-Key'
+      account: 'Username', // '用户名'
+      port: 'Port', // '端口'
+      upload: 'Upload', // '上传'
+      clickToUpload: 'Upload'// '上传'
     },
     tableTitle: {
-      id: 'ID',//ID
-      assetType: 'Asset type',//'资产类型'
-      device: 'SN',//SN
-      host: 'Host',//'Host'
-      assetState: 'State',//'状态'
+      id: 'ID', // ID
+      assetType: 'Asset type', // '资产类型'
+      device: 'SN', // SN
+      host: 'Host', // 'Host'
+      assetState: 'State', // '状态'
       assetPing: 'Ping',
-      lastReply:'Ping last reply',
-      modules: 'Endpoint',//'组件'
-      alerts: 'Alerts',//'告警信息'
-      dataCenter: 'Data center',//DC
-      cabinet: 'Cabinet',//'机柜'
-      model: 'Model',//'型号'
-      vendor: 'Vendor',//'厂商'
-      procurementDate: 'Purchase date',//'购买日期'
-      principal: 'Administrator',//'负责人'
-      principalTel: 'Telephone',//'电话'
-      option: 'Operation'//"操作"
+      lastReply: 'Ping last reply',
+      modules: 'Endpoint', // '组件'
+      alerts: 'Alerts', // '告警信息'
+      dataCenter: 'Data center', // DC
+      cabinet: 'Cabinet', // '机柜'
+      model: 'Model', // '型号'
+      vendor: 'Vendor', // '厂商'
+      procurementDate: 'Purchase date', // '购买日期'
+      principal: 'Administrator', // '负责人'
+      principalTel: 'Telephone', // '电话'
+      option: 'Operation'// "操作"
     },
     tagTableTitle: {
-      projectName: 'Project name',//'系统名称'
-      moduleName: 'Module name',//'组件名称'
-      endPoint: 'End point',//'EndPoint'
-      alert: 'Alert',//'告警'
+      projectName: 'Project name', // '系统名称'
+      moduleName: 'Module name', // '组件名称'
+      endPoint: 'End point', // 'EndPoint'
+      alert: 'Alert'// '告警'
     },
-    active:"Alive",// "存活",
-    total:"Total",// "总数",
-    down: "Down",
+    active: 'Alive', // "存活",
+    total: 'Total', // "总数",
+    down: 'Down'
   },
   config: {
-    config: 'Settings',//"设置"
+    config: 'Settings', // "设置"
     account: {
-      accountList: 'Account list',//"用户列表"
-      //列表表头
-      account: 'Account',//"用户"
-      roles:"Role",
-      language: 'Language',//"语言"
-      receiver: 'Receiver',//"用户组"
-      createTime: 'Create time',//"创建时间"
-      enable: 'Available',//"可用"
-      option: 'Operation',//"操作"
-      //侧滑框//
-      accountId: 'Account ID',//"用户ID"
-      createAccount: 'New account',//"新增用户"
-      editAccount: 'Edit account',//"编辑用户"
-      notCurrentlySupport: 'Not available',//'暂不支持'
-      password: 'Password',//'密码'
-      oldPwd:'Old password',
-      inputOldPwd:'Please input old password',
-      newPwd:'New password',
-      inputNewPwd:'Please input new password',
-      confirmPwd:'Confirm password',
-      inputConfirmPwd:'Please input confirm password',
-      invalidPwd:'invalide password,the length at least 6',
-      confirmPwdErr:'The two passwords are inconsistent',
-      reinputPwd:'Enter password again',
+      accountList: 'Account list', // "用户列表"
+      // 列表表头
+      account: 'Account', // "用户"
+      roles: 'Role',
+      language: 'Language', // "语言"
+      receiver: 'Receiver', // "用户组"
+      createTime: 'Create time', // "创建时间"
+      enable: 'Available', // "可用"
+      option: 'Operation', // "操作"
+      // 侧滑框//
+      accountId: 'Account ID', // "用户ID"
+      createAccount: 'New account', // "新增用户"
+      editAccount: 'Edit account', // "编辑用户"
+      notCurrentlySupport: 'Not available', // '暂不支持'
+      password: 'Password', // '密码'
+      oldPwd: 'Old password',
+      inputOldPwd: 'Please input old password',
+      newPwd: 'New password',
+      inputNewPwd: 'Please input new password',
+      confirmPwd: 'Confirm password',
+      inputConfirmPwd: 'Please input confirm password',
+      invalidPwd: 'invalide password,the length at least 6',
+      confirmPwdErr: 'The two passwords are inconsistent',
+      reinputPwd: 'Enter password again',
       notification: 'Notification'
     },
-    roles:{
-      roles:"Roles",
-      name:"Name",
-      description:"Description",
-      option: 'Operation',//"操作"
-      permission:"Permission",
-      menu:"Menu",
-      createRole:"Create role",
-      editRole:"Edit role",
-      remark:'Remark',
+    roles: {
+      roles: 'Roles',
+      name: 'Name',
+      description: 'Description',
+      option: 'Operation', // "操作"
+      permission: 'Permission',
+      menu: 'Menu',
+      createRole: 'Create role',
+      editRole: 'Edit role',
+      remark: 'Remark'
     },
-    menus:{
-      menus:'Menus',
-      name:"Name",
-      remark:"Remark",
-      option: 'Operation',//"操作",
-      code:'Code',
-      i18n:'I18n',
-      type:'Type',
-      route:'Route',
-      perms:'Permission',
-      button:"Button",
-      menu:"Menu",
-      parent:"Previous menu",
-      mainMenu:'Primary menu',
-      createMenu:"Create menu",
-      editMenu:"Edit menu",
-      orderNum:"Order",
+    menus: {
+      menus: 'Menus',
+      name: 'Name',
+      remark: 'Remark',
+      option: 'Operation', // "操作",
+      code: 'Code',
+      i18n: 'I18n',
+      type: 'Type',
+      route: 'Route',
+      perms: 'Permission',
+      button: 'Button',
+      menu: 'Menu',
+      parent: 'Previous menu',
+      mainMenu: 'Primary menu',
+      createMenu: 'Create menu',
+      editMenu: 'Edit menu',
+      orderNum: 'Order'
     },
     promServer: {
-      promServerList: 'Prometheus server',//"Prometheus Server"
-      //侧滑框
-      promId: 'Prometheus server ID',//"Prometheus Server ID"
-      createProm: 'New prometheus server',//"新增Prometheus Server"
-      editProm: 'Edit prometheus server',//"修改Prometheus Server"
-      type: 'Type',//"类别"
+      promServerList: 'Prometheus server', // "Prometheus Server"
+      // 侧滑框
+      promId: 'Prometheus server ID', // "Prometheus Server ID"
+      createProm: 'New prometheus server', // "新增Prometheus Server"
+      editProm: 'Edit prometheus server', // "修改Prometheus Server"
+      type: 'Type', // "类别"
       checkTime: 'Check time',
-      dataCenter:'Data center',
+      dataCenter: 'Data center'
     },
     dc: {
       dc: 'Data center',
-      area: "Area",
+      area: 'Area',
       dcName: 'Data center name',
       selectArea: 'Select area',
-      cabinetNum: "Cabinet number",
-      assets: "Assets",
-      remark:'Remark',
-      cabinets: "Cabinets",
+      cabinetNum: 'Cabinet number',
+      assets: 'Assets',
+      remark: 'Remark',
+      cabinets: 'Cabinets',
       createDc: 'Create data center',
       editDc: 'Edit data center',
       editCabinet: 'Edit cabinet',
-      traffic:{
-        title:'Traffic Setting',
-        add:'Add',
-        direction:'Direction',
-        tags:'Tags',
-        snmpSetting:'SNMP setting',
+      traffic: {
+        title: 'Traffic Setting',
+        add: 'Add',
+        direction: 'Direction',
+        tags: 'Tags',
+        snmpSetting: 'SNMP setting'
       },
-      usable:'Usable',
-      suspended:'Suspended',
-      state:'State',
-      longitude:'Longitude',
-      latitude:'Latitude',
+      usable: 'Usable',
+      suspended: 'Suspended',
+      state: 'State',
+      longitude: 'Longitude',
+      latitude: 'Latitude'
     },
     model: {
       model: 'Asset model',
       vendor: 'Vendor',
-      assets: "Assets",
+      assets: 'Assets',
       editModel: 'Edit model',
       createModel: 'Create model',
       remark: 'Remark',
@@ -724,15 +724,15 @@ const en = {
     },
     terminallog: {
       terminallog: 'Terminal log',
-      status: 'Status',//"状态"
+      status: 'Status', // "状态"
       statusItem: {
-        connecting: "Connecting",
-        connectionFailed: "Connection failed",
-        over: "Over",
-        kickedOut: "Kicked out",
-        unknownError: "Unknown error"
+        connecting: 'Connecting',
+        connectionFailed: 'Connection failed',
+        over: 'Over',
+        kickedOut: 'Kicked out',
+        unknownError: 'Unknown error'
       },
-      option: 'Operation',//"操作",
+      option: 'Operation', // "操作",
       host: 'Host',
       port: 'Port',
       userId: 'UserID',
@@ -745,9 +745,9 @@ const en = {
       selectFile: 'Select file',
       SSH: 'SSH',
       TELNET: 'TELNET',
-      password:'Password',
-      key:'Key',
-      endTime:'EndTime',
+      password: 'Password',
+      key: 'Key',
+      endTime: 'EndTime',
       id: 'ID',
       time: 'Time',
       width: 'Width',
@@ -759,297 +759,297 @@ const en = {
       file: 'File',
       success: 'Success',
       fail: 'Fail',
-      startTime: "Start time",
-      duration: "Duration",
-      remote: "Remote",
-      log: "Log",
-      source: "Source IP",
-      killErrorTip: "Killing failed",
-      monitor:{monitor: "monitoring",},
+      startTime: 'Start time',
+      duration: 'Duration',
+      remote: 'Remote',
+      log: 'Log',
+      source: 'Source IP',
+      killErrorTip: 'Killing failed',
+      monitor: { monitor: 'monitoring' },
       cmd: {
-        cmd: "Command",
-        history: "History command",
-        dangerTip: "This command may be dangerous",
-        legendTip: "Legend description",
+        cmd: 'Command',
+        history: 'History command',
+        dangerTip: 'This command may be dangerous',
+        legendTip: 'Legend description'
       },
       record: {
-        record: "Record",
-        pause: "Pause",
-        play: "Play",
-        replay: "Replay",
-        skipTip: "Skip no operation time"
+        record: 'Record',
+        pause: 'Pause',
+        play: 'Play',
+        replay: 'Replay',
+        skipTip: 'Skip no operation time'
       }
     },
     operationlog: {
       operationlog: 'Operation log',
-      id : 'ID',
+      id: 'ID',
       username: 'User',
       operation: 'Operation',
       type: 'Type',
       createDate: 'Time',
-      ip: "IP",
-      userId: "UserId",
-      operaId: "Resources",
-      time: "Duration",
-      params: "Params",
-      state: "State",
-      response:"Response",
-      operations:{
-        add:'add',
-        query:'query',
-        update:'update',
-        import:'import',
-        export:'export',
-        delete:'delete',
-        reset:'reset',
-        unknown:'unknown'
+      ip: 'IP',
+      userId: 'UserId',
+      operaId: 'Resources',
+      time: 'Duration',
+      params: 'Params',
+      state: 'State',
+      response: 'Response',
+      operations: {
+        add: 'add',
+        query: 'query',
+        update: 'update',
+        import: 'import',
+        export: 'export',
+        delete: 'delete',
+        reset: 'reset',
+        unknown: 'unknown'
       }
     },
-    mib:{
-      mib:'SNMP MIB',
-      fileName:'File name',
-      remark:'Remark',
-      updateUser:'Update user',
-      updateAt:'Update time',
-      editMib:'Edit MIB',
-      models:'Models',
-      modelTip:'Please select models',
-      createMib:'Create MIB',
-      mibFiles:'MIB file',
-      uploadTip:'Please upload MIB file',
-      requiredMibFile:'MIB file is required',
-      vendor:'Vendor',
-      type:'Type',
+    mib: {
+      mib: 'SNMP MIB',
+      fileName: 'File name',
+      remark: 'Remark',
+      updateUser: 'Update user',
+      updateAt: 'Update time',
+      editMib: 'Edit MIB',
+      models: 'Models',
+      modelTip: 'Please select models',
+      createMib: 'Create MIB',
+      mibFiles: 'MIB file',
+      uploadTip: 'Please upload MIB file',
+      requiredMibFile: 'MIB file is required',
+      vendor: 'Vendor',
+      type: 'Type',
       mibBrowser: 'MIB browser',
-      noData: "No Data"
+      noData: 'No Data'
     },
-    system:{
-      system:'System',
-      basic:{
-        basic:'Basic',
-        alertApi:'Alert API',
-        assetPingSwith:'Asset ping',
-        assetPingInterval:'Interval',
-        exporterTarget:'Exporter path',
-        scrapeInterval:'Scrape interval',
-        storageRetention:'Local retention',
-        systemName:'System name',
-        curUrl:'Current site URL',
-        timezone:'Timezone',
-        defaultCabinetUsize:'Cabinet U size',
-        second:'second',
-        day:'day',
-        maxSeries:'Query max series',
-        unsaved:'Unsaved tip',
-        mapConfig:"Map attribute",
-        mapTitle:"Configurate map",
-        lat:"latitude",
-        lng:"longitude",
-        zoom:"zoom"
+    system: {
+      system: 'System',
+      basic: {
+        basic: 'Basic',
+        alertApi: 'Alert API',
+        assetPingSwith: 'Asset ping',
+        assetPingInterval: 'Interval',
+        exporterTarget: 'Exporter path',
+        scrapeInterval: 'Scrape interval',
+        storageRetention: 'Local retention',
+        systemName: 'System name',
+        curUrl: 'Current site URL',
+        timezone: 'Timezone',
+        defaultCabinetUsize: 'Cabinet U size',
+        second: 'second',
+        day: 'day',
+        maxSeries: 'Query max series',
+        unsaved: 'Unsaved tip',
+        mapConfig: 'Map attribute',
+        mapTitle: 'Configurate map',
+        lat: 'latitude',
+        lng: 'longitude',
+        zoom: 'zoom'
       },
-      email:{
-        email:'Email',
-        enable:'Enable email',
-        smtpHost:'SMTP host',
-        smtpPort:'SMTP port',
-        smtpAccount:'SMTP account',
-        smtpPwd:'SMTP password',
-        sendAccount:'Send account',
-        testAccount:'Test account',
-        useSSL:'SSL',
-        useTLS:'TLS',
-        testConnection:'Test connection',
-        pwdTip:'Tip:Some email providers need to enter token',
-        sendAccountTip:'Tip:The SMTP account is used as the sending account by default',
-        testAccountTip:'Tip:Used only as test mail recipient',
-        sslTip:'If the SMTP port is 465, you usually need to enable SSL',
-        tlsTip:'If the SMTP port is 587, you usually need to enable TLS'
+      email: {
+        email: 'Email',
+        enable: 'Enable email',
+        smtpHost: 'SMTP host',
+        smtpPort: 'SMTP port',
+        smtpAccount: 'SMTP account',
+        smtpPwd: 'SMTP password',
+        sendAccount: 'Send account',
+        testAccount: 'Test account',
+        useSSL: 'SSL',
+        useTLS: 'TLS',
+        testConnection: 'Test connection',
+        pwdTip: 'Tip:Some email providers need to enter token',
+        sendAccountTip: 'Tip:The SMTP account is used as the sending account by default',
+        testAccountTip: 'Tip:Used only as test mail recipient',
+        sslTip: 'If the SMTP port is 465, you usually need to enable SSL',
+        tlsTip: 'If the SMTP port is 587, you usually need to enable TLS'
       },
-      terminal:{
-        terminal:'Terminal',
-        terminalNum:'Max terminal number'
+      terminal: {
+        terminal: 'Terminal',
+        terminalNum: 'Max terminal number'
       },
-      ldap:{
-        ldap:'LDAP',
-        address:'LDAP address',
-        dn:'Bind DN',
-        pwd:'Password',
-        ou:'User OU',
+      ldap: {
+        ldap: 'LDAP',
+        address: 'LDAP address',
+        dn: 'Bind DN',
+        pwd: 'Password',
+        ou: 'User OU',
         ouTip: 'Use the "|" symbol to separate OU',
-        filter:'User filter',
+        filter: 'User filter',
         filterTip: 'The possible options are: (cn or uid or sAMAccountName=%(user)s)',
-        map:'Attribute mapping',
+        map: 'Attribute mapping',
         mapTip: 'Attribute mapping represents how to map LDAP user attributes to NEZHA users; username,email are the attributes of NEZHA',
-        active:'LDAP authentication'
+        active: 'LDAP authentication'
       },
       link: {
-        link:'Link',
-        name: "Name",
-        url: "Url",
-        operation: "Operation",
-        add: "Add",
-        update: "Update",
-        del: "Delete",
-        nameMaxLength:'The length should be less than 64',
-        uriRequired:'Please fill in the correct url'
+        link: 'Link',
+        name: 'Name',
+        url: 'Url',
+        operation: 'Operation',
+        add: 'Add',
+        update: 'Update',
+        del: 'Delete',
+        nameMaxLength: 'The length should be less than 64',
+        uriRequired: 'Please fill in the correct url'
       },
       notification: {
-        notification:'Notification',
-        name: "Name",
-        filePath: "File path",
-        operation: "Operation",
-        add: "Add",
-        update: "Update",
-        del: "Delete",
-        nameMaxLength:'The length should be less than 64',
-        uriRequired:'Required',
-        filePathReg:'Please enter the correct file path'
+        notification: 'Notification',
+        name: 'Name',
+        filePath: 'File path',
+        operation: 'Operation',
+        add: 'Add',
+        update: 'Update',
+        del: 'Delete',
+        nameMaxLength: 'The length should be less than 64',
+        uriRequired: 'Required',
+        filePathReg: 'Please enter the correct file path'
       },
-      reset:{
-        reset:'Reset',
-        type:'Type',
-        pwd:'Password',
-        metric:'metric',
-        alert:'alert',
-        sysConfig:'System config',
-        pwdTip:'Please input your password',
-        promptTitle:'Confirm',
-        yes:'Yes',
-        no:'No',
+      reset: {
+        reset: 'Reset',
+        type: 'Type',
+        pwd: 'Password',
+        metric: 'metric',
+        alert: 'alert',
+        sysConfig: 'System config',
+        pwdTip: 'Please input your password',
+        promptTitle: 'Confirm',
+        yes: 'Yes',
+        no: 'No'
       }
     },
     assetType: {
-      assetType: "Asset Type",
-      parent: "Parent",
-      pname: "Parent name",
-      editAssetType: "Edit asset type",
-      createAssetType: "Create asset type",
+      assetType: 'Asset Type',
+      parent: 'Parent',
+      pname: 'Parent name',
+      editAssetType: 'Edit asset type',
+      createAssetType: 'Create asset type'
     },
     assetState: {
-      assetState: "Asset State",
-      monitor: "Monitor",
-      alert: "Alert",
-      assetTotal: "Total assets",
-      createAssetState: "Create asset state",
-      editAssetState: "Edit asset state",
+      assetState: 'Asset State',
+      monitor: 'Monitor',
+      alert: 'Alert',
+      assetTotal: 'Total assets',
+      createAssetState: 'Create asset state',
+      editAssetState: 'Edit asset state'
     },
-    exprTemp:{
-      exprTemp:'Expression template',
-      exprTempInfo:'Expression template Info',
-      exprTempRender:'expression template render',
-      exprTempDown:"expression template download",
-      exprTempImport:"expression template import",
-      exprTempExport:"expression template export",
-      exprTempImportCancel:"expression template import rollback",
-      name:'Name',
-      gname:'Group',
-      expression:'Expression',
-      remark:'Description',
-      errorStr:'Please fill in the {errorStr} value',
-      edit:'Edit expression template',
-      create:'New expression template',
-      expressionError:'Please fill in the "expression" value',
+    exprTemp: {
+      exprTemp: 'Expression template',
+      exprTempInfo: 'Expression template Info',
+      exprTempRender: 'expression template render',
+      exprTempDown: 'expression template download',
+      exprTempImport: 'expression template import',
+      exprTempExport: 'expression template export',
+      exprTempImportCancel: 'expression template import rollback',
+      name: 'Name',
+      gname: 'Group',
+      expression: 'Expression',
+      remark: 'Description',
+      errorStr: 'Please fill in the {errorStr} value',
+      edit: 'Edit expression template',
+      create: 'New expression template',
+      expressionError: 'Please fill in the "expression" value'
     }
   },
   alert: {
-    alert: 'Alerts',//"告警"
-    message: 'Message',//'信息'
-    rule: 'Rule',//'规则'
-    alertList: 'Alert message',//"告警信息"
-    alertConfig: 'Alert rule',//"告警规则"
-    alertName: 'Alert name',//"告警名称"
-    severity: 'Priority',//"等级"
-    description: 'Description',//"描述"
-    summary: 'Summary',//"概要"
-    startAt: 'Start time',//"开始时间"
-    endAt: 'End time',//"结束时间"
+    alert: 'Alerts', // "告警"
+    message: 'Message', // '信息'
+    rule: 'Rule', // '规则'
+    alertList: 'Alert message', // "告警信息"
+    alertConfig: 'Alert rule', // "告警规则"
+    alertName: 'Alert name', // "告警名称"
+    severity: 'Priority', // "等级"
+    description: 'Description', // "描述"
+    summary: 'Summary', // "概要"
+    startAt: 'Start time', // "开始时间"
+    endAt: 'End time', // "结束时间"
     list: {
-      //表头
-      linked: 'Linked',//"关联"
-      type: 'Type',//"类别"
-      state: 'State',//"状态"
-      charts: 'Charts',//"图表"
-      //表内容
-      projectAlert: 'Project alert',//"系统告警"
-      moduleAlert: 'Module alert',//"组件告警"
-      deviceAlert: 'Device alert',//"设备告警"
-      pending: 'Pending',//"待处理"
-      expired: 'Expired',//"已过期"
+      // 表头
+      linked: 'Linked', // "关联"
+      type: 'Type', // "类别"
+      state: 'State', // "状态"
+      charts: 'Charts', // "图表"
+      // 表内容
+      projectAlert: 'Project alert', // "系统告警"
+      moduleAlert: 'Module alert', // "组件告警"
+      deviceAlert: 'Device alert', // "设备告警"
+      pending: 'Pending', // "待处理"
+      expired: 'Expired', // "已过期"
       labels: 'Labels',
       current: 'Current',
-      remark:'Remark',
-      id:'ID',
+      remark: 'Remark',
+      id: 'ID'
     },
     config: {
-      name: 'Name',//"名称"
-      receiver: 'Receiver',//"用户组"
-      expr: 'Expression',//"表达式"
-      for: "Duration (s)",//For (s)
-      second:'second',
-      link: 'Link',//'关联'
-      option: 'Operation',//"操作"
-      alertConfig: 'Alert rule',//"告警规则"
-      createAlertConfig: 'New alert rule',//"新增告警规则"
-      editAlertConfig: 'Edit alert rule',//"修改告警规则"
-      alertNum: 'Alert number', //告警信息数量
-      P1: "P1",
-      P2: "P2",
-      P3: "P3",
+      name: 'Name', // "名称"
+      receiver: 'Receiver', // "用户组"
+      expr: 'Expression', // "表达式"
+      for: 'Duration (s)', // For (s)
+      second: 'second',
+      link: 'Link', // '关联'
+      option: 'Operation', // "操作"
+      alertConfig: 'Alert rule', // "告警规则"
+      createAlertConfig: 'New alert rule', // "新增告警规则"
+      editAlertConfig: 'Edit alert rule', // "修改告警规则"
+      alertNum: 'Alert number', // 告警信息数量
+      P1: 'P1',
+      P2: 'P2',
+      P3: 'P3',
       typeOption: {
-        project: 'Project',//'系统'
-        module: 'Module',//'组件'
-        asset: 'Device'//'设备'
+        project: 'Project', // '系统'
+        module: 'Module', // '组件'
+        asset: 'Device'// '设备'
       },
-      operator:'Operator',
-      threshold:'Threshold',
-      unit:'Unit',
+      operator: 'Operator',
+      threshold: 'Threshold',
+      unit: 'Unit',
       chart: {
-        alertRuleInfo: "Alert rule information",
-        alertNumTrend: "Alert num trend",
-        affectEntity: "Affect entity"
+        alertRuleInfo: 'Alert rule information',
+        alertNumTrend: 'Alert num trend',
+        affectEntity: 'Affect entity'
       }
     },
-    silence:{
-      silence:"Alert silence",
-      create:'New alert silence',
-      edit:'Edit alert silence',
-      time:'Time',
-      matcher:'Matcher',
-      reason:'Description',
-      selectTime:'Please select time',
-      selectMather:'Required',
-      datacenter:'datacenter',
-      project:'project',
-      module:'module',
-      endpoint:'endpoint',
-      asset:'asset',
+    silence: {
+      silence: 'Alert silence',
+      create: 'New alert silence',
+      edit: 'Edit alert silence',
+      time: 'Time',
+      matcher: 'Matcher',
+      reason: 'Description',
+      selectTime: 'Please select time',
+      selectMather: 'Required',
+      datacenter: 'datacenter',
+      project: 'project',
+      module: 'module',
+      endpoint: 'endpoint',
+      asset: 'asset'
 
     },
-    P1Rule:'P1: Critical, alarm that can cause business paralysis',
-    P2Rule:'P2: Major, alarm that do not affect the business',
-    P3Rule:'P3: Minor, alarm that need to deal with, but not urgent',
+    P1Rule: 'P1: Critical, alarm that can cause business paralysis',
+    P2Rule: 'P2: Major, alarm that do not affect the business',
+    P3Rule: 'P3: Minor, alarm that need to deal with, but not urgent'
   },
   project: {
     chart: {
-      basicTitle: "Basic info",
-      alertStat: "Alert state",
-      endpointStat: "Endpoint state",
-      projectInfo: "Project information",
-      endpointInfo: "Endpoint information"
+      basicTitle: 'Basic info',
+      alertStat: 'Alert state',
+      endpointStat: 'Endpoint state',
+      projectInfo: 'Project information',
+      endpointInfo: 'Endpoint information'
     },
     project: {
-      project: 'Project',//"系统"
-      projectName: 'Project name',//"系统名称"
-      editProject: 'Edit project',//"编辑系统"
-      description: 'Description',//"描述"
-      createProject: 'New project'//"新增系统"
+      project: 'Project', // "系统"
+      projectName: 'Project name', // "系统名称"
+      editProject: 'Edit project', // "编辑系统"
+      description: 'Description', // "描述"
+      createProject: 'New project'// "新增系统"
     },
     module: {
-      module: 'Module',//"组件"
-      moduleName: 'Module name',//"组件名称"
-      editModule: 'Edit module',//"编辑组件"
-      description: 'Description',//"描述"
-      createModule: 'New module',//"新增组件"
+      module: 'Module', // "组件"
+      moduleName: 'Module name', // "组件名称"
+      editModule: 'Edit module', // "编辑组件"
+      description: 'Description', // "描述"
+      createModule: 'New module', // "新增组件"
       version: 'Version',
       walk: 'Walk',
       maxRepetitions: 'Max repetitions',
@@ -1062,376 +1062,376 @@ const en = {
       contextName: 'Context name',
       privPassword: 'Priv password',
       tip: {
-        defaultEndpointSet: 'Default endpoint settings',//"默认的Endpoint设置"
-        relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'//"组件关联的Endpoint将默认配置以下端口/路径/参数"
+        defaultEndpointSet: 'Default endpoint settings', // "默认的Endpoint设置"
+        relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'// "组件关联的Endpoint将默认配置以下端口/路径/参数"
       }
     },
     endpoint: {
-      createEndpoint: 'New endpoint',//"新增Endpoint"
-      editEndpoint: 'Edit endpoint',//"编辑Endpoint"
-      endpoint: 'Endpoint',//"Endpoint"
-      endpointId: 'Endpoint ID',//"Endpoint ID"
-      host: 'Host',//"Host"
-      port: 'Port',//"端口"
-      param: 'Parameter',//"参数"
-      path: 'Path',//"路径"
-      asset: 'Asset',//"设备"
-      lastUpdate: 'Last reply',//"最后更新时间"
-      moduleParameter: 'Module',//"组件参数"
-      addGraph: 'View graph', //添加图标
+      createEndpoint: 'New endpoint', // "新增Endpoint"
+      editEndpoint: 'Edit endpoint', // "编辑Endpoint"
+      endpoint: 'Endpoint', // "Endpoint"
+      endpointId: 'Endpoint ID', // "Endpoint ID"
+      host: 'Host', // "Host"
+      port: 'Port', // "端口"
+      param: 'Parameter', // "参数"
+      path: 'Path', // "路径"
+      asset: 'Asset', // "设备"
+      lastUpdate: 'Last reply', // "最后更新时间"
+      moduleParameter: 'Module', // "组件参数"
+      addGraph: 'View graph', // 添加图标
       element: 'Element',
       value: 'Value',
       promExpr: 'Please input expression',
-      dialogTitle:'History value', //endpoint 弹出dialog 标题,
-      hideSameLabels:'Hide same labels',
-      stateInfo_230009:'Promserver unavailable',
-      stateInfo_230010:'Promserver can be used',
-      stateInfo_230011:'Endpoint connection refused',
-      alerts:'Alerts',
-      labels:'Labels'
+      dialogTitle: 'History value', // endpoint 弹出dialog 标题,
+      hideSameLabels: 'Hide same labels',
+      stateInfo_230009: 'Promserver unavailable',
+      stateInfo_230010: 'Promserver can be used',
+      stateInfo_230011: 'Endpoint connection refused',
+      alerts: 'Alerts',
+      labels: 'Labels'
     },
     metrics: {
-      metrics: 'Metrics',//"指标"
-      name: 'Name',//'名称'
-      type: 'Type',//'类型'
-      description: 'Description'//'描述'
-    },
-    topology:{
-      module:'Module element',
-      add:'Add',
-      selTwoNode:'Please select two module',
-      save:'Save',
-      cancel:'Cancel',
-      exit:'Exit',
-      preview:'Preview',
-      addLine:'Add line',
-      editLine:'Edit line',
-      lineName:'Line Name',
-      width:'Width',
-      height:'Height',
-      dashes:'dotted line',
-      option:'Option',
-      arrows:'arrows',
-      color:'color',
-      chartName:'Name',
-      unit:'Unit',
-      addModule:'Add module',
-      editModule:'Edit module',
-      edit:'edit',
-      refresh:'refresh',
-      endpoint:'Endpoint',
-      asset:'Asset',
-      total:'Chart',
-      info:'Module Info',
-      alert:'Alert Message',
-      lineType:'Line type',
-      straight:'straight',
-      upload:'upload',
-      requiredName:'The name of the required',
-      imgFormat:'Upload picture can only be JPG/ PNG format!',
-      imgSize:'Upload image size should not exceed 2MB!',
-      imgMeasure:'The width and height of uploaded pictures must be greater than 100!',
-      data:"Data",
-      style:'Style',
-      title:'Title',
-      level:'Level',
-      value:'Value',
-      animation:'Animation',
-      animationType:'Animation type',
-      animationColor:'Animation color',
-      link:'Link',
-      fill:'Fill',
-      lines:'Line',
-      text:'Text',
-      name:'Name',
-      bac:"Background",
-      bacImage:'Background image',
-      defaultLineWidth:'Default line width',
-      defaultLineType:'Default line type',
-      lineWidth:'Line width',
-      grids:'Grids',
-      gridSize:'Grid Size',
-      gridColor:'Grid Color',
-      rule:"Ruler",
-      ruleColor:"Rule Color",
-      defaultStartArrow:'Default start arrow',
-      defaultEndArrow:'Default end arrow',
-      positionAndSize:"Position&Size",
-      circularBead:'Circular bead',
-      rotate:'Rotate',
-      pl:"Padding left",
-      pt:"Padding top",
-      pr:"Padding right",
-      pb:"Padding bottom",
-      gradient:'Gradient',
-      lineStyle:'Line dash',
-      lineColor:'Line color',
-      lineDash:'lineDash',
-      fromArrow:"From arrow",
-      toArrow:"To arrow",
-      arrowColor:"Arrow color",
-      fontSize:'Font Size',
-      fontColor:'Font Color',
-      align:'Align',
-      opacity:'Opacity',
-      bounce:'bounce',
-      shakeX:'shakeX',
-      swing:'swing',
-      heartBeat:'heartBeat',
-      flash:'flash',
-      fade:'fade',
-      flow:'flow',
-      beads:'beads',
-      dot:'dot',
-      comet:'comet',
-      curve:'curve',
-      polyline:'polyline',
-      line:'line',
-      placeholderImg:'Please enter name',
-      unitError:'Please select the folder',
-      imgError:'Please upload pictures',
-      folder:'Folder',
-      selMod:'Please bind module for all nodes',
+      metrics: 'Metrics', // "指标"
+      name: 'Name', // '名称'
+      type: 'Type', // '类型'
+      description: 'Description'// '描述'
     },
+    topology: {
+      module: 'Module element',
+      add: 'Add',
+      selTwoNode: 'Please select two module',
+      save: 'Save',
+      cancel: 'Cancel',
+      exit: 'Exit',
+      preview: 'Preview',
+      addLine: 'Add line',
+      editLine: 'Edit line',
+      lineName: 'Line Name',
+      width: 'Width',
+      height: 'Height',
+      dashes: 'dotted line',
+      option: 'Option',
+      arrows: 'arrows',
+      color: 'color',
+      chartName: 'Name',
+      unit: 'Unit',
+      addModule: 'Add module',
+      editModule: 'Edit module',
+      edit: 'edit',
+      refresh: 'refresh',
+      endpoint: 'Endpoint',
+      asset: 'Asset',
+      total: 'Chart',
+      info: 'Module Info',
+      alert: 'Alert Message',
+      lineType: 'Line type',
+      straight: 'straight',
+      upload: 'upload',
+      requiredName: 'The name of the required',
+      imgFormat: 'Upload picture can only be JPG/ PNG format!',
+      imgSize: 'Upload image size should not exceed 2MB!',
+      imgMeasure: 'The width and height of uploaded pictures must be greater than 100!',
+      data: 'Data',
+      style: 'Style',
+      title: 'Title',
+      level: 'Level',
+      value: 'Value',
+      animation: 'Animation',
+      animationType: 'Animation type',
+      animationColor: 'Animation color',
+      link: 'Link',
+      fill: 'Fill',
+      lines: 'Line',
+      text: 'Text',
+      name: 'Name',
+      bac: 'Background',
+      bacImage: 'Background image',
+      defaultLineWidth: 'Default line width',
+      defaultLineType: 'Default line type',
+      lineWidth: 'Line width',
+      grids: 'Grids',
+      gridSize: 'Grid Size',
+      gridColor: 'Grid Color',
+      rule: 'Ruler',
+      ruleColor: 'Rule Color',
+      defaultStartArrow: 'Default start arrow',
+      defaultEndArrow: 'Default end arrow',
+      positionAndSize: 'Position&Size',
+      circularBead: 'Circular bead',
+      rotate: 'Rotate',
+      pl: 'Padding left',
+      pt: 'Padding top',
+      pr: 'Padding right',
+      pb: 'Padding bottom',
+      gradient: 'Gradient',
+      lineStyle: 'Line dash',
+      lineColor: 'Line color',
+      lineDash: 'lineDash',
+      fromArrow: 'From arrow',
+      toArrow: 'To arrow',
+      arrowColor: 'Arrow color',
+      fontSize: 'Font Size',
+      fontColor: 'Font Color',
+      align: 'Align',
+      opacity: 'Opacity',
+      bounce: 'bounce',
+      shakeX: 'shakeX',
+      swing: 'swing',
+      heartBeat: 'heartBeat',
+      flash: 'flash',
+      fade: 'fade',
+      flow: 'flow',
+      beads: 'beads',
+      dot: 'dot',
+      comet: 'comet',
+      curve: 'curve',
+      polyline: 'polyline',
+      line: 'line',
+      placeholderImg: 'Please enter name',
+      unitError: 'Please select the folder',
+      imgError: 'Please upload pictures',
+      folder: 'Folder',
+      selMod: 'Please bind module for all nodes'
+    }
   },
-  date:{
-    week:{
-      one:'MON',
-      two:'TUE',
-      three:'WED',
-      four:'THU',
-      five:'FRI',
-      six:'SAT',
-      seven:'SUN',
+  date: {
+    week: {
+      one: 'MON',
+      two: 'TUE',
+      three: 'WED',
+      four: 'THU',
+      five: 'FRI',
+      six: 'SAT',
+      seven: 'SUN'
     }
   },
   buttons: {
     panel: {
-      view: "View panel",
-      toAdd: "Add panel",
-      toEdit: "Edit panel",
-      delete: "Delete panel",
-      save: "Save panel",
+      view: 'View panel',
+      toAdd: 'Add panel',
+      toEdit: 'Edit panel',
+      delete: 'Delete panel',
+      save: 'Save panel',
       chart: {
-        toAdd: "Add chart",
-        import: "Import chart",
-        export: "Export chart",
-        toEdit: "Edit chart",
-        save: "Save chart",
-        delete: "Delete chart",
-        duplicate: "Duplicate chart",
+        toAdd: 'Add chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        toEdit: 'Edit chart',
+        save: 'Save chart',
+        delete: 'Delete chart',
+        duplicate: 'Duplicate chart'
       }
     },
     explore: {
-      view: "View explore",
-      toAdd: "Add chart",
-      save: "Save chart",
+      view: 'View explore',
+      toAdd: 'Add chart',
+      save: 'Save chart'
     },
     asset: {
-      view: "View asset",
-      toAdd: "Add asset",
-      toEdit: "Edit asset",
-      toBatchEdit: "Batch edit asset",
-      delete: "Delete asset",
-      save: "Save asset",
-      import: "Import asset",
-      export: "Export asset",
-      connect: "Connect to asset",
+      view: 'View asset',
+      toAdd: 'Add asset',
+      toEdit: 'Edit asset',
+      toBatchEdit: 'Batch edit asset',
+      delete: 'Delete asset',
+      save: 'Save asset',
+      import: 'Import asset',
+      export: 'Export asset',
+      connect: 'Connect to asset',
       endpoint: {
-        view: "View endpoint",
-        toAdd: "Add endpoint",
-        toEdit: "Edit endpoint",
-        delete: "Delete endpoint",
-        save: "Save endpoint",
-        import: "Import endpoint",
-        export: "Export endpoint",
+        view: 'View endpoint',
+        toAdd: 'Add endpoint',
+        toEdit: 'Edit endpoint',
+        delete: 'Delete endpoint',
+        save: 'Save endpoint',
+        import: 'Import endpoint',
+        export: 'Export endpoint'
       },
       alerts: {
-        view: "View alerts",
-        delete: "Delete alerts",
-        export: "Export alerts",
+        view: 'View alerts',
+        delete: 'Delete alerts',
+        export: 'Export alerts'
       },
       chart: {
-        toAdd: "Add chart",
-        toEdit: "Edit chart",
-        delete: "Delete chart",
-        save: "Save chart",
-        import: "Import chart",
-        export: "Export chart",
-        duplicate: "Duplicate chart",
-        sync: "Sync chart"
+        toAdd: 'Add chart',
+        toEdit: 'Edit chart',
+        delete: 'Delete chart',
+        save: 'Save chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        duplicate: 'Duplicate chart',
+        sync: 'Sync chart'
       },
       vendor: {
-        toAdd: "Add vendor",
-        save: "Save chart",
+        toAdd: 'Add vendor',
+        save: 'Save chart'
       }
     },
     project: {
-      view: "View project",
-      toEdit: "Edit project",
-      delete: "Delete project",
-      save: "Save project",
+      view: 'View project',
+      toEdit: 'Edit project',
+      delete: 'Delete project',
+      save: 'Save project',
       topo: {
-        edit: "Edit topo",
-        save: "Save topo",
+        edit: 'Edit topo',
+        save: 'Save topo'
       },
       module: {
-        toEdit: "Edit module",
-        delete: "Delete module",
-        save: "Save module",
+        toEdit: 'Edit module',
+        delete: 'Delete module',
+        save: 'Save module'
       },
       endpoint: {
-        toAdd: "Add endpoint",
-        toEdit: "Edit endpoint",
-        delete: "Delete endpoint",
-        save: "Save endpoint",
-        import: "Import endpoint",
-        export: "Export endpoint",
+        toAdd: 'Add endpoint',
+        toEdit: 'Edit endpoint',
+        delete: 'Delete endpoint',
+        save: 'Save endpoint',
+        import: 'Import endpoint',
+        export: 'Export endpoint',
         alerts: {
-          view: "View alerts",
-          delete: "Delete alerts",
-          export: "Export alerts",
+          view: 'View alerts',
+          delete: 'Delete alerts',
+          export: 'Export alerts'
         },
         query: {
-          view: "View query",
-          toAdd: "Add chart",
-          save: "Save chart",
+          view: 'View query',
+          toAdd: 'Add chart',
+          save: 'Save chart'
         }
       }
     },
     message: {
-      view: "View alerts",
-      delete: "Delete alerts",
-      export: "Export alerts",
+      view: 'View alerts',
+      delete: 'Delete alerts',
+      export: 'Export alerts'
     },
     rule: {
-      view: "View rule",
-      toAdd: "Add rule",
-      toEdit: "Edit rule",
-      delete: "Delete rule",
-      save: "Save rule",
+      view: 'View rule',
+      toAdd: 'Add rule',
+      toEdit: 'Edit rule',
+      delete: 'Delete rule',
+      save: 'Save rule',
       alerts: {
-        view: "View alerts",
-        delete: "Delete alerts",
-        export: "Export alerts",
-      },
+        view: 'View alerts',
+        delete: 'Delete alerts',
+        export: 'Export alerts'
+      }
     },
     account: {
-      view: "View account",
-      toAdd: "Add account",
-      toEdit: "Edit account",
-      delete: "Delete account",
-      save: "Save account",
+      view: 'View account',
+      toAdd: 'Add account',
+      toEdit: 'Edit account',
+      delete: 'Delete account',
+      save: 'Save account'
     },
     role: {
-      view: "View role",
-      toAdd: "Add role",
-      toEdit: "Edit role",
-      delete: "Delete role",
-      save: "Save role",
+      view: 'View role',
+      toAdd: 'Add role',
+      toEdit: 'Edit role',
+      delete: 'Delete role',
+      save: 'Save role'
     },
     prom: {
-      view: "View prom",
-      toAdd: "Add prom",
-      toEdit: "Edit prom",
-      delete: "Delete prom",
-      save: "Save prom",
+      view: 'View prom',
+      toAdd: 'Add prom',
+      toEdit: 'Edit prom',
+      delete: 'Delete prom',
+      save: 'Save prom'
     },
     dc: {
-      view: "View data center",
-      toAdd: "Add data center",
-      toEdit: "Edit data center",
-      delete: "Delete data center",
-      save: "Save data center",
-      trafficSetting: "Traffic setting",
-      trafficSettingSave: "Save traffic setting",
+      view: 'View data center',
+      toAdd: 'Add data center',
+      toEdit: 'Edit data center',
+      delete: 'Delete data center',
+      save: 'Save data center',
+      trafficSetting: 'Traffic setting',
+      trafficSettingSave: 'Save traffic setting',
       cabinet: {
-        view: "View cabinet",
-        toAdd: "Add cabinet",
-        toEdit: "Edit cabinet",
-        delete: "Delete cabinet",
-        save: "Save cabinet",
+        view: 'View cabinet',
+        toAdd: 'Add cabinet',
+        toEdit: 'Edit cabinet',
+        delete: 'Delete cabinet',
+        save: 'Save cabinet'
       }
     },
     model: {
-      view: "View model",
-      toAdd: "Add model",
-      toEdit: "Edit model",
-      delete: "Delete model",
-      save: "Save model",
-      panel: "View panel",
+      view: 'View model',
+      toAdd: 'Add model',
+      toEdit: 'Edit model',
+      delete: 'Delete model',
+      save: 'Save model',
+      panel: 'View panel',
       chart: {
-        view: "View chart",
-        toAdd: "Add chart",
-        toEdit: "Edit chart",
-        delete: "Delete chart",
-        save: "Save chart",
-        import: "Import chart",
-        export: "Export chart",
-        duplicate: "Duplicate chart",
-        sync: "Sync chart"
-      },
+        view: 'View chart',
+        toAdd: 'Add chart',
+        toEdit: 'Edit chart',
+        delete: 'Delete chart',
+        save: 'Save chart',
+        import: 'Import chart',
+        export: 'Export chart',
+        duplicate: 'Duplicate chart',
+        sync: 'Sync chart'
+      }
     },
     snmp: {
-      view: "View mib file",
-      toAdd: "Add mib file",
-      toEdit: "Edit mib file",
-      delete: "Delete mib file",
-      save: "Save mib file",
-      download: "Download mib file",
-      browserExport: "Export mib browser",
-      browserView: "View mib browser"
+      view: 'View mib file',
+      toAdd: 'Add mib file',
+      toEdit: 'Edit mib file',
+      delete: 'Delete mib file',
+      save: 'Save mib file',
+      download: 'Download mib file',
+      browserExport: 'Export mib browser',
+      browserView: 'View mib browser'
     },
     system: {
-      basic: "Basic save",
-      email: "Email save",
-      terminal: "Terminal save",
-      ldap: "LDAP save",
+      basic: 'Basic save',
+      email: 'Email save',
+      terminal: 'Terminal save',
+      ldap: 'LDAP save',
       notification: {
-        add: "Add notification",
-        toEdit: "Edit notification",
-        delete: "Delete notification",
-        save: "Save notification",
+        add: 'Add notification',
+        toEdit: 'Edit notification',
+        delete: 'Delete notification',
+        save: 'Save notification'
       },
       link: {
-        add: "Add link",
-        toEdit: "Edit link",
-        delete: "Delete link",
-        save: "Save link",
+        add: 'Add link',
+        toEdit: 'Edit link',
+        delete: 'Delete link',
+        save: 'Save link'
       },
-      reset: "Reset system config",
+      reset: 'Reset system config'
     },
     header: {
-      header: "Header",
-      link: "Link",
-      terminal: "Terminal",
-      terminalUpload: "Upload in terminal",
-      terminalDownload: "Download in terminal",
+      header: 'Header',
+      link: 'Link',
+      terminal: 'Terminal',
+      terminalUpload: 'Upload in terminal',
+      terminalDownload: 'Download in terminal',
       add: {
-        view: "View add button",
-        project: "Add project",
-        module: "Add module",
-        endpoint: "Add endpoint",
-        rule: "Add rule",
-        asset: "Add asset",
+        view: 'View add button',
+        project: 'Add project',
+        module: 'Add module',
+        endpoint: 'Add endpoint',
+        rule: 'Add rule',
+        asset: 'Add asset'
       }
     },
     assetType: {
-      view: "View",
-      toAdd: "Add asset type",
-      toEdit: "Edit asset type",
-      delete: "Delete asset type",
-      save: "Save asset type",
+      view: 'View',
+      toAdd: 'Add asset type',
+      toEdit: 'Edit asset type',
+      delete: 'Delete asset type',
+      save: 'Save asset type'
     },
     assetState: {
-      view: "View",
-      toAdd: "Add asset state",
-      toEdit: "Edit asset state",
-      delete: "Delete asset state",
-      save: "Save asset state",
-    },
+      view: 'View',
+      toAdd: 'Add asset state',
+      toEdit: 'Edit asset state',
+      delete: 'Delete asset state',
+      save: 'Save asset state'
+    }
   },
   ...enLocale
 }
 
-export default en;
+export default en
diff --git a/nezha-fronted/src/components/common/language/index.js b/nezha-fronted/src/components/common/language/index.js
index af8721a34..dfbf6e068 100644
--- a/nezha-fronted/src/components/common/language/index.js
+++ b/nezha-fronted/src/components/common/language/index.js
@@ -1,6 +1,6 @@
-import en from './en';
-import cn from './cn';
+import en from './en'
+import cn from './cn'
 export default {
   en: en,
   cn: cn
-}
\ No newline at end of file
+}
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 1959e0556..d064e4326 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -5,7 +5,7 @@
       <div class="sidebar-info" style="height: 90%; overflow: auto;">
         <template v-if="parentMenu == '/project'">
           <el-collapse v-model="projectChoose" accordion class="left-menu-bg" ref="projectLeft" style="padding-top: 0;">
-            <el-collapse-item :key="item.id" :name="item.id + ''" v-for="(item, index) in projectList">
+            <el-collapse-item v-for="(item) in projectList" :key="item.id" :name="item.id + ''">
               <template slot="title">
                 <div :class="{'sidebar-info-item-active': item.id == currentProject.id}" :id="'project-module-'+item.id" @click="detailProject(item)" class="sidebar-info-item-project sidebar-info-item">
                   <div class="sidebar-info-item-txt">
@@ -23,7 +23,7 @@
                   <span><i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t("overall.addProject")}}</span>
                 </div>
                 <template v-else>
-                  <div :class="{'sidebar-info-item-active': module.id == currentModule.id}" :id="'project-module-'+module.id" @click="changeModule(item, module)" class="sidebar-info-sub-item" v-for="module in getProjectModule(item.id)">
+                  <div v-for="(module, index) in getProjectModule(item.id)" :id="'project-module-'+module.id" :key="index" :class="{'sidebar-info-item-active': module.id == currentModule.id}" class="sidebar-info-sub-item" @click="changeModule(item, module)">
                     <div :id="`module-${module.id}`" class="item-tip">
                       <div :class="itemTip(module.id, module.name, ready)" class="item-tip-hide item-tip-key el-popover">{{module.name}}</div>
                       <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
@@ -110,7 +110,7 @@
 
         </template>
         <template v-else>
-          <div :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)" class="sidebar-info-item" v-for="menu in parentMenu.children">
+          <div v-for="(menu, index) in parentMenu.children" :key="index" :class="{'sidebar-info-item-active': menu.route == route}" class="sidebar-info-item" @click="jumpTo(menu.route)">
             {{$t(menu.i18n)}}
           </div>
         </template>
@@ -130,539 +130,536 @@
 </template>
 
 <script>
-    import bus from "../../libs/bus";
+import bus from '../../libs/bus'
 
-    export default {
-      name: "leftMenu",
-      props: {
-        resizeFunc: Function,
-      },
-      data() {
-        return{
-          isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
-          parentMenu: {},
-          //active: "/overview",
+export default {
+  name: 'leftMenu',
+  props: {
+    resizeFunc: Function
+  },
+  data () {
+    return {
+      isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
+      parentMenu: {},
+      // active: "/overview",
 
-          //project相关
-          projectList: [],
-          moduleList: [],
-          showProjectPanel: true,
-          currentProjectTitle: '',
-          currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-          module: {}, //编辑的module
-          blankModule: {name: '', project: {}, port: 9100, path: '', param: '',labels:'', type: 'http', paramObj: [],labelModule:[], snmpParam: '', walk: [], version: 2, max_repetitions: 25, retries: 3, timeout: 10, community: 'public', username: '', security_level: 'noAuthNoPriv', password: '', auth_protocol: 'MD5', priv_protocol: 'DES', priv_password: '', context_name: ''}, //空白module
-          currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: '',labels:'',labelModule:[]}, //用来回显的module
-          ready: false,
-          rightBox: {module: {show: false}},
+      // project相关
+      projectList: [],
+      moduleList: [],
+      showProjectPanel: true,
+      currentProjectTitle: '',
+      currentProject: { id: '', name: '', remark: '' }, // endpoint弹框、module列表用来回显project
+      module: {}, // 编辑的module
+      blankModule: { name: '', project: {}, port: 9100, path: '', param: '', labels: '', type: 'http', paramObj: [], labelModule: [], snmpParam: '', walk: [], version: 2, max_repetitions: 25, retries: 3, timeout: 10, community: 'public', username: '', security_level: 'noAuthNoPriv', password: '', auth_protocol: 'MD5', priv_protocol: 'DES', priv_password: '', context_name: '' }, // 空白module
+      currentModule: { id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: '', labels: '', labelModule: [] }, // 用来回显的module
+      ready: false,
+      rightBox: { module: { show: false } },
 
-          //asset相关
-          activeType: 'dataCenter',
-          activeTag:'',
-          dcData: [],
-          dcCheckList: [],
-          assetTypeData: [],
-          assetTypeCheckList: [],
-          vendorData: [],
-          vendorCheckList: [],
-          pingData: [],
-          pingCheckList: [],
-          tagData:[],
-          tagCheckList:[],
-          tagCheckMap:{},
-          lastCheckSize:0,
-          assetPingSwitch:true,
-          isRouterAlive: true,
-          projectChoose:[],
-        }
-      },
-      computed: {
-        route() {
-          return this.$route.path;
-        },
-        itemTip() {
-          return function(id, content, ready) {
-            let className = "item-tip-show";
-            this.$nextTick(() => {
-              if (ready) {
-                let cellDom = document.querySelector(`#module-${id}`);
-                let spanDom = document.querySelector(`#module-${id}>span`);
-                if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
-                  document.querySelector(`#module-${id}>.el-popover`).classList.add(className);
-                } else {
-                  document.querySelector(`#module-${id}>.el-popover`).classList.remove(className);
-                }
-              }
-            });
-            return "";
-          }
-        },
-        checkedTagCount(){
-          return this.tagCheckList.length;
-        },
-        currentProjectChange() {
-          return this.$store.state.currentProject;
-        }
-      },
-      watch: {
-        route: {
-          deep: true,
-          immediate: true,
-          handler(n) {
-            this.parentMenu = this.getParentMenu(n);
-          }
-        },
-        currentProjectChange: {
-          immediate: true,
-          handler(n, o) {
-            if (n && n.id != this.currentProject.id) {
-              this.currentProject = n;
-              if (this.currentProject && this.currentProject.id && this.showProjectPanel) {
-                this.detailProject(this.currentProject);
-                // this.projectChoose=[];
-              }
-              this.changeCurrentModule('');
+      // asset相关
+      activeType: 'dataCenter',
+      activeTag: '',
+      dcData: [],
+      dcCheckList: [],
+      assetTypeData: [],
+      assetTypeCheckList: [],
+      vendorData: [],
+      vendorCheckList: [],
+      pingData: [],
+      pingCheckList: [],
+      tagData: [],
+      tagCheckList: [],
+      tagCheckMap: {},
+      lastCheckSize: 0,
+      assetPingSwitch: true,
+      isRouterAlive: true,
+      projectChoose: []
+    }
+  },
+  computed: {
+    route () {
+      return this.$route.path
+    },
+    itemTip () {
+      return function (id, content, ready) {
+        const className = 'item-tip-show'
+        this.$nextTick(() => {
+          if (ready) {
+            const cellDom = document.querySelector(`#module-${id}`)
+            const spanDom = document.querySelector(`#module-${id}>span`)
+            if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+              document.querySelector(`#module-${id}>.el-popover`).classList.add(className)
+            } else {
+              document.querySelector(`#module-${id}>.el-popover`).classList.remove(className)
             }
-          },
-        },
-        currentProject: {
-          immediate: true,
-          deep: true,
-          handler(n, o) {
-            bus.$emit("current-project-change", n); //告知project.vue
-          },
-        },
-        dcCheckList: {
-          deep: true,
-          immediate:true,
-          handler(n) {
-            bus.$emit("asset-filter-change", "idcIds", n.join(","));
           }
+        })
+        return ''
+      }
+    },
+    checkedTagCount () {
+      return this.tagCheckList.length
+    },
+    currentProjectChange () {
+      return this.$store.state.currentProject
+    }
+  },
+  watch: {
+    route: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.parentMenu = this.getParentMenu(n)
+      }
+    },
+    currentProjectChange: {
+      immediate: true,
+      handler (n, o) {
+        if (n && n.id != this.currentProject.id) {
+          this.currentProject = n
+          if (this.currentProject && this.currentProject.id && this.showProjectPanel) {
+            this.detailProject(this.currentProject)
+            // this.projectChoose=[];
+          }
+          this.changeCurrentModule('')
         }
-      },
-      created() {
-        this.initEvent(); //注册监听事件
-      },
-      mounted() {
-        Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
-          setTimeout(() => {
-            this.ready = true;
-          }, 300);
-        });
-      },
-      methods: {
-        toggleStat() {
-          this.isShrink = !this.isShrink;
-          localStorage.setItem('nz-left-menu-shrink', this.isShrink);
-          if (this.resizeFunc) {
-            this.resizeFunc();
-          }
-        },
-        //根据route获取父菜单，
-        getParentMenu(route) {
-          let parentMenu = "";
-          let end = false;
-          if (route != '/project'){
-            this.changeCurrentModule('');
-          }
-          if (route != '/project' && route != '/asset') {
-            this.$store.getters.menuList.forEach(menu => {
-              if (!end) {
-                if (menu.children) {
-                  menu.children.forEach(subMenu => {
-                    if (subMenu.route == route) {
-                      parentMenu = menu;
-                      end = true;
-                    }
-                  });
+      }
+    },
+    currentProject: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        bus.$emit('current-project-change', n) // 告知project.vue
+      }
+    },
+    dcCheckList: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        bus.$emit('asset-filter-change', 'idcIds', n.join(','))
+      }
+    }
+  },
+  created () {
+    this.initEvent() // 注册监听事件
+  },
+  mounted () {
+    Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
+      setTimeout(() => {
+        this.ready = true
+      }, 300)
+    })
+  },
+  methods: {
+    toggleStat () {
+      this.isShrink = !this.isShrink
+      localStorage.setItem('nz-left-menu-shrink', this.isShrink)
+      if (this.resizeFunc) {
+        this.resizeFunc()
+      }
+    },
+    // 根据route获取父菜单，
+    getParentMenu (route) {
+      let parentMenu = ''
+      let end = false
+      if (route != '/project') {
+        this.changeCurrentModule('')
+      }
+      if (route != '/project' && route != '/asset') {
+        this.$store.getters.menuList.forEach(menu => {
+          if (!end) {
+            if (menu.children) {
+              menu.children.forEach(subMenu => {
+                if (subMenu.route == route) {
+                  parentMenu = menu
+                  end = true
                 }
-              }
-            });
-          } else {
-            parentMenu = route;
+              })
+            }
           }
-          return parentMenu;
-        },
-        getProjectList() {
-          return new Promise(resolve => {
-            this.$get('project', {pageSize: -1}).then(response=>{
-              if(response.code == 200){
-                this.projectList = response.data.list;
-              }
-              resolve(this.projectList);
-            });
-          });
-        },
-        getProjectModule(projectId) {
-          let moduleList = JSON.parse(JSON.stringify(this.moduleList));
-          return moduleList.filter((item,index) => {
-            return item.project.id == projectId;
-          })
-        },
-        getModuleList() {
-          return new Promise(resolve => {
-            this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
-              if (response.code === 200) {
-                this.moduleList = response.data.list;
-                for (let i = 0; i < this.moduleList.length; i++) {
-                  try {
-                    let param=this.moduleList[i].param|| '{}';
-                    let tempObj = JSON.parse(param);
-                    let labels=this.moduleList[i].labels|| '{}';
-                    let tempObj1=JSON.parse(labels);
-                    this.$set(this.moduleList[i], 'paramObj', []);
-                    this.$set(this.moduleList[i], 'labelModule', []);
-                    for (let k in tempObj) {
-                      this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
-                    }
-                    for (let k in tempObj1) {
-                      this.moduleList[i].labelModule.push({key: k, value: tempObj1[k]});
-                    }
-                  } catch (err) {}
+        })
+      } else {
+        parentMenu = route
+      }
+      return parentMenu
+    },
+    getProjectList () {
+      return new Promise(resolve => {
+        this.$get('project', { pageSize: -1 }).then(response => {
+          if (response.code == 200) {
+            this.projectList = response.data.list
+          }
+          resolve(this.projectList)
+        })
+      })
+    },
+    getProjectModule (projectId) {
+      const moduleList = JSON.parse(JSON.stringify(this.moduleList))
+      return moduleList.filter((item, index) => {
+        return item.project.id == projectId
+      })
+    },
+    getModuleList () {
+      return new Promise(resolve => {
+        this.$get('module', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.moduleList = response.data.list
+            for (let i = 0; i < this.moduleList.length; i++) {
+              try {
+                const param = this.moduleList[i].param || '{}'
+                const tempObj = JSON.parse(param)
+                const labels = this.moduleList[i].labels || '{}'
+                const tempObj1 = JSON.parse(labels)
+                this.$set(this.moduleList[i], 'paramObj', [])
+                this.$set(this.moduleList[i], 'labelModule', [])
+                for (const k in tempObj) {
+                  this.moduleList[i].paramObj.push({ key: k, value: tempObj[k] })
                 }
-              }
-              resolve(this.moduleList);
-            });
-          });
-        },
-        //左侧module列表选中切换，与project.vue同步
-        changeModule(project, module) {
-          this.showProjectPanel = false;
-          this.changeCurrentProject(project);
-          this.changeCurrentModule(module);
-          bus.$emit("project-page-type", "endpoint");  //告知project.vue
-        },
-        addModule(obj) {
-          this.module = this.newModule(obj);
-          this.rightBox.module.show = true;
-          this.$nextTick(() => {
-            this.$refs.moduleBox.initWalk();
-          });
-        },
-        newModule(obj) {
-          let module=JSON.parse(JSON.stringify(this.blankModule));
-          module.project = this.$store.state.currentProject;
-          if(obj){
-            module.project=obj;
+                for (const k in tempObj1) {
+                  this.moduleList[i].labelModule.push({ key: k, value: tempObj1[k] })
+                }
+              } catch (err) {}
+            }
           }
-          return module
-        },
-        //弹出module编辑页
-        editModule(module) {
-          this.module = JSON.parse(JSON.stringify(module));
-          if (!this.module.paramObj) {
-            this.$set(this.module, 'paramObj', []);
-          }
-          if (!this.module.labelModule) {
-            this.$set(this.module, 'labelModule', []);
-          }
-          if (this.module.snmpParam) {
-            this.initSnmpParam(this.module);
-          }
-          this.rightBox.module.show = true;
-          this.$nextTick(() => {
-            this.$refs.moduleBox.initWalk();
-          });
-        },
-        closeModuleRightBox(refresh) {
-          this.rightBox.module.show = false;
-          if (refresh) {
-            this.getModuleList();
-          }
-        },
-        initSnmpParam(module) {
-          this.$set(module, 'walk', []);
-          this.$set(module, 'version', '');
-          this.$set(module, 'max_repetitions', '');
-          this.$set(module, 'retries', '');
-          this.$set(module, 'timeout', '');
-          this.$set(module, 'community', '');
-          this.$set(module, 'username', '');
-          this.$set(module, 'security_level', '');
-          this.$set(module, 'password', '');
-          this.$set(module, 'auth_protocol', '');
-          this.$set(module, 'priv_protocol', '');
-          this.$set(module, 'priv_password', '');
-          this.$set(module, 'context_name', '');
-        },
-        changeCurrentProject(project) {
+          resolve(this.moduleList)
+        })
+      })
+    },
+    // 左侧module列表选中切换，与project.vue同步
+    changeModule (project, module) {
+      this.showProjectPanel = false
+      this.changeCurrentProject(project)
+      this.changeCurrentModule(module)
+      bus.$emit('project-page-type', 'endpoint') // 告知project.vue
+    },
+    addModule (obj) {
+      this.module = this.newModule(obj)
+      this.rightBox.module.show = true
+      this.$nextTick(() => {
+        this.$refs.moduleBox.initWalk()
+      })
+    },
+    newModule (obj) {
+      const module = JSON.parse(JSON.stringify(this.blankModule))
+      module.project = this.$store.state.currentProject
+      if (obj) {
+        module.project = obj
+      }
+      return module
+    },
+    // 弹出module编辑页
+    editModule (module) {
+      this.module = JSON.parse(JSON.stringify(module))
+      if (!this.module.paramObj) {
+        this.$set(this.module, 'paramObj', [])
+      }
+      if (!this.module.labelModule) {
+        this.$set(this.module, 'labelModule', [])
+      }
+      if (this.module.snmpParam) {
+        this.initSnmpParam(this.module)
+      }
+      this.rightBox.module.show = true
+      this.$nextTick(() => {
+        this.$refs.moduleBox.initWalk()
+      })
+    },
+    closeModuleRightBox (refresh) {
+      this.rightBox.module.show = false
+      if (refresh) {
+        this.getModuleList()
+      }
+    },
+    initSnmpParam (module) {
+      this.$set(module, 'walk', [])
+      this.$set(module, 'version', '')
+      this.$set(module, 'max_repetitions', '')
+      this.$set(module, 'retries', '')
+      this.$set(module, 'timeout', '')
+      this.$set(module, 'community', '')
+      this.$set(module, 'username', '')
+      this.$set(module, 'security_level', '')
+      this.$set(module, 'password', '')
+      this.$set(module, 'auth_protocol', '')
+      this.$set(module, 'priv_protocol', '')
+      this.$set(module, 'priv_password', '')
+      this.$set(module, 'context_name', '')
+    },
+    changeCurrentProject (project) {
+      // localStorage.setItem("nz-current-project", project.id);
+      this.$store.commit('currentProjectChange', project)
+      this.currentProject = project
+    },
+    changeCurrentModule (module) {
+      bus.$emit('current-module-change', module) // 告知project.vue
+      this.currentModule = module
+    },
+    // 与header.vue同步
+    detailProject (project) {
+      this.showProjectPanel = true
+      this.changeCurrentProject(project)
+      bus.$emit('project-page-type', 'project') // 告知project.vue
+      this.changeCurrentModule({ id: '' })
+    },
 
-          // localStorage.setItem("nz-current-project", project.id);
-          this.$store.commit("currentProjectChange", project);
-          this.currentProject = project;
-        },
-        changeCurrentModule(module) {
-          bus.$emit("current-module-change", module);  //告知project.vue
-          this.currentModule = module;
-        },
-        //与header.vue同步
-        detailProject(project) {
-          this.showProjectPanel = true;
-          this.changeCurrentProject(project);
-          bus.$emit("project-page-type", "project");  //告知project.vue
-          this.changeCurrentModule({id: ""});
-        },
-
-        initEvent() {
-          /*bus.$on("parent-menu-change", parentMenu => {
+    initEvent () {
+      /* bus.$on("parent-menu-change", parentMenu => {
             this.parentMenu = parentMenu;
           });
           bus.$on("menu-change", menu => {
             this.active = menu;
-          });*/
-          bus.$on("header-dc-change", dcId => {
-            this.dcCheckList = [dcId];
-            // bus.$emit("asset-filter-change", "idcIds", dcId);
-          });
-          bus.$on("clear-asset-filter", dcId => {
-            this.dcCheckList = [];
-            this.assetTypeCheckList = [];
-            this.vendorCheckList = [];
-            this.pingCheckList = [];
-          });
-          bus.$on("project-list-change", () => {
-            this.getProjectList();
-          });
-          bus.$on("module-list-change", menu => {
-            this.getModuleList();
-          });
-          bus.$on('asset-list-change',()=>{
-            let dcData=JSON.parse(JSON.stringify(this.dcData))
-            let assetTypeData=JSON.parse(JSON.stringify(this.assetTypeData))
-            let vendorData=JSON.parse(JSON.stringify(this.vendorData))
-            let pingData=JSON.parse(JSON.stringify(this.pingData))
-            let tagData=JSON.parse(JSON.stringify(this.tagData))
+          }); */
+      bus.$on('header-dc-change', dcId => {
+        this.dcCheckList = [dcId]
+        // bus.$emit("asset-filter-change", "idcIds", dcId);
+      })
+      bus.$on('clear-asset-filter', dcId => {
+        this.dcCheckList = []
+        this.assetTypeCheckList = []
+        this.vendorCheckList = []
+        this.pingCheckList = []
+      })
+      bus.$on('project-list-change', () => {
+        this.getProjectList()
+      })
+      bus.$on('module-list-change', menu => {
+        this.getModuleList()
+      })
+      bus.$on('asset-list-change', () => {
+        const dcData = JSON.parse(JSON.stringify(this.dcData))
+        const assetTypeData = JSON.parse(JSON.stringify(this.assetTypeData))
+        const vendorData = JSON.parse(JSON.stringify(this.vendorData))
+        const pingData = JSON.parse(JSON.stringify(this.pingData))
+        const tagData = JSON.parse(JSON.stringify(this.tagData))
 
-            this.getLeftMenuList().then(()=>{
-              let result=[];
-              let dcDiff=this.compareAssetLeftMenu(dcData,this.dcData,"idcIds")
-              if(dcDiff.length>0){
-                let temp =this.dcCheckList.filter(item=>{
-                  return !dcDiff.find((t,i)=>{return item == t.id})
-                })
-                result.push({key:"idcIds",value:temp.join(',')})
+        this.getLeftMenuList().then(() => {
+          const result = []
+          const dcDiff = this.compareAssetLeftMenu(dcData, this.dcData, 'idcIds')
+          if (dcDiff.length > 0) {
+            const temp = this.dcCheckList.filter(item => {
+              return !dcDiff.find((t, i) => { return item == t.id })
+            })
+            result.push({ key: 'idcIds', value: temp.join(',') })
 
-                this.dcCheckList=temp;
-              }
+            this.dcCheckList = temp
+          }
 
-              let typeDiff=this.compareAssetLeftMenu(assetTypeData,this.assetTypeData,'typeIds')
-              if(typeDiff.length>0){
-                this.assetTypeCheckList=this.assetTypeCheckList.filter(item=>{
-                  return !typeDiff.find(t=>{return item == t.id})
-                })
-                result.push({key:'typeIds',value:this.assetTypeCheckList.join(',')})
-              }
+          const typeDiff = this.compareAssetLeftMenu(assetTypeData, this.assetTypeData, 'typeIds')
+          if (typeDiff.length > 0) {
+            this.assetTypeCheckList = this.assetTypeCheckList.filter(item => {
+              return !typeDiff.find(t => { return item == t.id })
+            })
+            result.push({ key: 'typeIds', value: this.assetTypeCheckList.join(',') })
+          }
 
-              let vendorDiff=this.compareAssetLeftMenu(vendorData,this.vendorData,'vendorIds')
-              if(vendorDiff.length>0){
-                this.vendorCheckList=this.vendorCheckList.filter(item=>{
-                  return !vendorDiff.find(t=>{return item == t.id})
-                })
-                result.push({key:'vendorIds',value:this.vendorCheckList.join(',')})
-              }
+          const vendorDiff = this.compareAssetLeftMenu(vendorData, this.vendorData, 'vendorIds')
+          if (vendorDiff.length > 0) {
+            this.vendorCheckList = this.vendorCheckList.filter(item => {
+              return !vendorDiff.find(t => { return item == t.id })
+            })
+            result.push({ key: 'vendorIds', value: this.vendorCheckList.join(',') })
+          }
 
-              let pingDiff=this.compareAssetLeftMenu(pingData,this.pingData,'pingStates')
-              if(pingDiff.length>0){
-                this.pingCheckList=this.pingCheckList.filter(item=>{
-                  return !pingDiff.find(t=>{return item == t.value})
-                })
-                result.push({key:'pingStates',value:this.pingCheckList.join(',')})
-              }
+          const pingDiff = this.compareAssetLeftMenu(pingData, this.pingData, 'pingStates')
+          if (pingDiff.length > 0) {
+            this.pingCheckList = this.pingCheckList.filter(item => {
+              return !pingDiff.find(t => { return item == t.value })
+            })
+            result.push({ key: 'pingStates', value: this.pingCheckList.join(',') })
+          }
 
-              let tagDiff=this.compareAssetLeftMenu(tagData,this.tagData,"tags")
-              if(tagDiff.length>0){
-                let $self=this;
-                tagDiff.forEach(item=>{
-                  let key=item.key;
-                  let values=item.values;
+          const tagDiff = this.compareAssetLeftMenu(tagData, this.tagData, 'tags')
+          if (tagDiff.length > 0) {
+            const $self = this
+            tagDiff.forEach(item => {
+              const key = item.key
+              const values = item.values
 
-                  let checkedVals=$self.tagCheckMap[key];
-                  if(checkedVals&&checkedVals.length>0){
-                    $self.tagCheckList=$self.tagCheckList.filter(t=>{return !values.find(r=>{return key+"-"+r.value == t})})
-                    $self.lastCheckSize = $self.lastCheckSize - values.length;
-                    checkedVals=checkedVals.filter(t=>{return !values.find(r=>{return r.value == t;})})
-                    if(checkedVals.length>0){
-                      $self.tagCheckMap[key]=checkedVals;
-                    }else{
-                      delete $self.tagCheckMap[key]
-                    }
-
-                  }
-                })
-                if(Object.keys($self.tagCheckMap).length > 0){
-                  result.push({key:'tags',value:JSON.stringify($self.tagCheckMap)})
-          }     else{
-                  result.push({key:'tags',value:''})
+              let checkedVals = $self.tagCheckMap[key]
+              if (checkedVals && checkedVals.length > 0) {
+                $self.tagCheckList = $self.tagCheckList.filter(t => { return !values.find(r => { return key + '-' + r.value == t }) })
+                $self.lastCheckSize = $self.lastCheckSize - values.length
+                checkedVals = checkedVals.filter(t => { return !values.find(r => { return r.value == t }) })
+                if (checkedVals.length > 0) {
+                  $self.tagCheckMap[key] = checkedVals
+                } else {
+                  delete $self.tagCheckMap[key]
                 }
               }
-              bus.$emit("asset-filter-change", "multiParam", result);
-            });
-          })
-          bus.$on('asset-property-change',()=>{
-            this.getLeftMenuList();
-          })
-
-          bus.$on('asset-ping-switch-change',(isOpen)=>{
-            this.assetPingSwitch = isOpen
-          })
-        },
-        // 获取asset左侧菜单数据
-        getLeftMenuList(){
-          return new Promise(resolve => {
-            this.$get('asset/filter').then(response => {
-              if (response.code === 200) {
-                //dc
-                this.dcData = response.data.dc;
-                // AssetType
-                this.assetTypeData = response.data.assetType;
-                // vendor
-                this.vendorData = response.data.vendor;
-                // ping
-                this.pingData=[{label:'up',value:1,total:0},{label:'down',value:0,total:0}]
-
-                this.pingData.map(item=>{
-                  if(response.data.ping){
-                    let data=response.data.ping.find(t=>t.name == item.label);
-                    if(data){
-                      item.total = data.total;
-                      item.value = data.status
-                    }
-                  }
-                  return item;
-                })
-
-                this.tagData = response.data.tag
-
-              }
-              resolve();
-            });
-          });
-        },
-        compareAssetLeftMenu:function(src,dist,key){
-          let result=src.filter(item=>{
-             if(key == 'pingStates'){
-               return !dist.find(t=>{return t.name == item.name})
-             }
-             if(key == 'tags'){
-               let tag=dist.find(t=>{
-                 return t.key == item.key
-               })
-               if(tag){
-                 let srcValues=item.values;
-                 let distValues=tag.values
-
-                 let vals=srcValues.filter(t=>{
-                   return distValues.find(r=>{
-                     return r.value == t.value;
-                   })
-                 })
-
-                 return !vals || vals.length < 1;
-               }else{
-                 return true;
-               }
-             }
-             return !dist.find(t=>{return item.id == t.id;})
-          })
-
-          return result
-        },
-        //asset左侧菜单4个事件
-        changeCheckBox() {
-          this.assetClick = true;
-        },
-        changeAssetTypeCheckBox() {
-          if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
-            let assetTypeIds = this.assetTypeCheckList.join(',');
-            bus.$emit("asset-filter-change", "typeIds", assetTypeIds);
-          }else{
-            bus.$emit("asset-filter-change", "typeIds", "");
-          }
-        },
-        changeVendorCheckBox() {
-          if(this.vendorCheckList && this.vendorCheckList.length > 0){
-            let vendorIds = this.vendorCheckList.join(',');
-            bus.$emit("asset-filter-change", "vendorIds", vendorIds);
-          }else{
-            bus.$emit("asset-filter-change", "vendorIds", "");
-          }
-        },
-        changePingCheckBox() {
-          if(this.pingCheckList && this.pingCheckList.length > 0){
-            let pingStates = this.pingCheckList.join(',');
-            bus.$emit("asset-filter-change", "pingStates", pingStates);
-          }else{
-            bus.$emit("asset-filter-change", "pingStates", "");
-          }
-        },
-        changeTagCheckBox(tag,value){
-          let checked=this.tagCheckMap[tag.key];
-          if(!checked){
-            checked=[];
-          }
-          if(this.lastCheckSize < this.tagCheckList.length){
-            checked.push(value)
-          }else{
-            let index=checked.findIndex(item=>{
-              return item == value
             })
-            checked.splice(index,1)
+            if (Object.keys($self.tagCheckMap).length > 0) {
+              result.push({ key: 'tags', value: JSON.stringify($self.tagCheckMap) })
+            } else {
+              result.push({ key: 'tags', value: '' })
+            }
           }
+          bus.$emit('asset-filter-change', 'multiParam', result)
+        })
+      })
+      bus.$on('asset-property-change', () => {
+        this.getLeftMenuList()
+      })
 
-          if(checked.length>0){
-            this.tagCheckMap[tag.key] = checked;
-          }else{
-            if(this.tagCheckMap[tag.key]){
-              delete this.tagCheckMap[tag.key]
-            }
+      bus.$on('asset-ping-switch-change', (isOpen) => {
+        this.assetPingSwitch = isOpen
+      })
+    },
+    // 获取asset左侧菜单数据
+    getLeftMenuList () {
+      return new Promise(resolve => {
+        this.$get('asset/filter').then(response => {
+          if (response.code === 200) {
+            // dc
+            this.dcData = response.data.dc
+            // AssetType
+            this.assetTypeData = response.data.assetType
+            // vendor
+            this.vendorData = response.data.vendor
+            // ping
+            this.pingData = [{ label: 'up', value: 1, total: 0 }, { label: 'down', value: 0, total: 0 }]
+
+            this.pingData.map(item => {
+              if (response.data.ping) {
+                const data = response.data.ping.find(t => t.name == item.label)
+                if (data) {
+                  item.total = data.total
+                  item.value = data.status
+                }
+              }
+              return item
+            })
+
+            this.tagData = response.data.tag
           }
-          this.lastCheckSize = this.tagCheckList.length;
-          if(Object.keys(this.tagCheckMap).length > 0){
-            bus.$emit("asset-filter-change", "tags", JSON.stringify(this.tagCheckMap));
-          }else{
-            bus.$emit("asset-filter-change", "tags", '');
-          }
-        },
-        indOf(a, b) {
-          let c = [];
-          for (let i = 0; i < a.length; i++) {
-            c.push(a[i]);
-          }
-          if (c.indexOf(b) > -1) {
-            return true;
-          } else {
-            return false;
-          }
-        },
-        jumpTo(route) {
-          if(route == this.route){
-            this.reload();
-          }
-          this.$router.push({
-            path: route,
-            query: {
-              t: +new Date()
-            }
-          });
-        },
-        reload () {
-          this.isRouterAlive = false
-          this.$nextTick(() => (this.isRouterAlive = true))
+          resolve()
+        })
+      })
+    },
+    compareAssetLeftMenu: function (src, dist, key) {
+      const result = src.filter(item => {
+        if (key == 'pingStates') {
+          return !dist.find(t => { return t.name == item.name })
         }
-      },
-      beforeDestroy(){
-        /*bus.$off("parent-menu-change");
-          bus.$off("menu-change");*/
-        bus.$off("header-dc-change");
-        bus.$off("clear-asset-filter");
-        bus.$off("project-list-change");
-        bus.$off("module-list-change");
-        bus.$off('asset-list-change');
+        if (key == 'tags') {
+          const tag = dist.find(t => {
+            return t.key == item.key
+          })
+          if (tag) {
+            const srcValues = item.values
+            const distValues = tag.values
 
-        bus.$off('asset-property-change')
+            const vals = srcValues.filter(t => {
+              return distValues.find(r => {
+                return r.value == t.value
+              })
+            })
 
-        bus.$off('asset-ping-switch-change')
+            return !vals || vals.length < 1
+          } else {
+            return true
+          }
+        }
+        return !dist.find(t => { return item.id == t.id })
+      })
+
+      return result
+    },
+    // asset左侧菜单4个事件
+    changeCheckBox () {
+      this.assetClick = true
+    },
+    changeAssetTypeCheckBox () {
+      if (this.assetTypeCheckList && this.assetTypeCheckList.length > 0) {
+        const assetTypeIds = this.assetTypeCheckList.join(',')
+        bus.$emit('asset-filter-change', 'typeIds', assetTypeIds)
+      } else {
+        bus.$emit('asset-filter-change', 'typeIds', '')
       }
+    },
+    changeVendorCheckBox () {
+      if (this.vendorCheckList && this.vendorCheckList.length > 0) {
+        const vendorIds = this.vendorCheckList.join(',')
+        bus.$emit('asset-filter-change', 'vendorIds', vendorIds)
+      } else {
+        bus.$emit('asset-filter-change', 'vendorIds', '')
+      }
+    },
+    changePingCheckBox () {
+      if (this.pingCheckList && this.pingCheckList.length > 0) {
+        const pingStates = this.pingCheckList.join(',')
+        bus.$emit('asset-filter-change', 'pingStates', pingStates)
+      } else {
+        bus.$emit('asset-filter-change', 'pingStates', '')
+      }
+    },
+    changeTagCheckBox (tag, value) {
+      let checked = this.tagCheckMap[tag.key]
+      if (!checked) {
+        checked = []
+      }
+      if (this.lastCheckSize < this.tagCheckList.length) {
+        checked.push(value)
+      } else {
+        const index = checked.findIndex(item => {
+          return item == value
+        })
+        checked.splice(index, 1)
+      }
+
+      if (checked.length > 0) {
+        this.tagCheckMap[tag.key] = checked
+      } else {
+        if (this.tagCheckMap[tag.key]) {
+          delete this.tagCheckMap[tag.key]
+        }
+      }
+      this.lastCheckSize = this.tagCheckList.length
+      if (Object.keys(this.tagCheckMap).length > 0) {
+        bus.$emit('asset-filter-change', 'tags', JSON.stringify(this.tagCheckMap))
+      } else {
+        bus.$emit('asset-filter-change', 'tags', '')
+      }
+    },
+    indOf (a, b) {
+      const c = []
+      for (let i = 0; i < a.length; i++) {
+        c.push(a[i])
+      }
+      if (c.indexOf(b) > -1) {
+        return true
+      } else {
+        return false
+      }
+    },
+    jumpTo (route) {
+      if (route == this.route) {
+        this.reload()
+      }
+      this.$router.push({
+        path: route,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    reload () {
+      this.isRouterAlive = false
+      this.$nextTick(() => (this.isRouterAlive = true))
     }
+  },
+  beforeDestroy () {
+    /* bus.$off("parent-menu-change");
+          bus.$off("menu-change"); */
+    bus.$off('header-dc-change')
+    bus.$off('clear-asset-filter')
+    bus.$off('project-list-change')
+    bus.$off('module-list-change')
+    bus.$off('asset-list-change')
+
+    bus.$off('asset-property-change')
+
+    bus.$off('asset-ping-switch-change')
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/common/loading.vue b/nezha-fronted/src/components/common/loading.vue
index fc3f8418b..8a65896d3 100644
--- a/nezha-fronted/src/components/common/loading.vue
+++ b/nezha-fronted/src/components/common/loading.vue
@@ -14,24 +14,22 @@
 
 <script>
 export default {
-  name: "loading",
+  name: 'loading',
   props: {
 
   },
-  data() {
+  data () {
     return {
-      showLoading:false,
-    };
+      showLoading: false
+    }
   },
   methods: {
-    startLoading(){
-      this.showLoading = true;
-    },
-    endLoading(){
-      this.showLoading = false;
+    startLoading () {
+      this.showLoading = true
     },
+    endLoading () {
+      this.showLoading = false
+    }
   }
-};
+}
 </script>
-
-
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 9028d6d09..fd3d949b7 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -33,11 +33,10 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
-import {mapActions} from "vuex";
+import { mapActions } from 'vuex'
 export default {
-  name: "login",
-  data() {
+  name: 'login',
+  data () {
     return {
       loginData: {
         username: '',
@@ -45,67 +44,67 @@ export default {
         remember: false
       },
       loading: false,
-      lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', //en/cn
-      langListShow: false,
+      lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', // en/cn
+      langListShow: false
     }
   },
   methods: {
-    ...mapActions(["loginSuccess"]),
-    login() {
+    ...mapActions(['loginSuccess']),
+    login () {
       if (this.loading) {
-        return;
+        return
       }
-      if (this.validateLogin()&&(this.$route.path=='/'||this.$route.path=='/login')) {
-        this.loading = true;
+      if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
+        this.loading = true
         this.$post('sys/login', this.loginData).then(res => {
           if (res.code == 200) {
-            //登录成功，记录用户名、token和lang
-            sessionStorage.setItem("nz-username", this.loginData.username);
-            localStorage.setItem("nz-username", this.loginData.username);
-            localStorage.setItem('nz-language', this.lang);
-            this.$i18n.locale = this.lang;
-            this.loginSuccess(res);
+            // 登录成功，记录用户名、token和lang
+            sessionStorage.setItem('nz-username', this.loginData.username)
+            localStorage.setItem('nz-username', this.loginData.username)
+            localStorage.setItem('nz-language', this.lang)
+            this.$i18n.locale = this.lang
+            this.loginSuccess(res)
           } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
           }
         }).finally(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
       }
     },
-    changeLang(lang) {
-      this.lang = lang;
-      this.langListShow = false;
-      this.$i18n.locale = this.lang;
-      localStorage.setItem('nz-language', this.lang);
+    changeLang (lang) {
+      this.lang = lang
+      this.langListShow = false
+      this.$i18n.locale = this.lang
+      localStorage.setItem('nz-language', this.lang)
     },
-    validateLogin() {
+    validateLogin () {
       if (!this.loginData.username || !this.loginData.password) {
-        this.$message.error("Empty username or password");
-        return false;
+        this.$message.error('Empty username or password')
+        return false
       } else {
-        return true;
+        return true
       }
     }
   },
   watch: {
-    /*'loginData.username': function(n, o) {
+    /* 'loginData.username': function(n, o) {
       let lang = localStorage.getItem('nz-language-' + n);
       if (lang) {
         this.lang = lang;
         this.$i18n.locale = this.lang;
       }
-    }*/
+    } */
   },
-  mounted() {
-    const _this = this;
-    this.$i18n.locale = this.lang;
-    document.onkeydown = function(e) {
-      if(e.key === 'Enter'){
-        _this.login();
+  mounted () {
+    const _this = this
+    this.$i18n.locale = this.lang
+    document.onkeydown = function (e) {
+      if (e.key === 'Enter') {
+        _this.login()
       }
-    };
-    document.getElementById("usernameInput").focus();
+    }
+    document.getElementById('usernameInput').focus()
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 52a960735..057206bda 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -9,7 +9,6 @@
       </span>
     </div>
 
-
     <div class="color-show" v-if="!single" ref="colorShow" @click.stop="changeColor">
       <div :style="{background:findColor('bac'),border:'2px solid '+findColor('line'),'line-height':'18px'}" class="color-show-left">
         <span :style="{color:findColor('text')}" style="line-height: 18px;">
@@ -29,183 +28,176 @@
 
 <script>
 
-  import { Sketch} from 'vue-color'
-	export default {
-		name:"nezhaColor",
-    components:{
-      Sketch,
-    },
-    props:{
-      valueArr:{
-		    type:Array,
-        default(){
-          return []
-          /*ex
+import { Sketch } from 'vue-color'
+export default {
+  name: 'nezhaColor',
+  components: {
+    Sketch
+  },
+  props: {
+    valueArr: {
+      type: Array,
+      default () {
+        return []
+        /* ex
           * {
           *   {name:'name',value:value,key:'name'}
           * }
           * */
-        },
-      },
-      colorVal:{
-
-      },
-      single:{
-        type:Boolean,
-        default(){
-          return true
-        },
-      },
-      presetColors: {
-        type: Array,
-        default () {
-          return []
-        }
-      },
-    },
-    watch:{
-      // valueArr:{
-      //   immediate: true,
-      //   handler(n) {
-      //     console.log(n);
-      //     if(n.length){
-      //
-      //     }
-      //   }
-      // },
-      // keyName:{
-      //   deep:true,
-      //   immediate: true,
-      //   handler(n) {
-      //     console.log(n);
-      //   }
-      // }
-    },
-    data(){
-		  return {
-		    colors:'#ffffff',
-        keyName:'',
-        showColorPicker:false,
-        position:{
-          x:undefined,
-          y:undefined,
-        },
-        timer:null
       }
     },
-    mounted(){
-      this.colors = this.valueArr[0].value;
-      this.keyName = this.valueArr[0].name;
+    colorVal: {
+
     },
-    methods:{
-      updateValue(color){
-        this.colors=color.hex;
-        this.$emit('colorChange',color.hex,this.keyName);
-      },
-      changeColor(){
-        this.showColorPicker=!this.showColorPicker;
-        if(this.showColorPicker){
-          window.addEventListener('mousewheel',this.mousewheel);
-         setTimeout(()=>{
-           let position=this.$refs.colorShow.getBoundingClientRect();
-           let colorBox=this.$refs.colorBox.getBoundingClientRect();
-           let w=window.innerWidth;
-           let h=window.innerHeight;
-           //确定x位置
-           if(position.x + colorBox.width>w){
-             position.x=w-colorBox.width;
-           }else{
-             position.x=position.x
-           }
-           //确定Y位置
-
-           if(position.y + colorBox.height > h){
-             position.y=position.y-colorBox.height;
-           } else{
-             position.y=position.y+position.height;
-           }
-           this.position.x=position.x;
-           this.position.y=position.y;
-         })
-        }else{
-          window.removeEventListener('mousewheel',this.mousewheel);
-        }
-        //
-      },
-      colorTabChange(item){
-        this.keyName=item.name;
-        this.colors=this.colorVal[item.name];
-      },
-      exitColor(){
-        this.showColorPicker=false;
-      },
-      mousewheel(){
-        if(!this.$refs.colorBox) return;
-        if(this.timer){
-          clearTimeout(this.timer);
-          this.timer=setTimeout(()=>{
-            let position=this.$refs.colorShow.getBoundingClientRect();
-            let colorBox=this.$refs.colorBox.getBoundingClientRect();
-            let w=window.innerWidth;
-            let h=window.innerHeight;
-            //确定x位置
-            if(position.x + colorBox.width>w){
-              position.x=w-colorBox.width;
-            }else{
-              position.x=position.x
-            }
-            //确定Y位置
-
-            if(position.y + colorBox.height > h){
-              position.y=position.y-colorBox.height;
-            } else{
-              position.y=position.y+position.height;
-            }
-            this.position.x=position.x;
-            this.position.y=position.y;
-            clearTimeout(this.timer);
-            this.timer=null;
-          },200)
-        } else {
-          this.timer=setTimeout(()=>{
-            let position=this.$refs.colorShow.getBoundingClientRect();
-            let colorBox=this.$refs.colorBox.getBoundingClientRect();
-            let w=window.innerWidth;
-            let h=window.innerHeight;
-            //确定x位置
-            if(position.x + colorBox.width>w){
-              position.x=w-colorBox.width;
-            }else{
-              position.x=position.x
-            }
-            //确定Y位置
-
-            if(position.y + colorBox.height > h){
-              position.y=position.y-colorBox.height;
-            } else{
-              position.y=position.y+position.height;
-            }
-            this.position.x=position.x;
-            this.position.y=position.y;
-            clearTimeout(this.timer);
-            this.timer=null;
-          },200)
-        }
-
-      },
-      findColor(key){
-        let findItem=this.valueArr.find(item=>item.key==key);
-        if(findItem){
-          return this.colorVal[findItem.name]
-        }else{
-          return "#000000"
-        };
+    single: {
+      type: Boolean,
+      default () {
+        return true
       }
     },
-    destroyed(){
-		  window.removeEventListener('mousewheel',this.mousewheel);
+    presetColors: {
+      type: Array,
+      default () {
+        return []
+      }
     }
+  },
+  watch: {
+    // valueArr:{
+    //   immediate: true,
+    //   handler(n) {
+    //     console.log(n);
+    //     if(n.length){
+    //
+    //     }
+    //   }
+    // },
+    // keyName:{
+    //   deep:true,
+    //   immediate: true,
+    //   handler(n) {
+    //     console.log(n);
+    //   }
+    // }
+  },
+  data () {
+    return {
+      colors: '#ffffff',
+      keyName: '',
+      showColorPicker: false,
+      position: {
+        x: undefined,
+        y: undefined
+      },
+      timer: null
+    }
+  },
+  mounted () {
+    this.colors = this.valueArr[0].value
+    this.keyName = this.valueArr[0].name
+  },
+  methods: {
+    updateValue (color) {
+      this.colors = color.hex
+      this.$emit('colorChange', color.hex, this.keyName)
+    },
+    changeColor () {
+      this.showColorPicker = !this.showColorPicker
+      if (this.showColorPicker) {
+        window.addEventListener('mousewheel', this.mousewheel)
+        setTimeout(() => {
+          const position = this.$refs.colorShow.getBoundingClientRect()
+          const colorBox = this.$refs.colorBox.getBoundingClientRect()
+          const w = window.innerWidth
+          const h = window.innerHeight
+          // 确定x位置
+          if (position.x + colorBox.width > w) {
+            position.x = w - colorBox.width
+          }
+          // 确定Y位置
+
+          if (position.y + colorBox.height > h) {
+            position.y = position.y - colorBox.height
+          } else {
+            position.y = position.y + position.height
+          }
+          this.position.x = position.x
+          this.position.y = position.y
+        })
+      } else {
+        window.removeEventListener('mousewheel', this.mousewheel)
+      }
+      //
+    },
+    colorTabChange (item) {
+      this.keyName = item.name
+      this.colors = this.colorVal[item.name]
+    },
+    exitColor () {
+      this.showColorPicker = false
+    },
+    mousewheel () {
+      if (!this.$refs.colorBox) return
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          const position = this.$refs.colorShow.getBoundingClientRect()
+          const colorBox = this.$refs.colorBox.getBoundingClientRect()
+          const w = window.innerWidth
+          const h = window.innerHeight
+          // 确定x位置
+          if (position.x + colorBox.width > w) {
+            position.x = w - colorBox.width
+          }
+          // 确定Y位置
+
+          if (position.y + colorBox.height > h) {
+            position.y = position.y - colorBox.height
+          } else {
+            position.y = position.y + position.height
+          }
+          this.position.x = position.x
+          this.position.y = position.y
+          clearTimeout(this.timer)
+          this.timer = null
+        }, 200)
+      } else {
+        this.timer = setTimeout(() => {
+          const position = this.$refs.colorShow.getBoundingClientRect()
+          const colorBox = this.$refs.colorBox.getBoundingClientRect()
+          const w = window.innerWidth
+          const h = window.innerHeight
+          // 确定x位置
+          if (position.x + colorBox.width > w) {
+            position.x = w - colorBox.width
+          }
+          // 确定Y位置
+
+          if (position.y + colorBox.height > h) {
+            position.y = position.y - colorBox.height
+          } else {
+            position.y = position.y + position.height
+          }
+          this.position.x = position.x
+          this.position.y = position.y
+          clearTimeout(this.timer)
+          this.timer = null
+        }, 200)
+      }
+    },
+    findColor (key) {
+      const findItem = this.valueArr.find(item => item.key == key)
+      if (findItem) {
+        return this.colorVal[findItem.name]
+      } else {
+        return '#000000'
+      };
+    }
+  },
+  destroyed () {
+    window.removeEventListener('mousewheel', this.mousewheel)
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/overView/messageAsset.vue b/nezha-fronted/src/components/common/overView/messageAsset.vue
index 56958bf96..6bc2a3782 100644
--- a/nezha-fronted/src/components/common/overView/messageAsset.vue
+++ b/nezha-fronted/src/components/common/overView/messageAsset.vue
@@ -35,283 +35,279 @@
 </template>
 
 <script>
-  import hexagonBox from '../honeycomb/hexagonFigureSvg'
-  import alertLabel from '../alert/alertLabel2'
-  function textMouseDown(e){
-    window.event? window.event.cancelBubble = true : e.stopPropagation();
-  }
-  function textMouseEnter(e){
-    window.event? window.event.cancelBubble = true : e.stopPropagation();
-  }
-  function textMouseLeave(e){
-    window.event? window.event.cancelBubble = true : e.stopPropagation();
-  }
-	export default {
-		name:"messageAsset",
-    components:{
-      hexagonBox,
-      alertLabel
+import hexagonBox from '../honeycomb/hexagonFigureSvg'
+import alertLabel from '../alert/alertLabel2'
+function textMouseDown (e) {
+  window.event ? window.event.cancelBubble = true : e.stopPropagation()
+}
+// eslint-disable-next-line no-unused-vars
+function textMouseEnter (e) {
+  window.event ? window.event.cancelBubble = true : e.stopPropagation()
+}
+// eslint-disable-next-line no-unused-vars
+function textMouseLeave (e) {
+  window.event ? window.event.cancelBubble = true : e.stopPropagation()
+}
+export default {
+  name: 'messageAsset',
+  components: {
+    hexagonBox,
+    alertLabel
+  },
+  props: {
+    data: {},
+    col: {},
+    length: {},
+    from: {},
+    hexagonSvgID: {
+      type: String
     },
-    props:{
-      data:{},
-      col:{},
-      length:{},
-      from:{},
-      hexagonSvgID:{
-        type:String,
-      },
-      showTooltip:{
-        type:Boolean,
-        default:false,
-      },
-      fromType:{
-        type:String,
-      },
+    showTooltip: {
+      type: Boolean,
+      default: false
     },
-    watch:{
-      data:{
-        immediate: false,
-        deep: true,
-        handler() {
-        }
-      },
-      col:{
-        immediate: false,
-        deep: true,
-        handler() {
-        }
-      },
-      length:{
-        immediate: false,
-        deep: true,
-        handler() {
-        }
-      },
-
-    },
-    data(){
-		  return{
-        hexagonEdge:90,
-        loading:false,
-        assetData:{
-          id:'',
-          loading:false,
-          show:false,
-          rate:1,
-          position:{
-            top:0,
-            left:0,
-            mt:0,
-          },
-        },
-        boxWidth:'',
-        LRTriangle:true,//true 左三角 false 右
-        timer:null,
+    fromType: {
+      type: String
+    }
+  },
+  watch: {
+    data: {
+      immediate: false,
+      deep: true,
+      handler () {
       }
     },
-    methods:{
-      colorSet(item){//设置方块颜色
-        // let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
-        // let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
-        let alert=item.alert[0];
-        if(alert.P1>0){
-          return{
-            color:'#FAAFAF',
-            hoverColor:'#FFCDCD',
-          };
-        } else if(alert.P2>0){
-          return{
-            color:'#FFAB99',
-            hoverColor:'#FABEB2',
-          };
-        } else if(alert.P3>0){
-          return{
-            color:'#FFCF92',
-            hoverColor:'#FFE0B8',
-          };
-        }else{
-          return{ color:'#99D7C2',hoverColor:'#B2ECD9'}
-        }
-      },
-      infoSet(group,allHexagonRect,allHexagonText,data,item,fontSize,that){
-        // 设置内部文本
-        // group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
-        let rgbColor='0,0,0';
-        let str='';
-        let textPaddingWidth='';
-        let textPaddingHeight='';
-        let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
-          .attr({
-            x: data.center[0]-that.hexagonEdge/2-10,
-            y: data.center[1]-that.hexagonEdge,
-            rx:5,
-            ry:5,
-          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
-        str=this.from==='asset'?item.host:item.module;
-        str+='';
-        if(str.length>=15){
-          str=str.slice(0,12)+"..."
-        }
-        let text0=group.text(str).attr({x:0,y:0,style:'cursor:text'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'text'});
-        textPaddingWidth=(that.hexagonEdge+20)-(text0.bbox().width);
-        textPaddingHeight=(that.hexagonEdge/3)-(text0.bbox().height);
-        text0.attr({
-          x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
-          y: data.center[1]-that.hexagonEdge + textPaddingHeight/2-4,
-        }).hide();
-        allHexagonRect.push(rect0);
-        allHexagonText.push(text0);
-        text0.on('mousedown',textMouseDown);
-
-
-        let rect1=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
-          .attr({
-            x: data.center[0]-that.hexagonEdge/2-10,
-            y: data.center[1]-that.hexagonEdge/2-7.5,
-            rx:6,
-            ry:6,
-          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
-        str="P1 : "+item.alert[0].P1;
-        if(str.length>=15){
-          str=str.slice(0,12)+"..."
-        }
-        let text1=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
-        textPaddingWidth=(that.hexagonEdge+20)-(text1.bbox().width);
-        textPaddingHeight=(that.hexagonEdge/3)-(text1.bbox().height);
-        text1.attr({
-          x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
-          y: data.center[1]-that.hexagonEdge/2-7.5 +textPaddingHeight/2-4,
-        }).hide();
-
-
-
-        allHexagonRect.push(rect1);
-        allHexagonText.push(text1);
-
-
-        let rect2=group.rect(that.hexagonEdge+20, that.hexagonEdge/3).attr({
-          x: data.center[0]-that.hexagonEdge/2-10,
-          y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +0.5,
-          rx:6,
-          ry:6,
-        }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
-        str="P2 : "+item.alert[0].P2;
-        if(str.length>=15){
-          str=str.slice(0,12)+"..."
-        }
-        let text2=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
-        textPaddingWidth=(that.hexagonEdge+20)-(text2.bbox().width);
-        textPaddingHeight=(that.hexagonEdge/3)-(text2.bbox().height);
-        text2.attr({
-          x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
-          y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 + 0.5+textPaddingHeight/2-4,
-        }).hide();
-        allHexagonRect.push(rect2);
-        allHexagonText.push(text2);
-
-
-        let rect3=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
-          .attr({
-            x: data.center[0]-that.hexagonEdge/2-10,
-            y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 5.5,
-            rx:6,
-            ry:6,
-          }).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
-        str="P3 : "+item.alert[0].P3;
-        if(str.length>=15){
-          str=str.slice(0,12)+"..."
-        }
-        let text3=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
-        textPaddingWidth=(that.hexagonEdge+20)-(text3.bbox().width);
-        textPaddingHeight=(that.hexagonEdge/3)-(text3.bbox().height);
-        text3.attr({
-          x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
-          y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 +5.5+textPaddingHeight/2-4,
-        }).hide();
-
-        allHexagonRect.push(rect3);
-        allHexagonText.push(text3);
-
-      },
-      infoShow(allHexagonRect,allHexagonText){
-        allHexagonRect.forEach(item=>{
-          let rgbColor = item.data('color')
-          item.fill({ color: `rgba(${rgbColor},0.2)`})
-        })
-        allHexagonText.forEach(item=>{
-          item.fill({ opacity:1}).show()
-        });
-      },
-      infoHide(allHexagonRect,allHexagonText){
-        allHexagonRect.forEach(item=>{
-          let rgbColor = item.data('color')
-          item.fill({ color: `rgba(${rgbColor},0)`})
-        });
-        allHexagonText.forEach(item=>{
-          item.fill({ opacity:0}).hide();
-        });
-      },
-      changeAsset(data,e){
-        if(this.timer){
-          clearTimeout(this.timer);
-        }
-        this.assetData.id=data;
-        let boxWidth=document.getElementsByClassName('content-right')[0].offsetWidth;
-        this.boxWidth=boxWidth;
-        // this.assetData.rate=window.screen.height/1297;
-        this.$nextTick(()=>{
-          this.assetData.show=true;
-          this.$nextTick(()=>{
-            this.calcPosition(e)
-          })
-        })
-      },
-      assetMove(e){
-        if(!this.assetData.show){return}
-        this.calcPosition(e)
-      },
-      calcPosition(e){
-        let boxWidth=this.boxWidth;
-        let distance=this.fromType==='asset'?300:50;
-        let minus=(e.pageY-distance)+this.$refs.alertLabel.$el.offsetHeight-window.innerHeight;
-        // window.innerHeight
-        if(minus<=0){
-          this.assetData.position.top=e.pageY-distance;
-          this.assetData.position.mt=distance;
-        } else if(minus>0){
-          this.assetData.position.top=window.innerHeight-this.$refs.alertLabel.$el.offsetHeight;
-          this.assetData.position.mt=e.pageY-(window.innerHeight-this.$refs.alertLabel.$el.offsetHeight);
-        }
-        if(boxWidth/2>e.pageX-200){
-          this.assetData.position.left=e.pageX + 35;
-          this.LRTriangle=true;
-        }else{
-          this.assetData.position.left=e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth;
-          this.LRTriangle=false
-        }
-      },
-      closeAsset(){
-        if(!this.timer){
-          this.timer=setTimeout(()=>{
-            this.assetData.show=false;
-            this.timer=null;
-          },100)
-        }else{
-          clearTimeout(this.timer);
-          this.timer=setTimeout(()=>{
-            this.assetData.show=false;
-            this.timer=null;
-          },100)
-        }
-      },
-      endLoading(){
-        this.loading=false;
-      },
-      startLoading(){
-        this.loading=true;
+    col: {
+      immediate: false,
+      deep: true,
+      handler () {
+      }
+    },
+    length: {
+      immediate: false,
+      deep: true,
+      handler () {
       }
     }
-	}
+
+  },
+  data () {
+    return {
+      hexagonEdge: 90,
+      loading: false,
+      assetData: {
+        id: '',
+        loading: false,
+        show: false,
+        rate: 1,
+        position: {
+          top: 0,
+          left: 0,
+          mt: 0
+        }
+      },
+      boxWidth: '',
+      LRTriangle: true, // true 左三角 false 右
+      timer: null
+    }
+  },
+  methods: {
+    colorSet (item) { // 设置方块颜色
+      // let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
+      // let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
+      const alert = item.alert[0]
+      if (alert.P1 > 0) {
+        return {
+          color: '#FAAFAF',
+          hoverColor: '#FFCDCD'
+        }
+      } else if (alert.P2 > 0) {
+        return {
+          color: '#FFAB99',
+          hoverColor: '#FABEB2'
+        }
+      } else if (alert.P3 > 0) {
+        return {
+          color: '#FFCF92',
+          hoverColor: '#FFE0B8'
+        }
+      } else {
+        return { color: '#99D7C2', hoverColor: '#B2ECD9' }
+      }
+    },
+    infoSet (group, allHexagonRect, allHexagonText, data, item, fontSize, that) {
+      // 设置内部文本
+      // group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
+      const rgbColor = '0,0,0'
+      let str = ''
+      let textPaddingWidth = ''
+      let textPaddingHeight = ''
+      const rect0 = group.rect(that.hexagonEdge + 20, that.hexagonEdge / 3)
+        .attr({
+          x: data.center[0] - that.hexagonEdge / 2 - 10,
+          y: data.center[1] - that.hexagonEdge,
+          rx: 5,
+          ry: 5
+        }).fill({ color: `rgba(${rgbColor},0)` }).data({ color: rgbColor })
+      str = this.from === 'asset' ? item.host : item.module
+      str += ''
+      if (str.length >= 15) {
+        str = str.slice(0, 12) + '...'
+      }
+      const text0 = group.text(str).attr({ x: 0, y: 0, style: 'cursor:text' }).font({ size: fontSize }).fill({ opacity: 0, color: '#fff', weight: 600, cursor: 'text' })
+      textPaddingWidth = (that.hexagonEdge + 20) - (text0.bbox().width)
+      textPaddingHeight = (that.hexagonEdge / 3) - (text0.bbox().height)
+      text0.attr({
+        x: data.center[0] - that.hexagonEdge / 2 - 10 + textPaddingWidth / 2,
+        y: data.center[1] - that.hexagonEdge + textPaddingHeight / 2 - 4
+      }).hide()
+      allHexagonRect.push(rect0)
+      allHexagonText.push(text0)
+      text0.on('mousedown', textMouseDown)
+
+      const rect1 = group.rect(that.hexagonEdge + 20, that.hexagonEdge / 3)
+        .attr({
+          x: data.center[0] - that.hexagonEdge / 2 - 10,
+          y: data.center[1] - that.hexagonEdge / 2 - 7.5,
+          rx: 6,
+          ry: 6
+        }).fill({ color: `rgba(${rgbColor},0)` }).data({ color: rgbColor })
+      str = 'P1 : ' + item.alert[0].P1
+      if (str.length >= 15) {
+        str = str.slice(0, 12) + '...'
+      }
+      const text1 = group.text(str).attr({ x: 0, y: 0, style: 'cursor:default' }).font({ size: fontSize }).fill({ opacity: 0, color: '#fff', weight: 600, cursor: 'default' })
+      textPaddingWidth = (that.hexagonEdge + 20) - (text1.bbox().width)
+      textPaddingHeight = (that.hexagonEdge / 3) - (text1.bbox().height)
+      text1.attr({
+        x: data.center[0] - that.hexagonEdge / 2 - 10 + textPaddingWidth / 2,
+        y: data.center[1] - that.hexagonEdge / 2 - 7.5 + textPaddingHeight / 2 - 4
+      }).hide()
+
+      allHexagonRect.push(rect1)
+      allHexagonText.push(text1)
+
+      const rect2 = group.rect(that.hexagonEdge + 20, that.hexagonEdge / 3).attr({
+        x: data.center[0] - that.hexagonEdge / 2 - 10,
+        y: data.center[1] - that.hexagonEdge / 2 + that.hexagonEdge / 3 + 0.5,
+        rx: 6,
+        ry: 6
+      }).fill({ color: `rgba(${rgbColor},0)` }).data({ color: rgbColor })
+      str = 'P2 : ' + item.alert[0].P2
+      if (str.length >= 15) {
+        str = str.slice(0, 12) + '...'
+      }
+      const text2 = group.text(str).attr({ x: 0, y: 0, style: 'cursor:default' }).font({ size: fontSize }).fill({ opacity: 0, color: '#fff', weight: 600, cursor: 'default' })
+      textPaddingWidth = (that.hexagonEdge + 20) - (text2.bbox().width)
+      textPaddingHeight = (that.hexagonEdge / 3) - (text2.bbox().height)
+      text2.attr({
+        x: data.center[0] - that.hexagonEdge / 2 - 10 + textPaddingWidth / 2,
+        y: data.center[1] - that.hexagonEdge / 2 + that.hexagonEdge / 3 + 0.5 + textPaddingHeight / 2 - 4
+      }).hide()
+      allHexagonRect.push(rect2)
+      allHexagonText.push(text2)
+
+      const rect3 = group.rect(that.hexagonEdge + 20, that.hexagonEdge / 3)
+        .attr({
+          x: data.center[0] - that.hexagonEdge / 2 - 10,
+          y: data.center[1] - that.hexagonEdge / 2 + that.hexagonEdge / 3 * 2 + 5.5,
+          rx: 6,
+          ry: 6
+        }).fill({ color: `rgba(${rgbColor},0)` }).data({ color: rgbColor })
+      str = 'P3 : ' + item.alert[0].P3
+      if (str.length >= 15) {
+        str = str.slice(0, 12) + '...'
+      }
+      const text3 = group.text(str).attr({ x: 0, y: 0, style: 'cursor:default' }).font({ size: fontSize }).fill({ opacity: 0, color: '#fff', weight: 600, cursor: 'default' })
+      textPaddingWidth = (that.hexagonEdge + 20) - (text3.bbox().width)
+      textPaddingHeight = (that.hexagonEdge / 3) - (text3.bbox().height)
+      text3.attr({
+        x: data.center[0] - that.hexagonEdge / 2 - 10 + textPaddingWidth / 2,
+        y: data.center[1] - that.hexagonEdge / 2 + that.hexagonEdge / 3 * 2 + 5.5 + textPaddingHeight / 2 - 4
+      }).hide()
+
+      allHexagonRect.push(rect3)
+      allHexagonText.push(text3)
+    },
+    infoShow (allHexagonRect, allHexagonText) {
+      allHexagonRect.forEach(item => {
+        const rgbColor = item.data('color')
+        item.fill({ color: `rgba(${rgbColor},0.2)` })
+      })
+      allHexagonText.forEach(item => {
+        item.fill({ opacity: 1 }).show()
+      })
+    },
+    infoHide (allHexagonRect, allHexagonText) {
+      allHexagonRect.forEach(item => {
+        const rgbColor = item.data('color')
+        item.fill({ color: `rgba(${rgbColor},0)` })
+      })
+      allHexagonText.forEach(item => {
+        item.fill({ opacity: 0 }).hide()
+      })
+    },
+    changeAsset (data, e) {
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.assetData.id = data
+      const boxWidth = document.getElementsByClassName('content-right')[0].offsetWidth
+      this.boxWidth = boxWidth
+      // this.assetData.rate=window.screen.height/1297;
+      this.$nextTick(() => {
+        this.assetData.show = true
+        this.$nextTick(() => {
+          this.calcPosition(e)
+        })
+      })
+    },
+    assetMove (e) {
+      if (!this.assetData.show) { return }
+      this.calcPosition(e)
+    },
+    calcPosition (e) {
+      const boxWidth = this.boxWidth
+      const distance = this.fromType === 'asset' ? 300 : 50
+      const minus = (e.pageY - distance) + this.$refs.alertLabel.$el.offsetHeight - window.innerHeight
+      // window.innerHeight
+      if (minus <= 0) {
+        this.assetData.position.top = e.pageY - distance
+        this.assetData.position.mt = distance
+      } else if (minus > 0) {
+        this.assetData.position.top = window.innerHeight - this.$refs.alertLabel.$el.offsetHeight
+        this.assetData.position.mt = e.pageY - (window.innerHeight - this.$refs.alertLabel.$el.offsetHeight)
+      }
+      if (boxWidth / 2 > e.pageX - 200) {
+        this.assetData.position.left = e.pageX + 35
+        this.LRTriangle = true
+      } else {
+        this.assetData.position.left = e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth
+        this.LRTriangle = false
+      }
+    },
+    closeAsset () {
+      if (!this.timer) {
+        this.timer = setTimeout(() => {
+          this.assetData.show = false
+          this.timer = null
+        }, 100)
+      } else {
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.assetData.show = false
+          this.timer = null
+        }, 100)
+      }
+    },
+    endLoading () {
+      this.loading = false
+    },
+    startLoading () {
+      this.loading = true
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/pagination.vue b/nezha-fronted/src/components/common/pagination.vue
index ffa4febba..00dda4c06 100644
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -13,7 +13,7 @@
         :total="this.pageObj.total"
       >
         <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
-          <el-option v-for="(item,index) in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
         </el-select>
 
       </el-pagination>
@@ -22,138 +22,139 @@
 
 <script>
 export default {
-  name: "pagination",
+  name: 'pagination',
   // props: ['pageObj', 'tableId', 'postPageSizes'],
   props: {
-    pageObj:{},
-    tableId:{},
-    postPageSizes:{},
-    appendToBody:{default:true},
-    popClass:{}
+    pageObj: {},
+    tableId: {},
+    postPageSizes: {},
+    appendToBody: { default: true },
+    popClass: {}
   },
-  data() {
+  data () {
     return {
       pageSize: this.$CONSTANTS.defaultPageSize,
-      pageSizes:[
+      pageSizes: [
         {
-          label:'20'+this.$t('pageSize'),
-          value:20
+          label: '20' + this.$t('pageSize'),
+          value: 20
         },
         {
-          label:'50'+this.$t('pageSize'),
-          value:50
+          label: '50' + this.$t('pageSize'),
+          value: 50
         },
         {
-          label:'100'+this.$t('pageSize'),
-          value:100
-        },
+          label: '100' + this.$t('pageSize'),
+          value: 100
+        }
       ]
-    };
+    }
   },
   methods: {
-    popperVisible:function(visible){
-      if(visible==true){
-        this.$nextTick(()=>{
-          if(this.popClass&&this.popClass==='out-popper-fix'){
-            let popDoms=document.querySelectorAll('.out-popper-fix');
-            popDoms.forEach(item=>{
-              item.style.bottom=item.style.top;
-              item.style.top='unset';
+    popperVisible: function (visible) {
+      if (visible == true) {
+        this.$nextTick(() => {
+          if (this.popClass && this.popClass === 'out-popper-fix') {
+            const popDoms = document.querySelectorAll('.out-popper-fix')
+            popDoms.forEach(item => {
+              item.style.bottom = item.style.top
+              item.style.top = 'unset'
 
-              let icon=item.querySelector('.popper__arrow');
-              if(icon){
-                icon.style.bottom=icon.style.top;
-                icon.style.top='unset';
-                icon.style.transform='rotate(180deg)'
+              const icon = item.querySelector('.popper__arrow')
+              if (icon) {
+                icon.style.bottom = icon.style.top
+                icon.style.top = 'unset'
+                icon.style.transform = 'rotate(180deg)'
               }
             })
           }
         })
       }
     },
-    background() {
-      this.backgroundColor();
+    background () {
+      this.backgroundColor()
     },
-    //点击上一页箭头
-    prev() {
-      this.backgroundColor();
-      this.scrollbarToTop();
+    // 点击上一页箭头
+    prev () {
+      this.backgroundColor()
+      this.scrollbarToTop()
     },
-    //点击下一页箭头
-    next(val) {
-      this.backgroundColor();
-      this.scrollbarToTop();
+    // 点击下一页箭头
+    next (val) {
+      this.backgroundColor()
+      this.scrollbarToTop()
     },
-    //currentPage 改变时会触发
-    current(val) {
-      this.$emit("pageNo", val);
-      this.backgroundColor();
-      this.scrollbarToTop();
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('pageNo', val)
+      this.backgroundColor()
+      this.scrollbarToTop()
     },
-    size(val) {
-      this.pageObj.pageNo=1;
-      this.$emit("pageSize", val);
-      this.backgroundColor();
+    size (val) {
+      // eslint-disable-next-line vue/no-mutating-props
+      this.pageObj.pageNo = 1
+      this.$emit('pageSize', val)
+      this.backgroundColor()
     },
-    scrollbarToTop() {
+    scrollbarToTop () {
       this.$nextTick(() => {
-        let wraps = document.querySelectorAll(".el-table__body-wrapper");
+        const wraps = document.querySelectorAll('.el-table__body-wrapper')
         wraps.forEach(wrap => {
           if (wrap._ps_) {
-            wrap.scrollTop = 0;
+            wrap.scrollTop = 0
           }
-        });
-      });
+        })
+      })
     },
-    resetPageSizes:function(){
-      if(this.postPageSizes){
-        this.pageSizes=this.postPageSizes.map((item)=>{
-          return {label:item+this.$t('pageSize'),value:item}
+    resetPageSizes: function () {
+      if (this.postPageSizes) {
+        this.pageSizes = this.postPageSizes.map((item) => {
+          return { label: item + this.$t('pageSize'), value: item }
         })
       }
     },
-    //设置当前页的样式
-    backgroundColor() {
-      this.list = this.$refs.page.$el.children[2].children;
+    // 设置当前页的样式
+    backgroundColor () {
+      this.list = this.$refs.page.$el.children[2].children
       for (let i = 0; i < this.list.length; i++) {
-        const element = this.list[i];
-      }
-    },
-  },
-  mounted() {
-    if(this.postPageSizes&&this.postPageSizes.length>0){
-       this.pageSize=this.postPageSizes[0];
-       this.resetPageSizes();
-    }else{
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if(pageSize != 'undefined' && pageSize != null){
-        this.pageSize=parseInt(pageSize);
+        // const element = this.list[i]
       }
     }
   },
-  watch:{
-    postPageSizes:{
-      immediate:true,
-      deep:true,
-      handler(n,o){
-        this.resetPageSizes();
+  mounted () {
+    if (this.postPageSizes && this.postPageSizes.length > 0) {
+      this.pageSize = this.postPageSizes[0]
+      this.resetPageSizes()
+    } else {
+      const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageSize = parseInt(pageSize)
+      }
+    }
+  },
+  watch: {
+    postPageSizes: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.resetPageSizes()
       }
     },
-    popClass:{
-      immediate:true,
-      handler(n,o){
-        //console.log(n)
+    popClass: {
+      immediate: true,
+      handler (n, o) {
+        // console.log(n)
       }
     },
-    pageObj:{
-      immediate:true,
-      deep:true,
-      handler(n,o){
+    pageObj: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
         // console.log(n,n)
       }
     }
   }
-};
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index f98369b1c..653b8f774 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -22,116 +22,116 @@
 </template>
 
 <script>
-  import bus from "../../libs/bus";
-  import timePicker from "./timePicker";
-  import chartUnit from "./chartUnit";
-  export default {
-    name: "intervalRefresh",
-    components:{
-      'time-picker':timePicker,
-      'chart-unit':chartUnit,
+import bus from '../../libs/bus'
+import timePicker from './timePicker'
+import chartUnit from './chartUnit'
+export default {
+  name: 'intervalRefresh',
+  components: {
+    'time-picker': timePicker,
+    'chart-unit': chartUnit
+  },
+  model: {
+    event: 'change',
+    prop: 'timeRange'
+  },
+  props: {
+    refreshDataFunc: {
+      required: true,
+      type: Function
     },
-    model:{
-      event:'change',
-      prop:'timeRange'
+    timeRange: {
+      type: Array,
+      required: true
     },
-    props:{
-      refreshDataFunc:{
-        required:true,
-        type:Function
-      },
-      timeRange:{
-        type:Array,
-        required: true,
-      },
-      useRefresh:{
-        type:Boolean,
-        default:true,
-      },
-      useChartUnit:{
-        type:Boolean,
-        default:true,
-      },
-      showTimePicker:{
-        type:Boolean,
-        default:true,
-      },
-      defaultPick:Number,
-      showEmpty:{type:Boolean,default:false},
-      id:String
+    useRefresh: {
+      type: Boolean,
+      default: true
     },
-    data(){
-      return{
-        searchTime:[],
-        visible: false,
-        intervalTimer: null,
-        interval: -1,
-        unit:2,
+    useChartUnit: {
+      type: Boolean,
+      default: true
+    },
+    showTimePicker: {
+      type: Boolean,
+      default: true
+    },
+    defaultPick: Number,
+    showEmpty: { type: Boolean, default: false },
+    id: String
+  },
+  data () {
+    return {
+      searchTime: [],
+      visible: false,
+      intervalTimer: null,
+      interval: -1,
+      unit: 2
+    }
+  },
+  created () {
+    this.searchTime = this.timeFormate(this.timeRange)
+    this.$emit('change', this.searchTime)
+  },
+  methods: {
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      this.interval = val
+      if (!this.showTimePicker && val && val.value != -1) {
+        this.intervalTimer = setInterval(() => {
+          this.$emit('change', this.searchTime)
+          this.refreshDataFunc()
+        }, val.value * 1000)
+        return
+      }
+      if (val && val.value != -1) {
+        const start = new Date(this.searchTime[1])
+        const now = bus.getOffsetTimezoneData()
+        const interval = Math.floor((now - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过30s，则
+          this.getIntervalData(interval)
+        }
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval.value)
+        }, val.value * 1000)
       }
     },
-    created(){
-      this.searchTime=this.timeFormate(this.timeRange)
-      this.$emit('change',this.searchTime)
-    },
-    methods:{
-      selectInterval(val) {
-        this.visible = false;
-        clearInterval(this.intervalTimer);
-        this.interval = val;
-        if(!this.showTimePicker&&val && val.value != -1){
-          this.intervalTimer = setInterval(() => {
-            this.$emit('change',this.searchTime)
-            this.refreshDataFunc();
-          }, val.value * 1000);
-          return
-        }
-        if (val && val.value != -1) {
-          const start = new Date(this.searchTime[1]);
-          const now = bus.getOffsetTimezoneData();
-          const interval = Math.floor((now - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-          if (interval >= 60) { //如果结束时间到现在超过30s，则
-            this.getIntervalData(interval);
-          }
-          this.intervalTimer = setInterval(() => {
-            this.getIntervalData(this.interval.value);
-          }, val.value * 1000);
-        }
-      },
-      getIntervalData(interval) { //interval:结束时间到现在的秒数
-        const start = new Date(this.searchTime[0]);
-        const end = new Date(this.searchTime[1]);
-        start.setSeconds(start.getSeconds() + interval);
-        end.setSeconds(end.getSeconds() + interval);
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
 
-        this.searchTime = this.timeFormate([start,end])
-        this.$refs.timePicker.setCostomTime(this.searchTime);
-        this.$emit('change',this.searchTime)
-        //刷新数据
-        this.refreshDataFunc();
-      },
-      timeFormate(timeRange){
-        if(timeRange&&timeRange.length<2){
-          return []
-        }
-        const startTime = bus.timeFormate(timeRange[0], 'yyyy-MM-dd hh:mm:ss');
-        const endTime = bus.timeFormate(timeRange[1], 'yyyy-MM-dd hh:mm:ss');
-        return [startTime, endTime];
-      },
-      dateChange(time) {
-        this.searchTime=time;
-        this.$emit('change',this.searchTime)
-        this.refreshDataFunc();
-      },
+      this.searchTime = this.timeFormate([start, end])
+      this.$refs.timePicker.setCostomTime(this.searchTime)
+      this.$emit('change', this.searchTime)
+      // 刷新数据
+      this.refreshDataFunc()
     },
-    watch:{
-      unit:{
-        immediate:true,
-        handler(n,o){
-          this.$emit('unitChange',n);
-        }
+    timeFormate (timeRange) {
+      if (timeRange && timeRange.length < 2) {
+        return []
+      }
+      const startTime = bus.timeFormate(timeRange[0], 'yyyy-MM-dd hh:mm:ss')
+      const endTime = bus.timeFormate(timeRange[1], 'yyyy-MM-dd hh:mm:ss')
+      return [startTime, endTime]
+    },
+    dateChange (time) {
+      this.searchTime = time
+      this.$emit('change', this.searchTime)
+      this.refreshDataFunc()
+    }
+  },
+  watch: {
+    unit: {
+      immediate: true,
+      handler (n, o) {
+        this.$emit('unitChange', n)
       }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/common/popBox/cabinetConfig.vue b/nezha-fronted/src/components/common/popBox/cabinetConfig.vue
index a33405915..487493fd2 100644
--- a/nezha-fronted/src/components/common/popBox/cabinetConfig.vue
+++ b/nezha-fronted/src/components/common/popBox/cabinetConfig.vue
@@ -50,170 +50,168 @@
 
 <script>
 export default {
-  name: "cabinetConfig",
-  props:{
-    postCabinet:{type:Object},
-    placement:{type:String},
-    buttonClass:{type:String},
-    isEdit:{type:Boolean,default:true},
-    postIdcDatas:{type:Array}
+  name: 'cabinetConfig',
+  props: {
+    postCabinet: { type: Object },
+    placement: { type: String },
+    buttonClass: { type: String },
+    isEdit: { type: Boolean, default: true },
+    postIdcDatas: { type: Array }
   },
-  created() {
-    this.init();
+  created () {
+    this.init()
   },
-  data(){
+  data () {
     return {
-      title:"",
-      rules:{
+      title: '',
+      rules: {
         name: [
-          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         uSize: [
-          {required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
+          { required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         idcId: [
-          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       },
-      cabinet:{},
-      popBox:{isEdit:false,show:false},
-      idcDatas:[],
-      idc:null
+      cabinet: {},
+      popBox: { isEdit: false, show: false },
+      idcDatas: [],
+      idc: null
     }
   },
-  methods:{
-    init:function(){
-      this.getIdcDatas();
+  methods: {
+    init () {
+      this.getIdcDatas()
     },
-    resetData:function(){
-      let temp=this;
-      temp.cabinet={
-        name:'',
-        uSize:0,
-        idcId:null,
-        remark:''
+    resetData () {
+      const temp = this
+      temp.cabinet = {
+        name: '',
+        uSize: 0,
+        idcId: null,
+        remark: ''
       }
     },
-    saveOrToEdit(){
+    saveOrToEdit () {
       if (!this.popBox.isEdit) {
-        this.toEdit(this.cabinet);
+        this.toEdit(this.cabinet)
       } else {
-        this.save();
+        this.save()
       }
     },
-    save:function(){
-      let temp=this;
-      temp.$refs.cabinetForm.validate((valid => {
-        if(valid){
+    save () {
+      const temp = this
+      temp.$refs.cabinetForm.validate(valid => {
+        if (valid) {
           if (temp.cabinet.id) {
             this.$put('cabinet', temp.cabinet).then(res => {
-              const h = temp.$createElement;
               if (res.code === 200) {
-                temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
-                temp.$emit("after",temp.cabinet.idcId);
-                temp.esc();
+                temp.$message({ duration: 2000, type: 'success', message: temp.$t('tip.saveSuccess') })
+                temp.$emit('after', temp.cabinet.idcId)
+                temp.esc()
               } else {
-                temp.$message.error(res.msg);
+                temp.$message.error(res.msg)
               }
             })
           } else {
             temp.$post('cabinet', temp.cabinet).then(res => {
-              const h = temp.$createElement;
               if (res.code === 200) {
-                temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
-                temp.$emit("after",temp.cabinet.idcId);
-                temp.esc();
+                temp.$message({ duration: 2000, type: 'success', message: temp.$t('tip.saveSuccess') })
+                temp.$emit('after', temp.cabinet.idcId)
+                temp.esc()
               } else {
-                temp.$message.error(res.msg);
+                temp.$message.error(res.msg)
               }
             })
           }
-        }else{
-          return false;
+        } else {
+          return false
         }
-      }))
+      })
     },
-    show:function(isShow,isEdit){
-      this.popBox.show=isShow;
-      this.popBox.isEdit=isEdit;
+    show (isShow, isEdit) {
+      this.popBox.show = isShow
+      this.popBox.isEdit = isEdit
     },
-    afterShow:function(){
-      if(!this.popBox.isEdit){
-        this.popBox.isEdit=this.isEdit;
+    afterShow () {
+      if (!this.popBox.isEdit) {
+        this.popBox.isEdit = this.isEdit
       }
     },
-    toEdit:function(u){
-      this.cabinet = Object.assign({}, u);
-      this.popBox.isEdit = true;
-      this.title = this.$t('asset.editCabinetTab.title') + "  ID：" + this.cabinet.id;
-      this.popBox.show = true;
+    toEdit (u) {
+      this.cabinet = Object.assign({}, u)
+      this.popBox.isEdit = true
+      this.title = this.$t('asset.editCabinetTab.title') + '  ID：' + this.cabinet.id
+      this.popBox.show = true
     },
-    getIdcDatas:function(){
-      let temp=this;
-      if(temp.postIdcDatas&&temp.postIdcDatas.length>0){
-        temp.idcDatas=temp.postIdcDatas;
-        for (let i in temp.idcDatas){
-          let item=temp.idcDatas[i];
-          if(item.id==temp.cabinet.idcId){
-            temp.idc=item;
-            break;
+    getIdcDatas () {
+      const temp = this
+      if (temp.postIdcDatas && temp.postIdcDatas.length > 0) {
+        temp.idcDatas = temp.postIdcDatas
+        for (const i in temp.idcDatas) {
+          const item = temp.idcDatas[i]
+          if (item.id == temp.cabinet.idcId) {
+            temp.idc = item
+            break
           }
         }
-        return;
+        return
       }
       temp.$get('idc').then(response => {
         if (response.code === 200) {
-          temp.idcDatas = response.data.list;
-          for (let i in temp.idcDatas){
-            let item=temp.idcDatas[i];
-            if(item.id==temp.cabinet.idcId){
-             temp.idc=item;
-              break;
+          temp.idcDatas = response.data.list
+          for (const i in temp.idcDatas) {
+            const item = temp.idcDatas[i]
+            if (item.id == temp.cabinet.idcId) {
+              temp.idc = item
+              break
             }
           }
         }
       })
     },
-    openBox:function(){
-      this.popBox.show=true;
+    openBox () {
+      this.popBox.show = true
     },
-    esc:function(){
-      this.popBox.show=false;
+    esc () {
+      this.popBox.show = false
     },
-    hidePop:function(){//隐藏事件触发方法
-      if(this.postCabinet&&this.postCabinet.id){
-        this.cabinet=this.postCabinet;
-      }else{
-        this.resetData();
+    hidePop () { // 隐藏事件触发方法
+      if (this.postCabinet && this.postCabinet.id) {
+        this.cabinet = this.postCabinet
+      } else {
+        this.resetData()
       }
-      this.clearValidate();
+      this.clearValidate()
     },
-    clearValidate:function(){
-      this.$refs.cabinetForm.clearValidate();
+    clearValidate () {
+      this.$refs.cabinetForm.clearValidate()
     }
   },
-  watch:{
+  watch: {
     postCabinet: {
       immediate: true,
       deep: true,
-      handler(n, o) {
+      handler (n, o) {
         if (n && n.id) {
-          this.title =this.popBox.isEdit? this.$t('asset.editCabinetTab.title') + "  ID：" + n.id : this.$t('asset.cabinet') + "  ID：" + n.id;
-          this.cabinet=n;
+          this.title = this.popBox.isEdit ? this.$t('asset.editCabinetTab.title') + '  ID：' + n.id : this.$t('asset.cabinet') + '  ID：' + n.id
+          this.cabinet = n
         } else {
-          this.title = this.$t('asset.title');
-          this.resetData();
+          this.title = this.$t('asset.title')
+          this.resetData()
         }
       }
     },
-    isEdit:{
+    isEdit: {
       immediate: true,
-      handler(n, o) {
-        this.popBox.isEdit=n;
+      handler (n, o) {
+        this.popBox.isEdit = n
       }
     }
   },
-  beforeDestroy(){
+  beforeDestroy () {
 
   }
 }
diff --git a/nezha-fronted/src/components/common/popBox/selectArea.vue b/nezha-fronted/src/components/common/popBox/selectArea.vue
index e284cf2e3..4e3e798ef 100644
--- a/nezha-fronted/src/components/common/popBox/selectArea.vue
+++ b/nezha-fronted/src/components/common/popBox/selectArea.vue
@@ -27,53 +27,53 @@
 </template>
 
 <script>
-    export default {
-      name: "selectArea",
-      props:{
-        placement: {type: String},
-        isEdit: {type: Boolean, default: true},
-        areaData: {type: Array},
-        currentArea: {type: Number}
-      },
-      mounted() {
-        this.$refs.areaTree.setCurrentKey(this.currentArea);
-      },
-      data(){
-        return {
-          popBox: {show: false},
-          area: {id: '', name: ''}
-        }
-      },
-      methods:{
-        openBox(area){
-          if (area) {
-            this.area = area;
-            this.$refs.areaTree.setChecked(this.area.id, true, false);
-          }
-        },
-        esc(){
-          this.popBox.show = false;
-        },
-        //确认选择某个节点，与父组件交互
-        selectArea(data, checked, child) {
-          this.area = data;
-          this.$emit('selectArea', this.area);
-          this.esc();
-        },
-        //tree设为单选
-        clearOthers(data, checked, child) {
-          if (checked) {
-            this.area = data;
-            this.$refs.areaTree.setCheckedKeys([data.id]);
-          } else {
-            this.area = {id: '', name: ''};
-          }
-        }
-      },
-      beforeDestroy(){
-
+export default {
+  name: 'selectArea',
+  props: {
+    placement: { type: String },
+    isEdit: { type: Boolean, default: true },
+    areaData: { type: Array },
+    currentArea: { type: Number }
+  },
+  mounted () {
+    this.$refs.areaTree.setCurrentKey(this.currentArea)
+  },
+  data () {
+    return {
+      popBox: { show: false },
+      area: { id: '', name: '' }
+    }
+  },
+  methods: {
+    openBox (area) {
+      if (area) {
+        this.area = area
+        this.$refs.areaTree.setChecked(this.area.id, true, false)
+      }
+    },
+    esc () {
+      this.popBox.show = false
+    },
+    // 确认选择某个节点，与父组件交互
+    selectArea (data, checked, child) {
+      this.area = data
+      this.$emit('selectArea', this.area)
+      this.esc()
+    },
+    // tree设为单选
+    clearOthers (data, checked, child) {
+      if (checked) {
+        this.area = data
+        this.$refs.areaTree.setCheckedKeys([data.id])
+      } else {
+        this.area = { id: '', name: '' }
       }
     }
+  },
+  beforeDestroy () {
+
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/popBox/selectAssetType.vue b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
index 712e1215f..63a26b195 100644
--- a/nezha-fronted/src/components/common/popBox/selectAssetType.vue
+++ b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
@@ -32,51 +32,51 @@
 </template>
 
 <script>
-    export default {
-      name: "selectAssetType",
-      props:{
-        placement: {type: String},
-        assetTypeData: {type: Array},
-        showParent: {type: Object},
-      },
-      mounted() {
-        this.$refs.assetTypeTree.setCurrentKey(this.assetType);
-      },
-      watch: {
-        showParent: {
-          immediate: true,
-          handler(n) {
-            if (n) {
-              this.assetType = JSON.parse(JSON.stringify(n));
-            }
-          }
-        },
-      },
-      data(){
-        return {
-          popBox: {show: false},
-          assetType: {id: 0, name: ""},
+export default {
+  name: 'selectAssetType',
+  props: {
+    placement: { type: String },
+    assetTypeData: { type: Array },
+    showParent: { type: Object }
+  },
+  mounted () {
+    this.$refs.assetTypeTree.setCurrentKey(this.assetType)
+  },
+  watch: {
+    showParent: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.assetType = JSON.parse(JSON.stringify(n))
         }
-      },
-      methods:{
-        filterNode(value, data) {
-          if (!value) return true;
-          return data.name.indexOf(value) !== -1;
-        },
-        esc(){
-          this.popBox.show = false;
-        },
-        //确认选择某个节点，与父组件交互
-        selectAssetType(data, checked, child) {
-          if (data.disabled) {
-            return;
-          }
-          this.$emit('selectAssetType', data);
-          this.$refs.assetTypeTree.setCurrentKey(data);
-          this.esc();
-        },
-      },
+      }
     }
+  },
+  data () {
+    return {
+      popBox: { show: false },
+      assetType: { id: 0, name: '' }
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    esc () {
+      this.popBox.show = false
+    },
+    // 确认选择某个节点，与父组件交互
+    selectAssetType (data, checked, child) {
+      if (data.disabled) {
+        return
+      }
+      this.$emit('selectAssetType', data)
+      this.$refs.assetTypeTree.setCurrentKey(data)
+      this.esc()
+    }
+  }
+}
 </script>
 <style>
   .tree--node__disabled {
diff --git a/nezha-fronted/src/components/common/popBox/selectPanel.vue b/nezha-fronted/src/components/common/popBox/selectPanel.vue
index a2ef1aca6..205bd06a1 100644
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -38,35 +38,35 @@
 </template>
 
 <script>
-    export default {
-      name: "selectPanel",
-      props:{
-        placement: {type: String},
-        isEdit: {type: Boolean, default: true},
-        panelData: {type: Array},
-        showPanel: {type: Object},
-        panelLock: {type: Boolean, default: true},
-        filterPanel: {type: String},
-      },
-      mounted() {
-        this.$refs.panelTree.setCurrentKey(this.panel);
-      },
-      watch: {
-        filterPanel: {
-          immediate: true,
-          handler(n) {
-            this.$refs.panelTree && this.$refs.panelTree.filter(n);
-          }
-        },
-        showPanel: {
-          immediate: true,
-          handler(n) {
-            if (n) {
-              this.panel = JSON.parse(JSON.stringify(n));
-            }
-          }
-        },
-        /*panel: {
+export default {
+  name: 'selectPanel',
+  props: {
+    placement: { type: String },
+    isEdit: { type: Boolean, default: true },
+    panelData: { type: Array },
+    showPanel: { type: Object },
+    panelLock: { type: Boolean, default: true },
+    filterPanel: { type: String }
+  },
+  mounted () {
+    this.$refs.panelTree.setCurrentKey(this.panel)
+  },
+  watch: {
+    filterPanel: {
+      immediate: true,
+      handler (n) {
+        this.$refs.panelTree && this.$refs.panelTree.filter(n)
+      }
+    },
+    showPanel: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.panel = JSON.parse(JSON.stringify(n))
+        }
+      }
+    }
+    /* panel: {
           immediate: true,
           handler(n) {
             if (this.$refs.panelTree) {
@@ -74,75 +74,75 @@
               this.$refs.panelTree.setCurrentKey(n);
             }
           }
-        }*/
-      },
-      data(){
-        return {
-          popBox: {show: false},
-          panel: {id: 0, name: ""},
-        }
-      },
-      methods:{
-        /*
+        } */
+  },
+  data () {
+    return {
+      popBox: { show: false },
+      panel: { id: 0, name: '' }
+    }
+  },
+  methods: {
+    /*
         * node: 被拖的节点
         * relative: 发生关系的节点
         * position: ['before', 'after', 'inner'] 与relative节点的关系
         * */
-        nodeDrop(node, relative, position, event) {
-          if (position === 'inner') {
-            node.data.pid = relative.data.id;
-          } else {
-            node.data.pid = relative.data.pid;
-          }
-          this.updateWeight();
-        },
-        filterNode(value, data) {
-          if (!value) return true;
-          return data.name.indexOf(value) !== -1;
-        },
-        updateWeight() {
-          let toUpdate = [];
-          let count = 0;
-          handler(this.panelData);
+    nodeDrop (node, relative, position, event) {
+      if (position === 'inner') {
+        node.data.pid = relative.data.id
+      } else {
+        node.data.pid = relative.data.pid
+      }
+      this.updateWeight()
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    updateWeight () {
+      const toUpdate = []
+      let count = 0
+      handler(this.panelData)
 
-          function handler(panelData) {
-            panelData.forEach(panel => {
-              panel.weight = count++;
-              toUpdate.push({id: panel.id, pid: panel.pid, weight: panel.weight});
-              if (panel.children && panel.children.length > 0) {
-                handler(panel.children);
-              }
-            });
+      function handler (panelData) {
+        panelData.forEach(panel => {
+          panel.weight = count++
+          toUpdate.push({ id: panel.id, pid: panel.pid, weight: panel.weight })
+          if (panel.children && panel.children.length > 0) {
+            handler(panel.children)
           }
+        })
+      }
 
-          this.$put("/panel/tree", toUpdate);
-        },
-        deletePanel(data) {
-          this.$emit("deletePanel", data);
-        },
-        editPanel(data) {
-          this.$emit("editPanel", data);
-        },
-        esc(){
-          this.popBox.show = false;
-        },
-        //确认选择某个节点，与父组件交互
-        selectPanel(data, checked, child) {
-          this.$emit('selectPanel', data);
-          this.$refs.panelTree.setCurrentKey(data);
-          this.esc();
-        },
-        //tree设为单选
-        /*clearOthers(data, checked, child) {
+      this.$put('/panel/tree', toUpdate)
+    },
+    deletePanel (data) {
+      this.$emit('deletePanel', data)
+    },
+    editPanel (data) {
+      this.$emit('editPanel', data)
+    },
+    esc () {
+      this.popBox.show = false
+    },
+    // 确认选择某个节点，与父组件交互
+    selectPanel (data, checked, child) {
+      this.$emit('selectPanel', data)
+      this.$refs.panelTree.setCurrentKey(data)
+      this.esc()
+    }
+    // tree设为单选
+    /* clearOthers(data, checked, child) {
           if (checked) {
             this.panel = data;
             this.$refs.panelTree.setCheckedKeys([data.id]);
           } else {
             this.panel = {id: '', name: ''};
           }
-        }*/
-      },
-    }
+        } */
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/popBox/selectWalk.vue b/nezha-fronted/src/components/common/popBox/selectWalk.vue
index 5405315e5..fc4a796e3 100644
--- a/nezha-fronted/src/components/common/popBox/selectWalk.vue
+++ b/nezha-fronted/src/components/common/popBox/selectWalk.vue
@@ -21,15 +21,15 @@
           @node-click="hideDetail"
           :default-checked-keys="currentWalk"
         >
-          <div slot-scope="{node, data}" class="walk-tree-item" :class="getClass(data.objectID)">
-            <span v-if="!data.type"><i class="nz-icon nz-icon-reading"></i></span>
+          <div slot-scope="data" :class="getClass(data.data.objectID)" class="walk-tree-item">
+            <span v-if="!data.data.type"><i class="nz-icon nz-icon-reading"></i></span>
             <span v-else>
-              <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
-              <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
-              <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
-              <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
-              <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
-              <span @click.stop="showDetail(data, $event)" style="position: relative;">
+              <i v-if="data.data.type.toUpperCase() === 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+              <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length > 0" class="el-icon-folder-opened"></i>
+              <i v-if="data.data.type.toUpperCase() === 'OBJECT' && data.data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+              <i v-if="data.data.type.toUpperCase() === 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+              <i v-if="data.data.type.toUpperCase() === 'TABLE'" class="nz-icon nz-icon-table"></i>
+              <span style="position: relative;" @click.stop="showDetail(data.data, $event)">
                 <i class="nz-icon nz-icon-info-normal metric-tip-icon"></i>
               </span>
             </span>
@@ -46,84 +46,84 @@
 </template>
 
 <script>
-    export default {
-      name: "selectWalk",
-      props:{
-        placement: {type: String},
-        walkData: {type: Array},
-        currentWalk: {type: Array},
-        expandedWalk: {type: Array}
-      },
-      data() {
-        return {
-          popBox: {show: true},
-          tempWalk: {detailShow: false, objectID: ''},
-          detailPopPosition: {top: "0", left: "0"}
-        }
-      },
-      computed: {
-        getClass() {
-          return (value) => {
-            return this.currentWalk.indexOf(value) == -1 ? '' : 'walk-active';
-          }
-        },
-        mibName() {
-          return (value) => {
-            return value ? this.getMibName(value) : "";
-          }
-        }
-      },
-      methods:{
-        getMibName(oid) {
-          let node = this.$refs.walkTree.getNode(oid);
-          let mibName = getMibName(node);
-          function getMibName(n) {
-            if (n.parent && n.parent.parent) {
-              return getMibName(n.parent);
-            } else if (n.parent) {
-              return n.data.name;
-            } else {
-              return "";
-            }
-          }
-          if (mibName) {
-            return mibName;
-          } else {
-            return "";
-          }
-        },
-        change(data, tree) {
-          this.$emit("selectWalk", data.objectID);
-        },
-        show() {
-          this.popBox.show = true;
-        },
-        hideDetail() {
-          this.tempWalk.detailShow = false;
-        },
-        showDetail(data, e) {
-          if (this.tempWalk.objectID != data.objectID) {
-            this.tempWalk.detailShow = false;
-            data.detailShow = !data.detailShow;
-            this.tempWalk = data;
-          } else {
-            data.detailShow = !data.detailShow;
-          }
-
-          this.detailPopPosition.top = e.screenY-23 + "px";
-          this.detailPopPosition.left = e.screenX-16 + "px";
-        },
-        disabledNode(data) {
-          if (data.objectID) {
-            return false;
-          }
-          return true;
-        }
-      },
-      beforeDestroy(){
-
+export default {
+  name: 'selectWalk',
+  props: {
+    placement: { type: String },
+    walkData: { type: Array },
+    currentWalk: { type: Array },
+    expandedWalk: { type: Array }
+  },
+  data () {
+    return {
+      popBox: { show: true },
+      tempWalk: { detailShow: false, objectID: '' },
+      detailPopPosition: { top: '0', left: '0' }
+    }
+  },
+  computed: {
+    getClass () {
+      return (value) => {
+        return this.currentWalk.indexOf(value) == -1 ? '' : 'walk-active'
+      }
+    },
+    mibName () {
+      return (value) => {
+        return value ? this.getMibName(value) : ''
       }
     }
+  },
+  methods: {
+    getMibName (oid) {
+      const node = this.$refs.walkTree.getNode(oid)
+      const mibName = getMibName(node)
+      function getMibName (n) {
+        if (n.parent && n.parent.parent) {
+          return getMibName(n.parent)
+        } else if (n.parent) {
+          return n.data.name
+        } else {
+          return ''
+        }
+      }
+      if (mibName) {
+        return mibName
+      } else {
+        return ''
+      }
+    },
+    change (data, tree) {
+      this.$emit('selectWalk', data.objectID)
+    },
+    show () {
+      this.popBox.show = true
+    },
+    hideDetail () {
+      this.tempWalk.detailShow = false
+    },
+    showDetail (data, e) {
+      if (this.tempWalk.objectID != data.objectID) {
+        this.tempWalk.detailShow = false
+        data.detailShow = !data.detailShow
+        this.tempWalk = data
+      } else {
+        data.detailShow = !data.detailShow
+      }
+
+      this.detailPopPosition.top = e.screenY - 23 + 'px'
+      this.detailPopPosition.left = e.screenX - 16 + 'px'
+    },
+    disabledNode (data) {
+      if (data.objectID) {
+        return false
+      }
+      return true
+    }
+  },
+  beforeDestroy () {
+
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
index 8f5d7c1b2..56b9a17ee 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
@@ -69,7 +69,7 @@
 
 <script >
 export default {
-  data() {
+  data () {
     return {}
   },
   props: {
@@ -83,7 +83,7 @@ export default {
     }
   },
   methods: {
-    onTop() {
+    onTop () {
       if (this.props.node) {
         this.canvas.top(this.props.node)
       }
@@ -97,7 +97,7 @@ export default {
       this.canvas.render()
     },
 
-    onBottom() {
+    onBottom () {
       if (this.props.node) {
         this.canvas.bottom(this.props.node)
       }
@@ -111,7 +111,7 @@ export default {
       this.canvas.render()
     },
 
-    onCombine(stand) {
+    onCombine (stand) {
       if (!this.props.nodes) {
         return
       }
@@ -119,7 +119,7 @@ export default {
       this.canvas.render()
     },
 
-    onUncombine() {
+    onUncombine () {
       if (!this.props.node) {
         return
       }
@@ -127,9 +127,11 @@ export default {
       this.canvas.render()
     },
 
-    onLock() {
+    onLock () {
+      // eslint-disable-next-line vue/no-mutating-props
       this.props.locked = !this.props.locked
       if (this.props.node) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.props.node.locked = this.props.locked
       }
       if (this.props.nodes) {
@@ -145,7 +147,7 @@ export default {
       this.canvas.render(true)
     },
 
-    onDel() {
+    onDel () {
       this.canvas.delete()
     }
   }
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index b4b2dd914..90715d3a7 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -239,7 +239,6 @@
             <el-input v-model="selection.pen.data.url" class="input" size="small"></el-input>
           </el-form-item>
 
-
         </el-form>
       </el-tab-pane>
       <el-tab-pane :label="$t('project.topology.style')" name="4">
@@ -248,7 +247,6 @@
           <!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
           <!--<div class="flex flex-warp">-->
 
-
           <!--</div>-->
           <!--</el-collapse-item>-->
           <!--样式-->
@@ -308,7 +306,6 @@
                       <i :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
                     </div>
 
-
                     <el-option v-for="(item,index) in bkTypeOption" :value="item.id" :key="index">
                       <i :class="['nz-icon',item.label,item.fontSize]" ></i>
                     </el-option>
@@ -578,7 +575,6 @@
               </div>
             </div>
 
-
           </div>
         </div>
       </el-tab-pane>
@@ -852,673 +848,661 @@
 </template>
 
 <script>
-  import {alignNodes,spaceBetween,layout} from '@topology/layout';
-  import {getTopology} from "../../js/common";
-  // import ChartMetric from "./chartMetric";
-  import chartDataFormat from '../../../charts/chartDataFormat';
-  import promqlInput from "../../../page/dashboard/explore/promqlInput";
-  import {getUUID,resetZIndex} from "../../../common/js/common";
-  import nezhaColor from '../../nezhaColor'
-  var rz={
-    methods:{
-      rz(e){
-        resetZIndex(e);
-      }
+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) {
+      resetZIndex(e)
     }
-  };
-  export default {
-    //pen.type 0为node 1位line
-    data(){
-      return {
-        expressions:[],
-        chartTypeList:[
-          {
-            id:"line",
-            name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
-          },
-          {
-            id:'stackArea',
-            name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
-          },
-          {
-            id:"bar",
-            name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
-          },
-          {
-            id:"table",
-            name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
-          },
-        ],
-        aggregationList:[
-          {
-            id:"last",
-            name:'last'
-          },{
-            id:"first",
-            name:'first'
-          },{
-            id:"min",
-            name:'min'
-          },{
-            id:"max",
-            name:'max'
-          },{
-            id:"avg",
-            name:'avg'
-          },{
-            id:"total",
-            name:'total'
-          }
-        ],
-        metricList:[], // metric列表
-        metricCascaderList:[],//metric级联列表
-        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
-        metricOptions:[],
-        unitOptions:chartDataFormat.unitOptions(),
-        lineId:null,
-        lineIsJson:false,
-        lineData:'',
-        penId:null,
-        penIsJson:false,
-        penData:'',
-        tab:'1',
-        drowdown:0,
-        readonly:false,
-        topologyData:{
-          data:{
-            name:'',
-            bkColor:'#FFFFFF',
-            bkImage:'',
-            lineName:'curve',
-            lineWidth:1,
-            fromArrow:'',
-            toArrow:'triangleSolid',
-            projectInfo:true,
-            alertInfo:true,
-            url:'',
-            fontSize:14,
-            align:'left',
-            fontColor:"#000000",
-            opacity:1,
-          }
+  }
+}
+export default {
+  // pen.type 0为node 1位line
+  data () {
+    return {
+      expressions: [],
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
-        pen:{
-          dash:'',
-          font:'',
-          lineWidth:'',
-          strokeStyle:'',
-          textMaxLine:'',
-          textOffsetX:'',
-          textOffsetY:'',
-          globalAlpha:'',
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
         },
-        penNumber:'',
-        nodesAlign:[//对齐方式
-          {
-            value:'left',
-            desc:'左对齐'
-          },{
-            value:'right',
-            desc:'右对齐'
-          },{
-            value:'top',
-            desc:'顶部对齐'
-          },{
-            value:'bottom',
-            desc:'底部对齐'
-          },{
-            value:'center',
-            desc:'垂直居中'
-          },{
-            value:'middle',
-            desc:'水平居中'
-          }],
-        layout:{//显示对应属性
-          maxWidth:1000,
-          nodeWidth:0,
-          nodeHeight:0,
-          maxCount:0,
-          spaceWidth:30,
-          spaceHeight:30
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
         },
-        activeNames:['1','2','3','4','5'],
-        show:{//显示对应属性
-          pos:true,
-          layout:true,
-          looks:true,
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+      ],
+      aggregationList: [
+        {
+          id: 'last',
+          name: 'last'
+        }, {
+          id: 'first',
+          name: 'first'
+        }, {
+          id: 'min',
+          name: 'min'
+        }, {
+          id: 'max',
+          name: 'max'
+        }, {
+          id: 'avg',
+          name: 'avg'
+        }, {
+          id: 'total',
+          name: 'total'
+        }
+      ],
+      metricList: [], // metric列表
+      metricCascaderList: [], // metric级联列表
+      metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
+      metricOptions: [],
+      unitOptions: chartDataFormat.unitOptions(),
+      lineId: null,
+      lineIsJson: false,
+      lineData: '',
+      penId: null,
+      penIsJson: false,
+      penData: '',
+      tab: '1',
+      drowdown: 0,
+      readonly: false,
+      topologyData: {
+        data: {
+          name: '',
+          bkColor: '#FFFFFF',
+          bkImage: '',
+          lineName: 'curve',
+          lineWidth: 1,
+          fromArrow: '',
+          toArrow: 'triangleSolid',
+          projectInfo: true,
+          alertInfo: true,
+          url: '',
+          fontSize: 14,
+          align: 'left',
+          fontColor: '#000000',
+          opacity: 1
+        }
+      },
+      pen: {
+        dash: '',
+        font: '',
+        lineWidth: '',
+        strokeStyle: '',
+        textMaxLine: '',
+        textOffsetX: '',
+        textOffsetY: '',
+        globalAlpha: ''
+      },
+      penNumber: '',
+      nodesAlign: [// 对齐方式
+        {
+          value: 'left',
+          desc: '左对齐'
+        }, {
+          value: 'right',
+          desc: '右对齐'
+        }, {
+          value: 'top',
+          desc: '顶部对齐'
+        }, {
+          value: 'bottom',
+          desc: '底部对齐'
+        }, {
+          value: 'center',
+          desc: '垂直居中'
+        }, {
+          value: 'middle',
+          desc: '水平居中'
+        }],
+      layout: { // 显示对应属性
+        maxWidth: 1000,
+        nodeWidth: 0,
+        nodeHeight: 0,
+        maxCount: 0,
+        spaceWidth: 30,
+        spaceHeight: 30
+      },
+      activeNames: ['1', '2', '3', '4', '5'],
+      show: { // 显示对应属性
+        pos: true,
+        layout: true,
+        looks: true
+      },
+      data: {},
+      bkTypeOption: [
+        {
+          id: 0,
+          name: 'X',
+          label: 'nz-icon-close',
+          fontSize: 'font12 v-sub'
         },
-        data:{},
-        bkTypeOption:[
-          {
-            id:0,
-            name:'X',
-            label:'nz-icon-close',
-            fontSize:'font12 v-sub',
-          },
-          {
-            id:2,
-            name:'↑',
-            label:'nz-icon-arrow-up1',
-            fontSize:'font20',
-          },
-          {
-            id:4,
-            name:'↓',
-            label:'nz-icon-arrow-down2',
-            fontSize:'font20',
-          },
-          {
-            id:1,
-            name:'→',
-            label:'nz-icon-arrow-right1',
-            fontSize:'font12 v-sub',
-          },
-          {
-            id:3,
-            name:'←',
-            label:'nz-icon-arrow-left1',
-            fontSize:'font12 v-sub',
+        {
+          id: 2,
+          name: '↑',
+          label: 'nz-icon-arrow-up1',
+          fontSize: 'font20'
+        },
+        {
+          id: 4,
+          name: '↓',
+          label: 'nz-icon-arrow-down2',
+          fontSize: 'font20'
+        },
+        {
+          id: 1,
+          name: '→',
+          label: 'nz-icon-arrow-right1',
+          fontSize: 'font12 v-sub'
+        },
+        {
+          id: 3,
+          name: '←',
+          label: 'nz-icon-arrow-left1',
+          fontSize: 'font12 v-sub'
+        }
+      ],
+      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' }
+      ],
+      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 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: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
+        {
+          d: 'M5 14 l85 0',
+          points: '5 14,20 9,20 19',
+          fill: '#ffffff',
+          stroke: '#000000',
+          'stroke-width': '1',
+          name: 'triangle'
+        },
+        { d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
+        { d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
+      ],
+      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') }
+      ],
+      nodeAnimateOptions: [
+        {
+          id: 'upDown',
+          name: this.$t('project.topology.bounce')
+        },
+        {
+          id: 'leftRight',
+          name: this.$t('project.topology.shakeX')
+        },
+        {
+          id: 'heart',
+          name: this.$t('project.topology.heartBeat')
+        },
+        {
+          id: 'warning',
+          name: this.$t('project.topology.flash')
+        },
+        {
+          id: 'show',
+          name: this.$t('project.topology.swing')
+        },
+        {
+          id: 'fade',
+          name: this.$t('project.topology.fade')
+        }
+      ],
+      predefineColors: [
+        '#19730E', '#37872D', '#73BF69',
+        '#CC9D00', '#E0B400', '#FADE2A',
+        '#AD0317', '#C4162A', '#F2495C',
+        '#1250B0', '#1F60C4', '#5794F2',
+        '#E55400', '#FA6400', '#FF9830',
+        '#7C2EA3', '#8F3BB8', '#B877D9'
+      ]
+    }
+  },
+  mixins: [rz],
+  components: {
+    promqlInput,
+    nezhaColor
+  },
+  computed: {},
+  props: {
+    selection: {
+      type: Object,
+      require: true
+    },
+    index: {
+      type: Number,
+      require: true
+    },
+    modules: {}
+  },
+  watch: {
+    // 'topologyData.data':{
+    //   handler(n){
+    //     setTimeout(()=>{
+    //       let dataOption=getTopology(this.index).data;
+    //       Object.keys(this.topologyData.data).forEach((key)=>{
+    //         dataOption[key]=this.topologyData.data[key];
+    //       });
+    //       getTopology(this.index).render();
+    //     })
+    //   },
+    //   deep:true,
+    //   immediate:false,
+    // }
+  },
+  created () {
+    const dataOption = getTopology(this.index).data
+    if (!dataOption.data) {
+      dataOption.data = {}
+    }
+    Object.keys(this.topologyData.data).forEach((key) => {
+      if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity') {
+        this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
+      } else {
+        this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
+      }
+    })
+  },
+  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) {
+    if (!this.selection.pen) { // 没选中node line返回
+      return
+    }
+    if (this.penId === this.selection.pen.id) {
+      return
+    }
+    if (this.selection.pen.id) {
+      this.selection.expand = false
+      this.penId = this.selection.pen.id
+      const originData = this.selection.pen.data
+      this.penIsJson = this.isJson(originData)
+      this.penData = this.penIsJson
+        ? JSON.stringify(originData, null, 4)
+        : this.penData = originData
+    }
+  },
+  methods: {
+    queryMetrics () {
+      this.metricOptions = []
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          const metrics = response.data.sort()
+          const metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
+            } else {
+              key = item
+            }
+            if (metricMap.get(key)) {
+              const values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              const values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (const key of metricMap.keys()) {
+            const option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = metricMap.get(key)
+            }
+            this.metricOptions.push(option)
           }
-        ],
-        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"},
-        ],
-        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 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":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
-          {
-            d:'M5 14 l85 0',
-            "points":"5 14,20 9,20 19",
-            fill:'#ffffff',
-            stroke:"#000000",
-            'stroke-width':"1",
-            name:'triangle'
-          },
-          {d:'M5 14 l85 0',fill:'#000000',stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
-          {d:'M5 14 l85 0',fill:'#ffffff',stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
-        ],
-        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")},
-        ],
-        nodeAnimateOptions:[
-          {
-            id:'upDown',
-            name:this.$t("project.topology.bounce")
-          },
-          {
-            id:'leftRight',
-            name:this.$t("project.topology.shakeX")
-          },
-          {
-            id:'heart',
-            name:this.$t("project.topology.heartBeat")
-          },
-          {
-            id:'warning',
-            name:this.$t("project.topology.flash")
-          },
-          {
-            id:'show',
-            name:this.$t("project.topology.swing")
-          },
-          {
-            id:'fade',
-            name:this.$t("project.topology.fade")
-          }
-        ],
-        predefineColors:[
-          '#19730E','#37872D','#73BF69',
-          '#CC9D00','#E0B400','#FADE2A',
-          '#AD0317','#C4162A','#F2495C',
-          '#1250B0','#1F60C4','#5794F2',
-          '#E55400','#FA6400','#FF9830',
-          '#7C2EA3','#8F3BB8','#B877D9',
-        ]
+        }
+      })
+    },
+    tabClick (n) {
+      if (this.selection.pen && this.tab == '1') {
+
       }
     },
-    mixins:[rz],
-    components:{
-      promqlInput,
-      nezhaColor
+    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
+        this.selection.pen.text = this.selection.pen.data.title
+        this.onChange()
+        this.$emit('notModuleIDArrChange', this.selection.pen.id)
+      }
     },
-    computed:{},
-    props:{
-      selection:{
-        type:Object,
-        require:true
-      },
-      index:{
-        type:Number,
-        require:true,
-      },
-      modules:{}
+    changeTitle (val) {
+      this.selection.pen.text = val
+      this.onChange()
     },
-    watch:{
-      selection:{
-        handler(n){
-          if(n){
-          }
-        },
-        deep:true,
-        immediate:true,
-      },
-      // 'topologyData.data':{
-      //   handler(n){
-      //     setTimeout(()=>{
-      //       let dataOption=getTopology(this.index).data;
-      //       Object.keys(this.topologyData.data).forEach((key)=>{
-      //         dataOption[key]=this.topologyData.data[key];
-      //       });
-      //       getTopology(this.index).render();
-      //     })
-      //   },
-      //   deep:true,
-      //   immediate:false,
+    onChange (value) {
+      if (value === 'lineWidth') {
+        this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
+      }
+      this.$emit('change', this.selection.pen)
+      // if(!this.selection.pen.type||this.selection.pens){
+      //   this.$emit('change',this.selection.pen||this.selection.pens);
+      // }else{// 线更新
+      //   this.$emit('change');
       // }
     },
-    created(){
-      let dataOption=getTopology(this.index).data;
-      if(!dataOption.data){
-        dataOption.data={}
+    changeExpand () {
+      this.selection.expand = !this.selection.expand
+    },
+    isJson (obj) {
+      return typeof (obj) === 'object' && Object.prototype.toString.call(obj).toLowerCase() == '[object object]' && !obj.length
+    },
+
+    // 组件事件
+    onNodesAlign (align) { // 对齐node
+      alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
+      getTopology(this.index).updateProps()
+    },
+    onSpaceBetween () {
+      spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
+      getTopology(this.index).updateProps()
+    },
+    onLayout () { // 改变布局
+      layout(getTopology(this.index).activeLayer.pens, this.layout)
+      getTopology(this.index).updateProps()
+    },
+    onClickDash (number) { // 改变线型
+      this.pen.dash = number
+      this.drowdown = 0
+      if (this.selection.pen) {
+        this.selection.pen.dash = number
       }
-      Object.keys(this.topologyData.data).forEach((key)=>{
-        if(key === 'projectInfo' || key === 'alertInfo' || key==='fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity'){
-          this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
+
+      this.onChange()
+    },
+    onClickName (name) {
+      this.pen.name = name
+      this.drowdown = 0
+      if (this.selection.pen) {
+        this.selection.pen.name = name
+      }
+      this.onChange()
+    },
+    bkTypeChange (val) {
+      // console.log(val);
+      this.selection.pen.data.gradientType = val
+      this.$forceUpdate()
+      if (val === 0) {
+        this.selection.pen.bkType = 0
+      }
+
+      if (val === 1 || val === 3) {
+        this.selection.pen.bkType = 1
+        this.selection.pen.gradientAngle = 0
+      }
+      if (val === 2 || val === 4) {
+        this.selection.pen.bkType = 1
+        this.selection.pen.gradientAngle = 90
+      }
+
+      if (val === 1 || val === 2) {
+        this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
+        this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+      }
+      if (val === 3 || val === 4) {
+        this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
+        this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+      }
+      this.onChange()
+    },
+    colorPickerClick (ref) {
+      this.$refs[ref].showPicker = true
+    },
+    colorPickerClickTable (ref, row) {
+      row.showColor = row.color.fill
+      row.showType = 'fill'
+      this.$nextTick(() => {
+        this.$refs[ref][0].showPicker = true
+      })
+    },
+    colorChange (val, name) { // 改变颜色
+      const bktype = this.selection.pen.data.gradientType
+      if (name === 'toArrowColor') {
+        this.selection.pen.fromArrowColor = this.colorRGBtoHex(val)
+        this.selection.pen.toArrowColor = this.colorRGBtoHex(val)
+        this.selection.pen.data.fromArrowColor = this.colorRGBtoHex(val)
+        this.selection.pen.data.toArrowColor = this.colorRGBtoHex(val)
+        this.selection.pen.data.arrowColor = this.colorRGBtoHex(val)
+      } else {
+        this.selection.pen[name] = this.colorRGBtoHex(val)
+      }
+      if (name === 'gradientColor') {
+        this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
+        if (bktype === 1 || bktype === 2) {
+          this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
+          this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        }
+        if (bktype === 3 || bktype === 4) {
+          this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
+          this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        }
+      }
+
+      if (name === 'fillStyle') {
+        if (bktype === 1 || bktype === 2) {
+          this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
+          this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        }
+        if (bktype === 3 || bktype === 4) {
+          this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
+          this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        }
+      }
+      this.selection.pen.data[name] = this.colorRGBtoHex(val)
+      this.onChange()
+    },
+    colorChangeTable (item, val, key) { // 改变颜色
+      item.color[key] = this.colorRGBtoHex(val)
+    },
+    changeShowPicker (item, type) {
+      this.$refs['colorPickerBac' + item.level][0].showPicker = true
+      item.showType = type
+      item.showColor = item.color[type]
+    },
+    colorOut (obj, e) {
+      let flag = false
+      e.path.forEach((item) => {
+        if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
+          flag = true
+        }
+      })
+      if (flag) {
+        return
+      }
+      obj.showType = ''
+      obj.showColor = undefined
+    },
+    changeTopologyOpt (val, key, isColor) {
+      //
+      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).render();
+      if (isColor) {
+        this.topologyData.data[key] = this.colorRGBtoHex(val)
+      } else {
+        this.topologyData.data[key] = val
+      }
+      Object.keys(this.topologyData.data).forEach((key1) => {
+        if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') {
+          getTopology(this.index).data.data[key1] = this.topologyData.data[key1]
         } else {
-          this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
+          getTopology(this.index).data[key1] = this.topologyData.data[key1]
         }
-      });
+      })
+      getTopology(this.index).render()
+      this.$emit('changeProjectTitle')
     },
-    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;
+    colorRGBtoHex (color) { // 获取颜色16进制数
+      if (!color) {
+        return ''
+      };
+      if (color.length <= 7) { return color }
+      const rgb = color.split(',')
+      const r = parseInt(rgb[0].split('(')[1])
+      const g = parseInt(rgb[1])
+      const b = parseInt(rgb[2].split(')')[0])
+      const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+      return hex
     },
-    updated(n,o){
-      if(!this.selection.pen){//没选中node line返回
-        return;
-      }
-      if(this.penId===this.selection.pen.id){
-        return;
-      }
-      if(this.selection.pen.id){
-        this.selection.expand=false;
-        this.penId=this.selection.pen.id;
-        let originData=this.selection.pen.data;
-        this.penIsJson=this.isJson(originData);
-        this.penData=this.penIsJson?
-          JSON.stringify(originData,null,4):
-          this.penData=originData;
-      }
+    onClickToArrow (arrow) {
+      this.selection.pen.toArrow = arrow
+      this.drowdown = 0
+      this.onChange()
     },
-    methods:{
-      queryMetrics(){
-        this.metricOptions=[];
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status=='success'){
-            let metrics=response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              };
-              if(metricMap.get(key)&&metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-          }
-        })
-      },
-      tabClick(n){
-        if(this.selection.pen&&this.tab=='1'){
+    onClickFromArrow (arrow) {
+      this.selection.pen.fromArrow = arrow
+      this.drowdown = 0
+      this.onChange()
+    },
+    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 () {
+      const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
+      this.$emit('del', delObj)
+    },
+    getMetricOptions () {
+      return this.metricOptions
+    },
+    addExpression () {
+      this.selection.pen.data.expressArr.push('')
+      this.selection.pen.data.legends.push('')
+    },
+    expressionChange (item) {
 
-        }
-      },
-      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
-          this.selection.pen.text=this.selection.pen.data.title;
-          this.onChange();
-          this.$emit('notModuleIDArrChange',this.selection.pen.id);
-        }
-      },
-      changeTitle(val){
-        this.selection.pen.text=val;
-        this.onChange()
-      },
-      onChange(value){
-        if(value==='lineWidth'){
-          this.selection.pen.lineWidth=this.selection.pen.data.lineWidth;
-        }
-        this.$emit('change',this.selection.pen);
-        // if(!this.selection.pen.type||this.selection.pens){
-        //   this.$emit('change',this.selection.pen||this.selection.pens);
-        // }else{// 线更新
-        //   this.$emit('change');
-        // }
-      },
-      changeExpand(){
-        this.selection.expand= !this.selection.expand;
-      },
-      isJson(obj){
-        return typeof (obj)=="object"&&Object.prototype.toString.call(obj).toLowerCase()=="[object object]"&& !obj.length;
-      },
-
-      //组件事件
-      onNodesAlign(align){//对齐node
-        alignNodes(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect,align);
-        getTopology(this.index).updateProps();
-      },
-      onSpaceBetween(){
-        spaceBetween(getTopology(this.index).activeLayer.pens,getTopology(this.index).activeLayer.rect.width);
-        getTopology(this.index).updateProps();
-      },
-      onLayout(){//改变布局
-        layout(getTopology(this.index).activeLayer.pens,this.layout);
-        getTopology(this.index).updateProps();
-      },
-      onClickDash(number){//改变线型
-        this.pen.dash=number;
-        this.drowdown=0;
-        if(this.selection.pen){
-          this.selection.pen.dash=number;
-        }
-
-        this.onChange();
-      },
-      onClickName(name){
-        this.pen.name=name;
-        this.drowdown=0;
-        if(this.selection.pen){
-          this.selection.pen.name=name;
-        }
-        this.onChange();
-      },
-      bkTypeChange(val){
-        // console.log(val);
-        this.selection.pen.data.gradientType=val;
-        this.$forceUpdate()
-        if(val===0){
-          this.selection.pen.bkType=0;
-        }
-
-        if(val===1 || val===3){
-          this.selection.pen.bkType=1;
-          this.selection.pen.gradientAngle=0;
-        }
-        if(val===2 || val===4){
-          this.selection.pen.bkType=1;
-          this.selection.pen.gradientAngle=90;
-        }
-
-        if(val===1 || val===2){
-          this.selection.pen.gradientToColor=this.selection.pen.data.gradientColor;
-          this.selection.pen.gradientFromColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-        }
-        if(val===3 || val===4){
-          this.selection.pen.gradientFromColor=this.selection.pen.data.gradientColor;
-          this.selection.pen.gradientToColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-        }
-        this.onChange()
-      },
-      colorPickerClick(ref){
-        this.$refs[ref].showPicker=true;
-      },
-      colorPickerClickTable(ref,row){
-        row.showColor=row.color.fill;
-        row.showType='fill';
-        this.$nextTick(()=>{
-          this.$refs[ref][0].showPicker=true;
-        })
-
-      },
-      colorChange(val,name){//改变颜色
-        let bktype= this.selection.pen.data.gradientType;
-        if(name==='toArrowColor'){
-          this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
-          this.selection.pen.toArrowColor=this.colorRGBtoHex(val);
-          this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
-          this.selection.pen.data['toArrowColor']=this.colorRGBtoHex(val);
-          this.selection.pen.data['arrowColor']=this.colorRGBtoHex(val);
-        }else{
-          this.selection.pen[name]=this.colorRGBtoHex(val);
-        }
-        if(name==='gradientColor'){
-          this.selection.pen.data['gradientColor']=this.colorRGBtoHex(val);
-          if(bktype===1 || bktype===2){
-            this.selection.pen.gradientToColor=this.selection.pen.data.gradientColor;
-            this.selection.pen.gradientFromColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-          }
-          if(bktype===3 || bktype===4){
-            this.selection.pen.gradientFromColor=this.selection.pen.data.gradientColor;
-            this.selection.pen.gradientToColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-          }
-        }
-
-        if(name==='fillStyle'){
-          if(bktype===1 || bktype===2){
-            this.selection.pen.gradientToColor=this.selection.pen.data.gradientColor;
-            this.selection.pen.gradientFromColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-          }
-          if(bktype===3 || bktype===4){
-            this.selection.pen.gradientFromColor=this.selection.pen.data.gradientColor;
-            this.selection.pen.gradientToColor=this.selection.pen.fillStyle?this.selection.pen.fillStyle:'#fff';
-          }
-        }
-        this.selection.pen.data[name]=this.colorRGBtoHex(val);
-        this.onChange();
-      },
-      colorChangeTable(item,val,key){//改变颜色
-        item.color[key]=this.colorRGBtoHex(val);
-      },
-      changeShowPicker(item,type){
-        this.$refs['colorPickerBac'  + item.level][0].showPicker=true;
-        item.showType=type;
-        item.showColor=item.color[type];
-      },
-      colorOut(obj,e){
-
-        let flag=false;
-        e.path.forEach((item)=>{
-          if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
-            flag=true
-          }
-        })
-        if(flag){
-          return
-        }
-        obj.showType='';
-        obj.showColor=undefined;
-      },
-      changeTopologyOpt(val,key,isColor){
-        //
-        // getTopology(this.index).data[key]=val;
-        // getTopology(this.index).render();
-        if(isColor){
-          this.topologyData.data[key]=this.colorRGBtoHex(val);
-        }else{
-          this.topologyData.data[key]=val;
-        }
-        Object.keys(this.topologyData.data).forEach((key1)=>{
-          if(key1 === 'projectInfo' || key1 === 'alertInfo' || key1==='fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity'){
-            getTopology(this.index).data.data[key1]=this.topologyData.data[key1];
-          } else {
-            getTopology(this.index).data[key1]=this.topologyData.data[key1];
-          }
-        });
-        getTopology(this.index).render();
-        this.$emit('changeProjectTitle')
-      },
-      colorRGBtoHex(color){//获取颜色16进制数
-        if(!color){
-          return ""
-        };
-        if(color.length<=7){return color}
-        let rgb=color.split(',');
-        let r=parseInt(rgb[0].split('(')[1]);
-        let g=parseInt(rgb[1]);
-        let b=parseInt(rgb[2].split(')')[0]);
-        let hex="#"+((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);
-        return hex;
-      },
-      onClickToArrow(arrow){
-        this.selection.pen.toArrow=arrow;
-        this.drowdown=0;
-        this.onChange();
-      },
-      onClickFromArrow(arrow){
-        this.selection.pen.fromArrow=arrow;
-        this.drowdown=0;
-        this.onChange();
-      },
-      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(){
-        let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
-        this.$emit('del',delObj);
-      },
-      getMetricOptions(){
-        return this.metricOptions;
-      },
-      addExpression(){
-        this.selection.pen.data.expressArr.push('');
-        this.selection.pen.data.legends.push('');
-      },
-      expressionChange(item){
-
-      },
-      removeExpression(index){
-        if(this.selection.pen.data.expressArr.length>1){
-          this.selection.pen.data.expressArr.splice(index,1);
-          this.selection.pen.data.legends.splice(index,1);
-          this.$nextTick(()=>{
-            this.expressions.forEach((ex,index)=>{
-              if(ex){
-                this.$refs[`promql-${index}`][0].metricChange(ex);
-              }
-            });
-          });
-        }
-      },
-      copyExpression(index) {
-        this.selection.pen.data.expressArr.push(this.selection.pen.data.expressArr[index]);
-        this.selection.pen.data.legends.push(this.selection.pen.data.legends[index]);
+    },
+    removeExpression (index) {
+      if (this.selection.pen.data.expressArr.length > 1) {
+        this.selection.pen.data.expressArr.splice(index, 1)
+        this.selection.pen.data.legends.splice(index, 1)
         this.$nextTick(() => {
           this.expressions.forEach((ex, index) => {
             if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex);
+              this.$refs[`promql-${index}`][0].metricChange(ex)
             }
-          });
-        });
-      },
-      valueMappingAdd(){
-        if(this.selection.pen.data.valueMappingSort==='desc'){
-          this.selection.pen.data.valueMapping.push({
-            color:{
-              line:'#000000',
-              fill:'#ffffff',
-              text:'#000000',
-            },
-            showColor:undefined,
-            animateType:this.selection.pen.type?1:'upDown',
-            value:0,
-            level:1,
-            showType:'fill',//bac text border
-          });
-          this.selection.pen.data.valueMapping.forEach((item,index)=>{
-            if(index===0){
-              return
-            }
-            item.level=this.selection.pen.data.valueMapping.length-index;
           })
-        }else{
-          this.selection.pen.data.valueMapping.push({
-            color:{
-              line:'#000000',
-              fill:'#ffffff',
-              text:'#000000',
-            },
-            showColor:undefined,
-            animateType:this.selection.pen.type?1:'upDown',
-            value:0,
-            level:this.selection.pen.data.valueMapping.length,
-            showType:'fill',//bac text border
-          });
-        }
-      },
-      valueMappingValueChange(index,row){
+        })
+      }
+    },
+    copyExpression (index) {
+      this.selection.pen.data.expressArr.push(this.selection.pen.data.expressArr[index])
+      this.selection.pen.data.legends.push(this.selection.pen.data.legends[index])
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+          }
+        })
+      })
+    },
+    valueMappingAdd () {
+      if (this.selection.pen.data.valueMappingSort === 'desc') {
+        this.selection.pen.data.valueMapping.push({
+          color: {
+            line: '#000000',
+            fill: '#ffffff',
+            text: '#000000'
+          },
+          showColor: undefined,
+          animateType: this.selection.pen.type ? 1 : 'upDown',
+          value: 0,
+          level: 1,
+          showType: 'fill'// bac text border
+        })
+        this.selection.pen.data.valueMapping.forEach((item, index) => {
+          if (index === 0) {
+            return
+          }
+          item.level = this.selection.pen.data.valueMapping.length - index
+        })
+      } else {
+        this.selection.pen.data.valueMapping.push({
+          color: {
+            line: '#000000',
+            fill: '#ffffff',
+            text: '#000000'
+          },
+          showColor: undefined,
+          animateType: this.selection.pen.type ? 1 : 'upDown',
+          value: 0,
+          level: this.selection.pen.data.valueMapping.length,
+          showType: 'fill'// bac text border
+        })
+      }
+    },
+    valueMappingValueChange (index, row) {
 
-      },
-      changeValueMappingSort(){
-        if(this.selection.pen.data.valueMappingSort==='desc'){
-          this.selection.pen.data.valueMappingSort='asc';
-          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
-          let a=arr.splice(0,1);
-          arr.reverse();
-          arr.unshift(a[0]);
-          this.selection.pen.data.valueMapping=arr;
-        } else{
-          this.selection.pen.data.valueMappingSort='desc';
-          let arr=JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping));
-          let a=arr.splice(0,1);
-          arr.reverse();
-          arr.unshift(a[0]);
-          this.selection.pen.data.valueMapping=arr;
-        }
-      },
-      valueMappingDel(index,row){
-        this.selection.pen.data.valueMapping.splice(index,1);
-        this.selection.pen.data.valueMapping.forEach((item,index)=>{
-          item.level=index
-        });
-      },
-      inputFocus(e){
-        e.path[2].children[0].setAttribute("tabindex","0");
-        e.path[2].children[1].setAttribute("tabindex","1");
-      },
-      inputBlur(e){
-      },
+    },
+    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))
+        const a = arr.splice(0, 1)
+        arr.reverse()
+        arr.unshift(a[0])
+        this.selection.pen.data.valueMapping = arr
+      } else {
+        this.selection.pen.data.valueMappingSort = 'desc'
+        const arr = JSON.parse(JSON.stringify(this.selection.pen.data.valueMapping))
+        const a = arr.splice(0, 1)
+        arr.reverse()
+        arr.unshift(a[0])
+        this.selection.pen.data.valueMapping = arr
+      }
+    },
+    valueMappingDel (index, row) {
+      this.selection.pen.data.valueMapping.splice(index, 1)
+      this.selection.pen.data.valueMapping.forEach((item, index) => {
+        item.level = index
+      })
+    },
+    inputFocus (e) {
+      e.path[2].children[0].setAttribute('tabindex', '0')
+      e.path[2].children[1].setAttribute('tabindex', '1')
+    },
+    inputBlur (e) {
     }
   }
+}
 </script>
 <style scoped>
   .props-box label {
@@ -1795,7 +1779,6 @@
       padding: 12px 0px;
     }
 
-
     /deep/ .el-input-number__decrease, /deep/ .el-input-number__increase {
       visibility: hidden;
       outline: none;
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 046630b6a..3b8a79792 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -1,23 +1,23 @@
-import {register as registerFlow} from '@topology/flow-diagram'
-import {register as registerActivity} from '@topology/activity-diagram'
-import {register as registerSequence} from '@topology/sequence-diagram'
-import {register as registerChart} from '@topology/chart-diagram';
-import { Node, Rect,Point, Direction } from '@topology/core';
+import { register as registerFlow } from '@topology/flow-diagram'
+import { register as registerActivity } from '@topology/activity-diagram'
+import { register as registerSequence } from '@topology/sequence-diagram'
+import { register as registerChart } from '@topology/chart-diagram'
+import { Node, Rect, Point, Direction } from '@topology/core'
 // import { register as registerClass } from './class-diagram/index'
-export let canvas;
+export let canvas
 
-export function canvasRegister(){
-  registerFlow();
-  registerActivity();
-  registerSequence();
-  registerChart();
+export function canvasRegister () {
+  registerFlow()
+  registerActivity()
+  registerSequence()
+  registerChart()
   // registerClass()
 }
 
-export const Tools=[
+export const Tools = [
   {
-    group:'General',
-    children:[
+    group: 'General',
+    children: [
       // {
       //   name:'rectangleImg',
       //   icon:'icon-rect',
@@ -55,525 +55,519 @@ export const Tools=[
         }
       },
       {
-        name:'rectangle',
-        icon:'icon-rect',
-        data:{
-          text:'rect',
-          rect:{
-            width:100,
-            height:100
+        name: 'rectangle',
+        icon: 'icon-rect',
+        data: {
+          text: 'rect',
+          rect: {
+            width: 100,
+            height: 100
           },
-          paddingLeft:10,
-          paddingRight:10,
-          paddingTop:10,
-          paddingBottom:10,
-          name:'rectangle',
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'rectangle'
         }
       },
       {
-        name:'rectangle',
-        icon:'icon-rectangle',
-        data:{
-          text:'rectangle',
-          rect:{
-            width:200,
-            height:50
+        name: 'rectangle',
+        icon: 'icon-rectangle',
+        data: {
+          text: 'rectangle',
+          rect: {
+            width: 200,
+            height: 50
           },
-          paddingLeft:10,
-          paddingRight:10,
-          paddingTop:10,
-          paddingBottom:10,
-          borderRadius:0.1,
-          name:'rectangle',
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
+          borderRadius: 0.1,
+          name: 'rectangle'
           // icon: '\ue680',
           // iconFamily: 'nz-icon',
           // iconColor: ''
         }
       },
       {
-        name:'circle',
-        icon:'icon-circle',
-        data:{
-          text:'circle',
-          rect:{
-            width:100,
-            height:100
+        name: 'circle',
+        icon: 'icon-circle',
+        data: {
+          text: 'circle',
+          rect: {
+            width: 100,
+            height: 100
           },
-          name:'circle',
-          textMaxLine:1
+          name: 'circle',
+          textMaxLine: 1
         }
       },
       {
-        name:'triangle',
-        icon:'icon-triangle',
-        data:{
-          text:'triangle',
-          rect:{
-            width:100,
-            height:100
+        name: 'triangle',
+        icon: 'icon-triangle',
+        data: {
+          text: 'triangle',
+          rect: {
+            width: 100,
+            height: 100
           },
-          name:'triangle'
+          name: 'triangle'
         }
       },
       {
-        name:'diamond',
-        icon:'icon-diamond',
-        data:{
-          text:'diamond',
-          rect:{
-            width:100,
-            height:100
+        name: 'diamond',
+        icon: 'icon-diamond',
+        data: {
+          text: 'diamond',
+          rect: {
+            width: 100,
+            height: 100
           },
-          name:'diamond'
+          name: 'diamond'
         }
       },
       {
-        name:'pentagon',
-        icon:'icon-pentagon',
-        data:{
-          text:'pentagon',
-          rect:{
-            width:100,
-            height:100
+        name: 'pentagon',
+        icon: 'icon-pentagon',
+        data: {
+          text: 'pentagon',
+          rect: {
+            width: 100,
+            height: 100
           },
-          name:'pentagon'
+          name: 'pentagon'
         }
       },
       {
-        name:'hexagon',
-        icon:'icon-hexagon',
-        data:{
-          text:'hexagon',
-          rect:{
-            width:100,
-            height:100
+        name: 'hexagon',
+        icon: 'icon-hexagon',
+        data: {
+          text: 'hexagon',
+          rect: {
+            width: 100,
+            height: 100
           },
-          paddingTop:10,
-          paddingBottom:10,
-          name:'hexagon'
+          paddingTop: 10,
+          paddingBottom: 10,
+          name: 'hexagon'
         }
       },
       {
-        name:'pentagram',
-        icon:'icon-pentagram',
-        data:{
-          text:'pentagram',
-          rect:{
-            width:100,
-            height:100
+        name: 'pentagram',
+        icon: 'icon-pentagram',
+        data: {
+          text: 'pentagram',
+          rect: {
+            width: 100,
+            height: 100
           },
-          name:'pentagram'
+          name: 'pentagram'
         }
-      },
+      }
     ]
-  },
-];
+  }
+]
 
-export const imageTemp={
+export const imageTemp = {
   name: 'rectangleImg',
   icon: 'icon-image',
   data: {
-    "type":0,
-    "rect":{
-      "x":922,
-      "y":406,
-      "width":100,
-      "height":100,
+    type: 0,
+    rect: {
+      x: 922,
+      y: 406,
+      width: 100,
+      height: 100
     },
-    imageRatio:false,
-    "lineWidth":0,
-    "rotate":0,
-    "offsetRotate":0,
-    "globalAlpha":1,
-    "dash":0,
-    "strokeStyle":"#000000",
-    "animatePos":0,
-    "name":"rectangleImg",
-    "lineDashOffset":0,
-    "text":"",
-    "textOffsetX":0,
-    "textOffsetY":0,
-    "visible":true,
-    "zRotate":0,
-    "animateDuration":0,
-    "animateFrames":[],
-    "animateFrame":0,
-    "borderRadius":0,
-    "icon":"",
-    "image":"",
-    "imageAlign":"center",
-    "bkType":0,
-    "gradientAngle":0,
-    "gradientRadius":0.01,
-    "paddingTop":5,
-    "paddingBottom":5,
-    "paddingLeft":5,
-    "paddingRight":5,
-    "paddingLeftNum":5,
-    "paddingRightNum":5,
-    "paddingTopNum":5,
-    "paddingBottomNum":5,
-    "fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
+    imageRatio: false,
+    lineWidth: 0,
+    rotate: 0,
+    offsetRotate: 0,
+    globalAlpha: 1,
+    dash: 0,
+    strokeStyle: '#000000',
+    animatePos: 0,
+    name: 'rectangleImg',
+    lineDashOffset: 0,
+    text: '',
+    textOffsetX: 0,
+    textOffsetY: 0,
+    visible: true,
+    zRotate: 0,
+    animateDuration: 0,
+    animateFrames: [],
+    animateFrame: 0,
+    borderRadius: 0,
+    icon: '',
+    image: '',
+    imageAlign: 'center',
+    bkType: 0,
+    gradientAngle: 0,
+    gradientRadius: 0.01,
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingLeftNum: 5,
+    paddingRightNum: 5,
+    paddingTopNum: 5,
+    paddingBottomNum: 5,
+    fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
   }
-};
-/*自定义图片组件*/
-export function myShape(ctx, node) { //自定义图片组件
-  
-  ctx.beginPath();
-  
-  ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
-  if(node.data.lineWidth<=0){
-    ctx.strokeStyle = 'rgba(0,0,0,0)';
+}
+/* 自定义图片组件 */
+export function myShape (ctx, node) { // 自定义图片组件
+  ctx.beginPath()
+
+  ctx.rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
+  if (node.data.lineWidth <= 0) {
+    ctx.strokeStyle = 'rgba(0,0,0,0)'
   }
   // 必须判空再填充
-  (node.fillStyle || node.bkType) && ctx.fill();
-  ctx.stroke();
+  (node.fillStyle || node.bkType) && ctx.fill()
+  ctx.stroke()
 }
-export function myAnchors(node) {
-  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
-  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
+export function myAnchors (node) {
+  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
+  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
 }
-export function myIconRect(node) {
-  node.iconRect = new Rect(node.rect.x+node.paddingLeft, node.rect.y+node.paddingTop, node.rect.width-(node.paddingLeft+node.paddingRight), node.rect.height-20-(node.paddingTop+node.paddingBottom));
-  node.fullIconRect = node.rect;
+export function myIconRect (node) {
+  node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - 20 - (node.paddingTop + node.paddingBottom))
+  node.fullIconRect = node.rect
 }
-export function myTextRect(node) {
+export function myTextRect (node) {
   node.textRect = new Rect(
-    node.rect.x +node.paddingLeft,
-    node.rect.y+node.rect.height-20-node.paddingBottom,
-    node.rect.width -(node.paddingLeft+node.paddingRight),
-    20,
-  );
-  node.fullTextRect = node.rect;
+    node.rect.x + node.paddingLeft,
+    node.rect.y + node.rect.height - 20 - node.paddingBottom,
+    node.rect.width - (node.paddingLeft + node.paddingRight),
+    20
+  )
+  node.fullTextRect = node.rect
 }
-/*自定义图片组件*/
+/* 自定义图片组件 */
 
-/*自定义立方体*/
-export function myCubec(ctx, node) {
-  //立方体
+/* 自定义立方体 */
+export function myCubec (ctx, node) {
+  // 立方体
   // ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
-  let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
-  
-  
+  const x = node.rect.x + 10; const y = node.rect.y + 10; const w = node.rect.width - 20; const h = node.rect.height - 20
+
   // LINE MODE
-  ctx.lineJoin = "round";
-  
+  ctx.lineJoin = 'round'
+
   // center face
-  ctx.beginPath();
-  ctx.moveTo(x, y+h/3);
-  ctx.lineTo(x + w*2/3, y+h/3 );
-  ctx.lineTo(x + w*2/3, y +h);
-  ctx.lineTo(x, y + h);
-  ctx.closePath();
-  ctx.fillStyle = node.fillStyle;
-  ctx.strokeStyle =  node.strokeStyle;
+  ctx.beginPath()
+  ctx.moveTo(x, y + h / 3)
+  ctx.lineTo(x + w * 2 / 3, y + h / 3)
+  ctx.lineTo(x + w * 2 / 3, y + h)
+  ctx.lineTo(x, y + h)
+  ctx.closePath()
+  ctx.fillStyle = node.fillStyle
+  ctx.strokeStyle = node.strokeStyle
   ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  
+  (node.fillStyle || node.bkType) && ctx.fill()
+
   // top face
-  ctx.beginPath();
-  ctx.moveTo(x, y+h/3);
-  ctx.lineTo(x + w/3, y);
-  ctx.lineTo(x + w, y);
-  ctx.lineTo(x + w*2/3, y+h/3 );
-  ctx.closePath();
-  ctx.fillStyle = node.fillStyle;
-  ctx.strokeStyle =  node.strokeStyle;
+  ctx.beginPath()
+  ctx.moveTo(x, y + h / 3)
+  ctx.lineTo(x + w / 3, y)
+  ctx.lineTo(x + w, y)
+  ctx.lineTo(x + w * 2 / 3, y + h / 3)
+  ctx.closePath()
+  ctx.fillStyle = node.fillStyle
+  ctx.strokeStyle = node.strokeStyle
   ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  
+  (node.fillStyle || node.bkType) && ctx.fill()
+
   // right face
-  ctx.beginPath();
-  ctx.moveTo(x + w*2/3, y+h/3 );
-  ctx.lineTo(x + w, y);
-  ctx.lineTo(x + w, y+h*2/3);
-  ctx.lineTo(x + w*2/3, y + h);
-  ctx.closePath();
-  ctx.fillStyle = node.fillStyle;
-  ctx.strokeStyle =  node.strokeStyle;
+  ctx.beginPath()
+  ctx.moveTo(x + w * 2 / 3, y + h / 3)
+  ctx.lineTo(x + w, y)
+  ctx.lineTo(x + w, y + h * 2 / 3)
+  ctx.lineTo(x + w * 2 / 3, y + h)
+  ctx.closePath()
+  ctx.fillStyle = node.fillStyle
+  ctx.strokeStyle = node.strokeStyle
   ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill();
-  
+  (node.fillStyle || node.bkType) && ctx.fill()
+
   // 必须判空再填充
-  
 }
-export function myCubeAnchors(node) {//立方体锚点
-  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
-  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
+export function myCubeAnchors (node) { // 立方体锚点
+  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
+  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
+  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
 }
-/*自定义立方体*/
+/* 自定义立方体 */
 
-
-
-export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
-  node.animateType=animateType;
+export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
+  node.animateType = animateType
   if (node.animateType === 'custom') {
-    return;
+    return
   }
-  
-  node.animateFrames = [];
-  const state = Node.cloneState(node);
+
+  node.animateFrames = []
+  const state = Node.cloneState(node)
   switch (animateType) {
     case 'upDown':
-      state.rect.y -= 10;
-      state.rect.ey -= 10;
+      state.rect.y -= 10
+      state.rect.ey -= 10
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state
-      });
+      })
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(node)
-      });
+      })
       node.animateFrames.push({
         duration: 200,
         linear: true,
         state: Node.cloneState(state)
-      });
-      break;
+      })
+      break
     case 'leftRight':
-      state.rect.x -= 10;
-      state.rect.ex -= 10;
+      state.rect.x -= 10
+      state.rect.ex -= 10
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.rect.x += 20;
-      state.rect.ex += 20;
+      })
+      state.rect.x += 20
+      state.rect.ex += 20
       node.animateFrames.push({
         duration: 80,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.rect.x -= 20;
-      state.rect.ex -= 20;
+      })
+      state.rect.x -= 20
+      state.rect.ex -= 20
       node.animateFrames.push({
         duration: 50,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.rect.x += 20;
-      state.rect.ex += 20;
+      })
+      state.rect.x += 20
+      state.rect.ex += 20
       node.animateFrames.push({
         duration: 30,
         linear: true,
         state: Node.cloneState(state)
-      });
+      })
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(node)
-      });
-      break;
+      })
+      break
     case 'heart':
-      state.rect.x -= 5;
-      state.rect.ex += 5;
-      state.rect.y -= 5;
-      state.rect.ey += 5;
-      state.rect.width += 5;
-      state.rect.height += 10;
+      state.rect.x -= 5
+      state.rect.ex += 5
+      state.rect.y -= 5
+      state.rect.ey += 5
+      state.rect.width += 5
+      state.rect.height += 10
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state
-      });
+      })
       node.animateFrames.push({
         duration: 400,
         linear: true,
         state: Node.cloneState(node)
-      });
-      break;
+      })
+      break
     case 'success':
-      state.strokeStyle =  strokeStyle?strokeStyle:'#237804';
+      state.strokeStyle = strokeStyle || '#237804'
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state
-      });
+      })
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(node)
-      });
-      state.strokeStyle = '#237804';
+      })
+      state.strokeStyle = '#237804'
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state
-      });
+      })
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(node)
-      });
-      state.strokeStyle = strokeStyle?strokeStyle: '#237804';
-      state.fillStyle = fillStyle?fillStyle:'#389e0d22';
+      })
+      state.strokeStyle = strokeStyle || '#237804'
+      state.fillStyle = fillStyle || '#389e0d22'
       node.animateFrames.push({
         duration: 3000,
         linear: true,
         state
-      });
-      break;
+      })
+      break
     case 'warning':
-      state.strokeStyle = strokeStyle?strokeStyle:'#fa8c16';
-      state.fillStyle = fillStyle?fillStyle:'#fa8c16';
-      state.lineWidth=5;
-      state.dash = 2;
+      state.strokeStyle = strokeStyle || '#fa8c16'
+      state.fillStyle = fillStyle || '#fa8c16'
+      state.lineWidth = 5
+      state.dash = 2
       node.animateFrames.push({
         duration: 500,
         linear: true,
         state
-      });
-      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
-      state.dash = 0;
-      state.lineWidth=1;
-      state.fillStyle = '#ffffff';
+      })
+      state.strokeStyle = strokeStyle || '#fa8c16'
+      state.dash = 0
+      state.lineWidth = 1
+      state.fillStyle = '#ffffff'
       node.animateFrames.push({
         duration: 500,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
-      state.dash = 2;
-      state.lineWidth=5;
-      state.fillStyle = fillStyle?fillStyle: '#fa8c16';
+      })
+      state.strokeStyle = strokeStyle || '#fa8c16'
+      state.dash = 2
+      state.lineWidth = 5
+      state.fillStyle = fillStyle || '#fa8c16'
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      break;
+      })
+      break
     case 'error':
-      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
-      state.fillStyle = fillStyle?fillStyle:'#cf132222';
-      state.lineWidth=5;
-      state.dash = 2;
+      state.strokeStyle = strokeStyle || '#cf1322'
+      state.fillStyle = fillStyle || '#cf132222'
+      state.lineWidth = 5
+      state.dash = 2
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state
-      });
-      state.strokeStyle = strokeStyle?strokeStyle:'#cf1322';
-      state.fillStyle = '#ffffff';
-      state.dash = 0;
-      state.lineWidth=1;
+      })
+      state.strokeStyle = strokeStyle || '#cf1322'
+      state.fillStyle = '#ffffff'
+      state.dash = 0
+      state.lineWidth = 1
       node.animateFrames.push({
         duration: 500,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
-      state.fillStyle = fillStyle?fillStyle:'#cf132222';
-      state.dash = 2;
-      state.lineWidth=5;
+      })
+      state.strokeStyle = strokeStyle || '#cf1322'
+      state.fillStyle = fillStyle || '#cf132222'
+      state.dash = 2
+      state.lineWidth = 5
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      break;
+      })
+      break
     case 'show':
-      state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
-      state.rotate = -5;
+      state.strokeStyle = strokeStyle || '#fa541c'
+      state.rotate = -5
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.rotate = 5;
+      })
+      state.rotate = 5
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.rotate = 0;
+      })
+      state.rotate = 0
       node.animateFrames.push({
         duration: 100,
         linear: true,
         state: Node.cloneState(state)
-      });
-      break;
+      })
+      break
     case 'fade':
-      state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
-      state.globalAlpha = 0.3;
+      state.strokeStyle = strokeStyle || '#fa541c'
+      state.globalAlpha = 0.3
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.globalAlpha = 0.5;
+      })
+      state.globalAlpha = 0.5
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.globalAlpha = 0.8;
+      })
+      state.globalAlpha = 0.8
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      state.globalAlpha = 1;
+      })
+      state.globalAlpha = 1
       node.animateFrames.push({
         duration: 300,
         linear: true,
         state: Node.cloneState(state)
-      });
-      break;
+      })
+      break
   }
-  node.animatePlay=true;
+  node.animatePlay = true
 }
-export function onChangeAnimateLine(line,type){
-  line.animateType=type;
-  line.animatePlay=true;
+export function onChangeAnimateLine (line, type) {
+  line.animateType = type
+  line.animatePlay = true
 }
 export function changeImage (dataImg, callback) {
-                let self = this;
-                var base64Img = document.createElement("base64Img"),
-                    canvas = document.createElement("canvas"),
-                    context = canvas.getContext("2d");
-                // 创建新图片
-                var img = new Image();
-                img.src = dataImg;
-                img.addEventListener(
-                    "load",
-                    function () {
-                        // 绘制图片到canvas上
-                        canvas.width = img.width;
-                        canvas.height = img.height;
-                        context.drawImage(img, 0, 0);
+  // const base64Img = document.createElement('base64Img')
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  // 创建新图片
+  const img = new Image()
+  img.src = dataImg
+  img.addEventListener(
+    'load',
+    function () {
+      // 绘制图片到canvas上
+      canvas.width = img.width
+      canvas.height = img.height
+      context.drawImage(img, 0, 0)
 
-                        // 将canvas的透明背景设置成白色
-                        var imageData = context.getImageData(
-                            0,
-                            0,
-                            canvas.width,
-                            canvas.height
-                        );
-                        for (var i = 0; i < imageData.data.length; i += 4) {
-                            //rgb大于250的透明度y均设置成0
-                            if (
-                                imageData.data[i] > 0 &&
+      // 将canvas的透明背景设置成白色
+      const imageData = context.getImageData(
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      )
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        // rgb大于250的透明度y均设置成0
+        if (
+          imageData.data[i] > 0 &&
                                 imageData.data[i + 1] > 0 &&
                                 imageData.data[i + 2] > 0
-                            ) {
-                                imageData.data[i + 3] = 200;
-                            }
-                        }
-                        context.putImageData(imageData, 0, 0);
-                         let baseImg = canvas.toDataURL("image/png");//返回base64
-                        if (typeof callback !== undefined) {
-                            if (callback) callback(baseImg);
-                        }
-                      img.remove();
-                    },
-                    false
-                );
-            }
+        ) {
+          imageData.data[i + 3] = 200
+        }
+      }
+      context.putImageData(imageData, 0, 0)
+      const baseImg = canvas.toDataURL('image/png')// 返回base64
+      if (typeof callback !== 'undefined') {
+        if (callback) callback(baseImg)
+      }
+      img.remove()
+    },
+    false
+  )
+}
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index 4178fd249..a59df02a9 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -29,229 +29,222 @@
 </template>
 
 <script>
-  import chart from '../../../page/dashboard/overview/chart';
-  import lineChartBlock from '../../../charts/line-chart-block';
-  import chartTable from '../../../charts/chart-table';
-  import bus from "../../../../libs/bus";
-  import axios from 'axios';
-  import ExpressionInfo from "../popData/expressionInfo";
-	export default {
-		name:"topoTooltip",
-    components:{
-      ExpressionInfo,
-      lineChartBlock,
-      chartTable,
+import lineChartBlock from '../../../charts/line-chart-block'
+import chartTable from '../../../charts/chart-table'
+import bus from '../../../../libs/bus'
+import ExpressionInfo from '../popData/expressionInfo'
+export default {
+  name: 'topoTooltip',
+  components: {
+    ExpressionInfo,
+    lineChartBlock,
+    chartTable
+  },
+  props: {
+    chartDataParent: {
+      type: Object
     },
-    props:{
-      chartDataParent:{
-        type:Object,
-      },
-      filterTime:{},
-      isChart:{
-        type:Boolean,
-        default:false,
+    filterTime: {},
+    isChart: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    chartDataParent: {
+      immediate: true,
+      handler (n) {
+        this.process(n)
       }
-    },
-    watch:{
-      chartDataParent:{
-        immediate: true,
-        handler(n){
-          this.process(n)
-        },
 
+    }
+  },
+  data () {
+    return {
+      tempDom: { height: 400, width: '' },
+      chartDataTemp: { id: 8832, prev: null, next: null, panelId: 0, title: '123', span: 12, height: 400, createAt: '2021-01-27 07:36:19', unit: 2, weight: 0, pid: null, buildIn: null, seq: null, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, threshold: '', url: '', nullType: 'connected' }, sync: null, asset: null, isLoaded: true, from: '__vue_devtool_undefined__', draggable: true, resizable: true, editable: true },
+      chartData: {},
+      filter: {
+        end_time: bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'),
+        panelId: 0,
+        searchName: '',
+        start_time: bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss')
       }
+    }
+  },
+  mounted () {
+    this.tempDomInit()
+  },
+  methods: {
+    tempDomInit () {
+      this.tempDom.width = 400
     },
-    data(){
-		  return{
-        tempDom: {height: 400, width: ""},
-        chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","url":"","nullType":"connected"},"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
-        chartData:{},
-        filter:{
-          end_time:bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),
-          panelId:0,
-          searchName:"",
-          start_time:bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-        }
+    process (item) {
+      const chartData = { ...this.chartDataTemp, ...item }
+      chartData.elements = []
+      chartData.expressArr.forEach((item1, index) => {
+        chartData.elements.push({
+          expression: item1,
+          legend: chartData.legends[index],
+          type: 'expert',
+          id: index,
+          buildIn: null,
+          seq: null
+        })
+      })
+      chartData.id = 0
+      chartData.param = {
+        legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' },
+        last: 0,
+        nullType: 'connected',
+        threshold: '',
+        url: '',
+        valueMapping: { mapping: [{ color: { bac: '#fff', text: '#000' }, text: '', value: '' }], type: 'text' },
+        statistics: chartData.aggregation
       }
+      chartData.span = 12
+      this.chartData = chartData
+      setTimeout(() => {
+        this.getChartData(chartData, 0)
+      })
     },
-    mounted(){
-		  this.tempDomInit();
-    },
-    methods:{
-      tempDomInit() {
-        let span = document.querySelector(".temp-dom");
-        this.tempDom.width = 400;
-      },
-      process(item){
-        let chartData={...this.chartDataTemp,...item};
-        chartData.elements=[]
-        chartData.expressArr.forEach((item1,index)=>{
-          chartData.elements.push({
-            expression:item1,
-            legend: chartData.legends[index],
-            type:"expert",
-            id:index,
-            buildIn:null,
-            seq:null,
-          })
-        });
-        chartData.id=0;
-        chartData.param={
-          legendValue:{"total":"off","min":"off","avg":"off","last":"off","max":"off"},
-          last:0,
-          nullType:"connected",
-          threshold:'',
-          url:'',
-          valueMapping:{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},
-          statistics:chartData.aggregation
-        };
-        chartData.span=12;
-        this.chartData=chartData;
-        setTimeout(()=>{
-          this.getChartData(chartData,0);
-        });
-
-      },
-      // 获取一个图表具体数据,图表信息，图表位置index
-      getChartData(chartInfo, pos, filterType) {
-        const chartItem = chartInfo;
-        const index = pos; // 指标
-          // 没有数据的设置提示信息暂无数据-针对每一个图
-          const len = chartItem.elements.length;
-          if (len === 0) {
-            this.$nextTick(() => {
-              if (this.$refs['editChart' + chartItem.type]) {
-                this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId, this.filter, []);
-              }
-            });
+    // 获取一个图表具体数据,图表信息，图表位置index
+    getChartData (chartInfo, pos, filterType) {
+      const chartItem = chartInfo
+      // 没有数据的设置提示信息暂无数据-针对每一个图
+      const len = chartItem.elements.length
+      if (len === 0) {
+        this.$nextTick(() => {
+          if (this.$refs['editChart' + chartItem.type]) {
+            this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId, this.filter, [])
+          }
+        })
+      } else {
+        /* let startTime = ''
+        let endTime = '' */
+        /* if (filterType === 'refresh') { // 刷新
+          const now = new Date(bus.computeTimezone(new Date().getTime()))
+          const origin = new Date(this.filter.end_time)
+          const numInterval = now.getTime() - origin.getTime()
+          if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+            startTime = this.getNewTime(this.filter.start_time, numInterval)
+            endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
           } else {
-            let startTime = '';
-            let endTime = '';
-            if (filterType === 'refresh') {//刷新
-              const now = new Date(bus.computeTimezone(new Date().getTime()));
-              const origin = new Date(this.filter.end_time);
-              const numInterval = now.getTime() - origin.getTime();
-              if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
-                startTime = this.getNewTime(this.filter.start_time, numInterval);
-                endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
-              } else {
-                startTime = this.filter.start_time;
-                endTime = this.filter.end_time;
-              }
-            } else if (filterType === 'showFullScreen') {//全屏时间查询
-              startTime = this.filter.start_time;
-              endTime = this.filter.end_time;
-              //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-            } else {
-              startTime = this.filter.start_time;
-              endTime = this.filter.end_time;
-            }
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+          }
+        } else if (filterType === 'showFullScreen') { // 全屏时间查询
+          startTime = this.filter.start_time
+          endTime = this.filter.end_time
+          // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+        } else {
+          startTime = this.filter.start_time
+          endTime = this.filter.end_time
+        } */
 
-            let step = bus.getStep(startTime, endTime);
-            setTimeout(()=>{
-              this.$nextTick(() => {
-                let res=chartItem.res;
-                if (res.length > 0) {
-                  let series = [];
-                  let singleStatRlt = '';
-                  let legend = [];
-                  let tableData = [];
-                  /*let sumData = {
+        setTimeout(() => {
+          this.$nextTick(() => {
+            const res = chartItem.res
+            if (res.length > 0) {
+              const series = []
+              const legend = []
+              const tableData = []
+              /* let sumData = {
                     name: 'sum',
                     data: [],
                     visible: true,
                     threshold: null,
-                  };*/
-                  let errorMsg = "";
-                  res.forEach((response, innerPos) => {
-                    if (response.status === 'success') {
-                      errorMsg = "";
-                      if (response.data.result) {
-                        // 循环处理每个elements下获取的数据
-                        response.data.result.forEach((queryItem, resIndex) => {
-                            let seriesItem = {
-                              theData: {
-                                name: '',
-                                symbol: 'emptyCircle',  //去掉点
-                                symbolSize: [2, 2],
-                                smooth: 0.2,  //曲线变平滑
-                                showSymbol: false,
-                                data: [],
-                                lineStyle: {
-                                  width: 1,
-                                  opacity: 0.9
-                                },
-                                animation: false,
-                                type: chartInfo.type,
-                              },
-                              metric_name: '',
-                            };
+                  }; */
+              let errorMsg = ''
+              res.forEach((response, innerPos) => {
+                if (response.status === 'success') {
+                  errorMsg = ''
+                  if (response.data.result) {
+                    // 循环处理每个elements下获取的数据
+                    response.data.result.forEach((queryItem, resIndex) => {
+                      let seriesItem = {
+                        theData: {
+                          name: '',
+                          symbol: 'emptyCircle', // 去掉点
+                          symbolSize: [2, 2],
+                          smooth: 0.2, // 曲线变平滑
+                          showSymbol: false,
+                          data: [],
+                          lineStyle: {
+                            width: 1,
+                            opacity: 0.9
+                          },
+                          animation: false,
+                          type: chartInfo.type
+                        },
+                        metric_name: ''
+                      }
 
-                            if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
-                              seriesItem.theData.markLine={
-                                silent: true,
-                                symbol:['circle','circle'],
-                                label:{
-                                  distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
-                                  formatter:function(params){
-                                    return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
-                                  }
-                                },
-                                lineStyle:{
-                                  color:'#d64f40',
-                                  width:2,
-                                  type:'dotted'
-                                },
-                                data: [{
-                                  yAxis: Number(chartInfo.param.threshold)
-                                }, ]
-                              }
+                      if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
+                        seriesItem.theData.markLine = {
+                          silent: true,
+                          symbol: ['circle', 'circle'],
+                          label: {
+                            distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
+                            formatter: function (params) {
+                              return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
                             }
-                            // 图表中每条线的名字,后半部分
-                            let host = '';//up,
-                            if (queryItem.metric.__name__) {
-                              host = `${queryItem.metric.__name__}{`;//up,
-                            }
-                            const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                            // 设置时间-数据格式对
-                            let tempArr = [];
-                            let dpsArr = [];
-                            tempArr = queryItem.values;
-                            dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                            dpsArr = dpsArr.map(item => {
-                              return [item[0], [item[1][0], Number(item[1][1])]]
-                            });
-                            // 判断是否有数据, && tagsArr.length > 0
-                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
-                              tagsArr.forEach((tag, i) => {
-                                if (tag !== '__name__') {
-                                  host += `${tag}="${queryItem.metric[tag]}",`;
-                                }
-                              });
-                              if (host.endsWith(',')) {
-                                host = host.substr(0, host.length - 1);
-                              }
-                              if (queryItem.metric.__name__) {
-                                host += "}";
-                              }
-                              if (!host || host === '') {
-                                host = chartItem.elements[innerPos].expression;
-                              }
-                              //处理legend别名
-                              let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                              if (!alias || alias === '') {
-                                alias = host;
-                              }
-                              legend.push({name: host+"-"+chartItem.elements[innerPos].id+"-" + resIndex, alias: alias});
-                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                          },
+                          lineStyle: {
+                            color: '#d64f40',
+                            width: 2,
+                            type: 'dotted'
+                          },
+                          data: [{
+                            yAxis: Number(chartInfo.param.threshold)
+                          }]
+                        }
+                      }
+                      // 图表中每条线的名字,后半部分
+                      let host = ''// up,
+                      if (queryItem.metric.__name__) {
+                        host = `${queryItem.metric.__name__}{`// up,
+                      }
+                      const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                      // 设置时间-数据格式对
+                      let tempArr = []
+                      let dpsArr = []
+                      tempArr = queryItem.values
+                      dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                      dpsArr = dpsArr.map(item => {
+                        return [item[0], [item[1][0], Number(item[1][1])]]
+                      })
+                      // 判断是否有数据, && tagsArr.length > 0
+                      if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
+                        tagsArr.forEach((tag, i) => {
+                          if (tag !== '__name__') {
+                            host += `${tag}="${queryItem.metric[tag]}",`
+                          }
+                        })
+                        if (host.endsWith(',')) {
+                          host = host.substr(0, host.length - 1)
+                        }
+                        if (queryItem.metric.__name__) {
+                          host += '}'
+                        }
+                        if (!host || host === '') {
+                          host = chartItem.elements[innerPos].expression
+                        }
+                        // 处理legend别名
+                        let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                        if (!alias || alias === '') {
+                          alias = host
+                        }
+                        legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
 
-                              seriesItem.theData.name = host +"-"+chartItem.elements[innerPos].id+"-"+ resIndex;
-                              //alert(seriesItem.theData.name);
-                              seriesItem.metric_name = seriesItem.theData.name;
-                              // 将秒改为毫秒
-                              //alert('table=='+JSON.stringify(queryItem))
-                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                                /*曲线汇总暂不需要
+                        seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                        // alert(seriesItem.theData.name);
+                        seriesItem.metric_name = seriesItem.theData.name
+                        // 将秒改为毫秒
+                        // alert('table=='+JSON.stringify(queryItem))
+                        seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                          /* 曲线汇总暂不需要
                                 if (sumData.data[dpsIndex]) {
                                   const sumNum = sumData.data[dpsIndex][1] || 0;
                                   sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
@@ -259,75 +252,75 @@
                                   sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
                                 }
                                 */
-                                let t_date = new Date(dpsItem[0] * 1000);
-                                let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                                tableData.push({//表格数据
-                                  // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                  // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                  element: {element: host, alias: alias},
-                                  time: timeTmp,//采集时间
-                                  value: dpsItem[1],//数值
-                                  data:[dpsItem[0] * 1000, dpsItem[1]]
-                                });
-                                return [dpsItem[0] * 1000, dpsItem[1]];
-                              });
-                              series.push(seriesItem.theData);
-                              seriesItem = null;
-                            }
-                          });
+                          const tData = new Date(dpsItem[0] * 1000)
+                          const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+                          tableData.push({ // 表格数据
+                            // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                            // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                            element: { element: host, alias: alias },
+                            time: timeTmp, // 采集时间
+                            value: dpsItem[1], // 数值
+                            data: [dpsItem[0] * 1000, dpsItem[1]]
+                          })
+                          return [dpsItem[0] * 1000, dpsItem[1]]
+                        })
+                        series.push(seriesItem.theData)
+                        seriesItem = null
                       }
-                    } else {
-                      if (response.msg) {
-                        //this.$message.error(response.msg);
-                        errorMsg = response.msg;
-                      } else if (response.error) {
-                        //this.$message.error(response.error);
-                        errorMsg = response.error;
-                      } else {
-                        //this.$message.error(response);
-                        errorMsg = response;
-                      }
-                    }
-                  });
-                  if (this.$refs['editChart' + chartItem.type]) {
-                    let chartData = {
-                      chartItem: chartItem,
-                      series: series,
-                      singleStatRlt: singleStatRlt,
-                      legend: legend,
-                      tableData: tableData,
-                      panelId: this.filter.panelId,
-                      filter: this.filter,
-                      filterType: filterType,
-                      errorMsg: errorMsg,
-                    }
-                    if (chartItem.type === 'table') {//表格
-                      this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,this.filter.panelId, this.filter, '', errorMsg);
-                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
-                      if (series.length && chartItem.type === 4) {//曲线汇总
-                        //series.push(sumData);//后续需要
-                      }
-                      this.$refs['editChart' + chartItem.type].setData(chartItem, series,this.filter.panelId, this.filter, legend, '', errorMsg);
-                    }
+                    })
                   }
                 } else {
-                  const type = chartItem.type;
-                  if (this.$refs['editChart' + chartItem.type] ) {
-                    if (type === 'table') {
-                      this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType);
-                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
-                      this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                        this.filter, filterType);
-                    }
+                  if (response.msg) {
+                    // this.$message.error(response.msg);
+                    errorMsg = response.msg
+                  } else if (response.error) {
+                    // this.$message.error(response.error);
+                    errorMsg = response.error
+                  } else {
+                    // this.$message.error(response);
+                    errorMsg = response
                   }
                 }
-              });
-            },100)
-          }
-      },
-    },
-	}
+              })
+              if (this.$refs['editChart' + chartItem.type]) {
+                /* const chartData = {
+                  chartItem: chartItem,
+                  series: series,
+                  singleStatRlt: singleStatRlt,
+                  legend: legend,
+                  tableData: tableData,
+                  panelId: this.filter.panelId,
+                  filter: this.filter,
+                  filterType: filterType,
+                  errorMsg: errorMsg
+                } */
+                if (chartItem.type === 'table') { // 表格
+                  this.$refs['editChart' + chartItem.type].setData(chartItem, tableData, this.filter.panelId, this.filter, '', errorMsg)
+                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                  if (series.length && chartItem.type === 4) { // 曲线汇总
+                    // series.push(sumData);//后续需要
+                  }
+                  this.$refs['editChart' + chartItem.type].setData(chartItem, series, this.filter.panelId, this.filter, legend, '', errorMsg)
+                }
+              }
+            } else {
+              const type = chartItem.type
+              if (this.$refs['editChart' + chartItem.type]) {
+                if (type === 'table') {
+                  this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
+                    this.filter, filterType)
+                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                  this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
+                    this.filter, filterType)
+                }
+              }
+            }
+          })
+        }, 100)
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -362,5 +355,4 @@
     }
   }
 
-
 </style>
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
index 1fbc49954..4ed39a69c 100644
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -55,123 +55,123 @@
 </template>
 
 <script>
-  import {getTopology} from "../../js/common";
+import { getTopology } from '../../js/common'
 
-  export default {
-    name:"topologyTopTool",
-    data(){
-      return {
-        option:{
-          lineName:'curve',
-          lineWidth:1,
-          fromArrow:'',
-          toArrow:'triangleSolid',
-          scale:100,
-          grid:false,
-          rule:false,
-        },
-        scaleNum:100,
-        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 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":"5 14,20 9,20 19",fill:'#000000',stroke:"",'stroke-width':"",name:'triangleSolid'},
-          {d:'M5 14 l85 0',"points":"5 14,20 9,20 19",fill:'#ffffff', stroke:"#000000",'stroke-width':"1",name:'triangle'},
-          {d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
-          {d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
-        ],
-        redoFlag:false,
+export default {
+  name: 'topologyTopTool',
+  data () {
+    return {
+      option: {
+        lineName: 'curve',
+        lineWidth: 1,
+        fromArrow: '',
+        toArrow: 'triangleSolid',
+        scale: 100,
+        grid: false,
+        rule: false
+      },
+      scaleNum: 100,
+      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 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: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
+        { d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', name: 'triangle' },
+        { d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
+        { d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
+      ],
+      redoFlag: false
+    }
+  },
+  props: {
+    selection: {
+      type: Object,
+      require: true
+    },
+    index: {
+      type: Number,
+      require: true
+    },
+    toolShow: {
+      type: Object,
+      require: true
+    },
+    cachesIndex: {
+      type: Number,
+      require: true
+    }
+  },
+  mounted () {
+    const dataOption = getTopology(this.index).data
+    Object.keys(this.option).forEach(key => {
+      if (key === 'scale') {
+        this.scaleNum = (JSON.stringify(dataOption[key]) ? dataOption[key] * 100 : this.scaleNum)
+      } else {
+        this.option[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.option[key])
       }
+    })
+  },
+  methods: {
+    // todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
+    changeOption (key) {
+      getTopology(this.index).data[key] = this.option[key]
+      getTopology(this.index).render()
     },
-    props:{
-      selection:{
-        type:Object,
-        require:true
-      },
-      index:{
-        type:Number,
-        require:true,
-      },
-      toolShow:{
-        type:Object,
-        require:true
-      },
-      cachesIndex:{
-        type:Number,
-        require:true,
+    undo () { // 撤销
+      getTopology(this.index).undo()
+      // if(!this.redoFlag){
+      //   this.$emit('redoIndexChange',getTopology(this.index).caches.index)
+      // }
+      // let a = getTopology(this.index).undo();
+      // console.log(a);
+      // setTimeout(()=>{
+      //   this.redoFlag=true;
+      // },200)
+    },
+    redo () { // 重做
+      getTopology(this.index).redo()
+    },
+    centerView () { // 居中显示
+      getTopology(this.index).centerView()
+    },
+    fitView () { // 自适应画布大小
+      getTopology(this.index).fitView()
+    },
+    changeScale (num) {
+      this.scaleNum += num
+      if (this.scaleNum < 25) {
+        this.scaleNum = 25
       }
+      if (this.scaleNum > 400) {
+        this.scaleNum = 400
+      }
+      this.scale(this.scaleNum)
     },
-    mounted(){
-      let dataOption=getTopology(this.index).data;
-      Object.keys(this.option).forEach(key=>{
-        if(key==='scale'){
-          this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
-        }else{
-          this.option[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.option[key]);
-        }
-      })
+    scale (val) {
+      this.scaleNum = val
+      getTopology(this.index).scaleTo(val / 100)
     },
-    methods:{
-      // todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
-      changeOption(key){
-        getTopology(this.index).data[key]=this.option[key];
-        getTopology(this.index).render();
-      },
-      undo(){//撤销
-        getTopology(this.index).undo();
-        // if(!this.redoFlag){
-        //   this.$emit('redoIndexChange',getTopology(this.index).caches.index)
-        // }
-        // let a = getTopology(this.index).undo();
-        // console.log(a);
-        // setTimeout(()=>{
-        //   this.redoFlag=true;
-        // },200)
-      },
-      redo(){//重做
-        getTopology(this.index).redo();
-      },
-      centerView(){//居中显示
-        getTopology(this.index).centerView();
-      },
-      fitView(){//自适应画布大小
-        getTopology(this.index).fitView();
-      },
-      changeScale(num){
-        this.scaleNum+=num;
-        if(this.scaleNum<25){
-          this.scaleNum=25
-        }
-        if(this.scaleNum>400){
-          this.scaleNum=400
-        }
-        this.scale(this.scaleNum)
-      },
-      scale(val){
-        this.scaleNum=val;
-        getTopology(this.index).scaleTo(val/100);
-      },
-      del(){
-        let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
-        this.$emit('del', delObj);
-      },
-      clear(){
-        let data={...getTopology(this.index).data};
-        data.pens=[];
-        getTopology(this.index).open({});
-      },
-      toolShowChange(attr){
-        this.$emit('toolShowChange',attr);
-      },
-      changeOpt(key,val){
+    del () {
+      const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
+      this.$emit('del', delObj)
+    },
+    clear () {
+      const data = { ...getTopology(this.index).data }
+      data.pens = []
+      getTopology(this.index).open({})
+    },
+    toolShowChange (attr) {
+      this.$emit('toolShowChange', attr)
+    },
+    changeOpt (key, val) {
 
-      }
     }
   }
+}
 </script>
 <style lang="scss">
   .scale-number-popover{
diff --git a/nezha-fronted/src/components/common/project/popData/Info.vue b/nezha-fronted/src/components/common/project/popData/Info.vue
index ed6466b55..3ed5548fd 100644
--- a/nezha-fronted/src/components/common/project/popData/Info.vue
+++ b/nezha-fronted/src/components/common/project/popData/Info.vue
@@ -41,39 +41,39 @@
 </template>
 
 <script>
-  export default {
-    name:"popDataInfo",
-    props:{
-      moduleId:{},
-      projectId:{},
-    },
-    watch:{},
-    data(){
-      return{
-        loading:true,
-        moduleInfo:{
-          project:{name:''},
-          name:'',
-          type:'http',
-          remark:'',
-          port:'',
-          path:'',
-          seq:'',
-        }
+export default {
+  name: 'popDataInfo',
+  props: {
+    moduleId: {},
+    projectId: {}
+  },
+  watch: {},
+  data () {
+    return {
+      loading: true,
+      moduleInfo: {
+        project: { name: '' },
+        name: '',
+        type: 'http',
+        remark: '',
+        port: '',
+        path: '',
+        seq: ''
       }
-    },
-    mounted(){
-      this.loading=true;
-      this.$get('/module',{id:this.moduleId}).then(res=>{
-        this.loading=false;
-        this.moduleInfo=res.data.list[0];
-      })
-    },
-    methods:{},
-    beforeDestroy(){
-
     }
+  },
+  mounted () {
+    this.loading = true
+    this.$get('/module', { id: this.moduleId }).then(res => {
+      this.loading = false
+      this.moduleInfo = res.data.list[0]
+    })
+  },
+  methods: {},
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/project/popData/Main.vue b/nezha-fronted/src/components/common/project/popData/Main.vue
index fa0c2ab5a..46ebcc257 100644
--- a/nezha-fronted/src/components/common/project/popData/Main.vue
+++ b/nezha-fronted/src/components/common/project/popData/Main.vue
@@ -65,76 +65,76 @@
 </template>
 
 <script>
-  import chartConfig from '../../../page/dashboard/overview/chartConfig';
-  import * as echarts from "echarts";
-  
-  var endpointChart;
-  var assetChart;
-	export default {
-		name:"popDataMain",
-    props:{
-		  moduleId:{},
-      projectId:{},
-    },
-    watch:{
-      moduleId(n){
-        if(n){
-          this.init();
+import chartConfig from '../../../page/dashboard/overview/chartConfig'
+import * as echarts from 'echarts'
+
+let endpointChart
+let assetChart
+export default {
+  name: 'popDataMain',
+  props: {
+    moduleId: {},
+    projectId: {}
+  },
+  watch: {
+    moduleId (n) {
+      if (n) {
+        this.init()
+      }
+    }
+  },
+  data () {
+    return {
+      moduleInfo: {
+        alertStat: {
+          P1: 0,
+          P3: 0,
+          P2: 0
+        },
+        assetStat: {
+          down: 0,
+          up: 0
+        },
+        endpointStat: {
+          down: 0,
+          up: 0
         }
       }
-    },
-    data(){
-		  return{
-        moduleInfo:{
-          alertStat:{
-            P1:0,
-            P3:0,
-            P2:0,
-          },
-          assetStat:{
-            down:0,
-            up:0,
-          },
-          endpointStat:{
-            down:0,
-            up:0,
-          },
-        }
-      }
-    },
-    mounted(){
-		  this.init()
-    },
-    methods:{
-		  init(){
-        this.$get('/module/stat',{id:this.moduleId}).then(res=>{
-          this.moduleInfo = res.data;
-          //console.info(this.moduleInfo);
-          endpointChart = echarts.init(document.querySelector("#chart--endpoint"));
-          assetChart = echarts.init(document.querySelector("#chart--asset"));
-          let endpointOption = chartConfig.getOption("topoPie"),
-            assetOption = chartConfig.getOption("topoPie");
-          endpointOption.series[0].label.formatter = this.moduleInfo.endpointStat.down+this.moduleInfo.endpointStat.up + "";
-          endpointOption.series[0].data = [
-            {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.endpointStat.up ? this.moduleInfo.endpointStat.up : 0},
-            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0},
-            {name: this.$t("asset.suspended"), value: this.moduleInfo.endpointStat.suspended ? this.moduleInfo.endpointStat.suspended : 0}
-          ];
-          endpointOption.title.show = false;
-          endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown"), this.$t("asset.suspended")];
-          assetOption.series[0].label.formatter = this.moduleInfo.assetStat.up+this.moduleInfo.assetStat.down + "";
-          assetOption.series[0].data = [
-            {name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.assetStat.up ? this.moduleInfo.assetStat.up : 0},
-            {name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.assetStat.down ? this.moduleInfo.assetStat.down : 0}
-          ];
-          assetOption.title.show = false;
-          assetOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
-          endpointChart.setOption(endpointOption, true);
-          assetChart.setOption(assetOption, true);
-        })
-      }
-    },
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      this.$get('/module/stat', { id: this.moduleId }).then(res => {
+        this.moduleInfo = res.data
+        // console.info(this.moduleInfo);
+        endpointChart = echarts.init(document.querySelector('#chart--endpoint'))
+        assetChart = echarts.init(document.querySelector('#chart--asset'))
+        const endpointOption = chartConfig.getOption('topoPie')
+        const assetOption = chartConfig.getOption('topoPie')
+        endpointOption.series[0].label.formatter = this.moduleInfo.endpointStat.down + this.moduleInfo.endpointStat.up + ''
+        endpointOption.series[0].data = [
+          { name: this.$t('dashboard.overview.asset.pingUp'), value: this.moduleInfo.endpointStat.up ? this.moduleInfo.endpointStat.up : 0 },
+          { name: this.$t('dashboard.overview.asset.pingDown'), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0 },
+          { name: this.$t('asset.suspended'), value: this.moduleInfo.endpointStat.suspended ? this.moduleInfo.endpointStat.suspended : 0 }
+        ]
+        endpointOption.title.show = false
+        endpointOption.legend.data = [this.$t('dashboard.overview.asset.pingUp'), this.$t('dashboard.overview.asset.pingDown'), this.$t('asset.suspended')]
+        assetOption.series[0].label.formatter = this.moduleInfo.assetStat.up + this.moduleInfo.assetStat.down + ''
+        assetOption.series[0].data = [
+          { name: this.$t('dashboard.overview.asset.pingUp'), value: this.moduleInfo.assetStat.up ? this.moduleInfo.assetStat.up : 0 },
+          { name: this.$t('dashboard.overview.asset.pingDown'), value: this.moduleInfo.assetStat.down ? this.moduleInfo.assetStat.down : 0 }
+        ]
+        assetOption.title.show = false
+        assetOption.legend.data = [this.$t('dashboard.overview.asset.pingUp'), this.$t('dashboard.overview.asset.pingDown')]
+        endpointChart.setOption(endpointOption, true)
+        assetChart.setOption(assetOption, true)
+      })
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -147,7 +147,7 @@
     .tooltip--row {
       position: relative;
       height: 70px;
-      
+
       .legend-value {
         font-size: 12px;
         color: #333333;
diff --git a/nezha-fronted/src/components/common/project/popData/alertTable.vue b/nezha-fronted/src/components/common/project/popData/alertTable.vue
index cab7bcb42..97b3c8921 100644
--- a/nezha-fronted/src/components/common/project/popData/alertTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/alertTable.vue
@@ -19,7 +19,7 @@
         <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
           <pick-time :refresh-data-func="getAlertList" v-model="searchTime" :use-chart-unit="false" :use-refresh="false" :default-pick="12" :show-empty="true"></pick-time>
           <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="true"></search-input>
+            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
           <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
                   <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
@@ -92,17 +92,17 @@
                     <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
               </span>
               <template v-else-if="item.prop == 'labels'" class="labels">
-                <span v-for="(item,i) in labelsSort(scope.row.labels)">
-              <span @mouseenter="labelHover(scope.row,scope.$index, item.label, true, $event)" @mouseleave="labelHover(scope.row,scope.$index, item.label, false)">
-                <nz-alert-tag
-                  :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
-                  :cursor-point="tagType(item.label) == 'info' ? false : true"
-                  :key="item.label"
-                  v-if="item.label != 'alertname' && item.label != 'severity'"
-                >
-                 {{item.value}}
-                </nz-alert-tag>
-              </span>
+                <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
+                  <span @mouseenter="labelHover(scope.row,scope.$index, item.label, true, $event)" @mouseleave="labelHover(scope.row,scope.$index, item.label, false)">
+                    <nz-alert-tag
+                      v-if="item.label != 'alertname' && item.label != 'severity'" :key="item.label" :cursor-point="tagType(item.label) == 'info' ? false : true"
+                      :label="item.label"
+                      :type="tagType(item.label)"
+                      style="margin: 5px 0 5px 5px;"
+                    >
+                     {{item.value}}
+                    </nz-alert-tag>
+                  </span>
                   <alertLabel
                     v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
                     :id="scope.row[item.label].id"
@@ -172,318 +172,317 @@
 </template>
 
 <script>
-  import bus from '@/libs/bus';
-  import axios from 'axios';
-  import nzAlertTag from '@/components/page/alert/nzAlertTag';
-  import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
-  import alertLabel from '@/components/common/alert/alertLabel'
-  export default {
-    name:"alertTable",
-    props:{
-      moduleId:{},
-      projectId:{},
-    },
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'alertRuleInfo':alertRuleInfo,
-      'alertLabel':alertLabel,
-    },
-    watch:{
-    },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
-          }
-        }
-      },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
+import bus from '@/libs/bus'
+import nzAlertTag from '@/components/page/alert/nzAlertTag'
+import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
+import alertLabel from '@/components/common/alert/alertLabel'
+export default {
+  name: 'alertTable',
+  props: {
+    moduleId: {},
+    projectId: {}
+  },
+  components: {
+    'nz-alert-tag': nzAlertTag,
+    alertRuleInfo: alertRuleInfo,
+    alertLabel: alertLabel
+  },
+  watch: {
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
         }
       }
     },
-    data(){
-      return{
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: this.$t("alert.alertName"),
-            prop: 'alertRule',
-            show: true,
-            width: 180
-          }, {
-            label: this.$t("alert.list.labels"),
-            prop: 'labels',
-            show: true,
-            NotSet:true,
-            minWidth:200
-          }, {
-            label: this.$t("alert.severity"),
-            prop: 'severity',
-            show: true,
-            width: 110,
-          }, {
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true,
-            minWidth:100
-          },  {
-            label: this.$t('alert.list.state'),
-            prop: 'state',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.startAt"),
-            prop: 'startAt',
-            show: true,
-            width: 150
-          },
-        ],
-        searchTime: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: this.$t('alert.alertName'),
-            type: 'input',
-            label: 'alertName',
-            disabled: false
-          }, /*{
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
+          }
+        }
+        return key + '：' + value
+      }
+    }
+  },
+  data () {
+    return {
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: this.$t('alert.alertName'),
+          prop: 'alertRule',
+          show: true,
+          width: 180
+        }, {
+          label: this.$t('alert.list.labels'),
+          prop: 'labels',
+          show: true,
+          NotSet: true,
+          minWidth: 200
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true,
+          minWidth: 100
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.startAt'),
+          prop: 'startAt',
+          show: true,
+          width: 150
+        }
+      ],
+      searchTime: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: this.$t('alert.alertName'),
+          type: 'input',
+          label: 'alertName',
+          disabled: false
+        }, /* {
             id: 3,
             name: this.$t('alert.list.type'),
             type: 'select',
             label: 'alertType',
             disabled: false
           }, */{
-            id: 20,
-            name: this.$t('alert.severity'),
-            type: 'selectString',
-            label: 'severity',
-            disabled: false
-          }, {
-            id: 21,
-            name: this.$t('asset.asset'),
-            type: 'asset',
-            label: 'asset',
-            disabled: false
-          }, {
-            id:22,
-            name: this.$t('project.project.project'),
-            type: 'project',
-            label: 'project',
-            disabled: false
-          }, {
-            id:23,
-            name: this.$t('project.module.module'),
-            type: 'module',
-            label: 'module',
-            disabled: false
-          }, {
-            id:24,
-            name: this.$t('project.endpoint.endpoint'),
-            type: 'input',
-            label: 'endpointId',
-            disabled: false
-          }, {
-            id:25,
-            name: this.$t('alert.list.state'),
-            type: 'select',
-            label: 'alertMessageState',
-            disabled: false
-          }],
-        },
-        tableData:[],
-        loading:false,
-        tableHeight:'100%',
-        searchLabel:{
+          id: 20,
+          name: this.$t('alert.severity'),
+          type: 'selectString',
+          label: 'severity',
+          disabled: false
+        }, {
+          id: 21,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('project.project.project'),
+          type: 'project',
+          label: 'project',
+          disabled: false
+        }, {
+          id: 23,
+          name: this.$t('project.module.module'),
+          type: 'module',
+          label: 'module',
+          disabled: false
+        }, {
+          id: 24,
+          name: this.$t('project.endpoint.endpoint'),
+          type: 'input',
+          label: 'endpointId',
+          disabled: false
+        }, {
+          id: 25,
+          name: this.$t('alert.list.state'),
+          type: 'select',
+          label: 'alertMessageState',
+          disabled: false
+        }]
+      },
+      tableData: [],
+      loading: false,
+      tableHeight: '100%',
+      searchLabel: {
 
-        },
-        deleteBox:{},
-        nowTime:''
-      }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted(){
-      this.getAlertList();
-    },
-    methods:{
-      getAlertList: function () {
-        this.loading=true;
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.$set(this.searchLabel, "moduleId", this.moduleId);
-        if(this.searchTime&& this.searchTime.length>1){
-          this.$set(this.searchLabel, "startAt", bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'));
-          this.$set(this.searchLabel, "endAt", bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'));
-        }else{
-          delete this.searchLabel.startAt
-          delete this.searchLabel.endAt
-        }
-        this.$get('alert/message', {...this.searchLabel}).then(response => {
-          this.loading=false;
-          if (response.code == 200) {
-            this.nowTime=this.utcTimeToTimezoneStr(response.time);
-            this.tableData = response.data.list;
-            this.tableData.forEach((item) => {
-              item.labels = JSON.parse(item.labels);
-            });
-            this.deleteBox.ids='';
-            this.pageObj.total = response.data.total;
-          }
-        });
       },
-      labelsSort:function(obj){
-        let buildIn=['asset','endpoint','module','project','datacenter']
-        let labels=JSON.parse(JSON.stringify(obj));
-        let result=[];
-        for(let key of buildIn){
-          if(key in labels){
-            result.push({label:key,value:labels[key]})
-            delete labels[key]
-          }
-        }
-        Object.keys(labels).sort().forEach(key=>{
-          result.push({label:key,value:labels[key]})
-        });
-        return result;
-      },
-      labelsClassName(row) {
-        if (row.column.label == this.$t("alert.list.labels")) {
-          return "alert-message-list-labels";
-        } else {
-          return "";
-        }
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getAlertList();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getAlertList();
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
-      // alertNmae鼠标划入
-      alertMessagehover(item, loading, e) {
-        if (e) {
-          let dom = e.currentTarget;
-          let position = dom.getBoundingClientRect();
-          this.$set(item, "position", position);
-        }
-        this.$set(item, "loading", loading);
-        //item.loading = true;
-        //this.$set(this.tableData,index,item);// 调用父组件
-      },
-      // label 鼠标划入
-      labelHover(item,index, type, loading, e){
-        if(this.labelToolTipDis(type)){
-          return;
-        }
-        if (e) {
-          let dom = e.currentTarget;
-          let position = dom.getBoundingClientRect();
-          this.$set(item[type], "position", position);
-        }
-        this.$set(item[type], "loading", loading);
-        this.$set(this.tableData,index,item);// 调用父组件
-      },
-      // label tooltip是否显示
-      labelToolTipDis(labelType){
-        switch(labelType){
-          case 'asset':
-          case 'module':
-          case 'project':
-            return false;
-          default: return true;
-        }
-      },
-      // Severity Label
-      returnSeverityLabel(key){
-        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
-      },
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.pageObj.orderBy=orderBy;
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAlertList();
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            if (item == "alertMessageState") {
-              this.$set(this.searchLabel, "state", searchObj[item]);
-            } else{
-              this.$set(this.searchLabel, item, searchObj[item]);
-            }
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.alertListTable&&this.$refs.alertListTable.bodyWrapper){
-          this.$refs.alertListTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getAlertList();
-      },
-
-      showExportDialog() {
-        this.importBox.show = true;
-      },
-    },
-    beforeDestroy(){
-
+      deleteBox: {},
+      nowTime: ''
     }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    this.getAlertList()
+  },
+  methods: {
+    getAlertList: function () {
+      this.loading = true
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      if (this.searchTime && this.searchTime.length > 1) {
+        this.$set(this.searchLabel, 'startAt', bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'))
+        this.$set(this.searchLabel, 'endAt', bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'))
+      } else {
+        delete this.searchLabel.startAt
+        delete this.searchLabel.endAt
+      }
+      this.$get('alert/message', { ...this.searchLabel }).then(response => {
+        this.loading = false
+        if (response.code == 200) {
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.tableData = response.data.list
+          this.tableData.forEach((item) => {
+            item.labels = JSON.parse(item.labels)
+          })
+          this.deleteBox.ids = ''
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    labelsSort: function (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of buildIn) {
+        if (key in labels) {
+          result.push({ label: key, value: labels[key] })
+          delete labels[key]
+        }
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+      })
+      return result
+    },
+    labelsClassName (row) {
+      if (row.column.label == this.$t('alert.list.labels')) {
+        return 'alert-message-list-labels'
+      } else {
+        return ''
+      }
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAlertList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAlertList()
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    // alertNmae鼠标划入
+    alertMessagehover (item, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // item.loading = true;
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    // label 鼠标划入
+    labelHover (item, index, type, loading, e) {
+      if (this.labelToolTipDis(type)) {
+        return
+      }
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item[type], 'position', position)
+      }
+      this.$set(item[type], 'loading', loading)
+      this.$set(this.tableData, index, item)// 调用父组件
+    },
+    // label tooltip是否显示
+    labelToolTipDis (labelType) {
+      switch (labelType) {
+        case 'asset':
+        case 'module':
+        case 'project':
+          return false
+        default: return true
+      }
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+    },
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.pageObj.orderBy = orderBy
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAlertList()
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(this.searchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.searchLabel, item, searchObj[item])
+          }
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.alertListTable && this.$refs.alertListTable.bodyWrapper) {
+        this.$refs.alertListTable.bodyWrapper.scrollTop = 0
+      }
+      this.getAlertList()
+    },
+
+    showExportDialog () {
+      this.importBox.show = true
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
@@ -539,4 +538,3 @@
   }
   /* end--table*/
 </style>
-
diff --git a/nezha-fronted/src/components/common/project/popData/assetTable.vue b/nezha-fronted/src/components/common/project/popData/assetTable.vue
index 0d046bd96..917943f08 100644
--- a/nezha-fronted/src/components/common/project/popData/assetTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/assetTable.vue
@@ -18,7 +18,7 @@
       <div class="top-tools">
         <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
           <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="true"></search-input>
+            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
           <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
           <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
@@ -108,251 +108,239 @@
 </template>
 
 <script>
-  import bus from '@/libs/bus';
-  import axios from 'axios';
-  import nzAlertTag from '@/components/page/alert/nzAlertTag';
-  import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
-  import alertLabel from '@/components/common/alert/alertLabel'
-  export default {
-    name:"assetTable",
-    props:{
-      moduleId:{},
-      projectId:{},
-    },
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'alertRuleInfo':alertRuleInfo,
-      'alertLabel':alertLabel,
-    },
-    watch:{
-    },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
-          }
-        }
-      },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
+export default {
+  name: 'assetTable',
+  props: {
+    moduleId: {},
+    projectId: {}
+  },
+  watch: {
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
         }
       }
     },
-    data(){
-      vm=this;
-      return{
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        mainTableHeight:'100%',
-        tableTitle: [
-          {
-            label: this.$t("asset.tableTitle.host"),
-            prop: 'HOST',
-            show: true,
-            width: 130,
-            fixed:'left'
-          },
-          {
-            label: this.$t("asset.tableTitle.device"),
-            prop: 'SN',
-            show: true,
-            width: 130
-          },
-           {
-            label: this.$t("asset.tableTitle.assetType"),
-            prop: 'assetType',
-            show: true,
-          },{
-            label: this.$t("asset.tableTitle.assetState"),
-            prop: 'state',
-            show: true,
-          }, {
-            label:this.$t('asset.tableTitle.assetPing'),
-            prop:'pingStatus',
-            show:true,
-          },{
-            label: this.$t("asset.tableTitle.alerts"),
-            prop: 'Alert',
-            show: true,
-            width: 100
-          },],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          },{
-            id: 20,
-            name: 'SN',
-            type: 'input',
-            label: 'sn',
-            disabled: false
-          },{
-            id: 21,
-            name: 'Host',
-            type: 'input',
-            label: 'host',
-            disabled: false
-          },{
-            id: 22,
-            name: this.$t("asset.state"),
-            type: 'select',
-            label: 'assetState',
-            disabled: false
-          },{
-            id: 23,
-            name: "pingStatus",
-            type: 'select',
-            label: 'pingStatus',
-            disabled: false
-          }],
-        },
-        tableData:[],
-        loading:false,
-        tableHeight:'100%',
-        searchLabel:{
-
-        },
-        deleteBox:{}
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
+          }
+        }
+        return key + '：' + value
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted(){
-      this.getTableTitle();
-      this.getAssetList();
-    },
-    methods:{
-      getAssetList: function () {
-        this.loading=true;
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.$set(this.searchLabel, "moduleId", this.moduleId);
-        this.$get('asset', {...this.searchLabel}).then(response => {
-          this.loading=false;
-          if (response.code == 200) {
-            this.tableData = response.data.list;
-            this.deleteBox.ids='';
-            this.pageObj.total = response.data.total;
-          }
-        });
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getAssetList();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getAssetList();
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.pageObj.orderBy=orderBy;
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAssetList();
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      messageStyle(e) {
-        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
-          if (e.row.alertNum > 0) {
-            return 'danger';
-          } else {
-            return 'success';
-          }
-        }
-        return '';
-      },
-      formatPingTime:function(str){
-        if(!str || str == ''){
-          return this.$t('asset.assetStatPre')+this.$t('asset.assetStatDown');
-        }
-        let ds='-';
-        let ts=':';
-        let time=new Date(str);
-        let year=time.getFullYear();
-        let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
-        let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());
-        let hours=time.getHours() > 9? time.getHours():('0'+time.getHours());
-        let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
-        let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
-        return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
-
-      },
-      getTableTitle(){
-        if(localStorage.getItem('nz-sys-asset-ping-switch')==='off'){
-          this.tableTitle=this.tableTitle.filter(item=>item.prop!=='pingStatus');
-        }
-      },
-      search(searchObj) {
-        let orderBy = '';
-        if(this.searchLabel.orderBy){
-          orderBy = this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.assetTable&& this.$refs.assetTable.bodyWrapper){
-          this.$refs.assetTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getAssetList();
-      },
-    },
-    beforeDestroy(){
-
     }
+  },
+  data () {
+    return {
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      mainTableHeight: '100%',
+      tableTitle: [
+        {
+          label: this.$t('asset.tableTitle.host'),
+          prop: 'HOST',
+          show: true,
+          width: 130,
+          fixed: 'left'
+        },
+        {
+          label: this.$t('asset.tableTitle.device'),
+          prop: 'SN',
+          show: true,
+          width: 130
+        },
+        {
+          label: this.$t('asset.tableTitle.assetType'),
+          prop: 'assetType',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.assetState'),
+          prop: 'state',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.assetPing'),
+          prop: 'pingStatus',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.alerts'),
+          prop: 'Alert',
+          show: true,
+          width: 100
+        }],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 20,
+          name: 'SN',
+          type: 'input',
+          label: 'sn',
+          disabled: false
+        }, {
+          id: 21,
+          name: 'Host',
+          type: 'input',
+          label: 'host',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('asset.state'),
+          type: 'select',
+          label: 'assetState',
+          disabled: false
+        }, {
+          id: 23,
+          name: 'pingStatus',
+          type: 'select',
+          label: 'pingStatus',
+          disabled: false
+        }]
+      },
+      tableData: [],
+      loading: false,
+      tableHeight: '100%',
+      searchLabel: {
+
+      },
+      deleteBox: {}
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    this.getTableTitle()
+    this.getAssetList()
+  },
+  methods: {
+    getAssetList: function () {
+      this.loading = true
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      this.$get('asset', { ...this.searchLabel }).then(response => {
+        this.loading = false
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.deleteBox.ids = ''
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAssetList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAssetList()
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.pageObj.orderBy = orderBy
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAssetList()
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    messageStyle (e) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+        if (e.row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      return ''
+    },
+    formatPingTime: function (str) {
+      if (!str || str == '') {
+        return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
+      }
+      const ds = '-'
+      const ts = ':'
+      const time = new Date(str)
+      const year = time.getFullYear()
+      const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
+      const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
+      const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
+      const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
+      return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
+    },
+    getTableTitle () {
+      if (localStorage.getItem('nz-sys-asset-ping-switch') === 'off') {
+        this.tableTitle = this.tableTitle.filter(item => item.prop !== 'pingStatus')
+      }
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.assetTable && this.$refs.assetTable.bodyWrapper) {
+        this.$refs.assetTable.bodyWrapper.scrollTop = 0
+      }
+      this.getAssetList()
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
@@ -382,4 +370,3 @@
   }
   /* end--table*/
 </style>
-
diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
index be6419661..a92de3799 100644
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -18,7 +18,7 @@
       <div class="top-tools">
         <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
           <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="true"></search-input>
+            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
@@ -53,7 +53,7 @@
               <span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
               <span v-else-if="item.prop == 'param'">
               <template v-if="scope.row.paramObj">
-                <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
+                <span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
               </template>
               <template v-else>-</template>
             </span>
@@ -94,248 +94,239 @@
 </template>
 
 <script>
-  import nzAlertTag from '@/components/page/alert/nzAlertTag';
-  import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
-  import alertLabel from '@/components/common/alert/alertLabel'
-  export default {
-    name:"endpointTable",
-    props:{
-      moduleId:{},
-      projectId:{},
-    },
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'alertRuleInfo':alertRuleInfo,
-      'alertLabel':alertLabel,
-    },
-    watch:{
-    },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
-          }
-        }
-      },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
+export default {
+  name: 'endpointTable',
+  props: {
+    moduleId: {},
+    projectId: {}
+  },
+  watch: {
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
         }
       }
     },
-    data(){
-      return{
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        mainTableHeight:'100%',
-        tableTitle: [
-          {
-            label: this.$t("project.endpoint.endpointId"),
-            prop: 'id',
-            show: true,
-            width: 150
-          },{
-            label: this.$t("project.endpoint.asset"),
-            prop: 'asset',
-            show: true,
-          },{
-            label: this.$t("project.endpoint.port"),
-            prop: 'port',
-            show: true,
-          },{
-            label: this.$t("project.endpoint.path"),
-            prop: 'path',
-            show: true,
-          },{
-            label: this.$t("alert.list.state"),
-            prop: 'state',
-            show: true,
-          },
-          // {
-          //   label: this.$t("project.endpoint.lastUpdate"),
-          //   prop: 'lastUpdate',
-          //   show: true,
-          // },
-        ],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: "ID",
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 11,
-            name: this.$t('asset.asset'),
-            type: 'asset',
-            label: 'asset',
-            disabled: false
-          }],
-        },
-        tableData:[],
-        loading:false,
-        tableHeight:'100%',
-        searchLabel:{
-
-        },
-        deleteBox:{}
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
+          }
+        }
+        return key + '：' + value
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted(){
-      this.getEndpointList();
-    },
-    methods:{
-      getEndpointList: function () {
-        this.loading=true;
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.$set(this.searchLabel, "moduleId", this.moduleId);
-        this.$get('endpoint', this.searchLabel).then(response => {
-          this.loading = false;
-          if (response.code === 200) {
-            // for (let i = 0; i < response.data.list.length; i++) {
-            //   try {
-            //     let tempObj = JSON.parse(response.data.list[i].param);
-            //     response.data.list[i].paramObj = [];
-            //     for (let k in tempObj) {
-            //       response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
-            //     }
-            //   } catch (err) {
-            //     //console.error(response.data.list[i], err);
-            //   }
-            // }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-          }
-        });
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getEndpointList();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getEndpointList();
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.pageObj.orderBy=orderBy;
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getEndpointList();
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      messageStyle(e) {
-        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
-          if (e.row.alertNum > 0) {
-            return 'danger';
-          } else {
-            return 'success';
-          }
-        }
-        return '';
-      },
-      formatPingTime:function(str){
-        if(!str || str == ''){
-          return this.$t('asset.assetStatPre')+this.$t('asset.assetStatDown');
-        }
-        let ds='-';
-        let ts=':';
-        let time=new Date(str);
-        let year=time.getFullYear();
-        let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
-        let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());
-        let hours=time.getHours() > 9? time.getHours():('0'+time.getHours());
-        let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
-        let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
-        return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
-
-      },
-      getStateErrorMsg(row) {
-        let errCodes = [230009, 230010, 230011];
-        if(row){
-          if(row.state == 0){
-            if(errCodes.find((item)=>{return row.stateInfo.code == item})){
-              return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
-            }else{
-              return row.stateInfo.msg;
-              this.$message.error('state code error');
-            }
-          }
-        }
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            if (item == "alertMessageState") {
-              this.$set(this.searchLabel, "state", searchObj[item]);
-            } else{
-              this.$set(this.searchLabel, item, searchObj[item]);
-            }
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.endpointTable){
-          this.$refs.endpointTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getEndpointList();
-      },
-    },
-    beforeDestroy(){
-
     }
+  },
+  data () {
+    return {
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      mainTableHeight: '100%',
+      tableTitle: [
+        {
+          label: this.$t('project.endpoint.endpointId'),
+          prop: 'id',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          show: true
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          show: true
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true
+        }
+        // {
+        //   label: this.$t("project.endpoint.lastUpdate"),
+        //   prop: 'lastUpdate',
+        //   show: true,
+        // },
+      ],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }]
+      },
+      tableData: [],
+      loading: false,
+      tableHeight: '100%',
+      searchLabel: {
+
+      },
+      deleteBox: {}
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    this.getEndpointList()
+  },
+  methods: {
+    getEndpointList: function () {
+      this.loading = true
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      this.$get('endpoint', this.searchLabel).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          // for (let i = 0; i < response.data.list.length; i++) {
+          //   try {
+          //     let tempObj = JSON.parse(response.data.list[i].param);
+          //     response.data.list[i].paramObj = [];
+          //     for (let k in tempObj) {
+          //       response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+          //     }
+          //   } catch (err) {
+          //     //console.error(response.data.list[i], err);
+          //   }
+          // }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getEndpointList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getEndpointList()
+    },
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.pageObj.orderBy = orderBy
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getEndpointList()
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    messageStyle (e) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
+        if (e.row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      return ''
+    },
+    formatPingTime: function (str) {
+      if (!str || str == '') {
+        return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
+      }
+      const ds = '-'
+      const ts = ':'
+      const time = new Date(str)
+      const year = time.getFullYear()
+      const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
+      const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
+      const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
+      const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
+      return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
+    },
+    getStateErrorMsg (row) {
+      const errCodes = [230009, 230010, 230011]
+      if (row) {
+        if (row.state == 0) {
+          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
+            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
+          } else {
+            this.$message.error('state code error')
+            return row.stateInfo.msg
+          }
+        }
+      }
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(this.searchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.searchLabel, item, searchObj[item])
+          }
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.endpointTable) {
+        this.$refs.endpointTable.bodyWrapper.scrollTop = 0
+      }
+      this.getEndpointList()
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
@@ -365,4 +356,3 @@
   }
   /* end--table*/
 </style>
-
diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
index 48fde2fb7..38bee7219 100644
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -12,56 +12,56 @@
 </template>
 
 <script>
-  export default {
-    name:"expressionInfo",
-    props:{
-      chartData:{
+export default {
+  name: 'expressionInfo',
+  props: {
+    chartData: {
 
-      },
-      filterTime:{},
     },
-    watch:{
-      chartData(){
-        this.expressionInfoData=[];
-        if(this.chartData.res.length>0){
-          this.chartData.res.forEach((item,index)=>{
-            if(item.status==='success'){
-              this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
-            }
-          });
-        }
-      }
-    },
-    data(){
-      return{
-        expressionInfoData:[]
-      }
-    },
-    mounted(){
-      if(this.chartData.res.length>0){
-        this.chartData.res.forEach((item,index)=>{
-          if(item.status==='success'){
-            this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
+    filterTime: {}
+  },
+  watch: {
+    chartData () {
+      this.expressionInfoData = []
+      if (this.chartData.res.length > 0) {
+        this.chartData.res.forEach((item, index) => {
+          if (item.status === 'success') {
+            this.expressionInfoData = this.expressionInfoData.concat(item.data.result)
           }
-        });
+        })
       }
-    },
-    methods:{
-      computeData(item){
-        if(item.level){
-          return this.chartData.valueMapping.find((item2)=>item.level===item2.level).color
-        } else {
-          return {
-            fill:'#ffffff',
-            text:'#000000',
-          }
-        }
-      }
-    },
-    beforeDestroy(){
-
     }
+  },
+  data () {
+    return {
+      expressionInfoData: []
+    }
+  },
+  mounted () {
+    if (this.chartData.res.length > 0) {
+      this.chartData.res.forEach((item, index) => {
+        if (item.status === 'success') {
+          this.expressionInfoData = this.expressionInfoData.concat(item.data.result)
+        }
+      })
+    }
+  },
+  methods: {
+    computeData (item) {
+      if (item.level) {
+        return this.chartData.valueMapping.find((item2) => item.level === item2.level).color
+      } else {
+        return {
+          fill: '#ffffff',
+          text: '#000000'
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 0b32571d8..674f084a7 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -80,7 +80,6 @@
             </div>
           </div>
 
-
           <topology-top-tool
             v-if="editTopologyFlag"
             :selection.sync="props"
@@ -93,8 +92,6 @@
             :toolShow="toolShow">
           </topology-top-tool>
 
-
-
         </span>
         <span class="float-right">
           <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
@@ -174,8 +171,6 @@
         <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 
-
-
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
         >
@@ -209,7 +204,7 @@
         </CanvasProps>
       </div>
       <!--所有节点上的小图标-->
-      <div v-for="(item,index) in nodesArr"
+      <div v-for="(item,index) in nodesArr" :key="index"
            :style="{position: 'absolute',top:item.rect.y - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
            v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
            class="network-pop"
@@ -223,7 +218,7 @@
           <i class="nz-icon nz-icon-model"></i>
         </i>
         <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)  @click="popClick(item.id)" -->
-        <div v-for="item1 in popData">
+        <div v-for="(item1, index) in popData" :key="index">
           <transition name="scaleTool">
             <i v-if="item.data.show"
                :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
@@ -238,13 +233,14 @@
         </div>
       </div>
       <!--提示未添加module id的块-->
-      <div v-for="(item,index) in notModuleIDArr"
+      <div v-for="(item, index) in notModuleIDArr"
+           :key="index"
            :style="{
-           position: 'absolute',
-           top:item.rect.y- 10 +'px',
-           left:item.rect.x - 10+'px',
-           transform:'scale('+(fromOverView?penToolTipScale:1)+')',
-         }"
+             position: 'absolute',
+             top:item.rect.y- 10 +'px',
+             left:item.rect.x - 10+'px',
+             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
+           }"
            v-if="editTopologyFlag&&!fromPrev"
       >
         <div class="module-rect-top" :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}"></div>
@@ -385,1706 +381,1679 @@
 </template>
 
 <script>
-  import {Topology,Node,Line,Rect,registerNode} from '@topology/core';
-  import * as FileSaver from 'file-saver';
-  import {
-    Tools,
-    canvasRegister,
-    imageTemp,
-    myShape,
-    myAnchors,
-    myIconRect,
-    myTextRect,
-    onChangeAnimate,
-    onChangeAnimateLine,
-    changeImage,
-    myCubec,
-    myCubeAnchors
-  } from './L5/services/canvas.js';
-  // 注册到画布
-  registerNode('rectangleImg',myShape,myAnchors,myIconRect,myTextRect);
-  registerNode('myCube',myCubec,myCubeAnchors,null,null);
-  import {getTopology,setTopology} from "../js/common";
-  import CanvasProps from './L5/CanvasProps';
-  import CanvasContextMenu from './L5//CanvasContextMenu';
-  import topologyTopTool from './L5//topologyTopTool';
-  import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
-  import popDataMain from './popData/Main'
-  import popDataInfo from './popData/Info'
-  import alertTable from "./popData/alertTable";
-  import assetTable from "./popData/assetTable";
-  import endpointTable from "./popData/endpointTable";
-  import ExpressionInfo from "./popData/expressionInfo";
-  import topoTooltip from "./L5/topoTooltip";
-  import {getMetricTypeValue} from '../js/tools'
-  import bus from "../../../libs/bus";
-  import topologyPrev from './topologyPrev'
-  import axios from 'axios';
+import { Topology, registerNode } from '@topology/core'
+import {
+  Tools,
+  canvasRegister,
+  imageTemp,
+  myShape,
+  myAnchors,
+  myIconRect,
+  myTextRect,
+  onChangeAnimate,
+  onChangeAnimateLine,
+  myCubec,
+  myCubeAnchors
+} from './L5/services/canvas.js'
+import { getTopology, setTopology } from '../js/common'
+import CanvasProps from './L5/CanvasProps'
+import topologyTopTool from './L5//topologyTopTool'
+import popDataMain from './popData/Main'
+import popDataInfo from './popData/Info'
+import alertTable from './popData/alertTable'
+import assetTable from './popData/assetTable'
+import endpointTable from './popData/endpointTable'
+import topoTooltip from './L5/topoTooltip'
+import { getMetricTypeValue } from '../js/tools'
+import bus from '../../../libs/bus'
+import topologyPrev from './topologyPrev'
+// 注册到画布
+registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-  const canvasOptions={
-    rotateCursor:'/img/rotate.cur',
-    translateKey:'None',
-    disableEmptyLine:false,
-    autoExpandDistance:0,
-    minScale:0.01,
-  };
-  let canvas;
-  export default {
-    name:'topologyL5',
-    data(){
-      return {
-        objChange:false,//project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-        chartDataInfo:{},
-        topoPrevData:{},//预览数据
-        imgInit:false,//判断图片是否加载完成
-        toolGroup:'基本形状',
-        editFlag:true,
-        tools:Tools,
-        props:{},
-        topologyLoading:false,
-        contextmenu:{
-          left:null,
-          top:null,
-          bottom:null
+const canvasOptions = {
+  rotateCursor: '/img/rotate.cur',
+  translateKey: 'None',
+  disableEmptyLine: false,
+  autoExpandDistance: 0,
+  minScale: 0.01
+}
+export default {
+  name: 'topologyL5',
+  data () {
+    return {
+      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
+      chartDataInfo: {},
+      topoPrevData: {}, // 预览数据
+      imgInit: false, // 判断图片是否加载完成
+      toolGroup: '基本形状',
+      editFlag: true,
+      tools: Tools,
+      props: {},
+      topologyLoading: false,
+      contextmenu: {
+        left: null,
+        top: null,
+        bottom: null
+      },
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      ],
+      topologyInfo: {
+        fontSize: 14,
+        align: 'left',
+        fontColor: '#000000',
+        opacity: 1,
+        name: ''
+      },
+      saveData: {},
+      oldTopologyData: '',
+      redoIndex: 0,
+      dataLength: 0,
+      editTopologyFlag: false,
+      searchTime: bus.getTimezontDateRange(),
+      activeNames: [],
+      topologyIndex: 0,
+      iconArray: [],
+      imgageLoading: false,
+      toolShow: {
+        node: true,
+        attr: true,
+        nodeCord: [0, 0],
+        attrCord: [0, 0],
+        height: 500
+      },
+      dragFlag: true,
+      modules: [],
+      allModules: [],
+      projectInfo: {
+        title: '',
+        id: '',
+        remark: '',
+        alertStat: [1, 2, 3],
+        moduleMum: 6,
+        loading: true
+      },
+      timer: null, // 处理project短时间呢频繁变更的定时器
+      timer2: null, // 处理平移画布显示iconState的定时器
+      timer3: null, // 处理tooltip的显示定时器
+      nodesArr: [],
+      notModuleIDArr: [],
+      popData: [
+        {
+          top: '-40px',
+          left: '-21px',
+          className: 'nz-icon-endpoint',
+          id: 'endpoint',
+          title: this.$t('project.topology.endpoint')
         },
-        filterTime:[
-          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
-        ],
-        topologyInfo:{
-          fontSize:14,
-          align:'left',
-          fontColor:"#000000",
-          opacity:1,
-          name:'',
-        },
-        saveData:{},
-        oldTopologyData:'',
-        redoIndex:0,
-        dataLength:0,
-        editTopologyFlag:false,
-        searchTime: bus.getTimezontDateRange(),
-        activeNames:[],
-        topologyIndex:0,
-        iconArray:[],
-        imgageLoading:false,
-        toolShow:{
-          node:true,
-          attr:true,
-          nodeCord:[0,0],
-          attrCord:[0,0],
-          height:500,
-        },
-        dragFlag:true,
-        modules:[],
-        allModules:[],
-        projectInfo:{
-          title:'',
-          id:'',
-          remark:'',
-          alertStat:[1,2,3],
-          moduleMum:6,
-          loading:true,
-        },
-        timer:null,//处理project短时间呢频繁变更的定时器
-        timer2:null,//处理平移画布显示iconState的定时器
-        timer3:null,//处理tooltip的显示定时器
-        nodesArr:[],
-        notModuleIDArr:[],
-        popData:[
-          {
-            top:'-40px',
-            left:'-21px',
-            className:'nz-icon-endpoint',
-            id:'endpoint',
-            title:this.$t('project.topology.endpoint')
-          },
-          {top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
-          {top:'-4px',left:'40px',className:'',id:'other',title:''},
-          {top:'30px',left:'19px',className:'',id:'other',title:''},
-          {top:'30px',left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
-          {top:'-4px',left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
-        ],
-        popDataShow:{
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        },
-        moduleId:'',
-        tooltipPosition:{
-          top:0,
-          left:0,
-          show:false,
-          height:400
-        },
-        chartData:{},
-        chartGetData:[],
-        penLineType:[
-          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:this.$t('project.topology.curve'),id:'curve'},
-          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:this.$t('project.topology.polyline'),id:'polyline'},
-          {d:'M5 14 l40 0',"stroke-dasharray":"",name:this.$t('project.topology.line'),id:'line'},
-          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-        ],
-        lineName:'curve',
-        cachesIndex:0,
-        projectInfo:{
-          title:'',
-          id:'',
-          remark:'',
-          alertStat:[1,2,3],
-          moduleMum:6,
-          loading:true,
-          total:0,
-        },
-        projectInfoShow:false,
-        projectAlertShow:false,
-        previewShow:false,
-        penId:undefined,
-        penToolTipScale:1,
-        oldScale:1,
-        uploadPicShow:false,
-        uploadPic:{
-          name:'',
-          unit:''
-        },
-        unitArr:[],
-      };
+        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
+        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+        { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
+      ],
+      popDataShow: {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      },
+      moduleId: '',
+      tooltipPosition: {
+        top: 0,
+        left: 0,
+        show: false,
+        height: 400
+      },
+      chartData: {},
+      chartGetData: [],
+      penLineType: [
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+      ],
+      lineName: 'curve',
+      cachesIndex: 0,
+      projectInfoShow: false,
+      projectAlertShow: false,
+      previewShow: false,
+      penId: undefined,
+      penToolTipScale: 1,
+      oldScale: 1,
+      uploadPicShow: false,
+      uploadPic: {
+        name: '',
+        unit: ''
+      },
+      unitArr: []
+    }
+  },
+  components: {
+    CanvasProps,
+    topologyTopTool,
+    popDataMain,
+    popDataInfo,
+    alertTable,
+    assetTable,
+    endpointTable,
+    topoTooltip,
+    topologyPrev
+  },
+  props: {
+    topologyIndexF: {
+      type: Number,
+      default: 0
     },
-    components:{
-      CanvasProps,
-      CanvasContextMenu,
-      topologyTopTool,
-      VueDraggableResizable,
-      popDataMain,
-      popDataInfo,
-      alertTable,
-      assetTable,
-      endpointTable,
-      ExpressionInfo,
-      topoTooltip,
-      topologyPrev,
+    obj: {},
+    showTopTools: {
+      type: Boolean,
+      default: true
     },
-    computed:{},
-    props:{
-      topologyIndexF:{
-        type:Number,
-        default:0,
-      },
-      obj:{},
-      showTopTools:{
-        type:Boolean,
-        default:true,
-      },
-      fromOverView:{
-        type:Boolean,
-        default:false,
-      },
-      fromPrev:{
-        type:Boolean,
-        default:false,
-      },
-      topoPrevDataS:{
+    fromOverView: {
+      type: Boolean,
+      default: false
+    },
+    fromPrev: {
+      type: Boolean,
+      default: false
+    },
+    topoPrevDataS: {
 
-      },
+    }
+  },
+  watch: {
+    topologyIndexF: {
+      immediate: true,
+      handler (n) {
+        this.topologyIndex = n
+      }
     },
-    watch:{
-      topologyIndexF:{
-        immediate:true,
-        handler(n){
-          this.topologyIndex=n;
-        }
-      },
-      obj:{
-        deep:true,
-        immediate:true,
-        handler(n){
-          if(n.id){
-            if( !this.objChange){
-              this.editTopologyFlag=false;
-              this.topologyLoading=true;
-              this.projectInfoShow=false;
-              this.projectAlertShow=false;
-              if(n.id){
-                this.getProjectData(n);
-              }
-              this.topologyLoading=true;
-              this.init();
-              this.timer=null
-              this.objChange=true;
-            }else{
-              if(!this.timer){
-                this.timer=setInterval(()=>{
-                  if(this.objChange){return}
-                  this.editTopologyFlag=false;
-                  this.topologyLoading=true;
-                  this.projectInfoShow=false;
-                  this.projectAlertShow=false;
-                  if(n.id){
-                    this.getProjectData(n);
-                  }
-                  clearTimeout(this.timer);
-                  this.timer=null;
-                  this.objChange=true;
-                  this.topologyLoading=true;
-                  this.init();
-                },100)
-              }else{
-                clearTimeout(this.timer);
-                this.timer=setInterval(()=>{
-                  if(this.objChange){return}
-                  this.editTopologyFlag=false;
-                  this.topologyLoading=true;
-                  this.projectInfoShow=false;
-                  this.projectAlertShow=false;
-                  if(n.id){
-                    this.getProjectData(n);
-                  }
-                  clearTimeout(this.timer);
-                  this.timer=null;
-                  this.objChange=true;
-                  this.topologyLoading=true;
-                  this.init();
-                },100)
-              }
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n.id) {
+          if (!this.objChange) {
+            this.editTopologyFlag = false
+            this.topologyLoading = true
+            this.projectInfoShow = false
+            this.projectAlertShow = false
+            if (n.id) {
+              this.getProjectData(n)
+            }
+            this.topologyLoading = true
+            this.init()
+            this.timer = null
+            this.objChange = true
+          } else {
+            if (!this.timer) {
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            } else {
+              clearTimeout(this.timer)
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
             }
-
           }
         }
       }
-    },
-    computed:{},
-    created(){
-      canvasRegister();
-      if(process.client){
-        document.onclick=event=>{
-          this.contextmenu={
-            left:null,
-            top:null,
-            bottom:null
-          };
-        };
+    }
+  },
+  computed: {},
+  created () {
+    canvasRegister()
+    if (process.client) {
+      document.onclick = event => {
+        this.contextmenu = {
+          left: null,
+          top: null,
+          bottom: null
+        }
       }
+    }
+  },
+  mounted () {
+    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+      this.addNodeInit()
+    }
+    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+    window.addEventListener('resize', this.winResize)
+  },
+  methods: {
+    init () {
+      canvasOptions.on = this.onMessage
+      this.reload()
     },
-    created(){
-    },
-    mounted(){
-      if(!this.fromOverView){//从overview来的 加载相应图片 优化首页加载速度
-        this.addNodeInit();
-      }
-      document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
-      window.addEventListener('resize',this.winResize)
-    },
-    methods:{
-      init(){
-        canvasOptions.on=this.onMessage;
-        this.reload();
-      },
 
-      reload(){
-        this.topologyLoading=true;
-        this.getTopologyData().then((data)=>{
-          this.openTopologyData(data).then(()=>{
-            //获取对应的值 给节点 连线添加对应动画
-            this.lineName=data.lineName?data.lineName:this.lineName;
-            this.chartGetData=[];
-            let axiosArr=[];
-            let promiseArr=[];
-            let self=this;
-            let pensPromise=(pen, arr,index)=>{
-              return new Promise(function(resolve, reject) {
-                Promise.all(arr).then((res)=>{
-                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
-                  self.setAnimation(pen,self.chartGetData[index].res);
-                  resolve()
-                });
-              });
-            };
-            let endTime=this.filterTime[1];
-            let startTime=this.filterTime[0];
-            let step=bus.getStep(startTime,endTime);
-            data.pens&&data.pens.forEach((item,index)=>{
-              this.chartGetData.push({id:item.id,res:[]});
-              let arr=item.data.expressArr.map((ele)=>{
-                let query=encodeURIComponent(ele);
-                if(!query){
-                  return new Promise(resolve=>{
-                    resolve({data:"",status:'no query'});
+    reload () {
+      this.topologyLoading = true
+      this.getTopologyData().then((data) => {
+        this.openTopologyData(data).then(() => {
+          // 获取对应的值 给节点 连线添加对应动画
+          this.lineName = data.lineName ? data.lineName : this.lineName
+          this.chartGetData = []
+          const axiosArr = []
+          const promiseArr = []
+          const self = this
+          const pensPromise = (pen, arr, index) => {
+            return new Promise(function (resolve, reject) {
+              Promise.all(arr).then((res) => {
+                self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
+                self.setAnimation(pen, self.chartGetData[index].res)
+                resolve()
+              })
+            })
+          }
+          const endTime = this.filterTime[1]
+          const startTime = this.filterTime[0]
+          const step = bus.getStep(startTime, endTime)
+          data.pens && data.pens.forEach((item, index) => {
+            this.chartGetData.push({ id: item.id, res: [] })
+            const arr = item.data.expressArr.map((ele) => {
+              let query = encodeURIComponent(ele)
+              if (!query) {
+                return new Promise(resolve => {
+                  resolve({ data: '', status: 'no query' })
+                })
+              }
+              query += '&nullType=' + 'connected'
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            axiosArr.push({ item, arr })
+            promiseArr.push(pensPromise(item, arr, index))
+          })
+          Promise.all(promiseArr).then((res) => {
+            getTopology(this.topologyIndex).open(data)
+            getTopology(this.topologyIndex).lock(1)
+            this.objChange = false
+            let flag = false
+            const position = {
+              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+            }
+            this.oldScale = getTopology(this.topologyIndex).data.scale
+            getTopology(this.topologyIndex).data.pens.forEach(item => {
+              if (flag) {
+                return
+              }
+              if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                getTopology(this.topologyIndex).fitView(20)
+                flag = true
+              }
+            })
+            getTopology(this.topologyIndex).centerView(20)
+            this.penToolTipScale = getTopology(this.topologyIndex).data.scale
+            setTimeout(() => {
+              getTopology(this.topologyIndex).data.pens.forEach(item => {
+                if (item.animatePlay) {
+                  item.stopAnimate()
+                  setTimeout(() => {
+                    item.startAnimate()
                   })
                 }
-                query+='&nullType='+'connected';
-                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-              });
-              axiosArr.push({item,arr});
-              promiseArr.push(pensPromise(item,arr,index))
-            });
-            Promise.all(promiseArr).then((res)=>{
-              getTopology(this.topologyIndex).open(data);
-              getTopology(this.topologyIndex).lock(1);
-              this.objChange=false;
-              let flag=false;
-              let position={
-                x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-                y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-              };
-              this.oldScale=getTopology(this.topologyIndex).data.scale;
-              getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                if(flag){
-                  return
-                }
-                if(item.rect.ex>position.x || item.rect.ey>position.y){
-                  getTopology(this.topologyIndex).fitView(20);
-                  flag=true
-                }
-              });
-              getTopology(this.topologyIndex).centerView(20);
-              this.penToolTipScale = getTopology(this.topologyIndex).data.scale;
-              setTimeout(()=>{
-                getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                  if(item.animatePlay){
-                    item.stopAnimate();
-                    setTimeout(()=>{
-                      item.startAnimate()
-                    })
-                  }
-                },100);
-              })
-              // if(this.fromPrev){
-              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-              // }
-              // getTopology(this.topologyIndex).fitView();
-              this.oldTopologyData=JSON.stringify(getTopology(this.topologyIndex).data)
-              this.getNodesArr();
-            });
+              }, 100)
+            })
+            // if(this.fromPrev){
+            //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+            // }
+            // getTopology(this.topologyIndex).fitView();
+            this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+            this.getNodesArr()
           })
-        });
-      },
-
-      dateChange() {
-        let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
-        this.setSearchTime(nowTimeType.type,nowTimeType.value);
-        this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-       this.reload();
-      },
-      setSearchTime(type,val){//设置searchTime
-        if(type==='minute'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "m");
-        }else if(type==='hour'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "h");
-        }else if(type==='date'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "d");
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
-      },
-      //打开topology数据
-      openTopologyData(data){
-        return new Promise(resolve=>{
-         if(!getTopology(this.topologyIndex)){
-           let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
-           canvas.open(data);
-           setTopology(this.topologyIndex,canvas);
-         }else{
-           getTopology(this.topologyIndex).open(data);
-         }
-          this.topologyLoading=false;
-          if(!getTopology(this.topologyIndex).data.name){
-            getTopology(this.topologyIndex).data.name=this.obj.name;
-          }
-          getTopology(this.topologyIndex).data.projectId=this.obj.id;
-          getTopology(this.topologyIndex).lock(1);
-
-          this.getModule()//获取module
-          resolve()
         })
-      },
-      //获取topology数据
-      getTopologyData(){
-        return new Promise(resolve=>{
-          if(this.fromPrev){
-            resolve(this.topoPrevDataS)
-          }
-          this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
-            let data=res.data.topo;
-            if(!res.data.topo || !data.pens){
-              data={
-                bkColor:'#FFFFFF',
-                gridSize:10,
-                gridColor:'#ededed',
-                lineWidth:1,
-                ruleColor:"#4e4e4e"
-              };
-              this.projectInfoShow=true;
-              this.projectAlertShow=true;
-              this.saveData={...data};
-              this.topologyInfo.name=this.obj.name;
-              resolve(data);
-            }else{
-              this.topologyInfo={
-                fontSize:data.data.fontSize,
-                align:data.data.align,
-                fontColor:data.data.fontColor,
-                opacity:data.data.opacity,
-                name:data.name
-              };
-              if(this.fromOverView){//优化从首页来的加载速度
-                let arr=data.pens.filter(item=>!item.type);
-                this.addNodeInit(arr);
-              }
-              let timer=setInterval(()=>{
-                if(!this.imgInit){
-                  return
-                }
-                clearInterval(timer);
-                let promiseArr=[];
-                let self=this;
-                // for(let i=0;i<data.pens.length;i++){
-                //   let line=data.pens[i]
-                //   if(line.type===1){
-                //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
-                //      data.pens.splice(i, 1);
-                //      i--;
-                //    }
-                //   }
-                // }
-                data.pens.forEach((item=>{
-                  if(item.type===0&&item.data.imageId){
-                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
-                  }
-                 if(item.type===0){
-                   promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
-                 }else{
-                   promiseArr.push({type:1})
-                 }
-                }));
+      })
+    },
 
-                if(!data.data){
-                  this.projectInfoShow=true;
-                  this.projectAlertShow=true;
-                } else if(!JSON.stringify(data.data.projectInfo)){
-                  this.projectInfoShow=true;
-                  this.projectAlertShow=true;
-                } else{
-                  this.projectInfoShow=data.data.projectInfo;
-                  this.projectAlertShow=data.data.alertInfo;
-                }
-                if(!data.bkImage){
-                  data.bkImage=undefined;
-                }
-                Promise.all(promiseArr).then(res=>{
-                  res.forEach((response,index)=>{
-                    let item=data.pens[index];
-                      if(item.type===0){
-                        item.data.state=response.data;
-                        item.data.state.asset=false;
-                        item.data.state.endpoint=false;
-                        item.data.state.alert=false;
-                        if(item.data.state.assetStat.down>0){
-                          item.data.state.asset=true;
-                        }
-                        if(item.data.state.endpointStat.down>0){
-                          item.data.state.endpoint=true;
-                        }
-                        if(item.data.state.alertStat.P1> 0 || item.data.state.alertStat.P3>0 || item.data.state.alertStat.P2>0){
-                          item.data.state.alert=true;
-                        }
-                        item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
-                      }
-                  });
-                  self.saveData={...data};
-                  resolve(data);
-                });
-              },100)
+    dateChange () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.reload()
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 打开topology数据
+    openTopologyData (data) {
+      return new Promise(resolve => {
+        if (!getTopology(this.topologyIndex)) {
+          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          canvas.open(data)
+          setTopology(this.topologyIndex, canvas)
+        } else {
+          getTopology(this.topologyIndex).open(data)
+        }
+        this.topologyLoading = false
+        if (!getTopology(this.topologyIndex).data.name) {
+          getTopology(this.topologyIndex).data.name = this.obj.name
+        }
+        getTopology(this.topologyIndex).data.projectId = this.obj.id
+        getTopology(this.topologyIndex).lock(1)
+
+        this.getModule()// 获取module
+        resolve()
+      })
+    },
+    // 获取topology数据
+    getTopologyData () {
+      return new Promise(resolve => {
+        if (this.fromPrev) {
+          resolve(this.topoPrevDataS)
+        }
+        this.$get('/project/topo', { projectId: this.obj.id }).then(res => {
+          let data = res.data.topo
+          if (!res.data.topo || !data.pens) {
+            data = {
+              bkColor: '#FFFFFF',
+              gridSize: 10,
+              gridColor: '#ededed',
+              lineWidth: 1,
+              ruleColor: '#4e4e4e'
             }
-          })
-        });
-      },
-      //赋值动画
-      setAnimation(pen,res){// 根据所有res的状态 赋值动画
-        let maxLevel=0;
-        if(res.length>0){
-          res.forEach((response,innerPos)=>{
-            if(response.status!=='success'){
-             return
+            this.projectInfoShow = true
+            this.projectAlertShow = true
+            this.saveData = { ...data }
+            this.topologyInfo.name = this.obj.name
+            resolve(data)
+          } else {
+            this.topologyInfo = {
+              fontSize: data.data.fontSize,
+              align: data.data.align,
+              fontColor: data.data.fontColor,
+              opacity: data.data.opacity,
+              name: data.name
             }
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                pen.data.valueMapping.forEach((item,index)=>{
-                  if(item.value==='base'){return}
-                  if( queryItem.showValue >item.value){
-                    queryItem.level=item.level;
-                    if(maxLevel<item.level){
-                      maxLevel=item.level
+            if (this.fromOverView) { // 优化从首页来的加载速度
+              const arr = data.pens.filter(item => !item.type)
+              this.addNodeInit(arr)
+            }
+            const timer = setInterval(() => {
+              if (!this.imgInit) {
+                return
+              }
+              clearInterval(timer)
+              const promiseArr = []
+              const self = this
+              // for(let i=0;i<data.pens.length;i++){
+              //   let line=data.pens[i]
+              //   if(line.type===1){
+              //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
+              //      data.pens.splice(i, 1);
+              //      i--;
+              //    }
+              //   }
+              // }
+              data.pens.forEach(item => {
+                if (item.type === 0 && item.data.imageId) {
+                  item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
+                }
+                if (item.type === 0) {
+                  promiseArr.push(this.$get('/module/stat', { id: item.data.moduleId }))
+                } else {
+                  promiseArr.push({ type: 1 })
+                }
+              })
+
+              if (!data.data) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else if (!JSON.stringify(data.data.projectInfo)) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else {
+                this.projectInfoShow = data.data.projectInfo
+                this.projectAlertShow = data.data.alertInfo
+              }
+              if (!data.bkImage) {
+                data.bkImage = undefined
+              }
+              Promise.all(promiseArr).then(res => {
+                res.forEach((response, index) => {
+                  const item = data.pens[index]
+                  if (item.type === 0) {
+                    item.data.state = response.data
+                    item.data.state.asset = false
+                    item.data.state.endpoint = false
+                    item.data.state.alert = false
+                    if (item.data.state.assetStat.down > 0) {
+                      item.data.state.asset = true
                     }
+                    if (item.data.state.endpointStat.down > 0) {
+                      item.data.state.endpoint = true
+                    }
+                    if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
+                      item.data.state.alert = true
+                    }
+                    item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
                   }
                 })
+                self.saveData = { ...data }
+                resolve(data)
               })
-            }
-          })
-        }
-        if(maxLevel!==0){
-          if(pen.type===0){// 判断valueMapping 给相应的状态
-            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-          if(selLevel){
-            pen.fontColor=selLevel.color.text;
-            pen.fillStyle=selLevel.color.fill;
-            pen.strokeStyle=selLevel.color.line;
-            pen.bkType=0;
+            }, 100)
           }
-            onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
-          }else if(pen.type===1){// 判断valueMapping 给相应的状态
-            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-            if(selLevel){
-              pen.animateColor=selLevel.color.fill;
-              pen.strokeStyle=selLevel.color.line;
-              pen.animateType=selLevel.animateType;
-              pen.fontColor=selLevel.color.text;
-            }
-            onChangeAnimateLine(pen,pen.animateType);
-          }
-        } else {
-          if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
-            onChangeAnimate(pen,pen.animateType);
-          }else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
-            onChangeAnimateLine(pen,pen.animateType);
-          }
-        }
-      },
-      computeData(res,type,pen){//处理别名 以及 根据type显示对应的值
-        if(res.length>0){
-          res.forEach((response,innerPos)=>{
-            if(response.status!=='success'){
-              return
-            }
-
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                // 图表中每条线的名字,后半部分
-                let host = '';//up,
-                if (queryItem.metric.__name__) {
-                  host = `${queryItem.metric.__name__}{`;//up,
-                }
-                const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                // 设置时间-数据格式对
-                let tempArr = [];
-                let dpsArr = [];
-                tempArr = queryItem.values;
-                dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                dpsArr = dpsArr.map(item => {
-                  return [item[0], [item[1][0], Number(item[1][1])]]
-                });
-                // 判断是否有数据, && tagsArr.length > 0
-                if (dpsArr.length) {
-                  tagsArr.forEach((tag, i) => {
-                    if (tag !== '__name__') {
-                      host += `${tag}="${queryItem.metric[tag]}",`;
-                    }
-                  });
-                  if (host.endsWith(',')) {
-                    host = host.substr(0, host.length - 1);
-                  }
-                  if (queryItem.metric.__name__) {
-                    host += "}";
-                  }
-                  if (!host || host === '') {
-                    host = pen.data.expressArr[innerPos];
-                  }
-                  //处理legend别名
-                  let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]);
-                  if (!alias || alias === '') {
-                    alias = host;
-                  }
-                  queryItem.legend={name: host+"-"+pen.data.legends[innerPos]+"-" + resIndex, alias: alias};
-                  queryItem.showValue= getMetricTypeValue(queryItem.values,type);
-                  // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                }
-              });
-            }
-
-          })
-        }
-        return res
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
-      },
-      //获取project Info
-      getProjectData(n){
-        //获取projectInfo
-        this.projectInfo.loading=true;
-        this.$get('project/info', {id:n.id}).then(response => {
-          if (response.code === 200) {
-            this.projectInfo.loading=false;
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
-            this.projectInfo.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2];
-            if(!this.projectInfo.total){
-              this.projectInfo.total=0
-            }
-          }
-        });
-      },
-      // Severity Label
-      returnSeverityLabel(key){
-        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
-      },
-      //获取module
-      getModule(){
-        this.projectInfo.loading=true;
-        this.$get('project/info',{id:this.obj.id}).then(response=>{
-          if(response.code===200){
-            this.projectInfo.loading=false;
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
-            this.allModules=response.data.module;
-            this.modulesDiff()
-          }
-        });
-      },
-
-      getNodesArr(){
-        if(!getTopology(this.topologyIndex))  return;
-        this.nodesArr=getTopology(this.topologyIndex).data.pens.filter(item=>{
-          if(!item.data){
-            item.data={
-              moduleId:'',
-              moduleName:'',
-              show:false,
-              error:false,
-              expressArr:[],
-            }
-          }
-          return item.type===0
-        });
-        // this.nodesArr=this.nodesArr.map(item=>{
-        //   if(!item.data){
-        //     item.data={
-        //       moduleId:'',
-        //       moduleName:'',
-        //       show:false,
-        //       error:false,
-        //       expressArr:[],
-        //     }
-        //   }
-        //   return {
-        //     rect:item.rect,
-        //     data:item.data
-        //   }
-        // });
-        //打开动画 是否更新顶部图标
-        this.nodesArr=JSON.parse(JSON.stringify(this.nodesArr));
-      },
-
-      modelTopClick(item,index){
-
-      },
-      //摘除已选择的module
-      modulesDiff(data){
-        this.modules=this.allModules;
-        if(getTopology(this.topologyIndex).data.pens){
-          getTopology(this.topologyIndex).data.pens.forEach(item=>{
-            if(item.type==0){
-              this.modules=this.modules.filter(item1=>item.data.moduleId!==item1.id)
-            }
-          })
-        }
-        if(data&&data.data&&data.data.moduleId){
-          this.modules.unshift({id:data.data.moduleId,name:data.data.moduleName});
-        }
-      },
-
-      //显示module的工具
-      showNodeTools(index,pen){
-        this.nodesArr.forEach((item,i)=>{
-          item.data.show=i===index;
         })
-      },
-
-      //具体内容点击
-      nodeTools(node,tool){
-        this.moduleId=node.data.moduleId;
-        if(tool.id==='total'){
-          this.popDataShowUpdate('',false,node);
-          return
-        }
-        setTimeout(()=>{
-          this.popDataShowUpdate(tool.id,false,node)
-        },100)
-      },
-
-      popDataShowUpdate(key,flag,node){//key 显示对应的弹窗 flag是否不显示工具栏
-        this.popDataShow={
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        };
-        if(key==='total'){
-          this.chartDataInfo={...node.data,...this.chartGetData.find(item=>item.id===node.id)};
-        }
-        this.$nextTick(()=>{
-          this.popDataShow[key]=true;
-        });
-        if(flag){ // 处理关闭后 缩放后显示工具按钮的问题
-          this.moduleId='';
-          this.showNodeTools('');
-        }
-        if(key==='asset'||key==='alert'||key==='endpoint'){
-          this.showNodeTools('');
-        }
-      },
-
-      /*topology 方法*/
-      onDrag(event,node){
-        this.dragFlag=false;
-        setTimeout(()=>{
-          this.dragFlag=true;
-        },100);
-        event.dataTransfer.setData('Text',JSON.stringify({...node.data,data:{imageId:node.data.imageId}}));
-      },
-      dragFlagChange(node){
-        getTopology(this.topologyIndex).addNode(
-          {
-            ...node.data,
-            rect:{
-              ...node.data.rect,
-              x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/2-50,
-              y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight/2-50
-            },
-            data:{imageId:node.data.imageId}
-          });
-        setTimeout(()=>{
-          this.dragFlag=true;
-        },100);
-      },
-
-      onMessage(event,data,e){
-        // console.log('onMessage',event,data);
-        // console.log(getTopology(this.topologyIndex))
-        // this.notModuleIDArr=[];
-        if(data){
-          this.notModuleIDArr.forEach(item=>{
-            if(item.id===data.id){
-              item.rect=data.rect
-            }
-          })
-        }
-        if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
-          if(data.type===0&& !data.data.moduleId){
-            data.data={
-              ...data.data,
-              moduleId:'',
-              moduleName:'',
-              show:false,
-              error:false,
-              animatePlay:false,
-              fillStyle:data.fillStyle,
-              strokeStyle:data.strokeStyle,
-              gradientColor:"#bae7ff",
-              gradientType:0,
-              lineWidth:this.nodeDefaultWidth(data.name),
-              iconToolState:true,
-              //chart 配置项
-              valueMapping:[{
-                color:{
-                  line:'#000000',
-                  fill:'#ffffff',
-                  text:'#000000',
-                },
-                value:'base',
-                animateType:'base',
-                level:0,
-                base:true,
-              }],
-              valueMappingSort:'asc',
-              expressArr:[""],
-              legends:[""],
-              tooltipShow:true,
-              panelName:'topologyName',
-              unit:2,
-              type:'line',
-              displayChart:true,
-              aggregation:'last',
-              title:'',
-              url:'',
-            }
-          }else if(data.type==1&& !data.data){
-            //连线是否自动计算锚点
-            // data.manualCps=true;
-            data.animateColor='#FA901C';
-            data.data={
-              animatePlay:false,
-              strokeStyle:data.strokeStyle,
-              animateColor:data.animateColor,
-              arrowColor:"#00000",
-              fromArrowColor:"#00000",
-              toArrowColor:"#00000",
-              lineWidth:1,
-              //chart 配置项
-              valueMapping:[{
-                color:{
-                  line:'#000000',
-                  fill:'#ffffff',
-                  text:'#000000',
-                },
-                value:'base',
-                animateType:'base',
-                level:0,
-                base:true,
-              }],
-              valueMappingSort:'asc',/*desc*/
-              expressArr:[""],
-              legends:[""],
-              tooltipShow:true,
-              panelName:'topologyName',
-              unit:2,
-              type:'line',
-              displayChart:true,
-              aggregation:'last',
-              title:'',
-              moduleName:'',
-              url:'',
-            };
+      })
+    },
+    // 赋值动画
+    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+      let maxLevel = 0
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
           }
-          if(data.type===0||data.type===1){
-            data.lineWidth=data.data.lineWidth;
-          }
-        }
-
-        switch(event){
-          case 'moveInNode':
-          case 'moveInLine':
-            if(this.timer3){
-              clearTimeout(this.timer3);
-              this.timer3=null
-            }
-            this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
-            this.tooltipPosition.show=false;
-            setTimeout(()=>{
-              this.tooltipPosition.show=true;
-              let ePosition=window.ePosition;
-              let boxWidth=document.getElementsByClassName('page')[0].offsetWidth;
-              let boxHeight=document.getElementsByClassName('page')[0].offsetHeight;
-              this.tooltipPosition.left=ePosition.layerX+20;
-              this.tooltipPosition.top=ePosition.layerY;
-              this.$nextTick(()=>{
-                if(this.$refs['topoTooltip']){
-                  if((boxWidth/2)>ePosition.layerX){
-                    this.tooltipPosition.left=ePosition.layerX+20;
-                  }else {
-                    this.tooltipPosition.left=ePosition.layerX - 20 - this.$refs['topoTooltip'].offsetWidth;
-                  }
-                  if(boxHeight>(ePosition.layerY+this.$refs['topoTooltip'].offsetHeight)){
-                    this.tooltipPosition.top=ePosition.layerY;
-                  }else {
-                    this.tooltipPosition.top=ePosition.layerY - this.$refs['topoTooltip'].offsetHeight;
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              pen.data.valueMapping.forEach((item, index) => {
+                if (item.value === 'base') { return }
+                if (queryItem.showValue > item.value) {
+                  queryItem.level = item.level
+                  if (maxLevel < item.level) {
+                    maxLevel = item.level
                   }
                 }
               })
-            },100);
-            break;
-          case 'moveOutNode':
-          case 'moveOutLine':
-            // this.tooltipPosition.show=false;
-            // return
-            if(!this.timer3){
-              this.timer3=setTimeout(()=>{
-                this.tooltipPosition.show=false;
-                this.timer3=null
-              },50)
-            }else{
-              clearTimeout(this.timer3);
-              this.timer3=setTimeout(()=>{
-                this.tooltipPosition.show=false;
-                this.timer3=null
-              },50)
-            }
-            break;
+            })
+          }
+        })
+      }
+      if (maxLevel !== 0) {
+        if (pen.type === 0) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.fontColor = selLevel.color.text
+            pen.fillStyle = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.bkType = 0
+          }
+          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.animateColor = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.animateType = selLevel.animateType
+            pen.fontColor = selLevel.color.text
+          }
+          onChangeAnimateLine(pen, pen.animateType)
         }
-        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-        setTimeout(()=>{
-          switch(event){
-            case 'node':
-            case 'addNode':
-              this.modulesDiff(data);
-              if(data.data.expressArr.length===0&&event!=='node'){
-                data.data.expressArr.push('');
-                data.data.legends.push('');
+      } else {
+        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimate(pen, pen.animateType)
+        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      }
+    },
+    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              // 图表中每条线的名字,后半部分
+              let host = ''// up,
+              if (queryItem.metric.__name__) {
+                host = `${queryItem.metric.__name__}{`// up,
               }
-              this.props={
-                node:data,
-                line:null,
-                multi:false,
-                expand:this.props.expand,
-                nodes:null,
-                locked:data.locked,
-                pen:data,
-                pens:null,
-              };
-              this.$nextTick(()=>{
-                if(this.$refs.CanvasProps){
-                  if(this.penId!==data.id){
-                    this.$refs.CanvasProps.tab='1';
+              const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+              // 设置时间-数据格式对
+              let dpsArr = []
+              dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+              dpsArr = dpsArr.map(item => {
+                return [item[0], [item[1][0], Number(item[1][1])]]
+              })
+              // 判断是否有数据, && tagsArr.length > 0
+              if (dpsArr.length) {
+                tagsArr.forEach((tag, i) => {
+                  if (tag !== '__name__') {
+                    host += `${tag}="${queryItem.metric[tag]}",`
                   }
-                  this.penId=data.id;
+                })
+                if (host.endsWith(',')) {
+                  host = host.substr(0, host.length - 1)
                 }
-              });
-              break;
-            case 'line':
-            case 'addLine':
-              this.props={
-                node:null,
-                line:data,
-                multi:false,
-                nodes:null,
-                locked:data.locked,
-                pen:data,
-                pens:null,
-              };
-              this.$nextTick(()=>{
-                if(this.$refs.CanvasProps){
-                  if(this.penId!==data.id){
-                    this.$refs.CanvasProps.tab='1';
+                if (queryItem.metric.__name__) {
+                  host += '}'
+                }
+                if (!host || host === '') {
+                  host = pen.data.expressArr[innerPos]
+                }
+                // 处理legend别名
+                let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
+                if (!alias || alias === '') {
+                  alias = host
+                }
+                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
+                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
+                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+              }
+            })
+          }
+        })
+      }
+      return res
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取project Info
+    getProjectData (n) {
+      // 获取projectInfo
+      this.projectInfo.loading = true
+      this.$get('project/info', { id: n.id }).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
+          if (!this.projectInfo.total) {
+            this.projectInfo.total = 0
+          }
+        }
+      })
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+    },
+    // 获取module
+    getModule () {
+      this.projectInfo.loading = true
+      this.$get('project/info', { id: this.obj.id }).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.allModules = response.data.module
+          this.modulesDiff()
+        }
+      })
+    },
+
+    getNodesArr () {
+      if (!getTopology(this.topologyIndex)) return
+      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+        if (!item.data) {
+          item.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            expressArr: []
+          }
+        }
+        return item.type === 0
+      })
+      // this.nodesArr=this.nodesArr.map(item=>{
+      //   if(!item.data){
+      //     item.data={
+      //       moduleId:'',
+      //       moduleName:'',
+      //       show:false,
+      //       error:false,
+      //       expressArr:[],
+      //     }
+      //   }
+      //   return {
+      //     rect:item.rect,
+      //     data:item.data
+      //   }
+      // });
+      // 打开动画 是否更新顶部图标
+      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+    },
+
+    modelTopClick (item, index) {
+
+    },
+    // 摘除已选择的module
+    modulesDiff (data) {
+      this.modules = this.allModules
+      if (getTopology(this.topologyIndex).data.pens) {
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (item.type == 0) {
+            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
+          }
+        })
+      }
+      if (data && data.data && data.data.moduleId) {
+        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
+      }
+    },
+
+    // 显示module的工具
+    showNodeTools (index, pen) {
+      this.nodesArr.forEach((item, i) => {
+        item.data.show = i === index
+      })
+    },
+
+    // 具体内容点击
+    nodeTools (node, tool) {
+      this.moduleId = node.data.moduleId
+      if (tool.id === 'total') {
+        this.popDataShowUpdate('', false, node)
+        return
+      }
+      setTimeout(() => {
+        this.popDataShowUpdate(tool.id, false, node)
+      }, 100)
+    },
+
+    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
+      this.popDataShow = {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      }
+      if (key === 'total') {
+        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
+      }
+      this.$nextTick(() => {
+        this.popDataShow[key] = true
+      })
+      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
+        this.moduleId = ''
+        this.showNodeTools('')
+      }
+      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
+        this.showNodeTools('')
+      }
+    },
+
+    /* topology 方法 */
+    onDrag (event, node) {
+      this.dragFlag = false
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+    },
+    dragFlagChange (node) {
+      getTopology(this.topologyIndex).addNode(
+        {
+          ...node.data,
+          rect: {
+            ...node.data.rect,
+            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
+          },
+          data: { imageId: node.data.imageId }
+        })
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+    },
+
+    onMessage (event, data, e) {
+      // console.log('onMessage',event,data);
+      // console.log(getTopology(this.topologyIndex))
+      // this.notModuleIDArr=[];
+      if (data) {
+        this.notModuleIDArr.forEach(item => {
+          if (item.id === data.id) {
+            item.rect = data.rect
+          }
+        })
+      }
+      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
+        if (data.type === 0 && !data.data.moduleId) {
+          data.data = {
+            ...data.data,
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            animatePlay: false,
+            fillStyle: data.fillStyle,
+            strokeStyle: data.strokeStyle,
+            gradientColor: '#bae7ff',
+            gradientType: 0,
+            lineWidth: this.nodeDefaultWidth(data.name),
+            iconToolState: true,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc',
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            url: ''
+          }
+        } else if (data.type == 1 && !data.data) {
+          // 连线是否自动计算锚点
+          // data.manualCps=true;
+          data.animateColor = '#FA901C'
+          data.data = {
+            animatePlay: false,
+            strokeStyle: data.strokeStyle,
+            animateColor: data.animateColor,
+            arrowColor: '#00000',
+            fromArrowColor: '#00000',
+            toArrowColor: '#00000',
+            lineWidth: 1,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc', /* desc */
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            moduleName: '',
+            url: ''
+          }
+        }
+        if (data.type === 0 || data.type === 1) {
+          data.lineWidth = data.data.lineWidth
+        }
+      }
+
+      switch (event) {
+        case 'moveInNode':
+        case 'moveInLine':
+          if (this.timer3) {
+            clearTimeout(this.timer3)
+            this.timer3 = null
+          }
+          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
+          this.tooltipPosition.show = false
+          setTimeout(() => {
+            this.tooltipPosition.show = true
+            const ePosition = window.ePosition
+            const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
+            this.tooltipPosition.left = ePosition.layerX + 20
+            this.tooltipPosition.top = ePosition.layerY
+            this.$nextTick(() => {
+              if (this.$refs.topoTooltip) {
+                if ((boxWidth / 2) > ePosition.layerX) {
+                  this.tooltipPosition.left = ePosition.layerX + 20
+                } else {
+                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                }
+                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.layerY
+                } else {
+                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                }
+              }
+            })
+          }, 100)
+          break
+        case 'moveOutNode':
+        case 'moveOutLine':
+          // this.tooltipPosition.show=false;
+          // return
+          if (!this.timer3) {
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          } else {
+            clearTimeout(this.timer3)
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          }
+          break
+      }
+      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+      setTimeout(() => {
+        switch (event) {
+          case 'node':
+          case 'addNode':
+            this.modulesDiff(data)
+            if (data.data.expressArr.length === 0 && event !== 'node') {
+              data.data.expressArr.push('')
+              data.data.legends.push('')
+            }
+            this.props = {
+              node: data,
+              line: null,
+              multi: false,
+              expand: this.props.expand,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'line':
+          case 'addLine':
+            this.props = {
+              node: null,
+              line: data,
+              multi: false,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'multi':
+            this.props = {
+              node: null,
+              line: null,
+              multi: true,
+              nodes: data.length > 1 ? data : null,
+              locked: this.getLocked({ nodes: data }),
+              pen: null,
+              pens: data.length > 1 ? data : null
+            }
+            break
+          case 'space':
+            this.penId = undefined
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          case 'moveOut':
+            break
+          case 'moveNodes':
+          case 'resizeNodes':
+            if (data.length > 1) {
+              this.props = {
+                node: null,
+                line: null,
+                multi: true,
+                nodes: data,
+                locked: this.getLocked({ nodes: data }),
+                pen: null,
+                pens: null
+              }
+            } else {
+              this.props = {
+                node: data[0],
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: data[0],
+                pens: null
+              }
+            }
+            break
+          case 'resize': {
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            this.toolShow.attrCord = [domRect.width - 350, 0]
+            this.toolShow.height = domRect.height
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            break
+          }
+          case 'scale': {
+            if (this.$refs.topTool) {
+              this.$refs.topTool.option.scale = data
+            }
+            break
+          }
+          case 'locked': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+          case 'delete': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+        }
+        switch (event) {
+          case 'node':
+          case 'line':
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.moduleId = ''
+            this.showNodeTools('')
+            this.popDataShowUpdate('', false)
+            if (!this.editTopologyFlag) {
+              getTopology(this.topologyIndex)
+            }
+            break
+        }
+        switch (event) {
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.getNodesArr()
+            // if(!this.timer2){
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }else{
+            //   clearTimeout(this.timer2);
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }
+            break
+        }
+      }, 0)
+    },
+
+    getLocked (data) {
+      let locked = true
+      if (data.nodes && data.nodes.length) {
+        for (const item of data.nodes) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+      if (locked && data.lines) {
+        for (const item of data.lines) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+
+      return locked
+    },
+
+    onUpdateProps (node) {
+      // 如果是node属性改变，需要传入node，重新计算node相关属性值
+      // 如果是line属性改变，无需传参
+      getTopology(this.topologyIndex).updateProps(node)
+    },
+
+    handleAvatarSuccess () {
+
+    },
+    beforeAvatarUpload (file, fileList) {
+      const this_ = this
+      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+
+      if (!isJPG) {
+        this.$message.error(this_.$t('project.topology.imgFormat'))
+        return false
+      }
+      // if (!isLt2M) {
+      //   this.$message.error( this_.$t('project.topology.imgSize'));
+      //   return false;
+      // }
+      const isSize = new Promise(function (resolve, reject) {
+        const width = 100
+        const height = 100
+        const _URL = window.URL || window.webkitURL
+        const img = new Image()
+        img.onload = function () {
+          const valid = img.width > width && img.height > height
+          valid ? resolve() : reject()
+        }
+        img.src = _URL.createObjectURL(file.raw)
+      }).then(() => {
+        if (isJPG) {
+          this.file = file.raw
+        }
+        return file.raw
+      }, () => {
+        this.$message.error(this_.$t('project.topology.imgMeasure'))
+        return Promise.reject()
+      })
+      return false
+    },
+
+    toolShowChange (attr) {
+      this.toolShow[attr] = !this.toolShow[attr]
+    },
+    /* topology 方法 */
+    end (v) {
+
+    },
+    /* tools 方法 */
+
+    imgUpload () {
+      const this_ = this
+      if (!this.uploadPic.unit) {
+        this.$message({
+          message: this_.$t('project.topology.unitError'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.file) {
+        this.$message({
+          message: this_.$t('project.topology.imgError'),
+          type: 'error'
+        })
+        return
+      }
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.file)
+      if (this.uploadPic.name) {
+        form.append('name', this.uploadPic.name)
+      } else {
+        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+      }
+      form.append('unit', this.uploadPic.unit)
+      this.$post('/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.uploadPicShow = false
+          this.dealImg(`/project/topo/icon/${res.data.id}`).then((data) => {
+            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+            if (group) {
+              group.children.push({
+                ...imageTemp,
+                data: {
+                  ...imageTemp.data,
+                  text: res.data.imageName,
+                  image: data,
+                  imageId: res.data.id,
+                  unit: this.uploadPic.unit
+                }
+              })
+            } else {
+              this.tools.push({
+                group: this.uploadPic.unit,
+                children: [{
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit
                   }
-                  this.penId=data.id;
-                }
-              });
-              break;
-            case 'multi':
-              this.props={
-                node:null,
-                line:null,
-                multi:true,
-                nodes:data.length>1?data:null,
-                locked:this.getLocked({nodes:data}),
-                pen:null,
-                pens:data.length>1?data:null,
-              };
-              break;
-            case 'space':
-              this.penId=undefined;
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break;
-            case 'moveOut':
-              break;
-            case 'moveNodes':
-            case 'resizeNodes':
-              if(data.length>1){
-                this.props={
-                  node:null,
-                  line:null,
-                  multi:true,
-                  nodes:data,
-                  locked:this.getLocked({nodes:data}),
-                  pen:null,
-                  pens:null,
-                };
-              }else{
-                this.props={
-                  node:data[0],
-                  line:null,
-                  multi:false,
-                  nodes:null,
-                  locked:false,
-                  pen:data[0],
-                  pens:null,
-                };
-              }
-              break;
-            case 'resize':
-              let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-              this.toolShow.attrCord=[domRect.width-350,0];
-              this.toolShow.height=domRect.height;
-              if(getTopology(this.topologyIndex)){
-                getTopology(this.topologyIndex).canvasPos=domRect;
-              }
-              break;
-            case 'scale':
-              if(this.$refs.topTool){
-                this.$refs.topTool.option.scale=data;
-              }
-              break;
-            case 'locked':
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break;
-            case "delete":
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break
-          }
-          switch(event){
-            case 'node':
-            case 'line':
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.moduleId='';
-              this.showNodeTools('');
-              this.popDataShowUpdate('',false);
-              if(!this.editTopologyFlag){
-                getTopology(this.topologyIndex)
-              }
-              break;
-          }
-          switch(event){
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.getNodesArr();
-              // if(!this.timer2){
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }else{
-              //   clearTimeout(this.timer2);
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }
-              break;
-          }
-        },0);
-      },
-
-      getLocked(data){
-        let locked=true;
-        if(data.nodes&&data.nodes.length){
-          for(const item of data.nodes){
-            if(!item.locked){
-              locked=false;
-              break;
+                }]
+              })
             }
-          }
+          })
+        } else {
+          this.$message.error(res.msg)
         }
-        if(locked&&data.lines){
-          for(const item of data.lines){
-            if(!item.locked){
-              locked=false;
-              break;
-            }
-          }
+      })
+    },
+
+    delImg (item) {
+      this.$delete('/project/topo/icon?ids=' + item.data.imageId).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.addNodeInit()
+        } else {
+          this.$message.error(res.msg)
         }
+      })
+    },
 
-        return locked;
-      },
-
-      onUpdateProps(node){
-        // 如果是node属性改变，需要传入node，重新计算node相关属性值
-        // 如果是line属性改变，无需传参
-        getTopology(this.topologyIndex).updateProps(node);
-      },
-
-      handleAvatarSuccess(){
-
-      },
-      beforeAvatarUpload(file,fileList){
-        let this_=this;
-        let isJPG=(file.raw.type==='image/jpeg'||file.raw.type==='image/png');
-
-        const isLt2M=file.size/1024/1024<2;
-
-        if(!isJPG){
-          this.$message.error(this_.$t('project.topology.imgFormat'));
-          return false;
-        }
-        // if (!isLt2M) {
-        //   this.$message.error( this_.$t('project.topology.imgSize'));
-        //   return false;
-        // }
-        const isSize=new Promise(function(resolve,reject){
-          let width=100;
-          let height=100;
-          let _URL=window.URL||window.webkitURL;
-          let img=new Image();
-          img.onload=function(){
-            let valid=img.width>width&&img.height>height;
-            valid?resolve():reject();
-          }
-          img.src=_URL.createObjectURL(file.raw);
-        }).then(()=>{
-          if(isJPG){
-            this.file=file.raw;
-          }
-          return file.raw;
-        },()=>{
-          this.$message.error(this_.$t('project.topology.imgMeasure'));
-          return Promise.reject();
-        });
-        return false;
-      },
-
-      toolShowChange(attr){
-        this.toolShow[attr]= !this.toolShow[attr]
-      },
-      /*topology 方法*/
-      end(v){
-
-      },
-      /*tools 方法*/
-
-      imgUpload(){
-        let this_=this;
-        if(!this.uploadPic.unit){
-          this.$message({
-            message: this_.$t("project.topology.unitError"),
-            type: 'error'
-          });
-          return
-        }
-        if(!this.file) {
-          this.$message({
-            message: this_.$t("project.topology.imgError"),
-            type: 'error'
-          });
-          return
-        }
-        this.upload();
-      },
-      upload(){
-        let form=new FormData();
-        form.append("file",this.file);
-        if(this.uploadPic.name){
-          form.append("name",this.uploadPic.name)
-        }else{
-          form.append("name",this.file.name.substring(0,this.file.name.lastIndexOf(".")))
-        }
-        form.append("unit",this.uploadPic.unit);
-        this.$post('/project/topo/icon',form,{'Content-Type':'multipart/form-data'}).then(res=>{
-          if(res.code==200){
-            this.$message({duration:2000,type:'success',message:this.$t("tip.saveSuccess")});
-            this.uploadPicShow=false;
-            this.dealImg(`/project/topo/icon/${res.data.id}`).then((data)=>{
-              let group= this.tools.find(tool=>tool.group===this.uploadPic.unit);
-              if(group){
+    addNodeInit (imgidList) {
+      if (!this.fromOverView) {
+        this.$get('/project/topo/icon').then(res => {
+          this.imgageLoading = true
+          // this.tools[1].children=[];
+          const imgArr = []
+          const promiseArr = []
+          res.data.list.forEach((item, index) => {
+            item.imageName = item.name
+            delete item.name
+            promiseArr.push(this.dealImg(`/project/topo/icon/${item.id}`))
+            imgArr.push({ ...item })
+          })
+          Promise.all(promiseArr).then((res2) => {
+            this.iconArray = [...res.data.list]
+            this.iconArray.forEach((item, index) => {
+              item.image = res2[index]
+              const group = this.tools.find(tool => tool.group === item.unit)
+              if (group) {
                 group.children.push({
                   ...imageTemp,
-                  data:{
+                  data: {
                     ...imageTemp.data,
-                    text:res.data.imageName,
-                    image:data,
-                    imageId:res.data.id,
-                    unit:this.uploadPic.unit
+                    text: item.imageName,
+                    image: res2[index],
+                    imageId: item.id,
+                    unit: item.unit
                   }
                 })
-              } else{
+              } else {
                 this.tools.push({
-                  group:this.uploadPic.unit,
-                  children:[{
+                  group: item.unit,
+                  children: [{
                     ...imageTemp,
-                    data:{
+                    data: {
                       ...imageTemp.data,
-                      text:res.data.imageName,
-                      image:data,
-                      imageId:res.data.id,
-                      unit:this.uploadPic.unit
+                      text: item.imageName,
+                      image: res2[index],
+                      imageId: item.id,
+                      unit: item.unit
                     }
-                  }],
+                  }]
                 })
               }
             })
-          }else{
-            this.$message.error(res.msg);
+
+            this.imgInit = true
+          })
+        })
+      } else {
+        this.imgageLoading = true
+        const promiseArr = []
+        imgidList.forEach((item, index) => {
+          if (item.data.imageId) {
+            promiseArr.push(this.dealImg(`/project/topo/icon/${item.data.imageId}`))
+          } else {
+            promiseArr.push('')
           }
         })
-      },
-
-      delImg(item){
-        this.$delete('/project/topo/icon?ids='+item.data.imageId).then(res=>{
-          if(res.code==200){
-            this.$message({duration:2000,type:'success',message:this.$t("tip.deleteSuccess")});
-            this.addNodeInit();
-          }else{
-            this.$message.error(res.msg);
-          }
+        Promise.all(promiseArr).then(res2 => {
+          this.iconArray = imgidList.map(item => {
+            return {
+              id: item.data.imageId
+            }
+          })
+          this.iconArray.forEach((item, index) => {
+            if (item.id) {
+              item.image = res2[index]
+            }
+          })
+          this.imgInit = true
         })
-      },
-
-      addNodeInit(imgidList){
-        if(!this.fromOverView){
-          this.$get('/project/topo/icon').then(res=>{
-            this.imgageLoading=true;
-            // this.tools[1].children=[];
-            let imgArr=[];
-            let promiseArr=[];
-            res.data.list.forEach((item,index)=>{
-              item.imageName=item.name;
-              delete item.name;
-              promiseArr.push( this.dealImg(`/project/topo/icon/${item.id}`));
-              imgArr.push({...item});
-            });
-            Promise.all(promiseArr).then((res2)=>{
-              this.iconArray=[...res.data.list];
-              this.iconArray.forEach((item,index)=>{
-                item.image=res2[index];
-                let group= this.tools.find(tool=>tool.group===item.unit);
-                if(group){
-                  group.children.push({
-                    ...imageTemp,
-                    data:{
-                      ...imageTemp.data,
-                      text:item.imageName,
-                      image:res2[index],
-                      imageId:item.id,
-                      unit:item.unit
-                    }
-                  })
-                } else{
-                  this.tools.push({
-                    group:item.unit,
-                    children:[{
-                      ...imageTemp,
-                      data:{
-                        ...imageTemp.data,
-                        text:item.imageName,
-                        image:res2[index],
-                        imageId:item.id,
-                        unit:item.unit
-                      }
-                    }],
-                  })
-                }
-              });
-
-              this.imgInit=true;
-            })
-          })
-        }else{
-          this.imgageLoading=true;
-          let promiseArr=[];
-          imgidList.forEach((item,index)=>{
-           if(item.data.imageId){
-             promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
-           }else{
-             promiseArr.push('');
-           }
-          });
-          Promise.all(promiseArr).then(res2=>{
-            this.iconArray=imgidList.map(item=>{
-              return {
-                id:item.data.imageId
-              }
-            });
-            this.iconArray.forEach((item,index)=>{
-              if(item.id){
-                item.image=res2[index];
-              }
-            });
-            this.imgInit=true;
-          })
-        }
-      },
-
-      dealImg(url){
-        // 处理后端传过来的图片流乱码问题
-        if(url){
-          return new Promise((resolve,reject)=>{
-            this.$axios
-              .get(url,{
-                responseType:"arraybuffer"
-              })
-              .then(res=>{
-                return ("data:image/jpeg;base64,"+btoa(new Uint8Array(res.data).reduce((data,byte)=>data+String.fromCharCode(byte),"")));
-              })
-              .then(data=>{
-                resolve(data);
-                // changeImage(data,(img)=>{
-                //   resolve(img)
-                // })
-              })
-              .catch(err=>{
-              });
-          })
-        }
-      },
-
-      delPen(obj){//删除元素
-        getTopology(this.topologyIndex).delete(obj);
-        this.props={
-          node:null,
-          line:null,
-          multi:false,
-          nodes:null,
-          locked:false,
-          pen:null,
-          pens:null,
-        };
-      },
-
-      editTopology(val){
-        this.editTopologyFlag=true;
-        setTimeout(()=>{
-          getTopology(this.topologyIndex).lock(0);
-          getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
-            if(item.animatePlay){
-              item.stopAnimate();
-            }
-            if(!item.data.expressArr.length) {
-              item.data.expressArr=[''];
-              item.data.legends=[''];
-            }
-            item.animateType=item.data.animateType;
-            if(item.type===0){
-              item.fillStyle=item.data.fillStyle;
-              item.strokeStyle=item.data.strokeStyle;
-              item.animatePlay=false;
-              item.fontColor="#000000";
-              item.gradientType=item.data.gradientType?item.data.gradientType:0;
-              if(!item.data.gradientColor){
-                item.data.gradientType=0;
-                item.data.gradientColor="#bae7ff";
-              }
-              if(item.data.gradientType===0){
-                item.bkType=0;
-              }else{
-                item.bkType=1;
-              }
-            }else if(item.type===1){
-              item.animateColor=item.data.animateColor;
-              item.strokeStyle=item.data.strokeStyle;
-              item.arrowColor=item.data.arrowColor;
-              item.fromArrowColor=item.data.arrowColor;
-              item.toArrowColor=item.data.arrowColor;
-              item.animatePlay=false;
-              item.fontColor="#000000";
-            }
-          })
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-          this.toolShow.attrCord=[domRect.width-350,0];
-          this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-          getTopology(this.topologyIndex).caches={
-            index:0,
-            list:[JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
-          }
-        })
-      },
-
-      animateCanvas(){
-        getTopology(this.topologyIndex).render();
-        getTopology(this.topologyIndex).animate()
-      },
-
-      refreshTopology(){
-        // canvas.open()
-      },
-
-      dropdownClick(){
-
-      },
-
-      changeTopologyOpt(val,key){
-        // this.topologyData.data[key]=this.colorRGBtoHex(val);
-        // getTopology(this.index).data[key]=val;
-        // getTopology(this.index).render();
-        let dataOption=getTopology(this.topologyIndex).data;
-        dataOption[key]=this.lineName;
-        getTopology(this.topologyIndex).render();
-      },
-      notModuleIDArrChange(id){
-        this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
-      },
-      //保存
-      saveTopology(){
-        let topologyData=getTopology(this.topologyIndex).pureData();
-        let flag=true;
-        let arr=[];
-        this.notModuleIDArr=[];
-        topologyData.pens.forEach(item=>{
-          if(item.type===0&&((!item.data)||(item.data&& !item.data.moduleId))){
-            arr.push(item);
-            this.props={
-              node:null,
-              line:null,
-              multi:false,
-              nodes:null,
-              locked:false,
-              pen:null,
-              pens:null,
-            };
-            flag=false;
-          }
-        });
-        if(!flag){
-          this.notModuleIDArr=arr;
-        }
-        if(flag){
-          this.editTopologyFlag=false;
-          topologyData.rule=false;
-          topologyData.grid=false;
-          topologyData.gridSize=10;
-          topologyData.pens.forEach(item=>{
-            item.animatePlay=item.data.animatePlay;
-            item.data.animateType=item.animateType;
-            if(item.type===0&&JSON.stringify(item.data.imageId)){
-              item.image="";
-              item.animateFrames=[];
-              item.animateReady=null;
-              delete  item.img;
-              delete  item.lastImage;
-            }
-            item.data.expressArr=item.data.expressArr.filter((expression,i)=>{
-              if(!expression){
-                item.data.legends.splice(i,1);
-                return false
-              } else {
-                return true
-              }
-            })
-          });
-          if(this.penToolTipScale==getTopology(this.topologyIndex).data.scale){
-            getTopology(this.topologyIndex).data.scale=this.oldScale;
-          }
-          this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
-            this.prevent_opt.save=false;
-            if(res.code===200){
-              this.$message({
-                message: this.$t("tip.saveSuccess"),
-                type: 'success'
-              });
-              this.$nextTick(()=>{
-                getTopology(this.topologyIndex).lock(1);
-                let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-                this.toolShow.attrCord=[domRect.width-350,0];
-                this.toolShow.height=domRect.height;
-                getTopology(this.topologyIndex).canvasPos=domRect;
-                this.reload();
-              })
-            }
-          }).catch(res=>{
-            this.prevent_opt.save=false;
-            this.$message({
-              message: res.msg,
-              type: 'error'
-            });
-          });
-
-
-        }else{
-          this.$message({
-            showClose:true,
-            message:this.$t("project.topology.selMod"),
-            type:'warning'
-          })
-        }
-      },
-      //取消
-      cancelTopology(){
-        this.editTopologyFlag=false;
-        this.$nextTick(()=>{
-          getTopology(this.topologyIndex).lock(1);
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-          this.toolShow.attrCord=[domRect.width-350,0];
-          this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-        });
-        this.reload();
-      },
-      //预览
-      previewTopology(){
-        let data=JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data));
-        data.pens.forEach((item)=>{
-          item.animatePlay=item.data.animatePlay;
-        });
-        this.topoPrevData=JSON.parse(JSON.stringify(data));
-        this.topoPrevData.rule=false;
-        this.topoPrevData.grid=false;
-        this.previewShow=true;
-      },
-
-      //联动 project
-      changeProjectTitle(){
-        let data=getTopology(this.topologyIndex).data;
-        this.topologyInfo={
-          fontSize:data.data.fontSize,
-          align:data.data.align,
-          fontColor:data.data.fontColor,
-          opacity:data.data.opacity,
-          name:data.name
-        }
-      },
-      /*tools 方法*/
-
-      winResize(){
-        setTimeout(()=>{
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
-          // this.toolShow.attrCord=[domRect.width-350,0];
-          // this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-          if(this.fromOverView){
-            getTopology(this.topologyIndex).open(this.oldTopologyData);
-          }
-          let flag=false;
-
-          let position={
-            x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-            y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-          }
-          getTopology(this.topologyIndex).data.pens.forEach(item=>{
-            if(flag){
-              return
-            }
-            if(item.rect.ex>position.x || item.rect.ey>position.y){
-              getTopology(this.topologyIndex).fitView(20);
-              flag=true
-            }
-          });
-          getTopology(this.topologyIndex).centerView(20);
-          this.getNodesArr();
-        },100)
-      },
-      canvasMove(e){// 画布上的移动 确定tooltip的位置
-        if(this.tooltipPosition.show){
-          return
-        }
-        window.ePosition=e
-      },
-      tooltipOver(){
-        clearTimeout(this.timer3);
-        this.timer3=null
-      },
-      tooltipOut(){
-        this.timer3=setTimeout(()=>{
-          this.tooltipPosition.show=false;
-          this.timer3=null
-        },50)
-      },
-      nodeDefaultWidth(nodeName){
-        switch(nodeName){
-          case 'myCube':
-          case "rectangleImg":
-            return 0;
-          default:
-            return 1;
-        }
-      },
-      previewBeforeClose(done){
-        this.$emit('changeTopologyIndexF');
-        done();
-      },
-      selpopIs(pen,state){//判断是否有图表
-        let flag=true;
-        if(state.id==='other'){
-          flag=false;
-        }
-        if(state.id==='total'&&pen.data.expressArr.length===0){
-          flag=false;
-        }
-        return flag
-      },
-      modelPopError(pen,state){
-        return false;
-        if(item.id==='asset'&&this.activeModelItem.assetError){
-          return true;
-        }
-        if(item.id==='alert'&&this.activeModelItem.alertError){
-          return true;
-        }
-        if(item.id==='endpoint'&&this.activeModelItem.endpointError){
-          return true;
-        }
-        return false;
-      },
-      redoIndexChange(index){
-        this.redoIndex=index
-      },
-      querySearch(queryString, cb) {
-        let restaurants = this.unitArr;
-        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      uploadPicChange(){
-        this.unitArr=[];
-        this.tools.forEach((item,index)=>{
-          if(index>0){
-            this.unitArr.push({
-              value:item.group
-            })
-          }
-        });
-        this.uploadPic.name='';
-        this.uploadPic.unit='';
-        this.file=null;
-        this.uploadPicShow=true;
-      },
-      zoomMap(num){
-        getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale+num);
-      },
-      penToBottom(){
-        getTopology(this.topologyIndex).bottom()
-      },
+      }
     },
-    destroyed(){
-      if(getTopology(this.topologyIndex)){
-        getTopology(this.topologyIndex).destroy();
-        setTopology(this.topologyIndex,null);
+
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve, reject) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+              // changeImage(data,(img)=>{
+              //   resolve(img)
+              // })
+            })
+            .catch(err => {
+            })
+        })
       }
-      if(document.getElementById('topology-canvas'+this.topologyIndexF)){
-       document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
+    },
+
+    delPen (obj) { // 删除元素
+      getTopology(this.topologyIndex).delete(obj)
+      this.props = {
+        node: null,
+        line: null,
+        multi: false,
+        nodes: null,
+        locked: false,
+        pen: null,
+        pens: null
       }
-      window.removeEventListener('resize',this.winResize)
+    },
+
+    editTopology (val) {
+      this.editTopologyFlag = true
+      setTimeout(() => {
+        getTopology(this.topologyIndex).lock(0)
+        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+          if (item.animatePlay) {
+            item.stopAnimate()
+          }
+          if (!item.data.expressArr.length) {
+            item.data.expressArr = ['']
+            item.data.legends = ['']
+          }
+          item.animateType = item.data.animateType
+          if (item.type === 0) {
+            item.fillStyle = item.data.fillStyle
+            item.strokeStyle = item.data.strokeStyle
+            item.animatePlay = false
+            item.fontColor = '#000000'
+            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
+            if (!item.data.gradientColor) {
+              item.data.gradientType = 0
+              item.data.gradientColor = '#bae7ff'
+            }
+            if (item.data.gradientType === 0) {
+              item.bkType = 0
+            } else {
+              item.bkType = 1
+            }
+          } else if (item.type === 1) {
+            item.animateColor = item.data.animateColor
+            item.strokeStyle = item.data.strokeStyle
+            item.arrowColor = item.data.arrowColor
+            item.fromArrowColor = item.data.arrowColor
+            item.toArrowColor = item.data.arrowColor
+            item.animatePlay = false
+            item.fontColor = '#000000'
+          }
+        })
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        this.toolShow.attrCord = [domRect.width - 350, 0]
+        this.toolShow.height = domRect.height
+        getTopology(this.topologyIndex).canvasPos = domRect
+        getTopology(this.topologyIndex).caches = {
+          index: 0,
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+        }
+      })
+    },
+
+    animateCanvas () {
+      getTopology(this.topologyIndex).render()
+      getTopology(this.topologyIndex).animate()
+    },
+
+    refreshTopology () {
+      // canvas.open()
+    },
+
+    dropdownClick () {
+
+    },
+
+    changeTopologyOpt (val, key) {
+      // this.topologyData.data[key]=this.colorRGBtoHex(val);
+      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).render();
+      const dataOption = getTopology(this.topologyIndex).data
+      dataOption[key] = this.lineName
+      getTopology(this.topologyIndex).render()
+    },
+    notModuleIDArrChange (id) {
+      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
+    },
+    // 保存
+    saveTopology () {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      let flag = true
+      const arr = []
+      this.notModuleIDArr = []
+      topologyData.pens.forEach(item => {
+        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
+          arr.push(item)
+          this.props = {
+            node: null,
+            line: null,
+            multi: false,
+            nodes: null,
+            locked: false,
+            pen: null,
+            pens: null
+          }
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.notModuleIDArr = arr
+      }
+      if (flag) {
+        this.editTopologyFlag = false
+        topologyData.rule = false
+        topologyData.grid = false
+        topologyData.gridSize = 10
+        topologyData.pens.forEach(item => {
+          item.animatePlay = item.data.animatePlay
+          item.data.animateType = item.animateType
+          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+            item.image = ''
+            item.animateFrames = []
+            item.animateReady = null
+            delete item.img
+            delete item.lastImage
+          }
+          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+            if (!expression) {
+              item.data.legends.splice(i, 1)
+              return false
+            } else {
+              return true
+            }
+          })
+        })
+        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+          getTopology(this.topologyIndex).data.scale = this.oldScale
+        }
+        this.$put('/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+          this.prevent_opt.save = false
+          if (res.code === 200) {
+            this.$message({
+              message: this.$t('tip.saveSuccess'),
+              type: 'success'
+            })
+            this.$nextTick(() => {
+              getTopology(this.topologyIndex).lock(1)
+              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+              this.toolShow.attrCord = [domRect.width - 350, 0]
+              this.toolShow.height = domRect.height
+              getTopology(this.topologyIndex).canvasPos = domRect
+              this.reload()
+            })
+          }
+        }).catch(res => {
+          this.prevent_opt.save = false
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        })
+      } else {
+        this.$message({
+          showClose: true,
+          message: this.$t('project.topology.selMod'),
+          type: 'warning'
+        })
+      }
+    },
+    // 取消
+    cancelTopology () {
+      this.editTopologyFlag = false
+      this.$nextTick(() => {
+        getTopology(this.topologyIndex).lock(1)
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        this.toolShow.attrCord = [domRect.width - 350, 0]
+        this.toolShow.height = domRect.height
+        getTopology(this.topologyIndex).canvasPos = domRect
+      })
+      this.reload()
+    },
+    // 预览
+    previewTopology () {
+      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+      data.pens.forEach((item) => {
+        item.animatePlay = item.data.animatePlay
+      })
+      this.topoPrevData = JSON.parse(JSON.stringify(data))
+      this.topoPrevData.rule = false
+      this.topoPrevData.grid = false
+      this.previewShow = true
+    },
+
+    // 联动 project
+    changeProjectTitle () {
+      const data = getTopology(this.topologyIndex).data
+      this.topologyInfo = {
+        fontSize: data.data.fontSize,
+        align: data.data.align,
+        fontColor: data.data.fontColor,
+        opacity: data.data.opacity,
+        name: data.name
+      }
+    },
+    /* tools 方法 */
+
+    winResize () {
+      setTimeout(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        // this.toolShow.attrCord=[domRect.width-350,0];
+        // this.toolShow.height=domRect.height;
+        getTopology(this.topologyIndex).canvasPos = domRect
+        if (this.fromOverView) {
+          getTopology(this.topologyIndex).open(this.oldTopologyData)
+        }
+        let flag = false
+
+        const position = {
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (flag) {
+            return
+          }
+          if (item.rect.ex > position.x || item.rect.ey > position.y) {
+            getTopology(this.topologyIndex).fitView(20)
+            flag = true
+          }
+        })
+        getTopology(this.topologyIndex).centerView(20)
+        this.getNodesArr()
+      }, 100)
+    },
+    canvasMove (e) { // 画布上的移动 确定tooltip的位置
+      if (this.tooltipPosition.show) {
+        return
+      }
+      window.ePosition = e
+    },
+    tooltipOver () {
+      clearTimeout(this.timer3)
+      this.timer3 = null
+    },
+    tooltipOut () {
+      this.timer3 = setTimeout(() => {
+        this.tooltipPosition.show = false
+        this.timer3 = null
+      }, 50)
+    },
+    nodeDefaultWidth (nodeName) {
+      switch (nodeName) {
+        case 'myCube':
+        case 'rectangleImg':
+          return 0
+        default:
+          return 1
+      }
+    },
+    previewBeforeClose (done) {
+      this.$emit('changeTopologyIndexF')
+      done()
+    },
+    selpopIs (pen, state) { // 判断是否有图表
+      let flag = true
+      if (state.id === 'other') {
+        flag = false
+      }
+      if (state.id === 'total' && pen.data.expressArr.length === 0) {
+        flag = false
+      }
+      return flag
+    },
+    modelPopError (pen, state) {
+      if (item.id === 'asset' && this.activeModelItem.assetError) {
+        return true
+      }
+      if (item.id === 'alert' && this.activeModelItem.alertError) {
+        return true
+      }
+      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
+        return true
+      }
+      return false
+    },
+    redoIndexChange (index) {
+      this.redoIndex = index
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.unitArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    uploadPicChange () {
+      this.unitArr = []
+      this.tools.forEach((item, index) => {
+        if (index > 0) {
+          this.unitArr.push({
+            value: item.group
+          })
+        }
+      })
+      this.uploadPic.name = ''
+      this.uploadPic.unit = ''
+      this.file = null
+      this.uploadPicShow = true
+    },
+    zoomMap (num) {
+      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+    },
+    penToBottom () {
+      getTopology(this.topologyIndex).bottom()
     }
+  },
+  destroyed () {
+    if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).destroy()
+      setTopology(this.topologyIndex, null)
+    }
+    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
+      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    }
+    window.removeEventListener('resize', this.winResize)
   }
+}
 </script>
 <style lang="scss">
   .el-dropdown-menu {
@@ -2494,7 +2463,6 @@
     color: #F7BA78;
   }
 
-
   .right-content-P1{
     border: 1px solid ;
   }
@@ -2502,7 +2470,6 @@
     text-align: center;
   }
 
-
 </style>
 <style lang="scss" scoped>
   .project-topology-tool {
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index 3963d00b2..6cb9a0b93 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -80,7 +80,6 @@
             </div>
           </div>
 
-
           <topology-top-tool
             v-if="editTopologyFlag"
             :selection.sync="props"
@@ -93,8 +92,6 @@
             :toolShow="toolShow">
           </topology-top-tool>
 
-
-
         </span>
         <span class="float-right">
           <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
@@ -174,8 +171,6 @@
         <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
         <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 
-
-
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
         >
@@ -385,1706 +380,1703 @@
 </template>
 
 <script>
-  import {Topology,Node,Line,Rect,registerNode} from '@topology/core';
-  import * as FileSaver from 'file-saver';
-  import {
-    Tools,
-    canvasRegister,
-    imageTemp,
-    myShape,
-    myAnchors,
-    myIconRect,
-    myTextRect,
-    onChangeAnimate,
-    onChangeAnimateLine,
-    changeImage,
-    myCubec,
-    myCubeAnchors
-  } from './L5/services/canvas.js';
-  // 注册到画布
-  registerNode('rectangleImg',myShape,myAnchors,myIconRect,myTextRect);
-  registerNode('myCube',myCubec,myCubeAnchors,null,null);
-  import {getTopology,setTopology} from "../js/common";
-  import CanvasProps from './L5/CanvasProps';
-  import CanvasContextMenu from './L5//CanvasContextMenu';
-  import topologyTopTool from './L5//topologyTopTool';
-  import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
-  import popDataMain from './popData/Main'
-  import popDataInfo from './popData/Info'
-  import alertTable from "./popData/alertTable";
-  import assetTable from "./popData/assetTable";
-  import endpointTable from "./popData/endpointTable";
-  import ExpressionInfo from "./popData/expressionInfo";
-  import topoTooltip from "./L5/topoTooltip";
-  import {getMetricTypeValue} from '../js/tools'
-  import bus from "../../../libs/bus";
-  import topologyPrev from './topologyPrev'
-  import axios from 'axios';
+import { Topology, Node, Line, Rect, registerNode } from '@topology/core'
+import * as FileSaver from 'file-saver'
+import {
+  Tools,
+  canvasRegister,
+  imageTemp,
+  myShape,
+  myAnchors,
+  myIconRect,
+  myTextRect,
+  onChangeAnimate,
+  onChangeAnimateLine,
+  changeImage,
+  myCubec,
+  myCubeAnchors
+} from './L5/services/canvas.js'
+import { getTopology, setTopology } from '../js/common'
+import CanvasProps from './L5/CanvasProps'
+import CanvasContextMenu from './L5//CanvasContextMenu'
+import topologyTopTool from './L5//topologyTopTool'
+import VueDraggableResizable from 'vue-draggable-resizable'
+// api https://github.com/mauricius/vue-draggable-resizable
+import popDataMain from './popData/Main'
+import popDataInfo from './popData/Info'
+import alertTable from './popData/alertTable'
+import assetTable from './popData/assetTable'
+import endpointTable from './popData/endpointTable'
+import ExpressionInfo from './popData/expressionInfo'
+import topoTooltip from './L5/topoTooltip'
+import { getMetricTypeValue } from '../js/tools'
+import bus from '../../../libs/bus'
+import topologyPrev from './topologyPrev'
+import axios from 'axios'
+// 注册到画布
+registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-  const canvasOptions={
-    rotateCursor:'/img/rotate.cur',
-    translateKey:'None',
-    disableEmptyLine:false,
-    autoExpandDistance:0,
-    minScale:0.01,
-  };
-  let canvas;
-  export default {
-    name:'topologyL5',
-    data(){
-      return {
-        objChange:false,//project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-        chartDataInfo:{},
-        topoPrevData:{},//预览数据
-        imgInit:false,//判断图片是否加载完成
-        toolGroup:'基本形状',
-        editFlag:true,
-        tools:Tools,
-        props:{},
-        topologyLoading:false,
-        contextmenu:{
-          left:null,
-          top:null,
-          bottom:null
+const canvasOptions = {
+  rotateCursor: '/img/rotate.cur',
+  translateKey: 'None',
+  disableEmptyLine: false,
+  autoExpandDistance: 0,
+  minScale: 0.01
+}
+let canvas
+export default {
+  name: 'topologyL5',
+  data () {
+    return {
+      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
+      chartDataInfo: {},
+      topoPrevData: {}, // 预览数据
+      imgInit: false, // 判断图片是否加载完成
+      toolGroup: '基本形状',
+      editFlag: true,
+      tools: Tools,
+      props: {},
+      topologyLoading: false,
+      contextmenu: {
+        left: null,
+        top: null,
+        bottom: null
+      },
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      ],
+      topologyInfo: {
+        fontSize: 14,
+        align: 'left',
+        fontColor: '#000000',
+        opacity: 1,
+        name: ''
+      },
+      saveData: {},
+      oldTopologyData: '',
+      redoIndex: 0,
+      dataLength: 0,
+      editTopologyFlag: false,
+      searchTime: bus.getTimezontDateRange(),
+      activeNames: [],
+      topologyIndex: 0,
+      iconArray: [],
+      imgageLoading: false,
+      toolShow: {
+        node: true,
+        attr: true,
+        nodeCord: [0, 0],
+        attrCord: [0, 0],
+        height: 500
+      },
+      dragFlag: true,
+      modules: [],
+      allModules: [],
+      projectInfo: {
+        title: '',
+        id: '',
+        remark: '',
+        alertStat: [1, 2, 3],
+        moduleMum: 6,
+        loading: true
+      },
+      timer: null, // 处理project短时间呢频繁变更的定时器
+      timer2: null, // 处理平移画布显示iconState的定时器
+      timer3: null, // 处理tooltip的显示定时器
+      nodesArr: [],
+      notModuleIDArr: [],
+      popData: [
+        {
+          top: '-40px',
+          left: '-21px',
+          className: 'nz-icon-endpoint',
+          id: 'endpoint',
+          title: this.$t('project.topology.endpoint')
         },
-        filterTime:[
-          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
-        ],
-        topologyInfo:{
-          fontSize:14,
-          align:'left',
-          fontColor:"#000000",
-          opacity:1,
-          name:'',
-        },
-        saveData:{},
-        oldTopologyData:'',
-        redoIndex:0,
-        dataLength:0,
-        editTopologyFlag:false,
-        searchTime: bus.getTimezontDateRange(),
-        activeNames:[],
-        topologyIndex:0,
-        iconArray:[],
-        imgageLoading:false,
-        toolShow:{
-          node:true,
-          attr:true,
-          nodeCord:[0,0],
-          attrCord:[0,0],
-          height:500,
-        },
-        dragFlag:true,
-        modules:[],
-        allModules:[],
-        projectInfo:{
-          title:'',
-          id:'',
-          remark:'',
-          alertStat:[1,2,3],
-          moduleMum:6,
-          loading:true,
-        },
-        timer:null,//处理project短时间呢频繁变更的定时器
-        timer2:null,//处理平移画布显示iconState的定时器
-        timer3:null,//处理tooltip的显示定时器
-        nodesArr:[],
-        notModuleIDArr:[],
-        popData:[
-          {
-            top:'-40px',
-            left:'-21px',
-            className:'nz-icon-endpoint',
-            id:'endpoint',
-            title:this.$t('project.topology.endpoint')
-          },
-          {top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
-          {top:'-4px',left:'40px',className:'',id:'other',title:''},
-          {top:'30px',left:'19px',className:'',id:'other',title:''},
-          {top:'30px',left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
-          {top:'-4px',left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
-        ],
-        popDataShow:{
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        },
-        moduleId:'',
-        tooltipPosition:{
-          top:0,
-          left:0,
-          show:false,
-          height:400
-        },
-        chartData:{},
-        chartGetData:[],
-        penLineType:[
-          {d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:this.$t('project.topology.curve'),id:'curve'},
-          {d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:this.$t('project.topology.polyline'),id:'polyline'},
-          {d:'M5 14 l40 0',"stroke-dasharray":"",name:this.$t('project.topology.line'),id:'line'},
-          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-        ],
-        lineName:'curve',
-        cachesIndex:0,
-        projectInfo:{
-          title:'',
-          id:'',
-          remark:'',
-          alertStat:[1,2,3],
-          moduleMum:6,
-          loading:true,
-          total:0,
-        },
-        projectInfoShow:false,
-        projectAlertShow:false,
-        previewShow:false,
-        penId:undefined,
-        penToolTipScale:1,
-        oldScale:1,
-        uploadPicShow:false,
-        uploadPic:{
-          name:'',
-          unit:''
-        },
-        unitArr:[],
-      };
+        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
+        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+        { top: '-4px', left: '-40px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
+      ],
+      popDataShow: {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      },
+      moduleId: '',
+      tooltipPosition: {
+        top: 0,
+        left: 0,
+        show: false,
+        height: 400
+      },
+      chartData: {},
+      chartGetData: [],
+      penLineType: [
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+      ],
+      lineName: 'curve',
+      cachesIndex: 0,
+      projectInfo: {
+        title: '',
+        id: '',
+        remark: '',
+        alertStat: [1, 2, 3],
+        moduleMum: 6,
+        loading: true,
+        total: 0
+      },
+      projectInfoShow: false,
+      projectAlertShow: false,
+      previewShow: false,
+      penId: undefined,
+      penToolTipScale: 1,
+      oldScale: 1,
+      uploadPicShow: false,
+      uploadPic: {
+        name: '',
+        unit: ''
+      },
+      unitArr: []
+    }
+  },
+  components: {
+    CanvasProps,
+    CanvasContextMenu,
+    topologyTopTool,
+    VueDraggableResizable,
+    popDataMain,
+    popDataInfo,
+    alertTable,
+    assetTable,
+    endpointTable,
+    ExpressionInfo,
+    topoTooltip,
+    topologyPrev
+  },
+  computed: {},
+  props: {
+    topologyIndexF: {
+      type: Number,
+      default: 0
     },
-    components:{
-      CanvasProps,
-      CanvasContextMenu,
-      topologyTopTool,
-      VueDraggableResizable,
-      popDataMain,
-      popDataInfo,
-      alertTable,
-      assetTable,
-      endpointTable,
-      ExpressionInfo,
-      topoTooltip,
-      topologyPrev,
+    obj: {},
+    showTopTools: {
+      type: Boolean,
+      default: true
     },
-    computed:{},
-    props:{
-      topologyIndexF:{
-        type:Number,
-        default:0,
-      },
-      obj:{},
-      showTopTools:{
-        type:Boolean,
-        default:true,
-      },
-      fromOverView:{
-        type:Boolean,
-        default:false,
-      },
-      fromPrev:{
-        type:Boolean,
-        default:false,
-      },
-      topoPrevDataS:{
+    fromOverView: {
+      type: Boolean,
+      default: false
+    },
+    fromPrev: {
+      type: Boolean,
+      default: false
+    },
+    topoPrevDataS: {
 
-      },
+    }
+  },
+  watch: {
+    topologyIndexF: {
+      immediate: true,
+      handler (n) {
+        this.topologyIndex = n
+      }
     },
-    watch:{
-      topologyIndexF:{
-        immediate:true,
-        handler(n){
-          this.topologyIndex=n;
-        }
-      },
-      obj:{
-        deep:true,
-        immediate:true,
-        handler(n){
-          if(n.id){
-            if( !this.objChange){
-              this.editTopologyFlag=false;
-              this.topologyLoading=true;
-              this.projectInfoShow=false;
-              this.projectAlertShow=false;
-              if(n.id){
-                this.getProjectData(n);
-              }
-              this.topologyLoading=true;
-              this.init();
-              this.timer=null
-              this.objChange=true;
-            }else{
-              if(!this.timer){
-                this.timer=setInterval(()=>{
-                  if(this.objChange){return}
-                  this.editTopologyFlag=false;
-                  this.topologyLoading=true;
-                  this.projectInfoShow=false;
-                  this.projectAlertShow=false;
-                  if(n.id){
-                    this.getProjectData(n);
-                  }
-                  clearTimeout(this.timer);
-                  this.timer=null;
-                  this.objChange=true;
-                  this.topologyLoading=true;
-                  this.init();
-                },100)
-              }else{
-                clearTimeout(this.timer);
-                this.timer=setInterval(()=>{
-                  if(this.objChange){return}
-                  this.editTopologyFlag=false;
-                  this.topologyLoading=true;
-                  this.projectInfoShow=false;
-                  this.projectAlertShow=false;
-                  if(n.id){
-                    this.getProjectData(n);
-                  }
-                  clearTimeout(this.timer);
-                  this.timer=null;
-                  this.objChange=true;
-                  this.topologyLoading=true;
-                  this.init();
-                },100)
-              }
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n.id) {
+          if (!this.objChange) {
+            this.editTopologyFlag = false
+            this.topologyLoading = true
+            this.projectInfoShow = false
+            this.projectAlertShow = false
+            if (n.id) {
+              this.getProjectData(n)
+            }
+            this.topologyLoading = true
+            this.init()
+            this.timer = null
+            this.objChange = true
+          } else {
+            if (!this.timer) {
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            } else {
+              clearTimeout(this.timer)
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
             }
-
           }
         }
       }
-    },
-    computed:{},
-    created(){
-      canvasRegister();
-      if(process.client){
-        document.onclick=event=>{
-          this.contextmenu={
-            left:null,
-            top:null,
-            bottom:null
-          };
-        };
+    }
+  },
+  computed: {},
+  created () {
+    canvasRegister()
+    if (process.client) {
+      document.onclick = event => {
+        this.contextmenu = {
+          left: null,
+          top: null,
+          bottom: null
+        }
       }
+    }
+  },
+  created () {
+  },
+  mounted () {
+    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+      this.addNodeInit()
+    }
+    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+    window.addEventListener('resize', this.winResize)
+  },
+  methods: {
+    init () {
+      canvasOptions.on = this.onMessage
+      this.reload()
     },
-    created(){
-    },
-    mounted(){
-      if(!this.fromOverView){//从overview来的 加载相应图片 优化首页加载速度
-        this.addNodeInit();
-      }
-      document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
-      window.addEventListener('resize',this.winResize)
-    },
-    methods:{
-      init(){
-        canvasOptions.on=this.onMessage;
-        this.reload();
-      },
 
-      reload(){
-        this.topologyLoading=true;
-        this.getTopologyData().then((data)=>{
-          this.openTopologyData(data).then(()=>{
-            //获取对应的值 给节点 连线添加对应动画
-            this.lineName=data.lineName?data.lineName:this.lineName;
-            this.chartGetData=[];
-            let axiosArr=[];
-            let promiseArr=[];
-            let self=this;
-            let pensPromise=(pen, arr,index)=>{
-              return new Promise(function(resolve, reject) {
-                Promise.all(arr).then((res)=>{
-                  self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
-                  self.setAnimation(pen,self.chartGetData[index].res);
-                  resolve()
-                });
-              });
-            };
-            let endTime=this.filterTime[1];
-            let startTime=this.filterTime[0];
-            let step=bus.getStep(startTime,endTime);
-            data.pens&&data.pens.forEach((item,index)=>{
-              this.chartGetData.push({id:item.id,res:[]});
-              let arr=item.data.expressArr.map((ele)=>{
-                let query=encodeURIComponent(ele);
-                if(!query){
-                  return new Promise(resolve=>{
-                    resolve({data:"",status:'no query'});
+    reload () {
+      this.topologyLoading = true
+      this.getTopologyData().then((data) => {
+        this.openTopologyData(data).then(() => {
+          // 获取对应的值 给节点 连线添加对应动画
+          this.lineName = data.lineName ? data.lineName : this.lineName
+          this.chartGetData = []
+          const axiosArr = []
+          const promiseArr = []
+          const self = this
+          const pensPromise = (pen, arr, index) => {
+            return new Promise(function (resolve, reject) {
+              Promise.all(arr).then((res) => {
+                self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
+                self.setAnimation(pen, self.chartGetData[index].res)
+                resolve()
+              })
+            })
+          }
+          const endTime = this.filterTime[1]
+          const startTime = this.filterTime[0]
+          const step = bus.getStep(startTime, endTime)
+          data.pens && data.pens.forEach((item, index) => {
+            this.chartGetData.push({ id: item.id, res: [] })
+            const arr = item.data.expressArr.map((ele) => {
+              let query = encodeURIComponent(ele)
+              if (!query) {
+                return new Promise(resolve => {
+                  resolve({ data: '', status: 'no query' })
+                })
+              }
+              query += '&nullType=' + 'connected'
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            axiosArr.push({ item, arr })
+            promiseArr.push(pensPromise(item, arr, index))
+          })
+          Promise.all(promiseArr).then((res) => {
+            getTopology(this.topologyIndex).open(data)
+            getTopology(this.topologyIndex).lock(1)
+            this.objChange = false
+            let flag = false
+            const position = {
+              x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+              y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+            }
+            this.oldScale = getTopology(this.topologyIndex).data.scale
+            getTopology(this.topologyIndex).data.pens.forEach(item => {
+              if (flag) {
+                return
+              }
+              if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                getTopology(this.topologyIndex).fitView(20)
+                flag = true
+              }
+            })
+            getTopology(this.topologyIndex).centerView(20)
+            this.penToolTipScale = getTopology(this.topologyIndex).data.scale
+            setTimeout(() => {
+              getTopology(this.topologyIndex).data.pens.forEach(item => {
+                if (item.animatePlay) {
+                  item.stopAnimate()
+                  setTimeout(() => {
+                    item.startAnimate()
                   })
                 }
-                query+='&nullType='+'connected';
-                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
-              });
-              axiosArr.push({item,arr});
-              promiseArr.push(pensPromise(item,arr,index))
-            });
-            Promise.all(promiseArr).then((res)=>{
-              getTopology(this.topologyIndex).open(data);
-              getTopology(this.topologyIndex).lock(1);
-              this.objChange=false;
-              let flag=false;
-              let position={
-                x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-                y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-              };
-              this.oldScale=getTopology(this.topologyIndex).data.scale;
-              getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                if(flag){
-                  return
-                }
-                if(item.rect.ex>position.x || item.rect.ey>position.y){
-                  getTopology(this.topologyIndex).fitView(20);
-                  flag=true
-                }
-              });
-              getTopology(this.topologyIndex).centerView(20);
-              this.penToolTipScale = getTopology(this.topologyIndex).data.scale;
-              setTimeout(()=>{
-                getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                  if(item.animatePlay){
-                    item.stopAnimate();
-                    setTimeout(()=>{
-                      item.startAnimate()
-                    })
-                  }
-                },100);
-              })
-              // if(this.fromPrev){
-              //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
-              // }
-              // getTopology(this.topologyIndex).fitView();
-              this.oldTopologyData=JSON.stringify(getTopology(this.topologyIndex).data)
-              this.getNodesArr();
-            });
+              }, 100)
+            })
+            // if(this.fromPrev){
+            //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+            // }
+            // getTopology(this.topologyIndex).fitView();
+            this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+            this.getNodesArr()
           })
-        });
-      },
-
-      dateChange() {
-        let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
-        this.setSearchTime(nowTimeType.type,nowTimeType.value);
-        this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-        this.reload();
-      },
-      setSearchTime(type,val){//设置searchTime
-        if(type==='minute'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "m");
-        }else if(type==='hour'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "h");
-        }else if(type==='date'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "d");
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
-      },
-      //打开topology数据
-      openTopologyData(data){
-        return new Promise(resolve=>{
-          if(!getTopology(this.topologyIndex)){
-            let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
-            canvas.open(data);
-            setTopology(this.topologyIndex,canvas);
-          }else{
-            getTopology(this.topologyIndex).open(data);
-          }
-          this.topologyLoading=false;
-          if(!getTopology(this.topologyIndex).data.name){
-            getTopology(this.topologyIndex).data.name=this.obj.name;
-          }
-          getTopology(this.topologyIndex).data.projectId=this.obj.id;
-          getTopology(this.topologyIndex).lock(1);
-
-          this.getModule()//获取module
-          resolve()
         })
-      },
-      //获取topology数据
-      getTopologyData(){
-        return new Promise(resolve=>{
-          if(this.fromPrev){
-            resolve(this.topoPrevDataS)
-          }
-          this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
-            let data=res.data.topo;
-            if(!res.data.topo || !data.pens){
-              data={
-                bkColor:'#FFFFFF',
-                gridSize:10,
-                gridColor:'#ededed',
-                lineWidth:1,
-                ruleColor:"#4e4e4e"
-              };
-              this.projectInfoShow=true;
-              this.projectAlertShow=true;
-              this.saveData={...data};
-              this.topologyInfo.name=this.obj.name;
-              resolve(data);
-            }else{
-              this.topologyInfo={
-                fontSize:data.data.fontSize,
-                align:data.data.align,
-                fontColor:data.data.fontColor,
-                opacity:data.data.opacity,
-                name:data.name
-              };
-              if(this.fromOverView){//优化从首页来的加载速度
-                let arr=data.pens.filter(item=>!item.type);
-                this.addNodeInit(arr);
-              }
-              let timer=setInterval(()=>{
-                if(!this.imgInit){
-                  return
-                }
-                clearInterval(timer);
-                let promiseArr=[];
-                let self=this;
-                // for(let i=0;i<data.pens.length;i++){
-                //   let line=data.pens[i]
-                //   if(line.type===1){
-                //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
-                //      data.pens.splice(i, 1);
-                //      i--;
-                //    }
-                //   }
-                // }
-                data.pens.forEach((item=>{
-                  if(item.type===0&&item.data.imageId){
-                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
-                  }
-                  if(item.type===0){
-                    promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
-                  }else{
-                    promiseArr.push({type:1})
-                  }
-                }));
+      })
+    },
 
-                if(!data.data){
-                  this.projectInfoShow=true;
-                  this.projectAlertShow=true;
-                } else if(!JSON.stringify(data.data.projectInfo)){
-                  this.projectInfoShow=true;
-                  this.projectAlertShow=true;
-                } else{
-                  this.projectInfoShow=data.data.projectInfo;
-                  this.projectAlertShow=data.data.alertInfo;
-                }
-                if(!data.bkImage){
-                  data.bkImage=undefined;
-                }
-                Promise.all(promiseArr).then(res=>{
-                  res.forEach((response,index)=>{
-                    let item=data.pens[index];
-                    if(item.type===0){
-                      item.data.state=response.data;
-                      item.data.state.asset=false;
-                      item.data.state.endpoint=false;
-                      item.data.state.alert=false;
-                      if(item.data.state.assetStat.down>0){
-                        item.data.state.asset=true;
-                      }
-                      if(item.data.state.endpointStat.down>0){
-                        item.data.state.endpoint=true;
-                      }
-                      if(item.data.state.alertStat.P1> 0 || item.data.state.alertStat.P3>0 || item.data.state.alertStat.P2>0){
-                        item.data.state.alert=true;
-                      }
-                      item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
-                    }
-                  });
-                  self.saveData={...data};
-                  resolve(data);
-                });
-              },100)
+    dateChange () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.reload()
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 打开topology数据
+    openTopologyData (data) {
+      return new Promise(resolve => {
+        if (!getTopology(this.topologyIndex)) {
+          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          canvas.open(data)
+          setTopology(this.topologyIndex, canvas)
+        } else {
+          getTopology(this.topologyIndex).open(data)
+        }
+        this.topologyLoading = false
+        if (!getTopology(this.topologyIndex).data.name) {
+          getTopology(this.topologyIndex).data.name = this.obj.name
+        }
+        getTopology(this.topologyIndex).data.projectId = this.obj.id
+        getTopology(this.topologyIndex).lock(1)
+
+        this.getModule()// 获取module
+        resolve()
+      })
+    },
+    // 获取topology数据
+    getTopologyData () {
+      return new Promise(resolve => {
+        if (this.fromPrev) {
+          resolve(this.topoPrevDataS)
+        }
+        this.$get('/project/topo', { projectId: this.obj.id }).then(res => {
+          let data = res.data.topo
+          if (!res.data.topo || !data.pens) {
+            data = {
+              bkColor: '#FFFFFF',
+              gridSize: 10,
+              gridColor: '#ededed',
+              lineWidth: 1,
+              ruleColor: '#4e4e4e'
             }
-          })
-        });
-      },
-      //赋值动画
-      setAnimation(pen,res){// 根据所有res的状态 赋值动画
-        let maxLevel=0;
-        if(res.length>0){
-          res.forEach((response,innerPos)=>{
-            if(response.status!=='success'){
-              return
+            this.projectInfoShow = true
+            this.projectAlertShow = true
+            this.saveData = { ...data }
+            this.topologyInfo.name = this.obj.name
+            resolve(data)
+          } else {
+            this.topologyInfo = {
+              fontSize: data.data.fontSize,
+              align: data.data.align,
+              fontColor: data.data.fontColor,
+              opacity: data.data.opacity,
+              name: data.name
             }
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                pen.data.valueMapping.forEach((item,index)=>{
-                  if(item.value==='base'){return}
-                  if( queryItem.showValue >item.value){
-                    queryItem.level=item.level;
-                    if(maxLevel<item.level){
-                      maxLevel=item.level
+            if (this.fromOverView) { // 优化从首页来的加载速度
+              const arr = data.pens.filter(item => !item.type)
+              this.addNodeInit(arr)
+            }
+            const timer = setInterval(() => {
+              if (!this.imgInit) {
+                return
+              }
+              clearInterval(timer)
+              const promiseArr = []
+              const self = this
+              // for(let i=0;i<data.pens.length;i++){
+              //   let line=data.pens[i]
+              //   if(line.type===1){
+              //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
+              //      data.pens.splice(i, 1);
+              //      i--;
+              //    }
+              //   }
+              // }
+              data.pens.forEach(item => {
+                if (item.type === 0 && item.data.imageId) {
+                  item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
+                }
+                if (item.type === 0) {
+                  promiseArr.push(this.$get('/module/stat', { id: item.data.moduleId }))
+                } else {
+                  promiseArr.push({ type: 1 })
+                }
+              })
+
+              if (!data.data) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else if (!JSON.stringify(data.data.projectInfo)) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else {
+                this.projectInfoShow = data.data.projectInfo
+                this.projectAlertShow = data.data.alertInfo
+              }
+              if (!data.bkImage) {
+                data.bkImage = undefined
+              }
+              Promise.all(promiseArr).then(res => {
+                res.forEach((response, index) => {
+                  const item = data.pens[index]
+                  if (item.type === 0) {
+                    item.data.state = response.data
+                    item.data.state.asset = false
+                    item.data.state.endpoint = false
+                    item.data.state.alert = false
+                    if (item.data.state.assetStat.down > 0) {
+                      item.data.state.asset = true
                     }
+                    if (item.data.state.endpointStat.down > 0) {
+                      item.data.state.endpoint = true
+                    }
+                    if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
+                      item.data.state.alert = true
+                    }
+                    item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
                   }
                 })
+                self.saveData = { ...data }
+                resolve(data)
               })
-            }
-          })
-        }
-        if(maxLevel!==0){
-          if(pen.type===0){// 判断valueMapping 给相应的状态
-            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-            if(selLevel){
-              pen.fontColor=selLevel.color.text;
-              pen.fillStyle=selLevel.color.fill;
-              pen.strokeStyle=selLevel.color.line;
-              pen.bkType=0;
-            }
-            onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
-          }else if(pen.type===1){// 判断valueMapping 给相应的状态
-            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-            if(selLevel){
-              pen.animateColor=selLevel.color.fill;
-              pen.strokeStyle=selLevel.color.line;
-              pen.animateType=selLevel.animateType;
-              pen.fontColor=selLevel.color.text;
-            }
-            onChangeAnimateLine(pen,pen.animateType);
+            }, 100)
           }
-        } else {
-          if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
-            onChangeAnimate(pen,pen.animateType);
-          }else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
-            onChangeAnimateLine(pen,pen.animateType);
-          }
-        }
-      },
-      computeData(res,type,pen){//处理别名 以及 根据type显示对应的值
-        if(res.length>0){
-          res.forEach((response,innerPos)=>{
-            if(response.status!=='success'){
-              return
-            }
-
-            if (response.data.result) {
-              response.data.result.forEach((queryItem, resIndex) => {
-                // 图表中每条线的名字,后半部分
-                let host = '';//up,
-                if (queryItem.metric.__name__) {
-                  host = `${queryItem.metric.__name__}{`;//up,
-                }
-                const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                // 设置时间-数据格式对
-                let tempArr = [];
-                let dpsArr = [];
-                tempArr = queryItem.values;
-                dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                dpsArr = dpsArr.map(item => {
-                  return [item[0], [item[1][0], Number(item[1][1])]]
-                });
-                // 判断是否有数据, && tagsArr.length > 0
-                if (dpsArr.length) {
-                  tagsArr.forEach((tag, i) => {
-                    if (tag !== '__name__') {
-                      host += `${tag}="${queryItem.metric[tag]}",`;
-                    }
-                  });
-                  if (host.endsWith(',')) {
-                    host = host.substr(0, host.length - 1);
-                  }
-                  if (queryItem.metric.__name__) {
-                    host += "}";
-                  }
-                  if (!host || host === '') {
-                    host = pen.data.expressArr[innerPos];
-                  }
-                  //处理legend别名
-                  let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]);
-                  if (!alias || alias === '') {
-                    alias = host;
-                  }
-                  queryItem.legend={name: host+"-"+pen.data.legends[innerPos]+"-" + resIndex, alias: alias};
-                  queryItem.showValue= getMetricTypeValue(queryItem.values,type);
-                  // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                }
-              });
-            }
-
-          })
-        }
-        return res
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          });
-          return labelValue
-        }else{
-          return expression;
-        }
-      },
-      //获取project Info
-      getProjectData(n){
-        //获取projectInfo
-        this.projectInfo.loading=true;
-        this.$get('project/info', {id:n.id}).then(response => {
-          if (response.code === 200) {
-            this.projectInfo.loading=false;
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
-            this.projectInfo.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2];
-            if(!this.projectInfo.total){
-              this.projectInfo.total=0
-            }
-          }
-        });
-      },
-      // Severity Label
-      returnSeverityLabel(key){
-        return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
-      },
-      //获取module
-      getModule(){
-        this.projectInfo.loading=true;
-        this.$get('project/info',{id:this.obj.id}).then(response=>{
-          if(response.code===200){
-            this.projectInfo.loading=false;
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
-            this.allModules=response.data.module;
-            this.modulesDiff()
-          }
-        });
-      },
-
-      getNodesArr(){
-        if(!getTopology(this.topologyIndex))  return;
-        this.nodesArr=getTopology(this.topologyIndex).data.pens.filter(item=>{
-          if(!item.data){
-            item.data={
-              moduleId:'',
-              moduleName:'',
-              show:false,
-              error:false,
-              expressArr:[],
-            }
-          }
-          return item.type===0
-        });
-        // this.nodesArr=this.nodesArr.map(item=>{
-        //   if(!item.data){
-        //     item.data={
-        //       moduleId:'',
-        //       moduleName:'',
-        //       show:false,
-        //       error:false,
-        //       expressArr:[],
-        //     }
-        //   }
-        //   return {
-        //     rect:item.rect,
-        //     data:item.data
-        //   }
-        // });
-        //打开动画 是否更新顶部图标
-        this.nodesArr=JSON.parse(JSON.stringify(this.nodesArr));
-      },
-
-      modelTopClick(item,index){
-
-      },
-      //摘除已选择的module
-      modulesDiff(data){
-        this.modules=this.allModules;
-        if(getTopology(this.topologyIndex).data.pens){
-          getTopology(this.topologyIndex).data.pens.forEach(item=>{
-            if(item.type==0){
-              this.modules=this.modules.filter(item1=>item.data.moduleId!==item1.id)
-            }
-          })
-        }
-        if(data&&data.data&&data.data.moduleId){
-          this.modules.unshift({id:data.data.moduleId,name:data.data.moduleName});
-        }
-      },
-
-      //显示module的工具
-      showNodeTools(index,pen){
-        this.nodesArr.forEach((item,i)=>{
-          item.data.show=i===index;
         })
-      },
-
-      //具体内容点击
-      nodeTools(node,tool){
-        this.moduleId=node.data.moduleId;
-        if(tool.id==='total'){
-          this.popDataShowUpdate('',false,node);
-          return
-        }
-        setTimeout(()=>{
-          this.popDataShowUpdate(tool.id,false,node)
-        },100)
-      },
-
-      popDataShowUpdate(key,flag,node){//key 显示对应的弹窗 flag是否不显示工具栏
-        this.popDataShow={
-          endpoint:false,
-          asset:false,
-          total:false,
-          other:false,
-          info:false,
-          alert:false,
-          main:false,
-        };
-        if(key==='total'){
-          this.chartDataInfo={...node.data,...this.chartGetData.find(item=>item.id===node.id)};
-        }
-        this.$nextTick(()=>{
-          this.popDataShow[key]=true;
-        });
-        if(flag){ // 处理关闭后 缩放后显示工具按钮的问题
-          this.moduleId='';
-          this.showNodeTools('');
-        }
-        if(key==='asset'||key==='alert'||key==='endpoint'){
-          this.showNodeTools('');
-        }
-      },
-
-      /*topology 方法*/
-      onDrag(event,node){
-        this.dragFlag=false;
-        setTimeout(()=>{
-          this.dragFlag=true;
-        },100);
-        event.dataTransfer.setData('Text',JSON.stringify({...node.data,data:{imageId:node.data.imageId}}));
-      },
-      dragFlagChange(node){
-        getTopology(this.topologyIndex).addNode(
-          {
-            ...node.data,
-            rect:{
-              ...node.data.rect,
-              x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/2-50,
-              y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight/2-50
-            },
-            data:{imageId:node.data.imageId}
-          });
-        setTimeout(()=>{
-          this.dragFlag=true;
-        },100);
-      },
-
-      onMessage(event,data,e){
-        // console.log('onMessage',event,data);
-        // console.log(getTopology(this.topologyIndex))
-        // this.notModuleIDArr=[];
-        if(data){
-          this.notModuleIDArr.forEach(item=>{
-            if(item.id===data.id){
-              item.rect=data.rect
-            }
-          })
-        }
-        if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
-          if(data.type===0&& !data.data.moduleId){
-            data.data={
-              ...data.data,
-              moduleId:'',
-              moduleName:'',
-              show:false,
-              error:false,
-              animatePlay:false,
-              fillStyle:data.fillStyle,
-              strokeStyle:data.strokeStyle,
-              gradientColor:"#bae7ff",
-              gradientType:0,
-              lineWidth:this.nodeDefaultWidth(data.name),
-              iconToolState:true,
-              //chart 配置项
-              valueMapping:[{
-                color:{
-                  line:'#000000',
-                  fill:'#ffffff',
-                  text:'#000000',
-                },
-                value:'base',
-                animateType:'base',
-                level:0,
-                base:true,
-              }],
-              valueMappingSort:'asc',
-              expressArr:[""],
-              legends:[""],
-              tooltipShow:true,
-              panelName:'topologyName',
-              unit:2,
-              type:'line',
-              displayChart:true,
-              aggregation:'last',
-              title:'',
-              url:'',
-            }
-          }else if(data.type==1&& !data.data){
-            //连线是否自动计算锚点
-            // data.manualCps=true;
-            data.animateColor='#FA901C';
-            data.data={
-              animatePlay:false,
-              strokeStyle:data.strokeStyle,
-              animateColor:data.animateColor,
-              arrowColor:"#00000",
-              fromArrowColor:"#00000",
-              toArrowColor:"#00000",
-              lineWidth:1,
-              //chart 配置项
-              valueMapping:[{
-                color:{
-                  line:'#000000',
-                  fill:'#ffffff',
-                  text:'#000000',
-                },
-                value:'base',
-                animateType:'base',
-                level:0,
-                base:true,
-              }],
-              valueMappingSort:'asc',/*desc*/
-              expressArr:[""],
-              legends:[""],
-              tooltipShow:true,
-              panelName:'topologyName',
-              unit:2,
-              type:'line',
-              displayChart:true,
-              aggregation:'last',
-              title:'',
-              moduleName:'',
-              url:'',
-            };
+      })
+    },
+    // 赋值动画
+    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+      let maxLevel = 0
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
           }
-          if(data.type===0||data.type===1){
-            data.lineWidth=data.data.lineWidth;
-          }
-        }
-
-        switch(event){
-          case 'moveInNode':
-          case 'moveInLine':
-            if(this.timer3){
-              clearTimeout(this.timer3);
-              this.timer3=null
-            }
-            this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
-            this.tooltipPosition.show=false;
-            setTimeout(()=>{
-              this.tooltipPosition.show=true;
-              let ePosition=window.ePosition;
-              let boxWidth=document.getElementsByClassName('page')[0].offsetWidth;
-              let boxHeight=document.getElementsByClassName('page')[0].offsetHeight;
-              this.tooltipPosition.left=ePosition.layerX+20;
-              this.tooltipPosition.top=ePosition.layerY;
-              this.$nextTick(()=>{
-                if(this.$refs['topoTooltip']){
-                  if((boxWidth/2)>ePosition.layerX){
-                    this.tooltipPosition.left=ePosition.layerX+20;
-                  }else {
-                    this.tooltipPosition.left=ePosition.layerX - 20 - this.$refs['topoTooltip'].offsetWidth;
-                  }
-                  if(boxHeight>(ePosition.layerY+this.$refs['topoTooltip'].offsetHeight)){
-                    this.tooltipPosition.top=ePosition.layerY;
-                  }else {
-                    this.tooltipPosition.top=ePosition.layerY - this.$refs['topoTooltip'].offsetHeight;
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              pen.data.valueMapping.forEach((item, index) => {
+                if (item.value === 'base') { return }
+                if (queryItem.showValue > item.value) {
+                  queryItem.level = item.level
+                  if (maxLevel < item.level) {
+                    maxLevel = item.level
                   }
                 }
               })
-            },100);
-            break;
-          case 'moveOutNode':
-          case 'moveOutLine':
-            // this.tooltipPosition.show=false;
-            // return
-            if(!this.timer3){
-              this.timer3=setTimeout(()=>{
-                this.tooltipPosition.show=false;
-                this.timer3=null
-              },50)
-            }else{
-              clearTimeout(this.timer3);
-              this.timer3=setTimeout(()=>{
-                this.tooltipPosition.show=false;
-                this.timer3=null
-              },50)
-            }
-            break;
+            })
+          }
+        })
+      }
+      if (maxLevel !== 0) {
+        if (pen.type === 0) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.fontColor = selLevel.color.text
+            pen.fillStyle = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.bkType = 0
+          }
+          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.animateColor = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.animateType = selLevel.animateType
+            pen.fontColor = selLevel.color.text
+          }
+          onChangeAnimateLine(pen, pen.animateType)
         }
-        // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-        setTimeout(()=>{
-          switch(event){
-            case 'node':
-            case 'addNode':
-              this.modulesDiff(data);
-              if(data.data.expressArr.length===0&&event!=='node'){
-                data.data.expressArr.push('');
-                data.data.legends.push('');
+      } else {
+        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimate(pen, pen.animateType)
+        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      }
+    },
+    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              // 图表中每条线的名字,后半部分
+              let host = ''// up,
+              if (queryItem.metric.__name__) {
+                host = `${queryItem.metric.__name__}{`// up,
               }
-              this.props={
-                node:data,
-                line:null,
-                multi:false,
-                expand:this.props.expand,
-                nodes:null,
-                locked:data.locked,
-                pen:data,
-                pens:null,
-              };
-              this.$nextTick(()=>{
-                if(this.$refs.CanvasProps){
-                  if(this.penId!==data.id){
-                    this.$refs.CanvasProps.tab='1';
+              const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+              // 设置时间-数据格式对
+              let tempArr = []
+              let dpsArr = []
+              tempArr = queryItem.values
+              dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+              dpsArr = dpsArr.map(item => {
+                return [item[0], [item[1][0], Number(item[1][1])]]
+              })
+              // 判断是否有数据, && tagsArr.length > 0
+              if (dpsArr.length) {
+                tagsArr.forEach((tag, i) => {
+                  if (tag !== '__name__') {
+                    host += `${tag}="${queryItem.metric[tag]}",`
                   }
-                  this.penId=data.id;
+                })
+                if (host.endsWith(',')) {
+                  host = host.substr(0, host.length - 1)
                 }
-              });
-              break;
-            case 'line':
-            case 'addLine':
-              this.props={
-                node:null,
-                line:data,
-                multi:false,
-                nodes:null,
-                locked:data.locked,
-                pen:data,
-                pens:null,
-              };
-              this.$nextTick(()=>{
-                if(this.$refs.CanvasProps){
-                  if(this.penId!==data.id){
-                    this.$refs.CanvasProps.tab='1';
+                if (queryItem.metric.__name__) {
+                  host += '}'
+                }
+                if (!host || host === '') {
+                  host = pen.data.expressArr[innerPos]
+                }
+                // 处理legend别名
+                let alias = this.dealLegendAlias(host, pen.data.legends[innerPos])
+                if (!alias || alias === '') {
+                  alias = host
+                }
+                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
+                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
+                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+              }
+            })
+          }
+        })
+      }
+      return res
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取project Info
+    getProjectData (n) {
+      // 获取projectInfo
+      this.projectInfo.loading = true
+      this.$get('project/info', { id: n.id }).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
+          if (!this.projectInfo.total) {
+            this.projectInfo.total = 0
+          }
+        }
+      })
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label
+    },
+    // 获取module
+    getModule () {
+      this.projectInfo.loading = true
+      this.$get('project/info', { id: this.obj.id }).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.allModules = response.data.module
+          this.modulesDiff()
+        }
+      })
+    },
+
+    getNodesArr () {
+      if (!getTopology(this.topologyIndex)) return
+      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+        if (!item.data) {
+          item.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            expressArr: []
+          }
+        }
+        return item.type === 0
+      })
+      // this.nodesArr=this.nodesArr.map(item=>{
+      //   if(!item.data){
+      //     item.data={
+      //       moduleId:'',
+      //       moduleName:'',
+      //       show:false,
+      //       error:false,
+      //       expressArr:[],
+      //     }
+      //   }
+      //   return {
+      //     rect:item.rect,
+      //     data:item.data
+      //   }
+      // });
+      // 打开动画 是否更新顶部图标
+      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+    },
+
+    modelTopClick (item, index) {
+
+    },
+    // 摘除已选择的module
+    modulesDiff (data) {
+      this.modules = this.allModules
+      if (getTopology(this.topologyIndex).data.pens) {
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (item.type == 0) {
+            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
+          }
+        })
+      }
+      if (data && data.data && data.data.moduleId) {
+        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
+      }
+    },
+
+    // 显示module的工具
+    showNodeTools (index, pen) {
+      this.nodesArr.forEach((item, i) => {
+        item.data.show = i === index
+      })
+    },
+
+    // 具体内容点击
+    nodeTools (node, tool) {
+      this.moduleId = node.data.moduleId
+      if (tool.id === 'total') {
+        this.popDataShowUpdate('', false, node)
+        return
+      }
+      setTimeout(() => {
+        this.popDataShowUpdate(tool.id, false, node)
+      }, 100)
+    },
+
+    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
+      this.popDataShow = {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      }
+      if (key === 'total') {
+        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
+      }
+      this.$nextTick(() => {
+        this.popDataShow[key] = true
+      })
+      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
+        this.moduleId = ''
+        this.showNodeTools('')
+      }
+      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
+        this.showNodeTools('')
+      }
+    },
+
+    /* topology 方法 */
+    onDrag (event, node) {
+      this.dragFlag = false
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+    },
+    dragFlagChange (node) {
+      getTopology(this.topologyIndex).addNode(
+        {
+          ...node.data,
+          rect: {
+            ...node.data.rect,
+            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
+          },
+          data: { imageId: node.data.imageId }
+        })
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 100)
+    },
+
+    onMessage (event, data, e) {
+      // console.log('onMessage',event,data);
+      // console.log(getTopology(this.topologyIndex))
+      // this.notModuleIDArr=[];
+      if (data) {
+        this.notModuleIDArr.forEach(item => {
+          if (item.id === data.id) {
+            item.rect = data.rect
+          }
+        })
+      }
+      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
+        if (data.type === 0 && !data.data.moduleId) {
+          data.data = {
+            ...data.data,
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            animatePlay: false,
+            fillStyle: data.fillStyle,
+            strokeStyle: data.strokeStyle,
+            gradientColor: '#bae7ff',
+            gradientType: 0,
+            lineWidth: this.nodeDefaultWidth(data.name),
+            iconToolState: true,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc',
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            url: ''
+          }
+        } else if (data.type == 1 && !data.data) {
+          // 连线是否自动计算锚点
+          // data.manualCps=true;
+          data.animateColor = '#FA901C'
+          data.data = {
+            animatePlay: false,
+            strokeStyle: data.strokeStyle,
+            animateColor: data.animateColor,
+            arrowColor: '#00000',
+            fromArrowColor: '#00000',
+            toArrowColor: '#00000',
+            lineWidth: 1,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc', /* desc */
+            expressArr: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            moduleName: '',
+            url: ''
+          }
+        }
+        if (data.type === 0 || data.type === 1) {
+          data.lineWidth = data.data.lineWidth
+        }
+      }
+
+      switch (event) {
+        case 'moveInNode':
+        case 'moveInLine':
+          if (this.timer3) {
+            clearTimeout(this.timer3)
+            this.timer3 = null
+          }
+          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
+          this.tooltipPosition.show = false
+          setTimeout(() => {
+            this.tooltipPosition.show = true
+            const ePosition = window.ePosition
+            const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
+            this.tooltipPosition.left = ePosition.layerX + 20
+            this.tooltipPosition.top = ePosition.layerY
+            this.$nextTick(() => {
+              if (this.$refs.topoTooltip) {
+                if ((boxWidth / 2) > ePosition.layerX) {
+                  this.tooltipPosition.left = ePosition.layerX + 20
+                } else {
+                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                }
+                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.layerY
+                } else {
+                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                }
+              }
+            })
+          }, 100)
+          break
+        case 'moveOutNode':
+        case 'moveOutLine':
+          // this.tooltipPosition.show=false;
+          // return
+          if (!this.timer3) {
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          } else {
+            clearTimeout(this.timer3)
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          }
+          break
+      }
+      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+      setTimeout(() => {
+        switch (event) {
+          case 'node':
+          case 'addNode':
+            this.modulesDiff(data)
+            if (data.data.expressArr.length === 0 && event !== 'node') {
+              data.data.expressArr.push('')
+              data.data.legends.push('')
+            }
+            this.props = {
+              node: data,
+              line: null,
+              multi: false,
+              expand: this.props.expand,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'line':
+          case 'addLine':
+            this.props = {
+              node: null,
+              line: data,
+              multi: false,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            break
+          case 'multi':
+            this.props = {
+              node: null,
+              line: null,
+              multi: true,
+              nodes: data.length > 1 ? data : null,
+              locked: this.getLocked({ nodes: data }),
+              pen: null,
+              pens: data.length > 1 ? data : null
+            }
+            break
+          case 'space':
+            this.penId = undefined
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          case 'moveOut':
+            break
+          case 'moveNodes':
+          case 'resizeNodes':
+            if (data.length > 1) {
+              this.props = {
+                node: null,
+                line: null,
+                multi: true,
+                nodes: data,
+                locked: this.getLocked({ nodes: data }),
+                pen: null,
+                pens: null
+              }
+            } else {
+              this.props = {
+                node: data[0],
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: data[0],
+                pens: null
+              }
+            }
+            break
+          case 'resize':
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            this.toolShow.attrCord = [domRect.width - 350, 0]
+            this.toolShow.height = domRect.height
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            break
+          case 'scale':
+            if (this.$refs.topTool) {
+              this.$refs.topTool.option.scale = data
+            }
+            break
+          case 'locked':
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          case 'delete':
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+        }
+        switch (event) {
+          case 'node':
+          case 'line':
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.moduleId = ''
+            this.showNodeTools('')
+            this.popDataShowUpdate('', false)
+            if (!this.editTopologyFlag) {
+              getTopology(this.topologyIndex)
+            }
+            break
+        }
+        switch (event) {
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.getNodesArr()
+            // if(!this.timer2){
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }else{
+            //   clearTimeout(this.timer2);
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }
+            break
+        }
+      }, 0)
+    },
+
+    getLocked (data) {
+      let locked = true
+      if (data.nodes && data.nodes.length) {
+        for (const item of data.nodes) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+      if (locked && data.lines) {
+        for (const item of data.lines) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+
+      return locked
+    },
+
+    onUpdateProps (node) {
+      // 如果是node属性改变，需要传入node，重新计算node相关属性值
+      // 如果是line属性改变，无需传参
+      getTopology(this.topologyIndex).updateProps(node)
+    },
+
+    handleAvatarSuccess () {
+
+    },
+    beforeAvatarUpload (file, fileList) {
+      const this_ = this
+      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG) {
+        this.$message.error(this_.$t('project.topology.imgFormat'))
+        return false
+      }
+      // if (!isLt2M) {
+      //   this.$message.error( this_.$t('project.topology.imgSize'));
+      //   return false;
+      // }
+      const isSize = new Promise(function (resolve, reject) {
+        const width = 100
+        const height = 100
+        const _URL = window.URL || window.webkitURL
+        const img = new Image()
+        img.onload = function () {
+          const valid = img.width > width && img.height > height
+          valid ? resolve() : reject()
+        }
+        img.src = _URL.createObjectURL(file.raw)
+      }).then(() => {
+        if (isJPG) {
+          this.file = file.raw
+        }
+        return file.raw
+      }, () => {
+        this.$message.error(this_.$t('project.topology.imgMeasure'))
+        return Promise.reject()
+      })
+      return false
+    },
+
+    toolShowChange (attr) {
+      this.toolShow[attr] = !this.toolShow[attr]
+    },
+    /* topology 方法 */
+    end (v) {
+
+    },
+    /* tools 方法 */
+
+    imgUpload () {
+      const this_ = this
+      if (!this.uploadPic.unit) {
+        this.$message({
+          message: this_.$t('project.topology.unitError'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.file) {
+        this.$message({
+          message: this_.$t('project.topology.imgError'),
+          type: 'error'
+        })
+        return
+      }
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.file)
+      if (this.uploadPic.name) {
+        form.append('name', this.uploadPic.name)
+      } else {
+        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+      }
+      form.append('unit', this.uploadPic.unit)
+      this.$post('/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.uploadPicShow = false
+          this.dealImg(`/project/topo/icon/${res.data.id}`).then((data) => {
+            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+            if (group) {
+              group.children.push({
+                ...imageTemp,
+                data: {
+                  ...imageTemp.data,
+                  text: res.data.imageName,
+                  image: data,
+                  imageId: res.data.id,
+                  unit: this.uploadPic.unit
+                }
+              })
+            } else {
+              this.tools.push({
+                group: this.uploadPic.unit,
+                children: [{
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit
                   }
-                  this.penId=data.id;
-                }
-              });
-              break;
-            case 'multi':
-              this.props={
-                node:null,
-                line:null,
-                multi:true,
-                nodes:data.length>1?data:null,
-                locked:this.getLocked({nodes:data}),
-                pen:null,
-                pens:data.length>1?data:null,
-              };
-              break;
-            case 'space':
-              this.penId=undefined;
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break;
-            case 'moveOut':
-              break;
-            case 'moveNodes':
-            case 'resizeNodes':
-              if(data.length>1){
-                this.props={
-                  node:null,
-                  line:null,
-                  multi:true,
-                  nodes:data,
-                  locked:this.getLocked({nodes:data}),
-                  pen:null,
-                  pens:null,
-                };
-              }else{
-                this.props={
-                  node:data[0],
-                  line:null,
-                  multi:false,
-                  nodes:null,
-                  locked:false,
-                  pen:data[0],
-                  pens:null,
-                };
-              }
-              break;
-            case 'resize':
-              let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-              this.toolShow.attrCord=[domRect.width-350,0];
-              this.toolShow.height=domRect.height;
-              if(getTopology(this.topologyIndex)){
-                getTopology(this.topologyIndex).canvasPos=domRect;
-              }
-              break;
-            case 'scale':
-              if(this.$refs.topTool){
-                this.$refs.topTool.option.scale=data;
-              }
-              break;
-            case 'locked':
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break;
-            case "delete":
-              this.props={
-                node:null,
-                line:null,
-                multi:false,
-                nodes:null,
-                locked:false,
-                pen:null,
-                pens:null,
-              };
-              break
-          }
-          switch(event){
-            case 'node':
-            case 'line':
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.moduleId='';
-              this.showNodeTools('');
-              this.popDataShowUpdate('',false);
-              if(!this.editTopologyFlag){
-                getTopology(this.topologyIndex)
-              }
-              break;
-          }
-          switch(event){
-            case 'space':
-            case 'scale':
-            case 'translate':
-              this.getNodesArr();
-              // if(!this.timer2){
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }else{
-              //   clearTimeout(this.timer2);
-              //   this.timer2=setTimeout(()=>{
-              //     this.getNodesArr();
-              //     this.timer2=null
-              //   },300)
-              // }
-              break;
-          }
-        },0);
-      },
-
-      getLocked(data){
-        let locked=true;
-        if(data.nodes&&data.nodes.length){
-          for(const item of data.nodes){
-            if(!item.locked){
-              locked=false;
-              break;
+                }]
+              })
             }
-          }
+          })
+        } else {
+          this.$message.error(res.msg)
         }
-        if(locked&&data.lines){
-          for(const item of data.lines){
-            if(!item.locked){
-              locked=false;
-              break;
-            }
-          }
+      })
+    },
+
+    delImg (item) {
+      this.$delete('/project/topo/icon?ids=' + item.data.imageId).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.addNodeInit()
+        } else {
+          this.$message.error(res.msg)
         }
+      })
+    },
 
-        return locked;
-      },
-
-      onUpdateProps(node){
-        // 如果是node属性改变，需要传入node，重新计算node相关属性值
-        // 如果是line属性改变，无需传参
-        getTopology(this.topologyIndex).updateProps(node);
-      },
-
-      handleAvatarSuccess(){
-
-      },
-      beforeAvatarUpload(file,fileList){
-        let this_=this;
-        let isJPG=(file.raw.type==='image/jpeg'||file.raw.type==='image/png');
-
-        const isLt2M=file.size/1024/1024<2;
-
-        if(!isJPG){
-          this.$message.error(this_.$t('project.topology.imgFormat'));
-          return false;
-        }
-        // if (!isLt2M) {
-        //   this.$message.error( this_.$t('project.topology.imgSize'));
-        //   return false;
-        // }
-        const isSize=new Promise(function(resolve,reject){
-          let width=100;
-          let height=100;
-          let _URL=window.URL||window.webkitURL;
-          let img=new Image();
-          img.onload=function(){
-            let valid=img.width>width&&img.height>height;
-            valid?resolve():reject();
-          }
-          img.src=_URL.createObjectURL(file.raw);
-        }).then(()=>{
-          if(isJPG){
-            this.file=file.raw;
-          }
-          return file.raw;
-        },()=>{
-          this.$message.error(this_.$t('project.topology.imgMeasure'));
-          return Promise.reject();
-        });
-        return false;
-      },
-
-      toolShowChange(attr){
-        this.toolShow[attr]= !this.toolShow[attr]
-      },
-      /*topology 方法*/
-      end(v){
-
-      },
-      /*tools 方法*/
-
-      imgUpload(){
-        let this_=this;
-        if(!this.uploadPic.unit){
-          this.$message({
-            message: this_.$t("project.topology.unitError"),
-            type: 'error'
-          });
-          return
-        }
-        if(!this.file) {
-          this.$message({
-            message: this_.$t("project.topology.imgError"),
-            type: 'error'
-          });
-          return
-        }
-        this.upload();
-      },
-      upload(){
-        let form=new FormData();
-        form.append("file",this.file);
-        if(this.uploadPic.name){
-          form.append("name",this.uploadPic.name)
-        }else{
-          form.append("name",this.file.name.substring(0,this.file.name.lastIndexOf(".")))
-        }
-        form.append("unit",this.uploadPic.unit);
-        this.$post('/project/topo/icon',form,{'Content-Type':'multipart/form-data'}).then(res=>{
-          if(res.code==200){
-            this.$message({duration:2000,type:'success',message:this.$t("tip.saveSuccess")});
-            this.uploadPicShow=false;
-            this.dealImg(`/project/topo/icon/${res.data.id}`).then((data)=>{
-              let group= this.tools.find(tool=>tool.group===this.uploadPic.unit);
-              if(group){
+    addNodeInit (imgidList) {
+      if (!this.fromOverView) {
+        this.$get('/project/topo/icon').then(res => {
+          this.imgageLoading = true
+          // this.tools[1].children=[];
+          const imgArr = []
+          const promiseArr = []
+          res.data.list.forEach((item, index) => {
+            item.imageName = item.name
+            delete item.name
+            promiseArr.push(this.dealImg(`/project/topo/icon/${item.id}`))
+            imgArr.push({ ...item })
+          })
+          Promise.all(promiseArr).then((res2) => {
+            this.iconArray = [...res.data.list]
+            this.iconArray.forEach((item, index) => {
+              item.image = res2[index]
+              const group = this.tools.find(tool => tool.group === item.unit)
+              if (group) {
                 group.children.push({
                   ...imageTemp,
-                  data:{
+                  data: {
                     ...imageTemp.data,
-                    text:res.data.imageName,
-                    image:data,
-                    imageId:res.data.id,
-                    unit:this.uploadPic.unit
+                    text: item.imageName,
+                    image: res2[index],
+                    imageId: item.id,
+                    unit: item.unit
                   }
                 })
-              } else{
+              } else {
                 this.tools.push({
-                  group:this.uploadPic.unit,
-                  children:[{
+                  group: item.unit,
+                  children: [{
                     ...imageTemp,
-                    data:{
+                    data: {
                       ...imageTemp.data,
-                      text:res.data.imageName,
-                      image:data,
-                      imageId:res.data.id,
-                      unit:this.uploadPic.unit
+                      text: item.imageName,
+                      image: res2[index],
+                      imageId: item.id,
+                      unit: item.unit
                     }
-                  }],
+                  }]
                 })
               }
             })
-          }else{
-            this.$message.error(res.msg);
+
+            this.imgInit = true
+          })
+        })
+      } else {
+        this.imgageLoading = true
+        const promiseArr = []
+        imgidList.forEach((item, index) => {
+          if (item.data.imageId) {
+            promiseArr.push(this.dealImg(`/project/topo/icon/${item.data.imageId}`))
+          } else {
+            promiseArr.push('')
           }
         })
-      },
-
-      delImg(item){
-        this.$delete('/project/topo/icon?ids='+item.data.imageId).then(res=>{
-          if(res.code==200){
-            this.$message({duration:2000,type:'success',message:this.$t("tip.deleteSuccess")});
-            this.addNodeInit();
-          }else{
-            this.$message.error(res.msg);
-          }
+        Promise.all(promiseArr).then(res2 => {
+          this.iconArray = imgidList.map(item => {
+            return {
+              id: item.data.imageId
+            }
+          })
+          this.iconArray.forEach((item, index) => {
+            if (item.id) {
+              item.image = res2[index]
+            }
+          })
+          this.imgInit = true
         })
-      },
-
-      addNodeInit(imgidList){
-        if(!this.fromOverView){
-          this.$get('/project/topo/icon').then(res=>{
-            this.imgageLoading=true;
-            // this.tools[1].children=[];
-            let imgArr=[];
-            let promiseArr=[];
-            res.data.list.forEach((item,index)=>{
-              item.imageName=item.name;
-              delete item.name;
-              promiseArr.push( this.dealImg(`/project/topo/icon/${item.id}`));
-              imgArr.push({...item});
-            });
-            Promise.all(promiseArr).then((res2)=>{
-              this.iconArray=[...res.data.list];
-              this.iconArray.forEach((item,index)=>{
-                item.image=res2[index];
-                let group= this.tools.find(tool=>tool.group===item.unit);
-                if(group){
-                  group.children.push({
-                    ...imageTemp,
-                    data:{
-                      ...imageTemp.data,
-                      text:item.imageName,
-                      image:res2[index],
-                      imageId:item.id,
-                      unit:item.unit
-                    }
-                  })
-                } else{
-                  this.tools.push({
-                    group:item.unit,
-                    children:[{
-                      ...imageTemp,
-                      data:{
-                        ...imageTemp.data,
-                        text:item.imageName,
-                        image:res2[index],
-                        imageId:item.id,
-                        unit:item.unit
-                      }
-                    }],
-                  })
-                }
-              });
-
-              this.imgInit=true;
-            })
-          })
-        }else{
-          this.imgageLoading=true;
-          let promiseArr=[];
-          imgidList.forEach((item,index)=>{
-            if(item.data.imageId){
-              promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
-            }else{
-              promiseArr.push('');
-            }
-          });
-          Promise.all(promiseArr).then(res2=>{
-            this.iconArray=imgidList.map(item=>{
-              return {
-                id:item.data.imageId
-              }
-            });
-            this.iconArray.forEach((item,index)=>{
-              if(item.id){
-                item.image=res2[index];
-              }
-            });
-            this.imgInit=true;
-          })
-        }
-      },
-
-      dealImg(url){
-        // 处理后端传过来的图片流乱码问题
-        if(url){
-          return new Promise((resolve,reject)=>{
-            this.$axios
-              .get(url,{
-                responseType:"arraybuffer"
-              })
-              .then(res=>{
-                return ("data:image/jpeg;base64,"+btoa(new Uint8Array(res.data).reduce((data,byte)=>data+String.fromCharCode(byte),"")));
-              })
-              .then(data=>{
-                resolve(data);
-                // changeImage(data,(img)=>{
-                //   resolve(img)
-                // })
-              })
-              .catch(err=>{
-              });
-          })
-        }
-      },
-
-      delPen(obj){//删除元素
-        getTopology(this.topologyIndex).delete(obj);
-        this.props={
-          node:null,
-          line:null,
-          multi:false,
-          nodes:null,
-          locked:false,
-          pen:null,
-          pens:null,
-        };
-      },
-
-      editTopology(val){
-        this.editTopologyFlag=true;
-        setTimeout(()=>{
-          getTopology(this.topologyIndex).lock(0);
-          getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
-            if(item.animatePlay){
-              item.stopAnimate();
-            }
-            if(!item.data.expressArr.length) {
-              item.data.expressArr=[''];
-              item.data.legends=[''];
-            }
-            item.animateType=item.data.animateType;
-            if(item.type===0){
-              item.fillStyle=item.data.fillStyle;
-              item.strokeStyle=item.data.strokeStyle;
-              item.animatePlay=false;
-              item.fontColor="#000000";
-              item.gradientType=item.data.gradientType?item.data.gradientType:0;
-              if(!item.data.gradientColor){
-                item.data.gradientType=0;
-                item.data.gradientColor="#bae7ff";
-              }
-              if(item.data.gradientType===0){
-                item.bkType=0;
-              }else{
-                item.bkType=1;
-              }
-            }else if(item.type===1){
-              item.animateColor=item.data.animateColor;
-              item.strokeStyle=item.data.strokeStyle;
-              item.arrowColor=item.data.arrowColor;
-              item.fromArrowColor=item.data.arrowColor;
-              item.toArrowColor=item.data.arrowColor;
-              item.animatePlay=false;
-              item.fontColor="#000000";
-            }
-          })
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-          this.toolShow.attrCord=[domRect.width-350,0];
-          this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-          getTopology(this.topologyIndex).caches={
-            index:0,
-            list:[JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
-          }
-        })
-      },
-
-      animateCanvas(){
-        getTopology(this.topologyIndex).render();
-        getTopology(this.topologyIndex).animate()
-      },
-
-      refreshTopology(){
-        // canvas.open()
-      },
-
-      dropdownClick(){
-
-      },
-
-      changeTopologyOpt(val,key){
-        // this.topologyData.data[key]=this.colorRGBtoHex(val);
-        // getTopology(this.index).data[key]=val;
-        // getTopology(this.index).render();
-        let dataOption=getTopology(this.topologyIndex).data;
-        dataOption[key]=this.lineName;
-        getTopology(this.topologyIndex).render();
-      },
-      notModuleIDArrChange(id){
-        this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
-      },
-      //保存
-      saveTopology(){
-        let topologyData=getTopology(this.topologyIndex).pureData();
-        let flag=true;
-        let arr=[];
-        this.notModuleIDArr=[];
-        topologyData.pens.forEach(item=>{
-          if(item.type===0&&((!item.data)||(item.data&& !item.data.moduleId))){
-            arr.push(item);
-            this.props={
-              node:null,
-              line:null,
-              multi:false,
-              nodes:null,
-              locked:false,
-              pen:null,
-              pens:null,
-            };
-            flag=false;
-          }
-        });
-        if(!flag){
-          this.notModuleIDArr=arr;
-        }
-        if(flag){
-          this.editTopologyFlag=false;
-          topologyData.rule=false;
-          topologyData.grid=false;
-          topologyData.gridSize=10;
-          topologyData.pens.forEach(item=>{
-            item.animatePlay=item.data.animatePlay;
-            item.data.animateType=item.animateType;
-            if(item.type===0&&JSON.stringify(item.data.imageId)){
-              item.image="";
-              item.animateFrames=[];
-              item.animateReady=null;
-              delete  item.img;
-              delete  item.lastImage;
-            }
-            item.data.expressArr=item.data.expressArr.filter((expression,i)=>{
-              if(!expression){
-                item.data.legends.splice(i,1);
-                return false
-              } else {
-                return true
-              }
-            })
-          });
-          if(this.penToolTipScale==getTopology(this.topologyIndex).data.scale){
-            getTopology(this.topologyIndex).data.scale=this.oldScale;
-          }
-          this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
-            this.prevent_opt.save=false;
-            if(res.code===200){
-              this.$message({
-                message: this.$t("tip.saveSuccess"),
-                type: 'success'
-              });
-              this.$nextTick(()=>{
-                getTopology(this.topologyIndex).lock(1);
-                let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-                this.toolShow.attrCord=[domRect.width-350,0];
-                this.toolShow.height=domRect.height;
-                getTopology(this.topologyIndex).canvasPos=domRect;
-                this.reload();
-              })
-            }
-          }).catch(res=>{
-            this.prevent_opt.save=false;
-            this.$message({
-              message: res.msg,
-              type: 'error'
-            });
-          });
-
-
-        }else{
-          this.$message({
-            showClose:true,
-            message:this.$t("project.topology.selMod"),
-            type:'warning'
-          })
-        }
-      },
-      //取消
-      cancelTopology(){
-        this.editTopologyFlag=false;
-        this.$nextTick(()=>{
-          getTopology(this.topologyIndex).lock(1);
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
-          this.toolShow.attrCord=[domRect.width-350,0];
-          this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-        });
-        this.reload();
-      },
-      //预览
-      previewTopology(){
-        let data=JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data));
-        data.pens.forEach((item)=>{
-          item.animatePlay=item.data.animatePlay;
-        });
-        this.topoPrevData=JSON.parse(JSON.stringify(data));
-        this.topoPrevData.rule=false;
-        this.topoPrevData.grid=false;
-        this.previewShow=true;
-      },
-
-      //联动 project
-      changeProjectTitle(){
-        let data=getTopology(this.topologyIndex).data;
-        this.topologyInfo={
-          fontSize:data.data.fontSize,
-          align:data.data.align,
-          fontColor:data.data.fontColor,
-          opacity:data.data.opacity,
-          name:data.name
-        }
-      },
-      /*tools 方法*/
-
-      winResize(){
-        setTimeout(()=>{
-          let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
-          // this.toolShow.attrCord=[domRect.width-350,0];
-          // this.toolShow.height=domRect.height;
-          getTopology(this.topologyIndex).canvasPos=domRect;
-          if(this.fromOverView){
-            getTopology(this.topologyIndex).open(this.oldTopologyData);
-          }
-          let flag=false;
-
-          let position={
-            x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
-            y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
-          }
-          getTopology(this.topologyIndex).data.pens.forEach(item=>{
-            if(flag){
-              return
-            }
-            if(item.rect.ex>position.x || item.rect.ey>position.y){
-              getTopology(this.topologyIndex).fitView(20);
-              flag=true
-            }
-          });
-          getTopology(this.topologyIndex).centerView(20);
-          this.getNodesArr();
-        },100)
-      },
-      canvasMove(e){// 画布上的移动 确定tooltip的位置
-        if(this.tooltipPosition.show){
-          return
-        }
-        window.ePosition=e
-      },
-      tooltipOver(){
-        clearTimeout(this.timer3);
-        this.timer3=null
-      },
-      tooltipOut(){
-        this.timer3=setTimeout(()=>{
-          this.tooltipPosition.show=false;
-          this.timer3=null
-        },50)
-      },
-      nodeDefaultWidth(nodeName){
-        switch(nodeName){
-          case 'myCube':
-          case "rectangleImg":
-            return 0;
-          default:
-            return 1;
-        }
-      },
-      previewBeforeClose(done){
-        this.$emit('changeTopologyIndexF');
-        done();
-      },
-      selpopIs(pen,state){//判断是否有图表
-        let flag=true;
-        if(state.id==='other'){
-          flag=false;
-        }
-        if(state.id==='total'&&pen.data.expressArr.length===0){
-          flag=false;
-        }
-        return flag
-      },
-      modelPopError(pen,state){
-        return false;
-        if(item.id==='asset'&&this.activeModelItem.assetError){
-          return true;
-        }
-        if(item.id==='alert'&&this.activeModelItem.alertError){
-          return true;
-        }
-        if(item.id==='endpoint'&&this.activeModelItem.endpointError){
-          return true;
-        }
-        return false;
-      },
-      redoIndexChange(index){
-        this.redoIndex=index
-      },
-      querySearch(queryString, cb) {
-        let restaurants = this.unitArr;
-        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      uploadPicChange(){
-        this.unitArr=[];
-        this.tools.forEach((item,index)=>{
-          if(index>0){
-            this.unitArr.push({
-              value:item.group
-            })
-          }
-        });
-        this.uploadPic.name='';
-        this.uploadPic.unit='';
-        this.file=null;
-        this.uploadPicShow=true;
-      },
-      zoomMap(num){
-        getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale+num);
-      },
-      penToBottom(){
-        getTopology(this.topologyIndex).bottom()
-      },
+      }
     },
-    destroyed(){
-      if(getTopology(this.topologyIndex)){
-        getTopology(this.topologyIndex).destroy();
-        setTopology(this.topologyIndex,null);
+
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve, reject) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+              // changeImage(data,(img)=>{
+              //   resolve(img)
+              // })
+            })
+            .catch(err => {
+            })
+        })
       }
-      if(document.getElementById('topology-canvas'+this.topologyIndexF)){
-        document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
+    },
+
+    delPen (obj) { // 删除元素
+      getTopology(this.topologyIndex).delete(obj)
+      this.props = {
+        node: null,
+        line: null,
+        multi: false,
+        nodes: null,
+        locked: false,
+        pen: null,
+        pens: null
       }
-      window.removeEventListener('resize',this.winResize)
+    },
+
+    editTopology (val) {
+      this.editTopologyFlag = true
+      setTimeout(() => {
+        getTopology(this.topologyIndex).lock(0)
+        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+          if (item.animatePlay) {
+            item.stopAnimate()
+          }
+          if (!item.data.expressArr.length) {
+            item.data.expressArr = ['']
+            item.data.legends = ['']
+          }
+          item.animateType = item.data.animateType
+          if (item.type === 0) {
+            item.fillStyle = item.data.fillStyle
+            item.strokeStyle = item.data.strokeStyle
+            item.animatePlay = false
+            item.fontColor = '#000000'
+            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
+            if (!item.data.gradientColor) {
+              item.data.gradientType = 0
+              item.data.gradientColor = '#bae7ff'
+            }
+            if (item.data.gradientType === 0) {
+              item.bkType = 0
+            } else {
+              item.bkType = 1
+            }
+          } else if (item.type === 1) {
+            item.animateColor = item.data.animateColor
+            item.strokeStyle = item.data.strokeStyle
+            item.arrowColor = item.data.arrowColor
+            item.fromArrowColor = item.data.arrowColor
+            item.toArrowColor = item.data.arrowColor
+            item.animatePlay = false
+            item.fontColor = '#000000'
+          }
+        })
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        this.toolShow.attrCord = [domRect.width - 350, 0]
+        this.toolShow.height = domRect.height
+        getTopology(this.topologyIndex).canvasPos = domRect
+        getTopology(this.topologyIndex).caches = {
+          index: 0,
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+        }
+      })
+    },
+
+    animateCanvas () {
+      getTopology(this.topologyIndex).render()
+      getTopology(this.topologyIndex).animate()
+    },
+
+    refreshTopology () {
+      // canvas.open()
+    },
+
+    dropdownClick () {
+
+    },
+
+    changeTopologyOpt (val, key) {
+      // this.topologyData.data[key]=this.colorRGBtoHex(val);
+      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).render();
+      const dataOption = getTopology(this.topologyIndex).data
+      dataOption[key] = this.lineName
+      getTopology(this.topologyIndex).render()
+    },
+    notModuleIDArrChange (id) {
+      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
+    },
+    // 保存
+    saveTopology () {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      let flag = true
+      const arr = []
+      this.notModuleIDArr = []
+      topologyData.pens.forEach(item => {
+        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
+          arr.push(item)
+          this.props = {
+            node: null,
+            line: null,
+            multi: false,
+            nodes: null,
+            locked: false,
+            pen: null,
+            pens: null
+          }
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.notModuleIDArr = arr
+      }
+      if (flag) {
+        this.editTopologyFlag = false
+        topologyData.rule = false
+        topologyData.grid = false
+        topologyData.gridSize = 10
+        topologyData.pens.forEach(item => {
+          item.animatePlay = item.data.animatePlay
+          item.data.animateType = item.animateType
+          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+            item.image = ''
+            item.animateFrames = []
+            item.animateReady = null
+            delete item.img
+            delete item.lastImage
+          }
+          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+            if (!expression) {
+              item.data.legends.splice(i, 1)
+              return false
+            } else {
+              return true
+            }
+          })
+        })
+        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+          getTopology(this.topologyIndex).data.scale = this.oldScale
+        }
+        this.$put('/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+          this.prevent_opt.save = false
+          if (res.code === 200) {
+            this.$message({
+              message: this.$t('tip.saveSuccess'),
+              type: 'success'
+            })
+            this.$nextTick(() => {
+              getTopology(this.topologyIndex).lock(1)
+              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+              this.toolShow.attrCord = [domRect.width - 350, 0]
+              this.toolShow.height = domRect.height
+              getTopology(this.topologyIndex).canvasPos = domRect
+              this.reload()
+            })
+          }
+        }).catch(res => {
+          this.prevent_opt.save = false
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        })
+      } else {
+        this.$message({
+          showClose: true,
+          message: this.$t('project.topology.selMod'),
+          type: 'warning'
+        })
+      }
+    },
+    // 取消
+    cancelTopology () {
+      this.editTopologyFlag = false
+      this.$nextTick(() => {
+        getTopology(this.topologyIndex).lock(1)
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        this.toolShow.attrCord = [domRect.width - 350, 0]
+        this.toolShow.height = domRect.height
+        getTopology(this.topologyIndex).canvasPos = domRect
+      })
+      this.reload()
+    },
+    // 预览
+    previewTopology () {
+      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+      data.pens.forEach((item) => {
+        item.animatePlay = item.data.animatePlay
+      })
+      this.topoPrevData = JSON.parse(JSON.stringify(data))
+      this.topoPrevData.rule = false
+      this.topoPrevData.grid = false
+      this.previewShow = true
+    },
+
+    // 联动 project
+    changeProjectTitle () {
+      const data = getTopology(this.topologyIndex).data
+      this.topologyInfo = {
+        fontSize: data.data.fontSize,
+        align: data.data.align,
+        fontColor: data.data.fontColor,
+        opacity: data.data.opacity,
+        name: data.name
+      }
+    },
+    /* tools 方法 */
+
+    winResize () {
+      setTimeout(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        // this.toolShow.attrCord=[domRect.width-350,0];
+        // this.toolShow.height=domRect.height;
+        getTopology(this.topologyIndex).canvasPos = domRect
+        if (this.fromOverView) {
+          getTopology(this.topologyIndex).open(this.oldTopologyData)
+        }
+        let flag = false
+
+        const position = {
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (flag) {
+            return
+          }
+          if (item.rect.ex > position.x || item.rect.ey > position.y) {
+            getTopology(this.topologyIndex).fitView(20)
+            flag = true
+          }
+        })
+        getTopology(this.topologyIndex).centerView(20)
+        this.getNodesArr()
+      }, 100)
+    },
+    canvasMove (e) { // 画布上的移动 确定tooltip的位置
+      if (this.tooltipPosition.show) {
+        return
+      }
+      window.ePosition = e
+    },
+    tooltipOver () {
+      clearTimeout(this.timer3)
+      this.timer3 = null
+    },
+    tooltipOut () {
+      this.timer3 = setTimeout(() => {
+        this.tooltipPosition.show = false
+        this.timer3 = null
+      }, 50)
+    },
+    nodeDefaultWidth (nodeName) {
+      switch (nodeName) {
+        case 'myCube':
+        case 'rectangleImg':
+          return 0
+        default:
+          return 1
+      }
+    },
+    previewBeforeClose (done) {
+      this.$emit('changeTopologyIndexF')
+      done()
+    },
+    selpopIs (pen, state) { // 判断是否有图表
+      let flag = true
+      if (state.id === 'other') {
+        flag = false
+      }
+      if (state.id === 'total' && pen.data.expressArr.length === 0) {
+        flag = false
+      }
+      return flag
+    },
+    modelPopError (pen, state) {
+      return false
+      if (item.id === 'asset' && this.activeModelItem.assetError) {
+        return true
+      }
+      if (item.id === 'alert' && this.activeModelItem.alertError) {
+        return true
+      }
+      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
+        return true
+      }
+      return false
+    },
+    redoIndexChange (index) {
+      this.redoIndex = index
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.unitArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    uploadPicChange () {
+      this.unitArr = []
+      this.tools.forEach((item, index) => {
+        if (index > 0) {
+          this.unitArr.push({
+            value: item.group
+          })
+        }
+      })
+      this.uploadPic.name = ''
+      this.uploadPic.unit = ''
+      this.file = null
+      this.uploadPicShow = true
+    },
+    zoomMap (num) {
+      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+    },
+    penToBottom () {
+      getTopology(this.topologyIndex).bottom()
     }
+  },
+  destroyed () {
+    if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).destroy()
+      setTopology(this.topologyIndex, null)
+    }
+    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
+      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    }
+    window.removeEventListener('resize', this.winResize)
   }
+}
 </script>
 <style lang="scss">
   .el-dropdown-menu {
@@ -2494,7 +2486,6 @@
     color: #F7BA78;
   }
 
-
   .right-content-P1{
     border: 1px solid ;
   }
@@ -2502,7 +2493,6 @@
     text-align: center;
   }
 
-
 </style>
 <style lang="scss" scoped>
   .project-topology-tool {
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 0f8e5857c..2c4c75ffc 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -47,7 +47,7 @@
         <el-form-item :label="$t('config.account.roles')" prop="roleIds">
           <el-select @change="()=>{this.$forceUpdate()}" clearable collapse-tags placeholder="" popper-class="config-dropdown" size="small" v-model="editUser.roleIds" :disabled="(editUser.username==='admin') && editUser.userId==1" id="account-input-roleIds">
             <template v-for="role in roles">
-              <el-option :label="role.i18n?$t(role.i18n):role.name" :value="role.id"></el-option>
+              <el-option :key="role.id" :label="role.i18n?$t(role.i18n):role.name" :value="role.id"></el-option>
             </template>
           </el-select>
         </el-form-item>
@@ -90,226 +90,226 @@
   </div>
 </template>
 <script>
-  export default {
-    name: "accountBox",
-    props: {
-      user: Object,
-      roles:Array
-    },
-    computed: {
-      isCurrentUser() {
-        return function(username) {
-          return localStorage.getItem('nz-username') == username;
-        }
-      },
-      addDisabled() {
-        let enabled = this.selectableScripts.filter(item => {
-          return !item.disabled
-        });
-        return enabled.length === 0;
+export default {
+  name: 'accountBox',
+  props: {
+    user: Object,
+    roles: Array
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
       }
     },
-    created() {
-      this.getRoles();
-    },
-    data() {
-      let validatePassword = (rule, value, callback) => { // 确认密码的二次校验
-        if(value === '' && this.editUser.password){
-          callback(new Error(this.$t('config.account.inputConfirmPwd')));
-        }else if (value !== this.editUser.password) {
-          callback(new Error(this.$t('config.account.confirmPwdErr')));
-        } else {
-          callback();
-        }
-      };
-      return {
-        scriptIds: [],
-        rules: { //表单校验规则
-          username: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          password: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          passwordChange: [
-            { validator: validatePassword, trigger: 'blur' },
-            {required: true, message: '', trigger: 'blur'},
-          ],
-          roleIds: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          email: [
-            {type: 'email', message: this.$t('validate.email')}
-          ]
-        },
-        rules2: { //表单校验规则
-          username: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          passwordChange: [
-            { validator: validatePassword, trigger: 'blur' },
-          ],
-          roleIds: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          email: [
-            {type: 'email', message: this.$t('validate.email')}
-          ]
-        },
-        editUser: {},
-        scripts: [],
-        selectableScripts: [],
-        roles:[],
-        passwordChange:'',
+    addDisabled () {
+      const enabled = this.selectableScripts.filter(item => {
+        return !item.disabled
+      })
+      return enabled.length === 0
+    }
+  },
+  created () {
+    this.getRoles()
+  },
+  data () {
+    const validatePassword = (rule, value, callback) => { // 确认密码的二次校验
+      if (value === '' && this.editUser.password) {
+        callback(new Error(this.$t('config.account.inputConfirmPwd')))
+      } else if (value !== this.editUser.password) {
+        callback(new Error(this.$t('config.account.confirmPwdErr')))
+      } else {
+        callback()
       }
+    }
+    return {
+      scriptIds: [],
+      rules: { // 表单校验规则
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        passwordChange: [
+          { validator: validatePassword, trigger: 'blur' },
+          { required: true, message: '', trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        email: [
+          { type: 'email', message: this.$t('validate.email') }
+        ]
+      },
+      rules2: { // 表单校验规则
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        passwordChange: [
+          { validator: validatePassword, trigger: 'blur' }
+        ],
+        roleIds: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        email: [
+          { type: 'email', message: this.$t('validate.email') }
+        ]
+      },
+      editUser: {},
+      scripts: [],
+      selectableScripts: [],
+      roles: [],
+      passwordChange: ''
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      console.log('cancel function ')
+      this.$emit('close', refresh)
     },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.prevent_opt.save=false;
-        console.log('cancel function ')
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*保存*/
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$refs.accountForm.validate(valid => {
-          if (valid) {
-            let editUser = JSON.parse(JSON.stringify(this.editUser))
-            editUser.roleIds = [editUser.roleIds]
-            if (this.editUser.userId) {
-              this.$put('sys/user/update',editUser).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              this.$post('sys/user/save', editUser).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.accountForm.validate(valid => {
+        if (valid) {
+          const editUser = JSON.parse(JSON.stringify(this.editUser))
+          editUser.roleIds = [editUser.roleIds]
+          if (this.editUser.userId) {
+            this.$put('sys/user/update', editUser).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
           } else {
-            this.prevent_opt.save=false;
-            return false;
+            this.$post('sys/user/save', editUser).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      if (this.prevent_opt.save) { return }
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/user/delete?userIds=' + this.editUser.userId).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      /*删除*/
-      del() {
-        if(this.prevent_opt.save){ return }
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/user/delete?userIds=" + this.editUser.userId).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-          this.prevent_opt.save=false;
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      /*密码失去焦点 检验确认密码*/
-      passwordBlur(){
-        if(this.editUser.password&&this.editUser.passwordChange){
-          this.$refs.accountForm.validateField('passwordChange')
-        }
-      },
-      getScripts() {
-        this.$get("/alert/script?pageNo=1&pageSize=-1").then(response => {
-          this.scripts = response.data.list;
-          this.getSelectableScripts();
-        });
-        /*this.scripts = [
+        this.prevent_opt.save = false
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    /* 密码失去焦点 检验确认密码 */
+    passwordBlur () {
+      if (this.editUser.password && this.editUser.passwordChange) {
+        this.$refs.accountForm.validateField('passwordChange')
+      }
+    },
+    getScripts () {
+      this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
+        this.scripts = response.data.list
+        this.getSelectableScripts()
+      })
+      /* this.scripts = [
           {id: 1, name: "DOLBY"},
           {id: 2, name: "IMAX"},
           {id: 3, name: "CGS"},
           {id: 4, name: "LUXE"},
           {id: 5, name: "DST:X"},
         ];
-        this.getSelectableScripts();*/
-      },
+        this.getSelectableScripts(); */
+    },
 
-      getSelectableScripts() {
-        let userNotifications = this.editUser.notifications;
-        if (userNotifications) {
-          this.selectableScripts = this.scripts.map(item => {
-            let exist = this.editUser.notifications.some(n => {
-              return item.id === n.scriptId;
-            });
-            if (exist) {
-              this.$set(item, "disabled", true);
-            } else {
-              this.$set(item, "disabled", false);
-            }
-            return item;
-          });
-        } else {
-          this.selectableScripts = this.scripts.map(item => {
-            this.$set(item, "disabled", false);
-            return item;
-          });
-        }
-      },
-      addNotification() {
-        let scripts = this.selectableScripts.find(item => {
-          return item.disabled === false;
-        });
-        if (scripts) {
-          if (!this.editUser.notifications) {
-            this.editUser.notifications = [];
+    getSelectableScripts () {
+      const userNotifications = this.editUser.notifications
+      if (userNotifications) {
+        this.selectableScripts = this.scripts.map(item => {
+          const exist = this.editUser.notifications.some(n => {
+            return item.id === n.scriptId
+          })
+          if (exist) {
+            this.$set(item, 'disabled', true)
+          } else {
+            this.$set(item, 'disabled', false)
           }
-          this.editUser.notifications.push({scriptId: scripts.id, account: ""});
-        }
-      },
-
-      removeNotification(index) {
-        this.editUser.notifications.splice(index, 1);
+          return item
+        })
+      } else {
+        this.selectableScripts = this.scripts.map(item => {
+          this.$set(item, 'disabled', false)
+          return item
+        })
       }
     },
-    mounted() {
-      this.getScripts();
-    },
-    watch: {
-      //将prop里的user转为组件内部对象
-      user: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          this.editUser = JSON.parse(JSON.stringify(n));
-          this.editUser.roleIds=n.roles&&n.roles.map(t=>t.id)[0]
+    addNotification () {
+      const scripts = this.selectableScripts.find(item => {
+        return item.disabled === false
+      })
+      if (scripts) {
+        if (!this.editUser.notifications) {
+          this.editUser.notifications = []
         }
-      },
-      "editUser.notifications": {
-        deep: true,
-        immediate: true,
-        handler(n) {
-          this.getSelectableScripts();
-        }
-      },
+        this.editUser.notifications.push({ scriptId: scripts.id, account: '' })
+      }
     },
+
+    removeNotification (index) {
+      this.editUser.notifications.splice(index, 1)
+    }
+  },
+  mounted () {
+    this.getScripts()
+  },
+  watch: {
+    // 将prop里的user转为组件内部对象
+    user: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.editUser = JSON.parse(JSON.stringify(n))
+        this.editUser.roleIds = n.roles && n.roles.map(t => t.id)[0]
+      }
+    },
+    'editUser.notifications': {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.getSelectableScripts()
+      }
+    }
   }
+}
 </script>
 <style lang="scss">
   .right-box-account {
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 11488bd5f..5d2ef1086 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -87,7 +87,7 @@
                 </div>
                 <div class="line-100"></div>
                 <div class="endpoint-sub-table-body">
-                  <div :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
+                  <div v-for="(item, index) in assetList" :id="'select-asset-'+item.id" :key="index" :data="item.id" class="endpoint-sub-table-row">
                     <el-popover trigger="hover" placement="left-start">
                       <div class="asset-tip" style="display: table">
                         <div class="tip-row">
@@ -149,7 +149,7 @@
                 v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
               >
                 <div class="endpoint-param-pop">
-                  <div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
+                  <div v-for="(item, index) in currentModuleCopy.paramObj" :key="index">{{item.key}}={{item.value}}</div>
                 </div>
                 <el-input id="add-endpoint-module-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param  input-x-mini-22" v-model="currentModuleCopy.param" ></el-input>
               </el-popover>
@@ -160,7 +160,7 @@
                 trigger="hover"
               >
                 <div class="endpoint-param-pop">
-                  <div v-for="item,index in currentModuleCopy.labelModule">{{item.key}}={{item.value}}</div>
+                  <div v-for="(item, index) in currentModuleCopy.labelModule" :key="index">{{item.key}}={{item.value}}</div>
                 </div>
                 <el-input id="edit-labels" @click.native.stop="showEditLabelsBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param module-info-labels input-x-mini-22" :class="{'module-info-labels-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.labels"></el-input>
               </el-popover>
@@ -201,7 +201,7 @@
                         trigger="hover"
                       >
                         <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
+                          <div v-for="p in scope.row.paramObj" :key="p.key">{{p.key}}={{p.value}}</div>
                         </div>
                         <span slot="reference">
                           <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
@@ -221,7 +221,7 @@
                         trigger="hover"
                       >
                         <div class="endpoint-param-pop">
-                          <div v-for="p in scope.row.labelModule">{{p.key}}={{p.value}}</div>
+                          <div v-for="p in scope.row.labelModule" :key="p.key">{{p.key}}={{p.value}}</div>
                         </div>
                         <span slot="reference">
                           <span @mousedown.stop>{{scope.row.labels.length > 8 ? scope.row.labels.substring(0, 8) + '...' : scope.row.labels}}</span>
@@ -305,7 +305,7 @@
     <transition name="right-sub-box">
       <div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
         <div class="param-box">
-          <div class="param-box-row" v-for="(item, index) in tempParamObj">
+          <div v-for="(item, index) in tempParamObj" :key="index" class="param-box-row">
             <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
             <span class="param-box-row-eq">=</span>
             <el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
@@ -322,7 +322,7 @@
     <transition name="right-sub-box">
       <div @mousedown.stop class="right-sub-box" v-if="editLabelsBox.show" :style="'top: ' + editLabelsBox.top + 'px; left: ' + editLabelsBox.left + 'px;'">
         <div class="param-box">
-          <div class="param-box-row" v-for="(item, index) in tempLabelModule" style="position: relative">
+          <div v-for="(item, index) in tempLabelModule" :key="index" class="param-box-row" style="position: relative">
             <el-input placeholder="key" class="param-box-row-key input-x-mini-22" :class="{'input-error':inputKeyErr[index]}" v-model="item.key"  @input="validateInput(item.key,index)"></el-input>
             <span style="color: #F56C6C;font-size: 12px;position: absolute;top:25px;left: 10px" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
             <span class="param-box-row-eq">=</span>
@@ -340,695 +340,692 @@
 </template>
 
 <script>
-  export default {
-    name: "endpointBox",
-    props: {
-      currentProject: Object,
-      currentModule: Object,
-    },
-    data() {
-      return {
-        rules: {
-          projectId: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          moduleId: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-        },
-        vendorAndModelOptionData: [],
-        paramBorderColor: '#dcdfe6',
-        endpointTouch: false,
-        endpoint: {projectId: '', moduleId: '', endpointList: []},
-        currentModuleCopy: {},
-        currentProjectCopy: {id: ''},
-        tempParamObj: [],
-        tempLabelModule: [],
-        inputKeyErr:[],
-        tempEndpoint: {},
-        tempEndpoint2: {},
-        assetLoading: true,
-        rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
-        editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
-        editLabelsBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
-        moduleParamShow: false, //module默认参数param悬浮窗
-        assetSearch: {host: '', sn: '', text: '', label: 'Host', typeIds: "", modelId: "", idcId: "", dropdownShow: false}, //侧滑框中asset的搜索相关
-        assetPageObj: {pageNo: 1, pageSize: -1},
-        selectedAssets: [], //侧滑框中选中的asset
-        projectList: [],
-        moduleList: [],
-        assetList: [],
-        endpointList: [],
-        endpointTableTitle: [
-          {
-            label: this.$t("project.endpoint.asset"),
-            prop: 'asset',
-            width: 76,
-            show: true,
-          },{
-            label: this.$t("project.endpoint.host"),
-            prop: 'host',
-            width: 76,
-            show: true,
-          },{
-            label: this.$t("project.endpoint.port"),
-            prop: 'port',
-            width: 54,
-            show: true,
-          },{
-            label: this.$t("project.endpoint.labels"),
-            prop: 'labels',
-            width: 90,
-            show: true,
-          },{
-            label: this.$t("project.endpoint.param"),
-            prop: 'param',
-            width: 90,
-            show: true,
-          },{
-            label: this.$t("project.endpoint.path"),
-            prop: 'path',
-            width: 66,
-            show: true,
-          }
+export default {
+  name: 'endpointBox',
+  props: {
+    currentProject: Object,
+    currentModule: Object
+  },
+  data () {
+    return {
+      rules: {
+        projectId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
-        assetListAll:false,
-        assetListHalf:false,
-        typeList: [],
-        dcList: [],
-        modelList: [],
-      }
-    },
-    methods: {
-      //子弹框控制  obj: module或endpoint对象  type:1module2endpoint
-      showEditParamBox(show, obj, type, e) {
-        if (show) {
-          let position = e.target.getBoundingClientRect();
-          this.editParamBox.type = type;
-          if (this.editParamBox.type == 2) {
-            this.tempEndpoint = obj;
-          }
-          this.editParamBox.top = position.top - 227;
-          this.editParamBox.left = position.left - 48;
-          if (!obj.param) {
-            this.$set(obj, 'paramObj', []);
-            this.tempParamObj = [];
-          } else {
-            this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
-          }
+        moduleId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      vendorAndModelOptionData: [],
+      paramBorderColor: '#dcdfe6',
+      endpointTouch: false,
+      endpoint: { projectId: '', moduleId: '', endpointList: [] },
+      currentModuleCopy: {},
+      currentProjectCopy: { id: '' },
+      tempParamObj: [],
+      tempLabelModule: [],
+      inputKeyErr: [],
+      tempEndpoint: {},
+      tempEndpoint2: {},
+      assetLoading: true,
+      rightBox: { show: false, title: this.$t('project.endpoint.createEndpoint'), isEdit: false },
+      editParamBox: { show: false, top: 0, left: 0, type: 0 }, // param编辑弹框
+      editLabelsBox: { show: false, top: 0, left: 0, type: 0 }, // param编辑弹框
+      moduleParamShow: false, // module默认参数param悬浮窗
+      assetSearch: { host: '', sn: '', text: '', label: 'Host', typeIds: '', modelId: '', idcId: '', dropdownShow: false }, // 侧滑框中asset的搜索相关
+      assetPageObj: { pageNo: 1, pageSize: -1 },
+      selectedAssets: [], // 侧滑框中选中的asset
+      projectList: [],
+      moduleList: [],
+      assetList: [],
+      endpointList: [],
+      endpointTableTitle: [
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          width: 76,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.host'),
+          prop: 'host',
+          width: 76,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          width: 54,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.labels'),
+          prop: 'labels',
+          width: 90,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.param'),
+          prop: 'param',
+          width: 90,
+          show: true
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          width: 66,
+          show: true
+        }
+      ],
+      assetListAll: false,
+      assetListHalf: false,
+      typeList: [],
+      dcList: [],
+      modelList: []
+    }
+  },
+  methods: {
+    // 子弹框控制  obj: module或endpoint对象  type:1module2endpoint
+    showEditParamBox (show, obj, type, e) {
+      if (show) {
+        const position = e.target.getBoundingClientRect()
+        this.editParamBox.type = type
+        if (this.editParamBox.type == 2) {
+          this.tempEndpoint = obj
+        }
+        this.editParamBox.top = position.top - 227
+        this.editParamBox.left = position.left - 48
+        if (!obj.param) {
+          this.$set(obj, 'paramObj', [])
+          this.tempParamObj = []
         } else {
-          if (!this.editParamBox.show) {
-            return;
+          this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj))
+        }
+      } else {
+        if (!this.editParamBox.show) {
+          return
+        }
+        for (let i = 0; i < this.tempParamObj.length; i++) {
+          if (!this.tempParamObj[i].key || !this.tempParamObj[i].value) {
+            this.tempParamObj.splice(i, 1)
+            i--
           }
-          for (let i = 0; i < this.tempParamObj.length; i++) {
-            if (!this.tempParamObj[i].key || !this.tempParamObj[i].value) {
-              this.tempParamObj.splice(i, 1);
-              i--;
+        }
+        if (this.editParamBox.type == 1) {
+          this.currentModuleCopy.paramObj = this.tempParamObj
+          this.currentModuleCopy.param = this.paramToJson(this.tempParamObj)
+        } else if (this.editParamBox.type == 2) {
+          for (let i = 0; i < this.endpointList.length; i++) {
+            if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
+              this.endpointList[i].param = this.paramToJson(this.tempParamObj)
+              this.endpointList[i].paramObj = this.tempParamObj
+              break
             }
           }
-          if (this.editParamBox.type == 1) {
-            this.currentModuleCopy.paramObj = this.tempParamObj;
-            this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
-          } else if (this.editParamBox.type == 2) {
-            for (let i = 0; i < this.endpointList.length; i++) {
-              if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
-                this.endpointList[i].param = this.paramToJson(this.tempParamObj);
-                this.endpointList[i].paramObj = this.tempParamObj;
-                break;
+        }
+        this.tempParamObj = []
+      }
+      this.editParamBox.show = show
+    },
+
+    // 子弹框控制  obj: module或endpoint对象  type:1module2endpoint
+    showEditLabelsBox (show, obj, type, e) {
+      // editLabelsBox tempLabelModule labelModule
+      if (show) {
+        this.inputKeyErr = []
+        const position = e.target.getBoundingClientRect()
+        this.editLabelsBox.type = type
+        if (this.editLabelsBox.type == 2) {
+          this.tempEndpoint = obj
+        }
+        this.editLabelsBox.top = position.top - 227
+        this.editLabelsBox.left = position.left - 48
+        if (!obj.labels) {
+          this.$set(obj, 'labelModule', [])
+          this.tempLabelModule = []
+        } else {
+          this.tempLabelModule = JSON.parse(JSON.stringify(obj.labelModule))
+        }
+        this.tempLabelModule.forEach((item, index) => {
+          this.inputKeyErr.push(false)
+        })
+      } else {
+        if (!this.editLabelsBox.show) {
+          return
+        }
+        for (let i = 0; i < this.tempLabelModule.length; i++) {
+          if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value || this.inputKeyErr[i]) {
+            this.tempLabelModule.splice(i, 1)
+            i--
+          }
+        }
+        if (this.editLabelsBox.type == 1) {
+          this.currentModuleCopy.labelModule = this.tempLabelModule
+          this.currentModuleCopy.labels = this.paramToJson(this.tempLabelModule)
+        } else if (this.editLabelsBox.type == 2) {
+          for (let i = 0; i < this.endpointList.length; i++) {
+            if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
+              this.endpointList[i].labels = this.paramToJson(this.tempLabelModule)
+              this.endpointList[i].labelModule = this.tempLabelModule
+              break
+            }
+          }
+        }
+        this.tempLabelModule = []
+      }
+      this.editLabelsBox.show = show
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+
+    // 新增param
+    addParam () {
+      this.tempParamObj.push({ key: '', value: '' })
+    },
+
+    // 移除单个param
+    removeParam (index) {
+      this.tempParamObj.splice(index, 1)
+    },
+    // 新增labels
+    addLabels () {
+      this.tempLabelModule.push({ key: '', value: '' })
+      this.inputKeyErr.push(false)
+    },
+
+    // 移除单个param
+    removeLabels (index) {
+      this.tempLabelModule.splice(index, 1)
+      this.inputKeyErr.splice(index, 1)
+    },
+    validateInput: function (value, index) {
+      if (!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)) {
+        this.inputKeyErr.splice(index, 1, true)
+      } else {
+        this.inputKeyErr.splice(index, 1, false)
+      }
+    },
+    // 编辑endpoint
+    toEditEndpoint (endpoint) {
+      for (let i = 0; i < this.endpointList.length; i++) {
+        if (this.endpointList[i].isEdit) {
+          this.endpointList.splice(i, 1, JSON.parse(JSON.stringify(this.tempEndpoint2)))
+          this.endpointList[i].isEdit = false
+          break
+        }
+      }
+      endpoint.isEdit = true
+      this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint))
+    },
+    editEndpoint (endpoint) {
+      this.$refs.addEndpoint.validate((valid) => {
+        if (valid) {
+          endpoint.isEdit = false
+          this.tempEndpoint2 = {}
+        } else {
+          return false
+        }
+      })
+    },
+
+    // 移除endpoint
+    removeEndpoint (endpoint) {
+      endpoint.isEdit = false
+      for (let i = 0; i < this.endpointList.length; i++) {
+        if (this.endpointList[i].assetId == endpoint.assetId) {
+          this.endpointList.splice(i, 1)
+          this.assetList.unshift(endpoint.asset)
+          i--
+          break
+        }
+      }
+    },
+
+    /* 获取project列表 */
+    getProjectList () {
+      this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.projectList = response.data.list
+          this.getModuleList(this.currentProjectCopy.id)
+        }
+      })
+    },
+
+    /* 获取型号列表 */
+    getModelList () {
+      this.$get('model', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          const resultData = []
+          const modelData = response.data.list
+          for (let i = 0; i < modelData.length; i++) {
+            if (!modelData[i].vendor) {
+              continue
+            }
+            const obj = {}
+            obj.id = modelData[i].vendor.id
+            obj.code = modelData[i].vendor.code
+            obj.value = 'vendor-' + modelData[i].vendor.code
+            obj.label = modelData[i].vendor.value
+            obj.children = []
+            resultData.push(obj)
+          }
+          const result = []
+          const obj1 = {}
+          for (let i = 0; i < resultData.length; i++) {
+            if (!obj1[resultData[i].id]) {
+              result.push(resultData[i])
+              obj1[resultData[i].id] = true
+            }
+          }
+          for (let x = 0; x < result.length; x++) {
+            for (let y = 0; y < modelData.length; y++) {
+              if (!modelData[y].vendor) {
+                continue
+              }
+              if (result[x].code === modelData[y].vendor.code) {
+                const obj2 = {}
+                obj2.value = modelData[y].id
+                obj2.label = modelData[y].name
+                result[x].children.push(obj2)
               }
             }
           }
-          this.tempParamObj = [];
+          this.vendorAndModelOptionData = result
         }
-        this.editParamBox.show = show;
-      },
+      })
+    },
 
-      //子弹框控制  obj: module或endpoint对象  type:1module2endpoint
-      showEditLabelsBox(show, obj, type, e) {
-        //editLabelsBox tempLabelModule labelModule
-        if (show) {
-          this.inputKeyErr=[];
-          let position = e.target.getBoundingClientRect();
-          this.editLabelsBox.type = type;
-          if (this.editLabelsBox.type == 2) {
-            this.tempEndpoint = obj;
+    /* 获取类型列表 */
+    getTypeList () {
+      this.$get('sys/dict/all', { pageSize: -1, pageNo: 1, type: 'assetType' }).then(response => {
+        if (response.code === 200) {
+          this.typeList = response.data
+        }
+      })
+    },
+
+    /* 获取DC列表 */
+    getDCList () {
+      this.$get('idc', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.dcList = response.data.list
+        }
+      })
+    },
+
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
+    getAssetList () {
+      this.assetLoading = true
+      this.$get('asset', this.assetPageObj).then(response => {
+        if (response.code === 200) {
+          const respData = response.data.list
+          for (let i = 0; i < respData.length; i++) {
+            respData[i].sel = false
+            for (let j = 0; j < this.endpointList.length; j++) {
+              if (respData[i].id == this.endpointList[j].assetId) {
+                respData.splice(i, 1)
+                i--
+                break
+              }
+            }
           }
-          this.editLabelsBox.top = position.top - 227;
-          this.editLabelsBox.left = position.left - 48;
-          if (!obj.labels) {
-            this.$set(obj, 'labelModule', []);
-            this.tempLabelModule = [];
-          } else {
-            this.tempLabelModule = JSON.parse(JSON.stringify(obj.labelModule));
+          this.assetList = response.data.list
+        }
+      }).finally(() => {
+        setTimeout(() => {
+          this.assetLoading = false
+        }, 200)
+      })
+    },
+    // 回车搜索searchAsset
+    searchAssetKeydown (e) {
+      e = e || window.event
+      const keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode
+      if (keyCode === 13) {
+        this.searchAsset()
+      }
+    },
+    // endpoint弹框中的asset子弹框搜索
+    searchAsset () {
+      this.assetSearch.host = ''
+      this.assetSearch.sn = ''
+      if (this.assetSearch.label == 'Host') {
+        this.assetSearch.host = this.assetSearch.text
+        this.assetSearch.modelId = ''
+        this.assetSearch.typeIds = ''
+        this.assetSearch.idcId = ''
+      } else if (this.assetSearch.label == 'SN') {
+        this.assetSearch.sn = this.assetSearch.text
+        this.assetSearch.modelId = ''
+        this.assetSearch.typeIds = ''
+        this.assetSearch.idcId = ''
+      }
+      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
+      this.getAssetList()
+    },
+
+    changeProject (project) {
+      this.currentModuleCopy = {}
+      this.endpoint.moduleId = ''
+      this.endpoint.projectId = project.id
+      this.editParamBox.show = false
+      this.editLabelsBox.show = false
+      this.tempParamObj = []
+      this.endpointList = []
+      this.getAssetList()
+      this.getModuleList(project.id)
+    },
+
+    changeModule (module) {
+      this.endpoint.moduleId = module.id
+      this.editParamBox.show = false
+      this.editLabelsBox.show = false
+      this.tempParamObj = []
+    },
+
+    // 清空勾选的endpoint
+    clearSelection () {
+      const selections = this.$refs.endpointTable.selection
+      if (selections && selections.length > 0) {
+        for (let i = 0; i < selections.length; i++) {
+          this.removeEndpoint(selections[i])
+        }
+      }
+    },
+
+    // endpoint弹框中的asset子弹框里asset选择事件
+    selectAsset () {
+      this.$nextTick(() => {
+        let index = 0
+        this.assetList.forEach(item => {
+          if (item.sel) {
+            index++
           }
-          this.tempLabelModule.forEach((item,index)=>{
-            this.inputKeyErr.push(false);
+        })
+        if (index == 0) {
+          this.assetListAll = false
+          this.assetListHalf = false
+        } else if (index < this.assetList.length) {
+          this.assetListAll = true
+          this.assetListHalf = true
+        } else {
+          this.assetListAll = true
+          this.assetListHalf = false
+        }
+      })
+    },
+    // 批量添加到endpoint
+    addToEndpointList () {
+      const arr = []
+      this.assetListAll = false
+      this.assetListHalf = false
+      this.endpointTouch = true
+      this.endpointTouch = true
+      this.endpoint.projectId = this.currentProjectCopy.id
+      this.endpoint.moduleId = this.currentModuleCopy.id
+      this.assetList = this.assetList.filter(item => {
+        const flag = item.sel
+        if (flag) {
+          item.sel = false
+          const obj = {
+            isEdit: false,
+            assetId: item.id,
+            asset: item,
+            host: item.host,
+            param: this.currentModuleCopy.param ? this.currentModuleCopy.param : '',
+            paramObj: this.currentModuleCopy.paramObj ? this.currentModuleCopy.paramObj : {},
+            labels: this.currentModuleCopy.labels ? this.currentModuleCopy.labels : '',
+            labelModule: this.currentModuleCopy.labelModule ? this.currentModuleCopy.labelModule : {},
+            port: this.currentModuleCopy.port,
+            path: this.currentModuleCopy.path,
+            moduleId: this.currentModuleCopy.id
+          }
+          arr.push(obj)
+        }
+        return !flag
+      })
+      this.endpointList = this.endpointList.concat(arr)
+    },
+    // 全选的checkbox的事件
+    assetListSelAll (flag) {
+      if (flag) {
+        this.assetListHalf = false
+        this.assetList.forEach(item => {
+          item.sel = flag
+        })
+      } else if (!flag && !this.assetListHalf) {
+        this.assetList.forEach(item => {
+          item.sel = flag
+        })
+      } else if (!flag && this.assetListHalf) {
+        this.assetListHalf = false
+        this.assetListAll = true
+        this.assetList.forEach(item => {
+          item.sel = !flag
+        })
+      }
+    },
+    // 将param转为json字符串格式
+    paramToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      const jsonString = JSON.stringify(tempParam)
+      if (jsonString == '{}') {
+        return ''
+      } else {
+        return jsonString
+      }
+    },
+
+    // 获取endpoint弹框中module下拉框数据
+    getModuleList (projectId) {
+      this.$get('module', { projectId: projectId, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            try {
+              const param = response.data.list[i].param || '{}'
+              const tempObj = JSON.parse(param)
+              const labels = response.data.list[i].labels || '{}'
+              const tempObj1 = JSON.parse(labels)
+              response.data.list[i].paramObj = []
+              response.data.list[i].labelsModule = []
+              for (const k in tempObj) {
+                response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
+              }
+              for (const k in tempObj1) {
+                response.data.list[i].labelsModule.push({ key: k, value: tempObj1[k] })
+              }
+            } catch (err) {
+              // console.info(response.data.list[i], err);
+            }
+          }
+          this.moduleList = response.data.list
+        }
+      })
+    },
+
+    // 保存endpoint
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.endpoint.projectId = this.currentProjectCopy.id
+      this.endpoint.moduleId = this.currentModuleCopy.id
+      if (this.endpointList.length == 0) {
+        this.endpointTouch = true
+        this.$refs.addEndpoint.validate()
+        return false
+      }
+      // 对endpointList进行处理，避免携带过多无用数据
+      const endpointList = []
+      this.endpointList.forEach((item, index) => {
+        const endpoint = { moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host, labels: item.labels }
+        endpointList.push(endpoint)
+      })
+      this.$refs.addEndpoint.validate((valid) => {
+        if (valid) {
+          this.$post('endpoint', endpointList).then(response => {
+            this.prevent_opt.save = false
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
           })
         } else {
-          if (!this.editLabelsBox.show) {
-            return;
-          }
-          for (let i = 0; i < this.tempLabelModule.length; i++) {
-            if (!this.tempLabelModule[i].key || !this.tempLabelModule[i].value || this.inputKeyErr[i]) {
-              this.tempLabelModule.splice(i, 1);
-              i--;
-            }
-          }
-          if (this.editLabelsBox.type == 1) {
-            this.currentModuleCopy.labelModule = this.tempLabelModule;
-            this.currentModuleCopy.labels = this.paramToJson(this.tempLabelModule);
-          } else if (this.editLabelsBox.type == 2) {
-            for (let i = 0; i < this.endpointList.length; i++) {
-              if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
-                this.endpointList[i].labels = this.paramToJson(this.tempLabelModule);
-                this.endpointList[i].labelModule = this.tempLabelModule;
-                break;
-              }
-            }
-          }
-          this.tempLabelModule = [];
+          this.prevent_opt.save = false
+          return false
         }
-        this.editLabelsBox.show = show;
-      },
-      clickOutside() {
-        this.esc(false);
-      },
+      })
+    },
 
-      /*关闭弹框*/
-      esc(refresh) {
-        this.prevent_opt.save=false;
-        this.$emit("close", refresh);
-      },
-
-      // 新增param
-      addParam() {
-        this.tempParamObj.push({key: '', value: ''});
-      },
-
-      // 移除单个param
-      removeParam(index) {
-        this.tempParamObj.splice(index, 1);
-      },
-      // 新增labels
-      addLabels() {
-        this.tempLabelModule.push({key: '', value: ''});
-        this.inputKeyErr.push(false);
-      },
-
-      // 移除单个param
-      removeLabels(index) {
-        this.tempLabelModule.splice(index, 1);
-        this.inputKeyErr.splice(index, 1);
-      },
-      validateInput:function(value,index){
-        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)){
-          this.inputKeyErr.splice(index,1,true)
-        }else{
-          this.inputKeyErr.splice(index,1,false)
-        }
-      },
-      //编辑endpoint
-      toEditEndpoint(endpoint) {
+    // 覆盖endpoint的port/path/param
+    coverEndpoint () {
+      if (this.endpointList.length > 0) {
         for (let i = 0; i < this.endpointList.length; i++) {
-          if (this.endpointList[i].isEdit) {
-            this.endpointList.splice(i, 1, JSON.parse(JSON.stringify(this.tempEndpoint2)));
-            this.endpointList[i].isEdit = false;
-            break;
-          }
+          this.endpointList[i].port = this.currentModuleCopy.port
+          this.endpointList[i].param = this.currentModuleCopy.param
+          this.endpointList[i].paramObj = this.currentModuleCopy.paramObj
+          this.endpointList[i].labels = this.currentModuleCopy.labels
+          this.endpointList[i].labelModule = this.currentModuleCopy.labelModule
+          this.endpointList[i].path = this.currentModuleCopy.path
         }
-        endpoint.isEdit = true;
-        this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
-      },
-      editEndpoint(endpoint) {
-        this.$refs.addEndpoint.validate((valid) => {
-          if (valid) {
-            endpoint.isEdit = false;
-            this.tempEndpoint2 = {};
-          } else {
-            return false;
-          }
-        });
-
-      },
-
-      //移除endpoint
-      removeEndpoint(endpoint) {
-        endpoint.isEdit = false;
-        for (let i = 0; i < this.endpointList.length; i++) {
-          if (this.endpointList[i].assetId == endpoint.assetId) {
-            this.endpointList.splice(i, 1);
-            this.assetList.unshift(endpoint.asset);
-            i--;
-            break;
-          }
-        }
-      },
-
-      /*获取project列表*/
-      getProjectList() {
-        this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.projectList = response.data.list;
-            this.getModuleList(this.currentProjectCopy.id);
-          }
-        });
-      },
-
-      /*获取型号列表*/
-      getModelList() {
-        this.$get('model', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            let resultData = [];
-            let modelData = response.data.list;
-            for (let i = 0; i < modelData.length; i++) {
-              if (!modelData[i].vendor) {
-                continue;
-              }
-              let obj = {};
-              obj.id = modelData[i].vendor.id;
-              obj.code = modelData[i].vendor.code;
-              obj.value ='vendor-'+ modelData[i].vendor.code;
-              obj.label = modelData[i].vendor.value;
-              obj.children = [];
-              resultData.push(obj);
-            }
-            let result = [];
-            let obj1 = {};
-            for (let i = 0; i < resultData.length; i++) {
-              if (!obj1[resultData[i].id]) {
-                result.push(resultData[i]);
-                obj1[resultData[i].id] = true;
-              }
-            }
-            for (let x = 0; x < result.length; x++) {
-              for (let y = 0; y < modelData.length; y++) {
-                if (!modelData[y].vendor) {
-                  continue;
-                }
-                if (result[x].code === modelData[y].vendor.code) {
-                  let obj2 = {};
-                  obj2.value = modelData[y].id;
-                  obj2.label = modelData[y].name;
-                  result[x].children.push(obj2);
-                }
-              }
-            }
-            this.vendorAndModelOptionData = result;
-          }
-        });
-      },
-
-      /*获取类型列表*/
-      getTypeList() {
-        this.$get('sys/dict/all', {pageSize: -1, pageNo: 1, type: "assetType"}).then(response => {
-          if (response.code === 200) {
-            this.typeList = response.data;
-          }
-        });
-      },
-
-      /*获取DC列表*/
-      getDCList() {
-        this.$get('idc', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.dcList = response.data.list;
-          }
-        });
-      },
-
-      // 获取endpoint弹框中的asset子弹框里asset列表数据
-      getAssetList() {
-        this.assetLoading = true;
-        this.$get('asset', this.assetPageObj).then(response => {
-          if (response.code === 200) {
-            let respData = response.data.list;
-            for (let i = 0; i < respData.length; i++) {
-              respData[i].sel=false;
-              for (let j = 0; j < this.endpointList.length; j++) {
-                if (respData[i].id == this.endpointList[j].assetId) {
-                  respData.splice(i, 1);
-                  i--;
-                  break;
-                }
-              }
-            }
-            this.assetList = response.data.list;
-          }
-        }).finally(() => {
-          setTimeout(() => {
-            this.assetLoading = false;
-          }, 200);
-        });
-      },
-      //回车搜索searchAsset
-      searchAssetKeydown(e){
-        e=e?e:window.event;
-        let keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
-        if(keyCode=== 13){
-          this.searchAsset()
-        }
-      },
-      //endpoint弹框中的asset子弹框搜索
-      searchAsset() {
-        this.assetSearch.host = "";
-        this.assetSearch.sn = "";
-        if (this.assetSearch.label == 'Host') {
-          this.assetSearch.host = this.assetSearch.text;
-          this.assetSearch.modelId = "";
-          this.assetSearch.typeIds = "";
-          this.assetSearch.idcId = "";
-        } else if (this.assetSearch.label == 'SN') {
-          this.assetSearch.sn = this.assetSearch.text;
-          this.assetSearch.modelId = "";
-          this.assetSearch.typeIds = "";
-          this.assetSearch.idcId = "";
-        }
-        this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch);
-        this.getAssetList();
-      },
-
-      changeProject(project) {
-        this.currentModuleCopy = {};
-        this.endpoint.moduleId = '';
-        this.endpoint.projectId = project.id;
-        this.editParamBox.show = false;
-        this.editLabelsBox.show = false;
-        this.tempParamObj = [];
-        this.endpointList = [];
-        this.getAssetList();
-        this.getModuleList(project.id);
-      },
-
-      changeModule(module) {
-        this.endpoint.moduleId = module.id;
-        this.editParamBox.show = false;
-        this.editLabelsBox.show = false;
-        this.tempParamObj = [];
-      },
-
-      //清空勾选的endpoint
-      clearSelection() {
-        let selections = this.$refs.endpointTable.selection;
-        if (selections && selections.length > 0) {
-          for (let i = 0; i < selections.length; i++) {
-            this.removeEndpoint(selections[i])
-          }
-        }
-      },
-
-      // endpoint弹框中的asset子弹框里asset选择事件
-      selectAsset() {
-        this.$nextTick(()=>{
-          let index=0;
-          this.assetList.forEach(item=>{
-            if(item.sel){
-              index++;
-            }
-          });
-          if(index==0){
-            this.assetListAll=false;
-            this.assetListHalf=false;
-          }else if(index<this.assetList.length){
-            this.assetListAll=true;
-            this.assetListHalf=true;
-          }else{
-            this.assetListAll=true;
-            this.assetListHalf=false;
-          }
-        })
-      },
-      //批量添加到endpoint
-      addToEndpointList(){
-        let arr=[];
-        this.assetListAll=false;
-        this.assetListHalf=false;
-        this.endpointTouch=true;
-        this.endpointTouch = true;
-        this.endpoint.projectId = this.currentProjectCopy.id;
-        this.endpoint.moduleId = this.currentModuleCopy.id;
-        this.assetList=this.assetList.filter(item=>{
-          let flag=item.sel;
-          if(flag){
-            item.sel=false;
-            let obj={
-              isEdit: false,
-              assetId: item.id,
-              asset: item,
-              host: item.host,
-              param: this.currentModuleCopy.param ? this.currentModuleCopy.param : "",
-              paramObj: this.currentModuleCopy.paramObj ? this.currentModuleCopy.paramObj : {},
-              labels: this.currentModuleCopy.labels ? this.currentModuleCopy.labels : "",
-              labelModule: this.currentModuleCopy.labelModule ? this.currentModuleCopy.labelModule : {},
-              port: this.currentModuleCopy.port,
-              path: this.currentModuleCopy.path,
-              moduleId: this.currentModuleCopy.id
-            };
-            arr.push(obj);
-          }
-          return !flag
-        });
-        this.endpointList=this.endpointList.concat(arr);
-      },
-      //全选的checkbox的事件
-      assetListSelAll(flag){
-        if(flag){
-          this.assetListHalf=false;
-          this.assetList.forEach(item=>{
-            item.sel=flag;
-          });
-        }else if(!flag&& !this.assetListHalf){
-          this.assetList.forEach(item=>{
-            item.sel=flag;
-          });
-        }else if(!flag&&this.assetListHalf){
-          this.assetListHalf=false;
-          this.assetListAll=true;
-          this.assetList.forEach(item=>{
-            item.sel= !flag;
-          });
-        }
-      },
-      //将param转为json字符串格式
-      paramToJson(param) {
-        let tempParam = {};
-        for (let i = 0; i < param.length; i++) {
-          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
-        }
-        let jsonString = JSON.stringify(tempParam);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
-        }
-      },
-
-      // 获取endpoint弹框中module下拉框数据
-      getModuleList(projectId) {
-        this.$get('module', {projectId: projectId,pageSize:-1}).then(response => {
-          if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              try {
-                let param=response.data.list[i].param|| '{}';
-                let tempObj = JSON.parse(param);
-                let labels=response.data.list[i].labels|| '{}';
-                let tempObj1=JSON.parse(labels);
-                response.data.list[i].paramObj = [];
-                response.data.list[i].labelsModule = [];
-                for (let k in tempObj) {
-                  response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
-                }
-                for (let k in tempObj1) {
-                  response.data.list[i].labelsModule.push({key: k, value: tempObj1[k]})
-                }
-              } catch(err) {
-                //console.info(response.data.list[i], err);
-              }
-            }
-            this.moduleList = response.data.list;
-          }
-        });
-      },
-
-      //保存endpoint
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.endpoint.projectId = this.currentProjectCopy.id;
-        this.endpoint.moduleId = this.currentModuleCopy.id;
-        if (this.endpointList.length == 0) {
-          this.endpointTouch = true;
-          this.$refs.addEndpoint.validate();
-          return false;
-        }
-        //对endpointList进行处理，避免携带过多无用数据
-        let endpointList = [];
-        this.endpointList.forEach((item, index) => {
-          let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host,labels:item.labels};
-          endpointList.push(endpoint);
-        });
-        this.$refs.addEndpoint.validate((valid) => {
-          if (valid) {
-            this.$post('endpoint', endpointList).then(response => {
-              this.prevent_opt.save=false;
-              if (response.code === 200) {
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc(true);
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          } else {
-            this.prevent_opt.save=false;
-            return false;
-          }
-        })
-      },
-
-      //覆盖endpoint的port/path/param
-      coverEndpoint() {
-        if (this.endpointList.length > 0) {
-          for (let i = 0; i < this.endpointList.length; i++) {
-            this.endpointList[i].port = this.currentModuleCopy.port;
-            this.endpointList[i].param = this.currentModuleCopy.param;
-            this.endpointList[i].paramObj = this.currentModuleCopy.paramObj;
-            this.endpointList[i].labels = this.currentModuleCopy.labels;
-            this.endpointList[i].labelModule = this.currentModuleCopy.labelModule;
-            this.endpointList[i].path = this.currentModuleCopy.path;
-          }
-          this.$message({duration: 1000, type: 'success', message: this.$t("tip.coverSuccess")});
-        }
-      },
-
-      //删除endpoint
-      del() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
-            this.prevent_opt.save=false;
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      // endpoint弹框的asset子弹框顶部搜索条件选中事件
-      dropdownSelect(label) {
-        this.assetSearch.text = "";
-        if(this.assetSearch.label!==label){
-          this.assetSearch.host = '';
-          this.assetSearch.sn = '';
-          this.assetSearch.modelId = "";
-          this.assetSearch.typeIds = "";
-          this.assetSearch.idcId = "";
-        }
-        this.assetSearch.label = label;
-        this.assetSearch.dropdownShow = false;
-      },
-
-      clearEndpoints() {
-        this.getAssetList();
-        this.endpointList = [];
-        this.assetSearch= {host: '', sn: '', text: '', label: 'Host', dropdownShow: false}
-      },
-
-      setRowIndex({row, rowIndex}) {
-        row.index = rowIndex;
-      },
-
-      filterDCValue(input, callback) {
-        let result = this.dcList.filter(item => {
-          return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-        });
-        console.info(input, result)
-        callback(result);
-      },
-      filterModelValue(input, callback) {
-        let result = this.modelList.filter(item => {
-          return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-        });
-        callback(result);
-      },
-      filterTypeValue(input, callback) {
-        let result = this.typeList.filter(item => {
-          return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
-        });
-        callback(result);
-      },
-      selectDC(select) {
-        this.assetSearch.idcId = select.id;
-        this.assetSearch.modelId = "";
-        this.assetSearch.typeIds = "";
-      },
-      selectModel(select) {
-        this.assetSearch.modelId = select;
-        this.assetSearch.idcId = "";
-        this.assetSearch.typeIds = "";
-      },
-      selectType(select) {
-        this.assetSearch.typeIds = select.id;
-        this.assetSearch.idcId = "";
-        this.assetSearch.modelId = "";
+        this.$message({ duration: 1000, type: 'success', message: this.$t('tip.coverSuccess') })
       }
     },
-    created() {
-      this.getProjectList();
-      this.getAssetList();
-      this.getDCList();
-      this.getModelList();
-      this.getTypeList();
-    },
-    watch: {
-      endpointList(n, o) {
-        this.endpoint.endpointList = n;
-        if (n.length > 0) {
-          this.paramBorderColor = '#dcdfe6';
-        } else {
-          this.paramBorderColor = '#F56C6C';
-        }
 
-      },
-      currentProject: {
-        immediate: true,
-        handler(n, o) {
-          this.currentProjectCopy = Object.assign({}, n);
-          this.endpoint.projectId = n.id;
-          this.getModuleList(n.id);
-        }
-      },
-      currentModule: {
-        immediate: true,
-        handler(n, o) {
-          if(n) {
-            this.endpoint.moduleId = n.id;
-            this.currentModuleCopy = JSON.parse(JSON.stringify(n));
-
-          }
-        }
-      },
-      currentModuleCopy: {
-        immediate: true,
-        handler(n, o) {
-          if (n.type && n.type.toLowerCase() == 'snmp') {
-            this.endpointTableTitle[4].show = false;
-            this.endpointTableTitle[5].show = false;
+    // 删除endpoint
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('endpoint?ids=' + this.endpoint.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
           } else {
-            this.endpointTableTitle[4].show = true;
-            this.endpointTableTitle[5].show = true;
+            this.$message.error(response.msg)
           }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    // endpoint弹框的asset子弹框顶部搜索条件选中事件
+    dropdownSelect (label) {
+      this.assetSearch.text = ''
+      if (this.assetSearch.label !== label) {
+        this.assetSearch.host = ''
+        this.assetSearch.sn = ''
+        this.assetSearch.modelId = ''
+        this.assetSearch.typeIds = ''
+        this.assetSearch.idcId = ''
+      }
+      this.assetSearch.label = label
+      this.assetSearch.dropdownShow = false
+    },
+
+    clearEndpoints () {
+      this.getAssetList()
+      this.endpointList = []
+      this.assetSearch = { host: '', sn: '', text: '', label: 'Host', dropdownShow: false }
+    },
+
+    setRowIndex ({ row, rowIndex }) {
+      row.index = rowIndex
+    },
+
+    filterDCValue (input, callback) {
+      const result = this.dcList.filter(item => {
+        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
+      })
+      console.info(input, result)
+      callback(result)
+    },
+    filterModelValue (input, callback) {
+      const result = this.modelList.filter(item => {
+        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
+      })
+      callback(result)
+    },
+    filterTypeValue (input, callback) {
+      const result = this.typeList.filter(item => {
+        return item.name.toLowerCase().indexOf(input.toLowerCase()) != -1
+      })
+      callback(result)
+    },
+    selectDC (select) {
+      this.assetSearch.idcId = select.id
+      this.assetSearch.modelId = ''
+      this.assetSearch.typeIds = ''
+    },
+    selectModel (select) {
+      this.assetSearch.modelId = select
+      this.assetSearch.idcId = ''
+      this.assetSearch.typeIds = ''
+    },
+    selectType (select) {
+      this.assetSearch.typeIds = select.id
+      this.assetSearch.idcId = ''
+      this.assetSearch.modelId = ''
+    }
+  },
+  created () {
+    this.getProjectList()
+    this.getAssetList()
+    this.getDCList()
+    this.getModelList()
+    this.getTypeList()
+  },
+  watch: {
+    endpointList (n, o) {
+      this.endpoint.endpointList = n
+      if (n.length > 0) {
+        this.paramBorderColor = '#dcdfe6'
+      } else {
+        this.paramBorderColor = '#F56C6C'
+      }
+    },
+    currentProject: {
+      immediate: true,
+      handler (n, o) {
+        this.currentProjectCopy = Object.assign({}, n)
+        this.endpoint.projectId = n.id
+        this.getModuleList(n.id)
+      }
+    },
+    currentModule: {
+      immediate: true,
+      handler (n, o) {
+        if (n) {
+          this.endpoint.moduleId = n.id
+          this.currentModuleCopy = JSON.parse(JSON.stringify(n))
         }
-      },
+      }
+    },
+    currentModuleCopy: {
+      immediate: true,
+      handler (n, o) {
+        if (n.type && n.type.toLowerCase() == 'snmp') {
+          this.endpointTableTitle[4].show = false
+          this.endpointTableTitle[5].show = false
+        } else {
+          this.endpointTableTitle[4].show = true
+          this.endpointTableTitle[5].show = true
+        }
+      }
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index 91e423c98..2e6ea1f16 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -120,181 +120,181 @@
 </template>
 
 <script>
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import promqlInput from "../../page/dashboard/explore/promqlInput";
-  import { nzNumber} from "../js/validate";
-  export default {
-    name: "alertConfigBox",
-    props: {
-      alertRule: Object
-    },
-    components: {
-      'promql-input': promqlInput,
-    },
-    data() {
-      return {
-        promqlCount: 1,
-        promqlKeys: [0],
-        expressions: [''],
-        legends: [''],
+import chartDataFormat from '../../charts/chartDataFormat'
+import promqlInput from '../../page/dashboard/explore/promqlInput'
+import { nzNumber } from '../js/validate'
+export default {
+  name: 'alertConfigBox',
+  props: {
+    alertRule: Object
+  },
+  components: {
+    'promql-input': promqlInput
+  },
+  data () {
+    return {
+      promqlCount: 1,
+      promqlKeys: [0],
+      expressions: [''],
+      legends: [''],
 
-        editAlertRule: {},
-        rules:{
-          alertName:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          expr:[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          last:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-            {type:'number',message:this.$t('validate.number')}
-          ],
-          severity:[
-            {required:true,message:this.$t('validate.required'),trigger:'change'},
-          ],
-          summary:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-          ],
-          operator:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-          ],
-          unit:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-          ],
-          threshold:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-            {validator:nzNumber,trigger: 'blur'}
-          ],
-        },
-        operators:[
-          {
-            label:'==',
-            value:'=='
-          },
-          {
-            label:'!=',
-            value:'!='
-          },
-          {
-            label:'>',
-            value:'>'
-          },
-          {
-            label:'<',
-            value:'<'
-          },
-          {
-            label:'>=',
-            value:'>='
-          },
-          {
-            label:'<=',
-            value:'<='
-          },
+      editAlertRule: {},
+      rules: {
+        alertName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        unitOptions: chartDataFormat.unitOptions(),
+        expr: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        last: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { type: 'number', message: this.$t('validate.number') }
+        ],
+        severity: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        summary: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        operator: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        unit: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        threshold: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: nzNumber, trigger: 'blur' }
+        ]
+      },
+      operators: [
+        {
+          label: '==',
+          value: '=='
+        },
+        {
+          label: '!=',
+          value: '!='
+        },
+        {
+          label: '>',
+          value: '>'
+        },
+        {
+          label: '<',
+          value: '<'
+        },
+        {
+          label: '>=',
+          value: '>='
+        },
+        {
+          label: '<=',
+          value: '<='
+        }
+      ],
+      unitOptions: chartDataFormat.unitOptions(),
 
-        userData: [],
-      }
+      userData: []
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    methods: {
-      clickOutside() {
-        this.esc(false);
-      },
-      esc(refresh) {
-        this.prevent_opt.save=false;
-        this.$emit("close", refresh);
-      },
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.editAlertRule.expr = this.expressions[0];
-        this.$refs.alertRuleForm.validate((valid) => {
-          if (valid) {
-            this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(",");
-            if (this.editAlertRule.id) {
-              this.$put('alert/rule', this.editAlertRule).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              this.$post('alert/rule', this.editAlertRule).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          } else {
-            this.prevent_opt.save=false;
-            return false;
-          }
-        })
-      },
-      del() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("alert/rule?ids=" + this.editAlertRule.id).then(response => {
-            this.prevent_opt.save=false;
-            if (response.code === 200) {
-              this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      getUserList() {
-        this.$get('sys/user/list', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code == 200) {
-            this.userData = response.data.list;
-          }
-        })
-      },
-      metricChange(val){
-        this.editAlertRule.expr=val;
-      }
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
     },
-    mounted() {
-      this.getUserList();
-    },
-    watch: {
-      alertRule: {
-        deep: true,
-        immediate: true,
-        handler(n, o) {
-          this.editAlertRule = JSON.parse(JSON.stringify(n));
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.editAlertRule.expr = this.expressions[0]
+      this.$refs.alertRuleForm.validate((valid) => {
+        if (valid) {
+          this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(',')
           if (this.editAlertRule.id) {
-            this.expressions = [this.editAlertRule.expr];
-            this.$nextTick(() => {
-              this.expressions.forEach((ex, index) => {
-                if (ex) {
-                  this.$refs.promql.metricChange(ex);
-                }
-              });
-            });
+            this.$put('alert/rule', this.editAlertRule).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            this.$post('alert/rule', this.editAlertRule).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
           }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/rule?ids=' + this.editAlertRule.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    getUserList () {
+      this.$get('sys/user/list', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.userData = response.data.list
+        }
+      })
+    },
+    metricChange (val) {
+      this.editAlertRule.expr = val
+    }
+  },
+  mounted () {
+    this.getUserList()
+  },
+  watch: {
+    alertRule: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        this.editAlertRule = JSON.parse(JSON.stringify(n))
+        if (this.editAlertRule.id) {
+          this.expressions = [this.editAlertRule.expr]
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs.promql.metricChange(ex)
+              }
+            })
+          })
         }
       }
     }
   }
+}
 </script>
 <style>
   .unit-popper-class{
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index 1e1afec9f..5205e0322 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -115,7 +115,6 @@
           </el-input>
         </el-form-item>
 
-
       </el-form>
 
     </div>
@@ -136,370 +135,363 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import selectAlertSilence from '../alert/selectAlertSilence'
-  export default {
-    name:"alertSilenceBox",
-    components:{
-      selectAlertSilence,
-    },
+import bus from '../../../libs/bus'
+import selectAlertSilence from '../alert/selectAlertSilence'
+export default {
+  name: 'alertSilenceBox',
+  components: {
+    selectAlertSilence
+  },
 
-    props:{
-      alertSilence:Object
-    },
-    watch:{
-      alertSilence:{
-        deep:true,
-        immediate:true,
-        handler(n,o){
-          let obj=JSON.parse(JSON.stringify(n))
-          if(obj.ruleId==-1){
-            obj.ruleId=null;
-          }
-          if(obj.linkId==-1){
-            obj.linkId=null;
-          }
-          this.editAlertSilence=Object.assign(this.editAlertSilence,obj);
-          this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
-          this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
-          this.editAlertSilence.time=this.startAtTamp;
-          this.rangeTimeCallback();
-          this.typeChange(this.editAlertSilence.type,obj.linkId);
-          if(obj.linkId || obj.ruleId){
-            this.matcherChange()
-          }
+  props: {
+    alertSilence: Object
+  },
+  watch: {
+    alertSilence: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        const obj = JSON.parse(JSON.stringify(n))
+        if (obj.ruleId == -1) {
+          obj.ruleId = null
         }
-      }
-    },
-    data(){
-      let that=this;
-      let validate = (rule, value, callback) => {
-        if(!this.editAlertSilence.startAt){
-          callback(new Error('请选择开始时间!'));
-        }else if(!this.editAlertSilence.endAt){
-          callback(new Error('请选择结束时间!'));
-        } else{
-          callback();
+        if (obj.linkId == -1) {
+          obj.linkId = null
         }
-      };
-      return {
-        editAlertSilence:{
-          id:'',
-          startAt:'',
-          endAt:'',
-          ruleId:'',
-          type:'',
-          linkId:'',
-          reason:'',
-          time:[],
-          matcher:'',
-          name:''
-        },
-        rules:{
-          time: [
-            // { required: true, message: this.$t('alert.silence.selectTime'), trigger: 'change' },
-            { required: true, trigger: 'change'},
-            { validator: validate, trigger: 'change' }
-          ],
-          matcher:[
-            { required: true, message: this.$t('alert.silence.selectMather'), trigger: 'change' },
-          ]
-        },
-        rangeTime:'',
-        ruleList:[],
-        filterSilence:'',
-        silenceData:[],
-        typeContentLoading:false,
-        typeList:[
-          {type:'datacenter',name:'Datacenter'},
-          {type:'project',name:'Project'},
-          {type:'module',name:'Module'},
-          {type:'endpoint',name:'Endpoint'},
-          {type:'asset',name:'Asset'},
-        ],
-        datacenterData:null,
-        assetData:null,
-        projectData:null,
-        moduleData:null,
-        endpointData:null,
-        startAtTamp:'',
-        endAtTamp:'',
-      }
-    },
-    mounted(){
-      this.getRuleList()
-    },
-    methods:{
-      clickOutside(){
-        this.esc(false);
-      },
-      esc(refresh){
-        this.prevent_opt.save=false;
-        this.$emit("close",refresh);
-      },
-      save(){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId ;
-        this.$refs.alertSilenceForm.validate((valid)=>{
-          if(this.endAtTamp < this.startAtTamp){
-            this.$message({
-              message: '结束时间必须大于开始时间',
-              type: 'error'
-            });
-            return;
-          }
-          let params={...this.editAlertSilence};
-          delete  params.time;
-          delete  params.matcher;
-          if(valid){
-            params={
-              id:params.id,
-              endAt:params.endAt,
-              startAt:params.startAt,
-              linkId:params.linkId,
-              linkName:params.linkName,
-              reason:params.reason,
-              ruleId:params.ruleId,
-              name:params.name,
-              type:params.type,
-            }
-            if(this.editAlertSilence.id){
-              this.$put('/alert/silence',params).then(response=>{
-                this.prevent_opt.save=false;
-                if(response.code===200){
-                  this.$message({duration:1000,type:'success',message:this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-              });
-            }else{
-              this.$post('alert/silence',params).then(response=>{
-                this.prevent_opt.save=false;
-                if(response.code===200){
-                  this.$message({duration:1000,type:'success',message:this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          }else{
-            this.prevent_opt.save=false;
-            return false;
-          }
-        })
-      },
-      del(){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("/alert/silence?ids="+this.editAlertSilence.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      getRuleList(){
-        this.$get('alert/rule',{pageNo:1,pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.ruleList=response.data.list;
-          }
-        })
-      },
-      dateChange(val,type){
-        if(type==='startAt'){
-          this.editAlertSilence.startAt=bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss');
-          this.startAtTamp=new Date(val).getTime();
-        } else if(type==='endAt'){
-          this.editAlertSilence.endAt=bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss');
-          this.endAtTamp=new Date(val).getTime();
-        }
-        this.$forceUpdate
+        this.editAlertSilence = Object.assign(this.editAlertSilence, obj)
+        this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()
+        this.endAtTamp = new Date(this.editAlertSilence.endAt).getTime()
+        this.editAlertSilence.time = this.startAtTamp
         this.rangeTimeCallback()
-      },
-      rangeTimeCallback(){
-        if(this.editAlertSilence.time){
-          let num=new Date(this.editAlertSilence.endAt).getTime() - new Date(this.editAlertSilence.startAt).getTime();
-          this.rangeTime=num/(60*60*1000);//以小时为单位
-        }else{
-          this.rangeTime=null;
+        this.typeChange(this.editAlertSilence.type, obj.linkId)
+        if (obj.linkId || obj.ruleId) {
+          this.matcherChange()
         }
+      }
+    }
+  },
+  data () {
+    const validate = (rule, value, callback) => {
+      if (!this.editAlertSilence.startAt) {
+        callback(new Error('请选择开始时间!'))
+      } else if (!this.editAlertSilence.endAt) {
+        callback(new Error('请选择结束时间!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      editAlertSilence: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        type: '',
+        linkId: '',
+        reason: '',
+        time: [],
+        matcher: '',
+        name: ''
       },
-      rangeTimeChange(val){
-        let arr=[bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),bus.timeFormate(bus.getOffsetTimezoneData(val*1),'yyyy-MM-dd hh:mm:ss')]
-        this.$set(this.editAlertSilence,'startAt',arr[0]);
-        this.$set(this.editAlertSilence,'endAt',arr[1]);
-        this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
-        this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
-        this.$forceUpdate
+      rules: {
+        time: [
+          // { required: true, message: this.$t('alert.silence.selectTime'), trigger: 'change' },
+          { required: true, trigger: 'change' },
+          { validator: validate, trigger: 'change' }
+        ],
+        matcher: [
+          { required: true, message: this.$t('alert.silence.selectMather'), trigger: 'change' }
+        ]
       },
-      matcherChange(val){
-        this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
-      },
-      silenceChange(val){
-        this.editAlertSilence.linkId=val.id;
-        this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
-        if(this.editAlertSilence.type==='datacenter'){
-          this.editAlertSilence.name=val.name;
+      rangeTime: '',
+      ruleList: [],
+      filterSilence: '',
+      silenceData: [],
+      typeContentLoading: false,
+      typeList: [
+        { type: 'datacenter', name: 'Datacenter' },
+        { type: 'project', name: 'Project' },
+        { type: 'module', name: 'Module' },
+        { type: 'endpoint', name: 'Endpoint' },
+        { type: 'asset', name: 'Asset' }
+      ],
+      datacenterData: null,
+      assetData: null,
+      projectData: null,
+      moduleData: null,
+      endpointData: null,
+      startAtTamp: '',
+      endAtTamp: ''
+    }
+  },
+  mounted () {
+    this.getRuleList()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.editAlertSilence.matcher = this.editAlertSilence.ruleId || this.editAlertSilence.linkId
+      this.$refs.alertSilenceForm.validate((valid) => {
+        if (this.endAtTamp < this.startAtTamp) {
+          this.$message({
+            message: '结束时间必须大于开始时间',
+            type: 'error'
+          })
+          return
         }
-        if(this.editAlertSilence.type==='asset'){
-          this.editAlertSilence.name=val.sn
-        }
-        if(this.editAlertSilence.type==='project'){
-          this.editAlertSilence.name=val.name;
-        }
-        if(this.editAlertSilence.type==='module'){
-          this.editAlertSilence.name=val.name;
-        }
-        if(this.editAlertSilence.type==='endpoint'){
-          this.editAlertSilence.name=val.name;
-        }
-
-
-
-      },
-      clearValue(){
-        this.editAlertSilence.name='';
-        this.editAlertSilence.linkId='';
-      },
-      typeChange(val,linkId){
-        let firstArr=[]
-        let secondArr=[];
-        let thirddiArr=[];
-        this.typeContentLoading=true;
-        this.editAlertSilence.linkId=linkId?linkId:'';
-        this.editAlertSilence.name='';
-        if(val==='datacenter'){
-          this.$get('idc',{pageNo:1,pageSize:-1}).then(response=>{
-            if(response.code==200){
-              firstArr=response.data.list;
-              if(linkId){
-                this.editAlertSilence.name=firstArr.find(item=>item.id===linkId).name;
+        let params = { ...this.editAlertSilence }
+        delete params.time
+        delete params.matcher
+        if (valid) {
+          params = {
+            id: params.id,
+            endAt: params.endAt,
+            startAt: params.startAt,
+            linkId: params.linkId,
+            linkName: params.linkName,
+            reason: params.reason,
+            ruleId: params.ruleId,
+            name: params.name,
+            type: params.type
+          }
+          if (this.editAlertSilence.id) {
+            this.$put('/alert/silence', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
               }
-              this.silenceData=firstArr;
-              this.datacenterData=firstArr;
-              this.typeContentLoading=false;
-            }
-          })
-        }
-
-        if(val==='asset'){
-          this.$get('asset?pageNo=1&pageSize=-1').then(res=>{
-            if(res.code==200){
-              let arr=[];
-              res.data.list.forEach(asset=>{
-                asset.name=asset.sn;
-                if(linkId===asset.id){
-                  this.editAlertSilence.name=asset.name;
-                }
-                let idcF=arr.find(idc=>idc.id===asset.idc.id);
-                if(idcF){
-                  idcF.children.push(asset);
-                } else{
-                  let idc={...asset.idc};
-                  idc.children=[asset];
-                  arr.push(idc);
-                }
-              })
-              this.silenceData=arr;
-              this.assetData=arr;
-              this.typeContentLoading=false;
-            }
-          })
-        }
-
-        if(val==='project'){
-          this.$get('project',{pageNo:1,pageSize:-1}).then(response=>{
-            if(response.code==200){
-              firstArr=response.data.list;
-              if(linkId){
-                this.editAlertSilence.name=firstArr.find(item=>item.id===linkId).name;
+            })
+          } else {
+            this.$post('alert/silence', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
               }
-              this.silenceData=firstArr;
-              this.projectData=firstArr;
-              this.typeContentLoading=false;
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/alert/silence?ids=' + this.editAlertSilence.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    getRuleList () {
+      this.$get('alert/rule', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.ruleList = response.data.list
+        }
+      })
+    },
+    dateChange (val, type) {
+      if (type === 'startAt') {
+        this.editAlertSilence.startAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.startAtTamp = new Date(val).getTime()
+      } else if (type === 'endAt') {
+        this.editAlertSilence.endAt = bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
+        this.endAtTamp = new Date(val).getTime()
+      }
+      this.$forceUpdate()
+      this.rangeTimeCallback()
+    },
+    rangeTimeCallback () {
+      if (this.editAlertSilence.time) {
+        const num = new Date(this.editAlertSilence.endAt).getTime() - new Date(this.editAlertSilence.startAt).getTime()
+        this.rangeTime = num / (60 * 60 * 1000)// 以小时为单位
+      } else {
+        this.rangeTime = null
+      }
+    },
+    rangeTimeChange (val) {
+      const arr = [bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'), bus.timeFormate(bus.getOffsetTimezoneData(val * 1), 'yyyy-MM-dd hh:mm:ss')]
+      this.$set(this.editAlertSilence, 'startAt', arr[0])
+      this.$set(this.editAlertSilence, 'endAt', arr[1])
+      this.startAtTamp = new Date(this.editAlertSilence.startAt).getTime()
+      this.endAtTamp = new Date(this.editAlertSilence.endAt).getTime()
+      this.$forceUpdate()
+    },
+    matcherChange (val) {
+      this.editAlertSilence.matcher = this.editAlertSilence.ruleId || this.editAlertSilence.linkId
+    },
+    silenceChange (val) {
+      this.editAlertSilence.linkId = val.id
+      this.editAlertSilence.matcher = this.editAlertSilence.ruleId || this.editAlertSilence.linkId
+      if (this.editAlertSilence.type === 'datacenter') {
+        this.editAlertSilence.name = val.name
+      }
+      if (this.editAlertSilence.type === 'asset') {
+        this.editAlertSilence.name = val.sn
+      }
+      if (this.editAlertSilence.type === 'project') {
+        this.editAlertSilence.name = val.name
+      }
+      if (this.editAlertSilence.type === 'module') {
+        this.editAlertSilence.name = val.name
+      }
+      if (this.editAlertSilence.type === 'endpoint') {
+        this.editAlertSilence.name = val.name
+      }
+    },
+    clearValue () {
+      this.editAlertSilence.name = ''
+      this.editAlertSilence.linkId = ''
+    },
+    typeChange (val, linkId) {
+      let firstArr = []
+      // const secondArr = []
+      // const thirddiArr = []
+      this.typeContentLoading = true
+      this.editAlertSilence.linkId = linkId || ''
+      this.editAlertSilence.name = ''
+      if (val === 'datacenter') {
+        this.$get('idc', { pageNo: 1, pageSize: -1 }).then(response => {
+          if (response.code == 200) {
+            firstArr = response.data.list
+            if (linkId) {
+              this.editAlertSilence.name = firstArr.find(item => item.id === linkId).name
             }
-          })
-        }
+            this.silenceData = firstArr
+            this.datacenterData = firstArr
+            this.typeContentLoading = false
+          }
+        })
+      }
 
+      if (val === 'asset') {
+        this.$get('asset?pageNo=1&pageSize=-1').then(res => {
+          if (res.code == 200) {
+            const arr = []
+            res.data.list.forEach(asset => {
+              asset.name = asset.sn
+              if (linkId === asset.id) {
+                this.editAlertSilence.name = asset.name
+              }
+              const idcF = arr.find(idc => idc.id === asset.idc.id)
+              if (idcF) {
+                idcF.children.push(asset)
+              } else {
+                const idc = { ...asset.idc }
+                idc.children = [asset]
+                arr.push(idc)
+              }
+            })
+            this.silenceData = arr
+            this.assetData = arr
+            this.typeContentLoading = false
+          }
+        })
+      }
 
-        if(val==='module'){
-          this.$get('module?pageNo=1&pageSize=-1').then(res=>{
-            if(res.code==200){
-              let arr=[];
-              res.data.list.forEach(module=>{
-                if(linkId===module.id){
-                  this.editAlertSilence.name=module.name;
-                }
-                let projectF=arr.find(project=>project.id===module.project.id)
-                if(projectF){
-                  projectF.children.push(module);
-                } else{
-                  let project={...module.project};
-                  project.children=[module];
-                  arr.push(project);
-                }
-              })
-              this.silenceData=arr;
-              this.moduleData=arr;
-              this.typeContentLoading=false;
+      if (val === 'project') {
+        this.$get('project', { pageNo: 1, pageSize: -1 }).then(response => {
+          if (response.code == 200) {
+            firstArr = response.data.list
+            if (linkId) {
+              this.editAlertSilence.name = firstArr.find(item => item.id === linkId).name
             }
-          })
-        }
+            this.silenceData = firstArr
+            this.projectData = firstArr
+            this.typeContentLoading = false
+          }
+        })
+      }
 
-        if(val==='endpoint'){
-          this.$get('endpoint?pageNo=1&pageSize=-1').then(res=>{
-           if(res.code=200){
-             let arr=[];
-             res.data.list.forEach(item=>{
-               item.name=item.host;
-               if(linkId===item.id){
-                 this.editAlertSilence.name=item.name;
-               }
-               let projectF = arr.find(project=>item.project.id===project.id);
-               if(projectF){
-                 let moduleF = projectF.children.find(module=>module.id===item.module.id);
-                 if(moduleF){
-                   moduleF.children.push(item)
-                 } else{
-                   projectF.children.push({...item.module,children:[item]});
-                 }
-               } else {
-                 let project={...item.project};
-                 project.children=[{...item.module,children:[item]}]
-                 arr.push(project);
-               }
-             });
-             this.silenceData=arr;
-             this.endpointData=arr;
-             this.typeContentLoading=false;
-           }
-          });
+      if (val === 'module') {
+        this.$get('module?pageNo=1&pageSize=-1').then(res => {
+          if (res.code == 200) {
+            const arr = []
+            res.data.list.forEach(module => {
+              if (linkId === module.id) {
+                this.editAlertSilence.name = module.name
+              }
+              const projectF = arr.find(project => project.id === module.project.id)
+              if (projectF) {
+                projectF.children.push(module)
+              } else {
+                const project = { ...module.project }
+                project.children = [module]
+                arr.push(project)
+              }
+            })
+            this.silenceData = arr
+            this.moduleData = arr
+            this.typeContentLoading = false
+          }
+        })
+      }
 
-        }
-
-      },
+      if (val === 'endpoint') {
+        this.$get('endpoint?pageNo=1&pageSize=-1').then(res => {
+          if (res.code == 200) {
+            const arr = []
+            res.data.list.forEach(item => {
+              item.name = item.host
+              if (linkId === item.id) {
+                this.editAlertSilence.name = item.name
+              }
+              const projectF = arr.find(project => item.project.id === project.id)
+              if (projectF) {
+                const moduleF = projectF.children.find(module => module.id === item.module.id)
+                if (moduleF) {
+                  moduleF.children.push(item)
+                } else {
+                  projectF.children.push({ ...item.module, children: [item] })
+                }
+              } else {
+                const project = { ...item.project }
+                project.children = [{ ...item.module, children: [item] }]
+                arr.push(project)
+              }
+            })
+            this.silenceData = arr
+            this.endpointData = arr
+            this.typeContentLoading = false
+          }
+        })
+      }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index d43a716d6..f34c9ff44 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -99,7 +99,7 @@
               <div class="tag-edit-action">Action</div>
             </div>
             <div style="height: calc(100% - 32px); overflow: auto" id="asset-box-tags">
-              <div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
+              <div v-for="(item, index) in editAsset.tags" :key="index" class="tag-edit-box-body">
                 <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
                   <el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey" @blur="loadValues(item)" @select="loadValues" popper-class="no-style-class"></el-autocomplete>
                 </el-form-item>
@@ -117,7 +117,7 @@
         <!------------------------------------------IDC---------------------------------------------->
         <!--cli-->
         <div class="right-box-sub-title">{{$t('config.account.account')}}
-          <el-popover placement="right" width="70" trigger="click" :disabled="editAsset.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
+          <el-popover v-model="showAccountOp" :disabled="editAsset.accounts.length == 3" placement="right" popper-class="no-style-class" trigger="click" width="70">
             <button slot="reference" id="add-type" type="button" class="float-right" :class="{'nz-btn-disabled': editAsset.accounts.length == 3}">
               <span><i class="nz-icon nz-icon-create-square"></i></span>
             </button>
@@ -164,527 +164,527 @@
 </template>
 
 <script>
-  import accountConfig from '../../page/asset/accountConfig';
-  import {host} from '../js/validate';
-  import {port} from '../js/validate'
-  import locationCascader from "./locationCascader";
-  export default {
-    name: "assetBox",
-    props: {
-      asset: Object
-    },
-    components:{
-      'account-config-box': accountConfig,
-      'location-cascader':locationCascader,
-    },
-    data() {
-      return {
-        editAsset: {},
+import accountConfig from '../../page/asset/accountConfig'
+import { host, port } from '../js/validate'
 
-        rightBox: {model: {show: false}},
-        modelData: [],
-        dcData: [],
-        assetTypeData: [],
-        cabinetData: [],
-        vendorAndModelOptionData: [], //厂商型号下拉框选择数据
+import locationCascader from './locationCascader'
+export default {
+  name: 'assetBox',
+  props: {
+    asset: Object
+  },
+  components: {
+    'account-config-box': accountConfig,
+    'location-cascader': locationCascader
+  },
+  data () {
+    return {
+      editAsset: {},
 
-        showAccountOp: false,
-        errorProtocol: [], //校验不通过的account
-        selectableAccountTypes: ["SSH", "TELNET", "SNMP"],
+      rightBox: { model: { show: false } },
+      modelData: [],
+      dcData: [],
+      assetTypeData: [],
+      cabinetData: [],
+      vendorAndModelOptionData: [], // 厂商型号下拉框选择数据
 
-        modelSize: 1,
-        locationInfo: null,
+      showAccountOp: false,
+      errorProtocol: [], // 校验不通过的account
+      selectableAccountTypes: ['SSH', 'TELNET', 'SNMP'],
 
-        accountType: '',
-        model: {},
-        blankModel: {
-          id: '',
-          name: '',
-          vendor: {id: '', value: '', code: '', type: ''},
-          type: {id: '', value: '', code: '', type: ''},
-          assetStat: {total: '', inStock: '', outStock: ''},
-          remark: '',
-          vendorCode: '',
-          typeCode: ''
-        },
-        userData: [], //用户（人）信息
-        cabinetSelectedData: {
-          name: '',
-          uSize: 0,
-          remark: '',
-          idcId: '',
-        },
-        rules: {
-          sn: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          host: [
-            {required:true,message:this.$t('validate.required'),trigger: 'blur'},
-            {validator:host, trigger: 'blur'}
-          ],
-          modelId: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          "model.type.code": [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          idcId: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          'impi.host':[
-            {validator:host,trigger:'blur'}
-          ],
-          'impi.port':[
-            {validator:port,trigger:'blur'}
-          ]
-        },
-        cabRules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          uSize: [
-            {required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          idcId: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ]
-        },
-        formData:null,
-        accountValidResult: true,
-        changeProtocolSwitch: true,
-        exporterDisableSwitch: false,
-        tagKeys:[],
-        tagValues:[],
-        tagValuesCache:new Map(),
+      modelSize: 1,
+      locationInfo: null,
+
+      accountType: '',
+      model: {},
+      blankModel: {
+        id: '',
+        name: '',
+        vendor: { id: '', value: '', code: '', type: '' },
+        type: { id: '', value: '', code: '', type: '' },
+        assetStat: { total: '', inStock: '', outStock: '' },
+        remark: '',
+        vendorCode: '',
+        typeCode: ''
+      },
+      userData: [], // 用户（人）信息
+      cabinetSelectedData: {
+        name: '',
+        uSize: 0,
+        remark: '',
+        idcId: ''
+      },
+      rules: {
+        sn: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        modelId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'model.type.code': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        idcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'impi.host': [
+          { validator: host, trigger: 'blur' }
+        ],
+        'impi.port': [
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+      cabRules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        uSize: [
+          { required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        idcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      formData: null,
+      accountValidResult: true,
+      changeProtocolSwitch: true,
+      exporterDisableSwitch: false,
+      tagKeys: [],
+      tagValues: [],
+      tagValuesCache: new Map()
+    }
+  },
+  watch: {
+    asset: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        // console.info(n);
+        this.editAsset = JSON.parse(JSON.stringify(n))
+        if (!this.editAsset.accounts) {
+          this.$set(this.editAsset, 'accounts', [])
+        } else {
+          this.editAsset.accounts.length > 0 && (this.accountType = this.editAsset.accounts[0].protocol)
+        }
+        this.$set(this.editAsset, 'modelId', n.model.id)
+        this.modelSize = n.model.usize
+        const initLocationData = {
+          idc: n.idc,
+          cabinet: n.cabinet,
+          u: [n.cabinetStart, n.cabinetEnd]
+        }
+        this.$nextTick(() => {
+          this.$refs.locationCascader.initComponet(initLocationData)
+          this.getVendorAndModelOptionData(n.model.type.code)
+        })
       }
     },
-    watch: {
-      asset: {
-        deep: true,
-        immediate: true,
-        handler(n) {
-          //console.info(n);
-          this.editAsset = JSON.parse(JSON.stringify(n));
-          if (!this.editAsset.accounts) {
-            this.$set(this.editAsset, "accounts", []);
-          } else {
-            this.editAsset.accounts.length > 0 && (this.accountType = this.editAsset.accounts[0].protocol);
-          }
-          this.$set(this.editAsset, "modelId", n.model.id);
-          this.modelSize = n.model.usize;
-          let initLocationData={
-            idc: n.idc,
-            cabinet: n.cabinet,
-            u: [n.cabinetStart, n.cabinetEnd]
-          };
-          this.$nextTick(() => {
-            this.$refs.locationCascader.initComponet(initLocationData);
-            this.getVendorAndModelOptionData(n.model.type.code);
-          });
-        }
-      },
-      'editAsset.accounts': {
-        deep: true,
-        handler(n) {
-          let temp = ["SSH", "TELNET", "SNMP"];
-          n.forEach(item => {
-            let i = temp.indexOf(item.protocol);
-            if (i > -1) {
-              temp.splice(i, 1);
-            }
-          });
-          this.selectableAccountTypes = temp;
-        }
-      },
-    },
-    methods: {
-      clickOutside() {
-        this.esc(false);
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.prevent_opt.save=false;
-        this.$emit("close", refresh);
-      },
-      modelReload() {
-
-      },
-      //关闭model侧滑框
-      closeRightBox(refresh) {
-        this.rightBox.model.show = false;
-        if (refresh) { //新增修改型号后刷新相关数据
-          this.getVendorData();
-          this.getModelData(this.editAsset.model.type.code);
-        }
-      },
-      getVendorData() {
-        return new Promise(resolve => {
-          this.$get('sys/dict/all?type=vendor&pageSize=-1').then(response => {
-            if (response.code === 200) {
-              this.vendorData = response.data;
-            }
-            resolve(this.vendorData);
-          });
-        });
-      },
-      getModelData(assetType) {
-        return new Promise(resolve => {
-          let url = assetType ? ('model?typeCode=' + assetType+'&pageSize=-1') : 'model?pageSize=-1';
-          this.$get(url).then(response => {
-            if (response.code === 200) {
-              this.modelData = response.data.list;
-            }
-            resolve(this.modelData);
-          });
-        });
-      },
-      //组织符合cascader的数据格式
-      getVendorAndModelOptionData(assetType,event) {
-        if(event){
-          this.editAsset.modelId='';
-        }
-        let request = this.getModelData(assetType);
-        request.then(response => {
-          let resultData = [];
-          let modelData = response;
-          for (let i = 0; i < modelData.length; i++) {
-            if (!modelData[i].vendor) {
-              continue;
-            }
-            let obj = {};
-            obj.id = modelData[i].vendor.id;
-            obj.code = modelData[i].vendor.code;
-            obj.value ='vendor-'+ modelData[i].vendor.code;
-            obj.label = modelData[i].vendor.value;
-            obj.children = [];
-            resultData.push(obj);
-          }
-          let result = [];
-          let obj1 = {};
-          for (let i = 0; i < resultData.length; i++) {
-            if (!obj1[resultData[i].id]) {
-              result.push(resultData[i]);
-              obj1[resultData[i].id] = true;
-            }
-          }
-          for (let x = 0; x < result.length; x++) {
-            for (let y = 0; y < modelData.length; y++) {
-              if (!modelData[y].vendor) {
-                continue;
-              }
-              if (result[x].code === modelData[y].vendor.code) {
-                let obj2 = {};
-                obj2.value = modelData[y].id;
-                obj2.label = modelData[y].name;
-                result[x].children.push(obj2);
-              }
-            }
-          }
-          this.vendorAndModelOptionData = result;
-        });
-      },
-      addTag() {
-        !this.editAsset.tags && (this.$set(this.editAsset, "tags", []));
-        this.editAsset.tags.push({tag: "", value: ""});
-      },
-      addAccount(type) {
-        if (type == "SSH") {
-          this.editAsset.accounts.push({
-            authType: 1,
-            protocol: "SSH",
-            port: 22,
-            params: {
-              user: "",
-              method: "password",
-              password: "",
-              key: "",
-              keyPassword: ""
-            }
-          });
-        } else if (type == "TELNET") {
-          this.editAsset.accounts.push({
-            protocol: "TELNET",
-            port: 23,
-            params: {
-              user: "",
-              password: "",
-              userTip: "",
-              passwordTip: "",
-              reloginTip: ""
-            }
-          });
-        } else if (type == "SNMP") {
-          this.editAsset.accounts.push({
-            protocol: "SNMP",
-            port: 161,
-            params: {
-              version:2,
-              community:"public",
-              securityName:"",
-              securityLevel:"",
-              password:"",
-              privPassword:"",
-              authProtocol:"",
-              privProtocol:"",
-              contextName:""
-            }
-          });
-        }
-        this.accountType = type;
-        this.showAccountOp = false;
-      },
-      removeAccount(index) {
-        this.editAsset.accounts.splice(index, 1);
-        if (this.editAsset.accounts.length > 0) {
-          this.accountType = this.editAsset.accounts[0].protocol;
-        } else {
-          this.accountType = "";
-        }
-      },
-      removeTag(index) {
-        this.editAsset.tags.splice(index, 1);
-      },
-      setLocationData(data) {
-        this.locationInfo = data;
-      },
-      locationValidator:function(rule, value, callback){
-        let $temp=this;
-        setTimeout(()=>{
-          if(!this.locationInfo){
-            callback(new Error($temp.$t('validate.required')))
-          }else if(this.locationInfo && !this.locationInfo.idc){
-            callback(new Error($temp.$t('validate.required')))
-          }else{
-            callback();
-          }
-        }, 100)
-      },
-      modelChange(modelId) {
-        let model = this.modelData.find((item, index)=>{
-          return modelId == item.id;
-        });
-        this.modelSize = model.usize;
-      },
-      getDcData() {
-        return new Promise(resolve => {
-          this.$get('idc?pageSize=-1').then(response => {
-            if (response.code === 200) {
-              this.dcData = response.data.list;
-            }
-            resolve(this.dcData);
-          });
-        });
-      },
-      getUserData() {
-        return new Promise(resolve => {
-          this.$get('sys/user/list').then(response => {
-            if (response.code === 200) {
-              this.userData = response.data.list
-            }
-            resolve(this.userData);
-          });
-        });
-      },
-      getCabinetData(id) {
-        return new Promise(resolve => {
-          this.$get('cabinet?idcId=' + id).then(response => {
-            if (response.code === 200) {
-              this.cabinetData = response.data.list;
-              for (let i = 0; i < this.cabinetData.length; i++) {
-                this.$set(this.cabinetData[i], 'children', this.dcData)
-              }
-            }
-            resolve(this.cabinetData);
-          });
-        });
-      },
-      getAssetTypeData() {
-        return new Promise(resolve => {
-          this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
-            if (response.code === 200) {
-              this.assetTypeData = response.data;
-              if(this.editAsset.model&&!this.editAsset.model.type.code){
-                this.editAsset.model.type.code=response.data[0].code;
-              }
-            }
-            resolve(this.assetTypeData);
-          });
-        });
-      },
-      newModel() {
-        return JSON.parse(JSON.stringify(this.blankModel));
-      },
-      addVendor(assetType) {
-        this.model = this.newModel();
-        if (assetType) {
-          //model侧滑弹出时，自动选好assetType
-          for (let i = 0; i < this.assetTypeData.length; i++) {
-            if (this.assetTypeData[i].code == assetType) {
-              this.model.type.code = assetType;
-              this.model.type.value = this.assetTypeData[i].value;
-              break;
-            }
-          }
-        }
-        this.rightBox.model.show = true;
-      },
-      setAccountValidResult(result, protocol) {
-        this.accountValidResult = result;
-        let index = this.errorProtocol.indexOf(protocol);
-        if (result) {
-          index != -1 ? this.errorProtocol.splice(index, 1) : "";
-        } else {
-          index == -1 ? this.errorProtocol.push(protocol) : "";
-        }
-      },
-      del() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.prevent_opt.save=false;
-          this.$delete("asset?ids=" + this.editAsset.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      changeProtocolType(type) {
-        this.accountType = type;
-      },
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        if(this.locationInfo) {
-          if(this.locationInfo.idc){
-            this.editAsset.idcId = this.locationInfo.idc.id;
-          }
-          if(this.locationInfo.cabinet) {
-            this.editAsset.cabinetId = this.locationInfo.cabinet.id;
-          }else{
-            this.editAsset.cabinetId = null;
-          }
-          if(this.locationInfo.u && this.locationInfo.u.length > 0) {
-            this.editAsset.cabinetStart = this.locationInfo.u[0];
-            this.editAsset.cabinetEnd = this.locationInfo.u[1];
-          }else{
-            this.editAsset.cabinetStart = null;
-            this.editAsset.cabinetEnd = null;
-          }
-        }
-
-        if(this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
-          this.$refs.accountConfigBox.forEach(box => {
-            box.validateAccount();
-          });
-        }
-        // if(this.editAsset.model){
-        //   delete this.editAsset.model;
-        // }
-        this.$refs.assetEditForm.validate((valid) => {
-          if (valid && this.accountValidResult) {
-            if (this.editAsset.id) {
-              this.$put('asset', this.editAsset).then(res => {
-                this.prevent_opt.save=false;
-                if (res.code === 200) {
-                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(res.msg);
-                }
-              });
-            } else {
-              if(this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0){
-                this.$refs.accountConfigBox[0].validateAccount();
-              }
-              this.$post('asset', this.editAsset).then(res => {
-                this.prevent_opt.save=false;
-                if (res.code === 200) {
-                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(res.msg);
-                }
-              });
-            }
-          } else {
-            this.prevent_opt.save=false;
-            return false;
-          }
-        });
-      },
-      protocolTypeChange(protocol) {
-        if(protocol == 'TELNET'){
-          this.exporterDisableSwitch = true;
-        }else{
-          this.exporterDisableSwitch = false;
-        }
-      },
-      loadKeys:function(){
-        this.$get('/asset/tagKey').then(res=>{
-          if(res.code == 200){
-            this.tagKeys = res.data.list.map(item=>{
-                return {value:item}
-              })
+    'editAsset.accounts': {
+      deep: true,
+      handler (n) {
+        const temp = ['SSH', 'TELNET', 'SNMP']
+        n.forEach(item => {
+          const i = temp.indexOf(item.protocol)
+          if (i > -1) {
+            temp.splice(i, 1)
           }
         })
-      },
-      loadValues:function(tag){
-        let tagVal=tag.tag && tag.tag!=''?tag.tag:tag.value
-        if(!tagVal || tagVal ==''){this.tagValues=[]; return; }
-
-        let value = this.tagValuesCache.get(tagVal)
-        if(!value){
-          value = [];
-          this.$get('/asset/tagValue',{key:encodeURIComponent(tagVal)}).then(res => {
-            if(res.code == 200){
-              value = res.data.list.map(item=>{
-                return {value:item}
-              })
-
-              this.tagValues=Object.assign([],value)
-              this.tagValuesCache.set(tag.tag,Object.assign([],value))
-            }
-          })
-        }else{
-          this.tagValues=Object.assign([],value)
-        }
-      },
-      filterKey:function(input,callback){
-        if(!input || input == ''){
-          callback(this.tagKeys)
-        }else{
-          let result=this.tagKeys.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
-          callback(result)
-        }
-      },
-      filterValue:function(input,callback){
-        if(!input || input == ''){
-          callback(this.tagValues)
-        }else{
-          let result=this.tagValues.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
-          callback(result)
-        }
-      },
-    },
-    mounted() {
-      this.getUserData();
-      this.getVendorData();
-      this.getAssetTypeData();
-      this.getDcData();
-      this.loadKeys();
-      this.showAccountOp = false;
+        this.selectableAccountTypes = temp
+      }
     }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    modelReload () {
+
+    },
+    // 关闭model侧滑框
+    closeRightBox (refresh) {
+      this.rightBox.model.show = false
+      if (refresh) { // 新增修改型号后刷新相关数据
+        this.getVendorData()
+        this.getModelData(this.editAsset.model.type.code)
+      }
+    },
+    getVendorData () {
+      return new Promise(resolve => {
+        this.$get('sys/dict/all?type=vendor&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.vendorData = response.data
+          }
+          resolve(this.vendorData)
+        })
+      })
+    },
+    getModelData (assetType) {
+      return new Promise(resolve => {
+        const url = assetType ? ('model?typeCode=' + assetType + '&pageSize=-1') : 'model?pageSize=-1'
+        this.$get(url).then(response => {
+          if (response.code === 200) {
+            this.modelData = response.data.list
+          }
+          resolve(this.modelData)
+        })
+      })
+    },
+    // 组织符合cascader的数据格式
+    getVendorAndModelOptionData (assetType, event) {
+      if (event) {
+        this.editAsset.modelId = ''
+      }
+      const request = this.getModelData(assetType)
+      request.then(response => {
+        const resultData = []
+        const modelData = response
+        for (let i = 0; i < modelData.length; i++) {
+          if (!modelData[i].vendor) {
+            continue
+          }
+          const obj = {}
+          obj.id = modelData[i].vendor.id
+          obj.code = modelData[i].vendor.code
+          obj.value = 'vendor-' + modelData[i].vendor.code
+          obj.label = modelData[i].vendor.value
+          obj.children = []
+          resultData.push(obj)
+        }
+        const result = []
+        const obj1 = {}
+        for (let i = 0; i < resultData.length; i++) {
+          if (!obj1[resultData[i].id]) {
+            result.push(resultData[i])
+            obj1[resultData[i].id] = true
+          }
+        }
+        for (let x = 0; x < result.length; x++) {
+          for (let y = 0; y < modelData.length; y++) {
+            if (!modelData[y].vendor) {
+              continue
+            }
+            if (result[x].code === modelData[y].vendor.code) {
+              const obj2 = {}
+              obj2.value = modelData[y].id
+              obj2.label = modelData[y].name
+              result[x].children.push(obj2)
+            }
+          }
+        }
+        this.vendorAndModelOptionData = result
+      })
+    },
+    addTag () {
+      !this.editAsset.tags && (this.$set(this.editAsset, 'tags', []))
+      this.editAsset.tags.push({ tag: '', value: '' })
+    },
+    addAccount (type) {
+      if (type == 'SSH') {
+        this.editAsset.accounts.push({
+          authType: 1,
+          protocol: 'SSH',
+          port: 22,
+          params: {
+            user: '',
+            method: 'password',
+            password: '',
+            key: '',
+            keyPassword: ''
+          }
+        })
+      } else if (type == 'TELNET') {
+        this.editAsset.accounts.push({
+          protocol: 'TELNET',
+          port: 23,
+          params: {
+            user: '',
+            password: '',
+            userTip: '',
+            passwordTip: '',
+            reloginTip: ''
+          }
+        })
+      } else if (type == 'SNMP') {
+        this.editAsset.accounts.push({
+          protocol: 'SNMP',
+          port: 161,
+          params: {
+            version: 2,
+            community: 'public',
+            securityName: '',
+            securityLevel: '',
+            password: '',
+            privPassword: '',
+            authProtocol: '',
+            privProtocol: '',
+            contextName: ''
+          }
+        })
+      }
+      this.accountType = type
+      this.showAccountOp = false
+    },
+    removeAccount (index) {
+      this.editAsset.accounts.splice(index, 1)
+      if (this.editAsset.accounts.length > 0) {
+        this.accountType = this.editAsset.accounts[0].protocol
+      } else {
+        this.accountType = ''
+      }
+    },
+    removeTag (index) {
+      this.editAsset.tags.splice(index, 1)
+    },
+    setLocationData (data) {
+      this.locationInfo = data
+    },
+    locationValidator: function (rule, value, callback) {
+      const $temp = this
+      setTimeout(() => {
+        if (!this.locationInfo) {
+          callback(new Error($temp.$t('validate.required')))
+        } else if (this.locationInfo && !this.locationInfo.idc) {
+          callback(new Error($temp.$t('validate.required')))
+        } else {
+          callback()
+        }
+      }, 100)
+    },
+    modelChange (modelId) {
+      const model = this.modelData.find((item, index) => {
+        return modelId == item.id
+      })
+      this.modelSize = model.usize
+    },
+    getDcData () {
+      return new Promise(resolve => {
+        this.$get('idc?pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.dcData = response.data.list
+          }
+          resolve(this.dcData)
+        })
+      })
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user/list').then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve(this.userData)
+        })
+      })
+    },
+    getCabinetData (id) {
+      return new Promise(resolve => {
+        this.$get('cabinet?idcId=' + id).then(response => {
+          if (response.code === 200) {
+            this.cabinetData = response.data.list
+            for (let i = 0; i < this.cabinetData.length; i++) {
+              this.$set(this.cabinetData[i], 'children', this.dcData)
+            }
+          }
+          resolve(this.cabinetData)
+        })
+      })
+    },
+    getAssetTypeData () {
+      return new Promise(resolve => {
+        this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.assetTypeData = response.data
+            if (this.editAsset.model && !this.editAsset.model.type.code) {
+              this.editAsset.model.type.code = response.data[0].code
+            }
+          }
+          resolve(this.assetTypeData)
+        })
+      })
+    },
+    newModel () {
+      return JSON.parse(JSON.stringify(this.blankModel))
+    },
+    addVendor (assetType) {
+      this.model = this.newModel()
+      if (assetType) {
+        // model侧滑弹出时，自动选好assetType
+        for (let i = 0; i < this.assetTypeData.length; i++) {
+          if (this.assetTypeData[i].code == assetType) {
+            this.model.type.code = assetType
+            this.model.type.value = this.assetTypeData[i].value
+            break
+          }
+        }
+      }
+      this.rightBox.model.show = true
+    },
+    setAccountValidResult (result, protocol) {
+      this.accountValidResult = result
+      const index = this.errorProtocol.indexOf(protocol)
+      if (result) {
+        index != -1 && this.errorProtocol.splice(index, 1)
+      } else {
+        index == -1 && this.errorProtocol.push(protocol)
+      }
+    },
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.prevent_opt.save = false
+        this.$delete('asset?ids=' + this.editAsset.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    changeProtocolType (type) {
+      this.accountType = type
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      if (this.locationInfo) {
+        if (this.locationInfo.idc) {
+          this.editAsset.idcId = this.locationInfo.idc.id
+        }
+        if (this.locationInfo.cabinet) {
+          this.editAsset.cabinetId = this.locationInfo.cabinet.id
+        } else {
+          this.editAsset.cabinetId = null
+        }
+        if (this.locationInfo.u && this.locationInfo.u.length > 0) {
+          this.editAsset.cabinetStart = this.locationInfo.u[0]
+          this.editAsset.cabinetEnd = this.locationInfo.u[1]
+        } else {
+          this.editAsset.cabinetStart = null
+          this.editAsset.cabinetEnd = null
+        }
+      }
+
+      if (this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
+        this.$refs.accountConfigBox.forEach(box => {
+          box.validateAccount()
+        })
+      }
+      // if(this.editAsset.model){
+      //   delete this.editAsset.model;
+      // }
+      this.$refs.assetEditForm.validate((valid) => {
+        if (valid && this.accountValidResult) {
+          if (this.editAsset.id) {
+            this.$put('asset', this.editAsset).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            if (this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
+              this.$refs.accountConfigBox[0].validateAccount()
+            }
+            this.$post('asset', this.editAsset).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    protocolTypeChange (protocol) {
+      if (protocol == 'TELNET') {
+        this.exporterDisableSwitch = true
+      } else {
+        this.exporterDisableSwitch = false
+      }
+    },
+    loadKeys: function () {
+      this.$get('/asset/tagKey').then(res => {
+        if (res.code == 200) {
+          this.tagKeys = res.data.list.map(item => {
+            return { value: item }
+          })
+        }
+      })
+    },
+    loadValues: function (tag) {
+      const tagVal = tag.tag && tag.tag != '' ? tag.tag : tag.value
+      if (!tagVal || tagVal == '') { this.tagValues = []; return }
+
+      let value = this.tagValuesCache.get(tagVal)
+      if (!value) {
+        value = []
+        this.$get('/asset/tagValue', { key: encodeURIComponent(tagVal) }).then(res => {
+          if (res.code == 200) {
+            value = res.data.list.map(item => {
+              return { value: item }
+            })
+
+            this.tagValues = Object.assign([], value)
+            this.tagValuesCache.set(tag.tag, Object.assign([], value))
+          }
+        })
+      } else {
+        this.tagValues = Object.assign([], value)
+      }
+    },
+    filterKey: function (input, callback) {
+      if (!input || input == '') {
+        callback(this.tagKeys)
+      } else {
+        const result = this.tagKeys.filter(item => { return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1 })
+        callback(result)
+      }
+    },
+    filterValue: function (input, callback) {
+      if (!input || input == '') {
+        callback(this.tagValues)
+      } else {
+        const result = this.tagValues.filter(item => { return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1 })
+        callback(result)
+      }
+    }
+  },
+  mounted () {
+    this.getUserData()
+    this.getVendorData()
+    this.getAssetTypeData()
+    this.getDcData()
+    this.loadKeys()
+    this.showAccountOp = false
   }
+}
 </script>
 <style >
   .location-selector{
diff --git a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
index 0a98970b9..b468ba929 100644
--- a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
@@ -62,89 +62,89 @@
   </div>
 </template>
 <script>
-  export default {
-    name: "asset-state-right-box",
-    props: {
-      assetState: Object,
-      assetStateData: Array, // 所有数据，用于选择下拉框显示内容
-    },
-    data() {
-      return {
-        rules: { //表单校验规则
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-        },
-        editAssetState: {},
-      }
-    },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
+export default {
+  name: 'asset-state-right-box',
+  props: {
+    assetState: Object,
+    assetStateData: Array // 所有数据，用于选择下拉框显示内容
+  },
+  data () {
+    return {
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
       },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*保存*/
-      save() {
-        this.$refs.assetStateForm.validate((valid) => {
-          if (valid) {
-            if (this.assetState.id) {
-              this.$put('/asset/stateConf', this.editAssetState).then(response => {
-                if (response.code === 200) {
-                  this.esc(true);
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              this.$post('/asset/stateConf', this.editAssetState).then(response => {
-                if (response.code === 200) {
-                  this.esc(true);
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
+      editAssetState: {}
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      this.$refs.assetStateForm.validate((valid) => {
+        if (valid) {
+          if (this.assetState.id) {
+            this.$put('/asset/stateConf', this.editAssetState).then(response => {
+              if (response.code === 200) {
+                this.esc(true)
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
           } else {
-            return false;
-          }
-        });
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("/asset/stateConf?ids=" + this.editAssetState.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }).catch(()=>{
-        });
-      },
-    },
-    watch: {
-      assetState: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.editAssetState = JSON.parse(JSON.stringify(n));
+            this.$post('/asset/stateConf', this.editAssetState).then(response => {
+              if (response.code === 200) {
+                this.esc(true)
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
           }
+        } else {
+          return false
         }
-      },
+      })
     },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/asset/stateConf?ids=' + this.editAssetState.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+      })
+    }
+  },
+  watch: {
+    assetState: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.editAssetState = JSON.parse(JSON.stringify(n))
+        }
+      }
+    }
   }
+}
 </script>
 <style lang="scss">
   .right-box-asset-state {
diff --git a/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
index 31fdb8bf3..147b11cfd 100644
--- a/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
@@ -79,128 +79,129 @@
   </div>
 </template>
 <script>
-  import selectAssetType from '../popBox/selectAssetType';
-  export default {
-    name: "asset-type-right-box",
-    props: {
-      assetType: Object,
-      assetTypeData: Array, // 所有数据，用于选择下拉框显示内容
+import selectAssetType from '../popBox/selectAssetType'
+export default {
+  name: 'asset-type-right-box',
+  props: {
+    assetType: Object,
+    assetTypeData: Array // 所有数据，用于选择下拉框显示内容
+  },
+  components: {
+    selectAssetType
+  },
+  mounted () {
+    this.assetTypeData2 = [...this.assetTypeData]
+    this.setDisabled(this.assetTypeData2)
+  },
+  data () {
+    return {
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      assetTypeData2: [],
+      editAssetType: {},
+      showParentAssetType: {}
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
     },
-    components: {
-      selectAssetType
+    clickOutside () {
+      this.esc(false)
     },
-    mounted() {
-      this.assetTypeData2 = [...this.assetTypeData];
-      this.setDisabled(this.assetTypeData2);
-    },
-    data() {
-      return {
-        rules: { //表单校验规则
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-        },
-        assetTypeData2: [],
-        editAssetType: {},
-        showParentAssetType: {},
-      }
-    },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      setDisabled(data, flag) {
-        data.forEach(t => {
-          if (t.id == this.assetType.id || flag) {
-            this.$set(t, "disabled", true);
-            this.setDisabled(t.children, true);
-          } else {
-            this.$set(t, "disabled", false);
-            this.setDisabled(t.children);
-          }
-        });
-      },
-      clearParent() {
-        this.showParentAssetType = {name: "", id: ""};
-      },
-      /*保存*/
-      save() {
-        this.$refs.assetTypeForm.validate((valid) => {
-          if (valid) {
-            this.showParentAssetType.id && (this.editAssetType.pid = this.showParentAssetType.id);
-            if (this.assetType.id) {
-              this.$put('/asset/typeConf', this.editAssetType).then(response => {
-                if (response.code === 200) {
-                  this.esc(true);
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              this.$post('/asset/typeConf', this.editAssetType).then(response => {
-                if (response.code === 200) {
-                  this.esc(true);
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          } else {
-            return false;
-          }
-        });
-      },
-      selectParent(val) {
-        if (!val) {
-          return false;
+    setDisabled (data, flag) {
+      data.forEach(t => {
+        if (t.id == this.assetType.id || flag) {
+          this.$set(t, 'disabled', true)
+          this.setDisabled(t.children, true)
+        } else {
+          this.$set(t, 'disabled', false)
+          this.setDisabled(t.children)
         }
-        this.showParentAssetType = val;
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("/asset/typeConf?ids=" + this.editAssetType.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }).catch(()=>{
-        });
-      },
-      findParent(data, pid) {
-        for (let i = 0; i < data.length; i++) {
-          return data[i].id == pid ? {...data[i]} : this.findParent(data[i].children, pid);
+      })
+    },
+    clearParent () {
+      this.showParentAssetType = { name: '', id: '' }
+    },
+    /* 保存 */
+    save () {
+      this.$refs.assetTypeForm.validate((valid) => {
+        if (valid) {
+          this.showParentAssetType.id && (this.editAssetType.pid = this.showParentAssetType.id)
+          if (this.assetType.id) {
+            this.$put('/asset/typeConf', this.editAssetType).then(response => {
+              if (response.code === 200) {
+                this.esc(true)
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            this.$post('/asset/typeConf', this.editAssetType).then(response => {
+              if (response.code === 200) {
+                this.esc(true)
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    selectParent (val) {
+      if (!val) {
+        return false
+      }
+      this.showParentAssetType = val
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/asset/typeConf?ids=' + this.editAssetType.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    findParent (data, pid) {
+      // eslint-disable-next-line no-unreachable-loop
+      for (let i = 0; i < data.length; i++) {
+        return data[i].id == pid ? { ...data[i] } : this.findParent(data[i].children, pid)
+      }
+    }
+  },
+  watch: {
+    assetType: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.editAssetType = JSON.parse(JSON.stringify(n))
+          if (this.editAssetType.pid != 0) {
+            this.showParentAssetType = this.findParent(this.assetTypeData, this.editAssetType.pid)
+          }
         }
       }
-    },
-    watch: {
-      assetType: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.editAssetType = JSON.parse(JSON.stringify(n));
-            if (this.editAssetType.pid != 0) {
-              this.showParentAssetType = this.findParent(this.assetTypeData, this.editAssetType.pid);
-            }
-          }
-        }
-      },
-    },
+    }
   }
+}
 </script>
 <style lang="scss">
   .right-box-asset-type {
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
index 25cc0e3d9..09047fe45 100644
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
@@ -66,8 +66,8 @@
               <div class="line-100"></div>
               <div class="endpoint-sub-table-body">
                 <div ref="assetScrollbar" style="height: 100%; overflow: auto;">
-                  <div :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row"
-                       :id="'select-asset-'+item.id">
+                  <div v-for="(item, index) in assetList" :id="'select-asset-'+item.id" :key="index"
+                       :data="item.id" class="endpoint-sub-table-row">
                     <div class="endpoint-sub-table-col" style="width: 15px;">
                       <el-checkbox v-model="item.sel" @change="selectAsset" id="batch-edit-select-one"></el-checkbox>
                     </div>
@@ -180,7 +180,7 @@
             <div class="tag-edit-action">Action</div>
           </div>
           <div ref="tagEditBoxScrollbar" style="height: calc(100% - 32px); overflow: auto;" id="batch-edit-tags-box">
-            <div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
+            <div v-for="(item, index) in editAsset.tags" :key="index" class="tag-edit-box-body">
               <el-form-item class="tag-edit tag-edit-tag" :label-width="'0px'"
                             :rules="{required: true, message: $t('validate.required'), trigger: 'change'}"
                             :prop="'tags.' + index + '.tag'">
@@ -206,7 +206,7 @@
         <!--cli-->
         <div class="right-box-sub-title">{{$t('config.account.account')}}
           <el-popover placement="right" width="70" trigger="click" :disabled="editAsset.accounts.length == 3"
-                      v-model.sync="showAccountOp" popper-class="no-style-class">
+                      v-model="showAccountOp" popper-class="no-style-class">
             <button slot="reference" id="add-type" type="button" class="float-right"
                     :class="{'nz-btn-disabled': editAsset.accounts.length == 3}">
               <span><i class="nz-icon nz-icon-create-square"></i></span>
@@ -254,485 +254,482 @@
 </template>
 
 <script>
-  import accountConfig from '../../page/asset/accountConfig';
-  import {host} from '../js/validate';
-  import {port} from '../js/validate'
-  import locationCascader from "./locationCascader";
+import accountConfig from '../../page/asset/accountConfig'
+import { host, port } from '../js/validate'
 
-  export default {
-    name:"batchEditAsset",
-    components:{
-      'account-config-box':accountConfig,
-      'location-cascader':locationCascader,
-    },
-    watch:{
-      assetSelList(n,o){
-        this.endpoint.assetSelList=n;
-        if(n.length>0){
-          this.paramBorderColor='#dcdfe6';
-        }else{
-          this.paramBorderColor='#F56C6C';
-        }
+export default {
+  name: 'batchEditAsset',
+  components: {
+    'account-config-box': accountConfig
+  },
+  watch: {
+    assetSelList (n) {
+      this.endpoint.assetSelList = n
+      if (n.length > 0) {
+        this.paramBorderColor = '#dcdfe6'
+      } else {
+        this.paramBorderColor = '#F56C6C'
+      }
+    }
+  },
+  data () {
+    return {
+      editAsset: {
+        assetIds: [],
+        tags: [],
+        accounts: []
       },
-    },
-    data(){
-      return {
-        editAsset:{
-          assetIds:[],
-          tags:[],
-          accounts:[],
-        },
-        assetSelList:[],
-        assetList:[],
-        assetListAll:false,
-        assetListHalf:false,
-        assetSearch:{host:'',sn:'',text:'',label:'Host',dropdownShow:false}, //侧滑框中asset的搜索相关
-        assetPageObj:{pageNo:1,pageSize:-1},
-        endpointTouch:false,
-        paramBorderColor:'#dcdfe6',
-        endpointTableTitle:[
-          {
-            label:this.$t("project.endpoint.asset"),
-            prop:'asset',
-            width:121,
-            show:false,
-          },{
-            label:this.$t("project.endpoint.host"),
-            prop:'host',
-            width:121,
-            show:true,
-          },{
-            label:"SN",
-            prop:'sn',
-            show:true,
-          },{
-            label:this.$t("project.endpoint.port"),
-            prop:'port',
-            width:54,
-            show:false,
-          },{
-            label:this.$t("project.endpoint.param"),
-            prop:'param',
-            width:90,
-            show:false,
-          },{
-            label:this.$t("project.endpoint.path"),
-            prop:'path',
-            width:66,
-            show:false,
-          }
+      assetSelList: [],
+      assetList: [],
+      assetListAll: false,
+      assetListHalf: false,
+      assetSearch: { host: '', sn: '', text: '', label: 'Host', dropdownShow: false }, // 侧滑框中asset的搜索相关
+      assetPageObj: { pageNo: 1, pageSize: -1 },
+      endpointTouch: false,
+      paramBorderColor: '#dcdfe6',
+      endpointTableTitle: [
+        {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          width: 121,
+          show: false
+        }, {
+          label: this.$t('project.endpoint.host'),
+          prop: 'host',
+          width: 121,
+          show: true
+        }, {
+          label: 'SN',
+          prop: 'sn',
+          show: true
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          width: 54,
+          show: false
+        }, {
+          label: this.$t('project.endpoint.param'),
+          prop: 'param',
+          width: 90,
+          show: false
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          width: 66,
+          show: false
+        }
+      ],
+      endpoint: { projectId: '', moduleId: '', assetSelList: [] },
+      rightBox: { model: { show: false } },
+      modelData: [],
+      dcData: [],
+      assetTypeData: [],
+      cabinetData: [],
+      vendorAndModelOptionData: [], // 厂商型号下拉框选择数据
+
+      showAccountOp: false,
+      errorProtocol: [], // 校验不通过的account
+      selectableAccountTypes: ['SSH', 'TELNET', 'SNMP'],
+
+      modelSize: 1,
+      locationInfo: null,
+
+      accountType: '',
+      model: {},
+      blankModel: {
+        id: '',
+        name: '',
+        vendor: { id: '', value: '', code: '', type: '' },
+        type: { id: '', value: '', code: '', type: '' },
+        assetStat: { total: '', inStock: '', outStock: '' },
+        remark: '',
+        vendorCode: '',
+        typeCode: ''
+      },
+      userData: [], // 用户（人）信息
+      cabinetSelectedData: {
+        name: '',
+        uSize: 0,
+        remark: '',
+        idcId: ''
+      },
+      rules: {
+        sn: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        endpoint:{projectId:'',moduleId:'',assetSelList:[]},
-        rightBox:{model:{show:false}},
-        modelData:[],
-        dcData:[],
-        assetTypeData:[],
-        cabinetData:[],
-        vendorAndModelOptionData:[], //厂商型号下拉框选择数据
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        modelId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'model.type.code': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        idcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'impi.host': [
+          { validator: host, trigger: 'blur' }
+        ],
+        'impi.port': [
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+      cabRules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        uSize: [
+          { required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        idcId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      formData: null,
+      accountValidResult: true,
+      changeProtocolSwitch: true,
+      exporterDisableSwitch: false,
+      tagKeys: [],
+      tagValues: [],
+      tagValuesCache: new Map()
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    modelReload () {
 
-        showAccountOp:false,
-        errorProtocol:[], //校验不通过的account
-        selectableAccountTypes:["SSH","TELNET","SNMP"],
-
-        modelSize:1,
-        locationInfo:null,
-
-        accountType:'',
-        model:{},
-        blankModel:{
-          id:'',
-          name:'',
-          vendor:{id:'',value:'',code:'',type:''},
-          type:{id:'',value:'',code:'',type:''},
-          assetStat:{total:'',inStock:'',outStock:''},
-          remark:'',
-          vendorCode:'',
-          typeCode:''
-        },
-        userData:[], //用户（人）信息
-        cabinetSelectedData:{
-          name:'',
-          uSize:0,
-          remark:'',
-          idcId:'',
-        },
-        rules:{
-          sn:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          host:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'},
-            {validator:host,trigger:'blur'}
-          ],
-          modelId:[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          "model.type.code":[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          idcId:[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          'impi.host':[
-            {validator:host,trigger:'blur'}
-          ],
-          'impi.port':[
-            {validator:port,trigger:'blur'}
-          ]
-        },
-        cabRules:{
-          name:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          uSize:[
-            {required:true,type:'number',min:1,max:47,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          idcId:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ]
-        },
-        formData:null,
-        accountValidResult:true,
-        changeProtocolSwitch:true,
-        exporterDisableSwitch:false,
-        tagKeys:[],
-        tagValues:[],
-        tagValuesCache:new Map(),
+    },
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
+    getAssetList () {
+      this.$get('asset', this.assetPageObj).then(response => {
+        if (response.code === 200) {
+          const respData = response.data.list
+          for (let i = 0; i < respData.length; i++) {
+            respData[i].sel = false
+            for (let j = 0; j < this.assetSelList.length; j++) {
+              if (respData[i].id == this.assetSelList[j].id) {
+                respData.splice(i, 1)
+                i--
+                break
+              }
+            }
+          }
+          this.assetList = response.data.list
+        }
+      })
+    },
+    // 回车搜索searchAsset
+    searchAssetKeydown (e) {
+      e = e || window.event
+      const keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode
+      if (keyCode === 13) {
+        this.searchAsset()
       }
     },
-    methods:{
-      clickOutside(){
-        this.esc(false);
-      },
-      /*关闭弹框*/
-      esc(refresh){
-        this.prevent_opt.save=false;
-        this.$emit("close",refresh);
-      },
-      modelReload(){
-
-      },
-      // 获取endpoint弹框中的asset子弹框里asset列表数据
-      getAssetList(){
-        this.$get('asset',this.assetPageObj).then(response=>{
-          if(response.code===200){
-            let respData=response.data.list;
-            for(let i=0; i<respData.length; i++){
-              respData[i].sel=false;
-              for(let j=0; j<this.assetSelList.length; j++){
-                if(respData[i].id==this.assetSelList[j].id){
-                  respData.splice(i,1);
-                  i--;
-                  break;
-                }
-              }
-            }
-            this.assetList=response.data.list;
-          }
-        });
-      },
-      //回车搜索searchAsset
-      searchAssetKeydown(e){
-        e=e?e:window.event;
-        let keyCode=e.keyCode?e.keyCode:e.which?e.which:e.charCode;
-        if(keyCode===13){
-          this.searchAsset()
-        }
-      },
-      //endpoint弹框中的asset子弹框搜索
-      searchAsset(){
-        if(this.assetSearch.label=='Host'){
-          this.assetSearch.host=this.assetSearch.text;
-          this.assetSearch.sn='';
-        }else if(this.assetSearch.label=='SN'){
-          this.assetSearch.sn=this.assetSearch.text;
-          this.assetSearch.host='';
-        }
-        this.assetPageObj=Object.assign({},this.assetPageObj,this.assetSearch);
-        this.getAssetList();
-      },
-      // endpoint弹框的asset子弹框顶部搜索条件选中事件
-      dropdownSelect(label){
-        this.assetSearch.label=label;
-        this.assetSearch.dropdownShow=false;
-      },
-      // endpoint弹框中的asset子弹框里asset选择事件
-      selectAsset(){
-        this.$nextTick(()=>{
-          let index=0;
-          this.assetList.forEach(item=>{
-            if(item.sel){
-              index++;
-            }
-          });
-          if(index==0){
-            this.assetListAll=false;
-            this.assetListHalf=false;
-          }else if(index<this.assetList.length){
-            this.assetListAll=true;
-            this.assetListHalf=true;
-          }else{
-            this.assetListAll=true;
-            this.assetListHalf=false;
+    // endpoint弹框中的asset子弹框搜索
+    searchAsset () {
+      if (this.assetSearch.label == 'Host') {
+        this.assetSearch.host = this.assetSearch.text
+        this.assetSearch.sn = ''
+      } else if (this.assetSearch.label == 'SN') {
+        this.assetSearch.sn = this.assetSearch.text
+        this.assetSearch.host = ''
+      }
+      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
+      this.getAssetList()
+    },
+    // endpoint弹框的asset子弹框顶部搜索条件选中事件
+    dropdownSelect (label) {
+      this.assetSearch.label = label
+      this.assetSearch.dropdownShow = false
+    },
+    // endpoint弹框中的asset子弹框里asset选择事件
+    selectAsset () {
+      this.$nextTick(() => {
+        let index = 0
+        this.assetList.forEach(item => {
+          if (item.sel) {
+            index++
           }
         })
-      },
-      addToEndpointList(){
-        let arr=[];
-        this.assetListAll=false;
-        this.assetListHalf=false;
-        this.endpointTouch=true;
-        this.assetList=this.assetList.filter(item=>{
-          let flag=item.sel;
-          if(flag){
-            item.sel=false;
-            arr.push(item);
-          }
-          return !flag
-        });
-        this.assetSelList=this.assetSelList.concat(arr);
-      },
-      assetListSelAll(flag){
-        if(flag){
-          this.assetListHalf=false;
-          this.assetList.forEach(item=>{
-            item.sel=flag;
-          });
-        }else if(!flag&& !this.assetListHalf){
-          this.assetList.forEach(item=>{
-            item.sel=flag;
-          });
-        }else if(!flag&&this.assetListHalf){
-          this.assetListHalf=false;
-          this.assetListAll=true;
-          this.assetList.forEach(item=>{
-            item.sel= !flag;
-          });
+        if (index == 0) {
+          this.assetListAll = false
+          this.assetListHalf = false
+        } else if (index < this.assetList.length) {
+          this.assetListAll = true
+          this.assetListHalf = true
+        } else {
+          this.assetListAll = true
+          this.assetListHalf = false
         }
-      },
-      setRowIndex({row,rowIndex}){
-        row.index=rowIndex;
-      },
-      //清空勾选的endpoint
-      clearSelection(){
-        let selections=this.$refs.endpointTable.selection;
-        if(selections&&selections.length>0){
-          for(let i=0; i<selections.length; i++){
-            this.removeEndpoint(selections[i])
-          }
-        }
-      },
-      //移除endpoint
-      removeEndpoint(endpoint){
-        endpoint.isEdit=false;
-        for(let i=0; i<this.assetSelList.length; i++){
-          if(this.assetSelList[i].id==endpoint.id){
-            this.assetSelList.splice(i,1);
-            this.assetList.unshift(endpoint);
-            i--;
-            break;
-          }
-        }
-      },
-      //组织符合cascader的数据格式
-      addTag(){
-        !this.editAsset.tags&&(this.$set(this.editAsset,"tags",[]));
-        this.editAsset.tags.push({tag:"",value:""});
-      },
-      addAccount(type){
-        if(type=="SSH"){
-          this.editAsset.accounts.push({
-            authType:1,
-            protocol:"SSH",
-            port:22,
-            params:{
-              user:"",
-              method:"password",
-              password:"",
-              key:"",
-              passwordKey:""
-            }
-          });
-        }else if(type=="TELNET"){
-          this.editAsset.accounts.push({
-            protocol:"TELNET",
-            port:23,
-            params:{
-              user:"",
-              password:"",
-              userTip:"",
-              passwordTip:"",
-              reloginTip:""
-            }
-          });
-        }else if(type=="SNMP"){
-          this.editAsset.accounts.push({
-            protocol:"SNMP",
-            port:161,
-            params:{
-              version:2,
-              community:"public",
-              securityName:"",
-              securityLevel:"",
-              password:"",
-              privPassword:"",
-              authProtocol:"",
-              privProtocol:"",
-              contextName:""
-            }
-          });
-        }
-        this.accountType=type;
-        this.showAccountOp=false;
-        this.$nextTick(()=>{
-          let sbWrap=this.$refs.scrollbar.$refs.wrap;
-          sbWrap.scrollTop=sbWrap.scrollHeight;
-        });
-      },
-      removeAccount(index){
-        this.editAsset.accounts.splice(index,1);
-        if(this.editAsset.accounts.length>0){
-          this.accountType=this.editAsset.accounts[0].protocol;
-        }else{
-          this.accountType="";
-        }
-      },
-      removeTag(index){
-        this.editAsset.tags.splice(index,1);
-      },
-      getUserData(){
-        return new Promise(resolve=>{
-          this.$get('sys/user/list').then(response=>{
-            if(response.code===200){
-              this.userData=response.data.list
-            }
-            resolve(this.userData);
-          });
-        });
-      },
-      setAccountValidResult(result,protocol){
-        this.accountValidResult=result;
-        let index=this.errorProtocol.indexOf(protocol);
-        if(result){
-          index!= -1?this.errorProtocol.splice(index,1):"";
-        }else{
-          index== -1?this.errorProtocol.push(protocol):"";
-        }
-      },
-      changeProtocolType(type){
-        this.accountType=type;
-        this.$nextTick(()=>{
-          let sbWrap=this.$refs.scrollbar.$refs.wrap;
-          sbWrap.scrollTop=sbWrap.scrollHeight;
-        });
-      },
-      save(){
-        if(this.prevent_opt.save){ return } ;
-        if(this.locationInfo){
-          if(this.locationInfo.idc){
-            this.editAsset.idcId=this.locationInfo.idc.id;
-          }
-          if(this.locationInfo.cabinet){
-            this.editAsset.cabinetId=this.locationInfo.cabinet.id;
-          }else{
-            this.editAsset.cabinetId=null;
-          }
-          if(this.locationInfo.u&&this.locationInfo.u.length>0){
-            this.editAsset.cabinetStart=this.locationInfo.u[0];
-            this.editAsset.cabinetEnd=this.locationInfo.u[1];
-          }else{
-            this.editAsset.cabinetStart=null;
-            this.editAsset.cabinetEnd=null;
-          }
-        }
-        this.endpointTouch=true;
-        if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
-          this.$refs.accountConfigBox.forEach(box=>{
-            box.validateAccount();
-          });
-        }
-        this.$refs.assetEditForm.validate((valid)=>{
-          if(valid&&this.accountValidResult){
-            if(this.assetSelList.length===0){
-              return false;
-            }
-            this.assetSelList.forEach((item)=>{
-              this.editAsset.assetIds.push(item.id);
-            });
-            this.prevent_opt.save=true;
-            this.$put('/asset/batch',this.editAsset).then(res=>{
-              this.prevent_opt.save=false;
-              if(res.code===200){
-                this.$message({duration:2000,type:'success',message:this.$t("tip.saveSuccess")});
-                this.esc(true);
-              }else{
-                this.$message.error(res.msg);
-              }
-            });
-          }else{
-            this.prevent_opt.save=false;
-            return false;
-          }
-        });
-      },
-      protocolTypeChange(protocol){
-        if(protocol=='TELNET'){
-          this.exporterDisableSwitch=true;
-        }else{
-          this.exporterDisableSwitch=false;
-        }
-      },
-      loadValues:function(tag){
-        let tagVal=tag.tag&&tag.tag!=''?tag.tag:tag.value
-        if(!tagVal||tagVal==''){
-          this.tagValues=[];
-          return;
-        }
-
-        let value=this.tagValuesCache.get(tagVal)
-        if(!value){
-          value=[];
-          this.$get('/asset/tagValue',{key:encodeURIComponent(tagVal)}).then(res=>{
-            if(res.code==200){
-              value=res.data.list.map(item=>{
-                return {value:item}
-              })
-
-              this.tagValues=Object.assign([],value)
-              this.tagValuesCache.set(tag.tag,Object.assign([],value))
-            }
-          })
-        }else{
-          this.tagValues=Object.assign([],value)
-        }
-      },
-      filterKey:function(input,callback){
-        if(!input||input==''){
-          callback(this.tagKeys)
-        }else{
-          let result=this.tagKeys.filter(item=>{
-            return item.value.toLowerCase().indexOf(input.toLowerCase())!= -1
-          })
-          callback(result)
-        }
-      },
-      filterValue:function(input,callback){
-        if(!input||input==''){
-          callback(this.tagValues)
-        }else{
-          let result=this.tagValues.filter(item=>{
-            return item.value.toLowerCase().indexOf(input.toLowerCase())!= -1
-          })
-          callback(result)
-        }
-      },
+      })
     },
-    mounted(){
-      this.getUserData();
-      this.getAssetList();
-      this.showAccountOp=false;
+    addToEndpointList () {
+      const arr = []
+      this.assetListAll = false
+      this.assetListHalf = false
+      this.endpointTouch = true
+      this.assetList = this.assetList.filter(item => {
+        const flag = item.sel
+        if (flag) {
+          item.sel = false
+          arr.push(item)
+        }
+        return !flag
+      })
+      this.assetSelList = this.assetSelList.concat(arr)
+    },
+    assetListSelAll (flag) {
+      if (flag) {
+        this.assetListHalf = false
+        this.assetList.forEach(item => {
+          item.sel = flag
+        })
+      } else if (!flag && !this.assetListHalf) {
+        this.assetList.forEach(item => {
+          item.sel = flag
+        })
+      } else if (!flag && this.assetListHalf) {
+        this.assetListHalf = false
+        this.assetListAll = true
+        this.assetList.forEach(item => {
+          item.sel = !flag
+        })
+      }
+    },
+    setRowIndex ({ row, rowIndex }) {
+      row.index = rowIndex
+    },
+    // 清空勾选的endpoint
+    clearSelection () {
+      const selections = this.$refs.endpointTable.selection
+      if (selections && selections.length > 0) {
+        for (let i = 0; i < selections.length; i++) {
+          this.removeEndpoint(selections[i])
+        }
+      }
+    },
+    // 移除endpoint
+    removeEndpoint (endpoint) {
+      endpoint.isEdit = false
+      for (let i = 0; i < this.assetSelList.length; i++) {
+        if (this.assetSelList[i].id == endpoint.id) {
+          this.assetSelList.splice(i, 1)
+          this.assetList.unshift(endpoint)
+          i--
+          break
+        }
+      }
+    },
+    // 组织符合cascader的数据格式
+    addTag () {
+      !this.editAsset.tags && (this.$set(this.editAsset, 'tags', []))
+      this.editAsset.tags.push({ tag: '', value: '' })
+    },
+    addAccount (type) {
+      if (type == 'SSH') {
+        this.editAsset.accounts.push({
+          authType: 1,
+          protocol: 'SSH',
+          port: 22,
+          params: {
+            user: '',
+            method: 'password',
+            password: '',
+            key: '',
+            passwordKey: ''
+          }
+        })
+      } else if (type == 'TELNET') {
+        this.editAsset.accounts.push({
+          protocol: 'TELNET',
+          port: 23,
+          params: {
+            user: '',
+            password: '',
+            userTip: '',
+            passwordTip: '',
+            reloginTip: ''
+          }
+        })
+      } else if (type == 'SNMP') {
+        this.editAsset.accounts.push({
+          protocol: 'SNMP',
+          port: 161,
+          params: {
+            version: 2,
+            community: 'public',
+            securityName: '',
+            securityLevel: '',
+            password: '',
+            privPassword: '',
+            authProtocol: '',
+            privProtocol: '',
+            contextName: ''
+          }
+        })
+      }
+      this.accountType = type
+      this.showAccountOp = false
+      this.$nextTick(() => {
+        const sbWrap = this.$refs.scrollbar.$refs.wrap
+        sbWrap.scrollTop = sbWrap.scrollHeight
+      })
+    },
+    removeAccount (index) {
+      this.editAsset.accounts.splice(index, 1)
+      if (this.editAsset.accounts.length > 0) {
+        this.accountType = this.editAsset.accounts[0].protocol
+      } else {
+        this.accountType = ''
+      }
+    },
+    removeTag (index) {
+      this.editAsset.tags.splice(index, 1)
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user/list').then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+          resolve(this.userData)
+        })
+      })
+    },
+    setAccountValidResult (result, protocol) {
+      this.accountValidResult = result
+      const index = this.errorProtocol.indexOf(protocol)
+      if (result) {
+        index != -1 && this.errorProtocol.splice(index, 1)
+      } else {
+        index == -1 && this.errorProtocol.push(protocol)
+      }
+    },
+    changeProtocolType (type) {
+      this.accountType = type
+      this.$nextTick(() => {
+        const sbWrap = this.$refs.scrollbar.$refs.wrap
+        sbWrap.scrollTop = sbWrap.scrollHeight
+      })
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      if (this.locationInfo) {
+        if (this.locationInfo.idc) {
+          this.editAsset.idcId = this.locationInfo.idc.id
+        }
+        if (this.locationInfo.cabinet) {
+          this.editAsset.cabinetId = this.locationInfo.cabinet.id
+        } else {
+          this.editAsset.cabinetId = null
+        }
+        if (this.locationInfo.u && this.locationInfo.u.length > 0) {
+          this.editAsset.cabinetStart = this.locationInfo.u[0]
+          this.editAsset.cabinetEnd = this.locationInfo.u[1]
+        } else {
+          this.editAsset.cabinetStart = null
+          this.editAsset.cabinetEnd = null
+        }
+      }
+      this.endpointTouch = true
+      if (this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
+        this.$refs.accountConfigBox.forEach(box => {
+          box.validateAccount()
+        })
+      }
+      this.$refs.assetEditForm.validate((valid) => {
+        if (valid && this.accountValidResult) {
+          if (this.assetSelList.length === 0) {
+            return false
+          }
+          this.assetSelList.forEach((item) => {
+            this.editAsset.assetIds.push(item.id)
+          })
+          this.prevent_opt.save = true
+          this.$put('/asset/batch', this.editAsset).then(res => {
+            this.prevent_opt.save = false
+            if (res.code === 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    protocolTypeChange (protocol) {
+      if (protocol == 'TELNET') {
+        this.exporterDisableSwitch = true
+      } else {
+        this.exporterDisableSwitch = false
+      }
+    },
+    loadValues: function (tag) {
+      const tagVal = tag.tag && tag.tag != '' ? tag.tag : tag.value
+      if (!tagVal || tagVal == '') {
+        this.tagValues = []
+        return
+      }
+
+      let value = this.tagValuesCache.get(tagVal)
+      if (!value) {
+        value = []
+        this.$get('/asset/tagValue', { key: encodeURIComponent(tagVal) }).then(res => {
+          if (res.code == 200) {
+            value = res.data.list.map(item => {
+              return { value: item }
+            })
+
+            this.tagValues = Object.assign([], value)
+            this.tagValuesCache.set(tag.tag, Object.assign([], value))
+          }
+        })
+      } else {
+        this.tagValues = Object.assign([], value)
+      }
+    },
+    filterKey: function (input, callback) {
+      if (!input || input == '') {
+        callback(this.tagKeys)
+      } else {
+        const result = this.tagKeys.filter(item => {
+          return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1
+        })
+        callback(result)
+      }
+    },
+    filterValue: function (input, callback) {
+      if (!input || input == '') {
+        callback(this.tagValues)
+      } else {
+        const result = this.tagValues.filter(item => {
+          return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1
+        })
+        callback(result)
+      }
     }
+  },
+  mounted () {
+    this.getUserData()
+    this.getAssetList()
+    this.showAccountOp = false
   }
+}
 </script>
 <style>
   .location-selector {
@@ -1139,4 +1136,3 @@
 
   /* end--子弹框*/
 </style>
-
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index 475c010eb..b1b97eb43 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -44,101 +44,101 @@
 </template>
 
 <script>
-    export default {
-      name: "cabinetBox",
-      props:{
-        cabinet: {type:Object},
-        currentDc: {type:Object}
-      },
-      data(){
-        return {
-          editCabinet:{},
-          rules:{
-            name: [
-              {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-            ],
-            uSize: [
-              {required: true,  message: this.$t('validate.required'), trigger: 'blur'},
-              {type: 'number', min: 1, max: 47,message: this.$t('validate.uSize'),trigger: 'blur'}
-            ],
-          },
-        }
-      },
-      methods:{
-        clickOutside() {
-          this.esc(false);
-        },
-        esc(refresh) {
-          this.prevent_opt.save=false;
-          this.$emit("close", refresh);
-        },
-        save() {
-          if(this.prevent_opt.save){ return } ;
-          this.prevent_opt.save=true;
-          this.$refs.cabinetForm.validate((valid => {
-            if(valid){
-              this.editCabinet.idcId = this.currentDc.id;
-              if (this.editCabinet.id) {
-                this.$put('cabinet', this.editCabinet).then(res => {
-                  this.prevent_opt.save=false;
-                  if (res.code === 200) {
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    this.esc(true);
-                  } else {
-                    this.$message.error(res.msg);
-                  }
-                })
-              } else {
-                this.$post('cabinet', this.editCabinet).then(res => {
-                  this.prevent_opt.save=false;
-                  if (res.code === 200) {
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    this.esc(true);
-                  } else {
-                    this.$message.error(res.msg);
-                  }
-                })
-              }
-            }else{
-              this.prevent_opt.save=false;
-              return false;
-            }
-          }))
-        },
-        del() {
-          if(this.prevent_opt.save){ return } ;
-          this.prevent_opt.save=true;
-          this.$confirm(this.$t("tip.confirmDelete"), {
-            confirmButtonText: this.$t("tip.yes"),
-            cancelButtonText: this.$t("tip.no"),
-            type: 'warning'
-          }).then(() => {
-            this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response=>{
-              this.prevent_opt.save=false;
-              if(response.code ==  200){
-                this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc(true);
-              }else{
-                this.$message.error(response.msg);
-              }
-            })
-          }).catch(()=>{
-            this.prevent_opt.save=false;
-          })
-        }
-      },
-      watch:{
-        cabinet:{
-          deep:true,
-          immediate:true,
-          handler:function(n,o){
-            if (n) {
-              this.editCabinet = JSON.parse(JSON.stringify(n));
-            }
-          }
-        },
+export default {
+  name: 'cabinetBox',
+  props: {
+    cabinet: { type: Object },
+    currentDc: { type: Object }
+  },
+  data () {
+    return {
+      editCabinet: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        uSize: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { type: 'number', min: 1, max: 47, message: this.$t('validate.uSize'), trigger: 'blur' }
+        ]
       }
     }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.cabinetForm.validate(valid => {
+        if (valid) {
+          this.editCabinet.idcId = this.currentDc.id
+          if (this.editCabinet.id) {
+            this.$put('cabinet', this.editCabinet).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            this.$post('cabinet', this.editCabinet).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code == 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    }
+  },
+  watch: {
+    cabinet: {
+      deep: true,
+      immediate: true,
+      handler: function (n, o) {
+        if (n) {
+          this.editCabinet = JSON.parse(JSON.stringify(n))
+        }
+      }
+    }
+  }
+}
 </script>
 <style >
 </style>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index a723b4f54..3e15772a4 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -27,7 +27,7 @@
           </el-form-item>
           <el-form-item :label='$t("asset.principal")' prop="principal">
             <el-select value-key="id" popper-class="config-dropdown" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
-              <el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username" :value="item.userId" :id="'dc-principal-op-'+item.userId">
+              <el-option v-for="item in userData" :id="'dc-principal-op-'+item.userId" :key="item.userId" :label="item.username" :value="item.userId">
                 <span>{{item.username}}</span>
               </el-option>
             </el-select>
@@ -94,154 +94,150 @@
 </template>
 
 <script>
-  import selectArea from "../popBox/selectArea"; //dc弹框
-  var  regNum = /^[0-9]+.?[0-9]*/;
-  export default {
-    name: "dcBox",
-    props: {
-      dc: Object,
-      userData: Array
-    },
-    components:{
-      'select-area': selectArea
-    },
-    data() {
-      return {
-        editDc: {},
-        rules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          state:[
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ]
-        },
-        areaData: [],
-        coordinateFlag:false,
-      }
-    },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.prevent_opt.save=false;
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*弹出选择area弹框*/
-      toSelectArea() {
-        this.$refs.selectArea.openBox(this.editDc.area);
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'dcBox',
+  props: {
+    dc: Object,
+    userData: Array
+  },
+  data () {
+    return {
+      editDc: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        state: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
       },
+      areaData: [],
+      coordinateFlag: false
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 弹出选择area弹框 */
+    toSelectArea () {
+      this.$refs.selectArea.openBox(this.editDc.area)
+    },
 
-      /*保存*/
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$refs.dcForm.validate((valid) => {
-          if (valid) {
-            if (this.editDc.id) {
-              let param={...this.editDc};
-              if (param.area) {
-                param.areaId = param.area.id;
-              }
-              if(!regNum.test(param.longitude)){
-                param.longitude=null
-              }
-              if(!regNum.test(param.latitude)){
-                param.latitude=null
-              }
-
-              this.$put('idc', param).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              let param={...this.editDc}
-              if (param.area) {
-                param.areaId = param.area.id;
-              }
-              if(!regNum.test(param.longitude)){
-                param.longitude=null;
-              }
-              if(!regNum.test(param.latitude)){
-                param.latitude=null;
-              }
-              this.$post('idc', param).then(response => {
-                this.prevent_opt.save=false;
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
+    /* 保存 */
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.dcForm.validate((valid) => {
+        if (valid) {
+          if (this.editDc.id) {
+            const param = { ...this.editDc }
+            if (param.area) {
+              param.areaId = param.area.id
             }
+            if (!regNum.test(param.longitude)) {
+              param.longitude = null
+            }
+            if (!regNum.test(param.latitude)) {
+              param.latitude = null
+            }
+
+            this.$put('idc', param).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
           } else {
-            this.prevent_opt.save=false;
-            return false;
-          }
-        });
-      },
-      /*删除*/
-      del() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("idc?ids=" + this.editDc.id).then(response => {
-            this.prevent_opt.save=false;
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
+            const param = { ...this.editDc }
+            if (param.area) {
+              param.areaId = param.area.id
             }
-          });
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      // getAreaData() {
-      //   this.$get('area', {pid: 0}).then(response => {
-      //     if (response.code === 200) {
-      //       this.areaData = response.data.list;
-      //     }
-      //   });
-      // },
+            if (!regNum.test(param.longitude)) {
+              param.longitude = null
+            }
+            if (!regNum.test(param.latitude)) {
+              param.latitude = null
+            }
+            this.$post('idc', param).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('idc?ids=' + this.editDc.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    // getAreaData() {
+    //   this.$get('area', {pid: 0}).then(response => {
+    //     if (response.code === 200) {
+    //       this.areaData = response.data.list;
+    //     }
+    //   });
+    // },
 
-      selectArea(area) {
-        this.editDc.area.id = area.id;
-        this.editDc.area.name = area.name;
-      },
-      coordinateChange(val,str){//经纬度改变
-        if(regNum.test(this.editDc.longitude) || regNum.test(this.editDc.latitude)){
-          this.coordinateFlag=true
-        }else{
-          this.coordinateFlag=false;
-          this.$refs['dcForm'].clearValidate(['longitude','latitude'])
-        }
-      },
+    selectArea (area) {
+      this.editDc.area.id = area.id
+      this.editDc.area.name = area.name
     },
-    mounted() {
-      // this.getAreaData();
-    },
-    watch: {
-      dc: {
-        immediate: true,
-        deep:true,
-        handler(n, o) {
-          this.editDc = JSON.parse(JSON.stringify(n));
-        }
-      },
+    coordinateChange (val, str) { // 经纬度改变
+      if (regNum.test(this.editDc.longitude) || regNum.test(this.editDc.latitude)) {
+        this.coordinateFlag = true
+      } else {
+        this.coordinateFlag = false
+        this.$refs.dcForm.clearValidate(['longitude', 'latitude'])
+      }
+    }
+  },
+  mounted () {
+    // this.getAreaData();
+  },
+  watch: {
+    dc: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editDc = JSON.parse(JSON.stringify(n))
+      }
     }
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 832140153..121f2ef52 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -73,7 +73,7 @@
           </div>
           <div class="param-box param-box-module">
             <div style="height: 100%; overflow: auto" id="edit-endpoint-params">
-              <div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj" >
+              <div v-for="(item, index) in editEndpoint.paramObj" :key="index" class="param-box-row">
                 <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
                 </el-form-item>
@@ -101,7 +101,7 @@
 
           <div class="param-box param-box-module">
             <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="edit-endpoint-labels">
-              <div class="param-box-row" v-for="(item, index) in editEndpoint.labelModule" >
+              <div v-for="(item, index) in editEndpoint.labelModule" :key="index" class="param-box-row" >
                 <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
                 </el-form-item>
@@ -136,297 +136,297 @@
 </template>
 
 <script>
-  export default {
-    name: "endpointBox",
-    props: {
-      endpoint: Object,
+export default {
+  name: 'endpointBox',
+  props: {
+    endpoint: Object
+  },
+  data () {
+    return {
+      editEndpoint: {},
+      subBox: { show: false, title: this.$t('overall.asset') }, // asset子弹框
+      assetSearch: { host: '', sn: '', text: '', label: 'IP', dropdownShow: false }, // 侧滑框中asset的搜索相关
+      assetPageObj: { pageNo: 1, pageSize: 11, total: 0 },
+      selectedAsset: { id: '', host: '', sn: '' }, // endpoint侧滑框中选中的asset
+      projectList: [],
+      moduleList: [],
+      assetList: [],
+      rules: {
+        'project.id': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'module.id': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        assetId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        path: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // endpoint弹框中asset子弹框控制
+    showSubBox (show) {
+      this.subBox.show = show
     },
-    data() {
-      return {
-        editEndpoint: {},
-        subBox: {show: false, title: this.$t("overall.asset")}, //asset子弹框
-        assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
-        assetPageObj: {pageNo: 1, pageSize: 11, total: 0},
-        selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
-        projectList: [],
-        moduleList: [],
-        assetList: [],
-        rules:{
-          'project.id':[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          'module.id':[
-            {required:true,message:this.$t('validate.required'),trigger:'change'}
-          ],
-          assetId: [
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          port:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ],
-          path:[
-            {required:true,message:this.$t('validate.required'),trigger:'blur'}
-          ]
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+
+    /* 关闭子弹框 */
+    subEsc () {
+      this.subBox.show = false
+    },
+
+    clickOutside () {
+      this.esc(false)
+    },
+
+    // 清除param
+    clearAllParam () {
+      this.editEndpoint.paramObj = []
+    },
+
+    // 新增param
+    addParam () {
+      this.editEndpoint.paramObj.push({ key: '', value: '' })
+    },
+
+    // 移除单个param
+    removeParam (index) {
+      this.editEndpoint.paramObj.splice(index, 1)
+    },
+
+    // 将param转为json字符串格式
+    paramToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      const jsonString = JSON.stringify(tempParam)
+      if (jsonString == '{}') {
+        return ''
+      } else {
+        return jsonString
+      }
+    },
+
+    // 新增label
+    addLabel () {
+      this.editEndpoint.labelModule.push({ key: '', value: '' })
+    },
+    // 移除单个Label
+    removeLabel (index) {
+      this.editEndpoint.labelModule.splice(index, 1)
+    },
+
+    // 将labels转为json字符串格式
+    labelsToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      const jsonString = JSON.stringify(tempParam)
+      if (jsonString == '{}') {
+        return ''
+      } else {
+        return jsonString
+      }
+    },
+    /* 获取project列表 */
+    getProjectList () {
+      return new Promise(resolve => {
+        this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.projectList = response.data.list
+            if (!this.editEndpoint.projectId && this.projectList.length > 0) {
+              this.editEndpoint.projectId = this.projectList[0].id
+            }
+          }
+          resolve()
+        })
+      })
+    },
+
+    // project下拉框点击事件
+    changeProject (projectId) {
+      this.getModuleList(projectId)
+      this.editEndpoint.projectId = projectId
+      this.editEndpoint.moduleId = ''
+    },
+
+    // project下拉框点击事件
+    changeModule (moduleId) {
+      const newModule = this.moduleList.find(item => { return item.id == this.endpoint.moduleId })
+      this.editEndpoint.moduleId = moduleId
+      this.editEndpoint.port = newModule.port
+      this.editEndpoint.path = newModule.path
+      this.editEndpoint.paramObj = newModule.paramObj
+    },
+
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
+    getAssetList (currentPage) {
+      if (currentPage) {
+        this.assetPageObj.pageNo = currentPage
+      } else {
+        this.assetPageObj.pageNo = 1
+      }
+      this.$get('asset', this.assetPageObj).then(response => {
+        if (response.code === 200) {
+          this.assetList = response.data.list
+          this.assetPageObj.total = response.data.total
+        }
+      })
+    },
+
+    // endpoint弹框中的asset子弹框搜索
+    searchAsset () {
+      if (this.assetSearch.label == 'IP') {
+        this.assetSearch.host = this.assetSearch.text
+        this.assetSearch.sn = ''
+      } else if (this.assetSearch.label == 'SN') {
+        this.assetSearch.sn = this.assetSearch.text
+        this.assetSearch.host = ''
+      }
+      this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch)
+      this.getAssetList(false)
+    },
+
+    // endpoint弹框中的asset子弹框里asset选择事件
+    selectAsset (obj) {
+      this.selectedAsset = obj
+      this.editEndpoint.host = obj.host
+      this.editEndpoint.assetId = obj.id
+      this.$refs.endpointForm.validate()
+    },
+    inputAsset (e) {
+      this.editEndpoint.assetId = ''
+      const host = e.target.value
+      if (host) {
+        for (let i = 0; i < this.assetList.length; i++) {
+          if (host == this.assetList[i].host) {
+            this.editEndpoint.assetId = this.assetList[i].id
+            this.selectedAsset = this.assetList[i]
+            this.editEndpoint.host = host
+            break
+          }
         }
       }
     },
-    methods: {
-      //endpoint弹框中asset子弹框控制
-      showSubBox(show) {
-        this.subBox.show = show;
-      },
-
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-
-      /*关闭子弹框*/
-      subEsc() {
-        this.subBox.show = false;
-      },
-
-      clickOutside() {
-        this.esc(false);
-      },
-
-      // 清除param
-      clearAllParam() {
-        this.editEndpoint.paramObj = [];
-      },
-
-      // 新增param
-      addParam() {
-        this.editEndpoint.paramObj.push({key: '', value: ''});
-      },
-
-      // 移除单个param
-      removeParam(index) {
-        this.editEndpoint.paramObj.splice(index, 1);
-      },
-
-      //将param转为json字符串格式
-      paramToJson(param) {
-        let tempParam = {};
-        for (let i = 0; i < param.length; i++) {
-          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
+    // 获取endpoint弹框中module下拉框数据
+    getModuleList (projectId, setCurModule = false) {
+      this.$get('module', { projectId: projectId }).then(response => {
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            try {
+              const tempObj = JSON.parse(response.data.list[i].param)
+              response.data.list[i].paramObj = []
+              for (const k in tempObj) {
+                response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
+              }
+            } catch (err) {
+              // console.info(response.data.list[i], err);
+            }
+          }
+          this.moduleList = response.data.list
+          if (setCurModule) {
+            this.editEndpoint.moduleId = this.moduleList.find(item => { return item.id == this.editEndpoint.moduleId }).id
+          }
         }
-        let jsonString = JSON.stringify(tempParam);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
-        }
-      },
-
-      // 新增label
-      addLabel() {
-        this.editEndpoint.labelModule.push({key: '', value: ''});
-      },
-      // 移除单个Label
-      removeLabel(index) {
-        this.editEndpoint.labelModule.splice(index, 1);
-      },
-
-      //将labels转为json字符串格式
-      labelsToJson(param) {
-        let tempParam = {};
-        for (let i = 0; i < param.length; i++) {
-          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
-        }
-        let jsonString = JSON.stringify(tempParam);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
-        }
-      },
-      /*获取project列表*/
-      getProjectList() {
-        return new Promise(resolve => {
-          this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
+      })
+    },
+    // 保存endpoint
+    save () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.endpointForm.validate(valide => {
+        if (valide) {
+          this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj)
+          this.editEndpoint.labels = this.labelsToJson(this.editEndpoint.labelModule)
+          const requestData = []
+          requestData.push(this.editEndpoint)
+          this.$put('endpoint', requestData).then(response => {
+            this.prevent_opt.save = false
             if (response.code === 200) {
-              this.projectList = response.data.list;
-              if (!this.editEndpoint.projectId && this.projectList.length > 0) {
-                this.editEndpoint.projectId = this.projectList[0].id;
-              }
-            }
-            resolve();
-          });
-        });
-      },
-
-      //project下拉框点击事件
-      changeProject(projectId) {
-        this.getModuleList(projectId);
-        this.editEndpoint.projectId = projectId;
-        this.editEndpoint.moduleId = '';
-      },
-
-      //project下拉框点击事件
-      changeModule(moduleId) {
-        let newModule = this.moduleList.find(item => {return item.id == this.endpoint.moduleId});
-        this.editEndpoint.moduleId = moduleId;
-        this.editEndpoint.port = newModule.port;
-        this.editEndpoint.path = newModule.path;
-        this.editEndpoint.paramObj = newModule.paramObj;
-      },
-
-      // 获取endpoint弹框中的asset子弹框里asset列表数据
-      getAssetList(currentPage) {
-        if (currentPage) {
-          this.assetPageObj.pageNo = currentPage;
-        } else {
-          this.assetPageObj.pageNo = 1;
-        }
-        this.$get('asset', this.assetPageObj).then(response => {
-          if (response.code === 200) {
-            this.assetList = response.data.list;
-            this.assetPageObj.total = response.data.total;
-          }
-        });
-      },
-
-      //endpoint弹框中的asset子弹框搜索
-      searchAsset() {
-        if (this.assetSearch.label == 'IP') {
-          this.assetSearch.host = this.assetSearch.text;
-          this.assetSearch.sn = '';
-        } else if (this.assetSearch.label == 'SN') {
-          this.assetSearch.sn = this.assetSearch.text;
-          this.assetSearch.host = '';
-        }
-        this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch);
-        this.getAssetList(false);
-      },
-
-      // endpoint弹框中的asset子弹框里asset选择事件
-      selectAsset(obj) {
-        this.selectedAsset = obj;
-        this.editEndpoint.host = obj.host;
-        this.editEndpoint.assetId = obj.id;
-        this.$refs.endpointForm.validate();
-      },
-      inputAsset(e) {
-        this.editEndpoint.assetId = "";
-        let host = e.target.value;
-        if (host) {
-          for (let i = 0; i < this.assetList.length; i++) {
-            if (host == this.assetList[i].host) {
-              this.editEndpoint.assetId = this.assetList[i].id;
-              this.selectedAsset = this.assetList[i];
-              this.editEndpoint.host = host;
-              break;
-            }
-          }
-        }
-      },
-      // 获取endpoint弹框中module下拉框数据
-      getModuleList(projectId, setCurModule = false) {
-        this.$get('module', {projectId: projectId}).then(response => {
-          if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              try {
-                let tempObj = JSON.parse(response.data.list[i].param);
-                response.data.list[i].paramObj = [];
-                for (let k in tempObj) {
-                  response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
-                }
-              } catch(err) {
-                //console.info(response.data.list[i], err);
-              }
-            }
-            this.moduleList = response.data.list;
-            if(setCurModule){
-              this.editEndpoint.moduleId = this.moduleList.find(item => {return item.id == this.editEndpoint.moduleId}).id;
-            }
-          }
-        });
-      },
-      //保存endpoint
-      save() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$refs.endpointForm.validate((valide=>{
-          if(valide){
-            this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj);
-            this.editEndpoint.labels = this.labelsToJson(this.editEndpoint.labelModule);
-            let requestData = [];
-            requestData.push(this.editEndpoint);
-            this.$put('endpoint', requestData).then(response => {
-              this.prevent_opt.save=false;
-              if (response.code === 200) {
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc(true);
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          }else{
-            this.prevent_opt.save=false;
-            return false;
-          }
-        }))
-      },
-
-      //删除endpoint
-      del() {
-        if(this.prevent_opt.save){ return } ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("endpoint?ids=" + this.editEndpoint.id).then(response => {
-            this.prevent_opt.save=false;
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
             } else {
-              this.$message.error(response.msg);
+              this.$message.error(response.msg)
             }
-          });
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      // endpoint弹框的asset子弹框顶部搜索条件选中事件
-      dropdownSelect(label) {
-        this.assetSearch.label = label;
-        this.assetSearch.dropdownShow = false;
-      },
-      /*asset搜索建议*/
-      assetSuggestion(queryString, callback) {
-        let data = [];
-        if (!queryString) {
-          data = this.assetList;
+          })
         } else {
-          for (let i = 0; i < this.assetList.length; i++) {
-            if (this.assetList[i].host.indexOf(queryString.toLowerCase()) != -1) {
-              data.push(this.assetList[i]);
-            }
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+
+    // 删除endpoint
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('endpoint?ids=' + this.editEndpoint.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    // endpoint弹框的asset子弹框顶部搜索条件选中事件
+    dropdownSelect (label) {
+      this.assetSearch.label = label
+      this.assetSearch.dropdownShow = false
+    },
+    /* asset搜索建议 */
+    assetSuggestion (queryString, callback) {
+      let data = []
+      if (!queryString) {
+        data = this.assetList
+      } else {
+        for (let i = 0; i < this.assetList.length; i++) {
+          if (this.assetList[i].host.indexOf(queryString.toLowerCase()) != -1) {
+            data.push(this.assetList[i])
           }
         }
-        callback(data);
-      },
-    },
-    mounted() {
-      this.getProjectList().then(response => {
-        this.getModuleList(this.editEndpoint.projectId);
-      });
-      this.getAssetList();
-    },
-    watch: {
-      endpoint:{
-        immediate: true,
-        deep: true,
-        handler(n, o) {
-          this.editEndpoint = JSON.parse(JSON.stringify(n));
-        },
-      },
+      }
+      callback(data)
+    }
+  },
+  mounted () {
+    this.getProjectList().then(response => {
+      this.getModuleList(this.editEndpoint.projectId)
+    })
+    this.getAssetList()
+  },
+  watch: {
+    endpoint: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editEndpoint = JSON.parse(JSON.stringify(n))
+      }
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/rightBox/exprTempBox.vue b/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
index 1d59aa3b7..f38c26644 100644
--- a/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
@@ -78,154 +78,153 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import promqlInput from "../../page/dashboard/explore/promqlInput";
-  export default {
-    name:"exprTempBox",
-    components:{
-      'promql-input': promqlInput,
-    },
-    props:{
-      exprTemp:Object
-    },
-    watch:{
-      exprTemp:{
-        deep:true,
-        immediate:true,
-        handler(n,o){
-          let obj={...n};
-          obj.expression=[obj.expression]
-          this.editExprTemp=Object.assign(this.editExprTemp,obj);
-        }
+import promqlInput from '../../page/dashboard/explore/promqlInput'
+export default {
+  name: 'exprTempBox',
+  components: {
+    'promql-input': promqlInput
+  },
+  props: {
+    exprTemp: Object
+  },
+  watch: {
+    exprTemp: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        const obj = { ...n }
+        obj.expression = [obj.expression]
+        this.editExprTemp = Object.assign(this.editExprTemp, obj)
       }
-    },
-    data(){
-      return {
-        editExprTemp:{
-          id:'',
-          name:'',
-          gname:'',
-          "expression": "",
-          "remark": "",
-        },
-        gnameList:[],
-        rules:{
-          name:[
-            { required: true,message: this.$t('validate.required'), trigger: 'change'},
-          ],
-          gname:[
-            { required: true,message: this.$t('validate.required'), trigger: 'change'},
-          ],
-          // remark:[
-          //   { required: true,message: this.$t('validate.required'), trigger: 'change'},
-          // ]
-        },
+    }
+  },
+  data () {
+    return {
+      editExprTemp: {
+        id: '',
+        name: '',
+        gname: '',
+        expression: '',
+        remark: ''
+      },
+      gnameList: [],
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        gname: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+        // remark:[
+        //   { required: true,message: this.$t('validate.required'), trigger: 'change'},
+        // ]
       }
+    }
+  },
+  mounted () {
+    this.getGnameList()
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    mounted(){
-      this.getGnameList()
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
     },
-    methods:{
-      clickOutside(){
-        this.esc(false);
-      },
-      esc(refresh){
-        this.prevent_opt.save=false;
-        this.$emit("close",refresh);
-      },
-      save(){
-        if(this.prevent_opt.save){
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$refs.ExprTempForm.validate((valid) => {
+        const params = { ...this.editExprTemp }
+        params.expression = params.expression[0]
+        if (!params.expression[0]) {
+          this.prevent_opt.save = false
+          this.$message.error(this.$t('config.exprTemp.expressionError'))
           return
         }
-        ;
-        this.prevent_opt.save=true;
-        this.$refs.ExprTempForm.validate((valid)=>{
-          let params={...this.editExprTemp};
-          params.expression=params.expression[0];
-          if(!params.expression[0]) {
-            this.prevent_opt.save=false;
-            this.$message.error(this.$t('config.exprTemp.expressionError'));
-            return
-          }
-          if(valid){
-            if(this.editExprTemp.id){
-              this.$put('expression/tmpl',params).then(response=>{
-                this.prevent_opt.save=false;
-                if(response.code===200){
-                  this.$message({duration:1000,type:'success',message:this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-              });
-            }else{
-              this.$post('expression/tmpl',params).then(response=>{
-                this.prevent_opt.save=false;
-                if(response.code===200){
-                  this.$message({duration:1000,type:'success',message:this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          }else{
-            this.prevent_opt.save=false;
-            return false;
-          }
-        })
-      },
-      del(){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("/alert/silence?ids="+this.editExprTemp.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      getGnameList(){
-        this.$get('/expression/tmpl/gname').then(res=>{
-          if(res.code===200){
-            this.gnameList=res.data.list.map(item=>{
-              return {
-                value:item
+        if (valid) {
+          if (this.editExprTemp.id) {
+            this.$put('expression/tmpl', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            this.$post('expression/tmpl', params).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
               }
             })
           }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    del () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/alert/silence?ids=' + this.editExprTemp.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
         })
-      },
-      querySearch(queryString, cb) {
-        var restaurants = this.gnameList;
-        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      expressionChange(val){
-        this.editExprTemp.expression[0]=val;
-      },
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    getGnameList () {
+      this.$get('/expression/tmpl/gname').then(res => {
+        if (res.code === 200) {
+          this.gnameList = res.data.list.map(item => {
+            return {
+              value: item
+            }
+          })
+        }
+      })
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.gnameList
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    expressionChange (val) {
+      this.editExprTemp.expression[0] = val
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/common/rightBox/locationCascader.vue b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
index 697d8f58d..e6d09bfae 100644
--- a/nezha-fronted/src/components/common/rightBox/locationCascader.vue
+++ b/nezha-fronted/src/components/common/rightBox/locationCascader.vue
@@ -47,368 +47,366 @@
 </template>
 
 <script>
-  export default {
-    name: "locationCascader",
-    components:{
+export default {
+  name: 'locationCascader',
+  components: {
 
-    },
-    model:{
-      prop:'value',
-      event:'change'
-    },
-    props:{
-      defaultModelUSize:{default:1},
-      value:{default:null},
-      disabled:{type:Boolean},
-      idcOption: {type: Array}
-    },
-    data(){
-      return {
-        initData:null,
-        dropDownVisible:false,
-        idcInfos:[],
-        cabinetInfos:new Map(),
-        showCabinetInfos:[],
-        uInfos:new Map(),
-        showUInfos:[],
-        selectedData:{
-          idc:null,
-          cabinet:null,
-          u:null
-        },
-        isShowCabinet:false,
-        isShowCabinetU:false,
-        occupyU:[],
-        uCheckedInfos:new Map(),
-        uChecked:[],
-        refresh:true,
-        oldUChecked:[],
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    defaultModelUSize: { default: 1 },
+    value: { default: null },
+    disabled: { type: Boolean },
+    idcOption: { type: Array }
+  },
+  data () {
+    return {
+      initData: null,
+      dropDownVisible: false,
+      idcInfos: [],
+      cabinetInfos: new Map(),
+      showCabinetInfos: [],
+      uInfos: new Map(),
+      showUInfos: [],
+      selectedData: {
+        idc: null,
+        cabinet: null,
+        u: null
+      },
+      isShowCabinet: false,
+      isShowCabinetU: false,
+      occupyU: [],
+      uCheckedInfos: new Map(),
+      uChecked: [],
+      refresh: true,
+      oldUChecked: []
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    toggleDropdown: function () {
+      if (this.disabled == false) {
+        this.dropDownVisible = !this.dropDownVisible
+        if (this.dropDownVisible) {
+          const $temp = this
+          document.addEventListener('click', function (e) {
+            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
+            $temp.dropDownVisible = false
+          }, false)
+          this.$el.addEventListener('click', function (e) {
+            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
+          }, false)
+        }
       }
     },
-    mounted(){
-    },
-    methods:{
-      toggleDropdown:function(){
-        if(this.disabled == false){
-          this.dropDownVisible = !this.dropDownVisible;
-          if(this.dropDownVisible){
-            let $temp=this;
-            document.addEventListener('click',function(e){
-              e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
-              $temp.dropDownVisible=false;
-            },false)
-            this.$el.addEventListener('click',function(e){
-              e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
-            },false)
-          }
-        }
-      },
-      queryIdcInfos:function(){
-        this.idcInfos = this.idcOption;
-        /*this.$get('idc?pageSize=-1').then(response=>{
+    queryIdcInfos: function () {
+      this.idcInfos = this.idcOption
+      /* this.$get('idc?pageSize=-1').then(response=>{
           console.info(2)
           if(response.code == 200){
               this.idcInfos=response.data.list;
           }else{
             console.error(response.msg);
           }
-        })*/
-      },
-      loadCabinetInfos:function(idc){
-        if(!idc){
-          return;
-        }
-        this.selectedData.idc=idc;
-        this.selectedData.cabinet=null;
-        this.selectedData.u=null;
-        let cabinetKey='idc-'+idc.name+'-'+idc.id;
-        this.showCabinetInfos=[];
-        if(this.cabinetInfos.has(cabinetKey)&&this.cabinetInfos.get(cabinetKey)&&this.cabinetInfos.get(cabinetKey).length>0){
-          this.showCabinetInfos=this.cabinetInfos.get(cabinetKey);
-        }else{
-          this.$get('cabinet?pageSize=-1&idcId='+idc.id).then(response=>{
-            if(response.code == 200){
-              this.cabinetInfos.set(cabinetKey,response.data.list);
-              this.showCabinetInfos=response.data.list;
-            }else{
-              console.error(response.msg);
-            }
-          })
-        }
-        this.isShowCabinet=true;
-        this.isShowCabinetU=false;
-        this.showUInfos=[];
-      },
-      loadCabinetUInfos:function(cabinet,isInit=false){
-        if(!cabinet){
-          return ;
-        }
-        // console.log('load u',cabinet,isInit)
-        this.selectedData.cabinet=cabinet;
-        this.selectedData.u=null;
-        let cabinetUKey='cabinet-'+this.selectedData.idc.id+'-'+cabinet.id
-        this.showUInfos=[];
-        this.uChecked=[];
-        this.oldUChecked=[];
-        this.occupyU=[];
-        if(this.uInfos.has(cabinetUKey)&&this.uInfos.get(cabinetUKey)&&this.uInfos.get(cabinetUKey).length>0){
-          this.showUInfos=this.uInfos.get(cabinetUKey);
-          let occupyU=this.showUInfos.filter(item =>{
-            return item.occupy==true
-          })
-          this.occupyU=occupyU.map(item=>{return item.value})
-        }else{
-          let us=[];
-          this.$get('cabinet/u?id='+cabinet.id).then(response=>{
-            if(response.code == 200){
-              for(let i=1;i<=response.data.total;i++){
-                let u={
-                  label:i,
-                  value:i,
-                  occupy:false,
-                  checked:false,
-                }
-                this.occupyU=response.data.occupy;
-                if(response.data.occupy.find((item)=>{return u.value == item})){
-                  u.occupy=true;
-                }
-                us.push(u)
-              }
-              this.showUInfos=us;
-              if(isInit){ //回显处理
-                this.showUinfos=this.showUInfos.map((item,index)=>{
-                  if(item.value >= this.initData.u[0] && item.value <= this.initData.u[1]){
-                    item.occupy=false;//修改时，当前asset使用的u位不算占用
-                    this.occupyU=this.occupyU.filter((t,i)=>{return t != item.value})
-                    this.uChecked.push(item.value)
-                  }
-                })
-                this.oldUChecked=this.uChecked
-                this.selectedData.u=this.initData.u;
-                this.$emit('change',this.selectedData);
-              }
-              this.uInfos.set(cabinetUKey,us);
-            }else{
-              console.error(response.msg);
-            }
-          })
-        }
-        this.isShowCabinetU=true;
-        this.refreshCheckBox();
-      },
-      uChange:function(data){
-        if(data.length < this.oldUChecked.length){ //取消选择操作
-          //1.判断是否仅剩下defualtModelusize 的u位选中
-          let checkedValues=this.findUnoccupyU(this.oldUChecked);
-          if(checkedValues.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
-            this.clearUChecked();
-          }else{
-            let unCheckValue=this.oldUChecked.filter((item)=>{//取消选择的那个元素
-              return this.oldUChecked.includes(item)&&!data.includes(item);
-            })
-            unCheckValue=unCheckValue[0];
-            //2.判断是否连续，如果不是连续取消后面的选中
-            let oldUCheckCopy=this.findOldCheckedMinMax()
-            let min=oldUCheckCopy[0];
-            let max=oldUCheckCopy[oldUCheckCopy.length-1];
-            if(unCheckValue != min && unCheckValue != max){ //非连续取消选中
-              // 需要留下连续的 且 满足defaultModelUsize的u位
-              if(unCheckValue - min >= this.defaultModelUSize){ //上方满足条件
-                this.clearUChecked();
-                for(let i = min; i<unCheckValue;i++){
-                  this.uChecked.push(i);
-                }
-              }else if(max - unCheckValue >= this.defaultModelUSize){//下方满足条件
-                this.clearUChecked();
-                for(let i= unCheckValue+1;i<=max;i++){
-                  this.uChecked.push(i);
-                }
-              }else{//两边都不满足条件，则优先上方
-                this.clearUChecked();
-                let counter=0;
-                let item=min;
-                while(counter < this.defaultModelUSize){
-                  this.uChecked.push(item);
-                  counter++;
-                  item++;
-                }
-              }
-            }else{ //连续取消选中
-              //doNothing
-            }
+        }) */
+    },
+    loadCabinetInfos: function (idc) {
+      if (!idc) {
+        return
+      }
+      this.selectedData.idc = idc
+      this.selectedData.cabinet = null
+      this.selectedData.u = null
+      const cabinetKey = 'idc-' + idc.name + '-' + idc.id
+      this.showCabinetInfos = []
+      if (this.cabinetInfos.has(cabinetKey) && this.cabinetInfos.get(cabinetKey) && this.cabinetInfos.get(cabinetKey).length > 0) {
+        this.showCabinetInfos = this.cabinetInfos.get(cabinetKey)
+      } else {
+        this.$get('cabinet?pageSize=-1&idcId=' + idc.id).then(response => {
+          if (response.code == 200) {
+            this.cabinetInfos.set(cabinetKey, response.data.list)
+            this.showCabinetInfos = response.data.list
+          } else {
+            console.error(response.msg)
           }
-        }else{
-          // console.log('选中操作')
-          let checkValues=this.findUnoccupyU(data);
-          let checkValue=data[data.length-1]; //当前选中的u
-          // console.log('选中的',checkValues,'default usize',this.defaultModelUSize)
-          if(checkValues.length < this.defaultModelUSize){ //如果小于model 规定的大小，需要自动选择
-            let suitU=this.findSuitableU(checkValue);
-            // console.log('u size 不够，需要补充,合适u位',suitU)
-            if(suitU.length>0){ //有合适的u位
-              while(this.uChecked.length - this.occupyU.length < this.defaultModelUSize){
-                let popU=suitU.splice(0,1)[0]
-                this.uChecked.push(popU);
-              }
-            }else{
-              // console.log('u size 不够，取消当前选中')
-              this.uChecked.splice(this.uChecked.length-1,1);
-            }
-          }else{//至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
-            //1.判断是否连续
-            let oldUCheckCopy=this.findOldCheckedMinMax()
-            let min=oldUCheckCopy[0];
-            let max=oldUCheckCopy[oldUCheckCopy.length-1];
-            if(checkValue - max > 1 ){ //不连续
-              //2.不连续需要判断中间数值是否有被占用的，有占用的不可选
-              let occupyFlag=false;
-              for(let i=max+1;i<checkValue;i++){
-                if(this.occupyU.find((item)=>{return i == item})){
-                  occupyFlag=true;
-                  break;
-                }
-              }
-              if(!occupyFlag){//没有占用，需要将中间未选中的选中
-                for(let i=max+1;i<checkValue;i++){
-                  this.uChecked.push(i);
-                }
-              }else{//占用，取消当前选中
-                this.uChecked.splice(this.uChecked.length-1,1);
-              }
-            }else if(min - checkValue >1){//不连续
-              let occupyFlag=false;
-              for(let i=checkValue;i<min;i++){
-                if(this.occupyU.find((item)=>{return i==item})){
-                  occupyFlag=true;
-                  break;
-                }
-              }
-              if(!occupyFlag == true){
-                for(let i=checkValue;i<min;i++){
-                  this.uChecked.push(i);
-                }
-              }else{
-                this.uChecked.splice(this.uChecked.length-1,1);
-              }
-            }else{//连续
-              //doNothing
-            }
-
-          }
-
-        }
-        // console.log('最终选择结果：')
-        // console.log(this.uChecked)
-        this.oldUChecked=this.uChecked;
-        this.selectedData.u=this.findOldCheckedMinMax(this.uChecked);
-      },
-      clearUChecked:function(){ //取消所有选中，恢复到刚打开时的状态
-        this.uChecked=[];
-        this.uChecked=this.uChecked.concat(this.occupyU);
-      },
-      findOldCheckedMinMax:function(){
-        let oldUCheckCopy=Object.assign([],this.oldUChecked);
-        oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
-        if(oldUCheckCopy&&oldUCheckCopy.length>0){
-          oldUCheckCopy.sort((a,b)=>{return a-b});
-          let min=oldUCheckCopy[0];
-          let max=oldUCheckCopy[oldUCheckCopy.length-1];
-          return [min,max]
-        }else{
-          return [];
-        }
-
-      },
-      findUnoccupyU:function(arr){
-        // console.log('findUnoccupyU')
-        // console.log(this.occupyU)
-        return  arr.filter((item,index)=>{
-         return !this.occupyU.includes(item);
         })
-      },
-      findSuitableU:function(checkValue){
-        //将u位数组分为左右两部分，先查找右边的是否符合
-        let left=this.showUInfos.filter((item,index)=>{return item.value < checkValue});
-        left=left.reverse();//自下而上查找
-        let right=this.showUInfos.filter((item,index)=>{return item.value > checkValue});
-        let leftCount=[]; //存放左侧合适的u位
-        let rightCount=[];//存放右侧合适的u位
-        for(let i=0;i<left.length;i++){
-          let item=left[i];
-          if(item.occupy == false){
-            leftCount.push(item.value);
-          }else{
-            break;
-          }
-        }
-
-        for(let i=0;i<right.length;i++){
-          let item=right[i];
-          if(item.occupy == false){
-            rightCount.push(item.value);
-          }else{
-            break;
-          }
-        }
-        let result=rightCount.concat(leftCount);
-        if(result.length < this.defaultModelUSize - 1){
-          result=[];
-        }
-        return result;
-      },
-      refreshCheckBox:function(){
-        this.refresh = false
-        this.$nextTick(() => {
-          this.refresh = true
+      }
+      this.isShowCabinet = true
+      this.isShowCabinetU = false
+      this.showUInfos = []
+    },
+    loadCabinetUInfos: function (cabinet, isInit = false) {
+      if (!cabinet) {
+        return
+      }
+      // console.log('load u',cabinet,isInit)
+      this.selectedData.cabinet = cabinet
+      this.selectedData.u = null
+      const cabinetUKey = 'cabinet-' + this.selectedData.idc.id + '-' + cabinet.id
+      this.showUInfos = []
+      this.uChecked = []
+      this.oldUChecked = []
+      this.occupyU = []
+      if (this.uInfos.has(cabinetUKey) && this.uInfos.get(cabinetUKey) && this.uInfos.get(cabinetUKey).length > 0) {
+        this.showUInfos = this.uInfos.get(cabinetUKey)
+        const occupyU = this.showUInfos.filter(item => {
+          return item.occupy == true
         })
-      },
-      initComponet:function(initData){
-        this.initData=Object.assign({},initData);
-        if(initData){
-          this.selectedData.idc=initData.idc;
-          this.selectedData.cabinet=initData.cabinet;
-          this.selectedData.u=initData.u;
-          this.loadCabinetInfos(initData.idc);
-          this.loadCabinetUInfos(initData.cabinet,true);
+        this.occupyU = occupyU.map(item => { return item.value })
+      } else {
+        const us = []
+        this.$get('cabinet/u?id=' + cabinet.id).then(response => {
+          if (response.code == 200) {
+            for (let i = 1; i <= response.data.total; i++) {
+              const u = {
+                label: i,
+                value: i,
+                occupy: false,
+                checked: false
+              }
+              this.occupyU = response.data.occupy
+              if (response.data.occupy.find((item) => { return u.value == item })) {
+                u.occupy = true
+              }
+              us.push(u)
+            }
+            this.showUInfos = us
+            if (isInit) { // 回显处理
+              this.showUInfos.forEach(item => {
+                if (item.value >= this.initData.u[0] && item.value <= this.initData.u[1]) {
+                  item.occupy = false// 修改时，当前asset使用的u位不算占用
+                  this.occupyU = this.occupyU.filter((t, i) => { return t != item.value })
+                  this.uChecked.push(item.value)
+                }
+              })
+              this.oldUChecked = this.uChecked
+              this.selectedData.u = this.initData.u
+              this.$emit('change', this.selectedData)
+            }
+            this.uInfos.set(cabinetUKey, us)
+          } else {
+            console.error(response.msg)
+          }
+        })
+      }
+      this.isShowCabinetU = true
+      this.refreshCheckBox()
+    },
+    uChange: function (data) {
+      if (data.length < this.oldUChecked.length) { // 取消选择操作
+        // 1.判断是否仅剩下defualtModelusize 的u位选中
+        const checkedValues = this.findUnoccupyU(this.oldUChecked)
+        if (checkedValues.length <= this.defaultModelUSize) { // 刚好满足或小于默认usize
+          this.clearUChecked()
+        } else {
+          let unCheckValue = this.oldUChecked.filter((item) => { // 取消选择的那个元素
+            return this.oldUChecked.includes(item) && !data.includes(item)
+          })
+          unCheckValue = unCheckValue[0]
+          // 2.判断是否连续，如果不是连续取消后面的选中
+          const oldUCheckCopy = this.findOldCheckedMinMax()
+          const min = oldUCheckCopy[0]
+          const max = oldUCheckCopy[oldUCheckCopy.length - 1]
+          if (unCheckValue != min && unCheckValue != max) { // 非连续取消选中
+            // 需要留下连续的 且 满足defaultModelUsize的u位
+            if (unCheckValue - min >= this.defaultModelUSize) { // 上方满足条件
+              this.clearUChecked()
+              for (let i = min; i < unCheckValue; i++) {
+                this.uChecked.push(i)
+              }
+            } else if (max - unCheckValue >= this.defaultModelUSize) { // 下方满足条件
+              this.clearUChecked()
+              for (let i = unCheckValue + 1; i <= max; i++) {
+                this.uChecked.push(i)
+              }
+            } else { // 两边都不满足条件，则优先上方
+              this.clearUChecked()
+              let counter = 0
+              let item = min
+              while (counter < this.defaultModelUSize) {
+                this.uChecked.push(item)
+                counter++
+                item++
+              }
+            }
+          } else { // 连续取消选中
+            // doNothing
+          }
+        }
+      } else {
+        // console.log('选中操作')
+        const checkValues = this.findUnoccupyU(data)
+        const checkValue = data[data.length - 1] // 当前选中的u
+        // console.log('选中的',checkValues,'default usize',this.defaultModelUSize)
+        if (checkValues.length < this.defaultModelUSize) { // 如果小于model 规定的大小，需要自动选择
+          const suitU = this.findSuitableU(checkValue)
+          // console.log('u size 不够，需要补充,合适u位',suitU)
+          if (suitU.length > 0) { // 有合适的u位
+            while (this.uChecked.length - this.occupyU.length < this.defaultModelUSize) {
+              const popU = suitU.splice(0, 1)[0]
+              this.uChecked.push(popU)
+            }
+          } else {
+            // console.log('u size 不够，取消当前选中')
+            this.uChecked.splice(this.uChecked.length - 1, 1)
+          }
+        } else { // 至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
+          // 1.判断是否连续
+          const oldUCheckCopy = this.findOldCheckedMinMax()
+          const min = oldUCheckCopy[0]
+          const max = oldUCheckCopy[oldUCheckCopy.length - 1]
+          if (checkValue - max > 1) { // 不连续
+            // 2.不连续需要判断中间数值是否有被占用的，有占用的不可选
+            let occupyFlag = false
+            for (let i = max + 1; i < checkValue; i++) {
+              if (this.occupyU.find((item) => { return i == item })) {
+                occupyFlag = true
+                break
+              }
+            }
+            if (!occupyFlag) { // 没有占用，需要将中间未选中的选中
+              for (let i = max + 1; i < checkValue; i++) {
+                this.uChecked.push(i)
+              }
+            } else { // 占用，取消当前选中
+              this.uChecked.splice(this.uChecked.length - 1, 1)
+            }
+          } else if (min - checkValue > 1) { // 不连续
+            let occupyFlag = false
+            for (let i = checkValue; i < min; i++) {
+              if (this.occupyU.find((item) => { return i == item })) {
+                occupyFlag = true
+                break
+              }
+            }
+            if (!occupyFlag == true) {
+              for (let i = checkValue; i < min; i++) {
+                this.uChecked.push(i)
+              }
+            } else {
+              this.uChecked.splice(this.uChecked.length - 1, 1)
+            }
+          } else { // 连续
+            // doNothing
+          }
         }
       }
+      // console.log('最终选择结果：')
+      // console.log(this.uChecked)
+      this.oldUChecked = this.uChecked
+      this.selectedData.u = this.findOldCheckedMinMax(this.uChecked)
     },
-    computed:{
-      inputShowInfo:function(){
-        let idcName=this.selectedData.idc?this.selectedData.idc.name+'/':'';
-
-        let cabinetName=this.selectedData.cabinet?this.selectedData.cabinet.name+'/':'';
-
-        let uValues=this.selectedData.u&&this.selectedData.u.length>0&&this.selectedData.u[0]&&this.selectedData.u[1]?this.selectedData.u[0]+'-'+this.selectedData.u[1]:'';
-
-        if(!this.selectedData.idc){
-          return '';
-        }else if(this.selectedData.idc && !this.selectedData.cabinet){
-          return idcName
-        }else if(this.selectedData.idc && this.selectedData.cabinet && !this.selectedData.u ){
-          return idcName+cabinetName;
-        }else if(this.selectedData.idc && this.selectedData.cabinet && this.selectedData.u){
-          return idcName+cabinetName+uValues;
-        }
+    clearUChecked: function () { // 取消所有选中，恢复到刚打开时的状态
+      this.uChecked = []
+      this.uChecked = this.uChecked.concat(this.occupyU)
+    },
+    findOldCheckedMinMax: function () {
+      let oldUCheckCopy = Object.assign([], this.oldUChecked)
+      oldUCheckCopy = this.findUnoccupyU(oldUCheckCopy)
+      if (oldUCheckCopy && oldUCheckCopy.length > 0) {
+        oldUCheckCopy.sort((a, b) => { return a - b })
+        const min = oldUCheckCopy[0]
+        const max = oldUCheckCopy[oldUCheckCopy.length - 1]
+        return [min, max]
+      } else {
+        return []
       }
     },
-    watch:{
-      selectedData:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
-          this.$emit('change',n);
+    findUnoccupyU: function (arr) {
+      // console.log('findUnoccupyU')
+      // console.log(this.occupyU)
+      return arr.filter((item, index) => {
+        return !this.occupyU.includes(item)
+      })
+    },
+    findSuitableU: function (checkValue) {
+      // 将u位数组分为左右两部分，先查找右边的是否符合
+      let left = this.showUInfos.filter((item, index) => { return item.value < checkValue })
+      left = left.reverse()// 自下而上查找
+      const right = this.showUInfos.filter((item, index) => { return item.value > checkValue })
+      const leftCount = [] // 存放左侧合适的u位
+      const rightCount = []// 存放右侧合适的u位
+      for (let i = 0; i < left.length; i++) {
+        const item = left[i]
+        if (item.occupy == false) {
+          leftCount.push(item.value)
+        } else {
+          break
         }
-      },
-      idcOption: {
-        deep: true,
-        immediate: true,
-        handler(n, o) {
-          this.queryIdcInfos();
+      }
+
+      for (let i = 0; i < right.length; i++) {
+        const item = right[i]
+        if (item.occupy == false) {
+          rightCount.push(item.value)
+        } else {
+          break
         }
       }
+      let result = rightCount.concat(leftCount)
+      if (result.length < this.defaultModelUSize - 1) {
+        result = []
+      }
+      return result
+    },
+    refreshCheckBox: function () {
+      this.refresh = false
+      this.$nextTick(() => {
+        this.refresh = true
+      })
+    },
+    initComponet: function (initData) {
+      this.initData = Object.assign({}, initData)
+      if (initData) {
+        this.selectedData.idc = initData.idc
+        this.selectedData.cabinet = initData.cabinet
+        this.selectedData.u = initData.u
+        this.loadCabinetInfos(initData.idc)
+        this.loadCabinetUInfos(initData.cabinet, true)
+      }
+    }
+  },
+  computed: {
+    inputShowInfo () {
+      const idcName = this.selectedData.idc ? this.selectedData.idc.name + '/' : ''
+
+      const cabinetName = this.selectedData.cabinet ? this.selectedData.cabinet.name + '/' : ''
+
+      const uValues = this.selectedData.u && this.selectedData.u.length > 0 && this.selectedData.u[0] && this.selectedData.u[1] ? this.selectedData.u[0] + '-' + this.selectedData.u[1] : ''
+
+      if (!this.selectedData.idc) {
+        return ''
+      } else if (this.selectedData.idc && !this.selectedData.cabinet) {
+        return idcName
+      } else if (this.selectedData.idc && this.selectedData.cabinet && !this.selectedData.u) {
+        return idcName + cabinetName
+      } else if (this.selectedData.idc && this.selectedData.cabinet && this.selectedData.u) {
+        return idcName + cabinetName + uValues
+      }
+      return ''
+    }
+  },
+  watch: {
+    selectedData: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.$emit('change', n)
+      }
+    },
+    idcOption: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        this.queryIdcInfos()
+      }
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/rightBox/menuBox.vue b/nezha-fronted/src/components/common/rightBox/menuBox.vue
index 3d0ea7834..1125737eb 100644
--- a/nezha-fronted/src/components/common/rightBox/menuBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/menuBox.vue
@@ -77,168 +77,168 @@
   </div>
 </template>
 <script>
-  import Treeselect from '@riophae/vue-treeselect'
-  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-  export default {
-    name: "menuBox",
-    components:{
-      'tree-select':Treeselect,
-    },
-    props: {
-      menu: Object
-    },
-    computed: {
-      isCurrentUser() {
-        return function(username) {
-          return localStorage.getItem('nz-username') == username;
-        }
-      },
-      addDisabled() {
-        let enabled = this.selectableScripts.filter(item => {
-          return !item.disabled
-        });
-        return enabled.length === 0;
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  name: 'menuBox',
+  components: {
+    'tree-select': Treeselect
+  },
+  props: {
+    menu: Object
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
       }
     },
-    data() {
-      return {
-        rules: { //表单校验规则
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          type: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          code: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          i18n: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          orderNum: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-        },
-        editMenu: {},
-        menus:[],
-        option:{
-          save:false,
+    addDisabled () {
+      const enabled = this.selectableScripts.filter(item => {
+        return !item.disabled
+      })
+      return enabled.length === 0
+    }
+  },
+  data () {
+    return {
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        i18n: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        orderNum: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      editMenu: {},
+      menus: [],
+      option: {
+        save: false
 
+      }
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      this.$refs.menuForm.validate(valid => {
+        if (valid) {
+          this.editMenu.perms = this.editMenu.permissions && this.editMenu.permissions.length > 0 ? this.editMenu.permissions.map(t => t.value).join(',') : ''
+          delete this.editMenu.permissions
+          if (this.editMenu.id) {
+            this.$put('sys/menu', this.editMenu).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            this.$post('sys/menu', this.editMenu).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          return false
         }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/menu/?ids=' + this.editMenu.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    addPermission: function () {
+      if (this.editMenu.permissions) {
+        this.editMenu.permissions.push({ value: '' })
+      } else {
+        this.$set(this.editMenu, 'permissions', [{ value: '' }])
       }
     },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*保存*/
-      save() {
-        this.$refs.menuForm.validate(valid => {
-          if (valid) {
-            this.editMenu.perms = this.editMenu.permissions&&this.editMenu.permissions.length>0?this.editMenu.permissions.map(t=>t.value).join(','):'';
-            delete this.editMenu.permissions;
-            if (this.editMenu.id) {
-              this.$put('sys/menu', this.editMenu).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {
-              this.$post('sys/menu', this.editMenu).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          } else {
-            return false;
+    removePermission: function (index) {
+      this.editMenu.permissions.splice(index, 1)
+    },
+    getMenus: function () {
+      this.menus = []
+      this.$get('sys/menu').then(response => {
+        if (response.code == 200) {
+          this.menus = response.data.list
+          function replaceFunc (data) {
+            data.forEach(t => {
+              t.label = t.name
+              if (t.children && t.children instanceof Array && t.children.length > 0) {
+                replaceFunc(t.children)
+              } else {
+                delete t.children
+              }
+            })
           }
-        })
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/menu/?ids=" + this.editMenu.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      addPermission:function(){
-        if(this.editMenu.permissions){
-          this.editMenu.permissions.push({value:''})
-        } else{
-          this.$set(this.editMenu,'permissions',[{value:''}])
+          replaceFunc(this.menus)
+          this.menus = [{
+            id: 0,
+            label: this.$t('config.menus.mainMenu'),
+            children: JSON.parse(JSON.stringify(this.menus))
+          }]
+        } else {
+          this.$message.error('load menu faild')
         }
-      },
-      removePermission:function(index){
-        this.editMenu.permissions.splice(index,1)
-      },
-      getMenus:function(){
-        this.menus = [];
-        this.$get("sys/menu").then(response=>{
-          if (response.code  == 200){
-            this.menus = response.data.list;
-            function replaceFunc(data){
-              data.forEach(t=>{
-                t.label = t.name;
-                if(t.children&&t.children instanceof Array&&t.children.length>0){
-                  replaceFunc(t.children)
-                }else{
-                  delete t.children
-                }
-              })
-            }
-            replaceFunc(this.menus)
-            this.menus = [{
-              id:0,
-              label:this.$t('config.menus.mainMenu'),
-              children:JSON.parse(JSON.stringify(this.menus))
-            }]
-          }else{
-            this.$message.error("load menu faild")
-          }
-        })
-      },
-      inputValid:function(val){
-        return val.replace(/[,]/g,'')
-      },
+      })
     },
-    mounted() {
-      this.getMenus();
-    },
-    watch: {
-      //将prop里的user转为组件内部对象
-      menu: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          this.editMenu = JSON.parse(JSON.stringify(n));
-          if(this.editMenu.perms&&this.editMenu.perms != ''){
-            this.$set(this.editMenu,'permissions',this.editMenu.perms.split(',').map(t=>{return {value:t};}))
-          }
+    inputValid: function (val) {
+      return val.replace(/[,]/g, '')
+    }
+  },
+  mounted () {
+    this.getMenus()
+  },
+  watch: {
+    // 将prop里的user转为组件内部对象
+    menu: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.editMenu = JSON.parse(JSON.stringify(n))
+        if (this.editMenu.perms && this.editMenu.perms != '') {
+          this.$set(this.editMenu, 'permissions', this.editMenu.perms.split(',').map(t => { return { value: t } }))
         }
-      },
-    },
+      }
+    }
   }
+}
 </script>
 <style lang="scss">
   .right-box-menu .el-input-number .el-input__inner{
diff --git a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
index b8752130e..4926330df 100644
--- a/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue
@@ -1,4 +1,4 @@
-<template key="metricPrePanelBox">
+<template>
   <transition name="right-box">
     <div class="right-box right-box-panel z-top" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
@@ -53,202 +53,202 @@
   </transition>
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import axios from 'axios';
+import bus from '../../../libs/bus'
+import axios from 'axios'
 
-  export default {
-    name: "metricPrePanelBox",
-    props: {
-      chartInfo: Object,
-      elementTarget:Object,
-      seriesData:Array,
-      chartCount:String,
-      series:Array
+export default {
+  name: 'metricPrePanelBox',
+  props: {
+    chartInfo: Object,
+    elementTarget: Object,
+    seriesData: Array,
+    chartCount: String,
+    series: Array
+  },
+  data () {
+    return {
+      rightBox: { // 面板弹出框相关
+        show: false,
+        title: this.$t('dashboard.panel.createPanelTitle')
+      },
+      isCreatePanel: false,
+      // 创建看板信息
+      chartSaveInfo: {
+        title: '', // 图表名称
+        name: '', // panel名称
+        panelId: '' // 选择以后panelId
+      },
+      panelList: [],
+      panelItem: {}, // 保存看板信息
+      panelId: 0,
+      createChartList: [] // 创建多个图表的图表信息
+    }
+  },
+  methods: {
+    show (show) {
+      this.rightBox.show = show
     },
-    data() {
-      return {
-        rightBox: { //面板弹出框相关
-          show: false,
-          title: this.$t('dashboard.panel.createPanelTitle')
-        },
-        isCreatePanel: false,
-        // 创建看板信息
-        chartSaveInfo: {
-          title: '', // 图表名称
-          name: '', // panel名称
-          panelId: '', // 选择以后panelId
-        },
-        panelList: [],
-        panelItem: {}, // 保存看板信息
-        panelId: 0,
-        createChartList: [], // 创建多个图表的图表信息
+    setTitle (title) {
+      this.rightBox.title = title
+    },
+    setIsCreatePanel (isCreate) {
+      this.isCreatePanel = isCreate
+    },
+    setChartTitle (title) {
+      this.chartSaveInfo.title = title
+    },
+    // 选择看板
+    panelSelect (id) {
+      if (id) {
+        const panel = this.panelList.find(p => p.id === id)
+        if (panel) {
+          this.panelItem = panel
+        }
       }
     },
-    methods: {
-      show(show) {
-        this.rightBox.show = show;
-      },
-      setTitle(title) {
-        this.rightBox.title = title;
-      },
-      setIsCreatePanel(isCreate) {
-        this.isCreatePanel = isCreate;
-      },
-      setChartTitle(title){
-        this.chartSaveInfo.title = title;
-      },
-      // 选择看板
-      panelSelect(id) {
-        if (id) {
-          const panel = this.panelList.find(p => p.id === id);
-          if (panel) {
-            this.panelItem = panel;
+    // 生成图表的时候,使用该函数,汇总创建图表参数
+    getOptions () {
+      // this.$refs.chartInfo.validate((valid) => {
+      const params = {
+        // panelId: this.panelId,
+        // title: this.chartSaveInfo.title,
+        type: this.chartInfo.type,
+        span: this.chartInfo.span,
+        height: this.chartInfo.height
+      }
+      // 多图模式
+      if (this.chartCount === 'multiple') {
+        this.createChartList = []
+        this.seriesData.forEach((queryItem) => {
+          const soleParam = Object.assign({}, params)
+          const elements = []
+          // 图表中每条线的名字,后半部分
+          // let host = `${queryItem.metric.__name__}`;//up,
+          // let charTitle=`${queryItem.metric.__name__}`;//up,
+          let host = ''// up,
+          let charTitle = ''
+          if (queryItem.metric.__name__) {
+            host = `${queryItem.metric.__name__}`// up,
+            charTitle = `${queryItem.metric.__name__}`// up,
           }
+          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+          // 判断是否有数据
+          if (queryItem.values.length > 0 && tagsArr.length > 0) {
+            host += '{'
+            tagsArr.forEach((tag, i) => {
+              if (tag !== '__name__') {
+                host += `${tag}="${queryItem.metric[tag]}",`
+              }
+              if (tag === 'asset') {
+                const labVal = `${queryItem.metric[tag]}`
+                if (labVal !== '') {
+                  charTitle += `(${queryItem.metric[tag]})`
+                }
+              }
+            })
+            if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
+            host += '}'
+          }
+          soleParam.title = charTitle
+          elements.push({
+            expression: host,
+            type: this.elementTarget.type
+          })
+          soleParam.elements = elements
+          this.addMultipleChart(soleParam)
+        })
+      } else if (this.chartCount === 'single') {
+        params.title = this.chartSaveInfo.title
+        const elements = []
+        if (this.elementTarget.type === 'normal') {
+          const metricStr = bus.tagsToString(this.elementTarget.metric, this.elementTarget.selectedTagList)
+          elements.push({
+            expression: metricStr,
+            type: this.elementTarget.type
+          })
+        } else if (this.elementTarget.type === 'expert') {
+          elements.push({
+            expression: this.elementTarget.expression,
+            type: this.elementTarget.type
+          })
         }
-      },
-      // 生成图表的时候,使用该函数,汇总创建图表参数
-      getOptions() {
-        //this.$refs.chartInfo.validate((valid) => {
-          const params = {
-            //panelId: this.panelId,
-            // title: this.chartSaveInfo.title,
-            type: this.chartInfo.type,
-            span: this.chartInfo.span,
-            height: this.chartInfo.height,
-          };
-          // 多图模式
-          if (this.chartCount === 'multiple') {
-            this.createChartList = [];
-            this.seriesData.forEach((queryItem) => {
-              const soleParam = Object.assign({}, params);
-              const elements = [];
-              // 图表中每条线的名字,后半部分
-              //let host = `${queryItem.metric.__name__}`;//up,
-              //let charTitle=`${queryItem.metric.__name__}`;//up,
-              let host = '';//up,
-              let charTitle='';
-              if(queryItem.metric.__name__){
-                host = `${queryItem.metric.__name__}`;//up,
-                charTitle=`${queryItem.metric.__name__}`;//up,
+        params.elements = elements
+        // if (valid) {
+        this.addCharts(params)
+        // }
+      }
+      // });
+    },
+    // 新建单个图表single
+    addCharts (params) {
+      this.$post('panel/' + this.panelId + '/charts', params).then(response => {
+        if (response.code === 200) {
+          const panelId = this.panelId
+          this.esc()
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+            confirmButtonText: this.$t('tip.yes'),
+            cancelButtonText: this.$t('tip.no'),
+            type: 'success'
+          }).then(() => {
+            // this.$store.state.assetData.moduleData = 'panel';
+            this.$store.state.showPanel.id = panelId
+            this.$store.state.showPanel.name = this.panelItem.name
+            this.$router.push({
+              path: '/panel',
+              query: {
+                t: +new Date()
               }
-              const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-              // 判断是否有数据
-              if (queryItem.values.length > 0 && tagsArr.length > 0) {
-                host +="{";
-                tagsArr.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${queryItem.metric[tag]}",`;
-                  }
-                  if (tag === 'asset') {
-                    let labVal= `${queryItem.metric[tag]}`;
-                    if(labVal!==''){
-                      charTitle += `(${queryItem.metric[tag]})`;
-                    }
-                  }
-                });
-                if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-                host +="}";
+            })
+          })
+          this.$emit('reload')
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+
+    // 创建多个图表
+    addMultipleChart (params) {
+      this.createChartList.push(params)
+      if (this.seriesData.length === this.createChartList.length) {
+        this.$nextTick(() => {
+          const api = []
+          this.createChartList.forEach((item) => {
+            api.push(this.$post('panel/' + this.panelId + '/charts', item))
+          })
+          axios.all(api).then((res) => {
+            let successFlag = true
+            res.forEach((item) => {
+              if (item.code !== 200) {
+                successFlag = false
               }
-              soleParam.title = charTitle;
-              elements.push({
-                expression: host,
-                type: this.elementTarget.type,
-              });
-              soleParam.elements = elements;
-              this.addMultipleChart(soleParam);
-            });
-          } else if (this.chartCount === 'single') {
-            params.title = this.chartSaveInfo.title;
-            const elements = [];
-            if(this.elementTarget.type==='normal'){
-              const metricStr = bus.tagsToString(this.elementTarget.metric,this.elementTarget.selectedTagList);
-              elements.push({
-                expression: metricStr,
-                type: this.elementTarget.type,
-              });
-            }else if(this.elementTarget.type==='expert'){
-              elements.push({
-                expression: this.elementTarget.expression,
-                type: this.elementTarget.type,
-              });
-            }
-            params.elements = elements;
-            //if (valid) {
-              this.addCharts(params);
-            //}
-          }
-        //});
-      },
-      // 新建单个图表single
-      addCharts(params) {
-        this.$post('panel/'+this.panelId+'/charts', params).then(response => {
-          if (response.code === 200) {
-            let panelId= this.panelId;
-            this.esc();
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-            this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
-              confirmButtonText: this.$t("tip.yes"),
-              cancelButtonText: this.$t("tip.no"),
-              type: 'success'
-            }).then(() => {
-              //this.$store.state.assetData.moduleData = 'panel';
-              this.$store.state.showPanel.id = panelId;
-              this.$store.state.showPanel.name = this.panelItem.name;
-              this.$router.push({
-                path: "/panel",
-                query: {
-                  t: +new Date()
-                }
-              });
-            });
-            this.$emit('reload');
-          } else {
-            this.$message.error(response.msg);
-          }
-        });
-      },
+            })
+            if (successFlag) {
+              // this.saveDisabled = true; // 创建成功后,不能再次创建
+              const panelId = this.panelId
+              this.createChartList = []
+              this.esc()
 
-      // 创建多个图表
-      addMultipleChart(params) {
-        this.createChartList.push(params);
-        if (this.seriesData.length === this.createChartList.length) {
-          this.$nextTick(() => {
-            const api = [];
-            this.createChartList.forEach((item) => {
-              api.push(this.$post('panel/'+this.panelId+'/charts', item));
-            });
-            axios.all(api).then((res) => {
-              let successFlag = true;
-              res.forEach((item) => {
-                if (item.code !== 200) {
-                  successFlag = false;
-                }
-              });
-              if (successFlag) {
-                //this.saveDisabled = true; // 创建成功后,不能再次创建
-                let panelId=this.panelId;
-                this.createChartList = [];
-                this.esc();
-
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
-                  confirmButtonText: this.$t("tip.yes"),
-                  cancelButtonText: this.$t("tip.no"),
-                  type: 'success'
-                }).then(() => {
-                  //this.$store.state.assetData.moduleData = 'panel';
-                  this.$store.state.showPanel.id = panelId;
-                  this.$store.state.showPanel.name = this.panelItem.name;
-                  this.$router.push({
-                    path: "/panel",
-                    query: {
-                      t: +new Date()
-                    }
-                  });
-                });
-                //this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                //this.elementTarget = {};
-               /*
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+                confirmButtonText: this.$t('tip.yes'),
+                cancelButtonText: this.$t('tip.no'),
+                type: 'success'
+              }).then(() => {
+                // this.$store.state.assetData.moduleData = 'panel';
+                this.$store.state.showPanel.id = panelId
+                this.$store.state.showPanel.name = this.panelItem.name
+                this.$router.push({
+                  path: '/panel',
+                  query: {
+                    t: +new Date()
+                  }
+                })
+              })
+              // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+              // this.elementTarget = {};
+              /*
                 this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
                   confirmButtonText: this.$t("tip.yes"),
                   cancelButtonText: this.$t("tip.no"),
@@ -263,74 +263,73 @@
                       },
                   });
     */
-                //});
-                this.$emit('reload');
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-        });
-        }
-      },
-
-      save: function() {
-        this.$refs.chartSaveInfo.validate((flag) => {
-          if (flag) { // 再判断弹出窗口内内容是否正确
-            if (this.isCreatePanel) { // 创建看板
-              this.panelItem.name = this.chartSaveInfo.name;
-              this.$post('panel', this.panelItem).then(response => {
-                if (response.code === 200) {
-                  this.panelId = response.data.panel.id;
-                  this.panelItem = response.data.panel;
-                  this.getOptions();
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else { // 选择看板
-              this.panelId = this.chartSaveInfo.panelId;
-              this.getOptions();
+              // });
+              this.$emit('reload')
+            } else {
+              this.$message.error('Something is wrong')
             }
-          }
-        });
-      },
-      esc: function() {
-        this.rightBox.show = false;
-        // 取消创建modal
-        this.panelList = [];
-        this.chartSaveInfo.panelId = ''; // 选择panel
-        this.chartSaveInfo.name = ''; // panel名称创建
-        if (this.$refs.chartSaveInfo) {
-          this.$refs.chartSaveInfo.resetFields();
-        }
-        if (this.$refs.panelSelect) {
-          this.chartSaveInfo.panelId='';
-          this.panelId=0;
-         // this.$refs.panelSelect..reset();
-        }
-      },
-      getTableData: function() {
-        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.panelList = response.data.list;
-          }else {
-            this.panelList = [];
-          }
+          })
         })
-      },
+      }
     },
-    created() {
 
+    save: function () {
+      this.$refs.chartSaveInfo.validate((flag) => {
+        if (flag) { // 再判断弹出窗口内内容是否正确
+          if (this.isCreatePanel) { // 创建看板
+            this.panelItem.name = this.chartSaveInfo.name
+            this.$post('panel', this.panelItem).then(response => {
+              if (response.code === 200) {
+                this.panelId = response.data.panel.id
+                this.panelItem = response.data.panel
+                this.getOptions()
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else { // 选择看板
+            this.panelId = this.chartSaveInfo.panelId
+            this.getOptions()
+          }
+        }
+      })
     },
-    mounted: function() {
-
+    esc: function () {
+      this.rightBox.show = false
+      // 取消创建modal
+      this.panelList = []
+      this.chartSaveInfo.panelId = '' // 选择panel
+      this.chartSaveInfo.name = '' // panel名称创建
+      if (this.$refs.chartSaveInfo) {
+        this.$refs.chartSaveInfo.resetFields()
+      }
+      if (this.$refs.panelSelect) {
+        this.chartSaveInfo.panelId = ''
+        this.panelId = 0
+        // this.$refs.panelSelect..reset();
+      }
     },
-    watch: {
-
+    getTableData: function () {
+      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelList = response.data.list
+        } else {
+          this.panelList = []
+        }
+      })
     }
-  }
-</script>
+  },
+  created () {
 
+  },
+  mounted: function () {
+
+  },
+  watch: {
+
+  }
+}
+</script>
 
 <style scoped>
   .z-top{
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index fb7bbc508..0df6ef1bc 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -61,200 +61,200 @@
 </template>
 
 <script>
-  export default {
-    name: "modelBox",
-    props: {
-      mib: Object
-    },
-    data() {
-      let $temp=this;
-      return {
-        editMib: {},
-        rules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ]
-        },
-        checkMibFile : (rule, value, callback) => {
-          setTimeout(() => {
-            if(!$temp.editMib.id){
-              if(!$temp.uploadFile || !$temp.uploadFile.raw){
-                $temp.uploadErrorMsg=$temp.$t('config.mib.requiredMibFile');
-                return callback(new Error(' '));
-              }else{
-                $temp.uploadErrorMsg=null;
-                return callback()
-              }
-            }else{
-              $temp.uploadErrorMsg=null;
-              return callback();
-            }
-          }, 200);
-        },
-        checkModels:(rule, value, callback)=>{
-          setTimeout(() => {
-            if(!$temp.editMib.models||$temp.editMib.models == ''){
-              // return callback(new Error($temp.$t('validate.required')))
-              return callback();
-            }else{
-              return callback();
-            }
-          }, 200);
-        },
-        selectedModels:[],
-        modelOptions:[],
-        modelProps: { multiple: true ,emitPath:false},
-        uploadFileList:[],
-        uploadFile:null,
-        uploadErrorMsg:null,
-      }
-    },
-    methods: {
-      clickOutside() {
-        this.esc(false);
+export default {
+  name: 'modelBox',
+  props: {
+    mib: Object
+  },
+  data () {
+    const $temp = this
+    return {
+      editMib: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
       },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      queryModelInfos:function(){
-        this.$get('model?pageSize=-1').then(response=>{
-          if(response.code == 200){
-            let modelInfos=response.data.list;
-            let sortModels={};
-            modelInfos.forEach((item)=>{
-              if(!sortModels[item.type.value]){//没有这个assetType
-                sortModels[item.type.value]={}
-              }
-              if(!sortModels[item.type.value][item.vendor.value]){
-                sortModels[item.type.value][item.vendor.value]=[];
-              }
-              item.label=item.name;
-              item.value=item.id;
-              sortModels[item.type.value][item.vendor.value].push(item);
-            })
-            for (let assetType of Object.keys(sortModels)){
-              let option={
-                label:assetType,
-                value:assetType,
-                children:[]
-              }
-              for(let vendor of Object.keys(sortModels[assetType])){
-                let child={
-                  label:vendor,
-                  value:vendor,
-                  children: sortModels[assetType][vendor]
-                }
-                option.children.push(child);
-              }
-              this.modelOptions.push(option);
-            }
-          }
-        })
-      },
-      selectedModelChange:function(nodes){
-        let selectedNodes=this.selectedModels;
-        if(selectedNodes && selectedNodes.length>0){
-          let models='';
-          for(let node of selectedNodes){
-            models+=node+',';
-          }
-          this.editMib.models=models.substr(0,models.length-1);
-        }else{
-          this.editMib.models='';
-        }
-        this.$refs.mibForm.validateField('models')
-      },
-      uploadChange(file,fileList) {
-        if (fileList.length > 0) {
-          this.uploadFileList = [fileList[fileList.length - 1]];
-          this.uploadFile = this.uploadFileList[0];
-        }
-        this.validateFile();
-      },
-      afterClearFile(file, fileList) {
-        this.uploadFileList = [];
-        this.uploadFile = null;
-        this.validateFile();
-      },
-      validateFile:function(){
-        this.$refs.mibForm.validateField('file')
-      },
-      /*保存*/
-      save() {
-        this.$refs.mibForm.validate((valid) => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            let form = new FormData();
-            form.append('name',this.editMib.name);
-            form.append('remark',this.editMib.remark);
-            form.append('models',this.editMib.models);
-            form.append('file', this.uploadFile && this.uploadFile.raw ? this.uploadFile.raw : null);
-            if(!this.editMib.id){
-              this.$post('/mib', form, {'Content-Type': 'multipart/form-data'}).then(response=>{
-                if(response.code==200 && response.msg == 'success'){
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              })
-            }else{
-              form.append('id',this.editMib.id);
-              this.$put('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
-                if(response.code==200 && response.msg=='success'){
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                }else{
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              })
-            }
-          }else{
-            this.prevent_opt.save=false;
-          }
-        })
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("mib?ids=" + this.editMib.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
+      checkMibFile: (rule, value, callback) => {
+        setTimeout(() => {
+          if (!$temp.editMib.id) {
+            if (!$temp.uploadFile || !$temp.uploadFile.raw) {
+              $temp.uploadErrorMsg = $temp.$t('config.mib.requiredMibFile')
+              return callback(new Error(' '))
             } else {
-              this.$message.error(response.msg);
+              $temp.uploadErrorMsg = null
+              return callback()
             }
-          });
-        });
+          } else {
+            $temp.uploadErrorMsg = null
+            return callback()
+          }
+        }, 200)
       },
+      checkModels: (rule, value, callback) => {
+        setTimeout(() => {
+          if (!$temp.editMib.models || $temp.editMib.models == '') {
+            // return callback(new Error($temp.$t('validate.required')))
+            return callback()
+          } else {
+            return callback()
+          }
+        }, 200)
+      },
+      selectedModels: [],
+      modelOptions: [],
+      modelProps: { multiple: true, emitPath: false },
+      uploadFileList: [],
+      uploadFile: null,
+      uploadErrorMsg: null
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    mounted() {
-      this.queryModelInfos();
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
     },
-    computed: {
-    },
-    watch: {
-      mib: {
-        immediate: true,
-        deep: true,
-        handler(n, o) {
-          this.editMib = JSON.parse(JSON.stringify(n));
-          if(this.editMib.models){
-            this.selectedModels = this.editMib.models.split(',');
-          }else{
-            this.selectedModels = [];
+    queryModelInfos: function () {
+      this.$get('model?pageSize=-1').then(response => {
+        if (response.code == 200) {
+          const modelInfos = response.data.list
+          const sortModels = {}
+          modelInfos.forEach((item) => {
+            if (!sortModels[item.type.value]) { // 没有这个assetType
+              sortModels[item.type.value] = {}
+            }
+            if (!sortModels[item.type.value][item.vendor.value]) {
+              sortModels[item.type.value][item.vendor.value] = []
+            }
+            item.label = item.name
+            item.value = item.id
+            sortModels[item.type.value][item.vendor.value].push(item)
+          })
+          for (const assetType of Object.keys(sortModels)) {
+            const option = {
+              label: assetType,
+              value: assetType,
+              children: []
+            }
+            for (const vendor of Object.keys(sortModels[assetType])) {
+              const child = {
+                label: vendor,
+                value: vendor,
+                children: sortModels[assetType][vendor]
+              }
+              option.children.push(child)
+            }
+            this.modelOptions.push(option)
           }
         }
-      },
+      })
+    },
+    selectedModelChange: function (nodes) {
+      const selectedNodes = this.selectedModels
+      if (selectedNodes && selectedNodes.length > 0) {
+        let models = ''
+        for (const node of selectedNodes) {
+          models += node + ','
+        }
+        this.editMib.models = models.substr(0, models.length - 1)
+      } else {
+        this.editMib.models = ''
+      }
+      this.$refs.mibForm.validateField('models')
+    },
+    uploadChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.uploadFileList = [fileList[fileList.length - 1]]
+        this.uploadFile = this.uploadFileList[0]
+      }
+      this.validateFile()
+    },
+    afterClearFile (file, fileList) {
+      this.uploadFileList = []
+      this.uploadFile = null
+      this.validateFile()
+    },
+    validateFile: function () {
+      this.$refs.mibForm.validateField('file')
+    },
+    /* 保存 */
+    save () {
+      this.$refs.mibForm.validate((valid) => {
+        if (valid) {
+          this.prevent_opt.save = true
+          const form = new FormData()
+          form.append('name', this.editMib.name)
+          form.append('remark', this.editMib.remark)
+          form.append('models', this.editMib.models)
+          form.append('file', this.uploadFile && this.uploadFile.raw ? this.uploadFile.raw : null)
+          if (!this.editMib.id) {
+            this.$post('/mib', form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+              if (response.code == 200 && response.msg == 'success') {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            form.append('id', this.editMib.id)
+            this.$put('/mib', form, { 'Content-Type': 'multipart/form-data' }).then(response => {
+              if (response.code == 200 && response.msg == 'success') {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('mib?ids=' + this.editMib.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    }
+  },
+  mounted () {
+    this.queryModelInfos()
+  },
+  computed: {
+  },
+  watch: {
+    mib: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editMib = JSON.parse(JSON.stringify(n))
+        if (this.editMib.models) {
+          this.selectedModels = this.editMib.models.split(',')
+        } else {
+          this.selectedModels = []
+        }
+      }
     }
   }
+}
 </script>
 
 <style>
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index b5314c4fb..e74607f11 100644
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -86,340 +86,339 @@
 </template>
 
 <script>
-  import bus from "../../../libs/bus";
-  export default {
-    name: "modelBox",
-    props: {
-      model: Object,
+import bus from '../../../libs/bus'
+export default {
+  name: 'modelBox',
+  props: {
+    model: Object
+  },
+  data () {
+    return {
+      vendorData: [], // vendor下拉列表的数据
+      typeData: [], // type下拉列表的数据
+      editModel: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        vendor: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        usize: [
+          { type: 'number', min: 1, max: 47, message: this.$t('validate.usize'), trigger: 'blur' }
+        ]
+      },
+      editingVendor: '', // 修改状态的vendor值
+      editingType: '', // 修改状态的assetType值
+      dropdownHoverItem: '' // 控制vendor和type下拉列表中操作按钮的展示
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    data() {
-      return {
-        vendorData: [], //vendor下拉列表的数据
-        typeData: [],  //type下拉列表的数据
-        editModel: {},
-        rules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          type: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          vendor: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          usize: [
-            {type: 'number', min: 1, max: 47,message: this.$t('validate.usize'),trigger: 'blur'}
-          ],
-        },
-        editingVendor: '', //修改状态的vendor值
-        editingType: '', //修改状态的assetType值
-        dropdownHoverItem: '', //控制vendor和type下拉列表中操作按钮的展示
+
+    // 控制下拉框里input的状态
+    inputHandler (obj) {
+      if (obj) {
+        this.typeData.forEach((item, index) => {
+          if (obj.id != item.id) {
+            item.isEdit = false
+          }
+        })
+        this.vendorData.forEach((item, index) => {
+          if (obj.id != item.id) {
+            item.isEdit = false
+          }
+        })
+      } else {
+        this.typeData.forEach((item, index) => {
+          item.isEdit = false
+        })
+        this.vendorData.forEach((item, index) => {
+          item.isEdit = false
+        })
       }
     },
-    methods: {
-      clickOutside() {
-        this.esc(false);
-      },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
 
-      //控制下拉框里input的状态
-      inputHandler(obj) {
-        if (obj) {
-          this.typeData.forEach((item, index) => {
-            if (obj.id != item.id) {
-              item.isEdit = false;
+    /* 保存 */
+    save () {
+      this.$refs.modelForm.validate((valid) => {
+        if (valid) {
+          this.prevent_opt.save = true
+          // vendor和type如果是新记录，需要先请求后台新增，再获取code
+          let vendorReady
+          const vendorCode = this.autocompleteExist('vendor', this.editModel.vendor.value)
+          if (vendorCode) {
+            this.editModel.vendorCode = vendorCode
+            vendorReady = this.$TOOLS.blankPromise()
+          } else {
+            const vendor = { type: 'vendor', value: this.editModel.vendor.value }
+            vendorReady = this.saveVendor(vendor)
+          }
+
+          let typeReady
+          const typeCode = this.autocompleteExist('type', this.editModel.type.value)
+          if (typeCode) {
+            this.editModel.typeCode = typeCode
+            typeReady = this.$TOOLS.blankPromise()
+          } else {
+            const type = { type: 'assetType', value: this.editModel.type.value }
+            typeReady = this.saveType(type)
+          }
+
+          Promise.all([vendorReady, typeReady]).then(response => {
+            if (this.editModel.id) {
+              this.$put('model', this.editModel).then(response => {
+                if (response.code === 200) {
+                  this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                  bus.$emit('asset-property-change')
+                  this.esc(true)
+                } else {
+                  this.$message.error(response.msg)
+                }
+                this.prevent_opt.save = false
+              })
+            } else {
+              this.$post('model', this.editModel).then(response => {
+                if (response.code === 200) {
+                  this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                  bus.$emit('asset-property-change')
+                  this.esc(true)
+                } else {
+                  this.$message.error(response.msg)
+                }
+                this.prevent_opt.save = false
+              })
             }
-          });
-          this.vendorData.forEach((item, index) => {
-            if (obj.id != item.id) {
-              item.isEdit = false;
-            }
-          });
+          })
         } else {
-          this.typeData.forEach((item, index) => {
-            item.isEdit = false;
-          });
-          this.vendorData.forEach((item, index) => {
-            item.isEdit = false;
-          });
+          return false
         }
-      },
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-
-      /*保存*/
-      save() {
-        this.$refs.modelForm.validate((valid) => {
-          if (valid) {
-            this.prevent_opt.save = true;
-            let errMsg = [];
-            //vendor和type如果是新记录，需要先请求后台新增，再获取code
-            let vendorReady;
-            let vendorCode = this.autocompleteExist('vendor', this.editModel.vendor.value);
-            if (vendorCode) {
-              this.editModel.vendorCode = vendorCode;
-              vendorReady = this.$TOOLS.blankPromise();
-            } else {
-              let vendor = {type: 'vendor', value: this.editModel.vendor.value};
-              vendorReady = this.saveVendor(vendor);
-            }
-
-            let typeReady;
-            let typeCode = this.autocompleteExist('type', this.editModel.type.value);
-            if (typeCode) {
-              this.editModel.typeCode = typeCode;
-              typeReady = this.$TOOLS.blankPromise();
-            } else {
-              let type = {type: 'assetType', value: this.editModel.type.value};
-              typeReady = this.saveType(type);
-            }
-
-            Promise.all([vendorReady, typeReady]).then(response => {
-              if (this.editModel.id) {
-                this.$put('model', this.editModel).then(response => {
-                  if (response.code === 200) {
-                    this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    bus.$emit('asset-property-change')
-                    this.esc(true);
-                  } else {
-                    this.$message.error(response.msg);
-                  }
-                  this.prevent_opt.save=false;
-                });
-              } else {
-                this.$post('model', this.editModel).then(response => {
-                  if (response.code === 200) {
-                    this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    bus.$emit('asset-property-change')
-                    this.esc(true);
-                  } else {
-                    this.$message.error(response.msg);
-                  }
-                  this.prevent_opt.save=false;
-                });
-              }
-            });
-          } else {
-            return false;
-          }
-        });
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("model?ids=" + this.editModel.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      delType(id) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/dict/delete?ids=" + id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTypeData();
-              this.$emit("reload");
-              bus.$emit('asset-property-change')
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      editType(item) {
-        this.editingType = item.value;
-        this.inputHandler(item);
-        item.isEdit = true;
-      },
-      saveType(item) {
-        return new Promise(resolve => {
-          if (this.editingType) { //下拉选中的编辑
-            let temp = Object.assign({}, item);
-            temp.value = this.editingType;
-            this.$post('sys/dict/update', temp).then(response => {
-              if (response.code === 200) {
-                item.value = this.editingType;
-                item.isEdit = false;
-                if (this.editModel.type.id == item.id) {
-                  this.editModel.type.value = item.value;
-                }
-                this.$emit("reload");
-                bus.$emit('asset-property-change')
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          }else{
-            this.$post('sys/dict/save', item).then(response => {
-              if (response.code === 200) {
-                this.editModel.typeCode=response.data.dictEntity.code;
-                this.$emit("reload");
-                bus.$emit('asset-property-change')
-                // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                resolve();
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          }
-        });
-      },
-      editVendor(item) {
-        this.editingVendor = item.value;
-        this.inputHandler(item);
-        item.isEdit = true;
-      },
-      saveVendor(item) {
-        return new Promise(resolve => {
-          if (this.editingVendor) {
-            let temp = Object.assign({}, item);
-            temp.value = this.editingVendor;
-            this.$post('sys/dict/update', temp).then(response => {
-              if (response.code === 200) {
-                item.value = this.editingVendor;
-                item.isEdit = false;
-                if (this.editModel.vendor.id == item.id) {
-                  this.editModel.vendor.value = item.value;
-                }
-                this.$emit("reload");
-                bus.$emit('asset-property-change')
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          } else {
-            this.$post('sys/dict/save', item).then(response => {
-              if (response.code === 200) {
-                this.editModel.vendorCode=response.data.dictEntity.code;
-                this.$emit("reload");
-                bus.$emit('asset-property-change')
-                // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                resolve();
-              } else {
-                this.$message.error(response.msg);
-              }
-            });
-          }
-        });
-      },
-      delVendor(id) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/dict/delete?ids=" + id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getVendorData();
-              this.$emit("reload");
-              bus.$emit('asset-property-change')
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      getVendorData() {
-        this.$get('sys/dict/all?type=vendor&pageSize=-1').then(response => {
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('model?ids=' + this.editModel.id).then(response => {
           if (response.code === 200) {
-            this.vendorData = response.data.map((item) => {
-              item.isEdit = false;
-              return item;
-            });
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
           }
-        });
-      },
-      getTypeData() {
-        this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+        })
+      })
+    },
+    delType (id) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/dict/delete?ids=' + id).then(response => {
           if (response.code === 200) {
-            this.typeData = response.data.map((item) => {
-              item.isEdit = false;
-              return item;
-            });
-          }
-        });
-      },
-      //vendor的输入建议
-      vendorSuggestion(queryString, callback) {
-        callback(this.suggestionFilter('vendor', queryString));
-      },
-      //type的输入建议
-      typeSuggestion(queryString, callback) {
-        callback(this.suggestionFilter('type', queryString));
-      },
-      suggestionFilter(type, queryString) {
-        let data = [];
-        if (type == 'vendor') {
-          if (!queryString) {
-            data = this.vendorData;
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTypeData()
+            this.$emit('reload')
+            bus.$emit('asset-property-change')
           } else {
-            for (let i = 0; i < this.vendorData.length; i++) {
-              if (this.vendorData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
-                data.push(this.vendorData[i]);
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    editType (item) {
+      this.editingType = item.value
+      this.inputHandler(item)
+      item.isEdit = true
+    },
+    saveType (item) {
+      return new Promise(resolve => {
+        if (this.editingType) { // 下拉选中的编辑
+          const temp = Object.assign({}, item)
+          temp.value = this.editingType
+          this.$post('sys/dict/update', temp).then(response => {
+            if (response.code === 200) {
+              item.value = this.editingType
+              item.isEdit = false
+              if (this.editModel.type.id == item.id) {
+                this.editModel.type.value = item.value
               }
+              this.$emit('reload')
+              bus.$emit('asset-property-change')
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            } else {
+              this.$message.error(response.msg)
             }
-          }
-        } else if (type == 'type') {
-          if (!queryString) {
-            data = this.typeData;
-          } else {
-            for (let i = 0; i < this.typeData.length; i++) {
-              if (this.typeData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
-                data.push(this.typeData[i]);
+          })
+        } else {
+          this.$post('sys/dict/save', item).then(response => {
+            if (response.code === 200) {
+              this.editModel.typeCode = response.data.dictEntity.code
+              this.$emit('reload')
+              bus.$emit('asset-property-change')
+              // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+              resolve()
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        }
+      })
+    },
+    editVendor (item) {
+      this.editingVendor = item.value
+      this.inputHandler(item)
+      item.isEdit = true
+    },
+    saveVendor (item) {
+      return new Promise(resolve => {
+        if (this.editingVendor) {
+          const temp = Object.assign({}, item)
+          temp.value = this.editingVendor
+          this.$post('sys/dict/update', temp).then(response => {
+            if (response.code === 200) {
+              item.value = this.editingVendor
+              item.isEdit = false
+              if (this.editModel.vendor.id == item.id) {
+                this.editModel.vendor.value = item.value
               }
+              this.$emit('reload')
+              bus.$emit('asset-property-change')
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.$post('sys/dict/save', item).then(response => {
+            if (response.code === 200) {
+              this.editModel.vendorCode = response.data.dictEntity.code
+              this.$emit('reload')
+              bus.$emit('asset-property-change')
+              // this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+              resolve()
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        }
+      })
+    },
+    delVendor (id) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/dict/delete?ids=' + id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getVendorData()
+            this.$emit('reload')
+            bus.$emit('asset-property-change')
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    getVendorData () {
+      this.$get('sys/dict/all?type=vendor&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.vendorData = response.data.map((item) => {
+            item.isEdit = false
+            return item
+          })
+        }
+      })
+    },
+    getTypeData () {
+      this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.typeData = response.data.map((item) => {
+            item.isEdit = false
+            return item
+          })
+        }
+      })
+    },
+    // vendor的输入建议
+    vendorSuggestion (queryString, callback) {
+      callback(this.suggestionFilter('vendor', queryString))
+    },
+    // type的输入建议
+    typeSuggestion (queryString, callback) {
+      callback(this.suggestionFilter('type', queryString))
+    },
+    suggestionFilter (type, queryString) {
+      let data = []
+      if (type == 'vendor') {
+        if (!queryString) {
+          data = this.vendorData
+        } else {
+          for (let i = 0; i < this.vendorData.length; i++) {
+            if (this.vendorData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
+              data.push(this.vendorData[i])
             }
           }
         }
-        return data;
-      },
-      autocompleteExist(type, string) {
-        let result = false;
-        let data = [];
-        if (type == 'vendor') {
-          data = this.vendorData;
-        } else if (type == 'type') {
-          data = this.typeData;
-        }
-        for (let i = 0; i < data.length; i++) {
-          if (data[i].value.toLowerCase() == string.toLowerCase()) {
-            result = data[i].code;
-            break;
+      } else if (type == 'type') {
+        if (!queryString) {
+          data = this.typeData
+        } else {
+          for (let i = 0; i < this.typeData.length; i++) {
+            if (this.typeData[i].value.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
+              data.push(this.typeData[i])
+            }
           }
         }
-        return result;
       }
+      return data
     },
-    mounted() {
-      this.getVendorData();
-      this.getTypeData();
-    },
-    watch: {
-      model: {
-        immediate: true,
-        deep:true,
-        handler(n, o) {
-          this.editModel = JSON.parse(JSON.stringify(n));
+    autocompleteExist (type, string) {
+      let result = false
+      let data = []
+      if (type == 'vendor') {
+        data = this.vendorData
+      } else if (type == 'type') {
+        data = this.typeData
+      }
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].value.toLowerCase() == string.toLowerCase()) {
+          result = data[i].code
+          break
         }
-      },
+      }
+      return result
+    }
+  },
+  mounted () {
+    this.getVendorData()
+    this.getTypeData()
+  },
+  watch: {
+    model: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editModel = JSON.parse(JSON.stringify(n))
+      }
     }
   }
+}
 </script>
 
 <style>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 91119e9a2..0e64d7be8 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -53,7 +53,7 @@
                       </div>
                       <div class="el-cascader__tags">
                         <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
-                          <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
+                          <span v-for="(item, index) in editModule.walk" :key="index" class="el-tag el-tag--info el-tag--small el-tag--light">
                             <span v-html="mibName(item)"></span>
                             <div class="walk-close-box" @click.stop="removeWalk(item)">
                               <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
@@ -254,7 +254,7 @@
 
           <div class="param-box param-box-module">
             <div style="height: 100%; overflow: auto;" id="module-box-params">
-              <div class="param-box-row" v-for="(item, index) in editModule.paramObj">
+              <div v-for="(item, index) in editModule.paramObj" :key="index" class="param-box-row">
                 <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key" ></el-input>
                 </el-form-item>
@@ -282,7 +282,7 @@
 
           <div class="param-box param-box-module">
             <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;" id="module-box-labels">
-              <div class="param-box-row" v-for="(item, index) in editModule.labelModule">
+              <div v-for="(item, index) in editModule.labelModule" :key="index" class="param-box-row">
                 <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
                 </el-form-item>
@@ -316,376 +316,376 @@
 </template>
 
 <script>
-  import {noSpecialChar, port, nzNumber} from "../js/validate";
-  import selectWalk from "../popBox/selectWalk";
+import { noSpecialChar, port, nzNumber } from '../js/validate'
+import selectWalk from '../popBox/selectWalk'
 
-  export default {
-    name: "moduleBox",
-    props: {
-      module: Object,
-      currentProject: Object
-    },
-    components: {
-      'select-walk': selectWalk
-    },
-    data() {
-      return {
-        walkData: [],
-        expandedWalkData: [],
-        editModule: {},
-        rules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
-            {validator:noSpecialChar,trigger: "change"}
-          ],
-          project: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          walk: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
-          ],
-          port: [
-            {validator:port, trigger: 'blur'},
-          ],
-          username: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          password: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          priv_password: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          max_repetitions: [
-            {validator:nzNumber, trigger: 'blur'},
-          ],
-          retries: [
-            {validator:nzNumber, trigger: 'blur'},
-          ],
-          timeout: [
-            {validator:nzNumber, trigger: 'blur'},
-          ],
-        },
-        projectList: [],
+export default {
+  name: 'moduleBox',
+  props: {
+    module: Object,
+    currentProject: Object
+  },
+  components: {
+    'select-walk': selectWalk
+  },
+  data () {
+    return {
+      walkData: [],
+      expandedWalkData: [],
+      editModule: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: noSpecialChar, trigger: 'change' }
+        ],
+        project: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        walk: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        port: [
+          { validator: port, trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        priv_password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        max_repetitions: [
+          { validator: nzNumber, trigger: 'blur' }
+        ],
+        retries: [
+          { validator: nzNumber, trigger: 'blur' }
+        ],
+        timeout: [
+          { validator: nzNumber, trigger: 'blur' }
+        ]
+      },
+      projectList: []
+    }
+  },
+  methods: {
+    selectWalk (walk) {
+      if (this.editModule.walk.indexOf(walk) != -1) {
+        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
+      } else {
+        this.editModule.walk.push(walk)
       }
     },
-    methods: {
-      selectWalk(walk) {
-        if (this.editModule.walk.indexOf(walk) != -1) {
-          this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
-        } else {
-          this.editModule.walk.push(walk);
-        }
-      },
-      //从mibData里取得oid对应的mib名称
-      getMibName(walkData, walk) {
-        let mibName = "";
-        let objectName = "";
-        walkData.forEach((item, index) => {
-          if (!mibName && item.subTree && item.subTree.length > 0) {
-            item.subTree.forEach((item2, index2) => {
-              if (!mibName && getMibName(item2, walk)) {
-                mibName = item.name;
-              }
-            });
-          }
-        });
-        function getMibName(tree, oid) {
-          if (oid.indexOf(tree.objectID) > -1) {
-            if (tree.objectID == oid) {
-              objectName = tree.name;
-              return true;
-            } else {
-              if (tree.subTree && tree.subTree.length > 0) {
-                let result = false;
-                for (let i = 0; i < tree.subTree.length; i++) {
-                  if (getMibName(tree.subTree[i], oid)) {
-                    result = true;
-                    break;
-                  }
-                }
-                return result;
-              } else {
-                return false;
-              }
+    // 从mibData里取得oid对应的mib名称
+    getMibName (walkData, walk) {
+      let mibName = ''
+      let objectName = ''
+      walkData.forEach((item, index) => {
+        if (!mibName && item.subTree && item.subTree.length > 0) {
+          item.subTree.forEach((item2, index2) => {
+            if (!mibName && getMibName(item2, walk)) {
+              mibName = item.name
             }
+          })
+        }
+      })
+      function getMibName (tree, oid) {
+        if (oid.indexOf(tree.objectID) > -1) {
+          if (tree.objectID == oid) {
+            objectName = tree.name
+            return true
           } else {
-            return false;
+            if (tree.subTree && tree.subTree.length > 0) {
+              let result = false
+              for (let i = 0; i < tree.subTree.length; i++) {
+                if (getMibName(tree.subTree[i], oid)) {
+                  result = true
+                  break
+                }
+              }
+              return result
+            } else {
+              return false
+            }
+          }
+        } else {
+          return false
+        }
+      }
+      if (!objectName) {
+        objectName = walk
+      }
+      objectName = "<span style='font-weight:bold'>" + objectName + '</span>'
+      return mibName ? mibName + '：' + objectName : objectName
+    },
+
+    removeWalk (walk) {
+      this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
+      this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false)
+    },
+
+    initWalk () {
+      this.$nextTick(() => {
+        if (this.$refs.selectWalk) {
+          this.$refs.selectWalk.show()
+        }
+      })
+    },
+
+    getWalkData () {
+      this.$get('mib/tree', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          const obj = JSON.parse(response.data)
+          this.walkData = []
+          for (const item in obj) {
+            setAttr(obj[item], 'detailShow', false)
+            this.walkData.push({ name: item, detailShow: false, subTree: obj[item] })
           }
         }
-        if (!objectName) {
-          objectName = walk;
+      })
+      function setAttr (tree, name, value) {
+        if (tree && tree.length > 0) {
+          for (let i = 0; i < tree.length; i++) {
+            tree[i][name] = value
+            if (tree[i].subTree && tree[i].subTree.length > 0) {
+              setAttr(tree[i].subTree, name, value)
+            }
+          }
         }
-        objectName = "<span style='font-weight:bold'>" + objectName + "</span>";
-        return mibName ? mibName + "：" + objectName : objectName;
-      },
+      }
+    },
 
-      removeWalk(walk) {
-        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
-        this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false);
-      },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
 
-      initWalk() {
+    clickOutside () {
+      this.esc(false)
+    },
+    changeType (type) {
+      if (this.editModule.id) {
+        return
+      }
+      this.editModule.type = type
+      if (type == 'http') {
+        this.editModule.port = 9100
+      } else {
         this.$nextTick(() => {
-          if (this.$refs.selectWalk) {
-            this.$refs.selectWalk.show();
+          this.$refs.selectWalk.show()
+        })
+        this.editModule.port = 161
+      }
+    },
+    // 转化snmpParam属性
+    parseSnmpParam (module) {
+      const snmpObj = { // 下划线命名是因为业务需求
+        walk: module.walk,
+        version: module.version, // 2/3
+        max_repetitions: module.max_repetitions ? module.max_repetitions : 25,
+        retries: module.retries ? module.retries : 3,
+        timeout: module.timeout ? module.timeout + 's' : '10s', // s
+        auth: {
+          community: module.community
+        }
+      }
+      if (module.version == 3) {
+        snmpObj.auth.username = module.username
+        snmpObj.auth.security_level = module.security_level
+        snmpObj.auth.context_name = module.context_name
+      }
+      if (module.security_level == 'authNoPriv' || module.security_level == 'authPriv') {
+        snmpObj.auth.password = module.password
+        snmpObj.auth.auth_protocol = module.auth_protocol
+        if (module.security_level != 'authNoPriv') {
+          snmpObj.auth.priv_password = module.priv_password
+          snmpObj.auth.priv_protocol = module.priv_protocol
+        }
+      }
+      module.snmpParam = JSON.stringify(snmpObj)
+    },
+    // 回显时解析snmpParam
+    reparseSnmpParam (module) {
+      if (!module.snmpParam) {
+        return
+      }
+      const snmpObj = JSON.parse(module.snmpParam)
+      module.walk = snmpObj.walk
+      module.version = snmpObj.version
+      module.max_repetitions = snmpObj.max_repetitions
+      module.retries = snmpObj.retries
+      module.timeout = parseInt(snmpObj.timeout.replace('s', ''))
+      module.community = snmpObj.auth.community
+      if (snmpObj.version == 3) {
+        module.username = snmpObj.auth.username
+        module.security_level = snmpObj.auth.security_level
+        module.context_name = snmpObj.auth.context_name
+      }
+      if (snmpObj.auth.security_level == 'authNoPriv' || snmpObj.auth.security_level == 'authPriv') {
+        module.password = snmpObj.auth.password
+        module.auth_protocol = snmpObj.auth.auth_protocol
+        if (snmpObj.auth.security_level != 'authNoPriv') {
+          module.priv_password = snmpObj.auth.priv_password
+          module.priv_protocol = snmpObj.auth.priv_protocol
+        }
+      }
+    },
+    /* 保存 */
+    save () {
+      if (this.editModule.type.toLowerCase() == 'snmp') {
+        this.editModule.paramObj = []// 处理snmp可能会带有param的问题
+      }
+      this.editModule.param = this.paramToJson(this.editModule.paramObj)
+      this.editModule.labels = this.labelsToJson(this.editModule.labelModule)
+      this.$refs.moduleForm.validate((valid) => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editModule.type.toLowerCase() == 'snmp') {
+            this.parseSnmpParam(this.editModule)
+          } else {
+            if (this.editModule.snmpParam) {
+              this.editModule.snmpParam = ''
+            }
+          }
+          this.editModule.projectId = this.editModule.project.id
+          if (this.editModule.id) {
+            this.$put('module', this.editModule).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$store.commit('setReloadFacade')
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('module', this.editModule).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$store.commit('setReloadFacade')
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('module?ids=' + this.editModule.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.$store.commit('setReloadFacade')
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-
-      getWalkData() {
-        this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            let obj = JSON.parse(response.data);
-            this.walkData = [];
-            for (let item in obj) {
-              setAttr(obj[item], "detailShow", false);
-              this.walkData.push({name: item, detailShow: false, subTree: obj[item]});
-            }
-          }
-        });
-        function setAttr(tree, name, value) {
-          if (tree && tree.length > 0) {
-            for (let i = 0; i < tree.length; i++) {
-              tree[i][name] = value;
-              if (tree[i].subTree && tree[i].subTree.length > 0) {
-                setAttr(tree[i].subTree, name, value);
-              }
-            }
-          }
-        }
-      },
-
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-
-      clickOutside() {
-        this.esc(false);
-      },
-      changeType(type) {
-        if (this.editModule.id) {
-          return;
-        }
-        this.editModule.type = type;
-        if(type == 'http'){
-          this.editModule.port = 9100
-        }else{
-          this.$nextTick(()=>{
-            this.$refs.selectWalk.show();
-          })
-          this.editModule.port= 161;
-        }
-      },
-      //转化snmpParam属性
-      parseSnmpParam(module) {
-        let snmpObj = { //下划线命名是因为业务需求
-          walk: module.walk,
-          version: module.version, //2/3
-          max_repetitions: module.max_repetitions ? module.max_repetitions : 25,
-          retries: module.retries ? module.retries : 3,
-          timeout: module.timeout ? module.timeout + "s" : "10s", //s
-          auth: {
-            community: module.community,
-          }
-        };
-        if (module.version == 3) {
-          snmpObj.auth.username = module.username;
-          snmpObj.auth.security_level = module.security_level;
-          snmpObj.auth.context_name = module.context_name;
-        }
-        if (module.security_level == "authNoPriv" || module.security_level == "authPriv") {
-          snmpObj.auth.password = module.password;
-          snmpObj.auth.auth_protocol = module.auth_protocol;
-          if (module.security_level != "authNoPriv") {
-            snmpObj.auth.priv_password = module.priv_password;
-            snmpObj.auth.priv_protocol = module.priv_protocol;
-          }
-        }
-        module.snmpParam = JSON.stringify(snmpObj);
-      },
-      //回显时解析snmpParam
-      reparseSnmpParam(module) {
-        if(!module.snmpParam){
-          return;
-        }
-        let snmpObj = JSON.parse(module.snmpParam);
-        module.walk = snmpObj.walk;
-        module.version = snmpObj.version;
-        module.max_repetitions = snmpObj.max_repetitions;
-        module.retries = snmpObj.retries;
-        module.timeout = parseInt(snmpObj.timeout.replace("s", ""));
-        module.community = snmpObj.auth.community;
-        if (snmpObj.version == 3) {
-          module.username = snmpObj.auth.username;
-          module.security_level = snmpObj.auth.security_level;
-          module.context_name = snmpObj.auth.context_name;
-        }
-        if (snmpObj.auth.security_level == "authNoPriv" || snmpObj.auth.security_level == "authPriv") {
-          module.password = snmpObj.auth.password;
-          module.auth_protocol = snmpObj.auth.auth_protocol;
-          if (snmpObj.auth.security_level != "authNoPriv") {
-            module.priv_password = snmpObj.auth.priv_password;
-            module.priv_protocol = snmpObj.auth.priv_protocol;
-          }
-        }
-      },
-      /*保存*/
-      save() {
-        if(this.editModule.type.toLowerCase() == 'snmp'){
-          this.editModule.paramObj=[];//处理snmp可能会带有param的问题
-        }
-        this.editModule.param = this.paramToJson(this.editModule.paramObj);
-        this.editModule.labels = this.labelsToJson(this.editModule.labelModule);
-        this.$refs.moduleForm.validate((valid) => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            if (this.editModule.type.toLowerCase() == 'snmp') {
-              this.parseSnmpParam(this.editModule);
-            } else {
-              if (this.editModule.snmpParam) {
-                this.editModule.snmpParam = "";
-              }
-            }
-            this.editModule.projectId = this.editModule.project.id;
-            if (this.editModule.id) {
-              this.$put('module', this.editModule).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('setReloadFacade');
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            } else {
-              this.$post('module', this.editModule).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('setReloadFacade');
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            }
-          } else {
-            return false;
-          }
-        });
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("module?ids=" + this.editModule.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$store.commit('setReloadFacade');
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-
-      /*获取project列表*/
-      getProjectList() {
-        this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.projectList = response.data.list;
-          }
-        });
-      },
-
-      // 清除param
-      clearAllParam() {
-        this.editModule.paramObj = [];
-      },
-
-      // 新增param
-      addParam() {
-        this.editModule.paramObj.push({key: '', value: ''});
-      },
-      // 移除单个param
-      removeParam(index) {
-        this.editModule.paramObj.splice(index, 1);
-      },
-      // 新增label
-      addLabel() {
-        this.editModule.labelModule.push({key: '', value: ''});
-      },
-      // 移除单个Label
-      removeLabel(index) {
-        this.editModule.labelModule.splice(index, 1);
-      },
-      //将param转为json字符串格式
-      paramToJson(param) {
-        let tempParam = {};
-        for (let i = 0; i < param.length; i++) {
-          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
-        }
-        let jsonString = JSON.stringify(tempParam);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
-        }
-      },
-      //将labels转为json字符串格式
-      labelsToJson(param) {
-        let tempParam = {};
-        for (let i = 0; i < param.length; i++) {
-          eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
-        }
-        let jsonString = JSON.stringify(tempParam);
-        if (jsonString == '{}') {
-          return "";
-        } else {
-          return jsonString;
-        }
-      },
+      })
     },
-    mounted() {
-      this.getWalkData();
-    },
-    created() {
-      this.getProjectList();
-    },
-    computed: {
-      mibName() {
-        return (value) => {
-          return this.getMibName(this.walkData, value);
+
+    /* 获取project列表 */
+    getProjectList () {
+      this.$get('project', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.projectList = response.data.list
         }
+      })
+    },
+
+    // 清除param
+    clearAllParam () {
+      this.editModule.paramObj = []
+    },
+
+    // 新增param
+    addParam () {
+      this.editModule.paramObj.push({ key: '', value: '' })
+    },
+    // 移除单个param
+    removeParam (index) {
+      this.editModule.paramObj.splice(index, 1)
+    },
+    // 新增label
+    addLabel () {
+      this.editModule.labelModule.push({ key: '', value: '' })
+    },
+    // 移除单个Label
+    removeLabel (index) {
+      this.editModule.labelModule.splice(index, 1)
+    },
+    // 将param转为json字符串格式
+    paramToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      const jsonString = JSON.stringify(tempParam)
+      if (jsonString == '{}') {
+        return ''
+      } else {
+        return jsonString
       }
     },
-    watch: {
-      module: {
-        immediate: true,
-        deep: true,
-        handler(n, o) {
-          this.editModule = JSON.parse(JSON.stringify(n));
-          if(n.id){
-            this.reparseSnmpParam(this.editModule)
-          }else{
-            if(n.type&&n.type.toLowerCase() == 'snmp'){
-              this.$refs.selectWalk.show();
-              for (let i = 0; i < this.editModule.walk.length; i++) {
-                this.expandedWalkData.push(this.editModule.walk[i].substring(0, this.editModule.walk[i].lastIndexOf(".")));
-              }
+    // 将labels转为json字符串格式
+    labelsToJson (param) {
+      const tempParam = {}
+      for (let i = 0; i < param.length; i++) {
+        eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"')
+      }
+      const jsonString = JSON.stringify(tempParam)
+      if (jsonString == '{}') {
+        return ''
+      } else {
+        return jsonString
+      }
+    }
+  },
+  mounted () {
+    this.getWalkData()
+  },
+  created () {
+    this.getProjectList()
+  },
+  computed: {
+    mibName () {
+      return (value) => {
+        return this.getMibName(this.walkData, value)
+      }
+    }
+  },
+  watch: {
+    module: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.editModule = JSON.parse(JSON.stringify(n))
+        if (n.id) {
+          this.reparseSnmpParam(this.editModule)
+        } else {
+          if (n.type && n.type.toLowerCase() == 'snmp') {
+            this.$refs.selectWalk.show()
+            for (let i = 0; i < this.editModule.walk.length; i++) {
+              this.expandedWalkData.push(this.editModule.walk[i].substring(0, this.editModule.walk[i].lastIndexOf('.')))
             }
           }
         }
-      },
+      }
     }
   }
+}
 </script>
 <style scoped>
   .module-walk-box {
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index d49e9c5e5..570923d69 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -1,4 +1,4 @@
-<template key="panelBox">
+<template>
   <transition name="right-box-580">
     <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="{obj:panel,func:clickos}">
       <!-- begin--顶部按钮-->
@@ -39,95 +39,94 @@
   </transition>
 </template>
 <script>
-  export default {
-    name: "panelBox",
-    props: {
-      panel: Object
-    },
-    data() {
-      return {
-        rightBox: { //面板弹出框相关
-          show: false,
-          title: this.$t('dashboard.panel.createPanelTitle')
-        },
+export default {
+  name: 'panelBox',
+  props: {
+    panel: Object
+  },
+  data () {
+    return {
+      rightBox: { // 面板弹出框相关
+        show: false,
+        title: this.$t('dashboard.panel.createPanelTitle')
       }
-    },
-    methods: {
-      show(show) {
-        this.rightBox.show = show;
-      },
-      setTitle(title) {
-        this.rightBox.title = title;
-      },
-      clickos() {
-        this.esc();
-      },
-      //面板相关方法
-      del: function(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("panel?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.esc();
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit("reloadForDel");
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      save: function() {
-        this.$refs.panelForm.validate((valid) => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            if (this.panel.id) {
-              this.$put('panel', this.panel).then(response => {
-                if (response.code === 200) {
-                  this.esc();
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$emit("reload");
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            } else {
-              this.$post('panel', this.panel).then(response => {
-                if (response.code === 200) {
-                  this.esc();
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$emit("reload", this.panel.name);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            }
-          } else {
-            return false;
-          }
-        });
-      },
-      esc: function() {
-        this.rightBox.show = false;
-      },
-    },
-    created() {
-
-    },
-    mounted: function() {
-
-    },
-    watch: {
-
     }
-  }
-</script>
+  },
+  methods: {
+    show (show) {
+      this.rightBox.show = show
+    },
+    setTitle (title) {
+      this.rightBox.title = title
+    },
+    clickos () {
+      this.esc()
+    },
+    // 面板相关方法
+    del: function (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.esc()
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.$emit('reloadForDel')
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    save: function () {
+      this.$refs.panelForm.validate((valid) => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.panel.id) {
+            this.$put('panel', this.panel).then(response => {
+              if (response.code === 200) {
+                this.esc()
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('reload')
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('panel', this.panel).then(response => {
+              if (response.code === 200) {
+                this.esc()
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$emit('reload', this.panel.name)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    esc: function () {
+      this.rightBox.show = false
+    }
+  },
+  created () {
 
+  },
+  mounted: function () {
+
+  },
+  watch: {
+
+  }
+}
+</script>
 
 <style scoped>
   .z-top{
diff --git a/nezha-fronted/src/components/common/rightBox/paramEditBox.vue b/nezha-fronted/src/components/common/rightBox/paramEditBox.vue
index e1f2c8618..12d6e3563 100644
--- a/nezha-fronted/src/components/common/rightBox/paramEditBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/paramEditBox.vue
@@ -3,7 +3,7 @@
   <transition name="right-sub-box">
     <div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
       <div class="param-box">
-        <div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
+        <div v-for="(item, index) in currentModule.paramObj" :key="index" class="param-box-row">
           <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
           <span class="param-box-row-eq">=</span>
           <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
@@ -20,12 +20,12 @@
 
 <script>
 export default {
-  name: "paramEditBox",
+  name: 'paramEditBox',
   props: {
     editParamBox: Object,
     paramObj: Array
   },
-  data() {
+  data () {
     return {
 
     }
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 8e4d5083b..f264f31de 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -35,99 +35,98 @@
   </div>
 </template>
 <script>
-  import {noSpecialChar} from '../../common/js/validate';
-  export default {
-    name: "projectBox",
-    props: {
-      project: Object
-    },
-    data() {
-      return {
-        editProject: {},
-        rules: {
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
-            {validator:noSpecialChar,trigger: "change"}
-          ]
-        }
+import { noSpecialChar } from '../../common/js/validate'
+export default {
+  name: 'projectBox',
+  props: {
+    project: Object
+  },
+  data () {
+    return {
+      editProject: {},
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: noSpecialChar, trigger: 'change' }
+        ]
       }
+    }
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
     },
-    methods: {
-      clickOutside() {
-        this.esc(false);
-      },
 
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
 
-      /*保存*/
-      save() {
-        this.$refs['projectForm'].validate((valid) => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            if (this.editProject.id) {
-              this.$put('project', this.editProject).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('projectListChange');
-                  this.$store.commit('setProject', this.project);
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            } else {
-              this.$post('project', this.editProject).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('projectListChange');
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            }
+    /* 保存 */
+    save () {
+      this.$refs.projectForm.validate((valid) => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editProject.id) {
+            this.$put('project', this.editProject).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$store.commit('projectListChange')
+                this.$store.commit('setProject', this.project)
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
           } else {
-            console.log('error submit!!');
-            return false;
+            this.$post('project', this.editProject).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.$store.commit('projectListChange')
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
           }
-        });
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("project?ids=" + this.editProject.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$store.commit('projectListChange');
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      }
-    },
-    watch: {
-      project: {
-        immediate: true,
-        handler(n, o) {
-          this.editProject = JSON.parse(JSON.stringify(n));
+        } else {
+          console.log('error submit!!')
+          return false
         }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('project?ids=' + this.editProject.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.$store.commit('projectListChange')
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    }
+  },
+  watch: {
+    project: {
+      immediate: true,
+      handler (n, o) {
+        this.editProject = JSON.parse(JSON.stringify(n))
       }
     }
   }
+}
 </script>
 
-
 <style scoped>
 
 </style>
diff --git a/nezha-fronted/src/components/common/rightBox/promServerBox.vue b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
index 61a9807d9..3dafea6f4 100644
--- a/nezha-fronted/src/components/common/rightBox/promServerBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
@@ -66,116 +66,115 @@
   </div>
 </template>
 <script>
-  import {host} from '../../common/js/validate';
-  import {port} from '../../common/js/validate';
+import { host, port } from '../../common/js/validate'
 
-  export default {
-    name: "promServerBox",
-    props: {
-      promServer: Object
+export default {
+  name: 'promServerBox',
+  props: {
+    promServer: Object
+  },
+  data () {
+    return {
+      rules: {
+        'idc.name': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        port: [
+          { validator: port, trigger: 'blur' },
+          { required: true, message: this.$t('validate.required') }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      editPromServer: {},
+      dcData: [] // data center数据
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
     },
-    data() {
-      return {
-        rules: {
-          'idc.name': [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'}
-          ],
-          host: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
-            {validator: host, trigger: 'blur'}
-          ],
-          port: [
-            {validator: port, trigger: 'blur'},
-            {required: true, message: this.$t('validate.required')}
-          ],
-          type: [
-            {required: true, message: this.$t('validate.required'), trigger: 'change'},
-          ]
-        },
-        editPromServer: {},
-        dcData: [], //data center数据
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      this.$refs.promServerForm.validate(valid => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editPromServer.id) {
+            this.$put('promServer', this.editPromServer).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          } else {
+            this.$post('promServer', this.editPromServer).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('promServer?ids=' + this.editPromServer.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    // 获取dc下拉列表数据
+    getDcData () {
+      this.$get('idc', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.dcData = response.data.list
+        }
+      })
+    }
+  },
+  watch: {
+    // 将prop里的user转为组件内部对象
+    promServer: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.editPromServer = JSON.parse(JSON.stringify(n))
       }
     },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*保存*/
-      save() {
-        this.$refs.promServerForm.validate(valid => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            if (this.editPromServer.id) {
-              this.$put('promServer', this.editPromServer).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            } else {
-              this.$post('promServer', this.editPromServer).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            }
-          } else {
-            return false;
-          }
-        })
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("promServer?ids=" + this.editPromServer.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      //获取dc下拉列表数据
-      getDcData() {
-        this.$get('idc',{pageSize:-1}).then(response => {
-          if (response.code === 200) {
-            this.dcData = response.data.list;
-          }
-        })
-      },
-    },
-    watch: {
-      //将prop里的user转为组件内部对象
-      promServer: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          this.editPromServer = JSON.parse(JSON.stringify(n));
-        }
-      },
-      'editPromServer.idc': function (n, o) {
-        this.editPromServer.idcId = n.id;
-      },
-    },
-    mounted() {
-      this.getDcData();
+    'editPromServer.idc': function (n, o) {
+      this.editPromServer.idcId = n.id
     }
+  },
+  mounted () {
+    this.getDcData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
index 290cdbfbf..cd43e75ac 100644
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -33,10 +33,10 @@
             <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
           </div>-->
           <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
-            <div slot-scope="{node, data}" >
+            <div slot-scope="data">
               <span>
-                <i class="el-icon-menu" v-if="data.type == '1'"></i>
-                <i class="el-icon-edit" v-if="data.type == '2'"></i>
+                <i v-if="data.data.type == '1'" class="el-icon-menu"></i>
+                <i v-if="data.data.type == '2'" class="el-icon-edit"></i>
               </span>
               {{$t(data.i18n)}}
             </div>
@@ -59,142 +59,141 @@
   </div>
 </template>
 <script>
-  export default {
-    name: "roleBox",
-    props: {
-      role: Object,
-      detail:Boolean,
-    },
-    computed: {
-    },
-    data() {
-      return {
-        rules: { //表单校验规则
-          name: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-        },
-        editRole: {},
-        menus:[],
-        selectAllFlag:false,
-        expandAllFlag:true,
-      }
-    },
-    methods: {
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
+export default {
+  name: 'roleBox',
+  props: {
+    role: Object,
+    detail: Boolean
+  },
+  computed: {
+  },
+  data () {
+    return {
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
       },
-      clickOutside() {
-        this.esc(false);
-      },
-      /*保存*/
-      save() {
-        this.$refs.roleForm.validate(valid => {
-          if (valid) {
-            this.prevent_opt.save=true;
-            if (this.editRole.id) {
-              this.$put('sys/role', this.editRole).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            } else {
-              this.$post('sys/role', this.editRole).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-                this.prevent_opt.save=false;
-              });
-            }
+      editRole: {},
+      menus: [],
+      selectAllFlag: false,
+      expandAllFlag: true
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      this.$refs.roleForm.validate(valid => {
+        if (valid) {
+          this.prevent_opt.save = true
+          if (this.editRole.id) {
+            this.$put('sys/role', this.editRole).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
           } else {
-            return false;
+            this.$post('sys/role', this.editRole).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+              this.prevent_opt.save = false
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/role/?ids=' + this.editRole.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      /*删除*/
-      del() {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/role/?ids=" + this.editRole.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.esc(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      getMenus:function(){
-        this.menus = [];
+      })
+    },
+    getMenus: function () {
+      this.menus = []
 
-        this.$get("sys/menu").then(response=>{
-          if (response.code  == 200){
-            this.menus = response.data.list;
-          }else{
-            this.$message.error("load menu faild")
-          }
+      this.$get('sys/menu').then(response => {
+        if (response.code == 200) {
+          this.menus = response.data.list
+        } else {
+          this.$message.error('load menu faild')
+        }
+      })
+    },
+    labelFormatter: function (data, node) {
+      return data && data.i18n ? this.$t(data.i18n) : data.name
+    },
+    selectChange: function (data, isCheck, childIsCheck) {
+      if (this.$refs.menuTree) {
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+      }
+    },
+    selectAllOrNone: function () {
+      if (this.$refs.menuTree) {
+        if (!this.selectAllFlag) {
+          this.$refs.menuTree.setCheckedNodes(this.menus)
+        } else {
+          this.$refs.menuTree.setCheckedNodes([])
+        }
+        this.selectAllFlag = !this.selectAllFlag
+      }
+    },
+    expandAllOrNone: function () {
+      this.expandAllFlag = !this.expandAllFlag
+      const $self = this
+      if (this.$refs.menuTree) {
+        this.menus.forEach(t => {
+          $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag
         })
-
-      },
-      labelFormatter:function(data,node){
-        return data&&data.i18n?this.$t(data.i18n):data.name;
-      },
-      selectChange:function(data,isCheck,childIsCheck){
-        if(this.$refs.menuTree){
-          this.editRole.menuIds=this.$refs.menuTree.getCheckedKeys(true);
-        }
-      },
-      selectAllOrNone:function(){
-        if(this.$refs.menuTree){
-          if(!this.selectAllFlag){
-            this.$refs.menuTree.setCheckedNodes(this.menus);
-          }else{
-            this.$refs.menuTree.setCheckedNodes([]);
-          }
-          this.selectAllFlag = !this.selectAllFlag;
-        }
-      },
-      expandAllOrNone:function(){
-        this.expandAllFlag = !this.expandAllFlag;
-        let $self=this;
-        if(this.$refs.menuTree){
-          this.menus.forEach(t=>{
-            $self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag;
-          })
-        }
       }
-    },
-    created() {
-      this.getMenus();
-    },
-    mounted() {
-      if(this.$refs.menuTree&&this.editRole.menuIds&&this.editRole.menuIds.length>0){
-        this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds,true);
+    }
+  },
+  created () {
+    this.getMenus()
+  },
+  mounted () {
+    if (this.$refs.menuTree && this.editRole.menuIds && this.editRole.menuIds.length > 0) {
+      this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds, true)
+    }
+  },
+  watch: {
+    // 将prop里的user转为组件内部对象
+    role: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.editRole = JSON.parse(JSON.stringify(n))
       }
-    },
-    watch: {
-      //将prop里的user转为组件内部对象
-      role: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          this.editRole = JSON.parse(JSON.stringify(n));
-        }
-      },
-    },
+    }
   }
+}
 </script>
 <style lang="scss">
   .right-box-role .tree-border{
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
index 09591030f..b1146359d 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
@@ -21,77 +21,77 @@
 </template>
 
 <script>
-  export default {
-    name: "subBox",
-    data(){
-      return{
-        editTagsBox: {show: false, top: 0, left: 0,},
-        tempTagsObj:[],
-        rowIndex:0,
-        curConfigs:null,
-        inputKeyErr:[],
-      }
-    },
-    methods:{
-      showEditTagsBox:function(show,configs,index,e){
-        if (show) {
-          this.rowIndex=index;
-          this.curConfigs=configs;
-          let position = e.target.getBoundingClientRect();
-          this.editTagsBox.top = position.top + 25;
-          this.editTagsBox.left = position.left + 80;
-          this.tempTagsObj=[];
-          this.inputKeyErr=[];
-          let obj=null;
-          try{
-            obj=configs[index]['tags']
-          }catch (e) {
+export default {
+  name: 'subBox',
+  data () {
+    return {
+      editTagsBox: { show: false, top: 0, left: 0 },
+      tempTagsObj: [],
+      rowIndex: 0,
+      curConfigs: null,
+      inputKeyErr: []
+    }
+  },
+  methods: {
+    showEditTagsBox: function (show, configs, index, e) {
+      if (show) {
+        this.rowIndex = index
+        this.curConfigs = configs
+        const position = e.target.getBoundingClientRect()
+        this.editTagsBox.top = position.top + 25
+        this.editTagsBox.left = position.left + 80
+        this.tempTagsObj = []
+        this.inputKeyErr = []
+        let obj = null
+        try {
+          obj = configs[index].tags
+        } catch (e) {
 
-          }
-          if(obj){
-            for(let key in obj){
-              this.tempTagsObj.push({key:key,value:obj[key]})
-              this.inputKeyErr.push(false);
-            }
-          }
-        } else {
-          if (!this.editTagsBox.show) {
-            return;
-          }
-          let temp=this.inputKeyErr.find(item=>{
-            return item == true;
-          })
-          if(typeof temp != "undefined"){
-            return ;
-          }
-          let tempObj={};
-          for(let i=0;i<this.tempTagsObj.length;i++){
-            let obj=this.tempTagsObj[i];
-            if(obj.key && obj.value){
-              tempObj[obj.key]=obj.value;
-            }
-          }
-          this.curConfigs[this.rowIndex]['tags']=Object.assign({},tempObj)
         }
-        this.$emit('after')
-        this.editTagsBox.show = show;
-      },
-      addTags:function(){
-        this.tempTagsObj.push({key:'',value:''})
-        this.inputKeyErr.push(false);
-      },
-      validateInput:function(value,index){
-        if(!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)){
-          this.inputKeyErr.splice(index,1,true)
-        }else{
-          this.inputKeyErr.splice(index,1,false)
+        if (obj) {
+          for (const key in obj) {
+            this.tempTagsObj.push({ key: key, value: obj[key] })
+            this.inputKeyErr.push(false)
+          }
         }
-      },
-      removeTags:function(index){
-        this.tempTagsObj.splice(index,1)
+      } else {
+        if (!this.editTagsBox.show) {
+          return
+        }
+        const temp = this.inputKeyErr.find(item => {
+          return item == true
+        })
+        if (typeof temp !== 'undefined') {
+          return
+        }
+        const tempObj = {}
+        for (let i = 0; i < this.tempTagsObj.length; i++) {
+          const obj = this.tempTagsObj[i]
+          if (obj.key && obj.value) {
+            tempObj[obj.key] = obj.value
+          }
+        }
+        this.curConfigs[this.rowIndex].tags = Object.assign({}, tempObj)
+      }
+      this.$emit('after')
+      this.editTagsBox.show = show
+    },
+    addTags: function () {
+      this.tempTagsObj.push({ key: '', value: '' })
+      this.inputKeyErr.push(false)
+    },
+    validateInput: function (value, index) {
+      if (!/[a-zA-Z_:][a-zA-Z0-9_:]*/.test(value)) {
+        this.inputKeyErr.splice(index, 1, true)
+      } else {
+        this.inputKeyErr.splice(index, 1, false)
       }
     },
+    removeTags: function (index) {
+      this.tempTagsObj.splice(index, 1)
+    }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 3991f5b4f..459ea0500 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -27,308 +27,302 @@
 </template>
 
 <script>
-  import trafficSettingTab from "./trafficSettingTab";
-  import {getUUID} from "../../js/common";
+import trafficSettingTab from './trafficSettingTab'
+import { getUUID } from '../../js/common'
 
-  export default {
-    name: "trafficSettingBox",
-    components:{
-      'traffic-setting-tab':trafficSettingTab
-    },
-    props:{
-      dc:{
-        type: Object,
-        required: true
-      },
-    },
-    mounted() {
-      this.queryTrafficSettings();
-    },
-    data(){
-      return{
-        assetList:[],
-        uuids:[],
-        traffic:{
-          idcId:'',
-          setting:[
-            {
-              host:'',
-              port:161,
-              community:'public',
-              version:2,
-              auth:{
-                username:'',
-                securityLevel:'',
-                securityLevel:'',
-                authProtocol:'',
-                privProtocol:'',
-                privPassword:'',
-              },
-              configs:[
-                {
-                  direction:[],
-                  ifindex:null,
-                  ifdescr:' ',
-                  tags:{},
-                  edit:true,
-                }
-              ]
-            }
-          ]
-        },
-      }
-    },
-    methods:{
-      addAssetSetting:function(){
-        let valid=this.validateTabs();
-        if(valid){
-
-          this.uuids.push(getUUID());
-          this.traffic.setting.push({
-            host:'',
-            port:161,
-            community:'public',
-            version:2,
-            auth:{
-              username:'',
-              securityLevel:'',
-              securityLevel:'',
-              authProtocol:'',
-              privProtocol:'',
-              privPassword:'',
+export default {
+  name: 'trafficSettingBox',
+  components: {
+    'traffic-setting-tab': trafficSettingTab
+  },
+  props: {
+    dc: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted () {
+    this.queryTrafficSettings()
+  },
+  data () {
+    return {
+      assetList: [],
+      uuids: [],
+      traffic: {
+        idcId: '',
+        setting: [
+          {
+            host: '',
+            port: 161,
+            community: 'public',
+            version: 2,
+            auth: {
+              username: '',
+              securityLevel: '',
+              authProtocol: '',
+              privProtocol: '',
+              privPassword: ''
             },
-            configs:[
+            configs: [
               {
-                direction:[],
-                ifindex:null,
-                ifdescr:' ',
-                tags:{},
-                edit:true,
+                direction: [],
+                ifindex: null,
+                ifdescr: ' ',
+                tags: {},
+                edit: true
               }
             ]
-          })
-        }
-      },
-      getEmptyTraffic:function(){
-        let obj={
-          host:'',
-          port:161,
-          community:'public',
-          version:2,
-          auth:{
-            username:'',
-            securityLevel:'',
-            securityLevel:'',
-            authProtocol:'',
-            privProtocol:'',
-            privPassword:'',
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    addAssetSetting: function () {
+      const valid = this.validateTabs()
+      if (valid) {
+        this.uuids.push(getUUID())
+        this.traffic.setting.push({
+          host: '',
+          port: 161,
+          community: 'public',
+          version: 2,
+          auth: {
+            username: '',
+            securityLevel: '',
+            authProtocol: '',
+            privProtocol: '',
+            privPassword: ''
           },
-          configs:[
+          configs: [
             {
-              direction:[],
-              ifindex:null,
-              ifdescr:' ',
-              tags:{},
-              edit:true,
+              direction: [],
+              ifindex: null,
+              ifdescr: ' ',
+              tags: {},
+              edit: true
             }
           ]
-        }
-        return Object.assign({},obj)
-      },
-      validateTabs:function(){
-        let valid=true;
-        for(let i=0;i<this.$refs.trafficSetting.length;i++){
-          let component=this.$refs.trafficSetting[i];
-          valid=component.validateRows();
-          if(!valid){
-            break
+        })
+      }
+    },
+    getEmptyTraffic: function () {
+      const obj = {
+        host: '',
+        port: 161,
+        community: 'public',
+        version: 2,
+        auth: {
+          username: '',
+          securityLevel: '',
+          authProtocol: '',
+          privProtocol: '',
+          privPassword: ''
+        },
+        configs: [
+          {
+            direction: [],
+            ifindex: null,
+            ifdescr: ' ',
+            tags: {},
+            edit: true
           }
+        ]
+      }
+      return Object.assign({}, obj)
+    },
+    validateTabs: function () {
+      let valid = true
+      for (let i = 0; i < this.$refs.trafficSetting.length; i++) {
+        const component = this.$refs.trafficSetting[i]
+        valid = component.validateRows()
+        if (!valid) {
+          break
         }
-        return valid;
-      },
-      valiateRepeatFunc:function(host,index){
-        if(host != ''){
-          let temp=this.traffic.setting.find((item,i)=>{
-            return i != index && item.host == host;
-          })
-          return typeof temp == "undefined";
-        }else{
-          return true;
+      }
+      return valid
+    },
+    valiateRepeatFunc: function (host, index) {
+      if (host != '') {
+        const temp = this.traffic.setting.find((item, i) => {
+          return i != index && item.host == host
+        })
+        return typeof temp === 'undefined'
+      } else {
+        return true
+      }
+    },
+    delAssetSetting: function (index) {
+      this.uuids.splice(index, 1)
+      this.traffic.setting.splice(index, 1)
+    },
+
+    clickOutside () {
+      this.esc(false)
+    },
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+    /* 保存 */
+    save () {
+      const valid = this.validateTabs()
+      if (valid) {
+        // 拆解数据
+        const result = {
+          idcId: this.dc.id,
+          setting: []
         }
-      },
-      delAssetSetting:function(index){
-        this.uuids.splice(index,1);
-        this.traffic.setting.splice(index,1)
-      },
-
-      clickOutside() {
-        this.esc(false);
-      },
-
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-      /*保存*/
-      save() {
-        let valid=this.validateTabs();
-        if (valid) {
-          //拆解数据
-          let result={
-            idcId: this.dc.id,
-            setting:[],
-          };
-          this.traffic.setting.forEach(assetSetting=>{
-            assetSetting.configs.forEach(config=>{
-              let settingItem={
-                host:assetSetting.host,
-                port:assetSetting.port,
-                community:assetSetting.community,
-                version:assetSetting.version,
-                auth:assetSetting.auth,
-                direction:config.direction.toString(),
-                ifindex:config.ifindex,
-                ifdescr:config.ifdescr,
-                tags:config.tags,
-              };
-              result.setting.push(settingItem);
-            })
-          })
-
-          this.$put('/idc/trafficSetting', result).then(response=>{
-            if(response.code == 200){
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.esc(false);
-            }else{
-              console.error(response.msg)
-              this.$message.error(response.msg);
+        this.traffic.setting.forEach(assetSetting => {
+          assetSetting.configs.forEach(config => {
+            const settingItem = {
+              host: assetSetting.host,
+              port: assetSetting.port,
+              community: assetSetting.community,
+              version: assetSetting.version,
+              auth: assetSetting.auth,
+              direction: config.direction.toString(),
+              ifindex: config.ifindex,
+              ifdescr: config.ifdescr,
+              tags: config.tags
             }
+            result.setting.push(settingItem)
           })
-        } else {
-          console.log('error submit!!');
-          return false;
-        }
-      },
-      queryTrafficSettings:function(){
-        this.$get('/idc/trafficSetting?id='+this.dc.id).then(response=>{
-            if(response.code == 200){
-              let list=response.data.list;
-              if(list.length>0){
-                let map=new Map();
-                list.forEach(item=>{
-                  let arr=map.get(item.host);
-                  if(arr){
-                    arr.push(item)
-                    map.set(item.host,arr);
-                  }else{
-                    map.set(item.host,[item])
-                  }
-                })
-                this.traffic={
-                  idcId:this.dc.id,
-                  setting:[],
+        })
+
+        this.$put('/idc/trafficSetting', result).then(response => {
+          if (response.code == 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.esc(false)
+          } else {
+            console.error(response.msg)
+            this.$message.error(response.msg)
+          }
+        })
+      } else {
+        console.log('error submit!!')
+        return false
+      }
+    },
+    queryTrafficSettings: function () {
+      this.$get('/idc/trafficSetting?id=' + this.dc.id).then(response => {
+        if (response.code == 200) {
+          const list = response.data.list
+          if (list.length > 0) {
+            const map = new Map()
+            list.forEach(item => {
+              const arr = map.get(item.host)
+              if (arr) {
+                arr.push(item)
+                map.set(item.host, arr)
+              } else {
+                map.set(item.host, [item])
+              }
+            })
+            this.traffic = {
+              idcId: this.dc.id,
+              setting: []
+            }
+            const keys = map.keys()
+            for (const key of keys) { // settings 为同一asset下的设置集合
+              const configs = map.get(key)
+              const settingItem = {
+                host: configs[0].host,
+                port: configs[0].port,
+                community: configs[0].community,
+                version: configs[0].version,
+                auth: configs[0].auth,
+                configs: []
+              }
+              if (settingItem.version == 2) {
+                settingItem.auth = {
+                  username: '',
+                  securityLevel: '',
+                  authProtocol: '',
+                  privProtocol: '',
+                  privPassword: ''
                 }
-                let keys=map.keys();
-                for(let key of keys){//settings 为同一asset下的设置集合
-                  let configs=map.get(key);
-                  let settingItem={
-                    host:configs[0].host,
-                    port:configs[0].port,
-                    community:configs[0].community,
-                    version:configs[0].version,
-                    auth:configs[0].auth,
-                    configs:[],
-                  }
-                  if(settingItem.version == 2){
-                    settingItem.auth={
-                      username:'',
-                      securityLevel:'',
-                      securityLevel:'',
-                      authProtocol:'',
-                      privProtocol:'',
-                      privPassword:'',
-                    }
-                  }
-                  configs.forEach(item=>{
-                    let config={
-                      direction:item.direction&&item.direction!=''?item.direction.split(','):[],
-                      ifindex:item.ifindex+'',
-                      ifdescr:item.ifdescr,
-                      tags:item.tags&&item.tags!=''?item.tags:{},
-                      edit:false,
-                    }
-                    settingItem.configs.push(config);
-                  })
-                  this.traffic.setting.push(settingItem)
+              }
+              configs.forEach(item => {
+                const config = {
+                  direction: item.direction && item.direction != '' ? item.direction.split(',') : [],
+                  ifindex: item.ifindex + '',
+                  ifdescr: item.ifdescr,
+                  tags: item.tags && item.tags != '' ? item.tags : {},
+                  edit: false
                 }
-              }else{
-                this.traffic={
-                  idcId:'',
-                  setting:[
+                settingItem.configs.push(config)
+              })
+              this.traffic.setting.push(settingItem)
+            }
+          } else {
+            this.traffic = {
+              idcId: '',
+              setting: [
+                {
+                  host: '',
+                  port: 161,
+                  community: 'public',
+                  version: 2,
+                  auth: {
+                    username: '',
+                    securityLevel: '',
+                    authProtocol: '',
+                    privProtocol: '',
+                    privPassword: ''
+                  },
+                  configs: [
                     {
-                      host:'',
-                      port:161,
-                      community:'public',
-                      version:2,
-                      auth:{
-                        username:'',
-                        securityLevel:'',
-                        securityLevel:'',
-                        authProtocol:'',
-                        privProtocol:'',
-                        privPassword:'',
-                      },
-                      configs:[
-                        {
-                          direction:[],
-                          ifindex:'',
-                          ifdescr:' ',
-                          tags:{},
-                          edit:true,
-                        }
-                      ]
+                      direction: [],
+                      ifindex: '',
+                      ifdescr: ' ',
+                      tags: {},
+                      edit: true
                     }
                   ]
                 }
-              }
-              for(let i =0;i<this.traffic.setting.length;i++){
-                this.uuids.push(getUUID())
-              }
-            }else{
-              console.error(response.msg)
-              this.$message.error(response.msg)
+              ]
             }
-        })
-      },
-      queryAssetList() {
-        let queryParams = {
-          pageSize:-1,
-          idcId:this.dc.id,
-        };
-        this.assetList=[];
-        this.$get('/asset',queryParams).then(response=>{
-          if(response.code == 200){
-            let temp=response.data.list;
-            this.assetList=temp.map((item,index)=>{
-              item.isOccupy=false;
-              return item;
-            })
-          }else{
-            this.$message.error(response.msg);
           }
-        })
-      },
-    },
-    watch:{
-      dc:{
-        immediate:true,
-        deep:true,
-        handler(){
-          this.queryAssetList();
+          for (let i = 0; i < this.traffic.setting.length; i++) {
+            this.uuids.push(getUUID())
+          }
+        } else {
+          console.error(response.msg)
+          this.$message.error(response.msg)
         }
+      })
+    },
+    queryAssetList () {
+      const queryParams = {
+        pageSize: -1,
+        idcId: this.dc.id
+      }
+      this.assetList = []
+      this.$get('/asset', queryParams).then(response => {
+        if (response.code == 200) {
+          const temp = response.data.list
+          this.assetList = temp.map((item, index) => {
+            item.isOccupy = false
+            return item
+          })
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    }
+  },
+  watch: {
+    dc: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this.queryAssetList()
       }
     }
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
index 95aea7d57..00a17ee4c 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -152,7 +152,7 @@
                   <el-tooltip placement="top" effect="light" popper-class="tags-pop transparent-pop">
                     <div slot="content">
                       <template v-if="scope.row[item.prop]">
-                        <div class="tab-tags-item" v-for="(value, key, index) in scope.row[item.prop]">
+                        <div v-for="(value, key, index) in scope.row[item.prop]" :key="index" class="tab-tags-item">
                           <div class="tag-item-key">{{key}}</div>
                           <div class="tag-item-value">{{value}}</div>
                         </div>
@@ -219,369 +219,365 @@
 </template>
 
 <script>
-  import subBox from "./subBox";
-  import loading from "../../loading";
-  import vm from "../../../../main";
-  export default {
-    name: "assetConfigTab",
-    components:{
-      'sub-box':subBox,
-      'loading':loading,
+import subBox from './subBox'
+import loading from '../../loading'
+export default {
+  name: 'assetConfigTab',
+  components: {
+    'sub-box': subBox,
+    loading: loading
+  },
+  props: {
+    index: {},
+    postAssetList: { type: Array, required: true },
+    assetSetting: { type: Object },
+    validateRepeatFunc: { type: Function }
+  },
+  data () {
+    return {
+      assetList: [],
+      assetValidate: false,
+      hostRepeat: false,
+      hostInvalid: false,
+      hostEmpty: false,
+      refreshTab: true,
+      tableLabels: [
+        {
+          label: 'ifIndex',
+          prop: 'ifindex',
+          width: 100,
+          required: true,
+          errRows: []
+        },
+        {
+          label: 'ifDescr',
+          prop: 'ifdescr',
+          width: 150,
+          required: false,
+          errRows: []
+        },
+        {
+          label: this.$t('config.dc.traffic.direction'),
+          prop: 'direction',
+          width: 200,
+          required: true,
+          errRows: []
+        },
+        {
+          label: this.$t('config.dc.traffic.tags'),
+          prop: 'tags',
+          required: false,
+          errRows: []
+        }
+      ],
+      ifIndexList: [],
+      ifDescMap: new Map(),
+      editTagsBox: { show: false, top: 0, left: 0 }, // param编辑弹框
+      tempTagsObj: [],
+      showTags: [],
+      showTagInput: false,
+      newTag: { key: '', value: '' },
+      hostTimer: null,
+      ifIndexError: false
+    }
+  },
+  created () {
+    this.assetList = Object.assign([], this.postAssetList)
+    this.showTags = Object.assign([], this.assetSetting.tags)
+  },
+  methods: {
+    clearAssetInput () {
+      this.resetComponet()
     },
-    props:{
-      index:{},
-      postAssetList:{type:Array,required:true},
-      assetSetting:{type:Object},
-      validateRepeatFunc:{type:Function},
+    refreshTabFunc () {
+      this.refreshTab = false
+      this.$nextTick(() => {
+        this.refreshTab = true
+      })
     },
-    data(){
-      return {
-        assetList:[],
-        assetValidate:false,
-        hostRepeat:false,
-        hostInvalid:false,
-        hostEmpty:false,
-        refreshTab:true,
-        tableLabels:[
-          {
-            label:'ifIndex',
-            prop:'ifindex',
-            width:100,
-            required:true,
-            errRows:[],
-          },
-          {
-            label:'ifDescr',
-            prop:'ifdescr',
-            width:150,
-            required:false,
-            errRows:[],
-          },
-          {
-            label:this.$t('config.dc.traffic.direction'),
-            prop:'direction',
-            width:200,
-            required:true,
-            errRows:[],
-          },
-          {
-            label:this.$t('config.dc.traffic.tags'),
-            prop:'tags',
-            required:false,
-            errRows:[],
-          },
-        ],
-        ifIndexList:[],
-        ifDescMap:new Map(),
-        editTagsBox: {show: false, top: 0, left: 0,}, //param编辑弹框
-        tempTagsObj:[],
-        showTags:[],
-        showTagInput:false,
-        newTag:{key:'',value:''},
-        hostTimer:null,
-        ifIndexError:false,
+    resetComponet () {
+      this.ifIndexList = []
+      this.assetSetting.assetId = null
+      this.assetSetting.configs = []
+      this.assetSetting.configs.push({
+        direction: [],
+        ifindex: null,
+        ifdescr: ' ',
+        tags: {},
+        edit: true
+      })
+      this.tableLabels = this.tableLabels.map(item => {
+        item.errRows = []
+        return item
+      })
+    },
+    ifIndexChange (ifIndex, row) {
+      this.$set(row, 'ifdescr', this.ifDescMap.get('ifDescr.' + ifIndex))
+    },
+    assetChanged () {
+      if (!this.assetSetting || this.assetSetting.assetId == null) {
+        return
+      }
+      this.assetValidate = false
+      this.assetSetting.configs = [
+        {
+          direction: [],
+          ifindex: null,
+          ifdescr: ' ',
+          tags: {},
+          edit: true
+        }
+      ]
+      this.queryInterfaceInfos(this.assetSetting.assetId, true)
+    },
+    queryInterfaceInfos (skipCommit = false) {
+      // this.$refs.loading.startLoading();
+      const queryParams = {
+        operation: 'walk',
+        host: this.assetSetting.host,
+        port: this.assetSetting.port,
+        version: this.assetSetting.version,
+        community: this.assetSetting.community,
+        oid: '1.3.6.1.2.1.2.2.1',
+        auth: this.assetSetting.auth
+      }
+      this.$post('/mib/browser', queryParams).then(response => {
+        this.ifIndexList = []
+        this.ifDescMap.clear()
+        if (response.code == 200) {
+          const resultList = response.data.list
+          const ifIndexList = resultList.filter(item => {
+            return /if(?:Index)\.\d+/.test(item.name)
+          })
+
+          this.ifIndexList = ifIndexList.map(item => {
+            return { label: item.value, value: item.value, isOccupy: false }
+          })
+
+          const ifDescrList = resultList.filter(item => {
+            return /if(?:Descr)\.\d+/.test(item.name)
+          })
+          this.ifDescrList = ifDescrList.filter(item => {
+            return this.ifDescMap.set(item.name, item.value)
+          })
+          this.commitAdd(skipCommit)
+          // this.$refs.loading.endLoading();
+        } else {
+          // this.$refs.loading.endLoading();
+          console.error(response)
+          // this.$message.error(response.msg)
+        }
+      })
+    },
+    loadIfIndex (queryString, cb) {
+      let result = Object.assign([], this.ifIndexList)
+      result = result.filter(item => {
+        const temp = this.assetSetting.configs.find(c => {
+          return c.ifindex == item.value
+        })
+        return typeof temp === 'undefined'
+      })
+      cb(result)
+    },
+    queryAssetHosts (queryString, cb) {
+      const param = {
+        pageSize: -1,
+        host: queryString
+      }
+      this.$get('/asset', param).then(response => {
+        if (response.code == 200) {
+          const data = response.data.list
+          const result = data.map(item => {
+            return { label: item.host, value: item.host }
+          })
+          cb(result)
+        } else {
+          cb()
+          console.error(response)
+        }
+      })
+    },
+    popShow () {
+
+    },
+    popHide () {
+      this.queryInterfaceInfos(true)
+    },
+    showInput () {
+      this.showTagInput = true
+    },
+    handleInputConfirm () {
+
+    },
+    ifIndexInputChange (ifindex, row, index) {
+      if (this.ifIndexList && this.ifIndexList.length > 0) {
+        // let temp=this.ifIndexList.find(item=>{
+        //   return item.value == ifindex;
+        // })
+        // if(!temp){
+        //   this.ifIndexError=true;
+        //   return ;
+        // }else{
+        //   this.ifIndexError=false;
+        // }
+        this.ifIndexChange(ifindex, row)
+        const tmp = this.assetSetting.configs.find((item, i) => {
+          return i != index && item.ifindex == ifindex
+        })
+        if (tmp) {
+          this.ifIndexError = true
+        } else {
+          this.ifIndexError = false
+        }
+      } else {
+        this.ifIndexError = false
       }
     },
-    created() {
-      this.assetList=Object.assign([],this.postAssetList);
-      this.showTags=Object.assign([],this.assetSetting.tags)
+    hostInputChange (value) {
+      if (this.hostTimer) {
+        clearTimeout(this.hostTimer)
+      }
+      this.hostTimer = setTimeout(() => {
+        this.validateHostRepeat(value)
+        this.validateHostValid(value)
+        if (!this.hostEmpty && !this.hostRepeat && !this.hostInvalid) {
+          this.queryInterfaceInfos(true)
+        }
+      }, 500)
     },
-    methods:{
-      clearAssetInput:function(){
-        this.resetComponet();
-      },
-      refreshTabFunc:function(){
-        this.refreshTab=false;
-        this.$nextTick(()=>{
-          this.refreshTab=true;
-        });
-      },
-      resetComponet:function(){
-        this.ifIndexList=[];
-        this.assetSetting.assetId=null;
-        this.assetSetting.configs=[];
-        this.assetSetting.configs.push({
-          direction:[],
-          ifindex:null,
-          ifdescr:' ',
-          tags:{},
-          edit:true,
-        })
-        this.tableLabels=this.tableLabels.map(item=>{
-          item.errRows=[];
-          return item;
-        })
-      },
-      ifIndexChange:function(ifIndex,row){
-        this.$set(row,'ifdescr',this.ifDescMap.get('ifDescr.'+ifIndex))
-      },
-      assetChanged:function(){
-        if(!this.assetSetting||this.assetSetting.assetId == null){
-          return ;
-        }
-        this.assetValidate=false;
-        this.assetSetting.configs=[
-          {
-            direction:[],
-            ifindex:null,
-            ifdescr:' ',
-            tags:{},
-            edit:true,
-          }
-        ]
-        this.queryInterfaceInfos(this.assetSetting.assetId,true);
-      },
-      queryInterfaceInfos:function(skipCommit=false){
-        // this.$refs.loading.startLoading();
-        let queryParams={
-          operation:'walk',
-          host:this.assetSetting.host,
-          port:this.assetSetting.port,
-          version:this.assetSetting.version,
-          community:this.assetSetting.community,
-          oid:'1.3.6.1.2.1.2.2.1',
-          auth:this.assetSetting.auth,
-        }
-        this.$post('/mib/browser',queryParams).then(response=>{
-          this.ifIndexList=[];
-          this.ifDescMap.clear();
-          if(response.code == 200){
-            let resultList=response.data.list;
-            let ifIndexList=resultList.filter(item=>{
-              return /if(?:Index)\.\d+/.test(item.name);
-            })
-
-            this.ifIndexList=ifIndexList.map(item=>{
-              return {label:item.value,value:item.value,isOccupy:false};
-            })
-
-            let ifDescrList=resultList.filter(item=>{
-              return /if(?:Descr)\.\d+/.test(item.name);
-            })
-            this.ifDescrList=ifDescrList.filter(item=>{
-              this.ifDescMap.set(item.name,item.value)
-            })
-            this.commitAdd(skipCommit);
-            // this.$refs.loading.endLoading();
-          }else{
-            // this.$refs.loading.endLoading();
-            console.error(response);
-            // this.$message.error(response.msg)
-          }
-        })
-
-      },
-      loadIfIndex:function(queryString,cb){
-        let result=Object.assign([],this.ifIndexList);
-        result=result.filter(item=>{
-          let temp=this.assetSetting.configs.find(c=>{
-            return c.ifindex == item.value;
-          })
-          return typeof temp == "undefined";
-        })
-        cb(result)
-      },
-      queryAssetHosts:function(queryString,cb){
-        let param={
-          pageSize:-1,
-          host:queryString,
-        }
-        this.$get('/asset',param).then(response=>{
-          if(response.code == 200){
-            let data=response.data.list;
-            let result=data.map(item=>{
-              return {label:item.host,value:item.host}
-            })
-            cb(result)
-          }else{
-            cb([]);
-            console.error(response)
-          }
-        })
-      },
-      popShow() {
-
-      },
-      popHide() {
-        this.queryInterfaceInfos(true);
-      },
-      showInput:function(){
-        this.showTagInput=true;
-      },
-      handleInputConfirm:function(){
-
-      },
-      ifIndexInputChange:function(ifindex,row,index){
-        if(this.ifIndexList && this.ifIndexList.length>0){
-          // let temp=this.ifIndexList.find(item=>{
-          //   return item.value == ifindex;
-          // })
-          // if(!temp){
-          //   this.ifIndexError=true;
-          //   return ;
-          // }else{
-          //   this.ifIndexError=false;
-          // }
-          this.ifIndexChange(ifindex,row)
-          let tmp=this.assetSetting.configs.find((item,i)=>{
-            return i != index && item.ifindex == ifindex;
-          })
-          if(tmp){
-            this.ifIndexError=true;
-            return ;
-          }else{
-            this.ifIndexError=false;
-          }
-        }else{
-          this.ifIndexError=false;
-        }
-      },
-      hostInputChange:function(value){
-        if(this.hostTimer){
-          clearTimeout(this.hostTimer);
-        }
-        this.hostTimer=setTimeout(()=>{
-          this.validateHostRepeat(value);
-          this.validateHostValid(value);
-          if(!this.hostEmpty&&!this.hostRepeat&&!this.hostInvalid){
-            this.queryInterfaceInfos(true);
-          }
-        },500)
-      },
-      validateHostEmpty:function(){
-        this.hostEmpty=!this.assetSetting.host||this.assetSetting.host == '';
-      },
-      validateHostValid:function(host){
-        if(host==''){
-          return false
-        }
-        const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
-        if (hostReg.test(host)) {
-          this.hostInvalid=false;
+    validateHostEmpty () {
+      this.hostEmpty = !this.assetSetting.host || this.assetSetting.host == ''
+    },
+    validateHostValid (host) {
+      if (host == '') {
+        return false
+      }
+      const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+      if (hostReg.test(host)) {
+        this.hostInvalid = false
+      } else {
+        this.hostInvalid = true
+      }
+    },
+    validateHostRepeat (host) {
+      if (!this.validateRepeatFunc(host, this.index)) {
+        this.hostRepeat = true
+      } else {
+        this.hostRepeat = false
+      }
+    },
+    changeRowEditState (row, column, event) {
+      if (this.validateRows()) {
+        this.commitAdd(false)
+        if (row.edit == true) {
+          this.$set(row, 'edit', false)
         } else {
-          this.hostInvalid=true;
+          this.$set(row, 'edit', true)
         }
-      },
-      validateHostRepeat:function(host){
-        if(!this.validateRepeatFunc(host,this.index)){
-          this.hostRepeat=true;
-        }else{
-          this.hostRepeat=false;
-        }
-      },
-      changeRowEditState:function(row,column,event){
-        if(this.validateRows()){
-          this.commitAdd(false);
-          if(row.edit == true){
-            this.$set(row,'edit',false)
-          }else{
-            this.$set(row,'edit',true)
-          }
-
-        }
-      },
-      validateRows:function(){
-        let validateFlag=true;
-        validateFlag=this.assetSetting && this.assetSetting.host != '' ;
-        if(!validateFlag){
-          this.assetValidate=true;
-          return validateFlag;
-        }
-        this.assetValidate=false
-        this.tableLabels.forEach(item=>{
-          item.errRows=[];
-        })
-        this.assetSetting.configs.forEach((config,index)=>{
-          this.tableLabels.forEach(label=>{
-            let value=config[label.prop]
-            let required=label.required
-            if(required &&(!value || (typeof value =='string' && value == '')||(value instanceof Array && value.length<1))){
-              validateFlag=false
-              label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
-            }else{
-              if(label.prop == 'ifindex'){
-                if(this.ifIndexList && this.ifIndexList.length>0) {
-                  let temp = this.ifIndexList.find(item => {
-                    return item.value == value;
-                  })
-                  if(!temp){
-                    validateFlag=false
-                    label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
-                  }
+      }
+    },
+    validateRows () {
+      let validateFlag = true
+      validateFlag = this.assetSetting && this.assetSetting.host != ''
+      if (!validateFlag) {
+        this.assetValidate = true
+        return validateFlag
+      }
+      this.assetValidate = false
+      this.tableLabels.forEach(item => {
+        item.errRows = []
+      })
+      this.assetSetting.configs.forEach((config, index) => {
+        this.tableLabels.forEach(label => {
+          const value = config[label.prop]
+          const required = label.required
+          if (required && (!value || (typeof value === 'string' && value == '') || (value instanceof Array && value.length < 1))) {
+            validateFlag = false
+            label.errRows.push(index) // 保存有错误的行的index，通过行列唯一定位有错误的输入框
+          } else {
+            if (label.prop == 'ifindex') {
+              if (this.ifIndexList && this.ifIndexList.length > 0) {
+                const temp = this.ifIndexList.find(item => {
+                  return item.value == value
+                })
+                if (!temp) {
+                  validateFlag = false
+                  label.errRows.push(index) // 保存有错误的行的index，通过行列唯一定位有错误的输入框
                 }
               }
             }
-          })
-        })
-        if(this.ifIndexError){
-          validateFlag=false;
-        }
-        return validateFlag;
-      },
-      isError:function(columnErrRows,rowIndex){
-        return columnErrRows.includes(rowIndex);
-      },
-      commitAdd:function(skipChangeEditState=false){
-        this.resetIfIndexOccupyState();
-        this.assetSetting.configs=this.assetSetting.configs.map((config)=>{
-          if(!skipChangeEditState){
-            this.$set(config,'edit',false)
           }
-          this.changeIfIndexOccupyState(config.ifindex,true);
-          return config
         })
-      },
-      addTabRow:function(){
-        let validateFlag=this.validateRows();
-        if(validateFlag){
-          this.commitAdd();
-          this.assetSetting.configs.push({
-            direction:[],
-            ifindex:null,
-            ifdescr:' ',
-            tags:{},
-            edit:true,
-          })
-        }
-      },
-      delTabRow:function(index,row){
-        if(this.assetSetting.configs.length>1){
-          this.assetSetting.configs.splice(index,1);
-          if(row.edit == true && this.ifIndexError == true){
-            this.ifIndexError=false;
-          }
-          this.changeIfIndexOccupyState(row.ifindex,false)
-        }
-      },
-      resetIfIndexOccupyState:function(){
-        this.ifIndexList=this.ifIndexList.map(item=>{
-          item.isOccupy=false;
-          return item;
-        })
-      },
-      changeIfIndexOccupyState:function(ifindex,state){
-        this.ifIndexList=this.ifIndexList.map(item=>{
-          if(item.value == ifindex){
-            item.isOccupy=state;
-          }
-          return item;
-        })
-      },
-      delSelf:function(){
-        this.$emit('delSelf',this.index)
-      },
-      showEditTagsBox:function(show,index,row,e){
-        if(this.assetSetting.host != '' && row.edit == true){
-          this.$refs.subBox.showEditTagsBox(show,this.assetSetting.configs,index,e);
-        }
-      },
+      })
+      if (this.ifIndexError) {
+        validateFlag = false
+      }
+      return validateFlag
     },
-    mounted() {
-      if(this.assetSetting&&this.assetSetting.host&&this.assetSetting.host != ''){
-        this.queryInterfaceInfos(true);
+    isError (columnErrRows, rowIndex) {
+      return columnErrRows.includes(rowIndex)
+    },
+    commitAdd (skipChangeEditState = false) {
+      this.resetIfIndexOccupyState()
+      this.assetSetting.configs = this.assetSetting.configs.map((config) => {
+        if (!skipChangeEditState) {
+          this.$set(config, 'edit', false)
+        }
+        this.changeIfIndexOccupyState(config.ifindex, true)
+        return config
+      })
+    },
+    addTabRow () {
+      const validateFlag = this.validateRows()
+      if (validateFlag) {
+        this.commitAdd()
+        this.assetSetting.configs.push({
+          direction: [],
+          ifindex: null,
+          ifdescr: ' ',
+          tags: {},
+          edit: true
+        })
+      }
+    },
+    delTabRow (index, row) {
+      if (this.assetSetting.configs.length > 1) {
+        this.assetSetting.configs.splice(index, 1)
+        if (row.edit == true && this.ifIndexError == true) {
+          this.ifIndexError = false
+        }
+        this.changeIfIndexOccupyState(row.ifindex, false)
+      }
+    },
+    resetIfIndexOccupyState () {
+      this.ifIndexList = this.ifIndexList.map(item => {
+        item.isOccupy = false
+        return item
+      })
+    },
+    changeIfIndexOccupyState (ifindex, state) {
+      this.ifIndexList = this.ifIndexList.map(item => {
+        if (item.value == ifindex) {
+          item.isOccupy = state
+        }
+        return item
+      })
+    },
+    delSelf () {
+      this.$emit('delSelf', this.index)
+    },
+    showEditTagsBox (show, index, row, e) {
+      if (this.assetSetting.host != '' && row.edit == true) {
+        this.$refs.subBox.showEditTagsBox(show, this.assetSetting.configs, index, e)
       }
     }
+  },
+  mounted () {
+    if (this.assetSetting && this.assetSetting.host && this.assetSetting.host != '') {
+      this.queryInterfaceInfos(true)
+    }
   }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index b9bdf41f7..737ab62bc 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -120,7 +120,7 @@
 <!--                           时间计划-->
                             <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'select'&&val.id==5">
                                 <ul>
-                                    <li v-for="item in schlist" @click="selectSul(item.name)">{{item.name}}</li>
+                                    <li v-for="(item, i) in schlist" :key="i" @click="selectSul(item.name)">{{item.name}}</li>
                                 </ul>
                             </div>
                           <!--endpoint 状态-->
@@ -193,134 +193,134 @@
 </template>
 
 <script>
-    import searchSelectInfo from "./searchSelectInfo"; //搜索框组件--下拉框内容
-    export default {
-        name: "index",
-        data() {
-            return {
-                selectDom: {top: '', tempTop: '', show: true}, // 选择弹框的位置
-                clearSearchShow: false,
-                select_conditionsName:'',
-                selectInfoList: searchSelectInfo,
-                select_title: '',
-                other: '',
-                localStorage_display: true,
-                input_list: true,
-                change_sreach_show: true,
-                select_list: [], //当前的搜索条件和值
-                historyList: [],
-                actionSelect:[],
-                dcSelect: [], //数据中心
-                assetSelect: [], //资产
-                projectSelect: [],
-                moduleSelect: [],
-                modelSelect: [],
-                gnameList:[],
-                schemaTypeSelect:[], //日志检索Protocol下拉菜单
-                TypeSelect:[],//Protocol二层下拉菜单
-                secondShow:'',//二层显示控制
-                input_sreach: '',
-                sreach_num: 0,
-                searchLabelList: [ //下拉列表里的选项
-                ],
-                bool: false,
-                no_condition: '',
-                //历史记录列表
-                history_once: [],
-                name:"",
-                id:"",
-                schedata:{
-                    name:'',
-                    isValid:1,
-                    pageSize:30,
-                    pageNo:1
-                },
-                schlist:[],
-                timeFrame: [new Date(new Date() - 1 * 60 * 60 * 1000), new Date()],
-                dataBackG:true,
-                delBool : false,
-                searchStyleNum:-1,
-                isSearchNum :-1,
-                search_select_style_num:-1,
-                keyBool : false,
-                delnum :0,
-                delcriteriaBool:false,
-                selectInfo:false,
-                disabaled:true,
-                downBool:false,
-                where:this.$route.path
-            }
-        },
-        watch: {
-          defaultValue: {
-            immediate: true,
-            handler(n) {
-              if (n) {
-                this.$nextTick(() => {
-                  if (this.defaultItem) {
-                    if (this.defaultItem == 'alertMessageState' && this.defaultValue) {
-                      this.searchLabelList.forEach((item, index) => {
-                        if (item.id == 12) {
-                          this.searchLabelList.splice(index, 1);
-                        }
-                      });
-                      this.select_list.push({
-                        name: this.$t('alert.list.state'),
-                        type: 'select',
-                        label: 'state',
-                        disabled: false,
-                        val: this.$t('alert.list.pending'),
-                        valnum: 1
-                      });
-                      this.input_sreach = '';
-                      this.sreach_num = this.select_list.length;
-                      this.change_sreach_show = false;
-                      this.input_list = true;
-                      this.select();
-                    }
+import searchSelectInfo from './searchSelectInfo' // 搜索框组件--下拉框内容
+export default {
+  name: 'index',
+  data () {
+    return {
+      selectDom: { top: '', tempTop: '', show: true }, // 选择弹框的位置
+      clearSearchShow: false,
+      select_conditionsName: '',
+      selectInfoList: searchSelectInfo,
+      select_title: '',
+      other: '',
+      localStorage_display: true,
+      input_list: true,
+      change_sreach_show: true,
+      select_list: [], // 当前的搜索条件和值
+      historyList: [],
+      actionSelect: [],
+      dcSelect: [], // 数据中心
+      assetSelect: [], // 资产
+      projectSelect: [],
+      moduleSelect: [],
+      modelSelect: [],
+      gnameList: [],
+      schemaTypeSelect: [], // 日志检索Protocol下拉菜单
+      TypeSelect: [], // Protocol二层下拉菜单
+      secondShow: '', // 二层显示控制
+      input_sreach: '',
+      sreach_num: 0,
+      searchLabelList: [ // 下拉列表里的选项
+      ],
+      bool: false,
+      no_condition: '',
+      // 历史记录列表
+      history_once: [],
+      name: '',
+      id: '',
+      schedata: {
+        name: '',
+        isValid: 1,
+        pageSize: 30,
+        pageNo: 1
+      },
+      schlist: [],
+      timeFrame: [new Date(new Date() - 1 * 60 * 60 * 1000), new Date()],
+      dataBackG: true,
+      delBool: false,
+      searchStyleNum: -1,
+      isSearchNum: -1,
+      search_select_style_num: -1,
+      keyBool: false,
+      delnum: 0,
+      delcriteriaBool: false,
+      selectInfo: false,
+      disabaled: true,
+      downBool: false,
+      where: this.$route.path
+    }
+  },
+  watch: {
+    defaultValue: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          this.$nextTick(() => {
+            if (this.defaultItem) {
+              if (this.defaultItem == 'alertMessageState' && this.defaultValue) {
+                this.searchLabelList.forEach((item, index) => {
+                  if (item.id == 12) {
+                    this.searchLabelList.splice(index, 1)
                   }
-                });
+                })
+                this.select_list.push({
+                  name: this.$t('alert.list.state'),
+                  type: 'select',
+                  label: 'state',
+                  disabled: false,
+                  val: this.$t('alert.list.pending'),
+                  valnum: 1
+                })
+                this.input_sreach = ''
+                this.sreach_num = this.select_list.length
+                this.change_sreach_show = false
+                this.input_list = true
+                this.select()
               }
             }
-          },
-          inTransform: {
-            immediate: true,
-            handler(n) {
-              let listsK = document.querySelectorAll(".input_list");
-              listsK.forEach((item, index) => {
-                item.style.display = "none";
-              });
-              let listsV = document.querySelectorAll(".select_info_list");
-              listsV.forEach((item, index) => {
-                item.style.display = "none";
-              });
-              /*if (n) {
+          })
+        }
+      }
+    },
+    inTransform: {
+      immediate: true,
+      handler (n) {
+        const listsK = document.querySelectorAll('.input_list')
+        listsK.forEach((item, index) => {
+          item.style.display = 'none'
+        })
+        const listsV = document.querySelectorAll('.select_info_list')
+        listsV.forEach((item, index) => {
+          item.style.display = 'none'
+        })
+        /* if (n) {
                 this.selectDom.tempTop = this.selectDom.top;
                 this.selectDom.top = '36px';
               } else {
                 this.selectDom.top = this.selectDom.tempTop;
-              }*/
-              setTimeout(() => {
-                listsK.forEach((item, index) => {
-                  item.style.display = "";
-                });
-                listsV.forEach((item, index) => {
-                  item.style.display = "";
-                });
-              }, 500);
-            }
-          },
-          select_list: {
-            //监听下拉列表
-            handler(newData, oldData) {
-              this.$refs.searchScrollbar.update();
-              if (newData.length == 0) {
-                this.change_sreach_show = true;
-                this.clearSearchShow = false;
-              } else {
-                this.clearSearchShow = true;
-              }
-              /*if (this.$route.path.indexOf("alertList") > -1 || this.$route.path.indexOf("alertConfig") > -1) {
+              } */
+        setTimeout(() => {
+          listsK.forEach((item, index) => {
+            item.style.display = ''
+          })
+          listsV.forEach((item, index) => {
+            item.style.display = ''
+          })
+        }, 500)
+      }
+    },
+    select_list: {
+      // 监听下拉列表
+      handler (newData, oldData) {
+        this.$refs.searchScrollbar.update()
+        if (newData.length == 0) {
+          this.change_sreach_show = true
+          this.clearSearchShow = false
+        } else {
+          this.clearSearchShow = true
+        }
+        /* if (this.$route.path.indexOf("alertList") > -1 || this.$route.path.indexOf("alertConfig") > -1) {
                 // 处理alertType--asset联动问题：
                 // 当已选alertType为asset时，将可选列表中的asset的disabled恢复为false；
                 // 当已选alertType不为asset时，将可选列表中的asset的disabled设为true，若有已选的asset，则删除；
@@ -362,656 +362,654 @@
                     }
                   }
                 }
-              }*/
+              } */
+      }
+    },
+    no_condition: {
+      handler (newData, oldData) {
+        if (newData != '') {
+          this.input_list = true
+        }
+      }
+    },
+    searchMsg: {
+      immediate: true,
+      handler (n) {
+        // console.log(n);
+        if (n) {
+          n.searchLabelList.forEach(item => {
+            if (item.id === 27 && item.type === 'idc' && item.label === 'idcId') {
+              this.getDcData()
             }
-          },
-          no_condition: {
-              handler(newData, oldData) {
-                  if (newData != '') {
-                      this.input_list = true
-                  }
-              }
-          },
-          searchMsg:{
-            immediate: true,
-            handler(n){
-             //console.log(n);
-             if(n){
-               n.searchLabelList.forEach(item=>{
-                 if(item.id===27&&item.type==='idc'&&item.label==='idcId'){
-                   this.getDcData()
-                 }
-               })
-             }
-            }
-          },
-        },
-        props:['searchMsg','defaultItem','defaultValue','inTransform','position','single'],
-        methods: {
-              //dc
-              clearSearch() {
-                this.select_list = [];
-              },
-              clickout(){
-                this.input_list=true;
-              },
-              selectObject(column, selectItem, e) {
-                this.stop_click(e);
-                for (let i = 0; i < this.select_list.length; i++) {
-                  let val = this.select_list[i];
-                  if (val.type == 'dc' && selectItem.searchType == 'dc'){
-                    val.val = selectItem.name;
-                    val.valnum = selectItem.id;
-                    val.valString = '';
-                  } else if (val.type == 'project' && selectItem.searchType == 'project') {
-                    val.val = selectItem.name;
-                    val.valnum = selectItem.id;
-                    val.valString = '';
-                  } else if (val.type == 'module' && selectItem.searchType == 'module') {
-                    val.val = selectItem.name;
-                    val.valnum = selectItem.id;
-                    val.valString = '';
-                  } else if (val.type == 'asset' && selectItem.searchType == 'asset') {
-                    val.val = selectItem.host;
-                    val.valnum = selectItem.id;
-                    val.valString = '';
-                  }
-                }
-                //this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
-                this.input_sreach = '';
-                this.sreach_num = this.select_list.length;
-                this.change_sreach_show = true;
-                this.input_list = false;
-                var _this = this;
-                setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                setTimeout(function () {
-                  _this.getHeight();
-                });
-                /*this.$nextTick(() => {
+          })
+        }
+      }
+    }
+  },
+  props: ['searchMsg', 'defaultItem', 'defaultValue', 'inTransform', 'position', 'single'],
+  methods: {
+    // dc
+    clearSearch () {
+      this.select_list = []
+    },
+    clickout () {
+      this.input_list = true
+    },
+    selectObject (column, selectItem, e) {
+      this.stop_click(e)
+      for (let i = 0; i < this.select_list.length; i++) {
+        const val = this.select_list[i]
+        if (val.type == 'dc' && selectItem.searchType == 'dc') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type == 'project' && selectItem.searchType == 'project') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type == 'module' && selectItem.searchType == 'module') {
+          val.val = selectItem.name
+          val.valnum = selectItem.id
+          val.valString = ''
+        } else if (val.type == 'asset' && selectItem.searchType == 'asset') {
+          val.val = selectItem.host
+          val.valnum = selectItem.id
+          val.valString = ''
+        }
+      }
+      // this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
+      this.input_sreach = ''
+      this.sreach_num = this.select_list.length
+      this.change_sreach_show = true
+      this.input_list = false
+      const _this = this
+      setTimeout('document.getElementById("one-input").focus()', 500)
+      setTimeout(function () {
+        _this.getHeight()
+      })
+      /* this.$nextTick(() => {
                   this.$refs.searchScrollbar.update();
-                });*/
-              },
-               //一层下拉点击
-              tr_selectTypeInfo(val){
-                  this.TypeSelect=[];
-                  val.data.length!=0?this.TypeSelect.push(val.data[0]):'';
-                  val.data.length!=0?this.secondShow=true:''
-              },
-               //二层下拉点击
-              tr_selectProtocolInfo(val){
-                  this.select_list=[];
-                  this.select_list.push({
-                    name: val.name,
-                    // id:id,
-                    type:val.type,
-                    label:val.label,
-                    // disabled:disabled
-                  })
-                  this.change_sreach_show = false
-                  this.sreach_num = this.select_list.length-1
-                  this.input_list = !this.input_list
-                //   setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
-                  var _this = this
-                  setTimeout(function () {
-                    _this.getHeight()
-                  },)
-            },
-            Iskeywords(ind){
-              if(this.select_list[ind].id==29){
-                this.searchLabelList.forEach(val=>{
-                  if(val.id==30||val.id==31||val.id==32||val.id==33){
-                    val.disabled = false
-                  }
-                })
-              }else if(this.select_list[ind].id==30||this.select_list[ind].id==31||this.select_list[ind].id==32||this.select_list[ind].id==33){
-                this.searchLabelList.forEach(val=>{
-                  if(val.id==29){
-                    val.disabled = false
-                  }
-                })
-              }
-            },
-            getDcData() {
-              this.$get('idc', {pageNo: 1, pageSize: -1}).then(response => {
-                if (response.code === 200) {
-                  this.dcSelect = response.data.list;
-                  this.dcSelect.forEach((item, index) => {
-                    this.$set(item, 'searchType', 'dc');
-                  });
-                }
-              });
-            },
-            getAssetData() {
-              this.$get('asset', {pageNo: 1, pageSize: -1}).then(response => {
-                if (response.code === 200) {
-                  this.assetSelect = response.data.list;
-                  this.assetSelect.forEach((item, index) => {
-                    this.$set(item, 'searchType', 'asset');
-                  });
-                }
-              });
-            },
-            getModelData() {
-              this.$get('model', {pageNo: 1, pageSize: -1}).then(response => {
-                if (response.code === 200) {
-                  this.modelSelect = response.data.list;
-                  this.modelSelect.forEach((item, index) => {
-                    this.$set(item, 'searchType', 'model');
-                  });
-                }
-              });
-            },
-            getProjectData() {
-              this.$get('project', {pageNo: 1, pageSize: -1}).then(response => {
-                if (response.code === 200) {
-                  this.projectSelect = response.data.list;
-                  this.projectSelect.forEach((item, index) => {
-                    this.$set(item, 'searchType', 'project');
-                  });
-                }
-              });
-            },
-            getModuleData() {
-              this.$get('module', {pageNo: 1, pageSize: -1}).then(response => {
-                if (response.code === 200) {
-                  this.moduleSelect = response.data.list;
-                  this.moduleSelect.forEach((item, index) => {
-                    this.$set(item, 'searchType', 'module');
-                  });
-                }
-              });
-            },
-          getGnameList(){
-            this.$get('/expression/tmpl/gname').then(res=>{
-              if(res.code===200){
-                this.gnameList = res.data.list.map((item,index)=>{
-                  return {
-                    value:item,
-                    name:item,
-                    id:index,
-                  }
-                })
+                }); */
+    },
+    // 一层下拉点击
+    tr_selectTypeInfo (val) {
+      this.TypeSelect = []
+      val.data.length != 0 && this.TypeSelect.push(val.data[0])
+      val.data.length != 0 && (this.secondShow = true)
+    },
+    // 二层下拉点击
+    tr_selectProtocolInfo (val) {
+      this.select_list = []
+      this.select_list.push({
+        name: val.name,
+        // id:id,
+        type: val.type,
+        label: val.label
+        // disabled:disabled
+      })
+      this.change_sreach_show = false
+      this.sreach_num = this.select_list.length - 1
+      this.input_list = !this.input_list
+      //   setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
+      const _this = this
+      setTimeout(function () {
+        _this.getHeight()
+      })
+    },
+    Iskeywords (ind) {
+      if (this.select_list[ind].id == 29) {
+        this.searchLabelList.forEach(val => {
+          if (val.id == 30 || val.id == 31 || val.id == 32 || val.id == 33) {
+            val.disabled = false
+          }
+        })
+      } else if (this.select_list[ind].id == 30 || this.select_list[ind].id == 31 || this.select_list[ind].id == 32 || this.select_list[ind].id == 33) {
+        this.searchLabelList.forEach(val => {
+          if (val.id == 29) {
+            val.disabled = false
+          }
+        })
+      }
+    },
+    getDcData () {
+      this.$get('idc', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.dcSelect = response.data.list
+          this.dcSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'dc')
+          })
+        }
+      })
+    },
+    getAssetData () {
+      this.$get('asset', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.assetSelect = response.data.list
+          this.assetSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'asset')
+          })
+        }
+      })
+    },
+    getModelData () {
+      this.$get('model', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.modelSelect = response.data.list
+          this.modelSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'model')
+          })
+        }
+      })
+    },
+    getProjectData () {
+      this.$get('project', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.projectSelect = response.data.list
+          this.projectSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'project')
+          })
+        }
+      })
+    },
+    getModuleData () {
+      this.$get('module', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.moduleSelect = response.data.list
+          this.moduleSelect.forEach((item, index) => {
+            this.$set(item, 'searchType', 'module')
+          })
+        }
+      })
+    },
+    getGnameList () {
+      this.$get('/expression/tmpl/gname').then(res => {
+        if (res.code === 200) {
+          this.gnameList = res.data.list.map((item, index) => {
+            return {
+              value: item,
+              name: item,
+              id: index
+            }
+          })
+        }
+      })
+    },
+    // 点击确认选择下拉内容
+    tr_selectInfo (selectLabel, value, label, e) {
+      this.stop_click(e)
+      this.select_list.forEach(val => {
+        if (val.label == selectLabel) {
+          val.val = label
+          val.valnum = value
+        }
+      })
+      for (let i = 0; i < this.select_list.length; i++) {
+        if (this.select_list[i].label == selectLabel) {
+          this.select_list.splice(i, 1, Object.assign({}, this.select_list[i], { val: label, valnum: value }))
+          /* this.select_list[i].val = label;
+                    this.select_list[i].valnum = value; */
+        }
+      }
+      this.input_sreach = ''
+      this.sreach_num = this.select_list.length
+      this.change_sreach_show = true
+      this.input_list = false
+      const _this = this
+      setTimeout('document.getElementById("one-input").focus()', 500)
+      setTimeout(function () {
+        _this.getHeight()
+      })
+    },
+    // 点击确认value是string类型的下拉内容, param: 字段对象，选中的选项
+    stringSelectInfo (column, selectItem, e) {
+      this.stop_click(e)
+      this.select_list.forEach(val => {
+        if (val.label == column.label) {
+          val.val = selectItem.value
+          val.valString = selectItem.label
+        }
+      })
+      this.input_sreach = ''
+      this.sreach_num = this.select_list.length
+      this.change_sreach_show = true
+      this.input_list = false
+      const _this = this
+      setTimeout('document.getElementById("one-input").focus()', 500)
+      setTimeout(function () {
+        _this.getHeight()
+      })
+    },
+    // 点击历史记录图标
+    look_history (e) {
+      this.stop_click(e)
+      this.localStorage_display = !this.localStorage_display
+      this.restructure_historyDate()
+    },
+    backtime (t) {
+      const myDate = new Date(t)
+      const nt = myDate.getFullYear() + '-' + (myDate.getMonth() > 8 ? '' : 0) +
+                    (myDate.getMonth() + 1) + '-' + (myDate.getDate() > 9 ? '' : 0) +
+                    myDate.getDate() + ' ' +
+                    (myDate.getHours() > 9 ? '' : '0') + myDate.getHours() + ':' +
+                    (myDate.getMinutes() > 9 ? '' : 0) + myDate.getMinutes() + ':' +
+                    (myDate.getSeconds() > 9 ? '' : 0) + myDate.getSeconds()
+      return nt
+    },
+    changeDate () {
+      this.dataBackG = false
+      this.change_sreach_show = true
+      if (this.timeFrame != []) {
+        this.select_list[this.sreach_num].val = this.backtime(this.timeFrame[0]) + ' - ' + this.backtime(this.timeFrame[1])
+        this.input_sreach = ''
+        this.sreach_num++
+      }
+    },
+    // 选择时间计划
+    selectSul (name) {
+      this.change_sreach_show = true
+      this.select_list[this.sreach_num].val = name
+      this.input_sreach = ''
+      this.sreach_num++
+      this.getHeight()
+    },
+    // 点击搜索
+    select () {
+      const objectInfo = {}
+      this.change_sreach_show = true
+      this.name = '', this.id = ''
+      if (this.input_sreach != '') {
+        this.select_list[this.sreach_num].val = this.input_sreach
+        this.input_sreach = ''
+        this.sreach_num = this.select_list.length
+      }
+      // input有值  默认添加到name中
+      if (this.no_condition != '') {
+        const no_condition_bool = false; let no_condition_str = ''; const route = this.$route.path
+        if (this.select_list.length == 0) {
+          // 日志模块新增路由判断
+          if (route == '/Log_SecurityEventLogs' || route == '/Log_ProxyEventLogs' || route == '/Log_SesssionRecords' || route == '/Log_RadiusLogs') {
+            no_condition_str = 'logId'
+          } else if (route == '/Device_DeviceList') {
+            no_condition_str = 'sn'
+          } else if (route == '/system_PolicyConfigurationLog' || route == '/system_LoginLog') {
+            no_condition_str = 'modifyBy'
+          } else {
+            no_condition_str = 'name'
+          }
+          if (no_condition_str == 'name') {
+            // 处理空白输入时不可作为搜索条件
+            // this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'name'});
+            // this.searchLabelList.forEach((val,ind)=>{
+            //   if(val.id == 2){
+            //     this.searchLabelList.splice(ind,1);
+            //   }
+            // })
+          } else if (no_condition_str == 'modifyBy') {
+            this.select_list.push({ name: this.select_title.Operator, id: 6, type: 'input', val: this.no_condition, label: 'modifyBy' })
+            this.searchLabelList.forEach((val, ind) => {
+              if (val.id == 6) {
+                this.searchLabelList.splice(ind, 1)
               }
             })
-          },
-            //点击确认选择下拉内容
-            tr_selectInfo(selectLabel,value,label,e){
-                this.stop_click(e);
-                this.select_list.forEach(val=>{
-                    if(val.label == selectLabel){
-                        val.val = label;
-                        val.valnum = value;
-                    }
-                });
-                for (let i = 0; i < this.select_list.length; i++) {
-                  if (this.select_list[i].label == selectLabel) {
-                    this.select_list.splice(i, 1, Object.assign({}, this.select_list[i], {val: label, valnum: value}));
-                    /*this.select_list[i].val = label;
-                    this.select_list[i].valnum = value;*/
-                  }
+          } else if (no_condition_str == 'sn') {
+            this.select_list.push({ name: this.select_title.SN, id: 8, type: 'input', val: this.no_condition, label: 'sn' })
+            this.searchLabelList.forEach((val, ind) => {
+              if (val.id == 8) {
+                this.searchLabelList.splice(ind, 1)
+              }
+            })
+          } else if (no_condition_str == 'id') {
+            this.select_list.push({ name: this.select_title.Policy_ID, id: 1, type: 'input', val: this.no_condition, label: 'id' })
+            this.searchLabelList.forEach((val, ind) => {
+              if (val.id == 1) {
+                this.searchLabelList.splice(ind, 1)
+              }
+            })
+          } else if (no_condition_str == 'logId') { // 日志模块新增判断
+            this.select_list.push({ name: 'Log ID', type: 'input', label: 'Log Id', val: this.no_condition })
+            this.searchLabelList.forEach((val, ind) => {
+              if (val.id == 1) {
+                this.searchLabelList.splice(ind, 1)
+              }
+            })
+          }
+          this.sreach_num++
+        } else {
+          const no_condition_bool = false; let no_condition_str = ''; const route = this.$route.path; let bool = true
+          if (route == '/Log_SesssionRecords' || route == '/Log_EventLogs') {
+            no_condition_str = 'id'
+          } else if (route == '/Device_DeviceList') {
+            no_condition_str = 'sn'
+          } else if (route == '/system_PolicyConfigurationLog' || route == '/system_UserManagement' || route == '/system_LoginLog') {
+            no_condition_str = 'modifyBy'
+          } else {
+            no_condition_str = 'name'
+          }
+          this.select_list.forEach(val => {
+            if (val.label == no_condition_str) {
+              bool = false
+              val.val += ',' + this.no_condition
+            }
+          })
+          if (bool) {
+            this.searchLabelList.forEach((val, ind) => {
+              if (val.label == no_condition_str) {
+                val.val = this.no_condition
+                this.select_list.push(val)
+                this.searchLabelList.splice(ind, 1)
+              }
+            })
+            this.sreach_num++
+          }
+        }
+        this.no_condition = ''
+      }
+      let labelBool = true
+      this.select_list.forEach(val => {
+        if (typeof (val.val) !== 'undefined' && val.val) {
+          if (val.type == 'select') {
+            if (val.label == 'alertType' || val.label == 'promType') {
+              objectInfo.type = val.valnum
+            } else if (val.label == 'assetState') {
+              objectInfo.state = val.valnum
+            } else if (typeof (val.valnum) === 'undefined' || val.valnum == '') {
+              this.selectInfoList[val.label].forEach(item => {
+                if (item.label == val.val) {
+                  labelBool = false
+                  objectInfo[val.label] = item.value
                 }
-                this.input_sreach = '';
-                this.sreach_num = this.select_list.length;
-                this.change_sreach_show = true;
-                this.input_list = false;
-                var _this = this;
-                setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                setTimeout(function () {
-                  _this.getHeight();
-                });
-            },
-            //点击确认value是string类型的下拉内容, param: 字段对象，选中的选项
-            stringSelectInfo(column, selectItem, e){
-              this.stop_click(e);
-              this.select_list.forEach(val=>{
-                if(val.label == column.label){
-                  val.val = selectItem.value;
-                  val.valString = selectItem.label;
-                }
-              });
-              this.input_sreach = '';
-              this.sreach_num = this.select_list.length;
-              this.change_sreach_show = true;
-              this.input_list = false;
-              var _this = this;
-              setTimeout("document.getElementById(\"one-input\").focus()", 500);
-              setTimeout(function () {
-                _this.getHeight();
-              });
-            },
-            // 点击历史记录图标
-            look_history(e){
-                this.stop_click(e);
-                this.localStorage_display=!this.localStorage_display;
-                this.restructure_historyDate();
-            },
-            backtime(t){
-                let myDate=new Date(t);
-                let nt=myDate.getFullYear()+'-'+(myDate.getMonth()>8?'':0)
-                    +(myDate.getMonth()+1)+'-'+(myDate.getDate()>9?'':0)
-                    + myDate.getDate()+' '
-                    +(myDate.getHours()>9?'':'0')+myDate.getHours()+':'
-                    +(myDate.getMinutes()>9?'':0)+myDate.getMinutes()+':'
-                    +(myDate.getSeconds()>9?'':0)+myDate.getSeconds();
-                return nt;
-            },
-            changeDate(){
-                this.dataBackG = false
-                this.change_sreach_show = true
-                if(this.timeFrame!=[]){
-                    this.select_list[this.sreach_num].val = this.backtime(this.timeFrame[0])+' - '+this.backtime(this.timeFrame[1])
-                    this.input_sreach = ''
-                    this.sreach_num++
-                }
-            },
-            //选择时间计划
-            selectSul(name){
-                this.change_sreach_show = true;
-                this.select_list[this.sreach_num].val = name;
-                this.input_sreach = '';
-                this.sreach_num++;
-                this.getHeight();
-            },
-            //点击搜索
-            select() {
-                let objectInfo = {};
-                this.change_sreach_show = true;
-                this.name = '', this.id = '';
-                if (this.input_sreach != '') {
-                  this.select_list[this.sreach_num].val = this.input_sreach;
-                    this.input_sreach = '';
-                    this.sreach_num=this.select_list.length;
-                }
-                //input有值  默认添加到name中
-                if (this.no_condition != '') {
-                  let no_condition_bool = false,no_condition_str = '',route = this.$route.path
-                    if(this.select_list.length==0){
-                      //日志模块新增路由判断
-                      if(route == '/Log_SecurityEventLogs'||route == '/Log_ProxyEventLogs'||route=='/Log_SesssionRecords'||route=='/Log_RadiusLogs'){
-                        no_condition_str = 'logId';
-                      }else if(route == '/Device_DeviceList'){
-                        no_condition_str = 'sn';
-                      }else if(route=='/system_PolicyConfigurationLog' || route=='/system_LoginLog'){
-                        no_condition_str='modifyBy';
-                      }else {
-                        no_condition_str='name';
-                      }
-                      if(no_condition_str=='name'){
-                        // 处理空白输入时不可作为搜索条件
-                        // this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'name'});
-                        // this.searchLabelList.forEach((val,ind)=>{
-                        //   if(val.id == 2){
-                        //     this.searchLabelList.splice(ind,1);
-                        //   }
-                        // })
-                      }else if(no_condition_str=='modifyBy'){
-                        this.select_list.push({name: this.select_title.Operator, id:6, type:'input',val:this.no_condition,label:'modifyBy'});
-                        this.searchLabelList.forEach((val,ind)=>{
-                          if(val.id == 6){
-                            this.searchLabelList.splice(ind,1);
-                          }
-                        })
-                      }else if(no_condition_str=='sn'){
-                        this.select_list.push({name: this.select_title.SN, id:8, type:'input',val:this.no_condition,label:'sn'});
-                        this.searchLabelList.forEach((val,ind)=>{
-                          if(val.id == 8){
-                            this.searchLabelList.splice(ind,1);
-                          }
-                        })
-                      }else if(no_condition_str=='id'){
-                        this.select_list.push({name: this.select_title.Policy_ID, id:1, type:'input',val:this.no_condition,label:'id'});
-                        this.searchLabelList.forEach((val,ind)=>{
-                          if(val.id == 1){
-                            this.searchLabelList.splice(ind,1);
-                          }
-                        })
-                      }else if(no_condition_str=='logId'){ //日志模块新增判断
-                        this.select_list.push({  name: 'Log ID',  type: 'input', label: 'Log Id', val:this.no_condition,});
-                        this.searchLabelList.forEach((val,ind)=>{
-                          if(val.id == 1){
-                            this.searchLabelList.splice(ind,1);
-                          }
-                        })
-                      }
-                        this.sreach_num++;
-                    }else {
-                      let no_condition_bool = false,no_condition_str = '',route = this.$route.path,bool = true;
-                      if(route == '/Log_SesssionRecords'||route == '/Log_EventLogs'){
-                        no_condition_str = 'id';
-                      }else if(route == '/Device_DeviceList'){
-                        no_condition_str = 'sn';
-                      }else if(route=='/system_PolicyConfigurationLog' || route=='/system_UserManagement' || route=='/system_LoginLog'){
-                        no_condition_str='modifyBy';
-                      }else {
-                        no_condition_str='name';
-                      }
-                        this.select_list.forEach(val => {
-                            if(val.label==no_condition_str){
-                                bool = false;
-                                val.val += ','+this.no_condition;
-                            }
-                        });
-                        if(bool){
-                            this.searchLabelList.forEach((val,ind)=>{
-                                if(val.label == no_condition_str){
-                                  val.val = this.no_condition;
-                                  this.select_list.push(val);
-                                  this.searchLabelList.splice(ind,1);
-                                }
-                            });
-                            this.sreach_num++;
-                        }
-                    }
-                    this.no_condition = '';
-                }
-                let labelBool = true;
-                this.select_list.forEach(val=>{
-                    if (typeof (val.val) !== 'undefined' && val.val) {
-                        if(val.type == 'select'){
-                            if (val.label == 'alertType' || val.label == 'promType') {
-                                objectInfo.type = val.valnum;
-                            } else if (val.label == 'assetState') {
-                                objectInfo.state = val.valnum;
-                            } else if(typeof(val.valnum) == "undefined"||val.valnum == ''){
-                                this.selectInfoList[val.label].forEach(item=>{
-                                    if(item.label == val.val){
-                                        labelBool = false;
-                                        objectInfo[val.label] = item.value;
-                                    }
-                                })
-                                if(labelBool){
-                                    objectInfo[val.label] = val.val;
-                                }
-                            }else {
-                                objectInfo[val.label] = val.valnum;
-                            }
-                        } else if(val.type == 'selectSelf'){
-                          objectInfo[val.label] = val.valnum;
-                        } else if(val.type == 'selectAction'){ //新增日志判断
-                          objectInfo[val.label] = val.valnum;
-                        } else if (val.type == 'dc') {
-                          objectInfo.idcId = val.valnum;
-                        } else if (val.type == 'asset') {
-                          objectInfo.asset = val.val;
-                        } else if (val.type == 'module') {
-                          objectInfo.moduleId = val.valnum;
-                        } else if (val.type == 'project') {
-                          objectInfo.projectId = val.valnum;
-                        }else if (val.type == 'idc') {
-                          objectInfo.dcId = val.valnum;
-                        } else {
-                            objectInfo[val.label] = val.val;
-                        }
-                    }
-                });
-                this.getHeight()
-                //搜索完成后存储在本地历史记录中
-                if(this.select_list.length!=0){
-                    if (JSON.parse(localStorage.getItem('nz-history-'+this.where)) == undefined || JSON.parse(localStorage.getItem('nz-history-'+this.where)) == []) {
-                        this.historyList.unshift(this.select_list);
-                        localStorage.setItem('nz-history-'+this.where, JSON.stringify(this.historyList));
-                    } else {
-                        this.historyList = JSON.parse(localStorage.getItem('nz-history-'+this.where));
-                        this.historyList.unshift(this.select_list);
-                        if (this.historyList.length > 10) {
-                            this.historyList.length = 10;
-                        }
-                        localStorage.setItem('nz-history-'+this.where, JSON.stringify(this.historyList));
-                    }
-                }
-                this.input_list = true;
-                this.restructure_historyDate();
+              })
+              if (labelBool) {
+                objectInfo[val.label] = val.val
+              }
+            } else {
+              objectInfo[val.label] = val.valnum
+            }
+          } else if (val.type == 'selectSelf') {
+            objectInfo[val.label] = val.valnum
+          } else if (val.type == 'selectAction') { // 新增日志判断
+            objectInfo[val.label] = val.valnum
+          } else if (val.type == 'dc') {
+            objectInfo.idcId = val.valnum
+          } else if (val.type == 'asset') {
+            objectInfo.asset = val.val
+          } else if (val.type == 'module') {
+            objectInfo.moduleId = val.valnum
+          } else if (val.type == 'project') {
+            objectInfo.projectId = val.valnum
+          } else if (val.type == 'idc') {
+            objectInfo.dcId = val.valnum
+          } else {
+            objectInfo[val.label] = val.val
+          }
+        }
+      })
+      this.getHeight()
+      // 搜索完成后存储在本地历史记录中
+      if (this.select_list.length != 0) {
+        if (JSON.parse(localStorage.getItem('nz-history-' + this.where)) == undefined || JSON.parse(localStorage.getItem('nz-history-' + this.where)) == []) {
+          this.historyList.unshift(this.select_list)
+          localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
+        } else {
+          this.historyList = JSON.parse(localStorage.getItem('nz-history-' + this.where))
+          this.historyList.unshift(this.select_list)
+          if (this.historyList.length > 10) {
+            this.historyList.length = 10
+          }
+          localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
+        }
+      }
+      this.input_list = true
+      this.restructure_historyDate()
 
-                this.$emit("search", objectInfo);
-            },
-            //清空历史记录
-            clear_history() {
-                this.historyList = [];
-                this.history_once = [];
-                localStorage.setItem('nz-history-'+this.where, JSON.stringify(this.historyList));
-            },
-            //再次点击之前的历史记录
-            select_history(ind,e) {
-                this.stop_click(e);
-                this.input_list = true;
-                this.change_sreach_show = true;
-                this.localStorage_display = !this.localStorage_display;
-                this.select_list = [];
-                JSON.parse(localStorage.getItem('nz-history-'+this.where)).splice(ind,1);
-                this.select_list = JSON.parse(JSON.stringify(this.history_once[ind]));
-                this.sreach_num = this.select_list.length;
-                this.select_list.forEach(val => {
-                    this.searchLabelList.forEach((item, index) => {
-                        if (val.id == item.id) {
-                            this.searchLabelList.splice(index, 1);
-                        }
-                    })
-                });
-                this.select()
-            },
-            // 获取历史记录  数据进行处理以便循环展示
-            restructure_historyDate() {
-                if (localStorage.getItem('nz-history-'+this.where) !== undefined && localStorage.getItem('nz-history-'+this.where) !== null) {
-                    this.history_once = JSON.parse(localStorage.getItem('nz-history-'+this.where));
-                }
-            },
-            clear_search_list(e){
-                var keyCode = window.event ? e.keyCode : e.which;
-            },
-            //监听输入框鼠标抬起事件
-            enter_one(e){
-                var keyCode = window.event ? e.keyCode : e.which;
-                if(keyCode == 40){
-                    if(this.searchStyleNum<this.searchLabelList.length-1){
-                      var disabledNum = 0;
-                      this.searchLabelList.forEach(val=>{
-                        if(val.disabled){
-                          disabledNum++;
-                        }
-                      });
-                      this.isSearchNum=this.searchStyleNum;
-                      this.isSearchNum++;
-                      if(!(this.searchLabelList[this.isSearchNum].disabled)){
-                        this.searchStyleNum++;
-                      }else {
-                        this.searchStyleNum+=disabledNum+1;
-                      }
-                    }
-                    if(this.searchStyleNum>=7){
-                      document.getElementById('input_list').scrollTop+=28;
-                    }
-                }
-                if(keyCode == 38){
-                  if(this.searchStyleNum>=0){
-                    var disabledNum = 0;
-                    this.searchLabelList.forEach(val=>{
-                      if(val.disabled){
-                        disabledNum++;
-                      }
-                    })
-                    this.isSearchNum=this.searchStyleNum;
-                    if(this.isSearchNum>0){
-                      this.isSearchNum--
-                    }
-                    if(!(this.searchLabelList[this.isSearchNum].disabled)){
-                      this.searchStyleNum--
-                    }else {
-                      this.searchStyleNum-=disabledNum+1
-                    }
-                  }
-                  if(this.searchStyleNum<=this.searchLabelList.length-8){
-                    document.getElementById('input_list').scrollTop -= 28
-                  }
-                }
-                if(this.no_condition==''){
-                    if(!this.keyBool){
-                        if(keyCode==8){
-                            let arr = this.select_list
-                            if(!this.delBool){
-                                if(this.input_sreach==''){
-                                    for(var i = arr.length-1 ; i>=0 ; i--){
-                                        this.input_list = true
-                                        this.change_sreach_show = false
-                                        this.sreach_num = i
-                                        this.input_sreach = arr[i].val
-                                        setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
-                                        this.delBool = true
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                if (keyCode == 13) {
-                    if(this.searchStyleNum<=0){
-                        this.select()
-                    }else {
-                        let val = this.searchLabelList[this.searchStyleNum].name,
-                            ind = this.searchStyleNum,
-                            id= this.searchLabelList[this.searchStyleNum].id,
-                            type= this.searchLabelList[this.searchStyleNum].type,
-                            label= this.searchLabelList[this.searchStyleNum].label,
-                          disabled= this.searchLabelList[this.searchStyleNum].disabled,
-                          readonly= this.searchLabelList[this.searchStyleNum].readonly;
-                        this.searchStyleNum = -1
-                        this.select_name(val, ind, id, type,label,disabled,readonly)
-                    }
-
-                }
-            },
-            // input框监听是按删除还是回车
-            enter(val, e) {
-                //console.log(val);
-              var keyCode = window.event ? e.keyCode : e.which;
-              if(val == 'ID'&&keyCode == 13){
-                let id = /^[0-9]*$/
-                if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
-                  //如果有不正确的值 进行删除
-                  this.input_sreach = ''
-                  this.$message.error(this.other.delErrorId)
-                  return false;
+      this.$emit('search', objectInfo)
+    },
+    // 清空历史记录
+    clear_history () {
+      this.historyList = []
+      this.history_once = []
+      localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
+    },
+    // 再次点击之前的历史记录
+    select_history (ind, e) {
+      this.stop_click(e)
+      this.input_list = true
+      this.change_sreach_show = true
+      this.localStorage_display = !this.localStorage_display
+      this.select_list = []
+      JSON.parse(localStorage.getItem('nz-history-' + this.where)).splice(ind, 1)
+      this.select_list = JSON.parse(JSON.stringify(this.history_once[ind]))
+      this.sreach_num = this.select_list.length
+      this.select_list.forEach(val => {
+        this.searchLabelList.forEach((item, index) => {
+          if (val.id == item.id) {
+            this.searchLabelList.splice(index, 1)
+          }
+        })
+      })
+      this.select()
+    },
+    // 获取历史记录  数据进行处理以便循环展示
+    restructure_historyDate () {
+      if (localStorage.getItem('nz-history-' + this.where) !== undefined && localStorage.getItem('nz-history-' + this.where) !== null) {
+        this.history_once = JSON.parse(localStorage.getItem('nz-history-' + this.where))
+      }
+    },
+    clear_search_list (e) {
+      const keyCode = window.event ? e.keyCode : e.which
+    },
+    // 监听输入框鼠标抬起事件
+    enter_one (e) {
+      const keyCode = window.event ? e.keyCode : e.which
+      if (keyCode == 40) {
+        if (this.searchStyleNum < this.searchLabelList.length - 1) {
+          var disabledNum = 0
+          this.searchLabelList.forEach(val => {
+            if (val.disabled) {
+              disabledNum++
+            }
+          })
+          this.isSearchNum = this.searchStyleNum
+          this.isSearchNum++
+          if (!(this.searchLabelList[this.isSearchNum].disabled)) {
+            this.searchStyleNum++
+          } else {
+            this.searchStyleNum += disabledNum + 1
+          }
+        }
+        if (this.searchStyleNum >= 7) {
+          document.getElementById('input_list').scrollTop += 28
+        }
+      }
+      if (keyCode == 38) {
+        if (this.searchStyleNum >= 0) {
+          var disabledNum = 0
+          this.searchLabelList.forEach(val => {
+            if (val.disabled) {
+              disabledNum++
+            }
+          })
+          this.isSearchNum = this.searchStyleNum
+          if (this.isSearchNum > 0) {
+            this.isSearchNum--
+          }
+          if (!(this.searchLabelList[this.isSearchNum].disabled)) {
+            this.searchStyleNum--
+          } else {
+            this.searchStyleNum -= disabledNum + 1
+          }
+        }
+        if (this.searchStyleNum <= this.searchLabelList.length - 8) {
+          document.getElementById('input_list').scrollTop -= 28
+        }
+      }
+      if (this.no_condition == '') {
+        if (!this.keyBool) {
+          if (keyCode == 8) {
+            const arr = this.select_list
+            if (!this.delBool) {
+              if (this.input_sreach == '') {
+                for (let i = arr.length - 1; i >= 0; i--) {
+                  this.input_list = true
+                  this.change_sreach_show = false
+                  this.sreach_num = i
+                  this.input_sreach = arr[i].val
+                  setTimeout('document.getElementById("sreach_input").focus()', 500)
+                  this.delBool = true
+                  break
                 }
               }
-              if(keyCode!==8){
-                this.delBool = false
-                this.delcriteriaBool = false
+            }
+          }
+        }
+      }
+      if (keyCode == 13) {
+        if (this.searchStyleNum <= 0) {
+          this.select()
+        } else {
+          const val = this.searchLabelList[this.searchStyleNum].name
+          const ind = this.searchStyleNum
+          const id = this.searchLabelList[this.searchStyleNum].id
+          const type = this.searchLabelList[this.searchStyleNum].type
+          const label = this.searchLabelList[this.searchStyleNum].label
+          const disabled = this.searchLabelList[this.searchStyleNum].disabled
+          const readonly = this.searchLabelList[this.searchStyleNum].readonly
+          this.searchStyleNum = -1
+          this.select_name(val, ind, id, type, label, disabled, readonly)
+        }
+      }
+    },
+    // input框监听是按删除还是回车
+    enter (val, e) {
+      // console.log(val);
+      const keyCode = window.event ? e.keyCode : e.which
+      if (val == 'ID' && keyCode == 13) {
+        const id = /^[0-9]*$/
+        if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
+          // 如果有不正确的值 进行删除
+          this.input_sreach = ''
+          this.$message.error(this.other.delErrorId)
+          return false
+        }
+      }
+      if (keyCode !== 8) {
+        this.delBool = false
+        this.delcriteriaBool = false
+      }
+      if (this.delBool) {
+        if (keyCode == 8) {
+          if (this.input_sreach == '') {
+            this.searchMsg.searchLabelList.forEach((val, k) => {
+              if (this.select_list[this.sreach_num].id == val.id) {
+                this.searchLabelList.splice(k + 1, 0, val)
+                this.Iskeywords(this.sreach_num)
               }
-               if(this.delBool){
-                   if(keyCode==8){
-                       if(this.input_sreach==''){
-                           this.searchMsg.searchLabelList.forEach((val, k) => {
-                               if (this.select_list[this.sreach_num].id == val.id) {
-                                   this.searchLabelList.splice(k + 1, 0, val)
-                                 this.Iskeywords(this.sreach_num)
-                               }
-                           })
-                           this.select_list.splice(this.sreach_num, 1)
-                           this.change_sreach_show=true
-                           setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                           this.input_list = false
-                           this.delBool = false
-                       }
-                   }
-               }else {
-                   if(keyCode==8){
-                       if(this.delcriteriaBool){
-                           this.searchMsg.searchLabelList.forEach((val, k) => {
-                               if (this.select_list[this.sreach_num].id == val.id) {
-                                   this.searchLabelList.splice(k + 1, 0, val)
-                                 this.Iskeywords(this.sreach_num)
-                               }
-                           })
-                           this.select_list.splice(this.sreach_num, 1)
-                           this.change_sreach_show=true
-                           setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                           this.input_list = false
-                           this.delcriteriaBool = false
-                       }else {
-                           if(this.input_sreach==''){
-                               this.delcriteriaBool = true
-                           }
-                       }
-                   }
+            })
+            this.select_list.splice(this.sreach_num, 1)
+            this.change_sreach_show = true
+            setTimeout('document.getElementById("one-input").focus()', 500)
+            this.input_list = false
+            this.delBool = false
+          }
+        }
+      } else {
+        if (keyCode == 8) {
+          if (this.delcriteriaBool) {
+            this.searchMsg.searchLabelList.forEach((val, k) => {
+              if (this.select_list[this.sreach_num].id == val.id) {
+                this.searchLabelList.splice(k + 1, 0, val)
+                this.Iskeywords(this.sreach_num)
+              }
+            })
+            this.select_list.splice(this.sreach_num, 1)
+            this.change_sreach_show = true
+            setTimeout('document.getElementById("one-input").focus()', 500)
+            this.input_list = false
+            this.delcriteriaBool = false
+          } else {
+            if (this.input_sreach == '') {
+              this.delcriteriaBool = true
+            }
+          }
+        }
+      }
 
-               }
-
-               if(keyCode == 38||keyCode == 40){
-                   if(this.select_list[this.sreach_num].type !== 'select'){
-                     if(this.input_sreach!==''){
-                       this.zhezhao_click()
-                       setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                       this.input_list = false
-                     }
-                   }else {
-                     if(keyCode == 40){
-                       this.selectInfo = true
-                       if(this.search_select_style_num<this.selectInfoList[this.select_list[this.sreach_num].label].length-1){
-                         this.search_select_style_num++
-                       }
-                     }
-                     if(keyCode == 38){
-                       this.selectInfo = true
-                       if(this.search_select_style_num>=0){
-                         this.search_select_style_num--
-                       }
-                     }
-                   }
-               }else if(keyCode == 13) {
-                 this.searchMsg.zheze_none = true
-                 //回车键
-                 if (!this.selectInfo) {
-                   this.select()
-                 }else {
-                   this.selectInfo  = false
-                   this.tr_selectInfo(this.select_list[this.sreach_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].value, e)
-                 }
-               }
-            },
-            // 清空已输入的搜索条件
-            clear_input(e) {
-                this.stop_click(e)
-                this.no_condition = ''
-                this.input_sreach = ''
-                this.select_list = []
-                this.searchLabelList = []
-                JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
-                    this.searchLabelList.push(val)
-                })
-              this.$nextTick(() => {
-                this.$refs.searchScrollbar.update();
-              });
-            },
-            //修改已有参数
-            update_sreach(ind,e) {
-                //if(this.select_list[ind].id==6||this.select_list[ind].id==28){
-                if(false){
-                    this.sreach_num = ind
-                    this.downBool = false
-                    this.change_sreach_show = false
-                    this.input_list = true
-                }else {
-                    this.input_list = true
-                    this.change_sreach_show = false
-                    this.sreach_num = ind
-                    this.input_sreach = this.select_list[ind].val
-                    if(this.select_list[ind].type=='input'){
-                        this.downBool = true
-                    }else {
-                        this.downBool = false
-                    }
-                    setTimeout("document.getElementById(\"sreach_input\").focus()", 50);
-                    this.getHeight()
-                    this.searchMsg.zheze_none = false
-                }
-            },
-            //删除要搜索的条件
-            close_selcet_list(ind, e){
-                if (e) {
-                  this.stop_click(e)
-                }
-                // 处理alertType--asset联动问题：删除alertType时，将asset也删除
-                /*if (this.select_list[ind].label == 'alertType') {
+      if (keyCode == 38 || keyCode == 40) {
+        if (this.select_list[this.sreach_num].type !== 'select') {
+          if (this.input_sreach !== '') {
+            this.zhezhao_click()
+            setTimeout('document.getElementById("one-input").focus()', 500)
+            this.input_list = false
+          }
+        } else {
+          if (keyCode == 40) {
+            this.selectInfo = true
+            if (this.search_select_style_num < this.selectInfoList[this.select_list[this.sreach_num].label].length - 1) {
+              this.search_select_style_num++
+            }
+          }
+          if (keyCode == 38) {
+            this.selectInfo = true
+            if (this.search_select_style_num >= 0) {
+              this.search_select_style_num--
+            }
+          }
+        }
+      } else if (keyCode == 13) {
+        this.searchMsg.zheze_none = true
+        // 回车键
+        if (!this.selectInfo) {
+          this.select()
+        } else {
+          this.selectInfo = false
+          this.tr_selectInfo(this.select_list[this.sreach_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].value, e)
+        }
+      }
+    },
+    // 清空已输入的搜索条件
+    clear_input (e) {
+      this.stop_click(e)
+      this.no_condition = ''
+      this.input_sreach = ''
+      this.select_list = []
+      this.searchLabelList = []
+      JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
+        this.searchLabelList.push(val)
+      })
+      this.$nextTick(() => {
+        this.$refs.searchScrollbar.update()
+      })
+    },
+    // 修改已有参数
+    update_sreach (ind, e) {
+      // if(this.select_list[ind].id==6||this.select_list[ind].id==28){
+      if (false) {
+        this.sreach_num = ind
+        this.downBool = false
+        this.change_sreach_show = false
+        this.input_list = true
+      } else {
+        this.input_list = true
+        this.change_sreach_show = false
+        this.sreach_num = ind
+        this.input_sreach = this.select_list[ind].val
+        if (this.select_list[ind].type == 'input') {
+          this.downBool = true
+        } else {
+          this.downBool = false
+        }
+        setTimeout('document.getElementById("sreach_input").focus()', 50)
+        this.getHeight()
+        this.searchMsg.zheze_none = false
+      }
+    },
+    // 删除要搜索的条件
+    close_selcet_list (ind, e) {
+      if (e) {
+        this.stop_click(e)
+      }
+      // 处理alertType--asset联动问题：删除alertType时，将asset也删除
+      /* if (this.select_list[ind].label == 'alertType') {
                   for (let i = 0; i < this.select_list.length; i++) {
                     if (this.select_list[i].label == 'asset') {
                       this.close_selcet_list(i);
@@ -1024,174 +1022,172 @@
                       break;
                     }
                   }
-                }*/
-                this.searchMsg.searchLabelList.forEach((val, key) => {
-                    if (this.select_list[ind].id == val.id) {
-                        this.searchLabelList.splice(key+1 , 0, val);
-                        this.Iskeywords(ind)
-                    }
-                });
-                this.select_list.splice(ind, 1);
-                this.sreach_num--;
-            },
-            //阻止冒泡事件
-            stop_click(e) {
-                if (e) {
-                  e.cancelBubble = true;
-                  e.stopPropagation();
+                } */
+      this.searchMsg.searchLabelList.forEach((val, key) => {
+        if (this.select_list[ind].id == val.id) {
+          this.searchLabelList.splice(key + 1, 0, val)
+          this.Iskeywords(ind)
+        }
+      })
+      this.select_list.splice(ind, 1)
+      this.sreach_num--
+    },
+    // 阻止冒泡事件
+    stop_click (e) {
+      if (e) {
+        e.cancelBubble = true
+        e.stopPropagation()
+      }
+    },
+    // 点击遮罩层
+    zhezhao_click () {
+      if (this.input_sreach != '') {
+        if (!this.searchMsg.zheze_none) {
+          if (this.input_sreach != '') {
+            this.change_sreach_show = true
+            let IDsplit
+            const id = /^[0-9]*$/
+            const bool = true
+            if (this.select_list[this.sreach_num].id == 1) {
+              // id==1  判断是不是搜索ID    如果是ID 会出现搜索多个ID  分割ID
+              IDsplit = this.input_sreach.split(',')
+              // 循环分割出来的ID  判断输入的每个ID是否正确
+              for (let i = IDsplit.length - 1; i >= 0; i--) {
+                if (!id.test(IDsplit[i]) || IDsplit[i] > 2147483647) {
+                  // 如果有不正确的值 进行删除
+                  IDsplit.splice(i, 1)
+                  this.$message.error(this.other.delErrorId)
                 }
-            },
-            //点击遮罩层
-            zhezhao_click() {
-                if(this.input_sreach!=''){
-                  if(!this.searchMsg.zheze_none){
-                    if (this.input_sreach!='') {
-                      this.change_sreach_show = true
-                      let IDsplit,
-                        id = /^[0-9]*$/,
-                        bool = true
-                      if (this.select_list[this.sreach_num].id == 1) {
-                        //id==1  判断是不是搜索ID    如果是ID 会出现搜索多个ID  分割ID
-                        IDsplit = this.input_sreach.split(',')
-                        //循环分割出来的ID  判断输入的每个ID是否正确
-                        for (let i = IDsplit.length - 1; i >= 0; i--) {
-                          if (!id.test(IDsplit[i]) || IDsplit[i] > 2147483647) {
-                            //如果有不正确的值 进行删除
-                            IDsplit.splice(i, 1)
-                            this.$message.error(this.other.delErrorId)
-                          }
-                          if (IDsplit[i] == '') {
-                            IDsplit.splice(i, 1)
-                          }
-                        }
-                        this.input_sreach = ''
-                        //从新拼接ID内容
-                        IDsplit.forEach(val => {
-                          this.input_sreach += val + ','
-                        })
-                        this.input_sreach = this.input_sreach.substr(0, this.input_sreach.length - 1)
-                        if(this.input_sreach!=''){
-                          this.select_list[this.sreach_num].val = this.input_sreach
-                          this.input_sreach = ''
-                          this.sreach_num++
-                          this.sreach_num = this.select_list.length
-                        }else {
-                          this.sreach_num = 0
-                          this.change_sreach_show = false
-                        }
-                      }else {
-                        this.select_list[this.sreach_num].val = this.input_sreach
-                        this.input_sreach = ''
-                        this.sreach_num = this.select_list.length
-                      }
-                    }else {
-                      let Bool = false
-                      this.select_list.forEach(val=>{
-                        if(val.val==''||val.val==undefined){
-                          Bool = true
-                        }
-                      })
-                      if(Bool){
-                        this.sreach_num = this.select_list.length-1
-                      }else {
-                        this.sreach_num = this.select_list.length
-                      }
-
-                    }
-                    if (this.no_condition != '') {
-                      this.change_sreach_show = true
-                      if(this.select_list.length==0){
-                        this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
-                        this.searchLabelList.forEach((val,ind)=>{
-                          if(val.id == 2){
-                            this.searchLabelList.splice(ind,1)
-                          }
-                        })
-                        this.sreach_num++
-                      }else {
-                        let bool = true
-                        this.select_list.forEach(val => {
-                          if(val.id==2){
-                            bool = false
-                            val.val += ','+this.no_condition
-                          }
-                        })
-                        if(bool){
-                          this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
-                          this.searchLabelList.forEach((val,ind)=>{
-                            if(val.id == 2){
-                              this.searchLabelList.splice(ind,1)
-                            }
-                          })
-                          this.sreach_num++
-                        }
-                      }
-                      this.no_condition = ''
-                      this.sreach_num = this.select_list.length
-                    }
-                    setTimeout("document.getElementById(\"one-input\").focus()", 500);
-                    this.input_list = !this.input_list
-                    var _this = this
-                    setTimeout(function () {
-                      _this.getHeight()
-                    },)
-                    this.searchMsg.zheze_none = true
-                  }
+                if (IDsplit[i] == '') {
+                  IDsplit.splice(i, 1)
                 }
-
-            },
-            //点击搜索框  显示搜索类型
-            read_input(e) {
-                e.cancelBubble = true;
-                e.stopPropagation();
-                this.getHeight();
-                this.input_list = !this.input_list;
-                this.getSelectPosition(e);
-            },
-            //点击选择 搜索类型
-            select_name(val, ind, id, type,label,disabled,readonly,e ) {
-                // if(id==43||id==45||id==48){  //根据id判断是否开启ip验证
-                //     this.select_conditionsName=true
-                // }
-              if(type=='input'){
-                this.downBool = true;
-              }else {
-                this.downBool = false;
               }
-              this.no_condition = '';
-              this.searchMsg.zheze_none = false;
-              if(!disabled){
-                // 下标为0 不再直接执行查询
-                // if (ind == 0) {
-                //   this.select()
-                // } else
-                  if(id == 7){
+              this.input_sreach = ''
+              // 从新拼接ID内容
+              IDsplit.forEach(val => {
+                this.input_sreach += val + ','
+              })
+              this.input_sreach = this.input_sreach.substr(0, this.input_sreach.length - 1)
+              if (this.input_sreach != '') {
+                this.select_list[this.sreach_num].val = this.input_sreach
+                this.input_sreach = ''
+                this.sreach_num++
+                this.sreach_num = this.select_list.length
+              } else {
+                this.sreach_num = 0
+                this.change_sreach_show = false
+              }
+            } else {
+              this.select_list[this.sreach_num].val = this.input_sreach
+              this.input_sreach = ''
+              this.sreach_num = this.select_list.length
+            }
+          } else {
+            let Bool = false
+            this.select_list.forEach(val => {
+              if (val.val == '' || val.val == undefined) {
+                Bool = true
+              }
+            })
+            if (Bool) {
+              this.sreach_num = this.select_list.length - 1
+            } else {
+              this.sreach_num = this.select_list.length
+            }
+          }
+          if (this.no_condition != '') {
+            this.change_sreach_show = true
+            if (this.select_list.length == 0) {
+              this.select_list.push({ name: 'Name', id: 2, type: 'input', val: this.no_condition, label: 'name' })
+              this.searchLabelList.forEach((val, ind) => {
+                if (val.id == 2) {
                   this.searchLabelList.splice(ind, 1)
-                  this.select_list.push({
-                    name: val,
-                    id:id,
-                    type:type,
-                    label:label,
-                    disabled:disabled,
-                    readonly
-                  })
-                  this.change_sreach_show = false
-                  this.input_list = !this.input_list
-                }else if(id==29){
-                  this.searchLabelList.splice(ind, 1)
-                  this.select_list.push({
-                    name: val,
-                    id:id,
-                    type:type,
-                    label:label,
-                    disabled:disabled,
-                    readonly
-                  })
-                  this.change_sreach_show = false
-                  this.sreach_num = this.select_list.length-1
-                  this.input_list = !this.input_list
-                  setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
-                 /* this.searchLabelList.forEach(val=>{
+                }
+              })
+              this.sreach_num++
+            } else {
+              let bool = true
+              this.select_list.forEach(val => {
+                if (val.id == 2) {
+                  bool = false
+                  val.val += ',' + this.no_condition
+                }
+              })
+              if (bool) {
+                this.select_list.push({ name: 'Name', id: 2, type: 'input', val: this.no_condition, label: 'name' })
+                this.searchLabelList.forEach((val, ind) => {
+                  if (val.id == 2) {
+                    this.searchLabelList.splice(ind, 1)
+                  }
+                })
+                this.sreach_num++
+              }
+            }
+            this.no_condition = ''
+            this.sreach_num = this.select_list.length
+          }
+          setTimeout('document.getElementById("one-input").focus()', 500)
+          this.input_list = !this.input_list
+          const _this = this
+          setTimeout(function () {
+            _this.getHeight()
+          })
+          this.searchMsg.zheze_none = true
+        }
+      }
+    },
+    // 点击搜索框  显示搜索类型
+    read_input (e) {
+      e.cancelBubble = true
+      e.stopPropagation()
+      this.getHeight()
+      this.input_list = !this.input_list
+      this.getSelectPosition(e)
+    },
+    // 点击选择 搜索类型
+    select_name (val, ind, id, type, label, disabled, readonly, e) {
+      // if(id==43||id==45||id==48){  //根据id判断是否开启ip验证
+      //     this.select_conditionsName=true
+      // }
+      if (type == 'input') {
+        this.downBool = true
+      } else {
+        this.downBool = false
+      }
+      this.no_condition = ''
+      this.searchMsg.zheze_none = false
+      if (!disabled) {
+        // 下标为0 不再直接执行查询
+        // if (ind == 0) {
+        //   this.select()
+        // } else
+        if (id == 7) {
+          this.searchLabelList.splice(ind, 1)
+          this.select_list.push({
+            name: val,
+            id: id,
+            type: type,
+            label: label,
+            disabled: disabled,
+            readonly
+          })
+          this.change_sreach_show = false
+          this.input_list = !this.input_list
+        } else if (id == 29) {
+          this.searchLabelList.splice(ind, 1)
+          this.select_list.push({
+            name: val,
+            id: id,
+            type: type,
+            label: label,
+            disabled: disabled,
+            readonly
+          })
+          this.change_sreach_show = false
+          this.sreach_num = this.select_list.length - 1
+          this.input_list = !this.input_list
+          setTimeout(document.getElementById('sreach_input').focus(), 500)
+          /* this.searchLabelList.forEach(val=>{
                     if(val.id==30||val.id==31||val.id==32||val.id==33){
                       val.disabled = true
                     }
@@ -1205,145 +1201,143 @@
                     type:type,
                     label:label,
                     disabled:disabled
-                  })*/
-                  this.change_sreach_show = false
-                  this.sreach_num = this.select_list.length-1
-                  this.input_list = !this.input_list
-                  setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
-                  /*this.searchLabelList.forEach(val=>{
+                  }) */
+          this.change_sreach_show = false
+          this.sreach_num = this.select_list.length - 1
+          this.input_list = !this.input_list
+          setTimeout('document.getElementById("sreach_input").focus()', 500)
+          /* this.searchLabelList.forEach(val=>{
                     if(val.id==29){
                       val.disabled = true
                     }
-                  })*/
-                }else {
-                  this.searchLabelList.splice(ind, 1);
-                  this.select_list.push({
-                    name: val,
-                    id:id,
-                    type:type,
-                    label:label,
-                    disabled:disabled,
-                    readonly
-                  });
-                  this.change_sreach_show = false;
-                  this.sreach_num = this.select_list.length-1;
-                  this.input_list = !this.input_list;
-                   if(id!==6&&id!==28){
-                       setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
-                   }
-                }
-                var _this = this
-                setTimeout(function () {
-                  _this.getHeight()
-                },)
-
-                // console.info(e.target.parentElement.parentElement.parentElement.getBoundingClientRect());
-              }
-            },
-            /*计算select弹框的位置*/
-            getSelectPosition(e) {
-              let inputListDom = this.getDomFromParents(e.target, 'input-center-box', 0);
-              if (inputListDom) {
-                this.$nextTick(() => {
-                  if (this.inTransform) {
-                    //this.selectDom.top = "36px";
-                  } else {
-                    let position = inputListDom.getBoundingClientRect();
-                    this.selectDom.top = position.top+36+'px';
-                  }
-                });
-              }
-            },
-            /*递归向上获取指定class的dom*/
-            getDomFromParents(dom, className, level) {
-              let parentClassNames = dom.parentElement.className;
-              if (parentClassNames.indexOf(className) == -1) {
-                if (level < 20 && dom.parentElement) { //限制20层，避免溢出
-                  return this.getDomFromParents(dom.parentElement, className, ++level);
-                } else {
-                  return false;
-                }
-              } else {
-                return dom.parentElement;
-              }
-            },
-            // 判断输入框的高度
-            getHeight(){
-                if(document.getElementById('search-ul').clientHeight<24||document.getElementById('input-center-box').clientHeight<24){
-                  document.getElementById('input-center-box').style.height = 27+'px'
-                  document.getElementById('search-ul').style.height = 21+"px"
-                }
-          },
-            chlick_sreach(e) {
-                this.stop_click(e)
-                this.searchMsg.zheze_none = false
-            },
-            // 时间计划
-            schelistget(){
-              this.schlist = []
-                this.$get("/schedule", this.schedata).then(data => {
-                    if (data.code == 200) {
-                        this.schlist = data.data.list
-                    }
-                })
-
-            },
-          close_search(e) {
-              this.selectDom.show = false;
-
+                  }) */
+        } else {
+          this.searchLabelList.splice(ind, 1)
+          this.select_list.push({
+            name: val,
+            id: id,
+            type: type,
+            label: label,
+            disabled: disabled,
+            readonly
+          })
+          this.change_sreach_show = false
+          this.sreach_num = this.select_list.length - 1
+          this.input_list = !this.input_list
+          if (id !== 6 && id !== 28) {
+            setTimeout('document.getElementById("sreach_input").focus()', 500)
           }
-        },
-        mounted() {
-            if(this.position){
-              this.where=this.$route.path + this.position
-            }
-            /*this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : '';
-            this.defaultValue != '' ? this.no_condition=this.defaultValue:'';*/
-            this.restructure_historyDate();
-            setTimeout(() => {
-              if(this.$route.path=='/Objects_Objects'){
-                this.schelistget();
-              }
-              if (this.$route.path == '/promServer') {
-                this.getDcData();
-              }
-              if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') {
-                this.getAssetData();
-              }
-              if (this.$route.path == '/alertList') {
-                this.getProjectData();
-                this.getModuleData();
-              }
-              if (this.$route.path == '/asset') {
-                this.getModelData();
-              }
-              if (this.$route.path == '/exprTemp') {
-                this.getGnameList();
-              }
-            }, 1000);
-            JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
-              if(val.name=='Protocol'){
-                  this.schemaTypeSelect=val.doc.data
-              }
-              if(val.prop=='common_action'){
-                this.actionSelect=val.doc.data
-              }
-              this.actionSelect.forEach((item)=>{
-                  item.id=item.code;
-                  item.label=val.label;
-                  item.name=val.label;
-              });
-              this.searchLabelList.push(val);
-            });
-            var _this = this;
-            document.onkeydown=function(event) {
-                var e = event || window.event || arguments.callee.caller.arguments[0];
-                if(e.keyCode==27){
-                    _this.close_search(e)
-                }
-            }
         }
+        const _this = this
+        setTimeout(function () {
+          _this.getHeight()
+        })
+
+        // console.info(e.target.parentElement.parentElement.parentElement.getBoundingClientRect());
+      }
+    },
+    /* 计算select弹框的位置 */
+    getSelectPosition (e) {
+      const inputListDom = this.getDomFromParents(e.target, 'input-center-box', 0)
+      if (inputListDom) {
+        this.$nextTick(() => {
+          if (this.inTransform) {
+            // this.selectDom.top = "36px";
+          } else {
+            const position = inputListDom.getBoundingClientRect()
+            this.selectDom.top = position.top + 36 + 'px'
+          }
+        })
+      }
+    },
+    /* 递归向上获取指定class的dom */
+    getDomFromParents (dom, className, level) {
+      const parentClassNames = dom.parentElement.className
+      if (parentClassNames.indexOf(className) == -1) {
+        if (level < 20 && dom.parentElement) { // 限制20层，避免溢出
+          return this.getDomFromParents(dom.parentElement, className, ++level)
+        } else {
+          return false
+        }
+      } else {
+        return dom.parentElement
+      }
+    },
+    // 判断输入框的高度
+    getHeight () {
+      if (document.getElementById('search-ul').clientHeight < 24 || document.getElementById('input-center-box').clientHeight < 24) {
+        document.getElementById('input-center-box').style.height = 27 + 'px'
+        document.getElementById('search-ul').style.height = 21 + 'px'
+      }
+    },
+    chlick_sreach (e) {
+      this.stop_click(e)
+      this.searchMsg.zheze_none = false
+    },
+    // 时间计划
+    schelistget () {
+      this.schlist = []
+      this.$get('/schedule', this.schedata).then(data => {
+        if (data.code == 200) {
+          this.schlist = data.data.list
+        }
+      })
+    },
+    close_search (e) {
+      this.selectDom.show = false
     }
+  },
+  mounted () {
+    if (this.position) {
+      this.where = this.$route.path + this.position
+    }
+    /* this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : '';
+            this.defaultValue != '' ? this.no_condition=this.defaultValue:''; */
+    this.restructure_historyDate()
+    setTimeout(() => {
+      if (this.$route.path == '/Objects_Objects') {
+        this.schelistget()
+      }
+      if (this.$route.path == '/promServer') {
+        this.getDcData()
+      }
+      if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') {
+        this.getAssetData()
+      }
+      if (this.$route.path == '/alertList') {
+        this.getProjectData()
+        this.getModuleData()
+      }
+      if (this.$route.path == '/asset') {
+        this.getModelData()
+      }
+      if (this.$route.path == '/exprTemp') {
+        this.getGnameList()
+      }
+    }, 1000)
+    JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
+      if (val.name == 'Protocol') {
+        this.schemaTypeSelect = val.doc.data
+      }
+      if (val.prop == 'common_action') {
+        this.actionSelect = val.doc.data
+      }
+      this.actionSelect.forEach((item) => {
+        item.id = item.code
+        item.label = val.label
+        item.name = val.label
+      })
+      this.searchLabelList.push(val)
+    })
+    const _this = this
+    document.onkeydown = function (event) {
+      const e = event || window.event || arguments.callee.caller.arguments[0]
+      if (e.keyCode == 27) {
+        _this.close_search(e)
+      }
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/common/searchInput2.vue b/nezha-fronted/src/components/common/searchInput2.vue
deleted file mode 100644
index 533bc4686..000000000
--- a/nezha-fronted/src/components/common/searchInput2.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: "searchInput2"
-  }
-</script>
-
-<style scoped>
-
-</style>
diff --git a/nezha-fronted/src/components/common/searchSelectInfo.vue b/nezha-fronted/src/components/common/searchSelectInfo.vue
index ac8bafa31..35efe09d4 100644
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -1,128 +1,128 @@
 <script>
-  import i18n from './i18n';
-  const searchSelectInfo = { // value: 传给后台的值；label：显示给用户看的值
-    severity: [ //告警级别
-      {
-        value: 'P1',
-        label: i18n.t("alert.config.P1")
-      },
-      {
-        value: 'P2',
-        label: i18n.t("alert.config.P2")
-      },
-      {
-        value: 'P3',
-        label: i18n.t("alert.config.P3")
-      }
-    ],
-    promType: [ //promServer类型
-      {
-        value: 1,
-        label: 'Global'
-      },
-      {
-        value: 2,
-        label: 'Per-Datacenter'
-      }
-    ],
-    alertType: [ //告警类型
-      {
-        value: 1,
-        label: i18n.t('alert.config.typeOption.project')
-      },
-      {
-        value: 2,
-        label: i18n.t('alert.config.typeOption.module')
-      },
-      {
-        value: 3,
-        label: i18n.t('alert.config.typeOption.asset')
-      }
-    ],
-    assetState: [ //资产入库/出库状态
-      {
-        value: 1,
-        label: i18n.t('asset.inStock')
-      }, {
-        value: 2,
-        label: i18n.t('asset.notInStock')
-      }, {
-        value: 3,
-        label: i18n.t('asset.suspended')
-      }
-    ],
-    endpointState: [ //资产入库/出库状态
-      {
-        value: 1,
-        label: 'UP'
-      }, {
-        value: 0,
-        label: 'DOWN'
-      }, {
-        value: 2,
-        label: 'SUSPENDED'
-      }
-    ],
-    pingStatus:[
-      {
-        value: '0',
-        label:i18n.t('asset.pingInactive')
-      },
-      {
-        value: '1',
-        label:i18n.t('asset.pingActive')
-      }
-    ],
-    operation: [
-      {
-        value: 'add',
-        label: i18n.t('config.operationlog.operations.add')
-      },
-      {
-        value: 'update',
-        label: i18n.t('config.operationlog.operations.update')
-      },
-      {
-        value: 'query',
-        label: i18n.t('config.operationlog.operations.query')
-      },
-      {
-        value: 'import',
-        label: i18n.t('config.operationlog.operations.import')
-      },
-      {
-        value: 'export',
-        label: i18n.t('config.operationlog.operations.export')
-      },
-      {
-        value: 'reset',
-        label: i18n.t('config.operationlog.operations.reset')
-      },
-      {
-        value: 'unknown',
-        label: i18n.t('config.operationlog.operations.unknown')
-      },
-    ],
-    alertMessageState: [
-      {
-        value: '1',
-        label:i18n.t('alert.list.pending')
-      },
-      {
-        value: '2',
-        label:i18n.t('alert.list.expired')
-      }
-    ],
-    protocol:[
-      {
-        value: 'SSH',
-        label: i18n.t('config.terminallog.SSH')
-      },
-      {
-        value: 'TELNET',
-        label: i18n.t('config.terminallog.TELNET')
-      }
-    ]
-  };
-  export default searchSelectInfo;
+import i18n from './i18n'
+const searchSelectInfo = { // value: 传给后台的值；label：显示给用户看的值
+  severity: [ // 告警级别
+    {
+      value: 'P1',
+      label: i18n.t('alert.config.P1')
+    },
+    {
+      value: 'P2',
+      label: i18n.t('alert.config.P2')
+    },
+    {
+      value: 'P3',
+      label: i18n.t('alert.config.P3')
+    }
+  ],
+  promType: [ // promServer类型
+    {
+      value: 1,
+      label: 'Global'
+    },
+    {
+      value: 2,
+      label: 'Per-Datacenter'
+    }
+  ],
+  alertType: [ // 告警类型
+    {
+      value: 1,
+      label: i18n.t('alert.config.typeOption.project')
+    },
+    {
+      value: 2,
+      label: i18n.t('alert.config.typeOption.module')
+    },
+    {
+      value: 3,
+      label: i18n.t('alert.config.typeOption.asset')
+    }
+  ],
+  assetState: [ // 资产入库/出库状态
+    {
+      value: 1,
+      label: i18n.t('asset.inStock')
+    }, {
+      value: 2,
+      label: i18n.t('asset.notInStock')
+    }, {
+      value: 3,
+      label: i18n.t('asset.suspended')
+    }
+  ],
+  endpointState: [ // 资产入库/出库状态
+    {
+      value: 1,
+      label: 'UP'
+    }, {
+      value: 0,
+      label: 'DOWN'
+    }, {
+      value: 2,
+      label: 'SUSPENDED'
+    }
+  ],
+  pingStatus: [
+    {
+      value: '0',
+      label: i18n.t('asset.pingInactive')
+    },
+    {
+      value: '1',
+      label: i18n.t('asset.pingActive')
+    }
+  ],
+  operation: [
+    {
+      value: 'add',
+      label: i18n.t('config.operationlog.operations.add')
+    },
+    {
+      value: 'update',
+      label: i18n.t('config.operationlog.operations.update')
+    },
+    {
+      value: 'query',
+      label: i18n.t('config.operationlog.operations.query')
+    },
+    {
+      value: 'import',
+      label: i18n.t('config.operationlog.operations.import')
+    },
+    {
+      value: 'export',
+      label: i18n.t('config.operationlog.operations.export')
+    },
+    {
+      value: 'reset',
+      label: i18n.t('config.operationlog.operations.reset')
+    },
+    {
+      value: 'unknown',
+      label: i18n.t('config.operationlog.operations.unknown')
+    }
+  ],
+  alertMessageState: [
+    {
+      value: '1',
+      label: i18n.t('alert.list.pending')
+    },
+    {
+      value: '2',
+      label: i18n.t('alert.list.expired')
+    }
+  ],
+  protocol: [
+    {
+      value: 'SSH',
+      label: i18n.t('config.terminallog.SSH')
+    },
+    {
+      value: 'TELNET',
+      label: i18n.t('config.terminallog.TELNET')
+    }
+  ]
+}
+export default searchSelectInfo
 </script>
diff --git a/nezha-fronted/src/components/common/table/nz-table-column.js b/nezha-fronted/src/components/common/table/nz-table-column.js
new file mode 100644
index 000000000..7d343c85c
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/nz-table-column.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'nz-data-table-column',
+  functional: true,
+  render (h, { data, props }) {
+    let children = []
+    const align = props.align
+    if (props.columns) {
+      children = props.columns.map(column =>
+        h('nz-data-table-column', {
+          props: Object.assign({}, { align }, column)
+        })
+      )
+    }
+    data.props = {
+      ...data.props
+    }
+    return h('el-table-column', data, children)
+  }
+}
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 7af537cbe..af2a7fe08 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -120,8 +120,8 @@
       </el-popover>
       <el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" slot="dropdown">
         <!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>  -->
-        <template v-for="item in timeData" >
-          <el-dropdown-item :class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item" v-if="item.id != 12 || showEmpty">
+        <template v-for="(item, index) in timeData" >
+          <el-dropdown-item v-if="item.id !== 12 || showEmpty" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
             {{item.text}}
           </el-dropdown-item>
         </template>
@@ -132,122 +132,122 @@
 </template>
 
 <script>
-import bus from '../../libs/bus';
+import bus from '../../libs/bus'
 
 export default {
-  name: "timePicker",
+  name: 'timePicker',
   props: {
-    defaultPick:Number,
-    showEmpty:{default:false,type:Boolean}
+    defaultPick: Number,
+    showEmpty: { default: false, type: Boolean }
   },
-  data() {
+  data () {
     return {
-      isPopoverDisabled:false,
-      isCustom:false,
-      searchTime:[
-        bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
+      isPopoverDisabled: false,
+      isCustom: false,
+      searchTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
       ],
       showTime: {
         id: 4,
-        text: this.$t("dashboard.panel.lastOneHour"),
+        text: this.$t('dashboard.panel.lastOneHour')
       },
       timeData: [
         {
-          id:0,
-          text:this.$t("dashboard.panel.customTimeRange"),
+          id: 0,
+          text: this.$t('dashboard.panel.customTimeRange')
         },
         {
-          id:12,
-          text:this.$t("dashboard.panel.noDate"),
+          id: 12,
+          text: this.$t('dashboard.panel.noDate')
 
         },
         {
-          id:1,
-          text:this.$t("dashboard.panel.lastFiveMin"),
-          type:'minute',
-          value:5,
+          id: 1,
+          text: this.$t('dashboard.panel.lastFiveMin'),
+          type: 'minute',
+          value: 5
         },
         {
-          id:2,
-          text:this.$t("dashboard.panel.lastFifteenMin"),
-          type:'minute',
-          value:15,
+          id: 2,
+          text: this.$t('dashboard.panel.lastFifteenMin'),
+          type: 'minute',
+          value: 15
         },
         {
-          id:3,
-          text:this.$t("dashboard.panel.lastThirtyMin"),
-          type:'minute',
-          value:30,
+          id: 3,
+          text: this.$t('dashboard.panel.lastThirtyMin'),
+          type: 'minute',
+          value: 30
         },
         {
-          id:4,
-          text:this.$t("dashboard.panel.lastOneHour"),
-          type:'hour',
-          value:1,
+          id: 4,
+          text: this.$t('dashboard.panel.lastOneHour'),
+          type: 'hour',
+          value: 1
         },
         {
-          id:5,
-          text:this.$t("dashboard.panel.lastThreeHour"),
-          type:'hour',
-          value:3,
+          id: 5,
+          text: this.$t('dashboard.panel.lastThreeHour'),
+          type: 'hour',
+          value: 3
         },
         {
-          id:6,
-          text:this.$t("dashboard.panel.lastSixHour"),
-          type:'hour',
-          value:6,
+          id: 6,
+          text: this.$t('dashboard.panel.lastSixHour'),
+          type: 'hour',
+          value: 6
         },
         {
-          id:7,
-          text:this.$t("dashboard.panel.lastTwelveHour"),
-          type:'hour',
-          value:12,
+          id: 7,
+          text: this.$t('dashboard.panel.lastTwelveHour'),
+          type: 'hour',
+          value: 12
         },
         {
-          id:8,
-          text:this.$t("dashboard.panel.lastTwentyFourHour"),
-          type:'hour',
-          value:24,
+          id: 8,
+          text: this.$t('dashboard.panel.lastTwentyFourHour'),
+          type: 'hour',
+          value: 24
         },
         {
-          id:9,
-          text:this.$t("dashboard.panel.lastTwoDay"),
-          type:'date',
-          value:2,
+          id: 9,
+          text: this.$t('dashboard.panel.lastTwoDay'),
+          type: 'date',
+          value: 2
         },
         {
-          id:10,
-          text:this.$t("dashboard.panel.lastSevenDay"),
-          type:'date',
-          value:7,
+          id: 10,
+          text: this.$t('dashboard.panel.lastSevenDay'),
+          type: 'date',
+          value: 7
         },
         {
-          id:11,
-          text:this.$t("dashboard.panel.lastThirtyDay"),
-          type:'date',
-          value:30,
+          id: 11,
+          text: this.$t('dashboard.panel.lastThirtyDay'),
+          type: 'date',
+          value: 30
         }
       ],
-      nowTimeType:{
-        id:4,
-        text:this.$t("dashboard.panel.lastOneHour"),
-        type:'hour',
-        value:1,
-      },
-    };
+      nowTimeType: {
+        id: 4,
+        text: this.$t('dashboard.panel.lastOneHour'),
+        type: 'hour',
+        value: 1
+      }
+    }
   },
   methods: {
-    dateChange(val){
-      let startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss');
-      let endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss');
-      this.$set(this.searchTime, 0, startTime);
-      this.$set(this.searchTime, 1, endTime);
+    dateChange (val) {
+      const startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss')
+      const endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss')
+      this.$set(this.searchTime, 0, startTime)
+      this.$set(this.searchTime, 1, endTime)
 
-      //let timerPicker = document.querySelector('#timePickerContent');
-      //timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
-      this.$set(this.showTime, 'id', 0);
-      this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
+      // let timerPicker = document.querySelector('#timePickerContent');
+      // timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
+      this.$set(this.showTime, 'id', 0)
+      this.$set(this.showTime, 'text', this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1])
       /*
             let tipElementList = document.getElementsByClassName('calendar-popover-text');
             if(tipElementList && tipElementList.length===3){
@@ -256,129 +256,126 @@ export default {
               tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
               tipElementList[2].innerHTML = this.searchTime[1];
               console.log('-0-0-2',tipElementList);
-            }*/
-      this.$emit('change', this.searchTime);
-
+            } */
+      this.$emit('change', this.searchTime)
     },
-    setCustomTime(timeGroup){
-      if(timeGroup.length===2){
-        this.$set(this.searchTime, 0, timeGroup[0]);
-        this.$set(this.searchTime, 1, timeGroup[1]);
+    setCustomTime (timeGroup) {
+      if (timeGroup.length === 2) {
+        this.$set(this.searchTime, 0, timeGroup[0])
+        this.$set(this.searchTime, 1, timeGroup[1])
 
-        this.nowTimeType={
-          id:4,
-          text:this.$t("dashboard.panel.lastOneHour"),
-          type:'hour',
-          value:1,
-        };
-        this.$set(this.showTime, 'id',  this.nowTimeType.id);
-        this.$set(this.showTime, 'text',  this.nowTimeType.text);
+        this.nowTimeType = {
+          id: 4,
+          text: this.$t('dashboard.panel.lastOneHour'),
+          type: 'hour',
+          value: 1
+        }
+        this.$set(this.showTime, 'id', this.nowTimeType.id)
+        this.$set(this.showTime, 'text', this.nowTimeType.text)
       }
     },
-    //left(){},
-    //right(){},
-    timeChange(val,from) {
-      this.nowTimeType=val;
-      this.$set(this.showTime, 'id', val.id);
-      this.$set(this.showTime, 'text', val.text);
+    // left(){},
+    // right(){},
+    timeChange (val, from) {
+      this.nowTimeType = val
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
       if (!val) {
-        this.isCustom = false;
-        return false;
-      }else {
-        this.setSearchTime(val.type,val.value);
-        //let timerPicker = document.querySelector('#timePickerContent');
-        //timerPicker.innerText = val.text;
-/*
+        this.isCustom = false
+        return false
+      } else {
+        this.setSearchTime(val.type, val.value)
+        // let timerPicker = document.querySelector('#timePickerContent');
+        // timerPicker.innerText = val.text;
+        /*
         let tipElementList = document.getElementsByClassName('calendar-popover-text');
         if(tipElementList && tipElementList.length===3){
           tipElementList[0].innerHTML = this.searchTime[0];
           tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
           tipElementList[2].innerHTML = this.searchTime[1];
-        }*/
+        } */
 
-        let id = val.id;
-        if(id===0){//custom
-         if(from==='chart'){
-           this.isCustom = false;
-           this.$emit('change', this.searchTime);
-         } else{
-           this.isCustom = true;
-           this.$refs.calendar.focus();
-         }
-        }else {
-          this.isCustom = false;
-          if(this.showEmpty&& id === 12){
-            this.searchTime=[]
+        const id = val.id
+        if (id === 0) { // custom
+          if (from === 'chart') {
+            this.isCustom = false
+            this.$emit('change', this.searchTime)
+          } else {
+            this.isCustom = true
+            this.$refs.calendar.focus()
           }
-          this.$emit('change', this.searchTime);
-
+        } else {
+          this.isCustom = false
+          if (this.showEmpty && id === 12) {
+            this.searchTime = []
+          }
+          this.$emit('change', this.searchTime)
         }
       }
     },
-    getCurrentTime(){
-       let timeTypeId = this.showTime.id;
-       if(timeTypeId===0){
-         return this.searchTime;
-       }else {
-         if(!timeTypeId){timeTypeId = 4;}
-         let currentTime = this.timeData.find(item => item.id === timeTypeId);
-         this.setSearchTime(currentTime.type,currentTime.value);
-         return this.searchTime;
-       }
-
-    },
-    setSearchTime(type,val){
-      if(type==='minute'){
-        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-        this.$set(this.searchTime, 0, startTime);
-        this.$set(this.searchTime, 1, endTime);
-        this.$set(this.searchTime, 2, val + "m");
-      }else if(type==='hour'){
-        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-        this.$set(this.searchTime, 0, startTime);
-        this.$set(this.searchTime, 1, endTime);
-        this.$set(this.searchTime, 2, val + "h");
-      }else if(type==='date'){
-        let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-        let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-        this.$set(this.searchTime, 0, startTime);
-        this.$set(this.searchTime, 1, endTime);
-        this.$set(this.searchTime, 2, val + "d");
+    getCurrentTime () {
+      let timeTypeId = this.showTime.id
+      if (timeTypeId === 0) {
+        return this.searchTime
+      } else {
+        if (!timeTypeId) { timeTypeId = 4 }
+        const currentTime = this.timeData.find(item => item.id === timeTypeId)
+        this.setSearchTime(currentTime.type, currentTime.value)
+        return this.searchTime
       }
     },
-    setCostomTime:function(costomTime){
-      this.searchTime=Object.assign(costomTime);
-      let val=Object.assign(this.timeData[0]);
-      this.$set(this.showTime, 'id', val.id);
-      this.$set(this.showTime, 'text', val.text);
-    },
-    popoverClick(val){
-      if(val){
-        this.isPopoverDisabled = true;
-      }else{
-        this.isPopoverDisabled = false;
+    setSearchTime (type, val) {
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
       }
     },
+    setCostomTime: function (costomTime) {
+      this.searchTime = Object.assign(costomTime)
+      const val = Object.assign(this.timeData[0])
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
+    },
+    popoverClick (val) {
+      if (val) {
+        this.isPopoverDisabled = true
+      } else {
+        this.isPopoverDisabled = false
+      }
+    }
   },
-  created() {
+  created () {
   },
-  watch:{
-    defaultPick:{
-      immediate:true,
-      handler(n,o){
-        if(n&&Number.isInteger(n)){
-          let showTime=this.timeData.find(item=>item.id == n);
-          if(showTime){
-            this.showTime = Object.assign({},showTime);
+  watch: {
+    defaultPick: {
+      immediate: true,
+      handler (n, o) {
+        if (n && Number.isInteger(n)) {
+          const showTime = this.timeData.find(item => item.id == n)
+          if (showTime) {
+            this.showTime = Object.assign({}, showTime)
           }
-          if(this.showEmpty&& this.defaultPick === 12){
-            this.searchTime=[]
+          if (this.showEmpty && this.defaultPick === 12) {
+            this.searchTime = []
           }
         }
       }
-    },
+    }
   },
   mounted: function () {
     /*
@@ -395,9 +392,7 @@ export default {
       this.$set(this.showTime, 'id', this.timeDataId);
       this.$set(this.showTime, 'text', timeObj.text);
       this.setSearchTime(timeObj.type,timeObj.value);
-    }*/
-  },
-};
+    } */
+  }
+}
 </script>
-
-
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 26ec837e4..e62dbc028 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -125,7 +125,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28" :resizable="false">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -148,405 +148,405 @@
 
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import exportXLSX from "../../common/exportXLSX";
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import deleteButton from "../../common/deleteButton";
-  export default {
-    name: "alert-config",
-    components: {
-      'export-excel': exportXLSX,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          ruleDetail: {},
-          alertRule: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
-        tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
+import bus from '../../../libs/bus'
+import exportXLSX from '../../common/exportXLSX'
+import chartDataFormat from '../../charts/chartDataFormat'
+import deleteButton from '../../common/deleteButton'
+export default {
+  name: 'alert-config',
+  components: {
+    'export-excel': exportXLSX,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        ruleDetail: {},
         alertRule: {},
-        blankAlertRule: {
-          id: '',
-          alertName: '',
-          linkObject: {id: '', name: ''},
-          expr: '',
-          unit:2,
-          operator: '>',
-          last: 60,
-          severity: 'P2',
-          summary: '',
-          description: '',
-        },
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 2,
-            name: this.$t('alert.alertName'),
-            type: 'input',
-            label: 'alertName',
-            disabled: false
-          },  {
-            id: 4,
-            name: this.$t('alert.severity'),
-            type: 'selectString',
-            label: 'severity',
-            disabled: false
-          }],
-        },
-        searchLabel: { //搜索参数
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("alert.alertName"),
-            prop: 'alertName',
-            show: true,
-            // width: 120
-          }, {
-            label: this.$t("alert.config.expr"),
-            prop: 'expr',
-            show: true,
-          }, {
-            label: this.$t("alert.config.operator"),
-            prop: 'operator',
-            show: true,
-          }, {
-            label: this.$t("alert.config.threshold"),
-            prop: 'threshold',
-            show: true,
-          }, {
-            label: this.$t("alert.config.for"),
-            prop: 'last',
-            show: true,
-          }, {
-            label: this.$t('alert.severity'),
-            prop: 'severity',
-            show: true,
-          },{
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true,
-          }, {
-            label: this.$t('alert.description'),
-            prop: 'description',
-            show: true,
-          }, {
-            label: this.$t("alert.message"),
-            prop: 'alertNum',
-            show: true,
-            width: 90
-          }, {
-            label: this.$t('alert.config.receiver'),
-            prop: 'receivers',
-            show: true,
-          }, {
-            label: this.$t('alert.config.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-        tableData: [],
-        viewProjectData: {},
-        viewModuleData: {},
-        viewAsset: false,
-        searchTime: bus.getTimezontDateRange(),
-        scrollbarWrap: null,
-        delFlag:false,
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      tableId: 'alertRuleTable', // 需要分页的table的id，用于记录每页数量
+      alertRule: {},
+      blankAlertRule: {
+        id: '',
+        alertName: '',
+        linkObject: { id: '', name: '' },
+        expr: '',
+        unit: 2,
+        operator: '>',
+        last: 60,
+        severity: 'P2',
+        summary: '',
+        description: ''
+      },
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 2,
+          name: this.$t('alert.alertName'),
+          type: 'input',
+          label: 'alertName',
+          disabled: false
+        }, {
+          id: 4,
+          name: this.$t('alert.severity'),
+          type: 'selectString',
+          label: 'severity',
+          disabled: false
+        }]
+      },
+      searchLabel: { // 搜索参数
+
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'alertName',
+          show: true
+          // width: 120
+        }, {
+          label: this.$t('alert.config.expr'),
+          prop: 'expr',
+          show: true
+        }, {
+          label: this.$t('alert.config.operator'),
+          prop: 'operator',
+          show: true
+        }, {
+          label: this.$t('alert.config.threshold'),
+          prop: 'threshold',
+          show: true
+        }, {
+          label: this.$t('alert.config.for'),
+          prop: 'last',
+          show: true
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true
+        }, {
+          label: this.$t('alert.description'),
+          prop: 'description',
+          show: true
+        }, {
+          label: this.$t('alert.message'),
+          prop: 'alertNum',
+          show: true,
+          width: 90
+        }, {
+          label: this.$t('alert.config.receiver'),
+          prop: 'receivers',
+          show: true
+        }, {
+          label: this.$t('alert.config.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      viewProjectData: {},
+      viewModuleData: {},
+      viewAsset: false,
+      searchTime: bus.getTimezontDateRange(),
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    queryMessage (alertRule) {
+      if (!this.hasButton('rule_alerts_view')) {
+        return
+      }
+      this.bottomBox.alertRule = alertRule
+      this.bottomBox.showSubList = true
+      this.bottomBox.targetTab = 'alertMessage'
+    },
+    edit (u) {
+      this.alertRule = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    methods: {
-      queryMessage(alertRule) {
-        if (!this.hasButton('rule_alerts_view')) {
-          return;
-        }
-        this.bottomBox.alertRule = alertRule;
-        this.bottomBox.showSubList = true;
-        this.bottomBox.targetTab = 'alertMessage';
-      },
-      edit(u) {
-        this.alertRule = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("alert/rule?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      formatThreshold(value,unit) {
-        let unitMethod = chartDataFormat.getUnit(unit);
-        if (unitMethod&&value) {
-          return unitMethod.compute(value, null, 2);
-        } else {
-          return value
-        }
-      },
-      add() {
-        this.alertRule = this.newAlertRule();
-        this.rightBox.show = true;
-      },
-      newAlertRule() {
-        return JSON.parse(JSON.stringify(this.blankAlertRule));
-      },
-      detail(u) {
-        this.bottomBox.alertRule = JSON.parse(JSON.stringify(u));
-        this.bottomBox.targetTab = "panel";
-        this.bottomBox.showSubList = true;
-      },
-      messageStyle(e) {
-        if (e.column.label == 'Message' || e.column.label == this.$t('alert.message')) {
-          if (e.row.alertNum > 0) {
-            return 'danger';
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/rule?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
           } else {
-            return 'success';
+            this.$message.error(response.msg)
           }
+        })
+      })
+    },
+    formatThreshold (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    },
+    add () {
+      this.alertRule = this.newAlertRule()
+      this.rightBox.show = true
+    },
+    newAlertRule () {
+      return JSON.parse(JSON.stringify(this.blankAlertRule))
+    },
+    detail (u) {
+      this.bottomBox.alertRule = JSON.parse(JSON.stringify(u))
+      this.bottomBox.targetTab = 'panel'
+      this.bottomBox.showSubList = true
+    },
+    messageStyle (e) {
+      if (e.column.label == 'Message' || e.column.label == this.$t('alert.message')) {
+        if (e.row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
         }
-        return '';
-      },
-      getTableData() {
-        if (!this.hasButton('rule_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('alert/rule', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code == 200) {
-            response.data.list.forEach(item => {
-              let temp = [];
-              if (item.receiver) {
-                temp = item.receiver.split(",").map(t => {
-                  return parseInt(t);
-                });
-              }
-              item.receiverShow = temp;
-            });
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
+      }
+      return ''
+    },
+    getTableData () {
+      if (!this.hasButton('rule_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('alert/rule', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          response.data.list.forEach(item => {
+            let temp = []
+            if (item.receiver) {
+              temp = item.receiver.split(',').map(t => {
+                return parseInt(t)
+              })
             }
-          }
-        })
-      },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
+            item.receiverShow = temp
+          })
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.alertRuleTable && this.$refs.alertRuleTable.bodyWrapper){
-          this.$refs.alertRuleTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      convertToDetail(obj) {
-        let detail = {
-          id: obj.id,
-          alertName: obj.alertName,
-          expr: obj.expr
-        };
-        let type = "";
-        for (let i = 0; i < this.$CONSTANTS.alertMessage.typeData.length; i++) {
-          if (obj.type == this.$CONSTANTS.alertMessage.typeData[i].value) {
-            type = this.$CONSTANTS.alertMessage.typeData[i].label;
-            break;
-          }
-        }
-        detail.type = type;
-        let link = "";
-        if (obj.type == 1 || obj.type == 2) {
-          link = obj.linkObject.name;
-        } else if (obj.type == 3) {
-          link = obj.linkObject.host;
-        }
-        detail.link = link;
-        detail.last = obj.last;
-        let severity = this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == obj.severity});
-        detail.severity = severity;
-        detail.alertNum = obj.alertNum;
-        detail.description = obj.description;
-        return detail;
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      initEvent() {
-        bus.$on("alert-rule-list-change", () => {
-          this.getTableData();
-        });
-        bus.$on("dc-list-change", () => {
-          this.getTableData();
-        });
-        bus.$on('alert-message-change',()=>{
-          this.getTableData();
-        })
-      },
+      })
     },
-    watch: {
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      'bottomBox.alertRule': {
-        deep: true,
-        handler(n) {
-          this.bottomBox.ruleDetail = this.convertToDetail(n);
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
         }
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.alertRuleTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
       }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.alertRuleTable && this.$refs.alertRuleTable.bodyWrapper) {
+        this.$refs.alertRuleTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
     },
-    beforeDestroy() {
-      bus.$off("alert-rule-list-change");
-      bus.$off("dc-list-change");
-      bus.$off('alert-message-change');
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    convertToDetail (obj) {
+      const detail = {
+        id: obj.id,
+        alertName: obj.alertName,
+        expr: obj.expr
+      }
+      let type = ''
+      for (let i = 0; i < this.$CONSTANTS.alertMessage.typeData.length; i++) {
+        if (obj.type == this.$CONSTANTS.alertMessage.typeData[i].value) {
+          type = this.$CONSTANTS.alertMessage.typeData[i].label
+          break
+        }
+      }
+      detail.type = type
+      let link = ''
+      if (obj.type == 1 || obj.type == 2) {
+        link = obj.linkObject.name
+      } else if (obj.type == 3) {
+        link = obj.linkObject.host
+      }
+      detail.link = link
+      detail.last = obj.last
+      const severity = this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == obj.severity })
+      detail.severity = severity
+      detail.alertNum = obj.alertNum
+      detail.description = obj.description
+      return detail
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    },
+    initEvent () {
+      bus.$on('alert-rule-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('dc-list-change', () => {
+        this.getTableData()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getTableData()
+      })
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    'bottomBox.alertRule': {
+      deep: true,
+      handler (n) {
+        this.bottomBox.ruleDetail = this.convertToDetail(n)
       }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.initEvent();
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.alertRuleTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    bus.$off('alert-rule-list-change')
+    bus.$off('dc-list-change')
+    bus.$off('alert-message-change')
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.initEvent()
 
-      this.getTableData();
-    },
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index edfc13d58..7bbc883c5 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -23,7 +23,7 @@
         <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
           <pick-time :refresh-data-func="getAlertList" v-model="searchTime" :use-chart-unit="false" :use-refresh="false" :default-pick="12" :show-empty="true"></pick-time>
           <div class="top-tool-search margin-r-20">
-            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
+            <search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
           <button :title="$t('overall.exportExcelLower')" @click="showExportDialog" type="button" v-has="'message_export'"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light" id="alert-list-export">
@@ -99,332 +99,322 @@
 
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import axios from 'axios';
-  import nzAlertTag from './nzAlertTag';
-  import chart from '../../page/dashboard/overview/chart'
-  import pickTime from "../../common/pickTime";
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import alertRuleInfo from '../../common/alert/alertRuleInfo'
-  import alertLabel from '../../common/alert/alertLabel'
-  import alertMessageTable from '../../common/alert/alertMessageTable.vue'
-  import deleteButton from "../../common/deleteButton";
-  export default {
-    name: "alertList",
-    components: {
-      'nz-alert-tag': nzAlertTag,
-      'chart': chart,
-      'alertRuleInfo':alertRuleInfo,
-      'alertLabel':alertLabel,
-      'alertMessageTable':alertMessageTable,
-      'pick-time':pickTime,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        /*二级列表相关*/
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        /*二级页面相关*/
-        bottomBox: {
-          tabList: [], //二级列表的标签
-          tabDetailList: [], //多个详情
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
+import bus from '../../../libs/bus'
+import axios from 'axios'
+import pickTime from '../../common/pickTime'
+import alertMessageTable from '../../common/alert/alertMessageTable.vue'
+import deleteButton from '../../common/deleteButton'
+export default {
+  name: 'alertList',
+  components: {
+    alertMessageTable: alertMessageTable,
+    'pick-time': pickTime,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      /* 二级列表相关 */
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 二级页面相关 */
+      bottomBox: {
+        tabList: [], // 二级列表的标签
+        tabDetailList: [], // 多个详情
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
 
-        //导出相关
-        importBox: {show: false, title:this.$t('overall.exportExcel')},
-        deleteBox: {show: false, ids: "", remark: '', state: 2},
-        batchDeleteObjs:[],
-        //详情相关
-        graphShow: false,
-        chartDatas: [],
-        sameLabels: ['instance','module','project','asset','endpoint','datacenter'],
-        legend: [],
-        searchTime: [],
-        searchTimeSelect: bus.getTimezontDateRange(),
-        currentMsg: {},
-        chartUnit: 5,
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      batchDeleteObjs: [],
+      // 详情相关
+      graphShow: false,
+      chartDatas: [],
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      legend: [],
+      searchTime: [],
+      searchTimeSelect: bus.getTimezontDateRange(),
+      currentMsg: {},
+      chartUnit: 5,
 
-        tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("alert.alertName"),
-            prop: 'alertRule',
-            show: true,
-            width: 180
-          }, {
-            label: this.$t("alert.list.labels"),
-            prop: 'labels',
-            show: true,
-            width:350,
-          }, {
-            label: this.$t("alert.severity"),
-            prop: 'severity',
-            show: true,
-            width: 100,
-          }, {
-            label: this.$t('alert.summary'),
-            prop: 'summary',
-            show: true,
-          }, {
-            label: this.$t('alert.description'),
-            prop: 'description',
-            show: true,
-          }, {
-            label: this.$t('alert.list.state'),
-            prop: 'state',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.startAt"),
-            prop: 'startAt',
-            show: true,
-            width: 150
-          }, {
-            label: this.$t('alert.endAt'),
-            prop: 'endAt',
-            show: true,
-            width: 150
-          }, {
-            label: this.$t('overall.value'),
-            prop: 'current',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 90
-          }
-        ],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: this.$t('alert.alertName'),
-            type: 'input',
-            label: 'alertName',
-            disabled: false
-          }, /*{
+      tableId: 'alertListTable', // 需要分页的table的id，用于记录每页数量
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('alert.alertName'),
+          prop: 'alertRule',
+          show: true,
+          width: 180
+        }, {
+          label: this.$t('alert.list.labels'),
+          prop: 'labels',
+          show: true,
+          width: 350
+        }, {
+          label: this.$t('alert.severity'),
+          prop: 'severity',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.summary'),
+          prop: 'summary',
+          show: true
+        }, {
+          label: this.$t('alert.description'),
+          prop: 'description',
+          show: true
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('alert.startAt'),
+          prop: 'startAt',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('alert.endAt'),
+          prop: 'endAt',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('overall.value'),
+          prop: 'current',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 90
+        }
+      ],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: this.$t('alert.alertName'),
+          type: 'input',
+          label: 'alertName',
+          disabled: false
+        }, /* {
             id: 3,
             name: this.$t('alert.list.type'),
             type: 'select',
             label: 'alertType',
             disabled: false
           }, */{
-            id: 20,
-            name: this.$t('alert.severity'),
-            type: 'selectString',
-            label: 'severity',
-            disabled: false
-          }, {
-            id: 21,
-            name: this.$t('asset.asset'),
-            type: 'asset',
-            label: 'asset',
-            disabled: false
-          }, {
-            id:22,
-            name: this.$t('project.project.project'),
-            type: 'project',
-            label: 'project',
-            disabled: false
-          }, {
-            id:23,
-            name: this.$t('project.module.module'),
-            type: 'module',
-            label: 'module',
-            disabled: false
-          }, {
-            id:24,
-            name: this.$t('project.endpoint.endpoint'),
-            type: 'input',
-            label: 'endpointId',
-            disabled: false
-          }, {
-            id:25,
-            name: this.$t('alert.list.state'),
-            type: 'select',
-            label: 'alertMessageState',
-            disabled: false
-          },{
-            id:26,
-            name: this.$t('alert.list.id'),
-            type: 'id',
-            label: 'id',
-            disabled: false
-          },{
-            id:27,
-            name: this.$t('config.dc.dc'),
-            type: 'idc',
-            label: 'idcId',
-            disabled: false,
-            readonly: true,
-          }],
-        },
-        searchLabel: { //搜索参数
-
-        },
-        tableData: [],
-        requestIndex:0,
-        viewAssetState: false,
-        nowTime:'',
-      }
-    },
-    computed: {
-      tagType() {
-        return (key) => {
-          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "normal";
-          } else {
-            return "info";
-          }
-        }
+          id: 20,
+          name: this.$t('alert.severity'),
+          type: 'selectString',
+          label: 'severity',
+          disabled: false
+        }, {
+          id: 21,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('project.project.project'),
+          type: 'project',
+          label: 'project',
+          disabled: false
+        }, {
+          id: 23,
+          name: this.$t('project.module.module'),
+          type: 'module',
+          label: 'module',
+          disabled: false
+        }, {
+          id: 24,
+          name: this.$t('project.endpoint.endpoint'),
+          type: 'input',
+          label: 'endpointId',
+          disabled: false
+        }, {
+          id: 25,
+          name: this.$t('alert.list.state'),
+          type: 'select',
+          label: 'alertMessageState',
+          disabled: false
+        }, {
+          id: 26,
+          name: this.$t('alert.list.id'),
+          type: 'id',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 27,
+          name: this.$t('config.dc.dc'),
+          type: 'idc',
+          label: 'idcId',
+          disabled: false,
+          readonly: true
+        }]
       },
-      tagValue() {
-        return (key, value) => {
-          if (key == 'type') {
-            if (value ==  1) {
-              value = this.$t("project.project.project");
-            } else if (value == 2) {
-              value = this.$t("module.module.module");
-            } else if (value == 3) {
-              value = this.$t("asset.asset");
-            }
-          }
-          return key + "：" + value;
+      searchLabel: { // 搜索参数
+
+      },
+      tableData: [],
+      requestIndex: 0,
+      viewAssetState: false,
+      nowTime: ''
+    }
+  },
+  computed: {
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
         }
       }
     },
-    methods: {
-      labelsSort:function(obj){
-        let buildIn=['asset','endpoint','module','project','datacenter']
-        let labels=JSON.parse(JSON.stringify(obj));
-        let result=[];
-        for(let key of buildIn){
-          if(key in labels){
-            result.push({label:key,value:labels[key]})
-            delete labels[key]
+    tagValue () {
+      return (key, value) => {
+        if (key == 'type') {
+          if (value == 1) {
+            value = this.$t('project.project.project')
+          } else if (value == 2) {
+            value = this.$t('module.module.module')
+          } else if (value == 3) {
+            value = this.$t('asset.asset')
           }
         }
-        Object.keys(labels).sort().forEach(key=>{
-          result.push({label:key,value:labels[key]})
-        })
-        return result;
-      },
-
-      getAlertList() {
-        if (!this.hasButton('message_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
+        return key + '：' + value
+      }
+    }
+  },
+  methods: {
+    labelsSort: function (obj) {
+      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      for (const key of buildIn) {
+        if (key in labels) {
+          result.push({ label: key, value: labels[key] })
+          delete labels[key]
         }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        if(this.searchTime&& this.searchTime.length>1){
-          this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
-          this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
-        }else{
-          delete this.searchLabel.startAt
-          delete this.searchLabel.endAt
-        }
-        this.tools.loading = true;
-        this.$get('alert/message', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code == 200) {
-            this.nowTime=this.utcTimeToTimezoneStr(response.time);
-            this.tableData = response.data.list;
-            let axiosAll=[]
-            this.$nextTick(() => {
-              this.tableData.forEach((item) => {
-                item.labels = JSON.parse(item.labels);
-                if(item.alertRule.buildIn != 1){
-                  let paramStr = JSON.stringify(this.promQueryParamConvert(item));
-                  axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
-                }else{
-                  axiosAll.push('')
-                }
-              });
-              axios.all(axiosAll).then(res=>{
-                res.forEach((item,index)=>{
-                  let current = [];
-                  let response2 = item.data;
-                  if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                    current = response2.data.result[0].value.map((item, i) => {
-                      if (i == 0) {
-                        return bus.computeTimezone(item);
-                      } else {
-                        return parseFloat(item).toFixed(2);
-                      }
-                    });
-                  }else{
-                    current=[null,null]
-                  }
-                  this.tableData[index].current=current;
-                })
-                this.$set(this.tableData,[...this.tableData])
-              })
-            });
-            this.deleteBox.ids='';
-            this.pageObj.total = response.data.total;
-          }
-        });
-      },
-      promQueryParamConvert(obj){
-        let r = "(" + obj.alertRule.expr + ")";
-        let intoLabels=false
-        if (Object.keys(obj.labels).length > 0) {
-          r += function(){
-            let group =" and " +  "(group({";
-            let by = " by (";
+      }
+      Object.keys(labels).sort().forEach(key => {
+        result.push({ label: key, value: labels[key] })
+      })
+      return result
+    },
 
-            for (let k in obj.labels) {
-              if (k != 'alertname' && k != 'severity') {
-                intoLabels=true;
-                group += k;
-                group += "=";
-                group += ("'" + obj.labels[k] + "',");
-                by += k;
-                by += ","
+    getAlertList () {
+      if (!this.hasButton('message_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (this.searchTime && this.searchTime.length > 1) {
+        this.$set(this.searchLabel, 'startAt', this.timezoneToUtcTimeStr(this.searchTime[0]))
+        this.$set(this.searchLabel, 'endAt', this.timezoneToUtcTimeStr(this.searchTime[1]))
+      } else {
+        delete this.searchLabel.startAt
+        delete this.searchLabel.endAt
+      }
+      this.tools.loading = true
+      this.$get('alert/message', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.tableData = response.data.list
+          const axiosAll = []
+          this.$nextTick(() => {
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels)
+              if (item.alertRule.buildIn != 1) {
+                const paramStr = JSON.stringify(this.promQueryParamConvert(item))
+                axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
+              } else {
+                axiosAll.push('')
               }
-            }
-            if(intoLabels){
-              group = group.substring(0, group.length-1);
-              by = by.substring(0, by.length-1);
-              group += "})";
-              by += ")";
-              return group + by + ")";
-            }else{
-              return ''
-            }
-
-          }();
+            })
+            axios.all(axiosAll).then(res => {
+              res.forEach((item, index) => {
+                let current = []
+                const response2 = item.data
+                if (response2.data && response2.data.result && response2.data.result.length > 0) {
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item)
+                    } else {
+                      return parseFloat(item).toFixed(2)
+                    }
+                  })
+                } else {
+                  current = [null, null]
+                }
+                this.tableData[index].current = current
+              })
+              this.$set(this.tableData, [...this.tableData])
+            })
+          })
+          this.deleteBox.ids = ''
+          this.pageObj.total = response.data.total
         }
-        return r;
-        /*let result="(" + obj.alertRule.expr + ")";
+      })
+    },
+    promQueryParamConvert (obj) {
+      let r = '(' + obj.alertRule.expr + ')'
+      let intoLabels = false
+      if (Object.keys(obj.labels).length > 0) {
+        r += (function () {
+          let group = ' and ' + '(group({'
+          let by = ' by ('
+
+          for (const k in obj.labels) {
+            if (k != 'alertname' && k != 'severity') {
+              intoLabels = true
+              group += k
+              group += '='
+              group += ("'" + obj.labels[k] + "',")
+              by += k
+              by += ','
+            }
+          }
+          if (intoLabels) {
+            group = group.substring(0, group.length - 1)
+            by = by.substring(0, by.length - 1)
+            group += '})'
+            by += ')'
+            return group + by + ')'
+          } else {
+            return ''
+          }
+        }())
+      }
+      return r
+      /* let result="(" + obj.alertRule.expr + ")";
         if(obj.labels){
           if(obj.labels.alertname){
             delete obj.labels.alertname;
@@ -448,281 +438,282 @@
             return q;
           }() + ")";
         }
-        return result;*/
-      },
-      //asset弹框控制
-      tabControl(data) {
-        if (data === 'close') {
-          this.viewAssetState = false
-          this.$refs['assetEditUnit'].tabView = false
-        }
-      },
-      openDelMessageBox:function(){
-        if(this.batchDeleteObjs.length<1) return;
-        if(this.$refs.alertMessageTable){
-          this.$refs.alertMessageTable.toDeleteMessage(false);
-        }
-      },
-      toDeleteMessage(obj) {
-        if (obj) {
-          this.deleteBox.ids = obj.id + "";
-        }
-        this.deleteBox.show = true;
-      },
-      deleteMessage(deleteBox,cb) {
-        this.$put("alert/message", deleteBox).then(res => {
-          if (res.code === 200) {
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-            this.getAlertList();
-            cb();
-          } else {
-            this.$message.error(res.msg);
-          }
-        })
-      },
-      selectChange(s) {
-        let ids = [];
-        this.deleteBox.ids = "";
-        s.forEach(item => {
-          ids.push(item.id);
-        });
-        this.deleteBox.ids = ids.join(",");
-      },
-      showExportDialog() {
-        this.importBox.show = true;
-      },
-      closeDialog() {
-        this.importBox.show = false;
-        this.deleteBox.show = false;
-      },
-      exportCur:function(){
-        let searchLabel=Object.assign({},this.searchLabel)
-        this.$set(searchLabel,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(searchLabel);
-        this.closeDialog();
-      },
-      exportAll:function(){
-        let temp = JSON.parse(JSON.stringify(this.searchLabel));
-        temp.pageSize = -1;
-        this.$set(temp,'language',localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en')
-        this.exportExcel(temp);
-        this.closeDialog();
-      },
-      getTimeString:function(){
-        let split='-';
-        let date=new Date();
-        let year=date.getFullYear();
-        let month=this.formatNum(date.getMonth()+1);
-        let day=this.formatNum(date.getDate());
-        let hours=this.formatNum(date.getHours());
-        let minutes=this.formatNum(date.getMinutes());
-        let seconds=this.formatNum(date.getSeconds());
-        return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds;
-      },
-      formatNum:function(num){
-        return num>9?num:'0'+num;
-      },
-      exportExcel:function(params){
-        for (let item in params) {
-          if (params[item]) {
-            if (item == "alertMessageState") {
-              this.$set(params, "state", params[item]);
-            } else{
-              this.$set(params, item, params[item]);
-            }
-          }
-        }
-        let temp=this;
-        if(!params){
-          params=temp.params;
-        }
-        axios.get("alert/message/export", {responseType:'blob', params: params}).then(res=>{
-          let fileName = 'alert-message-'+temp.getTimeString()+'.xlsx';
-          if(window.navigator.msSaveOrOpenBlob){
-            // 兼容ie11
-            let blobObject = new Blob([res.data]);
-            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
-          }else{
-            let url = URL.createObjectURL(new Blob([res.data]));
-            let a = document.createElement('a');
-            document.body.appendChild(a); //此处增加了将创建的添加到body当中
-            a.href = url;
-            a.download = fileName;
-            a.target = '_blank';
-            a.click();
-            a.remove(); //将a标签移除
-          }
-        },error=>{
-          let $self=this;
-          let reader = new FileReader();
-          reader.onload = function(event){
-            let responseText = reader.result;
-            let exception = JSON.parse(responseText);
-            if(exception.message){
-              $self.$message.error(exception.message)
-            }else{
-              console.error(error)
-            }
-          };
-          reader.readAsText(error.response.data);
-        })
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      showTagDetail(data, key) {
-        let open = false;
-        if (key == "asset" || key == "project" || key == "module" || key == "endpoint" || key == "datacenter") {
-          open = true;
-        }
-        if (open) {
-          let labelList = [];
-          let detailList = [];
-          for (let item in data) {
-            if (item == "asset" || item == "project" || item == "module" || item == "endpoint" || item == "dc") {
-              labelList.push(item);
-              detailList.push(data[item]);
-            }
-          }
-          this.bottomBox.showSubList = true;
-          this.tabList = labelList;
-          /*this.tabDetailList = detailList;
-          this.bottomBox.targetTab = key;*/
-        }
-      },
-      labelsClassName(row) {
-        if (row.column.label == this.$t("alert.list.labels")) {
-          return "alert-message-list-labels";
+        return result; */
+    },
+    // asset弹框控制
+    tabControl (data) {
+      if (data === 'close') {
+        this.viewAssetState = false
+        this.$refs.assetEditUnit.tabView = false
+      }
+    },
+    openDelMessageBox: function () {
+      if (this.batchDeleteObjs.length < 1) return
+      if (this.$refs.alertMessageTable) {
+        this.$refs.alertMessageTable.toDeleteMessage(false)
+      }
+    },
+    toDeleteMessage (obj) {
+      if (obj) {
+        this.deleteBox.ids = obj.id + ''
+      }
+      this.deleteBox.show = true
+    },
+    deleteMessage (deleteBox, cb) {
+      this.$put('alert/message', deleteBox).then(res => {
+        if (res.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.getAlertList()
+          cb()
         } else {
-          return "";
+          this.$message.error(res.msg)
         }
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getAlertList();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getAlertList();
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            if (item == "alertMessageState") {
-              this.$set(this.searchLabel, "state", searchObj[item]);
-            } else{
-              this.$set(this.searchLabel, item, searchObj[item]);
-            }
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0;
-        this.getAlertList();
-      },
-      fillProject: function (module) {
-        this.$get('project', {"id": module.projectId}).then(response => {
-          if (response.code == 200) {
-            module.project = response.data.list[0];
-          }
-        })
-      },
-      closeViews: function () {
-        this.$refs.alertConfigBox.show(false, false);
-        this.$refs.projectBox.show(false, false);
-        this.$refs.moduleBox.show(false, false);
-        this.viewAssetState = false;
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.pageObj.orderBy=orderBy;
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAlertList();
-      },
-      // label tooltip是否显示
-      labelToolTipDis(labelType){
-        switch(labelType){
-          case 'asset':
-          case 'module':
-          case 'project':
-            return false;
-          default: return true;
-        }
-      },
-      // alertNmae鼠标划入
-      alertMessagehover(item,index){
-        item.loading=true;
-        this.$set(this.tableData,index,item);
-      },
-      // label 鼠标划入
-      labelHover(item,index,type){
-        if(this.labelToolTipDis(type)){
-          return
-        }
-        item[type].loading=true;
-        this.$set(this.tableData,index,item);
-      }
+      })
     },
-    watch: {
-      showSubList(n) {
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
+    selectChange (s) {
+      const ids = []
+      this.deleteBox.ids = ''
+      s.forEach(item => {
+        ids.push(item.id)
+      })
+      this.deleteBox.ids = ids.join(',')
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    exportCur: function () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll: function () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    getTimeString: function () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum: function (num) {
+      return num > 9 ? num : '0' + num
+    },
+    exportExcel: function (params) {
+      for (const item in params) {
+        if (params[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(params, 'state', params[item])
+          } else {
+            this.$set(params, item, params[item])
           }
         }
       }
+      const temp = this
+      if (!params) {
+        params = temp.params
+      }
+      axios.get('alert/message/export', { responseType: 'blob', params: params }).then(res => {
+        const fileName = 'alert-message-' + temp.getTimeString() + '.xlsx'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    showTagDetail (data, key) {
+      let open = false
+      if (key == 'asset' || key == 'project' || key == 'module' || key == 'endpoint' || key == 'datacenter') {
+        open = true
+      }
+      if (open) {
+        const labelList = []
+        const detailList = []
+        for (const item in data) {
+          if (item == 'asset' || item == 'project' || item == 'module' || item == 'endpoint' || item == 'dc') {
+            labelList.push(item)
+            detailList.push(data[item])
+          }
+        }
+        this.bottomBox.showSubList = true
+        this.tabList = labelList
+        /* this.tabDetailList = detailList;
+          this.bottomBox.targetTab = key; */
       }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    labelsClassName (row) {
+      if (row.column.label == this.$t('alert.list.labels')) {
+        return 'alert-message-list-labels'
+      } else {
+        return ''
       }
-
-      this.getAlertList();
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAlertList()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAlertList()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          if (item == 'alertMessageState') {
+            this.$set(this.searchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.searchLabel, item, searchObj[item])
+          }
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.$refs.alertMessageTable.$refs.alertListTable.bodyWrapper.scrollTop = 0
+      this.getAlertList()
+    },
+    fillProject: function (module) {
+      this.$get('project', { id: module.projectId }).then(response => {
+        if (response.code == 200) {
+          module.project = response.data.list[0]
+        }
+      })
+    },
+    closeViews: function () {
+      this.$refs.alertConfigBox.show(false, false)
+      this.$refs.projectBox.show(false, false)
+      this.$refs.moduleBox.show(false, false)
+      this.viewAssetState = false
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.pageObj.orderBy = orderBy
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAlertList()
+    },
+    // label tooltip是否显示
+    labelToolTipDis (labelType) {
+      switch (labelType) {
+        case 'asset':
+        case 'module':
+        case 'project':
+          return false
+        default: return true
+      }
+    },
+    // alertNmae鼠标划入
+    alertMessagehover (item, index) {
+      item.loading = true
+      this.$set(this.tableData, index, item)
+    },
+    // label 鼠标划入
+    labelHover (item, index, type) {
+      if (this.labelToolTipDis(type)) {
+        return
+      }
+      item[type].loading = true
+      this.$set(this.tableData, index, item)
     }
+  },
+  watch: {
+    showSubList (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+
+    this.getAlertList()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/alert/nzAlertTag.vue b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
index 3f253ab33..f4431d9cd 100644
--- a/nezha-fronted/src/components/page/alert/nzAlertTag.vue
+++ b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
@@ -6,18 +6,18 @@
 </template>
 
 <script>
-  export default {
-    name: "nzAlertTag",
-    props: {
-      label: String, //标题
-      type: {type: String, default: "normal"}, //normal:blue; success:green; info:gray; danger:red; warning:orange;
-      cursorPoint: {type: Boolean, default: true}, //是否鼠标悬停变手指
-    },
-    methods: {
-    },
-    computed: {
-    }
+export default {
+  name: 'nzAlertTag',
+  props: {
+    label: String, // 标题
+    type: { type: String, default: 'normal' }, // normal:blue; success:green; info:gray; danger:red; warning:orange;
+    cursorPoint: { type: Boolean, default: true } // 是否鼠标悬停变手指
+  },
+  methods: {
+  },
+  computed: {
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/page/alert/silence.vue b/nezha-fronted/src/components/page/alert/silence.vue
index 02e5844af..64c6bfe33 100644
--- a/nezha-fronted/src/components/page/alert/silence.vue
+++ b/nezha-fronted/src/components/page/alert/silence.vue
@@ -5,7 +5,7 @@
       <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
         <div class="top-tool-search margin-r-20">
           <search-input :searchMsg="searchMsg" @search="search"
-                        :bottomBox.inTransform="bottomBox.inTransform" :single="true"></search-input>
+                        :inTransform="bottomBox.inTransform" :single="true"></search-input>
         </div>
         <button :title="$t('overall.exportExcelLower')" @click="addSilence" type="button" v-has="'alertsilence_save'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light" id="alert-list-export">
@@ -48,7 +48,6 @@
         align="center">
       </el-table-column>
 
-
       <el-table-column
         :resizable="true"
         v-for="(item, index) in tools.customTableTitle"
@@ -107,12 +106,12 @@
             </span>
             </div>
           </template>
-          <template v-else-if="item.prop == 'state'">
+          <template v-else-if="item.prop === 'state'">
             <span v-if="scope.row.state===1" class="silence-pending">pending</span>
             <span v-if="scope.row.state===2" class="silence-active">active</span>
             <span v-if="scope.row.state===3" class="silence-expired">expired</span>
           </template>
-          <template v-else-if="item.prop == 'utime'">
+          <template v-else-if="item.prop === 'utime'">
            {{utcTimeToTimezoneStr(scope.row[item.prop])}}
           </template>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
@@ -120,9 +119,8 @@
         </template>
       </el-table-column>
 
-
       <el-table-column width="28" :resizable="false">
-        <template slot="header" slot-scope="scope">
+        <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
                 class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
@@ -162,343 +160,342 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import axios from 'axios';
-  import deleteButton from "../../common/deleteButton";
-  import alertSilenceBox from'../../common/rightBox/alertSilenceBox';
-  import {calcDurationByStringTimeB} from "../../common/js/tools";
-  export default {
-    name:"silence",
-    components:{
-      deleteButton,
-      alertSilenceBox
-    },
-    data(){
-      return {
-        tableId:'silence',
-        //侧滑
-        rightBox:{
-          show:false,
-        },
-        /*二级列表相关*/
-        mainTableHeight:this.$tableHeight.normal, //主列表table高度
-        /*二级页面相关*/
-        bottomBox:{
-          tabList:[], //二级列表的标签
-          tabDetailList:[], //多个详情
-          mainResizeShow:true, //dom高度改变时是否展示|隐藏
-          subResizeShow:true,
-          isFullScreen:false, //全屏状态
-          showSubList:false, //是否显示二级列表
-          targetTab:'', //显示二级列表中的哪个页签
-          inTransform:false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        /*工具参数*/
-        tools:{
-          loading:false, //是否显示table加载动画
-          toTopBtnTop:this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover:false, //控制滚动条和top按钮同时出现
-          showTopBtn:false, //显示To top按钮
-          showCustomTableTitle:false, //自定义列弹框是否显示
-          customTableTitle:[], //自定义列工具的数据
-        },
-        /*批量删除相关*/
-        batchDeleteObjs:[],
-        /*搜素相关*/
-        searchMsg:{ //给搜索框子组件传递的信息
-          zheze_none:true,
-          searchLabelList:[
-            {
-              id:11,
-              name:this.$t('alert.silence.datacenter'),
-              type:'input',
-              label:'datacenter',
-              disabled:false
-            },{
-              id:12,
-              name:this.$t('alert.silence.project'),
-              type:'input',
-              label:'project',
-              disabled:false
-            },{
-              id:13,
-              name:this.$t('alert.silence.module'),
-              type:'input',
-              label:'module',
-              disabled:false
-            },{
-              id:14,
-              name:this.$t('alert.silence.endpoint'),
-              type:'input',
-              label:'endpoint',
-              disabled:false
-            },{
-              id:15,
-              name:this.$t('alert.silence.asset'),
-              type:'input',
-              label:'asset ',
-              disabled:false
-            }
-          ],
-        },
-        searchLabel:{}, //搜索参数
-        pageObj:{
-          pageNo:1,
-          pageSize:this.$CONSTANTS.defaultPageSize,
-          total:0
-        },
-        /*表格相关*/
-        tableTitle:[
+import bus from '../../../libs/bus'
+import deleteButton from '../../common/deleteButton'
+import alertSilenceBox from '../../common/rightBox/alertSilenceBox'
+import { calcDurationByStringTimeB } from '../../common/js/tools'
+export default {
+  name: 'silence',
+  components: {
+    deleteButton,
+    alertSilenceBox
+  },
+  data () {
+    return {
+      tableId: 'silence',
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级列表相关 */
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 二级页面相关 */
+      bottomBox: {
+        tabList: [], // 二级列表的标签
+        tabDetailList: [], // 多个详情
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      /* 批量删除相关 */
+      batchDeleteObjs: [],
+      /* 搜素相关 */
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
           {
-            label:'ID',
-            prop:'id',
-            show:true,
-            width:80
-          },{
-            label:'matchers',
-            prop:'matchers',
-            show:true,
-            width:600,
-          },{
-            label:'Start time',
-            prop:'startAt',
-            show:true,
-            width:300,
-          },{
-            label: this.$t('config.terminallog.duration'),
-            prop: 'duration',
-            show: true,
-          },{
-            label: 'Reason',
-            prop: 'reason',
-            show: true,
-          },{
-            label: 'Update time',
-            prop: 'utime',
-            show: true,
-          },{
-            label:'State',
-            prop:'state',
-            show:true,
-            width:120,
-          },{
-            label:this.$t('alert.config.option'),
-            prop:'option',
-            show:true,
-            width:120
+            id: 11,
+            name: this.$t('alert.silence.datacenter'),
+            type: 'input',
+            label: 'datacenter',
+            disabled: false
+          }, {
+            id: 12,
+            name: this.$t('alert.silence.project'),
+            type: 'input',
+            label: 'project',
+            disabled: false
+          }, {
+            id: 13,
+            name: this.$t('alert.silence.module'),
+            type: 'input',
+            label: 'module',
+            disabled: false
+          }, {
+            id: 14,
+            name: this.$t('alert.silence.endpoint'),
+            type: 'input',
+            label: 'endpoint',
+            disabled: false
+          }, {
+            id: 15,
+            name: this.$t('alert.silence.asset'),
+            type: 'input',
+            label: 'asset ',
+            disabled: false
           }
-        ],
-        tableData:[],
-        //导出相关
-        importBox:{show:false,title:this.$t('overall.exportExcel')},
-        deleteBox:{show:false,ids:"",remark:'',state:2},
-        //创建修改相关
-        blackSilence:{
-          id:'',
-          startAt:'',
-          endAt:'',
-          ruleId:'',
-          matcher:'',
-          type:'asset',
-          linkId:'',
-          reason:'',
-        },
-        alertSilence:{
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      /* 表格相关 */
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: 'matchers',
+          prop: 'matchers',
+          show: true,
+          width: 600
+        }, {
+          label: 'Start time',
+          prop: 'startAt',
+          show: true,
+          width: 300
+        }, {
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
+          show: true
+        }, {
+          label: 'Reason',
+          prop: 'reason',
+          show: true
+        }, {
+          label: 'Update time',
+          prop: 'utime',
+          show: true
+        }, {
+          label: 'State',
+          prop: 'state',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('alert.config.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      // 创建修改相关
+      blackSilence: {
+        id: '',
+        startAt: '',
+        endAt: '',
+        ruleId: '',
+        matcher: '',
+        type: 'asset',
+        linkId: '',
+        reason: ''
+      },
+      alertSilence: {
 
-        },
-        nowTime:''
+      },
+      nowTime: ''
+    }
+  },
+  computed: {
+    getDuration () {
+      return function (record) {
+        if (record.endAt) {
+          return calcDurationByStringTimeB(record.startAt, record.endAt)
+        }
+        return calcDurationByStringTimeB(record.startAt, this.nowTime)
       }
-    },
-    computed:{
-      getDuration(){
-        return function(record) {
-          if (record.endAt) {
-            return calcDurationByStringTimeB(record.startAt, record.endAt);
-          }
-          return calcDurationByStringTimeB(record.startAt, this.nowTime);
-        }
-      },
-    },
-    created(){
+    }
+  },
+  created () {
 
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.initEvent()
+    this.getAlertSilence()
+  },
+  methods: {
+    initEvent () {
+      bus.$on('alert-rule-list-change', () => {
+        this.getAlertSilence()
+      })
+      bus.$on('dc-list-change', () => {
+        this.getAlertSilence()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getAlertSilence()
+      })
     },
-    mounted(){
-      //初始化表头
-      this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
-        ?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
-        :this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.initEvent();
-      this.getAlertSilence();
-    },
-    methods:{
-      initEvent(){
-        bus.$on("alert-rule-list-change",()=>{
-          this.getAlertSilence();
-        });
-        bus.$on("dc-list-change",()=>{
-          this.getAlertSilence();
-        });
-        bus.$on('alert-message-change',()=>{
-          this.getAlertSilence();
-        })
-      },
-      getAlertSilence(){
-        if(!this.hasButton('rule_view')){
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel,"pageNo",this.pageObj.pageNo);
-        this.$set(this.searchLabel,"pageSize",this.pageObj.pageSize);
-        this.tools.loading=true;
-        this.$get('alert/silence',this.searchLabel).then(response=>{
-          this.tools.loading=false;
-          if(response.code==200){
-            this.tableData=response.data.list;
-            this.pageObj.total=response.data.total;
-            this.nowTime=this.utcTimeToTimezoneStr(response.time);
-            console.info(this.$refs.alertSilenceTable)
-            if(!this.scrollbarWrap){
-              this.$nextTick(()=>{
-                this.scrollbarWrap=this.$refs.alertSilenceTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
-          }
-        })
-      },
-      pageNo(val){
-        this.pageObj.pageNo=val;
-        this.getAlertSilence();
-      },
-      pageSize(val){
-        this.pageObj.pageSize=val;
-        localStorage.setItem('nz-pageSize-'+localStorage.getItem('nz-username')+'-'+this.tableId,val);
-        this.getAlertSilence();
-      },
-      search(searchObj){
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel={};
-        this.pageObj.pageNo=1;
-        for(let item in searchObj){
-          if(searchObj[item]){
-            this.$set(this.searchLabel,'type',item);
-            this.$set(this.searchLabel,'query',searchObj[item]);
+    getAlertSilence () {
+      if (!this.hasButton('rule_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('alert/silence', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          console.info(this.$refs.alertSilenceTable)
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.alertSilenceTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-        if(orderBy){
-          this.$set(this.searchLabel,'orderBy',orderBy);
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getAlertSilence()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getAlertSilence()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, 'type', item)
+          this.$set(this.searchLabel, 'query', searchObj[item])
         }
-        this.$refs.alertSilenceTable.bodyWrapper.scrollTop=0;
-        this.getAlertSilence();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel,"orderBy",orderBy);
-        this.getAlertSilence();
-      },
-      openDelMessageBox:function(){
-        if(this.batchDeleteObjs.length<1) return;
-      },
-      showExportDialog(){
-        this.importBox.show=true;
-      },
-      closeDialog(){
-        this.importBox.show=false;
-        this.deleteBox.show=false;
-      },
-      exportCur:function(){
-        let searchLabel=Object.assign({},this.searchLabel)
-        this.$set(searchLabel,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
-        this.exportExcel(searchLabel);
-        this.closeDialog();
-      },
-      exportAll:function(){
-        let temp=JSON.parse(JSON.stringify(this.searchLabel));
-        temp.pageSize= -1;
-        this.$set(temp,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
-        this.exportExcel(temp);
-        this.closeDialog();
-      },
-      addSilence(){
-        this.blackSilence.startAt=bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss');
-        this.blackSilence.endAt=bus.timeFormate(bus.getOffsetTimezoneData(1),'yyyy-MM-dd hh:mm:ss');
-        this.alertSilence=JSON.parse(JSON.stringify(this.blackSilence));
-        this.rightBox.show=true;
-      },
-      edit(row){
-        this.$get('alert/silence/'+row.id).then(res=>{
-          this.alertSilence={...res.data};
-          this.rightBox.show=true;
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.$refs.alertSilenceTable.bodyWrapper.scrollTop = 0
+      this.getAlertSilence()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getAlertSilence()
+    },
+    openDelMessageBox: function () {
+      // if (this.batchDeleteObjs.length < 1) return
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    exportCur: function () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll: function () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    addSilence () {
+      this.blackSilence.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      this.blackSilence.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'yyyy-MM-dd hh:mm:ss')
+      this.alertSilence = JSON.parse(JSON.stringify(this.blackSilence))
+      this.rightBox.show = true
+    },
+    edit (row) {
+      this.$get('alert/silence/' + row.id).then(res => {
+        this.alertSilence = { ...res.data }
+        this.rightBox.show = true
+      })
+    },
+    del (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/silence?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getAlertSilence()
+          } else {
+            this.$message.error(response.msg)
+          }
         })
-      },
-      del(row){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("alert/silence?ids="+row.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.getAlertSilence();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      overtime(row){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmOvertime"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("alert/silence?ids="+row.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.getAlertSilence();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getAlertSilence();
-        }
-      },
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    overtime (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmOvertime'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('alert/silence?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getAlertSilence()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getAlertSilence()
+      }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/page/asset/Console.vue b/nezha-fronted/src/components/page/asset/Console.vue
index 4f5323a5e..fb15eae84 100644
--- a/nezha-fronted/src/components/page/asset/Console.vue
+++ b/nezha-fronted/src/components/page/asset/Console.vue
@@ -4,41 +4,40 @@
     </div>
 </template>
 
-
 <script>
 import Terminal from '../../common/js/Xterm'
 export default {
   name: 'Console',
-  props:['terminal','token'],
+  props: ['terminal', 'token'],
   data () {
     return {
       term: null,
       terminalSocket: null,
-      obj:{
-        id:2
-      },
+      obj: {
+        id: 2
+      }
     }
   },
-  watch:{
+  watch: {
     token: {
-      immediate:true,
-      handler(val){
-        if(val){
+      immediate: true,
+      handler (val) {
+        if (val) {
           this.create()
         }
       }
-    },
+    }
   },
   methods: {
-    create(){
-      let terminalContainer = document.getElementById('terminal')
+    create () {
+      const terminalContainer = document.getElementById('terminal')
       this.term = new Terminal()
       this.term.open(terminalContainer)
-      this.terminalSocket = new WebSocket("ws://192.168.40.247:8080/nz-admin/terminal.ws?width=1&height=1&cols=225&rows=200&token="+this.token);
+      this.terminalSocket = new WebSocket('ws://192.168.40.247:8080/nz-admin/terminal.ws?width=1&height=1&cols=225&rows=200&token=' + this.token)
       // this.terminalSocket = new WebSocket("ws://192.168.41.101:8088/nz-admin/terminal.ws?width=1600&height=1005&cols=225&rows=58&token="+this.token);
       this.term.attach(this.terminalSocket)
       this.term._initialized = true
-    },
+    }
   },
   mounted () {
 
@@ -60,4 +59,4 @@ export default {
     z-index: 510;
     box-shadow: 0px 20px 13px -19px #5E5E5E;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue
index b954ab96d..97d3ef8bd 100644
--- a/nezha-fronted/src/components/page/asset/accountConfig.vue
+++ b/nezha-fronted/src/components/page/asset/accountConfig.vue
@@ -95,107 +95,105 @@
 </template>
 
 <script>
-  import {port} from '../../common/js/validate'
+import { port } from '../../common/js/validate'
 export default {
-    name: "accountConfig",
-    props:{
-      account:{type:Object},
-      isAllowedChangeProtocol:{type:Boolean,default:true}
-    },
-    data(){
-      return {
-        rules:{
-          "params.username": [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],
-          port: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
-            { validator: port, trigger: 'blur'}
-          ],
-        },
-        showTelnetOption:false
+  name: 'accountConfig',
+  props: {
+    account: { type: Object },
+    isAllowedChangeProtocol: { type: Boolean, default: true }
+  },
+  data () {
+    return {
+      rules: {
+        'params.username': [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: port, trigger: 'blur' }
+        ]
+      },
+      showTelnetOption: false
+    }
+  },
+  methods: {
+    resetData () {
+      this.account = {
+        id: null,
+        user: '',
+        authType: 1,
+        protocol: 'SSH',
+        pwd: '',
+        port: null,
+        privateKey: null,
+        userTip: '',
+        passwordTip: '',
+        reloginPasswordTip: ''
       }
     },
-    methods:{
-      resetData:function(){
-        this.account={
-          id:null,
-          user:"",
-          authType:1,
-          protocol:'SSH',
-          pwd:"",
-          port:null,
-          privateKey:null,
-          userTip:"",
-          passwordTip:'',
-          reloginPasswordTip:''
-        }
-      },
-      isShowTelnetOption:function(){
-        this.showTelnetOption=!this.showTelnetOption;
-        if(!this.showTelnetOption){
-          this.account.userTip="";
-          this.account.passwordTip="";
-          this.account.reloginPasswordTip="";
-        }
-      },
-      telnetOptionState:function(){
-        if(this.account.userTip != ''|| this.account.passwordTip != '' || this.account.reloginPasswordTip != ''){
-          this.showTelnetOption=true;
-        }
-      },
-      changeProtocolType:function(protocolType){
-        if(this.isAllowedChangeProtocol){
-          this.account.protocol=protocolType;
-          this.$emit('protocol-type-change',protocolType)
-        }else{
-          return ;
-        }
-      },
-      clearPrivateKey:function(){
-        this.account.privateKey=null;
-      },
-      clearTelnetOptions:function(){
-        this.account.userTip='';
-        this.account.passwordTip='';
-        this.account.reloginPasswordTip='';
-      },
-      handleChange(file,fileList) {
-        if (fileList.length > 0) {
-          this.uploadFileList = [fileList[fileList.length - 1]]
-        }
-        this.account.uploadFile = this.uploadFileList[0];
-        this.validateFile();
-      },
-      validateAccount:function(){
-        this.validateResult=false;
-        this.$refs.accountForm.validate((valid) => {
-          this.$emit("setValidateResult", valid, this.account.protocol);
-        });
-      },
-
+    isShowTelnetOption () {
+      this.showTelnetOption = !this.showTelnetOption
+      if (!this.showTelnetOption) {
+        this.account.userTip = ''
+        this.account.passwordTip = ''
+        this.account.reloginPasswordTip = ''
+      }
     },
-    watch:{
-      account:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
-          if(n.authType == 1){//密码登录
-            this.clearPrivateKey();
-          }
-          if(n.authType == 2){//公钥登录
-            this.account.pwd='';
-          }
-          if(n.protocol == 'SSH'){
-            this.showTelnetOption=false;
-            this.clearTelnetOptions();
-          }else{
-            this.clearPrivateKey();
-          }
-          this.telnetOptionState();
+    telnetOptionState () {
+      if (this.account.userTip != '' || this.account.passwordTip != '' || this.account.reloginPasswordTip != '') {
+        this.showTelnetOption = true
+      }
+    },
+    changeProtocolType (protocolType) {
+      if (this.isAllowedChangeProtocol) {
+        this.account.protocol = protocolType
+        this.$emit('protocol-type-change', protocolType)
+      }
+    },
+    clearPrivateKey () {
+      this.account.privateKey = null
+    },
+    clearTelnetOptions () {
+      this.account.userTip = ''
+      this.account.passwordTip = ''
+      this.account.reloginPasswordTip = ''
+    },
+    handleChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.uploadFileList = [fileList[fileList.length - 1]]
+      }
+      this.account.uploadFile = this.uploadFileList[0]
+      this.validateFile()
+    },
+    validateAccount () {
+      this.validateResult = false
+      this.$refs.accountForm.validate((valid) => {
+        this.$emit('setValidateResult', valid, this.account.protocol)
+      })
+    }
+
+  },
+  watch: {
+    account: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        if (n.authType == 1) { // 密码登录
+          this.clearPrivateKey()
         }
+        if (n.authType == 2) { // 公钥登录
+          this.account.pwd = ''
+        }
+        if (n.protocol == 'SSH') {
+          this.showTelnetOption = false
+          this.clearTelnetOptions()
+        } else {
+          this.clearPrivateKey()
+        }
+        this.telnetOptionState()
       }
     }
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 0431a5056..43a992b26 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -70,7 +70,7 @@
           :prop="$tableSet.propTitle(item.prop,'asset')"
           :sort-orders="['ascending', 'descending']"
         >
-          <template slot-scope="scope" slot="header">
+          <template slot="header">
             <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span class="tag-mark">&nbsp;[Tag]</span></span>
             <span v-else>
               <span>{{item.label}}</span>
@@ -151,7 +151,7 @@
           </div>
           <div v-if="item.prop=='purchaseDate'">
             <span v-if="scope.row.purchaseDate">{{scope.row.purchaseDate}}</span>
-            <span v-else="scope.row.purchaseDate">==</span>
+            <span v-else>==</span>
           </div>
           <div v-if="item.prop=='principal'">
             <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
@@ -187,7 +187,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28" fixed="right" :resizable="false">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -217,366 +217,361 @@
 </template>
 
 <script>
-  import bus from "../../../libs/bus";
-  import exportXLSX from "../../common/exportXLSX";
-  import endpointStatusPop from "./endpointStatusPop";
-  import deleteButton from "../../common/deleteButton";
-  import {showTableTooltip, hideTableTooltip} from "../../common/js/tools";
+import bus from '../../../libs/bus'
+import exportXLSX from '../../common/exportXLSX'
+import deleteButton from '../../common/deleteButton'
+import { showTableTooltip, hideTableTooltip } from '../../common/js/tools'
 
-  export default {
-    name: "asset",
-    components:{
-      'export-excel':exportXLSX,
-      'endpoint-status-pop':endpointStatusPop,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-          batchShow:false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          assetDetail: {}, //asset详情
-          asset: {}, //告警信息对应的asset对象
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
+export default {
+  name: 'asset',
+  components: {
+    'export-excel': exportXLSX,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false,
+        batchShow: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        assetDetail: {}, // asset详情
+        asset: {}, // 告警信息对应的asset对象
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
 
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        asset: {},
-        blankAsset: {
-          id: '',
-          sn: '',
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      batchDeleteObjs: [],
+      asset: {},
+      blankAsset: {
+        id: '',
+        sn: '',
+        host: '',
+        state: 1,
+        purchaseDate: '',
+        idcId: '',
+        cabinetId: '',
+        modelId: '',
+        model: { type: { code: '' } },
+        assetType: '',
+        impi: {
           host: '',
-          state: 1,
-          purchaseDate: '',
-          idcId: '',
-          cabinetId: '',
-          modelId: '',
-          model: {type: {code: ""}},
-          assetType: '',
-          impi:{
-            host:'',
-            port:'',
-          },
-          tags: [],
-          accounts: [],
+          port: ''
         },
-        tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          },{
-            id: 20,
-            name: 'SN',
-            type: 'input',
-            label: 'sn',
-            disabled: false
-          },{
-            id: 21,
-            name: 'Host',
-            type: 'input',
-            label: 'host',
-            disabled: false
-          },{
-            id: 22,
-            name: this.$t("asset.state"),
-            type: 'select',
-            label: 'assetState',
-            disabled: false
-          },{
-            id: 23,
-            name: "pingStatus",
-            type: 'select',
-            label: 'pingStatus',
-            disabled: false
-          },{
-            id: 23,
-            name: this.$t("asset.tableTitle.cabinet"),
-            type: 'input',
-            label: 'cabinetName',
-            disabled: false
-          }],
+        tags: [],
+        accounts: []
+      },
+      tableId: 'assetTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 20,
+          name: 'SN',
+          type: 'input',
+          label: 'sn',
+          disabled: false
+        }, {
+          id: 21,
+          name: 'Host',
+          type: 'input',
+          label: 'host',
+          disabled: false
+        }, {
+          id: 22,
+          name: this.$t('asset.state'),
+          type: 'select',
+          label: 'assetState',
+          disabled: false
+        }, {
+          id: 23,
+          name: 'pingStatus',
+          type: 'select',
+          label: 'pingStatus',
+          disabled: false
+        }, {
+          id: 23,
+          name: this.$t('asset.tableTitle.cabinet'),
+          type: 'input',
+          label: 'cabinetName',
+          disabled: false
+        }]
+      },
+
+      searchLabel: {}, // 搜索参数
+      activeType: 'dataCenter',
+
+      tableTitle: [
+        {
+          label: this.$t('asset.tableTitle.host'),
+          prop: 'HOST',
+          show: true,
+          width: 130,
+          fixed: 'left'
         },
+        {
+          label: this.$t('asset.tableTitle.id'),
+          prop: 'ID',
+          show: false,
+          allowed: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.assetType'),
+          prop: 'assetType',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.device'),
+          prop: 'SN',
+          show: true
+        }, {
+          label: this.$t('asset.tableTitle.assetState'),
+          prop: 'state',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.assetPing'),
+          prop: 'pingStatus',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.modules'),
+          prop: 'Module',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('asset.tableTitle.alerts'),
+          prop: 'Alert',
+          show: true,
+          width: 120
+        }, {
+          label: this.$t('asset.tableTitle.dataCenter'),
+          prop: 'dataCenter',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.cabinet'),
+          prop: 'cabinet',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.model'),
+          prop: 'model',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.vendor'),
+          prop: 'vendor',
+          show: true,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.procurementDate'),
+          prop: 'purchaseDate',
+          show: false,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.principal'),
+          prop: 'principal',
+          show: false,
+          width: 110
+        }, {
+          label: this.$t('asset.tableTitle.principalTel'),
+          prop: 'tel',
+          show: false,
+          width: 115
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          fixed: 'right'
+        }],
+      tableData: [],
 
-        searchLabel: {}, //搜索参数
-        activeType: 'dataCenter',
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0,
+        idcId: '',
+        idcIds: ''
+      },
+      assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
+      tagKeys: [],
 
-        tableTitle: [
-          {
-            label: this.$t("asset.tableTitle.host"),
-            prop: 'HOST',
-            show: true,
-            width: 130,
-            fixed:'left'
-          },
-          {
-            label: this.$t("asset.tableTitle.id"),
-            prop: 'ID',
-            show: false,
-            allowed:true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.assetType"),
-            prop: 'assetType',
-            show: true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.device"),
-            prop: 'SN',
-            show: true,
-          },  {
-            label: this.$t("asset.tableTitle.assetState"),
-            prop: 'state',
-            show: true,
-            width: 110
-          }, {
-            label:this.$t('asset.tableTitle.assetPing'),
-            prop:'pingStatus',
-            show:true,
-            width: 110
-          },{
-            label: this.$t("asset.tableTitle.modules"),
-            prop: 'Module',
-            show: true,
-            width: 120
-          }, {
-            label: this.$t("asset.tableTitle.alerts"),
-            prop: 'Alert',
-            show: true,
-            width: 120
-          }, {
-            label: this.$t("asset.tableTitle.dataCenter"),
-            prop: 'dataCenter',
-            show: true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.cabinet"),
-            prop: 'cabinet',
-            show: true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.model"),
-            prop: 'model',
-            show: true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.vendor"),
-            prop: 'vendor',
-            show: true,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.procurementDate"),
-            prop: 'purchaseDate',
-            show: false,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.principal"),
-            prop: 'principal',
-            show: false,
-            width: 110
-          }, {
-            label: this.$t("asset.tableTitle.principalTel"),
-            prop: 'tel',
-            show: false,
-            width: 115
-          }, {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            fixed:'right'
-          }],
-        tableData: [],
-
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0,
-          idcId: '',
-          idcIds: ''
-        },
-        assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
-        tagKeys:[],
-
-        scrollbarWrap: null,
-        delFlag:false,
-      }
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  computed: {
+    headerCurrentDc: function () {
+      return this.$store.state.currentDc
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
     },
-    computed:{
-      headerCurrentDc:function(){
-        return this.$store.state.currentDc;
-      }
-    },
-    watch: {
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      'bottomBox.asset': {
-        deep: true,
-        handler(n) {
-          if (n.id) {
-            this.bottomBox.assetDetail = this.convertToDetail(n);
-            if (n.model.id) {
-              n.modelId = n.model.id;
-            }
+    'bottomBox.asset': {
+      deep: true,
+      handler (n) {
+        if (n.id) {
+          this.bottomBox.assetDetail = this.convertToDetail(n)
+          if (n.model.id) {
+            n.modelId = n.model.id
           }
-        }
-      },
-      'tools.customTableTitle':{
-        deep:true,
-        immediate:true,
-        handler(n,o){
-          let pingTitle=n.find(item=>{return item.prop=='pingStatus'})
-          if(pingTitle){
-            this.dispatchEvent('asset-ping-switch-change',pingTitle.show)
-          }
-        }
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.assetTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
-
-
         }
       }
     },
-    methods: {
-      showTableTooltip, hideTableTooltip,
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      cli([id,host,account]){
-        const consoleParam = {
-          id: id,
-          host: host,
-          accountId: account.id,
-          port: account.port,
-        };
-        this.$store.commit('addConsole', consoleParam);
-      },
-      jumpToAlertMsg(asset) {
-        if (!this.hasButton('asset_alerts_view')) {
-          return;
+    'tools.customTableTitle': {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        const pingTitle = n.find(item => { return item.prop == 'pingStatus' })
+        if (pingTitle) {
+          this.dispatchEvent('asset-ping-switch-change', pingTitle.show)
         }
-        this.bottomBox.targetTab = 'alertMessage';
-        this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
-        this.bottomBox.showSubList = true;
-      },
-      checkSearchLabel(n, o) {
-        let nKeys = Object.keys(n);
-        let oKeys = Object.keys(o);
-        if (nKeys.length != oKeys.length) {
-          return true;
+      }
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.assetTable.bodyWrapper.scrollTop = 0
         } else {
-          let flag = false;
-          nKeys.forEach(key => {
-            n[key] != o[key] && (flag = true);
-          });
-          return flag;
+          this.delFlag = false
         }
-      },
-      getTableData() {
-        let oldSearchLabel = JSON.parse(JSON.stringify(this.searchLabel));
-        this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
-        delete this.searchLabel.total
-        this.tools.loading = true;
-        if(this.searchLabel.tags && this.searchLabel.tags!=''){
-          this.searchLabel.tags=encodeURIComponent(this.searchLabel.tags)
+      }
+    }
+  },
+  methods: {
+    showTableTooltip,
+    hideTableTooltip,
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    cli ([id, host, account]) {
+      const consoleParam = {
+        id: id,
+        host: host,
+        accountId: account.id,
+        port: account.port
+      }
+      this.$store.commit('addConsole', consoleParam)
+    },
+    jumpToAlertMsg (asset) {
+      if (!this.hasButton('asset_alerts_view')) {
+        return
+      }
+      this.bottomBox.targetTab = 'alertMessage'
+      this.bottomBox.asset = JSON.parse(JSON.stringify(asset))
+      this.bottomBox.showSubList = true
+    },
+    checkSearchLabel (n, o) {
+      const nKeys = Object.keys(n)
+      const oKeys = Object.keys(o)
+      if (nKeys.length != oKeys.length) {
+        return true
+      } else {
+        let flag = false
+        nKeys.forEach(key => {
+          n[key] != o[key] && (flag = true)
+        })
+        return flag
+      }
+    },
+    getTableData () {
+      this.searchLabel = Object.assign(this.searchLabel, this.pageObj)
+      delete this.searchLabel.total
+      this.tools.loading = true
+      if (this.searchLabel.tags && this.searchLabel.tags != '') {
+        this.searchLabel.tags = encodeURIComponent(this.searchLabel.tags)
+      }
+      Object.keys(this.searchLabel).forEach(key => {
+        if (!this.searchLabel[key] && this.searchLabel[key] !== 0) {
+          delete this.searchLabel[key]
         }
-        Object.keys(this.searchLabel).forEach(key=>{
-          if(!this.searchLabel[key]&&this.searchLabel[key]!==0){
-            delete this.searchLabel[key]
+      })
+      this.$get('asset', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          bus.$emit('asset-property-change')
+
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.assetTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
-        });
-        this.$get('asset', this.searchLabel).then(response => {
-          this.tools.loading = false;
+        }
+      })
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user/list').then(response => {
           if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            bus.$emit('asset-property-change');
-
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.assetTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.userData = response.data.list
           }
-        });
-
-      },
-      getUserData() {
-        return new Promise(resolve => {
-          this.$get('sys/user/list').then(response => {
-            if (response.code === 200) {
-              this.userData = response.data.list;
-            }
-            resolve(this.userData);
-          });
-        });
-      },
-      messageStyle(title, row) {
-        if (title.label == 'Alerts' || title.label == this.$t("asset.tableTitle.alerts")) {
-          if (row.alertNum > 0) {
-            return 'danger';
+          resolve(this.userData)
+        })
+      })
+    },
+    messageStyle (title, row) {
+      if (title.label == 'Alerts' || title.label == this.$t('asset.tableTitle.alerts')) {
+        if (row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      if (title.label == 'Module' || title.label == this.$t('asset.tableTitle.modules')) {
+        if (row.state == 3) {
+          return 'suspended'
+        } else {
+          if (row.endpointDownNum > 0) {
+            return 'danger'
           } else {
-            return 'success';
+            return 'success'
           }
         }
-        if(title.label == 'Module' || title.label == this.$t("asset.tableTitle.modules")){
-          if (row.state == 3) {
-            return 'suspended';
-          } else {
-            if (row.endpointDownNum > 0) {
-              return 'danger';
-            } else {
-              return 'success';
-            }
-          }
-        }
-        /*if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
+      }
+      /* if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
           if (e.row.alertNum > 0) {
             return 'danger';
           } else {
@@ -593,323 +588,319 @@
               return 'success';
             }
           }
-        }*/
-        return '';
-      },
-      edit(asset) {
-        this.asset = JSON.parse(JSON.stringify(asset));
-        this.rightBox.show = true;
-      },
-      detail(asset) {
-        this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
-        this.bottomBox.targetTab = "panel";
-        this.bottomBox.showSubList = true;
-      },
-      del(asset) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("asset?ids=" + asset.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.delFlag=true;
-             this.getTableData()
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      markOptionData(data) {
-        data.forEach(item => {
-          this.$set(item, 'isEdit', false);
-          this.$set(item, 'oldName', item.value);
-          this.$set(item, item.name, false)
-          this.$set(item, item.id, false)
-          this.$set(item, item.id + item.name, false)
-        })
-      },
-      showEndpoint(asset) {
-        if (!this.hasButton('asset_endpoint_view')) {
-          return;
-        }
-        this.bottomBox.asset = Object.assign({}, asset);
-        this.bottomBox.targetTab = "endpoint";
-        this.bottomBox.showSubList = true;
-      },
-      add() {
-        this.asset = this.newAsset();
-        this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+        } */
+      return ''
+    },
+    edit (asset) {
+      this.asset = JSON.parse(JSON.stringify(asset))
+      this.rightBox.show = true
+    },
+    detail (asset) {
+      this.bottomBox.asset = JSON.parse(JSON.stringify(asset))
+      this.bottomBox.targetTab = 'panel'
+      this.bottomBox.showSubList = true
+    },
+    del (asset) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('asset?ids=' + asset.id).then(response => {
           if (response.code === 200) {
-            if(this.asset.model&&!this.asset.model.type.code){
-              this.asset.model.type.code=response.data[0].code;
-            }
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.delFlag = true
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    markOptionData (data) {
+      data.forEach(item => {
+        this.$set(item, 'isEdit', false)
+        this.$set(item, 'oldName', item.value)
+        this.$set(item, item.name, false)
+        this.$set(item, item.id, false)
+        this.$set(item, item.id + item.name, false)
+      })
+    },
+    showEndpoint (asset) {
+      if (!this.hasButton('asset_endpoint_view')) {
+        return
+      }
+      this.bottomBox.asset = Object.assign({}, asset)
+      this.bottomBox.targetTab = 'endpoint'
+      this.bottomBox.showSubList = true
+    },
+    add () {
+      this.asset = this.newAsset()
+      this.$get('sys/dict/all?type=assetType&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          if (this.asset.model && !this.asset.model.type.code) {
+            this.asset.model.type.code = response.data[0].code
           }
-        });
-        this.rightBox.show = true;
-      },
-      batchEdit(){
-        this.rightBox.batchShow = true;
-      },
-      newAsset() {
-        return JSON.parse(JSON.stringify(this.blankAsset));
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        this.rightBox.batchShow = false;
-        if (refresh) {
-          this.delFlag=true;
-         this.getTableData()
-          this.loadKeys();
         }
-      },
-      afterTableListChange:function(){
-        bus.$emit('asset-list-change')
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
+      })
+      this.rightBox.show = true
+    },
+    batchEdit () {
+      this.rightBox.batchShow = true
+    },
+    newAsset () {
+      return JSON.parse(JSON.stringify(this.blankAsset))
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      this.rightBox.batchShow = false
+      if (refresh) {
+        this.delFlag = true
         this.getTableData()
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      getPrincipalName(data) {
-        for (let item in this.userData) {
-          if (this.userData[item].userId === data) {
-            return this.userData[item].username
-          }
+        this.loadKeys()
+      }
+    },
+    afterTableListChange: function () {
+      bus.$emit('asset-list-change')
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    getPrincipalName (data) {
+      for (const item in this.userData) {
+        if (this.userData[item].userId === data) {
+          return this.userData[item].username
         }
-      },
-      returnData(data) {
-        if (data && data !== '--') {
-          return data;
-        } else if (data === '--') {
-          return '--';
-        } else {
-          return "--";
+      }
+    },
+    returnData (data) {
+      if (data && data !== '--') {
+        return data
+      } else if (data === '--') {
+        return '--'
+      } else {
+        return '--'
+      }
+    },
+    returnCabinet (start, end) { // 返回机柜u位信息
+      if (!start || !end) {
+        return ''
+      }
+      return `[${start}-${end}]`
+    },
+    closeAllPop () {
+      this.$refs.idcConfigBox.forEach((item) => {
+        item.show(false)
+      })
+      this.$refs.cabinetConfigBox.forEach((item) => {
+        item.show(false)
+      })
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
-      },
-      returnCabinet(start,end){//返回机柜u位信息
-       if(!start|| !end){
-         return ''
-       }
-        return `[${start}-${end}]`
-      },
-      closeAllPop() {
-        this.$refs.idcConfigBox.forEach((item) => {
-          item.show(false);
-        });
-        this.$refs.cabinetConfigBox.forEach((item) => {
-          item.show(false);
-        });
-      },
-      search(searchObj) {
-        let orderBy = '';
-        if(this.searchLabel.orderBy){
-          orderBy = this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.assetTable&&this.$refs.assetTable.bodyWrapper){
-          this.$refs.assetTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      convertToDetail(obj) {
-        let detail = JSON.parse(JSON.stringify(obj));
-        detail.state = obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock');
-        detail.assetType = obj.model.type.value;
-        detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
-        detail.dataCenter = obj.idc ? obj.idc.name : "";
-        detail.location = obj.idc ? obj.idc.location : "";
-        detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : "";
-        detail.tel = obj.idc ? obj.idc.tel : "";
-        detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
-        detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
-        detail.remark = obj.idc ? obj.idc.remark : "";
-        if (obj.accounts && obj.accounts.length > 0) {
-          let account = obj.accounts[0];
-          detail.protocol = account.protocol;
-          detail.account = account.user;
-          let loginType = "";
-          if (account.authType == 1) {
-            loginType = this.$t('asset.password');
-          } else if (account.authType == 2) {
-            loginType = this.$t('asset.ssh');
-          }
-          detail.loginType = loginType;
-          detail.port = account.port;
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.assetTable && this.$refs.assetTable.bodyWrapper) {
+        this.$refs.assetTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    convertToDetail (obj) {
+      const detail = JSON.parse(JSON.stringify(obj))
+      detail.state = obj.state == 1 ? this.$t('asset.inStock') : this.$t('asset.notInStock')
+      detail.assetType = obj.model.type.value
+      detail.vendorModel = obj.model.vendor.value + ' ' + obj.model.name
+      detail.dataCenter = obj.idc ? obj.idc.name : ''
+      detail.location = obj.idc ? obj.idc.location : ''
+      detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : ''
+      detail.tel = obj.idc ? obj.idc.tel : ''
+      detail.cabinet = obj.cabinet ? obj.cabinet.name : ''
+      detail.uSize = obj.cabinet ? obj.cabinet.uSize : ''
+      detail.remark = obj.idc ? obj.idc.remark : ''
+      if (obj.accounts && obj.accounts.length > 0) {
+        const account = obj.accounts[0]
+        detail.protocol = account.protocol
+        detail.account = account.user
+        let loginType = ''
+        if (account.authType == 1) {
+          loginType = this.$t('asset.password')
+        } else if (account.authType == 2) {
+          loginType = this.$t('asset.ssh')
         }
+        detail.loginType = loginType
+        detail.port = account.port
+      }
 
-        return detail;
-      },
-      formatPingTime:function(str){
-        if(!str || str == ''){
-          return this.$t('asset.assetStatPre')+this.$t('asset.assetStatDown');
-        }
-        let ds='-';
-        let ts=':';
-        let time=new Date(bus.UTCTimeToConfigTimezone(str));
-        let year=time.getFullYear();
-        let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
-        let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());
-        let hours=time.getHours() > 9? time.getHours():('0'+time.getHours());
-        let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
-        let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
-        return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
-
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      initEvent() {
-        bus.$on("asset-filter-change", (column, content) => {
-          this.pageObj.pageNo=1;
-          let oldPageObj = JSON.parse(JSON.stringify(this.pageObj));
-          if(column == 'multiParam'){
-            let $self=this;
-            if(content instanceof Array && content.length>0){
-              content.forEach(item=>{
-                $self.pageObj[item.key] = item.value;
-              })
-            }
-          }else{
-            this.pageObj[column] = content;
-          }
-          // let isSame = this.checkSearchLabel(JSON.parse(JSON.stringify(this.pageObj)), oldPageObj);
-          // isSame && this.getTableData();
-          this.getTableData();
-        });
-        bus.$on('alert-message-change',()=>{
-          this.getTableData()
-        });
-      },
-      dispatchEvent(event,param){
-        this.$nextTick(()=>{
-          bus.$emit(event,param)
-        })
-      },
-      loadKeys:function(){
-        this.$get('/asset/tagKey').then(res=>{
-          if(res.code == 200){
-            this.tagKeys = res.data.list.map(item=>{
-              return {label:item,prop:'tags',show:false,allowed: true,type:'tag'}
-
+      return detail
+    },
+    formatPingTime: function (str) {
+      if (!str) {
+        return this.$t('asset.assetStatPre') + this.$t('asset.assetStatDown')
+      }
+      const ds = '-'
+      const ts = ':'
+      const time = new Date(bus.UTCTimeToConfigTimezone(str))
+      const year = time.getFullYear()
+      const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
+      const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
+      const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
+      const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
+      return this.$t('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    },
+    initEvent () {
+      bus.$on('asset-filter-change', (column, content) => {
+        this.pageObj.pageNo = 1
+        if (column == 'multiParam') {
+          const $self = this
+          if (content instanceof Array && content.length > 0) {
+            content.forEach(item => {
+              $self.pageObj[item.key] = item.value
             })
-            this.resetTableTitle()
-          }
-        })
-      },
-      resetTableTitle:function(){
-        let title = this.tools.customTableTitle;
-
-        let tableTitle = title.slice(0,this.tableTitle.length);
-
-        let tagTitle = title.slice(this.tableTitle.length,title.length);
-
-        let $self=this;
-        let newTags = this.tagKeys.filter(item=>{ return !tagTitle.find(t =>{return item.label == t.label})})
-        let keepTags = tagTitle.filter(item=>{ return $self.tagKeys.find(t =>{return item.label == t.label})})
-
-        let result = tableTitle.concat([{label:'Tag',show:false,NotSet:true,type:'title',prop:'table-tag'}])
-
-        result = result.concat(keepTags).concat(newTags)
-
-        this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
-
-      },
-      filterTags:function(scope){
-        let tag=scope.column.label.split(' [Tag]')[0]
-        let tagVals=scope.row.tags
-        if(tagVals){
-          let showTag=tagVals.find(item=>{return item.tag == tag})
-          if(showTag){
-            return showTag.value
           }
+        } else {
+          this.pageObj[column] = content
         }
-      },
+        // let isSame = this.checkSearchLabel(JSON.parse(JSON.stringify(this.pageObj)), oldPageObj);
+        // isSame && this.getTableData();
+        this.getTableData()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getTableData()
+      })
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
+    dispatchEvent (event, param) {
+      this.$nextTick(() => {
+        bus.$emit(event, param)
+      })
     },
-    mounted() {
-      //初始化表头
-      let tableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-
-      this.tableTitleReset(this.tableTitle,tableTitle);
-
-      if (this.assetPingSwitch == 'off') {
-        this.dispatchEvent('asset-ping-switch-change',false)
-        for (let i in tableTitle) {
-          let label = tableTitle[i];
-          if (label.prop == 'pingStatus') {
-            label.show=false;
-            label.NotSet=true;
-            break;
-          }
+    loadKeys: function () {
+      this.$get('/asset/tagKey').then(res => {
+        if (res.code == 200) {
+          this.tagKeys = res.data.list.map(item => {
+            return { label: item, prop: 'tags', show: false, allowed: true, type: 'tag' }
+          })
+          this.resetTableTitle()
         }
-      }else{
-        for (let i in tableTitle) {
-          let label = tableTitle[i];
-          if (label.prop == 'pingStatus') {
-            label.show=true;
-            label.NotSet=false;
-            break;
-          }
-        }
-      }
-      this.tools.customTableTitle = tableTitle;
-
-      this.loadKeys();
-
-      //初始化数据
-      this.getUserData();
-
-      this.pageObj.idcId=this.headerCurrentDc;
-
-      this.getTableData();
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-      this.initEvent();
+      })
     },
-    beforeDestroy() {
-      bus.$off("asset-filter-change");
-      bus.$off('alert-message-change');
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+    resetTableTitle: function () {
+      const title = this.tools.customTableTitle
+
+      const tableTitle = title.slice(0, this.tableTitle.length)
+
+      const tagTitle = title.slice(this.tableTitle.length, title.length)
+
+      const $self = this
+      const newTags = this.tagKeys.filter(item => { return !tagTitle.find(t => { return item.label == t.label }) })
+      const keepTags = tagTitle.filter(item => { return $self.tagKeys.find(t => { return item.label == t.label }) })
+
+      let result = tableTitle.concat([{ label: 'Tag', show: false, NotSet: true, type: 'title', prop: 'table-tag' }])
+
+      result = result.concat(keepTags).concat(newTags)
+
+      this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
+    },
+    filterTags: function (scope) {
+      const tag = scope.column.label.split(' [Tag]')[0]
+      const tagVals = scope.row.tags
+      if (tagVals) {
+        const showTag = tagVals.find(item => { return item.tag == tag })
+        if (showTag) {
+          return showTag.value
+        }
       }
     }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    const tableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+
+    this.tableTitleReset(this.tableTitle, tableTitle)
+
+    if (this.assetPingSwitch == 'off') {
+      this.dispatchEvent('asset-ping-switch-change', false)
+      for (const i in tableTitle) {
+        const label = tableTitle[i]
+        if (label.prop == 'pingStatus') {
+          label.show = false
+          label.NotSet = true
+          break
+        }
+      }
+    } else {
+      for (const i in tableTitle) {
+        const label = tableTitle[i]
+        if (label.prop == 'pingStatus') {
+          label.show = true
+          label.NotSet = false
+          break
+        }
+      }
+    }
+    this.tools.customTableTitle = tableTitle
+
+    this.loadKeys()
+
+    // 初始化数据
+    this.getUserData()
+
+    this.pageObj.idcId = this.headerCurrentDc
+
+    this.getTableData()
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+    this.initEvent()
+  },
+  beforeDestroy () {
+    bus.$off('asset-filter-change')
+    bus.$off('alert-message-change')
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/page/asset/cloneChat.vue b/nezha-fronted/src/components/page/asset/cloneChat.vue
index c9c646063..4ee51991d 100644
--- a/nezha-fronted/src/components/page/asset/cloneChat.vue
+++ b/nezha-fronted/src/components/page/asset/cloneChat.vue
@@ -19,7 +19,7 @@
                     <el-submenu index="2">
                         <template slot="title">打开</template>
                         <template v-for="(item, index) in enableAsset">
-                            <el-menu-item :index="'2-' + index" @click="createCli(item)">{{item.host}}</el-menu-item>
+                            <el-menu-item :key="index" :index="'2-' + index" @click="createCli(item)">{{item.host}}</el-menu-item>
                         </template>
                     </el-submenu>
                 </el-menu>
@@ -66,7 +66,7 @@ export default {
   components: {
     'my-terminal': Console
   },
-  data() {
+  data () {
     return {
       dialogVisible: false,
       terminal: {
@@ -75,8 +75,8 @@ export default {
         cols: 400,
         rows: 400
       },
-      obj:{
-        id:''
+      obj: {
+        id: ''
       },
       uploadFile: {
         file: '',
@@ -85,81 +85,81 @@ export default {
       },
       pageObj: {
         pageNo: 1,
-        pageSize: 100,
+        pageSize: 100
       },
-      enableAsset:'',
-      host:'',
-      token:'',
-      routeData: this.$route.query,
+      enableAsset: '',
+      host: '',
+      token: '',
+      routeData: this.$route.query
     }
   },
   watch: {
   },
   methods: {
-    createCli(item){
-      let routeData = this.$router.resolve({
-        name: "newChat",
+    createCli (item) {
+      const routeData = this.$router.resolve({
+        name: 'newChat',
         query: {
           host: item.host,
-          accountId:item.accounts[0].id
+          accountId: item.accounts[0].id
         }
-      });
-      window.open(routeData.href);
+      })
+      window.open(routeData.href)
     },
-    cloneChat(){
-      let routeData = this.$router.resolve({
-        name: "cloneChat",
+    cloneChat () {
+      const routeData = this.$router.resolve({
+        name: 'cloneChat',
         query: {
-          host:this.routeData.host,
-          accountId:this.routeData.accountId
+          host: this.routeData.host,
+          accountId: this.routeData.accountId
         }
-      });
-      window.open(routeData.href);
+      })
+      window.open(routeData.href)
     },
-    getConnect(id,token) {
-      this.$get('account/reopen.do?id='+id+"&token="+token).then(res => {
+    getConnect (id, token) {
+      this.$get('account/reopen.do?id=' + id + '&token=' + token).then(res => {
         if (res.code === 200) {
           this.token = res.data.token
-          sessionStorage.setItem("cliToken", this.token);
+          sessionStorage.setItem('cliToken', this.token)
         }
       })
     },
-    handleChange(file) {
+    handleChange (file) {
       this.uploadFile.file = file.raw
     },
-    upload() {
+    upload () {
       this.uploadFile.token = this.token
-      let form = new FormData();
-      form.append("token", this.token);
-      form.append("file", this.uploadFile.file);
-      form.append("path", this.uploadFile.path);
+      const form = new FormData()
+      form.append('token', this.token)
+      form.append('file', this.uploadFile.file)
+      form.append('path', this.uploadFile.path)
       this.$post('account/upload.do', form).then(res => {
         if (res.code === 200) {
           // console.log(res)
         }
       })
     },
-    getAssetData() {
+    getAssetData () {
       this.$get('asset', this.pageObj).then(response => {
         if (response.code === 200) {
-          this.assetData = response.data.list;
+          this.assetData = response.data.list
           this.enableAsset = this.assetData.filter(item => {
             return item.accounts.length > 0
           })
         }
       })
-    },
+    }
   },
-  mounted() {
+  mounted () {
     if (this.routeData) {
       this.host = this.routeData.host
       document.title = this.host
     }
     this.getAssetData()
-    if(sessionStorage.getItem('cliToken')){
-      this.getConnect(this.routeData.accountId,sessionStorage.getItem('cliToken'))
+    if (sessionStorage.getItem('cliToken')) {
+      this.getConnect(this.routeData.accountId, sessionStorage.getItem('cliToken'))
     }
-  },
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/page/asset/components/alert.vue b/nezha-fronted/src/components/page/asset/components/alert.vue
new file mode 100644
index 000000000..d6e92e734
--- /dev/null
+++ b/nezha-fronted/src/components/page/asset/components/alert.vue
@@ -0,0 +1,50 @@
+<template>
+  <el-tooltip :content="row.alertNum+' '+ translation('overall.active')" :disabled="row.alertNum < 99" effect="light" placement="top">
+    <span :id="'asset-alerts-'+row.id" :class="color" class="link" @click="jumpToAlertMsg">
+      {{(row.alertNum < 99 ? row.alertNum : 99)}}
+        <sup v-if="row.alertNum > 99" class="linkSup">+</sup>
+      {{' ' + translation('overall.active')}}
+    </span>
+  </el-tooltip>
+</template>
+
+<script>
+import bus from '../../../../libs/bus'
+
+export default {
+  name: 'alert',
+  props: ['rowIndex', 'model', 'prop', 'data', 'column'],
+  data () {
+    return {
+      row: {}
+    }
+  },
+  computed: {
+    color () {
+      if (this.row.alertNum > 0) {
+        return 'danger'
+      } else {
+        return 'success'
+      }
+    }
+  },
+  methods: {
+    jumpToAlertMsg () {
+      bus.$emit('show-alert', this.row)
+    }
+  },
+  watch: {
+    model: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.row = JSON.parse(JSON.stringify(n))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/asset/components/endpoint.vue b/nezha-fronted/src/components/page/asset/components/endpoint.vue
new file mode 100644
index 000000000..baa9bfcc0
--- /dev/null
+++ b/nezha-fronted/src/components/page/asset/components/endpoint.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-tooltip effect="light" placement="right">
+    <template slot="content">
+      {{translation('asset.down')}} / {{translation('asset.suspended')}} / {{translation('asset.total')}}
+    </template>
+    <span :class="color" class="link" style="padding: 2px 8px" @click="showEndpoint">{{model.endpointDownNum}}/{{model.endpointSuspendedNum}}/{{model.endpointNum}}</span>
+  </el-tooltip>
+</template>
+
+<script>
+import bus from '../../../../libs/bus'
+
+export default {
+  name: 'endpoint',
+  props: ['rowIndex', 'model', 'prop', 'data', 'column'],
+  computed: {
+    color () {
+      if (this.model.state == 3) {
+        return 'suspended'
+      } else {
+        if (this.model.endpointDownNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+    }
+  },
+  methods: {
+    showEndpoint () {
+      bus.$emit('show-endpoint', this.model)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/asset/components/operation.vue b/nezha-fronted/src/components/page/asset/components/operation.vue
new file mode 100644
index 000000000..87a260eef
--- /dev/null
+++ b/nezha-fronted/src/components/page/asset/components/operation.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <span :id="'asset-detail-'+row.id" :title="translation('overall.view')" class="content-right-option" @click.stop="detail"><i
+      class="nz-icon nz-icon-view"></i>
+              </span>
+      &nbsp;
+      <span :id="'asset-edit-'+row.id" v-has="'asset_toEdit'" :title="translation('overall.edit')" class="content-right-option" @click.stop="edit"><i
+        class="nz-icon nz-icon-edit"></i>
+              </span>
+      &nbsp;
+      <span :id="'asset-del-'+row.id" v-has="'asset_delete'" :title="translation('overall.delete')" class="content-right-option" @click.stop="del"><i
+        class="nz-icon nz-icon-delete"></i>
+              </span>
+      &nbsp;
+      <el-dropdown v-has="'asset_connect'" trigger="hover" @command="cli">
+        <span :id="'asset-ssh-'+row.id" class="content-right-option" title="CLI"><i
+          :class="{'gray-filter': !row.accounts || row.accounts.length === 0 || (row.accounts.length === 1 && row.accounts.find(t => t.protocol === 'SNMP'))}" class="nz-icon nz-icon-cli"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="(account, index) in row.accounts" v-if="account && account.protocol !== 'SNMP'" :key="index" :command="[row.id ,row.host, account]">{{account.protocol}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+  </div>
+</template>
+
+<script>
+import bus from '../../../../libs/bus'
+
+export default {
+  name: 'operation',
+  props: ['rowIndex', 'model', 'prop', 'data', 'column'],
+  data () {
+    return {
+      row: {}
+    }
+  },
+  methods: {
+    edit () {
+      bus.$emit('asset-edit', this.row)
+    },
+    del () {
+      bus.$emit('asset-delete', this.row)
+    },
+    detail () {
+      bus.$emit('asset-detail', this.row)
+    },
+    cli () {
+      bus.$emit('asset-cli', this.row)
+    }
+  },
+  watch: {
+    model: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.row = JSON.parse(JSON.stringify(n))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/asset/components/ping.vue b/nezha-fronted/src/components/page/asset/components/ping.vue
new file mode 100644
index 000000000..77d75b805
--- /dev/null
+++ b/nezha-fronted/src/components/page/asset/components/ping.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-popover
+    :content="formatPingTime(model.pingLastUpdate)"
+    placement="bottom"
+    trigger="hover"
+    width="200"
+  >
+    <div slot="reference" style="width: 100%">
+      <div :class="{'active-icon green':model.pingState == 1,'active-icon red':model.pingState == 0}"></div><span>{{model.pingRtt ? model.pingRtt+'ms':''}}</span>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import bus from '../../../../libs/bus'
+export default {
+  name: 'ping',
+  props: ['rowIndex', 'model', 'prop', 'data', 'column'],
+  methods: {
+    formatPingTime (str) {
+      if (!str || str == '') {
+        return this.translation('asset.assetStatPre') + this.translation('asset.assetStatDown')
+      }
+      const ds = '-'
+      const ts = ':'
+      const time = new Date(bus.UTCTimeToConfigTimezone(str))
+      const year = time.getFullYear()
+      const month = time.getMonth() + 1 > 9 ? time.getMonth() + 1 : ('0' + (time.getMonth() + 1))
+      const day = time.getDate() > 9 ? time.getDate() : ('0' + time.getDate())
+      const hours = time.getHours() > 9 ? time.getHours() : ('0' + time.getHours())
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : ('0' + time.getMinutes())
+      const seconds = time.getSeconds() > 9 ? time.getSeconds() : ('0' + time.getSeconds())
+      return this.translation('asset.assetStatPre') + year + ds + month + ds + day + ' ' + hours + ts + minutes + ts + seconds
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/asset/endpointStatusPop.vue b/nezha-fronted/src/components/page/asset/endpointStatusPop.vue
index f328ee888..d183e7aca 100644
--- a/nezha-fronted/src/components/page/asset/endpointStatusPop.vue
+++ b/nezha-fronted/src/components/page/asset/endpointStatusPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-popover :placement="placement" width="300"  @hide="" ref="endpointPop" v-model="popBox.show" popper-class="nz-pop" @show="atShowPop">
+    <el-popover ref="endpointPop" v-model="popBox.show" :placement="placement" popper-class="nz-pop" width="300" @show="atShowPop">
       <div class="pop-box-title">
         <div class="pop-top-btns">
           <button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
@@ -26,14 +26,14 @@
             class="pop-box-table">
             <el-table-column >
               <template slot-scope="scope" :column="item">
-                <span class="link" @click="" >{{scope.row.name}}</span>
+                <span class="link">{{scope.row.name}}</span>
               </template>
             </el-table-column>
             <el-table-column type="expand">
-              <template slot-scope="props">
+              <template>
                 <div class="table-inner">
-                  <template v-for="(item,index) in filterEndpoints()">
-                    <div class="inner-row">
+                  <template v-for="(item, index) in filterEndpoints()">
+                    <div :key="index" class="inner-row">
                       <div class="inner-col left">ID：{{item.id}}</div>
                       <div class="inner-col right">
                         <el-popover placement="right"  width="50" trigger="hover" :content="(item.state == 1?'up':'down')+'['+(item.lastUpdate&&item.lastUpdate!=''?(new Date(item.lastUpdate).getHours()+':'+new Date(item.lastUpdate).getMinutes()):'--')+']'" >
@@ -59,116 +59,116 @@
 </template>
 
 <script>
-  import {resetZIndex} from '../../common/js/common'
-    export default {
-      name: "endpointStatusPop",
-      props:{
-        placement:{type:String,default:'left'},
-        assetId:{type:Number,required:true}
-      },
-      data(){
-        let temp=this;
-        return{
-          popBox:{title:this.$t('project.endpoint.endpoint'),show:false},
-          endpointDatas:[],
-          endpoints:[],
-          modules:[],
-          projects:new Map(),
-          showModule:null,
-          showProject:null,
-          getRowKeys(row) {
-            if(temp.showModule&&row.id==temp.showModule.id){
-              temp.$refs.popTab.toggleRowExpansion(row,true);
-              // temp.$refs.popTab.setCurrentRow(row);
-            }
-            return row.id
-          },
-          expands:[],
+import { resetZIndex } from '../../common/js/common'
+export default {
+  name: 'endpointStatusPop',
+  props: {
+    placement: { type: String, default: 'left' },
+    assetId: { type: Number, required: true }
+  },
+  data () {
+    const temp = this
+    return {
+      popBox: { title: this.$t('project.endpoint.endpoint'), show: false },
+      endpointDatas: [],
+      endpoints: [],
+      modules: [],
+      projects: new Map(),
+      showModule: null,
+      showProject: null,
+      getRowKeys (row) {
+        if (temp.showModule && row.id == temp.showModule.id) {
+          temp.$refs.popTab.toggleRowExpansion(row, true)
+          // temp.$refs.popTab.setCurrentRow(row);
         }
+        return row.id
       },
-      created() {
-
-      },
-      methods:{
-        getEndpointDatas:function(){
-          this.$get('/endpoint?assetId='+this.assetId+'pageSize=-1').then(response => {
-            if (response.code === 200) {
-              this.endpointDatas = response.data.list;
-              this.dealDatas(JSON.parse(JSON.stringify(this.endpointDatas)));
-            }
-          });
-        },
-        dealDatas:function(endpointDatas){ //为方便组织结构，将数据分层
-          let temp=this;
-          temp.endpoints=[];
-          temp.modules=[];
-          temp.projects.clear();
-          temp.showModule=null;
-          temp.showProject=null;
-          endpointDatas.forEach((item,index)=>{
-            let module=JSON.parse(JSON.stringify(item.module));
-            module.projectId=item.project.id;
-            temp.modules.push(module);
-            let project=JSON.parse(JSON.stringify(item.project));
-            temp.projects.set(project.id,project);
-            delete item.module;
-            delete item.project;
-            temp.endpoints.push(item);
-          })
-          this.modules=this.duplicateRemoval(this.modules);
-          this.initShow();
-        },
-        duplicateRemoval:function(arr){
-          const res = new Map();
-          return arr.filter(a=>{
-            return !res.has(a.id) && res.set(a.id,1);
-          })
-        },
-        initShow:function(){
-          if(!this.showModule){
-            this.showModule=this.modules[0];
-          }
-        },
-        filterEndpoints:function(){
-          if(this.showModule){
-            return this.endpoints.filter((item)=>{
-              return item.moduleId==this.showModule.id;
-            })
-          }
-        },
-        expandSelect(row, expandedRows) {//只能展开一行
-          this.expands = []
-          if (expandedRows.length > 0) {
-            row ? this.expands.push(row.id) : '';
-            this.showModule=row;
-            this.showProject=this.projects.get(row.projectId);
-          }
-        },
-        esc:function(){
-          this.popBox.show=false;
-        },
-        resetZIndex,
-        atShowPop:function(){
-          this.getEndpointDatas();
-        },
-        clickTabRow:function(row, column, event){
-          this.$refs.popTab.toggleRowExpansion(row);
-        }
-      },
-      mounted() {
-      },
-      watch:{
-        showModule:{
-          handler(n,o){
-            if(!n){
-             n=this.modules && this.modules.length>0?this.modules[0]:null;
-            }
-            this.showProject=this.projects.get(n.projectId);
-          }
-        }
-      }
-
+      expands: []
     }
+  },
+  created () {
+
+  },
+  methods: {
+    getEndpointDatas: function () {
+      this.$get('/endpoint?assetId=' + this.assetId + 'pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.endpointDatas = response.data.list
+          this.dealDatas(JSON.parse(JSON.stringify(this.endpointDatas)))
+        }
+      })
+    },
+    dealDatas: function (endpointDatas) { // 为方便组织结构，将数据分层
+      const temp = this
+      temp.endpoints = []
+      temp.modules = []
+      temp.projects.clear()
+      temp.showModule = null
+      temp.showProject = null
+      endpointDatas.forEach((item, index) => {
+        const module = JSON.parse(JSON.stringify(item.module))
+        module.projectId = item.project.id
+        temp.modules.push(module)
+        const project = JSON.parse(JSON.stringify(item.project))
+        temp.projects.set(project.id, project)
+        delete item.module
+        delete item.project
+        temp.endpoints.push(item)
+      })
+      this.modules = this.duplicateRemoval(this.modules)
+      this.initShow()
+    },
+    duplicateRemoval: function (arr) {
+      const res = new Map()
+      return arr.filter(a => {
+        return !res.has(a.id) && res.set(a.id, 1)
+      })
+    },
+    initShow: function () {
+      if (!this.showModule) {
+        this.showModule = this.modules[0]
+      }
+    },
+    filterEndpoints: function () {
+      if (this.showModule) {
+        return this.endpoints.filter((item) => {
+          return item.moduleId == this.showModule.id
+        })
+      }
+    },
+    expandSelect (row, expandedRows) { // 只能展开一行
+      this.expands = []
+      if (expandedRows.length > 0) {
+        row && this.expands.push(row.id)
+        this.showModule = row
+        this.showProject = this.projects.get(row.projectId)
+      }
+    },
+    esc: function () {
+      this.popBox.show = false
+    },
+    resetZIndex,
+    atShowPop: function () {
+      this.getEndpointDatas()
+    },
+    clickTabRow: function (row, column, event) {
+      this.$refs.popTab.toggleRowExpansion(row)
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    showModule: {
+      handler (n, o) {
+        if (!n) {
+          n = this.modules && this.modules.length > 0 ? this.modules[0] : null
+        }
+        this.showProject = this.projects.get(n.projectId)
+      }
+    }
+  }
+
+}
 </script>
 
 <style scoped>
@@ -247,4 +247,3 @@
   }
 
 </style>
-
diff --git a/nezha-fronted/src/components/page/asset/moduleListPop.vue b/nezha-fronted/src/components/page/asset/moduleListPop.vue
index 3789ca6e3..1726f4f72 100644
--- a/nezha-fronted/src/components/page/asset/moduleListPop.vue
+++ b/nezha-fronted/src/components/page/asset/moduleListPop.vue
@@ -35,14 +35,14 @@
 
 <script>
 export default {
-  name: "moduleListPop",
-  props:{
-    assetId: {type: String},
-    placement: {type: String}
+  name: 'moduleListPop',
+  props: {
+    assetId: { type: String },
+    placement: { type: String }
   },
-  data() {
+  data () {
     return {
-      popBox: {show: false},
+      popBox: { show: false },
       moduleList: [],
       pageObj: {
         pageNo: 1,
@@ -53,26 +53,26 @@ export default {
     }
   },
   methods: {
-    getModuleList() {
+    getModuleList () {
       this.$get('module', this.pageObj).then(response => {
         if (response.code === 200) {
-          this.moduleList = response.data.list;
+          this.moduleList = response.data.list
         }
-      });
+      })
     },
-    hidePop() {
-      this.pageObj.name = '';
-      this.moduleList = [];
+    hidePop () {
+      this.pageObj.name = ''
+      this.moduleList = []
     },
-    show(show) {
-      this.popBox.show = show;
+    show (show) {
+      this.popBox.show = show
     }
   },
-  watch:{
-    assetId:{
-      immediate:true,
-      handler(n,o){
-        this.pageObj.assetId=n;
+  watch: {
+    assetId: {
+      immediate: true,
+      handler (n, o) {
+        this.pageObj.assetId = n
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/config/about.vue b/nezha-fronted/src/components/page/config/about.vue
index 54c89955b..28dd17669 100644
--- a/nezha-fronted/src/components/page/config/about.vue
+++ b/nezha-fronted/src/components/page/config/about.vue
@@ -19,27 +19,27 @@
   </div>
 </template>
 <script>
-  export default {
-    name: "about",
-    data() {
-      return {
-        version: {
-          nezha: {name: "", version: ""},
-          components: [{name: "", version: ""}]
-        }
+export default {
+  name: 'about',
+  data () {
+    return {
+      version: {
+        nezha: { name: '', version: '' },
+        components: [{ name: '', version: '' }]
       }
-    },
-    methods: {
-      getVersion() {
-        this.$get("/about").then(response => {
-          this.version = response.data;
-        });
-      }
-    },
-    mounted() {
-      this.getVersion();
-    },
+    }
+  },
+  methods: {
+    getVersion () {
+      this.$get('/about').then(response => {
+        this.version = response.data
+      })
+    }
+  },
+  mounted () {
+    this.getVersion()
   }
+}
 </script>
 <style scoped lang="scss">
   .about {
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 179af0419..3d13249e0 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -74,7 +74,7 @@
           :prop="item.prop"
           :sort-orders="['ascending', 'descending']"
         >
-          <template slot-scope="scope" slot="header">
+          <template slot="header">
             <span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
             <span v-else><span>{{item.label}}</span></span>
           </template>
@@ -86,8 +86,8 @@
             </div>
             <template v-if="item.prop == 'roles'">
               <template v-if="scope.row[item.prop]">
-                <template  v-for="role in scope.row[item.prop]">
-                  <span class="account-role-item" v-if="role">{{role.i18n?$t(role.i18n):role.name}}</span>
+                <template v-for="(role, index) in scope.row[item.prop]">
+                  <span v-if="role" :key="index" class="account-role-item">{{role.i18n?$t(role.i18n):role.name}}</span>
                 </template>
               </template>
               <template v-else>
@@ -110,7 +110,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28" fixed="right">
-          <template slot="header" slot-scope="scope" :resizable="false">
+          <template slot="header" :resizable="false">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -133,371 +133,370 @@
   </div>
 </template>
 <script>
-  import deleteButton from "../../common/deleteButton";
-  import accountBox from '../../common/rightBox/accountBox';
-  import bus from "../../../libs/bus";
+import deleteButton from '../../common/deleteButton'
+import accountBox from '../../common/rightBox/accountBox'
+import bus from '../../../libs/bus'
 
-  export default {
-    name: "account",
-    components: {
-      'account-box': accountBox,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          userDetail: {},
-          user: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
+export default {
+  name: 'account',
+  components: {
+    'account-box': accountBox,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        userDetail: {},
         user: {},
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
-        blankUser: { //空白对象
-          userId: '',
-          username: '',
-          email: '',
-          status: '1',
-          createTime: '',
-          receiver: [],
-          roleIds:0,
-          roles:[],
-          lang: '',
-          notifications: []
-        },
-        pageObj: { //分页对象
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [ //原table列
-          {
-            label: 'ID',
-            prop: 'userId',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("config.account.account"),
-            prop: 'username',
-            show: true,
-          }, {
-            label: this.$t("config.account.roles"),
-            prop: 'roles',
-            show: true,
-          }, {
-            label: 'E-mail',
-            prop: 'email',
-            show: true,
-          }, {
-            label: this.$t('config.account.createTime'),
-            prop: 'createTime',
-            show: true,
-          }, {
-            label: this.$t('config.account.enable'),
-            prop: 'status',
-            show: true,
-            width: 100
-          }, {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: this.$t('config.account.account'),
-            type: 'input',
-            label: 'username',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag:false,
-        roles:[],
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      user: {},
+
+      tableId: 'accountTable', // 需要分页的table的id，用于记录每页数量
+      blankUser: { // 空白对象
+        userId: '',
+        username: '',
+        email: '',
+        status: '1',
+        createTime: '',
+        receiver: [],
+        roleIds: 0,
+        roles: [],
+        lang: '',
+        notifications: []
+      },
+      pageObj: { // 分页对象
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'userId',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.account.account'),
+          prop: 'username',
+          show: true
+        }, {
+          label: this.$t('config.account.roles'),
+          prop: 'roles',
+          show: true
+        }, {
+          label: 'E-mail',
+          prop: 'email',
+          show: true
+        }, {
+          label: this.$t('config.account.createTime'),
+          prop: 'createTime',
+          show: true
+        }, {
+          label: this.$t('config.account.enable'),
+          prop: 'status',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('config.account.account'),
+          type: 'input',
+          label: 'username',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false,
+      roles: []
+    }
+  },
+  methods: {
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    convertToDetail (obj) {
+      const detail = []
+      detail.push({ label: this.$t('config.account.account'), value: obj.username })
+      detail.push({ label: 'E-mail', value: obj.email })
+      const available = obj.status == 1 ? this.$t('tip.yes') : this.$t('tip.no')
+      detail.push({ label: this.$t('config.account.enable'), value: available })
+      detail.push({ label: this.$t('config.account.createTime'), value: obj.createTime })
+      return detail
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    methods: {
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      convertToDetail(obj) {
-        let detail = [];
-        detail.push({label: this.$t("config.account.account"), value: obj.username});
-        detail.push({label: "E-mail", value: obj.email});
-        let available = obj.status == 1 ? this.$t("tip.yes") : this.$t("tip.no");
-        detail.push({label: this.$t("config.account.enable"), value: available});
-        detail.push({label: this.$t("config.account.createTime"), value: obj.createTime});
-        return detail;
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
-      edit(u) {
-        this.user = JSON.parse(JSON.stringify(u));
-        if(!this.user.userId){
-          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
-        }
-        this.rightBox.show = true;
-      },
-      detail(u) {
-        this.bottomBox.user = JSON.parse(JSON.stringify(u));
-        this.bottomBox.targetTab = "detail";
-        this.bottomBox.showSubList = true;
-      },
-      del(u) {
-        if(u.userId==1&&u.username==='admin'){return}
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('account_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('sys/user/list', this.searchLabel).then(response => {
-          this.tools.loading = false;
+    edit (u) {
+      this.user = JSON.parse(JSON.stringify(u))
+      if (!this.user.userId) {
+        this.user.roleIds = this.roles.find(t => t.name == 'common').id
+      }
+      this.rightBox.show = true
+    },
+    detail (u) {
+      this.bottomBox.user = JSON.parse(JSON.stringify(u))
+      this.bottomBox.targetTab = 'detail'
+      this.bottomBox.showSubList = true
+    },
+    del (u) {
+      if (u.userId == 1 && u.username === 'admin') { return }
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/user/delete?userIds=' + u.userId).then(response => {
           if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              response.data.list[i].status = response.data.list[i].status + "";
-            }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.accountTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
-          }
-        })
-      },
-      add() {
-        this.user = this.newUser();
-        if(!this.user.userId){
-          this.user.roleIds = this.roles.find(t=>t.name == 'common').id;
-        }
-        this.rightBox.show = true;
-      },
-      statusChange(user) {
-        if(user.roles){
-          user.roleIds=user.roles.map(t=>t.id)
-        }
-        this.$put('sys/user/update', user).then(response => {
-          if (response.code === 200) {
-            this.rightBox.show = false;
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
           } else {
-            this.$message.error(response.msg);
-          }
-          this.getTableData();
-        });
-      },
-      esc() {
-        this.rightBox.show = false;
-      },
-      newUser() {
-        return JSON.parse(JSON.stringify(this.blankUser));
-      },
-      getRoles:function(){
-        this.roles = [];
-        this.$get("sys/role?pageSize=-1").then(response=>{
-          if (response.code  == 200){
-            this.roles = response.data.list;
-          }else{
-            this.$message.error("load roles faild")
+            this.$message.error(response.msg)
           }
         })
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
+      })
+    },
+    getTableData () {
+      if (!this.hasButton('account_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('sys/user/list', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.accountTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-        if(this.$refs.accountTable){
-          this.$refs.accountTable.bodyWrapper.scrollTop = 0;
+      })
+    },
+    add () {
+      this.user = this.newUser()
+      if (!this.user.userId) {
+        this.user.roleIds = this.roles.find(t => t.name == 'common').id
+      }
+      this.rightBox.show = true
+    },
+    statusChange (user) {
+      if (user.roles) {
+        user.roleIds = user.roles.map(t => t.id)
+      }
+      this.$put('sys/user/update', user).then(response => {
+        if (response.code === 200) {
+          this.rightBox.show = false
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(response.msg)
         }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
+        this.getTableData()
+      })
+    },
+    esc () {
+      this.rightBox.show = false
+    },
+    newUser () {
+      return JSON.parse(JSON.stringify(this.blankUser))
+    },
+    getRoles: function () {
+      this.roles = []
+      this.$get('sys/role?pageSize=-1').then(response => {
+        if (response.code == 200) {
+          this.roles = response.data.list
+        } else {
+          this.$message.error('load roles faild')
         }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      resetTableTitle:function(){
-        let title = this.tools.customTableTitle;
-        let tableTitle = title.slice(0, this.tableTitle.length);
-        let tagTitle = title.slice(this.tableTitle.length, title.length);
-        this.$get("/alert/script?pageNo=1&pageSize=-1").then(response => {
-          let scripts = response.data.list;
-          scripts = scripts.map(item => {
-            return {label: item.name, prop: 'tags', show: false, allowed: true, scriptId: item.id, type: "tag"};
-          });
-          let newTags = scripts.filter(item=>{ return !tagTitle.find(t =>{return item.label == t.label})});
-          let keepTags = tagTitle.filter(item=>{ return scripts.find(t =>{return item.label == t.label})});
-          keepTags.forEach(item => {
-            let script = scripts.find(t =>{return item.label == t.label});
-            item.scriptId = script.scriptId;
-          });
-          let result = tableTitle.concat([{label: this.$t("config.account.notification"), show: false, NotSet: true, type: 'title', prop:'table-tag'}]);
+      }
+      if (this.$refs.accountTable) {
+        this.$refs.accountTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    },
+    resetTableTitle: function () {
+      const title = this.tools.customTableTitle
+      const tableTitle = title.slice(0, this.tableTitle.length)
+      const tagTitle = title.slice(this.tableTitle.length, title.length)
+      this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
+        let scripts = response.data.list
+        scripts = scripts.map(item => {
+          return { label: item.name, prop: 'tags', show: false, allowed: true, scriptId: item.id, type: 'tag' }
+        })
+        const newTags = scripts.filter(item => { return !tagTitle.find(t => { return item.label == t.label }) })
+        const keepTags = tagTitle.filter(item => { return scripts.find(t => { return item.label == t.label }) })
+        keepTags.forEach(item => {
+          const script = scripts.find(t => { return item.label == t.label })
+          item.scriptId = script.scriptId
+        })
+        let result = tableTitle.concat([{ label: this.$t('config.account.notification'), show: false, NotSet: true, type: 'title', prop: 'table-tag' }])
 
-          result = result.concat(keepTags).concat(newTags);
-          this.tools.customTableTitle = JSON.parse(JSON.stringify(result));
-        });
-        /*let scripts = [
+        result = result.concat(keepTags).concat(newTags)
+        this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
+      })
+      /* let scripts = [
           {id: 1, name: "DOLBY"},
           {id: 2, name: "IMAX"},
           {id: 3, name: "CGS"},
           {id: 4, name: "LUXE"},
           {id: 5, name: "DST:X"},
-        ];*/
-      },
-      filterTags(head, scope) {
-        if (scope.row.notifications) {
-          let notification = scope.row.notifications.find(item => {
-            return head.scriptId === item.scriptId;
-          });
-          if (notification) {
-            return notification.account;
-          }
+        ]; */
+    },
+    filterTags (head, scope) {
+      if (scope.row.notifications) {
+        const notification = scope.row.notifications.find(item => {
+          return head.scriptId === item.scriptId
+        })
+        if (notification) {
+          return notification.account
         }
       }
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-    },
-    computed: {
-      isCurrentUser() {
-        return function(username) {
-          return localStorage.getItem('nz-username') == username;
-        }
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    }
+  },
+  watch: {
+    'bottomBox.user': {
+      deep: true,
+      handler (n) {
+        this.bottomBox.userDetail = this.convertToDetail(n)
       }
     },
-    watch: {
-      'bottomBox.user': {
-        deep: true,
-        handler(n) {
-          this.bottomBox.userDetail = this.convertToDetail(n);
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
         }
-      },
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.accountTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
 
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.accountTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
         }
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-      this.getRoles();
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+    this.getRoles()
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
 
-      this.resetTableTitle();
-      this.getTableData();
-    },
+    this.resetTableTitle()
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/assetState.vue b/nezha-fronted/src/components/page/config/assetState.vue
index 406c5967e..d23903796 100644
--- a/nezha-fronted/src/components/page/config/assetState.vue
+++ b/nezha-fronted/src/components/page/config/assetState.vue
@@ -100,7 +100,7 @@
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="28">
-          <template :resizable="false" slot="header" slot-scope="scope">
+          <template slot="header" :resizable="false">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -119,285 +119,285 @@
   </div>
 </template>
 <script>
-  import deleteButton from "../../common/deleteButton";
-  import assetStateBox from "../../common/rightBox/assetStateBox";
-  import bus from "../../../libs/bus";
+import deleteButton from '../../common/deleteButton'
+import assetStateBox from '../../common/rightBox/assetStateBox'
+import bus from '../../../libs/bus'
 
-  export default {
-    name: "asset-state-list",
-    components: {
-      'delete-button': deleteButton,
-      'asset-state-box': assetStateBox,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          assetStateDetail: {},
-          assetState: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
+export default {
+  name: 'asset-state-list',
+  components: {
+    'delete-button': deleteButton,
+    'asset-state-box': assetStateBox
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        assetStateDetail: {},
         assetState: {},
-        assetStateData: [],
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        tableId: 'assetStateTable', //需要分页的table的id，用于记录每页数量
-        blankAssetState: { //空白对象
-          id: "", name: "", ping: 0, monitor: 0, alert: 0, remark: "",
-        },
-        pageObj: { //分页对象
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [ //原table列
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("overall.name"),
-            prop: 'name',
-            show: true,
-          }, {
-            label: "Ping",
-            prop: 'ping',
-            show: true,
-          }, {
-            label: this.$t("config.assetState.monitor"),
-            prop: 'monitor',
-            show: true,
-          }, {
-            label: this.$t("config.assetState.alert"),
-            prop: 'alert',
-            show: true,
-          }, {
-            label: this.$t("config.assetState.assetTotal"),
-            prop: 'assetTotal',
-            show: true,
-          }, {
-            label: this.$t('overall.remark'),
-            prop: 'remark',
-            show: true,
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: this.$t('overall.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag: false,
-      }
-    },
-    methods: {
-      // 全屏
-      /*fullScreen() {
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      assetState: {},
+      assetStateData: [],
+
+      tableId: 'assetStateTable', // 需要分页的table的id，用于记录每页数量
+      blankAssetState: { // 空白对象
+        id: '', name: '', ping: 0, monitor: 0, alert: 0, remark: ''
+      },
+      pageObj: { // 分页对象
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: 'Ping',
+          prop: 'ping',
+          show: true
+        }, {
+          label: this.$t('config.assetState.monitor'),
+          prop: 'monitor',
+          show: true
+        }, {
+          label: this.$t('config.assetState.alert'),
+          prop: 'alert',
+          show: true
+        }, {
+          label: this.$t('config.assetState.assetTotal'),
+          prop: 'assetTotal',
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    // 全屏
+    /* fullScreen() {
         let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
-      },*/
-      // 退出全屏
-      /*exitFullScreen() {
+      }, */
+    // 退出全屏
+    /* exitFullScreen() {
         let vm = this;
         this.$bottomBoxWindow.exitFullScreen(vm);
-      },*/
-      // 鼠标拖动二级列表
-      /*listResize(e) {
+      }, */
+    // 鼠标拖动二级列表
+    /* listResize(e) {
         let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
-      },*/
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag = true;
-          this.getTableData();
-        }
-      },
-      edit(u) {
-        this.assetState = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-      },
-      /*detail(u) {
+      }, */
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    edit (u) {
+      this.assetState = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    /* detail(u) {
         this.bottomBox.assetState = JSON.parse(JSON.stringify(u));
         this.bottomBox.targetTab = "detail";
         this.bottomBox.showSubList = true;
-      },*/
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("/asset/stateConf?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      statusChange(obj) {
-        this.$nextTick(() => {
-          this.$put('/asset/stateConf', obj).then(response => {
-            if (response.code === 200) {
-              this.rightBox.show = false;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-            } else {
-              this.$message.error(response.msg);
-            }
-            this.getTableData();
-          });
-        });
-      },
-      getTableData() {
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        if (!this.scrollbarWrap) {
-          this.$nextTick(() => {
-            this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper;
-            this.toTopBtnHandler(this.scrollbarWrap);
-          });
-        }
-        this.tools.loading = true;
-        this.$get('/asset/stateConf', this.searchLabel).then(response => {
-          this.tools.loading = false;
+      }, */
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/asset/stateConf?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              response.data.list[i].status = response.data.list[i].status + "";
-            }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      add() {
-        this.assetState = this.newAssetState();
-        this.rightBox.show = true;
-      },
-      esc() {
-        this.rightBox.show = false;
-      },
-      newAssetState() {
-        return JSON.parse(JSON.stringify(this.blankAssetState));
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(this.$refs.assetStateTable){
-          this.$refs.assetStateTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
+      })
     },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+    statusChange (obj) {
+      this.$nextTick(() => {
+        this.$put('/asset/stateConf', obj).then(response => {
+          if (response.code === 200) {
+            this.rightBox.show = false
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.getTableData()
+        })
+      })
+    },
+    getTableData () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (!this.scrollbarWrap) {
+        this.$nextTick(() => {
+          this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper
+          this.toTopBtnHandler(this.scrollbarWrap)
+        })
       }
-    },
-    watch: {
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
+      this.tools.loading = true
+      this.$get('/asset/stateConf', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
           }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    add () {
+      this.assetState = this.newAssetState()
+      this.rightBox.show = true
+    },
+    esc () {
+      this.rightBox.show = false
+    },
+    newAssetState () {
+      return JSON.parse(JSON.stringify(this.blankAssetState))
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (this.$refs.assetStateTable) {
+        this.$refs.assetStateTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
 
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.assetStateTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.assetStateTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
         }
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
 
-      this.getTableData();
-    },
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/assetType.vue b/nezha-fronted/src/components/page/config/assetType.vue
index 9e303e307..b1818229c 100644
--- a/nezha-fronted/src/components/page/config/assetType.vue
+++ b/nezha-fronted/src/components/page/config/assetType.vue
@@ -109,7 +109,7 @@
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="28">
-          <template :resizable="false" slot="header" slot-scope="scope">
+          <template slot="header" :resizable="false">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -128,299 +128,299 @@
   </div>
 </template>
 <script>
-  import deleteButton from "../../common/deleteButton";
-  import assetTypeBox from "../../common/rightBox/assetTypeBox";
-  import bus from "../../../libs/bus";
+import deleteButton from '../../common/deleteButton'
+import assetTypeBox from '../../common/rightBox/assetTypeBox'
+import bus from '../../../libs/bus'
 
-  export default {
-    name: "asset-type-list",
-    components: {
-      'delete-button': deleteButton,
-      'asset-type-box': assetTypeBox,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          assetTypeDetail: {},
-          assetType: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
+export default {
+  name: 'asset-type-list',
+  components: {
+    'delete-button': deleteButton,
+    'asset-type-box': assetTypeBox
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        assetTypeDetail: {},
         assetType: {},
-        assetTypeData: [],
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        tableId: 'assetTypeTable', //需要分页的table的id，用于记录每页数量
-        blankAssetType: { //空白对象
-          id: "", pid: "", pname: "", name: "", vm: 0, vmh: 0, ssh: 0, telnet: 0, buildIn: 0, remark: "",
-        },
-        pageObj: { //分页对象
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [ //原table列
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("overall.name"),
-            prop: 'name',
-            show: true,
-          }, {
-            label: this.$t("config.assetType.parent"),
-            prop: 'pname',
-            show: true,
-          }, {
-            label: "VM",
-            prop: 'vm',
-            show: true,
-          }, {
-            label: 'VM host',
-            prop: 'vmh',
-            show: true,
-          }, {
-            label: "SSH",
-            prop: 'ssh',
-            show: true,
-          }, {
-            label: "Telnet",
-            prop: 'telnet',
-            show: true,
-          }, {
-            label: this.$t('overall.remark'),
-            prop: 'remark',
-            show: true,
-          }, {
-            label: this.$t('overall.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: this.$t('overall.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag: false,
-      }
-    },
-    methods: {
-      // 全屏
-      /*fullScreen() {
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      assetType: {},
+      assetTypeData: [],
+
+      tableId: 'assetTypeTable', // 需要分页的table的id，用于记录每页数量
+      blankAssetType: { // 空白对象
+        id: '', pid: '', pname: '', name: '', vm: 0, vmh: 0, ssh: 0, telnet: 0, buildIn: 0, remark: ''
+      },
+      pageObj: { // 分页对象
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.assetType.parent'),
+          prop: 'pname',
+          show: true
+        }, {
+          label: 'VM',
+          prop: 'vm',
+          show: true
+        }, {
+          label: 'VM host',
+          prop: 'vmh',
+          show: true
+        }, {
+          label: 'SSH',
+          prop: 'ssh',
+          show: true
+        }, {
+          label: 'Telnet',
+          prop: 'telnet',
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    // 全屏
+    /* fullScreen() {
         let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
-      },*/
-      // 退出全屏
-      /*exitFullScreen() {
+      }, */
+    // 退出全屏
+    /* exitFullScreen() {
         let vm = this;
         this.$bottomBoxWindow.exitFullScreen(vm);
-      },*/
-      // 鼠标拖动二级列表
-      /*listResize(e) {
+      }, */
+    // 鼠标拖动二级列表
+    /* listResize(e) {
         let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
-      },*/
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag = true;
-          this.getAssetTypeTreeData();
-          this.getTableData();
-        }
-      },
-      edit(u) {
-        this.assetType = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-      },
-      /*detail(u) {
+      }, */
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getAssetTypeTreeData()
+        this.getTableData()
+      }
+    },
+    edit (u) {
+      this.assetType = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    /* detail(u) {
         this.bottomBox.assetType = JSON.parse(JSON.stringify(u));
         this.bottomBox.targetTab = "detail";
         this.bottomBox.showSubList = true;
-      },*/
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("/asset/typeConf?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-              this.getAssetTypeTreeData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      getAssetTypeTreeData() {
-        this.$get('/asset/typeConf/tree').then(response => {
+      }, */
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/asset/typeConf?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            this.assetTypeData = response.data.list;
-          }
-        });
-      },
-      getTableData() {
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        if (!this.scrollbarWrap) {
-          this.$nextTick(() => {
-            this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper;
-            this.toTopBtnHandler(this.scrollbarWrap);
-          });
-        }
-        this.tools.loading = true;
-        this.$get('/asset/typeConf', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              response.data.list[i].status = response.data.list[i].status + "";
-            }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+            this.getAssetTypeTreeData()
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      add() {
-        this.assetType = this.newAssetType();
-        this.rightBox.show = true;
-      },
-      statusChange(obj) {
+      })
+    },
+    getAssetTypeTreeData () {
+      this.$get('/asset/typeConf/tree').then(response => {
+        if (response.code === 200) {
+          this.assetTypeData = response.data.list
+        }
+      })
+    },
+    getTableData () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      if (!this.scrollbarWrap) {
         this.$nextTick(() => {
-          this.$put('/asset/typeConf', obj).then(response => {
-            if (response.code === 200) {
-              this.rightBox.show = false;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-            } else {
-              this.$message.error(response.msg);
-            }
-            this.getTableData();
-          });
-        });
-      },
-      esc() {
-        this.rightBox.show = false;
-      },
-      newAssetType() {
-        return JSON.parse(JSON.stringify(this.blankAssetType));
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(this.$refs.assetTypeTable){
-          this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+          this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
+          this.toTopBtnHandler(this.scrollbarWrap)
+        })
       }
-    },
-    watch: {
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
+      this.tools.loading = true
+      this.$get('/asset/typeConf', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
           }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    add () {
+      this.assetType = this.newAssetType()
+      this.rightBox.show = true
+    },
+    statusChange (obj) {
+      this.$nextTick(() => {
+        this.$put('/asset/typeConf', obj).then(response => {
+          if (response.code === 200) {
+            this.rightBox.show = false
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          } else {
+            this.$message.error(response.msg)
+          }
+          this.getTableData()
+        })
+      })
+    },
+    esc () {
+      this.rightBox.show = false
+    },
+    newAssetType () {
+      return JSON.parse(JSON.stringify(this.blankAssetType))
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (this.$refs.assetTypeTable) {
+        this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
 
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
         }
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
 
-      this.getAssetTypeTreeData();
-      this.getTableData();
-    },
+    this.getAssetTypeTreeData()
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/changePwd.vue b/nezha-fronted/src/components/page/config/changePwd.vue
index 623942c47..3453c0102 100644
--- a/nezha-fronted/src/components/page/config/changePwd.vue
+++ b/nezha-fronted/src/components/page/config/changePwd.vue
@@ -34,84 +34,84 @@
 </template>
 
 <script>
-    export default {
-      name: "changePwd",
-      props:{
-        curUser:{type:String},
-        showDialog:{type:Boolean,default:false}
+export default {
+  name: 'changePwd',
+  props: {
+    curUser: { type: String },
+    showDialog: { type: Boolean, default: false }
+  },
+  data () {
+    const temp = this
+    const validatePass = (rule, value, callback) => {
+      if (value && value != '') {
+        callback()
+      } else {
+        callback(new Error(temp.$t('config.account.invalidPwd')))
+      }
+    }
+    const validateConfirmPass = (rule, value, callback) => {
+      if (value && value != '' && value == temp.user.newPwd) {
+        callback()
+      } else {
+        callback(new Error(temp.$t('config.account.confirmPwdErr')))
+      }
+    }
+    return {
+      user: {
+        username: '',
+        pwd: '',
+        newPwd: '',
+        confirmPwd: ''
       },
-      data(){
-        let temp=this;
-        var validatePass = (rule, value, callback) => {
-          if(value && value != '' ){
-            callback();
-          }else{
-            callback(new Error(temp.$t('config.account.invalidPwd')))
-          }
-        };
-        var validateConfirmPass=(rule,value,callback) => {
-          if(value && value != '' && value == temp.user.newPwd){
-            callback();
-          }else{
-            callback(new Error(temp.$t('config.account.confirmPwdErr')))
-          }
-        }
-        return {
-          user:{
-            username:'',
-            pwd:'',
-            newPwd:'',
-            confirmPwd:''
-          },
-          sysUser:sessionStorage.getItem("nz-username"),
-          rules:{
-            pwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'}],
-            newPwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'},{validator:validatePass,trigger: 'blur'}],
-            confirmPwd:[{required:true,message: this.$t('config.account.reinputPwd'), trigger: 'blur'},{validator:validateConfirmPass,trigger: 'blur'}]
-          },
-          visible:false,
-        }
+      sysUser: sessionStorage.getItem('nz-username'),
+      rules: {
+        pwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }],
+        confirmPwd: [{ required: true, message: this.$t('config.account.reinputPwd'), trigger: 'blur' }, { validator: validateConfirmPass, trigger: 'blur' }]
       },
-      created() {
-        this.user.username=this.curUser && this.curUser != ''?this.curUser:sessionStorage.getItem("nz-username");
-      },
-      methods:{
-        dialogOpened:function(){
-          if(this.$refs.changePwdForm){
-            this.$refs.changePwdForm.resetFields();
+      visible: false
+    }
+  },
+  created () {
+    this.user.username = this.curUser && this.curUser != '' ? this.curUser : sessionStorage.getItem('nz-username')
+  },
+  methods: {
+    dialogOpened: function () {
+      if (this.$refs.changePwdForm) {
+        this.$refs.changePwdForm.resetFields()
+      }
+    },
+    dialogClosed: function () {
+      this.$emit('dialogClosed')
+    },
+    close: function () {
+      this.visible = false
+    },
+    changePwd: function () {
+      this.$refs.changePwdForm.validate((valid) => {
+        if (valid) {
+          const paramObj = {
+            password: this.user.pwd,
+            newPassword: this.user.newPwd
           }
-        },
-        dialogClosed:function(){
-          this.$emit('dialogClosed')
-        },
-        close:function(){
-          this.visible=false;
-        },
-        changePwd:function(){
-          this.$refs.changePwdForm.validate((valid)=>{
-            if(valid){
-              let paramObj={
-                password:this.user.pwd,
-                newPassword:this.user.newPwd
-              }
-              this.$get('/sys/user/password?password='+paramObj.password+"&newPassword="+paramObj.newPassword).then(response=>{
-                if(response && response.code == 200){
-                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.close();
-                }else{
-                  this.$message.error(response.msg);
-                }
-              })
+          this.$get('/sys/user/password?password=' + paramObj.password + '&newPassword=' + paramObj.newPassword).then(response => {
+            if (response && response.code == 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.close()
+            } else {
+              this.$message.error(response.msg)
             }
           })
         }
-      },
-      watch:{
-        showDialog:function(n,o){
-          this.visible=n;
-        }
-      }
+      })
     }
+  },
+  watch: {
+    showDialog: function (n, o) {
+      this.visible = n
+    }
+  }
+}
 </script>
 
 <style >
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index d5fc5f25f..1e34a7771 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -119,7 +119,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28" :resizable="false">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -146,202 +146,202 @@
   </div>
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import dcBox from "../../common/rightBox/dcBox"; //dc弹框
-  import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
-  import deleteButton from "../../common/deleteButton";
-  var  regNum = /^[0-9]+.?[0-9]*/;
-  export default {
-    name: "dc",
-    components:{
-      'traffic-setting-box': trafficSettingBox,
-      'dc-box': dcBox,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        /*二级页面相关*/
-        bottomBox: {
-          dcDetail: {},
-          dc: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
+import bus from '../../../libs/bus'
+import dcBox from '../../common/rightBox/dcBox' // dc弹框
+import trafficSettingBox from '../../common/rightBox/trafficSetting/trafficSettingBox'
+import deleteButton from '../../common/deleteButton'
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'dc',
+  components: {
+    'traffic-setting-box': trafficSettingBox,
+    'dc-box': dcBox,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      /* 二级页面相关 */
+      bottomBox: {
+        dcDetail: {},
         dc: {},
-        blankDc: {
-          id: '',
-          name: '',
-          location: '',
-          tel: '',
-          principal: '',
-          // area: {
-          //   id: 0,
-          //   name: ''
-          // }
-          state:'ON',
-          longitude:undefined,
-          latitude:undefined,
-        },
-        rightBox: {
-          dc: {show: false},
-          trafficSetting: {show: false}
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("overall.name"),
-            prop: 'name',
-            show: true,
-          }, {
-            label: this.$t("asset.location"),
-            prop: 'location',
-            show: true,
-          }, {
-            label: this.$t("config.dc.cabinetNum"),
-            prop: 'cabinetNum',
-            show: true,
-          }, {
-            label: this.$t("config.dc.assets"),
-            prop: 'assetStat',
-            show: true,
-          }, {
-            label: this.$t('asset.tel'),
-            prop: 'tel',
-            show: true,
-          }, {
-            label: this.$t('asset.principal'),
-            prop: 'principal',
-            show: true
-          }, {
-            label: this.$t('config.dc.longitude'),
-            prop: 'longitude',
-            show: false
-          }, {
-            label: this.$t('config.dc.latitude'),
-            prop: 'latitude',
-            show: false
-          }, {
-            label: this.$t('config.dc.state'),
-            prop: 'state',
-            show: true
-          }, {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-        tableData: [],
-        userData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: this.$t('overall.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
-        scrollbarWrap: null,
-        delFlag:false,
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      batchDeleteObjs: [],
+      tableId: 'dcTable', // 需要分页的table的id，用于记录每页数量
+      dc: {},
+      blankDc: {
+        id: '',
+        name: '',
+        location: '',
+        tel: '',
+        principal: '',
+        // area: {
+        //   id: 0,
+        //   name: ''
+        // }
+        state: 'ON',
+        longitude: undefined,
+        latitude: undefined
+      },
+      rightBox: {
+        dc: { show: false },
+        trafficSetting: { show: false }
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('asset.location'),
+          prop: 'location',
+          show: true
+        }, {
+          label: this.$t('config.dc.cabinetNum'),
+          prop: 'cabinetNum',
+          show: true
+        }, {
+          label: this.$t('config.dc.assets'),
+          prop: 'assetStat',
+          show: true
+        }, {
+          label: this.$t('asset.tel'),
+          prop: 'tel',
+          show: true
+        }, {
+          label: this.$t('asset.principal'),
+          prop: 'principal',
+          show: true
+        }, {
+          label: this.$t('config.dc.longitude'),
+          prop: 'longitude',
+          show: false
+        }, {
+          label: this.$t('config.dc.latitude'),
+          prop: 'latitude',
+          show: false
+        }, {
+          label: this.$t('config.dc.state'),
+          prop: 'state',
+          show: true
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      userData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  computed: {
+    dcDataRefresh () { // 通过vuex更新dc   需要该属性到页面 否则不被监听
+      if (this.$store.getters.getDcDataRefresh) {
+        this.getTableData()
       }
+      return this.$store.getters.getDcDataRefresh
+    }
+  },
+  methods: {
+    assetStatClassName (param) {
+      if (param.column.label == this.$t('config.dc.assets')) {
+        return 'asset-state'
+      }
+      return ''
     },
-    computed:{
-      dcDataRefresh(){//通过vuex更新dc   需要该属性到页面 否则不被监听
-        if(this.$store.getters.getDcDataRefresh){
-          this.getTableData();
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
         }
-        return this.$store.getters.getDcDataRefresh;
-      },
+      })
     },
-    methods: {
-      assetStatClassName(param) {
-        if (param.column.label == this.$t("config.dc.assets")) {
-          return "asset-state";
-        }
-        return "";
-      },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      edit(u) {
-        this.dc = JSON.parse(JSON.stringify(u));
-        if(!regNum.test(this.dc.longitude)){
-          this.dc.longitude=undefined
-        }
-        if(!regNum.test(this.dc.latitude)){
-          this.dc.latitude=undefined
-        }
-        if (!this.dc.area) {
-          this.$set(this.dc, 'area', {id: '', name: ''});
-        }
-        this.rightBox.dc.show = true;
-      },
-      configTraffic(u) {
-        this.dc = JSON.parse(JSON.stringify(u));
-        this.rightBox.trafficSetting.show = true;
-      },
-      detail(u) {
-        this.bottomBox.dc = JSON.parse(JSON.stringify(u));
-        if (!this.bottomBox.dc.area) {
-          this.$set(this.bottomBox.dc, 'area', {id: '', name: ''});
-        }
-        this.bottomBox.targetTab = "detail";
-        this.bottomBox.showSubList = true;
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      convertToDetail(obj) {
-        let detail = JSON.parse(JSON.stringify(obj));
-        return detail;
-        /*let detail = [];
+    edit (u) {
+      this.dc = JSON.parse(JSON.stringify(u))
+      if (!regNum.test(this.dc.longitude)) {
+        this.dc.longitude = undefined
+      }
+      if (!regNum.test(this.dc.latitude)) {
+        this.dc.latitude = undefined
+      }
+      if (!this.dc.area) {
+        this.$set(this.dc, 'area', { id: '', name: '' })
+      }
+      this.rightBox.dc.show = true
+    },
+    configTraffic (u) {
+      this.dc = JSON.parse(JSON.stringify(u))
+      this.rightBox.trafficSetting.show = true
+    },
+    detail (u) {
+      this.bottomBox.dc = JSON.parse(JSON.stringify(u))
+      if (!this.bottomBox.dc.area) {
+        this.$set(this.bottomBox.dc, 'area', { id: '', name: '' })
+      }
+      this.bottomBox.targetTab = 'detail'
+      this.bottomBox.showSubList = true
+    },
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    convertToDetail (obj) {
+      const detail = JSON.parse(JSON.stringify(obj))
+      return detail
+      /* let detail = [];
         detail.push({label: this.$t("overall.name"), value: obj.name});
         detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
         detail.push({label: this.$t("asset.location"), value: obj.location});
@@ -357,206 +357,206 @@
           }
         }
         detail.push({label: this.$t("asset.principal"), value: principal});
-        return detail;*/
-      },
-      add() {
-        this.dc = this.newDc();
-        this.rightBox.dc.show = true;
-      },
-      newDc() {
-        return JSON.parse(JSON.stringify(this.blankDc));
-      },
-      closeDcBox(refresh) {
-        this.rightBox.dc.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-          bus.$emit("dc-list-change");
-        }
-      },
-      closeTrafficBox(refresh) {
-        this.rightBox.trafficSetting.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("idc?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-              bus.$emit("dc-list-change");
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      statusChange(idc) {
-        this.$put('idc', idc).then(response => {
+        return detail; */
+    },
+    add () {
+      this.dc = this.newDc()
+      this.rightBox.dc.show = true
+    },
+    newDc () {
+      return JSON.parse(JSON.stringify(this.blankDc))
+    },
+    closeDcBox (refresh) {
+      this.rightBox.dc.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+        bus.$emit('dc-list-change')
+      }
+    },
+    closeTrafficBox (refresh) {
+      this.rightBox.trafficSetting.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('idc?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            this.rightBox.show = false;
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.delFlag = true
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+            bus.$emit('dc-list-change')
           } else {
-            this.$message.error(response.msg);
-          }
-          this.getTableData();
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('dc_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('idc', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.dcTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.$message.error(response.msg)
           }
         })
-      },
-      getUserData() {
-        return new Promise(resolve => {
-          this.$get('sys/user/list', {pageSize: -1, pageNo: 1}).then(response => {
-            if (response.code === 200) {
-              this.userData = response.data.list;
-            }
-            resolve();
-          });
-        });
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.pageObj.pageSize = val;
-        this.getTableData();
-      },
-      search(searchObj) {
-        let orderBy = '';
-        if(this.searchLabel.orderBy) {
-          orderBy = this.searchLabel.orderBy;
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.dcTable&&this.$refs.dcTable.bodyWrapper){
-          this.$refs.dcTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      showCabinet(dc) {
-        this.bottomBox.targetTab = 'cabinet';
-        this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
-        this.bottomBox.showSubList = true;
-      },
-      sortableShow(label,form){
-        if(label==='state'){
-          return false
-        }
-        return this.$tableSet.sortableShow(label,form)
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending'){
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending'){
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      regNumTest(val){//校验是否是数字
-        return regNum.test(val)
-      },
-      initEvent() {
-        bus.$on("dc-list-change", () => {
-          this.getTableData();
-        });
-      },
+      })
     },
-    watch: {
-      'bottomBox.dc': {
-        deep: true,
-        handler(n) {
-          if (n.id) {
-            this.bottomBox.dcDetail = this.convertToDetail(n);
+    statusChange (idc) {
+      this.$put('idc', idc).then(response => {
+        if (response.code === 200) {
+          this.rightBox.show = false
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.getTableData()
+      })
+    },
+    getTableData () {
+      if (!this.hasButton('dc_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('idc', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dcTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-      },
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.dcTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
+      })
+    },
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('sys/user/list', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
           }
+          resolve()
+        })
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.pageObj.pageSize = val
+      this.getTableData()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.dcTable && this.$refs.dcTable.bodyWrapper) {
+        this.$refs.dcTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    showCabinet (dc) {
+      this.bottomBox.targetTab = 'cabinet'
+      this.bottomBox.dc = JSON.parse(JSON.stringify(dc))
+      this.bottomBox.showSubList = true
+    },
+    sortableShow (label, form) {
+      if (label === 'state') {
+        return false
+      }
+      return this.$tableSet.sortableShow(label, form)
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    },
+    regNumTest (val) { // 校验是否是数字
+      return regNum.test(val)
+    },
+    initEvent () {
+      bus.$on('dc-list-change', () => {
+        this.getTableData()
+      })
+    }
+  },
+  watch: {
+    'bottomBox.dc': {
+      deep: true,
+      handler (n) {
+        if (n.id) {
+          this.bottomBox.dcDetail = this.convertToDetail(n)
         }
       }
     },
-    beforeDestroy(){
-      bus.$off("dc-list-change");
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    destroyed() {
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
 
-    },
-    mounted() {
-      this.getUserData();
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.getTableData();
-    },
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.dcTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    bus.$off('dc-list-change')
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  destroyed () {
+
+  },
+  mounted () {
+    this.getUserData()
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.getTableData()
   }
+}
 </script>
 <style scoped>
   /deep/ td .nz-icon-gear:before{
diff --git a/nezha-fronted/src/components/page/config/exprTemp.vue b/nezha-fronted/src/components/page/config/exprTemp.vue
index 0e5b6949d..4ee918c61 100644
--- a/nezha-fronted/src/components/page/config/exprTemp.vue
+++ b/nezha-fronted/src/components/page/config/exprTemp.vue
@@ -5,7 +5,7 @@
       <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
         <div class="top-tool-search margin-r-20">
           <search-input :searchMsg="searchMsg" @search="search"
-                        :bottomBox.inTransform="bottomBox.inTransform" :single="true"></search-input>
+                        :inTransform="bottomBox.inTransform" :single="true"></search-input>
         </div>
         <export-excel
           id="asset-list"
@@ -62,7 +62,6 @@
         align="center">
       </el-table-column>
 
-
       <el-table-column
         :resizable="true"
         v-for="(item, index) in tools.customTableTitle"
@@ -103,9 +102,8 @@
         </template>
       </el-table-column>
 
-
       <el-table-column width="28" :resizable="false">
-        <template slot="header" slot-scope="scope">
+        <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
                 class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
@@ -145,317 +143,316 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import axios from 'axios';
-  import exportXLSX from "../../common/exportXLSX";
-  import deleteButton from "../../common/deleteButton";
-  import exprTempBox from'../../common/rightBox/exprTempBox';
-  import {calcDurationByStringTimeB} from "../../common/js/tools";
-  export default {
-    name:"exprTemp",
-    components:{
-      deleteButton,
-      exprTempBox,
-      'export-excel':exportXLSX
-    },
-    data(){
-      return {
-        tableId:'exprTemp',
-        //侧滑
-        rightBox:{
-          show:false,
-        },
-        /*二级列表相关*/
-        mainTableHeight:this.$tableHeight.normal, //主列表table高度
-        /*二级页面相关*/
-        bottomBox:{
-          tabList:[], //二级列表的标签
-          tabDetailList:[], //多个详情
-          mainResizeShow:true, //dom高度改变时是否展示|隐藏
-          subResizeShow:true,
-          isFullScreen:false, //全屏状态
-          showSubList:false, //是否显示二级列表
-          targetTab:'', //显示二级列表中的哪个页签
-          inTransform:false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        /*工具参数*/
-        tools:{
-          loading:false, //是否显示table加载动画
-          toTopBtnTop:this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover:false, //控制滚动条和top按钮同时出现
-          showTopBtn:false, //显示To top按钮
-          showCustomTableTitle:false, //自定义列弹框是否显示
-          customTableTitle:[], //自定义列工具的数据
-        },
-        /*批量删除相关*/
-        batchDeleteObjs:[],
-        /*搜素相关*/
-        searchMsg:{ //给搜索框子组件传递的信息
-          zheze_none:true,
-          searchLabelList:[
-            {
-              id: 11,
-              name: 'Id',
-              type: 'input',
-              label: 'id',
-              disabled: false
-            },{
-              id: 12,
-              name: this.$t('config.exprTemp.name'),
-              type: 'input',
-              label: 'name',
-              disabled: false
-            },{
-              id: 13,
-              name: this.$t('config.exprTemp.gname'),
-              type: 'selectTemp',
-              label: 'gname',
-              disabled: false
-            },
-          ],
-        },
-        searchLabel:{}, //搜索参数
-        pageObj:{
-          pageNo:1,
-          pageSize:this.$CONSTANTS.defaultPageSize,
-          total:0
-        },
-        /*表格相关*/
-        tableTitle:[
+import bus from '../../../libs/bus'
+import exportXLSX from '../../common/exportXLSX'
+import deleteButton from '../../common/deleteButton'
+import exprTempBox from '../../common/rightBox/exprTempBox'
+import { calcDurationByStringTimeB } from '../../common/js/tools'
+export default {
+  name: 'exprTemp',
+  components: {
+    deleteButton,
+    exprTempBox,
+    'export-excel': exportXLSX
+  },
+  data () {
+    return {
+      tableId: 'exprTemp',
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级列表相关 */
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 二级页面相关 */
+      bottomBox: {
+        tabList: [], // 二级列表的标签
+        tabDetailList: [], // 多个详情
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      /* 批量删除相关 */
+      batchDeleteObjs: [],
+      /* 搜素相关 */
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
           {
-            label:'ID',
-            prop:'id',
-            show:true,
-            width:80
-          },{
-            label:this.$t('config.exprTemp.name'),
-            prop:'name',
-            show:true,
-          },{
-            label:this.$t('config.exprTemp.gname'),
-            prop:'gname',
-            show:true,
-          },{
-            label:this.$t('config.exprTemp.expression'),
-            prop:'expression',
-            show:true,
-          },{
-            label:this.$t('config.exprTemp.remark'),
-            prop:'remark',
-            show:true,
-          },{
-            label:this.$t('alert.config.option'),
-            prop:'option',
-            show:true,
-            width:120
+            id: 11,
+            name: 'Id',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 12,
+            name: this.$t('config.exprTemp.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          }, {
+            id: 13,
+            name: this.$t('config.exprTemp.gname'),
+            type: 'selectTemp',
+            label: 'gname',
+            disabled: false
           }
-        ],
-        tableData:[],
-        //导出相关
-        importBox:{show:false,title:this.$t('overall.exportExcel')},
-        deleteBox:{show:false,ids:"",remark:'',state:2},
-        //创建修改相关
-        blackExprTemp:{
-          "id": '',
-          "name": "",
-          "gname": "default",
-          "expression": "",
-          "remark": "",
-        },
-        exprTemp:{},
-        nowTime:''
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      /* 表格相关 */
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.exprTemp.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.exprTemp.gname'),
+          prop: 'gname',
+          show: true
+        }, {
+          label: this.$t('config.exprTemp.expression'),
+          prop: 'expression',
+          show: true
+        }, {
+          label: this.$t('config.exprTemp.remark'),
+          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('alert.config.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      // 导出相关
+      importBox: { show: false, title: this.$t('overall.exportExcel') },
+      deleteBox: { show: false, ids: '', remark: '', state: 2 },
+      // 创建修改相关
+      blackExprTemp: {
+        id: '',
+        name: '',
+        gname: 'default',
+        expression: '',
+        remark: ''
+      },
+      exprTemp: {},
+      nowTime: ''
+    }
+  },
+  computed: {
+    getDuration () {
+      return function (record) {
+        if (record.endAt) {
+          return calcDurationByStringTimeB(record.startAt, record.endAt)
+        }
+        return calcDurationByStringTimeB(record.startAt, this.nowTime)
       }
-    },
-    computed:{
-      getDuration(){
-        return function(record) {
-          if (record.endAt) {
-            return calcDurationByStringTimeB(record.startAt, record.endAt);
-          }
-          return calcDurationByStringTimeB(record.startAt, this.nowTime);
-        }
-      },
-    },
-    created(){
+    }
+  },
+  created () {
 
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.initEvent()
+    this.getexprTemp()
+  },
+  methods: {
+    initEvent () {
+      bus.$on('alert-rule-list-change', () => {
+        this.getexprTemp()
+      })
+      bus.$on('dc-list-change', () => {
+        this.getexprTemp()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getexprTemp()
+      })
     },
-    mounted(){
-      //初始化表头
-      this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
-        ?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
-        :this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.initEvent();
-      this.getexprTemp();
-    },
-    methods:{
-      initEvent(){
-        bus.$on("alert-rule-list-change",()=>{
-          this.getexprTemp();
-        });
-        bus.$on("dc-list-change",()=>{
-          this.getexprTemp();
-        });
-        bus.$on('alert-message-change',()=>{
-          this.getexprTemp();
-        })
-      },
-      getexprTemp(){
-        if(!this.hasButton('rule_view')){
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel,"pageNo",this.pageObj.pageNo);
-        this.$set(this.searchLabel,"pageSize",this.pageObj.pageSize);
-        this.tools.loading=true;
-        this.$get('expression/tmpl',this.searchLabel).then(response=>{
-          this.tools.loading=false;
-          if(response.code==200){
-            this.tableData=response.data.list;
-            this.pageObj.total=response.data.total;
-            this.nowTime=this.utcTimeToTimezoneStr(response.time);
-            console.info(this.$refs.exprTempTable)
-            if(!this.scrollbarWrap){
-              this.$nextTick(()=>{
-                this.scrollbarWrap=this.$refs.exprTempTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
-          }
-        })
-      },
-      pageNo(val){
-        this.pageObj.pageNo=val;
-        this.getexprTemp();
-      },
-      pageSize(val){
-        this.pageObj.pageSize=val;
-        localStorage.setItem('nz-pageSize-'+localStorage.getItem('nz-username')+'-'+this.tableId,val);
-        this.getexprTemp();
-      },
-      search(searchObj){
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel={};
-        this.pageObj.pageNo=1;
-        for(let item in searchObj){
-          if(searchObj[item]){
-            this.$set(this.searchLabel,item,searchObj[item]);
+    getexprTemp () {
+      if (!this.hasButton('rule_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('expression/tmpl', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code == 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          console.info(this.$refs.exprTempTable)
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-        if(orderBy){
-          this.$set(this.searchLabel,'orderBy',orderBy);
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getexprTemp()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getexprTemp()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
-        this.$refs.exprTempTable.bodyWrapper.scrollTop=0;
-        this.getexprTemp();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel,"orderBy",orderBy);
-        this.getexprTemp();
-      },
-      openDelMessageBox:function(){
-        if(this.batchDeleteObjs.length<1) return;
-      },
-      showExportDialog(){
-        this.importBox.show=true;
-      },
-      closeDialog(){
-        this.importBox.show=false;
-        this.deleteBox.show=false;
-      },
-      exportCur:function(){
-        let searchLabel=Object.assign({},this.searchLabel)
-        this.$set(searchLabel,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
-        this.exportExcel(searchLabel);
-        this.closeDialog();
-      },
-      exportAll:function(){
-        let temp=JSON.parse(JSON.stringify(this.searchLabel));
-        temp.pageSize= -1;
-        this.$set(temp,'language',localStorage.getItem("nz-language")?localStorage.getItem("nz-language"):'en')
-        this.exportExcel(temp);
-        this.closeDialog();
-      },
-      afterTableListChange(){
-        this.getexprTemp();
-      },
-      addTemp(){
-        this.exprTemp=JSON.parse(JSON.stringify(this.blackExprTemp));
-        this.rightBox.show=true;
-      },
-      edit(row){
-        this.$get('expression/tmpl/'+row.id).then(res=>{
-          this.exprTemp={...res.data};
-          this.rightBox.show=true;
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.$refs.exprTempTable.bodyWrapper.scrollTop = 0
+      this.getexprTemp()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getexprTemp()
+    },
+    openDelMessageBox () {
+      // if (this.batchDeleteObjs.length < 1) return
+    },
+    showExportDialog () {
+      this.importBox.show = true
+    },
+    closeDialog () {
+      this.importBox.show = false
+      this.deleteBox.show = false
+    },
+    exportCur () {
+      const searchLabel = Object.assign({}, this.searchLabel)
+      this.$set(searchLabel, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(searchLabel)
+      this.closeDialog()
+    },
+    exportAll () {
+      const temp = JSON.parse(JSON.stringify(this.searchLabel))
+      temp.pageSize = -1
+      this.$set(temp, 'language', localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en')
+      this.exportExcel(temp)
+      this.closeDialog()
+    },
+    afterTableListChange () {
+      this.getexprTemp()
+    },
+    addTemp () {
+      this.exprTemp = JSON.parse(JSON.stringify(this.blackExprTemp))
+      this.rightBox.show = true
+    },
+    edit (row) {
+      this.$get('expression/tmpl/' + row.id).then(res => {
+        this.exprTemp = { ...res.data }
+        this.rightBox.show = true
+      })
+    },
+    del (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('expression/tmpl?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getexprTemp()
+          } else {
+            this.$message.error(response.msg)
+          }
         })
-      },
-      del(row){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmDelete"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("expression/tmpl?ids="+row.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.getexprTemp();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      overtime(row){
-        if(this.prevent_opt.save){
-          return
-        }
-        ;
-        this.prevent_opt.save=true;
-        this.$confirm(this.$t("tip.confirmOvertime"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("expression/tmpl?ids="+row.id).then(response=>{
-            this.prevent_opt.save=false;
-            if(response.code===200){
-              this.$message({type:'success',message:this.$t("tip.deleteSuccess")});
-              this.getexprTemp();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        }).catch(()=>{
-          this.prevent_opt.save=false;
-        });
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getexprTemp();
-        }
-      },
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    overtime (row) {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmOvertime'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('expression/tmpl?ids=' + row.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getexprTemp()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getexprTemp()
+      }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue
index 8780477b5..6842b7fb0 100644
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -65,7 +65,7 @@
           v-for="(item, index) in tools.customTableTitle"
           v-if="item.show"
         >
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
           <span :title="item.label" class="tag-header" v-if="item.type == 'tag'"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
           <span v-else><span>{{item.label}}</span></span>
         </template>
@@ -93,7 +93,7 @@
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="28">
-          <template :resizable="false" slot="header" slot-scope="scope">
+          <template slot="header" :resizable="false">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -108,245 +108,243 @@
   </div>
 </template>
 <script>
-  import deleteButton from "../../common/deleteButton";
-  import menuBox from '../../common/rightBox/menuBox';
-  import bus from "../../../libs/bus";
+import deleteButton from '../../common/deleteButton'
+import menuBox from '../../common/rightBox/menuBox'
+import bus from '../../../libs/bus'
 
-  export default {
-    name: "menus",
-    components: {
-      'menu-box': menuBox,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
-        menu: {},
+export default {
+  name: 'menus',
+  components: {
+    'menu-box': menuBox,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      menu: {},
 
-        tableId: 'menusTable', //需要分页的table的id，用于记录每页数量
-        blankMenu: { //空白对象
-          "name": "",
-          "code": "",
-          "i18n": "",
-          "parentId": 0,
-          "type": 1,
-          "route": "",
-          "orderNum": 1,
-          "perms": "",
-        },
-        pageObj: { //分页对象
-          pageNo: 1,
-          pageSize: 50,
-          total: 0
-        },
-        tableTitle: [ //原table列
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("config.menus.name"),
-            prop: 'name',
-            show: true,
-          }, {
-            label: this.$t("config.menus.code"),
-            prop: 'code',
-            show: true,
-          }, {
-            label: this.$t("config.menus.i18n"),
-            prop: 'i18n',
-            show: true,
-          },{
-            label: this.$t("config.menus.type"),
-            prop: 'type',
-            show: true,
-          },{
-            label: this.$t("config.menus.route"),
-            prop: 'route',
-            show: true,
-          },{
-            label: this.$t("config.menus.perms"),
-            prop: 'perms',
-            show: true,
-          },{
-            label: this.$t("config.menus.orderNum"),
-            prop: 'orderNum',
-            show: true,
-          },{
-            label: this.$t('config.menus.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: "ID",
-            type: 'input',
-            label: "id",
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag:false,
+      tableId: 'menusTable', // 需要分页的table的id，用于记录每页数量
+      blankMenu: { // 空白对象
+        name: '',
+        code: '',
+        i18n: '',
+        parentId: 0,
+        type: 1,
+        route: '',
+        orderNum: 1,
+        perms: ''
+      },
+      pageObj: { // 分页对象
+        pageNo: 1,
+        pageSize: 50,
+        total: 0
+      },
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.menus.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.menus.code'),
+          prop: 'code',
+          show: true
+        }, {
+          label: this.$t('config.menus.i18n'),
+          prop: 'i18n',
+          show: true
+        }, {
+          label: this.$t('config.menus.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('config.menus.route'),
+          prop: 'route',
+          show: true
+        }, {
+          label: this.$t('config.menus.perms'),
+          prop: 'perms',
+          show: true
+        }, {
+          label: this.$t('config.menus.orderNum'),
+          prop: 'orderNum',
+          show: true
+        }, {
+          label: this.$t('config.menus.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    methods: {
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
-      edit(u) {
-        if(u.buildIn == 1){
-          return ;
-        }
-        this.menu = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-      },
-      del(u) {
-        if(u.buildIn == 1){
-          return ;
-        }
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/menu?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      getTableData() {
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('sys/menu', this.searchLabel).then(response => {
-          this.tools.loading = false;
+    edit (u) {
+      if (u.buildIn == 1) {
+        return
+      }
+      this.menu = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    del (u) {
+      if (u.buildIn == 1) {
+        return
+      }
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/menu?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
-            this.tools.loading = false;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.menusTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      add() {
-        this.menu = this.newMenu();
-        this.rightBox.show = true;
-      },
-      esc() {
-        this.rightBox.show = false;
-      },
-      newMenu() {
-        return JSON.parse(JSON.stringify(this.blankMenu));
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(this.$refs.menusTable){
-          this.$refs.menusTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
+      })
     },
-    watch:{
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
+    getTableData () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('sys/menu', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.tools.loading = false
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.menusTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
-
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.menusTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
-
-
+        }
+      })
+    },
+    add () {
+      this.menu = this.newMenu()
+      this.rightBox.show = true
+    },
+    esc () {
+      this.rightBox.show = false
+    },
+    newMenu () {
+      return JSON.parse(JSON.stringify(this.blankMenu))
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+      if (this.$refs.menusTable) {
+        this.$refs.menusTable.bodyWrapper.scrollTop = 0
       }
+      this.getTableData()
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.getTableData();
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
     }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.menusTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.getTableData()
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index 562122784..77b795773 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -95,7 +95,7 @@
           </template>
         </el-table-column>
         <el-table-column :resizable="false" width="28">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -113,279 +113,279 @@
 
 </template>
 <script>
-  import axios from 'axios'
-  import bus from '../../../libs/bus';
-  import mibBrowser from './mibBrowser';
-  import deleteButton from "../../common/deleteButton";
-  export default {
-    name: "mib",
-    components: {
-      'mib-browser': mibBrowser,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        showTab: 'file', //file/browser
-        rightBox: {show: false},
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
-        mib: {},
-        blankMib: {
-          id: null,
-          name: '',
-          remark:'',
-          models:'',
-          file:null,
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t('overall.name'),
-            prop: 'name',
-            show: true,
-          },{
-            label: this.$t('config.mib.fileName'),
-            prop: 'fileName',
-            show: true,
-          },{
-            label: this.$t('config.mib.models'),
-            prop: 'modelsDetail',
-            show: true,
-          },{
-            label: this.$t('config.mib.remark'),
-            prop: 'remark',
-            show: true,
-          },{
-            label: this.$t('config.mib.updateUser'),
-            prop: 'updateUser',
-            show: true,
-          },{
-            label: this.$t('config.mib.updateAt'),
-            prop: 'updateAt',
-            show: true,
-          },{
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 5,
-            name: this.$t('overall.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag:false,
-      }
-    },
-    methods: {
-      clickOutside() {
-        this.rightBox.show = false;
+import axios from 'axios'
+import bus from '../../../libs/bus'
+import mibBrowser from './mibBrowser'
+import deleteButton from '../../common/deleteButton'
+export default {
+  name: 'mib',
+  components: {
+    'mib-browser': mibBrowser,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      showTab: 'file', // file/browser
+      rightBox: { show: false },
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
       },
-      edit(u) {
-        this.mib = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
+      batchDeleteObjs: [],
+      tableId: 'mibTable', // 需要分页的table的id，用于记录每页数量
+      mib: {},
+      blankMib: {
+        id: null,
+        name: '',
+        remark: '',
+        models: '',
+        file: null
       },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.mib.fileName'),
+          prop: 'fileName',
+          show: true
+        }, {
+          label: this.$t('config.mib.models'),
+          prop: 'modelsDetail',
+          show: true
+        }, {
+          label: this.$t('config.mib.remark'),
+          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('config.mib.updateUser'),
+          prop: 'updateUser',
+          show: true
+        }, {
+          label: this.$t('config.mib.updateAt'),
+          prop: 'updateAt',
+          show: true
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
         }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 5,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
       },
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("mib?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      add() {
-        this.mib = this.newMib();
-        this.rightBox.show = true;
-      },
-      newMib() {
-        return JSON.parse(JSON.stringify(this.blankMib));
-      },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('snmp_file_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.tableData = [];
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('mib', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.mibTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
-          }
-        })
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.pageObj.pageNo = 1;
-        this.searchLabel = {};
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.mibTable&&this.$refs.mibTable.bodyWrapper){
-          this.$refs.mibTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      downloadMib(mib) {
-        if (!this.hasButton("snmp_file_download")) {
-          return;
-        }
-        axios.get('/mib/download?id='+mib.id,{responseType: 'blob'}).then(data=>{
-          let fileName = new Date().getTime()+'.txt';
-          let disposition=data.headers['content-disposition'];
-          if(disposition){
-            fileName=disposition.split(';')[1].split('filename=')[1]
-          }
-          // 由于ie不支持download属性，故需要做兼容判断
-          if (navigator.appVersion.toString().indexOf('.NET') > 0) {
-            // ie独有的msSaveBlob属性，data.data为Blob文件流
-            window.navigator.msSaveBlob(data.data, fileName)
-          } else {
-            // 以下流程即为文章开始的下载流程
-            let url = window.URL.createObjectURL(data.data)
-            let link = document.createElement('a')
-            link.style.display = 'none'
-            link.href = url
-            link.download = fileName
-            document.body.appendChild(link)
-            link.click()
-            window.URL.revokeObjectURL(link.href);
-          }
-        })
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-    },
-    watch: {
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.mibTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
-        }
-      }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
-      }
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-
-      this.getTableData();
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
     }
+  },
+  methods: {
+    clickOutside () {
+      this.rightBox.show = false
+    },
+    edit (u) {
+      this.mib = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    },
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('mib?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    add () {
+      this.mib = this.newMib()
+      this.rightBox.show = true
+    },
+    newMib () {
+      return JSON.parse(JSON.stringify(this.blankMib))
+    },
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    getTableData () {
+      if (!this.hasButton('snmp_file_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.tableData = []
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('mib', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.mibTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.pageObj.pageNo = 1
+      this.searchLabel = {}
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.mibTable && this.$refs.mibTable.bodyWrapper) {
+        this.$refs.mibTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    downloadMib (mib) {
+      if (!this.hasButton('snmp_file_download')) {
+        return
+      }
+      axios.get('/mib/download?id=' + mib.id, { responseType: 'blob' }).then(data => {
+        let fileName = new Date().getTime() + '.txt'
+        const disposition = data.headers['content-disposition']
+        if (disposition) {
+          fileName = disposition.split(';')[1].split('filename=')[1]
+        }
+        // 由于ie不支持download属性，故需要做兼容判断
+        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+          // ie独有的msSaveBlob属性，data.data为Blob文件流
+          window.navigator.msSaveBlob(data.data, fileName)
+        } else {
+          // 以下流程即为文章开始的下载流程
+          const url = window.URL.createObjectURL(data.data)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          window.URL.revokeObjectURL(link.href)
+        }
+      })
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.mibTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+
+    this.getTableData()
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
   }
+}
 </script>
 <style >
   .mib-table .el-divider--horizontal{
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 8fbb5a38e..4885ed3d5 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -260,384 +260,383 @@
 </template>
 
 <script>
-  import fileSaver from 'file-saver';
-  import xlsx from 'xlsx';
+import fileSaver from 'file-saver'
+import xlsx from 'xlsx'
 
-  export default {
-    name: "mibBrowser",
-    props: {
-      showTab: String,
-    },
-    data() {
-      return {
-        loading: false,
-        treeLoading: false,
-        snmpSetFormVisible: false, //snmp set表单
-        searchParam: {
-          host: '',
-          port: 161,
-          oid: '',
-          operation: 'get',
-          version: 2,
-          community: 'public',
-          auth: {
-            username: '',
-            password: '',
-            securityLevel: '',
-            authProtocol: '',
-            privProtocol: '',
-            privPassword: ''
-          },
-          type: '',
-          value: ''
+export default {
+  name: 'mibBrowser',
+  props: {
+    showTab: String
+  },
+  data () {
+    return {
+      loading: false,
+      treeLoading: false,
+      snmpSetFormVisible: false, // snmp set表单
+      searchParam: {
+        host: '',
+        port: 161,
+        oid: '',
+        operation: 'get',
+        version: 2,
+        community: 'public',
+        auth: {
+          username: '',
+          password: '',
+          securityLevel: '',
+          authProtocol: '',
+          privProtocol: '',
+          privPassword: ''
         },
-        searchParamPop: {
-          host: '',
-          port: 161,
-          oid: '',
-          operation: 'get',
-          version: 2,
-          community: 'public',
-          auth: {
-            username: '',
-            password: '',
-            securityLevel: '',
-            authProtocol: '',
-            privProtocol: '',
-            privPassword: ''
-          }
-        },
-        operationData: ['get', 'walk', 'getnext', 'set'],
-        advancedShow: false,
-
-        walkParam: {models: []},
-        walkData: [],
-        currentWalk: {name: '', objectID: '', syntax: '', access: '', status: '', index: '', description: ''},
-        resultData: [],
-        modelData: [],
-        assetData: [],
-        showTable:true,
-        typeData: ["OctetString", "Integer", "OID", "Gauge", "Counter32", "IpAddress", "TimeTicks", "Counter64", "UnsignedInteger", "BITS", "Float", "DateAndTime"],
-        assetInputTimer:null,
-      }
-    },
-    computed: {
-      mibName() {
-        return (value) => {
-          return value ? this.getMibName(value) : "";
-        }
-      }
-    },
-    methods: {
-      toFileTab() {
-        this.$emit("toFileTab");
+        type: '',
+        value: ''
       },
-      showDetail(data, node) {
-        this.currentWalk = data;
-        this.searchParam.oid = data.objectID;
-      },
-
-      /*根据oid获取对应的根mib名称*/
-      getMibName(oid) {
-        let node = this.$refs.walkTree.getNode(oid);
-        let mibName = getMibName(node);
-        function getMibName(n) {
-          if (n.parent && n.parent.parent) {
-            return getMibName(n.parent);
-          } else if (n.parent) {
-            return n.data.name;
-          } else {
-            return "";
-          }
-        }
-        return mibName ? mibName : "";
-      },
-
-      /*获取tree的数据*/
-      getWalkData() {
-        this.treeLoading = true;
-        this.$get('mib/tree', {models: this.walkParam.models.join(",")}).then(response => {
-          this.treeLoading = false;
-          if (response.code === 200) {
-            let obj = JSON.parse(response.data);
-            this.walkData = [];
-            for (let item in obj) {
-              this.walkData.push({name: item, subTree: obj[item]});
-            }
-          }
-        });
-      },
-      getModelData() {
-        this.$get('model', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.modelData = response.data.list;
-          }
-        });
-      },
-      selectModel(model) {
-        let index = this.walkParam.models.indexOf(parseInt(model.id));
-        if (index == -1) {
-          this.walkParam.models.push(parseInt(model.id));
-        } else {
-          this.walkParam.models.splice(index, 1);
-        }
-        this.getWalkData();
-      },
-      search(set) {
-        if (this.loading) {
-          return;
-        }
-
-        this.popShow();this.popHide()  //再调用一次，对数据赋值
-
-        /*处理snmpset*/
-        if (!set) {
-          if (this.searchParam.operation == 'set') {
-            this.snmpSetFormVisible = true;
-            return;
-          }
-        }
-        if (this.snmpSetFormVisible) {
-          if (!this.searchParam.oid || !this.searchParam.type || !this.searchParam.value) {
-            this.$message.error(this.$t("validate.required"));
-            return;
-          }
-          this.snmpSetFormVisible = false;
-        }
-
-        this.loading = true;
-        setTimeout(() => {
-          this.$post('mib/browser', this.searchParam).then(response => {
-            this.loading = false;
-            if (response.code === 200) {
-              this.resultData = this.resultData.concat(response.data.list);
-              if (this.searchParam.operation == 'set') {
-                this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
-              }
-              this.showTable=false;
-              this.$nextTick(()=>{
-                this.showTable=true;
-              })
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        }, 300);
-      },
-
-      popShow() {
-        this.searchParamPop.host = this.searchParam.host;
-        this.searchParamPop.oid = this.searchParam.oid;
-        this.searchParamPop.operation = this.searchParam.operation;
-      },
-      popHide() {
-        this.searchParam = JSON.parse(JSON.stringify(this.searchParamPop));
-      },
-      /*清空result table*/
-      clearResult() {
-        this.resultData = [];
-      },
-      resetSearchParam:function(){
-        this.searchParamPop={
-          host: '',
-            port: 161,
-            oid: '',
-            operation: 'get',
-            version: 2,
-            community: 'public',
-            auth: {
-            username: '',
-              password: '',
-              securityLevel: '',
-              authProtocol: '',
-              privProtocol: '',
-              privPassword: ''
-          }
+      searchParamPop: {
+        host: '',
+        port: 161,
+        oid: '',
+        operation: 'get',
+        version: 2,
+        community: 'public',
+        auth: {
+          username: '',
+          password: '',
+          securityLevel: '',
+          authProtocol: '',
+          privProtocol: '',
+          privPassword: ''
         }
       },
-      assetChange:function(value){
-        clearTimeout(this.assetInputTimer)
-        this.assetInputTimer=setTimeout(()=>{
-          this.resetSearchParam();
-          let asset=this.assetData.find(item=>{
-            return item.host == value
-          })
+      operationData: ['get', 'walk', 'getnext', 'set'],
+      advancedShow: false,
 
-          if(asset&&asset.accounts&&asset.accounts.length>0){
-            let snmpAccount=asset.accounts.find(item=>{
-              return item.protocol == 'SNMP'
-            })
-
-            if(snmpAccount){
-              this.searchParamPop.port=snmpAccount.port;
-              this.searchParamPop.community=snmpAccount.params.community;
-              this.searchParamPop.version=snmpAccount.params.version;
-              if(this.searchParamPop.version == 3){
-                this.searchParamPop.auth.username=snmpAccount.params.username;
-                this.searchParamPop.auth.securityLevel=snmpAccount.params.securityLevel;
-                this.searchParamPop.auth.password=snmpAccount.params.password;
-                this.searchParamPop.auth.authProtocol=snmpAccount.params.authProtocol;
-                if(this.searchParamPop.auth.securityLevel=='authPriv')
-                this.searchParamPop.auth.privProtocol=snmpAccount.params.privProtocol;
-                this.searchParamPop.auth.privPassword=snmpAccount.params.privPassword;
-              }
-            }
-          }
-        },200)
-      },
-      assetSuggestion(queryString, callback) {
-        let data = [];
-        if (!queryString) {
-          data = this.assetData;
-        } else {
-          for (let i = 0; i < this.assetData.length; i++) {
-            if (this.assetData[i].host.indexOf(queryString) != -1) {
-              data.push(this.assetData[i]);
-            }
-          }
-        }
-        callback(data);
-      },
-      getAssetData() {
-        this.$get('asset', {pageSize: -1, pageNo: 1}).then(response => {
-          if (response.code === 200) {
-            this.assetData = response.data.list;
-          }
-        });
-      },
-      /*左侧上下拖动*/
-      treeDetailResize(e) {
-        let treeDom = document.querySelector(".mib-browser-tree"); //tree
-        let detailDom = document.querySelector(".mib-browser-detail"); //detail
-        //得到点击时dom的初始高度：
-        let leftTotalHeight = document.querySelector(".mib-browser-left").offsetHeight;
-        let treeInitialHeight = treeDom.offsetHeight;
-        let detailInitialHeight = detailDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            treeDom.style.height = treeInitialHeight-mouseMoveY-5+'px';
-            detailDom.style.height = detailInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            treeDom.style.height = treeInitialHeight+mouseMoveY-5+'px';
-            detailDom.style.height = detailInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为55px
-          if(parseInt(treeDom.style.height) >= leftTotalHeight-95){
-            treeDom.style.height = leftTotalHeight-95+'px';
-          }
-          if(parseInt(treeDom.style.height) <= 55){
-            treeDom.style.height = 55+'px';
-          }
-          if(parseInt(detailDom.style.height) >= leftTotalHeight-95){
-            detailDom.style.height = leftTotalHeight-95+'px';
-          }
-          if(parseInt(detailDom.style.height) <= 55){
-            detailDom.style.height = 55+'px';
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      /*中间左右拖动*/
-      leftRightResize(e) {
-        let leftDom = document.querySelector(".mib-browser-left"); //tree
-        let rightDom = document.querySelector(".mib-browser-right"); //detail
-        //得到点击时dom的初始宽度：
-        let totalWidth = document.querySelector(".mib-browser-box").offsetWidth;
-        let leftInitialWidth = leftDom.offsetWidth;
-        let rightInitialWidth = rightDom.offsetWidth;
-        //点击时鼠标的Y轴位置
-        let mouseInitialX = e.clientX;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveX = Math.abs(e.clientX - mouseInitialX);
-
-          //往上方拖动：
-          if (e.clientX < mouseInitialX) {
-            leftDom.style.width = leftInitialWidth-mouseMoveX+'px';
-            rightDom.style.width = rightInitialWidth+mouseMoveX+'px';
-          }
-          //往下方拖动：
-          if (e.clientX > mouseInitialX) {
-            leftDom.style.width = leftInitialWidth+mouseMoveX+'px';
-            rightDom.style.width = rightInitialWidth-mouseMoveX+'px';
-          }
-
-          // 主、副列表最小宽度限制
-          if(parseInt(leftDom.style.width) >= totalWidth-400){
-            leftDom.style.width = totalWidth-400+'px';
-          }
-          if(parseInt(leftDom.style.width) <= 200){
-            leftDom.style.width = 200+'px';
-          }
-          if(parseInt(rightDom.style.width) >= totalWidth-200){
-            rightDom.style.width = totalWidth-200+'px';
-          }
-          if(parseInt(rightDom.style.width) <= 400){
-            rightDom.style.width = 400+'px';
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      domResize(){
-        let scrollTop=this.$refs['resultTable'].$el.querySelector(".el-table__body-wrapper").scrollTop;
-        this.showTable=false;
-        this.$nextTick(()=>{
-          this.showTable=true;
-          this.$nextTick(()=>{
-            this.$refs['resultTable'].$el.querySelector(".el-table__body-wrapper").scrollTop=scrollTop
-          })
-        })
-      },
-      exportXlsx() {
-        if (this.resultData.length == 0) {
-          return;
-        }
-        let book = xlsx.utils.book_new();
-        let sheet = xlsx.utils.json_to_sheet(this.resultData, {header: ["name", "oid", "value", "type", "ip", "port"]});
-        xlsx.utils.book_append_sheet(book, sheet, 'result');
-        let out = xlsx.write(book, {
-          bookType: 'xlsx',
-          bookSST: true,
-          type: 'array'
-        })
-        try {
-          fileSaver.saveAs(
-            new Blob([out], {
-              type: 'application/octet-stream'
-            }),
-            "result_" + this.searchParam.host + ".xlsx"
-          )
-        } catch (e) {}
-        return out
-      },
-    },
-    mounted() {
-      this.getWalkData();
-      this.getModelData();
-      this.getAssetData();
-      window.addEventListener('resize',this.domResize);
-    },
-    beforeDestroy(){
-      window.removeEventListener('resize',this.domResize);
+      walkParam: { models: [] },
+      walkData: [],
+      currentWalk: { name: '', objectID: '', syntax: '', access: '', status: '', index: '', description: '' },
+      resultData: [],
+      modelData: [],
+      assetData: [],
+      showTable: true,
+      typeData: ['OctetString', 'Integer', 'OID', 'Gauge', 'Counter32', 'IpAddress', 'TimeTicks', 'Counter64', 'UnsignedInteger', 'BITS', 'Float', 'DateAndTime'],
+      assetInputTimer: null
     }
+  },
+  computed: {
+    mibName () {
+      return (value) => {
+        return value ? this.getMibName(value) : ''
+      }
+    }
+  },
+  methods: {
+    toFileTab () {
+      this.$emit('toFileTab')
+    },
+    showDetail (data, node) {
+      this.currentWalk = data
+      this.searchParam.oid = data.objectID
+    },
+
+    /* 根据oid获取对应的根mib名称 */
+    getMibName (oid) {
+      const node = this.$refs.walkTree.getNode(oid)
+      const mibName = getMibName(node)
+      function getMibName (n) {
+        if (n.parent && n.parent.parent) {
+          return getMibName(n.parent)
+        } else if (n.parent) {
+          return n.data.name
+        } else {
+          return ''
+        }
+      }
+      return mibName || ''
+    },
+
+    /* 获取tree的数据 */
+    getWalkData () {
+      this.treeLoading = true
+      this.$get('mib/tree', { models: this.walkParam.models.join(',') }).then(response => {
+        this.treeLoading = false
+        if (response.code === 200) {
+          const obj = JSON.parse(response.data)
+          this.walkData = []
+          for (const item in obj) {
+            this.walkData.push({ name: item, subTree: obj[item] })
+          }
+        }
+      })
+    },
+    getModelData () {
+      this.$get('model', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.modelData = response.data.list
+        }
+      })
+    },
+    selectModel (model) {
+      const index = this.walkParam.models.indexOf(parseInt(model.id))
+      if (index == -1) {
+        this.walkParam.models.push(parseInt(model.id))
+      } else {
+        this.walkParam.models.splice(index, 1)
+      }
+      this.getWalkData()
+    },
+    search (set) {
+      if (this.loading) {
+        return
+      }
+
+      this.popShow(); this.popHide() // 再调用一次，对数据赋值
+
+      /* 处理snmpset */
+      if (!set) {
+        if (this.searchParam.operation == 'set') {
+          this.snmpSetFormVisible = true
+          return
+        }
+      }
+      if (this.snmpSetFormVisible) {
+        if (!this.searchParam.oid || !this.searchParam.type || !this.searchParam.value) {
+          this.$message.error(this.$t('validate.required'))
+          return
+        }
+        this.snmpSetFormVisible = false
+      }
+
+      this.loading = true
+      setTimeout(() => {
+        this.$post('mib/browser', this.searchParam).then(response => {
+          this.loading = false
+          if (response.code === 200) {
+            this.resultData = this.resultData.concat(response.data.list)
+            if (this.searchParam.operation == 'set') {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
+            }
+            this.showTable = false
+            this.$nextTick(() => {
+              this.showTable = true
+            })
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }, 300)
+    },
+
+    popShow () {
+      this.searchParamPop.host = this.searchParam.host
+      this.searchParamPop.oid = this.searchParam.oid
+      this.searchParamPop.operation = this.searchParam.operation
+    },
+    popHide () {
+      this.searchParam = JSON.parse(JSON.stringify(this.searchParamPop))
+    },
+    /* 清空result table */
+    clearResult () {
+      this.resultData = []
+    },
+    resetSearchParam: function () {
+      this.searchParamPop = {
+        host: '',
+        port: 161,
+        oid: '',
+        operation: 'get',
+        version: 2,
+        community: 'public',
+        auth: {
+          username: '',
+          password: '',
+          securityLevel: '',
+          authProtocol: '',
+          privProtocol: '',
+          privPassword: ''
+        }
+      }
+    },
+    assetChange: function (value) {
+      clearTimeout(this.assetInputTimer)
+      this.assetInputTimer = setTimeout(() => {
+        this.resetSearchParam()
+        const asset = this.assetData.find(item => {
+          return item.host == value
+        })
+
+        if (asset && asset.accounts && asset.accounts.length > 0) {
+          const snmpAccount = asset.accounts.find(item => {
+            return item.protocol == 'SNMP'
+          })
+
+          if (snmpAccount) {
+            this.searchParamPop.port = snmpAccount.port
+            this.searchParamPop.community = snmpAccount.params.community
+            this.searchParamPop.version = snmpAccount.params.version
+            if (this.searchParamPop.version == 3) {
+              this.searchParamPop.auth.username = snmpAccount.params.username
+              this.searchParamPop.auth.securityLevel = snmpAccount.params.securityLevel
+              this.searchParamPop.auth.password = snmpAccount.params.password
+              this.searchParamPop.auth.authProtocol = snmpAccount.params.authProtocol
+              if (this.searchParamPop.auth.securityLevel == 'authPriv') { this.searchParamPop.auth.privProtocol = snmpAccount.params.privProtocol }
+              this.searchParamPop.auth.privPassword = snmpAccount.params.privPassword
+            }
+          }
+        }
+      }, 200)
+    },
+    assetSuggestion (queryString, callback) {
+      let data = []
+      if (!queryString) {
+        data = this.assetData
+      } else {
+        for (let i = 0; i < this.assetData.length; i++) {
+          if (this.assetData[i].host.indexOf(queryString) != -1) {
+            data.push(this.assetData[i])
+          }
+        }
+      }
+      callback(data)
+    },
+    getAssetData () {
+      this.$get('asset', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.assetData = response.data.list
+        }
+      })
+    },
+    /* 左侧上下拖动 */
+    treeDetailResize (e) {
+      const treeDom = document.querySelector('.mib-browser-tree') // tree
+      const detailDom = document.querySelector('.mib-browser-detail') // detail
+      // 得到点击时dom的初始高度：
+      const leftTotalHeight = document.querySelector('.mib-browser-left').offsetHeight
+      const treeInitialHeight = treeDom.offsetHeight
+      const detailInitialHeight = detailDom.offsetHeight
+      // 点击时鼠标的Y轴位置
+      const mouseInitialY = e.clientY
+
+      document.onmousemove = (e) => {
+        e.preventDefault()
+        // 得到鼠标拖动的距离
+        const mouseMoveY = Math.abs(e.clientY - mouseInitialY)
+
+        // 往上方拖动：
+        if (e.clientY < mouseInitialY) {
+          treeDom.style.height = treeInitialHeight - mouseMoveY - 5 + 'px'
+          detailDom.style.height = detailInitialHeight + mouseMoveY + 'px'
+        }
+        // 往下方拖动：
+        if (e.clientY > mouseInitialY) {
+          treeDom.style.height = treeInitialHeight + mouseMoveY - 5 + 'px'
+          detailDom.style.height = detailInitialHeight - mouseMoveY + 'px'
+        }
+
+        // 主、副列表最小高度限制为55px
+        if (parseInt(treeDom.style.height) >= leftTotalHeight - 95) {
+          treeDom.style.height = leftTotalHeight - 95 + 'px'
+        }
+        if (parseInt(treeDom.style.height) <= 55) {
+          treeDom.style.height = 55 + 'px'
+        }
+        if (parseInt(detailDom.style.height) >= leftTotalHeight - 95) {
+          detailDom.style.height = leftTotalHeight - 95 + 'px'
+        }
+        if (parseInt(detailDom.style.height) <= 55) {
+          detailDom.style.height = 55 + 'px'
+        }
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+      }
+    },
+    /* 中间左右拖动 */
+    leftRightResize (e) {
+      const leftDom = document.querySelector('.mib-browser-left') // tree
+      const rightDom = document.querySelector('.mib-browser-right') // detail
+      // 得到点击时dom的初始宽度：
+      const totalWidth = document.querySelector('.mib-browser-box').offsetWidth
+      const leftInitialWidth = leftDom.offsetWidth
+      const rightInitialWidth = rightDom.offsetWidth
+      // 点击时鼠标的Y轴位置
+      const mouseInitialX = e.clientX
+
+      document.onmousemove = (e) => {
+        e.preventDefault()
+        // 得到鼠标拖动的距离
+        const mouseMoveX = Math.abs(e.clientX - mouseInitialX)
+
+        // 往上方拖动：
+        if (e.clientX < mouseInitialX) {
+          leftDom.style.width = leftInitialWidth - mouseMoveX + 'px'
+          rightDom.style.width = rightInitialWidth + mouseMoveX + 'px'
+        }
+        // 往下方拖动：
+        if (e.clientX > mouseInitialX) {
+          leftDom.style.width = leftInitialWidth + mouseMoveX + 'px'
+          rightDom.style.width = rightInitialWidth - mouseMoveX + 'px'
+        }
+
+        // 主、副列表最小宽度限制
+        if (parseInt(leftDom.style.width) >= totalWidth - 400) {
+          leftDom.style.width = totalWidth - 400 + 'px'
+        }
+        if (parseInt(leftDom.style.width) <= 200) {
+          leftDom.style.width = 200 + 'px'
+        }
+        if (parseInt(rightDom.style.width) >= totalWidth - 200) {
+          rightDom.style.width = totalWidth - 200 + 'px'
+        }
+        if (parseInt(rightDom.style.width) <= 400) {
+          rightDom.style.width = 400 + 'px'
+        }
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+      }
+    },
+    domResize () {
+      const scrollTop = this.$refs.resultTable.$el.querySelector('.el-table__body-wrapper').scrollTop
+      this.showTable = false
+      this.$nextTick(() => {
+        this.showTable = true
+        this.$nextTick(() => {
+          this.$refs.resultTable.$el.querySelector('.el-table__body-wrapper').scrollTop = scrollTop
+        })
+      })
+    },
+    exportXlsx () {
+      if (this.resultData.length == 0) {
+        return
+      }
+      const book = xlsx.utils.book_new()
+      const sheet = xlsx.utils.json_to_sheet(this.resultData, { header: ['name', 'oid', 'value', 'type', 'ip', 'port'] })
+      xlsx.utils.book_append_sheet(book, sheet, 'result')
+      const out = xlsx.write(book, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+      })
+      try {
+        fileSaver.saveAs(
+          new Blob([out], {
+            type: 'application/octet-stream'
+          }),
+          'result_' + this.searchParam.host + '.xlsx'
+        )
+      } catch (e) {}
+      return out
+    }
+  },
+  mounted () {
+    this.getWalkData()
+    this.getModelData()
+    this.getAssetData()
+    window.addEventListener('resize', this.domResize)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.domResize)
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index 31488a092..416aba8ab 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -10,7 +10,7 @@
       <div class="top-tools" v-show="bottomBox.mainResizeShow">
         <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left-small': bottomBox.showSubList}">
           <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
+            <search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
           <button :title="$t('overall.createModel')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="model-add" v-has="'model_toAdd'">
             <i class="nz-icon-create-square nz-icon"></i>
@@ -83,7 +83,7 @@
           </template>
         </el-table-column>
         <el-table-column :resizable="false" width="28">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -106,289 +106,289 @@
 
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import deleteButton from "../../common/deleteButton";
-  export default {
-    name: "model",
-    components: {
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        /*二级页面相关*/
-        bottomBox: {
-          modelDetail: {}, //asset详情
-          model: {}, //告警信息对应的asset对象
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
+import bus from '../../../libs/bus'
+import deleteButton from '../../common/deleteButton'
+export default {
+  name: 'model',
+  components: {
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      /* 二级页面相关 */
+      bottomBox: {
+        modelDetail: {}, // asset详情
+        model: {}, // 告警信息对应的asset对象
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      batchDeleteObjs: [],
+      tableId: 'modelTable', // 需要分页的table的id，用于记录每页数量
 
-        rightBox: {show: false},
+      rightBox: { show: false },
 
-        model: {},
-        blankModel: {
-          id: '',
-          name: '',
-          vendor: {id: '', value: '', code: '', type: ''},
-          type: {id: '', value: '', code: '', type: ''},
-          assetStat: {total: '', inStock: '', outStock: ''},
-          remark: '',
-          vendorCode: '',
-          typeCode: '',
-          uSize:1,
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t('overall.name'),
-            prop: 'name',
-            show: true,
-          }, {
-            label: this.$t('overall.type'),
-            prop: 'type',
-            show: true,
-          }, {
-            label: this.$t('config.model.vendor'),
-            prop: 'vendor',
-            show: true,
-          }, {
-            label: this.$t("config.model.assets"),
-            prop: 'assetStat',
-            show: true,
-          }, {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 5,
-            name: this.$t('config.promServer.dataCenter'),
-            type: 'dc',
-            label: 'dc',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag:false,
+      model: {},
+      blankModel: {
+        id: '',
+        name: '',
+        vendor: { id: '', value: '', code: '', type: '' },
+        type: { id: '', value: '', code: '', type: '' },
+        assetStat: { total: '', inStock: '', outStock: '' },
+        remark: '',
+        vendorCode: '',
+        typeCode: '',
+        uSize: 1
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('config.model.vendor'),
+          prop: 'vendor',
+          show: true
+        }, {
+          label: this.$t('config.model.assets'),
+          prop: 'assetStat',
+          show: true
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 5,
+          name: this.$t('config.promServer.dataCenter'),
+          type: 'dc',
+          label: 'dc',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    assetStatClassName (param) {
+      if (param.column.label == this.$t('config.model.assets')) {
+        return 'asset-state'
       }
+      return ''
     },
-    methods: {
-      assetStatClassName(param) {
-        if (param.column.label == this.$t("config.model.assets")) {
-          return "asset-state";
-        }
-        return "";
-      },
-      panel(obj) {
-        if (!this.hasButton('model_chart_view')) {
-          return;
-        }
-        this.bottomBox.showSubList = true;
-        this.bottomBox.model = obj;
-        this.bottomBox.targetTab = "panel";
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      edit(u) {
-        this.model = Object.assign({}, u);
-        this.rightBox.show = true;
-      },
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("model?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      add() {
-        this.model = this.newModel();
-        this.rightBox.show = true;
-      },
-      newModel() {
-        return JSON.parse(JSON.stringify(this.blankModel));
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('model_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.$set(this.searchLabel, "stat", 1);
-        this.tools.loading = true;
-        this.$get('model', this.searchLabel).then(response => {
-          this.tools.loading = false;
+    panel (obj) {
+      if (!this.hasButton('model_chart_view')) {
+        return
+      }
+      this.bottomBox.showSubList = true
+      this.bottomBox.model = obj
+      this.bottomBox.targetTab = 'panel'
+    },
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    edit (u) {
+      this.model = Object.assign({}, u)
+      this.rightBox.show = true
+    },
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('model?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.modelTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.delFlag = true
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      pageNo(val) {
-        console.info(val)
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        let orderBy = '';
-        if(this.searchLabel.orderBy) {
-          orderBy = this.searchLabel.orderBy
-        }
-        this.pageObj.pageNo = 1;
-        this.searchLabel = {};
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy) {
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        if(this.$refs.modelTable&&this.$refs.modelTable.bodyWrapper){
-          this.$refs.modelTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item) {
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
+      })
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    add () {
+      this.model = this.newModel()
+      this.rightBox.show = true
+    },
+    newModel () {
+      return JSON.parse(JSON.stringify(this.blankModel))
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    getTableData () {
+      if (!this.hasButton('model_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.$set(this.searchLabel, 'stat', 1)
+      this.tools.loading = true
+      this.$get('model', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.modelTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    pageNo (val) {
+      console.info(val)
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.pageObj.pageNo = 1
+      this.searchLabel = {}
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.modelTable && this.$refs.modelTable.bodyWrapper) {
+        this.$refs.modelTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
 
-      this.getTableData();
+    this.getTableData()
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
     },
-    watch: {
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.modelTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.modelTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
         }
-      }
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
       }
     }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    }
   }
+}
 </script>
 `
diff --git a/nezha-fronted/src/components/page/config/operationlog.vue b/nezha-fronted/src/components/page/config/operationlog.vue
index b1ceadd97..ad28d7222 100644
--- a/nezha-fronted/src/components/page/config/operationlog.vue
+++ b/nezha-fronted/src/components/page/config/operationlog.vue
@@ -56,7 +56,7 @@
         </template>
       </el-table-column>
       <el-table-column width="28">
-        <template slot="header" slot-scope="scope">
+        <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -68,246 +68,246 @@
   </div>
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  export default {
-    name: "oparetionlog",
-    data() {
-      return {
-        tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
+import bus from '../../../libs/bus'
+export default {
+  name: 'oparetionlog',
+  data () {
+    return {
+      tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量
 
-        rightBox: { //弹出框相关
-          show: false,
+      rightBox: { // 弹出框相关
+        show: false
+      },
+      rightBoxResize: { // resize弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      rightBoxDownload: { // 下载弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      rightBoxUpload: { // 上传弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: this.$t('config.operationlog.id'),
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.operationlog.username'),
+          prop: 'username',
+          show: true
         },
-        rightBoxResize: { //resize弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.operationlog.ip'),
+          prop: 'ip',
+          show: true
         },
-        rightBoxDownload: { //下载弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.operationlog.operation'),
+          prop: 'operation',
+          show: true
         },
-        rightBoxUpload: { //上传弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.operationlog.type'),
+          prop: 'type',
+          show: true
         },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
+        {
+          label: this.$t('config.operationlog.state'),
+          prop: 'state',
+          show: true
         },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
+        // {
+        //   label: this.$t('config.operationlog.userId'),
+        //   prop: 'userId',
+        //   show: false,
+        // },
+        {
+          label: this.$t('config.operationlog.operaId'),
+          prop: 'operaId',
+          show: false
         },
-        tableTitle: [
+        {
+          label: this.$t('config.operationlog.createDate'),
+          prop: 'createDate',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.time'),
+          prop: 'time',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.params'),
+          prop: 'params',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.response'),
+          prop: 'response',
+          show: false
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
           {
-            label: this.$t("config.operationlog.id"),
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t('config.operationlog.username'),
-            prop: 'username',
-            show: true,
-          },
-          {
-            label: this.$t('config.operationlog.ip'),
-            prop: 'ip',
-            show: true,
-          },
-          {
-            label: this.$t('config.operationlog.operation'),
-            prop: 'operation',
-            show: true,
-          },
-          {
-            label: this.$t('config.operationlog.type'),
-            prop: 'type',
-            show: true,
-          },
-          {
-            label: this.$t('config.operationlog.state'),
-            prop: 'state',
-            show: true,
-          },
-          // {
-          //   label: this.$t('config.operationlog.userId'),
-          //   prop: 'userId',
-          //   show: false,
-          // },
-          {
-            label: this.$t('config.operationlog.operaId'),
-            prop: 'operaId',
-            show: false,
-          },
-          {
-            label: this.$t('config.operationlog.createDate'),
-            prop: 'createDate',
-            show: true,
-          },
-          {
-            label: this.$t('config.operationlog.time'),
-            prop: 'time',
-            show: false,
-          },
-          {
-            label: this.$t('config.operationlog.params'),
-            prop: 'params',
-            show: false,
-          },
-          {
-            label: this.$t('config.operationlog.response'),
-            prop: 'response',
-            show: false,
-          },
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-            {
             id: 11,
             name: this.$t('config.operationlog.type'),
             type: 'input',
             label: 'type',
             disabled: false
-          },{
+          }, {
             id: 12,
             name: this.$t('config.operationlog.username'),
             type: 'input',
             label: 'username',
             disabled: false
-          },{
+          }, {
             id: 13,
             name: this.$t('config.operationlog.operation'),
             type: 'selectString',
             label: 'operation',
             disabled: false
           }
-          ],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-      }
-    },
-    methods: {
-      messageStyle(e) {
-        if (e.column.label == this.$t('config.operationlog.state')) {
-          if (e.row.state == 'success') {
-            return 'success';
-          } else {
-            return 'danger';
-          }
-        }
-        return '';
+        ]
       },
-      getTableData: function () {
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('sys/log/list', this.searchLabel).then(response => {
-          this.tools.loading = false;
-          if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.operationLogTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
-          }
-        })
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      formatUsername(row){
-        if(row.username){
-          return row.username;
-        } else if(row.operation==='login'&&!row.username){//如果是登录 且登录失败
-          return JSON.parse(row.params).username
-        } else{
-          return '-'
-        }
-      },
-      search: function (searchObj) {
-        let orderBy = '';
-        if(this.searchLabel.orderBy){
-          orderBy = this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-    },
-    watch:{
-      tableData(){
-        if(this.$refs.operationLogTable&&this.$refs.operationLogTable.bodyWrapper){
-          this.$refs.operationLogTable.bodyWrapper.scrollTop = 0;
-        }
-      },
-    },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-    },
-    computed: {
-      isCurrentUser() {
-        return function(username) {
-          return localStorage.getItem('nz-username') == username;
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null
+    }
+  },
+  methods: {
+    messageStyle (e) {
+      if (e.column.label == this.$t('config.operationlog.state')) {
+        if (e.row.state == 'success') {
+          return 'success'
+        } else {
+          return 'danger'
         }
       }
+      return ''
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    getTableData: function () {
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('sys/log/list', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.operationLogTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    formatUsername (row) {
+      if (row.username) {
+        return row.username
+      } else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
+        return JSON.parse(row.params).username
+      } else {
+        return '-'
       }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.getTableData();
+    search: function (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.getTableData()
     },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  watch: {
+    tableData () {
+      if (this.$refs.operationLogTable && this.$refs.operationLogTable.bodyWrapper) {
+        this.$refs.operationLogTable.bodyWrapper.scrollTop = 0
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') == username
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index b54dc026c..0b685e74e 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -76,7 +76,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28" :resizable="false">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -99,370 +99,370 @@
 
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import promServerBox from '../../common/rightBox/promServerBox';
-  import deleteButton from "../../common/deleteButton";
-  export default {
-    name: "promServer",
-    components: {
-      'prom-server-box': promServerBox,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-        },
-        /*二级页面相关*/
-        bottomBox: {
-          promDetail: {},
-          promServer: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-        tableId: 'promTable', //需要分页的table的id，用于记录每页数量
+import bus from '../../../libs/bus'
+import promServerBox from '../../common/rightBox/promServerBox'
+import deleteButton from '../../common/deleteButton'
+export default {
+  name: 'promServer',
+  components: {
+    'prom-server-box': promServerBox,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false
+      },
+      /* 二级页面相关 */
+      bottomBox: {
+        promDetail: {},
         promServer: {},
-        blankPromServer: {
-          id: '',
-          host: '',
-          port: 9090,
-          idc: {id: '', name: '', location: ''}
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("config.dc.dc"),
-            prop: 'idc',
-            show: true,
-          }, {
-            label: 'Host',
-            prop: 'host',
-            show: true,
-          }, {
-            label: 'Port',
-            prop: 'port',
-            show: true,
-          }, {
-            label: this.$t("config.promServer.type"),
-            prop: 'type',
-            show: true,
-          }, {
-            label: this.$t('asset.state'),
-            prop: 'status',
-            show: true
-          }, {
-            label: this.$t('config.promServer.checkTime'),
-            prop: 'checkTime',
-            show: false
-          }, {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      batchDeleteObjs: [],
+      tableId: 'promTable', // 需要分页的table的id，用于记录每页数量
+      promServer: {},
+      blankPromServer: {
+        id: '',
+        host: '',
+        port: 9090,
+        idc: { id: '', name: '', location: '' }
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.dc.dc'),
+          prop: 'idc',
+          show: true
+        }, {
+          label: 'Host',
+          prop: 'host',
+          show: true
+        }, {
+          label: 'Port',
+          prop: 'port',
+          show: true
+        }, {
+          label: this.$t('config.promServer.type'),
+          prop: 'type',
+          show: true
+        }, {
+          label: this.$t('asset.state'),
+          prop: 'status',
+          show: true
+        }, {
+          label: this.$t('config.promServer.checkTime'),
+          prop: 'checkTime',
+          show: false
+        }, {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      tableData: [],
+      dcData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 5,
+          name: this.$t('config.promServer.dataCenter'),
+          type: 'dc',
+          label: 'dc',
+          disabled: false
+        }, {
+          id: 6,
+          name: this.$t('config.promServer.type'),
+          type: 'select',
+          label: 'promType',
+          disabled: false
+        }, {
+          id: 8,
+          name: this.$t('project.endpoint.host'),
+          type: 'input',
+          label: 'host',
+          disabled: false
+        }, {
+          id: 9,
+          name: this.$t('project.endpoint.port'),
+          type: 'input',
+          label: 'port',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      promServerType: null,
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    convertToDetail (obj) {
+      const detail = []
+      detail.push({ label: this.$t('config.dc.dc'), value: obj.idc.name })
+      detail.push({ label: 'Host', value: obj.host })
+      detail.push({ label: 'Port', value: obj.port })
+      let type = ''
+      for (let i = 0; i < this.$CONSTANTS.promServer.typeData.length; i++) {
+        if (obj.value == this.$CONSTANTS.promServer.typeData[i].type) {
+          type = this.$CONSTANTS.promServer.typeData[i].label
+          break
+        }
+      }
+      detail.push({ label: this.$t('config.promServer.type'), value: type })
+      detail.push({
+        label: this.$t('asset.state'),
+        value: obj.status,
+        type: 'status',
+        msg: this.$t('asset.assetStatPre') + (obj.checkTime ? obj.checkTime : this.$t('asset.assetStatDown'))
+      })
+      return detail
+    },
+    edit (u) {
+      this.promServer = JSON.parse(JSON.stringify(u))
+      this.rightBox.show = true
+    },
+    /* 删除 */
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('promServer?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
           }
-        ],
-        tableData: [],
-        dcData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 1,
-            name: 'ID',
-            type: 'input',
-            label: 'id',
-            disabled: false
-          }, {
-            id: 5,
-            name: this.$t('config.promServer.dataCenter'),
-            type: 'dc',
-            label: 'dc',
-            disabled: false
-          }, {
-            id: 6,
-            name: this.$t('config.promServer.type'),
-            type: 'select',
-            label: 'promType',
-            disabled: false
-          }, {
-            id: 8,
-            name: this.$t('project.endpoint.host'),
-            type: 'input',
-            label: 'host',
-            disabled: false
-          }, {
-            id: 9,
-            name: this.$t('project.endpoint.port'),
-            type: 'input',
-            label: 'port',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        promServerType:null,
-        scrollbarWrap: null,
-        delFlag:false,
+        })
+      })
+    },
+    detail (u) {
+      this.bottomBox.promServer = JSON.parse(JSON.stringify(u))
+      this.bottomBox.targetTab = 'detail'
+      this.bottomBox.showSubList = true
+    },
+    add () {
+      this.promServer = this.newPromServer()
+      this.rightBox.show = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    methods: {
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      convertToDetail(obj) {
-        let detail = [];
-        detail.push({label: this.$t("config.dc.dc"), value: obj.idc.name});
-        detail.push({label: "Host", value: obj.host});
-        detail.push({label: "Port", value: obj.port});
-        let type = "";
-        for (let i = 0; i < this.$CONSTANTS.promServer.typeData.length; i++) {
-          if (obj.value == this.$CONSTANTS.promServer.typeData[i].type) {
-            type = this.$CONSTANTS.promServer.typeData[i].label;
-            break;
-          }
-        }
-        detail.push({label: this.$t('config.promServer.type'), value: type});
-        detail.push({
-          label: this.$t('asset.state'),
-          value: obj.status,
-          type: 'status',
-          msg: this.$t('asset.assetStatPre')+(obj.checkTime ? obj.checkTime : this.$t('asset.assetStatDown'))
-        });
-        return detail;
-      },
-      edit(u) {
-        this.promServer = JSON.parse(JSON.stringify(u));
-        this.rightBox.show = true;
-      },
-      /*删除*/
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("promServer?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      detail(u) {
-        this.bottomBox.promServer = JSON.parse(JSON.stringify(u));
-        this.bottomBox.targetTab = "detail";
-        this.bottomBox.showSubList = true;
-      },
-      add() {
-        this.promServer = this.newPromServer();
-        this.rightBox.show = true;
-      },
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
-        }
-      },
 
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('prom_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
         }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.loading = true;
-        this.$get('promServer', this.searchLabel).then(response => {
-          this.loading = false;
-          if (response.code === 200) {
-            for (let i = 0; i < response.data.list.length; i++) {
-              for (let j = 0; j < this.dcData.length; j++) {
-                if (response.data.list[i].idcId == this.dcData[j].id) {
-                  response.data.list[i].idc = this.dcData[j];
-                  break;
-                }
+      })
+    },
+    getTableData () {
+      if (!this.hasButton('prom_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.loading = true
+      this.$get('promServer', this.searchLabel).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            for (let j = 0; j < this.dcData.length; j++) {
+              if (response.data.list[i].idcId == this.dcData[j].id) {
+                response.data.list[i].idc = this.dcData[j]
+                break
               }
             }
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.promTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
           }
-        })
-      },
-      newPromServer() {
-        return JSON.parse(JSON.stringify(this.blankPromServer));
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.pageObj.pageNo = 1;
-        this.searchLabel = {};
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.promTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
+      })
+    },
+    newPromServer () {
+      return JSON.parse(JSON.stringify(this.blankPromServer))
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.pageObj.pageNo = 1
+      this.searchLabel = {}
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
         }
-        if(this.$refs.promTable&&this.$refs.promTable.bodyWrapper){
-          this.$refs.promTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      //获取dc数据
-      getDcData() {
-        return new Promise(resolve => {
-          this.$get('idc', {pageSize: -1}).then(response => {
-            if (response.code === 200) {
-              this.dcData = response.data.list;
-            }
-            resolve();
-          });
-        });
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
-      findServerType(type){
-        if(!this.promServerType){
-          this.promServerType=[];
-          this.$CONSTANTS.promServer.theData.forEach(item=>{
-            this.promServerType=this.promServerType.concat(item.children)
-          })
-        }
-        return this.promServerType.find(item=>{
-          return item.value == type
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.promTable && this.$refs.promTable.bodyWrapper) {
+        this.$refs.promTable.bodyWrapper.scrollTop = 0
+      }
+      this.getTableData()
+    },
+    // 获取dc数据
+    getDcData () {
+      return new Promise(resolve => {
+        this.$get('idc', { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.dcData = response.data.list
+          }
+          resolve()
         })
-      },
+      })
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
       }
-    },
-    mounted() {
-      //初始化数据
-      Promise.all([this.getDcData()]).then(response => {
-        this.getTableData();
-      });
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
       }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
     },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-    },
+    findServerType (type) {
+      if (!this.promServerType) {
+        this.promServerType = []
+        this.$CONSTANTS.promServer.theData.forEach(item => {
+          this.promServerType = this.promServerType.concat(item.children)
+        })
+      }
+      return this.promServerType.find(item => {
+        return item.value == type
+      })
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化数据
+    Promise.all([this.getDcData()]).then(response => {
+      this.getTableData()
+    })
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
 
-    watch: {
-      'bottomBox.promServer': {
-        deep: true,
-        handler(n) {
-          this.bottomBox.promDetail = this.convertToDetail(n);
-        }
-      },
-      'bottomBox.showSubList': function(n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.promTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
-          }
-        }
+  watch: {
+    'bottomBox.promServer': {
+      deep: true,
+      handler (n) {
+        this.bottomBox.promDetail = this.convertToDetail(n)
       }
     },
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    },
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.promTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue
index 7ef4dfc40..0c38a8964 100644
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -60,10 +60,10 @@
           v-for="(item, index) in tools.customTableTitle"
           v-if="item.show"
         >
-          <template slot="header" slot-scope="scope">
-          <span :title="item.label" class="tag-header" v-if="item.type == 'tag'"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
-          <span v-else><span>{{item.label}}</span></span>
-        </template>
+          <template slot="header" >
+            <span v-if="item.type == 'tag'" :title="item.label" class="tag-header"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
+            <span v-else><span>{{item.label}}</span></span>
+          </template>
           <template :column="item" slot-scope="scope">
             <div class="content-right-options" v-if="item.prop == 'option'">
               <template v-if="scope.row.buildIn != 1">
@@ -90,7 +90,7 @@
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="28">
-          <template :resizable="false" slot="header" slot-scope="scope">
+          <template slot="header" :resizable="false">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
@@ -108,233 +108,233 @@
   </div>
 </template>
 <script>
-  import deleteButton from "../../common/deleteButton";
-  import roleBox from '../../common/rightBox/roleBox';
-  import bus from "../../../libs/bus";
+import deleteButton from '../../common/deleteButton'
+import roleBox from '../../common/rightBox/roleBox'
+import bus from '../../../libs/bus'
 
-  export default {
-    name: "roles",
-    components: {
-      'role-box': roleBox,
-      'delete-button':deleteButton,
-    },
-    data() {
-      return {
-        //侧滑
-        rightBox: {
-          show: false,
-          detail:false
-        },
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        batchDeleteObjs:[],
-        role: {},
+export default {
+  name: 'roles',
+  components: {
+    'role-box': roleBox,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      // 侧滑
+      rightBox: {
+        show: false,
+        detail: false
+      },
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      batchDeleteObjs: [],
+      role: {},
 
-        tableId: 'rolesTable', //需要分页的table的id，用于记录每页数量
-        blankRole: { //空白对象
+      tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
+      blankRole: { // 空白对象
 
-        },
-        pageObj: { //分页对象
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableTitle: [ //原table列
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          }, {
-            label: this.$t("config.roles.name"),
-            prop: 'name',
-            show: true,
-          }, {
-            label: this.$t("config.roles.description"),
-            prop: 'remark',
-            show: true,
-          }, {
-            label: this.$t('config.roles.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
-          }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [{
-            id: 10,
-            name: this.$t('config.roles.name'),
-            type: 'input',
-            label: 'name',
-            disabled: false
-          }],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        delFlag:false,
+      },
+      pageObj: { // 分页对象
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.roles.description'),
+          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('config.roles.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: this.$t('config.roles.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      delFlag: false
+    }
+  },
+  methods: {
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
       }
     },
-    methods: {
-      closeRightBox(refresh) {
-        this.rightBox.show = false;
-        if (refresh) {
-          this.delFlag=true;
-          this.getTableData();
+    edit (u) {
+      if (u.buildIn == 1) {
+        return
+      }
+      this.role = JSON.parse(JSON.stringify(u))
+      this.$get('sys/role/menu/' + this.role.id).then(response => {
+        if (response.code == 200) {
+          this.role.menuIds = response.data.selectedIds
+          this.rightBox.show = true
+          this.rightBox.detail = false
         }
-      },
-      edit(u) {
-        if(u.buildIn == 1){
-          return ;
-        }
-        this.role = JSON.parse(JSON.stringify(u));
-        this.$get("sys/role/menu/"+this.role.id).then(response=>{
-          if(response.code == 200){
-            this.role.menuIds = response.data.selectedIds;
-            this.rightBox.show = true;
-            this.rightBox.detail=false;
-          }
-        })
-      },
-      del(u) {
-        if(u.buildIn == 1){
-          return ;
-        }
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("sys/role?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.delFlag=true;
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      getTableData() {
-        if (!this.hasButton('role_view')) {
-          this.$message.error(this.$t("tip.noAccess"));
-          return;
-        }
-        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
-        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.tools.loading = true;
-        this.$get('sys/role', this.searchLabel).then(response => {
-          this.tools.loading = false;
+      })
+    },
+    del (u) {
+      if (u.buildIn == 1) {
+        return
+      }
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('sys/role?ids=' + u.id).then(response => {
           if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
-            this.tools.loading = false;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.rolesTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
           }
         })
-      },
-      add() {
-        this.role = this.newRole();
-        this.rightBox.show = true;
-        this.rightBox.detail=false;
-      },
-      esc() {
-        this.rightBox.show = false;
-        this.rightBox.detail=false;
-      },
-      detail:function(data){
-        this.role = JSON.parse(JSON.stringify(data))
-        this.rightBox.show = true;
-        this.rightBox.detail=true;
-      },
-      newRole() {
-        return JSON.parse(JSON.stringify(this.blankRole));
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search(searchObj) {
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(this.$refs.rolesTable){
-          this.$refs.rolesTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getTableData();
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy = '';
-        if(item.order === 'ascending') {
-          orderBy = item.prop;
-        }
-        if(item.order === 'descending') {
-          orderBy = '-' + item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
+      })
     },
-    watch: {
-      tableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.pageObj.pageNo > 1) {
-            this.pageNo(this.pageObj.pageNo-1);
-          }
-          if(!this.delFlag){ // 不是删除时回到顶部
-            this.$refs.rolesTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
+    getTableData () {
+      if (!this.hasButton('role_view')) {
+        this.$message.error(this.$t('tip.noAccess'))
+        return
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get('sys/role', this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          this.tools.loading = false
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.rolesTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
         }
+      })
+    },
+    add () {
+      this.role = this.newRole()
+      this.rightBox.show = true
+      this.rightBox.detail = false
+    },
+    esc () {
+      this.rightBox.show = false
+      this.rightBox.detail = false
+    },
+    detail: function (data) {
+      this.role = JSON.parse(JSON.stringify(data))
+      this.rightBox.show = true
+      this.rightBox.detail = true
+    },
+    newRole () {
+      return JSON.parse(JSON.stringify(this.blankRole))
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search (searchObj) {
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
       }
-    },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+      if (this.$refs.rolesTable) {
+        this.$refs.rolesTable.bodyWrapper.scrollTop = 0
       }
+      this.getTableData()
     },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-    },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      this.getTableData();
-    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.pageObj.pageNo > 1) {
+          this.pageNo(this.pageObj.pageNo - 1)
+        }
+        if (!this.delFlag) { // 不是删除时回到顶部
+          this.$refs.rolesTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/setup.vue b/nezha-fronted/src/components/page/config/setup.vue
index 17b8246c7..f3d8b4813 100644
--- a/nezha-fronted/src/components/page/config/setup.vue
+++ b/nezha-fronted/src/components/page/config/setup.vue
@@ -158,256 +158,256 @@
 </template>
 
 <script>
-    import {getUUID} from "../../common/js/common";
-    import {host, port} from "../../common/js/validate";
+import { getUUID } from '../../common/js/common'
+import { host, port } from '../../common/js/validate'
 
-    export default {
-      name: "setup",
-      data(){
-        return{
-          validateCode:"",
-          language:"en",
-          step:0,
-          activeStep:0,
-          database:{
-            host:"",
-            port:3306,
-            name:'nz',
-            username:"",
-            password:"",
-          },
-          dbRules:{
-            host:[
-              {required:true,message:this.$t('validate.required'),trigger: 'blur'},
-              {validator:host, trigger: 'blur'}
-            ],
-            port:[{validator:port,trigger:'blur'}],
-            name:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-            username:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-            password:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-          },
-          redis:{
-            host:"",
-            port:6379,
-            password:"",
-          },
-          redisRules:{
-            host:[
-              {required:true,message:this.$t('validate.required'),trigger: 'blur'},
-              {validator:host, trigger: 'blur'}
-            ],
-            port:[{validator:port,trigger:'blur'}],
-          },
-          system:{
-            username:"",
-            password:"",
-            alertPath:"",
-            alertPrefix:"",
-            haMode:1,
-            haVip:"",
-          },
-          sysRules:{
-            username:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-            password:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-            alertPath:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-            haVip:[{required:true,message:this.$t('validate.required'),trigger: 'blur'}],
-          },
-          reloadTime:5000,
-          reloadTimeout:null,
-          reloadTimeCount:0,
-          prevent_next:false,
-          prevent_finish:false,
-        }
+export default {
+  name: 'setup',
+  data () {
+    return {
+      validateCode: '',
+      language: 'en',
+      step: 0,
+      activeStep: 0,
+      database: {
+        host: '',
+        port: 3306,
+        name: 'nz',
+        username: '',
+        password: ''
       },
-      created() {
-        this.getValidateCode();
+      dbRules: {
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        port: [{ validator: port, trigger: 'blur' }],
+        name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
       },
-      methods:{
-        changeStep:function(step){
-          switch (step) {
-            case 0:
-                this.activeStep = 0;
-              break;
-            case 1:
-                if(this.prevent_next){return}
-                this.prevent_next=true
-                if(this.activeStep > 1){
-                  this.activeStep = 1;
-                  this.prevent_next=false;
-                }else{
-                  this.getValidateCode();
-                  this.$get("setup/checkCode?code="+this.validateCode).then(response=>{
-                    if(response.code == 200 ){
-                      this.activeStep = 1;
-                      this.step = 1;
-                    }else{
-                      this.activeStep = 0;
-                      this.step = 0;
-                      if(response.code == 574012){
-                        this.$alert(this.$t('setup.hadConfig'),{type:"warning"})
-                      }else{
-                        this.$alert(this.$t('setup.invalidCode',{page:''}),{type:"warning"})
-                      }
-                    }
-                    this.prevent_next=false;
-                  })
+      redis: {
+        host: '',
+        port: 6379,
+        password: ''
+      },
+      redisRules: {
+        host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: host, trigger: 'blur' }
+        ],
+        port: [{ validator: port, trigger: 'blur' }]
+      },
+      system: {
+        username: '',
+        password: '',
+        alertPath: '',
+        alertPrefix: '',
+        haMode: 1,
+        haVip: ''
+      },
+      sysRules: {
+        username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        alertPath: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        haVip: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      reloadTime: 5000,
+      reloadTimeout: null,
+      reloadTimeCount: 0,
+      prevent_next: false,
+      prevent_finish: false
+    }
+  },
+  created () {
+    this.getValidateCode()
+  },
+  methods: {
+    changeStep: function (step) {
+      switch (step) {
+        case 0:
+          this.activeStep = 0
+          break
+        case 1:
+          if (this.prevent_next) { return }
+          this.prevent_next = true
+          if (this.activeStep > 1) {
+            this.activeStep = 1
+            this.prevent_next = false
+          } else {
+            this.getValidateCode()
+            this.$get('setup/checkCode?code=' + this.validateCode).then(response => {
+              if (response.code == 200) {
+                this.activeStep = 1
+                this.step = 1
+              } else {
+                this.activeStep = 0
+                this.step = 0
+                if (response.code == 574012) {
+                  this.$alert(this.$t('setup.hadConfig'), { type: 'warning' })
+                } else {
+                  this.$alert(this.$t('setup.invalidCode', { page: '' }), { type: 'warning' })
                 }
-              break;
-            case 2:
-              if(this.prevent_next){return}
-              this.prevent_next=true
-              if(this.activeStep > 2){
-                this.activeStep = 2
-                this.prevent_next=false;
-              }else {
-                this.$refs['db-form'].validate((valid) => {
-                  if (valid) {
-                    this.getValidateCode();
-                    this.$post("setup/checkDb", {database:this.database,code:this.validateCode}).then(response => {
-                      if (response.code == 200) {
-                        this.activeStep = 2;
-                        this.step = 2;
-                      } else {
-                        this.activeStep = 1;
-                        this.step = 1;
-                        if(response.code == 574002){
-                          this.$alert(this.$t('setup.invalidCode',{page:this.$t('setup.welcomePage')}),{type:"warning"})
-                        }else{
-                          this.$alert(this.$t('setup.invalidDb'),{type:"warning"})
-                        }
-                      }
-                      this.prevent_next=false;
-                    })
-                  }else{
-                    this.prevent_next=false;
-                  }
-                })
               }
-              break;
-            case 3:
-              if(this.prevent_next){return}
-              this.prevent_next=true
-              if(this.activeStep > 3){
-                this.activeStep =3
-                this.prevent_next=false;
-              }else{
-                this.$refs['redis-form'].validate((valid) => {
-                  if (valid) {
-                    this.getValidateCode();
-                    this.$post("setup/checkRedis",{redis:this.redis,code:this.validateCode}).then(response=>{
-                      if(response.code == 200 ){
-                        this.activeStep = 3;
-                        this.step = 3;
-                      }else{
-                        this.activeStep = 2;
-                        this.step = 2;
-                        if(response.code == 574004 ){ //密码无效
-                          this.$alert(this.$t('setup.invalidPassword'),{type:"warning"})
-                        }else if(response.code == 574005){
-                          this.$alert(this.$t('setup.requirePassword'),{type:"warning"})
-                        }else if(response.code == 574002){
-                          this.$alert(this.$t('setup.invalidCode',{page:this.$t('setup.welcomePage')}),{type:"warning"})
-                        }else{
-                          this.$alert(this.$t('setup.invalidRedis'),{type:"warning"})
-                        }
-                      }
-                      this.prevent_next=false;
-                    })
-                  }else{
-                    this.prevent_next=false;
-                  }
-                })
-              }
-              break;
-            case 4:
-              if(this.prevent_finish){return}
-              this.prevent_next=true
-              this.$refs['sys-form'].validate((valid) => {
-                if (valid) {
-                  this.getValidateCode();
-                  let params={
-                    database:this.database,
-                    redis:this.redis,
-                    system:this.system,
-                    code:this.validateCode
-                  }
-                  this.$post("setup/config",params).then(response=>{
-                    if(response.code == 200 ){
-                      this.activeStep = 3;
-                      this.step = 4;
-                      this.$alert(this.$t('setup.wait'),{type:"success"})
-                      this.reloadTimeout = setTimeout(this.jumpToLogin,this.reloadTime)
-                    }else{
-                      this.activeStep = 3;
-                      this.step = 3;
-                      if(response.code == 574002){
-                        this.$alert(this.$t('setup.invalidCode',{page:this.$t('setup.welcomePage')}),{type:"warning"})
-                      }
+              this.prevent_next = false
+            })
+          }
+          break
+        case 2:
+          if (this.prevent_next) { return }
+          this.prevent_next = true
+          if (this.activeStep > 2) {
+            this.activeStep = 2
+            this.prevent_next = false
+          } else {
+            this.$refs['db-form'].validate((valid) => {
+              if (valid) {
+                this.getValidateCode()
+                this.$post('setup/checkDb', { database: this.database, code: this.validateCode }).then(response => {
+                  if (response.code == 200) {
+                    this.activeStep = 2
+                    this.step = 2
+                  } else {
+                    this.activeStep = 1
+                    this.step = 1
+                    if (response.code == 574002) {
+                      this.$alert(this.$t('setup.invalidCode', { page: this.$t('setup.welcomePage') }), { type: 'warning' })
+                    } else {
+                      this.$alert(this.$t('setup.invalidDb'), { type: 'warning' })
                     }
-                  })
-                }else{
-                  this.prevent_next=false;
+                  }
+                  this.prevent_next = false
+                })
+              } else {
+                this.prevent_next = false
+              }
+            })
+          }
+          break
+        case 3:
+          if (this.prevent_next) { return }
+          this.prevent_next = true
+          if (this.activeStep > 3) {
+            this.activeStep = 3
+            this.prevent_next = false
+          } else {
+            this.$refs['redis-form'].validate((valid) => {
+              if (valid) {
+                this.getValidateCode()
+                this.$post('setup/checkRedis', { redis: this.redis, code: this.validateCode }).then(response => {
+                  if (response.code == 200) {
+                    this.activeStep = 3
+                    this.step = 3
+                  } else {
+                    this.activeStep = 2
+                    this.step = 2
+                    if (response.code == 574004) { // 密码无效
+                      this.$alert(this.$t('setup.invalidPassword'), { type: 'warning' })
+                    } else if (response.code == 574005) {
+                      this.$alert(this.$t('setup.requirePassword'), { type: 'warning' })
+                    } else if (response.code == 574002) {
+                      this.$alert(this.$t('setup.invalidCode', { page: this.$t('setup.welcomePage') }), { type: 'warning' })
+                    } else {
+                      this.$alert(this.$t('setup.invalidRedis'), { type: 'warning' })
+                    }
+                  }
+                  this.prevent_next = false
+                })
+              } else {
+                this.prevent_next = false
+              }
+            })
+          }
+          break
+        case 4:
+          if (this.prevent_finish) { return }
+          this.prevent_next = true
+          this.$refs['sys-form'].validate((valid) => {
+            if (valid) {
+              this.getValidateCode()
+              const params = {
+                database: this.database,
+                redis: this.redis,
+                system: this.system,
+                code: this.validateCode
+              }
+              this.$post('setup/config', params).then(response => {
+                if (response.code == 200) {
+                  this.activeStep = 3
+                  this.step = 4
+                  this.$alert(this.$t('setup.wait'), { type: 'success' })
+                  this.reloadTimeout = setTimeout(this.jumpToLogin, this.reloadTime)
+                } else {
+                  this.activeStep = 3
+                  this.step = 3
+                  if (response.code == 574002) {
+                    this.$alert(this.$t('setup.invalidCode', { page: this.$t('setup.welcomePage') }), { type: 'warning' })
+                  }
                 }
               })
-              break;
-          }
-        },
-        jumpToLogin:function(){
-          this.reloadTimeCount+=this.reloadTime;
-          if(this.reloadTimeCount > 5*60*1000){
-            clearTimeout(this.reloadTimeout)
-            this.$alert(this.$t('setup.reloadTimeout'),{type:"warning"})
-            return;
-          }
-          this.$get("healthy").then(response=>{
-            if(response.code == 200){
-              this.$router.push({
-                path:"/"
-              })
-              clearTimeout(this.reloadTimeout)
-            }else{
-              this.reloadTimeout = setTimeout(this.jumpToLogin,this.reloadTime)
+            } else {
+              this.prevent_next = false
             }
           })
-        },
-        nextStep:function(){
-          this.changeStep(this.activeStep+1);
-          },
-        preStep:function(){
-          this.changeStep(this.activeStep-1);
-        },
-        finishStep:function(){
-          this.changeStep(4);
-        },
-        getValidateCode:function(){
-          const saveValidateCodeFunc = function (validateCode){
-            let saveItem = {
-              code:validateCode,
-              time:Date.now(),
-              expire:30*60*1000
-            }
-            localStorage.setItem("setup-validate-code",JSON.stringify(saveItem))
-          }
-          let validateCodeJSON = localStorage.getItem("setup-validate-code");
-          if(validateCodeJSON != 'undefined' && validateCodeJSON != null){
-            let validateCode = JSON.parse(validateCodeJSON);
-            if(Date.now() - validateCode.time > validateCode.expire){
-              this.validateCode = getUUID();
-              saveValidateCodeFunc(this.validateCode)
-            }else{
-              this.validateCode = validateCode.code;
-            }
-          }else{
-            this.validateCode = getUUID();
-            saveValidateCodeFunc(this.validateCode)
-          }
-        },
-        changeLocal:function(local){
-          this.language = local;
-          this.$i18n.locale = local;
+          break
+      }
+    },
+    jumpToLogin: function () {
+      this.reloadTimeCount += this.reloadTime
+      if (this.reloadTimeCount > 5 * 60 * 1000) {
+        clearTimeout(this.reloadTimeout)
+        this.$alert(this.$t('setup.reloadTimeout'), { type: 'warning' })
+        return
+      }
+      this.$get('healthy').then(response => {
+        if (response.code == 200) {
+          this.$router.push({
+            path: '/'
+          })
+          clearTimeout(this.reloadTimeout)
+        } else {
+          this.reloadTimeout = setTimeout(this.jumpToLogin, this.reloadTime)
         }
-      },
+      })
+    },
+    nextStep: function () {
+      this.changeStep(this.activeStep + 1)
+    },
+    preStep: function () {
+      this.changeStep(this.activeStep - 1)
+    },
+    finishStep: function () {
+      this.changeStep(4)
+    },
+    getValidateCode: function () {
+      const saveValidateCodeFunc = function (validateCode) {
+        const saveItem = {
+          code: validateCode,
+          time: Date.now(),
+          expire: 30 * 60 * 1000
+        }
+        localStorage.setItem('setup-validate-code', JSON.stringify(saveItem))
+      }
+      const validateCodeJSON = localStorage.getItem('setup-validate-code')
+      if (validateCodeJSON != 'undefined' && validateCodeJSON != null) {
+        const validateCode = JSON.parse(validateCodeJSON)
+        if (Date.now() - validateCode.time > validateCode.expire) {
+          this.validateCode = getUUID()
+          saveValidateCodeFunc(this.validateCode)
+        } else {
+          this.validateCode = validateCode.code
+        }
+      } else {
+        this.validateCode = getUUID()
+        saveValidateCodeFunc(this.validateCode)
+      }
+    },
+    changeLocal: function (local) {
+      this.language = local
+      this.$i18n.locale = local
     }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 9c1f5cf70..c68597ffe 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -8,10 +8,10 @@
               <el-input v-model="basic.system_name" id="system-baisc-system_name"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
-              <el-input v-model="basic.alert_api"id="system-baisc-alert_api"></el-input>
+              <el-input id="system-baisc-alert_api" v-model="basic.alert_api"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
-              <el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off'id="system-baisc-asset_ping_switch">
+              <el-switch id="system-baisc-asset_ping_switch" v-model.number="basic.asset_ping_switch"  active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off'>
               </el-switch>
             </el-form-item>
             <!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
@@ -233,10 +233,10 @@
                        :move="move"
                        handle=".handle"
             >
-              <div v-for="(item,index) in notification" class="linkContent" :id="'notificationDiv'+item.id">
+              <div v-for="(item,index) in notification" :id="'notificationDiv'+item.id" :key="index" class="linkContent">
                 <i class="nz-icon nz-icon-sort4 handle" style="display:none"></i>
                 <span style="display: inline-block;width: 26px"></span>
-                <el-form :inline="true"  :model="notification[index]" :ref="'notificationForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="notificationRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
+                <el-form v-if="item.isEdit"  :key="index" :ref="'notificationForm'+item.id" :inline="true" :model="notification[index]" :rules="notificationRules" :validate-on-rule-change="false" class="reset-form" label-width="180px" size="small" >
                   <el-form-item  prop="name" class="linkName">
                     <el-input v-model="item.name" width="140px" />
                   </el-form-item>
@@ -300,9 +300,9 @@
                        :move="move"
                        handle=".handle"
             >
-              <div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
+              <div v-for="(item,index) in link" :id="'linkDiv'+item.id" :key="index" class="linkContent">
                 <i class="nz-icon nz-icon-sort4 handle"></i>
-                <el-form :inline="true"  :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
+                <el-form v-if="item.isEdit"  :key="index" :ref="'linkForm'+item.id" :inline="true" :model="link[index]" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" label-width="180px" size="small" >
                 <el-form-item  prop="name" class="linkName">
                   <el-input v-model="item.name" width="140px" />
                 </el-form-item>
@@ -363,663 +363,633 @@
 </template>
 
 <script>
-    import {positiveInteger} from '../../common/js/validate'
-    import {port} from '../../common/js/validate'
-    import {hostPlus} from '../../common/js/validate'
-    import {host} from '../../common/js/validate'
-    import {uSize} from '../../common/js/validate'
-    import bus from '../../../libs/bus';
-    import draggable from 'vuedraggable'
-    // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
-    import 'leaflet/dist/leaflet.css'
-    import * as L from 'leaflet'
-    import icon from 'leaflet/dist/images/marker-icon.png';
-    import iconShadow from 'leaflet/dist/images/marker-shadow.png';
-    export default {
-        name: "system",
-        components:{draggable},
-        data(){
-          return {
-            basic:{
-              alert_api:'',
-              asset_ping_switch:'on',//主机连通性检查开关，'on'：开启，off：关闭
-              asset_ping_interval:null,//检查周期，单位：s
-              node_exporter_target_path:'',
-              scrape_interval:15,
-              storage_local_retention:15*24,
-              system_name:'',
-              current_site_url:'',
-              timezone:'',
-              default_cabinet_usize:'',
-              query_max_series:'',
-              unsaved_change:'on',
-              map_center_config:{"longitude":116.39,"latitude":39.9,"zoom":4,"minZoom":1,"maxZoom":10}
-            },
-            mapConfigVisible:false,
-            map:null,
-            marker:null,
-            basicCopy:null,
-            basicRules:{
-              system_name:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              // node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:host,trigger: 'blur'}],
-              asset_ping_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
-              scrape_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
-              storage_local_retention:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
-              timezone:[{required:true,message:this.$t('validate.required'),trigger:'blur'}],
-              default_cabinet_usize:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'},{validator:uSize,trigger:'blur'}],
-              query_max_series:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-            },
-            basicRules2:{
-              system_name:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},,{validator:host,trigger: 'blur'}],
-              scrape_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
-              storage_local_retention:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
-              timezone:[{required:true,message:this.$t('validate.required'),trigger:'blur'}],
-              default_cabinet_usize:[{validator:positiveInteger,trigger:'blur'},{validator:uSize,trigger:'blur'}],
-               query_max_series:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-            },
-            timezoneOption:[
-              {label:'UTC-12:00',value:'-12'},
-              {label:'UTC-11:00',value:'-11'},
-              {label:'UTC-10:00',value:'-10'},
-              {label:'UTC-09:00',value:'-9'},
-              {label:'UTC-08:00',value:'-8'},
-              {label:'UTC-07:00',value:'-7'},
-              {label:'UTC-06:00',value:'-6'},
-              {label:'UTC-05:00',value:'-5'},
-              {label:'UTC-04:00',value:'-4'},
-              {label:'UTC-03:00',value:'-3'},
-              {label:'UTC-02:00',value:'-2'},
-              {label:'UTC-01:00',value:'-1'},
-              {label:'UTC 00:00',value:'0'},
-              {label:'UTC+01:00',value:'1'},
-              {label:'UTC+02:00',value:'2'},
-              {label:'UTC+03:00',value:'3'},
-              {label:'UTC+04:00',value:'4'},
-              {label:'UTC+05:00',value:'5'},
-              {label:'UTC+06:00',value:'6'},
-              {label:'UTC+07:00',value:'7'},
-              {label:'UTC+08:00',value:'8'},
-              {label:'UTC+09:00',value:'9'},
-              {label:'UTC+10:00',value:'10'},
-              {label:'UTC+11:00',value:'11'},
-              {label:'UTC+12:00',value:'12'},
-            ],
-            email:{
-              email_enable: 'on',
-              email_smtp_host: '',
-              email_smtp_port: 25,
-              email_smtp_account: "",
-              email_smtp_password: "",
-              email_send_account: "",
-              email_test_reciver: "",
-              email_ssl_flag: 'off',
-              email_tls_flag: 'off',
-            },
-            emailCopy:null,
-            emailRules:{
-              email_smtp_host: [
-                {required:true,message:this.$t('validate.required'),trigger:'blur'},
-                {validator:hostPlus,trigger: 'blur'}
-              ],
-              email_smtp_port: [
-                {required:true,message:this.$t('validate.required'),trigger:'blur'},
-                {validator:port,trigger:'blur'}
-              ],
-              email_smtp_account: [
-                {required:true,message:this.$t('validate.required'),trigger:'blur'},
-                { type: 'email', message: this.$t('validate.email'), trigger: 'blur' }
-              ],
-              email_send_account:[{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
-              email_test_reciver: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
-            },
-            terminal:{
-              max_terminal_num:10
-            },
-            terminalCopy:null,
-            terminalRules:{
-              max_terminal_num:[
-                {required:true,message:this.$t('validate.required'),trigger:'blur'},
-                {validator:positiveInteger,trigger:'blur'}
-              ]
-            },
-            ldap:{
-              ldap_address:'',
-              ldap_dn:'',
-              ldap_password:'',
-              ldap_ou:'',
-              ldap_user_filter:'',
-              ldap_mapping:'',
-              ldap_enable:'off',
-            },
-            ldapCopy:null,
-            ldapRules:{
-              ldap_address:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              ldap_user_filter:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              ldap_mapping:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-            },
-            reset:{
-              type:[],
-              password:'',
-            },
-            linkTemp:{
-              name:'',url:''
-            },
-            link:[],
-            linkReserved:[],
-            linkRules:{
-              name:[
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-                { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
-                ],
-              url:[
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-                // { type: 'url', message: this.$t('config.system.link.uriRequired'), trigger: 'blur' } /*检验网址是否正确*/
-              ]
-            },
-            notificationTemp:{
-              name:'',filePath:''
-            },
-            notification:[],
-            notificationReserved:[],
-            notificationRules:{
-              name:[
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-                { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
-              ],
-              filePath:[
-                { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-                { pattern: /^\/(.*\.*.+\/?)+$/, message: this.$t('config.system.notification.filePathReg') }
-                // { type: 'url', message: this.$t('config.system.link.uriRequired'), trigger: 'blur' } /*检验网址是否正确*/
-              ]
-            },
-            resetRules:{
-              type:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-              password:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
-            },
-            resetOptions:[
-              {
-                label:this.$t('config.system.reset.metric'),
-                value:'metric',
-              },
-              {
-                label:this.$t('config.system.reset.alert'),
-                value:'alert',
-              },
-              {
-                label:this.$t('config.system.reset.sysConfig'),
-                value:'sysconfig',
-              },
-            ],
-            activeTab:'basic'
-          }
+import { positiveInteger, port, hostPlus, host, uSize } from '../../common/js/validate'
+
+import bus from '../../../libs/bus'
+import draggable from 'vuedraggable'
+// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+import 'leaflet/dist/leaflet.css'
+import * as L from 'leaflet'
+import icon from 'leaflet/dist/images/marker-icon.png';
+import iconShadow from 'leaflet/dist/images/marker-shadow.png';
+export default {
+  name: 'system',
+  components: { draggable },
+  data () {
+    return {
+      basic: {
+        alert_api: '',
+        asset_ping_switch: 'on', // 主机连通性检查开关，'on'：开启，off：关闭
+        asset_ping_interval: null, // 检查周期，单位：s
+        node_exporter_target_path: '',
+        scrape_interval: 15,
+        storage_local_retention: 15 * 24,
+        system_name: '',
+        current_site_url: '',
+        timezone: '',
+        default_cabinet_usize: '',
+        query_max_series: '',
+        unsaved_change: 'on',
+        map_center_config:{"longitude":116.39,"latitude":39.9,"zoom":4,"minZoom":1,"maxZoom":10}
+      },
+      mapConfigVisible:false,
+      map:null,
+      marker:null,
+      basicCopy: null,
+      basicRules: {
+        system_name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        // node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
+        alert_api: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: host, trigger: 'blur' }],
+        asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        scrape_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        storage_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        default_cabinet_usize: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }],
+        query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      basicRules2: {
+        system_name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        node_exporter_target_path: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        alert_api: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: host, trigger: 'blur' }],
+        scrape_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        storage_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
+        timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        default_cabinet_usize: [{ validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }],
+        query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      timezoneOption: [
+        { label: 'UTC-12:00', value: '-12' },
+        { label: 'UTC-11:00', value: '-11' },
+        { label: 'UTC-10:00', value: '-10' },
+        { label: 'UTC-09:00', value: '-9' },
+        { label: 'UTC-08:00', value: '-8' },
+        { label: 'UTC-07:00', value: '-7' },
+        { label: 'UTC-06:00', value: '-6' },
+        { label: 'UTC-05:00', value: '-5' },
+        { label: 'UTC-04:00', value: '-4' },
+        { label: 'UTC-03:00', value: '-3' },
+        { label: 'UTC-02:00', value: '-2' },
+        { label: 'UTC-01:00', value: '-1' },
+        { label: 'UTC 00:00', value: '0' },
+        { label: 'UTC+01:00', value: '1' },
+        { label: 'UTC+02:00', value: '2' },
+        { label: 'UTC+03:00', value: '3' },
+        { label: 'UTC+04:00', value: '4' },
+        { label: 'UTC+05:00', value: '5' },
+        { label: 'UTC+06:00', value: '6' },
+        { label: 'UTC+07:00', value: '7' },
+        { label: 'UTC+08:00', value: '8' },
+        { label: 'UTC+09:00', value: '9' },
+        { label: 'UTC+10:00', value: '10' },
+        { label: 'UTC+11:00', value: '11' },
+        { label: 'UTC+12:00', value: '12' }
+      ],
+      email: {
+        email_enable: 'on',
+        email_smtp_host: '',
+        email_smtp_port: 25,
+        email_smtp_account: '',
+        email_smtp_password: '',
+        email_send_account: '',
+        email_test_reciver: '',
+        email_ssl_flag: 'off',
+        email_tls_flag: 'off'
+      },
+      emailCopy: null,
+      emailRules: {
+        email_smtp_host: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: hostPlus, trigger: 'blur' }
+        ],
+        email_smtp_port: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: port, trigger: 'blur' }
+        ],
+        email_smtp_account: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { type: 'email', message: this.$t('validate.email'), trigger: 'blur' }
+        ],
+        email_send_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
+        email_test_reciver: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }]
+      },
+      terminal: {
+        max_terminal_num: 10
+      },
+      terminalCopy: null,
+      terminalRules: {
+        max_terminal_num: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: positiveInteger, trigger: 'blur' }
+        ]
+      },
+      ldap: {
+        ldap_address: '',
+        ldap_dn: '',
+        ldap_password: '',
+        ldap_ou: '',
+        ldap_user_filter: '',
+        ldap_mapping: '',
+        ldap_enable: 'off'
+      },
+      ldapCopy: null,
+      ldapRules: {
+        ldap_address: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        ldap_user_filter: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        ldap_mapping: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      reset: {
+        type: [],
+        password: ''
+      },
+      linkTemp: {
+        name: '', url: ''
+      },
+      link: [],
+      linkReserved: [],
+      linkRules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
+        ],
+        url: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          // { type: 'url', message: this.$t('config.system.link.uriRequired'), trigger: 'blur' } /*检验网址是否正确*/
+        ]
+      },
+      notificationTemp: {
+        name: '', filePath: ''
+      },
+      notification: [],
+      notificationReserved: [],
+      notificationRules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { max: 64, message: this.$t('config.system.link.nameMaxLength'), trigger: 'blur' }
+        ],
+        filePath: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^\/(.*\.*.+\/?)+$/, message: this.$t('config.system.notification.filePathReg') }
+          // { type: 'url', message: this.$t('config.system.link.uriRequired'), trigger: 'blur' } /*检验网址是否正确*/
+        ]
+      },
+      resetRules: {
+        type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      resetOptions: [
+        {
+          label: this.$t('config.system.reset.metric'),
+          value: 'metric'
         },
-        methods:{
-          initMap:function(){
-            if(this.map){
-              this.map.remove();
-              this.map=null;
-            }
-            let DefaultIcon = L.icon({
-              iconUrl: icon,
-              iconSize: [26, 40],
-              iconAnchor: [13, 40],
-              shadowUrl: iconShadow
-            });
-            L.Marker.prototype.options.icon = DefaultIcon;
-            let map = L.map("map",{
-              minZoom:this.basic.map_center_config.minZoom,
-              maxZoom:this.basic.map_center_config.maxZoom,
-              attributionControl:false,
-              zoomControl:false,
-              maxBounds:L.latLngBounds(L.latLng(-90,-180),L.latLng(90,180))
-            }).setView([this.basic.map_center_config.latitude,this.basic.map_center_config.longitude],this.basic.map_center_config.zoom);
-
-            L.tileLayer(
-              "/static/Tiles/{z}/{x}/{y}.png",
-              {noWrap:true}
-            ).addTo(map);
-
-            let attribution=L.control.attribution({position:'bottomright',prefix:''})
-            attribution.addAttribution(' © OpenStreetMap contributors')
-            attribution.addTo(map)
-
-            L.control.zoom({
-              position:'bottomright',
-              zoomInText:`<i class="nz-icon nz-icon-enlarge"></i>`,
-              zoomOutText:`<i class="nz-icon nz-icon-narrow"></i>`,
-              zoomInTitle:'',
-              zoomOutTitle:'',
-            }).addTo(map)
-
-            let marker = L.marker([this.basic.map_center_config.latitude,this.basic.map_center_config.longitude]).addTo(map);
-            map.on("click", function(e) {
-              var lat = e.latlng.lat;
-              var lng = e.latlng.lng;
-              marker.setLatLng([lat,lng]);
-            });
-            this.map = map;
-            this.marker = marker;
-          },
-          mapClose:function(){
-            this.mapConfigVisible=false
-            let latlng = this.marker.getLatLng();
-            this.basic.map_center_config.latitude = latlng.lat;
-            this.basic.map_center_config.longitude = latlng.lng;
-            this.basic.map_center_config.zoom = this.map.getZoom();
-          },
-          selectTab:function(tab){
-            this.querySetInfo(tab.name)
-          },
-          querySetInfo:function(type){ // 切换tab
-            if(!type){
-              console.error('type is required')
-              return
-            }
-            if(type == 'reset'){
-              return ;
-            }
-            if(type == 'link'){
-              this.getLinkData();
-              return
-            }
-            if(type == 'notification'){
-              this.getNotificationData();
-              return
-            }
-            this.$get('sysConfig?type='+type).then(response=>{
-              if(response.code == 200){
-                let sets=response.data[type];
-                for(let key in sets){
-                  this[type][key]=sets[key];
-                }
-                if(type ==  'basic'){
-                  localStorage.setItem('nz-sys-name',this.basic.system_name);
-                  localStorage.setItem('nz-sys-timezone',this.basic.timezone);
-                  localStorage.setItem('nz-sys-asset-ping-switch',this.basic.asset_ping_switch);
-                  localStorage.setItem('nz-sys-default-cabinet-usize',this.basic.default_cabinet_usize);
-                  localStorage.setItem('nz-unnsaved-change',this.basic.unsaved_change)
-                  this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
-                }else if(type == 'terminal'){
-                  localStorage.setItem('nz-sys-max-terminal-num',this.terminal.max_terminal_num);
-                }
-                if(type == 'email'){
-                  this.$refs.emailForm.clearValidate();
-                }
-                this[type+"Copy"]=Object.assign({},this[type])
-              }
-            })
-          },
-          saveSetInfo:function(type,formName){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs[formName].validate((valid) => {
-              if (valid) {
-                let param={};
-                if(type == 'basic'){
-                  this.basic.map_center_config = JSON.stringify(this.basic.map_center_config)
-                }
-                param[type]=Object.assign({},this[type]);
-                this.$set(param[type],'test','false')
-                let postParam=Object.assign({},param);
-
-                for (let key in postParam[type]){
-                  postParam[type][key]=postParam[type][key]+'';
-                }
-                this.$put('/sysConfig',postParam).then(response=>{
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    // this.resetForm(formName);
-                    setTimeout(()=> {
-                      this.querySetInfo(type);
-                    },200)
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              }else{
-                this.prevent_opt.save=true;
-                return false
-              }
-            });
-          },
-          testSetInfo:function(type,formName){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs[formName].validate((valid) => {
-              if (valid) {
-                let param={};
-                param[type]=Object.assign({},this[type]);
-                this.$set(param[type],'test','true')
-                let postParam=Object.assign({},param);
-                for (let key in postParam[type]){
-                  postParam[type][key]=postParam[type][key]+'';
-                }
-                this.$put('/sysConfig',postParam).then(response=>{
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.testSuccess")});
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              }else{
-                this.prevent_opt.save=false;
-                return false
-              }
-            });
-          },
-          resetSys:function(){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            let $temp=this;
-            this.$prompt(this.$t('config.system.reset.pwdTip'), this.$t('config.system.reset.promptTitle'), {
-              confirmButtonText: this.$t('config.system.reset.yes'),
-              cancelButtonText: this.$t('config.system.reset.no'),
-              inputType:'password',
-            }).then(({ value }) => {
-              $temp.reset.password=value
-              $temp.$refs['resetForm'].validate(valid=>{
-                if(valid){
-                  $temp.$put('/sysConfig/reset',$temp.reset).then(response=>{
-                    $temp.prevent_opt.save=false;
-                    if(response.code == 200){
-                      $temp.$message({duration: 2000, type: 'success', message: this.$t("tip.resetSuccess")});
-                    }else{
-                      $temp.$message.error(response.msg);
-                    }
-                  })
-                }else{
-                  $temp.prevent_opt.save=false;
-                }
-              })
-            }).catch(() => {
-
-            });
-          },
-          resetForm(formName,type){
-            this.$refs[formName].resetFields();
-            this[type]=Object.assign({},this[type+"Copy"]);
-          },
-          switchChange:function(formName){
-            let $temp=this;
-            $temp.$refs[formName].clearValidate();
-            setTimeout(()=>{
-              $temp.$refs[formName].validate();
-            },100)
-          },
-          resetCheckBoxChange:function(e){
-            if(e.target.checked == true ){
-              this.reset.type.push(e.target.value)
-            }else{
-              let index = this.reset.type.indexOf(e.target.value);
-              this.reset.type.splice(index,1);
-            }
-          },
-          jumpTo(data, id) {
-            bus.$emit("menu-change", data);
-            this.$router.push({
-              path: "/" + data,
-              query: {
-                t: +new Date()
-              }
-            });
-          },
-          // link 移动
-          change: function (evt) {
-            // console.log(evt)
-          },
-          //start ,end ,add,update, sort, remove 得到的都差不多
-          start: function (evt) {
-            // console.log(evt)
-          },
-          notificationEnd: function (evt) {
-            let length=this.notification.length;
-            if(evt.newIndex==evt.oldIndex){ // 如果没有移动返回
-              return
-            }
-            let parmas={
-              id:this.notification[evt.newIndex].id,
-              prev:0,
-              next:-1
-            }
-            if(evt.newIndex==length-1){
-              parmas.prev=this.notification[evt.newIndex-1].id;
-            }else if(evt.newIndex==0){
-              parmas.next=this.notification[evt.newIndex+1].id;
-            }else{
-              parmas.prev=this.notification[evt.newIndex-1].id;
-              parmas.next=this.notification[evt.newIndex+1].id;
-            }
-            this.$put('/alert/script/modify',parmas).then((response)=>{
-              // this.$store.commit('setLinkData',this.link);
-            })
-          },
-          end: function (evt) {
-            let length=this.link.length;
-            if(evt.newIndex==evt.oldIndex){ // 如果没有移动返回
-              return
-            }
-            let parmas={
-              id:this.link[evt.newIndex].id,
-              prev:0,
-              next:-1
-            }
-            if(evt.newIndex==length-1){
-              parmas.prev=this.link[evt.newIndex-1].id;
-            }else if(evt.newIndex==0){
-              parmas.next=this.link[evt.newIndex+1].id;
-            }else{
-              parmas.prev=this.link[evt.newIndex-1].id;
-              parmas.next=this.link[evt.newIndex+1].id;
-            }
-            this.$put('/link/modify',parmas).then((response)=>{
-              this.$store.commit('setLinkData',this.link);
-            })
-          },
-          move: function (evt, originalEvent) {
-            // console.log(evt)
-            // console.log(originalEvent) //鼠标位置
-          },
-          getLinkData(){
-            this.linkTemp={name:'',url:''};
-            this.$refs['linkTempForm'].clearValidate();
-            this.$get('/link').then(response=>{
-              this.link=response.data;
-              this.linkReserved=[...this.link];
-            });
-          },
-          // link add
-          linkAdd(){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs['linkTempForm'].validate((valid) => {
-              if (valid) {
-                this.$post('/link',this.linkTemp).then(response=>{//新增link
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    this.linkTemp={name:'',url:''};
-                    this.linkAddCallBack();
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.addSuccess")});
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              } else {
-                this.prevent_opt.save=false;
-                return false;
-              }
-            });
-          },
-          linkAddCallBack(){
-            this.$get('/link').then(response=>{
-              this.link.push(response.data[response.data.length-1]);
-              this.linkReserved.push(response.data[response.data.length-1]);
-              this.$store.commit('setLinkData',this.link);
-            });
-          },
-          // link edit
-          linkEdit(item){
-            let index=this.link.findIndex((item1)=>item.id==item1.id);
-            this.$set(this.link,index,{...this.link[index],isEdit:true});
-          },
-          // link update
-          linkUpdate(item){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs['linkForm'+item.id][0].validate((valid) => {
-              if (valid) {
-                let params={
-                  id:item.id,
-                  name:item.name,
-                  url:item.url,
-                };
-                this.$put('/link',params).then(response=>{
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    let index=this.link.findIndex((item1)=>item.id==item1.id);
-                    this.$set(this.link,index,{...this.link[index],isEdit:false});
-                    this.linkReserved=[...this.link];
-                    this.$store.commit('setLinkData',this.link);
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              } else {
-                this.prevent_opt.save=false;
-                return false;
-              }
-            });
-          },
-          // link cancel
-          linkCancel(item){
-            let index=this.link.findIndex((item1)=>item.id==item1.id);
-            let indexReserved=this.linkReserved.findIndex((item1)=>item.id==item1.id);
-            this.$set(this.link,index,{...this.linkReserved[indexReserved],isEdit:false});
-          },
-          // link del
-          linkDel(item){
-            if(this.prevent_opt.query){ return } ;
-            this.prevent_opt.query=true;
-            this.$delete('/link?ids='+item.id).then((response)=>{
-              this.prevent_opt.query=false;
-              if(response.code == 200){
-                this.link=this.link.filter((item1)=>item.id!==item1.id);
-                this.linkReserved=this.linkReserved.filter((item1)=>item.id!==item1.id);
-                this.$store.commit('setLinkData',this.link);
-                this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              }else{
-                this.$message.error(response.msg);
-              }
-            });
-          },
-
-          getNotificationData(){
-            this.notificationTemp={name:'',filePath:''};
-            this.$refs['notificationTempForm'].clearValidate();
-            this.$get('/alert/script').then(response=>{
-              this.notification=response.data.list;
-              this.notificationReserved=[...this.notification];
-            });
-          },
-          // link add
-          notificationAdd(){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs['notificationTempForm'].validate((valid) => {
-              if (valid) {
-                this.$post('/alert/script',this.notificationTemp).then(response=>{//新增notification
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    this.notificationTemp={name:'',filePath:''};
-                    this.notificationAddCallBack();
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.addSuccess")});
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              } else {
-                this.prevent_opt.save=false;
-                return false;
-              }
-            });
-          },
-          notificationAddCallBack(){
-            this.$get('/alert/script').then(response=>{
-              this.notification.push(response.data.list[response.data.list.length-1]);
-              this.notificationReserved.push(response.data.list[response.data.list.length-1]);
-              // this.$store.commit('setLinkData',this.link);
-            });
-          },
-          // link edit
-          notificationEdit(item){
-            let index=this.notification.findIndex((item1)=>item.id==item1.id);
-            this.$set(this.notification,index,{...this.notification[index],isEdit:true});
-          },
-          // link update
-          notificationUpdate(item){
-            if(this.prevent_opt.save){ return } ;
-            this.prevent_opt.save=true;
-            this.$refs['notificationForm'+item.id][0].validate((valid) => {
-              if (valid) {
-                let params={
-                  id:item.id,
-                  name:item.name,
-                  filePath:item.filePath,
-                };
-                this.$put('/alert/script',params).then(response=>{
-                  this.prevent_opt.save=false;
-                  if(response.code == 200){
-                    let index=this.notification.findIndex((item1)=>item.id==item1.id);
-                    this.$set(this.notification,index,{...this.notification[index],isEdit:false});
-                    this.notificationReserved=[...this.notification];
-                    // this.$store.commit('setLinkData',this.notification);
-                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  }else{
-                    this.$message.error(response.msg);
-                  }
-                })
-              } else {
-                this.prevent_opt.save=false;
-                return false;
-              }
-            });
-          },
-          // link cancel
-          notificationCancel(item){
-            let index=this.notification.findIndex((item1)=>item.id==item1.id);
-            let indexReserved=this.notificationReserved.findIndex((item1)=>item.id==item1.id);
-            this.$set(this.notification,index,{...this.notificationReserved[indexReserved],isEdit:false});
-          },
-          // link del
-          notificationDel(item){
-            if(this.prevent_opt.query){ return } ;
-            this.prevent_opt.query=true;
-            this.$delete('/alert/script?ids='+item.id).then((response)=>{
-              this.prevent_opt.query=false;
-              if(response.code == 200){
-                this.notification=this.notification.filter((item1)=>item.id!==item1.id);
-                this.notificationReserved=this.notificationReserved.filter((item1)=>item.id!==item1.id);
-                // this.$store.commit('setLinkData',this.link);
-                this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              }else{
-                this.$message.error(response.msg);
-              }
-            });
-          },
-          //openUrl 跳转页面
-          openUrl(item){
-            // window.open(item.url)
-          },
+        {
+          label: this.$t('config.system.reset.alert'),
+          value: 'alert'
         },
-        mounted() {
-          this.querySetInfo('basic');
+        {
+          label: this.$t('config.system.reset.sysConfig'),
+          value: 'sysconfig'
         }
+      ],
+      activeTab: 'basic'
     }
+  },
+  methods: {
+    initMap:function(){
+      if(this.map){
+        this.map.remove();
+        this.map=null;
+      }
+      let DefaultIcon = L.icon({
+        iconUrl: icon,
+        iconSize: [26, 40],
+        iconAnchor: [13, 40],
+        shadowUrl: iconShadow
+      });
+      L.Marker.prototype.options.icon = DefaultIcon;
+      let map = L.map("map",{
+        minZoom:this.basic.map_center_config.minZoom,
+        maxZoom:this.basic.map_center_config.maxZoom,
+        attributionControl:false,
+        zoomControl:false,
+        maxBounds:L.latLngBounds(L.latLng(-90,-180),L.latLng(90,180))
+      }).setView([this.basic.map_center_config.latitude,this.basic.map_center_config.longitude],this.basic.map_center_config.zoom);
+
+      L.tileLayer(
+        "/static/Tiles/{z}/{x}/{y}.png",
+        {noWrap:true}
+      ).addTo(map);
+
+      let attribution=L.control.attribution({position:'bottomright',prefix:''})
+      attribution.addAttribution(' © OpenStreetMap contributors')
+      attribution.addTo(map)
+
+      L.control.zoom({
+        position:'bottomright',
+        zoomInText:`<i class="nz-icon nz-icon-enlarge"></i>`,
+        zoomOutText:`<i class="nz-icon nz-icon-narrow"></i>`,
+        zoomInTitle:'',
+        zoomOutTitle:'',
+      }).addTo(map)
+
+      let marker = L.marker([this.basic.map_center_config.latitude,this.basic.map_center_config.longitude]).addTo(map);
+      map.on("click", function(e) {
+        var lat = e.latlng.lat;
+        var lng = e.latlng.lng;
+        marker.setLatLng([lat,lng]);
+      });
+      this.map = map;
+      this.marker = marker;
+    },
+    mapClose:function(){
+      this.mapConfigVisible=false
+      let latlng = this.marker.getLatLng();
+      this.basic.map_center_config.latitude = latlng.lat;
+      this.basic.map_center_config.longitude = latlng.lng;
+      this.basic.map_center_config.zoom = this.map.getZoom();
+    },
+    selectTab: function (tab) {
+      this.querySetInfo(tab.name)
+    },
+    querySetInfo: function (type) { // 切换tab
+      if (!type) {
+        console.error('type is required')
+        return
+      }
+      if (type == 'reset') {
+        return
+      }
+      if (type == 'link') {
+        this.getLinkData()
+        return
+      }
+      if (type == 'notification') {
+        this.getNotificationData()
+        return
+      }
+      this.$get('sysConfig?type=' + type).then(response => {
+        if (response.code == 200) {
+          const sets = response.data[type]
+          for (const key in sets) {
+            this[type][key] = sets[key]
+          }
+          if (type == 'basic') {
+            localStorage.setItem('nz-sys-name', this.basic.system_name)
+            localStorage.setItem('nz-sys-timezone', this.basic.timezone)
+            localStorage.setItem('nz-sys-asset-ping-switch', this.basic.asset_ping_switch)
+            localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
+            localStorage.setItem('nz-unnsaved-change', this.basic.unsaved_change)
+            this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
+          } else if (type == 'terminal') {
+            localStorage.setItem('nz-sys-max-terminal-num', this.terminal.max_terminal_num)
+          }
+          if (type == 'email') {
+            this.$refs.emailForm.clearValidate()
+          }
+          this[type + 'Copy'] = Object.assign({}, this[type])
+        }
+      })
+    },
+    saveSetInfo: function (type, formName) {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let param={};
+          if(type == 'basic'){
+            this.basic.map_center_config = JSON.stringify(this.basic.map_center_config)
+          }
+          param[type] = Object.assign({}, this[type])
+          this.$set(param[type], 'test', 'false')
+          let postParam = Object.assign({}, param)
+          for (let key in postParam[type]) {
+            postParam[type][key] = postParam[type][key] + ''
+          }
+          this.$put('/sysConfig', postParam).then(response => {
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              // this.resetForm(formName);
+              setTimeout(() => {
+                this.querySetInfo(type)
+              }, 200)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = true
+          return false
+        }
+      })
+    },
+    testSetInfo: function (type, formName) {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let param = {}
+          param[type] = Object.assign({}, this[type])
+          this.$set(param[type], 'test', 'true')
+          let postParam = Object.assign({}, param)
+          for (let key in postParam[type]) {
+            postParam[type][key] = postParam[type][key] + ''
+          }
+          this.$put('/sysConfig', postParam).then(response => {
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.testSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+
+
+    resetForm (formName, type) {
+      this.$refs[formName].resetFields()
+      this[type] = Object.assign({}, this[type + 'Copy'])
+    },
+    switchChange: function (formName) {
+      const $temp = this
+      $temp.$refs[formName].clearValidate()
+      setTimeout(() => {
+        $temp.$refs[formName].validate()
+      }, 100)
+    },
+    resetCheckBoxChange: function (e) {
+      if (e.target.checked == true) {
+        this.reset.type.push(e.target.value)
+      } else {
+        const index = this.reset.type.indexOf(e.target.value)
+        this.reset.type.splice(index, 1)
+      }
+    },
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    // link 移动
+    change: function (evt) {
+      // console.log(evt)
+    },
+    // start ,end ,add,update, sort, remove 得到的都差不多
+    start: function (evt) {
+      // console.log(evt)
+    },
+    notificationEnd: function (evt) {
+      const length = this.notification.length
+      if (evt.newIndex == evt.oldIndex) { // 如果没有移动返回
+        return
+      }
+      const parmas = {
+        id: this.notification[evt.newIndex].id,
+        prev: 0,
+        next: -1
+      }
+      if (evt.newIndex == length - 1) {
+        parmas.prev = this.notification[evt.newIndex - 1].id
+      } else if (evt.newIndex == 0) {
+        parmas.next = this.notification[evt.newIndex + 1].id
+      } else {
+        parmas.prev = this.notification[evt.newIndex - 1].id
+        parmas.next = this.notification[evt.newIndex + 1].id
+      }
+      this.$put('/alert/script/modify', parmas).then((response) => {
+        // this.$store.commit('setLinkData',this.link);
+      })
+    },
+    end: function (evt) {
+      const length = this.link.length
+      if (evt.newIndex == evt.oldIndex) { // 如果没有移动返回
+        return
+      }
+      const parmas = {
+        id: this.link[evt.newIndex].id,
+        prev: 0,
+        next: -1
+      }
+      if (evt.newIndex == length - 1) {
+        parmas.prev = this.link[evt.newIndex - 1].id
+      } else if (evt.newIndex == 0) {
+        parmas.next = this.link[evt.newIndex + 1].id
+      } else {
+        parmas.prev = this.link[evt.newIndex - 1].id
+        parmas.next = this.link[evt.newIndex + 1].id
+      }
+      this.$put('/link/modify', parmas).then((response) => {
+        this.$store.commit('setLinkData', this.link)
+      })
+    },
+    move: function (evt, originalEvent) {
+      // console.log(evt)
+      // console.log(originalEvent) //鼠标位置
+    },
+    getLinkData () {
+      this.linkTemp = { name: '', url: '' }
+      this.$refs.linkTempForm.clearValidate()
+      this.$get('/link').then(response => {
+        this.link = response.data
+        this.linkReserved = [...this.link]
+      })
+    },
+    // link add
+    linkAdd () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.linkTempForm.validate((valid) => {
+        if (valid) {
+          this.$post('/link', this.linkTemp).then(response => { // 新增link
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              this.linkTemp = { name: '', url: '' }
+              this.linkAddCallBack()
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.addSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    linkAddCallBack () {
+      this.$get('/link').then(response => {
+        this.link.push(response.data[response.data.length - 1])
+        this.linkReserved.push(response.data[response.data.length - 1])
+        this.$store.commit('setLinkData', this.link)
+      })
+    },
+    // link edit
+    linkEdit (item) {
+      const index = this.link.findIndex((item1) => item.id == item1.id)
+      this.$set(this.link, index, { ...this.link[index], isEdit: true })
+    },
+    // link update
+    linkUpdate (item) {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs['linkForm' + item.id][0].validate((valid) => {
+        if (valid) {
+          const params = {
+            id: item.id,
+            name: item.name,
+            url: item.url
+          }
+          this.$put('/link', params).then(response => {
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              const index = this.link.findIndex((item1) => item.id == item1.id)
+              this.$set(this.link, index, { ...this.link[index], isEdit: false })
+              this.linkReserved = [...this.link]
+              this.$store.commit('setLinkData', this.link)
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    // link cancel
+    linkCancel (item) {
+      const index = this.link.findIndex((item1) => item.id == item1.id)
+      const indexReserved = this.linkReserved.findIndex((item1) => item.id == item1.id)
+      this.$set(this.link, index, { ...this.linkReserved[indexReserved], isEdit: false })
+    },
+    // link del
+    linkDel (item) {
+      if (this.prevent_opt.query) { return } ;
+      this.prevent_opt.query = true
+      this.$delete('/link?ids=' + item.id).then((response) => {
+        this.prevent_opt.query = false
+        if (response.code == 200) {
+          this.link = this.link.filter((item1) => item.id !== item1.id)
+          this.linkReserved = this.linkReserved.filter((item1) => item.id !== item1.id)
+          this.$store.commit('setLinkData', this.link)
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+
+    getNotificationData () {
+      this.notificationTemp = { name: '', filePath: '' }
+      this.$refs.notificationTempForm.clearValidate()
+      this.$get('/alert/script').then(response => {
+        this.notification = response.data.list
+        this.notificationReserved = [...this.notification]
+      })
+    },
+    // link add
+    notificationAdd () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs.notificationTempForm.validate((valid) => {
+        if (valid) {
+          this.$post('/alert/script', this.notificationTemp).then(response => { // 新增notification
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              this.notificationTemp = { name: '', filePath: '' }
+              this.notificationAddCallBack()
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.addSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    notificationAddCallBack () {
+      this.$get('/alert/script').then(response => {
+        this.notification.push(response.data.list[response.data.list.length - 1])
+        this.notificationReserved.push(response.data.list[response.data.list.length - 1])
+        // this.$store.commit('setLinkData',this.link);
+      })
+    },
+    // link edit
+    notificationEdit (item) {
+      let index = this.notification.findIndex((item1) => item.id == item1.id)
+      this.$set(this.notification, index, { ...this.notification[index], isEdit: true })
+    },
+    // link update
+    notificationUpdate (item) {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$refs['notificationForm' + item.id][0].validate((valid) => {
+        if (valid) {
+          let params = {
+            id: item.id,
+            name: item.name,
+            filePath: item.filePath
+          }
+          this.$put('/alert/script', params).then(response => {
+            this.prevent_opt.save = false
+            if (response.code == 200) {
+              let index = this.notification.findIndex((item1) => item.id == item1.id)
+              this.$set(this.notification, index, { ...this.notification[index], isEdit: false })
+              this.notificationReserved = [...this.notification]
+              // this.$store.commit('setLinkData',this.notification);
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    // link cancel
+    notificationCancel (item) {
+      let index = this.notification.findIndex((item1) => item.id == item1.id)
+      let indexReserved = this.notificationReserved.findIndex((item1) => item.id == item1.id)
+      this.$set(this.notification, index, { ...this.notificationReserved[indexReserved], isEdit: false })
+    },
+    // link del
+    notificationDel (item) {
+      if (this.prevent_opt.query) { return } ;
+      this.prevent_opt.query = true
+      this.$delete('/alert/script?ids=' + item.id).then((response) => {
+        this.prevent_opt.query = false
+        if (response.code == 200) {
+          this.notification = this.notification.filter((item1) => item.id !== item1.id)
+          this.notificationReserved = this.notificationReserved.filter((item1) => item.id !== item1.id)
+          // this.$store.commit('setLinkData',this.link);
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    // openUrl 跳转页面
+    openUrl (item) {
+      // window.open(item.url)
+    }
+  },
+  mounted () {
+    this.querySetInfo('basic')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/nezha-fronted/src/components/page/config/terminallog.vue b/nezha-fronted/src/components/page/config/terminallog.vue
index 5ee48b258..1d1cfc2d4 100644
--- a/nezha-fronted/src/components/page/config/terminallog.vue
+++ b/nezha-fronted/src/components/page/config/terminallog.vue
@@ -87,7 +87,7 @@
           </template>
         </el-table-column>
         <el-table-column width="28">
-          <template slot="header" slot-scope="scope">
+          <template slot="header">
           <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
             <i class="nz-icon nz-icon-gear"></i>
           </span>
@@ -108,322 +108,322 @@
   </div>
 </template>
 <script>
-  import bus from "../../../libs/bus";
-  import {terminalLog} from "../../common/js/constants";
-  import {calcDurationByStringTimeB} from "../../common/js/tools";
+import bus from '../../../libs/bus'
+import { terminalLog } from '../../common/js/constants'
+import { calcDurationByStringTimeB } from '../../common/js/tools'
 
-  export default {
-    name: "terminallog",
-    data() {
-      return {
-        tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
+export default {
+  name: 'terminallog',
+  data () {
+    return {
+      tableId: 'terminalLogTable', // 需要分页的table的id，用于记录每页数量
 
-        /*二级页面相关*/
-        bottomBox: {
-          terminalLog: {},
-          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-          subResizeShow: true,
-          isFullScreen: false, //全屏状态
-          showSubList: false, //是否显示二级列表
-          targetTab: '', //显示二级列表中的哪个页签
-          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        },
+      /* 二级页面相关 */
+      bottomBox: {
+        terminalLog: {},
+        mainResizeShow: true, // dom高度改变时是否展示|隐藏
+        subResizeShow: true,
+        isFullScreen: false, // 全屏状态
+        showSubList: false, // 是否显示二级列表
+        targetTab: '', // 显示二级列表中的哪个页签
+        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
+      },
 
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover: false, //控制滚动条和top按钮同时出现
-          showTopBtn: false, //显示To top按钮
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        rightBox: { //弹出框相关
-          show: false,
-          isEdit: false, //false查看，true编辑
-          title: ''
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      rightBox: { // 弹出框相关
+        show: false,
+        isEdit: false, // false查看，true编辑
+        title: ''
 
+      },
+      rightBoxResize: { // resize弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      rightBoxDownload: { // 下载弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      rightBoxUpload: { // 上传弹出框相关
+        show: false,
+        isAdd: false, // false，true：resize
+        title: ''
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableTitle: [
+        {
+          label: this.$t('config.terminallog.id'),
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: 'Session ID',
+          prop: 'uuid',
+          show: true
+        }, {
+          label: 'Username',
+          prop: 'username',
+          show: true
         },
-        rightBoxResize: { //resize弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.terminallog.source'),
+          prop: 'remoteAddr',
+          show: true
         },
-        rightBoxDownload: { //下载弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.terminallog.remote'),
+          prop: 'remote',
+          show: true
         },
-        rightBoxUpload: { //上传弹出框相关
-          show: false,
-          isAdd: false, //false，true：resize
-          title: ''
+        {
+          label: this.$t('config.terminallog.protocol'),
+          prop: 'protocol',
+          show: true
         },
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
+        {
+          label: this.$t('config.terminallog.startTime'),
+          prop: 'startTime',
+          show: true
         },
-        tableTitle: [
+        {
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
+          show: true
+        },
+        {
+          label: 'AuthType',
+          prop: 'authType',
+          show: false
+        },
+        {
+          label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
+          prop: 'status',
+          show: true,
+          width: 100
+        },
+        {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120,
+          fixed: 'right'
+        }
+      ],
+      tableData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
           {
-            label: this.$t("config.terminallog.id"),
-            prop: 'id',
-            show: true,
-            width: 80
+            id: 11,
+            name: this.$t('config.terminallog.host'),
+            type: 'input',
+            label: 'host',
+            disabled: false
           }, {
-            label: "Session ID",
-            prop: 'uuid',
-            show: true,
-          }, {
-            label: "Username",
-            prop: 'username',
-            show: true,
-          },
-          {
-            label: this.$t('config.terminallog.source'),
-            prop: 'remoteAddr',
-            show: true,
-          },
-          {
-            label: this.$t('config.terminallog.remote'),
-            prop: 'remote',
-            show: true,
-          },
-          {
-            label: this.$t('config.terminallog.protocol'),
-            prop: 'protocol',
-            show: true,
-          },
-          {
-            label: this.$t('config.terminallog.startTime'),
-            prop: 'startTime',
-            show: true,
-          },
-          {
-            label: this.$t('config.terminallog.duration'),
-            prop: 'duration',
-            show: true,
-          },
-          {
-            label: 'AuthType',
-            prop: 'authType',
-            show: false
-          },
-          {
-            label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
-            prop: 'status',
-            show: true,
-            width: 100
-          },
-          {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120,
-            fixed: "right"
+            id: 12,
+            name: this.$t('config.terminallog.user'),
+            type: 'input',
+            label: 'username',
+            disabled: false
           }
-        ],
-        tableData: [],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-            {
-              id: 11,
-              name: this.$t('config.terminallog.host'),
-              type: 'input',
-              label: 'host',
-              disabled: false
-            },{
-              id: 12,
-              name: this.$t('config.terminallog.user'),
-              type: 'input',
-              label: 'username',
-              disabled: false
-            }
-          ],
-        },
-        searchLabel: {}, //搜索参数
-        scrollbarWrap: null,
-        nowTime:'',
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      scrollbarWrap: null,
+      nowTime: ''
+    }
+  },
+  computed: {
+    getStatusText () {
+      return function (status) {
+        return terminalLog.status[status]
       }
     },
-    computed: {
-      getStatusText() {
-        return function(status) {
-          return terminalLog.status[status];
+    getRemoteText () {
+      return function (record) {
+        return `${record.loginUser}@${record.host}:${record.port}`
+      }
+    },
+    getDuration () {
+      return function (record) {
+        if (record.endTime) {
+          return calcDurationByStringTimeB(record.startTime, record.endTime)
         }
-      },
-      getRemoteText() {
-        return function(record) {
-          return `${record.loginUser}@${record.host}:${record.port}`;
-        }
-      },
-      getDuration() {
-        return function(record) {
-          if (record.endTime) {
-            return calcDurationByStringTimeB(record.startTime, record.endTime);
+        return calcDurationByStringTimeB(record.startTime, this.nowTime)
+      }
+    }
+  },
+  watch: {
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
+    }
+  },
+  methods: {
+    getTableData () {
+      const params = {
+        ...this.searchLabel,
+        pageNo: this.pageObj.pageNo,
+        pageSize: this.pageObj.pageSize
+      }
+      this.$get('terminal/session', params).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.nowTime = this.utcTimeToTimezoneStr(response.time)
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.terminalLogTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
           }
-          return calcDurationByStringTimeB(record.startTime, this.nowTime);
         }
-      },
+      })
     },
-    watch: {
-      'bottomBox.showSubList': function (n) {
-        let vm = this;
-        this.$bottomBoxWindow.showSubListWatch(vm, n);
-      },
+
+    showRecord (record) {
+      this.bottomBox.targetTab = 'record'
+      this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record))
+      this.bottomBox.showSubList = true
     },
-    methods: {
-      getTableData() {
-        let params={
-          ...this.searchLabel,
-          pageNo:this.pageObj.pageNo,
-          pageSize:this.pageObj.pageSize,
-        }
-        this.$get('terminal/session', params).then(response => {
-          this.tools.loading = false;
-          if (response.code === 200) {
-            this.tableData = response.data.list;
-            this.nowTime=this.utcTimeToTimezoneStr(response.time);
-            this.pageObj.total = response.data.total;
-            if (!this.scrollbarWrap) {
-              this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.terminalLogTable.bodyWrapper;
-                this.toTopBtnHandler(this.scrollbarWrap);
-              });
-            }
+    showHistoryCMD (record) {
+      this.bottomBox.targetTab = 'cmd'
+      this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record))
+      this.bottomBox.showSubList = true
+    },
+    monitor (record) {
+      this.bottomBox.targetTab = 'monitor'
+      this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record))
+      this.bottomBox.showSubList = true
+    },
+    shutdown (record) {
+      this.$confirm(this.$t('tip.killTerm'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$put('/terminal/kill', { uuid: record.uuid }).then(res => {
+          if (res.code === 200) {
+            this.$message.success(this.$t('config.terminallog.success'))
+            this.bottomBox.showSubList = false
+            this.getTableData()
+          } else {
+            this.$message.error(this.$t('config.terminallog.killErrorTip'))
           }
         })
-      },
-
-      showRecord(record) {
-        this.bottomBox.targetTab = 'record';
-        this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
-        this.bottomBox.showSubList = true;
-      },
-      showHistoryCMD(record) {
-        this.bottomBox.targetTab = 'cmd';
-        this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
-        this.bottomBox.showSubList = true;
-      },
-      monitor(record) {
-        this.bottomBox.targetTab = 'monitor';
-        this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
-        this.bottomBox.showSubList = true;
-      },
-      shutdown(record) {
-        this.$confirm(this.$t("tip.killTerm"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$put("/terminal/kill", {uuid: record.uuid}).then(res => {
-            if (res.code === 200) {
-              this.$message.success(this.$t("config.terminallog.success"));
-              this.bottomBox.showSubList = false;
-              this.getTableData();
-            } else {
-              this.$message.error(this.$t("config.terminallog.killErrorTip"));
-            }
-          });
-        });
-      },
-      // 全屏
-      fullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.fullScreen(vm);
-      },
-      // 退出全屏
-      exitFullScreen() {
-        let vm = this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
-      },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let vm = this;
-        this.$bottomBoxWindow.listResize(vm, e);
-      },
-      messageStyle(e) {
-        if (e.column.label == this.$t('config.terminallog.status')) {
-          if (e.row.status == '0') {
-            return 'success';
-          } else if (e.row.status == '1') {
-            return 'warning';
-          } else if (e.row.status == '2') {
-            return 'suspended';
-          } else if (e.row.status == '3') {
-            return 'danger';
-          } else if (e.row.status == '4') {
-            return 'danger';
-          }
-        }
-        return '';
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getTableData();
-      },
-      search: function (searchObj) {
-        let orderBy='';
-        if(this.searchLabel.orderBy){
-          orderBy=this.searchLabel.orderBy
-        }
-        this.searchLabel = {};
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        if(orderBy){
-          this.$set(this.searchLabel, 'orderBy', orderBy);
-        }
-        this.getTableData();
-      },
-      closeSubList(){
-        this.bottomBox.showSubList = false;
-        if( this.bottomBox.targetTab == 'monitor'){
-          this.getTableData();
-        }
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getTableData();
-      },
+      })
     },
-    beforeDestroy() {
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
     },
-    created(){
-      //是否存在分页缓存
-      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
-      if (pageSize != 'undefined' && pageSize != null) {
-        this.pageObj.pageSize = pageSize
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    messageStyle (e) {
+      if (e.column.label == this.$t('config.terminallog.status')) {
+        if (e.row.status == '0') {
+          return 'success'
+        } else if (e.row.status == '1') {
+          return 'warning'
+        } else if (e.row.status == '2') {
+          return 'suspended'
+        } else if (e.row.status == '3') {
+          return 'danger'
+        } else if (e.row.status == '4') {
+          return 'danger'
+        }
+      }
+      return ''
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getTableData()
+    },
+    search: function (searchObj) {
+      let orderBy = ''
+      if (this.searchLabel.orderBy) {
+        orderBy = this.searchLabel.orderBy
+      }
+      this.searchLabel = {}
+      this.pageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.searchLabel, item, searchObj[item])
+        }
+      }
+      if (orderBy) {
+        this.$set(this.searchLabel, 'orderBy', orderBy)
+      }
+      this.getTableData()
+    },
+    closeSubList () {
+      this.bottomBox.showSubList = false
+      if (this.bottomBox.targetTab == 'monitor') {
+        this.getTableData()
       }
     },
-    mounted() {
-      //初始化表头
-      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.searchLabel, 'orderBy', orderBy)
+      this.getTableData()
+    }
+  },
+  beforeDestroy () {
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  },
+  created () {
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize != 'undefined' && pageSize != null) {
+      this.pageObj.pageSize = pageSize
+    }
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
 
-      this.getTableData();
-    },
+    this.getTableData()
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/config/util.vue b/nezha-fronted/src/components/page/config/util.vue
index 0c0e6d088..6aa53f5f7 100644
--- a/nezha-fronted/src/components/page/config/util.vue
+++ b/nezha-fronted/src/components/page/config/util.vue
@@ -1,60 +1,60 @@
 
 <script>
-  import en from "../../common/language/en";
-  import cn from "../../common/language/cn";
-  export default {
-    name: "language",
-    data(){
-      return {
-        result:null,
-        languageList:[],
+import en from '../../common/language/en'
+import cn from '../../common/language/cn'
+export default {
+  name: 'language',
+  data () {
+    return {
+      result: null,
+      languageList: []
+    }
+  },
+  methods: {
+    compareFile: function (obj, compareObj) {
+      if (!obj) {
+        obj = en
       }
+      if (!compareObj) {
+        compareObj = cn
+      }
+      const keys = Object.keys(obj)
+      for (const key of keys) {
+        if (typeof obj[key] === 'object') {
+          if (!compareObj[key]) {
+            this.$set(compareObj, key, {})
+          }
+          this.compareFile(obj[key], compareObj[key])
+        } else {
+          if (!compareObj[key]) {
+            this.$set(compareObj, key, obj[key])
+          }
+        }
+      }
+      this.result = cn
     },
-    methods:{
-      compareFile:function(obj,compareObj){
-        if(!obj){
-          obj=en;
-        }
-        if(!compareObj){
-          compareObj=cn;
-        }
-        let keys=Object.keys(obj);
-        for (let key of keys){
-          if(typeof obj[key] == 'object'){
-            if(!compareObj[key]){
-              this.$set(compareObj,key,{});
-            }
-            this.compareFile(obj[key],compareObj[key]);
-          }else{
-            if(!compareObj[key]){
-              this.$set(compareObj,key,obj[key]);
-            }
+    listLanguage: function (obj, compareObj) {
+      if (!obj) {
+        obj = en
+      }
+      if (!compareObj) {
+        compareObj = cn
+      }
+      const keys = Object.keys(obj)
+      for (const key of keys) {
+        if (typeof obj[key] === 'object') {
+          if (!compareObj[key]) {
+            this.$set(compareObj, key, {})
           }
-        }
-        this.result=cn;
-      },
-      listLanguage:function(obj,compareObj){
-        if(!obj){
-          obj=en;
-        }
-        if(!compareObj){
-          compareObj=cn;
-        }
-        let keys=Object.keys(obj);
-        for (let key of keys){
-          if(typeof obj[key] == 'object'){
-            if(!compareObj[key]){
-              this.$set(compareObj,key,{});
-            }
-            this.listLanguage(obj[key],compareObj[key]);
-          }else{
-            if(!compareObj[key]){
-              this.$set(compareObj,key,obj[key]);
-            }
-            this.languageList.push({en:obj[key],cn:compareObj[key]})
+          this.listLanguage(obj[key], compareObj[key])
+        } else {
+          if (!compareObj[key]) {
+            this.$set(compareObj, key, obj[key])
           }
+          this.languageList.push({ en: obj[key], cn: compareObj[key] })
         }
-      },
+      }
     }
   }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
index 0e64afcdd..581b2c504 100644
--- a/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
+++ b/nezha-fronted/src/components/page/dashboard/alertChartParam.vue
@@ -12,118 +12,117 @@
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
-          <el-option v-for="(rule,index) in alertRules" :key="rule.id" :label="rule.alertName" :value="rule.id"></el-option>
+          <el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.alertName" :value="rule.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.level" clearable id="alert-param-level">
-          <el-option v-for="(item,index) in levels" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="(item, index) in levels" :key="index" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item :label="$t('dashboard.panel.chartForm.alertParam.state')">
         <el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.state" clearable id="alert-param-state">
-          <el-option v-for="(item,index) in states" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="(item, index) in states" :key="index" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
     </el-form>
 </template>
 
 <script>
-  export default {
-    name: "alertChartParam",
-    props:{
+export default {
+  name: 'alertChartParam',
+  props: {
 
-    },
-    data(){
-      return{
-        parameters:{
-          select:[],
-          alertRule:'',
-          level:'',
-          state:'',
-        },
-        options:[],
-        props:{
-          checkStrictly: true,
-          // lazy:true,
-          // lazyLoad:$temp.lazyLoadFunc,
-        },
-        alertRules:[],
-        levels: this.$CONSTANTS.alertMessage.levels,
-        states: this.$CONSTANTS.alertMessage.states,
-      }
-    },
-    created() {
-      this.queryAlertRules();
-      this.queryOptionsData();
-    },
-    methods:{
-      saveParam:function(opType='save'){
-        let param={
-          projectId:'',
-          moduleId:'',
-          endpointId:'',
-          severity:this.parameters.level,
-          state:this.parameters.state,
-          ruleId:this.parameters.alertRule,
-        }
-        switch (this.parameters.select.length) {
-          case 1:
-            param.projectId=this.parameters.select[0];
-            param.moduleId='';
-            param.endpointId='';
-            break;
-          case 2:
-            param.projectId=this.parameters.select[0];
-            param.moduleId=this.parameters.select[1];
-            param.endpointId='';
-            break;
-          case 3:
-            param.projectId=this.parameters.select[0];
-            param.moduleId=this.parameters.select[1];
-            param.endpointId=this.parameters.select[2];
-            break;
-          default:
-            param.projectId='';
-            param.moduleId='';
-            param.endpointId='';
-            break;
-        }
-        this.$emit('on-enter-complate',param,opType);
+  },
+  data () {
+    return {
+      parameters: {
+        select: [],
+        alertRule: '',
+        level: '',
+        state: ''
       },
-      setData:function(responseData){
-        if(responseData&&responseData.param){
-          let param=responseData.param;
-          let projectId=param.projectId;
-          let moduleId=param.moduleId;
-          let endpointId=param.endpointId;
+      options: [],
+      props: {
+        checkStrictly: true
+        // lazy:true,
+        // lazyLoad:$temp.lazyLoadFunc,
+      },
+      alertRules: [],
+      levels: this.$CONSTANTS.alertMessage.levels,
+      states: this.$CONSTANTS.alertMessage.states
+    }
+  },
+  created () {
+    this.queryAlertRules()
+    this.queryOptionsData()
+  },
+  methods: {
+    saveParam: function (opType = 'save') {
+      const param = {
+        projectId: '',
+        moduleId: '',
+        endpointId: '',
+        severity: this.parameters.level,
+        state: this.parameters.state,
+        ruleId: this.parameters.alertRule
+      }
+      switch (this.parameters.select.length) {
+        case 1:
+          param.projectId = this.parameters.select[0]
+          param.moduleId = ''
+          param.endpointId = ''
+          break
+        case 2:
+          param.projectId = this.parameters.select[0]
+          param.moduleId = this.parameters.select[1]
+          param.endpointId = ''
+          break
+        case 3:
+          param.projectId = this.parameters.select[0]
+          param.moduleId = this.parameters.select[1]
+          param.endpointId = this.parameters.select[2]
+          break
+        default:
+          param.projectId = ''
+          param.moduleId = ''
+          param.endpointId = ''
+          break
+      }
+      this.$emit('on-enter-complate', param, opType)
+    },
+    setData: function (responseData) {
+      if (responseData && responseData.param) {
+        const param = responseData.param
+        const projectId = param.projectId
+        const moduleId = param.moduleId
+        const endpointId = param.endpointId
 
-          let temp=[];
+        const temp = []
 
-          if(projectId&&projectId!=''){
-            temp[0]=projectId;
-            if(moduleId&&moduleId !=''){
-              temp[1]=moduleId;
-              if(endpointId&&endpointId!=''){
-                temp[2]=endpointId
-              }
+        if (projectId && projectId != '') {
+          temp[0] = projectId
+          if (moduleId && moduleId != '') {
+            temp[1] = moduleId
+            if (endpointId && endpointId != '') {
+              temp[2] = endpointId
             }
           }
-          this.parameters={
-            select: temp,
-            alertRule:param.ruleId,
-            level:param.severity,
-            state:param.state
-          }
-
         }
-      },
-      queryOptionsData:function(){
-        let param={
-          pageSize:-1
+        this.parameters = {
+          select: temp,
+          alertRule: param.ruleId,
+          level: param.severity,
+          state: param.state
         }
-        this.$get('endpoint',param).then(response=>{
-          /*
+      }
+    },
+    queryOptionsData: function () {
+      const param = {
+        pageSize: -1
+      }
+      this.$get('endpoint', param).then(response => {
+        /*
           * {
           * project-1:{
           * data:{},
@@ -134,101 +133,101 @@
           * }
           * }
           * */
-          if(response.code==200){
-            const data=response.data.list;
-            let result=new Map();
-            data.forEach(item=>{
-              let project=result.get('project-'+item.project.id);
-              if(!project){
-                project=new Map();
-                project.set('data',item.project)
-                let module=new Map();
-                module.set('data',item.module)
-                module.set('endpoints',[item])
-                project.set('module-'+item.module.id,module)
-                result.set('project-'+item.project.id,project);
-              }else{
-                let module=project.get('module-'+item.module.id);
-                if(!module){
-                  module=new Map();
-                  module.set('data',item.module)
-                  module.set('endpoints',[item])
-                  project.set('module-'+item.module.id,module)
-                  result.set('project-'+item.project.id,project);
-                }else{
-                  let endpoints=module.get('endpoints');
-                  endpoints.push(item);
-                  module.set('endpoints',endpoints);
-                  project.set('module-'+item.module.id,module);
-                  result.set('project-'+item.project.id,project);
-                }
+        if (response.code == 200) {
+          const data = response.data.list
+          const result = new Map()
+          data.forEach(item => {
+            let project = result.get('project-' + item.project.id)
+            if (!project) {
+              project = new Map()
+              project.set('data', item.project)
+              const module = new Map()
+              module.set('data', item.module)
+              module.set('endpoints', [item])
+              project.set('module-' + item.module.id, module)
+              result.set('project-' + item.project.id, project)
+            } else {
+              let module = project.get('module-' + item.module.id)
+              if (!module) {
+                module = new Map()
+                module.set('data', item.module)
+                module.set('endpoints', [item])
+                project.set('module-' + item.module.id, module)
+                result.set('project-' + item.project.id, project)
+              } else {
+                const endpoints = module.get('endpoints')
+                endpoints.push(item)
+                module.set('endpoints', endpoints)
+                project.set('module-' + item.module.id, module)
+                result.set('project-' + item.project.id, project)
               }
-            })
+            }
+          })
 
-            result.forEach((project,projectKey)=>{
-              let option={};
-              project.forEach((value,moduleKey)=>{
-                if(moduleKey ==  'data'){
-                  option.label=value.name;
-                  option.value=value.id;
-                }else{
-                  let module=value;
-                  let moduleData=module.get('data');
-                  let endpoints=module.get('endpoints');
-                  endpoints=endpoints.map(item=>{
-                    return {label: item.asset.host, value: item.id}
-                  });
-                  /*//测试代码
+          result.forEach((project, projectKey) => {
+            const option = {}
+            project.forEach((value, moduleKey) => {
+              if (moduleKey == 'data') {
+                option.label = value.name
+                option.value = value.id
+              } else {
+                const module = value
+                const moduleData = module.get('data')
+                let endpoints = module.get('endpoints')
+                endpoints = endpoints.map(item => {
+                  return { label: item.asset.host, value: item.id }
+                })
+                /* //测试代码
                   for (let i = 1; i < 16; i++) {
                     endpoints.push({label: '114.51.41.' + i, value: i+8887});
-                  }*/
-                  if(!option.children){
-                    option.children=[];
-                  }
-                  option.children.push({
-                    label:moduleData.name,
-                    value:moduleData.id,
-                    children:endpoints
-                  })
+                  } */
+                if (!option.children) {
+                  option.children = []
                 }
-              })
-              this.options.push(option)
-            });
-          }else{
-            console.error(response.msg)
-            this.$message.error(response.msg)
-          }
-        })
-      },
-      queryAlertRules:function(){
-        let param={
-          pageSize:-1
+                option.children.push({
+                  label: moduleData.name,
+                  value: moduleData.id,
+                  children: endpoints
+                })
+              }
+            })
+            this.options.push(option)
+          })
+        } else {
+          console.error(response.msg)
+          this.$message.error(response.msg)
         }
-        this.$get('alert/rule',param).then(response=>{
-          if(response.code == 200){
-            this.alertRules=response.data.list;
-          }else{
-            console.error(response.msg)
-            this.$message.error(response.msg)
-          }
-        })
+      })
+    },
+    queryAlertRules: function () {
+      const param = {
+        pageSize: -1
       }
-    },
-    mounted() {
-
-    },
-    watch:{
-      parameters:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
+      this.$get('alert/rule', param).then(response => {
+        if (response.code == 200) {
+          this.alertRules = response.data.list
+        } else {
+          console.error(response.msg)
+          this.$message.error(response.msg)
         }
-      }
-    },
-    beforeDestroy(){
-
+      })
     }
+  },
+  mounted () {
+
+  },
+  watch: {
+    parameters: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+      }
+    }
+  },
+  beforeDestroy () {
+
   }
+}
 </script>
 
 <style scoped>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 35a18907c..13f36beb5 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -133,7 +133,7 @@
   }
 
 </style>
-<template key="chartBox">
+<template>
   <div  class="mc">
     <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
       <transition name="right-box">
@@ -352,15 +352,15 @@
           </el-radio-group>
         </el-form-item>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
-          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
+          <template  v-for="(mapping, index) in editChart.param.valueMapping.mapping">
+            <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="half-form-item-other" prop="span" >
               <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
             </el-form-item>
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other  half-form-item-other-two">
+            <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other  half-form-item-other-two" prop="span">
               <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
               <!--颜色选择器 start-->
               <div class="color-show">
-                <nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
+                <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac', value:showPicker[index].bac, key:'bac'},{name:'text', value:showPicker[index].text, key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
               </div>
               <!--颜色选择器 end-->
               <span  @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
@@ -368,8 +368,8 @@
           </template>
         </template>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
-          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
-            <div class="half-form-item-other" style="display: inline-block;margin-left: 15px">
+          <template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
+            <div :key="index" class="half-form-item-other" style="display: inline-block;margin-left: 15px">
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
                 <el-input size="mini" type="input" v-model="mapping.from"></el-input>
               </el-form-item>
@@ -377,7 +377,7 @@
                 <el-input size="mini" type="input" v-model="mapping.to"></el-input>
               </el-form-item>
             </div>
-            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
+            <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
               <el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
               <!--颜色选择器 start-->
               <div class="color-show">
@@ -398,8 +398,8 @@
           <div style="margin-bottom: 20px; width: 100%" ></div>
           <div style="display: flex;">
             <span style="margin-left: 15px;"></span>
-            <template v-for="item in sortedOptionKeys">
-              <div style="flex: 1">
+            <template v-for="(item, index) in sortedOptionKeys">
+              <div :key="index" style="flex: 1">
                 <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
                 <el-switch
                   :id="'chart-box-legendValue-'+item.label"
@@ -407,7 +407,7 @@
                   active-value="on"
                   inactive-value="off"
                   active-color="#ee9d3f"
-                  @change="">
+                >
                 </el-switch>
               </div>
             </template>
@@ -441,340 +441,337 @@
 </template>
 
 <script>
-  import bus from '../../../libs/bus';
-  import ChartMetric from "./chartMetric";
-  import chartDataFormat from '../../charts/chartDataFormat';
-  import chartPreview from '../../charts/chartPreview';
-  import {getUUID, resetZIndex} from "../../common/js/common";
-  import alertChartParam from "./alertChartParam";
-  import promqlInput from "./explore/promqlInput";
-  import {nzNumber} from "../../common/js/validate";
-  import richTextEditor from "../../charts/richTextEditor";
-  import selectPanel from "../../common/popBox/selectPanel";
-  import nezhaColor from '../../common/nezhaColor'
-  import i18n from "../../common/i18n";
+import bus from '../../../libs/bus'
+import chartDataFormat from '../../charts/chartDataFormat'
+import chartPreview from '../../charts/chartPreview'
+import { getUUID, resetZIndex } from '../../common/js/common'
+import alertChartParam from './alertChartParam'
+import promqlInput from './explore/promqlInput'
+import { nzNumber } from '../../common/js/validate'
+import richTextEditor from '../../charts/richTextEditor'
+import selectPanel from '../../common/popBox/selectPanel'
+import nezhaColor from '../../common/nezhaColor'
+import i18n from '../../common/i18n'
 
-  var rz = {
-    methods: {
-      rz(e) {
-        resetZIndex(e);
-      }
+const rz = {
+  methods: {
+    rz (e) {
+      resetZIndex(e)
     }
-  };
-  export default {
-    name: "chartBox",
-    props: {
-      boxClass: String,
-      panelData: Array,
-      showPanel: Object,
-      chart: Object,
-      from: {type: String},
-      fromEndpoint:{
-        type:Boolean,
-        default:false,
-      }
-    },
-    mixins: [rz],
-    data() {
-      return {
-        optionBtn:{
-          save:false,
-        },
-        editChart: {},
-        filterPanel: "",
-        statisticsList: this.$CONSTANTS.statisticsList,
-
-        promqlCount: 1,
-        promqlKeys: [],
-        elementIds: [],
-        expressions: [],
-        legends: [],
-        statistics: "",
-        isEdit:false,
-        editInfo: {},
-        isUrl:false,
-        isSingleStat:false,
-        isAlert:false,
-        rules: {
-          panelName: [
-            {required: true,  message: this.$t('validate.required'),  trigger: 'change'}
-          ],
-          title: [
-            {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
-          ],
-          url: [
-            {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
-          ],
-          'param.threshold':[
-            {validator:nzNumber,trigger: 'blur'}
-          ],
-          "param.statistics":[
-            {required: true,  message: this.$t('validate.required'),  trigger: 'change'}
-          ]
-        },
-        chartTypeList: [
-          {
-            id:"line",
-            name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
-          },
-          {
-            id:'stackArea',
-            name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
-          },
-          {
-            id:"bar",
-            name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
-          },
-          {
-            id:'singleStat',
-            name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
-          },
-          {
-            id:'pie',
-            name:this.$t("dashboard.panel.chartForm.typeVal.pie.label")
-          },
-          {
-            id:"table",
-            name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
-          },
-          {
-            id:'alertList',
-            name:this.$t("dashboard.panel.chartForm.typeVal.alertList.label")
-          },
-          {
-            id:'text',
-            name:this.$t("dashboard.panel.chartForm.typeVal.text.label")
-          },
-          {
-            id:'url',
-            name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
-          },
+  }
+}
+export default {
+  name: 'chartBox',
+  props: {
+    boxClass: String,
+    panelData: Array,
+    showPanel: Object,
+    chart: Object,
+    from: { type: String },
+    fromEndpoint: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [rz],
+  data () {
+    return {
+      optionBtn: {
+        save: false
+      },
+      editChart: {},
+      filterPanel: '',
+      statisticsList: this.$CONSTANTS.statisticsList,
 
+      promqlCount: 1,
+      promqlKeys: [],
+      elementIds: [],
+      expressions: [],
+      legends: [],
+      statistics: '',
+      isEdit: false,
+      editInfo: {},
+      isUrl: false,
+      isSingleStat: false,
+      isAlert: false,
+      rules: {
+        panelName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
-        elements: [1], // 指标部分 tarNum
-        elementTarget: [], // 本地保存数据
-        alertParams:{},
-        spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-        nullTypeList:[{
-          label:'connected',
-          value:'connected'
-        },{
-          label:'null',
-          value:'null'
-        },{
-          label:'zero',
-          value:'zero'
-        }],
-        // 是否为编辑已有信息
-        isedit: false,
-        //productId: 0,//不需要这个参数，可以删除
-        isInputPanel:false,
-        panelId: 0,
-        panelName: '',
-        selectFirstPanel: false,
-        metricList: [], // metric列表
-        metricCascaderList:[],//metric级联列表
-        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
-        deleteIndex: '', // 要删除的指标模块
-        subCount: 0, // subSave保存data到bus计数器
-        panel: {
-          id: '',
-          name: ''
+        title: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        url: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        'param.threshold': [
+          { validator: nzNumber, trigger: 'blur' }
+        ],
+        'param.statistics': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
-        heightSuggestions:['300','400','500','600'],
-        unitOptions:chartDataFormat.unitOptions(),
-        sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
-        textShow:false,
-        metricOptions: [],
-        showPicker:[],
-        //metricStore: []
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        },
+        {
+          id: 'alertList',
+          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        }
+
+      ],
+      elements: [1], // 指标部分 tarNum
+      elementTarget: [], // 本地保存数据
+      alertParams: {},
+      spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      nullTypeList: [{
+        label: 'connected',
+        value: 'connected'
+      }, {
+        label: 'null',
+        value: 'null'
+      }, {
+        label: 'zero',
+        value: 'zero'
+      }],
+      // 是否为编辑已有信息
+      isedit: false,
+      // productId: 0,//不需要这个参数，可以删除
+      isInputPanel: false,
+      panelId: 0,
+      panelName: '',
+      selectFirstPanel: false,
+      metricList: [], // metric列表
+      metricCascaderList: [], // metric级联列表
+      metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
+      deleteIndex: '', // 要删除的指标模块
+      subCount: 0, // subSave保存data到bus计数器
+      panel: {
+        id: '',
+        name: ''
+      },
+      heightSuggestions: ['300', '400', '500', '600'],
+      unitOptions: chartDataFormat.unitOptions(),
+      sortedOptionKeys: [{ key: 'min', label: 'Min' }, { key: 'max', label: 'Max' }, { key: 'avg', label: 'Avg' }, { key: 'last', label: 'Last' }, { key: 'total', label: 'Total' }],
+      textShow: false,
+      metricOptions: [],
+      showPicker: []
+      // metricStore: []
+    }
+  },
+  components: {
+    'chart-preview': chartPreview,
+    'alert-chart-param': alertChartParam,
+    'promql-input': promqlInput,
+    'rich-text-editor': richTextEditor,
+    selectPanel,
+    nezhaColor
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initElements()
+    })
+
+    setTimeout(() => {
+      this.textShow = true
+    }, 300)
+  },
+  methods: {
+    clickOutside () {
+      this.esc(false)
+    },
+    selectPanel (panel) {
+      this.panelName = panel.name
+      this.panelId = panel.id
+    },
+    toAddPanel () {
+      this.$refs.panelBox2.show(true)
+      this.panel = {
+        id: '',
+        name: ''
       }
+      this.$refs.panelBox2.setTitle(this.$t('dashboard.panel.createPanelTitle'))
     },
-    components:{
-      'chart-metric':ChartMetric,
-      'chart-preview':chartPreview,
-      'alert-chart-param':alertChartParam,
-      'promql-input': promqlInput,
-      'rich-text-editor':richTextEditor,
-      selectPanel,
-      nezhaColor,
+    panelReload (panelName) { // 刷新panel下拉框
+      if (panelName) {
+        this.panelName = panelName
+      }
+      this.$emit('reloadOnlyPanel')
     },
-    mounted() {
-      this.$nextTick(() => {
-        this.initElements();
-
-      });
-
-      setTimeout(()=>{
-        this.textShow=true;
-      },300)
-    },
-    methods: {
-      clickOutside() {
-        this.esc(false);
-      },
-      selectPanel(panel) {
-        this.panelName = panel.name;
-        this.panelId = panel.id;
-      },
-      toAddPanel() {
-        this.$refs.panelBox2.show(true);
-        this.panel = {
-          id: '',
-          name: ''
-        };
-        this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle"));
-      },
-      panelReload(panelName) { //刷新panel下拉框
-        if (panelName) {
-          this.panelName = panelName;
-        }
-        this.$emit("reloadOnlyPanel");
-      },
-      deletePanel(panel) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("panel?ids=" + panel.id).then(response => {
-            if (response.code === 200) {
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              if (this.panelId == panel.id) {
-                this.selectFirstPanel = true;
-                this.$emit('reload', true);
-              } else {
-                this.$emit('reload');
-              }
+    deletePanel (panel) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel?ids=' + panel.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            if (this.panelId == panel.id) {
+              this.selectFirstPanel = true
+              this.$emit('reload', true)
             } else {
-              this.$message.error(response.msg);
+              this.$emit('reload')
             }
-          })
-        });
-      },
-      editPanel(panel) {
-        this.$refs.panelBox2.show(true);
-        this.panel = Object.assign({}, panel);
-        this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.editPanelTitle"));
-      },
-      setUnit(unit) {
-        this.$set(this.editChart,'unit',Number.parseInt(unit))
-      },
-      expressionChange: function () {
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    editPanel (panel) {
+      this.$refs.panelBox2.show(true)
+      this.panel = Object.assign({}, panel)
+      this.$refs.panelBox2.setTitle(this.$t('dashboard.panel.editPanelTitle'))
+    },
+    setUnit (unit) {
+      this.$set(this.editChart, 'unit', Number.parseInt(unit))
+    },
+    expressionChange: function () {
 
-      },
-      addExpression() {
-        this.expressions.push('');
-        this.legends.push('');
-        this.promqlKeys.push(getUUID());
-        this.elementIds.push("");
-        this.promqlCount++;
-      },
-      removeExpression(index) {
-        if (this.promqlCount > 1) {
-          this.expressions.splice(index, 1);
-          this.legends.splice(index, 1);
-          this.promqlKeys.splice(index, 1);
-          this.elementIds.splice(index, 1);
-          this.promqlCount--;
-          this.$nextTick(() => {
-            this.expressions.forEach((ex, index) => {
-              if (ex) {
-                this.$refs[`promql-${index}`][0].metricChange(ex);
-              }
-            });
-          });
-        }
-      },
-      copyExpression(index) {
-        this.expressions.push(this.expressions[index]);
-        this.legends.push(this.legends[index]);
-        this.promqlKeys.push(getUUID());
-        this.elementIds.push("");
-        this.promqlCount++;
+    },
+    addExpression () {
+      this.expressions.push('')
+      this.legends.push('')
+      this.promqlKeys.push(getUUID())
+      this.elementIds.push('')
+      this.promqlCount++
+    },
+    removeExpression (index) {
+      if (this.promqlCount > 1) {
+        this.expressions.splice(index, 1)
+        this.legends.splice(index, 1)
+        this.promqlKeys.splice(index, 1)
+        this.elementIds.splice(index, 1)
+        this.promqlCount--
         this.$nextTick(() => {
           this.expressions.forEach((ex, index) => {
             if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex);
+              this.$refs[`promql-${index}`][0].metricChange(ex)
             }
-          });
-        });
-      },
-      save() {
-        this.$refs['chartForm'].validate((valid) => {
-          if (valid) {
-            if (this.editChart.id) {//修改
-              this.$put('panel/'+this.editChart.id+'/charts').then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            } else {//新增
-              this.$post('panel/charts', this.editChart).then(response => {
-                if (response.code === 200) {
-                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc(true);
-                } else {
-                  this.$message.error(response.msg);
-                }
-              });
-            }
-          } else {
-            console.error('error submit!!');
-            return false;
+          })
+        })
+      }
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      this.legends.push(this.legends[index])
+      this.promqlKeys.push(getUUID())
+      this.elementIds.push('')
+      this.promqlCount++
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
           }
-        });
-      },
-      del() {
-          this.$emit('delete-chart',this.editChart)
-      },
-      //----------------------------------
-
-      /*关闭弹框*/
-      esc(refresh) {
-        this.$emit("close", refresh);
-      },
-
-      /*metric部分相关方法--begin*/
-      // 增加指标,tarNum
-      addTarget() {
-        this.elements.push(1);
-      },
-      // 删除指标,第一步, 新方法
-      deleteTarget(index) {
-        //alert('box第一步，循环所有的metric，为什么要循环？？');
-        this.deleteIndex = index;
-        // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
-        this.$refs.chartTag.forEach((item) => {
-          // 子组件保存内容到bus
-          item.subSave();
-        });
-      },
-      // subSave保存成功后回调,第二步
-      subOk() {
-        // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
-        //alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
-        this.subCount += 1;
-        if (this.subCount === this.elements.length) {
-          this.subCount = 0;
-          // 保存完成,进行删除操作
-          //('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-          this.elements.splice(this.deleteIndex, 1);
-          this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
-          bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
-
-          this.$nextTick(() => {
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setSubdata(index); // 将数据从bus重新赋值
-            });
-          });
+        })
+      })
+    },
+    save () {
+      this.$refs.chartForm.validate((valid) => {
+        if (valid) {
+          if (this.editChart.id) { // 修改
+            this.$put('panel/' + this.editChart.id + '/charts').then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else { // 新增
+            this.$post('panel/charts', this.editChart).then(response => {
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          console.error('error submit!!')
+          return false
         }
-      },
-      // 格式化tag为字符串表达式
-      /*
+      })
+    },
+    del () {
+      this.$emit('delete-chart', this.editChart)
+    },
+    // ----------------------------------
+
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.$emit('close', refresh)
+    },
+
+    /* metric部分相关方法--begin */
+    // 增加指标,tarNum
+    addTarget () {
+      this.elements.push(1)
+    },
+    // 删除指标,第一步, 新方法
+    deleteTarget (index) {
+      // alert('box第一步，循环所有的metric，为什么要循环？？');
+      this.deleteIndex = index
+      // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
+      this.$refs.chartTag.forEach((item) => {
+        // 子组件保存内容到bus
+        item.subSave()
+      })
+    },
+    // subSave保存成功后回调,第二步
+    subOk () {
+      // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
+      // alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
+      this.subCount += 1
+      if (this.subCount === this.elements.length) {
+        this.subCount = 0
+        // 保存完成,进行删除操作
+        // ('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+        this.elements.splice(this.deleteIndex, 1)
+        this.elementTarget.splice(this.deleteIndex, 1)// 没有作用，此处是[]
+        bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1)
+
+        this.$nextTick(() => {
+          this.$refs.chartTag.forEach((item, index) => {
+            item.setSubdata(index) // 将数据从bus重新赋值
+          })
+        })
+      }
+    },
+    // 格式化tag为字符串表达式
+    /*
       tagsToString(metric,arr) {
         let str = metric;
         let sepStr = '';
@@ -807,20 +804,20 @@
         return str;
       },
        */
-      autocompleteExist(string) {
-        let result = false;
-        for (let i = 0; i < this.panelData.length; i++) {
-          if (this.panelData[i].name.toLowerCase() == string.toLowerCase()) {
-            result = this.panelData[i].id;
-            break;
-          }
+    autocompleteExist (string) {
+      let result = false
+      for (let i = 0; i < this.panelData.length; i++) {
+        if (this.panelData[i].name.toLowerCase() == string.toLowerCase()) {
+          result = this.panelData[i].id
+          break
         }
-        return result;
-      },
-      // 新建图表
-      addCharts(params) {
-        //先处理panel
-        /*let panelPromise=new Promise(resolve => {
+      }
+      return result
+    },
+    // 新建图表
+    addCharts (params) {
+      // 先处理panel
+      /* let panelPromise=new Promise(resolve => {
           if (this.panelId) {
             panelId = this.panelId;
             panel=this.panelData.find(p => p.id === this.panelId);
@@ -849,395 +846,389 @@
               });
             }
           }
-        });*/
+        }); */
 
-        //panelPromise.then(()=>{
-          if (this.panelId) {
-            this.$post('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response => {
-              if (response.code === 200) {
-                this.esc();
-                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.$refs.chartForm.resetFields();//清空表单
-                this.$emit('on-create-success', 'create', response.data, params, {id: this.panelId, name: this.panelName});
-              } else {
-                if (response.msg) {
-                  this.$message.error(response.msg);
-                } else {
-                  this.$message.error(response);
-                }
-              }
-              this.prevent_opt.save=false
-            });
-          }
-        //})
-      },
-      // 更新图表
-      updateCharts(params) {
-        let panelId=this.panelId?this.panelId:this.chart.panelId;
-        this.$put('panel/' + panelId + '/charts', params ? params : this.editChart).then(response2 => {
-          if (response2.code === 200) {
-            this.esc();
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-            // this.$refs.chartForm.resetFields();//清空表单
-            this.$emit('on-create-success', 'update', response2.data, params);
+      // panelPromise.then(()=>{
+      if (this.panelId) {
+        this.$post('panel/' + this.panelId + '/charts', params || this.editChart).then(response => {
+          if (response.code === 200) {
+            this.esc()
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+            this.$refs.chartForm.resetFields()// 清空表单
+            this.$emit('on-create-success', 'create', response.data, params, { id: this.panelId, name: this.panelName })
           } else {
-            if(response2.msg){
-              this.$message.error(response2.msg);
-            }else {
-              this.$message.error(response2);
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else {
+              this.$message.error(response)
             }
           }
-          this.prevent_opt.save=false
-        });
-      },
-      // 获取每个tag组件内部校验后数据,点击生成图表时触发
-      getTarget(target,pointer,optType) {
-        this.elementTarget.push(target);
-        if (this.elementTarget.length === this.elements.length) {
-          this.$refs.chartForm.validate((valid) => {
-            const params = {
-              // productId: this.productId,
-              //panelId: this.panelId,
-              title: this.editChart.title,//this.editChart
-              span: this.editChart.span,
-              height: this.editChart.height,
-              type: this.editChart.type,
-              unit:this.editChart.unit,
-              param:{
-
-              },
-              sync: this.editChart.sync
-            };
-            if(this.editChart.type === 'singleStat'||this.editChart.type == 'pie'){
-              // params.param.statistics=this.statistics;
-            } else {
-              delete params.param.statistics;
-            }
-            if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
-              params.param.threshold=this.editChart.param.threshold;
-              params.param.nullType=this.editChart.param.nullType;
-            } else {
-              delete params.param.threshold;
-            }
-            //生成指标数组
-            const elements = [];
-            this.elementTarget.forEach((elem,index) => {
-              if(elem.type==='normal'){
-                const metricStr = bus.tagsToString(elem.metric,elem.selectedTagList);
-                elements.push({
-                  //id:index+1,
-                  //metric: elem.metric,//指标名称
-                  expression: metricStr,//指标对应Label及Value组成的表达式字符串
-                  type:elem.type,//指标类型
-                  legend:elem.legend,//配置的legend
-                });
-              }else if(elem.type==='expert'){
-                elements.push({
-                  //id:index+1,
-                  //metric: elem.metric,//指标名称
-                  expression: elem.expression,//指标对应Label及Value组成的表达式字符串
-                  type:elem.type,//指标类型
-                  legend:elem.legend,//配置的legend
-                });
-              }
-            });
-            params.elements = elements;
-            if (valid) {
-              if(optType==='preview') {
-                if (this.isedit) {
-                  params.id = this.editChart.id;
-                }
-                this.$refs.chartsPreview.show(params);
-              }else{
-                if (this.isedit) {
-                  params.id = this.editChart.id;
-                  this.updateCharts(params);
-                } else {
-                  this.addCharts(params);
-                }
-              }
-            }
-          });
+          this.prevent_opt.save = false
+        })
+      }
+      // })
+    },
+    // 更新图表
+    updateCharts (params) {
+      const panelId = this.panelId ? this.panelId : this.chart.panelId
+      this.$put('panel/' + panelId + '/charts', params || this.editChart).then(response2 => {
+        if (response2.code === 200) {
+          this.esc()
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          // this.$refs.chartForm.resetFields();//清空表单
+          this.$emit('on-create-success', 'update', response2.data, params)
+        } else {
+          if (response2.msg) {
+            this.$message.error(response2.msg)
+          } else {
+            this.$message.error(response2)
+          }
         }
-      },
-      getAlertParam:function(param,opType){
+        this.prevent_opt.save = false
+      })
+    },
+    // 获取每个tag组件内部校验后数据,点击生成图表时触发
+    getTarget (target, pointer, optType) {
+      this.elementTarget.push(target)
+      if (this.elementTarget.length === this.elements.length) {
         this.$refs.chartForm.validate((valid) => {
           const params = {
-            title: this.editChart.title,//this.editChart
+            // productId: this.productId,
+            // panelId: this.panelId,
+            title: this.editChart.title, // this.editChart
             span: this.editChart.span,
             height: this.editChart.height,
             type: this.editChart.type,
-            unit:this.editChart.unit,
-            param:param,
-            sync: this.editChart.sync,
-          };
+            unit: this.editChart.unit,
+            param: {
+
+            },
+            sync: this.editChart.sync
+          }
+          if (this.editChart.type === 'singleStat' || this.editChart.type == 'pie') {
+            // params.param.statistics=this.statistics;
+          } else {
+            delete params.param.statistics
+          }
+          if (this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea') {
+            params.param.threshold = this.editChart.param.threshold
+            params.param.nullType = this.editChart.param.nullType
+          } else {
+            delete params.param.threshold
+          }
+          // 生成指标数组
+          const elements = []
+          this.elementTarget.forEach((elem, index) => {
+            if (elem.type === 'normal') {
+              const metricStr = bus.tagsToString(elem.metric, elem.selectedTagList)
+              elements.push({
+                // id:index+1,
+                // metric: elem.metric,//指标名称
+                expression: metricStr, // 指标对应Label及Value组成的表达式字符串
+                type: elem.type, // 指标类型
+                legend: elem.legend// 配置的legend
+              })
+            } else if (elem.type === 'expert') {
+              elements.push({
+                // id:index+1,
+                // metric: elem.metric,//指标名称
+                expression: elem.expression, // 指标对应Label及Value组成的表达式字符串
+                type: elem.type, // 指标类型
+                legend: elem.legend// 配置的legend
+              })
+            }
+          })
+          params.elements = elements
           if (valid) {
-            if(opType==='preview') {
+            if (optType === 'preview') {
               if (this.isedit) {
-                params.id = this.editChart.id;
+                params.id = this.editChart.id
               }
-              this.$refs.chartsPreview.show(params);
-            }else{
+              this.$refs.chartsPreview.show(params)
+            } else {
               if (this.isedit) {
-                params.id = this.editChart.id;
-                this.updateCharts(params);
+                params.id = this.editChart.id
+                this.updateCharts(params)
               } else {
-                this.addCharts(params);
+                this.addCharts(params)
               }
             }
           }
         })
-      },
-      SyncSave(){
-        this.editChart.sync=1;
-        this.confirmAdd();
-      },
-      confirmAdd() {
-        this.prevent_opt.save=true
-        this.elementTarget = []; // 初始化清空参数
-        if(this.editChart.type!=='url'&&this.editChart.type != 'text'){
-          /*if(this.editChart.type == 'alertList'){
+      }
+    },
+    getAlertParam: function (param, opType) {
+      this.$refs.chartForm.validate((valid) => {
+        const params = {
+          title: this.editChart.title, // this.editChart
+          span: this.editChart.span,
+          height: this.editChart.height,
+          type: this.editChart.type,
+          unit: this.editChart.unit,
+          param: param,
+          sync: this.editChart.sync
+        }
+        if (valid) {
+          if (opType === 'preview') {
+            if (this.isedit) {
+              params.id = this.editChart.id
+            }
+            this.$refs.chartsPreview.show(params)
+          } else {
+            if (this.isedit) {
+              params.id = this.editChart.id
+              this.updateCharts(params)
+            } else {
+              this.addCharts(params)
+            }
+          }
+        }
+      })
+    },
+    SyncSave () {
+      this.editChart.sync = 1
+      this.confirmAdd()
+    },
+    confirmAdd () {
+      this.prevent_opt.save = true
+      this.elementTarget = [] // 初始化清空参数
+      if (this.editChart.type !== 'url' && this.editChart.type != 'text') {
+        /* if(this.editChart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam();
           }else{
             this.$refs.chartTag.forEach((item, index) => {//循环指标列表
               // 触发每个tag组件内部进行校验
               item.saveTarget(index);
             });
-          }*/
-          if(this.editChart.type == 'alertList'){
-            this.$refs.alertParamBox.saveParam();
-            return ;
-          }
-          if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'||this.editChart.type == 'table'){
-            // this.$set(this.editChart.param, "statistics", this.statistics);
-          } else {
-            delete this.editChart.param.statistics;
-          }
-          if (this.expressions[0]) {
-            this.editChart.elements = [];
-            this.expressions.forEach((expr, i) => {
-              this.editChart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
-            });
-          }
-          if (this.editChart.id) {
-            this.updateCharts();
-          } else {
-            this.addCharts();
-          }
-        }else {
-          if(this.editChart.type == 'url'){
-            this.$refs.chartForm.validate((valid) => {
-              const params = {
-                title: this.editChart.title,//this.editChart
-                span: this.editChart.span,
-                height: this.editChart.height,
-                type: this.editChart.type,
-                unit:this.editChart.unit,
-                param:{
-                  url:this.editChart.param.url,
-                },
-                sync: this.editChart.sync
-              };
-
-              if (valid) {
-                params.elements = [];
-                if (this.isedit) {
-                  params.id = this.editChart.id;
-                  this.updateCharts(params);
-                } else {
-                  this.addCharts(params);
-                }
-              }
-            });
-          }else{
-            this.$refs.chartForm.validate((valid) => {
-              let text=this.$refs.richTextEditor.getContent();
-              if(!text){
-                valid=false;
-              }
-              const params = {
-                title: this.editChart.title,//this.editChart
-                span: this.editChart.span,
-                height: this.editChart.height,
-                type: this.editChart.type,
-                param:{
-                  text:text
-                },
-                sync: this.editChart.sync
-              };
-
-              if (valid) {
-                params.elements = [];
-                if (this.isedit) {
-                  params.id = this.editChart.id;
-                  this.updateCharts(params);
-                } else {
-                  this.addCharts(params);
-                }
-              }
-            });
-          }
+          } */
+        if (this.editChart.type == 'alertList') {
+          this.$refs.alertParamBox.saveParam()
+          return
         }
-      },
-      // 获取metric列表
-      getSuggestMetric() {
-        //this.$get('/prom/api/v1/label/__name__/values').then(response => {
-        this.$get('/module?pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.metricList = response.data.list;
-            const cascaderMap = new Map();
-            this.metricList.forEach((item,index) => {
-              let projectName = item.project.name;
-              let moduleName = item.name;
-              const childOption = {
-                value: moduleName,
-                label: moduleName,
-                children:[],
-              };
-              if(cascaderMap.has(projectName)){
-                cascaderMap.get(projectName).push(childOption);
-              }else {
-                let childArr = [];
-                childArr.push(childOption);
-                cascaderMap.set(projectName,childArr);
-              }
-
-              //缓存全局数据
-              const moduleItem = {
-                name:moduleName,
-                metricMap:new Map()
-              };
-              if(this.metricAllData.has(projectName)){
-                let moduleGroup = this.metricAllData.get(projectName);
-                this.metricAllData.get(projectName).push(moduleItem);
-              }else {
-                let moduleList = [];
-                moduleList.push(moduleItem);
-                this.metricAllData.set(projectName,moduleList);
-              }
-            });
-            let metricCascaderArr = [];
-            cascaderMap.forEach(function(value,index){
-              const option = {
-                value: index+"_par",
-                label: index,
-                children:value,
-              };
-              metricCascaderArr.push(option);
-            });
-
-            this.metricCascaderList = metricCascaderArr;
-          }else {
-            this.metricList = [];
-            this.metricCascaderList = [];
-          }
-        })
-      },
-      // 创建打开
-      createData(panelId, elementInfo) {
-        if (panelId == -1) {
-          let p = this.panelData[0];
-          this.editChart.panelName = p.name;
+        if (this.editChart.type == 'singleStat' || this.editChart.type == 'pie' || this.editChart.type == 'table') {
+          // this.$set(this.editChart.param, "statistics", this.statistics);
         } else {
-          this.panelId = panelId;
+          delete this.editChart.param.statistics
         }
-        if (elementInfo) {
-          if (elementInfo.elements.length > 1) {
-
-            this.$nextTick(() => {
-              this.elements = [];
-              elementInfo.elements.forEach((item, index) => {
-                this.elements.push(index);
-              });
-              let dSet = this.$refs.chartTag;
-              this.$nextTick(() => {
-                dSet.forEach((item, index) => {
-                  item.setMdata(elementInfo.elements[index]);
-                });
-              });
-            });
-
-          } else {
-            this.$nextTick(() => {
-              this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
-            });
-          }
-        }
-        this.isedit = false;
-        this.initInfo(); // 初始化图表信息
-        //this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
-        this.initOpen(); // 获取metric, productId数据
-      },
-      setIsUrl(){
-        this.isUrl = true;
-        this.isSingleStat = false;
-        this.isAlert = false;
-      },
-      setIsSingleStat(){
-        this.isUrl = false;
-        this.isSingleStat = true;
-        this.isAlert=false;
-      },
-      setIsAlertList(){
-        this.isAlert = true;
-        this.isUrl = false;
-        this.isSingleStat = false;
-      },
-      setIsOtherChart(){
-        this.isSingleStat = false;
-        this.isUrl = false;
-        this.isAlert=false;
-      },
-      // 编辑chart时使用, set_tdata
-      editData(data, panelId) {
-        if (!panelId) {
-          this.panelId = 0;
-        } else {
-          this.panelId = panelId;
-          let temp = this.panelData.filter((item) => {
-            return item.id == panelId;
-          });
-        }
-        this.isedit = true;
-        this.editInfo = data;
-        // 图表信息获取
-        this.editChart.id = data.id;
-        this.editChart.title = data.title;
-        this.editChart.span = data.span;
-        this.editChart.height = data.height+'';
-        this.editChart.type = data.type;
-        this.editChart.unit=data.unit;
-        this.editChart.elements = data.elements;
-        if(this.editChart.type==='url'){
-          this.editChart.param.url = data.param.url;
-          this.setIsUrl();
-          //this.elements = [1];
-        }else if(this.editChart.type==='table'){
-          this.statisticsList=JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
-          this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
-        }else if(this.editChart.type==='alertList'){
-          this.editChart.param = data.param;
-          this.setIsAlertList();
-          this.$nextTick(()=>{
-            this.$refs.alertParamBox.setData(data)
+        if (this.expressions[0]) {
+          this.editChart.elements = []
+          this.expressions.forEach((expr, i) => {
+            this.editChart.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i] })
           })
-          //this.elements=[1];
-        }else if(this.editChart.type==='singleStat'){
-          this.setIsSingleStat();
-        }else{
-          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='singleStat')&&data.param){
-            this.editChart.param.threshold=data.param.threshold;
-            this.editChart.param.statistics = this.statistics = data.param.statistics;
-          }else{
-            this.editChart.param.threshold='';
-          }
-          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea')&&data.param){
-            this.editChart.param.nullType=data.param.nullType;
-          }
-          this.setIsOtherChart();
-          //this.getSuggestMetric();//获得指标列表
-          // 指标
-          /*this.elements = [];
+        }
+        if (this.editChart.id) {
+          this.updateCharts()
+        } else {
+          this.addCharts()
+        }
+      } else {
+        if (this.editChart.type == 'url') {
+          this.$refs.chartForm.validate((valid) => {
+            const params = {
+              title: this.editChart.title, // this.editChart
+              span: this.editChart.span,
+              height: this.editChart.height,
+              type: this.editChart.type,
+              unit: this.editChart.unit,
+              param: {
+                url: this.editChart.param.url
+              },
+              sync: this.editChart.sync
+            }
+
+            if (valid) {
+              params.elements = []
+              if (this.isedit) {
+                params.id = this.editChart.id
+                this.updateCharts(params)
+              } else {
+                this.addCharts(params)
+              }
+            }
+          })
+        } else {
+          this.$refs.chartForm.validate((valid) => {
+            const text = this.$refs.richTextEditor.getContent()
+            if (!text) {
+              valid = false
+            }
+            const params = {
+              title: this.editChart.title, // this.editChart
+              span: this.editChart.span,
+              height: this.editChart.height,
+              type: this.editChart.type,
+              param: {
+                text: text
+              },
+              sync: this.editChart.sync
+            }
+
+            if (valid) {
+              params.elements = []
+              if (this.isedit) {
+                params.id = this.editChart.id
+                this.updateCharts(params)
+              } else {
+                this.addCharts(params)
+              }
+            }
+          })
+        }
+      }
+    },
+    // 获取metric列表
+    getSuggestMetric () {
+      // this.$get('/prom/api/v1/label/__name__/values').then(response => {
+      this.$get('/module?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.metricList = response.data.list
+          const cascaderMap = new Map()
+          this.metricList.forEach((item, index) => {
+            const projectName = item.project.name
+            const moduleName = item.name
+            const childOption = {
+              value: moduleName,
+              label: moduleName,
+              children: []
+            }
+            if (cascaderMap.has(projectName)) {
+              cascaderMap.get(projectName).push(childOption)
+            } else {
+              const childArr = []
+              childArr.push(childOption)
+              cascaderMap.set(projectName, childArr)
+            }
+
+            // 缓存全局数据
+            const moduleItem = {
+              name: moduleName,
+              metricMap: new Map()
+            }
+            if (this.metricAllData.has(projectName)) {
+              this.metricAllData.get(projectName).push(moduleItem)
+            } else {
+              const moduleList = []
+              moduleList.push(moduleItem)
+              this.metricAllData.set(projectName, moduleList)
+            }
+          })
+          const metricCascaderArr = []
+          cascaderMap.forEach(function (value, index) {
+            const option = {
+              value: index + '_par',
+              label: index,
+              children: value
+            }
+            metricCascaderArr.push(option)
+          })
+
+          this.metricCascaderList = metricCascaderArr
+        } else {
+          this.metricList = []
+          this.metricCascaderList = []
+        }
+      })
+    },
+    // 创建打开
+    createData (panelId, elementInfo) {
+      if (panelId == -1) {
+        const p = this.panelData[0]
+        this.editChart.panelName = p.name
+      } else {
+        this.panelId = panelId
+      }
+      if (elementInfo) {
+        if (elementInfo.elements.length > 1) {
+          this.$nextTick(() => {
+            this.elements = []
+            elementInfo.elements.forEach((item, index) => {
+              this.elements.push(index)
+            })
+            const dSet = this.$refs.chartTag
+            this.$nextTick(() => {
+              dSet.forEach((item, index) => {
+                item.setMdata(elementInfo.elements[index])
+              })
+            })
+          })
+        } else {
+          this.$nextTick(() => {
+            this.$refs.chartTag[0].setMdata(elementInfo.elements[0])
+          })
+        }
+      }
+      this.isedit = false
+      this.initInfo() // 初始化图表信息
+      // this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
+      this.initOpen() // 获取metric, productId数据
+    },
+    setIsUrl () {
+      this.isUrl = true
+      this.isSingleStat = false
+      this.isAlert = false
+    },
+    setIsSingleStat () {
+      this.isUrl = false
+      this.isSingleStat = true
+      this.isAlert = false
+    },
+    setIsAlertList () {
+      this.isAlert = true
+      this.isUrl = false
+      this.isSingleStat = false
+    },
+    setIsOtherChart () {
+      this.isSingleStat = false
+      this.isUrl = false
+      this.isAlert = false
+    },
+    // 编辑chart时使用, set_tdata
+    editData (data, panelId) {
+      if (!panelId) {
+        this.panelId = 0
+      } else {
+        this.panelId = panelId
+      }
+      this.isedit = true
+      this.editInfo = data
+      // 图表信息获取
+      this.editChart.id = data.id
+      this.editChart.title = data.title
+      this.editChart.span = data.span
+      this.editChart.height = data.height + ''
+      this.editChart.type = data.type
+      this.editChart.unit = data.unit
+      this.editChart.elements = data.elements
+      if (this.editChart.type === 'url') {
+        this.editChart.param.url = data.param.url
+        this.setIsUrl()
+        // this.elements = [1];
+      } else if (this.editChart.type === 'table') {
+        this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
+        this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
+      } else if (this.editChart.type === 'alertList') {
+        this.editChart.param = data.param
+        this.setIsAlertList()
+        this.$nextTick(() => {
+          this.$refs.alertParamBox.setData(data)
+        })
+        // this.elements=[1];
+      } else if (this.editChart.type === 'singleStat') {
+        this.setIsSingleStat()
+      } else {
+        if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'singleStat') && data.param) {
+          this.editChart.param.threshold = data.param.threshold
+          this.editChart.param.statistics = this.statistics = data.param.statistics
+        } else {
+          this.editChart.param.threshold = ''
+        }
+        if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea') && data.param) {
+          this.editChart.param.nullType = data.param.nullType
+        }
+        this.setIsOtherChart()
+        // this.getSuggestMetric();//获得指标列表
+        // 指标
+        /* this.elements = [];
           bus.chartAddInfo.metricTarget = [];
           data.elements.forEach((item, index) => {
             this.elements.push(index);
@@ -1255,436 +1246,434 @@
                 item.setMdata(data.elements[index]);
               });
             }
-          });*/
-        }
-      },
+          }); */
+      }
+    },
 
-      // 初始化信息
-      initInfo() {
-        this.editChart.title = '';
-        this.editChart.type = 'line';
-        this.editChart.span = 12;
-        this.editChart.height = 400+'';
-        this.editChart.unit=2;
-        let param = {};
-        param.last=0;
-        param.url='';
-        param.threshold='';
-        param.valueMapping={type:'text',mapping:[{value:'',text:'',color:{bac:'#fff',text:'#000'}}]};
-        param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
-        param.nullType='connected';
-        this.$set(this.editChart, "param", param);
-        this.elements = [1];
-        this.elementTarget = [];
-        bus.chartAddInfo.metricTarget = [];
-        this.setIsOtherChart();
-      },
-      // 创建时打开,用于清空chart-tag数据
-      initOpen() {
-        //bus.$emit('clear_history');
-        /*  项目不需要produce
+    // 初始化信息
+    initInfo () {
+      this.editChart.title = ''
+      this.editChart.type = 'line'
+      this.editChart.span = 12
+      this.editChart.height = 400 + ''
+      this.editChart.unit = 2
+      const param = {}
+      param.last = 0
+      param.url = ''
+      param.threshold = ''
+      param.valueMapping = { type: 'text', mapping: [{ value: '', text: '', color: { bac: '#fff', text: '#000' } }] }
+      param.legendValue = { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' }
+      param.nullType = 'connected'
+      this.$set(this.editChart, 'param', param)
+      this.elements = [1]
+      this.elementTarget = []
+      bus.chartAddInfo.metricTarget = []
+      this.setIsOtherChart()
+    },
+    // 创建时打开,用于清空chart-tag数据
+    initOpen () {
+      // bus.$emit('clear_history');
+      /*  项目不需要produce
         if (this.$route.params.productId) {
           this.productId = parseInt(this.$route.params.productId, 10);
         }
         */
-        //this.getSuggestMetric();
-      },
+      // this.getSuggestMetric();
+    },
 
-      /*metric部分相关方法--end*/
-      querySearch(queryString, cb) {
-        let suggestions = this.heightSuggestions;
-        let results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (suggestion) => {
-          return (suggestion.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect:function(item){
-        this.editChart.height=item;
-      },
-      unitSelected:function(value){
-        //this.editChart.unit=value[value.length-1];
-      },
-      chartTypeChange(){
-        let chartType = this.editChart.type;
-        this.editChart.param.url='';
-        if(chartType==='url'){
-          this.setIsUrl();
-          /*if(this.$refs.chartTag){
+    /* metric部分相关方法--end */
+    querySearch (queryString, cb) {
+      const suggestions = this.heightSuggestions
+      const results = queryString && (suggestions.includes(queryString) || suggestions.filter(this.createFilter(queryString)).length > 0) ? suggestions : []
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (suggestion) => {
+        return (suggestion.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    handleSelect: function (item) {
+      this.editChart.height = item
+    },
+    unitSelected: function (value) {
+      // this.editChart.unit=value[value.length-1];
+    },
+    chartTypeChange () {
+      const chartType = this.editChart.type
+      this.editChart.param.url = ''
+      if (chartType === 'url') {
+        this.setIsUrl()
+        /* if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
               item.setNotSingleStat();
             });
-          }*/
-        }else if(chartType === 'alertList'){
-          this.setIsAlertList();
-        }else if(chartType === 'singleStat' || chartType==='pie') {
-
-          if(chartType == 'singleStat'){
-            this.setIsSingleStat();
-            this.resetElements();
-          }
-          this.editChart.param={
-            statistics:'last',
-            valueMapping:{
-              type:'value',
-              mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
-            }
-          }
-          this.showPicker=[{bac:false,text:false}];
-        }else {
-          this.setIsOtherChart();
-          if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
-            this.editChart.param={nullType:'connected',threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
-          }else if(chartType == 'table'){
-            this.$set(this.editChart.param,'last',0)
-            this.editChart.param={
-              statistics:'last',
-              nullType:'connected',
-              valueMapping:{
-                type:'value',
-                mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
-              }
-            }
-            this.showPicker=[{bac:false,text:false}];
-            this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList));
-            this.statisticsList.push({value: "null", label: i18n.t("dashboard.panel.chartForm.statisticsVal.null")},);
-
-          }
-          /*if(this.$refs.chartTag){
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setNotSingleStat();
-            });
-          }*/
+          } */
+      } else if (chartType === 'alertList') {
+        this.setIsAlertList()
+      } else if (chartType === 'singleStat' || chartType === 'pie') {
+        if (chartType == 'singleStat') {
+          this.setIsSingleStat()
+          this.resetElements()
         }
-      },
-      resetElements() {
-        this.promqlKeys = [""];
-        this.expressions = [""];
-        this.legends = [];
-        this.elementIds = [];
-      },
-      inputPanel:function(){
-        this.isInputPanel=true;
-      },
-      /*panel搜索建议*/
-      panelSuggestion(queryString, callback) {
-       if(!this.isInputPanel){
-         callback(JSON.parse(JSON.stringify(this.panelData)));
-       }else{
-         let data = [];
-         if (!queryString) {
-           data = this.panelData;
-         } else {
-           for (let i = 0; i < this.panelData.length; i++) {
-             if (this.panelData[i].name.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
-               data.push(this.panelData[i]);
-             }
-           }
-         }
-         callback(data);
-       }
-      },
+        this.editChart.param = {
+          statistics: 'last',
+          valueMapping: {
+            type: 'value',
+            mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
+          }
+        }
+        this.showPicker = [{ bac: false, text: false }]
+      } else {
+        this.setIsOtherChart()
+        if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
+          this.editChart.param = { nullType: 'connected', threshold: '', legendValue: { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' } }
+        } else if (chartType == 'table') {
+          this.$set(this.editChart.param, 'last', 0)
+          this.editChart.param = {
+            statistics: 'last',
+            nullType: 'connected',
+            valueMapping: {
+              type: 'value',
+              mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
+            }
+          }
+          this.showPicker = [{ bac: false, text: false }]
+          this.statisticsList = JSON.parse(JSON.stringify(this.$CONSTANTS.statisticsList))
+          this.statisticsList.push({ value: 'null', label: i18n.t('dashboard.panel.chartForm.statisticsVal.null') })
+        }
+        /* if(this.$refs.chartTag){
+            this.$refs.chartTag.forEach((item, index) => {
+              item.setNotSingleStat();
+            });
+          } */
+      }
+    },
+    resetElements () {
+      this.promqlKeys = ['']
+      this.expressions = ['']
+      this.legends = []
+      this.elementIds = []
+    },
+    inputPanel: function () {
+      this.isInputPanel = true
+    },
+    /* panel搜索建议 */
+    panelSuggestion (queryString, callback) {
+      if (!this.isInputPanel) {
+        callback(JSON.parse(JSON.stringify(this.panelData)))
+      } else {
+        let data = []
+        if (!queryString) {
+          data = this.panelData
+        } else {
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].name.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
+              data.push(this.panelData[i])
+            }
+          }
+        }
+        callback(data)
+      }
+    },
 
-      //preview -start
-      //预览图表
-      preview(){
-        //验证图表数据是否合法？？，合法了再显示预览窗口
-        this.elementTarget = []; // 初始化清空参数
-        this.alertParams={};
-        if(this.editChart.type!=='url'&&this.editChart.type!=='text'){
-          if(this.editChart.type == 'alertList'){
-            this.$refs.alertParamBox.saveParam('preview');
-          }else{
-            /*this.$refs.chartTag.forEach((item, index) => {//循环指标列表
+    // preview -start
+    // 预览图表
+    preview () {
+      // 验证图表数据是否合法？？，合法了再显示预览窗口
+      this.elementTarget = [] // 初始化清空参数
+      this.alertParams = {}
+      if (this.editChart.type !== 'url' && this.editChart.type !== 'text') {
+        if (this.editChart.type == 'alertList') {
+          this.$refs.alertParamBox.saveParam('preview')
+        } else {
+          /* this.$refs.chartTag.forEach((item, index) => {//循环指标列表
               // 触发每个tag组件内部进行校验
               item.saveTarget(index,'preview');
-            });*/
-            this.$refs.chartForm.validate((valid) => {
-              const params = {
-                // productId: this.productId,
-                //panelId: this.panelId,
-                title: this.editChart.title,//this.editChart
-                span: this.editChart.span,
-                height: this.editChart.height,
-                type: this.editChart.type,
-                unit:this.editChart.unit,
-                param:this.editChart.param,
-                sync: this.editChart.sync
-              };
-              if(this.editChart.type === 'singleStat'||this.editChart.type === 'table'){
-                // params.param.statistics=this.statistics;
-                params.param.valueMapping=this.editChart.param.valueMapping;
-              }
-              if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'&& this.editChart.type != 'table'){
-                delete params.param.statistics;
-              }
-              if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){
-                params.param.threshold=this.editChart.param.threshold;
-                if(this.editChart.type==='table'){
-                  delete params.param.threshold;
-                  params.param.valueMapping=this.editChart.param.valueMapping;
-                }
-                params.param.nullType=this.editChart.param.nullType;
-                params.param.legendValue=this.editChart.param.legendValue;
-              } else {
-                delete params.param.threshold;
-                delete params.param.nullType;
-              }
-              //生成指标数组
-              const elements = [];
-              this.expressions.forEach((expr, index) => {
-                elements.push({
-                  expression: expr,
-                  type: 'expert',
-                  legend: this.legends[index],
-                });
-              });
-              params.elements = elements;
-              if (valid) {
-                this.$refs.chartsPreview.show(params);
-              }
-            });
-          }
-        }else if(this.editChart.type=='url'){
+            }); */
           this.$refs.chartForm.validate((valid) => {
             const params = {
-              title: this.editChart.title,//this.editChart
+              // productId: this.productId,
+              // panelId: this.panelId,
+              title: this.editChart.title, // this.editChart
               span: this.editChart.span,
               height: this.editChart.height,
               type: this.editChart.type,
-              unit:this.editChart.unit,
-              param:{
-                url:this.editChart.param.url,
-              }
-            };
-
-            if (valid) {
-              if (this.isedit) {
-                params.id = this.editChart.id;
-              }
-              this.$refs.chartsPreview.show(params);
+              unit: this.editChart.unit,
+              param: this.editChart.param,
+              sync: this.editChart.sync
             }
-          });
-        }else{
-          this.$refs.chartForm.validate((valid) => {
-            let text=this.$refs.richTextEditor.getContent();
-            if(!text){
-              valid=false;
+            if (this.editChart.type === 'singleStat' || this.editChart.type === 'table') {
+              // params.param.statistics=this.statistics;
+              params.param.valueMapping = this.editChart.param.valueMapping
             }
-            const params = {
-              title: this.editChart.title,//this.editChart
-              span: this.editChart.span,
-              height: this.editChart.height,
-              type: this.editChart.type,
-              unit:this.editChart.unit,
-              param:{
-                text:text
-              }
-            };
-
-            if (valid) {
-              if (this.isedit) {
-                params.id = this.editChart.id;
-              }
-              this.$refs.chartsPreview.show(params);
+            if (this.editChart.type != 'singleStat' && this.editChart.type != 'pie' && this.editChart.type != 'table') {
+              delete params.param.statistics
             }
-          });
-        }
-      },
-      //preview--end
-      initElements() {
-        if (!this.editChart.elements || this.editChart.elements.length == 0) {
-          this.editChart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
-        }
-        this.editChart.elements.forEach(element => {
-          if(element&&element!=''){
-            this.promqlKeys.push(getUUID());
-            this.expressions.push(element.expression);
-            this.legends.push(element.legend);
-            this.elementIds.push(element.id);
-          }
-        });
-        this.promqlCount=this.editChart.elements.length;
-        this.$nextTick(() => {
-          this.expressions.forEach((ex, index) => {
-            if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex);
+            if (this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'table') {
+              params.param.threshold = this.editChart.param.threshold
+              if (this.editChart.type === 'table') {
+                delete params.param.threshold
+                params.param.valueMapping = this.editChart.param.valueMapping
+              }
+              params.param.nullType = this.editChart.param.nullType
+              params.param.legendValue = this.editChart.param.legendValue
+            } else {
+              delete params.param.threshold
+              delete params.param.nullType
             }
-          });
-        });
-      },
-      valueMappingChange:function(value){
-        if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping =[{text:'',value:'',color:{bac:'#fff',text:'#000'}}];
-          this.showPicker=[{bac:false,text:false}]
-        }else{
-          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}}];
-          this.showPicker=[{bac:false,text:false}]
-        }
-      },
-      addMapping:function(){
-        if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping .push({text:'',value:'',color:{bac:'#fff',text:'#000'}});
-          this.showPicker.push({bac:false,text:false})
-        }else{
-          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}});
-          this.showPicker.push({bac:false,text:false})
-        }
-      },
-      colorPickerClick(index){
-        if(this.showPicker[index].bac|| this.showPicker[index].text){//再次点击关闭
-          this.showPicker[index].bac=false;
-          this.showPicker[index].text=false;
-          return
-        }
-        this.showPicker[index].bac=true;
-        this.$refs['colorPickerBac'+ index][0].showPicker=true;
-      },
-      changeShowPicker(index,atr){
-        this.$refs['colorPickerBac'  + index][0].showPicker=true;
-        this.showPicker[index].bac=false;
-        this.showPicker[index].text=false;
-        this.showPicker[index][atr]=true;
-        // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
-      },
-      colorChange(mapping,key,val){
-        mapping.color[key]=val
-      },
-      colorRGBtoHex(color) {
-        let rgb = color.split(',');
-        let r = parseInt(rgb[0].split('(')[1]);
-        let g = parseInt(rgb[1]);
-        let b = parseInt(rgb[2].split(')')[0]);
-        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-        return hex;
-      },
-      colorOut(index,e){
-        let flag=false;
-        e.path.forEach((item)=>{
-          if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
-            flag=true
-          }
-        })
-        if(flag){
-          return
-        }
-        if(this.showPicker[index]){
-          this.showPicker[index].bac=false;
-          this.showPicker[index].text=false;
-        }
-      },
-      delMapping:function(index){
-        this.editChart.param.valueMapping.mapping.splice(index,1)
-      },
-      queryMetrics() {
-        this.metricOptions = [];
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status == 'success'){
-            let metrics=response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              };
-              if(metricMap.get(key) && metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-          }
-        })
-      },
-      getMetricOptions() {
-        return this.metricOptions;
-      }
-    },
-    created() {
-      this.getSuggestMetric();
-      this.queryMetrics();
-    },
-    watch: {
-      chart: {
-        deep: true,
-        immediate: true,
-        handler(n) {
-          if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
-            n.param.valueMapping.mapping.forEach(item=>{
-              this.showPicker.push({bac:false,text:false})
-              if(!item.color){
-                item.color={bac:'#fff',text:'#000'};
-              }
+            // 生成指标数组
+            const elements = []
+            this.expressions.forEach((expr, index) => {
+              elements.push({
+                expression: expr,
+                type: 'expert',
+                legend: this.legends[index]
+              })
             })
+            params.elements = elements
+            if (valid) {
+              this.$refs.chartsPreview.show(params)
+            }
+          })
+        }
+      } else if (this.editChart.type == 'url') {
+        this.$refs.chartForm.validate((valid) => {
+          const params = {
+            title: this.editChart.title, // this.editChart
+            span: this.editChart.span,
+            height: this.editChart.height,
+            type: this.editChart.type,
+            unit: this.editChart.unit,
+            param: {
+              url: this.editChart.param.url
+            }
           }
 
-          if(n.title){
-            this.isEdit=true;
-          }
-          this.editChart = JSON.parse(JSON.stringify(n));
-          if(!n.param.nullType){
-            this.editChart.param.nullType='connected';
-          }
-          if (n.type === 'url') {
-            this.setIsUrl();
-          } else if(n.type === 'alertList'){
-            this.setIsAlertList();
-          } else if(n.type === 'singleStat'){
-            if(n.param&&!n.param.valueMapping){
-              this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
-              this.showPicker.push({bac:false,text:false});
+          if (valid) {
+            if (this.isedit) {
+              params.id = this.editChart.id
             }
-            this.setIsSingleStat();
-          } else if(n.type  === 'table'){
-            n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
-            if(n.param&&!n.param.valueMapping){
-              this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
-              this.showPicker.push({bac:false,text:false});
+            this.$refs.chartsPreview.show(params)
+          }
+        })
+      } else {
+        this.$refs.chartForm.validate((valid) => {
+          const text = this.$refs.richTextEditor.getContent()
+          if (!text) {
+            valid = false
+          }
+          const params = {
+            title: this.editChart.title, // this.editChart
+            span: this.editChart.span,
+            height: this.editChart.height,
+            type: this.editChart.type,
+            unit: this.editChart.unit,
+            param: {
+              text: text
             }
-          }else {
-            this.setIsOtherChart();
-            n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
           }
-          this.$set(this.editChart, "panelName", this.showPanel.name);
-          if (this.showPanel.id) {
-            this.panelId = this.showPanel.id;
+
+          if (valid) {
+            if (this.isedit) {
+              params.id = this.editChart.id
+            }
+            this.$refs.chartsPreview.show(params)
           }
-          if (n.id) {
-            this.editData(this.editChart, this.showPanel.id);
-          } else {
-            this.createData(this.showPanel.id);
+        })
+      }
+    },
+    // preview--end
+    initElements () {
+      if (!this.editChart.elements || this.editChart.elements.length == 0) {
+        this.editChart.elements = [{ expression: '', legend: '', type: 'expert', id: '' }]
+      }
+      this.editChart.elements.forEach(element => {
+        if (element && element != '') {
+          this.promqlKeys.push(getUUID())
+          this.expressions.push(element.expression)
+          this.legends.push(element.legend)
+          this.elementIds.push(element.id)
+        }
+      })
+      this.promqlCount = this.editChart.elements.length
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+          }
+        })
+      })
+    },
+    valueMappingChange: function (value) {
+      if (this.editChart.param.valueMapping.type == 'value') {
+        this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
+        this.showPicker = [{ bac: false, text: false }]
+      } else {
+        this.editChart.param.valueMapping.mapping = [{ from: '', to: '', text: '', color: { bac: '#fff', text: '#000' } }]
+        this.showPicker = [{ bac: false, text: false }]
+      }
+    },
+    addMapping: function () {
+      if (this.editChart.param.valueMapping.type == 'value') {
+        this.editChart.param.valueMapping.mapping.push({ text: '', value: '', color: { bac: '#fff', text: '#000' } })
+        this.showPicker.push({ bac: false, text: false })
+      } else {
+        this.editChart.param.valueMapping.mapping.push({ from: '', to: '', text: '', color: { bac: '#fff', text: '#000' } })
+        this.showPicker.push({ bac: false, text: false })
+      }
+    },
+    colorPickerClick (index) {
+      if (this.showPicker[index].bac || this.showPicker[index].text) { // 再次点击关闭
+        this.showPicker[index].bac = false
+        this.showPicker[index].text = false
+        return
+      }
+      this.showPicker[index].bac = true
+      this.$refs['colorPickerBac' + index][0].showPicker = true
+    },
+    changeShowPicker (index, atr) {
+      this.$refs['colorPickerBac' + index][0].showPicker = true
+      this.showPicker[index].bac = false
+      this.showPicker[index].text = false
+      this.showPicker[index][atr] = true
+      // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
+    },
+    colorChange (mapping, key, val) {
+      mapping.color[key] = val
+    },
+    colorRGBtoHex (color) {
+      const rgb = color.split(',')
+      const r = parseInt(rgb[0].split('(')[1])
+      const g = parseInt(rgb[1])
+      const b = parseInt(rgb[2].split(')')[0])
+      const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+      return hex
+    },
+    colorOut (index, e) {
+      let flag = false
+      e.path.forEach((item) => {
+        if (item.className === 'el-color-dropdown el-color-picker__panel' || item.className === 'color-tab') {
+          flag = true
+        }
+      })
+      if (flag) {
+        return
+      }
+      if (this.showPicker[index]) {
+        this.showPicker[index].bac = false
+        this.showPicker[index].text = false
+      }
+    },
+    delMapping: function (index) {
+      this.editChart.param.valueMapping.mapping.splice(index, 1)
+    },
+    queryMetrics () {
+      this.metricOptions = []
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          const metrics = response.data.sort()
+          const metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
+            } else {
+              key = item
+            }
+            if (metricMap.get(key)) {
+              const values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              const values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (const key of metricMap.keys()) {
+            const option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = metricMap.get(key)
+            }
+            this.metricOptions.push(option)
           }
         }
-      },
+      })
     },
-    beforeDestroy() {
-      if(this.$refs.chartTag){
-        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
-          item.clearSelectedTagList();
-        });
+    getMetricOptions () {
+      return this.metricOptions
+    }
+  },
+  created () {
+    this.getSuggestMetric()
+    this.queryMetrics()
+  },
+  watch: {
+    chart: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if ((n.param && n.param.valueMapping) && (n.type === 'singleStat' || n.type === 'table')) {
+          n.param.valueMapping.mapping.forEach(item => {
+            this.showPicker.push({ bac: false, text: false })
+            if (!item.color) {
+              item.color = { bac: '#fff', text: '#000' }
+            }
+          })
+        }
+
+        if (n.title) {
+          this.isEdit = true
+        }
+        this.editChart = JSON.parse(JSON.stringify(n))
+        if (!n.param.nullType) {
+          this.editChart.param.nullType = 'connected'
+        }
+        if (n.type === 'url') {
+          this.setIsUrl()
+        } else if (n.type === 'alertList') {
+          this.setIsAlertList()
+        } else if (n.type === 'singleStat') {
+          if (n.param && !n.param.valueMapping) {
+            this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
+            this.showPicker.push({ bac: false, text: false })
+          }
+          this.setIsSingleStat()
+        } else if (n.type === 'table') {
+          n.param.last ? this.$set(this.editChart.param, 'last', n.param.last) : this.$set(this.editChart.param, 'last', 0)
+          if (n.param && !n.param.valueMapping) {
+            this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
+            this.showPicker.push({ bac: false, text: false })
+          }
+        } else {
+          this.setIsOtherChart()
+          n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
+        }
+        this.$set(this.editChart, 'panelName', this.showPanel.name)
+        if (this.showPanel.id) {
+          this.panelId = this.showPanel.id
+        }
+        if (n.id) {
+          this.editData(this.editChart, this.showPanel.id)
+        } else {
+          this.createData(this.showPanel.id)
+        }
       }
-      this.isUrl = false;
-    },
+    }
+  },
+  beforeDestroy () {
+    if (this.$refs.chartTag) {
+      this.$refs.chartTag.forEach((item, index) => { // 循环指标列表
+        item.clearSelectedTagList()
+      })
+    }
+    this.isUrl = false
   }
+}
 </script>
 <style>
   .popper-z-index{
@@ -1706,4 +1695,3 @@
     z-index: 2200!important;
   }
 </style>
-
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index 3a6dd70a7..2fdf4a7f1 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -286,352 +286,351 @@
   </el-form>
 </template>
 <script>
-import bus from '../../../libs/bus';
-import {resetZIndex} from "../../common/js/common";
+import bus from '../../../libs/bus'
+import { resetZIndex } from '../../common/js/common'
 export default {
   name: 'chartTag',
   props: {
     // 序号
     pointer: {
       type: Number,
-      default: 0,
+      default: 0
     },
     // metric列表
     metricList: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
-    metricAllData:Map,
-    metricCascaderList:Array,
-    //metricCascaderListTmp:Array,//3级级联列表：project/module/metric，metric是在本页面动态获得，并设置本页面的metric对应的label级value（metricLabelValInfo列表，所以不可重复使用？？）
-    //metricLabelValInfo:Map,//用于存放所有的metric，label，val
+    metricAllData: Map,
+    metricCascaderList: Array,
+    // metricCascaderListTmp:Array,//3级级联列表：project/module/metric，metric是在本页面动态获得，并设置本页面的metric对应的label级value（metricLabelValInfo列表，所以不可重复使用？？）
+    // metricLabelValInfo:Map,//用于存放所有的metric，label，val
     countTotal: {
       type: Number,
-      default: 1,
+      default: 1
     },
-    hasLegend:{
-      type:Boolean,
-      default:true
+    hasLegend: {
+      type: Boolean,
+      default: true
     },
-    isSingleStat:{
-      type:Boolean,
-      default:false
+    isSingleStat: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
-    //multipleSelect
+    // multipleSelect
   },
-  data() {
+  data () {
     return {
       tableShow: 1, // 1.normal; 2.expert
       // 指标信息
       elementInfo: {
-        metric: '',//当前选中的metric名称
-        type:'normal',
+        metric: '', // 当前选中的metric名称
+        type: 'normal',
         // name: '',
         tagList: [], // 标签列表
-        selectedTagList:[],//已选中的标签列表
-        expression:'',
-        legend:'',
-        statistics:'last'
+        selectedTagList: [], // 已选中的标签列表
+        expression: '',
+        legend: '',
+        statistics: 'last'
       },
-      //isSingleStat:false,
-      statisticsList:[
+      // isSingleStat:false,
+      statisticsList: [
         {
-          id:"min",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.min")
+          id: 'min',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.min')
         },
         {
-          id:"max",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.max")
+          id: 'max',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.max')
         },
         {
-          id:"average",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.average")
+          id: 'average',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.average')
         },
         {
-          id:"total",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.total")
+          id: 'total',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.total')
         },
         {
-          id:"first",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.first")
+          id: 'first',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.first')
         },
         {
-          id:"last",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.last")
+          id: 'last',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.last')
         },
         {
-          id:"range",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.range")
+          id: 'range',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.range')
         },
         {
-          id:"different",
-          name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
-        },
+          id: 'different',
+          name: this.$t('dashboard.panel.chartForm.statisticsVal.different')
+        }
       ],
-      labelValueCascaderOptions:[],//label及value改为级联后，显示用的待选label及value
-      labelValueCascaderVal:[],//label及value改为级联后，选择的label及value
-      //metricCascaderList:[],
-      metricLabelValInfo:new Map(),//用于存放所有的metric，label，val
+      labelValueCascaderOptions: [], // label及value改为级联后，显示用的待选label及value
+      labelValueCascaderVal: [], // label及value改为级联后，选择的label及value
+      // metricCascaderList:[],
+      metricLabelValInfo: new Map(), // 用于存放所有的metric，label，val
       metricLoading: false,
       keydataList: [], // tag标签键列表
       target: null, // 获取到的数据
       tagSet: null, // 根据你metric获取的tags信息
       setDataFlag: false, // true时为获取数据,编辑状态
       vendorCount: '',
-      labelSort:['project','module','endpoint','datacenter','asset'],
-      cascaderProps:{
+      labelSort: ['project', 'module', 'endpoint', 'datacenter', 'asset'],
+      cascaderProps: {
         expandTrigger: 'click',
         lazy: true,
-        that:this,
+        that: this,
         lazyLoad (node, resolve) {
           /*
           1 第一次加载界面：node:{"root":true,"level":0,"loading":true}
           2 点击的一级节点，则直接从list中获得，如果点击的为二级节点，先看对应list里是否有，没有再从接口获得
           */
-          let nodeLevel = node.level;
-          let _this = this.that;
-          if(nodeLevel===1){
+          const nodeLevel = node.level
+          const _this = this.that
+          if (nodeLevel === 1) {
             setTimeout(() => {
-              resolve([]);
-            }, 100);
-          }else if(nodeLevel===2){
+              resolve([])
+            }, 100)
+          } else if (nodeLevel === 2) {
             setTimeout(() => {
-              let project = node.parent.data.label;
-              let module = node.data.label;
-              let metricArr = [];
-              let metricArrTmp = [];
+              const project = node.parent.data.label
+              const module = node.data.label
+              const metricArr = []
+              const metricArrTmp = []
 
-              let metricLabelValMap = new Map();
-              let projectItem = _this.metricAllData.get(project);
-              if(projectItem){
-                let moduleItem = projectItem.find(item => item.name === module);
-                if(moduleItem){
-                  metricLabelValMap = moduleItem.metricMap;
+              let metricLabelValMap = new Map()
+              const projectItem = _this.metricAllData.get(project)
+              if (projectItem) {
+                const moduleItem = projectItem.find(item => item.name === module)
+                if (moduleItem) {
+                  metricLabelValMap = moduleItem.metricMap
                 }
               }
-              if(metricLabelValMap.size>0){
-                _this.metricLabelValInfo = metricLabelValMap;
-                metricLabelValMap.forEach((item,index)=>{
+              if (metricLabelValMap.size > 0) {
+                _this.metricLabelValInfo = metricLabelValMap
+                metricLabelValMap.forEach((item, index) => {
                   const childOption = {
                     value: index,
                     label: index,
-                    leaf:true,
-                  };
-                  metricArr.push(childOption);
-                });
-                resolve(metricArr);
-              }else {
-                _this.metricCascaderList.map((item, index) => {
-                  if(item.label===project){//选择的project
-                    item.children.map((innerItem, innerIndex) => {
-                      if (innerItem.value === module){
-                        if (innerItem.children.length === 0) {//不重复加载
+                    leaf: true
+                  }
+                  metricArr.push(childOption)
+                })
+                resolve(metricArr)
+              } else {
+                _this.metricCascaderList.forEach((item, index) => {
+                  if (item.label === project) { // 选择的project
+                    item.children.forEach((innerItem, innerIndex) => {
+                      if (innerItem.value === module) {
+                        if (innerItem.children.length === 0) { // 不重复加载
                           // 当二级分类的的child为空时才请求一次数据
-                          let match = '{project="'+project+'",module="'+module+'"}';
-                          _this.$get('/prom/api/v1/series?match[]='+match).then(res => {
+                          const match = '{project="' + project + '",module="' + module + '"}'
+                          _this.$get('/prom/api/v1/series?match[]=' + match).then(res => {
                             if (res.status === 'success') {
                               res.data.forEach((tag, i) => {
-                                let metricName = tag.__name__;
-                                if(metricArrTmp.indexOf(metricName)===-1){
+                                const metricName = tag.__name__
+                                if (metricArrTmp.indexOf(metricName) === -1) {
                                   const childOption = {
-                                    value: metricName,//+"_par",
+                                    value: metricName, // +"_par",
                                     label: metricName,
-                                    leaf:nodeLevel>=2,
-                                  };
-                                  metricArrTmp.push(metricName);
-                                  metricArr.push(childOption);
+                                    leaf: nodeLevel >= 2
+                                  }
+                                  metricArrTmp.push(metricName)
+                                  metricArr.push(childOption)
                                 }
-                                const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
-                                let labelValList = [];
+                                const tagsArr = Object.keys(tag)// ["__name__","asset","idc","instance","job","module","project"]
+                                const labelValList = []
 
                                 tagsArr.forEach((tagName) => {
                                   if (tagName !== '__name__') {
                                     const tagObj = {
                                       name: tagName,
-                                      list:[],
-                                      value:[]//最终选择的值
-                                    };
-                                    let tagValue = tag[tagName];
-                                    const tagItem = labelValList.find(item => item.name === tagName);
-                                    if(tagItem){//metric对应的label已添加
-                                      if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加
-                                        tagItem.list .push(tagValue);
+                                      list: [],
+                                      value: []// 最终选择的值
+                                    }
+                                    const tagValue = tag[tagName]
+                                    const tagItem = labelValList.find(item => item.name === tagName)
+                                    if (tagItem) { // metric对应的label已添加
+                                      if (tagItem.list.indexOf(tagValue) === -1) { // label对于value是否添加，没有添加，则添加
+                                        tagItem.list.push(tagValue)
                                       }
-                                    }else {//metric对于的label未添加
-                                      tagObj.list.push(tagValue);
-                                      labelValList.push(tagObj);
+                                    } else { // metric对于的label未添加
+                                      tagObj.list.push(tagValue)
+                                      labelValList.push(tagObj)
                                     }
                                   }
-                                });
-                                if(_this.metricLabelValInfo.has(metricName)){
-                                  let existMetricLabelList =  _this.metricLabelValInfo.get(metricName);
-                                  labelValList.forEach((labelItem,index)=>{
-                                    const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
-                                    if(existTagItem){//label已添加
-                                      labelItem.list.forEach((valueItem,valIndex)=>{
-                                        if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
-                                          existTagItem.list.push(valueItem);
+                                })
+                                if (_this.metricLabelValInfo.has(metricName)) {
+                                  const existMetricLabelList = _this.metricLabelValInfo.get(metricName)
+                                  labelValList.forEach((labelItem, index) => {
+                                    const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name)
+                                    if (existTagItem) { // label已添加
+                                      labelItem.list.forEach((valueItem, valIndex) => {
+                                        if (existTagItem.list.indexOf(valueItem) === -1) { // value未添加
+                                          existTagItem.list.push(valueItem)
                                         }
                                       })
-                                    }else {//label未添加
-                                      existMetricLabelList.push(labelItem);
+                                    } else { // label未添加
+                                      existMetricLabelList.push(labelItem)
                                     }
                                   })
-                                }else {
-                                  _this.metricLabelValInfo.set(metricName,labelValList);
+                                } else {
+                                  _this.metricLabelValInfo.set(metricName, labelValList)
                                 }
-                                //全局缓存数据设置
-                                _this.cacheData(project,module,metricName,labelValList);
-                              });
-                              resolve(metricArr);
-                            }else {
-                              resolve([]);
+                                // 全局缓存数据设置
+                                _this.cacheData(project, module, metricName, labelValList)
+                              })
+                              resolve(metricArr)
+                            } else {
+                              resolve([])
                             }
                           })
-                        }else {//已经加载过了
-                          resolve([]);
+                        } else { // 已经加载过了
+                          resolve([])
                         }
                       }
                     })
                   }
-                });
+                })
               }
-
-            }, 1000);
+            }, 1000)
           }
           setTimeout(() => {
-            _this.cascaderStyle();
-          }, 100);
+            _this.cascaderStyle()
+          }, 100)
         }
       },
-      labelValueProps:{ multiple: true },
-    };
+      labelValueProps: { multiple: true }
+    }
   },
   methods: {
     // 删除该选项,第一步,传递要删除的参数
-    deleteTarget() {
-      //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
-      this.$emit('on-delete-target', this.pointer);
+    deleteTarget () {
+      // alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
+      this.$emit('on-delete-target', this.pointer)
     },
     // 第二步,on-delete-target回调，保存数据
-    subSave() {
-      this.convertLabelValueCascadeVal();
-      //alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
-      bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo;
-      //alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
-      this.$emit('sub-save-ok');
+    subSave () {
+      this.convertLabelValueCascadeVal()
+      // alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
+      bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo
+      // alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
+      this.$emit('sub-save-ok')
     },
     // 第三步,将数据重新赋值,sub-save-ok回调
-    setSubdata(index) {
-      //('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-      //console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
-      this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
-      //console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
-      //console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
-      if(this.elementInfo.type==='expert'){
-        //alert('metric第三步，expert');
+    setSubdata (index) {
+      // ('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+      // console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
+      this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer]
+      // console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
+      // console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
+      if (this.elementInfo.type === 'expert') {
+        // alert('metric第三步，expert');
         // 当该项expression为空时，重置一下
         if (!this.elementInfo.expression && this.$refs.metricExpression) {
-          this.$refs.metricExpression.reset();
+          this.$refs.metricExpression.reset()
         }
-        this.clickTabelShow(2,'expert');
-      }else {
-       // alert('metric第三步，normal');
+        this.clickTabelShow(2, 'expert')
+      } else {
+        // alert('metric第三步，normal');
         // 当该项metric为空时，重置一下
         if (!this.elementInfo.metric && this.$refs.metricSelect) {
-          this.$refs.metricSelect.reset();
+          this.$refs.metricSelect.reset()
         }
-        this.setLabelValueCascader();
-        this.clickTabelShow(1,'normal');
+        this.setLabelValueCascader()
+        this.clickTabelShow(1, 'normal')
       }
     },
-    clearSelectedTagList(){
-      this.elementInfo.selectedTagList.forEach((selectItem)=>{
-        selectItem.value = [];//清空值，再进行赋值
-      });
+    clearSelectedTagList () {
+      this.elementInfo.selectedTagList.forEach((selectItem) => {
+        selectItem.value = []// 清空值，再进行赋值
+      })
     },
-    convertLabelValueCascadeVal(){
-      //把级联选择label及value，转换为selectedTagList里的value
-      this.clearSelectedTagList();
-      this.labelValueCascaderVal.forEach((item)=>{//[label,value]
-        let casLabel = item[0];
-        let casValue = item[1];
-        this.elementInfo.selectedTagList.forEach((selectItem)=>{
-          let selectLabel = selectItem.name;
-          let selectValue = selectItem.value;
-          if(selectLabel===casLabel){
-            if(selectValue.indexOf(casValue)===-1){
-              selectValue.push(casValue);
+    convertLabelValueCascadeVal () {
+      // 把级联选择label及value，转换为selectedTagList里的value
+      this.clearSelectedTagList()
+      this.labelValueCascaderVal.forEach((item) => { // [label,value]
+        const casLabel = item[0]
+        const casValue = item[1]
+        this.elementInfo.selectedTagList.forEach((selectItem) => {
+          const selectLabel = selectItem.name
+          const selectValue = selectItem.value
+          if (selectLabel === casLabel) {
+            if (selectValue.indexOf(casValue) === -1) {
+              selectValue.push(casValue)
             }
           }
-        });
-      });
+        })
+      })
     },
-    setSingleStat(){
-      this.hasLegend = false;
-      this.isSingleStat = true;
+    setSingleStat () {
+      this.hasLegend = false
+      this.isSingleStat = true
     },
-    setNotSingleStat(){
-      this.hasLegend = true;
-      this.isSingleStat = false;
+    setNotSingleStat () {
+      this.hasLegend = true
+      this.isSingleStat = false
     },
     // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
-    saveTarget(pointer,optType) {
+    saveTarget (pointer, optType) {
       if (this.pointer === pointer) {
         this.$refs.elementInfo.validate((valid) => {
-          if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
-            if(this.elementInfo.expression){
+          if (valid) { // 根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
+            if (this.elementInfo.expression) {
               // this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig,'');
-              //只取消两端空格，中间空格保留
-              this.elementInfo.expression = this.elementInfo.expression.trim();
+              // 只取消两端空格，中间空格保留
+              this.elementInfo.expression = this.elementInfo.expression.trim()
             }
-            if(this.elementInfo.type==='normal' && this.elementInfo.metric instanceof Array){
-              this.elementInfo.metric = this.elementInfo.metric[2];
+            if (this.elementInfo.type === 'normal' && this.elementInfo.metric instanceof Array) {
+              this.elementInfo.metric = this.elementInfo.metric[2]
             }
-            this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里
-            this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
+            this.convertLabelValueCascadeVal()// 将label，value级联选择的值，转换为selectTagList里
+            this.$emit('on-add-target-success', this.elementInfo, pointer, optType)
           }
-        });
+        })
       }
     },
-    setLableValueFromCache(project,module){
-      let projectItem = this.metricAllData.get(project);
-      if(projectItem){
-        let moduleItem = projectItem.find(item => item.name === module);
-        if(moduleItem){
-          this.metricLabelValInfo = moduleItem.metricMap;
+    setLableValueFromCache (project, module) {
+      const projectItem = this.metricAllData.get(project)
+      if (projectItem) {
+        const moduleItem = projectItem.find(item => item.name === module)
+        if (moduleItem) {
+          this.metricLabelValInfo = moduleItem.metricMap
         }
       }
     },
-    cacheData(project,module,metricName,labelValList){
-      let projectItem = this.metricAllData.get(project);
-      if(projectItem){
-        let moduleItem = projectItem.find(item => item.name === module);
-        if(moduleItem){
-          let metricAllMap = moduleItem.metricMap;
-          if(metricAllMap.has(metricName)){
-            let existMetricLabelList =  metricAllMap.get(metricName);
-            labelValList.forEach((labelItem,index)=>{
-              const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
-              if(existTagItem){//label已添加
-                labelItem.list.forEach((valueItem,valIndex)=>{
-                  if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
-                    existTagItem.list.push(valueItem);
+    cacheData (project, module, metricName, labelValList) {
+      const projectItem = this.metricAllData.get(project)
+      if (projectItem) {
+        const moduleItem = projectItem.find(item => item.name === module)
+        if (moduleItem) {
+          const metricAllMap = moduleItem.metricMap
+          if (metricAllMap.has(metricName)) {
+            const existMetricLabelList = metricAllMap.get(metricName)
+            labelValList.forEach((labelItem, index) => {
+              const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name)
+              if (existTagItem) { // label已添加
+                labelItem.list.forEach((valueItem, valIndex) => {
+                  if (existTagItem.list.indexOf(valueItem) === -1) { // value未添加
+                    existTagItem.list.push(valueItem)
                   }
                 })
-              }else {//label未添加
-                existMetricLabelList.push(labelItem);
+              } else { // label未添加
+                existMetricLabelList.push(labelItem)
               }
             })
-          }else {
-            moduleItem.metricMap.set(metricName,labelValList);
+          } else {
+            moduleItem.metricMap.set(metricName, labelValList)
           }
         }
       }
     },
-    setLabelDivHeight(count){
+    setLabelDivHeight (count) {
       /*
         if (count === 0) {
           const chartBox = document.getElementById('scrollDiv' + this.pointer);
@@ -719,7 +718,7 @@ export default {
       return metricArr;
     },
     */
-    //动态加载第三级选项metric及label
+    // 动态加载第三级选项metric及label
     /*
     handleItemChange(val) {
       if(val && val.length===2) {//点击二级菜单，才进行查询
@@ -800,405 +799,405 @@ export default {
       }
     },
     */
-    cascaderStyle(){
-      let cascaderElem = document.querySelectorAll('.dashboard-metric-dropdown>.el-cascader-panel>.el-cascader-menu');
-      if(cascaderElem[0]){
-        cascaderElem[0].style.minWidth = '80px';
+    cascaderStyle () {
+      const cascaderElem = document.querySelectorAll('.dashboard-metric-dropdown>.el-cascader-panel>.el-cascader-menu')
+      if (cascaderElem[0]) {
+        cascaderElem[0].style.minWidth = '80px'
       }
-      if(cascaderElem[1]){
-        cascaderElem[1].style.minWidth = '80px';
+      if (cascaderElem[1]) {
+        cascaderElem[1].style.minWidth = '80px'
       }
-      if(cascaderElem[2]){
-        cascaderElem[2].style.minWidth = '360px';
+      if (cascaderElem[2]) {
+        cascaderElem[2].style.minWidth = '360px'
       }
     },
-    setLabelValueCascader(){
-      this.labelValueCascaderOptions = [];
-      this.labelValueCascaderVal = [];
-      this.elementInfo.selectedTagList.forEach((item)=>{
-        let valList = item.list;
+    setLabelValueCascader () {
+      this.labelValueCascaderOptions = []
+      this.labelValueCascaderVal = []
+      this.elementInfo.selectedTagList.forEach((item) => {
+        const valList = item.list
         const labelOption = {
-          value:item.name,
-          label:item.name,
-          children:[]
-        };
-        if(valList && valList.length>0){
-          valList.forEach((valuItem)=>{
-            let disabled = false;
-            if(item.name==='project' || item.name==='module'){
-              disabled = true;
+          value: item.name,
+          label: item.name,
+          children: []
+        }
+        if (valList && valList.length > 0) {
+          valList.forEach((valuItem) => {
+            let disabled = false
+            if (item.name === 'project' || item.name === 'module') {
+              disabled = true
             }
             const valOption = {
-              value:valuItem,
-              label:valuItem,
-              disabled: disabled,
-            };
-            labelOption.children.push(valOption);
-          });
+              value: valuItem,
+              label: valuItem,
+              disabled: disabled
+            }
+            labelOption.children.push(valOption)
+          })
         }
-        this.labelValueCascaderOptions.push(labelOption);
+        this.labelValueCascaderOptions.push(labelOption)
 
-        if(item.value.length>0){
-          item.value.forEach((valueItem)=>{
-            let labelVal = [];
-            labelVal.push(item.name);
-            labelVal.push(valueItem);
-            this.labelValueCascaderVal.push(labelVal);
-          });
+        if (item.value.length > 0) {
+          item.value.forEach((valueItem) => {
+            const labelVal = []
+            labelVal.push(item.name)
+            labelVal.push(valueItem)
+            this.labelValueCascaderVal.push(labelVal)
+          })
         }
-      });
+      })
     },
-    changeTag(){
-      this.$emit('on-change-condition');
+    changeTag () {
+      this.$emit('on-change-condition')
     },
-    changeExpression(v){
-      this.$emit('on-change-condition');
+    changeExpression (v) {
+      this.$emit('on-change-condition')
     },
     // 选择metric
-    selectMetric() {
-      if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
-        this.getSuggestTags(this.elementInfo.metric);
-        this.setLabelValueCascader();
-        this.elementInfo.metric = this.elementInfo.metric[2];
+    selectMetric () {
+      if (this.elementInfo.metric) { // 选择了metric，则设置tagList，否则设置为空
+        this.getSuggestTags(this.elementInfo.metric)
+        this.setLabelValueCascader()
+        this.elementInfo.metric = this.elementInfo.metric[2]
       } else {
-        this.elementInfo.tagList = [];
-        this.setLabelDivHeight(0);
+        this.elementInfo.tagList = []
+        this.setLabelDivHeight(0)
       }
       this.$nextTick(() => {
         setTimeout(() => {
-          this.$refs.scrollbar.update();
-        }, 100);
-      });
-      this.changeTag();
+          this.$refs.scrollbar.update()
+        }, 100)
+      })
+      this.changeTag()
     },
-    setLabelValue(tagListTmp,project,module){
+    setLabelValue (tagListTmp, project, module) {
       tagListTmp.forEach((item) => {
-        if(item.name==='project'){
-          if(item.value.indexOf(project)===-1){
-            item.value.push(project);
+        if (item.name === 'project') {
+          if (item.value.indexOf(project) === -1) {
+            item.value.push(project)
           }
-        }else if(item.name==='module'){
-          if(item.value.indexOf(module)===-1) {
-            item.value.push(module);
+        } else if (item.name === 'module') {
+          if (item.value.indexOf(module) === -1) {
+            item.value.push(module)
           }
         }
-      });
+      })
 
       this.labelSort.forEach((sortItem) => {
-        let itemIndex = -1;
-        tagListTmp.forEach((item,i) => {
-          if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'],
-            this.elementInfo.selectedTagList.push(item);
-            itemIndex = i;
+        let itemIndex = -1
+        tagListTmp.forEach((item, i) => {
+          if (sortItem === item.name) { // labelSort:['project','module','endpoint','datacenter','asset'],
+            this.elementInfo.selectedTagList.push(item)
+            itemIndex = i
           }
-        });
-        if(itemIndex!==-1){
-          tagListTmp.splice(itemIndex,1);
+        })
+        if (itemIndex !== -1) {
+          tagListTmp.splice(itemIndex, 1)
         }
-      });
-      tagListTmp.forEach((item,i) => {
-        this.elementInfo.selectedTagList.push(item);
-      });
+      })
+      tagListTmp.forEach((item, i) => {
+        this.elementInfo.selectedTagList.push(item)
+      })
 
-      let tagNum = this.elementInfo.selectedTagList.length;
+      const tagNum = this.elementInfo.selectedTagList.length
       this.$nextTick(() => {
-        this.setLabelDivHeight(tagNum);
-      });
+        this.setLabelDivHeight(tagNum)
+      })
     },
     // 获取tags列表
-    getSuggestTags(metricArr) {
-      let metric = metricArr[2];
-      let proTmp = metricArr[0];
-      let project = proTmp.substring(0, proTmp.length - 4);
-      let module = metricArr[1];
-      this.elementInfo.selectedTagList = [];
-      if(this.metricLabelValInfo.has(metric)){
-        let tagListTmp = [];
-        tagListTmp = [...this.metricLabelValInfo.get(metric)];
-        tagListTmp.forEach((selectItem)=>{
-          selectItem.value = [];//清空值，再进行赋值
-        });
-        this.setLabelValue(tagListTmp,project,module);
-      }else {
-        let projectItem = this.metricAllData.get(project);
-        if(projectItem) {
-          let moduleItem = projectItem.find(item => item.name === module);
+    getSuggestTags (metricArr) {
+      const metric = metricArr[2]
+      const proTmp = metricArr[0]
+      const project = proTmp.substring(0, proTmp.length - 4)
+      const module = metricArr[1]
+      this.elementInfo.selectedTagList = []
+      if (this.metricLabelValInfo.has(metric)) {
+        let tagListTmp = []
+        tagListTmp = [...this.metricLabelValInfo.get(metric)]
+        tagListTmp.forEach((selectItem) => {
+          selectItem.value = []// 清空值，再进行赋值
+        })
+        this.setLabelValue(tagListTmp, project, module)
+      } else {
+        const projectItem = this.metricAllData.get(project)
+        if (projectItem) {
+          const moduleItem = projectItem.find(item => item.name === module)
           if (moduleItem) {
-            let metricAllMap = moduleItem.metricMap;
+            const metricAllMap = moduleItem.metricMap
             if (metricAllMap.has(metric)) {
-              let tagListTmp = metricAllMap.get(metric);
-              this.setLabelValue(tagListTmp,project,module);
+              const tagListTmp = metricAllMap.get(metric)
+              this.setLabelValue(tagListTmp, project, module)
             }
           }
         }
 
-        //this.elementInfo.selectedTagList = [];
-        //this.$nextTick(() => {
-          //this.setLabelDivHeight(0);
-        //});
+        // this.elementInfo.selectedTagList = [];
+        // this.$nextTick(() => {
+        // this.setLabelDivHeight(0);
+        // });
       }
     },
-    getStyles(width) {
-      return `width: ${width}px;`;
+    getStyles (width) {
+      return `width: ${width}px;`
     },
-    filterMethod(value, option) {
-      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
+    filterMethod (value, option) {
+      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
     },
-    getItemValue(labArr,itemName){
-      let itemVal = '';
+    getItemValue (labArr, itemName) {
+      let itemVal = ''
       labArr.forEach((item, index) => {
-        let labNameTmp = item.substring(0,item.indexOf('='));//project   module   dc
-        if(labNameTmp===itemName){
-          let labVal = item.substring(item.indexOf('=')+1,item.length);
-          if(labVal.indexOf('~')!=-1){
-            labVal = labVal.substring(2,labVal.length-1);
-            let valArr = labVal.split('|');
-            itemVal = valArr[0];
-          }else {
-            labVal = labVal.substring(1,labVal.length-1);
-            itemVal = labVal;
+        const labNameTmp = item.substring(0, item.indexOf('='))// project   module   dc
+        if (labNameTmp === itemName) {
+          let labVal = item.substring(item.indexOf('=') + 1, item.length)
+          if (labVal.indexOf('~') != -1) {
+            labVal = labVal.substring(2, labVal.length - 1)
+            const valArr = labVal.split('|')
+            itemVal = valArr[0]
+          } else {
+            labVal = labVal.substring(1, labVal.length - 1)
+            itemVal = labVal
           }
         }
-      });
-      return itemVal;
+      })
+      return itemVal
     },
 
-    getMetricLabelValue(metric,othersParams){
-      let labArr = othersParams.split(',');
-      let projectVal = this.getItemValue(labArr,'project');
-      let projectCascaderVal = projectVal+'_par';
-      let moduleVal = this.getItemValue(labArr,'module');
-      this.elementInfo.metric = [projectCascaderVal,moduleVal,metric];
-      //先判断缓存中是否已经存在数据，无则再从后台获取
-      let metricLabelValMap = new Map();
-      let projectItem = this.metricAllData.get(projectVal);
-      if(projectItem){
-        let moduleItem = projectItem.find(item => item.name === moduleVal);
-        if(moduleItem){
-          metricLabelValMap = moduleItem.metricMap;
+    getMetricLabelValue (metric, othersParams) {
+      const labArr = othersParams.split(',')
+      const projectVal = this.getItemValue(labArr, 'project')
+      const projectCascaderVal = projectVal + '_par'
+      const moduleVal = this.getItemValue(labArr, 'module')
+      this.elementInfo.metric = [projectCascaderVal, moduleVal, metric]
+      // 先判断缓存中是否已经存在数据，无则再从后台获取
+      let metricLabelValMap = new Map()
+      const projectItem = this.metricAllData.get(projectVal)
+      if (projectItem) {
+        const moduleItem = projectItem.find(item => item.name === moduleVal)
+        if (moduleItem) {
+          metricLabelValMap = moduleItem.metricMap
         }
       }
-      if(metricLabelValMap.size>0){
-        //设置labelValue列表
-        this.metricLabelValInfo = metricLabelValMap;
-        //设置3级级联metric选择的metric
-        let metricArr = [];
-        metricLabelValMap.forEach((item,index)=>{
+      if (metricLabelValMap.size > 0) {
+        // 设置labelValue列表
+        this.metricLabelValInfo = metricLabelValMap
+        // 设置3级级联metric选择的metric
+        const metricArr = []
+        metricLabelValMap.forEach((item, index) => {
           const childOption = {
             value: index,
             label: index,
-            leaf:true,
-          };
-          metricArr.push(childOption);
-        });
-        this.metricCascaderList.map((item, index) => {
-          if (item.value === projectCascaderVal) {//选择的project
-            item.children.map((innerItem, innerIndex) => {
-              if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载
-                this.$set(innerItem, 'children', metricArr);
+            leaf: true
+          }
+          metricArr.push(childOption)
+        })
+        this.metricCascaderList.forEach((item, index) => {
+          if (item.value === projectCascaderVal) { // 选择的project
+            item.children.forEach((innerItem, innerIndex) => {
+              if (innerItem.value === moduleVal && innerItem.children.length === 0) { // 不重复加载
+                this.$set(innerItem, 'children', metricArr)
               }
             })
           }
-        });
+        })
 
-        this.elementInfo.selectedTagList = [];
-        if(this.metricLabelValInfo.has(metric)){
-          let tagListTmp = [];
-          tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
-          tagListTmp.forEach((selectItem)=>{
-            selectItem.value = [];//清空值，再进行赋值
-          });
-          //设置选择的值
-          let labArr = othersParams.split(',');
+        this.elementInfo.selectedTagList = []
+        if (this.metricLabelValInfo.has(metric)) {
+          let tagListTmp = []
+          tagListTmp = [...this.metricLabelValInfo.get(metric)]// [...this.metricList],
+          tagListTmp.forEach((selectItem) => {
+            selectItem.value = []// 清空值，再进行赋值
+          })
+          // 设置选择的值
+          const labArr = othersParams.split(',')
           tagListTmp.forEach((tagItem) => {
-            let labelName = tagItem.name;
-            labArr.forEach((item, index) => {//b=~'1|2|3'
-              let labNameTmp = item.substring(0,item.indexOf('='));//project   module   dc
-              if(labNameTmp===labelName){
-                let labVal = item.substring(item.indexOf('=')+1,item.length);
-                if(labVal.indexOf('~')!=-1){
-                  labVal = labVal.substring(2,labVal.length-1);
-                  let valArr = labVal.split('|');
+            const labelName = tagItem.name
+            labArr.forEach((item, index) => { // b=~'1|2|3'
+              const labNameTmp = item.substring(0, item.indexOf('='))// project   module   dc
+              if (labNameTmp === labelName) {
+                let labVal = item.substring(item.indexOf('=') + 1, item.length)
+                if (labVal.indexOf('~') != -1) {
+                  labVal = labVal.substring(2, labVal.length - 1)
+                  const valArr = labVal.split('|')
                   valArr.forEach((labItem, labIndex) => {
-                    if(tagItem.value.indexOf(labItem)===-1){
-                      tagItem.value.push(labItem);
+                    if (tagItem.value.indexOf(labItem) === -1) {
+                      tagItem.value.push(labItem)
                     }
-                  });
-                }else {
-                  labVal = labVal.substring(1,labVal.length-1);
-                  if(tagItem.value.indexOf(labVal)===-1){
-                    tagItem.value.push(labVal);
+                  })
+                } else {
+                  labVal = labVal.substring(1, labVal.length - 1)
+                  if (tagItem.value.indexOf(labVal) === -1) {
+                    tagItem.value.push(labVal)
                   }
                 }
               }
-            });
-          });
-          //排序label顺序
-          this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
-          this.setLabelValueCascader();
+            })
+          })
+          // 排序label顺序
+          this.sortLabel(tagListTmp, this.elementInfo.selectedTagList)
+          this.setLabelValueCascader()
         }
-      }else {
-        let match = '{project="'+projectVal+'",module="'+moduleVal+'"}';
-        this.$get('/prom/api/v1/series?match[]='+match).then(res => {
+      } else {
+        const match = '{project="' + projectVal + '",module="' + moduleVal + '"}'
+        this.$get('/prom/api/v1/series?match[]=' + match).then(res => {
           if (res.status === 'success') {
-            let metricArr = [];
-            let metricArrTmp = [];
+            const metricArr = []
+            const metricArrTmp = []
             res.data.forEach((tag, i) => {
-              let metricName = tag.__name__;
-              if(metricArrTmp.indexOf(metricName)===-1){
+              const metricName = tag.__name__
+              if (metricArrTmp.indexOf(metricName) === -1) {
                 const childOption = {
-                  value: metricName,//+"_par",
+                  value: metricName, // +"_par",
                   label: metricName,
-                  leaf:true,
-                };
-                metricArrTmp.push(metricName);
-                metricArr.push(childOption);
+                  leaf: true
+                }
+                metricArrTmp.push(metricName)
+                metricArr.push(childOption)
               }
-              this.metricCascaderList.map((item, index) => {
-                if (item.value === projectCascaderVal) {//选择的project
-                  item.children.map((innerItem, innerIndex) => {
-                    if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载
-                      this.$set(innerItem, 'children', metricArr);
+              this.metricCascaderList.forEach((item, index) => {
+                if (item.value === projectCascaderVal) { // 选择的project
+                  item.children.forEach((innerItem, innerIndex) => {
+                    if (innerItem.value === moduleVal && innerItem.children.length === 0) { // 不重复加载
+                      this.$set(innerItem, 'children', metricArr)
                     }
                   })
                 }
-              });
+              })
 
-              const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
-              let labelValList = [];
+              const tagsArr = Object.keys(tag)// ["__name__","asset","idc","instance","job","module","project"]
+              const labelValList = []
 
               tagsArr.forEach((tagName) => {
                 if (tagName !== '__name__') {
                   const tagObj = {
                     name: tagName,
-                    list:[],
-                    value:[]//最终选择的值
-                  };
-                  let tagValue = tag[tagName];
-                  const tagItem = labelValList.find(item => item.name === tagName);
-                  if(tagItem){//metric对应的label已添加
-                    if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加
-                      tagItem.list .push(tagValue);
+                    list: [],
+                    value: []// 最终选择的值
+                  }
+                  const tagValue = tag[tagName]
+                  const tagItem = labelValList.find(item => item.name === tagName)
+                  if (tagItem) { // metric对应的label已添加
+                    if (tagItem.list.indexOf(tagValue) === -1) { // label对于value是否添加，没有添加，则添加
+                      tagItem.list.push(tagValue)
                     }
-                  }else {//metric对于的label未添加
-                    tagObj.list.push(tagValue);
-                    labelValList.push(tagObj);
+                  } else { // metric对于的label未添加
+                    tagObj.list.push(tagValue)
+                    labelValList.push(tagObj)
                   }
                 }
-              });
-              if(this.metricLabelValInfo.has(metricName)){
-                let existMetricLabelList =  this.metricLabelValInfo.get(metricName);
-                labelValList.forEach((labelItem,index)=>{
-                  const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
-                  if(existTagItem){//label已添加
-                    labelItem.list.forEach((valueItem,valIndex)=>{
-                      if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
-                        existTagItem.list.push(valueItem);
+              })
+              if (this.metricLabelValInfo.has(metricName)) {
+                const existMetricLabelList = this.metricLabelValInfo.get(metricName)
+                labelValList.forEach((labelItem, index) => {
+                  const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name)
+                  if (existTagItem) { // label已添加
+                    labelItem.list.forEach((valueItem, valIndex) => {
+                      if (existTagItem.list.indexOf(valueItem) === -1) { // value未添加
+                        existTagItem.list.push(valueItem)
                       }
                     })
-                  }else {//label未添加
-                    existMetricLabelList.push(labelItem);
+                  } else { // label未添加
+                    existMetricLabelList.push(labelItem)
                   }
                 })
-              }else {
-                this.metricLabelValInfo.set(metricName,labelValList);
+              } else {
+                this.metricLabelValInfo.set(metricName, labelValList)
               }
-              //缓存数据
-              this.cacheData(projectVal,moduleVal,metricName,labelValList);
-            });
+              // 缓存数据
+              this.cacheData(projectVal, moduleVal, metricName, labelValList)
+            })
 
-            this.elementInfo.selectedTagList = [];
-            if(this.metricLabelValInfo.has(metric)){
-              let tagListTmp = [];
-              tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
-              tagListTmp.forEach((selectItem)=>{
-                selectItem.value = [];//清空值，再进行赋值
-              });
-              //设置选择的值
-              let labArr = othersParams.split(',');
+            this.elementInfo.selectedTagList = []
+            if (this.metricLabelValInfo.has(metric)) {
+              let tagListTmp = []
+              tagListTmp = [...this.metricLabelValInfo.get(metric)]// [...this.metricList],
+              tagListTmp.forEach((selectItem) => {
+                selectItem.value = []// 清空值，再进行赋值
+              })
+              // 设置选择的值
+              const labArr = othersParams.split(',')
               tagListTmp.forEach((tagItem) => {
-                let labelName = tagItem.name;
-                labArr.forEach((item, index) => {//b=~'1|2|3'
-                  let labNameTmp = item.substring(0,item.indexOf('='));//project   module   dc
-                  if(labNameTmp===labelName){
-                    let labVal = item.substring(item.indexOf('=')+1,item.length);
-                    if(labVal.indexOf('~')!=-1){
-                      labVal = labVal.substring(2,labVal.length-1);
-                      let valArr = labVal.split('|');
+                const labelName = tagItem.name
+                labArr.forEach((item, index) => { // b=~'1|2|3'
+                  const labNameTmp = item.substring(0, item.indexOf('='))// project   module   dc
+                  if (labNameTmp === labelName) {
+                    let labVal = item.substring(item.indexOf('=') + 1, item.length)
+                    if (labVal.indexOf('~') != -1) {
+                      labVal = labVal.substring(2, labVal.length - 1)
+                      const valArr = labVal.split('|')
                       valArr.forEach((labItem, labIndex) => {
-                        if(tagItem.value.indexOf(labItem)===-1){
-                          tagItem.value.push(labItem);
+                        if (tagItem.value.indexOf(labItem) === -1) {
+                          tagItem.value.push(labItem)
                         }
-                      });
-                    }else {
-                      labVal = labVal.substring(1,labVal.length-1);
-                      if(tagItem.value.indexOf(labVal)===-1){
-                        tagItem.value.push(labVal);
+                      })
+                    } else {
+                      labVal = labVal.substring(1, labVal.length - 1)
+                      if (tagItem.value.indexOf(labVal) === -1) {
+                        tagItem.value.push(labVal)
                       }
                     }
                   }
-                });
-              });
-              //排序label顺序
-              this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
-              this.setLabelValueCascader();
-              //let tagNum = this.elementInfo.selectedTagList.length;
-              //this.$nextTick(() => {
-                //this.setLabelDivHeight(tagNum);
-              //});
-            }else{
+                })
+              })
+              // 排序label顺序
+              this.sortLabel(tagListTmp, this.elementInfo.selectedTagList)
+              this.setLabelValueCascader()
+              // let tagNum = this.elementInfo.selectedTagList.length;
+              // this.$nextTick(() => {
+              // this.setLabelDivHeight(tagNum);
+              // });
+            } else {
               this.$nextTick(() => {
-                this.elementInfo.selectedTagList = [];
-                //this.setLabelDivHeight(0);
-              });
+                this.elementInfo.selectedTagList = []
+                // this.setLabelDivHeight(0);
+              })
             }
           }
-        });
+        })
       }
     },
-    sortLabel(tagListTmp,rltList){
+    sortLabel (tagListTmp, rltList) {
       this.labelSort.forEach((sortItem) => {
-        let itemIndex = -1;
-        tagListTmp.forEach((item,i) => {
-          if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'],
-            //this.elementInfo.selectedTagList.push(item);
-            rltList.push(item);
-            itemIndex = i;
+        let itemIndex = -1
+        tagListTmp.forEach((item, i) => {
+          if (sortItem === item.name) { // labelSort:['project','module','endpoint','datacenter','asset'],
+            // this.elementInfo.selectedTagList.push(item);
+            rltList.push(item)
+            itemIndex = i
           }
-        });
-        if(itemIndex!==-1){
-          tagListTmp.splice(itemIndex,1);
+        })
+        if (itemIndex !== -1) {
+          tagListTmp.splice(itemIndex, 1)
         }
-      });
-      tagListTmp.forEach((item,i) => {
-        //this.elementInfo.selectedTagList.push(item);
-        rltList.push(item);
-      });
+      })
+      tagListTmp.forEach((item, i) => {
+        // this.elementInfo.selectedTagList.push(item);
+        rltList.push(item)
+      })
     },
 
     // 编辑已有图表状态时，先填充数据
-    setMdata(data,statistics) {
-      this.setDataFlag = true;
-      this.target = Object.assign({}, data);
+    setMdata (data, statistics) {
+      this.setDataFlag = true
+      this.target = Object.assign({}, data)
 
-      this.elementInfo.statistics = statistics;
-      if(this.target.type==='expert'){
-        this.tableShow = 2;
-        this.elementInfo.type = this.target.type;
-        this.elementInfo.expression = this.target.expression;
-        this.elementInfo.legend=this.target.legend;
-      }else {
-        this.tableShow = 1;
-        this.elementInfo.type = this.target.type;
-        //解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
-        var expression = this.target.expression;
-        //alert('expression=='+expression);
-        if(expression.indexOf('{')>-1){
-          this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
-        }else {
-          this.elementInfo.metric = expression;
+      this.elementInfo.statistics = statistics
+      if (this.target.type === 'expert') {
+        this.tableShow = 2
+        this.elementInfo.type = this.target.type
+        this.elementInfo.expression = this.target.expression
+        this.elementInfo.legend = this.target.legend
+      } else {
+        this.tableShow = 1
+        this.elementInfo.type = this.target.type
+        // 解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
+        const expression = this.target.expression
+        // alert('expression=='+expression);
+        if (expression.indexOf('{') > -1) {
+          this.elementInfo.metric = expression.substring(0, expression.indexOf('{'))
+        } else {
+          this.elementInfo.metric = expression
         }
-        //设置metric显示的值
+        // 设置metric显示的值
         /*
         if (this.$refs.metricSelect) {
           let cascaderDiv = document.querySelector('#cascader'+this.pointer);
@@ -1208,15 +1207,15 @@ export default {
               cascaderInput.firstElementChild.value = this.elementInfo.metric;
             }
           }
-        }*/
+        } */
 
-        this.elementInfo.legend=this.target.legend;
-        let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-        this.getMetricLabelValue(this.elementInfo.metric,labelValList);//获得metric及对应label及value
+        this.elementInfo.legend = this.target.legend
+        const labelValList = expression.substring(expression.indexOf('{') + 1, expression.indexOf('}'))
+        this.getMetricLabelValue(this.elementInfo.metric, labelValList)// 获得metric及对应label及value
       }
       setTimeout(() => {
-        this.$refs.scrollbar.update();
-      }, 1000);
+        this.$refs.scrollbar.update()
+      }, 1000)
     },
 
     /*
@@ -1272,128 +1271,129 @@ export default {
    },
    */
 
-    clearHistory() {
-      this.elementInfo.metric = '';
-      this.setDataFlag = false;
+    clearHistory () {
+      this.elementInfo.metric = ''
+      this.setDataFlag = false
       if (this.$refs.elementInfo) {
-        this.$refs.elementInfo.resetFields();//???
+        this.$refs.elementInfo.resetFields()// ???
       }
       if (this.$refs.metricSelect) {
-        this.$refs.metricSelect.reset();
+        this.$refs.metricSelect.reset()
       }
-      this.elementInfo.tagList = [];
+      this.elementInfo.tagList = []
     },
     // 获取文本宽度
-    getWidth(str) {
-      const sensor = document.createElement('pre');
-      sensor.innerHTML = str;
-      sensor.style.display = 'inline-block';
-      sensor.style.width = 'auto';
-      sensor.style.visibility = 'hidden';
-      sensor.style.height = 0;
-      sensor.style.position = 'relative';
-      sensor.style['z-index'] = -10;
-      document.body.appendChild(sensor);
-      const width = sensor.offsetWidth;
-      document.body.removeChild(sensor);
-      const widthL = width > 180 ? width : 180;
-      return widthL;
+    getWidth (str) {
+      const sensor = document.createElement('pre')
+      sensor.innerHTML = str
+      sensor.style.display = 'inline-block'
+      sensor.style.width = 'auto'
+      sensor.style.visibility = 'hidden'
+      sensor.style.height = 0
+      sensor.style.position = 'relative'
+      sensor.style['z-index'] = -10
+      document.body.appendChild(sensor)
+      const width = sensor.offsetWidth
+      document.body.removeChild(sensor)
+      const widthL = width > 180 ? width : 180
+      return widthL
     },
     // 将tag添加到相应框内
-    proTags(data) {
-      const dou = data.indexOf(',');
+    proTags (data) {
+      const dou = data.indexOf(',')
       // 只有一组tag
       if (dou === -1) {
-        const set = data.split('=');
-        const tagValueArr = set[1].indexOf('|') > -1 ? set[1].split('|') : [set[1]];
-        const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === set[0]);
+        const set = data.split('=')
+        const tagValueArr = set[1].indexOf('|') > -1 ? set[1].split('|') : [set[1]]
+        const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === set[0])
         if (tagIndex > -1) {
-          this.elementInfo.tagList[tagIndex].value = tagValueArr;
+          this.elementInfo.tagList[tagIndex].value = tagValueArr
         }
       } else { // 多组tag
-        const mid = data.split(','); // ['key=v1','key=v2|v3',....]
+        const mid = data.split(',') // ['key=v1','key=v2|v3',....]
         mid.forEach((item) => {
-          const setInner = item.split('=');
-          const innerValueArr = setInner[1].indexOf('|') > -1 ?
-          setInner[1].split('|') : [setInner[1]];
-          const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === setInner[0]);
+          const setInner = item.split('=')
+          const innerValueArr = setInner[1].indexOf('|') > -1
+            ? setInner[1].split('|')
+            : [setInner[1]]
+          const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === setInner[0])
           if (tagIndex > -1) {
-            this.elementInfo.tagList[tagIndex].value = innerValueArr;
+            this.elementInfo.tagList[tagIndex].value = innerValueArr
           }
-        });
+        })
       }
     },
-    //metricLabelName单击事件
-    getLidata(index, item) {
-      if(!item.isSelect){
-        this.vendorCount = index;
-        //查询metricLabel名称对应的LabelValue
-        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+item.name).then(response => {
+    // metricLabelName单击事件
+    getLidata (index, item) {
+      if (!item.isSelect) {
+        this.vendorCount = index
+        // 查询metricLabel名称对应的LabelValue
+        this.$get('metric/labelVal?metric=' + this.elementInfo.metric + '&name=' + item.name).then(response => {
           const tagObj = {
-            name: item.name,//选中的metricLabel名称
-            list:[],//metricLabel名称对应的LabelValue
-            value:[]//最终选择的值
-          };
-          //this.elementInfo.selectedTagList = [];
+            name: item.name, // 选中的metricLabel名称
+            list: [], // metricLabel名称对应的LabelValue
+            value: []// 最终选择的值
+          }
+          // this.elementInfo.selectedTagList = [];
           if (response.code === 200) {
-            if(response.data.list){
+            if (response.data.list) {
               response.data.list.forEach((item) => {
                 tagObj.list.push(item.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }else{
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
+            } else {
               response.data.forEach((item) => {
                 tagObj.list.push(item.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
             }
-          }else {
-            this.elementInfo.selectedTagList.push(tagObj);
+          } else {
+            this.elementInfo.selectedTagList.push(tagObj)
           }
-        });
-        item.isSelect = true;
+        })
+        item.isSelect = true
       }
     },
-    //删除MetricLabel时，需要将tagList中的isSelect设置为false，并删除elementInfo.selectedTagList里对应的元素
-    deleteMetricLabel(item,index) {
+    // 删除MetricLabel时，需要将tagList中的isSelect设置为false，并删除elementInfo.selectedTagList里对应的元素
+    deleteMetricLabel (item, index) {
       this.elementInfo.tagList.forEach((tagItem) => {
-        if(tagItem.name===item.name){
-          tagItem.isSelect = false;
+        if (tagItem.name === item.name) {
+          tagItem.isSelect = false
         }
-      });
-      this.elementInfo.selectedTagList.splice(index,1);
-      //this.$emit('on-delete-target', this.pointer);
+      })
+      this.elementInfo.selectedTagList.splice(index, 1)
+      // this.$emit('on-delete-target', this.pointer);
     },
-    clickTabelShow(val,type){
-      this.tableShow = val;
-      this.elementInfo.type = type;
-      if(val===2){
-        this.elementInfo.metric='';
+    clickTabelShow (val, type) {
+      this.tableShow = val
+      this.elementInfo.type = type
+      if (val === 2) {
+        this.elementInfo.metric = ''
       }
-      if(val===1){
-        this.elementInfo.expression='';
+      if (val === 1) {
+        this.elementInfo.expression = ''
       }
     },
-    resetZIndex,
+    resetZIndex
   },
   computed: {
-    metricShowList() {
+    metricShowList () {
       const obj = {
         arr: [...this.metricList],
-        text: '',
-      };
-      return obj;
-    },
+        text: ''
+      }
+      return obj
+    }
   },
-  mounted() {
+  mounted () {
     bus.$on('clear_history', () => {
-      this.clearHistory();
-    });
-  },
-  beforeDestroy() {
-    bus.$off('clear_history');
+      this.clearHistory()
+    })
   },
+  beforeDestroy () {
+    bus.$off('clear_history')
+  }
 
-};
+}
 
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 1067f76a2..07a5d19a4 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -120,7 +120,7 @@
      width: 100%;
      padding:0 10px;
    } */
-   
+
   .el-form-item__content{
     padding-left:15px;
     margin:0 auto;
@@ -138,7 +138,7 @@
     width: calc(100% - 15px);/*calc(100% - 45px);*/
     margin:0 auto;
 
-  } 
+  }
 
 </style>
 <style>
@@ -175,33 +175,33 @@
         {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
       <el-col :span="8" style="text-align: right;">
-        <div class="nz-tab-item-box"  v-show="tableShow == 1">
-          <div @click="" class="nz-tab-style nz-tab-style-light">
+        <div v-show="tableShow === 1" class="nz-tab-item-box">
+          <div class="nz-tab-style nz-tab-style-light">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
           <div  @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right ">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </div>
         </div>
-        <div @click="clickTabelShow(1,'normal')" class="nz-tab-item-box"  v-show="tableShow == 2">
-           <div  class="nz-tab-style">
+        <div v-show="tableShow === 2" class="nz-tab-item-box"  @click="clickTabelShow(1,'normal')">
+           <div class="nz-tab-style">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </div>
 
-          <div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right  ">
+          <div class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </div>
         </div>
       </el-col>
     </el-row>
-    <el-row  v-if="tableShow == 2">
+    <el-row  v-if="tableShow === 2">
       <el-col :span="24" class="mt1">
         <el-form-item prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
           <el-input size="mini" rows="7" @input="changeExpression" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
         </el-form-item>
       </el-col>
     </el-row>
-    <el-row  v-if="tableShow == 1">
+    <el-row  v-if="tableShow === 1">
       <el-col :span="24" >
         <el-form-item style="margin-bottom:0px;" label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
               <!--
@@ -221,7 +221,7 @@
       </el-col>
     </el-row>
     <!--create chart组件显示框  -->
-    <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+    <el-row v-if="elementInfo.metric && tableShow === 1"><!--v-if="elementInfo.tagList.length > 0"-->
       <!--
       <el-col :span="9" style="margin-bottom: 20px;">
         <div class="li-list-part">
@@ -268,7 +268,7 @@
   </el-form>
 </template>
 <script>
-import bus from '../../../libs/bus';
+import bus from '../../../libs/bus'
 
 export default {
   name: 'chartTag',
@@ -276,383 +276,382 @@ export default {
     // 序号
     pointer: {
       type: Number,
-      default: 0,
+      default: 0
     },
     // metric列表
     metricList: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
-    metricCascaderList:Array,
+    metricCascaderList: Array,
     countTotal: {
       type: Number,
-      default: 1,
-    },
+      default: 1
+    }
   },
   components: {
-    //multipleSelect
+    // multipleSelect
   },
-  data() {
+  data () {
     return {
       tableShow: 1, // 1.normal; 2.expert
       // 指标信息
       elementInfo: {
-        metric: '',//当前选中的metric名称
-        type:'normal',
+        metric: '', // 当前选中的metric名称
+        type: 'normal',
         // name: '',
         tagList: [], // 标签列表
-        selectedTagList:[],//已选中的标签列表
-        expression:''
+        selectedTagList: [], // 已选中的标签列表
+        expression: ''
       },
       metricLoading: false,
       keydataList: [], // tag标签键列表
       target: null, // 获取到的数据
       tagSet: null, // 根据你metric获取的tags信息
       setDataFlag: false, // true时为获取数据,编辑状态
-      vendorCount: '',
-    };
+      vendorCount: ''
+    }
   },
-  watch: {},
-  beforeDestroy() {},
   methods: {
     // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
-    saveTarget() {
+    saveTarget () {
       this.$refs.elementInfo.validate((valid) => {
         if (valid) {
-          if(this.elementInfo.expression){
-            this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig,'');
+          if (this.elementInfo.expression) {
+            this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig, '')
           }
-          this.$emit('on-add-target-success', this.elementInfo);
+          this.$emit('on-add-target-success', this.elementInfo)
         }
-      });
+      })
     },
     // 删除该选项,第一步,传递要删除的参数
-    deleteTarget() {
-      //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
-      this.$emit('on-delete-target', this.pointer);
+    deleteTarget () {
+      // alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
+      this.$emit('on-delete-target', this.pointer)
     },
     // 第二步,on-delete-target回调，保存数据
-    subSave() {
-      //alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
-      bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo;
-      //alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
-      this.$emit('sub-save-ok');
+    subSave () {
+      // alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
+      bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo
+      // alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
+      this.$emit('sub-save-ok')
     },
     // 第三步,将数据重新赋值,sub-save-ok回调
-    setSubdata(index) {
-      //alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-      //alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
-      this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
-      //alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
-      //alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
-      if(this.elementInfo.type==='expert'){
-        //alert('metric第三步，expert');
+    setSubdata (index) {
+      // alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+      // alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
+      this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer]
+      // alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
+      // alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
+      if (this.elementInfo.type === 'expert') {
+        // alert('metric第三步，expert');
         // 当该项expression为空时，重置一下
         if (!this.elementInfo.expression && this.$refs.metricExpression) {
-          this.$refs.metricExpression.reset();
+          this.$refs.metricExpression.reset()
         }
-        this.clickTabelShow(2,'expert');
-      }else {
-       // alert('metric第三步，normal');
+        this.clickTabelShow(2, 'expert')
+      } else {
+        // alert('metric第三步，normal');
         // 当该项metric为空时，重置一下
         if (!this.elementInfo.metric && this.$refs.metricSelect) {
-          //this.$refs.metricSelect.reset();
+          // this.$refs.metricSelect.reset();
         }
-        this.clickTabelShow(1,'normal');
+        this.clickTabelShow(1, 'normal')
       }
     },
 
-    setLabelDivHeight(count){
-      if(count===0){
-        const chartBox = document.getElementById('scrollDiv');
-        chartBox.style.height = `${10}px`;
-      }else if(count<6){//小于6个需要调整容器的高度
-        const chartBox = document.getElementById('scrollDiv');
-        chartBox.style.height = `${(280 / 6) * count+10}px`;
-      }else {
-        const chartBox = document.getElementById('scrollDiv');
-        chartBox.style.height = `${280}px`;
+    setLabelDivHeight (count) {
+      if (count === 0) {
+        const chartBox = document.getElementById('scrollDiv')
+        chartBox.style.height = `${10}px`
+      } else if (count < 6) { // 小于6个需要调整容器的高度
+        const chartBox = document.getElementById('scrollDiv')
+        chartBox.style.height = `${(280 / 6) * count + 10}px`
+      } else {
+        const chartBox = document.getElementById('scrollDiv')
+        chartBox.style.height = `${280}px`
       }
     },
 
     // 选择metric
-    selectMetric() {
-      if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
-        this.elementInfo.metric = this.elementInfo.metric[1];
-        this.getSuggestTags(this.elementInfo.metric);
+    selectMetric () {
+      if (this.elementInfo.metric) { // 选择了metric，则设置tagList，否则设置为空
+        this.elementInfo.metric = this.elementInfo.metric[1]
+        this.getSuggestTags(this.elementInfo.metric)
       } else {
-        this.elementInfo.selectedTagList = [];
-        this.setLabelDivHeight(0);
+        this.elementInfo.selectedTagList = []
+        this.setLabelDivHeight(0)
       }
-      this.$emit('on-change-condition');
+      this.$emit('on-change-condition')
     },
     // 获取tags列表
-    getSuggestTags(metric) {
-      //this.$get('metric/labelName?metric='+metric).then(response => {
-      this.$get('/metric/series?match[]='+metric).then(response => {
-        this.elementInfo.selectedTagList = [];
-        //this.elementInfo.tagList = [];
+    getSuggestTags (metric) {
+      // this.$get('metric/labelName?metric='+metric).then(response => {
+      this.$get('/metric/series?match[]=' + metric).then(response => {
+        this.elementInfo.selectedTagList = []
+        // this.elementInfo.tagList = [];
         if (response.code === 200) {
-          const objList = Object.entries(response.data);
+          const objList = Object.entries(response.data)
           objList.forEach((item) => {
             const tagObj = {
               name: item[0],
-              list:item[1],
-              value:[]//最终选择的值
-            };
-            this.elementInfo.selectedTagList.push(tagObj);
-          });
-          let tagNum = this.elementInfo.selectedTagList.length;
-          this.setLabelDivHeight(tagNum);
-        }else {
-          this.elementInfo.selectedTagList = [];
-          this.setLabelDivHeight(0);
+              list: item[1],
+              value: []// 最终选择的值
+            }
+            this.elementInfo.selectedTagList.push(tagObj)
+          })
+          const tagNum = this.elementInfo.selectedTagList.length
+          this.setLabelDivHeight(tagNum)
+        } else {
+          this.elementInfo.selectedTagList = []
+          this.setLabelDivHeight(0)
         }
-      });
+      })
     },
-    getStyles(width) {
-      return `width: ${width}px;`;
+    getStyles (width) {
+      return `width: ${width}px;`
     },
-    filterMethod(value, option) {
-      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
+    filterMethod (value, option) {
+      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
     },
 
-    changeTag(){
-      this.$emit('on-change-condition');
+    changeTag () {
+      this.$emit('on-change-condition')
     },
-    changeExpression(v){
-      this.$emit('on-change-condition');
+    changeExpression (v) {
+      this.$emit('on-change-condition')
     },
     // 编辑已有图表状态时，先填充数据
-    setMdata(data) {
-      //alert('metricSetData'+JSON.stringify(data));
-      this.setDataFlag = true;
-      this.target = Object.assign({}, data);
-      //this.pointer =
-      if(this.target.type==='expert'){
-        this.tableShow = 2;
-        this.elementInfo.type = this.target.type;
-        this.elementInfo.expression = this.target.expression;
-      }else {
-        this.tableShow = 1;
-        this.elementInfo.type = this.target.type;
-        //解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
-        var expression = this.target.expression;
-        //alert('expression=='+expression);
-        if(expression.indexOf('{')>-1){
-          this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
-        }else {
-          this.elementInfo.metric = expression;
+    setMdata (data) {
+      // alert('metricSetData'+JSON.stringify(data));
+      this.setDataFlag = true
+      this.target = Object.assign({}, data)
+      // this.pointer =
+      if (this.target.type === 'expert') {
+        this.tableShow = 2
+        this.elementInfo.type = this.target.type
+        this.elementInfo.expression = this.target.expression
+      } else {
+        this.tableShow = 1
+        this.elementInfo.type = this.target.type
+        // 解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
+        const expression = this.target.expression
+        // alert('expression=='+expression);
+        if (expression.indexOf('{') > -1) {
+          this.elementInfo.metric = expression.substring(0, expression.indexOf('{'))
+        } else {
+          this.elementInfo.metric = expression
         }
 
-        //alert(this.elementInfo.metric);
-        //this.selectMetric(); // 获取tag
-        this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
-          this.elementInfo.selectedTagList = [];
-          this.elementInfo.tagList = [];
+        // alert(this.elementInfo.metric);
+        // this.selectMetric(); // 获取tag
+        this.$get('metric/labelName?metric=' + this.elementInfo.metric).then(response => {
+          this.elementInfo.selectedTagList = []
+          this.elementInfo.tagList = []
           if (response.code === 200) {
-              //this.elementInfo.tagList = response.data.list;
-              if(response.data.list){
-                response.data.list.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
-                });
-              }else {
-                response.data.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
-                });
-              }
-            if(expression.indexOf('{')>-1){
-              let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-              this.stringToTags(labValArrStr);
+            // this.elementInfo.tagList = response.data.list;
+            if (response.data.list) {
+              response.data.list.forEach((item) => {
+                const tagObj = {
+                  name: item.name,
+                  isSelect: false// 当前元素是否被选中，默认都未选中
+                }
+                this.elementInfo.tagList.push(tagObj)
+              })
+            } else {
+              response.data.forEach((item) => {
+                const tagObj = {
+                  name: item.name,
+                  isSelect: false// 当前元素是否被选中，默认都未选中
+                }
+                this.elementInfo.tagList.push(tagObj)
+              })
             }
-          }else {
-            this.elementInfo.tagList = [];
+            if (expression.indexOf('{') > -1) {
+              const labValArrStr = expression.substring(expression.indexOf('{') + 1, expression.indexOf('}'))
+              this.stringToTags(labValArrStr)
+            }
+          } else {
+            this.elementInfo.tagList = []
           }
-        });
+        })
       }
     },
-    //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
-    stringToTags(str) {
-      let labArr = str.split(',');
-      labArr.forEach((item, index) => {//b=~'1|2|3'
-        let labName = item.substring(0,item.indexOf('='));
-        this.elementInfo.tagList.every((tagItem,index) => {
-          if(tagItem.name===labName){
-            tagItem.isSelect = true;
-            return false;
-          }else {
-            return true;
+    // 字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
+    stringToTags (str) {
+      const labArr = str.split(',')
+      labArr.forEach((item, index) => { // b=~'1|2|3'
+        const labName = item.substring(0, item.indexOf('='))
+        this.elementInfo.tagList.every((tagItem, index) => {
+          if (tagItem.name === labName) {
+            tagItem.isSelect = true
+            return false
+          } else {
+            return true
           }
-        });
+        })
 
-        //查询metricLabel名称对应的LabelValue
-        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
+        // 查询metricLabel名称对应的LabelValue
+        this.$get('metric/labelVal?metric=' + this.elementInfo.metric + '&name=' + labName).then(response => {
           const tagObj = {
-            name:labName,//选中的metricLabel名称
-            list:[],//metricLabel名称对应的LabelValue
-            value:[]//最终选择的值
-          };
-          let labVal = item.substring(item.indexOf('=')+1,item.length);
-          if(labVal.indexOf('~')!=-1){
-            labVal = labVal.substring(2,labVal.length-1);
-            let valArr = labVal.split('|');
+            name: labName, // 选中的metricLabel名称
+            list: [], // metricLabel名称对应的LabelValue
+            value: []// 最终选择的值
+          }
+          let labVal = item.substring(item.indexOf('=') + 1, item.length)
+          if (labVal.indexOf('~') != -1) {
+            labVal = labVal.substring(2, labVal.length - 1)
+            const valArr = labVal.split('|')
             valArr.forEach((labItem, labIndex) => {
-              tagObj.value.push(labItem);
-            });
-          }else {
-            labVal = labVal.substring(1,labVal.length-1);
-            tagObj.value.push(labVal);
+              tagObj.value.push(labItem)
+            })
+          } else {
+            labVal = labVal.substring(1, labVal.length - 1)
+            tagObj.value.push(labVal)
           }
           if (response.code === 200) {
-            if(response.data.list){
+            if (response.data.list) {
               response.data.list.forEach((resItem) => {
                 tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }else{
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
+            } else {
               response.data.forEach((resItem) => {
                 tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
             }
-          }else {
-            this.elementInfo.selectedTagList.push(tagObj);
+          } else {
+            this.elementInfo.selectedTagList.push(tagObj)
           }
-        });
-      });
+        })
+      })
     },
 
-    clearHistory() {
-      this.elementInfo.metric = '';
-      this.setDataFlag = false;
+    clearHistory () {
+      this.elementInfo.metric = ''
+      this.setDataFlag = false
       if (this.$refs.elementInfo) {
-        this.$refs.elementInfo.resetFields();//???
+        this.$refs.elementInfo.resetFields()// ???
       }
       if (this.$refs.metricSelect) {
-        //this.$refs.metricSelect.reset();
+        // this.$refs.metricSelect.reset();
       }
-      this.elementInfo.tagList = [];
+      this.elementInfo.tagList = []
     },
     // 获取文本宽度
-    getWidth(str) {
-      const sensor = document.createElement('pre');
-      sensor.innerHTML = str;
-      sensor.style.display = 'inline-block';
-      sensor.style.width = 'auto';
-      sensor.style.visibility = 'hidden';
-      sensor.style.height = 0;
-      sensor.style.position = 'relative';
-      sensor.style['z-index'] = -10;
-      document.body.appendChild(sensor);
-      const width = sensor.offsetWidth;
-      document.body.removeChild(sensor);
-      const widthL = width > 180 ? width : 180;
-      return widthL;
+    getWidth (str) {
+      const sensor = document.createElement('pre')
+      sensor.innerHTML = str
+      sensor.style.display = 'inline-block'
+      sensor.style.width = 'auto'
+      sensor.style.visibility = 'hidden'
+      sensor.style.height = 0
+      sensor.style.position = 'relative'
+      sensor.style['z-index'] = -10
+      document.body.appendChild(sensor)
+      const width = sensor.offsetWidth
+      document.body.removeChild(sensor)
+      const widthL = width > 180 ? width : 180
+      return widthL
     },
     // 将tag添加到相应框内
-    proTags(data) {
-      const dou = data.indexOf(',');
+    proTags (data) {
+      const dou = data.indexOf(',')
       // 只有一组tag
       if (dou === -1) {
-        const set = data.split('=');
-        const tagValueArr = set[1].indexOf('|') > -1 ? set[1].split('|') : [set[1]];
-        const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === set[0]);
+        const set = data.split('=')
+        const tagValueArr = set[1].indexOf('|') > -1 ? set[1].split('|') : [set[1]]
+        const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === set[0])
         if (tagIndex > -1) {
-          this.elementInfo.tagList[tagIndex].value = tagValueArr;
+          this.elementInfo.tagList[tagIndex].value = tagValueArr
         }
       } else { // 多组tag
-        const mid = data.split(','); // ['key=v1','key=v2|v3',....]
+        const mid = data.split(',') // ['key=v1','key=v2|v3',....]
         mid.forEach((item) => {
-          const setInner = item.split('=');
-          const innerValueArr = setInner[1].indexOf('|') > -1 ?
-          setInner[1].split('|') : [setInner[1]];
-          const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === setInner[0]);
+          const setInner = item.split('=')
+          const innerValueArr = setInner[1].indexOf('|') > -1
+            ? setInner[1].split('|')
+            : [setInner[1]]
+          const tagIndex = this.elementInfo.tagList.findIndex(t => t.name === setInner[0])
           if (tagIndex > -1) {
-            this.elementInfo.tagList[tagIndex].value = innerValueArr;
+            this.elementInfo.tagList[tagIndex].value = innerValueArr
           }
-        });
+        })
       }
     },
-    //metricLabelName单击事件
-    getLidata(index, item) {
-      if(!item.isSelect){
-        this.vendorCount = index;
-        //查询metricLabel名称对应的LabelValue
-        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+item.name).then(response => {
+    // metricLabelName单击事件
+    getLidata (index, item) {
+      if (!item.isSelect) {
+        this.vendorCount = index
+        // 查询metricLabel名称对应的LabelValue
+        this.$get('metric/labelVal?metric=' + this.elementInfo.metric + '&name=' + item.name).then(response => {
           const tagObj = {
-            name: item.name,//选中的metricLabel名称
-            list:[],//metricLabel名称对应的LabelValue
-            value:[]//最终选择的值
-          };
-          //this.elementInfo.selectedTagList = [];
+            name: item.name, // 选中的metricLabel名称
+            list: [], // metricLabel名称对应的LabelValue
+            value: []// 最终选择的值
+          }
+          // this.elementInfo.selectedTagList = [];
           if (response.code === 200) {
-            if(response.data.list){
+            if (response.data.list) {
               response.data.list.forEach((item) => {
                 tagObj.list.push(item.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }else{
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
+            } else {
               response.data.forEach((item) => {
                 tagObj.list.push(item.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
+              })
+              this.elementInfo.selectedTagList.push(tagObj)
             }
-          }else {
-            this.elementInfo.selectedTagList.push(tagObj);
+          } else {
+            this.elementInfo.selectedTagList.push(tagObj)
           }
-        });
-        item.isSelect = true;
+        })
+        item.isSelect = true
       }
-      this.$emit('on-change-condition');
+      this.$emit('on-change-condition')
     },
-    //删除MetricLabel时，需要将tagList中的isSelect设置为false，并删除elementInfo.selectedTagList里对应的元素
-    deleteMetricLabel(item,index) {
+    // 删除MetricLabel时，需要将tagList中的isSelect设置为false，并删除elementInfo.selectedTagList里对应的元素
+    deleteMetricLabel (item, index) {
       this.elementInfo.tagList.forEach((tagItem) => {
-        if(tagItem.name===item.name){
-          tagItem.isSelect = false;
+        if (tagItem.name === item.name) {
+          tagItem.isSelect = false
         }
-      });
-      this.elementInfo.selectedTagList.splice(index,1);
-      //this.$emit('on-delete-target', this.pointer);
-      this.$emit('on-change-condition');
+      })
+      this.elementInfo.selectedTagList.splice(index, 1)
+      // this.$emit('on-delete-target', this.pointer);
+      this.$emit('on-change-condition')
     },
-    clickTabelShow(val,type){
-      this.tableShow = val;
-      this.elementInfo.type = type;
-      if(val===2){
-        this.elementInfo.metric='';
+    clickTabelShow (val, type) {
+      this.tableShow = val
+      this.elementInfo.type = type
+      if (val === 2) {
+        this.elementInfo.metric = ''
       }
-      if(val===1){
-        this.elementInfo.expression='';
+      if (val === 1) {
+        this.elementInfo.expression = ''
       }
-      this.$emit('on-change-condition');
+      this.$emit('on-change-condition')
     }
   },
   computed: {
-    metricShowList() {
+    metricShowList () {
       const obj = {
         arr: [...this.metricList],
-        text: '',
-      };
-      return obj;
-    },
+        text: ''
+      }
+      return obj
+    }
   },
-  mounted() {
+  mounted () {
     bus.$on('clear_history', () => {
-      this.clearHistory();
-    });
+      this.clearHistory()
+    })
   },
-  beforeDestroy(){
-    bus.$off('clear_history');
+  beforeDestroy () {
+    bus.$off('clear_history')
   }
-};
+}
 
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/editor.vue b/nezha-fronted/src/components/page/dashboard/explore/editor.vue
index b45a0bf2a..14fb5832a 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/editor.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/editor.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="metric-editor" v-clickoutside="clickout" :class="{'metric-editor-rb': styleType == 2}">
-    <div :id="id" class="editor-core" ref="editor" :style="{height: styleType == 2 ? 'auto' : ''}"></div>
+  <div v-clickoutside="clickout" :class="{'metric-editor-rb': styleType === 2}" class="metric-editor">
+    <div :id="id" ref="editor" :style="{height: styleType === 2 ? 'auto' : ''}" class="editor-core"></div>
     <span class="nz-input-append editor-clear" style="display: none" @click="clearContent"><i class="nz-icon nz-icon-circle-close"></i></span>
     <div class="metric-editor-popper" :style="{left:popperPos.left+'px'}" v-show="false">
       <div class="metric-popper-main" v-show="showType">
         <div ref="scroll" style="height: 100%;width:100%; overflow: auto;">
-          <div v-for="(key, index) in orders" >
+          <div v-for="(key, index) in orders" :key="index">
             <div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
-            <div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
+            <div v-for="(item) in showSuggestions[key]" :key="item.insertText" :type="key" :value="item.insertText" class="popper-item" @mouseout="itemOut(item)" @mouseover="itemHover(item)" v-html="item.label" @click.stop="handleItemClick(key,item,$event)"></div>
           </div>
         </div>
       </div>
@@ -21,610 +21,598 @@
 </template>
 
 <script>
-  import 'quill/dist/quill.snow.css'
-  import Quill from 'quill'
-  import suggestions from "./suggestions";
-  export default {
-    name: "editor",
-    props: {
-      value: String,
-      metricList:{type:Array},
-      styleType: Number,
-      historyParam:Object
-    },
-    model:{
-      prop:'value',
-      event:'expression-change'
-    },
-    components:{
+import 'quill/dist/quill.snow.css'
+import Quill from 'quill'
+import suggestions from './suggestions'
+export default {
+  name: 'editor',
+  props: {
+    value: String,
+    metricList: { type: Array },
+    styleType: Number,
+    historyParam: Object
+  },
+  model: {
+    prop: 'value',
+    event: 'expression-change'
+  },
+  components: {
 
-    },
-    data(){
-      return{
-        id:'editor-'+this.guid(),
-        cursorIndex:0,
-        pivotalCursorIndex:0,//用于记录输入特殊符号后当前光标的位置，方便选择后覆盖
-        newExpressionIndex:0,
-        editRange:{start:0,end:0},
-        noStyleSuggestions:{},//存储最原始的item数据
-        orders:['history','operators','functions','metrics','labels','values','range'],
-        showSuggestions:{},//存储显示的item数据，包含mark样式
-        storedSuggestions:[],//存储每个item的dom
-        toggleSelectIndex:-1,
-        content:'',
-        popperPos:{left:'20px'},
-        options: {
-          theme: 'snow',
-          modules: {
-            toolbar: null
-          },
-          placeholder: this.$t('dashboard.metricPreview.inputTip')
+  },
+  data () {
+    return {
+      id: 'editor-' + this.guid(),
+      cursorIndex: 0,
+      pivotalCursorIndex: 0, // 用于记录输入特殊符号后当前光标的位置，方便选择后覆盖
+      newExpressionIndex: 0,
+      editRange: { start: 0, end: 0 },
+      noStyleSuggestions: {}, // 存储最原始的item数据
+      orders: ['history', 'operators', 'functions', 'metrics', 'labels', 'values', 'range'],
+      showSuggestions: {}, // 存储显示的item数据，包含mark样式
+      storedSuggestions: [], // 存储每个item的dom
+      toggleSelectIndex: -1,
+      content: '',
+      popperPos: { left: '20px' },
+      options: {
+        theme: 'snow',
+        modules: {
+          toolbar: null
         },
-        labelValues:{},
-        tempStoreMetric:{},
-        showType:false,
-        showDescription:false,
-        detailItem:{},
-        formatTimer:null,
-        userChangeTimer:null,
-        filterTimer:null,
+        placeholder: this.$t('dashboard.metricPreview.inputTip')
+      },
+      labelValues: {},
+      tempStoreMetric: {},
+      showType: false,
+      showDescription: false,
+      detailItem: {},
+      formatTimer: null,
+      userChangeTimer: null,
+      filterTimer: null
+    }
+  },
+  created () {
+    this.queryMetrics()
+  },
+  methods: {
+    userChange (char, operation, newContent, oldContent) {
+      this.changeSuggestions('type')
+      this.dealSpecilChar(char, operation)
+
+      if (this.pivotalCursorIndex !== 0) {
+        // console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
+        newContent = newContent.substring(this.pivotalCursorIndex, this.cursorIndex)
+      }
+      clearTimeout(this.filterTimer)
+      this.filterTimer = setTimeout(() => {
+        this.filterItems(newContent)
+      }, 200)
+    },
+    dealSpecilChar (char, operation) { // 控制括号的成对添加和删除
+      // console.log('specil char',char)
+      if (/^[\{\(\[\,]$/g.test(char)) {
+        if (operation === 'insert') {
+          if (char === '{' || char === ',') {
+            if (char === '{') {
+              this.addDoubleChar('}')
+            }
+            this.changeSuggestions('label')
+          } else if (char === '(') {
+            this.addDoubleChar(')')
+            this.queryTypeInfos()
+          } else if (char === '[') {
+            this.addDoubleChar(']')
+            this.changeSuggestions('range')
+          }
+        } else {
+          this.delDoubleChar(char)
+        }
+      } else if (/^[(=|!=|=~|!~)\"]/g.test(char)) {
+        if (operation === 'insert') {
+          if (char === '"') {
+            this.addDoubleChar('"')
+          }
+          this.changeSuggestions('values')
+        } else {
+          if (char === '"') {
+            this.delDoubleChar(char)
+          }
+        }
       }
     },
-    created(){
-      this.queryMetrics();
+    addDoubleChar (char) {
+      this.insertTextAtIndex(char, this.cursorIndex)
+      this.quill.setSelection(this.cursorIndex)
     },
-    methods:{
-      userChange:function(char,operation,newContent,oldContent){
-        this.changeSuggestions('type')
-        this.dealSpecilChar(char,operation);
+    delDoubleChar (leftChar) {
+      const char = this.content.charAt(this.cursorIndex)
+      const temp = leftChar + char
 
-        if(this.pivotalCursorIndex!=0){
-          //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
-          newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
-        }
-        clearTimeout(this.filterTimer)
-        this.filterTimer=setTimeout(()=>{
-          this.filterItems(newContent);
-        },200)
-      },
-      dealSpecilChar:function(char,operation){//控制括号的成对添加和删除
-        // console.log('specil char',char)
-        if(/^[\{\(\[\,]$/g.test(char)){
-          if(operation=='insert'){
-            if(char == '{'||char==','){
-              if(char == '{'){
-                this.addDoubleChar('}')
-              }
-              this.changeSuggestions('label')
-            }else if(char == '('){
-              this.addDoubleChar(')')
-              this.queryTypeInfos()
-            }else if(char == '['){
-              this.addDoubleChar(']')
-              this.changeSuggestions('range')
-            }
-          }else{
-            this.delDoubleChar(char);
-          }
-        }else if(/^[(=|!=|=~|!~)\"]/g.test(char)){
-          if(operation=='insert'){
-            if(char == '"'){
-              this.addDoubleChar('"');
-            }
-            this.changeSuggestions('values')
+      if (/(\{\})|(\(\))|(\[\])|(\"\")/.test(temp)) {
+        this.quill.deleteText(this.cursorIndex, 1, 'api')
+      }
+      let tempIndex = this.pivotalCursorIndex
+      let tempChar = this.content.charAt(tempIndex - 1)
 
-          }else{
-            if(char == '"'){
-              this.delDoubleChar(char);
-            }
-          }
-        }
-      },
-      addDoubleChar:function(char){
-        this.insertTextAtIndex(char,this.cursorIndex);
-        this.quill.setSelection(this.cursorIndex)
-      },
-      delDoubleChar:function(leftChar){
-        let char=this.content.charAt(this.cursorIndex);
-        let temp=leftChar+char;
+      // 向前查找，找到边界
+      while (!/[\{\(\[,= ]/.test(tempChar) && tempIndex > 0) {
+        tempIndex--
+        tempChar = this.content.charAt(tempIndex)
+      }
+      // console.log('tempIndex =====',tempIndex)
+      this.pivotalCursorIndex = tempIndex === 0 ? -1 : tempIndex + 1
 
-        if(/(\{\})|(\(\))|(\[\])|(\"\")/.test(temp)){
-          this.quill.deleteText(this.cursorIndex,1,'api');
-        }
-        let tempIndex=this.pivotalCursorIndex;
-        let tempStart,tempChar=this.content.charAt(tempIndex-1);
+      // console.log('after del double char',this.pivotalCursorIndex)
+    },
+    changeSuggestions (type) {
+      if (type === 'label') {
+        this.queryLabels()
+      } else if (type === 'values') {
+        this.queryValues()
+      } else if (type === 'type') {
+        this.packageTypeInfo()
+      } else if (type === 'range') {
+        this.noStyleSuggestions = { range: suggestions.getRateRange() }
+      }
+    },
+    packageTypeInfo () {
+      const functionReg = /[a-zA-Z_]\w*?\(.*?\)/g
+      if (functionReg.test(this.content)) {
+        functionReg.lastIndex = 0
+        const funcMatch = functionReg.exec(this.content)
+        const funcContent = funcMatch[0]
+        const funcReg = /\(.*\)/g
+        const match = funcReg.exec(funcContent)
 
-        //向前查找，找到边界
-        while(!/[\{\(\[,= ]/.test(tempChar)&&tempIndex>0){
-          tempIndex--;
-          tempChar=this.content.charAt(tempIndex);
-        }
-        // console.log('tempIndex =====',tempIndex)
-        this.pivotalCursorIndex=tempIndex==0?-1:tempIndex+1;
+        const funcBody = match[0].substring(1, match[0].length - 1)
 
-        //console.log('after del double char',this.pivotalCursorIndex)
-      },
-      changeSuggestions:function(type){
-        if(type == 'label'){
-          this.queryLabels();
-        }else if(type == 'values'){
-          this.queryValues();
-        }else if(type  == 'type'){
-          this.packageTypeInfo();
-        }else if(type == 'range'){
-          this.noStyleSuggestions={range:suggestions.getRateRange()}
-        }
-      },
-      packageTypeInfo:function(){
-        let functionReg=/[a-zA-Z_]\w*?\(.*?\)/g
-        if(functionReg.test(this.content)){
-          functionReg.lastIndex=0;
-          let funcMatch=functionReg.exec(this.content);
-          let funcContent=funcMatch[0]
-          let funcReg=/\(.*\)/g
-          let match=funcReg.exec(funcContent);
+        this.matchMetric(funcBody, funcMatch.index + match.index)
+      } else {
+        this.matchMetric()
+      }
+    },
+    formatContent () {
+      const punctuationReg = /[\{\}\(\)\[\]]/g
+      this.formatText(punctuationReg, { color: '#ff7941' })
 
-          let funcBody=match[0].substring(1,match[0].length-1);
+      const labelKeyReg = /[a-z_]\w*(?=\s*(=|!=|=~|!~))/g
+      this.formatText(labelKeyReg, { color: '#3274d9' })
 
-          this.matchMetric(funcBody,funcMatch.index+match.index)
-        }else{
-          this.matchMetric()
-        }
-      },
-      formatContent:function(){
+      const labelValueReg = /"(?:\\.|[^\\"])*"/g
+      this.formatText(labelValueReg, { color: '#3eb15b' })
 
-        let punctuationReg=/[\{\}\(\)\[\]]/g;
-        this.formatText(punctuationReg,{'color':'#ff7941'})
+      const metricReg = /([A-Za-z:][\w:]*)\b(?![\(\]{=!",])/g
+      this.formatText(metricReg, { color: '#52545c' })
 
-        let labelKeyReg=/[a-z_]\w*(?=\s*(=|!=|=~|!~))/g
-        this.formatText(labelKeyReg,{'color':'#3274d9'})
-
-        let labelValueReg= /"(?:\\.|[^\\"])*"/g
-        this.formatText(labelValueReg,{'color':'#3eb15b'})
-
-        let metricReg= /([A-Za-z:][\w:]*)\b(?![\(\]{=!",])/g;
-        this.formatText(metricReg,{'color':'#52545c'})
-
-        // let rangeReg=/(?<=\[)\b\d+[smdwy]\b(?=\])/ig
-        // this.formatText(rangeReg,{'color':'#9954bb'})
-        let rangeReg=/\[\b(\d+[smdwy])\b\]/ig
-        if(rangeReg.test(this.content)){
-          let matchs=this.globalMatch(rangeReg,this.content);
-          //console.log('matchs',matchs)
-          matchs.forEach(item=>{
-            this.quill.formatText(item.index+1,item[1].length,{'color':'#9954bb'},'silent')
-          })
-        }
-      },
-      formatText:function(pattern,style){
-        if(pattern.test(this.content)){
-          let matchs=this.globalMatch(pattern,this.content);
-          matchs.forEach(item=>{
-            this.quill.formatText(item.index,item[0].length,style,'silent')
-          })
-        }
-      },
-      matchMetric:function(){
-        let metricReg=/[a-zA-Z_]\w*?\b\{.*?\}/g
-        if(metricReg.test(this.content)){
-          let match=this.globalMatch(metricReg,this.content)
-          if(match&&match.length>0){
-            let isInnerExpression=false;
-            let editExpression=null;
-            match.forEach(item=>{
-              let content=item[0];
-              let index=item.index
-              let length=content.length;
-              if(index < this.cursorIndex && index+length>this.cursorIndex){ //判断是否在一个完整子表达式中
-                isInnerExpression=true;
-                editExpression=item;
-              }
-            })
-            //console.log('match',match,'isInnerExpress',isInnerExpression)
-            if(isInnerExpression&&editExpression){
-              let expression=editExpression[0];
-              let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
-              if(labelValuesReg.test(expression)){
-                let match=labelValuesReg.exec(expression);
-                if(editExpression.index+match.index>this.cursorIndex){
-                  this.queryTypeInfos();
-                }
-              }
-            }else{
-              let tempIndex=this.cursorIndex;
-              let tempStart,tempChar=this.content.charAt(tempIndex-1);
-
-              //向前查找，找到边界
-              while(tempIndex>0&&/[a-zA-Z_]/.test(tempChar)){
-                tempIndex--;
-                tempChar=this.content.charAt(tempIndex);
-              }
-
-              this.queryTypeInfos();
-            }
-
-          }
-        }else{
-          //console.log('mo match metric')
-          this.queryTypeInfos();
-        }
-      },
-      queryTypeInfos:function(){
-        this.noStyleSuggestions={};
-        if(this.historyParam&&this.historyParam.useHistory){
-          let username=sessionStorage.getItem("nz-username");
-          let historyJson=localStorage.getItem(this.historyParam.key);
-          if(historyJson && historyJson != 'undefined' && historyJson != ''){
-            let historyObj=JSON.parse(historyJson);
-            let history = historyObj[username];
-            history=history.filter(item=>{
-              return item.time + item.expire >= new Date().getTime();
-            })
-            this.$set(this.noStyleSuggestions,'history',history.slice(0,10));
-          }
-        }
-        this.$set(this.noStyleSuggestions,'metrics',this.tempStoreMetric)
-        // this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
-        this.$set(this.noStyleSuggestions,'functions',suggestions.getFunctions())
-      },
-      queryValues:function(){
-        let labelValuesReg=/\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
-        if(labelValuesReg.test(this.content)){
-          let match=labelValuesReg.exec(this.content);
-          let labelValues=match[0]
-          let index=match.index;
-          if(labelValues){
-            let tempCounter=this.cursorIndex;
-            let equalIndex=-1;
-            let boundaryIndex=-1;
-            while(tempCounter>=index){
-              let char=this.content.charAt(tempCounter);
-              if(/(=|!)/.test(char)){
-                equalIndex=tempCounter;
-              }
-
-              if(char==','||char == '{'){
-                boundaryIndex=tempCounter+1;
-                break;
-              }
-
-              tempCounter--;
-            }
-            let label=this.content.substring(boundaryIndex,equalIndex);
-            //console.log('label',this.content.substring(boundaryIndex,equalIndex))
-
-            let values=this.labelValues.get(label);
-
-            this.noStyleSuggestions={values:values}
-          }
-        }
-      },
-      queryLabels:function(){
-        let labels=/\{.*\}/;
-        if(labels.test(this.content)){
-          let match=labels.exec(this.content);
-          let index=match.index;
-          let matchContent=match[0];
-          if(this.cursorIndex<index || this.cursorIndex>index + matchContent.length){
-            return ;
-          }
-        }else{
-          this.queryTypeInfos();
-          return;
-        }
-
-        let metricReg=/([a-zA-Z_]\w*)\b\{.*?\}/g;
-        let editMetricExpression='';
-        let match=this.globalMatch(metricReg,this.content);
-        if(match&&match.length>0){
-          for(let i=0;i<match.length;i++){
-            let temp=match[i];
-            if(temp.index<this.cursorIndex && temp.index + temp[0].length > this.cursorIndex){
-              editMetricExpression=temp[0]
-              break;
-            }
-          }
-        }
-        //console.log('query metric',editMetricExpression)
-        let metric=/([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0];
-        let timeRange=this.getDefaultTimeRange();
-        this.$get('/prom/api/v1/series?match[]={__name__="'+metric+'"}&start='+timeRange[0]+"&end="+timeRange[1]).then(response=>{
-          if(response.status=='success'){
-            let result=new Map();
-            response.data.forEach(item=>{
-              for(let key in item){
-                let value=item[key];
-                let values=result.get(key)
-                if(values){
-                  values.add(value)
-                }else{
-                  values=new Set();
-                  values.add(value)
-                }
-                result.set(key,values);
-              }
-            })
-            for(let key of result.keys()){
-              let values=result.get(key)
-              values=Array.from(values).map(item=>{
-                return {label:item,insertText:item};
-              })
-              result.set(key,values)
-            }
-
-            this.labelValues=result;
-
-            let labels=Array.from(this.labelValues.keys()).map(item=>{
-              return {label:item,insertText:item}
-            })
-
-            this.noStyleSuggestions={labels:labels}
-            //console.log('change labels',this.showSuggestions)
-          }else{
-            this.noStyleSuggestions={};
-          }
+      // let rangeReg=/(?<=\[)\b\d+[smdwy]\b(?=\])/ig
+      // this.formatText(rangeReg,{'color':'#9954bb'})
+      const rangeReg = /\[\b(\d+[smdwy])\b\]/ig
+      if (rangeReg.test(this.content)) {
+        const matchs = this.globalMatch(rangeReg, this.content)
+        // console.log('matchs',matchs)
+        matchs.forEach(item => {
+          this.quill.formatText(item.index + 1, item[1].length, { color: '#9954bb' }, 'silent')
         })
-      },
-      getDefaultTimeRange:function(){
-        let end=new Date();
-        let start=new Date();
-        start.setHours(new Date().getHours()-1);
-        return[(start.getTime()/1000).toFixed(0),(end.getTime()/1000).toFixed(0)]
-      },
-      handleItemClick:function(type,item,event){
-        //console.log(type,item,event)
-        if(type=='metrics'){
-          this.handleMetricClick(item)
-        }else if(type == 'labels'){
-          this.handleLabelClick(item)
-        }else if(type == 'values'){
-          this.handleValueClick(item);
-        }else if(type == 'operators'){
-          this.handleOperatorClick(item);
-        }else if(type == 'functions'){
-          this.handleFunctionClick(item);
-        }else if(type  == 'range'){
-          this.handleRangeClick(item);
-        }else if(type == 'history'){
-          this.handleHistoryClick(item)
-        }
-      },
-      handleHistoryClick:function(item){
-        this.setContent(item.insertText);
-
-        this.showType=false;
-        this.quill.blur();
-        this.$nextTick(()=>{
-          this.$emit('on-blur');
+      }
+    },
+    formatText (pattern, style) {
+      if (pattern.test(this.content)) {
+        const matchs = this.globalMatch(pattern, this.content)
+        matchs.forEach(item => {
+          this.quill.formatText(item.index, item[0].length, style, 'silent')
         })
-      },
-      handleRangeClick:function(item){
-        this.quill.setSelection(this.pivotalCursorIndex,this.cursorIndex-this.pivotalCursorIndex,'api');
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        this.insertTextAtIndex(item.insertText,this.pivotalCursorIndex)
-        this.showType=false;
-      },
-      handleOperatorClick:function(item){
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        this.$nextTick(()=>{
-          this.insertTextAtIndex(item.insertText,this.pivotalCursorIndex,'user');
-          this.quill.setSelection(this.pivotalCursorIndex+item.insertText.length);
-          this.storeCursor()
-        })
-        this.showType=false;
-      },
-      handleFunctionClick:function(item){
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        this.$nextTick(()=>{
-          this.insertTextAtIndex(item.insertText,this.pivotalCursorIndex,'user');
-          this.quill.setSelection(this.pivotalCursorIndex+item.insertText.length);
-          this.storeCursor()
-        })
-        this.showType=false;
-      },
-      handleMetricClick:function(item){
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        this.$nextTick(()=>{
-          this.insertTextAtIndex(item.insertText,this.pivotalCursorIndex,'user');
-          this.quill.setSelection(this.pivotalCursorIndex+item.insertText.length);
-          this.storeCursor()
-        })
-        this.showType=false;
-      },
-      handleLabelClick:function(item){
-        this.quill.setSelection(this.pivotalCursorIndex,this.cursorIndex-this.pivotalCursorIndex,'api');
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        this.insertTextAtIndex(item.insertText+'',this.pivotalCursorIndex)
-        this.storeCursor().then(()=>{
-           this.insertTextAtIndex('=',null,'user')
-           this.quill.setSelection(this.cursorIndex+1)
-           this.changeSuggestions('value')
-        })
-        this.showType=true;
-      },
-      handleValueClick:function(item){
-        let preChar=this.content.substring(this.pivotalCursorIndex-1,this.pivotalCursorIndex);
-        this.quill.setSelection(this.pivotalCursorIndex,this.cursorIndex-this.pivotalCursorIndex,'api');
-        this.deleteTextInRange(this.pivotalCursorIndex,this.cursorIndex)
-        if(preChar == '='){
-          this.insertTextAtIndex('"'+item.insertText+'"',this.pivotalCursorIndex)
-        }else{
-          this.insertTextAtIndex(item.insertText,this.pivotalCursorIndex)
-        }
-        this.showType=false;
-      },
-      toggleSelect:function(event){//上下键选择
-        if(event.code=='ArrowDown'||event.keyCode==40){
-          if(this.toggleSelectIndex != -1){
-            let oldSuggestion=this.storedSuggestions[this.toggleSelectIndex];
-            oldSuggestion.classList='popper-item'
-          }
-          let suggestion=this.storedSuggestions[this.toggleSelectIndex>=this.storedSuggestions.length-1?this.storedSuggestions.length-1:++this.toggleSelectIndex];
-          let classList=suggestion.classList;
-          suggestion.classList=classList+' toggle-bg'
-          this.moveScroll();
-        }else if(event.code=='ArrowUp'||event.keyCode==38){
-          if(this.toggleSelectIndex >=1){
-            let oldSuggestion=this.storedSuggestions[this.toggleSelectIndex];
-            oldSuggestion.classList='popper-item'
-            let suggestion=this.storedSuggestions[this.toggleSelectIndex<=0?0:--this.toggleSelectIndex];
-            let classList=suggestion.classList;
-            suggestion.classList=classList+' toggle-bg'
-            this.moveScroll();
-          }
-        }
-        let item=this.findItemByToggleIndex();
-        if(item &&item.documentation){
-          this.showDescription=true;
-          this.detailItem=this.deepClone(item);
-        }else{
-          this.showDescription=false;
-          this.detailItem={};
-        }
-      },
-      findItemByToggleIndex:function(){
-        let selectedItem=this.storedSuggestions[this.toggleSelectIndex];
-        if(selectedItem){
-          let type=selectedItem.getAttribute('type');
-          let insertText=selectedItem.getAttribute('value');
-          let keys=Object.keys(this.noStyleSuggestions);
-          for(let i=0;i<keys.length;i++){
-            let items=this.noStyleSuggestions[keys[i]];
-            let item=items.find(t=>{
-              return t.insertText == insertText;
-            })
-            if(item){
-              return item;
-              break ;
-            }
-          }
-        }
-        return null;
-      },
-      pickItem:function(){//Tab键 获取选择
-        let selectedItem=this.storedSuggestions[this.toggleSelectIndex];
-        if(selectedItem){
-          let type=selectedItem.getAttribute('type');
-          let insertText=selectedItem.getAttribute('value');
-          if(type == 'metrics'){
-            this.handleMetricClick({insertText:insertText})
-          }else if(type == 'labels'){
-            this.handleLabelClick({insertText:insertText});
-          }else if(type=='values'){
-            this.handleValueClick({insertText:insertText});
-          }else if(type == 'operators'){
-            this.handleOperatorClick({insertText:insertText})
-          }else if(type == 'range'){
-            this.handleRangeClick({insertText:insertText})
-          }else if(type == 'functions'){
-            this.handleFunctionClick({insertText:insertText})
-          }else if(type ==  'history'){
-            this.handleHistoryClick({insertText:insertText})
-          }
-
-        }
-      },
-
-      filterItems:function(input){ //过滤下拉选显示
-        let suggestions=this.deepClone(this.noStyleSuggestions)
-        new Promise((resolve => {
-          let start = new Date().getTime();
-          let result={};
-          this.orders.forEach(key=>{
-            let typeValues=suggestions[key];
-            result[key]=[];
-            typeValues&&typeValues.forEach(item=>{
-              let index=item.insertText.toLowerCase().indexOf(input.toLowerCase());
-              //console.log('index',index,'input',input)
-              if(index != -1){
-                // console.log('item',item.label,'input',input)
-                // item.label=item.label.replace(input,`<mark>${input}</mark>`);
-                let label=item.label;
-                let pre=label.substring(0,index)
-                let middle=label.substring(index,index+input.length)
-                let suf=label.substring(index+input.length,label.length)
-                item.label=`${pre}<mark>${middle}</mark>${suf}`
-                result[key].push(item);
-              }
-            });
-            if(result[key].length<1){
-              delete result[key]
+      }
+    },
+    matchMetric () {
+      const metricReg = /[a-zA-Z_]\w*?\b\{.*?\}/g
+      if (metricReg.test(this.content)) {
+        const match = this.globalMatch(metricReg, this.content)
+        if (match && match.length > 0) {
+          let isInnerExpression = false
+          let editExpression = null
+          match.forEach(item => {
+            const content = item[0]
+            const index = item.index
+            const length = content.length
+            if (index < this.cursorIndex && index + length > this.cursorIndex) { // 判断是否在一个完整子表达式中
+              isInnerExpression = true
+              editExpression = item
             }
           })
-          this.showSuggestions=result;
-          let end = new Date().getTime();
-          resolve();
-        })).then(()=>{
-          if(Object.keys(this.showSuggestions).length>0){
-            this.showType=true;
-          }else{
-            this.showType=false
-          }
-        })
-
-        /*let scroll=this.$refs.scroll.wrap;
-        scroll.scrollTop=0;*/
-      },
-      storeSuggestions:function(){
-          this.$nextTick(()=>{
-            let suggestions=this.$el.querySelectorAll('.popper-item');
-            this.storedSuggestions=[...suggestions];
-            //console.log('storedSuggestions->',suggestions)
-          })
-      },
-      setContent:function(value){
-        this.clearContent();
-        this.quill.setText(value);
-      },
-      clearContent:function(){
-        this.quill.deleteText(0,this.quill.getLength(),'api')
-        this.cursorIndex=0;
-        this.pivotalCursorIndex=0;
-      },
-      insertTextAtIndex:function(content,index,source='api'){
-        this.quill.insertText(index?index:this.cursorIndex,content,source)
-      },
-      deleteTextInRange(from,to){
-       return  this.quill.deleteText(from,to-from,'api')
-      },
-      setCursor:function(offset){
-        this.$nextTick(()=>{
-          if(!this.quill.hasFocus){
-            this.quill.focus();
-          }
-          this.quill.setSelection(this.cursorIndex+offset,this.cursorIndex+offset,'api')
-          this.storeCursor();
-        })
-      },
-      storeCursor:function(char){
-        let $temp=this;
-        return new Promise(function(resolve,reject){
-          $temp.$nextTick(()=>{
-            let range=$temp.quill.getSelection();
-            //console.log('range',range)
-            if(range&&range.length == 0){
-              $temp.cursorIndex=range.index;
-              //console.log('current cursor-->',$temp.cursorIndex)
-
-              if(/^[\{\(\[,= "]$/g.test(char)){
-                $temp.pivotalCursorIndex=$temp.cursorIndex;
-                //console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
+          // console.log('match',match,'isInnerExpress',isInnerExpression)
+          if (isInnerExpression && editExpression) {
+            const expression = editExpression[0]
+            const labelValuesReg = /\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
+            if (labelValuesReg.test(expression)) {
+              const match = labelValuesReg.exec(expression)
+              if (editExpression.index + match.index > this.cursorIndex) {
+                this.queryTypeInfos()
               }
-              resolve();
+            }
+          } else {
+            let tempIndex = this.cursorIndex
+            let tempChar = this.content.charAt(tempIndex - 1)
+
+            // 向前查找，找到边界
+            while (tempIndex > 0 && /[a-zA-Z_]/.test(tempChar)) {
+              tempIndex--
+              tempChar = this.content.charAt(tempIndex)
+            }
+
+            this.queryTypeInfos()
+          }
+        }
+      } else {
+        // console.log('mo match metric')
+        this.queryTypeInfos()
+      }
+    },
+    queryTypeInfos () {
+      this.noStyleSuggestions = {}
+      if (this.historyParam && this.historyParam.useHistory) {
+        const username = sessionStorage.getItem('nz-username')
+        const historyJson = localStorage.getItem(this.historyParam.key)
+        if (historyJson && historyJson !== 'undefined') {
+          const historyObj = JSON.parse(historyJson)
+          let history = historyObj[username]
+          history = history.filter(item => {
+            return item.time + item.expire >= new Date().getTime()
+          })
+          this.$set(this.noStyleSuggestions, 'history', history.slice(0, 10))
+        }
+      }
+      this.$set(this.noStyleSuggestions, 'metrics', this.tempStoreMetric)
+      // this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
+      this.$set(this.noStyleSuggestions, 'functions', suggestions.getFunctions())
+    },
+    queryValues () {
+      const labelValuesReg = /\{((\w*?(=|!=|=~|!~).*?,{0,1})+?)\}/
+      if (labelValuesReg.test(this.content)) {
+        const match = labelValuesReg.exec(this.content)
+        const labelValues = match[0]
+        const index = match.index
+        if (labelValues) {
+          let tempCounter = this.cursorIndex
+          let equalIndex = -1
+          let boundaryIndex = -1
+          while (tempCounter >= index) {
+            const char = this.content.charAt(tempCounter)
+            if (/(=|!)/.test(char)) {
+              equalIndex = tempCounter
+            }
+
+            if (char === ',' || char === '{') {
+              boundaryIndex = tempCounter + 1
+              break
+            }
+
+            tempCounter--
+          }
+          const label = this.content.substring(boundaryIndex, equalIndex)
+          // console.log('label',this.content.substring(boundaryIndex,equalIndex))
+
+          const values = this.labelValues.get(label)
+
+          this.noStyleSuggestions = { values: values }
+        }
+      }
+    },
+    queryLabels () {
+      const labels = /\{.*\}/
+      if (labels.test(this.content)) {
+        const match = labels.exec(this.content)
+        const index = match.index
+        const matchContent = match[0]
+        if (this.cursorIndex < index || this.cursorIndex > index + matchContent.length) {
+          return
+        }
+      } else {
+        this.queryTypeInfos()
+        return
+      }
+
+      const metricReg = /([a-zA-Z_]\w*)\b\{.*?\}/g
+      let editMetricExpression = ''
+      const match = this.globalMatch(metricReg, this.content)
+      if (match && match.length > 0) {
+        for (let i = 0; i < match.length; i++) {
+          const temp = match[i]
+          if (temp.index < this.cursorIndex && temp.index + temp[0].length > this.cursorIndex) {
+            editMetricExpression = temp[0]
+            break
+          }
+        }
+      }
+      // console.log('query metric',editMetricExpression)
+      const metric = /([a-zA-Z_]\w*)\b(?=\{)/.exec(editMetricExpression)[0]
+      const timeRange = this.getDefaultTimeRange()
+      this.$get('/prom/api/v1/series?match[]={__name__="' + metric + '"}&start=' + timeRange[0] + '&end=' + timeRange[1]).then(response => {
+        if (response.status === 'success') {
+          const result = new Map()
+          response.data.forEach(item => {
+            for (const key in item) {
+              const value = item[key]
+              let values = result.get(key)
+              if (values) {
+                values.add(value)
+              } else {
+                values = new Set()
+                values.add(value)
+              }
+              result.set(key, values)
             }
           })
+          for (const key of result.keys()) {
+            let values = result.get(key)
+            values = Array.from(values).map(item => {
+              return { label: item, insertText: item }
+            })
+            result.set(key, values)
+          }
+
+          this.labelValues = result
+
+          const labels = Array.from(this.labelValues.keys()).map(item => {
+            return { label: item, insertText: item }
+          })
+
+          this.noStyleSuggestions = { labels: labels }
+          // console.log('change labels',this.showSuggestions)
+        } else {
+          this.noStyleSuggestions = {}
+        }
+      })
+    },
+    getDefaultTimeRange () {
+      const end = new Date()
+      const start = new Date()
+      start.setHours(new Date().getHours() - 1)
+      return [(start.getTime() / 1000).toFixed(0), (end.getTime() / 1000).toFixed(0)]
+    },
+    handleItemClick (type, item) {
+      // console.log(type,item,event)
+      if (type === 'metrics') {
+        this.handleMetricClick(item)
+      } else if (type === 'labels') {
+        this.handleLabelClick(item)
+      } else if (type === 'values') {
+        this.handleValueClick(item)
+      } else if (type === 'operators') {
+        this.handleOperatorClick(item)
+      } else if (type === 'functions') {
+        this.handleFunctionClick(item)
+      } else if (type === 'range') {
+        this.handleRangeClick(item)
+      } else if (type === 'history') {
+        this.handleHistoryClick(item)
+      }
+    },
+    handleHistoryClick (item) {
+      this.setContent(item.insertText)
+
+      this.showType = false
+      this.quill.blur()
+      this.$nextTick(() => {
+        this.$emit('on-blur')
+      })
+    },
+    handleRangeClick (item) {
+      this.quill.setSelection(this.pivotalCursorIndex, this.cursorIndex - this.pivotalCursorIndex, 'api')
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      this.insertTextAtIndex(item.insertText, this.pivotalCursorIndex)
+      this.showType = false
+    },
+    handleOperatorClick (item) {
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      this.$nextTick(() => {
+        this.insertTextAtIndex(item.insertText, this.pivotalCursorIndex, 'user')
+        this.quill.setSelection(this.pivotalCursorIndex + item.insertText.length)
+        this.storeCursor()
+      })
+      this.showType = false
+    },
+    handleFunctionClick (item) {
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      this.$nextTick(() => {
+        this.insertTextAtIndex(item.insertText, this.pivotalCursorIndex, 'user')
+        this.quill.setSelection(this.pivotalCursorIndex + item.insertText.length)
+        this.storeCursor()
+      })
+      this.showType = false
+    },
+    handleMetricClick (item) {
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      this.$nextTick(() => {
+        this.insertTextAtIndex(item.insertText, this.pivotalCursorIndex, 'user')
+        this.quill.setSelection(this.pivotalCursorIndex + item.insertText.length)
+        this.storeCursor()
+      })
+      this.showType = false
+    },
+    handleLabelClick (item) {
+      this.quill.setSelection(this.pivotalCursorIndex, this.cursorIndex - this.pivotalCursorIndex, 'api')
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      this.insertTextAtIndex(item.insertText + '', this.pivotalCursorIndex)
+      this.storeCursor().then(() => {
+        this.insertTextAtIndex('=', null, 'user')
+        this.quill.setSelection(this.cursorIndex + 1)
+        this.changeSuggestions('value')
+      })
+      this.showType = true
+    },
+    handleValueClick (item) {
+      const preChar = this.content.substring(this.pivotalCursorIndex - 1, this.pivotalCursorIndex)
+      this.quill.setSelection(this.pivotalCursorIndex, this.cursorIndex - this.pivotalCursorIndex, 'api')
+      this.deleteTextInRange(this.pivotalCursorIndex, this.cursorIndex)
+      if (preChar === '=') {
+        this.insertTextAtIndex('"' + item.insertText + '"', this.pivotalCursorIndex)
+      } else {
+        this.insertTextAtIndex(item.insertText, this.pivotalCursorIndex)
+      }
+      this.showType = false
+    },
+    toggleSelect (event) { // 上下键选择
+      if (event.code === 'ArrowDown' || event.keyCode === 40) {
+        if (this.toggleSelectIndex !== -1) {
+          const oldSuggestion = this.storedSuggestions[this.toggleSelectIndex]
+          oldSuggestion.classList = 'popper-item'
+        }
+        const suggestion = this.storedSuggestions[this.toggleSelectIndex >= this.storedSuggestions.length - 1 ? this.storedSuggestions.length - 1 : ++this.toggleSelectIndex]
+        const classList = suggestion.classList
+        suggestion.classList = classList + ' toggle-bg'
+        this.moveScroll()
+      } else if (event.code === 'ArrowUp' || event.keyCode === 38) {
+        if (this.toggleSelectIndex >= 1) {
+          const oldSuggestion = this.storedSuggestions[this.toggleSelectIndex]
+          oldSuggestion.classList = 'popper-item'
+          const suggestion = this.storedSuggestions[this.toggleSelectIndex <= 0 ? 0 : --this.toggleSelectIndex]
+          const classList = suggestion.classList
+          suggestion.classList = classList + ' toggle-bg'
+          this.moveScroll()
+        }
+      }
+      const item = this.findItemByToggleIndex()
+      if (item && item.documentation) {
+        this.showDescription = true
+        this.detailItem = this.deepClone(item)
+      } else {
+        this.showDescription = false
+        this.detailItem = {}
+      }
+    },
+    findItemByToggleIndex () {
+      const selectedItem = this.storedSuggestions[this.toggleSelectIndex]
+      if (selectedItem) {
+        const insertText = selectedItem.getAttribute('value')
+        const keys = Object.keys(this.noStyleSuggestions)
+        for (let i = 0; i < keys.length; i++) {
+          const items = this.noStyleSuggestions[keys[i]]
+          const item = items.find(t => {
+            return t.insertText === insertText
+          })
+          if (item) {
+            return item
+          }
+        }
+      }
+      return null
+    },
+    pickItem () { // Tab键 获取选择
+      const selectedItem = this.storedSuggestions[this.toggleSelectIndex]
+      if (selectedItem) {
+        const type = selectedItem.getAttribute('type')
+        const insertText = selectedItem.getAttribute('value')
+        if (type === 'metrics') {
+          this.handleMetricClick({ insertText: insertText })
+        } else if (type === 'labels') {
+          this.handleLabelClick({ insertText: insertText })
+        } else if (type === 'values') {
+          this.handleValueClick({ insertText: insertText })
+        } else if (type === 'operators') {
+          this.handleOperatorClick({ insertText: insertText })
+        } else if (type === 'range') {
+          this.handleRangeClick({ insertText: insertText })
+        } else if (type === 'functions') {
+          this.handleFunctionClick({ insertText: insertText })
+        } else if (type === 'history') {
+          this.handleHistoryClick({ insertText: insertText })
+        }
+      }
+    },
+
+    filterItems (input) { // 过滤下拉选显示
+      const suggestions = this.deepClone(this.noStyleSuggestions)
+      new Promise(resolve => {
+        const result = {}
+        this.orders.forEach(key => {
+          const typeValues = suggestions[key]
+          result[key] = []
+          typeValues && typeValues.forEach(item => {
+            const index = item.insertText.toLowerCase().indexOf(input.toLowerCase())
+            // console.log('index',index,'input',input)
+            if (index !== -1) {
+              // console.log('item',item.label,'input',input)
+              // item.label=item.label.replace(input,`<mark>${input}</mark>`);
+              const label = item.label
+              const pre = label.substring(0, index)
+              const middle = label.substring(index, index + input.length)
+              const suf = label.substring(index + input.length, label.length)
+              item.label = `${pre}<mark>${middle}</mark>${suf}`
+              result[key].push(item)
+            }
+          })
+          if (result[key].length < 1) {
+            delete result[key]
+          }
         })
-      },
-      moveCursorToEnd:function(){
-        setTimeout(()=>{
-          this.$nextTick(()=>{
-            let offset=this.quill.getLength();
-            this.setCursor(offset)
-          },100)
+        this.showSuggestions = result
+        resolve()
+      }).then(() => {
+        this.showType = Object.keys(this.showSuggestions).length > 0
+      })
+
+      /* let scroll=this.$refs.scroll.wrap;
+        scroll.scrollTop=0; */
+    },
+    storeSuggestions () {
+      this.$nextTick(() => {
+        const suggestions = this.$el.querySelectorAll('.popper-item')
+        this.storedSuggestions = [...suggestions]
+        // console.log('storedSuggestions->',suggestions)
+      })
+    },
+    setContent (value) {
+      this.clearContent()
+      this.quill.setText(value)
+    },
+    clearContent () {
+      this.quill.deleteText(0, this.quill.getLength(), 'api')
+      this.cursorIndex = 0
+      this.pivotalCursorIndex = 0
+    },
+    insertTextAtIndex (content, index, source = 'api') {
+      this.quill.insertText(index || this.cursorIndex, content, source)
+    },
+    deleteTextInRange (from, to) {
+      return this.quill.deleteText(from, to - from, 'api')
+    },
+    setCursor (offset) {
+      this.$nextTick(() => {
+        if (!this.quill.hasFocus) {
+          this.quill.focus()
+        }
+        this.quill.setSelection(this.cursorIndex + offset, this.cursorIndex + offset, 'api')
+        this.storeCursor()
+      })
+    },
+    storeCursor (char) {
+      const $temp = this
+      return new Promise(function (resolve) {
+        $temp.$nextTick(() => {
+          const range = $temp.quill.getSelection()
+          // console.log('range',range)
+          if (range && range.length === 0) {
+            $temp.cursorIndex = range.index
+            // console.log('current cursor-->',$temp.cursorIndex)
+
+            if (/^[\{\(\[,= "]$/g.test(char)) {
+              $temp.pivotalCursorIndex = $temp.cursorIndex
+              // console.log('store pivotalCursorIndex',$temp.pivotalCursorIndex)
+            }
+            resolve()
+          }
         })
-      },
-      moveScroll:function(){
-        /*let scroll=this.$refs.scroll.wrap;
+      })
+    },
+    moveCursorToEnd () {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          const offset = this.quill.getLength()
+          this.setCursor(offset)
+        }, 100)
+      })
+    },
+    moveScroll () {
+      /* let scroll=this.$refs.scroll.wrap;
         //console.log('scroll',scroll)
         if(scroll){
           let curScroll=scroll.scrollTop;//滚动条当前位置
@@ -648,235 +636,231 @@
               }
             }, 20);
           }
-        }*/
-
-
-      },
-      clickout:function(){
-        if(this.quill&&this.quill.hasFocus()){
-          this.$emit('on-blur')
-        }
-        this.showType=false
-      },
-      itemHover:function(item){
-        if(item&&item.documentation){
-          this.showDescription=true;
-          this.detailItem=this.deepClone(item);
-        }
-      },
-      itemOut:function(item){
-        if(this.toggleSelectIndex != -1){
-          let tempItem=this.findItemByToggleIndex();
-          if(tempItem&&tempItem.documentation){
-            this.showDescription=true;
-            this.detailItem=this.deepClone(tempItem);
-          }else{
-            this.showDescription=false;
-            this.detailItem={};
-          }
-        }else{
-          this.showDescription=false;
-          this.detailItem={};
-        }
-      },
-      getContent(from,to){
-        let content=this.quill.getText(from,to);
-        content=content.substring(0,content.length-1)
-        return content;
-      },
-      getPosition:function(){
-        this.$nextTick(()=>{
-          this.popperPos=this.quill.getBounds(this.cursorIndex)
-          //console.log('position:',this.popperPos)
-        })
-      },
-      guid() {
-        function S4() {
-          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-        }
-        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-      },
-      registerKeydown:function(){
-        let $temp=this;
-        $temp.$el.addEventListener('keydown',function(event){
-          //console.log('keydown',event)
-          $temp.toggleSelect(event);
-        })
-
-        this.quill.keyboard.addBinding({
-          key:'DOWN'
-        },function(range,context){
-          return false;
-        })
-        this.quill.keyboard.addBinding({
-          key:'UP'
-        },function(range,context){
-          return false;
-        })
-
-        // this.quill.keyboard.addBinding({ key:'backspace'}, function(range,content) {
-        //   console.log('quill tab binding',range,content)
-        //   return false;
-        // });
-      },
-      deepClone:function(source){
-        return JSON.parse(JSON.stringify(source))
-      },
-      globalMatch:function(pattern,content){
-        let result=[];
-        let temp;
-        pattern.lastIndex=0;
-        while ((temp = pattern.exec(content)) != null) {
-          result.push(temp)
-        }
-
-        return result;
-      },
-      queryMetrics:function(){
-        if(this.metricList&&this.metricList.length>0){
-          this.tempStoreMetric=this.deepClone(this.metricList)
-          this.queryTypeInfos();
-        }else{
-          this.$get('/prom/api/v1/label/__name__/values').then(response=>{
-            if(response.status == 'success'){
-              let metrics=response.data.map(item=>{
-                return {label:item,insertText:item};
-              })
-
-              this.tempStoreMetric=this.deepClone(metrics);
-              this.queryTypeInfos();
-            }
-          })
-        }
-      },
-    },
-    computed: {
+        } */
 
     },
-    mounted() {
-      let $temp=this;
-      let bindings = { // quill默认的键只能通过这种方式覆盖
-        tab: {
-          key: 9,
-          handler: function(range,content) {
-            $temp.pickItem();
+    clickout () {
+      if (this.quill && this.quill.hasFocus()) {
+        this.$emit('on-blur')
+      }
+      this.showType = false
+    },
+    itemHover (item) {
+      if (item && item.documentation) {
+        this.showDescription = true
+        this.detailItem = this.deepClone(item)
+      }
+    },
+    itemOut () {
+      if (this.toggleSelectIndex !== -1) {
+        const tempItem = this.findItemByToggleIndex()
+        if (tempItem && tempItem.documentation) {
+          this.showDescription = true
+          this.detailItem = this.deepClone(tempItem)
+        } else {
+          this.showDescription = false
+          this.detailItem = {}
+        }
+      } else {
+        this.showDescription = false
+        this.detailItem = {}
+      }
+    },
+    getContent (from, to) {
+      let content = this.quill.getText(from, to)
+      content = content.substring(0, content.length - 1)
+      return content
+    },
+    getPosition () {
+      this.$nextTick(() => {
+        this.popperPos = this.quill.getBounds(this.cursorIndex)
+        // console.log('position:',this.popperPos)
+      })
+    },
+    guid () {
+      function S4 () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+      }
+      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+    },
+    registerKeydown () {
+      const $temp = this
+      $temp.$el.addEventListener('keydown', function (event) {
+        // console.log('keydown',event)
+        $temp.toggleSelect(event)
+      })
+
+      this.quill.keyboard.addBinding({
+        key: 'DOWN'
+      }, function () {
+        return false
+      })
+      this.quill.keyboard.addBinding({
+        key: 'UP'
+      }, function () {
+        return false
+      })
+
+      // this.quill.keyboard.addBinding({ key:'backspace'}, function(range,content) {
+      //   console.log('quill tab binding',range,content)
+      //   return false;
+      // });
+    },
+    deepClone (source) {
+      return JSON.parse(JSON.stringify(source))
+    },
+    globalMatch (pattern, content) {
+      const result = []
+      let temp
+      pattern.lastIndex = 0
+      while ((temp = pattern.exec(content)) != null) {
+        result.push(temp)
+      }
+
+      return result
+    },
+    queryMetrics () {
+      if (this.metricList && this.metricList.length > 0) {
+        this.tempStoreMetric = this.deepClone(this.metricList)
+        this.queryTypeInfos()
+      } else {
+        this.$get('/prom/api/v1/label/__name__/values').then(response => {
+          if (response.status === 'success') {
+            const metrics = response.data.map(item => {
+              return { label: item, insertText: item }
+            })
+
+            this.tempStoreMetric = this.deepClone(metrics)
+            this.queryTypeInfos()
           }
-        },
-        enter:{
-          key:13,
-          handler:function(range,content){
-            if(!$temp.showType){
-              $temp.showType=false;
-              $temp.quill.blur();
-              $temp.$emit('on-enter')
-              return false;
-            }else{
-              $temp.pickItem();
-            }
+        })
+      }
+    }
+  },
+  computed: {
+
+  },
+  mounted () {
+    const $temp = this
+    const bindings = { // quill默认的键只能通过这种方式覆盖
+      tab: {
+        key: 9,
+        handler () {
+          $temp.pickItem()
+        }
+      },
+      enter: {
+        key: 13,
+        handler () {
+          if (!$temp.showType) {
+            $temp.showType = false
+            $temp.quill.blur()
+            $temp.$emit('on-enter')
+            return false
+          } else {
+            $temp.pickItem()
           }
         }
-      };
-      this.options.modules.keyboard={};
-      this.options.modules.keyboard.bindings=bindings;
-      this.quill = new Quill(this.$refs.editor, this.options);
-      $temp.$el.addEventListener('paste', function(even) {
-        /*let text='';
+      }
+    }
+    this.options.modules.keyboard = {}
+    this.options.modules.keyboard.bindings = bindings
+    this.quill = new Quill(this.$refs.editor, this.options)
+    $temp.$el.addEventListener('paste', function (even) {
+      /* let text='';
         setTimeout(()=>{
           text=$temp.getContent();
         },100)//此值必须小于userChangeTimer的值
         setTimeout(()=>{
           $temp.setContent(text);
           $temp.quill.setSelection($temp.cursorIndex+text.length);
-        },200)//此值必须大于userChangeTimer的值*/
+        },200)//此值必须大于userChangeTimer的值 */
+    })
+    this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+      const ops = []
+      delta.ops.forEach(op => {
+        if (op.insert && typeof op.insert === 'string') {
+          ops.push({
+            insert: op.insert
+          })
+        }
       })
-       this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
-        let ops = []
-        delta.ops.forEach(op => {
-          if (op.insert && typeof op.insert === 'string') {
-            ops.push({
-              insert: op.insert
-            })
+      delta.ops = ops
+      return delta
+    })
+    this.quill.on('text-change', function (delta, oldDelta, source) {
+      if (source !== 'silent') {
+        // console.log('delta',delta,'oldDelta',oldDelta,'source',source)
+        let char = ''; let operation = ''
+        let oldContent = ''
+        oldDelta.ops.forEach((item, index) => {
+          if (index !== oldDelta.ops.length - 1) {
+            oldContent += item.insert
           }
         })
-        delta.ops = ops
-        return delta
-      })
-      this.quill.on('text-change',function(delta, oldDelta, source){
-        if(source != 'silent'){
-          // console.log('delta',delta,'oldDelta',oldDelta,'source',source)
-          let char='',operation='';
-          let oldContent='';
-          oldDelta.ops.forEach((item,index)=>{
-            if(index != oldDelta.ops.length-1){
-              oldContent+=item.insert;
-            }
+        if (delta.ops.length === 1) {
+          if (delta.ops[0].insert) {
+            char = delta.ops[0].insert
+            operation = 'insert'
+          } else if (delta.ops[0].delete) {
+            char = oldContent
+            operation = 'delete'
+          } else {
+            console.error('unknow operation')
+          }
+        } else if (delta.ops.length === 2) {
+          if (delta.ops[1].insert) {
+            char = delta.ops[1].insert
+            operation = 'insert'
+          } else if (delta.ops[1].delete) {
+            char = oldContent.substring(delta.ops[0].retain, delta.ops[0].retain + delta.ops[1].delete)
+            operation = 'delete'
+          } else {
+            console.error('unknow operation')
+          }
+        }
+        const promise = $temp.storeCursor(char)
+        if (source === 'user') {
+          // console.log(delta,oldDelta,oldContent)
+          // clearTimeout($temp.userChangeTimer)
+          // $temp.userChangeTimer=setTimeout(()=>{
+          const newContent = $temp.getContent()
+          promise.then(() => { // 存储完光标后再进行后面的操作
+            $temp.userChange(char, operation, newContent, oldContent)
           })
-          if(delta.ops.length==1){
-            if(delta.ops[0].insert){
-              char=delta.ops[0].insert
-              operation='insert';
-            }else if(delta.ops[0].delete){
-              char=oldContent;
-              operation='delete';
-            }else{
-              console.error('unknow operation')
-            }
-          }else if(delta.ops.length == 2){
-            if(delta.ops[1].insert){
-              char=delta.ops[1].insert
-              operation='insert';
-            }else if(delta.ops[1].delete){
-              char=oldContent.substring(delta.ops[0].retain,delta.ops[0].retain+delta.ops[1].delete);
-              operation='delete';
-            }else{
-              console.error('unknow operation')
-            }
-          }
-          let promise=$temp.storeCursor(char);
-          if(source == 'user'){
-            //console.log(delta,oldDelta,oldContent)
-            // clearTimeout($temp.userChangeTimer)
-            // $temp.userChangeTimer=setTimeout(()=>{
-              let newContent=$temp.getContent()
-              promise.then(()=>{ //存储完光标后再进行后面的操作
-                  $temp.userChange(char,operation,newContent,oldContent)
-              })
-            // },100)
-          }
-          $temp.content=$temp.getContent();
-          //console.log('current content-->',$temp.content)
-          $temp.getPosition();
-          /*clearTimeout($temp.formatTimer)
-          $temp.formatTimer=setTimeout($temp.formatContent,100)*/
-          $temp.formatContent()
-        }
-        //监听文本区域的高度
-        let lineHeight = 16;
-
-      });
-      this.registerKeydown();
-    },
-    watch:{
-      content:function(n,o){
-        this.$emit('expression-change',n)
-        if(!n || n == ''){
-          this.cursorIndex=0;
-          this.pivotalCursorIndex=0;
-        }
-      },
-      showSuggestions:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
-          this.toggleSelectIndex=-1;
-          this.storeSuggestions();
+          // },100)
         }
+        $temp.content = $temp.getContent()
+        // console.log('current content-->',$temp.content)
+        $temp.getPosition()
+        /* clearTimeout($temp.formatTimer)
+          $temp.formatTimer=setTimeout($temp.formatContent,100) */
+        $temp.formatContent()
+      }
+    })
+    this.registerKeydown()
+  },
+  watch: {
+    content (n) {
+      this.$emit('expression-change', n)
+      if (!n) {
+        this.cursorIndex = 0
+        this.pivotalCursorIndex = 0
       }
     },
-    beforeDestroy(){
-      this.quill.off('text-change')
+    showSuggestions: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this.toggleSelectIndex = -1
+        this.storeSuggestions()
+      }
     }
+  },
+  beforeDestroy () {
+    this.quill.off('text-change')
   }
+}
 </script>
 
 <style scoped lang="scss">
@@ -959,7 +943,6 @@
   mark{
     color: rgb(255, 133, 27);
     border-bottom: 1px solid rgb(255, 133, 27);
-    padding: inherit;
     background: inherit;
     padding: 0;
   }
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 5d6e978c0..65c23e671 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -89,7 +89,7 @@
                   min-width="110px"
                 ></el-table-column>
                 <el-table-column width="28" v-if="tools.customTableTitle.length>0">
-                  <template slot="header" slot-scope="scope" :resizable="false">
+                  <template slot="header" :resizable="false">
                   <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
                     <i class="nz-icon nz-icon-gear"></i>
                   </span>
@@ -207,488 +207,486 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
 </template>
 
 <script>
-  import bus from "../../../../libs/bus";
-  import promqlInput from "./promqlInput";
-  // import promqlInputPlus from "./promqlInputPlus";
-  import chart from "../overview/chart";
-  import axios from 'axios';
-  import chartBox from "../../../page/dashboard/chartBox";
-  import {getUUID} from "../../../common/js/common";
-  import chartDataFormat from "../../../charts/chartDataFormat";
+import bus from '../../../../libs/bus'
+import promqlInput from './promqlInput'
+// import promqlInputPlus from "./promqlInputPlus";
+import chart from '../overview/chart'
+import axios from 'axios'
+import chartBox from '../../../page/dashboard/chartBox'
+import { getUUID } from '../../../common/js/common'
+import chartDataFormat from '../../../charts/chartDataFormat'
 
-  export default {
-    name: "explore",
-    components: {
-      'promql-input': promqlInput,
-      'chart': chart,
-      'chart-box': chartBox,
+export default {
+  name: 'explore',
+  components: {
+    'promql-input': promqlInput,
+    chart: chart,
+    'chart-box': chartBox
+  },
+  data () {
+    return {
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      promqlCount: 1,
+      promqlKeys: [],
+      expressions: [''],
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      ],
+
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      tableTitle: [],
+      showIntroduce: true,
+      defaultChartVisible: true,
+      defaultTableVisible: true,
+      chartVisible: true,
+      tableVisible: true,
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableData: [],
+      saveDisabled: true,
+      panelData: [],
+      chartUnit: 0,
+      historyParam: { useHistory: true, key: 'expore-history' },
+      chart: {},
+      metricOptions: []
+    }
+  },
+  created () {
+    this.getPanelData()
+    this.queryMetrics()
+    this.promqlKeys.push(getUUID())
+  },
+  methods: {
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
     },
-    data() {
-      return {
-        rightBox: { //面板弹出框相关
-          show: false,
-        },
-        promqlCount: 1,
-        promqlKeys: [],
-        expressions: [''],
-        filterTime: [
-          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
-        ],
-
-        /*工具参数*/
-        tools: {
-          loading: false, //是否显示table加载动画
-          showCustomTableTitle: false, //自定义列弹框是否显示
-          customTableTitle: [], //自定义列工具的数据
-        },
-        tableTitle: [],
-        showIntroduce: true,
-        defaultChartVisible: true,
-        defaultTableVisible: true,
-        chartVisible: true,
-        tableVisible: true,
-        pageObj: {
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-        tableData: [],
-        saveDisabled: true,
-        panelData: [],
-        chartUnit:0,
-        historyParam:{useHistory:true,key:'expore-history'},
-        chart: {},
-        metricOptions: []
-      }
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
     },
-    created() {
-      this.getPanelData();
-      this.queryMetrics();
-      this.promqlKeys.push(getUUID());
+    filterShowData (source, pageObj) {
+      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
     },
-    methods: {
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
-      },
-      filterShowData(source, pageObj) {
-        return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
-      },
-      chartUnitChange:function(unit){
-        this.chartUnit=unit;
-        this.$nextTick(()=>{
-          this.expressionChange()
-        })
-      },
-      queryChartData: function () {
-        this.$refs.exploreChart.startLoading();
-        setTimeout(() => {
-          if (this.expressions.length > 0) {
-            let requestArr = [];
-            let promqlInputIndexs=[];
-            let queryExpression=[];
-            this.expressions.forEach((item, index) => {
-              if (item != '') {
-                let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
-                promqlInputIndexs.push(index);
-                queryExpression.push(item)
-                requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step='+step))
-              }
-            })
-            if (requestArr.length > 0) {
-              this.showIntroduce = false;
-              this.saveDisabled = false;
-            }
-            axios.all(requestArr).then(res => {
-              let series = [];
-              let legend = [];
-              if (res.length > 0) {
-                res.forEach((response, index) => {
-                  let promqlIndex=promqlInputIndexs[index];
-                  if (response.data&&response.status == 'success') {
-                    let data = response.data.result;
-                    if((!data||data.length<1)&&response.message){
-                      this.$refs['promql-'+promqlIndex][0].setError(response.message)
-                      return;
-                    }
-                    data.forEach((result, i) => {
-                      let seriesItem = {
-                        name: '',
-                        symbol:'emptyCircle',  //去掉点
-                        symbolSize:[2,2],
-                        showSymbol:false,
-                        smooth: 0.2,  //曲线变平滑
-                        data: [],
-                        lineStyle: {
-                          width: 1,
-                          opacity: 0.9
-                        },
-                        type: 'line',
-                      }
-                      let legendName="";
-                      seriesItem.data = result.values.map((item) => {
-                        return [item[0] * 1000, item[1]];
-                      })
-                      if(result.metric&&Object.keys(result.metric).length>0){
-                        let metric = Object.assign({}, result.metric);
-                        seriesItem.name += metric.__name__?metric.__name__:'';
-                        seriesItem.name +='{'
-                        delete metric.__name__;
-                        for (let key in metric) {
-                          seriesItem.name += key + "=" + '"' + metric[key] + '",';
-                        }
-                        legendName = seriesItem.name.substr(0, seriesItem.name.length - 1);
-                        legendName += "}"
-                      }else{
-                        legendName=queryExpression[index]
-                      }
-                      seriesItem.name=legendName+"-"+index;
-                      series.push(seriesItem);
-                      legend.push({name: seriesItem.name, alias: legendName, isGray: false});
-                    })
-
-                    this.$refs['promql-'+promqlIndex][0].setError('')
-                  }else{
-                    //console.log(response)
-                    this.$refs['promql-'+promqlIndex][0].setError(response.error)
-                  }
-                })
-
-                  this.$refs.exploreChart.setLegend(legend);
-                  this.$refs.exploreChart.setRandomColors(series.length)
-                  this.$refs.exploreChart.setSeries(series)
-                  this.defaultChartVisible = true;
-
-              }
-              this.$refs.exploreChart.endLoading();
-            })
-          }
-        }, 200)
-      },
-      queryTableData: function () {
-        this.tools.loading = true,
-          setTimeout(() => {
-            if (this.expressions.length > 0) {
-              let requestArr = [];
-              this.expressions.forEach((item, index) => {
-                if (item != '') {
-                  requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
-                }
-              })
-              if (requestArr.length > 0) {
-                this.showIntroduce = false;
-              }
-              axios.all(requestArr).then(res => {
-                let tData = [];
-                let tLabels = [];
-                if (res.length > 0) {
-                  this.tableData = [];
-                  this.tableTitle = [];
-                  //console.log(111111111111111111111,res)
-                  res.forEach((response, index) => {
-                    if (response.data&&response.status == 'success') {
-                      let data = response.data.result;
-                      if (data) {
-                        data.forEach((result, i) => {
-                          let metrics = Object.assign({}, result.metric);
-                          this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1],null,2));
-                          for (let key in metrics) {
-                            let label = {
-                              label: key == '__name__' ? 'metric' : key,
-                              prop: key,
-                              show: true,
-                            }
-                            let temp = tLabels.find((item, index) => {
-                              return item.prop == label.prop
-                            });
-                            if (!temp) {
-                              tLabels.push(label)
-                            }
-                          }
-                          tData.push(metrics);
-                        })
-                      }
-                    }
-                    tLabels.sort((a, b) => {
-                      return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
-                    })
-                  })
-                  if(tData.length>0){
-                    this.storedTableData = Object.assign([], tData);
-                    this.pageObj.total = this.storedTableData.length;
-                    this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
-                    this.tableTitle = Object.assign([], tLabels);
-                    this.tools.customTableTitle = Object.assign([], tLabels);
-                    this.defaultTableVisible = true;
-                  }else{
-                    // this.defaultTableVisible = false;
-                  }
-                }
-                this.tools.loading = false;
-              })
-            }
-          }, 200)
-      },
-      expressionChange: function () {
-        let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
-        //console.log(this.filterTime,nowTimeType);
-        this.setSearchTime(nowTimeType.type,nowTimeType.value);
-        if (this.expressions && this.expressions.length >= 1) {
-          this.queryTableData();
-          this.queryChartData()
-          this.storeHistory();
-        }
-      },
-      setSearchTime(type,val){//设置searchTime
-        if(type==='minute'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.filterTime, 0, startTime);
-          this.$set(this.filterTime, 1, endTime);
-          this.$set(this.filterTime, 2, val + "m");
-        }else if(type==='hour'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.filterTime, 0, startTime);
-          this.$set(this.filterTime, 1, endTime);
-          this.$set(this.filterTime, 2, val + "h");
-        }else if(type==='date'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.filterTime, 0, startTime);
-          this.$set(this.filterTime, 1, endTime);
-          this.$set(this.filterTime, 2, val + "d");
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime=this.filterTime;
-      },
-      storeHistory:function(){
-        let expire=24;
-        let historyJson=localStorage.getItem(this.historyParam.key);
-        let expressions=this.expressions.filter(item=>{
-          return item&&item != '';
-        })
-        let username=sessionStorage.getItem("nz-username");
-        if(historyJson && historyJson != 'undefined' && historyJson != ''){
-          let historyObj=JSON.parse(historyJson);
-          let history = historyObj[username];
-          if(history){
-            //过滤过期表达式
-            history=history.filter(item=>{
-              return item.time + item.expire >= new Date().getTime();
-            })
-            let repeat=history.filter(item=>{
-              return expressions.includes(item.insertText)
-            })
-            let old=history.filter(item=>{
-              return !expressions.includes(item.insertText)
-            })
-
-            let freshExpression=expressions.filter(item=>{
-              let find=history.find(t=>{return t.insertText == item});
-              return !find
-            })
-
-            repeat=repeat.map(item=>{
-              item.time=new Date().getTime();
-              item.num+=1;
-              item.documentation=this.$t('dashboard.metricPreview.historyTip',{time:item.num,hour:24});
-              return item;
-            })
-
-            let fresh=freshExpression.map(item=>{
-              return{
-                label:item,
-                insertText:item,
-                documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
-                num:1,
-                time:new Date().getTime(),
-                expire:expire * 60 * 60 * 1000
-              }
-            })
-
-            historyObj[username]=fresh.concat(repeat).concat(old);
-          }else{
-            let history=expressions.map(item=>{
-              return {
-                label:item,
-                insertText:item,
-                documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
-                num:1,
-                time:new Date().getTime(),
-                expire:expire * 60 * 60 * 1000
-              }
-            })
-            historyObj[username]=history;
-          }
-          localStorage.setItem(this.historyParam.key,JSON.stringify(historyObj))
-        }else{
-          let history=expressions.map(item=>{
-            return {
-              label:item,
-              insertText:item,
-              documentation:this.$t('dashboard.metricPreview.historyTip',{time:1,hour:24}),
-              num:1,
-              time:new Date().getTime(),
-              expire:expire * 60 * 60 * 1000
+    chartUnitChange: function (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.expressionChange()
+      })
+    },
+    queryChartData: function () {
+      this.$refs.exploreChart.startLoading()
+      setTimeout(() => {
+        if (this.expressions.length > 0) {
+          const requestArr = []
+          const promqlInputIndexs = []
+          const queryExpression = []
+          this.expressions.forEach((item, index) => {
+            if (item != '') {
+              const step = bus.getStep(this.filterTime[0], this.filterTime[1])
+              promqlInputIndexs.push(index)
+              queryExpression.push(item)
+              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
             }
           })
-          if(history&&history.length>0){
-            let stored={};
-            stored[username]=history;
-            localStorage.setItem(this.historyParam.key,JSON.stringify(stored))
+          if (requestArr.length > 0) {
+            this.showIntroduce = false
+            this.saveDisabled = false
           }
-        }
-      },
-      addExpression(index) {
-        this.expressions.splice(index + 1, 0, '');
-        this.promqlKeys.splice(index + 1, 0, getUUID());
-        this.promqlCount++;
-      },
-      copyExpression(index) {
-        this.expressions.push(this.expressions[index]);
-        this.promqlKeys.push(getUUID());
-        this.promqlCount++;
-      },
-      removeExpression(index) {
-        if (this.promqlCount > 1) {
-          this.expressions.splice(index, 1);
-          this.promqlKeys.splice(index, 1);
-          this.promqlCount--;
-        }
-      },
-      changeChartVisible: function () {
-        this.chartVisible = !this.chartVisible;
-      },
-      changeTableVisible: function () {
-        this.tableVisible = !this.tableVisible;
-      },
-      handleBox(show) {
-        this.rightBox.show = show;
-      },
-      saveChart() {
-        let chart = {
-          title: '',
-          type:'line',
-          span:12,
-          height:'400',
-          unit: this.chartUnit,
-          param:{
-            url:'',
-            threshold:'',
-          },
-          elements:[],
-          panel: '',
-          sync: 0
-        };
-        this.expressions.forEach((exp) => {
-          chart.elements.push({expression: exp, legend: "", type: "expert", id: ""});
-        });
-        this.chart = chart;
-        this.rightBox.show = true;
-      },
-      createSuccess(type, response, param, panel) { //添加chart成功
-        this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'success'
-        }).then(() => {
-          bus.$emit("menu-change", 'panel');
-          this.$store.commit("panelShowPanelChange", panel);
-          this.$router.push({
-            path: "/panel",
-            query: {
-              t: +new Date()
+          axios.all(requestArr).then(res => {
+            const series = []
+            const legend = []
+            if (res.length > 0) {
+              res.forEach((response, index) => {
+                const promqlIndex = promqlInputIndexs[index]
+                if (response.data && response.status == 'success') {
+                  const data = response.data.result
+                  if ((!data || data.length < 1) && response.message) {
+                    this.$refs['promql-' + promqlIndex][0].setError(response.message)
+                    return
+                  }
+                  data.forEach((result, i) => {
+                    const seriesItem = {
+                      name: '',
+                      symbol: 'emptyCircle', // 去掉点
+                      symbolSize: [2, 2],
+                      showSymbol: false,
+                      smooth: 0.2, // 曲线变平滑
+                      data: [],
+                      lineStyle: {
+                        width: 1,
+                        opacity: 0.9
+                      },
+                      type: 'line'
+                    }
+                    let legendName = ''
+                    seriesItem.data = result.values.map((item) => {
+                      return [item[0] * 1000, item[1]]
+                    })
+                    if (result.metric && Object.keys(result.metric).length > 0) {
+                      const metric = Object.assign({}, result.metric)
+                      seriesItem.name += metric.__name__ ? metric.__name__ : ''
+                      seriesItem.name += '{'
+                      delete metric.__name__
+                      for (const key in metric) {
+                        seriesItem.name += key + '=' + '"' + metric[key] + '",'
+                      }
+                      legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
+                      legendName += '}'
+                    } else {
+                      legendName = queryExpression[index]
+                    }
+                    seriesItem.name = legendName + '-' + index
+                    series.push(seriesItem)
+                    legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
+                  })
+
+                  this.$refs['promql-' + promqlIndex][0].setError('')
+                } else {
+                  // console.log(response)
+                  this.$refs['promql-' + promqlIndex][0].setError(response.error)
+                }
+              })
+
+              this.$refs.exploreChart.setLegend(legend)
+              this.$refs.exploreChart.setRandomColors(series.length)
+              this.$refs.exploreChart.setSeries(series)
+              this.defaultChartVisible = true
             }
-          });
-        });
-      },
-      getPanelData() { //获取panel数据
-        this.$get('panel?pageNo=1&pageSize=-1').then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list;
+            this.$refs.exploreChart.endLoading()
+          })
+        }
+      }, 200)
+    },
+    queryTableData () {
+      this.tools.loading = true
+      setTimeout(() => {
+        if (this.expressions.length > 0) {
+          const requestArr = []
+          this.expressions.forEach((item, index) => {
+            if (item !== '') {
+              requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
+            }
+          })
+          if (requestArr.length > 0) {
+            this.showIntroduce = false
           }
-        });
-      },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
+          axios.all(requestArr).then(res => {
+            const tData = []
+            const tLabels = []
+            if (res.length > 0) {
+              this.tableData = []
+              this.tableTitle = []
+              res.forEach((response, index) => {
+                if (response.data && response.status === 'success') {
+                  const data = response.data.result
+                  if (data) {
+                    data.forEach((result, i) => {
+                      const metrics = Object.assign({}, result.metric)
+                      this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1], null, 2))
+                      for (const key in metrics) {
+                        const label = {
+                          label: key === '__name__' ? 'metric' : key,
+                          prop: key,
+                          show: true
+                        }
+                        const temp = tLabels.find((item, index) => {
+                          return item.prop == label.prop
+                        })
+                        if (!temp) {
+                          tLabels.push(label)
+                        }
+                      }
+                      tData.push(metrics)
+                    })
+                  }
+                }
+                tLabels.sort((a, b) => {
+                  return a.prop.charCodeAt(0) - b.prop.charCodeAt(0)
+                })
+              })
+              if (tData.length > 0) {
+                this.storedTableData = Object.assign([], tData)
+                this.pageObj.total = this.storedTableData.length
+                this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
+                this.tableTitle = Object.assign([], tLabels)
+                this.tools.customTableTitle = Object.assign([], tLabels)
+                this.defaultTableVisible = true
+              } else {
+                // this.defaultTableVisible = false;
+              }
+            }
+            this.tools.loading = false
+          })
+        }
+      }, 200)
+    },
+    expressionChange: function () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      // console.log(this.filterTime,nowTimeType);
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      if (this.expressions && this.expressions.length >= 1) {
+        this.queryTableData()
+        this.queryChartData()
+        this.storeHistory()
+      }
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
+    },
+    storeHistory: function () {
+      const expire = 24
+      const historyJson = localStorage.getItem(this.historyParam.key)
+      const expressions = this.expressions.filter(item => {
+        return item && item != ''
+      })
+      const username = sessionStorage.getItem('nz-username')
+      if (historyJson && historyJson != 'undefined' && historyJson != '') {
+        const historyObj = JSON.parse(historyJson)
+        let history = historyObj[username]
+        if (history) {
+          // 过滤过期表达式
+          history = history.filter(item => {
+            return item.time + item.expire >= new Date().getTime()
+          })
+          let repeat = history.filter(item => {
+            return expressions.includes(item.insertText)
+          })
+          const old = history.filter(item => {
+            return !expressions.includes(item.insertText)
+          })
+
+          const freshExpression = expressions.filter(item => {
+            const find = history.find(t => { return t.insertText == item })
+            return !find
+          })
+
+          repeat = repeat.map(item => {
+            item.time = new Date().getTime()
+            item.num += 1
+            item.documentation = this.$t('dashboard.metricPreview.historyTip', { time: item.num, hour: 24 })
+            return item
+          })
+
+          const fresh = freshExpression.map(item => {
+            return {
+              label: item,
+              insertText: item,
+              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+              num: 1,
+              time: new Date().getTime(),
+              expire: expire * 60 * 60 * 1000
+            }
+          })
+
+          historyObj[username] = fresh.concat(repeat).concat(old)
+        } else {
+          const history = expressions.map(item => {
+            return {
+              label: item,
+              insertText: item,
+              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+              num: 1,
+              time: new Date().getTime(),
+              expire: expire * 60 * 60 * 1000
+            }
+          })
+          historyObj[username] = history
+        }
+        localStorage.setItem(this.historyParam.key, JSON.stringify(historyObj))
+      } else {
+        const history = expressions.map(item => {
+          return {
+            label: item,
+            insertText: item,
+            documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+            num: 1,
+            time: new Date().getTime(),
+            expire: expire * 60 * 60 * 1000
+          }
+        })
+        if (history && history.length > 0) {
+          const stored = {}
+          stored[username] = history
+          localStorage.setItem(this.historyParam.key, JSON.stringify(stored))
+        }
+      }
+    },
+    addExpression (index) {
+      this.expressions.splice(index + 1, 0, '')
+      this.promqlKeys.splice(index + 1, 0, getUUID())
+      this.promqlCount++
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      this.promqlKeys.push(getUUID())
+      this.promqlCount++
+    },
+    removeExpression (index) {
+      if (this.promqlCount > 1) {
+        this.expressions.splice(index, 1)
+        this.promqlKeys.splice(index, 1)
+        this.promqlCount--
+      }
+    },
+    changeChartVisible: function () {
+      this.chartVisible = !this.chartVisible
+    },
+    changeTableVisible: function () {
+      this.tableVisible = !this.tableVisible
+    },
+    handleBox (show) {
+      this.rightBox.show = show
+    },
+    saveChart () {
+      const chart = {
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: this.chartUnit,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [],
+        panel: '',
+        sync: 0
+      }
+      this.expressions.forEach((exp) => {
+        chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })
+      })
+      this.chart = chart
+      this.rightBox.show = true
+    },
+    createSuccess (type, response, param, panel) { // 添加chart成功
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'success'
+      }).then(() => {
+        bus.$emit('menu-change', 'panel')
+        this.$store.commit('panelShowPanelChange', panel)
         this.$router.push({
-          path: "/" + data,
+          path: '/panel',
           query: {
             t: +new Date()
           }
-        });
-      },
-      queryMetrics() {
-        this.metricOptions = [];
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status == 'success'){
-            let metrics = response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              }
-              if(metricMap.get(key) && metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-          }
         })
-      },
-      getMetricOptions() {
-        return this.metricOptions;
-      }
+      })
     },
-    watch: {
-      promqlCount: function (n, o) {
-        this.expressionChange();
-      },
-      expressions: {
-        immediate: true,
-        handler: function (n, o) {
-          if (n.length == 1 && (!n[0] || n[0] == '')) {
-            this.showIntroduce = true
-          } else if (n.length > 1) {
-            let temp = n.find((item, index) => {
-              return item != ''
-            });
-            if (!temp) {
-              this.showIntroduce = true;
+    getPanelData () { // 获取panel数据
+      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+        }
+      })
+    },
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    queryMetrics () {
+      this.metricOptions = []
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          const metrics = response.data.sort()
+          const metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
             } else {
-              this.showIntroduce = false;
+              key = item
             }
-          } else {
-            this.showIntroduce = false;
+            if (metricMap.get(key)) {
+              const values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              const values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (const key of metricMap.keys()) {
+            const option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = metricMap.get(key)
+            }
+            this.metricOptions.push(option)
           }
         }
+      })
+    },
+    getMetricOptions () {
+      return this.metricOptions
+    }
+  },
+  watch: {
+    promqlCount: function (n, o) {
+      this.expressionChange()
+    },
+    expressions: {
+      immediate: true,
+      handler: function (n, o) {
+        if (n.length == 1 && (!n[0] || n[0] == '')) {
+          this.showIntroduce = true
+        } else if (n.length > 1) {
+          const temp = n.find((item, index) => {
+            return item != ''
+          })
+          if (!temp) {
+            this.showIntroduce = true
+          } else {
+            this.showIntroduce = false
+          }
+        } else {
+          this.showIntroduce = false
+        }
       }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
@@ -835,7 +833,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     text-decoration: none;
   }
 
-
   .doc-content a.header-anchor:link,
   .doc-content a.header-anchor:visited {
     /*visibility: hidden;*/
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 3f5a07671..2f0ce94ec 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -20,7 +20,6 @@
                   </div>
                 </template>
 
-
               </el-cascader-panel>
             </el-dropdown>
           </div>
@@ -56,7 +55,6 @@
                     </div>
                   </template>
 
-
                 </el-cascader-panel>
               </el-dropdown>
             </el-col>
@@ -92,7 +90,6 @@
            v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
     </div>
 
-
     <el-dialog
       :visible.sync="tempBoxShow"
       :append-to-body="true"
@@ -149,385 +146,381 @@
       </span>
     </el-dialog>
 
-
   </div>
 </template>
 
 <script>
-  import editor from './editor'
-  import selectAlertSilence from '../../../common/alert/selectAlertSilence'
-  export default {
-    name:"promqlInput",
-    components:{
-      'editor':editor,
-      selectAlertSilence
+import selectAlertSilence from '../../../common/alert/selectAlertSilence'
+export default {
+  name: 'promqlInput',
+  components: {
+    'editor':editor,
+    selectAlertSilence
+  },
+  props: {
+    index: { type: Number },
+    expressionList: {},
+    plugins: { type: Array },
+    styleType: Number,
+    historyParam: { type: Object },
+    showRemove: { type: Boolean, default: true },
+    projectRightBox: { type: Boolean, default: false },
+    metricOptionsParent: { type: Array },
+    inputId: String,
+    required: {
+      type: Boolean, default: false
     },
-    props:{
-      index:{type:Number},
-      expressionList:{},
-      plugins:{type:Array},
-      styleType:Number,
-      historyParam:{type:Object},
-      showRemove:{type:Boolean,default:true},
-      projectRightBox:{type:Boolean,default:false},
-      metricOptionsParent:{type:Array},
-      inputId:String,
-      required:{
-        type:Boolean,default:false
-      },
-      showTemp:{
-        type:Boolean,
-        default:true
-      },
-      typeContentLoading:false,
-      //metricOptions: {type: Array},
-      //metricStore: {type: Array}
+    showTemp: {
+      type: Boolean,
+      default: true
     },
-    data(){
-      return {
-        dropDownVisible:false,
-        //metricStore:[],
-        metricOptions:[],
-        cascaderValue:'',
-        errorMsg:null,
-        appendMsg:null,
-        editorValue:'',
-        firstAddEvent:true,
-        tempBoxShow:false,
-        tempBox:{
-          expression:'',
-          vars:[],
-        },
-        tempBoxShowLoading:false,
-        assetOption:[],
-        moduleOption:[],
-        endpointOption:[],
-        datacenterOption:[],
-        projectOption:[],
-        filterSilence:'',
-        tempBoxId:{},
+    typeContentLoading: {
+      type: Boolean,
+      default: false
+    }
+    // metricOptions: {type: Array},
+    // metricStore: {type: Array}
+  },
+  data () {
+    return {
+      dropDownVisible: false,
+      // metricStore:[],
+      metricOptions: [],
+      cascaderValue: '',
+      errorMsg: null,
+      appendMsg: null,
+      editorValue: '',
+      firstAddEvent: true,
+      tempBoxShow: false,
+      tempBox: {
+        expression: '',
+        vars: []
+      },
+      tempBoxShowLoading: false,
+      assetOption: [],
+      moduleOption: [],
+      endpointOption: [],
+      datacenterOption: [],
+      projectOption: [],
+      filterSilence: '',
+      tempBoxId:{},
+    }
+  },
+  created () {
+    this.queryMetrics()
+  },
+  methods: {
+    closeDropdown () {
+      this.dropDownVisible = false
+    },
+    clearExpression: function () {
+      this.expressionChange()
+      this.cascaderValue = ''
+    },
+    addExpression: function () {
+      this.$emit('addExpression', this.index)
+    },
+    copyExpression () {
+      this.$emit('copyExpression', this.index)
+    },
+    removeExpression: function () {
+      this.$emit('removeExpression', this.index)
+    },
+    toggleDropdown () {
+      this.dropDownVisible = !this.dropDownVisible
+    },
+    queryMetrics: function () {
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          let metrics = response.data.sort()
+          let metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
+            } else {
+              key = item
+            }
+            if (metricMap.get(key)) {
+              let values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              let values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (let key of metricMap.keys()) {
+            let option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = metricMap.get(key)
+            }
+            this.metricOptions.push(option)
+          }
+          if (this.showTemp) {
+            this.getExprTemp()
+          }
+        }
+      })
+    },
+    filterInput: function (queryString, cb) {
+      let metrics = Object.assign([], this.metricStore)
+      let result = queryString
+        ? metrics.filter((item) => {
+          return item.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
+        })
+        : metrics
+      cb(result)
+    },
+    metricChange: function (value) {
+      if (!value) return
+      this.expressionList[this.index] = value
+      // this.$refs.editor.setContent(value)
+      this.dropDownVisible = false
+      this.$emit('change', value)
+    },
+    metricKeyDown (val) {
+      if (this.required) {
+        this.metricChange(val)
       }
     },
-    created(){
-      this.queryMetrics();
+    expressionChange: function () {
+      this.$emit('change')
     },
-    methods:{
-      closeDropdown(){
-        this.dropDownVisible=false;
-      },
-      clearExpression:function(){
-        this.expressionChange();
-        this.cascaderValue='';
-      },
-      addExpression:function(){
-        this.$emit('addExpression',this.index);
-      },
-      copyExpression(){
-        this.$emit('copyExpression',this.index);
-      },
-      removeExpression:function(){
-        this.$emit('removeExpression',this.index);
-      },
-      toggleDropdown(){
-        this.dropDownVisible= !this.dropDownVisible;
-      },
-      queryMetrics:function(){
-        this.$get('prom/api/v1/label/__name__/values').then(response=>{
-          if(response.status=='success'){
-            let metrics=response.data.sort();
-            let metricMap=new Map();
-            metrics.forEach((item)=>{
-              let key='';
-              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
-                key=item.split('_')[0];
-              }else if(/^_\w*/.test(item)){
-                key='      ';
-              }else{
-                key=item;
-              }
-              if(metricMap.get(key)){
-                let values=metricMap.get(key);
-                values.push({label:item,value:item});
-              }else{
-                let values=[{label:item,value:item}];
-                metricMap.set(key,values);
-              }
-              //this.metricStore.push({label:item,value:item,insertText:item})
-            });
-            for(let key of metricMap.keys()){
-              let option={
-                label:key,
-                value:key,
-              };
-              if(metricMap.get(key)&&metricMap.get(key).length>1){
-                option.children=metricMap.get(key);
-              }
-              this.metricOptions.push(option);
-            }
-            if(this.showTemp){
-              this.getExprTemp()
-            }
-          }
-        })
-      },
-      filterInput:function(queryString,cb){
-        let metrics=Object.assign([],this.metricStore);
-        let result=queryString?metrics.filter((item)=>{
-          return item.value.toLowerCase().indexOf(queryString.toLowerCase())!= -1;
-        }):metrics;
-        cb(result)
-      },
-      metricChange:function(value){
-        if(!value) return;
-        this.expressionList[this.index]=value;
-        //this.$refs.editor.setContent(value)
-        this.dropDownVisible=false;
-        this.$emit('change',value)
-      },
-      metricKeyDown(val){
-        if(this.required){
-          this.metricChange(val);
+    setError: function (errMsg) {
+      // console.log(errMsg)
+      this.errorMsg = errMsg
+    },
+    getExprTemp () {
+      this.$get('/expression/tmpl/gname').then(res => {
+        if (res.code === 200) {
+          res.data.list.forEach(item => {
+            this.metricOptions.unshift({
+              label: item,
+              value: item,
+              children: [],
+              temp: true,
+              child: false
+            })
+          })
         }
-      },
-      expressionChange:function(){
-        this.$emit('change')
-      },
-      setError:function(errMsg){
-        //console.log(errMsg)
-        this.errorMsg=errMsg;
-      },
-      getExprTemp(){
-        this.$get('/expression/tmpl/gname').then(res=>{
-          if(res.code===200){
-            res.data.list.forEach(item=>{
-              this.metricOptions.unshift({
-                label:item,
-                value:item,
-                children:[],
-                temp:true,
-                child:false,
-              });
-            })
-          }
-        })
-      },
-      lazyLoad(node,data){
-        if(data.temp){
-          if(!data.child){
-            this.tempBoxShowLoading=true;
-            this.$get('/expression/tmpl?pageSize=-1&gname='+data.value).then(res=>{
-              this.tempBoxShowLoading=false;
-              if(res.code===200){
-                res.data.list.forEach(item=>{
-                  item.label=item.name;
-                  item.value=false;
-                  item.temp=true;
-                  item.child=true;
-                });
-                this.metricOptions.find(item=>item.value===data.value).children=res.data.list;
-              }
-            })
-          }else{
-            this.dropDownVisible=false
-            this.$get('/expression/tmpl/'+data.id).then(res=>{
-              if(res.code===200){
-                res.data.vars.forEach(item=>{
-                  res.data[item]='';
-                  let arr=item.split('.')
-                  let keyword=arr[0].toLowerCase();
-                  this.getAllOptins(keyword,keyword+'Option');
-
-                });
-                this.tempBox={
-                  ...this.tempBox,
-                  ...res.data,
-                };
-
-                setTimeout(()=>{
-                  this.tempBoxShow=true;
-                },100)
-              }
-            })
-          }
-        }
-      },
-      tempBoxShowChange(flag){
-        this.tempBoxShow=flag;
-        if(flag){
-          this.cascaderValue="";
-          let params={};
-          params.expression=this.tempBox.expression;
-          params.varsVal={};
-          let returnFlag=false
-          let errorStr=""
-          this.tempBox.vars.forEach((item)=>{
-            params.varsVal[item]=this.tempBoxId[item]?this.tempBoxId[item]:this.tempBox[item];
-            if(!this.tempBox[item]){
-              errorStr+=item + ","
-              returnFlag=true;
-            }
-          });
-
-
-          if(returnFlag) {
-            this.$message({
-              message:  this.$t('config.exprTemp.errorStr',{errorStr:errorStr}),
-              type: 'error'
-            });
-            return
-          }
-
-          if(this.tempBox.vars.length==0){
-            this.tempBoxShow=false;
-            this.expressionList[this.index]= params.expression;
-            this.$emit('change', params.expression);
-            return
-          }
-
-          this.$post('/expression/tmpl/render',params).then(res=>{
-            if(res.code===200){
-              this.tempBoxShow=false;
-              this.expressionList[this.index]=res.data.expression;
-              this.$emit('change',res.data.expression);
+      })
+    },
+    lazyLoad (node, data) {
+      if (data.temp) {
+        if (!data.child) {
+          this.tempBoxShowLoading = true
+          this.$get('/expression/tmpl?pageSize=-1&gname=' + data.value).then(res => {
+            this.tempBoxShowLoading = false
+            if (res.code === 200) {
+              res.data.list.forEach(item => {
+                item.label = item.name
+                item.value = false
+                item.temp = true
+                item.child = true
+              })
+              this.metricOptions.find(item => item.value === data.value).children = res.data.list
             }
           })
-        } else{
-          this.tempBox={}
-        }
-      },
+        } else {
+          this.dropDownVisible = false
+          this.$get('/expression/tmpl/' + data.id).then(res => {
+            if (res.code === 200) {
+              res.data.vars.forEach(item => {
+                res.data[item] = ''
+                const arr = item.split('.')
+                const keyword = arr[0].toLowerCase()
+                this.getAllOptins(keyword, keyword + 'Option')
+              })
+              this.tempBox = {
+                ...this.tempBox,
+                ...res.data
+              }
 
-      format(str){
-        let arr=str.split('.')
-        let keyword=arr[0].toLowerCase();
-        switch(keyword){
-          case 'asset':
-          case 'module':
-          case 'endpoint':
-          case 'datacenter':
-          case 'project':
-            return {
-              arr:this[keyword+'Option'],
-              key:keyword,
-              value:((keyword=='module'||keyword=='project'||keyword=='datacenter')?'name':'host')
-            };
-          default:
-            return {
-              key:false
+              setTimeout(() => {
+                this.tempBoxShow = true
+              }, 100)
             }
+          })
         }
-      },
-      getAllOptins(key,arr){
-
-
-
-        switch(key){
-          case 'asset':
-            this.$get('asset',{pageNo:1,pageSize:-1}).then(response=>{
-              if(response.code==200){
-                let arr=[];
-                response.data.list.forEach(asset=>{
-                  asset.name=asset.sn;
-                  let idcF=arr.find(idc=>idc.id===asset.idc.id);
-                  if(idcF){
-                    idcF.children.push(asset);
-                  } else{
-                    let idc={...asset.idc};
-                    idc.children=[asset];
-                    arr.push(idc);
-                  }
-                });
-                this.assetOption=arr;
-              }
-            });
-            break;
-          case 'module':
-            this.$get('module',{pageNo:1,pageSize:-1}).then(response=>{
-              if(response.code==200){
-                let arr=[];
-                response.data.list.forEach(module=>{
-                  let projectF=arr.find(project=>project.id===module.project.id)
-                  if(projectF){
-                    projectF.children.push(module);
-                  } else{
-                    let project={...module.project};
-                    project.children=[module];
-                    arr.push(project);
-                  }
-                });
-                this.moduleOption=arr;
-              }
-            });
-            break;
-          case 'endpoint':
-            this.$get('endpoint',{pageNo:1,pageSize:-1}).then(response=>{
-              if(response.code==200){
-                let arr=[];
-                response.data.list.forEach(item=>{
-                  item.name=item.host;
-                  let projectF = arr.find(project=>item.project.id===project.id);
-                  if(projectF){
-                    let moduleF = projectF.children.find(module=>module.id===item.module.id);
-                    if(moduleF){
-                      moduleF.children.push(item)
-                    } else{
-                      projectF.children.push({...item.module,children:[item]});
-                    }
-                  } else {
-                    let project={...item.project};
-                    project.children=[{...item.module,children:[item]}]
-                    arr.push(project);
-                  }
-                });
-                this.endpointOption=arr;
-              }
-            });
-            break;
-          case 'datacenter':
-            this.$get('idc',{pageNo:1,pageSize:-1}).then(response=>{
-              if(response.code==200){
-                this.datacenterOption=response.data.list;
-              }
-            });
-            break;
-          case 'project':
-            this.$get('project',{pageNo:1,pageSize:-1}).then(response=>{
-              if(response.code==200){
-                this.projectOption=response.data.list;
-              }
-            });
-            break;
-          default:
-            break;
-        }
-      },
-      silenceChange(val,key){
-        this.tempBox[key]=val.name;
-        this.tempBoxId[key]=val.id;
-      },
-      clearValue(key){
-        this.tempBox[key]='';
-      },
-      tempBoxClose(){
-        this.cascaderValue="";
-      },
-
-
-
-      /*setMsg:function(){
-        this.appendMsg
-      }*/
+      }
     },
-    watch:{
-      dropDownVisible:function(n,o){
-        if(this.$refs.metricSelector){
-          this.$refs.metricSelector.dropDownVisible=n;
-          if(!this.expressionList[this.index]||this.expressionList[this.index]==''){
-            this.cascaderValue="";
+    tempBoxShowChange (flag) {
+      this.tempBoxShow = flag
+      if (flag) {
+        this.cascaderValue = ''
+        let params = {}
+        params.expression = this.tempBox.expression
+        params.varsVal = {}
+        let returnFlag = false
+        let errorStr = ''
+        this.tempBox.vars.forEach((item) => {
+          params.varsVal[item] = this.tempBox[item]
+          if (!this.tempBox[item]) {
+            errorStr += item + ','
+            returnFlag = true
           }
+        })
+
+        if (returnFlag) {
+          this.$message({
+            message: this.$t('config.exprTemp.errorStr', { errorStr: errorStr }),
+            type: 'error'
+          })
+          return
         }
-      },
+
+        if (this.tempBox.vars.length == 0) {
+          this.tempBoxShow = false
+          this.expressionList[this.index] = params.expression
+          this.$emit('change', params.expression)
+          return
+        }
+
+        this.$post('/expression/tmpl/render', params).then(res => {
+          if (res.code === 200) {
+            this.tempBoxShow = false
+            this.expressionList[this.index] = res.data.expression
+            this.$emit('change', res.data.expression)
+          }
+        })
+      } else {
+        this.tempBox = {}
+      }
     },
+
+    format (str) {
+      let arr = str.split('.')
+      let keyword = arr[0].toLowerCase()
+      switch (keyword) {
+        case 'asset':
+        case 'module':
+        case 'endpoint':
+        case 'datacenter':
+        case 'project':
+          return {
+            arr: this[keyword + 'Option'],
+            key: keyword,
+            value: ((keyword == 'module' || keyword == 'project' || keyword == 'datacenter') ? 'name' : 'host')
+          }
+        default:
+          return {
+            key: false
+          }
+      }
+    },
+    getAllOptins (key, arr) {
+      switch (key) {
+        case 'asset':
+          this.$get('asset', { pageNo: 1, pageSize: -1 }).then(response => {
+            if (response.code == 200) {
+              let arr = []
+              response.data.list.forEach(asset => {
+                asset.name = asset.sn
+                let idcF = arr.find(idc => idc.id === asset.idc.id)
+                if (idcF) {
+                  idcF.children.push(asset)
+                } else {
+                  let idc = { ...asset.idc }
+                  idc.children = [asset]
+                  arr.push(idc)
+                }
+              })
+              this.assetOption = arr
+            }
+          })
+          break
+        case 'module':
+          this.$get('module', { pageNo: 1, pageSize: -1 }).then(response => {
+            if (response.code == 200) {
+              let arr = []
+              response.data.list.forEach(module => {
+                let projectF = arr.find(project => project.id === module.project.id)
+                if (projectF) {
+                  projectF.children.push(module)
+                } else {
+                  let project = { ...module.project }
+                  project.children = [module]
+                  arr.push(project)
+                }
+              })
+              this.moduleOption = arr
+            }
+          })
+          break
+        case 'endpoint':
+          this.$get('endpoint', { pageNo: 1, pageSize: -1 }).then(response => {
+            if (response.code == 200) {
+              let arr = []
+              response.data.list.forEach(item => {
+                item.name = item.host
+                let projectF = arr.find(project => item.project.id === project.id)
+                if (projectF) {
+                  let moduleF = projectF.children.find(module => module.id === item.module.id)
+                  if (moduleF) {
+                    moduleF.children.push(item)
+                  } else {
+                    projectF.children.push({ ...item.module, children: [item] })
+                  }
+                } else {
+                  let project = { ...item.project }
+                  project.children = [{ ...item.module, children: [item] }]
+                  arr.push(project)
+                }
+              })
+              this.endpointOption = arr
+            }
+          })
+          break
+        case 'datacenter':
+          this.$get('idc', { pageNo: 1, pageSize: -1 }).then(response => {
+            if (response.code == 200) {
+              this.datacenterOption = response.data.list
+            }
+          })
+          break
+        case 'project':
+          this.$get('project', { pageNo: 1, pageSize: -1 }).then(response => {
+            if (response.code == 200) {
+              this.projectOption = response.data.list
+            }
+          })
+          break
+        default:
+          break
+      }
+    },
+    silenceChange (val, key) {
+      this.tempBox[key] = val.name
+      this.tempBoxId[key]=val.id;
+    },
+    clearValue (key) {
+      this.tempBox[key] = ''
+    },
+    tempBoxClose () {
+      this.cascaderValue = ''
+    }
+
+    /* setMsg:function(){
+        this.appendMsg
+      } */
+  },
+  watch: {
+    dropDownVisible: function (n, o) {
+      if (this.$refs.metricSelector) {
+        this.$refs.metricSelector.dropDownVisible = n
+        if (!this.expressionList[this.index] || this.expressionList[this.index] == '') {
+          this.cascaderValue = ''
+        }
+      }
+    }
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/components/page/dashboard/explore/suggestions.vue b/nezha-fronted/src/components/page/dashboard/explore/suggestions.vue
index 8f4b1e107..c8df6471a 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/suggestions.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/suggestions.vue
@@ -1,399 +1,399 @@
 <script>
-  const operators=[
-    {
-      label: 'sum',
-      insertText: 'sum',
-      documentation: 'Calculate sum over dimensions',
-    },
-    {
-      label: 'min',
-      insertText: 'min',
-      documentation: 'Select minimum over dimensions',
-    },
-    {
-      label: 'max',
-      insertText: 'max',
-      documentation: 'Select maximum over dimensions',
-    },
-    {
-      label: 'avg',
-      insertText: 'avg',
-      documentation: 'Calculate the average over dimensions',
-    },
-    {
-      label: 'stddev',
-      insertText: 'stddev',
-      documentation: 'Calculate population standard deviation over dimensions',
-    },
-    {
-      label: 'stdvar',
-      insertText: 'stdvar',
-      documentation: 'Calculate population standard variance over dimensions',
-    },
-    {
-      label: 'count',
-      insertText: 'count',
-      documentation: 'Count number of elements in the vector',
-    },
-    {
-      label: 'count_values',
-      insertText: 'count_values',
-      documentation: 'Count number of elements with the same value',
-    },
-    {
-      label: 'bottomk',
-      insertText: 'bottomk',
-      documentation: 'Smallest k elements by sample value',
-    },
-    {
-      label: 'topk',
-      insertText: 'topk',
-      documentation: 'Largest k elements by sample value',
-    },
-    {
-      label: 'quantile',
-      insertText: 'quantile',
-      documentation: 'Calculate φ-quantile (0 ≤ φ ≤ 1) over dimensions',
-    },
-  ];
-  const funcs=[
-    ...operators,
-    {
-      insertText: 'abs',
-      label: 'abs',
-      detail: 'abs(v instant-vector)',
-      documentation: 'Returns the input vector with all sample values converted to their absolute value.',
-    },
-    {
-      insertText: 'absent',
-      label: 'absent',
-      detail: 'absent(v instant-vector)',
-      documentation:
-        'Returns an empty vector if the vector passed to it has any elements and a 1-element vector with the value 1 if the vector passed to it has no elements. This is useful for alerting on when no time series exist for a given metric name and label combination.',
-    },
-    {
-      insertText: 'ceil',
-      label: 'ceil',
-      detail: 'ceil(v instant-vector)',
-      documentation: 'Rounds the sample values of all elements in `v` up to the nearest integer.',
-    },
-    {
-      insertText: 'changes',
-      label: 'changes',
-      detail: 'changes(v range-vector)',
-      documentation:
-        'For each input time series, `changes(v range-vector)` returns the number of times its value has changed within the provided time range as an instant vector.',
-    },
-    {
-      insertText: 'clamp_max',
-      label: 'clamp_max',
-      detail: 'clamp_max(v instant-vector, max scalar)',
-      documentation: 'Clamps the sample values of all elements in `v` to have an upper limit of `max`.',
-    },
-    {
-      insertText: 'clamp_min',
-      label: 'clamp_min',
-      detail: 'clamp_min(v instant-vector, min scalar)',
-      documentation: 'Clamps the sample values of all elements in `v` to have a lower limit of `min`.',
-    },
-    {
-      insertText: 'count_scalar',
-      label: 'count_scalar',
-      detail: 'count_scalar(v instant-vector)',
-      documentation:
-        'Returns the number of elements in a time series vector as a scalar. This is in contrast to the `count()` aggregation operator, which always returns a vector (an empty one if the input vector is empty) and allows grouping by labels via a `by` clause.',
-    },
-    {
-      insertText: 'day_of_month',
-      label: 'day_of_month',
-      detail: 'day_of_month(v=vector(time()) instant-vector)',
-      documentation: 'Returns the day of the month for each of the given times in UTC. Returned values are from 1 to 31.',
-    },
-    {
-      insertText: 'day_of_week',
-      label: 'day_of_week',
-      detail: 'day_of_week(v=vector(time()) instant-vector)',
-      documentation:
-        'Returns the day of the week for each of the given times in UTC. Returned values are from 0 to 6, where 0 means Sunday etc.',
-    },
-    {
-      insertText: 'days_in_month',
-      label: 'days_in_month',
-      detail: 'days_in_month(v=vector(time()) instant-vector)',
-      documentation:
-        'Returns number of days in the month for each of the given times in UTC. Returned values are from 28 to 31.',
-    },
-    {
-      insertText: 'delta',
-      label: 'delta',
-      detail: 'delta(v range-vector)',
-      documentation:
-        'Calculates the difference between the first and last value of each time series element in a range vector `v`, returning an instant vector with the given deltas and equivalent labels. The delta is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if the sample values are all integers.',
-    },
-    {
-      insertText: 'deriv',
-      label: 'deriv',
-      detail: 'deriv(v range-vector)',
-      documentation:
-        'Calculates the per-second derivative of the time series in a range vector `v`, using simple linear regression.',
-    },
-    {
-      insertText: 'drop_common_labels',
-      label: 'drop_common_labels',
-      detail: 'drop_common_labels(instant-vector)',
-      documentation: 'Drops all labels that have the same name and value across all series in the input vector.',
-    },
-    {
-      insertText: 'exp',
-      label: 'exp',
-      detail: 'exp(v instant-vector)',
-      documentation:
-        'Calculates the exponential function for all elements in `v`.\nSpecial cases are:\n* `Exp(+Inf) = +Inf` \n* `Exp(NaN) = NaN`',
-    },
-    {
-      insertText: 'floor',
-      label: 'floor',
-      detail: 'floor(v instant-vector)',
-      documentation: 'Rounds the sample values of all elements in `v` down to the nearest integer.',
-    },
-    {
-      insertText: 'histogram_quantile',
-      label: 'histogram_quantile',
-      detail: 'histogram_quantile(φ float, b instant-vector)',
-      documentation:
-        'Calculates the φ-quantile (0 ≤ φ ≤ 1) from the buckets `b` of a histogram. The samples in `b` are the counts of observations in each bucket. Each sample must have a label `le` where the label value denotes the inclusive upper bound of the bucket. (Samples without such a label are silently ignored.) The histogram metric type automatically provides time series with the `_bucket` suffix and the appropriate labels.',
-    },
-    {
-      insertText: 'holt_winters',
-      label: 'holt_winters',
-      detail: 'holt_winters(v range-vector, sf scalar, tf scalar)',
-      documentation:
-        'Produces a smoothed value for time series based on the range in `v`. The lower the smoothing factor `sf`, the more importance is given to old data. The higher the trend factor `tf`, the more trends in the data is considered. Both `sf` and `tf` must be between 0 and 1.',
-    },
-    {
-      insertText: 'hour',
-      label: 'hour',
-      detail: 'hour(v=vector(time()) instant-vector)',
-      documentation: 'Returns the hour of the day for each of the given times in UTC. Returned values are from 0 to 23.',
-    },
-    {
-      insertText: 'idelta',
-      label: 'idelta',
-      detail: 'idelta(v range-vector)',
-      documentation:
-        'Calculates the difference between the last two samples in the range vector `v`, returning an instant vector with the given deltas and equivalent labels.',
-    },
-    {
-      insertText: 'increase',
-      label: 'increase',
-      detail: 'increase(v range-vector)',
-      documentation:
-        'Calculates the increase in the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. The increase is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if a counter increases only by integer increments.',
-    },
-    {
-      insertText: 'irate',
-      label: 'irate',
-      detail: 'irate(v range-vector)',
-      documentation:
-        'Calculates the per-second instant rate of increase of the time series in the range vector. This is based on the last two data points. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for.',
-    },
-    {
-      insertText: 'label_replace',
-      label: 'label_replace',
-      detail: 'label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)',
-      documentation:
-        "For each timeseries in `v`, `label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)`  matches the regular expression `regex` against the label `src_label`.  If it matches, then the timeseries is returned with the label `dst_label` replaced by the expansion of `replacement`. `$1` is replaced with the first matching subgroup, `$2` with the second etc. If the regular expression doesn't match then the timeseries is returned unchanged.",
-    },
-    {
-      insertText: 'ln',
-      label: 'ln',
-      detail: 'ln(v instant-vector)',
-      documentation:
-        'calculates the natural logarithm for all elements in `v`.\nSpecial cases are:\n * `ln(+Inf) = +Inf`\n * `ln(0) = -Inf`\n * `ln(x < 0) = NaN`\n * `ln(NaN) = NaN`',
-    },
-    {
-      insertText: 'log2',
-      label: 'log2',
-      detail: 'log2(v instant-vector)',
-      documentation:
-        'Calculates the binary logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.',
-    },
-    {
-      insertText: 'log10',
-      label: 'log10',
-      detail: 'log10(v instant-vector)',
-      documentation:
-        'Calculates the decimal logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.',
-    },
-    {
-      insertText: 'minute',
-      label: 'minute',
-      detail: 'minute(v=vector(time()) instant-vector)',
-      documentation:
-        'Returns the minute of the hour for each of the given times in UTC. Returned values are from 0 to 59.',
-    },
-    {
-      insertText: 'month',
-      label: 'month',
-      detail: 'month(v=vector(time()) instant-vector)',
-      documentation:
-        'Returns the month of the year for each of the given times in UTC. Returned values are from 1 to 12, where 1 means January etc.',
-    },
-    {
-      insertText: 'predict_linear',
-      label: 'predict_linear',
-      detail: 'predict_linear(v range-vector, t scalar)',
-      documentation:
-        'Predicts the value of time series `t` seconds from now, based on the range vector `v`, using simple linear regression.',
-    },
-    {
-      insertText: 'rate',
-      label: 'rate',
-      detail: 'rate(v range-vector)',
-      documentation:
-        "Calculates the per-second average rate of increase of the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. Also, the calculation extrapolates to the ends of the time range, allowing for missed scrapes or imperfect alignment of scrape cycles with the range's time period.",
-    },
-    {
-      insertText: 'resets',
-      label: 'resets',
-      detail: 'resets(v range-vector)',
-      documentation:
-        'For each input time series, `resets(v range-vector)` returns the number of counter resets within the provided time range as an instant vector. Any decrease in the value between two consecutive samples is interpreted as a counter reset.',
-    },
-    {
-      insertText: 'round',
-      label: 'round',
-      detail: 'round(v instant-vector, to_nearest=1 scalar)',
-      documentation:
-        'Rounds the sample values of all elements in `v` to the nearest integer. Ties are resolved by rounding up. The optional `to_nearest` argument allows specifying the nearest multiple to which the sample values should be rounded. This multiple may also be a fraction.',
-    },
-    {
-      insertText: 'scalar',
-      label: 'scalar',
-      detail: 'scalar(v instant-vector)',
-      documentation:
-        'Given a single-element input vector, `scalar(v instant-vector)` returns the sample value of that single element as a scalar. If the input vector does not have exactly one element, `scalar` will return `NaN`.',
-    },
-    {
-      insertText: 'sort',
-      label: 'sort',
-      detail: 'sort(v instant-vector)',
-      documentation: 'Returns vector elements sorted by their sample values, in ascending order.',
-    },
-    {
-      insertText: 'sort_desc',
-      label: 'sort_desc',
-      detail: 'sort_desc(v instant-vector)',
-      documentation: 'Returns vector elements sorted by their sample values, in descending order.',
-    },
-    {
-      insertText: 'sqrt',
-      label: 'sqrt',
-      detail: 'sqrt(v instant-vector)',
-      documentation: 'Calculates the square root of all elements in `v`.',
-    },
-    {
-      insertText: 'time',
-      label: 'time',
-      detail: 'time()',
-      documentation:
-        'Returns the number of seconds since January 1, 1970 UTC. Note that this does not actually return the current time, but the time at which the expression is to be evaluated.',
-    },
-    {
-      insertText: 'vector',
-      label: 'vector',
-      detail: 'vector(s scalar)',
-      documentation: 'Returns the scalar `s` as a vector with no labels.',
-    },
-    {
-      insertText: 'year',
-      label: 'year',
-      detail: 'year(v=vector(time()) instant-vector)',
-      documentation: 'Returns the year for each of the given times in UTC.',
-    },
-    {
-      insertText: 'avg_over_time',
-      label: 'avg_over_time',
-      detail: 'avg_over_time(range-vector)',
-      documentation: 'The average value of all points in the specified interval.',
-    },
-    {
-      insertText: 'min_over_time',
-      label: 'min_over_time',
-      detail: 'min_over_time(range-vector)',
-      documentation: 'The minimum value of all points in the specified interval.',
-    },
-    {
-      insertText: 'max_over_time',
-      label: 'max_over_time',
-      detail: 'max_over_time(range-vector)',
-      documentation: 'The maximum value of all points in the specified interval.',
-    },
-    {
-      insertText: 'sum_over_time',
-      label: 'sum_over_time',
-      detail: 'sum_over_time(range-vector)',
-      documentation: 'The sum of all values in the specified interval.',
-    },
-    {
-      insertText: 'count_over_time',
-      label: 'count_over_time',
-      detail: 'count_over_time(range-vector)',
-      documentation: 'The count of all values in the specified interval.',
-    },
-    {
-      insertText: 'quantile_over_time',
-      label: 'quantile_over_time',
-      detail: 'quantile_over_time(scalar, range-vector)',
-      documentation: 'The φ-quantile (0 ≤ φ ≤ 1) of the values in the specified interval.',
-    },
-    {
-      insertText: 'stddev_over_time',
-      label: 'stddev_over_time',
-      detail: 'stddev_over_time(range-vector)',
-      documentation: 'The population standard deviation of the values in the specified interval.',
-    },
-    {
-      insertText: 'stdvar_over_time',
-      label: 'stdvar_over_time',
-      detail: 'stdvar_over_time(range-vector)',
-      documentation: 'The population standard variance of the values in the specified interval.',
-    },
-  ]
-
-  const rateRange=[
-    {
-      insertText:'1m',
-      label:'1m'
-    },
-    {
-      insertText:'5m',
-      label:'5m'
-    },
-    {
-      insertText:'10m',
-      label:'10m'
-    },
-    {
-      insertText:'30m',
-      label:'30m'
-    },
-    {
-      insertText:'1h',
-      label:'1h'
-    },
-  ]
-  export default {
-    getOperators:function(){
-      return JSON.parse(JSON.stringify(operators));
-    },
-
-    getFunctions:function(){
-      return JSON.parse(JSON.stringify(funcs))
-    },
-
-    getRateRange:function(){
-      return JSON.parse(JSON.stringify(rateRange))
-    }
+const operators = [
+  {
+    label: 'sum',
+    insertText: 'sum',
+    documentation: 'Calculate sum over dimensions'
+  },
+  {
+    label: 'min',
+    insertText: 'min',
+    documentation: 'Select minimum over dimensions'
+  },
+  {
+    label: 'max',
+    insertText: 'max',
+    documentation: 'Select maximum over dimensions'
+  },
+  {
+    label: 'avg',
+    insertText: 'avg',
+    documentation: 'Calculate the average over dimensions'
+  },
+  {
+    label: 'stddev',
+    insertText: 'stddev',
+    documentation: 'Calculate population standard deviation over dimensions'
+  },
+  {
+    label: 'stdvar',
+    insertText: 'stdvar',
+    documentation: 'Calculate population standard variance over dimensions'
+  },
+  {
+    label: 'count',
+    insertText: 'count',
+    documentation: 'Count number of elements in the vector'
+  },
+  {
+    label: 'count_values',
+    insertText: 'count_values',
+    documentation: 'Count number of elements with the same value'
+  },
+  {
+    label: 'bottomk',
+    insertText: 'bottomk',
+    documentation: 'Smallest k elements by sample value'
+  },
+  {
+    label: 'topk',
+    insertText: 'topk',
+    documentation: 'Largest k elements by sample value'
+  },
+  {
+    label: 'quantile',
+    insertText: 'quantile',
+    documentation: 'Calculate φ-quantile (0 ≤ φ ≤ 1) over dimensions'
   }
+]
+const funcs = [
+  ...operators,
+  {
+    insertText: 'abs',
+    label: 'abs',
+    detail: 'abs(v instant-vector)',
+    documentation: 'Returns the input vector with all sample values converted to their absolute value.'
+  },
+  {
+    insertText: 'absent',
+    label: 'absent',
+    detail: 'absent(v instant-vector)',
+    documentation:
+        'Returns an empty vector if the vector passed to it has any elements and a 1-element vector with the value 1 if the vector passed to it has no elements. This is useful for alerting on when no time series exist for a given metric name and label combination.'
+  },
+  {
+    insertText: 'ceil',
+    label: 'ceil',
+    detail: 'ceil(v instant-vector)',
+    documentation: 'Rounds the sample values of all elements in `v` up to the nearest integer.'
+  },
+  {
+    insertText: 'changes',
+    label: 'changes',
+    detail: 'changes(v range-vector)',
+    documentation:
+        'For each input time series, `changes(v range-vector)` returns the number of times its value has changed within the provided time range as an instant vector.'
+  },
+  {
+    insertText: 'clamp_max',
+    label: 'clamp_max',
+    detail: 'clamp_max(v instant-vector, max scalar)',
+    documentation: 'Clamps the sample values of all elements in `v` to have an upper limit of `max`.'
+  },
+  {
+    insertText: 'clamp_min',
+    label: 'clamp_min',
+    detail: 'clamp_min(v instant-vector, min scalar)',
+    documentation: 'Clamps the sample values of all elements in `v` to have a lower limit of `min`.'
+  },
+  {
+    insertText: 'count_scalar',
+    label: 'count_scalar',
+    detail: 'count_scalar(v instant-vector)',
+    documentation:
+        'Returns the number of elements in a time series vector as a scalar. This is in contrast to the `count()` aggregation operator, which always returns a vector (an empty one if the input vector is empty) and allows grouping by labels via a `by` clause.'
+  },
+  {
+    insertText: 'day_of_month',
+    label: 'day_of_month',
+    detail: 'day_of_month(v=vector(time()) instant-vector)',
+    documentation: 'Returns the day of the month for each of the given times in UTC. Returned values are from 1 to 31.'
+  },
+  {
+    insertText: 'day_of_week',
+    label: 'day_of_week',
+    detail: 'day_of_week(v=vector(time()) instant-vector)',
+    documentation:
+        'Returns the day of the week for each of the given times in UTC. Returned values are from 0 to 6, where 0 means Sunday etc.'
+  },
+  {
+    insertText: 'days_in_month',
+    label: 'days_in_month',
+    detail: 'days_in_month(v=vector(time()) instant-vector)',
+    documentation:
+        'Returns number of days in the month for each of the given times in UTC. Returned values are from 28 to 31.'
+  },
+  {
+    insertText: 'delta',
+    label: 'delta',
+    detail: 'delta(v range-vector)',
+    documentation:
+        'Calculates the difference between the first and last value of each time series element in a range vector `v`, returning an instant vector with the given deltas and equivalent labels. The delta is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if the sample values are all integers.'
+  },
+  {
+    insertText: 'deriv',
+    label: 'deriv',
+    detail: 'deriv(v range-vector)',
+    documentation:
+        'Calculates the per-second derivative of the time series in a range vector `v`, using simple linear regression.'
+  },
+  {
+    insertText: 'drop_common_labels',
+    label: 'drop_common_labels',
+    detail: 'drop_common_labels(instant-vector)',
+    documentation: 'Drops all labels that have the same name and value across all series in the input vector.'
+  },
+  {
+    insertText: 'exp',
+    label: 'exp',
+    detail: 'exp(v instant-vector)',
+    documentation:
+        'Calculates the exponential function for all elements in `v`.\nSpecial cases are:\n* `Exp(+Inf) = +Inf` \n* `Exp(NaN) = NaN`'
+  },
+  {
+    insertText: 'floor',
+    label: 'floor',
+    detail: 'floor(v instant-vector)',
+    documentation: 'Rounds the sample values of all elements in `v` down to the nearest integer.'
+  },
+  {
+    insertText: 'histogram_quantile',
+    label: 'histogram_quantile',
+    detail: 'histogram_quantile(φ float, b instant-vector)',
+    documentation:
+        'Calculates the φ-quantile (0 ≤ φ ≤ 1) from the buckets `b` of a histogram. The samples in `b` are the counts of observations in each bucket. Each sample must have a label `le` where the label value denotes the inclusive upper bound of the bucket. (Samples without such a label are silently ignored.) The histogram metric type automatically provides time series with the `_bucket` suffix and the appropriate labels.'
+  },
+  {
+    insertText: 'holt_winters',
+    label: 'holt_winters',
+    detail: 'holt_winters(v range-vector, sf scalar, tf scalar)',
+    documentation:
+        'Produces a smoothed value for time series based on the range in `v`. The lower the smoothing factor `sf`, the more importance is given to old data. The higher the trend factor `tf`, the more trends in the data is considered. Both `sf` and `tf` must be between 0 and 1.'
+  },
+  {
+    insertText: 'hour',
+    label: 'hour',
+    detail: 'hour(v=vector(time()) instant-vector)',
+    documentation: 'Returns the hour of the day for each of the given times in UTC. Returned values are from 0 to 23.'
+  },
+  {
+    insertText: 'idelta',
+    label: 'idelta',
+    detail: 'idelta(v range-vector)',
+    documentation:
+        'Calculates the difference between the last two samples in the range vector `v`, returning an instant vector with the given deltas and equivalent labels.'
+  },
+  {
+    insertText: 'increase',
+    label: 'increase',
+    detail: 'increase(v range-vector)',
+    documentation:
+        'Calculates the increase in the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. The increase is extrapolated to cover the full time range as specified in the range vector selector, so that it is possible to get a non-integer result even if a counter increases only by integer increments.'
+  },
+  {
+    insertText: 'irate',
+    label: 'irate',
+    detail: 'irate(v range-vector)',
+    documentation:
+        'Calculates the per-second instant rate of increase of the time series in the range vector. This is based on the last two data points. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for.'
+  },
+  {
+    insertText: 'label_replace',
+    label: 'label_replace',
+    detail: 'label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)',
+    documentation:
+        "For each timeseries in `v`, `label_replace(v instant-vector, dst_label string, replacement string, src_label string, regex string)`  matches the regular expression `regex` against the label `src_label`.  If it matches, then the timeseries is returned with the label `dst_label` replaced by the expansion of `replacement`. `$1` is replaced with the first matching subgroup, `$2` with the second etc. If the regular expression doesn't match then the timeseries is returned unchanged."
+  },
+  {
+    insertText: 'ln',
+    label: 'ln',
+    detail: 'ln(v instant-vector)',
+    documentation:
+        'calculates the natural logarithm for all elements in `v`.\nSpecial cases are:\n * `ln(+Inf) = +Inf`\n * `ln(0) = -Inf`\n * `ln(x < 0) = NaN`\n * `ln(NaN) = NaN`'
+  },
+  {
+    insertText: 'log2',
+    label: 'log2',
+    detail: 'log2(v instant-vector)',
+    documentation:
+        'Calculates the binary logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.'
+  },
+  {
+    insertText: 'log10',
+    label: 'log10',
+    detail: 'log10(v instant-vector)',
+    documentation:
+        'Calculates the decimal logarithm for all elements in `v`. The special cases are equivalent to those in `ln`.'
+  },
+  {
+    insertText: 'minute',
+    label: 'minute',
+    detail: 'minute(v=vector(time()) instant-vector)',
+    documentation:
+        'Returns the minute of the hour for each of the given times in UTC. Returned values are from 0 to 59.'
+  },
+  {
+    insertText: 'month',
+    label: 'month',
+    detail: 'month(v=vector(time()) instant-vector)',
+    documentation:
+        'Returns the month of the year for each of the given times in UTC. Returned values are from 1 to 12, where 1 means January etc.'
+  },
+  {
+    insertText: 'predict_linear',
+    label: 'predict_linear',
+    detail: 'predict_linear(v range-vector, t scalar)',
+    documentation:
+        'Predicts the value of time series `t` seconds from now, based on the range vector `v`, using simple linear regression.'
+  },
+  {
+    insertText: 'rate',
+    label: 'rate',
+    detail: 'rate(v range-vector)',
+    documentation:
+        "Calculates the per-second average rate of increase of the time series in the range vector. Breaks in monotonicity (such as counter resets due to target restarts) are automatically adjusted for. Also, the calculation extrapolates to the ends of the time range, allowing for missed scrapes or imperfect alignment of scrape cycles with the range's time period."
+  },
+  {
+    insertText: 'resets',
+    label: 'resets',
+    detail: 'resets(v range-vector)',
+    documentation:
+        'For each input time series, `resets(v range-vector)` returns the number of counter resets within the provided time range as an instant vector. Any decrease in the value between two consecutive samples is interpreted as a counter reset.'
+  },
+  {
+    insertText: 'round',
+    label: 'round',
+    detail: 'round(v instant-vector, to_nearest=1 scalar)',
+    documentation:
+        'Rounds the sample values of all elements in `v` to the nearest integer. Ties are resolved by rounding up. The optional `to_nearest` argument allows specifying the nearest multiple to which the sample values should be rounded. This multiple may also be a fraction.'
+  },
+  {
+    insertText: 'scalar',
+    label: 'scalar',
+    detail: 'scalar(v instant-vector)',
+    documentation:
+        'Given a single-element input vector, `scalar(v instant-vector)` returns the sample value of that single element as a scalar. If the input vector does not have exactly one element, `scalar` will return `NaN`.'
+  },
+  {
+    insertText: 'sort',
+    label: 'sort',
+    detail: 'sort(v instant-vector)',
+    documentation: 'Returns vector elements sorted by their sample values, in ascending order.'
+  },
+  {
+    insertText: 'sort_desc',
+    label: 'sort_desc',
+    detail: 'sort_desc(v instant-vector)',
+    documentation: 'Returns vector elements sorted by their sample values, in descending order.'
+  },
+  {
+    insertText: 'sqrt',
+    label: 'sqrt',
+    detail: 'sqrt(v instant-vector)',
+    documentation: 'Calculates the square root of all elements in `v`.'
+  },
+  {
+    insertText: 'time',
+    label: 'time',
+    detail: 'time()',
+    documentation:
+        'Returns the number of seconds since January 1, 1970 UTC. Note that this does not actually return the current time, but the time at which the expression is to be evaluated.'
+  },
+  {
+    insertText: 'vector',
+    label: 'vector',
+    detail: 'vector(s scalar)',
+    documentation: 'Returns the scalar `s` as a vector with no labels.'
+  },
+  {
+    insertText: 'year',
+    label: 'year',
+    detail: 'year(v=vector(time()) instant-vector)',
+    documentation: 'Returns the year for each of the given times in UTC.'
+  },
+  {
+    insertText: 'avg_over_time',
+    label: 'avg_over_time',
+    detail: 'avg_over_time(range-vector)',
+    documentation: 'The average value of all points in the specified interval.'
+  },
+  {
+    insertText: 'min_over_time',
+    label: 'min_over_time',
+    detail: 'min_over_time(range-vector)',
+    documentation: 'The minimum value of all points in the specified interval.'
+  },
+  {
+    insertText: 'max_over_time',
+    label: 'max_over_time',
+    detail: 'max_over_time(range-vector)',
+    documentation: 'The maximum value of all points in the specified interval.'
+  },
+  {
+    insertText: 'sum_over_time',
+    label: 'sum_over_time',
+    detail: 'sum_over_time(range-vector)',
+    documentation: 'The sum of all values in the specified interval.'
+  },
+  {
+    insertText: 'count_over_time',
+    label: 'count_over_time',
+    detail: 'count_over_time(range-vector)',
+    documentation: 'The count of all values in the specified interval.'
+  },
+  {
+    insertText: 'quantile_over_time',
+    label: 'quantile_over_time',
+    detail: 'quantile_over_time(scalar, range-vector)',
+    documentation: 'The φ-quantile (0 ≤ φ ≤ 1) of the values in the specified interval.'
+  },
+  {
+    insertText: 'stddev_over_time',
+    label: 'stddev_over_time',
+    detail: 'stddev_over_time(range-vector)',
+    documentation: 'The population standard deviation of the values in the specified interval.'
+  },
+  {
+    insertText: 'stdvar_over_time',
+    label: 'stdvar_over_time',
+    detail: 'stdvar_over_time(range-vector)',
+    documentation: 'The population standard variance of the values in the specified interval.'
+  }
+]
+
+const rateRange = [
+  {
+    insertText: '1m',
+    label: '1m'
+  },
+  {
+    insertText: '5m',
+    label: '5m'
+  },
+  {
+    insertText: '10m',
+    label: '10m'
+  },
+  {
+    insertText: '30m',
+    label: '30m'
+  },
+  {
+    insertText: '1h',
+    label: '1h'
+  }
+]
+export default {
+  getOperators: function () {
+    return JSON.parse(JSON.stringify(operators))
+  },
+
+  getFunctions: function () {
+    return JSON.parse(JSON.stringify(funcs))
+  },
+
+  getRateRange: function () {
+    return JSON.parse(JSON.stringify(rateRange))
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index b3dffaab9..358e978a6 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -15,7 +15,6 @@
         </div>
         <div slot="content-right" class="slot-content">
 
-
           <!--<div class="top-tools">
               <div class="float-right mr-10">
                 <el-date-picker size="mini" ref="calendar"
@@ -66,7 +65,7 @@
 
                     <el-row class="border-area" v-show="chartCount === 'multiple'">
                       <div style="height: 100%; overflow: auto;">
-                        <div class="chartBoxMul" v-for="(item, index) in lineList">
+                        <div v-for="item in lineList" :key="item" class="chartBoxMul">
                           <line-chart-block
                             :show-setting="false"
                             ref="editChartMultiple"
@@ -87,21 +86,21 @@
     </div>
 </template>
 <script>
-  import bus from '../../../libs/bus';
-  import metricSet from './metricSet';
-  import lineChartBlock from '../../charts/line-chart-block';
+import bus from '../../../libs/bus'
+import metricSet from './metricSet'
+import lineChartBlock from '../../charts/line-chart-block'
 
 export default {
-  name: "metricPreview",
+  name: 'metricPreview',
   components: {
     lineChartBlock,
     metricSet
   },
-  data() {
+  data () {
     return {
       filter: {
         start_time: '',
-        end_time: '',
+        end_time: ''
       },
       total: 0, // 总数
       selectedData: null, // 选中数据
@@ -111,264 +110,264 @@ export default {
       metricInfo: {}, // 保存参数信息
       chartCount: 'single', // multiple
       lineList: [], // 线列表
-      panelData: [], //panel列表
-      searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
-      //searchTime:[new Date().setMinutes(new Date().getMinutes()-1),new Date()],
+      panelData: [], // panel列表
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      // searchTime:[new Date().setMinutes(new Date().getMinutes()-1),new Date()],
       pickerOptions: {
         shortcuts: [
           {
-            text:  this.$t("dashboard.panel.recOne"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setHours(start.getHours() - 1);
-              picker.$emit('pick', [start, end]);
-            }
-          },{
-            text: this.$t("dashboard.panel.recFour"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setHours(start.getHours() - 4);
-              picker.$emit('pick', [start, end]);
+            text: this.$t('dashboard.panel.recOne'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setHours(start.getHours() - 1)
+              picker.$emit('pick', [start, end])
             }
           }, {
-            text: this.$t("dashboard.panel.recOneDay"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setDate(start.getDate() - 1);
-              picker.$emit('pick', [start, end]);
-            }
-          },  {
-            text: this.$t("dashboard.panel.yesterday"),
-            onClick(picker) {
-              const start = new Date();
-              const end = new Date();
-              start.setDate(start.getDate() - 1);
-              start.setHours(0);
-              start.setMinutes(0);
-              start.setSeconds(0);
-              end.setDate(end.getDate() - 1);
-              end.setHours(23);
-              end.setMinutes(59);
-              end.setSeconds(59);
-              picker.$emit('pick', [start, end]);
-            }
-          },{
-            text: this.$t("dashboard.panel.recSevenDay"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setDate(start.getDate() - 7);
-              picker.$emit('pick', [start, end]);
+            text: this.$t('dashboard.panel.recFour'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setHours(start.getHours() - 4)
+              picker.$emit('pick', [start, end])
             }
           }, {
-            text: this.$t("dashboard.panel.recOneMonth"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setDate(start.getDate() - 30);
-              picker.$emit('pick', [start, end]);
+            text: this.$t('dashboard.panel.recOneDay'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setDate(start.getDate() - 1)
+              picker.$emit('pick', [start, end])
             }
           }, {
-            text: this.$t("dashboard.panel.curMonth"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setDate(1);
-              start.setHours(0);
-              start.setMinutes(0);
-              picker.$emit('pick', [start, end]);
+            text: this.$t('dashboard.panel.yesterday'),
+            onClick (picker) {
+              const start = new Date()
+              const end = new Date()
+              start.setDate(start.getDate() - 1)
+              start.setHours(0)
+              start.setMinutes(0)
+              start.setSeconds(0)
+              end.setDate(end.getDate() - 1)
+              end.setHours(23)
+              end.setMinutes(59)
+              end.setSeconds(59)
+              picker.$emit('pick', [start, end])
             }
-          },{
-            text: this.$t("dashboard.panel.lastMonth"),
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setDate(1);
-              start.setMonth(start.getMonth() - 1);
-              end.setDate(0);
-              start.setStart();
-              end.setEnd();
-              picker.$emit('pick', [start, end]);
+          }, {
+            text: this.$t('dashboard.panel.recSevenDay'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setDate(start.getDate() - 7)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: this.$t('dashboard.panel.recOneMonth'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setDate(start.getDate() - 30)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: this.$t('dashboard.panel.curMonth'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setDate(1)
+              start.setHours(0)
+              start.setMinutes(0)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: this.$t('dashboard.panel.lastMonth'),
+            onClick (picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setDate(1)
+              start.setMonth(start.getMonth() - 1)
+              end.setDate(0)
+              start.setStart()
+              end.setEnd()
+              picker.$emit('pick', [start, end])
             }
           }]
-      },
+      }
     }
   },
   methods: {
-    jumpTo(data,id) {
-      //this.$store.state.assetData.moduleData = data;
-      //this.$store.state.assetData.selectedData = id;
-      bus.$emit("menu-change", data);
-      this.$store.state.showPanel.id = 0;
-      this.$store.state.showPanel.name = '';
+    jumpTo (data, id) {
+      // this.$store.state.assetData.moduleData = data;
+      // this.$store.state.assetData.selectedData = id;
+      bus.$emit('menu-change', data)
+      this.$store.state.showPanel.id = 0
+      this.$store.state.showPanel.name = ''
       this.$router.push({
-        path: "/" + data,
+        path: '/' + data,
         query: {
           t: +new Date()
         }
-      });
+      })
     },
     // 获取默认时间
-    getInit() {
-      const end = new Date();
-      const start = new Date();
-      start.setHours(start.getHours() - 1);
-      start.setSeconds(0);
-      end.setSeconds(59);
-      this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
-      this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
-      this.$refs.editChartSingle.setDivFirstShow(true);
+    getInit () {
+      const end = new Date()
+      const start = new Date()
+      start.setHours(start.getHours() - 1)
+      start.setSeconds(0)
+      end.setSeconds(59)
+      this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss')
+      this.$refs.editChartSingle.setDivFirstShow(true)
     },
-    dateChange(time) {
-      this.filter.start_time = `${time[0]}:00`;
-      this.filter.end_time = `${time[1]}:59`;
-      this.getChartParam(this.metricInfo, this.chartCount);
+    dateChange (time) {
+      this.filter.start_time = `${time[0]}:00`
+      this.filter.end_time = `${time[1]}:59`
+      this.getChartParam(this.metricInfo, this.chartCount)
       if (this.chartCount === 'single') {
-        this.$refs.editChartSingle.changeDate(this.searchTime);
+        this.$refs.editChartSingle.changeDate(this.searchTime)
       } else if (this.chartCount === 'multiple') {
         if (this.lineList.length > 0) {
           this.$refs.editChartMultiple.forEach((item) => {
-            item.changeDate(this.searchTime);
-          });
+            item.changeDate(this.searchTime)
+          })
         }
       }
     },
-    getPanelData() { //获取panel数据
+    getPanelData () { // 获取panel数据
       this.$get('panel?pageNo=1&pageSize=-1').then(response => {
         if (response.code === 200) {
-          this.panelData = response.data.list;
+          this.panelData = response.data.list
         }
-      });
+      })
     },
     // 获取图表信息
-    getChartParam(params, chartCount) {
-      this.chartCount = chartCount;
-      this.metricInfo = params;
+    getChartParam (params, chartCount) {
+      this.chartCount = chartCount
+      this.metricInfo = params
       if (this.chartCount === 'single') {
-        this.$refs.editChartSingle.showLoad();
+        this.$refs.editChartSingle.showLoad()
       } else if (this.chartCount === 'multiple') {
         if (this.lineList.length > 0) {
           this.$refs.editChartMultiple.forEach((item) => {
-            item.showLoad();
-          });
+            item.showLoad()
+          })
         }
       }
-      const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-      const endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-      this.filter.start_time = startTime;
-      this.filter.end_time = endTime;
-      let step = bus.getStep(startTime,endTime);
-      let query = encodeURIComponent(params.elements[0].expression);
-      this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => {
-        this.$refs.metricSet.loading = false;
+      const startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      const endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.start_time = startTime
+      this.filter.end_time = endTime
+      const step = bus.getStep(startTime, endTime)
+      const query = encodeURIComponent(params.elements[0].expression)
+      this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step).then(response => {
+        this.$refs.metricSet.loading = false
         if (response.status === 'success') {
           if (response.data.result) {
-            this.lineList = response.data.result;
+            this.lineList = response.data.result
             // 如果只有一组数据，强制显示一条
             if (response.data.result.length === 1) {
-              this.chartCount = 'single';
+              this.chartCount = 'single'
             }
             if (response.data.result.length === 0) {
-              this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
+              this.$refs.editChartSingle.setData(params, [], 0, this.filter, [])
             }
           }
-          this.getChartData(response, params);
-        }else {
-          this.chartCount = 'single';
+          this.getChartData(response, params)
+        } else {
+          this.chartCount = 'single'
           // 图表不可保存
-          this.$refs.metricSet.saveDisabled = true;
-          this.$refs.metricSet.isSave = false;
-          this.chartCount = 'single';
-          if(response.msg){
-            this.$message.error(response.msg);
-          }else if(response.error){
-            this.$message.error(response.error);
-          }else {
-            this.$message.error(response);
+          this.$refs.metricSet.saveDisabled = true
+          this.$refs.metricSet.isSave = false
+          this.chartCount = 'single'
+          if (response.msg) {
+            this.$message.error(response.msg)
+          } else if (response.error) {
+            this.$message.error(response.error)
+          } else {
+            this.$message.error(response)
           }
           this.$nextTick(() => {
-            this.$refs.editChartSingle.setData(params, [], 0, this.filter);
-          });
+            this.$refs.editChartSingle.setData(params, [], 0, this.filter)
+          })
         }
-      });
+      })
     },
 
     // 获取一个图表具体数据
-    getChartData(response, params) {
-      const chartItem = Object.assign({}, params);
-      chartItem.title = params.metric;
-      const series = [];
-      const legend = [];
+    getChartData (response, params) {
+      const chartItem = Object.assign({}, params)
+      chartItem.title = params.metric
+      const series = []
+      const legend = []
       // 一个图表
       response.data.result.forEach((queryItem) => {
         const seriesItem = {
           theData: {
             name: '',
-            symbol:'none',  //去掉点
-            smooth:0.2,  //曲线变平滑
+            symbol: 'none', // 去掉点
+            smooth: 0.2, // 曲线变平滑
             data: [],
-            type:chartItem.type ? chartItem.type : 'line',
-            //visible: true,
-            //threshold: null,
-            chartTitle:'',
+            type: chartItem.type ? chartItem.type : 'line',
+            // visible: true,
+            // threshold: null,
+            chartTitle: '',
             lineStyle: {
               width: 1,
               opacity: 0.9
-            },
+            }
           },
-          metric_name: '',
-        };
-        // 图表中每条线的名字,后半部分
-        //let host = `${queryItem.metric.__name__}`;//up,
-        let host = '';//up,
-        let charName='';
-        if(queryItem.metric.__name__){
-          host = `${queryItem.metric.__name__}`;//up,
-          charName = `${queryItem.metric.__name__}`;
+          metric_name: ''
         }
-        //let charName = `${queryItem.metric.__name__}`;
-        const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+        // 图表中每条线的名字,后半部分
+        // let host = `${queryItem.metric.__name__}`;//up,
+        let host = ''// up,
+        let charName = ''
+        if (queryItem.metric.__name__) {
+          host = `${queryItem.metric.__name__}`// up,
+          charName = `${queryItem.metric.__name__}`
+        }
+        // let charName = `${queryItem.metric.__name__}`;
+        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
         // 设置时间-数据格式对
-        const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+        const dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
         // 判断是否有数据, && tagsArr.length > 0
         if (dpsArr.length > 0) {
-            if(queryItem.metric.__name__){
-              host +="{";
+          if (queryItem.metric.__name__) {
+            host += '{'
+          }
+          tagsArr.forEach((tag, i) => {
+            if (tag !== '__name__') {
+              host += `${tag}="${queryItem.metric[tag]}",`
             }
-            tagsArr.forEach((tag, i) => {
-              if (tag !== '__name__') {
-                host += `${tag}="${queryItem.metric[tag]}",`;
-              }
 
-              if (tag === 'asset') {
-                let labVal= `${queryItem.metric[tag]}`;
-                if(labVal!==''){
-                  charName += `(${queryItem.metric[tag]})`;
-                }
+            if (tag === 'asset') {
+              const labVal = `${queryItem.metric[tag]}`
+              if (labVal !== '') {
+                charName += `(${queryItem.metric[tag]})`
               }
-            });
-          if(host.endsWith(',')){host = host.substr(0,host.length-1);}
-          if(queryItem.metric.__name__){
-            host +="}";
+            }
+          })
+          if (host.endsWith(',')) { host = host.substr(0, host.length - 1) }
+          if (queryItem.metric.__name__) {
+            host += '}'
           }
-          if(!host || host===''){
-            host = params.metric;
+          if (!host || host === '') {
+            host = params.metric
           }
-          let alias = params.metric;
-          legend.push({name:host,alias:alias});
+          const alias = params.metric
+          legend.push({ name: host, alias: alias })
 
           // 图表中每条线的名字,去掉最后的逗号与空格
-          seriesItem.theData.name = host;
-          seriesItem.theData.chartTitle =charName;
-          seriesItem.metric_name = seriesItem.theData.name;
+          seriesItem.theData.name = host
+          seriesItem.theData.chartTitle = charName
+          seriesItem.metric_name = seriesItem.theData.name
           // 将秒改为毫秒
           seriesItem.theData.data = queryItem.values.map(dpsItem =>
-            [dpsItem[0] * 1000, dpsItem[1]]);
-          series.push(seriesItem.theData);
-        } else {/*
+            [dpsItem[0] * 1000, dpsItem[1]])
+          series.push(seriesItem.theData)
+        } else { /*
           const errorMsg = `metric： ${params.metric} 和tags ${params.tags} 组合下无数据`;
           this.$message.error({
             duration: 15,
@@ -377,52 +376,51 @@ export default {
           });
           */
         }
-      });
+      })
       // 将获取的数据运用于创建多个图表备用
-      this.$refs.metricSet.setSeries(response.data.result,series);
+      this.$refs.metricSet.setSeries(response.data.result, series)
       if (this.chartCount === 'single') {
-        //this.setSize(chartItem.span, 0);
-        const filterParams = Object.assign({}, this.filter);
-        filterParams.chartCount = 'single';
+        // this.setSize(chartItem.span, 0);
+        const filterParams = Object.assign({}, this.filter)
+        filterParams.chartCount = 'single'
         this.$nextTick(() => {
-          this.$refs.editChartSingle.setData(chartItem, series, 0, filterParams,legend);
-        });
+          this.$refs.editChartSingle.setData(chartItem, series, 0, filterParams, legend)
+        })
       } else if (this.chartCount === 'multiple') {
-        const filterParams = Object.assign({}, this.filter);
-        filterParams.chartCount = 'multiple';
-        this.setSize(chartItem.span, 'all');
+        const filterParams = Object.assign({}, this.filter)
+        filterParams.chartCount = 'multiple'
+        this.setSize(chartItem.span, 'all')
         this.$nextTick(() => {
           series.forEach((serieData, index) => {
             // 设置每个图表名称
-            const chartInfoParams = Object.assign({}, chartItem);
-            chartInfoParams.title = serieData.chartTitle;
+            const chartInfoParams = Object.assign({}, chartItem)
+            chartInfoParams.title = serieData.chartTitle
             this.$refs.editChartMultiple[index]
-              .setData(chartInfoParams, [serieData], 0, filterParams,[legend[index]]);
-          });
-        });
+              .setData(chartInfoParams, [serieData], 0, filterParams, [legend[index]])
+          })
+        })
       }
     },
     // 设置图表的宽度
-    setSize(size, index) {
+    setSize (size, index) {
       this.$nextTick(() => {
-        const chartBox = document.getElementsByClassName('chartBox');
+        const chartBox = document.getElementsByClassName('chartBox')
         if (index === 0) {
-          chartBox[index].style.width = `${(size / 12) * 100}%`;
+          chartBox[index].style.width = `${(size / 12) * 100}%`
         } else {
-          const chartBoxMul = document.getElementsByClassName('chartBoxMul');
+          const chartBoxMul = document.getElementsByClassName('chartBoxMul')
           Array.prototype.slice.call(chartBoxMul).forEach((item) => {
-            const obj = item;
-            obj.style.width = `${(size / 12) * 100}%`;
-          });
+            const obj = item
+            obj.style.width = `${(size / 12) * 100}%`
+          })
         }
-      });
+      })
     },
-    refreshChart() {},
-    removeChart() {},
-    editData() {},
+    refreshChart () {},
+    removeChart () {},
+    editData () {}
     /*
 
-
 // 查看指标确认
 viewConfirm() {
   this.showTagModal = false;
@@ -450,9 +448,9 @@ refresh_scroll() {
 
  */
   },
-  mounted: function() {
-    this.getInit();
-    this.getPanelData();
+  mounted: function () {
+    this.getInit()
+    this.getPanelData()
   },
   watch: {
 
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index 795f08043..5aff83f06 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -42,12 +42,12 @@
   </div>
 </template>
 <script>
-//import axios from 'axios';
-import bus from '../../../libs/bus';
-//import chartMetric from "./chartMetricForPreview";
-import chartMetric from "./chartMetric";
-import chartBox from "./chartBox";
-//import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
+// import axios from 'axios';
+import bus from '../../../libs/bus'
+// import chartMetric from "./chartMetricForPreview";
+import chartMetric from './chartMetric'
+import chartBox from './chartBox'
+// import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
 
 export default {
   name: 'metricSet',
@@ -55,23 +55,23 @@ export default {
     panelData: Array
   },
   components: {
-    'chart-metric':chartMetric,
-    'chart-box':chartBox,
-    //'metric-pre-panel-box':metricPrePanelBox
+    'chart-metric': chartMetric,
+    'chart-box': chartBox
+    // 'metric-pre-panel-box':metricPrePanelBox
   },
-  data() {
+  data () {
     return {
       total: 0,
       loading: false, // 加载中
       chartModal: false, // 展示弹出框
-      //elements: [1], // 指标部分 tarNum
+      // elements: [1], // 指标部分 tarNum
       // 新建信息
-      /*chartInfo: {
+      /* chartInfo: {
         title: '', // 名称
         span: 12, // 宽度
         height: 400, // 高度
         type: 'line', // 类型
-      },*/
+      }, */
       chartId: 0,
       elements: [1], // 指标部分 tarNum
       elementTarget: {}, // 获取chartTag数据后保存
@@ -79,19 +79,19 @@ export default {
       spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       typeList: [
         {
-          id:"line",
-          name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
         {
-          id:"bar",
-          name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
         }
       ],
-      //productId: 0,
+      // productId: 0,
       panelId: 0,
       metricList: [], // metric列表
-      metricCascaderList:[],//metric级联列表
-      metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
+      metricCascaderList: [], // metric级联列表
+      metricAllData: new Map(), // 存放所有的project-module-metric-labelValue，避免重复加载
       isSave: false, // 是否要保存
       saveDisabled: true, // 不可保存
       createModal: false, // 创建看板panel
@@ -100,7 +100,7 @@ export default {
       chartSaveInfo: {
         title: '', // 图表名称
         name: '', // panel名称
-        panelId: '', // 选择以后panelId
+        panelId: '' // 选择以后panelId
       }, // 保存看板
       isCreatePanel: false,
       createModalTitle: '',
@@ -108,108 +108,108 @@ export default {
       metricInfo: {}, // 保存从chartTag中获取的seriesData
       createChartList: [], // 创建多个图表的图表信息
       seriesData: [], // 查询图表后生成的series信息,用于生成多个图表时提供图表title
-      series:[],//组织好的数据
-      panelItem: {}, // 保存看板信息
-    };
+      series: [], // 组织好的数据
+      panelItem: {} // 保存看板信息
+    }
   },
   computed: {
-    chartSwitchWord() {
-      const word = this.chartCount === 'single' ? this.$t('dashboard.metric.multiChartsShow'): this.$t('dashboard.metric.singleChartShow');
-      return word;
-    },
+    chartSwitchWord () {
+      const word = this.chartCount === 'single' ? this.$t('dashboard.metric.multiChartsShow') : this.$t('dashboard.metric.singleChartShow')
+      return word
+    }
   },
   watch: {},
   methods: {
     // 父级调用保存series,作为多个图表生成title
-    setSeries(data,series) {
-      this.seriesData = data;
-      this.series = series;
+    setSeries (data, series) {
+      this.seriesData = data
+      this.series = series
     },
-    reloadPanelData() { //刷新panelData
-      this.$emit("reloadPanel");
+    reloadPanelData () { // 刷新panelData
+      this.$emit('reloadPanel')
     },
-    createSuccess(type, response, param, panel) { //添加chart成功
-      this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
-        confirmButtonText: this.$t("tip.yes"),
-        cancelButtonText: this.$t("tip.no"),
+    createSuccess (type, response, param, panel) { // 添加chart成功
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
         type: 'success'
       }).then(() => {
-        bus.$emit("menu-change", 'panel');
-        this.$store.state.showPanel.id = panel.id;
-        this.$store.state.showPanel.name = panel.name;
+        bus.$emit('menu-change', 'panel')
+        this.$store.state.showPanel.id = panel.id
+        this.$store.state.showPanel.name = panel.name
         this.$router.push({
-          path: "/panel",
+          path: '/panel',
           query: {
             t: +new Date()
           }
-        });
-      });
+        })
+      })
     },
     // 默认打开
-    initOpen() {
-      this.getSuggestMetric();
+    initOpen () {
+      this.getSuggestMetric()
     },
     // chart-tag中条件更改时,触发不能创建
-    getCondition() {
-      this.saveDisabled = true;
+    getCondition () {
+      this.saveDisabled = true
     },
-    reload(){
-      this.saveDisabled = true;
-      this.elementTarget = {};
+    reload () {
+      this.saveDisabled = true
+      this.elementTarget = {}
     },
     // 创建看板
-    createNew() {
-      /*this.$refs.panelBox.show(true);
+    createNew () {
+      /* this.$refs.panelBox.show(true);
       //this.panel = {id: '', name: ''};
       this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
       this.$refs.panelBox.setIsCreatePanel(true);
-      this.$refs.panelBox.setChartTitle(this.metricInfo.metric);*/
+      this.$refs.panelBox.setChartTitle(this.metricInfo.metric); */
     },
     // 选择看板
-    selectPanel() {
-      /*this.$refs.panelBox.show(true);
+    selectPanel () {
+      /* this.$refs.panelBox.show(true);
       this.$refs.panelBox.setTitle(this.$t("dashboard.panel.selectPanelTitle"));
       this.$refs.panelBox.setIsCreatePanel(false);
       this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
-      this.$refs.panelBox.getTableData();*/
+      this.$refs.panelBox.getTableData(); */
     },
-    saveChart() { //新增chart
-      this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
-      this.$refs.addChartModal.show(true);
-      //console.log('1_+_+_+_+_+_+',JSON.stringify(this.metricInfo));
-      this.$refs.addChartModal.createData(-1, this.metricInfo);
+    saveChart () { // 新增chart
+      this.$refs.addChartModal.setTitle(this.$t('dashboard.panel.createChartTitle'))
+      this.$refs.addChartModal.show(true)
+      // console.log('1_+_+_+_+_+_+',JSON.stringify(this.metricInfo));
+      this.$refs.addChartModal.createData(-1, this.metricInfo)
+    },
+    // 删除指标,第一步, 新方法
+    deleteTarget (index) {
+      // alert('box第一步，循环所有的metric，为什么要循环？？');
+      this.deleteIndex = index
+      // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
+      this.$refs.chartTag.forEach((item) => {
+        // 子组件保存内容到bus
+        item.subSave()
+      })
+    },
+    // subSave保存成功后回调,第二步
+    subOk () {
+      // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
+      // alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
+      this.subCount += 1
+      if (this.subCount === this.elements.length) {
+        this.subCount = 0
+        // 保存完成,进行删除操作
+        // alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+        // alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+        this.elements.splice(this.deleteIndex, 1)
+        this.elementTarget.splice(this.deleteIndex, 1)// 没有作用，此处是[]
+        bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1)
+        // alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+        this.$nextTick(() => {
+          this.$refs.chartTag.forEach((item, index) => {
+            item.setSubdata(index) // 将数据从bus重新赋值
+          })
+        })
+      }
     },
-     // 删除指标,第一步, 新方法
-      deleteTarget(index) {
-        //alert('box第一步，循环所有的metric，为什么要循环？？');
-        this.deleteIndex = index;
-       // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
-        this.$refs.chartTag.forEach((item) => {
-          // 子组件保存内容到bus
-          item.subSave();
-        });
-      },
-       // subSave保存成功后回调,第二步
-      subOk() {
-        // 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
-        //alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
-        this.subCount += 1;
-        if (this.subCount === this.elements.length) {
-          this.subCount = 0;
-          // 保存完成,进行删除操作
-          //alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-          //alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-          this.elements.splice(this.deleteIndex, 1);
-          this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
-          bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
-          //alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-          this.$nextTick(() => {
-            this.$refs.chartTag.forEach((item, index) => {
-              item.setSubdata(index); // 将数据从bus重新赋值
-            });
-          });
-        }
-      },
 
     /*
     // 取消创建modal
@@ -240,61 +240,61 @@ export default {
     },
     */
     // 初始化信息
-    /*initInfo() {
+    /* initInfo() {
       this.chartInfo.title = '';
       this.chartInfo.type = 1;
       this.chartInfo.span = 12;
       this.chartInfo.height = 400;
       this.elements = [1];
       this.elementTarget = {};
-    },*/
+    }, */
     // 生成预览图表
-    preview(params) {
+    preview (params) {
       if (params === 'change') {
-        this.chartCount = this.chartCount === 'single' ? 'multiple' : 'single';
+        this.chartCount = this.chartCount === 'single' ? 'multiple' : 'single'
       }
-      this.elementTarget = {}; // 初始化清空参数
+      this.elementTarget = {} // 初始化清空参数
       // 触发每个tag组件内部进行校验
-      this.$refs.chartTag.saveTarget(0);
+      this.$refs.chartTag.saveTarget(0)
     },
     // 获取每个tag组件内部校验后数据,点击生成图表时触发
-    getTarget(target) {
+    getTarget (target) {
       // 由于条件限制，每次其实只有一个target
-      this.elementTarget = JSON.parse(JSON.stringify(target));
-      /*this.$refs.chartInfo.validate((valid) => {
-        if (valid) {*/
-          this.loading = true;
-          // 保存图表到看板
-          const params = {};
-          //const params = Object.assign({}, this.chartInfo);
+      this.elementTarget = JSON.parse(JSON.stringify(target))
+      /* this.$refs.chartInfo.validate((valid) => {
+        if (valid) { */
+      this.loading = true
+      // 保存图表到看板
+      const params = {}
+      // const params = Object.assign({}, this.chartInfo);
 
-          //params.tags = this.tagsToString(this.elementTarget.tagList);
-          const elements = [];
-          //params.elementTargetType = this.elementTarget.type;
-          if(this.elementTarget.type==='normal'){
-            const metricStr = bus.tagsToString(this.elementTarget.metric,this.elementTarget.selectedTagList);
-            //params.expression = metricStr;
-            elements.push({
-              expression: metricStr,
-              type: this.elementTarget.type,
-            });
-            params.metric = this.elementTarget.metric;
-          }else if(this.elementTarget.type==='expert'){
-            //params.expression = this.elementTarget.expression;
-            elements.push({
-              expression: this.elementTarget.expression,
-              type: this.elementTarget.type,
-            });
-            params.metric = this.elementTarget.expression;
-          }
-          params.elements = elements;
-          //params.expression
-          this.metricInfo = params;
-          this.saveDisabled = false; // 查询成功以后,可以进行保存操作
-          // 将参数返回,进行查询
-          this.$emit('on-view-chart', params, this.chartCount);
-        /*}
-      });*/
+      // params.tags = this.tagsToString(this.elementTarget.tagList);
+      const elements = []
+      // params.elementTargetType = this.elementTarget.type;
+      if (this.elementTarget.type === 'normal') {
+        const metricStr = bus.tagsToString(this.elementTarget.metric, this.elementTarget.selectedTagList)
+        // params.expression = metricStr;
+        elements.push({
+          expression: metricStr,
+          type: this.elementTarget.type
+        })
+        params.metric = this.elementTarget.metric
+      } else if (this.elementTarget.type === 'expert') {
+        // params.expression = this.elementTarget.expression;
+        elements.push({
+          expression: this.elementTarget.expression,
+          type: this.elementTarget.type
+        })
+        params.metric = this.elementTarget.expression
+      }
+      params.elements = elements
+      // params.expression
+      this.metricInfo = params
+      this.saveDisabled = false // 查询成功以后,可以进行保存操作
+      // 将参数返回,进行查询
+      this.$emit('on-view-chart', params, this.chartCount)
+      /* }
+      }); */
     },
     /*
     // 确认创建图表
@@ -478,73 +478,72 @@ export default {
     },
     */
     // 获取metric列表
-    getSuggestMetric() {
-      //this.$get('/prom/api/v1/label/__name__/values').then(response => {
+    getSuggestMetric () {
+      // this.$get('/prom/api/v1/label/__name__/values').then(response => {
       this.$get('/module?pageSize=-1').then(response => {
         if (response.code === 200) {
-          this.metricList = response.data.list;
-          const cascaderMap = new Map();
-          this.metricList.forEach((item,index) => {
-            let projectName = item.project.name;
-            let moduleName = item.name;
+          this.metricList = response.data.list
+          const cascaderMap = new Map()
+          this.metricList.forEach((item, index) => {
+            const projectName = item.project.name
+            const moduleName = item.name
             const childOption = {
               value: moduleName,
               label: moduleName,
-              children:[],
-            };
-            if(cascaderMap.has(projectName)){
-              cascaderMap.get(projectName).push(childOption);
-            }else {
-              let childArr = [];
-              childArr.push(childOption);
-              cascaderMap.set(projectName,childArr);
+              children: []
             }
-            //缓存全局数据
+            if (cascaderMap.has(projectName)) {
+              cascaderMap.get(projectName).push(childOption)
+            } else {
+              const childArr = []
+              childArr.push(childOption)
+              cascaderMap.set(projectName, childArr)
+            }
+            // 缓存全局数据
             const moduleItem = {
-              name:moduleName,
-              metricMap:new Map()
-            };
-            if(this.metricAllData.has(projectName)){
-              let moduleGroup = this.metricAllData.get(projectName);
-              this.metricAllData.get(projectName).push(moduleItem);
-            }else {
-              let moduleList = [];
-              moduleList.push(moduleItem);
-              this.metricAllData.set(projectName,moduleList);
+              name: moduleName,
+              metricMap: new Map()
             }
-          });
-          let metricCascaderArr = [];
-          cascaderMap.forEach(function(value,index){
+            if (this.metricAllData.has(projectName)) {
+              this.metricAllData.get(projectName).push(moduleItem)
+            } else {
+              const moduleList = []
+              moduleList.push(moduleItem)
+              this.metricAllData.set(projectName, moduleList)
+            }
+          })
+          const metricCascaderArr = []
+          cascaderMap.forEach(function (value, index) {
             const option = {
-              value: index+"_par",
+              value: index + '_par',
               label: index,
-              children:value,
-            };
-            metricCascaderArr.push(option);
-          });
+              children: value
+            }
+            metricCascaderArr.push(option)
+          })
 
-          this.metricCascaderList = metricCascaderArr;
-        }else {
-          this.metricList = [];
-          this.metricCascaderList = [];
+          this.metricCascaderList = metricCascaderArr
+        } else {
+          this.metricList = []
+          this.metricCascaderList = []
         }
       })
     },
     // 获取文本宽度
-    getWidth(str) {
-      const sensor = document.createElement('pre');
-      sensor.innerHTML = str;
-      sensor.style.display = 'inline-block';
-      sensor.style.width = 'auto';
-      sensor.style.visibility = 'hidden';
-      sensor.style.height = 0;
-      sensor.style.position = 'relative';
-      sensor.style['z-index'] = -10;
-      document.body.appendChild(sensor);
-      const width = sensor.offsetWidth;
-      document.body.removeChild(sensor);
-      return width;
-    },
+    getWidth (str) {
+      const sensor = document.createElement('pre')
+      sensor.innerHTML = str
+      sensor.style.display = 'inline-block'
+      sensor.style.width = 'auto'
+      sensor.style.visibility = 'hidden'
+      sensor.style.height = 0
+      sensor.style.position = 'relative'
+      sensor.style['z-index'] = -10
+      document.body.appendChild(sensor)
+      const width = sensor.offsetWidth
+      document.body.removeChild(sensor)
+      return width
+    }
     /*
     // 创建打开
     createData(panelId) {
@@ -570,23 +569,23 @@ export default {
     },
     */
   },
-  created() {
-    this.getSuggestMetric();
+  created () {
+    this.getSuggestMetric()
   },
-  mounted() {
-    //this.initOpen();
+  mounted () {
+    // this.initOpen();
     /*
     bus.$on('on-shrink-change', () => {
       this.preview();
     });
     */
   },
-  beforeDestroy() {
+  beforeDestroy () {
     /*
     bus.$off('on-shrink-change');
 
      */
-  },
-};
+  }
+}
 
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 06a8fdd53..007672a14 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -17,291 +17,289 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts';
-  import chartDataFormat from "../../../charts/chartDataFormat";
-  import loading from "../../../common/loading";
-  import chartConfig from './chartConfig'
-  import bus from "../../../../libs/bus";
-  import EleResize from "../../../common/js/divResize";
-  import {randomcolor} from "../../../common/js/radomcolor/randomcolor";
-  //import * as mapGeoJson from "../../../common/js/world";
+import * as echarts from 'echarts'
+import chartDataFormat from '../../../charts/chartDataFormat'
+import loading from '../../../common/loading'
+import chartConfig from './chartConfig'
+import bus from '../../../../libs/bus'
+import EleResize from '../../../common/js/divResize'
+import { randomcolor } from '../../../common/js/radomcolor/randomcolor'
+// import * as mapGeoJson from "../../../common/js/world";
 
-  export default {
-    name: "chart",
-    components:{
-      'loading':loading,
-    },
-    props:{
-      name: {type: String,default:'chart'},
-      unit:{type:Number,default:5},
-      chartTitle:{type:String},
-      showToolbox:{type:Boolean,default:true},
-      chartType:{type:String,default:'line'},
-      tooltipFormatter:Function,
-      yAxisFormatter:Function,
-      map:{},
-      axisTooltip: {type: String}, // x/y
-    },
-    data(){
-      return {
-        chart:null,
-        option:null,
-        optionSeriesAll:null,
-        chartId: this.name + '-'+this.guid()+'-'+new Date().getTime(),
-        legend:[],
-        legendAll:[],
-        colors:chartConfig.getBgColorList(),
-        noData:false,
-        dataSize:20,
-      }
-    },
-    created() {
-      this.option=chartConfig.getOption(this.chartType);
-      if(this.chartType==='ruleBar'){
-        this.option.yAxis.position='right';
-        this.option.yAxis.axisLabel.formatter=function(value) {
-          if (value.length > 15) {
-            return value.substring(0, 15) + "...";
-          }else{
-            return value
-          }
-
-        }
-      }
-      if(this.showToolbox == false){
-        //this.option.grid.top = 10;
-      }
-    },
-    methods:{
-      modifyOption:function(target,name,obj){
-        if(!this.option){
-          this.option=chartConfig.getOption(this.chartType);
-        }
-        this.$set(this.option[target],name,obj)
-      },
-      setLegend:function(legend){
-        this.legendAll=legend;
-        this.legend=legend.filter((item,index)=>index<this.dataSize);
-        this.resize();
-      },
-      getOption:function(){
-        return this.chart.getOption();
-      },
-      setOption:function(option){
-        this.chart.setOption(option)
-      },
-      setSeries:function(series, legend, legendData){
-        if(!this.chart){
-          this.chartInit();
-        }
-        this.series = series;
-        if(this.chartType == 'map'){
-          if(this.map){
-            echarts.registerMap(this.map.name, this.map.geoJson);
-            chartConfig.setMap(this.map.name);
-          }else{
-            console.error('map chart need map data');
-          }
-
-        }
-        if(!this.option){
-          this.option = chartConfig.getOption(this.chartType);
-        }
-        if (legend && legendData && legendData.length > 0) {
-          legend.formatter = function(name) {
-            let type = legendData.find(item => {
-              return item[0] == name;
-            });
-            return type ? `${name} (${type[1]}%)` : null;
-          };
-          this.$set(this.option, "legend", legend);
-        }
-
-        if(this.chartType == 'map'){
-          this.option.geo.regions = [];
-
-          let geoObj = this.map.geoJson.geoJson;
-          geoObj.features.forEach(item=>{
-            if (item.properties.NAME_0 == "Kazakhstan") {
-              this.option.geo.regions.push({
-                name: item.properties.NAME_1,
-                itemStyle: {areaColor: "#eee"},
-                label: {show: true}
-              });
-            }
-          });
-
-          let mapRoom = document.querySelector("#map");
-          let roomWidth = mapRoom.offsetWidth;
-          let roomHeight = mapRoom.offsetHeight;
-
-          let windowWidth = window.innerWidth;
-          let windowHeight = window.innerHeight;
-
-          let scaleWidth = roomWidth/1200;
-          let scaleHeight = roomHeight/700;
-
-          let kazCenter = [67.45, 44];
-          if (windowWidth > 2000) {
-            this.option.geo.center = kazCenter;
-            this.option.geo.zoom = 6;
-          } else if (windowWidth > 1600) {
-            this.option.geo.center = [kazCenter[0]*1.15, kazCenter[1]*0.93];
-            this.option.geo.zoom = 5;
-          } else {
-            this.option.geo.center = [kazCenter[0]*1.15*1.15, kazCenter[1]*0.93*0.93];
-            this.option.geo.zoom = 4;
-          }
-        }
-
-        this.modifyOption('tooltip','position',this.defaultTooltipPosition)
-
-        if (this.tooltipFormatter) {
-          this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
+export default {
+  name: 'chart',
+  components: {
+    loading: loading
+  },
+  props: {
+    name: { type: String, default: 'chart' },
+    unit: { type: Number, default: 5 },
+    chartTitle: { type: String },
+    showToolbox: { type: Boolean, default: true },
+    chartType: { type: String, default: 'line' },
+    tooltipFormatter: Function,
+    yAxisFormatter: Function,
+    map: {},
+    axisTooltip: { type: String } // x/y
+  },
+  data () {
+    return {
+      chart: null,
+      option: null,
+      optionSeriesAll: null,
+      chartId: this.name + '-' + this.guid() + '-' + new Date().getTime(),
+      legend: [],
+      legendAll: [],
+      colors: chartConfig.getBgColorList(),
+      noData: false,
+      dataSize: 20
+    }
+  },
+  created () {
+    this.option = chartConfig.getOption(this.chartType)
+    if (this.chartType === 'ruleBar') {
+      this.option.yAxis.position = 'right'
+      this.option.yAxis.axisLabel.formatter = function (value) {
+        if (value.length > 15) {
+          return value.substring(0, 15) + '...'
         } else {
-          this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
+          return value
         }
-
-        if(this.chartType == 'line' || this.chartType == 'overviewLine'){
-          this.option.xAxis.axisLabel.formatter=this.defaultXAxisFormatter;
-          this.option.toolbox.tooltip.formatter=this.defaultToolBoxFormatter;
-
-          if(this.yAxisFormatter){
-            this.option.yAxis.axisLabel.formatter=this.yAxisFormatter;
-          }else{
-            this.option.yAxis.axisLabel.formatter=this.defaultYAxisFormatter
-          }
+      }
+    }
+    if (this.showToolbox == false) {
+      // this.option.grid.top = 10;
+    }
+  },
+  methods: {
+    modifyOption: function (target, name, obj) {
+      if (!this.option) {
+        this.option = chartConfig.getOption(this.chartType)
+      }
+      this.$set(this.option[target], name, obj)
+    },
+    setLegend: function (legend) {
+      this.legendAll = legend
+      this.legend = legend.filter((item, index) => index < this.dataSize)
+      this.resize()
+    },
+    getOption: function () {
+      return this.chart.getOption()
+    },
+    setOption: function (option) {
+      this.chart.setOption(option)
+    },
+    setSeries: function (series, legend, legendData) {
+      if (!this.chart) {
+        this.chartInit()
+      }
+      this.series = series
+      if (this.chartType == 'map') {
+        if (this.map) {
+          echarts.registerMap(this.map.name, this.map.geoJson)
+          chartConfig.setMap(this.map.name)
+        } else {
+          console.error('map chart need map data')
         }
-        if(this.series){
-          this.$set(this.option,'series',this.series);
-          this.noData=false;
-          this.chart.clear();
-          this.optionSeriesAll=[...this.option.series];
-          if(this.option.series instanceof Array){
-            this.option.series=this.option.series.filter((item,index)=>index<this.dataSize);
-          }
-          console.log('option',this.option)
-          this.chart.setOption(this.option);
-        }else{
-          this.noData=true;
-          let option=chartConfig.getOption('noData');
-          this.chart.clear();
-          this.chart.setOption(option);
-        }
-
-        //坐标轴label鼠标悬浮提示
-        if (this.axisTooltip) {
-          let tooltipDom = document.querySelector(".axis-tooltip");
-          this.chart.on('mouseover', (params) => {
-            if(params.componentType == this.axisTooltip + "Axis") {
-              tooltipDom.style.display = "block";
-              tooltipDom.innerHTML = params.value;
-            }
-            this.$refs.chartRoom.addEventListener("mousemove", this.chartRoomMouseMove.bind("",event,tooltipDom));
-          });
-          this.chart.on('mouseout', (params) => {
-            if(params.componentType == this.axisTooltip + "Axis") {
-              tooltipDom.style.display = "";
-            }
-          });
-        }
-        this.resize();
-      },
-      chartRoomMouseMove(event,tooltipDom){
-        tooltipDom.style.top = event.pageY + "px";
-        tooltipDom.style.left = event.pageX-15 + "px";
-      },
-      resize() {
-        this.$nextTick(() => {
-          if(this.chart){
-            let height;
-            let width;
-            if (this.chartType == "map") {
-              height = 700;
-              width = 1200;
-            } else {
-              height = this.$el.clientHeight - document.querySelector("#legendArea").offsetHeight;
-              width=this.$el.clientWidth;
-            }
-            this.chart.resize({width:width,height:height});
-          }
-        });
-      },
-      mouseEnterChart(){
-        if (this.chart&&this.showToolbox) {
-          this.chart.setOption({
-            toolbox: {
-              show:true,
-            }
+      }
+      if (!this.option) {
+        this.option = chartConfig.getOption(this.chartType)
+      }
+      if (legend && legendData && legendData.length > 0) {
+        legend.formatter = function (name) {
+          const type = legendData.find(item => {
+            return item[0] == name
           })
+          return type ? `${name} (${type[1]}%)` : null
         }
-      },
-      mouseLeaveChart(){
+        this.$set(this.option, 'legend', legend)
+      }
+
+      if (this.chartType == 'map') {
+        this.option.geo.regions = []
+
+        const geoObj = this.map.geoJson.geoJson
+        geoObj.features.forEach(item => {
+          if (item.properties.NAME_0 == 'Kazakhstan') {
+            this.option.geo.regions.push({
+              name: item.properties.NAME_1,
+              itemStyle: { areaColor: '#eee' },
+              label: { show: true }
+            })
+          }
+        })
+
+        // const mapRoom = document.querySelector('#map')
+        // const roomWidth = mapRoom.offsetWidth
+        // const roomHeight = mapRoom.offsetHeight
+
+        const windowWidth = window.innerWidth
+        /* const windowHeight = window.innerHeight
+
+        const scaleWidth = roomWidth / 1200
+        const scaleHeight = roomHeight / 700 */
+
+        const kazCenter = [67.45, 44]
+        if (windowWidth > 2000) {
+          this.option.geo.center = kazCenter
+          this.option.geo.zoom = 6
+        } else if (windowWidth > 1600) {
+          this.option.geo.center = [kazCenter[0] * 1.15, kazCenter[1] * 0.93]
+          this.option.geo.zoom = 5
+        } else {
+          this.option.geo.center = [kazCenter[0] * 1.15 * 1.15, kazCenter[1] * 0.93 * 0.93]
+          this.option.geo.zoom = 4
+        }
+      }
+
+      this.modifyOption('tooltip', 'position', this.defaultTooltipPosition)
+
+      if (this.tooltipFormatter) {
+        this.modifyOption('tooltip', 'formatter', this.tooltipFormatter)
+      } else {
+        this.modifyOption('tooltip', 'formatter', this.defaultTooltipFormatter)
+      }
+
+      if (this.chartType == 'line' || this.chartType == 'overviewLine') {
+        this.option.xAxis.axisLabel.formatter = this.defaultXAxisFormatter
+        this.option.toolbox.tooltip.formatter = this.defaultToolBoxFormatter
+
+        if (this.yAxisFormatter) {
+          this.option.yAxis.axisLabel.formatter = this.yAxisFormatter
+        } else {
+          this.option.yAxis.axisLabel.formatter = this.defaultYAxisFormatter
+        }
+      }
+      if (this.series) {
+        this.$set(this.option, 'series', this.series)
+        this.noData = false
+        this.chart.clear()
+        this.optionSeriesAll = [...this.option.series]
+        if (this.option.series instanceof Array) {
+          this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
+        }
+        console.log('option', this.option)
+        this.chart.setOption(this.option)
+      } else {
+        this.noData = true
+        const option = chartConfig.getOption('noData')
+        this.chart.clear()
+        this.chart.setOption(option)
+      }
+
+      // 坐标轴label鼠标悬浮提示
+      if (this.axisTooltip) {
+        const tooltipDom = document.querySelector('.axis-tooltip')
+        this.chart.on('mouseover', (params) => {
+          if (params.componentType == this.axisTooltip + 'Axis') {
+            tooltipDom.style.display = 'block'
+            tooltipDom.innerHTML = params.value
+          }
+          this.$refs.chartRoom.addEventListener('mousemove', this.chartRoomMouseMove.bind('', event, tooltipDom))
+        })
+        this.chart.on('mouseout', (params) => {
+          if (params.componentType == this.axisTooltip + 'Axis') {
+            tooltipDom.style.display = ''
+          }
+        })
+      }
+      this.resize()
+    },
+    chartRoomMouseMove (event, tooltipDom) {
+      tooltipDom.style.top = event.pageY + 'px'
+      tooltipDom.style.left = event.pageX - 15 + 'px'
+    },
+    resize () {
+      this.$nextTick(() => {
         if (this.chart) {
-          this.chart.setOption({
-            toolbox: {
-              show:false,
-            }
-          })
+          let height
+          let width
+          if (this.chartType == 'map') {
+            height = 700
+            width = 1200
+          } else {
+            height = this.$el.clientHeight - document.querySelector('#legendArea').offsetHeight
+            width = this.$el.clientWidth
+          }
+          this.chart.resize({ width: width, height: height })
         }
-      },
-      getBgColor:function(index){
-        let color=this.colors[index];
-        return color;
-      },
-      clickLegend(legendName,index){
-        /*点击legend
+      })
+    },
+    mouseEnterChart () {
+      if (this.chart && this.showToolbox) {
+        this.chart.setOption({
+          toolbox: {
+            show: true
+          }
+        })
+      }
+    },
+    mouseLeaveChart () {
+      if (this.chart) {
+        this.chart.setOption({
+          toolbox: {
+            show: false
+          }
+        })
+      }
+    },
+    getBgColor: function (index) {
+      const color = this.colors[index]
+      return color
+    },
+    clickLegend (legendName, index) {
+      /* 点击legend
         * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
         * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
         * 3.否则只改变被点击的legend状态
         * */
-        let highlightNum = 0; //高亮数量
-        this.legend.forEach(g => {
-          if (!g.isGray) {
-            highlightNum++;
-          }
-        });
-        let hasGray = highlightNum < this.legend.length; //是否有置灰的
-        let curIsGray = this.legend[index].isGray; //当前legend的状态
-        let currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1; //当前legend是否是目前唯一高亮的
-
-        let echart = this.chart;
-        if (echart) {
-          if (!hasGray) { //1.除当前legend外全置灰
-            echart.dispatchAction({
-              type: 'legendInverseSelect'
-            });
-            echart.dispatchAction({
-              type: 'legendSelect',
-              name: legendName
-            });
-            this.legend = this.legend.map((g, i) => {
-              if (i === index) {
-                g.isGray = false;
-              } else {
-                g.isGray = true;
-              }
-              return g;
-            });
-          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
-            echart.dispatchAction({
-              type: 'legendAllSelect'
-            });
-            this.legend = this.legend.map(g => {
-              g.isGray = false;
-              return g;
-            });
-          } else {
-            let type = curIsGray ? "legendSelect" : "legendUnSelect";
-            echart.dispatchAction({
-              type: type,
-              name: legendName
-            });
-            let vm = this;
-            this.$set(this.legend, index, function(){let legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend;}());
-          }
+      let highlightNum = 0 // 高亮数量
+      this.legend.forEach(g => {
+        if (!g.isGray) {
+          highlightNum++
         }
-        /*let curIsGrey=this.legend[index].isGray;
+      })
+      const hasGray = highlightNum < this.legend.length // 是否有置灰的
+      const curIsGray = this.legend[index].isGray // 当前legend的状态
+      const currentIsTheOnlyOneHighlight = !curIsGray && highlightNum === 1 // 当前legend是否是目前唯一高亮的
+
+      const echart = this.chart
+      if (echart) {
+        if (!hasGray) { // 1.除当前legend外全置灰
+          echart.dispatchAction({
+            type: 'legendInverseSelect'
+          })
+          echart.dispatchAction({
+            type: 'legendSelect',
+            name: legendName
+          })
+          this.legend = this.legend.map((g, i) => {
+            if (i === index) {
+              g.isGray = false
+            } else {
+              g.isGray = true
+            }
+            return g
+          })
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          echart.dispatchAction({
+            type: 'legendAllSelect'
+          })
+          this.legend = this.legend.map(g => {
+            g.isGray = false
+            return g
+          })
+        } else {
+          const type = curIsGray ? 'legendSelect' : 'legendUnSelect'
+          echart.dispatchAction({
+            type: type,
+            name: legendName
+          })
+          const vm = this
+          this.$set(this.legend, index, (function () { const legend = vm.legend[index]; legend.isGray = !legend.isGray; return legend }()))
+        }
+      }
+      /* let curIsGrey=this.legend[index].isGray;
         if(this.chart){
           if(curIsGrey){
             this.chart.dispatchAction({
@@ -315,256 +313,256 @@
             });
           }
           this.$set(this.legend[index],'isGray',!curIsGrey)
-        }*/
-      },
-      clickLegend2(legendName,index){
-        let curIsGrey=this.legend[index].isGray;
-        if(this.chart){
-          this.legend.forEach((item,i)=>{
-            let isGrey = item.isGray;
-            if(index != i){ //不是当前点击的
-              if(!curIsGrey && !isGrey){
-                this.chart.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-                item.isGray=true;
-              }else if(!curIsGrey && isGrey){
-                this.chart.dispatchAction({
-                  type: 'legendSelect',
-                  name: item.name
-                });
-                item.isGray=false;
-              }else{
-                this.chart.dispatchAction({
-                  type: 'legendUnSelect',
-                  name: item.name
-                });
-                item.isGray=true
-              }
-            }else {//当前点击的
+        } */
+    },
+    clickLegend2 (legendName, index) {
+      const curIsGrey = this.legend[index].isGray
+      if (this.chart) {
+        this.legend.forEach((item, i) => {
+          const isGrey = item.isGray
+          if (index != i) { // 不是当前点击的
+            if (!curIsGrey && !isGrey) {
+              this.chart.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+              item.isGray = true
+            } else if (!curIsGrey && isGrey) {
               this.chart.dispatchAction({
                 type: 'legendSelect',
                 name: item.name
-              });
-              if(item.isGray === true){
-                item.isGray = false;
-              }
+              })
+              item.isGray = false
+            } else {
+              this.chart.dispatchAction({
+                type: 'legendUnSelect',
+                name: item.name
+              })
+              item.isGray = true
             }
-          });
-        }
-      },
-      defaultTooltipPosition:function(point,params,dom,rect,size){
-        dom.style.transform = "translateZ(0)";
-        //提示框位置
-        var x=0;
-        var y=0;
-        //当前鼠标位置
-        var pointX = point[0];
-        var pointY = point[1];
-        //外层div大小
-        var viewWidth = size.viewSize[0];
-        var viewHeight = size.viewSize[1];
-        //提示框大小
-        var boxWidth = size.contentSize[0];
-        var boxHeight = size.contentSize[1];
-        let chartDom = document.getElementById(this.chartId);
-        if(chartDom){
-          let parTop = chartDom.offsetTop;
-          let parLeft = chartDom.offsetLeft;
+          } else { // 当前点击的
+            this.chart.dispatchAction({
+              type: 'legendSelect',
+              name: item.name
+            })
+            if (item.isGray === true) {
+              item.isGray = false
+            }
+          }
+        })
+      }
+    },
+    defaultTooltipPosition: function (point, params, dom, rect, size) {
+      dom.style.transform = 'translateZ(0)'
+      // 提示框位置
+      let x = 0
+      let y = 0
+      // 当前鼠标位置
+      const pointX = point[0]
+      const pointY = point[1]
+      // 外层div大小
+      /* const viewWidth = size.viewSize[0]
+      const viewHeight = size.viewSize[1] */
+      // 提示框大小
+      const boxWidth = size.contentSize[0]
+      // const boxHeight = size.contentSize[1]
+      const chartDom = document.getElementById(this.chartId)
+      if (chartDom) {
+        // const parTop = chartDom.offsetTop
+        const parLeft = chartDom.offsetLeft
 
-          let parent = chartDom.parentElement;
-          let parClientHeight = parent.clientHeight;//可视高度
-          let parClientWidth = parent.clientWidth;//可视宽度
-          let parScrollTop = parent.scrollTop;
-          if((parClientWidth-pointX-parLeft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-            x=pointX+10;
-          }else{
-            x = pointX - boxWidth;
-          }
-          // if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
-          //   y = pointY+10;
-          // }else {
-          //   y = pointY-boxHeight;
-          // }
-          y = pointY+10;
-          return [x,y];
-        }else {
-          x = pointX - boxWidth;
-          y = pointY+10;
-          return [x,y];
+        const parent = chartDom.parentElement
+        // const parClientHeight = parent.clientHeight// 可视高度
+        const parClientWidth = parent.clientWidth// 可视宽度
+        // const parScrollTop = parent.scrollTop
+        if ((parClientWidth - pointX - parLeft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
+          x = pointX + 10
+        } else {
+          x = pointX - boxWidth
         }
-      },
-      defaultXAxisFormatter:function(value,index){
-        value=bus.computeTimezone(value)
-        let t_date = new Date(value);
-        let month=t_date.getMonth()+1>9?t_date.getMonth()+1:'0'+(t_date.getMonth()+1);
-        let day = t_date.getDate()>9?t_date.getDate():'0'+t_date.getDate();
-        let hour = t_date.getHours()>9?t_date.getHours():'0'+t_date.getHours();
-        let minute=t_date.getMinutes()>9?t_date.getMinutes():'0'+t_date.getMinutes();
-        return [ month, day].join('-') + "\n"
-          + [hour, minute].join(':');
-      },
-      defaultToolBoxFormatter(params){
-        if(params.name==='stack'){
-          return this.$t('overall.toolBox.stack')
+        // if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+        //   y = pointY+10;
+        // }else {
+        //   y = pointY-boxHeight;
+        // }
+        y = pointY + 10
+        return [x, y]
+      } else {
+        x = pointX - boxWidth
+        y = pointY + 10
+        return [x, y]
+      }
+    },
+    defaultXAxisFormatter: function (value, index) {
+      value = bus.computeTimezone(value)
+      const tData = new Date(value)
+      const month = tData.getMonth() + 1 > 9 ? tData.getMonth() + 1 : '0' + (tData.getMonth() + 1)
+      const day = tData.getDate() > 9 ? tData.getDate() : '0' + tData.getDate()
+      const hour = tData.getHours() > 9 ? tData.getHours() : '0' + tData.getHours()
+      const minute = tData.getMinutes() > 9 ? tData.getMinutes() : '0' + tData.getMinutes()
+      return [month, day].join('-') + '\n' +
+          [hour, minute].join(':')
+    },
+    defaultToolBoxFormatter (params) {
+      if (params.name === 'stack') {
+        return this.$t('overall.toolBox.stack')
+      }
+      return params.title
+    },
+    defaultTooltipFormatter: function (params) {
+      let str = '<div>'
+      params.forEach((item, i) => {
+        if (i === 0) {
+          const value = item.data[0]
+          const tData = new Date(value)
+          str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+              [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
+          str += '<br/>'
         }
-        return params.title
-      },
-      defaultTooltipFormatter:function(params){
-        let str = `<div>`;
-        params.forEach((item, i) => {
-          if(i===0){
-            let value=item.data[0]
-            let t_date = new Date(value);
-            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-            str +=`<br/>`;
-          }
-          let alias=this.queryAlias(item.seriesName)
-          let val = Number(item.data[1]);
-          str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-          str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias?alias:item.seriesName}:  </div>`;
-          str += `<div style="padding-left: 10px;">`;
-          str += chartDataFormat.getUnit(this.unit).compute(val,null,2);
-          str += `</div>`;
-          str += `</div>`;
-        });
-        str +=`</div>`;
-        return str;
-      },
-      queryAlias:function(seriesName){
-        let alias=null;
-        if(this.legend&&this.legend.length>0){
-          let tempLegend=this.legend.find((item)=>{return item.name == seriesName});
-          if(tempLegend){
-            alias=tempLegend.alias;
-          }
-        }
-        return alias;
-      },
-      defaultYAxisFormatter:function(value,index){
-        let maxValueCopies = this.getMaxValue(this.series,{unit:this.unit});
-        let maxValue=maxValueCopies.maxValue;
-        let copies=maxValueCopies.copies;
-        let dot=maxValueCopies.dot;
-        let chartUnit=this.unit;
-        chartUnit=chartUnit?chartUnit:2;
-        let unit=chartDataFormat.getUnit(chartUnit);
-        let flag=JSON.stringify(value).length>JSON.stringify(chartDataFormat.Interval(maxValue,copies,unit.type)).length;
-        if(dot===0 || flag){
-          dot=1;
-        }
-        return unit.compute(value,index,-1,dot);
-      },
-      setRandomColors:function(num){//当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
-        let colors=[];
-        for(let i=0;i<num;i++){
-          colors.push(randomcolor())
-        }
-        this.colors=Object.assign([],colors)
-        this.$set(this.option,'color',colors)
-      },
-      startLoading:function(){
-        this.$refs.loading.startLoading();
-        this.$emit("is-loading", true);
-      },
-      endLoading:function(){
-        this.$refs.loading.endLoading();
-        this.$emit("is-loading", false);
-      },
-      guid() {
-        function S4() {
-          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        const alias = this.queryAlias(item.seriesName)
+        const val = Number(item.data[1])
+        str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
+        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
+        str += '<div style="padding-left: 10px;">'
+        str += chartDataFormat.getUnit(this.unit).compute(val, null, 2)
+        str += '</div>'
+        str += '</div>'
+      })
+      str += '</div>'
+      return str
+    },
+    queryAlias: function (seriesName) {
+      let alias = null
+      if (this.legend && this.legend.length > 0) {
+        const tempLegend = this.legend.find((item) => { return item.name == seriesName })
+        if (tempLegend) {
+          alias = tempLegend.alias
         }
+      }
+      return alias
+    },
+    defaultYAxisFormatter: function (value, index) {
+      const maxValueCopies = this.getMaxValue(this.series, { unit: this.unit })
+      const maxValue = maxValueCopies.maxValue
+      const copies = maxValueCopies.copies
+      let dot = maxValueCopies.dot
+      let chartUnit = this.unit
+      chartUnit = chartUnit || 2
+      const unit = chartDataFormat.getUnit(chartUnit)
+      const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
+      if (dot === 0 || flag) {
+        dot = 1
+      }
+      return unit.compute(value, index, -1, dot)
+    },
+    setRandomColors: function (num) { // 当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
+      const colors = []
+      for (let i = 0; i < num; i++) {
+        colors.push(randomcolor())
+      }
+      this.colors = Object.assign([], colors)
+      this.$set(this.option, 'color', colors)
+    },
+    startLoading: function () {
+      this.$refs.loading.startLoading()
+      this.$emit('is-loading', true)
+    },
+    endLoading: function () {
+      this.$refs.loading.endLoading()
+      this.$emit('is-loading', false)
+    },
+    guid () {
+      function S4 () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+      }
 
-        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-      },
-      clearChart() {
-        if(this.chart) {
-          this.chart.clear();
-        }
-      },
-      showMore(){// 显示更多
-        this.legend=this.legendAll;
-        let option={
-          series:this.optionSeriesAll
-        };
-        this.chart.setOption(option);
-        this.chart.resize()
-      },
-      chartInit() {
-        this.chart=echarts.init(document.getElementById(this.chartId));
-      },
-      getMaxValue(dataArg,chartInfo){
-        let maxValue=0;
-        let minValue=0;
-        if(chartInfo.unit &&dataArg.length>0){
-          maxValue=0;
-          minValue=0;
-          for(let j = 0; j < dataArg.length ; j++){
-            for (let i = 0; i < dataArg[j].data.length - 1; i++) {
-              if(dataArg[j].data[i+1][1]!=='NaN'){
-                maxValue = (maxValue < Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : maxValue);
-                minValue = (minValue > Number(dataArg[j].data[i+1][1]) ? Number(dataArg[j].data[i+1][1]) : minValue);
-              }
+      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+    },
+    clearChart () {
+      if (this.chart) {
+        this.chart.clear()
+      }
+    },
+    showMore () { // 显示更多
+      this.legend = this.legendAll
+      const option = {
+        series: this.optionSeriesAll
+      }
+      this.chart.setOption(option)
+      this.chart.resize()
+    },
+    chartInit () {
+      this.chart = echarts.init(document.getElementById(this.chartId))
+    },
+    getMaxValue (dataArg, chartInfo) {
+      let maxValue = 0
+      let minValue = 0
+      if (chartInfo.unit && dataArg.length > 0) {
+        maxValue = 0
+        minValue = 0
+        for (let j = 0; j < dataArg.length; j++) {
+          for (let i = 0; i < dataArg[j].data.length - 1; i++) {
+            if (dataArg[j].data[i + 1][1] !== 'NaN') {
+              maxValue = (maxValue < Number(dataArg[j].data[i + 1][1]) ? Number(dataArg[j].data[i + 1][1]) : maxValue)
+              minValue = (minValue > Number(dataArg[j].data[i + 1][1]) ? Number(dataArg[j].data[i + 1][1]) : minValue)
             }
           }
         }
-        let chartUnit=chartInfo.unit?chartInfo.unit:2;
-        let unit=chartDataFormat.getUnit(chartUnit);
-        minValue=minValue>0?0:minValue;
-        maxValue=maxValue-minValue;
-        maxValue=chartDataFormat.formatDatas(maxValue,unit.type,'ceil',unit.ascii);
-        let oldValue=maxValue;
-        let dot=0;
-        if(maxValue==1){
-          dot++;
+      }
+      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
+      const unit = chartDataFormat.getUnit(chartUnit)
+      minValue = minValue > 0 ? 0 : minValue
+      maxValue = maxValue - minValue
+      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
+      let oldValue = maxValue
+      let dot = 0
+      if (maxValue == 1) {
+        dot++
+      }
+      if (oldValue > 10) {
+        while (oldValue > 10) {
+          oldValue = oldValue / 10
         }
-        if(oldValue>10){
-          while(oldValue>10){
-            oldValue=oldValue/10;
-          }
-        }else if(oldValue<1&&maxValue!==0){
-          while(oldValue<1&&oldValue>0){
-            oldValue=oldValue*10;
-            dot++;
-          }
-          maxValue=Math.floor(oldValue)/Math.pow(10,dot);
-          dot++;
+      } else if (oldValue < 1 && maxValue !== 0) {
+        while (oldValue < 1 && oldValue > 0) {
+          oldValue = oldValue * 10
+          dot++
         }
-        let copies=chartDataFormat.copies(oldValue,unit.type);
-        let oldDot=2;
-        if(maxValue<=1){
-          oldDot=dot>6?6:dot;
-        }
-        return {
-          maxValue,
-          dot,
-          copies,
-          minValue,
-          unit,
-          oldDot
-        }
-      },
-    },
-    mounted() {
-      this.chartInit();
-      EleResize.on(this.$el, this.resize, this.chartType);
-    },
-    watch:{
-
-    },
-    beforeDestroy() {
-      this.$refs.chartRoom.removeEventListener("mousemove", this.chartRoomMouseMove);
-      if(this.chart){
-        this.chart.clear();
-        /*this.chart.off('mouseover');
-        this.chart.off('mouseout');
-        EleResize.off(this.$el, this.resize, this.chartType);*/
+        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
+        dot++
+      }
+      const copies = chartDataFormat.copies(oldValue, unit.type)
+      let oldDot = 2
+      if (maxValue <= 1) {
+        oldDot = dot > 6 ? 6 : dot
+      }
+      return {
+        maxValue,
+        dot,
+        copies,
+        minValue,
+        unit,
+        oldDot
       }
     }
+  },
+  mounted () {
+    this.chartInit()
+    EleResize.on(this.$el, this.resize, this.chartType)
+  },
+  watch: {
+
+  },
+  beforeDestroy () {
+    this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
+    if (this.chart) {
+      this.chart.clear()
+      /* this.chart.off('mouseover');
+        this.chart.off('mouseout');
+        EleResize.off(this.$el, this.resize, this.chartType); */
+    }
   }
+}
 </script>
 <!--<style>
  @import "../../../charts/chart.scss";
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index d3220898a..d7f387aa8 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -1,552 +1,546 @@
 <script>
-    import chartDataFormat from "../../../charts/chartDataFormat";
-    import bus from '../../../../libs/bus';
-    import vm from '../../../../main'
-    window.onload=function(){
-      commonOption.toolbox.feature.dataZoom.title.zoom=vm.$i18n.t('overall.toolBox.zoom')
-      commonOption.toolbox.feature.dataZoom.title.back=vm.$i18n.t('overall.toolBox.back')
-      commonOption.toolbox.feature.magicType.title.stack=vm.$i18n.t('overall.toolBox.stack')
-    }
-    let bgColorList=['#b3424a','#7bbfea', '#f05b72', '#596032', '#bd6758',
-      '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
-      '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
-      '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
-      '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
-      '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
-      '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-    ];
-    let overviewBgColor =
+import bus from '../../../../libs/bus'
+import vm from '../../../../main'
+window.onload = function () {
+  commonOption.toolbox.feature.dataZoom.title.zoom = vm.$i18n.t('overall.toolBox.zoom')
+  commonOption.toolbox.feature.dataZoom.title.back = vm.$i18n.t('overall.toolBox.back')
+  commonOption.toolbox.feature.magicType.title.stack = vm.$i18n.t('overall.toolBox.stack')
+}
+const bgColorList = ['#b3424a', '#7bbfea', '#f05b72', '#596032', '#bd6758',
+  '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+  '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+  '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+  '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+  '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+  '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e'
+]
+const overviewBgColor =
       ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
-      '#ac958f', '', '', '', '', '', '', '', '', '', '', ];
+        '#ac958f', '', '', '', '', '', '', '', '', '', '']
 /*    let pieColor = ["#0c69ff","#59f747","#2eeab8","#b5ed8e",
       "#205299","#ffd6c6","#a0ffdf","#9be524",
       "#8abafc","#d181e8","#d88d50","#cce8ff",
-      "#161ef9"];*/
+      "#161ef9"]; */
 
-    let pieColor = ["#95E2C2", "#84C9E6", "#8CABEF", "#FAA995", "#FDD462"];/*['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
-      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];*/
+const pieColor = ['#95E2C2', '#84C9E6', '#8CABEF', '#FAA995', '#FDD462']/* ['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
+      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb']; */
 
-    const commonOption={
-      title:{
-        show:false,
-      },
-      color: bgColorList,
-      legend:{
-        show:false,
-      },
-      toolbox:{
-        show:false,
-        top:'0',
-        right:'18',
-        showTitle:false,
-        tooltip:{
-          show:true,
-        },
-        feature:{
-          dataZoom:{
-            yAxisIndex:false,
-            title:{
+const commonOption = {
+  title: {
+    show: false
+  },
+  color: bgColorList,
+  legend: {
+    show: false
+  },
+  toolbox: {
+    show: false,
+    top: '0',
+    right: '18',
+    showTitle: false,
+    feature: {
+      dataZoom: {
+        yAxisIndex: false,
+        title: {
 
-            }
-          },
-          magicType:{
-            type:['stack'],
-            title:{}
-          },
-          // restore: {},
-        },
-        tooltip: { // 和 option.tooltip 的配置项相同
-          show: true,
-          position:'top',
-          formatter: function (param) {
-            debugger
-            return param.title; // 自定义的 DOM 结构
-          },
-          backgroundColor:'rgba(255,255,255,0)',
-          borderColor :'rgba(255,255,255,0)',
-          textStyle: {
-            fontSize: 12,
-            color : '#439AC6'
-          },
         }
       },
-      tooltip: {
-        trigger: 'axis',
-        confine:false,
-        extraCssText:'z-index:1000;',
-        backgroundColor:'rgba(221,228,237,1)',
-        borderColor:'rgba(221,228,237,1)',
-        textStyle:{color: "#000"},
-        axisPointer:{
-          snap:false,
-          animation:false,
-        },
-        // formatter:null,
-        // position:null,
+      magicType: {
+        type: ['stack'],
+        title: {}
+      }
+      // restore: {},
+    },
+    tooltip: { // 和 option.tooltip 的配置项相同
+      show: true,
+      position: 'top',
+      formatter: function (param) {
+        return param.title // 自定义的 DOM 结构
       },
-      grid: {
-        top: 30,
-        left: 0,
-        right: 30,
-        containLabel: true,
-        bottom:8,//156
+      backgroundColor: 'rgba(255,255,255,0)',
+      borderColor: 'rgba(255,255,255,0)',
+      textStyle: {
+        fontSize: 12,
+        color: '#439AC6'
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: false,
+    extraCssText: 'z-index:1000;',
+    backgroundColor: 'rgba(221,228,237,1)',
+    borderColor: 'rgba(221,228,237,1)',
+    textStyle: { color: '#000' },
+    axisPointer: {
+      snap: false,
+      animation: false
+    }
+    // formatter:null,
+    // position:null,
+  },
+  grid: {
+    top: 30,
+    left: 0,
+    right: 30,
+    containLabel: true,
+    bottom: 8// 156
+  },
+  dataZoom: [{
+    type: 'slider',
+    show: false,
+    xAxisIndex: [0],
+    start: 0,
+    end: 100,
+    height: 25,
+    bottom: 10, // 96
+    left: 40,
+    right: 48
+  }],
+  xAxis: {
+    type: 'time',
+    // boundaryGap: false,//line-false; bar-true;
+    axisLabel: {
+      interval: 0,
+      rotate: 0,
+      formatter: function (value, index) {
+        const tData = new Date(value)
+        return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + '\n' +
+              [tData.getHours(), tData.getMinutes()].join(':')
+      }
+    },
+    axisPointer: { // y轴上显示指针对应的值
+      show: true
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#d9d9d9',
+        opacity: 0.8,
+        width: 1
+      }
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#d9d9d9',
+        opacity: 0.8,
+        width: 1
+      }
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      // formatter:null,
+    }
+  },
+  useUTC: false, // 使用本地时间
+  series: []
+}
+const mapOptions = {
+  geo: {
+    itemStyle: { areaColor: 'white' },
+    map: '',
+    roam: true, // 鼠标是否可以控制缩放
+    // center: [67.45, 48],//当前视角的中心点，用经纬度表示
+    // zoom: 5,
+    label: { // 控制显示地图名称
+      normal: {
+        show: false
       },
-      dataZoom: [{
-        type: 'slider',
-        show:false,
-        xAxisIndex: [0],
-        start: 0,
-        end: 100,
-        height:25,
-        bottom:10,//96
-        left:40,
-        right:48,
-      }],
-      xAxis: {
-        type: 'time',
-        // boundaryGap: false,//line-false; bar-true;
-        axisLabel: {
-          interval: 0,
-          rotate: 0,
-          formatter: function (value,index) {
-            value=value
-            var t_date = new Date(value);
-            return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
-              + [t_date.getHours(), t_date.getMinutes()].join(':');
-          }
-        },
-        axisPointer: {//y轴上显示指针对应的值
-          show: true,
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        splitLine:{
-          show:true,
-          lineStyle: {
-            color: "#d9d9d9",
-            opacity: 0.8,
-            width: 1
-          }
-        }
-      },
-      yAxis: {
-        type: 'value',
-        splitLine:{
-          show:true,
-          lineStyle: {
-            color: "#d9d9d9",
-            opacity: 0.8,
-            width: 1
-          }
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          // formatter:null,
-        },
-      },
-      useUTC: false,//使用本地时间
-      series: [],
-    };
-    const mapOptions={
-      geo:{
-        itemStyle: {areaColor: "white"},
-        map: '',
-        roam: true,//鼠标是否可以控制缩放
-        //center: [67.45, 48],//当前视角的中心点，用经纬度表示
-        //zoom: 5,
-        label: { //控制显示地图名称
-          normal: {
-            show: false
-          },
-          emphasis: {
-            show: false
-          },
-        },
-        emphasis:{
-          itemStyle: {
-            areaColor:'white'
-          }
-        },
-        left:0,
-        top:0,
-        right:0,
-        bottom:0,
-        scaleLimit: {
-          min: 4,
-          max: 8
-        },
-        aspectScale: 1
-      },
-      tooltip : {
-        trigger: 'item',
-        type:'cross',
-        alwaysShowContent: false,
-        backgroundColor: 'rgba(255,255,255,0.7)',
-        confine:true,
-        /*borderColor:'#ffffff',
+      emphasis: {
+        show: false
+      }
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'white'
+      }
+    },
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    scaleLimit: {
+      min: 4,
+      max: 8
+    },
+    aspectScale: 1
+  },
+  tooltip: {
+    trigger: 'item',
+    type: 'cross',
+    alwaysShowContent: false,
+    backgroundColor: 'rgba(255,255,255,0.7)',
+    confine: true
+    /* borderColor:'#ffffff',
         borderRadius: 4,
         borderWidth: 1,
-        padding: 0,*/
-      },
-      backgroundColor: "#BDE3FD"
-    };
-    const assetTypePie = {
-      title: {
-        show: false,
-      },
-      color: pieColor,
-      grid: {
-        top: "top",
-        left: "left"
-      },
-      legend: {},
-      series: [],
-      tooltip : {}
-    };
-    const alertMessageBarByRule = {
-      title: {
-        show: false,
-      },
-      legend: {
-        show: false,
-      },
-      grid: {
-        top: 60,
-        left: 30,
-        right: 120,
-        bottom: 60,
-      },
-      series: [],
-      tooltip : {
-        backgroundColor: "rgba(255, 255, 255, 0.66)",
-        textStyle: {color: "#333"},
-      },
-      xAxis: {
-        type: 'value',
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        minInterval:1,
-        axisLabel: {
-          show:true,
-          fontSize: 14
-        },
-        inverse:true
-      },
-      yAxis: {
-        type: 'category',
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        data: [],
-        axisLabel: {
-          show: true,
-          fontSize: 12,
-          formatter: function(value) {
-            if (value.length > 15) {
-              return "..."+ value.substring(value.length-12, value.length);
-            }
-            return value;
-          },
-        },
-        triggerEvent: true
-      },
-    };
-    const alertMessageBarByAsset = {
-      title: {
-        show: false,
-      },
-      legend: {
-        show: false,
-      },
-      grid: {
-        top: 60,
-        left: 80,
-        right: 30,
-        bottom: 60,
-      },
-      series: [],
-      tooltip : {
-        backgroundColor: "rgba(255, 255, 255, 0.66)",
-        extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
-        textStyle: {color: "#333"}
-      },
-      yAxis: {
-        type: 'value',
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          show:true,
-          fontSize: 14
+        padding: 0, */
+  },
+  backgroundColor: '#BDE3FD'
+}
+const assetTypePie = {
+  title: {
+    show: false
+  },
+  color: pieColor,
+  grid: {
+    top: 'top',
+    left: 'left'
+  },
+  legend: {},
+  series: [],
+  tooltip: {}
+}
+const alertMessageBarByRule = {
+  title: {
+    show: false
+  },
+  legend: {
+    show: false
+  },
+  grid: {
+    top: 60,
+    left: 30,
+    right: 120,
+    bottom: 60
+  },
+  series: [],
+  tooltip: {
+    backgroundColor: 'rgba(255, 255, 255, 0.66)',
+    textStyle: { color: '#333' }
+  },
+  xAxis: {
+    type: 'value',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    minInterval: 1,
+    axisLabel: {
+      show: true,
+      fontSize: 14
+    },
+    inverse: true
+  },
+  yAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    data: [],
+    axisLabel: {
+      show: true,
+      fontSize: 12,
+      formatter: function (value) {
+        if (value.length > 15) {
+          return '...' + value.substring(value.length - 12, value.length)
         }
-      },
-      xAxis: {
-        type: 'category',
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        data: [],
-        axisLabel: {
-          show: true,
-          fontSize: 12,
-          formatter: function(value) {
-            let r = value;
-            if (r.length > 4) {
-              r = value.substring(0, 3) + "...";
-            }
-            return r.split("").join("\n");
-          },
-        },
-        triggerEvent: true
-      },
-    };
-
-    const overviewLine = {
-      title:{
-        show: false,
-      },
-      color: overviewBgColor,
-      legend:{
-        show:false,
-      },
-      toolbox:{
-        show:false,
-      },
-      tooltip: {
-        trigger: 'axis',
-        confine: false,
-        extraCssText:'z-index:1000;',
-        formatter: function(v, i) {
-          return v;
-        }
-      },
-      grid: {
-        left: 6,
-        right: 20,
-        containLabel: true,
-        bottom: 0,
-      },
-      xAxis: {
-        type: 'time',
-        axisLabel: {
-          rotate: 0,
-
-          fontSize: 13*window.devicePixelRatio
-        },
-        axisPointer: {//y轴上显示指针对应的值
-          show: true,
-        },
-        splitLine:{
-          show:false
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-      },
-      yAxis: {
-        type: 'value',
-        splitLine:{
-          show:true
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-        axisLabel: {
-          fontSize: 13*window.devicePixelRatio,
-          formatter: function(value, i) {
-            let y;
-            if (value < 1000) {
-              y = value + " Bs";
-            } else if (value < 1000000) {
-              y = value/1000 + " KBs";
-            } else if (value >= 1000000) {
-              y = value/1000000 + " MBs";
-            } else {
-              y = value/1000000000 + " GBs";
-            }
-            return y;
-          }
-        }
-      },
-      useUTC: false,//使用本地时间
-      series: [],
-    };
-    const noDataOption={
-      grid: {
-        top: 30,
-        left: 0,
-        right: 30,
-        containLabel: true,
-        bottom:8,//156
-      },
-      xAxis: {
-        type: 'category',
-        data: createTempTimes(),
-        splitLine:{
-          show:true
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-      },
-      yAxis: {
-        type: 'category',
-        data: [1, 3, 5, 7, 9, 11, 13],
-        splitLine:{
-          show:true
-        },
-        axisLine: {
-          show: false
-        },
-        axisTick: {
-          show: false
-        },
-      },
-      series: null,
-    };
-    const tooltipPieOption = {
-      color: ["#60C6B4", "#EEA694", "#9e9c9b"],
-      title: {
-        show: true,
-        textStyle: {
-          color: "#333333",
-          fontSize: 14,
-        },
-        top: 8,
-        left: 8
-      },
-      legend: {
-        data: [],
-        show: true,
-        left: 70,
-        top: 35,
-        icon: "circle",
-        itemHeight: 4,
-        orient: "vertical",
-        itemGap: 6,
-        textStyle: {
-          fontSize: 12,
-          padding: [0, 0, 0, -10]
-        },
-      },
-      series: [
-        {
-          type: "pie",
-          animation: false,
-          center: [40, 63],
-          radius: [14, 22],
-          data: [],
-          label: {
-            show: true,
-            formatter: "",
-            color: "#666666",
-            position: "center",
-          }
-        }
-      ]
-    };
-    const topoPieOption = {
-      color: ["#60C6B4", "#EEA694", "#9e9c9b"],
-      title: {
-        show: false,
-      },
-      legend: {
-        data: [],
-        show: true,
-        left: 62,
-        top: 7,
-        icon: "circle",
-        itemHeight: 4,
-        orient: "vertical",
-        itemGap: 6,
-        textStyle: {
-          fontSize: 12,
-          padding: [0, 0, 0, -10]
-        },
-      },
-      series: [
-        {
-          type: "pie",
-          animation: false,
-          center: [30, 35],
-          radius: [18, 26],
-          data: [],
-          label: {
-            show: true,
-            formatter: "",
-            color: "#666666",
-            position: "center",
-          }
-        }
-      ]
-    };
-    function createTempTimes(){
-      let times=[];
-      let tzo=(new Date().getTimezoneOffset()/60)*(-1);//系统时区
-      let time=bus.UTCTimeToConfigTimezone(new Date().getTime()-tzo*60*60*1000);
-      for(let i=0;i<10;i++){
-        time=time-5*60*1000;
-        times.push(bus.timeFormate(time,'hh:mm'))
+        return value
       }
-      times.reverse();
-      return times;
+    },
+    triggerEvent: true
+  }
+}
+const alertMessageBarByAsset = {
+  title: {
+    show: false
+  },
+  legend: {
+    show: false
+  },
+  grid: {
+    top: 60,
+    left: 80,
+    right: 30,
+    bottom: 60
+  },
+  series: [],
+  tooltip: {
+    backgroundColor: 'rgba(255, 255, 255, 0.66)',
+    extraCssText: 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);',
+    textStyle: { color: '#333' }
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      show: true,
+      fontSize: 14
     }
-    const chartTypes={
-      line:{name:'line',option:commonOption},
-      overviewLine: {name: 'line', option: overviewLine},
-      map:{name:'map',option:mapOptions},
-      pie: {name: 'assetType', option: assetTypePie},
-      bar: {name: 'alertMessage', option: alertMessageBarByAsset},
-      ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule},
-      assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
-      noData:{name:'noData',option:noDataOption},
-      tooltipPie: {option: tooltipPieOption},
-      topoPie: {option: topoPieOption},
-    };
-    export default {
-      getOption:function(type){
-        return JSON.parse(JSON.stringify(chartTypes[type].option));
-      },
-      getOptionNoData:function(type){
-        chartTypes[type].option.xAxis.data= createTempTimes();
-        return JSON.parse(JSON.stringify(chartTypes[type].option));
-      },
-      setMap:function(map){
-        mapOptions.geo.map=map
-      },
-      getBgColorList:function(){
-        return Object.assign([],bgColorList)
-      },
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    data: [],
+    axisLabel: {
+      show: true,
+      fontSize: 12,
+      formatter: function (value) {
+        let r = value
+        if (r.length > 4) {
+          r = value.substring(0, 3) + '...'
+        }
+        return r.split('').join('\n')
+      }
+    },
+    triggerEvent: true
+  }
+}
+
+const overviewLine = {
+  title: {
+    show: false
+  },
+  color: overviewBgColor,
+  legend: {
+    show: false
+  },
+  toolbox: {
+    show: false
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: false,
+    extraCssText: 'z-index:1000;',
+    formatter: function (v, i) {
+      return v
     }
+  },
+  grid: {
+    left: 6,
+    right: 20,
+    containLabel: true,
+    bottom: 0
+  },
+  xAxis: {
+    type: 'time',
+    axisLabel: {
+      rotate: 0,
+
+      fontSize: 13 * window.devicePixelRatio
+    },
+    axisPointer: { // y轴上显示指针对应的值
+      show: true
+    },
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      fontSize: 13 * window.devicePixelRatio,
+      formatter: function (value, i) {
+        let y
+        if (value < 1000) {
+          y = value + ' Bs'
+        } else if (value < 1000000) {
+          y = value / 1000 + ' KBs'
+        } else if (value >= 1000000) {
+          y = value / 1000000 + ' MBs'
+        } else {
+          y = value / 1000000000 + ' GBs'
+        }
+        return y
+      }
+    }
+  },
+  useUTC: false, // 使用本地时间
+  series: []
+}
+const noDataOption = {
+  grid: {
+    top: 30,
+    left: 0,
+    right: 30,
+    containLabel: true,
+    bottom: 8// 156
+  },
+  xAxis: {
+    type: 'category',
+    data: createTempTimes(),
+    splitLine: {
+      show: true
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: 'category',
+    data: [1, 3, 5, 7, 9, 11, 13],
+    splitLine: {
+      show: true
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  series: null
+}
+const tooltipPieOption = {
+  color: ['#60C6B4', '#EEA694', '#9e9c9b'],
+  title: {
+    show: true,
+    textStyle: {
+      color: '#333333',
+      fontSize: 14
+    },
+    top: 8,
+    left: 8
+  },
+  legend: {
+    data: [],
+    show: true,
+    left: 70,
+    top: 35,
+    icon: 'circle',
+    itemHeight: 4,
+    orient: 'vertical',
+    itemGap: 6,
+    textStyle: {
+      fontSize: 12,
+      padding: [0, 0, 0, -10]
+    }
+  },
+  series: [
+    {
+      type: 'pie',
+      animation: false,
+      center: [40, 63],
+      radius: [14, 22],
+      data: [],
+      label: {
+        show: true,
+        formatter: '',
+        color: '#666666',
+        position: 'center'
+      }
+    }
+  ]
+}
+const topoPieOption = {
+  color: ['#60C6B4', '#EEA694', '#9e9c9b'],
+  title: {
+    show: false
+  },
+  legend: {
+    data: [],
+    show: true,
+    left: 62,
+    top: 7,
+    icon: 'circle',
+    itemHeight: 4,
+    orient: 'vertical',
+    itemGap: 6,
+    textStyle: {
+      fontSize: 12,
+      padding: [0, 0, 0, -10]
+    }
+  },
+  series: [
+    {
+      type: 'pie',
+      animation: false,
+      center: [30, 35],
+      radius: [18, 26],
+      data: [],
+      label: {
+        show: true,
+        formatter: '',
+        color: '#666666',
+        position: 'center'
+      }
+    }
+  ]
+}
+function createTempTimes () {
+  const times = []
+  const tzo = (new Date().getTimezoneOffset() / 60) * (-1)// 系统时区
+  let time = bus.UTCTimeToConfigTimezone(new Date().getTime() - tzo * 60 * 60 * 1000)
+  for (let i = 0; i < 10; i++) {
+    time = time - 5 * 60 * 1000
+    times.push(bus.timeFormate(time, 'hh:mm'))
+  }
+  times.reverse()
+  return times
+}
+const chartTypes = {
+  line: { name: 'line', option: commonOption },
+  overviewLine: { name: 'line', option: overviewLine },
+  map: { name: 'map', option: mapOptions },
+  pie: { name: 'assetType', option: assetTypePie },
+  bar: { name: 'alertMessage', option: alertMessageBarByAsset },
+  ruleBar: { name: 'ruleMessage', option: alertMessageBarByRule },
+  assetBar: { name: 'assetMessage', option: alertMessageBarByAsset },
+  noData: { name: 'noData', option: noDataOption },
+  tooltipPie: { option: tooltipPieOption },
+  topoPie: { option: topoPieOption }
+}
+export default {
+  getOption: function (type) {
+    return JSON.parse(JSON.stringify(chartTypes[type].option))
+  },
+  getOptionNoData: function (type) {
+    chartTypes[type].option.xAxis.data = createTempTimes()
+    return JSON.parse(JSON.stringify(chartTypes[type].option))
+  },
+  setMap: function (map) {
+    mapOptions.geo.map = map
+  },
+  getBgColorList: function () {
+    return Object.assign([], bgColorList)
+  }
+}
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index baf12ffc2..48c203688 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -167,7 +167,7 @@
           <div class="content-col-content">
             <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
             <!--                <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>-->
-            <div class="chart-no-data"v-if="!assetTypeLoading && (!assetData.typeStat || assetData.typeStat.length == 0)">No Data</div>
+            <div v-if="!assetTypeLoading && (!assetData.typeStat || assetData.typeStat.length === 0)" class="chart-no-data">No Data</div>
           </div>
         </div>
 
@@ -175,8 +175,8 @@
         <div class="content-col-box">
           <div class="content-col-title">
             <span>
-              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
-              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+              <span v-if="alertMessageShow === 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow === 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
               <!--<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
                 <i class="nz-icon nz-icon-arrow-down"></i>
                 <transition name="el-zoom-in-top">
@@ -225,573 +225,567 @@
 </template>
 
 <script>
-  import chart from "./chart";
-  import i18n from '../../../../components/common/i18n'
-  import axios from 'axios';
-  import bus from '../../../../libs/bus';
-  import timePicker from '../../../common/timePicker';
-  import VueCountUp from 'vue-countupjs';
-  import 'leaflet/dist/leaflet.css'
-  // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
-  import * as L from 'leaflet'
-  import icon from 'leaflet/dist/images/marker-icon.png';
-  import iconShadow from 'leaflet/dist/images/marker-shadow.png';
-  import * as echarts from "echarts";
-  import chartConfig from './chartConfig'
-  import overViewTopology from '../../../common/project/topologyL5'
-  import messageAsset from '../../../common/overView/messageAsset'
-  var timeout; //第三行第三个图的dropdown下拉菜单timeout
+import chart from './chart'
+import i18n from '../../../../components/common/i18n'
+import axios from 'axios'
+import bus from '../../../../libs/bus'
+import VueCountUp from 'vue-countupjs'
+import 'leaflet/dist/leaflet.css'
+// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+import * as L from 'leaflet'
+import icon from 'leaflet/dist/images/marker-icon.png'
+import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+import * as echarts from 'echarts'
+import chartConfig from './chartConfig'
+import overViewTopology from '../../../common/project/topologyL5'
+import messageAsset from '../../../common/overView/messageAsset'
+let timeout // 第三行第三个图的dropdown下拉菜单timeout
 
+let tooltipEndpointChart
+let tooltipPrometheusChart
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'overview2',
+  components: {
+    'chart-box': chart,
+    'vue-countup': VueCountUp,
+    topology: overViewTopology,
+    messageAsset
+  },
+  data () {
+    return {
+      // top tool
+      isFullScreen: false,
+      sysTime: '',
+      sysDate: '',
+      sysWeek: '',
+      systemName: localStorage.getItem('nz-sys-name'),
+      topologyLoading: true,
+      // data
+      assetLoading: false,
+      assetTypeLoading: false, // 第三行第一个图
+      assetData: '',
+      projectLoading: false,
+      projectData: '',
+      moduleLoading: false,
+      moduleData: '',
+      endpointLoading: false,
+      endpointData: '',
+      alertMessageLoading: false,
+      alertMessageData: '',
+      alertRuleData: '',
+      map: null,
+      mapLoading: false,
+      chartSeries: [],
+      trendLoading: false,
+      assetTypeSeries: [],
+      messageByRuleSeries: [],
+      ruleMessageLoading: false, // 第三行第二个图
+      messageByAssetSeries: [],
+      assetMessageLoading: false, // 第三行第三个图
+      messageByModuleSeries: [],
+      moduleMessageLoading: false, // 第三行第三个图
+      alertRuleStatData: {},
+      dataCenterMapSeries: [],
+      trafficDatacenterData: [],
+      trafficTagData: [],
+      trafficData: [],
+      allProject: [],
+      trendSearchParam: { start: '', end: '', dc: [], tag: [], select: [], watch: true },
 
+      alertMessageShow: 'asset', // asset/module
+      bottom3DropdownShow: false, // 最底部行第三列的下拉选择框
 
-  var tooltipEndpointChart;
-  var tooltipPrometheusChart;
-  var regNum = /^[0-9]+.?[0-9]*/
-  export default {
-    name: "overview2",
-    components:{
-      'chart-box': chart,
-      'time-picker': timePicker,
-      'vue-countup': VueCountUp,
-      'topology':overViewTopology,
-      messageAsset,
+      topFilter: {
+        optionals: [10, 20, 50],
+        rule: 10,
+        asset: 48,
+        module: 48
+      },
+      system_server_time: null,
+      freshDateTimer: null,
+      freshDataTimer: null,
+
+      tooltip: {
+        x: 0,
+        y: 0
+      },
+      searchTime: bus.getTimezontDateRange(),
+      messageAssetData: [],
+      col: 10,
+      length: 9,
+      messageModuleData: []
+    }
+  },
+  filters: {
+    numberFormat (num) {
+      const fixed = 1
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return num
+          } else if (num < 1000000) {
+            num = num / 1000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          } else if (num < 1000000000) {
+            num = num / 1000000
+            num = num.toString()
+            const index = num.indexOf('.')
+            if (index !== -1) {
+              num = num.substring(0, fixed + index + 1)
+            } else {
+              num = num.substring(0)
+            }
+            return parseFloat(num).toFixed(fixed)
+          }
+        } catch (err) {
+          return 0
+        }
+      }
+      return 0
+    },
+    unitFormat (num) {
+      if (num) {
+        try {
+          num = parseFloat(num)
+          if (num < 1000) {
+            return ''
+          } else if (num < 1000000) {
+            return ' K'
+          } else if (num < 1000000000) {
+            return ' M'
+          }
+        } catch (err) {
+          return ''
+        }
+      }
+      return ''
+    }
+  },
+  methods: {
+    /* 初始化数据 start */
+    initData () {
+      return [
+        this.querySystemState(),
+        this.queryAssetData(),
+        this.queryProjectData(),
+        this.queryModuleData(),
+        this.queryEndpointData(),
+        this.queryAlertMessageData(),
+        this.queryAlertRuleData(),
+        // this.queryAlertTrendData(),
+        this.initMap(),
+        this.queryAlertStatByRule(), // 3-3
+        this.queryAlertStatByAsset(), // 3-2 新的也是这个 3-2
+        this.queryAlertStatByModule(), // 新的3-3
+        this.getDcTrafficData(),
+        this.queryAllProjectData()
+      ]
+    },
+    setFreshDataTimer: function () {
+      // this.freshDataTimer=setInterval(()=>{
+      //   if(this.$refs.overviewLoading){
+      //     this.$refs.overviewLoading.startLoading();
+      //   }
+      //   Promise.all(this.initData()).then(()=>{
+      //     if(this.$refs.overviewLoading){
+      //       this.$refs.overviewLoading.endLoading();
+      //     }
+      //   })
+      // },5*60*1000)
+      Promise.all(this.initData()).then(() => {
+        if (this.$refs.overviewLoading) {
+          this.$refs.overviewLoading.endLoading()
+        }
+      })
+    },
+    querySystemState: function () {
+      return new Promise(resolve => {
+        this.$get('/healthy').then(response => {
+          if (response.code == 200) {
+            if (response.time) {
+              this.system_server_time = this.utcTimeToTimezone(response.time)
+            } else {
+              this.system_server_time = bus.computeTimezone(new Date().getTime())
+            }
+          } else {
+            this.system_server_time = bus.computeTimezone(new Date().getTime())
+          }
+          resolve()
+        })
+      })
+    },
+    queryAllProjectData () {
+      this.$get('/project', { pageSize: -1 }).then(res => {
+        this.topologyLoading = true
+        const axiosAll = []
+        const temp = []
+        if (res.data.list.length === 0) {
+          this.topologyLoading = false
+        }
+        res.data.list.forEach((item) => {
+          axiosAll.push(axios.get(`/project/topo?projectId=${item.id}`))
+        })
+        axios.all(axiosAll).then(res2 => {
+          res2 = res2.map((item, index) => {
+            return { ...item.data.data, ...res.data.list[index] }
+          })
+          res2 = res2.filter((item) => item.topo && item.topo.pens && item.topo.pens.length)
+          if (res2.length == 0) {
+            this.topologyLoading = false
+          }
+          res2.forEach(item => {
+            temp.push(item)
+          })
+          this.allProject = temp
+          this.topologyLoading = false
+        })
+      })
     },
-    data() {
-      return {
-        //top tool
-        isFullScreen: false,
-        sysTime: '',
-        sysDate: '',
-        sysWeek: '',
-        systemName: localStorage.getItem('nz-sys-name'),
-        topologyLoading:true,
-        //data
-        assetLoading: false,
-        assetTypeLoading: false, //第三行第一个图
-        assetData: '',
-        projectLoading: false,
-        projectData: '',
-        moduleLoading: false,
-        moduleData: '',
-        endpointLoading: false,
-        endpointData: '',
-        alertMessageLoading: false,
-        alertMessageData: '',
-        alertRuleData: '',
-        map: null,
-        mapLoading: false,
-        chartSeries: [],
-        trendLoading: false,
-        assetTypeSeries: [],
-        messageByRuleSeries: [],
-        ruleMessageLoading: false, //第三行第二个图
-        messageByAssetSeries: [],
-        assetMessageLoading: false, //第三行第三个图
-        messageByModuleSeries: [],
-        moduleMessageLoading: false, //第三行第三个图
-        alertRuleStatData: {},
-        dataCenterMapSeries: [],
-        trafficDatacenterData: [],
-        trafficTagData: [],
-        trafficData: [],
-        allProject:[],
-        trendSearchParam: {start: '', end: '', dc: [], tag: [], select: [], watch: true},
 
-        alertMessageShow: 'asset', //asset/module
-        bottom3DropdownShow: false, //最底部行第三列的下拉选择框
-
-        topFilter:{
-          optionals: [10, 20, 50],
-          rule: 10,
-          asset: 48,
-          module: 48
-        },
-        system_server_time:null,
-        freshDateTimer:null,
-        freshDataTimer:null,
-
-        tooltip: {
-          x: 0,
-          y: 0
-        },
-        searchTime:bus.getTimezontDateRange(),
-        messageAssetData:[],
-        col:10,
-        length:9,
-        messageModuleData:[],
+    formatNodesArr (arr) {
+      return new Promise(resolve => {
+        const promiseArr = []
+        arr.forEach((item, index) => {
+          item.shape = 'image'
+          item.id = item.moduleId
+          this.$get('/module/stat', { id: item.id }).then(res => {
+            item.state = res.data
+          })
+          promiseArr.push(this.dealImg(`/project/topo/icon/${item.iconId}`))
+        })
+        Promise.all(promiseArr).then(res => {
+          arr.forEach((item, index) => {
+            item.image = res[index]
+          })
+          resolve(arr)
+        })
+      })
+    },
+    formatEdgesArr (arr) {
+      arr.forEach((item) => {
+        item.from = item.source
+        item.to = item.target
+        item.label = ''
+        item.title = 'title'
+        item.smooth.roundness = 0.4
+      })
+      return arr
+    },
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve) => {
+          this.$axios
+            .get(url, {
+              responseType: 'arraybuffer'
+            })
+            .then(res => {
+              return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
+            })
+            .then(data => {
+              resolve(data)
+            })
+            .catch(err => {
+              console.error(err)
+            })
+        })
       }
     },
-    filters: {
-      numberFormat(num) {
-        let fixed = 1;
-        if (num) {
-          try {
-            num = parseFloat(num);
-            if (num < 1000) {
-              return num;
-            } else if (num < 1000000) {
-              num=num/1000;
-              num = num.toString();
-              let index = num.indexOf('.');
-              if (index !== -1) {
-                num = num.substring(0, fixed + index + 1);
-              } else {
-                num = num.substring(0);
-              }
-              return parseFloat(num).toFixed(fixed)
-            } else if (num < 1000000000) {
-              num=num/1000000;
-              num = num.toString();
-              let index = num.indexOf('.');
-              if (index !== -1) {
-                num = num.substring(0, fixed + index + 1);
-              } else {
-                num = num.substring(0);
-              }
-              return parseFloat(num).toFixed(fixed)
-            }
-          } catch (err) {
-            return 0;
-          }
-        }
-        return 0;
-      },
-      unitFormat(num) {
-        if (num) {
-          try {
-            num = parseFloat(num);
-            if (num < 1000) {
-              return "";
-            } else if (num < 1000000) {
-              return " K";
-            } else if (num < 1000000000) {
-              return " M";
-            }
-          } catch (err) {
-            return "";
-          }
-        }
-        return "";
-      }
+    toProject (projectInfo) { // 跳转对应project页面
+      this.$store.commit('setOverViewProject', projectInfo)
     },
-    methods: {
-      /*初始化数据 start*/
-      initData() {
-        return [
-          this.querySystemState(),
-          this.queryAssetData(),
-          this.queryProjectData(),
-          this.queryModuleData(),
-          this.queryEndpointData(),
-          this.queryAlertMessageData(),
-          this.queryAlertRuleData(),
-          // this.queryAlertTrendData(),
-          this.initMap(),
-          this.queryAlertStatByRule(),//3-3
-          this.queryAlertStatByAsset(),//3-2 新的也是这个 3-2
-          this.queryAlertStatByModule(),// 新的3-3
-          this.getDcTrafficData(),
-          this.queryAllProjectData(),
-        ]
-      },
-      setFreshDataTimer:function(){
-        // this.freshDataTimer=setInterval(()=>{
-        //   if(this.$refs.overviewLoading){
-        //     this.$refs.overviewLoading.startLoading();
-        //   }
-        //   Promise.all(this.initData()).then(()=>{
-        //     if(this.$refs.overviewLoading){
-        //       this.$refs.overviewLoading.endLoading();
-        //     }
-        //   })
-        // },5*60*1000)
-        Promise.all(this.initData()).then(()=>{
-          if(this.$refs.overviewLoading){
-            this.$refs.overviewLoading.endLoading();
-          }
-        })
-      },
-      querySystemState:function(){
-        return new Promise(resolve => {
-          this.$get('/healthy').then(response=>{
-            if(response.code==200){
-              if(response.time){
-                this.system_server_time=this.utcTimeToTimezone(response.time)
-              }else{
-                this.system_server_time=bus.computeTimezone(new Date().getTime())
-              }
-            }else{
-              this.system_server_time=bus.computeTimezone(new Date().getTime())
-            }
-            resolve();
-          })
-        })
-      },
-      queryAllProjectData(){
-        this.$get('/project',{pageSize:-1}).then(res=>{
-          this.topologyLoading=true;
-          let axiosAll=[];
-          let promiseArr=[];
-          let temp=[];
-          if(res.data.list.length===0){
-            this.topologyLoading=false;
-          }
-          res.data.list.forEach((item)=>{
-            axiosAll.push(axios.get(`/project/topo?projectId=${item.id}`))
-          });
-          axios.all(axiosAll).then(res2=>{
-            res2=res2.map((item,index)=>{
-              return {...item.data.data,...res.data.list[index]}
+    queryAssetData () {
+      return new Promise(resolve => {
+        this.assetLoading = true
+        this.$refs.assetTypePie.startLoading()
+        this.$get('overview/assetStat').then(response => {
+          this.assetLoading = false
+          if (response.code === 200) {
+            this.assetData = response.data
+
+            /* 饼图 */
+            const legendData = []
+            const typeSeriesData = []
+
+            const vm = this
+            const assetTotalCount = (function () {
+              let count = 0
+              vm.assetData.typeStat && vm.assetData.typeStat.forEach(item => {
+                count += item.total
+              })
+              return count
+            }())
+
+            vm.assetData.typeStat && this.assetData.typeStat.forEach(item => {
+              legendData.push([item.name, (item.total * 100 / assetTotalCount).toFixed(2)])
+              typeSeriesData.push({ name: item.name, value: item.total, up: item.pingUp, down: item.pingDown })
             })
-            res2=res2.filter((item)=>item.topo&&item.topo.pens&&item.topo.pens.length);
-            if(res2.length==0){
-              this.topologyLoading=false;
-            }
-            res2.forEach(item=>{
-              temp.push(item)
-            });
-            this.allProject=temp;
-            this.topologyLoading=false;
-          })
-        })
-      },
-
-      formatNodesArr(arr){
-        return new Promise(resolve=>{
-          let promiseArr=[];
-          arr.forEach((item,index)=>{
-            item.shape='image';
-            item.id=item.moduleId;
-            this.$get('/module/stat',{id:item.id}).then(res=>{
-              item.state=res.data;
-            });
-            promiseArr.push( this.dealImg(`/project/topo/icon/${item.iconId}`))
-          });
-          Promise.all(promiseArr).then(res=>{
-            arr.forEach((item,index)=>{
-              item.image=res[index]
-            })
-            resolve(arr)
-          });
-        })
-      },
-      formatEdgesArr(arr){
-        arr.forEach((item)=>{
-          item.from=item.source;
-          item.to=item.target;
-          item.label='';
-          item.title='title';
-          item.smooth.roundness=0.4;
-        });
-        return arr
-      },
-      dealImg(url) {
-        // 处理后端传过来的图片流乱码问题
-        if (url) {
-          return new Promise((resolve)=>{
-            this.$axios
-              .get(url, {
-                responseType: "arraybuffer"
-              })
-              .then(res => {
-                return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
-              })
-              .then(data => {
-                resolve(data)
-              })
-              .catch(err => {
-              });
-          })
-        }
-      },
-      toProject(projectInfo){//跳转对应project页面
-        this.$store.commit("setOverViewProject", projectInfo);
-      },
-      queryAssetData() {
-        return new Promise(resolve => {
-          this.assetLoading = true;
-          this.$refs.assetTypePie.startLoading();
-          this.$get('overview/assetStat').then(response => {
-            this.assetLoading = false;
-            if (response.code === 200) {
-              this.assetData = response.data;
-
-              /*饼图*/
-              let legendData = [];
-              let typeSeriesData = [];
-
-              let vm = this;
-              let assetTotalCount = function() {
-                let count = 0;
-                vm.assetData.typeStat && vm.assetData.typeStat.forEach(item => {
-                  count += item.total;
-                });
-                return count;
-              }();
-
-              vm.assetData.typeStat && this.assetData.typeStat.forEach(item => {
-                legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]);
-                typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
-              });
-              let series = [{
-                name: 'Type',
-                data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
-                type: 'pie',
-                radius: ["43%", "55%"],
-                center: ["40%", "50%"],
-                minAngle: 15,
-                itemStyle: {
-                  borderColor: "#fff",
-                  borderWidth: 1,
-                },
-                label: {show: false},
-                tooltip: {
-                  backgroundColor: "rgba(255, 255, 255, 0.66)",
-                  extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
-                  textStyle: {color: "#333333"},
-                  renderMode: 'html',
-                  formatter: function(params) {
-                    return `
+            const series = [{
+              name: 'Type',
+              data: typeSeriesData.sort((a, b) => { return a.value > b.value ? -1 : 1 }),
+              type: 'pie',
+              radius: ['43%', '55%'],
+              center: ['40%', '50%'],
+              minAngle: 15,
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+              },
+              tooltip: {
+                backgroundColor: 'rgba(255, 255, 255, 0.66)',
+                extraCssText: 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);',
+                textStyle: { color: '#333333' },
+                renderMode: 'html',
+                formatter: function (params) {
+                  return `
                   <div class="overview-tooltip-box">
                     <div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
                     <div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
-                  </div>`;
-                  }
-                },
-                label: {
-                  normal: {
-                    show: false,
-                    position: 'center',
-                    formatter: function(param){ // 设置圆饼图中间文字排版
-                      return ['{name|' + param.name + '}',
-                        '{percent|(' + param.percent + '%)}']
-                        .join("\n");
+                  </div>`
+                }
+              },
+              label: {
+                normal: {
+                  show: false,
+                  position: 'center',
+                  formatter: function (param) { // 设置圆饼图中间文字排版
+                    return ['{name|' + param.name + '}',
+                      '{percent|(' + param.percent + '%)}']
+                      .join('\n')
+                  },
+                  rich: {
+                    name: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 19,
+                      padding: 10
                     },
-                    rich: {
-                      name: {
-                        textAlign: 'center',
-                        color: "#333",
-                        fontSize: 19,
-                        padding: 10
-                      },
-                      percent: {
-                        textAlign: 'center',
-                        color: "#333",
-                        fontSize: 12,
-                        padding: 10
-                      }
+                    percent: {
+                      textAlign: 'center',
+                      color: '#333',
+                      fontSize: 12,
+                      padding: 10
                     }
-                  },
-                  emphasis: {
-                    show: true, //文字至于中间时，这里需为true
-                  },
+                  }
                 },
-              }];
-              let legend = {
-                show: true,
-                orient: "vertical",
-                top: "30%",
-                right: 25,
-                icon: "circle",
-              };
-              if(typeSeriesData.length===0 || !vm.assetData.typeStat || vm.assetData.typeStat.length == 0) {
-                legend.show=false;
+                emphasis: {
+                  show: true // 文字至于中间时，这里需为true
+                }
               }
-              this.assetData.typeStat && this.assetData.typeStat.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData);
-              this.$refs.assetTypePie.endLoading();
+            }]
+            const legend = {
+              show: true,
+              orient: 'vertical',
+              top: '30%',
+              right: 25,
+              icon: 'circle'
             }
-            resolve()
-          })
-        })
-      },
-      queryProjectData() {
-        return new Promise(resolve => {
-          this.projectLoading = true;
-          this.$get('overview/projectStat').then(response => {
-            this.projectLoading = false;
-            if (response.code === 200) {
-              this.projectData = response.data;
+            if (typeSeriesData.length === 0 || !vm.assetData.typeStat || vm.assetData.typeStat.length == 0) {
+              legend.show = false
             }
-            resolve();
-          })
+            this.assetData.typeStat && this.assetData.typeStat.length !== 0 && this.$refs.assetTypePie.setSeries(series, legend, legendData)
+            this.$refs.assetTypePie.endLoading()
+          }
+          resolve()
         })
-      },
-      queryModuleData() {
-        return new Promise(resolve => {
-          this.moduleLoading = true;
-          this.$get('overview/moduleStat').then(response => {
-            this.moduleLoading = false;
-            if (response.code === 200) {
-              this.moduleData = response.data;
-            }
-            resolve();
-          })
+      })
+    },
+    queryProjectData () {
+      return new Promise(resolve => {
+        this.projectLoading = true
+        this.$get('overview/projectStat').then(response => {
+          this.projectLoading = false
+          if (response.code === 200) {
+            this.projectData = response.data
+          }
+          resolve()
         })
-      },
-      queryEndpointData() {
-        return new Promise(resolve => {
-          this.endpointLoading = true;
-          this.$get('overview/endpointStat').then(response => {
-            this.endpointLoading = false;
-            if (response.code === 200) {
-              this.endpointData = response.data;
-            }
-            resolve();
-          })
+      })
+    },
+    queryModuleData () {
+      return new Promise(resolve => {
+        this.moduleLoading = true
+        this.$get('overview/moduleStat').then(response => {
+          this.moduleLoading = false
+          if (response.code === 200) {
+            this.moduleData = response.data
+          }
+          resolve()
         })
-      },
-      queryAlertMessageData() {
-        return new Promise(resolve => {
-          this.alertMessageLoading = true;
-          this.$get('overview/alertMessageStat').then(response => {
-            this.alertMessageLoading = false;
-            if (response.code === 200) {
-              this.alertMessageData = response.data;
-            }
-            resolve();
-          })
+      })
+    },
+    queryEndpointData () {
+      return new Promise(resolve => {
+        this.endpointLoading = true
+        this.$get('overview/endpointStat').then(response => {
+          this.endpointLoading = false
+          if (response.code === 200) {
+            this.endpointData = response.data
+          }
+          resolve()
         })
-      },
-      queryAlertRuleData() {
-        return new Promise(resolve => {
-          this.$get('overview/alertRuleStat').then(response => {
-            if (response.code === 200) {
-              this.alertRuleData = response.data;
-            }
-            resolve();
-          })
+      })
+    },
+    queryAlertMessageData () {
+      return new Promise(resolve => {
+        this.alertMessageLoading = true
+        this.$get('overview/alertMessageStat').then(response => {
+          this.alertMessageLoading = false
+          if (response.code === 200) {
+            this.alertMessageData = response.data
+          }
+          resolve()
         })
-      },
-      queryAlertTrendData() {
-        return new Promise(res => {
-
-          this.$refs.chartbox.startLoading();
-          this.chartSeries = [];
-          let rxPromise = new Promise((resolve, reject) => {
-            this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
-              if(response.status == 'success'){
-                if(response.data.result){
-                  let series={
-                    name: 'RX',
-                    symbol:'none',  //去掉点
-                    smooth:0.2,  //曲线变平滑
-                    data: [],
-                    type:'line',
-                    lineStyle: {
-                      width: 1,
-                      opacity: 0.9
-                    },
-                  };
-                  if (response.data.result.length > 0) {
-                    series.data=response.data.result[0].values.map((item)=>{
-                      return [item[0]*1000,item[1]];
-                    });
-                  }
-                  this.chartSeries.push(series);
-                  if (this.chartSeries.length == 2) {
-                    this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
-                    this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
-                    this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                    this.$refs.chartbox.modifyOption("grid", "top", 40);
-                    this.$refs.chartbox.modifyOption("grid", "left", 10);
-                    this.$refs.chartbox.modifyOption("grid", "right", 40);
-                    this.$refs.chartbox.modifyOption("grid", "bottom", 18);
-                    this.$refs.chartbox.modifyOption("grid", "containLabel", true);
-                    this.$refs.chartbox.setSeries(this.chartSeries);
+      })
+    },
+    queryAlertRuleData () {
+      return new Promise(resolve => {
+        this.$get('overview/alertRuleStat').then(response => {
+          if (response.code === 200) {
+            this.alertRuleData = response.data
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertTrendData () {
+      return new Promise(() => {
+        this.$refs.chartbox.startLoading()
+        this.chartSeries = []
+        const rxPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response => {
+            if (response.status == 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: 'RX',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2, // 曲线变平滑
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
                   }
                 }
-                resolve(true);
-              }else{
-                console.error(response);
-                resolve(false);
+                if (response.data.result.length > 0) {
+                  series.data = response.data.result[0].values.map((item) => {
+                    return [item[0] * 1000, item[1]]
+                  })
+                }
+                this.chartSeries.push(series)
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption('tooltip', 'backgroundColor', 'rgba(255, 255, 255, 0.66)')
+                  this.$refs.chartbox.modifyOption('tooltip', 'extraCssText', 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);')
+                  this.$refs.chartbox.modifyOption('tooltip', 'textStyle', { color: '#000' })
+                  this.$refs.chartbox.modifyOption('grid', 'top', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'left', 10)
+                  this.$refs.chartbox.modifyOption('grid', 'right', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'bottom', 18)
+                  this.$refs.chartbox.modifyOption('grid', 'containLabel', true)
+                  this.$refs.chartbox.setSeries(this.chartSeries)
+                }
               }
-            });
-          });
-          let txPromise = new Promise((resolve, reject) => {
-            this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
-              if(response.status == 'success'){
-                if(response.data.result){
-                  let series={
-                    name: 'TX',
-                    symbol:'none',  //去掉点
-                    smooth:0.2,  //曲线变平滑
-                    data: [],
-                    type:'line',
-                    lineStyle: {
-                      width: 1,
-                      opacity: 0.9
-                    },
-                  };
-                  if (response.data.result.length > 0) {
-                    series.data=response.data.result[0].values.map((item)=>{
-                      return [item[0]*1000,item[1]];
-                    });
-                  }
-                  this.chartSeries.push(series);
-                  if (this.chartSeries.length == 2) {
-                    this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
-                    this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
-                    this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
-                    this.$refs.chartbox.modifyOption("grid", "top", 40);
-                    this.$refs.chartbox.modifyOption("grid", "left", 10);
-                    this.$refs.chartbox.modifyOption("grid", "right", 40);
-                    this.$refs.chartbox.modifyOption("grid", "bottom", 18);
-                    this.$refs.chartbox.setSeries(this.chartSeries);
+              resolve(true)
+            } else {
+              console.error(response)
+              resolve(false)
+            }
+          })
+        })
+        const txPromise = new Promise((resolve, reject) => {
+          this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response => {
+            if (response.status == 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: 'TX',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2, // 曲线变平滑
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
                   }
                 }
-                resolve(true);
-              }else{
-                console.error(response)
-                resolve(false);
+                if (response.data.result.length > 0) {
+                  series.data = response.data.result[0].values.map((item) => {
+                    return [item[0] * 1000, item[1]]
+                  })
+                }
+                this.chartSeries.push(series)
+                if (this.chartSeries.length == 2) {
+                  this.$refs.chartbox.modifyOption('tooltip', 'backgroundColor', 'rgba(255, 255, 255, 0.66)')
+                  this.$refs.chartbox.modifyOption('tooltip', 'extraCssText', 'box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);')
+                  this.$refs.chartbox.modifyOption('tooltip', 'textStyle', { color: '#000' })
+                  this.$refs.chartbox.modifyOption('grid', 'top', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'left', 10)
+                  this.$refs.chartbox.modifyOption('grid', 'right', 40)
+                  this.$refs.chartbox.modifyOption('grid', 'bottom', 18)
+                  this.$refs.chartbox.setSeries(this.chartSeries)
+                }
               }
-            });
-          });
-          Promise.all([rxPromise, txPromise]).then(resolve => {
-            this.$refs.chartbox.endLoading();
-            res()
-          }, reject => {
-            this.$refs.chartbox.endLoading();
-            res()
-          });
+              resolve(true)
+            } else {
+              console.error(response)
+              resolve(false)
+            }
+          })
         })
-      },
-      trendParamHandle(t) {
-        let before;
-        let end;
-        if (this.trendSearchParam.start) {
-          before = this.trendSearchParam.start;
-        } else {
-          before = new Date();
-          before.setHours(new Date().getHours()-1);
-          before = this.dateFormat('yyyy-mm-dd HH:MM:SS', before);
-        }
-        if (this.trendSearchParam.end) {
-          end = this.trendSearchParam.end;
-        } else {
-          end = new Date();
-          end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end);
-        }
-        let metric;
-        let rule;
-        if (t == 'rx') {
-          metric = {rx: '"1"'};
-          rule = "ifInOctets";
-        } else if (t == 'tx') {
-          metric = {tx: '"1"'};
-          rule = "ifOutOctets";
-        }
-        if (this.trendSearchParam.select.length > 0) {
-          //console.info("select", this.trendSearchParam.select);
-          let dc = [];
-          let tags = [];
-          this.trendSearchParam.select.forEach(select => {
-            let item = select[select.length-1];
-            let type = item.split("::")[0];
-            let value = item.split("::")[1];
-            if (type == "$dc$") {
-              dc.push(value);
-            } else if (type == "$key$") {
-              /*let hasDc = dc.some(d => {
+        Promise.all([rxPromise, txPromise]).then(resolve => {
+          this.$refs.chartbox.endLoading()
+          resolve()
+        }, reject => {
+          this.$refs.chartbox.endLoading()
+          reject()
+        })
+      })
+    },
+    trendParamHandle (t) {
+      let before
+      let end
+      if (this.trendSearchParam.start) {
+        before = this.trendSearchParam.start
+      } else {
+        before = new Date()
+        before.setHours(new Date().getHours() - 1)
+        before = this.dateFormat('yyyy-mm-dd HH:MM:SS', before)
+      }
+      if (this.trendSearchParam.end) {
+        end = this.trendSearchParam.end
+      } else {
+        end = new Date()
+        end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end)
+      }
+      let metric
+      let rule
+      if (t == 'rx') {
+        metric = { rx: '"1"' }
+        rule = 'ifInOctets'
+      } else if (t == 'tx') {
+        metric = { tx: '"1"' }
+        rule = 'ifOutOctets'
+      }
+      if (this.trendSearchParam.select.length > 0) {
+        // console.info("select", this.trendSearchParam.select);
+        const dc = []
+        const tags = []
+        this.trendSearchParam.select.forEach(select => {
+          const item = select[select.length - 1]
+          const type = item.split('::')[0]
+          const value = item.split('::')[1]
+          if (type == '$dc$') {
+            dc.push(value)
+          } else if (type == '$key$') {
+            /* let hasDc = dc.some(d => {
                 if (d == select[0].split("::")[1]) {
                   return true;
                 }
@@ -833,458 +827,419 @@
                   }
                 }
                 tags.push(tag);
-              }*/
-            } else {
-              let dcIndex = dc.indexOf(select[0].split("::")[1]);
-              if (dcIndex == -1) {
-                dc.push(select[0].split("::")[1]);
-              }
-              let key = select[1].split("::")[1];
-              let hasKey = tags.some(tag => {
-                if (tag.key == key) {
-                  let hasValue = tag.value.some(v => {
-                    return v == value;
-                  });
-                  if (!hasValue) {
-                    tag.value.push(value);
-                  }
-                  return true;
+              } */
+          } else {
+            const dcIndex = dc.indexOf(select[0].split('::')[1])
+            if (dcIndex == -1) {
+              dc.push(select[0].split('::')[1])
+            }
+            const key = select[1].split('::')[1]
+            const hasKey = tags.some(tag => {
+              if (tag.key == key) {
+                const hasValue = tag.value.some(v => {
+                  return v == value
+                })
+                if (!hasValue) {
+                  tag.value.push(value)
                 }
-                return false;
-              });
-              if (!hasKey) {
-                tags.push({key: key, value: [value]});
+                return true
               }
+              return false
+            })
+            if (!hasKey) {
+              tags.push({ key: key, value: [value] })
             }
-          });
-          if (dc.length == 1) {
-            metric.datacenter = '"' + dc[0] + '"';
-          } else if (dc.length > 1) {
-            metric.datacenter = '~"' + dc.join("|") + '"';
           }
-          tags.forEach(item => {
-            if (item.value.length == 1) {
-              metric[item.key] = '"' + item.value[0] + '"';
-              //eval('metric.' + item.key + '="' + item.value[0] + '"');
-            } else if (item.value.length > 1) {
-              metric[item.key] = '~"' + item.value.join("|") + '"';
-              //eval('metric.' + item.key + '="~' + item.value.join("|") + '"');
-            }
-          });
+        })
+        if (dc.length == 1) {
+          metric.datacenter = '"' + dc[0] + '"'
+        } else if (dc.length > 1) {
+          metric.datacenter = '~"' + dc.join('|') + '"'
         }
-        let metricString = "{";
-        for (let key in metric) {
-          metricString += key + "=" + metric[key] + ",";
-        }
-        metricString = metricString.substring(0, metricString.length-1);
-        metricString += "}";
-        let params = {
-          start: this.$stringTimeParseToUnix(before),
-          end: this.$stringTimeParseToUnix(end),
-          step: bus.getStep(before, end),
-          query: 'sum(irate(' + rule + metricString + '[' + (this.trendSearchParam.timeRange ? this.trendSearchParam.timeRange : "1h") + ']))'
-        };
-        //console.info("params", params);
-        return params;
-      },
-      initMap() {
-        let loadPromise;
-        this.loadMapConfig().then((mapConfig)=>{
-          if(mapConfig&&this.map){
-            loadPromise=this.loadDataCenterMapData()
+        tags.forEach(item => {
+          if (item.value.length == 1) {
+            metric[item.key] = '"' + item.value[0] + '"'
+            // eval('metric.' + item.key + '="' + item.value[0] + '"');
+          } else if (item.value.length > 1) {
+            metric[item.key] = '~"' + item.value.join('|') + '"'
+            // eval('metric.' + item.key + '="~' + item.value.join("|") + '"');
           }
-        });
-        return loadPromise;
-      },
-      initTooltipChart(param) {
-        let vm = this;
-        setTimeout(()=>{
-          let data = param.tooltip.options.data;
-          //console.info(tooltipEndpointChart);
-          tooltipEndpointChart = echarts.init(document.querySelector("#tooltip-chart--endpoint"));
-          tooltipPrometheusChart = echarts.init(document.querySelector("#tooltip-chart--prometheus"));
-          let endpointOption = chartConfig.getOption("tooltipPie"),
-            prometheusOption = chartConfig.getOption("tooltipPie");
-          endpointOption.series[0].label.formatter = data.endpointTotal + "";
-          endpointOption.series[0].data = [
-            {name: vm.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
-            {name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0},
-            {name: vm.$t("asset.suspended"), value: data.endpointSuspended ? data.endpointSuspended : 0}
-          ];
-          endpointOption.title.text = vm.$t("project.endpoint.endpoint");
-          endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown"), vm.$t("asset.suspended")];
-          prometheusOption.series[0].label.formatter = data.promTotal + "";
-          prometheusOption.series[0].data = [
-            {name: vm.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
-            {name: vm.$t("dashboard.overview.asset.pingDown"), value: data.promDown ? data.promDown : 0}
-          ];
-          prometheusOption.title.text = "Prometheus";
-          prometheusOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown")];
-          tooltipEndpointChart.setOption(endpointOption, true);
-          tooltipPrometheusChart.setOption(prometheusOption, true);
-        },100)
-        /*setTimeout(function() {
+        })
+      }
+      let metricString = '{'
+      for (const key in metric) {
+        metricString += key + '=' + metric[key] + ','
+      }
+      metricString = metricString.substring(0, metricString.length - 1)
+      metricString += '}'
+      const params = {
+        start: this.$stringTimeParseToUnix(before),
+        end: this.$stringTimeParseToUnix(end),
+        step: bus.getStep(before, end),
+        query: 'sum(irate(' + rule + metricString + '[' + (this.trendSearchParam.timeRange ? this.trendSearchParam.timeRange : '1h') + ']))'
+      }
+      // console.info("params", params);
+      return params
+    },
+    initMap () {
+      let loadPromise
+      this.loadMapConfig().then((mapConfig) => {
+        if (mapConfig && this.map) {
+          loadPromise = this.loadDataCenterMapData()
+        }
+      })
+      return loadPromise
+    },
+    initTooltipChart (param) {
+      const vm = this
+      setTimeout(() => {
+        const data = param.tooltip.options.data
+        // console.info(tooltipEndpointChart);
+        tooltipEndpointChart = echarts.init(document.querySelector('#tooltip-chart--endpoint'))
+        tooltipPrometheusChart = echarts.init(document.querySelector('#tooltip-chart--prometheus'))
+        const endpointOption = chartConfig.getOption('tooltipPie')
+        const prometheusOption = chartConfig.getOption('tooltipPie')
+        endpointOption.series[0].label.formatter = data.endpointTotal + ''
+        endpointOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.endpointUp ? data.endpointUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.endpointDown ? data.endpointDown : 0 },
+          { name: vm.$t('asset.suspended'), value: data.endpointSuspended ? data.endpointSuspended : 0 }
+        ]
+        endpointOption.title.text = vm.$t('project.endpoint.endpoint')
+        endpointOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown'), vm.$t('asset.suspended')]
+        prometheusOption.series[0].label.formatter = data.promTotal + ''
+        prometheusOption.series[0].data = [
+          { name: vm.$t('dashboard.overview.asset.pingUp'), value: data.promUp ? data.promUp : 0 },
+          { name: vm.$t('dashboard.overview.asset.pingDown'), value: data.promDown ? data.promDown : 0 }
+        ]
+        prometheusOption.title.text = 'Prometheus'
+        prometheusOption.legend.data = [vm.$t('dashboard.overview.asset.pingUp'), vm.$t('dashboard.overview.asset.pingDown')]
+        tooltipEndpointChart.setOption(endpointOption, true)
+        tooltipPrometheusChart.setOption(prometheusOption, true)
+      }, 100)
+      /* setTimeout(function() {
           tooltipEndpointChart.setOption(endpointOption);
           tooltipPrometheusChart.setOption(prometheusOption);
-        }, 100);*/
-      },
-      loadMapConfig:function(){
-        let vm = this;
-        return new Promise(resolve => {
-          let DefaultIcon = L.icon({
-            iconUrl: icon,
-            shadowUrl: iconShadow
-          });
-          L.Marker.prototype.options.icon = DefaultIcon;
-          let param={paramKey:'map_center_config'}
-          this.$get('sysConfig',param).then(response=>{
-            if(response.code == 200){
-              let mapConfig=JSON.parse(response.data.paramKey.map_center_config);
-              if(this.map){
-                this.map.remove();
-                this.map=null;
-              }
-              let map = L.map("map",{
-                minZoom:mapConfig.minZoom,
-                maxZoom:mapConfig.maxZoom,
-                attributionControl:false,
-                zoomControl:false,
-                maxBounds:L.latLngBounds(L.latLng(-90,-180),L.latLng(90,180))
-              }).setView([mapConfig.latitude,mapConfig.longitude],mapConfig.zoom);
-              map.createPane("myPane", document.querySelector(".my-pane"));
-              map.on("tooltipopen", function(param) {
-                setTimeout(()=>{
-                  vm.initTooltipChart(param);
-                },100)
-              });
-              map.on("tooltipclose", function(param) {
-                tooltipEndpointChart && tooltipEndpointChart.clear();
-                tooltipPrometheusChart && tooltipPrometheusChart.clear();
-              });
-              this.map = map;
-
-              L.tileLayer(
-                "/static/Tiles/{z}/{x}/{y}.png",
-                {noWrap:true}
-              ).addTo(map);
-
-              let attribution=L.control.attribution({position:'bottomright',prefix:''})
-              attribution.addAttribution(' © OpenStreetMap contributors')
-              attribution.addTo(map)
-
-              L.control.zoom({
-                position:'bottomright',
-                zoomInText:`<i class="nz-icon nz-icon-enlarge"></i>`,
-                zoomOutText:`<i class="nz-icon nz-icon-narrow"></i>`,
-                zoomInTitle:'',
-                zoomOutTitle:'',
-              }).addTo(map)
-
-              resolve(mapConfig);
-            }
-          })
+        }, 100); */
+    },
+    loadMapConfig: function () {
+      const vm = this
+      return new Promise(resolve => {
+        const DefaultIcon = L.icon({
+          iconUrl: icon,
+          shadowUrl: iconShadow
         })
-      },
-      loadDataCenterMapData:function(){
-        return new Promise(res=>{
-
-          let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
-          let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
-          axios.all(requests).then((result)=>{
-            if(result) {
-              let idcInfos = null;
-              let dcStats = null;
-              if (result[0].data && result[0].data.code == 200) {
-                idcInfos = result[0].data.data.list;
-              }
-              if (result[1].data && result[1].data.code == 200) {
-                dcStats = result[1].data.data.dcStat;
-              }
-              if (idcInfos && dcStats) {
-                let dcStatsCopy=Object.assign([],dcStats);
-                dcStatsCopy.sort((a,b)=>{
-                  return a.assetTotal - b.assetTotal;
-                });
-                let bigScatter=10;
-                let mediumScatter=8;
-                let smallScatter=6;
-                let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
-
-                let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
-                let mediumBoundary=Number.parseInt(maxAssetTotal/3);
-                for (let dcStat of dcStats) {
-                  let dcId = dcStat.id;
-                  let dcInfo = idcInfos.find((item) => {
-                    return item.id == dcId;
-                  })
-                  let areaInfo = dcInfo;
-                  if (regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)) {
-                    let areaName = '';
-                    if (areaInfo.i18n) {
-                      areaName = JSON.parse(areaInfo.i18n)[language];
-                    } else {
-                      areaName = areaInfo.name;
-                    }
-
-                    let symbolSize=mediumScatter;
-                    if(dcStat.assetTotal>=bigBoundary){
-                      symbolSize=bigScatter;
-                    }else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
-                      symbolSize=mediumScatter;
-                    }else{
-                      symbolSize=smallScatter;
-                    }
-                    let shadowMarker=null;
-                    let marker=null;
-                   if(dcInfo.state==='ON'){
-                     let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
-                     shadowMarker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {opacity:0,fillOpacity: 0, radius: symbolSize+10});
-                     marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {interactive:false,color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'real-marker error-item':'real-marker '});
-                     shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
-                   } else{
-                     shadowMarker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {opacity:0,fillOpacity: 0, radius: symbolSize+10});
-                     marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {interactive:false,color: '#010101',opacity:0.35,fillColor: '#010101',fillOpacity: 0.35, radius: symbolSize,className:'real-marker'});
-                     shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
-                   }
-                    shadowMarker.on("mouseover", (param) => {
-                      //console.info(param);
-                      let pane = document.querySelector(".leaflet-pane.leaflet-my-pane");
-                      let point = param.containerPoint;
-                      let event = param.originalEvent;
-                      this.tooltip.x = event.clientX+point.x-event.layerX - 5;
-                      this.tooltip.y = event.clientY+point.y-event.layerY;
-                    });
-                    shadowMarker.addTo(this.map)
-                    marker.addTo(this.map);
-                  }
-                }
-              }
+        L.Marker.prototype.options.icon = DefaultIcon
+        const param = { paramKey: 'map_center_config' }
+        this.$get('sysConfig', param).then(response => {
+          if (response.code == 200) {
+            const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
+            if (this.map) {
+              this.map.remove()
+              this.map = null
             }
-            res();
-          })
+            const map = L.map('map', {
+              minZoom: mapConfig.minZoom,
+              maxZoom: mapConfig.maxZoom,
+              attributionControl: false,
+              zoomControl: false,
+              maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+            }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
+            map.createPane('myPane', document.querySelector('.my-pane'))
+            map.on('tooltipopen', function (param) {
+              setTimeout(() => {
+                vm.initTooltipChart(param)
+              }, 100)
+            })
+            map.on('tooltipclose', function (param) {
+              tooltipEndpointChart && tooltipEndpointChart.clear()
+              tooltipPrometheusChart && tooltipPrometheusChart.clear()
+            })
+            this.map = map
+
+            L.tileLayer(
+              '/static/Tiles/{z}/{x}/{y}.png',
+              { noWrap: true }
+            ).addTo(map)
+
+            const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+            attribution.addAttribution(' © OpenStreetMap contributors')
+            attribution.addTo(map)
+
+            L.control.zoom({
+              position: 'bottomright',
+              zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+              zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+              zoomInTitle: '',
+              zoomOutTitle: ''
+            }).addTo(map)
+
+            resolve(mapConfig)
+          }
         })
-      },
-      queryDataCenterMapData() {
-        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
-        let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
-        axios.all(requests).then((result)=>{
-          if(result){
-            let seriesDatas=[];
-            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
-            let idcInfos=null;
-            let dcStats=null;
-            if(result[0].data && result[0].data.code == 200){
-              idcInfos=result[0].data.data.list;
+      })
+    },
+    loadDataCenterMapData: function () {
+      return new Promise(resolve => {
+        const requests = [axios.get('/idc?pageSize=-1'), axios.get('/overview/datacenterStat')]
+        axios.all(requests).then((result) => {
+          if (result) {
+            let idcInfos = null
+            let dcStats = null
+            if (result[0].data && result[0].data.code == 200) {
+              idcInfos = result[0].data.data.list
             }
-            if(result[1].data && result[1].data.code == 200){
-              dcStats=result[1].data.data.dcStat;
+            if (result[1].data && result[1].data.code == 200) {
+              dcStats = result[1].data.data.dcStat
             }
-            if(idcInfos && dcStats){
-              let dcStatsCopy=Object.assign([],dcStats);
-              dcStatsCopy.sort((a,b)=>{
-                return a.assetTotal - b.assetTotal;
-              });
-              let bigScatter=25;
-              let mediumScatter=20;
-              let smallScatter=15;
-              let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
+            if (idcInfos && dcStats) {
+              const dcStatsCopy = Object.assign([], dcStats)
+              dcStatsCopy.sort((a, b) => {
+                return a.assetTotal - b.assetTotal
+              })
+              const bigScatter = 10
+              const mediumScatter = 8
+              const smallScatter = 6
+              const maxAssetTotal = dcStatsCopy[dcStatsCopy.length - 1].assetTotal
 
-              let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
-              let mediumBoundary=Number.parseInt(maxAssetTotal/3);
-              for(let dcStat of dcStats){
-                let dcId=dcStat.id;
-                let dcInfo=idcInfos.find((item)=>{
-                  return item.id == dcId ;
+              const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2)
+              const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+              for (const dcStat of dcStats) {
+                const dcId = dcStat.id
+                const dcInfo = idcInfos.find((item) => {
+                  return item.id == dcId
                 })
-                let areaInfo=dcInfo;
-                if(regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)){
-                  let areaName='';
-                  if(areaInfo.i18n){
-                    areaName=JSON.parse(areaInfo.i18n)[language];
-                  }else{
-                    areaName=areaInfo.name;
+                if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                  let symbolSize = mediumScatter
+                  if (dcStat.assetTotal >= bigBoundary) {
+                    symbolSize = bigScatter
+                  } else if (dcStat.assetTotal < bigBoundary && dcStat.assetTotal >= mediumBoundary) {
+                    symbolSize = mediumScatter
+                  } else {
+                    symbolSize = smallScatter
                   }
-                  let symbolSize=mediumScatter;
-                  if(dcStat.assetTotal>=bigBoundary){
-                    symbolSize=bigScatter;
-                  }else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
-                    symbolSize=mediumScatter;
-                  }else{
-                    symbolSize=smallScatter;
+                  let shadowMarker = null
+                  let marker = null
+                  if (dcInfo.state === 'ON') {
+                    const hasAlert = dcStat.alertP1 != 0 || dcStat.alertP2 != 0 || dcStat.alertP3 != 0 || dcStat.assetPingDown != 0 || dcStat.endpointDown != 0 || dcStat.promDown != 0
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: hasAlert ? '#DE5D3F' : '#23BF9A', opacity: 0.42, fillColor: hasAlert ? '#DE5D3F' : '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: hasAlert ? 'real-marker error-item' : 'real-marker ' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+                  } else {
+                    shadowMarker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                    marker = L.circleMarker([dcInfo.latitude, dcInfo.longitude], { interactive: false, color: '#010101', opacity: 0.35, fillColor: '#010101', fillOpacity: 0.35, radius: symbolSize, className: 'real-marker' })
+                    shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
                   }
-
-                  seriesDatas.push({
-                    name:areaName,
-                    value:[dcInfo.longitude,dcInfo.latitude,dcStat],
-                    symbolSize:symbolSize,
-                  });
+                  shadowMarker.on('mouseover', (param) => {
+                    // console.info(param);
+                    const point = param.containerPoint
+                    const event = param.originalEvent
+                    this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                    this.tooltip.y = event.clientY + point.y - event.layerY
+                  })
+                  shadowMarker.addTo(this.map)
+                  marker.addTo(this.map)
                 }
               }
             }
-            this.$refs.dataCenterMap.modifyOption('tooltip','formatter',this.mapTooltipFormatter)
-            this.$refs.dataCenterMap.modifyOption('tooltip','borderColor',"rgba(221,228,237,1)")
-            this.dataCenterMapSeries=[{
-              name: 'DataCenter',
-              type: 'scatter',
-              coordinateSystem: 'geo',
+          }
+          resolve()
+        })
+      })
+    },
+    queryDataCenterMapData () {
+      const language = localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en'
+      const requests = [axios.get('/idc?pageSize=-1'), axios.get('/overview/datacenterStat')]
+      axios.all(requests).then((result) => {
+        if (result) {
+          const seriesDatas = []
+          this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries)
+          let idcInfos = null
+          let dcStats = null
+          if (result[0].data && result[0].data.code == 200) {
+            idcInfos = result[0].data.data.list
+          }
+          if (result[1].data && result[1].data.code == 200) {
+            dcStats = result[1].data.data.dcStat
+          }
+          if (idcInfos && dcStats) {
+            const dcStatsCopy = Object.assign([], dcStats)
+            dcStatsCopy.sort((a, b) => {
+              return a.assetTotal - b.assetTotal
+            })
+            const bigScatter = 25
+            const mediumScatter = 20
+            const smallScatter = 15
+            const maxAssetTotal = dcStatsCopy[dcStatsCopy.length - 1].assetTotal
+
+            const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2)
+            const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+            for (const dcStat of dcStats) {
+              const dcId = dcStat.id
+              const dcInfo = idcInfos.find((item) => {
+                return item.id == dcId
+              })
+              const areaInfo = dcInfo
+              if (regNum.test(dcInfo.latitude) && regNum.test(dcInfo.longitude)) {
+                let areaName = ''
+                if (areaInfo.i18n) {
+                  areaName = JSON.parse(areaInfo.i18n)[language]
+                } else {
+                  areaName = areaInfo.name
+                }
+                let symbolSize = mediumScatter
+                if (dcStat.assetTotal >= bigBoundary) {
+                  symbolSize = bigScatter
+                } else if (dcStat.assetTotal < bigBoundary && dcStat.assetTotal >= mediumBoundary) {
+                  symbolSize = mediumScatter
+                } else {
+                  symbolSize = smallScatter
+                }
+
+                seriesDatas.push({
+                  name: areaName,
+                  value: [dcInfo.longitude, dcInfo.latitude, dcStat],
+                  symbolSize: symbolSize
+                })
+              }
+            }
+          }
+          this.$refs.dataCenterMap.modifyOption('tooltip', 'formatter', this.mapTooltipFormatter)
+          this.$refs.dataCenterMap.modifyOption('tooltip', 'borderColor', 'rgba(221,228,237,1)')
+          this.dataCenterMapSeries = [{
+            name: 'DataCenter',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            label: {
+              formatter: '{b}',
+              position: 'right',
+              show: false
+            },
+            itemStyle: {
+              color: 'orange'
+            },
+            emphasis: {
               label: {
-                formatter: '{b}',
-                position: 'right',
-                show: false
-              },
-              itemStyle: {
-                color: 'orange'
-              },
-              emphasis: {
-                label: {
-                  show: true
-                }
-              },
-              data:seriesDatas
-            }]
-            this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
-            this.$refs.dataCenterMap.endLoading();
-          }
-        })
-      },
-      queryAlertStatByRule() {
-        return new Promise(resolve=>{
-
-          // this.$refs.ruleMessage.startLoading();
-          this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
-            if (response.code === 200) {
-              let seriesData = [];
-              let categoryData = [];
-              response.data.list.forEach(item => {
-                seriesData.splice(0, 0, item.nums);
-                categoryData.splice(0, 0, item.alertName);
-              });
-              this.messageByRuleSeries = {
-                name: 'alertStatByRule',
-                data: seriesData,
-                type: 'bar',
-                barMaxWidth: 15,
-                itemStyle: {
-                  color: function(params) {
-                    let colorList =  ["#FAd4ab", "#d0e8d0"];
-                    if(params.dataIndex % 2 == 0){
-                      return colorList[0]
-                    }else{
-                      return colorList[1]
-                    }
-                  },
-                },
-                category: categoryData, //自定义，用来判断N/A是否显示
-              };
-              // this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
-              // this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
-              // this.$refs.ruleMessage.endLoading();
-            }
-            resolve()
-          });
-        })
-      },
-      queryAlertStatByAsset() {
-        return new Promise(resolve => {
-
-          this.$refs.assetHexagon.startLoading();
-          this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
-            if (response.code === 200) {
-              this.messageAssetData= response.data.list;
-              this.$refs.assetHexagon.endLoading();
-            }
-            resolve();
-          });
-        })
-      },
-      queryAlertStatByModule() {
-        return new Promise(resolve => {
-
-          this.$refs.moduleHexagon.startLoading();
-          this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
-            if (response.code === 200) {
-              this.messageModuleData=response.data.list;
-              this.$refs.moduleHexagon.endLoading();
-            }
-            resolve();
-          });
-        })
-      },
-      getDcTrafficData() {
-        this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
-          if (response.code === 200) {
-            this.trafficData = this.convertTrafficData(response.data.list);
-          }
-        });
-      },
-      convertTrafficData(data) {
-        let result = [];
-        data.forEach(item => {
-          let hasDc = result.some(dc => { //dc去重
-            if (item.idc && dc.label == item.idc.name) {
-              return true;
-            }
-          });
-          if (item.idc && !hasDc) {
-            result.push({label: item.idc.name, value: "$dc$::" + item.idc.name, level: 1});
-          }
-        });
-        function handleTag(dc, tagData) { // dc: cascader数据里的第一级；tagData: 原始数据中的tags
-          if (tagData) {
-            let tags = dc.children;
-            for (let key in tagData) {
-              let hasKey = tags.some(tag => { //tag-key去重
-                if (tag.label == key) {
-                  let hasValue = tag.children.some(value => { //tag-value去重
-                    return value.label == tagData[key];
-                  });
-                  if (!hasValue) {
-                    tag.children.push({label: tagData[key], value: key + "::" + tagData[key], level: 3});
-                  }
-                  return true;
-                }
-                return false;
-              });
-              if (!hasKey) {
-                tags.push({label: key, value: "$key$::" + key, children: [{label: tagData[key], value: key + "::" + tagData[key]}], level: 2});
+                show: true
               }
+            },
+            data: seriesDatas
+          }]
+          this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries)
+          this.$refs.dataCenterMap.endLoading()
+        }
+      })
+    },
+    queryAlertStatByRule () {
+      return new Promise(resolve => {
+        // this.$refs.ruleMessage.startLoading();
+        this.$get('overview/alertStatByRule', { top: this.topFilter.rule }).then(response => {
+          if (response.code === 200) {
+            const seriesData = []
+            const categoryData = []
+            response.data.list.forEach(item => {
+              seriesData.splice(0, 0, item.nums)
+              categoryData.splice(0, 0, item.alertName)
+            })
+            this.messageByRuleSeries = {
+              name: 'alertStatByRule',
+              data: seriesData,
+              type: 'bar',
+              barMaxWidth: 15,
+              itemStyle: {
+                color: function (params) {
+                  const colorList = ['#FAd4ab', '#d0e8d0']
+                  if (params.dataIndex % 2 == 0) {
+                    return colorList[0]
+                  } else {
+                    return colorList[1]
+                  }
+                }
+              },
+              category: categoryData // 自定义，用来判断N/A是否显示
             }
-            dc.children = tags;
+            // this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
+            // this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
+            // this.$refs.ruleMessage.endLoading();
           }
+          resolve()
+        })
+      })
+    },
+    queryAlertStatByAsset () {
+      return new Promise(resolve => {
+        this.$refs.assetHexagon.startLoading()
+        this.$get('overview/alertStatByAsset', { top: this.topFilter.asset }).then(response => {
+          if (response.code === 200) {
+            this.messageAssetData = response.data.list
+            this.$refs.assetHexagon.endLoading()
+          }
+          resolve()
+        })
+      })
+    },
+    queryAlertStatByModule () {
+      return new Promise(resolve => {
+        this.$refs.moduleHexagon.startLoading()
+        this.$get('overview/alertStatByModule', { top: this.topFilter.module }).then(response => {
+          if (response.code === 200) {
+            this.messageModuleData = response.data.list
+            this.$refs.moduleHexagon.endLoading()
+          }
+          resolve()
+        })
+      })
+    },
+    getDcTrafficData () {
+      this.$get('idc/trafficSetting', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.trafficData = this.convertTrafficData(response.data.list)
         }
-        return result;
-      },
-      /*初始化数据 end*/
-      dateChange(val) {
-        this.trendSearchParam.start = val[0];
-        this.trendSearchParam.end = val[1];
-        this.trendSearchParam.timeRange = val[2];
-        this.queryAlertTrendData();
-      },
-      topNChange(type, top) {
-        this.topFilter[type] = top;
+      })
+    },
+    convertTrafficData (data) {
+      const result = []
+      data.forEach(item => {
+        const hasDc = result.some(dc => { // dc去重
+          return item.idc && dc.label == item.idc.name
+        })
+        if (item.idc && !hasDc) {
+          result.push({ label: item.idc.name, value: '$dc$::' + item.idc.name, level: 1 })
+        }
+      })
+      return result
+    },
+    /* 初始化数据 end */
+    dateChange (val) {
+      this.trendSearchParam.start = val[0]
+      this.trendSearchParam.end = val[1]
+      this.trendSearchParam.timeRange = val[2]
+      this.queryAlertTrendData()
+    },
+    topNChange (type, top) {
+      this.topFilter[type] = top
+      if (type == 'asset') {
+        this.queryAlertStatByAsset()
+      } else if (type == 'module') {
+        this.queryAlertStatByModule()
+      } else if (type == 'rule') {
+        this.queryAlertStatByRule()
+      }
+    },
+    alertMessageChange (type) {
+      this.bottom3DropdownShow = false
+      this.alertMessageShow = type
+      this.$nextTick(() => {
         if (type == 'asset') {
-          this.queryAlertStatByAsset();
+          this.queryAlertStatByAsset()
         } else if (type == 'module') {
-          this.queryAlertStatByModule();
-        } else if (type == 'rule') {
-          this.queryAlertStatByRule();
+          this.queryAlertStatByModule()
         }
-      },
-      alertMessageChange(type) {
-        this.bottom3DropdownShow = false;
-        this.alertMessageShow = type;
-        this.$nextTick(() => {
-          if (type == 'asset') {
-            this.queryAlertStatByAsset();
-          } else if (type == 'module') {
-            this.queryAlertStatByModule();
-          }
-        });
-      },
+      })
+    },
 
-      mapTooltipFormatter(dcStat){
-        return `<div class="tooltip">
+    mapTooltipFormatter (dcStat) {
+      return `<div class="tooltip">
           <div class="tooltip--title">${dcStat.name}</div>
           <div class="tooltip--row">
             <div class="tooltip-asset">
@@ -1293,15 +1248,15 @@
                 <div>${this.$t('asset.state')}</div>
                 <div class="tooltip-asset--sub-rows">
                   <div class="tooltip-asset--sub-row">
-                    <div class="sub-row--label">${this.$t("asset.inStock")}</div>
+                    <div class="sub-row--label">${this.$t('asset.inStock')}</div>
                     <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetInStock}</span></div>
                   </div>
                   <div class="tooltip-asset--sub-row">
-                    <div class="sub-row--label">${this.$t("asset.notInStock")}</div>
+                    <div class="sub-row--label">${this.$t('asset.notInStock')}</div>
                     <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
                   </div>
                   <div class="tooltip-asset--sub-row">
-                    <div class="sub-row--label">${this.$t("asset.suspended")}</div>
+                    <div class="sub-row--label">${this.$t('asset.suspended')}</div>
                     <div class="sub-row--value"><div class="sign gray-sign"></div><span>${dcStat.assetSuspended}</span></div>
                   </div>
                 </div>
@@ -1310,18 +1265,18 @@
                 <div style="line-height: 50px">${this.$t('asset.left.ping')}</div>
                 <div class="tooltip-asset--sub-rows">
                   <div class="tooltip-asset--sub-row">
-                    <div class="sub-row--label">${this.$t("dashboard.overview.asset.pingUp")}</div>
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingUp')}</div>
                     <div class="sub-row--value"><div class="sign green-sign"></div><span>${dcStat.assetPingUp}</span></div>
                   </div>
                   <div class="tooltip-asset--sub-row">
-                    <div class="sub-row--label">${this.$t("dashboard.overview.asset.pingDown")}</div>
+                    <div class="sub-row--label">${this.$t('dashboard.overview.asset.pingDown')}</div>
                     <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetPingDown}</span></div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="tooltip-alert">
-              <div class="tooltip-alert--title"><span>${this.$t("dashboard.overview.asset.alert")}</span><span>${dcStat.alertTotal}</span></div>
+              <div class="tooltip-alert--title"><span>${this.$t('dashboard.overview.asset.alert')}</span><span>${dcStat.alertTotal}</span></div>
               <div class="tooltip-alert--row">
                 <div class="row--label row--label__p1">P1</div><div class="row--value row--value__p1">${dcStat.alertP1}</div>
               </div>
@@ -1346,271 +1301,273 @@
             <div class="tooltip-chart" id="tooltip-chart--endpoint"></div>
             <div class="tooltip-chart" id="tooltip-chart--prometheus"></div>
           </div>
-        </div>`;
+        </div>`
 
-        //return tooltip;
-      },
-      simpleFormatter(params) {
-        return `<div class="tooltip" style="min-width: unset;">${params.value}</div>`;
-      },
-      assetTypeFormatter(params) {
-        return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
-      },
-      switchFullScreen:function(){
-        this.isFullScreen = this.judgeFullScreen();
-        if(this.isFullScreen){
-          this.exitFullScreen();
-        }else{
-          this.fullScreen();
-        }
-      },
-      judgeFullScreen:function(){
-        return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
-      },
-      fullScreen:function(){
-        let container = document.querySelector(".overview");
-        let fullScreenFunc=container.requestFullscreen||container.mozRequestFullScreen||container.webkitRequestFullscreen||container.msRequestFullscreen;
-        fullScreenFunc.call(container);
-        this.isFullScreen = true;
-      },
-      exitFullScreen:function(){
-        if(document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if(document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if(document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        }
-        this.isFullScreen = false;
-      },
-      alertMessageDropdownHandler(show) {
-        if (show) {
-          clearTimeout(timeout);
-          this.bottom3DropdownShow = true;
-        } else {
-          timeout = setTimeout(() => {
-            this.bottom3DropdownShow = false;
-          }, 700);
-        }
-      },
-      /*header 时间处理 start*/
-      initDate:function(){
-        this.sysTime=this.getTime(0);
-        this.sysDate=this.getDate(0);
-        this.sysWeek=this.getWeek(0);
-        this.freshTime();
-      },
-      freshTime:function(){
-        let $temp=this;
-        let counter=0;
-        this.freshDateTimer=setInterval(function(){
-          counter ++;
-          $temp.sysTime=$temp.getTime(counter)
-          $temp.sysDate=$temp.getDate(counter);
-          $temp.sysWeek=$temp.getWeek(counter);
-        },1000)
-      },
-      getTime:function(counter){
-        let date=new Date(this.system_server_time);
-        date.setSeconds(date.getSeconds()+counter)
-        let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
-        let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
-        let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
-        return hours+':'+minutes+':'+seconds;
-      },
-      getDate:function(counter){
-        let date=new Date(this.system_server_time);
-        date.setSeconds(date.getSeconds()+counter)
-        let years=date.getFullYear();
-        let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
-        let days=date.getDate()>9?date.getDate():'0'+date.getDate();
-        return years+'-'+months+'-'+days;
-      },
-      getWeek:function(counter){
-        let weeks=[i18n.t('date.week.seven'),i18n.t('date.week.one'),i18n.t('date.week.two'),i18n.t('date.week.three'),i18n.t('date.week.four'),i18n.t('date.week.five'),i18n.t('date.week.six')]
-        let date=new Date(this.system_server_time);
-        date.setSeconds(date.getSeconds()+counter)
-        let day=date.getDay();
-        return weeks[day]
-      },
-      dateFormat:function(fmt, date) {
-        let ret;
-        const opt = {
-          "y+": date.getFullYear().toString(),        // 年
-          "m+": (date.getMonth() + 1).toString(),     // 月
-          "d+": date.getDate().toString(),            // 日
-          "H+": date.getHours().toString(),           // 时
-          "M+": date.getMinutes().toString(),         // 分
-          "S+": date.getSeconds().toString()          // 秒
-          // 有其他格式化字符需求可以继续添加，必须转化成字符串
-        };
-        for (let k in opt) {
-          ret = new RegExp("(" + k + ")").exec(fmt);
-          if (ret) {
-            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
-          };
-        };
-        return fmt;
-      },
-      /*header 时间处理end*/
-      jumpTo(data, id) {
-        if(data=='asset'){
-          bus.$emit("clear-asset-filter"); //清除leftMenu左侧菜单过滤条件
-          // if(this.$store.getters.getIdcArr.length===0){return}//如果不存在idc 则不跳转
-        }
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      zoomMap:function(val){
-        let geo=this.$refs.dataCenterMap.getOption().geo;
-        if(geo&&geo.length>0){
-          let zoom=geo[0].zoom
-          let limit=geo[0].scaleLimit;
-          let value=zoom+val;
-          if(value<=limit.max && value>=limit.min ){
-            this.$refs.dataCenterMap.setOption({geo:{zoom:value}})
-          }
-        }
-      },
-      trendTool(type, param1, param2, param3) {
-        if (type == 'difference') { //两个数组的差集
-          return trendSelectDifference(param1, param2);
-        } else if (type == 'containArray') {
-          return containArray(param1, param2, param3);
-        } else if (type == 'sameLevelActive') {
-          return sameLevelActive(param1, param2, param3);
-        } else if (type == 'sameLevel') {
-          return sameLevel(param1, param2, param3);
-        } else if (type == 'active') {
-          return active(param1, param2, param3);
-        }
-        function trendSelectDifference(short, long) {
-          let difference = [];
-          first: for (let i = 0; i < long.length; i++) {
-            if (i == short.length) {
-              difference.push([long[i], i]);
-              break;
-            }
-            if (short[i].length != long[i].length) {
-              difference.push([long[i], i]);
-              break;
-            }
-            for (let j = 0; j < long[i].length; j++) {
-              if (long[i][j] != short[i][j]) {
-                difference.push([long[i], i]);
-                break first;
-              }
-            }
-          }
-          return difference;
-        }
-        function containArray(item, arr, level) { //return [index, levelIndex];
-          let index = -1, levelIndex = 0;
-          for (let i = 0; i < arr.length; i++) {
-            if (arr[i].length == level) {
-              let flag = 0;
-              for (let j = 0; j < level; j++) {
-                if (arr[i][j] == item[j]) {
-                  flag++;
-                }
-              }
-              if (flag == level) {
-                index = i;
-                break;
-              } else {
-                levelIndex++;
-              }
-            }
-          }
-          return [index, levelIndex];
-        }
-        function sameLevelActive(item, arr, level) { //已选中的同级项的index
-          let indexes = [];
-          for (let i = 0; i < arr.length; i++) {
-            if (arr[i].length == level) {
-              let flag = true;
-              for (let j = 0; j < level-1; j++) {
-                if (arr[i][j] != item[j]) {
-                  flag = false;
-                }
-              }
-              if (flag) {
-                indexes.push(i);
-              }
-            }
-          }
-          return indexes;
-        }
-        function sameLevel(item, arr, level) { //所有3级的同级项data（从原始数据trafficData查）
-          let result = [];
-          for (let i = 0; i < arr.length; i++) {
-            if (arr[i].value == item[0] && arr[i].children) {
-              for (let j = 0; j < arr[i].children.length; j++) {
-                if (arr[i].children[j].value == item[1]) {
-                  let temp = arr[i].children[j].children;
-                  if (temp) {
-                    for (let k = 0; k < temp.length; k++) {
-                      result.push([item[0], item[1], temp[k].value]);
-                    }
-                  }
-                  return result;
-                }
-              }
-            }
-          }
-          return result;
-        }
-        function active(level, index, isActive) {
-          let levels = document.querySelectorAll(".trend-cascader .el-cascader-panel .el-cascader-menu");
-          if (levels.length >= level) {
-            let items = levels[level-1].querySelectorAll("li");
-            if (items.length >= index) {
-              if (isActive) {
-                items[index].classList.add("is-active");
-                items[index].querySelector("label").classList.add("is-checked");
-                items[index].querySelector("label>.el-checkbox__input").classList.add("is-checked");
-              } else {
-                items[index].classList.remove("is-active");
-                items[index].querySelector("label").classList.remove("is-checked");
-                items[index].querySelector("label>.el-checkbox__input").classList.remove("is-checked");
-              }
-            }
-          }
-        }
-      },
+      // return tooltip;
     },
-    watch: {
-      "trendSearchParam.select": function(n, o) {
-        this.queryAlertTrendData();
-      },
+    simpleFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.value}</div>`
     },
-    mounted() {
-      this.initData();
-      this.querySystemState().then(()=>{
-        this.initDate();
-        // this.setFreshDataTimer();
+    assetTypeFormatter (params) {
+      return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`
+    },
+    switchFullScreen: function () {
+      this.isFullScreen = this.judgeFullScreen()
+      if (this.isFullScreen) {
+        this.exitFullScreen()
+      } else {
+        this.fullScreen()
+      }
+    },
+    judgeFullScreen: function () {
+      return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
+    },
+    fullScreen: function () {
+      const container = document.querySelector('.overview')
+      const fullScreenFunc = container.requestFullscreen || container.mozRequestFullScreen || container.webkitRequestFullscreen || container.msRequestFullscreen
+      fullScreenFunc.call(container)
+      this.isFullScreen = true
+    },
+    exitFullScreen: function () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      }
+      this.isFullScreen = false
+    },
+    alertMessageDropdownHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.bottom3DropdownShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.bottom3DropdownShow = false
+        }, 700)
+      }
+    },
+    /* header 时间处理 start */
+    initDate: function () {
+      this.sysTime = this.getTime(0)
+      this.sysDate = this.getDate(0)
+      this.sysWeek = this.getWeek(0)
+      this.freshTime()
+    },
+    freshTime: function () {
+      const $temp = this
+      let counter = 0
+      this.freshDateTimer = setInterval(function () {
+        counter++
+        $temp.sysTime = $temp.getTime(counter)
+        $temp.sysDate = $temp.getDate(counter)
+        $temp.sysWeek = $temp.getWeek(counter)
+      }, 1000)
+    },
+    getTime: function (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const hours = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
+      const minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
+      const seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
+      return hours + ':' + minutes + ':' + seconds
+    },
+    getDate: function (counter) {
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const years = date.getFullYear()
+      const months = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
+      const days = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
+      return years + '-' + months + '-' + days
+    },
+    getWeek: function (counter) {
+      const weeks = [i18n.t('date.week.seven'), i18n.t('date.week.one'), i18n.t('date.week.two'), i18n.t('date.week.three'), i18n.t('date.week.four'), i18n.t('date.week.five'), i18n.t('date.week.six')]
+      const date = new Date(this.system_server_time)
+      date.setSeconds(date.getSeconds() + counter)
+      const day = date.getDay()
+      return weeks[day]
+    },
+    dateFormat: function (fmt, date) {
+      let ret
+      const opt = {
+        'y+': date.getFullYear().toString(), // 年
+        'm+': (date.getMonth() + 1).toString(), // 月
+        'd+': date.getDate().toString(), // 日
+        'H+': date.getHours().toString(), // 时
+        'M+': date.getMinutes().toString(), // 分
+        'S+': date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      }
+      for (const k in opt) {
+        ret = new RegExp('(' + k + ')').exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
+        };
+      };
+      return fmt
+    },
+    /* header 时间处理end */
+    jumpTo (data, id) {
+      if (data == 'asset') {
+        bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
+        // if(this.$store.getters.getIdcArr.length===0){return}//如果不存在idc 则不跳转
+      }
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
       })
-
-      // window.onresize = () => {
-      //   let vm = this;
-      //   setTimeout(() => {
-      //     //vm.map.
-      //   }, 500);
-      // };
     },
-    beforeDestroy(){
-      this.allProject=[];
+    zoomMap: function (val) {
+      const geo = this.$refs.dataCenterMap.getOption().geo
+      if (geo && geo.length > 0) {
+        const zoom = geo[0].zoom
+        const limit = geo[0].scaleLimit
+        const value = zoom + val
+        if (value <= limit.max && value >= limit.min) {
+          this.$refs.dataCenterMap.setOption({ geo: { zoom: value } })
+        }
+      }
     },
-    destroyed() {
-      clearInterval(this.freshDataTimer);
-      clearInterval(this.freshDateTimer);
-      this.allProject=null;
+    trendTool (type, param1, param2, param3) {
+      if (type == 'difference') { // 两个数组的差集
+        return trendSelectDifference(param1, param2)
+      } else if (type == 'containArray') {
+        return containArray(param1, param2, param3)
+      } else if (type == 'sameLevelActive') {
+        return sameLevelActive(param1, param2, param3)
+      } else if (type == 'sameLevel') {
+        return sameLevel(param1, param2, param3)
+      } else if (type == 'active') {
+        return active(param1, param2, param3)
+      }
+      function trendSelectDifference (short, long) {
+        const difference = []
+        // eslint-disable-next-line no-labels
+        first: for (let i = 0; i < long.length; i++) {
+          if (i == short.length) {
+            difference.push([long[i], i])
+            break
+          }
+          if (short[i].length != long[i].length) {
+            difference.push([long[i], i])
+            break
+          }
+          for (let j = 0; j < long[i].length; j++) {
+            if (long[i][j] != short[i][j]) {
+              difference.push([long[i], i])
+              // eslint-disable-next-line no-labels
+              break first
+            }
+          }
+        }
+        return difference
+      }
+      function containArray (item, arr, level) { // return [index, levelIndex];
+        let index = -1; let levelIndex = 0
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].length == level) {
+            let flag = 0
+            for (let j = 0; j < level; j++) {
+              if (arr[i][j] == item[j]) {
+                flag++
+              }
+            }
+            if (flag == level) {
+              index = i
+              break
+            } else {
+              levelIndex++
+            }
+          }
+        }
+        return [index, levelIndex]
+      }
+      function sameLevelActive (item, arr, level) { // 已选中的同级项的index
+        const indexes = []
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].length == level) {
+            let flag = true
+            for (let j = 0; j < level - 1; j++) {
+              if (arr[i][j] != item[j]) {
+                flag = false
+              }
+            }
+            if (flag) {
+              indexes.push(i)
+            }
+          }
+        }
+        return indexes
+      }
+      function sameLevel (item, arr, level) { // 所有3级的同级项data（从原始数据trafficData查）
+        const result = []
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].value == item[0] && arr[i].children) {
+            for (let j = 0; j < arr[i].children.length; j++) {
+              if (arr[i].children[j].value == item[1]) {
+                const temp = arr[i].children[j].children
+                if (temp) {
+                  for (let k = 0; k < temp.length; k++) {
+                    result.push([item[0], item[1], temp[k].value])
+                  }
+                }
+                return result
+              }
+            }
+          }
+        }
+        return result
+      }
+      function active (level, index, isActive) {
+        const levels = document.querySelectorAll('.trend-cascader .el-cascader-panel .el-cascader-menu')
+        if (levels.length >= level) {
+          const items = levels[level - 1].querySelectorAll('li')
+          if (items.length >= index) {
+            if (isActive) {
+              items[index].classList.add('is-active')
+              items[index].querySelector('label').classList.add('is-checked')
+              items[index].querySelector('label>.el-checkbox__input').classList.add('is-checked')
+            } else {
+              items[index].classList.remove('is-active')
+              items[index].querySelector('label').classList.remove('is-checked')
+              items[index].querySelector('label>.el-checkbox__input').classList.remove('is-checked')
+            }
+          }
+        }
+      }
     }
+  },
+  watch: {
+    'trendSearchParam.select': function (n, o) {
+      this.queryAlertTrendData()
+    }
+  },
+  mounted () {
+    this.initData()
+    this.querySystemState().then(() => {
+      this.initDate()
+      // this.setFreshDataTimer();
+    })
+
+    // window.onresize = () => {
+    //   let vm = this;
+    //   setTimeout(() => {
+    //     //vm.map.
+    //   }, 500);
+    // };
+  },
+  beforeDestroy () {
+    this.allProject = []
+  },
+  destroyed () {
+    clearInterval(this.freshDataTimer)
+    clearInterval(this.freshDateTimer)
+    this.allProject = null
   }
+}
 </script>
 
 <style lang="scss">
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index f173fd446..70f1cfb66 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -116,474 +116,468 @@
 </template>
 
 <script>
-  import ChartBox from "./chartBox";
-  import ChartList from '../../charts/chart-list';
-  import bus from '../../../libs/bus';
-  import timePicker from '../../common/timePicker'
-  import draggable from 'vuedraggable'
-  import pickTime from "../../common/pickTime";
-  import exportXLSX from "../../common/exportXLSX";
-  import selectPanel from "../../common/popBox/selectPanel";
+import ChartBox from './chartBox'
+import ChartList from '../../charts/chart-list'
+import bus from '../../../libs/bus'
+import pickTime from '../../common/pickTime'
+import exportXLSX from '../../common/exportXLSX'
+import selectPanel from '../../common/popBox/selectPanel'
 
-  export default {
-    name: "panel",
-    data() {
-      return {
-        panelLock:true,
-        showTopBtn: false, //top按钮
-        visible: false,
-        rightBox: { //面板弹出框相关
-          chart: {show: false},
-          panel: {show: false},
+export default {
+  name: 'panel',
+  data () {
+    return {
+      panelLock: true,
+      showTopBtn: false, // top按钮
+      visible: false,
+      rightBox: { // 面板弹出框相关
+        chart: { show: false },
+        panel: { show: false }
+      },
+      tableHover: false,
+      searchTime: bus.getTimezontDateRange(),
+      intervalTimer: null,
+      interval: 0,
+      showPanel: { // panel下拉列表
+        id: '',
+        name: ''
+      },
+      panel: { // 新增panel
+        id: '',
+        name: ''
+      },
+      chart: {},
+      blankChart: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
         },
-        tableHover: false,
-        searchTime: bus.getTimezontDateRange(),
-        intervalTimer: null,
-        interval: 0,
-        showPanel: { //panel下拉列表
-          id: '',
-          name: ''
-        },
-        panel: { //新增panel
-          id: '',
-          name: ''
-        },
-        chart: {},
-        blankChart: {
-          id:'',
-          title: '',
-          type:'line',
-          span:12,
-          height:'400',
-          unit:2,
-          param:{
-            url:'',
-            threshold:'',
-          },
-          elements:[{expression: "", legend: "", type: "expert", id: ""}],
-          panel: '',
-          sync: 0
-        },
-        pageObj: {
-          pageNo: 1,
-          pageSize: -1, //此处获取所有数据，所以设置一个较大的值
-          total: 0
-        },
-        chartsData: [], //中间部分图表相关数据
-        panelData: [],
-        panelDataDragTmp:[],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-            /*
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
+        total: 0
+      },
+      chartsData: [], // 中间部分图表相关数据
+      panelData: [],
+      panelDataDragTmp: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          /*
                         {
                         id: 1,
                         name: this.$t("dashboard.panel.searchItem.name"),
                         type: 'input',
                         label: 'name',
                         disabled: false
-                      }*/
-          ],
-        },
-        searchLabel: {}, //搜索参数
-        //---图表相关参数--start
-        dataList: [], // 数据列表
-        filter: { // 过滤条件
-          panelId: 0,
-          start_time: '',
-          end_time: '',
-          searchName: '',
-        },
+                      } */
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      // ---图表相关参数--start
+      dataList: [], // 数据列表
+      filter: { // 过滤条件
         panelId: 0,
-        filterPanel:'',
-        //---图表相关参数--end
-        scrollbarWrap: null,
+        start_time: '',
+        end_time: '',
+        searchName: ''
+      },
+      panelId: 0,
+      filterPanel: '',
+      // ---图表相关参数--end
+      scrollbarWrap: null
+    }
+  },
+  components: {
+    'chart-box': ChartBox,
+    'chart-list': ChartList,
+    'pick-time': pickTime,
+    'export-excel': exportXLSX,
+    selectPanel
+  },
+  methods: {
+    // 刷新
+    Refresh () {
+      const curTime = this.$refs.calendarPanel.getCurrentTime()
+      this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.getTableData()
+    },
+    // 面板相关操作
+    panelChange (val) {
+      if (!val) {
+        return false
+      }
+      this.filter.searchName = ''
+      // this.$refs.searchInput.select();
+      this.showPanel = val
+      this.filter.panelId = this.showPanel.id
+      // let curTime = this.$refs.calendarPanel.getCurrentTime();
+      const curTime = this.searchTime
+      this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
+      // this.$refs.chartList.initCurrentRecordNum();
+      this.$refs.chartList.cleanData()
+      this.getData(this.filter)
+    },
+
+    del (u) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel?ids=' + u.id).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 1000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.getTableData(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    edit (u) {
+      this.panel = Object.assign({}, u)
+      this.$refs.panelBox.setTitle(this.$t('dashboard.panel.editPanelTitle'))
+      this.$refs.panelBox.show(true)
+    },
+    toAdd () {
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$refs.panelBox.show(true)
+      this.panel = {
+        id: '',
+        name: ''
+      }
+      this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
+    },
+    panelReload (clearShowPanel) {
+      this.getTableData(clearShowPanel)
+    },
+    refreshTime (st, et) {
+      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+    },
+    panelReloadForDel: function () {
+      if (this.showPanel.id === this.panel.id) {
+        this.showPanel.id = ''
+      }
+      this.getTableData()
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.rightBox.chart.show = true
+    },
+    newChart () {
+      return JSON.parse(JSON.stringify(this.blankChart))
+    },
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.rightBox.chart.show = true
+    },
+    closeChartBox (refresh) {
+      this.rightBox.chart.show = false
+      /* if (refresh) {
+
+      } */
+    },
+    closePanelBox (refresh) {
+      this.rightBox.panel.show = false
+      /* if (refresh) {
+
+      } */
+    },
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel/' + data.panelId + '/charts?ids=' + data.id).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.rightBox.chart.show = false
+            const chartList = this.$refs.chartList.dataList
+            for (let i = 0; i < chartList.length; i++) {
+              if (chartList[i].id === data.id) {
+                chartList.splice(i, 1)
+              }
+              // if(data.next != -1){
+              //   if(chartList[i].id === data.next){
+              //     nextChart = chartList[i]
+              //   }
+              // }
+              // if(data.prev != 0){
+              //   if(chartList[i].id === data.prev){
+              //     prevChart = chartList[i]
+              //   }
+              // }
+            }
+            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
+            // if(nextChart&&prevChart){ //删除图表为中间位置
+            //   prevChart.next = nextChart.id;
+            //   nextChart.prev = prevChart.id;
+            // }else{
+            //   if(!nextChart) prevChart.next = -1;
+            //   if(!prevChart) nextChart.prev = 0;
+            // }
+            // this.getTableData(); //删除相关图表后，刷新面板数据
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    delChartOk () {
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params, panel) {
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    // 获取数据,用在子页面
+    getData (params) {
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      if (params.start_time === '' || params.end_time === '') {
+        const now = bus.getTimezontDateRange()
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        params.start_time = startTimeTmp
+        params.end_time = endTimeTmp
+      }
+      if (this.$refs.chartList) {
+        this.$refs.chartList.initData(params)
+      }
+      // this.panelReloadOnlyPanel();
+    },
+
+    /* 图表相关操作--end */
+    /* 时间条件查询--start */
+    // 选择日期变化
+    dateChange (val) {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.panelId = this.showPanel.id
+      this.getTableData()
+      this.getData(this.filter)
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    /* 时间条件查询--end */
+    // 公用操作
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    panelReloadOnlyPanel () { // 仅刷新panel数据
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$get('panel').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].id == this.showPanel.id) {
+              this.showPanel.name = this.panelData[i].name
+              break
+            }
+          }
+        }
+      })
+    },
+
+    getTableData (clearShowPanel) {
+      const vm = this
+
+      this.$get('panel?type=dashboard').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          let isInitData = false
+          if (response.data.list.length > 0) {
+            if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
+              this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel))
+            }
+            if (clearShowPanel) {
+              this.showPanel.id = ''
+            }
+            if (!this.showPanel.id) {
+              this.showPanel = response.data.list[0]
+              this.filter.panelId = this.showPanel.id
+              this.getData(this.filter)
+              isInitData = true
+            } else {
+              handler(response.data.list)
+              this.filter.panelId = this.showPanel.id
+            }
+            this.$nextTick(() => {
+              this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
+            })
+          } else {
+            this.showPanel.id = ''
+            this.filter.panelId = ''
+          }
+          this.pageObj.total = response.data.total
+          if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
+            this.getData(this.filter)
+          }
+          this.$store.state.showPanel.id = 0
+          this.$store.state.showPanel.name = ''
+          this.$store.state.showPanel.type = 'dashboard'
+        } else {
+          if (response.msg) {
+            this.$message.error(response.msg)
+          } else if (response.error) {
+            this.$message.error(response.error)
+          } else {
+            this.$message.error(response)
+          }
+        }
+      }).catch((error) => {
+        // console.log('error................'+JSON.stringify(error));
+        if (error) {
+          console.error(error)
+          this.$message.error(error.toString())
+        }
+      })
+
+      function handler (panelData) {
+        panelData.forEach(panel => {
+          if (panel.id == vm.showPanel.id) {
+            vm.showPanel = panel
+          } else {
+            if (panel.children && panel.children.length > 0) {
+              handler(panel.children)
+            }
+          }
+        })
       }
     },
-    components: {
-      'chart-box': ChartBox,
-      'chart-list': ChartList,
-      'time-picker':timePicker,
-      draggable,
-      'pick-time':pickTime,
-      'export-excel':exportXLSX,
-      selectPanel,
+    // 定期刷新
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      if (val) {
+        this.interval = val
+        const start = new Date(this.searchTime[1])
+        const now = new Date()
+        const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
+          this.getIntervalData(interval)
+        }
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval)
+        }, val * 1000)
+      }
     },
-    methods: {
-      //刷新
-      Refresh() {
-        let curTime = this.$refs.calendarPanel.getCurrentTime();
-        this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss');
-        this.getTableData();
-      },
-      //面板相关操作
-      panelChange(val) {
-        if (!val) {
-          return false;
-        }
-        this.filter.searchName='';
-        //this.$refs.searchInput.select();
-        this.showPanel = val;
-        this.filter.panelId = this.showPanel.id;
-        // let curTime = this.$refs.calendarPanel.getCurrentTime();
-        let curTime=this.searchTime;
-        this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss');
-        //this.$refs.chartList.initCurrentRecordNum();
-        this.$refs.chartList.cleanData();
-        this.getData(this.filter);
-      },
-
-      del(u) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("panel?ids=" + u.id).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 1000,
-                type: 'success',
-                message: this.$t("tip.deleteSuccess")
-              });
-              this.getTableData(true);
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      edit(u) {
-        this.panel = Object.assign({}, u);
-        this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
-        this.$refs.panelBox.show(true);
-      },
-      toAdd() {
-        if (!this.hasButton('panel_view')) {
-          return;
-        }
-        this.$refs.panelBox.show(true);
-        this.panel = {
-          id: '',
-          name: ''
-        };
-        this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
-      },
-      panelReload(clearShowPanel) {
-        this.getTableData(clearShowPanel);
-      },
-      refreshTime(st, et) {
-        const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
-        const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
-        this.searchTime = [startTime, endTime];
-      },
-      panelReloadForDel: function () {
-        if (this.showPanel.id === this.panel.id) {
-          this.showPanel.id = '';
-        }
-        this.getTableData();
-      },
-      /*图表相关操作--start*/
-      addChart() {
-        this.chart = this.newChart();
-        this.rightBox.chart.show = true;
-      },
-      newChart() {
-        return JSON.parse(JSON.stringify(this.blankChart));
-      },
-      // 编辑图表信息,打开编辑弹窗
-      editChart(data) {
-        if (!data.param) {
-          data.param = {url: '', threshold: '',};
-        }
-        this.chart = JSON.parse(JSON.stringify(data));
-        this.rightBox.chart.show = true;
-      },
-      closeChartBox(refresh) {
-        this.rightBox.chart.show = false;
-        if (refresh) {
-
-        }
-      },
-      closePanelBox(refresh) {
-        this.rightBox.panel.show = false;
-        if (refresh) {
-
-        }
-      },
-      // 移除图表:弹出确认框询问
-      delChart(data,from) {
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
-            if (response.code === 200) {
-              this.$message({
-                duration: 2000,
-                type: 'success',
-                message: this.$t("tip.deleteSuccess")
-              });
-              this.rightBox.chart.show = false;
-              let chartList=this.$refs.chartList.dataList;
-              let nextChart=null,prevChart=null
-              for (let i =0;i< chartList.length;i++){
-                if(chartList[i].id === data.id){
-                  chartList.splice(i,1);
-                }
-                // if(data.next != -1){
-                //   if(chartList[i].id === data.next){
-                //     nextChart = chartList[i]
-                //   }
-                // }
-                // if(data.prev != 0){
-                //   if(chartList[i].id === data.prev){
-                //     prevChart = chartList[i]
-                //   }
-                // }
-              }
-              this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop);
-              // if(nextChart&&prevChart){ //删除图表为中间位置
-              //   prevChart.next = nextChart.id;
-              //   nextChart.prev = prevChart.id;
-              // }else{
-              //   if(!nextChart) prevChart.next = -1;
-              //   if(!prevChart) nextChart.prev = 0;
-              // }
-              // this.getTableData(); //删除相关图表后，刷新面板数据
-            } else {
-              this.$message.error(response.msg);
-            }
-          })
-        });
-      },
-      delChartOk() {
-        this.filter.panelId = this.showPanel.id;
-        this.getData(this.filter);
-      },
-      // 图表创建成功，回调panel页面，进行图表的刷新
-      createSuccess(msg, data, params, panel) {
-        this.filter.panelId = this.showPanel.id;
-        this.getData(this.filter);
-      },
-      // 获取数据,用在子页面
-      getData(params) {
-        if (!this.hasButton('panel_view')) {
-          return;
-        }
-        if (params.start_time === '' || params.end_time === '') {
-          let now = bus.getTimezontDateRange();
-          let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          params.start_time = startTimeTmp;
-          params.end_time = endTimeTmp;
-        }
-        if(this.$refs.chartList){
-          this.$refs.chartList.initData(params);
-        }
-        //this.panelReloadOnlyPanel();
-      },
-
-      /*图表相关操作--end*/
-      /*时间条件查询--start*/
-      // 选择日期变化
-      dateChange(val) {
-        let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
-        this.setSearchTime(nowTimeType.type,nowTimeType.value);
-        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
-        this.filter.panelId = this.showPanel.id;
-        this.getTableData();
-        this.getData(this.filter);
-      },
-      setSearchTime(type,val){//设置searchTime
-        if(type==='minute'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "m");
-        }else if(type==='hour'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "h");
-        }else if(type==='date'){
-          let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
-          this.$set(this.searchTime, 0, startTime);
-          this.$set(this.searchTime, 1, endTime);
-          this.$set(this.searchTime, 2, val + "d");
-        }
-        this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
-      },
-      /*时间条件查询--end*/
-      //公用操作
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
-      panelReloadOnlyPanel() { //仅刷新panel数据
-        if (!this.hasButton('panel_view')) {
-          return;
-        }
-        this.$get('panel').then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list;
-            for (let i = 0; i < this.panelData.length; i++) {
-              if (this.panelData[i].id == this.showPanel.id) {
-                this.showPanel.name = this.panelData[i].name;
-                break;
-              }
-            }
-          }
-        });
-      },
-
-      getTableData(clearShowPanel) {
-        let vm = this;
-
-        this.$get('panel?type=dashboard').then(response => {
-          if (response.code === 200) {
-            this.panelData = response.data.list;
-            let isInitData = false;
-            if (response.data.list.length > 0) {
-              if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
-                this.showPanel = JSON.parse(JSON.stringify(this.$store.state.showPanel));
-              }
-              if (clearShowPanel) {
-                this.showPanel.id = '';
-              }
-              if (!this.showPanel.id) {
-                this.showPanel = response.data.list[0];
-                this.filter.panelId = this.showPanel.id;
-                this.getData(this.filter);
-                isInitData = true;
-              }else{
-                handler(response.data.list);
-                this.filter.panelId = this.showPanel.id;
-              }
-              this.$nextTick(() => {
-                this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel);
-              });
-            } else {
-              this.showPanel.id = '';
-              this.filter.panelId = '';
-            }
-            this.pageObj.total = response.data.total;
-            if (!isInitData &&(this.panel.id === '' || this.panel.id === this.showPanel.id)) {
-              this.getData(this.filter);
-            }
-            this.$store.state.showPanel.id = 0;
-            this.$store.state.showPanel.name = '';
-            this.$store.state.showPanel.type = 'dashboard';
-          }else {
-            if(response.msg){
-              this.$message.error(response.msg);
-            }else if(response.error){
-              this.$message.error(response.error);
-            }else {
-              this.$message.error(response);
-            }
-          }
-        }).catch((error) => {
-          //console.log('error................'+JSON.stringify(error));
-          if (error) {
-            console.error(error);
-            this.$message.error(error.toString());
-          }
-        });
-
-        function handler(panelData) {
-          panelData.forEach(panel => {
-            if (panel.id == vm.showPanel.id) {
-              vm.showPanel = panel;
-            } else {
-              if (panel.children && panel.children.length > 0) {
-                handler(panel.children)
-              }
-            }
-          });
-        }
-      },
-      //定期刷新
-      selectInterval(val) {
-
-        this.visible = false;
-        clearInterval(this.intervalTimer);
-        if (val) {
-          this.interval = val;
-          const start = new Date(this.searchTime[1]);
-          const now = new Date();
-          const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
-          if (interval >= 60) { //如果结束时间到现在超过1分钟，则
-            this.getIntervalData(interval);
-          }
-          this.intervalTimer = setInterval(() => {
-            this.getIntervalData(this.interval);
-          }, val * 1000);
-        }
-      },
-      getIntervalData(interval) { //interval:结束时间到现在的秒数
-        const start = new Date(this.searchTime[0]);
-        const end = new Date(this.searchTime[1]);
-        start.setSeconds(start.getSeconds() + interval);
-        end.setSeconds(end.getSeconds() + interval);
-        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
-        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
-        this.searchTime = [startTime, endTime];
-        //刷新数据
-        this.dateChange();
-      },
-      pageNo(val) {
-        this.pageObj.pageNo = val;
-        this.getTableData();
-      },
-      pageSize(val) {
-        this.pageObj.pageSize = val;
-        this.getTableData();
-      },
-      search:function(){
-        if(this.$refs.chartList){
-          this.$refs.chartList.searchCharts(this.filter.searchName);
-        }
-      },
-      // 滚动事件触发下拉加载
-      onScroll() {
-        let _self = this;
-        this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
-          _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
-          _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
-        }, 300));
-      },
-      focusInput() {
-        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-        classVal=classVal.replace('query-input-inactive','query-input-active');
-        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-        this.$refs.queryPanel.focus();
-      },
-      blurInput() {
-        if(!this.filter.searchName || this.filter.searchName == ''){
-          setTimeout(function(){
-            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
-            classVal=classVal.replace('query-input-active','query-input-inactive');
-            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-          },100)
-        }
-      },
-      clearInput() {
-        this.$refs.queryPanel.focus();
-      },
-      /*start (event) {
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
+      const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+      // 刷新数据
+      this.dateChange()
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData()
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getTableData()
+    },
+    search: function () {
+      if (this.$refs.chartList) {
+        this.$refs.chartList.searchCharts(this.filter.searchName)
+      }
+    },
+    // 滚动事件触发下拉加载
+    onScroll () {
+      const _self = this
+      this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
+        _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+      }, 300))
+    },
+    focusInput () {
+      let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+      this.$refs.queryPanel.focus()
+    },
+    blurInput () {
+      if (!this.filter.searchName || this.filter.searchName == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput () {
+      this.$refs.queryPanel.focus()
+    },
+    /* start (event) {
         // console.log('start', event, this.panelData);
 
         event.item.querySelector('.panelContent').style.background = '#d8dce1';
@@ -725,8 +719,8 @@
         let panelContent = dragClass.querySelector('.panelContent');
         panelContent.style.background = '#d8dce1';
 
-      },*/
-      /*filterPanelFocus:function(e){
+      }, */
+    /* filterPanelFocus:function(e){
         e.stopPropagation();
       },
       filterPanelFunc:function(){
@@ -736,42 +730,42 @@
         }else{
           this.showPanelList = this.panelData;
         }
-      },*/
-      tableListEnter(){
-        this.tableHover = true;
-      },
-      tableListLeave(){
-        this.tableHover = false;
-      },
-
+      }, */
+    tableListEnter () {
+      this.tableHover = true
     },
-    created() {
-      this.getTableData();
-    },
-    mounted() {
-      this.scrollbarWrap = this.$refs.dashboardScrollbar;
-      this.onScroll();
-      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
-      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
-    },
-    watch: {
-      'filter.searchName': function(n,o){
-        let temp=this;
-        setTimeout(function(){
-          temp.search();
-        },1000)
-      },
-    },
-    beforeDestroy(){
-      if(document.querySelector("#tableList")){
-        document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
-        document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
-      }
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
+    tableListLeave () {
+      this.tableHover = false
     }
+
+  },
+  created () {
+    this.getTableData()
+  },
+  mounted () {
+    this.scrollbarWrap = this.$refs.dashboardScrollbar
+    this.onScroll()
+    document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+  },
+  watch: {
+    'filter.searchName': function (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.search()
+      }, 1000)
+    }
+  },
+  beforeDestroy () {
+    if (document.querySelector('#tableList')) {
+      document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
+      document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
+    }
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
   }
+}
 </script>
 <style scoped lang="scss">
   .panel {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 2784c2790..90912d09f 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -99,25 +99,25 @@
             :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item">
-              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">
+              <span v-if="item.prop === 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">
                 {{scope.row[item.prop].sn}} :
                 ({{scope.row[item.prop].host}})
               </span>
-              <span v-else-if="item.prop == 'param'">
+              <span v-else-if="item.prop === 'param'">
               <template v-if="scope.row.paramObj">
-                <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span
+                <span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span
                   v-if="i < scope.row.paramObj.length-1">，</span></span>
               </template>
               <template v-else>-</template>
             </span>
-              <span v-else-if="item.prop == 'labels'">
+              <span v-else-if="item.prop === 'labels'">
                 <template v-if="scope.row.labelModule">
-                  <span v-for="(p,i) in scope.row.labelModule">{{p.key}}={{p.value}}<span
+                  <span v-for="(p, i) in scope.row.labelModule" :key="i">{{p.key}}={{p.value}}<span
                     v-if="i < scope.row.labelModule.length-1">，</span></span>
                 </template>
                 <template v-else>-</template>
               </span>
-              <template v-else-if="item.prop=='alerts'">
+              <template v-else-if="item.prop === 'alerts'">
                 <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light"
                             :disabled=" scope.row.alertNum < 99">
                   <span :id="'endpoint-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
@@ -127,8 +127,8 @@
                   </span>
                 </el-tooltip>
               </template>
-              <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
-              <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <template v-else-if="item.prop === 'type'">{{currentModule.type}}</template>
+              <div v-else-if="item.prop === 'option'" class="content-right-options">
                 <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option"
                       :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
                 &nbsp;
@@ -141,7 +141,7 @@
                 <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_delete'"
                       :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
               </div>
-              <span v-else-if="item.prop == 'state'">
+              <span v-else-if="item.prop === 'state'">
               <el-popover placement="right" width="50" trigger="hover"
                           :popper-class="scope.row.state == '1'?'small-pop':''">
                 <div slot="reference" style="width: 20px">
@@ -159,14 +159,12 @@
             </template>
           </el-table-column>
           <el-table-column width="28" :resizable="true">
-            <template slot="header" slot-scope="scope">
+            <template slot="header">
             <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
                   class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
             </template>
-            <template v-slot="scope">
-            </template>
           </el-table-column>
         </el-table>
         <button class="to-top" :style="{top: tools.toTopBtnTop}" id="endpoint-list-totop"
@@ -214,670 +212,664 @@
 </template>
 
 <script>
-  import exportXLSX from "../../common/exportXLSX";
-  import loading from "../../common/loading";
-  import panelTab from '../../common/bottomBox/tabs/panelTab'
-  import bus from '../../../libs/bus'
-  import topologyL5 from '@/components/common/project/topologyL5'
-  import deleteButton from "../../common/deleteButton";
+import exportXLSX from '../../common/exportXLSX'
+import bus from '../../../libs/bus'
+import topologyL5 from '@/components/common/project/topologyL5'
+import deleteButton from '../../common/deleteButton'
 
-  export default {
-    name:"project2",
-    components:{
-      'export-excel':exportXLSX,
-      'loading':loading,
-      'panel-tab':panelTab,
-      topologyL5,
-      'delete-button':deleteButton,
-    },
-    computed:{
-      currentProjectChange() {
-        return this.$store.state.currentProject;
-      }
-    },
-    data(){
-      return {
-        rightBox:{
-          module:{show:false},
-          addEndpoint:{show:false},
-          editEndpoint:{show:false},
-        },
-        /*二级页面相关*/
-        bottomBox:{
-          endpoint:{}, //asset详情
-          endpointDetail:null,
-          mainResizeShow:true, //dom高度改变时部分内容是否展示
-          subResizeShow:true,
-          isFullScreen:false, //是否是全屏，用来控制拖动条是否展示,
-          showSubList:false,
-          targetTab:'',
-        },
-
-        mainTableHeight:this.$tableHeight.normal, //主列表table高度
-        ready:false,
-
-        /*工具参数*/
-        tools:{
-          loading:false, //是否显示table加载动画
-          toTopBtnTop:this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-          tableHover:false, //控制滚动条和top按钮同时出现
-          showTopBtn:false, //显示To top按钮
-          showCustomTableTitle:false, //自定义列弹框是否显示
-          customTableTitle:[], //自定义列工具的数据
-        },
-        batchDeleteObjs:[],
-
-        tableId:'projectTable', //需要分页的table的id，用于记录每页数量
-        userData:[],
-
-        endpoint:{
-          id:'',
-          host:'',
-          port:'',
-          param:'',
-          path:'',
-          asset:{},
-          project:{},
-          module:{},
-          moduleId:'',
-          assetId:'',
-          paramObj:[]
-        },
-        tableTitle:[
-          {
-            label:this.$t("project.endpoint.endpointId"),
-            prop:'id',
-            show:true,
-            width:150
-          },{
-            label:this.$t("project.endpoint.asset"),
-            prop:'asset',
-            show:true,
-            minWidth:400,
-          },{
-            label:this.$t("project.endpoint.host"),
-            prop:'host',
-            show:true,
-            width:200,
-          },{
-            label:this.$t("project.endpoint.port"),
-            prop:'port',
-            show:true,
-            width:100,
-          },{
-            label:this.$t("overall.type"),
-            prop:'type',
-            show:false,
-            width:200,
-          },{
-            label:this.$t("project.endpoint.labels"),
-            prop:'labels',
-            show:true,
-            width:200,
-          },{
-            label:this.$t("project.endpoint.param"),
-            prop:'param',
-            show:true,
-            width:200,
-          },{
-            label:this.$t("project.endpoint.path"),
-            prop:'path',
-            show:true,
-            width:200,
-          },{
-            label:this.$t("alert.list.state"),
-            prop:'state',
-            show:true,
-            width:80,
-          },{
-            label:this.$t("project.endpoint.alerts"),
-            prop:'alerts',
-            show:true,
-            width:150,
-          },
-          // {
-          //   label: this.$t("project.endpoint.lastUpdate"),
-          //   prop: 'lastUpdate',
-          //   show: true,
-          // },
-          {
-            label:this.$t('config.account.option'),
-            prop:'option',
-            show:true,
-            width:120
-          }
-        ],
-        endpointTableData:[],
-        endpointPageObj:{
-          pageNo: 1,
-          pageSize: this.$CONSTANTS.defaultPageSize,
-          total: 0
-        },
-
-        currentProjectTitle:'',
-        moduleList:[],
-        projectList:[],
-        pageType:'project', //project endpoint
-        currentProject:{id:'',name:'',remark:''}, //endpoint弹框、module列表用来回显project
-        module:{}, //编辑的module
-        blankModule:{id:'',type:'',name:'',project:{},port:'',path:'',param:'',paramObj:[],snmpParam:''}, //空白module
-        currentModule:{id:'',type:'',name:'',project:{},port:'',path:'',param:'',paramObj:[],snmpParam:''}, //用来回显的module
-        endpointSearchLabel:{moduleId:''}, //endpoint搜索参数
-        endpointSearchMsg:{ //给搜索框子组件传递的信息
-          zheze_none:true,
-          searchLabelList:[{
-            id:1,
-            name:"ID",
-            type:'input',
-            label:'id',
-            disabled:false
-          },{
-            id:11,
-            name:this.$t('asset.asset'),
-            // name: this.$t('asset.asset'),
-            type:'query',
-            label:'query',
-            disabled:false
-          },{
-            id:33,
-            name:this.$t('asset.state'),
-            // name: this.$t('asset.asset'),
-            type:'select',
-            label:'endpointState',
-            disabled:false,
-            readonly:true,
-          }],
-        },
-        scrollbarWrap: null,
-        delFlag:false,
-        topologyIndexF:0,
-      }
-    },
-    methods:{
-      // 全屏
-      fullScreen(){
-        let vm=this;
-        this.$bottomBoxWindow.fullScreen(vm);
+export default {
+  name: 'project2',
+  components: {
+    topologyL5,
+    'export-excel': exportXLSX,
+    'delete-button': deleteButton
+  },
+  data () {
+    return {
+      rightBox: {
+        module: { show: false },
+        addEndpoint: { show: false },
+        editEndpoint: { show: false }
       },
-      // 退出全屏
-      exitFullScreen(){
-        let vm=this;
-        this.$bottomBoxWindow.exitFullScreen(vm);
+      /* 二级页面相关 */
+      bottomBox: {
+        endpoint: {}, // asset详情
+        endpointDetail: null,
+        mainResizeShow: true, // dom高度改变时部分内容是否展示
+        subResizeShow: true,
+        isFullScreen: false, // 是否是全屏，用来控制拖动条是否展示,
+        showSubList: false,
+        targetTab: ''
       },
-      // 鼠标拖动二级列表
-      listResize(e){
-        let vm=this;
-        this.$bottomBoxWindow.listResize(vm,e);
+
+      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
+      ready: false,
+
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showTopBtn: false, // 显示To top按钮
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
       },
-      getEndpointTableData(){
-        if(this.currentModule&&this.currentModule.id){
-          this.pageType='endpoint';
-          this.endpointSearchLabel.moduleId=this.currentModule.id;
-          this.$set(this.endpointSearchLabel,'pageNo',this.endpointPageObj.pageNo);
-          this.$set(this.endpointSearchLabel,'pageSize',this.endpointPageObj.pageSize);
-          this.tools.loading=true;
-          this.$get('endpoint',this.endpointSearchLabel).then(response=>{
-            this.tools.loading=false;
-            if(response.code===200){
-              for(let i=0; i<response.data.list.length; i++){
-                try{
-                  let param=response.data.list[i].param ||  '{}'
-                  let tempObj=JSON.parse(param);
-                  let labels=response.data.list[i].labels|| '{}';
-                  let tempObj1=JSON.parse(labels);
-                  response.data.list[i].paramObj=[];
-                  response.data.list[i].labelModule=[];
-                  for(let k in tempObj){
-                    response.data.list[i].paramObj.push({key:k,value:tempObj[k]})
-                  }
-                  for(let k in tempObj1){
-                    response.data.list[i].labelModule.push({key:k,value:tempObj1[k]})
-                  }
-                }catch(err){
-                  // console.error(response.data.list[i], err);
+      batchDeleteObjs: [],
+
+      tableId: 'projectTable', // 需要分页的table的id，用于记录每页数量
+      userData: [],
+
+      endpoint: {
+        id: '',
+        host: '',
+        port: '',
+        param: '',
+        path: '',
+        asset: {},
+        project: {},
+        module: {},
+        moduleId: '',
+        assetId: '',
+        paramObj: []
+      },
+      tableTitle: [
+        {
+          label: this.$t('project.endpoint.endpointId'),
+          prop: 'id',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.asset'),
+          prop: 'asset',
+          show: true,
+          minWidth: 400
+        }, {
+          label: this.$t('project.endpoint.host'),
+          prop: 'host',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.port'),
+          prop: 'port',
+          show: true,
+          width: 100
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: false,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.labels'),
+          prop: 'labels',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.param'),
+          prop: 'param',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('project.endpoint.path'),
+          prop: 'path',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('alert.list.state'),
+          prop: 'state',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('project.endpoint.alerts'),
+          prop: 'alerts',
+          show: true,
+          width: 150
+        },
+        // {
+        //   label: this.$t("project.endpoint.lastUpdate"),
+        //   prop: 'lastUpdate',
+        //   show: true,
+        // },
+        {
+          label: this.$t('config.account.option'),
+          prop: 'option',
+          show: true,
+          width: 120
+        }
+      ],
+      endpointTableData: [],
+      endpointPageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+
+      currentProjectTitle: '',
+      moduleList: [],
+      projectList: [],
+      pageType: 'project', // project endpoint
+      currentProject: { id: '', name: '', remark: '' }, // endpoint弹框、module列表用来回显project
+      module: {}, // 编辑的module
+      blankModule: { id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: '' }, // 空白module
+      currentModule: { id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: '' }, // 用来回显的module
+      endpointSearchLabel: { moduleId: '' }, // endpoint搜索参数
+      endpointSearchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          // name: this.$t('asset.asset'),
+          type: 'query',
+          label: 'query',
+          disabled: false
+        }, {
+          id: 33,
+          name: this.$t('asset.state'),
+          // name: this.$t('asset.asset'),
+          type: 'select',
+          label: 'endpointState',
+          disabled: false,
+          readonly: true
+        }]
+      },
+      scrollbarWrap: null,
+      delFlag: false,
+      topologyIndexF: 0
+    }
+  },
+  methods: {
+    // 全屏
+    fullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.fullScreen(vm)
+    },
+    // 退出全屏
+    exitFullScreen () {
+      const vm = this
+      this.$bottomBoxWindow.exitFullScreen(vm)
+    },
+    // 鼠标拖动二级列表
+    listResize (e) {
+      const vm = this
+      this.$bottomBoxWindow.listResize(vm, e)
+    },
+    getEndpointTableData () {
+      if (this.currentModule && this.currentModule.id) {
+        this.pageType = 'endpoint'
+        this.endpointSearchLabel.moduleId = this.currentModule.id
+        this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo)
+        this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize)
+        this.tools.loading = true
+        this.$get('endpoint', this.endpointSearchLabel).then(response => {
+          this.tools.loading = false
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              try {
+                const param = response.data.list[i].param || '{}'
+                const tempObj = JSON.parse(param)
+                const labels = response.data.list[i].labels || '{}'
+                const tempObj1 = JSON.parse(labels)
+                response.data.list[i].paramObj = []
+                response.data.list[i].labelModule = []
+                for (const k in tempObj) {
+                  response.data.list[i].paramObj.push({ key: k, value: tempObj[k] })
                 }
-              }
-              this.endpointTableData=response.data.list;
-              this.endpointPageObj.total=response.data.total;
-              if (!this.scrollbarWrap) {
-                this.$nextTick(() => {
-                  this.scrollbarWrap = this.$refs.endpointTable.bodyWrapper;
-                  this.toTopBtnHandler(this.scrollbarWrap);
-                });
+                for (const k in tempObj1) {
+                  response.data.list[i].labelModule.push({ key: k, value: tempObj1[k] })
+                }
+              } catch (err) {
+                // console.error(response.data.list[i], err);
               }
             }
-          });
-        }
-      },
-      afterCloseImport:function(){
-        this.getEndpointTableData();
-        bus.$emit('module-list-change')
-      },
-      endpointPageNo(val){
-        this.endpointPageObj.pageNo=val;
-        this.getEndpointTableData();
-      },
-      endpointPageSize(val){
-        this.endpointPageObj.pageSize=val;
-        localStorage.setItem('nz-pageSize-'+localStorage.getItem('nz-username')+'-'+this.tableId,val);
-        this.getEndpointTableData();
-      },
-
-      getProjectList(){
-        this.$get('project',{pageSize:-1}).then(response=>{
-          if(response.code==200){
-            this.projectList=response.data.list;
+            this.endpointTableData = response.data.list
+            this.endpointPageObj.total = response.data.total
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.scrollbarWrap = this.$refs.endpointTable.bodyWrapper
+                this.toTopBtnHandler(this.scrollbarWrap)
+              })
+            }
           }
         })
-      },
-      getProjectModule(projectId){
-        let moduleList=JSON.parse(JSON.stringify(this.moduleList));
-        return moduleList.filter((item,index)=>{
-          return item.project.id==projectId;
-        })
-      },
-      detailProject(project){
-        this.pageType='project';
-        if(project){
-          this.currentProject=project;
-          this.currentProjectTitle=project.id+"";
+      }
+    },
+    afterCloseImport: function () {
+      this.getEndpointTableData()
+      bus.$emit('module-list-change')
+    },
+    endpointPageNo (val) {
+      this.endpointPageObj.pageNo = val
+      this.getEndpointTableData()
+    },
+    endpointPageSize (val) {
+      this.endpointPageObj.pageSize = val
+      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
+      this.getEndpointTableData()
+    },
+
+    getProjectList () {
+      this.$get('project', { pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.projectList = response.data.list
         }
-        this.currentModule={};
-      },
-      closeAddEndpointRightBox(refresh){
-        this.rightBox.addEndpoint.show=false;
-        if(refresh){
-          this.getEndpointTableData();
-        }
-      },
-      closeEditEndpointRightBox(refresh){
-        this.rightBox.editEndpoint.show=false;
-        if(refresh){
-          this.getEndpointTableData();
-        }
-      },
-      getModuleList(){
-        this.$get('module',{pageSize:-1,pageNo:1}).then(response=>{
-          if(response.code===200){
-            this.moduleList=response.data.list;
-            for(let i=0; i<this.moduleList.length; i++){
-              try{
-                let param= this.moduleList[i].param || '{}';
-                let tempObj=JSON.parse(param);
-                this.$set(this.moduleList[i],'paramObj',[]);
-                for(let k in tempObj){
-                  this.moduleList[i].paramObj.push({key:k,value:tempObj[k]});
-                }
-                let labels= this.moduleList[i].labels || '{}';
-                let tempObj1=JSON.parse(labels);
-                this.$set(this.moduleList[i],'labelModule',[]);
-                for(let k in tempObj1){
-                  this.moduleList[i].labelModule.push({key:k,value:tempObj1[k]});
-                }
-              }catch(err){
-                console.error(response.data.list[i], err);
+      })
+    },
+    getProjectModule (projectId) {
+      const moduleList = JSON.parse(JSON.stringify(this.moduleList))
+      return moduleList.filter((item, index) => {
+        return item.project.id == projectId
+      })
+    },
+    detailProject (project) {
+      this.pageType = 'project'
+      if (project) {
+        this.currentProject = project
+        this.currentProjectTitle = project.id + ''
+      }
+      this.currentModule = {}
+    },
+    closeAddEndpointRightBox (refresh) {
+      this.rightBox.addEndpoint.show = false
+      if (refresh) {
+        this.getEndpointTableData()
+      }
+    },
+    closeEditEndpointRightBox (refresh) {
+      this.rightBox.editEndpoint.show = false
+      if (refresh) {
+        this.getEndpointTableData()
+      }
+    },
+    getModuleList () {
+      this.$get('module', { pageSize: -1, pageNo: 1 }).then(response => {
+        if (response.code === 200) {
+          this.moduleList = response.data.list
+          for (let i = 0; i < this.moduleList.length; i++) {
+            try {
+              const param = this.moduleList[i].param || '{}'
+              const tempObj = JSON.parse(param)
+              this.$set(this.moduleList[i], 'paramObj', [])
+              for (const k in tempObj) {
+                this.moduleList[i].paramObj.push({ key: k, value: tempObj[k] })
               }
+              const labels = this.moduleList[i].labels || '{}'
+              const tempObj1 = JSON.parse(labels)
+              this.$set(this.moduleList[i], 'labelModule', [])
+              for (const k in tempObj1) {
+                this.moduleList[i].labelModule.push({ key: k, value: tempObj1[k] })
+              }
+            } catch (err) {
+              console.error(response.data.list[i], err)
             }
           }
-        });
-      },
-      //左侧module列表选中切换
-      changeModule(project,module){
-        this.currentModule=module;
-        this.endpointSearchLabel={moduleId:''};
-        this.$refs.projectSearch.clearSearch();
-        this.bottomBox.showSubList=false;
-        this.currentProject=project;
-      },
-      //弹出endpoint编辑页
-      editEndpoint(endpoint){
-        this.endpoint=JSON.parse(JSON.stringify(endpoint));
-        this.$set(this.endpoint,'projectId',this.currentModule.project.id)
-        this.$set(this.endpoint,'moduleId',this.currentModule.id)
-
-        this.rightBox.editEndpoint.show=true;
-        if(!this.endpoint.paramObj){
-          this.$set(this.endpoint,'paramObj',[]);
         }
-        if(!this.endpoint.labelModule){
-          this.$set(this.endpoint,'labelModule',[]);
-        }
-      },
+      })
+    },
+    // 左侧module列表选中切换
+    changeModule (project, module) {
+      this.currentModule = module
+      this.endpointSearchLabel = { moduleId: '' }
+      this.$refs.projectSearch.clearSearch()
+      this.bottomBox.showSubList = false
+      this.currentProject = project
+    },
+    // 弹出endpoint编辑页
+    editEndpoint (endpoint) {
+      this.endpoint = JSON.parse(JSON.stringify(endpoint))
+      this.$set(this.endpoint, 'projectId', this.currentModule.project.id)
+      this.$set(this.endpoint, 'moduleId', this.currentModule.id)
 
-      addEndpoint(){
-        this.endpoint.project=Object.assign({},this.currentModule.project);
-        this.endpoint.module=Object.assign({},this.currentModule);
-        this.rightBox.addEndpoint.show=true;
-      },
+      this.rightBox.editEndpoint.show = true
+      if (!this.endpoint.paramObj) {
+        this.$set(this.endpoint, 'paramObj', [])
+      }
+      if (!this.endpoint.labelModule) {
+        this.$set(this.endpoint, 'labelModule', [])
+      }
+    },
 
-      //查看endpoint详情
-      detailEndpoint(endpoint){
-        this.endpoint=Object.assign({},endpoint);
-        this.bottomBox.targetTab="panel";
-        this.bottomBox.showSubList=true;
-      },
-      delEndpoint(endpoint){
-        this.$confirm(this.$t("tip.confirmDelete"),{
-          confirmButtonText:this.$t("tip.yes"),
-          cancelButtonText:this.$t("tip.no"),
-          type:'warning'
-        }).then(()=>{
-          this.$delete("endpoint?ids="+endpoint.id).then(response=>{
-            if(response.code===200){
-              this.delFlag=true;
-              this.$message({duration:1000,type:'success',message:this.$t("tip.deleteSuccess")});
-              this.getEndpointTableData();
-            }else{
-              this.$message.error(response.msg);
-            }
-          });
-        });
-      },
-      jumpToAlertMsg(endpoint){
-        if (!this.hasButton('project_endpoint_alerts_view')) {
-          return;
-        }
-        this.endpoint=Object.assign({},endpoint);
-        this.bottomBox.targetTab='alertMessage';
-        this.bottomBox.showSubList=true;
-      },
-      addModule(){
-        this.module=this.newModule();
-        this.rightBox.module.show=true;
-        this.$nextTick(()=>{
-          this.$refs.moduleBox.initWalk();
-        });
-      },
-      newModule(){
-        return JSON.parse(JSON.stringify(this.blankModule));
-      },
+    addEndpoint () {
+      this.endpoint.project = Object.assign({}, this.currentModule.project)
+      this.endpoint.module = Object.assign({}, this.currentModule)
+      this.rightBox.addEndpoint.show = true
+    },
 
-      //搜索
-      endpointSearch(searchObj){
-        let orderBy='';
-        if(this.endpointSearchLabel.orderBy){
-          orderBy=this.endpointSearchLabel.orderBy
+    // 查看endpoint详情
+    detailEndpoint (endpoint) {
+      this.endpoint = Object.assign({}, endpoint)
+      this.bottomBox.targetTab = 'panel'
+      this.bottomBox.showSubList = true
+    },
+    delEndpoint (endpoint) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('endpoint?ids=' + endpoint.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getEndpointTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    jumpToAlertMsg (endpoint) {
+      if (!this.hasButton('project_endpoint_alerts_view')) {
+        return
+      }
+      this.endpoint = Object.assign({}, endpoint)
+      this.bottomBox.targetTab = 'alertMessage'
+      this.bottomBox.showSubList = true
+    },
+    addModule () {
+      this.module = this.newModule()
+      this.rightBox.module.show = true
+      this.$nextTick(() => {
+        this.$refs.moduleBox.initWalk()
+      })
+    },
+    newModule () {
+      return JSON.parse(JSON.stringify(this.blankModule))
+    },
+
+    // 搜索
+    endpointSearch (searchObj) {
+      let orderBy = ''
+      if (this.endpointSearchLabel.orderBy) {
+        orderBy = this.endpointSearchLabel.orderBy
+      }
+      this.endpointSearchLabel = {}
+      this.endpointPageObj.pageNo = 1
+      for (const item in searchObj) {
+        if (searchObj[item] || searchObj[item] === 0) {
+          if (item === 'endpointState') {
+            this.$set(this.endpointSearchLabel, 'state', searchObj[item])
+          } else {
+            this.$set(this.endpointSearchLabel, item, searchObj[item])
+          }
         }
-        this.endpointSearchLabel={};
-        this.endpointPageObj.pageNo=1;
-        for(let item in searchObj){
-          if(searchObj[item] || searchObj[item] === 0){
-            if (item === "endpointState") {
-              this.$set(this.endpointSearchLabel, 'state', searchObj[item]);
+      }
+      if (orderBy) {
+        this.$set(this.endpointSearchLabel, 'orderBy', orderBy)
+      }
+      if (this.$refs.endpointTable && this.$refs.endpointTable.bodyWrapper) {
+        this.$refs.endpointTable.bodyWrapper.scrollTop = 0
+      }
+      this.getEndpointTableData()
+    },
+
+    dateFormat (time) {
+      if (!time) {
+        return '-'
+      }
+      const date = new Date(time * 1000)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+
+      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+    },
+    viewAsset (endpoint) {
+      this.endpoint = Object.assign({}, endpoint)
+      this.bottomBox.targetTab = 'assetDetail'
+      this.bottomBox.showSubList = true
+    },
+    query (endpoint) {
+      this.endpoint = Object.assign({}, endpoint)
+      this.bottomBox.targetTab = 'endpointQuery'
+      this.bottomBox.showSubList = true
+    },
+    getStateContent: function (row) {
+      if (row) {
+        if (row.state == 1) {
+          return 'up'
+        } else {
+          return `down:${this.getStateErrorMsg(row)}`
+        }
+      }
+    },
+    convertToDetail (obj) {
+      const detail = {
+        project: obj.project.name,
+        module: obj.module.name,
+        asset: obj.asset.host,
+        host: obj.host,
+        port: obj.port,
+        path: obj.path,
+        param: obj.param
+      }
+      return detail
+    },
+    formatUpdateTime: function (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    },
+    getStateErrorMsg (row) {
+      const errCodes = [230009, 230010, 230011]
+      if (row) {
+        if (row.state == 0) {
+          if (errCodes.find((item) => {
+            return row.stateInfo.code == item
+          })) {
+            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
+          } else {
+            this.$message.error('state code error')
+            return row.stateInfo.msg
+          }
+        }
+      }
+    },
+    assetConvertToDetail (obj) {
+      const detail = JSON.parse(JSON.stringify(obj))
+      detail.state = obj.state == 1 ? this.$t('asset.inStock') : this.$t('asset.notInStock')
+      detail.assetType = obj.model.type.value
+      detail.vendorModel = obj.model.vendor.value + ' ' + obj.model.name
+      detail.dataCenter = obj.idc ? obj.idc.name : ''
+      detail.location = obj.idc ? obj.idc.location : ''
+      detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : ''
+      detail.tel = obj.idc ? obj.idc.tel : ''
+      detail.cabinet = obj.cabinet ? obj.cabinet.name : ''
+      detail.uSize = obj.cabinet ? obj.cabinet.uSize : ''
+      detail.remark = obj.idc ? obj.idc.remark : ''
+      !obj.accounts && (obj.accounts = [])
+      if (obj.accounts.length > 0) {
+        const account = obj.accounts[0]
+        detail.protocol = account.protocol
+        detail.account = account.user
+        let loginType = ''
+        if (account.authType == 1) {
+          loginType = this.$t('asset.password')
+        } else if (account.authType == 2) {
+          loginType = this.$t('asset.ssh')
+        }
+        detail.loginType = loginType
+        detail.port = account.port
+      }
+      return detail
+    },
+    getPrincipalName (data) {
+      for (const item in this.userData) {
+        if (this.userData[item].userId === data) {
+          return this.userData[item].username
+        }
+      }
+    },
+    getUserData () {
+      this.$get('sys/user/list').then(response => {
+        if (response.code === 200) {
+          this.userData = response.data.list
+        }
+      })
+    },
+    // 刷新拓扑图
+    visNetworkReload () {
+      this.$refs.facade.$refs.visNetwork.reload()
+    },
+    // 数据排序
+    tableDataSort (item) {
+      let orderBy = ''
+      if (item.order === 'ascending') {
+        orderBy = item.prop
+      }
+      if (item.order === 'descending') {
+        orderBy = '-' + item.prop
+      }
+      this.$set(this.endpointSearchLabel, 'orderBy', orderBy)
+      this.getEndpointTableData()
+    },
+    initEvent () {
+      bus.$on('project-page-type', pageType => {
+        this.pageType = pageType
+      })
+      bus.$on('current-project-change', project => {
+        this.currentProject = project
+      })
+      bus.$on('current-module-change', module => {
+        this.currentModule = module
+        this.bottomBox.showSubList = false
+      })
+      bus.$on('project-list-change', () => {
+        this.getProjectList()
+      })
+      bus.$on('module-list-change', menu => {
+        this.getModuleList()
+      })
+      bus.$on('endpoint-list-change', menu => {
+        this.getEndpointTableData()
+      })
+      bus.$on('alert-message-change', () => {
+        this.getEndpointTableData()
+      })
+    },
+    messageStyle (e) {
+      if (e.column.label == 'Alerts' || e.column.label == this.$t('project.endpoint.alerts')) {
+        if (e.row.alertNum > 0) {
+          return 'danger'
+        } else {
+          return 'success'
+        }
+      }
+      return ''
+    },
+    changeTopologyIndexF () {
+      this.topologyIndexF = 0
+    }
+  },
+  created () {
+    this.currentProject = this.$store.state.currentProject
+    // 是否存在分页缓存
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    if (pageSize) {
+      this.endpointPageObj.pageSize = pageSize
+    }
+    this.getModuleList()
+    this.getUserData()
+    this.getProjectList()
+  },
+  mounted () {
+    // 初始化表头
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      : this.tableTitle
+    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
+    setTimeout(() => {
+      this.ready = true
+    }, 300)
+
+    this.initEvent()
+  },
+  computed: {
+    currentProjectChange () {
+      return this.$store.state.currentProject
+    },
+    itemTip () {
+      return function (id, content, ready) {
+        const className = 'item-tip-show'
+        this.$nextTick(() => {
+          if (ready) {
+            const cellDom = document.querySelector(`#module-${id}`)
+            const spanDom = document.querySelector(`#module-${id}>span`)
+            if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+              document.querySelector(`#module-${id}>.el-popover`).classList.add(className)
             } else {
-              this.$set(this.endpointSearchLabel,item,searchObj[item]);
+              document.querySelector(`#module-${id}>.el-popover`).classList.remove(className)
             }
           }
-        }
-        if(orderBy){
-          this.$set(this.endpointSearchLabel,'orderBy',orderBy);
-        }
-        if(this.$refs.endpointTable&&this.$refs.endpointTable.bodyWrapper){
-          this.$refs.endpointTable.bodyWrapper.scrollTop = 0;
-        }
-        this.getEndpointTableData();
-      },
-
-      dateFormat(time){
-        if(!time){
-          return '-';
-        }
-        let date=new Date(time*1000);
-        let year=date.getFullYear();
-        let month=date.getMonth()+1<10?"0"+(date.getMonth()+1):date.getMonth()+1;
-        let day=date.getDate()<10?"0"+date.getDate():date.getDate();
-        let hours=date.getHours()<10?"0"+date.getHours():date.getHours();
-        let minutes=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
-        let seconds=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
-
-        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
-      },
-      viewAsset(endpoint){
-        this.endpoint=Object.assign({},endpoint);
-        this.bottomBox.targetTab='assetDetail';
-        this.bottomBox.showSubList=true;
-      },
-      query(endpoint){
-        this.endpoint=Object.assign({},endpoint);
-        this.bottomBox.targetTab='endpointQuery';
-        this.bottomBox.showSubList=true;
-      },
-      getStateContent:function(row){
-        if(row){
-          if(row.state==1){
-            return 'up';
-          }else{
-            return `down:${this.getStateErrorMsg(row)}`
-          }
-        }
-      },
-      convertToDetail(obj){
-        let detail={
-          project:obj.project.name,
-          module:obj.module.name,
-          asset:obj.asset.host,
-          host:obj.host,
-          port:obj.port,
-          path:obj.path,
-          param:obj.param
-        };
-        return detail;
-      },
-      formatUpdateTime:function(date){
-        let time=new Date(date);
-        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
-        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
-
-        return hours+':'+minutes;
-      },
-      getStateErrorMsg(row){
-        let errCodes=[230009,230010,230011];
-        if(row){
-          if(row.state==0){
-            if(errCodes.find((item)=>{
-              return row.stateInfo.code==item
-            })){
-              return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
-            }else{
-              return row.stateInfo.msg;
-              this.$message.error('state code error');
-            }
-          }
-        }
-      },
-      assetConvertToDetail(obj){
-        let detail=JSON.parse(JSON.stringify(obj));
-        detail.state=obj.state==1?this.$t('asset.inStock'):this.$t('asset.notInStock');
-        detail.assetType=obj.model.type.value;
-        detail.vendorModel=obj.model.vendor.value+" "+obj.model.name;
-        detail.dataCenter=obj.idc?obj.idc.name:"";
-        detail.location=obj.idc?obj.idc.location:"";
-        detail.principal=obj.idc?this.getPrincipalName(obj.idc.principal):"";
-        detail.tel=obj.idc?obj.idc.tel:"";
-        detail.cabinet=obj.cabinet?obj.cabinet.name:"";
-        detail.uSize=obj.cabinet?obj.cabinet.uSize:"";
-        detail.remark=obj.idc?obj.idc.remark:"";
-        !obj.accounts&&(obj.accounts=[]);
-        if(obj.accounts.length>0){
-          let account=obj.accounts[0];
-          detail.protocol=account.protocol;
-          detail.account=account.user;
-          let loginType="";
-          if(account.authType==1){
-            loginType=this.$t('asset.password');
-          }else if(account.authType==2){
-            loginType=this.$t('asset.ssh');
-          }
-          detail.loginType=loginType;
-          detail.port=account.port;
-        }
-        return detail;
-      },
-      getPrincipalName(data){
-        for(let item in this.userData){
-          if(this.userData[item].userId===data){
-            return this.userData[item].username
-          }
-        }
-      },
-      getUserData(){
-        this.$get('sys/user/list').then(response=>{
-          if(response.code===200){
-            this.userData=response.data.list
-          }
         })
-      },
-      //刷新拓扑图
-      visNetworkReload(){
-        this.$refs['facade'].$refs['visNetwork'].reload()
-      },
-      // 数据排序
-      tableDataSort(item){
-        let orderBy='';
-        if(item.order==='ascending'){
-          orderBy=item.prop;
-        }
-        if(item.order==='descending'){
-          orderBy='-'+item.prop;
-        }
-        this.$set(this.endpointSearchLabel,"orderBy",orderBy);
-        this.getEndpointTableData();
-      },
-      initEvent(){
-        bus.$on("project-page-type",pageType=>{
-          this.pageType=pageType;
-        });
-        bus.$on("current-project-change",project=>{
-          this.currentProject=project;
-        });
-        bus.$on("current-module-change",module=>{
-          this.currentModule=module;
-          this.bottomBox.showSubList=false;
-        });
-        bus.$on("project-list-change",()=>{
-          this.getProjectList();
-        });
-        bus.$on("module-list-change",menu=>{
-          this.getModuleList();
-        });
-        bus.$on("endpoint-list-change",menu=>{
-          this.getEndpointTableData();
-        });
-        bus.$on('alert-message-change',()=>{
-          this.getEndpointTableData()
-        })
-      },
-      messageStyle(e){
-        if(e.column.label=='Alerts'||e.column.label==this.$t("project.endpoint.alerts")){
-          if(e.row.alertNum>0){
-            return 'danger';
-          }else{
-            return 'success';
-          }
-        }
-        return '';
-      },
-      changeTopologyIndexF(){
-        this.topologyIndexF=0;
-      },
-    },
-    created(){
-      this.currentProject=this.$store.state.currentProject;
-      //是否存在分页缓存
-      let pageSize=localStorage.getItem('nz-pageSize-'+localStorage.getItem('nz-username')+'-'+this.tableId);
-      if(pageSize){
-        this.endpointPageObj.pageSize=pageSize
+        return ''
+      }
+    },
+    reloadFacade () {
+      return this.$store.getters.getReloadFacade
+    }
+  },
+  watch: {
+    currentModule (n, o) {
+      this.endpointPageObj.pageNo = 1
+      if (n && n.id) {
+        this.getEndpointTableData()
+      } else {
+        this.endpointTableData = []
       }
-      this.getModuleList();
-      this.getUserData();
-      this.getProjectList();
     },
-    mounted(){
-      //初始化表头
-      this.tools.customTableTitle=localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path)
-        ?JSON.parse(localStorage.getItem("nz-tableTitle-"+localStorage.getItem("nz-username")+"-"+this.$route.path))
-        :this.tableTitle;
-      this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
-      setTimeout(()=>{
-        this.ready=true;
-      },300);
 
-      this.initEvent();
+    'bottomBox.showSubList': function (n) {
+      const vm = this
+      this.$bottomBoxWindow.showSubListWatch(vm, n)
     },
-    computed:{
-      itemTip(){
-        return function(id,content,ready){
-          let className="item-tip-show";
-          this.$nextTick(()=>{
-            if(ready){
-              let cellDom=document.querySelector(`#module-${id}`);
-              let spanDom=document.querySelector(`#module-${id}>span`);
-              if(cellDom.offsetWidth-16<=spanDom.offsetWidth){
-                document.querySelector(`#module-${id}>.el-popover`).classList.add(className);
-              }else{
-                document.querySelector(`#module-${id}>.el-popover`).classList.remove(className);
-              }
-            }
-          });
-          return "";
-        }
-      },
-      reloadFacade(){
-        return this.$store.getters.getReloadFacade
-      },
-    },
-    watch:{
-      currentModule(n,o){
-        this.endpointPageObj.pageNo=1;
-        if(n&&n.id){
-          this.getEndpointTableData();
-        }else{
-          this.endpointTableData=[];
-        }
-      },
-
-      "bottomBox.showSubList":function(n){
-        let vm=this;
-        this.$bottomBoxWindow.showSubListWatch(vm,n);
-      },
-      endpoint:{
-        deep:true,
-        handler(n){
-          this.bottomBox.endpointDetail=this.convertToDetail(n);
-          this.$get('asset',{id:n.assetId}).then(response=>{
-            if(response.code===200){
-              this.bottomBox.assetDetail=this.assetConvertToDetail(response.data.list[0]);
-            }
-          });
-        }
-      },
-      endpointTableData: {
-        deep: true,
-        handler(n) {
-          if (n.length === 0 && this.endpointPageObj.pageNo > 1) {
-            this.endpointPageNo(this.endpointPageObj.pageNo-1);
-          }
-          if(!this.delFlag&&this.pageType==='endpoint'){ // 不是删除时回到顶部 以及修改时
-            this.$refs.endpointTable.bodyWrapper.scrollTop = 0
-          }else{
-            this.delFlag=false;
+    endpoint: {
+      deep: true,
+      handler (n) {
+        this.bottomBox.endpointDetail = this.convertToDetail(n)
+        this.$get('asset', { id: n.assetId }).then(response => {
+          if (response.code === 200) {
+            this.bottomBox.assetDetail = this.assetConvertToDetail(response.data.list[0])
           }
+        })
+      }
+    },
+    endpointTableData: {
+      deep: true,
+      handler (n) {
+        if (n.length === 0 && this.endpointPageObj.pageNo > 1) {
+          this.endpointPageNo(this.endpointPageObj.pageNo - 1)
         }
-      },
-    },
-    beforeDestroy() {
-      bus.$off("project-page-type");
-      bus.$off("current-project-change");
-      bus.$off("current-module-change");
-      bus.$off("project-list-change");
-      bus.$off("module-list-change");
-      bus.$off("endpoint-list-change");
-      bus.$off('alert-message-change');
-      if(this.scrollbarWrap){
-        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      };
-    },
+        if (!this.delFlag && this.pageType === 'endpoint') { // 不是删除时回到顶部 以及修改时
+          this.$refs.endpointTable.bodyWrapper.scrollTop = 0
+        } else {
+          this.delFlag = false
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    bus.$off('project-page-type')
+    bus.$off('current-project-change')
+    bus.$off('current-module-change')
+    bus.$off('project-list-change')
+    bus.$off('module-list-change')
+    bus.$off('endpoint-list-change')
+    bus.$off('alert-message-change')
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
   }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 49aba7730..1f867b1bc 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -1,81 +1,81 @@
 import axios from 'axios'
 
 axios.interceptors.request.use(config => {
-      let token = sessionStorage.getItem('nz-token');
-      if (token) {
-          config.headers['Authorization'] = token //请求头token
-        }
-        return config;
-      },
-      err => Promise.reject(err)
-);
-const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008]; //账号锁定等
-axios.interceptors.response.use(
-    response => {
-      if(response.status === 200){
-        if(accountErrorCode.indexOf(response.data.code) != -1) {
-          window.location.href = "/";
-        }
-      }
-      return response
-    },
-    error => {
-      return Promise.reject(error)
-    }
+  const token = sessionStorage.getItem('nz-token')
+  if (token) {
+    config.headers.Authorization = token // 请求头token
+  }
+  return config
+},
+err => Promise.reject(err)
 )
-export function get(url, params) {
-  return new Promise((resolve, reject) => {
+const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008] // 账号锁定等
+axios.interceptors.response.use(
+  response => {
+    if (response.status === 200) {
+      if (accountErrorCode.indexOf(response.data.code) !== -1) {
+        window.location.href = '/'
+      }
+    }
+    return response
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+export function get (url, params) {
+  return new Promise((resolve) => {
     axios.get(url, {
       params: params
     }).then(response => {
       resolve(response.data)
     }).catch(err => {
-      if(err.response){
-        resolve(err.response.data);
-      }else if(err.message){
-        resolve(err.message);
+      if (err.response) {
+        resolve(err.response.data)
+      } else if (err.message) {
+        resolve(err.message)
       }
     })
   })
 }
 
-export function post(url, params,headers) {
-  return new Promise((resolve, reject) => {
-    axios.post(url, params,{headers:headers}).then(response => {
+export function post (url, params, headers) {
+  return new Promise(resolve => {
+    axios.post(url, params, { headers: headers }).then(response => {
       resolve(response.data)
     }).catch(err => {
-      if(err.response){
-        resolve(err.response.data);
-      }else if(err.message){
-        resolve(err.message);
+      if (err.response) {
+        resolve(err.response.data)
+      } else if (err.message) {
+        resolve(err.message)
       }
     })
   })
 }
 
-export function put(url, params,headers) {
-  return new Promise((resolve, reject) => {
-    axios.put(url, params,{headers:headers}).then(response => {
+export function put (url, params, headers) {
+  return new Promise((resolve) => {
+    axios.put(url, params, { headers: headers }).then(response => {
       resolve(response.data)
     }).catch(err => {
-      if(err.response){
-        resolve(err.response.data);
-      }else if(err.message){
-        resolve(err.message);
+      if (err.response) {
+        resolve(err.response.data)
+      } else if (err.message) {
+        resolve(err.message)
       }
     })
   })
 }
 
-export function del(url, params) {
-  return new Promise((resolve, reject) => {
+export function del (url, params) {
+  return new Promise((resolve) => {
     axios.delete(url, params).then(response => {
       resolve(response.data)
     }).catch(err => {
-      if(err.response){
-        resolve(err.response.data);
-      }else if(err.message){
-        resolve(err.message);
+      if (err.response) {
+        resolve(err.response.data)
+      } else if (err.message) {
+        resolve(err.message)
       }
     })
   })
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 6ce778520..4ca45fa0a 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -1,330 +1,330 @@
-import Vue from 'vue';
+import Vue from 'vue'
 
-Date.prototype.setStart = function() {
-  this.setHours(0);
-  this.setMinutes(0);
-  this.setSeconds(0);
-};
-// eslint-disable-next-line
-Date.prototype.setEnd = function() {
-  this.setHours(23);
-  this.setMinutes(59);
-  this.setSeconds(59);
-};
+Date.prototype.setStart = function () {
+  this.setHours(0)
+  this.setMinutes(0)
+  this.setSeconds(0)
+}
+Date.prototype.setEnd = function () {
+  this.setHours(23)
+  this.setMinutes(59)
+  this.setSeconds(59)
+}
 
 export default new Vue({
-  data() {
+  data () {
     return {
       selectDate: [], // 选中的时间段
       emailReg: /^[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}$/,
       // 创建策略信息
       buildRuleInfo: {
         triggers: [],
-        actions: [],
+        actions: []
       },
       backtoRulelist: '', // 返回策略列表页信息
-      //role: md5(1),
-      role:1,
+      // role: md5(1),
+      role: 1,
       // 创建图表信息
       chartAddInfo: {
-        metricTarget: [],
-      },
-    };
+        metricTarget: []
+      }
+    }
   },
   methods: {
     // 获取初始化时间，默认最近一周
-    getDefaultDate() {
-      let start = this.getDays(-7);
-      let end = this.getDays(0);
-      start.setStart();
-      end.setEnd();
+    getDefaultDate () {
+      let start = this.getDays(-7)
+      let end = this.getDays(0)
+      start.setStart()
+      end.setEnd()
       // let start = this.getHoursTime(-1);
       // let end = this.getHoursTime(0);
-      start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
-      end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
-      this.selectDate = [start, end];
+      start = this.timeFormate(start, 'yyyy-MM-dd hh:mm:ss')
+      end = this.timeFormate(end, 'yyyy-MM-dd hh:mm:ss')
+      this.selectDate = [start, end]
     },
-    getHoursTime(hours) {
-      const today = new Date().getTime();
-      const date = new Date(today + (hours * 60 * 60 * 1000));
-      return date;
+    getHoursTime (hours) {
+      const today = new Date().getTime()
+      const date = new Date(today + (hours * 60 * 60 * 1000))
+      return date
     },
     // 初始化日期
-    getDays(days) {
-      const today = new Date().getTime();
-      const date = new Date(today + (days * 24 * 60 * 60 * 1000));
-      return date;
+    getDays (days) {
+      const today = new Date().getTime()
+      const date = new Date(today + (days * 24 * 60 * 60 * 1000))
+      return date
     },
-    formatDate(date, type) {
-      const yy = date.getFullYear();
-      const dateM = date.getMonth() + 1;
-      const mm = dateM > 9 ? dateM : `0${dateM}`;
-      const dateD = date.getDate();
-      const dd = dateD > 9 ? dateD : `0${dateD}`;
+    formatDate (date, type) {
+      const yy = date.getFullYear()
+      const dateM = date.getMonth() + 1
+      const mm = dateM > 9 ? dateM : `0${dateM}`
+      const dateD = date.getDate()
+      const dd = dateD > 9 ? dateD : `0${dateD}`
       if (type) {
-        return `${yy}${type}${mm}${type}${dd}`;
+        return `${yy}${type}${mm}${type}${dd}`
       }
-      return `${yy}${mm}${dd}`;
+      return `${yy}${mm}${dd}`
     },
-    timeFormate(date, fmt='yyyy-MM-dd hh:mm:ss') {
-      const time = new Date(date);
-      let fm = fmt;
+    timeFormate (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
+      const time = new Date(date)
+      let fm = fmt
       // fmt 自定义格式,如：yy-MM-dd
-      let week = '';
+      let week = ''
       switch (time.getDay()) {
         case 0:
-          week = '周日';
-          break;
+          week = '周日'
+          break
         case 1:
-          week = '周一';
-          break;
+          week = '周一'
+          break
         case 2:
-          week = '周二';
-          break;
+          week = '周二'
+          break
         case 3:
-          week = '周三';
-          break;
+          week = '周三'
+          break
         case 4:
-          week = '周四';
-          break;
+          week = '周四'
+          break
         case 5:
-          week = '周五';
-          break;
+          week = '周五'
+          break
         case 6:
-          week = '周六';
-          break;
+          week = '周六'
+          break
         default:
-          week = '';
-          break;
+          week = ''
+          break
       }
       const o = {
         'M+': time.getMonth() + 1, // 月份
         'd+': time.getDate(), // 日
-        'hh': time.getHours(), // 小时
+        hh: time.getHours(), // 小时
         'm+': time.getMinutes(), // 分
         's+': time.getSeconds(), // 秒
         'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
-        'a': time.getHours() > 12 ? "pm" : "am",
+        a: time.getHours() > 12 ? 'pm' : 'am',
         S: time.getMilliseconds(), // 毫秒
-        w: week,
-      };
+        w: week
+      }
       if (/(y+)/.test(fm)) {
-        fm = fm.replace(RegExp.$1, (time.getFullYear().toString()).substr(4 - RegExp.$1.length));
+        fm = fm.replace(RegExp.$1, (time.getFullYear().toString()).substr(4 - RegExp.$1.length))
       }
       Object.keys(o).forEach((k) => {
         if (new RegExp(`(${k})`).test(fm)) {
-          fm = fm.replace(RegExp.$1, (RegExp.$1.length === 1) ?
-            (o[k]) : ((`00${o[k]}`).substr((`${o[k]}`).length)));
+          fm = fm.replace(RegExp.$1, (RegExp.$1.length === 1)
+            ? (o[k])
+            : ((`00${o[k]}`).substr((`${o[k]}`).length)))
         }
-      });
-      fm = fm.replace("h", time.getHours() > 12 ? time.getHours()-12 : time.getHours());
-      return fm;
+      })
+      fm = fm.replace('h', time.getHours() > 12 ? time.getHours() - 12 : time.getHours())
+      return fm
     },
     // 格式化tag为字符串表达式
-    tagsToString(metric,arr) {
-      let str = metric;
-      let sepStr = '';
+    tagsToString (metric, arr) {
+      let str = metric
+      let sepStr = ''
       arr.forEach((item, index) => {
         if (index === 0) {
-          str +="{"
-          if(item.value.length===1){
-            str +=  `${item.name}='${item.value.join('|')}'`;
-            sepStr = ',';
-          }else if(item.value.length>1){
-            str +=  `${item.name}=~'${item.value.join('|')}'`;
-            sepStr = ',';
+          str += '{'
+          if (item.value.length === 1) {
+            str += `${item.name}='${item.value.join('|')}'`
+            sepStr = ','
+          } else if (item.value.length > 1) {
+            str += `${item.name}=~'${item.value.join('|')}'`
+            sepStr = ','
           }
         } else {
-          if(item.value.length===1){
-            str += sepStr+`${item.name}='${item.value.join('|')}'`;
-            sepStr = ',';
-          }else if(item.value.length>1){
-            str += sepStr+`${item.name}=~'${item.value.join('|')}'`;
-            sepStr = ',';
+          if (item.value.length === 1) {
+            str += sepStr + `${item.name}='${item.value.join('|')}'`
+            sepStr = ','
+          } else if (item.value.length > 1) {
+            str += sepStr + `${item.name}=~'${item.value.join('|')}'`
+            sepStr = ','
           }
         }
-      });
-      if(str.indexOf('{')>-1){
-        str +="}";
+      })
+      if (str.indexOf('{') > -1) {
+        str += '}'
       }
-      if(str.endsWith('{}')){
-        str = str.substring(0,str.indexOf('{'));
+      if (str.endsWith('{}')) {
+        str = str.substring(0, str.indexOf('{'))
       }
-      return str;
+      return str
     },
-    getStep(startTime,endTime){
-      const start = new Date(startTime);
-      const end = new Date(endTime);
-      let step='15s';
-      const numInterval = end.getTime()-start.getTime();
-      let oneDay = 86400000;
-      let sevenDay = 604800000;
-      let thirtyDay = 2592000000;
-      if (numInterval < oneDay) {//小于1天，step为15s
-        step='15s';
-      }else if(numInterval<sevenDay){
-        step='5m';
-      }else if(numInterval<thirtyDay){
-        step='10m';
-      }else {
-        step='30m';
+    getStep (startTime, endTime) {
+      const start = new Date(startTime)
+      const end = new Date(endTime)
+      let step = '15s'
+      const numInterval = end.getTime() - start.getTime()
+      const oneDay = 86400000
+      const sevenDay = 604800000
+      const thirtyDay = 2592000000
+      if (numInterval < oneDay) { // 小于1天，step为15s
+        step = '15s'
+      } else if (numInterval < sevenDay) {
+        step = '5m'
+      } else if (numInterval < thirtyDay) {
+        step = '10m'
+      } else {
+        step = '30m'
       }
-      return step;
+      return step
     },
-    isEmptyObject(obj) {
+    isEmptyObject (obj) {
       if (obj) {
-        let name = '';
+        let name = ''
         // eslint-disable-next-line
         for (name in obj) { return false; }
-        return true;
+        return true
       }
-      return true;
+      return true
     },
-    validateEmail(rule, value, callback) {
+    validateEmail (rule, value, callback) {
       if (value === '') {
-        callback(new Error('请输入邮箱'));
+        callback(new Error('请输入邮箱'))
       } else if (!this.emailReg.test(value)) {
-        callback(new Error('邮箱格式不正确'));
+        callback(new Error('邮箱格式不正确'))
       } else {
-        callback();
+        callback()
       }
     },
-    getNumStr(num) {
+    getNumStr (num) {
       if (num >= 1000) {
-        const kbNum = num / 1000;
+        const kbNum = num / 1000
         if (kbNum >= 1000) {
-          const mbNum = kbNum / 1000;
+          const mbNum = kbNum / 1000
           if (mbNum > 1000) {
-            const gbNum = mbNum / 1000;
+            const gbNum = mbNum / 1000
             if (gbNum > 1000) {
-              const tbNum = gbNum / 1000;
+              const tbNum = gbNum / 1000
               if (tbNum > 1000) {
-                const pbNum = tbNum / 1000;
-                return `${pbNum.toFixed(2)}PB`;
+                const pbNum = tbNum / 1000
+                return `${pbNum.toFixed(2)}PB`
               }
-              return `${tbNum.toFixed(2)}TB`;
+              return `${tbNum.toFixed(2)}TB`
             }
-            return `${gbNum.toFixed(2)}GB`;
+            return `${gbNum.toFixed(2)}GB`
           }
-          return `${mbNum.toFixed(2)}MB`;
+          return `${mbNum.toFixed(2)}MB`
         }
-        return `${kbNum.toFixed(2)}KB`;
+        return `${kbNum.toFixed(2)}KB`
       }
-      return num.toFixed(2);
+      return num.toFixed(2)
     },
-    getSingleStatRlt(statistics,result){
-      let dataArray = [];
-      if(result){
-        result.forEach((item)=>{
-          dataArray.push(item[1]);
+    getSingleStatRlt (statistics, result) {
+      let dataArray = []
+      if (result) {
+        result.forEach((item) => {
+          dataArray.push(item[1])
         })
       }
-      let statisticsRlt = '';
-      if(dataArray.length>0){
-        if(statistics==='min'){//min：最小值
-          statisticsRlt = dataArray.reduce(function(a , b){
-            return b < a ? b : a;
-          });
-        }else if(statistics==='max'){// max：最大值
-          statisticsRlt = dataArray.reduce(function(a , b){
-            return b > a ? b : a;
-          });
-        }else if(statistics==='average'){// average：平均值
-          let sum = 0;
-          dataArray.forEach((item)=>{
-            sum =Number(sum) + Number(item);
+      let statisticsRlt = ''
+      if (dataArray.length > 0) {
+        if (statistics === 'min') { // min：最小值
+          statisticsRlt = dataArray.reduce(function (a, b) {
+            return b < a ? b : a
           })
-          statisticsRlt = sum/dataArray.length;
-        }else if(statistics==='total'){//total：总计
-          dataArray.forEach((item)=>{
-            statisticsRlt =Number(statisticsRlt) + Number(item);
+        } else if (statistics === 'max') { // max：最大值
+          statisticsRlt = dataArray.reduce(function (a, b) {
+            return b > a ? b : a
           })
-        }else if(statistics==='first'){//first：第一个值
-          statisticsRlt = dataArray[0];
-        }else if(statistics==='last'){// last：最后一个值
-          statisticsRlt = dataArray[dataArray.length-1];
-        }else if(statistics==='range'){//range : max - min
-          let min = dataArray.reduce(function(a , b){
-            return b < a ? b : a;
-          });
-          let max = dataArray.reduce(function(a , b){
-            return b > a ? b : a;
-          });
-          statisticsRlt = max-min;
-        }else if(statistics==='different'){//different : last - first
-          statisticsRlt = dataArray[dataArray.length-1]-dataArray[0];
+        } else if (statistics === 'average') { // average：平均值
+          let sum = 0
+          dataArray.forEach((item) => {
+            sum = Number(sum) + Number(item)
+          })
+          statisticsRlt = sum / dataArray.length
+        } else if (statistics === 'total') { // total：总计
+          dataArray.forEach((item) => {
+            statisticsRlt = Number(statisticsRlt) + Number(item)
+          })
+        } else if (statistics === 'first') { // first：第一个值
+          statisticsRlt = dataArray[0]
+        } else if (statistics === 'last') { // last：最后一个值
+          statisticsRlt = dataArray[dataArray.length - 1]
+        } else if (statistics === 'range') { // range : max - min
+          const min = dataArray.reduce(function (a, b) {
+            return b < a ? b : a
+          })
+          const max = dataArray.reduce(function (a, b) {
+            return b > a ? b : a
+          })
+          statisticsRlt = max - min
+        } else if (statistics === 'different') { // different : last - first
+          statisticsRlt = dataArray[dataArray.length - 1] - dataArray[0]
         }
       }
-      dataArray = null;
-      return statisticsRlt;
+      dataArray = null
+      return statisticsRlt
     },
-    //将本地时区转为系统配置的时区
-    computeTimezone:function(sourceTime){
-      let offset=localStorage.getItem('nz-sys-timezone');
-      if(offset&& offset != 'undefined' && offset != null){
-        offset=Number.parseInt(offset);
-        let date=new Date(sourceTime);
-        let localOffset=date.getTimezoneOffset()*60*1000; //默认 一分钟显示时区偏移的结果
-        let utcTime=sourceTime + localOffset;
-        return utcTime+(offset * 60*60*1000);
-      }else{
-        return sourceTime;
+    // 将本地时区转为系统配置的时区
+    computeTimezone: function (sourceTime) {
+      let offset = localStorage.getItem('nz-sys-timezone')
+      if (offset && offset !== 'undefined') {
+        offset = Number.parseInt(offset)
+        const date = new Date(sourceTime)
+        const localOffset = date.getTimezoneOffset() * 60 * 1000 // 默认 一分钟显示时区偏移的结果
+        const utcTime = sourceTime + localOffset
+        return utcTime + (offset * 60 * 60 * 1000)
+      } else {
+        return sourceTime
       }
     },
-    getTimezontDateRange:function(offset=-1){
+    getTimezontDateRange: function (offset = -1) {
       return [
         new Date(new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)),
         new Date(this.computeTimezone(new Date().getTime()))
       ]
     },
-    getOffsetTimezoneData(offset=0){
+    getOffsetTimezoneData (offset = 0) {
       return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
     },
-    debounce(fn, delay) {
+    debounce (fn, delay) {
       // 记录上一次的延时器
-      var timer = null;
-      var delay = delay || 200;
-      return function() {
-        var args = arguments;
-        var that = this;
+      let timer = null
+      delay = delay || 200
+      return function () {
+        const args = arguments
+        const that = this
         // 清除上一次延时器
         clearTimeout(timer)
-        timer = setTimeout(function() {
-          fn.apply(that,args)
-        }, delay);
+        timer = setTimeout(function () {
+          fn.apply(that, args)
+        }, delay)
       }
     },
-    UTCTimeToConfigTimezone:function(utcTime){
-      let offset=localStorage.getItem('nz-sys-timezone');
-      if(offset&& offset != 'undefined' && offset != null){
-        let time = utcTime;
-        if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
-          time = new Date(time).getTime();
+    UTCTimeToConfigTimezone (utcTime) {
+      let offset = localStorage.getItem('nz-sys-timezone')
+      if (offset && offset !== 'undefined') {
+        let time = utcTime
+        if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
+          time = new Date(time).getTime()
         }
-        offset=Number.parseInt(offset);
-        return time += offset * 60*60*1000
-
-      }else{
-        return utcTime;
+        offset = Number.parseInt(offset)
+        time += offset * 60 * 60 * 1000
+        return time
+      } else {
+        return utcTime
       }
     },
-    configTimezoneToUTCTime:function(configTime){
-      let offset=localStorage.getItem('nz-sys-timezone');
-      if(offset&& offset != 'undefined' && offset != null){
-        let time = configTime;
-        if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
-          time = new Date(time).getTime();
+    configTimezoneToUTCTime: function (configTime) {
+      let offset = localStorage.getItem('nz-sys-timezone')
+      if (offset && offset !== 'undefined') {
+        let time = configTime
+        if (typeof time === 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)) {
+          time = new Date(time).getTime()
         }
-        offset=Number.parseInt(offset);
-        return time -= offset * 60*60*1000
-
-      }else{
-        return configTime;
+        offset = Number.parseInt(offset)
+        time -= offset * 60 * 60 * 1000
+        return time
+      } else {
+        return configTime
       }
     }
   },
-  created() {
-    this.getDefaultDate();
+  created () {
+    this.getDefaultDate()
   },
   computed: {
     /*
@@ -332,5 +332,5 @@ export default new Vue({
       return this.role === Cookies.get('owl_role');
     },
     */
-  },
-});
+  }
+})
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 4d0a767c4..3ecfab71c 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -1,193 +1,190 @@
-//import "./assets/css/main.css";
+// import "./assets/css/main.css";
 import './assets/stylus/index.scss'
-import "./assets/css/nzIcon.css";
-import "./assets/css/main.css";
-import 'element-ui/lib/theme-chalk/index.css';
-import ElementUI from 'element-ui';
+import './assets/css/nzIcon.css'
+import './assets/css/main.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import ElementUI from 'element-ui'
 import 'xterm/dist/xterm.css'
 import i18n from './components/common/i18n'
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import store from './store/index';
+import store from './store/index'
 import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
-import axios from 'axios';
-import "./permission";
-import {hasPermission, hasButton} from "./permission";
+import axios from 'axios'
+import { hasPermission, hasButton } from './permission'
 
 import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
 
-import {post, get, put, del} from './http.js'
-import {clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
-import * as tools from './components/common/js/tools.js';
+import { post, get, put, del } from './http.js'
+import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange } from './components/common/js/tools.js'
+import * as tools from './components/common/js/tools.js'
 import * as constants from './components/common/js/constants.js'
 
+import Pagination from './components/common/pagination' // 引入全局分页组件
+import searchInput from './components/common/searchInput' // 搜索框组件
+import elementSet from './components/common/elementSet' // 自定义表头组件
 
-import Pagination from "./components/common/pagination"; //引入全局分页组件
-import searchInput from "./components/common/searchInput"; //搜索框组件
-import elementSet from "./components/common/elementSet"; //自定义表头组件
+import projectBox from './components/common/rightBox/projectBox' // project弹框组件
+import moduleBox from './components/common/rightBox/moduleBox' // module弹框组件
+import editEndpointBox from './components/common/rightBox/editEndpointBox' // endpoint弹框组件
+import addEndpointBox from './components/common/rightBox/addEndpointBox' // endpoint弹框组件
+import assetBox from './components/common/rightBox/assetBox' // 资产添加组件
+import batchEditAsset from './components/common/rightBox/batchEditAsset' // 资产批量修改组件
+import alertConfigBox from './components/common/rightBox/alertConfigBox' // 告警规则弹框组件
+import panelBox from './components/common/rightBox/panelBox' // 面板弹框组件
+import moduleListPop from './components/page/asset/moduleListPop' // 面板弹框组件
+import cabinetConfigBox from './components/common/popBox/cabinetConfig' // 面板弹框组件
+import modelBox from './components/common/rightBox/modelBox' // model弹框
+import bottomBox from './components/common/bottomBox/bottomBox' // 上滑框
+import loading from './components/common/loading'
+import mibBox from './components/common/rightBox/mibBox'
+import leftMenu from './components/common/leftMenu'
+import pickTime from './components/common/pickTime'
+import bus from './libs/bus'
 
-import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
-import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
-import editEndpointBox from './components/common/rightBox/editEndpointBox'; //endpoint弹框组件
-import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
-import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件
-import batchEditAsset from "./components/common/rightBox/batchEditAsset"; //资产批量修改组件
-import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
-import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
-import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
-import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
-import modelBox from "./components/common/rightBox/modelBox"; //model弹框
-import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
-import loading from "./components/common/loading";
-import mibBox from "./components/common/rightBox/mibBox";
-import leftMenu from "./components/common/leftMenu";
-import pickTime from "./components/common/pickTime";
-import bus from "./libs/bus";
-import {cancelWithChange} from "./components/common/js/tools";
+Vue.component('Pagination', Pagination)
+Vue.component('searchInput', searchInput)
+Vue.component('element-set', elementSet)
+Vue.component('project-box', projectBox)
+Vue.component('module-box', moduleBox)
+Vue.component('edit-endpoint-box', editEndpointBox)
+Vue.component('add-endpoint-box', addEndpointBox)
+Vue.component('asset-box', assetBox)
+Vue.component('batch-edit-asset', batchEditAsset)
+Vue.component('alert-config-box', alertConfigBox)
+Vue.component('panel-box', panelBox)
+Vue.component('module-list-pop', moduleListPop)
+Vue.component('cabinet-config-box', cabinetConfigBox)
+Vue.component('model-box', modelBox)
+Vue.component('loading', loading)
+Vue.component('bottom-box', bottomBox)
+Vue.component('mib-box', mibBox)
+Vue.component('left-menu', leftMenu)
+Vue.component('pick-time', pickTime)
 
-Vue.component("Pagination", Pagination);
-Vue.component("searchInput", searchInput);
-Vue.component("element-set", elementSet);
-Vue.component("project-box", projectBox);
-Vue.component("module-box", moduleBox);
-Vue.component("edit-endpoint-box", editEndpointBox);
-Vue.component("add-endpoint-box", addEndpointBox);
-Vue.component("asset-box", assetBox);
-Vue.component("batch-edit-asset", batchEditAsset);
-Vue.component("alert-config-box", alertConfigBox);
-Vue.component("panel-box", panelBox);
-Vue.component("module-list-pop", moduleListPop);
-Vue.component("cabinet-config-box", cabinetConfigBox);
-Vue.component("model-box", modelBox);
-Vue.component('loading',loading);
-Vue.component('bottom-box', bottomBox);
-Vue.component('mib-box',mibBox);
-Vue.component('left-menu',leftMenu);
-Vue.component('pick-time',pickTime);
-
-Vue.prototype.$axios = axios;
-Vue.prototype.$post = post;
-Vue.prototype.$get = get;
-Vue.prototype.$put = put;
-Vue.prototype.$delete = del;
-Vue.prototype.$CONSTANTS = constants;
-Vue.prototype.$TOOLS = tools;
-Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
-Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
-Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
-Vue.prototype.$chartResizeTool = chartResizeTool;
-Vue.prototype.$tableSet = tableSet;
-Vue.prototype.$tableHeight = { //列表页表格的高度
-  normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
-  openSubList: { //打开二级列表后的高度
+Vue.prototype.$axios = axios
+Vue.prototype.$post = post
+Vue.prototype.$get = get
+Vue.prototype.$put = put
+Vue.prototype.$delete = del
+Vue.prototype.$CONSTANTS = constants
+Vue.prototype.$TOOLS = tools
+Vue.prototype.$bottomBoxWindow = bottomBoxWindow // 底部上滑框控制
+Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix
+Vue.prototype.$unixTimeParseToString = unixTimeParseToString
+Vue.prototype.$chartResizeTool = chartResizeTool
+Vue.prototype.$tableSet = tableSet
+Vue.prototype.$tableHeight = { // 列表页表格的高度
+  normal: 'calc(100% - 100px)', // 常规高度，特例在下方定义
+  openSubList: { // 打开二级列表后的高度
     mainList: 'calc(100% - 60px)',
     subList: 'calc(100% - 86px)',
     toTopBtnTop: 'calc(50% - 11px)'
   },
   toTopBtnTop: 'calc(100% - 73px)',
-  noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
-};
+  noPagination: 'calc(100% - 60px)' // 特例：没有翻页组件
+}
 
 Vue.mixin({
-  data:function(){
+  data: function () {
     return {
-      prevent_opt:{
-        save:false,
-        import:false,
-        dumplicate:false,
-        delete:false,
-        refresh:false,
-        query:false,
+      prevent_opt: {
+        save: false,
+        import: false,
+        dumplicate: false,
+        delete: false,
+        refresh: false,
+        query: false
       }
     }
   },
   methods: {
-    utcTimeToTimezone:function(time){
-      if(time){
+    utcTimeToTimezone: function (time) {
+      if (time) {
         return bus.UTCTimeToConfigTimezone(time)
       }
     },
-    utcTimeToTimezoneStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
-      if(time){
-        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time),format)
-      }else{
+    utcTimeToTimezoneStr: function (time, format = 'yyyy-MM-dd hh:mm:ss') {
+      if (time) {
+        return bus.timeFormate(bus.UTCTimeToConfigTimezone(time), format)
+      } else {
         return '-'
       }
     },
-    timezoneToUtcTime:function(time){
-      if(time){
+    timezoneToUtcTime: function (time) {
+      if (time) {
         return bus.configTimezoneToUTCTime(time)
       }
     },
-    timezoneToUtcTimeStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
-      if(time){
-        return bus.timeFormate(this.timezoneToUtcTime(time),format)
+    timezoneToUtcTimeStr: function (time, format = 'yyyy-MM-dd hh:mm:ss') {
+      if (time) {
+        return bus.timeFormate(this.timezoneToUtcTime(time), format)
       }
     },
-    tableTitleReset:function(src,dist){
-      dist.forEach(item=>{
-        let title=src.find(t=>t.prop == item.prop)
-        if(title&&title.label){
-          item.label=title.label;
+    tableTitleReset: function (src, dist) {
+      dist.forEach(item => {
+        const title = src.find(t => t.prop === item.prop)
+        if (title && title.label) {
+          item.label = title.label
         }
-      });
+      })
     },
-    hasButton(code) {
-      return hasButton(this.$store.getters.buttonList, code);
+    hasButton (code) {
+      return hasButton(this.$store.getters.buttonList, code)
     },
-    toTop(wrap) {
-      let currentTop = wrap.scrollTop;
-      let interval = currentTop/10;
-      let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-        if (currentTop == 0) {
-          clearInterval(intervalFunc);
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
         } else {
-          currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-          wrap.scrollTop = currentTop;
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
         }
-      }, 20);
+      }, 20)
     },
-    toTopBtnHandler(wrap) {
-      let vm = this;
-      wrap.addEventListener('scroll', bus.debounce(function() {
-        vm.tools.showTopBtn = wrap.scrollTop > 50;
-        vm.tools.tableHover = wrap.scrollTop > 50;
-      }, 100));
+    toTopBtnHandler (wrap) {
+      const vm = this
+      wrap.addEventListener('scroll', bus.debounce(function () {
+        vm.tools.showTopBtn = wrap.scrollTop > 50
+        vm.tools.tableHover = wrap.scrollTop > 50
+      }, 100))
     },
-    numberWithEConvent(num) {
+    numberWithEConvent (num) {
       if (num) {
-        if ((("" + num).indexOf('E') != -1) || (("" + num).indexOf('e') != -1)) {
-          let regExp = new RegExp('^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig');
-          let result = regExp.exec(num);
-          let resultValue = "";
-          let power = "";
+        if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {
+          const regExp = /'^((\\d+.?\\d+)[Ee]{1}(\\d+))$', 'ig'/
+          let result = regExp.exec(num)
+          let resultValue = ''
+          let power
           if (result != null) {
-            resultValue = result[2];
-            power = result[3];
-            result = regExp.exec(num);
+            resultValue = result[2]
+            power = result[3]
+            result = regExp.exec(num)
           }
 
-          if (resultValue != "") {
-            if (power != "") {
-              let powVer = Math.pow(10, power);
-              resultValue = resultValue * powVer;
-              return resultValue;
+          if (resultValue) {
+            if (power) {
+              const powVer = Math.pow(10, power)
+              resultValue = resultValue * powVer
+              return resultValue
             }
           }
         } else {
-          return num;
+          return num
         }
       }
-      return 0;
+      return 0
     },
-    translation(key) {
-      return i18n.t(key);
+    translation (key) {
+      return i18n.t(key)
     },
-    copyRow(row,rightBoxValKey,idKey= 'id',show = false,format,callback){
+    copyRow (row, rightBoxValKey, idKey = 'id', show = false, format, callback) {
       /*
       row 表格当前行
       rightBoxValKey 右侧弹窗绑定的 data
@@ -196,66 +193,65 @@ Vue.mixin({
       format 是否需要对当前行进行处理
       callBack 回调
       */
-      let rowCopy={...row};
-      if(rowCopy.name){
-        rowCopy.name = 'Copy from ' + rowCopy.name;
+      let rowCopy = { ...row }
+      if (rowCopy.name) {
+        rowCopy.name = 'Copy from ' + rowCopy.name
       }
-      if(format){
-        rowCopy=format(rowCopy)
+      if (format) {
+        rowCopy = format(rowCopy)
       }
-      delete rowCopy[idKey];
-      this[rightBoxValKey]=rowCopy;
-      if(typeof show==='function'){
+      delete rowCopy[idKey]
+      this[rightBoxValKey] = rowCopy
+      if (typeof show === 'function') {
         show()
-      }else if(typeof show==='string'){
-        this[show]=true
-      }  else {
-        this['rightBox']['show']=true;
+      } else if (typeof show === 'string') {
+        this[show] = true
+      } else {
+        this.rightBox.show = true
       }
-      if(callback){
+      if (callback) {
         callback()
       }
-    },
+    }
   },
   computed: {
-    getMenuList() {
-      return this.$store.state.user.menuList;
+    getMenuList () {
+      return this.$store.state.user.menuList
     },
-    getButtonList() {
-      return this.$store.state.buttonList;
+    getButtonList () {
+      return this.$store.state.buttonList
     }
   }
-});
+})
 
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(Vuex)
+Vue.use(VueResource)
+Vue.use(plTable)
+Vue.use(hasPermission)
 
-Vue.config.productionTip = false;
-Vue.use(ElementUI);
-Vue.use(Vuex);
-Vue.use(VueResource);
-Vue.use(plTable);
-Vue.use(hasPermission);
-
-/*指令*/
-Vue.directive('cancel',cancelWithChange)
-Vue.directive('clickoutside', clickoutside);
-window.resizing = false;
+/* 指令 */
+Vue.directive('cancel', cancelWithChange)
+Vue.directive('clickoutside', clickoutside)
+window.resizing = false
 window.vm = new Vue({
   el: '#app',
   router,
   i18n,
   store,
-  components: {App},
+  components: { App },
   template: '<App/>',
-  mounted() {
-    //store.commit()
+  mounted () {
+    // store.commit()
   }
-});
+})
 
-export default vm;
+export default window.vm
 
 /* 重写组件内容 */
-/*const elUi = require("element-ui");
+/* const elUi = require("element-ui");
 const pl = require("pl-table");
 //去掉el-table表头右侧的滚动条预留空间
 elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
-pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};*/
+pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;}; */
diff --git a/nezha-fronted/src/permission.js b/nezha-fronted/src/permission.js
index 9f08b0792..611cced77 100644
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -1,125 +1,126 @@
-import router from './router';
-import store from './store';
-import {post} from './http';
-import ElementUI from 'element-ui';
-import Vue from 'vue';
-import i18n from './components/common/i18n';
+import router from './router'
+import store from './store'
+import { post } from './http'
+import ElementUI from 'element-ui'
+import Vue from 'vue'
+import i18n from './components/common/i18n'
 import VueResource from 'vue-resource'
 
-Vue.use(VueResource);
+Vue.use(VueResource)
 
-const loginWhiteList = ['/login','/setup']; // 免登陆白名单
-const permissionWhiteList = ['/menu', ...loginWhiteList]; // 权限白名单
+const loginWhiteList = ['/login', '/setup'] // 免登陆白名单
+const permissionWhiteList = ['/menu', ...loginWhiteList] // 权限白名单
 
 router.beforeEach((to, from, next) => {
   if (sessionStorage.getItem('nz-token')) {
     if (permissionWhiteList.indexOf(to.path) !== -1) {
-      next();
+      next()
     } else {
       new Promise(resolve => {
         if (store.getters.menuList.length === 0) {
-          let configUrl = "static/config.json?Timestamp=" + new Date().getTime();
+          const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
           Vue.http.get(configUrl).then(res => {
-            post(res.body.baseUrl + "sys/user/permissions", {token: sessionStorage.getItem("nz-token")}).then(res => {
-              store.commit("setMenuList", sortByOrderNum(res.data.menus));
-              store.commit("setButtonList", res.data.buttons);
-              store.commit("setRoleList", res.data.roles);
-              resolve();
-            });
-          });
+            post(res.body.baseUrl + 'sys/user/permissions', { token: sessionStorage.getItem('nz-token') }).then(res => {
+              store.commit('setMenuList', sortByOrderNum(res.data.menus))
+              store.commit('setButtonList', res.data.buttons)
+              store.commit('setRoleList', res.data.roles)
+              resolve()
+            })
+          })
         } else {
-          resolve();
+          resolve()
         }
       }).then(res => {
         if (to.path) {
           if (hasMenu(store.getters.menuList, to.path)) {
-            next();
+            next()
           } else {
-            ElementUI.Message.error(i18n.t("tip.noAccess"));
+            ElementUI.Message.error(i18n.t('tip.noAccess'))
           }
         }
-      });
+      })
     }
   } else {
     if (loginWhiteList.indexOf(to.path) !== -1) {
-      next();
+      next()
     } else {
-      next({path: '/login'})
+      next({ path: '/login' })
     }
   }
-});
+})
 
-//menuList中是否包含route权限
-export function hasMenu(menuList, route) {
+// menuList中是否包含route权限
+export function hasMenu (menuList, route) {
   return menuList.some(menu => {
     if (menu.route == route) {
-      return true;
+      return true
     } else {
       if (menu.children) {
         if (hasMenu(menu.children, route)) {
-          return true;
+          return true
         }
       }
     }
-  });
+    return false
+  })
 }
 
-export function hasButton(buttonList, code) {
-  return buttonList.some(button => button == code);
+export function hasButton (buttonList, code) {
+  return buttonList.some(button => button == code)
 }
 
-//用法 v-has="code" | v-has="[code...]" 任意匹配一个 | v-has:all="[code...]" 全匹配
+// 用法 v-has="code" | v-has="[code...]" 任意匹配一个 | v-has:all="[code...]" 全匹配
 export const hasPermission = {
   install (Vue, options) {
     Vue.directive('has', {
-      inserted: (el, binding, vnode)=>{
-        //节点权限处理
-        let buttonCode = binding.value;
-        let arg = binding.arg;
+      inserted: (el, binding, vnode) => {
+        // 节点权限处理
+        const buttonCode = binding.value
+        const arg = binding.arg
         if (buttonCode) {
           if (buttonCode instanceof Array) {
-            let has = true;
-            if (arg && arg === 'all') { //全匹配
+            let has = true
+            if (arg && arg === 'all') { // 全匹配
               buttonCode.forEach(button => {
                 if (has) {
-                  has = hasButton(store.getters.buttonList, button);
+                  has = hasButton(store.getters.buttonList, button)
                 }
-              });
-            } else { //任意匹配
+              })
+            } else { // 任意匹配
               has = buttonCode.some(button => {
-                return hasButton(store.getters.buttonList, button);
-              });
+                return hasButton(store.getters.buttonList, button)
+              })
             }
             if (!has) {
-              el.parentNode.removeChild(el);
+              el.parentNode.removeChild(el)
             }
-          } else { //单个匹配
+          } else { // 单个匹配
             if (!hasButton(store.getters.buttonList, buttonCode)) {
-              el.parentNode.removeChild(el);
+              el.parentNode.removeChild(el)
             }
           }
         }
       }
-    });
+    })
   }
-};
+}
 
-//根据orderNum排序
-export function sortByOrderNum(menuList) {
-  let r = menuList.sort((a, b) => {
-    return a.orderNum - b.orderNum;
-  });
+// 根据orderNum排序
+export function sortByOrderNum (menuList) {
+  const r = menuList.sort((a, b) => {
+    return a.orderNum - b.orderNum
+  })
   r.forEach(menu => {
     if (menu.children && getChildMenu(menu).length > 0) {
       menu.children = menu.children.sort((a, b) => {
-        return a.orderNum - b.orderNum;
-      });
-      menu.route = menu.children[0].route;
+        return a.orderNum - b.orderNum
+      })
+      menu.route = menu.children[0].route
     }
-  });
-  return r;
+  })
+  return r
 }
 
-function getChildMenu(menu) {
-  return menu.children.filter(m => m.type == 1);
+function getChildMenu (menu) {
+  return menu.children.filter(m => m.type == 1)
 }
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 7fb42fbc1..f56128788 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -11,11 +11,11 @@ export default new Router({
     },
     {
       path: '/login',
-      component: resolve => require(['../components/common/login.vue'], resolve),
+      component: resolve => require(['../components/common/login.vue'], resolve)
     },
     {
       path: '/setup',
-      component: resolve => require(['../components/page/config/setup.vue'], resolve),
+      component: resolve => require(['../components/page/config/setup.vue'], resolve)
     },
     {
       path: '/',
@@ -23,93 +23,93 @@ export default new Router({
       children: [
         {
           path: '/panel',
-          component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),
+          component: resolve => require(['../components/page/dashboard/panel.vue'], resolve)
         },
         {
           path: '/explore',
-          component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve),
+          component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve)
         },
         {
           path: 'overview',
-          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
+          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'], resolve)
         },
         {
           path: '/project',
-          component: resolve => require(['../components/page/project/project.vue'], resolve),
+          component: resolve => require(['../components/page/project/project.vue'], resolve)
         },
         {
           path: '/asset',
-          component: resolve => require(['../components/page/asset/asset.vue'], resolve),
+          component: resolve => require(['../components/page/asset/asset.vue'], resolve)
         },
         {
           path: '/account',
-          component: resolve => require(['../components/page/config/account.vue'], resolve),
+          component: resolve => require(['../components/page/config/account.vue'], resolve)
         },
         {
           path: '/menu',
-          component: resolve => require(['../components/page/config/menus.vue'], resolve),
+          component: resolve => require(['../components/page/config/menus.vue'], resolve)
         },
         {
           path: '/roles',
-          component: resolve => require(['../components/page/config/roles.vue'], resolve),
+          component: resolve => require(['../components/page/config/roles.vue'], resolve)
         },
         {
           path: '/promServer',
-          component: resolve => require(['../components/page/config/promServer.vue'], resolve),
+          component: resolve => require(['../components/page/config/promServer.vue'], resolve)
         },
         {
           path: '/assetType',
-          component: resolve => require(['../components/page/config/assetType.vue'], resolve),
+          component: resolve => require(['../components/page/config/assetType.vue'], resolve)
         },
         {
           path: '/assetState',
-          component: resolve => require(['../components/page/config/assetState.vue'], resolve),
+          component: resolve => require(['../components/page/config/assetState.vue'], resolve)
         },
         {
           path: '/dc',
-          component: resolve => require(['../components/page/config/dc.vue'], resolve),
+          component: resolve => require(['../components/page/config/dc.vue'], resolve)
         },
         {
           path: '/model',
-          component: resolve => require(['../components/page/config/model.vue'], resolve),
+          component: resolve => require(['../components/page/config/model.vue'], resolve)
         },
         {
           path: '/terminalLog',
-          component: resolve => require(['../components/page/config/terminallog.vue'], resolve),
+          component: resolve => require(['../components/page/config/terminallog.vue'], resolve)
         },
         {
           path: '/operationLog',
-          component: resolve => require(['../components/page/config/operationlog.vue'], resolve),
+          component: resolve => require(['../components/page/config/operationlog.vue'], resolve)
         },
         {
           path: '/about',
-          component: resolve => require(['../components/page/config/about.vue'], resolve),
+          component: resolve => require(['../components/page/config/about.vue'], resolve)
         },
         {
           path: '/mib',
-          component: resolve => require(['../components/page/config/mib.vue'], resolve),
+          component: resolve => require(['../components/page/config/mib.vue'], resolve)
         },
         {
           path: '/system',
-          component: resolve => require(['../components/page/config/system.vue'], resolve),
+          component: resolve => require(['../components/page/config/system.vue'], resolve)
         },
         {
           path: '/alertList',
-          component: resolve => require(['../components/page/alert/list.vue'], resolve),
+          component: resolve => require(['../components/page/alert/list.vue'], resolve)
         },
         {
           path: '/alertConfig',
-          component: resolve => require(['../components/page/alert/config.vue'], resolve),
+          component: resolve => require(['../components/page/alert/config.vue'], resolve)
         },
         {
           path: '/alertSilence',
-          component: resolve => require(['../components/page/alert/silence.vue'], resolve),
+          component: resolve => require(['../components/page/alert/silence.vue'], resolve)
         },
         {
           path: '/exprtemp',
-          component: resolve => require(['../components/page/config/exprTemp.vue'], resolve),
+          component: resolve => require(['../components/page/config/exprTemp.vue'], resolve)
         }
       ]
-    },
+    }
   ]
 })
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index ab6cd5c75..cd9c7f870 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -1,134 +1,134 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import user from "./user"
+import user from './user'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     user
   },
   state: {
     /* 监听对象变化，用于顶部菜单与底部内容的同步 */
-    currentProject: {id: "", name: "", remark: ""},
-    currentDc:null,
+    currentProject: { id: '', name: '', remark: '' },
+    currentDc: null,
     projectListChange: 0,
-    reloadFacade:true,//重新加载project
-    showPanel:{
+    reloadFacade: true, // 重新加载project
+    showPanel: {
       id: 0,
       name: '',
-      type: "dashboard"
+      type: 'dashboard'
     },
-    consoleShow: false,//是否显示console窗口
-    consoleCount: 0,//当前console窗口数
-    isAddConsole: false,//是否增加窗口
-    consoleParam: {},//新开console窗口参数
-    linkData: [],//导航数据
-    projectFilter:{
+    consoleShow: false, // 是否显示console窗口
+    consoleCount: 0, // 当前console窗口数
+    isAddConsole: false, // 是否增加窗口
+    consoleParam: {}, // 新开console窗口参数
+    linkData: [], // 导航数据
+    projectFilter: {
       panelId: 0,
       start_time: '',
       end_time: '',
       searchName: ''
     },
-    idcArr:[],
-    overViewProject:{},
-    dcDataRefresh:false,
+    idcArr: [],
+    overViewProject: {},
+    dcDataRefresh: false
   },
   getters: {
-    getLinkData(state){
+    getLinkData (state) {
       return state.linkData
     },
-    getProjectFilter(state){
+    getProjectFilter (state) {
       return state.projectFilter
     },
-    getReloadFacade(state){
+    getReloadFacade (state) {
       return state.reloadFacade
     },
-    getIdcArr(state){
+    getIdcArr (state) {
       return state.idcArr
     },
-    getOverViewProject(state){
+    getOverViewProject (state) {
       return state.overViewProject
     },
-    getDcDataRefresh(state){
+    getDcDataRefresh (state) {
       return state.dcDataRefresh
-    },
+    }
   },
   mutations: {
     /* 监听对象变化，用于顶部菜单与底部内容的同步 */
-    projectListChange(state) {
-      state.projectListChange++;
+    projectListChange (state) {
+      state.projectListChange++
     },
-    currentProjectChange(state, project) {
-      state.currentProject = project;
+    currentProjectChange (state, project) {
+      state.currentProject = project
     },
 
-    panelShowPanelChange(state, panel) { //用来panel页控制初始panel的
-      state.showPanel.id = panel.id;
-      state.showPanel.name = panel.name;
+    panelShowPanelChange (state, panel) { // 用来panel页控制初始panel的
+      state.showPanel.id = panel.id
+      state.showPanel.name = panel.name
     },
 
-    openConsole(state) {//打开console，如果当前窗口数为0，则默认新建一个console
-      state.consoleShow = true;
-      if(state.consoleCount === 0){
-        state.consoleCount++;
-        state.isAddConsole = true;
-      }else {
-        state.isAddConsole = false;
+    openConsole (state) { // 打开console，如果当前窗口数为0，则默认新建一个console
+      state.consoleShow = true
+      if (state.consoleCount === 0) {
+        state.consoleCount++
+        state.isAddConsole = true
+      } else {
+        state.isAddConsole = false
       }
     },
-    addConsole(state,data) {//打开console，并新建一个console
-      state.consoleShow = true;
-      state.consoleCount++;
-      state.isAddConsole = true;
-      state.consoleParam = data;
+    addConsole (state, data) { // 打开console，并新建一个console
+      state.consoleShow = true
+      state.consoleCount++
+      state.isAddConsole = true
+      state.consoleParam = data
     },
-    addConsoleNum(state) {
-      state.consoleCount++;
+    addConsoleNum (state) {
+      state.consoleCount++
     },
-    removeConsole(state) {//移除一个console，如果是最后一个，则关闭窗口，否则不关闭窗口
-      state.consoleCount--;
-      if(state.consoleCount === 0){
-        state.consoleShow = false;
+    removeConsole (state) { // 移除一个console，如果是最后一个，则关闭窗口，否则不关闭窗口
+      state.consoleCount--
+      if (state.consoleCount === 0) {
+        state.consoleShow = false
       }
     },
-    closeConsole(state) {//关闭console窗口
-      state.consoleShow = false;
-      state.consoleCount = 0;
-      state.consoleParam ={};
+    closeConsole (state) { // 关闭console窗口
+      state.consoleShow = false
+      state.consoleCount = 0
+      state.consoleParam = {}
     },
-    minConsole(state) {//最小化窗口
-      state.consoleShow = false;
+    minConsole (state) { // 最小化窗口
+      state.consoleShow = false
     },
-    setLinkData(state, data) {
-      state.linkData = data;
+    setLinkData (state, data) {
+      state.linkData = data
     },
-    setProjectFilter(state, data) {
-      state.projectFilter = data;
+    setProjectFilter (state, data) {
+      state.projectFilter = data
     },
-    setReloadFacade(state){
-      state.reloadFacade=false;
-      setTimeout(()=>{
-        state.reloadFacade=true;
+    setReloadFacade (state) {
+      state.reloadFacade = false
+      setTimeout(() => {
+        state.reloadFacade = true
       })
     },
-    setIdcArr(state,data){
+    setIdcArr (state, data) {
       state.idcArr = data
     },
-    setCurrentDc(state,data){
+    setCurrentDc (state, data) {
       state.currentDc = data
     },
-    setOverViewProject(state,data){
-      state.overViewProject=data;
-    },
-    setDcDataRefresh(state){
-      state.dcDataRefresh=true;
-      setTimeout(()=>{
-        state.dcDataRefresh=false;
-      },100)
+    setOverViewProject (state, data) {
+      state.overViewProject = data
     },
+    setDcDataRefresh (state) {
+      state.dcDataRefresh = true
+      setTimeout(() => {
+        state.dcDataRefresh = false
+      }, 100)
+    }
   },
   actions: {
   }
-});
+})
 
-export default store;
+export default store
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 4d2fe359c..dc8fde271 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -1,71 +1,70 @@
-import {post} from '../http';
-import router from '../router';
-import bus from '../libs/bus';
-import {sortByOrderNum} from "../permission";
-import store from "./index";
+import { post } from '../http'
+import router from '../router'
+import bus from '../libs/bus'
+import { sortByOrderNum } from '../permission'
 
 const user = {
   state: {
     menuList: [],
     buttonList: [],
-    roleList: [],
+    roleList: []
   },
   mutations: {
-    setMenuList(state, menuList) {
-      state.menuList = [...menuList];
+    setMenuList (state, menuList) {
+      state.menuList = [...menuList]
     },
-    setButtonList(state, buttonList) {
-      state.buttonList = [...buttonList];
+    setButtonList (state, buttonList) {
+      state.buttonList = [...buttonList]
     },
-    setRoleList(state, roleList) {
-      state.roleList = [...roleList];
+    setRoleList (state, roleList) {
+      state.roleList = [...roleList]
     },
-    clean(state) {
-      state.menuList = [];
-      state.buttonList = [];
-      state.roleList = [];
+    clean (state) {
+      state.menuList = []
+      state.buttonList = []
+      state.roleList = []
     }
   },
   getters: {
-    menuList(state) {
-      return state.menuList;
+    menuList (state) {
+      return state.menuList
     },
-    buttonList(state) {
-      return state.buttonList;
-    },
-    roleList(state) {
-      return state.roleList;
+    buttonList (state) {
+      return state.buttonList
     },
+    roleList (state) {
+      return state.roleList
+    }
   },
   actions: {
-    loginSuccess(store, res) {
-      sessionStorage.setItem("nz-token", res.data.token);
-      localStorage.setItem('nz-sys-name',res.data.systemName);
-      localStorage.setItem('nz-sys-timezone',res.data.timezone);
-      localStorage.setItem('nz-sys-default-cabinet-usize',res.data.defaultCabinetUsize);
-      localStorage.setItem('nz-sys-max-terminal-num',res.data.maxTerminalNum);
-      localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
-      localStorage.setItem('nz-unnsaved-change',res.data.unsavedChange)
-      post("/sys/user/permissions", {token: res.data.token}).then(res => {
-        let menuList = sortByOrderNum(res.data.menus);
-        store.commit("setMenuList", menuList);
-        store.commit("setButtonList", res.data.buttons);
-        store.commit("setRoleList", res.data.roles);
+    loginSuccess (store, res) {
+      sessionStorage.setItem('nz-token', res.data.token)
+      localStorage.setItem('nz-sys-name', res.data.systemName)
+      localStorage.setItem('nz-sys-timezone', res.data.timezone)
+      localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
+      localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)
+      localStorage.setItem('nz-sys-asset-ping-switch', res.data.assetPingSwitch)
+      localStorage.setItem('nz-unnsaved-change', res.data.unsavedChange)
+      post('/sys/user/permissions', { token: res.data.token }).then(res => {
+        const menuList = sortByOrderNum(res.data.menus)
+        store.commit('setMenuList', menuList)
+        store.commit('setButtonList', res.data.buttons)
+        store.commit('setRoleList', res.data.roles)
 
-        bus.$emit("login");
+        bus.$emit('login')
         router.push({
-          path: menuList.find(menu => {return menu.route && menu.route != "/header"}).route,
+          path: menuList.find(menu => { return menu.route && menu.route != '/header' }).route,
           query: {
             t: +new Date()
           }
-        });
-      });
+        })
+      })
     },
-    logoutSuccess(store, res) {
-      sessionStorage.removeItem("nz-username");
-      localStorage.removeItem("nz-username");
-      sessionStorage.removeItem("nz-token");
+    logoutSuccess (store, res) {
+      sessionStorage.removeItem('nz-username')
+      localStorage.removeItem('nz-username')
+      sessionStorage.removeItem('nz-token')
     }
-  },
-};
-export default user;
+  }
+}
+export default user