From 41d1913f7252cd937fd1274f57e9e84dc09aa620 Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Mon, 9 Jan 2023 15:03:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E5=BD=B1=E6=9C=BA=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E4=BB=8E=E5=90=8E=E7=AB=AF=E5=8A=A8=E6=80=81=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=AA=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/FourPointCalibration.vue   | 103 +++---
 .../FusionSettings/FusionLocale.vue           | 330 +++++++-----------
 .../FusionSettings/SurfaceCorrection.vue      | 152 ++++----
 src/components/FusionSettingsDialog.vue       |  23 +-
 4 files changed, 240 insertions(+), 368 deletions(-)

diff --git a/src/components/FusionSettings/FourPointCalibration.vue b/src/components/FusionSettings/FourPointCalibration.vue
index 1ab3fe4..69f592d 100644
--- a/src/components/FusionSettings/FourPointCalibration.vue
+++ b/src/components/FusionSettings/FourPointCalibration.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="row">
         <div class="col-2">
-            <q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" @focus="isactivearray[0] = false"
-                v-model="four[0].x" label="x" lazy-rules />
+            <q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true"
+                @focus="isactivearray[0] = false" v-model="four[0].x" label="x" lazy-rules />
             <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false"
                 v-model="four[0].y" label="y" lazy-rules />
             <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
@@ -19,23 +19,28 @@
         </div>
 
         <div class="col-2"></div>
-        <div class="col-8">            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
+        <div class="col-8">
+            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
                 <div style="position:absolute;">
                     <vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
                         @mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
-                        @moveHandler="moveHandler_1"><span>{{$t('point')}}1</span>
+                        @moveHandler="moveHandler_1"><span>{{ $t('point') }}1</span>
                     </vue3ResizeDrag>
                     <vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)"
                         @mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="point2.x" :y="point2.y"
-                        :isResizable="false" @moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
+                        :isResizable="false" @moveHandler="moveHandler_2"><span>{{ $t('point') }}2</span>
+                    </vue3ResizeDrag>
                     <vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)"
                         @mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="point3.x" :y="point3.y"
-                        :isResizable="false" @moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
+                        :isResizable="false" @moveHandler="moveHandler_3"><span>{{ $t('point') }}3</span>
+                    </vue3ResizeDrag>
                     <vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)"
                         @mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
-                        :isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
+                        :isResizable="false" @moveHandler="moveHandler_4"><span>{{ $t('point') }}4</span>
+                    </vue3ResizeDrag>
                 </div>
-            </div></div>
+            </div>
+        </div>
         <div class="col-2"></div>
 
         <div class="col-2">
@@ -46,7 +51,8 @@
             <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
         </div>
         <div class="col-8">
-            <q-btn color="white"  @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
+            <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white"
+                @click="save" text-color="black" :label="$t('save config')" />
         </div>
         <div class="col-2">
             <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
