feat：添加paenlTab 以及修改snmp的路由

2021-04-22 11:47:24 +08:00
parent c895d2da48
commit 16599d1fe2
8 changed files with 716 additions and 12 deletions
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -44,10 +44,11 @@
        <!--module列表的tab-->
        <endpointTabNew v-if="from === fromRoute.module && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointTabNew>
        <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
-
+        <panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
        <!--endpoint列表的tab-->
        <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
        <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
+        <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
      </div>
    </div>
  </div>
@@ -61,6 +62,7 @@ import endpointQuery from './tabs/endpointQuery'
 import endpointTab from './tabs/endpointTab'
 import endpointTabNew from './tabs/endpointTabNew'
 import panelTab from './tabs/panelTab'
+import panelTabNew from './tabs/panelTabNew'
 import terminalLogRecordTab from './tabs/terminalLogRecordTab'
 import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
 import terminalLogCMDTab from './tabs/terminalLogCMDTab'
@@ -82,7 +84,8 @@ export default {
    'terminal-log-cmd-tab': terminalLogCMDTab,
    endpointTabNew,
    alertMessageTabNew,
-    endpointQuery
+    endpointQuery,
+    panelTabNew
  },
  props: {
    isFullScreen: Boolean, // 是否全屏
@@ -114,13 +117,15 @@ export default {
        module: {
          moduleTabTitle: [
            { prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
-            { prop: 'moduleAlertMessage', name: 'AlertMessage' }
+            { prop: 'moduleAlertMessage', name: 'Alerts' },
+            { prop: 'panel', name: 'Detail' }
          ]
        },
        endpoint: {
          endpointTabTitle: [
-            { prop: 'endpointQuery', name: 'EndpointQuery' },
-            { prop: 'endpointAlertMessage', name: 'AlertMessage' }
+            { prop: 'endpointQuery', name: 'Query' },
+            { prop: 'endpointAlertMessage', name: 'Alerts' },
+            { prop: 'panel', name: 'Detail' }
          ]
        }
      }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -54,7 +54,7 @@
          :formatTime="formatTime"
          :hideSameLabels="hideSameLabels"
          :queryExpression="queryExpression"
-          @changSelection="changSelection"
+          @changSelection="changSelectionF"
        />
      </template>
 <!--      <template v-slot:pagination>-->
@@ -157,9 +157,21 @@ export default {
        }, 700)
      }
    },
-    changSelection (arr) {
+    changSelectionF (arr) {
      this.changSelection = arr
+    },
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
+        } else {
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
        }
