规范代码

src/components/FusionSettings/FusionLocale.vue

@@ -1,25 +1,37 @@
 <template>
   <div class="row">
     <div class="col-12">
-      <!-- <p class="text-center">{{ $t('Set the fusion band width') }}</p> -->
+      <div style="height: 1rem"></div>
-      <div style="height: 1rem;"></div>
       <div class="row">
         <div class="col-12">
           <div class="row">
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
+                  <q-toggle
+                    class="float-right"
+                    v-model="array[0].isshow"
+                    label=""
+                  />
                 </div>
                 <div class="col-6">
-                  <q-input filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
+                  <q-input
-                    @focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
+                    filled
+                    type="number"
+                    :autofocus="group == 0"
+                    :bg-color="group == 0 ? 'cyan-1' : ''"
+                    @focus="group = 0"
+                    v-model="array[0].value"
+                    :label="$t('upper fusion zone parameters')"
+                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -30,34 +42,60 @@
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
+                  <q-toggle
+                    class="float-right"
+                    v-model="array[1].isshow"
+                    label=""
+                  />
                 </div>
                 <div class="col-6">
-                  <q-input filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
+                  <q-input
-                    @focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
+                    filled
+                    type="number"
+                    :autofocus="group == 1"
+                    :bg-color="group == 1 ? 'cyan-1' : ''"
+                    @focus="group = 1"
+                    v-model="array[1].value"
+                    :label="$t('Left fusion Band Parameters')"
+                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
+                  <q-toggle
+                    class="float-right"
+                    v-model="array[2].isshow"
+                    label=""
+                  />
                 </div>
                 <div class="col-6">
-                  <q-input filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
+                  <q-input
-                    @focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
+                    filled
+                    type="number"
+                    :autofocus="group == 2"
+                    :bg-color="group == 2 ? 'cyan-1' : ''"
+                    @focus="group = 2"
+                    v-model="array[2].value"
+                    :label="$t('Right fusion Band Parameters')"
+                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -68,51 +106,94 @@
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[3].isshow" label="" />
+                  <q-toggle
+                    class="float-right"
+                    v-model="array[3].isshow"
+                    label=""
+                  />
                 </div>
                 <div class="col-6">
-                  <q-input filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
+                  <q-input
-                    @focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
+                    filled
+                    type="number"
+                    :autofocus="group == 3"
+                    :bg-color="group == 3 ? 'cyan-1' : ''"
+                    @focus="group = 3"
+                    v-model="array[3].value"
+                    :label="$t('Lower fusion Zone Parameters')"
+                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
           </div>
         </div>
-
       </div>
     </div>
     <div class="col-4 offset-4" v-if="group != 4">
-      <p class="text-center">{{ $t('Set Fusion Band Parameters') }}</p>
+      <p class="text-center">{{ $t("Set Fusion Band Parameters") }}</p>
       <div style="display: flex; justify-content: space-evenly">
         <div>
-          <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
+          <q-slider
-            vertical reverse label-always />
+            v-model="array[group].alpha"
+            :min="0.0"
+            @change="chang('alpha')"
+            :max="1"
+            :step="0.01"
+            color="green"
+            vertical
+            reverse
+            label-always
+          />
           <p class="text-center">alpha</p>
         </div>
 
         <div>
-          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="2.5" :step="0.01" color="green"
+          <q-slider
-            vertical reverse label-always />
+            v-model="array[group].p"
+            :min="0"
+            @change="chang('p')"
+            :max="2.5"
+            :step="0.01"
+            color="green"
+            vertical
+            reverse
+            label-always
+          />
           <p class="text-center">p</p>
         </div>
 
         <div>
-          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="2.5" :step="0.01" color="green"
+          <q-slider
-            vertical reverse label-always />
+            v-model="array[group].gamma"
+            :min="0"
+            @change="chang('gamma')"
+            :max="2.5"
+            :step="0.01"
+            color="green"
+            vertical
+            reverse
+            label-always
+          />
           <p class="text-center">gamma</p>
         </div>
       </div>
     </div>
