From f74f8524705f06ae1b13dabf99553fc279afcd23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Mon, 6 Apr 2020 22:11:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20alertMessage-labels=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.alertMessage-labels
2.退出登录切换语言再重登后国际化不对的bug
3.修复切换左侧菜单后顶部菜单显示不对的问题
---
 nezha-fronted/src/assets/stylus/main.scss     |  18 +-
 .../components/common/bottomBox/bottomBox.vue |  19 +-
 .../common/bottomBox/tabs/commonDetailTab.vue |   9 +-
 .../src/components/common/header.vue          |  21 +-
 .../src/components/common/language/en.js      |   3 +-
 .../components/common/popBox/selectWalk.vue   |  22 +-
 .../common/rightBox/alertConfigBox.vue        |   8 +-
 .../components/common/rightBox/moduleBox.vue  |  24 +-
 .../src/components/page/alert/config.vue      |  13 +-
 .../src/components/page/alert/list.vue        | 262 ++++++++++++------
 .../src/components/page/config/account.vue    |   2 +
 .../src/components/page/config/dc.vue         |   2 +
 .../src/components/page/config/mib.vue        |   2 +
 .../src/components/page/config/model.vue      |   2 +
 .../src/components/page/config/promServer.vue |   3 +-
 .../src/components/page/config/system.vue     |   2 +
 .../components/page/config/terminallog.vue    |   2 +
 .../page/dashboard/metricPreview.vue          |   1 +
 .../page/dashboard/overview/overview.vue      |   2 +
 .../src/components/page/dashboard/panel.vue   |   1 +
 .../src/components/page/project/project.vue   |   2 +-
 21 files changed, 286 insertions(+), 134 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 7667551d4..4f2bb8418 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -147,7 +147,7 @@ li{
   position: relative;
 }
 .to-top {
-  position: fixed;
+  position: absolute;
   bottom: 10px;
   right: 5px;
   border-radius: 5px;
@@ -721,9 +721,13 @@ li{
   /*box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);*/
 }
 .nz-table.el-table td .cell{
-  height: 38px;
+  min-height: 38px;
   line-height: 38px;
 }
+.nz-table.el-table td.alert-message-list-labels .cell{
+  line-height: unset;
+  padding: 3px;
+}
 /*.nz-table .el-table__row td:first-of-type {
    padding-left: 38px;
 }*/
@@ -742,7 +746,9 @@ li{
   position: absolute;
   left: -3px;
 }
-
+.alert-message-tag {
+  margin: 3px;
+}
 /* end--内容*/
 
 /* begin--右弹框滑入滑出动画*/
@@ -1486,3 +1492,9 @@ li{
   margin: 0 -7px;
   padding: 3px 0;
 }
+
+.metric-tip-icon{
+  vertical-align: middle;
+  transform: scale(0.6);
+  display:inline-block;
+}
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 1fd169422..7b0d116c1 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -28,10 +28,23 @@
       <!--endpoint页的asset详情-->
       <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab="targetTab"
                          v-if="targetTab == 'assetDetail' && from == 'endpoint'"
-                         @changeTab="changeTab"
-      ></common-detail-tab>
+                         @changeTab="changeTab"></common-detail-tab>
       <!--endpoint-query-->
       <endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
+
+      <!--alertMessage页的详情-->
+      <template v-if="from == 'alertMessage'">
+        <common-detail-tab v-show="subResizeShow" :from="from" :targetTab="targetTab" v-for="item, index in tabList"
+                           v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
+        <!--<common-detail-tab v-show="subResizeShow" :from="from" :detail="detail" :targetTab="targetTab" v-for="item in tagList"
+                           v-if="targetTab == 'project'" @changeTab="changeTab"></common-detail-tab>
+        <common-detail-tab v-show="subResizeShow" :from="from" :detail="detail" :targetTab="targetTab" v-for="item in tagList"
+                           v-if="targetTab == 'module'" @changeTab="changeTab"></common-detail-tab>
+        <common-detail-tab v-show="subResizeShow" :from="from" :detail="detail" :targetTab="targetTab" v-for="item in tagList"
+                           v-if="targetTab == 'endpoint'" @changeTab="changeTab"></common-detail-tab>
+        <common-detail-tab v-show="subResizeShow" :from="from" :detail="detail" :targetTab="targetTab" v-for="item in tagList"
+                           v-if="targetTab == 'dc'" @changeTab="changeTab"></common-detail-tab>-->
+      </template>
     </div>
   </span>
 </template>
@@ -58,8 +71,10 @@
       subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
       obj: Object, //关联的实体对象
       from: String, //来自哪个页面
+      tabList: Array, //动态页签列表
       targetTab: String, //展示哪个页签
       detail: Array, //对象详情内容
+      detailList: Array, //多个对象详情内容
 
       assetDetail: Array, //endpoint页的asset详情
     },
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
index 4c5a71bcd..258d35f07 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
@@ -9,8 +9,9 @@
           <template v-else-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
           <template v-else-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
           <template v-else-if="from == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
