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>
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 */