diff --git a/src/permission.ts b/src/permission.ts
index 1bee866..6177198 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -35,11 +35,11 @@ router.beforeEach(async (to, from, next) => {
         if (to.matched.length === 0) {
           from.name ? next({ name: from.name }) : next('/404');
         } else {
-          console.log('切换页面发送websocket信息');
-          const exitStatu = {
-            code: 'exitDataMonitor'
-          };
-          socket.onSend(exitStatu);
+          // console.log('切换页面发送websocket信息');
+          // const exitStatu = {
+          //   code: 'exitDataMonitor'
+          // };
+          // socket.onSend(exitStatu);
           next();
         }
       } else {
@@ -50,13 +50,13 @@ router.beforeEach(async (to, from, next) => {
             router.addRoute(route);
           });
 
-          console.log('登录后链接websocket');
+          // console.log('登录后链接websocket');
           //登录后连接webSocket
           const userStorageInfo = sessionStorage.getItem('userInfo');
           const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
-          const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+          // const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
           // const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
-          socket.initialize(wsUrl);
+          // socket.initialize(wsUrl);
           next({ ...to, replace: true });
         } catch (error) {
           // 移除 token 并跳转登录页
diff --git a/src/views/monitoring/screen/components/main.vue b/src/views/monitoring/screen/components/main.vue
index 8ef22ff..0d6719b 100644
--- a/src/views/monitoring/screen/components/main.vue
+++ b/src/views/monitoring/screen/components/main.vue
@@ -116,6 +116,7 @@
 </template>
 <script lang="ts" setup>
 import router from '@/router';
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import {
   VxeGridProps,
   VxeGridInstance,
@@ -211,7 +212,7 @@ const userInfo = JSON.parse(userStorageInfo === null ? '' : userStorageInfo);
 // const baseApi = "http://board.heatiot.cn:8001/prod-api"//websocket链接地址，与项目接口地址一致。
 //const baseApi = import.meta.env.VITE_APP_BASE_API
 //const apiUrl = baseApi.replace(/https?:/, '');
-// const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
+const wsUrl = `ws://${window.location.host}/ws/websocket/${userInfo.userName}`; //websocket地址
 // const wsUrl = `ws://10.10.10.56:9010/websocket/${userInfo.userName}`; //websocket地址
 
 const emit = defineEmits(['tableHeaderData']);
@@ -264,7 +265,16 @@ onMounted(() => {
     sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage'));
   console.log(Number(sessionStorage.getItem('currentPage')));
   tablePage.pageSize = sessionStorage.getItem('pageSize') === null ? 10 : Number(sessionStorage.getItem('pageSize'));
-  // socket.initialize(wsUrl); //初始化websocket http://
+  socket.initialize(wsUrl); //初始化websocket http://
+});
+
+onBeforeRouteLeave((to, from) => {
+  //监听离开页面
+  console.log('onBeforeRouteLeave--', to.path, from.path);
+  if (to.path != from.path) {
+    console.log('离开页面');
+    socket.close(false);
+  }
 });
 
 mitt.on('currentPageEmit', (res: any) => {
@@ -440,7 +450,6 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
   cellRow.value = row;
   cellColumn.value = column;
   cellField.value = cellField;
-  debugger;
   if (cellField.canBeControl === '1' && controlPerm) {
     modalTitle.value = column.title;
     ///formData.value.url = data.url;
diff --git a/src/views/monitoring/screenData/components/main.vue b/src/views/monitoring/screenData/components/main.vue
index 6533bed..cd77b5e 100644
--- a/src/views/monitoring/screenData/components/main.vue
+++ b/src/views/monitoring/screenData/components/main.vue
@@ -116,6 +116,7 @@
 </template>
 <script lang="ts" setup>
 import router from '@/router';
+import { onBeforeRouteLeave } from 'vue-router';
 import {
   VxeGridProps,
   VxeGridInstance,
@@ -132,7 +133,7 @@ import { getMockTableHeader, getStationInfo, getMockTableData, editConfig, sendC
 import { TableVo } from '@/api/table/types';
 import { tableStore } from '@/store/modules/table';
 import mitt from '@/plugins/bus';
-import socket from '@/utils/socket';
+// import socket from '@/utils/socket';
 import useStorage from '@/utils/useStorage';
 import { useUserStoreHook } from '@/store/modules/user';
 
@@ -258,7 +259,7 @@ const headerData = ref<HeaderVo[]>();
 
 onMounted(() => {
   // stationInfo();
-  // tableHeader();
+  // tableMockHeader();
   console.log('aaaa', sessionStorage.getItem('currentPage'));
   tablePage.currentPage =
     sessionStorage.getItem('currentPage') === null ? 1 : Number(sessionStorage.getItem('currentPage'));
@@ -267,25 +268,33 @@ onMounted(() => {
   // socket.initialize(wsUrl); //初始化websocket http://
 });
 
-onUnmounted(() => {
+// onUnmounted(() => {
+//   //组件注销前清除setTimeout
+//   if (timer.value !== null || timer.value !== undefined) {
+//     clearTimeout(timer.value);
+//   }
+// });
+
+onBeforeRouteLeave((to, from) => {
+  //监听离开页面
   //组件注销前清除setTimeout
   if (timer.value !== null || timer.value !== undefined) {
     clearTimeout(timer.value);
   }
 });
 
-mitt.on('currentPageEmit', (res: any) => {
+mitt.on('currentPageEmits', (res: any) => {
   //监听切换菜单时页数初始化
   tablePage.currentPage = res;
 });
-mitt.on('menuKey', (res: any) => {
+mitt.on('menuMockKeys', (res: any) => {
   //监听左侧菜单点击
   menuKey.value = res;
-  tableHeader();
-  tableDatas();
+  tableMockHeader();
+  tableMockDatas();
 });
 
-mitt.on('treeData', (res: any) => {
+mitt.on('treeDatas', (res: any) => {
   //监听表格header点击
   tableColumn.value = [];
   nextTick(() => {
@@ -343,7 +352,7 @@ const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize })
   tablePage.pageSize = pageSize;
   sessionStorageIns.setUseStorage('currentPage', currentPage);
   sessionStorageIns.setUseStorage('pageSize', pageSize);
-  tableDatas();
+  tableMockDatas();
 };
 
 function stationInfo() {
@@ -355,7 +364,7 @@ function stationInfo() {
   });
 }
 
-function tableHeader() {
+function tableMockHeader() {
   //获取表格header
   getMockTableHeader().then((res: any) => {
     console.log(res);
@@ -409,11 +418,11 @@ function tableHeader() {
     // console.log('列获取', gridOptions.value.columns);
     emit('tableHeaderData', res.data);
     // mitt.emit('tableHeaderData', res.data);
-    // tableDatas();
+    // tableMockDatas();
   });
 }
 
-function tableDatas() {
+function tableMockDatas() {
   //获取表格数据
   // const params = menuKey.value;
   const params = {
@@ -475,7 +484,7 @@ const cellDBLClickEvent: VxeTableEvents.CellDblclick<TableVo> = ({ row, column }
     formData.value = cellField.ctrlPro;
     formData.value.value = cellField.val;
     // formData.value.paramCode = cellField.ctrlPro.paramcode;
-    editModal.value = true;
+    editModal.value = false;
   }
   console.log(row[column.field]);
 };
@@ -495,10 +504,10 @@ const formatRole: VxeColumnPropTypes.Formatter<HeaderVo> = ({ cellValue }) => {
   //   }" ></i>
   //   ${cellValue.canBeControl === '1' && controlPerm ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
   const cellData = `
-  <span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : cellValue.canBeControl === '1' ? 'cellEdit' : ''}">
+  <span class="cellClass ${cellValue.alertProp === 1 ? 'warning' : cellValue.canBeControl === '1' ? '' : ''}">
     ${cellValue.ctrlPro.valueType != 'bool' ? cellValue.val : cellValue.val === 'true' ? '启' : '停'}
     </span>
-    ${cellValue.canBeControl === '1' && controlPerm ? '<i class="iconfont icon-edit-icon"></i>' : ''}`;
+    ${cellValue.canBeControl === '1' && controlPerm ? '' : ''}`;
   return cellData;
 };
 
diff --git a/src/views/monitoring/screenData/components/menu.vue b/src/views/monitoring/screenData/components/menu.vue
index e19fc83..1e79782 100644
--- a/src/views/monitoring/screenData/components/menu.vue
+++ b/src/views/monitoring/screenData/components/menu.vue
@@ -1,36 +1,95 @@
 <template>
-  <n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey" key-field="deptId"
-    label-field="deptName" :default-expand-all="false" :watch-props="['defaultExpandedKeys']"
-    :render-label="renderMenuLabel" @update:value="menuUpdateValue" />
+  <div class="menuCantent">
+    <n-menu
+      ref="menuInstRef"
+      class="menu"
+      :indent="0"
+      :options="menuOptions"
+      v-model:value="selectedKey"
+      key-field="deptId"
+      label-field="deptName"
+      :default-expand-all="false"
+      :watch-props="['defaultExpandedKeys']"
+      :render-label="renderMenuLabel"
+      @update:value="menuUpdateValue"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 // import { NEllipsis } from 'naive-ui';
 import { getMenu } from '@/api/table/list';
+import { getMenuData } from '@/api/device/index';
 import { getFirstNodeLastLevel } from '@/utils/index';
-import useStorage from '@/utils/useStorage'
+import useStorage from '@/utils/useStorage';
 import mitt from '@/plugins/bus';
+const router = useRoute();
 const menuOptions = ref([]);
 const selectedKey = ref();
 const sessionStorageIns = useStorage('sessionStorage');
+const routerType = ref('');
+const id = ref(0);
+const deptId = ref(0);
+const menuDeptKey = ref(0);
+const menuIdKey = ref(0);
 
 const emit = defineEmits(['tableMenuData']);
 
+const props = defineProps({
+  menuType: {
+    type: String,
+    default: '1'
+  }
+});
+
 onMounted(() => {
-  menuApi();
+  routerType.value = router.query?.id === undefined ? '0' : '1';
+  id.value = sessionStorage.getItem('id') === null ? 0 : Number(sessionStorage.getItem('id'));
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
+  if (props.menuType === '1') {
+    menuApi();
+  } else if (props.menuType === '2') {
+    comMenuApi();
+  }
 });
 
 function menuApi() {
-  //获取左侧菜单
+  //获取表格左侧菜单
   getMenu().then((res: any) => {
     if (res.code === 200) {
-      const key = getFirstNodeLastLevel(res.data).deptId
+      menuDeptKey.value =
+        routerType.value === '1'
+          ? deptId.value
+          : routerType.value === '0' && deptId.value != 0
+          ? deptId.value
+          : getFirstNodeLastLevel(res.data).deptId;
       removeChildren(res.data);
       menuOptions.value = res.data;
-      selectedKey.value = key;
-      sessionStorageIns.setUseStorage('deptId', key);
-      mitt.emit('menuKey', key);
+      selectedKey.value = menuDeptKey.value;
+      sessionStorageIns.setUseStorage('deptId', menuDeptKey.value);
+      mitt.emit('menuMockKeys', menuDeptKey.value);
+      emit('tableMenuData', res.data);
+    }
+  });
+}
+function comMenuApi() {
+  //获取组态左侧菜单
+  getMenuData().then((res: any) => {
+    if (res.code === 200) {
+      menuIdKey.value =
+        routerType.value === '1'
+          ? id.value
+          : routerType.value === '0' && id.value != 0
+          ? id.value
+          : getFirstNodeLastLevel(res.data).deptId;
+      const parentId = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).parentId;
+      removeChildren(res.data);
+      menuOptions.value = res.data;
+      selectedKey.value = menuIdKey.value;
+      sessionStorageIns.setUseStorage('deptId', routerType.value === '1' ? deptId.value : parentId);
+      mitt.emit('deviceMenuKey', menuIdKey.value);
       emit('tableMenuData', res.data);
     }
   });
@@ -42,7 +101,7 @@ function removeChildren(menu: any) {
     return;
   }
 
-  menu.forEach((item) => {
+  menu.forEach(item => {
     if (item.children && item.children.length === 0) {
       delete item.children;
     } else {
@@ -50,19 +109,184 @@ function removeChildren(menu: any) {
     }
   });
 }
-
-function renderMenuLabel(option: MenuOption) {
+// function renderMenuLabel(option: MenuOption) {
+const renderMenuLabel = (option: MenuOption) => {
   //菜单标题增加提示
-  return h(NEllipsis, null, option.deptName as string);
-}
+  // return h(NEllipsis, null, option.deptName as string);
+  return h(NEllipsis, null, { default: () => option.deptName });
+};
 
 function menuUpdateValue(key: string, item: MenuOption) {
   //点击菜单
-  sessionStorageIns.setUseStorage('id', key);
-  mitt.emit('menuKey', key);
+  sessionStorageIns.setUseStorage(props.menuType === '1' ? 'deptId' : 'id', key);
+  sessionStorageIns.setUseStorage('currentPage', 1);
+  if (props.menuType === '1') {
+    mitt.emit('currentPageEmits', 1);
+  }
+  if (props.menuType === '2') {
+    sessionStorageIns.setUseStorage('deptId', item.parentId);
+  }
+  mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key);
   console.log(key, item);
 }
 </script>
 <style lang="scss" scoped>
-@import '../index.scss';
+:root {
+  --n-item-text-color-child-active-hover: #fff;
+  --n-item-text-color-active-hover: #fff;
+  --n-item-text-color-child-active: #fff;
+}
+
+.menuCantent {
+  height: -webkit-fill-available;
+  overflow: auto;
+
+  .menu {
+    text-align: center;
+
+    :deep(.n-submenu) {
+      --n-item-color-hover: auto;
+
+      .n-menu-item {
+        .n-menu-item-content {
+          padding: 0 !important;
+
+          .n-ellipsis {
+            font-family: 'AlibabaPuHuiTiBold';
+            padding: 0 15px;
+          }
+
+          // .n-menu-item-content__arrow {
+          //   color: #b1e3ff;
+          // }
+        }
+
+        .n-menu-item-content.n-menu-item-content--child-active {
+          // .n-menu-item-content-header {
+          //   color: #b1e3ff;
+          // }
+
+          .n-menu-item-content__arrow {
+            color: var(--n-arrow-color);
+          }
+        }
+
+        // .n-menu-item-content--child-active {
+        //   .n-menu-item-content-header:hover {
+        //     color: #fff !important;
+        //   }
+
+        //   .n-menu-item-content__arrow:hover {
+        //     color: #fff !important;
+        //   }
+        // }
+        // .n-menu-item-content--child-active:hover{
+        //   color: #fff !important;
+        // }
+
+        .n-menu-item-content-header {
+          font-size: 2.2rem;
+          color: var(--vxe-table-header-font-color);
+        }
+      }
+
+      .n-menu-item:hover {
+        color: #409eff;
+      }
+
+      .n-submenu-children {
+        .n-menu-item-content-header {
+          font-size: 1.6rem;
+        }
+
+        .n-menu-item-content--selected {
+          .n-menu-item-content-header {
+            color: #409eff;
+
+            .n-ellipsis {
+              position: relative;
+
+              span {
+                padding: 0 10px;
+              }
+
+              span::before {
+                content: none;
+                position: absolute;
+                left: 0;
+                top: 0.7rem;
+                width: 1.8rem;
+                height: 1.8rem;
+                // background: url(@/assets/images/taps.png) no-repeat;
+                // background-size: cover;
+                background-color: var(--menuActiveBg) !important;
+              }
+            }
+          }
+        }
+
+        .n-menu-item-content--selected::before {
+          background: -webkit-linear-gradient(left, #91d3fd 0%, #dedede 100%);
+          left: 0;
+          right: 0;
+        }
+
+        .n-menu-item-content--selected::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          height: 2px;
+          background: -webkit-linear-gradient(left, #409eff 0%, #dedede 100%);
+        }
+      }
+
+      .n-base-icon {
+        // color: #84e0f7;
+        right: 10px;
+      }
+    }
+  }
+}
+
+/*滚动条整体部分*/
+.menuCantent::-webkit-scrollbar,
+.tableGrid ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/*滚动条的轨道*/
+.menuCantent::-webkit-scrollbar-track,
+.tableGrid ::-webkit-scrollbar-track {
+  background-color: transparent;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+}
+
+/*滚动条里面的小方块，能向上向下移动*/
+.menuCantent::-webkit-scrollbar-thumb,
+.tableGrid ::-webkit-scrollbar-thumb {
+  background-color: rgb(147, 147, 153, 0.5);
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+}
+
+.menuCantent::-webkit-scrollbar-thumb:hover,
+.tableGrid ::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+}
+
+.menuCantent::-webkit-scrollbar-thumb:active,
+.tableGrid :-webkit-scrollbar-thumb:active {
+  background-color: #787878;
+}
+
+/*边角，即两个滚动条的交汇处*/
+.menuCantent::-webkit-scrollbar-corner,
+.tableGrid ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
 </style>
diff --git a/src/views/monitoring/screenData/components/showTree.vue b/src/views/monitoring/screenData/components/showTree.vue
index aa5bb54..9a02ef1 100644
--- a/src/views/monitoring/screenData/components/showTree.vue
+++ b/src/views/monitoring/screenData/components/showTree.vue
@@ -1,8 +1,18 @@
 <template>
   <div class="treeCard">
-    <el-tree ref="tree" class="showTree" :data="treeData" node-key="id" show-checkbox draggable :props="defaultProps"
-      :default-checked-keys="defaultCheckedKeys" :allow-drop="allowDrop" @node-drop="nodeDrop"
-      @check-change="treeCheckChange">
+    <el-tree
+      ref="tree"
+      class="showTree"
+      :data="treeData"
+      node-key="id"
+      show-checkbox
+      draggable
+      :props="defaultProps"
+      :default-checked-keys="defaultCheckedKeys"
+      :allow-drop="allowDrop"
+      @node-drop="nodeDrop"
+      @check-change="treeCheckChange"
+    >
       <template #default="{ node, data }">
         <span class="custom-tree-node">
           <span>{{ data.field === 'deviceStatus' ? '状态' : data.title }}</span>
@@ -15,7 +25,9 @@
     </el-tree>
     <div class="treeBtn">
       <el-button @click="cancelClick">取消</el-button>
-      <el-button type="primary" :loading="treeLoading" @click="confirmClick">{{ treeLoading ? '确认中' : '确认' }}</el-button>
+      <el-button type="primary" :loading="treeLoading" @click="confirmClick">{{
+        treeLoading ? '确认中' : '确认'
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -23,7 +35,7 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ComponentInternalInstance } from 'vue';
 import mitt from '@/plugins/bus';
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const defaultCheckedKeys = ref([]); //默认选项
 const checkList = ref<TreeVo[]>([]); //选中的隐藏项
 
@@ -39,15 +51,15 @@ interface TreeVo {
   controlValue?: number;
   children?: TreeVo[];
 }
-const treeLoading = ref(false)
+const treeLoading = ref(false);
 const treeData = ref<TreeVo[]>();
 const emit = defineEmits(['cancelClick', 'confirmClick']);
 
 const props: any = defineProps({
   headerData: {
     type: Array,
-    default: [],
-  },
+    default: []
+  }
 });
 
 onMounted(() => {
@@ -77,12 +89,12 @@ onMounted(() => {
 mitt.on('treeClose', (res: any) => {
   //监听配置项确认后
   emit('cancelClick', '');
-  treeLoading.value = false
+  treeLoading.value = false;
 });
 
 const defaultProps = {
   children: 'children',
-  label: 'title',
+  label: 'title'
 };
 
 // const treeData: TreeVo[] = [
@@ -290,8 +302,8 @@ function cancelClick() {
 }
 function confirmClick() {
   //确认
-  treeLoading.value = true
-  mitt.emit('treeData', treeData.value);
+  treeLoading.value = true;
+  mitt.emit('treeDatas', treeData.value);
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/monitoring/screenData/index.vue b/src/views/monitoring/screenData/index.vue
index 2794411..3a03bf6 100644
--- a/src/views/monitoring/screenData/index.vue
+++ b/src/views/monitoring/screenData/index.vue
@@ -79,7 +79,9 @@
     </div>
     <div class="panelBtn" :class="menuShow ? 'left' : 'right'" @click="panelClick">
       <i class="iconfont icon-arrow-up" :class="!panelShow ? 'up' : 'down'"></i>
-      <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
+      <div class="copyright">
+        Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}
+      </div>
       <!-- <n-button type="info" size="tiny" ghost @click="panelClick">按钮</n-button> -->
     </div>
   </div>
@@ -89,7 +91,7 @@ import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 // import { useDateFormat, useNow } from '@vueuse/core';
 // import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
 import Header from '../components/header.vue';
-import Menu from '../components/menu.vue';
+import Menu from './components/menu.vue';
 import Main from './components/main.vue';
 import InfoPanel from './components/infoPanel.vue';
 import ShowTree from './components/showTree.vue';
diff --git a/tsconfig.json b/tsconfig.json
index 58824ee..5dd95ee 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,10 +16,10 @@
       "@/*": ["src/*"]
     },
     "outDir": "dist",
-    "types": ["vite/client", "element-plus/global","unplugin-icons/types/vue"],
+    "types": ["vite/client", "element-plus/global", "unplugin-icons/types/vue"],
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
     "allowSyntheticDefaultImports": true /* 允许默认导入 */,
-    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */
   },
   "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts"],
   "exclude": ["node_modules", "dist", "**/*.js"]