使用其他插件重写疏密校正

package.json

@@ -26,8 +26,10 @@
     "update": "^0.7.4",
     "v-viewer": "^3.0.9",
     "vue": "^3.0.0",
+    "vue-drag-resize": "^1.5.4",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0",
+    "vue3-draggable-resizable": "^1.6.5",
     "vuex": "^4.0.1",
     "zrender": "^5.3.1"
   },

src/components/FusionSettings/DensityCorrection.vue

@@ -4,98 +4,47 @@
     <div class="col-8 q-pt-md">
       <div ref="div" style="width: 100%; background-color: #646464; height: 100%">
         <div style="position: absolute">
-          <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"
+          <Vue3DraggableResizable v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
-            :y="point_postion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
+            :resizable="false" :x="0" v-model:y="point_postion[index].y" :disabledX="true"
-            @moveHandler="moveHandler($event, 0)"><p class="vcolro p0">V1</p>
+            @activated="now_index = index" @dragging="dragStartHandle($event, index, 'v')">
-          </vue3ResizeDrag>
+            <span>v{{
-          <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"
+              index+ 1
-            :y="point_postion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
+            }}</span>
-            @moveHandler="moveHandler($event, 1)"><p class="vcolro p0">V2</p>
+          </Vue3DraggableResizable>
-          </vue3ResizeDrag>
+          <Vue3DraggableResizable v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
-          <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"
+            :resizable="false" :x="max_x_y[0]" v-model:y="point_postion[index].y" @activated="now_index = index"
-            :y="point_postion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
+            @dragging="dragStartHandle($event, index, 'v')">
-            @moveHandler="moveHandler($event, 2)"><p class="vcolro p0">V3</p>
+            <span>v{{
-          </vue3ResizeDrag>
+              index+ 1
-          <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"
+            }}</span>
-            :y="point_postion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
+          </Vue3DraggableResizable>
-            @moveHandler="moveHandler($event, 3)"><p class="vcolro p0">V4</p>
+          <Vue3DraggableResizable v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
-          </vue3ResizeDrag>
+            :resizable="false" v-model:x="point_postion[index + 5].x" :y="-20" @activated="now_index = index + 5"
-          <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"
+            :disabledY="true" @dragging="dragStartHandle($event, index + 5, 'h')">
-            :y="point_postion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
+            <span>h{{
-            @moveHandler="moveHandler($event, 4)"><p class="vcolro p0">V5</p>
+              index+ 1
-          </vue3ResizeDrag>
+            }}</span>
-          <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"
+          </Vue3DraggableResizable>
-            :y="point_postion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
+          <Vue3DraggableResizable v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
-            @moveHandler="moveHandler($event, 5)"><span class="hcolro">H1</span>
+            :resizable="false" v-model:x="point_postion[index + 5].x" @activated="now_index = index + 5"
-          </vue3ResizeDrag>
+            :y="max_x_y[1] + 20" @dragging="dragStartHandle($event, index + 5, 'h')">
-          <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"
+            <span>h{{
-            :y="point_postion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
+              index+ 1
-            @moveHandler="moveHandler($event, 6)"><span class="hcolro">H2</span>
+            }}</span>
-          </vue3ResizeDrag>
+          </Vue3DraggableResizable>
-          <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  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  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>
         </div>
       </div>
     </div>
     <div class="col-3 q-pt-md">
       <div class="row">
-        <div class="col-12">
+        <div class="col-12" v-for="(item, index) in 5">
           <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"
+              <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[index].y"
-                v-model="value[0].y" label="y" lazy-rules />
+                @update:model-value="chang(index, $event)" label="y" lazy-rules />
-              <q-btn  size="sm" color="white" @click="reset(0)" text-color="black" :label="$t('reset') + ' v1'" />
+              <q-btn size="sm" color="white" @click="reset(index)" text-color="black"
-            </div>
+                :label="$t('reset') + `v${index + 1}`" />
-          </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  size="sm" color="white" @click="reset(1)" text-color="black" :label="$t('reset') + ' v2'" />
-            </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  size="sm" color="white" @click="reset(2)" text-color="black" :label="$t('reset') + ' v3'" />
-            </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  size="sm" color="white" @click="reset(3)" text-color="black" :label="$t('reset') + ' v4'" />
-            </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  size="sm" color="white" @click="reset(4)" text-color="black" :label="$t('reset') + ' v5'" />
             </div>
           </div>
         </div>
