From dbecb1ff1572ae9cbe1c3e33eae1e6cbcde35cee Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Wed, 15 Feb 2023 09:34:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8A=A8=E6=80=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/DensityCorrection.vue      | 1165 +++++++++++------
 .../FusionSettings/FourPointCalibration.vue   |  780 ++++-------
 .../FusionSettings/SurfaceCorrection.vue      | 1122 ++++++----------
 src/components/FusionSettingsDialog.vue       |    2 +-
 src/entities/DensityCorrection.ts             |    7 +
 src/entities/DensityCorrectionPoint.ts        |    7 +
 src/i18n/en-US/index.ts                       |   10 +-
 src/i18n/zh-CN/index.ts                       |   10 +-
 8 files changed, 1459 insertions(+), 1644 deletions(-)
 create mode 100644 src/entities/DensityCorrection.ts
 create mode 100644 src/entities/DensityCorrectionPoint.ts

diff --git a/src/components/FusionSettings/DensityCorrection.vue b/src/components/FusionSettings/DensityCorrection.vue
index f040a7a..f61e155 100644
--- a/src/components/FusionSettings/DensityCorrection.vue
+++ b/src/components/FusionSettings/DensityCorrection.vue
@@ -1,33 +1,39 @@
 <template>
   <div class="row">
     <div class="col-1"></div>
-    <div class="col-8 q-pt-md">
-      <div ref="div" style="width: 100%; background-color: #646464; height: 100%">
+    <div class="col-10 q-pt-md">
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
         <div style="position: absolute">
-          <Vue3DraggableResizable  :class="[options_model_v==index?'action':'point']" v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
-            :resizable="false" :x="0" v-model:y="point_postion[index].y" :disabledX="true"
-            @activated="now_index =options_model_v= index" @click="options_model_v = index" @dragging="dragStartHandle($event, index, 'v')">
+          <Vue3DraggableResizable v-show="now_v_h == 'vertical'"
+            :class="[options_model_v == index ? 'action' : 'point']" v-for="(item, index) in value_v_point.length"
+            :initW="point.w" :initH="point.h" :resizable="false" :x="0" v-model:y="value_v_point[index].y"
+            @activated="options_model_v = index; now_v_h = 'vertical'"
+            @click="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')">
             <span>v{{
               index+ 1
             }}</span>
           </Vue3DraggableResizable>
-          <Vue3DraggableResizable :class="[options_model_v==index?'action':'point']" v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
-            :resizable="false" :x="max_x_y[0]"  @click="options_model_v = index"   v-model:y="point_postion[index].y" @activated="now_index =options_model_v= index"
-            @dragging="dragStartHandle($event, index, 'v')">
+          <Vue3DraggableResizable v-show="now_v_h == 'vertical'"
+            :class="[options_model_v == index ? 'action' : 'point']" v-for="(item, index) in value_v_point.length"
+            :initW="point.w" :initH="point.h" :resizable="false" :x="max.x - 20"
+            @click="options_model_v = index; now_v_h = 'vertical'" v-model:y="value_v_point[index].y"
+            @activated="options_model_v = index; now_v_h = 'vertical'" @dragging="dragStartHandle($event, index, 'v')">
             <span>v{{
               index+ 1
             }}</span>
           </Vue3DraggableResizable>
-          <Vue3DraggableResizable :class="[options_model_h==index+5?'action':'point']" v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
-            :resizable="false" v-model:x="point_postion[index + 5].x" :y="-20" @activated="now_index =options_model_h = index + 5"
-            :disabledY="true"  @click="options_model_h = index+5 "   @dragging="dragStartHandle($event, index, 'h')">
+          <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
+            v-for="(item, index) in value_h_point.length" :initW="point.w" :initH="point.h" :resizable="false"
+            v-model:x="value_h_point[index].x" :y="0" @activated="options_model_h = index; now_v_h = 'level'"
+            @click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')">
             <span>h{{
               index+ 1
             }}</span>
           </Vue3DraggableResizable>
-          <Vue3DraggableResizable :class="[options_model_h==index+5?'action':'point']" v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
-            :resizable="false" v-model:x="point_postion[index + 5].x" @activated="now_index =options_model_h= index + 5"
-            :y="max_x_y[1] + 20" @click="options_model_h = index+5"  @dragging="dragStartHandle($event, index, 'h')">
+          <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
+            v-for="(item, index) in value_h_point.length" :initW="point.w" :initH="point.h" :resizable="false"
+            v-model:x="value_h_point[index].x" @activated="options_model_h = index; now_v_h = 'level'" :y="max.y - 20"
+            @click="options_model_h = index; now_v_h = 'level'" @dragging="dragStartHandle($event, index, 'h')">
             <span>h{{
               index+ 1
             }}</span>
@@ -35,163 +41,141 @@
         </div>
       </div>
     </div>
-    <div class="col-3 q-pt-md">
-      <div class="row">
-        <div class="col-12" v-for="(item, index) in 5">
-          <div class="row">
-            <div class="col-2"></div>
-            <div class="col-8">
-              <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[index].y"
-                @update:model-value="chang(index, $event,'v')" label="y" lazy-rules />
-              <q-btn size="sm" color="white" @click="reset(index,true)" text-color="black"
-                :label="$t('reset') + `v${index + 1}`" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-1"></div>
-    <div class="col-11">
-      <div class="box">
-        <div class="box_son" v-for="(item, index) in 5">
-          <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[index + 5].x" label="x"
-            @update:model-value="chang(index + 5, $event,'h')" lazy-rules />
-          <q-btn size="sm" color="white" @click="reset(index + 5,true)" text-color="black"
-            :label="$t('reset') + `h${index + 1}`" />
-        </div>
-        <div class="box_son q-pt-xl">
-          <q-btn 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" :label="$t('level')" @update:model-value="(val)=>{now_index=val}" :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,'v')" lazy-rules />
-        </div>
-        <div class="q-pt-md">
-          <q-btn color="white" @click="reset(options_model_v,true)" text-color="black" :label="$t('reset')" />
-        </div>
+    <div class="row">
+      <div class="col-1"></div>
+      <div class="col-5">
+        <q-radio v-model="now_v_h" val="level" :label="$t('level')" />
       </div>
-      <div class="row">
-        <div class="col-1"></div>
-        <div class="col-2"> <q-select class="q-pt-md"  :label="$t('vertical')" :dense="true" filled v-model="options_model_h" @update:model-value="(val)=>{now_index=val}" :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, $event,'h')" lazy-rules />
-        </div>
-        <div class="q-pt-md">
-          <q-btn  color="white" @click="reset(options_model_h,true)" text-color="black" :label="$t('reset')" />
-        </div>
-      </div>
-
+      <div class="col-5"><q-radio v-model="now_v_h" val="vertical" :label="$t('vertical')" /></div>
     </div>
+    <div class="row" v-show="now_v_h == 'vertical'">
+      <div class="col-1"></div>
+      <div class="col-2"> <q-select class="q-pt-md" :label="$t('vertical')"
+          @update:model-value="(val) => { options_v = val }" :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_v[options_model_v].y" @update:model-value="chang(options_model_v, $event, 'v')" lazy-rules />
+      </div>
+      <div class="q-pt-md col-2">
+        <q-btn color="white" @click="reset(options_model_v, true, 'v')" text-color="black" :label="$t('reset')" />
+      </div>
+      <div class="col-2"> <q-select class="q-pt-md" :label="$t('vertical point')"
+          @update:model-value="(val) => { chang_point_amount(val, 'v') }" :dense="true" filled
+          v-model="value_v_point_amount" :options="options_value_v_point_amount" emit-value map-options /></div>
+      <div class="col-1 q-pt-md "><q-btn color="white"
+          @click="add_dialog=true" text-color="black"
+          :label="$t('add control points')" /></div>
+      <div class="col-1 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }" text-color="black"
+          :label="$t('reduce control points')" /></div>
+    </div>
+    <div class="row" v-show="now_v_h == 'level'">
+      <div class="col-1"></div>
+      <div class="col-2"> <q-select class="q-pt-md" :label="$t('level')"
+          @update:model-value="(val) => { options_h = val }" :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_h[options_model_h].x" @update:model-value="chang(options_model_h, $event, 'h')" lazy-rules />
+      </div>
+      <div class="q-pt-md col-2">
+        <q-btn color="white" @click="reset(options_model_h, true, 'h')" text-color="black" :label="$t('reset')" />
+      </div>
+      <div class="col-2"> <q-select class="q-pt-md" :label="$t('level point')"
+          @update:model-value="(val) => { chang_point_amount(val, 'h') }" :dense="true" filled
+          v-model="value_h_point_amount" :options="options_value_h_point_amount" emit-value map-options /></div>
+      <div class="col-1 q-pt-md "><q-btn color="white"
+          @click="add_dialog=true" text-color="black"
+          :label="$t('add control points')" /></div>
+      <div class="col-1 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }" text-color="black"
+          :label="$t('reduce control points')" /></div>
+    </div>
+    <div class="q-pt-md"> <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
+  </div>
+  <div style="position: absolute;bottom: 0;">
+    <q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }"
+      :label="$t('auxiliary lines')" />
+  </div>
+
+
+  <q-dialog v-model="del_dialog">
+    <q-card style="width: 700px; max-width: 80vw;">
+      <q-card-section>
+        <div class="text-h6">{{ $t('confirm delete') }}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        {{ $t('OK to delete you will lose the data you adjusted now') }}
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+        <q-btn flat :label="$t('ok')" @click="del" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="add_dialog">
+    <q-card style="width: 700px; max-width: 80vw;">
+      <q-card-section>
+        <div class="text-h6">{{ $t('Whether to add control points') }}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input filled v-model="now_amount" type="number" :label="$t('Please enter the points you need to add')" />
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+        <q-btn flat :label="$t('ok')" @click="add" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
 </template>
 
 <style scoped>
-.box {
-  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: rgb(27, 180, 111);
   border-radius: 50%;
 }
