From 64f244aa7a2182d6832b714f04f04f993d9bb5f4 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 11 May 2020 16:11:06 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20label=E6=A0=B7=E5=BC=8F=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=E7=AD=89=201.label=E6=A0=B7=E5=BC=8F=E5=8F=98?=
 =?UTF-8?q?=E6=9B=B4=202.=E7=94=A8=E6=88=B7=E7=99=BB=E5=BD=95=E6=8B=A6?=
 =?UTF-8?q?=E6=88=AA=E6=96=B0=E5=A2=9E=E4=B8=80=E4=BA=9B=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/tabs/alertMessageTab.vue | 14 ++-
 .../src/components/page/alert/list.vue        | 18 +++-
 .../src/components/page/alert/nzAlertTag.vue  | 96 +++++++++++++++++++
 nezha-fronted/src/http.js                     |  6 +-
 4 files changed, 122 insertions(+), 12 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/alert/nzAlertTag.vue

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 76b0000f9..acec35398 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -88,10 +88,14 @@
             <span v-else>-</span>
           </div>-->
           <template v-else-if="item.prop == 'labels'">
-            <el-tag v-if="key != 'alertname' && key != 'severity'"
+            <nz-alert-tag :label="key" type="info" style="margin: 5px;"
+                          :cursor-point="false"
+                          v-if="key != 'alertname' && key != 'severity'"
+                          v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+            <!--<el-tag v-if="key != 'alertname' && key != 'severity'"
                     :key="key"
                     type="info"
-                    size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>
+                    size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
           </template>
           <div v-else-if="item.prop == 'state'">
             <span class="">
@@ -162,10 +166,12 @@
 </template>
 
 <script>
-  import axios from 'axios'
+  import axios from 'axios';
+  import nzAlertTag from '../../../page/alert/nzAlertTag';
   export default {
     name: "alertMessageTab",
     components: {
+      'nz-alert-tag': nzAlertTag
     },
     props: {
       from: String, //来自哪个主页面，有："asset"、"alertRule"
@@ -477,7 +483,7 @@
         }
       },
       labelsClassName(row) {
-        if (row.columnIndex == 2) {
+        if (row.column.label == this.$t("alert.list.labels")) {
           return "alert-message-list-labels";
         } else {
           return "";
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 1061fdd11..fe7600ff8 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -99,12 +99,17 @@
                 <span v-else>-</span>
               </div>-->
               <template v-else-if="item.prop == 'labels'">
-                <el-tag @click="showTagDetail(scope.row, key)"
+                <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
+                              :cursor-point="tagType(key) == 'info' ? false : true"
+                              @click="showTagDetail(scope.row, key)"
+                              v-if="key != 'alertname' && key != 'severity'"
+                              v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                <!--<el-tag @click="showTagDetail(scope.row, key)"
                         :key="key"
                         :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
                         v-if="key != 'alertname' && key != 'severity'"
                         :type="tagType(key)"
-                        size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>
+                        size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
               </template>
               <div v-else-if="item.prop == 'state'">
                 <span class="">
@@ -184,9 +189,14 @@
 <script>
   import bus from '../../../libs/bus';
   import axios from 'axios'
+  import nzAlertTag from './nzAlertTag'
+
   var vm;
   export default {
     name: "alertList",
+    components: {
+      'nz-alert-tag': nzAlertTag
+    },
     data() {
       vm = this;
       return {
@@ -364,7 +374,7 @@
       tagType() {
         return (key) => {
           if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
-            return "";
+            return "normal";
           } else {
             return "info";
           }
@@ -556,7 +566,7 @@
         }
       },
       labelsClassName(row) {
-        if (row.columnIndex == 2) {
+        if (row.column.label == this.$t("alert.list.labels")) {
           return "alert-message-list-labels";
         } else {
           return "";
diff --git a/nezha-fronted/src/components/page/alert/nzAlertTag.vue b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
new file mode 100644
index 000000000..d752ebfff
--- /dev/null
+++ b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
@@ -0,0 +1,96 @@
+<template>
+ <span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'pointer' : 'default'}" @click="$emit('click')">
+   <span class="nz-alert-tag__label">{{label}}</span>
+   <span class="nz-alert-tag__content"><slot></slot></span>
+ </span>
+</template>
+
+<script>
+  export default {
+    name: "nzAlertTag",
+    props: {
+      label: String, //标题
+      type: {type: String, default: "normal"}, //normal:blue; success:green; info:gray; danger:red; warning:orange;
+      cursorPoint: {type: Boolean, default: true}, //是否鼠标悬停变手指
+    },
+    methods: {
+    },
+    computed: {
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.nz-alert-tag {
+  border: 1px solid;
+  height: 20px;
+  font-size: 12px;
+  line-height: 20px;
+  border-radius: 4px;
+  display: inline-block;
+}
+.nz-alert-tag__label {
+  border-radius: 3px 0 0 3px;
+  padding: 0 4px;
+  min-width: 36px;
+  max-width: 100px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  word-break: break-all;
+  display: inline-block;
+}
+.nz-alert-tag__content {
+  border-radius: 0 3px 3px 0;
+  padding: 0 4px;
+  min-width: 36px;
+  max-width: 100px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  word-break: break-all;
+  display: inline-block;
+}
+.nz-alert-tag_normal {
+  border-color: #409eff;
+  .nz-alert-tag__label {
+    border-right: 1px solid #409eff;
+    background-color: #409eff;
+    color: white;
+  }
+}
+.nz-alert-tag_success {
+  border-color: #50d050;
+  .nz-alert-tag__label {
+    border-right: 1px solid #50d050;
+    background-color: #50d050;
+    color: white;
+  }
+}
+.nz-alert-tag_info {
+  border-color: #909399;
+  .nz-alert-tag__label {
+    border-right: 1px solid #909399;
+    background-color: #909399;
+    color: white;
+  }
+}
+.nz-alert-tag_danger {
+  border-color: #d64f40;
+  .nz-alert-tag__label {
+    border-right: 1px solid #d64f40;
+    background-color: #d64f40;
+    color: white;
+  }
+}
+.nz-alert-tag_warning {
+  border-color: #e6a23c;
+  .nz-alert-tag__label {
+    border-right: 1px solid #e6a23c;
+    background-color: #e6a23c;
+    color: white;
+  }
+}
+</style>
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 9d90a3827..f340ed05e 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -20,14 +20,12 @@ axios.interceptors.request.use(config => {
     },
     err => Promise.reject(err)
 );
+const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008]; //账号锁定等
 axios.interceptors.response.use(
     response => {
       if(response.status === 200){
-        if(response.data.code == 518008) {
+        if(accountErrorCode.indexOf(response.data.code) != -1) {
           window.location.href = "/";
-          /*router.push({
-            path: "/login"
-          });*/
         }
       }
       return response