perf:1.assetInfo chart调整 2.panel table类型图表表头拖拽显示bug修复

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;

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 v-for="(item,index) in basicKey" :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-key">{{item.label}}</div>
-                      <div class="content-item-value">{{value}}</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 {

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;

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="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')" >
+                <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="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')" >
+                  <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>

nezha-fronted/src/components/common/language/cn.js

@@ -506,6 +506,7 @@ const cn = {
       principalTel: "电话",
       option: "操作",
       assetPing: "Ping",
+      lastReply:'Ping最后应答',
       vendor: "厂商"
     },
     tagTableTitle: {

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