From 4ba7d6f5fb669d266408530b43d1c7a0def0f2c4 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 15 Jul 2020 10:58:45 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20asset=E5=BA=95=E9=83=A8=E4=B8=8A?=
 =?UTF-8?q?=E6=BB=91=E6=A1=86=E5=BC=80=E3=80=81=E5=85=B3=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8Cresize=E6=9C=AA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   4 +-
 .../components/common/bottomBox/bottomBox.vue |  49 +--
 .../common/bottomBox/tabs/panelTab.vue        |   2 +-
 .../components/common/rightBox/accountBox.vue |   6 +-
 .../src/components/page/asset/asset.vue       | 368 +++++++++---------
 .../src/components/page/config/account.vue    |  63 +--
 6 files changed, 220 insertions(+), 272 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 3cfd95de8..f70154cc7 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -211,7 +211,7 @@ li{
 .nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
   height: 40px;
   font-size: 12px;
-  padding: 4px 8px;
+  padding: 4px 35px;
   border-radius: 0 0 10px 10px;
 }
 .nz-btn.nz-btn-size-small.nz-btn-size-alien { //弹框顶部异形按钮
@@ -645,7 +645,7 @@ li{
   height: calc(50% - 4px);
 }
 .sub-list {
-  height: calc(50% - 4px);
+  height: calc(100% - 9px);
   position: relative;
 }
 .main-and-sub-transition {
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index c1031bf5b..2963961bc 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -1,9 +1,10 @@
 <template>
-  <span>
+  <div style="height: 50%">
     <!-- 副列表 -->
     <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
-    <div class="sub-list main-and-sub-transition" v-if="showSubList">
-      <!--窗口大小控制-->
+    <div class="sub-list">
+      <!--<div class="sub-list main-and-sub-transition" 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>
@@ -13,37 +14,37 @@
         <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
       </div>
 
-      <!------TAB区------>
-      <!--通用详情-->
-      <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
-                         v-if="targetTab == 'detail'"
-                         @changeTab="changeTab"
-      ></common-detail-tab>-->
-      <!--机柜-->
+        <!------TAB区------>
+        <!--通用详情-->
+        <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
+                           v-if="targetTab == 'detail'"
+                           @changeTab="changeTab"
+        ></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>
-      <!--asset页的endpoint列表-->
+        <!--asset页的endpoint列表-->
       <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
-      <!--endpoint页的asset详情-->
-      <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
-                         v-if="targetTab == 'assetDetail' && from == 'endpoint'"
-                         @changeTab="changeTab"></common-detail-tab>-->
-      <!--endpoint-query-->
+        <!--endpoint页的asset详情-->
+        <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
+                           v-if="targetTab == 'assetDetail' && from == 'endpoint'"
+                           @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" ref="endpointQuery"></endpoint-query-tab>
 
-      <!--alertMessage页的详情-->
-      <!--<template v-if="from == 'alertMessage'">
-        <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
-                           v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
-      </template>-->
+        <!--alertMessage页的详情-->
+        <!--<template v-if="from == 'alertMessage'">
+          <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
+                             v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
+        </template>-->
 
-      <!-- model-panel/asset-detail/project-overview的panel-->
+        <!-- model-panel/asset-detail/project-overview的panel-->
       <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
                  @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
 
     </div>
-  </span>
+  </div>
 </template>
 
 <script>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index 3edec281e..6d60cd415 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel" :class="{'sub-list': from != 'project'}">
+  <div class="panel">
     <!--model和asset的工具栏-->
     <div class="sub-top-tools" v-if="from != 'project'">
       <div class="sub-list-tabs">
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 10790c6c1..753b1a693 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-account" v-clickoutside="clickos">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-      <button type="button" v-if="editUser.userId" @click="del()"
+      <button type="button" v-if="editUser.userId" @click="del"
               class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
               id="account-edit-del">
         <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
@@ -72,9 +72,6 @@
     },
     data() {
       return {
-        rightBox: {
-          title: '',
-        },
         rules: { //表单校验规则
           username: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -149,6 +146,7 @@
       },
     },
     watch: {
+      //将prop里的user转为组件内部对象
       user: {
         immediate: true,
         deep: true,
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index cd87c21cc..891e92e50 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -5,210 +5,212 @@
         <div class="sidebar-title">{{$t('asset.asset')}}</div>
         <div class="sidebar-info" style="height: 90%">
           <el-scrollbar ref="leftScrollbar" style="height: 100%">
-          <el-collapse v-model="activeType" class="left-menu-bg">
-            <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
-              <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
-                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
-                             v-for="(item,key) in checkListData" :key="key" :label=item.id>
-                  <div class="sidebar-info-item-txt">
-                    <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
-                      <span slot="reference">{{item.name}}</span>
-                    </el-popover>
-                    <span v-else>{{item.name}}</span>
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-collapse-item>
-            <el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
-              <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
-                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item,key) in assetTypeCheckListData" :key="key" :label=item.id>
-                  <div class="sidebar-info-item-txt">
-                    <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
-                      <span slot="reference">{{item.value}}</span>
-                    </el-popover>
-                    <span v-else>{{item.value}}</span>
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-collapse-item>
-            <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
-              <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
-                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item,key) in vendorCheckListData" :key="key" :label=item.id>
-                  <div class="sidebar-info-item-txt">
-                    <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
-                      <span slot="reference">{{item.value}}</span>
-                    </el-popover>
-                    <span v-else>{{item.value}}</span>
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-collapse-item>
-            <el-collapse-item name="ping" :title="$t('asset.left.ping')">
-              <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
-                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
-                  <div class="sidebar-info-item-txt">
-                    <el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
-                      <span slot="reference">{{item.label}}</span>
-                    </el-popover>
-                    <span v-else>{{item.label}}</span>
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-collapse-item>
-          </el-collapse>
+            <el-collapse v-model="activeType" class="left-menu-bg">
+              <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
+                <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
+                               v-for="(item,key) in checkListData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
+                        <span slot="reference">{{item.name}}</span>
+                      </el-popover>
+                      <span v-else>{{item.name}}</span>
+                    </div>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
+                <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item,key) in assetTypeCheckListData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
+                        <span slot="reference">{{item.value}}</span>
+                      </el-popover>
+                      <span v-else>{{item.value}}</span>
+                    </div>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
+                <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item,key) in vendorCheckListData" :key="key" :label=item.id>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
+                        <span slot="reference">{{item.value}}</span>
+                      </el-popover>
+                      <span v-else>{{item.value}}</span>
+                    </div>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+              <el-collapse-item name="ping" :title="$t('asset.left.ping')">
+                <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
+                        <span slot="reference">{{item.label}}</span>
+                      </el-popover>
+                      <span v-else>{{item.label}}</span>
+                    </div>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+            </el-collapse>
           </el-scrollbar>
         </div>
