NEZ-351 perf: 底部滑框、侧滑框重构、动画优化

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

@@ -13,7 +13,7 @@ li{
   list-style-type:none ;
 }
 .content-box {
-  height: calc(100% - 53px);
+  height: calc(100% - 50px);
 }
 
 .nz-icon-gear:before {
@@ -643,20 +643,51 @@ li{
   position: relative;
 }
 .main-list.main-list-with-sub {
-  height: calc(50% - 4px);
+  height: 50%;
+}
+.sub-box {
+  height: 50%;
+  position: relative;
 }
 .sub-list {
   height: calc(100% - 9px);
-  position: relative;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  top: 9px;
 }
 .main-and-sub-transition {
   transition: .4s height;
 }
-.sub-list-resize {
+.main-modal {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: none;
+  z-index: 100;
+}
+.resize-modal {
+  width: 100%;
+  opacity: 0.6;
+  background-color: #f5f9ff;
+  border: 1px solid #a7d0f7;
+  box-sizing: border-box;
+  position: fixed;
   margin: 0 -6px;
+  cursor: ns-resize;
+  display: none;
+  z-index: 20;
+  vertical-align: bottom;
+  bottom: 0;
+}
+.sub-list-resize, .sub-list-resize-copy {
   border-top: 1px solid #aaa;
   background-color: #eaeaea;
   height: 9px;
+  margin-left: -6px;
+  width: calc(100% + 12px);
+  position: absolute;
+  z-index: 1;
   box-sizing: border-box;
   user-select: none;
   color: #5f6368;
@@ -665,6 +696,11 @@ li{
   justify-content: center;
   cursor: ns-resize;
 }
+.sub-list-resize-copy {
+  border-top: 1px solid #a7d0f7;
+  margin-left: 0;
+  width: calc(100% - 198px);
+}
 .sub-list-window-control {
   display: flex;
   align-items: center;
@@ -672,7 +708,7 @@ li{
   position: absolute;
   right: 0;
   top: 5px;
-  z-index: 1;
+  z-index: 2;
 }
 .window-control-btn {
   cursor: pointer;
@@ -848,8 +884,6 @@ li{
   }
 }
 @keyframes slide-out-to-right {
-  /*from {right: 0px}
-  to {right: -550px}*/
   from {
     transform: scaleX(1);
     transform-origin: right;
@@ -859,15 +893,6 @@ li{
     transform-origin: right;
   }
 }
-/*.right-box-enter-active{
-  transition: transform 0.4s;
-}
-.right-box-leave-active {
-  transition: transform 0.4s;
-}
-.right-box-enter, .right-box-leave-to  {
-  transform: translateX(100%);
-}*/
 .right-box-enter-active, .right-box-leave-active  {
   transform: scaleX(1);
   opacity: 1;
@@ -880,25 +905,6 @@ li{
   opacity: 0;
   transform: scaleX(0);
 }
-.right-box-580-enter-active{
-  transition: transform 0.4s;
-}
-.right-box-580-leave-active {
-  transition: transform 0.4s;
-}
-.right-box-580-enter,.right-box-580-leave-to {
-  transform: translateX(100%);
-}
-
-.right-box-840-enter-active{
-  transition: transform 0.4s;
-}
-.right-box-840-leave-active {
-  transition: transform 0.4s;
-}
-.right-box-840-enter,.right-box-840-leave-to {
-  transform: translateX(100%);
-}
 /* end--右弹框滑入滑出动画*/
 
 /* begin--右子弹框动画*/
@@ -933,7 +939,7 @@ li{
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
 .right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
-.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model,.right-box-mib, .right-box-add-asset, .right-box-add-chart {
+.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
   width: 850px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {

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

@@ -41,7 +41,7 @@
                       </div>
 
                       <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                        <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
+                        <span v-if="key == 'state'">{{value == 1 ? $t('asset.inStock') : $t('asset.outStock')}}</span>
                         <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
                         <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
                           <template v-if="value && value.length > 0">

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

@@ -590,7 +590,7 @@
           this.dataList.push({
             id: -9,
             panelId: 0,
-            title: this.$t("asset.createAssetTab.assetInfo"),
+            title: this.$t("asset.assetInfo"),
             span: 4,
             height: 350,
             type: "assetInfo",
@@ -765,6 +765,7 @@
           return;
         }
         if(chartItem.type == 'projectInfo'){
+          chartItem.title = this.$t("project.chart.projectInfo");
           this.getProjectInfoChartData(chartItem);
           return;
         }
@@ -1285,7 +1286,7 @@
       },
       getAssetInfoChartData(chartInfo){
         let vm = this;
-        chartInfo.title = this.$t("asset.createAssetTab.assetInfo");
+        chartInfo.title = this.$t("asset.assetInfo");
         let detail = [];
         if(!this.isModel){
           this.$refs['editChart'+chartInfo.id][0].showLoad();
@@ -1294,12 +1295,12 @@
             if(response.code == 200){
               response.data && function() {
                 response.data.Basic && detail.push({
-                  title: vm.$t('asset.createAssetTab.basicTitle'),
+                  title: vm.$t('asset.basicTitle'),
                   type: 'basic',
                   data: response.data.Basic
                 });
                 response.data.Attribute && detail.push({
-                  title: vm.$t('asset.createAssetTab.featureTitle'),
+                  title: vm.$t('asset.featureTitle'),
                   type: 'attribute',
                   data: response.data.Attribute
                 });
@@ -1309,7 +1310,7 @@
           });
         }else {
           detail.push({
-            title: vm.$t('asset.createAssetTab.basicTitle'),
+            title: vm.$t('asset.basicTitle'),
             type: 'basic',
             data: {
               sn: 'assetInfo Test',
@@ -1322,7 +1323,7 @@
             }
           });
           detail.push({
-            title: vm.$t('asset.createAssetTab.featureTitle'),
+            title: vm.$t('asset.featureTitle'),
             type: 'feature',
             data: {
               CPU: "Intel E500",

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

@@ -1,9 +1,11 @@
 <template>
-  <div style="height: 50%">
+  <div class="sub-box">
+    <div class="resize-modal">
+      <div class="sub-list-resize-copy">一</div>
+    </div>
     <!-- 副列表 -->
-    <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
+    <div @mousedown="listResize" class="sub-list-resize" v-if="!isFullScreen">一</div>
     <div class="sub-list">
-      <!--<div class="sub-list main-and-sub-transition" v-if="showSubList">-->
         <!--窗口大小控制-->
       <div class="sub-list-window-control">
         <!--退出全屏-->
@@ -67,7 +69,6 @@
     },
     props: {
       isFullScreen: false, //是否全屏
-      showSubList: Boolean, //是否显示
       subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
       obj: Object, //关联的实体对象
       from: String, //来自哪个页面
@@ -84,29 +85,42 @@
     methods: {
       exitFullScreen() {
         this.$emit("exitFullScreen");
-        this.$nextTick(this.afterResize());
+        this.$nextTick(() => {this.afterResize()});
       },
       fullScreen() {
         this.$emit("fullScreen");
-        this.$nextTick(this.afterResize());
+        this.$nextTick(() => {this.afterResize()});
       },
       closeSubList() {
         this.$emit("closeSubList");
       },
       listResize(e) {
         this.$emit('listResize', e);
-        this.$nextTick(this.afterResize());
+        this.$nextTick(() => {this.afterResize()});
       },
       changeTab(tab) {
         this.$emit('update:targetTab', tab);
       },
       afterResize() {
+        let vm = this;
+
         if (this.from == 'endpoint' && this.targetTab == 'endpointQuery') {
           this.$refs.endpointQuery.tableReload();
         }
-        if (this.targetTab == 'panel') {
+
-          setTimeout(() => {this.$refs.panelTab.$refs.dashboardScrollbar.update();}, 400);
+        //刷新滚动条
+        let intervalFunc = setInterval(function(){
+          if (!window.resizing) {
+            let pss = document.querySelectorAll(".el-table__body-wrapper");
+            if (pss) {
+              pss.forEach(ps => {
+                ps._ps_ && ps._ps_.update();
+              });
             }
+            vm.$refs.panelTab.$refs.dashboardScrollbar.update();
+            clearInterval(intervalFunc);
+          }
+        }, 500);
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="sub-list">
+  <span>
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">

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

@@ -2,7 +2,7 @@
   <span>
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
-        <div class="sub-list-tab-title">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</div><div
+        <div class="sub-list-tab-title">{{$t("asset.dcName")}}：{{obj.name}}</div><div
         class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
         class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
       </div>
@@ -44,7 +44,7 @@
               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">
+              :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.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>
@@ -113,7 +113,7 @@
             show:true
           },
           {
-            label:this.$t('asset.createAssetTab.uSize'),
+            label:this.$t('asset.uSize'),
             prop:'uSize',
             show:true
           },
@@ -151,7 +151,7 @@
             },
             {
               id:12,
-              name:this.$t('asset.createAssetTab.uSize'),
+              name:this.$t('asset.uSize'),
               label:'uSize',
               disabled: false
             },

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

@@ -3,7 +3,7 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
-          <template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
+          <template v-if="from == 'dc'">{{$t("asset.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>

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

@@ -107,8 +107,9 @@
       </div>
       <chart ref="endpointChart" :unit="chartUnit"></chart>
     </el-dialog>
-
+    <transition name="right-box">
       <chart-box v-if="rightBox.show" @close="rightBox.show = false" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
+    </transition>
   </span>
 </template>
 
@@ -219,7 +220,7 @@
         });
       },
       tableReload() {
-        var table = this.$refs.endpointQueryTable;
+        let table = this.$refs.endpointQueryTable;
         internal = setInterval(() => {
           if (!window.resizing) {
             table.setHeight();

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

@@ -66,8 +66,9 @@
       </el-scrollbar>
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
-
+    <transition name="right-box">
-    <chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+      <chart-box @close="closeRightBox" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+    </transition>
   </div>
 </template>
 
@@ -173,7 +174,7 @@
     },
     methods: {
       //刷新
-      Refresh() {
+      refresh() {
         this.getTableData(this.obj.id);
       },
       refreshTime(st, et) {
@@ -195,6 +196,12 @@
       changeTab(tab) {
         this.$emit('changeTab', tab);
       },
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.refresh();
+        }
+      },
       scrollbarHeightHandler() {
         setTimeout(() => {
           let top = '';
@@ -407,7 +414,7 @@
               if(response.code == 200){
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")});
                 if(this.from == 'asset'){
-                  this.Refresh();
+                  this.refresh();
                 }
               }else{
                 console.error(response.msg)

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

@@ -1,11 +1,19 @@
+import i18n from "../i18n";
+
 export const promServer = {
-  typeOption: [
+  typeData: [
-    {
+    {value: 1, label: 'Global'},
-      key: 1,
+    {value: 2, label: 'Per-Datacenter'}
-      value: 'Global'
-    }, {
-      key: 2,
-      value: 'Per-Datacenter'
-    }
   ],
 };
+
+export const asset = {
+  pingData: [
+    {value: 1, label: 'up'},
+    {value: 0, label: 'down'},
+  ],
+  stateData: [
+    {value: 1, label: i18n.t('asset.inStock')},
+    {value: 2, label: i18n.t('asset.notInStock')}
+  ],
+}

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

@@ -185,77 +185,76 @@ export const bottomBoxWindow = {
   // 鼠标拖动二级列表
   listResize(vm, e) {
     window.resizing = true;
-    let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
+    let mainListDom = document.querySelector(".main-list"); //主列表
+    let subBoxDom = document.querySelector(".sub-box"); //副列表
     let subListDom = document.querySelector(".sub-list"); //副列表
     let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+    let resizeBarHeight = 9; //resize横条高度
+    let minHeight = 15; //主、副列表最小高度限制为15
+    let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
+    let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
+    let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
+    let resizeBarDom = document.querySelector(".sub-list-resize"); //副列表遮罩
+
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-    //得到点击时俩dom的初始高度：
+    //点击时俩dom的初始高度：
-    let mainInitialHeight = mainListDom.offsetHeight;
+    let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
-    let subInitialHeight = subListDom.offsetHeight;
+
+    mainModalDom.style.display = "block";
+    resizeModalDom.style.height = `${subInitialHeight}px`;
+    resizeModalDom.style.display = "block";
+    resizeBarDom.style.display = "none";
+    let resizeModalEndHeight;
     //点击时鼠标的Y轴位置
     let mouseInitialY = e.clientY;
 
     document.onmousemove = (e) => {
       window.resizing = true;
-      mainListDom.classList.remove('main-and-sub-transition');
-      subListDom.classList.remove('main-and-sub-transition');
       e.preventDefault();
       //得到鼠标拖动的距离
-      let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
+      let mouseMoveY = e.clientY-mouseInitialY;
+      resizeModalEndHeight = subInitialHeight-mouseMoveY;
+      resizeModalDom.style.height = `${resizeModalEndHeight}px`;
 
-      //往上方拖动：
+      // 主、副列表最小高度限制
-      if (e.clientY < mouseInitialY) {
+      if(resizeModalEndHeight > contentRightHeight-minHeight){
-        vm.toTopBtnTop = mainInitialHeight-mouseMoveY+20+'px';
+        resizeModalDom.style.height = `${contentRightHeight-minHeight}px`;
-        mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-        subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-      }
-      //往下方拖动：
-      if (e.clientY > mouseInitialY) {
-        vm.toTopBtnTop = mainInitialHeight+mouseMoveY+20+'px';
-        mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-        subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-      }
-
-      // 主、副列表最小高度限制为15px; 23是因为拖动区域有8的高度
-      if(parseInt(mainListDom.style.height) > contentRightHeight-23){
-        vm.toTopBtnTop = contentRightHeight+5+'px';
-        mainListDom.style.height = contentRightHeight-23+'px';
-      }
-      if(parseInt(mainListDom.style.height) <= 15){
-        vm.toTopBtnTop = '35px';
-        mainListDom.style.height = '15px';
-      }
-      if(parseInt(subListDom.style.height) > contentRightHeight-23){
-        subListDom.style.height = contentRightHeight-23+'px';
-      }
-      if(parseInt(subListDom.style.height) <= 15){
-        subListDom.style.height = '15px';
-      }
-      //当主副列表可视区域小于一定值时，不展示内容
-      if(parseInt(mainListDom.style.height) <= 100){
-        if (vm.mainResizeShow) {
-          vm.mainResizeShow = false;
-        }
-      } else {
-        if (!vm.mainResizeShow) {
-          vm.mainResizeShow = true;
-        }
-      }
-      if(parseInt(subListDom.style.height) <= 100){
-        if (vm.subResizeShow) {
-          vm.subResizeShow = false;
-        }
-      } else {
-        if (!vm.subResizeShow) {
-          vm.subResizeShow = true;
       }
+      if(resizeModalEndHeight < minHeight){
+        resizeModalDom.style.height = `${minHeight}px`;
       }
     };
     document.onmouseup = () => {
       window.resizing = false;
-      mainListDom.classList.add('main-and-sub-transition');
+      mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
-      subListDom.classList.add('main-and-sub-transition');
+      subBoxDom.style.height = `${resizeModalEndHeight}px`;
+      subListDom.style.height = `${resizeModalEndHeight-resizeBarHeight}px`;
+      resizeModalDom.style.display = "none";
+      mainModalDom.style.display = "none";
+      resizeBarDom.style.display = "";
+
+      //当主副列表可视区域小于一定值时，不展示内容
+      if(contentRightHeight-resizeModalEndHeight <= contentHideHeight){
+        if (vm.bottomBox.mainResizeShow) {
+          vm.bottomBox.mainResizeShow = false;
+        }
+      } else {
+        if (!vm.bottomBox.mainResizeShow) {
+          vm.bottomBox.mainResizeShow = true;
+        }
+      }
+      if(resizeModalEndHeight < contentHideHeight){
+        if (vm.bottomBox.subResizeShow) {
+          vm.bottomBox.subResizeShow = false;
+        }
+      } else {
+        if (!vm.bottomBox.subResizeShow) {
+          vm.bottomBox.subResizeShow = true;
+        }
+      }
+
       document.onmousemove = null;
+      document.onmouseup = null;
     }
   },
   exitFullScreen(vm) {
@@ -263,17 +262,17 @@ export const bottomBoxWindow = {
     let contentRightDom = document.querySelector(".content-right"); //右侧内容区
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
     //主列表
-    document.querySelector(".main-list-with-sub").style.height = vm.mainListHeight ? vm.mainListHeight + 'px' : 'calc(50% - 4px)';
+    document.querySelector(".main-list-with-sub").style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)';
 
     //副列表
-    document.querySelector(".sub-list").style.height = vm.mainListHeight ? contentRightHeight-vm.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
+    document.querySelector(".sub-list").style.height = vm.bottomBox.mainListHeight ? contentRightHeight-vm.bottomBox.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
     setTimeout(() => {
-      vm.isFullScreen = false;
+      vm.bottomBox.isFullScreen = false;
       if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
         vm.mainResizeShow = true;
       }
       if (document.querySelector(".sub-list").offsetHeight >= 100) {
-        vm.subResizeShow = true;
+        vm.bottomBox.subResizeShow = true;
       }
       window.resizing = false;
     }, 210);
@@ -282,21 +281,21 @@ export const bottomBoxWindow = {
     window.resizing = true;
     let contentRightDom = document.querySelector(".content-right"); //右侧内容区
     let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-    vm.isFullScreen = true;
+    vm.bottomBox.isFullScreen = true;
     //主列表
-    vm.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
+    vm.bottomBox.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
     document.querySelector(".main-list-with-sub").style.height = '0';
-    vm.mainResizeShow = false;
+    vm.bottomBox.mainResizeShow = false;
     //副列表
     document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
     window.resizing = false;
   },
   showSubListWatch(vm, n) {
-    vm.inTransform = n;
+    vm.bottomBox.inTransform = n;
     if (!n) {
       vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
-      vm.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
+      vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
-      vm.isFullScreen = false;
+      vm.bottomBox.isFullScreen = false;
       //移动分页组件的位置
       let paginationTop = document.querySelector(".pagination-top");
       let paginationBottom = document.querySelector(".pagination-bottom");
@@ -313,13 +312,13 @@ export const bottomBoxWindow = {
       }, 210);
 
       // 主列表恢复全屏
-      vm.mainResizeShow = vm.subResizeShow = true;
+      vm.bottomBox.mainResizeShow = vm.bottomBox.subResizeShow = true;
       document.querySelector('.main-list').style.height = "";
       //副列表高度清空
-      document.querySelector(".sub-list").style.height = '';
+      document.querySelector(".sub-list").style.height = "";
     } else {
       vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度
-      vm.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
+      vm.tools.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
       //移动分页组件的位置
       let paginationTop = document.querySelector(".pagination-top");
       paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));

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

@@ -375,18 +375,50 @@ const en = {
   asset:{
     asset: 'Asset',
     assets: 'Assets',//'资产'
-    EditAsset:'Edit asset',//'编辑资产'
+    editAsset: 'Edit asset',//'编辑资产'
+    createAsset: 'New asset',//'编辑资产'
+    host: "Host",
+    state: 'State',//'状态'
     pingActive: 'active',//可ping通
     assetStatPre: 'Last reply:',
     assetStatDown: 'Never',
+    remark:'Description',//'描述'
+    cli:'CLI account',//'CLI账号'
+    loginType:'Login type',//'登录类型'
+    password:'Password',//'密码'
+    ssh:'SSH key',//'SSH-Key'
+    protocol:"Protocol",
+    sshProtocol:"SSH",
+    telnetProtocol:"Telnet",
+    userTip:"User tip",//用户名提示
+    passwordTip:"Password tip",//密码提示
+    reloginPasswordTip:"Relogin tip",//密码提示
+    userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
+    reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
+    account:'User name',//'用户名'
+    port:'Port',//'端口'
+    upload:'Upload',//'上传'
+    clickToUpload:'Upload',//'上传'
+    clickToCover:'Cover',//'覆盖'
+    sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
+    exporter:'Exporter',
     pingInactive: 'inactive',
+    assetInfo: 'Asset information',//'资产信息'
+    vendorModel: 'Vendor/Model',//'厂商/型号'
+    purchaseDate: 'Purchase date',//'购买日期'
+    location: 'Location',//'地区'
+    sn: "SN",
+    inStock: 'In stock',//'在库'
+    notInStock: 'Not in stock',//'出库'
+    assetType:'Asset type',//'资产类型'
+    principal:'Administrator',//'负责人'
+    tel:'Telephone', //'电话'
     left:{
       dataCenter:'Data center',
-      assetType:'Asset type',
       vendor:'Vendor',
       ping:'Ping',
     },
-    createAssetTab:{
+    /*createAsset:{
       title:'New asset',//'新增资产'
       sn:'SN',//SN
       host:'Host',//'Host'
@@ -394,7 +426,7 @@ const en = {
       selectTip:'Please select',//'请选择'
       inStock: 'In stock',//'在库'
       notInStock: 'Not in stock',//'出库'
-      assetInfo:'Asset information',//'资产信息'
+
       assetType:'Asset type',//'资产类型'
       impi:{
         title:'IPMI',
@@ -406,7 +438,7 @@ const en = {
         addAssetType:'New asset type',//'新增资产类型'
         existAssetType:'Existed asset type'//'已存在的资产类型'
       },
-      vendorModel:'Vendor/Model',//'厂商/型号'
+
       vendorTab:{
         vendor:'Vendor/Model',//'厂商/型号'
         vendorName:'New vendor',//'新厂商'
@@ -414,7 +446,7 @@ const en = {
         modelName:'New model',//'新型号'
         existModel:'Existed model'//'已有型号'
       },
-      purchaseDate:'Purchase date',//'购买日期'
+
       dataSelectTip:'Please select date',//'请选择日期'
       dc:'DC',
       dcName:'Data Center name',//'DC名称'
@@ -432,7 +464,7 @@ const en = {
         principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
-      location:'Location',//'地区'
+
       principal:'Administrator',//'负责人'
       tel:'Telephone',//'电话'
       cabinet: 'Cabinet',//'机柜'
@@ -473,7 +505,7 @@ const en = {
       exporter:'Exporter',
       basicTitle:'Basic info',
       featureTitle:'Attribute',
-    },
+    },*/
     editAssetTab:{
       title:'New asset',//'新增资产'
       sn:'SN',//SN

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

@@ -17,19 +17,19 @@
         <div class="pop-title">{{title}}</div>
         <!--表单内容-->
         <el-form class="pop-item-wider" :model="cabinet" ref="cabinetForm" :rules="rules">
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
+          <el-form-item :label="this.$t('asset.name')" prop="name">
             <el-input size='mini' v-model="cabinet.name" v-if="popBox.isEdit"/>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.name}}</div>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
+          <el-form-item :label="this.$t('asset.uSize')" prop="uSize">
             <div :class="{'right-box-form-content-txt':!popBox.isEdit}" >{{cabinet.uSize}}</div>
             <el-slider v-model.number="cabinet.uSize" :max="47" v-if="popBox.isEdit"></el-slider>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
+          <el-form-item :label="this.$t('asset.remark')">
             <el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="popBox.isEdit"/>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.remark}}</div>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
+          <el-form-item :label="this.$t('asset.DC')" prop="idcId">
             <el-select size='mini' v-model="cabinet.idcId" clearable style="width: 100%;" placeholder="" v-if="popBox.isEdit">
               <el-option v-for="item in idcDatas" :key="item.key" :label="item.name" :value="item.id">
                 <span>{{ item.name }}</span>
@@ -145,7 +145,7 @@ export default {
     toEdit:function(u){
       this.cabinet = Object.assign({}, u);
       this.popBox.isEdit = true;
-      this.title = this.$t('asset.createAssetTab.editCabinetTab.title') + "  ID：" + this.cabinet.id;
+      this.title = this.$t('asset.editCabinetTab.title') + "  ID：" + this.cabinet.id;
       this.popBox.show = true;
     },
     getIdcDatas:function(){
@@ -198,10 +198,10 @@ export default {
       deep: true,
       handler(n, o) {
         if (n && n.id) {
-          this.title =this.popBox.isEdit? this.$t('asset.createAssetTab.editCabinetTab.title') + "  ID：" + n.id : this.$t('asset.createAssetTab.cabinet') + "  ID：" + n.id;
+          this.title =this.popBox.isEdit? this.$t('asset.editCabinetTab.title') + "  ID：" + n.id : this.$t('asset.cabinet') + "  ID：" + n.id;
           this.cabinet=n;
         } else {
-          this.title = this.$t('asset.createAssetTab.AddCabinetTab.title');
+          this.title = this.$t('asset.title');
           this.resetData();
         }
       }

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

@@ -23,21 +23,21 @@
 
       <div class="pop-item-wider">
         <el-form class="right-box-form" :model="idc" label-position="left" label-width="150px"  :rules="rules" ref="idcForm">
-          <el-form-item :label="$t('asset.createAssetTab.dcName')" prop="name">
+          <el-form-item :label="$t('asset.dcName')" prop="name">
             <el-input type="text"  placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
           </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.location')" prop="location">
+          <el-form-item :label="$t('asset.location')" prop="location">
             <el-input type="text"  placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
           </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.principal')" prop="principal">
+          <el-form-item :label="$t('asset.principal')" prop="principal">
             <el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit" popper-class="dc-dropdown">
               <el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
             </el-select>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
           </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel" >
+          <el-form-item :label="$t('asset.tel')" prop="tel" >
             <el-input type="text"  placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
             <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
           </el-form-item>
@@ -164,7 +164,7 @@
         toEdit:function(u){
           this.idc = Object.assign({}, u);
           this.popBox.isEdit = true;
-          this.title = this.$t('asset.createAssetTab.editIdcTab.title') + "  ID：" + this.idc.id
+          this.title = this.$t('asset.editIdcTab.title') + "  ID：" + this.idc.id
           this.popBox.show = true;
         },
         show:function(isShow,isEdit){
@@ -212,11 +212,11 @@
           deep: true,
           handler(n, o) {
             if (n && n.id) {
-              this.title = this.popBox.isEdit?this.$t('asset.createAssetTab.editIdcTab.title') + "  ID：" + n.id:this.$t('asset.createAssetTab.dc') + "  ID：" + n.id;
+              this.title = this.popBox.isEdit?this.$t('asset.editIdcTab.title') + "  ID：" + n.id:this.$t('asset.dc') + "  ID：" + n.id;
               this.idc=n;
 
             } else {
-              this.title = this.$t('asset.createAssetTab.AddIdcTab.title');
+              this.title = this.$t('asset.AddIdcTab.title');
               this.resetData();
             }
           }

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

@@ -1,37 +1,25 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
-    <div class="right-box right-box-alert-config" v-if="rightBox.show" v-clickoutside="clickos">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-        <button type="button" v-if="alertRule.id != '' && rightBox.isEdit" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
         <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
-        <button v-if="!rightBox.isEdit && alertRule.buildIn != 1" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="alert-box-edit">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
     </div>
-
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editAlertRule.id ? $t("alert.config.editAlertConfig") + "  ID：" + editAlertRule.id : $t("alert.config.createAlertConfig")}}</div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" :model="alertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
+      <el-form class="right-box-form right-box-form-left" :model="editAlertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
         <!--alertName-->
         <el-form-item :label='$t("alert.config.name")' prop="alertName">
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="alertRule.alertName" size="small"></el-input>
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
         </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>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
-          </el-form-item>-->
         <promql-input
           ref="promql"
           :expression-list.sync="expressions"
@@ -41,16 +29,14 @@
         ></promql-input>
         <!--operator-->
         <el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
-            <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder=""  size="small">
+          <el-select popper-class="config-dropdown" v-model="editAlertRule.operator" placeholder=""  size="small">
             <el-option :id="'operator-'+item.key" v-for="item in operators" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}</div>
         </el-form-item>
         <!--threshold-->
         <el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="width: 415px;display: inline-block;">
-            <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.threshold" size="small">
+          <el-input type="text" placeholder="" v-model.number="editAlertRule.threshold" size="small">
           </el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}s</div>
         </el-form-item>
         <!--unit-->
         <el-form-item :label="$t('alert.config.unit')" prop="unit">
@@ -58,20 +44,19 @@
                        :options="unitOptions"
                        :props="{ expandTrigger: 'click',emitPath:false }"
                        :show-all-levels="false"
-                         v-model="alertRule.unit"
+                       v-model="editAlertRule.unit"
           >
           </el-cascader>
         </el-form-item>
         <!--last-->
         <el-form-item :label="$t('alert.config.for')" prop="last">
-            <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
+          <el-input type="text" placeholder="" v-model.number="editAlertRule.last" size="small">
             <template slot="append">{{$t('alert.config.second')}}</template>
           </el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
         </el-form-item>
         <!--severity-->
         <el-form-item :label="$t('alert.severity')" prop="severity">
-            <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.severity" placeholder=""  size="small">
+          <el-select popper-class="config-dropdown" v-model="editAlertRule.severity" placeholder=""  size="small">
             <el-option :id="'alert-severity-'+item.key" v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
               <template v-if="!item.isEdit">{{item.value}}</template>
               <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
@@ -79,12 +64,11 @@
               </span>
             </el-option>
           </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
         </el-form-item>
         <!--receiver-->
         <el-form-item :label="$t('config.account.receiver')" prop="receiver">
           <el-select
-              v-model.trim="alertRule.receiverShow"
+            v-model.trim="editAlertRule.receiverShow"
             placeholder=""
             multiple
             filterable
@@ -102,13 +86,11 @@
         </el-form-item>
         <!--summary-->
         <el-form-item :label="$t('alert.summary')" prop="summary">
-            <el-input maxlength="512" rows="3" type="textarea" show-word-limit v-if="rightBox.isEdit" placeholder="" v-model="alertRule.summary" size="small"></el-input>
+          <el-input maxlength="512" rows="3" type="textarea" show-word-limit placeholder="" v-model="editAlertRule.summary" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
         </el-form-item>
         <!--description-->
         <el-form-item :label="$t('alert.description')" prop="description">
-            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.description" size="small"></el-input>
+          <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editAlertRule.description" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
         </el-form-item>
       </el-form>
     </el-scrollbar>
@@ -116,15 +98,14 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-        <button @click="esc" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+      <button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+      <button @click="save" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
   </div>
-  </transition>
 </template>
 
 <script>
@@ -133,7 +114,7 @@
   export default {
     name: "alertConfigBox",
     props: {
-      parentAlertRule: Object
+      alertRule: Object
     },
     components: {
       'promql-input': promqlInput,
@@ -145,8 +126,7 @@
         expressions: [''],
         legends: [''],
 
-        alertRule: {id: '', receiverShow: [], receiver: ''},
+        editAlertRule: {},
-        rightBox: {show: false, isEdit: false, title: ''},
         rules:{
           alertName:[
             {required:true,message:this.$t('validate.required'),trigger:'blur'}
@@ -174,13 +154,6 @@
             {required:true,message:this.$t('validate.required'),trigger:'blur'},
             {type:'number',message:this.$t('validate.number')}
           ],
-
-          // description:[
-          //   {required:true,message:this.$t('validate.required'),trigger:'blur'},
-          // ],
-          // receiver:[
-          //   {required:true,message:this.$t('validate.required'),trigger:'change'},
-          // ]
         },
         severityData: [
           {
@@ -238,38 +211,34 @@
           }
         ],
         userData: [],
-        linkObjList: []
       }
     },
     methods: {
-      clickos() {
+      clickOutside() {
-        this.rightBox.show = false;
+        this.esc(false);
       },
-      show(show, isEdit) {
+      esc(refresh) {
-        this.rightBox.show = show;
+        this.$emit("close", refresh);
-        this.rightBox.isEdit = isEdit;
       },
-      save: function() {
+      save() {
-        this.alertRule.expr = this.expressions[0];
+        this.editAlertRule.expr = this.expressions[0];
         this.$refs.alertRuleForm.validate((valid) => {
           if (valid) {
-            this.alertRule.receiver = this.alertRule.receiverShow.join(",");
+            this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(",");
-            if (this.alertRule.id) {
+            if (this.editAlertRule.id) {
-              this.$put('alert/rule', this.alertRule).then(response => {
+              this.$put('alert/rule', this.editAlertRule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$emit('reload');
+                  this.esc(true);
-                  this.rightBox.show = false;
                 } else {
                   this.$message.error(response.msg);
                 }
               });
             } else {
-              this.$post('alert/rule', this.alertRule).then(response => {
+              this.$post('alert/rule', this.editAlertRule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$emit('reload');
+                  this.esc(true);
-                  this.rightBox.show = false;
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -280,42 +249,22 @@
           }
         })
       },
-      del: function() {
+      del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("alert/rule?ids=" + this.alertRule.id).then(response => {
+          this.$delete("alert/rule?ids=" + this.editAlertRule.id).then(response => {
             if (response.code === 200) {
               this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('reload');
+              this.esc(true);
-              this.rightBox.show = false;
             } else {
               this.$message.error(response.msg);
             }
           })
         });
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("alert.config.editAlertConfig") + "  ID：" + this.alertRule.id;
-        } else {
-          this.save();
-        }
-      },
-      esc: function() {
-        this.rightBox.show = false;
-      },
-
-      getProjectList() {
-        this.$get('project', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code == 200) {
-            this.linkObjList = response.data.list;
-          }
-        })
-      },
       getUserList() {
         this.$get('sys/user/list', {pageNo: 1, pageSize: -1}).then(response => {
           if (response.code == 200) {
@@ -323,40 +272,19 @@
           }
         })
       },
-      getModuleList() {
-        this.$get('module', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code == 200) {
-            this.linkObjList = response.data.list;
-          }
-        })
     },
-
+    mounted() {
-      getAssetList() {
-        this.$get('asset', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code == 200) {
-            this.linkObjList = response.data.list;
-          }
-        })
-      },
-    },
-    created() {
       this.getUserList();
-      this.rightBox.title = this.$t("alert.config.createAlertConfig");
     },
     watch: {
-      parentAlertRule: {
+      alertRule: {
         deep: true,
+        immediate: true,
         handler(n, o) {
-          this.alertRule = n;
+          console.info(n)
-          if (this.alertRule.id) {
+          this.editAlertRule = JSON.parse(JSON.stringify(n));
-            if (this.alertRule.type == 1) {
+          if (this.editAlertRule.id) {
-              this.getProjectList();
+            this.expressions = [this.editAlertRule.expr];
-            } else if (this.alertRule.type == 2) {
-              this.getModuleList();
-            } else if (this.alertRule.type == 3) {
-              this.getAssetList();
-            }
-            this.expressions = [this.alertRule.expr];
             this.$nextTick(() => {
               this.expressions.forEach((ex, index) => {
                 if (ex) {
@@ -365,24 +293,11 @@
               });
             });
           }
-          if (this.rightBox.show) {
-            if (this.rightBox.isEdit && this.alertRule.id) {
-              this.rightBox.title = this.$t("alert.config.editAlertConfig") + "  ID：" + this.alertRule.id;
-            } else if (this.rightBox.isEdit && !this.alertRule.id) {
-              this.rightBox.title = this.$t("alert.config.createAlertConfig");
-            } else if (!this.rightBox.isEdit && this.alertRule.id) {
-              this.rightBox.title = this.$t("alert.config.alertConfig") + "  ID：" + this.alertRule.id;
-            }
-          }
         }
       }
     }
   }
 </script>
-
-<style scoped>
-
-</style>
 <style>
   .unit-popper-class{
     z-index: 2052 !important;

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

@@ -21,19 +21,19 @@
       <!-- begin--表单-->
       <el-scrollbar class="right-box-form-box">
         <el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="cabinet" ref="cabinetForm" :rules="rules">
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
+          <el-form-item :label="$t('asset.name')" prop="name">
             <el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/>
             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
+          <el-form-item :label="$t('asset.DC')" prop="idcId">
             <el-input size='mini' v-model="curIdc.name" v-if="rightBox.isEdit" disabled/>
             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{idc?idc.name:''}}</div>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
+          <el-form-item :label="$t('asset.uSize')" prop="uSize">
             <el-input v-model.number="cabinet.uSize" :max="47" ></el-input>
 <!--            <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>-->
           </el-form-item>
-          <el-form-item :label="this.$t('config.dc.remark')">
+          <el-form-item :label="$t('config.dc.remark')">
             <el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.remark}}</div>
           </el-form-item>
@@ -196,7 +196,7 @@
           deep:true,
           immediate:true,
           handler:function(n,o){
-            this.rightBox.title=n&&n.id?this.$t('asset.createAssetTab.editCabinetTab.title') + "  ID：" + n.id : this.$t('asset.createAssetTab.cabinet');
+            this.rightBox.title = n && n.id ? this.$t('asset.title') + "  ID：" + n.id : this.$t('asset.cabinet');
           }
         }
       }

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

@@ -10,7 +10,7 @@
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
-      <div class="right-box-title">{{editDc.id ? ($t("asset.createAssetTab.editIdcTab.title") + "  ID：" + editDc.id) : $t("asset.createAssetTab.AddIdcTab.title")}}</div>
+      <div class="right-box-title">{{editDc.id ? ($t("asset.editIdcTab.title") + "  ID：" + editDc.id) : $t("asset.AddIdcTab.title")}}</div>
       <!-- end--标题-->
 
       <!-- begin--表单-->
@@ -19,13 +19,13 @@
           <el-form-item :label='$t("overall.name")' prop="name">
             <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small"></el-input>
           </el-form-item>
-          <el-form-item :label='$t("asset.createAssetTab.location")' prop="location">
+          <el-form-item :label='$t("asset.location")' prop="location">
             <el-input placeholder="" v-model="editDc.location" size="small"></el-input>
           </el-form-item>
-          <el-form-item :label='$t("asset.createAssetTab.tel")' prop="tel">
+          <el-form-item :label='$t("asset.tel")' prop="tel">
             <el-input placeholder="" v-model="editDc.tel" size="small"></el-input>
           </el-form-item>
-          <el-form-item :label='$t("asset.createAssetTab.principal")' prop="principal">
+          <el-form-item :label='$t("asset.principal")' prop="principal">
             <el-select value-key="id" popper-class="config-dropdown" v-model="editDc.principal" placeholder="" size="small">
               <el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username" :value="item.userId" :id="'dc-principal-op-'+item.userId">
                 <span>{{item.username}}</span>

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

@@ -1,35 +1,23 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
-    <div class="right-box right-box-mib" v-if="rightBox.show" v-clickoutside="clickos" >
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-        <button id="mib-del" type="button" v-if="currentMib.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+      <button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
         <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
-        <button v-if="!rightBox.isEdit" id="mib-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editMib.id ? ($t("config.mib.editMib") + "  ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form  right-box-form-left" :model="currentMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
+      <el-form class="right-box-form  right-box-form-left" :model="editMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
-          <!--mib名称-->
-          <!--<el-form-item :label='$t("overall.name")' prop="name">
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
-          </el-form-item>-->
-
         <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
           <el-cascader
-              v-if="rightBox.isEdit"
             :options="modelOptions"
             :props="modelProps"
             :show-all-levels="false"
@@ -41,51 +29,34 @@
             size="small"
             class="right-box-form-row"
             clearable></el-cascader>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">
-              <span v-for="(n,i) in selectedModels" :key="n.name+'-'+n.id+'-'+i" >
-                <template v-if="i < selectedModels.length-1">
-                  {{n.name}}，
-                </template>
-                <template v-else>{{n.name}}</template>
-              </span>
-            </div>
         </el-form-item>
         <el-form-item :label="$t('config.mib.remark')" prop="remark">
-            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input>
+          <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model.trim="editMib.remark" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div>
         </el-form-item>
-          <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}">
+        <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
-            <el-upload drag v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange"  :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
+          <el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
             <div slot="tip" class="el-upload__tip" >
-               <!-- <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>
+              <span v-if="editMib.fileName">{{editMib.fileName}}</span>
-                <span v-else>{{currentMib.fileName}}</span>-->
-                <span v-if="currentMib.fileName">{{currentMib.fileName}}</span>
               <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
             </div>
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
-             <!-- <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
-              </button>-->
           </el-upload>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.fileName}}</div>
         </el-form-item>
-
       </el-form>
     </el-scrollbar>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-        <button @click="esc" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+      <button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
 
   </div>
-  </transition>
 </template>
 
 <script>
@@ -97,18 +68,7 @@
     data() {
       let $temp=this;
       return {
-        currentMib: {
+        editMib: {},
-          id: null,
-          name: '',
-          remark:'',
-          models:'',
-          file:null,
-        },
-        rightBox: {
-          show: false,
-          title: '',
-          isEdit: false
-        },
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -116,7 +76,7 @@
         },
         checkMibFile : (rule, value, callback) => {
           setTimeout(() => {
-            if(!$temp.currentMib.id){
+            if(!$temp.editMib.id){
               if(!$temp.uploadFile || !$temp.uploadFile.raw){
                 $temp.uploadErrorMsg=$temp.$t('config.mib.requiredMibFile');
                 return callback(new Error(' '));
@@ -132,7 +92,7 @@
         },
         checkModels:(rule, value, callback)=>{
           setTimeout(() => {
-            if(!$temp.currentMib.models||$temp.currentMib.models == ''){
+            if(!$temp.editMib.models||$temp.editMib.models == ''){
               // return callback(new Error($temp.$t('validate.required')))
               return callback();
             }else{
@@ -147,21 +107,14 @@
         uploadFile:null,
         uploadErrorMsg:null,
       }
-    },
-    created:function(){
-
     },
     methods: {
-      show(show, isEdit) {
+      clickOutside() {
-        this.rightBox.show = show;
+        this.esc(false);
-        this.rightBox.isEdit = isEdit;
-      },
-      clickos() {
-        this.rightBox.show = false;
       },
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.rightBox.show = false;
+        this.$emit("close", refresh);
       },
       queryModelInfos:function(){
         this.$get('model?pageSize=-1').then(response=>{
@@ -205,21 +158,20 @@
           for(let node of selectedNodes){
             models+=node+',';
           }
-          this.currentMib.models=models.substr(0,models.length-1);
+          this.editMib.models=models.substr(0,models.length-1);
         }else{
-          this.currentMib.models='';
+          this.editMib.models='';
         }
         this.$refs.mibForm.validateField('models')
       },
-      uploadChange:function(file,fileList){
+      uploadChange(file,fileList) {
-        console.log('fileChange')
         if (fileList.length > 0) {
-          this.uploadFileList = [fileList[fileList.length - 1]]
+          this.uploadFileList = [fileList[fileList.length - 1]];
           this.uploadFile = this.uploadFileList[0];
         }
         this.validateFile();
       },
-      afterClearFile:function(file, fileList){
+      afterClearFile(file, fileList) {
         this.uploadFileList = [];
         this.uploadFile = null;
         this.validateFile();
@@ -232,27 +184,25 @@
         this.$refs.mibForm.validate((valid) => {
           if (valid) {
             let form = new FormData();
-            form.append('name',this.currentMib.name);
+            form.append('name',this.editMib.name);
-            form.append('remark',this.currentMib.remark);
+            form.append('remark',this.editMib.remark);
-            form.append('models',this.currentMib.models);
+            form.append('models',this.editMib.models);
             form.append('file', this.uploadFile && this.uploadFile.raw ? this.uploadFile.raw : null);
-            if(!this.currentMib.id){
+            if(!this.editMib.id){
               this.$post('/mib', form, {'Content-Type': 'multipart/form-data'}).then(response=>{
                 if(response.code==200 && response.msg == 'success'){
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc();
+                  this.esc(true);
-                  this.$emit('after');
                 }else{
                   this.$message.error(response.msg);
                 }
               })
             }else{
-              form.append('id',this.currentMib.id);
+              form.append('id',this.editMib.id);
               this.$put('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
                 if(response.code==200 && response.msg=='success'){
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.esc();
+                  this.esc(true);
-                  this.$emit('after');
                 }else{
                   this.$message.error(response.msg);
                 }
@@ -261,27 +211,6 @@
           }
         })
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("config.mib.editMib") + "  ID：" + this.currentMib.id;
-        } else {
-          this.save();
-        }
-      },
-      clearData:function(){
-        this.currentMib={
-          id: null,
-          name: '',
-          remark:'',
-          file:'',
-          models:'',
-        }
-        this.uploadFile=null;
-        this.uploadFileList=[];
-        this.selectedModels=[];
-        this.uploadErrorMsg=null;
-      },
       /*删除*/
       del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
@@ -289,11 +218,10 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("mib?ids=" + this.currentMib.id).then(response => {
+          this.$delete("mib?ids=" + this.editMib.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.rightBox.show = false;
+              this.esc(true);
-              this.$emit("reload");
             } else {
               this.$message.error(response.msg);
             }
@@ -311,17 +239,12 @@
         immediate: true,
         deep: true,
         handler(n, o) {
-          this.currentMib = Object.assign({},n);
+          this.editMib = JSON.parse(JSON.stringify(n));
-          if(this.currentMib.models){
+          if(this.editMib.models){
-            this.selectedModels=this.currentMib.models.split(',');
+            this.selectedModels = this.editMib.models.split(',');
           }else{
             this.selectedModels = [];
           }
-          if (n && n.id) {
-            this.rightBox.title =this.rightBox.isEdit? this.$t("config.mib.editMib") + "  ID：" + n.id : this.$t("config.mib.mib") + "  ID：" + n.id ;
-          } else {
-            this.rightBox.title = this.$t("config.mib.createMib");
-          }
         }
       },
     }

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

@@ -65,7 +65,7 @@
             </template>
           </el-autocomplete>
         </el-form-item>
-        <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="usize">
+        <el-form-item :label="$t('asset.uSize')" prop="usize">
           <el-input v-model.number="editModel.usize" :max="47" size="small"></el-input>
         </el-form-item>
       </el-form>
@@ -73,7 +73,7 @@
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
-      <button @click="esc" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+      <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
         <span>{{$t('overall.cancel')}}</span>
       </button>
       <button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
@@ -84,8 +84,6 @@
 </template>
 
 <script>
-  import {noSpecialChar} from "../js/validate";
-
   export default {
     name: "modelBox",
     props: {

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

@@ -40,7 +40,7 @@
         <!--type-->
         <el-form-item :label="$t('config.promServer.type')" prop="type">
           <el-select popper-class="config-dropdown" v-model="editPromServer.type" placeholder="" size="small">
-            <el-option v-for="item in $CONSTANTS.promServer.typeOption" :key="item.key" :label="item.value" :value="item.key" :id="'prom-edit-type-op-'+item.key"></el-option>
+            <el-option v-for="item in $CONSTANTS.promServer.typeData" :key="item.value" :label="item.label" :value="item.value" :id="'prom-edit-type-op-'+item.value"></el-option>
           </el-select>
         </el-form-item>
       </el-form>

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

@@ -42,10 +42,10 @@
     assetState: [ //资产入库/出库状态
       {
         value: 1,
-        label: i18n.t('asset.createAssetTab.inStock')
+        label: i18n.t('asset.inStock')
       }, {
         value: 2,
-        label: i18n.t('asset.createAssetTab.notInStock')
+        label: i18n.t('asset.notInStock')
       }
     ],
     pingStatus:[

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

@@ -16,13 +16,14 @@
       </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="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search float-right">
-              <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+              <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
             </div>
-            <button id="alert-add" @click="toAdd"  :title="$t('overall.createAlertRule')"
+            <button id="alert-add" @click="add"  :title="$t('overall.createAlertRule')"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
                         <i class="nz-icon-create-square nz-icon"></i>
             </button>
@@ -33,19 +34,19 @@
           class="nz-table"
           :data="tableData"
           border
-          v-show="mainResizeShow"
+          v-show="bottomBox.mainResizeShow"
           ref="alertRuleTable"
           tooltip-effect="light"
           :height="mainTableHeight"
           v-scrollBar:el-table="'large'"
-          v-loading="loading"
+          v-loading="tools.loading"
           :cell-class-name="messageStyle"
           style="width: 100%;"
           @sort-change="tableDataSort"
         >
           <el-table-column
             :resizable="false"
-            v-for="(item, index) in tablelable"
+            v-for="(item, index) in tools.tablelable"
             v-if="item.show"
             :width="item.width"
             :key="`col-${index}`"
@@ -57,8 +58,8 @@
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>&nbsp;
-                <span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                <span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
                 <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i  class="el-icon-delete"></i></span>
               </div>
               <span v-else-if="item.prop == 'severity'">
@@ -86,29 +87,29 @@
               </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>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab.sync="targetTab" :detail="ruleDetail"
+      <transition name="el-zoom-in-bottom">
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
+                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      </transition>
     </div>
     </left-menu>
-    <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
+    <transition name="right-box">
-    <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
+      <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
-    <module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
+    </transition>
-    <!--<asset-box :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" v-if="assetBoxShow"
-               ref="assetEditUnit"></asset-box>-->
     <element-set
-      v-if="showElementSet"
+      v-if="tools.showElementSet"
       @close="elementsetHide"
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
-      :dropCol="dropCol"
+      :tools.dropCol="tools.dropCol"
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
@@ -116,32 +117,54 @@
 
 </template>
 <script>
-  var vm;
   import bus from '../../../libs/bus';
   import chartDataFormat from "../../charts/chartDataFormat";
   export default {
     name: "alert-config",
     data() {
-      vm = this;
       return {
-        loading: false,
+        //侧滑
-        /*二级列表相关*/
+        rightBox: {
+          show: false,
+        },
+        /*二级页面相关*/
+        bottomBox: {
           ruleDetail: {},
-        targetTab: '', //展示二级列表中的哪个页签
+          alertRule: {},
-        showElementSet: false, //控制自定义列的弹框
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
           subResizeShow: true,
-        isFullScreen: false,
+          isFullScreen: false, //全屏状态
-        showSubList: false, //是否展示二级列表
+          showSubList: false, //是否显示二级列表
-        alertRuleForMessage: {}, //传给alertMessage上滑框的对象
+          targetTab: '', //显示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
 
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
 
         tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false,
+        alertRule: {},
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        blankAlertRule: {
+          id: '',
+          alertName: '',
+          linkObject: {id: '', name: ''},
+          expr: '',
+          unit:2,
+          operator: '>',
+          last: 60,
+          severity: 'medium',
+          summary: '',
+          description: '',
+        },
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
           searchLabelList: [{
@@ -173,25 +196,6 @@
         searchLabel: { //搜索参数
 
         },
-
-        alertRule: {
-          id: '',
-          alertName: '',
-          type: '',
-          linkObject: {id: '', name: ''},
-          linkId: '',
-          operator:'>',
-          threshold:'',
-          unit:2,
-          expr: '',
-          last: 60,
-          severity: '',
-          summary: '',
-          description: '',
-          receivers: '',
-        },
-        tablelable: [],
-        dropCol: [],
         pageObj: {
           pageNo: 1,
           pageSize: 50,
@@ -240,16 +244,7 @@
             label: this.$t("alert.config.expr"),
             prop: 'expr',
             show: true,
-          }, /*{
-            label: this.$t("alert.list.type"),
-            prop: 'type',
-            show: true,
           }, {
-            label: this.$t("alert.config.link"),
-            prop: 'linkObject',
-            show: true,
-            width: 140
-          }, */{
             label: this.$t("alert.config.operator"),
             prop: 'operator',
             show: true,
@@ -297,12 +292,12 @@
     },
     methods: {
       queryMessage(alertRule) {
-        this.alertRuleForMessage = alertRule;
+        this.bottomBox.alertRule = alertRule;
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
-        this.targetTab = 'alertMessage';
+        this.bottomBox.targetTab = 'alertMessage';
       },
       elementsetShow(s, e) {
-        this.showElementSet = true;
+        this.tools.showElementSet = true;
         this.$nextTick(() => {
           var eventfixed = {
             shezhi: 0,
@@ -310,7 +305,7 @@
           };
           eventfixed[s] = 1;
           e.preventDefault();
-          this.$store.commit('setHeaderTable', this.tablelable);
+          this.$store.commit('setHeaderTable', this.tools.tablelable);
           this.$store.commit('setEventfixed', eventfixed);
           const h = document.documentElement.clientHeight;
           const w = document.documentElement.clientWidth;
@@ -327,20 +322,25 @@
       },
       elementsetHide() {
         //悬浮点击空白隐藏
-        //this.$refs.elementset.elementsetHide();
+        this.tools.showElementSet = false;
-        this.showElementSet = false;
       },
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
-        this.dropCol = data;
+        this.tools.dropCol = data;
       },
-      toEdit: function (u) {
+      edit(u) {
-        this.alertRule = Object.assign({}, u);
+        this.alertRule = JSON.parse(JSON.stringify(u));
-        this.$refs.alertConfigBox.show(true, true);
+        this.rightBox.show = true;
       },
-      del: function (u) {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      del(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -356,22 +356,25 @@
           })
         });
       },
-      formatThreshold:function(value,unit){
+      formatThreshold(value,unit) {
-        let unitMethod=chartDataFormat.getUnit(unit)
+        let unitMethod = chartDataFormat.getUnit(unit);
         if (unitMethod&&value) {
           return unitMethod.compute(value, null, 2);
         } else {
           return value
         }
       },
-      toAdd: function () {
+      add() {
-        this.cleanAlertRule();
+        this.alertRule = this.newAlertRule();
-        this.$refs.alertConfigBox.show(true, true);
+        this.rightBox.show = true;
       },
-      detail: function (u) {
+      newAlertRule() {
-        this.alertRuleForMessage = Object.assign({}, u);
+        return JSON.parse(JSON.stringify(this.blankAlertRule));
-        this.targetTab = "panel";
+      },
-        this.showSubList = true;
+      detail(u) {
+        this.bottomBox.alertRule = JSON.parse(JSON.stringify(u));
+        this.bottomBox.targetTab = "panel";
+        this.bottomBox.showSubList = true;
       },
       messageStyle(e) {
         if (e.column.label == 'Message' || e.column.label == this.$t('alert.message')) {
@@ -383,12 +386,12 @@
         }
         return '';
       },
-      getTableData: function () {
+      getTableData() {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('alert/rule', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code == 200) {
             response.data.list.forEach(item => {
               let temp = [];
@@ -404,20 +407,6 @@
           }
         })
       },
-      cleanAlertRule: function () {
-        this.alertRule = {
-          id: '',
-          alertName: '',
-          linkObject: {id: '', name: ''},
-          expr: '',
-          unit:2,
-          operator: '>',
-          last: 60,
-          severity: 'medium',
-          summary: '',
-          description: '',
-        }
-      },
       jumpTo(data, id) {
         bus.$emit("menu-change", data);
         this.$router.push({
@@ -436,7 +425,7 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
-      search: function (searchObj) {
+      search(searchObj) {
         let orderBy='';
         if(this.searchLabel.orderBy){
           orderBy=this.searchLabel.orderBy
@@ -455,17 +444,20 @@
       },
       // 全屏
       fullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
       },
       // 退出全屏
       exitFullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.exitFullScreen(vm);
       },
       // 鼠标拖动二级列表
       listResize(e) {
+        let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
       },
-      viewAlertType: function (type, typeObj) {
+      viewAlertType(type, typeObj) {
         this.closeViews();
         switch (type) {
           case 1:
@@ -510,9 +502,6 @@
           alertName: obj.alertName,
           expr: obj.expr
         };
-        /*detail.push({label: "ID", value: obj.id});
-        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) {
@@ -521,7 +510,6 @@
           }
         }
         detail.type = type;
-        //detail.push({label: this.$t("alert.list.type"), value: type});
         let link = "";
         if (obj.type == 1 || obj.type == 2) {
           link = obj.linkObject.name;
@@ -530,17 +518,12 @@
         }
         detail.link = link;
         detail.last = obj.last;
-        /*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.severity = severity;
         detail.alertNum = obj.alertNum;
         detail.description = obj.description;
-        /*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;
       },
       //是否需要排序
@@ -578,13 +561,14 @@
       },
     },
     watch: {
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
+        let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
-      alertRuleForMessage: {
+      'bottomBox.alertRule': {
         deep: true,
         handler(n) {
-          this.ruleDetail = this.convertToDetail(n);
+          this.bottomBox.ruleDetail = this.convertToDetail(n);
         }
       },
     },
@@ -605,23 +589,23 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     }

nezha-fronted/src/components/page/asset/WebSSH.vue

@@ -45,7 +45,6 @@
                         :on-change="handleChange"
                         :auto-upload="false"
                 >
-                   <!-- <el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>-->
                   <i class="el-icon-upload"></i>
                   <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
                 </el-upload>

nezha-fronted/src/components/page/asset/accountConfig.vue

@@ -1,50 +1,50 @@
 <template>
   <el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
     <template v-if="account.protocol == 'SSH'">
-      <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
+      <el-form-item :label="$t('asset.account')" prop="params.user">
         <el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.loginType')" prop="params.method">
+      <el-form-item :label="$t('asset.loginType')" prop="params.method">
         <el-radio-group v-model="account.params.method" size="small">
-          <el-radio-button label="password">{{$t('asset.createAssetTab.password')}}</el-radio-button>
+          <el-radio-button label="password">{{$t('asset.password')}}</el-radio-button>
-          <el-radio-button label="key">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
+          <el-radio-button label="key">{{$t('asset.ssh')}}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'password'">
+      <el-form-item :label="$t('asset.password')" v-if="account.params.method == 'password'">
         <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.ssh')" v-if="account.params.method == 'key'" prop="file">
+      <el-form-item :label="$t('asset.ssh')" v-if="account.params.method == 'key'" prop="file">
         <el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small"></el-input>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'key'">
+      <el-form-item :label="$t('asset.password')" v-if="account.params.method == 'key'">
         <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.passwordKey"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
+      <el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
         <el-input size="small" v-model.number="account.port"/>
       </el-form-item>
     </template>
     <template v-if="account.protocol == 'TELNET'">
-      <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
+      <el-form-item :label="$t('asset.account')" prop="params.user">
         <el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.userTip')" prop="userTip">
+      <el-form-item :label="$t('asset.userTip')" prop="userTip">
         <el-input autocomplete="new-password" size="small" v-model="account.params.userTip"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.password')">
+      <el-form-item :label="$t('asset.password')">
         <el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
       </el-form-item>
-      <el-form-item :label="this.$t('asset.createAssetTab.passwordTip')">
+      <el-form-item :label="this.$t('asset.passwordTip')">
         <el-input size="small" v-model="account.params.passwordTip"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" prop="reloginTip">
+      <el-form-item :label="$t('asset.reloginPasswordTip')" prop="reloginTip">
         <el-input size="small" v-model="account.params.reloginTip"/>
       </el-form-item>
-      <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
+      <el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
         <el-input size="small" v-model.number="account.port"/>
       </el-form-item>
     </template>
     <template v-if="account.protocol == 'SNMP'">
-      <el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
+      <el-form-item :label="$t('asset.port')" prop="port">
         <el-input size="small" v-model.number="account.port"/>
       </el-form-item>
       <el-form-item :label="$t('project.module.community')" prop="params.community">
@@ -61,7 +61,7 @@
       </el-form-item>
       <!--SNMP V3 setting-->
       <template v-if="account.params.version == 3">
-        <el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
+        <el-form-item :label="$t('asset.account')" prop="params.user">
           <el-input size="small" v-model="account.params.user"/>
         </el-form-item>
         <el-form-item :label="$t('project.module.securityLevel')" prop="params.securityLevel">

nezha-fronted/src/components/page/asset/asset.vue

@@ -7,9 +7,9 @@
           <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-group v-model="dcCheckList" size="small" @change="changeCheckBox">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
-                               v-for="(item,key) in checkListData" :key="key" :label=item.id>
+                               v-for="(item,key) in dcData" :key="key" :label=item.id>
                     <div class="sidebar-info-item-txt">
                       <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
                         <span slot="reference">{{item.name}}</span>
@@ -22,9 +22,9 @@
                   </el-checkbox>
                 </el-checkbox-group>
               </el-collapse-item>
-              <el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
+              <el-collapse-item name="assetType" :title="$t('asset.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>
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item, key) in assetTypeData" :key="key" :label=item.id>
                     <div class="sidebar-info-item-txt">
                       <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
                         <span slot="reference">{{item.name}}</span>
@@ -39,7 +39,7 @@
               </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>
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item, key) in vendorData" :key="key" :label=item.id>
                     <div class="sidebar-info-item-txt">
                       <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
                         <span slot="reference">{{item.name}}</span>
@@ -54,12 +54,12 @@
               </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>
+                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :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" >
+                      <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
-                        <span slot="reference">{{item.label}}</span>
+                        <span slot="reference">{{item.value}}</span>
                       </el-popover>
-                      <span v-else>{{item.label}}</span>
+                      <span v-else>{{item.value}}</span>
                     </div>
                     <el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
                       <el-badge class="mark" :value="item.total" :max="99"/>
@@ -72,19 +72,20 @@
         </div>
       </div>
       <div slot="content-right" class="slot-content">
-        <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+        <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-          <div class="top-tools" v-show="mainResizeShow">
+          <div class="main-modal"></div>
-            <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+          <div class="top-tools" v-show="bottomBox.mainResizeShow">
-              <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
+            <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
+              <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input></div>
               <export-excel
                 export-file-name="asset"
                 export-url="/asset/export"
                 import-url="/asset/import"
                 :params="searchLabel"
-                @afterImport="getAssetData"
+                @afterImport="getTableData"
               >
                 <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">
+                  <button @click.stop="add" :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>
@@ -98,9 +99,9 @@
                 style="width: 100%;"
                 :data="tableData"
                 v-scrollBar:el-table="'large'"
-                v-show="mainResizeShow"
+                v-show="bottomBox.mainResizeShow"
                 border
-                v-loading="loading"
+                v-loading="tools.loading"
                 tooltip-effect="light"
                 ref="assetTable"
                 :cell-class-name="messageStyle"
@@ -108,7 +109,7 @@
               >
                 <el-table-column
                   :resizable="false"
-                  v-for="(item, index) in tablelable"
+                  v-for="(item, index) in tools.tablelable"
                   v-if="item.show"
                   :width="item.width"
                   :key="`col_${index}`"
@@ -132,7 +133,7 @@
                       <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>
+                      <span>{{scope.row.state==1 ? $t('asset.inStock') : $t('asset.notInStock')}}</span>
                     </div>
               <div v-if="item.prop == 'pingStatus'">
                 <el-popover
@@ -180,15 +181,15 @@
                 <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
+                <span :title="$t('overall.view')" @click.stop="detail(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
+                  <span :title="$t('overall.edit')" @click.stop="edit(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
+                  <span :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
                     class="el-icon-delete"></i>
                 </span>
                   &nbsp;
@@ -211,37 +212,37 @@
               </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>
+                <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+          <div class="pagination-bottom" v-show="!bottomBox.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"
+          <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.asset" :isFullScreen="bottomBox.isFullScreen" :from="'asset'" :targetTab.sync="bottomBox.targetTab" :detail="bottomBox.assetDetail"
-                      @reload="getAssetData"
+                      @reload="getTableData"
-                      @closeSubList="showSubList = false"
+                      @closeSubList="bottomBox.showSubList = false"
                       @fullScreen="fullScreen"
                       @exitFullScreen="exitFullScreen"
                       @listResize="listResize" ></bottom-box>
         </transition>
       </div>
     </left-menu>
-
+    <transition name="right-box">
-    <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" v-if="rightBox.show"
+      <asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box>
-               ref="assetEditUnit"></asset-box>
+    </transition>
     <element-set
-      v-if="showElementSet"
+      v-if="tools.showElementSet"
       @close="elementsetHide"
       v-clickoutside="elementsetHide"
-      :drop-col="dropCol"
+      :drop-col="tools.dropCol"
       :table-title="tableTitle"
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
-    <module-box :module="module" @reload="getAssetData" ref="moduleBox"></module-box>
+
   </div>
 </template>
 
@@ -249,7 +250,6 @@
   import bus from "../../../libs/bus";
   import exportXLSX from "../../common/exportXLSX";
   import endpointStatusPop from "./endpointStatusPop";
-  var vm;
   export default {
     name: "asset",
     components:{
@@ -257,24 +257,54 @@
       'endpoint-status-pop':endpointStatusPop,
     },
     data() {
-      vm = this;
       return {
-        loading: false,
+        //侧滑
+        rightBox: {
+          show: false,
+        },
         /*二级页面相关*/
+        bottomBox: {
           assetDetail: {}, //asset详情
-        alertMsgAsset: {}, //告警信息对应的asset对象
+          asset: {}, //告警信息对应的asset对象
-        showElementSet: false, //控制自定义列的弹框
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
           subResizeShow: true,
-        isFullScreen: false,
+          isFullScreen: false, //全屏状态
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+          showSubList: false, //是否显示二级列表
-        showSubList: false, //是否展示二级列表
+          targetTab: '', //显示二级列表中的哪个页签
-        targetTab: '', //展示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
 
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
           showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
+        asset: {},
+        blankAsset: {
+          id: '',
+          sn: '',
+          host: '',
+          state: '',
+          purchaseDate: '',
+          idcId: '',
+          cabinetId: '',
+          modelId: '',
+          model: {type: {code: ""}},
+          assetType: '',
+          impi:{
+            host:'',
+            port:'',
+          },
+          tags: [],
+          accounts: [],
+        },
         tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -298,7 +328,7 @@
             disabled: false
           },{
             id: 22,
-            name: this.$t("asset.createAssetTab.state"),
+            name: this.$t("asset.state"),
             type: 'select',
             label: 'assetState',
             disabled: false
@@ -310,15 +340,10 @@
             disabled: false
           }],
         },
-        showTopBtn: false,
+
         searchLabel: {}, //搜索参数
         activeType: 'dataCenter',
-        checkList: [],
+
-        assetTypeCheckList:[],
-        vendorCheckList:[],
-        pingCheckList:[],
-        tablelable: [],
-        dropCol: [],
         tableTitle: [
           {
             label: this.$t("asset.tableTitle.host"),
@@ -396,15 +421,16 @@
             fixed:'right'
           }],
         tableData: [],
-        checkListData: [],
+
-        assetTypeCheckListData:[],
+        dcData: [],
-        vendorCheckListData:[],
+        dcCheckList: [],
-        pingCheckListData:[],
+        assetTypeData: [],
-        IDCData: '',
+        assetTypeCheckList: [],
-        IDCOptionData: [],
+        vendorData: [],
-        cabinetData: '',
+        vendorCheckList: [],
-        cabinetOptionData: [],
+        pingData: this.$CONSTANTS.asset.pingData,
-        input: '',
+        pingCheckList: [],
+
         pageObj: {
           id: '',
           pageNo: 1,
@@ -413,44 +439,7 @@
           idcId: '',
           idcIds: ''
         },
-        tabShow: false,
+
-        tabView: true,
-        tagType: 'add',
-        module: {},
-        form: {
-          name: ''
-        },
-        rightBox: { //弹出框相关
-          show: false,
-          isEdit: false, //false查看，true编辑
-          title: ''
-        },
-        assetType: '',
-        idcSelectedData: {
-          id: '',
-          name: '',
-          location: '',
-          principal: '',
-          tel: ''
-        },
-        addIdcData: {
-          id: '',
-          name: '',
-          popName: '',
-          location: '',
-          principal: '',
-          tel: ''
-        },
-        idcUserData: [],
-        modelCount: '',
-        isResourceShow: 0,
-        unitDisable: '',
-        modelClickData: '',
-        obj: null,
-        editUnitShow: false,
-        flag: false,
-        checkAllFlag: false,
-        checkAllHandler: false,
         assetClick: false,
         assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
       }
@@ -467,7 +456,7 @@
       getData: {
         handler(newVal) {
           if (newVal.type == 1) {
-            this.activeType='dataCenter'
+            this.activeType = 'dataCenter';
             this.checkList = newVal.selectedData;
             this.assetClick = false;
           }
@@ -478,12 +467,14 @@
       getFlushData: {
         handler(newVal, oldVal) {
           if (newVal === true) {
-            this.getLeftMenuList();
+            this.getDcData();
-            this.getAssetData()
+            this.getTableData()
+            /*this.getLeftMenuList();
+            this.getAssetData()*/
           }
         }
       },
-      checkList(n, o) {
+      dcCheckList(n, o) {
         setTimeout(()=>{
           if (n.length > 0 ) {
             this.pageObj.idcIds = n.join(',');
@@ -492,30 +483,37 @@
           }
           if (this.assetClick) {
             this.$store.state.assetData = {selectedData: n, step: this.$store.state.assetData.step+1, type: 0};
-          } else {
-            this.getSingleAsset();
           }
-          this.getAssetData();
+          this.getTableData();
         }, 50);
       },
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
+        let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
-      alertMsgAsset: {
+      'bottomBox.asset': {
         deep: true,
         handler(n) {
-          this.assetDetail = this.convertToDetail(n);
+          if (n.id) {
+            this.bottomBox.assetDetail = this.convertToDetail(n);
+            if (n.model.id) {
+              n.modelId = n.model.id;
+            }
+          }
         }
       },
     },
     methods: {
       fullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
       },
       exitFullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.exitFullScreen(vm);
       },
       listResize(e) {
+        let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
       },
       dcSelectAll(val) { //DC全选
@@ -528,29 +526,10 @@
             }
             this.$store.commit('assetAllIdChange',this.checkListData)
           }
-          this.checkAllHandler = false;
         }
       },
-      openModuleBox(module) {
-        if (module.param) {
-          try {
-            let tempObj = JSON.parse(module.param);
-            this.$set(module, 'paramObj', []);
-            for (let k in tempObj) {
-              module.paramObj.push({key: k, value: tempObj[k]});
-            }
-          } catch (err) {
-            console.info(module, err);
-          }
-        }
-        this.module = module;
-        this.$refs.moduleBox.show(true);
-      },
-      getAssetModuleList(id) {
-        this.$refs['moduleListPop' + id][0].getModuleList();
-      },
       elementsetShow(s, e) {
-        this.showElementSet = true;
+        this.tools.showElementSet = true;
         this.$nextTick(() => {
           var eventfixed = {
             shezhi: 0,
@@ -558,7 +537,7 @@
           };
           eventfixed[s] = 1;
           e.preventDefault();
-          this.$store.commit('setHeaderTable', this.tablelable);
+          this.$store.commit('setHeaderTable', this.tools.tablelable);
           this.$store.commit('setEventfixed', eventfixed);
           const h = document.documentElement.clientHeight;
           const w = document.documentElement.clientWidth;
@@ -575,12 +554,12 @@
       },
       elementsetHide() {
         //悬浮点击空白隐藏
-        this.$refs.elementset.elementsetHide();
+        this.tools.showElementSet = false;
       },
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       cli([id,host,account]){
         const consoleParam = {
@@ -588,54 +567,64 @@
           host: host,
           accountId: account.id,
           port: account.port,
-        }
+        };
         this.$store.commit('addConsole', consoleParam);
-        //this.$refs.webSsh.show(id,host,accountId,port);
       },
       jumpToAlertMsg(asset) {
-        this.targetTab = 'alertMessage';
+        this.bottomBox.targetTab = 'alertMessage';
-        this.alertMsgAsset = JSON.parse(JSON.stringify(asset));
+        this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
-        /*this.$nextTick(() => {
-          this.$store.commit("assetForAlertListChange", this.$store.state.assetForAlertList+1);
-        });*/
       },
-      getAssetData(data, flushRightBoxDc) {
+      getTableData() {
         this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('asset', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
           }
         });
-        if (flushRightBoxDc) {
-          this.$refs.assetAddUnit.getIDCOptionData();
-          this.$refs.assetEditUnit.getIDCOptionData();
-        }
       },
-      // getIDCOptionData() {
+      getDcData() {
-      //   this.$get('idc').then(response => {
+        return new Promise(resolve => {
-      //     if (response.code === 200) {
+          this.$get('idc').then(response => {
-      //       // console.log(response.data);
+            if (response.code === 200) {
-      //       // this.checkListData = this.IDCOptionData = response.data.list;
+              this.dcData = response.data.list;
-      //       // this.markOptionData(this.IDCOptionData)
+            }
-      //     }
+            resolve(this.dcData);
-      //   })
+          });
-      // },
+        });
-      getPingData:function(){
+      },
-        this.pingCheckListData=[
+      getAssetTypeData() {
-          {label:'up',value:1},
+        return new Promise(resolve => {
-          {label:'down',value:0},
+          this.$get('sys/dict/all?type=assetType').then(response => {
-        ]
+            if (response.code === 200) {
+              this.assetTypeData = response.data;
+            }
+            resolve(this.assetTypeData);
+          });
+        });
+      },
+      getVendorData() {
+        return new Promise(resolve => {
+          this.$get('sys/dict/all?type=vendor').then(response => {
+            if (response.code === 200) {
+              this.vendorData = response.data;
+            }
+            resolve(this.vendorData);
+          });
+        });
       },
       getUserData() {
+        return new Promise(resolve => {
           this.$get('sys/user/list').then(response => {
             if (response.code === 200) {
-            this.idcUserData = response.data.list
+              this.userData = response.data.list;
             }
-        })
+            resolve(this.userData);
+          });
+        });
       },
       messageStyle(e) {
         if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
@@ -647,18 +636,30 @@
         }
         return '';
       },
-      editData(data, item) {
+      edit(asset) {
-        if (data === 'idc') {
+        this.asset = JSON.parse(JSON.stringify(asset));
-          item.name = this.addIdcData.popName
+        this.rightBox.show = true;
-        }
+      },
-        this.$put(data, item).then(res => {
+      detail(asset) {
-          if (res.code === 200) {
+        this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
-            this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+        this.bottomBox.targetTab = "panel";
-            this.getAssetData();
+        this.bottomBox.showSubList = true;
+      },
+      del(asset) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("asset?ids=" + asset.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
             } else {
-            this.$message.error(res.msg);
+              this.$message.error(response.msg);
             }
           })
+        });
       },
       addNewData(type) {
         if (type === 'IDC') {
@@ -666,8 +667,10 @@
             if (res.code === 200) {
               const h = this.$createElement;
               this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getLeftMenuList()
+              this.getDcData()
-              this.getAssetData()
+              this.getTableData()
+              /*this.getLeftMenuList()
+              this.getAssetData()*/
             } else {
               this.$message.error(res.msg);
             }
@@ -683,8 +686,10 @@
           this.$delete(data + "?ids=" + item).then(response => {
             if (response.code === 200) {
               this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getAssetData();
+              this.getTableData();
-              this.getLeftMenuList();
+              this.getDcData();
+              /*this.getAssetData();
+              this.getLeftMenuList();*/
             } else {
               this.$message.error(response.msg);
             }
@@ -732,77 +737,36 @@
         }
       },
       showEndpoint(asset) {
-        this.alertMsgAsset = Object.assign({}, asset);
+        this.bottomBox.asset = Object.assign({}, asset);
-        this.targetTab = "endpoint";
+        this.bottomBox.targetTab = "endpoint";
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
-      tagShow(data, id, type) {
+      add() {
-        if (data === 'showAdd') {
+        this.asset = this.newAsset();
         this.rightBox.show = true;
-          this.$nextTick(() => {
+      },
-            this.editUnitShow = true;
+      newAsset() {
-            this.$refs['assetEditUnit'].accountSwitch=false;
+        return JSON.parse(JSON.stringify(this.blankAsset));
-            this.$refs['assetEditUnit'].getAssetData('');
+      },
-            this.$refs['assetEditUnit'].resetAsset();
+      closeRightBox(refresh) {
-          });
+        this.rightBox.show = false;
-        }
+        if (refresh) {
-        if (data === 'showEdit') {
+          this.getTableData();
-          this.rightBox.show = true;
-          this.$nextTick(() => {
-            this.editUnitShow = true;
-            this.$refs['assetEditUnit'].accountSwitch=false;
-            this.$refs['assetEditUnit'].getAssetData(id)
-          });
-        }
-        if (data === 'showView') {
-          this.alertMsgAsset = Object.assign({}, id);
-          this.targetTab = "panel";
-          this.showSubList = true;
-          /*this.editUnitShow = true
-          this.$refs['assetEditUnit'].getAssetData(id)
-          this.$refs['assetEditUnit'].tabView = true*/
         }
       },
-      editing() {
-
-      },
-      getSingleIDCData(data, item) {
-        if (item !== 'edit') {
-          this.idcSelectedData = '';
-          this.IDCOptionData.forEach(item => {
-            if (item.id === data) {
-              this.idcSelectedData = item
-            }
-          });
-          return
-        } else {
-          this.IDCOptionData.forEach(item => {
-            if (item.id === data) {
-              this.addIdcData.id = item.id;
-              this.addIdcData.name = item.name;
-              this.addIdcData.popName = item.name;
-              this.addIdcData.location = item.location;
-              this.addIdcData.principal = item.principal;
-              this.addIdcData.tel = item.tel;
-            }
-          });
-        }
-      },
-
       changeCheckBox() {
         this.assetClick = true;
-        this.getSingleAsset();
       },
-      changeAssetTypeCheckBox:function(){
+      changeAssetTypeCheckBox() {
         if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
           let assetTypeIds = this.assetTypeCheckList.join(',');
           this.pageObj.typeIds=assetTypeIds;
         }else{
           this.pageObj.typeIds='';
         }
-        this.getAssetData();
+        this.getTableData();
       },
-      changeVendorCheckBox:function(){
+      changeVendorCheckBox() {
         if(this.vendorCheckList && this.vendorCheckList.length > 0){
           let vendorIds = this.vendorCheckList.join(',');
           this.pageObj.vendorIds = vendorIds;
@@ -810,37 +774,31 @@
         }else{
           this.pageObj.vendorIds = '';
         }
-        this.getAssetData();
+        this.getTableData();
       },
-      changePingCheckBox:function(){
+      changePingCheckBox() {
         if(this.pingCheckList && this.pingCheckList.length > 0){
           let pingStates = this.pingCheckList.join(',');
           this.pageObj.pingStates = pingStates;
         }else{
           this.pageObj.pingStates = '';
         }
-        this.getAssetData();
+        this.getTableData();
-      },
-      getSingleAsset() {
-        let checkedCount = this.checkList.length;
-        let allCount = this.checkListData.length;
-        this.checkAllFlag = ((checkedCount == allCount) && allCount > 0);
-        this.checkAllHandler = checkedCount > 0 && checkedCount < allCount;
       },
       pageNo(val) {
         this.pageObj.pageNo = val;
-        this.getAssetData()
+        this.getTableData()
       }
       ,
       pageSize(val) {
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
-        this.getAssetData();
+        this.getTableData();
       },
       getPrincipalName(data) {
-        for (let item in this.idcUserData) {
+        for (let item in this.userData) {
-          if (this.idcUserData[item].userId === data) {
+          if (this.userData[item].userId === data) {
-            return this.idcUserData[item].username
+            return this.userData[item].username
           }
         }
       },
@@ -854,16 +812,17 @@
         }
       },
       flushData() {
-        this.getSingleAsset();
+        Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getDcData()]).then(response => {
-        this.getAssetData();
+          this.getTableData();
+        });
       },
       closeAllPop:function(){
         this.$refs.idcConfigBox.forEach((item) => {
-          item.show(false)
+          item.show(false);
-        })
+        });
         this.$refs.cabinetConfigBox.forEach((item) => {
-          item.show(false)
+          item.show(false);
-        })
+        });
       },
       search(searchObj) {
         let orderBy = '';
@@ -880,11 +839,11 @@
         if(orderBy){
           this.$set(this.searchLabel, 'orderBy', orderBy);
         }
-        this.getAssetData();
+        this.getTableData();
       },
       convertToDetail(obj) {
         let detail = JSON.parse(JSON.stringify(obj));
-        detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
+        detail.state = obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock');
         detail.assetType = obj.model.type.value;
         detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
         detail.dataCenter = obj.idc ? obj.idc.name : "";
@@ -894,53 +853,20 @@
         detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
         detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
         detail.remark = obj.idc ? obj.idc.remark : "";
-        if (obj.accounts.length > 0) {
+        if (obj.accounts && obj.accounts.length > 0) {
           let account = obj.accounts[0];
           detail.protocol = account.protocol;
           detail.account = account.user;
           let loginType = "";
           if (account.authType == 1) {
-            loginType = this.$t('asset.createAssetTab.password');
+            loginType = this.$t('asset.password');
           } else if (account.authType == 2) {
-            loginType = this.$t('asset.createAssetTab.ssh');
+            loginType = this.$t('asset.ssh');
           }
           detail.loginType = loginType;
           detail.port = account.port;
         }
 
-        /*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.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.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){
@@ -990,9 +916,11 @@
           orderBy='-'+item.prop;
         }
         this.$set(this.searchLabel, "orderBy", orderBy);
-        this.getAssetData();
+        this.getTableData();
+      /*}
+        this.getAssetData();*/
       },
-      // 获取左侧菜单数据
+      /*// 获取左侧菜单数据
       getLeftMenuList(){
         this.$get('asset/filter').then(response => {
           if (response.code === 200) {
@@ -1011,7 +939,7 @@
             })
           }
         })
-      },
+      },*/
     },
     created() {
       this.getUserData();
@@ -1019,7 +947,11 @@
       this.getPingData();
     },
     mounted() {
-      this.getLeftMenuList()//获取左侧菜单列表
+      //初始化数据
+      Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getUserData(), this.getDcData()]).then(response => {
+        this.getTableData();
+      });
+      // this.getLeftMenuList()//获取左侧菜单列表
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
       if (pageSize != 'undefined' && pageSize != null) {
@@ -1036,42 +968,41 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
         //resize时刷新左侧列表滚动条
-        let _this = this;
+        let vm = this;
         window.onresize = function () {
-          _this.$refs.leftScrollbar.update();
+          vm.$refs.leftScrollbar.update();
           el._ps_.update();
         };
       });
       let localStorageTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
-      this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
+      this.tools.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
-      // this.assetPingSwit
 
       if (this.assetPingSwitch == 'off') {
 
-        for (let i in this.tablelable) {
+        for (let i in this.tools.tablelable) {
-          let label = this.tablelable[i];
+          let label = this.tools.tablelable[i];
 
           if (label.prop == 'pingStatus') {
-            this.tablelable.splice(i, 1);
+            this.tools.tablelable.splice(i, 1);
-            console.log(this.tablelable)
+            //console.log(this.tools.tablelable)
             break;
           }
         }
       }
-      this.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
+      this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
     },
     destroyed() {
       window.onresize = null;

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

@@ -35,12 +35,13 @@
     </div>
     <div slot="content-right" class="slot-content">
       <!-- 主页面 -->
-      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
         <!-- 顶部工具栏 -->
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search">
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
             </div>
             <button type="button" @click="add" :title="$t('overall.createAccount')"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
@@ -54,16 +55,16 @@
           class="nz-table"
           :data="tableData"
           border
-          v-show="mainResizeShow"
+          v-show="bottomBox.mainResizeShow"
           ref="accountTable"
           :height="mainTableHeight"
-          v-loading="loading"
+          v-loading="tools.loading"
           v-scrollBar:el-table="'large'"
           style="width: 100%;"
           @sort-change="tableDataSort">
           <el-table-column
             :resizable="false"
-            v-for="(item, index) in tablelable"
+            v-for="(item, index) in tools.tablelable"
             v-if="item.show"
             :width="item.width"
             :key="`col-${index}`"
@@ -106,17 +107,19 @@
               </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>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
       <!-- 底部上滑框 -->
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab.sync="targetTab" :detail="userDetail"
+      <transition name="el-zoom-in-bottom">
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.user" :is-full-screen="bottomBox.isFullScreen" :from="'account'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.userDetail"
+                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      </transition>
     </div>
     </left-menu>
     <transition name="right-box">
@@ -124,8 +127,9 @@
     </transition>
     <!-- 自定义table列 -->
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
-      :dropCol="dropCol"
+      :dropCol="tools.dropCol"
       @tablelable="tablelabelEmit"
       :table-title="tableTitle"
       ref="elementset"
@@ -143,28 +147,37 @@
     },
     data() {
       return {
-        loading: false,
+        //侧滑
-        //底部上滑框相关
+        rightBox: {
-        mainListHeight: '', //主列表高度
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        showSubList: false, //是否展示二级列表
-        targetTab: '', //展示二级列表中的哪个页签
-        showElementSet: false, //控制自定义列弹框
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
-        subResizeShow: true, //二级列表拖动时，用于控制主列表内容展示
-        isFullScreen: false, //是否全屏
-        userDetail: [],
-        //底部上滑框相关end
-
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-        tableHover: false, //控制滚动条和top按钮同时出现
-
-        tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false, //是否显示回到顶部按钮
-        rightBox: { //弹出框相关
           show: false,
         },
+        /*二级页面相关*/
+        bottomBox: {
+          userDetail: {},
+          user: {},
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
+          subResizeShow: true,
+          isFullScreen: false, //全屏状态
+          showSubList: false, //是否显示二级列表
+          targetTab: '', //显示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
+
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+
+        user: {},
+
+        tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
         blankUser: { //空白对象
           userId: '',
           username: '',
@@ -193,11 +206,7 @@
             label: 'E-mail',
             prop: 'email',
             show: true,
-          }, /*{
+          }, {
-          label: this.$t('config.account.receiver'),
-          prop: 'receiver',
-          show: false,
-        }, */{
             label: this.$t('config.account.createTime'),
             prop: 'createTime',
             show: true,
@@ -213,8 +222,6 @@
             width: 120
           }
         ],
-        tablelable: [], //实际显示的列
-        dropCol: [], //用于element-set组件显示
         tableData: [],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -264,13 +271,14 @@
         return detail;
       },
       elementsetShow(s, e) {
+        this.tools.showElementSet = true;
         var eventfixed = {
           shezhi: 0,
           screen: 0
         };
         eventfixed[s] = 1;
         e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setHeaderTable', this.tools.tablelable);
         this.$store.commit('setEventfixed', eventfixed);
         const h = document.documentElement.clientHeight;
         const w = document.documentElement.clientWidth;
@@ -291,7 +299,7 @@
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       closeRightBox(refresh) {
         this.rightBox.show = false;
@@ -304,16 +312,16 @@
         this.rightBox.show = true;
       },
       detail(u) {
-        this.user = JSON.parse(JSON.stringify(u));
+        this.bottomBox.user = JSON.parse(JSON.stringify(u));
-        this.targetTab = "detail";
+        this.bottomBox.targetTab = "detail";
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
-      getTableData: function () {
+      getTableData() {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('sys/user/list', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + "";
@@ -392,13 +400,13 @@
       }
     },
     watch: {
-      user: {
+      'bottomBox.user': {
         deep: true,
         handler(n) {
-          this.userDetail = this.convertToDetail(n);
+          this.bottomBox.userDetail = this.convertToDetail(n);
         }
       },
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       }
@@ -417,23 +425,23 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     }

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

@@ -37,11 +37,12 @@
     </div>
     <!--dc table start-->
     <div slot="content-right" class="slot-content">
-      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search">
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
             </div>
             <button type="button" @click="add" :title="$t('overall.createDatacenter')"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
@@ -55,18 +56,18 @@
           :data="tableData"
           border
           tooltip-effect="light"
-          v-show="mainResizeShow"
+          v-show="bottomBox.mainResizeShow"
           v-scrollBar:el-table="'large'"
           :height="mainTableHeight"
           ref="dcTable"
-          v-loading="loading"
+          v-loading="tools.loading"
           :cell-class-name="assetStatClassName"
           style="width: 100%;"
           @sort-change="tableDataSort">
           <el-table-column
             :resizable="false"
             show-overflow-tooltip
-            v-for="(item, index) in tablelable"
+            v-for="(item, index) in tools.tablelable"
             v-if="item.show"
             :width="item.width"
             :key="`col-${index}`"
@@ -100,7 +101,7 @@
                 <el-popover
                   placement="top"
                   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">
+                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.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>
@@ -123,22 +124,25 @@
               </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>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="dc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab.sync="targetTab" :detail="dcDetail"
+      <transition name="el-zoom-in-bottom">
-                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-bab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
+                     @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      </transition>
     </div>
     </left-menu>
     <!--dc table end-->
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
-      :dropCol="dropCol"
+      :dropCol="tools.dropCol"
       @tablelable="tablelabelEmit"
       :table-title="tableTitle"
       ref="elementset"
@@ -164,23 +168,29 @@
     },
     data() {
       return {
-        /*二级列表相关*/
+        /*二级页面相关*/
-        targetTab: '', //展示二级列表中的哪个页签
+        bottomBox: {
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+          dcDetail: {},
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
+          dc: {},
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
           subResizeShow: true,
-        isFullScreen: false,
+          isFullScreen: false, //全屏状态
-        showSubList: false, //是否展示二级列表
+          showSubList: false, //是否显示二级列表
-        dcDetail: [], //dc的详情信息，包含标题
+          targetTab: '', //显示二级列表中的哪个页签
-
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
-
+          showElementSet: false, //自定义列弹框是否显示
-        showElementSet: false, //控制自定义列的弹框
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
         tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false,
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        loading: false,
         dc: {},
         blankDc: {
           id: '',
@@ -217,7 +227,7 @@
             prop: 'area',
             show: true
           }, {
-            label: this.$t("asset.createAssetTab.location"),
+            label: this.$t("asset.location"),
             prop: 'location',
             show: true,
           }, {
@@ -229,11 +239,11 @@
             prop: 'assetStat',
             show: true,
           }, {
-            label: this.$t('asset.createAssetTab.tel'),
+            label: this.$t('asset.tel'),
             prop: 'tel',
             show: true,
           }, {
-            label: this.$t('asset.createAssetTab.principal'),
+            label: this.$t('asset.principal'),
             prop: 'principal',
             show: true
           }, {
@@ -243,8 +253,6 @@
             width: 120
           }
         ],
-        tablelable: [],
-        dropCol: [],
         tableData: [],
         userData: [],
         searchMsg: { //给搜索框子组件传递的信息
@@ -259,19 +267,18 @@
         },
         searchLabel: {}, //搜索参数
         tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
-        cabinetDatas:[],//显示的机柜信息
-
       }
     },
     methods: {
       elementsetShow(s, e) {
+        this.tools.showElementSet = true;
         var eventfixed = {
           shezhi: 0,
           screen: 0
         };
         eventfixed[s] = 1;
         e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setHeaderTable', this.tools.tablelable);
         this.$store.commit('setEventfixed', eventfixed);
         const h = document.documentElement.clientHeight;
         const w = document.documentElement.clientWidth;
@@ -298,7 +305,7 @@
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       jumpTo(data, id) {
         bus.$emit("menu-change", data);
@@ -321,12 +328,12 @@
         this.rightBox.trafficSetting.show = true;
       },
       detail(u) {
-        this.dc = JSON.parse(JSON.stringify(u));
+        this.bottomBox.dc = JSON.parse(JSON.stringify(u));
-        if (!this.dc.area) {
+        if (!this.bottomBox.dc.area) {
-          this.$set(this.dc, 'area', {id: '', name: ''});
+          this.$set(this.bottomBox.dc, 'area', {id: '', name: ''});
         }
-        this.targetTab = "detail";
+        this.bottomBox.targetTab = "detail";
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
       // 全屏
       fullScreen() {
@@ -347,11 +354,11 @@
         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("asset.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;
+        let assets = this.$t('overall.result.total') + ' ' + obj.assetStat.total + '，' + this.$t('asset.inStock') + ' ' + obj.assetStat.inStock + '，' + this.$t('asset.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});
+        detail.push({label: this.$t("asset.tel"), value: obj.tel});
         let principal = '';
         for (let i = 0; i < this.userData.length; i++) {
           if (this.userData[i].userId == obj.principal) {
@@ -359,7 +366,7 @@
             break;
           }
         }
-        detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
+        detail.push({label: this.$t("asset.principal"), value: principal});
         return detail;
       },
       add() {
@@ -400,9 +407,9 @@
       getTableData() {
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('idc', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
@@ -446,9 +453,9 @@
         this.getTableData();
       },
       showCabinet(dc) {
-        this.targetTab = 'cabinet';
+        this.bottomBox.targetTab = 'cabinet';
-        this.dc = JSON.parse(JSON.stringify(dc));
+        this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
       //是否需要排序
       sortableShow(prop) {
@@ -483,15 +490,15 @@
       },
     },
     watch: {
-      dc: {
+      'bottomBox.dc': {
         deep: true,
         handler(n) {
           if (n.id) {
-            this.dcDetail = this.convertToDetail(n);
+            this.bottomBox.dcDetail = this.convertToDetail(n);
           }
         }
       },
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       }
@@ -512,16 +519,16 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 100) {
-              this.showTopBtn = true;
+              this.bottomBox.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.bottomBox.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
           window.onresize = function() {
             el._ps_.update();
@@ -529,10 +536,10 @@
         }
       });
 
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     }

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

@@ -48,14 +48,14 @@
             <div class="top-tool-search">
               <search-input :searchMsg="searchMsg" @search="search"></search-input>
             </div>
-            <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
+            <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
                     id="mib-add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
           </div>
         </div>
-        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading" @sort-change="tableDataSort">
+        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
-          <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
+          <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
                            :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
                            :prop="propTitle(item.prop)">
             <template slot-scope="scope" :column="item">
@@ -92,9 +92,9 @@
                 </div>
               </template>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.download')" @click="downloadMib(scope.row.id)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
+                <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
                 &nbsp;
-                <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
                 &nbsp;
                 <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
               </div>
@@ -109,23 +109,26 @@
               </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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
             </template>
           </el-table-column>
         </el-table>
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </template>
-      <mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
+      <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
     </div>
     </left-menu>
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
-      :dropCol="dropCol"
+      :dropCol="tools.dropCol"
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
-    <mib-box ref="mibBox" :mib="mib" @reload="getTableData" @after="getTableData()"></mib-box>
+    <transition name="right-box">
+      <mib-box v-if="rightBox.show" ref="mibBox" :mib="mib" @reload="getTableData" @close="closeRightBox"></mib-box>
+    </transition>
   </div>
 
 </template>
@@ -142,14 +145,19 @@
     data() {
       return {
         showTab: 'file', //file/browser
-        loading: false,
+        rightBox: {show: false},
-
+        tools: {
+          loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
-
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
         tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false,
+        mib: {},
-        mib: {
+        blankMib: {
           id: null,
           name: '',
           remark:'',
@@ -198,8 +206,6 @@
             width: 120
           }
         ],
-        tablelable: [],
-        dropCol: [],
         tableData: [],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -222,13 +228,15 @@
     },
     methods: {
       elementsetShow(s, e) {
+        this.tools.showElementSet = true;
+        this.$nextTick(() => {
           var eventfixed = {
             shezhi: 0,
             screen: 0
           };
           eventfixed[s] = 1;
           e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+          this.$store.commit('setHeaderTable', this.tools.tablelable);
           this.$store.commit('setEventfixed', eventfixed);
           const h = document.documentElement.clientHeight;
           const w = document.documentElement.clientWidth;
@@ -241,6 +249,7 @@
               ? e.clientY + 20
               : e.clientY + 20 - (e.clientY + dh - h);
           this.$store.commit('setPosition', {positionx, positiony});
+        });
       },
       elementsetHide() {
         //悬浮点击空白隐藏
@@ -249,16 +258,22 @@
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
-      clickos() {
+      clickOutside() {
         this.rightBox.show = false;
       },
-      toEdit: function (u) {
+      edit(u) {
-        this.mib = Object.assign({}, u);
+        this.mib = JSON.parse(JSON.stringify(u));
-        this.$refs.mibBox.show(true, true);
+        this.rightBox.show = true;
       },
-      del: function (u) {
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.getTableData();
+        }
+      },
+      del(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -268,23 +283,18 @@
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
               this.getTableData();
-              this.rightBox.show = false;
             } else {
               this.$message.error(response.msg);
             }
           })
         });
       },
-      detail: function (u) {
+      add() {
-        this.mib = Object.assign({}, u);
+        this.mib = this.newMib();
-        this.$refs.mibBox.show(true, false);
+        this.rightBox.show = true;
       },
-      toAdd: function () {
+      newMib() {
-        this.cleanMib();
+        return JSON.parse(JSON.stringify(this.blankMib));
-        this.$refs.mibBox.show(true, true);
-      },
-      esc: function () {
-        this.rightBox.show = false;
       },
       jumpTo(data, id) {
         bus.$emit("menu-change", data);
@@ -295,13 +305,13 @@
           }
         });
       },
-      getTableData: function () {
+      getTableData() {
         this.tableData = [];
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('mib', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
@@ -317,7 +327,7 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
       },
-      search: function (searchObj) {
+      search(searchObj) {
         let orderBy='';
         if(this.searchLabel.orderBy){
           orderBy=this.searchLabel.orderBy
@@ -334,8 +344,8 @@
         }
         this.getTableData();
       },
-      downloadMib:function(mibId){
+      downloadMib(mib) {
-        axios.get('/mib/download?id='+mibId,{responseType: 'blob'}).then(data=>{
+        axios.get('/mib/download?id='+mib.id,{responseType: 'blob'}).then(data=>{
           let fileName = new Date().getTime()+'.txt';
           let disposition=data.headers['content-disposition'];
           if(disposition){
@@ -358,17 +368,6 @@
           }
         })
       },
-      cleanMib() {
-        this.mib = {
-          id: null,
-          name: '',
-          remark:'',
-          file:'',
-          models:'',
-          file:null,
-        };
-        this.$refs.mibBox.clearData();
-      },
       //是否需要排序
       sortableShow(prop){
         switch(prop){
@@ -403,7 +402,7 @@
         this.getTableData();
       },
     },
-    mounted: function () {
+    mounted() {
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
       if (pageSize != 'undefined' && pageSize != null) {
@@ -417,39 +416,32 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     },
-    watch: {
-
-    }
   }
 </script>
 <style >
   .mib-table .el-divider--horizontal{
     margin:2px 0 !important;
   }
-  .mib-table td .cell{
-    /*min-height: 60px !important;*/
-    /*padding-bottom: 3px;*/
-  }
   .mib-table td .cell .detail-item-content{
     height: 20px;
     line-height: 20px;

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

@@ -34,11 +34,12 @@
       </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="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search">
-              <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+              <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
             </div>
             <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createModel')"
                     id="model-add">
@@ -53,14 +54,14 @@
                   class="nz-table"
                   v-scrollBar
                   :el-table="'large'"
-                  v-loading="loading"
+                  v-loading="tools.loading"
                   :cell-class-name="assetStatClassName"
-                  v-show="mainResizeShow"
+                  v-show="bottomBox.mainResizeShow"
                   :height="mainTableHeight"
                   @sort-change="tableDataSort"
         >
           <el-table-column :resizable="false"
-                           v-for="(item, index) in tablelable"
+                           v-for="(item, index) in tools.tablelable"
                            v-if="item.show"
                            :width="item.width"
                            :key="`col-${index}`"
@@ -74,7 +75,7 @@
                 <el-popover
                   placement="top"
                   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">
+                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.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>
@@ -98,23 +99,26 @@
               </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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" from="model" :targetTab.sync="targetTab" :obj="modelForPanel"
+      <transition name="el-zoom-in-bottom">
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
+                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
+      </transition>
     </div>
     </left-menu>
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
-      :dropCol="dropCol"
+      :dropCol="tools.dropCol"
-      @tablelable="tablelabelEmit"
+      @tools.tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
     <transition name="right-box">
@@ -129,22 +133,32 @@
     name: "model",
     data() {
       return {
-        /*二级列表相关*/
+        /*二级页面相关*/
-        targetTab: '', //展示二级列表中的哪个页签
+        bottomBox: {
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+          modelDetail: {}, //asset详情
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
+          model: {}, //告警信息对应的asset对象
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
           subResizeShow: true,
-        isFullScreen: false,
+          isFullScreen: false, //全屏状态
-        showSubList: false, //是否展示二级列表
+          showSubList: false, //是否显示二级列表
+          targetTab: '', //显示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        modelForPanel: {},
+        /*工具参数*/
-
+        tools: {
-        tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
+          loading: false, //是否显示table加载动画
-        showTopBtn: false,
-
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
+        tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
+
         rightBox: {show: false},
+        
         model: {},
         blankModel: {
           id: '',
@@ -162,7 +176,6 @@
           pageSize: 50,
           total: 0
         },
-        loading: false,
         tableTitle: [
           {
             label: 'ID',
@@ -192,8 +205,6 @@
             width: 120
           }
         ],
-        tablelable: [],
-        dropCol: [],
         tableData: [],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -216,13 +227,15 @@
     },
     methods: {
       elementsetShow(s, e) {
-        var eventfixed = {
+        this.tools.showElementSet = true;
+        this.$nextTick(() => {
+          let eventfixed = {
             shezhi: 0,
             screen: 0
           };
           eventfixed[s] = 1;
           e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+          this.$store.commit('setHeaderTable', this.tools.tablelable);
           this.$store.commit('setEventfixed', eventfixed);
           const h = document.documentElement.clientHeight;
           const w = document.documentElement.clientWidth;
@@ -235,6 +248,7 @@
               ? e.clientY + 20
               : e.clientY + 20 - (e.clientY + dh - h);
           this.$store.commit('setPosition', {positionx, positiony});
+        });
       },
       elementsetHide() {
         //悬浮点击空白隐藏
@@ -249,12 +263,12 @@
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       panel(obj) {
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
-        this.modelForPanel = obj;
+        this.bottomBox.model = obj;
-        this.targetTab = "panel";
+        this.bottomBox.targetTab = "panel";
       },
       // 全屏
       fullScreen() {
@@ -318,9 +332,9 @@
         this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
         this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
         this.$set(this.searchLabel, "stat", 1);
-        this.loading = true;
+        this.tools.loading = true;
         this.$get('model', this.searchLabel).then(response => {
-          this.loading = false;
+          this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
@@ -401,31 +415,32 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     },
     watch: {
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
     }
   }
 </script>
+`

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

@@ -34,11 +34,12 @@
       </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="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search">
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
+              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
             </div>
             <button type="button" @click="add" :title="$t('overall.createPrometheusServer')"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
@@ -47,10 +48,10 @@
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
-        <el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
+        <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
-                  v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
+                  v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
                   @sort-change="tableDataSort">
-          <el-table-column :resizable="false" v-for="(item, index) in tablelable"
+          <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
                            v-if="item.show"
                            :width="item.width"
                            :key="`col-${index}`"
@@ -89,25 +90,28 @@
               </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>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab.sync="targetTab" :detail="promDetail"
+      <transition name="el-zoom-in-bottom">
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.promServer" :is-full-screen="bottomBox.isFullScreen" :from="'promServer'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.promDetail"
+                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      </transition>
     </div>
     </left-menu>
     <transition name="right-box">
       <prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
     </transition>
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
-      :dropCol="dropCol"
+      :dropCol="tools.dropCol"
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
@@ -125,33 +129,38 @@
     },
     data() {
       return {
-        //底部上滑框相关
+        //侧滑
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        rightBox: {
-        showSubList: false, //是否展示二级列表
+          show: false,
-        targetTab: '', //展示二级列表中的哪个页签
+        },
-        showElementSet: false, //控制自定义列的弹框
+        /*二级页面相关*/
-        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        bottomBox: {
-        mainResizeShow: true, //dom高度改变时部分内容是否展示
+          promDetail: {},
+          promServer: {},
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
           subResizeShow: true,
-        isFullScreen: false,
+          isFullScreen: false, //全屏状态
-        promDetail: [],
+          showSubList: false, //是否显示二级列表
-        //底部上滑框相关end
+          targetTab: '', //显示二级列表中的哪个页签
-
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
 
         tableId: 'promTable', //需要分页的table的id，用于记录每页数量
-        showTopBtn: false,
         rightBox: { //弹出框相关
           show: false,
         },
-        loading: false,
+        promServer: {},
-        promServer: {
-          id: '',
-          host: '',
-          port: 9090,
-          idc: {id: '', name: '', location: ''}
-        },
         blankPromServer: {
           id: '',
           host: '',
@@ -186,7 +195,7 @@
             prop: 'type',
             show: true,
           }, {
-            label: this.$t('asset.createAssetTab.state'),
+            label: this.$t('asset.state'),
             prop: 'status',
             show: true
           }, {
@@ -200,8 +209,6 @@
             width: 120
           }
         ],
-        tablelable: [],
-        dropCol: [],
         tableData: [],
         dcData: [],
         searchMsg: { //给搜索框子组件传递的信息
@@ -263,15 +270,15 @@
         detail.push({label: "Host", value: obj.host});
         detail.push({label: "Port", value: obj.port});
         let type = "";
-        for (let i = 0; i < this.$CONSTANTS.promServer.typeOption.length; i++) {
+        for (let i = 0; i < this.$CONSTANTS.promServer.typeData.length; i++) {
-          if (obj.key == this.typeData[i].type) {
+          if (obj.value == this.typeData[i].type) {
-            type = this.typeData[i].value;
+            type = this.typeData[i].label;
             break;
           }
         }
         detail.push({label: this.$t('config.promServer.type'), value: type});
         detail.push({
-          label: this.$t('asset.createAssetTab.state'),
+          label: this.$t('asset.state'),
           value: obj.status,
           type: 'status',
           msg: this.$t('asset.assetStatPre')+(obj.checkTime ? obj.checkTime : this.$t('asset.assetStatDown'))
@@ -279,13 +286,14 @@
         return detail;
       },
       elementsetShow(s, e) {
+        this.tools.showElementSet = true;
         var eventfixed = {
           shezhi: 0,
           screen: 0
         };
         eventfixed[s] = 1;
         e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setHeaderTable', this.tools.tablelable);
         this.$store.commit('setEventfixed', eventfixed);
         const h = document.documentElement.clientHeight;
         const w = document.documentElement.clientWidth;
@@ -306,7 +314,7 @@
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       edit(u) {
         this.promServer = JSON.parse(JSON.stringify(u));
@@ -330,9 +338,9 @@
         });
       },
       detail(u) {
-        this.promServer = JSON.parse(JSON.stringify(u));
+        this.bottomBox.promServer = JSON.parse(JSON.stringify(u));
-        this.targetTab = "detail";
+        this.bottomBox.targetTab = "detail";
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
       add() {
         this.promServer = this.newPromServer();
@@ -468,35 +476,35 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.bottomBox.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.bottomBox.showTopBtn = false;
             }
           });
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
     },
 
     watch: {
-      promServer: {
+      'bottomBox.promServer': {
         deep: true,
         handler(n) {
-          this.promDetail = this.convertToDetail(n);
+          this.bottomBox.promDetail = this.convertToDetail(n);
         }
       },
-      showSubList(n) {
+      'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       }

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

@@ -1,4 +1,3 @@
-
 <style scoped>
   .el-row {
     margin-bottom: 20px;
@@ -54,14 +53,13 @@
   }
 </style>
 <template key="chartBox">
-  <div v-clickoutside="clickos">
+  <div v-clickoutside="clickOutside">
     <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
 
-    <transition name="right-box">
+    <div class="right-box right-box-add-chart z-top right-box-chart">
-      <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
-          <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+        <button id="chart-box-delete" type="button" v-if="chart.id" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
           <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
           <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
@@ -245,7 +243,6 @@
         </button>
       </div>
     </div>
-    </transition>
     <!--preview -->
     <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
   </div>
@@ -275,10 +272,7 @@
     mixins: [rz],
     data() {
       return {
-        rightBox: {
+        rightBox: {title: ""},
-          show: false,
-          title: this.$t('dashboard.panel.createChartTitle'),
-        },
         statisticsList:[
           {
             id:"min",
@@ -408,7 +402,6 @@
       'promql-input': promqlInput,
     },
     mounted() {
-      this.rightBox.show = true;
       this.isUrl = false;
       this.isSingleStat = false;
       this.$nextTick(() => {
@@ -419,7 +412,7 @@
       });
     },
     methods: {
-      clickos() {
+      clickOutside() {
         this.esc();
       },
       toAddPanel() {
@@ -551,10 +544,7 @@
 
       /*关闭弹框*/
       esc() {
-        this.rightBox.show = false;
-        setTimeout(() => {
         this.$emit("close");
-        }, 200);
       },
 
       /*metric部分相关方法--begin*/

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

@@ -193,7 +193,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
             </div>
 
         </div>
+        <transition name="right-box">
           <chart-box v-if="rightBox.show" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
+        </transition>
         <element-set
           :allowed-all="true"
           v-clickoutside="elementsetHide"

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

@@ -63,10 +63,10 @@
     <!--endpoint-->
     <div slot="content-right" class="slot-content" v-show="pageType ==  'endpoint'">
       <!-- 主列表 -->
-      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <div class="main-modal"></div>
-          <!--<div class="pagination-top"></div>-->
+        <div class="top-tools" v-show="bottomBox.mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
             <div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
             <export-excel
               export-file-name="endpoint"
@@ -91,15 +91,15 @@
           class="nz-table endpoint-table"
           :height="mainTableHeight"
           v-scrollBar:el-table="'large'"
-          v-show="mainResizeShow"
+          v-show="bottomBox.mainResizeShow"
           ref="endpointTable"
-          v-loading="loading"
+          v-loading="tools.loading"
           style="width: 100%;"
           @sort-change="tableDataSort"
         >
           <el-table-column
             :resizable="false"
-            v-for="(item, index) in tablelable"
+            v-for="(item, index) in tools.tablelable"
             v-if="item.show"
             :width="item.width"
             :key="`col-${index}`"
@@ -147,36 +147,36 @@
               </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>
+              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.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">
+        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         </div>
       </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen"
+      <transition name="el-zoom-in-bottom">
-                  :from="'endpoint'" :targetTab.sync="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="currentEndpoint" :asset-detail="bottomBox.assetDetail"
+                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      </transition>
     </div>
     <div slot="content-right" class="slot-content" v-show="pageType == 'project'">
       <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
     </div>
     </left-menu>
-
     <element-set
+      v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
       :table-title="endpointTableTitle"
-      :dropCol="dropCol"
+      :drop-col="tools.dropCol"
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
 
-    <module-box :currentProject="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
+    <module-box :current-project="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
     <edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
-    <add-endpoint-box :currentProject="endpointEditInfos.project" :currentModule="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
+    <add-endpoint-box :current-project="endpointEditInfos.project" :current-module="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-    <!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
-               ref="assetEditUnit"></asset-box>-->
   </div>
 </template>
 
@@ -187,7 +187,6 @@
   import bus from '../../../libs/bus'
   import panelTab from '../../common/bottomBox/tabs/panelTab'
 
-  var vm;
   export default {
     name: "project2",
     components: {
@@ -196,28 +195,41 @@
       'panel-tab': panelTab
     },
     data() {
-      vm = this;
       return {
-        loading: false,
+        /*二级页面相关*/
-        ready: false,
+        bottomBox: {
-        assetDetail: {}, //asset详情
+          endpoint: {}, //asset详情
           endpointDetail: [],
-        targetTab: '',
-        mainTableHeight: this.$tableHeight.normal, //主列表table高度
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
-        isFullScreen: false, //是否是全屏，用来控制拖动条是否展示
-        tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
           mainResizeShow: true, //dom高度改变时部分内容是否展示
           subResizeShow: true,
-        mainListHeight: '', //主列表dom的高度
+          isFullScreen: false, //是否是全屏，用来控制拖动条是否展示,
           showSubList: false,
+          targetTab: '',
+        },
+        
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        ready: false,
+
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showElementSet: false, //自定义列弹框是否显示
+          showTopBtn: false, //显示To top按钮
+          tablelable: [], //从缓存中加载的table header
+          dropCol: [], //自定义列工具的数据
+        },
+        
+        
+        tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
+
         endpointEditInfos:{
           project:null,
           module:null,
         },
         userData: [],
-        showTopBtn: false, //主列表top按钮
+
-        tableHover: false, //控制滚动条和top按钮同时出现
         editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
         endpointTableTitle: [
           {
@@ -272,9 +284,8 @@
           pageSize: 50,
           total:0
         },
-        curEndpoint: {},
+        currentEndpoint: {},
-        tablelable: [],
+
-        dropCol: [],
         currentProjectTitle:'',
         moduleList: [],
         projectList: [],
@@ -299,21 +310,22 @@
             disabled: false
           }],
         },
-        /*viewAssetState:false,*/
-        selectedEndpoints:[],//选中的metric{label='value'}
       }
     },
     methods: {
       // 全屏
       fullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.fullScreen(vm);
       },
       // 退出全屏
       exitFullScreen() {
+        let vm = this;
         this.$bottomBoxWindow.exitFullScreen(vm);
       },
       // 鼠标拖动二级列表
       listResize(e) {
+        let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
       },
       elementsetShow(s, e) {
@@ -323,7 +335,7 @@
         };
         eventfixed[s] = 1;
         e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setHeaderTable', this.tools.tablelable);
         this.$store.commit('setEventfixed', eventfixed);
         const h = document.documentElement.clientHeight;
         const w = document.documentElement.clientWidth;
@@ -339,12 +351,12 @@
       },
       elementsetHide() {
         //悬浮点击空白隐藏
-        this.$refs.elementset.elementsetHide();
+        this.tools.showElementSet = false;
       },
       tablelabelEmit(data) {
         //获取子组件传过来的参数
         this.$store.commit('setHeaderTable', data);
-        this.tablelable = data;
+        this.tools.tablelable = data;
       },
       getEndpointTableData() {
         if(this.currentModule&&this.currentModule.id){
@@ -352,9 +364,9 @@
           this.endpointSearchLabel.moduleId = this.currentModule.id;
           this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
           this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
-          this.loading = true;
+          this.tools.loading = true;
           this.$get('endpoint', this.endpointSearchLabel).then(response => {
-            this.loading = false;
+            this.tools.loading = false;
             if (response.code === 200) {
               for (let i = 0; i < response.data.list.length; i++) {
                 try {
@@ -501,8 +513,7 @@
         this.currentModule = module;
         this.endpointSearchLabel = {moduleId: ''};
         this.$refs.projectSearch.clearSearch();
-        this.showSubList = false;
+        this.bottomBox.showSubList = false;
-        this.selectedEndpoints=[];
         this.currentProject = {};
       },
 
@@ -528,9 +539,9 @@
 
       //查看endpoint详情
       detail(endpoint) {
-        this.curEndpoint = Object.assign({}, endpoint);
+        this.currentEndpoint = Object.assign({}, endpoint);
-        this.targetTab = "panel";
+        this.bottomBox.targetTab = "panel";
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
       initSnmpParam(module) {
         this.$set(module, 'walk', []);
@@ -649,17 +660,17 @@
         return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
       },
       viewAsset(endpoint) {
-        this.curEndpoint = Object.assign({}, endpoint);
+        this.currentEndpoint = Object.assign({}, endpoint);
-        this.targetTab = 'assetDetail';
+        this.bottomBox.targetTab = 'assetDetail';
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
         /*this.viewAssetState=true;
         this.$refs.assetEditUnit.getAssetData(id);
         this.$refs.assetEditUnit.tabView=true;*/
       },
       showEndpoint(endpoint) {
-        this.curEndpoint = Object.assign({}, endpoint);
+        this.currentEndpoint = Object.assign({}, endpoint);
-        this.targetTab = 'endpointQuery';
+        this.bottomBox.targetTab = 'endpointQuery';
-        this.showSubList = true;
+        this.bottomBox.showSubList = true;
       },
       getStateContent:function(row){
         if(row){
@@ -712,7 +723,7 @@
       },
       assetConvertToDetail(obj) {
         let detail = JSON.parse(JSON.stringify(obj));
-        detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
+        detail.state = obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock');
         detail.assetType = obj.model.type.value;
         detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
         detail.dataCenter = obj.idc ? obj.idc.name : "";
@@ -728,47 +739,47 @@
           detail.account = account.user;
           let loginType = "";
           if (account.authType == 1) {
-            loginType = this.$t('asset.createAssetTab.password');
+            loginType = this.$t('asset.password');
           } else if (account.authType == 2) {
-            loginType = this.$t('asset.createAssetTab.ssh');
+            loginType = this.$t('asset.ssh');
           }
           detail.loginType = loginType;
           detail.port = account.port;
         }
-        /*detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
+        /*detail.push({label: this.$t("asset.sn"), value: obj.sn});
-        detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
+        detail.push({label: this.$t("asset.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.state"), value: obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.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.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.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.assetType"), value: obj.model.type.value});
-        detail.push({label: this.$t("asset.createAssetTab.purchaseDate"), value: obj.purchaseDate});
+        detail.push({label: this.$t("asset.purchaseDate"), value: obj.purchaseDate});
-        detail.push({label: this.$t("asset.createAssetTab.dcName"), value: obj.idc ? obj.idc.name : ""});
+        detail.push({label: this.$t("asset.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.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.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.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.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.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.protocol"), value: 'SSH'});
-            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+            detail.push({label: this.$t("asset.account"), value: account.user});
             let loginType = "";
             if (account.authType == 1) {
-              loginType = this.$t('asset.createAssetTab.password');
+              loginType = this.$t('asset.password');
             } else if (account.authType == 2) {
-              loginType = this.$t('asset.createAssetTab.ssh');
+              loginType = this.$t('asset.ssh');
             }
-            detail.push({label: this.$t("asset.createAssetTab.loginType"), value: loginType});
+            detail.push({label: this.$t("asset.loginType"), value: loginType});
           } else if (account.protocol == 'TELNET') {
-            detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'TELNET'});
+            detail.push({label: this.$t("asset.protocol"), value: 'TELNET'});
-            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+            detail.push({label: this.$t("asset.account"), value: account.user});
           }
-          detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
+          detail.push({label: this.$t("asset.port"), value: account.port});
         }*/
         return detail;
       },
@@ -842,17 +853,17 @@
         if (el._ps_) {
           el.addEventListener("ps-scroll-y", () => {
             if (el._ps_.scrollbarYTop > 50) {
-              this.showTopBtn = true;
+              this.tools.showTopBtn = true;
             } else {
-              this.showTopBtn = false;
+              this.tools.showTopBtn = false;
             }
           });
 
           el.addEventListener("mouseenter", () => {
-            this.tableHover = true;
+            this.tools.tableHover = true;
           });
           el.addEventListener("mouseleave", () => {
-            this.tableHover = false;
+            this.tools.tableHover = false;
           });
         }
       });
@@ -862,10 +873,10 @@
         _this.$refs.leftScrollbar.update();
       }
 
-      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
-      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
 
@@ -925,16 +936,17 @@
         // this.getModuleList(this.currentProject.id);
         this.getAllModuleList();
       },
-      showSubList(n) {
+      "bottomBox.showSubList": function(n) {
+        let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
-      curEndpoint: {
+      currentEndpoint: {
         deep: true,
         handler(n) {
-          this.endpointDetail = this.convertToDetail(n);
+          this.bottomBox.endpointDetail = this.convertToDetail(n);
           this.$get('asset', {id: n.assetId}).then(response => {
             if (response.code === 200) {
-              this.assetDetail = this.assetConvertToDetail(response.data.list[0]);
+              this.bottomBox.assetDetail = this.assetConvertToDetail(response.data.list[0]);
             }
           });
         }

nezha-fronted/src/main.js

@@ -32,8 +32,6 @@ import projectBox from './components/common/rightBox/projectBox'; //project弹
 import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
 import editEndpointBox from './components/common/rightBox/editEndpointBox'; //endpoint弹框组件
 import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
-import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
-import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
 import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件
 import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
 import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
@@ -56,8 +54,6 @@ Vue.component("module-box", moduleBox);
 Vue.component("edit-endpoint-box", editEndpointBox);
 Vue.component("add-endpoint-box", addEndpointBox);
 Vue.component("asset-box", assetBox);
-Vue.component("assetAddUnit", assetAddUnit);
-Vue.component("assetEditUnit", assetEditUnit);
 Vue.component("alert-config-box", alertConfigBox);
 Vue.component("idc-config-box", dcConfigBox);
 Vue.component("panel-box", panelBox);