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

2022-07-11 10:10:33 +08:00
parent bbfad7106d a0a1d4b498
commit 6872818144
36 changed files with 471 additions and 236 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -439,20 +439,36 @@ input,
 textarea {
  font-family: Inter-Regular !important;
 }
-.message-next {
-  vertical-align: bottom;
-  float: unset;
-  font-size: 10px;
-  margin-left: 190px;
-  .message-next-continue {
-    color: $--color-text-primary;
-    font-weight: 400;
+.custom-message{
+  display: flex;
+  align-items: center;
+  .message-right {
+    padding-right: 128px;
+    position: relative;
+  }
+  .message-right.hidden{
+    display: none;
+  }
+  .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;
    }
-  .message-next-content {
-    color: $--color-text-link;
-    font-weight: 600;
  }
 }
+
 .document-copy-block {
  display: flex;
  flex-wrap: nowrap;
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/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;
+  }
+}
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/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;
+}
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/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{
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
@@ -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{
--- a/nezha-fronted/src/assets/css/components/common/panel/panelVariables.scss
+++ b/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: calc(100% - 7px);
-    white-space: nowrap;
-    max-width: 200px;
-    text-overflow: ellipsis;
-    padding-right: 5px;
-    height: 30px;
+    width: 150px;
+    //position: relative;
+  }
+  .choose-box .no-select {
+    width: 150px;
    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;
-  max-width: 220px;
+   width: 200px;
+  .pop-list {
+    max-height: 360px;
+  }
  .el-dropdown-menu__item {
    padding: 0 5px 0 20px;
    width: 100%;
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/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;
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/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: {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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
--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/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`
          }
        }
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/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') }
      ]
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/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) {
--- a/nezha-fronted/src/components/common/mixin/detailViewMixin.js
+++ b/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') {
--- a/nezha-fronted/src/components/common/mixin/editRigthBox.js
+++ b/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')
-      assetAdd.addEventListener('click', this.saveNext)
+      // 对message赋值
+      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 () {
--- a/nezha-fronted/src/components/common/myDatePicker/src/panel/date-range.vue
+++ b/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">
--- a/nezha-fronted/src/components/common/panel/panelVariables.vue
+++ b/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,11 +29,13 @@
          </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': ''">
+            <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>
+        </div>
      </el-popover>
    </div>
  </div>
@@ -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) {
--- a/nezha-fronted/src/components/common/popBox/selectDashboard.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -1,9 +1,13 @@
 <template>
+  <div>
    <el-dropdown trigger="click" :size="size">
      <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
        <i class="nz-icon nz-icon-more2"></i>
      </button>
      <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+        <el-dropdown-item  v-if="showLock">
+          <div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
+        </el-dropdown-item>
        <el-dropdown-item  v-if="showLock">
          <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>
@@ -121,13 +125,21 @@
        </div>
      </el-dialog>
    </el-dropdown>
+    <transition name="right-box">
+      <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
+    </transition>
+  </div>
 </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: {
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/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"
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/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 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 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 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 () {
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/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 {
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/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 = [{
-            show: true,
-            type: 'query',
-            multi: false,
-            allOption: false
-          }]
+          const temp = []
          this.$set(this.editPanel.param, 'variables', temp)
        }
      }
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/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 {
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/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))
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/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
  },
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/config/terminalLog.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue
+++ b/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) {
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -1,11 +1,28 @@
+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 removePending = (config) => {
+  if (!config) {
+    return false
+  }
+  for (const i in requestsArr) {
+    if (requestsArr[i].id === config.id) {
+      requestsArr.splice(i, 1)
+    }
+  }
+}
+axios.interceptors.request.use(
+  config => {
    const source = CancelToken.source() // 申明CancelToken,也可new CancelToken.source()实例一个
-  config.cancelToken = source.token // 讲实例对象的token赋予该请求
-  requestsArr.push(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
@@ -15,8 +32,9 @@ axios.interceptors.request.use(config => {
      config.headers.Language = lang // 请求头token
    }
    return config
-},
-err => Promise.reject(err)
+  }, 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)
  }
 )