From b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 23 四月 2025 13:35:06 +0800
Subject: [PATCH] UA 整理提交
---
src/layout/components/Navbar.vue | 230 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 134 insertions(+), 96 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 01a59d7..1017792 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -2,7 +2,7 @@
<div class="navbar">
<div class="sys-name-wrapper">
<div class="sys-icon">
- <svg-icon icon-class="lock-hdw"></svg-icon>
+ <svg-icon icon-class="lock1"></svg-icon>
</div>
<div class="sys-name">{{ title }}</div>
</div>
@@ -12,11 +12,20 @@
<div class="label">閿佸叿鎺у埗妯″紡</div>
<div class="value">{{ ctrlModel ? '鍦ㄧ嚎妯″紡' : '绂荤嚎妯″紡' }}</div>
<!-- 鍒囨崲妯″紡 -->
- <div class="btn" v-if="uname == 'admin'" @click="changeModel">鍒囨崲妯″紡</div>
+ <div class="btn" v-if="uname == 'admin'" @click="changeModel">
+ 鍒囨崲妯″紡
+ </div>
</div>
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+ <el-dropdown
+ class="avatar-container right-menu-item hover-effect"
+ trigger="click"
+ >
<div class="avatar-wrapper">
- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" alt="" />
+ <img
+ :src="avatar + '?imageView2/1/w/80/h/80'"
+ class="user-avatar"
+ alt=""
+ />
<span>{{ uname }}</span>
<el-icon class="el-icon-caret-bottom" size="small">
<CaretBottom />
@@ -25,7 +34,7 @@
<template #dropdown>
<el-dropdown-menu>
<router-link to="/">
- <el-dropdown-item>棣栭〉</el-dropdown-item>
+ <el-dropdown-item @click="pwdVisible = true">淇敼瀵嗙爜</el-dropdown-item>
</router-link>
<el-dropdown-item @click="logout">
<span style="display: block">閫�鍑虹櫥褰�</span>
@@ -34,108 +43,125 @@
</template>
</el-dropdown>
</div>
+ <!-- 瀵嗙爜淇敼 -->
+ <el-dialog
+ title="瀵嗙爜淇敼"
+ width="400px"
+ v-model="pwdVisible"
+ :close-on-click-modal="false"
+ top="0"
+ class="dialog-center"
+ :modal-append-to-body="false"
+ >
+ <pwd-change v-if="pwdVisible" @success="pwdVisible = false"></pwd-change>
+ </el-dialog>
</div>
</template>
<script setup name="Navbar">
- import { computed, ref, watchEffect, onMounted } from "vue";
- import { useRoute, useRouter } from "vue-router";
- import { CaretBottom } from "@element-plus/icons-vue";
- import SvgIcon from "@/components/SvgIcon/index.vue";
- import useWebSocket from "@/hooks/useWebSocket";
- import useElement from "@/hooks/useElement.js";
- import { changeControlMode } from '@/api/system.js';
- import useUserStore from '@/store/user';
- import useAppStore from '@/store/app';
- import { storeToRefs } from 'pinia';
- const userStore = useUserStore();
- const appStore = useAppStore();
- const { sidebar, device } = storeToRefs(appStore);
- const { avatar, name: uname } = storeToRefs(userStore);
+import { computed, ref, reactive, watchEffect, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { CaretBottom } from "@element-plus/icons-vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import useWebSocket from "@/hooks/useWebSocket";
+import useElement from "@/hooks/useElement.js";
+import { changeControlMode } from '@/api/system.js';
+import { useUserStore } from '@/store/user';
+import { useAppStore } from '@/store/app';
+import { storeToRefs } from 'pinia';
+import { updatePassword } from '@/api/user.js';
+import PwdChange from '@/components/PwdChange.vue';
+const userStore = useUserStore();
+const appStore = useAppStore();
+const { sidebar, device } = storeToRefs(appStore);
+const { avatar, uname } = storeToRefs(userStore);
- const { updateSessionId, logout: _logout } = userStore;
- const { toggleSidebar: _toggleSidebar } = appStore;
-
+const { updateSessionId, logout: _logout, getInfo } = userStore;
+const { toggleSidebar: _toggleSidebar } = appStore;
- const { sendData, message } = useWebSocket("appOut");
- const { message: stateMessage } = useWebSocket("plate");
- const { $alert, $loading, $message, $confirm } = useElement();
+const { sendData, message } = useWebSocket("appOut");
+const { message: stateMessage } = useWebSocket("plate");
- const router = useRouter();
- const route = useRoute();
- const ctrlModel = ref(0);
+const { $alert, $loading, $message, $confirm } = useElement();
- const title = ref("楦胯挋鏅鸿兘鐢靛瓙閿佺鐞嗗钩鍙�");
+const pwdVisible = ref(false);
- watchEffect(() => {
- if (message.value) {
- const {
- code,
- data,
- data2,
- msg
- } = JSON.parse(message.value);
- updateSessionId(data2?.sessionid);
- if (data) {
- $message(msg);
- logout();
- // updateSessionId('');
- // localStorage.removeItem("uname");
- // localStorage.removeItem("uid");
- // setTimeout(() => {
- // $router.push("/login");
- // location.reload();
- // }, 2000);
- }
+const router = useRouter();
+const route = useRoute();
+const ctrlModel = ref(0);
+
+const title = ref("楦胯挋鏅鸿兘鐢靛瓙閿佺鐞嗗钩鍙�");
+
+
+watchEffect(() => {
+ if (message.value) {
+ const {
+ code,
+ data,
+ data2,
+ msg
+ } = JSON.parse(message.value);
+ updateSessionId(data2?.sessionid);
+ if (data) {
+ $message(msg);
+ logout();
+ // updateSessionId('');
+ // localStorage.removeItem("uname");
+ // localStorage.removeItem("uid");
+ // setTimeout(() => {
+ // $router.push("/login");
+ // location.reload();
+ // }, 2000);
}
-
- if (stateMessage.value) {
- const {
- data2: { plateModel },
- } = JSON.parse(stateMessage.value);
- ctrlModel.value = plateModel;
- }
-
- });
-
- function sendMessage() {
- sendData(uname.value);
- };
-
- function changeModel() {
- let value = !ctrlModel.value * 1;
- let loading = $loading();
- changeControlMode(value).then((res) => {
- let { code, data } = res;
- loading.close();
- if (code && data) {
- $message.success("鎿嶄綔鎴愬姛");
- } else {
- $message.error("鎿嶄綔澶辫触");
- }
- })
- .catch((err) => {
- loading.close();
- $message.error("鎿嶄綔澶辫触");
- console.log(err);
- });
-
- }
-
- function toggleSidebar() {
- _toggleSidebar();
- }
- async function logout() {
- await _logout();
- // console.log('logout', '=============');
-
- router.push(`/login?redirect=${route.fullPath}`);
}
- onMounted(() => {
- sendMessage();
- });
+ if (stateMessage.value) {
+ const {
+ data2: { plateModel },
+ } = JSON.parse(stateMessage.value);
+ ctrlModel.value = plateModel;
+ }
+
+});
+
+function sendMessage() {
+ sendData(uname.value);
+};
+
+function changeModel() {
+ let value = !ctrlModel.value * 1;
+ let loading = $loading();
+ changeControlMode(value).then((res) => {
+ let { code, data } = res;
+ loading.close();
+ if (code && data) {
+ $message.success("鎿嶄綔鎴愬姛");
+ } else {
+ $message.error("鎿嶄綔澶辫触");
+ }
+ })
+ .catch((err) => {
+ loading.close();
+ $message.error("鎿嶄綔澶辫触");
+ console.log(err);
+ });
+
+}
+
+function toggleSidebar() {
+ _toggleSidebar();
+}
+async function logout() {
+ await _logout();
+ // console.log('logout', '=============');
+
+ router.push(`/login?redirect=${route.fullPath}`);
+}
+
+onMounted(() => {
+ sendMessage();
+});
</script>
<style lang="less" scoped>
@@ -145,13 +171,21 @@
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
+ background:
+ url("@/assets/images/site-title-bg2.png") right center e('/') auto 100% no-repeat,
+ url("@/assets/images/site-title.png") center center e('/') auto 100% repeat-x;
+ // border-image: url("@/assets/images/site-title-bg2.png") 64 0 780 0 / 64px 0 788px 0;
.sys-name-wrapper {
display: inline-block;
line-height: 64px;
color: var(--light-color);
- font-size: 24px;
+ font-size: 34px;
width: 894px;
+ padding-left: 1.6em;
+
+ // url("@/assets/images/logo-lock.png") 70px center / auto 60% no-repeat,
+ background:
+ url("@/assets/images/site-title-bg.png") left center / 100% 100% no-repeat;
.sys-icon {
display: inline-block;
@@ -245,6 +279,7 @@
}
}
}
+
.flex-inline {
display: inline-flex;
line-height: normal;
@@ -252,15 +287,18 @@
height: 100%;
margin-right: 2em;
float: left;
+
.label {
&::after {
content: ':';
}
}
+
.value {
margin-left: 0.4em;
}
+
.btn {
margin-left: 2em;
background: #0ff;
--
Gitblit v1.9.1