NEZ-3424 feat: Asset information chart 组件更新

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -1041,3 +1041,63 @@
     }
   }
 }
+
+.chart-detail-new{
+  box-sizing: border-box;
+  margin: 10px;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  overflow: auto;
+  .asset-info{
+    border: 1px solid $--border-color-light;
+    border-bottom: none;
+    .el-collapse{
+      border: none;
+      .el-collapse-item__header{
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        background: transparent;
+        border-bottom: 1px solid $--border-color-light;
+        font-size: 14px;
+        .el-collapse-item__arrow{
+          margin: 0 20px 0 20px;
+        }
+        .asset-info-collapse{
+          i{
+            margin-right: 2px;
+          }
+          span{
+            margin-right: 10px;
+          }
+        }
+      }
+      
+      .el-collapse-item__wrap{
+        background: transparent;
+        border-color: $--border-color-light;
+        .el-collapse-item__content{
+          padding: 15px 53px;
+          .asset-info-list{
+            .asset-info-row{
+              margin-bottom: 15px;
+              display: flex;
+              align-items: center;
+              .asset-info-title{
+                font-size: 14px;
+                width: 150px;
+              }
+              .asset-info-value{
+                font-size: 14px;
+                background: $--background-color-2;
+                padding: 0 5px;
+                height: 32px;
+                line-height: 32px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

nezha-fronted/src/assets/css/components/page/monitor/project/project.scss

@@ -135,9 +135,6 @@
   border-bottom: 1px solid $--border-color-light;
   border-top: 1px solid $--border-color-light;
 }
-.el-collapse-item__header:nth-of-type(1) {
-  border-bottom: none;
-}
 .el-collapse-item__header {
   border-bottom: 1px solid $--border-color-light;
 }

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,41 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "2112052",
+      "name": "磁盘",
+      "font_class": "disk",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "4843814",
+      "name": "基本信息",
+      "font_class": "basic-info",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "6582325",
+      "name": "网络2",
+      "font_class": "network",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "20009305",
+      "name": "cpu处理器",
+      "font_class": "cpu",
+      "unicode": "e6de",
+      "unicode_decimal": 59102
+    },
+    {
+      "icon_id": "37552061",
+      "name": "内存",
+      "font_class": "memory",
+      "unicode": "e7b1",
+      "unicode_decimal": 59313
+    },
     {
       "icon_id": "38284763",
       "name": "Notification",

nezha-fronted/src/components/chart/chart/chartAssetInfo.vue

@@ -1,13 +1,17 @@
 <template>
-  <chart-detail :chart-info="chartInfo" :chart-detail="chartData" :from="from"></chart-detail>
+  <chart-detail-new v-if="chartData.feature&&!isEmpty(chartData.feature)" :chart-info="chartInfo" :chart-detail="chartData" :from="from"></chart-detail-new>
+  <chart-detail v-else :chart-info="chartInfo" :chart-detail="chartData" :from="from"></chart-detail>
 </template>
 
 <script>
 import chartDetail from '@/components/chart/chartDetail'
+import chartDetailNew from '@/components/chart/chartDetailNew'
+import lodash from 'lodash'
 export default {
   name: 'chartAssetInfo',
   components: {
-    chartDetail
+    chartDetail,
+    chartDetailNew
   },
   props: {
     from: String,
@@ -20,9 +24,11 @@ export default {
     }
   },
   methods: {
-    resize () {
-
+    isEmpty (obj) {
+      return lodash.isEmpty(obj)
     }
+  },
+  watch: {
   }
 }
 </script>

nezha-fronted/src/components/chart/chartDetailNew.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="chart-detail-new">
+    <div class="asset-info">
+      <el-collapse>
+        <el-collapse-item>
+          <template slot="title">
+            <div class="asset-info-collapse">
+              <i class="nz-icon nz-icon-basic-info"></i>
+              <span>{{$t('asset.information')}}</span>
+              <span>{{chartDetail.feature.os.hostname}}</span>
+            </div>
+          </template>
+          <div class="asset-info-list">
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('license.hostname')}}</div>
+              <div class="asset-info-value">{{chartDetail.feature.os.hostname}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.boottime')}}</div>
+              <div class="asset-info-value">{{utcTimeToTimezoneStr(chartDetail.feature.os.boottime)}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.platform')}}</div>
+              <div class="asset-info-value">{{chartDetail.feature.os.platform}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.platformFamily')}}</div>
+              <div class="asset-info-value">{{chartDetail.feature.os.family}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.platformVersion')}}</div>
+              <div class="asset-info-value">{{chartDetail.feature.os.versionInfo}}</div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item>
+          <template slot="title">
+            <div class="asset-info-collapse">
+              <i class="nz-icon nz-icon-cpu"></i>
+              <span>{{$t('asset.cpu')}}</span>
+              <span v-for="(item,index) in chartDetail.feature.cpu" :key="index">
+                {{item.name}}
+              </span>
+            </div>
+          </template>
+          <div class="asset-info-list" v-for="(item,index) in chartDetail.feature.cpu" :key="index">
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.vendorID')}}</div>
+              <div class="asset-info-value">{{item.vendor}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.moduleName')}}</div>
+              <div class="asset-info-value">{{item.name}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.packageCount')}}</div>
+              <div class="asset-info-value">{{item.physicalPackageCount}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.processorCount')}}</div>
+              <div class="asset-info-value">{{item.physicalProcessorCount}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('backup.frequency')}}</div>
+              <div class="asset-info-value">{{Hertz(item.logicalProcessorCount,0,0)}}</div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item>
+          <template slot="title">
+            <div class="asset-info-collapse">
+              <i class="nz-icon nz-icon-memory"></i>
+              <span>{{$t('asset.memory')}}</span>
+              <span>{{bits(chartDetail.feature.memory.total,0,0)}}</span>
+            </div>
+          </template>
+          <div class="asset-info-list">
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.memorySize')}}</div>
+              <div class="asset-info-value">{{bits(chartDetail.feature.memory.total,0,0)}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.swaptotal')}}</div>
+              <div class="asset-info-value">{{bits(chartDetail.feature.memory.swaptotal,0,0)}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.pagesize')}}</div>
+              <div class="asset-info-value">{{bits(chartDetail.feature.memory.pagesize,0,0)}}</div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item>
+          <template slot="title">
+            <div class="asset-info-collapse">
+              <i class="nz-icon nz-icon-disk"></i>
+              <span>{{$t('asset.disk')}}</span>
+              <span>{{bits(calcTotal(chartDetail.feature.disk, 'size'),0,0)}}</span>
+            </div>
+          </template>
+          <div class="asset-info-list" v-for="(item,index) in chartDetail.feature.disk" :key="index">
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.diskName')}}</div>
+              <div class="asset-info-value">{{item.name}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.diskModel')}}</div>
+              <div class="asset-info-value">{{item.model}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.diskSize')}}</div>
+              <div class="asset-info-value">{{bits(item.size,0,0)}}</div>
+            </div>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item>
+          <template slot="title">
+            <div class="asset-info-collapse">
+              <i class="nz-icon nz-icon-network"></i>
+              <span>{{$t('asset.interface')}}</span>
+            </div>
+          </template>
+          <div class="asset-info-list" v-for="(item,index) in chartDetail.feature.interface" :key="index">
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.interfaceName')}}</div>
+              <div class="asset-info-value">{{item.name}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">iPv4addr</div>
+              <div class="asset-info-value">{{item.iPv4addr}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">iPv6addr</div>
+              <div class="asset-info-value">{{item.iPv6addr}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">macaddr</div>
+              <div class="asset-info-value">{{item.macaddr}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.subnetMasks')}}</div>
+              <div class="asset-info-value">{{item.subnetMasks}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">mtu</div>
+              <div class="asset-info-value">{{item.mtu}}</div>
+            </div>
+            <div class="asset-info-row">
+              <div class="asset-info-title">{{$t('asset.ifOperStatus')}}</div>
+              <div class="asset-info-value">
+                <span v-if="item.ifOperStatus==1">up</span>
+                <span v-else-if="item.ifOperStatus==2">down</span>
+                <span v-else-if="item.ifOperStatus==3">testing</span>
+                <span v-else-if="item.ifOperStatus==4">unknown</span>
+                <span v-else-if="item.ifOperStatus==5">dormant</span>
+                <span v-else-if="item.ifOperStatus==6">notPresent</span>
+                <span v-else-if="item.ifOperStatus==7">lowerLayerDown</span>
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartDataFormat from '@/components/chart/chartDataFormat'
+export default {
+  name: 'chartDetailNew',
+  props: {
+    from: String,
+    chartDetail: Object,
+    chartInfo: Object
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    bits: chartDataFormat.getUnit(6).compute,
+    Hertz: chartDataFormat.getUnit(26).compute,
+    calcTotal (arr, key) {
+      return arr.reduce((acc, curr) => acc + Number(curr[key]), 0)
+    }
+  }
+}
+</script>

nezha-fronted/src/components/chart/panelChart.vue

@@ -478,7 +478,7 @@ export default {
               linkId = this.chartDetailInfo && this.chartDetailInfo.id
             }
             if (this.chartInfo.type === 'assetInfo') {
-              this.$get('asset/asset/' + linkId).then(res => {
+              this.$get('asset/asset/' + linkId + '?feature=1').then(res => {
                 this.chartData = res.data
                 this.loading = false
               })