|
@@ -0,0 +1,90 @@
|
|
|
+<template>
|
|
|
+ <div class="screen-window">
|
|
|
+ <dv-full-screen-container>
|
|
|
+ <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"></div>
|
|
|
+ <div class="top-container-box top-right"></div>
|
|
|
+ </div>
|
|
|
+ <div class="vertical-space"></div>
|
|
|
+ <div class="bottom-container">
|
|
|
+ <div class="bottom-container-box bottom-left"></div>
|
|
|
+
|
|
|
+ <div class="bottom-container-box bottom-right"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-full-screen-container>
|
|
|
+ <SelectComponents />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
|
|
|
+import { getComponetnByName } from "@/views/screens/configs/components";
|
|
|
+import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
|
|
|
+import { useCommonStore } from "@/store";
|
|
|
+
|
|
|
+const commonS = useCommonStore();
|
|
|
+
|
|
|
+const qualityTOP01 = computed(() => {
|
|
|
+ return getComponetnByName(commonS.qualityTOP01);
|
|
|
+});
|
|
|
+</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: 27%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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%;
|
|
|
+ border: 1px solid yellow;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|