From 9545a4c45d4c7e7e27de00c426bf97f7a75c4464 Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Thu, 12 Jan 2023 11:37:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5=20=E5=8F=8A=E4=B8=80=E4=BA=9B=E5=B0=8F=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/DensityCorrection.vue      | 501 +++++++++++++++---
 .../FusionSettings/FourPointCalibration.vue   | 305 ++++++-----
 .../FusionSettings/FusionLocale.vue           | 366 +++++--------
 .../FusionSettings/SurfaceCorrection.vue      | 352 ++++++------
 src/components/FusionSettingsDialog.vue       |  53 +-
 src/i18n/en-US/index.ts                       |   2 +-
 src/i18n/zh-CN/index.ts                       |   2 +-
 src/pages/TopToolBar.vue                      |  13 +-
 8 files changed, 964 insertions(+), 630 deletions(-)

diff --git a/src/components/FusionSettings/DensityCorrection.vue b/src/components/FusionSettings/DensityCorrection.vue
index 8651eed..2c73544 100644
--- a/src/components/FusionSettings/DensityCorrection.vue
+++ b/src/components/FusionSettings/DensityCorrection.vue
@@ -1,71 +1,138 @@
 <template>
     <div class="row">
-        <div class="col-2 q-pa-lg"></div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
-        </div>
+        <div class="col-1"></div>
+        <div class="col-8 q-pt-md">
+            <div ref="div" style="width:100%;background-color: aquamarine;height: 100%;">
 
-        
+                <div style="position:absolute;">
+                    <vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="20"
+                        :x="point_postion[0].x" :y="point_postion[0].y" @mousedown="isactivearray[0] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 0)"><span>{{ $t('point') }}1</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="20"
+                        :x="point_postion[1].x" :y="point_postion[1].y" @mousedown="isactivearray[1] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 1)"><span>{{ $t('point') }}2</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="20"
+                        :x="point_postion[2].x" :y="point_postion[2].y" @mousedown="isactivearray[2] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 2)"><span>{{ $t('point') }}3</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="20"
+                        :x="point_postion[3].x" :y="point_postion[3].y" @mousedown="isactivearray[3] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 3)"><span>{{ $t('point') }}4</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="20"
+                        :x="point_postion[4].x" :y="point_postion[4].y" @mousedown="isactivearray[4] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 4)"><span>{{ $t('point') }}5</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="30" :h="20"
+                        :x="point_postion[5].x" :y="point_postion[5].y" @mousedown="isactivearray[5] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 5)"><span>{{ $t('point') }}6</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="30" :h="20"
+                        :x="point_postion[6].x" :y="point_postion[6].y" @mousedown="isactivearray[6] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 6)"><span>{{ $t('point') }}7</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="30" :h="20"
+                        :x="point_postion[7].x" :y="point_postion[7].y" @mousedown="isactivearray[7] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 7)"><span>{{ $t('point') }}8</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="30" :h="20"
+                        :x="point_postion[8].x" :y="point_postion[8].y" @mousedown="isactivearray[8] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 8)"><span>{{ $t('point') }}9</span>
+                    </vue3ResizeDrag>
+                    <vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="35" :h="20"
+                        :x="point_postion[9].x" :y="point_postion[9].y" @mousedown="isactivearray[9] = true"
+                        :isResizable="false" @moveHandler="moveHandler($event, 9)"><span>{{ $t('point') }}10</span>
+                    </vue3ResizeDrag>
+                </div>
 
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
+            </div>
         </div>
