diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 8ab979bf0..6f8d94bae 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -650,10 +650,8 @@ li{
 }
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel, .right-box-dc {
-  width: 520px;
-}
-.right-box-add-asset, .right-box-add-chart {
+.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module,
+.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-add-asset, .right-box-add-chart {
   width: 520px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {
@@ -663,7 +661,7 @@ li{
   width: 850px;
 }
 .right-box-cabinet{
-  width:400px
+  width: 400px
 }
 /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index c32f50231..b70cdff81 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -7,7 +7,7 @@
       active="1"
       unique-opened
     >
-      <el-menu-item :index="-1" >
+      <el-menu-item :index="'-1'" >
         <div @click="cli()" >
           <i class="nz-icon nz-icon-cli"></i>
           <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
@@ -27,7 +27,7 @@
           </el-menu-item>
         </template>
       </el-submenu>
-      <el-menu-item :index="-2" >
+      <el-menu-item :index="'-2'" >
         <div class="vertical-line" ></div>
       </el-menu-item>
       <el-submenu index="1" popper-class="nz-submenu">
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index c70bd4841..30638d212 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -16,6 +16,7 @@ const en = {
     edit: 'Edit', //'编辑'
     delete: 'Delete', //'删除'
     view: 'View',
+    type: 'Type',
     esc: 'Cancel', //'取消'
     cancel: 'Cancel', //'取消'
     save: 'Save', //'保存'
@@ -35,7 +36,7 @@ const en = {
     back: 'Back', //返回
     unavailable: 'Unavailable',
     available: 'Available',
-   changePwd:'Change Password',//修改密码
+    changePwd:'Change Password',//修改密码
     createChart:'create chart',
     createProject:'create project',
     createAsset:'create asset',
@@ -44,6 +45,7 @@ const en = {
     createPrometheusServer:'create prometheus server',
     createDatacenter:'create datacenter',
     createCabinet:'create cabinet',
+    createModel:'create model',
     exportExcel:'Export',
     importExcel:'Import',
     importExcelLower:'import',
@@ -411,6 +413,14 @@ const en = {
       cabinetNum: "Cabinet number",
       assets: "Assets",
       remark:'Remark',
+    },
+    model: {
+      model: 'Model',
+      vendor: 'Vendor',
+      assets: "Assets",
+      editModel: 'Edit model',
+      createModel: 'Create model',
+      remark: 'Remark'
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index e2dd2eee8..d006e5bb8 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -43,7 +43,7 @@
             </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>
+              <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>
             <!--last-->
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 9f9f36421..2ac024362 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -111,51 +111,6 @@
           ],
         },
         areaData: [],
-        data: {
-          code: 200,
-          msg: "success",
-          data: {
-            list: [{
-              id: 1,
-              pid: 0,
-              name: "astana",
-              longitude: 100.3,
-              latitude: 24.3,
-              i18n:{en:'astana',cn:'阿斯塔纳'},
-              children: [{
-                id: 2,
-                pid: 1,
-                name: "qu",
-                longitude: 100.3,
-                latitude: 24.3,
-                i18n:{en:'qu',cn:'阿斯塔纳一个区'},
-                children: [{
-                  id: 3,
-                  pid: 2,
-                  name: "qu2",
-                  longitude: 100.3,
-                  latitude: 24.3,
-                  i18n:{en:'qu2',cn:'阿斯塔纳二个区'}}
-                ]
-              }, {
-                id: 4,
-                pid: 0,
-                name: "alamutu",
-                longitude: 100.3,
-                latitude: 24.3,
-                i18n:{en:'alamutu',cn:'阿拉木图'},
-                children: [{
-                  id: 5,
-                  pid: 4,
-                  name: "qu3",
-                  longitude: 100.3,
-                  latitude: 24.3,
-                  i18n: {en: 'qu3', cn: '阿拉木图一个区'}
-                }]
-              }]
-            }]
-          }
-        },
       }
     },
     methods: {
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
new file mode 100644
index 000000000..873105c51
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -0,0 +1,186 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-model" v-if="rightBox.show" v-clickoutside="clickos">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <button id="dc-del" type="button" v-if="currentModel.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">
+          <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="dc-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>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <el-scrollbar class="right-box-form-box">
+        <el-form class="right-box-form" :model="currentModel" label-position="top" :rules="rules" ref="modelForm">
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModel.name" size="small"></el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.name}}</div>
+          </el-form-item>
+        </el-form>
+        <el-form-item prop="height">
+          <el-autocomplete
+            v-model="currentModel.height"
+            :fetch-suggestions="querySearch"
+            placeholder=""
+            size="mini"
+            popper-class="no-style-class"
+            @select="handleSelect">
+            <template slot-scope="{ item }">
+              <div class="name">{{ item }}</div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+        <el-form-item :label="$t('config.model.remark')" prop="remark">
+          <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="currentModel.remark" size="small"></el-input>
+          <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.remark}}</div>
+        </el-form-item>
+      </el-scrollbar>
+
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button @click="esc" id="dc-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="dc-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>
+  import {noSpecialChar} from "../js/validate";
+
+  export default {
+    name: "modelBox",
+    props: {
+      model: Object
+    },
+    data() {
+      return {
+        currentModel: {
+          id: '',
+          name: '',
+          vendor: {id: '', value: '', code: '', type: ''},
+          type: {id: '', value: '', code: '', type: ''},
+          assetStat: {total: '', inStock: '', outStock: ''},
+          remark: ''
+        },
+        rightBox: {
+          show: false,
+          firstShow: false,
+          title: '',
+          isEdit: false
+        },
+        rules: {
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+      }
+    },
+    methods: {
+      show(show, isEdit) {
+        this.rightBox.show = show;
+        this.rightBox.isEdit = isEdit;
+      },
+      clickos() {
+        this.rightBox.show = false;
+      },
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+        this.rightBox.firstShow = false;
+      },
+
+      /*保存*/
+      save() {
+        this.$refs.modelForm.validate((valid) => {
+          if (valid) {
+            if (this.currentModel.id) {
+              this.$put('model', this.currentModel).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.rightBox.show = false;
+                  this.$emit('reload');
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('model', this.currentModel).then(response => {
+                if (response.code === 200) {
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.rightBox.show = false;
+                  this.$emit("reload");
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        });
+      },
+      saveOrToEdit: function() {
+        if (!this.rightBox.isEdit) {
+          this.rightBox.isEdit = true;
+          this.rightBox.title = this.$t("config.model.editModel") + "  ID：" + this.currentModel.id;
+        } else {
+          this.save();
+        }
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("model?ids=" + this.currentModel.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.rightBox.show = false;
+              this.$emit("reload");
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+    },
+    mounted() {
+    },
+    computed: {
+    },
+    watch: {
+      model: {
+        immediate: true,
+        deep:true,
+        handler(n, o) {
+          this.currentModel = JSON.parse(JSON.stringify(n));
+          if (n && n.id) {
+            this.rightBox.title =this.rightBox.isEdit? this.$t("config.model.editModel") + "  ID：" + n.id : this.$t("config.model.model") + "  ID：" + n.id ;
+          } else {
+            this.rightBox.title = this.$t("config.model.createModel");
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+</style>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 4e1e73f3d..93d570173 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -15,6 +15,9 @@
         <div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
           {{$t('config.dc.dc')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
+          {{$t('config.model.model')}}
+        </div>
       </div>
     </div>
     <div class="content-right">
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 8df810bdc..415d7a38f 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -45,6 +45,9 @@
           <div class="sidebar-info-item sidebar-info-item-active"  id="account-jump-dc">
             {{$t('config.dc.dc')}}
           </div>
+          <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
+            {{$t('config.model.model')}}
+          </div>
         </div>
       </div>
       <!--dc table start-->
@@ -97,7 +100,7 @@
                 <template v-if="scope.row.area">{{scope.row.area.name}}</template>
                 <template v-else>-</template>
               </template>
-              <template v-else-if="item.prop == 'assetStat'">
+              <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
                 <el-popover
                   placement="top"
                   trigger="hover"
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
new file mode 100644
index 000000000..ce259e117
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -0,0 +1,296 @@
+<style scoped>
+  .model {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="model">
+    <div class="content-left">
+      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div class="sidebar-info">
+        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="model-jump-account">
+          {{$t('config.account.account')}}
+        </div>
+        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="model-jump-prom">{{$t('config.promServer.promServerList')}}</div>
+        <div class="sidebar-info-item" @click="jumpTo('dc')" id="model-jump-dc">
+          {{$t('config.dc.dc')}}
+        </div>
+        <div class="sidebar-info-item sidebar-info-item-active" id="model-jump-model">
+          {{$t('config.model.model')}}
+        </div>
+      </div>
+    </div>
+    <div class="content-right">
+      <div class="top-tools">
+        <div></div>
+        <div>
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"  :title="$t('overall.createModel')"
+                  id="model-add">
+                    <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <div class="top-tool-search float-right">
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
+        </div>
+      </div>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table>
+        <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
+                         :key="`col-${index}`" :label="item.label">
+          <template slot-scope="scope" :column="item">
+            <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
+            <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
+            <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
+              <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">
+                  <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>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'model-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'model-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="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            </div>
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+            <template v-else>-</template>
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="false" width="28">
+          <template slot="header" slot-scope="scope">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+
+    <element-set
+      v-clickoutside="elementsetHide"
+      :table-title="tableTitle"
+      :dropCol="dropCol"
+      @tablelable="tablelabelEmit"
+      ref="elementset"
+    ></element-set>
+    <model-box ref="modelBox" :model="model" @reload="getTableData"></model-box>
+  </div>
+
+</template>
+<script>
+  export default {
+    name: "model",
+    data() {
+      return {
+        showTopBtn: false,
+        model: {
+          id: '',
+          name: '',
+          vendor: {id: '', value: '', code: '', type: ''},
+          type: {id: '', value: '', code: '', type: ''},
+          assetStat: {total: '', inStock: '', outStock: ''},
+        },
+        pageObj: {
+          pageNo: 1,
+          pageSize: 20,
+          total: 0
+        },
+        tableTitle: [
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t('overall.name'),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t('overall.type'),
+            prop: 'type',
+            show: true,
+          }, {
+            label: this.$t('config.model.vendor'),
+            prop: 'vendor',
+            show: true,
+          }, {
+            label: this.$t("config.model.assets"),
+            prop: 'assetStat',
+            show: true,
+          }, {
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true,
+            width: 120
+          }
+        ],
+        tablelable: [],
+        dropCol: [],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 5,
+            name: 'DC',
+            type: 'dc',
+            label: 'dc',
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+      }
+    },
+    methods: {
+      elementsetShow(s, e) {
+        var eventfixed = {
+          shezhi: 0,
+          screen: 0
+        };
+        eventfixed[s] = 1;
+        e.preventDefault();
+        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setEventfixed', eventfixed);
+        const h = document.documentElement.clientHeight;
+        const w = document.documentElement.clientWidth;
+        const dw = this.$refs.elementset.$el.offsetWidth;
+        const dh = this.$refs.elementset.$el.offsetHeight;
+        let positionx =
+          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
+        let positiony =
+          e.clientY + dh <= h - 10
+            ? e.clientY + 20
+            : e.clientY + 20 - (e.clientY + dh - h);
+        this.$store.commit('setPosition', {positionx, positiony});
+      },
+      elementsetHide() {
+        //悬浮点击空白隐藏
+        this.$refs.elementset.elementsetHide();
+      },
+      tablelabelEmit(data) {
+        //获取子组件传过来的参数
+        this.$store.commit('setHeaderTable', data);
+        this.tablelable = data;
+      },
+      clickos() {
+        this.rightBox.show = false;
+      },
+      toEdit: function (u) {
+        this.model = Object.assign({}, u);
+        this.$refs.modelBox.show(true, true);
+      },
+      del: function (u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("model?ids=" + u.id).then(response => {
+            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) {
+        this.model = Object.assign({}, u);
+        this.$refs.modelBox.show(true, false);
+      },
+      toAdd: function () {
+        this.cleanModel();
+        this.$refs.modelBox.show(true, true);
+      },
+      esc: function () {
+        this.rightBox.show = false;
+      },
+      jumpTo(data, id) {
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      getTableData: function () {
+        this.tableData = [];
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.$get('model', this.searchLabel).then(response => {
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+          }
+        })
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        this.getTableData();
+      },
+      search: function (searchObj) {
+        this.pageObj.pageNo = 1;
+        this.searchLabel = {};
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        this.getTableData();
+      },
+      cleanModel() {
+        this.model = {
+          id: '',
+          name: '',
+          vendor: {id: '', value: '', code: '', type: ''},
+          type: {id: '', value: '', code: '', type: ''},
+          assetStat: {total: '', inStock: '', outStock: ''},
+          remark: ''
+        };
+      }
+    },
+    mounted: function () {
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.modelTable.$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;
+            }
+          });
+        }
+      });
+      this.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)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
+    },
+    watch: {
+    }
+  }
+</script>
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index c98e4eea6..8d9eecbcb 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -15,6 +15,9 @@
         <div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
           {{$t('config.dc.dc')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
+          {{$t('config.model.model')}}
+        </div>
       </div>
     </div>
     <div class="content-right">
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 889d1c3d7..2dad71a93 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -33,10 +33,8 @@ import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组
 import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
 import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
 import dcBox from "./components/common/rightBox/dcBox"; //dc弹框
+import modelBox from "./components/common/rightBox/modelBox"; //model弹框
 import selectArea from "./components/common/popBox/selectArea"; //dc弹框
-/*import 'vue-happy-scroll/docs/happy-scroll.css'
-import {HappyScroll}  from 'vue-happy-scroll'
-Vue.component('happy-scroll', HappyScroll)*/
 import PerfectScrollbar from "perfect-scrollbar";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 
@@ -56,6 +54,7 @@ Vue.component("panel-box", panelBox);
 Vue.component("module-list-pop", moduleListPop);
 Vue.component("cabinet-config-box", cabinetConfigBox);
 Vue.component("dc-box", dcBox);
+Vue.component("model-box", modelBox);
 Vue.component("select-area", selectArea);
 
 Vue.prototype.$axios = axios;
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index a81f935d2..f8ab47e5e 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -60,6 +60,10 @@ export default new Router({
           path: '/dc',
           component: resolve => require(['../components/page/config/dc.vue'], resolve),
         },
+        {
+          path: '/model',
+          component: resolve => require(['../components/page/config/model.vue'], resolve),
+        },
         {
           path: '/alertList',
           component: resolve => require(['../components/page/alert/list.vue'], resolve),