From 63b43da537cd6586300811801bec744bcc170b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Sat, 28 Mar 2020 20:44:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=87=A0=E4=B8=AA=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.asset详情页
2.asset页面 alert 超链接
3.alert rule 详情页
4.datacenter详情页
---
 nezha-fronted/src/assets/stylus/main.scss     |  10 +-
 .../components/common/bottomBox/bottomBox.vue |   5 +
 .../common/bottomBox/dcBottomBox.vue          | 298 ------------------
 .../alertMessageTab.vue}                      | 266 +++++++---------
 .../common/bottomBox/tabs/commonDetailTab.vue |  17 +-
 .../components/common/rightBox/assetBox.vue   |  10 +-
 .../src/components/page/alert/config.vue      |  80 ++++-
 .../src/components/page/asset/asset.vue       |  79 +++--
 .../src/components/page/config/account.vue    |   2 +-
 .../src/components/page/config/dc.vue         |  13 +-
 .../src/components/page/config/promServer.vue |   6 +
 nezha-fronted/src/main.js                     |   6 +-
 nezha-fronted/src/tools.js                    |  47 +--
 13 files changed, 307 insertions(+), 532 deletions(-)
 delete mode 100644 nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
 rename nezha-fronted/src/components/common/bottomBox/{alertMessageBox.vue => tabs/alertMessageTab.vue} (60%)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 8ef04ff18..022fd75d0 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -689,6 +689,12 @@ li{
   padding: 0;
   background-color: $content-right-background-color;
 }
+.nz-table.el-table td.has-message .cell {
+  background-color: #f8d7da;
+}
+.nz-table.el-table td.has-no-message .cell {
+  background-color: #d4edda;
+}
 .nz-table.el-table th {
   padding: 0;
 }
