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",
"element-plus": "^2.4.4",
"pinia": "^2.1.7",
"screenfull": "^6.0.2",
"vue": "^3.3.11",
"vue3-marquee": "^4.1.0"
},
@ -1124,14 +1123,6 @@
"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",
@ -1897,11 +1888,6 @@
"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",

1
package.json
View File

@ -12,7 +12,6 @@
"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"
},

35
src/MainPage.vue
View File

@ -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 * 1000);
}, settings.carouselTime);
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 * 1000);
}, val);
}
})
@ -59,37 +59,12 @@ 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 id="main-container" ref="mainContainer" class="main-container">
<div class="main-container">
<DatetimeTool v-if="currentPage !== 'announcement'" />
<Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
<Tools v-if="currentPage !== 'announcement'" />
<AppHeader v-if="currentPage !== 'announcement'" />
<AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
@home="() => handlePageChange('3d')" />

5
src/components/HeadTime.vue
View File

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

4
src/components/NavMenu.vue
View File

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

31
src/components/SettingDialog.vue
View File

@ -1,13 +1,8 @@
<script setup>
import { ref } from 'vue';
import { useSettings } from '../store/settings'
const emit = defineEmits(["close", "change-resolution"]);
const store = useSettings();
const settings = ref(store.settings);
store.$subscribe((mutation, state) => {
settings.value.fullscreen = state.settings.fullscreen;
})
const emit = defineEmits(["close"]);
const { settings, changeScale } = useSettings();
function handleCancel() {
emit('close')
@ -15,13 +10,8 @@ function handleCancel() {
function handleConfirm() {
// alert(JSON.stringify(settings, null, 2))
// 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)
changeScale(settings.resolution.width, settings.resolution.height)
emit('close')
}
</script>
@ -36,9 +26,9 @@ function handleConfirm() {
</div>
<div class="form-item">
<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>
<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>
</div>
<div class="form-item selector">
@ -183,14 +173,11 @@ button {
}
.modal {
/* position: fixed;
height: 1080px;
width: 1920px; */
position: absolute;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
height: 1080px;
width: 1920px;
background: #0003;
backdrop-filter: blur(3px);
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 { 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);
function toHome() {
// document.location.href = '/1-1'
document.location.reload()
document.location.href = '/1-1'
}
function showDialog() {
visible.value = true;
}
function toggleLunbo() {
settings.value.carousel = !settings.value.carousel;
}
function handleChangeResolution(w, h) {
emit('change-resolution', w, h)
settings.carousel = !settings.carousel;
}
</script>
<template>
<div id="tools-bar" class="tools">
<div class="tools">
<button @click="toHome">
<IconBack />
</button>
<button @click="showDialog">
<IconSetting />
</button>
<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 @click="toggleLunbo">
<IconExchange />
</button>
</div>
<SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
<SettingDialogVue v-if="visible" @close="visible = false;" />
</template>
<style scoped>
@ -91,5 +78,4 @@ 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
View File

@ -2,7 +2,7 @@
<script setup>
import { useSettings } from '../store/settings';
import { useWsStore } from "../store";
import { ref, computed, watch, onMounted } from 'vue';
import { ref, computed } from 'vue';
import Icon from '../assets/svg/IconStatus.vue';
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>
<template>
<div class="triple-page" ref="part3d" :class="['line-' + line]">
<div class="absolute-full info-1" v-if="eqStatus && line == '1'">
<div class="triple-page" :class="['line-' + line]">
<div class="info-1" v-if="eqStatus && line == '1'">
<div class="info">
<h1>
<Icon :color="status['M7上片'] == 'error' ? '#ff3737' : status['M7上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M7上片
@ -108,7 +79,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['Z7钻孔机'] == 'error' ? '#ff3737' : status['Z7钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -188,7 +159,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -196,7 +167,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['B2清洗机'] == 'error' ? '#ff3737' : status['B2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -215,7 +186,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['M5上片'] == 'error' ? '#ff3737' : status['M5上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -273,7 +244,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['Z5钻孔机'] == 'error' ? '#ff3737' : status['Z5钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -351,7 +322,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['S5后储片台'] == 'error' ? '#ff3737' : status['S5后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -397,7 +368,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -422,7 +393,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['M2上片'] == 'error' ? '#ff3737' : status['M2上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M2上片
@ -460,7 +431,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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>M1清洗机</h1></div> -->
<div class="info">
@ -516,7 +487,7 @@ watch(() => settings.fullscreen, val => {
<span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span>
</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">
<h1>
<Icon :color="status['S7后储片台'] == 'error' ? '#ff3737' : status['S7后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -550,7 +521,7 @@ watch(() => settings.fullscreen, val => {
</h1>
</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">
<h1>
<Icon :color="status['B3前储片台'] == 'error' ? '#ff3737' : status['B3前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
@ -581,11 +552,7 @@ watch(() => settings.fullscreen, val => {
<style scoped>
.triple-page {
/* background: #ccc1; */
background-size: 1920px 1080px;
/* background-size: 100% 100%; */
background-position: 0 -100px;
background-repeat: no-repeat;
background: #ccc1;
/* flex: 1;
position: relative; */
position: absolute;
@ -620,626 +587,474 @@ watch(() => settings.fullscreen, val => {
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; */
top: 720px;
left: 0;
left: 490px;
bottom: 250px;
}
.info-1 .info:nth-child(2) {
/* left: 790px;
bottom: 210px; */
top: 780px;
left: 320px;
left: 790px;
bottom: 210px;
}
.info-1 .info:nth-child(3) {
/* left: 660px;
top: 480px; */
left: 660px;
top: 480px;
left: 90px;
}
.info-1 .info:nth-child(4) {
/* left: 910px;
top: 510px; */
top: 480px;
left: 320px;
left: 910px;
top: 510px;
}
.info-1 .info:nth-child(5) {
/* left: 880px;
top: 220px; */
top: 180px;
left: 220px;
left: 880px;
top: 220px;
}
.info-1 .info:nth-child(6) {
/* left: 1100px;
top: 260px; */
top: 180px;
left: 520px;
left: 1100px;
top: 260px;
}
/* info-2 */
.info-2 .info:nth-child(1) {
/* left: 580px;
bottom: 200px; */
top: 720px;
left: 32px;
left: 580px;
bottom: 200px;
}
.info-2 .info:nth-child(2) {
/* left: 940px;
bottom: 200px; */
top: 730px;
left: 380px;
left: 940px;
bottom: 200px;
}
.info-2 .info:nth-child(3) {
/* left: 640px;
bottom: 360px; */
top: 500px;
left: 120px;
left: 640px;
bottom: 360px;
}
.info-2 .info:nth-child(4) {
/* left: 940px;
bottom: 360px; */
top: 500px;
left: 390px;
left: 940px;
bottom: 360px;
}
.info-2 .info:nth-child(5) {
/* left: 660px;
bottom: 580px; */
top: 390px;
left: 120px;
left: 660px;
bottom: 580px;
}
.info-2 .info:nth-child(6) {
/* left: 1060px;
bottom: 520px; */
top: 400px;
left: 500px;
left: 1060px;
bottom: 520px;
}
.info-2 .info:nth-child(7) {
/* left: 720px;
top: 190px; */
top: 220px;
left: 120px;
left: 720px;
top: 190px;
}
.info-2 .info:nth-child(8) {
/* left: 1100px;
top: 260px; */
top: 270px;
left: 520px;
left: 1100px;
top: 260px;
}
.info-2 .info:nth-child(9) {
/* left: 800px;
top: 120px; */
top: 90px;
left: 220px;
left: 800px;
top: 120px;
}
.info-2 .info:nth-child(10) {
/* left: 1100px;
top: 144px; */
top: 110px;
left: 520px;
left: 1100px;
top: 144px;
}
.info-2 .info:nth-child(11) {
/* left: 800px;
top: 10px; */
top: 0;
left: 330px;
left: 800px;
top: 10px;
}
.info-2 .info:nth-child(12) {
/* left: 1100px;
top: 20px; */
top: 0;
left: 520px;
left: 1100px;
top: 20px;
}
/* info 3 */
.info-3 .info:nth-child(1) {
/* left: 500px;
bottom: 420px; */
top: 700px;
left: 500px;
bottom: 420px;
}
/* info 4 */
.info-4 .info:nth-child(1) {
/* left: 580px;
bottom: 200px; */
top: 600px;
left: 200px;
left: 580px;
bottom: 200px;
}
.info-4 .info:nth-child(2) {
/* left: 800px;
top: 100px; */
top: 200px;
left: 200px;
left: 800px;
top: 100px;
}
.info-4 .info:nth-child(3) {
/* left: 1240px;
top: 40px; */
top: 10px;
left: 500px;
left: 1240px;
top: 40px;
}
/* info 5 */
.info-5 .info:nth-child(1) {
/* left: 490px;
bottom: 300px; */
top: 700px;
left: 490px;
bottom: 300px;
}
.info-5 .info:nth-child(2) {
/* left: 740px;
bottom: 280px; */
top: 720px;
left: 240px;
left: 740px;
bottom: 280px;
}
.info-5 .info:nth-child(3) {
/* left: 960px;
bottom: 240px; */
top: 760px;
left: 440px;
left: 960px;
bottom: 240px;
}
.info-5 .info:nth-child(4) {
/* left: 460px;
bottom: 490px; */
top: 420px;
left: 70px;
left: 460px;
bottom: 490px;
}
.info-5 .info:nth-child(5) {
/* left: 760px;
bottom: 490px; */
top: 430px;
left: 230px;
left: 760px;
bottom: 490px;
}
.info-5 .info:nth-child(6) {
/* left: 1060px;
bottom: 450px; */
top: 450px;
left: 440px;
left: 1060px;
bottom: 450px;
}
.info-5 .info:nth-child(7) {
/* left: 570px;
top: 190px; */
top: 200px;
left: 100px;
left: 570px;
top: 190px;
}
.info-5 .info:nth-child(8) {
/* left: 890px;
top: 200px; */
left: 890px;
top: 200px;
left: 320px;
}
.info-5 .info:nth-child(9) {
/* left: 1190px;
top: 200px; */
left: 1190px;
top: 200px;
left: 490px;
}
/* info 6 */
.info-6 .info:nth-child(1) {
/* left: 480px;
bottom: 530px; */
top: 400px;
left: 20px;
left: 480px;
bottom: 530px;
}
.info-6 .info:nth-child(2) {
/* left: 720px;
bottom: 470px; */
left: 340px;
top: 450px;
left: 720px;
bottom: 470px;
}
.info-6 .info:nth-child(3) {
/* left: 990px;
bottom: 460px; */
top: 490px;
left: 500px;
left: 990px;
bottom: 460px;
}
.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: 120px;
left: 650px;
top: 20px;
}
.info-6 .info:nth-child(11) {
/* left: 950px; */
left: 330px;
left: 950px;
top: 30px;
}
.info-6 .info:nth-child(12) {
/* left: 1230px; */
left: 560px;
left: 1230px;
top: 20px;
}
/* info 7 */
.info-7 .info:nth-child(1) {
/* left: 400px;
bottom: 440px; */
top: 500px;
left: 400px;
bottom: 440px;
}
.info-7 .info:nth-child(2) {
/* left: 670px;
bottom: 440px; */
top: 500px;
left: 200px;
left: 670px;
bottom: 440px;
}
.info-7 .info:nth-child(3) {
/* left: 960px;
bottom: 450px; */
top: 500px;
left: 450px;
left: 960px;
bottom: 450px;
}
.info-7 .info:nth-child(4) {
/* left: 310px;
bottom: 260px; */
top: 700px;
left: -100px;
left: 310px;
bottom: 260px;
}
.info-7 .info:nth-child(5) {
/* left: 620px;
bottom: 260px; */
top: 700px;
left: 100px;
left: 620px;
bottom: 260px;
}
.info-7 .info:nth-child(6) {
/* left: 1110px;
bottom: 240px; */
top: 700px;
left: 500px;
left: 1110px;
bottom: 240px;
}
.info-7 .info:nth-child(7) {
/* left: 800px;
top: 50px; */
top: 20px;
left: 500px;
left: 800px;
top: 50px;
}
/* info 8 */
.info-8 .info:nth-child(1) {
/* left: 660px;
bottom: 550px; */
top: 800px;
left: 200px;
left: 660px;
bottom: 550px;
}
.info-8 .info:nth-child(2) {
/* left: 990px;
bottom: 690px; */
top: 400px;
left: 400px;
left: 990px;
bottom: 690px;
}
.info-8 .info:nth-child(3) {
/* left: 700px;
top: 80px; */
top: 90px;
left: 400px;
left: 700px;
top: 80px;
}
.info-8 .info:nth-child(4) {
/* left: 1100px;
top: 80px; */
top: 0;
left: 500px;
left: 1100px;
top: 80px;
}
/* info 9 */
.info-9 .info:nth-child(1) {
/* left: 400px;
bottom: 250px; */
top: 600px;
left: 400px;
bottom: 250px;
}
.info-9 .info:nth-child(2) {
/* left: 1100px;
bottom: 220px; */
top: 630px;
left: 430px;
left: 1100px;
bottom: 220px;
}
.info-9 .info:nth-child(3) {
/* left: 496px;
bottom: 570px; */
top: 300px;
left: 210px;
left: 496px;
bottom: 570px;
}
.info-9 .info:nth-child(4) {
/* left: 1100px;
bottom: 490px; */
top: 380px;
left: 550px;
left: 1100px;
bottom: 490px;
}
.info-9 .info:nth-child(5) {
/* left: 670px;
top: 144px; */
top: 88px;
left: 180px;
left: 670px;
top: 144px;
}
.info-9 .info:nth-child(6) {
/* left: 1100px;
top: 155px; */
top: 90px;
left: 420px;
left: 1100px;
top: 155px;
}
/* info 10 */
.info-10 .info:nth-child(1) {
/* left: 620px;
bottom: 450px; */
top: 500px;
left: 200px;
left: 620px;
bottom: 450px;
}
.info-10 .info:nth-child(2) {
/* left: 1000px;
bottom: 320px; */
top: 530px;
left: 330px;
left: 1000px;
bottom: 320px;
}
.info-10 .info:nth-child(3) {
/* left: 736px;
top: 270px; */
top: 230px;
left: 230px;
left: 736px;
top: 270px;
}
.info-10 .info:nth-child(4) {
/* left: 1200px;
top: 330px; */
left: 1200px;
top: 330px;
left: 430px;
}
.info-10 .info:nth-child(5) {
/* left: 870px;
top: 144px; */
top: 150px;
left: 360px;
left: 870px;
top: 144px;
}
.info-10 .info:nth-child(6) {
/* left: 1100px;
top: 195px; */
top: 200px;
left: 490px;
left: 1100px;
top: 195px;
}
.info-10 .info:nth-child(7) {
/* left: 900px;
top: 55px; */
top: 90px;
left: 500px;
left: 900px;
top: 55px;
}
.info-10 .info:nth-child(8) {
/* left: 1200px;
top: 68px; */
top: 90px;
right: -120px;
left: 1200px;
top: 68px;
}
/* info 11 */
.info-11 .info:nth-child(1) {
/* left: 570px;
bottom: 450px; */
left: 10px;
top: 500px;
left: 570px;
bottom: 450px;
}
.info-11 .info:nth-child(2) {
/* left: 1100px;
bottom: 410px; */
left: 500px;
top: 500px;
left: 1100px;
bottom: 410px;
}
.info-11 .info:nth-child(3) {
/* left: 436px;
bottom: 170px; */
left: 150px;
top: 680px;
left: 436px;
bottom: 170px;
}
.info-11 .info:nth-child(4) {
/* left: 1036px;
bottom: 170px; */
left: 320px;
top: 720px;
left: 1036px;
bottom: 170px;
}
.info-11 .info:nth-child(5) {
/* left: 890px;
top: 94px; */
left: 500px;
top: 10px;
left: 890px;
top: 94px;
}
/* info 12 */
.info-12 .info:nth-child(1) {
/* left: 570px;
bottom: 150px; */
top: 620px;
left: 220px;
left: 570px;
bottom: 250px;
}
.info-12 .info:nth-child(2) {
/* left: 800px;
bottom: 80px; */
top: 720px;
left: 0;
left: 800px;
bottom: 80px;
}
.info-12 .info:nth-child(3) {
/* left: 1136px;
bottom: 670px; */
top: 220px;
left: 500px;
left: 1136px;
bottom: 670px;
}
.info-12 .info:nth-child(4) {
/* left: 836px;
top: 70px; */
top: 10px;
left: 420px;
left: 836px;
top: 70px;
}
/* other */
.line-1 {
background-image: url(../assets/model/F1.png)
background: url(../assets/model/F1.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
.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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
background-image: url(../assets/model/F12.png);
background: url(../assets/model/F12.png) no-repeat;
background-size: 1920px 1080px;
background-position: 0 -80px;
}
</style>

6
src/pages/AlertListPage.vue
View File

@ -119,12 +119,6 @@ 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); */

21
src/pages/AnnouncementPage.vue
View File

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

11
src/pages/DataPage.vue
View File

@ -33,15 +33,4 @@ 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>

55
src/store/settings.js
View File

@ -2,51 +2,48 @@ import { defineStore } from "pinia";
import { ref, watch } from "vue";
export const useSettings = defineStore("settings", () => {
const initialSettings = localStorage.getItem("settings");
const settings = ref(
initialSettings
? JSON.parse(initialSettings)
: {
const settings = ref({
resolution: {
width: 1920,
height: 1080,
},
carousel: false,
carouselTime: 10, // s
carouselTime: 10000, // s
fullscreen: false,
eqStatus: true,
}
);
});
const clearFullscreenFlag = (e) => {
if (!document.fullscreenElement) {
settings.value.fullscreen = false;
}
function changeScale(width, height) {
const xScale = width / 1920;
const yScale = height / 1080;
const style = {
transform: `scale(${xScale}, ${yScale})`,
transformOrigin: "top left",
};
document.documentElement.style.transform = style.transform;
document.documentElement.style.transformOrigin = style.transformOrigin;
}
function resetScale() {
document.documentElement.style.transform = "initial";
document.documentElement.style.transformOrigin = "initial";
}
watch(
() => settings.value.fullscreen,
(val) => {
const mainContainer = document.getElementById("main-container");
if (val) {
mainContainer.requestFullscreen().then(() => {
document.removeEventListener("fullscreenchange", clearFullscreenFlag);
document.addEventListener("fullscreenchange", clearFullscreenFlag);
document.documentElement.requestFullscreen().then(() => {
document.documentElement.style.width = "100vw";
document.documentElement.style.height = "100vh";
changeScale(
document.documentElement.clientWidth,
document.documentElement.clientHeight
);
});
return;
}
if (document.fullscreenElement) document.exitFullscreen();
}
);
watch(
() => settings.value,
(val) => {
localStorage.setItem("settings", JSON.stringify(val));
},
{
immediate: true,
deep: true,
document.exitFullscreen().then(resetScale);
}
);
@ -71,5 +68,5 @@ export const useSettings = defineStore("settings", () => {
break;
}
}
return { settings, updateSettings, rewriteSettings };
return { settings, updateSettings, rewriteSettings, changeScale };
});