内容修改

longyvfengyun

2023-07-06 a3c6e3a5177b15021dad5788688294b1d863717a

 src/views/home/index.vue

@@ -1,34 +1,45 @@
<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";
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 {isCollapse} = slideMenu();
const homeInfo = ref([]);
for(let i=1; i<10; i++) {
   homeInfo.value.push({
      name: "#"+i+"室",
      temp: 32,
      hum: 7,
      diffPre: 1
   });
}
const isShowMapPin = ref(true);

const homeContentDom = ref(null);
const cWidth = ref(0);
const cHeight = ref(0);
const dWidth = ref(1279);
const dHeight = ref(649);
const {
   isCollapse
} = slideMenu();

const setContainerSize = ()=>{
   cWidth.value = homeContentDom.value.offsetWidth;
   cHeight.value = homeContentDom.value.offsetHeight;
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);
});
@@ -47,64 +58,35 @@
</script>

<template>
   <flex-layout x-no-hidden>
      <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="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 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>

      </div>
   </flex-layout>
</template>

<style scoped>
.home-content {
   position: relative;
   height: 100%;
   background-image: url("./images/home.png");
   background-image: url("./images/home-plus.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>