-.point{
+
+.point {
   background-color: rgb(186, 245, 245);
   border-radius: 50%;
 }
 </style>
+
 <script lang="ts">
 import {
   defineComponent,
-  ref,
-  watch,
-  computed,
-  defineProps,
-  withDefaults,
-  reactive,
   onMounted,
-  onBeforeUnmount,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  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";
 import Vue3DraggableResizable from 'vue3-draggable-resizable'
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
-import { type } from "os";
-import { number } from "@intlify/core-base";
+
+
+import DensityCorrection from "src/entities/DensityCorrection";
+import DensityCorrectionPoint from "src/entities/DensityCorrectionPoint";
+import { config } from "process";
+import { QSelect, QInput, QBtn } from "quasar";
+import { div } from "zrender/lib/core/vector";
+import GlobalData from "src/common/GlobalData";
+
 export default defineComponent({
   name: "ComponentDensityCorrection",
   components: {
-    vue3ResizeDrag,
     Vue3DraggableResizable
   },
   setup() {
+    let set = GlobalData.getInstance().getCurrentClient();
     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 },
-      { 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 },
-    ]);
-    //为动态添加做准备
-    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 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 },
-    ]);
+    const ste_status = ref(0);
     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;
     });
@@ -204,42 +188,14 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
-    const set_cache: any = ref([]);
-    const ste_status = ref(0);
-
-    const chang = (index: number, $event: any,type:string) => {
-      let x = 0
-      let y = 0
-      if (type=='v') {
-        x = default_location[9].y;
-        y = Math.ceil((config.height - $event) / Proportion.value.y);
-        send_configuration(index, $event,'v')
-        options_model_v.value=index
-      } else {
-        x = Math.ceil($event / Proportion.value.x);
-        y = default_location[0].x;
-        send_configuration(index, $event,'h')
-        options_model_h.value=index
-      }
-      point_postion[index].x = Number(x)
-      point_postion[index].y = Number(y)
-      now_index.value = index
-    }
-
-    const asyncpoint = (index: number, $event: any) => {
-      let x = 0
-      let y = 0
-      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)
-    }
+    const now_v_h = ref("")
+    const value_h_point_amount = ref(5)
+    const value_v_point_amount = ref(5)
+    const add_dialog=ref(false)
+    const now_amount=ref(0)
 
+    const options_value_h_point_amount = ref(<string[]>[])
+    const options_value_v_point_amount = ref(<string[]>[])
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -250,15 +206,78 @@ export default defineComponent({
         }
       }
     };
+
+    const use_server_config = () => {
+      let a = 5
+      value_h.value = []
+      value_h_point.value = []
+      for (let index = 0; index < config.multi_hor_density[a].length; index++) {
+        let tmp: DensityCorrectionPoint = config.multi_hor_density[a][index];
+        value_h.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+
+        value_h_point.value.push(tmp_point)
+      }
+
+
+      value_v.value = []
+      value_v_point.value = []
+      for (let index = 0; index < config.multi_ver_density[a].length; index++) {
+        let tmp: DensityCorrectionPoint = config.multi_ver_density[a][index];
+        value_v.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_v_point.value.push(tmp_point)
+      }
+
+    }
+
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value] != null) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        value_h.value = []
+        value_v.value = []
+        value_h_point.value = []
+        value_v_point.value = []
+        deepcopy(value_h.value, tmp.value_h)
+        deepcopy(value_v.value, tmp.value_v)
+        value_h_point_amount.value = Number(tmp.value_h_point_amount)
+        value_v_point_amount.value = Number(tmp.value_v_point_amount)
+        deepcopy(value_h_point.value, tmp.value_h_point)
+        deepcopy(value_v_point.value, tmp.value_v_point)
+        recalculate_coordinates()
+      }
+    }
+
+
     const save_set_cache = () => {
-      set_cache.value[selectedprojector.value] = JSON.stringify(value);
-    };
-    onBeforeUnmount(() => {
-      sessionStorage.DensityCorrection = JSON.stringify(set_cache.value);
-    });
-    watch(() => now_index, (newval, oldval) => {
-      now_index.value > 4 ? 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 })
+      let tmp = { value_h: value_h.value, value_v: value_v.value, value_v_point_amount: value_v_point_amount.value, value_h_point_amount: value_h_point_amount.value, value_v_point: value_v_point.value, value_h_point: value_h_point.value }
+      set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
+    }
+
+
+
+
+    const auxiliary_line = ref(false)
+
+
+
+
     watch(
       () => configselsect,
       (newVal, oldVal) => {
@@ -277,6 +296,8 @@ export default defineComponent({
         config = JSON.parse(JSON.stringify(fortmp));
         use_server_config();
         use_set_cache();
+        options_value_h_point_amount.value = Object.keys(config.multi_hor_density)
+      options_value_v_point_amount.value = Object.keys(config.multi_ver_density)
         setTimeout(() => {
           ste_status.value = 0;
         }, 100);
@@ -284,272 +305,564 @@ export default defineComponent({
       { 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].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].control_point;
-      }
-      if (
-        sessionStorage.DensityCorrection &&
-        sessionStorage.DensityCorrection.length > 0
-      ) {
-        set_cache.value = JSON.parse(sessionStorage.DensityCorrection);
-        use_set_cache();
+
+
+    const set_cache: any = ref([]);
+    //值
+    let value_h = ref(<DensityCorrection[]>[]);
+    let value_v = ref(<DensityCorrection[]>[]);
+    //位置
+    let value_h_point = ref(<DensityCorrectionPoint[]>[]);
+    let value_v_point = ref(<DensityCorrectionPoint[]>[]);
+    /**
+     * 当前选中的点的索引
+     */
+    const options_model_v = ref(0)
+    const options_model_h = ref(0)
+
+    const div = ref();
+    const max = ref({ x: 0, y: 0 })
+    const point = ref({ w: 20, h: 20 })
+
+
+    watch(() => now_v_h, (newval, oldval) => {
+      if (newval.value == 'level') {
+        set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
       } else {
+        set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
       }
-      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;
-        index < config.hor_density.length + config.ver_density.length;
-        index++
-      ) {
-        reset(index, false);
-      }
-	  set?.SetBlendingVerDensity(
-          $store.getters.GetTheCurrentlySelectedCamera[0],
-          $store.getters.GetTheCurrentlySelectedCamera[1],
-		  5,
-          -1, 0
-        );
-    };
-    const reset = (index: number, send: boolean) => {
-	  send = send?? true;
-      if (index > 4) {
-        value[index].x = config.hor_density[index - 5].def_x;
-        value[index].y = config.hor_density[index - 5].def_y;
-
-        if (send)
-		{
-		  set?.SetBlendingHorDensity(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-			5,
-            index - 5 + 1,
-            Number(value[index].x)
-          );
-		}
+    }, { deep: true })
+    watch(() => value_v_point_amount, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+      if (now_v_h.value == 'level') {
+        set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
       } else {
-        value[index].x = config.ver_density[index].def_x;
-        value[index].y = config.ver_density[index].def_y;
-		if (send)
-		{
-          set?.SetBlendingVerDensity(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-			5,
-            index + 1,
-            Number(value[index].y)
-          );
-		}
+        set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
       }
-
-      point_postion[index].y = default_location[index].y;
-      point_postion[index].x = default_location[index].x;
-      save_set_cache()
-    };
-    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 use_server_config = () => {
-      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;
-      }
-      for (let index = 0; index < 10; index++) {
-        asyncpoint(index, index < 5 ? value[index].y : value[index].x)
-
-      }
-    };
-
-
-    onMounted(() => {
-      initialization();
-      Proportion.value.x = config.width / (div.value.offsetWidth - 20);
-      Proportion.value.y = config.height / (div.value.offsetHeight - 20);
-      let Width = (div.value.offsetWidth - 20) / 4;
-      let Height = (div.value.offsetHeight - 20) / 4;
-
-      max_x_y[0] = div.value.offsetWidth - 20
-      max_x_y[1] = div.value.offsetHeight - 20
-      for (let index = 0; index < 10; index++) {
-        if (index < 5) {
-          point_postion[index].y = default_location[index].y = Height * index;
-          point_postion[index].x = default_location[index].x = 0;
-        } else {
-          point_postion[index].y = default_location[index].y = 0;
-          point_postion[index].x = default_location[index].x = Width * (index - 5);
-        }
-      }
-      use_server_config();
-      if (
-        sessionStorage.DensityCorrection &&
-        sessionStorage.DensityCorrection.length > 0
-      ) {
-        set_cache.value = JSON.parse(sessionStorage.DensityCorrection);
-        use_set_cache();
+    }, { deep: true })
+    watch(() => value_h_point_amount, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+      if (now_v_h.value == 'level') {
+        set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
       } else {
+        set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
       }
+    }, { deep: true })
+
+    watch(() => options_model_h, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_select_point", `${value_h_point.value[newval.value].control_point}`)
+    }, { deep: true })
+    watch(() => options_model_v, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_select_point", `${value_v_point.value[newval.value].control_point}`)
+    }, { deep: true })
+
+    /**
+     * 分辨率和页面的比例
+     */
+    let Proportion = ref({ x: 100, y: 1000 });
+    nextTick(() => {
+      max.value.x = div.value.offsetWidth
+      max.value.y = div.value.offsetHeight
+    })
 
 
+    const chang_point_amount = (val: number, type: string) => {
+      start_point(val, type)
+    }
 
-    });
-
-    //窗口变动重新渲染
-    onMounted(() => {
-      window.onresize = () => {
-        return (() => {
-          if (div != null) {
-            initialization();
-            Proportion.value.x = config.width / (div.value.offsetWidth - 20);
-            Proportion.value.y = config.height / (div.value.offsetHeight - 30);
-            let Width = (div.value.offsetWidth - 20) / 4;
-            let Height = (div.value.offsetHeight - 20) / 4;
-
-            max_x_y[0] = div.value.offsetWidth - 20
-            max_x_y[1] = div.value.offsetHeight - 20
-            for (let index = 0; index < 10; index++) {
-              if (index < 5) {
-                point_postion[index].y = default_location[index].y = Height * index;
-                point_postion[index].x = default_location[index].x = 0;
-              } else {
-                point_postion[index].y = default_location[index].y = 0;
-                point_postion[index].x = default_location[index].x = Width * (index - 5);
-              }
-            }
-          }
-        })();
-      };
-    });
-    const send_configuration = (
-      index: number,
-      value: number,
-      type:string,
-    ) => {
-      if (ste_status.value == 0) {
-        if (type=='v') {
-          set?.SetBlendingVerDensity(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-			5,
-            index+1,
-            Number(value)
-          );
-        }
-        if (type=='h') {
-          set?.SetBlendingHorDensity(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-			5,
-            index>4?index-4:index+1,
-            Number(value)
-          );
-        }
-      }
-      save_set_cache();
-    };
-    initialization();
     const dragStartHandle = ($event: any, index: number, type: string) => {
       let obj_x = $event.x
       let obj_y = $event.y
-      if (type == 'h') {
-        let x =
-
-          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+5].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
-        send_configuration(index, x,'h')
-      }
+      let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
       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,'v')
