微调

frontend/src/layouts/components/Footer/index.vue

@@ -1,32 +1,135 @@
 <template>
-    <div class="footer flx-align-center pl10">
+  <div class="footer flx-align-center pl10">
-        <p style="margin: 0">
+    <el-dropdown>
-            <a href="http://www.shining-electric.com/" target="_blank">2024 南京耀能电力自动化股份有限公司</a>
+      <div class="change_mode">
-        </p>
+        {{ title }}
-    </div>
+        <el-icon class="el-icon--right change_mode_down"><arrow-down /></el-icon>
+        <el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+              v-for="item in modeList"
+              :key="item.key"
+              :disabled="!item.activated"
+              @click="handelOpen(item.code, item.key)"
+          >
+            {{ item.name }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <p style="margin: 0">
+      <a href="http://www.shining-electric.com/" target="_blank">2024 © 南京灿能电力自动化股份有限公司</a>
+    </p>
+  </div>
 </template>
-
 <script lang="ts" setup>
-</script>
+import { computed } from 'vue'
+import { HOME_URL } from '@/config'
+import { useAuthStore } from '@/stores/modules/auth'
+import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
+import { useTabsStore } from '@/stores/modules/tabs'
+import { useRouter } from 'vue-router'
+import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
 
+const router = useRouter()
+const authStore = useAuthStore()
+const modeStore = useModeStore()
+const tabsStore = useTabsStore()
+
+const title = computed(() => {
+  return modeStore.currentMode === '' ? '选择模块' : modeStore.currentMode + '模块'
+})
+const activateInfo = authStore.activateInfo
+const isActivateOpen = import.meta.env.VITE_ACTIVATE_OPEN
+const modeList = [
+  {
+    name: '模拟式模块',
+    code: '模拟式',
+    key: 'simulate',
+    activated: isActivateOpen === 'true' ? activateInfo.simulate.permanently === 1 : true
+  },
+  {
+    name: '数字式模块',
+    code: '数字式',
+    key: 'digital',
+    activated: isActivateOpen === 'true' ? activateInfo.digital.permanently === 1 : true
+  },
+  {
+    name: '比对式模块',
+    code: '比对式',
+    key: 'contrast',
+    activated: isActivateOpen === 'true' ? activateInfo.contrast.permanently === 1 : true
+  }
+]
+const handelOpen = async (item: string, key: string) => {
+  if (isActivateOpen === 'true' && activateInfo[key].permanently !== 1) {
+    ElMessage.warning(`${item}模块未激活`)
+    return
+  }
+  await authStore.setShowMenu()
+  modeStore.setCurrentMode(item) // 将模式code存入 store
+  // 强制刷新页面
+  await tabsStore.closeMultipleTab()
+  await initDynamicRouter()
+
+  // 只有当目标路径与当前路径不同时才跳转
+  if (router.currentRoute.value.path !== HOME_URL) {
+    await router.push({ path: HOME_URL })
+  } else {
+    // 如果已在目标页面，手动触发组件更新
+    window.location.reload() // 或者采用其他方式刷新数据
+  }
+
+}
+</script>
 <style scoped lang="scss">
 @use './index.scss';
-
 .footer {
-    position: relative;
+  position: relative;
-    background-color: var(--el-color-primary);
+  background-color: var(--el-color-primary);
-
+  // .el-button:hover {
-    p {
+  //   background-color: var(--el-color-primary) !important;
-        position: absolute;
+  //   border: none !important;
-        width: 100%;
+  //   outline: none !important;
-        height: 100%;
+  // }
-        text-align: right;
+  .change_mode {
-        line-height: 40px;
+    color: #fff;
-
+    display: flex;
-        a {
+    align-items: center;
-            color: #fff;
+    justify-content: flex-start;
-            margin-right: 25px;
+    height: 100%;
-        }
+    width: auto;
+    font-size: 14px;
+    .change_mode_down {
+      display: block;
     }
+    .change_mode_up {
+      display: none;
+    }
+  }
+  .change_mode:hover {
+    .change_mode_down {
+      display: none;
+    }
+    .change_mode_up {
+      display: block;
+    }
+  }
+  .el-dropdown {
+    z-index: 1001;
+  }
+  p {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: right;
+    line-height: 40px;
+    a {
+      color: #fff;
+      margin-right: 25px; // 增加右边距
+    }
+  }
 }
 </style>