@@ -1335,10 +1341,10 @@ li{
   margin-right: 5px;
 }
 .red {
-  background-color:#ff6347;
+  background-color: #ff6347 !important;
 }
 .green {
-  background-color:lightGreen;
+  background-color:lightGreen !important;
 }
 .grey {
   background-color:lightGrey;
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 037f0bf7e..86cd32185 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -21,6 +21,9 @@
       ></common-detail-tab>
       <!--机柜-->
       <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
+      <!--告警信息-->
+      <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+
     </div>
   </span>
 </template>
@@ -28,12 +31,14 @@
 <script>
   import commonDetailTab from "./tabs/commonDetailTab"
   import cabinetTab from "./tabs/cabinetTab";
+  import alertMessageTab from "./tabs/alertMessageTab";
 
   export default {
     name: "cabinetBox",
     components:{
       'common-detail-tab': commonDetailTab,
       'cabinet-tab': cabinetTab,
+      'alert-message-tab': alertMessageTab,
     },
     props: {
       isFullScreen: false, //是否全屏
diff --git a/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue b/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
deleted file mode 100644
index cb89b4d9d..000000000
--- a/nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<template>
-  <span>
-    <!-- 副列表 endpoint query-->
-    <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
-    <div class="sub-list" v-if="showSubList">
-      <div class="sub-list-window-control">
-        <!--半屏-->
-        <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
-        <!--全屏-->
-        <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
-        <!--关闭-->
-        <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
-      </div>
-      <template>
-        <div class="sub-top-tools" v-show="subResizeShow">
-          <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
-            <div class="sub-list-tab">{{$t("dashboard.overview.dataCenter.cabinet")}}</div>
-            <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
-          </div>
-          <div class="top-tool-right">
-            <div class="top-tool-search">
-              <search-input :searchMsg="searchMsg" @search="search"></search-input>
-            </div>
-            <button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
-          </div>
-        </div>
-        <el-table
-          class="nz-table"
-          :data="tableData"
-          border
-          v-show="subResizeShow"
-          v-loading="loading"
-          ref="cabTable"
-          v-scrollBar:el-table
-          :height="$tableHeight.noPagination"
-          style="width: 100%;">
-          <el-table-column
-            :resizable="false"
-            v-for="(item, index) in tableTitle"
-            v-if="item.show"
-            :width="item.width"
-            :key="`col-${index}`"
-            :label="item.label"
-          >
-            <template slot-scope="scope" :column="item">
-              <div v-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.edit')" @click="editCabinet(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                &nbsp;
-                <span :title="$t('overall.delete')" @click="delCabinet(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              </div>
-              <template v-else-if="item.prop == 'assetStat'">
-                <el-popover
-                  placement="top-start"
-                  offset="-100"
-                  trigger="hover"
-                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
-                  <div slot="reference" class="dc-asset-states">
-                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-                  </div>
-                </el-popover>
-
-              </template >
-              <template v-else-if="item.prop == 'alertStat'">
-                <el-popover
-                  placement="top-start"
-                  offset="-128"
-                  trigger="hover"
-                  :content="$t('overall.result.total') + '：' + scope.row.alertStat.total + '，' + $t('alert.config.high') + '：' + scope.row.alertStat.high + '，' + $t('alert.config.medium') + '：' + scope.row.alertStat.medium+ '，' + $t('alert.config.low') + '：' + scope.row.alertStat.low">
-                  <div slot="reference" class="dc-asset-states">
-                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.alertStat.total}}</span>
-                    <span class="dc-asset-state dc-asset-state-high">{{scope.row.alertStat.high}}</span>
-                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.alertStat.medium}}</span>
-                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.alertStat.low}}</span>
-                  </div>
-                </el-popover>
-              </template >
-              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-        </el-table>
-        <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
-        <button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
-      </template>
-    </div>
-  </span>
-</template>
-
-<script>
-  import cabinetBox from "../../common/rightBox/cabinetBox";
-
-  export default {
-    name: "cabinetBox",
-    components:{
-      'cabinet-box':cabinetBox
-    },
-    props: {
-      isFullScreen: false, //是否全屏
-      showSubList: Boolean, //是否显示
-      subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
-      obj: Object, //关联的实体对象，有："asset"、"alertRule"
-    },
-    data() {
-      return {
-        currentCabinet: {
-          id:'',
-          idcId:'',
-          name:'',
-          remark:'',
-          seq:'',
-          uSize:0
-        },
-        showTopBtn: false, //top按钮是否显示
-        loading: false,
-        currentDc: {},
-        tableTitle: [
-          {
-            label: 'ID',
-            prop: 'id',
-            show: true,
-            width: 80
-          },
-          {
-            label:this.$t('overall.name'),
-            prop:'name',
-            show:true
-          },
-          {
-            label:this.$t('asset.createAssetTab.uSize'),
-            prop:'uSize',
-            show:true
-          },
-          {
-            label:this.$t('config.dc.assets'),
-            prop:'assetStat',
-            show:true
-          },
-          {
-            label:this.$t('alert.alert'),
-            prop:'alertStat',
-            show:true
-          },
-          {
-            label:this.$t('config.dc.remark'),
-            prop:'remark',
-            show:true
-          },
-          {
-            label: this.$t('config.account.option'),
-            prop: 'option',
-            show: true,
-            width: 120
-          }
-        ],
-        searchMsg: { //给搜索框子组件传递的信息
-          zheze_none: true,
-          searchLabelList: [
-            {
-              id: 11,
-              name: this.$t('overall.name'),
-              type: 'input',
-              label: 'name',
-              disabled: false
-            },
-            {
-              id:12,
-              name:this.$t('asset.createAssetTab.uSize'),
-              label:'uSize',
-              disabled: false
-            },
-            {
-              id:13,
-              name:this.$t('config.dc.remark'),
-              label:'remark',
-              disabled: false
-            }
-          ],
-        },
-        searchLabel: { //搜索参数
-        },
-        tableData: [],
-      }
-    },
-    methods: {
-      toAddCabinet:function(){
-        this.$refs.cabinetEditBox.show(true,true);
-        this.$refs.cabinetEditBox.reset();
-      },
-      editCabinet(cabinet) {
-        this.currentCabinet = JSON.parse(JSON.stringify(cabinet));
-        console.info(this.$refs.cabinetEditBox)
-        this.$refs.cabinetEditBox.show(true, true);
-      },
-      getCabinetList() {
-        this.tableData = [];
-        this.loading = true;
-        this.$set(this.searchLabel, "pageNo", 1);
-        this.$set(this.searchLabel, "pageSize", -1);
-        this.$get("/cabinet", this.searchLabel).then(response => {
-          if (response.code == 200) {
-            this.loading = false;
-            this.tableData = response.data.list;
-          }
-        });
-      },
-      search: function (searchObj) {
-        this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        this.getCabinetList();
-      },
-      exitFullScreen() {
-        this.$emit("exitFullScreen");
-      },
-      fullScreen() {
-        this.$emit("fullScreen");
-      },
-      closeSubList() {
-        this.$emit("closeSubList");
-        this.tableData = [];
-      },
-      listResize(e) {
-        this.$emit('listResize', e);
-      },
-      delCabinet:function(cabinet){
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
-            if(response.code ==  200){
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getCabinetList();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        })
-      },
-    },
-    watch: {
-      obj: {
-        immediate: true,
-        deep: true,
-        handler(n) {
-          if (n) {
-            this.currentDc = JSON.parse(JSON.stringify(n));
-            this.searchLabel = {idcId: this.currentDc.id};
-            this.getCabinetList();
-          }
-        }
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
-            } else {
-              this.showTopBtn = false;
-            }
-          });
-        }
-      });
-    }
-  }
-</script>
-
-<style lang="scss">
-  /*重写el-loading样式*/
-  .nz-table .el-loading-spinner .circular{
-    width: 42px;
-    height: 42px;
-    animation: loading-rotate 2s linear infinite;
-    display: none;
-  }
-  .nz-table .el-loading-spinner{
-    background: url(../../../assets/img/loading.gif) no-repeat;
-    background-size: 48px 48px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    top: 50%;
-    left: 48.5%;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
similarity index 60%
rename from nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
rename to nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 4dfa70cbd..7ffbb5405 100644
--- a/nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -1,107 +1,94 @@
 <template>
   <span>
-    <!-- 副列表 endpoint query-->
-    <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
-    <div class="sub-list" v-if="showSubList">
-      <div class="sub-top-tools" v-show="subResizeShow">
-        <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
-          <div class="sub-list-tab">{{$t("overall.query")}}</div>
-          <span class="sub-list-tab-txt">
-            <template v-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
-            <template v-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
-          </span>
-        </div>
-        <!--时间选择器-->
-        <div class="top-tool-right">
-          <div class="top-tool-search">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
-          <div class="sub-list-window-control">
-            <!--半屏-->
-            <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
-            <!--全屏-->
-            <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
-            <!--关闭-->
-            <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
-          </div>
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">
+          <template v-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
+          <template v-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
+        </div><div
+        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab sub-list-tab-active">{{$t("alert.message")}}</div>
+      </div>
+      <div class="top-tool-right">
+        <div class="top-tool-search">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
         </div>
       </div>
-      <el-table
-        :data="tableData"
-        v-loading="loading"
-        element-loading-background="rgba(0, 0, 0, 0)"
-        border
-        tooltip-effect="light"
-        v-scrollBar:el-table
-        class="nz-table"
-        :height="$tableHeight.openSubList.subList"
-        ref="alertMessageSubList"
-        v-show="subResizeShow"
-        style="width: 100%; margin-top: 5px;">
-        <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="too-long-split" :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" : ""}}
-              </span>
-            </div>
-            <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+    </div>
+    <el-table
+      class="nz-table"
+      :data="tableData"
+      element-loading-background="rgba(0, 0, 0, 0)"
+      border
+      v-loading="loading"
+      ref="alertMessageSubList"
+      tooltip-effect="light"
+      v-scrollBar:el-table
+      :height="$tableHeight.openSubList.subList"
+      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="too-long-split" :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>
-        </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>
+          <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>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
-    </div>
+          <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" : ""}}
+            </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 && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
     <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
     <asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-box>
@@ -120,13 +107,12 @@
 
 <script>
   export default {
-    name: "alertMessageBox",
+    name: "alertMessageTab",
+    components: {
+    },
     props: {
-      isFullScreen: false, //是否全屏
-      showSubList: Boolean, //是否显示
-      subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
       from: String, //来自哪个主页面，有："asset"、"alertRule"
-      obj: Object, //关联的实体对象，有："asset"、"alertRule"
+      obj: Object, //关联的实体对象
     },
     data() {
       return {
@@ -231,19 +217,6 @@
           }
         ],
         tableData: [],
-        viewRuleData: {
-          id: '',
-          alertName: '',
-          type: '',
-          linkObject: {id: '', name: ''},
-          linkId: '',
-          expr: '',
-          last: '',
-          severity: '',
-          summary: '',
-          description: '',
-          receiver: '',
-        },
         viewProjectData: {id: '', name: '', remark: ''},
         viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
         viewAssetState: false,
@@ -285,6 +258,10 @@
         this.tablelable = data;
         this.dropCol = data;
       },
+      // 切换tab
+      changeTab(tab) {
+        this.$emit('changeTab', tab);
+      },
       getAlertList() {
         this.tableData = [];
         this.loading = true;
@@ -307,24 +284,7 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAlertList();
       },
-      search: function (searchObj) {
-        this.searchLabel = {};
-        if (this.from == "alertRule") {
-          this.searchLabel.ruleId = this.obj.id;
-        } else if (this.from == "asset") {
-          this.searchLabel.type = 3;
-          this.searchLabel.linkId = this.obj.id;
-        }
-        this.pageObj.pageNo = 1;
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }
-        this.getAlertList();
-      },
       viewAlertType(type, typeObj) {
-        console.info(type, typeObj)
         this.closeViews();
         switch (type) {
           case 1:
@@ -360,11 +320,21 @@
         this.$refs.moduleBox.show(false, false);
         this.viewAssetState = false;
       },
-      exitFullScreen() {
-        this.$emit("exitFullScreen");
-      },
-      fullScreen() {
-        this.$emit("fullScreen");
+      search: function (searchObj) {
+        this.searchLabel = {};
+        if (this.from == "alertRule") {
+          this.searchLabel.ruleId = this.obj.id;
+        } else if (this.from == "asset") {
+          this.searchLabel.type = 3;
+          this.searchLabel.linkId = this.obj.id;
+        }
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        this.getAlertList();
       },
       closeSubList() {
         this.$emit("closeSubList");
@@ -376,9 +346,6 @@
           this.viewAssetState = false
           this.$refs['assetEditUnit'].tabView = false
         }
-      },
-      listResize(e) {
-        this.$emit('listResize', e);
       }
     },
     watch: {
@@ -431,21 +398,6 @@
   }
 </script>
 