+        <div class="col-3 q-pt-md">
+            <div class="row">
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-2"></div>
+                        <div class="col-8"><q-input @focus="isactivearray[0] = false" filled type="number"
+                                class="q-pt-md" :dense="true" v-model="value[0].y" label="y" lazy-rules />
+                            <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-2"></div>
+                        <div class="col-8"><q-input @focus="isactivearray[1] = false" filled type="number"
+                                class="q-pt-md" :dense="true" v-model="value[1].y" label="y" lazy-rules />
+                            <q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-2"></div>
+                        <div class="col-8"><q-input @focus="isactivearray[2] = false" filled type="number"
+                                class="q-pt-md" :dense="true" v-model="value[2].y" label="y" lazy-rules />
+                            <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-2"></div>
+                        <div class="col-8"><q-input @focus="isactivearray[3] = false" filled type="number"
+                                class="q-pt-md" :dense="true" v-model="value[3].y" label="y" lazy-rules />
+                            <q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12">
+                    <div class="row">
+                        <div class="col-2"></div>
+                        <div class="col-8"><q-input @focus="isactivearray[4] = false" filled type="number"
+                                class="q-pt-md" :dense="true" v-model="value[4].y" label="y" lazy-rules />
+                            <q-btn color="white" @click="reset(4)" text-color="black" :label="$t('reset')" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-1"></div>
+        <div class="col-11">
+            <div class="row">
+                <div class="col-1"><q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md"
+                        :dense="true" v-model="value[5].x" label="x" lazy-rules />
+                    <q-btn color="white" @click="reset(5)" text-color="black" :label="$t('reset')" />
+                </div>
+                <div class="col-1"></div>
+                <div class="col-1"><q-input filled @focus="isactivearray[6] = false" type="number" class="q-pt-md"
+                        :dense="true" v-model="value[6].x" label="x" lazy-rules />
+                    <q-btn color="white" @click="reset(6)" text-color="black" :label="$t('reset')" />
+                </div>
+                <div class="col-1"></div>
+                <div class="col-1"><q-input filled @focus="isactivearray[7] = false" type="number" class="q-pt-md"
+                        :dense="true" v-model="value[7].x" label="x" lazy-rules />
+                    <q-btn color="white" @click="reset(7)" text-color="black" :label="$t('reset')" />
+                </div>
+                <div class="col-1"></div>
+                <div class="col-1"><q-input filled @focus="isactivearray[8] = false" type="number" class="q-pt-md"
+                        :dense="true" v-model="value[8].x" label="x" lazy-rules />
+                    <q-btn color="white" @click="reset(8)" text-color="black" :label="$t('reset')" />
+                </div>
+                <div class="col-1"></div>
+                <div class="col-1"><q-input filled @focus="isactivearray[9] = false" type="number" class="q-pt-md"
+                        :dense="true" v-model="value[9].x" label="x" lazy-rules />
+                    <q-btn color="white" @click="reset(9)" text-color="black" :label="$t('reset')" />
+                </div>
+                <div class="col-1"></div>
+                <div class="col-1 q-pt-xl">
+                    <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
 
+                </div>
 
-
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
+            </div>
         </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <!-- <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules /> -->
-        </div>
-
-
 
     </div>
 </template>
