分页问题修改

src/layout/components/Settings/index.vue

@@ -3,8 +3,15 @@
     <h3 class="title">项目配置</h3>
     <el-divider>主题</el-divider>
     <div class="flex justify-center" @click.stop>
-      <el-switch v-model="isDark" inline-prompt :active-icon="IconEpMoon" :inactive-icon="IconEpSunny"
-        active-color="var(--el-fill-color-dark)" inactive-color="var(--el-color-primary)" @change="toggleDark" />
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
+        @change="toggleDark"
+      />
     </div>
     <el-divider>界面设置</el-divider>
     <div class="flex justify-between items-center settingItem">
@@ -25,8 +32,13 @@
     </div>
     <el-divider>主题颜色</el-divider>
     <ul class="flex justify-center themeColor">
-      <li class="colorItem" v-for="(color, index) in themeColors" :key="index" :style="{ background: color }"
-        @click="themeColorClick(color)"></li>
+      <li
+        class="colorItem"
+        v-for="(color, index) in themeColors"
+        :key="index"
+        :style="{ background: color }"
+        @click="themeColorClick(color)"
+      ></li>
     </ul>
     <!-- <el-divider>导航设置</el-divider>
     <ul class="layout">
@@ -79,14 +91,7 @@ function changeLayout(layout: string) {
 }
 
 // 主题颜色
-const themeColors = ref<string[]>([
-  '#409EFF',
-  '#304156',
-  '#11a983',
-  '#13c2c2',
-  '#6959CD',
-  '#f5222d'
-]);
+const themeColors = ref<string[]>(['#409EFF', '#304156', '#11a983', '#13c2c2', '#6959CD', '#f5222d']);
 
 function themeColorClick(color: string) {
   document.documentElement.style.setProperty('--el-color-primary', color);
@@ -125,7 +130,7 @@ onMounted(() => {
     }
   }
 
-  .themeColor> :not([hidden])~ :not([hidden]) {
+  .themeColor > :not([hidden]) ~ :not([hidden]) {
     --un-space-x-reverse: 0;
     margin-left: calc(0.5rem * calc(1 - var(--un-space-x-reverse)));
     margin-right: calc(0.5rem * var(--un-space-x-reverse));

src/views/monitoring/components/menu.vue

@@ -119,6 +119,10 @@ const renderMenuLabel = (option: MenuOption) => {
 function menuUpdateValue(key: string, item: MenuOption) {
   //点击菜单
   sessionStorageIns.setUseStorage(props.menuType === '1' ? 'deptId' : 'id', key);
+  sessionStorageIns.setUseStorage('currentPage', 1);
+  if (props.menuType === '1') {
+    mitt.emit('currentPageEmit', 1);
+  }
   if (props.menuType === '2') {
     sessionStorageIns.setUseStorage('deptId', item.parentId);
   }

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

@@ -248,16 +248,20 @@ const headerData = ref<HeaderVo[]>();
 onMounted(() => {
   // stationInfo();
   // tableHeader();
+  console.log('aaaa', sessionStorage.getItem('currentPage'));
   tablePage.currentPage =
     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://
 });
 
+mitt.on('currentPageEmit', (res: any) => {
+  //监听切换菜单时页数初始化
+  tablePage.currentPage = res;
+});
 mitt.on('menuKey', (res: any) => {
   //监听左侧菜单点击
-  tablePage.currentPage = 1;
-  sessionStorageIns.setUseStorage('currentPage', 1);
   menuKey.value = res;
   tableHeader();
   tableDatas();