update fullscreen layout

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);
@@ -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 id="main-container" 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/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,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useSettings } from '../store/settings'
-const emit = defineEmits(["close"]);
+const emit = defineEmits(["close", "change-resolution"]);
 
 const store = useSettings();
 const settings = ref(store.settings);
@@ -20,7 +20,8 @@ function handleConfirm() {
     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('close')
+
+    emit('change-resolution', store.settings.resolution.width, store.settings.resolution.height)
 }
 </script>
 

src/components/Tools.vue

@@ -5,6 +5,9 @@ import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 import SettingDialogVue from "./SettingDialog.vue";
 import { useSettings } from '../store/settings';
+
+const emit = defineEmits(['change-resolution'])
+
 const store = useSettings();
 const settings = ref(store.settings)
 store.$subscribe((_, state) => {
@@ -21,6 +24,10 @@ function showDialog() {
 function toggleLunbo() {
   settings.value.carousel = !settings.value.carousel;
 }
+
+function handleChangeResolution(w, h) {
+  emit('change-resolution', w, h)
+}
 </script>
 
 <template>
@@ -38,7 +45,7 @@ function toggleLunbo() {
       <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>

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 } from 'vue';
 import Icon from '../assets/svg/IconStatus.vue';
 import { eqMap, statusMap, initState } from './eqMaps'
 
@@ -37,10 +37,35 @@ store.$subscribe((mutation, state) => {
     })
   }
 });
+
+const part3d = ref(null);
+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;
+}
+watch(() => settings.fullscreen, val => {
+  if (val) {
+    // 全屏状态下
+    if (part3d.value) {
+      changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
+    }
+  } else {
+    if (part3d.value) {
+      // reset scale
+      changeScale(part3d.value, 1920, 1080)
+    }
+  }
+}, { immediate: true })
 </script>
 
 <template>
-  <div class="triple-page" :class="['line-' + line]">
+  <div class="triple-page" ref="part3d" :class="['line-' + line]">d
     <div class="info-1" v-if="eqStatus && line == '1'">
       <div class="info">
         <h1>
@@ -552,7 +577,11 @@ store.$subscribe((mutation, state) => {
 
 <style scoped>
 .triple-page {
-  background: #ccc1;
+  /* background: #ccc1; */
+  background-size: 1920px 1080px;
+  /* background-size: 100% 100%; */
+  background-position: 0 -80px;
+  background-repeat: no-repeat;
   /* flex: 1;
   position: relative; */
   position: absolute;
@@ -987,74 +1016,72 @@ store.$subscribe((mutation, state) => {
 
 /* other  */
 .line-1 {
-  background: url(../assets/model/F1.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+
+  background-image: url(../assets/model/F1.png)
 }
 
 .line-2 {
-  background: url(../assets/model/F2.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F2.png);
+
+
 }
 
 .line-3 {
-  background: url(../assets/model/F3.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F3.png);
+
 }
 
 .line-4 {
-  background: url(../assets/model/F4.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F4.png);
+
+
 }
 
 .line-5 {
-  background: url(../assets/model/F5.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F5.png);
+
+
 }
 
 .line-6 {
-  background: url(../assets/model/F6.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F6.png);
+
+
 }
 
 .line-7 {
-  background: url(../assets/model/F7.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F7.png);
+
+
 }
 
 .line-8 {
-  background: url(../assets/model/F8.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F8.png);
+
+
 }
 
 .line-9 {
-  background: url(../assets/model/F9.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F9.png);
+
+
 }
 
 .line-10 {
-  background: url(../assets/model/F10.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F10.png);
+
+
 }
 
 .line-11 {
-  background: url(../assets/model/F11.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F11.png);
+
+
 }
 
 .line-12 {
-  background: url(../assets/model/F12.png) no-repeat;
-  background-size: 1920px 1080px;
-  background-position: 0 -80px;
+  background-image: url(../assets/model/F12.png);
+
+
 }
 </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

@@ -45,9 +45,7 @@ const handleClose = () => {
       </ScrollText>
     </main>
     <div class="announcement-footer">
-      <button
-        id="return-btn"
-        style="
+      <button id="return-btn" style="
           position: absolute;
           right: 32px;
           top: 56px;
@@ -55,10 +53,8 @@ const handleClose = () => {
           background: transparent;
           border: none;
           cursor: pointer;
-        "
-        @click="handleClose"
-      >
-        <IconBack color="#f00"/>
+        " @click="handleClose">
+        <IconBack color="#f00" />
       </button>
       <ScrollText :duration="50"> {{ horizontal_content }} </ScrollText>
     </div>
@@ -76,7 +72,7 @@ const handleClose = () => {
   flex: 1;
   height: 100%;
   width: 100%;
-  background: url(../assets/line.png) 0 0 / 100% 100% no-repeat,  #000;
+  background: url(../assets/line.png) 0 0 / 100% 100% no-repeat, #000;
   display: flex;
   flex-direction: column;
   color: #f00;
@@ -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

@@ -71,21 +71,5 @@ export const useSettings = defineStore("settings", () => {
         break;
     }
   }
-  return { settings, updateSettings, rewriteSettings, changeScale };
+  return { settings, updateSettings, rewriteSettings };
 });
-
-function changeScale(elm, width, height) {
-  const xScale = width / 1920;
-  const yScale = height / 1080;
-  const style = {
-    transform: `scale(${xScale}, ${yScale}) !important`,
-    transformOrigin: "top left",
-  };
-  elm.style.transform = style.transform;
-  elm.style.transformOrigin = style.transformOrigin;
-}
-
-function resetScale(elm) {
-  elm.style.transform = "initial";
-  elm.style.transformOrigin = "initial";
-}