+          <template v-else-if="from == 'alertMessage'">&nbsp;</template>
   <!-- 为防止代码换行导致页面中元素之间有间隙，所以将元素的标签尾部和相邻元素的标签头部连在一起写 -->
-        </div><div class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'detail'}" @click="changeTab('detail')">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
+        </div><div v-if="from != 'alertMessage'" class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'detail'}" @click="changeTab('detail')">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
           <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
         </template><template v-if="from == 'alertRule' || from == 'asset'">
           <div class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
@@ -19,6 +20,12 @@
         </template><template v-if="from == 'endpoint'">
           <div class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div><div
             class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'assetDetail'}" @click="changeTab('assetDetail')">{{$t("project.endpoint.asset")}}</div>
+        </template><template v-if="from == 'alertMessage'">
+          <div class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'asset'}" @click="changeTab('asset')">{{$t("project.endpoint.asset")}}</div><div
+        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'project'}" @click="changeTab('project')">{{$t("project.project.project")}}</div><div
+        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'module'}" @click="changeTab('module')">{{$t("project.module.module")}}</div><div
+        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'endpoint'}" @click="changeTab('endpoint')">{{$t("project.endpoint.endpoint")}}</div><div
+        class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'datacenter'}" @click="changeTab('datacenter')">{{$t("config.dc.dc")}}</div>
         </template>
       </div>
     </div>
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index e4d0cd295..378021b19 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -93,7 +93,7 @@
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' ? 'menu-active' :''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
           <div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
@@ -325,11 +325,6 @@
         let index = this.indOf(this.activeItemIndexes, id);
         this.activeItemIndexes=[];//2020-02-25 修改为单选
         this.activeItemIndexes.push(id);
-        // if (index > -1) {
-        //   this.activeItemIndexes.splice(index, 1);
-        // } else {
-        //   this.activeItemIndexes.push(id);
-        // }
         this.$store.state.assetData = {selectedData: this.activeItemIndexes, step: this.$store.state.assetData.step+1, type: 1};
         this.jumpTo('asset');
       },
@@ -449,11 +444,6 @@
           c.push(a[i]);
         }
         return c.indexOf(b);
-        /*if (c.indexOf(b) > -1) {
-          return true;
-        } else {
-          return false;
-        }*/
       },
       panelListReload(){
         if(this.$route.path==='/panel'){
@@ -474,6 +464,9 @@
       refreshLang() {
         this.language = localStorage.getItem("nz-language");
         this.$i18n.locale = this.language;
+        this.$nextTick(() => {
+          window.location.reload();
+        });
       },
       showPwdDialog:function(){
         this.showChangePwd=true;
@@ -498,7 +491,6 @@
       this.getUserData();
       this.getAssetData();
       this.getProjectList();
-      this.refreshLang();
       // 刷新后有高亮
       let activePath = this.$route.path.slice(1);
       this.activeIndex = activePath;
@@ -508,10 +500,7 @@
       bus.$on('login', () => {
         this.username = sessionStorage.getItem("nz-username");
         this.refreshLang();
-        this.activeIndex = 'panel';
-        /*this.$nextTick(function(){
-          window.location.reload();
-        });*/
+        this.activeIndex = 'overview';
       });
 
       if (window.history && window.history.pushState) {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index f488f4c6e..583713ba7 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -654,7 +654,8 @@ const en = {
       moduleAlert: 'Module alert',//"组件告警"
       deviceAlert: 'Device alert',//"设备告警"
       pending: 'Pending',//"待处理"
-      expired: 'Expired'//"已过期"
+      expired: 'Expired',//"已过期"
+      labels: 'Labels'
     },
     config: {
       name: 'Name',//"名称"
diff --git a/nezha-fronted/src/components/common/popBox/selectWalk.vue b/nezha-fronted/src/components/common/popBox/selectWalk.vue
index 3f32423dc..bba69ba8e 100644
--- a/nezha-fronted/src/components/common/popBox/selectWalk.vue
+++ b/nezha-fronted/src/components/common/popBox/selectWalk.vue
@@ -24,17 +24,17 @@
                 <i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
                 <i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
                 <i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
+                <el-popover ref="walkDetail" trigger="click" placement="left" popper-class="nz-pop nz-pop-walk-detail">
+                  <div>
+                    <ul>
+                      <li><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{data.name}}</span></li>
+                      <li><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{data.objectID}}</span></li>
+                      <li><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(node)}}</span></li>
+                    </ul>
+                  </div>
+                  <span @click.stop slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
+                </el-popover>
               </span>
-              <el-popover trigger="click" placement="left" v-if="data.objectID" popper-class="walk-detail">
-                <div>
-                  <ul>
-                    <li><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{data.name}}</span></li>
-                    <li><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{data.objectID}}</span></li>
-                    <li><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(node)}}</span></li>
-                  </ul>
-                </div>
-                <span @click.stop slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-              </el-popover>
               {{data.name}}
             </span>
           </el-tree>