+        value_v.value[index].y = Math.trunc(tmp.y)
+        send_value(index, type, Math.trunc(tmp.y))
+      }
+      if (type == 'h') {
+        value_h.value[index].x = Math.trunc(tmp.x)
+        send_value(index, type, Math.trunc(tmp.x))
+      }
+      save_set_cache()
+    }
+
+    const chang = (index: number, $event: any, type: string) => {
+      $event = Number($event)
+      if (type == 'v') {
+        let tmp = coordinate_transformation_value_to_xy(0, $event)
+        value_v_point.value[index].y = Math.trunc(tmp.y)
+        send_value(index, type, Math.trunc(value_v.value[index].y))
+      }
+      if (type == 'h') {
+        let tmp = coordinate_transformation_value_to_xy($event, 0)
+        value_h_point.value[index].x = Math.trunc(tmp.x)
+        send_value(index, type, Math.trunc(value_h.value[index].x))
+      }
+      save_set_cache()
+    }
+    const options_v = computed(() => {
+      let tmp = []
+      for (let index = 0; index < Number(value_v_point_amount.value); index++) {
+        tmp.push({
+          label: `v${index + 1}`,
+          value: index,
+        })
+      }
+      return tmp
+    })
+    const options_h = computed(() => {
+      let tmp = []
+      for (let index = 0; index < Number(value_h_point_amount.value); index++) {
+        tmp.push({
+          label: `h${index + 1}`,
+          value: index,
+        })
+      }
+      return tmp
+    })
+
+    /**
+     * 将分辨率的坐标转换为 页面的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_value_to_xy = (x: number, y: number): { x: number, y: number } => {
+      x = x / Proportion.value.x
+      y = (config.height - y) / Proportion.value.y
+      return { x, y }
+    }
+
+
+    /**
+     * 将页面的坐标转换为 分辨率的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_xy_to_value = (x: number, y: number): { x: number, y: number } => {
+      x = x * Proportion.value.x
+      y = (max.value.y - y) * Proportion.value.y
+      return { x, y }
+    }
+
+    const start_point = (a: number, type: string) => {
+      if (type == 'h' || type == 'all') {
+        value_h.value = []
+        value_h_point.value = []
+        for (let index = 0; index < config.multi_hor_density[a].length; index++) {
+          let tmp: DensityCorrectionPoint = config.multi_hor_density[a][index];
+          value_h.value.push(tmp)
+          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+          let tmp_point: DensityCorrectionPoint = {
+            control_point: tmp.control_point,
+            x: x_y.x,
+            y: x_y.y,
+            def_x: def_x_f.x,
+            def_y: def_x_f.y
+          }
+          value_h_point.value.push(tmp_point)
+        }
+      }
+      if (type == 'v' || type == 'all') {
+        value_v.value = []
+        value_v_point.value = []
+        for (let index = 0; index < config.multi_ver_density[a].length; index++) {
+          let tmp: DensityCorrectionPoint = config.multi_ver_density[a][index];
+          value_v.value.push(tmp)
+          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+          let tmp_point: DensityCorrectionPoint = {
+            control_point: tmp.control_point,
+            x: x_y.x,
+            y: x_y.y,
+            def_x: def_x_f.x,
+            def_y: def_x_f.y
+          }
+          value_v_point.value.push(tmp_point)
+        }
+      }
+
+    }
+
+
+    const start = () => {
+      let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
+      value_v.value.push(tmp)
+      value_h.value.push(tmp)
+      value_v_point.value.push(tmp)
+      value_h_point.value.push(tmp)
+    }
+    start()
+    onMounted(() => {
+      Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+      Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+      options_value_h_point_amount.value = Object.keys(config.multi_hor_density)
+      options_value_v_point_amount.value = Object.keys(config.multi_ver_density)
+      let tmp = JSON.parse($store.state.fusion_configuration).options;
+      auxiliary_line.value = tmp.blending_grids_density_assistant_lines == "1"
+      now_v_h.value = "level"
+      start_point(5, 'all')
+      if (
+        sessionStorage.DensityCorrection &&
+        sessionStorage.DensityCorrection.length > 0
+      ) {
+        set_cache.value = JSON.parse(sessionStorage.DensityCorrection);
+        use_set_cache();
+      }
+      window.onresize = () => {
+        return (() => {
+          if (div != null) {
+            recalculate_coordinates()
+          }
+        })();
+      };
+    })
+
+    onBeforeUnmount(() => {
+      sessionStorage.DensityCorrection = JSON.stringify(set_cache.value);
+    });
+
+    const reset = (index: number, send: boolean, type: string) => {
+      if (type == 'v') {
+        value_v.value[index].x = value_v.value[index].def_x
+        value_v.value[index].y = value_v.value[index].def_y
+        chang(index, value_v.value[index].def_y, type)
+      }
+      if (type == 'h') {
+        value_h.value[index].x = value_h.value[index].def_x
+        value_h.value[index].y = value_h.value[index].def_y
+        chang(index, value_h.value[index].def_x, type)
+      }
+      save_set_cache()
+    }
+    const send_value = (index: number, type: string, value: number) => {
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      if (type == 'v') {
+        set?.SetBlendingVerDensity(row, col, Number(value_v_point_amount.value), index + 1, Number(value));
+      }
+      if (type == 'h') {
+        set?.SetBlendingHorDensity(row, col, Number(value_h_point_amount.value), index + 1, Number(value));
       }
     }
-    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 })
+    const resetall = () => {
+      switch (now_v_h.value) {
+        case 'vertical':
+          for (let index = 0; index < value_v_point_amount.value; index++) {
+            reset(index, true, 'v')
+          }
+          break;
+        case 'level':
+          for (let index = 0; index < value_h_point_amount.value; index++) {
+            reset(index, true, 'h')
+          }
+          break;
+        default:
+          break;
+      }
+
+
+    }
+    const del_dialog = ref(false)
+    const add_control_points = (amount: number, type: string) => {
+      if (amount < 5) return
+      let tmpconfig: any = null
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      switch (type) {
+        case 'v':
+          set?.AddBlendingCtrlPoint('ver_density', row, col, amount).then((res) => {
+            if (res == null || typeof (res) == "undefined") return
+            update(res?.config)
+            let tmp = JSON.parse(res?.config);
+            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;
+            tmpconfig = JSON.parse(JSON.stringify(fortmp));
+            config = JSON.parse(JSON.stringify(fortmp));
+            options_value_v_point_amount.value = []
+            for (let key in tmpconfig.multi_ver_density) {
+              options_value_v_point_amount.value.push(key)
+            }
+
+            // console.log(amount)
+            // console.log(tmpconfig.multi_ver_density)
+            value_v_point_amount.value = amount
+            $store.commit("setfusion_configuration", res?.config);
+            value_v.value = []
+            value_v_point.value = []
+            for (let index = 0; index < tmpconfig.multi_ver_density[amount].length; index++) {
+              let tmp: DensityCorrectionPoint = tmpconfig.multi_ver_density[amount][index];
+              value_v.value.push(tmp)
+              let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+              let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+              let tmp_point: DensityCorrectionPoint = {
+                control_point: tmp.control_point,
+                x: x_y.x,
+                y: x_y.y,
+                def_x: def_x_f.x,
+                def_y: def_x_f.y
+              }
+              value_v_point.value.push(tmp_point)
+            }
+          });
+          break;
+        case 'h':
+          set?.AddBlendingCtrlPoint('hor_density', row, col, amount).then((res) => {
+            if (res == null || typeof (res) == "undefined") return
+            update(res?.config)
+            let tmp = JSON.parse(res?.config);
+            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;
+            tmpconfig = JSON.parse(JSON.stringify(fortmp));
+            config = JSON.parse(JSON.stringify(fortmp));
+            options_value_h_point_amount.value = []
+            for (let key in tmpconfig.multi_hor_density) {
+              options_value_h_point_amount.value.push(key)
+            }
+            value_h_point_amount.value = amount
+            $store.commit("setfusion_configuration", res?.config);
+            value_h.value = []
+            value_h_point.value = []
+            for (let index = 0; index < tmpconfig.multi_hor_density[amount].length; index++) {
+              let tmp: DensityCorrectionPoint = tmpconfig.multi_hor_density[amount][index];
+              value_h.value.push(tmp)
+              let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+              let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+              let tmp_point: DensityCorrectionPoint = {
+                control_point: tmp.control_point,
+                x: x_y.x,
+                y: x_y.y,
+                def_x: def_x_f.x,
+                def_y: def_x_f.y
+              }
+              value_h_point.value.push(tmp_point)
+            }
+          });
+          break;
+        default:
+          break;
+      }
+
+    }
+
+    /**
+     * 更新比例 更新坐标
+     */
+    const recalculate_coordinates = () => {
+      try {
+        Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+        Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+        max.value.x = div.value.offsetWidth
+        max.value.y = div.value.offsetHeight
+        for (let index = 0; index < value_v_point_amount.value; index++) {
+          let x_y = coordinate_transformation_value_to_xy(value_v.value[index].x, value_v.value[index].y)
+          let def_x_f = coordinate_transformation_value_to_xy(value_v.value[index].def_x, value_v.value[index].def_y)
+          value_v_point.value[index].x = x_y.x
+          value_v_point.value[index].y = x_y.y
+          value_v_point.value[index].def_x = def_x_f.x
+          value_v_point.value[index].def_y = def_x_f.y
+        }
+        for (let index = 0; index < value_h_point_amount.value; index++) {
+          let x_y = coordinate_transformation_value_to_xy(value_h.value[index].x, value_h.value[index].y)
+          let def_x_f = coordinate_transformation_value_to_xy(value_h.value[index].def_x, value_h.value[index].def_y)
+          value_h_point.value[index].x = x_y.x
+          value_h_point.value[index].y = x_y.y
+          value_h_point.value[index].def_x = def_x_f.x
+          value_h_point.value[index].def_x = def_x_f.y
+        }
+      } catch (error) {
+
+      }
+    }
+
+
+    const reduce_control_points = (amount: number, type: string) => {
+      if (amount <= 5) return
+      let tmpconfig: any = null
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      switch (type) {
+        case 'v':
+          set?.DelBlendingCtrlPoint('ver_density', row, col, amount).then((res) => {
+            if (res == null || typeof (res) == "undefined") return
+            let tmp = JSON.parse(res?.config);
+            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;
+            options_value_v_point_amount.value = []
+            tmpconfig = JSON.parse(JSON.stringify(fortmp));
+            config = JSON.parse(JSON.stringify(fortmp));
+            for (let key in tmpconfig.multi_ver_density) {
+              options_value_v_point_amount.value.push(key)
+            }
+            value_v_point_amount.value = Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length-1])
+            amount=Number(options_value_v_point_amount.value[options_value_v_point_amount.value.length-1])
+            // console.log(tmpconfig.multi_ver_density)
+            // console.log(value_v_point_amount.value)
+            // console.log(amount,'a')
+            $store.commit("setfusion_configuration", res?.config);
+            value_v.value = []
+            value_v_point.value = []
+
+            for (let index = 0; index < tmpconfig.multi_ver_density[amount].length; index++) {
+              let tmp: DensityCorrectionPoint = config.multi_ver_density[amount][index];
+              value_v.value.push(tmp)
+              let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+              let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+              let tmp_point: DensityCorrectionPoint = {
+                control_point: tmp.control_point,
+                x: x_y.x,
+                y: x_y.y,
+                def_x: def_x_f.x,
+                def_y: def_x_f.y
+              }
+              value_v_point.value.push(tmp_point)
+            }
+            options_model_v.value=0
+          });
+          break;
+        case 'h':
+          set?.DelBlendingCtrlPoint('hor_density', row, col, amount).then((res) => {
+            if (res == null || typeof (res) == "undefined") return
+            let tmp = JSON.parse(res?.config);
+            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;
+            tmpconfig = JSON.parse(JSON.stringify(fortmp));
+            config = JSON.parse(JSON.stringify(fortmp));
+            options_value_h_point_amount.value = []
+            for (let key in tmpconfig.multi_hor_density) {
+              options_value_h_point_amount.value.push(key)
+            }
+            value_h_point_amount.value = Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length-1])
+            amount=Number(options_value_h_point_amount.value[options_value_h_point_amount.value.length-1])
+            //value_h_point_amount.value = amount
+            $store.commit("setfusion_configuration", res?.config);
+            value_h.value = []
+            value_h_point.value = []
+            // console.log(tmpconfig.multi_hor_density)
+
+            for (let index = 0; index < tmpconfig.multi_hor_density[amount].length; index++) {
+              let tmp: DensityCorrectionPoint = tmpconfig.multi_hor_density[amount][index];
+              value_h.value.push(tmp)
+              let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+              let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+              let tmp_point: DensityCorrectionPoint = {
+                control_point: tmp.control_point,
+                x: x_y.x,
+                y: x_y.y,
+                def_x: def_x_f.x,
+                def_y: def_x_f.y
+              }
+              value_h_point.value.push(tmp_point)
+            }
+            options_model_h.value=0
+          });
+          break;
+        default:
+          break;
+      }
+
+    }
+
+    const update = (config: string) => {
+      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_server_config();
+      use_set_cache();
+      setTimeout(() => {
+        ste_status.value = 0;
+      }, 100);
+    }
+    const send_auxiliary_line = (val: boolean) => {
+      set?.SetBlendingOption("blending_grids_density_assistant_lines", val ? "1" : "0");
+    }
+    const del = () => {
+      let tmp = now_v_h.value == "vertical" ? "v" : "h"
+      let amount = now_v_h.value == "vertical" ? value_v_point_amount.value : value_h_point_amount.value
+      reduce_control_points(Number(amount), tmp)
+    }
+    const add = () => {
+      let tmp = now_v_h.value == "vertical" ? "v" : "h"
+      add_control_points(Number(now_amount.value), tmp);
     }
     return {
+      resetall,
+      div,
+      max,
+      point,
       options_model_v,
       options_model_h,
+      value_h,
+      value_v,
+      value_h_point,
+      value_v_point,
+      dragStartHandle,
+      chang,
       options_v,
       options_h,
-      config,
-      now_adjust,
-      set_cache,
-      chang,
-      max_x_y,
-      dragStartHandle,
-      now_index,
-      model,
-      value,
       reset,
-      resetall,
-      point_postion,
-      div,
-      save,
+      options_value_h_point_amount,
+      options_value_v_point_amount,
+      value_h_point_amount,
+      value_v_point_amount,
+      chang_point_amount,
+      add_control_points,
+      now_v_h,
+      reduce_control_points,
+      send_auxiliary_line,
+      auxiliary_line,
+      del,
+      add,
+      del_dialog,
+      add_dialog,
+      now_amount
+    }
+  }
+})
 
