From fa1b6e453047ae7595e87e756ec5483db1891218 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Mon, 8 Nov 2021 14:56:50 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1191=20fix:=20=E4=BF=AE=E5=A4=8DEndpoint=20?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-detail.vue    | 79 +++++++++++++++----
 .../src/components/charts/chart-list.vue      | 32 +++++---
 .../components/common/alert/alertLabel.vue    |  6 +-
 3 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 465277ac6..ba5b1936f 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -41,12 +41,14 @@
                           <span class="content-text">{{assetKey[key]}}</span>
                           <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
                         </div>
-
                         <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                        <span v-if="key === 'state'">
-                          {{value}}
-                        </span>
-                          <span v-else-if="key === 'alert'" :class="{'success': value <= 0, 'danger': value > 0}" class="as-button">{{value + ' ' + $t('overall.active')}}</span>
+                          <span v-if="key === 'name'">{{value}}</span>
+                          <span v-else-if="key === 'type'">{{value}}</span>
+                          <span v-else-if="key === 'state'">{{value}}</span>
+                          <span v-else-if="key === 'brand'">{{value}}</span>
+<!--                          <span v-else-if="key === 'model'">{{value}}</span>-->
+                          <span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
+                          <span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;{{value}}</span>
                           <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
                             <template v-if="value && value.length > 0">
                               <nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
@@ -127,8 +129,39 @@
                           <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
                         </div>
                         <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
-                          <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
+                          <template>
+                            <span v-if="key === 'alerts'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
+                            <span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
+                            <span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
+                            <span v-else-if="key === 'state'">
+                              <span style="width: auto">
+                                <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+                                <span v-if="value[0].state === 0">
+                                  <span class="active-icon red-bg inline-block"></span>
+                                </span>
+                                <span v-else-if="value[0].state === 1">
+                                  <span class="active-icon green-bg inline-block"></span>
+                                </span>
+                                <span v-else-if="value[0].state">
+                                  <span class="active-icon gray-bg inline-block"></span>
+                                </span>
+                              </span>
+                              <span style="width: auto">
+                                <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
+                                <span v-if="value[1].state === 0">
+                                  <span class="active-icon red-bg inline-block"></span>
+                                </span>
+                                <span v-else-if="value[1].state === 1">
+                                  <span class="active-icon green-bg inline-block"></span>
+                                </span>
+                                <span v-else-if="value[1].state">
+                                  <span class="active-icon gray-bg inline-block"></span>
+                                </span>
+                              </span>
+                            </span>
+                            <span v-else class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
+                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
+                          </template>
                         </div>
                       </div>
 
