Merge branch 'dev-3.4' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.4

nezha-fronted/src/assets/css/common.scss

@@ -439,20 +439,36 @@ input,
 textarea {
   font-family: Inter-Regular !important;
 }
-.message-next {
+.custom-message{
-  vertical-align: bottom;
+  display: flex;
-  float: unset;
+  align-items: center;
-  font-size: 10px;
+  .message-right {
-  margin-left: 190px;
+    padding-right: 128px;
-  .message-next-continue {
+    position: relative;
-    color: $--color-text-primary;
-    font-weight: 400;
   }
-  .message-next-content {
+  .message-right.hidden{
-    color: $--color-text-link;
+    display: none;
-    font-weight: 600;
+  }
+  .message-next {
+    width: 86px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border:1px solid $--message-success-font-color;
+    border-radius: 4px;
+    position: absolute;
+    right: 10px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    cursor: pointer;
+    font-size: 14px;
+    span{
+      font-size: 12px;
+    }
   }
 }
+
 .document-copy-block {
   display: flex;
   flex-wrap: nowrap;

nezha-fronted/src/assets/css/common/rightBoxCommon.scss

@@ -374,3 +374,13 @@
 .meta-option-box {
   color: $--color-text-regular;
 }
+.el-range-input{
+  background: $--background-color-empty;
+}
+.ql-toolbar {
+  line-height: 22px;
+  .ql-picker-options{
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+  }
+}

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -571,3 +571,11 @@
   overflow: auto;
   background-color: $--table-body-background-color;
 }
+.el-checkbox.is-disabled{
+  line-height: 1;
+  height: 16px;
+}
+.el-checkbox__input.is-disabled{
+  line-height: 1;
+  height: 16px;
+}

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -46,7 +46,7 @@
     }
   }
   &>.bottom-panel{
-    padding: 15px 10px 10px 10px !important;
+    padding: 15px 10px 0px 10px !important;
   }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{

nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss

@@ -92,7 +92,7 @@
     color: #60BEFF;
     font-size: 13px
   }
-  
+
   .panel-dropdown-btn:hover {
     color: #409EFF;
   }
@@ -150,6 +150,15 @@
     button:hover {
       background: $--background-color-empty;
     }
+    .footer__btn {
+      background-color: $--color-primary;
+      border: none;
+    }
+    .footer__btn.footer__btn--light {
+      background-color: $--button-light-hover-background-color;
+      border: 1px solid $--button-light-border-color;
+      color: $--button-light-color;
+    }
   }
   .date-range-panel{
     .el-button--primary{

nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss

@@ -4,10 +4,13 @@
   z-index: 1;
   background: $--background-color-empty;
   padding-left: 10px;
-  padding-bottom: 5px;
+  margin-top: -5px;
+  flex-wrap: wrap;
   .panel-variables-content{
     display: flex;
     margin-right: 15px;
+    margin-bottom: 5px;
+    margin-top: 5px;
   }
   .variable-key{
     border: 1px solid $--border-color-light;
@@ -15,18 +18,27 @@
     background: $--background-color-2;
     padding: 3px 10px;
     border-radius: 4px 0 0 4px;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .choose-box {
-    overflow: hidden;
+    width: 150px;
-    width: calc(100% - 7px);
+    //position: relative;
-    white-space: nowrap;
+  }
-    max-width: 200px;
+  .choose-box .no-select {
-    text-overflow: ellipsis;
+    width: 150px;
-    padding-right: 5px;
-    height: 30px;
     border: 1px solid $--border-color-light;
+    background: $--background-color-empty;
+    box-sizing: border-box;
     border-left: none;
     padding-left: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 5px;
+    height: 32px;
     display: flex;
     align-items: center;
     .nz-icon-arrow-down6{
@@ -34,6 +46,13 @@
       color: $--color-text-secondary;
     }
   }
+  .choose-box .is-select{
+    width: 200px;
+    z-index: 1;
+    height: 32px;
+    position: relative;
+    //left: 0;
+  }
   .choose-box-content{
     flex: 1;
     white-space: nowrap;
@@ -46,8 +65,10 @@
 }
 
 .panel-variables{
-  min-width: 180px;
+   width: 200px;
-  max-width: 220px;
+  .pop-list {
+    max-height: 360px;
+  }
   .el-dropdown-menu__item {
     padding: 0 5px 0 20px;
     width: 100%;

nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss

@@ -215,16 +215,16 @@
       font-weight: 600;
       text-transform: Capitalize;
     }
-    .pipeline-option {
-      i {
-        color: $--color-text-regular;
-      }
-    }
   }
   .el-input-group__append {
     background-color: $--border-color-light;
   }
 }
+.pipeline-option {
+  i {
+    color: $--color-text-regular;
+  }
+}
 .sub-label {
   padding-right: 15px;
   font-size: 14px;

nezha-fronted/src/components/chart/chartList.vue

@@ -78,6 +78,7 @@
       <panel-chart
         :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
         :chart-info="fullscreen.chartInfo"
+        :variablesInit="variablesInit"
         :from="from"
         :filter="filter"
         :is-fullscreen="true"
@@ -121,6 +122,10 @@ export default {
       default: () => {
         return {}
       }
+    },
+    variablesInit: {
+      type: Boolean,
+      default: true
     }
   },
   components: {

nezha-fronted/src/components/chart/panelChart.vue

@@ -97,6 +97,10 @@ export default {
     },
     dataJson: { // 导出的html的数据
       type: Object
+    },
+    variablesInit: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -148,6 +152,9 @@ export default {
     },
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
+      if (!this.variablesInit) { // 变量未加载完成 不请求数据
+        return
+      }
       this.chartData = []
       this.myVariables = []
       this.loading = true

nezha-fronted/src/components/common/alert/nzTooltip.vue

@@ -15,7 +15,8 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean
+    alertTableDialog: Boolean,
+    isTopoInfo: Boolean
   },
   data () {
     return {
@@ -31,9 +32,10 @@ export default {
         const leftOffSetView = this.detailList ? -80 : 10
         const leftOffSet = this.detailList ? -80 : 10
         const topOffSet = this.detailList ? 60 : 22
+        const topoOffset = this.isTopoInfo ? 155 : 0
         if (position.top + this.heightList > clientHeight) {
           return {
-            left: `${position.left + position.width + leftOffSet}px`,
+            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
             top: `${position.top - this.heightList + topOffSet}px`
           }
         } else if (this.alertTableDialog) {
@@ -47,7 +49,7 @@ export default {
           }
         } else {
           return {
-            left: `${position.left + position.width + leftOffSetView}px`,
+            left: `${position.left + position.width + leftOffSetView - topoOffset}px`,
             top: `${position.top}px`
           }
         }

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

@@ -174,31 +174,31 @@ export default {
         },
         asset: {
           panel: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: true },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
           ],
           alertMessage: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
           ],
           endpoint: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false }
           ],
           log: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: true }
           ],
           alertMessageSub: [
-            { prop: 'panelTab', name: this.$t('overall.detail'), active: false },
+            { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
             { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
             { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label'), active: false },
@@ -214,7 +214,7 @@ export default {
         },
         endpoint: {
           endpointTabTitle: [
-            { prop: 'panelTab', name: this.$t('overall.detail') },
+            { prop: 'panelTab', name: this.$t('overall.dashboard') },
             { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
             { prop: 'Metrics', name: this.$t('overall.metric') },
             { prop: 'log', name: this.$t('dashboard.panel.chartForm.typeVal.log.label') }
@@ -272,7 +272,7 @@ export default {
       const config = this.obj.configs.find(c => c.type === 'logs')
       const hasLog = config && config.enable === 1
       const tabs = [
-        { prop: 'panelTab', name: this.$t('overall.detail') },
+        { prop: 'panelTab', name: this.$t('overall.dashboard') },
         { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
         { prop: 'Metrics', name: this.$t('overall.metric') }
       ]

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

@@ -99,6 +99,7 @@
       <div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
         <div id="dashboardScrollbar" class="table-list-box">
           <div class="box-content"  ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column">
+            <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
             <chart-list
               ref="chartList"
               name="panel"
@@ -113,6 +114,7 @@
               @on-remove-chart="delChart"
               @on-add-group-item-chart="addGroupItem"
               @refreshPanel="refreshPanel"
+              :variablesInit="variablesInit"
               :loading="chartListLoading"
               :chart-detail-info="chartDetailInfo"
             ></chart-list>
@@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 import exportHtmlMixin from '@/components/common/mixin/exportHtml'
+import panelVariables from "@/components/common/panel/panelVariables";
 export default {
   name: 'panelTabNew',
   mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -275,7 +278,9 @@ export default {
       panelDataList: [],
       batchDeleteObjs: [],
       nowTimeType: {},
-      chartDetailInfo: {}
+      chartDetailInfo: {},
+      variables: [],
+      variablesInit: false
     }
   },
   components: {
@@ -283,7 +288,8 @@ export default {
     chartList,
     nzBottomDataList,
     topToolMoreOptions,
-    chartTempBox
+    chartTempBox,
+    panelVariables // 处理panel变量的组件
   },
   methods: {
     // 刷新
@@ -544,10 +550,13 @@ export default {
     },
     // 公用操作
     getTableData (linkId) {
+      this.variablesInit = false
       if (this.from === this.fromRoute.alertRule) {
+        this.variablesInit = true
         this.getData(this.filter)
       } else {
         if (this.from === this.fromRoute.chartTemp) {
+          this.variablesInit = true
           if (this.obj.type === 'group') {
             this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
               this.panelDataList = res.data.list
@@ -564,11 +573,13 @@ export default {
             this.getData(this.filter)
           }
         } else {
-          this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
+          this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => {
+            console.log(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.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
                 this.getData(this.filter)
               }
             } else {
@@ -787,6 +798,10 @@ export default {
       } else {
         this.exportToHtml(this.obj.name)
       }
+    },
+    getPanelData () {
+      this.variablesInit = true
+      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
     }
   },
   mounted () {

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

@@ -150,7 +150,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.inputDateQuery = this.handlerTableData(this.tableData)
           this.pageObj.total = this.tableData.length
           if (!this.scrollbarWrap) {

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

@@ -134,7 +134,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

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

@@ -85,7 +85,7 @@ export default {
       }, 100)
     },
     detailViewRightShow (item) {
-      this.detailViewRightObj = item
+      this.detailViewRightObj = this.$loadsh.cloneDeep(item)
     },
     orderDetail (order, orderType) {
       if (orderType === 'ascending') {

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

@@ -1,3 +1,5 @@
+import i18n from '@/components/common/i18n'
+import { getUUID } from '../js/common'
 export default {
   data () {
     return {
@@ -7,7 +9,8 @@ export default {
         params: {},
         emit: ''
       },
-      closeMessage: ''
+      closeMessage: null,
+      uuid: getUUID()
     }
   },
   mounted () {
@@ -18,25 +21,55 @@ export default {
     }
   },
   methods: {
-    messageShow (msg, route, params, showNext = false, nextText = 'setup.next', emit) {
+    // 开启计时器 对message赋值
+    coutTime (msg, showNext, nextText, second) {
+      if (!this.closeMessage) {
+        return false
+      }
+      this.closeMessage.message =
+      `<div class="custom-message">
+        <div class="message-left">${msg}</div>
+        <div class="message-right ${showNext ? '' : 'hidden'}">
+          <span>，${i18n.t('tip.clickNext')}${i18n.t(nextText)}</span>
+          <span id="assetAdd${this.uuid}" class="message-next">${i18n.t('tip.next')}
+            <span>(${second}s)</span>
+          </span>
+        </div>
+      </div>`
+      this.$nextTick(() => {
+        const assetAdd = document.getElementById(`assetAdd${this.uuid}`)
+        assetAdd.addEventListener('click', this.saveNext)
+      })
+      setTimeout(() => {
+        --second
+        if (second === 0) {
+          this.closeMessage.close()
+        } else {
+          this.coutTime(msg, showNext, nextText, second)
+        }
+      }, 1000)
+    },
+    messageShow (msg, route, params, showNext = false, nextText = '', emit) {
+      // 如果存在弹框 则先清理掉
       this.messageParams.route = route
       this.messageParams.params = params
       this.messageParams.emit = emit
       this.closeMessage = this.$message({
-        duration: showNext ? 5000 : 2000,
+        duration: showNext ? 30000 : 3000,
         dangerouslyUseHTMLString: true,
         type: 'success',
-        message: `<div>${msg} <span class="message-next ${showNext ? '' : 'hidden'}"><span class="message-next-continue">${this.$t('overall.continue')}</span> <span id="assetAdd" class="message-next-content">${this.$t(nextText)}</span></span></div>`,
+        message: '',
         onClose: () => {
-          const assetAdd = document.getElementById('assetAdd')
+          const assetAdd = document.getElementById(`assetAdd${this.uuid}`)
           assetAdd.removeEventListener('click', this.saveNext)
-          this.closeMessage = ''
+          this.closeMessage = null
         }
       })
-      const assetAdd = document.getElementById('assetAdd')
+      // 对message赋值
-      assetAdd.addEventListener('click', this.saveNext)
+      this.coutTime(msg, showNext, nextText, 30)
     },
     saveNext () {
+      this.closeMessage.close()
       if (!this.messageParams.route) {
         this.$store.dispatch(this.messageParams.emit, this.messageParams.params)
         return
@@ -45,7 +78,6 @@ export default {
         path: this.messageParams.route,
         query: this.messageParams.params
       })
-      this.closeMessage.close()
     }
   },
   destroyed () {

nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue

@@ -18,7 +18,7 @@
             :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
-        <div class="el-picker-panel__body" style="min-width: auto">
+        <div class="el-picker-panel__body" style="min-width: 100%">
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">

nezha-fronted/src/components/common/panel/panelVariables.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="" class="panel-variables-box">
     <div v-for="(item,index) in labelArr" :key="index" v-if="item.show" class="panel-variables-content" style="display: flex">
-      <div class="variable-key">{{item.name}}</div>
+      <div class="variable-key" :title="item.name">{{item.name}}</div>
       <el-popover
         trigger="manual"
         placement="bottom-start"
@@ -15,12 +15,12 @@
           </li>
           <ul class="pop-list">
             <el-checkbox-group v-model="item.checked" @change="(value)=>{checkedChange(item,value)}" v-if="item.multi">
-              <li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value">
+              <li class="el-dropdown-menu__item" v-for="value in labelValue[item.name]" :key="value.value" :title="value.value">
                 <el-checkbox :label="value.value" >{{value.label}}</el-checkbox>
               </li>
             </el-checkbox-group>
             <div v-else>
-              <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)">
+              <li class="el-dropdown-menu__item" v-for="(value, j) in labelValue[item.name]" :key="j" @click="selectLabelValue(item,value)" :title="value.value">
                 <div class="el-dropdown-menu__item-label" :class="value.value === item.checked[0] && !item.checkAll ? 'checked': ''">
                   {{value.label}}
                 </div>
@@ -29,10 +29,12 @@
           </ul>
         </ul>
         <div slot="reference" class="choose-box"  @click="triggerVisible(item)">
-          <div class="choose-box-content">
+          <div class="no-select" :class="item.visible? 'is-select': ''">
-            {{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
+            <div class="choose-box-content" :title="item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')">
+              {{item.checked.map(value=> labelValue[item.name].find(labelObj=>labelObj.value === value).label).join(' + ')}}
+            </div>
+            <i class="nz-icon nz-icon-arrow-down6"/>
           </div>
-          <i class="nz-icon nz-icon-arrow-down6"/>
         </div>
       </el-popover>
     </div>
@@ -95,7 +97,7 @@ export default {
       }
       const arrPromise = []
       this.labelValue = {}
-      this.labelArr.forEach((item, index) => {  // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
+      this.labelArr.forEach((item, index) => { // 根据变量的type类型 以及 expression 对应的值 查询不同的接口
         this.labelValue[item.name] = []
         if (item.type === 'custom') {
           arrPromise.push('')
@@ -151,7 +153,6 @@ export default {
               const reg = isRegExp(this.labelArr[index].regex) ? eval(this.labelArr[index].regex) : new RegExp(this.labelArr[index].regex, 'g')
               let arr = []
               response.forEach(label => {
-                // console.log(reg.test(label.label))
                 if (reg.test(label.label)) {
                   const str = label.label.match(reg)
                   if (str.groups) {

nezha-fronted/src/components/common/popBox/selectDashboard.vue

@@ -38,7 +38,7 @@
               <HighlightText :queries="filterPanel" :highlightClass="'highlight-keyword'" style="vertical-align: middle" :title="node.label + ' (' + data.chartNum +' charts）' ">{{node.label}}</HighlightText>
               <el-row class="block-col-2" style="margin-left:10px;margin-right:8px">
                 <el-col>
-                  <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
+                  <el-dropdown  placement="bottom-end" trigger="click" style="margin-right:10px">
                     <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
                     <el-dropdown-menu class="right-box-select-top" slot="dropdown"  v-has="['main_edit', 'main_delete']">
                       <el-dropdown-item>
@@ -77,7 +77,7 @@
               <HighlightText :queries="filterPanel" :highlightClass="'highlight-keyword'" style="vertical-align: middle" :title="node.label + ' (' + data.chartNum +' charts）' ">{{node.label}}</HighlightText>
               <el-row class="block-col-2" style="margin-left:10px;margin-right:8px">
                 <el-col>
-                  <el-dropdown v-if="!panelLock"  placement="bottom-end" trigger="click" style="margin-right:10px">
+                  <el-dropdown  placement="bottom-end" trigger="click" style="margin-right:10px">
                     <span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
                     <el-dropdown-menu class="right-box-select-top" slot="dropdown"  v-has="['main_edit', 'main_delete']">
                       <el-dropdown-item>

nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue

@@ -1,133 +1,145 @@
 <template>
-  <el-dropdown trigger="click" :size="size">
+  <div>
-    <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
+    <el-dropdown trigger="click" :size="size">
-      <i class="nz-icon nz-icon-more2"></i>
+      <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
-    </button>
+        <i class="nz-icon nz-icon-more2"></i>
-    <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+      </button>
-      <el-dropdown-item  v-if="showLock">
+      <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-        <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
+        <el-dropdown-item  v-if="showLock">
-      </el-dropdown-item>
+          <div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
-      <!-- import、export之前的内容 -->
+        </el-dropdown-item>
-      <slot name="before"></slot>
+        <el-dropdown-item  v-if="showLock">
-      <el-dropdown-item v-has="permissions.import" v-if="importUrl">
+          <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
-        <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
+        </el-dropdown-item>
-      </el-dropdown-item>
+        <!-- import、export之前的内容 -->
-      <el-dropdown-item v-has="permissions.export" v-if="exportUrl">
+        <slot name="before"></slot>
-        <div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
+        <el-dropdown-item v-has="permissions.import" v-if="importUrl">
-      </el-dropdown-item>
+          <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
-      <!-- import、export之后的内容 -->
+        </el-dropdown-item>
-      <slot name="after"></slot>
+        <el-dropdown-item v-has="permissions.export" v-if="exportUrl">
-    </el-dropdown-menu>
+          <div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
+        </el-dropdown-item>
+        <!-- import、export之后的内容 -->
+        <slot name="after"></slot>
+      </el-dropdown-menu>
 
-    <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+      <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :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 v-if="importBox.type == 1">
-        <div class="upload-body">
+          <div class="upload-body">
-          <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
+            <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
-            <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
+              <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
-            <i class="nz-icon nz-icon-upload"></i>
+              <i class="nz-icon nz-icon-upload"></i>
-            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-          </el-upload>
+            </el-upload>
-        </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns" style="text-align: right;">
-            <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
-              <span>{{$t('overall.template')}}</span>
-            </button>
-            <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
-              <span>{{$t('overall.importExcel')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.cancel')}}</span>
-            </button>
           </div>
-        </div>
+          <div slot="footer" class="footer">
-      </div>
+            <div class="el-message-box__btns" style="text-align: right;">
-      <div v-if="importBox.type == 2">
+              <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
-        <div class="upload-body" style="height: 200px">
+                <span>{{$t('overall.template')}}</span>
-          <div class="export-box">
+              </button>
-            <span class="export-title">Records</span>
+              <button  :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
-            <el-radio-group v-model="importBox.record"  size="small">
+                <span>{{$t('overall.importExcel')}}</span>
-              <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
+              </button>
-            </el-radio-group>
+              <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
-          </div>
+                <span>{{$t('overall.cancel')}}</span>
-          <div class="export-box">
+              </button>
-            <span class="export-title">File format</span>
-            <el-radio-group v-model="importBox.format"  size="small">
-              <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
-            </el-radio-group>
-          </div>
-        </div>
-        <div slot="footer" class="footer">
-          <div class="el-message-box__btns">
-            <button :id="id+'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
-              <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
-            </button>
-            <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
-              <span>{{$t('overall.close')}}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div v-if="importBox.type==3">
-        <div class="upload-body result-body">
-          <div v-if="importResult&&importResult.failNum">
-            <div class="result-title-top">
-              <div class="">
-                <i class="nz-icon nz-icon-import-success"/>
-                 <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
-              </div>
-              <div class="">
-                 <i class="nz-icon nz-icon-import-failed"/>
-                 <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
-              </div>
             </div>
-            <div>
+          </div>
-              <div v-if="importResult&&importResult.failDetail" class="result-detail">
+        </div>
-                <div style="height: 100%; overflow: auto">
+        <div v-if="importBox.type == 2">
-                  <template v-for="(item, index) in importResult.failDetail">
+          <div class="upload-body" style="height: 200px">
-                    <div :key="index" class="import-result-block">
+            <div class="export-box">
-                      <div class="import-result-item">
+              <span class="export-title">Records</span>
-                        <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+              <el-radio-group v-model="importBox.record"  size="small">
-                        <div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
+                <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
+              </el-radio-group>
+            </div>
+            <div class="export-box">
+              <span class="export-title">File format</span>
+              <el-radio-group v-model="importBox.format"  size="small">
+                <el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns">
+              <button :id="id+'-xlsx-import-export'"  class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
+                <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.close')}}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div v-if="importBox.type==3">
+          <div class="upload-body result-body">
+            <div v-if="importResult&&importResult.failNum">
+              <div class="result-title-top">
+                <div class="">
+                  <i class="nz-icon nz-icon-import-success"/>
+                  <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
+                </div>
+                <div class="">
+                  <i class="nz-icon nz-icon-import-failed"/>
+                  <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
+                </div>
+              </div>
+              <div>
+                <div v-if="importResult&&importResult.failDetail" class="result-detail">
+                  <div style="height: 100%; overflow: auto">
+                    <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 class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
+                        </div>
                       </div>
-                    </div>
+                    </template>
-                  </template>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+            <div v-else class="result-success-box">
-          <div v-else class="result-success-box">
+              <div>
-            <div>
+                <i class="nz-icon nz-icon-import-success"/>
-              <i class="nz-icon nz-icon-import-success"/>
+              </div>
+              <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
+              <div class="result-success-txt">
+                {{$t('overall.result.imported')}}
+                <span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
+                {{$t('overall.result.records')}}
+              </div>
             </div>
-            <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
+          </div>
-            <div class="result-success-txt">
+          <div slot="footer" class="footer">
-              {{$t('overall.result.imported')}}
+            <div class="el-message-box__btns">
-              <span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
+              <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
-              {{$t('overall.result.records')}}
+                <span>{{$t('overall.rollbackImport')}}</span>
+              </button>
+              <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+                <span>{{$t('overall.close')}}</span>
+              </button>
             </div>
           </div>
         </div>
-        <div slot="footer" class="footer">
+      </el-dialog>
-          <div class="el-message-box__btns">
+    </el-dropdown>
-            <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
+    <transition name="right-box">
-              <span>{{$t('overall.rollbackImport')}}</span>
+      <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
-            </button>
+    </transition>
-            <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+  </div>
-              <span>{{$t('overall.close')}}</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </el-dropdown>
 </template>
 
 <script>
 import axios from 'axios'
+import panelBox from '@/components/common/rightBox/panelBox'
 let timeout
 export default {
   name: 'topToolMoreOptions',
+  components: {
+    panelBox
+  },
   props: {
     size: {
       type: String,
@@ -179,7 +191,12 @@ export default {
         { name: 'CSV', value: 2 },
         { name: 'JSON', value: 3 }
       ],
-      suffix: '.xlsx'
+      suffix: '.xlsx',
+      panel: {},
+      rightBox: { // 面板弹出框相关
+        panel: { show: false },
+        loading: false
+      }
     }
   },
   mounted () {
@@ -528,7 +545,57 @@ export default {
     },
     formatNum (num) {
       return num > 9 ? num : '0' + num
-    }
+    },
+    editPanel () {
+      this.$get('visual/panel/' + this.params.panelId).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data
+          if (!this.$loadsh.get(this.panel, 'param.report', '')) {
+            this.panel = {
+              ...this.panel,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: 'day'
+                  },
+                  schedule: {
+                    type: '2',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
+              }
+            }
+          }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
+          this.rightBox.panel.show = true
+        }
+      })
+      // this.panel = Object.assign({}, u)panelType
+    },
+    closePanelBox (refresh) {
+      this.rightBox.panel.show = false
+      if (refresh) {
+        this.$emit('afterImport')
+      }
+    },
   },
   watch: {
     panelLock: {

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

@@ -15,6 +15,7 @@
         <template  v-slot:default="slotProps">
           <endpoint-table
             style="height: 100%"
+            :isTopoInfo="true"
             ref="dataTable"
             :orderByFa="orderBy"
             v-my-loading="tools.loading"

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -479,9 +479,9 @@ export default {
       chartData: {},
       chartGetData: [],
       penLineType: [
-        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
-        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' , strokeColor: theme == 'light' ? 'black' : '#BEBEBE'}
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
         // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
       ],
       lineName: 'curve',
@@ -617,11 +617,12 @@ export default {
       // getTopology(this.topologyIndex).fitView(30)
     },
     shrink (n) {
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
         getTopology(this.topologyIndex).canvasPos = domRect
         getTopology(this.topologyIndex).resize()
         getTopology(this.topologyIndex).centerView()
+        clearTimeout(timer)
       }, 500)
     }
   },
@@ -722,16 +723,18 @@ export default {
         getTopology(this.topologyIndex).resize()
         getTopology(this.topologyIndex).centerView()
         this.penToolTipScale = getTopology(this.topologyIndex).data.scale
-        setTimeout(() => {
+        const timer = setTimeout(() => {
           getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
             if (item.animatePlay) {
               item.stopAnimate()
-              setTimeout(() => {
+              const timer1 = setTimeout(() => {
                 item.startAnimate()
+                clearTimeout(timer1)
               })
             }
-          }, 100)
+          })
-        })
+          clearTimeout(timer)
+        }, 100)
         // if(this.fromPrev){
         //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
         // }
@@ -777,6 +780,7 @@ export default {
         if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
           return
         }
+        data = this.$loadsh.cloneDeep(data)
         if (!getTopology(this.topologyIndex)) {
           let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           canvas.open(data)
@@ -1133,8 +1137,9 @@ export default {
         this.popDataShowUpdate('', false, node)
         return
       }
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         this.popDataShowUpdate(tool.id, false, node)
+        clearTimeout(timer)
       }, 100)
     },
 
@@ -1166,8 +1171,9 @@ export default {
     /* topology 方法 */
     onDrag (event, node) {
       this.dragFlag = false
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         this.dragFlag = true
+        clearTimeout(timer)
       }, 100)
       event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
     },
@@ -1182,8 +1188,9 @@ export default {
           },
           data: { imageId: node.data.imageId }
         })
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         this.dragFlag = true
+        clearTimeout(timer)
       }, 100)
     },
 
@@ -1305,7 +1312,7 @@ export default {
           }
           this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
           this.tooltipPosition.show = false
-          setTimeout(() => {
+         const timer = setTimeout(() => {
             this.tooltipPosition.show = true
             let ePosition = window.ePosition
             let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
@@ -1329,6 +1336,7 @@ export default {
               boxWidth = null
               boxHeight = null
             })
+            clearTimeout(timer)
           }, 100)
           break
         case 'moveOutNode':
@@ -1350,7 +1358,7 @@ export default {
           break
       }
       // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         switch (event) {
           case 'node':
           case 'addNode':
@@ -1534,6 +1542,7 @@ export default {
             // }
             break
         }
+        clearTimeout(timer)
       }, 0)
     },
 
@@ -1892,7 +1901,7 @@ export default {
       this.showNoData = false
       this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
       this.$store.commit('setShowTopoScreen', true)
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         getTopology(this.topologyIndex).lock(0)
         getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
           if (item.animatePlay) {
@@ -1939,6 +1948,7 @@ export default {
         const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
         const domRect = dom ? dom.getBoundingClientRect() : {}
         getTopology(this.topologyIndex).canvasPos = domRect
+        clearTimeout(timer)
       })
     },
 
@@ -2143,7 +2153,7 @@ export default {
     /* tools 方法 */
 
     winResize () {
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
         getTopology(this.topologyIndex).canvasPos = domRect
         if (this.fromOverView) {
@@ -2168,6 +2178,7 @@ export default {
         getTopology(this.topologyIndex).centerView()
         this.getNodesArr()
         domRect = null
+        clearTimeout(timer)
       }, 500)
     },
     contextmenuNone () {

nezha-fronted/src/components/common/rightBox/asset/assetBox.vue

@@ -744,7 +744,7 @@ export default {
             this.$put(this.url, params).then(res => {
               this.prevent_opt.save = false
               if (res.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, false, 'guide.addEndpoint')
+                this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, false, 'tip.endpoint')
                 this.esc(true)
               } else {
                 this.$message.error(res.msg)
@@ -754,7 +754,7 @@ export default {
             this.$post(this.url, params).then(res => {
               this.prevent_opt.save = false
               if (res.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, true, 'guide.addEndpoint')
+                this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { assetId: res.data.id }, true, 'tip.endpoint')
                 this.esc(true)
               } else {
                 this.$message.error(res.msg)

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

@@ -124,7 +124,7 @@ export default {
             this.$put('/dc', param).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, false, 'overall.createCabinet', 'addCabinet')
+                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, false, 'tip.cabinet', 'addCabinet')
                 this.esc(true)
               } else {
                 this.$message.error(response.msg)
@@ -147,7 +147,7 @@ export default {
             this.$post('/dc', param).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, true, 'overall.createCabinet', 'addCabinet')
+                this.messageShow(this.$t('tip.saveSuccess'), '', { dcId: response.data.id, cabinetBoxShow: true }, true, 'tip.cabinet', 'addCabinet')
                 this.esc(true)
               } else {
                 this.$message.error(response.msg)

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

@@ -935,7 +935,7 @@ export default {
               this.$put('monitor/module', params).then(response => {
                 if (response.code === 200) {
                   // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                  this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, false, 'guide.addEndpoint')
+                  this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, false, 'tip.endpoint')
                   this.$store.commit('setReloadFacade')
                   this.esc(true)
                 } else {
@@ -946,7 +946,7 @@ export default {
             } else {
               this.$post('monitor/module', params).then(response => {
                 if (response.code === 200) {
-                  this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, true, 'guide.addEndpoint')
+                  this.messageShow(this.$t('tip.saveSuccess'), '/endpoint', { projectId: this.editModule.projectId, moduleId: response.data.id }, true, 'tip.endpoint')
                   this.$store.commit('setReloadFacade')
                   this.esc(true)
                 } else {

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

@@ -12,7 +12,7 @@
       <div class="container__form">
         <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
           <el-form-item :label='$t("overall.name")' prop="name">
-            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
+            <el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
           </el-form-item>
           <!--remark-->
            <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
@@ -246,7 +246,7 @@
                       v-model="editPanel.param.report.schedule.repeat"
                       id="chart-box-title"
                       v-if="isShow === 3 ? true :false">
-                      <template slot="append">{{ $t("backup.week") }}</template>
+                      <template slot="append">{{ $t("el.datepicker.week") }}</template>
                     </el-input>
                     <el-input
                       size="small"
@@ -317,6 +317,14 @@ export default {
   props: {
     obj: {
       type: Object
+    },
+    isBottom: {
+      type: Boolean,
+      default: false
+    },
+    panelType: {
+      type: String,
+      default: 'dashboard'
     }
   },
   mixins: [editRigthBox],
@@ -506,7 +514,7 @@ export default {
         ...this.editPanel,
         id: this.editPanel.id ? this.editPanel.id : '',
         name: this.editPanel.name,
-        type: 'dashboard',
+        type: this.panelType,
         remark: this.editPanel.remark,
         param: {
           report: {
@@ -612,12 +620,7 @@ export default {
         this.editPanel = JSON.parse(JSON.stringify(n))
         // 如果是空数组 则添加一条变量数据
         if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
-          const temp = [{
+          const temp = []
-            show: true,
-            type: 'query',
-            multi: false,
-            allOption: false
-          }]
           this.$set(this.editPanel.param, 'variables', temp)
         }
       }

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

@@ -72,7 +72,7 @@ export default {
             this.$put('monitor/project', this.editProject).then(response => {
               if (response.code === 200) {
                 // this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, false, 'overall.createModule')
+                this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, false, 'tip.module')
                 this.$store.commit('projectListChange')
                 this.$store.commit('setProject', this.project)
                 this.esc(true)
@@ -84,7 +84,7 @@ export default {
           } else {
             this.$post('monitor/project', this.editProject).then(response => {
               if (response.code === 200) {
-                this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, true, 'overall.createModule')
+                this.messageShow(this.$t('tip.saveSuccess'), '/module', { projectId: response.data.id }, true, 'tip.module')
                 this.$store.commit('projectListChange')
                 this.esc(true)
               } else {

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

@@ -153,11 +153,11 @@ export default {
         if (valid) {
           if (this.editCredential.type === 3) {
             if (this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authNoPriv'
+              this.editCredential.config.securityLevel = 'authNoPriv'
             } else if (this.editCredential.config.authProtocol && this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authPriv'
+              this.editCredential.config.securityLevel = 'authPriv'
             } else {
-              this.editCredential.securityLevel = 'noAuthNoPriv'
+              this.editCredential.config.securityLevel = 'noAuthNoPriv'
             }
           }
           const param = JSON.parse(JSON.stringify(this.editCredential))

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

@@ -146,7 +146,7 @@
              <span class="active-icon gray-bg inline-block"></span>
            </span>
          </span>
-            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'" :isTopoInfo="isTopoInfo">
               <div name="default">
                 <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
               </div>
@@ -220,6 +220,10 @@ export default {
       type: Boolean,
       default: true
     },
+    isTopoInfo: {
+      type: Boolean,
+      default: false
+    },
     endpointTab: Boolean,
     loading: Boolean
   },

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

@@ -317,7 +317,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

nezha-fronted/src/components/page/asset/asset.vue

@@ -750,7 +750,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

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

@@ -195,7 +195,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -94,6 +94,7 @@
               <panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
               <chart-list
                 ref="chartList"
+                :variablesInit="variablesInit"
                 name="panel"
                 :panelId="showPanel.id"
                 :class="{'show-top':showTopBtn, 'is-dashboard': true}"
@@ -673,7 +674,7 @@ export default {
       this.filter.value = this.searchTime[2]
       this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id
       // this.getTableData()
-      this.variablesInit && this.getData(this.filter)
+      this.getData(this.filter)
       const param = {
         panelId: this.panelId,
         nowTimeType: JSON.stringify(this.nowTimeType),
@@ -753,7 +754,7 @@ export default {
             if (!this.showPanel.id) {
               this.showPanel = response.data.list[0]
               this.filter.panelId = this.showPanel.id
-              this.variablesInit && this.getData(this.filter)
+              this.getData(this.filter)
               isInitData = true
             } else {
               handler(response.data.list)
@@ -767,7 +768,7 @@ export default {
           }
           this.pageObj.total = response.data.total
           if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
-            this.variablesInit && this.getData(this.filter)
+            this.getData(this.filter)
           }
           this.$store.state.showPanel.id = 0
           this.$store.state.showPanel.name = ''
@@ -1029,7 +1030,7 @@ export default {
     },
     getPanelData () {
       this.variablesInit = true
-      this.getData(this.filter)
+      this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
     }
   },
   created () {

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -668,7 +668,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -440,7 +440,7 @@ export default {
           } else {
             detailViewRightObj = this.tableData[0]
           }
-          this.detailViewRightObj = detailViewRightObj
+          this.detailViewRightObj = this.$loadsh.cloneDeep(detailViewRightObj)
           this.pageObj.total = response.data.total
           this.pageObj.pages = response.data.pages
           if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {

nezha-fronted/src/http.js

@@ -1,22 +1,40 @@
+import { getUUID } from './components/common/js/common'
 import axios from 'axios'
 const CancelToken = axios.CancelToken // 申明CancelToken
-
 export const requestsArr = []
-axios.interceptors.request.use(config => {
+// 清除掉请求完成的实例 防止占用内存
-  const source = CancelToken.source() // 申明CancelToken,也可new CancelToken.source()实例一个
+const removePending = (config) => {
-  config.cancelToken = source.token // 讲实例对象的token赋予该请求
+  if (!config) {
-  requestsArr.push(source) // 将该实例添加到队列中
+    return false
-  const token = localStorage.getItem('nz-token')
-  if (token) {
-    config.headers.Authorization = token // 请求头token
   }
-  const lang = localStorage.getItem('nz-language')
+  for (const i in requestsArr) {
-  if (lang) {
+    if (requestsArr[i].id === config.id) {
-    config.headers.Language = lang // 请求头token
+      requestsArr.splice(i, 1)
+    }
+  }
+}
+axios.interceptors.request.use(
+  config => {
+    const source = CancelToken.source() // 申明CancelToken,也可new CancelToken.source()实例一个
+    config.cancelToken = source.token // 将实例对象的token赋予该请求
+    const id = getUUID() // 添加唯一识别id 在请求完成时清除requestsArr
+    config.id = id
+    requestsArr.push({
+      id,
+      cancel: source.cancel
+    }) // 将该实例添加到队列中
+    const token = localStorage.getItem('nz-token')
+    if (token) {
+      config.headers.Authorization = token // 请求头token
+    }
+    const lang = localStorage.getItem('nz-language')
+    if (lang) {
+      config.headers.Language = lang // 请求头token
+    }
+    return config
+  }, err => {
+    Promise.reject(err)
   }
-  return config
-},
-err => Promise.reject(err)
 )
 const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008] // 账号锁定等
 const licenceErrorCode = [711001]
@@ -66,9 +84,13 @@ axios.interceptors.response.use(
     } else {
       return response
     }
+    // 请求完成在数组中移除
+    removePending(response.config)
     return response
   },
   error => {
+    // 请求完成在数组中移除
+    removePending(error.config)
     return Promise.reject(error)
   }
 )