127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template>
|
|
<div class="footer flx-align-center pl10">
|
|
<el-dropdown>
|
|
<!-- <span class="el-dropdown-link">
|
|
{{ title }}
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span> -->
|
|
<!-- <el-button dictType="primary"> -->
|
|
<div class="change_mode">
|
|
{{ title }}
|
|
<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>
|
|
<!-- </el-button> -->
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handelOpen('模拟式')"
|
|
>模拟式模块</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="handelOpen('数字式')"
|
|
>数字式模块</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="handelOpen('比对式')"
|
|
>比对式模块</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>
|
|
import { ref, reactive, computed, onMounted, watch } from "vue";
|
|
import { useAuthStore } from "@/stores/modules/auth";
|
|
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
|
|
import { useRouter } from "vue-router";
|
|
const title = ref("模拟式模块");
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const modeStore = useModeStore();
|
|
|
|
onMounted(() => {
|
|
switch (modeStore.currentMode) {
|
|
case '模拟式':
|
|
title.value = '模拟式模块';
|
|
break;
|
|
case '数字式':
|
|
title.value = '数字式模块';
|
|
break;
|
|
case '比对式':
|
|
title.value = '比对式模块';
|
|
break;
|
|
default:
|
|
title.value = '模拟式模块';
|
|
}
|
|
});
|
|
|
|
const handelOpen = async (item: string) => {
|
|
await authStore.setShowMenu();
|
|
modeStore.setCurrentMode(item); // 将模式code存入 store
|
|
|
|
if (router.currentRoute.value.path === '/home/index') {
|
|
// 强制刷新页面
|
|
window.location.reload();
|
|
} else {
|
|
router.push({ path: '/home/index' });
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "./index.scss";
|
|
.footer {
|
|
position: relative;
|
|
background-color: var(--el-color-primary);
|
|
// .el-button:hover {
|
|
// background-color: var(--el-color-primary) !important;
|
|
// border: none !important;
|
|
// outline: none !important;
|
|
// }
|
|
.change_mode {
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
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: center;
|
|
line-height: 40px;
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|