@@ -59,7 +59,7 @@
       },
       data() {
         return {
-          popBox: {show: false}
+          popBox: {show: false},
         }
       },
       computed: {
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index d96b0ee39..1e56bc40d 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -28,19 +28,19 @@
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
             </el-form-item>
             <!--type-->
-            <el-form-item :label="$t('alert.list.type')" prop="type">
+           <!-- <el-form-item :label="$t('alert.list.type')" prop="type">
               <el-select v-if="rightBox.isEdit" @change="(val) => {changeType(val);}" popper-class="config-dropdown" v-model="alertRule.type" placeholder="" size="small" >
                 <el-option :id="'alert-type-'+item.value" v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key"></el-option>
               </el-select>
               <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
-            </el-form-item>
+            </el-form-item>-->
             <!--linkedId-->
-            <el-form-item :label="$t('alert.config.link')" prop="linkId">
+            <!--<el-form-item :label="$t('alert.config.link')" prop="linkId">
               <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small" popper-class="config-dropdown">
                 <el-option :id="'alert-linke-'+item.id" v-for="item in linkObjList" :key="item.id" :label="alertRule.type == 3 ? item.host : item.name" :value="item.id"></el-option>
               </el-select>
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
-            </el-form-item>
+            </el-form-item>-->
             <!--expr-->
             <el-form-item :label="$t('alert.config.expr')" prop="expr">
               <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index c17a175e0..56f3e40c3 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -62,8 +62,8 @@
                           <el-scrollbar style="height: 100%;" ref="walkScrollbar">
                             <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
                               <span v-html="mibName(item)"></span>
-                              <div @click.stop="removeWalk(item)">
-                                <i class="el-tag__close el-icon-close"></i>
+                              <div class="walk-close-box" @click.stop="removeWalk(item)">
+                                <i class="el-tag__close el-icon-close walk-close"></i>
                               </div>
                             </span>
                           </el-scrollbar>
@@ -432,10 +432,21 @@
             let obj = JSON.parse(response.data);
             this.walkData = [];
             for (let item in obj) {
-              this.walkData.push({name: item, subTree: obj[item]});
+              setAttr(obj[item], "detailShow", false);
+              this.walkData.push({name: item, detailShow: false, subTree: obj[item]});
             }
           }
         });
