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

2022-02-25 14:07:17 +08:00
parent c0c436c53a
commit 2bd1fe4df4
8 changed files with 117 additions and 22 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/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) {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/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 = ''
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/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: {
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/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 ''
--- a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
+++ b/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',
--- a/nezha-fronted/src/components/common/table/settings/dcTable.vue
+++ b/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)">
-            <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
-            {{scope.row[item.prop]}}
+           <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>

@@ -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',
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/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: {