-    };
-  },
-});
 </script>
diff --git a/src/components/FusionSettings/FourPointCalibration.vue b/src/components/FusionSettings/FourPointCalibration.vue
index 772f124..88c0f28 100644
--- a/src/components/FusionSettings/FourPointCalibration.vue
+++ b/src/components/FusionSettings/FourPointCalibration.vue
@@ -1,120 +1,97 @@
 <template>
   <div class="row">
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" 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-xs" :dense="true" @focus="isactivearray[0] = false" v-model="four[0].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(0, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '1'" />
-    </div>
-    <div class="col-8"></div>
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[1] = false" v-model="four[1].x"
-        label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[1] = false" v-model="four[1].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(1, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '2'" />
-    </div>
-
-    <div class="col-2"></div>
-    <div class="col-8">
-      <div ref="div" style="background-color: #646464; height: 40vh">
+    <div class="col-1"></div>
+    <div class="col-10 q-pt-md">
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
         <div style="position: absolute">
-          <vue3ResizeDrag style="border: 0;" :class="[now_index == 0 ? 'action' : 'point']" v-if="isshowarray[0]"
-            :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)" @mouseUpHandler="mouseUpHandler(0)" :w="20"
-            :h="20" :x="points[0].x" :y="points[0].y" :isResizable="false" @moveHandler="moveHandler_1">
-            <div>1</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag style="border: 0;" :class="[now_index == 1 ? 'action' : 'point']" v-if="isshowarray[1]"
-            :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)" @mouseUpHandler="mouseUpHandler(1)" :w="20"
-            :h="20" :x="points[1].x" :y="points[1].y" :isResizable="false" @moveHandler="moveHandler_2">
-            <div>2</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag style="border: 0;" :class="[now_index == 2 ? 'action' : 'point']" v-if="isshowarray[2]"
-            :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)" @mouseUpHandler="mouseUpHandler(2)" :w="20"
-            :h="20" :x="points[2].x" :y="points[2].y" :isResizable="false" @moveHandler="moveHandler_3">
-            <div>3</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag style="border: 0;" :class="[now_index == 3 ? 'action' : 'point']" v-if="isshowarray[3]"
-            :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)" @mouseUpHandler="mouseUpHandler(3)" :w="20"
-            :h="20" :x="points[3].x" :y="points[3].y" :isResizable="false" @moveHandler="moveHandler_4">
-            <div>4</div>
-          </vue3ResizeDrag>
+          <Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
+            v-for="(item, index) in value_point.length" :initW="point.w"  :adsorbParent="false" :initH="point.h" :resizable="false"
+            v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
+            @click="options_model = index" @dragging="dragStartHandle($event, index)">
+            <span>{{
+              index+ 1
+            }}</span>
+          </Vue3DraggableResizable>
         </div>
       </div>
     </div>
-    <div class="col-2"></div>
+  </div>
+  <div>
+    <div class="row">
+      <div class="col-1"></div>
+      <div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
+          v-model="options_model" @update:model-value="(val) => { options_model = val }" :options="options" emit-value
+          map-options /></div>
+      <div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].x" @update:model-value="chang(options_model, $event, 'h')" label="x"
+          lazy-rules />
 
-    <div class="col-2">
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[2].x"
-        label="x" lazy-rules />
-      <q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[2].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(2, false)" text-color="black"
-        :label="$t('reset') + $t('point') + '3'" />
-    </div>
-    <div class="col-8">
-      <q-btn size="sm" dense color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
-    </div>
-    <div class="col-2">
-      <q-input filled type="number" :dense="true" @focus="isactivearray[3] = false" v-model="four[3].x" label="x"
-        lazy-rules />
-      <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false" v-model="four[3].y"
-        label="y" lazy-rules />
-      <q-btn size="sm" dense color="white" @click="reset(3,false)" text-color="black"
-        :label="$t('reset') + $t('point') + '4'" />
+      </div>
+      <div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].y" @update:model-value="chang(options_model, $event, 'h')" label="y"
+          lazy-rules /></div>
+      <div class="q-pt-md col-2">
+        <q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
+      </div>
+      <div class="col-2 q-pt-md">
+        <div><q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
+      </div>
     </div>
+
   </div>
 </template>
 
 <style scoped>