-    </div>
-          <div slot="content-right" class="slot-content">
-            <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 margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
-                  <export-excel
-                    export-file-name="asset"
-                    export-url="/asset/export"
-                    import-url="/asset/import"
-                    :params="searchLabel"
-                    @afterImport="getAssetData"
-                   >
-                    <template slot="optionZone">
-                      <button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
-                        <i class="nz-icon nz-icon-create-square"></i></button>
-                    </template>
-                  </export-excel>
-                </div>
-                <div class="pagination-top pagination-top-hide display-none"></div>
-              </div>
-
-              <el-table
-                class="nz-table"
-                :height="mainTableHeight"
-                style="width: 100%;"
-                :data="tableData"
-                v-scrollBar:el-table="'large'"
-                v-show="mainResizeShow"
-                border
-                v-loading="loading"
-                tooltip-effect="light"
-                ref="assetTable"
-                :cell-class-name="messageStyle"
+      </div>
+      <div slot="content-right" class="slot-content">
+        <div class="main-list" :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 margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
+              <export-excel
+                export-file-name="asset"
+                export-url="/asset/export"
+                import-url="/asset/import"
+                :params="searchLabel"
+                @afterImport="getAssetData"
               >
-                <el-table-column
-                  :resizable="false"
-                  v-for="(item, index) in tablelable"
-                  v-if="item.show"
-                  :width="item.width"
-                  :key="`col_${index}`"
-                  :label="item.label"
-                  :fixed="item.fixed"
-                  :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
-                  min-width="110px"
-                  :class-name="item.prop == 'option' ? 'content-right-options' : ''"
-                >
-                  <template slot-scope="scope" :column="item">
-                    <div v-if="item.prop=='ID'">
-                      <span>{{scope.row.id}}</span>
+                <template slot="optionZone">
+                  <button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
+                    <i class="nz-icon nz-icon-create-square"></i></button>
+                </template>
+              </export-excel>
+            </div>
+            <div class="pagination-top pagination-top-hide display-none"></div>
+          </div>
+
+          <el-table
+            class="nz-table"
+            :height="mainTableHeight"
+            style="width: 100%;"
+            :data="tableData"
+            v-scrollBar:el-table="'large'"
+            v-show="mainResizeShow"
+            border
+            v-loading="loading"
+            tooltip-effect="light"
+            ref="assetTable"
+            :cell-class-name="messageStyle"
+          >
+            <el-table-column
+              :resizable="false"
+              v-for="(item, index) in tablelable"
+              v-if="item.show"
+              :width="item.width"
+              :key="`col_${index}`"
+              :label="item.label"
+              :fixed="item.fixed"
+              :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
+              min-width="110px"
+              :class-name="item.prop == 'option' ? 'content-right-options' : ''"
+            >
+              <template slot-scope="scope" :column="item">
+                <div v-if="item.prop=='ID'">
+                  <span>{{scope.row.id}}</span>
+                </div>
+                <div v-if="item.prop=='assetType'">
+                  <span>{{scope.row.model.type.value}}</span>
+                </div>
+                <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
+                <div v-if="item.prop=='HOST'">
+                  <span>{{scope.row.host}}</span>
+                </div>
+                <div v-if="item.prop=='state'">
+                  <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
+                </div>
+                <div v-if="item.prop == 'pingStatus'">
+                  <el-popover
+                    placement="right"
+                    width="200"
+                    trigger="hover"
+                    :content="formatPingTime(scope.row.pingLastUpdate)">
+                    <div slot="reference" style="width: 20px">
+                      <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
                     </div>
