1

package-lock.json

@@ -11,6 +11,7 @@
         "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"
       },
@@ -1123,6 +1124,14 @@
         "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",
@@ -1888,6 +1897,11 @@
         "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",

package.json

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

src/MainPage.vue

@@ -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);
+    }, settings.carouselTime * 1000);
     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);
+    }, val * 1000);
   }
 })
 
@@ -59,12 +59,37 @@ 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 class="main-container">
+  <div id="main-container" ref="mainContainer" class="main-container">
     <DatetimeTool v-if="currentPage !== 'announcement'" />
-    <Tools 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')" />

src/components/HeadTime.vue

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

src/components/NavMenu.vue

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

src/components/SettingDialog.vue

@@ -1,8 +1,13 @@
 <script setup>
+import { ref } from 'vue';
 import { useSettings } from '../store/settings'
+const emit = defineEmits(["close", "change-resolution"]);
 
-const emit = defineEmits(["close"]);
+const store = useSettings();
-const { settings, changeScale } = useSettings();
+const settings = ref(store.settings);
+store.$subscribe((mutation, state) => {
+    settings.value.fullscreen = state.settings.fullscreen;
+})
 
 function handleCancel() {
     emit('close')
@@ -10,8 +15,13 @@ function handleCancel() {
 
 function handleConfirm() {
     // alert(JSON.stringify(settings, null, 2))
-    changeScale(settings.resolution.width, settings.resolution.height)
+    // changeScale(settings.resolution.width, settings.resolution.height)
-    emit('close')
+    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)
 }
 </script>
 
@@ -26,9 +36,9 @@ function handleConfirm() {
             </div>
             <div class="form-item">
                 <label for="resolution1">分辨率</label>
-                <input id="resolution1" type="number" 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" 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">
@@ -173,11 +183,14 @@ button {
 }
 
 .modal {
-    position: fixed;
+    /* position: fixed;
+    height: 1080px;
+    width: 1920px; */
+    position: absolute;
+    height: 100%;
+    width: 100%;
     left: 0;
     top: 0;
-    height: 1080px;
-    width: 1920px;
     background: #0003;
     backdrop-filter: blur(3px);
     z-index: 999;

src/components/Tools.vue

@@ -6,33 +6,46 @@ import IconSetting from "../assets/menu_icon/IconSetting.vue";
 import SettingDialogVue from "./SettingDialog.vue";
 import { useSettings } from '../store/settings';
 
-const { settings } = useSettings();
+const emit = defineEmits(['change-resolution'])
 
+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.href = '/1-1'
+  document.location.reload()
 }
 function showDialog() {
   visible.value = true;
 }
 function toggleLunbo() {
-  settings.carousel = !settings.carousel;
+  settings.value.carousel = !settings.value.carousel;
+}
+
+function handleChangeResolution(w, h) {
+  emit('change-resolution', w, h)
 }
 </script>
 
 <template>
-  <div class="tools">
+  <div id="tools-bar" class="tools">
     <button @click="toHome">
       <IconBack />
     </button>
     <button @click="showDialog">
       <IconSetting />
     </button>
-    <button @click="toggleLunbo">
+    <button style="position: relative;" @click="toggleLunbo">
-      <IconExchange />
+      <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>
   </div>
-  <SettingDialogVue v-if="visible" @close="visible = false;" />
+  <SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
 </template>
 
 <style scoped>
@@ -78,4 +91,5 @@ button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
   fill: #b1daff !important;
-}</style>
+}
+</style>

src/pages/3D.vue

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

src/pages/AlertListPage.vue

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

src/pages/AnnouncementPage.vue

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

src/pages/DataPage.vue

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

src/store/settings.js

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