258 lines
7.0 KiB
Vue
258 lines
7.0 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch, computed } from "vue";
|
|
import { AUTHPAGES } from "@/constant";
|
|
import { getAuth, getAllSysSidebar } from "@/apis/building";
|
|
import { getSideBar } from "@/apis/energy";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
import useUserInfoStore from "@/stores/useUserInfoStore";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useRoute } from "vue-router";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const { locale, t } = useI18n();
|
|
const store = useUserInfoStore();
|
|
const buildingStore = useBuildingStore();
|
|
const route = useRoute();
|
|
const openKeys = ref([]); // 追蹤當前打開的子菜單
|
|
const menu_array = ref([]);
|
|
const currentAuthCode = ref("");
|
|
|
|
const iniFroList = async (building_id) => {
|
|
const res = await getAuth(building_id);
|
|
|
|
store.updateAuthPage(
|
|
res.data.map((d) =>
|
|
AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
|
|
? {
|
|
...d,
|
|
...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
|
|
}
|
|
: d
|
|
)
|
|
);
|
|
};
|
|
|
|
const authPages = computed(() =>
|
|
store.auth_page.filter(({ showView }) => showView)
|
|
);
|
|
|
|
const open = ref(false);
|
|
const getSubMonitorPage = async (building_guid) => {
|
|
const res = await getAllSysSidebar(building_guid);
|
|
buildingStore.mainSubSys = res.data.history_Main_Systems;
|
|
menu_array.value = res.data.history_Main_Systems;
|
|
};
|
|
const getSubPage = async (system_type) => {
|
|
const res = await getSideBar(system_type);
|
|
menu_array.value = res.data;
|
|
};
|
|
const showDrawer = async (authCode) => {
|
|
if (authCode === "PF1") {
|
|
await getSubMonitorPage(buildingStore.selectedBuilding.building_guid);
|
|
} else if (authCode === "PF2" || authCode === "PF11") {
|
|
await getSubPage(authCode === "PF2" ? "Energy" : "Setting");
|
|
}
|
|
currentAuthCode.value = authCode;
|
|
open.value = true;
|
|
};
|
|
const onClose = () => {
|
|
open.value = false;
|
|
};
|
|
|
|
const handleOpenChange = (keys) => {
|
|
if (keys.length > 0) {
|
|
openKeys.value = [keys[keys.length - 1]]; // 只保留最後一個打開的子菜單
|
|
} else {
|
|
openKeys.value = [];
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => buildingStore.selectedBuilding,
|
|
(newVal) => {
|
|
if (newVal !== null) {
|
|
getSubMonitorPage(newVal.building_guid);
|
|
iniFroList(newVal.building_guid);
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<ul class="px-1 menu-box my-2">
|
|
<li class="flex flex-col items-center justify-center">
|
|
<router-link
|
|
:to="{
|
|
name:
|
|
buildingStore.selectedBuilding?.is_headquarter === true
|
|
? 'headquarters'
|
|
: 'dashboard',
|
|
}"
|
|
class="flex lg:flex-col justify-center items-center btn-group text-white"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'home']"
|
|
size="2x"
|
|
class="w-10 m-auto"
|
|
/>
|
|
<span>{{ $t("navbar.home") }}</span>
|
|
</router-link>
|
|
</li>
|
|
<li
|
|
v-for="page in authPages"
|
|
class="flex flex-col items-center justify-center"
|
|
:key="page.authCode"
|
|
>
|
|
<a
|
|
v-if="
|
|
page.authCode === 'PF1' ||
|
|
page.authCode === 'PF2' ||
|
|
page.authCode === 'PF11'
|
|
"
|
|
@click="showDrawer(page.authCode)"
|
|
:class="
|
|
twMerge(
|
|
'flex lg:flex-col justify-center items-center btn-group text-white cursor-pointer',
|
|
page.authCode === 'PF1' && route.fullPath.includes('/system')
|
|
? 'router-link-active router-link-exact-active'
|
|
: '',
|
|
page.authCode === 'PF2' &&
|
|
route.fullPath.includes('/energyManagement')
|
|
? 'router-link-active router-link-exact-active'
|
|
: '',
|
|
page.authCode === 'PF11' && route.fullPath.includes('/setting')
|
|
? 'router-link-active router-link-exact-active'
|
|
: ''
|
|
)
|
|
"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class="w-10 m-auto"
|
|
/>
|
|
<span>{{ $t(`navbar.${page.showView}`) }}</span>
|
|
</a>
|
|
<router-link
|
|
v-else
|
|
:to="`/` + page.showView"
|
|
type="link"
|
|
class="flex lg:flex-col justify-center items-center btn-group text-white"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class="w-10 m-auto"
|
|
/>
|
|
<span>{{ $t(`navbar.${page.showView}`) }}</span>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<a-drawer
|
|
:width="250"
|
|
placement="left"
|
|
:open="open"
|
|
:closable="false"
|
|
@close="onClose"
|
|
class="sub-drawer"
|
|
:maskStyle="{ opacity: 0 }"
|
|
:bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
|
|
>
|
|
<a-menu
|
|
mode="inline"
|
|
theme="dark"
|
|
class="text-lg bg-transparent"
|
|
:openKeys="openKeys"
|
|
@openChange="handleOpenChange"
|
|
>
|
|
<a-sub-menu
|
|
v-for="main in menu_array"
|
|
:key="main.main_system_tag"
|
|
:title="main.resource ? t(`navbar.${main.resource}`) : main.full_name"
|
|
v-if="menu_array.length > 0 && open"
|
|
>
|
|
<a-menu-item
|
|
v-for="sub in currentAuthCode === 'PF1'
|
|
? main.history_Sub_systems
|
|
: currentAuthCode === 'PF2'
|
|
? main.sub
|
|
: main.sub"
|
|
:key="sub.sub_system_tag + `_` + sub.type"
|
|
@click="() => onClose()"
|
|
>
|
|
<router-link
|
|
:to="{
|
|
name:
|
|
currentAuthCode === 'PF2'
|
|
? 'energyManagement'
|
|
: currentAuthCode === 'PF11'
|
|
? 'setting'
|
|
: 'sub_system',
|
|
params: {
|
|
main_system_id: main.main_system_tag,
|
|
sub_system_id: sub.sub_system_tag,
|
|
...(currentAuthCode === 'PF2' || currentAuthCode === 'PF11'
|
|
? { type: sub.type }
|
|
: { floor_id: 'main' }),
|
|
},
|
|
}"
|
|
>
|
|
{{ sub.resource ? $t(`navbar.${sub.resource}`): sub.full_name }}
|
|
</router-link>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</a-drawer>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
/**menu**/
|
|
.menu-box {
|
|
@apply flex flex-wrap lg:flex-row flex-col items-start lg:justify-center relative z-0 h-full w-60 lg:w-auto;
|
|
}
|
|
|
|
.menu-box .btn-group {
|
|
@apply bg-transparent lg:w-[95px] w-full mb-5 lg:mb-0;
|
|
}
|
|
|
|
.menu-box .btn-group span {
|
|
@apply text-2xl ms-2 lg:ms-0 lg:text-sm;
|
|
}
|
|
|
|
.menu-box > li {
|
|
@apply relative;
|
|
}
|
|
|
|
.menu-box > li:not(:last-child)::after {
|
|
@apply absolute top-5 bottom-0 left-20 right-0 lg:block hidden w-6 h-0.5 bg-[#93c0dc] z-0;
|
|
content: "";
|
|
}
|
|
|
|
.router-link-active.router-link-exact-active {
|
|
@apply text-[#93c0dc];
|
|
}
|
|
|
|
:deep(.ant-menu-submenu-selected) {
|
|
.ant-menu-submenu-title {
|
|
@apply text-info;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-menu-item-selected) {
|
|
@apply bg-transparent relative;
|
|
|
|
&::before {
|
|
@apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat saturate-200 z-10;
|
|
content: "";
|
|
background: url(@ASSET/img/chart-data-background03.svg) center center;
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
a {
|
|
color: #35ecec !important;
|
|
text-shadow: 0px 0px 1px #fff;
|
|
}
|
|
}
|
|
</style>
|