内容修改

longyvfengyun

2023-06-20 acc0e16e18a96a72a951fb11270dbb4bf465b35f

内容修改

 src/components/CardBox.vue

@@ -17,6 +17,11 @@
</template>

<style lang="less" scoped>
.card-box-header {
    background-color: #0741ab;
    padding: 4px 16px;
    text-align: center;
}
.card-box-wrapper {
    display: flex;
    flex-direction: column;

 src/views/home/index.vue

@@ -1,31 +1,26 @@
<script setup>
import FlexLayout from "@/components/FlexLayout.vue";
import CardBox from "@/components/CardBox.vue";
import {onMounted, onUnmounted, ref, watch} from "vue";
import {onMounted, onUnmounted, 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 {Setting} from "@element-plus/icons-vue";

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 {
    isCollapse
} = slideMenu();

const homeContentDom = ref(null);
const cWidth = ref(0);
const cHeight = ref(0);
const dWidth = ref(1279);
const dHeight = ref(649);
const {
    homeContentDom,
    cWidth, cHeight,
    dWidth, dHeight,
    setContainerSize
} = homeContentModule();

const setContainerSize = ()=>{
    cWidth.value = homeContentDom.value.offsetWidth;
    cHeight.value = homeContentDom.value.offsetHeight;
}
const {homeInfo} = homeInfoModule();

homeInfo[0].hum = 123;

watch(isCollapse, ()=>{
    setTimeout(()=>{
@@ -49,43 +44,13 @@
<template>
    <div class="home-content" ref="homeContentDom">
        <map-pin
            name="数据机房"
            v-for="(item, index) in homeInfo" :key="'key'+index"
            :name="item.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>
            :x="item.pos.x" :y="item.pos.y"></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>
@@ -97,16 +62,5 @@
    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>

 src/views/home/js/homeContentModule.js

New file
@@ -0,0 +1,24 @@
import {ref} from "vue";

/**
 * 机房容器信息
 */
const homeContentModule = ()=> {
  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;
  }

  return {homeContentDom, cWidth, cHeight, dWidth, dHeight, setContainerSize};
}

export default homeContentModule;

 src/views/home/js/homeInfoModule.js

New file
@@ -0,0 +1,58 @@
import {reactive} from "vue";

const homeInfoModule = ()=>{
  const homeInfo = reactive([
    {
      name: "数据机房",
      temp: 32,
      hum: 7,
      diffPre: 1,
      pos: {
        x: 446,
        y: 355
      }
    },
    {
      name: "培养间",
      temp: 32,
      hum: 7,
      diffPre: 1,
      pos: {
        x: 555,
        y: 385
      }
    },
    {
      name: "测序间",
      temp: 32,
      hum: 7,
      diffPre: 1,
      pos: {
        x: 765,
        y: 450
      }
    },
    {
      name: "质控室",
      temp: 32,
      hum: 7,
      diffPre: 1,
      pos: {
        x: 910,
        y: 495
      }
    },
    {
      name: "文库扩展",
      temp: 32,
      hum: 7,
      diffPre: 1,
      pos: {
        x: 1105,
        y: 530
      }
    }
  ]);
  return {homeInfo};
};
export default homeInfoModule;

 src/views/mainLayout/js/slideMenu.js

@@ -1,6 +1,9 @@
import usePageMenuStore from "@/store/usePageMenuStore";
import {computed, ref} from "vue";

/**
 * 左侧菜单信息
 */
const slideMenu = ()=>{
  const menuActive = ref("");
  const menuData = ref([]);