-                    <div v-if="item.prop=='assetType'">
-                      <span>{{scope.row.model.type.value}}</span>
-                    </div>
-                    <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
-                    <div v-if="item.prop=='HOST'">
-                      <span>{{scope.row.host}}</span>
-                    </div>
-                    <div v-if="item.prop=='state'">
-                      <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
-                    </div>
-              <div v-if="item.prop == 'pingStatus'">
-                <el-popover
-                  placement="right"
-                  width="200"
-                  trigger="hover"
-                  :content="formatPingTime(scope.row.pingLastUpdate)">
-                  <div slot="reference" style="width: 20px">
-                    <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
-                  </div>
-                </el-popover>
-              </div>
-              <template v-if="item.prop=='Module'">
-                <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
-              </template>
-              <template v-if="item.prop=='Alert'">
-                <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
-              </template>
-              <div v-if="item.prop=='dataCenter'">
-                <span  >{{scope.row.idc.name}}</span>
-              </div>
-              <template v-if="item.prop=='cabinet'">
-                <span   v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
-                <span v-else >{{returnData(scope.row.cabinet)}}</span>
-              </template>
-              <div v-if="item.prop=='model'">
-                <span>{{scope.row.model.name}}</span>
-              </div>
-              <div v-if="item.prop=='vendor'">
-                <span>{{scope.row.model.vendor.value}}</span>
-              </div>
-              <div v-if="item.prop=='purchaseDate'">
-                <span>{{returnData(scope.row.purchaseDate)}}</span>
-              </div>
-              <div v-if="item.prop=='principal'">
-                <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
-              </div>
-              <div v-if="item.prop=='tel'">
-                <span>{{scope.row.idc.tel}}</span>
-              </div>
-              <template v-if="item.prop == 'option'">
+                  </el-popover>
+                </div>
+                <template v-if="item.prop=='Module'">
+                  <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
+                </template>
+                <template v-if="item.prop=='Alert'">
+                  <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
+                </template>
+                <div v-if="item.prop=='dataCenter'">
+                  <span  >{{scope.row.idc.name}}</span>
+                </div>
+                <template v-if="item.prop=='cabinet'">
+                  <span   v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
+                  <span v-else >{{returnData(scope.row.cabinet)}}</span>
+                </template>
+                <div v-if="item.prop=='model'">
+                  <span>{{scope.row.model.name}}</span>
+                </div>
+                <div v-if="item.prop=='vendor'">
+                  <span>{{scope.row.model.vendor.value}}</span>
+                </div>
+                <div v-if="item.prop=='purchaseDate'">
+                  <span>{{returnData(scope.row.purchaseDate)}}</span>
+                </div>
+                <div v-if="item.prop=='principal'">
+                  <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
+                </div>
+                <div v-if="item.prop=='tel'">
+                  <span>{{scope.row.idc.tel}}</span>
+                </div>
+                <template v-if="item.prop == 'option'">
                 <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;