-    
   </div>
   <div>
-    <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
+    <q-btn
+      color="white"
+      @click="resetall"
+      text-color="black"
+      :label="$t('resetall')"
+    />
   </div>
 </template>
 
@@ -155,77 +236,92 @@ export default defineComponent({
       { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
     ]);
     //正确的 索引编号
-    let arr = [1, 0, 2, 3]
+    let arr = [1, 0, 2, 3];
     let serverconfig = JSON.parse($store.state.fusion_configuration);
     const selectedprojector = computed(() => {
-      return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
+      return (
-    })
+        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
+        $store.getters.GetTheCurrentlySelectedCamera[1]
+      );
+    });
     const ste_status = ref(0);
     const use_set_cache = () => {
       if (set_cache.value[selectedprojector.value] != null) {
         let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
-        deepcopy(array, tmp)
+        deepcopy(array, tmp);
       }
     };
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
-        if (typeof o2[k] === 'object') {
+        if (typeof o2[k] === "object") {
           o1[k] = {};
           deepcopy(o1[k], o2[k]);
         } else {
           o1[k] = o2[k];
         }
       }
-    }
+    };
     const save_set_cache = () => {
       set_cache.value[selectedprojector.value] = JSON.stringify(array);
-    }
+    };
     let config = JSON.parse($store.state.fusion_configuration).projectors[0];
-    const configselsect = computed(() => { return $store.state.selected_projector })
+    const configselsect = computed(() => {
-    watch(() => configselsect, (newVal, oldVal) => {
+      return $store.state.selected_projector;
-      let tmp = JSON.parse($store.state.fusion_configuration);
+    });
-      let fortmp = null
+    watch(
-      let i
+      () => configselsect,
-      for (i of tmp.projectors) {
+      (newVal, oldVal) => {
-        if (i.col === $store.getters.GetTheCurrentlySelectedCamera[1] && i.row === $store.getters.GetTheCurrentlySelectedCamera[0]) {
+        let tmp = JSON.parse($store.state.fusion_configuration);
-          fortmp = JSON.parse(JSON.stringify(i))
+        let fortmp = null;
+        let i;
+        for (i of tmp.projectors) {
+          if (
+            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+          ) {
+            fortmp = JSON.parse(JSON.stringify(i));
+          }
         }
-      }
+        ste_status.value = 1;
-      ste_status.value = 1;
 
-      config = JSON.parse(JSON.stringify(fortmp))
+        config = JSON.parse(JSON.stringify(fortmp));
-      use_server_config()
+        use_server_config();
-      use_set_cache()
+        use_set_cache();
-      setTimeout(() => {
+        setTimeout(() => {
-        ste_status.value = 0;
+          ste_status.value = 0;
-      }, 100);
+        }, 100);
-      setnowindex()
+        setnowindex();
-    }, { deep: true })
+      },
+      { deep: true }
+    );
 
     const chang = (type: string) => {
       if (type == "alpha") {
-        if ($store.state.enablefusion) set?.setBlendingAlphaParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingAlphaParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          arr[group.value],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array[arr[group.value]].alpha
+            arr[group.value],
-        );
+            array[arr[group.value]].alpha
+          );
       }
       if (type == "p") {
-        if ($store.state.enablefusion) set?.setBlendingPowerParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingPowerParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          arr[group.value],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array[arr[group.value]].p
+            arr[group.value],
-        );
+            array[arr[group.value]].p
+          );
       }
       if (type == "gamma") {
-        if ($store.state.enablefusion) set?.setBlendingGammaParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingGammaParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          arr[group.value],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array[arr[group.value]].gamma
+            arr[group.value],
-        );
+            array[arr[group.value]].gamma
+          );
       }
       save_set_cache();
     };
