EZ-1945 feat : 用户列表页面 详细视图下 增加 详情提示窗

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;

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,7 +709,7 @@ export default {
     // labelLoading:{},
     that: {},
     detailList: Boolean,
-    alertTableDialog: Boolean,
+    alertTableDialog: Boolean
   },
   data () {
     return {
@@ -627,27 +718,29 @@ export default {
       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();
-      },
+        this.init()
+      }
     },
     that: {
       immediate: true,
       deep: true,
-      handler(n) {},
+      handler (n) {}
     },
     LRTriangle: {
       immediate: true,
       deep: true,
-      handler(n) {},
-    },
+      handler (n) {}
+    }
   },
   computed: {
     calcPosition () {
@@ -655,26 +748,26 @@ export default {
         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) {
+          if (this.type === 'user') {
             labelPosition = {
-            left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top - this.heightList - topOffSetView}px`,
-          };
+              // 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 + topOffSet}px`,
-          };
+              top: `${position.top - this.heightList - topOffSetView}px`
+            }
+          }
+        } else {
+          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;
+      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);
+      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");
+      return this.$t('overall.active')
     },
     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) {
       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 = "";
+      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;
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
     } else {
-      this.heightList = 0;
-      this.boxWidth = 0;
+      this.heightList = 0
+      this.boxWidth = 0
     }
   },
-  beforeDestroy() {},
-};
+  beforeDestroy () {}
+}
 </script>
 <style>
 </style>

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
       }

nezha-fronted/src/components/common/table/settings/userTable.vue

@@ -1,4 +1,5 @@
 <template>
+<div height="100%">
   <el-table
     id="userTable"
     ref="dataTable"
@@ -37,6 +38,10 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
+          <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>
@@ -46,6 +51,7 @@
                 @{{scope.row.username}}
               </div>
             </div>
+          </div>
         </template>
         <template v-else-if="item.prop === 'roles'">
           <template v-if="scope.row[item.prop]">
@@ -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
   },

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>