139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<script setup>
|
|
import { computed, inject, watch } from "vue"
|
|
import useSelectedFloor from "@/hooks/useSelectedFloor"
|
|
|
|
const { data } = inject("system_deviceList")
|
|
|
|
const { getCurrentInfoModalData } = inject("system_selectedDevice")
|
|
|
|
const { selectedFloor } = useSelectedFloor()
|
|
|
|
const showData = computed(() => selectedFloor.value?.key === 'main' ? data.value : data.value.filter(({ floor_guid }) => floor_guid === selectedFloor.value?.key) || [])
|
|
|
|
watch(selectedFloor, (newValue) => {
|
|
console.log(newValue)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <InfoModal :data="currentInfoModalData" /> -->
|
|
|
|
<template v-if="showData.length > 0">
|
|
<div class="equipment-show" v-for="d in showData" :key="d.full_name">
|
|
<template v-if="d.device_list.length > 0">
|
|
<p class="title">{{ d.full_name }}</p>
|
|
<div class="grid grid-cols-3 gap-5">
|
|
<div class="col-auto relative" v-for="device in d.device_list" :key="device.device_guid">
|
|
<div class="item">
|
|
<div class="left w-4/5">
|
|
<div class="sec02">
|
|
<img v-if="device.device_image_url" :src="device.device_image_url" alt="" class="w-8 h-8">
|
|
<span class="w-8 h-8" v-else></span>
|
|
<span>{{ device.full_name }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<div class="sec03">
|
|
<span></span>
|
|
<span>狀態：</span>
|
|
<span></span>
|
|
</div>
|
|
<button class="btn-text border-0 "
|
|
@click.stop.prevent="(e) => getCurrentInfoModalData(e, { left: e.clientX, top: e.clientY }, device)">詳細資料</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
/*設備顯示*/
|
|
.title {
|
|
@apply text-lg text-white relative inline-block mb-5 after:absolute after:-bottom-2 after:left-1/4 after:w-4/5 after:h-[1px] after:bg-info;
|
|
}
|
|
|
|
.item {
|
|
@apply flex items-center border border-success py-4 px-5 relative mb-5 after:absolute after:right-0 after:top-3 after:w-6 after:h-10 after:bg-[url(/src/assets/img/equipment/state-background.svg)] after:z-10;
|
|
;
|
|
|
|
}
|
|
|
|
.item .btn-text {
|
|
@apply hover:bg-transparent focus-within:bg-transparent !important;
|
|
}
|
|
|
|
.equipment-show .item .sec01 span:nth-child(1) {
|
|
font-size: 1rem;
|
|
position: relative;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.equipment-show .item .sec01 span:nth-child(1)::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: -47px;
|
|
display: block;
|
|
transform: translateY(50%);
|
|
width: 45px;
|
|
height: 1px;
|
|
background-color: #35eded;
|
|
border-radius: 25px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.equipment-show .item .sec01 span:nth-child(2) {
|
|
font-size: .6rem;
|
|
}
|
|
|
|
.equipment-show .item .sec02 {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.equipment-show .item .sec02::after {
|
|
content: "";
|
|
background: url(/src/assets/img/equipment/state-title.svg) center center;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -10px;
|
|
height: 25px;
|
|
width: 105px;
|
|
background-repeat: no-repeat;
|
|
z-index: 1;
|
|
}
|
|
|
|
.equipment-show .item .sec02 span:nth-child(1) {
|
|
background-color: #31afdf;
|
|
border: 3px solid #fff;
|
|
display: block;
|
|
border-radius: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.equipment-show .item .sec02 span:nth-child(2) {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.equipment-show .item .sec03 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.equipment-show .item .sec03 span:nth-child(1) {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 100%;
|
|
display: block;
|
|
margin-right: 10px;
|
|
}
|
|
</style> |