From 7141313c8c8398b99f1ef77495a2ded32a6a3968 Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Mon, 6 Feb 2023 10:49:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ui=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/DensityCorrection.vue      | 41 ++++++++++-------
 .../FusionSettings/FourPointCalibration.vue   | 23 +++++++---
 .../FusionSettings/FusionLocale.vue           | 45 ++++++++++++++-----
 .../FusionSettings/SurfaceCorrection.vue      | 29 +++++++-----
 src/i18n/en-US/index.ts                       |  3 +-
 src/i18n/zh-CN/index.ts                       |  3 +-
 6 files changed, 100 insertions(+), 44 deletions(-)

diff --git a/src/components/FusionSettings/DensityCorrection.vue b/src/components/FusionSettings/DensityCorrection.vue
index 295648c..1328b76 100644
--- a/src/components/FusionSettings/DensityCorrection.vue
+++ b/src/components/FusionSettings/DensityCorrection.vue
@@ -4,43 +4,43 @@
     <div class="col-8 q-pt-md">
       <div ref="div" style="width: 100%; background-color: #646464; height: 100%">
         <div style="position: absolute">
-          <vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="30" :x="point_postion[0].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==0?'action':'']" :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="30" :x="point_postion[0].x"
             :y="point_postion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
             @moveHandler="moveHandler($event, 0)"><p  class="p0 vcolro">↑</p><p class="vcolro p0">V1</p><p class=" vcolro p0">↓</p>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="30" :x="point_postion[1].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==1?'action':'']" :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="30" :x="point_postion[1].x"
             :y="point_postion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
             @moveHandler="moveHandler($event, 1)"><p  class="p0 vcolro">↑</p><p class="vcolro p0">V2</p><p class="p0 vcolro">↓</p>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="30" :x="point_postion[2].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==2?'action':'']" :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="30" :x="point_postion[2].x"
             :y="point_postion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
             @moveHandler="moveHandler($event, 2)"><p  class="p0 vcolro">↑</p><p class="vcolro p0">V3</p><p class="p0 vcolro">↓</p>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="30" :x="point_postion[3].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==3?'action':'']" :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="30" :x="point_postion[3].x"
             :y="point_postion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
             @moveHandler="moveHandler($event, 3)"><p  class="p0 vcolro">↑</p><p class="vcolro p0">V4</p><p class="p0 vcolro">↓</p>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="30" :x="point_postion[4].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==4?'action':'']" :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="30" :x="point_postion[4].x"
             :y="point_postion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
             @moveHandler="moveHandler($event, 4)"><p  class="p0 vcolro">↑</p><p class="vcolro p0">V5</p><p class="p0 vcolro">↓</p>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="40" :h="20" :x="point_postion[5].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==5?'action':'']" :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="40" :h="20" :x="point_postion[5].x"
             :y="point_postion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
             @moveHandler="moveHandler($event, 5)"><span class="hcolro">←H1→</span>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="40" :h="20" :x="point_postion[6].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==6?'action':'']" :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="40" :h="20" :x="point_postion[6].x"
             :y="point_postion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
             @moveHandler="moveHandler($event, 6)"><span class="hcolro">←H2→</span>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="40" :h="20" :x="point_postion[7].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==7?'action':'']" :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="40" :h="20" :x="point_postion[7].x"
             :y="point_postion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
             @moveHandler="moveHandler($event, 7)"><span class="hcolro">←H3→</span>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="40" :h="20" :x="point_postion[8].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==8?'action':'']" :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="40" :h="20" :x="point_postion[8].x"
             :y="point_postion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
             @moveHandler="moveHandler($event, 8)"><span class="hcolro">←H4→</span>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="40" :h="20" :x="point_postion[9].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==9?'action':'']" :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="40" :h="20" :x="point_postion[9].x"
             :y="point_postion[9].y" @mousedown="activeMouseDown(9)" :isResizable="false"
             @moveHandler="moveHandler($event, 9)"><span class="hcolro">←H5→</span>
           </vue3ResizeDrag>
@@ -168,6 +168,9 @@
   padding: 0;
   line-height: 8px;
 }