-<style lang="scss">
-  /*重写el-loading样式*/
-  .nz-table .el-loading-spinner .circular{
-    width: 42px;
-    height: 42px;
-    animation: loading-rotate 2s linear infinite;
-    display: none;
-  }
-  .nz-table .el-loading-spinner{
-    background: url(../../../assets/img/loading.gif) no-repeat;
-    background-size: 48px 48px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    top: 50%;
-    left: 48.5%;
-  }
+<style scoped>
+
 </style>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
index 9a9f009e6..acc93e23d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
@@ -6,15 +6,26 @@
           <template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
           <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
           <template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
+          <template v-else-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
+          <template v-else-if="from == 'asset'">{{$t("asset.tableTitle.host")}}：{{obj.host}}</template>
         </div><div class="sub-list-tab sub-list-tab-active">{{$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("alert.message")}}</div>
         </template>
       </div>
     </div>
     <div style="margin-top: 10px;">
-      <div style="padding: 5px; color: #606266;" v-for="item in detail">
-        {{item.label}}: {{item.value}}
-      </div>
+      <template v-for="item in detail">
+        <div style="width: 30%; display: inline-block; padding: 5px; color: #606266; word-break: break-all; vertical-align: top">
+          <span>{{item.label}}: </span>
+          <template v-if="item.type && item.type == 'status'">
+            <div style="margin-top: 0" :class="{'active-icon green': item.value == '1', 'active-icon red': item.value == '0' || item.value == '-1' || item.value == '-2'}"></div>
+            <span style="color: #999">{{item.msg}}</span>
+          </template>
+          <template v-else>{{item.value}}</template>
+        </div>
+      </template>
     </div>
   </span>
 </template>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index bcc933d82..0003fc2e8 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -29,11 +29,11 @@
               <span slot="reference" class="sidebar-info-item-txt" style="margin-bottom: -14px; display: block;" v-if="tabView">{{assetData.sn}}</span>
             </el-popover>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.host')" prop="host">
