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

update fullscreen

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-22 15:06:29 +08:00
parent 14991c7ede
commit e425de93c7
4 changed files with 377 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue
View File

@ -14,26 +14,26 @@ if (urlPath.value === "/") {
useWebsocket(store, urlPath.value); useWebsocket(store, urlPath.value);
// size setting // size setting
const size = ref(80); // const size = ref(80);
onMounted(() => { // onMounted(() => {
setSize(size.value); // setSize(size.value);
}); // });
// style update // style update
const styles = ref({}); // const styles = ref({});
function setSize(value) { // function setSize(value) {
const v = (value / 100).toFixed(2); // const v = (value / 100).toFixed(2);
styles.value = { // styles.value = {
transform: `scale(${v})`, // transform: `scale(${v})`,
// transform: `scale(${v * 24 / 33}, ${v})`, // // transform: `scale(${v * 24 / 33}, ${v})`,
transformOrigin: "top left", // transformOrigin: "top left",
}; // };
} // }
</script> </script>
<template> <template>
<div id="app-container"> <div id="app-container">
<MainPage :style="styles" :path="urlPath" /> <MainPage :path="urlPath" />
<Slider :size="size" @size-change="setSize" /> <Slider :size="size" @size-change="setSize" />
</div> </div>
</template> </template>

4
src/components/SettingDialog.vue
View File

@ -1,9 +1,8 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useSettings } from '../store/settings' import { useSettings } from '../store/settings'
const emit = defineEmits(["close"]); const emit = defineEmits(["close"]);
const { settings } = useSettings(); const { settings, changeScale } = useSettings();
function handleCancel() { function handleCancel() {
emit('close') emit('close')
@ -11,6 +10,7 @@ function handleCancel() {
function handleConfirm() { function handleConfirm() {
// alert(JSON.stringify(settings, null, 2)) // alert(JSON.stringify(settings, null, 2))
changeScale(settings.resolution.width, settings.resolution.height)
emit('close') emit('close')
} }
</script> </script>

414
src/pages/3D.vue
View File

@ -1,117 +1,277 @@
<!-- 三维页面 --> <!-- 三维页面 -->
<script setup> <script setup>
import { useSettings } from '../store/settings'
import { computed } from 'vue';
const { settings } = useSettings();
const props = defineProps({ const props = defineProps({
line: { line: {
type: String, type: String,
default: "1", default: "1",
}, },
}); });
const eqStatus = computed(() => settings.eqStatus);
console.log('eqStatus', eqStatus.value)
</script> </script>
<template> <template>
<div class="triple-page" :class="['line-' + line]"> <div class="triple-page" :class="['line-' + line]">
<div class="info-1" v-if="line == '1'"> <div class="info-1" v-if="eqStatus && line == '1'">
<div class="info"><h1>M7上片</h1></div> <div class="info">
<div class="info"><h1>M6上片</h1></div> <h1>M7上片</h1>
<div class="info"><h1>M7磨边机</h1></div> </div>
<div class="info"><h1>M6磨边机</h1></div> <div class="info">
<div class="info"><h1>M7清洗机</h1></div> <h1>M6上片</h1>
<div class="info"><h1>M6清洗机</h1></div> </div>
<div class="info">
<h1>M7磨边机</h1>
</div>
<div class="info">
<h1>M6磨边机</h1>
</div>
<div class="info">
<h1>M7清洗机</h1>
</div>
<div class="info">
<h1>M6清洗机</h1>
</div>
</div> </div>
<div class="info-2" v-if="line == '2'"> <div class="info-2" v-if="eqStatus && line == '2'">
<div class="info"><h1>Z7钻孔机</h1></div> <div class="info">
<div class="info"><h1>Z6钻孔机</h1></div> <h1>Z7钻孔机</h1>
<div class="info"><h1>S7清洗机</h1></div> </div>
<div class="info"><h1>S6清洗机</h1></div> <div class="info">
<div class="info"><h1>S7前储片台</h1></div> <h1>Z6钻孔机</h1>
<div class="info"><h1>S6前储片台</h1></div> </div>
<div class="info"><h1>S7丝印机</h1></div> <div class="info">
<div class="info"><h1>S6丝印机</h1></div> <h1>S7清洗机</h1>
<div class="info"><h1>S7固化炉</h1></div> </div>
<div class="info"><h1>S6固化炉</h1></div> <div class="info">
<div class="info"><h1>S7后储片台</h1></div> <h1>S6清洗机</h1>
<div class="info"><h1>S6后储片台</h1></div> </div>
<div class="info">
<h1>S7前储片台</h1>
</div>
<div class="info">
<h1>S6前储片台</h1>
</div>
<div class="info">
<h1>S7丝印机</h1>
</div>
<div class="info">
<h1>S6丝印机</h1>
</div>
<div class="info">
<h1>S7固化炉</h1>
</div>
<div class="info">
<h1>S6固化炉</h1>
</div>
<div class="info">
<h1>S7后储片台</h1>
</div>
<div class="info">
<h1>S6后储片台</h1>
</div>
</div> </div>
<div class="info-3" v-if="line == '3'"> <div class="info-3" v-if="eqStatus && line == '3'">
<div class="info"><h1>B1前储片台</h1></div> <div class="info">
<h1>B1前储片台</h1>
</div>
</div> </div>
<div class="info-4" v-if="line == '4'"> <div class="info-4" v-if="eqStatus && line == '4'">
<div class="info"><h1>B2清洗机</h1></div> <div class="info">
<div class="info"><h1>B2下片</h1></div> <h1>B2清洗机</h1>
<div class="info"><h1>B2后储片台</h1></div> </div>
<div class="info">
<h1>B2下片</h1>
</div>
<div class="info">
<h1>B2后储片台</h1>
</div>
</div> </div>
<div class="info-5" v-if="line == '5'"> <div class="info-5" v-if="eqStatus && line == '5'">
<div class="info"><h1>M5上片</h1></div> <div class="info">
<div class="info"><h1>M4上片</h1></div> <h1>M5上片</h1>
<div class="info"><h1>M3上片</h1></div> </div>
<div class="info"><h1>M5磨边机</h1></div> <div class="info">
<div class="info"><h1>M4磨边机</h1></div> <h1>M4上片</h1>
<div class="info"><h1>M3磨边机</h1></div> </div>
<div class="info"><h1>M5清洗机</h1></div> <div class="info">
<div class="info"><h1>M4清洗机</h1></div> <h1>M3上片</h1>
<div class="info"><h1>M3清洗机</h1></div> </div>
<div class="info">
<h1>M5磨边机</h1>
</div>
<div class="info">
<h1>M4磨边机</h1>
</div>
<div class="info">
<h1>M3磨边机</h1>
</div>
<div class="info">
<h1>M5清洗机</h1>
</div>
<div class="info">
<h1>M4清洗机</h1>
</div>
<div class="info">
<h1>M3清洗机</h1>
</div>
</div> </div>
<div class="info-6" v-if="line == '6'"> <div class="info-6" v-if="eqStatus && line == '6'">
<div class="info"><h1>Z5钻孔机</h1></div> <div class="info">
<div class="info"><h1>Z4钻孔机</h1></div> <h1>Z5钻孔机</h1>
<div class="info"><h1>Z3钻孔机</h1></div> </div>
<div class="info"><h1>S5清洗机</h1></div> <div class="info">
<div class="info"><h1>S4清洗机</h1></div> <h1>Z4钻孔机</h1>
<div class="info"><h1>S3清洗机</h1></div> </div>
<div class="info"><h1>S5前储片台</h1></div> <div class="info">
<div class="info"><h1>S4前储片台</h1></div> <h1>Z3钻孔机</h1>
<div class="info"><h1>S3前储片台</h1></div> </div>
<div class="info"><h1>S5丝印机</h1></div> <div class="info">
<div class="info"><h1>S4丝印机</h1></div> <h1>S5清洗机</h1>
<div class="info"><h1>S3丝印机</h1></div> </div>
<div class="info">
<h1>S4清洗机</h1>
</div>
<div class="info">
<h1>S3清洗机</h1>
</div>
<div class="info">
<h1>S5前储片台</h1>
</div>
<div class="info">
<h1>S4前储片台</h1>
</div>
<div class="info">
<h1>S3前储片台</h1>
</div>
<div class="info">
<h1>S5丝印机</h1>
</div>
<div class="info">
<h1>S4丝印机</h1>
</div>
<div class="info">
<h1>S3丝印机</h1>
</div>
</div> </div>
<div class="info-7" v-if="line == '7'"> <div class="info-7" v-if="eqStatus && line == '7'">
<div class="info"><h1>S5后储片台</h1></div> <div class="info">
<div class="info"><h1>S4后储片台</h1></div> <h1>S5后储片台</h1>
<div class="info"><h1>S3后储片台</h1></div> </div>
<div class="info"><h1>S5固化炉</h1></div> <div class="info">
<div class="info"><h1>S4固化炉</h1></div> <h1>S4后储片台</h1>
<div class="info"><h1>S3固化炉</h1></div> </div>
<div class="info"><h1>B2前储片台</h1></div> <div class="info">
<h1>S3后储片台</h1>
</div>
<div class="info">
<h1>S5固化炉</h1>
</div>
<div class="info">
<h1>S4固化炉</h1>
</div>
<div class="info">
<h1>S3固化炉</h1>
</div>
<div class="info">
<h1>B2前储片台</h1>
</div>
</div> </div>
<div class="info-8" v-if="line == '8'"> <div class="info-8" v-if="eqStatus && line == '8'">
<div class="info"><h1>B1前储片台</h1></div> <div class="info">
<div class="info"><h1>B1清洗机</h1></div> <h1>B1前储片台</h1>
<div class="info"><h1>B1下片</h1></div> </div>
<div class="info"><h1>B1后储片台</h1></div> <div class="info">
<h1>B1清洗机</h1>
</div>
<div class="info">
<h1>B1下片</h1>
</div>
<div class="info">
<h1>B1后储片台</h1>
</div>
</div> </div>
<div class="info-9" v-if="line == '9'"> <div class="info-9" v-if="eqStatus && line == '9'">
<div class="info"><h1>M2上片</h1></div> <div class="info">
<div class="info"><h1>M1上片</h1></div> <h1>M2上片</h1>
<div class="info"><h1>M2磨边机</h1></div> </div>
<div class="info"><h1>M1磨边机</h1></div> <div class="info">
<div class="info"><h1>M2清洗机</h1></div> <h1>M1上片</h1>
<div class="info"><h1>M1清洗机</h1></div> </div>
<div class="info">
<h1>M2磨边机</h1>
</div>
<div class="info">
<h1>M1磨边机</h1>
</div>
<div class="info">
<h1>M2清洗机</h1>
</div>
<div class="info">
<h1>M1清洗机</h1>
</div>
</div> </div>
<div class="info-10" v-if="line == '10'"> <div class="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"><h1>Z2钻孔机</h1></div> <div class="info">
<div class="info"><h1>Z1钻孔机</h1></div> <h1>Z2钻孔机</h1>
<div class="info"><h1>S2清洗机</h1></div> </div>
<div class="info"><h1>S1清洗机</h1></div> <div class="info">
<div class="info"><h1>S2前储片台</h1></div> <h1>Z1钻孔机</h1>
<div class="info"><h1>S1前储片台</h1></div> </div>
<div class="info"><h1>S2丝印机</h1></div> <div class="info">
<div class="info"><h1>S1丝印机</h1></div> <h1>S2清洗机</h1>
</div>
<div class="info">
<h1>S1清洗机</h1>
</div>
<div class="info">
<h1>S2前储片台</h1>
</div>
<div class="info">
<h1>S1前储片台</h1>
</div>
<div class="info">
<h1>S2丝印机</h1>
</div>
<div class="info">
<h1>S1丝印机</h1>
</div>
</div> </div>
<div class="info-11" v-if="line == '11'"> <div class="info-11" v-if="eqStatus && line == '11'">
<div class="info"><h1>S7后储片台</h1></div> <div class="info">
<div class="info"><h1>S6后储片台</h1></div> <h1>S7后储片台</h1>
<div class="info"><h1>S7固化炉</h1></div> </div>
<div class="info"><h1>S6固化炉</h1></div> <div class="info">
<div class="info"><h1>B3前储片台</h1></div> <h1>S6后储片台</h1>
</div>
<div class="info">
<h1>S7固化炉</h1>
</div>
<div class="info">
<h1>S6固化炉</h1>
</div>
<div class="info">
<h1>B3前储片台</h1>
</div>
</div> </div>
<div class="info-12" v-if="line == '12'"> <div class="info-12" v-if="eqStatus && line == '12'">
<div class="info"><h1>B3前储片台</h1></div> <div class="info">
<div class="info"><h1>B3清洗机</h1></div> <h1>B3前储片台</h1>
<div class="info"><h1>B3下片</h1></div> </div>
<div class="info"><h1>B3后储片台</h1></div> <div class="info">
<h1>B3清洗机</h1>
</div>
<div class="info">
<h1>B3下片</h1>
</div>
<div class="info">
<h1>B3后储片台</h1>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -151,22 +311,27 @@ const props = defineProps({
left: 490px; left: 490px;
bottom: 250px; bottom: 250px;
} }
.info-1 .info:nth-child(2) { .info-1 .info:nth-child(2) {
left: 790px; left: 790px;
bottom: 210px; bottom: 210px;
} }
.info-1 .info:nth-child(3) { .info-1 .info:nth-child(3) {
left: 660px; left: 660px;
top: 480px; top: 480px;
} }
.info-1 .info:nth-child(4) { .info-1 .info:nth-child(4) {
left: 910px; left: 910px;
top: 510px; top: 510px;
} }
.info-1 .info:nth-child(5) { .info-1 .info:nth-child(5) {
left: 880px; left: 880px;
top: 220px; top: 220px;
} }
.info-1 .info:nth-child(6) { .info-1 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 260px; top: 260px;
@ -177,46 +342,57 @@ const props = defineProps({
left: 580px; left: 580px;
bottom: 200px; bottom: 200px;
} }
.info-2 .info:nth-child(2) { .info-2 .info:nth-child(2) {
left: 940px; left: 940px;
bottom: 200px; bottom: 200px;
} }
.info-2 .info:nth-child(3) { .info-2 .info:nth-child(3) {
left: 640px; left: 640px;
bottom: 360px; bottom: 360px;
} }
.info-2 .info:nth-child(4) { .info-2 .info:nth-child(4) {
left: 940px; left: 940px;
bottom: 360px; bottom: 360px;
} }
.info-2 .info:nth-child(5) { .info-2 .info:nth-child(5) {
left: 660px; left: 660px;
bottom: 580px; bottom: 580px;
} }
.info-2 .info:nth-child(6) { .info-2 .info:nth-child(6) {
left: 1060px; left: 1060px;
bottom: 520px; bottom: 520px;
} }
.info-2 .info:nth-child(7) { .info-2 .info:nth-child(7) {
left: 720px; left: 720px;
top: 190px; top: 190px;
} }
.info-2 .info:nth-child(8) { .info-2 .info:nth-child(8) {
left: 1100px; left: 1100px;
top: 260px; top: 260px;
} }
.info-2 .info:nth-child(9) { .info-2 .info:nth-child(9) {
left: 800px; left: 800px;
top: 120px; top: 120px;
} }
.info-2 .info:nth-child(10) { .info-2 .info:nth-child(10) {
left: 1100px; left: 1100px;
top: 144px; top: 144px;
} }
.info-2 .info:nth-child(11) { .info-2 .info:nth-child(11) {
left: 800px; left: 800px;
top: 10px; top: 10px;
} }
.info-2 .info:nth-child(12) { .info-2 .info:nth-child(12) {
left: 1100px; left: 1100px;
top: 20px; top: 20px;
@ -233,10 +409,12 @@ const props = defineProps({
left: 580px; left: 580px;
bottom: 200px; bottom: 200px;
} }
.info-4 .info:nth-child(2) { .info-4 .info:nth-child(2) {
left: 800px; left: 800px;
top: 100px; top: 100px;
} }
.info-4 .info:nth-child(3) { .info-4 .info:nth-child(3) {
left: 1240px; left: 1240px;
top: 40px; top: 40px;
@ -247,34 +425,42 @@ const props = defineProps({
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) {
left: 960px; left: 960px;
bottom: 240px; bottom: 240px;
} }
.info-5 .info:nth-child(4) { .info-5 .info:nth-child(4) {
left: 460px; left: 460px;
bottom: 490px; bottom: 490px;
} }
.info-5 .info:nth-child(5) { .info-5 .info:nth-child(5) {
left: 760px; left: 760px;
bottom: 490px; bottom: 490px;
} }
.info-5 .info:nth-child(6) { .info-5 .info:nth-child(6) {
left: 1060px; left: 1060px;
bottom: 450px; bottom: 450px;
} }
.info-5 .info:nth-child(7) { .info-5 .info:nth-child(7) {
left: 570px; left: 570px;
top: 190px; top: 190px;
} }
.info-5 .info:nth-child(8) { .info-5 .info:nth-child(8) {
left: 890px; left: 890px;
top: 200px; top: 200px;
} }
.info-5 .info:nth-child(9) { .info-5 .info:nth-child(9) {
left: 1190px; left: 1190px;
top: 200px; top: 200px;
@ -286,46 +472,57 @@ const props = defineProps({
left: 480px; left: 480px;
bottom: 530px; bottom: 530px;
} }
.info-6 .info:nth-child(2) { .info-6 .info:nth-child(2) {
left: 720px; left: 720px;
bottom: 470px; bottom: 470px;
} }
.info-6 .info:nth-child(3) { .info-6 .info:nth-child(3) {
left: 990px; left: 990px;
bottom: 460px; bottom: 460px;
} }
.info-6 .info:nth-child(4) { .info-6 .info:nth-child(4) {
left: 510px; left: 510px;
top: 260px; top: 260px;
} }
.info-6 .info:nth-child(5) { .info-6 .info:nth-child(5) {
left: 810px; left: 810px;
top: 260px; top: 260px;
} }
.info-6 .info:nth-child(6) { .info-6 .info:nth-child(6) {
left: 1110px; left: 1110px;
top: 280px; top: 280px;
} }
.info-6 .info:nth-child(7) { .info-6 .info:nth-child(7) {
left: 600px; left: 600px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(8) { .info-6 .info:nth-child(8) {
left: 900px; left: 900px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(9) { .info-6 .info:nth-child(9) {
left: 1200px; left: 1200px;
top: 110px; top: 110px;
} }
.info-6 .info:nth-child(10) { .info-6 .info:nth-child(10) {
left: 650px; left: 650px;
top: 20px; top: 20px;
} }
.info-6 .info:nth-child(11) { .info-6 .info:nth-child(11) {
left: 950px; left: 950px;
top: 30px; top: 30px;
} }
.info-6 .info:nth-child(12) { .info-6 .info:nth-child(12) {
left: 1230px; left: 1230px;
top: 20px; top: 20px;
@ -337,26 +534,32 @@ const props = defineProps({
left: 400px; left: 400px;
bottom: 440px; bottom: 440px;
} }
.info-7 .info:nth-child(2) { .info-7 .info:nth-child(2) {
left: 670px; left: 670px;
bottom: 440px; bottom: 440px;
} }
.info-7 .info:nth-child(3) { .info-7 .info:nth-child(3) {
left: 960px; left: 960px;
bottom: 450px; bottom: 450px;
} }
.info-7 .info:nth-child(4) { .info-7 .info:nth-child(4) {
left: 310px; left: 310px;
bottom: 260px; bottom: 260px;
} }
.info-7 .info:nth-child(5) { .info-7 .info:nth-child(5) {
left: 620px; left: 620px;
bottom: 260px; bottom: 260px;
} }
.info-7 .info:nth-child(6) { .info-7 .info:nth-child(6) {
left: 1110px; left: 1110px;
bottom: 240px; bottom: 240px;
} }
.info-7 .info:nth-child(7) { .info-7 .info:nth-child(7) {
left: 800px; left: 800px;
top: 50px; top: 50px;
@ -367,14 +570,17 @@ const props = defineProps({
left: 660px; left: 660px;
bottom: 550px; bottom: 550px;
} }
.info-8 .info:nth-child(2) { .info-8 .info:nth-child(2) {
left: 990px; left: 990px;
bottom: 690px; bottom: 690px;
} }
.info-8 .info:nth-child(3) { .info-8 .info:nth-child(3) {
left: 700px; left: 700px;
top: 80px; top: 80px;
} }
.info-8 .info:nth-child(4) { .info-8 .info:nth-child(4) {
left: 1100px; left: 1100px;
top: 80px; top: 80px;
@ -385,22 +591,27 @@ const props = defineProps({
left: 400px; left: 400px;
bottom: 250px; bottom: 250px;
} }
.info-9 .info:nth-child(2) { .info-9 .info:nth-child(2) {
left: 1100px; left: 1100px;
bottom: 220px; bottom: 220px;
} }
.info-9 .info:nth-child(3) { .info-9 .info:nth-child(3) {
left: 496px; left: 496px;
bottom: 570px; bottom: 570px;
} }
.info-9 .info:nth-child(4) { .info-9 .info:nth-child(4) {
left: 1100px; left: 1100px;
bottom: 490px; bottom: 490px;
} }
.info-9 .info:nth-child(5) { .info-9 .info:nth-child(5) {
left: 670px; left: 670px;
top: 144px; top: 144px;
} }
.info-9 .info:nth-child(6) { .info-9 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 155px; top: 155px;
@ -411,30 +622,37 @@ const props = defineProps({
left: 620px; left: 620px;
bottom: 450px; bottom: 450px;
} }
.info-10 .info:nth-child(2) { .info-10 .info:nth-child(2) {
left: 1000px; left: 1000px;
bottom: 320px; bottom: 320px;
} }
.info-10 .info:nth-child(3) { .info-10 .info:nth-child(3) {
left: 736px; left: 736px;
top: 270px; top: 270px;
} }
.info-10 .info:nth-child(4) { .info-10 .info:nth-child(4) {
left: 1200px; left: 1200px;
top: 330px; top: 330px;
} }
.info-10 .info:nth-child(5) { .info-10 .info:nth-child(5) {
left: 870px; left: 870px;
top: 144px; top: 144px;
} }
.info-10 .info:nth-child(6) { .info-10 .info:nth-child(6) {
left: 1100px; left: 1100px;
top: 195px; top: 195px;
} }
.info-10 .info:nth-child(7) { .info-10 .info:nth-child(7) {
left: 900px; left: 900px;
top: 55px; top: 55px;
} }
.info-10 .info:nth-child(8) { .info-10 .info:nth-child(8) {
left: 1200px; left: 1200px;
top: 68px; top: 68px;
@ -445,18 +663,22 @@ const props = defineProps({
left: 570px; left: 570px;
bottom: 450px; bottom: 450px;
} }
.info-11 .info:nth-child(2) { .info-11 .info:nth-child(2) {
left: 1100px; left: 1100px;
bottom: 410px; bottom: 410px;
} }
.info-11 .info:nth-child(3) { .info-11 .info:nth-child(3) {
left: 436px; left: 436px;
bottom: 170px; bottom: 170px;
} }
.info-11 .info:nth-child(4) { .info-11 .info:nth-child(4) {
left: 1036px; left: 1036px;
bottom: 170px; bottom: 170px;
} }
.info-11 .info:nth-child(5) { .info-11 .info:nth-child(5) {
left: 890px; left: 890px;
top: 94px; top: 94px;
@ -467,14 +689,17 @@ const props = defineProps({
left: 570px; left: 570px;
bottom: 250px; bottom: 250px;
} }
.info-12 .info:nth-child(2) { .info-12 .info:nth-child(2) {
left: 800px; left: 800px;
bottom: 80px; bottom: 80px;
} }
.info-12 .info:nth-child(3) { .info-12 .info:nth-child(3) {
left: 1136px; left: 1136px;
bottom: 670px; bottom: 670px;
} }
.info-12 .info:nth-child(4) { .info-12 .info:nth-child(4) {
left: 836px; left: 836px;
top: 70px; top: 70px;
@ -486,56 +711,67 @@ const props = defineProps({
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-2 { .line-2 {
background: url(../assets/model/F2.png) no-repeat; background: url(../assets/model/F2.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-3 { .line-3 {
background: url(../assets/model/F3.png) no-repeat; background: url(../assets/model/F3.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-4 { .line-4 {
background: url(../assets/model/F4.png) no-repeat; background: url(../assets/model/F4.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-5 { .line-5 {
background: url(../assets/model/F5.png) no-repeat; background: url(../assets/model/F5.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-6 { .line-6 {
background: url(../assets/model/F6.png) no-repeat; background: url(../assets/model/F6.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-7 { .line-7 {
background: url(../assets/model/F7.png) no-repeat; background: url(../assets/model/F7.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-8 { .line-8 {
background: url(../assets/model/F8.png) no-repeat; background: url(../assets/model/F8.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-9 { .line-9 {
background: url(../assets/model/F9.png) no-repeat; background: url(../assets/model/F9.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-10 { .line-10 {
background: url(../assets/model/F10.png) no-repeat; background: url(../assets/model/F10.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-11 { .line-11 {
background: url(../assets/model/F11.png) no-repeat; background: url(../assets/model/F11.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;
background-position: 0 -80px; background-position: 0 -80px;
} }
.line-12 { .line-12 {
background: url(../assets/model/F12.png) no-repeat; background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px; background-size: 1920px 1080px;

38
src/store/settings.js
View File

@ -1,5 +1,5 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref } from "vue"; import { ref, watch } from "vue";
export const useSettings = defineStore("settings", () => { export const useSettings = defineStore("settings", () => {
const settings = ref({ const settings = ref({
@ -13,6 +13,40 @@ export const useSettings = defineStore("settings", () => {
eqStatus: false, eqStatus: false,
}); });
function changeScale(width, height) {
const xScale = width / 1920;
const yScale = height / 1080;
const style = {
transform: `scale(${xScale}, ${yScale})`,
transformOrigin: "top left",
};
document.documentElement.style.transform = style.transform;
document.documentElement.style.transformOrigin = style.transformOrigin;
}
function resetScale() {
document.documentElement.style.transform = "initial";
document.documentElement.style.transformOrigin = "initial";
}
watch(
() => settings.value.fullscreen,
(val) => {
if (val) {
document.documentElement.requestFullscreen().then(() => {
document.documentElement.style.width = "100vw";
document.documentElement.style.height = "100vh";
changeScale(
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
});
return;
}
document.exitFullscreen().then(resetScale);
}
);
function rewriteSettings(payload) { function rewriteSettings(payload) {
settings.value = payload; settings.value = payload;
} }
@ -34,5 +68,5 @@ export const useSettings = defineStore("settings", () => {
break; break;
} }
} }
return { settings, updateSettings, rewriteSettings }; return { settings, updateSettings, rewriteSettings, changeScale };
}); });