81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { twMerge } from "tailwind-merge";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
const store = useBuildingStore();
|
|
const router = useRouter();
|
|
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
|
|
const navigateToSubSystem = (mainSystemId, subSystemId) => {
|
|
router.push({
|
|
name: "sub_system",
|
|
params: {
|
|
main_system_id: mainSystemId,
|
|
sub_system_id: subSystemId,
|
|
floor_id: "main",
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap -mx-1 h-[21rem] overflow-y-scroll">
|
|
<div
|
|
v-for="(item, index) in store.subSys"
|
|
:key="index"
|
|
:class="
|
|
twMerge(
|
|
'w-full sm:w-1/2 relative my-2 ',
|
|
item.sub_system_tag
|
|
? 'saturate-200 cursor-pointer text-base text-info'
|
|
: 'grayscale opacity-70 cursor-not-allowed text-sm'
|
|
)
|
|
"
|
|
@click="navigateToSubSystem(item.main_system_tag, item.sub_system_tag)"
|
|
>
|
|
<img
|
|
v-if="item.isError"
|
|
src="@ASSET/img/equipment-item-background05.svg"
|
|
/>
|
|
<img v-else src="@ASSET/img/equipment-item-background04.svg" />
|
|
|
|
<div class="equipment-item">
|
|
<div class="w-16">
|
|
<img
|
|
v-if="item.device_image_url"
|
|
class="w-7 m-auto"
|
|
:src="`${FILE_BASEURL}/${item.device_image_url}`"
|
|
/>
|
|
<FontAwesomeIcon
|
|
v-else
|
|
class="text-2xl mt-1 m-auto"
|
|
:icon="['fas', 'tv']"
|
|
></FontAwesomeIcon>
|
|
</div>
|
|
<div class="icon-text">
|
|
<div class="">
|
|
{{ item.full_name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.equipment-item {
|
|
@apply flex items-center absolute top-1/2 w-[90%] left-0 right-0 m-auto text-center -translate-y-1/2;
|
|
}
|
|
.icon-text {
|
|
@apply w-52 text-start p-3 relative z-20;
|
|
}
|
|
.icon-text:before {
|
|
@apply absolute -left-3 top-0 bottom-0 m-auto h-10 w-5 z-10;
|
|
content: "";
|
|
background-image: url(@ASSET/img/equipment-item-background.svg);
|
|
background-position: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|