From e425de93c72a0d58acf545a4353b81ff0f07aed0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Mon, 22 Jan 2024 15:06:29 +0800
Subject: [PATCH] update fullscreen

---
 src/App.vue                      |  28 +--
 src/components/SettingDialog.vue |   4 +-
 src/pages/3D.vue                 | 414 ++++++++++++++++++++++++-------
 src/store/settings.js            |  38 ++-
 4 files changed, 377 insertions(+), 107 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3ddaa2b..079b5b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,26 +14,26 @@ if (urlPath.value === "/") {
 useWebsocket(store, urlPath.value);
 
 // size setting
-const size = ref(80);
-onMounted(() => {
-  setSize(size.value);
-});
+// const size = ref(80);
+// onMounted(() => {
+//   setSize(size.value);
+// });
 
 // style update
-const styles = ref({});
-function setSize(value) {
-  const v = (value / 100).toFixed(2);
-  styles.value = {
-    transform: `scale(${v})`,
-    // transform: `scale(${v * 24 / 33}, ${v})`,
-    transformOrigin: "top left",
-  };
-}
+// const styles = ref({});
+// function setSize(value) {
+//   const v = (value / 100).toFixed(2);
+//   styles.value = {
+//     transform: `scale(${v})`,
+//     // transform: `scale(${v * 24 / 33}, ${v})`,
+//     transformOrigin: "top left",
+//   };
+// }
 </script>
 
 <template>
   <div id="app-container">
-    <MainPage :style="styles" :path="urlPath" />
+    <MainPage :path="urlPath" />
     <Slider :size="size" @size-change="setSize" />
   </div>
 </template>
diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue
index 03764cd..6e752b4 100644
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { ref } from 'vue';
 import { useSettings } from '../store/settings'
 
 const emit = defineEmits(["close"]);
-const { settings } = useSettings();
+const { settings, changeScale } = useSettings();
 
 function handleCancel() {
     emit('close')
@@ -11,6 +10,7 @@ function handleCancel() {
 
 function handleConfirm() {
     // alert(JSON.stringify(settings, null, 2))
+    changeScale(settings.resolution.width, settings.resolution.height)
     emit('close')
 }
 </script>
diff --git a/src/pages/3D.vue b/src/pages/3D.vue
index e1cea41..f79bcc5 100644
--- a/src/pages/3D.vue
+++ b/src/pages/3D.vue
@@ -1,117 +1,277 @@
 <!-- 三维页面 -->
 <script setup>
+import { useSettings } from '../store/settings'
+import { computed } from 'vue';
+const { settings } = useSettings();
 const props = defineProps({
   line: {
     type: String,
     default: "1",
   },
 });
+
+const eqStatus = computed(() => settings.eqStatus);
+console.log('eqStatus', eqStatus.value)
 </script>
 
 <template>
   <div class="triple-page" :class="['line-' + line]">
-    <div class="info-1" v-if="line == '1'">
-      <div class="info"><h1>M7上片</h1></div>
-      <div class="info"><h1>M6上片</h1></div>
-      <div class="info"><h1>M7磨边机</h1></div>
-      <div class="info"><h1>M6磨边机</h1></div>
-      <div class="info"><h1>M7清洗机</h1></div>
-      <div class="info"><h1>M6清洗机</h1></div>
+    <div class="info-1" v-if="eqStatus && line == '1'">
+      <div class="info">
+        <h1>M7上片</h1>
+      </div>
+      <div class="info">
+        <h1>M6上片</h1>
+      </div>
+      <div class="info">
+        <h1>M7磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M6磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M7清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M6清洗机</h1>
+      </div>
     </div>
-    <div class="info-2" v-if="line == '2'">
-      <div class="info"><h1>Z7钻孔机</h1></div>
-      <div class="info"><h1>Z6钻孔机</h1></div>
-      <div class="info"><h1>S7清洗机</h1></div>
-      <div class="info"><h1>S6清洗机</h1></div>
-      <div class="info"><h1>S7前储片台</h1></div>
-      <div class="info"><h1>S6前储片台</h1></div>
-      <div class="info"><h1>S7丝印机</h1></div>
-      <div class="info"><h1>S6丝印机</h1></div>
-      <div class="info"><h1>S7固化炉</h1></div>
-      <div class="info"><h1>S6固化炉</h1></div>
-      <div class="info"><h1>S7后储片台</h1></div>
-      <div class="info"><h1>S6后储片台</h1></div>
+    <div class="info-2" v-if="eqStatus && line == '2'">
+      <div class="info">
+        <h1>Z7钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z6钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>S7清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S6清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S7前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S7丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S6丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S7固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S6固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S7后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6后储片台</h1>
+      </div>
     </div>
-    <div class="info-3" v-if="line == '3'">
-      <div class="info"><h1>B1前储片台</h1></div>
+    <div class="info-3" v-if="eqStatus && line == '3'">
+      <div class="info">
+        <h1>B1前储片台</h1>
+      </div>
     </div>
-    <div class="info-4" v-if="line == '4'">
-      <div class="info"><h1>B2清洗机</h1></div>
-      <div class="info"><h1>B2下片</h1></div>
-      <div class="info"><h1>B2后储片台</h1></div>
+    <div class="info-4" v-if="eqStatus && line == '4'">
+      <div class="info">
+        <h1>B2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B2下片</h1>
+      </div>
+      <div class="info">
+        <h1>B2后储片台</h1>
+      </div>
     </div>
-    <div class="info-5" v-if="line == '5'">
-      <div class="info"><h1>M5上片</h1></div>
-      <div class="info"><h1>M4上片</h1></div>
-      <div class="info"><h1>M3上片</h1></div>
-      <div class="info"><h1>M5磨边机</h1></div>
-      <div class="info"><h1>M4磨边机</h1></div>
-      <div class="info"><h1>M3磨边机</h1></div>
-      <div class="info"><h1>M5清洗机</h1></div>
-      <div class="info"><h1>M4清洗机</h1></div>
-      <div class="info"><h1>M3清洗机</h1></div>
+    <div class="info-5" v-if="eqStatus && line == '5'">
+      <div class="info">
+        <h1>M5上片</h1>
+      </div>
+      <div class="info">
+        <h1>M4上片</h1>
+      </div>
+      <div class="info">
+        <h1>M3上片</h1>
+      </div>
+      <div class="info">
+        <h1>M5磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M4磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M3磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M5清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M4清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M3清洗机</h1>
+      </div>
     </div>
-    <div class="info-6" v-if="line == '6'">
-      <div class="info"><h1>Z5钻孔机</h1></div>
-      <div class="info"><h1>Z4钻孔机</h1></div>
-      <div class="info"><h1>Z3钻孔机</h1></div>
-      <div class="info"><h1>S5清洗机</h1></div>
-      <div class="info"><h1>S4清洗机</h1></div>
-      <div class="info"><h1>S3清洗机</h1></div>
-      <div class="info"><h1>S5前储片台</h1></div>
-      <div class="info"><h1>S4前储片台</h1></div>
-      <div class="info"><h1>S3前储片台</h1></div>
-      <div class="info"><h1>S5丝印机</h1></div>
-      <div class="info"><h1>S4丝印机</h1></div>
-      <div class="info"><h1>S3丝印机</h1></div>
+    <div class="info-6" v-if="eqStatus && line == '6'">
+      <div class="info">
+        <h1>Z5钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z4钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z3钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>S5清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S4清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S3清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S5前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S4前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S3前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S5丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S4丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S3丝印机</h1>
+      </div>
     </div>
-    <div class="info-7" v-if="line == '7'">
-      <div class="info"><h1>S5后储片台</h1></div>
-      <div class="info"><h1>S4后储片台</h1></div>
-      <div class="info"><h1>S3后储片台</h1></div>
-      <div class="info"><h1>S5固化炉</h1></div>
-      <div class="info"><h1>S4固化炉</h1></div>
-      <div class="info"><h1>S3固化炉</h1></div>
-      <div class="info"><h1>B2前储片台</h1></div>
+    <div class="info-7" v-if="eqStatus && line == '7'">
+      <div class="info">
+        <h1>S5后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S4后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S3后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S5固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S4固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S3固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>B2前储片台</h1>
+      </div>
     </div>
-    <div class="info-8" v-if="line == '8'">
-      <div class="info"><h1>B1前储片台</h1></div>
-      <div class="info"><h1>B1清洗机</h1></div>
-      <div class="info"><h1>B1下片</h1></div>
-      <div class="info"><h1>B1后储片台</h1></div>
+    <div class="info-8" v-if="eqStatus && line == '8'">
+      <div class="info">
+        <h1>B1前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>B1清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B1下片</h1>
+      </div>
+      <div class="info">
+        <h1>B1后储片台</h1>
+      </div>
     </div>
-    <div class="info-9" v-if="line == '9'">
-      <div class="info"><h1>M2上片</h1></div>
-      <div class="info"><h1>M1上片</h1></div>
-      <div class="info"><h1>M2磨边机</h1></div>
-      <div class="info"><h1>M1磨边机</h1></div>
-      <div class="info"><h1>M2清洗机</h1></div>
-      <div class="info"><h1>M1清洗机</h1></div>
+    <div class="info-9" v-if="eqStatus && line == '9'">
+      <div class="info">
+        <h1>M2上片</h1>
+      </div>
+      <div class="info">
+        <h1>M1上片</h1>
+      </div>
+      <div class="info">
+        <h1>M2磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M1磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M1清洗机</h1>
+      </div>
     </div>
-    <div class="info-10" v-if="line == '10'">
+    <div class="info-10" v-if="eqStatus && line == '10'">
       <!-- <div class="info"><h1>M2清洗机</h1></div>
     <div class="info"><h1>M1清洗机</h1></div> -->
-      <div class="info"><h1>Z2钻孔机</h1></div>
-      <div class="info"><h1>Z1钻孔机</h1></div>
-      <div class="info"><h1>S2清洗机</h1></div>
-      <div class="info"><h1>S1清洗机</h1></div>
-      <div class="info"><h1>S2前储片台</h1></div>
-      <div class="info"><h1>S1前储片台</h1></div>
-      <div class="info"><h1>S2丝印机</h1></div>
-      <div class="info"><h1>S1丝印机</h1></div>
+      <div class="info">
+        <h1>Z2钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z1钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>S2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S1清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S2前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S1前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S2丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S1丝印机</h1>
+      </div>
     </div>
-    <div class="info-11" v-if="line == '11'">
-      <div class="info"><h1>S7后储片台</h1></div>
-      <div class="info"><h1>S6后储片台</h1></div>
-      <div class="info"><h1>S7固化炉</h1></div>
-      <div class="info"><h1>S6固化炉</h1></div>
-      <div class="info"><h1>B3前储片台</h1></div>
+    <div class="info-11" v-if="eqStatus && line == '11'">
+      <div class="info">
+        <h1>S7后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S7固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S6固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>B3前储片台</h1>
+      </div>
     </div>
-    <div class="info-12" v-if="line == '12'">
-      <div class="info"><h1>B3前储片台</h1></div>
-      <div class="info"><h1>B3清洗机</h1></div>
-      <div class="info"><h1>B3下片</h1></div>
-      <div class="info"><h1>B3后储片台</h1></div>
+    <div class="info-12" v-if="eqStatus && line == '12'">
+      <div class="info">
+        <h1>B3前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>B3清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B3下片</h1>
+      </div>
+      <div class="info">
+        <h1>B3后储片台</h1>
+      </div>
     </div>
   </div>
 </template>
@@ -151,22 +311,27 @@ const props = defineProps({
   left: 490px;
   bottom: 250px;
 }
+
 .info-1 .info:nth-child(2) {
   left: 790px;
   bottom: 210px;
 }
+
 .info-1 .info:nth-child(3) {
   left: 660px;
   top: 480px;
 }
+
 .info-1 .info:nth-child(4) {
   left: 910px;
   top: 510px;
 }
+
 .info-1 .info:nth-child(5) {
   left: 880px;
   top: 220px;
 }
+
 .info-1 .info:nth-child(6) {
   left: 1100px;
   top: 260px;
@@ -177,46 +342,57 @@ const props = defineProps({
   left: 580px;
   bottom: 200px;
 }
+
 .info-2 .info:nth-child(2) {
   left: 940px;
   bottom: 200px;
 }
+
 .info-2 .info:nth-child(3) {
   left: 640px;
   bottom: 360px;
 }
+
 .info-2 .info:nth-child(4) {
   left: 940px;
   bottom: 360px;
 }
+
 .info-2 .info:nth-child(5) {
   left: 660px;
   bottom: 580px;
 }
+
 .info-2 .info:nth-child(6) {
   left: 1060px;
   bottom: 520px;
 }
+
 .info-2 .info:nth-child(7) {
   left: 720px;
   top: 190px;
 }
+
 .info-2 .info:nth-child(8) {
   left: 1100px;
   top: 260px;
 }
+
 .info-2 .info:nth-child(9) {
   left: 800px;
   top: 120px;
 }
+
 .info-2 .info:nth-child(10) {
   left: 1100px;
   top: 144px;
 }
+
 .info-2 .info:nth-child(11) {
   left: 800px;
   top: 10px;
 }
+
 .info-2 .info:nth-child(12) {
   left: 1100px;
   top: 20px;
@@ -233,10 +409,12 @@ const props = defineProps({
   left: 580px;
   bottom: 200px;
 }
+
 .info-4 .info:nth-child(2) {
   left: 800px;
   top: 100px;
 }
+
 .info-4 .info:nth-child(3) {
   left: 1240px;
   top: 40px;
@@ -247,34 +425,42 @@ const props = defineProps({
   left: 490px;
   bottom: 300px;
 }
+
 .info-5 .info:nth-child(2) {
   left: 740px;
   bottom: 280px;
 }
+
 .info-5 .info:nth-child(3) {
   left: 960px;
   bottom: 240px;
 }
+
 .info-5 .info:nth-child(4) {
   left: 460px;
   bottom: 490px;
 }
+
 .info-5 .info:nth-child(5) {
   left: 760px;
   bottom: 490px;
 }
+
 .info-5 .info:nth-child(6) {
   left: 1060px;
   bottom: 450px;
 }
+
 .info-5 .info:nth-child(7) {
   left: 570px;
   top: 190px;
 }
+
 .info-5 .info:nth-child(8) {
   left: 890px;
   top: 200px;
 }
+
 .info-5 .info:nth-child(9) {
   left: 1190px;
   top: 200px;
@@ -286,46 +472,57 @@ const props = defineProps({
   left: 480px;
   bottom: 530px;
 }
+
 .info-6 .info:nth-child(2) {
   left: 720px;
   bottom: 470px;
 }
+
 .info-6 .info:nth-child(3) {
   left: 990px;
   bottom: 460px;
 }
+
 .info-6 .info:nth-child(4) {
   left: 510px;
   top: 260px;
 }
+
 .info-6 .info:nth-child(5) {
   left: 810px;
   top: 260px;
 }
+
 .info-6 .info:nth-child(6) {
   left: 1110px;
   top: 280px;
 }
+
 .info-6 .info:nth-child(7) {
   left: 600px;
   top: 110px;
 }
+
 .info-6 .info:nth-child(8) {
   left: 900px;
   top: 110px;
 }
+
 .info-6 .info:nth-child(9) {
   left: 1200px;
   top: 110px;
 }
+
 .info-6 .info:nth-child(10) {
   left: 650px;
   top: 20px;
 }
+
 .info-6 .info:nth-child(11) {
   left: 950px;
   top: 30px;
 }
+
 .info-6 .info:nth-child(12) {
   left: 1230px;
   top: 20px;
@@ -337,26 +534,32 @@ const props = defineProps({
   left: 400px;
   bottom: 440px;
 }
+
 .info-7 .info:nth-child(2) {
   left: 670px;
   bottom: 440px;
 }
+
 .info-7 .info:nth-child(3) {
   left: 960px;
   bottom: 450px;
 }
+
 .info-7 .info:nth-child(4) {
   left: 310px;
   bottom: 260px;
 }
+
 .info-7 .info:nth-child(5) {
   left: 620px;
   bottom: 260px;
 }
+
 .info-7 .info:nth-child(6) {
   left: 1110px;
   bottom: 240px;
 }
+
 .info-7 .info:nth-child(7) {
   left: 800px;
   top: 50px;
@@ -367,14 +570,17 @@ const props = defineProps({
   left: 660px;
   bottom: 550px;
 }
+
 .info-8 .info:nth-child(2) {
   left: 990px;
   bottom: 690px;
 }
+
 .info-8 .info:nth-child(3) {
   left: 700px;
   top: 80px;
 }
+
 .info-8 .info:nth-child(4) {
   left: 1100px;
   top: 80px;
@@ -385,22 +591,27 @@ const props = defineProps({
   left: 400px;
   bottom: 250px;
 }
+
 .info-9 .info:nth-child(2) {
   left: 1100px;
   bottom: 220px;
 }
+
 .info-9 .info:nth-child(3) {
   left: 496px;
   bottom: 570px;
 }
+
 .info-9 .info:nth-child(4) {
   left: 1100px;
   bottom: 490px;
 }
+
 .info-9 .info:nth-child(5) {
   left: 670px;
   top: 144px;
 }
+
 .info-9 .info:nth-child(6) {
   left: 1100px;
   top: 155px;
@@ -411,30 +622,37 @@ const props = defineProps({
   left: 620px;
   bottom: 450px;
 }
+
 .info-10 .info:nth-child(2) {
   left: 1000px;
   bottom: 320px;
 }
+
 .info-10 .info:nth-child(3) {
   left: 736px;
   top: 270px;
 }
+
 .info-10 .info:nth-child(4) {
   left: 1200px;
   top: 330px;
 }
+
 .info-10 .info:nth-child(5) {
   left: 870px;
   top: 144px;
 }
+
 .info-10 .info:nth-child(6) {
   left: 1100px;
   top: 195px;
 }
+
 .info-10 .info:nth-child(7) {
   left: 900px;
   top: 55px;
 }
+
 .info-10 .info:nth-child(8) {
   left: 1200px;
   top: 68px;
@@ -445,18 +663,22 @@ const props = defineProps({
   left: 570px;
   bottom: 450px;
 }
+
 .info-11 .info:nth-child(2) {
   left: 1100px;
   bottom: 410px;
 }
+
 .info-11 .info:nth-child(3) {
   left: 436px;
   bottom: 170px;
 }
+
 .info-11 .info:nth-child(4) {
   left: 1036px;
   bottom: 170px;
 }
+
 .info-11 .info:nth-child(5) {
   left: 890px;
   top: 94px;
@@ -467,14 +689,17 @@ const props = defineProps({
   left: 570px;
   bottom: 250px;
 }
+
 .info-12 .info:nth-child(2) {
   left: 800px;
   bottom: 80px;
 }
+
 .info-12 .info:nth-child(3) {
   left: 1136px;
   bottom: 670px;
 }
+
 .info-12 .info:nth-child(4) {
   left: 836px;
   top: 70px;
@@ -486,56 +711,67 @@ const props = defineProps({
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-2 {
   background: url(../assets/model/F2.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-3 {
   background: url(../assets/model/F3.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-4 {
   background: url(../assets/model/F4.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-5 {
   background: url(../assets/model/F5.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-6 {
   background: url(../assets/model/F6.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-7 {
   background: url(../assets/model/F7.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-8 {
   background: url(../assets/model/F8.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-9 {
   background: url(../assets/model/F9.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-10 {
   background: url(../assets/model/F10.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-11 {
   background: url(../assets/model/F11.png) no-repeat;
   background-size: 1920px 1080px;
   background-position: 0 -80px;
 }
+
 .line-12 {
   background: url(../assets/model/F12.png) no-repeat;
   background-size: 1920px 1080px;
diff --git a/src/store/settings.js b/src/store/settings.js
index 3c7f4a7..77a09e2 100644
--- a/src/store/settings.js
+++ b/src/store/settings.js
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 export const useSettings = defineStore("settings", () => {
   const settings = ref({
@@ -13,6 +13,40 @@ export const useSettings = defineStore("settings", () => {
     eqStatus: false,
   });
 
+  function changeScale(width, height) {
+    const xScale = width / 1920;
+    const yScale = height / 1080;
+    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) => {
+      if (val) {
+        document.documentElement.requestFullscreen().then(() => {
+          document.documentElement.style.width = "100vw";
+          document.documentElement.style.height = "100vh";
+          changeScale(
+            document.documentElement.clientWidth,
+            document.documentElement.clientHeight
+          );
+        });
+        return;
+      }
+      document.exitFullscreen().then(resetScale);
+    }
+  );
+
   function rewriteSettings(payload) {
     settings.value = payload;
   }
@@ -34,5 +68,5 @@ export const useSettings = defineStore("settings", () => {
         break;
     }
   }
-  return { settings, updateSettings, rewriteSettings };
+  return { settings, updateSettings, rewriteSettings, changeScale };
 });