+.action{
+  background-color: aqua;
+}
 </style>
 <script lang="ts">
 import {
@@ -193,6 +196,7 @@ export default defineComponent({
   setup() {
     let $store = useStore();
     let $t = useI18n();
+    const now_index = ref(0);
     const value = reactive([
       { x: 0, y: 0, number: 0 },
       { x: 0, y: 0, number: 0 },
@@ -303,6 +307,9 @@ export default defineComponent({
     onBeforeUnmount(() => {
       sessionStorage.DensityCorrection = JSON.stringify(set_cache.value);
     });
+    watch(()=>now_index,(newval,oldval)=>{
+      now_index.value>5?set?.SetBlendingOption("blending_grids_select_point",`density_h:${now_index.value-4}`):set?.SetBlendingOption("blending_grids_select_point",`density_v:${now_index.value+1}`)
+    },{ deep: true })
     watch(
       () => configselsect,
       (newVal, oldVal) => {
@@ -527,6 +534,7 @@ export default defineComponent({
       setTimeout(() => {
         isshowarray.value[index] = true;
       }, 100);
+      now_index.value=index
     };
     watch(
       () => value[0],
@@ -537,6 +545,7 @@ export default defineComponent({
           let y = Math.ceil((config.height - newVal.y) / Proportion.value.y);
           setdianposin(0, x, y);
         }
+        now_index.value=0
         save_set_cache();
       },
       { deep: true }
@@ -695,14 +704,16 @@ export default defineComponent({
     };
     const activeMouseDown = (index: number) => {
       isactivearray.value[index] = true;
-      if(index>=5){
-        set?.SetBlendingOption("blending_grids_select_point",`density_h:${index-4}`)
-      }else{
-        set?.SetBlendingOption("blending_grids_select_point",`density_v:${index+1}`)
-      }
+      // if(index>=5){
+      //   set?.SetBlendingOption("blending_grids_select_point",`density_h:${index-4}`)
+      // }else{
+      //   set?.SetBlendingOption("blending_grids_select_point",`density_v:${index+1}`)
+      // }
+      now_index.value=index
     };
     initialization();
     return {
+      now_index,
       activeMouseDown,
       model,
       options,
diff --git a/src/components/FusionSettings/FourPointCalibration.vue b/src/components/FusionSettings/FourPointCalibration.vue
index 660a574..d1c2334 100644
--- a/src/components/FusionSettings/FourPointCalibration.vue
+++ b/src/components/FusionSettings/FourPointCalibration.vue
@@ -65,7 +65,7 @@
     <div class="col-8">
       <div ref="div" style="background-color: #646464; height: 40vh">
         <div style="position: absolute">
-          <vue3ResizeDrag
+          <vue3ResizeDrag style="border: 0;" :class="[now_index==0?'action':'']"
             v-if="isshowarray[0]"
             :isActive="isactivearray[0]"
             @mousedown="activeMouseDown(0)"
@@ -78,7 +78,7 @@
             @moveHandler="moveHandler_1"
             ><div class="point">1</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag
+          <vue3ResizeDrag style="border: 0;"  :class="[now_index==1?'action':'']"
             v-if="isshowarray[1]"
             :isActive="isactivearray[1]"
             @mousedown="activeMouseDown(1)"
@@ -91,7 +91,7 @@
             @moveHandler="moveHandler_2"
             ><div class="point">2</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag
+          <vue3ResizeDrag style="border: 0;"  :class="[now_index==2?'action':'']"
             v-if="isshowarray[2]"
             :isActive="isactivearray[2]"
             @mousedown="activeMouseDown(2)"
@@ -104,7 +104,7 @@
             @moveHandler="moveHandler_3"
             ><div class="point">3</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag
+          <vue3ResizeDrag style="border: 0;"  :class="[now_index==3?'action':'']"
             v-if="isshowarray[3]"
             :isActive="isactivearray[3]"
             @mousedown="activeMouseDown(3)"
@@ -196,6 +196,9 @@
 .point{
   width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue;
 }
+.action{
+  background-color: aqua;
+}
 </style>
 <script lang="ts">
 import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
@@ -271,6 +274,7 @@ export default defineComponent({
       { x: 0, y: 0 },
       { x: 0, y: 0 },
     ]); //点的位置
+    const now_index=ref(0)
     const isshowarray = ref([true, true, true, true]);
     const isactivearray = ref([true, true, true, true]);
     const ste_status = ref(0);
@@ -307,7 +311,7 @@ export default defineComponent({
     });
     const activeMouseDown = (index: number) => {
       isactivearray.value[index] = true;
-      set?.SetBlendingOption("blending_grids_select_point",`4:${index+1}`)
+      now_index.value=index
     };
     const mouseUpHandler = (index: number) => {
       isactivearray.value[index] = false;
@@ -404,6 +408,7 @@ export default defineComponent({
             isshowarray.value[0] = true;
           }, 100);
         }
+        now_index.value=0
         save_set_cache();
       },
       { deep: true }
@@ -431,6 +436,7 @@ export default defineComponent({
             isshowarray.value[1] = true;
           }, 100);
         }
+        now_index.value=1
         save_set_cache();
       },
       { deep: true }
@@ -460,6 +466,7 @@ export default defineComponent({
             isshowarray.value[2] = true;
           }, 100);
         }
+        now_index.value=2
         save_set_cache();
       },
       { deep: true }
@@ -489,6 +496,7 @@ export default defineComponent({
             isshowarray.value[3] = true;
           }, 100);
         }
+        now_index.value=3
         save_set_cache();
       },
       { deep: true }
@@ -519,7 +527,9 @@ export default defineComponent({
       },
       { deep: true }
     );
-
+    watch(()=>now_index,(newval,oldval)=>{
+      set?.SetBlendingOption("blending_grids_select_point",`4:${now_index.value+1}`)
+    },{ deep: true })
     //为了加载 缓存的配置时 同步点的位置
     const syncpoint = () => {
       for (let index = 0; index < fourpostion.value.length; index++) {
@@ -647,6 +657,7 @@ export default defineComponent({
       };
     });
     return {
+      now_index,
       div,
       fourpostion,
       reset,
diff --git a/src/components/FusionSettings/FusionLocale.vue b/src/components/FusionSettings/FusionLocale.vue
index 4f8d7ce..9ebd166 100644
--- a/src/components/FusionSettings/FusionLocale.vue
+++ b/src/components/FusionSettings/FusionLocale.vue
@@ -91,30 +91,53 @@
         </div>
       </div>
     </div>
-    <div class="col-4 offset-4" v-if="group != 4">
+    <div class="col-12" v-if="group != 4">
       <p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p>
       <div style="display: flex; justify-content: space-evenly">
         <div>
-          <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('alpha')" text-color="black" label="↑" /></div>
-          <q-slider track-size="'10vh'"  v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
+          <!-- <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('alpha')" text-color="black" label="↑" /></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 />
-          <div  class="btn_top"><q-btn size="sm"  color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div>
+          <!-- <div  class="btn_top"><q-btn size="sm"  color="white" @click="reduce('alpha')" text-color="black" label="↓" /></div> -->
+          <div> <q-input dense filled type="number"  step="0.1" v-model="array[group].alpha" label="alpha"
+              lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
+              ]" /></div>
           <p class="text-center">alpha</p>
         </div>
 
         <div>
-          <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('p')" text-color="black" label="↑" /></div>
-          <q-slider track-size="'10vh'" v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
+          <!-- <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('p')" text-color="black" label="↑" /></div> -->
+          <q-slider  v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
             vertical reverse label-always />
-          <div  class="btn_top"><q-btn size="sm"  color="white" @click="reduce('p')" text-color="black" label="↓" /></div>
+          <!-- <div  class="btn_top"><q-btn size="sm"  color="white" @click="reduce('p')" text-color="black" label="↓" /></div> -->
+          <div> <q-input dense filled type="number"  step="0.1" v-model="array[group].p" label="p"
+              lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
+              ]" /></div>
           <p class="text-center">p</p>
         </div>
 
         <div>
-          <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('gamma')" text-color="black" label="↑" /></div>
-          <q-slider track-size="'10vh'" v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
-            vertical reverse label-always />
-          <div class="btn_top"><q-btn size="sm"  color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div>
+          <!-- <div class="btn_bottom"><q-btn size="sm"  color="white" @click="add('gamma')" text-color="black" label="↑" /></div> -->
+          <q-slider  v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green" vertical reverse label-always />
+          <!-- <div class="btn_top"><q-btn size="sm"  color="white" @click="reduce('gamma')" text-color="black" label="↓" /></div> -->
+          <div> <q-input dense filled type="number"  step="0.1" v-model="array[group].gamma" label="gamma"
+              lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter 0-100'),
+              ]" /></div>
           <p class="text-center">gamma</p>
         </div>
       </div>
diff --git a/src/components/FusionSettings/SurfaceCorrection.vue b/src/components/FusionSettings/SurfaceCorrection.vue
index 2bfa2e0..cb5346a 100644
--- a/src/components/FusionSettings/SurfaceCorrection.vue
+++ b/src/components/FusionSettings/SurfaceCorrection.vue
@@ -59,39 +59,39 @@
     <div class="col-8">
       <div ref="div" style="background-color: #646464; height: 40vh">
         <div style="position: absolute">
-          <vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="20" :h="20" :x="ninepostion[0].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==0?'action':'']" :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="20" :h="20" :x="ninepostion[0].x"
             :y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false" @moveHandler="moveHandler_1">
             <div class="point">1</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="20" :h="20" :x="ninepostion[1].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==1?'action':'']" :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="20" :h="20" :x="ninepostion[1].x"
             :y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false" @moveHandler="moveHandler_2">
             <div class="point">2</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="20" :h="20" :x="ninepostion[2].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==2?'action':'']" :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="20" :h="20" :x="ninepostion[2].x"
             :y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false" @moveHandler="moveHandler_3">
             <div class="point">3</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="20" :h="20" :x="ninepostion[3].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==3?'action':'']" :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="20" :h="20" :x="ninepostion[3].x"
             :y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false" @moveHandler="moveHandler_4">
             <div class="point">4</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="20" :h="20" :x="ninepostion[4].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==4?'action':'']" :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="20" :h="20" :x="ninepostion[4].x"
             :y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false" @moveHandler="moveHandler_5">
             <div class="point">5</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="20" :h="20" :x="ninepostion[5].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==5?'action':'']" :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="20" :h="20" :x="ninepostion[5].x"
             :y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false" @moveHandler="moveHandler_6">
             <div class="point">6</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="20" :h="20" :x="ninepostion[6].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==6?'action':'']" :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="20" :h="20" :x="ninepostion[6].x"
             :y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false" @moveHandler="moveHandler_7">
             <div class="point">7</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="20" :h="20" :x="ninepostion[7].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==7?'action':'']" :isActive="isactivearray[7]" v-if="isshowarray[7]" :w="20" :h="20" :x="ninepostion[7].x"
             :y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false" @moveHandler="moveHandler_8">
             <div class="point">8</div>
           </vue3ResizeDrag>
-          <vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="20" :h="20" :x="ninepostion[8].x"
+          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==8?'action':'']" :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="20" :h="20" :x="ninepostion[8].x"
             :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" @moveHandler="moveHandler_9">
             <div class="point">9</div>
           </vue3ResizeDrag>
@@ -154,6 +154,9 @@
 .point{
   width: 100%;height: 100%;border-radius: 50%;background: #00ff00;color: aliceblue;
 }
+.action{
+  background-color: aqua;
+}
 </style>
 <script lang="ts">
 import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
@@ -187,6 +190,7 @@ export default defineComponent({
     let Proportion = ref({ x: 0, y: 0 });
     let centor = ref({ x: 0, y: 0 });
     const div = ref();
+    const now_index = ref(0);
     let nine = reactive([
       { x: 0, y: 1080 },
       { x: 960, y: 1920 },
@@ -211,7 +215,7 @@ export default defineComponent({
     ]);
     const activeMouseDown = (index: number) => {
       isactivearray.value[index] = true;
-      set?.SetBlendingOption("blending_grids_select_point",`9:${index+1}`)
+      now_index.value=index
     };
     //用于计算当前投影仪的索引
     let serverconfig = JSON.parse($store.state.fusion_configuration);
@@ -766,6 +770,7 @@ export default defineComponent({
       setTimeout(() => {
         isshowarray.value[index] = true;
       }, 100);
+      now_index.value=index
     };
     const save = () => {
       set?.SaveBlendingConfig("");
@@ -775,7 +780,11 @@ export default defineComponent({
         });
       }, 1000);
     };
+    watch(()=>now_index,(newval,oldval)=>{
+      set?.SetBlendingOption("blending_grids_select_point",`9:${now_index.value+1}`)
+    },{ deep: true })
     return {
+      now_index,
       model,
       save,
       nine,
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index e9ff0cc..7fdfb92 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -446,5 +446,6 @@ export default {
   "disable_clip":"disable clip",
   "show_mask":"hide desktop",
   "save_bmp":"save bmp",
-  "disable_blending_params":"disable blending params"
+  "disable_blending_params":"disable blending params",
+  "Please enter a value within the range":"Please enter a value within the range"
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index eda3390..88d1ad7 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -715,5 +715,6 @@ export default {
   "disable_clip":"禁用裁剪",
   "show_mask":"隐藏桌面",
   "save_bmp":"保存BMP",
-  "disable_blending_params":"禁用融合参数"
+  "disable_blending_params":"禁用融合参数",
+  "Please enter a value within the range":"请输入范围内的值"
 };