From d77506ed310ada990bd57cad385b214a4b2211dc Mon Sep 17 00:00:00 2001 From: "DESKTOP-FUDKNA8\\znjsz" Date: Thu, 21 Mar 2024 17:05:20 +0800 Subject: [PATCH] update carosul --- src/MainPage.vue | 105 +++++--- src/components/SettingDialog.vue | 423 +++++++++++++++++++++---------- src/main.js | 2 +- src/store/settings.js | 15 ++ 4 files changed, 373 insertions(+), 172 deletions(-) diff --git a/src/MainPage.vue b/src/MainPage.vue index 0631bef..a703078 100644 --- a/src/MainPage.vue +++ b/src/MainPage.vue @@ -13,7 +13,7 @@ import { useSettings } from "./store/settings"; const props = defineProps(["path"]); -const pages = ['3d', 'data', 'realtime', 'alert', 'announcement'] +const pages = ["3d", "data", "realtime", "alert", "announcement"]; const currentPage = ref("3d"); const handlePageChange = (page) => { currentPage.value = page; @@ -23,67 +23,84 @@ const mainContainer = ref(null); const store = useSettings(); const timer = ref(null); +function startCarousel(pages, duration) { + if (timer.value) clearInterval(timer.value); + timer.value = setInterval(() => { + handlePageChange( + pages[(pages.indexOf(currentPage.value) + 1) % pages.length] + ); + }, duration); +} + store.$subscribe((mutation, state) => { + const pages = state.settings.carouselPages; // 如果更新了时间 - 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 ( + mutation.events.key == "carouselTime" && + state.settings.carouselTime > 0 && + state.settings.carousel + ) { + startCarousel(pages, 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); + startCarousel(pages, state.settings.carouselTime * 1000); + } else { + clearInterval(timer.value); + timer.value = null; + } + } else if (mutation.events.key == "carouselPages") { + if (state.settings.carousel) { + startCarousel(pages, state.settings.carouselTime * 1000); } else { clearInterval(timer.value); timer.value = null; } } -}) - +}); // 检查状态 onMounted(() => { const settings = store.settings; + const pages = settings.carouselPages; if (settings.carousel) { // 开始轮播 if (timer.value) clearInterval(timer.value); timer.value = setInterval(() => { - handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length]) + 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, + "/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, + "/2-1": 5, + "/2-2": 6, + "/2-3": 7, + "/2-4": 4, // 钢一线 - '/1-1': 9, - '/1-2': 10, - '/1-3': 3, - '/1-4': 8 -} + "/1-1": 9, + "/1-2": 10, + "/1-3": 3, + "/1-4": 8, +}; function handleResolutionChange(width, height) { - console.log('document.documentElement', document.documentElement) + 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) + changeScale(mainContainer.value, width, height); } } @@ -102,23 +119,37 @@ function resetScale(elm) { elm.style.transform = "initial"; elm.style.transformOrigin = "initial"; } - diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue index 741499f..cb8e234 100644 --- a/src/components/SettingDialog.vue +++ b/src/components/SettingDialog.vue @@ -1,208 +1,363 @@ \ No newline at end of file + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + background: #0003; + backdrop-filter: blur(3px); + z-index: 999; + transition: all 0.3s ease-out; +} + +.setting-dialog > h1 { + text-align: center; + letter-spacing: 24px; + font-weight: 400; + text-shadow: 0 5px 1px #001124; + user-select: none; + color: #fff; +} + diff --git a/src/main.js b/src/main.js index 8982493..81b5b4f 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ const pinia = createPinia(); setTimeout(() => { window.location.reload(); -}, 24 * 60 * 60 * 1000); +}, 60 * 60 * 1000); const app = createApp(App); app.use(pinia); diff --git a/src/store/settings.js b/src/store/settings.js index 8a7a17b..fdafe4e 100644 --- a/src/store/settings.js +++ b/src/store/settings.js @@ -13,6 +13,7 @@ export const useSettings = defineStore("settings", () => { }, carousel: true, carouselTime: 30, // s + carouselPages: ["3d", "data", "realtime", "alert", "announcement"], fullscreen: false, eqStatus: true, } @@ -70,6 +71,20 @@ export const useSettings = defineStore("settings", () => { settings.value.resolution.height = value.height; settings.value.resolution.width = value.width; break; + case "carousel-page": + const exists = settings.value.carouselPages.includes(value); + if (exists) + settings.value.carouselPages = settings.value.carouselPages.filter( + (page) => page !== value + ); + else { + settings.value.carouselPages.splice( + ["3d", "data", "realtime", "alert", "announcement"].indexOf(value), + 0, + value + ); + } + break; } } return { settings, updateSettings, rewriteSettings };