152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import useSearchParam from "@/hooks/useSearchParam";
|
|
const { searchParams, changeParams } = useSearchParam();
|
|
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
},
|
|
});
|
|
|
|
const currentData = computed(() => {
|
|
return props.data[searchParams.value.floor_id] || [];
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div
|
|
v-for="device in currentData"
|
|
:key="device.id"
|
|
class="col-auto relative"
|
|
>
|
|
<div class="item h-full cursor-pointer">
|
|
<div class="left w-full h-full flex flex-wrap justify-center">
|
|
<div class="sec02 w-full">
|
|
<img
|
|
v-if="device[2]?.icon"
|
|
:src="`${device[2]?.icon}`"
|
|
:alt="device[2]?.full_name"
|
|
class=""
|
|
/>
|
|
<span v-else></span>
|
|
<span>{{ device[2]?.full_name }}</span>
|
|
</div>
|
|
<div class="flex justify-between w-full self-end">
|
|
<div class="sec03">
|
|
<span
|
|
class="w-5 h-5 rounded-full"
|
|
:style="{
|
|
backgroundColor:
|
|
device[2]?.bgColor,
|
|
}"
|
|
></span>
|
|
<span class="mx-2">{{ $t("system.status") }}:</span>
|
|
<span>{{ device[2]?.state }}</span>
|
|
</div>
|
|
<!-- <button
|
|
class="btn-text border-0"
|
|
@click.prevent="
|
|
(e) => {
|
|
if (device.full_name === 'SmartSocket-AA001') {
|
|
openDialog();
|
|
} else {
|
|
getCurrentInfoModalData(
|
|
e,
|
|
{ left: e.clientX, top: e.clientY },
|
|
device
|
|
);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
{{ $t("system.details") }}
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
/*設備顯示*/
|
|
|
|
.item {
|
|
@apply flex items-center border border-success rounded shadow-emerald-600 shadow-inner 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;
|
|
}
|
|
|
|
.item .sec01 span:nth-child(1) {
|
|
font-size: 1rem;
|
|
position: relative;
|
|
margin-right: 50px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.item .sec01 span:nth-child(2) {
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.item .sec02 {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.item .sec02::after {
|
|
content: "";
|
|
background: url(/src/assets/img/equipment/state-title.svg) center center;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -18px;
|
|
height: 25px;
|
|
width: 105px;
|
|
background-repeat: no-repeat;
|
|
z-index: 1;
|
|
}
|
|
|
|
.item .sec02 img {
|
|
margin-right: 10px;
|
|
width: 1.5rem !important;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.item .sec02 span:nth-child(1) {
|
|
background-color: #31afdf;
|
|
border: 3px solid #fff;
|
|
display: block;
|
|
border-radius: 5px;
|
|
margin-right: 10px;
|
|
width: 1.5rem !important;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.item .sec02 span:nth-child(2) {
|
|
font-size: 1.2rem;
|
|
width: calc(100% - 2rem);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.item .sec03 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|