-                <span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
-                  class="nz-icon nz-icon-edit"></i>
+                  &nbsp;
+                  <span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
+                    class="nz-icon nz-icon-edit"></i>
                 </span>
-                &nbsp;
-                <span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
-                  class="el-icon-delete"></i>
+                  &nbsp;
+                  <span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
+                    class="el-icon-delete"></i>
                 </span>
-                &nbsp;
-                <el-dropdown trigger="hover" @command="cli">
+                  &nbsp;
+                  <el-dropdown trigger="hover" @command="cli">
                   <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
                     class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
                   </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
 
+                </template>
               </template>
-            </template>
-          </el-table-column>
-          <el-table-column width="28" fixed="right" :resizable="false">
-            <template slot="header" slot-scope="scope">
+            </el-table-column>
+            <el-table-column width="28" fixed="right" :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>
-            <template v-slot="scope">
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-            </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>
+              </template>
+              <template v-slot="scope">
+                <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+              </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>
         </div>
+        <transition name="el-zoom-in-bottom">
+          <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
+                      @reload="getAssetData"
+                      @closeSubList="showSubList = false"
+                      @fullScreen="fullScreen"
+                      @exitFullScreen="exitFullScreen"
+                      @listResize="listResize" ></bottom-box>
+        </transition>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
-                  @reload="getAssetData"
-                  @closeSubList="showSubList = false"
-                  @fullScreen="fullScreen"
-                  @exitFullScreen="exitFullScreen"
-                  @listResize="listResize" ></bottom-box>
-    </div>
     </left-menu>
 
     <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" v-if="rightBox.show"
-                     ref="assetEditUnit"></asset-box>
+               ref="assetEditUnit"></asset-box>
     <element-set
       v-if="showElementSet"
       @close="elementsetHide"
@@ -997,7 +999,7 @@
           let label = this.tablelable[i];
 
           if (label.prop == 'pingStatus') {
-           this.tablelable.splice(i, 1);
+            this.tablelable.splice(i, 1);
             console.log(this.tablelable)
             break;
           }
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 3655fefae..6f45bc9d4 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -297,9 +297,6 @@
           this.getTableData();
         }
       },
-      clickos() {
-        this.rightBox.show = false;
-      },
       edit(u) {
         this.user = JSON.parse(JSON.stringify(u));
         this.rightBox.show = true;
@@ -328,18 +325,7 @@
         this.cleanUser();
         this.rightBox.show = true;
       },
-      tabSave: function () {
-        this.$put('sys/user/update', this.user).then(response => {
-          if (response.code === 200) {
-            this.rightBox.show = false;
-            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-          } else {
-            this.$message.error(response.msg);
-          }
-          this.getTableData();
-        });
-      },
-      save: function () {
+      save() {
         this.$refs.accountForm.validate((valid) => {
           if (valid) {
             if (this.user.userId) {
@@ -368,17 +354,9 @@
           }
         })
       },
-      saveOrToEdit: function () {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("config.account.editAccount") + "  ID：" + this.user.userId;
-        } else {
-          this.save();
-        }
-      },
-      statusChange: function (user) {
+      statusChange(user) {
         this.user = user;
-        this.tabSave();
+        this.save();
       },
       jumpTo(data, id) {
         this.$router.push({
@@ -388,41 +366,10 @@
           }
         });
       },
-      toEditReceiver: function (item) {
-        if (!item.isEdit) {
-          //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
-          this.blurEditReceiver();
-          item.isEdit = true;
-        } else {
-          //如果已在编辑状态，判断name是否有变更，有变更则发请求
-          if (item.name != item.oldName) {
-            if (this.updateReceiverName(item) == 200) {
-              item.isEdit = false;
-            }
-          } else {
-            item.errorMessage = '';
-            item.isEdit = false;
-          }
-        }
-      },
-      blurEditReceiver: function () {
-        for (let i = 0; i < this.receiverData.length; i++) {
-          if (this.receiverData[i].isEdit) {
-            this.receiverData[i].name = this.receiverData[i].oldName;
-            this.receiverData[i].isEdit = false;
-            this.receiverData[i].errorMessage = '';
-            break;
-          }
-        }
-      },
-      toDelReceiver: function (item) {
-        this.blurEditReceiver();
-        //TODO 请求后台，删除用户组
-      },
-      esc: function () {
+      esc() {
         this.rightBox.show = false;
       },
-      cleanUser: function () {
+      cleanUser() {
         this.user = {
           userId: '',
           username: '',