From 15d61424539e962705c15eaa2b6d583e1ca9ab68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <523037378@qq.com>
Date: Wed, 19 Feb 2020 16:33:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20asset=E4=BE=A7=E6=BB=91=E6=A1=86?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.将新增、编辑侧滑并为同一个代码文件
---
 .../src/components/common/header.vue          |    4 +-
 .../components/common/rightBox/assetBox.vue   | 1458 +++++++++++++++++
 .../src/components/page/asset/asset.vue       |   14 +-
 nezha-fronted/src/main.js                     |    2 +
 4 files changed, 1470 insertions(+), 8 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/assetBox.vue

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 2fec50d23..a08d2a895 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -114,8 +114,8 @@
     <panel-box :panel="editPanel" @reload="panelListReload" @reloadForDel="" ref="panelBox"></panel-box>
     <project-box :project="editProject" ref="projectBox"></project-box>
     <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
-                      ref="addEndpointBox"></add-endpoint-box>
+    <asset-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
+                      ref="addEndpointBox"></asset-box>
     <asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
                     @sendStateData="closeAsset"></asset-add-unit>
     <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
new file mode 100644
index 000000000..261c85f97
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -0,0 +1,1458 @@
+<template>
+  <transition name="right-box-580">
+    <div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit">
+      <!--顶部按钮-->
+      <div class="right-box-top-btns">
+        <button v-if="!tabView && pageObj.id" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del"
+                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>
+        <button v-if="tabView" id="asset-edit-edit" type="button" @click="tabView=false"
+                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>
+
+      <div class="right-box-title">
+        {{tabView == true ? $t('asset.asset') : ''}}
+        {{tabView == false && pageObj.id ? $t('asset.EditAsset') : ''}}
+        {{tabView == false && !pageObj.id ? $t('asset.createAssetTab.title') : ''}}
+      </div>
+
+      <el-scrollbar class="right-box-form-box">
+        <el-form ref="assetEditForm" :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
+          <el-form-item :label="$t('asset.createAssetTab.sn')" prop="sn">
+            <el-input size="mini" v-if="!tabView" v-model="assetData.sn"/>
+            <el-popover trigger="hover" placement="bottom-start" :content="assetData.sn" >
+              <span slot="reference" class="sidebar-info-item-txt" v-if="tabView">{{assetData.sn}}</span>
+            </el-popover>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.host')" prop="host">
+            <el-input size="mini" v-if="!tabView" v-model="assetData.host"/>
+            <span v-if="tabView">{{assetData.host}}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.state')">
+            <div v-if="!tabView" class="select-style">
+              <el-select size="mini" v-model="assetData.state" placeholder="">
+                <el-option
+                  :id="'asset-edit-state-op-'+item.value"
+                  v-for="item in assetStateOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <span v-if="tabView">{{assetData.state==1 ? $t('asset.createAssetTab.inStock'): $t('asset.createAssetTab.notInStock')}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.tableTitle.modules')" v-if="tabView">
+            <div v-if="assetViewData.moduleNum > 0" >
+              <module-list-pop :asset-id="obj.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + obj.id">
+                <template v-slot:optionZone>
+                  <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.moduleNum}}</button>
+                </template>
+              </module-list-pop>
+            </div>
+            <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.moduleNum}}</button>
+          </el-form-item>
+          <el-form-item :label="$t('asset.tableTitle.alerts')" v-if="tabView">
+            <button type="button" v-if="assetViewData.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(obj.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{assetViewData.alertNum}}</button>
+            <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{assetViewData.alertNum}}</button>
+          </el-form-item>
+          <div class="asset-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
+          <div class="line-100 asset-line"></div>
+          <!------------------------------------------资产类型---------------------------------------------->
+          <el-form-item :label="$t('asset.createAssetTab.assetType')" class="right-box-form-content" prop="assetType">
+            <el-select popper-class="asset-dropdown" size="mini" v-if="!tabView" v-model="assetType" clearable @visible-change="cancelEdit"
+                       @change="getAllModelOptionData()" class="right-box-row-with-btn">
+              <el-option
+                :id="'asset-edit-type-op-'+item.id"
+                v-for="item in assetTypeOptionData"
+                :key="item.id"
+                :value="item.code"
+                :label="item.value"
+              >
+                <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{ item.value }}</span>
+                <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing(item)">
+                  <el-input type="text" v-model="item.value" size="mini"/>
+                </span>
+                <div class="config-dropdown-label-icons">
+                  <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="delOptionData(item)" :id="'asset-edit-type-op-del-'+item.id">
+                    <i class="el-icon-delete"></i>
+                  </span>
+                  <span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')" :id="'asset-edit-type-op-edit-'+item.id">
+                    <i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
+                    <i class="el-icon-check" v-if="item.isEdit"
+                       @click="editData('sys/dict/update',item)"></i>
+                  </span>
+                </div>
+              </el-option>
+            </el-select>
+            <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+              <el-popover
+                placement="left"
+                trigger="click"
+                v-model="editPopTypeVisible"
+                v-clickoutside="clickOutSide"
+                popper-class="nz-pop2"
+                width="370"
+              >
+                <div class="pop-window-assetType" @click="editQuit()" id="asset-edit-sub-type-quit">
+                  <div class="pop-window-assetType-content">
+                    <!--右上角按钮-->
+                    <div class="pop-top-btns">
+                      <button type="button" @click="editPopoverClose('type')" id="asset-edit-sub-type-esc"  class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
+                        <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
+                        <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
+                      </button>
+                    </div>
+                    <!--标题-->
+                    <div class="pop-title">{{$t('asset.createAssetTab.assetTypeTab.assetType')}}</div>
+                    <!--表单内容-->
+                    <div class="pop-item">
+                      <div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</div>
+                      <el-input class="input-x-mini-26" v-model="assetTypeData.value"/>
+                      <button type="button" @click="addNewData('assetType')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-type-add">
+                        <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+                      </button>
+                    </div>
+                    <div class="pop-item">
+                      <div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.existAssetType')}}</div>
+                      <div class="pop-box pop-box-asset">
+                        <el-scrollbar style="height: 100%;">
+                          <ul style="list-style: none">
+                            <li style="cursor: pointer;"
+                                :id="'asset-edit-sub-type-op-'+index"
+                                v-for="(item,index) in assetTypeOptionData"
+                                @click="clickState(index,item,'type')"
+                                :class="{'pop-box-active': modelCount === index}"
+                                :key="index">
+                              <div class="pop-item-contain">
+                                <span v-if="!item.isEdit">{{ item.value }}</span>
+                                <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
+                                  <el-input class="input-x-mini-24" v-model="item.value"/>
+                                </span>
+                                <div class="pop-item-icons">
+                                  <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-edit-sub-type-op-del-'+index"
+                                    @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i>
+                                  </span>
+                                  <span v-if="!item.isEdit" class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)" :id="'asset-edit-sub-type-op-edit-'+index">
+                                    <i class="nz-icon nz-icon-edit"></i>
+                                  </span>
+                                  <span v-if="item.isEdit"  class="config-dropdown-btn" @click.stop="editData('sys/dict/update',item, 'assetType')" :id="'asset-edit-sub-type-op-save-'+index">
+                                    <i class="el-icon-check"></i>
+                                  </span>
+                                </div>
+                              </div>
+                            </li>
+                          </ul>
+                        </el-scrollbar>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div slot="reference"><i class="el-icon-plus"></i></div>
+              </el-popover>
+            </div>
+            <span v-if="tabView">{{assetViewData.assetType}}</span>
+          </el-form-item>
+          <!------------------------------------------厂商/型号---------------------------------------------->
+          <el-form-item :label="this.$t('asset.createAssetTab.vendor')" class="right-box-form-content" prop="modelId">
+            <template v-if="!tabView">
+              <el-cascader
+                :options="vendorTypeOptionData"
+                :key="isResourceShow"
+                :disabled="this.assetType!=''?false:true"
+                v-model="assetData.modelId"
+                clearable
+                size="mini"
+                placeholder=""
+                class="right-box-row-with-btn"
+              >
+              </el-cascader>
+              <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+                <el-popover
+                  placement="left"
+                  trigger="click"
+                  width="370"
+                  v-model="editPopVendorVisible"
+                  v-clickoutside="clickOutSide"
+                  @hide="resetVendor"
+                  popper-class="nz-pop2"
+                >
+                  <div class="pop-window-assetType" @click="editQuit()" id="asset-edit-sub-vendor-quit">
+                    <div class="pop-window-assetType-content">
+                      <div class="pop-top-btns">
+                        <button type="button" @click="editPopoverClose('vendor')" id="asset-edit-sub-vendor-close" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
+                          <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
+                          <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
+                        </button>
+                      </div>
+                      <!--标题-->
+                      <div class="pop-title">{{$t('asset.createAssetTab.vendorTab.vendor')}}</div>
+                      <!--表单内容-->
+                      <div class="pop-item">
+                        <div class="pop-label">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</div>
+                        <el-input class="input-x-mini-26" v-model="addVendorData.value"/>
+                        <button type="button" @click.stop="addNewData('vendor')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-vendor-add">
+                        <span class="top-tool-btn-txt">
+                           <i class="nz-icon-create-square nz-icon"></i>
+                          {{$t('overall.add')}}</span>
+                        </button>
+                      </div>
+                      <div class="pop-item">
+                        <div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</div>
+                        <div class="pop-box pop-box-asset pop-box-asset2">
+                          <el-scrollbar style="height: 100%;">
+                            <ul style="list-style: none">
+                              <li style="cursor: pointer;"
+                                  :id="'asset-edit-sub-vendor-op-'+index"
+                                  v-for="(item,index) in vendorUlData"
+                                  @click="getLidata(index,item)"
+                                  :class="{'pop-box-active': vendorCount === index}"
+                                  :key="index">
+                                <div class="pop-item-contain">
+                                  <span v-if="!item.isEdit">{{ item.value }}</span>
+                                  <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
+                                    <el-input class="input-x-mini-24" v-model="item.value"/>
+                                  </span>
+                                  <div class="pop-item-icons">
+                                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-edit-sub-vendor-op-del-'+index">
+                                      <i class="el-icon-delete"></i>
+                                    </span>
+                                    <span class="config-dropdown-btn" @click.stop="editVendorOptionData(item,'vendor',index)" :id="'asset-edit-sub-vendor-op-edit-'+index">
+                                      <i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
+                                      <i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)" :id="'asset-edit-sub-vendor-op-save-'+index"></i>
+                                    </span>
+                                  </div>
+                                </div>
+                              </li>
+                            </ul>
+                          </el-scrollbar>
+                        </div>
+                      </div>
+                      <div class="pop-item">
+                        <div class="pop-label">{{$t('asset.createAssetTab.vendorTab.modelName')}}</div>
+                        <el-input class="input-x-mini-26" v-model="addNewModelData.name"/>
+                        <button type="button" @click.stop="addNewData('model')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-model-add">
+                        <span class="top-tool-btn-txt">
+                           <i class="nz-icon-create-square nz-icon"></i>
+                          {{$t('overall.add')}}</span>
+                        </button>
+                      </div>
+                      <div class="pop-item">
+                        <div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existModel')}}</div>
+                        <div class="pop-box pop-box-asset pop-box-asset2">
+                          <el-scrollbar style="height: 100%;">
+                            <ul style="list-style: none">
+                              <li style="cursor: pointer;"
+                                  :id="'asset-edit-sub-model-op-'+index"
+                                  v-for="(item,index) in modelUlData"
+                                  @click=" clickState(index,item,'model') "
+                                  :class="{'pop-box-active': modelCount === index}"
+                                  :key="index">
+                                <div class="pop-item-contain">
+                                  <span v-if="!item.isEdit">{{ item.name }}</span>
+                                  <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
+                                    <el-input class="input-x-mini-24" v-model="item.name"/>
+                                  </span>
+                                  <div class="pop-item-icons">
+                                    <span class="config-dropdown-btn config-dropdown-btn-delete"
+                                          @click.stop="deleteData('model',item.id)" :id="'asset-edit-sub-model-op-del-'+index">
+                                      <i class="el-icon-delete"></i>
+                                    </span>
+                                    <span class="config-dropdown-btn" @click.stop="editOptionData(item,'model',index)" :id="'asset-edit-sub-model-op-edit-'+index">
+                                      <i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
+                                      <i class="el-icon-check" v-if="item.isEdit"
+                                           @click="editData('model',item)" :id="'asset-edit-sub-model-op-save-'+index"></i>
+                                    </span>
+                                  </div>
+                                </div>
+                              </li>
+                            </ul>
+                          </el-scrollbar>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div slot="reference"><i class="el-icon-plus"></i></div>
+                </el-popover>
+              </div>
+            </template>
+            <span v-if="tabView">{{assetViewData.vendor}}   {{assetViewData.model}}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.purchaseDate')">
+            <div class="select-style" v-if="!tabView">
+              <el-date-picker
+                size="mini"
+                v-model="assetData.purchaseDate"
+                value-format="yyyy-MM-dd"
+                type="date"
+                style="width: 100%"
+                placeholder="">
+              </el-date-picker>
+            </div>
+            <span v-if="tabView">{{assetData.purchaseDate}}</span>
+          </el-form-item>
+          <div class="asset-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
+          <div class="line-100 asset-line"></div>
+          <!------------------------------------------IDC---------------------------------------------->
+          <el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
+            <template v-if="!tabView">
+              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
+                <el-option
+                  :id="'asset-edit-idc-op-'+item.id"
+                  v-for="item in IDCOptionData"
+                  :key="item.key"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  <span class="config-dropdown-label-txt">{{ item.name }}</span>
+                  <div class="config-dropdown-label-icons">
+                    <span class="config-dropdown-btn config-dropdown-btn-delete"
+                          @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
+                      class="el-icon-delete"></i></span>
+                    <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
+                      <template v-slot:optionZone>
+                        <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
+                      </template>
+                    </idc-config-box>
+                  </div>
+                </el-option>
+              </el-select>
+              <div class="right-box-row-btn right-box-row-btn-small">
+                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
+              </div>
+            </template>
+            <span v-if="tabView">{{assetViewData.idcName}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.createAssetTab.location')">
+            <span>{{idcSelectedData.location}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.createAssetTab.principal')">
+            <span>{{this.getPrincipalName(idcSelectedData.principal)}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.createAssetTab.tel')">
+            <span>{{idcSelectedData.tel}}</span>
+          </el-form-item>
+          <el-divider></el-divider>
+
+
+          <!------------------------------------------cabinet---------------------------------------------->
+          <el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
+            <template v-if="!tabView">
+              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
+                         :disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
+                         @change="getSingleCabinetData">
+                <el-option
+                  :id="'asset-edit-cabinet-op-'+item.id"
+                  v-for="item in cabinetOptionData"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                  <span class="config-dropdown-label-txt">{{ item.name }}</span>
+                  <div class="config-dropdown-label-icons">
+                    <span class="config-dropdown-btn config-dropdown-btn-delete"
+                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">
+                      <i class="el-icon-delete"></i>
+                    </span>
+                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
+                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>
+                    </cabinet-config-box>
+                  </div>
+                </el-option>
+              </el-select>
+
+              <div class="right-box-row-btn right-box-row-btn-small">
+                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>
+              </div>
+            </template>
+            <span v-if="tabView">{{assetViewData.cabinetName}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.editAssetTab.uSize')">
+            <span>{{cabinetSelectedData.uSize}}</span>
+          </el-form-item>
+          <el-form-item :label="$t('asset.editAssetTab.remark')">
+            <span>{{cabinetSelectedData.remark}}</span>
+          </el-form-item>
+          <!--cli-->
+          <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}
+            <el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
+          </div>
+          <div class="line-100 asset-line"></div>
+          <template v-if="accountSwitch">
+            <account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult"></account-config-box>
+          </template>
+
+          <template v-if="!pageObj.id">
+            <el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
+              <el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0"></el-switch>
+            </el-form-item>
+            <div class="line-100 asset-line" style="margin-top: -16px;"></div>
+          </template>
+        </el-form>
+      </el-scrollbar>
+
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" id="asset-edit-cancel">
+          <span>{{$t('overall.cancel')}}</span>
+        </button>
+        <button v-if="!tabView" @click.stop="editData('asset')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" id="asset-edit-save">
+          <span>{{$t('overall.save')}}</span>
+        </button>
+      </div>
+      <module-box :module="module" @reload="refreshTabData" ref="moduleBox"></module-box>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import accountConfig from '../../page/asset/accountConfig';
+  import {host} from '../js/validate';
+  export default {
+    name: "assetEditUnit",
+    props: ["editUnitShow", "editUnitId"],
+    components:{
+      'account-config-box': accountConfig,
+    },
+    data() {
+      return {
+        visible: '',
+        vendorModelData: '',
+        assetData: {
+          id: '',
+          sn: '',
+          host: '',
+          state: '',
+          purchaseDate: '',
+          idcId: '',
+          cabinetId: '',
+          modelId: '',
+          assetType: '',
+          accounts: [{
+            id: '',
+            authType: 1,
+            user: '',
+            pwd: '',
+            port: '',
+            uploadFile: null
+          }],
+          exporter: 0
+        },
+        accountSwitch:false,//true 开启，false 关闭
+        accountData: '',
+        assetViewData: {
+          assetType: '',
+          vendor: '',
+          model: '',
+          moduleNum: '',
+          alertNum: '',
+          idcName: '',
+          cabinetName: ''
+        },
+        assetStateOption: [
+          {
+            value: 1,
+            label: this.$t('asset.createAssetTab.inStock')
+          }, {
+            value: 2,
+            label: this.$t('asset.createAssetTab.notInStock')
+          }],
+        cabinetModelData: '',
+        checkList: [],
+        assetTypeOptionData: [],
+        vendorTypeData: '',
+        vendorTypeOptionData: [],
+        vendorUlData: '',
+        modelUlData: '',
+        vendorCode: '',
+        IDCData: '',
+        IDCOptionData: [],
+        cabinetData: '',
+        cabinetOptionData: [],
+        input: '',
+        pageObj: {
+          id: '',
+          pageNo: 1,
+          pageSize: 20,
+          total: 0,
+          idcId: '',
+          idcIds: ''
+        },
+        tableHeight: document.documentElement.clientHeight - 200,
+        tabView: false,
+        assetType: '',
+        assetTypeData: {
+          type: 'assetType',
+          value: '',
+        },
+        addVendorData: {
+          type: 'vendor',
+          value: '',
+        },
+        addNewModelData: {
+          name: '',
+          vendorCode: '',
+          typeCode: ''
+        },
+        accountType: '',
+        idcSelectedData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        addIdcData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        popIdcData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        idcUserData: '',
+        cabinetSelectedData: {
+          name: '',
+          uSize: 0,
+          remark: '',
+          idcId: '',
+        },
+        addCabinetData: {
+          name: '',
+          popName: '',
+          uSize: 0,
+          remark: '',
+          idcId: '',
+        },
+        popCabinetData: {
+          name: '',
+          uSize: 0,
+          remark: '',
+          idcId: '',
+        },
+        addCabIDCData: {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        },
+        popTypeVisible: false,
+        popCompVisible: false,
+        popIDCVisible: false,
+        popCabinetVisible: false,
+
+        editPopTypeVisible: false,
+        editPopVendorVisible: false,
+        editPopIDCVisible: false,
+        editPopCabinetVisible: false,
+        vendorCount: '',
+        modelCount: '',
+        allModelUlData: '',
+        tempData: '',
+        tempModelData: [],
+        isResourceShow: 0,
+        unitDisable: '',
+        modelClickData: '',
+        popState: true,
+        obj: null,
+        addUnitShow: false,
+        rules: {
+          sn: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          host: [
+            {required:true,message:this.$t('validate.required'),trigger: 'blur'},
+            {validator:host, trigger: 'blur'}
+          ],
+          modelId: [
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
+          ],
+          assetType: [
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
+          ],
+          idcId: [
+            {required: true, message: this.$t('validate.required'), trigger: 'change'}
+          ],
+        },
+        cabRules: {
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          uSize: [
+            {required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          idcId: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ]
+        },
+        uploadFileList:[],
+        formData:null,
+        module:{},
+        accountValideResult:true
+      }
+    },
+    /*computed: {
+      getData() {
+        return this.$store.state.assetData
+      }
+    },*/
+    watch: {
+      allModelUlData(newVal) {
+        if (newVal) {
+          this.getConnectData();
+          if (this.pageObj.id != '') {
+            this.assetData.modelId = [this.obj.model.vendor.code, this.obj.model.id]
+          }
+        }
+      },
+      assetType(newVal) {
+        this.assetData.assetType = newVal;
+        if (newVal == '') {
+          this.popState = true
+        } else {
+          this.popState = false
+        }
+      },
+      'assetData.idcId': function(n, o) {
+        this.addCabinetData.idcId = n;
+      },
+      accountSwitch(n) {
+        if (n) {
+          if (!this.assetData.accounts[0]) {
+            !this.assetData.accounts.push({
+              id: '',
+              user:"",
+              authType:1,
+              pwd:"",
+              port:'',
+              privateKey:'',
+              uploadFile:''
+            });
+          }
+        }
+      },
+      'assetData.exporter':function(n,o){
+        if(parseInt(n) === 1){
+          this.accountSwitch=true;
+        }
+      }
+    },
+    methods: {
+      cancelEdit(data) {
+        if (data === false) {
+          this.getAssetTypeOptionData();
+        }
+      },
+      clickOutSide(data) {
+        if (data) {
+          this.editQuit();
+          this.modelCount = '';
+        }
+      },
+      editQuit() {
+        for (let i of this.assetTypeOptionData) {
+          if (i.isEdit === true) {
+            i.isEdit = false;
+            this.getAssetTypeOptionData();
+          }
+        }
+        for (let i of this.vendorUlData) {
+          if (i.isEdit === true) {
+            i.isEdit = false;
+            this.getVendorOptionData();
+          }
+        }
+        for (let i of this.modelUlData) {
+          if (i.isEdit === true) {
+            i.isEdit = false;
+            this.getModelOptionData(this.assetType, this.vendorCode);
+          }
+        }
+      },
+      getAssetData(data) {
+        if (data) {
+          this.pageObj.id = data;
+          this.$get('asset', this.pageObj).then(response => {
+            if (response.code === 200) {
+              this.obj = response.data.list[0];
+              this.assetViewData.assetType = response.data.list[0].model.type.value
+              this.assetViewData.vendor = response.data.list[0].model.vendor.value
+              this.assetViewData.model = response.data.list[0].model.name
+              this.assetViewData.idcName = response.data.list[0].idc.name
+              this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
+              this.assetViewData.moduleNum = response.data.list[0].moduleNum
+              this.assetViewData.alertNum = response.data.list[0].alertNum
+              this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
+              this.getCabinetOptionData(response.data.list[0].idc.id)
+              this.assetType = response.data.list[0].model.type.code
+              this.assetData.sn = response.data.list[0].sn
+              this.assetData.host = response.data.list[0].host
+              this.assetData.state = response.data.list[0].state
+              this.assetData.idcId = response.data.list[0].idc.id
+              this.assetData.cabinetId = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.id
+              this.assetData.purchaseDate = response.data.list[0].purchaseDate
+              // this.assetData.accounts[0].id = response.data.list[0].accounts[0].id
+              // this.assetData.accounts[0].authType = response.data.list[0].accounts[0].authType
+              // this.assetData.accounts[0].user = response.data.list[0].accounts[0].user
+              // this.assetData.accounts[0].pwd = response.data.list[0].accounts[0].pwd
+              // this.assetData.accounts[0].port = response.data.list[0].accounts[0].port
+              // this.assetData.accounts[0].cert = response.data.list[0].accounts[0].privateKey
+              this.assetData.accounts=response.data.list[0].accounts[0]?response.data.list[0].accounts:[];
+              this.accountSwitch=this.assetData.accounts.length>0;
+              this.idcSelectedData.location = response.data.list[0].idc.location
+              this.idcSelectedData.principal = response.data.list[0].idc.principal
+              this.idcSelectedData.tel = response.data.list[0].idc.tel
+              this.cabinetSelectedData.uSize = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.uSize
+              this.cabinetSelectedData.remark = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.remark
+              this.getAllModelOptionData(this.assetType)
+            }
+          })
+        } else {
+          this.pageObj.id = '';
+          this.assetData = {
+            id: '',
+              sn: '',
+              host: '',
+              state: '',
+              purchaseDate: '',
+              idcId: '',
+              cabinetId: '',
+              modelId: '',
+              assetType: '',
+              accounts: [{
+              id: '',
+              authType: 1,
+              user: '',
+              pwd: '',
+              port: '',
+              uploadFile: null
+            }]
+          };
+        }
+      },
+      openModuleBox(module) {
+        this.module = module;
+        this.$refs.moduleBox.show(true);
+        this.$refs['moduleListPop' + this.obj.id].show(false);
+      },
+      refreshTabData:function(){
+        this.$emit('refreshData', 'true');
+      },
+      jumpToAlertMsg(assetId) {
+        this.$store.commit('assetForAlertListChange', assetId);
+        this.$router.push({
+          path: "/alertList",
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      getIDCOptionData() {
+        this.$get('idc').then(response => {
+          if (response.code === 200) {
+            this.IDCOptionData = response.data.list;
+            this.markOptionData(this.IDCOptionData);
+            this.$store.commit('assetDcListChange');
+            this.$emit('refreshData');
+          }
+        })
+      },
+      getUserData() {
+        this.$get('sys/user/list').then(response => {
+          if (response.code === 200) {
+            this.idcUserData = response.data.list
+          }
+        })
+      },
+      getCabinetOptionData(data) {
+        this.$get('cabinet?idcId=' + data).then(response => {
+          if (response.code === 200) {
+            this.cabinetOptionData = response.data.list;
+            this.markOptionData(this.cabinetOptionData)
+            for (let i = 0; i < this.cabinetOptionData.length; i++) {
+              this.$set(this.cabinetOptionData[i], 'children', this.IDCOptionData)
+            }
+          }
+        })
+      },
+      getAssetTypeOptionData() {
+        this.$get('sys/dict/all?type=assetType').then(response => {
+          if (response.code === 200) {
+            this.assetTypeOptionData = response.data
+            this.markOptionData(this.assetTypeOptionData)
+          }
+        })
+      },
+      getVendorOptionData() {
+        this.$get('sys/dict/all?type=vendor').then(response => {
+          if (response.code === 200) {
+            this.vendorUlData = response.data
+            this.markOptionData(this.vendorUlData)
+          }
+        })
+      },
+      getModelOptionData(assetType, vendorCode) {
+        this.$get('model?typeCode=' + assetType + '&vendorCode=' + vendorCode).then(response => {
+          if (response.code === 200) {
+            this.modelUlData = response.data.list
+            this.markOptionData(this.modelUlData)
+          }
+        })
+      },
+      getAllModelOptionData(data) {
+        this.assetData.assetType = this.assetType;
+        this.$get('model?typeCode=' + this.assetType + '&pageNo=1&pageSize=999').then(response => {
+          if (response.code === 200) {
+            this.allModelUlData = response.data.list
+          }
+        })
+      },
+      changeLoginType:function(loginType){
+        this.assetData.accounts[0].authType = loginType;
+        if(loginType == 1){//密码登录
+          this.clearFile();
+        }
+        if(loginType == 2){//公钥登录
+          this.assetData.accounts[0].pwd='';
+        }
+      },
+      editData(data, item, mark) {
+        let obj = {
+          id: '',
+          type: '',
+          value: '',
+          code: ''
+        }
+        let idcData = {
+          id: '',
+          name: '',
+          location: '',
+          principal: '',
+          tel: ''
+        }
+        if (data === 'asset') {
+          //this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1];
+          let modelId = this.assetData.modelId.join(',').split(',')[1];
+          let form = new FormData();
+          form.append("id", this.pageObj.id);
+          form.append("sn", this.assetData.sn);
+          form.append("host", this.assetData.host);
+          form.append("state", this.assetData.state);
+          form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
+          form.append("idcId", this.assetData.idcId);
+          form.append("cabinetId", this.assetData.cabinetId);
+          form.append("modelId", modelId);
+          if (!this.accountSwitch) {
+            this.assetData.accounts = [];
+          }
+          for(let i in this.assetData.accounts){
+            let account=this.assetData.accounts[i];
+            if(account.user){
+              if (account.id) {
+                form.append("accounts["+i+"].id", account.id);
+              }
+              form.append("accounts["+i+"].authType",account.authType);
+              form.append("accounts["+i+"].user", account.user);
+              form.append("accounts["+i+"].port", account.port);
+              form.append("accounts["+i+"].pwd", account.pwd);
+              if(account.authType==2){
+                form.append('cert',account.uploadFile?account.uploadFile.raw:null);
+              }
+            }
+          }
+
+          if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
+            this.$refs.accountConfigBox[0].validateAccount();
+          }
+          this.$refs.assetEditForm.validate((valid) => {
+            if (valid&&this.accountValideResult) {
+              if (this.pageObj.id) {
+                this.$put('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
+                  const h = this.$createElement;
+                  if (res.code === 200) {
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                    this.clearFile();
+                    this.pageObj.id = '';
+                    this.$emit('refreshData', 'true');
+                    this.sendStateData('close');
+                  } else {
+                    this.$message.error(res.msg);
+                  }
+                });
+              } else {
+                if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
+                  this.$refs.accountConfigBox[0].validateAccount();
+                  console.log("accountValideResult-->"+this.accountValideResult)
+                }
+                let modelId = ''
+                let authType = ''
+                if (this.assetData.modelId !== '') {
+                  modelId = this.assetData.modelId.join(',').split(',')[1]
+                } else {
+                  this.assetData.modelId = ''
+                }
+                if (this.assetData.accounts[0].user === '') {
+                  authType = ''
+                } else {
+                  authType = this.assetData.accounts[0].authType
+                }
+                let form = new FormData();
+                form.append("sn", this.assetData.sn);
+                form.append("host", this.assetData.host);
+                form.append("state", this.assetData.state);
+                form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
+                form.append("idcId", this.assetData.idcId);
+                form.append("cabinetId", this.assetData.cabinetId);
+                form.append("modelId", modelId);
+                if(this.accountSwitch){
+                  for(let i in this.assetData.accounts){
+                    let account=this.assetData.accounts[i];
+                    if(account.user){
+                      form.append("accounts["+i+"].authType",account.authType);
+                      form.append("accounts["+i+"].user", account.user);
+                      form.append("accounts["+i+"].port", account.port);
+                      form.append("accounts["+i+"].pwd", account.pwd);
+                      if(account.authType==2){
+                        form.append('cert',account.uploadFile?account.uploadFile.raw:null);
+                      }
+                    }
+                  }
+                }
+                form.append("exporter",parseInt(this.assetData.exporter));
+                this.$post('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
+                  const h = this.$createElement;
+                  if (res.code === 200) {
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                    this.clearFile();
+                    this.$emit('refreshData', 'true');
+                    this.sendStateData('close');
+                  } else {
+                    this.$message.error(res.msg);
+                  }
+                });
+              }
+            } else {
+              return false;
+            }
+          });
+
+        } else {
+          if (data === 'model') {
+            item.vendorCode = this.vendorCode
+            item.typeCode = this.assetType
+          }
+          if (data === 'vendor') {
+            obj.id = item.id
+            obj.code = item.code
+            obj.type = item.type
+            obj.value = item.label
+            data = 'sys/dict/update'
+            item = obj
+          }
+          if (data === 'cabinet') {
+            let v = true;
+            this.$refs.cabEditForm[0].validate((valid) => {
+              if (valid) {
+                item.name = this.popCabinetData.name;
+                item.uSize = this.popCabinetData.uSize;
+                item.remark = this.popCabinetData.remark;
+                item.idcId = this.popCabinetData.idcId;
+              } else {
+                v = false;
+              }
+            });
+            if (!v) {
+              return false;
+            }
+          }
+          if (data === 'idc') {
+            idcData.id = item.id
+            idcData.name = this.popIdcData.name
+            idcData.location = this.popIdcData.location
+            idcData.principal = this.popIdcData.principal
+            idcData.tel = this.popIdcData.tel
+            item = idcData
+          }
+          if (mark === 'CabIDC') {
+            idcData.id = item.id;
+            idcData.name = this.addCabIDCData.name;
+            idcData.location = this.addCabIDCData.location;
+            idcData.principal = this.addCabIDCData.principal;
+            idcData.tel = this.addCabIDCData.tel;
+            item = idcData;
+          }
+          this.$put(data, item).then(res => {
+            if (res.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.getIDCOptionData();
+              if (data === 'cabinet') {
+                this.getCabinetOptionData(item.idcId);
+              }
+              this.getAllModelOptionData();
+              this.getAssetTypeOptionData();
+              this.$emit('refreshData', 'true')
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+        }
+      },
+      setAccountValideResult:function(result){
+        this.accountValideResult=result;
+      },
+      //新增型号弹框关闭后重置弹框内容
+      resetVendor() {
+        this.addVendorData.value = '';
+        this.vendorCode = '';
+        this.vendorCount = '';
+        this.modelUlData = [];
+        this.addNewModelData = {
+          name: '',
+          vendorCode: '',
+          typeCode: ''
+        }
+      },
+      addNewData(type) {
+        if (type === 'IDC') {
+          const h = this.$createElement;
+          this.$post('idc', this.addIdcData).then(res => {
+            if (res.code === 200) {
+              const h = this.$createElement;
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.getIDCOptionData()
+              this.getAssetData()
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if (type === 'assetType') {
+          this.$post('sys/dict/save', this.assetTypeData).then(res => {
+            const h = this.$createElement;
+            if (res.code === 200) {
+              this.getAssetTypeOptionData()
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if (type === 'vendor') {
+          const h = this.$createElement;
+          this.$post('sys/dict/save', this.addVendorData).then(res => {
+            if (res.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.getVendorOptionData()
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if (type === 'model') {
+          this.addNewModelData.typeCode = this.assetType
+          this.addNewModelData.vendorCode = this.vendorCode
+          this.$post('model', this.addNewModelData).then(res => {
+            const h = this.$createElement;
+            if (res.code === 200) {
+              this.getModelOptionData(this.assetType, this.vendorCode)
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+              this.getAllModelOptionData(this.assetType)
+            } else {
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if (type === 'cabinet') {
+          this.$refs.cabAddForm.validate((valid) => {
+            if (valid) {
+              this.addCabinetData.idcId = this.assetData.idcId
+              this.$post('cabinet', this.addCabinetData).then(res => {
+                const h = this.$createElement;
+                if (res.code === 200) {
+                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.getCabinetOptionData(this.addCabinetData.idcId);
+                  this.editPopoverClose('cabinet');
+                } else {
+                  this.$message.error(res.msg);
+                }
+              });
+            } else {
+              return false;
+            }
+          });
+
+        }
+      },
+      clearFile:function(){
+        if(this.$refs.upload){
+          this.$refs.upload.clearFiles();
+        }
+        this.uploadFileList=[];
+        this.assetData.accounts[0].privateKey='';
+      },
+      deleteData(data, item) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          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.getIDCOptionData();
+              this.getVendorOptionData();
+              this.getCabinetOptionData(this.assetData.idcId);
+              this.getAllModelOptionData(this.assetType);
+              this.getModelOptionData(this.assetType, this.vendorCode);
+              if (data == 'asset') {
+                this.sendStateData('close');
+              }
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      markOptionData(data) {
+        data.forEach(item => {
+          this.$set(item, 'isEdit', false);
+          this.$set(item, 'oldName', item.value);
+          this.$set(item, 'modelOldName', item.name);
+          this.$set(item, item.name, false);
+          this.$set(item, item.id, false);
+          this.$set(item, item.id + item.name, false);
+          this.$set(item, item.name + item.id, false);
+        })
+      },
+      getConnectData() {
+        this.isResourceShow += 1;
+        let resultData = [];
+        let modelData = this.allModelUlData;
+        for (let i = 0; i < modelData.length; i++) {
+
+          if (!modelData[i].vendor) {
+            continue;
+          }
+          let obj = {};
+          obj.id = modelData[i].vendor.id;
+          obj.code = modelData[i].vendor.code;
+          obj.value = modelData[i].vendor.code;
+          obj.label = modelData[i].vendor.value;
+          obj.children = [];
+          resultData.push(obj);
+        }
+        let result = [];
+        let obj1 = {};
+        for (let i = 0; i < resultData.length; i++) {
+          if (!obj1[resultData[i].id]) {
+            result.push(resultData[i]);
+            obj1[resultData[i].id] = true;
+          }
+        }
+        for (let x = 0; x < result.length; x++) {
+          for (let y = 0; y < modelData.length; y++) {
+            if (!modelData[y].vendor) {
+              continue;
+            }
+            if (result[x].code === modelData[y].vendor.code) {
+              let obj2 = {}
+              obj2.value = modelData[y].id
+              obj2.label = modelData[y].name
+              result[x].children.push(obj2)
+            }
+          }
+        }
+        this.vendorTypeOptionData = result
+      },
+      editVendorOptionData(item, data, index) {
+        this.vendorCount = index
+        if (!item.isEdit) {
+          item.isEdit = true;
+        } else {
+          if (item.name !== item.oldName) {
+            item.isEdit = false;
+          } else {
+            item.isEdit = false;
+          }
+        }
+        if (data === 'vendor') {
+          for (let i = 0; i < this.vendorUlData.length; i++) {
+            const element = this.vendorUlData[i];
+            if (item.id !== element.id) {
+              element.isEdit = false
+              element.value = element.oldName
+            }
+          }
+        }
+      },
+      editOptionData(item, data, index) {
+        this.modelCount = index;
+        if (!item.isEdit) {
+          item.isEdit = true;
+        } else {
+          if (item.name !== item.oldName) {
+            item.isEdit = false;
+          } else {
+            item.isEdit = false;
+          }
+        }
+        if (data === 'type') {
+          for (let i = 0; i < this.assetTypeOptionData.length; i++) {
+            let element = this.assetTypeOptionData[i];
+            if (item.id !== element.id) {
+              element.isEdit = false
+              element.value = element.oldName
+            }
+          }
+        }
+        if (data === 'model') {
+          for (let i = 0; i < this.modelUlData.length; i++) {
+            let element = this.modelUlData[i];
+            if (item.id !== element.id) {
+              element.isEdit = false
+              element.value = element.modelOldName
+            }
+          }
+        }
+      },
+      delOptionData(data) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("/sys/dict/delete?ids=" + data.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getAssetData();
+              this.getAssetTypeOptionData();
+              this.getVendorOptionData();
+              this.getAllModelOptionData(this.assetType);
+              this.getModelOptionData(this.assetType, this.vendorCode);
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      tabControl(data) {
+        if (data === 'close') {
+          this.addUnitShow = false
+        }
+      },
+      editing() {
+      },
+      getSingleIDCData(data, item, itemData) {
+        if (item !== 'edit') {
+          this.idcSelectedData = '';
+          this.IDCOptionData.forEach(item => {
+            if (item.id === data) {
+              this.idcSelectedData = item;
+            }
+          });
+          this.getCabinetOptionData(this.assetData.idcId);
+          this.assetData.cabinetId = '';
+          this.cabinetSelectedData.uSize = '';
+          this.cabinetSelectedData.remark = null
+        } else {
+          this.clickFlush('idc', itemData);
+          this.IDCOptionData.forEach(item => {
+            if (item.id === data) {
+              this.popIdcData.id = item.id;
+              this.popIdcData.name = item.name;
+              this.popIdcData.location = item.location;
+              this.popIdcData.principal = item.principal;
+              this.popIdcData.tel = item.tel;
+              this.addCabIDCData.name = item.name;
+              this.addCabIDCData.location = item.location;
+              this.addCabIDCData.principal = item.principal;
+              this.addCabIDCData.tel = item.tel;
+            }
+          });
+        }
+      },
+      getSingleCabinetData(data, type, item) {
+        if (type !== 'edit') {
+          this.cabinetSelectedData.uSize = 0;
+          this.cabinetSelectedData.remark = null
+          this.cabinetOptionData.forEach(items => {
+            if (items.id === data) {
+              this.cabinetSelectedData.uSize = items.uSize
+              this.cabinetSelectedData.remark = items.remark
+            }
+          })
+        } else {
+          this.clickFlush('cabinet', item)
+          item[item.name] = !item[item.name]
+          this.cabinetOptionData.forEach(items => {
+            if (items.id === data) {
+              this.popCabinetData.name = items.name;
+              this.popCabinetData.uSize = items.uSize;
+              this.popCabinetData.remark = items.remark;
+              this.popCabinetData.idcId = items.idcId;
+            }
+          })
+        }
+      },
+      getSingleAsset(data) {
+        this.pageObj.idcIds = data.join(',')
+        this.getAssetData()
+      },
+      getLidata(index, item) {
+        this.vendorCount = index;
+        this.vendorCode = item.code;
+        this.getModelOptionData(this.assetType, this.vendorCode)
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getAssetData()
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.getAssetData()
+      },
+      clickState(index, item, data) {
+        if (data === 'type') {
+          this.modelCount = index;
+          this.tempData = item;
+        }
+        if (data === 'model') {
+          this.modelCount = index;
+          this.modelClickData = item.id
+        }
+      },
+      transferData(data) {
+        if (data === 'type') {
+          this.assetType = this.tempData.code
+          this.popTypeVisible = false
+          this.tempData = ''
+        }
+        if (data === 'model') {
+          this.assetData.modelId = [this.vendorCode, this.modelClickData]
+          this.popCompVisible = false
+          this.tempData = ''
+        }
+      },
+      handleChange(file,fileList) {
+        if (fileList.length > 0) {
+          this.uploadFileList = [fileList[fileList.length - 1]]
+        }
+        this.assetData.accounts[0].file = this.uploadFileList[0];
+      },
+      editPopoverClose(data) {
+        if (data === 'type') {
+          this.modelCount = ''
+          this.editPopTypeVisible = !this.editPopTypeVisible
+        }
+        if (data === 'vendor') {
+          this.vendorCount = ''
+          this.modelCount = ''
+          this.editPopVendorVisible = !this.editPopVendorVisible
+        }
+        if (data === 'idc') {
+          this.editPopIDCVisible = !this.editPopIDCVisible
+        }
+        if (data === 'cabinet') {
+          this.editPopCabinetVisible = !this.editPopCabinetVisible
+        }
+      },
+      getPrincipalName(data) {
+        for (let item in this.idcUserData) {
+          if (this.idcUserData[item].userId === data) {
+            return this.idcUserData[item].username
+          }
+        }
+      },
+      returnData(data) {
+        if (data && data !== '--') {
+          return data.name;
+        } else if (data === '--') {
+          return '-';
+        } else {
+          return "-";
+        }
+      },
+      sendStateData(data) {
+        this.$emit('sendStateData', 'close')
+      },
+      flushData() {
+        this.getAssetData();
+      },
+      clickFlush(type, itemData) {
+        if (type === 'idc') {
+          for (let i = 0; i < this.IDCOptionData.length; i++) {
+            const element = this.IDCOptionData[i];
+            if (element.id === itemData.id) {
+              setTimeout(() => {
+                element[element.name] = true;
+              }, 100)
+            } else {
+              element[element.name] = false
+            }
+          }
+        }
+        if (type === 'cabinet') {
+          for (let i = 0; i < this.cabinetOptionData.length; i++) {
+            const element = this.cabinetOptionData[i];
+            if (element.id === itemData.id) {
+              setTimeout(() => {
+                element[element.name] = true;
+              }, 100)
+            } else {
+              element[element.name] = false
+            }
+          }
+        }
+      },
+    },
+    mounted() {
+      this.getUserData()
+      this.getIDCOptionData();
+      this.getVendorOptionData();
+      this.getAssetTypeOptionData();
+      window.onresize = () => {
+        this.tableHeight = document.documentElement.clientHeight - 200;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.asset-sub-title {
+  padding: 8px 0;
+}
+.asset-line {
+  margin-bottom: 18px;
+  background-color: #DCDFE6;
+}
+/*去除上传文件动画start*/
+/*.upload-demo {*/
+/*  display: flex;*/
+/*}*/
+/deep/ .el-list-enter-active,
+/deep/ .el-list-leave-active {
+  transition: none;
+}
+
+/deep/ .el-list-enter,
+/deep/ .el-list-leave-active {
+  opacity: 0;
+}
+/deep/ .el-upload-list {
+  height: 40px;
+}
+/*去除上传文件动画end*/
+</style>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 9e4854768..5d22dbf30 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -167,10 +167,10 @@
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     </div>
 
-    <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
-                    @sendStateData="tabControl"></asset-add-unit>
-    <asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
-                     ref="assetEditUnit"></asset-edit-unit>
+    <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
+                    @sendStateData="tabControl"></asset-add-unit>-->
+    <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
+                     ref="assetEditUnit"></asset-box>
     <element-set
       v-clickoutside="elementsetHide"
       :drop-col="dropCol"
@@ -600,10 +600,12 @@
       },
       tagShow(data, id, type) {
         if (data === 'showAdd') {
-          this.addUnitShow = true
+          //this.addUnitShow = true;
+          this.editUnitShow = true;
+          this.$refs['assetEditUnit'].getAssetData('');
         }
         if (data === 'showEdit') {
-          this.editUnitShow = true
+          this.editUnitShow = true;
           this.$refs['assetEditUnit'].getAssetData(id)
         }
         if (data === 'showView') {
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index c9b2bc028..613ded589 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -26,6 +26,7 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
 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配置弹框组件
 import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
@@ -39,6 +40,7 @@ Vue.component("project-box", projectBox);
 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);