+          <el-form-item :label="$t('asset.createAssetTab.host')" prop="host">
             <el-input size="small" v-if="!tabView" v-model="assetData.host"/>
             <span v-if="tabView">{{assetData.host}}</span>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.state')">
+          <el-form-item :label="$t('asset.createAssetTab.state')">
             <div v-if="!tabView" class="select-style">
               <el-select size="small" v-model="assetData.state" placeholder="" popper-class="asset-dropdown" >
                 <el-option
@@ -93,7 +93,7 @@
             <span v-if="tabView">{{assetViewData.assetType}}</span>
           </el-form-item>
           <!------------------------------------------厂商/型号---------------------------------------------->
-          <el-form-item :label="this.$t('asset.createAssetTab.vendorModel')" class="right-box-form-content" prop="modelId">
+          <el-form-item :label="$t('asset.createAssetTab.vendorModel')" class="right-box-form-content" prop="modelId">
             <template v-if="!tabView">
               <el-cascader
                 :options="vendorTypeOptionData"
@@ -111,7 +111,7 @@
             </template>
             <span v-if="tabView">{{assetViewData.vendor}}   {{assetViewData.model}}</span>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.purchaseDate')">
+          <el-form-item :label="$t('asset.createAssetTab.purchaseDate')">
             <div class="select-style" v-if="!tabView">
               <el-date-picker
                 size="small"
