<script setup>
|
import FlexLayout from "@/components/FlexLayout.vue";
|
import CardBox from "@/components/CardBox.vue";
|
import {onMounted, onUnmounted, ref, watch} from "vue";
|
import MapPin from "@/components/MapPin.vue";
|
import slideMenu from "@/views/mainLayout/js/slideMenu";
|
|
const {isCollapse} = slideMenu();
|
const homeInfo = ref([]);
|
for(let i=1; i<10; i++) {
|
homeInfo.value.push({
|
name: "#"+i+"室",
|
temp: 32,
|
hum: 7,
|
diffPre: 1
|
});
|
}
|
|
const homeContentDom = ref(null);
|
const cWidth = ref(0);
|
const cHeight = ref(0);
|
const dWidth = ref(1279);
|
const dHeight = ref(649);
|
|
const setContainerSize = ()=>{
|
cWidth.value = homeContentDom.value.offsetWidth;
|
cHeight.value = homeContentDom.value.offsetHeight;
|
}
|
|
watch(isCollapse, ()=>{
|
setTimeout(()=>{
|
setContainerSize();
|
}, 500);
|
});
|
|
onMounted(()=>{
|
setContainerSize();
|
// 监听windows窗口的缩放,绑定resize事件
|
window.addEventListener("resize", setContainerSize);
|
});
|
|
|
onUnmounted(()=>{
|
// 销毁resize事件
|
window.removeEventListener("resize", setContainerSize);
|
});
|
</script>
|
|
<template>
|
<div class="home-content" ref="homeContentDom">
|
<map-pin
|
name="数据机房"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="0" :y="0"></map-pin>
|
<map-pin
|
name="数据机房"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="446" :y="355"></map-pin>
|
<map-pin
|
name="培养间"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="555" :y="385"></map-pin>
|
<map-pin
|
name="测序间"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="765" :y="450"></map-pin>
|
<div class="card-box-list">
|
<div
|
class="card-box-item"
|
v-for="(item, index) in homeInfo" :key="'key'+index">
|
<card-box>
|
<div class="home-info-list">
|
<div class="home-info-item">
|
{{ item.name }}温度：{{ item.temp }}
|
</div>
|
<div class="home-info-item">
|
{{ item.name }}湿度：{{ item.hum }}
|
</div>
|
<div class="home-info-item">
|
{{ item.name }}压差：{{ item.diffPre }}
|
</div>
|
</div>
|
</card-box>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.home-content {
|
position: relative;
|
height: 100%;
|
background-image: url("./images/home.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.card-box-list {
|
text-align: center;
|
.card-box-item {
|
display: inline-block;
|
margin-left: 16px;
|
}
|
}
|
|
.home-info-list {
|
padding: 8px;
|
}
|
</style>
|