@@ -257,24 +290,29 @@ export default {
       oldSearchTime: [],
 
       assetKey: {
-        host: this.$t('asset.host'),
+        // host: this.$t('asset.host'),
         id: 'Id',
-        assetType: this.$t('asset.assetType'),
-        sn: this.$t('asset.device'),
+        name: this.$t('overall.name'),
+        manageIp: this.$t('overall.manageIp'),
+        type: this.$t('overall.type'),
+        // assetType: this.$t('asset.assetType'),
+        // sn: this.$t('asset.device'),
         state: this.$t('asset.assetState'),
         pingRtt: this.$t('asset.assetPing'),
         dataCenter: this.$t('asset.dataCenter'),
         cabinet: this.$t('asset.cabinet'),
+        brand: this.$t('asset.brand'),
         model: this.$t('asset.model'),
-        vendor: this.$t('asset.vendor'),
-        purchaseDate: this.$t('asset.procurementDate'),
+        tags: this.$t('overall.labels'),
+        alert: this.$t('asset.alerts'),
+        endpoint: this.$t('asset.modules')
+        // vendor: this.$t('asset.vendor'),
+        // purchaseDate: this.$t('asset.procurementDate'),
         // principal: this.$t('asset.principal'),
         // tel: this.$t('asset.principalTel'),
         // pingStatus: this.$t('asset.assetPing'),
-        pingLastReply: this.$t('asset.lastReply'),
-        endpoint: this.$t('asset.modules'),
-        alert: this.$t('asset.alerts'),
-        tags: this.$t('overall.tag')
+        // pingLastReply: this.$t('asset.lastReply'),
+
       },
       projectKey: {
         id: 'ID',
@@ -293,9 +331,10 @@ export default {
       endpointKey: {
         id: 'ID',
         name: this.$t('overall.name'),
-        type: this.$t('overall.type'),
+        // type: this.$t('overall.type'),
         project: this.$t('overall.project'),
         module: this.$t('project.module.module'),
+        asset: this.$t('overall.asset'),
         alerts: this.$t('project.endpoint.alerts'),
         state: this.$t('project.endpoint.state')
       }
@@ -420,6 +459,7 @@ export default {
       this.panelIdInner = panelId
       this.data = chartItem
       this.detail = detail
+      console.log(this.detail)
       // console.info(this.data, this.detail)
       /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
         this.$nextTick(() => {
@@ -518,3 +558,8 @@ export default {
   }
 }
 </script>
+<style>
+.colorFA901C{
+  color: #fa901c;
+}
+</style>
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index fe469667f..4dcabe7c4 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1488,16 +1488,18 @@ export default {
       chartInfo.name = this.$t('project.chart.endpointInfo')
       chartInfo.from = fromRoute.endpoint
       const basicInfo = JSON.parse(JSON.stringify(this.obj))
+      console.log(basicInfo)
       detail.push(
         {
           data: {
             id: basicInfo.id,
             name: basicInfo.name,
-            type: basicInfo.module.type,
+            // type: basicInfo.module.type,
             project: basicInfo.project.name,
             module: basicInfo.module.name,
+            asset: basicInfo.asset.manageIp,
             alerts: basicInfo.alertNum,
-            state: basicInfo.state === 1 ? 'up' : 'down'
+            state: basicInfo.configs
           },
           type: 'endpointInfo',
           title: this.$t('project.chart.basicTitle')
@@ -1538,23 +1540,27 @@ export default {
             // basic.cabinet = basic.cabinet ? basic.cabinet.name : '-'
             const obj = {
               id: basic.id,
-              host: basic.pingInfo ? basic.pingInfo.host : '-',
-              assetType: basic.type ? basic.type.name : '-',
+              // host: basic.pingInfo ? basic.pingInfo.host : '-',
+              // assetType: basic.type ? basic.type.name : '-',
+              name: basic.name ? basic.name : '-',
+              manageIp: basic.manageIp,
+              type: basic.type ? basic.type.name : '-',
               state: basic.state ? basic.state.name : '-',
               pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '',
               dataCenter: basic.dc ? basic.dc.name : '-',
               cabinet: basic.cabinet ? basic.cabinet.name : '-',
-              alert: basic.alertNum,
-              endpoint: basic.endpointNum,
-              purchaseDate: basic.purchaseDate,
-              vendor: basic.brand ? basic.brand.name : '-',
+              brand: basic.brand ? basic.brand.name : '-',
               model: basic.model ? basic.model.name : '-',
-              sn: basic.sn,
               tags: basic.fields,
-              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
-              cabinetStart: basic.cabinetStart,
-              cabinetEnd: basic.cabinetEnd,
-              pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
+              alert: basic.alertNum,
+              endpoint: basic.endpointNum
+              // purchaseDate: basic.purchaseDate,
+              // vendor: basic.brand ? basic.brand.name : '-',
+              // sn: basic.sn,
+              // pingStatus: basic.pingInfo ? basic.pingInfo.status : '-',
+              // cabinetStart: basic.cabinetStart,
+              // cabinetEnd: basic.cabinetEnd,
+              // pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
               // principal: basic.dc ? basic.dc.principal : '-',
               // tel: basic.tel,
             }
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 8977f85e2..07761b611 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -89,7 +89,7 @@
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
         <div class="alert-label-value">
           <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">
@@ -130,7 +130,7 @@
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
         <div class="alert-label-value">
           <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">
@@ -170,7 +170,7 @@
         <div class="alert-label-title">{{$t('overall.alert')}}</div>
         <div class="alert-label-value">
           <i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
+          <span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
         </div>
       </div>
       <div class="alert-label-box">