From ea0b8eafefb4cb71985f2837c4575b4633195d1a Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Fri, 17 Jun 2022 10:02:07 +0800
Subject: [PATCH 1/3] =?UTF-8?q?perf=20:=20panelBox=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=8A=E5=85=B6=E7=BC=96=E8=BE=91=E6=97=B6=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=96=B9=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/rightBox/panelBox.scss  | 19 +++++-
 .../components/common/rightBox/panelBox.vue   | 31 ++++------
 .../src/components/page/dashboard/panel.vue   | 62 ++++++++++++-------
 3 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index 27ccfbed3..25d90fe35 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -1,10 +1,17 @@
 .right-box-panel{
+  .item-report{
+    .form__sub-title{
+      margin-bottom: 5px;
+    }
+  }
   .item-receivers{
     .el-select.el-select--small{
       width: 100%;
     }
     .item-receivers-text{
+      font-size: 12px;
       color: $--color-text-secondary;
+      padding-left: 5px;
     }
   }
     .el-input--suffix.el-date-editor--datetime .el-input__inner{
@@ -64,8 +71,15 @@
           height: 41px;
           .el-radio-group{
             height: 100%;
-            border-left: 1px solid $--border-color-light;
+            .el-radio-button{
+              border: 1px solid $--border-color-light;
+              margin-right: -1px;
+            }
+            .el-radio-button.is-active{
+              border-radius: 0;
+            }
             .el-radio-button__inner{
+              border: 0;
               height: 100%;
               line-height: 1.5;
               font-size: 14px;
@@ -76,6 +90,7 @@
             height: 100%;
             .el-checkbox-button{
               margin-right: -2px;
+              width: calc(100% / 6.9) !important;
               .el-checkbox-button__inner{
                 background-color: $--background-color-empty;
                 border:1px solid $--border-color-light;
@@ -101,6 +116,7 @@
       }
       .form-tabs{
         width: 100%;
+        margin-bottom: 0 !important;
         .el-tabs__nav{
           display: flex;
           .el-tabs__item{
@@ -126,7 +142,6 @@
  }
       
   .el-form-item__content{
-    text-align: unset !important;
     .el-checkbox-button{
       width: calc(100% / 7) !important;
       .el-checkbox-button__inner{
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index bda8a1e91..4223c23fb 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -40,7 +40,7 @@
             </el-form-item>
           <!--   Report  -->
           <div>
-            <el-form-item >
+            <el-form-item class="item-report">
             <div class="form__sub-title">
               <span>{{$t('dashboard.panel.report')}}</span>
               <el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
@@ -264,17 +264,6 @@ export default {
     this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
     if (this.editPanel.id) {
       this.isShow = Number(this.editPanel.param.report.schedule.type)
-      this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
-      if (this.editPanel.param.report.schedule.stime !== '') {
-        this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
-      } else {
-        this.editPanel.param.report.schedule.stime = ''
-      }
-      if (this.editPanel.param.report.schedule.etime !== '') {
-        this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
-      } else {
-        this.editPanel.param.report.schedule.etime = ''
-      }
     }
   },
   mounted () {
@@ -327,8 +316,8 @@ export default {
               type: Number(this.editPanel.param.report.schedule.type),
               repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
               nums: this.editPanel.param.report.schedule.nums,
-              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
-              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
+              stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.stime,
+              etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss') : this.editPanel.param.report.schedule.etime
             },
             receivers: this.editPanel.param.report.receivers
           },
@@ -404,15 +393,21 @@ export default {
     'editPanel.param.report.schedule.stime': {
       deep: true,
       handler (n) {
-        this.editPanel.param.report.schedule.stime = bus
-          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        const startTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.stime', '')
+        if (startTime !== '') {
+          this.editPanel.param.report.schedule.stime = bus
+            .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        }
       }
     },
     'editPanel.param.report.schedule.etime': {
       deep: true,
       handler (n) {
-        this.editPanel.param.report.schedule.etime = bus
-          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = this.$loadsh.get(this.editPanel, 'param.report.schedule.etime', '')
+        if (endTime !== '') {
+          this.editPanel.param.report.schedule.etime = bus
+            .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 3d3c65962..dc313d5a4 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -389,30 +389,48 @@ export default {
       })
     },
     edit (u) {
-      this.panel = Object.assign({}, u)
-      if (!this.panel.param.report) {
-        this.panel = {
-          ...u,
-          param: {
-            report: {
-              enable: false,
-              range: {
-                unit: ''
-              },
-              schedule: {
-                type: '0',
-                repeat: 1,
-                nums: [],
-                stime: '',
-                etime: ''
-              },
-              receivers: []
-            },
-            chartShare: 'none'
+      this.$get('visual/panel?ids=' + u.id).then(res => {
+        if (res.code === 200) {
+          this.panel = res.data.list[0]
+          if (!this.panel.param.report) {
+            this.panel = {
+              ...this.panel,
+              param: {
+                report: {
+                  enable: false,
+                  range: {
+                    unit: ''
+                  },
+                  schedule: {
+                    type: '0',
+                    repeat: 1,
+                    nums: [],
+                    stime: '',
+                    etime: ''
+                  },
+                  receivers: []
+                },
+                chartShare: 'none'
+              }
+            }
           }
+          this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
+          const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
+          if (startTime !== '') {
+            this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.stime = ''
+          }
+          const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
+          if (endTime !== '') {
+            this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
+          } else {
+            this.panel.param.report.schedule.etime = ''
+          }
+          this.rightBox.panel.show = true
         }
-      }
-      this.rightBox.panel.show = true
+      })
+      // this.panel = Object.assign({}, u)
     },
     toAdd () {
       if (!this.hasButton('panel_view')) {

From de06b7c6f15c2d41e65cb953c7c746f52f738d64 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Mon, 20 Jun 2022 15:24:01 +0800
Subject: [PATCH 2/3] =?UTF-8?q?NEZ-1945=20feat=20:=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=20=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E4=B8=8B=20=E5=A2=9E=E5=8A=A0=20=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=8F=90=E7=A4=BA=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/alert/alertLabel.scss   |   6 +
 .../components/common/alert/alertLabel.vue    | 407 +++++++++++-------
 .../common/mixin/alertLabelMixin.js           |   1 +
 .../common/table/settings/userTable.vue       |  30 +-
 .../src/components/page/config/user.vue       |  25 ++
 5 files changed, 315 insertions(+), 154 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
index 6e8ebcc2d..af257817c 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -17,6 +17,12 @@
     border-bottom: 1px solid $--border-color-light;
     //line-height: 23px;
     font-weight: 600;
+    .alert-label-fa{
+      font-weight: normal;
+      height: 12px;
+      line-height: 12px;
+      border-radius: 10px;
+    }
     .alert-label-header-circle {
       height: 24px;
       width: 24px;
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 3198fd10c..775e7e0dd 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -5,6 +5,24 @@
     class="alert-label__border"
     ref="alertLabels"
   >
+  <!-- user info -->
+  <template v-if="type === 'user'">
+    <div class="alert-label-header-title">
+      <div
+        class="alert-label-header-circle"
+        :style="alertLabelData.online === 1 ? `background: ${userColor}` : `background: ${unUserColor}`"
+      >
+        <i class="nz-icon-user1 nz-icon  user-online" :class="selectIcon(type)"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+      </div>
+      <div class="flex-align-center">
+       <el-tag class="alert-label-fa" size="mini" v-if="alertLabelData.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
+      </div>
+    </div>
+  </template>
+  <template v-else>
     <div class="alert-label-header-title">
       <div
         class="alert-label-header-circle"
@@ -16,6 +34,7 @@
         {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
       </div>
     </div>
+    </template>
     <div
       class="alert-label-info"
       v-if="type === 'asset'"
@@ -603,14 +622,86 @@
         </div>
       </div>
     </div>
+
+    <!-- type === 'user' -->
+    <div class="alert-label-info" v-if="type === 'user'" 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.login.name") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.username ? alertLabelData.username : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("profile.role") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.roles ? alertLabelData.roles[0].name : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("profile.email") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.email ? alertLabelData.email : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.soure") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.source ? alertLabelData.source : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("config.operationlog.state") }}</div>
+        <div class="alert-label-value">
+          <div
+            v-if="alertLabelData"
+            :style="alertLabelData.status === '1' ? `background: ${userColor}` : `background: ${unUserColor}`"
+            class="active-icon"
+          ></div>
+         {{ alertLabelData && alertLabelData.status === "1" ? $t("overall.enabled") : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("config.user.language") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          {{alertLabelData.lang === "en" ? $t("overall.english") : $t("overall.chinese") }}
+        </div>
+        <div class="alert-label-value" v-else>
+          {{"--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("profile.lastLoginIp") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.lastLoginIp ? alertLabelData.lastLoginIp : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("profile.lastLoginTime") }}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.lastLoginTime ? alertLabelData.lastLoginTime : "--" }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import trendMixin from "./trendMixins";
+import trendMixin from './trendMixins'
 
 export default {
-  name: "alertLabel",
+  name: 'alertLabel',
   mixins: [trendMixin],
   props: {
     id: {},
@@ -618,63 +709,65 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean,
+    alertTableDialog: Boolean
   },
-  data() {
+  data () {
     return {
       alertLabelData: null,
       loading: true,
       heightList: 0,
       boxWidth: 0,
       severityDataWeight: this.$store.getters.severityDataWeight,
-      alertColor: "#23bf9a",
-    };
+      alertColor: '#23bf9a',
+      userColor: '#1e9e09',
+      unUserColor: '#bbbbbb'
+    }
   },
   watch: {
     id: {
       immediate: true,
       deep: true,
-      handler(n) {
-        this.init();
-      },
+      handler (n) {
+        this.init()
+      }
     },
     that: {
       immediate: true,
       deep: true,
-      handler(n) {},
+      handler (n) {}
     },
     LRTriangle: {
       immediate: true,
       deep: true,
-      handler(n) {},
-    },
+      handler (n) {}
+    }
   },
   computed: {
-    calcPosition() {
+    calcPosition () {
       return function (position) {
         const clientHeight =
           document.body.clientHeight < document.documentElement.clientHeight
             ? document.body.clientHeight
-            : document.documentElement.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;
+            : 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,
-        };
+          right: 0
+        }
         if (this.alertTableDialog) {
           let dialog = document.querySelector(
-            "#dialog-alert-massage .el-dialog"
-          );
+            '#dialog-alert-massage .el-dialog'
+          )
           if (!dialog) {
-            dialog = document.querySelector("#viewGraphDialog .el-dialog");
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
           }
           const dialogHeight = dialog.getBoundingClientRect()
           leftOffSet = leftOffSet - 3 * dialogHeight.x
@@ -683,192 +776,214 @@ export default {
           topOffSetView = topOffSet
         }
         if (position.top > clientHeight / 2) {
-          labelPosition = {
-            left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - this.heightList - topOffSetView}px`,
-          };
+          if (this.type === 'user') {
+            labelPosition = {
+              // user info 距离
+              left: `${position.left + position.width / 3 + leftOffSet}px`,
+              top: `${position.top - this.heightList - topOffSetView}px`
+            }
+          } else {
+            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 (this.type === 'user') {
+            // user info 距离
+            labelPosition = {
+              left: `${position.left + position.width / 3 + leftOffSet}px`,
+              top: `${position.top + topOffSet}px`
+            }
+          } else {
+            labelPosition = {
+              left: `${position.left + position.width + leftOffSet}px`,
+              top: `${position.top + topOffSet}px`
+            }
+          }
         }
         if (position.left > clientWidth / 2) {
-          delete labelPosition.left;
+          delete labelPosition.left
 
           labelPosition.right =
-            clientWidth - position.left - leftOffSetView + "px";
+            clientWidth - position.left - leftOffSetView + 'px'
         }
-        return labelPosition;
-      };
+        return labelPosition
+      }
     },
-    calcHeight() {
-      const self = this;
+    calcHeight () {
+      const self = this
       return function (position) {
         const clientHeight =
           document.body.clientHeight < document.documentElement.clientHeight
             ? document.body.clientHeight
-            : document.documentElement.clientHeight;
+            : document.documentElement.clientHeight
         const elHeight =
-          self.type === "asset" ? 318 : self.type === "project" ? 70 : 70;
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
         if (position.top + elHeight > clientHeight) {
-          return "alert-labelUp";
+          return 'alert-labelUp'
         } else {
-          return "alert-label";
+          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);
+    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);
+            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);
+      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);
+            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);
+      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);
+            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);
+      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);
+            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);
+      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);
+            this.$message.error(res.msg)
           }
-        });
+        })
       }
-      const weekDays = this.getWeeksTime();
+      if (this.type === 'user') {
+        this.loading = false
+        this.alertLabelData = this.that
+      }
+      const weekDays = this.getWeeksTime()
       if (this.trendTimer) {
-        clearTimeout(this.trendTimer);
-        this.trendTimer = null;
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
       }
       this.trendTimer = setTimeout(() => {
-        this.trendLoading = true;
+        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) => {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
           if (!res.data) {
-            return;
+            return
           }
           const alertDaysData = res.data.result
             ? res.data.result[0].values
-            : [];
-          const newWeekDays = JSON.parse(JSON.stringify(weekDays));
+            : []
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
           alertDaysData.forEach((item) => {
             item.values.forEach((time) => {
-              const findItem = newWeekDays.find((days) => days.time == time[0]);
+              const findItem = newWeekDays.find((days) => days.time == time[0])
               if (findItem) {
-                findItem[item.metric.priority] = time[1];
+                findItem[item.metric.priority] = time[1]
               }
-            });
-          });
+            })
+          })
           setTimeout(() => {
-            this.alertDaysData = newWeekDays;
-            this.trendLoading = false;
-          });
-        });
-      });
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
     },
-    alertActiveStr() {
-      return this.$t("overall.active");
+    alertActiveStr () {
+      return this.$t('overall.active')
     },
-    alertStateStr(num) {
+    alertStateStr (num) {
       if (num == 1) {
-        return this.$t("asset.inStock");
+        return this.$t('asset.inStock')
       } else {
-        return this.$t("asset.notInStock");
+        return this.$t('asset.notInStock')
       }
     },
-    selectIcon(type) {
+    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";
+        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'
+        case 'user':
+          return 'nz-icon-user1'
       }
-      return "nz-icon-module5";
+      return 'nz-icon-module5'
     },
-    returnColor(obj) {
-      let color = "";
+    returnColor (obj) {
+      let color = ''
       if (!obj) {
-        return "#23bf9a";
+        return '#23bf9a'
       } else {
         this.severityDataWeight.forEach((severity) => {
-          const num = obj.find((alert) => alert.priority === severity.name);
+          const num = obj.find((alert) => alert.priority === severity.name)
           if (num && !color && num.num > 0) {
-            color = severity.color;
+            color = severity.color
           }
-        });
+        })
         if (!color) {
-          color = "#23bf9a";
+          color = '#23bf9a'
         }
-        return color;
+        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() {},
-};
+  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>
diff --git a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
index 383fa272f..33a1da814 100644
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -48,6 +48,7 @@ export default {
         case 'endpoint':
         case 'project':
         case 'dc':
+        case 'user':
           return false
         default: return true
       }
diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index 59abdb306..b52ad5baf 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -1,4 +1,5 @@
 <template>
+<div height="100%">
   <el-table
     id="userTable"
     ref="dataTable"
@@ -37,13 +38,18 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <div>
-            <div class="flex-align-center">
-              <span class="user-name-top">{{scope.row[item.prop]}}</span>
-              <el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
-            </div>
-            <div class="user-name-bottom">
-              @{{scope.row.username}}
+          <div class="user-name-td" :class="{'margin-l-10': !scope.row.online}"
+           @mouseenter="labelHover(scope.row, 'user', true, false, $event)"
+           @mouseleave="labelHover(scope.row, 'user', false, false,)">
+            <i class="nz-icon nz-icon-user1 user-online" v-if="scope.row.online" :title="$t('overall.online')"/>
+            <div>
+              <div class="flex-align-center">
+                <span class="user-name-top">{{scope.row[item.prop]}}</span>
+                <el-tag size="mini" v-if="mfaEnable == '1' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
+              </div>
+              <div class="user-name-bottom">
+                @{{scope.row.username}}
+              </div>
             </div>
           </div>
         </template>
@@ -105,13 +111,21 @@
       <div v-else>&nbsp;</div>
     </template>
   </el-table>
+  <alertLabel
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :type="alertLabelType"
+    ></alertLabel>
+  </div>
 </template>
 
 <script>
 import table from '@/components/common/mixin/table'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'userTable',
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/page/config/user.vue b/nezha-fronted/src/components/page/config/user.vue
index 9e6bf1b49..0fc83dfd0 100644
--- a/nezha-fronted/src/components/page/config/user.vue
+++ b/nezha-fronted/src/components/page/config/user.vue
@@ -226,6 +226,31 @@ export default {
       }
     }
     this.initQueryFromPath(searchKeys)
+  },
+  watch: {
+    tableData: {
+      immediate: true,
+      handler (n) {
+        if (n) {
+          const arr = []
+          n.map(item => {
+            if (!item.position) {
+              const obj = {
+                ...this.$loadsh.cloneDeep(item),
+                type: 'user',
+                position: {
+                  top: 0,
+                  left: 0
+                },
+                loading: false
+              }
+              arr.push(obj)
+            }
+          })
+          return arr
+        }
+      }
+    }
   }
 }
 </script>

From 04bb80d37c8229bebfa512a7d1ea4b2508547843 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Wed, 22 Jun 2022 10:25:17 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix=20=EF=BC=9Apanel=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=20panelBox=20=E6=98=9F=E6=9C=9F=EF=BC=8C=E6=9C=88=E4=BB=BD?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/components/common/rightBox/panelBox.scss   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index 25d90fe35..ab9c888e5 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -58,6 +58,9 @@
             }
           }
         }
+    .el-checkbox-button.is-checked{
+      border: 1px solid #fbb569 !important;
+    }
         
     .el-checkbox-button.is-checked .el-checkbox-button__inner {
       color: #fff;
@@ -76,6 +79,7 @@
               margin-right: -1px;
             }
             .el-radio-button.is-active{
+              border: 1px solid #fbb569 !important;
               border-radius: 0;
             }
             .el-radio-button__inner{