143 lines
4.3 KiB
Vue
143 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import Tools from "./components/Tools.vue";
|
|
import NavMenu from "./components/NavMenu.vue";
|
|
import AnnoucementPage from "./pages/AnnouncementPage.vue";
|
|
import RealtimePage from "./pages/RealtimePage.vue";
|
|
import AppHeader from "./components/Base/Header.vue";
|
|
import AlertListPage from "./pages/AlertListPage.vue";
|
|
import DataPage from "./pages/DataPage.vue";
|
|
import DatetimeTool from "./components/HeadTime.vue";
|
|
import ThreeDimension from "./pages/ThreeDimension.vue";
|
|
import { useSettings } from "./store/settings";
|
|
|
|
const props = defineProps(["path"]);
|
|
|
|
const pages = ['3d', 'data', 'realtime', 'alert', 'announcement']
|
|
const currentPage = ref("3d");
|
|
const handlePageChange = (page) => {
|
|
currentPage.value = page;
|
|
};
|
|
const mainContainer = ref(null);
|
|
|
|
const store = useSettings();
|
|
const timer = ref(null);
|
|
|
|
store.$subscribe((mutation, state) => {
|
|
// 如果更新了时间
|
|
if (mutation.events.key == 'carouselTime' && state.settings.carouselTime > 0 && state.settings.carousel) {
|
|
if (timer.value) clearInterval(timer.value);
|
|
timer.value = setInterval(() => {
|
|
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
|
}, state.settings.carouselTime * 1000);
|
|
} else if (mutation.events.key == 'carousel') {
|
|
// 如果更新了状态
|
|
if (state.settings.carousel) {
|
|
timer.value = setInterval(() => {
|
|
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
|
}, state.settings.carouselTime * 1000);
|
|
} else {
|
|
clearInterval(timer.value);
|
|
timer.value = null;
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
// 检查状态
|
|
onMounted(() => {
|
|
const settings = store.settings;
|
|
if (settings.carousel) {
|
|
// 开始轮播
|
|
if (timer.value) clearInterval(timer.value);
|
|
timer.value = setInterval(() => {
|
|
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
|
}, settings.carouselTime * 1000);
|
|
}
|
|
// 设置分辨率
|
|
handleResolutionChange(settings.resolution.width, settings.resolution.height);
|
|
})
|
|
|
|
|
|
const pathMap = {
|
|
// 钢三线
|
|
'/3-1': 1,
|
|
'/3-2': 2,
|
|
'/3-3': 11, // 3,
|
|
'/3-4': 12,
|
|
// 钢二线
|
|
'/2-1': 5,
|
|
'/2-2': 6,
|
|
'/2-3': 7,
|
|
'/2-4': 4,
|
|
// 钢一线
|
|
'/1-1': 9,
|
|
'/1-2': 10,
|
|
'/1-3': 3,
|
|
'/1-4': 8
|
|
}
|
|
|
|
function handleResolutionChange(width, height) {
|
|
console.log('document.documentElement', document.documentElement)
|
|
if (mainContainer.value) {
|
|
// mainContainer.value.style.width = `${width}px`;
|
|
// mainContainer.value.style.height = `${height}px`;
|
|
// changeScale(mainContainer.value, width, height)
|
|
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">
|
|
<DatetimeTool v-if="currentPage !== 'announcement'" />
|
|
<Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
|
|
<AppHeader v-if="currentPage !== 'announcement'" />
|
|
<AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
|
|
@home="() => handlePageChange('3d')" />
|
|
<div v-else class="pages-wrapper">
|
|
<NavMenu @change="handlePageChange" :value="currentPage" />
|
|
<!-- <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> -->
|
|
<ThreeDimension v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
|
|
<DataPage v-if="currentPage === 'data'" :line="pathMap[path] ?? '1'" />
|
|
<AlertListPage v-if="currentPage === 'alert'" :line="pathMap[path] ?? '1'" />
|
|
<RealtimePage v-if="currentPage === 'realtime'" :line="pathMap[path] ?? '1'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.main-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background: #000;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: url(./assets/bg.png) 100% / cover no-repeat;
|
|
}
|
|
|
|
.pages-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
</style>
|