-.point {
+.action {
+  background-color: rgb(27, 180, 111);
   border-radius: 50%;
-  background: #0000ff;
-  color: aliceblue;
 }
 
-.action {
+.point {
+  background-color: rgb(186, 245, 245);
   border-radius: 50%;
-  background-color: aqua;
 }
 </style>
-<script lang="ts">
-import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
-import { dom } from "quasar";
 
+<script lang="ts">
 import {
   defineComponent,
-  ref,
-  watch,
-  computed,
-  defineProps,
-  withDefaults,
   onMounted,
-  reactive,
-  onBeforeUnmount,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
-import ClientConnection from "src/common/ClientConnection";
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+
+
+import DensityCorrection from "src/entities/DensityCorrection";
+import DensityCorrectionPoint from "src/entities/DensityCorrectionPoint";
+import { config } from "process";
+import { QSelect, QInput, QBtn } from "quasar";
+import { div } from "zrender/lib/core/vector";
 import GlobalData from "src/common/GlobalData";
-import { Console } from "console";
+import { number } from "@intlify/core-base";
 
 export default defineComponent({
-  name: "ComponentFourPointCalibration",
+  name: "ComponentDensityCorrection",
   components: {
-    vue3ResizeDrag,
+    Vue3DraggableResizable
   },
   setup() {
+    let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
+    const ste_status = ref(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 serverconfig = JSON.parse($store.state.fusion_configuration);
     const selectedprojector = computed(() => {
@@ -123,58 +100,10 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
-    const set_cache: any = ref([]);
-    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 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 now_index = ref(0)
-    const isshowarray = ref([true, true, true, true]);
-    const isactivearray = ref([true, true, true, true]);
-    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);
-      }
-      syncpoint();
-    };
+
+    const value_point_amount = ref(5)
+
+
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -185,240 +114,39 @@ export default defineComponent({
         }
       }
     };
-    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;
-      now_index.value = index
-    };
-    const mouseUpHandler = (index: number) => {
-      isactivearray.value[index] = false;
-    };
-    const keyDown = () => {
-      document.onkeydown = (e) => {
-        let lock = 0
-        let e1 = e || window.event || arguments.callee.caller.arguments[0]
-        switch (e.code) {
-          case "KeyW":
-            points[now_index.value].x
-            points[now_index.value].y--
-            break;
-          case "KeyA":
-            points[now_index.value].x--;
-            points[now_index.value].y
-            break;
-          case "KeyS":
-            points[now_index.value].x;
-            points[now_index.value].y++
-            break;
-          case "KeyD":
-            points[now_index.value].x++;
-            points[now_index.value].y
-            break;
-          default:
-            lock = 1
-            break;
-        }
-        if (lock == 0) {
-          let tmp = { left: points[now_index.value].x, top: points[now_index.value].y }
-          eval(`moveHandler_${now_index.value + 1}(tmp)`);
-          isactivearray.value[now_index.value] = false;
-          isshowarray.value[now_index.value] = false;
-          setTimeout(() => {
-            isshowarray.value[now_index.value] = true;
-          }, 100);
-        }
-
-      }
-    }
-    onMounted(() => {
-      ste_status.value = 1;
-      keyDown()
-      setpoa();
-
-      setTimeout(() => {
-        ste_status.value = 0;
-      }, 100);
-    });
 
     const use_server_config = () => {
-      for (let index = 0; index < fourpostion.value.length; index++) {
-        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;
+      value.value = []
+      value_point.value = []
+      for (let index = 0; index < config.point4.length; index++) {
+        let tmp: DensityCorrectionPoint = config.point4[index];
+        value.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_point.value.push(tmp_point)
       }
-    };
-
-    const setpoa = () => {
-      try {
-        points[0].x = 0;
-        points[0].y = 0;
-
-        points[1].x = div.value.offsetWidth - 25;
-        points[1].y = 0;
-
-        points[2].x = 0;
-        points[2].y = div.value.offsetHeight - 25;
-
-        points[3].x = div.value.offsetWidth - 25;
-        points[3].y = div.value.offsetHeight - 25;
-
-        fourpostion.value[0].x = 0;
-        fourpostion.value[0].y = 0;
-
-        fourpostion.value[1].x = div.value.offsetWidth - 25;
-        fourpostion.value[1].y = 0;
-
-        fourpostion.value[2].x = 0;
-        fourpostion.value[2].y = div.value.offsetHeight - 25;
-
-        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].y = fourpostion.value[index].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 {
-        }
-        set_point_x();
-      } catch (error) {
+    }
 
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value] != null) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        deepcopy(value.value, tmp.value)
+        deepcopy(value_point.value, tmp.value_point)
+        recalculate_coordinates()
       }
-    };
-    watch(
-      () => four[0],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            4, 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);
-          points[0].x = x;
-          points[0].y = y;
-          isshowarray.value[0] = false;
-          isactivearray.value[0] = false;
-          setTimeout(() => {
-            isshowarray.value[0] = true;
-          }, 100);
-        }
-        now_index.value = 0
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => four[1],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            4, 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);
-          points[1].x = x;
-          points[1].y = y;
-          isshowarray.value[1] = false;
-          isactivearray.value[1] = false;
-          setTimeout(() => {
-            isshowarray.value[1] = true;
-          }, 100);
-        }
-        now_index.value = 1
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => four[2],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            4, 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
-          );
+    }
 
-          points[2].x = x;
-          points[2].y = y;
-          isshowarray.value[2] = false;
-          setTimeout(() => {
-            isshowarray.value[2] = true;
-          }, 100);
-        }
-        now_index.value = 2
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    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,
-            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
-          );
-
-          points[3].x = x;
-          points[3].y = y;
-          isshowarray.value[3] = false;
-          setTimeout(() => {
-            isshowarray.value[3] = true;
-          }, 100);
-        }
-        now_index.value = 3
-        save_set_cache();
-      },
-      { deep: true }
-    );
+    const save_set_cache = () => {
+      let tmp = { value: value.value, value_point: value_point.value }
+      set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
+    }
 
     watch(
       () => configselsect,
@@ -441,176 +169,206 @@ export default defineComponent({
         setTimeout(() => {
           ste_status.value = 0;
         }, 100);
-        set_point_x();
       },
       { deep: true }
     );
-    watch(() => now_index, (newval, oldval) => {
-      if (ste_status.value == 1) return
-      set?.SetBlendingOption("blending_grids_select_point", `4:${now_index.value + 1}`)
+
+
+
+    const set_cache: any = ref([]);
+    //值
+    let value = ref(<DensityCorrection[]>[]);
+    //位置
+    let value_point = ref(<DensityCorrectionPoint[]>[]);
+    /**
+     * 当前选中的点的索引
+     */
+    const options_model = ref(0)
+
+    const div = ref();
+    const max = ref({ x: 0, y: 0 })
+    const point = ref({ w: 20, h: 20 })
+
+    watch(() => options_model, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_select_point", `4:${options_model.value + 1}`)
     }, { deep: true })
-    //为了加载 缓存的配置时 同步点的位置
-    const syncpoint = () => {
-      for (let index = 0; index < fourpostion.value.length; index++) {
-        isactivearray.value[index] = false;
+
+    /**
+     * 分辨率和页面的比例
+     */
+    let Proportion = ref({ x: 100, y: 1000 });
+    nextTick(() => {
+      max.value.x = div.value.offsetWidth
+      max.value.y = div.value.offsetHeight
+    })
+
+    const options = computed(() => {
+      let tmp = []
+      for (let index = 0; index < value_point.value.length; index++) {
+        tmp.push({
+          label: `${index + 1}`,
+          value: index,
+        })
       }
-    };
-    //手动同步
-    const set_point_x = () => {
-      let x = Math.ceil(four[0].x / Proportion.value.x);
-      let y = Math.ceil((config.height - four[0].y) / Proportion.value.y);
-      set_point(0, x, y);
+      return tmp
+    })
 
-      x = Math.ceil(four[1].x / Proportion.value.x);
-      y = Math.ceil((config.height - four[1].y) / Proportion.value.y);
-      set_point(1, x, y);
+    const chang_point_amount = (val: number) => {
+      start_point()
+    }
 
-      x = Math.ceil(four[2].x / Proportion.value.x);
-      y = Math.ceil(
-        config.height / Proportion.value.y - four[2].y / Proportion.value.y
-      );
-      set_point(2, x, y);
+    const dragStartHandle = ($event: any, index: number) => {
+      let obj_x = $event.x
+      let obj_y = $event.y
+      let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
+      value.value[index].x = Math.round(tmp.x)
+      value.value[index].y = Math.round(tmp.y)
+      send_value(index, Math.round(tmp.x), Math.round(tmp.y))
+      save_set_cache()
+    }
 
-      x = Math.ceil(four[3].x / Proportion.value.x);
-      y = Math.ceil(
-        config.height / Proportion.value.y - four[3].y / Proportion.value.y
-      );
-      set_point(3, x, y);
-    };
+    const chang = (index: number, $event: any, type: string) => {
+      index = Number(index)
+      let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
+      console.log(tmp)
+      value_point.value[index].y = Math.round(tmp.y)
+      value_point.value[index].x = Math.round(tmp.x)
+      console.log(value_point.value[index])
+      send_value(index, Math.round(value.value[index].x), Math.round(value.value[index].y))
 
-    const set_point = (index: number, x: number, y: number) => {
-      points[index].x = x;
-      points[index].y = y;
-      isshowarray.value[index] = false;
-      isactivearray.value[index] = false;
-      setTimeout(() => {
-        isshowarray.value[index] = true;
-      }, 100);
-    };
-    const reset = (index: number, send: boolean) => {
-      send = send ?? true;
-      isactivearray.value[index] = false;
-      fourpostion.value[index].x = defaultfourpostion.value[index].x;
-      fourpostion.value[index].y = defaultfourpostion.value[index].y;
+      save_set_cache()
+    }
 
-      four[index].x = config.point4[index].def_x;
-      four[index].y = config.point4[index].def_y;
+    /**
+     * 将分辨率的坐标转换为 页面的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_value_to_xy = (x: number, y: number): { x: number, y: number } => {
+      x = x / Proportion.value.x
+      y = (config.height - y) / Proportion.value.y
+      return { x, y }
+    }
 
-      if (send) {
-        set?.setBlendingCorrection(
-          $store.getters.GetTheCurrentlySelectedCamera[0],
-          $store.getters.GetTheCurrentlySelectedCamera[1],
-          4, 4,
-          index + 1,
-          Number(config.point4[index].def_x),
-          Number(config.point4[index].def_y)
-        );
+
+    /**
+     * 将页面的坐标转换为 分辨率的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_xy_to_value = (x: number, y: number): { x: number, y: number } => {
+      x = (x + point.value.w / 14) * Proportion.value.x
+      // x = (x-point.value.w) * Proportion.value.x
+      y = (max.value.y - (y + point.value.h)) * Proportion.value.y
+      return { x, y }
+    }
+
+    const start_point = () => {
+      value.value = []
+      value_point.value = []
+      for (let index = 0; index < config.point4.length; index++) {
+        let tmp: DensityCorrectionPoint = config.point4[index];
+        value.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_point.value.push(tmp_point)
       }
+    }
 
-      isshowarray.value[index] = false;
-      setTimeout(() => {
-        isshowarray.value[index] = true;
-      }, 100);
-    };
-
-    const resetall = () => {
-      for (let index = 0; index < fourpostion.value.length; index++) {
-        reset(index, false);
-      }
-      set?.setBlendingCorrection(
-        $store.getters.GetTheCurrentlySelectedCamera[0],
-        $store.getters.GetTheCurrentlySelectedCamera[1],
-        4, 4, 0, 0, 0
-      );
-    };
-
-    const moveHandler_1 = (data: any) => {
-      let x = Math.round(
-        (data.left - fourpostion.value[0].x) * Proportion.value.x + 0
-      );
-      let y = Math.round(
-        config.height - data.top * Proportion.value.y - fourpostion.value[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;
-      points[now_index.value].x = data.left
-      points[now_index.value].y = data.top
-
-      save_set_cache();
-    };
-    const moveHandler_2 = (data: any) => {
-      let x = Math.round(
-        (data.left - fourpostion.value[1].x) * Proportion.value.x + config.width
-      );
-      let y = Math.round(
-        config.height - data.top * Proportion.value.y - fourpostion.value[1].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;
-      points[now_index.value].x = data.left
-      points[now_index.value].y = data.top
-      save_set_cache();
-    };
-    const moveHandler_3 = (data: any) => {
-      let x = Math.round(
-        (data.left - fourpostion.value[2].x) * Proportion.value.x
-      );
-      let y = Math.abs(
-        Math.round((data.top - fourpostion.value[2].y) * Proportion.value.y)
-      );
-      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;
-      points[now_index.value].x = data.left
-      points[now_index.value].y = data.top
-      save_set_cache();
-    };
-    const moveHandler_4 = (data: any) => {
-      let x = Math.round(
-        (data.left - fourpostion.value[3].x) * Proportion.value.x + config.width
-      );
-      let y = Math.abs(
-        Math.round((data.top - fourpostion.value[3].y) * Proportion.value.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;
-      points[now_index.value].x = data.left
-      points[now_index.value].y = data.top
-      save_set_cache();
-    };
-    //窗口变动重新渲染
+    /**
+     * 创建空值 让dom先渲染
+     */
+    const start = () => {
+      let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
+      value.value.push(tmp)
+      value_point.value.push(tmp)
+    }
+    start()
     onMounted(() => {
-      //监听窗口变化
+      Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+      Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+      start_point()
+      start()
+      use_server_config()
+      if (
+        sessionStorage.FourPointCalibration &&
+        sessionStorage.FourPointCalibration.length > 0
+      ) {
+        set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
+        use_set_cache();
+      }
       window.onresize = () => {
         return (() => {
-          ste_status.value = 1;
-          if (div != null) setpoa();
-
-          setTimeout(() => {
-            ste_status.value = 0;
-          }, 100);
+          if (div != null) {
+            recalculate_coordinates()
+          }
         })();
       };
+    })
+
+    onBeforeUnmount(() => {
+      sessionStorage.FourPointCalibration = JSON.stringify(set_cache.value);
     });
+
+    const reset = (index: number, send: boolean, type: string) => {
+      value.value[index].x = value.value[index].def_x
+      value.value[index].y = value.value[index].def_y
+      // value_point.value[index].x = value_point.value[index].def_x
+      // value_point.value[index].y = value_point.value[index].def_y
+      chang(index, value.value[index].def_y, type)
+      save_set_cache()
+    }
+    const send_value = (index: number, x: number, y: number) => {
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      set?.setBlendingCorrection(row, col, 4, value_point.value.length, index + 1, Number(x), Number(y));
+    }
+    const resetall = () => {
+      for (let index = 0; index < value_point.value.length; index++) {
+        reset(index, true, 'v')
+      }
+    }
+    const recalculate_coordinates = () => {
+      try {
+        Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+        Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+        max.value.x = div.value.offsetWidth
+        max.value.y = div.value.offsetHeight
+        for (let index = 0; index < value.value.length; index++) {
+          let x_y = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
+          let def_x_y = coordinate_transformation_value_to_xy(value.value[index].def_x, value.value[index].def_x)
+          value_point.value[index].x = x_y.x
+          value_point.value[index].y = x_y.y
+          value_point.value[index].def_x = def_x_y.x
+          value_point.value[index].def_y = def_x_y.y
+        }
+      } catch (error) {
+
+      }
+    }
     return {
-      now_index,
-      div,
-      fourpostion,
-      reset,
       resetall,
-      moveHandler_1,
-      moveHandler_2,
-      moveHandler_3,
-      moveHandler_4,
-      four,
-      save,
-      isshowarray,
-      isactivearray,
-      activeMouseDown,
-      mouseUpHandler,
-      points,
-    };
-  },
-});
+      div,
+      max,
+      point,
+      options_model,
+      value,
+      value_point,
+      dragStartHandle,
+      chang,
+      reset,
+      value_point_amount,
+      chang_point_amount,
+      options
+    }
+  }
+})
+
 </script>
