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

Compare commits

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

No commits in common. "e25dfe8f028bec719f34b09473db398b70b16187" and "0d96fec181d029dbfe16def1fbb8f25faae0cb0e" have entirely different histories.
e25dfe8f02 ... 0d96fec181

12 changed files with 258 additions and 544 deletions
Show Stats Expand all files Collapse all files

14
package-lock.json generated
View File

@ -11,7 +11,6 @@
"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"
}, },
@ -1124,14 +1123,6 @@
"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",
@ -1897,11 +1888,6 @@
"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,7 +12,6 @@
"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 * 1000); }, settings.carouselTime);
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 * 1000); }, val);
} }
}) })
@ -59,37 +59,12 @@ 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 id="main-container" ref="mainContainer" class="main-container"> <div class="main-container">
<DatetimeTool v-if="currentPage !== 'announcement'" /> <DatetimeTool v-if="currentPage !== 'announcement'" />
<Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" /> <Tools v-if="currentPage !== 'announcement'" />
<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,9 +27,4 @@ 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,10 +62,6 @@ 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,13 +1,8 @@
<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 store = useSettings(); const emit = defineEmits(["close"]);
const settings = ref(store.settings); const { settings, changeScale } = useSettings();
store.$subscribe((mutation, state) => {
settings.value.fullscreen = state.settings.fullscreen;
})
function handleCancel() { function handleCancel() {
emit('close') emit('close')
@ -15,13 +10,8 @@ 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)
if (settings.value.resolution.width < 480) store.settings.resolution.width = 480; emit('close')
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>
@ -36,9 +26,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" min="480" max="7680" v-model="settings.resolution.width" /> <input id="resolution1" type="number" v-model="settings.resolution.width" />
<span>X</span> <span>X</span>
<input id="resolution2" type="number" min="270" max="4320" v-model="settings.resolution.height" /> <input id="resolution2" type="number" v-model="settings.resolution.height" />
<span>px</span> <span>px</span>
</div> </div>
<div class="form-item selector"> <div class="form-item selector">
@ -183,14 +173,11 @@ 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,46 +6,33 @@ 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 emit = defineEmits(['change-resolution']) const { settings } = useSettings();
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.value.carousel = !settings.value.carousel; settings.carousel = !settings.carousel;
}
function handleChangeResolution(w, h) {
emit('change-resolution', w, h)
} }
</script> </script>
<template> <template>
<div id="tools-bar" class="tools"> <div class="tools">
<button @click="toHome"> <button @click="toHome">
<IconBack /> <IconBack />
</button> </button>
<button @click="showDialog"> <button @click="showDialog">
<IconSetting /> <IconSetting />
</button> </button>
<button style="position: relative;" @click="toggleLunbo"> <button @click="toggleLunbo">
<span v-if="settings.carousel" <IconExchange />
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;" @change-resolution="handleChangeResolution" /> <SettingDialogVue v-if="visible" @close="visible = false;" />
</template> </template>
<style scoped> <style scoped>
@ -91,5 +78,4 @@ 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, watch, onMounted } from 'vue'; import { ref, computed } 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,40 +37,11 @@ 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" ref="part3d" :class="['line-' + line]"> <div class="triple-page" :class="['line-' + line]">
<div class="absolute-full info-1" v-if="eqStatus && line == '1'"> <div class="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上片
@ -108,7 +79,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-2" v-if="eqStatus && line == '2'"> <div class="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'" />
@ -188,7 +159,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-3" v-if="eqStatus && line == '3'"> <div class="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'" />
@ -196,7 +167,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-4" v-if="eqStatus && line == '4'"> <div class="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'" />
@ -215,7 +186,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-5" v-if="eqStatus && line == '5'"> <div class="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'" />
@ -273,7 +244,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-6" v-if="eqStatus && line == '6'"> <div class="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'" />
@ -351,7 +322,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-7" v-if="eqStatus && line == '7'"> <div class="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'" />
@ -397,7 +368,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-8" v-if="eqStatus && line == '8'"> <div class="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'" />
@ -422,7 +393,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-9" v-if="eqStatus && line == '9'"> <div class="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上片
@ -460,7 +431,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-10" v-if="eqStatus && 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"> <div class="info">
@ -516,7 +487,7 @@ watch(() => settings.fullscreen, val => {
<span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span> <span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span>
</div> </div>
</div> </div>
<div class="absolute-full info-11" v-if="eqStatus && line == '11'"> <div class="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'" />
@ -550,7 +521,7 @@ watch(() => settings.fullscreen, val => {
</h1> </h1>
</div> </div>
</div> </div>
<div class="absolute-full info-12" v-if="eqStatus && line == '12'"> <div class="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'" />
@ -581,11 +552,7 @@ watch(() => settings.fullscreen, val => {
<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;
@ -620,626 +587,474 @@ watch(() => settings.fullscreen, val => {
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: 150px; */ bottom: 250px;
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-image: url(../assets/model/F1.png) background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-2 { .line-2 {
background-image: url(../assets/model/F2.png); background: url(../assets/model/F2.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-3 { .line-3 {
background-image: url(../assets/model/F3.png); background: url(../assets/model/F3.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-4 { .line-4 {
background-image: url(../assets/model/F4.png); background: url(../assets/model/F4.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-5 { .line-5 {
background-image: url(../assets/model/F5.png); background: url(../assets/model/F5.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-6 { .line-6 {
background-image: url(../assets/model/F6.png); background: url(../assets/model/F6.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-7 { .line-7 {
background-image: url(../assets/model/F7.png); background: url(../assets/model/F7.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-8 { .line-8 {
background-image: url(../assets/model/F8.png); background: url(../assets/model/F8.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-9 { .line-9 {
background-image: url(../assets/model/F9.png); background: url(../assets/model/F9.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-10 { .line-10 {
background-image: url(../assets/model/F10.png); background: url(../assets/model/F10.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-11 { .line-11 {
background-image: url(../assets/model/F11.png); background: url(../assets/model/F11.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
.line-12 { .line-12 {
background-image: url(../assets/model/F12.png); background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
} }
</style> </style>

6
src/pages/AlertListPage.vue
View File

@ -119,12 +119,6 @@ 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,12 +40,14 @@ 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="50" :pause-on-hover="true"> <ScrollText :vertical="true" :duration="10" :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 id="return-btn" style=" <button
id="return-btn"
style="
position: absolute; position: absolute;
right: 32px; right: 32px;
top: 56px; top: 56px;
@ -53,10 +55,12 @@ 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 :duration="50"> {{ horizontal_content }} </ScrollText> <ScrollText> {{ horizontal_content }} </ScrollText>
</div> </div>
</div> </div>
</template> </template>
@ -99,11 +103,6 @@ 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; */
@ -113,8 +112,4 @@ 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,15 +33,4 @@ 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,51 +2,48 @@ 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 initialSettings = localStorage.getItem("settings"); const settings = ref({
const settings = ref(
initialSettings
? JSON.parse(initialSettings)
: {
resolution: { resolution: {
width: 1920, width: 1920,
height: 1080, height: 1080,
}, },
carousel: false, carousel: false,
carouselTime: 10, // s carouselTime: 10000, // s
fullscreen: false, fullscreen: false,
eqStatus: true, eqStatus: true,
} });
);
const clearFullscreenFlag = (e) => { function changeScale(width, height) {
if (!document.fullscreenElement) { const xScale = width / 1920;
settings.value.fullscreen = false; 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( watch(
() => settings.value.fullscreen, () => settings.value.fullscreen,
(val) => { (val) => {
const mainContainer = document.getElementById("main-container");
if (val) { if (val) {
mainContainer.requestFullscreen().then(() => { document.documentElement.requestFullscreen().then(() => {
document.removeEventListener("fullscreenchange", clearFullscreenFlag); document.documentElement.style.width = "100vw";
document.addEventListener("fullscreenchange", clearFullscreenFlag); document.documentElement.style.height = "100vh";
changeScale(
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
}); });
return; return;
} }
if (document.fullscreenElement) document.exitFullscreen(); document.exitFullscreen().then(resetScale);
}
);
watch(
() => settings.value,
(val) => {
localStorage.setItem("settings", JSON.stringify(val));
},
{
immediate: true,
deep: true,
} }
); );
@ -71,5 +68,5 @@ export const useSettings = defineStore("settings", () => {
break; break;
} }
} }
return { settings, updateSettings, rewriteSettings }; return { settings, updateSettings, rewriteSettings, changeScale };
}); });