@@ -240,152 +336,212 @@ export default defineComponent({
         }
       }
       if (sum == 1) {
-        group.value = indexx
+        group.value = indexx;
       } else {
-        group.value = 4
+        group.value = 4;
       }
-    }
+    };
 
-
-    //接受 赋值
     const setconfig = (config: any) => {
       let tmp = JSON.parse(config);
-      let fortmp = null
+      let fortmp = null;
-      let i
+      let i;
       for (i of tmp.projectors) {
-        if (i.col === $store.getters.GetTheCurrentlySelectedCamera[1] && i.row === $store.getters.GetTheCurrentlySelectedCamera[0]) {
+        if (
-          fortmp = JSON.parse(JSON.stringify(i))
+          i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+          i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+        ) {
+          fortmp = JSON.parse(JSON.stringify(i));
         }
       }
       ste_status.value = 1;
-      config = JSON.parse(JSON.stringify(fortmp))
+      config = JSON.parse(JSON.stringify(fortmp));
-      //手动对应数据索引
       for (let index = 0; index < array.length - 1; index++) {
-        array[arr[index]].gamma = config.params[index].gamma.toFixed(2)
+        array[arr[index]].gamma = config.params[index].gamma.toFixed(2);
-        array[arr[index]].alpha = config.params[index].alpha.toFixed(2)
+        array[arr[index]].alpha = config.params[index].alpha.toFixed(2);
-        array[arr[index]].p = config.params[index].power.toFixed(2)
+        array[arr[index]].p = config.params[index].power.toFixed(2);
-        array[arr[index]].isshow = config.params[index].enable
+        array[arr[index]].isshow = config.params[index].enable;
-        array[arr[index]].value = Number(config.params[index].size)
+        array[arr[index]].value = Number(config.params[index].size);
       }
 
       setTimeout(() => {
         ste_status.value = 0;
       }, 100);
-      setnowindex()
+      setnowindex();
-    }
+    };
     const startconfig = () => {
-      //手动对应数据索引
       for (let index = 0; index < array.length - 1; index++) {
-        array[arr[index]].gamma = config.params[index].gamma.toFixed(2)
+        array[arr[index]].gamma = config.params[index].gamma.toFixed(2);
-        array[arr[index]].alpha = config.params[index].alpha.toFixed(2)
+        array[arr[index]].alpha = config.params[index].alpha.toFixed(2);
-        array[arr[index]].p = config.params[index].power.toFixed(2)
+        array[arr[index]].p = config.params[index].power.toFixed(2);
-        array[arr[index]].isshow = config.params[index].enable
+        array[arr[index]].isshow = config.params[index].enable;
-        array[arr[index]].value = Number(config.params[index].size)
+        array[arr[index]].value = Number(config.params[index].size);
       }
-      if (sessionStorage.FusionLocale) set_cache.value = JSON.parse(sessionStorage.FusionLocale); use_set_cache()
+      if (sessionStorage.FusionLocale)
-      setnowindex()
+        set_cache.value = JSON.parse(sessionStorage.FusionLocale);
-    }
+      use_set_cache();
+      setnowindex();
+    };
     const use_server_config = () => {
       for (let index = 0; index < array.length - 1; index++) {
-        array[arr[index]].gamma = config.params[index].gamma.toFixed(2)
+        array[arr[index]].gamma = config.params[index].gamma.toFixed(2);
-        array[arr[index]].alpha = config.params[index].alpha.toFixed(2)
+        array[arr[index]].alpha = config.params[index].alpha.toFixed(2);
-        array[arr[index]].p = config.params[index].power.toFixed(2)
+        array[arr[index]].p = config.params[index].power.toFixed(2);
-        array[arr[index]].isshow = config.params[index].enable
+        array[arr[index]].isshow = config.params[index].enable;
-        array[arr[index]].value = Number(config.params[index].size)
+        array[arr[index]].value = Number(config.params[index].size);
       }
-    }
+    };
-    startconfig()
+    startconfig();
     onBeforeUnmount(() => {
-      sessionStorage.FusionLocale = JSON.stringify(set_cache.value)
+      sessionStorage.FusionLocale = JSON.stringify(set_cache.value);
-    })
+    });
 
     watch(
       () => array[0].value,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 1, array[0].isshow, Number(array[0].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            1,
+            array[0].isshow,
+            Number(array[0].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[1].value,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 0, array[1].isshow, Number(array[1].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            0,
+            array[1].isshow,
+            Number(array[1].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[2].value,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 2, array[2].isshow, Number(array[2].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            2,
+            array[2].isshow,
+            Number(array[2].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[3].value,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 3, array[3].isshow, Number(array[3].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            3,
+            array[3].isshow,
+            Number(array[3].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
 
-    ////
+
     watch(
       () => array[0].isshow,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 1, array[0].isshow, Number(array[0].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            1,
+            array[0].isshow,
+            Number(array[0].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[1].isshow,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 0, array[1].isshow, Number(array[1].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            0,
+            array[1].isshow,
+            Number(array[1].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[2].isshow,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 2, array[2].isshow, Number(array[2].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            2,
+            array[2].isshow,
+            Number(array[2].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
       () => array[3].isshow,
       (newVal, oldVal) => {
-        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 3, array[3].isshow, Number(array[3].value));
+        if ($store.state.enablefusion)
-        save_set_cache()
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            3,
+            array[3].isshow,
+            Number(array[3].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
 
-    ////
 
     watch(
       () => enablefusion,
       (newVal, oldVal) => {
-        $store.commit('setenablefusion', newVal.value);
+        $store.commit("setenablefusion", newVal.value);
         set?.EnableBlending(newVal.value);
-      }, { deep: true }
+      },
+      { deep: true }
     );
     const changenablefusion = () => {
-      $store.commit('setenablefusion', enablefusion.value);
+      $store.commit("setenablefusion", enablefusion.value);
-    }
+    };
     let resnewdata = null;
     const resetall = () => {
       try {
-        set?.GetBlendingConfig("").then((res) => { resnewdata = res?.config; setconfig(resnewdata) })
+        set?.GetBlendingConfig("").then((res) => {
+          resnewdata = res?.config;
+          setconfig(resnewdata);
+        });
       } catch (error) {
-        console.log("ResetBlendingConfig error")
+        console.log("ResetBlendingConfig error");
       }
-    }
+    };
     return {
       group,
       array,
@@ -394,7 +550,7 @@ export default defineComponent({
       changenablefusion,
       selectedprojector,
       resetall,
-      set_cache
+      set_cache,
     };
   },
 });

src/components/FusionSettingsDialog.vue

@@ -1,11 +1,15 @@
 <template>
-  <q-dialog persistent v-model="show_dialog" @keydown="
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @keydown="
     (evt: any) => {
       if (evt.keyCode == 27) {
         show_dialog = false;
       }
     }
-  ">
+  "
+  >
     <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
       <q-form>
         <q-card-section class="q-ma-none q-pa-sm">
@@ -15,7 +19,14 @@
             </div>
 
             <q-space />
-            <q-btn flat round icon="close" color="red" @click="clear()" v-close-popup>
+            <q-btn
+              flat
+              round
+              icon="close"
+              color="red"
+              @click="clear()"
+              v-close-popup
+            >
               <q-tooltip>
                 {{ $t("close") }}
               </q-tooltip>
@@ -27,23 +38,36 @@
         <q-separator />
         <!-- height: 80vh -->
         <q-card-section class="scroll" style="width: 80vw">
-          <div class="row" style="border: 1px solid #b0bec5;text-align: center;">
+          <div
-            <div class="col-3" style="border-right: 1px solid #b0bec5;">
+            class="row"
+            style="border: 1px solid #b0bec5; text-align: center"
+          >
+            <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">
-                <projector-item v-for="(item, index_col) in config.col" class="w-100"
+                <projector-item
-                  :llabel="$t('Projector') + (index_row * config.col + index_col + 1)"
+                  v-for="(item, index_col) in config.col"
-                  :lvalue="index_row + '/' + index_col"></projector-item>
+                  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" />
+                {{ $t("Whether to enable integration")
+                }}<q-checkbox v-model="EnableBlending" />
               </div>
             </div>
             <div class="col-9">
               <div class="q-ta-md">
-                <q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
+                <q-btn-toggle
+                  :disable="!$store.state.enablefusion"
+                  no-caps
+                  v-model="options"
+                  toggle-color="primary"
                   :options="[
                     { label: $t('FusionLocale'), value: 'FusionLocale' },
                     {
@@ -59,10 +83,11 @@
                       value: 'DensityCorrection',
                     },
                     // { label: $t('GridSettings'), value: 'GridSettings' },
-                  ]" />
+                  ]"
+                />
               </div>
               <div style="min-height: 72vh">
-                <component :is="options"  />
+                <component :is="options" />
               </div>
             </div>
           </div>
@@ -71,8 +96,22 @@
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup @click="$store.commit('setSelectedProjector','0/0');" />
+          <q-btn
-          <q-btn flat :label="$t('save config')" no-caps color="primary" @click="save" v-close-popup />
+            flat
+            :label="$t('Cancel')"
+            no-caps
+            color="primary"
+            v-close-popup
+            @click="$store.commit('setSelectedProjector', '0/0')"
+          />
+          <q-btn
+            flat
+            :label="$t('save config')"
+            no-caps
+            color="primary"
+            @click="save"
+            v-close-popup
+          />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -134,10 +173,6 @@ export default defineComponent({
       show_dialog.value = true;
     };
 
-
-
-
-    //投影机数量
     const config = ref({ col: 0, row: 0 });
     const EnableBlending = ref(false);
     let optionsstr = ref();
@@ -167,49 +202,58 @@ export default defineComponent({
         position: "top",
         timeout: 1500,
       });
-    }
+    };
     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) => {
-      $store.commit('setSelectedProjector','0/0');
+        let tmp = JSON.parse(res ? res.config : "");
-    }
+        EnableBlending.value = tmp.enable;
-    const getconfig=()=>{
+        $store.commit("setEnablefusion", tmp.enable);
+        config.value.col = tmp.col;
+        config.value.row = tmp.row;
+        $store.commit("setfusion_configuration", res?.config);
+      });
+      $store.commit("setSelectedProjector", "0/0");
+    };
+    const getconfig = () => {
       try {
-        set?.GetBlendingConfig("").then((res)=>{})
+        set?.GetBlendingConfig("").then((res) => {});
-        set?.GetBlendingConfig("").then((res) => { let tmp = JSON.parse(res ? res.config : ""); $store.commit("setEnablefusion", tmp.enable); $store.commit("setfusion_configuration", res?.config); })
+        set?.GetBlendingConfig("").then((res) => {
-      } catch (error) {
+          let tmp = JSON.parse(res ? res.config : "");
-        
+          $store.commit("setEnablefusion", tmp.enable);
-      }
+          $store.commit("setfusion_configuration", res?.config);
-      
+        });
-    }
+      } catch (error) {}
+    };
     const clear = () => {
-      $store.commit('setSelectedProjector','0/0');
+      $store.commit("setSelectedProjector", "0/0");
       setTimeout(() => {
-        sessionStorage.removeItem('FusionLocale')
+        sessionStorage.removeItem("FusionLocale");
-        sessionStorage.removeItem('SurfaceCorrection')
+        sessionStorage.removeItem("SurfaceCorrection");
-        sessionStorage.removeItem('DensityCorrection')
+        sessionStorage.removeItem("DensityCorrection");
-        sessionStorage.removeItem('FourPointCalibration')
+        sessionStorage.removeItem("FourPointCalibration");
-      }, 500)
+      }, 500);
-      getconfig()
+      getconfig();
-    }
+    };
 
     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}"
+          erroe();
-          //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")
-          erroe()
         }
