147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch, computed } from "vue";
|
|
import { AUTHPAGES } from "@/constant";
|
|
import { getAuth, getAllSysSidebar } from "@/apis/building";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
import useUserInfoStore from "@/stores/useUserInfoStore";
|
|
import { useI18n } from "vue-i18n";
|
|
const { locale } = useI18n();
|
|
const store = useUserInfoStore();
|
|
|
|
const buildingStore = useBuildingStore();
|
|
|
|
const iniFroList = async () => {
|
|
const res = await getAuth(locale.value);
|
|
|
|
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) => {
|
|
const res = await getAllSysSidebar();
|
|
buildingStore.mainSubSys = res.data.history_Main_Systems;
|
|
};
|
|
const showDrawer = () => {
|
|
getSubMonitorPage();
|
|
open.value = true;
|
|
};
|
|
const onClose = () => {
|
|
open.value = false;
|
|
};
|
|
|
|
const navigateToSub = (sub) => {
|
|
// buildingStore.selectedSystem = sub;
|
|
onClose()
|
|
// console.log("navigateToSub", sub);
|
|
// let pageAct = JSON.parse(sessionStorage.getItem("pageAct"));
|
|
// pageAct = {
|
|
// ...pageAct,
|
|
// sysMainTag: sub.main_system_tag,
|
|
// sysSubTag: sub.sub_system_tag,
|
|
// sysSubName: sub.full_name,
|
|
// };
|
|
// sessionStorage.setItem("lastPage", "systemMonitor");
|
|
// sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
|
|
// window.location.href = "/file/index.html";
|
|
};
|
|
|
|
watch(
|
|
() => buildingStore.selectedBuilding,
|
|
(newVal) => {
|
|
if (newVal !== null) {
|
|
getSubMonitorPage(newVal.building_tag);
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(locale, () => {
|
|
iniFroList();
|
|
});
|
|
|
|
onMounted(() => {
|
|
iniFroList();
|
|
});
|
|
</script>
|
|
<template>
|
|
<ul class="px-1 menu-box my-2">
|
|
<li class="flex flex-col items-center justify-center">
|
|
<router-link
|
|
:to="{ name: 'dashboard' }"
|
|
class="flex flex-col justify-center items-center btn-group text-white"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'home']"
|
|
size="2x"
|
|
class=" w-10 m-auto"
|
|
/>
|
|
{{ $t("home") }}
|
|
</router-link>
|
|
</li>
|
|
<li
|
|
v-for="page in authPages"
|
|
class="flex flex-col items-center justify-center"
|
|
>
|
|
<a
|
|
v-if="page.authCode === 'PF1'"
|
|
@click="showDrawer"
|
|
class="flex flex-col justify-center items-center btn-group text-white cursor-pointer"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class="w-10 m-auto"
|
|
/>
|
|
{{ page.subName }}
|
|
</a>
|
|
<router-link
|
|
v-else
|
|
:to="page.navigate"
|
|
type="link"
|
|
class="flex flex-col justify-center items-center btn-group text-white"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class=" w-10 m-auto"
|
|
/>
|
|
{{ page.subName }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
<a-drawer :width="200" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
|
|
:maskStyle="{ opacity: 0.5 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
|
|
<ul>
|
|
<li v-for="sub in buildingStore.subSys" :key="sub.sub_system_tag"
|
|
class="group text-xl text-center py-3 hover:bg-black" @click="() => navigateToSub(sub)">
|
|
|
|
|
|
<router-link
|
|
:to="{ name: 'sub_system', params: { main_system_id: sub.main_system_tag, sub_system_id: sub.sub_system_tag }, }"
|
|
type="link" class="group-hover:text-info">
|
|
|
|
{{ sub.full_name }}
|
|
</router-link>
|
|
|
|
</li>
|
|
</ul>
|
|
</a-drawer>
|
|
</template>
|
|
<style lang="css" scoped>
|
|
.router-link-active.router-link-exact-active {
|
|
color: #93c0dc;
|
|
}
|
|
</style>
|