feat：dc ， bottom-asset 以及 bootom-cabinet 替换 alert列

nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue

@@ -122,7 +122,9 @@ export default {
       typeData: [],
       dcData: [],
       snmpCredentialData: [],
-      fieldGroupData: []
+      fieldGroupData: [],
+      needAlertDaysData: true,
+      trendKey: 'assetId'
     }
   },
   methods: {
@@ -239,6 +241,25 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
           if (!this.scrollbarWrap) {

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -117,7 +117,9 @@ export default {
             disabled: false
           }
         ]
-      }
+      },
+      needAlertDaysData: true,
+      trendKey: 'cabinetId'
     }
   },
   created () {
@@ -148,6 +150,25 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
           if (!this.scrollbarWrap) {

nezha-fronted/src/components/common/mixin/dataList.js

@@ -102,6 +102,25 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
+          if (this.needAlertDaysData) {
+            response.data.list.forEach(item => {
+              item.trendLoading = true
+              item.alertDaysData = [
+                {
+                  metric: { priority: 'P1' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P2' },
+                  values: [[0, 0]]
+                },
+                {
+                  metric: { priority: 'P3' },
+                  values: [[0, 0]]
+                }
+              ]
+            })
+          }
           this.tableData = response.data.list
           const globalSearchId = this.$store.getters.getGlobalSearchId
           let detailViewRightObj = ''

nezha-fronted/src/components/common/mixin/table.js

@@ -103,6 +103,20 @@ export default {
         arr.unshift(obj)
       }
       return arr
+    },
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        item.left = position.left
+        this.$set(item, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(item, 'top', position.top - 55)
+        } else {
+          this.$set(item, 'top', position.top + 30)
+        }
+        this.$set(item, 'alertNumtooltipShow', flag)
+      }
     }
   },
   watch: {

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -347,20 +347,6 @@ export default {
       this.$set(item, 'loading', loading)
       // this.$set(this.tableData,index,item);// 调用父组件
     },
-    tooltipHover (item, flag, e) {
-      if (e) {
-        const dom = e.currentTarget
-        const position = dom.getBoundingClientRect()
-        item.left = position.left
-        this.$set(item, 'left', position.left)
-        if (position.top > window.innerHeight / 2) {
-          this.$set(item, 'top', position.top - 100)
-        } else {
-          this.$set(item, 'top', position.top + 30)
-        }
-        this.$set(item, 'alertNumtooltipShow', flag)
-      }
-    },
     returnCabinet (start, end) { // 返回机柜u位信息
       if (!start || !end) {
         return ''

nezha-fronted/src/components/common/table/settings/cabinetTable.vue

@@ -26,7 +26,20 @@
           <span style="cursor: pointer"><i class="nz-icon nz-icon-overview-project monitorColor"></i> <span>{{scope.row.assetNum ? scope.row.assetNum : 0}}</span></span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span style="cursor: pointer"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> <span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
+             <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
+              <div class="tooltip-title">Alert message (active)</div>
+              <div class="severity-info" style='justify-content: space-between'>
+                <div class="severity-name">{{$t('overall.result.total')}}</div>
+                <div class="severity-value">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+              v-show="!scope.row.trendLoading"
+              :alertDaysData="scope.row.alertDaysData"
+            />
+          </span>
         </template>
         <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
         <template v-else="scope.row[item.prop]">-</template>
@@ -65,15 +78,18 @@
 <script>
 import table from '@/components/common/mixin/table'
 import Template from '../../../page/config/template'
+import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 export default {
   name: 'cabinet Table',
-  components: { Template },
+  components: { Template, alertDaysInfo },
   mixins: [table],
   props: {
     loading: Boolean
   },
   data () {
     return {
+      needAlertDaysData: true,
+      trendKey: 'cabinetId',
       tableTitle: [
         {
           label: 'ID',

nezha-fronted/src/components/common/table/settings/dcTable.vue

@@ -65,9 +65,19 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'alertNum'">
-          <span style="cursor: pointer" class="alert-num" @click="showBottomBox('alertMessageTab', scope.row)">
+           <span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
+            <i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover(scope.row,true, $event)" @mouseleave="tooltipHover(scope.row,false, $event)"></i>
-            {{scope.row[item.prop]}}
+            <div v-if="scope.row.alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: scope.row.left + 'px',top:scope.row.top + 'px'}">
+              <div class="tooltip-title">Alert message (active)</div>
+              <div class="severity-info" style='justify-content: space-between'>
+                <div class="severity-name">{{$t('overall.result.total')}}</div>
+                <div class="severity-value">{{scope.row.alertNum}}</div>
+              </div>
+            </div>
+            <alertDaysInfo
+                    v-show="!scope.row.trendLoading"
+                    :alertDaysData="scope.row.alertDaysData"
+            />
           </span>
         </template>
 
@@ -115,15 +125,21 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
+import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 export default {
   name: 'dcTable',
   mixins: [table],
+  components: {
+    alertDaysInfo
+  },
   props: {
     loading: Boolean
   },
   data () {
     return {
       regNum: /^[0-9]+.?[0-9]*/,
+      needAlertDaysData: true,
+      trendKey: 'dcId',
       tableTitle: [
         {
           label: 'ID',

nezha-fronted/src/components/page/config/dc.vue

@@ -225,7 +225,9 @@ export default {
       },
       regNum: /^[0-9]+.?[0-9]*/,
       userData: [],
-      cabinetBoxShow: false
+      cabinetBoxShow: false,
+      needAlertDaysData: true,
+      trendKey: 'dcId'
     }
   },
   methods: {