From 50e340ad90e5818cfd18bff78a932fbc0e24cf64 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Tue, 26 May 2020 14:30:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:1.assetInfo=20chart=E8=B0=83=E6=95=B4=202.?=
 =?UTF-8?q?panel=20table=E7=B1=BB=E5=9E=8B=E5=9B=BE=E8=A1=A8=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4=E6=8B=96=E6=8B=BD=E6=98=BE=E7=A4=BAbug=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-asset-info.scss   |   2 +
 .../components/charts/chart-asset-info.vue    | 104 +++++++++++++++++-
 .../src/components/charts/chart-list.vue      |  26 ++++-
 .../src/components/charts/chart-table.vue     |  12 +-
 .../src/components/common/language/cn.js      |   1 +
 .../src/components/common/language/en.js      |   1 +
 6 files changed, 135 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-asset-info.scss b/nezha-fronted/src/components/charts/chart-asset-info.scss
index ad204af33..86470f567 100644
--- a/nezha-fronted/src/components/charts/chart-asset-info.scss
+++ b/nezha-fronted/src/components/charts/chart-asset-info.scss
@@ -195,6 +195,8 @@
   }
   .content-item{
     width: 100%;
+    min-height: 20px;
+    padding: 2px;
     overflow:hidden;
     text-overflow:ellipsis;
     position: relative;
diff --git a/nezha-fronted/src/components/charts/chart-asset-info.vue b/nezha-fronted/src/components/charts/chart-asset-info.vue
index 4e34a1a01..354689b21 100644
--- a/nezha-fronted/src/components/charts/chart-asset-info.vue
+++ b/nezha-fronted/src/components/charts/chart-asset-info.vue
@@ -29,9 +29,28 @@
                 </div>
                 <div class="basic-content" :class="{'shrink':hideBasic}">
                   <template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
-                    <div v-for="(value,key,index) in assetInfos.Basic" :key="index" class="content-item hover-bg" :class="{'bg-grey':index % 2 == 1}">
-                      <div class="content-item-key">{{replaceSplit(key)}}</div>
-                      <div class="content-item-value">{{value}}</div>
+                    <div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg" :class="{'bg-grey':index % 2 == 1}">
+                      <div class="content-item-key">{{item.label}}</div>
+                      <template v-if="item.prop == 'pingStatus'">
+                        <div class="content-item-value">
+                          <div :class="{'active-icon green':assetInfos.Basic[item.prop] == 1,'active-icon red':assetInfos.Basic[item.prop] == 0}" style="margin-top: 0px;"></div><span>{{assetInfos.Basic.pingRtt?assetInfos.Basic.pingRtt+'ms':''}}</span>
+                        </div>
+                      </template>
+                      <template v-else-if="item.prop == 'alert'">
+                        <div class="content-item-value">
+                          <span   class="as-button" :class="{'success':assetInfos.Basic[item.prop]<=0,'danger':assetInfos.Basic[item.prop]>0}">{{assetInfos.Basic[item.prop] + ' ' + $t('overall.active')}}</span>
+                        </div>
+                      </template>
+                      <template v-else-if="item.prop == 'state'">
+                        <div class="content-item-value">
+                          {{assetInfos.Basic[item.prop] == 1?$t('asset.createAssetTab.inStock'):$t('asset.createAssetTab.outStock')}}
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div class="content-item-value">
+                          {{assetInfos.Basic[item.prop]}}
+                        </div>
+                      </template>
                     </div>
                   </template>
                 </div>
@@ -43,7 +62,7 @@
                 </div>
                 <div class="feature-content" :class="{'shrink':hideFeature}">
                   <div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1,'hover-bg':Array.isArray(value) && value.length>0 &&typeof value[0] == 'string'}">
-                    <div class="content-item-key" ><div style="vertical-align: middle">{{replaceSplit(key)}}</div></div>
+                    <div class="content-item-key" ><div style="vertical-align: middle">{{key}}</div></div>
                     <template v-if="typeof value == 'string'">
                       <div class="content-item-value">{{value}}</div>
                     </template>
