From 7f894f6b79356448dbb10a3cb781f0093d5425ff Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 15 Jan 2020 22:21:19 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E3=80=81=E4=B8=AD=E6=96=87=E5=9B=BD=E9=99=85=E5=8C=96=E6=95=B4?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/index.scss    |   3 +-
 nezha-fronted/src/assets/stylus/main.scss     |  13 +-
 .../src/components/common/header.vue          |  90 ++--
 .../src/components/common/language/cn.js      | 414 ++++++++++++++----
 .../src/components/common/language/en.js      |  16 +-
 .../src/components/page/asset/asset.vue       |  95 ++--
 nezha-fronted/src/store/index.js              |   5 +-
 7 files changed, 460 insertions(+), 176 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/index.scss b/nezha-fronted/src/assets/stylus/index.scss
index 17206a0de..9a81bf409 100644
--- a/nezha-fronted/src/assets/stylus/index.scss
+++ b/nezha-fronted/src/assets/stylus/index.scss
@@ -1,6 +1,7 @@
 $global-text-color-active: #ee9d3f; // 全局文字active字色
 
-$header-text-color: #fff; // header默认字色
+$header-text-color: #e5e5e5; // header默认字色
+$header-text-color-active: #fff; // header高亮字色
 $header-text-color-hover: #444; //header hover字色
 
 $content-left-text-color: #666; //左侧菜单默认字色
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 36a1e0f64..52e3fb255 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -78,7 +78,6 @@ html {
   cursor: pointer;
   line-height: 18px;
   font-size: 14px;
-  font-weight: 600;
   padding: 4px 6px;
   text-align: center;
   box-sizing: border-box;
@@ -333,10 +332,11 @@ html {
   display: flex;
   height: 36px;
   min-width: 100px;
-
 }
-.nz-table-gear
-{
+.content-right .el-table__row td:first-of-type {
+  padding-left: 33px;
+}
+.nz-table-gear {
   display: block;
   width: 38px;
   margin-left:-10px;
@@ -346,6 +346,9 @@ html {
   border-right:2px solid #d4d4d4;
   box-sizing: border-box;
 }
+.nz-table-gear>i {
+  cursor: pointer;
+}
 .nz-table-txt{
   padding-left:10px;
   display: flex;
@@ -756,4 +759,4 @@ html {
 .el-icon-setting:before {
   content: "\E6CA";
   color: #BA3939;
-}
\ No newline at end of file
+}
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 9c98ce110..e29e6d413 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -38,11 +38,11 @@
 
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpToProject(projectData[0])" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
+          <div @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
         </template>
         <template v-for="(item, index) in projectData">
           <el-menu-item :index="'2-' + index">
-            <div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item )}">
+            <div @click="jumpToProject(item)" :class="{'menu-item-active' :(activeIndex == 'project' && activeItemIndex == item.id)}">
               <span>{{item.name}}</span>
               <div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit"
                                                                           class="el-icon-edit-outline"></i></div>
@@ -56,7 +56,7 @@
         </template>
         <template v-for="(item, index) in assetData">
           <el-menu-item :index="'3-' + index">
-            <div @click="jumpToAsset('asset',item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && activeItemIndex == item.id ) }">
+            <div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
               <span>{{item.name}}</span>
               <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
                 <template v-slot:optionZone>
@@ -71,18 +71,18 @@
       </el-submenu>
       <el-submenu index="4-0" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
+          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
         </template>
         <el-menu-item index="4-1">
-          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.alertList')}}</div>
+          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
         </el-menu-item>
         <el-menu-item index="4-2">
-          <div @click="jumpTo('alertConfig')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.alertConfig')}}</div>
+          <div @click="jumpTo('alertConfig')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account')" :class ="activeIndex == 'account' ? 'menu-active' :''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' ? 'menu-active' :''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
           <div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
@@ -129,6 +129,7 @@
         assetData: [],
         activeIndex:'',
         activeItemIndex:'',
+        activeItemIndexes: [],
         editPanel:{//新增or编辑的panel
           id:'',
           name: ''
@@ -165,32 +166,32 @@
         },
         createMenu: [ //新增按钮内容
           {
-            label: this.$t('dashboard.panel.createPanelTitle'),
+            label: this.$t('dashboard.panel.title'),
             url: 'panel',
             type: 0
           },
           {
-            label: this.$t('project.project.createProject'),
+            label: this.$t('project.project.project'),
             url: 'project',
             type: 1
           },
           {
-            label: this.$t('project.module.createModule'),
+            label: this.$t('project.module.module'),
             url: 'project',
             type: 2
           },
           {
-            label: this.$t('project.endpoint.createEndpoint'),
+            label: this.$t('project.endpoint.endpoint'),
             url: 'project',
             type: 3
           },
           {
-            label: this.$t('asset.createAsset'),
+            label: this.$t('asset.asset'),
             url: 'asset',
             type: 4
           },
           {
-            label: this.$t('alert.config.createAlertConfig'),
+            label: this.$t('alert.config.alertConfig'),
             url: 'alertConfig',
             type: 5
           }
@@ -208,7 +209,10 @@
     },
     methods: {
       jumpTo(data) {
-         
+        if (data != "asset") {
+          this.activeItemIndexes = [];
+          this.$store.state.assetData = {selectedData: [], step: 0, type: -1};
+        }
         this.$router.push({
           path: "/" + data,
           query: {
@@ -244,19 +248,20 @@
           this.$refs.alertConfigBox.show(true, true);
         }
       },
-      jumpToAsset(data, id) {
-        if (id != this.$store.state.assetData.selectedData) {
-          this.$store.state.assetData = {selectedData: id, step: this.$store.state.assetData.step+1};
+      jumpToAsset(id) {
+        let index = this.indOf(this.activeItemIndexes, id);
+        if (index > -1) {
+          this.activeItemIndexes.splice(index, 1);
         } else {
-          this.$store.state.assetData.step = this.$store.state.assetData.step+1;
+          this.activeItemIndexes.push(id);
         }
-        this.activeItemIndex = id
-        this.jumpTo(data);
+        this.$store.state.assetData = {selectedData: this.activeItemIndexes, step: this.$store.state.assetData.step+1, type: 1};
+        this.jumpTo('asset');
       },
       jumpToProject(p) {
         this.currentProject = p;
         this.$store.commit('setProject', p);
-        this.activeItemIndex = p
+        this.activeItemIndex = p.id;
         this.jumpTo('project');
       },
       getUserData() {
@@ -352,6 +357,7 @@
             }
             if (!flag && this.projectData.length > 0) {
               this.currentProject = this.projectData[0];
+              this.activeItemIndex = this.currentProject.id;
               this.$store.commit('setProject', this.currentProject);
             }
           }
@@ -361,6 +367,18 @@
         this.$refs.projectBox.show(true,true);
         this.editProject = Object.assign({}, p);
       },
+      indOf(a, b) {
+        let c = [];
+        for (let i = 0; i < a.length; i++) {
+          c.push(a[i]);
+        }
+        return c.indexOf(b);
+        /*if (c.indexOf(b) > -1) {
+          return true;
+        } else {
+          return false;
+        }*/
+      },
       panelListReload(){
         if(this.$route.path==='/panel'){
           this.$store.commit('panelListChange',true);//新增panel之后,且当前页面为panel页面，则更新panel列表
@@ -382,9 +400,8 @@
       this.getAssetData();
       this.getProjectList();
       // 刷新后有高亮
-      let activePath = this.$route.path.slice(1)
-      this.activeIndex = activePath
-      // console.log(activePath,this.activeIndex)
+      let activePath = this.$route.path.slice(1);
+      this.activeIndex = activePath;
     },
     computed: {
       projectListReloadWatch() {
@@ -393,9 +410,20 @@
       getIdcData() {
         return this.$store.state.assetDcList;
       },
-
+      getAssetDcData() {
+        return this.$store.state.assetData
+      },
     },
     watch: {
+      getAssetDcData: {
+        handler(newVal) {
+          if (newVal.type == 0) {
+            this.activeItemIndexes = newVal.selectedData;
+          }
+        },
+        deep: true,
+        immediate: true
+      },
       getIdcData: {
         handler(newVal, oldVal) {
           this.getAssetData()
@@ -418,7 +446,7 @@
     background-color: transparent;
   }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title .menu-active{
-    border-bottom:$global-text-color-active solid 2px;
+    border-bottom: $global-text-color-active solid 2px;
     border-radius: 2px;
     height: 26px;
     line-height: 16px;
@@ -426,7 +454,10 @@
     font-size: 16px;
     margin: 0 auto -8px;
     font-weight: 500;
-    
+    color: $header-text-color-active;
+  }
+  .header .el-menu--horizontal>.el-submenu .el-submenu__title .menu-active:hover {
+    color: $header-text-color-hover;
   }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title i {
     color: inherit;
@@ -447,7 +478,7 @@
     padding: 0;
   }
   .header .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
-    color: #444 !important;
+    color: $header-text-color-hover !important;
   }
 
   .el-menu.el-menu--horizontal {
@@ -522,6 +553,9 @@
 </style>
 
 <style scoped>
+  .menu-create-title {
+    font-size: 14px;
+  }
   .header {
     position: relative;
     box-sizing: border-box;
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 52d0fd9c8..4bdd1d7d7 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1,62 +1,71 @@
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
 const cn = {
-  overall: {
-    dashboard: '仪表盘',
-    project: '工程',
+  overall:{
+    dashboard:'仪表盘',
+    project:'系统',
     alert: "告警",
-    asset: '资产',
-    config: '设置',
+    asset:'资产',
+    config:'设置',
     create: '新增',
-    edit: '修改',
+    edit: '编辑',
     delete: '删除',
     esc: '取消',
     cancel: '取消',
     save: '保存',
     search: '搜索',
-    add: '新增',
-    option: "操作"
+    add: "新增",
+    option: "操作",
+    clearAll: "清空",
+    clear: "清除",
+    name: '名称',
+    cover: '覆盖',
+    signOut: '登出',
+    select: '选择',
+    ok: 'Ok',
+    all: '全选',
+    other: "其他"
   },
   dashboard:{
     title:'仪表盘',
     panel:{
-      title:'看板',
+      title:'面板',
       searchItem:{
-        name:'标题'
+        name:'名称'
       },
       //面板-侧滑框
-      createPanelTitle: "创建面板",
+      createPanelTitle: "新增面板",
       selectPanelTitle:"选择面板",
-      createPanelTitleSec:"创建新面板",
-      editPanelTitle: "编辑面板",
+      createPanelTitleSec:"新增面板",
+      editPanelTitle: "面板",
       panelForm:{
-        panelName:"面板名称" ,
+        panelName:"面板名称",
         panelId:"ID"
-      } ,
+      },
       //图表-侧滑框
-      createChartTitle: "Create Chart",
-      editChartTitle: "Edit Chart",
+      createChartTitle: "新增图表",
+      editChartTitle: "编辑图表",
       chartForm:{
         chartId:"ID",
         chartName:"图表名称",
-        type:"类型",
+        type:"类别",
         typeVal:{
           line:{
-            label:"曲线"
+            label:"线"
           },
           bar:{
-            label:"柱状图"
+            label:"柱"
           },
           table:{
-            label:"表格",
+            label:"表格"
           }
         },
-        width:"宽度",
-        high:"高度",
-        metric:"指标",
-        addMetric:"添加指标",
+        width:"宽",
+        high:"高",
+        metric:"Metric",
+        addMetric:"新增Metric",
       },
       chartTableColumn:{
-        metric:'指标',
+        metric:'metric',
         label:'标签',
         time:'时间',
         value:'值',
@@ -64,75 +73,245 @@ const cn = {
       startTime:'开始时间',
       endTime:'结束时间',
       to:'至',
-      recOne:'近1小时',
-      recFour:'近4小时',
-      recOneDay:'近1日',
-      yesterday:'昨日',
-      recSevenDay:'近7日',
-      recOneMonth:'近一个月',
+      recOne:'最近1小时',
+      recFour:'最近4小时',
+      recOneDay:'最近1天',
+      yesterday:'昨天',
+      recSevenDay:'最近1星期',
+      recOneMonth:'最近1月',
       curMonth:'本月',
       lastMonth:'上月',
       refreshInterval:{
         never:'从不',
-        oneMinute:'1分钟',
-        threeMinutes:'3分钟',
-        fiveMinutes:'5分钟',
-        tenMinutes:'10分钟',
+        oneMinute:'1 分',
+        threeMinutes:'3 分',
+        fiveMinutes:'5 分',
+        tenMinutes:'10 分',
       },
       view:'查看',
-      confirm:'确 定',
-      cancel:'取 消'
+      confirm:'Ok',
+      cancel:'取消'
     },
     metric:{
-      name:"指标名称",
+      name:"Metric",
       normal:"Normal",
       expert:"Expert",
-      label:"指标标签",
-      addMetric:"添加指标",
-      expertTip:"请输入表达式",
-      goPanelTip:"是否前去看板,查看创建的图表？",
-      previewChart:"预览图表",
-      singleChartShow:"单图展示",
-      multiChartsShow:"多图展示",
-      createPanel:"创建面板",
-      selectPanel:"选择已有面板",
-      saveChartToPanel:"保存图表到看板"
+      label:"MetricLabel",
+      addMetric:"Create Metric",
+      expertTip:"Please enter an expression",
+      goPanelTip:"Go to the panel to view the created chart ?",
+      previewChart:"Preview Chart",
+      singleChartShow:"Single Graph Display",
+      multiChartsShow:"Multi Graph Display",
+      createPanel:"Create Panel",
+      selectPanel:"Select Panel",
+      saveChartToPanel:"Save Chart To Panel"
     },
     metricPreview:{
-      title:'指标预览',
+      title:'Metric Preview',
     },
-    refresh:'刷新',
-    edit:'编辑',
-    delete:'删除',
-    screen:'全屏'
+    refresh:'refresh',
+    edit:'edit',
+    delete:'delete',
+    screen:'fullScreen'
+
   },
-  asset: {
+  validate: { //校验规则
+    required: '必填项',
+    number: '必须是数字',
+    email:'不合法的E-mail地址',
+    tel:'不合法的电话号码',
+    host:'不合法的IP',
+    fileSize:'文件过大',
+    config: {
+      account: {
+
+      }
+    }
+  },
+  search: {
+    searchTip: '点击或回车执行搜索',
+    recentSearch: '搜索记录',
+    noRecentSearch: '无搜索记录'
+  },
+  tip: {
+    confirmDelete: "确认删除吗？",
+    assetConfirmDelete: '关联的Endpoint和告警将会被删除，确认删除吗？',
+    yes: "是",
+    no: "否",
+    deleteSuccess: "删除成功",
+    saveSuccess: "保存成功",
+    coverSuccess: '覆盖成功',
+    refreshLater:'请稍后刷新'
+  },
+  asset:{
+    asset: '资产',
+    EditAsset:'Edit Asset',
+    createAssetTab:{
+      title:'新增资产',
+      sn:'SN',
+      host:'Host',
+      state:'状态',
+      selectTip:'请选择',
+      inStock: '在库',
+      notInStock: '出库',
+      assetInfo:'资产信息',
+      assetType:'资产类型',
+      assetTypeTab:{
+        assetType:'资产类型',
+        addAssetType:'新增资产类型',
+        existAssetType:'已存在的资产类型'
+      },
+      vendor:'厂商/型号',
+      vendorTab:{
+        vendor:'厂商/型号',
+        vendorName:'新厂商',
+        existVendor:'已有厂商',
+        modelName:'新型号',
+        existModel:'已有型号'
+      },
+      purchaseDate:'购买日期',
+      dataSelectTip:'请选择日期',
+      dc:'DC',
+      dcName:'DC名称',
+      AddIdcTab:{
+        title:'新增DC',
+        dcName:'DC名称',
+        location:'地区',
+        principal:'负责人',
+        tel:'电话'
+      },
+      editIdcTab:{
+        title:'编辑DC',
+        dcName:'DC名称',
+        location:'地区',
+        principal:'负责人',
+        tel:'电话'
+      },
+      location:'地区',
+      principal:'负责人',
+      tel:'电话',
+      cabinet: '机柜',
+      AddCabinetTab:{
+        title:'新增机柜',
+        name:'名称',
+        uSize:'U位',
+        remark:'描述',
+        DC:'DC',
+      },
+      editCabinetTab:{
+        title:'编辑机柜',
+        name:'名称',
+        uSize:'U位',
+        remark:'描述',
+        DC:'DC',
+      },
+      uSize:'U位',
+      remark:'描述',
+      cli:'CLI账号',
+      loginType:'登录类型',
+      password:'密码',
+      ssh:'SSH-Key',
+      account:'用户名',
+      port:'端口',
+      upload:'上传',
+      clickToUpload:'上传',
+      clickToCover:'覆盖',
+      sshKeyWasConfig:'SSH-KEY已配置'
+    },
+    editAssetTab:{
+      title:'新增资产',
+      sn:'SN',
+      host:'Host',
+      state:'状态',
+      modelId:'组件',
+      alert:'告警信息',
+      assetInfo:'资产信息',
+      assetType:'资产类型',
+      vendor:'厂商/型号',
+      vendorTab:{
+        vendor:'厂商/型号',
+        vendorName:'新厂商',
+        existVendor:'已有厂商',
+        modelName:'新型号',
+        existModel:'已有型号'
+      },
+      purchaseDate:'购买日期',
+      dataSelectTip:'请选择日期',
+      dc:'DC',
+      dcName:'DC名称',
+      AddIdcTab:{
+        title:'新增DC',
+        dcName:'DC名称',
+        location:'地区',
+        principal:'负责人',
+        tel:'电话'
+      },
+      editIdcTab:{
+        title:'编辑DC',
+        dcName:'DC名称',
+        location:'地区',
+        principal:'负责人',
+        tel:'电话'
+      },
+      location:'地区',
+      principal:'负责人',
+      tel:'电话',
+      cabinet: '机柜',
+      AddCabinetTab:{
+        title:'新增机柜',
+        name:'名称',
+        uSize:'U位',
+        remark:'描述',
+        DC:'DC',
+      },
+      editCabinetTab:{
+        title:'编辑机柜',
+        name:'名称',
+        uSize:'U位',
+        remark:'描述',
+        DC:'DC',
+      },
+      uSize:'U位',
+      remark:'描述',
+      cli:'CLI账号',
+      loginType:'登录类型',
+      password:'密码',
+      ssh:'SSH-Key',
+      account:'用户名',
+      port:'端口',
+      upload:'上传',
+      clickToUpload:'上传',
+    },
     tableTitle: {
       id: 'ID',
       assetType: '资产类型',
-      device: 'Device SN',
-      ip: 'IP',
-      assetState: '资产状态',
-      module: 'Module',
-      alert: 'alert',
-      dataCenter: '数据中心',
+      device: 'SN',
+      host: 'Host',
+      assetState: '状态',
+      modules: '组件',
+      alerts: '告警信息',
+      dataCenter: 'DC',
       cabinet: '机柜',
       model: '型号',
       manufacturer: '厂商',
-      procurementDate: '采购日期',
-      warrantyDate: '保修截止期',
-      deviceDuty: '设备责任人',
-      option: '操作',
+      procurementDate: '购买日期',
+      principal: '负责人',
+      principalTel: '电话',
+      option: "操作"
     },
     tagTableTitle: {
-      projectName: '项目名称',
-      moduleName: 'Module Name',
+      projectName: '系统名称',
+      moduleName: '组件名称',
       endPoint: 'EndPoint',
-      alert: 'alert',
+      alert: '告警',
     },
+
   },
   config: {
+    config: "设置",
     account: {
+      accountList: "用户列表",
       //列表表头
       account: "用户",
       language: "语言",
@@ -144,52 +323,103 @@ const cn = {
       //侧滑框
       accountId: "用户ID",
       createAccount: "新增用户",
-      editAccount: "修改用户",
-      notCurrentlySupport: '暂不支持'
+      editAccount: "编辑用户",
+      notCurrentlySupport: '暂不支持',
+      password: '密码'
     },
     promServer: {
+      promServerList: "Prometheus Server",
       //侧滑框
       promId: "Prometheus Server ID",
       createProm: "新增Prometheus Server",
-      editProm: "修改Prometheus Server"
+      editProm: "修改Prometheus Server",
+      type: "类别"
     },
   },
   alert: {
     alert: "告警",
-    alertList: "告警列表",
-    alertConfig: "告警设置",
+    message: '信息',
+    rule: '规则',
+    alertList: "告警信息",
+    alertConfig: "告警规则",
+    alertName: "告警名称",
+    severity: "等级",
+    description: "描述",
+    summary: "概要",
+    startAt: "开始时间",
+    endAt: "结束时间",
     list: {
-      alertName: "告警名称",
-      linkedId: "关联ID",
-      severity: "告警级别",
-      type: "类型",
-      summary: "摘要",
-      description: "描述",
+      //表头
+      linked: "关联",
+      type: "类别",
       state: "状态",
-      startAt: "时间",
-      endAt: "消除时间",
       charts: "图表",
 
       //表内容
-      projectalert: "Project Alert",
-      modulealert: "Module Alert",
-      devicealert: "Device Alert",
-      pending: "Pending",
-      expired: "Expired"
+      projectAlert: "系统告警",
+      moduleAlert: "组件告警",
+      deviceAlert: "设备告警",
+      pending: "待处理",
+      expired: "已过期"
+    },
+    config: {
+      name: "名称",
+      receiver: "用户组",
+      expr: "表达式",
+      for: "For (s)",
+      link: '关联',
+      option: "操作",
+      alertConfig: "告警规则",
+      createAlertConfig: "新增告警规则",
+      editAlertConfig: "修改告警规则",
+      medium: "中",
+      high: "高",
+      low: "低",
+      typeOption: {
+        project: '系统',
+        module: '组件',
+        asset: '设备'
+      }
     }
   },
   project: {
+    project: {
+      project: "系统",
+      projectName: "系统名称",
+      editProject: "编辑系统",
+      description: "描述",
+      createProject: "新增系统"
+    },
+    module: {
+      module: "组件",
+      moduleName: "组件名称",
+      editModule: "编辑组件",
+      description: "描述",
+      createModule: "新增组件",
+      tip: {
+        defaultEndpointSet: "默认的Endpoint设置",
+        relation: "组件关联的Endpoint将默认配置以下端口/路径/参数"
+      }
+    },
     endpoint: {
+      createEndpoint: "新增Endpoint",
+      editEndpoint: "编辑Endpoint",
       endpoint: "Endpoint",
       endpointId: "Endpoint ID",
       host: "Host",
-      port: "Port",
-      param: "Param",
-      path: "Path",
-      asset: "Asset",
-      lastUpdate: "Last Update",
+      port: "端口",
+      param: "参数",
+      path: "路径",
+      asset: "设备",
+      lastUpdate: "最后更新时间",
+      moduleParameter: "组件参数"
     },
-    metrics: "Metrics",
+    metrics: {
+      metrics: "Metrics",
+      name: '名称',
+      type: '类型',
+      description: '描述'
+    }
   },
   ...zhLocale
 }
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ca77113b4..ca4932759 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -119,9 +119,9 @@ const en = {
   validate: { //校验规则
     required: 'Required',
     number: 'Must be a number',
-    email:'E-mail is invalide',
-    tel:'Phone number is invalide',
-    host:'IP Address is invalide',
+    email:'E-mail is invalid',
+    tel:'Phone number is invalid',
+    host:'IP Address is invalid',
     fileSize:'upload file is too large',
     config: {
       account: {
@@ -146,7 +146,6 @@ const en = {
   },
   asset:{
     asset: 'Asset',
-    createAsset: "Create Asset",
     EditAsset:'Edit Asset',
     createAssetTab:{
       title:'Create Asset',
@@ -223,9 +222,8 @@ const en = {
     editAssetTab:{
       title:'Create Asset',
       sn:'SN',
-      host:'host',
-      state:'state',
-      selectTip:'please select',
+      host:'Host',
+      state:'State',
       modelId:'ModelId',
       alert:'Alert',
       assetInfo:'资产信息',
@@ -340,6 +338,8 @@ const en = {
   },
   alert: {
     alert: "Alert",
+    message: 'Message',
+    rule: 'Rule',
     alertList: "Alert Message",
     alertConfig: "Alert Rule",
     alertName: "Alert Name",
@@ -398,7 +398,7 @@ const en = {
       createModule: "Create Module",
       tip: {
         defaultEndpointSet: "Default Endpoint Set",
-        relation: "Endpoints associated with Module will reference Port/Path/Param/Params by default"
+        relation: "Endpoints associated with Module will reference Port/Path/Param by default"
       }
     },
     endpoint: {
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index eb5a52137..691ed65c4 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -4,11 +4,11 @@
       <div class="sidebar-title">Asset</div>
       <div class="sidebar-info">
         <!--<div class="sidebar-info-header">ALL</div>-->
-        <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" :model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
+        <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
           <div class="sidebar-info-item-txt" style="font-weight: bold;">All</div>
         </el-checkbox>
-        <el-checkbox-group v-model="checkList" size="small" @change="getSingleAsset()">
-          <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
+        <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
+          <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
                        v-for="(item,key) in checkListData" :key="key" :label=item.id>
             <div class="sidebar-info-item-txt">{{item.name}}</div>
             <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
@@ -28,7 +28,7 @@
         <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right" id="asset-add">
           <span class="top-tool-btn-txt">
              <i class="nz-icon-create-square nz-icon"></i>
-            {{$t('overall.add')}}</span>  
+            {{$t('overall.add')}}</span>
           <!-- ADD按钮 -->
         </button>
         <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
@@ -48,9 +48,9 @@
           :key="`col_${index}`"
           :label="item.label"
         >
-          <template slot="header" slot-scope="scope" class='nav-table-column-header'>
+          <template slot="header" slot-scope="scope">
             <span v-if="index==0" class='nav-tabel-header'>
-                <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                <span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear">
                     <i class="nz-icon nz-icon-gear"></i>
                 </span>
                 <span class="nz-table-txt">{{item.label}}</span>
@@ -195,7 +195,7 @@
             label: this.$t("asset.tableTitle.id"),
             prop: 'ID',
             show: true,
-            width: 60
+            width: 90
           }, {
             label: this.$t("asset.tableTitle.assetType"),
             prop: '资产类型',
@@ -310,7 +310,8 @@
         editUnitShow: false,
         flag: false,
         checkAllFlag: false,
-        checkAllHandler: false
+        checkAllHandler: false,
+        assetClick: false,
       }
     },
     computed: {
@@ -324,14 +325,12 @@
     watch: {
       getData: {
         handler(newVal) {
-          if (this.checkList.indexOf(newVal.selectedData) >= 0) {
-            this.checkList.splice(this.checkList.indexOf(newVal.selectedData), 1);
-          } else {
-            this.checkList.push(newVal.selectedData);
+          if (newVal.type == 1) {
+            this.checkList = newVal.selectedData;
+            this.assetClick = false;
           }
-          this.getSingleAsset();
-          this.getAssetData();
         },
+        immediate: true,
         deep: true,
       },
       getFlushData: {
@@ -342,19 +341,22 @@
           }
         }
       },
-      checkList(n) {
-        if (n.length > 0 ) {
-          this.pageObj.idcIds = n.join(',');
-        } else {
-          this.pageObj.idcIds = '';
-        }
-        this.getAssetData();
+      checkList(n, o) {
+        setTimeout(()=>{
+          if (n.length > 0 ) {
+            this.pageObj.idcIds = n.join(',');
+          } else {
+            this.pageObj.idcIds = '';
+          }
+          if (this.assetClick) {
+            this.$store.state.assetData = {selectedData: n, step: this.$store.state.assetData.step+1, type: 0};
+          } else {
+            this.getSingleAsset();
+          }
+          this.getAssetData();
+        }, 50);
       }
     },
-    created() {
-      this.checkList.push(this.$store.state.assetData.selectedData)
-      this.getSingleAsset()
-    },
     methods: {
       dcSelectAll(val) { //DC全选
         if (this.checkListData.length > 0) {
@@ -526,6 +528,17 @@
           this.$refs['assetEditUnit'].tabView = false
         }
       },
+      indOf(a, b) {
+        let c = [];
+        for (let i = 0; i < a.length; i++) {
+          c.push(a[i]);
+        }
+        if (c.indexOf(b) > -1) {
+          return true;
+        } else {
+          return false;
+        }
+      },
       tagShow(data, id, type) {
         if (data === 'showAdd') {
           this.addUnitShow = true
@@ -564,19 +577,17 @@
             }
           });
         }
-      }
-      ,
+      },
+
+      changeCheckBox() {
+        this.assetClick = true;
+        this.getSingleAsset();
+      },
       getSingleAsset() {
         let checkedCount = this.checkList.length;
-        this.checkAllFlag = checkedCount === this.checkListData.length;
-        this.checkAllHandler = checkedCount > 0 && checkedCount < this.checkListData.length;
-
-        /*if (this.checkList.length > 0 ) {
-          this.pageObj.idcIds = this.checkList.join(',');
-        } else {
-          this.pageObj.idcIds = '';
-        }
-        this.getAssetData();*/
+        let allCount = this.checkListData.length;
+        this.checkAllFlag = ((checkedCount == allCount) && allCount > 0);
+        this.checkAllHandler = checkedCount > 0 && checkedCount < allCount;
       },
       pageNo(val) {
         this.pageObj.pageNo = val;
@@ -604,8 +615,6 @@
         }
       },
       flushData() {
-        // this.addUnitShow=false;
-        // this.editUnitShow=false;
         this.getSingleAsset();
         this.getAssetData();
         this.getIDCOptionData();
@@ -630,8 +639,14 @@
       }
     },
     mounted() {
+      setTimeout(()=>{
+        if (this.$store.state.assetData.selectedData.length > 0) {
+          this.checkList = [];
+          this.checkList = this.$store.state.assetData.selectedData;
+        }
+      }, 50);
+
       this.getUserData();
-      this.getAssetData();
       this.getIDCOptionData();
       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))
@@ -662,7 +677,7 @@
     display: inline-block;
     font-size: 12px;
     margin-right:6px;
-  } 
+  }
 </style>
 <style lang="scss">
   .asset .content-left .el-checkbox__input.is-focus .el-checkbox__inner,
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index 572580a29..ceafe10ae 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -5,8 +5,9 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
     assetData:{
-      selectedData:'',
-      step: 0
+      selectedData: [],
+      step: 0,
+      type: -1  //0: asset  1: header
     },
     assetDcList: 0, //监听此值，改变则刷新dc列表
     assetForAlertList: '', //asset页跳转alertList时传递的assetId