<script setup>
|
import {onMounted, onUnmounted, ref, watch} from "vue";
|
import MapPin from "@/components/MapPin.vue";
|
import slideMenu from "@/views/mainLayout/js/slideMenu";
|
import homeContentModule from "@/views/home/js/homeContentModule";
|
import homeInfoModule from "@/views/home/js/homeInfoModule";
|
import homeDetailModule from "@/views/home/js/homeDetailModule";
|
import HomeDetail from "@/views/home/components/homeDetail.vue";
|
import {ElMessage} from "element-plus";
|
|
const isShowMapPin = ref(true);
|
|
const {
|
isCollapse
|
} = slideMenu();
|
|
const {
|
homeContentDom,
|
cWidth, cHeight,
|
dWidth, dHeight,
|
setContainerSize
|
} = homeContentModule();
|
|
const {homeInfo} = homeInfoModule();
|
const {getHomeDetailInfo} = homeDetailModule();
|
const homeItemDialog = ref(false);
|
const homeDetailInfo = ref({});
|
const handleClick = (info)=>{
|
let rs = getHomeDetailInfo(info.num);
|
if(rs.code === 1) {
|
homeDetailInfo.value = rs.data;
|
homeItemDialog.value = true;
|
}else {
|
ElMessage(rs.msg);
|
}
|
|
}
|
|
watch(isCollapse, ()=>{
|
isShowMapPin.value = false;
|
setTimeout(()=>{
|
isShowMapPin.value = true;
|
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
|
v-if="isShowMapPin"
|
v-for="(item, index) in homeInfo" :key="'key'+index"
|
:visible="item.pos.visible"
|
:name="item.name"
|
:c-width="cWidth" :c-height="cHeight"
|
:d-width="dWidth" :d-height="dHeight"
|
:x="item.pos.x" :y="item.pos.y"
|
:info="item.info" @click="handleClick"></map-pin>
|
<el-dialog
|
v-model="homeItemDialog"
|
title="机房详情"
|
width="auto"
|
class="center-dialog"
|
modal-class="high-level-dialog"
|
align-center>
|
<home-detail :info="homeDetailInfo"></home-detail>
|
</el-dialog>
|
</div>
|
|
</template>
|
|
<style scoped>
|
.home-content {
|
position: relative;
|
height: 100%;
|
background-image: url("./images/home-plus.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
</style>
|