@@ -127,7 +127,7 @@
           <div class="asset-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
           <div class="line-100 asset-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
-          <el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
+          <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
 <!--              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
               <el-select popper-class="asset-dropdown" size="small" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 7468fe35d..1f1a9664a 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -37,6 +37,7 @@
           tooltip-effect="light"
           :height="mainTableHeight"
           v-scrollBar:el-table
+          :cell-class-name="messageStyle"
           style="width: 100%;">
           <el-table-column
             :resizable="false"
@@ -47,6 +48,7 @@
             :label="item.label"
             show-overflow-tooltip
             min-width="110px"
+
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">
@@ -70,7 +72,6 @@
                       @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
                 <span v-else>-</span>
               </template>
-              <template v-else-if="item.prop == 'alertName'">{{scope.row.alertName}}</template>
               <template v-else-if="item.prop == 'alertNum'">
                 <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum}}</span>
               </template>
@@ -91,8 +92,10 @@
         </div>
         <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
-      <alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen"
-                         @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab="targetTab" :detail="ruleDetail"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      <!--<alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen"
+                         @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>-->
     </div>
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
@@ -118,12 +121,17 @@
     name: "alert-config",
     data() {
       return {
+        /*二级列表相关*/
+        ruleDetail: {},
+        targetTab: '', //展示二级列表中的哪个页签
         showElementSet: false, //控制自定义列的弹框
         inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
         mainResizeShow: true, //dom高度改变时部分内容是否展示
         subResizeShow: true,
         isFullScreen: false,
         showSubList: false, //是否展示二级列表
+        alertRuleForMessage: {}, //传给alertMessage上滑框的对象
+
         tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -172,7 +180,6 @@
           description: '',
           receiver: '',
         },
-        alertRuleForMessage: {}, //传给alertMessage上滑框的对象
         tablelable: [],
         dropCol: [],
         pageObj: {
@@ -219,11 +226,6 @@
             prop: 'alertName',
             show: true,
             width: 120
-          }, {
-            label: this.$t("alert.config.alertNum"),
-            prop: 'alertNum',
-            show: true,
-            width: 120
           }, {
             label: this.$t("alert.config.expr"),
             prop: 'expr',
@@ -249,6 +251,11 @@
             label: this.$t('alert.description'),
             prop: 'description',
             show: true,
+          }, {
+            label: this.$t("alert.message"),
+            prop: 'alertNum',
+            show: true,
+            width: 90
           }, /*{
             label: this.$t('alert.config.receiver'),
             prop: 'receiver',
@@ -270,6 +277,7 @@
       queryMessage(alertRule) {
         this.alertRuleForMessage = alertRule;
         this.showSubList = true;
+        this.targetTab = 'alertMessage';
       },
       // 鼠标拖动二级列表
       listResize(e) {
@@ -405,10 +413,20 @@
         this.$refs.alertConfigBox.show(true, true);
       },
       detail: function (u) {
-        this.alertRule = Object.assign({}, u);
-        this.$refs.alertConfigBox.show(true, false);
+        this.alertRuleForMessage = Object.assign({}, u);
+        this.targetTab = "detail";
+        this.showSubList = true;
+      },
+      messageStyle(e) {
+        if (e.columnIndex == 8) {
+          if (e.row.alertNum > 0) {
+            return 'has-message';
+          } else {
+            return 'has-no-message';
+          }
+        }
+        return '';
       },
-
       getTableData: function () {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
@@ -536,7 +554,35 @@
         this.$refs.projectBox.show(false, false);
         this.$refs.moduleBox.show(false, false);
         this.viewAsset = false;
-      }
+      },
+      convertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("alert.alertName"), value: obj.alertName});
+        detail.push({label: this.$t("alert.config.expr"), value: obj.expr});
+        let type = "";
+        for (let i = 0; i < this.typeData.length; i++) {
+          if (obj.type == this.typeData[i].key) {
+            type = this.typeData[i].value;
+            break;
+          }
+        }
+        detail.push({label: this.$t("alert.list.type"), value: type});
+        let link = "";
+        if (obj.type == 1 || obj.type == 2) {
+          link = obj.linkObject.name;
+        } else if (obj.type == 3) {
+          link = obj.linkObject.host;
+        }
+        detail.push({label: this.$t("alert.config.link"), value: link});
+        detail.push({label: this.$t("alert.config.for"), value: obj.last});
+        let severity = this.severityData.filter((item, index) => {
+          return obj.severity == item.key;
+        })[0].value;
+        detail.push({label: this.$t("alert.severity"), value: severity});
+        detail.push({label: this.$t("alert.description"), value: obj.description});
+        detail.push({label: this.$t("alert.message"), value: obj.alertNum});
+        return detail;
+      },
     },
     watch: {
       showSubList(n) {
@@ -579,7 +625,13 @@
             }
           }, 210);
         }
-      }
+      },
+      alertRuleForMessage: {
+        deep: true,
+        handler(n) {
+          this.ruleDetail = this.convertToDetail(n);
+        }
+      },
     },
     destroyed() {
       window.onresize = null;
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 91762405a..3f6d60283 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -156,7 +156,7 @@
                 <span>{{scope.row.idc.tel}}</span>
               </div>
               <template v-if="item.prop == 'option'">
-                <span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row.id)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
+                <span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
                   class="el-icon-view"></i>
                 </span>
                 &nbsp;
@@ -187,14 +187,10 @@
         </div>
         <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
-      <alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'asset'" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen"
-                         @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab="targetTab" :detail="assetDetail"
+                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </div>
 
-    <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
-                    @sendStateData="tabControl"></asset-add-unit>
-    <asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
-               ref="assetEditUnit"></asset-edit-unit>-->
     <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
                      ref="assetEditUnit"></asset-box>
     <element-set
@@ -223,6 +219,8 @@
     },
     data() {
       return {
+        /*二级页面相关*/
+        assetDetail: [], //asset详情
         alertMsgAsset: {}, //告警信息对应的asset对象
         showElementSet: false, //控制自定义列的弹框
         inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
@@ -231,6 +229,8 @@
         isFullScreen: false,
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
         showSubList: false, //是否展示二级列表
+        targetTab: '', //展示二级列表中的哪个页签
+
         showElementSet: false, //自定义列弹框是否显示
         tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
         searchMsg: { //给搜索框子组件传递的信息
@@ -487,7 +487,13 @@
             }
           }, 210);
         }