@@ -74,23 +141,327 @@
 
 </style>
 <script lang="ts">
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive} from "vue";
+import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive, onMounted, onBeforeUnmount } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
-
-
+import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import GlobalData from "src/common/GlobalData";
 export default defineComponent({
     name: "ComponentDensityCorrection",
+    components: {
+        vue3ResizeDrag
+    },
     setup() {
         let $store = useStore();
         let $t = useI18n();
-        const value=reactive([0,0,0,0,0,0,0,0,0,0,0]);
+        const value = reactive([{ x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}, { x: 0, y: 0 ,number:0}]);
         let model = ref(null);
+        const div = ref();
+        const isshowarray = ref([true, true, true, true, true, true, true, true, true, true])
+        const isactivearray = ref([true, true, true, true, true, true, true, true, true, true])
+        const default_location: any = reactive([{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },]);
         let options = ref(['10', '20', '30', '40', '50']);
+        let config = JSON.parse($store.state.fusion_configuration).projectors[0];
+        let Proportion = ref({ x: 0, y: 0 });
+        const configselsect = computed(() => { return $store.state.selected_projector })
+        //用于计算当前投影仪的索引
+        let serverconfig = JSON.parse($store.state.fusion_configuration);
+        const selectedprojector = computed(() => {
+            return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
+        })
+        const set_cache: any = ref([]);
+        const ste_status =ref(0);
+        //
+        //为了加载 缓存的配置时 同步点的位置
+        const syncpoint = () => {
+            for (let index = 0; index < value.length; index++) {
+                isactivearray.value[index] = false
+            }
+        }
+
+        const use_set_cache = () => {
+            if (set_cache.value[selectedprojector.value]!=null) {
+                let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+                deepcopy(value, tmp)
+                syncpoint()
+            }
+        };
+        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(value);
+        }
+        onBeforeUnmount(() => {
+            sessionStorage.DensityCorrection = JSON.stringify(set_cache.value)
+        })
+        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))
+                }
+            }
+            ste_status.value=1;
+            config = JSON.parse(JSON.stringify(fortmp))
+            use_set_cache()
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
+        }, { deep: true })
+        const initialization = () => {
+            ste_status.value=1;
+            for (let index = 0; index < config.hor_density.length; index++) {
+                value[index].x = config.ver_density[index].x
+                value[index].y = config.ver_density[index].y
+                value[index].number = config.ver_density[index].number
+                value[index + 5].x = config.hor_density[index].x
+                value[index + 5].y = config.hor_density[index].y
+                value[index+5].number = config.hor_density[index].number
+            }
+            if(sessionStorage.DensityCorrection&&sessionStorage.DensityCorrection.length>0){
+                set_cache.value=JSON.parse(sessionStorage.DensityCorrection);
+                use_set_cache()
+            }else{
+                
+            }
+            syncpoint()
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
+        }
+
+        const resetall = () => {
+            for (let index = 0; index < config.hor_density.length + config.ver_density.length; index++) {
+                reset(index)
+            }
+        }
+        const reset = (index: number) => {
+            if (index >= 5) {
+                value[index].x = config.hor_density[index - 5].def_x
+                value[index].y = config.hor_density[index - 5].def_y
+                set?.SetBlendingVerDensity($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], index - 5+1, Number(value[index].x));
+            } else {
+                value[index].x = config.ver_density[index].def_x
+                value[index].y = config.ver_density[index].def_y
+                set?.SetBlendingHorDensity($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], index+1, Number(value[index].y))
+
+            }
+
+            point_postion[index].y = default_location[index].y
+            point_postion[index].x = default_location[index].x
+            isshowarray.value[index] = false
+            setTimeout(() => {
+                isshowarray.value[index] = true
+            }, 100);
+        }
+        const point_postion: any = reactive([{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },{ x: 0, y: 0 },])
+        let set = GlobalData.getInstance().getCurrentClient();
+        const save = () => {
+            set?.SaveBlendingConfig("")
+            setTimeout(() => {
+                set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
+            }, 1000);
+        }
+
+        const moveHandler = ($event: any, index: number) => {
+            let x = 0
+            let y = 0
+            switch (index) {
+                case 0:
+                case 1:
+                case 2:
+                case 3:
+                case 4:
+                    x = config.width / 2 + Math.ceil(($event.left - default_location[index].x) * Proportion.value.x);
+                    y = (config.height - (config.height / 4) * index) - Math.ceil(($event.top - default_location[index].y) * Proportion.value.y);
+                    break;
+                case 5:
+                case 6:
+                case 7:
+                case 8:
+                case 9:
+                    x = Math.ceil($event.left * Proportion.value.x);
+                    y = config.height / 2 - Math.ceil(($event.top - default_location[index].y) * Proportion.value.y);
+                    
+                    break;
+                default:
+            }
+            value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
+        }
+
+        onMounted(() => {
+            
+            initialization()
+            Proportion.value.x = config.width / (div.value.offsetWidth - 25)
+            Proportion.value.y = config.height / (div.value.offsetHeight - 25)
+            let Width = (div.value.offsetWidth - 25) / 4
+            let Height = (div.value.offsetHeight - 25) / 4
+            for (let index = 0; index < config.hor_density.length + config.ver_density.length; index++) {
+                if (index < 5) {
+                    point_postion[index].y = default_location[index].y = Height * index
+                    point_postion[index].x = default_location[index].x = Width * 2
+                } else {
+                    point_postion[index].y = default_location[index].y = Height * 2
+                    point_postion[index].x = default_location[index].x = Width * (index - 5)
+                }
+            }
+            
+        })
+
+        const setdianposin = (index: number, x: number, y: number) => {
+            point_postion[index].x = x
+            point_postion[index].y = y
+            isshowarray.value[index] = false
+            isactivearray.value[index] = false
+            setTimeout(() => {
+                isshowarray.value[index] = true
+            }, 100);
+        }
+        //
+        watch(() => value[0], (newVal, oldVal) => {
+            send_configuration(0, newVal.y,newVal.number)
+            if (!isactivearray.value[0]) {
+                let x = default_location[0].x;
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
+                setdianposin(0, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[1], (newVal, oldVal) => {
+            send_configuration(1, newVal.y,newVal.number)
+            if (!isactivearray.value[1]) {
+                let x = default_location[1].x;
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
+                setdianposin(1, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[2], (newVal, oldVal) => {
+            //发送x y 唯一一个
+            send_configuration(2, newVal.y,newVal.number)
+            if (!isactivearray.value[2]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
+                setdianposin(2, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[3], (newVal, oldVal) => {
+            send_configuration(3, newVal.y,newVal.number)
+            if (!isactivearray.value[3]) {
+                let x = default_location[3].x;
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
+                setdianposin(3, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[4], (newVal, oldVal) => {
+            send_configuration(4, newVal.y,newVal.number)
+            if (!isactivearray.value[4]) {
+                let x = default_location[4].x;
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
+                setdianposin(4, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+
+        ///
+
+        watch(() => value[5], (newVal, oldVal) => {
+            send_configuration(5, newVal.x,newVal.number)
+            if (!isactivearray.value[5]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = default_location[5].y
+                setdianposin(5, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[6], (newVal, oldVal) => {
+            send_configuration(6, newVal.x,newVal.number)
+            if (!isactivearray.value[6]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = default_location[6].y
+                setdianposin(6, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[7], (newVal, oldVal) => {
+            send_configuration(7, newVal.x,newVal.number)
+            if (!isactivearray.value[7]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = default_location[7].y
+                setdianposin(7, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[8], (newVal, oldVal) => {
+            send_configuration(8, newVal.x,newVal.number)
+            if (!isactivearray.value[8]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = default_location[8].y
+                setdianposin(8, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+
+        watch(() => value[9], (newVal, oldVal) => {
+            //console.log(newVal)
+            send_configuration(9, newVal.x,newVal.number)
+            if (!isactivearray.value[9]) {
+                let x = Math.ceil(newVal.x / Proportion.value.x);
+                let y = default_location[9].y
+                setdianposin(9, x, y)
+            }
+            save_set_cache()
+        }, { deep: true })
+        ///
+
+        const send_configuration = (index: number, value: number,number:number) => {
+            
+            if(ste_status.value==0){
+                //console.log("Send")
+                if(index < 5){
+                    set?.SetBlendingVerDensity($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], index+1, Number(value)) 
+                }else{
+                    set?.SetBlendingHorDensity($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], index-4, Number(value));
+                }
+            }
+            save_set_cache()
+        }
+
+        initialization();
         return {
             model,
             options,
-            value
+            value,
+            reset,
+            resetall,
+            point_postion,
+            moveHandler,
+            div,
+            isshowarray,
+            isactivearray,
+            save
         };
     },
 });
diff --git a/src/components/FusionSettings/FourPointCalibration.vue b/src/components/FusionSettings/FourPointCalibration.vue
index 1ab3fe4..99e4bcf 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>
+                        @mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="points[0].x" :y="points[0].y"
+                        :isResizable="false" @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>
+                        @mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="points[1].x" :y="points[1].y"
+                        :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>
+                        @mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="points[2].x" :y="points[2].y"
+                        :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>
+                        @mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="points[3].x" :y="points[3].y"
+                        :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,7 @@
             <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')" />
         </div>
         <div class="col-2">
             <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
@@ -65,7 +70,7 @@
 import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
 import { dom } from 'quasar'
 
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
+import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive,onBeforeUnmount } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 import ClientConnection from "src/common/ClientConnection"
@@ -80,34 +85,60 @@ 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})
-        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 }]);
+        const configselsect = computed(() => { return $store.state.selected_projector })
+        //用于计算当前投影仪的索引
+        let serverconfig = JSON.parse($store.state.fusion_configuration);
+        const selectedprojector = computed(() => {
+            return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
+        })
+        const set_cache: any = ref([]);
+        //
+        //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 four = reactive([{ 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 });
-        let point2 = ref({ x: 0, y: 0 });
-        let point3 = ref({ x: 0, y: 0 });
-        let point4 = ref({ x: 0, y: 0 });
+        let Proportion = ref({ x: 0, y: 0 });//缩放比例
+        let points = reactive([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);//点的位置
         const isshowarray = ref([true, true, true, true])
         const isactivearray = ref([true, true, true, true])
-        const x1 = ref(0);
-        const y1 = ref(0);
-        const { offset } = dom
-
-        const save=()=>{
+        const ste_status =ref(0);
+        const save = () => {
             set?.SaveBlendingConfig("")
+            setTimeout(() => {
+                set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
+            }, 1000);
         }
-
+        ///
+        const use_set_cache = () => {
+            if (set_cache.value[selectedprojector.value]!=null) {
+                let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+                deepcopy(four, tmp)
+                //four=JSON.parse(JSON.stringify(tmp))
+                
+            }
+            syncpoint()
+        };
+        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(four);
+        }
+        onBeforeUnmount(()=>{
+            sessionStorage.FourPointCalibration=JSON.stringify(set_cache.value)
+        })
+        ///
         const activeMouseDown = (index: number) => {
             isactivearray.value[index] = true
         }
@@ -115,26 +146,28 @@ export default defineComponent({
             isactivearray.value[index] = false
         }
         onMounted(() => {
+            ste_status.value=1;
             setpoa();
 
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
         })
 
         const setpoa = () => {
-            console.log(config);
-            point1.x = 0
-            point1.y = 0
+            
+            points[0].x = 0
+            points[0].y = 0
 
-            x1.value = 0
-            y1.value = 0
+            points[1].x = div.value.offsetWidth - 25
+            points[1].y = 0
 
-            point2.value.x = div.value.offsetWidth - 25
-            point2.value.y = 0
+            points[2].x = 0
+            points[2].y = div.value.offsetHeight - 25
 
-            point3.value.x = 0
-            point3.value.y = div.value.offsetHeight - 25
+            points[3].x = div.value.offsetWidth - 25
+            points[3].y = div.value.offsetHeight - 25
 
-            point4.value.x = div.value.offsetWidth - 25
-            point4.value.y = div.value.offsetHeight - 25
 
 
             fourpostion.value[0].x = 0
@@ -148,183 +181,172 @@ 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
+                four[index].x = config.point4[index].x
+                four[index].y = config.point4[index].y
             }
+            if(sessionStorage.FourPointCalibration&&sessionStorage.FourPointCalibration.length>0){
+                set_cache.value=JSON.parse(sessionStorage.FourPointCalibration);
+                use_set_cache()
+            }else{
+                
+            }
+            //syncpoint()
+            
         }
-        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));
-            ///
+        watch(() => four[0], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0) 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));
-                x1.value = x
-                y1.value = y
+                points[0].x = x
+                points[0].y = y
                 isshowarray.value[0] = false
                 isactivearray.value[0] = false
                 setTimeout(() => {
                     isshowarray.value[0] = true
                 }, 100);
-                ///
+                
             }
+            save_set_cache()
         }, { 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));
-            ///
+        watch(() => four[1], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0) 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));
-                point2.value.x = x
-                point2.value.y = y
+                points[1].x = x
+                points[1].y = y
                 isshowarray.value[1] = false
                 isactivearray.value[1] = false
                 setTimeout(() => {
                     isshowarray.value[1] = true
                 }, 100);
+                
             }
-            ///
+            save_set_cache()
         }, { 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));
-            ///
+        watch(() => four[2], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0) 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
+
+                points[2].x = x
+                points[2].y = y
                 isshowarray.value[2] = false
                 setTimeout(() => {
                     isshowarray.value[2] = true
                 }, 100);
+                
             }
-            ///
+            save_set_cache()
         }, { 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));
-            ///
+        watch(() => four[3], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0) 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
+
+                points[3].x = x
+                points[3].y = y
                 isshowarray.value[3] = false
                 setTimeout(() => {
                     isshowarray.value[3] = true
                 }, 100);
+                
             }
-            ///
+            save_set_cache()
         }, { 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)
+            ste_status.value=1;
+            config = JSON.parse(JSON.stringify(fortmp))
+            //setpoa();
+            use_set_cache()
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
         }, { deep: true })
 
