代码提交

src/assets/json/authMenuList.json

@@ -1,6 +1,132 @@
 {
   "code": 200,
   "data": [
+    {
+      "path": "/proTable",
+      "name": "proTable",
+      "redirect": "/proTable/useProTable",
+      "meta": {
+        "icon": "MessageBox",
+        "title": "实时监测报警",
+        "isLink": "",
+        "isHide": false,
+        "isFull": false,
+        "isAffix": false,
+        "isKeepAlive": true
+      },
+      "children": [
+        {
+          "path": "/proTable/useProTable",
+          "name": "useProTable",
+          "component": "/proTable/useProTable/index",
+          "meta": {
+            "title": "全网实时数据监测报警",
+            "isLink": "",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          },
+          "children": [
+            {
+              "path": "/proTable/useProTable/detail/:id",
+              "name": "useProTableDetail",
+              "component": "/proTable/useProTable/detail",
+              "meta": {
+                "title": "全网危险天气监测报警",
+                "activeMenu": "/proTable/useProTable",
+                "isLink": "",
+                "isHide": true,
+                "isFull": false,
+                "isAffix": false,
+                "isKeepAlive": true
+              }
+            }
+          ]
+        },
+        {
+          "path": "/proTable/useTreeFilter",
+          "name": "useTreeFilter",
+          "component": "/proTable/useTreeFilter/index",
+          "meta": {
+            "title": "全网设备状态监测报警",
+            "isLink": "",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        },
+        {
+          "path": "/proTable/useTreeFilter/detail/:id",
+          "name": "useTreeFilterDetail",
+          "component": "/proTable/useTreeFilter/detail",
+          "meta": {
+            "title": "单站实时数据监测报警",
+            "activeMenu": "/proTable/useTreeFilter",
+            "isLink": "",
+            "isHide": true,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        },
+        {
+          "path": "/proTable/useSelectFilter",
+          "name": "useSelectFilter",
+          "component": "/proTable/useSelectFilter/index",
+          "meta": {
+            "title": "单站设备状态监测报警",
+            "isLink": "",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        },
+        {
+          "path": "/proTable/treeProTable",
+          "name": "treeProTable",
+          "component": "/proTable/treeProTable/index",
+          "meta": {
+            "title": "软件状态监测报警",
+            "isLink": "",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        },
+        {
+          "path": "/proTable/complexProTable",
+          "name": "complexProTable",
+          "component": "/proTable/complexProTable/index",
+          "meta": {
+            "title": "复杂 ProTable",
+            "isLink": "",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        },
+        {
+          "path": "/proTable/document",
+          "name": "proTableDocument",
+          "component": "/proTable/document/index",
+          "meta": {
+            "title": "GIS展示",
+            "isLink": "https://juejin.cn/post/7166068828202336263/#heading-14",
+            "isHide": false,
+            "isFull": false,
+            "isAffix": false,
+            "isKeepAlive": true
+          }
+        }
+      ]
+    },
+
+
     {
       "path": "/home/index",
       "name": "home",

src/layouts/components/Header/ToolBarRight.vue

@@ -4,24 +4,16 @@
       <AssemblySize id="assemblySize" />
       <ThemeSetting id="themeSetting" />
       <Message id="message" />
-      <Fullscreen id="fullscreen" />
     </div>
     <Avatar />
-    <span class="username">{{ username }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { useUserStore } from "@/stores/modules/user";
 import AssemblySize from "./components/AssemblySize.vue";
 import ThemeSetting from "./components/ThemeSetting.vue";
 import Message from "./components/Message.vue";
-import Fullscreen from "./components/Fullscreen.vue";
 import Avatar from "./components/Avatar.vue";
-
-const userStore = useUserStore();
-const username = computed(() => userStore.userInfo.name);
 </script>
 
 <style scoped lang="scss">
@@ -39,10 +31,5 @@ const username = computed(() => userStore.userInfo.name);
       color: var(--el-header-text-color);
     }
   }
-  .username {
-    margin: 0 0 0 10px;
-    font-size: 15px;
-    color: var(--el-header-text-color);
-  }
 }
 </style>

src/layouts/components/Header/components/Avatar.vue

@@ -1,7 +1,11 @@
 <template>
   <el-dropdown trigger="click">
-    <div class="avatar">
-      <img src="@/assets/images/avatar.gif" alt="avatar" />
+    <div class="avatar-box">
+      <div class="avatar">
+        <img src="@/assets/images/avatar.gif" alt="avatar" />
+      </div>
+      <div class="username">{{ username }}</div>
+      <img class="chevron-down" src="@/assets/images/chevron_down.png" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -24,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { LOGIN_URL } from "@/config";
 import { useRouter } from "vue-router";
 import { logoutApi } from "@/api/modules/login";
@@ -35,6 +39,7 @@ import PasswordDialog from "./PasswordDialog.vue";
 
 const router = useRouter();
 const userStore = useUserStore();
+const username = computed(() => userStore.userInfo.name);
 
 // 退出登录
 const logout = () => {
@@ -76,4 +81,25 @@ const openDialog = (ref: string) => {
     height: 100%;
   }
 }
+.username {
+  cursor: pointer;
+  margin: 0 0 0 10px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  color: var(--el-header-text-color);
+}
+
+.avatar-box {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+}
+
+.chevron-down {
+  margin-top: 3px;
+  margin-left: 5px;
+  width: 10px;
+  height: 10px;
+}
 </style>