feat: dc-detail转为上滑弹框

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

@@ -386,13 +386,20 @@ li{
 .sub-list-tab {
   width: 100px;
   font-size: 14px;
-  color: $global-text-color-active;
+  color: #909399;
-  background-color: white;
-  border-top: solid 2px #ee9d3f;
   height: calc(100% - 2px);
   padding-left: 20px;
   line-height: 27px;
   display: inline-block;
+  cursor: pointer;
+}
+.sub-list-tab:hover {
+  color: $global-text-color-active;
+}
+.sub-list-tab-active {
+  color: $global-text-color-active;
+  background-color: white;
+  border-top: solid 2px #ee9d3f;
 }
 .sub-list-tab-txt {
   font-size: 14px;
@@ -516,6 +523,7 @@ li{
   display: flex;
   align-content: center;
   height: 26px;
+  margin-right: 76px;
 }
 .top-tool-main-right {
   position: absolute;
@@ -605,15 +613,16 @@ li{
   display: flex;
   align-items: center;
   margin-left: 14px;
+  position: absolute;
+  right: 0;
+  top: 8px;
+  z-index: 1;
 }
 .window-control-btn {
   cursor: pointer;
   width: 29px;
   text-align: center;
 }
-.window-control-btn:last-of-type {
-  margin-right: 4px;
-}
 .window-control-btn>i {
   color: #909399;
   font-size: 17px;

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

@@ -0,0 +1,87 @@
+<template>
+  <span>
+    <!-- 副列表 endpoint query-->
+    <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
+    <div class="sub-list" v-if="showSubList">
+      <!--窗口大小控制-->
+      <div class="sub-list-window-control">
+        <!--半屏-->
+        <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
+        <!--全屏-->
+        <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
+        <!--关闭-->
+        <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
+      </div>
+
+      <!------TAB区------>
+      <!--通用详情-->
+      <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail"
+                         v-if="targetTab == 'detail'"
+                         @changeTab="changeTab"
+      ></common-detail-tab>
+      <!--机柜-->
+      <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
+    </div>
+  </span>
+</template>
+
+<script>
+  import commonDetailTab from "./tabs/commonDetailTab"
+  import cabinetTab from "./tabs/cabinetTab";
+
+  export default {
+    name: "cabinetBox",
+    components:{
+      'common-detail-tab': commonDetailTab,
+      'cabinet-tab': cabinetTab,
+    },
+    props: {
+      isFullScreen: false, //是否全屏
+      showSubList: Boolean, //是否显示
+      subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
+      obj: Object, //关联的实体对象
+      from: String, //来自哪个页面
+      targetTab: String, //展示哪个页签
+      detail: Array, //对象详情内容
+    },
+    data() {
+      return {}
+    },
+    methods: {
+      exitFullScreen() {
+        this.$emit("exitFullScreen");
+      },
+      fullScreen() {
+        this.$emit("fullScreen");
+      },
+      closeSubList() {
+        this.$emit("closeSubList");
+      },
+      listResize(e) {
+        this.$emit('listResize', e);
+      },
+      changeTab(tab) {
+        this.targetTab = tab;
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  /*重写el-loading样式*/
+  .nz-table .el-loading-spinner .circular{
+    width: 42px;
+    height: 42px;
+    animation: loading-rotate 2s linear infinite;
+    display: none;
+  }
+  .nz-table .el-loading-spinner{
+    background: url(../../../assets/img/loading.gif) no-repeat;
+    background-size: 48px 48px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 50%;
+    left: 48.5%;
+  }
+</style>

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

@@ -3,9 +3,18 @@
     <!-- 副列表 endpoint query-->
     <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
     <div class="sub-list" v-if="showSubList">
+      <div class="sub-list-window-control">
+        <!--半屏-->
+        <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
+        <!--全屏-->
+        <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
+        <!--关闭-->
+        <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
+      </div>
+      <template>
         <div class="sub-top-tools" v-show="subResizeShow">
           <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
-          <div class="sub-list-tab">{{$t("overall.query")}}</div>
+            <div class="sub-list-tab">{{$t("dashboard.overview.dataCenter.cabinet")}}</div>
             <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
           </div>
           <div class="top-tool-right">
@@ -16,20 +25,13 @@
                   class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
-          <div class="sub-list-window-control">
-            <!--半屏-->
-            <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
-            <!--全屏-->
-            <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
-            <!--关闭-->
-            <div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
-          </div>
           </div>
         </div>
         <el-table
           class="nz-table"
           :data="tableData"
           border
+          v-show="subResizeShow"
           v-loading="loading"
           ref="cabTable"
           v-scrollBar:el-table
@@ -76,7 +78,6 @@
                     <span class="dc-asset-state dc-asset-state-in">{{scope.row.alertStat.low}}</span>
                   </div>
                 </el-popover>
-
               </template >
               <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
               <template v-else>-</template>
@@ -85,12 +86,14 @@
         </el-table>
         <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
         <button class="to-top" v-show="showTopBtn && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+      </template>
     </div>
   </span>
 </template>
 
 <script>
   import cabinetBox from "../../common/rightBox/cabinetBox";
+
   export default {
     name: "cabinetBox",
     components:{

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

@@ -0,0 +1,259 @@
+<template>
+  <span>
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
+        <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>
+        <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
+      </div>
+      <div class="top-tool-right">
+        <div class="top-tool-search">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+        </div>
+        <button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
+                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+      </div>
+    </div>
+    <el-table
+      class="nz-table"
+      :data="tableData"
+      border
+      v-loading="loading"
+      ref="cabTable"
+      v-scrollBar:el-table
+      :height="$tableHeight.noPagination"
+      style="width: 100%;">
+      <el-table-column
+        :resizable="false"
+        v-for="(item, index) in tableTitle"
+        v-if="item.show"
+        :width="item.width"
+        :key="`col-${index}`"
+        :label="item.label"
+      >
+        <template slot-scope="scope" :column="item">
+          <div v-if="item.prop == 'option'" class="content-right-options">
+            <span :title="$t('overall.edit')" @click="editCabinet(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+            <span :title="$t('overall.delete')" @click="delCabinet(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+          </div>
+          <template v-else-if="item.prop == 'assetStat'">
+            <el-popover
+              placement="top-start"
+              offset="-100"
+              trigger="hover"
+              :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
+              <div slot="reference" class="dc-asset-states">
+                <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
+                <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
+                <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
+              </div>
+            </el-popover>
+
+          </template >
+          <template v-else-if="item.prop == 'alertStat'">
+            <el-popover
+              placement="top-start"
+              offset="-128"
+              trigger="hover"
+              :content="$t('overall.result.total') + '：' + scope.row.alertStat.total + '，' + $t('alert.config.high') + '：' + scope.row.alertStat.high + '，' + $t('alert.config.medium') + '：' + scope.row.alertStat.medium+ '，' + $t('alert.config.low') + '：' + scope.row.alertStat.low">
+              <div slot="reference" class="dc-asset-states">
+                <span class="dc-asset-state dc-asset-state-total">{{scope.row.alertStat.total}}</span>
+                <span class="dc-asset-state dc-asset-state-high">{{scope.row.alertStat.high}}</span>
+                <span class="dc-asset-state dc-asset-state-out">{{scope.row.alertStat.medium}}</span>
+                <span class="dc-asset-state dc-asset-state-in">{{scope.row.alertStat.low}}</span>
+              </div>
+            </el-popover>
+          </template >
+          <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+          <template v-else>-</template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
+    <button class="to-top" v-show="showTopBtn" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+  </span>
+</template>
+
+<script>
+  import cabinetBox from "../../rightBox/cabinetBox";
+  export default {
+    name: "cabinetTab",
+    components: {
+      "cabinet-box": cabinetBox
+    },
+    props: {
+      obj: Object, //关联的实体对象
+    },
+    data() {
+      return {
+        currentCabinet: {
+          id:'',
+          idcId:'',
+          name:'',
+          remark:'',
+          seq:'',
+          uSize:0
+        },
+        showTopBtn: false, //top按钮是否显示
+        loading: false,
+        currentDc: {},
+        tableTitle: [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          },
+          {
+            label:this.$t('overall.name'),
+            prop:'name',
+            show:true
+          },
+          {
+            label:this.$t('asset.createAssetTab.uSize'),
+            prop:'uSize',
+            show:true
+          },
+          {
+            label:this.$t('config.dc.assets'),
+            prop:'assetStat',
+            show:true
+          },
+          {
+            label:this.$t('alert.alert'),
+            prop:'alertStat',
+            show:true
+          },
+          {
+            label:this.$t('config.dc.remark'),
+            prop:'remark',
+            show:true
+          },
+          {
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true,
+            width: 120
+          }
+        ],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [
+            {
+              id: 11,
+              name: this.$t('overall.name'),
+              type: 'input',
+              label: 'name',
+              disabled: false
+            },
+            {
+              id:12,
+              name:this.$t('asset.createAssetTab.uSize'),
+              label:'uSize',
+              disabled: false
+            },
+            {
+              id:13,
+              name:this.$t('config.dc.remark'),
+              label:'remark',
+              disabled: false
+            }
+          ],
+        },
+        searchLabel: { //搜索参数
+        },
+        tableData: [],
+      }
+    },
+    methods: {
+      // 切换tab
+      changeTab(tab) {
+        this.$emit('changeTab', tab);
+      },
+      toAddCabinet:function(){
+        this.$refs.cabinetEditBox.show(true,true);
+        this.$refs.cabinetEditBox.reset();
+      },
+      editCabinet(cabinet) {
+        this.currentCabinet = JSON.parse(JSON.stringify(cabinet));
+        console.info(this.$refs.cabinetEditBox)
+        this.$refs.cabinetEditBox.show(true, true);
+      },
+      getCabinetList() {
+        this.tableData = [];
+        this.loading = true;
+        this.$set(this.searchLabel, "pageNo", 1);
+        this.$set(this.searchLabel, "pageSize", -1);
+        this.$get("/cabinet", this.searchLabel).then(response => {
+          if (response.code == 200) {
+            this.loading = false;
+            this.tableData = response.data.list;
+          }
+        });
+      },
+      search: function (searchObj) {
+        this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        this.getCabinetList();
+      },
+      closeSubList() {
+        this.$emit("closeSubList");
+        this.tableData = [];
+      },
+      delCabinet:function(cabinet){
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
+            if(response.code ==  200){
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.getCabinetList();
+            }else{
+              this.$message.error(response.msg);
+            }
+          })
+        })
+      },
+    },
+    watch: {
+      obj: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          if (n) {
+            this.currentDc = JSON.parse(JSON.stringify(n));
+            this.searchLabel = {idcId: this.currentDc.id};
+            this.getCabinetList();
+          }
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 50) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <span>
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs margin-l-20">
+        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div>
+        <template v-if="from == 'dc'">
+          <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
+          <span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
+        </template>
+      </div>
+    </div>
+    <div style="margin-top: 10px;">
+      <div style="padding: 5px; color: #606266;" v-for="item in detail">
+        {{item.label}}: {{item.value}}
+      </div>
+    </div>
+  </span>
+</template>
+
+<script>
+  export default {
+    name: "commonDetailTab",
+    props: {
+      obj: Object,
+      from: String,
+      detail: Array
+    },
+    methods: {
+      changeTab(tab) {
+        this.$emit("changeTab", tab);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -23,7 +23,6 @@ const en = {
     search: 'Search', //'搜索'
     add: 'Create', //"新增"
     option: 'Operation', //"操作"
-    clearAll: 'Clear All', //"清空"
     clear: 'Clear', //"清除"
     name: 'Name', //'名称'
     cover: 'Override', //'覆盖'
@@ -32,6 +31,7 @@ const en = {
     ok: 'Ok',//OK
     all: 'All',//'全选'
     other: 'Others',//"其他"
+    detail: 'Detail', //详情
     query: 'Query', //查询
     back: 'Back', //返回
     unavailable: 'Unavailable',
@@ -478,6 +478,7 @@ const en = {
       cabinetNum: "Cabinet number",
       assets: "Assets",
       remark:'Remark',
+      cabinets: "Cabinets"
     },
     model: {
       model: 'Model',

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

@@ -138,8 +138,8 @@
           </div>
           <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
         </div>
-        <cabinet-bottom-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen"
+        <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab="targetTab" :detail="dcDetail"
-                     @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></cabinet-bottom-box>
+                     @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </div>
       <!--dc table end-->
       <element-set
@@ -157,6 +157,7 @@
     name: "dc",
     data() {
       return {
+        targetTab: '', //展示二级列表中的哪个页签
         showElementSet: false, //控制自定义列的弹框
         inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
         mainResizeShow: true, //dom高度改变时部分内容是否展示
@@ -178,6 +179,7 @@
           }
         },
         cabinetDc: {},
+        dcDetail: [], //dc的详情信息，包含标题
         pageObj: {
           pageNo: 1,
           pageSize: 20,
@@ -387,13 +389,33 @@
         this.currentDc = tempDc;
         this.$refs.dcBox.show(true, true);
       },
-      detail(u) {
+      detail(obj) {
-        let tempDc = JSON.parse(JSON.stringify(u));
+        let tempDc = JSON.parse(JSON.stringify(obj));
         if (!tempDc.area) {
           this.$set(tempDc, 'area', {id: '', name: ''});
         }
-        this.currentDc = tempDc;
+        //this.currentDc = tempDc;
-        this.$refs.dcBox.show(true, false);
+        //this.$refs.dcBox.show(true, false);
+        this.cabinetDc = tempDc;
+        this.targetTab = "detail";
+        this.showSubList = true;
+      },
+      convertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("overall.name"), value: obj.name});
+        detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.location});
+        detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.tel});
+        let principal = '';
+        for (let i = 0; i < this.userData.length; i++) {
+          if (this.userData[i].userId == obj.principal) {
+            principal = this.userData[i].username;
+            break;
+          }
+        }
+        detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
+        detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
+        console.info(detail)
+        return detail;
       },
       toAdd() {
         this.currentDc = {
@@ -464,6 +486,7 @@
       showCabinet:function(dc){
         //this.currentShowDc=dc;
         //this.tabShow=2;
+        this.targetTab = 'cabinet';
         this.cabinetDc = JSON.parse(JSON.stringify(dc));
         this.showSubList = true;
         //this.cabSearchLabel={idcId:this.currentShowDc.id};
@@ -471,56 +494,14 @@
         /*let temp=this;
         setTimeout(function(){temp.$refs.cabSearchInput.clear_input();},100)*/
       },
-      /*getCabinetDatas:function(){
-        this.$get('/cabinet',this.cabSearchLabel).then(response=>{
-          if(response.code==200 && response.msg=='success'){
-            this.cabinetDatas=response.data.list;
-          }
-        })
-      },
-      editCabinet:function(cabinet){
-        this.curCabinet=cabinet;
-        this.$refs.cabinetEditBox.show(true,true);
-      },
-      toAddCabinet:function(){
-        this.$refs.cabinetEditBox.show(true,true);
-        this.$refs.cabinetEditBox.reset();
-      },*/
-      /*delCabinet:function(cabinet){
-        this.$confirm(this.$t("tip.confirmDelete"), {
-          confirmButtonText: this.$t("tip.yes"),
-          cancelButtonText: this.$t("tip.no"),
-          type: 'warning'
-        }).then(() => {
-          this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
-            if(response.code ==  200){
-              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getCabinetDatas();
-            }else{
-              this.$message.error(response.msg);
-            }
-          })
-        })
-      },*/
-      /*back:function(){
-        this.tabShow=1;
-        this.getTableData();
-        let temp=this;
-        setTimeout(function(){temp.$refs.searchInput.clear_input();},100)
-      },
-      cabSearch:function(obj){
-        this.cabSearchLabel={idcId:this.currentShowDc.id};
-        if(obj){
-          for(let item in obj){
-            if(obj[item]){
-              this.$set(this.cabSearchLabel,item,obj[item]);
-            }
-          }
-        }
-        this.getCabinetDatas();
-      }*/
     },
     watch: {
+      cabinetDc: {
+        deep: true,
+        handler(n) {
+          this.dcDetail = this.convertToDetail(n);
+        }
+      },
       showSubList(n) {
         this.inTransform = n;
         if (!n) {

nezha-fronted/src/main.js

@@ -36,7 +36,8 @@ import dcBox from "./components/common/rightBox/dcBox"; //dc弹框
 import modelBox from "./components/common/rightBox/modelBox"; //model弹框
 import selectArea from "./components/common/popBox/selectArea"; //dc弹框
 import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框
-import cabinetBottomBox from "./components/common/bottomBox/cabinetBottomBox"; //机柜上滑框
+import dcBottomBox from "./components/common/bottomBox/dcBottomBox"; //机柜上滑框
+import bottomBox from "./components/common/bottomBox/bottomBox"; //机柜上滑框
 import PerfectScrollbar from "perfect-scrollbar";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
@@ -61,8 +62,9 @@ Vue.component("dc-box", dcBox);
 Vue.component("model-box", modelBox);
 Vue.component("select-area", selectArea);
 Vue.component('loading',loading);
-Vue.component('alert-message-box',alertMessageBox);
+Vue.component('alert-message-box', alertMessageBox);
-Vue.component('cabinet-bottom-box',cabinetBottomBox);
+Vue.component('dc-bottom-box', dcBottomBox);
+Vue.component('bottom-box', bottomBox);
 Vue.component('mib-box',mibBox);
 
 Vue.prototype.$axios = axios;