From b990b6804fc2868ba128660eea3ec514c7a7a63a Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 1 Apr 2022 09:53:02 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=20scope?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/alert/alertMessageInfo.scss        |  3 +
 .../common/alert/alertMessageInfoTimeLine.vue | 61 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
index 7061ddbb2..4b16dcc63 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss
@@ -73,6 +73,9 @@
         font-size: 16px;
         color: $--color-text-primary;
         font-weight: 600;
+        #time-line-scope{
+          //float: right;
+        }
       }
       .el-timeline{
         height: calc(100% - 80px);
diff --git a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
index b48bb3366..cab110f4c 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue
@@ -2,6 +2,24 @@
   <div style="height: 100%;width: 100%">
     <div class="time-line-header">
       {{$t('alert.relatedAlerts')}}
+      <el-select
+        id="time-line-scope"
+        v-model="scope"
+        multiple
+        collapse-tags
+        :placeholder="$t('el.select.placeholder')"
+        popper-class="right-box-select-top prevent-clickoutside"
+        size="small"
+        @change="changeScope"
+      >
+        <el-option
+          v-for="item in scopeList"
+          :key="item.key"
+          :label="$t(item.label)"
+          :value="item.key"
+        >
+        </el-option>
+      </el-select>
     </div>
     <el-timeline v-my-loading="loading" v-if="!noData">
       <el-timeline-item
@@ -36,7 +54,15 @@
           </div>
         </div>
       </el-timeline-item>
+<!--      <div @click="getTimeLineData" v-if="timeLineData.length === total">加载更多</div>-->
+<!--      <div v-else>没有更多了</div>-->
     </el-timeline>
+    <div class="table-no-data" v-else>
+      <svg class="icon" aria-hidden="true">
+        <use xlink:href="#nz-icon-no-data-list"></use>
+      </svg>
+      <div class="table-no-data__title">No results found</div>
+    </div>
     <alertLabel
       v-if="alertLabelShow"
       :id="alertLabelId"
@@ -75,7 +101,32 @@ export default {
       loading: false,
       dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
       noData: false,
-      stateOptions: alertMessageConstant.states
+      stateOptions: alertMessageConstant.states,
+      scopeList: [{
+        key: 'asset',
+        label: this.$t('overall.asset')
+      }, {
+        key: 'datacenter',
+        label: this.$t('overall.dc')
+      }, {
+        key: 'project',
+        label: this.$t('overall.project')
+      }, {
+        key: 'module',
+        label: this.$t('overall.module')
+      }, {
+        key: 'endpoint',
+        label: this.$t('overall.endpoint')
+      },
+      {
+        key: 'alertrule',
+        label: this.$t('alert.alertRule')
+      }, {
+        key: 'hash',
+        label: this.$t('overall.hash')
+      }
+      ],
+      total: 20
     }
   },
   mounted () {
@@ -88,7 +139,7 @@ export default {
     }
   },
   methods: {
-    getTimeLineData (pageNo) {
+    getTimeLineData (pageNo = this.pageNo) {
       this.noData = false
       this.loading = true
       const params = {
@@ -104,6 +155,7 @@ export default {
       this.$get('/alert/message/rel', params).then(res => {
         this.loading = false
         if (res.code === 200) {
+          this.total = res.data.total
           if (pageNo == 1) {
             this.timeLineData = res.data.list
           } else {
@@ -111,6 +163,7 @@ export default {
           }
           this.disposeTime(pageNo)
           this.noData = false
+          this.pageNo++
         } else {
           this.noData = true
         }
@@ -130,6 +183,10 @@ export default {
           this.timeLineData[i].startAt = ''
         }
       }
+    },
+    changeScope (value) {
+      console.log(value)
+      this.getTimeLineData(1)
     }
   }
 }