+        //为了加载 缓存的配置时 同步点的位置
+        const syncpoint=()=>{
+            for (let index = 0; index < fourpostion.value.length; index++) {
+                isactivearray.value[index]=false
+            }
+        }
+
         const reset = (index: number) => {
-            if (index == 0) {
-                four.value[0].x = 0
-                four.value[0].y = 1080
-                point1.x = 0
-                point1.y = 0
-                x1.value = 0
-                y1.value = 0
-            }
-            if (index == 1) {
-                four.value[1].x = 1920
-                four.value[1].y = 1080
-                fourpostion.value[1].x = div.value.offsetWidth - 25
-                fourpostion.value[1].y = 0
-            }
-            if (index == 2) {
-                four.value[2].x = 0
-                four.value[2].y = 0
-                fourpostion.value[2].x = 0
-                fourpostion.value[2].y = div.value.offsetHeight - 25
-            }
-            if (index == 3) {
-                four.value[3].x = 1920
-                four.value[3].y = 0
-                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
+            fourpostion.value[index].x = defaultfourpostion.value[index].x;
+            fourpostion.value[index].y = defaultfourpostion.value[index].y;
+
+            four[index].x = config.point4[index].def_x
+            four[index].y = config.point4[index].def_y
+
+            set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, index+1, Number(config.point4[index].def_x), Number(config.point4[index].def_y));
 
             isshowarray.value[index] = false
             setTimeout(() => {
                 isshowarray.value[index] = true
             }, 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
-
-                isshowarray.value[index] = false
-                setTimeout(() => {
-                isshowarray.value[index] = true
-                }, 100);
+                reset(index)
             }
+            
         }
 
         const moveHandler_1 = (data: any) => {
             let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
             let y = Math.ceil((config.height - data.top * Proportion.value.y - fourpostion.value[0].y));
 
-            four.value[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
-            four.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
+            four[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
             isactivearray.value[0] = true
+            save_set_cache()
         }
         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)
+            four[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
+            save_set_cache()
         }
         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));
