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

Compare commits

base: mt-fe-group:0d96fec181d029dbfe16def1fbb8f25faae0cb0e
Branches Tags
mt-fe-group:master
...
compare: mt-fe-group:e25dfe8f028bec719f34b09473db398b70b16187
Branches Tags
mt-fe-group:master

4 Commits
0d96fec181 ... e25dfe8f02

Author SHA1 Message Date
DESKTOP-FUDKNA8\znjsz
e25dfe8f02 1 2024-01-23 16:49:29 +08:00
DESKTOP-FUDKNA8\znjsz
98dd4428af 1 2024-01-23 16:32:08 +08:00
DESKTOP-FUDKNA8\znjsz
8402afcdfc update fullscreen layout 2024-01-23 15:39:15 +08:00
DESKTOP-FUDKNA8\znjsz
90c29c141c solve fullscreen issue 2024-01-23 14:55:16 +08:00
12 changed files with 544 additions and 258 deletions
Show Stats Expand all files Collapse all files

14
package-lock.json generated
View File

@ -11,6 +11,7 @@
"echarts": "^5.4.3", "echarts": "^5.4.3",
"element-plus": "^2.4.4", "element-plus": "^2.4.4",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"screenfull": "^6.0.2",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue3-marquee": "^4.1.0" "vue3-marquee": "^4.1.0"
}, },
@ -1123,6 +1124,14 @@
"fsevents": "~2.3.2" "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": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -1888,6 +1897,11 @@
"fsevents": "~2.3.2" "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": { "source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"echarts": "^5.4.3", "echarts": "^5.4.3",
"element-plus": "^2.4.4", "element-plus": "^2.4.4",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"screenfull": "^6.0.2",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue3-marquee": "^4.1.0" "vue3-marquee": "^4.1.0"
}, },

35
src/MainPage.vue
View File

@ -18,7 +18,7 @@ const currentPage = ref("3d");
const handlePageChange = (page) => { const handlePageChange = (page) => {
currentPage.value = page; currentPage.value = page;
}; };
const mainContainer = ref(null);
const { settings } = useSettings(); const { settings } = useSettings();
const timer = ref(null); const timer = ref(null);
@ -26,7 +26,7 @@ watch(() => settings.carousel, val => {
if (val) { if (val) {
timer.value = setInterval(() => { timer.value = setInterval(() => {
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length]) handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
}, settings.carouselTime); }, settings.carouselTime * 1000);
return; return;
} }
clearInterval(timer.value); clearInterval(timer.value);
@ -38,7 +38,7 @@ watch(() => settings.carouselTime, val => {
if (timer.value) clearInterval(timer.value); if (timer.value) clearInterval(timer.value);
timer.value = setInterval(() => { timer.value = setInterval(() => {
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length]) handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
}, val); }, val * 1000);
} }
}) })
@ -59,12 +59,37 @@ const pathMap = {
'/1-3': 3, '/1-3': 3,
'/1-4': 8 '/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> </script>
<template> <template>
<div class="main-container"> <div id="main-container" ref="mainContainer" class="main-container">
<DatetimeTool v-if="currentPage !== 'announcement'" /> <DatetimeTool v-if="currentPage !== 'announcement'" />
<Tools v-if="currentPage !== 'announcement'" /> <Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
<AppHeader v-if="currentPage !== 'announcement'" /> <AppHeader v-if="currentPage !== 'announcement'" />
<AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page" <AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
@home="() => handlePageChange('3d')" /> @home="() => handlePageChange('3d')" />

5
src/components/HeadTime.vue
View File

@ -27,4 +27,9 @@ onMounted(() => {
color: #69B4FF; color: #69B4FF;
line-height: 1; line-height: 1;
} }
:fullscreen .datetime {
right: 500px;
}
</style> </style>

4
src/components/NavMenu.vue
View File

@ -62,6 +62,10 @@ const handleClick = (page) => {
z-index: 10; z-index: 10;
} }
:fullscreen .nav-menu {
top: 25%;
}
.flex-list { .flex-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

31
src/components/SettingDialog.vue
View File

@ -1,8 +1,13 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useSettings } from '../store/settings' import { useSettings } from '../store/settings'
const emit = defineEmits(["close", "change-resolution"]);
const emit = defineEmits(["close"]); const store = useSettings();
const { settings, changeScale } = useSettings(); const settings = ref(store.settings);
store.$subscribe((mutation, state) => {
settings.value.fullscreen = state.settings.fullscreen;
})
function handleCancel() { function handleCancel() {
emit('close') emit('close')
@ -10,8 +15,13 @@ 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) // changeScale(settings.resolution.width, settings.resolution.height)
emit('close') 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> </script>
@ -26,9 +36,9 @@ function handleConfirm() {
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="resolution1">分辨率</label> <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> <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> <span>px</span>
</div> </div>
<div class="form-item selector"> <div class="form-item selector">
@ -173,11 +183,14 @@ button {
} }
.modal { .modal {
position: fixed; /* position: fixed;
height: 1080px;
width: 1920px; */
position: absolute;
height: 100%;
width: 100%;
left: 0; left: 0;
top: 0; top: 0;
height: 1080px;
width: 1920px;
background: #0003; background: #0003;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
z-index: 999; z-index: 999;

30
src/components/Tools.vue
View File

@ -6,33 +6,46 @@ import IconSetting from "../assets/menu_icon/IconSetting.vue";
import SettingDialogVue from "./SettingDialog.vue"; import SettingDialogVue from "./SettingDialog.vue";
import { useSettings } from '../store/settings'; 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); const visible = ref(false);
function toHome() { function toHome() {
document.location.href = '/1-1' // document.location.href = '/1-1'
document.location.reload()
} }
function showDialog() { function showDialog() {
visible.value = true; visible.value = true;
} }
function toggleLunbo() { function toggleLunbo() {
settings.carousel = !settings.carousel; settings.value.carousel = !settings.value.carousel;
}
function handleChangeResolution(w, h) {
emit('change-resolution', w, h)
} }
</script> </script>
<template> <template>
<div class="tools"> <div id="tools-bar" class="tools">
<button @click="toHome"> <button @click="toHome">
<IconBack /> <IconBack />
</button> </button>
<button @click="showDialog"> <button @click="showDialog">
<IconSetting /> <IconSetting />
</button> </button>
<button @click="toggleLunbo"> <button style="position: relative;" @click="toggleLunbo">
<IconExchange /> <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> </button>
</div> </div>
<SettingDialogVue v-if="visible" @close="visible = false;" /> <SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
</template> </template>
<style scoped> <style scoped>
@ -78,4 +91,5 @@ button:hover svg #back-btn,
button:hover svg #setting-btn, button:hover svg #setting-btn,
button:hover svg #switch-btn { button:hover svg #switch-btn {
fill: #b1daff !important; fill: #b1daff !important;
}</style> }
</style>