diff --git a/src/components/FusionSettings/SurfaceCorrection.vue b/src/components/FusionSettings/SurfaceCorrection.vue
index 71d21ad..60e6750 100644
--- a/src/components/FusionSettings/SurfaceCorrection.vue
+++ b/src/components/FusionSettings/SurfaceCorrection.vue
@@ -1,222 +1,133 @@
 <template>
   <div class="row">
-    <div class="col-4">
-      <div class="row">
-        <div class="col-6"></div>
-        <div class="col-6">
-          <q-input filled type="number" class="q-pb-xs q-pt-md" @focus="isactivearray[0] = false" :dense="true"
-            v-model="nine[0].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[0] = false" :dense="true"
-            v-model="nine[0].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(0,false)" text-color="black" :label="$t('reset') + $t('point') + '1'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-4">
-      <div class="row">
-        <div class="col-4"></div>
-        <div class="col-4">
-          <q-input filled type="number" class="q-pb-xs q-pt-md" @focus="isactivearray[1] = false" :dense="true"
-            v-model="nine[1].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[1] = false" :dense="true"
-            v-model="nine[1].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(1,false)" text-color="black" :label="$t('reset') + $t('point') + '2'" />
-        </div>
-
-        <div class="col-4" style="padding-left: 2px">
-          <q-input filled type="number" class="q-pb-xs  q-pt-md" :dense="true" v-model="nine[4].x" label="x"
-            @focus="isactivearray[4] = false" lazy-rules />
-          <q-input filled type="number"  :dense="true" v-model="nine[4].y" label="y"
-            @focus="isactivearray[4] = false" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(4,false)" text-color="black" :label="$t('reset') + $t('point') + '5'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-4">
-      <div class="row">
-        <div class="col-3"></div>
-        <div class="col-6">
-          <q-input filled type="number" @focus="isactivearray[2] = false" class="q-pb-xs q-pt-md" :dense="true"
-            v-model="nine[2].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[2] = false" :dense="true"
-            v-model="nine[2].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(2,false)" text-color="black" :label="$t('reset') + $t('point') + '3'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-2">
-      <div class="row" style="margin-top: 10vh">
-        <div class="col-2"></div>
-        <div class="col-10">
-          <q-input filled type="number" @focus="isactivearray[3] = false" class="q-pb-xs q-pt-md" :dense="true"
-            v-model="nine[3].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[3] = false" :dense="true"
-            v-model="nine[3].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(3,false)" text-color="black" :label="$t('reset') + $t('point') + '4'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-8">
-      <div ref="div" style="background-color: #646464; height: 40vh">
+    <div class="col-1"></div>
+    <div class="col-10 q-pt-md">
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
         <div style="position: absolute">
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==0?'action':'point']" :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 >1</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==1?'action':'point']" :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 >2</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==2?'action':'point']" :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 >3</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==3?'action':'point']" :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 >4</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==4?'action':'point']" :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 >5</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==5?'action':'point']" :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 >6</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==6?'action':'point']" :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 >7</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==7?'action':'point']" :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 >8</div>
-          </vue3ResizeDrag>
-          <vue3ResizeDrag  style="border: 0;"  :class="[now_index==8?'action':'point']" :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 >9</div>
-          </vue3ResizeDrag>
-        </div>
-      </div>
-    </div>
-    <div class="col-2">
-      <div class="row" style="margin-top: 10vh">
-        <div class="col-10">
-          <q-input filled type="number" @focus="isactivearray[5] = false" class="q-pb-xs" :dense="true"
-            v-model="nine[5].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[5] = false" :dense="true"
-            v-model="nine[5].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(5,false)" text-color="black" :label="$t('reset') + $t('point') + '6'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-4">
-      <div class="row">
-        <div class="col-6">
-          <q-btn color="white"  @click="resetall" text-color="black" :label="$t('resetall')" />
-        </div>
-        <div class="col-6">
-          <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pb-xs" :dense="true"
-            v-model="nine[6].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[6] = false" :dense="true"
-            v-model="nine[6].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(6,false)" text-color="black" :label="$t('reset') + $t('point') + '7'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-4">
-      <div class="row">
-        <div class="col-4"></div>
-        <div class="col-6">
-          <q-input filled type="number" @focus="isactivearray[7] = false" class="q-pb-xs" :dense="true"
-            v-model="nine[7].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[7] = false" :dense="true"
-            v-model="nine[7].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(7,false)" text-color="black" :label="$t('reset') + $t('point') + '8'" />
-        </div>
-      </div>
-    </div>
-    <div class="col-4">
-      <div class="row">
-        <div class="col-3"></div>
-        <div class="col-6">
-          <q-input filled type="number" @focus="isactivearray[8] = false" class="q-pb-xs" :dense="true"
-            v-model="nine[8].x" label="x" lazy-rules />
-          <q-input filled type="number"  @focus="isactivearray[8] = false" :dense="true"
-            v-model="nine[8].y" label="y" lazy-rules />
-          <q-btn size="sm" dense color="white" @click="reset(8,false)" text-color="black" :label="$t('reset') + $t('point') + '9'" />
+          <Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
+            v-for="(item, index) in value_point.length" :initW="point.w" :initH="point.h" :resizable="false"
+            v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
+            @click="options_model = index" @dragging="dragStartHandle($event, index)">
+            <span>{{
+              index+ 1
+            }}</span>
+          </Vue3DraggableResizable>
         </div>
       </div>
     </div>
   </div>
+  <div>
+    <div class="row">
+      <div class="col-1"></div>
+      <div class="col-2 q-px-md">
+        <div class="col-2"> <q-select class="q-pt-md" :label="$t('point amount')"
+            @update:model-value="(val) => { chang_point_amount(val) }" :dense="true" filled v-model="value_point_amount"
+            :options="options_value_point_amount" emit-value map-options />
+        </div>
+      </div>
+      <div class="col-2">
+
+        <div class="col-1 q-pt-md "><q-btn color="white" @click="add_control_points(Number(value_point_amount))"
+            text-color="black" :label="$t('add control points')" /></div>
+
+      </div>
+      <div class="col-2">
+
+        <div class="col-1 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }" text-color="black"
+            :label="$t('reduce control points')" /></div>
+
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-1"></div>
+      <div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
+          v-model="options_model" @update:model-value="(val) => { options_model = val }" :options="options" emit-value
+          map-options /></div>
+      <div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].x" @update:model-value="chang(options_model, $event, 'h')" label="x"
+          lazy-rules />
+      </div>
+      <div class="col-2 q-px-md"><q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].y" @update:model-value="chang(options_model, $event, 'h')" label="y"
+          lazy-rules /></div>
+      <div class="q-pt-md col-2">
+        <q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
+      </div>
+      <div class="col-2 q-pt-md ">
+        <div><q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
+      </div>
+    </div>
+
+
+  </div>
+  <q-dialog v-model="del_dialog">
+    <q-card style="width: 700px; max-width: 80vw;">
+      <q-card-section>
+        <div class="text-h6">{{ $t('confirm delete') }}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        {{ $t('OK to delete you will lose the data you adjusted now') }}
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup />
+        <q-btn flat :label="$t('ok')" @click="del_control_points(value_point_amount)" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
 </template>
 
 <style scoped>