+            four[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
+            save_set_cache()
         }
         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)
+            four[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
+            save_set_cache()
         }
         return {
             div,
-            options,
             fourpostion,
             reset,
             resetall,
@@ -334,16 +356,11 @@ export default defineComponent({
             moveHandler_4,
             four,
             save,
-            point1,
-            point2,
-            point3,
-            point4,
-            x1,
-            y1,
             isshowarray,
             isactivearray,
             activeMouseDown,
-            mouseUpHandler
+            mouseUpHandler,
+            points
         };
     },
 });
diff --git a/src/components/FusionSettings/FusionLocale.vue b/src/components/FusionSettings/FusionLocale.vue
index b3d0e37..c1839d4 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 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>
@@ -192,6 +122,7 @@ import {
   computed,
   defineProps,
   withDefaults,
+  onBeforeUnmount,
   reactive,
 } from "vue";
 import { useStore } from "src/store";
@@ -205,196 +136,169 @@ 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 group = ref(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([
-      {
-        label: "上融合带参数",
-        value: 0,
-      },
-      {
-        label: "左融合带参数",
-        value: 1,
-      },
-      {
-        label: "右融合带参数",
-        value: 2,
-      },
-      {
-        label: "下融合带参数",
-        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 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)
+        //console.log(set_cache.value,"use")
+      }
+    };
+    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))
+        }
+      }
+      ste_status.value = 1;
+      config = JSON.parse(JSON.stringify(fortmp))
+      //startconfig()
+      use_set_cache()
+      setTimeout(() => {
+        ste_status.value = 0;
+      }, 100);
+    }, { 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)
+      }
+      if (sessionStorage.FusionLocale) set_cache.value = JSON.parse(sessionStorage.FusionLocale); use_set_cache()
 
