diff --git a/src/assets/images/avatar.png b/src/assets/images/avatar.png index b5bce2a..592d266 100644 Binary files a/src/assets/images/avatar.png and b/src/assets/images/avatar.png differ diff --git a/src/mock/routes.json b/src/mock/routes.json index 1074598..27e8d9d 100644 --- a/src/mock/routes.json +++ b/src/mock/routes.json @@ -13,7 +13,7 @@ }, "children": [ { - "path": "screen", + "path": "/screen", "component": "monitoring/screen/index", "name": "screen", "meta": { @@ -25,7 +25,7 @@ } }, { - "path": "devicemanage", + "path": "/devicemanage", "component": "monitoring/devicemanage/index", "name": "devicemanage", "meta": { diff --git a/src/permission.ts b/src/permission.ts index cf029dd..c9df6d4 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -20,7 +20,7 @@ const whiteList = ['/login']; router.beforeEach(async (to, from, next) => { NProgress.start(); - const hasToken = localStorage.getItem('userToken'); + const hasToken = sessionStorage.getItem('userToken'); if (hasToken) { if (to.path === '/login') { // 如果已登录，跳转首页 diff --git a/src/router/index.ts b/src/router/index.ts index f08e391..cbd85e5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -43,14 +43,14 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: '/', component: Layout, - redirect: '/monitoring/screen', + redirect: '/dashboard', children: [ - // { - // path: 'dashboard', - // component: () => import('@/views/dashboard/index.vue'), - // name: 'Dashboard', - // meta: { title: 'dashboard', icon: 'icon-home', affix: true } - // }, + { + path: 'dashboard', + component: () => import('@/views/dashboard/index.vue'), + name: 'Dashboard', + meta: { title: 'dashboard', icon: 'dashboard', affix: true } + }, { path: '401', component: () => import('@/views/error-page/401.vue'), diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 77a5a16..cbe3cd4 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -8,11 +8,11 @@ import { store } from '@/store'; import { LoginData } from '@/api/auth/types'; import { UserInfo } from '@/api/user/types'; -import { useStorage } from '@vueuse/core'; +import { useSessionStorage } from '@vueuse/core'; export const useUserStore = defineStore('user', () => { // state - const token = useStorage('userToken', ''); + const token = useSessionStorage('userToken', ''); const nickname = ref(''); const avatar = ref(''); const roles = ref>([]); // 用户角色编码集合 → 判断路由权限 @@ -54,7 +54,7 @@ export const useUserStore = defineStore('user', () => { avatar.value = user.avatar; roles.value = data.roles; perms.value = data.permissions; - useStorage('userInfo', user); + useSessionStorage('userInfo', user); resolve(data); }) .catch(error => { diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index e21443a..89da715 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -2,7 +2,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] - const ElForm: typeof import('element-plus/es')['ElForm'] const ElMessage: typeof import('element-plus/es')['ElMessage'] const ElMessageBox: typeof import('element-plus/es')['ElMessageBox'] const NEllipsis: typeof import('naive-ui')['NEllipsis'] @@ -272,7 +271,6 @@ import { UnwrapRef } from 'vue' declare module 'vue' { interface ComponentCustomProperties { readonly EffectScope: UnwrapRef - readonly ElForm: UnwrapRef readonly ElMessage: UnwrapRef readonly ElMessageBox: UnwrapRef readonly NEllipsis: UnwrapRef diff --git a/src/utils/socket.ts b/src/utils/socket.ts index 5346e18..2f3e505 100644 --- a/src/utils/socket.ts +++ b/src/utils/socket.ts @@ -1,6 +1,6 @@ /** * Author: Fu Guobin - * Date: 2020/06/28 + * Date: 2022/08/02 * Last Modified by: Fu Guobin * Last Modified time: 2023/08/28 * Copyright:Daniel(Fu Guobin) diff --git a/src/utils/useStorage.ts b/src/utils/useStorage.ts new file mode 100644 index 0000000..ee5ceda --- /dev/null +++ b/src/utils/useStorage.ts @@ -0,0 +1,111 @@ +/** + * Author: Fu Guobin + * Date: 2022/08/22 + * Last Modified by: Fu Guobin + * Last Modified time: 2023/08/28 + * Copyright:Daniel(Fu Guobin) + * Description:storage方法封装 + */ + +import { ref, computed } from 'vue'; + +type StorageData = { + key: string; + value: any; +}; + +type StorageType = 'localStorage' | 'sessionStorage'; + +const getItem = (key: string, storageType: StorageType): any => { + debugger + try { + const storage = getStorage(storageType); + const item = storage.getItem(key); + if (item) { + return JSON.parse(item); + } + return null; + } catch (error) { + console.error(`Error getting item from ${storageType}: ${error}`); + return null; + } +}; + +const setItem = (key: string, value: any, storageType: StorageType): void => { + try { + const storage = getStorage(storageType); + const stringValue = JSON.stringify(value); + storage.setItem(key, stringValue); + } catch (error) { + console.error(`Error setting item in ${storageType}: ${error}`); + } +}; + +const removeItem = (key: string, storageType: StorageType): void => { + try { + const storage = getStorage(storageType); + storage.removeItem(key); + } catch (error) { + console.error(`Error removing item from ${storageType}: ${error}`); + } +}; + +const clearStorage = (storageType: StorageType): void => { + try { + const storage = getStorage(storageType); + storage.clear(); + } catch (error) { + console.error(`Error clearing ${storageType}: ${error}`); + } +}; + +const getStorage = (storageType: StorageType): Storage => { + return storageType === 'localStorage' ? localStorage : sessionStorage; +}; + +const storageData = ref>([]); + +const initializeStorage = (storageType: StorageType): void => { + const storage = getStorage(storageType); + const keys = Object.keys(storage); + + storageData.value = keys.map((key) => ({ + key, + value: getItem(key, storageType) + })); +}; + +const useStorage = (storageType: StorageType) => { + const getUseStorage = () => { + debugger + return computed(() => storageData.value); + }; + + const setUseStorage = (key: string, value: any) => { + setItem(key, value, storageType); + const newData = { key, value }; + storageData.value.push(newData); + }; + + const removeUseStorage = (key: string) => { + removeItem(key, storageType); + const index = storageData.value.findIndex((item) => item.key === key); + if (index !== -1) { + storageData.value.splice(index, 1); + } + }; + + const clearUseStorage = () => { + clearStorage(storageType); + storageData.value = []; + }; + + return { + getUseStorage, + setUseStorage, + removeUseStorage, + clearUseStorage + }; +}; + +export default useStorage; diff --git a/src/views/dashboard/index.scss b/src/views/dashboard/index.scss index a30259e..b2cbecd 100644 --- a/src/views/dashboard/index.scss +++ b/src/views/dashboard/index.scss @@ -5,8 +5,8 @@ margin-bottom: 15px; .userName { img { - width: 40px; - height: 40px; + width: 50px; + height: 50px; border-radius: 50%; margin-right: 10px; } diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 11e718d..4188936 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -8,7 +8,7 @@ {{ userStore.nickname }} -->
- +
{{ userStore.nickname }}
{{ currentTime }}
@@ -18,10 +18,10 @@
-
+
@@ -75,6 +75,7 @@ import countTo from '@/utils/countTo'; import LineChart from './components/LineChart.vue'; import BarChart from './components/BarChart.vue'; import PieChart from './components/PieChart.vue'; +import avatar from '@/assets/images/avatar.png'; const userStore = useUserStore(); const duration = 5000; diff --git a/src/views/monitoring/devicemanage/components/menu.vue b/src/views/monitoring/devicemanage/components/menu.vue index c2c3f7e..38544eb 100644 --- a/src/views/monitoring/devicemanage/components/menu.vue +++ b/src/views/monitoring/devicemanage/components/menu.vue @@ -21,6 +21,7 @@ diff --git a/src/views/monitoring/screen/index.scss b/src/views/monitoring/screen/index.scss index 9c3add0..fdd96ff 100644 --- a/src/views/monitoring/screen/index.scss +++ b/src/views/monitoring/screen/index.scss @@ -205,6 +205,10 @@ background-color: red; } + .name{ + cursor: pointer; + } + .cellName { display: flex; justify-content: center; diff --git a/src/views/monitoring/screen/index.vue b/src/views/monitoring/screen/index.vue index b2dacea..44a0b4c 100644 --- a/src/views/monitoring/screen/index.vue +++ b/src/views/monitoring/screen/index.vue @@ -16,18 +16,18 @@ {{ tapsShow === true ? '隐藏' : '显示' }} --> - + 显示项 + + + 返回首页 +
@@ -52,14 +64,14 @@
- + - - - @@ -70,12 +82,12 @@