-.point{
-  border-radius: 50%;background: #00ff00;color: aliceblue;
-}
-.action{
+.action {
+  background-color: rgb(27, 180, 111);
+  border-radius: 50%;
+}
+
+.point {
+  background-color: rgb(186, 245, 245);
   border-radius: 50%;
-  background-color: aqua;
 }
 </style>
+
 <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,
-  onBeforeUnmount,
-  reactive,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+
+
+import DensityCorrection from "src/entities/DensityCorrection";
+import DensityCorrectionPoint from "src/entities/DensityCorrectionPoint";
+import { config } from "process";
+import { QSelect, QInput, QBtn } from "quasar";
+import { div } from "zrender/lib/core/vector";
+import GlobalData from "src/common/GlobalData";
+import { number } from "@intlify/core-base";
 
 export default defineComponent({
-  name: "ComponentSurfaceCorrection",
+  name: "ComponentDensityCorrection",
   components: {
-    vue3ResizeDrag,
+    Vue3DraggableResizable
   },
   setup() {
+    let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
+    const ste_status = ref(0);
     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 });
-    const div = ref();
-    const now_index = ref(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;
-      now_index.value=index
-    };
+
     //用于计算当前投影仪的索引
     let serverconfig = JSON.parse($store.state.fusion_configuration);
     const selectedprojector = computed(() => {
@@ -225,169 +136,15 @@ export default defineComponent({
         $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 },
-    ]);
-    let defaultninepostion: 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 },
-    ]);
-    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[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 =
-        config.width / 2 +
-        Math.ceil((data.left - ninepostion.value[1].x) * Proportion.value.x);
-      let y =
-        config.height -
-        Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.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[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 =
-        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 =
-        config.width / 2 +
-        Math.ceil((data.left - ninepostion.value[4].x) * Proportion.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 =
-        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)
-      );
-      if(data.top>ninepostion.value[6].y)y= Math.ceil((ninepostion.value[6].y-data.top ) * Proportion.value.y)
-      nine[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
-      nine[6].y = y > config.height ? config.height : y;
-      save_set_cache();
-    };
-    const moveHandler_8 = (data: any) => {
-      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)
-      );
-      if(data.top>ninepostion.value[7].y)y= Math.ceil((ninepostion.value[7].y-data.top ) * Proportion.value.y)
-      nine[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
-      nine[7].y = y > config.height ? config.height : 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)
-      );
-      if(data.top>ninepostion.value[8].y)y= Math.ceil((ninepostion.value[8].y-data.top ) * Proportion.value.y)
-      nine[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
-      nine[8].y = y > config.height ? config.height : y ;
-      save_set_cache();
-    };
 
-    //为了加载 缓存的配置时 同步点的位置
-    const syncpoint = () => {
-      for (let index = 0; index < ninepostion.value.length; index++) {
-        isactivearray.value[index] = false;
-      }
-    };
+    const value_point_amount = ref(9)
+    const del_dialog = ref(false)
+    // const options_value_point_amount = computed(() => {
+    //   return Object.keys(config.multi_curved_surface)
+    // })
+
+    const options_value_point_amount = ref(<string[]>[])
 
-    const use_set_cache = () => {
-      if (set_cache.value[selectedprojector.value] != null) {
-        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
-        deepcopy(nine, tmp);
-      }
-      syncpoint();
-    };
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -395,17 +152,46 @@ export default defineComponent({
           deepcopy(o1[k], o2[k]);
         } else {
           o1[k] = o2[k];
+
         }
       }
     };
-    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);
+
+    const use_server_config = () => {
+      let a = 9
+      value.value = []
+      value_point.value = []
+      for (let index = 0; index < config.multi_curved_surface[a].length; index++) {
+        let tmp: DensityCorrectionPoint = config.multi_curved_surface[a][index];
+        value.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_point.value.push(tmp_point)
       }
-    });
+    }
+
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value] != null) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        value_point_amount.value = tmp.value_point_amount
+        deepcopy(value.value, tmp.value)
+        deepcopy(value_point.value, tmp.value_point)
+        recalculate_coordinates()
+      }
+    }
+
+    const save_set_cache = () => {
+      let tmp = { value: value.value, value_point_amount: value_point_amount.value, value_point: value_point.value}
+      set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
+    }
+
 
     watch(
       () => configselsect,
@@ -425,383 +211,311 @@ export default defineComponent({
         config = JSON.parse(JSON.stringify(fortmp));
         use_server_config();
         use_set_cache();
+        options_value_point_amount.value = Object.keys(config.multi_curved_surface)
         setTimeout(() => {
           ste_status.value = 0;
         }, 100);
       },
       { deep: true }
     );
-    onMounted(() => {
-      ste_status.value = 1;
-      startpostion();
-      setninepostion();
-      use_set_cache();
-      setTimeout(() => {
-        ste_status.value = 0;
-      }, 100);
-    });
 
-    //窗口变动重新渲染
-    onMounted(() => {
-      window.onresize = () => {
-        return (() => {
-          try {
-            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();
-          use_set_cache();
-          setTimeout(() => {
-            ste_status.value = 0;
-          }, 100);
-          } catch (error) {
 
-          }
-        })();
-      };
-    });
 
-    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 set_cache: any = ref([]);
+    //值
+    let value = ref(<DensityCorrection[]>[]);
+    //位置
+    let value_point = ref(<DensityCorrectionPoint[]>[]);
+    /**
+     * 当前选中的点的索引
+     */
+    const options_model = ref(0)
+
+    const div = ref();
+    const max = ref({ x: 0, y: 0 })
+    const point = ref({ w: 20, h: 20 })
+
+    watch(() => options_model, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_select_point", `9:${newval.value + 1}`)
+    }, { deep: true })
+
+    watch(() => value_point_amount, (newval, oldval) => {
+      set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+    }, { deep: true })
+
+    /**
+     * 分辨率和页面的比例
+     */
+    let Proportion = ref({ x: 100, y: 1000 });
+    nextTick(() => {
+      max.value.x = div.value.offsetWidth
+      max.value.y = div.value.offsetHeight
+    })
+
+
+    const chang_point_amount = (val: number) => {
+      start_point(val)
+      //use_set_cache()
+    }
+
+    const dragStartHandle = ($event: any, index: number) => {
+      let obj_x = $event.x
+      let obj_y = $event.y
+      let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
+      value.value[index].x = Math.trunc(tmp.x)
+      value.value[index].y = Math.trunc(tmp.y)
+      send_value(index, Math.trunc(tmp.x), Math.trunc(tmp.y))
+      save_set_cache()
+    }
+
+    const chang = (index: number, $event: any, type: string) => {
+      index = Number(index)
+      let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
+      value_point.value[index].y = Math.trunc(tmp.y)
+      value_point.value[index].x = Math.trunc(tmp.x)
+      send_value(index, Math.trunc(value.value[index].x), Math.trunc(value.value[index].y))
+
+      save_set_cache()
+    }
+    const options = computed(() => {
+      let tmp = []
+      for (let index = 0; index < value_point.value.length; index++) {
+        tmp.push({
+          label: `${index + 1}`,
+          value: index,
+        })
       }
-    };
-    const startpostion = () => {
-      try {
-      ninepostion.value[0].x = 0;
-      ninepostion.value[0].y = 0;
-
-      ninepostion.value[1].x = div.value.offsetWidth / 2 - 20;  //
-      ninepostion.value[1].y = 0;
-
-      ninepostion.value[2].x = div.value.offsetWidth - 10;
-      ninepostion.value[2].y = 0;
-
-      ninepostion.value[3].x = 0;
-      ninepostion.value[3].y = div.value.offsetHeight / 2 - 20;
-
-      ninepostion.value[4].x = div.value.offsetWidth / 2 - 20; //
-      ninepostion.value[4].y = div.value.offsetHeight / 2 - 20;
-
-      ninepostion.value[5].x = div.value.offsetWidth - 10;
-      ninepostion.value[5].y = div.value.offsetHeight / 2 -20;
-
-      ninepostion.value[6].x = 0;
-      ninepostion.value[6].y = div.value.offsetHeight - 20;
-
-      ninepostion.value[7].x = div.value.offsetWidth / 2 - 20; //
-      ninepostion.value[7].y = div.value.offsetHeight - 20;
-
-      ninepostion.value[8].x = div.value.offsetWidth - 10;
-      ninepostion.value[8].y = div.value.offsetHeight - 20;
-
-      Proportion.value.x = config.width / (div.value.offsetWidth - 20);
-      Proportion.value.y = config.height / (div.value.offsetHeight - 20);
+      return tmp
+    })
 
 
-      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;
+    /**
+     * 将分辨率的坐标转换为 页面的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_value_to_xy = (x: number, y: number): { x: number, y: number } => {
+      x = x / Proportion.value.x
+      y = (config.height - y) / Proportion.value.y
+      return { x, y }
+    }
+
+
+    /**
+     * 将页面的坐标转换为 分辨率的坐标
+     * @param x x坐标
+     * @param y y坐标
+     */
+    const coordinate_transformation_xy_to_value = (x: number, y: number): { x: number, y: number } => {
+      x = x * Proportion.value.x
+      y = (max.value.y - (y + point.value.h)) * Proportion.value.y
+      return { x, y }
+    }
+
+    const start_point = (a: number) => {
+      value.value = []
+      value_point.value = []
+      for (let index = 0; index < config.multi_curved_surface[a].length; index++) {
+        let tmp: DensityCorrectionPoint = config.multi_curved_surface[a][index];
+        value.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_point.value.push(tmp_point)
       }
-      if (sessionStorage.SurfaceCorrection) {
+    }
+
+
+    const start = () => {
+      let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
+      value.value.push(tmp)
+      value_point.value.push(tmp)
+    }
+    start()
+    onMounted(() => {
+      Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+      Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+      start_point(9)
+      start()
+      use_server_config()
+      if (
+        sessionStorage.SurfaceCorrection &&
+        sessionStorage.SurfaceCorrection.length > 0
+      ) {
         set_cache.value = JSON.parse(sessionStorage.SurfaceCorrection);
         use_set_cache();
       }
-      syncpoint();
-    } catch (error) {
+      options_value_point_amount.value = Object.keys(config.multi_curved_surface)
+      window.onresize = () => {
+        return (() => {
+          if (div != null) {
+            recalculate_coordinates()
+          }
+        })();
+      };
+    })
 
-      }
-    };
-    const use_server_config = () => {
-      for (let index = 0; index < defaultninepostion.value.length; index++) {
-        defaultnine.value[index].x =  config.point9[index].def_x;
-        defaultnine.value[index].y =  config.point9[index].def_y;
-        nine[index].x = config.point9[index].x;
-        nine[index].y = config.point9[index].y;
-      }
-    };
-    const reset = (index: number, send: boolean) => {
-	  send = send?? true;
+    onBeforeUnmount(() => {
+      sessionStorage.SurfaceCorrection = JSON.stringify(set_cache.value);
+    });
 
-      nine[index].x = config.point9[index].def_x;
-      nine[index].y = config.point9[index].def_y;
-
-	  if (send)
-	  {
-        set?.setBlendingCorrection(
-          $store.getters.GetTheCurrentlySelectedCamera[0],
-          $store.getters.GetTheCurrentlySelectedCamera[1],
-          9, 9,
-          index + 1,
-          Number(config.point9[index].def_x),
-          Number(config.point9[index].def_y)
-        );
-	  }
-
-      isshowarray.value[index] = false;
-      setTimeout(() => {
-        isshowarray.value[index] = true;
-      }, 100);
-    };
+    const reset = (index: number, send: boolean, type: string) => {
+      value.value[index].x = value.value[index].def_x
+      value.value[index].y = value.value[index].def_y
+      chang(index, value.value[index].def_y, type)
+      save_set_cache()
+    }
+    const send_value = (index: number, x: number, y: number) => {
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      set?.setBlendingCorrection(row, col, 9, value_point.value.length, index + 1, Number(x), Number(y));
+    }
     const resetall = () => {
-      for (let index = 0; index < nine.length; index++) {
-        reset(index, false);
+      for (let index = 0; index < value_point.value.length; index++) {
+        reset(index, true, 'v')
+
       }
-      set?.setBlendingCorrection(
-        $store.getters.GetTheCurrentlySelectedCamera[0],
-        $store.getters.GetTheCurrentlySelectedCamera[1],
-        9, 9, 0, 0, 0
-      );
-    };
-    watch(
-      () => nine[0],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 9,
-            1,
-            Number(newVal.x),
-            Number(newVal.y)
-          );
+    }
+    const recalculate_coordinates = () => {
+      try {
+        Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
+        Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
+        max.value.x = div.value.offsetWidth
+        max.value.y = div.value.offsetHeight
+        for (let index = 0; index < value.value.length; index++) {
+          let x_y = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
+          let def_x_y = coordinate_transformation_value_to_xy(value.value[index].def_x, value.value[index].def_y)
+          value_point.value[index].x = x_y.x
+          value_point.value[index].y = x_y.y
+          value_point.value[index].def_x = def_x_y.x
+          value_point.value[index].def_y = def_x_y.y
+        }
+      } catch (error) {
 
-        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[1],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 9,
-            2,
-            Number(newVal.x),
-            Number(newVal.y)
-          );
+      }
+    }
+    const add_control_points = (amount: number) => {
+      if (amount < 9) return
+      let cardinality = Math.sqrt(amount)
+      amount = (cardinality + 1) ** 2
+      let tmpconfig: any = null
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
 
-        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);
+      set?.AddBlendingCtrlPoint('9', row, col, amount).then((res) => {
+        if (res == null || typeof (res) == "undefined") return
+        let tmp = JSON.parse(res?.config);
+        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));
+          }
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[2],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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);
+        ste_status.value = 1;
+        tmpconfig = JSON.parse(JSON.stringify(fortmp));
+        options_value_point_amount.value = []
+        for (let key in tmpconfig.multi_curved_surface) {
+          options_value_point_amount.value.push(key)
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[3],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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);
+        value_point_amount.value = amount
+        config = tmpconfig
+        $store.commit("setfusion_configuration", res?.config);
+        value.value = []
+        value_point.value = []
+        for (let index = 0; index < tmpconfig.multi_curved_surface[amount].length; index++) {
+          let tmp: DensityCorrectionPoint = tmpconfig.multi_curved_surface[amount][index];
+          value.value.push(tmp)
+          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+          let tmp_point: DensityCorrectionPoint = {
+            control_point: tmp.control_point,
+            x: x_y.x,
+            y: x_y.y,
+            def_x: def_x_f.x,
+            def_y: def_x_f.y
+          }
+          value_point.value.push(tmp_point)
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[4],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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);
+      });
+    }
+    const del_control_points = (amount: number) => {
+      if (amount <= 9) return
+      let cardinality = Math.sqrt(amount)
+      amount = (cardinality + -1) ** 2
+      let tmpconfig: any = null
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+
+      set?.DelBlendingCtrlPoint('9', row, col, amount).then((res) => {
+        if (res == null || typeof (res) == "undefined") return
+        let tmp = JSON.parse(res?.config);
+        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));
+          }
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[5],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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);
+        ste_status.value = 1;
+        tmpconfig = JSON.parse(JSON.stringify(fortmp));
+        options_value_point_amount.value = []
+        for (let key in tmpconfig.multi_curved_surface) {
+          options_value_point_amount.value.push(key)
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[6],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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);
+        value_point_amount.value = amount
+        config = tmpconfig
+        $store.commit("setfusion_configuration", res?.config);
+        value.value = []
+        value_point.value = []
+        for (let index = 0; index < tmpconfig.multi_curved_surface[amount].length; index++) {
+          let tmp: DensityCorrectionPoint = tmpconfig.multi_curved_surface[amount][index];
+          value.value.push(tmp)
+          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+          let tmp_point: DensityCorrectionPoint = {
+            control_point: tmp.control_point,
+            x: x_y.x,
+            y: x_y.y,
+            def_x: def_x_f.x,
+            def_y: def_x_f.y
+          }
+          value_point.value.push(tmp_point)
         }
