车间看板。全屏控制。

src/router/index.ts

@@ -59,6 +59,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
   },
   {
+    path: "/workScreen",
+    component: () => import("@/views/screens/workScreen.vue"),
+    name: "workScreen",
+    meta: { hidden: true },
+  },
+  {
     path: "/users",
     component: () => import("@/views/sets/users.vue"),
     name: "users",

src/views/main/screenEntry.vue

@@ -17,11 +17,14 @@
 
 <script lang="ts" setup>
 import TopTitle from "@/components/TopTitle.vue";
+import { useFullscreen } from "@vueuse/core";
 
+const el = ref<HTMLElement>();
+const { isFullscreen, toggle, enter, exit } = useFullscreen(el);
 const screenData = ref([
   { name: "综合监控大屏", routeName: "mainScreen" },
   { name: "质量综合大屏", routeName: "qualityScreen" },
-  { name: "综合大屏", routeName: "totalScreen" },
+  { name: "总装车间看板", routeName: "workScreen" },
   { name: "综合大屏", routeName: "totalScreen" },
   { name: "测试大屏", routeName: "totalScreen" },
 ]);
@@ -29,6 +32,9 @@ const screenData = ref([
 const router = useRouter();
 const gotoScreen = (routeName: string) => {
   router.push({ name: routeName });
+  if (!isFullscreen.value) {
+    enter();
+  }
 };
 </script>
 

src/views/screens/headers/screenHeader.vue

@@ -12,6 +12,10 @@
 
 <script lang="ts" setup>
 import { Back } from "@element-plus/icons-vue";
+import { useFullscreen } from "@vueuse/core";
+
+const el = ref<HTMLElement>();
+const { isFullscreen, toggle, enter, exit } = useFullscreen(el);
 
 const props = defineProps({
   title: {
@@ -23,6 +27,7 @@ const props = defineProps({
 const router = useRouter();
 const back = () => {
   router.back();
+  exit();
 };
 </script>
 

src/views/screens/workScreen.vue

@@ -0,0 +1,111 @@
+<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-8 class="top-container-box top-left">
+            <component :is="qualityTOP01" moduleId="qualityTOP01" />
+          </dv-border-box-8>
+          <dv-border-box-12 class="top-container-box top-middle">
+            <component :is="qualityTOP02" moduleId="qualityTOP02" />
+          </dv-border-box-12>
+          <div class="top-container-box top-right">
+            <component :is="qualityTOP03" moduleId="qualityTOP03" />
+          </div>
+        </div>
+        <div class="vertical-space"></div>
+        <div class="bottom-container">
+          <dv-border-box-13 class="bottom-container-box bottom-left">
+            <!--            <component :is="qualityBottom01" moduleId="qualityBottom01" />-->
+          </dv-border-box-13>
+
+          <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: 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: 73%;
+  }
+
+  .bottom-right {
+    width: 27%;
+  }
+}
+</style>