@@ -144,6 +163,72 @@
         divFirstShow:false,
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
+        basicKey:[
+          {
+            label: this.$t("asset.tableTitle.host"),
+            prop: 'host',
+          },
+          {
+            label: this.$t("asset.tableTitle.id"),
+            prop: 'id',
+          },
+          {
+            label: this.$t("asset.tableTitle.assetType"),
+            prop: 'assetType',
+          },
+          {
+            label: this.$t("asset.tableTitle.device"),
+            prop: 'sn',
+          },
+          {
+            label: this.$t("asset.tableTitle.assetState"),
+            prop: 'state',
+          },
+          {
+            label: this.$t("asset.tableTitle.dataCenter"),
+            prop: 'dataCenter',
+          },
+          {
+            label: this.$t("asset.tableTitle.cabinet"),
+            prop: 'cabinet',
+          },
+          {
+            label: this.$t("asset.tableTitle.model"),
+            prop: 'model',
+          },
+          {
+            label: this.$t("asset.tableTitle.vendor"),
+            prop: 'vendor',
+          },
+          {
+            label: this.$t("asset.tableTitle.procurementDate"),
+            prop: 'purchaseDate',
+          },
+          {
+            label: this.$t("asset.tableTitle.principal"),
+            prop: 'principal',
+          },
+          {
+            label: this.$t("asset.tableTitle.principalTel"),
+            prop: 'tel',
+          },
+          {
+            label:this.$t('asset.tableTitle.assetPing'),
+            prop:'pingStatus',
+          },
+          {
+            label:this.$t('asset.tableTitle.lastReply'),
+            prop:'pingLastReply',
+          },
+          {
+            label: this.$t("asset.tableTitle.modules"),
+            prop: 'endpoint',
+          },
+          {
+            label: this.$t("asset.tableTitle.alerts"),
+            prop: 'alert',
+          },
+        ]
       };
     },
     created() {
@@ -423,6 +508,17 @@
 </script>
 <style lang="scss" scoped>
   @import './chart-asset-info';
+  .as-button{
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+  }
+  .danger{
+    background-color: #d64f40;
+  }
 </style>
 <style>
   .asset-info-content .el-scrollbar__view {
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index db5cb093e..198573cfd 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1105,7 +1105,31 @@ export default {
     getAssetInfoChartData(chartInfo){
       if(!this.isModel){
         this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
-
+        // setTimeout(()=>{
+        //   if(this.additionalInfo){
+        //     let data={
+        //       Basic:{
+        //         sn:'assetInfo Test',
+        //         host:'192.168.40.42',
+        //         'cpu Num':'8',
+        //         memery:'12GB',
+        //         'memery free':'3GB'
+        //       },
+        //       Feature:{
+        //         CPU:"Intel E500",
+        //         Memory:"256GB",
+        //         NetworkInterface:["eth0","eth1"],
+        //         Disk:[{
+        //           mount:"/",
+        //           total:"256GB",
+        //           free:"128GB",
+        //           usageRate:"50%"
+        //         }]
+        //       }
+        //     }
+        //     this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+        //   }
+        // },1000)
         this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
           if(response.code == 200){
             let data=response.data;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index b4d5750c6..25694819a 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -55,13 +55,13 @@
             <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
 <!--                <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
 <!--                <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
-              <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
-                <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
+              <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
+                <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
                   <template slot-scope="scope">
                     {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
                   </template>
                 </el-table-column>
-                <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
+                <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false">
                   <template slot-scope="scope">
                     {{ unit.compute(scope.row.value,null,2)}}
                   </template>
@@ -84,13 +84,13 @@
                 <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table>
 <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
 <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
-                  <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
-                  <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" >
+                  <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
+                  <el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420">
                     <template slot-scope="scope">
                       {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
                     </template>
                   </el-table-column>
-                    <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
+                    <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false">
                       <template slot-scope="scope">
                         {{ unit.compute(scope.row.value,null,2)}}
                       </template>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 88224cf19..488ba74a1 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -506,6 +506,7 @@ const cn = {
       principalTel: "电话",
       option: "操作",
       assetPing: "Ping",
+      lastReply:'Ping最后应答',
       vendor: "厂商"
     },
     tagTableTitle: {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index af268cddf..89fc36879 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -519,6 +519,7 @@ const en = {
       host: 'Host',//'Host'
       assetState: 'State',//'状态'
       assetPing: 'Ping',
+      lastReply:'Ping last reply',
       modules: 'Endpoint',//'组件'
       alerts: 'Alerts',//'告警信息'
       dataCenter: 'DC',//DC