NEZ-1783 feat：asset，endpoint 等详情页面优化

nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss

@@ -2,14 +2,42 @@
   position: fixed;
   background-color: $--background-color-empty;
   z-index: 3000;
-  padding: 10px;
   border-radius: 4px;
   box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
-
+  .alert-label-header-title {
+    padding: 10px 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: $--color-text-primary;
+    letter-spacing: 0;
+    width: 100%;
+    border-bottom: 1px solid $--border-color-light;
+    //line-height: 23px;
+    font-weight: 600;
+    .alert-label-header-circle {
+      height: 24px;
+      width: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 12px;
+      background: #23bf9a;
+      margin-right: 8px;
+    }
+    .nz-icon {
+      font-weight: 400;
+      font-size: 14px;
+      color: $--background-color-empty;
+    }
+  }
   .alert-label-info{
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
+    padding: 0 10px 10px 5px;
     .active {
       color: $--color-primary;
       border-bottom: none;

nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss

@@ -64,6 +64,7 @@
   border-bottom: none;
   font-size: 13px;
   line-height: 26px;
+  padding: 0 10px 10px 5px;
 }
 .alert-rule-box{
   display: flex;

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -1,14 +1,18 @@
 <template>
   <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
+    <div class="alert-label-header-title">
+      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+        <i  class="nz-icon" :class="selectIcon(type)"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}
+      </div>
+    </div>
     <div class="alert-label-info" v-if="type==='asset'" v-my-loading="loading">
       <div class="alert-label-box">
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.manageIp')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
@@ -74,10 +78,6 @@
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
@@ -123,10 +123,6 @@
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.module')}}</div>
         <div class="alert-label-value">
@@ -175,10 +171,6 @@
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.project')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
@@ -250,10 +242,6 @@
         <div class="alert-label-title">ID</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">{{$t('overall.name')}}</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
-      </div>
       <div class="alert-label-box">
         <div class="alert-label-title">{{$t('overall.location')}}</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
@@ -303,6 +291,7 @@
 
 <script>
 import trendMixin from './trendMixins'
+
 export default {
   name: 'alertLabel',
   mixins: [trendMixin],
@@ -319,7 +308,9 @@ export default {
       alertLabelData: null,
       loading: true,
       heightList: 0,
-      boxWidth: 0
+      boxWidth: 0,
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
     }
   },
   watch: {
@@ -364,7 +355,6 @@ export default {
             dialog = document.querySelector('#viewGraphDialog .el-dialog')
           }
           const dialogHeight = dialog.getBoundingClientRect()
-          console.log(dialogHeight, 'dialogHeight')
           leftOffSet = leftOffSet - dialogHeight.x
           leftOffSetView = dialogHeight.x
           topOffSet = topOffSet - dialogHeight.y
@@ -410,6 +400,7 @@ export default {
           if (res.msg === 'success') {
             this.loading = false
             this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
             this.$message.error(res.msg)
           }
@@ -420,6 +411,7 @@ export default {
           if (res.msg === 'success') {
             this.loading = false
             this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
             this.$message.error(res.msg)
           }
@@ -430,6 +422,7 @@ export default {
           if (res.msg === 'success') {
             this.loading = false
             this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
             this.$message.error(res.msg)
           }
@@ -440,6 +433,7 @@ export default {
           if (res.msg === 'success') {
             this.loading = false
             this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
             this.$message.error(res.msg)
           }
@@ -450,6 +444,7 @@ export default {
           if (res.msg === 'success') {
             this.loading = false
             this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
           } else {
             this.$message.error(res.msg)
           }
@@ -498,6 +493,34 @@ export default {
       } else {
         return this.$t('asset.notInStock')
       }
+    },
+    selectIcon (type) {
+      switch (type) {
+        case 'asset' : return 'nz-icon-overview-project'
+        case 'dc' : return 'nz-icon-Datacenter2'
+        case 'project' : return 'nz-icon-project'
+        case 'module' : return 'nz-icon-overview-module'
+        case 'endpoint' : return 'nz-icon-overview-endpoint'
+        case 'alertrule' : return 'nz-icon-Alertrule'
+      }
+      return 'nz-icon-module5'
+    },
+    returnColor (obj) {
+      let color = ''
+      if (!obj) {
+        return '#23bf9a'
+      } else {
+        this.severityDataWeight.forEach(severity => {
+          const num = obj.find(alert => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -1,14 +1,22 @@
 <template>
   <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
+    <div class="alert-label-header-title">
+      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+        <i  class="nz-icon nz-icon-Alertrule"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
+      </div>
+    </div>
     <div class="alert-rule-info" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
         <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
       </div>
-      <div class="alert-rule-box">
+<!--      <div class="alert-rule-box">-->
-        <div class="alert-rule-title">{{$t('alert.name')}}</div>
+<!--        <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
-        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
+<!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
-      </div>
+<!--      </div>-->
       <div class="alert-rule-box">
         <div class="alert-rule-title">{{$t('alert.type')}}</div>
         <div class="alert-rule-value">
@@ -85,7 +93,9 @@ export default {
     return {
       loading: true,
       alertRuleData: '',
-      severityColor: ''
+      severityColor: '',
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
     }
   },
   components: {
@@ -135,6 +145,23 @@ export default {
       this.severityData.map(item => {
         this.severityColor = item.color
       })
+    },
+    returnColor (obj) {
+      let color = '#23bf9a'
+      if (!obj) {
+        return color
+      } else {
+        this.severityDataWeight.forEach(severity => {
+          const num = obj.find(alert => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
     }
   },
   mounted () {
@@ -143,6 +170,7 @@ export default {
         this.loading = false
         this.severityDataColor()
         this.alertRuleData = res.data
+        this.alertColor = this.returnColor(res.data.alert)
         const weekDays = this.getWeeksTime()
         if (this.trendTimer) {
           clearTimeout(this.trendTimer)