-
-
       }, 1000);
-    })
+    });
     return {
       clear,
       show_dialog,
@@ -218,7 +262,7 @@ export default defineComponent({
       showDialog,
       EnableBlending,
       config,
-      save
+      save,
     };
   },
 });

src/pages/TopToolBar.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <q-toolbar style="background-color: #3e9acd" class="shadow-2 text-white" @dragstart.prevent>
+    <q-toolbar
+      style="background-color: #3e9acd"
+      class="shadow-2 text-white"
+      @dragstart.prevent
+    >
       <q-btn-dropdown
         v-if="false"
         v-touch-hold:10000.mouse="handleHold"
@@ -288,7 +292,11 @@
         :label="$t('other setting')"
         class="q-mr-sm"
       >
-        <q-list style="background-color: #3e9acd" class="shadow-2 text-white" @dragstart.prevent>
+        <q-list
+          style="background-color: #3e9acd"
+          class="shadow-2 text-white"
+          @dragstart.prevent
+        >
           <q-item
             clickable
             :disable="!$store.state.power_state"
@@ -412,7 +420,10 @@
           <q-item
             clickable
             v-close-popup
-            @click="$refs.fusion_settings_dialog.showDialog();getconfig()"
+            @click="
+              $refs.fusion_settings_dialog.showDialog();
+              getconfig();
+            "
           >
             <q-item-section avatar>
               <!-- <q-icon name="devices" /> -->
