NEZ-598 alert message 页面修改

nezha-fronted/package.json

@@ -5,7 +5,7 @@
   "author": "",
   "private": true,
   "scripts": {
-    "dev": "node --max-old-space-size=6000 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "build": "node build/build.js",
     "lint": "eslint --fix --ext .js,.vue src"

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

@@ -100,6 +100,10 @@
   line-height: 20px;
   font-weight: 400;
   margin-top: 3px;
+  max-width: 30%;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
 }
 .timezone-offset{
   display: inline-block;

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

@@ -1,7 +1,8 @@
 /*列表table通用样式*/
 .list-page {
-  background-color: #f6f6f6;
   height: 100%;
+  width: 100%;
+  background-color: #f6f6f6;
 
   .main-list {
     background-color: white;
@@ -9,6 +10,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 100%;
     z-index: 0;
   }
   .main-container {
@@ -53,7 +55,10 @@
     }
     .top-tool-btn-group {
       display: flex;
-
+      .top-tool-btn:not(:last-of-type):not(:first-of-type) {
+        border-left: none;
+        border-radius: 0;
+      }
       .top-tool-btn:first-of-type:not(:last-of-type) {
         border-radius: $--button-border-radius 0 0 $--button-border-radius;
       }
@@ -190,7 +195,7 @@
     .el-table {
       position: absolute;
       width: calc(100% - 40px);
-      border: 1px solid #E7EAED;
+      border: 1px solid $--right-box-border-color;
       border-bottom: none;
 
       .caret-wrapper {
@@ -209,10 +214,10 @@
 
       td {
         padding: 9px 0;
-        border-bottom: 1px solid #E7EAED;
+        border-bottom: 1px solid $--right-box-border-color;
       }
       th {
-        border-color: #E7EAED;
+        border-color: $--right-box-border-color;
       }
       .el-table__header th:first-of-type {
         border-left: none;
@@ -221,7 +226,7 @@
         position: fixed;
         right: 31px;
         height: 49px;
-        border-bottom: 1px solid #E7EAED;
+        border-bottom: 1px solid $--right-box-border-color;
         background-color: white;
       }
       thead {
@@ -284,7 +289,7 @@
   }
   /* start--覆盖el-table边框、gutter等样式 */
   .el-table__body-wrapper, .el-table__fixed-body-wrapper {
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;
 
     .cell {
       color: #333;
@@ -298,20 +303,20 @@
   }
   /* 最后一列用box-shadow模拟边框 */
   .el-table:not(.no-operation).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;
   }
   .el-table:not(.no-operation).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
     border-right: none !important;
-    box-shadow: 1px 0 #E7EAED;
+    box-shadow: 1px 0 $--right-box-border-color;
   }
   .el-table__fixed-body-wrapper {
     td:not(.is-hidden) {
-      border-left: 1px solid #E7EAED;
+      border-left: 1px solid $--right-box-border-color;
     }
   }
   .el-table__fixed-header-wrapper {
     th:not(.is-hidden) {
-      border-left: 1px solid #E7EAED;
+      border-left: 1px solid $--right-box-border-color;
     }
     th:last-of-type {
       border-right: none !important;

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

@@ -50,6 +50,8 @@ $--monitor-color: #98AEC5; //全局停用色灰色
   warningColor: var(--theme-color);
   suspendedColor: $--suspended-color;
   monitorColor: $--monitor-color;
+  primaryBorderColor: $--primary-border-color;
+  rightBoxBorderColor: $--right-box-border-color;
 }
 /* element-ui变量覆盖 */
 /*$--color-primary: red; // 覆盖element-ui的主题色

nezha-fronted/src/assets/stylus/main.scss

@@ -1883,13 +1883,6 @@ li{
 .nz-table .el-table__fixed-body-wrapper {
   height: calc(100% - 33px) !important;
 }
-.ant-table-scroll {
-  max-height: unset !important;
-  height: 100%;
-}
-.ant-table-scroll .el-table {
-  //height: 100% !important;
-}
 /*model侧滑中下拉框*/
 .autocomplete-dropdown {
   display: flex;
@@ -2073,27 +2066,6 @@ li{
   line-height: 20px;
 }
 
-.right-bottom-zoom{
-  position: absolute;
-  top: calc(100% - 100px);
-  left: calc(100% - 45px);
-  height: 90px;
-  width: 35px;
-  border: 1px solid #E7EAED;
-  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  .zoom-option{
-    width: 100%;
-    height: 50%;
-    opacity: 0.42;
-    background: #FFF;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-  .zoom-option:hover{
-    cursor: pointer;
-  }
-}
 .nz-icon-arrow-down{
   font-size: 14px;
 }

nezha-fronted/src/components/charts/chartPreview.vue

@@ -182,6 +182,7 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
+import moment from "moment-timezone";
 export default {
   name: 'chartPreview',
   components: {
@@ -878,7 +879,8 @@ export default {
               const tip = legend[item.seriesIndex]
               const color = self.bgColorList[item.seriesIndex]
               if (i === 0) {
-                const tData = new Date(item.data[0])
+                const value = bus.computeTimezone(item.data[0])
+                const tData = new Date(value)
                 str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
                     [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
                 str += '<br/>'

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -199,6 +199,7 @@ import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartConfig from '../page/dashboard/overview/chartConfig'
 import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
 import { getMetricTypeValue } from '../common/js/tools'
+import moment from 'moment-timezone'
 
 export default {
   name: 'lineChartBlock',
@@ -742,7 +743,7 @@ export default {
               const tip = legend[item.seriesIndex]
               const color = self.bgColorList[item.seriesIndex]
               if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                const value = item.data[0]
+                const value = bus.computeTimezone(item.data[0])
                 const tData = new Date(value)
                 str += '<div style="margin-bottom: 5px">'
                 str += bus.timeFormate(tData)
@@ -752,7 +753,7 @@ export default {
                 if (i !== 0) {
                   str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
                 }
-                const value = item.data[0] - self.minusTime
+                const value = bus.computeTimezone(item.data[0])
                 const tData = new Date(value)
                 str += '<div style="margin-bottom: 5px;margin-top: 5px">'
                 str += bus.timeFormate(tData)
@@ -834,7 +835,11 @@ export default {
             show: true,
             fontSize: 10,
             formatter: function (value) {
-              const tData = new Date(value)
+              let offset = localStorage.getItem('nz-sys-timezone')
+              offset = moment.tz(offset).format('Z')
+              offset = Number.parseInt(offset)
+              const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
+              const tData = new Date(value - localOffset + offset * 60 * 60 * 1000)
               let hour = tData.getHours()
               hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
               let minute = tData.getMinutes()
@@ -1011,7 +1016,7 @@ export default {
                       const tip = self.legendMagicType[item.seriesIndex]
                       const color = self.bgColorList[item.seriesIndex]
                       if (i === 0) {
-                        const value = item.data[0]
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px">'
                         str += bus.timeFormate(tData)
@@ -1179,7 +1184,7 @@ export default {
                       const tip = self.legendMagicType[item.seriesIndex]
                       const color = self.bgColorList[item.seriesIndex]
                       if (i === 0 && tip.alias.indexOf('Previous ') === -1) {
-                        const value = item.data[0]
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px">'
                         str += bus.timeFormate(tData)
@@ -1189,7 +1194,7 @@ export default {
                         if (i !== 0) {
                           str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
                         }
-                        const value = item.data[0] - self.minusTime
+                        const value = bus.computeTimezone(item.data[0])
                         const tData = new Date(value)
                         str += '<div style="margin-bottom: 5px;margin-top: 5px">'
                         str += bus.timeFormate(tData)

nezha-fronted/src/components/cli/webSSH.vue

@@ -201,7 +201,7 @@
             <el-form-item :label='$t("overall.asset")' prop="assetId" class="flex">
               <v-selectpage
                 style="flex: 1"
-                :data="assetData"
+                data="asset/asset"
                 :tb-columns="columns"
                 key-field="id"
                 show-field="manageIp"
@@ -835,11 +835,16 @@ export default {
       })
     },
     resultFormat (resp) {
-      if (resp && resp.data) return resp.data.values.gridResult
+      if (resp && resp.data) {
+        const assetData = {}
+        assetData.list = resp.data.list
+        assetData.totalRow = resp.data.total
+        return assetData
+      }
     },
     assetShowChange () {
       this.assetShow = true
-      this.getAssetData()
+      // this.getAssetData()
     },
     getAssetData () {
       this.assetLoading = true

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

@@ -20,6 +20,7 @@
       <div class="sub-list__tabs">
         <!--机柜-->
         <cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
+        <alertMessageTabNew v-if="from === fromRoute.dc && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.dc.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
         <!--告警信息-->
         <alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
         <!--asset页的endpoint列表-->
@@ -172,11 +173,18 @@ export default {
         dc: {
           cabinet: [
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
-            { prop: 'asset', name: this.$t('asset.assets'), active: false }
+            { prop: 'asset', name: this.$t('asset.assets'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
           ],
           asset: [
             { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
-            { prop: 'asset', name: this.$t('asset.assets'), active: true }
+            { prop: 'asset', name: this.$t('asset.assets'), active: true },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
+          ],
+          alertMessage: [
+            { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
+            { prop: 'asset', name: this.$t('asset.assets'), active: false },
+            { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
           ]
         }
 

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

@@ -56,7 +56,7 @@ export default {
   },
   data () {
     return {
-      url: '/cabinet',
+      url: 'dc/cabinet',
       tableId: 'cabinetTable',
       blankObject: {
         id: '',
@@ -92,6 +92,9 @@ export default {
       }
     }
   },
+  created() {
+    console.log(this.$route);
+  },
   methods: {
     // 切换tab
     changeTab (tab) {

nezha-fronted/src/components/common/js/constants.js

@@ -89,7 +89,7 @@ export const asset = {
       non: 0,
       ssh: 1,
       telnet: 2
-    },
+    }
   },
   authProtocolOptions: [
     { value: 1, label: 'SSH' },

nezha-fronted/src/components/common/js/tools.js

@@ -2,6 +2,7 @@ import { getChart } from './common'
 import MessageBox from 'element-ui/packages/message-box/src/main'
 import i18n from '../i18n'
 import bus from '@/libs/bus'
+import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
 const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
@@ -281,7 +282,13 @@ export const bottomBoxWindow = {
   }
 }
 export function stringTimeParseToUnix (stringTime) {
-  const time = new Date(stringTime).getTime()
+  let time = new Date(stringTime).getTime()
+  let offset = localStorage.getItem('nz-sys-timezone')
+  offset = moment.tz(offset).format('Z')
+  offset = Number.parseInt(offset)
+  const localOffset = new Date().getTimezoneOffset() * 60 * 1000 * -1 // 默认 一分钟显示时区偏移的结果
+  console.log(offset,localOffset, time)
+  time = time + localOffset - offset * 60 * 60 * 1000
   return time / 1000
 }
 export function getTime (size, unit) { // 计算时间

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -212,7 +212,7 @@ export default {
   justify-content: space-between;
   padding: 15px 0 15px 17px;
   box-sizing: border-box;
-  border: 1px solid #E7EAED;
+  border: 1px solid $--right-box-border-color;
   background-color: #FFFFFF;
   overflow-x: hidden;
   overflow-y: auto;

nezha-fronted/src/components/common/language/cn.js

@@ -2,6 +2,7 @@ import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言
 const cn = {
   overall: {
     dashboard: '仪表盘',
+    dc: '数据中心',
     project: '系统',
     monitor: '监控',
     alert: '告警',
@@ -289,7 +290,7 @@ const cn = {
         tooltip: 'Tooltip',
         displayChart: '图表',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart 模板',
         selectAsset: '请选择Asset',
         selectEndpoint: '请选择Endpoint'
@@ -515,6 +516,7 @@ const cn = {
   },
   asset: {
     asset: '资产',
+    alertNum: '资产编号',
     assetType: '资产类型', // '资产类型'
     batchEditAsset: '批量修改资产',
     selectAsset: '已选择的资产',
@@ -677,6 +679,14 @@ const cn = {
         type: 'Agent类型'
       }
     },
+    agent:{
+      name: '名称',
+      type: '类型',
+      createProm: '创建代理服务',
+      agent: {
+        agent: '代理'
+      }
+    },
     terminallog: {
       terminallog: '终端日志',
       status: '状态',
@@ -745,6 +755,7 @@ const cn = {
       assets: '资产',
       remark: '备注',
       cabinets: '机柜',
+      alert: '警报',
       traffic: {
         title: '流量配置',
         add: '添加',
@@ -769,7 +780,7 @@ const cn = {
     model: {
       model: '资产型号',
       name: '资产型号',
-      barnd: '品牌',
+      brand: '品牌',
       ChartTemplate: '图表模板',
       assetNum: '资产编号',
       editModel: '编辑型号',
@@ -827,7 +838,8 @@ const cn = {
         auth: '认证',
         method: '方式',
         encryption: '加密',
-        pin: '密码'
+        pin: '密码',
+        create: '创建SNMP'
       }
     },
     system: {
@@ -969,6 +981,7 @@ const cn = {
     assetLabel: {
       example: '示例',
       assetLabel: '资产标签',
+      addMeta: '创建标签',
       all: '全部',
       addGroup: '创建分组',
       editGroup: '编辑分组',
@@ -1027,18 +1040,20 @@ const cn = {
       create: '创建表达式模板',
       expressionError: '请填写表达式',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart 模板',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
     alert: '告警',
     message: '告警信息',
+    alertMessage: '告警信息',
     rule: '告警规则',
+    alertRule: '告警规则',
     alertList: '告警信息',
     alertConfig: '告警规则',
     alertName: '告警名称',
@@ -1092,11 +1107,12 @@ const cn = {
       }
     },
     silence: {
+      name:'名称',
       silence: '告警静默',
       create: '创建告警静默',
       edit: '修改告警静默',
       time: '时间',
-      matcher: 'Matcher',
+      matchers: 'matchers',
       reason: '描述',
       selectTime: '请选择时间',
       selectMather: '必填项',

nezha-fronted/src/components/common/language/en.js

@@ -52,23 +52,23 @@ const en = {
     unavailable: 'Unavailable',
     available: 'Available',
     changePin: 'Change password', // 修改密码
-    createChart: 'Create chart',
+    createChart: 'New chart',
-    createProject: 'Create project',
+    createProject: 'New project',
-    createEndpoint: 'Create endpoint',
+    createEndpoint: 'New endpoint',
     batchEndpoint: 'Batch modify endpoint',
-    createAsset: 'Create asset',
+    createAsset: 'New asset',
-    createAlertRule: 'Create alert rule',
+    createAlertRule: 'New alert rule',
-    createUser: 'Create user',
+    createUser: 'New user',
-    createRole: 'Create role',
+    createRole: 'New role',
-    createPrometheusServer: 'Create prometheus server',
+    createPrometheusServer: 'New prometheus server',
-    createDatacenter: 'Create Data center',
+    createDatacenter: 'New Data center',
-    createCabinet: 'Create cabinet',
+    createCabinet: 'New cabinet',
-    createModel: 'Create model',
+    createModel: 'New model',
-    createModule: 'Create module',
+    createModule: 'New module',
-    createMib: 'Create MIB',
+    createMib: 'New MIB',
-    createAssetType: 'Create asset type',
+    createAssetType: 'New asset type',
-    createAssetState: 'Create asset state',
+    createAssetState: 'New asset state',
-    createTemplate: 'Create template',
+    createTemplate: 'New template',
     exportExcel: 'Export',
     importExcel: 'Import',
     importExcelLower: 'import',
@@ -210,7 +210,7 @@ const en = {
         panelId: 'ID' // ID
       },
       // 图表-侧滑框
-      createChartTitle: 'New chart', // "新增图表"
+      createChartTitle: 'New chart template', // "新增图表"
       editChartTitle: 'Edit', // "编辑图表"
       chartForm: {
         chartId: 'ID',
@@ -299,7 +299,7 @@ const en = {
         tooltip: 'Tooltip',
         displayChart: 'Display chart',
         aggregation: 'Aggregation',
-        varType: 'Vartype',
+        varType: 'Variable type',
         pid: 'Chart template',
         selectAsset: 'Please select the Asset',
         selectEndpoint: 'Please select the Endpoint'
@@ -614,7 +614,7 @@ const en = {
       roles: 'Role',
       language: 'Language', // "语言"
       receiver: 'Receiver', // "用户组"
-      createTime: 'Create time', // "创建时间"
+      createTime: 'New time', // "创建时间"
       enable: 'Enable', // "可用"
       option: 'Operation', // "操作"
       lastLoginTime: 'Last login time', // 最后登录时间
@@ -645,7 +645,7 @@ const en = {
       option: 'Operation', // "操作"
       permission: 'Permission',
       menu: 'Menu',
-      createRole: 'Create role',
+      createRole: 'New role',
       editRole: 'Edit role',
       remark: 'Remark'
     },
@@ -664,7 +664,7 @@ const en = {
       tab: 'Tab',
       parent: 'Previous menu',
       mainMenu: 'Primary menu',
-      createMenu: 'Create menu',
+      createMenu: 'New menu',
       editMenu: 'Edit menu',
       orderNum: 'Order',
       icon: 'Icon'
@@ -677,6 +677,7 @@ const en = {
       type: 'Type', // "类别"
       checkTime: 'Check time',
       dataCenter: 'Data center',
+      name : 'Name',
       agent: {
         agent: 'Agent',
         title: 'Download agent',
@@ -695,9 +696,10 @@ const en = {
       assets: 'Assets',
       remark: 'Remark',
       cabinets: 'Cabinets',
-      createDc: 'Create data center',
+      createDc: 'Nre data center',
       editDc: 'Edit data center',
       editCabinet: 'Edit cabinet',
+      alert: 'Alert',
       traffic: {
         title: 'Traffic Setting',
         add: 'Add',
@@ -714,16 +716,16 @@ const en = {
     },
     cabinet: {
       editCabinet: 'Edit Cabinet',
-      createCabinet: 'Create Cabinet'
+      createCabinet: 'New Cabinet'
     },
     model: {
       model: 'Asset model',
       brand: 'Brand',
       name: 'Name',
-      ChartTemplate: 'ChartTemplate',
+      ChartTemplate: 'Chart template',
-      assetNum: 'AssetNum',
+      assetNum: 'Asset',
       editModel: 'Edit model',
-      createModel: 'Add model',
+      createModel: 'New model',
       remark: 'Description',
       type: 'Type'
     },
@@ -826,7 +828,7 @@ const en = {
       editMib: 'Edit MIB',
       models: 'Models',
       modelTip: 'Please select models',
-      createMib: 'Create MIB',
+      createMib: 'New MIB',
       mibFiles: 'MIB file',
       uploadTip: 'Please upload MIB file',
       requiredMibFile: 'MIB file is required',
@@ -946,7 +948,7 @@ const en = {
         nameMaxLength: 'The length should be less than 64',
         uriRequired: 'Required',
         filePathReg: 'Please enter the correct file path',
-        create: 'Create notification',
+        create: 'New notification',
         invalid: 'Invalid',
         valid: 'Valid'
       },
@@ -980,28 +982,28 @@ const en = {
       authProtocol:'AuthProtocol',
       snmpEnable: 'SnmpEnable',
       snmpCollect:'SnmpCollect',
-      createModel:'Add Type',
+      createModel:'New Type',
       sshCollect:'SshCollect',
       sshCollectScript:'SshCollectScript',
       parent: 'Parent',
       pname: 'Parent name',
       editAssetType: 'Edit asset type',
-      createAssetType: 'Create asset type'
+      createAssetType: 'New asset type'
     },
     assetState: {
       assetState: 'Asset State',
       monitor: 'Monitor',
       alert: 'Alert',
       assetTotal: 'Total assets',
-      createAssetState: 'Create asset state',
+      createAssetState: 'New asset state',
       editAssetState: 'Edit asset state'
     },
     assetLabel: {
-      addMeta:'Add lables',
+      addMeta: 'Add labels',
       example: 'Example',
       assetLabel: 'Asset labels',
       all: 'All',
-      addGroup: 'Create group',
+      addGroup: 'Add group',
       editGroup: 'Edit group',
       addLabel: 'Create label',
       editLabel: 'Edit label',
@@ -1058,12 +1060,12 @@ const en = {
       create: 'New expression template',
       expressionError: 'Please fill in the "expression" value',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     },
     chartTemp: {
       chartTemp: 'Chart template',
       type: 'Type',
-      varType: 'varType'
+      varType: 'Variable type'
     }
   },
   alert: {
@@ -1072,7 +1074,7 @@ const en = {
     rule: 'Rule', // '规则'
     alertMessage: 'Alert message', // "告警信息"
     alertRule: 'Alert rule', // "告警规则"
-    alertName: 'Alert name', // "告警名称"
+    alertName: 'Name', // "告警名称"
     severity: 'Priority', // "等级"
     description: 'Description', // "描述"
     summary: 'Summary', // "概要"
@@ -1122,14 +1124,15 @@ const en = {
         alertRuleInfo: 'Alert rule information',
         alertNumTrend: 'Alert num trend',
         affectEntity: 'Affect entity'
-      }
+      },
     },
     silence: {
+      name:'Name',
       silence: 'Alert silence',
       create: 'New alert silence',
       edit: 'Edit alert silence',
       time: 'Time',
-      matcher: 'Matcher',
+      matchers: 'matchers',
       reason: 'Description',
       selectTime: 'Please select time',
       selectMather: 'Required',
@@ -1180,7 +1183,7 @@ const en = {
       alerts: 'Alerts',
       asset: 'Asset',
       editEndpoint: 'Edit endpoint',
-      createEndpoint: 'Created endpoint',
+      createEndpoint: 'New endpoint',
       batchEndpoint: 'Batch Endpoint',
       endpointName: 'Endpoint name',
       tip: {

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

@@ -64,6 +64,7 @@ export default {
       this.$emit('showBottomBox', targetTab, JSON.parse(JSON.stringify(row)))
     },
     tableDataSort (item) {
+      console.log(item)
       let orderBy = ''
       if (item.order === 'ascending') {
         orderBy = item.prop
@@ -71,6 +72,7 @@ export default {
       if (item.order === 'descending') {
         orderBy = '-' + item.prop
       }
+      console.log(orderBy)
       this.$emit('orderBy', orderBy)
     }
   }

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

@@ -169,8 +169,8 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
 <!--        <el-button-->
 <!--          size="mini"-->
 <!--          type="text"-->

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

@@ -123,8 +123,8 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <el-button
           size="mini"
           type="text"

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

@@ -73,8 +73,8 @@
           </div>
         </div>
         <div class="el-picker-panel__footer" v-if="showTime">
-          <span class="timezone-area">{{timezone}}</span>
+          <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-          <span class="timezone-offset">{{timezoneOffset}}</span>
+          <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         </div>
       </div>
     </div>

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

@@ -41,8 +41,8 @@
         </div>
       </div>
       <div class="el-time-panel__footer">
-        <span class="timezone-area">{{timezone}}</span>
+        <span class="timezone-area" :title='timezone'>{{timezone}}</span>
-        <span class="timezone-offset">{{timezoneOffset}}</span>
+        <span class="timezone-offset">UTC {{timezoneOffset}}</span>
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/myDatePicker/src/panel/time.vue

@@ -16,8 +16,8 @@
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
-<!--        <span class="timezone-area">{{timezone}}</span>-->
+<!--        <span class="timezone-area" :title='timezone'>{{timezone}}</span>-->
-<!--        <span class="timezone-offset">{{timezoneOffset}}</span>-->
+<!--        <span class="timezone-offset">UTC {{timezoneOffset}}</span>-->
         <button
           type="button"
           class="el-time-panel__btn cancel"

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -22,15 +22,15 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <!--iconToolState-->
+<!--          &lt;!&ndash;iconToolState&ndash;&gt;-->
-          <el-form-item :label="'Icon state'" class="half-form-item" prop="type" v-if="!selection.pen.type">
+<!--          <el-form-item :label="'Icon state'" class="half-form-item" prop="type" v-if="!selection.pen.type">-->
-            <el-switch
+<!--            <el-switch-->
-              v-model="selection.pen.data.iconToolState"
+<!--              v-model="selection.pen.data.iconToolState"-->
-              :active-value="true"
+<!--              :active-value="true"-->
-              :inactive-value="false"
+<!--              :inactive-value="false"-->
-              active-color="#ee9d3f"
+<!--              active-color="#ee9d3f"-->
-            />
+<!--            />-->
-          </el-form-item>
+<!--          </el-form-item>-->
 
           <!--metric-->
           <div class="right-box-sub-title" style="margin-bottom: 10px">
@@ -57,7 +57,7 @@
               :from-father-data="true"
               @removeExpression="removeExpression"
             ></promql-input>
-            <el-row>
+            <el-row style="margin-top: 10px">
               <template>
                 <el-col class="legend-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
@@ -1579,6 +1579,12 @@ export default {
   }
 </style>
 <style lang="scss" scoped>
+  /deep/ .metric-selector-input-box{
+    width: calc(100% - 120px) !important;
+  }
+  /deep/ .query-row .input-box{
+    margin: 0;
+  }
   .legend-title{
     width: 100px;
     margin-right: 10px;
@@ -1718,20 +1724,9 @@ export default {
       padding: 2px 6px;
       color: #EC7F66;
     }
-    /*.form-row-item .nz-icon-minus-position {
+    .form-row-item .nz-icon-minus-position {
-      position: absolute;
+      right: -44px;
-      top: 50%;
-      right: -55px;
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
-      background: rgba(236, 127, 102, 0.1);
-      border-radius: 4px;
-      padding: 0 5px;
-
-      .nz-icon-minus {
-        color: #EC7F66;
     }
-    }*/
 
     .tooltip-box {
       padding-left: 10px;

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

@@ -1,12 +1,12 @@
 <style>
-@import "./L5/css/iconfont.css";
+  @import "./L5/css/iconfont.css";
-@import "./L5/css/props.css";
+  @import "./L5/css/props.css";
 </style>
 <template>
   <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
-    <!--project主要信息-->
+    <div class="main-list">
-    <div v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }" class="project-title">
+      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
+        <div v-if="editTopologyFlag" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
           <!--工具栏-->
           <span class="project-topology-tool">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -110,19 +110,9 @@
            </button>
          </span>
         </div>
-      <div v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools" style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px">
+        <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
           <div>{{topologyInfo.name}}</div>
-        <span v-show="!editTopologyFlag&&!fromPrev&&!fromOverView" class="edit-topologyLine" style="padding-top: 5px">
+          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
-<button class="top-tool-btn float-right" style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;"
-        type="button" @click="changeScreen"
->
-                  <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
-        </button>
-        <button v-has="'project_topo_update'" class="top-tool-btn float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" @click="editTopology"
-        >
-                  <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
-        </button>
             <pick-time
               v-show="!editTopologyFlag"
               ref="pickTime"
@@ -130,38 +120,52 @@
               :refresh-data-func="dateChange"
               :showTimePicker="false"
               :use-chart-unit="false"
-            class="float-right pickTime top-tool-btn-group">
+              class="pickTime margin-r-10">
             </pick-time>
-
+            <button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
-      </span>
+              <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
+            </button>
+            <button class="top-tool-btn" type="button" @click="changeScreen">
+              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
+            </button>
           </div>
         </div>
-    <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
+        <div class="nz-table2">
+          <!--悬浮network部分-->
+          <div class="network-info">
+            <div v-if="popDataShow.main">
+              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+            </div>
+            <div v-if="popDataShow.info">
+              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+            </div>
+          </div>
+          <div :class="['page',fromOverView?'overview-page':'']" :style="`border: 1px solid ${theme.rightBoxBorderColor};`">
             <!--画布部分-->
-      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
             <!--设置属性-->
-      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
+            <div v-if="editTopologyFlag&&toolShow.attr" class="props">
-        <CanvasProps :selection.sync="props"
+              <CanvasProps ref="CanvasProps"
-                     @change="onUpdateProps"
-                     @animate="animateCanvas"
-                     @changeProjectTitle="changeProjectTitle"
-                     @notModuleIDArrChange="notModuleIDArrChange"
                            :index="topologyIndex"
-                     @del="delPen"
                            :modules="modules"
-                     ref="CanvasProps">
+                           :selection.sync="props"
+                           @animate="animateCanvas"
+                           @change="onUpdateProps"
+                           @changeProjectTitle="changeProjectTitle"
+                           @del="delPen"
+                           @notModuleIDArrChange="notModuleIDArrChange">
               </CanvasProps>
             </div>
             <!--所有节点上的小图标-->
-      <div v-for="(item,index) in nodesArr" :key="index"
+            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
+                 :key="index"
                  :style="{position: 'absolute',top:item.rect.y - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
-           v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
                  class="network-pop"
             >
 
               <i
-          :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                 :ref="'modelTopId'+index"
+                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                 @click="showNodeTools(index,item)"
               >
                 <i class="nz-icon nz-icon-model"></i>
@@ -183,6 +187,7 @@
             </div>
             <!--提示未添加module id的块-->
             <div v-for="(item, index) in notModuleIDArr"
+                 v-if="editTopologyFlag&&!fromPrev"
                  :key="index"
                  :style="{
              position: 'absolute',
@@ -190,23 +195,35 @@
              left:item.rect.x - 10+'px',
              transform:'scale('+(fromOverView?penToolTipScale:1)+')',
            }"
-           v-if="editTopologyFlag&&!fromPrev"
             >
-        <div class="module-rect-top" :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}"></div>
+              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
-        <div class="module-rect-right" :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}"></div>
+              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
-        <div class="module-rect-bottom" :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}"></div>
+              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
-        <div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
+              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
             </div>
             <!--节点连线相关的 tooltip-->
-      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+            <div v-if="tooltipPosition.show&&!editTopologyFlag"
-           v-if="tooltipPosition.show&&!editTopologyFlag"
-           @mouseover="tooltipOver"
-           @mouseout="tooltipOut"
                  ref="topoTooltip"
+                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+                 @mouseout="tooltipOut"
+                 @mouseover="tooltipOver"
             >
               <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
             </div>
           </div>
+          <!--endpoint-->
+          <transition name="right-box">
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+                           @close="popDataShowUpdate('',true)">endpoint
+            </endpointTable>
+          </transition>
+          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
+            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+            <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!--<div class="left-bottom" v-if="editTopologyFlag">-->
     <!--<div class="title">小提示</div>-->
     <!--<ul class="group">-->
@@ -216,21 +233,6 @@
     <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
     <!--</ul>-->
     <!--</div>-->
-    <!--悬浮network部分-->
-    <div class="network-info">
-      <div v-if="popDataShow.main">
-        <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-      </div>
-      <div v-if="popDataShow.info">
-        <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-      </div>
-    </div>
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
-                     @close="popDataShowUpdate('',true)">endpoint
-      </endpointTable>
-    </transition>
     <!--asset-->
     <transition name="right-box">
       <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -322,10 +324,6 @@
       </div>
 
     </el-dialog>
-    <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
-      <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-      <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-    </div>
   </div>
 </template>
 
@@ -1549,7 +1547,6 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
-      console.log(this.file)
       if (this.uploadPic.name) {
         form.append('name', this.uploadPic.name)
       } else {
@@ -1562,7 +1559,7 @@ export default {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}/0`).then((data,header) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1618,10 +1615,10 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/0`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
             imgArr.push({ ...item })
           })
-          Promise.all(promiseArr).then((res2,header) => {
+          Promise.all(promiseArr).then((res2, header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
               item.image = res2[index]
@@ -1662,7 +1659,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/0`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
           } else {
             promiseArr.push('')
           }
@@ -1688,13 +1685,10 @@ export default {
       if (url) {
         return new Promise((resolve, reject) => {
           this.$axios
-            .get(url, {
+            .get(url)
-              responseType: 'arraybuffer'
+            .then((res) => {
-            })
-            .then((res, resHeader) => {
               return {
-                data: ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))),
+                data: ('data:image/jpeg;base64,' + res.data)
-                header: resHeader
               }
             })
             .then(data => {
@@ -2038,7 +2032,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.el-dropdown-menu {
+  .el-dropdown-menu {
     .project-topology-add-node {
       .el-collapse-item__header {
         padding: 0 10px;
@@ -2180,10 +2174,10 @@ export default {
     .avatar-uploader:active .el-upload--picture-card:hover, .avatar-uploader:active .el-upload:focus {
       color: #DB8B8B;
     }
-}
+  }
 </style>
 <style lang="scss" scoped>
-.project-box{
+  .project-box{
     @keyframes model-error-animation {
       0% {
         transform: scale(0.7);
@@ -2452,13 +2446,13 @@ export default {
     .align--center{
       text-align: center;
     }
-}
+  }
-.project-topology-tool {
+  .project-topology-tool {
     display: inline-flex;
     height: 30px;
-}
+  }
 
-.el-dropdown-title {
+  .el-dropdown-title {
     background: #FFFFFF;
     border: 1px solid $--primary-border-color;
     border-radius: 2px;
@@ -2470,12 +2464,10 @@ export default {
     .icon-cube {
       margin-left: 15px;
     }
-}
+  }
 
-.project-box {
+  .project-box {
     width: 100%;
-  height: calc(100% - 20px);
-  margin-top: 10px;
     position: relative;
     border-radius: 2px;
     overflow: hidden;
@@ -2499,18 +2491,22 @@ export default {
       left: 10px;
       bottom: 10px;
     }
-}
+  }
 
-.page {
+  .page {
     display: flex;
+    height: calc(100% - 1px);
+    width: 100%;
+/*
     height: calc(100% - 65px);
     width: calc(100% - 10px);
     margin: 5px;
+*/
     position: relative;
 
     .tools {
       width: 300px;
-    height: 100%;
+      height: calc(100% - 1px);
       border: none;
       position: absolute;
       z-index: 1 !important;
@@ -2539,49 +2535,49 @@ export default {
       box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
       border-radius: 0px;
     }
-}
+  }
-.overview-page{
+  .overview-page{
     height: 100%;
-}
+  }
-.special-select svg {
+  .special-select svg {
     width: 75px;
     height: 30px;
-}
+  }
 
-.special-select .el-select.el-select--small {
+  .special-select .el-select.el-select--small {
     width: 100%;
-}
+  }
 
-.special-select /deep/ .el-select-dropdown {
+  .special-select /deep/ .el-select-dropdown {
     width: 130px !important;
 
     .el-select-dropdown__item {
       padding: 0 0 0 10px;
     }
-}
+  }
 
-.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
     border: 1px solid #DCDFE6;
     height: 28px;
-}
+  }
 
-.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
     display: none;
-}
+  }
 
-.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
     height: 28px;
     line-height: 28px;
     color: #899FB7;
     width: 100%;
-}
+  }
 
-.special-select /deep/ .el-input__prefix > div {
+  .special-select /deep/ .el-input__prefix > div {
     width: 100%;
     height: 100%;
-}
+  }
 
-.upload-pic-row{
+  .upload-pic-row{
     width: 420px;
     margin-bottom: 10px;
     .upload-pic-label{
@@ -2600,8 +2596,8 @@ export default {
         width: 100%;
       }
     }
-}
+  }
-.upload-pic-box{
+  .upload-pic-box{
     width: 284px;
     height: 30px;
     text-align: center;
@@ -2613,8 +2609,8 @@ export default {
     .el-icon-plus{
       color: #FA901C;
     }
-}
+  }
-.top-tool-btn{
+  .top-tool-btn{
     height: 32px;
     width: 32px;
     border: 1px solid $--primary-border-color;
@@ -2624,15 +2620,51 @@ export default {
     -webkit-transition: background-color linear .1s;
     transition: background-color linear .1s;
     padding: 0;
-}
+  }
-.top-tool-btn:hover{
+  .top-tool-btn:hover{
     background-color: #fff;
-}
+  }
-.top-tool-btn:focus{
+  .top-tool-btn:focus{
     background-color: #fff;
     border-color: #FBCEA4;
-}
+  }
-.top-tool-btn:focus .nz-icon{
+  .top-tool-btn:focus .nz-icon{
     color: #FBCEA4;
-}
+  }
+  .right-bottom-zoom{
+    position: absolute;
+    bottom: 30px;
+    right: 40px;
+    height: 90px;
+    width: 35px;
+    border: 1px solid #E7EAED;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+    .zoom-option{
+      width: 100%;
+      height: 50%;
+      opacity: 0.42;
+      background: #FFF;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    .zoom-option:hover{
+      cursor: pointer;
+    }
+  }
+  .from-overview{
+    padding:0 !important;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px) !important;
+    .nz-table2{
+      padding: 0 !important;
+      height: 100%;
+    }
+  }
+  .from-project{
+    padding-left: 0;
+    .nz-table2{
+      padding: 0 20px 10px 5px;
+    }
+  }
 </style>

nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue

@@ -33,7 +33,7 @@
           </el-form-item>
           <!--authProtocol-->
           <el-form-item :label='$t("config.assetType.authProtocol")' prop="authProtocol">
-            <el-select class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="请选择">
+            <el-select class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
               <el-option :key="option.value" v-for="option in assetConstants.assetType.authProtocolOptions" :value="option.value" :label="option.label"></el-option>
             </el-select>
           </el-form-item>

nezha-fronted/src/components/common/rightBox/administration/modelBox.vue

@@ -22,17 +22,20 @@
           <!-- ChartTemplate -->
           <el-form-item :label="$t('config.model.ChartTemplate')" prop="ChartTemplate">
             <v-selectpage
-            :data="chartlList"
+            :data="'visual/panel/chart'"
             :tb-columns="ChartSearchShowFields"
+            :params="{
+              varType: 1, panelId: 0
+            }"
             :multiple="true"
             language="en"
             title="ChartSearch"
-            placeholder="Please select item"
             key-field="id"
             v-model="editModel.chartIds"
             show-field="name"
             class="form-control"
             @values="(data) => {editModel.chartIds = data.map(d => d.id).join(',')}"
+            :result-format="resultFormat"
           ></v-selectpage>
           </el-form-item>
           <!--remark-->
@@ -80,17 +83,17 @@ export default {
       editModule: {},
       chartlList: [], // chart 列表数据
       ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
-        { title: 'id', data: 'id' },
+        { title: 'ID', data: 'id' },
-        { title: 'name', data: 'name' },
+        { title: 'Name', data: 'name' },
-        { title: 'desc', data: 'type' },
+        { title: 'Type', data: 'type' },
-        { title: 'Description', data: 'Description' }
+        { title: 'Description', data: 'remark' }
       ],
       url: 'asset/model',
       brandUrl: 'asset/brand',
       rightBox: { model: { show: false } },
       roles: [],
       rules: {
-        model: [
+        name: [
           { required: true, message: '必填', trigger: 'blur' }
         ],
         brandId: [
@@ -110,7 +113,7 @@ export default {
   },
   created () {
     this.getBrandList()
-    this.ChartTemplateList()
+    // this.ChartTemplateList()
   },
   methods: {
     clickOutside () {
@@ -186,13 +189,21 @@ export default {
         })
       })
     },
-    /* 获取chart列表数据 */
+    resultFormat (resp) {
-    ChartTemplateList () {
+      if (resp && resp.data) {
-      this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
+        const assetData = {}
-        this.chartlList = res.data.list
+        assetData.list = resp.data.list
-      })
+        assetData.totalRow = resp.data.total
+        return assetData
       }
     }
+    /* 获取chart列表数据 */
+    // ChartTemplateList () {
+    //   this.$get('visual/panel/chart', { pageSize: -1, varType: 1, panelId: 0 }).then(res => {
+    //     this.chartlList = res.data.list
+    //   })
+    // }
+  }
 }
 </script>
 <style lang="scss">

nezha-fronted/src/components/common/rightBox/administration/roleBox.vue

@@ -59,7 +59,6 @@ export default {
     detail: Boolean
   },
   data () {
-    const vm = this
     return {
       editRole: {},
       url: 'sys/role',

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

@@ -2,7 +2,7 @@
   <div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom">
     <!-- begin--标题-->
     <div class="right-box__header">
-      <div class="right-box__header">{{editPromServer.id ? ($t("config.promServer.editProm") + "  ID：" + editPromServer.id) : $t("config.promServer.createProm")}}</div>
+      <div class="header__title">{{editPromServer.id ? ($t("config.agent.editProm") + "  ID：" + editPromServer.id) : $t("config.agent.createProm")}}</div>
       <div class="header__operation">
         <span v-cancel="{obj: editPromServer, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
@@ -11,9 +11,9 @@
     <!-- begin--表单-->
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="promServerForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px">
+        <el-form ref="agentForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px">
           <!--DC-->
-          <el-form-item :label="$t('config.dc.dc')" prop="dc.name">
+          <el-form-item :label="$t('config.agent.name')" prop="name">
             <div class="right-box-form-content">
               <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
@@ -32,14 +32,14 @@
             <el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
           </el-form-item>
           <!--type-->
-          <el-form-item :label="$t('config.promServer.type')" prop="type">
+          <el-form-item :label="$t('config.agent.type')" prop="type">
   <!--          <el-cascader-->
   <!--            id="prom-box-input-type"-->
   <!--            style="width: 100%"-->
   <!--            v-model="editPromServer.type"-->
   <!--            placeholder=""-->
   <!--            size="small"-->
-  <!--            :options="$CONSTANTS.promServer.theData"-->
+  <!--            :options="$CONSTANTS.agent.theData"-->
   <!--            :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
   <!--            clearable></el-cascader>-->
             <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
@@ -77,7 +77,7 @@ import { agent2 } from '@/components/common/js/constants'
 export default {
   name: 'agentBox',
   props: {
-    promServer: Object
+    agent: Object
   },
   data () {
     return {
@@ -127,11 +127,11 @@ export default {
     },
     /* 保存 */
     save () {
-      this.$refs.promServerForm.validate(valid => {
+      this.$refs.agentForm.validate(valid => {
         if (valid) {
           this.prevent_opt.save = true
           if (this.editPromServer.id) {
-            this.$put('promServer', this.editPromServer).then(response => {
+            this.$put('agent', this.editPromServer).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
@@ -141,7 +141,7 @@ export default {
               this.prevent_opt.save = false
             })
           } else {
-            this.$post('promServer', this.editPromServer).then(response => {
+            this.$post('agent', this.editPromServer).then(response => {
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
@@ -163,7 +163,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('promServer?ids=' + this.editPromServer.id).then(response => {
+        this.$delete('agent?ids=' + this.editPromServer.id).then(response => {
           if (response.code === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.esc(true)
@@ -184,7 +184,7 @@ export default {
   },
   watch: {
     // 将prop里的user转为组件内部对象
-    promServer: {
+    agent: {
       immediate: true,
       deep: true,
       handler (n) {

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

@@ -57,24 +57,16 @@
           </el-input>
         </el-form-item>
         <!--severity-->
-        <el-form-item :label="$t('alert.severity')" prop="severity">
+        <el-form-item :label="$t('alert.severity')" prop="severity" class="severity-box">
-          <el-select id="alert-box-input-severity" v-model="editAlertRule.severity" placeholder=""  popper-class="config-dropdown" size="small">
+          <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" placeholder=""  popper-class="config-dropdown severity-box" size="small">
-            <el-option v-for="item in $CONSTANTS.alertMessage.severityData" :id="'alert-severity-'+item.value" :key="item.value" :label="item.label" :value="item.value">
+            <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
-              <template v-if="!item.isEdit">{{item.label}}</template>
+              <span>
-              <span v-if="item.isEdit" class="config-dropdown-label-input" @click.stop>
+                 <i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}
-                <el-input v-model="item.value" size="mini" type="text"></el-input>
               </span>
             </el-option>
           </el-select>
+          <i class="nz-icon nz-icon-circle severity-circle" v-if="editAlertRule.severityId" :style="{color:severityData.find(severity => severity.id ===  editAlertRule.severityId).color,'font-size':'12px'}"></i>
         </el-form-item>
-        <div class="rule-severity-remark">
-          <i class="nz-icon nz-icon-info-normal"></i>
-          <div>
-            <p>{{$t('alert.P1Rule')}}</p>
-            <p>{{$t('alert.P2Rule')}}</p>
-            <p>{{$t('alert.P3Rule')}}</p>
-          </div>
-        </div>
         <!--receiver-->
         <el-form-item :label="$t('config.user.receiver')" prop="receiver">
           <el-select
@@ -95,6 +87,13 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <!--notify-->
+        <el-form-item :label="$t('alert.notify')" prop="severity" class="notify-box">
+          <el-select id="alert-box-input-notify" v-model="editAlertRule.method" placeholder=""  popper-class="config-dropdown notify-box" size="small" multiple>
+            <el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
         <!--summary-->
         <el-form-item :label="$t('alert.summary')" prop="summary">
           <el-input id="alert-box-input-summary" v-model="editAlertRule.summary" maxlength="512" placeholder="" rows="3" show-word-limit size="small" type="textarea"></el-input>
@@ -150,7 +149,7 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
           { type: 'number', message: this.$t('validate.number') }
         ],
-        severity: [
+        severityId: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ],
         summary: [
@@ -195,7 +194,9 @@ export default {
       ],
       unitOptions: chartDataFormat.unitOptions(),
 
-      userData: []
+      userData: [],
+      severityData: [],
+      notifyData: []
     }
   },
   methods: {
@@ -210,11 +211,15 @@ export default {
       if (this.prevent_opt.save) { return } ;
       this.prevent_opt.save = true
       this.editAlertRule.expr = this.expressions[0]
+      const params = {
+        ...this.editAlertRule,
+        method: this.editAlertRule.method.join(',')
+      }
       this.$refs.alertRuleForm.validate((valid) => {
         if (valid) {
           this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(',')
           if (this.editAlertRule.id) {
-            this.$put('alert/rule', this.editAlertRule).then(response => {
+            this.$put('alert/rule', params).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -224,7 +229,7 @@ export default {
               }
             })
           } else {
-            this.$post('alert/rule', this.editAlertRule).then(response => {
+            this.$post('alert/rule', params).then(response => {
               this.prevent_opt.save = false
               if (response.code === 200) {
                 this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -270,10 +275,26 @@ export default {
     },
     metricChange (val) {
       this.editAlertRule.expr = val
+    },
+    getSeverityData () {
+      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.severityData = response.data.list
+        }
+      })
+    },
+    getNotifyData () {
+      this.$get('alert/notify/method', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.notifyData = response.data.list
+        }
+      })
     }
   },
   mounted () {
     this.getUserList()
+    this.getSeverityData()
+    this.getNotifyData()
   },
   watch: {
     alertRule: {
@@ -361,4 +382,15 @@ export default {
     box-sizing: border-box;
     margin: -13px 30px 18px 30px;
   }
+  .severity-circle{
+    position: absolute;
+    left: 10px;
+    top: 0;
+  }
+  .severity-box{
+    position: relative;
+  }
+  .severity-box /deep/ .el-select .el-input__inner{
+    padding-left: 25px;
+  }
 </style>

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

@@ -13,6 +13,13 @@
     <div class="right-box-form-box right-box__container">
       <el-form class="right-box-form right-box-form-left" :model="editAlertSilence" label-position="top"
                label-width="120px" :rules="rules" ref="alertSilenceForm">
+        <el-form-item :label='$t("alert.silence.name")' prop="name" class="range-name">
+          <el-input
+            :placeholder="''"
+            size="small"
+            v-model="editAlertSilence.name">
+          </el-input>
+        </el-form-item>
         <el-form-item :label='$t("alert.silence.time")' prop="time" class="range-time">
           <div>
             <el-radio-group v-model="rangeTime" size="small" @change="rangeTimeChange">
@@ -28,7 +35,7 @@
           <div class="datepicker">
             <div class="datepicker-box">
               <span class="datepicker-title">start time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'startAt')}" v-model="editAlertSilence.startAt"
                               type="datetime"
                               :clearable="false"
@@ -40,7 +47,7 @@
             </div>
             <div class="datepicker-box">
               <span class="datepicker-title">end time</span>
-              <my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
+              <my-date-picker prefix-icon=" " class=" " size="mini" ref="calendar"
                               format="yyyy/MM/dd HH:mm:ss" @change="(val)=>{dateChange(val,'endAt')}" v-model="editAlertSilence.endAt"
                               type="datetime"
                               :clearable="false"
@@ -54,20 +61,20 @@
           </div>
         </el-form-item>
 
-        <el-form-item :label='$t("alert.silence.matcher")' prop="matcher" class="matcher">
+        <el-form-item :label='$t("alert.silence.matchers")' prop="matchers" class="matchers">
-          <div v-for="(item, index) in editAlertSilence.matcher" :key="index" class="param-box-row">
+          <div v-for="(item, index) in editAlertSilence.matchers" :key="index" class="param-box-row">
-            <el-form-item class="param-box-row-key" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" :prop="'matcher.' + index + '.name'">
+            <el-form-item class="param-box-row-key" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" :prop="'matchers.' + index + '.name'">
               <el-input placeholder="key" size="mini" v-model="item.name"></el-input>
             </el-form-item>
             <span class="param-box-row-eq">=</span>
-            <el-form-item class="param-box-row-value" :prop="'matcher.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" >
+            <el-form-item class="param-box-row-value" :prop="'matchers.' + index + '.value'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' },]" >
-              <el-input placeholder="value" size="mini" v-model="item.value"  class="silence-matcher-value"></el-input>
+              <el-input placeholder="value" size="mini" v-model="item.value"  class="silence-matchers-value"></el-input>
-              <el-checkbox class="silence-matcher-regex" v-model="item.regex" :true-label="1" :false-label="0" >Regex</el-checkbox>
+              <el-checkbox class="silence-matchers-regex" v-model="item.regex" :true-label="1" :false-label="0" >Regex</el-checkbox>
             </el-form-item>
-            <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeMatcher(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+            <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
           </div>
-          <div style="text-align: center">
+          <div style="text-align: center;" class="">
-               <span id="module-add-label" type="button" @click="addMatcher" class="right-box-form-add module-add-label" style="margin-right: 140px">
+               <span id="module-add-label" type="button" @click="addmatchers" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">
               <span><i style="font-size: 16px;" class="nz-icon nz-icon-create-square"></i></span>
             </span>
           </div>
@@ -155,7 +162,7 @@ export default {
         linkId: '',
         reason: '',
         time: [],
-        matcher: [
+        matchers: [
           { name: '', value: '', regex: 0 }
         ],
         name: ''
@@ -166,6 +173,9 @@ export default {
           { required: true, trigger: 'change' },
           { validator: validate, trigger: 'change' }
         ],
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' },
+        ],
       },
       rangeTime: '',
       ruleList: [],
@@ -213,7 +223,7 @@ export default {
           })
           return
         }
-        const params = { ...this.editAlertSilence }
+        const params = { ...this.editAlertSilence, matchers: JSON.stringify(this.editAlertSilence.matchers) }
         if (valid) {
           if (this.editAlertSilence.id) {
             this.$put('/alert/silence', params).then(response => {
@@ -298,15 +308,15 @@ export default {
       this.editAlertSilence.linkId = ''
     },
     // 新增label
-    addMatcher () {
+    addmatchers () {
-      this.editAlertSilence.matcher.push({ name: '', value: '', regex: 0 })
+      this.editAlertSilence.matchers.push({ name: '', value: '', regex: 0 })
     },
     // 移除单个Label
-    removeMatcher (index) {
+    removematchers (index) {
-      if (this.editAlertSilence.matcher.length === 1) {
+      if (this.editAlertSilence.matchers.length === 1) {
-        this.editAlertSilence.matcher = [{ name: '', value: '', regex: 0 }]
+        this.editAlertSilence.matchers = [{ name: '', value: '', regex: 0 }]
       }
-      this.editAlertSilence.matcher.splice(index, 1)
+      this.editAlertSilence.matchers.splice(index, 1)
     }
   }
 }
@@ -322,7 +332,7 @@ export default {
       width: 14.2%
     }
 
-    /deep/ .el-date-editor.el-range-editor.el-input__inner.panel-time-picker-hidden.el-date-editor--datetimerange.el-range-editor--mini {
+    /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
       width: 100%;
     }
 
@@ -348,7 +358,7 @@ export default {
       }
     }
   }
-  .matcher{
+  .matchers{
     /deep/ .el-input__prefix{
       left: 0;
     }
@@ -356,11 +366,11 @@ export default {
       left: 126px;
       padding-top: 10px;
     }
-    .matcher-type{
+    .matchers-type{
       display: flex;
       justify-content: space-between;
       margin-top: 20px;
-      .matcher-type-title{
+      .matchers-type-title{
         width: 125px;
         background:#E7EAED;
         font-family: ArialMT;
@@ -370,7 +380,7 @@ export default {
         font-weight: 400;
         text-align: center;
       }
-      /deep/ .matcher-type-title.el-select--small .el-input__inner{
+      /deep/ .matchers-type-title.el-select--small .el-input__inner{
         background:#E7EAED;
         font-family: ArialMT;
         font-size: 14px;
@@ -380,15 +390,15 @@ export default {
         text-align: center;
         border: none;
       }
-      .matcher-type-content{
+      .matchers-type-content{
         flex: 1;
       }
     }
   }
-  /deep/ .silence-matcher-value{
+  /deep/ .silence-matchers-value{
     width: calc(100% - 100px);
   }
-  .silence-matcher-regex{
+  .silence-matchers-regex{
     margin-left: 10px;
   }
   /deep/ .param-box-row-key{
@@ -397,4 +407,15 @@ export default {
   /deep/ .param-box-row-value{
     width: 50%;
   }
+  .module-add-label{
+    display: inline-block;
+    width: 300px;
+    height: 18px;
+    background: #FFFCF9;
+    border: 1px solid #FFE0BD;
+    border-radius: 2px;
+    text-align: center;
+    line-height: 18px;
+    margin-right: 80px;
+  }
 </style>

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

@@ -1,82 +1,64 @@
 <template>
   <transition name="right-box-580">
     <div class="right-box right-box-asset" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns right-box-form-delete">
-        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
-                v-has="'alert_silence_delete'" v-if="editAssetMeta.id">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
       <!-- begin--标题-->
       <div class="right-box__header">
         <div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta") + " ID：" + editAssetMeta.id :
-        $t("config.assetLabel.addMeta")}}</div>
+          $t("config.assetLabel.addMeta")}}
+        </div>
+        <div class="header__operation">
+          <span v-cancel="{obj: editAssetMeta, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+        </div>
       </div>
-      <!-- end--标题-->
-
       <!-- begin--表单-->
       <div class="right-box__container">
-        <el-form class="right-box-form right-box-form-left" label-width="120px"  :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
+        <div class="container__form">
-
+          <el-form label-width="120px"  :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
             <el-form-item :label='$t("config.assetLabel.name")' prop="name">
               <el-input placeholder="" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.key")' prop="metaKey">
               <el-input placeholder="" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.group")' prop="groupId">
-<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.group" size="small" id="editAssetMeta-box-input-group"></el-input>-->
+              <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false">
-            <el-select v-model="editAssetMeta.groupId" size="small" :popper-class="'nz-meta-group-box'" :popper-append-to-body="false">
                 <el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
               </el-select>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.search")' prop="search">
-<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.search" size="small" id="editAssetMeta-box-input-search"></el-input>-->
               <el-switch
                 @change="switchSearch"
                 v-model="editAssetMeta.search"
                 active-color="#ee9d3f"
-              :active-value="1"
+                active-value="1"
-              :inactive-value="0">
+                inactive-value="0">
               </el-switch>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.display")' prop="display">
-<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.display" size="small" id="editAssetMeta-box-input-display"></el-input>-->
               <el-switch
                 v-model="editAssetMeta.display"
                 active-color="#ee9d3f"
-              :active-value="1"
+                active-value="1"
-              :inactive-value="0">
+                inactive-value="0">
               </el-switch>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.type")' prop="type">
-            <el-select  v-model="editAssetMeta.type" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @change="selectType">
+              <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="selectType">
                 <el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
-                <div><i :class="item.icon"></i>&nbsp;&nbsp;<span >{{item.name}}</span></div>
+                  <div><i :class="item.icon"></i>&nbsp;&nbsp;<span>{{item.name}}</span></div>
                 </el-option>
               </el-select>
             </el-form-item>
-
             <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="showParam">
               <span>{{$t('config.assetLabel.params')}}</span>
-            <span @click="addParam" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="editAssetMeta.type!=='datetime'">
+              <span v-if="editAssetMeta.type.toUpperCase()!=='DATETIME'" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" @click="addParam">
               <span class="create-square-box">
                 <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
               </span>
             </span>
             </div>
             <el-form-item prop="param" v-if="showParam" class="asset-meta-param">
-<!--            <el-input placeholder="" show-word-limit v-model="editAssetMeta.param" size="small" id="editAssetMeta-box-input-param"></el-input>-->
+              <div v-if="editAssetMeta.type.toUpperCase()==='RADIO' || editAssetMeta.type.toUpperCase()==='CHECKBOX' || editAssetMeta.type.toUpperCase()==='SELECT'" class="meta-option-box">
-            <div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box">
                 <el-row class="asset-meta-param-row asset-meta-param-header">
                   <el-col :span="12">
                     {{$t('config.assetLabel.option')}}
@@ -93,10 +75,8 @@
                     <el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
                   </el-col>
                   <el-col :span="6">
-                  <el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetLabel.default')}}</el-radio>
+                    <el-radio v-if="editAssetMeta.type.toUpperCase()==='RADIO' || editAssetMeta.type.toUpperCase()==='SELECT'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetLabel.default')}}</el-radio>
-
                     <el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetLabel.default')}}</el-checkbox>
-
                   </el-col>
                   <el-col :span="6">
                     <div class="">
@@ -110,8 +90,7 @@
                   </el-col>
                 </el-row>
               </div>
-
+              <div v-if="editAssetMeta.type.toUpperCase()==='DATETIME'">
-            <div v-if="editAssetMeta.type==='datetime'">
                 <el-row style="margin-bottom: 10px">
                   <span class="datetime-header">{{$t('config.assetLabel.dateType')}}: </span>
                   <el-radio-group v-model="editAssetMeta.param.subType">
@@ -129,25 +108,22 @@
                   </el-switch>
                 </el-row>
               </div>
-
+              <div v-if="editAssetMeta.type.toUpperCase()==='DOUBLE'">
-            <div v-if="editAssetMeta.type==='double'">
                 <el-row>
                   <span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
                   <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
                 </el-row>
               </div>
             </el-form-item>
-
             <el-form-item :label='$t("overall.remark")' prop="remark">
               <el-input placeholder="" maxlength="512" type="textarea" show-word-limit v-model="editAssetMeta.remark" size="small" id="editAssetMeta-box-input-remark"></el-input>
             </el-form-item>
-
             <el-form-item :label='$t("config.assetLabel.example")'>
-            <assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
+              <assetTagEx :param="editAssetMeta.param" :type="editAssetMeta.type.toUpperCase()"/>
             </el-form-item>
-
           </el-form>
         </div>
+      </div>
       <!-- end--表单-->
 
       <!-- begin--底部按钮-->
@@ -170,25 +146,12 @@ import assetTagEx from '../../page/asset/components/assetTagEx'
 export default {
   name: 'assetLabelBox',
   props: {
-    assetLabel: {}
+    obj: { type: Object }
   },
   components: { assetTagEx },
   data () {
     return {
-      editAssetMeta: {
+      editAssetMeta: {},
-        id: '',
-        name: '',
-        metaKey: '',
-        groupId: {
-          id: '',
-          name: ''
-        },
-        search: 1,
-        display: 1,
-        type: '',
-        param: {},
-        remark: ''
-      },
       rightBox: { // 面板弹出框相关
         show: false
       },
@@ -199,66 +162,66 @@ export default {
         groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
         type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
       },
-      value:'',
+      value: '',
       typeData: [
         {
           icon: 'nz-icon nz-icon-text',
-          disabled:true,
+          disabled: true,
-          value: 'text',
+          value: 'TEXT',
           name: this.$t('config.assetLabel.text')
         },
         {
           icon: 'nz-icon nz-icon-multitext',
-          disabled:true,
+          disabled: true,
-          value: 'multitext',
+          value: 'MULTITEXT',
           name: this.$t('config.assetLabel.multitext')
         },
         {
           icon: 'nz-icon nz-icon-textarea',
-          disabled:true,
+          disabled: true,
-          value: 'textarea',
+          value: 'TEXTAREA',
           name: this.$t('config.assetLabel.textarea')
         },
         {
           icon: 'nz-icon nz-icon-radio',
-          disabled:true,
+          disabled: true,
-          value: 'radio',
+          value: 'RADIO',
           name: this.$t('config.assetLabel.radio')
         },
         {
           icon: 'nz-icon nz-icon-checkbox',
-          disabled:true,
+          disabled: true,
-          value: 'checkbox',
+          value: 'CHECKBOX',
           name: this.$t('config.assetLabel.checkbox')
         },
         {
           icon: 'nz-icon nz-icon-xialaxuanze',
-          disabled:true,
+          disabled: true,
-          value: 'select',
+          value: 'SELECT',
           name: this.$t('config.assetLabel.select')
         },
         {
           icon: 'nz-icon nz-icon-integer',
-          disabled:true,
+          disabled: true,
-          value: 'integer',
+          value: 'INTEGER',
           name: this.$t('config.assetLabel.integer')
         },
         {
           icon: 'nz-icon nz-icon-double',
-          disabled:true,
+          disabled: true,
-          value: 'double',
+          value: 'DOUBLE',
           name: this.$t('config.assetLabel.double')
         },
         {
-          icon: 'nz-icon nz-icon-double',
+          icon: 'el-icon-time',
-          disabled:true,
+          disabled: true,
-          value: 'datetime',
+          value: 'DATETIME',
           name: this.$t('config.assetLabel.datetime')
         },
         {
-          icon: 'nz-icon nz-icon-double',
+          icon: 'el-icon-message',
-          disabled:true,
+          disabled: true,
-          value: 'email',
+          value: 'EMAIL',
           name: this.$t('config.assetLabel.email')
         }
       ],
@@ -266,33 +229,56 @@ export default {
     }
   },
   watch: {
-    assetLabel: {
+    obj: {
+      deep: true,
       immediate: true,
       handler (n) {
-        this.editAssetMeta = { ...n }
+        this.editAssetMeta = {
-        this.selectType(n.type, true)
+          ...n,
+          search: `${n.search}`,
+          display: `${n.display}`,
+          param: n.param && typeof n.param === 'string' ? JSON.parse(n.param) : {},
+          type: n.type.toUpperCase()
+        }
+        console.info(this.editAssetMeta)
+      }
+    },
+    'editAssetMeta.search': {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.switchSearch(n)
       }
     }
   },
   mounted () {
     this.getGroupData()
-    this.switchSearch()
   },
   methods: {
-    switchSearch(value){
+    switchSearch (value) {
-      this.typeData.forEach(element => {
+      if (value == 0) {
-          if( value === 0 ) {
+        this.typeData.forEach(t => {
-            element.disabled = false
+          t.disabled = false
-          }else {
+        })
-            if(element.value == 'radio'){
+      } else if (value == 1) {
-              element.disabled = false
+        if (this.editAssetMeta.type !== 'RADIO' &&
-            }else if(element.value == 'checkbox'){
+            this.editAssetMeta.type !== 'CHECKBOX' &&
-              element.disabled = false
+            this.editAssetMeta.type !== 'SELECT') {
-            }else if(element.value == 'select'){
+          this.editAssetMeta.type = 'RADIO'
-              element.disabled = false
         }
+        this.typeData.forEach(t => {
+          if (t.value === 'RADIO' || t.value === 'CHECKBOX' || t.value === 'SELECT') {
+            t.disabled = false
+          } else {
+            t.disabled = true
           }
         })
+      } else {
+        this.editAssetMeta.search = '0'
+        this.typeData.forEach(t => {
+          t.disabled = false
+        })
+      }
     },
     clickOutside () {
       this.esc(false)
@@ -304,7 +290,7 @@ export default {
     save () {
       if (this.prevent_opt.save) {
         return
-      };
+      }
       this.prevent_opt.save = true
       this.$refs.editAssetMetaForm.validate((valid) => {
         if (valid) {
@@ -355,7 +341,6 @@ export default {
       if (this.prevent_opt.save) {
         return
       }
-      ;
       this.prevent_opt.save = true
       this.$confirm(this.$t('tip.confirmDelete'), {
         confirmButtonText: this.$t('tip.yes'),
@@ -384,9 +369,9 @@ export default {
     },
     selectType (val, init) {
       switch (val) {
-        case 'radio' :
+        case 'RADIO' :
-        case 'checkbox' :
+        case 'CHECKBOX' :
-        case 'select' :
+        case 'SELECT' :
           this.showParam = true
           if (init) return
           this.editAssetMeta.param = {}
@@ -398,7 +383,7 @@ export default {
             check: false
           }]
           break
-        case 'datetime' :
+        case 'DATETIME' :
           this.showParam = true
           if (init) return
           this.editAssetMeta.param = {
@@ -406,7 +391,7 @@ export default {
             interval: false
           }
           break
-        case 'double' :
+        case 'DOUBLE' :
           this.showParam = true
           if (init) return
           this.editAssetMeta.param = {
@@ -427,7 +412,7 @@ export default {
       this.editAssetMeta.param.items.forEach((item, index) => {
         if (index === i) {
           item.check = !!item.check
-        } else if (this.editAssetMeta.type !== 'checkbox') {
+        } else if (this.editAssetMeta.type.toUpperCase() !== 'CHECKBOX') {
           item.check = false
         }
       })
@@ -456,7 +441,7 @@ export default {
       this.$forceUpdate()
     },
     copyParam (index) {
-      if (this.editAssetMeta.type !== 'checkbox') {
+      if (this.editAssetMeta.type.toUpperCase() !== 'CHECKBOX') {
         this.editAssetMeta.param.items.push({
           name: this.editAssetMeta.param.items[index].name,
           check: false

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

@@ -851,7 +851,7 @@ export default {
     width: 37.5%;
     margin-right: 2%;
     background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    border: 1px solid $--right-box-border-color;
     border-radius: 2px;
     position: relative;
   }
@@ -875,7 +875,7 @@ export default {
 
     width: 100%;
     background: #FFFFFF;
-    border: 1px solid #E7EAED;
+    border: 1px solid $--right-box-border-color;
     border-radius: 2px;
   }
   /* end--table*/
@@ -884,7 +884,7 @@ export default {
   .search-box{
     width: calc(100% - 10px);
     padding: 10px 5px;
-    border-bottom: 1px solid #E7EAED;
+    border-bottom: 1px solid $--right-box-border-color;
     display: flex;
   }
   /deep/ .new-search .search-input-all{

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

@@ -113,7 +113,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => {
+        this.$delete('dc/cabinet?ids=' + this.editCabinet.id).then(response => {
           this.prevent_opt.save = false
           if (response.code == 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })

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

@@ -2,7 +2,7 @@
   <div class="right-box right-box-dc" v-clickoutside="{obj:editDc,func:clickOutside}">
       <!-- begin--标题-->
       <div class="right-box__header">
-        <div class="right-box__header">{{editDc.id ? ($t("config.dc.editDc") + "  ID：" + editDc.id) : $t("config.dc.createDc")}}</div>
+        <div class="header__title">{{editDc.id ? ($t("config.dc.editDc") + "  ID：" + editDc.id) : $t("config.dc.createDc")}}</div>
         <div class="header__operation">
           <span v-cancel="{obj: editDc, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
         </div>

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

@@ -2,7 +2,7 @@
   <div v-clickoutside="{obj:editExprTemp,func:clickOutside}" class="right-box right-box-alert-config">
     <!-- begin--标题-->
     <div class="right-box__header">
-      <div class="right-box__header">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
+      <div class="header__title">{{editExprTemp.id ? $t("config.exprTemp.edit") + " ID：" + editExprTemp.id :
       $t("config.exprTemp.create")}}
     </div>
       <div class="header__operation">

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

@@ -2,7 +2,7 @@
   <div class="right-box right-box-mib" v-clickoutside="{obj:editMib,func:clickOutside}" >
     <!-- begin--标题-->
    <div class="right-box__header">
-      <div class="right-box__header">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
+      <div class="header__title">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
       <div class="header__operation">
         <span v-cancel="{obj: editMib, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>

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

@@ -831,13 +831,13 @@ export default {
     min-height: 30px;
     overflow-x: hidden;
     border-radius: 2px;
-    padding: 0;
+    padding: 0 !important;
   }
   /deep/ .ti-tag{
     background-color: #f4f4f5;
     border-color: #e9e9eb;
     color: #909399;
-    padding: 2px 4px;
+    padding: 2px 4px!important;;
   }
 </style>
 <style>

nezha-fronted/src/components/common/rightBox/setting/cabinetBox.vue

@@ -105,7 +105,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => {
+        this.$delete('dc/cabinet?ids=' + this.editCabinet.id).then(response => {
           this.prevent_opt.save = false
           if (response.code == 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })

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

@@ -2,7 +2,7 @@
   <div class="right-box right-box-credential" v-clickoutside="{obj:editCredential,func:clickOutside}">
       <!-- begin--标题-->
       <div class="right-box__header">
-        <div class="right-box__header">{{editCredential.id ? ($t("config.mib.credential.edit") + "  ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
+        <div class="header__title">{{editCredential.id ? ($t("config.mib.credential.edit") + "  ID：" + editCredential.id) : $t("config.mib.credential.create")}}</div>
         <div class="header__operation">
           <span v-cancel="{obj: editCredential, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
         </div>
@@ -17,14 +17,14 @@
             <el-form-item :label='$t("config.mib.credential.remark")' prop="remark">
               <el-input placeholder="" v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
             </el-form-item>
-            <el-form-item :label='$t("config.mib.credential.type")' prop="type" class="half-form-item">
+            <el-form-item :label='$t("config.mib.credential.type")' prop="type">
-              <el-select v-model="editCredential.type" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" @change="typeChange">
+              <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" @change="typeChange">
                 <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label='$t("config.mib.credential.port")' prop="port" class="half-form-item" >
+            <el-form-item :label='$t("config.mib.credential.port")' prop="port" >
               <el-input placeholder=""   v-model.number="editCredential.port" size="small" id="credential-box-input-port"></el-input>
             </el-form-item>
             <el-form-item label='Read community' prop="readCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
@@ -33,38 +33,38 @@
             <el-form-item label='Write community' prop="writeCommunity" v-if="editCredential.type ===1 || editCredential.type === 2">
               <el-input placeholder=""   v-model="editCredential.config.writeCommunity" size="small" id="credential-box-input-writeCommunity" type="password" show-password></el-input>
             </el-form-item>
-            <el-form-item label="Username" prop="username" v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item label="Username" prop="username" v-if="editCredential.type === 3">
               <el-input placeholder=""   v-model="editCredential.config.username" size="small" id="credential-box-input-username"></el-input>
             </el-form-item>
-            <el-form-item label="Content name" prop="contextname"  v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item label="Content name" prop="contextname"  v-if="editCredential.type === 3">
               <el-input placeholder=""   v-model="editCredential.config.contextname" size="small" id="credential-box-input-contextname"></el-input>
             </el-form-item>
 
             <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.auth')}}</div>
             <div style="margin-bottom: 20px;width: 100%"></div>
 
-            <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.authProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small">
+              <el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside">
                 <el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item :label='$t("config.mib.credential.pin")' prop="authPin" v-if="editCredential.type === 3">
               <el-input placeholder=""   v-model="editCredential.config.authPin" size="small" id="credential-box-input-authPin" type="password" show-password></el-input>
             </el-form-item>
 
             <div class="right-box-sub-title" v-if="editCredential.type === 3">{{$t('config.mib.credential.encryption')}}</div>
             <div style="margin-bottom: 20px;width: 100%"></div>
 
-            <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.privProtocol" class="right-box-row-with-btn" placeholder="" id="credential-box-input-type" popper-class="chart-box-dropdown-small" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
+              <el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
                 <el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label='$t("config.mib.credential.pin")' prop="privPin"  v-if="editCredential.type === 3" class="half-form-item">
+            <el-form-item :label='$t("config.mib.credential.pin")' prop="privPin"  v-if="editCredential.type === 3">
               <el-input placeholder=""   v-model="editCredential.config.privPin" size="small" id="credential-box-input-privPin" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''" type="password" show-password></el-input>
             </el-form-item>
           </el-form>

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

@@ -93,7 +93,7 @@
 export default {
   name: 'accountBox',
   props: {
-    user: Object
+    obj: Object
   },
   computed: {
     isCurrentUser () {
@@ -292,7 +292,7 @@ export default {
   },
   watch: {
     // 将prop里的user转为组件内部对象
-    user: {
+    obj: {
       immediate: true,
       deep: true,
       handler (n) {

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -31,7 +31,7 @@
         :prop="item.prop"
         :resizable="true"
         :sort-orders="['ascending', 'descending']"
-        :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
+        :sortable="item.sortable"
         :width="`${item.width}`"
       >
         <template slot-scope="scope" :column="item">
@@ -57,10 +57,8 @@
             <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <span v-else>-</span>
           </template>
-          <span v-else-if="item.prop === 'severity'" class="severity">
+          <span v-else-if="item.prop === 'severity'&&scope.row[item.prop]" class="severity">
-            <span v-if="scope.row[item.prop] === 'P1'" class="P1">P1</span>
+            <i class="nz-icon nz-icon-circle" :style="{color:scope.row[item.prop].color,'font-size':'12px','margin-right':'5px'}"></i> {{scope.row[item.prop].name}}
-            <span v-if="scope.row[item.prop] === 'P2'" class="P2">P2</span>
-            <span v-if="scope.row[item.prop] === 'P3'" class="P3">P3</span>
           </span>
           <span v-else-if="item.prop === 'startAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
           <template v-else-if="item.prop === 'duration'">
@@ -167,23 +165,28 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('alert.alertName'),
           prop: 'alertRule',
           show: true,
-          width: 180
+          width: 180,
+          sortable:false,
+          sortable:'custom'
         }, {
           label: this.$t('alert.list.labels'),
           prop: 'labels',
           show: true,
           NotSet: true,
-          minWidth: 250
+          minWidth: 250,
+          sortable:'custom'
         }, {
           label: this.$t('alert.severity'),
           prop: 'severity',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('alert.summary'),
           prop: 'summary',
@@ -203,7 +206,8 @@ export default {
           label: this.$t('alert.startAt'),
           prop: 'startAt',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('config.terminallog.duration'),
           prop: 'duration',

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -33,17 +34,15 @@
         <div class="col-resize-area"></div>
       </template>
       <template slot-scope="scope" :column="item">
-        <span v-if="item.prop === 'severity'" class="severity">
+        <span v-if="item.prop === 'severity'&&scope.row[item.prop]" class="severity">
-          <span v-if="scope.row[item.prop] == 'P1'" class="P1">P1</span>
+            <i class="nz-icon nz-icon-circle" :style="{color:scope.row[item.prop].color,'font-size':'12px','margin-right':'5px'}"></i> {{scope.row[item.prop].name}}
-          <span v-if="scope.row[item.prop] == 'P2'" class="P2">P2</span>
-          <span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
         </span>
         <template v-else-if="item.prop === 'alertNum'">
           <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
         </template>
         <template v-else-if="item.prop === 'threshold'">{{formatThreshold(scope.row[item.prop], scope.row.unit)}}</template>
         <template v-else-if="item.prop === 'receivers'">
-          <el-tag v-for="(user, index) in scope.row[item.prop]" v-if="user.userName" :key="index" class="alert-rule-tag" effect="dark" size="mini">{{user.userName}}&nbsp;</el-tag>
+          <el-tag v-for="(user, index) in scope.row[item.prop]" v-if="user&&user.userName" :key="index" class="alert-rule-tag" effect="dark" size="mini">{{user.userName}}&nbsp;</el-tag>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
@@ -83,11 +82,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable: 'custom'
         }, {
           label: this.$t('alert.alertName'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable: 'custom'
         }, {
           label: this.$t('alert.config.expr'),
           prop: 'expr',
@@ -107,7 +108,8 @@ export default {
         }, {
           label: this.$t('alert.severity'),
           prop: 'severity',
-          show: true
+          show: true,
+          sortable: 'custom'
         }, {
           label: this.$t('alert.summary'),
           prop: 'summary',
@@ -120,7 +122,8 @@ export default {
           label: this.$t('alert.message'),
           prop: 'alertNum',
           show: true,
-          width: 90
+          width: 150,
+          sortable: 'custom'
         }, {
           label: this.$t('alert.config.receiver'),
           prop: 'receivers',

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -53,7 +54,19 @@
 <!--              <span :title="scope.row.ruleName" class="nz-silence-tag-content">{{scope.row.ruleName}}</span>-->
 <!--            </span>-->
 <!--          </div>-->
-          matchers
+          <span v-for="(item1, i) in labelsSort(scope.row.matchers)" :key="i">
+              <span >
+                <nz-alert-tag
+                  v-if="item1.name !== 'alertname' && item1.name !== 'severity'" :key="i" :cursor-point="tagType(item1.name) !== 'info'"
+                  :label="item1.name"
+                  :type="tagType(item1.name)"
+                  :regex="item1.regex"
+                  style="margin: 5px 0 5px 5px;"
+                >
+                 {{item1.value}}
+                </nz-alert-tag>
+              </span>
+            </span>
         </template>
         <template v-else-if="item.prop === 'state'">
           <span v-if="scope.row.state===1" class="silence-pending">pending</span>
@@ -73,13 +86,13 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" @click="copyRow(scope.row,'alertSilence')"><i class="nz-icon nz-icon-override"></i></button>
+        <button class="table-operation-item" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
         <el-dropdown size="medium" trigger="hover" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+<!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.expire')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -91,8 +104,12 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+import nzAlertTag from '../../../page/alert/nzAlertTag'
 export default {
   name: 'alertSilenceTable',
+  components: {
+    nzAlertTag
+  },
   mixins: [table],
   data () {
     return {
@@ -102,16 +119,19 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable: 'custom'
         }, {
           label: 'matchers',
           prop: 'matchers',
-          show: true
+          show: true,
+          sortable: 'custom'
         }, {
           label: 'Start time',
           prop: 'startAt',
           show: true,
-          width: 300
+          width: 300,
+          sortable: 'custom'
         }, {
           label: this.$t('config.terminallog.duration'),
           prop: 'duration',
@@ -144,6 +164,39 @@ export default {
         }
         return calcDurationByStringTimeB(record.startAt, this.nowTime)
       }
+    },
+    tagType () {
+      return (key) => {
+        if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+          return 'normal'
+        } else {
+          return 'info'
+        }
+      }
+    }
+  },
+  methods: {
+    labelsSort (obj) {
+      obj = obj || []
+      const buildIn = ['asset', 'endpoint', 'module', 'project', 'datacenter']
+      if (typeof obj === 'string') obj = JSON.parse(obj)
+      const labels = JSON.parse(JSON.stringify(obj))
+      const result = []
+      const result2 = []
+      for (const key of buildIn) {
+        labels.forEach(item => {
+          if (item.name === key) {
+            result.push(item)
+          }
+        })
+      }
+      labels.forEach(item => {
+        if (buildIn.indexOf(item.name) === -1) {
+          result2.push(item)
+        }
+      })
+      console.log([...result, ...result2])
+      return [...result, ...result2]
     }
   }
 }

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -45,14 +46,16 @@
           <div v-else-if="scope.row[item.prop] === 0">Disabled</div>
         </div>
         <div v-else-if=" item.prop === 'type' ">
-          <div v-if="scope.row[item.prop] == 'TEXT'&&'text'"><i class="nz-icon nz-icon-text"></i>TEXT</div>
+          <div v-if="scope.row[item.prop].toUpperCase() == 'TEXT'"><i class="nz-icon nz-icon-text"></i>&nbsp;&nbsp;TEXT</div>
-          <div v-else-if="scope.row[item.prop] == 'multitext'"><i class="nz-icon nz-icon-multitext"></i>MULTITEXT</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'MULTITEXT'"><i class="nz-icon nz-icon-multitext"></i>&nbsp;&nbsp;MULTITEXT</div>
-          <div v-else-if="scope.row[item.prop] == 'textarea'"><i class="nz-icon nz-icon-textarea"></i>TEXTAREA</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'TEXTAREA'"><i class="nz-icon nz-icon-textarea"></i>&nbsp;&nbsp;TEXTAREA</div>
-          <div v-else-if="scope.row[item.prop] == 'radio'"><i class="nz-icon nz-icon-radio"></i>RADI0</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'RADIO'"><i class="nz-icon nz-icon-radio"></i>&nbsp;&nbsp;RADI0</div>
-          <div v-else-if="scope.row[item.prop] == 'checkbox'"><i class="nz-icon nz-icon-checkbox"></i>CHECKBOX</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'CHECKBOX'"><i class="nz-icon nz-icon-checkbox"></i>&nbsp;&nbsp;CHECKBOX</div>
-          <div v-else-if="scope.row[item.prop] == 'xialaxuanze'"><i class="nz-icon nz-icon-xialaxuanze"></i>SELECT</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'SELECT'"><i class="nz-icon nz-icon-xialaxuanze"></i>&nbsp;&nbsp;SELECT</div>
-          <div v-else-if="scope.row[item.prop] == 'integer'"><i class="nz-icon nz-icon-integer"></i>INTEGER</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'INTEGER'"><i class="nz-icon nz-icon-integer"></i>&nbsp;&nbsp;INTEGER</div>
-          <div v-else-if="scope.row[item.prop] == 'double'"><i class="nz-icon nz-icon-double"></i>DOUBLE</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'DOUBLE'"><i class="nz-icon nz-icon-double"></i>&nbsp;&nbsp;DOUBLE</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'DATETIME'"><i class="nz-icon nz-icon-double"></i>&nbsp;&nbsp;DOUBLE</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'EMAIL'"><i class="nz-icon nz-icon-double"></i>&nbsp;&nbsp;DOUBLE</div>
         </div>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
@@ -91,20 +94,24 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.name'),
           prop: 'name',
           show: true,
-          width: 100
+          width: 100,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.key'),
           prop: 'metaKey',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.group'),
           prop: 'group',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetLabel.search'),
           prop: 'search',

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -92,16 +93,19 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.manageIp'),
           prop: 'manageIp',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('overall.parent'),
           prop: 'parent',
@@ -111,42 +115,50 @@ export default {
           label: this.$t('overall.type'),
           prop: 'type',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.state'),
           prop: 'state',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.dc'),
           prop: 'dc',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('asset.cabinet'),
           prop: 'cabinet',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: this.$t('asset.alertNum'),
           prop: 'alertNum',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.endpointNum2'),
           prop: 'endpointNum',
           show: true,
-          width: 140
+          width: 140,
+          sortable:'custom'
         }, {
           label: this.$t('asset.brand'),
           prop: 'brand',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('asset.model'),
           prop: 'model',
           show: true,
-          width: 110
+          width: 110,
+          sortable:'custom'
         }, {
           label: 'SN',
           prop: 'sn',

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -5,7 +5,7 @@
       <!-- 顶部工具栏 -->
       <div class="main-modal"></div>
       <div class="main-container">
-        <div v-show="bottomBox.mainResizeShow" class="top-tools">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="top-tools">
           <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
@@ -25,10 +25,10 @@
         <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
           <slot name="search"></slot>
         </div>
-        <div v-show="bottomBox.mainResizeShow" class="nz-table2">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'padding-right: 5px' : ''" class="nz-table2">
           <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
         </div>
-        <div v-show="bottomBox.mainResizeShow" class="pagination-bottom">
+        <div v-show="bottomBox.mainResizeShow" :style="from === fromRoute.project ? 'width: calc(100% - 15px);bottom: 18px' : ''" class="pagination-bottom">
           <slot name="pagination"></slot>
         </div>
       </div>
@@ -62,6 +62,7 @@
 </template>
 
 <script>
+import { fromRoute } from '@/components/common/js/constants'
 import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'
 
@@ -91,6 +92,7 @@ export default {
   },
   data () {
     return {
+      fromRoute: fromRoute,
       /* 二级页面相关 */
       bottomBox: {
         object: {},

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -84,11 +85,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
-          label: this.$t('config.dc.dc'),
+          label: this.$t('config.agent.name'),
           prop: 'dc',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: 'Host',
           prop: 'host',
@@ -100,11 +103,13 @@ export default {
         }, {
           label: this.$t('config.agent.type'),
           prop: 'type',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.state'),
           prop: 'status',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.agent.checkTime'),
           prop: 'checkTime',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -97,12 +98,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetType.name'),
           prop: 'name',
           show: true,
-          width: 120
+          width: 120,
+          sortable:'custom'
         }, {
           label: this.$t('config.assetType.vm'),
           prop: 'vm',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -75,19 +76,23 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.type'),
           prop: 'type',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.varType'),
           prop: 'varType',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.remark'),
           prop: 'remark',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -96,15 +97,18 @@ export default {
         label: 'ID',
         prop: 'id',
         show: true,
-        width: 80
+        width: 80,
+        sortable:'custom'
       }, {
         label: this.$t('overall.name'),
         prop: 'name',
-        show: true
+        show: true,
+        sortable:'custom'
       }, {
         label: this.$t('config.mib.credential.type'),
         prop: 'type',
-        show: true
+        show: true,
+        sortable:'custom'
       }, {
         label: this.$t('config.mib.credential.port'),
         prop: 'port',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -61,12 +62,12 @@
         </template>
         <template v-else-if="item.prop === 'assetNum'">
           <span class="endpoint-num"  @click="showBottomBox('asset', scope.row)">
-             <i class="nz-icon nz-icon-overview-project" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
+             <i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
           {{scope.row[item.prop]}}
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)">
+          <span class="alert-num" @click="showBottomBox('alertMessageTab', scope.row)">
             <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
             {{scope.row[item.prop]}}
           </span>
@@ -74,7 +75,7 @@
 
         <template v-else-if="item.prop === 'cabinetNum'">
           <span class="alert-num" @click="showBottomBox('cabinet', scope.row)">
-            <i class="nz-icon nz-icon-cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
+            <i class="nz-icon nz-icon-cabinet monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
             {{scope.row[item.prop]}}
           </span>
         </template>
@@ -116,11 +117,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('asset.location'),
           prop: 'location',
@@ -128,11 +131,13 @@ export default {
         }, {
           label: this.$t('config.dc.cabinetNum'),
           prop: 'cabinetNum',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.dc.assets'),
           prop: 'assetNum',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.dc.alert'),
           prop: 'alertNum',
@@ -156,7 +161,8 @@ export default {
         }, {
           label: this.$t('config.dc.state'),
           prop: 'state',
-          show: true
+          show: true,
+          sortable:'custom'
         }
       ]
     }

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -120,11 +121,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
@@ -132,12 +135,14 @@ export default {
         }, {
           label: this.$t('project.project.project'),
           prop: 'project',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.asset'),
           prop: 'asset',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.module.module'),
@@ -152,12 +157,14 @@ export default {
         {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alerts',
-          show: true
+          show: true,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.state'),
           prop: 'state',
-          show: true
+          show: true,
+          sortable:'custom'
         }
       ]
     }

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -70,15 +71,18 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.gname'),
           prop: 'gname',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.exprTemp.expression'),
           prop: 'expression',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -104,11 +105,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('overall.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.mib.fileName'),
           prop: 'fileName',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -44,6 +45,12 @@
              {{scope.row.brand.name}}
          </template>
         <span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+        <template v-else-if="item.prop === 'assetNum'">
+          <span class="endpoint-num"  @click="showBottomBox('asset', scope.row)">
+             <i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
+          {{scope.row[item.prop]}}
+          </span>
+        </template>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
@@ -80,17 +87,20 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.model.name'),
           prop: 'name',
           show: true,
-          width: 160
+          width: 160,
+          sortable:'custom'
         }, {
           label: this.$t('config.model.brand'),
           prop: 'brand',
           show: true,
           width: 160
+          ,sortable:'custom'
         }, {
           label: this.$t('config.model.remark'),
           prop: 'remark',
@@ -99,7 +109,8 @@ export default {
           label: this.$t('config.model.assetNum'),
           prop: 'assetNum',
           show: true,
-          width: 200
+          width: 200,
+          sortable:'custom'
         }
       ]
     }

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -90,12 +91,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.moduleName'),
           prop: 'name',
           show: true,
-          minWidth: 200
+          minWidth: 200,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.type'),
           prop: 'type',
@@ -105,18 +108,21 @@ export default {
           label: this.$t('project.project.project'),
           prop: 'project',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('project.endpoint.endpoint'),
           prop: 'endpointNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('overall.remark'),

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

@@ -126,9 +126,6 @@ export default {
         return '-'
       }
     }
-  },
-  mounted () {
-    console.info(this.customTableTitle)
   }
 }
 </script>

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

@@ -4,6 +4,7 @@
     ref="dataTable"
     :data="tableData"
     :height="height"
+    style="width: calc(100% - 25px)"
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
@@ -25,6 +26,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -92,27 +94,32 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('project.project.project'),
           prop: 'name',
           show: true,
-          minWidth: 150
+          minWidth: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.module.module'),
           prop: 'moduleNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.endpoint'),
           prop: 'endpointNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         },
         {
           label: this.$t('overall.remark'),

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
       class="data-column"
     >
@@ -79,11 +80,13 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.roles.name'),
           prop: 'name',
-          show: true
+          show: true,
+          sortable:'custom'
         }, {
           label: this.$t('config.roles.description'),
           prop: 'remark',

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

@@ -25,6 +25,7 @@
       :prop="item.prop"
       :resizable="true"
       :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
       :width="`${item.width}`"
     >
       <template slot="header">
@@ -87,12 +88,14 @@ export default {
           label: 'ID',
           prop: 'id',
           show: true,
-          width: 80
+          width: 80,
+          sortable:'custom'
         }, {
           label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
-          width: 150
+          width: 150,
+          sortable:'custom'
         }, {
           label: this.$t('config.user.username'),
           prop: 'username',

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -141,7 +141,6 @@ export default {
       setTimeout(() => {
         this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + new Date(this.formatTime).getTime()).then(response => {
           this.loading = false
-          response = JSON.parse(localStorage.getItem('queryData'))
           if (response.status === 'success') {
             const results = response.data.result
             this.queryData = JSON.parse(JSON.stringify(results))
@@ -150,7 +149,7 @@ export default {
             this.$nextTick(this.$refs.dataTable.doLayout())
             if (!this.scrollbarWrap) {
               this.$nextTick(() => {
-                this.scrollbarWrap = this.$refs.dataTable.$refs.singleTable.bodyWrapper
+                // this.scrollbarWrap = this.$refs.dataTable.$refs.singleTable.bodyWrapper
                 // this.toTopBtnHandler(this.scrollbarWrap)
               })
             }

nezha-fronted/src/components/layout/container.vue

@@ -19,6 +19,7 @@ export default {
   box-sizing: border-box;
   height: calc(100% - 50px);
   background-color: #f6f6f6;
+  width: 100%;
 
   &>div {
     height: 100%;

nezha-fronted/src/components/layout/header.vue

@@ -23,14 +23,15 @@
         </div>
       </el-dropdown>
       <el-dropdown>
-        <div class="header-menu__item"><i class="nz-icon nz-icon-create-square"></i></div>
+        <div class="header-menu__item" @click="centerDialogVisible = true"><i class="nz-icon nz-icon-guide"></i></div>
-        <el-dropdown-menu slot="dropdown">
+        <!-- <el-dialog
-          <el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${createIndex}`">
+          title="Get started in 6 steps"
-            <div :id="'create-box-'+createIndex">
+          :visible.sync="centerDialogVisible"
-              <span>{{item.label}}</span>
+          :show="centerDialogVisible"
-            </div>
+          center>
-          </el-dropdown-item>
+          <path-navigation></path-navigation>
-        </el-dropdown-menu>
+        </el-dialog> -->
+        <path-navigation :show.sync="centerDialogVisible"></path-navigation>
       </el-dropdown>
     </div>
     <!--个人操作-->
@@ -68,10 +69,12 @@
 import bus from '../../libs/bus'
 import { mapActions } from 'vuex'
 import changePin from '../page/config/changePin'
+import PathNavigation from './path_navigation/PathNavigation'
 export default {
   name: 'Header',
   components: {
     'change-password': changePin,
+    PathNavigation
   },
   data () {
     return {
@@ -111,7 +114,8 @@ export default {
           permission: 'header_add_rule'
         }
       ],
-      showChangePin: false
+      showChangePin: false,
+      centerDialogVisible: false
     }
   },
   methods: {
@@ -239,6 +243,22 @@ export default {
       text-align: center;
       height: 36px;
       line-height: 50px;
+      .el-dialog{
+        width: 1000px;
+        height: 70px;
+        .el-dialog__header{
+          background-color: orange;
+          .el-dialog__title{
+            color: #fff;
+          }
+          .el-dialog__close{
+            color: #fff;
+            line-height: 50px;
+            font-size: 30px;
+          }
+        }
+      }
+      
     }
   }
   .header-menu--item {

nezha-fronted/src/components/layout/home.vue

@@ -52,7 +52,7 @@ export default {
   .body {
     display: flex;
     flex-direction: column;
-    flex: auto;
+    width: calc(100% - 240px);
     transition: all .2s;
   }
 }

nezha-fronted/src/components/layout/path_navigation/PathNavigation.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="navigation">
+    <el-dialog title="Get started in 6 steps" :visible.sync="show" center>
+      <el-tabs type="border-card">
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-datacenter1"></i> 我的行程</span
+          >
+          <div style="margin-top: 0">
+            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdsadasdasdasdasdasdasdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          </div>
+          <div style="margin-top: 0">
+            1sadssssssssssssssssssssssasddddddddddddddddddddddddddddddddddddsdasdassssssssssssssssssssssssssssssssssssssssssddddd
+          </div>
+          <el-button @click="addDatacenter">add a</el-button>
+          <el-button @click="addCabinet">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-agent"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAgent">add a</el-button>
+          <el-button @click="downloadAgent">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-menu-assets"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAsset">add a</el-button>
+          <el-button @click="importAsset">add b</el-button>
+          <el-button @click="webTerminal">add c</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-menu-project"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addPeoject">add a</el-button>
+          <el-button @click="addModule">add b</el-button>
+          <el-button @click="addEndpoint">add c</el-button>
+          <el-button @click="importEndpoint">add d</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-visualization"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addPanel">add a</el-button>
+          <el-button @click="addChart">add b</el-button>
+        </el-tab-pane>
+        <el-tab-pane>
+          <span slot="label"
+            ><i class="nz-icon nz-icon-terminal-log"></i> 我的行程</span
+          >
+          <div>1</div>
+          <el-button @click="addAlertRule">add a</el-button>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import DcBox from "@/components/common/rightBox/dcBox";
+export default {
+  props: {
+    show: Boolean,
+  },
+  components: {
+    DcBox
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // Datacenter
+    addDatacenter() {
+      this.$router.push({
+        path: "/dc",
+      });
+      this.$emit("update:show", false);
+    },
+    addCabinet() {
+      console.log(2);
+      console.log(this.$route);
+      this.$router.push({
+        path: "/dc/cabinet",
+      });
+      this.$emit("update:show", false);
+    },
+    // Angebt
+    addAgent() {
+      this.$router.push({
+        path: "/agent",
+      });
+      this.$emit("update:show", false);
+    },
+    downloadAgent() {
+      console.log(4);
+    },
+    // Asset
+    addAsset() {
+      this.$router.push({
+        path: "/asset",
+      });
+      this.$emit("update:show", false);
+    },
+    importAsset() {
+      console.log(6);
+    },
+    webTerminal() {
+      console.log(7);
+    },
+    // Monitor
+    addPeoject() {
+      this.$router.push({
+        path: "/monitor/project",
+      });
+      this.$emit("update:show", false);
+    },
+    addModule() {
+      console.log(9);
+    },
+    addEndpoint() {
+      console.log(10);
+    },
+    importEndpoint() {
+      console.log(11);
+    },
+    // Visualization
+    addPanel() {
+      this.$router.push({
+        path: "/panel",
+      });
+      this.$emit("update:show", false);
+    },
+    addChart() {
+      console.log(13);
+    },
+    // Alert
+    addAlertRule() {
+      this.$router.push({
+        path: "/alertRule",
+      });
+      this.$emit("update:show", false);
+    },
+  },
+  computed: {},
+};
+</script>
+<style lang="scss">
+.el-dialog__body {
+  background-color: #fff;
+  .el-tab-pane {
+    text-align: center;
+    div {
+      text-align: left;
+      line-height: 20px;
+    }
+    .el-button {
+      width: 156px;
+      height: 46px;
+      border-radius: 2px;
+      background-color: #666;
+      span {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

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

@@ -655,19 +655,6 @@ export default {
       }
       this.getTableData()
     },
-    // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.pageObj.orderBy = orderBy
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getTableData()
-    }
   }
 }
 </script>

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

@@ -84,9 +84,10 @@ export default {
         unit: 2,
         operator: '>',
         last: 60,
-        severity: 'P2',
+        severityId: '',
         summary: '',
-        description: ''
+        description: '',
+        method: []
       },
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
@@ -147,6 +148,17 @@ export default {
         }
       })
     },
+    edit (u) {
+      this.$get(`${this.url}/${u.id}`).then(response => {
+        if (response.code === 200) {
+          this.object = {
+            ...response.data,
+            method: response.data.method ? response.data.method.split(',').map(item => Number(item)) : []
+          }
+          this.rightBox.show = true
+        }
+      })
+    },
     initEvent () {
       bus.$on('alert-rule-list-change', () => {
         this.getTableData()

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

@@ -127,7 +127,7 @@ export default {
         linkId: '',
         reason: '',
         time: [],
-        matcher: [
+        matchers: [
           { name: '', value: '', regex: 0 }
         ],
         name: ''
@@ -172,7 +172,18 @@ export default {
       this.blackObject.endAt = bus.timeFormate(bus.getOffsetTimezoneData(1), 'yyyy-MM-dd hh:mm:ss')
       this.object = JSON.parse(JSON.stringify(this.blackObject))
       this.rightBox.show = true
+    },
+    edit (u) {
+      this.$get(`${this.url}/${u.id}`).then(response => {
+        if (response.code === 200) {
+          this.object = {
+            ...response.data,
+            matchers: JSON.parse(response.data.matchers)
           }
+          this.rightBox.show = true
+        }
+      })
+    },
   }
 }
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'pointer' : 'default'}" @click="$emit('click')">
-   <span class="nz-alert-tag__label">{{label}}</span>
+   <span class="nz-alert-tag__label"> {{label}}</span>
-   <span class="nz-alert-tag__content"><slot></slot></span>
+    <span class="nz-alert-tag__content"><span v-if="!!regex"> ~ </span> <slot></slot></span>
   </span>
 </template>
 
@@ -11,7 +11,8 @@ export default {
   props: {
     label: String, // 标题
     type: { type: String, default: 'normal' }, // normal:blue; success:green; info:gray; danger:red; warning:orange;
-    cursorPoint: { type: Boolean, default: true } // 是否鼠标悬停变手指
+    cursorPoint: { type: Boolean, default: true }, // 是否鼠标悬停变手指
+    regex: { type: Number, default: 0 }
   },
   methods: {
   },

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

@@ -56,7 +56,7 @@
     </nz-data-list>
     <!--侧滑-->
     <transition name="right-box">
-      <asset-meta-box v-if="rightBox.metaShow" ref="assetMetaBox" v-bind:asset-label="object" @close="closeRightBox"></asset-meta-box>
+      <asset-meta-box v-if="rightBox.metaShow" ref="assetMetaBox" :obj="object" @close="closeRightBox"></asset-meta-box>
     </transition>
     <transition name="right-box">
       <asset-meta-group v-if="rightBox.groupShow" :metaGroup="metaGroup" @close="closeRightBox"
@@ -128,9 +128,9 @@ export default {
         name: '',
         metaKey: '',
         groupId: '',
-        search: 1,
+        search: '0',
-        display: 1,
+        display: '0',
-        type: 'text',
+        type: 'TEXT',
         param: {},
         remark: ''
       },
@@ -227,14 +227,9 @@ export default {
     },
     add () {
       this.object = JSON.parse(JSON.stringify(this.blankObject))
-      console.log(this.object);
       this.rightBox.metaShow = true
     },
     edit (row) {
-      /* this.$get('asset/field/meta/' + row.id).then(res => {
-        this.object = { ...res.data, param: JSON.parse(res.data.param) }
-        this.rightBox.metaShow = true
-      }) */
       this.object = JSON.parse(JSON.stringify(row))
       this.rightBox.metaShow = true
     },

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

@@ -65,7 +65,6 @@ export default {
     showTab: String
   },
   components: {
-    mibBrowser,
     deleteButton,
     nzDataList,
     credentialsTable,

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

@@ -1,5 +1,166 @@
 <template>
-  <span class="mib-browser">
+  <div class="mib-browser" style="height: 100%">
+    <nz-data-list
+      v-if="showTab === 'browser'"
+      ref="dataList"
+    >
+      <template v-slot:top-tool-left>
+        <div id="module-type-1" class="nz-tab-item-box" @click="clickTab(['mib','file'],'file')">
+          <div class="nz-tab-item">{{$t("config.mib.mibFiles")}}</div>
+        </div>
+        <div id="module-type-2"  class="nz-tab-item-box">
+          <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibBrowser")}}</div>
+        </div>
+        <div id="module-type-3"  class="nz-tab-item-box" @click="clickTab(['mib','credentials'],'credentials')">
+          <div class="nz-tab-item">{{$t("config.mib.credentials")}}</div>
+        </div>
+      </template>
+      <template v-slot:top-tool-right>
+        <el-autocomplete
+          id="mib-browser-host"
+          v-model="searchParam.host"
+          :fetch-suggestions="assetSuggestion"
+          class="margin-r-20"
+          placeholder="IP"
+          size="small"
+          style="width: 100%;"
+          value-key="manageIp"
+          @input="assetChange"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.manageIp }}</div>
+          </template>
+        </el-autocomplete>
+        <el-input id="mib-browser-oid" v-model="searchParam.oid" class="margin-r-20" placeholder="OID" size="small"></el-input>
+        <div class="margin-r-10" style="width: 50%">
+          <el-select id="mib-browser-host" v-model="searchParam.operation" size="small">
+            <el-option v-for="item in operationData" :key="item" :value="item"></el-option>
+          </el-select>
+        </div>
+        <div class="top-tool-btn-group">
+          <el-popover :offset="-143" placement="bottom" trigger="click" width="300">
+            <div class="mib-browser-ad-search">
+              <el-select v-model="searchParam.snmpCredentialId" placeholder="Select credential" size="mini" style="width: 300px" value-key="id">
+                <el-option v-for="(item, index) in credentialData" :key="index" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </div>
+            <button id="browser-advanced" slot="reference" class="top-tool-btn" style="border-right: none;">
+              <i class="el-icon-more"></i>
+            </button>
+          </el-popover>
+          <button id="browser-go" :class="{'nz-btn-disabled': loading}" class="top-tool-btn" @click="search(false)">Go</button>
+        </div>
+      </template>
+      <template v-slot>
+        <div class="mib-browser-box">
+          <!--左半部分-->
+          <div class="mib-browser-left">
+            <div class="mib-browser-tree-title">
+              <span>SNMP MIBs</span>
+              <el-dropdown ref="modelDropdown" :hide-on-click="false" trigger="click" @command="selectModel">
+                <span class="mib-browser-table-op">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
+                <el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown el-dropdown-multi">
+                  <el-dropdown-item v-for="(item, index) in modelData" :key="index" :class="{'dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item">{{item.name}}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <!--tree-->
+            <div ref="treeScrollbar" class="mib-browser-tree">
+              <el-tree
+                ref="walkTree"
+                v-loading="treeLoading"
+                :data="walkData"
+                :expand-on-click-node="false"
+                :props="{label: 'name', children: 'subTree'}"
+                check-on-click-node
+                check-strictly
+                highlight-current
+                node-key="objectID"
+                @node-click="showDetail"
+              >
+                <div slot-scope="{node, data}" class="walk-tree-item">
+                  <span v-if="!data.type"><i class="nz-icon nz-icon-reading"></i></span>
+                  <span v-else>
+                    <i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
+                    <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
+                    <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
+                    <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
+                    <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
+                  </span>
+                  {{data.name}}
+                </div>
+              </el-tree>
+            </div>
+            <!--拖拽区-->
+            <div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
+            <!--detail-->
+            <div ref="detailScrollbar" class="mib-browser-detail">
+              <div class="mib-browser-detail-row">
+                <div>Name</div>
+                <div>{{currentWalk.name}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>OID</div>
+                <div>{{currentWalk.objectID}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>MIB</div>
+                <div>{{mibName(currentWalk.objectID)}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>Syntax</div>
+                <div>{{currentWalk.syntax}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>Access</div>
+                <div>{{currentWalk.access}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>Status</div>
+                <div>{{currentWalk.status}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>Indexes</div>
+                <div>{{currentWalk.index && currentWalk.index.length > 0 ? currentWalk.index : ""}}</div>
+              </div>
+              <div class="mib-browser-detail-row">
+                <div>Description</div>
+                <div>{{currentWalk.description}}</div>
+              </div>
+            </div>
+          </div>
+          <!--拖拽区-->
+          <div class="left-right-resize" @mousedown="leftRightResize"></div>
+          <!--右半部分-->
+          <div class="mib-browser-right">
+            <div class="mib-browser-table-title">
+              <span>Result table</span>
+              <span>
+                <span id="mib-browser-export" v-has="'snmp_browser_export'" :class="{'mib-browser-table-op-light': resultData.length == 0}" :title="$t('overall.exportExcel')" class="mib-browser-table-op" @click="exportXlsx"><i class="nz-icon nz-icon-download1"></i></span>
+                <span id="mib-browser-clear" :title="$t('overall.clear')" class="mib-browser-table-op" @click="clearResult"><i class="nz-icon nz-icon-close"></i></span>
+              </span>
+            </div>
+            <pl-table v-if="showTable" ref="resultTable" v-loading="loading" :datas="resultData" :empty-text="$t('config.mib.noData')" :pagination-show="false" :row-height="28"
+                      border class="mib-browser-table" size="small" style="width: 100%; height: 100%" use-virtual>
+              <pl-table-column v-slot="{row}" label="Name/OID">
+                <div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
+              </pl-table-column>
+              <pl-table-column v-slot="{row}" label="Value">
+                <template><div @click="searchParam.oid = row.oid">{{row.value}}</div></template>
+              </pl-table-column>
+              <pl-table-column v-slot="{row}" label="Type">
+                <template><div @click="searchParam.oid = row.oid">{{row.type}}</div></template>
+              </pl-table-column>
+              <pl-table-column v-slot="{row}" label="IP:Port">
+                <template><div @click="searchParam.oid = row.oid">{{row.ip + (row.port ? ":" + row.port : "")}}</div></template>
+              </pl-table-column>
+            </pl-table>
+          </div>
+        </div>
+      </template>
+    </nz-data-list>
+  </div>
+<!--  <span class="mib-browser">
     <div class="top-tools">
       <div class="nz-tab top-tool-main-right top-tool-main-right-to-left-little" style="width: 300px">
         <div class="nz-tab-item-box" @click="toFileTab" id="module-type-3">
@@ -33,7 +194,7 @@
           <el-input size="mini" v-model="searchParam.oid" placeholder="OID" id="mib-browser-oid"></el-input>
         </div>
         <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-l-20 mib-browser-btn-group">
-          <!--<div class="el-popover mib-browser-ad-tip" v-show="searchParam.version != 2 || searchParam.port != 161 || searchParam.community != 'public'"><i class="el-icon-more"></i></div>-->
+          &lt;!&ndash;<div class="el-popover mib-browser-ad-tip" v-show="searchParam.version != 2 || searchParam.port != 161 || searchParam.community != 'public'"><i class="el-icon-more"></i></div>&ndash;&gt;
           <el-select class="nz-input-group-left input-x-mini-24 operation" v-model="searchParam.operation" id="mib-browser-host">
             <el-option v-for="item in operationData" :key="item" :value="item"></el-option>
           </el-select><el-popover trigger="click" placement="bottom" @show="popShow" @hide="popHide">
@@ -59,7 +220,7 @@
                   </el-radio-group>
                 </el-col>
               </el-row>
-              <!--SNMP V3 setting-->
+              &lt;!&ndash;SNMP V3 setting&ndash;&gt;
               <template v-if="searchParamPop.version == 3">
                 <el-row class="mib-browser-ad-search-item">
                   <el-col :span="6">
@@ -136,7 +297,7 @@
       </div>
     </div>
     <div class="mib-browser-box">
-      <!--左半部分-->
+      &lt;!&ndash;左半部分&ndash;&gt;
       <div class="mib-browser-left">
         <div class="mib-browser-tree-title">
           <span>SNMP MIBs</span>
@@ -147,7 +308,7 @@
             </el-dropdown-menu>
           </el-dropdown>
         </div>
-        <!--tree-->
+        &lt;!&ndash;tree&ndash;&gt;
         <div class="mib-browser-tree" ref="treeScrollbar">
           <el-tree
             ref="walkTree"
@@ -174,9 +335,9 @@
             </div>
           </el-tree>
         </div>
-        <!--拖拽区-->
+        &lt;!&ndash;拖拽区&ndash;&gt;
         <div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
-        <!--detail-->
+        &lt;!&ndash;detail&ndash;&gt;
         <div class="mib-browser-detail" ref="detailScrollbar">
           <div class="mib-browser-detail-row">
             <div>Name</div>
@@ -212,9 +373,9 @@
           </div>
         </div>
       </div>
-      <!--拖拽区-->
+      &lt;!&ndash;拖拽区&ndash;&gt;
       <div class="left-right-resize" @mousedown="leftRightResize"></div>
-      <!--右半部分-->
+      &lt;!&ndash;右半部分&ndash;&gt;
       <div class="mib-browser-right">
         <div class="mib-browser-table-title">
           <span>Result table</span>
@@ -254,16 +415,17 @@
       </div>
       <div slot="footer" class="footer">
         <div class="el-message-box__btns">
-          <button @click="snmpSetFormVisible = false" class="el-button el-button--default el-button--small">{{$t("overall.cancel")}}</button>
+          <button @click="snmpSetFormVisible = false" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">{{$t("overall.cancel")}}</button>
-          <button @click="search(true)" class="el-button el-button--default el-button--small" id="mib-browser-search">{{$t("overall.ok")}}</button>
+          <button @click="search(true)" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small" id="mib-browser-search">{{$t("overall.ok")}}</button>
         </div>
       </div>
     </el-dialog>
-  </span>
+  </span>-->
 </template>
 
 <script>
 import fileSaver from 'file-saver'
+import nzDataList from '@/components/common/table/nzDataList'
 import xlsx from 'xlsx'
 
 export default {
@@ -271,6 +433,9 @@ export default {
   props: {
     showTab: String
   },
+  components: {
+    nzDataList
+  },
   data () {
     return {
       loading: false,
@@ -278,6 +443,15 @@ export default {
       snmpSetFormVisible: false, // snmp set表单
       searchParam: {
         host: '',
+        oid: '',
+        port: 161,
+        operation: 'get',
+        version: 2,
+        community: 'public',
+        snmpCredentialId: null
+      },
+      /* searchParam: {
+        manageIp: '',
         port: 161,
         oid: '',
         operation: 'get',
@@ -295,7 +469,7 @@ export default {
         value: ''
       },
       searchParamPop: {
-        host: '',
+        manageIp: '',
         port: 161,
         oid: '',
         operation: 'get',
@@ -309,9 +483,9 @@ export default {
           privProtocol: '',
           privPin: ''
         }
-      },
+      }, */
       operationData: ['get', 'walk', 'getnext', 'set'],
-      advancedShow: false,
+      // advancedShow: false,
 
       walkParam: { models: [] },
       walkData: [],
@@ -321,7 +495,9 @@ export default {
       assetData: [],
       showTable: true,
       typeData: ['OctetString', 'Integer', 'OID', 'Gauge', 'Counter32', 'IpAddress', 'TimeTicks', 'Counter64', 'UnsignedInteger', 'BITS', 'Float', 'DateAndTime'],
-      assetInputTimer: null
+      assetInputTimer: null,
+
+      credentialData: []
     }
   },
   computed: {
@@ -359,6 +535,14 @@ export default {
       return mibName || ''
     },
 
+    /* 获取右上角筛选数据 */
+    getCredentialData () {
+      this.$get('snmp/credential', { pageSize: -1 }).then(response => {
+        if (response.code === 200) {
+          this.credentialData = response.data.list
+        }
+      })
+    },
     /* 获取tree的数据 */
     getWalkData () {
       this.treeLoading = true
@@ -374,7 +558,7 @@ export default {
       })
     },
     getModelData () {
-      this.$get('model', { pageSize: -1, pageNo: 1 }).then(response => {
+      this.$get('asset/model', { pageSize: -1, pageNo: 1 }).then(response => {
         if (response.code === 200) {
           this.modelData = response.data.list
         }
@@ -390,14 +574,14 @@ export default {
       this.getWalkData()
     },
     search (set) {
-      if (this.loading) {
+      /* if (this.loading) {
         return
-      }
+      } */
 
-      this.popShow(); this.popHide() // 再调用一次，对数据赋值
+      // this.popShow(); this.popHide() // 再调用一次，对数据赋值
 
       /* 处理snmpset */
-      if (!set) {
+      /* if (!set) {
         if (this.searchParam.operation == 'set') {
           this.snmpSetFormVisible = true
           return
@@ -409,15 +593,15 @@ export default {
           return
         }
         this.snmpSetFormVisible = false
-      }
+      } */
-
+      console.info(this.searchParam)
       this.loading = true
       setTimeout(() => {
         this.$post('mib/browser', this.searchParam).then(response => {
           this.loading = false
           if (response.code === 200) {
             this.resultData = this.resultData.concat(response.data.list)
-            if (this.searchParam.operation == 'set') {
+            if (this.searchParam.operation === 'set') {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
             }
             this.showTable = false
@@ -431,14 +615,14 @@ export default {
       }, 300)
     },
 
-    popShow () {
+    /* popShow () {
       this.searchParamPop.host = this.searchParam.host
       this.searchParamPop.oid = this.searchParam.oid
       this.searchParamPop.operation = this.searchParam.operation
     },
     popHide () {
       this.searchParam = JSON.parse(JSON.stringify(this.searchParamPop))
-    },
+    }, */
     /* 清空result table */
     clearResult () {
       this.resultData = []
@@ -461,6 +645,9 @@ export default {
         }
       }
     },
+    clickTab (showTabInfo, showTab) {
+      this.$emit('changeShowTab', showTab)
+    },
     assetChange: function (value) {
       clearTimeout(this.assetInputTimer)
       this.assetInputTimer = setTimeout(() => {
@@ -496,7 +683,7 @@ export default {
         data = this.assetData
       } else {
         for (let i = 0; i < this.assetData.length; i++) {
-          if (this.assetData[i].host.indexOf(queryString) != -1) {
+          if (this.assetData[i].manageIp.indexOf(queryString) != -1) {
             data.push(this.assetData[i])
           }
         }
@@ -504,7 +691,7 @@ export default {
       callback(data)
     },
     getAssetData () {
-      this.$get('asset', { pageSize: -1, pageNo: 1 }).then(response => {
+      this.$get('asset/asset', { pageSize: -1, pageNo: 1 }).then(response => {
         if (response.code === 200) {
           this.assetData = response.data.list
         }
@@ -637,6 +824,7 @@ export default {
     this.getWalkData()
     this.getModelData()
     this.getAssetData()
+    this.getCredentialData()
     window.addEventListener('resize', this.domResize)
   },
   beforeDestroy () {
@@ -664,10 +852,6 @@ export default {
   overflow-y: auto;
 }
 .mib-browser {
-  .top-tool-search .el-input__inner {
-    height: 25px;
-    line-height: 25px;
-  }
   .operation {
     width: 90px;
   }
@@ -675,12 +859,6 @@ export default {
     border-radius: 0;
     border-right: 1px solid rgba(162,162,162,0.50);
   }
-  .oid-input.top-tool-search {
-    width: 380px;
-  }
-  .host-input.top-tool-search {
-    width: 160px;
-  }
   .mib-browser-btn-group {
     position: relative;
   }
@@ -715,11 +893,12 @@ export default {
   }
 
   .mib-browser-box {
-    border: 1px solid #D8D8D8;
+    display: flex;
-    border-radius: 4px;
     height: calc(100% - 55px);
     width: 100%;
-    display: flex;
+    border: 1px solid #D8D8D8;
+    border-radius: 4px;
+    box-sizing: border-box;
   }
 
   .mib-browser-left {
@@ -808,8 +987,23 @@ export default {
     border-top: none;
     border-bottom: none;
   }
-  .mib-browser-table-title {
+  .mib-browser-table {
-    margin-bottom: 10px;
+    height: calc(100% - 50px) !important;
+    width: calc(100% - 20px) !important;
+    padding: 10px;
+    .ant-table-scroll {
+      max-height: unset !important;
+      width: 100%;
+      height: 100%;
+
+      .el-table {
+        height: calc(100% - 20px) !important;
+        width: calc(100% - 20px) !important;
+      }
+      .el-table__body-wrapper td {
+        padding: 2px 0 !important;
+      }
+    }
   }
   .mib-browser-table-title, .mib-browser-tree-title {
     height: 30px;
@@ -825,6 +1019,7 @@ export default {
     display: inline-block;
     margin: 0 5px;
     cursor: pointer;
+    color: #666;
   }
   .mib-browser-table-op.mib-browser-table-op-light {
     color: #ccc;
@@ -835,6 +1030,10 @@ export default {
     font-weight: bold;
     color: #ee9d3f;
   }
+
+  .pagination-bottom {
+    display: none;
+  }
 }
 
 .mib-browser-table.nz-table th .cell {

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

@@ -75,6 +75,12 @@ export default {
         }]
       }
     }
+  },
+  methods: {
+    edit (row) {
+      this.object = { ...row }
+      this.rightBox.show = true
+    }
   }
 }
 </script>

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

@@ -1,8 +1,8 @@
 <template>
-    <div style="hight: 100%">
+  <div>
-      <mib-file :show-tab="showTab" v-if="showTab == 'file'" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></mib-file>
+    <mib-file v-if="showTab === 'file'" :show-tab="showTab" @changeShowTab="changeShowTab" @toBrowserTab="changeTab(['mib','browser'],'browser')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-file>
-      <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toCredentialTab="changeTab(['mib','credentials'],'credentials')"></mib-browser>
+    <mib-browser v-if="showTab === 'browser'" :show-tab="showTab" @changeShowTab="changeShowTab" @toCredentialTab="changeTab(['mib','credentials'],'credentials')" @toFileTab="changeTab(['mib','file'],'file')"></mib-browser>
-      <credentials :show-tab="showTab" v-if="showTab == 'credentials'" @changeShowTab="changeShowTab" @toFileTab="changeTab(['mib','file'],'file')" @toBrowserTab="changeTab(['mib','browser'],'browser')"></credentials>
+    <credentials v-if="showTab === 'credentials'" :show-tab="showTab" @changeShowTab="changeShowTab" @toBrowserTab="changeTab(['mib','browser'],'browser')" @toFileTab="changeTab(['mib','file'],'file')"></credentials>
   </div>
 </template>
 

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

@@ -197,7 +197,7 @@
 
           <!--   varType   -->
           <el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'temp'">
-            <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="form-item--end-with-btn" clearable placeholder="" popper-class="chart-box-dropdown-small prevent-clickoutside" size="small" value-key="chartType">
+            <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
               <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
                 <span class="panel-dropdown-label-txt" >{{item.name}}</span>
               </el-option>
@@ -300,7 +300,7 @@
                 @change="expressionChange"
                 @removeExpression="removeExpression"
               ></promql-input>
-              <el-row>
+              <el-row style="margin-top: 18px">
                 <el-col class="legend-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover placement="top" trigger="hover" width="211">

nezha-fronted/src/components/page/dashboard/explore/editor.vue

@@ -776,7 +776,7 @@ export default {
           $temp.quill.setSelection($temp.cursorIndex+text.length);
         },200)//此值必须大于userChangeTimer的值 */
     })
-    this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+    this.quill.clipboard.addmatchers(Node.ELEMENT_NODE, (node, delta) => {
       const ops = []
       delta.ops.forEach(op => {
         if (op.insert && typeof op.insert === 'string') {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="explore list-page">
     <div class="main-list">
-      <div class="main-container">
+      <div class="main-container" style="overflow: auto;">
         <!-- 顶部工具栏 -->
         <div class="top-tools" style="z-index: 1">
           <div class="top-tool-left"></div>
@@ -16,8 +16,7 @@
             </button>
           </div>
         </div>
-        <div class="top-tools" style="width: 100%;box-sizing: border-box; padding-left: 10px;">
+        <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
-          <div id="explore-promql-box" class="expression-room">
           <!--坑，这个index居然是从1开始-->
           <promql-input
             v-for="index of promqlKeys.length"
@@ -34,18 +33,17 @@
             @removeExpression="removeExpression"
           ></promql-input>
         </div>
-        </div>
+        <div ref="scrollWrap" style="height: auto; padding: 0 20px 4px;">
-        <div ref="scrollWrap" style="height: 100%; overflow: auto;">
+          <div v-show="!showIntroduce" class="chart-view"
-          <div class="chart-view right-margin" v-show="!showIntroduce"
                :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
             <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div>
             <div class="chart-room">
               <chart ref="exploreChart" :unit="chartUnit"></chart>
             </div>
           </div>
-          <div class="table-view right-margin" v-show="!showIntroduce"
+          <div v-show="!showIntroduce" class="table-view"
                :class="{'shrink-view':!tableVisible || !defaultTableVisible}" style="position: relative">
-            <div class="view-title" @click="changeTableVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top"></i>&nbsp;table</div>
+            <div class="view-title" style="position:absolute;z-index: 1000;top:4px;" @click="changeTableVisible"><i class="nz-icon nz-icon-caret-top"></i>&nbsp;table</div>
             <div class="table-room">
               <!-- 自定义table列 -->
               <transition name="el-zoom-in-top">
@@ -63,8 +61,7 @@
                         border
                         ref="exploreTable"
                         tooltip-effect="light"
-                        v-loading="tools.loading"
+                        v-loading="tools.loading">
-                        style="width: 100%;">
                 <el-table-column
                   :resizable="false"
                   v-for="(item, index) in tools.customTableTitle"
@@ -87,7 +84,7 @@
                           :append-to-body="false"></pagination>
             </div>
           </div>
-          <div class="introduce-view right-margin" v-show="showIntroduce">
+          <div v-show="showIntroduce" class="introduce-view">
             <div class="info-room">
               <div class="col-md-9 doc-content">
                 <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank" rel="noopener norefferrer"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
@@ -725,7 +722,6 @@ export default {
     padding: 24px;
     background-color: #e9edf2;
     border-top: 3px solid #3274d9;
-    margin-bottom: 16px;
     -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
     box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
     -webkit-box-flex: 1;
@@ -919,4 +915,7 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .explore .promqlInput:not(:first-of-type) {
+    margin-top: 10px;
+  }
 </style>

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="promqlInput">
     <div class="query-row">
-      <div class="query-input">
       <!--explore页面的样式-->
       <template v-if="styleType == 1">
         <div v-if="plugins.indexOf('metric-selector') > -1">
           <el-dropdown class="metric-selector">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-              <button class="top-tool-btn" type="button" @click="toggleDropdown">Metric
+            <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">Metric
-                &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></button>
+              &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
-              <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
+            <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
-                                 slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
+                               v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
-                                 :options="metricOptions" @change="metricChange">
+                               :props="{emitPath:false,}" @change="metricChange">
 
               <template slot-scope="{ node, data }">
                 <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
@@ -23,12 +22,20 @@
             </el-cascader-panel>
           </el-dropdown>
         </div>
-          <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
+        <div v-if="plugins.indexOf('metric-input') > -1" class="input-box" @click="dropDownVisible=false">
-            <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
+          <el-input :id="inputId" v-model="expressionList[index]" :autosize="{ minRows: 1, maxRows: 6}"
-                      @input="metricKeyDown" type="textarea"
+                    class="not-fixed-height no-resize" type="textarea"
-                      :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
+                    @input="metricKeyDown" @keyup.enter.native="expressionChange"></el-input>
-            <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
+          <div v-if="errorMsg" class="append-msg error"><span>{{errorMsg}}</span></div>
-            <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
+          <div v-if="appendMsg" class="append-msg error"><span>{{appendMsg}}</span></div>
+        </div>
+        <div class="top-tool-btn-group">
+          <button v-if="plugins.indexOf('add') > -1" class="top-tool-btn"
+               @click="addExpression"><i class="nz-icon nz-icon-plus"></i></button>
+          <button v-if="plugins.indexOf('copy') > -1" class="top-tool-btn"
+               @click="copyExpression"><i class="nz-icon nz-icon-override"></i></button>
+          <button v-if="plugins.indexOf('remove') > -1" class="top-tool-btn"
+               @click="removeExpression"><i class="nz-icon nz-icon-minus"></i></button>
         </div>
       </template>
       <!--right-box里的样式-->
@@ -70,17 +77,6 @@
           </el-row>
         </template>
     </div>
-    </div>
-    <div v-if="styleType == 1" style="margin-left: 10px">
-      <div class="query-options nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
-        <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="addExpression"
-             v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i></div>
-        <div @click="copyExpression" class="option nz-btn nz-btn-size-normal nz-btn-style-light"
-             v-if="plugins.indexOf('copy') > -1"><i class="nz-icon nz-icon-override"></i></div>
-        <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"
-             v-if="plugins.indexOf('remove') > -1"><i class="nz-icon nz-icon-minus"></i></div>
-      </div>
-    </div>
     <div v-if="styleType == 2&&showRemove">
       <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="nz-icon nz-icon-plus"></i>
       </div>
@@ -249,10 +245,8 @@ export default {
           const metricMap = new Map()
           metrics.forEach((item) => {
             let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+            if (/^[a-zA-Z_:][a-zA-Z0-9_:]*/.test(item)) {
-              key = item.split('_')[0]
+              key = item.split(/[_:]/, 1)[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
             } else {
               key = item
             }
@@ -548,10 +542,11 @@ export default {
     position: relative;
     width: 100%;
     display: flex;
-    margin-bottom: 18px;
   }
 
   .promqlInput .query-row {
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
   }
 
@@ -564,10 +559,6 @@ export default {
   .input-box .error {
     color: #F56C6C;
   }
-  .query-row .query-input {
-    display: flex;
-    justify-content: flex-start;
-  }
 
   .promqlInput .query-options {
     /*display: flex;*/
@@ -589,16 +580,11 @@ export default {
     background-color:   rgb(247, 248, 250);
   }
 
-  .query-input .metric-btn {
+  .query-row .input-box {
-    width: 100px;
+    flex: auto;
     margin-right: 10px;
   }
 
-  .query-input .input-box {
-    width: 100%;
-    height: 100%;
-  }
-
   .metric-btn {
     height: 29px !important;
     width: 105px;

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

@@ -109,7 +109,7 @@
           <div v-loading="topologyLoading"  class="content-col-content">
             <transition name = "el-zoom-in-center">
               <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
-                <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
+                <el-carousel :interval="5000" :autoplay="false" :trigger="'click'" arrow="hover">
                   <el-carousel-item v-for="(item,index) in allProject" :key="index">
                     <div class="maskLayer" @click="toProject(item)"></div>
                     <span class="project-name">{{item.name}}</span>
@@ -349,7 +349,7 @@ export default {
       })
     },
     queryAllProjectData () {
-      this.$get('/project', { pageSize: -1 }).then(res => {
+      this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
         const temp = []

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -127,7 +127,7 @@
           <div class="content-col-content"  v-loading="topologyLoading">
             <transition name = "el-zoom-in-center">
               <div style="width: 100%;height: 100%;position: relative" v-if="allProject&&allProject.length>0">
-                <el-carousel :interval="5000" arrow="hover" :trigger="'click'">
+                <el-carousel :interval="50000" :autoplay="false" arrow="hover" :trigger="'click'">
                   <el-carousel-item v-for="(item,index) in allProject" :key="index">
                     <div class="maskLayer" @click="toProject(item)"></div>
                     <span class="project-name">{{item.name}}</span>

nezha-fronted/src/components/page/monitor/project/project.vue

@@ -549,13 +549,6 @@ export default {
         }
       }
     },
-    getUserData () {
-      this.$get('sys/user/list').then(response => {
-        if (response.code === 200) {
-          this.userData = response.data.list
-        }
-      })
-    },
     // 刷新拓扑图
     visNetworkReload () {
       this.$refs.facade.$refs.visNetwork.reload()
@@ -617,7 +610,6 @@ export default {
     if (pageSize) {
       this.endpointPageObj.pageSize = pageSize
     }
-    this.getUserData()
   },
   mounted () {
     // 初始化表头

nezha-fronted/src/components/page/monitor/project/projectList.vue

@@ -23,9 +23,10 @@
           v-loading="slotProps.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="projectTableHeight"
           :table-data="tableData"
           :tableId="tableId"
+          style="padding-right: 0"
           @del="del"
           @edit="edit"
           @orderBy="tableDataSort"
@@ -35,7 +36,8 @@
       </template>
       <template v-slot:pagination>
         <div class="project-page">
-          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" style="width: calc(100% - 15px);padding-bottom: 6px;" @pageNo='pageNo'
+                      @pageSize='pageSize'></Pagination>
         </div>
       </template>
     </nz-data-list>
@@ -68,6 +70,7 @@ export default {
         name: '',
         remark: ''
       },
+      projectTableHeight: 'calc(100% - 58px)',
       tableId: 'projectTable',
       queryPermission: 'account_view',
       searchMsg: { // 给搜索框子组件传递的信息
@@ -140,8 +143,8 @@ export default {
 <style lang="scss">
   .project-list{
     .project-page{
-      margin: 0 10px 0 20px;
+      margin: 0 0 0 20px;
-      border: 1px solid #eeeeee;
+      border: 1px solid $--right-box-border-color;
       border-top: none;
       /deep/ .pagination{
         padding-top: 0;

nezha-fronted/src/main.js

@@ -33,7 +33,18 @@ import bus from '@/libs/bus'
 import theme from '@/assets/css/theme.scss'
 import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from 'v-selectpage'
-Vue.use(vSelectPage)
+Vue.use(vSelectPage, {
+  dataLoad: function (vue, url, params) {
+    if (params.pageNumber) {
+      params.pageNo = params.pageNumber
+    }
+    return new Promise((resolve, reject) => {
+      get(url, params).then(res => {
+        resolve(res)
+      }, e => reject(e))
+    })
+  }
+})
 Vue.use(myDatePicker)
 Vue.component('Pagination', Pagination)
 Vue.component('searchInput', searchInput)