增加设备名称跳转

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": {

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') {
       // 如果已登录，跳转首页

src/router/index.ts

@@ -43,14 +43,14 @@ export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/',
     component: Layout,
-    redirect: '/monitoring/screen',
+    redirect: '/dashboard',
     children: [
-      // {
+      {
-      //   path: 'dashboard',
+        path: 'dashboard',
-      //   component: () => import('@/views/dashboard/index.vue'),
+        component: () => import('@/views/dashboard/index.vue'),
-      //   name: 'Dashboard',
+        name: 'Dashboard',
-      //   meta: { title: 'dashboard', icon: 'icon-home', affix: true }
+        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
-      // },
+      },
       {
         path: '401',
         component: () => import('@/views/error-page/401.vue'),

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<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
@@ -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 => {

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<typeof import('vue')['EffectScope']>
-    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>

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)

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<Array<StorageData>>([]);
+
+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;

src/views/dashboard/index.scss

@@ -5,8 +5,8 @@
     margin-bottom: 15px;
     .userName {
       img {
-        width: 40px;
+        width: 50px;
-        height: 40px;
+        height: 50px;
         border-radius: 50%;
         margin-right: 10px;
       }

src/views/dashboard/index.vue

@@ -8,7 +8,7 @@
             <span>{{ userStore.nickname }}</span>
           </div> -->
           <div class="userName flex items-center">
-            <img :src="userStore.avatar" />
+            <img :src="userStore.avatar === null || userStore.avatar === '' ? avatar : userStore.avatar" />
             <div class="info flex column">
               <div class="name">{{ userStore.nickname }}</div>
               <div class="time">{{ currentTime }}</div>
@@ -18,10 +18,10 @@
               </div>
             </div>
           </div>
-          <div class="userNum flex column text-center">
+          <!-- <div class="userNum flex column text-center">
             <div class="title">用户数</div>
             <span><countTo :start="1" :end="userNumber" :duration="5000"></countTo></span>
-          </div>
+          </div> -->
           <!-- <div class="currentTime flex column text-center">
             <span>{{ currentTime }}</span>
             <span>
@@ -32,7 +32,7 @@
         </div>
       </el-card>
     </section>
-    <section class="dataCard">
+    <!-- <section class="dataCard">
       <el-card shadow="always">
         <el-row :gutter="20">
           <el-col :span="6" v-for="item in cardData" :key="item.value">
@@ -62,7 +62,7 @@
           <PieChart id="pieChart" height="300px" width="100%" />
         </el-col>
       </el-row>
-    </section>
+    </section> -->
   </div>
 </template>
 
@@ -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;

src/views/monitoring/devicemanage/components/menu.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useRouter } from "vue-router";
 import { getDept, getDeviceList } from '@/api/device/index';
 import { menuVo, deviceVo } from '@/api/device/types';
 import mitt from '@/plugins/bus';
@@ -28,6 +29,7 @@ const deptData = ref([]);
 const selectedKey = ref();
 const menuOptions = ref<menuVo[]>();
 const deviceData = ref<deviceVo[]>();
+const id=
 
 const emit = defineEmits(['tableMenuData']);
 
@@ -45,6 +47,7 @@ function menuApi() {
           : res.data[0].deptId;
       // removeChildren(res.data);
       deptData.value = res.data;
+      menuOptions.value=res.data
       gitDevice(key, '0')
       // selectedKey.value = key;
       // mitt.emit('menuKey', key);
@@ -77,9 +80,9 @@ function gitDevice(key: number, type: string) {
         selectedKey.value = deptIdKey.toString();
         mitt.emit('menuKey', deptIdKey);
       }
-      menuOptions.value = deptData.value
+      // menuOptions.value = deptData.value
       deviceData.value = res.data;
-      console.log(menuOptions.value)
+      // console.log(menuOptions.value)
       // if (type === '0') {
       //   selectedKey.value = res.data[0].deptId;
       //   mitt.emit('menuKey', res.data[0].deptId);

src/views/monitoring/devicemanage/index.vue

@@ -3,7 +3,7 @@
     <secton ref="titleRef" class="title">
       <h3>{{ titleData }}</h3>
       <div class="seeting">
-        <n-tooltip trigger="hover">
+        <!-- <n-tooltip trigger="hover">
           <template #trigger>
             <n-button class="tooltips" circle quaternary @click="screenClick">
               <template #icon>
@@ -14,6 +14,18 @@
             </n-button>
           </template>
           全屏
+        </n-tooltip> -->
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-button class="tooltips" circle quaternary @click="returnBack">
+              <template #icon>
+                <n-icon>
+                  <Power />
+                </n-icon>
+              </template>
+            </n-button>
+          </template>
+          返回首页
         </n-tooltip>
       </div>
     </secton>
@@ -28,10 +40,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { Scan } from '@vicons/ionicons5';
+import router from '@/router';
+import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
 import Menu from './components/menu.vue';
 import Main from './components/main.vue';
-import screenfull from 'screenfull'
+// import screenfull from 'screenfull'
 const titleRef = ref<HTMLElement>();
 const sidebar = ref<HTMLElement>();
 const screenRef = ref<HTMLElement>();
@@ -53,12 +66,16 @@ function tableMenuData(data: any) {
   //获取菜单数据
   titleData.value = data[0].deptName
 }
-function screenClick() {
+function returnBack(){
-  if (screenfull.isEnabled) {
+  //返回首页
-    // 控制是否全屏的按钮
+  router.replace("/dashboard")
-    screenfull.toggle(screenRef.value)
-  }
 }
+// function screenClick() {
+//   if (screenfull.isEnabled) {
+//     // 控制是否全屏的按钮
+//     screenfull.toggle(screenRef.value)
+//   }
+// }
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

src/views/monitoring/screen/components/main.vue

@@ -21,7 +21,7 @@
         <template #deviceuuid_default="{ row }">
           <span class="tips green" v-if="row.deviceuuid.deviceStatus === 0"></span>
           <span class="tips red" v-if="row.deviceuuid.deviceStatus === 2"></span>
-          <span class="name">{{ row.deviceuuid.title }}</span>
+          <span class="name" @click.native="nameClick(row.deviceuuid)">{{ row.deviceuuid.title }}</span>
         </template>
       </vxe-grid>
       <!-- <vxe-grid class="tableGrid" v-bind="gridOptions"> </vxe-grid> -->
@@ -47,6 +47,7 @@
   </vxe-modal>
 </template>
 <script lang="ts" setup>
+import router from '@/router';
 import {
   VxeGridProps,
   VxeGridInstance,
@@ -104,7 +105,8 @@ const formRules = ref<VxeFormPropTypes.Rules>({
   ],
 });
 
-const userInfo = JSON.parse(localStorage.getItem('userInfo'));
+const userStorageInfo = sessionStorage.getItem('userInfo')
+const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 // const loginIp = userInfo.loginIp.split('.').join('');
 const baseApi = "http://10.10.10.56:9000"//websocket链接地址，与项目接口地址一致。
 // const baseApi = import.meta.env.VITE_APP_BASE_API
@@ -219,7 +221,7 @@ function tableHeader() {
       },
     ];
     console.log(tableCessText)
-    res.data.map((item) => {
+    res.data.map((item: any) => {
       if (item.formatter != undefined || item.children != undefined) {
         item.formatter = eval(item.formatter);
         if (item.children && item.children.length) {
@@ -317,6 +319,12 @@ const submitEvent: VxeFormEvents.Submit = () => {
   // VXETable.modal.message({ content: '保存成功', status: 'success' });
 };
 
+function nameClick(row: any) {
+  //点击设备名称跳转设备管理
+  console.log(row)
+  router.push({ path: '/devicemanage', query: { id: row.id } });
+}
+
 const resetEvent: VxeFormEvents.Reset = () => {
   console.log({ content: '重置', status: 'info' });
 };

src/views/monitoring/screen/components/menu.vue

@@ -1,34 +1,26 @@
 <template>
-  <n-menu
+  <n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey" key-field="deptId"
-    ref="menuInstRef"
+    label-field="deptName" default-expand-all :watch-props="['defaultExpandedKeys']" :render-label="renderMenuLabel"
-    class="menu"
+    @update:value="menuUpdateValue" />
-    :indent="0"
-    :options="menuOptions"
-    v-model:value="selectedKey"
-    key-field="deptId"
-    label-field="deptName"
-    default-expand-all
-    :watch-props="['defaultExpandedKeys']"
-    :render-label="renderMenuLabel"
-    @update:value="menuUpdateValue"
-  />
 </template>
 
 <script lang="ts" setup>
-  import type { MenuOption } from 'naive-ui';
+import type { MenuOption } from 'naive-ui';
-  // import { NEllipsis } from 'naive-ui';
+// import { NEllipsis } from 'naive-ui';
-  import { getMenu } from '@/api/table/list';
+import { getMenu } from '@/api/table/list';
-  import mitt from '@/plugins/bus';
+import useStorage from '@/utils/useStorage'
-  const menuOptions = ref([]);
+import mitt from '@/plugins/bus';
-  const selectedKey = ref();
+const menuOptions = ref([]);
+const selectedKey = ref();
+const sessionStorageIns = useStorage('sessionStorage');
 
-  const emit = defineEmits(['tableMenuData']);
+const emit = defineEmits(['tableMenuData']);
 
-  onMounted(() => {
+onMounted(() => {
   menuApi();
-  });
+});
 
-  function menuApi() {
+function menuApi() {
   //获取左侧菜单
   getMenu().then((res: any) => {
     if (res.code === 200) {
@@ -39,13 +31,14 @@
       removeChildren(res.data);
       menuOptions.value = res.data;
       selectedKey.value = key;
+      sessionStorageIns.setUseStorage('deptId', key);
       mitt.emit('menuKey', key);
       emit('tableMenuData', res.data);
     }
   });
-  }
+}
 
-  function removeChildren(menu:any) {
+function removeChildren(menu: any) {
   //处理菜单空children
   if (!Array.isArray(menu)) {
     return;
@@ -58,19 +51,20 @@
       removeChildren(item.children);
     }
   });
-  }
+}
 
-  function renderMenuLabel(option: MenuOption) {
+function renderMenuLabel(option: MenuOption) {
   //菜单标题增加提示
   return h(NEllipsis, null, option.deptName as string);
-  }
+}
 
-  function menuUpdateValue(key: string, item: MenuOption) {
+function menuUpdateValue(key: string, item: MenuOption) {
   //点击菜单
+  sessionStorageIns.setUseStorage('deptId', key);
   mitt.emit('menuKey', key);
   console.log(key, item);
-  }
+}
 </script>
 <style lang="scss" scoped>
-  @import '../index.scss';
+@import '../index.scss';
 </style>

src/views/monitoring/screen/index.scss

@@ -205,6 +205,10 @@
               background-color: red;
             }
 
+            .name{
+              cursor: pointer;
+            }
+
             .cellName {
               display: flex;
               justify-content: center;

src/views/monitoring/screen/index.vue

@@ -16,18 +16,18 @@
           {{ tapsShow === true ? '隐藏' : '显示' }}
         </n-tooltip> -->
         <!-- <el-button @click="screenClick">全屏</el-button> -->
-        <n-tooltip trigger="hover">
+        <!-- <n-tooltip trigger="hover">
           <template #trigger>
             <n-button class="tooltips" circle quaternary @click="screenClick">
               <template #icon>
                 <n-icon>
-                  <Scan />
+                  <Maximize />
                 </n-icon>
               </template>
             </n-button>
           </template>
           全屏
-        </n-tooltip>
+        </n-tooltip> -->
         <n-tooltip trigger="hover">
           <template #trigger>
             <n-button class="tooltips" circle quaternary @click="showClick">
@@ -40,6 +40,18 @@
           </template>
           显示项
         </n-tooltip>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-button class="tooltips" circle quaternary @click="returnBack">
+              <template #icon>
+                <n-icon>
+                  <Power />
+                </n-icon>
+              </template>
+            </n-button>
+          </template>
+          返回首页
+        </n-tooltip>
       </div>
     </secton>
     <section class="layout">
@@ -70,12 +82,12 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { Filter, Settings } from '@vicons/tabler';
+import router from '@/router';
-import { Scan } from '@vicons/ionicons5';
+import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
 import Menu from './components/menu.vue';
 import Main from './components/main.vue';
 import ShowTree from './components/showTree.vue';
-import screenfull from 'screenfull'
+// import screenfull from 'screenfull'
 const tapsShow = ref(false);
 const showModal = ref(false);
 const screenRef = ref<HTMLElement>();
@@ -121,12 +133,17 @@ function cancelClick() {
   showModal.value = false;
 }
 
-function screenClick(){
+function returnBack() {
-  if (screenfull.isEnabled) {
+  //返回首页
-      // 控制是否全屏的按钮
+  router.replace("/dashboard")
-      screenfull.toggle(screenRef.value)
-  }
 }
+
+// function screenClick(){
+//   if (screenfull.isEnabled) {
+//       // 控制是否全屏的按钮
+//       screenfull.toggle(screenRef.value)
+//   }
+// }
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

vite.config.ts

@@ -45,8 +45,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       hmr: true,//配置HMR
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          // target: 'http://172.1.2.29:9000/',//本地接口地址
+          target: 'http://172.1.2.157:9000/',//本地接口地址
-          target: 'http://10.10.10.56:9000/',//线上接口地址
+          // target: 'http://10.10.10.56:9000/',//线上接口地址
           changeOrigin: true,
           rewrite: path =>
             path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')