-      }
+      },
+      alertMsgAsset: {
+        deep: true,
+        handler(n) {
+          this.assetDetail = this.convertToDetail(n);
+        }
+      },
     },
     methods: {
       // 鼠标拖动二级列表
@@ -651,16 +657,6 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
-      ssss(id, sn) {
-        let routeData = this.$router.resolve({
-          name: "terminal",
-          query: {
-            id: id,
-            host: sn
-          }
-        });
-        window.open(routeData.href);
-      },
       cli(id,host,accounts){
         let port = '';
         let accountId = '';
@@ -678,6 +674,7 @@
         //this.$refs.webSsh.show(id,host,accountId,port);
       },
       jumpToAlertMsg(asset) {
+        this.targetTab = 'alertMessage';
         this.alertMsgAsset = JSON.parse(JSON.stringify(asset));
         this.showSubList = true;
       },
@@ -808,9 +805,12 @@
           this.$refs['assetEditUnit'].getAssetData(id)
         }
         if (data === 'showView') {
-          this.editUnitShow = true
+          this.alertMsgAsset = Object.assign({}, id);
+          this.targetTab = "detail";
+          this.showSubList = true;
+          /*this.editUnitShow = true
           this.$refs['assetEditUnit'].getAssetData(id)
-          this.$refs['assetEditUnit'].tabView = true
+          this.$refs['assetEditUnit'].tabView = true*/
         }
       },
       editing() {
@@ -898,6 +898,45 @@
         }
         this.getAssetData();
       },