-///
+    }
+    startconfig()
+    onBeforeUnmount(() => {
+      sessionStorage.FusionLocale = JSON.stringify(set_cache.value)
+    })
 
-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));
+        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,
+      set_cache
     };
   },
 });
diff --git a/src/components/FusionSettings/SurfaceCorrection.vue b/src/components/FusionSettings/SurfaceCorrection.vue
index c433680..014b05b 100644
--- a/src/components/FusionSettings/SurfaceCorrection.vue
+++ b/src/components/FusionSettings/SurfaceCorrection.vue
@@ -49,7 +49,7 @@
                         :dense="true" v-model="nine[3].x" label="x" lazy-rules />
                     <q-input filled type="number" class="q-pt-md" @focus="isactivearray[3] = false" :dense="true"
                         v-model="nine[3].y" label="y" lazy-rules />
-                    <q-btn color="white"  @click="reset(3)" text-color="black" :label="$t('reset')" />
+                    <q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
                 </div>
             </div>
 
@@ -57,35 +57,34 @@
         <div class="col-8">
             <div ref="div" style="background-color: #7fffd4;height: 40vh;">
                 <div style="position:absolute;">
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
+                    <vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
                         :y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
                         @moveHandler="moveHandler_1"><span>{{ $t('point') }}1</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
+                    <vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
                         :y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
                         @moveHandler="moveHandler_2"><span>{{ $t('point') }}2</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
+                    <vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
                         :y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
                         @moveHandler="moveHandler_3"><span>{{ $t('point') }}3</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
+                    <vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
                         :y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
                         @moveHandler="moveHandler_4"><span>{{ $t('point') }}4</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
+                    <vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
                         :y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
                         @moveHandler="moveHandler_5"><span>{{ $t('point') }}5</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
+                    <vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
                         :y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
                         @moveHandler="moveHandler_6"><span>{{ $t('point') }}6</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
+                    <vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
                         :y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
                         @moveHandler="moveHandler_7"><span>{{ $t('point') }}7</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
+                    <vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
                         :y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
                         @moveHandler="moveHandler_8"><span>{{ $t('point') }}8</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
+                    <vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
                         :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
                         @moveHandler="moveHandler_9"><span>{{ $t('point') }}9</span> </vue3ResizeDrag>
                 </div>
-
             </div>
         </div>
         <div class="col-2">
@@ -101,9 +100,8 @@
         </div>
         <div class="col-4">
             <div class="row">
-                <div class="col-6"> <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-6"> <q-btn color="white" @click="resetall" text-color="black"
+                        :label="$t('resetall')" /></div>
                 <div class="col-3"> <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pt-md"
                         :dense="true" v-model="nine[6].x" label="x" lazy-rules />
                     <q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