+      }, 20)
+    },
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -0,0 +1,681 @@
+<template>
+  <div class="full-width-height">
+    <nz-bottom-data-list
+      :layout="[]"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      @changeTab="changeTab"
+      class="full-width-height"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <div class="panel">
+          <!--图表-->
+          <div class="table-list" id="tableList">
+            <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+              <div class="box-content">
+                <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
+                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
+              </div>
+            </div>
+          </div>
+          <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
+          <transition name="right-box">
+            <chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
+          </transition>
+        </div>
+      </template>
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import ChartBox from '../../../page/dashboard/chartBox'
+import ChartList from '../../../charts/chart-list'
+import bus from '../../../../libs/bus'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+
+export default {
+  name: 'panelTabNew',
+  mixins: [subDataListMixin],
+  props: {
+    from: String,
+    obj: Object,
+    draggable: { type: Boolean, default: true },
+    detail: Object
+  },
+  data () {
+    return {
+      panelLock: true,
+      showTopBtn: false, // top按钮
+      visible: false,
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      tableHover: false,
+      searchTime: bus.getTimezontDateRange(),
+      intervalTimer: null,
+      interval: 0,
+      panel: { // 新增panel
+        id: '',
+        name: ''
+      },
+      chart: {},
+      blankChart: {
+        id: '',
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: 2,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        panel: '',
+        sync: 0
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
+        total: 0
+      },
+      chartsData: [], // 中间部分图表相关数据
+      panelData: [],
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+        ]
+      },
+      searchLabel: {}, // 搜索参数
+      // ---图表相关参数--start
+      dataList: [], // 数据列表
+      // searchName: '', //  搜索名称
+      filter: { // 过滤条件
+        // productId: 0,
+        panelId: 0,
+        start_time: '',
+        end_time: '',
+        searchName: ''
+      },
+      showPanel: {
+        name: '',
+        type: this.from,
+        id: ''
+      },
+      // removeModal: false, // 删除弹出
+      // deleteObj: {}, // 删除对象
+      // ---图表相关参数--end
+      scrollbarWrap: null
+    }
+  },
+  components: {
+    'chart-box': ChartBox,
+    'chart-list': ChartList,
+    nzBottomDataList,
+  },
+  methods: {
+    // 刷新
+    refresh () {
+      this.getTableData(this.obj.id)
+    },
+    refreshTime (st, et) {
+      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+    },
+    panelReloadForDel () {
+      this.getTableData(this.obj.id)
+    },
+    /* 图表相关操作--start */
+    addChart () {
+      this.chart = this.newChart()
+      this.rightBox.show = true
+    },
+    newChart () {
+      return JSON.parse(JSON.stringify(this.blankChart))
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      if (refresh) {
+        this.refresh()
+      }
+    },
+    // 编辑图表信息,打开编辑弹窗
+    editChart (data) {
+      if (!data.param) {
+        data.param = { url: '', threshold: '' }
+      }
+      this.chart = JSON.parse(JSON.stringify(data))
+      this.rightBox.show = true
+    },
+    // 移除图表:弹出确认框询问
+    delChart (data, from) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('panel/' + this.showPanel.id + '/charts?ids=' + data.id).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.deleteSuccess')
+            })
+            this.rightBox.show = false
+            const chartList = this.$refs.chartList.dataList
+            let nextChart = null; let prevChart = null
+            for (let i = 0; i < chartList.length; i++) {
+              if (chartList[i].id === data.id) {
+                chartList.splice(i, 1)
+              }
+              if (data.next != -1) {
+                if (chartList[i].id === data.next) {
+                  nextChart = chartList[i]
+                }
+              }
+              if (data.prev != 0) {
+                if (chartList[i].id === data.prev) {
+                  prevChart = chartList[i]
+                }
+              }
+            }
+            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
+            if (nextChart && prevChart) { // 删除图表为中间位置
+              prevChart.next = nextChart.id
+              nextChart.prev = prevChart.id
+            } else {
+              if (!nextChart) prevChart.next = -1
+              if (!prevChart) nextChart.prev = 0
+            }
+            // this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
+          } else {
+            console.error(response.msg)
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    delChartOk () {
+      this.getData(this.filter)
+    },
+    // 图表创建成功，回调panel页面，进行图表的刷新
+    createSuccess (msg, data, params) {
+      this.getData(this.filter)
+    },
+    // 获取数据,用在子页面
+    getData (params) {
+      if (params.start_time === '' || params.end_time === '') {
+        const now = bus.getTimezontDateRange()
+        const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
+        params.start_time = startTimeTmp
+        params.end_time = endTimeTmp
+        params.from = this.from
+      }
+      if (this.$refs.chartList) {
+        this.$refs.chartList.initData(params)
+      }
+    },
+
+    /* 图表相关操作--end */
+    /* 时间条件查询--start */
+    // 选择日期变化
+    dateChange (val) {
+      // this.searchTime = [...val];
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      this.filter.panelId = this.showPanel.id
+      this.getData(this.filter)
+    },
+    /* 时间条件查询--end */
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 公用操作
+    getTableData (linkId) {
+      if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
+        this.getData(this.filter)
+      } else {
+        this.$get('panel', { type: this.from, link: linkId }).then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list
+            if (this.panelData.length > 0) {
+              this.showPanel.id = this.filter.panelId = this.panelData[0].id
+              this.getData(this.filter)
+            }
+          } else {
+            if (response.msg) {
+              console.error(response.msg)
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              console.error(response.error)
+              this.$message.error(response.error)
+            } else {
+              console.error(response)
+              this.$message.error(response)
+            }
+          }
+        }).catch((error) => {
+          if (error) {
+            console.error(error)
+            this.$message.error(error.toString())
+          }
+        })
+      }
+    },
+    // 定期刷新
+    selectInterval (val) {
+      this.visible = false
+      clearInterval(this.intervalTimer)
+      if (val) {
+        this.interval = val
+        const start = new Date(this.searchTime[1])
+        const now = new Date()
+        const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
+        if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
+          this.getIntervalData(interval)
+        }
+        this.intervalTimer = setInterval(() => {
+          this.getIntervalData(this.interval)
+        }, val * 1000)
+      }
+    },
+    getIntervalData (interval) { // interval:结束时间到现在的秒数
+      const start = new Date(this.searchTime[0])
+      const end = new Date(this.searchTime[1])
+      start.setSeconds(start.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)
+      const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
+      this.searchTime = [startTime, endTime]
+      // 刷新数据
+      this.dateChange()
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.getTableData(this.obj.id)
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.getTableData(this.obj.id)
+    },
+    search: function () {
+      if (this.$refs.chartList) {
+        this.$refs.chartList.searchCharts(this.filter.searchName)
+      }
+    },
+    // 滚动事件触发下拉加载
+    onScroll () {
+      const _self = this
+      this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
+        _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+      }, 300))
+    },
+    focusInput: function () {
+      let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+      this.$refs.queryPanel.focus()
+    },
+    blurInput: function () {
+      if (!this.filter.searchName || this.filter.searchName == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput: function () {
+      this.$refs.queryPanel.focus()
+    },
+    syncChart: function () {
+      if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
+        this.$confirm(this.$t('tip.syncTip'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          const param = {
+            modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
+            assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
+          }
+          this.$put('/model/syncChart', param).then(response => {
+            if (response.code == 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
+              if (this.from == this.$CONSTANTS.fromRoute.asset) {
+                this.refresh()
+              }
+            } else {
+              console.error(response.msg)
+              this.$message.error(response.msg)
+            }
+          })
+        })
+      }
+    },
+    toTop (wrap) {
+      let currentTop = wrap.scrollTop
+      const interval = currentTop / 10
+      const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
+        if (currentTop === 0) {
+          clearInterval(intervalFunc)
+        } else {
+          currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
+          wrap.scrollTop = currentTop
+        }
+      }, 20)
+    },
+    tableListEnter () {
+      this.tableHover = true
+    },
+    tableListLeave () {
+      this.tableHover = false
+    }
+  },
+  mounted: function () {
+    this.scrollbarWrap = this.$refs.dashboardScrollbar
+    this.onScroll()
+    document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
+  },
+  watch: {
+    'filter.searchName': function (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.search()
+      }, 1000)
+    },
+    obj: {
+      immediate: true,
+      handler (n, o) {
+        setTimeout(() => {
+          if (n && n.id) {
+            this.getTableData(n.id)
+          }
+        }, 500)
+      }
+    }
+  },
+  beforeDestroy () {
+    document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
+    document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
+    if (this.scrollbarWrap) {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
+    };
+  }
+}
+</script>
+<style scoped lang="scss">
+  .panel {
+    height: 100%;
+  }
+
+  .panel .el-table {
+    border-radius: 5px;
+  }
+
+  .panel-list-width {
+    width:240px;
+  }
+
+  .panel-dropdown-title {
+    line-height:24px;
+    padding-left:5px;
+    margin-left:10px;
+    margin-top: 3px;
+    text-align:left;
+    border-radius:4px;
+    width:120px;
+    height:24px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .panel-list-title {
+    min-height:24px;
+    width:100px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-list-item {
+    width:190px;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .content-right-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+
+  .content-right-option .nz-icon-delete {
+    color: #F98D9A;
+  }
+
+  .content-right-option .nz-icon-delete:hover {
+    color: #D96D7A;
+  }
+
+  .content-right-option .nz-icon-view {
+    color: #60BEFF;
+  }
+
+  .content-right-option .nz-icon-view:hover {
+    color: #409EFF;
+  }
+
+  /* begin-chart list*/
+  .table-list {
+    margin-top: 6px;
+    overflow-y: auto;
+    height: calc(100% - 56px);
+  }
+
+  .box-content {
+    position: relative;
+  }
+
+  /* end-chart list*/
+  /* begin--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-dropdown-btn {
+    display: inline-block;
+    margin-left: 7px;
+    float: right;
+    color: #60BEFF;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn:hover {
+    color: #409EFF;
+  }
+
+  .panel-dropdown-btn-create {
+    display: inline-block;
+    float: left;
+    font-size: 13px;
+    color: #F98D9A;
+    width: 100%;
+  }
+
+  .panel-dropdown-btn-create:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-btn-delete {
+    color: #F98D9A;
+    font-size: 13px
+  }
+
+  .panel-dropdown-btn-delete:hover {
+    color: #D96D7A;
+  }
+
+  .panel-dropdown-error-message {
+    color: #F98D9A;
+  }
+
+  /* end--Panel-自定义可编辑的el-select下拉框样式*/
+  .panel-select-width {
+    width: 150px;
+  }
+
+  .panel-refresh-interval {
+    margin-right: 5px;
+    float: right;
+  }
+
+  .panel-refresh-interval-select {
+    width: 95px;
+  }
+
+  .panel-calendar {
+    float: right;
+    margin-right: 1px;
+  }
+
+  .top-tools {
+    button {
+      background: $btn-light-background-color;
+      outline: none;
+      border: 1px solid #ccc;
+    }
+
+    button:hover {
+      background: $btn-light-background-color-hover;
+    }
+  }
+
+  .nz-dashboard-dropdown {
+    height: 300px;
+    overflow-y: auto;
+    li {
+      /*padding: 0 20px !important;*/
+      padding-left:20px !important;
+      padding-right:0px !important;
+      width:240px;
+      white-space:nowrap;
+      overflow-x:hidden;
+      text-overflow:ellipsis;
+    }
+  }
+
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .refresh {
+    display: flex;
+    background: #fff;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    margin: 0 10px;
+    border: 1px solid #ccc;
+    background: $btn-light-background-color;
+
+    span {
+      display: inline-block;
+      padding: 1px 8px;
+    }
+  }
+
+  .popover_ul li {
+    padding: 10px 3px;
+    cursor: pointer;
+  }
+
+  .popover_ul li:hover {
+    background: $dropdown-hover-background-color !important;
+    color: $global-text-color-active !important;
+  }
+
+  .nz-dashboard-refresh {
+    border-right: 1px solid #ccc;
+    color: #F0BF84;
+  }
+
+  .nz-dashboard-picker {
+  }
+.full-width-height{
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style lang="scss">
+  .nz-dashboard-dropdown {
+    z-index: 3001 !important;
+  }
+  .panel .top-tools input {
+    background-color: $content-right-background-color;
+  }
+  .panel .top-tools  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
+  .panel-calendar .el-range-editor--mini.el-input__inner {
+    height: 25px !important;
+    border-color: #d8d8d8;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__close-icon {
+    line-height: 18px;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range__icon {
+    display: none;
+  }
+
+  .panel-calendar .el-range-editor--mini .el-range-separator {
+    line-height: 17px;
+  }
+
+  .panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
+    padding-right: 0;
+    vertical-align: top;
+  }
+
+  .nz-dashboard-dropdown .nz-icon-edit {
+    font-size: 12px;
+  }
+</style>
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -6,7 +6,7 @@
  <div class="project-box list-page" v-loading="topologyLoading">
    <!--project主要信息-->
    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
+      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
        <!--工具栏-->
        <span class="project-topology-tool">
          <el-dropdown trigger="click" size="small" placement="bottom-start">
@@ -110,7 +110,7 @@
           </button>
         </span>
      </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
+      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
        <div>{{topologyInfo.name}}</div>
        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 <button @click="changeScreen" class="top-tool-btn float-right"
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -6,7 +6,7 @@
  <div class="project-box list-page" v-loading="topologyLoading">
    <!--project主要信息-->
    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
+      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
        <!--工具栏-->
        <span class="project-topology-tool">
          <el-dropdown trigger="click" size="small" placement="bottom-start">
@@ -110,7 +110,7 @@
           </button>
         </span>
      </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
+      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
        <div>{{topologyInfo.name}}</div>
        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
 <button @click="changeScreen" class="top-tool-btn float-right"
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -185,6 +185,7 @@
                    :tags="item.value"
                    :maxlength="32"
                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                    :placeholder="'add parameter'"
                  />
                </el-form-item>
                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -177,6 +177,7 @@
                    :tags="item.value"
                    :maxlength="32"
                    @tags-changed="(newTags)=>{tagsChange(newTags, index)}"
+                    :placeholder="'add parameter'"
                  />

                </el-form-item>
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -102,6 +102,10 @@ export default new Router({
          path: '/mib/:tab',
          component: resolve => require(['../components/page/config/snmp.vue'], resolve)
        },
+        {
+          path: '/snmp',
+          component: resolve => require(['../components/page/config/snmp.vue'], resolve)
+        },
        {
          path: '/system',
          component: resolve => require(['../components/page/config/system.vue'], resolve)