From 50a8a2c8787f9e9f772ef27db6083589a401d65d Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 9 Jan 2020 14:57:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A2=9E=E5=BC=BA=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=8F=90=E9=86=92=E3=80=81=E5=A2=9E=E5=8A=A0asset=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=ADdc=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.所有列表中可操作的列文字颜色都调整为蓝色
2.增加asset搜索项：state
3.asset列表中的dc项可以点开编辑了
---
 nezha-fronted/src/assets/css/main.css         |  4 +
 .../src/components/common/dcConfig.vue        |  6 +-
 .../src/components/common/elementSet.vue      |  2 +-
 .../src/components/common/language/en.js      |  9 ++-
 .../src/components/common/searchInput.vue     |  3 +-
 .../components/common/searchSelectInfo.vue    |  9 +++
 .../src/components/page/alert/config.vue      |  6 +-
 .../src/components/page/alert/list.vue        | 14 ++--
 .../src/components/page/asset/asset.vue       | 75 ++++++++++++-------
 .../src/components/page/config/account.vue    |  4 +-
 .../src/components/page/config/promServer.vue |  3 +-
 .../src/components/page/project/project.vue   |  4 +-
 12 files changed, 92 insertions(+), 47 deletions(-)

diff --git a/nezha-fronted/src/assets/css/main.css b/nezha-fronted/src/assets/css/main.css
index f3f9de3b3..2838a3a7e 100644
--- a/nezha-fronted/src/assets/css/main.css
+++ b/nezha-fronted/src/assets/css/main.css
@@ -233,6 +233,10 @@ html {
 .content-right-option .el-icon-view {
   color: #60BEFF;
 }
+.link { /*有外联的字段*/
+  color: #1166bb;
+  cursor: pointer;
+}
 .content-right-option .el-icon-view:hover {
   color: #409EFF;
 }
diff --git a/nezha-fronted/src/components/common/dcConfig.vue b/nezha-fronted/src/components/common/dcConfig.vue
index 15310edf0..a0b20b171 100644
--- a/nezha-fronted/src/components/common/dcConfig.vue
+++ b/nezha-fronted/src/components/common/dcConfig.vue
@@ -3,14 +3,14 @@
     <div class="pop-window-assetType-content">
       <!-- begin--顶部按钮-->
       <div class="pop-top-btns">
-        <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+        <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
           <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
         </button>
-        <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+        <button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
 
-        <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
+        <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
           <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
         </button>
       </div>
diff --git a/nezha-fronted/src/components/common/elementSet.vue b/nezha-fronted/src/components/common/elementSet.vue
index 3d7cd5c14..300e385d8 100644
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -47,7 +47,7 @@ export default {
   props: ["dropCol"],
   data() {
     return {
-      other: this.$t("i18n.overall.other"),
+      other: this.$t("overall.other"),
       event_positiony: 0,
       event_positionx: 0,
       eventfixedVal: {},
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 13040e35a..92a0c5ba7 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -22,7 +22,8 @@ const en = {
     signOut: 'Sign Out',
     select: 'Select',
     ok: 'Ok',
-    all: 'All'
+    all: 'All',
+    other: "Other"
   },
   dashboard:{
     title:'Dashboard',
@@ -278,8 +279,8 @@ const en = {
       device: 'SN',
       host: 'Host',
       assetState: 'State',
-      module: 'Module',
-      alert: 'Alert',
+      endpoints: 'Endpoints',
+      alerts: 'Alerts',
       dataCenter: 'Data Center',
       cabinet: 'Cabinet',
       model: 'Model',
@@ -337,7 +338,7 @@ const en = {
     endAt: "End Time",
     list: {
       //表头
-      linkedId: "Linked ID",
+      linked: "Linked",
       type: "Type",
       state: "Status",
       charts: "Charts",
diff --git a/nezha-fronted/src/components/common/searchInput.vue b/nezha-fronted/src/components/common/searchInput.vue
index ae950b7a5..2244bd99d 100644
--- a/nezha-fronted/src/components/common/searchInput.vue
+++ b/nezha-fronted/src/components/common/searchInput.vue
@@ -474,6 +474,8 @@
                         if(val.type == 'select'){
                             if (val.label == 'alertType' || val.label == 'promType') {
                                 objectInfo.type = val.valnum;
+                            } else if (val.label == 'assetState') {
+                                objectInfo.state = val.valnum;
                             } else if(typeof(val.valnum) == "undefined"||val.valnum == ''){
                                 this.selectInfoList[val.label].forEach(item=>{
                                     if(item.label == val.val){
@@ -487,7 +489,6 @@
                             }else {
                                 objectInfo[val.label] = val.valnum;
                             }
-                            console.info(val)
                         } else if(val.type == 'selectSelf'){
                           objectInfo[val.label] = val.valnum;
                         } else if(val.type == 'selectAction'){ //新增日志判断
diff --git a/nezha-fronted/src/components/common/searchSelectInfo.vue b/nezha-fronted/src/components/common/searchSelectInfo.vue
index cdc9e2d2e..dd4696af5 100644
--- a/nezha-fronted/src/components/common/searchSelectInfo.vue
+++ b/nezha-fronted/src/components/common/searchSelectInfo.vue
@@ -38,6 +38,15 @@
         value: 3,
         label: i18n.t('alert.config.typeOption.asset')
       }
+    ],
+    assetState: [ //资产入库/出库状态
+      {
+        value: 1,
+        label: i18n.t('asset.createAssetTab.inStock')
+      }, {
+        value: 2,
+        label: i18n.t('asset.createAssetTab.notInStock')
+      }
     ]
   };
   export default searchSelectInfo;
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 4ffe06dc5..94441ffd9 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -60,8 +60,9 @@
                         </span>
 <!--                        <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
                       <div v-else-if="item.prop == 'linkObject'">
-                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                        <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                        <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                        <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                        <span v-else>-</span>
                       </div>
                         <span v-else>{{scope.row[item.prop]}}</span>
                     </template>
@@ -335,6 +336,7 @@ export default {
     },
     search: function(searchObj) {
       this.searchLabel = {};
+      this.pageObj.pageNo = 1;
       for (let item in searchObj) {
         if (searchObj[item]) {
           this.$set(this.searchLabel, item, searchObj[item]);
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 61f508e1a..28c482e51 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -41,8 +41,9 @@
                         </div>
                     </template>
                     <template slot-scope="scope" :column="item">
-                      <span v-if="item.prop == 'alertRule'" class="content-right-option" @click="viewRule(scope.row[item.prop].id)">
-                          {{scope.row[item.prop].alertName}}
+                        <span v-if="item.prop == 'alertRule'">
+                            <span class="link" @click="viewRule(scope.row[item.prop].id)" v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span>
+                            <span v-else>-</span>
                         </span>
                         <div v-else-if="item.prop == 'type'" class="content-right-options">
                             <span v-if="scope.row[item.prop] == 1" >Project</span>
@@ -55,8 +56,9 @@
                             <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
                         </span>
                         <div v-else-if="item.prop == 'linkObject'">
-                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
-                            <span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
+                            <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+                            <span v-else>-</span>
                         </div>
                         <div v-else-if="item.prop == 'state'">
                             <span class="">
@@ -103,7 +105,7 @@ export default {
           prop: 'type',
           show: true,
         }, {
-          label: this.$t("alert.list.linkedId"),
+          label: this.$t("alert.list.linked"),
           prop: 'linkObject',
           show: true,
         }, {
@@ -260,6 +262,7 @@ export default {
     },
     search: function(searchObj) {
       this.searchLabel = {};
+      this.pageObj.pageNo = 1;
       for (let item in searchObj) {
         if (searchObj[item]) {
           this.$set(this.searchLabel, item, searchObj[item]);
@@ -277,7 +280,6 @@ export default {
       })
     },
     viewAlertType:function(type,typeObj){
-      console.log(typeObj)
       this.closeViews();
       switch (type) {
         case 1:
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 209891d29..c73970a0a 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -125,34 +125,39 @@
             <div v-if="item.prop=='HOST'">
               <span>{{scope.row.host}}</span>
             </div>
-            <div v-if="item.prop=='资产状态'">
+            <div v-if="item.prop=='state'">
               <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
             </div>
             <div v-if="item.prop=='Module'">
-              <div class="tab-input-square">{{scope.row.moduleNum}}</div>
+              <div class="tab-input-square link">{{scope.row.moduleNum}}</div>
             </div>
             <div v-if="item.prop=='Alert'">
-              <div class="tab-input-square">{{scope.row.alertNum}}</div>
+              <div class="tab-input-square link">{{scope.row.alertNum}}</div>
             </div>
-            <div v-if="item.prop=='数据中心'">
-              <span>{{scope.row.idc.name}}</span>
+            <div v-if="item.prop=='dataCenter'">
+              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
+                <template v-slot:optionZone>
+                  <span class="link">{{scope.row.idc.name}}</span>
+                </template>
+              </idc-config-box>
+              <!--<span class="link">{{scope.row.idc.name}}</span>-->
             </div>
-            <div v-if="item.prop=='机柜'">
-              <span>{{returnData(scope.row.cabinet)}}</span>
+            <div v-if="item.prop=='cabinet'">
+              <span class="link">{{returnData(scope.row.cabinet)}}</span>
             </div>
-            <div v-if="item.prop=='型号'">
+            <div v-if="item.prop=='model'">
               <span>{{scope.row.model.name}}</span>
             </div>
-            <div v-if="item.prop=='厂商'">
+            <div v-if="item.prop=='vendor'">
               <span>{{scope.row.model.vendor.value}}</span>
             </div>
             <div v-if="item.prop=='购买日期'">
               <span>{{scope.row.purchaseDate}}</span>
             </div>
-            <div v-if="item.prop=='责任人'">
+            <div v-if="item.prop=='principal'">
               <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
             </div>
-            <div v-if="item.prop=='责任人电话'">
+            <div v-if="item.prop=='tel'">
               <span>{{scope.row.idc.tel}}</span>
             </div>
             <div v-if="item.prop == 'option'" class="content-right-options">
@@ -175,7 +180,7 @@
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     </div>
 
-    <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData"
+    <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
                     @sendStateData="tabControl"></asset-add-unit>
     <asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
                      ref="assetEditUnit"></asset-edit-unit>
@@ -213,6 +218,12 @@
             type: 'input',
             label: 'host',
             disabled: false
+          },{
+            id: 22,
+            name: this.$t("asset.createAssetTab.state"),
+            type: 'select',
+            label: 'assetState',
+            disabled: false
           }],
         },
         searchLabel: {}, //搜索参数
@@ -240,31 +251,31 @@
             width: 130
           }, {
             label: this.$t("asset.tableTitle.assetState"),
-            prop: '资产状态',
+            prop: 'state',
             show: true,
           }, {
-            label: this.$t("asset.tableTitle.module"),
+            label: this.$t("asset.tableTitle.endpoints"),
             prop: 'Module',
             show: true,
           }, {
-            label: this.$t("asset.tableTitle.alert"),
+            label: this.$t("asset.tableTitle.alerts"),
             prop: 'Alert',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.dataCenter"),
-            prop: '数据中心',
+            prop: 'dataCenter',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.cabinet"),
-            prop: '机柜',
+            prop: 'cabinet',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.model"),
-            prop: '型号',
+            prop: 'model',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.manufacturer"),
-            prop: '厂商',
+            prop: 'vendor',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.procurementDate"),
@@ -272,11 +283,11 @@
             show: true,
           }, {
             label: this.$t("asset.tableTitle.principal"),
-            prop: '责任人',
+            prop: 'principal',
             show: true,
           }, {
             label: this.$t("asset.tableTitle.principalTel"),
-            prop: '责任人电话',
+            prop: 'tel',
             show: true,
           }, {
             label: this.$t('config.account.option'),
@@ -413,14 +424,18 @@
         });
         window.open(routeData.href);
       },
-      getAssetData(data) {
-        this.searchLabel = Object.assign(this.pageObj, this.searchLabel);
+      getAssetData(data, flushRightBoxDc) {
+        this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
         this.$get('asset', this.searchLabel).then(response => {
           if (response.code === 200) {
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
           }
-        })
+        });
+        if (flushRightBoxDc) {
+          this.$refs.assetAddUnit.getIDCOptionData();
+          this.$refs.assetEditUnit.getIDCOptionData();
+        }
       },
       getIDCOptionData() {
         this.$get('idc').then(response => {
@@ -558,8 +573,10 @@
           } else {
             this.pageObj.idcIds = this.checkList.join(',');
           }
-          this.getAssetData();
+        } else {
+          this.pageObj.idcIds = '';
         }
+        this.getAssetData();
       },
       pageNo(val) {
         this.pageObj.pageNo = val;
@@ -595,6 +612,7 @@
       },
       search(searchObj) {
         this.searchLabel = {};
+        this.pageObj.pageNo = 1;
         for (let item in searchObj) {
           if (searchObj[item]) {
             this.$set(this.searchLabel, item, searchObj[item]);
@@ -646,13 +664,12 @@
   }
 
   .tab-input-square {
-    border: 1px solid #aaaaaa;
+    border: 1px solid #1166bb;
     height: 25px;
     width: 65px;
     border-radius: 3px;
     text-align: center;
     line-height: 23px;
-    color: #aaaaaa;
   }
 
   .account-list-option {
@@ -781,4 +798,8 @@
     right: 10px;
     font-size: 16px;
   }
+  .cell .checkbox-edit {
+    position: static;
+    font-size: 14px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index ab6e58f62..1b38d9e89 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -62,6 +62,7 @@
                               v-model="scope.row.status"
                               active-value="1"
                               inactive-value="0"
+                              active-color="#1166bb"
                               @change="(val)=>{statusChange(scope.row)}">
                             </el-switch>
                         </span>
@@ -119,7 +120,7 @@
                   </el-form-item>-->
                   <!--enable-->
                   <el-form-item :label="$t('config.account.enable')">
-                    <el-switch v-model="user.status" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
+                    <el-switch v-model="user.status" active-color="#1166bb" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
                     </el-switch>
                   </el-form-item>
                   <el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
@@ -449,6 +450,7 @@ export default {
     },
     search: function(searchObj) {
       this.searchLabel = {};
+      this.pageObj.pageNo = 1;
       for (let item in searchObj) {
         if (searchObj[item]) {
           this.$set(this.searchLabel, item, searchObj[item]);
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 8b767fa01..0f81d2126 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -33,7 +33,7 @@
                         </div>
                     </template>
                     <template slot-scope="scope" :column="item">
-                        <span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span>
+                        <span v-if="item.prop == 'idc'" class="link">{{scope.row[item.prop].name}}</span>
                         <span v-else-if="item.prop == 'type'">
                             {{scope.row[item.prop] == '1' ? 'Global' : ''}}
                             {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
@@ -501,6 +501,7 @@ export default {
       this.getTableData();
     },
     search: function(searchObj) {
+      this.pageObj.pageNo = 1;
       this.searchLabel = {};
       for (let item in searchObj) {
         if (searchObj[item]) {
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 04d4ced06..3d5f52845 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -90,7 +90,7 @@
             </div>
           </template>
           <template slot-scope="scope" :column="item">
-            <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="content-right-option" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+            <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
             <span v-else-if="item.prop == 'param'">
               <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
             </span>
@@ -414,6 +414,7 @@
       //搜索
       endpointSearch: function(searchObj) {
         this.endpointSearchLabel = {};
+        this.endpointPageObj.pageNo = 1;
         for (let item in searchObj) {
           if (searchObj[item]) {
             this.$set(this.endpointSearchLabel, item, searchObj[item]);
@@ -424,6 +425,7 @@
       //搜索
       metricSearch: function(searchObj) {
         this.metricSearchLabel = {};
+        this.metricPageObj.pageNo = 1;
         for (let item in searchObj) {
           if (searchObj[item]) {
             this.$set(this.metricSearchLabel, item, searchObj[item]);