From a5a546c42efb2849984394feb49234baa94f8ade Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 18 Mar 2021 18:10:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20asset-type=E3=80=81asset-state=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   3 +-
 .../src/components/common/deleteButton.vue    |   2 +-
 .../src/components/common/language/cn.js      |  17 +
 .../src/components/common/language/en.js      |  35 +-
 .../common/popBox/selectAssetType.vue         | 144 ++++++
 .../common/rightBox/assetStateBox.vue         | 177 ++++++++
 .../common/rightBox/assetTypeBox.vue          | 233 ++++++++++
 .../src/components/common/searchInput.vue     |   4 +-
 .../src/components/page/config/account.vue    |   6 +-
 .../src/components/page/config/assetState.vue | 403 +++++++++++++++++
 .../src/components/page/config/assetType.vue  | 426 ++++++++++++++++++
 nezha-fronted/src/router/index.js             |   8 +
 12 files changed, 1448 insertions(+), 10 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/popBox/selectAssetType.vue
 create mode 100644 nezha-fronted/src/components/common/rightBox/assetStateBox.vue
 create mode 100644 nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
 create mode 100644 nezha-fronted/src/components/page/config/assetState.vue
 create mode 100644 nezha-fronted/src/components/page/config/assetType.vue

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index bdd2a9c8a..f768fc9be 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1125,7 +1125,8 @@ li{
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
 .right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
-.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
+.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart, .right-box-asset-type,
+.right-box-asset-state {
   width: 850px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {
diff --git a/nezha-fronted/src/components/common/deleteButton.vue b/nezha-fronted/src/components/common/deleteButton.vue
index 4d8fc6ce6..6f77e9954 100644
--- a/nezha-fronted/src/components/common/deleteButton.vue
+++ b/nezha-fronted/src/components/common/deleteButton.vue
@@ -54,7 +54,7 @@
 
 <style scoped>
   .delete-button{
-    margin-left: 16px;
+    margin-left: 20px;
     opacity: 0.7;
     border-radius: 2px;
   }
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 3e6154da6..67e9819f4 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -58,6 +58,8 @@ const cn = {
     createModel: "创建型号",
     createModule: "创建模块",
     createMib: "创建MIB",
+    createAssetType:'创建设备类型',
+    createAssetState:'创建设备状态',
     exportExcel: "导出",
     importExcel: "导入",
     importExcelLower: "导入",
@@ -908,6 +910,21 @@ const cn = {
         no: "否"
       }
     },
+    assetType: {
+      assetType: "资产类型",
+      parent: "父级",
+      pname: "父级",
+      editAssetType: "编辑资产类型",
+      createAssetType: "新增资产类型"
+    },
+    assetState: {
+      assetState: "资产状态",
+      monitor: "监控",
+      alert: "告警",
+      assetTotal: "资产总数",
+      createAssetState: "新增资产状态",
+      editAssetState: "编辑资产状态",
+    },
     exprTemp:{
       exprTemp:'expression模板',
       exprTempInfo:'Expression 模板详情',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 611ceb264..e2055cc6b 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -61,6 +61,8 @@ const en = {
     createModel:'Create model',
     createModule: 'Create module',
     createMib:'Create MIB',
+    createAssetType:'Create asset type',
+    createAssetState:'Create asset state',
     exportExcel:'Export',
     importExcel:'Import',
     importExcelLower:'import',
@@ -911,6 +913,21 @@ const en = {
         no:'No',
       }
     },
+    assetType: {
+      assetType: "Asset Type",
+      parent: "Parent",
+      pname: "Parent name",
+      editAssetType: "Edit asset type",
+      createAssetType: "Create asset type",
+    },
+    assetState: {
+      assetState: "Asset State",
+      monitor: "Monitor",
+      alert: "Alert",
+      assetTotal: "Total assets",
+      createAssetState: "Create asset state",
+      editAssetState: "Edit asset state",
+    },
     exprTemp:{
       exprTemp:'Expression template',
       exprTempInfo:'Expression template Info',
@@ -1001,7 +1018,7 @@ const en = {
       module:'module',
       endpoint:'endpoint',
       asset:'asset',
-      
+
     },
     P1Rule:'P1: Critical, alarm that can cause business paralysis',
     P2Rule:'P2: Major, alarm that do not affect the business',
@@ -1393,7 +1410,21 @@ const en = {
         rule: "Add rule",
         asset: "Add asset",
       }
-    }
+    },
+    assetType: {
+      view: "View",
+      toAdd: "Add asset type",
+      toEdit: "Edit asset type",
+      delete: "Delete asset type",
+      save: "Save asset type",
+    },
+    assetState: {
+      view: "View",
+      toAdd: "Add asset state",
+      toEdit: "Edit asset state",
+      delete: "Delete asset state",
+      save: "Save asset state",
+    },
   },
   ...enLocale
 }
diff --git a/nezha-fronted/src/components/common/popBox/selectAssetType.vue b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
new file mode 100644
index 000000000..712e1215f
--- /dev/null
+++ b/nezha-fronted/src/components/common/popBox/selectAssetType.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-popover :placement="placement" popper-class="nz-pop nz-pop-select-panel" ref="selectAssetTypePopBox" transition="slide" v-model="popBox.show" width="820">
+    <div>
+      <div class="pop-item-wider">
+
+        <slot name="header"></slot>
+
+        <div class="select-panel-tree">
+          <el-tree
+            :data="assetTypeData"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            :props="{label: 'name', children: 'children'}"
+            @node-click="selectAssetType"
+            check-on-click-node
+            check-strictly
+            default-expand-all
+            highlight-current
+            node-key="id"
+            ref="assetTypeTree">
+            <div :class="{'tree--node__disabled': data.disabled}" class="tree--node" slot-scope="{ node, data }">
+              <span>{{ node.label }}</span>
+            </div>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+    <div slot="reference">
+      <slot name="trigger"></slot>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+    export default {
+      name: "selectAssetType",
+      props:{
+        placement: {type: String},
+        assetTypeData: {type: Array},
+        showParent: {type: Object},
+      },
+      mounted() {
+        this.$refs.assetTypeTree.setCurrentKey(this.assetType);
+      },
+      watch: {
+        showParent: {
+          immediate: true,
+          handler(n) {
+            if (n) {
+              this.assetType = JSON.parse(JSON.stringify(n));
+            }
+          }
+        },
+      },
+      data(){
+        return {
+          popBox: {show: false},
+          assetType: {id: 0, name: ""},
+        }
+      },
+      methods:{
+        filterNode(value, data) {
+          if (!value) return true;
+          return data.name.indexOf(value) !== -1;
+        },
+        esc(){
+          this.popBox.show = false;
+        },
+        //确认选择某个节点，与父组件交互
+        selectAssetType(data, checked, child) {
+          if (data.disabled) {
+            return;
+          }
+          this.$emit('selectAssetType', data);
+          this.$refs.assetTypeTree.setCurrentKey(data);
+          this.esc();
+        },
+      },
+    }
+</script>
+<style>
+  .tree--node__disabled {
+    opacity: .6;
+  }
+  .tree--node__disabled:hover {
+    cursor: not-allowed;
+  }
+</style>
+<style lang="scss">
+.movable {
+  .el-tree-node__content {
+    cursor: move;
+    .tree--node>span:first-of-type {
+      cursor: pointer;
+    }
+    .tree--node>span:last-of-type>span {
+      cursor: pointer;
+    }
+  }
+}
+.tree--node>span:last-of-type>span>i {
+  font-weight: normal !important;
+}
+.select-panel-tree {
+  height: 350px;
+  overflow: auto;
+}
+.select-panel-tree .el-tree-node__content {
+  height: 34px;
+  line-height: 34px;
+}
+.select-panel-tree .el-tree-node__content:hover {
+  color: $global-text-color-active;
+}
+.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  background-color: #F5F7FA;
+  font-weight: bold;
+  color: $global-text-color-active;
+}
+.tree--node {
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 28px);
+}
+.tree--operation {
+  opacity: 0;
+}
+.tree--node:hover .tree--operation {
+  opacity: 1;
+}
+.panel-dropdown-btn {
+  color: #60BEFF;
+}
+.panel-dropdown-btn:hover {
+  color: #409EFF;
+}
+.panel-dropdown-btn-delete {
+  color: #F98D9A;
+}
+
+.panel-dropdown-btn-delete:hover {
+  color: #D96D7A;
+}
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
new file mode 100644
index 000000000..0a98970b9
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="right-box right-box-asset-state" v-clickoutside="{obj: editAssetState, func: clickOutside}">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="asset-state-edit-del"
+              type="button"
+              v-if="editAssetState.id">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editAssetState.id ? ($t("config.assetState.editAssetState") + "  ID：" + editAssetState.id) : $t("config.assetState.createAssetState")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <div class="right-box-form-box">
+      <el-form :model="editAssetState" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px" ref="assetStateForm">
+        <!--name-->
+        <el-form-item :label="$t('overall.name')" prop="name">
+          <el-input id="asset-state-input-name" placeholder="" size="small" type="text" v-model="editAssetState.name"></el-input>
+        </el-form-item>
+        <!--ping-->
+        <el-form-item label="Ping">
+          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-ping-status"
+                     v-model="editAssetState.ping">
+          </el-switch>
+        </el-form-item>
+        <!--monitor-->
+        <el-form-item :label="$t('config.assetState.monitor')">
+          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-monitor-status"
+                     v-model="editAssetState.monitor">
+          </el-switch>
+        </el-form-item>
+        <!--alert-->
+        <el-form-item :label="$t('config.assetState.alert')">
+          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-alert-status"
+                     v-model="editAssetState.alert">
+          </el-switch>
+        </el-form-item>
+        <!--descrption-->
+        <el-form-item :label="$t('overall.remark')" prop="remark">
+          <el-input id="asset-state-input-description" placeholder="" size="small" type="textarea" v-model="editAssetState.remark"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-state-esc"
+              v-cancel="{obj: editAssetState, func: esc}">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              id="asset-state-save"
+      >
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "asset-state-right-box",
+    props: {
+      assetState: Object,
+      assetStateData: Array, // 所有数据，用于选择下拉框显示内容
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        editAssetState: {},
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      /*保存*/
+      save() {
+        this.$refs.assetStateForm.validate((valid) => {
+          if (valid) {
+            if (this.assetState.id) {
+              this.$put('/asset/stateConf', this.editAssetState).then(response => {
+                if (response.code === 200) {
+                  this.esc(true);
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('/asset/stateConf', this.editAssetState).then(response => {
+                if (response.code === 200) {
+                  this.esc(true);
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        });
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("/asset/stateConf?ids=" + this.editAssetState.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }).catch(()=>{
+        });
+      },
+    },
+    watch: {
+      assetState: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          if (n) {
+            this.editAssetState = JSON.parse(JSON.stringify(n));
+          }
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-asset-state {
+    .right-box-sub-title {
+      #add-notification {
+        border: none;
+        outline: none;
+        cursor: pointer;
+
+        i {
+          font-size: 17px;
+          background-color: #f6f6f6;
+        }
+      }
+    }
+  }
+
+  .notification-item {
+    .el-select {
+      width: 100px;
+
+    }
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
new file mode 100644
index 000000000..31fdb8bf3
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
@@ -0,0 +1,233 @@
+<template>
+  <div class="right-box right-box-asset-type" v-clickoutside="{obj: editAssetType, func: clickOutside}">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns right-box-form-delete">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="asset-type-edit-del"
+              type="button" v-has="'assetType_delete'"
+              v-if="editAssetType.buildIn !== 1 && editAssetType.id">
+        <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{editAssetType.id ? ($t("config.assetType.editAssetType") + "  ID：" + editAssetType.id) : $t("config.assetType.createAssetType")}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <div class="right-box-form-box">
+      <el-form :model="editAssetType" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px" ref="assetTypeForm">
+        <!--name-->
+        <el-form-item :label="$t('overall.name')" prop="name">
+          <el-input id="asset-type-input-name" placeholder="" size="small" type="text" v-model="editAssetType.name"></el-input>
+        </el-form-item>
+        <!--parent-->
+        <el-form-item :label="$t('config.assetType.parent')" prop="pid">
+          <select-asset-type :asset-type-data="assetTypeData2" :show-parent="showParentAssetType" @selectAssetType="selectParent" id="asset-type-parent"
+                              size="small">
+            <template v-slot:trigger>
+              <el-input :clearable="true" :readonly="true" placeholder="" size="small" v-model="showParentAssetType.name">
+                <i @click.stop="clearParent" class="el-icon-circle-close" slot="suffix" style="padding-right: 5px; cursor: pointer;"></i>
+              </el-input>
+            </template>
+          </select-asset-type>
+        </el-form-item>
+        <!--vm-->
+        <el-form-item label="VM">
+          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vm-status"
+                     v-model="editAssetType.vm">
+          </el-switch>
+        </el-form-item>
+        <!--vm host-->
+        <el-form-item label="VM host">
+          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vmh-status"
+                     v-model="editAssetType.vmh">
+          </el-switch>
+        </el-form-item>
+        <!--ssh-->
+        <el-form-item label="SSH">
+          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-ssh-status"
+                     v-model="editAssetType.ssh">
+          </el-switch>
+        </el-form-item>
+        <!--telnet-->
+        <el-form-item label="Telnet">
+          <el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-telnet-status"
+                     v-model="editAssetType.telnet">
+          </el-switch>
+        </el-form-item>
+        <!--descrption-->
+        <el-form-item :label="$t('overall.remark')" prop="remark">
+          <el-input id="asset-type-input-description" placeholder="" size="small" type="textarea" v-model="editAssetType.remark"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- end--表单-->
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-type-esc"
+              v-cancel="{obj:editAssetType, func:esc}">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
+              id="asset-type-save"
+      >
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  import selectAssetType from '../popBox/selectAssetType';
+  export default {
+    name: "asset-type-right-box",
+    props: {
+      assetType: Object,
+      assetTypeData: Array, // 所有数据，用于选择下拉框显示内容
+    },
+    components: {
+      selectAssetType
+    },
+    mounted() {
+      this.assetTypeData2 = [...this.assetTypeData];
+      this.setDisabled(this.assetTypeData2);
+    },
+    data() {
+      return {
+        rules: { //表单校验规则
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        assetTypeData2: [],
+        editAssetType: {},
+        showParentAssetType: {},
+      }
+    },
+    methods: {
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      setDisabled(data, flag) {
+        data.forEach(t => {
+          if (t.id == this.assetType.id || flag) {
+            this.$set(t, "disabled", true);
+            this.setDisabled(t.children, true);
+          } else {
+            this.$set(t, "disabled", false);
+            this.setDisabled(t.children);
+          }
+        });
+      },
+      clearParent() {
+        this.showParentAssetType = {name: "", id: ""};
+      },
+      /*保存*/
+      save() {
+        this.$refs.assetTypeForm.validate((valid) => {
+          if (valid) {
+            this.showParentAssetType.id && (this.editAssetType.pid = this.showParentAssetType.id);
+            if (this.assetType.id) {
+              this.$put('/asset/typeConf', this.editAssetType).then(response => {
+                if (response.code === 200) {
+                  this.esc(true);
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            } else {
+              this.$post('/asset/typeConf', this.editAssetType).then(response => {
+                if (response.code === 200) {
+                  this.esc(true);
+                  this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                } else {
+                  this.$message.error(response.msg);
+                }
+              });
+            }
+          } else {
+            return false;
+          }
+        });
+      },
+      selectParent(val) {
+        if (!val) {
+          return false;
+        }
+        this.showParentAssetType = val;
+      },
+      /*删除*/
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("/asset/typeConf?ids=" + this.editAssetType.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.esc(true);
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }).catch(()=>{
+        });
+      },
+      findParent(data, pid) {
+        for (let i = 0; i < data.length; i++) {
+          return data[i].id == pid ? {...data[i]} : this.findParent(data[i].children, pid);
+        }
+      }
+    },
+    watch: {
+      assetType: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          if (n) {
+            this.editAssetType = JSON.parse(JSON.stringify(n));
+            if (this.editAssetType.pid != 0) {
+              this.showParentAssetType = this.findParent(this.assetTypeData, this.editAssetType.pid);
+            }
+          }
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .right-box-asset-type {
+    .right-box-sub-title {
+      #add-notification {
+        border: none;
+        outline: none;
+        cursor: pointer;
+
+        i {
+          font-size: 17px;
+          background-color: #f6f6f6;
+        }
+      }
+    }
+  }
+
+  .notification-item {
+    .el-select {
+      width: 100px;
+
+    }
+  }
+</style>
+<style scoped>
+  .form-item-title{
+    position: absolute;
+    left: -120px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index 455e423a2..b9bdf41f7 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -1361,8 +1361,8 @@
       border-radius: 0 2px 2px 0;
     }
     .new-search .search-input-all{
-        width: 231px !important;
-        min-width: 231px;
+        width: 226px !important;
+        min-width: 226px;
         background-color: $content-right-background-color;
         color: rgba(0,0,0,.55);
         height: 28px;
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index acc927e8e..179af0419 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -94,7 +94,7 @@
                 <span>-</span>
               </template>
             </template>
-            <span v-else-if="item.prop == 'status'">
+            <template v-else-if="item.prop == 'status'">
                 <el-switch
                   v-model="scope.row.status"
                   active-value="1"
@@ -103,10 +103,8 @@
                   :disabled="isCurrentUser(scope.row.username) || !hasButton('account_toEdit') || !hasButton('account_toAdd') || (scope.row.username==='admin' && scope.row.userId==1)"
                   @change="(val)=>{statusChange(scope.row)}">
                 </el-switch>
-            </span>
-            <template v-else-if="item.prop == 'tags'">
-              <span>{{filterTags(item, scope)}}</span>
             </template>
+            <span v-else-if="item.prop == 'tags'">{{filterTags(item, scope)}}</span>
             <span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
diff --git a/nezha-fronted/src/components/page/config/assetState.vue b/nezha-fronted/src/components/page/config/assetState.vue
new file mode 100644
index 000000000..406c5967e
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/assetState.vue
@@ -0,0 +1,403 @@
+<style scoped>
+  .asset-state {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="asset-state">
+    <!-- 主页面 -->
+    <div :class="{'main-list-with-sub': bottomBox.showSubList}" class="main-list">
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
+        <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-main-right">
+          <div class="top-tool-search">
+            <search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search" ref="searchInput"></search-input>
+          </div>
+          <button :title="$t('overall.createassetState')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="assetState-add"
+                  type="button" v-has="'assetState_toAdd'">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" @before="delFlag=true" api="/asset/stateConf" id="asset-state-list-batch-delete" v-has="'assetState_delete'"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          @close="tools.showCustomTableTitle = false"
+          id="assetStateList"
+          ref="customTableTitle"
+          v-if="tools.showCustomTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        :data="tableData"
+        :height="mainTableHeight"
+        :id="tableId"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+        @sort-change="tableDataSort"
+        border
+        class="nz-table"
+        ref="assetStateTable"
+        style="width: 100%;"
+        v-loading="tools.loading"
+        v-show="bottomBox.mainResizeShow"
+      >
+        <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="40">
+        </el-table-column>
+        <el-table-column
+          :fixed="item.fixed"
+          :key="`col-${index}`"
+          :label="item.label"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+        >
+          <template :column="item" slot-scope="scope">
+            <el-switch
+              :active-value="1"
+              :disabled="!hasButton('assetState_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-if="item.prop == 'ping'"
+              v-model="scope.row.ping">
+            </el-switch>
+            <el-switch
+              :active-value="1"
+              :disabled="!hasButton('assetState_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-else-if="item.prop == 'monitor'"
+              v-model="scope.row.monitor">
+            </el-switch>
+            <el-switch
+              :active-value="1"
+              :disabled="!hasButton('assetState_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-else-if="item.prop == 'alert'"
+              v-model="scope.row.alert">
+            </el-switch>
+            <div class="content-right-options" v-if="item.prop == 'option'">
+              <span :id="'assetState-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'assetState_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
+              &nbsp;
+              <span :id="'assetState-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'assetState_delete'"><i class="nz-icon nz-icon-delete"></i></span>
+            </div>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" width="28">
+          <template :resizable="false" slot="header" slot-scope="scope">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" id="assetState-list-totop" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      </div>
+    </div>
+
+    <transition name="right-box">
+      <asset-state-box :asset-state="assetState" :asset-state-data="assetStateData" @close="closeRightBox" v-if="rightBox.show"></asset-state-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import assetStateBox from "../../common/rightBox/assetStateBox";
+  import bus from "../../../libs/bus";
+
+  export default {
+    name: "asset-state-list",
+    components: {
+      'delete-button': deleteButton,
+      'asset-state-box': assetStateBox,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
+        /*二级页面相关*/
+        bottomBox: {
+          assetStateDetail: {},
+          assetState: {},
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
+          subResizeShow: true,
+          isFullScreen: false, //全屏状态
+          showSubList: false, //是否显示二级列表
+          targetTab: '', //显示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
+
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        assetState: {},
+        assetStateData: [],
+
+        tableId: 'assetStateTable', //需要分页的table的id，用于记录每页数量
+        blankAssetState: { //空白对象
+          id: "", name: "", ping: 0, monitor: 0, alert: 0, remark: "",
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: this.$CONSTANTS.defaultPageSize,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("overall.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: "Ping",
+            prop: 'ping',
+            show: true,
+          }, {
+            label: this.$t("config.assetState.monitor"),
+            prop: 'monitor',
+            show: true,
+          }, {
+            label: this.$t("config.assetState.alert"),
+            prop: 'alert',
+            show: true,
+          }, {
+            label: this.$t("config.assetState.assetTotal"),
+            prop: 'assetTotal',
+            show: true,
+          }, {
+            label: this.$t('overall.remark'),
+            prop: 'remark',
+            show: true,
+          }, {
+            label: this.$t('overall.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: this.$t('overall.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+        scrollbarWrap: null,
+        delFlag: false,
+      }
+    },
+    methods: {
+      // 全屏
+      /*fullScreen() {
+        let vm = this;
+        this.$bottomBoxWindow.fullScreen(vm);
+      },*/
+      // 退出全屏
+      /*exitFullScreen() {
+        let vm = this;
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },*/
+      // 鼠标拖动二级列表
+      /*listResize(e) {
+        let vm = this;
+        this.$bottomBoxWindow.listResize(vm, e);
+      },*/
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.delFlag = true;
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        this.assetState = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+      },
+      /*detail(u) {
+        this.bottomBox.assetState = JSON.parse(JSON.stringify(u));
+        this.bottomBox.targetTab = "detail";
+        this.bottomBox.showSubList = true;
+      },*/
+      del(u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("/asset/stateConf?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.delFlag=true;
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      statusChange(obj) {
+        this.$nextTick(() => {
+          this.$put('/asset/stateConf', obj).then(response => {
+            if (response.code === 200) {
+              this.rightBox.show = false;
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            } else {
+              this.$message.error(response.msg);
+            }
+            this.getTableData();
+          });
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        if (!this.scrollbarWrap) {
+          this.$nextTick(() => {
+            this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper;
+            this.toTopBtnHandler(this.scrollbarWrap);
+          });
+        }
+        this.tools.loading = true;
+        this.$get('/asset/stateConf', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              response.data.list[i].status = response.data.list[i].status + "";
+            }
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total;
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.scrollbarWrap = this.$refs.assetStateTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollbarWrap);
+              });
+            }
+          }
+        })
+      },
+      add() {
+        this.assetState = this.newAssetState();
+        this.rightBox.show = true;
+      },
+      esc() {
+        this.rightBox.show = false;
+      },
+      newAssetState() {
+        return JSON.parse(JSON.stringify(this.blankAssetState));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.assetStateTable){
+          this.$refs.assetStateTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+    },
+    beforeDestroy() {
+      if(this.scrollbarWrap){
+        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+      }
+    },
+    watch: {
+      'bottomBox.showSubList': function(n) {
+        let vm = this;
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
+      },
+      tableData: {
+        deep: true,
+        handler(n) {
+          if (n.length === 0 && this.pageObj.pageNo > 1) {
+            this.pageNo(this.pageObj.pageNo-1);
+          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.assetStateTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
+        }
+      }
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = 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.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+
+      this.getTableData();
+    },
+  }
+</script>
diff --git a/nezha-fronted/src/components/page/config/assetType.vue b/nezha-fronted/src/components/page/config/assetType.vue
new file mode 100644
index 000000000..9e303e307
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/assetType.vue
@@ -0,0 +1,426 @@
+<style scoped>
+  .asset-type {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="asset-type">
+    <!-- 主页面 -->
+    <div :class="{'main-list-with-sub': bottomBox.showSubList}" class="main-list">
+      <!-- 顶部工具栏 -->
+      <div class="main-modal"></div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
+        <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-main-right">
+          <div class="top-tool-search">
+            <search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search" ref="searchInput"></search-input>
+          </div>
+          <button :title="$t('overall.createAssetType')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="assetType-add"
+                  type="button" v-has="'assetType_toAdd'">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" @before="delFlag=true" api="/asset/typeConf" id="asset-type-list-batch-delete" v-has="'assetType_delete'"></delete-button>
+        </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          @close="tools.showCustomTableTitle = false"
+          id="assetTypeList"
+          ref="customTableTitle"
+          v-if="tools.showCustomTableTitle"
+        ></element-set>
+      </transition>
+      <el-table
+        :data="tableData"
+        :height="mainTableHeight"
+        :id="tableId"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+        @sort-change="tableDataSort"
+        border
+        class="nz-table"
+        ref="assetTypeTable"
+        style="width: 100%;"
+        v-loading="tools.loading"
+        v-show="bottomBox.mainResizeShow"
+      >
+        <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          width="40">
+        </el-table-column>
+        <el-table-column
+          :fixed="item.fixed"
+          :key="`col-${index}`"
+          :label="item.label"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          v-for="(item, index) in tools.customTableTitle"
+          v-if="item.show"
+        >
+          <template :column="item" slot-scope="scope">
+            <el-switch
+              :active-value="1"
+              :disabled="scope.row.buildIn == 1 || !hasButton('assetType_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-if="item.prop == 'vm'"
+              v-model="scope.row.vm">
+            </el-switch>
+            <el-switch
+              :active-value="1"
+              :disabled="scope.row.buildIn == 1 || !hasButton('assetType_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-else-if="item.prop == 'vmh'"
+              v-model="scope.row.vmh">
+            </el-switch>
+            <el-switch
+              :active-value="1"
+              :disabled="scope.row.buildIn == 1 || !hasButton('assetType_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-else-if="item.prop == 'ssh'"
+              v-model="scope.row.ssh">
+            </el-switch>
+            <el-switch
+              :active-value="1"
+              :disabled="scope.row.buildIn == 1 || !hasButton('assetType_toEdit')"
+              :inactive-value="0"
+              @change="(val)=>{statusChange(scope.row)}"
+              active-color="#ee9d3f"
+              v-else-if="item.prop == 'telnet'"
+              v-model="scope.row.telnet">
+            </el-switch>
+            <div class="content-right-options" v-else-if="item.prop == 'option' && scope.row.buildIn != 1">
+              <span :id="'assetType-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'assetType_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
+              &nbsp;
+              <span :id="'assetType-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'assetType_delete'"><i class="nz-icon nz-icon-delete"></i></span>
+            </div>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" width="28">
+          <template :resizable="false" slot="header" slot-scope="scope">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" id="assetType-list-totop" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      </div>
+    </div>
+
+    <transition name="right-box">
+      <asset-type-box :asset-type="assetType" :asset-type-data="assetTypeData" @close="closeRightBox" v-if="rightBox.show"></asset-type-box>
+    </transition>
+  </div>
+</template>
+<script>
+  import deleteButton from "../../common/deleteButton";
+  import assetTypeBox from "../../common/rightBox/assetTypeBox";
+  import bus from "../../../libs/bus";
+
+  export default {
+    name: "asset-type-list",
+    components: {
+      'delete-button': deleteButton,
+      'asset-type-box': assetTypeBox,
+    },
+    data() {
+      return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
+        /*二级页面相关*/
+        bottomBox: {
+          assetTypeDetail: {},
+          assetType: {},
+          mainResizeShow: true, //dom高度改变时是否展示|隐藏
+          subResizeShow: true,
+          isFullScreen: false, //全屏状态
+          showSubList: false, //是否显示二级列表
+          targetTab: '', //显示二级列表中的哪个页签
+          inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
+        },
+
+        /*工具参数*/
+        tools: {
+          loading: false, //是否显示table加载动画
+          toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
+          tableHover: false, //控制滚动条和top按钮同时出现
+          showTopBtn: false, //显示To top按钮
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
+        },
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        batchDeleteObjs:[],
+        assetType: {},
+        assetTypeData: [],
+
+        tableId: 'assetTypeTable', //需要分页的table的id，用于记录每页数量
+        blankAssetType: { //空白对象
+          id: "", pid: "", pname: "", name: "", vm: 0, vmh: 0, ssh: 0, telnet: 0, buildIn: 0, remark: "",
+        },
+        pageObj: { //分页对象
+          pageNo: 1,
+          pageSize: this.$CONSTANTS.defaultPageSize,
+          total: 0
+        },
+        tableTitle: [ //原table列
+          {
+            label: 'ID',
+            prop: 'id',
+            show: true,
+            width: 80
+          }, {
+            label: this.$t("overall.name"),
+            prop: 'name',
+            show: true,
+          }, {
+            label: this.$t("config.assetType.parent"),
+            prop: 'pname',
+            show: true,
+          }, {
+            label: "VM",
+            prop: 'vm',
+            show: true,
+          }, {
+            label: 'VM host',
+            prop: 'vmh',
+            show: true,
+          }, {
+            label: "SSH",
+            prop: 'ssh',
+            show: true,
+          }, {
+            label: "Telnet",
+            prop: 'telnet',
+            show: true,
+          }, {
+            label: this.$t('overall.remark'),
+            prop: 'remark',
+            show: true,
+          }, {
+            label: this.$t('overall.option'),
+            prop: 'option',
+            show: true,
+            width: 120,
+            fixed: "right"
+          }
+        ],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 10,
+            name: this.$t('overall.name'),
+            type: 'input',
+            label: 'name',
+            disabled: false
+          }],
+        },
+        searchLabel: {}, //搜索参数
+        scrollbarWrap: null,
+        delFlag: false,
+      }
+    },
+    methods: {
+      // 全屏
+      /*fullScreen() {
+        let vm = this;
+        this.$bottomBoxWindow.fullScreen(vm);
+      },*/
+      // 退出全屏
+      /*exitFullScreen() {
+        let vm = this;
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },*/
+      // 鼠标拖动二级列表
+      /*listResize(e) {
+        let vm = this;
+        this.$bottomBoxWindow.listResize(vm, e);
+      },*/
+      closeRightBox(refresh) {
+        this.rightBox.show = false;
+        if (refresh) {
+          this.delFlag = true;
+          this.getAssetTypeTreeData();
+          this.getTableData();
+        }
+      },
+      edit(u) {
+        this.assetType = JSON.parse(JSON.stringify(u));
+        this.rightBox.show = true;
+      },
+      /*detail(u) {
+        this.bottomBox.assetType = JSON.parse(JSON.stringify(u));
+        this.bottomBox.targetTab = "detail";
+        this.bottomBox.showSubList = true;
+      },*/
+      del(u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("/asset/typeConf?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.delFlag=true;
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+              this.getAssetTypeTreeData();
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      getAssetTypeTreeData() {
+        this.$get('/asset/typeConf/tree').then(response => {
+          if (response.code === 200) {
+            this.assetTypeData = response.data.list;
+          }
+        });
+      },
+      getTableData() {
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        if (!this.scrollbarWrap) {
+          this.$nextTick(() => {
+            this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper;
+            this.toTopBtnHandler(this.scrollbarWrap);
+          });
+        }
+        this.tools.loading = true;
+        this.$get('/asset/typeConf', this.searchLabel).then(response => {
+          this.tools.loading = false;
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              response.data.list[i].status = response.data.list[i].status + "";
+            }
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total;
+            if (!this.scrollbarWrap) {
+              this.$nextTick(() => {
+                this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollbarWrap);
+              });
+            }
+          }
+        })
+      },
+      add() {
+        this.assetType = this.newAssetType();
+        this.rightBox.show = true;
+      },
+      statusChange(obj) {
+        this.$nextTick(() => {
+          this.$put('/asset/typeConf', obj).then(response => {
+            if (response.code === 200) {
+              this.rightBox.show = false;
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            } else {
+              this.$message.error(response.msg);
+            }
+            this.getTableData();
+          });
+        });
+      },
+      esc() {
+        this.rightBox.show = false;
+      },
+      newAssetType() {
+        return JSON.parse(JSON.stringify(this.blankAssetType));
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search(searchObj) {
+        this.searchLabel = {};
+        this.pageObj.pageNo = 1;
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        if(this.$refs.assetTypeTable){
+          this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0;
+        }
+        this.getTableData();
+      },
+      // 数据排序
+      tableDataSort(item){
+        let orderBy = '';
+        if(item.order === 'ascending') {
+          orderBy = item.prop;
+        }
+        if(item.order === 'descending') {
+          orderBy = '-' + item.prop;
+        }
+        this.$set(this.searchLabel, "orderBy", orderBy);
+        this.getTableData();
+      },
+    },
+    beforeDestroy() {
+      if(this.scrollbarWrap){
+        this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+      }
+    },
+    watch: {
+      'bottomBox.showSubList': function(n) {
+        let vm = this;
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
+      },
+      tableData: {
+        deep: true,
+        handler(n) {
+          if (n.length === 0 && this.pageObj.pageNo > 1) {
+            this.pageNo(this.pageObj.pageNo-1);
+          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.assetTypeTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
+        }
+      }
+    },
+    created(){
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+    },
+    mounted() {
+      //初始化表头
+      this.tools.customTableTitle = 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.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
+
+      this.getAssetTypeTreeData();
+      this.getTableData();
+    },
+  }
+</script>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 6a558e32e..7fb42fbc1 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -57,6 +57,14 @@ export default new Router({
           path: '/promServer',
           component: resolve => require(['../components/page/config/promServer.vue'], resolve),
         },
+        {
+          path: '/assetType',
+          component: resolve => require(['../components/page/config/assetType.vue'], resolve),
+        },
+        {
+          path: '/assetState',
+          component: resolve => require(['../components/page/config/assetState.vue'], resolve),
+        },
         {
           path: '/dc',
           component: resolve => require(['../components/page/config/dc.vue'], resolve),