+        function setAttr(tree, name, value) {
+          if (tree && tree.length > 0) {
+            for (let i = 0; i < tree.length; i++) {
+              tree[i][name] = value;
+              if (tree[i].subTree && tree[i].subTree.length > 0) {
+                setAttr(tree[i].subTree, name, value);
+              }
+            }
+          }
+        }
       },
 
       show(show, isEdit) {
@@ -747,4 +758,11 @@
   .module-box-type {
     margin: 25px 0 10px -15px;
   }
+  .walk-close-box {
+    margin-left: 6px;
+    width: 14px;
+  }
+  .walk-close {
+    margin-left: -6px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 9b46cfb74..eaa3c9050 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -61,17 +61,16 @@
                 <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
                 <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
               </span>
-              <span v-else-if="item.prop == 'type'">
+              <!--<span v-else-if="item.prop == 'type'">
                 <template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
               </span>
-              <!--                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
               <template v-else-if="item.prop == 'linkObject'">
                 <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
                       @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;">{{scope.row[item.prop].name}}</span>
                 <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
                       @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
                 <span v-else>-</span>
-              </template>
+              </template>-->
               <template v-else-if="item.prop == 'alertNum'">
                 <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
               </template>
@@ -114,6 +113,7 @@
 </template>
 <script>
   var vm;
+  import bus from '../../../libs/bus';
   export default {
     name: "alert-config",
     data() {
@@ -228,7 +228,7 @@
             label: this.$t("alert.config.expr"),
             prop: 'expr',
             show: true,
-          }, {
+          }, /*{
             label: this.$t("alert.list.type"),
             prop: 'type',
             show: true,
@@ -237,7 +237,7 @@
             prop: 'linkObject',
             show: true,
             width: 140
-          }, {
+          }, */{
             label: this.$t("alert.config.for"),
             prop: 'last',
             show: true,
@@ -349,7 +349,7 @@
         this.showSubList = true;
       },
       messageStyle(e) {
-        if (e.columnIndex == 8) {
+        if (e.columnIndex == 6) {
           if (e.row.alertNum > 0) {
             return 'has-message';
           } else {
@@ -392,6 +392,7 @@
         }
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 590453efe..7f43b4496 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -15,94 +15,109 @@
       </div>
     </div>
     <div class="content-right">
-      <div class="top-tools">
-        <div class="top-tool-main-right">
-          <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+        <div class="top-tools" v-show="mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+            <div class="top-tool-search">
+              <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+            </div>
           </div>
+          <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
-      </div>
-      <el-table
-        class="nz-table"
-        :data="tableData"
-        border
-        ref="alertListTable"
-        tooltip-effect="light"
-        :height="$tableHeight.normal"
-        v-scrollBar:el-table
-        style="width: 100%;">
-        <el-table-column
-          :resizable="false"
-          v-for="(item, index) in tablelable"
-          v-if="item.show"
-          :width="item.width"
-          :key="`col-${index}`"
-          :label="item.label"
-          show-overflow-tooltip
-          min-width="110px"
-        >
-          <template slot-scope="scope" :column="item">
-            <template v-if="item.prop == 'alertRule'">
-              <div class="link too-long-split"
-                 @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
-                 v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
-              <template v-else>-</template>
-            </template>
-            <div v-else-if="item.prop == 'type'" class="content-right-options">
-              <span v-if="scope.row[item.prop] == 1">Project</span>
-              <span v-if="scope.row[item.prop] == 2">Module</span>
-              <span v-if="scope.row[item.prop] == 3">Device</span>
-            </div>
-            <template v-else-if="item.prop == 'summary'">
-              <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <template v-else>-</template>
-            </template>
-            <template v-else-if="item.prop == 'description'">
-              <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <span v-else>-</span>
-            </template>
-            <span v-else-if="item.prop == 'severity'">
-              <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
-              <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
-              <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
-            </span>
-            <div v-else-if="item.prop == 'linkObject'">
-              <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
-                    @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
-                    :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
-              <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
-                    @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
-                    :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
-              <span v-else>-</span>
-            </div>
-            <div v-else-if="item.prop == 'state'">
-              <span class="">
-                {{scope.row['state'] == 1 ? "Pending" : ""}}
-                {{scope.row['state'] == 2 ? "Expired" : ""}}
+        <el-table
+          class="nz-table"
+          :data="tableData"
+          border
+          v-show="mainResizeShow"
+          ref="alertListTable"
+          tooltip-effect="light"
+          :height="mainTableHeight"
+          v-scrollBar:el-table
+          :cell-class-name="labelsClassName"
+          style="width: 100%;">
+          <el-table-column
+            :resizable="false"
+            v-for="(item, index) in tablelable"
+            v-if="item.show"
+            :width="item.width"
+            :key="`col-${index}`"
+            :label="item.label"
+            :show-overflow-tooltip="item.prop != 'labels'"
+            min-width="110px"
+          >
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop == 'alertRule'">
+                <div class="link too-long-split"
+                   @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
+                   v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
+                <template v-else>-</template>
+              </template>
+              <!--<div v-else-if="item.prop == 'type'" class="content-right-options">
+                <span v-if="scope.row[item.prop] == 1">Project</span>
+                <span v-if="scope.row[item.prop] == 2">Module</span>
+                <span v-if="scope.row[item.prop] == 3">Device</span>
+              </div>-->
+              <template v-else-if="item.prop == 'summary'">
+                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                <template v-else>-</template>
+              </template>
+              <template v-else-if="item.prop == 'description'">
+                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+                <span v-else>-</span>
+              </template>
+              <span v-else-if="item.prop == 'severity'">
+                <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
+                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
+                <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
               </span>
-            </div>
-            <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-            <template v-else>-</template>
-          </template>
-        </el-table-column>
-        <el-table-column width="28" :resizable="false">
-          <template slot="header" slot-scope="scope">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
+              <!--<div v-else-if="item.prop == 'linkObject'">
+                <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
+                      @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
+                      :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
+                <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
+                      @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
+                      :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
+                <span v-else>-</span>
+              </div>-->
+              <template v-else-if="item.prop == 'labels'">
+                <el-tag @click="showTagDetail(scope.row.labels, key)"
+                        :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
+                        :type="tagType(key)"
+                        size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{value}}</el-tag>
+              </template>
+              <div v-else-if="item.prop == 'state'">
+                <span class="">
+                  {{scope.row['state'] == 1 ? "Pending" : ""}}
+                  {{scope.row['state'] == 2 ? "Expired" : ""}}
+                </span>
+              </div>
+              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
+          <el-table-column width="28" :resizable="false">
+            <template slot="header" slot-scope="scope">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <i class="nz-icon nz-icon-gear"></i>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-bottom" v-show="!showSubList">
+          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        </div>
+        <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
+      </div>
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab="targetTab" :detailList="tabDetailList"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
     </div>
-    <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
+    <!--<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
-    <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
+    <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>-->
     <!--<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
                      ref="assetEditUnit"></asset-edit-unit>-->
-    <asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
-               ref="assetEditUnit"></asset-box>
+    <!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
+               ref="assetEditUnit"></asset-box>-->
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
@@ -114,10 +129,24 @@
 
 </template>
 <script>
+  import bus from '../../../libs/bus';
+  var vm;
   export default {
     name: "alertList",
     data() {
+      vm = this;
       return {
+        /*二级列表相关*/
+        tabList: [], //二级列表的标签
+        tabDetailList: [], //多个详情
+        targetTab: '', //展示二级列表中的哪个页签
+        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        mainResizeShow: true, //dom高度改变时部分内容是否展示
+        subResizeShow: true,
+        isFullScreen: false,
+        showSubList: false, //是否展示二级列表
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+
         tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         pageObj: {
@@ -131,7 +160,7 @@
             prop: 'alertRule',
             show: true,
             width: 180
-          }, {
+          }, /*{
             label: this.$t("alert.list.type"),
             prop: 'type',
             show: true,
@@ -141,6 +170,10 @@
             prop: 'linkObject',
             show: true,
             width: 140
+          }, */{
+            label: this.$t("alert.list.labels"),
+            prop: 'labels',
+            show: true,
           }, {
             label: this.$t("alert.severity"),
             prop: 'severity',
@@ -241,6 +274,17 @@
         viewAssetState: false,
       }
     },
+    computed: {
+      tagType() {
+        return (key) => {
+          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+            return "";
+          } else {
+            return "info";
+          }
+        }
+      }
+    },
     methods: {
       elementsetShow(s, e) {
         var eventfixed = {
@@ -277,10 +321,13 @@
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
         this.$get('alert/message', this.searchLabel).then(response => {
           if (response.code == 200) {
-            this.tableData = response.data.list
-            this.pageObj.total = response.data.total
+            this.tableData = response.data.list;
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels);
+            });
+            this.pageObj.total = response.data.total;
           }
-        })
+        });
       },
       //asset弹框控制
       tabControl(data) {
@@ -289,7 +336,47 @@
           this.$refs['assetEditUnit'].tabView = false
         }
       },
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
+      // 鼠标拖动二级列表
+      listResize(e) {
+        this.$bottomBoxWindow.listResize(vm, e);
+      },
+      showTagDetail(labels, key) {
+        let open = false;
+        if (key == "asset" || key == "project" || key == "module" || key == "endpoint" || key == "datacenter") {
+          open = true;
+        }
+        if (open) {
+          let labelList = [];
+          let detailList = [];
+          for (let item in labels) {
+            if (item == "asset" || item == "project" || item == "module" || item == "endpoint" || item == "datacenter") {
+              labelList.push(item);
+              detailList.push(labels[item]);
+            }
+          }
+          this.showSubList = true;
+          this.tabList = labelList;
+          this.tabDetailList = detailList;
+          this.targetTab = key;
+        }
+      },
+      labelsClassName(row) {
+        if (row.columnIndex == 1) {
+          return "alert-message-list-labels";
+        } else {
+          return "";
+        }
+      },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$store.state.assetData.moduleData = data
         this.$store.state.assetData.selectedData = id
         this.$router.push({
@@ -366,6 +453,11 @@
         this.viewAssetState = false;
       }
     },
+    watch: {
+      showSubList(n) {
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
+      },
+    },
     mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 47e50b3a5..e1ce70b97 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -189,6 +189,7 @@
 </template>
 <script>
   var vm;
+  import bus from '../../../libs/bus';
   export default {
     name: "account",
     data() {
@@ -329,6 +330,7 @@
         this.$bottomBoxWindow.listResize(vm, e);
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 8707149b3..3bdb37283 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -160,6 +160,7 @@
 </template>
 <script>
   var vm;
+  import bus from '../../../libs/bus';
   export default {
     name: "dc",
     data() {
@@ -288,6 +289,7 @@
         this.tablelable = data;
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index ff76d2cb4..beecd8845 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -113,6 +113,7 @@
 </template>
 <script>
   import axios from 'axios'
+  import bus from '../../../libs/bus';
   export default {
     name: "mib",
     data() {
@@ -257,6 +258,7 @@
         this.rightBox.show = false;
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index be250c1c1..f5161d79f 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -92,6 +92,7 @@
 
 </template>
 <script>
+  import bus from '../../../libs/bus';
   export default {
     name: "model",
     data() {
@@ -231,6 +232,7 @@
         this.rightBox.show = false;
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 1a0bc3ae4..b24e8533d 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -193,7 +193,7 @@
 <script>
   import {host} from '../../common/js/validate';
   import {port} from '../../common/js/validate';
-
+  import bus from '../../../libs/bus';
   var vm;
   export default {
     name: "prom",
@@ -568,6 +568,7 @@
         this.rightBox.show = false;
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 8b75a195e..41f094c75 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -186,6 +186,7 @@
     import {port} from '../../common/js/validate'
     import {domain} from '../../common/js/validate'
     import {host} from '../../common/js/validate'
+    import bus from '../../../libs/bus';
 
     export default {
         name: "system",
@@ -410,6 +411,7 @@
             }
           },
           jumpTo(data, id) {
+            bus.$emit("menu-change", data);
             this.$router.push({
               path: "/" + data,
               query: {
diff --git a/nezha-fronted/src/components/page/config/terminallog.vue b/nezha-fronted/src/components/page/config/terminallog.vue
index 275b1a307..035c9146b 100644
--- a/nezha-fronted/src/components/page/config/terminallog.vue
+++ b/nezha-fronted/src/components/page/config/terminallog.vue
@@ -95,6 +95,7 @@
   </div>
 </template>
 <script>
+  import bus from '../../../libs/bus';
   export default {
     name: "terminallog",
     data() {
@@ -278,6 +279,7 @@
         })
       },
       jumpTo(data, id) {
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index 9d8b34360..29d47ce5e 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -197,6 +197,7 @@ export default {
     jumpTo(data,id) {
       //this.$store.state.assetData.moduleData = data;
       //this.$store.state.assetData.selectedData = id;
+      bus.$emit("menu-change", data);
       this.$store.state.showPanel.id = 0;
       this.$store.state.showPanel.name = '';
       this.$router.push({
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index 01efe6c42..f0cc91a37 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -94,6 +94,7 @@
   import chart from "./chart";
   import axios from 'axios';
   import chartDataFormat from "../../../charts/chartDataFormat";
+  import bus from '../../../../libs/bus';
   export default {
     name: "overview",
     components:{
@@ -1139,6 +1140,7 @@
       jumpTo(data, id) {
         //this.$store.state.assetData.moduleData = data
         //this.$store.state.assetData.selectedData = id
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 3ab333262..6ccf2dedf 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -428,6 +428,7 @@
       jumpTo(data, id) {
         //this.$store.state.assetData.moduleData = data
         //this.$store.state.assetData.selectedData = id
+        bus.$emit("menu-change", data);
         this.$router.push({
           path: "/" + data,
           query: {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 5db1d0b9f..b1af41c17 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -1233,7 +1233,7 @@
   .metric-tip-icon{
     vertical-align: middle;
     /*color: #3971BA;*/
-    -webkit-transform:scale(0.6);
+    transform: scale(0.6);
     /*-webkit-transform-origin: left top;*/
     display:inline-block;
   }