feat: chart info 新增图表开发

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

@@ -158,11 +158,64 @@
   .chart-detail {
     width: 100%;
     height: 100%;
+    color: $--color-text-primary;
     .chart-detail-title {
       text-align: center;
-      background-color: $--background-color-empty;
+      background-color: transparent;
-      color: $--color-text-primary;
+      line-height: 30px;
-      border: 1px solid $--border-color-light;
+    }
+    .chart-detail-title:hover {
+      background-color: $--background-color-base;
+    }
+    .basic-info {
+      font-size: 13px;
+      height: calc(100% - 51px);
+      margin: 10px;
+      .basic-info-title {
+        background-color: $--background-color-base;
+        height: 25px;
+        padding-left: 5px;
+        line-height: 25px;
+      }
+      .basic-info-table {
+        width: calc(100% - 5px);
+        height: calc(100% - 25px);
+        margin-left: 3px;
+        overflow-y: auto;
+        .basic-info-table-list {
+          display: flex;
+          .basic-info-table-title,.basic-info-table-value {
+            display: inline-block;
+            width: 50%;
+            line-height: 30px;
+            padding-left: 10px;
+            border-bottom: 1px solid $--border-color-light;
+            border-right: 1px solid $--border-color-light;
+          }
+          .basic-info-table-value {
+            border-right: none;
+            .label-table {
+              display: flex;
+              border: 1px solid #409eef;
+              height: 20px;
+              font-size: 12px;
+              line-height: 20px;
+              border-radius: 4px;
+              margin: 4px 5px 0 0;
+              box-sizing: content-box;
+              .label-table-value {
+                flex: 1;
+                padding: 0 4px;
+              }
+              .label-table-name {
+                color: #fff;
+                background-color: #409eef;
+                padding: 0 4px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <chart-detail v-if="chartInfo.type === 'assetInfo'" :chart-detail="chartData"></chart-detail>
+  <chart-detail v-if="chartInfo.type === 'assetInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <chart-detail v-if="chartInfo === 'endpointInfo'" :chart-detail="chartData"></chart-detail>
+  <chart-detail v-if="chartInfo === 'endpointInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
 </template>
 
 <script>

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

@@ -1,7 +1,155 @@
 <template>
   <div ref="chartDetail" class="chart-detail">
-    <div class="chart-detail-title">{{$t('panel.assetInfo')}}</div>
+    <div class="chart-detail-title" v-if="chartInfo.type === 'assetInfo'">{{$t('panel.assetInfo')}}</div>
-    <div></div>
+    <div class="chart-detail-title" v-else>{{$t('panel.endpointInfo')}}</div>
+    <div class="basic-info">
+      <div class="basic-info-title" @click="hideElement">
+        <span><i :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span>
+        <span>{{$t('panel.basicInfo')}}</span>
+      </div>
+      <el-collapse-transition>
+        <div v-if="!showBasicInfo && chartInfo.type === 'assetInfo'" class="basic-info-table">
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
+            <div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
+            <div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
+            <div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">Ping</div>
+            <div class="basic-info-table-value">
+              <div :class="{'green-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 1,'red-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 0}" class="active-icon"></div>
+              <span>{{chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.rtt ? chartDetail.pingInfo.rtt + 'ms':''}}</span>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
+            <div class="basic-info-table-value" style="display:flex">
+              <div v-for="item in chartDetail.fields" :key="item.id">
+                <div class="label-table">
+                  <div class="label-table-name">{{item.name}}</div>
+                  <span class="label-table-value">{{item.value[0]}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{ $t('asset') }}</div>
+            <div class="basic-info-table-value">
+              <i :class="chartDetail && chartDetail.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+              <span>{{chartDetail ? chartDetail.alertNum : 0}}</span>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">Endpoint</div>
+            <div class="basic-info-table-value">
+              <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+              <span>{{chartDetail ? chartDetail.endpointNum : 0}}</span>
+            </div>
+          </div>
+        </div>
+        <div v-else class="basic-info-table">
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
+            <div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
+            <div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
+            <div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">Ping</div>
+            <div class="basic-info-table-value">
+              <div :class="{'green-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 1,'red-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 0}" class="active-icon"></div>
+              <span>{{chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.rtt ? chartDetail.pingInfo.rtt + 'ms':''}}</span>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
+            <div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
+            <div class="basic-info-table-value" style="display:flex">
+              <div v-for="item in chartDetail.fields" :key="item.id">
+                <div class="label-table">
+                  <div class="label-table-name">{{item.name}}</div>
+                  <span class="label-table-value">{{item.value[0]}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">{{ $t('asset') }}</div>
+            <div class="basic-info-table-value">
+              <i :class="chartDetail && chartDetail.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
+              <span>{{chartDetail ? chartDetail.alertNum : 0}}</span>
+            </div>
+          </div>
+          <div class="basic-info-table-list">
+            <div class="basic-info-table-title">Endpoint</div>
+            <div class="basic-info-table-value">
+              <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+              <span>{{chartDetail ? chartDetail.endpointNum : 0}}</span>
+            </div>
+          </div>
+        </div>
+      </el-collapse-transition>
+    </div>
   </div>
 </template>
 
@@ -9,15 +157,18 @@
 export default {
   name: 'chartDetail',
   props: {
-   chartDetail: Object
+    chartDetail: Object,
+    chartInfo: Object
   },
   data () {
     return {
-
+      showBasicInfo: false
     }
   },
   methods: {
-
+    hideElement () {
+      this.showBasicInfo = !this.showBasicInfo
+    }
   }
 }
 </script>

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

@@ -165,19 +165,26 @@ export default {
               this.groupInit()
               this.chartData = [...this.chartInfo.children]
             }
-            if (this.chartInfo.type === 'assetInfo') {
-              this.$get('asset/asset/' + 546).then(res => {
-                if (res.code === 200) {
-                  this.chartData = res.data
-                }
-              })
-            }
             if (this.chartInfo.type === 'carousel') {
               this.chartData = ['carousel']
             }
             if (this.chartInfo.type === 'map') {
               this.chartData = ['map']
             }
+            if (this.chartInfo.type === 'assetInfo') {
+              this.$get('asset/asset/' + 545).then(res => {
+                if (res.code === 200) {
+                  this.chartData = res.data
+                }
+              })
+            }
+            if (this.chartInfo.type === 'endpointInfo') {
+              this.$get('monitor/endpoint/' + 1).then(res => {
+                if (res.code === 200) {
+                  this.chartData = res.data
+                }
+              })
+            }
             break
           }
         }

nezha-fronted/src/components/common/login.vue

@@ -240,7 +240,7 @@ export default {
       }
     },
     licenseStat () {
-      this.$get('/sys/license/state').then(response => {
+      this.$get('/sys/license/status').then(response => {
         if (response.code && response.code === 200) {
           this.license.warnInfo = ''
           this.license.valid = true