+      convertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
+        detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
+        detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
+        detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
+        detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
+        detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
+        detail.push({label: this.$t("asset.createAssetTab.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
+        detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
+        detail.push({label: this.$t("asset.createAssetTab.purchaseDate"), value: obj.purchaseDate});
+        detail.push({label: this.$t("asset.createAssetTab.dcName"), value: obj.idc ? obj.idc.name : ""});
+        detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
+        detail.push({label: this.$t("asset.createAssetTab.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
+        detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
+        detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.idc ? obj.idc.tel : ""});
+        detail.push({label: this.$t("asset.createAssetTab.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
+        detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
+        detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
+        if (obj.accounts.length > 0) {
+          let account = obj.accounts[0];
+          if (account.protocol == 'SSH') {
+            detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'SSH'});
+            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+            let loginType = "";
+            if (account.authType == 1) {
+              loginType = this.$t('asset.createAssetTab.password');
+            } else if (account.authType == 2) {
+              loginType = this.$t('asset.createAssetTab.ssh');
+            }
+            detail.push({label: this.$t("asset.createAssetTab.loginType"), value: loginType});
+          } else if (account.protocol == 'TELNET') {
+            detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'TELNET'});
+            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+          }
+          detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
+        }
+        return detail;
+      },
       formatPingTime:function(str){
         if(!str || str == ''){
           return this.$t('asset.assetStatPre')+this.$t('asset.assetStatDown');
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 749fc64e8..5e03502a0 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -26,7 +26,7 @@
     <div class="content-right">
       <div class="main-list" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
-          <div class="top-tool-main-right margin-r-20" :class="{'top-tool-main-right-to-left': showSubList}">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
             <div class="top-tool-search">
               <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
             </div>
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 72ecd1cde..13419de0f 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -157,13 +157,17 @@
     name: "dc",
     data() {
       return {
+        /*二级列表相关*/
         targetTab: '', //展示二级列表中的哪个页签
-        showElementSet: false, //控制自定义列的弹框
         inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
         mainResizeShow: true, //dom高度改变时部分内容是否展示
         subResizeShow: true,
         isFullScreen: false,
         showSubList: false, //是否展示二级列表
+        cabinetDc: {}, // 用在二级cabinet列表页里
+        dcDetail: [], //dc的详情信息，包含标题
+
+        showElementSet: false, //控制自定义列的弹框
         tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -178,8 +182,6 @@
             name: ''
           }
         },
-        cabinetDc: {}, // 用在二级cabinet列表页里
-        dcDetail: [], //dc的详情信息，包含标题
         pageObj: {
           pageNo: 1,
           pageSize: 20,
@@ -403,7 +405,11 @@
       convertToDetail(obj) {
         let detail = [];
         detail.push({label: this.$t("overall.name"), value: obj.name});
+        detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
         detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.location});
+        detail.push({label: this.$t("config.dc.cabinetNum"), value: obj.cabinetNum});
+        let assets = this.$t('overall.result.total') + ' ' + obj.assetStat.total + '，' + this.$t('asset.createAssetTab.inStock') + ' ' + obj.assetStat.inStock + '，' + this.$t('asset.createAssetTab.notInStock') + ' ' + obj.assetStat.outStock;
+        detail.push({label: this.$t("config.dc.assets"), value: assets});
         detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.tel});
         let principal = '';
         for (let i = 0; i < this.userData.length; i++) {
@@ -413,7 +419,6 @@
           }
         }
         detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
-        detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
         return detail;
       },
       toAdd() {
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index cccb01b41..e7e2276ef 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -458,6 +458,12 @@
           }
         }
         detail.push({label: this.$t('config.promServer.type'), value: type});
