SynthesisManagement/src/views/screens/qualityScreen.vue

<template>
  <div class="screen-window">
    <dv-full-screen-container id="dv-full-screen">
      <ScreenHeader title="质量综合大屏" />
      <div class="screen-content" style="flex-direction: column">
        <div class="top-container">
          <dv-border-box-3 class="top-container-box top-left">
            <component :is="qualityTOP01" moduleId="qualityTOP01" />
          </dv-border-box-3>
          <!-- <div class="top-container-box top-middle">
            <component :is="qualityTOP02" moduleId="qualityTOP02" />
          </div> -->
          <dv-border-box-3 class="top-container-box top-right">
            <component :is="qualityTOP03" moduleId="qualityTOP03" />
          </dv-border-box-3>
        </div>
        <div class="vertical-space"></div>
        <div class="bottom-container">
          <dv-border-box-8 class="bottom-container-box bottom-left">
            <component :is="qualityBottom01" moduleId="qualityBottom01" />
          </dv-border-box-8>

          <div class="bottom-container-box bottom-right">
            <component :is="qualityBottom02" moduleId="qualityBottom02" />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
    <SelectComponents />
  </div>
</template>

<script lang="ts" setup>
import { getComponetnByName } from "@/views/screens/configs/components";
import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
import { useCommonStore } from "@/store";
import ScreenHeader from "@/views/screens/headers/screenHeader.vue";

const commonS = useCommonStore();

const qualityTOP01 = computed(() => {
  return getComponetnByName(commonS.qualityTOP01);
});
const qualityTOP02 = computed(() => {
  return getComponetnByName(commonS.qualityTOP02);
});

const qualityTOP03 = computed(() => {
  return getComponetnByName(commonS.qualityTOP03);
});
const qualityBottom01 = computed(() => {
  return getComponetnByName(commonS.qualityBottom01);
});
const qualityBottom02 = computed(() => {
  return getComponetnByName(commonS.qualityBottom02);
});
</script>

<style lang="scss" scoped>
.top-container {
  height: 45%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .top-container-box {
    height: 100%;
    //border: 1px solid yellow;
    padding: 25px;
  }

  .top-left {
    width: 73%;
  }

  // .top-middle {
  //   width: 46%;
  // }

  .top-right {
    width: 27%;
  }
}

.vertical-space {
  height: 15px;
  width: 100%;
}

.bottom-container {
  height: calc(55% - 15px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .bottom-container-box {
    height: 100%;
    padding: 25px;
    //border: 1px solid yellow;
  }

  .bottom-left {
    width: 50%;
  }

  .bottom-right {
    width: 50%;
  }
}
</style>