Merge remote-tracking branch 'origin/dev-3.1' into dev-3.1.1_theme

# Conflicts:
#	nezha-fronted/src/assets/css/common.scss
#	nezha-fronted/src/assets/css/common/tableCommon.scss
#	nezha-fronted/src/assets/stylus/main.scss
#	nezha-fronted/src/components/charts/chart-list.vue
#	nezha-fronted/src/components/charts/logs.vue
#	nezha-fronted/src/components/common/alert/alertLabel.vue
#	nezha-fronted/src/components/common/alert/alertRuleInfo.vue
#	nezha-fronted/src/components/common/bottomBox/bottomBox.vue
#	nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
#	nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
#	nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
#	nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
#	nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
#	nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue
#	nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
#	nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue
#	nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
#	nezha-fronted/src/components/common/detailView/nzDetailView.vue
#	nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
#	nezha-fronted/src/components/common/labelFilter/clickSearch.vue
#	nezha-fronted/src/components/common/multipleTime.vue
#	nezha-fronted/src/components/common/pickTime.vue
#	nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
#	nezha-fronted/src/components/common/project/L5/topoTooltip.vue
#	nezha-fronted/src/components/common/project/popData/Info.vue
#	nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
#	nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
#	nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
#	nezha-fronted/src/components/common/table/settings/userTable.vue
#	nezha-fronted/src/components/layout/header.vue
#	nezha-fronted/src/components/page/alert/alertMessage.vue
#	nezha-fronted/src/components/page/alert/nzAlertTag.vue
#	nezha-fronted/src/components/page/asset/components/operation.vue
#	nezha-fronted/src/components/page/config/mibBrowser.vue
#	nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
#	nezha-fronted/src/components/page/dashboard/explore/logTab.vue
#	nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
#	nezha-fronted/src/components/page/dashboard/overview/overview2.vue
#	nezha-fronted/src/components/page/dashboard/panel.vue

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

@@ -69,6 +69,21 @@
 .orange-bg {
   background-color: $--color-primary !important;
 }
+.colorffa416{
+  color: #ffa416;
+}
+.colorec7f66{
+  color: #ec7f66;
+}
+.color535b64{
+  color: #535b64;
+}
+.color999999{
+  color: #999999;
+}
+.color23bf9a{
+  color: #23bf9a;
+}
 .timezone-area{
   display: inline-block;
   vertical-align: middle;
@@ -154,3 +169,10 @@ td .nz-icon-gear:before{
   box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
   border-radius: 2px;
 }
+.icon {
+  width: 5rem;
+  height: 5rem;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}

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

@@ -40,7 +40,11 @@
     }
   }
 }
-
+.right-box-container__left.right-box__container {
+  .el-textarea__inner {
+    padding: 5px 70px 4px 10px;
+  }
+}
 .right-box__container {
   .right-box-form{
     width: calc(100% - 60px);
@@ -89,20 +93,6 @@
       }
     }
   }
-  .form-row-item {
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 466px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: 0;
-        }
-      }
-    }
-  }
   .el-form-item {
     .el-input__count {
       line-height: 29px;
@@ -111,10 +101,8 @@
   }
   .el-form-item {
     .el-input--small.not-fixed-height {
-      height: 32px;
+      .el-textarea__inner {
-      .el-input__count {
+        min-height: 32px !important;
-        line-height: 29px;
-        height: 25px;
       }
     }
   }
@@ -316,7 +304,7 @@
   margin-bottom: 0 !important;
 
 }
-.api-select.right-public-box-select-top.right-public-box-dropdown-top {
+.api-select.right-box-select-top.right-public-box-dropdown-top {
   .el-scrollbar__view.el-select-dropdown__list {
     width: 210px;
     text-overflow: ellipsis;
@@ -324,9 +312,12 @@
     white-space: nowrap;
   }
 }
-.dc-dropdown.right-public-box-dropdown-top,.right-public-box-select-top.right-public-box-dropdown-top {
+.dc-dropdown.right-public-box-dropdown-top,.right-box-select-top.right-public-box-dropdown-top {
   margin: 5px 0 !important;
 }
+.time-picker-popover__select-top {
+  margin-top: 8px !important;
+}
 .agent-select {
   z-index: 2200 !important;
 }

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

@@ -50,6 +50,7 @@
 
     .top-tool-right {
       display: flex;
+      flex-shrink: 0;
     }
     .top-tool-left {
       display: flex;
@@ -476,6 +477,18 @@
 .fade-leave-active {
   transition: opacity 1s;
 }
+.table-no-data /deep/ .icon {
+  width: 5rem;
+  height: 5rem;
+}
+.table-no-data {
+  line-height: 21px;
+}
+.table-no-data__title {
+  font-size: 16px;
+  color: #333333;
+  font-weight: 400;
+}
 
 
 /*table提示样式*/

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

@@ -13,6 +13,7 @@
     justify-content: center;
     color: $--color-text-secondary;
     font-size: 14px;
+    flex-direction: column;
   }
   .nz-detail-view-left{
     width: 260px;
@@ -67,6 +68,11 @@
     color: $--color-text-regular;
     vertical-align: middle;
   }
+  /deep/ .bottom-log {
+    height: 100%;
+    overflow-y: auto;
+    padding-top: 15px;
+  }
 }
 .detail-view {
   .list-page div.main-container{

nezha-fronted/src/assets/css/components/common/project/topology.scss

@@ -536,3 +536,20 @@
 .selpop {
   cursor: pointer;
 }
+.topo-noData{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  .content{
+    text-align: center;
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+  }
+}
+.topo-noData /deep/ .icon{
+  width: 5rem;
+  height: 5rem;
+
+}

nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss

@@ -437,7 +437,7 @@
       right: 67px;
     }
     .legend-value-agent{
-      top: 168px;
+      top: 180px;
       right: 67px;
     }
     //.legend-value + .legend-value {

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1634288113261') format('woff2'),
+  src: url('iconfont.woff2?t=1635753657003') format('woff2'),
-       url('iconfont.woff?t=1634288113261') format('woff'),
+       url('iconfont.woff?t=1635753657003') format('woff'),
-       url('iconfont.ttf?t=1634288113261') format('truetype');
+       url('iconfont.ttf?t=1635753657003') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-import-failed:before {
+  content: "\e757";
+}
+
+.nz-icon-import-success:before {
+  content: "\e755";
+}
+
+.nz-icon-import-success1:before {
+  content: "\e753";
+}
+
+.nz-icon-import-failed1:before {
+  content: "\e754";
+}
+
+.nz-icon-stop:before {
+  content: "\e74a";
+}
+
+.nz-icon-no-data-panel:before {
+  content: "\e748";
+}
+
+.nz-icon-no-data-project:before {
+  content: "\e74f";
+}
+
+.nz-icon-no-data-list:before {
+  content: "\e750";
+}
+
+.nz-icon-ZD:before {
+  content: "\e74e";
+}
+
+.nz-icon-failed:before {
+  content: "\e749";
+}
+
+.nz-icon-unknown-error:before {
+  content: "\e74c";
+}
+
+.nz-icon-over:before {
+  content: "\e74b";
+}
+
+.nz-icon-connecting:before {
+  content: "\e74d";
+}
+
 .nz-icon-label:before {
   content: "\e747";
 }
@@ -397,10 +449,6 @@
   content: "\e6f7";
 }
 
-.nz-icon-ZD:before {
-  content: "\e6f9";
-}
-
 .nz-icon-revoke1:before {
   content: "\e6ee";
 }

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1634288113261') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1635753657003') format('woff2'),
-  url('./font/iconfont.woff?t=1634288113261') format('woff'),
+  url('./font/iconfont.woff?t=1635753657003') format('woff'),
-  url('./font/iconfont.ttf?t=1634288113261') format('truetype');
+  url('./font/iconfont.ttf?t=1635753657003') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-import-failed:before {
+  content: "\e757";
+}
+
+.nz-icon-import-success:before {
+  content: "\e755";
+}
+
+.nz-icon-import-success1:before {
+  content: "\e753";
+}
+
+.nz-icon-import-failed1:before {
+  content: "\e754";
+}
+
+.nz-icon-stop:before {
+  content: "\e74a";
+}
+
+.nz-icon-no-data-panel:before {
+  content: "\e748";
+}
+
+.nz-icon-no-data-project:before {
+  content: "\e74f";
+}
+
+.nz-icon-no-data-list:before {
+  content: "\e750";
+}
+
+.nz-icon-ZD:before {
+  content: "\e74e";
+}
+
+.nz-icon-failed:before {
+  content: "\e749";
+}
+
+.nz-icon-unknown-error:before {
+  content: "\e74c";
+}
+
+.nz-icon-over:before {
+  content: "\e74b";
+}
+
+.nz-icon-connecting:before {
+  content: "\e74d";
+}
+
 .nz-icon-label:before {
   content: "\e747";
 }
@@ -397,10 +449,6 @@
   content: "\e6f7";
 }
 
-.nz-icon-ZD:before {
-  content: "\e6f9";
-}
-
 .nz-icon-revoke1:before {
   content: "\e6ee";
 }

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

@@ -1217,6 +1217,78 @@ li {
   /*overflow-y: auto;*/
   margin-bottom: 20px;
 }