569
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 } 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'
@ -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> </script>
<template> <template>
<div class="triple-page" :class="['line-' + line]"> <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上片
@ -79,7 +108,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -159,7 +188,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -167,7 +196,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -186,7 +215,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -244,7 +273,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -322,7 +351,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -368,7 +397,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -393,7 +422,7 @@ store.$subscribe((mutation, state) => {
</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上片
@ -431,7 +460,7 @@ store.$subscribe((mutation, state) => {
</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">
@ -487,7 +516,7 @@ store.$subscribe((mutation, state) => {
<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'" />
@ -521,7 +550,7 @@ store.$subscribe((mutation, state) => {
</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'" />
@ -552,7 +581,11 @@ store.$subscribe((mutation, state) => {
<style scoped> <style scoped>
.triple-page { .triple-page {
background: #ccc1; /* background: #ccc1; */
background-size: 1920px 1080px;
/* background-size: 100% 100%; */
background-position: 0 -100px;
background-repeat: no-repeat;
/* flex: 1; /* flex: 1;
position: relative; */ position: relative; */
position: absolute; position: absolute;
@ -587,474 +620,626 @@ store.$subscribe((mutation, state) => {
gap: 8px; 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) { .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 */
.info-3 .info:nth-child(1) { .info-3 .info:nth-child(1) {
left: 500px; /* left: 500px;
bottom: 420px; bottom: 420px; */
top: 700px;
} }
/* 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; */
top: 700px;
} }
.info-5 .info:nth-child(2) { .info-5 .info:nth-child(2) {
left: 740px; /* left: 740px;
bottom: 280px; bottom: 280px; */
top: 720px;
left: 240px;
} }
.info-5 .info:nth-child(3) { .info-5 .info:nth-child(3) {
left: 960px; /* left: 960px;
bottom: 240px; bottom: 240px; */
top: 760px;
left: 440px;
} }
.info-5 .info:nth-child(4) { .info-5 .info:nth-child(4) {
left: 460px; /* left: 460px;
bottom: 490px; bottom: 490px; */
top: 420px;
left: 70px;
} }
.info-5 .info:nth-child(5) { .info-5 .info:nth-child(5) {
left: 760px; /* left: 760px;
bottom: 490px; bottom: 490px; */
top: 430px;
left: 230px;
} }
.info-5 .info:nth-child(6) { .info-5 .info:nth-child(6) {
left: 1060px; /* left: 1060px;
bottom: 450px; bottom: 450px; */
top: 450px;
left: 440px;
} }
.info-5 .info:nth-child(7) { .info-5 .info:nth-child(7) {
left: 570px; /* left: 570px;
top: 190px; top: 190px; */
top: 200px;
left: 100px;
} }
.info-5 .info:nth-child(8) { .info-5 .info:nth-child(8) {
left: 890px; /* left: 890px;
top: 200px; */
top: 200px; top: 200px;
left: 320px;
} }
.info-5 .info:nth-child(9) { .info-5 .info:nth-child(9) {
left: 1190px; /* left: 1190px;
top: 200px; */
top: 200px; top: 200px;
left: 490px;
} }
/* info 6 */ /* info 6 */
.info-6 .info:nth-child(1) { .info-6 .info:nth-child(1) {
left: 480px; /* left: 480px;
bottom: 530px; bottom: 530px; */
top: 400px;
left: 20px;
} }
.info-6 .info:nth-child(2) { .info-6 .info:nth-child(2) {
left: 720px; /* left: 720px;
bottom: 470px; bottom: 470px; */
left: 340px;
top: 450px;
} }
.info-6 .info:nth-child(3) { .info-6 .info:nth-child(3) {
left: 990px; /* left: 990px;
bottom: 460px; bottom: 460px; */
top: 490px;
left: 500px;
} }
.info-6 .info:nth-child(4) { .info-6 .info:nth-child(4) {
left: 510px; /* left: 510px; */
top: 260px; top: 260px;
left: 100px;
} }
.info-6 .info:nth-child(5) { .info-6 .info:nth-child(5) {
left: 810px; /* left: 810px; */
top: 260px; top: 260px;
left: 300px;
} }
.info-6 .info:nth-child(6) { .info-6 .info:nth-child(6) {
left: 1110px; /* left: 1110px; */
top: 280px; top: 280px;
left: 560px;
} }
.info-6 .info:nth-child(7) { .info-6 .info:nth-child(7) {
left: 600px; /* left: 600px; */
top: 110px; top: 110px;
left: 100px;
} }
.info-6 .info:nth-child(8) { .info-6 .info:nth-child(8) {
left: 900px; /* left: 900px; */
top: 110px; top: 110px;
left: 340px;
} }
.info-6 .info:nth-child(9) { .info-6 .info:nth-child(9) {
left: 1200px; /* left: 1200px; */
top: 110px; top: 110px;
left: 550px;
} }
.info-6 .info:nth-child(10) { .info-6 .info:nth-child(10) {
left: 650px; /* left: 650px; */
left: 120px;
top: 20px; top: 20px;
} }
.info-6 .info:nth-child(11) { .info-6 .info:nth-child(11) {
left: 950px; /* left: 950px; */
left: 330px;
top: 30px; top: 30px;
} }
.info-6 .info:nth-child(12) { .info-6 .info:nth-child(12) {
left: 1230px; /* left: 1230px; */
left: 560px;
top: 20px; top: 20px;
} }
/* info 7 */ /* info 7 */
.info-7 .info:nth-child(1) { .info-7 .info:nth-child(1) {
left: 400px; /* left: 400px;
bottom: 440px; bottom: 440px; */
top: 500px;
} }
.info-7 .info:nth-child(2) { .info-7 .info:nth-child(2) {
left: 670px; /* left: 670px;
bottom: 440px; bottom: 440px; */
top: 500px;
left: 200px;
} }
.info-7 .info:nth-child(3) { .info-7 .info:nth-child(3) {
left: 960px; /* left: 960px;
bottom: 450px; bottom: 450px; */
top: 500px;
left: 450px;
} }
.info-7 .info:nth-child(4) { .info-7 .info:nth-child(4) {
left: 310px; /* left: 310px;
bottom: 260px; bottom: 260px; */
top: 700px;
left: -100px;
} }
.info-7 .info:nth-child(5) { .info-7 .info:nth-child(5) {
left: 620px; /* left: 620px;
bottom: 260px; bottom: 260px; */
top: 700px;
left: 100px;
} }
.info-7 .info:nth-child(6) { .info-7 .info:nth-child(6) {
left: 1110px; /* left: 1110px;
bottom: 240px; bottom: 240px; */
top: 700px;
left: 500px;
} }
.info-7 .info:nth-child(7) { .info-7 .info:nth-child(7) {
left: 800px; /* left: 800px;
top: 50px; top: 50px; */
top: 20px;
left: 500px;
} }
/* info 8 */ /* info 8 */
.info-8 .info:nth-child(1) { .info-8 .info:nth-child(1) {
left: 660px; /* left: 660px;
bottom: 550px; bottom: 550px; */
top: 800px;
left: 200px;
} }
.info-8 .info:nth-child(2) { .info-8 .info:nth-child(2) {
left: 990px; /* left: 990px;
bottom: 690px; bottom: 690px; */
top: 400px;
left: 400px;
} }
.info-8 .info:nth-child(3) { .info-8 .info:nth-child(3) {
left: 700px; /* left: 700px;
top: 80px; top: 80px; */
top: 90px;
left: 400px;
} }
.info-8 .info:nth-child(4) { .info-8 .info:nth-child(4) {
left: 1100px; /* left: 1100px;
top: 80px; top: 80px; */
top: 0;
left: 500px;
} }
/* info 9 */ /* info 9 */
.info-9 .info:nth-child(1) { .info-9 .info:nth-child(1) {
left: 400px; /* left: 400px;
bottom: 250px; bottom: 250px; */
top: 600px;
} }
.info-9 .info:nth-child(2) { .info-9 .info:nth-child(2) {
left: 1100px; /* left: 1100px;
bottom: 220px; bottom: 220px; */
top: 630px;
left: 430px;
} }
.info-9 .info:nth-child(3) { .info-9 .info:nth-child(3) {
left: 496px; /* left: 496px;
bottom: 570px; bottom: 570px; */
top: 300px;
left: 210px;
} }
.info-9 .info:nth-child(4) { .info-9 .info:nth-child(4) {
left: 1100px; /* left: 1100px;
bottom: 490px; bottom: 490px; */
top: 380px;
left: 550px;
} }
.info-9 .info:nth-child(5) { .info-9 .info:nth-child(5) {
left: 670px; /* left: 670px;
top: 144px; top: 144px; */
top: 88px;
left: 180px;
} }
.info-9 .info:nth-child(6) { .info-9 .info:nth-child(6) {
left: 1100px; /* left: 1100px;
top: 155px; top: 155px; */
top: 90px;
left: 420px;
} }
/* info 10 */ /* info 10 */
.info-10 .info:nth-child(1) { .info-10 .info:nth-child(1) {
left: 620px; /* left: 620px;
bottom: 450px; bottom: 450px; */
top: 500px;
left: 200px;
} }
.info-10 .info:nth-child(2) { .info-10 .info:nth-child(2) {
left: 1000px; /* left: 1000px;
bottom: 320px; bottom: 320px; */
top: 530px;
left: 330px;
} }
.info-10 .info:nth-child(3) { .info-10 .info:nth-child(3) {
left: 736px; /* left: 736px;
top: 270px; top: 270px; */
top: 230px;
left: 230px;
} }
.info-10 .info:nth-child(4) { .info-10 .info:nth-child(4) {
left: 1200px; /* left: 1200px;
top: 330px; */
top: 330px; top: 330px;
left: 430px;
} }
.info-10 .info:nth-child(5) { .info-10 .info:nth-child(5) {
left: 870px; /* left: 870px;
top: 144px; top: 144px; */
top: 150px;
left: 360px;
} }
.info-10 .info:nth-child(6) { .info-10 .info:nth-child(6) {
left: 1100px; /* left: 1100px;
top: 195px; top: 195px; */
top: 200px;
left: 490px;
} }
.info-10 .info:nth-child(7) { .info-10 .info:nth-child(7) {
left: 900px; /* left: 900px;
top: 55px; top: 55px; */
top: 90px;
left: 500px;
} }
.info-10 .info:nth-child(8) { .info-10 .info:nth-child(8) {
left: 1200px; /* left: 1200px;
top: 68px; top: 68px; */
top: 90px;
right: -120px;
} }
/* 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 */
.line-1 { .line-1 {
background: url(../assets/model/F1.png) no-repeat;
background-size: 1920px 1080px; background-image: url(../assets/model/F1.png)
background-position: 0 -80px;
} }
.line-2 { .line-2 {
background: url(../assets/model/F2.png) no-repeat; background-image: url(../assets/model/F2.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-3 { .line-3 {
background: url(../assets/model/F3.png) no-repeat; background-image: url(../assets/model/F3.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-4 { .line-4 {
background: url(../assets/model/F4.png) no-repeat; background-image: url(../assets/model/F4.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-5 { .line-5 {
background: url(../assets/model/F5.png) no-repeat; background-image: url(../assets/model/F5.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-6 { .line-6 {
background: url(../assets/model/F6.png) no-repeat; background-image: url(../assets/model/F6.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-7 { .line-7 {
background: url(../assets/model/F7.png) no-repeat; background-image: url(../assets/model/F7.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-8 { .line-8 {
background: url(../assets/model/F8.png) no-repeat; background-image: url(../assets/model/F8.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-9 { .line-9 {
background: url(../assets/model/F9.png) no-repeat; background-image: url(../assets/model/F9.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-10 { .line-10 {
background: url(../assets/model/F10.png) no-repeat; background-image: url(../assets/model/F10.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-11 { .line-11 {
background: url(../assets/model/F11.png) no-repeat; background-image: url(../assets/model/F11.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-12 { .line-12 {
background: url(../assets/model/F12.png) no-repeat; background-image: url(../assets/model/F12.png);
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
</style> </style>

6
src/pages/AlertListPage.vue
View File

@ -119,6 +119,12 @@ store.$subscribe((mutation, state) => {
flex-direction: column; flex-direction: column;
} }
:fullscreen .alert-list {
width: 35%;
top: 32px;
height: calc(100% - 64px);
}
.alert-list__table { .alert-list__table {
height: calc(100% - 72px); height: calc(100% - 72px);
/* background: linear-gradient(to right, transparent, #0ba6ff80); */ /* background: linear-gradient(to right, transparent, #0ba6ff80); */

21
src/pages/AnnouncementPage.vue
View File

@ -40,14 +40,12 @@ const handleClose = () => {
<div class="announcement-page"> <div class="announcement-page">
<h1 class="announcement-title">公告栏</h1> <h1 class="announcement-title">公告栏</h1>
<main class="announcement-content"> <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> <div v-html="vertical_content"></div>
</ScrollText> </ScrollText>
</main> </main>
<div class="announcement-footer"> <div class="announcement-footer">
<button <button id="return-btn" style="
id="return-btn"
style="
position: absolute; position: absolute;
right: 32px; right: 32px;
top: 56px; top: 56px;
@ -55,12 +53,10 @@ const handleClose = () => {
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
" " @click="handleClose">
@click="handleClose"
>
<IconBack color="#f00" /> <IconBack color="#f00" />
</button> </button>
<ScrollText> {{ horizontal_content }} </ScrollText> <ScrollText :duration="50"> {{ horizontal_content }} </ScrollText>
</div> </div>
</div> </div>
</template> </template>
@ -103,6 +99,11 @@ const handleClose = () => {
margin-bottom: 32px; margin-bottom: 32px;
} }
:fullscreen .announcement-content {
margin-bottom: 5%;
padding: 56px 80px 12px 80px;
}
.announcement-footer { .announcement-footer {
height: 144px; height: 144px;
/* background: #ccc1; */ /* background: #ccc1; */
@ -112,4 +113,8 @@ const handleClose = () => {
font-family: sans-serif; font-family: sans-serif;
user-select: none; user-select: none;
} }
:fullscreen .announcement-footer {
line-height: 80px;
}
</style> </style>

11
src/pages/DataPage.vue
View File

@ -33,4 +33,15 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
flex-direction: column; flex-direction: column;
justify-content: space-around; 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> </style>

55
src/store/settings.js
View File

@ -2,48 +2,51 @@ import { defineStore } from "pinia";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
export const useSettings = defineStore("settings", () => { export const useSettings = defineStore("settings", () => {
const settings = ref({ const initialSettings = localStorage.getItem("settings");
const settings = ref(
initialSettings
? JSON.parse(initialSettings)
: {
resolution: { resolution: {
width: 1920, width: 1920,
height: 1080, height: 1080,
}, },
carousel: false, carousel: false,
carouselTime: 10000, // s carouselTime: 10, // s
fullscreen: false, fullscreen: false,
eqStatus: true, eqStatus: true,
}); }
);
function changeScale(width, height) { const clearFullscreenFlag = (e) => {
const xScale = width / 1920; if (!document.fullscreenElement) {
const yScale = height / 1080; settings.value.fullscreen = false;
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( watch(
() => settings.value.fullscreen, () => settings.value.fullscreen,
(val) => { (val) => {
const mainContainer = document.getElementById("main-container");
if (val) { if (val) {
document.documentElement.requestFullscreen().then(() => { mainContainer.requestFullscreen().then(() => {
document.documentElement.style.width = "100vw"; document.removeEventListener("fullscreenchange", clearFullscreenFlag);
document.documentElement.style.height = "100vh"; document.addEventListener("fullscreenchange", clearFullscreenFlag);
changeScale(
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
}); });
return; 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; break;
} }
} }
return { settings, updateSettings, rewriteSettings, changeScale }; return { settings, updateSettings, rewriteSettings };
}); });