-        save_set_cache();
-      },
-      { deep: true }
-    );
-    watch(
-      () => nine[7],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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[8],
-      (newVal, oldVal) => {
-        if ($store.state.enablefusion && ste_status.value == 0)
-          set?.setBlendingCorrection(
-            $store.getters.GetTheCurrentlySelectedCamera[0],
-            $store.getters.GetTheCurrentlySelectedCamera[1],
-            9, 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 set = GlobalData.getInstance().getCurrentClient();
-    const setdianposin = (index: number, x: number, y: number) => {
-      ninepostion.value[index].x = x;
-      ninepostion.value[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
-    };
-    const save = () => {
-      set?.SaveBlendingConfig("");
-      setTimeout(() => {
-        set?.GetBlendingConfig("").then((res) => {
-          $store.commit("setfusion_configuration", res?.config);
-        });
-      }, 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,
-      moveHandler_1,
-      moveHandler_2,
-      moveHandler_3,
-      moveHandler_4,
-      moveHandler_5,
-      moveHandler_6,
-      moveHandler_7,
-      moveHandler_8,
-      moveHandler_9,
-      div,
       resetall,
-      ninepostion,
+      div,
+      max,
+      point,
+      options_model,
+      value,
+      value_point,
+      dragStartHandle,
+      chang,
+      options,
       reset,
-      isshowarray,
-      isactivearray,
-      activeMouseDown,
-      set_cache,
-    };
-  },
-});
+      options_value_point_amount,
+      value_point_amount,
+      chang_point_amount,
+      del_dialog,
+      add_control_points,
+      del_control_points
+    }
+  }
+})
+
 </script>
diff --git a/src/components/FusionSettingsDialog.vue b/src/components/FusionSettingsDialog.vue
index 8d555a8..5e7abdc 100644
--- a/src/components/FusionSettingsDialog.vue
+++ b/src/components/FusionSettingsDialog.vue
@@ -321,7 +321,7 @@ export default defineComponent({
             tmp = '9'
             break;
           case 'DensityCorrection':
-            tmp = 'density'
+            tmp = 'hor_density'
             break;
           default:
             break;
diff --git a/src/entities/DensityCorrection.ts b/src/entities/DensityCorrection.ts
new file mode 100644
index 0000000..2b43f5c
--- /dev/null
+++ b/src/entities/DensityCorrection.ts
@@ -0,0 +1,7 @@
+export default class DensityCorrection {
+  control_point = 0;
+  x = 0;
+  y = 0;
+  def_x = 0;
+  def_y = 0;
+}
diff --git a/src/entities/DensityCorrectionPoint.ts b/src/entities/DensityCorrectionPoint.ts
new file mode 100644
index 0000000..6c1cf6b
--- /dev/null
+++ b/src/entities/DensityCorrectionPoint.ts
@@ -0,0 +1,7 @@
+export default class DensityCorrectionPoint {
+  control_point = 0;
+  x = 0;
+  y = 0;
+  def_x = 0;
+  def_y = 0;
+}
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index ef22767..184cc91 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -453,5 +453,13 @@ export default {
   "line width":"line width",
   "level":"level",
   "vertical":"vertical",
-  "auxiliary lines":"auxiliary lines"
+  "auxiliary lines":"auxiliary lines",
+  "level point":"level point amount",
+  "vertical point ":"vertical point amount",
+  "point amount":"point amount",
+  "add control points":"add control points",
+  "reduce control points":"reduce control points",
+  "OK to delete you will lose the data you adjusted now":"OK to delete you will lose the data you adjusted now",
+  "Please enter the points you need to add":"Please enter the points you need to add",
+  "Whether to add control points":"Whether to add control points"
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 7b55ac1..ffc897e 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -722,5 +722,13 @@ export default {
   "line width":"线宽",
   "level":"水平",
   "vertical":"垂直",
-  "auxiliary lines":"辅助线"
+  "auxiliary lines":"辅助线",
+  "level point":"水平点数量",
+  "vertical point":"垂直点数量",
+  "point amount":"点数量",
+  "add control points":"增加",
+  "reduce control points":"减少",
+  "OK to delete you will lose the data you adjusted now":"确定删除你将失去现在调整的数据",
+  "Please enter the points you need to add":"请输入你所需要添加的点数",
+  "Whether to add control points":"是否添加控制点"
 };