diff --git a/.env.dev b/.env.dev index ccd00d6..61a3c8c 100644 --- a/.env.dev +++ b/.env.dev @@ -2,5 +2,5 @@ FT_NODE_ENV=dev -FT_WS_URL=ws://192.168.1.199:9527 -FT_PROXY=http://192.168.1.199:8080 \ No newline at end of file +FT_WS_URL=ws://localhost:9527 +FT_PROXY=http://localhost:8080 \ No newline at end of file diff --git a/src/app.vue b/src/app.vue index 9432773..cdcdeb9 100644 --- a/src/app.vue +++ b/src/app.vue @@ -1,10 +1,10 @@ - + diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 0000000..771b0a2 --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/user.svg b/src/assets/images/user.svg new file mode 100644 index 0000000..ea89d9c --- /dev/null +++ b/src/assets/images/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/wifi.svg b/src/assets/images/wifi.svg new file mode 100644 index 0000000..640f2b4 --- /dev/null +++ b/src/assets/images/wifi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 069e911..0612fef 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -1,16 +1,55 @@ - + + + + 长春黄金研究院有限公司 + + + + + + + {{ currentTime }} + + + + + + {{ systemStore.systemUser.username }} + + + + + 退出登录 + + + + + + + @@ -19,7 +58,11 @@ const router = useRouter() - + + + + + @@ -33,10 +76,54 @@ const router = useRouter() height: 100%; background: #F6F6F6; .header { - height: 60px; + color: #393F46; + height: 50px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; + .logo { + height: 100%; + display: flex; + align-items: center; + .title { + margin:0 10px; + color: #8799AB; + font-weight: 600; + } + img { + height: 100%; + } + } + .header-right { + display: flex; + align-items: center; + height: 100%; + .wifi-icon { + width: 40px; + height: 100%; + background: #fff; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + img { + height: 50%; + } + } + .time { + margin:0 10px; + height: 100%; + padding: 0 10px; + display: flex; + align-items: center; + background: #fff; + border-radius: 5px; + } + } } .container { - height: calc(100% - 120px); + height: calc(100% - 100px); } } .aside { @@ -63,9 +150,21 @@ const router = useRouter() color: #fff; } } +.user-dropdown-item { + display: flex; + align-items: center; + height: 100%; + color: #393F46; + font-weight: bold; + img { + height: 30px; + margin-right: 10px; + } +} .el-main { padding: 0 15px; height: 100%; + position: relative; } .content { height: 100%; @@ -75,6 +174,6 @@ const router = useRouter() padding: 10px; } .footer { - height: 60px; + height: 50px; } diff --git a/src/libs/utils.ts b/src/libs/utils.ts index 547dfc4..688ed9c 100644 --- a/src/libs/utils.ts +++ b/src/libs/utils.ts @@ -94,3 +94,17 @@ export const colors = generateColors(100) export function isNumber(value: any) { return typeof value === 'number' && !Number.isNaN(value) } + +export function formatDateTime(template: string = 'YYYY/MM/DD HH:mm:ss'): string { + const now = new Date() + const tokens: Record = { + YYYY: String(now.getFullYear()), + MM: String(now.getMonth() + 1).padStart(2, '0'), + DD: String(now.getDate()).padStart(2, '0'), + HH: String(now.getHours()).padStart(2, '0'), + mm: String(now.getMinutes()).padStart(2, '0'), + ss: String(now.getSeconds()).padStart(2, '0'), + } + + return template.replace(/YYYY|MM|DD|HH|mm|ss/g, token => tokens[token]!) +} diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts index b053684..d1b1370 100644 --- a/src/stores/systemStore.ts +++ b/src/stores/systemStore.ts @@ -1,9 +1,14 @@ +import router from '@/router' +import { delToken } from 'libs/token' import { defineStore } from 'pinia' export const useSystemStore = defineStore('system', { state: (): System.SystemStore => ({ systemStatus: { }, + systemUser: { + username: '', + }, isDebug: import.meta.env.FT_NODE_ENV === 'dev', streamVisible: false, systemList: [], @@ -12,8 +17,15 @@ export const useSystemStore = defineStore('system', { updateStreamVisible(bool: boolean) { this.streamVisible = bool }, + updateSystemUser(data: System.SystemUser) { + this.systemUser = data + }, pushSystemList(text: any) { this.systemList.push(text) }, + logout() { + delToken() + router.push('/login').then(() => {}) + }, }, }) diff --git a/src/types/System.d.ts b/src/types/System.d.ts index 722d2b9..a99d015 100644 --- a/src/types/System.d.ts +++ b/src/types/System.d.ts @@ -4,5 +4,9 @@ declare namespace System { systemList: Socket.NotificationData[] streamVisible: boolean isDebug: boolean + systemUser: SystemUser + } + interface SystemUser { + username: string } } diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue index 5c96c3e..bc6dd37 100644 --- a/src/views/debug/index.vue +++ b/src/views/debug/index.vue @@ -743,8 +743,12 @@ const door_stop = async () => {