+.result-title-top{
+  font-family: Roboto-Regular;
+  font-size: 14px;
+  color: #333333;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+.nz-icon-import-success{
+  margin-right: 5px;
+  color: #23BF9A ;
+  font-size: 14px;
+  background: #fff;
+}
+.nz-icon-import-failed {
+  margin-right: 5px;
+  color: #EC7F66 ;
+  font-size: 14px;
+  background: #fff;
+}
+.result-detail {
+  opacity: 0.9;
+  background: #F6F8FA;
+  border: 1px solid #E7EAED;
+  border-radius: 2px;
+  padding: 12px;
+  margin-top: 10px;
+  height: 180px;
+  .import-result-item {
+    display: flex;
+    margin-bottom: 5px;
+    .line-num {
+      font-family: Roboto-Medium;
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: 0;
+      line-height: 16px;
+      font-weight: 600;
+      margin-right: 10px;
+    }
+    .line-content{
+      flex: 1;
+      font-family: Roboto-Black;
+      font-size: 14px;
+      color: #666666;
+      letter-spacing: 0;
+      line-height: 16px;
+      font-weight: 400;
+      overflow: hidden;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+    }
+  }
+}
+.result-success-box {
+  height: 256px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #666666;
+  letter-spacing: 0;
+  font-weight: 600;
+  .nz-icon-import-success {
+    color: #23BF9A;
+    font-size: 80px;
+  }
+  .result-success-txt{
+    margin-top: 10px;
+  }
+}
 .result-body{
   text-align: left;
   line-height: 20px;

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -60,6 +60,7 @@
             :height="'calc(100% - 46px)'"
             :customTableTitle="tableTitle"
             :tableId="''"
+            :detailList="false"
             :projectAlertId="'tableContainer'+chartIndex"
             @tableDataSort="tableDataSort"
             @del="deleteMessage"
@@ -82,8 +83,9 @@
             </div>
           </div>
           <alertMessageTable
-            :id="'tableContainer'+chartIndex"
+            :id="'tableContainerScreen'+chartIndex"
             :tableData="storedScreanTableData"
+            :detailList="false"
             :loading="loadingTable"
             :height="'calc(100% - 20px)'"
             :customTableTitle="tableTitle"
@@ -92,7 +94,7 @@
             @tableDataSort="tableDataSort"
             @del="deleteMessage"
             @messageDetail="messageDetail"
-            ref="alertListTable"
+            ref="alertListScreenTable"
             :form="'chartList'"
             :fromPath="'/alertList'"
             style="height: calc(100% - 50px)"
@@ -422,7 +424,7 @@ export default {
     screenDialogClose () {
       this.screenModal = false
       this.deleteBox.ids = []
-      this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection()
+      this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
     },
     selectChange (s) {
       const ids = []
@@ -886,10 +888,12 @@ export default {
     // 全屏查看
     showAllScreen () {
       this.dropdownMenuShow = false
-      this.storedScreanTableData = this.storedTableData
+      // this.storedScreanTableData = this.storedTableData
+      this.storedScreanTableData = JSON.parse(JSON.stringify(this.storedTableData))
       this.screenModal = true
       this.deleteBox.ids = []
-      this.$refs.alertListTable.$refs.alertListTable.clearSelection()
+      // this.$refs.alertListTable.$refs.alertListTable.clearSelection()
+      // this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
       this.screenPageObj = { ...this.pageObj }
     },
     // 设置数据, filter区分

nezha-fronted/src/components/charts/chart-list.vue

@@ -5,12 +5,34 @@
     position:relative;
     box-sizing: border-box;
   }
-  .noData{
+  .no-data{
-    text-align: center
+    height: 1189px;
+    width: 100%;
+    position: relative;
+    .icon {
+      width: 5rem;
+      height: 5rem;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -52px;
+      margin-left: -40px;
+      text-align: center;
+    }
+    .no-data-div {
+      position: absolute;
+      font-size: 16px;
+      color: #333333;
+      font-weight: 400;
+      margin-left: -29px;
+      top: 52.5%;
+      left: 50%
+    }
   }
   .list-width{
     width: 100%;
-    padding: 0 10px 5px 20px;
+    //height: 100%;
+    padding: 0 10px 5px 10px;
     box-sizing: border-box;
     overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
   }
@@ -211,7 +233,14 @@
                       :chart-index="index"></chart-group>
       </div>
    </draggable>
-    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
+<!--    <el-row v-if="dataList.length === 0"  class="noData"></el-row>-->
+    <div v-if="chartListNoData" class="no-data">
+      <svg class="icon" aria-hidden="true">
+        <use xlink:href="#nz-icon-no-data-panel"></use>
+      </svg>
+      <div class="no-data-div">No data</div>
+    </div>
+    <div v-else>&nbsp;</div>
     <!--<div class="page-shadow" v-if="showShadow"></div>-->
   </div>
 </template>
@@ -275,9 +304,11 @@ export default {
         start: '',
         end: ''
       },
+      chartListNoData: false,
       extraMarginBottom: 0, // dom额外的margin
       panelId: '',
       timer: null,
+      finshGetData: false,
       dataTotalList: [], // 懒加载：总记录数
       dataTotalListBak: [], // 用于查询：懒加载，总记录备份
       isPage: false, // 是否分页懒加载
@@ -488,13 +519,20 @@ export default {
         this.dataTotalListBak.forEach((item) => {
           item.isLoaded = false
           item.isHide = false
+          this.chartListNoData = false
           chartListTmp.push(item)
         })
       }
 
       this.dataTotalList = [...chartListTmp]
       this.dataList = [...this.dataTotalList]
-
+      let isAllHide = true
+      this.dataList.map(item => {
+        if (!item.isHide) {
+          isAllHide = false
+        }
+      })
+      this.chartListNoData = isAllHide
       this.$nextTick(() => {
         if (this.dataList.length > 0) {
           this.dataList.forEach((item, index) => {
@@ -566,6 +604,10 @@ export default {
 
     // 获取panel详情数据,获取panel下所有chart列表
     getData (params) {
+      if (this.finshGetData) {
+        return
+      }
+      this.finshGetData = true
       const param = {
         panelId: params.panelId,
         query: params.query,
@@ -646,16 +688,21 @@ export default {
       if (!params.panelId) { return } // 没有panelId不调用接口
       this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
         if (response.code === 200) {
+          setTimeout(() => {
+            this.finshGetData = false
+          }, 100)
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
           })
+          this.$emit('panel-list-loading', response.data.list)
           // chart数据存在dataTotalListBak中
-          if (response.data.list) {
+          if (response.data.list.length > 0) {
             this.dataTotalListBak = response.data.list
+            this.chartListNoData = false
           } else {
             this.dataTotalListBak = response.data
+            this.chartListNoData = true
           }
-
           let chartListTmp = []
           // 查询条件带name
           if (this.filter.searchName) {

nezha-fronted/src/components/charts/chart-table.vue

@@ -70,7 +70,7 @@
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
-                  <span style="padding: 0px 10px;">{{ scope.row.value}}</span>
+                  <span>{{ scope.row.value}}</span>
                 </div>
               </template>
             </el-table-column>

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

@@ -661,7 +661,7 @@ export default {
           },
           tooltip: { // 和 option.tooltip 的配置项相同
             show: true,
-            position: 'top',
+            position: 'bottom',
             formatter: function (param) {
               return param.title // 自定义的 DOM 结构
             },
@@ -769,7 +769,7 @@ export default {
                 if (i !== 0) {
                   str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
                 }
-                const value = bus.computeTimezone(item.data[0])
+                const value = bus.computeTimezone(item.data[0] - self.minusTime)
                 const tData = new Date(value)
                 str += '<div style="margin-bottom: 5px;margin-top: 5px">'
                 str += bus.timeFormate(tData)
@@ -943,6 +943,10 @@ export default {
         useUTC: false, // 使用本地时间
         series: dataArg
       }
+      if (!maxValueCopies.copies) {
+        option.yAxis.min = 0
+        option.yAxis.max = 1
+      }
       if (unit.type == 'Time') {
         delete option.yAxis.maxInterval
       }
@@ -1019,7 +1023,6 @@ export default {
               getChart(self.chartIndex).clear()
               getChart(self.chartIndex).setOption(option)// 创建图表
             }
-
             self.$refs['localLoading' + self.chartIndex].endLoading()
             self.firstShow = true // 展示操作按键
           }, 800)
@@ -1740,6 +1743,7 @@ export default {
             })
             if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
               const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+              this.minusTime = minusTime
               let cutPoint = 0
               res.forEach((item, index) => {
                 if (index < res.length / 2) {
@@ -1980,6 +1984,9 @@ export default {
       if (getChart(this.chartIndex)) {
         const divHeight = this.$refs.legendArea.offsetHeight
         getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
+        if (!getChart(this.chartIndex).getOption()) {
+          return
+        }
         let minInterval = ''
         let splitNumber = ''
         if (this.fromTopo) {

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

@@ -1,24 +1,24 @@
 <template>
-  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" ref="alertLabels">
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
     <div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">SN</div>
+        <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">ManageIp</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">State</div>
+        <div class="alert-label-title">{{$t('overall.type')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
@@ -29,30 +29,33 @@
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Asset Type</div>
+        <div class="alert-label-title">{{$t('overall.dc')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Brand</div>
+        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.brand')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Model</div>
+        <div class="alert-label-title">{{$t('overall.model')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">PingLastReply</div>
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Alert</div>
         <div class="alert-label-value">
-          <span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">DC</div>
+        <div class="alert-label-title">Endpoint</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
       </div>
     </div>
 
@@ -62,16 +65,36 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Project</div>
+        <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Description</div>
+        <div class="alert-label-title">Endpoint</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.remark')}}</div>
+        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
@@ -81,12 +104,38 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Description</div>
+        <div class="alert-label-title">{{$t('overall.module')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
+        <div class="alert-label-value">
+          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
+          <span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.remark')}}</div>
+        <div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
       </div>
     </div>
 
@@ -96,24 +145,62 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Project</div>
+        <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Module</div>
+        <div class="alert-label-title">{{$t('overall.module')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
+        <div class="alert-label-value">
+          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Alert</div>
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.asset.name ? alertLabelData.asset.name : '--'}}</span>
+        </div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">State</div>
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-value">
+           <span style="width: auto">
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <span style="width: auto">
+            <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+            <span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+        </div>
       </div>
     </div>
 
@@ -123,26 +210,38 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">name</div>
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Location</div>
+        <div class="alert-label-title">{{$t('overall.location')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Asset num</div>
+        <div class="alert-label-title">{{$t('overall.cabinet')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Alert</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
-      </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">State</div>
         <div class="alert-label-value">
-          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'oFF'}" class="active-icon"></div>
+          <i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>&nbsp;
-          {{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}
+          <span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.asset')}}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
+          <span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.alert')}}</div>
+        <div class="alert-label-value">
+          <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{$t('overall.state')}}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
+          <div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
+          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
+          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
         </div>
       </div>
     </div>
@@ -156,7 +255,10 @@ export default {
   props: {
     id: {},
     type: {},
-    that: {}
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
   },
   data () {
     return {
@@ -194,16 +296,27 @@ export default {
       const self = this
       return function (position) {
         const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const dialog = document.getElementsByClassName('el-dialog')[2] // 获取元素类名为 el-dialog的元素数组第二个
+        const dialogHeight = dialog.clientHeight // 获取元素窗口
+        const leftOffSetView = this.detailList ? -80 : 10
+        const topOffSetView = this.detailList ? 0 : 0
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 70 : 0
         const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
         if (position.top + elHeight > clientHeight) {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - elHeight - 20}px`
+            top: `${position.top - elHeight + topOffSet}px`
+          }
+        } else if (dialogHeight && this.alertTableDialog) { // dialogHeight 为获取的元素窗口,this.alertTableDialog // 为了判断是alertMessageTable页面使用的组件
+          return {
+            left: `${position.left + position.width - 40}px`,
+            top: `${position.top - 95}px`
           }
         } else {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + leftOffSetView}px`,
-            top: `${position.top - 20}px`
+            top: `${position.top + topOffSetView}px`
           }
         }
       }
@@ -289,3 +402,110 @@ export default {
 }
 
 </script>
+
+<style scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px 23px 10px 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .alert-labelUp {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-labelUp::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-label-info{
+    /*border: 1px solid #ebeef5;*/
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
+  }
+  .alert-label-title{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 23px;
+    min-width: 110px;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    height: 26px;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 23px;
+  }
+  .alert-label-remark {
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    max-width: 210px;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>

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

@@ -1,41 +1,61 @@
 <template>
-  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" v-loading="loading">
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" v-loading="loading">
     <div class="alert-rule-info" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
-        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div>
+        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
       </div>
       <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.alertName')}}</div>
+        <div class="alert-rule-title">{{$t('alert.name')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
+        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
       </div>
       <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-rule-title">{{$t('alert.type')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
+        <div class="alert-rule-value">{{alertRuleData.type ? alertRuleData.type : '--'}}</div>
-      </div>
-      <div class="alert-rule-box">
-        <div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
       </div>
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.severity')}}</div>
-        <div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
+        <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
-<!--        <div class="alert-rule-value severity">
+        <!--        <div class="alert-rule-value severity">
-          <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
+                  <span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
+                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
-          </span>
+                  </span>
-          <span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
+                  <span v-if="alertRuleData && alertRuleData.severity === 'P2'" class="P2">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
+                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P2'}).label}}
-          </span>
+                  </span>
-          <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
+                  <span v-if="alertRuleData && alertRuleData.severity === 'P3'" class="P3">
-            {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
+                    {{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P3'}).label}}
-          </span>
+                  </span>
-        </div>-->
+                </div>-->
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
+        <div class="alert-rule-value">
+          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
+          <span>{{alertRuleData.alertNum ? alertRuleData.alertNum : 0}}</span>
+        </div>
       </div>
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
         <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
       </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.state')}}</div>
+        <div class="alert-rule-value" style="margin-left: 3px">
+          <div v-if="alertRuleData.state === 1">
+            <i class="active-icon green-bg inline-block"></i>
+            {{ $t('overall.enabled') }}
+          </div>
+          <div v-else-if="alertRuleData.state === 0">
+            <i class="active-icon gray-bg inline-block"></i>
+            {{ $t('overall.disabled') }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -53,7 +73,8 @@ export default {
   data () {
     return {
       loading: true,
-      alertRuleData: ''
+      alertRuleData: '',
+      severityColor: ''
     }
   },
   components: {
@@ -72,12 +93,12 @@ export default {
         const elHeight = 50
         if (position.top + elHeight > clientHeight) {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + 200}px`,
             top: `${position.top - elHeight - 80}px`
           }
         } else {
           return {
-            left: `${position.left + position.width + 20}px`,
+            left: `${position.left + position.width + 200}px`,
             top: `${position.top - 80}px`
           }
         }
@@ -113,12 +134,18 @@ export default {
     },
     trbShotShow () {
       this.$emit('showText')
+    },
+    severityDataColor () {
+      this.severityData.map(item => {
+        this.severityColor = item.color
+      })
     }
   },
   mounted () {
     this.$get('/alert/rule/' + this.id).then((res) => {
       if (res.msg === 'success') {
         this.loading = false
+        this.severityDataColor()
         this.alertRuleData = res.data
       } else {
         this.$message.error(res.msg)
@@ -128,3 +155,170 @@ export default {
 }
 
 </script>
+
+<style scoped>
+  .alert-rule-tip {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px 23px 10px 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-tip::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: 100px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-rule-abs {
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-tip-Up {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-tip-Up::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    bottom: 95px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-rule-abs-Up {
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-info{
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-rule-box{
+    display: flex;
+    flex-direction: row;
+  }
+  .alert-rule-title{
+    text-align: left;
+    min-width: 110px;
+    color: #666;
+    padding: 0 3px 0 13px;
+  }
+  .alert-rule-value{
+    text-align: left;
+    color: #1a1a1a;
+    padding: 0 3px 0 13px;
+    width: 159px;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+  }
+  .severity .P1{
+    background: #F5846A;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .P2{
+    background: #F7A54A;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .severity .P3{
+    background: #F1C13D;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #FFFFFF;
+    padding: 2px 6px;
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+/*  .alert-rule-info::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    border: 5px;
+    border-style: dashed solid dashed dashed;
+    border-color: transparent #fff transparent transparent;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 0;
+    transform: translate(-100%, -100%);
+  }
+  .alert-rule-info{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }*/
+/*  .alert-rule-info{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+    display: flex;
+    background-color: white;
+    padding: 10px;
+    transform: translateY(-50%);
+    overflow-wrap: break-word;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-rule-box{
+    display: flex;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .alert-rule-title{
+    text-align: left;
+    width: 80px;
+    border-right: 1px solid #ebeef5;
+    color: #666;
+    padding: 0 3px 0 13px;
+  }
+  .alert-rule-value{
+    text-align: left;
+    color: #1a1a1a;
+    padding: 0 3px 0 13px;
+  }*/
+</style>

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

@@ -293,3 +293,135 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+/* begin--二级顶部工具栏*/
+.sub-top-tools {
+  display: flex;
+  height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #DCDFE6;
+  border-bottom: 1px solid #E4E7ED;
+  margin: 0 -6px;
+  padding-right: 80px;
+  background-color: $content-right-background-color;
+  margin-bottom: 10px;
+}
+.sub-top-tools>div {
+  margin-top: 2px;
+}
+.sub-top-tools .top-tool-search {
+  width: 260px;
+  margin: -1px 0 0 0;
+  .select_input input {
+    background-color: white;
+  }
+}
+.bottom-data-list .sub-container {
+  padding: 10px;
+  height: calc(100% - 64px);
+  background-color: #f6f6f6;
+  overflow-y: auto;
+  &>div {
+    background-color: white;
+  }
+  &>.nz-table2 {
+    height: 100%;
+    padding-top: 20px !important;
+  }
+}
+.sub-top-tools .top-tool-btn-txt .nz-icon{
+  display: inline-block;
+  font-size: 12px;
+  margin-right: 6px;
+}
+.sub-top-tool-right {
+  display: flex;
+  align-content: center;
+}
+.has-sub-popper {
+  color: $danger-color;
+}
+.sub-box {
+  height: 50%;
+  position: relative;
+}
+.sub-list {
+  height: calc(100% - 9px);
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  top: 9px;
+
+  .sub-list__tabs {
+    height: 100%;
+    background-color: white;
+
+    &>div {
+      height: 100%;
+      background-color: #f6f6f6;
+
+      &>.nz-table2 {
+        height: calc(100% - 92px);
+        padding: 20px 20px 0;
+      }
+    }
+    .chart-list{
+      .nz-table2 {
+        box-sizing: border-box;
+        padding: 0;
+      }
+    }
+  }
+}
+.main-and-sub-transition {
+  transition: .4s height;
+}
+
+.bottom-panel {
+  padding-top: 15px;
+  background-color: white;
+  /*padding-bottom: 50px;*/
+  /*height: calc(100% - 50px);*/
+  padding-bottom: 10px;
+  height: calc(100% - 30px);
+}
+.bottom-log {
+  padding: 15px;
+}
+.bottom-common {
+  padding: 20px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.chart-temp{
+  height: calc(100% - 20px);
+  overflow-y: auto;
+}
+.resize-modal {
+  width: calc(100% - 240px);
+  opacity: 0.6;
+  background-color: #f5f9ff;
+  border: 1px solid #a7d0f7;
+  box-sizing: border-box;
+  position: fixed;
+  cursor: ns-resize;
+  display: none;
+  z-index: 20;
+  vertical-align: bottom;
+  bottom: 0;
+}
+.bottom-box .sub-container{
+  height: calc(100% - 64px);
+}
+.bottom-box .sub-container .nz-table2{
+  height: calc(100% - 20px);
+}
+.asset-detail .sub-container .nz-table2 {
+  height: 100%;
+}
+.endpoint-tab-new .sub-container .nz-table2 {
+  height: 100%;
+}
+/* end--二级顶部工具栏*/
+</style>

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

@@ -15,7 +15,7 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
-        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
+        <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top">
           <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
         <pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
@@ -24,6 +24,7 @@
         <alertMessageTable
           ref="dataTable"
           :api="url"
+          :loading="tools.loading"
           :custom-table-title="tools.customTableTitle"
           :height="subTableHeight"
           :now-time="nowTime"
@@ -454,6 +455,9 @@ export default {
       this.deleteBox.show = true
     },
     messageDetail (row) {
+      if (row.alertRule.type == 3) {
+        return
+      }
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.graphShow = true

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

@@ -17,6 +17,7 @@
           ref="dataTable"
           :api="url"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :custom-table-title="tools.customTableTitle"
           :height="subTableHeight"
           :table-data="tableData"

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

@@ -17,6 +17,7 @@
           ref="dataTable"
           :api="url"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :custom-table-title="tools.customTableTitle"
           :height="subTableHeight"
           :table-data="tableData"

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

@@ -17,6 +17,7 @@
         <cabinet-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="subTableHeight"

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="full-width-height">
+  <div class="full-width-height endpoint-tab-new">
-   <nz-bottom-data-list
+    <nz-bottom-data-list
       :showTitle='showTitle'
       :api="url"
       :layout="['searchInput', 'elementSet']"
@@ -20,7 +20,7 @@
               <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
             </el-input>
           </div>
-          <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
+          <div class="margin-r-20 nz-btn-group">
             <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
             v-model="formatTime"
             type="datetime"
@@ -33,13 +33,13 @@
           >
           </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
           </div>
-          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
+          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
-            <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
+            <button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
               <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
-            </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
+            </button><button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
             <i class="nz-icon nz-icon-arrow-down"></i>
             <transition name="el-zoom-in-top">
-              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
+              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">
                 <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
                 <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
               </div>
@@ -57,6 +57,7 @@
           :hideSameLabels="hideSameLabels"
           :queryExpression="queryExpression"
           @changSelection="changSelectionF"
+          @selectedEndpointsChange="selectedEndpointsChange"
         />
       </template>
 <!--      <template v-slot:pagination>-->
@@ -119,7 +120,7 @@ export default {
       fromBottom: true,
       selectedEndpoints: [],
       queryExpression: '',
-      dropdownShow: '',
+      dropdownShow: false,
       timeout: null,
       formatTime: '',
       hideSameLabels: true
@@ -192,18 +193,18 @@ export default {
       this.$refs.endpointQueryTab.viewGraph()
     },
     dropdownHandler (show) {
-      if (show) {
+      if (!show) {
-        clearTimeout(this.timeout)
         this.dropdownShow = true
       } else {
-        this.timeout = setTimeout(() => {
+        this.dropdownShow = false
-          this.dropdownShow = false
-        }, 700)
       }
     },
     changSelectionF (arr) {
       this.changSelection = arr
     },
+    selectedEndpointsChange (n) {
+      this.selectedEndpoints = n
+    },
     toTop (wrap) {
       let currentTop = wrap.scrollTop
       const interval = currentTop / 10
@@ -219,3 +220,14 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+  .control-icon-unchecked {
+    color: #bcbec2;
+    cursor: not-allowed;
+    background-color: #f4f4f5;
+  }
+</style>

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

@@ -0,0 +1,727 @@
+<style scope>
+  .chart-bottom {
+    text-align: center;
+    margin-top: 16px;
+  }
+  .plTableBox.nz-table /deep/  .el-table{
+    display: block !important;
+  }
+.project-calendar{
+  margin-top: 2px;
+}
+  .control-icon-unchecked {
+    color: #999999;
+    cursor: not-allowed;
+  }
+</style>
+<style>
+  .endpoint-dialog .el-dialog__body{
+    height: calc(100% - 48px) !important;
+    padding-bottom: 0 !important;
+  }
+</style>
+<template>
+  <span style="z-index: 1999;position: relative">
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
+        class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
+        <div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
+      </div>
+      <div class="top-tool-right">
+        <div class="top-tool-search margin-r-20">
+          <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
+            <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
+          </el-input>
+        </div>
+        <div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
+          <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
+          v-model="formatTime"
+          type="datetime"
+          size="mini"
+          class="project-calendar nz-input-group-middle"
+          clearable
+          :time-arrow-control="true"
+          placeholder="Moment"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          @change="pickTime"
+        >
+          </my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
+        </div>
+        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
+          <button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
+            <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
+          </button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
+            <i class="nz-icon nz-icon-arrow-down"></i>
+            <transition name="el-zoom-in-top">
+              <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
+                <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
+                <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
+              </div>
+            </transition>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
+     <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
+               :pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
+               v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
+      <pl-table-column
+        type="selection"
+        width="39"
+        align="center"
+        column-key="sel"
+        :selectable="selectable">
+      </pl-table-column>
+      <pl-table-column
+        prop="element"
+        :resizable="true"
+        :min-width="1000"
+        column-key="element"
+        :show-overflow-tooltip="true"
+        :label="$t('project.endpoint.element')">
+        <template v-slot="scope">
+          <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
+            <div>
+              <ul>
+                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
+                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
+                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
+              </ul>
+            </div>
+            <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
+          </el-popover>
+          <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
+        </template>
+      </pl-table-column>
+      <pl-table-column
+        :resizable="false"
+        prop="value"
+        column-key="value"
+        :label="$t('project.endpoint.value')"
+        min-width="180">
+      </pl-table-column>
+    </pl-table>
+    <button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
+
+    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+               :title="$t('project.endpoint.dialogTitle')"
+               :visible.sync="graphShow"
+               width="90%"
+               :modal-append-to-body="false"
+               id="viewGraphDialog"
+               @close="dialogClose">
+      <div slot="title">
+        {{$t("project.endpoint.dialogTitle")}}
+        <div class="float-right panel-calendar dialog-tool" style="display: flex">
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
+          <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
+        </div>
+      </div>
+      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
+    </el-dialog>
+    <transition name="right-box">
+      <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
+    </transition>
+  </span>
+</template>
+
+<script>
+import chartBox from '../../../page/dashboard/chartBox'
+import axios from 'axios'
+import bus from '../../../../libs/bus'
+import chart from '../../../page/dashboard/overview/chart'
+
+let timeout
+let internal
+export default {
+  name: 'endpointQueryTab',
+  components: {
+    'chart-box': chartBox,
+    chart: chart
+  },
+  props: {
+    obj: Object, // 关联的实体对象
+    from: String
+  },
+  data () {
+    return {
+      chart: {},
+      tableShow: true,
+      dropdownShow: false,
+      loading: false,
+      tools: {
+        showTopBtn: false, // 主列表top按钮
+        tableHover: false
+      },
+      currentEndpoint: {},
+      queryData: [], // endpoint 查询列表数据
+      tableData: [],
+      tableDataCopy: '',
+      queryExpression: '',
+      elementMetricDatas: [], // element 列提示信息列表
+      formatTime: '', // 查询endpoint的时间，
+      selectedEndpoints: [], // 选中的metric{label='value'}
+      chartDatas: [], // 从query_range查询到的数据
+      legend: [], // echart legend
+      graphShow: false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+      panelData: [], // chart-box的panel下拉框数据,
+      hideSameLabels: true,
+      sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
+      chartUnit: 5,
+      rightBox: { show: false },
+      plTableSHow: true,
+      scrollTop: 0,
+      scrollbarWrap: null,
+      minusTime: 0
+    }
+  },
+  methods: {
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    },
+    saveChart () { // 新增chart
+      const chart = {
+        title: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: this.chartUnit,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [],
+        panel: '',
+        sync: 0
+      }
+      for (let i = 0; i < this.selectedEndpoints.length; i++) {
+        if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
+          chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
+        }
+      }
+      this.chart = chart
+      this.rightBox.show = true
+    },
+    dropdownHandler (show) {
+      if (show) {
+        clearTimeout(timeout)
+        this.dropdownShow = true
+      } else {
+        timeout = setTimeout(() => {
+          this.dropdownShow = false
+        }, 700)
+      }
+    },
+    createSuccess (type, response, param, panel) {
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'success'
+      }).then(() => {
+        bus.$emit('menu-change', 'panel')
+        this.$store.state.showPanel.id = panel.id
+        this.$store.state.showPanel.name = panel.name
+        this.$router.push({
+          path: '/panel',
+          query: {
+            t: +new Date()
+          }
+        })
+      })
+    },
+    tableReload () {
+      const table = this.$refs.endpointQueryTable
+      internal = setInterval(() => {
+        if (!window.resizing) {
+          table.setHeight()
+          clearInterval(internal)
+        }
+      }, 200)
+    },
+    queryEndpoint () {
+      this.loading = true
+      this.queryElementTips()
+      this.queryData = []
+      this.tableData = []
+      this.tableDataCopy = ''
+      setTimeout(() => {
+        this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response => {
+          this.loading = false
+          if (response.status === 'success') {
+            const results = response.data.result
+            this.queryData = JSON.parse(JSON.stringify(results))
+            this.tableData = this.handlerTableData(results)
+            this.tableDataCopy = JSON.stringify(this.tableData)
+            this.$nextTick(this.$refs.endpointQueryTable.doLayout())
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
+                this.toTopBtnHandler(this.scrollbarWrap)
+              })
+            }
+          }
+        })
+      }, 450)
+    },
+    clearSelectedMetrics () {
+      this.$refs.endpointQueryTable.clearSelection()
+    },
+    changeTime (size, unit) {
+      this.formatTime = this.getTime(size, unit)
+      this.showEndpoint()
+    },
+    pickTime () {
+      this.showEndpoint()
+    },
+    getTime (size, unit) { // 计算时间
+      const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
+      if (unit) {
+        switch (unit) {
+          case 'y':
+            now.setFullYear(now.getFullYear() + size)
+            break
+          case 'M':
+            now.setMonth(now.getMonth() + size)
+            break
+          case 'd':
+            now.setDate(now.getDate() + size)
+            break
+          case 'h':
+            now.setHours(now.getHours() + size)
+            break
+          case 'm':
+            now.setMinutes(now.getMinutes() + size)
+            break
+          case 's':
+            now.setSeconds(now.getSeconds() + size)
+            break
+          default:
+            console.error('unit error')
+        }
+      } else {
+        now.setSeconds(now.getSeconds() + size)
+      }
+      const year = now.getFullYear()
+      let month = now.getMonth() + 1
+      month = month < 10 ? '0' + month : month
+      let day = now.getDate()
+      day = day < 10 ? '0' + day : day
+      let hour = now.getHours()
+      hour = hour < 10 ? '0' + hour : hour
+      let minute = now.getMinutes()
+      minute = minute < 10 ? '0' + minute : minute
+      let second = now.getSeconds()
+      second = second < 10 ? '0' + second : second
+      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    },
+    handlerTableData (results) {
+      const tableData = []
+      for (const result of results) {
+        const metricName = result.metric.__name__
+        let temp = metricName
+        let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
+        const metricColor = ''
+        const bracketsColor = '#eb7b18'// #eb7b18
+        const labelColor = '#65bbd1'// #66d9ef
+        const valueColor = '#61c261'// #74e680
+        let colorTemp = `<span style="${metricColor}">${metricName}</span>`
+        let colorSimpleTemp = `<span>${metricName}</span>`
+        let metricTip = {}
+        const queryInfos = (this.elementMetricDatas.filter((item) => {
+          return item.metric === temp
+        }))
+        if (queryInfos && queryInfos.length > 0) {
+          metricTip = queryInfos[0]
+        } else {
+          metricTip.metric = temp
+        }
+        delete result.metric.__name__
+        temp += '{'
+        simpleTemp += '{'
+        colorTemp += `<span style="color: ${bracketsColor}">{</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
+        const keys = Object.keys(result.metric)
+        for (const index in keys) {
+          const key = keys[index]
+          temp += key + "='" + result.metric[key] + "',"
+          colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
+          if (!this.sameLabels.some((i) => { return i == key })) {
+            simpleTemp += key + "='" + result.metric[key] + "',"
+            colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
+          }
+        }
+        if (temp.indexOf(',') !== -1) {
+          temp = temp.substr(0, temp.length - 1)
+        }
+        if (simpleTemp.indexOf(',') !== -1) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
+        }
+        if (colorTemp.indexOf(',') !== -1) {
+          colorTemp = colorTemp.substr(0, colorTemp.length - 1)
+        }
+        if (colorSimpleTemp.indexOf(',') !== -1) {
+          colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
+        }
+
+        temp += '}'
+        simpleTemp += '}'
+        colorTemp += `<span style="color: ${bracketsColor}">}</span>`
+        colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
+        if (!/.+\{.+\}/.test(simpleTemp)) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
+        }
+
+        if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
+          const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
+          colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
+        }
+
+        const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
+        // this.tableData.push(edpQueryData);
+        tableData.push(edpQueryData)
+      }
+      return tableData
+    },
+    selectChange (selection) { // selection 选中的row的数组
+      this.selectedEndpoints = selection
+    },
+    selectable (row, index) {
+      if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
+        return false
+      } else {
+        return true
+      }
+    },
+    viewGraph () {
+      if (this.selectedEndpoints.length < 1) {
+        return
+      }
+
+      this.chartDatas = []
+      this.legend = []
+      this.graphShow = true
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.$nextTick(() => {
+        this.$refs.endpointChart.startLoading()
+        this.queryChartDate()
+      })
+    },
+    dialogClose () {
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+      this.graphShow = false
+    },
+    chartUnitChange (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.queryChartDate()
+      })
+    },
+    queryChartDate () {
+      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
+      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
+      this.searchTime = [start, end]
+      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
+      // end - start < 1 day : 15s
+      // end - start < 7 day : 5m
+      // end - start < 30 day : 10m
+      // end - start > 30 day : 30m
+      let step = '15s'
+      if (timeDiff < 1) {
+        step = '15s'
+      } else if (timeDiff < 7) {
+        step = '5m'
+      } else if (timeDiff < 30) {
+        step = '10m'
+      } else {
+        step = '30m'
+      }
+      const axiosArr = []
+      for (const endpoint of this.selectedEndpoints) {
+        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+      }
+      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+        const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        for (const endpoint of this.selectedEndpoints) {
+          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
+        }
+      }
+      this.legend = []
+      this.chartDatas = []
+      axios.all(axiosArr).then(res => {
+        res.forEach((response, promIndex) => {
+          if (response.status == 200) {
+            if (response.data.status == 'success') {
+              const queryData = response.data.data.result[0]
+              if (queryData) {
+                const chartData = {
+                  type: 'line',
+                  symbol: 'none', // 去掉点
+                  smooth: 0.2,
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  }
+                }
+                chartData.name = queryData.metric.__name__
+                let alias = queryData.metric.__name__
+                delete queryData.metric.__name__
+                chartData.name += '{'
+                alias += '{'
+                Object.keys(queryData.metric).forEach((item, index) => {
+                  const label = item
+                  const value = queryData.metric[label]
+                  chartData.name += label + "='" + value + "',"
+                  if (!this.sameLabels.some((i) => { return i == label })) {
+                    alias += label + "='" + value + "',"
+                  }
+                })
+                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
+                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
+                chartData.name += '}'
+                alias += '}'
+                if (!/.+\{.+\}/.test(alias)) {
+                  alias = alias.substr(0, alias.length - 2)
+                }
+                const legend = {
+                  name: chartData.name,
+                  alias: alias,
+                  // showText:this.formatLegend(chartData.name),
+                  isGray: false
+                }
+                if (promIndex >= this.selectedEndpoints.length) {
+                  legend.name = 'Previous ' + legend.name
+                  chartData.name = legend.name
+                  legend.alias = 'Previous ' + legend.alias
+                }
+                this.legend.push(legend)
+                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
+                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
+                })
+                this.chartDatas.push(chartData)
+              }
+            } else {
+              this.$message.error(response.data.error)
+              console.error(response.data)
+            }
+          }
+        })
+
+        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
+          const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+          this.minusTime = minusTime
+          let cutPoint = 0
+          res.forEach((item, index) => {
+            if (index < res.length / 2) {
+              cutPoint += res[index].data.data.result.length
+            }
+          })
+          this.chartDatas.forEach((item, index) => {
+            if (index >= cutPoint) {
+              this.chartDatas[index].data.forEach((item1, index1) => {
+                item1[0] = item1[0] + minusTime
+              })
+            }
+          })
+        }
+        this.$nextTick(() => {
+          if (this.$refs.endpointChart) {
+            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
+            this.$refs.endpointChart.setLegend(this.legend)
+            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
+            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
+            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
+            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
+            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
+            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
+            this.$refs.endpointChart.setSeries(this.chartDatas)
+            this.$refs.endpointChart.endLoading()
+          }
+        })
+      })
+    },
+    cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
+      if (row.columnIndex === 0) {
+        return 'disabledCheck'
+      }
+    },
+    getPanelData () { // 获取panel数据
+      this.$get('panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+        }
+      })
+    },
+    tableFilter () {
+      const temp = this
+      const tableDatas = JSON.parse(this.tableDataCopy)
+      this.tableData = tableDatas.filter((item) => {
+        const element = temp.hideSameLabels ? item.simpleElement : item.element
+        return element.indexOf(this.queryExpression) !== -1
+      })
+    },
+    tableFilterHistory (expression) {
+      let metric = ''
+      let labels = []
+      if (/\w*\{.*\}.*/i.test(expression)) {
+        metric = expression.substr(0, expression.indexOf('{'))
+        const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
+        const labelArr = labelStr.split(',')
+
+        if (labelArr.length > 0) {
+          labels = labelArr.map((item, index) => {
+            const temp = item.split('=')
+            const label = temp[0] ? temp[0] : null
+            const value = temp[1] ? temp[1] : null
+            return label ? { label: label, value: value } : null
+          })
+        }
+      } else {
+        metric = expression
+      }
+      this.tableData = []
+      let sourceData = JSON.parse(JSON.stringify(this.queryData))
+      sourceData = sourceData.filter((item) => {
+        const metricName = item.metric.__name__
+        if (metricName.indexOf(metric) === -1) {
+          return false
+        }
+
+        if (labels.length > 0) {
+          for (const i in labels) {
+            const label = labels[i]
+            if (label && label.label) {
+              const value = item.metric[label.label]
+              let queryVal = label.value
+              if (/^'.+'$/.test(queryVal)) {
+                queryVal = queryVal.substr(1, queryVal.length - 2)
+              }
+              if (!value || value != queryVal) {
+                return false
+              }
+            } else {
+              return true
+            }
+          }
+        }
+
+        return true
+      })
+      for (const i in sourceData) {
+        const item = sourceData[i]
+        // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
+        const metricName = item.metric.__name__
+        let temp = metricName
+        delete item.metric.__name__
+        temp += '{'
+        const hasLabel = true
+        for (const key in item.metric) {
+          const label = key
+          const value = item.metric[label]
+          temp += label + "='" + value + "',"
+        }
+        temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
+        temp += '}'
+        if (hasLabel) {
+          const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
+          this.tableData.push(edpQueryData)
+        }
+      }
+    },
+    focusInput () {
+      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+      this.$refs.elementQuery.focus()
+    },
+    blurInput () {
+      if (!this.queryExpression || this.queryExpression == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    clearInput () {
+      this.$refs.elementQuery.focus()
+    },
+    queryElementTips: async function () {
+      this.elementMetricDatas = []
+      const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
+      if (response && response.status === 200) {
+        if (response.data.msg === 'success') {
+          this.elementMetricDatas = response.data.data.list
+        }
+      }
+    },
+    getStateContent (row) {
+      if (row) {
+        if (row.state == 1) {
+          return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
+        } else {
+          return 'down' + '[' + this.getStateErrorMsg(row) + ']'
+        }
+      }
+    },
+    formatUpdateTime (date) {
+      const time = new Date(date)
+      const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
+      const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
+
+      return hours + ':' + minutes
+    },
+    getStateErrorMsg (row) {
+      const errCodes = [230009, 230010, 230011]
+      if (row) {
+        if (row.state == 0) {
+          if (errCodes.find((item) => { return row.stateInfo.code == item })) {
+            return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
+          } else {
+            this.$message.error('state code error')
+            return row.stateInfo.msg
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.currentEndpoint = JSON.parse(JSON.stringify(n))
+          this.queryEndpoint()
+        }
+      }
+    },
+    queryExpression (n, o) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    }
+  },
+  mounted () {
+    this.getPanelData()
+    setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
+  }
+}
+</script>

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

@@ -52,6 +52,7 @@
       :data="tableData"
       border
       v-loading="tools.loading"
+      :loading="tools.loading"
       class="nz-table endpoint-table"
       :height="$tableHeight.noPagination"
       :cell-class-name="messageStyle"

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

@@ -17,6 +17,7 @@
         <endpoint-table
           ref="dataTable"
           v-loading="tools.loading"
+          :loading="tools.loading"
           :api="url"
           :custom-table-title="tools.customTableTitle"
           :height="subTableHeight"

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

@@ -12,10 +12,18 @@
     <template v-slot:top-tool-right>
       <el-input v-model="matchContent" class="margin-r-10" placeholder="" size="small" suffix-icon="el-icon-search" @keyup.enter.native="queryLogData()">
         <el-select slot="prepend" v-model="matchSymbol" class="symbol-select" size="small" style="width: 60px;">
-          <el-option value="|="></el-option>
+          <el-option value="|=">
-          <el-option value="!="></el-option>
+            <span style="font-family: Inter-Regular">|=</span>
-          <el-option value="|~"></el-option>
+          </el-option>
-          <el-option value="!~"></el-option>
+          <el-option value="!=">
+            <span style="font-family: Inter-Regular">!=</span>
+          </el-option>
+          <el-option value="|~">
+            <span style="font-family: Inter-Regular">|~</span>
+          </el-option>
+          <el-option value="!~">
+            <span style="font-family: Inter-Regular">!~</span>
+          </el-option>
         </el-select>
       </el-input>
       <pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
@@ -23,8 +31,8 @@
       </pick-time>
     </template>
     <template v-slot>
-      <log-tab ref="logDetail" v-loading="loading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+      <log-tab ref="logDetail" v-loading="loading" :loading-bottom="endpointLoading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-      <div v-if="!logData" v-loading="loading" class="log-no-data">No Data</div>
+<!--      <div v-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>-->
     </template>
   </nz-bottom-data-list>
 </template>
@@ -55,7 +63,8 @@ export default {
       expressions: [''],
       matchSymbol: '|=',
       matchContent: '',
-      loading: true
+      loading: true,
+      endpointLoading: false
     }
   },
   methods: {
@@ -110,6 +119,11 @@ export default {
         })
         axios.all(requestArr).then(res => {
           this.logData = res.map(r => r.data)
+          if (this.logData[0].result.length > 0) {
+            this.endpointLoading = false
+          } else {
+            this.endpointLoading = true
+          }
         }).finally(() => {
           this.loading = false
         })

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

@@ -14,6 +14,7 @@
       <operation-log-table
         ref="dataTable"
         v-loading="tools.loading"
+        :loading="tools.loading"
         :api="url"
         :custom-table-title="tools.customTableTitle"
         :height="subTableHeight"

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

@@ -14,6 +14,7 @@
       <terminal-log-table
         ref="dataTable"
         v-loading="tools.loading"
+        :loading="tools.loading"
         :api="url"
         :custom-table-title="tools.customTableTitle"
         :height="subTableHeight"

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

@@ -12,7 +12,7 @@
                  :show-all-levels="false"
                  class="chart-unit"
                  placeholder=""
-                 popper-class="prevent-clickoutside unit-pop-class right-public-box-select-top right-public-box-dropdown-top"
+                 popper-class="prevent-clickoutside unit-pop-class right-box-select-top right-public-box-dropdown-top"
                  size="small"
                  style="border-radius: 0 2px 2px 0;"
                  @change="unitSelected"

nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue

@@ -22,7 +22,7 @@
                 </div>
                 <i class="nz-icon nz-icon-arrow-down search-value"/>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
                 <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
                  <el-checkbox-group v-model="selectValue[item.key]">
                     <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" :title="item3.name">
@@ -53,7 +53,7 @@
                 </div>
                 <i class="nz-icon nz-icon-arrow-down search-value"/>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
                 <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
                  <el-checkbox-group v-model="selectValue[item.key]">
                     <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
@@ -85,7 +85,7 @@
                 </div>
                 <i class="nz-icon nz-icon-arrow-down search-value"/>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
                 <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
                  <el-checkbox-group v-model="selectValue[item.key]">
                     <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >

nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue

@@ -24,8 +24,8 @@
         :class="item.id === detailViewRightObj.id ? 'selected' : ''"
         @click="detailViewRightShow(item)">
         <el-popover
-          placement="right"
+          placement="right-start"
-          popper-class="alert-message-tooltip"
+          popper-class="alert-message-tooltip alert-rule-detail"
           style="position: relative"
           @show="alertMessageHover(item, true)"
           @hide="alertMessageHover(item, false)"
@@ -227,3 +227,11 @@ export default {
   }
 }
 </script>
+<style>
+.alert-rule-detail {
+  left: 440px !important;
+}
+</style>
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue

@@ -27,11 +27,7 @@
         @mouseleave="labelHover(item, 'asset', false)">
         <div class="detail-row-info">
           <div class="asset-manageIp">
-            <span v-if="item.pingInfo" >
+            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
-              <span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
-            </span>
-            <span v-else style="display: inline-block;width: 13px">
-            </span>
             {{item.name}}
           </div>
           <div class="asset-name" :title="item.manageIp">{{item.manageIp}}</div>
@@ -40,6 +36,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'asset'"
         ></alertLabel>
       </li>
@@ -174,3 +171,7 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue

@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'dc'"
         ></alertLabel>
       </li>
@@ -57,7 +58,7 @@ export default {
   },
   data () {
     return {
-      tableTitle: [ // 原始table列
+      tableTitle: [
         {
           label: 'ID',
           prop: 'id',
@@ -65,36 +66,57 @@ export default {
           width: 80,
           sortable: 'custom'
         }, {
-          label: this.$t('project.module.moduleName'),
+          label: this.$t('overall.name'),
           prop: 'name',
           show: true,
           minWidth: 200,
           sortable: 'custom'
         }, {
-          label: this.$t('project.project.projectName'),
+          label: this.$t('asset.location'),
-          prop: 'project',
+          prop: 'location',
+          show: true
+        }, {
+          label: this.$t('config.dc.cabinetNum'),
+          prop: 'cabinetNum',
           show: true,
-          width: 200,
+          minWidth: 100,
-          sortable: 'custom'
-        },
-        {
-          label: this.$t('project.endpoint.endpoint'),
-          prop: 'endpointNum',
-          show: true,
-          width: 200,
           sortable: 'custom'
         }, {
-          label: this.$t('project.module.alerts'),
+          label: this.$t('config.dc.assets'),
-          prop: 'alertNum',
+          prop: 'assetNum',
           show: true,
-          width: 200,
+          minWidth: 90,
           sortable: 'custom'
-        },
+        }, {
-        {
+          label: this.$t('config.dc.alert'),
-          label: this.$t('overall.remark'),
+          prop: 'alertNum',
-          prop: 'remark',
+          show: true
+        }, {
+          label: this.$t('asset.tel'),
+          prop: 'tel',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('asset.principal'),
+          prop: 'principal',
+          show: false,
+          minWidth: 120
+        }, {
+          label: this.$t('config.dc.longitude'),
+          prop: 'longitude',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('config.dc.latitude'),
+          prop: 'latitude',
+          show: false,
+          minWidth: 100
+        }, {
+          label: this.$t('config.dc.state'),
+          prop: 'state',
           show: true,
-          minWidth: 150
+          minWidth: 100,
+          sortable: 'custom'
         }
       ]
     }
@@ -133,3 +155,7 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/detailList.scss

@@ -0,0 +1,101 @@
+.order-box{
+  display: flex;
+  height:40px;
+  padding: 0 15px;
+  line-height: 40px;
+  align-items: center;
+  /*.detail-select{*/
+  /*  height: 30px;*/
+  /*  line-height: 30px;*/
+  /*  flex: 1;*/
+  /*  /deep/ .el-input--small{*/
+  /*    height: 30px;*/
+  /*    line-height: 30px;*/
+  /*    background-color: rgba(9,30,66,0.08);*/
+  /*    border: none;*/
+  /*    color: #344563;*/
+  /*    input{*/
+  /*      height: 30px;*/
+  /*      line-height: 30px;*/
+  /*      background-color: rgba(9,30,66,0.08);*/
+  /*      border: none;*/
+  /*      color: #344563;*/
+  /*    }*/
+  /*  }*/
+  /*}*/
+  /*.detail-select:hover{*/
+  /*  /deep/ .el-input--small{*/
+  /*    input{*/
+  /*      background-color: rgba(9,30,66,0.13);*/
+  /*    }*/
+  /*  }*/
+  /*}*/
+  /*.detail-button{*/
+  /*  height: 28px;*/
+  /*  line-height: 28px;*/
+  /*  background-color: rgba(9,30,66,0.08);*/
+  /*  border: none;*/
+  /*  .nz-icon{*/
+  /*    color: #344563;*/
+  /*  }*/
+  /*}*/
+  /*.detail-button:hover{*/
+  /*  background-color: rgba(9,30,66,0.13);*/
+  /*}*/
+}
+.detail-row-box{
+  height: calc(100% - 40px);
+  overflow: hidden;
+  overflow-y: auto;
+}
+.detail-row{
+  width: 245px;
+  padding: 0px 0 0px 15px;
+  height: 60px;
+  border-bottom: 1px solid #E7EAED;
+  cursor: pointer;
+}
+.detail-row:last-of-type{
+  border-bottom: none
+}
+.detail-row-info{
+  display: flex;
+  height: 100%;
+  width: calc(100% - 15px);
+  justify-content:center;
+  flex-direction: column;
+  > div{
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+    .nz-icon{
+      font-size: 14px;
+      padding-right: 2px;
+    }
+  }
+  .asset-name {
+    padding-left: 22px;
+    width: calc(100% - 22px);
+    font-size: 14px;
+    color: #999999;
+    font-weight: 400;
+  }
+}
+.selected{
+  background: #FFFBF6;
+}
+.colorEF7458{
+  color: #EF7458;
+}
+.color23BF9A{
+  color: #23BF9A;
+}
+.colorFA901C{
+  color: #fa901c;
+}

nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue

@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'endpoint'"
         ></alertLabel>
       </li>
@@ -151,3 +152,7 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue

@@ -38,6 +38,7 @@
           v-if="item && item.loading"
           :id="item.id"
           :that="item"
+          :detail-list="true"
           :type="'module'"
         ></alertLabel>
       </li>
@@ -134,3 +135,7 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/terminalLogDetail/terminalLogDetail.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)"
+      >
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            <el-tooltip effect="light" placement="right">
+              <div slot="content">
+                {{getStatusText(item.status)}}
+              </div>
+              <span><i class="nz-icon" :class="statusClass(item.status)"/></span>
+            </el-tooltip>
+            <span>{{getRemoteText(item)}}</span>
+          </div>
+          <div class="asset-name">
+            <span>{{item.username?item.username:'-'}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+import { terminalLog } from '@/components/common/js/constants'
+import {calcDurationByStringTimeB} from "@/components/common/js/tools";
+export default {
+  name: 'terminalLogDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  computed: {
+    getStatusText () {
+      return function (status) {
+        return terminalLog.status[status]
+      }
+    },
+    getRemoteText () {
+      return function (record) {
+        return `${record.loginUser}@${record.host}:${record.port}`
+      }
+    },
+    statusClass () {
+      return function (status) {
+        switch (status) {
+          case 0:
+            return 'nz-icon-connecting color23bf9a'
+          case 1:
+            return 'nz-icon-failed colorffa416'
+          case 2:
+            return 'nz-icon-over color999999'
+          case 3:
+            return 'nz-icon-stop colorec7f66'
+          case 4:
+            return 'nz-icon-unknown-error color535b64'
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('config.terminallog.id'),
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.terminallog.SessionID'),
+          prop: 'uuid',
+          minWidth: 200,
+          show: true
+        }, {
+          label: this.$t('config.terminallog.username'),
+          prop: 'username',
+          minWidth: 200,
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.source'),
+          prop: 'sourceIp',
+          minWidth: 115,
+          show: true,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('config.terminallog.remote'),
+          prop: 'remote',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.protocol'),
+          prop: 'protocol',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.startTime'),
+          prop: 'startTime',
+          minWidth: 100,
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.duration'),
+          prop: 'duration',
+          show: true
+        },
+        {
+          label: this.$t('config.terminallog.authtype'),
+          prop: 'authType',
+          minWidth: 100,
+          show: false
+        },
+        {
+          label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
+          prop: 'state',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/list/userDetail/userDetail.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)"
+      >
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            <span class="flex-align-center">
+              <span v-if="item.status" >
+                <span :class="{'active-icon green-bg':item.status == 1,'active-icon gray-bg':item.status == 0}"></span>
+              </span>
+              <span v-else style="display: inline-block;width: 13px"></span>
+              <span class="user-name-top">{{item.name}}</span>
+              <el-tag size="mini" v-if="mfaEnable == '1' || item.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
+            </span>
+          </div>
+          <div class="asset-name">
+            <span>@{{item.username}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+import { terminalLog } from '@/components/common/js/constants'
+export default {
+  name: 'userDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          width: 600,
+          sortable: 'custom'
+        },
+        // {
+        //   label: this.$t('config.user.username'),
+        //   prop: 'username',
+        //   show: true,
+        //   width: 150
+        // },
+        {
+          label: this.$t('config.user.roles'),
+          prop: 'roles',
+          show: true,
+          width: 150
+        }, {
+          label: 'E-mail',
+          prop: 'email',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('config.user.lastLoginTime'),
+          prop: 'lastLoginTime',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('config.user.lastLoginIp'),
+          prop: 'lastLoginIp',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.source'),
+          prop: 'source',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.language'),
+          prop: 'lang',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.enable'),
+          prop: 'status',
+          show: true,
+          width: 100
+        }
+      ],
+      mfaEnable: localStorage.getItem('nz-mfa-enable')
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    getStatusText () {
+      return function (status) {
+        return terminalLog.status[status]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import '../detailList';
+</style>

nezha-fronted/src/components/common/detailView/nzDetailView.vue

@@ -17,12 +17,13 @@
             <el-dropdown
               type="primary"
               v-if="showLayout.indexOf('detailViewSet') > -1"
+              trigger="click"
               @command="changeDetailType">
               <button class="top-tool-btn table-column-setting"
                       type="button">
                 <i class="nz-icon nz-icon-detail-view" />
               </button>
-              <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
                 <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
                 <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
               </el-dropdown-menu>
@@ -31,7 +32,7 @@
           <!-- 顶部分页组件，当打开底部上滑框时出现 -->
           <!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
         </div>
-        <div :style="{ height: nzTableHeight }" class="nz-detail-view">
+        <div :style="{ height: nzTableHeight }" class="nz-detail-view" :class="dataLength?'':'nz-detail-view-no-data'">
           <div class="nz-detail-view-left" v-if="dataLength">
             <slot name="nz-detail-view-list"></slot>
             <div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
@@ -39,7 +40,10 @@
             </div>
           </div>
           <div v-else class="no-data">
-            No Data
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#nz-icon-no-data-list"></use>
+            </svg>
+            <div class="table-no-data__title">No results found</div>
           </div>
           <div class="nz-detail-view-right"   v-if="detailViewRightObj">
             <detailViewRight
@@ -178,3 +182,12 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  @import './detailView.scss';
+  .active{
+    color: #fa901c;
+  }
+  .nz-detail-view-no-data{
+    border-top: 1px solid #E7EAED;
+  }
+</style>

nezha-fronted/src/components/common/detailView/view/detailRightTop/detailRightTop.vue

@@ -54,9 +54,7 @@ export default {
   watch: {
     from: {
       immediate: true,
-      handler (n) {
+      handler (n) {}
-        console.log(n === fromRoute.asset)
-      }
     }
   }
 }

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -296,8 +296,75 @@ export default {
         this.targetTab = 'alertRuleAlertMessage'
       } else if (this.from === fromRoute.dc) {
         this.targetTab = 'cabinet'
+      } else if (this.from === fromRoute.terminalLog) {
+        this.targetTab = 'cmdTab'
+      } else if (this.from === fromRoute.user) {
+        this.targetTab = 'operationLogTab'
       }
     }
   }
 }
 </script>
+<style scoped lang="scss">
+  .detail-view-right-top{
+    height: 60px;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    margin-bottom: 10px
+  }
+  .sub-box{
+    height: 100%;
+    flex-direction: column;
+  }
+  .sub-list__tabs {
+    flex: 1;
+    background-color: white;
+    /*height: calc(100% - 82px);*/
+    height: calc(100% - 12px);
+    border: 1px solid #E7EAED;
+    &>div {
+      height: 100%;
+      &>.nz-table2 {
+        height: calc(100% - 92px);
+        padding: 20px 20px 0;
+      }
+    }
+    .chart-list{
+      .nz-table2 {
+        box-sizing: border-box;
+        padding: 0;
+      }
+    }
+  }
+  /deep/ .bottom-data-list .sub-container{
+    height: calc(100% - 45px);
+    position: relative;
+    padding: 0;
+    background-color: #fff;
+    overflow-y: hidden;
+  }
+  .sub-box /deep/ .top-tools.top-tools--sub{
+    border: none;
+    padding: 0 15px 0px 0px;
+    margin-right: 15px;
+    margin-left: 20px;
+    border-bottom: 1px solid #E7EAED;
+  }
+  .sub-box /deep/ .list-width {
+    padding: 0;
+  }
+  .sub-box /deep/ .nz-table2{
+    padding: 20px;
+    height: 100%;
+  }
+  .sub-box /deep/ .table-list{
+    padding: 0;
+    height: 100%;
+  }
+  .sub-box /deep/ .pagination-bottom {
+    bottom: -3px;
+  }
+  .sub-box /deep/ .sub-list-tab{
+    cursor: pointer;
+  }
+</style>

nezha-fronted/src/components/common/elSelect/MyElSelect.vue

@@ -135,7 +135,7 @@
 <script>
 import Emitter from 'pl-table/src/mixins/emitter'
 import Focus from 'pl-table/src/mixins/focus'
-import Locale from 'pl-table/src/mixins/locale'
+import Locale from 'element-ui/src/mixins/locale'
 import ElInput from 'pl-table/package/input'
 import ElSelectMenu from 'pl-table/package/select/src/select-dropdown.vue'
 import ElOption from 'pl-table/package/select/src/option.vue'

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

@@ -231,7 +231,7 @@ export const bottomBoxWindow = {
   fullScreen (vm) {
     window.resizing = true
     const contentRightDom = document.querySelector('.list-page') // 右侧内容区
-    const contentRightHeight = contentRightDom.offsetHeight// 可视高度
+    const contentRightHeight = contentRightDom.offsetHeight - 9// 可视高度
     vm.bottomBox.isFullScreen = true
     // 主列表
     vm.bottomBox.mainListHeight = document.querySelector('.main-list-with-sub').offsetHeight // 记录全屏前主列表的高度

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

@@ -6,7 +6,7 @@
         <template>
           <el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++">
             <template v-for="(item, j) in data.children">
-              <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
+              <el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value" :title="item.key || item.name || item.label">{{item.key || item.name || item.label}}</el-checkbox>
             </template>
           </el-checkbox-group>
         </template>
@@ -89,7 +89,7 @@ export default {
         let top
         switch (type) {
           case 'checkBox': {
-            top = 4
+            top = 8
             break
           }
           case 'dropdownCheckBox': {
@@ -317,7 +317,7 @@ export default {
       this.$set(item, 'isFocus', isFocus)
     },
     needMore (type, item, expand) {
-      const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 210
+      const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 240
       // 窗口尺寸没改变，则只重排当前type
       if (type && contentWidth === this.contentWidth) {
         this.titleSearchListCopy[type].width = 0

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

@@ -27,6 +27,12 @@ const cn = {
     unlocked: '已解锁',
     dashboard: '仪表盘',
     dc: '数据中心',
+    manageIp: '主机IP',
+    cabinet: '机柜',
+    brand: '品牌',
+    model: '型号',
+    location: '位置',
+    module: '模块',
     project: '系统',
     monitor: '监控',
     alert: '告警',
@@ -116,7 +122,12 @@ const cn = {
       failed: '失败',
       success: '成功',
       failedDetail: '失败详情',
-      line: '第{0}行:'
+      line: '第{0}行:',
+      successNum: '{successNum} 条记录导入成功',
+      failedNum: '{total} 条记录中有 {failedNum} 条导入失败',
+      successfully: '导入成功完成!',
+      imported: '已导入',
+      records: '条记录'
     },
     reset: '重置',
     submit: '保存',
@@ -131,11 +142,11 @@ const cn = {
       stack: '查看堆叠图',
       stackBack: '返回原始图'
     },
-    SyncSave: '保存同时更新 Assets',
+    SyncSave: '保存同时更新资产',
     copySuccess: '复制成功',
-    parent: '父级 asset',
+    parent: '父级资产',
-    children: '子级 asset',
+    children: '子级资产',
-    assetSubTab: '子级 asset',
+    assetSubTab: '子级资产',
     moreOption: '更多选项',
     copy: '复制',
     duplicate: '复制',
@@ -159,6 +170,9 @@ const cn = {
     unusual: '不正常',
     AuthenticationFailed: '认证失败',
     clearAllSelect: '清除选择的内容',
+    disabled: '已禁用',
+    enabled: '启用',
+    close: '关闭'
   },
   setup: {
     step0: '欢迎',
@@ -197,9 +211,9 @@ const cn = {
     username: '用户名',
     pin: '密码',
     alertPath: '网站URL',
-    alertPrefix: 'Alert prefix',
+    alertPrefix: '警报前缀',
-    haMode: 'HA mode',
+    haMode: 'HA 模式',
-    haVip: 'Virtual IP',
+    haVip: '虚拟的 IP',
     next: '下一步',
     back: '返回',
     finish: '完成',
@@ -226,14 +240,14 @@ const cn = {
     filePath: '文件路径',
     closeTip: '是否断开所有连接，关闭窗口？',
     remember: '记住我的决定',
-    protocol: 'Protocol',
+    protocol: '协议',
-    authType: 'Auth type',
+    authType: '认证类型',
     host: 'Host',
     port: 'Port',
-    authUsername: 'Username',
+    authUsername: '用户名',
-    authPin: 'Password',
+    authPin: '密码',
-    authUserTip: 'Username prompt',
+    authUserTip: '用户名提示',
-    authPinTip: 'Password prompt',
+    authPinTip: '密码提示',
     authPriKey: 'Key'
   },
   pageSize: '条/页',
@@ -242,9 +256,9 @@ const cn = {
     pin: '密码',
     login: '登录',
     verify: '验证',
-    verifyDialogTitle: 'Two Factor Authentication Set Up',
+    verifyDialogTitle: '双因子认证设置',
-    verifyTitle: 'Two-Factor Authentication',
+    verifyTitle: '双因子认证',
-    verifyContent: 'Enter the code from the two -factor app on your mobile device. If you\' ve lost your device, you may enter one of your recovery codes.',
+    verifyContent: '在您的移动设备上输入来自双因子应用程序的代码。 如果您丢失了设备，您可以输入您的恢复代码之一。',
     verifyPlaceholder: '验证码',
     bindFail: '绑定失败'
   },
@@ -276,9 +290,10 @@ const cn = {
         chartName: '图表名称',
         type: '类型',
         url: 'URL',
-        statistics: 'Statistics',
+        name: '名称',
+        statistics: '统计数据',
         sync: '同步到设备',
-        last: 'Last',
+        last: '最后的',
         threshold: '阈值',
         thresholds: '阈值',
         group: '组',
@@ -304,7 +319,7 @@ const cn = {
             staticTip: '双大括号中的内容将会在asset页面被替换'
           },
           singleStat: {
-            label: 'Single value'
+            label: '单值'
           },
           pie: {
             label: '饼图'
@@ -364,26 +379,26 @@ const cn = {
           state: '状态'
         },
         valMapping: {
-          name: 'Value mapping',
+          name: '值映射',
           from: 'From',
           to: 'To',
-          text: 'Text',
+          text: '文本',
           value: 'Value',
-          range: 'Range'
+          range: '范围'
         },
         legendValue: '图例选项',
         content: '内容',
-        tooltip: 'Tooltip',
+        tooltip: '工具提示',
         displayChart: '图表',
-        aggregation: 'Aggregation',
+        aggregation: '聚合',
         varType: '变量类型',
-        pid: 'Chart 模板',
+        pid: '图表模板',
-        selectAsset: '请选择Asset',
+        selectAsset: '请选择资产',
         selectEndpoint: '请选择Endpoint',
-        time: 'Time',
+        time: '时间',
-        descending: 'Descending',
+        descending: '降序',
-        wrapLines: 'Wrap lines',
+        wrapLines: '换行',
-        limit: 'Limit'
+        limit: '限制'
       },
       chartTableColumn: {
         metric: '指标',
@@ -500,8 +515,8 @@ const cn = {
           dc: '数据中心'
         },
         ok: 'OK',
-        alarm: 'Alarm',
+        alarm: '警报',
-        total: 'Total'
+        total: '全部的'
       },
       project: {
         project: '系统',
@@ -649,7 +664,7 @@ const cn = {
     sshAccount: 'SSH账号',
     protocol: '协议',
     sshProtocol: 'SSH',
-    telnetProtocol: 'Telnet',
+    telnetProtocol: '远程登录',
     userTip: '用户名提示',
     pinTip: '密码提示',
     reloginpinTip: 'RELOGIN提示',
@@ -725,6 +740,7 @@ const cn = {
     user: {
       userList: '用户列表',
       user: '用户',
+      state: '状态',
       name: '姓名', // "用户"
       username: '登录名', // 登录名
       roles: '角色',
@@ -798,12 +814,12 @@ const cn = {
       checkTime: '检查时间',
       dataCenter: '数据中心',
       agent: {
-        agent: 'Agent',
+        agent: '代理',
-        title: '下载Agent',
+        title: '下载代理',
         download: '下载',
         osType: 'OS 类型',
         autoScript: '自动安装脚本',
-        type: 'Agent类型'
+        type: '代理类型'
       }
     },
     agent: {
@@ -835,9 +851,9 @@ const cn = {
       authtype: '认证方式',
       statusItem: {
         connecting: '连接中',
-        connectionFailed: '连接失败',
+        connectionFailed: '发送失败',
         over: '已结束',
-        kickedOut: '被踢出',
+        kickedOut: '强制退出',
         unknownError: '未知错误'
       },
       option: '操作',
@@ -892,7 +908,8 @@ const cn = {
       loginUser: '登陆用户',
       sourceIp: '源 IP',
       sourceUser: '源用户',
-      SessionId: '会话 ID'
+      SessionId: '会话 ID',
+      stop: '停止'
     },
     dc: {
       dc: '数据中心',
@@ -954,16 +971,16 @@ const cn = {
       params: '请求参数',
       state: '请求结果',
       operations: {
-        add: 'add',
+        add: '添加',
-        query: 'query',
+        query: '询问',
-        update: 'update',
+        update: '更新',
         import: 'import',
         export: 'export',
-        delete: 'delete',
+        delete: '删除',
-        reset: 'reset',
+        reset: '重启',
-        unknown: 'unknown',
+        unknown: '未知',
-        login: 'login',
+        login: '登陆',
-        logout: 'logout'
+        logout: '登出'
       },
       response: '响应'
     },
@@ -1039,21 +1056,21 @@ const cn = {
         monitor: '监控',
         metricsTitle: '指标配置',
         logsTitle: '日志配置',
-        alertApi: 'Alert api',
+        alertApi: '告警 api',
         prometheusFederation: 'Federation',
         asset_ping_from: 'Ping from',
         metrics_storage_retention: '保存天数',
         metrics_storage_type: '保存模式',
         metrics_storage_s3_endpoint: 'Endpoint',
         metrics_storage_s3_bucket: 'Bucket name',
-        metrics_storage_s3_access_key: 'Access key',
+        metrics_storage_s3_access_key: '访问密钥',
-        metrics_storage_s3_secret_access_key: 'Secret key',
+        metrics_storage_s3_secret_access_key: '密钥',
         logs_storage_retention: '保存天数',
         logs_storage_type: '保存模式',
         logs_storage_s3_endpoint: 'Endpoint',
         logs_storage_s3_bucket: 'Bucket name',
-        logs_storage_s3_access_key: 'Access key',
+        logs_storage_s3_access_key: '访问密钥',
-        logs_storage_s3_secret_access_key: 'Secret key',
+        logs_storage_s3_secret_access_key: '密钥',
         logs_query_range_default_limit: '查询最大条数',
         local: '本地文件存储',
         s3: 'S3对象存储'
@@ -1082,14 +1099,14 @@ const cn = {
         terminal: '终端',
         terminalNum: '最大终端数量',
         timeout: '超时时间',
-        userTip: 'Telnet 用户名提示',
+        userTip: '远程登陆用户名提示',
-        pinTip: 'Telnet 密码提示',
+        pinTip: '远程登陆密码提示',
         localRetention: '本地存储'
       },
       ldap: {
         ldap: 'LDAP',
         address: 'LDAP地址',
-        dn: 'Bind DN',
+        dn: '绑定 DN',
         pin: '密码',
         ou: '用户OU',
         ouTip: '使用符号 "|" 分隔OU',
@@ -1103,7 +1120,7 @@ const cn = {
       link: {
         link: '链接',
         name: '名称',
-        url: 'Url',
+        url: 'URl',
         operation: '操作',
         add: '添加',
         update: '更新',
@@ -1233,8 +1250,8 @@ const cn = {
     },
     chartTemp: {
       chartTemp: '图表模板',
-      type: 'Type',
+      type: '类型',
-      varType: 'Variable type'
+      varType: '变量类型'
     }
   },
   alert: {
@@ -1253,6 +1270,10 @@ const cn = {
     notify: '通知', // "通知方式"
     startAt: '开始时间',
     endAt: '结束时间',
+    name: '名称',
+    state: '状态',
+    type: '类型',
+    alertNum: '告警数量',
     list: {
       linked: '关联',
       type: '类别',
@@ -1297,17 +1318,20 @@ const cn = {
         alertNumTrend: '告警数量趋势',
         affectEntity: '影响'
       },
-      timeout: 'Timeout(s)',
+      timeout: '超时时间(s)',
-      inr: 'Evaluation interval',
+      inr: '评估区间',
-      inrPlaceholder: 'Default global scrape interval',
+      inrPlaceholder: '默认全局抓取间隔',
-      inrError: 'Evaluation Interval cannot be less than 15',
+      inrError: '评估间隔不能小于 15',
-      autoExpired: 'Automatic expired',
+      autoExpired: '自动过期',
       state: '状态',
-      schedEnable: 'Schedule',
+      schedEnable: '日程',
-      schedDays: 'Effective time',
+      schedDays: '有效时间',
-      notifyActive: 'Active Notification',
+      more: '更多的',
-      notifyExpired: 'Expired notification',
+      effectiveConfig: '有效配置',
-      trbShot: 'Trouble shooting'
+      notificationConfig: '通知配置',
+      notifyActive: '主动通知',
+      notifyExpired: '过期通知',
+      trbShot: '故障排除'
     },
     silence: {
       name: '名称',
@@ -1381,7 +1405,7 @@ const cn = {
       contextName: '内容名称',
       alerts: '告警',
       privpin: '隐私密码',
-      asset: 'Asset',
+      asset: '资产',
       editEndpoint: '修改 Endpoint',
       createEndpoint: '新增 Endpoint',
       batchEndpoint: '批量 Endpoint',
@@ -1424,12 +1448,12 @@ const cn = {
       scrape_timeout_placeholder: '默认全局超时时间',
       protocol: '协议',
       type: '类型',
-      bearer_token: 'bearer token',
+      bearer_token: '第三方 token',
       username: '用户名',
       pin: '密码',
-      authTypeNull: 'none',
+      authTypeNull: '无',
-      authTypeWord: 'basic auth',
+      authTypeWord: '基础认证',
-      authTypeToken: 'bearer token',
+      authTypeToken: '第三方 token',
       name: '名称',
       configs: '配置',
       state: '状态',

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

@@ -103,7 +103,7 @@ const en = {
     importExcel: 'Import',
     importExcelLower: 'import',
     exportExcelLower: 'export',
-    rollbackImport: 'Rollback',
+    rollbackImport: 'Undo',
     exportCur: 'Current page',
     exportAll: 'All',
     importFile: 'Please upload file',
@@ -120,7 +120,12 @@ const en = {
       failed: 'Fail',
       success: 'Success',
       failedDetail: 'Failed Detail',
-      line: 'Line {0}:'
+      line: 'Line {0}:',
+      successNum: '{successNum} records imported successfully',
+      failedNum: '{failedNum} out of {total} records failed to import',
+      successfully: 'Import completed successfully!',
+      imported: 'You have imported',
+      records: 'records'
     },
     reset: 'Reset',
     submit: 'Save',
@@ -141,6 +146,12 @@ const en = {
     children: 'Children asset',
     assetSubTab: 'Children asset',
     dc: 'Data center',
+    manageIp: 'Manage IP',
+    cabinet: 'Cabinet',
+    brand: 'Brand',
+    model: 'Model',
+    location: 'Location',
+    module: 'Module',
     labels: 'Label',
     moreOption: 'More option',
     copy: 'Copy',
@@ -163,7 +174,10 @@ const en = {
     normal: 'Up',
     unusual: 'Down',
     AuthenticationFailed: 'Authentication failed',
-    clearAllSelect: 'Clear the selection'
+    clearAllSelect: 'Clear the selection',
+    disabled: 'Disabled',
+    enabled: 'Enabled',
+    close: 'Close'
   },
   pageSize: '/page',
   setup: {
@@ -287,6 +301,7 @@ const en = {
         type: 'Type',
         unit: 'Unit',
         url: 'URL',
+        name: 'Name',
         legend: 'Legend',
         statistics: 'Statistics',
         legendTip: 'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
@@ -733,6 +748,7 @@ const en = {
     user: {
       userList: 'User list', // "用户列表"
       user: 'User',
+      state: 'State',
       // 列表表头
       name: 'Name', // "用户"
       username: 'Username', // 登录名
@@ -876,9 +892,9 @@ const en = {
       authtype: 'AuthType',
       statusItem: {
         connecting: 'Connecting',
-        connectionFailed: 'Connection failed',
+        connectionFailed: 'Failed',
-        over: 'Over',
+        over: 'Close',
-        kickedOut: 'Kicked out',
+        kickedOut: 'Stopped',
         unknownError: 'Unknown error'
       },
       option: 'Operation', // "操作",
@@ -932,7 +948,8 @@ const en = {
       loginUser: 'Login user',
       sourceIp: 'Source IP',
       sourceUser: 'Source user',
-      SessionId: 'Session ID'
+      SessionId: 'Session ID',
+      stop: 'Stop'
     },
     operationlog: {
       operationlog: 'Operation log',
@@ -1255,6 +1272,10 @@ const en = {
     startAt: 'Start time', // "开始时间"
     notify: 'Notification', // "通知方式"
     endAt: 'End time', // "结束时间"
+    name: 'Name',
+    state: 'State',
+    type: 'Type',
+    alertNum: 'Alert',
     list: {
       // 表头
       linked: 'Linked', // "关联"
@@ -1309,6 +1330,9 @@ const en = {
       state: 'State',
       schedEnable: 'Schedule',
       schedDays: 'Effective time',
+      more: 'More',
+      effectiveConfig: 'Effective configuration',
+      notificationConfig: 'Notification configuration',
       notifyActive: 'Active Notification',
       notifyExpired: 'Expired notification',
       trbShot: 'Trouble shooting'

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

@@ -225,6 +225,7 @@ export default {
       } else {
         this.dataListLayout.push('clickSearch')
       }
+      localStorage.setItem('dataList-layout' + this.tableId, JSON.stringify(this.dataListLayout))
     },
     addSilence (row, type) {
       this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')

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

@@ -42,12 +42,26 @@ export default {
         this.detailViewLoading = false
         this.$refs.clickSearch && this.$refs.clickSearch.needMore()
         this.$refs[dataList].$refs.searchInput.sreach_num = 0
+        this.$refs[dataList].$refs.searchInput.select_list = []
         this.searchMsg.searchLabelList.forEach(searchLabel => {
           if (this.searchLabel[searchLabel.label]) {
-            this.$refs[dataList].$refs.searchInput.select_list.push({
+            let val = this.searchLabel[searchLabel.label]
-              ...searchLabel,
+            if (searchLabel.label === 'projectIds') {
-              val: this.searchLabel[searchLabel.label]
+              const project = this.$refs.dataList.$refs.searchInput.projectSelect.find(project => val == project.id || val == project.name)
-            })
+              val = project.name
+              const valnum = project.id
+              this.$refs[dataList].$refs.searchInput.select_list.push({
+                ...searchLabel,
+                val: val,
+                valnum: valnum
+              })
+            } else {
+              this.$refs[dataList].$refs.searchInput.select_list.push({
+                ...searchLabel,
+                val: val
+              })
+            }
+
             this.$refs[dataList].$refs.searchInput.sreach_num++
             this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
           }

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

@@ -15,7 +15,7 @@
             :visible-arrow="false"
             :disabled="isPopoverDisabled"
             trigger="hover"
-            popper-class="popper-z-index right-public-box-select-top right-public-box-dropdown-top"
+            popper-class="popper-z-index right-box-select-top right-public-box-dropdown-top"
             id="panel-calender-popover">
             <template v-if="this.searchTime&&this.searchTime.length>1">
               <el-row  :gutter="10" class="calendar-popover">
@@ -39,7 +39,7 @@
           </span>
             </div>
           </el-popover>
-          <el-dropdown-menu class="nz-dashboard-dropdown right-public-box-select-top right-public-box-dropdown-top popper-z-index" slot="dropdown">
+          <el-dropdown-menu class="nz-dashboard-dropdown right-box-select-top right-public-box-dropdown-top popper-z-index" slot="dropdown">
             <template v-for="(item, index) in timeData" >
               <el-dropdown-item v-if="item.id !== 12" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
                 {{item.text}}

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

@@ -2,7 +2,7 @@
   <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      class="el-picker-panel el-date-range-picker el-popper"
+      class="el-picker-panel el-date-range-picker el-popper time-picker-popover__select-top"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime

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

@@ -2,7 +2,7 @@
   <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
     <div
       v-show="visible"
-      class="el-picker-panel el-date-picker el-popper"
+      class="el-picker-panel el-date-picker el-popper right-box-select-top"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime

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

@@ -4,11 +4,11 @@
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
     <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
-      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="refreshDataFunc">
+      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
         <span><slot name="added-text"></slot></span>
       </button>
-      <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
+      <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
         <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
@@ -81,6 +81,7 @@ export default {
       theme: {
         themeColor: ''
       }
+      timer: ''
     }
   },
   created () {
@@ -112,13 +113,10 @@ export default {
       }
     },
     dropdownHandler (show) {
-      if (show) {
+      if (!show) {
-        clearTimeout(timeout)
         this.dropdownShow = true
       } else {
-        timeout = setTimeout(() => {
+        this.dropdownShow = false
-          this.dropdownShow = false
-        }, 700)
       }
     },
     getIntervalData (interval) { // interval:结束时间到现在的秒数
@@ -145,6 +143,20 @@ export default {
       this.searchTime = time
       this.$emit('change', this.searchTime)
       this.refreshDataFunc()
+    },
+    antiShake () {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.refreshDataFunc()
+          this.timer = ''
+        }, 200)
+      } else {
+        this.timer = setTimeout(() => {
+          this.refreshDataFunc()
+          this.timer = ''
+        }, 200)
+      }
     }
   },
   watch: {

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
+  <el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
     <div>
       <div class="pop-item-wider">
 

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top" transition="slide">
+  <el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel right-box-select-top" transition="slide">
     <div>
       <div class="pop-item-wider">
 

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
+  <el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
     <div>
       <div class="pop-item-wider">
 

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

@@ -1,5 +1,5 @@
 <template>
-  <el-popover :disabled="disabled" @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="right-public-box-select-top right-public-box-dropdown-top nz-pop nz-pop-select-walk" transition="slide">
+  <el-popover :disabled="disabled" @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="right-box-select-top right-public-box-dropdown-top nz-pop nz-pop-select-walk" transition="slide">
     <div class="pop-item-wider" @click="tempWalk.detailShow = false">
       <div v-if="tempWalk.detailShow" class="el-popover walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
         <p><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{tempWalk.name}}</span></p>

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

@@ -1,9 +1,9 @@
 <template>
-  <el-dropdown :size="size">
+  <el-dropdown trigger="click" :size="size">
     <button id="more" :class="triggerButtonClass" title="more...">
       <i class="nz-icon nz-icon-more2"></i>
     </button>
-    <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+    <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
       <el-dropdown-item  v-if="showLock">
         <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
       </el-dropdown-item>
@@ -19,7 +19,7 @@
       <slot name="after"></slot>
     </el-dropdown-menu>
 
-    <el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
+    <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
       <div v-if="importBox.type == 1">
         <div class="upload-body">
           <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false"  :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls"  action="" class="upload-demo" drag>
@@ -56,29 +56,41 @@
       </div>
       <div v-if="importBox.type==3">
         <div class="upload-body result-body">
-          <div>
+          <div v-if="importResult&&importResult.failNum">
-            <span class="result-title">{{$t('overall.result.total')}}:</span>
+            <div class="result-title-top">
-            <span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
+              <div class="">
-          </div>
+                <i class="nz-icon nz-icon-import-success"/>
-          <div>
+                 <span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
-            <span class="result-title">{{$t('overall.result.failed')}}:</span>
-            <span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
-            <span class="result-title">{{$t('overall.result.success')}}:</span>
-            <span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
-          </div>
-          <div>
-            <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
-            <div v-if="importResult&&importResult.failDetail" class="result-detail">
-              <div style="height: 100%; overflow: auto;">
-                <template v-for="(item, index) in importResult.failDetail">
-                  <div :key="index" class="import-result-block">
-                    <div class="import-result-item">
-                      <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
-                      <div>{{item.errorMsg}}</div>
-                    </div>
-                  </div>
-                </template>
               </div>
+              <div class="">
+                 <i class="nz-icon nz-icon-import-failed"/>
+                 <span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
+              </div>
+            </div>
+            <div>
+              <div v-if="importResult&&importResult.failDetail" class="result-detail">
+                <div style="height: 100%; overflow: auto">
+                  <template v-for="(item, index) in importResult.failDetail">
+                    <div :key="index" class="import-result-block">
+                      <div class="import-result-item">
+                        <div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
+                        <div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="result-success-box">
+            <div>
+              <i class="nz-icon nz-icon-import-success"/>
+            </div>
+            <div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
+            <div class="result-success-txt">
+              {{$t('overall.result.imported')}}
+              <span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
+              {{$t('overall.result.records')}}
             </div>
           </div>
         </div>
@@ -87,6 +99,9 @@
             <button :id="id+'-xlsx-import-rollback'"  class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
               <span>{{$t('overall.rollbackImport')}}</span>
             </button>
+            <button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
+              <span>{{$t('overall.close')}}</span>
+            </button>
           </div>
         </div>
       </div>
@@ -132,7 +147,8 @@ export default {
       importFileList: [],
       importResult: null,
       exportShow: false,
-      panelLock: true
+      panelLock: true,
+      language: localStorage.getItem('nz-language')
     }
   },
   mounted () {
@@ -224,9 +240,11 @@ export default {
     },
     closeDialog () {
       this.importBox.show = false
-      this.importResult = null
+      this.$nextTick(() => {
-      this.importFileList = []
+        this.importResult = null
-      this.importFile = null
+        this.importFileList = []
+        this.importFile = null
+      })
     },
     downloadTemplate () {
       const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文

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

@@ -457,3 +457,79 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  .tooltip-box{
+      padding: 10px;
+      max-height: 400px;
+      min-height: 200px;
+      height: 100%;
+      box-sizing: border-box;
+      background: #FFFFFF;
+      border: 1px solid #E7EAED;
+      box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+      border-radius: 3px 3px 3px 3px;
+
+    .tooltip-box-chart{
+      max-height: 400px;
+      min-height: 200px;
+      height: 100%;
+      display: flex;
+      overflow: hidden;
+      .line-chart{
+        width: 300px;
+        flex: 1;
+        /deep/ .resize-box{
+          border: none;
+        }
+      }
+      .chart-remark{
+        white-space: pre-wrap;
+        width: 110px;
+        font-size: 12px;
+        color: #666666;
+        letter-spacing: 0;
+        font-weight: 400;
+        word-break: break-word;
+        padding-right: 5px;
+        height: calc(100% - 29px) !important;
+        margin-top: 29px;
+        padding-top: 5px;
+        line-height: 16px;
+        border-top: 1px dashed  #DCE1E7;
+      }
+    }
+    .tooltip-box-info{
+      border: 1px solid #E7EAED;
+      background: #FFFFFF;
+      max-height: 400px;
+      min-height: 200px;
+      min-width: 186px;
+      max-width: 300px;
+    }
+      /deep/ .line-area{
+          padding: 0;
+      }
+  }
+/deep/ .topology-chart-title{
+    text-align: left;
+    width: 100%;
+    line-height: 19px;
+    padding: 5px 0 5px 10px;
+    height: 29px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed  #DCE1E7;
+}
+  .topology-tool-tip /deep/ .topology-chart-title{
+    margin-top: -23px;
+    border-bottom: 1px dashed #DCE1E7;
+    padding-left: 0;
+    margin-left: 10px;
+    padding: 0;
+    box-sizing: border-box;
+    width: 388px;
+  }
+  .topology-tool-tip /deep/ .line-area{
+    margin-top: -15px;
+  }
+</style>

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

@@ -10,7 +10,7 @@
           <el-popover
             placement="bottom"
             width="111"
-            trigger="click"
+            trigger="hover"
             class="scale-number-box"
             popper-class="scale-number-popover no-style-class"
            >

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

@@ -17,11 +17,24 @@
         </div>
         <div class="content-box">
           <span class="content-title">{{ $t('project.endpoint.endpoints') }}</span>
-          <span class="content-text">{{moduleInfo.endpointNum?moduleInfo.endpointNum:'--'}}</span>
+          <span class="content-text">
+            <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+            <span>{{moduleInfo.endpointNum ? moduleInfo.endpointNum : 0}}</span>
+          </span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">{{ $t('overall.asset') }}</span>
+          <span class="content-text">
+             <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;
+              <span>{{ moduleInfo.assetNum ? moduleInfo.assetNum: 0}}</span>
+            </span>
         </div>
         <div class="content-box">
           <span class="content-title">{{ $t('overall.alert') }}</span>
-          <span class="content-text">{{moduleInfo.alertNum?moduleInfo.alertNum:'--'}}</span>
+          <span class="content-text">
+           <i :class="moduleInfo.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+          <span>{{moduleInfo.alertNum ? moduleInfo.alertNum : 0}}</span>
+          </span>
         </div>
         <div class="content-box">
           <span class="content-title">{{ $t('overall.remark') }}</span>
@@ -43,25 +56,89 @@ export default {
   data () {
     return {
       loading: true,
-      moduleInfo: {
+      moduleInfo: {}
-        project: { name: '' },
-        name: '',
-        type: 'http',
-        remark: '',
-        port: '',
-        path: '',
-        seq: '',
-        assetNum: '',
-        endpointNum: ''
-      }
     }
   },
   mounted () {
     this.loading = true
     this.$get('/monitor/module/' + this.moduleId).then(res => {
       this.loading = false
-      this.moduleInfo = res.data
+      if (res.code === 200) {
+        this.moduleInfo = res.data
+      } else {
+        this.$message.error(res.msg)
+      }
     })
   }
 }
 </script>
+
+<style scoped>
+  .info-content{
+    display: flex;
+    margin-right: 15px;
+    flex-direction: column;
+    justify-content: space-between;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .info-box{
+    background: #FFFFFF;
+    margin-bottom: 15px;
+    min-width: 260px;
+  }
+  .info-box-title{
+    background: #EFEFEF;
+    font-size: 14px;
+    color: #333333;
+    height: 26px;
+    line-height: 26px;
+    padding-left: 12px;
+    font-weight: bold;
+  }
+  .info-box-content{
+    font-size: 12px;
+    color: #333333;
+  }
+  .content-box{
+    padding: 0 12px;
+    height: 26px;
+    line-height: 24px;
+  }
+  .content-title{
+    font-size: 14px;
+    color: #333333;
+    min-width: 120px;
+    display: inline-block;
+    color: #666666;
+    padding: 3px 0;
+  }
+  .content-text{
+    color: #333333;
+    font-size: 14px;
+    padding: 3px 5px;
+  }
+  .module-type{
+    text-align: center;
+    width: 44px;
+    display: inline-block;
+    height: 20px;
+    margin: 0 auto;
+    line-height: 20px;
+  }
+  .module-type:first-child{
+    border-radius: 4px 0 0 4px;
+    margin-right: -4px;
+    border-right: none;
+  }
+  .module-type:last-child{
+    border-radius: 0 4px 4px 0;
+    z-index: -1;
+  }
+  .module-type-select{
+    border-color:rgba(255,140,14,0.54);
+    color: rgba(255,140,14,0.54);
+  }
+</style>

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

@@ -16,6 +16,7 @@
           <asset-table
             ref="dataTable"
             v-loading="tools.loading"
+            :loading="tools.loading"
             :api="url"
             :custom-table-title="tableTitle"
             :height="mainTableHeight"

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

@@ -17,6 +17,7 @@
             style="height: calc(100% - 200px)"
             ref="dataTable"
             v-loading="tools.loading"
+            :loading="tools.loading"
             :api="url"
             :custom-table-title="tableTitle"
             :height="mainTableHeight"

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

@@ -12,7 +12,7 @@
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
             <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
               class="nz-icon nz-icon-arrow-down"></i></span>
-            <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-public-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
               <div style="height: 450px"  v-loading="imgageLoading">
                 <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
                          class="project-topology-add-node">
@@ -57,7 +57,7 @@
             <div class="full pr10">
               <el-select v-model="lineName" size="small"
                          :popper-append-to-body="false"
-                         popper-class="right-public-box-select-top right-public-box-dropdown-top"
+                         popper-class="right-box-select-top"
                          @change="changeTopologyOpt(lineName,'lineName')">
                <div slot="prefix">
                 <div class="icon-item" style="width: 100%;padding: 0">
@@ -228,6 +228,12 @@
             >
               <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
             </div>
+            <div v-show="showNoData" class="topo-noData">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#nz-icon-no-data-project"></use>
+              </svg>
+              <div class="content">No data</div>
+            </div>
           </div>
           <!--endpoint-->
           <transition name="right-box">
@@ -280,7 +286,7 @@
         <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
         <el-col :span="20">
           <el-autocomplete
-            popper-class="right-public-box-select-top right-public-box-dropdown-top"
+            popper-class="right-box-select-top right-public-box-dropdown-top"
             :maxlength="64" show-word-limit
             class="inline-input"
             v-model="uploadPic.unit"
@@ -393,6 +399,7 @@ export default {
         bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
         bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
       ],
+      showNoData: false,
       topologyInfo: {
         fontSize: 14,
         align: 'left',
@@ -771,6 +778,11 @@ export default {
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           let data = res.data.topo
+          if (!res.data.topo || !res.data.topo.pens.length) {
+            this.showNoData = true
+          } else {
+            this.showNoData = false
+          }
           if (this.isPreview) {
             data = this.previewData
           }
@@ -1816,6 +1828,7 @@ export default {
 
     editTopology (val) {
       this.editTopologyFlag = true
+      this.showNoData = false
       this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
       this.$store.commit('setShowTopoScreen', true)
       setTimeout(() => {

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

@@ -15,13 +15,13 @@
         <el-form ref="addEndpoint" :model="endpoint" :rules="rules" label-position = "top">
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
-            <el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
+            <el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
               <el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
           </el-form-item>
           <!--module-->
           <el-form-item :label='$t("project.module.module")' class="select-warp" prop="moduleId">
-            <el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
+            <el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
               <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
           </el-form-item>

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-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
+            <el-select class="right-box__select" popper-class="right-box-select-top 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

@@ -15,7 +15,7 @@
           </el-form-item>
           <!--brand-->
           <el-form-item :label='$t("config.model.brand")' prop="brandId">
-            <el-select value-key="id" allow-create  class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
+            <el-select value-key="id" allow-create  class="right-box__select" popper-class="right-box-select-top  prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
               <el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>

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

@@ -37,7 +37,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       popper-class="right-box-select-top  prevent-clickoutside"
                        size="small">
               <template v-for="item in mfaLevelList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -60,7 +60,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       popper-class="right-box-select-top  prevent-clickoutside"
                        size="small">
               <template v-for="item in languageList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -76,7 +76,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       popper-class="right-box-select-top  prevent-clickoutside"
                        size="small"
                        @change="()=>{this.$forceUpdate()}">
               <template v-for="role in roles">
@@ -86,7 +86,7 @@
             </el-select>
           </el-form-item>
           <!--enable-->
-          <el-form-item :label="$t('config.user.enable')">
+          <el-form-item :label="$t('config.user.state')">
             <el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
                        inactive-value="0">
             </el-switch>

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

@@ -15,7 +15,7 @@
           <!--DC-->
           <el-form-item :label="$t('config.dc.dc')" prop="dc.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-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top 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">
                   <span class="config-dropdown-label-txt">{{item.name}}</span>
                 </el-option>
@@ -42,7 +42,7 @@
   <!--            :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-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+            <el-select  v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
 <!--              <el-option-group-->
 <!--                v-for="group in agent2.theData"-->
 <!--                :key="group.label"-->
@@ -60,7 +60,7 @@
             </el-input>
           </el-form-item>
           <el-form-item :label="$t('config.agent.protocol')" prop="protocol">
-            <el-select  v-model="editPromServer.protocol" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+            <el-select  v-model="editPromServer.protocol" placeholder="" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
               <el-option v-for="item in agent2.protocol" :key="item.value" :label="item.label" :value="item.value">
                 <span class="panel-dropdown-label-txt" >{{item.label}}</span>
               </el-option>

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

@@ -22,7 +22,7 @@
             <el-select
               v-model="editAlertRule.type"
               class="right-box__select half-form-item"
-              popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+              popper-class="right-box-select-top prevent-clickoutside"
               size="small"
               :disabled="showTypeSelect"
               @change="selectAlertRuleMetric">
@@ -35,7 +35,7 @@
           </el-form-item>
           <!--severity-->
           <el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
-            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+            <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
               <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
                 <div style="display: flex;justify-content: space-between;padding: 5px;">
                   <div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
@@ -103,7 +103,7 @@
           <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
             <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
                          placeholder=""
-                         popper-class="no-style-class dc-dropdown right-public-box-dropdown-top unit-popper-class"
+                         popper-class="no-style-class dc-dropdown  unit-popper-class"
                          size="small"
                          :disabled="!showSnmpTrap"
                          style="width: 100%"
@@ -129,15 +129,15 @@
               v-model="editAlertRule.autoExpired"
               class="right-box__select half-form-item"
               placeholder=""
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top "
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -155,7 +155,7 @@
           <el-form-item :label="$t('overall.remark')" prop="description">
             <el-input id="alert-box-input-description" v-model="editAlertRule.description" maxlength="256" placeholder="" rows="4" show-word-limit size="small" type="textarea"></el-input>
           </el-form-item>
-          <div class="alert-rule-split-title">Effective configuration</div>
+          <div class="alert-rule-split-title">{{ $t('alert.config.effectiveConfig') }}</div>
           <!--state-->
           <el-form-item :label="$t('alert.config.state')" prop="state" class="half-form-item">
             <el-select
@@ -164,15 +164,15 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -185,15 +185,15 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -208,7 +208,7 @@
               placeholder=""
               multiple
               @change="$refs.alertRuleForm.validateField('schedDays')"
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
             >
               <el-option
@@ -226,7 +226,7 @@
               :format="'HH:mm'"
               v-model="editAlertRule.schedStime"
               size="small"
-              popper-class="right-box-select-top right-public-box-dropdown-top"
+              popper-class="right-box-select-top"
               :clearable = 'false'
               :picker-options="{
               }">
@@ -236,7 +236,7 @@
               :value-format="'HH:mm'"
               :format="'HH:mm'"
               size="small"
-              popper-class="right-box-select-top right-public-box-dropdown-top"
+              popper-class="right-box-select-top"
               :clearable = 'false'
               v-model="editAlertRule.schedEtime"
               :picker-options="{
@@ -244,7 +244,7 @@
               }">
             </el-time-picker>
           </el-form-item>
-          <div class="alert-rule-split-title">Notification configuration</div>
+          <div class="alert-rule-split-title">{{ $t('alert.config.notificationConfig') }}</div>
           <!--notifyActive-->
           <el-form-item :label="$t('alert.config.notifyActive')" prop="notifyActive" class="half-form-item">
             <el-select
@@ -253,16 +253,16 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -275,16 +275,16 @@
               class="right-box__select half-form-item"
               placeholder=""
               :popper-append-to-body="false"
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
               @change="receiverAndNotifyValidate"
             >
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.on')"
+                :label="$t('overall.enabled')"
                 :value="1">
               </el-option>
               <el-option
-                :label="$t('dashboard.panel.chartForm.lockList.off')"
+                :label="$t('overall.disabled')"
                 :value="0">
               </el-option>
             </el-select>
@@ -298,7 +298,7 @@
               filterable
               multiple
               placeholder=""
-              popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside right-box-select-top"
               size="small"
               value-key="userId"
               @change="receiverShowChange"
@@ -315,12 +315,12 @@
           </el-form-item>
           <!--notify-->
           <el-form-item :label="$t('alert.notify')" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'change' }]" class="notify-box" prop="method" >
-            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+            <el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top prevent-clickoutside" size="small">
               <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>
-          <div class="alert-rule-split-title">More</div>
+          <div class="alert-rule-split-title">{{ $t('alert.config.more') }}</div>
           <el-form-item :label="$t('alert.config.trbShot')" prop="trbShot">
             <rich-text-editor ref="richTextEditor" :edit-data="editAlertRule.trbShot" @after-init="afterInitRich"></rich-text-editor>
           </el-form-item>
@@ -673,3 +673,67 @@ export default {
   display: none;
 }
 </style>
+<style scoped lang="scss">
+  .severity-circle{
+    position: absolute;
+    left: 10px;
+    top: 0;
+  }
+  .severity-box{
+    position: relative;
+  }
+  .severity-box /deep/ .el-select .el-input__inner{
+    padding-left: 25px;
+  }
+  .half-form-item {
+    width: calc(50% - 5px);
+    display: inline-block;
+    .el-form-item__content,.el-select{
+      width: 100%;
+    }
+  }
+  .right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
+    width: 100%;
+  }
+  /deep/ .rich-text-editor{
+    line-height: 24px;
+  }
+   /deep/ .el-input-group__prepend{
+     position: relative;
+     .hide-icon{
+       width: 38px;
+       .el-input__inner{
+         border: none;
+         text-align: center;
+       }
+     }
+  }
+  .alert-rule-split-title{
+    background: #F6F6F6;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    font-weight: 400;
+    line-height: 24px;
+    padding-left: 10px;
+    margin-bottom: 10px;
+    height: 24px;
+  }
+  /deep/ .el-form-item__content .el-input-group{
+    vertical-align: middle;
+  }
+  .severity-item{
+    color: #999999;
+    font-size: 12px;
+    max-width: 120px;
+    overflow: hidden;
+  }
+  .text-ellipsis{
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+  }
+  /deep/ .query-row  .metric-selector-input-box {
+    width: calc(100% - 120px);
+  }
+</style>

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

@@ -11,14 +11,14 @@
         <!-- Edit type -->
         <el-form ref="assetEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
           <el-form-item :label="$t('overall.editType')" prop="editType">
-            <el-select v-model="editData.editType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+            <el-select v-model="editData.editType" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
               <el-option v-for="type in assetConstants.editTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
             </el-select>
           </el-form-item>
           <!-- 第一级：Edit type = account -->
           <template v-if="editData.editType === assetConstants.editTypeData.account">
             <el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
-              <el-select v-model="editData.authProtocol" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editData.authProtocol" class="right-box__select" :placeholder="$t('overall.select')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
@@ -26,7 +26,7 @@
             <template v-if="editData.authProtocol === assetConstants.authProtocolData.ssh">
               <div class="form__sub-title">{{$t('asset.sshAccount')}}</div>
               <el-form-item :label="$t('asset.authType')" prop="authType">
-                <el-select v-model="editData.authType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+                <el-select v-model="editData.authType" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
                   <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
                 </el-select>
               </el-form-item>
@@ -103,7 +103,7 @@
                     </el-checkbox-group>
                   </template>
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
-                    <el-select v-model="label.value" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+                    <el-select v-model="label.value" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small">
                       <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
                     </el-select>
                   </template>
@@ -163,7 +163,7 @@
                 :options="fieldGroupData"
                 :props="labelCascProp"
                 class="hide-input"
-                popper-class="prevent-clickoutside right-public-box-select-top.right-public-box-dropdown-top limit-height"
+                popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top limit-height"
                 size="small"
                 @change="addLabel"
               ></el-cascader>
@@ -173,7 +173,7 @@
           <!-- 第一级：Edit type = state -->
           <template v-if="editData.editType === assetConstants.editTypeData.state">
             <el-form-item :label="$t('asset.state')" prop="stateId">
-              <el-select v-model="editData.stateId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editData.stateId" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
               </el-select>
             </el-form-item>
@@ -182,7 +182,7 @@
           <!-- 第一级：Edit type = snmp credential -->
           <template v-if="editData.editType === assetConstants.editTypeData.snmpCredential">
             <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
-              <el-select v-model="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
               </el-select>
             </el-form-item>

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

@@ -24,7 +24,7 @@
             <el-select
               v-model="editAsset.pid"
               class="right-box__select"
-              popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+              popper-class="right-box-select-top prevent-clickoutside"
               size="small"
               :placeholder="$t('el.select.placeholder')"
               value-key="id">
@@ -32,8 +32,13 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('asset.state')" prop="stateId">
-            <el-select v-model="editAsset.stateId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+            <el-select v-model="editAsset.stateId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
-              <el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id"></el-option>
+              <el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id">
+                <div style="display: flex;justify-content: space-between;padding: 5px;">
+                  <div>{{state.name}}</div>
+                  <div style="width: 450px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999999" :title="state.remark">{{state.remark}}</div>
+                </div>
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item :label="$t('asset.manageIp')" prop="manageIp">
@@ -51,7 +56,7 @@
               :placeholder="lockModelInputValue"
               :options="options.brandAndModelOptions"
               :props="{ label: 'name', value: 'id' }"
-              popper-class="prevent-clickoutside right-public-box-dropdown-top right-public-box-select-top limit-height"
+              popper-class="prevent-clickoutside right-public-box-dropdown-top right-box-select-top limit-height"
               size="small"
               style="width: 100%;"
             ></el-cascader>
@@ -66,7 +71,7 @@
               v-model="editAsset.purchaseDate"
               placeholder=""
               size="small"
-              popper-class="right-box-select-top right-public-box-dropdown-top"
+              popper-class="right-box-select-top"
               style="width: 100%"
               type="date"
               value-format="yyyy-MM-dd">
@@ -109,7 +114,7 @@
                   </el-checkbox-group>
                 </template>
                 <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
-                  <el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+                  <el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small">
                     <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
                   </el-select>
                 </template>
@@ -136,7 +141,7 @@
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
                         placeholder=""
-                        popper-class="right-box-select-top right-public-box-dropdown-top"
+                        popper-class="right-box-select-top"
                         size="small"
                         style="width: 100%">
                       </my-date-picker>
@@ -147,7 +152,7 @@
                         v-model="label.value[0]"
                         :type="JSON.parse(label.param).subType"
                         placeholder=""
-                        popper-class="right-box-select-top right-public-box-dropdown-top"
+                        popper-class="right-box-select-top"
                         size="small"
                         style="width: 100%"
                         value-format="yyyy-MM-dd">
@@ -169,7 +174,7 @@
               :options="options.fieldGroupOptions"
               :props="labelCascProp"
               class="hide-input"
-              popper-class="prevent-clickoutside right-public-box-select-top right-public-box-dropdown-top limit-height"
+              popper-class="prevent-clickoutside right-box-select-top limit-height"
               size="small"
               @change="addLabel"
             ></el-cascader>
@@ -178,7 +183,7 @@
           <template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.ssh">
             <div class="form__sub-title">SSH</div>
             <el-form-item :label="$t('asset.authType')" prop="authType">
-              <el-select v-model="editAsset.authType" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
+              <el-select v-model="editAsset.authType" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
                 <el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
               </el-select>
             </el-form-item>
@@ -221,7 +226,7 @@
           <template v-if="editAsset.type && editAsset.type.snmpEnable === 1">
             <div class="form__sub-title">SNMP</div>
             <el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
-              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+              <el-select v-model="editAsset.snmpCredentialId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="snmp in options.snmpCredentialOptions" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
               </el-select>
             </el-form-item>
@@ -424,7 +429,7 @@ export default {
         this.isEdit = true
         this.editAsset = JSON.parse(JSON.stringify(n))
         this.editAsset.brandAndModel = [this.editAsset.brand.id, this.editAsset.model.id]
-        this.editAsset.stateId = n.state ? n.state.id : ''
+        this.editAsset.stateId = n.state ? n.state.id : 2
         this.editAsset.typeId = n.type ? n.type.id : ''
         this.$nextTick(() => {
           if (n.id) {

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

@@ -20,7 +20,7 @@
               <el-input placeholder="" maxlength="128" 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-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :popper-append-to-body="false">
+              <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" :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>
@@ -42,7 +42,7 @@
               </el-switch>
             </el-form-item>
             <el-form-item :label='$t("config.assetLabel.type")' prop="type">
-              <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="selectType">
+              <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top 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>
                 </el-option>

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

@@ -21,7 +21,7 @@
               <el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
             </el-form-item>
             <el-form-item :label='$t("asset.principal")' prop="principal">
-              <el-select value-key="id" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
+              <el-select value-key="id" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
                 <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" style="width: 620px">
                   <span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
                 </el-option>

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

@@ -28,13 +28,13 @@
         <el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' prop="projectId">
-            <el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeProject">
+            <el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeProject">
               <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <!--module-->
           <el-form-item :label='$t("project.module.module")' prop="moduleId">
-            <el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+            <el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
               <el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
@@ -164,7 +164,7 @@
                 </el-row>
                   <!--credentials-->
                   <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-                    <el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" disabled>
+                    <el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" disabled>
                       <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                     </el-select>
                   </el-form-item>
@@ -248,7 +248,7 @@
                     </div>
                     <div>
                       <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                        <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
+                        <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                           <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
                         </el-select>
                       </el-form-item>
@@ -319,7 +319,7 @@
               <el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
                 <!--authtype-->
                 <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
-                  <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+                  <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
                     <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
@@ -355,7 +355,7 @@
                   <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
                     <!--type-->
                     <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                      <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                      <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                         <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                       </el-select>
                     </el-form-item>
@@ -496,7 +496,7 @@
                           :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                         >
 <!--                          <el-input v-model="item2.format" placeholder="key" size="mini"></el-input>-->
-                          <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+                          <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
                             <el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
                           </el-select>
                         </el-form-item>

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

@@ -23,7 +23,7 @@
               :fetch-suggestions="querySearch"
               :placeholder="$t('overall.placeHolder')"
               class="inline-input"
-              popper-class="right-public-box-select-top right-public-box-dropdown-top"
+              popper-class="right-box-select-top right-public-box-dropdown-top"
               size="small"
               style="width: 100%;"
             ></el-autocomplete>
@@ -235,4 +235,7 @@ export default {
 /deep/ .metric-selector-title{
   margin-left: 0 !important;
 }
+/deep/ .query-row  .metric-selector-input-box {
+  width: calc(100% - 120px);
+}
 </style>

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

@@ -21,7 +21,7 @@
               ref="modelSelector"
               size="small"
               class="right-box__select"
-              popper-class="prevent-clickoutside limit-height right-public-box-select-top right-public-box-dropdown-top"
+              popper-class="prevent-clickoutside limit-height right-box-select-top right-public-box-dropdown-top"
               clearable></el-cascader>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')" prop="remark">

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

@@ -19,7 +19,7 @@
           </el-form-item>
           <!--project-->
           <el-form-item :label='$t("project.project.projectName")' prop="projectId">
-            <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
+            <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
               <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
           </el-form-item>
@@ -56,7 +56,7 @@
               v-model="editModule.endpointNameTmpl"
               :fetch-suggestions="querySearch"
               :placeholder="$t('overall.placeHolder')"
-              popper-class="right-public-box-select-top right-public-box-dropdown-top"
+              popper-class="right-box-select-top right-public-box-dropdown-top"
               class="inline-input"
               size="small"
             ></el-autocomplete>
@@ -93,7 +93,7 @@
             <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
               <!--type-->
               <el-form-item :label='$t("project.endpoint.protocol")' class="half-form-item" prop="type">
-                <el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id && editModule.configs[0].config.protocol === 'snmp'" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top right-box-public-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
+                <el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id && editModule.configs[0].config.protocol === 'snmp'" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
                   <el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value" :disabled="item.disabled && !!editModule.id"></el-option>
                 </el-select>
               </el-form-item>
@@ -144,7 +144,7 @@
                 </el-row>
                     <!--credentials-->
               <el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
-                <el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
+                <el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
                   <el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
                 </el-select>
               </el-form-item>
@@ -229,7 +229,7 @@
                     </div>
                    <div>
                      <el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
-                       <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
+                       <el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
                          <el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
                        </el-select>
                      </el-form-item>
@@ -299,7 +299,7 @@
             <el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
               <!--authtype-->
               <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
-                <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
+                <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
                   <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                 </el-select>
               </el-form-item>
@@ -335,7 +335,7 @@
                 <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
                   <!--type-->
                   <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
-                    <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
+                    <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
                       <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
                     </el-select>
                   </el-form-item>
@@ -475,7 +475,7 @@
                         :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.format'"
                         :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                       >
-                        <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
+                        <el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
                           <el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
                         </el-select>
                       </el-form-item>

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

@@ -4,7 +4,7 @@
       id="module-box-logs-pipeline-type"
       class="right-box__select"
       placeholder=""
-      popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside pipeline"
+      popper-class="right-box-select-top prevent-clickoutside pipeline"
       size="small"
       ref="select"
       v-model="pipelineOptionValue"

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

@@ -35,7 +35,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       popper-class="right-box-select-top prevent-clickoutside"
                        size="small">
               <template v-for="item in languageList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>

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

@@ -9,14 +9,14 @@
         <span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
     </div>
-    <div class="right-box__container">
+    <div class="right-box__container right-box-container__left">
       <div class="container__form">
         <el-form ref="projectForm" :model="editProject" :rules="rules" label-position = "top" label-width="120px">
           <el-form-item :label='$t("project.project.project")' prop="name">
             <el-input id="project-box-input-name" v-model="editProject.name" maxlength="64" show-word-limit size="small"></el-input>
           </el-form-item>
           <el-form-item :label='$t("overall.remark")'>
-            <el-input id="project-box-input-remark" v-model="editProject.remark" maxlength="256" show-word-limit size="small" type="textarea"></el-input>
+            <el-input id="project-box-input-name" v-model="editProject.remark" maxlength="256" show-word-limit type="textarea"></el-input>
           </el-form-item>
         </el-form>
       </div>

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

@@ -18,7 +18,7 @@
               <el-input placeholder="" maxlength="256" show-word-limit 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">
-              <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">
+              <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top 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>
@@ -44,7 +44,7 @@
             <div style="margin-bottom: 20px;width: 100%"></div>
 
             <el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside">
+              <el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top 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>
@@ -58,7 +58,7 @@
             <div style="margin-bottom: 20px;width: 100%"></div>
 
             <el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol"  v-if="editCredential.type === 3">
-              <el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" :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-top 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>

nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue

@@ -18,7 +18,7 @@
              size="small"
              v-model="assetSetting.host"
            ></el-autocomplete>
-          <el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
+          <el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="hover">
           <div class="mib-browser-ad-search">
             <el-row class="mib-browser-ad-search-item" style="font-weight: bold">{{$t('config.dc.traffic.snmpSetting')}}</el-row>
             <el-row class="mib-browser-ad-search-item">

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

@@ -35,7 +35,7 @@
         <template v-if="item.prop === 'alertRule'">
           <div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
             <el-popover
-              placement="right"
+              placement="right-start"
               popper-class="alert-message-tooltip"
               style="position: relative"
               @show="alertMessageHover(scope.row.alertRule, true)"
@@ -91,6 +91,7 @@
               :id="scope.row[item.label].id"
               :that="scope.row[item.label]"
               :type="item.label"
+              :alert-table-dialog="true"
             ></alertLabel>
           </span>
         </template>
@@ -110,11 +111,11 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="hover" @command="tableOperation">
+        <el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
@@ -122,6 +123,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -149,7 +159,8 @@ export default {
       type: Boolean,
       default: true
     },
-    alertMessageTabNew: Boolean
+    alertMessageTabNew: Boolean,
+    loading: Boolean
   },
   mixins: [table, bus],
   data () {

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

@@ -65,12 +65,12 @@
             placement="right"
             trigger="hover"
             :open-delay="300"
-            :width="225"
+            :width="215"
             popper-class="schedEnableTitle"
           >
             <div>
               <div class="margin-b-10">
-                {{$t('alert.config.schedEnable')}} :
+                {{$t('alert.config.schedEnable')}}
                 <el-switch
                   style="margin-left: 14px"
                   slot="reference"
@@ -82,23 +82,31 @@
                 />
               </div>
               <div>
-                <div class="margin-b-10">{{$t('alert.config.schedDays')}} :</div>
+                <div class="margin-b-10">{{$t('alert.config.schedDays')}}</div>
                 <div class="margin-b-5" style="display: flex">
-                  <i class="nz-icon nz-icon-a-rilizhou"/>
+                  <i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
                   <span v-html="weekStr(scope.row.schedDays)"></span>
                 </div>
-                <div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
+                <div ><i class="nz-icon nz-icon-dingshishijian" style="color: #FA901C;"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
               </div>
             </div>
-            <el-switch
+<!--            <el-switch-->
-              slot="reference"
+<!--              slot="reference"-->
-              v-model="scope.row.state"
+<!--              v-model="scope.row.state"-->
-              :disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"
+<!--              :disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"-->
-              active-color="#ee9d3f"
+<!--              active-color="#ee9d3f"-->
-              :active-value="1"
+<!--              :active-value="1"-->
-              :inactive-value="0"
+<!--              :inactive-value="0"-->
-              @change="(val)=>{$emit('statusChange', scope.row)}"
+<!--              @change="(val)=>{$emit('statusChange', scope.row)}"-->
-            />
+<!--            />-->
+            <div slot="reference" v-if="scope.row[item.prop] === 1">
+              <div class="active-icon green-bg inline-block"></div>
+              {{ $t('overall.enabled') }}
+            </div>
+            <div slot="reference" v-else-if="scope.row[item.prop] === 0">
+              <div class="active-icon gray-bg inline-block"></div>
+              {{ $t('overall.disabled') }}
+            </div>
           </el-popover>
         </template>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -112,11 +120,11 @@
       <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="queryMessage(scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['alertRule_edit','alertRule_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['alertRule_edit','alertRule_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :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 v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
@@ -125,6 +133,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -134,6 +151,9 @@ import chartDataFormat from '@/components/charts/chartDataFormat'
 export default {
   name: 'alertRuleTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [
@@ -271,3 +291,56 @@ export default {
     margin-left: 5px;
   }
 </style>
+<style>
+.severity .P1{
+  background: #F5846A;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #FFFFFF;
+  padding: 2px 6px;
+}
+.severity .P2{
+  background: #F7A54A;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #FFFFFF;
+  padding: 2px 6px;
+}
+.severity .P3{
+  background: #F1C13D;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #FFFFFF;
+  padding: 2px 6px;
+}
+.schedEnableTitle{
+  padding: 20px 15px;
+  margin-right: 0;
+  left: 1995px !important;
+  background: #FFFFFF;
+  border: 1px solid rgba(119,131,145,0.60);
+  box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+  border-radius: 3px;
+}
+.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
+  font-size: 14px;
+  color: #666666;
+  margin-right: 12px;
+}
+.schedEnableTitle .week-item{
+  width: 32px;
+  height: 22px;
+  line-height: 22px;
+  opacity: 0.9;
+  background: #F6F6FA;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 12px;
+  color: #666666;
+  letter-spacing: 0;
+  font-weight: 400;
+  padding-left: 3px;
+  margin-right: 12px;
+  margin-bottom: 6px;
+  }
+</style>

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

@@ -80,17 +80,27 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button :class="{'table-operation-item--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['alertSilence_expire']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['alertSilence_expire']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+<!--            <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 v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -105,6 +115,9 @@ export default {
     nzAlertTag
   },
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       /* 表格相关 */
@@ -120,7 +133,7 @@ export default {
           label: this.$t('alert.silence.name'),
           prop: 'name',
           show: true,
-          width: 150
+          minWidth: 150
         }, {
           label: this.$t('alert.silence.matchers'),
           prop: 'matchers',

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

@@ -69,11 +69,11 @@
       <div slot-scope="scope" class="table-operation-items">
 <!--        <button class="table-operation-item" @click.stop><i class="nz-icon nz-icon-view1"></i></button>-->
         <button class="table-operation-item" @click.stop="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['asset_label_edit','asset_label_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['asset_label_edit','asset_label_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item v-has="'asset_label_edit'" :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 v-has="'asset_label_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
@@ -81,6 +81,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -89,6 +98,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'assetLabelTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -116,11 +116,11 @@
       <div slot-scope="scope" class="table-operation-items">
         <button v-if="assetTab"  class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
         <button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :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 v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
@@ -130,6 +130,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -149,7 +158,8 @@ export default {
       type: Boolean,
       default: true
     },
-    assetTab: Boolean
+    assetTab: Boolean,
+    loading: Boolean
   },
   data () {
     return {

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

@@ -20,6 +20,7 @@
             </button>
             <el-dropdown
               type="primary"
+              trigger="click"
               v-if="showLayout.indexOf('detailViewSet') > -1"
               class="margin-l-5"
               @command="changeDetailType">
@@ -27,7 +28,7 @@
                       type="button">
                 <i class="nz-icon nz-icon-list-view" />
               </button>
-              <el-dropdown-menu slot="dropdown"  class="right-public-box-dropdown-top">
+              <el-dropdown-menu slot="dropdown"  class="right-public-box-dropdown-top right-box-select-top">
                 <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
                 <el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
               </el-dropdown-menu>

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

@@ -58,17 +58,26 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item" v-has="'agent_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['agent_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['agent_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'agent_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -77,6 +86,9 @@ import table from '@/components/common/mixin/table'
 import { agent } from '@/components/common/js/constants'
 export default {
   name: 'agentTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -72,17 +72,26 @@
       <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="showBottomBox('operationLogTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['assetType_edit','assetType_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['assetType_edit','assetType_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
            <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'assetType_edit'" :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 v-has="'assetType_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -90,6 +99,9 @@
 import table from '@/components/common/mixin/table'
 export default {
   name: 'asstTypeTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -39,17 +39,26 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['dc_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['dc_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -60,6 +69,9 @@ export default {
   name: 'cabinet Table',
   components: { Template },
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -51,11 +51,11 @@
       <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="showBottomBox('panel', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['panel_chart_edit','panel_chart_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['panel_chart_edit','panel_chart_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'panel_chart_edit'" :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 v-has="'panel_chart_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'panel_chart_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
@@ -64,6 +64,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -73,6 +82,9 @@ import { chart as chartConstant } from '@/components/common/js/constants'
 export default {
   name: 'chartTmplTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       chartTypeList: chartConstant.type,

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

@@ -73,16 +73,25 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item" v-has="'credential_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['credential_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['credential_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -90,6 +99,9 @@
 import table from '@/components/common/mixin/table'
 export default {
   name: 'credentialsTable',
+  props: {
+    loading: Boolean
+  },
   mixins: [table],
   data () {
     return {

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

@@ -41,14 +41,14 @@
           <template v-else>-</template>
         </template>
         <template v-else-if="item.prop === 'state'">
-          <el-switch
+          <div v-if="scope.row[item.prop] === 'ON'">
-            v-model="scope.row.state"
+            <div class="active-icon green-bg inline-block"></div>
-            :disabled="!hasButton('dc_edit') || !hasButton('dc_edit')"
+            {{ $t('overall.enabled') }}
-            active-color="#ee9d3f"
+          </div>
-            active-value="ON"
+          <div v-else-if="scope.row[item.prop] === 'OFF'">
-            inactive-value="OFF"
+            <div class="active-icon gray-bg inline-block"></div>
-            @change="(val)=>{$emit('statusChange', scope.row)}"
+            {{ $t('overall.disabled') }}
-          />
+          </div>
         </template>
         <template v-else-if="item.prop === 'longitude'">
           <template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
@@ -88,17 +88,26 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['dc_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['dc_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -108,6 +117,9 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
 export default {
   name: 'dcTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       regNum: /^[0-9]+.?[0-9]*/,

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

@@ -72,12 +72,6 @@
             :type="'module'"
           ></alertLabel>
         </template>
-        <template v-else-if="item.prop === 'alerts'">
-          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row.alertNum}}
-          </span>
-        </template>
         <template v-else-if="item.prop === 'asset'">
           <span
             class="pointer"
@@ -94,6 +88,12 @@
             :type="'asset'"
           ></alertLabel>
         </template>
+        <template v-else-if="item.prop === 'alerts'">
+          <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
+            <i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
+            {{scope.row.alertNum}}
+          </span>
+        </template>
         <template v-else-if="item.prop === 'configs'">
 <!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
 <!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
@@ -114,7 +114,7 @@
             <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
             <div class="endpointConfigsTips" slot="content">
               <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
-              <pre >{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
+              <pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
             </div>
           </el-tooltip>
         </template>
@@ -170,11 +170,11 @@
       <div slot-scope="scope" class="table-operation-items">
         <button v-if="endpointTab"  class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
         <button v-else class="table-operation-item"  @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :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 v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
@@ -184,6 +184,15 @@
         </el-dropdown>
       </div>
     </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -201,7 +210,8 @@ export default {
       type: Boolean,
       default: true
     },
-    endpointTab: Boolean
+    endpointTab: Boolean,
+    loading: Boolean
   },
   data () {
     return {
@@ -394,13 +404,24 @@ export default {
 </style>
 <style>
   .endpointConfigsTips{
-    height: 200px;
+    min-width: 150px;
-    overflow-y: auto;
+    padding:3px 3px 0 8px ;
-    overflow-x: hidden;
   }
   .copy-value-content{
     position: absolute;
-    right: 1px;
+    right: 6px;
-    top: 4px;
+    top: 6px;
+  }
+  .data-column__endpoint {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .copy-value-content__pre {
+    height: 200px;
+    margin-top: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 </style>

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

@@ -45,17 +45,26 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item"  v-has="'expressionTemplate_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['expressionTemplate_add','expressionTemplate_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['expressionTemplate_add','expressionTemplate_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'expressionTemplate_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -64,6 +73,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'exprTmplTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [

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

@@ -62,16 +62,25 @@
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item"  v-has="'monitor_module_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
-        <el-dropdown size="medium" v-has="['monitor_module_delete']" trigger="hover" @command="tableOperation">
+        <el-dropdown size="medium" v-has="['monitor_module_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
-          <el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item  v-has="'monitor_module_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
   </el-table>
 </template>
 
@@ -80,6 +89,9 @@ import table from '@/components/common/mixin/table'
 export default {
   name: 'menuTable',
   mixins: [table],
+  props: {
+    loading: Boolean
+  },
   data () {
     return {
       tableTitle: [ // 原table列