@@ -146,7 +144,7 @@
 <script lang="ts">
 import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
 import GlobalData from "src/common/GlobalData";
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted } from "vue";
+import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted ,onBeforeUnmount ,reactive} from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 
@@ -159,20 +157,24 @@ 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 config = JSON.parse($store.state.fusion_configuration).projectors[0];
+        const configselsect = computed(() => { return $store.state.selected_projector })
         let Proportion = ref({ x: 0, y: 0 });
         let centor = ref({ x: 0, y: 0 });
         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 nine = reactive([{ 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
         }
+        //用于计算当前投影仪的索引
+        let serverconfig = JSON.parse($store.state.fusion_configuration);
+        const selectedprojector = computed(() => {
+            return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
+        })
+        const set_cache: any = ref([]);
+        //
+        const ste_status =ref(0);
         const isshowarray = ref([true, true, true, true, true, true, true, true, true,])
         const isactivearray = ref([true, true, true, true, true, true, true, true, true,])
         let ninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
@@ -180,83 +182,141 @@ 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
+            nine[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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
+            nine[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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
+            nine[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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);
-
-            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
+            let y = config.height / 2 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
+            nine[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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);
-
-            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
+            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[4].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[4].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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);
-
-            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
+            let y = config.height / 2 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
+            nine[5].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[5].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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
+            nine[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[6].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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
+            nine[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[7].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
         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
+            nine[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine[8].y = y > config.height ? config.height : y && y < 0 ? 0 : y
+            save_set_cache()
         }
-        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]){
-                    fortmp=JSON.parse(JSON.stringify(i)) 
+
+
+        //为了加载 缓存的配置时 同步点的位置
+        const syncpoint = () => {
+            for (let index = 0; index < ninepostion.value.length; index++) {
+                isactivearray.value[index] = false
+            }
+        }
+
+        const use_set_cache = () => {
+            if (set_cache.value[selectedprojector.value]!=null) {
+                let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+                deepcopy(nine, tmp)
+                
+            }
+            //console.log(nine)
+            syncpoint()
+        };
+        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];
                 }
             }
-            config=JSON.parse(JSON.stringify(fortmp)) 
-            console.log(config)
+        }
+        const save_set_cache = () => {
+            set_cache.value[selectedprojector.value] = JSON.stringify(nine);
+        }
+        onBeforeUnmount(() => {
+            if(set_cache.value[selectedprojector.value]!=null){
+                sessionStorage.SurfaceCorrection = JSON.stringify(set_cache.value)
+            }
+            
+        })
+
+        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))
+                }
+            }
+            ste_status.value=1;
+            config = JSON.parse(JSON.stringify(fortmp))
+            use_set_cache()
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
         }, { deep: true })
         onMounted(() => {
+            ste_status.value=1;
             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();
+            syncpoint()
+            setTimeout(() => {
+                ste_status.value=0;
+            }, 100);
         })
+        const setninepostion = () => {
+            for (let index = 0; index < defaultninepostion.value.length; index++) {
+                nine[index].x = config.point9[index].x
+                nine[index].y = config.point9[index].y
+            }
+        }
         const startpostion = () => {
             ninepostion.value[0].x = 0
             ninepostion.value[0].y = 0
@@ -288,180 +348,128 @@ export default defineComponent({
             Proportion.value.x = config.width / (div.value.offsetWidth - 25)
             Proportion.value.y = config.height / (div.value.offsetHeight - 25)
 
-            centor.value.x = config.width *2 / (div.value.offsetWidth + 25)
-            centor.value.y = config.height*2 / (div.value.offsetHeight + 25)
+            centor.value.x = config.width * 2 / (div.value.offsetWidth + 25)
+            centor.value.y = config.height * 2 / (div.value.offsetHeight + 25)
 
             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 = nine.value[index].x
-                defaultnine.value[index].y = nine.value[index].y
+                defaultnine.value[index].x = nine[index].x
+                defaultnine.value[index].y = nine[index].y
             }
-
-
+            if(sessionStorage.SurfaceCorrection&&sessionStorage.SurfaceCorrection.length>0){
+                set_cache.value=JSON.parse(sessionStorage.SurfaceCorrection);
+                use_set_cache()
+            }else{
+                
+            }
+            syncpoint()
         }
-        ///
         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 == 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 == 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 == 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 == 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 == 5 || index == -1) {
-                nine.value[5].x = 1920
-                nine.value[5].y = 540
+            ninepostion.value[index].x = defaultninepostion.value[index].x;
+            ninepostion.value[index].y = defaultninepostion.value[index].y;
 
-                ninepostion.value[5].x = div.value.offsetWidth - 25
-                ninepostion.value[5].y = div.value.offsetHeight / 2
-            }
-            if (index == 6 || index == -1) {
-                nine.value[6].x = 0
-                nine.value[6].y = 0
+            nine[index].x = config.point9[index].def_x
+            nine[index].y = config.point9[index].def_y
 
-                ninepostion.value[6].x = 0
-                ninepostion.value[6].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 == 8 || index == -1) {
-                nine.value[8].x = 1920
-                nine.value[8].y = 0
+            set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, index+1, Number(config.point9[index].def_x), Number(config.point9[index].def_y));
 
-                ninepostion.value[8].x = div.value.offsetWidth - 25
-                ninepostion.value[8].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
             isshowarray.value[index] = false
             setTimeout(() => {
                 isshowarray.value[index] = true
             }, 100);
         }
         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
-
-
-                isshowarray.value[index] = false
-                setTimeout(() => {
-                    isshowarray.value[index] = true
-                }, 100);
+            for (let index = 0; index < nine.length; index++) {
+                reset(index)
             }
         }
-        ///
-        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));
-            ///
+        watch(() => nine[0], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0) 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)
             }
-            ///
+            save_set_cache()
+
         }, { 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));
-            ///
+        watch(() => nine[1], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  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)
             }