@@ -80,18 +86,14 @@ export default defineComponent({
     setup() {
         let $store = useStore();
         let $t = useI18n();
-        const setIndexProjector = () => {
-            console.log($store.state.selected_projector);
-        };
-        let config=JSON.parse($store.state.fusion_configuration).projectors[0];
+        let config = JSON.parse($store.state.fusion_configuration).projectors[0];
         let set = GlobalData.getInstance().getCurrentClient();
-        const configselsect = computed(() => {return $store.state.selected_projector})
+        const configselsect = computed(() => { return $store.state.selected_projector })
         let four = ref([{ x: config.point4[0].x, y: config.point4[0].y }, { x: config.point4[1].x, y: config.point4[1].y }, { x: config.point4[2].x, y: config.point4[2].x }, { x: config.point4[3].x, y: config.point4[3].y }]);
         let defaultfour = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
         let defaultfourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
         let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
         let div: any = ref(null);
-        // let div2: any = ref(null);
         let options = ref(['10', '20', '30', '40', '50']);
         let Proportion = ref({ x: 0, y: 0 });
         let point1 = reactive({ x: 0, y: 0 });
@@ -102,10 +104,12 @@ export default defineComponent({
         const isactivearray = ref([true, true, true, true])
         const x1 = ref(0);
         const y1 = ref(0);
-        const { offset } = dom
 
-        const save=()=>{
+        const save = () => {
             set?.SaveBlendingConfig("")
+            setTimeout(() => {
+                set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
+            }, 1000);
         }
 
         const activeMouseDown = (index: number) => {
@@ -120,7 +124,6 @@ export default defineComponent({
         })
 
         const setpoa = () => {
-            console.log(config);
             point1.x = 0
             point1.y = 0
 
@@ -148,19 +151,18 @@ export default defineComponent({
 
             fourpostion.value[3].x = div.value.offsetWidth - 25
             fourpostion.value[3].y = div.value.offsetHeight - 25
-            
+
             Proportion.value.x = config.width / (div.value.offsetWidth - 25)
             Proportion.value.y = config.height / (div.value.offsetHeight - 25)
             for (let index = 0; index < fourpostion.value.length; index++) {
-                defaultfourpostion.value[index].x = fourpostion.value[index].x ;
+                defaultfourpostion.value[index].x = fourpostion.value[index].x;
                 defaultfourpostion.value[index].y = fourpostion.value[index].y;
-                defaultfour.value[index].x=config.point4[index].def_x
-                defaultfour.value[index].y=config.point4[index].def_y
+                defaultfour.value[index].x = config.point4[index].def_x
+                defaultfour.value[index].y = config.point4[index].def_y
             }
         }
         watch(() => four.value[0], (newVal, oldVal) => {
-            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
-            ///
+            if ($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[0]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
@@ -171,12 +173,10 @@ export default defineComponent({
                 setTimeout(() => {
                     isshowarray.value[0] = true
                 }, 100);
-                ///
             }
         }, { deep: true })
         watch(() => four.value[1], (newVal, oldVal) => {
-            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
-            ///
+            if ($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[1]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
@@ -188,15 +188,13 @@ export default defineComponent({
                     isshowarray.value[1] = true
                 }, 100);
             }
-            ///
         }, { deep: true })
         watch(() => four.value[2], (newVal, oldVal) => {
-            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
-            ///
+            if ($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[2]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
-                
+
                 point3.value.x = x
                 point3.value.y = y
                 isshowarray.value[2] = false
@@ -204,15 +202,13 @@ export default defineComponent({
                     isshowarray.value[2] = true
                 }, 100);
             }
-            ///
         }, { deep: true })
         watch(() => four.value[3], (newVal, oldVal) => {
-            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
-            ///
+            if ($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[3]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
-                
+
                 point4.value.x = x
                 point4.value.y = y
                 isshowarray.value[3] = false
@@ -220,23 +216,20 @@ export default defineComponent({
                     isshowarray.value[3] = true
                 }, 100);
             }
-            ///
         }, { deep: true })
 
-        ///
 
         watch(() => configselsect, (newVal, oldVal) => {
-            //console.log(newVal);
-            let tmp=JSON.parse($store.state.fusion_configuration);
-            let fortmp=null
+            let tmp = JSON.parse($store.state.fusion_configuration);
+            let fortmp = null
             let i
-            for(i of tmp.projectors){
-                if(i.col===$store.getters.GetTheCurrentlySelectedCamera[0]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[1]){
-                    fortmp=JSON.parse(JSON.stringify(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))
                 }
             }
-            config=JSON.parse(JSON.stringify(fortmp)) 
-            console.log(config)
+            config = JSON.parse(JSON.stringify(fortmp))
+            setpoa();
         }, { deep: true })
 
         const reset = (index: number) => {
@@ -266,7 +259,6 @@ export default defineComponent({
                 fourpostion.value[3].x = div.value.offsetWidth - 25
                 fourpostion.value[3].y = div.value.offsetHeight - 25
             }
-            // auto set config
             four.value[index].x = config.point4[index].def_x
             four.value[index].y = config.point4[index].def_y
 
@@ -276,17 +268,17 @@ export default defineComponent({
             }, 100);
         }
 
-        const resetall=()=>{
-            
+        const resetall = () => {
+
             for (let index = 0; index < fourpostion.value.length; index++) {
-                fourpostion.value[index].x=defaultfourpostion.value[index].x 
-                fourpostion.value[index].y=defaultfourpostion.value[index].y 
-                four.value[index].x=defaultfour.value[index].x
-                four.value[index].y=defaultfour.value[index].y
+                fourpostion.value[index].x = defaultfourpostion.value[index].x
+                fourpostion.value[index].y = defaultfourpostion.value[index].y
+                four.value[index].x = defaultfour.value[index].x
+                four.value[index].y = defaultfour.value[index].y
 
                 isshowarray.value[index] = false
                 setTimeout(() => {
-                isshowarray.value[index] = true
+                    isshowarray.value[index] = true
                 }, 100);
             }
         }
@@ -300,27 +292,22 @@ export default defineComponent({
             isactivearray.value[0] = true
         }
         const moveHandler_2 = (data: any) => {
-            //y0 xconfig.width
             let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + config.width);
             let y = Math.ceil((config.height - data.top * Proportion.value.y - fourpostion.value[1].y));
             four.value[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             four.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
-            //console.log("x :"+x+" y:"+y)
         }
         const moveHandler_3 = (data: any) => {
             let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
             four.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             four.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
-            console.log("x :" + x + " y:" + y)
-            //console.log("x :" + data.left + " y:" + (1370-data.top));
         }
         const moveHandler_4 = (data: any) => {
             let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + config.width);
             let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
             four.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             four.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
-            //console.log("x :"+x+" y:"+y)
         }
         return {
             div,
diff --git a/src/components/FusionSettings/FusionLocale.vue b/src/components/FusionSettings/FusionLocale.vue
index b3d0e37..4965c38 100644
--- a/src/components/FusionSettings/FusionLocale.vue
+++ b/src/components/FusionSettings/FusionLocale.vue
@@ -1,34 +1,23 @@
 <template>
   <div class="row">
     <div class="col-12">
-      <p class="text-center">{{$t('Set the fusion band width')}}</p>
+      <p class="text-center">{{ $t('Set the fusion band width') }}</p>
       <div class="row">
         <div class="col-12">
           <div class="row">
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-6">
-                  <q-toggle
-                    class="float-right"
-                    v-model="array2[selectedprojector][0].isshow"
-                    label=""
-                  />
+                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input
-                    filled
-                    type="number"
-                    @focus="group = 0"
-                    v-model="array2[selectedprojector][0].value"
-                    :label="$t('upper fusion zone parameters')"
-                    lazy-rules
-                    :rules="[
+                  <q-input filled type="number" @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) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]"
-                  />
+                    ]" />
                 </div>
               </div>
             </div>
@@ -39,54 +28,32 @@
             <div class="col-6">
               <div class="row">
                 <div class="col-6">
-                  <q-toggle
-                    class="float-right"
-                    v-model="array2[selectedprojector][1].isshow"
-                    label=""
-                  />
+                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input
-                    filled
-                    type="number"
-                    @focus="group = 1"
-                    v-model="array2[selectedprojector][1].value"
-                    :label="$t('Left fusion Band Parameters')"
-                    lazy-rules
-                    :rules="[
+                  <q-input filled type="number" @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) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]"
-                  />
+                    ]" />
                 </div>
               </div>
             </div>
             <div class="col-6">
               <div class="row">
                 <div class="col-6">
-                  <q-toggle
-                    class="float-right"
-                    v-model="array2[selectedprojector][2].isshow"
-                    label=""
-                  />
+                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input
-                    filled
-                    type="number"
-                    @focus="group = 2"
-                    v-model="array2[selectedprojector][2].value"
-                    :label="$t('Right fusion Band Parameters')"
-                    lazy-rules
-                    :rules="[
+                  <q-input filled type="number" @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) =>
                         (val > -1 && val < 1920) || $t('Please enter 0-100'),
-                    ]"
-                  />
+                    ]" />
                 </div>
               </div>
             </div>
@@ -97,83 +64,46 @@
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-6">
-                  <q-toggle
-                    class="float-right"
-                    v-model="array2[selectedprojector][3].isshow"
-                    label=""
-                  />
+                  <q-toggle class="float-right" v-model="array[3].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input
-                    filled
-                    type="number"
-                    @focus="group = 3"
-                    v-model="array2[selectedprojector][3].value"
-                    :label="$t('Lower fusion Zone Parameters')"
-                    lazy-rules
-                    :rules="[
+                  <q-input filled type="number" @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) =>
                         (val > -1 && val < 1080) || $t('Please enter 0-100'),
-                    ]"
-                  />
+                    ]" />
                 </div>
               </div>
             </div>
           </div>
         </div>
-        
+
       </div>
     </div>
-    <div v-if="!(group == 4) && array2[selectedprojector][group].isshow" class="col-4 offset-4">
-      <p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
+    <div v-if="!(group == 4) && array[group].isshow" class="col-4 offset-4">
+      <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"
-            vertical
-            reverse
-            label-always
-          />
+          <q-slider 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"
-            vertical
-            reverse
-            label-always
-          />
+          <q-slider 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"
-            vertical
-            reverse
-            label-always
-          />
+          <q-slider 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>
+      <q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
     </div>
   </div>
 </template>
@@ -205,30 +135,18 @@ export default defineComponent({
     let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
-    const age = ref(0);
-    const standard = ref(0);
     const group = ref(4);
-    const enablefusion=ref(false);
-    let array: any = ref([
-      { alpha: 0, p: 0, gamma: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
+    const set_cache: any = ref([]);
+    const enablefusion = ref(false);
+    let array: any = reactive([
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
     ]);
-    let array2: any = reactive([[
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-    ],[
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-      { isshow: false, value: 0 },
-    ]]);
-    const selectedprojector=computed(()=>{
-      return $store.state.selected_projector=="0/0"?0:1
+    let serverconfig=JSON.parse($store.state.fusion_configuration);
+    const selectedprojector = computed(() => {
+      return $store.getters.GetTheCurrentlySelectedCamera[0]*serverconfig.col+$store.getters.GetTheCurrentlySelectedCamera[1]
     })
     const options = ref([
       {
@@ -248,153 +166,151 @@ export default defineComponent({
         value: 3,
       },
     ]);
-    const accept = ref(false);
-    const text = ref("");
-    const model = computed({
-      get() {
-        return $store.state.selected_projector;
-      },
-      set(newValue) {
-        $store.commit("setSelectedProjector", newValue);
-      },
-    });
+
+
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value]) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        deepcopy(array, tmp)
+      }
+    };
+    const deepcopy = (o1: any, o2: any) => {
+      for (let k in o2) {
+        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 })
+    watch(() => configselsect, (newVal, oldVal) => {
+      let tmp = JSON.parse($store.state.fusion_configuration);
+      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))
+        }
+      }
+      config = JSON.parse(JSON.stringify(fortmp))
+      startconfig()
+      use_set_cache()
+    }, { deep: true })
     const chang = (type: string) => {
       if (type == "alpha") {
-        if($store.state.enablefusion)set?.setBlendingAlphaParam(
+        if ($store.state.enablefusion) set?.setBlendingAlphaParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
-          array.value[group.value].alpha
+          array[group.value].alpha
         );
       }
       if (type == "p") {
-        if($store.state.enablefusion)set?.setBlendingPowerParam(
+        if ($store.state.enablefusion) set?.setBlendingPowerParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
-          array.value[group.value].p
+          array[group.value].p
         );
       }
       if (type == "gamma") {
-        if($store.state.enablefusion)set?.setBlendingGammaParam(
+        if ($store.state.enablefusion) set?.setBlendingGammaParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
-          array.value[group.value].gamma
+          array[group.value].gamma
         );
       }
-      //console.log("giao")
+      save_set_cache();
     };
-     //0：左融合带，1：上融合带，2：右融合带，3：下融合带
-    watch(
-      () => array2[0][0],
-      (newVal, oldVal) => {
-        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
-        if(!array2[0][0].isshow){
-          array2[0][0].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[0][1],
-      (newVal, oldVal) => {
-        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
-        if(!array2[0][1].isshow){
-          array2[0][1].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[0][2],
-      (newVal, oldVal) => {
-        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
-        if(!array2[0][2].isshow){
-          array2[0][2].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[0][3],
-      (newVal, oldVal) => {
-        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
-        if(!array2[0][3].isshow){
-          array2[0][3].value=0
-        }
-      },
-      { deep: true }
-    );
+    const startconfig = () => {
+      for (let index = 0; index < array.length; index++) {
+        array[index].gamma = config.params[index].gamma
+        array[index].alpha = config.params[index].alpha
+        array[index].p = config.params[index].power
+        array[index].isshow = config.params[index].enable
+        array[index].value = Number(config.params[index].size)
+      }
+    }
+    startconfig()
 
-///
 
-watch(
-      () => array2[1][0],
+    watch(
+      () => array[0],
       (newVal, oldVal) => {
-        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[1][0].isshow,Number(array2[1][0].value));
-        if(!array2[1][0].isshow){
-          array2[1][0].value=0
+        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 1, array[0].isshow, Number(array[0].value));
+        if (!array[0].isshow) {
+          array[0].value = 0
         }
+        save_set_cache()
       },
       { deep: true }
     );
     watch(
-      () => array2[1][1],
+      () => array[1],
       (newVal, oldVal) => {
-        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[1][1].isshow,Number(array2[1][1].value));
-        if(!array2[1][1].isshow){
-          array2[1][1].value=0
+        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 0, array[1].isshow, Number(array[1].value));
+        if (!array[1].isshow) {
+          array[1].value = 0
         }
+        save_set_cache()
       },
       { deep: true }
     );
     watch(
-      () => array2[1][2],
+      () => array[2],
       (newVal, oldVal) => {
-        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[1][2].isshow,Number(array2[1][2].value));
-        if(!array2[1][2].isshow){
-          array2[1][2].value=0
+        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 2, array[2].isshow, Number(array[2].value));
+        if (!array[2].isshow) {
+          array[2].value = 0
         }
+        save_set_cache()
       },
       { deep: true }
     );
     watch(
-      () => array2[1][3],
+      () => array[3],
       (newVal, oldVal) => {
-        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[1][3].isshow,Number(array2[1][3].value));
-        if(!array2[1][3].isshow){
-          array2[1][3].value=0
+        if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 3, array[3].isshow, Number(array[3].value));
+        if (!array[3].isshow) {
+          array[3].value = 0
         }
+        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);
+    const changenablefusion = () => {
+      $store.commit('setenablefusion', enablefusion.value);
+    }
+    const save = () => {
+      set?.SaveBlendingConfig("")
+      setTimeout(() => {
+        set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
+      }, 1000);
     }
     return {
-      model,
-      age,
-      accept,
-      standard,
       options,
       group,
-      text,
       array,
       chang,
       enablefusion,
-      array2,
       changenablefusion,
-      selectedprojector
+      selectedprojector,
+      save
     };
   },
 });
diff --git a/src/components/FusionSettings/SurfaceCorrection.vue b/src/components/FusionSettings/SurfaceCorrection.vue
index c433680..fe26eda 100644
--- a/src/components/FusionSettings/SurfaceCorrection.vue
+++ b/src/components/FusionSettings/SurfaceCorrection.vue
@@ -159,9 +159,6 @@ export default defineComponent({
     setup() {
         let $store = useStore();
         let $t = useI18n();
-        const setIndexProjector = () => {
-            console.log($store.state.selected_projector);
-        };
         let config=JSON.parse($store.state.fusion_configuration).projectors[0];
         const configselsect = computed(() => {return $store.state.selected_projector})
         let Proportion = ref({ x: 0, y: 0 });
@@ -169,7 +166,6 @@ export default defineComponent({
         const div = ref();
         let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
         let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
-        ///
         const activeMouseDown = (index: number) => {
             isactivearray.value[index] = true
         }
@@ -180,83 +176,87 @@ export default defineComponent({
         const moveHandler_1 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
             let y = config.height - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
-
             nine.value[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_2 = (data: any) => {
-            let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
+            let x = config.width/2 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
             let y = config.height - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
-
             nine.value[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_3 = (data: any) => {
             let x = config.width + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
             let y = config.height - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
-
             nine.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_4 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
-            let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
-
+            let y = config.height/2 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
             nine.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_5 = (data: any) => {
-            let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
-            let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
-
+            let x = config.width/2 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
+            let y = config.height/2 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
             nine.value[4].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[4].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_6 = (data: any) => {
             let x = config.width + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
-            let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
-
+            let y = config.height/2 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
             nine.value[5].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[5].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_7 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));
-
             nine.value[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[6].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_8 = (data: any) => {
-            let x = 960 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
+            let x = config.width/2 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;
-
             nine.value[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[7].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_9 = (data: any) => {
             let x = config.width + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));
-
             nine.value[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
             nine.value[8].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         watch(() => configselsect, (newVal, oldVal) => {
-            //console.log(newVal);
             let tmp=JSON.parse($store.state.fusion_configuration);
             let fortmp=null
             let i
             for(i of tmp.projectors){
-                if(i.col===$store.getters.GetTheCurrentlySelectedCamera[1]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[0]){
+                if(i.col === $store.getters.GetTheCurrentlySelectedCamera[1] && i.row === $store.getters.GetTheCurrentlySelectedCamera[0]){
                     fortmp=JSON.parse(JSON.stringify(i)) 
                 }
             }
             config=JSON.parse(JSON.stringify(fortmp)) 
-            console.log(config)
+            startpostion();
+            setninepostion();
         }, { deep: true })
         onMounted(() => {
             startpostion();
-
+            for (let index = 0; index < defaultninepostion.value.length; index++) {
+                defaultninepostion.value[index].x = ninepostion.value[index].x;
+                defaultninepostion.value[index].y = ninepostion.value[index].y;
+                defaultnine.value[index].x = config.point9[index].def_x
+                defaultnine.value[index].y = config.point9[index].def_y
+            }
+            setninepostion();
         })
+        const setninepostion=()=>{
+            for (let index = 0; index < defaultninepostion.value.length; index++) {
+                nine.value[index].x=config.point9[index].x
+                nine.value[index].y=config.point9[index].y
+            }
+        }
+        setninepostion();
         const startpostion = () => {
             ninepostion.value[0].x = 0
             ninepostion.value[0].y = 0
@@ -300,68 +300,45 @@ export default defineComponent({
 
 
         }
-        ///
         const reset = (index: number) => {
-            if (index == 0 || index == -1) {
-                nine.value[0].x = 0
-                nine.value[0].y = 1080
-                ninepostion.value[0].x = 0
-                ninepostion.value[0].y = 0
+            if (index == 0) {
+                ninepostion.value[index].x = 0
+                ninepostion.value[index].y = 0
             }
-            if (index == 1 || index == -1) {
-                nine.value[1].x = 960
-                nine.value[1].y = 1080
-                ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
-                ninepostion.value[1].y = 0
+            if (index == 1) {
+                ninepostion.value[index].x = div.value.offsetWidth / 2 - 25
+                ninepostion.value[index].y = 0
             }
-            if (index == 2 || index == -1) {
-                nine.value[2].x = 1920
-                nine.value[2].y = 1080
-                ninepostion.value[2].x = div.value.offsetWidth - 25
-                ninepostion.value[2].y = 0
+            if (index == 2) {
+                ninepostion.value[index].x = div.value.offsetWidth - 25
+                ninepostion.value[index].y = 0
             }
-            if (index == 3 || index == -1) {
-                nine.value[3].x = 0
-                nine.value[3].y = 540
-                ninepostion.value[3].x = 0
-                ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
+            if (index == 3) {
+                ninepostion.value[index].x = 0
+                ninepostion.value[index].y = div.value.offsetHeight / 2 - 8
             }
-            if (index == 4 || index == -1) {
-                nine.value[4].x = 960
-                nine.value[4].y = 540
-                ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
-                ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
+            if (index == 4) {
+                ninepostion.value[index].x = div.value.offsetWidth / 2 - 25
+                ninepostion.value[index].y = div.value.offsetHeight / 2 - 8
             }
-            if (index == 5 || index == -1) {
-                nine.value[5].x = 1920
-                nine.value[5].y = 540
-
-                ninepostion.value[5].x = div.value.offsetWidth - 25
-                ninepostion.value[5].y = div.value.offsetHeight / 2
+            if (index == 5) {
+                ninepostion.value[index].x = div.value.offsetWidth - 25
+                ninepostion.value[index].y = div.value.offsetHeight / 2
             }
-            if (index == 6 || index == -1) {
-                nine.value[6].x = 0
-                nine.value[6].y = 0
-
-                ninepostion.value[6].x = 0
-                ninepostion.value[6].y = div.value.offsetHeight - 25
+            if (index == 6) {
+                ninepostion.value[index].x = 0
+                ninepostion.value[index].y = div.value.offsetHeight - 25
             }
-            if (index == 7 || index == -1) {
-                nine.value[7].x = 960
-                nine.value[7].y = 0
-                ninepostion.value[7].x = div.value.offsetWidth / 2
-                ninepostion.value[7].y = div.value.offsetHeight - 25
+            if (index == 7) {
+                ninepostion.value[index].x = div.value.offsetWidth / 2
+                ninepostion.value[index].y = div.value.offsetHeight - 25
             }
-            if (index == 8 || index == -1) {
-                nine.value[8].x = 1920
-                nine.value[8].y = 0
-
-                ninepostion.value[8].x = div.value.offsetWidth - 25
-                ninepostion.value[8].y = div.value.offsetHeight - 25
+            if (index == 8) {
+                ninepostion.value[index].x = div.value.offsetWidth - 25
+                ninepostion.value[index].y = div.value.offsetHeight - 25
             }
-            //data is flase
-            // nine.value[index].x = config.point9[index].def_x
-            // nine.value[index].y = config.point9[index].def_y
+            nine.value[index].x = config.point9[index].def_x
+            nine.value[index].y = config.point9[index].def_y
             isshowarray.value[index] = false
             setTimeout(() => {
                 isshowarray.value[index] = true
@@ -369,39 +346,35 @@ export default defineComponent({
         }
         const resetall = () => {
             for (let index = 0; index < nine.value.length; index++) {
-
                 ninepostion.value[index].x = defaultninepostion.value[index].x;
                 ninepostion.value[index].y = defaultninepostion.value[index].y;
-                nine.value[index].x = defaultnine.value[index].x
-                nine.value[index].y = defaultnine.value[index].y
-
-
+                nine.value[index].x = config.point9[index].def_x
+                nine.value[index].y = config.point9[index].def_y
                 isshowarray.value[index] = false
                 setTimeout(() => {
                     isshowarray.value[index] = true
                 }, 100);
             }
         }
-        ///
         watch(() => nine.value[0], (newVal, oldVal) => {
             if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
-            ///
+
             if (!isactivearray.value[0]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(0, x, y)
             }
-            ///
+
         }, { deep: true })
         watch(() => nine.value[1], (newVal, oldVal) => {
             if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
-            ///
+
             if (!isactivearray.value[1]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(1, x, y)
             }
-            ///
+
         }, { deep: true })
         watch(() => nine.value[2], (newVal, oldVal) => {
             if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
@@ -459,9 +432,7 @@ export default defineComponent({
                 setdianposin(8, x, y)
             }
         }, { deep: true })
-        ///
         let model = ref(null);
-        let options = ref(['10', '20', '30', '40', '50']);
         let set = GlobalData.getInstance().getCurrentClient();
         const setdianposin = (index: number, x: number, y: number) => {
             ninepostion.value[index].x = x
@@ -471,16 +442,15 @@ export default defineComponent({
             setTimeout(() => {
                 isshowarray.value[index] = true
             }, 100);
-
-
-
         }
         const save=()=>{
             set?.SaveBlendingConfig("")
+            setTimeout(() => {
+                set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
+            }, 1000);
         }
         return {
             model,
-            options,
             save,
             nine,
             moveHandler_1,
diff --git a/src/components/FusionSettingsDialog.vue b/src/components/FusionSettingsDialog.vue
index b693e5d..d20b5d4 100644
--- a/src/components/FusionSettingsDialog.vue
+++ b/src/components/FusionSettingsDialog.vue
@@ -8,7 +8,6 @@
   ">
     <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
       <q-form>
-        <!-- @submit="onSubmit" -->
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
             <div class="col-auto text-h6">
@@ -31,15 +30,18 @@
           <div class="row" style="border: 1px solid;text-align: center;">
             <div class="col-3" style="border-right: 1px solid;">
               <p class="text-center">{{ $t("Projector") }}</p>
-              <projector-item class="w-100" :llabel="$t('Projector') + '1'" :lvalue="'0/0'"></projector-item>
-              <projector-item class="w-100" :llabel="$t('Projector') + '2'" :lvalue="'1/0'"></projector-item>
+              <!-- row 在前col在后 -->
+              <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>
+              </div>
+              
               <div class="col-12" style="text-align: center">
                 {{ $t('Whether to enable mixing') }}<q-checkbox v-model="EnableBlending" />
               </div>
             </div>
             <div class="col-9">
               <div class="q-ta-md">
-                <q-btn-toggle :disable="!$store.state.EnableBlending" 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' },
                     {
@@ -93,9 +95,6 @@ import {
   computed,
   onMounted,
   onBeforeMount,
-  onUpdated,
-  onBeforeUnmount,
-  nextTick,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar, copyToClipboard } from "quasar";
@@ -128,11 +127,11 @@ export default defineComponent({
     let $q = useQuasar();
     let $t = useI18n();
     let show_dialog = ref(false);
-    const target_language = ref("zh-CN");
-    const text = ref("Projector");
     const showDialog = async () => {
       show_dialog.value = true;
     };
+    //投影机数量
+    const config=ref({col:0,row:0});
     const EnableBlending = ref(false);
     let optionsstr = ref();
     optionsstr.value = "FusionLocale";
@@ -147,16 +146,15 @@ export default defineComponent({
     watch(
       () => EnableBlending,
       (newVal, oldVal) => {
-        $store.commit("setEnableBlending", newVal.value);
+        $store.commit("setEnablefusion", newVal.value);
         set?.EnableBlending(newVal.value);
       },
       { deep: true }
     );
-    let data = ref({});
 
     onBeforeMount(() => {
       setTimeout(() => {
-        set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnableBlending", tmp.enable);;$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);})
       }, 1000);
       })
     return {
@@ -165,6 +163,7 @@ export default defineComponent({
       copyToClipboard,
       showDialog,
       EnableBlending,
+      config
     };
   },
 });