From 98dd4428af81c84aad9ae1ef4a854357e9433490 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Tue, 23 Jan 2024 16:32:08 +0800
Subject: [PATCH] 1

---
 src/pages/3D.vue | 240 +++++++++++++++++++++++++++++++----------------
 1 file changed, 159 insertions(+), 81 deletions(-)

diff --git a/src/pages/3D.vue b/src/pages/3D.vue
index b5658f6..19a5a04 100644
--- a/src/pages/3D.vue
+++ b/src/pages/3D.vue
@@ -2,7 +2,7 @@
 <script setup>
 import { useSettings } from '../store/settings';
 import { useWsStore } from "../store";
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import Icon from '../assets/svg/IconStatus.vue';
 import { eqMap, statusMap, initState } from './eqMaps'
 
@@ -41,7 +41,7 @@ store.$subscribe((mutation, state) => {
 const part3d = ref(null);
 function changeScale(elm, width, height) {
   const xScale = width / 1920;
-  const yScale = height / 1080;
+  const yScale = height / 900;
   const style = {
     transform: `scale(${xScale}, ${yScale})`,
     transformOrigin: "top left",
@@ -49,6 +49,11 @@ function changeScale(elm, width, height) {
   elm.style.transform = style.transform;
   elm.style.transformOrigin = style.transformOrigin;
 }
+onMounted(() => {
+  if (document.fullscreenElement && part3d.value) {
+    changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
+  }
+})
 watch(() => settings.fullscreen, val => {
   if (val) {
     // 全屏状态下
@@ -57,16 +62,15 @@ watch(() => settings.fullscreen, val => {
     }
   } else {
     if (part3d.value) {
-      // reset scale
-      changeScale(part3d.value, 1920, 1080)
+      changeScale(part3d.value, 1920, 900)
     }
   }
 }, { immediate: true })
 </script>
 
 <template>
-  <div class="triple-page" ref="part3d" :class="['line-' + line]">d
-    <div class="info-1" v-if="eqStatus && line == '1'">
+  <div class="triple-page" ref="part3d" :class="['line-' + line]">
+    <div class="absolute-full info-1" v-if="eqStatus && line == '1'">
       <div class="info">
         <h1>
           <Icon :color="status['M7上片'] == 'error' ? '#ff3737' : status['M7上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M7上片
@@ -104,7 +108,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-2" v-if="eqStatus && line == '2'">
+    <div class="absolute-full info-2" v-if="eqStatus && line == '2'">
       <div class="info">
         <h1>
           <Icon :color="status['Z7钻孔机'] == 'error' ? '#ff3737' : status['Z7钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -184,7 +188,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-3" v-if="eqStatus && line == '3'">
+    <div class="absolute-full info-3" v-if="eqStatus && line == '3'">
       <div class="info">
         <h1>
           <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -192,7 +196,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-4" v-if="eqStatus && line == '4'">
+    <div class="absolute-full info-4" v-if="eqStatus && line == '4'">
       <div class="info">
         <h1>
           <Icon :color="status['B2清洗机'] == 'error' ? '#ff3737' : status['B2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -211,7 +215,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-5" v-if="eqStatus && line == '5'">
+    <div class="absolute-full info-5" v-if="eqStatus && line == '5'">
       <div class="info">
         <h1>
           <Icon :color="status['M5上片'] == 'error' ? '#ff3737' : status['M5上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -269,7 +273,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-6" v-if="eqStatus && line == '6'">
+    <div class="absolute-full info-6" v-if="eqStatus && line == '6'">
       <div class="info">
         <h1>
           <Icon :color="status['Z5钻孔机'] == 'error' ? '#ff3737' : status['Z5钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -347,7 +351,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-7" v-if="eqStatus && line == '7'">
+    <div class="absolute-full info-7" v-if="eqStatus && line == '7'">
       <div class="info">
         <h1>
           <Icon :color="status['S5后储片台'] == 'error' ? '#ff3737' : status['S5后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -393,7 +397,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-8" v-if="eqStatus && line == '8'">
+    <div class="absolute-full info-8" v-if="eqStatus && line == '8'">
       <div class="info">
         <h1>
           <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -418,7 +422,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-9" v-if="eqStatus && line == '9'">
+    <div class="absolute-full info-9" v-if="eqStatus && line == '9'">
       <div class="info">
         <h1>
           <Icon :color="status['M2上片'] == 'error' ? '#ff3737' : status['M2上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M2上片
@@ -456,7 +460,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-10" v-if="eqStatus && line == '10'">
+    <div class="absolute-full info-10" v-if="eqStatus && line == '10'">
       <!-- <div class="info"><h1>M2清洗机</h1></div>
     <div class="info"><h1>M1清洗机</h1></div> -->
       <div class="info">
@@ -512,7 +516,7 @@ watch(() => settings.fullscreen, val => {
         <span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span>
       </div>
     </div>
-    <div class="info-11" v-if="eqStatus && line == '11'">
+    <div class="absolute-full info-11" v-if="eqStatus && line == '11'">
       <div class="info">
         <h1>
           <Icon :color="status['S7后储片台'] == 'error' ? '#ff3737' : status['S7后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -546,7 +550,7 @@ watch(() => settings.fullscreen, val => {
         </h1>
       </div>
     </div>
-    <div class="info-12" v-if="eqStatus && line == '12'">
+    <div class="absolute-full info-12" v-if="eqStatus && line == '12'">
       <div class="info">
         <h1>
           <Icon :color="status['B3前储片台'] == 'error' ? '#ff3737' : status['B3前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@@ -580,7 +584,7 @@ watch(() => settings.fullscreen, val => {
   /* background: #ccc1; */
   background-size: 1920px 1080px;
   /* background-size: 100% 100%; */
-  background-position: 0 -80px;
+  background-position: 0 -100px;
   background-repeat: no-repeat;
   /* flex: 1;
   position: relative; */
@@ -616,95 +620,145 @@ watch(() => settings.fullscreen, val => {
   gap: 8px;
 }
 
+.absolute-full {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  background: #cccc;
+  width: 720px;
+  height: 100%;
+  transform: translateX(-58%);
+}
+
+:fullscreen .absolute-full {
+  transform: translateX(-80%);
+}
+
 .info-1 .info:nth-child(1) {
-  left: 490px;
-  bottom: 250px;
+  /* left: 490px;
+  bottom: 250px; */
+  top: 720px;
+  left: 0;
 }
 
 .info-1 .info:nth-child(2) {
-  left: 790px;
-  bottom: 210px;
+  /* left: 790px;
+  bottom: 210px; */
+  top: 780px;
+  left: 320px;
 }
 
 .info-1 .info:nth-child(3) {
-  left: 660px;
+  /* left: 660px;
+  top: 480px; */
   top: 480px;
+  left: 90px;
 }
 
 .info-1 .info:nth-child(4) {
-  left: 910px;
-  top: 510px;
+  /* left: 910px;
+  top: 510px; */
+  top: 480px;
+  left: 320px;
 }
 
 .info-1 .info:nth-child(5) {
-  left: 880px;
-  top: 220px;
+  /* left: 880px;
+  top: 220px; */
+  top: 180px;
+  left: 220px;
 }
 
 .info-1 .info:nth-child(6) {
-  left: 1100px;
-  top: 260px;
+  /* left: 1100px;
+  top: 260px; */
+  top: 180px;
+  left: 520px;
 }
 
 /* info-2  */
 .info-2 .info:nth-child(1) {
-  left: 580px;
-  bottom: 200px;
+  /* left: 580px;
+  bottom: 200px; */
+  top: 720px;
+  left: 32px;
 }
 
 .info-2 .info:nth-child(2) {
-  left: 940px;
-  bottom: 200px;
+  /* left: 940px;
+  bottom: 200px; */
+  top: 730px;
+  left: 380px;
 }
 
 .info-2 .info:nth-child(3) {
-  left: 640px;
-  bottom: 360px;
+  /* left: 640px;
+  bottom: 360px; */
+  top: 500px;
+  left: 120px;
 }
 
 .info-2 .info:nth-child(4) {
-  left: 940px;
-  bottom: 360px;
+  /* left: 940px;
+  bottom: 360px; */
+  top: 500px;
+  left: 390px;
 }
 
 .info-2 .info:nth-child(5) {
-  left: 660px;
-  bottom: 580px;
+  /* left: 660px;
+  bottom: 580px; */
+  top: 390px;
+  left: 120px;
 }
 
 .info-2 .info:nth-child(6) {
-  left: 1060px;
-  bottom: 520px;
+  /* left: 1060px;
+  bottom: 520px; */
+  top: 400px;
+  left: 500px;
 }
 
 .info-2 .info:nth-child(7) {
-  left: 720px;
-  top: 190px;
+  /* left: 720px;
+  top: 190px; */
+  top: 220px;
+  left: 120px;
 }
 
 .info-2 .info:nth-child(8) {
-  left: 1100px;
-  top: 260px;
+  /* left: 1100px;
+  top: 260px; */
+  top: 270px;
+  left: 520px;
 }
 
 .info-2 .info:nth-child(9) {
-  left: 800px;
-  top: 120px;
+  /* left: 800px;
+  top: 120px; */
+  top: 90px;
+  left: 220px;
 }
 
 .info-2 .info:nth-child(10) {
-  left: 1100px;
-  top: 144px;
+  /* left: 1100px;
+  top: 144px; */
+  top: 110px;
+  left: 520px;
 }
 
 .info-2 .info:nth-child(11) {
-  left: 800px;
-  top: 10px;
+  /* left: 800px;
+  top: 10px; */
+  top: 0;
+  left: 330px;
 }
 
 .info-2 .info:nth-child(12) {
-  left: 1100px;
-  top: 20px;
+  /* left: 1100px;
+  top: 20px; */
+  top: 0;
+  left: 520px;
 }
 
 /* info 3  */
@@ -715,29 +769,35 @@ watch(() => settings.fullscreen, val => {
 
 /* info 4  */
 .info-4 .info:nth-child(1) {
-  left: 580px;
-  bottom: 200px;
+  /* left: 580px;
+  bottom: 200px; */
+  top: 600px;
+  left: 200px;
 }
 
 .info-4 .info:nth-child(2) {
-  left: 800px;
-  top: 100px;
+  /* left: 800px;
+  top: 100px; */
+  top: 200px;
+  left: 200px;
 }
 
 .info-4 .info:nth-child(3) {
-  left: 1240px;
-  top: 40px;
+  /* left: 1240px;
+  top: 40px; */
+  top: 10px;
+  left: 500px;
 }
 
 /* info 5  */
 .info-5 .info:nth-child(1) {
-  left: 490px;
-  bottom: 300px;
+  /* left: 490px;
+  bottom: 300px; */
 }
 
 .info-5 .info:nth-child(2) {
-  left: 740px;
-  bottom: 280px;
+  /* left: 740px;
+  bottom: 280px; */
 }
 
 .info-5 .info:nth-child(3) {
@@ -969,49 +1029,67 @@ watch(() => settings.fullscreen, val => {
 
 /* info 11  */
 .info-11 .info:nth-child(1) {
-  left: 570px;
-  bottom: 450px;
+  /* left: 570px;
+  bottom: 450px; */
+  left: 10px;
+  top: 500px;
 }
 
 .info-11 .info:nth-child(2) {
-  left: 1100px;
-  bottom: 410px;
+  /* left: 1100px;
+  bottom: 410px; */
+  left: 500px;
+  top: 500px;
 }
 
 .info-11 .info:nth-child(3) {
-  left: 436px;
-  bottom: 170px;
+  /* left: 436px;
+  bottom: 170px; */
+  left: 150px;
+  top: 680px;
 }
 
 .info-11 .info:nth-child(4) {
-  left: 1036px;
-  bottom: 170px;
+  /* left: 1036px;
+  bottom: 170px; */
+  left: 320px;
+  top: 720px;
 }
 
 .info-11 .info:nth-child(5) {
-  left: 890px;
-  top: 94px;
+  /* left: 890px;
+  top: 94px; */
+  left: 500px;
+  top: 10px;
 }
 
 /* info 12  */
 .info-12 .info:nth-child(1) {
-  left: 570px;
-  bottom: 250px;
+  /* left: 570px;
+  bottom: 150px; */
+  top: 620px;
+  left: 220px;
 }
 
 .info-12 .info:nth-child(2) {
-  left: 800px;
-  bottom: 80px;
+  /* left: 800px;
+  bottom: 80px; */
+  top: 720px;
+  left: 0;
 }
 
 .info-12 .info:nth-child(3) {
-  left: 1136px;
-  bottom: 670px;
+  /* left: 1136px;
+  bottom: 670px; */
+  top: 220px;
+  left: 500px;
 }
 
 .info-12 .info:nth-child(4) {
-  left: 836px;
-  top: 70px;
+  /* left: 836px;
+  top: 70px; */
+  top: 10px;
+  left: 420px;
 }
 
 /* other  */