feat：优化assetInfo chart显示

nezha-fronted/src/components/charts/chart-asset-info.scss

@@ -32,7 +32,6 @@
   .chart-info-container{
     padding-left: 8px;
     padding-right: 8px;
-    display:table;
     text-align:center;
     width:calc(100% - 16px);
     .single-stat-content{
@@ -159,6 +158,7 @@
 .asset-info-content{
   width: 100%;
   height: 100%;
+  font-size: 12px;
   .basic-container,.feature-container{
     width: 100%;
     //height: calc(50% - 4px);
@@ -173,6 +173,7 @@
     flex-wrap:nowrap;
     padding: 0 5px 0 5px;
     box-sizing: border-box;
+    font-size: 16px;
   }
   .basic-container .basic-title:hover,.feature-container .feature-title:hover{
     border: 1px solid #C0C4CC;
@@ -194,10 +195,10 @@
   }
   .content-item{
     width: 100%;
-    white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
     position: relative;
+    border-bottom: 1px solid #EBEEF5;
     .content-item-key{
       display: inline-block;
       //height: 25px;
@@ -219,7 +220,7 @@
     }
 
   }
-  .content-item:hover{
+  .hover-bg:hover{
     background-color: #F2F2F2;
   }
 }

nezha-fronted/src/components/charts/chart-asset-info.vue

@@ -15,21 +15,21 @@
             </span>
       </el-popover>
       <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-        <span class="chart-title-text">{{data.title}}</span>
+        <span class="chart-title-text">{{$t('asset.createAssetTab.assetInfo')}}</span>
       </span>
     </div>
     <div class="mt-10 chart-info-container" v-cloak  v-show="firstShow" >
       <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
-          <el-scrollbar style="height: 100%;" ref="scrollbar" class="el-scrollbar-large">
+          <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-small">
             <div style="padding: 0 15px">
               <div class="basic-container">
                 <div class="basic-title" @click="hideElement('basic')">
-                  <div>{{$t('asset.basicTitle')}}</div>
+                  <div>{{$t('asset.createAssetTab.basicTitle')}}</div>
                   <div><i :class="{'el-icon-caret-bottom':hideBasic,'el-icon-caret-top':!hideBasic}"></i></div>
                 </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" :class="{'bg-grey':index % 2 == 1}">
+                    <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>
@@ -38,11 +38,11 @@
               </div>
               <div class="feature-container">
                 <div class="feature-title" @click="hideElement('feature')" >
-                  <div>{{$t('asset.featureTitle')}}</div>
+                  <div>{{$t('asset.createAssetTab.featureTitle')}}</div>
                   <div><i :class="{'el-icon-caret-bottom':hideFeature,'el-icon-caret-top':!hideFeature}"></i></div>
                 </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}">
+                  <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>
                     <template v-if="typeof value == 'string'">
                       <div class="content-item-value">{{value}}</div>
@@ -53,20 +53,19 @@
                       </template>
                       <template v-else>
                         <el-table
-                          class="overview-table"
+                          class="nz-table asset-info-table"
                           :data="value"
                           tooltip-effect="light"
                           height="100%"
                           ref="dataTable"
+                          v-scrollBar:el-table="'large'"
                         >
                           <el-table-column
                             :resizable="false"
                             v-for="(item, index) in setLabels(value)"
                             v-if="item.show"
                             :key="`col-${index}`"
-                            :width="item.width"
                             :label="item.label"
-                            min-width="90"
                           >
                             <template slot-scope="scope" :column="item">
                               <template >
@@ -327,6 +326,10 @@
           document.onmousemove=null;
           document.onmouseup = null;
         }
+        this.$nextTick(()=>{
+          this.$refs.scrollbar.update();
+        })
+
       },
       startLoading(area){
         this.$refs['localLoading'+this.chartIndex].startLoading();
@@ -425,4 +428,10 @@
   .asset-info-content .el-scrollbar__view {
     height: 100%;
   }
+  .asset-info-table .el-table__body-wrapper{
+    overflow: inherit;
+  }
+  .asset-info-table:hover .ps__rail-x{
+    opacity: 1 !important;
+  }
 </style>

nezha-fronted/src/components/charts/chart-list.vue

@@ -1104,50 +1104,15 @@ export default {
     },
     getAssetInfoChartData(chartInfo){
       this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
-      setTimeout(()=>{
-        if(this.additionalInfo){
-          let data={
-            Basic:{
-              sn:'assetInfo Test',
-              host:'192.168.40.42',
-              host1:'192.168.40.42',
-              host2:'192.168.40.42',
-              host3:'192.168.40.42',
-              host4:'192.168.40.42',
-              host5:'192.168.40.42',
-              host6:'192.168.40.42',
-              host7:'192.168.40.42',
-              host8:'192.168.40.42',
-              host9:'192.168.40.42',
-              host10:'192.168.40.42',
-              cpuNum:'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=>{
+      this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
-      //   if(response.code == 200){
+        if(response.code == 200){
-      //     let data=response.data;
+          let data=response.data;
-      //     this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
-      //   }else{
+        }else{
-      //     this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
-      //   }
+        }
-      // })
+      })
     },
     // 设置图表的宽度
     setSize(size, index) {

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -369,6 +369,17 @@ export default {
           }
         });
       },
+        // 全屏查看
+        showAllScreen() {
+            this.dropdownMenuShow=false;
+            this.searchTime = [];
+            this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+            this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+            this.$refs.calendarPanel.setCustomTime(this.searchTime);
+
+            this.seriesItemScreen = this.seriesItem;
+            this.screenModal = true;
+        },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
           if(errorMsg && errorMsg!==''){

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

@@ -446,7 +446,7 @@ const en = {
       sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
       exporter:'Exporter',
       basicTitle:'Basic info',
-      featureTitle:'Feature'
+      featureTitle:'Feature',
     },
     editAssetTab:{
       title:'New asset',//'新增资产'