Compare commits
4 Commits
0d96fec181
...
e25dfe8f02
| Author | SHA1 | Date | |
|---|---|---|---|
|
e25dfe8f02 | ||
|
|
98dd4428af | ||
|
|
8402afcdfc | ||
|
|
90c29c141c |
14
package-lock.json
generated
14
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.4.4",
|
||||
"pinia": "^2.1.7",
|
||||
"screenfull": "^6.0.2",
|
||||
"vue": "^3.3.11",
|
||||
"vue3-marquee": "^4.1.0"
|
||||
},
|
||||
@ -1123,6 +1124,14 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/screenfull": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
|
||||
"integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
|
||||
"engines": {
|
||||
"node": "^14.13.1 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
@ -1888,6 +1897,11 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"screenfull": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
|
||||
"integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
|
||||
},
|
||||
"source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.4.4",
|
||||
"pinia": "^2.1.7",
|
||||
"screenfull": "^6.0.2",
|
||||
"vue": "^3.3.11",
|
||||
"vue3-marquee": "^4.1.0"
|
||||
},
|
||||
|
||||
@ -18,7 +18,7 @@ const currentPage = ref("3d");
|
||||
const handlePageChange = (page) => {
|
||||
currentPage.value = page;
|
||||
};
|
||||
|
||||
const mainContainer = ref(null);
|
||||
|
||||
const { settings } = useSettings();
|
||||
const timer = ref(null);
|
||||
@ -26,7 +26,7 @@ watch(() => settings.carousel, val => {
|
||||
if (val) {
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, settings.carouselTime);
|
||||
}, settings.carouselTime * 1000);
|
||||
return;
|
||||
}
|
||||
clearInterval(timer.value);
|
||||
@ -38,7 +38,7 @@ watch(() => settings.carouselTime, val => {
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, val);
|
||||
}, val * 1000);
|
||||
}
|
||||
})
|
||||
|
||||
@ -59,12 +59,37 @@ const pathMap = {
|
||||
'/1-3': 3,
|
||||
'/1-4': 8
|
||||
}
|
||||
|
||||
function handleResolutionChange(width, height) {
|
||||
if (mainContainer.value) {
|
||||
// mainContainer.value.style.width = `${width}px`;
|
||||
// mainContainer.value.style.height = `${height}px`;
|
||||
changeScale(mainContainer.value, width, height)
|
||||
}
|
||||
}
|
||||
|
||||
function changeScale(elm, width, height) {
|
||||
const xScale = width / 1920;
|
||||
const yScale = height / 1080;
|
||||
const style = {
|
||||
transform: `scale(${xScale}, ${yScale})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
elm.style.transform = style.transform;
|
||||
elm.style.transformOrigin = style.transformOrigin;
|
||||
}
|
||||
|
||||
function resetScale(elm) {
|
||||
elm.style.transform = "initial";
|
||||
elm.style.transformOrigin = "initial";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div id="main-container" ref="mainContainer" class="main-container">
|
||||
<DatetimeTool v-if="currentPage !== 'announcement'" />
|
||||
<Tools v-if="currentPage !== 'announcement'" />
|
||||
<Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
|
||||
<AppHeader v-if="currentPage !== 'announcement'" />
|
||||
<AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
|
||||
@home="() => handlePageChange('3d')" />
|
||||
|
||||
@ -27,4 +27,9 @@ onMounted(() => {
|
||||
color: #69B4FF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:fullscreen .datetime {
|
||||
right: 500px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,6 +62,10 @@ const handleClick = (page) => {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:fullscreen .nav-menu {
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.flex-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useSettings } from '../store/settings'
|
||||
const emit = defineEmits(["close", "change-resolution"]);
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
const { settings, changeScale } = useSettings();
|
||||
const store = useSettings();
|
||||
const settings = ref(store.settings);
|
||||
store.$subscribe((mutation, state) => {
|
||||
settings.value.fullscreen = state.settings.fullscreen;
|
||||
})
|
||||
|
||||
function handleCancel() {
|
||||
emit('close')
|
||||
@ -10,8 +15,13 @@ function handleCancel() {
|
||||
|
||||
function handleConfirm() {
|
||||
// alert(JSON.stringify(settings, null, 2))
|
||||
changeScale(settings.resolution.width, settings.resolution.height)
|
||||
emit('close')
|
||||
// changeScale(settings.resolution.width, settings.resolution.height)
|
||||
if (settings.value.resolution.width < 480) store.settings.resolution.width = 480;
|
||||
if (settings.value.resolution.width > 7680) store.settings.resolution.width = 7680;
|
||||
if (settings.value.resolution.height < 270) store.settings.resolution.height = 270;
|
||||
if (settings.value.resolution.height > 4320) store.settings.resolution.height = 4320;
|
||||
|
||||
emit('change-resolution', store.settings.resolution.width, store.settings.resolution.height)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -26,9 +36,9 @@ function handleConfirm() {
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="resolution1">分辨率</label>
|
||||
<input id="resolution1" type="number" v-model="settings.resolution.width" />
|
||||
<input id="resolution1" type="number" min="480" max="7680" v-model="settings.resolution.width" />
|
||||
<span>X</span>
|
||||
<input id="resolution2" type="number" v-model="settings.resolution.height" />
|
||||
<input id="resolution2" type="number" min="270" max="4320" v-model="settings.resolution.height" />
|
||||
<span>px</span>
|
||||
</div>
|
||||
<div class="form-item selector">
|
||||
@ -173,11 +183,14 @@ button {
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
/* position: fixed;
|
||||
height: 1080px;
|
||||
width: 1920px; */
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
background: #0003;
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 999;
|
||||
|
||||
@ -6,33 +6,46 @@ import IconSetting from "../assets/menu_icon/IconSetting.vue";
|
||||
import SettingDialogVue from "./SettingDialog.vue";
|
||||
import { useSettings } from '../store/settings';
|
||||
|
||||
const { settings } = useSettings();
|
||||
const emit = defineEmits(['change-resolution'])
|
||||
|
||||
const store = useSettings();
|
||||
const settings = ref(store.settings)
|
||||
store.$subscribe((_, state) => {
|
||||
settings.value.carousel = state.settings.carousel;
|
||||
})
|
||||
const visible = ref(false);
|
||||
function toHome() {
|
||||
document.location.href = '/1-1'
|
||||
// document.location.href = '/1-1'
|
||||
document.location.reload()
|
||||
}
|
||||
function showDialog() {
|
||||
visible.value = true;
|
||||
}
|
||||
function toggleLunbo() {
|
||||
settings.carousel = !settings.carousel;
|
||||
settings.value.carousel = !settings.value.carousel;
|
||||
}
|
||||
|
||||
function handleChangeResolution(w, h) {
|
||||
emit('change-resolution', w, h)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tools">
|
||||
<div id="tools-bar" class="tools">
|
||||
<button @click="toHome">
|
||||
<IconBack />
|
||||
</button>
|
||||
<button @click="showDialog">
|
||||
<IconSetting />
|
||||
</button>
|
||||
<button @click="toggleLunbo">
|
||||
<IconExchange />
|
||||
<button style="position: relative;" @click="toggleLunbo">
|
||||
<span v-if="settings.carousel"
|
||||
style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
|
||||
{{ settings.carouselTime }}S</span>
|
||||
<IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
|
||||
</button>
|
||||
</div>
|
||||
<SettingDialogVue v-if="visible" @close="visible = false;" />
|
||||
<SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -78,4 +91,5 @@ button:hover svg #back-btn,
|
||||
button:hover svg #setting-btn,
|
||||
button:hover svg #switch-btn {
|
||||
fill: #b1daff !important;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
569
src/pages/3D.vue
569
src/pages/3D.vue
@ -2,7 +2,7 @@
|
||||
<script setup>
|
||||
import { useSettings } from '../store/settings';
|
||||
import { useWsStore } from "../store";
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import Icon from '../assets/svg/IconStatus.vue';
|
||||
import { eqMap, statusMap, initState } from './eqMaps'
|
||||
|
||||
@ -37,11 +37,40 @@ store.$subscribe((mutation, state) => {
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const part3d = ref(null);
|
||||
function changeScale(elm, width, height) {
|
||||
const xScale = width / 1920;
|
||||
const yScale = height / 900;
|
||||
const style = {
|
||||
transform: `scale(${xScale}, ${yScale})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
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) {
|
||||
// 全屏状态下
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
}
|
||||
} else {
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, 1920, 900)
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="triple-page" :class="['line-' + line]">
|
||||
<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上片
|
||||
@ -79,7 +108,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -159,7 +188,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -167,7 +196,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -186,7 +215,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -244,7 +273,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -322,7 +351,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -368,7 +397,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -393,7 +422,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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上片
|
||||
@ -431,7 +460,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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">
|
||||
@ -487,7 +516,7 @@ store.$subscribe((mutation, state) => {
|
||||
<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'" />
|
||||
@ -521,7 +550,7 @@ store.$subscribe((mutation, state) => {
|
||||
</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'" />
|
||||
@ -552,7 +581,11 @@ store.$subscribe((mutation, state) => {
|
||||
|
||||
<style scoped>
|
||||
.triple-page {
|
||||
background: #ccc1;
|
||||
/* background: #ccc1; */
|
||||
background-size: 1920px 1080px;
|
||||
/* background-size: 100% 100%; */
|
||||
background-position: 0 -100px;
|
||||
background-repeat: no-repeat;
|
||||
/* flex: 1;
|
||||
position: relative; */
|
||||
position: absolute;
|
||||
@ -587,474 +620,626 @@ store.$subscribe((mutation, state) => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.absolute-full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
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 */
|
||||
.info-3 .info:nth-child(1) {
|
||||
left: 500px;
|
||||
bottom: 420px;
|
||||
/* left: 500px;
|
||||
bottom: 420px; */
|
||||
top: 700px;
|
||||
}
|
||||
|
||||
/* 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; */
|
||||
top: 700px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(2) {
|
||||
left: 740px;
|
||||
bottom: 280px;
|
||||
/* left: 740px;
|
||||
bottom: 280px; */
|
||||
top: 720px;
|
||||
left: 240px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(3) {
|
||||
left: 960px;
|
||||
bottom: 240px;
|
||||
/* left: 960px;
|
||||
bottom: 240px; */
|
||||
top: 760px;
|
||||
left: 440px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(4) {
|
||||
left: 460px;
|
||||
bottom: 490px;
|
||||
/* left: 460px;
|
||||
bottom: 490px; */
|
||||
top: 420px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(5) {
|
||||
left: 760px;
|
||||
bottom: 490px;
|
||||
/* left: 760px;
|
||||
bottom: 490px; */
|
||||
top: 430px;
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(6) {
|
||||
left: 1060px;
|
||||
bottom: 450px;
|
||||
/* left: 1060px;
|
||||
bottom: 450px; */
|
||||
top: 450px;
|
||||
left: 440px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(7) {
|
||||
left: 570px;
|
||||
top: 190px;
|
||||
/* left: 570px;
|
||||
top: 190px; */
|
||||
top: 200px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(8) {
|
||||
left: 890px;
|
||||
/* left: 890px;
|
||||
top: 200px; */
|
||||
top: 200px;
|
||||
left: 320px;
|
||||
}
|
||||
|
||||
.info-5 .info:nth-child(9) {
|
||||
left: 1190px;
|
||||
/* left: 1190px;
|
||||
top: 200px; */
|
||||
top: 200px;
|
||||
left: 490px;
|
||||
}
|
||||
|
||||
/* info 6 */
|
||||
|
||||
.info-6 .info:nth-child(1) {
|
||||
left: 480px;
|
||||
bottom: 530px;
|
||||
/* left: 480px;
|
||||
bottom: 530px; */
|
||||
top: 400px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(2) {
|
||||
left: 720px;
|
||||
bottom: 470px;
|
||||
/* left: 720px;
|
||||
bottom: 470px; */
|
||||
left: 340px;
|
||||
top: 450px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(3) {
|
||||
left: 990px;
|
||||
bottom: 460px;
|
||||
/* left: 990px;
|
||||
bottom: 460px; */
|
||||
top: 490px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(4) {
|
||||
left: 510px;
|
||||
/* left: 510px; */
|
||||
top: 260px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(5) {
|
||||
left: 810px;
|
||||
/* left: 810px; */
|
||||
top: 260px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(6) {
|
||||
left: 1110px;
|
||||
/* left: 1110px; */
|
||||
top: 280px;
|
||||
left: 560px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(7) {
|
||||
left: 600px;
|
||||
/* left: 600px; */
|
||||
top: 110px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(8) {
|
||||
left: 900px;
|
||||
/* left: 900px; */
|
||||
top: 110px;
|
||||
left: 340px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(9) {
|
||||
left: 1200px;
|
||||
/* left: 1200px; */
|
||||
top: 110px;
|
||||
left: 550px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(10) {
|
||||
left: 650px;
|
||||
/* left: 650px; */
|
||||
left: 120px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(11) {
|
||||
left: 950px;
|
||||
/* left: 950px; */
|
||||
left: 330px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.info-6 .info:nth-child(12) {
|
||||
left: 1230px;
|
||||
/* left: 1230px; */
|
||||
left: 560px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
/* info 7 */
|
||||
|
||||
.info-7 .info:nth-child(1) {
|
||||
left: 400px;
|
||||
bottom: 440px;
|
||||
/* left: 400px;
|
||||
bottom: 440px; */
|
||||
top: 500px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(2) {
|
||||
left: 670px;
|
||||
bottom: 440px;
|
||||
/* left: 670px;
|
||||
bottom: 440px; */
|
||||
top: 500px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(3) {
|
||||
left: 960px;
|
||||
bottom: 450px;
|
||||
/* left: 960px;
|
||||
bottom: 450px; */
|
||||
top: 500px;
|
||||
left: 450px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(4) {
|
||||
left: 310px;
|
||||
bottom: 260px;
|
||||
/* left: 310px;
|
||||
bottom: 260px; */
|
||||
top: 700px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(5) {
|
||||
left: 620px;
|
||||
bottom: 260px;
|
||||
/* left: 620px;
|
||||
bottom: 260px; */
|
||||
top: 700px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(6) {
|
||||
left: 1110px;
|
||||
bottom: 240px;
|
||||
/* left: 1110px;
|
||||
bottom: 240px; */
|
||||
top: 700px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.info-7 .info:nth-child(7) {
|
||||
left: 800px;
|
||||
top: 50px;
|
||||
/* left: 800px;
|
||||
top: 50px; */
|
||||
top: 20px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
/* info 8 */
|
||||
.info-8 .info:nth-child(1) {
|
||||
left: 660px;
|
||||
bottom: 550px;
|
||||
/* left: 660px;
|
||||
bottom: 550px; */
|
||||
top: 800px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.info-8 .info:nth-child(2) {
|
||||
left: 990px;
|
||||
bottom: 690px;
|
||||
/* left: 990px;
|
||||
bottom: 690px; */
|
||||
top: 400px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.info-8 .info:nth-child(3) {
|
||||
left: 700px;
|
||||
top: 80px;
|
||||
/* left: 700px;
|
||||
top: 80px; */
|
||||
top: 90px;
|
||||
left: 400px;
|
||||
}
|
||||
|
||||
.info-8 .info:nth-child(4) {
|
||||
left: 1100px;
|
||||
top: 80px;
|
||||
/* left: 1100px;
|
||||
top: 80px; */
|
||||
top: 0;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
/* info 9 */
|
||||
.info-9 .info:nth-child(1) {
|
||||
left: 400px;
|
||||
bottom: 250px;
|
||||
/* left: 400px;
|
||||
bottom: 250px; */
|
||||
top: 600px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(2) {
|
||||
left: 1100px;
|
||||
bottom: 220px;
|
||||
/* left: 1100px;
|
||||
bottom: 220px; */
|
||||
top: 630px;
|
||||
left: 430px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(3) {
|
||||
left: 496px;
|
||||
bottom: 570px;
|
||||
/* left: 496px;
|
||||
bottom: 570px; */
|
||||
top: 300px;
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(4) {
|
||||
left: 1100px;
|
||||
bottom: 490px;
|
||||
/* left: 1100px;
|
||||
bottom: 490px; */
|
||||
top: 380px;
|
||||
left: 550px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(5) {
|
||||
left: 670px;
|
||||
top: 144px;
|
||||
/* left: 670px;
|
||||
top: 144px; */
|
||||
top: 88px;
|
||||
left: 180px;
|
||||
}
|
||||
|
||||
.info-9 .info:nth-child(6) {
|
||||
left: 1100px;
|
||||
top: 155px;
|
||||
/* left: 1100px;
|
||||
top: 155px; */
|
||||
top: 90px;
|
||||
left: 420px;
|
||||
}
|
||||
|
||||
/* info 10 */
|
||||
.info-10 .info:nth-child(1) {
|
||||
left: 620px;
|
||||
bottom: 450px;
|
||||
/* left: 620px;
|
||||
bottom: 450px; */
|
||||
top: 500px;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(2) {
|
||||
left: 1000px;
|
||||
bottom: 320px;
|
||||
/* left: 1000px;
|
||||
bottom: 320px; */
|
||||
top: 530px;
|
||||
left: 330px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(3) {
|
||||
left: 736px;
|
||||
top: 270px;
|
||||
/* left: 736px;
|
||||
top: 270px; */
|
||||
top: 230px;
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(4) {
|
||||
left: 1200px;
|
||||
/* left: 1200px;
|
||||
top: 330px; */
|
||||
top: 330px;
|
||||
left: 430px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(5) {
|
||||
left: 870px;
|
||||
top: 144px;
|
||||
/* left: 870px;
|
||||
top: 144px; */
|
||||
top: 150px;
|
||||
left: 360px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(6) {
|
||||
left: 1100px;
|
||||
top: 195px;
|
||||
/* left: 1100px;
|
||||
top: 195px; */
|
||||
top: 200px;
|
||||
left: 490px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(7) {
|
||||
left: 900px;
|
||||
top: 55px;
|
||||
/* left: 900px;
|
||||
top: 55px; */
|
||||
top: 90px;
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.info-10 .info:nth-child(8) {
|
||||
left: 1200px;
|
||||
top: 68px;
|
||||
/* left: 1200px;
|
||||
top: 68px; */
|
||||
top: 90px;
|
||||
right: -120px;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.line-1 {
|
||||
background: url(../assets/model/F1.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
|
||||
background-image: url(../assets/model/F1.png)
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
background: url(../assets/model/F2.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F2.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
background: url(../assets/model/F3.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F3.png);
|
||||
|
||||
}
|
||||
|
||||
.line-4 {
|
||||
background: url(../assets/model/F4.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F4.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-5 {
|
||||
background: url(../assets/model/F5.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F5.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-6 {
|
||||
background: url(../assets/model/F6.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F6.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-7 {
|
||||
background: url(../assets/model/F7.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F7.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-8 {
|
||||
background: url(../assets/model/F8.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F8.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-9 {
|
||||
background: url(../assets/model/F9.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F9.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-10 {
|
||||
background: url(../assets/model/F10.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F10.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-11 {
|
||||
background: url(../assets/model/F11.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F11.png);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.line-12 {
|
||||
background: url(../assets/model/F12.png) no-repeat;
|
||||
background-size: 1920px 1080px;
|
||||
background-position: 0 -80px;
|
||||
background-image: url(../assets/model/F12.png);
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -119,6 +119,12 @@ store.$subscribe((mutation, state) => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:fullscreen .alert-list {
|
||||
width: 35%;
|
||||
top: 32px;
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.alert-list__table {
|
||||
height: calc(100% - 72px);
|
||||
/* background: linear-gradient(to right, transparent, #0ba6ff80); */
|
||||
|
||||
@ -40,14 +40,12 @@ const handleClose = () => {
|
||||
<div class="announcement-page">
|
||||
<h1 class="announcement-title">公告栏</h1>
|
||||
<main class="announcement-content">
|
||||
<ScrollText :vertical="true" :duration="10" :pause-on-hover="true">
|
||||
<ScrollText :vertical="true" :duration="50" :pause-on-hover="true">
|
||||
<div v-html="vertical_content"></div>
|
||||
</ScrollText>
|
||||
</main>
|
||||
<div class="announcement-footer">
|
||||
<button
|
||||
id="return-btn"
|
||||
style="
|
||||
<button id="return-btn" style="
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 56px;
|
||||
@ -55,12 +53,10 @@ const handleClose = () => {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="handleClose"
|
||||
>
|
||||
" @click="handleClose">
|
||||
<IconBack color="#f00" />
|
||||
</button>
|
||||
<ScrollText> {{ horizontal_content }} </ScrollText>
|
||||
<ScrollText :duration="50"> {{ horizontal_content }} </ScrollText>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -103,6 +99,11 @@ const handleClose = () => {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
:fullscreen .announcement-content {
|
||||
margin-bottom: 5%;
|
||||
padding: 56px 80px 12px 80px;
|
||||
}
|
||||
|
||||
.announcement-footer {
|
||||
height: 144px;
|
||||
/* background: #ccc1; */
|
||||
@ -112,4 +113,8 @@ const handleClose = () => {
|
||||
font-family: sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:fullscreen .announcement-footer {
|
||||
line-height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,4 +33,15 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list {
|
||||
width: 35%;
|
||||
gap: 32px;
|
||||
padding: 32px 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
:fullscreen .data-list > div {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,48 +2,51 @@ import { defineStore } from "pinia";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
export const useSettings = defineStore("settings", () => {
|
||||
const settings = ref({
|
||||
const initialSettings = localStorage.getItem("settings");
|
||||
const settings = ref(
|
||||
initialSettings
|
||||
? JSON.parse(initialSettings)
|
||||
: {
|
||||
resolution: {
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
},
|
||||
carousel: false,
|
||||
carouselTime: 10000, // s
|
||||
carouselTime: 10, // s
|
||||
fullscreen: false,
|
||||
eqStatus: true,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
function changeScale(width, height) {
|
||||
const xScale = width / 1920;
|
||||
const yScale = height / 1080;
|
||||
const style = {
|
||||
transform: `scale(${xScale}, ${yScale})`,
|
||||
transformOrigin: "top left",
|
||||
const clearFullscreenFlag = (e) => {
|
||||
if (!document.fullscreenElement) {
|
||||
settings.value.fullscreen = false;
|
||||
}
|
||||
};
|
||||
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) => {
|
||||
const mainContainer = document.getElementById("main-container");
|
||||
if (val) {
|
||||
document.documentElement.requestFullscreen().then(() => {
|
||||
document.documentElement.style.width = "100vw";
|
||||
document.documentElement.style.height = "100vh";
|
||||
changeScale(
|
||||
document.documentElement.clientWidth,
|
||||
document.documentElement.clientHeight
|
||||
);
|
||||
mainContainer.requestFullscreen().then(() => {
|
||||
document.removeEventListener("fullscreenchange", clearFullscreenFlag);
|
||||
document.addEventListener("fullscreenchange", clearFullscreenFlag);
|
||||
});
|
||||
return;
|
||||
}
|
||||
document.exitFullscreen().then(resetScale);
|
||||
if (document.fullscreenElement) document.exitFullscreen();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => settings.value,
|
||||
(val) => {
|
||||
localStorage.setItem("settings", JSON.stringify(val));
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
@ -68,5 +71,5 @@ export const useSettings = defineStore("settings", () => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return { settings, updateSettings, rewriteSettings, changeScale };
|
||||
return { settings, updateSettings, rewriteSettings };
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user