@@ -457,7 +468,11 @@
         <q-item-section avatar style="margin-right: 0px; padding-right: 0px">
           <!-- <q-icon class="text-white rotate" name="img:svgs/fan.svg" /> -->
           <!-- <q-icon class="text-white rotate" name="img:new_icon/fan.png" /> -->
-          <q-icon class="text-white" :style="{'animation':fan}" name="img:new_icon/fan.png" />
+          <q-icon
+            class="text-white"
+            :style="{ animation: fan }"
+            name="img:new_icon/fan.png"
+          />
         </q-item-section>
         <q-item-section style="margin-left: -25px">
           {{ $store.state.fan_temp.toFixed(1) }} ℃
@@ -491,7 +506,7 @@
   <fusion-settings-dialog ref="fusion_settings_dialog" />
 </template>
 
-<style >
+<style>
 @keyframes rotate {
   0% {
     transform: rotate(0);
@@ -589,22 +604,21 @@ export default defineComponent({
     const plan_running = computed(
       () => $store.state.current_running_plan.trim() != ""
     );
-    const fan = computed(
+    const fan = computed(() => {
-      () => {
+      let wendu: any = $store.state.fan_temp.toFixed(1);
-        let wendu:any=($store.state.fan_temp).toFixed(1)
+      let sulv: any = 1 - wendu / 150;
-        let sulv:any=(1-(wendu/150))
+      return "rotate " + sulv + "s linear infinite";
-        return 'rotate '+sulv+'s linear infinite'
+    });
-      }
+    const getconfig = () => {
-    );
-    const getconfig=()=>{
       try {
-        set?.GetBlendingConfig("").then((res)=>{})
+        set?.GetBlendingConfig("").then((res) => {});
-        set?.GetBlendingConfig("").then((res) => { let tmp = JSON.parse(res ? res.config : ""); $store.commit("setEnablefusion", tmp.enable); $store.commit("setfusion_configuration", res?.config); })
+        set?.GetBlendingConfig("").then((res) => {
-      } catch (error) {
+          let tmp = JSON.parse(res ? res.config : "");
-        
+          $store.commit("setEnablefusion", tmp.enable);
-      }
+          $store.commit("setfusion_configuration", res?.config);
-      
+        });
-    }
+      } catch (error) {}
+    };
     const checkRegistered = () => {
       if (
         GlobalData.getInstance().getCurrentClient()?.is_connected &&