NEZ-1821 perf : 告警详情页面 样式优化

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

@@ -54,9 +54,9 @@
         height: 61.8%;
         flex: 1;
 
-        // .alert-label-header-title {
-        //   // display: none;
-        // }
+        .alert-label-header-title3 {
+          display: none;
+        }
 
         .alert-rule-box {
           margin-bottom: 25px;

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

@@ -0,0 +1,874 @@
+<template>
+  <div
+    :class="calcHeight(that.position, that)"
+    :style="calcPosition(that.position, that)"
+    class="alert-label__border"
+    ref="alertLabels"
+  >
+    <div class="alert-label-header-title3">
+      <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 name-labe">
+        <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 name-labe">
+        <div class="alert-label-title">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>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.type") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.type && alertLabelData.type.name
+              ? alertLabelData.type.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.state && alertLabelData.state.name
+              ? alertLabelData.state.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Ping</div>
+        <div class="alert-label-value">
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 1,
+              'red-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 0,
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData">{{
+            alertLabelData &&
+            alertLabelData.pingInfo &&
+            alertLabelData.pingInfo.rtt
+              ? alertLabelData.pingInfo.rtt + "ms"
+              : ""
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.dc") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.dc && alertLabelData.dc.name
+              ? alertLabelData.dc.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.cabinet &&
+            alertLabelData.cabinet.name
+              ? alertLabelData.cabinet.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.brand") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.brand && alertLabelData.brand.name
+              ? alertLabelData.brand.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.model") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.model && alertLabelData.model.name
+              ? alertLabelData.model.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'module'"
+      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 name-labe">
+        <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>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'project'"
+      v-my-loading="loading"
+    >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="alert-label-box name-labe">
+        <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.module") }}</div>
+        <div class="alert-label-value">
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.moduleNum
+              ? alertLabelData.moduleNum
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'endpoint'"
+      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 name-labe">
+        <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>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.module") }}</div>
+        <div class="alert-label-value">
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData &&
+            alertLabelData.module &&
+            alertLabelData.module.name
+              ? alertLabelData.module.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          ></i
+          >&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.asset.name
+              ? alertLabelData.asset.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          <span style="width: auto">
+            <span class="endpoint-cell-left"
+              ><i class="nz-icon nz-icon-Metrics active" />
+              {{ $t("project.endpoint.metrics") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[0].state === 0"
+            >
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[0].state === 1
+              "
+            >
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[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 active" />
+              {{ $t("project.endpoint.logs") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[1].state === 0"
+            >
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[1].state === 1
+              "
+            >
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type === 'dc'" 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 name-labe">
+        <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>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          <i
+            v-if="alertLabelData"
+            class="nz-icon nz-icon-cabinet monitorColor"
+            :class="
+              alertLabelData && alertLabelData.cabinetNum > 0
+                ? 'color23BF9A'
+                : 'colorEF7458'
+            "
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.cabinetNum
+              ? alertLabelData.cabinetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg': alertLabelData && alertLabelData.state === 'ON',
+              'red-bg': alertLabelData && alertLabelData.state === 'OFF',
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{
+            $t("overall.enabled")
+          }}</span>
+          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{
+            $t("overall.disabled")
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import trendMixin from './trendMixins'
+
+export default {
+  name: 'alertLabel',
+  mixins: [trendMixin],
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0,
+      boxWidth: 0,
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
+    }
+  },
+  watch: {
+    id: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    },
+    that: {
+      immediate: true,
+      deep: true,
+      handler (n) {}
+    },
+    LRTriangle: {
+      immediate: true,
+      deep: true,
+      handler (n) {}
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
+          }
+          const dialogHeight = dialog.getBoundingClientRect()
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList - topOffSetView}px`
+          }
+        } else {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top + topOffSet}px`
+          }
+        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        return labelPosition
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const elHeight =
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.loading = true
+      if (this.type === 'asset') {
+        this.$get('asset/asset/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'project') {
+        this.$get('monitor/project/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'module') {
+        this.$get('monitor/module/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'endpoint') {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'dc') {
+        this.$get('dc/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      const weekDays = this.getWeeksTime()
+      if (this.trendTimer) {
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
+      }
+      this.trendTimer = setTimeout(() => {
+        this.trendLoading = true
+        const params = {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          if (!res.data) {
+            return
+          }
+          const alertDaysData = res.data.result
+            ? res.data.result[0].values
+            : []
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+          alertDaysData.forEach((item) => {
+            item.values.forEach((time) => {
+              const findItem = newWeekDays.find((days) => days.time == time[0])
+              if (findItem) {
+                findItem[item.metric.priority] = time[1]
+              }
+            })
+          })
+          setTimeout(() => {
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
+    },
+    alertActiveStr () {
+      return this.$t('overall.active')
+    },
+    alertStateStr (num) {
+      if (num == 1) {
+        return this.$t('asset.inStock')
+      } 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 () {
+    if (this.$refs.alertLabels) {
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+    } else {
+      this.heightList = 0
+      this.boxWidth = 0
+    }
+  },
+  beforeDestroy () {}
+}
+</script>
+<style>
+</style>

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

@@ -40,8 +40,8 @@
 <script>
 import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDetail'
 import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
-import alertLabel from '@/components/common/alert/alertLabel'
-import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
+import alertLabel from '@/components/common/alert/alertLabel3'
+import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
 // import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageInfoTab',

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

@@ -0,0 +1,221 @@
+<template>
+  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
+    <div class="alert-label-header-title3">
+      <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-nfo" >
+      <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 name-labe">
+        <div class="alert-rule-title">{{$t('overall.name')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
+      </div>
+<!--      <div class="alert-rule-box">-->
+<!--        <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
+<!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
+<!--      </div>-->
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.type')}}</div>
+        <div class="alert-rule-value">
+          <span v-if="alertRuleData.type === 1">
+            {{$t('project.metrics.metrics')}}
+          </span>
+          <span v-else-if="alertRuleData.type === 2">
+            {{$t('overall.logs')}}
+          </span>
+          <span v-else-if="alertRuleData.type === 3">SNMP trap</span>
+          <span v-else>--</span>
+        </div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.severity')}}</div>
+        <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
+        <div class="alert-rule-value" v-if="alertRuleData">
+          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
+            <div class="severity-info" style='justify-content: space-between'>
+              <div class="severity-name">{{$t('overall.result.total')}}</div>
+              <div class="severity-value">{{alertRuleData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
+        <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.state')}}</div>
+        <div class="alert-rule-value" style="margin-left: 3px">
+          <div v-if="alertRuleData.state === 1">
+            <i class="active-icon green-bg inline-block"></i>
+            {{ $t('overall.enabled') }}
+          </div>
+          <div v-else-if="alertRuleData.state === 0">
+            <i class="active-icon gray-bg inline-block"></i>
+            {{ $t('overall.disabled') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartDataFormat from '../../chart/chartDataFormat'
+import trendMixins from '@/components/common/alert/trendMixins'
+export default {
+  name: 'alert-rule-info',
+  mixins: [trendMixins],
+  props: {
+    id: {},
+    messageLoad: {},
+    detailList: Boolean,
+    that: {},
+    severityData: Array
+  },
+  data () {
+    return {
+      loading: true,
+      alertRuleData: '',
+      severityColor: '',
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
+    }
+  },
+  components: {
+
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        if (!position) {
+          return {
+            left: '0px',
+            top: '0px'
+          }
+        }
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        // const windowWidth = window.innerWidth
+        const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
+        const windowHeight = window.innerHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        if (position.top > windowHeight / 2) {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top - boxHeight}px`
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top}px`
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    formatThreshold (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    },
+    trbShotShow () {
+      this.$emit('showText')
+    },
+    severityDataColor () {
+      this.severityData.forEach(item => {
+        if (this.alertRuleData.severityId === item.id) {
+          this.severityColor = item.color
+        }
+      })
+    },
+    returnColor (obj) {
+      let color = ''
+      if (!obj) {
+        color = '#23bf9a'
+        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 () {
+    this.$get('/alert/rule/' + this.id).then((res) => {
+      if (res.msg === 'success') {
+        this.loading = false
+        this.alertRuleData = res.data
+        this.severityDataColor()
+        this.alertColor = this.returnColor(res.data.alert)
+        const weekDays = this.getWeeksTime()
+        if (this.trendTimer) {
+          clearTimeout(this.trendTimer)
+          this.trendTimer = null
+        }
+        this.trendTimer = setTimeout(() => {
+          this.trendLoading = true
+          const params = {
+            type: 'total',
+            dimension: 'priority',
+            step: 'd'
+          }
+          params['rule' + 'Id'] = this.id
+          this.$get('/stat/alertMessage/trend', params).then((res) => {
+            if (!res.data) {
+              return
+            }
+            const alertDaysData = res.data.result ? res.data.result[0].values : []
+            const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+            alertDaysData.forEach(item => {
+              item.values.forEach(time => {
+                const findItem = newWeekDays.find(days => days.time == time[0])
+                if (findItem) {
+                  findItem[item.metric.priority] = time[1]
+                }
+              })
+            })
+            setTimeout(() => {
+              this.alertDaysData = newWeekDays
+              this.trendLoading = false
+            })
+          })
+        })
+      } else {
+        this.$message.error(res.msg)
+      }
+    })
+  }
+}
+
+</script>