mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

1

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-23 16:32:08 +08:00
parent 8402afcdfc
commit 98dd4428af
1 changed files with 159 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
src/pages/3D.vue
View File

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