@@ -104,47 +53,37 @@
     <div class="col-1"></div>
     <div class="col-11">
       <div class="box">
-        <div class="box_son">
+        <div class="box_son" v-for="(item, index) in 5">
-          <q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md" :dense="true"
+          <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[index + 5].x" label="x"
-            v-model="value[5].x" label="x" lazy-rules />
+            @update:model-value="chang(index + 5, $event)" lazy-rules />
-          <q-btn  size="sm" color="white" @click="reset(5)" text-color="black" :label="$t('reset') + ' h1'" />
+          <q-btn size="sm" color="white" @click="reset(index + 5)" text-color="black"
+            :label="$t('reset') + `h${index + 1}`" />
         </div>
-
-        <div class="box_son">
-          <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  size="sm" color="white" @click="reset(6)" text-color="black" :label="$t('reset') + ' h2'" />
-        </div>
-
-        <div class="box_son">
-          <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  size="sm" color="white" @click="reset(7)" text-color="black" :label="$t('reset') + ' h3'" />
-        </div>
-
-        <div class="box_son">
-          <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  size="sm" color="white" @click="reset(8)" text-color="black" :label="$t('reset') + ' h4'" />
-        </div>
-
-        <div class="box_son">
-          <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  size="sm" color="white" @click="reset(9)" text-color="black" :label="$t('reset') + ' h5'" />
-        </div>
-
         <div class="box_son q-pt-xl">
-          <q-btn
+          <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
-            color="white"
-            @click="resetall"
-            text-color="black"
-            :label="$t('resetall')"
-          />
         </div>
       </div>
     </div>
   </div>
+  <div>
+      <div class="row">
+        <div class="col-1"></div>
+        <div class="col-2"> <q-select class="q-pt-md" :dense="true" filled v-model="options_model_v" :options="options_v" emit-value
+            map-options /></div>
+        <div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
+            v-model="value[options_model_v].y" @update:model-value="chang(options_model_v, $event)" lazy-rules />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-1"></div>
+        <div class="col-2"> <q-select class="q-pt-md" :dense="true" filled v-model="options_model_h" :options="options_h" emit-value
+            map-options /></div>
+        <div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
+            v-model="value[options_model_h].x" @update:model-value="chang(options_model_h+5, $event)" lazy-rules />
+        </div>
+      </div>
+
+    </div>
 </template>
 
 <style scoped>
@@ -152,21 +91,27 @@
   display: flex;
   justify-content: space-between;
 }
+
 .box_son {
   width: 10rem;
   padding-right: 1rem;
 }
+
 .vcolro {
   color: #d50000;
 }
+
 .hcolro {
   color: #00c853;
   font-size: 5px;
 }
+
 .p0 {
   margin: 0;
   padding: 0;
+  line-height: 8px;
 }
+
 .action {
   background-color: aqua;
 }
