增加窗口大小变化跟随

src/components/FusionSettingsDialog.vue

@@ -27,14 +27,16 @@
         <q-separator />
         <!-- height: 80vh -->
         <q-card-section class="scroll" style="width: 70vw">
-          <div class="row" style="border: 1px solid;text-align: center;">
+          <div class="row" style="border: 1px solid #b0bec5;text-align: center;">
-            <div class="col-3" style="border-right: 1px solid;">
+            <div class="col-3" style="border-right: 1px solid #b0bec5;">
               <p class="text-center">{{ $t("Projector") }}</p>
               <!-- row 在前col在后 -->
-              <div v-for="(item,index_row) in config.row">
+              <div v-for="(item, index_row) in config.row">
-                <projector-item v-for="(item,index_col) in config.col" class="w-100" :llabel="$t('Projector') + (index_row*config.col+index_col+1)" :lvalue="index_row+'/'+index_col"></projector-item>
+                <projector-item v-for="(item, index_col) in config.col" class="w-100"
+                  :llabel="$t('Projector') + (index_row * config.col + index_col + 1)"
+                  :lvalue="index_row + '/' + index_col"></projector-item>
               </div>
-              
+
               <div class="col-12" style="text-align: center">
                 {{ $t('Whether to enable integration') }}<q-checkbox v-model="EnableBlending" />
               </div>
@@ -60,7 +62,7 @@
                   ]" />
               </div>
               <div style="min-height: 72vh">
-                <component :is="options" />
+                <component :is="options" v-if="resize" />
               </div>
             </div>
           </div>
@@ -131,8 +133,23 @@ export default defineComponent({
     const showDialog = async () => {
       show_dialog.value = true;
     };
+    const resize = ref(true)
+    //窗口变动重新渲染
+    onMounted(() => {
+      //监听窗口变化
+      window.onresize = () => {
+        return (() => {
+          console.log("resize")
+          resize.value = false; setTimeout(() => {
+            resize.value = true
+          }, 100);
+        })();
+      };
+    });
+
+
     //投影机数量
-    const config=ref({col:0,row:0});
+    const config = ref({ col: 0, row: 0 });
     const EnableBlending = ref(false);
     let optionsstr = ref();
     optionsstr.value = "FusionLocale";
@@ -153,48 +170,50 @@ export default defineComponent({
       { deep: true }
     );
 
-      const erroe=()=>{
+    const erroe = () => {
-        $q.notify({
+      $q.notify({
-              color: "negative",
+        color: "negative",
-              icon: "warning",
+        icon: "warning",
-              message:"数据获取失败!",
+        message: "数据获取失败!",
-              position: "top",
+        position: "top",
-              timeout: 1500,
+        timeout: 1500,
-            });
+      });
-      }
+    }
-      const save = () => {
+    const save = () => {
-            set?.SaveBlendingConfig("")
+      set?.SaveBlendingConfig("")
-            show_dialog.value = false
+      show_dialog.value = false
-            clear()
+      clear()
-            set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})  
+      set?.GetBlendingConfig("").then((res) => { let tmp = JSON.parse(res ? res.config : ""); EnableBlending.value = tmp.enable; $store.commit("setEnablefusion", tmp.enable); config.value.col = tmp.col; config.value.row = tmp.row; $store.commit("setfusion_configuration", res?.config); })
-        }
+    }
-      const clear=()=>{
+    const clear = () => {
-        
+
-        sessionStorage.removeItem('DensityCorrection')
+      sessionStorage.removeItem('DensityCorrection')
-            sessionStorage.removeItem('FourPointCalibration')
+      sessionStorage.removeItem('FourPointCalibration')
-            
+
-            sessionStorage.removeItem('SurfaceCorrection')
+      sessionStorage.removeItem('SurfaceCorrection')
-            
+
-            setTimeout(()=>{
+      setTimeout(() => {
-              sessionStorage.removeItem('FusionLocale')
+        sessionStorage.removeItem('FusionLocale')
-            },500)
+      }, 500)
-      }
+    }
 
     onBeforeMount(() => {
       setTimeout(() => {
         try {
-          set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})  
+          set?.GetBlendingConfig("").then((res) => { let tmp = JSON.parse(res ? res.config : ""); EnableBlending.value = tmp.enable; $store.commit("setEnablefusion", tmp.enable); config.value.col = tmp.col; config.value.row = tmp.row; $store.commit("setfusion_configuration", res?.config); })
         } catch (error) {
           //let textdata="{\"col\":2,\"enable\":true,\"projectors\":[{\"col\":0,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1171,\"y\":712},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920},{\"col\":1,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920}],\"row\":1,\"screen_height\":0,\"screen_width\":0}"
           //let tmp=JSON.parse(textdata);EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", textdata)
           //set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})
-          console.log("data is false")
+          // console.log("data is false")
+          erroe()
         }
-        
+
-        
+
       }, 500);
-      })
+    })
     return {
+      resize,
       clear,
       show_dialog,
       options,