update carosul

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);
 
-store.$subscribe((mutation, state) => {
+function startCarousel(pages, duration) {
-  // 如果更新了时间
-  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])
+    handlePageChange(
-    }, state.settings.carouselTime * 1000);
+      pages[(pages.indexOf(currentPage.value) + 1) % pages.length]
-  } else if (mutation.events.key == 'carousel') {
+    );
+  }, duration);
+}
+
+store.$subscribe((mutation, state) => {
+  const pages = state.settings.carouselPages;
+  // 如果更新了时间
+  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(() => {
+      startCarousel(pages, state.settings.carouselTime * 1000);
-        handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    } else {
-      }, state.settings.carouselTime * 1000);
+      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-1": 1,
-  '/3-2': 2,
+  "/3-2": 2,
-  '/3-3': 11, // 3,
+  "/3-3": 11, // 3,
-  '/3-4': 12,
+  "/3-4": 12,
   // 钢二线
-  '/2-1': 5,
+  "/2-1": 5,
-  '/2-2': 6,
+  "/2-2": 6,
-  '/2-3': 7,
+  "/2-3": 7,
-  '/2-4': 4,
+  "/2-4": 4,
   // 钢一线
-  '/1-1': 9,
+  "/1-1": 9,
-  '/1-2': 10,
+  "/1-2": 10,
-  '/1-3': 3,
+  "/1-3": 3,
-  '/1-4': 8
+  "/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";
 }
-
 </script>
 
 <template>
   <div id="main-container" ref="mainContainer" class="main-container">
     <DatetimeTool v-if="currentPage !== 'announcement'" />
-    <Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
+    <Tools
+      v-if="currentPage !== 'announcement'"
+      @change-resolution="handleResolutionChange"
+    />
     <AppHeader v-if="currentPage !== 'announcement'" />
-    <AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
+    <AnnoucementPage
-      @home="() => handlePageChange('3d')" />
+      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'" />
+      <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'" />
+      <AlertListPage
-      <RealtimePage v-if="currentPage === 'realtime'" :line="pathMap[path] ?? '1'" />
+        v-if="currentPage === 'alert'"
+        :line="pathMap[path] ?? '1'"
+      />
+      <RealtimePage
+        v-if="currentPage === 'realtime'"
+        :line="pathMap[path] ?? '1'"
+      />
     </div>
   </div>
 </template>

src/components/SettingDialog.vue

@@ -1,27 +1,33 @@
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
-import { useSettings } from '../store/settings'
+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;
-})
+});
 
 function handleCancel() {
-    emit('close')
+  emit("close");
 }
 
 function handleConfirm() {
-    // alert(JSON.stringify(settings, null, 2))
+  if (settings.value.resolution.width < 480)
-    // changeScale(settings.resolution.width, settings.resolution.height)
+    store.settings.resolution.width = 480;
-    if (settings.value.resolution.width < 480) store.settings.resolution.width = 480;
+  if (settings.value.resolution.width > 7680)
-    if (settings.value.resolution.width > 7680) store.settings.resolution.width = 7680;
+    store.settings.resolution.width = 7680;
-    if (settings.value.resolution.height < 270) store.settings.resolution.height = 270;
+  if (settings.value.resolution.height < 270)
-    if (settings.value.resolution.height > 4320) store.settings.resolution.height = 4320;
+    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)
+  emit(
+    "change-resolution",
+    store.settings.resolution.width,
+    store.settings.resolution.height
+  );
 }
 </script>
 
@@ -34,11 +40,130 @@ function handleConfirm() {
         <input id="carousel" type="number" v-model="settings.carouselTime" />
         <span>秒</span>
       </div>
+      <div
+        class="form-item"
+        style="display: flex; flex-direction: column; gap: 12px"
+      >
+        <label for="carouselPages">轮播项目</label>
+        <div class="carousel-page__list">
+          <div>
+            <input
+              type="checkbox"
+              id="cp-3d"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('3d') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({ type: 'carousel-page', value: '3d' });
+                }
+              "
+            />
+            <label for="cp-3d">三维界面</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-data"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('data') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'data',
+                  });
+                }
+              "
+            />
+            <label for="cp-data">数据界面</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-realtime"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('realtime') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'realtime',
+                  });
+                }
+              "
+            />
+            <label for="cp-realtime">实时数据</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-alert"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('alert') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'alert',
+                  });
+                }
+              "
+            />
+            <label for="cp-alert">报警列表</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-announcement"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('announcement')
+                  ? 'checked'
+                  : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'announcement',
+                  });
+                }
+              "
+            />
+            <label for="cp-announcement">公告页面</label>
+          </div>
+        </div>
+      </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"
+          min="480"
+          max="7680"
+          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"
+          min="270"
+          max="4320"
+          v-model="settings.resolution.height"
+        />
         <span>px</span>
       </div>
       <div class="form-item selector">
@@ -48,8 +173,13 @@ function handleConfirm() {
                     <label for="fullscreen">全屏显示</label>
                 </div> -->
         <div class="opt opt2">
-                    <input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']"
+          <input
-                        v-model="settings.eqStatus" />
+            type="checkbox"
+            id="status"
+            name="status"
+            :class="[settings.eqStatus ? 'checked' : '', 'carousel-page']"
+            v-model="settings.eqStatus"
+          />
           <label for="status">设备状态</label>
         </div>
       </div>
@@ -78,10 +208,10 @@ function handleConfirm() {
   height: 422px;
   background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
   z-index: 1001;
-    transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
   display: flex;
   flex-direction: column;
-    gap: 18px;
+  gap: 12px;
   padding: 24px 80px;
 }
 
@@ -91,11 +221,11 @@ function handleConfirm() {
 }
 
 .form-item {
-    margin: 32px 0;
+  margin: 20px 0;
   display: flex;
   gap: 8px;
   color: #fff;
-    font-size: 28px;
+  font-size: 24px;
   letter-spacing: 2px;
   padding: 0 12px;
 }
@@ -105,12 +235,15 @@ function handleConfirm() {
 }
 
 .opt {
-    margin-left: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+.opt2 {
+  font-size: 16px;
+}
+
 .form-item input {
   flex: 1;
   border: none;
@@ -143,7 +276,7 @@ input[type="checkbox"].checked {
 }
 
 input[type="checkbox"].checked::after {
-    content: '\2713';
+  content: "\2713";
   color: #fff;
   font-size: 22px;
   line-height: 24px;
@@ -155,6 +288,28 @@ input[type="checkbox"].checked::after {
   height: 100%;
 }
 
+.carousel-page__list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 16px;
+}
+
+.carousel-page__list > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+input[type="checkbox"].carousel-page {
+  width: 18px;
+  height: 18px;
+}
+input[type="checkbox"].carousel-page.checked::after {
+  font-size: 14px;
+  line-height: 18px;
+}
+
 label {
   cursor: pointer;
   user-select: none;
@@ -167,10 +322,10 @@ label {
 
 .btn {
   flex: 1;
-    padding: 18px;
+  padding: 12px;
-    font-size: 28px;
+  font-size: 20px;
   cursor: pointer;
-    letter-spacing: 12px;
+  letter-spacing: 8px;
   background: url(../assets/dialog-button.png) 0 0 / 100% 100% no-repeat;
 }
 
@@ -194,10 +349,10 @@ button {
   background: #0003;
   backdrop-filter: blur(3px);
   z-index: 999;
-    transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
-.setting-dialog>h1 {
+.setting-dialog > h1 {
   text-align: center;
   letter-spacing: 24px;
   font-weight: 400;

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);

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 };