@@ -187,15 +132,22 @@ 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";
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+import { type } from "os";
+import { number } from "@intlify/core-base";
 export default defineComponent({
   name: "ComponentDensityCorrection",
   components: {
     vue3ResizeDrag,
+    Vue3DraggableResizable
   },
   setup() {
     let $store = useStore();
     let $t = useI18n();
     const now_index = ref(0);
+    const max_x_y = reactive([0, 0]);
+    const now_adjust = ref("v")
     const value = reactive([
       { x: 0, y: 0, number: 0 },
       { x: 0, y: 0, number: 0 },
@@ -208,32 +160,13 @@ export default defineComponent({
       { x: 0, y: 0, number: 0 },
       { x: 0, y: 0, number: 0 },
     ]);
+    //为动态添加做准备
+    const value_h = reactive([]);
+    const value_v = reactive([]);
+    const default_location_v = reactive([]);
+    const default_location_h = reactive([]);
     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 },
@@ -246,8 +179,6 @@ export default defineComponent({
       { x: 0, y: 0 },
       { x: 0, y: 0 },
     ]);
-     const max_x_y=reactive([0,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(() => {
@@ -263,34 +194,38 @@ export default defineComponent({
     });
     const set_cache: any = ref([]);
     const ste_status = ref(0);
-    //为了加载 缓存的配置时 同步点的位置
+
-    const syncpoint = () => {
+    const chang = (index: number, $event: any) => {
       let x = 0
       let y = 0
-      for (let index = 0; index < 5; index++) {
+      if (index < 5) {
-        x = default_location[index].x;
+        x = default_location[9].y;
-        y = Math.ceil((config.height - value[index].y) / Proportion.value.y);
+        y = Math.ceil((config.height - $event) / Proportion.value.y);
-        setdianposin(index, x, y);
+        send_configuration(index, $event)
+      } else {
+        x = Math.ceil($event / Proportion.value.x);
+        y = default_location[0].x;
+        send_configuration(index, $event)
+      }
+      point_postion[index].x = Number(x)
+      point_postion[index].y = Number(y)
+      now_index.value = index
     }
 
-      for (let index = 5; index < 10; index++) {
+    const asyncpoint = (index: number, $event: any) => {
-        x = Math.ceil(value[index].x / Proportion.value.x);
+      let x = 0
-        y = default_location[5].y;
+      let y = 0
-        setdianposin(index, x, y);
+      if (index < 5) {
+        x = default_location[9].y;
+        y = Math.ceil((config.height - $event) / Proportion.value.y);
+      } else {
+        x = Math.ceil($event / Proportion.value.x);
+        y = default_location[0].x;
+      }
+      point_postion[index].x = Number(x)
+      point_postion[index].y = Number(y)
     }
 
-      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") {
@@ -331,19 +266,19 @@ export default defineComponent({
         setTimeout(() => {
           ste_status.value = 0;
         }, 100);
-        syncpoint();
       },
       { 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].number = config.ver_density[index].control_point;
         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;
+        value[index + 5].number = config.hor_density[index].control_point;
       }
       if (
         sessionStorage.DensityCorrection &&
@@ -353,12 +288,20 @@ export default defineComponent({
         use_set_cache();
       } else {
       }
-      syncpoint();
       setTimeout(() => {
         ste_status.value = 0;
       }, 100);
     };
 
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value] != null) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        deepcopy(value, tmp);
+      }
+      for (let index = 0; index < 10; index++) {
+        asyncpoint(index, index < 5 ? value[index].y : value[index].x)
+      }
+    };
     const resetall = () => {
       for (
         let index = 0;
@@ -392,10 +335,7 @@ export default defineComponent({
 
       point_postion[index].y = default_location[index].y;
       point_postion[index].x = default_location[index].x;
-      isshowarray.value[index] = false;
+      save_set_cache()
-      setTimeout(() => {
-        isshowarray.value[index] = true;
-      }, 100);
     };
     const point_postion: any = reactive([
       { x: 0, y: 0 },
@@ -419,46 +359,6 @@ export default defineComponent({
       }, 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();
-    };
 
     const use_server_config = () => {
       for (let index = 0; index < config.hor_density.length; index++) {
@@ -469,29 +369,29 @@ export default defineComponent({
         value[index + 5].y = config.hor_density[index].y;
         value[index + 5].number = config.hor_density[index].number;
       }
+      for (let index = 0; index < 10; index++) {
+        asyncpoint(index, index < 5 ? value[index].y : value[index].x)
+
+      }
     };
 
 
     onMounted(() => {
       initialization();
-      max_x_y[0]=div.value.offsetWidth-25
+      Proportion.value.x = config.width / (div.value.offsetWidth - 20);
-      max_x_y[1]=div.value.offsetHeight-15
+      Proportion.value.y = config.height / (div.value.offsetHeight - 20);
-      Proportion.value.x = config.width / (div.value.offsetWidth - 40);
+      let Width = (div.value.offsetWidth - 20) / 4;
-      Proportion.value.y = config.height / (div.value.offsetHeight - 30);
+      let Height = (div.value.offsetHeight - 20) / 4;
-      let Width = (div.value.offsetWidth - 40) / 4;
+
-      let Height = (div.value.offsetHeight - 30) / 4;
+      max_x_y[0] = div.value.offsetWidth - 20
-      for (
+      max_x_y[1] = div.value.offsetHeight - 20
-        let index = 0;
+      for (let index = 0; index < 10; index++) {
-        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;
+          point_postion[index].x = default_location[index].x = 0;
         } else {
-          point_postion[index].y = default_location[index].y = Height * 2;
+          point_postion[index].y = default_location[index].y = 0;
-          point_postion[index].x = default_location[index].x =
+          point_postion[index].x = default_location[index].x = Width * (index - 5);
-            Width * (index - 5);
         }
       }
       use_server_config();
@@ -503,7 +403,9 @@ export default defineComponent({
         use_set_cache();
       } else {
       }
-      syncpoint();
+
+
+
     });
 
     //窗口变动重新渲染
@@ -512,229 +414,106 @@ export default defineComponent({
         return (() => {
           if (div != null) {
             initialization();
-            Proportion.value.x = config.width / (div.value.offsetWidth - 40);
+            Proportion.value.x = config.width / (div.value.offsetWidth - 20);
             Proportion.value.y = config.height / (div.value.offsetHeight - 30);
-            let Width = (div.value.offsetWidth - 40) / 4;
+            let Width = (div.value.offsetWidth - 20) / 4;
-            let Height = (div.value.offsetHeight - 30) / 4;
+            let Height = (div.value.offsetHeight - 20) / 4;
-            for (
+
-              let index = 0;
+            max_x_y[0] = div.value.offsetWidth - 20
-              index < config.hor_density.length + config.ver_density.length;
+            max_x_y[1] = div.value.offsetHeight - 20
-              index++
+            for (let index = 0; index < 10; index++) {
-            ) {
               if (index < 5) {
-                point_postion[index].y = default_location[index].y =
+                point_postion[index].y = default_location[index].y = Height * index;
-                  Height * index;
+                point_postion[index].x = default_location[index].x = 0;
-                point_postion[index].x = default_location[index].x = Width * 2;
               } else {
-                point_postion[index].y = default_location[index].y = Height * 2;
+                point_postion[index].y = default_location[index].y = 0;
-                point_postion[index].x = default_location[index].x =
+                point_postion[index].x = default_location[index].x = Width * (index - 5);
-                  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);
-      if(ste_status.value == 0)now_index.value=index
-    };
-    watch(
-      () => value[0],
-      (newVal, oldVal) => {
-        send_configuration(1, 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);
-        }
-        now_index.value=0
-        save_set_cache();
-      },
-      { deep: true }
-    );
-
-    watch(
-      () => value[1],
-      (newVal, oldVal) => {
-        send_configuration(2, 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) => {
-        send_configuration(3, 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(4, 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(5, 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(6, 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(7, 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(8, 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(9, 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) => {
-        send_configuration(10, 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) {
         if (index <= 5) {
           set?.SetBlendingVerDensity(
             $store.getters.GetTheCurrentlySelectedCamera[0],
             $store.getters.GetTheCurrentlySelectedCamera[1],
-            index,
+            index + 1,
             Number(value)
           );
         } else {
           set?.SetBlendingHorDensity(
             $store.getters.GetTheCurrentlySelectedCamera[0],
             $store.getters.GetTheCurrentlySelectedCamera[1],
-            index - 5,
+            index - 4,
             Number(value)
           );
         }
       }
       save_set_cache();
     };
-    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}`)
-      // }
-      now_index.value=index
-    };
     initialization();
+    const dragStartHandle = ($event: any, index: number, type: string) => {
+      let obj_x = $event.x
+      let obj_y = $event.y
+      if (type == 'h') {
+        let x =
+          config.width / 4 * (index - 5) +
+          Math.ceil(
+            (obj_x - default_location[index].x) * Proportion.value.x
+          );
+        let y =
+          config.height -
+          (config.height / 4) * index -
+          Math.ceil(
+            (obj_y - default_location[index].y) * Proportion.value.y
+          );
+        value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+        send_configuration(index, x)
+      }
+      if (type == 'v') {
+        let x = Math.ceil(obj_x * Proportion.value.x);
+        let y =
+          config.height -
+          (config.height / 4) * index -
+          Math.ceil(
+            (obj_y - default_location[index].y) * Proportion.value.y
+          );
+        value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
+        send_configuration(index, y)
+      }
+    }
+    const options_v: any = reactive([]);
+    const options_h: any = reactive([]);
+    const options_model_v = ref(0)
+    const options_model_h = ref(5)
+    for (let index = 0; index < 5; index++) {
+      options_v.push({ "label": `v${index + 1}`, value: index })
+      options_h.push({ "label": `h${index + 1}`, value: index + 5 })
+    }
     return {
+      options_model_v,
+      options_model_h,
+      options_v,
+      options_h,
+      config,
+      now_adjust,
+      set_cache,
+      chang,
+      max_x_y,
+      dragStartHandle,
       now_index,
-      activeMouseDown,
       model,
-      options,
       value,
       reset,
       resetall,
       point_postion,
-      moveHandler,
       div,
-      isshowarray,
-      isactivearray,
       save,
     };
   },

src/components/FusionSettings/GridSettings.vue

@@ -166,10 +166,10 @@ export default defineComponent({
     }
     const use_server_config = () => {
       let server_conf = JSON.parse($store.state.fusion_configuration).options
-      model[0] = server_conf.blending_grids_row!=null ? Number(server_conf.blending_grids_row) : 20;
+      model[0] = server_conf.blending_grids_row ?? 20;
-      model[1] = server_conf.blending_grids_column!=null ? Number(server_conf.blending_grids_column) : 40;
+      model[1] = server_conf.blending_grids_column ?? 40;
-      color[0] = server_conf.blending_grids_line_color
+      color[0] = server_conf.blending_grids_line_color ?? "#ffffff"
-      color[1] = server_conf.blending_grids_background_color
+      color[1] = server_conf.blending_grids_background_color ?? "#00ff5e"
       RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
       RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
 

src/components/FusionSettingsDialog.vue

@@ -234,6 +234,25 @@ export default defineComponent({
       set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
     };
     const send_show_blending_grids = () => {
+      let tmp = ""
+        switch (optionsstr.value) {
+          case 'FusionLocale':
+            tmp = '0'
+            break;
+          case 'FourPointCalibration':
+            tmp = '4'
+            break;
+          case 'SurfaceCorrection':
+            tmp = '9'
+            break;
+          case 'DensityCorrection':
+            tmp = 'density'
+            break;
+          default:
+            break;
+        }
+      set?.SetBlendingOption("blending_grids_select_ui", tmp)
+      set?.SetBlendingOption('blending_grids_select_projector', now_selsect_projector.value);
       set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
     };
     const resetall = () => {
@@ -310,6 +329,9 @@ export default defineComponent({
         set?.SetBlendingOption("blending_grids_select_ui", tmp)
       },
       { deep: true })
+
+
+
     const save = () => {
       medium.value = true
       //读取场景
@@ -431,8 +453,10 @@ export default defineComponent({
       set?.DeleteBlendingScene(name_to_be_deleted.value);
       plan_list.splice(plan_list.findIndex(item => item === name_to_be_deleted.value), 1)
     }
+    const now_selsect_projector=ref("0-0")
     const currently_selected_projector = (value: string) => {
       set?.SetBlendingOption('blending_grids_select_projector', value);
+      now_selsect_projector.value=value
     }
     return {
       currently_selected_projector,

src/i18n/en-US/index.ts

@@ -447,5 +447,7 @@ export default {
   "show_mask":"hide desktop",
   "save_bmp":"save bmp",
   "disable_blending_params":"disable blending params",
-  "Please enter a value within the range":"Please enter a value within the range"
+  "Please enter a value within the range":"Please enter a value within the range",
+  "vertical correction":"vertical correction",
+  "horizontal correction":"horizontal correction"
 };

src/i18n/zh-CN/index.ts

@@ -716,5 +716,7 @@ export default {
   "show_mask":"隐藏桌面",
   "save_bmp":"保存BMP",
   "disable_blending_params":"禁用融合参数",
-  "Please enter a value within the range":"请输入范围内的值"
+  "Please enter a value within the range":"请输入范围内的值",
+  "vertical correction":"垂直校正",
+  "horizontal correction":"水平校正"
 };