-            ///
+            save_set_cache()
+
         }, { 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));
+        watch(() => nine[2], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 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 - newVal.y) / Proportion.value.y));
                 setdianposin(2, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[3], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[3], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 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 - newVal.y) / Proportion.value.y));
                 setdianposin(3, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[4], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[4], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[4]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(4, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[5], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[5], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[5]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(5, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[6], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[6], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[6]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(6, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[7], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[7], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[7]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(7, x, y)
             }
+            save_set_cache()
         }, { deep: true })
-        watch(() => nine.value[8], (newVal, oldVal) => {
-            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
+        watch(() => nine[8], (newVal, oldVal) => {
+            if ($store.state.enablefusion&&ste_status.value==0)  set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[8]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
                 let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(8, x, y)
             }
+            save_set_cache()
         }, { 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 +479,16 @@ export default defineComponent({
             setTimeout(() => {
                 isshowarray.value[index] = true
             }, 100);
-
-
-
+            
         }
-        const save=()=>{
+        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..c59bb63 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" />
+                {{ $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.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' },
                     {
@@ -54,7 +56,7 @@
                       label: $t('DensityCorrection'),
                       value: 'DensityCorrection',
                     },
-                    { label: $t('GridSettings'), value: 'GridSettings' },
+                    // { label: $t('GridSettings'), value: 'GridSettings' },
                   ]" />
               </div>
               <div style="min-height: 72vh">
@@ -68,6 +70,7 @@
 
         <q-card-actions align="right">
           <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
+          <q-btn flat :label="$t('save config')" no-caps color="primary" @click="save" v-close-popup />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -93,9 +96,6 @@ import {
   computed,
   onMounted,
   onBeforeMount,
-  onUpdated,
-  onBeforeUnmount,
-  nextTick,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar, copyToClipboard } from "quasar";
@@ -128,11 +128,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,17 +147,38 @@ 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({});
 
+      const erroe=()=>{
+        $q.notify({
+              color: "negative",
+              icon: "warning",
+              message:"数据获取失败!",
+              position: "top",
+              timeout: 1500,
+            });
+      }
+      const save = () => {
+            set?.SaveBlendingConfig("")
+            show_dialog.value = false
+        }
     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);})
-      }, 1000);
+        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);})  
+        } catch (error) {
+          //let textdata="{\"col\":2,\"enable\":true,\"projectors\":[{\"col\":0,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1171,\"y\":712},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920},{\"col\":1,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920}],\"row\":1,\"screen_height\":0,\"screen_width\":0}"
+          //let tmp=JSON.parse(textdata);EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", textdata)
+          //set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})
+          console.log("data is false")
+        }
+        
+        
+      }, 500);
       })
     return {
       show_dialog,
@@ -165,6 +186,8 @@ export default defineComponent({
       copyToClipboard,
       showDialog,
       EnableBlending,
+      config,
+      save
     };
   },
 });
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 3d46c3e..422363a 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -423,5 +423,5 @@ export default {
   "Projector":"Projector",
   "resetall":"reset all",
   "save config":"save config",
-  "Whether to enable mixing":"Whether to enable mixing"
+  "Whether to enable integration":"Whether to enable integration"
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 26d435e..8baec0c 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -692,5 +692,5 @@ export default {
   "Projector":"投影机",
   "resetall":"重置所有",
   "save config":"保存配置",
-  "Whether to enable mixing":"是否启用混合"
+  "Whether to enable integration":"是否启用融合"
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 39d11bc..31baac0 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -412,7 +412,7 @@
           <q-item
             clickable
             v-close-popup
-            @click="$refs.fusion_settings_dialog.showDialog()"
+            @click="$refs.fusion_settings_dialog.showDialog();getconfig()"
           >
             <q-item-section avatar>
               <!-- <q-icon name="devices" /> -->
@@ -566,6 +566,8 @@ export default defineComponent({
     let $q = useQuasar();
     let $t = useI18n();
 
+    let set = GlobalData.getInstance().getCurrentClient();
+
     let show_advanced_menu = ref(true);
     const edge_blending_dialog: Ref<any> = ref(null);
     const register_dialog: Ref<any> = ref(null);
@@ -594,6 +596,14 @@ export default defineComponent({
         return 'rotate '+sulv+'s linear infinite'
       }
     );
+    const getconfig=()=>{
+      try {
+        set?.GetBlendingConfig("").then((res)=>{})
+      } catch (error) {
+        
+      }
+      
+    }
     const checkRegistered = () => {
       if (
         GlobalData.getInstance().getCurrentClient()?.is_connected &&
@@ -660,6 +670,7 @@ export default defineComponent({
     });
 
     return {
+      getconfig,
       show_advanced_menu,
       plan_running,
       edge_blending_dialog,