perf:调整 告警响应页面 asset，datacenter，project，module，endpoint ，rule 详情标签页样式

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

@@ -1,38 +1,80 @@
-.chart-fullscreen.nz-dialog .panel-chart--fullscreen{
+.chart-fullscreen.nz-dialog .panel-chart--fullscreen {
-  .alert-message-info-header{
+  .alert-message-info-header {
-    border-bottom: 1px solid rgba(0,0,0,0.09);;
+    height: 72px;
-    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
-  }
-  .alert-message-info-box{
-    box-sizing: border-box;
     padding: 20px;
+    margin-top: 0;
+
+    .chart-header__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 600;
+      font-family: PingFangSC-Medium;
+
+      .alert-message-state {
+        display: block;
+        line-height: 20px;
+        margin-right: 15px;
+        font-size: 14px;
+        font-weight: normal;
+
+        padding: 2px 8px;
+        border-radius: 4px;
+        color: $--color-text-label;
+      }
+    }
+
+  }
+
+  .alert-message-info-box {
+    box-sizing: border-box;
+    padding: 20px 20px 33px 30px;
     display: flex;
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    .info-box-left{
+
+    .info-box-left {
       width: 66%;
       min-width: 500px;
       min-height: 600px;
       margin-right: 20px;
       display: flex;
       flex-direction: column;
+
       .nz-chart {
         height: 36%;
         margin-bottom: 20px;
         border: 1px solid $--border-color-light;
         flex: none;
       }
-      .alert-message-info-tab{
+
+      .alert-message-info-tab {
         height: 63%;
         flex: 1;
+
+        .alert-label-header-title {
+          display: none;
+        }
+
+        .alert-rule-box {
+          margin-bottom: 25px;
+
+          .alert-rule-value {
+            padding-right: 30px;
+          }
+        }
+
         .el-tabs.el-tabs--card {
           height: 100%;
           display: flex;
           flex-direction: column;
-          .el-tabs__header{
+
+          .el-tabs__header {
             margin: 0;
-            .el-tabs__item{
+
+            .el-tabs__item {
               border: 1px solid $--border-color-light;
               border-radius: 2px;
               //border-bottom: none;
@@ -40,19 +82,22 @@
               background: $--background-color-base;
               color: $--color-text-regular;
             }
-            .el-tabs__item:hover{
+
+            .el-tabs__item:hover {
               color: $--color-warning;
               background: $--background-color-empty;
               border-bottom-color: $--background-color-empty;
             }
-            .el-tabs__item.is-active{
+
+            .el-tabs__item.is-active {
               color: $--color-warning;
               background: $--background-color-empty;
               border-bottom-color: $--background-color-empty;
             }
           }
-          .el-tabs__content{
+
-            padding: 20px;
+          .el-tabs__content {
+            padding: 25px 30px;
             flex: 1;
             border: 1px solid $--border-color-light;
             border-top: none;
@@ -61,72 +106,118 @@
         }
       }
     }
-    .info-box-right{
+
+    .info-box-right {
       flex: 1;
       height: 100%;
       border: 1px solid #E7EAED;
       border-radius: 2px;
       box-sizing: border-box;
       padding: 0px 20px 20px 0;
+
       .table-no-data {
         height: calc(100% - 80px);
       }
-      .time-line-header{
+
-        padding: 20px;
+      .time-line-header {
+        padding: 20px 20px 35px 20px;
         font-size: 16px;
         color: $--color-text-primary;
         font-weight: 600;
         display: flex;
         justify-content: space-between;
+
         .scope-icon-box {
           display: flex;
           flex: 1;
           justify-content: right;
         }
+
         .scope-box {
           cursor: pointer;
           color: $--background-color-disabled;
+
           .nz-icon {
-            margin-right: 5px;
+            margin-right: 20px;
-            color: $--background-color-disabled ;
+            color: $--background-color-disabled;
             font-weight: 400;
           }
         }
-        .scope-box.is-select{
+
+        .scope-box.is-select {
           color: $--color-monitor;
+
           .nz-icon {
             color: $--color-monitor;
           }
         }
-        #time-line-scope{
+
+        #time-line-scope {
           //float: right;
         }
       }
-      .el-timeline{
+
+      .el-timeline {
         height: calc(100% - 80px);
         overflow-y: auto;
         padding-top: 14px;
         padding-left: 40px;
         box-sizing: border-box;
-        .el-timeline-item{
+
-          padding-bottom: 24px;
+        .el-timeline-item {
+          padding-bottom: 20px;
+
+          .el-timeline-item__wrapper {
+            .el-timeline-item__timestamp.is-top {
+              top: -50px;
+            }
+
+            .el-timeline-item__content {
+              .nz-alert-tag.nz-alert-tag_info {
+                margin-right: 10px;
+              }
+
+
+
+              .nz-alert-tag_info {
+                .nz-alert-tag__label {
+                  padding-left: 10px;
+                  padding-right: 10px;
+                  text-align: center;
+                  line-height: 20px;
+                }
+
+                .nz-alert-tag__content {
+                  padding-left: 6px;
+                  padding-right: 6px;
+                  text-align: center;
+                  line-height: 20px;
+                }
+              }
+            }
+          }
         }
-        .has-time{
+
+        .has-time {
           padding-top: 36px;
-          .el-timeline-item__tail{
+
+          .el-timeline-item__tail {
             height: calc(100% + 14px);
             top: -14px;
           }
         }
-        .el-timeline-item.last .el-timeline-item__tail{
+
+        .el-timeline-item.last .el-timeline-item__tail {
           display: block;
           top: -100%;
         }
-        .el-timeline-item:last-child .el-timeline-item__tail.only{
+
+        .el-timeline-item:last-child .el-timeline-item__tail.only {
           display: block;
           top: -100%;
         }
-        .el-timeline-item__timestamp.is-top{
+
+        .el-timeline-item__timestamp.is-top {
           position: absolute;
           top: -40px;
           left: -20px;
@@ -137,21 +228,25 @@
           margin: 0;
           padding: 10px 0;
         }
+
         .el-timeline-item__node {
           z-index: 1;
         }
-        .time-line-item-header{
+
+        .time-line-item-header {
           font-size: 14px;
           color: #333333;
           font-weight: 400;
         }
       }
-      .load-more-box{
+
+      .load-more-box {
         display: flex;
         justify-content: center;
         align-items: center;
       }
     }
+
     .table-no-data {
       width: 100%;
       height: 100%;
@@ -160,20 +255,24 @@
       align-items: center;
       justify-content: center;
     }
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       border: none;
     }
-    .info-box-header{
+
+    .info-box-header {
       height: 100%;
       overflow-y: auto;
     }
-    .info-box-title{
+
+    .info-box-title {
       font-size: 16px;
       color: $--color-text-primary;
       font-weight: 600;
       margin-bottom: 12px;
     }
-    .info-box-content{
+
+    .info-box-content {
       font-size: 14px;
       color: #666666;
       font-weight: 400;
@@ -183,3 +282,223 @@
   }
 }
 
+.el-dialog__body {
+  .alert-message-info-box {
+    .info-box-right {
+      .el-timeline {
+        .el-timeline-item {
+          .el-timeline-item__wrapper {
+            .el-timeline-item__content {
+              .alert-message-summary {
+                margin: 10px 0 4px;
+                font-size: 14px;
+                font-weight: 400;
+                padding-left: 5px;
+              } 
+
+              .alert-message-startAt {
+                font-size: 14px;
+                line-height: 20px;
+                font-weight: 400;
+                margin: 3px 0 5px;
+                padding-left: 5px;
+
+                span:nth-of-type(n) {
+                  color: #999999;
+                  margin-right: 5px;
+                }
+
+                span:nth-of-type(2n) {
+                  color: #666666;
+                  margin-right: 15px;
+                }
+              }
+
+              .margin-b-10 {
+                .alert-message-state.gray-bg {
+                  margin-right: 5px;
+                  padding: 2px 8px;
+                }
+              }
+
+              .alert-message-labels {
+                display: flex;
+                flex-wrap: wrap;
+
+                .nz-alert-tag.nz-alert-tag_normal {
+                  display: inline-block;
+                  margin-right: 10px !important;
+                  display: flex;
+                  flex-direction: row;
+
+                  .nz-alert-tag__label {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+
+                  .nz-alert-tag__content {
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+                }
+
+                .nz-alert-tag.nz-alert-tag_info {
+                  display: inline-block;
+                  margin-right: 20px !important;
+
+                  .nz-alert-tag__label {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+
+                  .nz-alert-tag__content {
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+                }
+              }
+
+            }
+          }
+        }
+      }
+    }
+
+    .info-box-left {
+      .alert-message-info-tab {
+        .el-tabs.el-tabs--card.el-tabs--top {
+          .el-tabs__content {
+            #pane-detail {
+              .info-box-header {
+                .info-box-content {
+                  display: flex;
+                  flex-wrap: wrap;
+
+                  .nz-alert-tag.nz-alert-tag_normal {
+                    display: inline-block;
+                    margin-right: 20px !important;
+                    display: flex;
+                    flex-direction: row;
+
+                    .nz-alert-tag__label {
+                      padding-left: 10px;
+                      padding-right: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+
+                    .nz-alert-tag__content {
+                      padding-left: 6px;
+                      padding-right: 6px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+                  }
+
+                  .nz-alert-tag.nz-alert-tag_info {
+                    display: inline-block;
+                    margin-right: 20px !important;
+
+                    .nz-alert-tag__label {
+                      padding-left: 10px;
+                      padding-right: 10px;
+                      text-align: center;
+                      line-height: 20px;
+                    }
+
+                    .nz-alert-tag__content {
+                      padding-left: 6px;
+                      padding-right: 6px;
+                      text-align: center;
+                      line-height: 20px;
+                    }
+                  }
+                }
+              }
+            }
+
+            #pane-dc {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-asset {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-endpoint {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-module {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-project {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-trbShot {
+              .editor-core.ql-container.ql-snow {
+                background-color: #23241E;
+                border-radius: 2px;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

nezha-fronted/src/components/chart/chart.vue

@@ -1,4 +1,5 @@
-<template>
+ 
+ <template>
   <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
     <chart-no-data  v-if="isNoData || isError || chartChildrenData"></chart-no-data>

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

@@ -1,51 +1,96 @@
 <template>
-  <div style="height: 100%;width: 100%">
+  <div style="height: 100%; width: 100%">
     <div class="time-line-header">
-      <span>{{$t('alert.relatedAlerts')}}</span>
+      <span>{{ $t("alert.relatedAlerts") }}</span>
       <div class="scope-icon-box">
-        <div class="scope-box" v-for="item in scopeList" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)" :title="item.label">
+        <div
+          class="scope-box"
+          v-for="item in scopeList"
+          :class="item.isSelect ? 'is-select' : ''"
+          :key="item.type"
+          @click="scopeChange(item)"
+          :title="item.label"
+        >
           <i class="nz-icon" :class="selectIcon(item)" />
         </div>
       </div>
     </div>
     <el-timeline v-my-loading="loading" v-if="!noData && timeLineData.length">
       <el-timeline-item
-        v-for="(item,index) in timeLineData"
+        v-for="(item, index) in timeLineData"
         :key="item.id"
         :class="{
-          'only': timeLineData.length === 1 ,
+          only: timeLineData.length === 1,
           'has-time': item.startAt,
-          'last': index === timeLineData.length-1 && index !==0
+          last: index === timeLineData.length - 1 && index !== 0,
         }"
         :color="item.severity.color"
-        :timestamp="item.startAt?item.startAt: ''"
+        :timestamp="item.startAt ? item.startAt : ''"
-        placement="top">
+        placement="top"
-        <div >
+      >
-          <div class='margin-b-10'>
+        <div>
-            <span slot="title-icon" v-if="item['state']" style="margin-left: 5px" class="alert-message-state" :class="{'gray-bg': item['state'] == 3, 'red-bg': item['state'] == 1,'yellow-bg': item['state'] == 2}">{{$t(stateOptions.find(state=>state.value == item['state']).label)}}</span>
+          <div class="margin-b-10">
-            <span class="time-line-item-header"> {{item.alertRule.name}}</span>
-          </div>
-          <div>
-          <span v-for="(label, i) in labelsSort(JSON.parse(item.labels))" :key="i">
             <span
-              @mouseenter="labelHover(item, label.label, true, true, $event)"
+              slot="title-icon"
-              @mouseleave="labelHover(item, label.label, false, true,)">
+              v-if="item['state']"
-              <nz-alert-tag
+              style="margin-left: 5px"
-                v-if="label.label !== 'alertname' && label.label !== 'severity'" :key="label.label" :cursor-point="tagType(label.label) !== 'info'"
+              class="alert-message-state"
-                :label="label.label"
+              :class="{
-                :type="tagType(label.label)"
+                'gray-bg': item['state'] == 3,
-                style="margin: 5px 0 5px 5px;"
+                'red-bg': item['state'] == 1,
+                'yellow-bg': item['state'] == 2,
+              }"
+              >{{
+                $t(
+                  stateOptions.find((state) => state.value == item["state"])
+                    .label
+                )
+              }}</span
+            >
+            <span class="time-line-item-header">
+              {{ item.alertRule.name }}</span
+            >
+          </div>
+          <div class="alert-message-summary">{{ item.summary }}</div>
+          <div class="alert-message-startAt">
+            <span>Start time:</span>
+            <span>{{item.startTime.split(" ")[1]}}</span>
+            <span>Duration:</span>
+            <span>{{getDuration(item)}}</span>
+          </div>
+          <div class="alert-message-labels">
+            <span
+              v-for="(label, i) in labelsSort(JSON.parse(item.labels))"
+              :key="i"
+            >
+              <span
+                @mouseenter="labelHover(item, label.label, true, true, $event)"
+                @mouseleave="labelHover(item, label.label, false, true)"
               >
-               {{label.value}}
+                <nz-alert-tag
-              </nz-alert-tag>
+                  v-if="
+                    label.label !== 'alertname' && label.label !== 'severity'
+                  "
+                  :key="label.label"
+                  :cursor-point="tagType(label.label) !== 'info'"
+                  :label="label.label"
+                  :type="tagType(label.label)"
+                  style="margin: 5px 0 5px 5px"
+                >
+                  {{ label.value }}
+                </nz-alert-tag>
+              </span>
             </span>
-          </span>
           </div>
         </div>
       </el-timeline-item>
-      <div  v-if="timeLineData.length >= total" style="text-align: center">{{$t('overall.noMoreData')}}</div>
+      <div v-if="timeLineData.length >= total" style="text-align: center">
+        {{ $t("overall.noMoreData") }}
+      </div>
       <div v-else class="load-more-box">
-        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}</el-button>
+        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{
+          $t("overall.loadMore")
+        }}</el-button>
       </div>
     </el-timeline>
     <div class="table-no-data" v-else>
@@ -65,178 +110,224 @@
 </template>
 
 <script>
-import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
+import { alertMessage as alertMessageConstant } from "@/components/common/js/constants";
-import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
+import alertMessageLabelMixin from "@/components/common/alert/alertMessageLabelMixin";
-import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import alertLabelMixin from "@/components/common/mixin/alertLabelMixin";
+import { calcDurationByStringTimeB } from '@/components/common/js/tools.js'
 
 export default {
-  name: 'alertMessageInfoTimeLine',
+  name: "alertMessageInfoTimeLine",
   props: {
     infoData: {
-      type: Object
+      type: Object,
     },
-    time: {}
+    time: {},
   },
   mixins: [alertMessageLabelMixin, alertLabelMixin],
   computed: {
-    severityData () {
+    severityData() {
-      return this.$store.getters.severityData
+      return this.$store.getters.severityData;
+    },
+    getDuration () {
+      return function (record) {
+        if (record.endAt) {
+          return calcDurationByStringTimeB(record.startTime, record.endAt)
+        }
+        return calcDurationByStringTimeB(record.startTime, this.nowTime)
+      }
     }
   },
   watch: {
     time: {
       immediate: true,
       deep: true,
-      handler (n) {
+      handler(n) {
         if (n && n.length) {
-          this.pageNo = 1
+          this.pageNo = 1;
-          this.getTimeLineData()
+          this.getTimeLineData();
         }
-      }
+      },
-    }
+    },
   },
-  data () {
+  data() {
     return {
       pageNo: 1,
       pageSize: 20,
-      scope: ['asset', 'datacenter', 'project', 'module', 'endpoint', 'alertrule', 'hash'],
+      scope: [
+        "asset",
+        "datacenter",
+        "project",
+        "module",
+        "endpoint",
+        "alertrule",
+        "hash",
+      ],
       timeLineData: [],
-      lastDataTime: '',
+      lastDataTime: "",
       loading: false,
-      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
+      dateFormatStr: localStorage.getItem("nz-default-dateFormat")
+        ? localStorage.getItem("nz-default-dateFormat")
+        : "YYYY-MM-DD HH:ss:mm",
       noData: false,
       stateOptions: alertMessageConstant.states,
-      scopeList: [{
+      scopeList: [
-        key: 'asset',
+        {
-        isSelect: true,
+          key: "asset",
-        label: this.$t('overall.asset')
+          isSelect: true,
-      }, {
+          label: this.$t("overall.asset"),
-        key: 'datacenter',
+        },
-        isSelect: true,
+        {
-        label: this.$t('overall.dc')
+          key: "datacenter",
-      }, {
+          isSelect: true,
-        key: 'project',
+          label: this.$t("overall.dc"),
-        isSelect: true,
+        },
-        label: this.$t('overall.project')
+        {
-      }, {
+          key: "project",
-        key: 'module',
+          isSelect: true,
-        isSelect: true,
+          label: this.$t("overall.project"),
-        label: this.$t('overall.module')
+        },
-      }, {
+        {
-        key: 'endpoint',
+          key: "module",
-        isSelect: true,
+          isSelect: true,
-        label: this.$t('overall.endpoint')
+          label: this.$t("overall.module"),
-      },
+        },
-      {
+        {
-        key: 'alertrule',
+          key: "endpoint",
-        isSelect: true,
+          isSelect: true,
-        label: this.$t('alert.alertRule')
+          label: this.$t("overall.endpoint"),
-      }, {
+        },
-        key: 'hash',
+        {
-        isSelect: true,
+          key: "alertrule",
-        label: this.$t('overall.hash')
+          isSelect: true,
-      }
+          label: this.$t("alert.alertRule"),
+        },
+        {
+          key: "hash",
+          isSelect: true,
+          label: this.$t("overall.hash"),
+        },
       ],
       total: 20,
-      scopeChangeTimer: null
+      scopeChangeTimer: null,
-    }
+    };
   },
-  mounted () {
+  mounted() {
     // this.getTimeLineData(1)
-    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
+    const dateFormatStr = localStorage.getItem("nz-default-dateFormat");
     if (dateFormatStr) {
-      this.dateFormatStr = dateFormatStr.split(' ')[0]
+      this.dateFormatStr = dateFormatStr.split(" ")[0];
     } else {
-      this.dateFormatStr = 'YYYY-MM-DD'
+      this.dateFormatStr = "YYYY-MM-DD";
     }
   },
   methods: {
-    getTimeLineData () {
+    getTimeLineData() {
-      this.noData = false
+      this.noData = false;
-      this.loading = true
+      this.loading = true;
       const params = {
         pageNo: this.pageNo,
         pageSize: this.pageSize,
-        scope: this.scopeList.filter(item => item.isSelect).map(item => item.key).join(','),
+        scope: this.scopeList
+          .filter((item) => item.isSelect)
+          .map((item) => item.key)
+          .join(","),
         id: this.infoData.id,
-        state: '',
+        state: "",
-        startAt: this.timezoneToUtcTimeStr(this.time[0] * 1000, 'YYYY-MM-DD HH:mm:ss'),
+        startAt: this.timezoneToUtcTimeStr(
-        endAt: this.timezoneToUtcTimeStr(this.time[1] * 1000, 'YYYY-MM-DD HH:mm:ss'),
+          this.time[0] * 1000,
-        orderBy: '-startAt'
+          "YYYY-MM-DD HH:mm:ss"
-      }
+        ),
-      this.$get('/alert/message/rel', params).then(res => {
+        endAt: this.timezoneToUtcTimeStr(
-        this.loading = false
+          this.time[1] * 1000,
-        if (res.code === 200) {
+          "YYYY-MM-DD HH:mm:ss"
-          this.total = res.data.total
+        ),
-          if (this.pageNo == 1) {
+        orderBy: "-startAt",
-            this.timeLineData = res.data.list
+      };
+      this.$get("/alert/message/rel", params)
+        .then((res) => {
+          this.loading = false;
+          if (res.code === 200) {
+            this.total = res.data.total;
+            if (this.pageNo == 1) {
+              this.timeLineData = res.data.list;
+            } else {
+              this.timeLineData.push(...res.data.list);
+            }
+            this.disposeTime(this.pageNo);
+            this.noData = false;
+            this.pageNo++;
           } else {
-            this.timeLineData.push(...res.data.list)
+            this.noData = true;
           }
-          this.disposeTime(this.pageNo)
+        })
-          this.noData = false
+        .catch(() => {
-          this.pageNo++
+          this.loading = false;
-        } else {
+          this.noData = true;
-          this.noData = true
+        });
-        }
-      }).catch(() => {
-        this.loading = false
-        this.noData = true
-      })
     },
-    disposeTime (pageNo) {
+    disposeTime(pageNo) {
-      let i = (pageNo - 1) * this.pageSize
+      let i = (pageNo - 1) * this.pageSize;
       for (i; i < this.timeLineData.length; i++) {
-        const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
+        const lastDataTime = this.timestampStr(
-        this.timeLineData[i].color = '#fa8'
+          this.timeLineData[i].startAt,
+          this.dateFormatStr
+        );
+        this.timeLineData[i].color = "#fa8";
+        this.timeLineData[i].startTime = this.timeLineData[i].startAt;
         if (this.lastDataTime !== lastDataTime) {
-          this.lastDataTime = lastDataTime
+          this.lastDataTime = lastDataTime;
-          this.timeLineData[i].startAt = lastDataTime
+          this.timeLineData[i].startAt = lastDataTime;
         } else {
-          this.timeLineData[i].startAt = ''
+          this.timeLineData[i].startAt = "";
         }
       }
     },
-    selectIcon (item) {
+    selectIcon(item) {
       switch (item.key) {
-        case 'asset' : return 'nz-icon-overview-project'
+        case "asset":
-        case 'datacenter' : return 'nz-icon-Datacenter2'
+          return "nz-icon-overview-project";
-        case 'project' : return 'nz-icon-project'
+        case "datacenter":
-        case 'module' : return 'nz-icon-overview-module'
+          return "nz-icon-Datacenter2";
-        case 'endpoint' : return 'nz-icon-overview-endpoint'
+        case "project":
-        case 'alertrule' : return 'nz-icon-Alertrule'
+          return "nz-icon-project";
-        case 'hash' : return 'nz-icon-module5'
+        case "module":
+          return "nz-icon-overview-module";
+        case "endpoint":
+          return "nz-icon-overview-endpoint";
+        case "alertrule":
+          return "nz-icon-Alertrule";
+        case "hash":
+          return "nz-icon-module5";
       }
-      return 'nz-icon-module5'
+      return "nz-icon-module5";
     },
-    scopeChange (scope) {
+    scopeChange(scope) {
       if (this.scopeChangeTimer) {
-        clearInterval(this.scopeChangeTimer)
+        clearInterval(this.scopeChangeTimer);
-        this.scopeChangeTimer = null
+        this.scopeChangeTimer = null;
       }
-      this.loading = true
+      this.loading = true;
-      const isSelectArr = this.scopeList.filter(item => item.isSelect)
+      const isSelectArr = this.scopeList.filter((item) => item.isSelect);
       if (isSelectArr.length === this.scopeList.length) {
-        this.scopeList.forEach(item => {
+        this.scopeList.forEach((item) => {
-          item.isSelect = false
+          item.isSelect = false;
-        })
+        });
-        scope.isSelect = !scope.isSelect
+        scope.isSelect = !scope.isSelect;
       } else if (isSelectArr.length === 1 && isSelectArr[0].key === scope.key) {
-        this.scopeList.forEach(item => {
+        this.scopeList.forEach((item) => {
-          item.isSelect = true
+          item.isSelect = true;
-        })
+        });
       } else {
-        scope.isSelect = !scope.isSelect
+        scope.isSelect = !scope.isSelect;
       }
       this.scopeChangeTimer = setTimeout(() => {
-        this.pageNo = 1
+        this.pageNo = 1;
-        this.getTimeLineData()
+        this.getTimeLineData();
-      }, 100)
+      }, 100);
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 </style>

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

@@ -8,7 +8,7 @@
         {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
       </div>
     </div>
-    <div class="alert-rule-info" >
+    <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>