+        detail.push({
+          label: this.$t('asset.createAssetTab.state'),
+          value: obj.status,
+          type: 'status',
+          msg: this.$t('asset.assetStatPre')+(obj.checkTime ? obj.checkTime : this.$t('asset.assetStatDown'))
+        });
         return detail;
       },
       elementsetShow(s, e) {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 96f40edfa..6dc29e55d 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -36,9 +36,7 @@ import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面
 import dcBox from "./components/common/rightBox/dcBox"; //dc弹框
 import modelBox from "./components/common/rightBox/modelBox"; //model弹框
 import selectArea from "./components/common/popBox/selectArea"; //dc弹框
-import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框
-import dcBottomBox from "./components/common/bottomBox/dcBottomBox"; //机柜上滑框
-import bottomBox from "./components/common/bottomBox/bottomBox"; //机柜上滑框
+import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
@@ -62,8 +60,6 @@ Vue.component("dc-box", dcBox);
 Vue.component("model-box", modelBox);
 Vue.component("select-area", selectArea);
 Vue.component('loading',loading);
-Vue.component('alert-message-box', alertMessageBox);
-Vue.component('dc-bottom-box', dcBottomBox);
 Vue.component('bottom-box', bottomBox);
 Vue.component('mib-box',mibBox);
 
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
index 51682d163..7c0c542cf 100644
--- a/nezha-fronted/src/tools.js
+++ b/nezha-fronted/src/tools.js
@@ -52,7 +52,6 @@ export const clickoutside = {
       if (el.contains(e.target)) {
         return false;
       } else {
-        //console.info(e)
         let flag = true;
         top: for (let i = 0; i < e.path.length; i++) {
           for (let j = 0; j < exceptClassName.length; j++) {
@@ -113,29 +112,31 @@ export const scrollBar = {
     }
 
     // 启用x轴后不让原生滚动条出来作乱
-    vnode.context.$nextTick(() => {
-      if (arg === "xterm") {
-        el = el.querySelector(".xterm-viewport");
-        !el && console.warn("未发现className为xterm-viewport的dom");
-      }
-      el.classList.add("ps");
-      el.addEventListener("ps-scroll-y", () =>
-        el.classList.add("ps")
-      );
-      el.addEventListener("ps-scroll-x", () =>
-        el.classList.add("ps")
-      );
-      //el上挂一份属性
-      el_scrollBar(el);
-    });
+    if (el) {
+      vnode.context.$nextTick(() => {
+        if (arg === "xterm") {
+          el = el.querySelector(".xterm-viewport");
+          !el && console.warn("未发现className为xterm-viewport的dom");
+        }
+        el.classList.add("ps");
+        el.addEventListener("ps-scroll-y", () =>
+          el.classList.add("ps")
+        );
+        el.addEventListener("ps-scroll-x", () =>
+          el.classList.add("ps")
+        );
+        //el上挂一份属性
+        el_scrollBar(el);
+      });
 
-    const rules = ["fixed", "absolute", "relative"];
-    if (!rules.includes(window.getComputedStyle(el, null).position)) {
-      console.error(
-        `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
-          "、"
-        )}`
-      );
+      const rules = ["fixed", "absolute", "relative"];
+      if (!rules.includes(window.getComputedStyle(el, null).position)) {
+        console.error(
+          `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
+            "、"
+          )}`
+        );
+      }
     }
   },
   componentUpdated(el, binding, vnode, oldVnode) {