Merge remote-tracking branch 'remotes/origin/blending' into merge_fm_fusion

# Conflicts:
#	src/common/ClientConnection.ts
#	src/components/FileManageDialog.vue
#	src/entities/WSProtocol.ts
#	src/i18n/en-US/index.ts
#	src/i18n/zh-CN/index.ts
#	src/pages/TopToolBar.vue
#	src/store/index.ts

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@quasar/cli": "^2.0.0",
-    "@quasar/extras": "^1.15.10",
+    "@quasar/extras": "^1.15.11",
     "@tinymce/tinymce-vue": "4",
     "@types/element-resize-detector": "^1.1.3",
     "autoprefixer": "^10.4.2",
@@ -19,7 +19,7 @@
     "core-js": "^3.21.0",
     "element-resize-detector": "^1.2.4",
     "qrcode.vue": "^3.3.3",
-    "quasar": "^2.11.5",
+    "quasar": "^2.11.6",
     "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.0",
     "to": "^0.2.9",
@@ -29,6 +29,7 @@
     "vue": "^3.0.0",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0",
+    "vue3-draggable-resizable": "^1.6.5",
     "vuex": "^4.0.1",
     "zrender": "^5.3.1"
   },

src/common/ClientConnection.ts

@@ -1261,7 +1261,7 @@ export default class ClientConnection {
       console.error(e);
     }
   }
-//
+  //
   public async getMagicWallGridState() {
     try {
       return await this.doRpc<Protocol.RpcGetMagicWallGridStateResponseEntity>(
@@ -1272,7 +1272,7 @@ export default class ClientConnection {
     }
   }
 
-  public async setMagicWallGridState(show_grid:boolean) {
+  public async setMagicWallGridState(show_grid: boolean) {
     try {
       return await this.doRpc<Protocol.RpcSetMagicWallGridStateResponseEntity>(
         new Protocol.RpcSetMagicWallGridStateRequestEntity(show_grid)
@@ -1361,6 +1361,7 @@ export default class ClientConnection {
     row: number,
     column: number,
     correction_type: number,
+    control_point_count: number,
     control_point: number,
     x: number,
     y: number
@@ -1370,6 +1371,7 @@ export default class ClientConnection {
         row,
         column,
         correction_type,
+        control_point_count,
         control_point,
         x,
         y
@@ -1461,6 +1463,94 @@ export default class ClientConnection {
     );
   }
 
+  public async SetBlendingHorDensity(
+    row: number,
+    column: number,
+    control_point_count: number,
+    control_point: number,
+    value: number
+  ) {
+    return await this.doRpc<Protocol.NoneResponse>(
+      new Protocol.SetBlendingHorDensityRequestEntity(
+        row,
+        column,
+        control_point_count,
+        control_point,
+        value
+      )
+    );
+  }
+
+  public async SetBlendingVerDensity(
+    row: number,
+    column: number,
+    control_point_count: number,
+    control_point: number,
+    value: number
+  ) {
+    return await this.doRpc<Protocol.NoneResponse>(
+      new Protocol.SetBlendingVerDensityRequestEntity(
+        row,
+        column,
+        control_point_count,
+        control_point,
+        value
+      )
+    );
+  }
+
+  public async ResetBlendingConfig() {
+    return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
+      new Protocol.ResetBlendingConfigRequestEntity()
+    );
+  }
+
+  public async SetBlendingOption(id: string, value: string) {
+    return await this.doRpc<Protocol.NoneResponse>(
+      new Protocol.SetBlendingOptionRequestEntity(id, value)
+    );
+  }
+
+  public async EnumBlendingScene() {
+    return await this.doRpc<Protocol.EnumBlendingSceneResponseEntity>(
+      new Protocol.EnumBlendingSceneRequestEntity()
+    );
+  }
+
+  public async ApplyBlendingScene(name: string) {
+    return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
+      new Protocol.ApplyBlendingSceneRequestEntity(name)
+    );
+  }
+
+  public async DeleteBlendingScene(name: string) {
+    return await this.doRpc<Protocol.RpcBlendingResponseEntity>(
+      new Protocol.DeleteBlendingSceneRequestEntity(name)
+    );
+  }
+
+  public async AddBlendingCtrlPoint(
+    type: string,
+    row: number,
+    column: number,
+    count: number
+  ) {
+    return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
+      new Protocol.AddBlendingCtrlPointRequestEntity(type, row, column, count)
+    );
+  }
+
+  public async DelBlendingCtrlPoint(
+    type: string,
+    row: number,
+    column: number,
+    count: number
+  ) {
+    return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
+      new Protocol.DelBlendingCtrlPointRequestEntity(type, row, column, count)
+    );
+  }
+
   public async setCloudServerSetting(
     cloud_server_address: string,
     cloud_server_verify_key: string,
@@ -1483,7 +1573,7 @@ export default class ClientConnection {
     }
     this.ws = null;
   }
-  public async getFileListFileManager(dir_path:string) {
+  public async getFileListFileManager(dir_path: string) {
     try {
       return await this.doRpc<Protocol.RpcFileManagerGetFileListResponse>(
         new Protocol.RpcFileManagerGetFileListRequest(dir_path)
@@ -1492,34 +1582,42 @@ export default class ClientConnection {
       console.error(e);
     }
   }
-  public async RenameFileManager(base_dir:string,file_name:string,new_file_name:string) {
+  public async RenameFileManager(
+    base_dir: string,
+    file_name: string,
+    new_file_name: string
+  ) {
     try {
       return await this.doRpc<Protocol.RpcFileManagerRenameResponse>(
-        new Protocol.RpcFileManagerRenameRequest(base_dir,file_name,new_file_name)
+        new Protocol.RpcFileManagerRenameRequest(
+          base_dir,
+          file_name,
+          new_file_name
+        )
       );
     } catch (e) {
       console.error(e);
     }
   }
-  public async DeleteFileManager(base_dir:string,file_name:string) {
+  public async DeleteFileManager(base_dir: string, file_name: string) {
     try {
       return await this.doRpc<Protocol.RpcFileManagerDeleteResponse>(
-        new Protocol.RpcFileManagerDeleteRequest(base_dir,file_name)
+        new Protocol.RpcFileManagerDeleteRequest(base_dir, file_name)
       );
     } catch (e) {
       console.error(e);
     }
   }
-  public async CreateDirectoryFileManager(base_dir:string,dir_name:string) {
+  public async CreateDirectoryFileManager(base_dir: string, dir_name: string) {
     try {
       return await this.doRpc<Protocol.RpcFileManagerCreateDirectoryResponse>(
-        new Protocol.RpcFileManagerCreateDirectoryRequest(base_dir,dir_name)
+        new Protocol.RpcFileManagerCreateDirectoryRequest(base_dir, dir_name)
       );
     } catch (e) {
       console.error(e);
     }
   }
-  public async CheckModeIndex(mode_index:number) {
+  public async CheckModeIndex(mode_index: number) {
     try {
       return await this.doRpc<Protocol.RpcCheckModeIndexResponseEntity>(
         new Protocol.RpcCheckModeIndexRequestEntity(mode_index)

src/components/FileManageDialog.vue

@@ -156,7 +156,7 @@
         </q-btn>
         <q-btn
           flat
-          v-if="!uploading &&!iswujie"
+          v-if="!uploading && !iswujie"
           no-caps
           icon="upload"
           :label="$t('upload file')"
@@ -192,7 +192,6 @@
               ($q.platform.is.ipad && $store.state.landspace ? '61' : '68') +
               'vh',
           }"
-          class="q-mb-md"
           v-show="!uploading"
           :rows="files"
           :columns="columns"
@@ -805,9 +804,9 @@ export default defineComponent({
         console.log(e);
       }
     };
-    let iswujie=ref(false)
+    let iswujie = ref(false);
     if ((window as any).$wujie) {
-      iswujie.value=true
+      iswujie.value = true;
     }
     // 后缀名限制
     // watch(
@@ -900,7 +899,7 @@ export default defineComponent({
           prompt: {
             model: "",
             isValid: (val: string) =>
-              !!val && val.trim().length > 0&& val.indexOf(".") != 0 ,
+              !!val && val.trim().length > 0 && val.indexOf(".") != 0,
             type: "text",
           },
           ok: {

src/components/FusionSettings/Debugging.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <q-list dense bordered separator>
+      <q-item clickable v-ripple v-for="(item, index) in data">
+        <q-item-section>
+          <DebuggingItem
+            :name="Object.keys(item)[0]"
+            :value="Object.values(item)[0]"
+          >
+          </DebuggingItem>
+        </q-item-section>
+      </q-item>
+      <q-item clickable v-ripple v-for="(item, index) in btn">
+        <q-item-section>
+          <div>
+            <q-btn
+              color="white"
+              text-color="black"
+              @click="send_btn(Object.keys(item)[0])"
+              :label="$t(btn_name(Object.keys(item)[0]))"
+            />
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  watch,
+  computed,
+  defineProps,
+  withDefaults,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { useStore } from "src/store";
+import { useI18n } from "vue-i18n";
+import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import GlobalData from "src/common/GlobalData";
+import DebuggingItem from "src/components/FusionSettings/DebuggingItem.vue";
+export default defineComponent({
+  name: "Debugging",
+  components: {
+    vue3ResizeDrag,
+    DebuggingItem,
+  },
+  setup() {
+
+    let set = GlobalData.getInstance().getCurrentClient();
+    let $store = useStore();
+    let $t = useI18n();
+    const data = computed(() => {
+      let array = [];
+      let tmp = JSON.parse($store.state.fusion_configuration).options;
+      for (let key in tmp) {
+        if (key.indexOf("@") != -1 && key.indexOf("@btn") == -1) {
+          array.push({ [key]: tmp[key] });
+        }
+      }
+      return array;
+    });
+    const btn = computed(() => {
+      let array = [];
+      let tmp = JSON.parse($store.state.fusion_configuration).options;
+      for (let key in tmp) {
+        if (key.indexOf("@btn") != -1) {
+          array.push({ [key]: tmp[key] });
+        }
+      }
+      return array;
+    });
+
+    const btn_name = (name: string): string => {
+      return name.split("@")[2];
+    };
+    const send_btn = (name: string) => {
+      set?.SetBlendingOption(name, "1");
+    };
+    return {
+      btn_name,
+      send_btn,
+      data,
+      btn,
+    };
+  },
+});
+</script>

src/components/FusionSettings/DebuggingItem.vue

@@ -0,0 +1,98 @@
+<template>
+  <div><span>{{ $t(show_name) }}</span> <q-checkbox v-model="val" @click="send" /></div>
+</template>
+
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  watch,
+  computed,
+  defineProps,
+  withDefaults,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import { useStore } from "src/store";
+import { useI18n } from "vue-i18n";
+import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import GlobalData from "src/common/GlobalData";
+export default defineComponent({
+  name: "DebuggingItem",
+  components: {
+    vue3ResizeDrag,
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    let set = GlobalData.getInstance().getCurrentClient();
+    let $store = useStore();
+    let $t = useI18n();
+    const val = ref(false)
+    const show_name = computed(() => {
+      let tmp=""
+      if(props.name.indexOf("@") != -1){
+        tmp=props.name.split("@")[1]
+      }else{
+        tmp=props.name
+      }
+      return tmp
+    })
+    val.value=props.value=="1"?true:false
+    const send = () => {
+      set?.SetBlendingOption(props.name, val.value ? "1" : "0");
+
+    }
+    const use_sessionStorage=()=>{
+      if(sessionStorage.Debugging){
+        let tmp=JSON.parse(sessionStorage.Debugging);
+        for (let index = 0;index < tmp.length; index++) {
+          if(Object.keys(tmp[index])[0]==props.name){
+            val.value=Object.values(tmp[index])[0]=="1"?true:false
+            break
+          }
+        }
+      }
+    }
+    onMounted(()=>{
+      use_sessionStorage()
+    })
+    onBeforeUnmount(() => {
+        let key=props.name
+        let value=val.value
+      if(sessionStorage.Debugging){
+        let tmp=JSON.parse(sessionStorage.Debugging);
+        let count=0;
+        for (let index = 0;index < tmp.length; index++) {
+          if(Object.keys(tmp[index])[0]==key){
+            tmp[index]={[key]:value}
+            break
+          }
+          count=index
+        }
+        if(count==tmp.length-1)tmp.push({[key]:value});
+        sessionStorage.Debugging = JSON.stringify(tmp);
+      }else{
+        sessionStorage.Debugging = JSON.stringify([{[key]:value}]);
+      }
+
+    });
+    return {
+      send,
+      val,
+      show_name,
+      ...props
+    }
+  }
+})
+</script>

src/components/FusionSettings/DensityCorrection.vue

@@ -1,97 +1,880 @@
 <template>
-    <div class="row">
+  <div class="row">
-        <div class="col-2 q-pa-lg"></div>
+    <div class="col-1"></div>
-        <div class="col-2 q-pa-lg"> </div>
+    <div class="col-10 q-pt-md">
-        <div class="col-2 q-pa-lg"> </div>
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
-        <div class="col-2 q-pa-lg"> </div>
+        <div style="position: absolute">
-        <div class="col-2 q-pa-lg"> </div>
+          <Vue3DraggableResizable v-show="now_v_h == 'vertical'"
-        <div class="col-2 q-pa-lg">
+            :class="[options_model_v == index ? 'action' : 'point']" v-for="(item, index) in value_v_point.length"
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
+            :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 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 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 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>
+          </Vue3DraggableResizable>
         </div>
-        <div class="col-2 q-pa-lg"> </div>
+      </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
-        </div>
-
-        
-
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg"> </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
-        </div>
-
-
-
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
-        </div>
-        <div class="col-2 q-pa-lg">
-            <!-- <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules /> -->
-        </div>
-
-
-
     </div>
+  </div>
+  <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="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 }" :disable="value_v_point_amount<=5" 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 }" :disable="value_h_point_amount<=5" 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>
+.action {
+  background-color: rgb(27, 180, 111);
+  border-radius: 50%;
+}
 
+.point {
+  background-color: rgb(186, 245, 245);
+  border-radius: 50%;
+}
 </style>
+
 <script lang="ts">
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive} from "vue";
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  defineExpose
+} 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";
+
 export default defineComponent({
-    name: "ComponentDensityCorrection",
+  name: "ComponentDensityCorrection",
-    setup() {
+  components: {
-        let $store = useStore();
+    Vue3DraggableResizable
-        let $t = useI18n();
+  },
-        const value=reactive([0,0,0,0,0,0,0,0,0,0,0]);
+  setup() {
-        let model = ref(null);
+    let set = GlobalData.getInstance().getCurrentClient();
-        let options = ref(['10', '20', '30', '40', '50']);
+    let $store = useStore();
-        return {
+    let $t = useI18n();
-            model,
+    const ste_status = ref(0);
-            options,
+    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
-            value
+    const configselsect = computed(() => {
-        };
+      return $store.state.selected_projector;
-    },
+    });
-});
+
+    //用于计算当前投影仪的索引
+    let serverconfig = JSON.parse($store.state.fusion_configuration);
+    const selectedprojector = computed(() => {
+      return (
+        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
+        $store.getters.GetTheCurrentlySelectedCamera[1]
+      );
+    });
+    const 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") {
+          o1[k] = {};
+          deepcopy(o1[k], o2[k]);
+        } else {
+          o1[k] = o2[k];
+        }
+      }
+    };
+
+    const use_server_config = () => {
+      value_h_point_amount.value = 5
+      value_v_point_amount.value = 5
+      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 = tmp.value_h_point_amount
+        value_v_point_amount.value = 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 = () => {
+      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) => {
+        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();
+        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);
+      },
+      { deep: true }
+    );
+
+
+
+    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")
+      }
+    }, { 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 {
+        set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
+      }
+      save_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")
+      }
+      save_set_cache()
+    }, { 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)
+      save_set_cache()
+    }
+
+    const dragStartHandle = ($event: any, index: number, type: string) => {
+      let obj_x = $event.x
+      let obj_y = $event.y
+      let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
+      if (type == '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 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, Number(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, Number(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, Number(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, Number(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);
+    }
+    defineExpose({
+      now_v_h,
+      options_model_v,
+      options_model_h
+    });
+    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,
+      reset,
+      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,
+      set_cache
+    }
+  }
+})
+
 </script>

src/components/FusionSettings/FourPointCalibration.vue

@@ -1,331 +1,378 @@
 <template>
-    <div class="row">
+  <div class="row">
-        <div class="col-2">
+    <div class="col-1"></div>
-            <q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" @focus="isactivearray[0] = false"
+    <div class="col-10 q-pt-md">
-                v-model="four[0].x" label="x" lazy-rules />
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
-            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false"
+        <div style="position: absolute">
-                v-model="four[0].y" label="y" lazy-rules />
+          <Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
-            <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
+            v-for="(item, index) in value_point.length" :initW="point.w"  :adsorbParent="false" :initH="point.h" :resizable="false"
-        </div>
+            v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
-        <div class="col-8">
+            @click="options_model = index" @dragging="dragStartHandle($event, index)">
-
+            <span>{{
-        </div>
+              index+ 1
-        <div class="col-2">
+            }}</span>
-            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
+          </Vue3DraggableResizable>
-                v-model="four[1].x" label="x" lazy-rules />
-            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[1] = false"
-                v-model="four[1].y" label="y" lazy-rules />
-            <q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
-        </div>
-
-        <div class="col-2"></div>
-        <div class="col-8">            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
-                <div style="position:absolute;">
-                    <vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
-                        @mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
-                        @moveHandler="moveHandler_1"><span>{{$t('point')}}1</span>
-                    </vue3ResizeDrag>
-                    <vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)"
-                        @mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="point2.x" :y="point2.y"
-                        :isResizable="false" @moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)"
-                        @mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="point3.x" :y="point3.y"
-                        :isResizable="false" @moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)"
-                        @mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
-                        :isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
-                </div>
-            </div></div>
-        <div class="col-2"></div>
-
-        <div class="col-2">
-            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
-                v-model="four[2].x" label="x" lazy-rules />
-            <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[2] = false"
-                v-model="four[2].y" label="y" lazy-rules />
-            <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
-        </div>
-        <div class="col-8">
-            <q-btn color="white"  @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
-        </div>
-        <div class="col-2">
-            <q-input filled type="number" class="q-pt-md" :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 color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
         </div>
+      </div>
     </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>
 </template>
 
 <style scoped>
+.action {
+  background-color: rgb(27, 180, 111);
+  border-radius: 50%;
+}
 
+.point {
+  background-color: rgb(186, 245, 245);
+  border-radius: 50%;
+}
 </style>
-<script lang="ts">
-import vue3ResizeDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
-import { dom } from 'quasar'
 
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted, reactive } from "vue";
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  defineExpose
+} 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 { number } from "@intlify/core-base";
 
 export default defineComponent({
-    name: "ComponentFourPointCalibration",
+  name: "ComponentDensityCorrection",
-    components: {
+  components: {
-        vue3ResizeDrag
+    Vue3DraggableResizable
-    },
+  },
-    setup() {
+  setup() {
-        let $store = useStore();
+    let set = GlobalData.getInstance().getCurrentClient();
-        let $t = useI18n();
+    let $store = useStore();
-        const setIndexProjector = () => {
+    let $t = useI18n();
-            console.log($store.state.selected_projector);
+    const ste_status = ref(0);
-        };
+    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
-        let set = GlobalData.getInstance().getCurrentClient();
+    const configselsect = computed(() => {
-        const for_1 = computed(() => { })
+      return $store.state.selected_projector;
-        let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
+    });
-        let defaultfour = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
-        let defaultfourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
-        let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
-        let div: any = ref(null);
-        let div2: any = ref(null);
-        let options = ref(['10', '20', '30', '40', '50']);
-        let Proportion = ref({ x: 0, y: 0 });
-        let point1 = reactive({ x: 0, y: 0 });
-        let point2 = ref({ x: 0, y: 0 });
-        let point3 = ref({ x: 0, y: 0 });
-        let point4 = ref({ x: 0, y: 0 });
-        const isshowarray = ref([true, true, true, true])
-        const isactivearray = ref([true, true, true, true])
-        const x1 = ref(0);
-        const y1 = ref(0);
-        const { offset } = dom
 
-        const save=()=>{
+    //用于计算当前投影仪的索引
+    let serverconfig = JSON.parse($store.state.fusion_configuration);
+    const selectedprojector = computed(() => {
+      return (
+        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
+        $store.getters.GetTheCurrentlySelectedCamera[1]
+      );
+    });
 
+    const value_point_amount = ref(5)
+
+
+    const deepcopy = (o1: any, o2: any) => {
+      for (let k in o2) {
+        if (typeof o2[k] === "object") {
+          o1[k] = {};
+          deepcopy(o1[k], o2[k]);
+        } else {
+          o1[k] = o2[k];
         }
+      }
+    };
 
-        const activeMouseDown = (index: number) => {
+    const use_server_config = () => {
-            isactivearray.value[index] = true
+      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
         }
-        const mouseUpHandler = (index: number) => {
+        value_point.value.push(tmp_point)
-            isactivearray.value[index] = false
+      }
-        }
+    }
-        onMounted(() => {
-            setpoa();
 
+    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()
+      }
+    }
+
+    const save_set_cache = () => {
+      let tmp = { value: value.value, value_point: value_point.value }
+      set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
+    }
+
+    watch(
+      () => configselsect,
+      (newVal, oldVal) => {
+        let tmp = JSON.parse($store.state.fusion_configuration);
+        let fortmp = null;
+        let i;
+        for (i of tmp.projectors) {
+          if (
+            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+          ) {
+            fortmp = JSON.parse(JSON.stringify(i));
+          }
+        }
+        ste_status.value = 1;
+        config = JSON.parse(JSON.stringify(fortmp));
+        use_server_config();
+        use_set_cache();
+        setTimeout(() => {
+          ste_status.value = 0;
+        }, 100);
+      },
+      { deep: true }
+    );
+
+
+
+    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 })
+
+    /**
+     * 分辨率和页面的比例
+     */
+    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,
         })
+      }
+      return tmp
+    })
 
-        const setpoa = () => {
+    const chang_point_amount = (val: number) => {
-            point1.x = 0
+      start_point()
-            point1.y = 0
+    }
 
-            x1.value = 0
+    const dragStartHandle = ($event: any, index: number) => {
-            y1.value = 0
+      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()
+    }
 
-            point2.value.x = div.value.offsetWidth - 25
+    const chang = (index: number, $event: any, type: string) => {
-            point2.value.y = 0
+      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))
 
-            point3.value.x = 0
+      save_set_cache()
-            point3.value.y = div.value.offsetHeight - 25
+    }
 
-            point4.value.x = div.value.offsetWidth - 25
+    /**
-            point4.value.y = div.value.offsetHeight - 25
+     * 将分辨率的坐标转换为 页面的坐标
+     * @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 }
+    }
 
 
-            fourpostion.value[0].x = 0
+    /**
-            fourpostion.value[0].y = 0
+     * 将页面的坐标转换为 分辨率的坐标
+     * @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 }
+    }
 
-            fourpostion.value[1].x = div.value.offsetWidth - 25
+    const start_point = () => {
-            fourpostion.value[1].y = 0
+      value.value = []
-
+      value_point.value = []
-            fourpostion.value[2].x = 0
+      for (let index = 0; index < config.point4.length; index++) {
-            fourpostion.value[2].y = div.value.offsetHeight - 25
+        let tmp: DensityCorrectionPoint = config.point4[index];
-
+        value.value.push(tmp)
-            fourpostion.value[3].x = div.value.offsetWidth - 25
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
-            fourpostion.value[3].y = div.value.offsetHeight - 25
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
-
+        let tmp_point: DensityCorrectionPoint = {
-            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
+          control_point: tmp.control_point,
-            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
+          x: x_y.x,
-            for (let index = 0; index < fourpostion.value.length; index++) {
+          y: x_y.y,
-                defaultfourpostion.value[index].x = fourpostion.value[index].x ;
+          def_x: def_x_f.x,
-                defaultfourpostion.value[index].y = fourpostion.value[index].y;
+          def_y: def_x_f.y
-                defaultfour.value[index].x=four.value[index].x
-                defaultfour.value[index].y=four.value[index].y
-            }
         }
-        watch(() => four.value[0], (newVal, oldVal) => {
+        value_point.value.push(tmp_point)
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
+      }
-            ///
+    }
-            if (!isactivearray.value[0]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                x1.value = x
-                y1.value = y
-                isshowarray.value[0] = false
-                isactivearray.value[0] = false
-                setTimeout(() => {
-                    isshowarray.value[0] = true
-                }, 100);
-                ///
-            }
-        }, { deep: true })
-        watch(() => four.value[1], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
-            ///
-            if (!isactivearray.value[1]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                point2.value.x = x
-                point2.value.y = y
-                isshowarray.value[1] = false
-                isactivearray.value[1] = false
-                setTimeout(() => {
-                    isshowarray.value[1] = true
-                }, 100);
-            }
-            ///
-        }, { deep: true })
-        watch(() => four.value[2], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
-            ///
-            if (!isactivearray.value[2]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
 
-                point3.value.x = x
+    /**
-                point3.value.y = y
+     * 创建空值 让dom先渲染
-                isshowarray.value[2] = false
+     */
-                setTimeout(() => {
+    const start = () => {
-                    isshowarray.value[2] = true
+      let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
-                }, 100);
+      value.value.push(tmp)
-            }
+      value_point.value.push(tmp)
-            ///
+    }
-        }, { deep: true })
+    start()
-        watch(() => four.value[3], (newVal, oldVal) => {
+    onMounted(() => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
+      Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
-            ///
+      Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
-            if (!isactivearray.value[3]) {
+      start_point()
-                let x = Math.ceil(newVal.x / Proportion.value.x);
+      start()
-                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
+      use_server_config()
+      if (
+        sessionStorage.FourPointCalibration &&
+        sessionStorage.FourPointCalibration.length > 0
+      ) {
+        set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
+        use_set_cache();
+      }
+      window.onresize = () => {
+        return (() => {
+          if (div != null) {
+            recalculate_coordinates()
+          }
+        })();
+      };
+    })
 
-                point4.value.x = x
+    onBeforeUnmount(() => {
-                point4.value.y = y
+      sessionStorage.FourPointCalibration = JSON.stringify(set_cache.value);
-                isshowarray.value[3] = false
+    });
-                setTimeout(() => {
-                    isshowarray.value[3] = true
-                }, 100);
-            }
-            ///
-        }, { deep: true })
 
-        ///
+    const reset = (index: number, send: boolean, type: string) => {
-        const reset = (index: number) => {
+      value.value[index].x = value.value[index].def_x
-            if (index == 0) {
+      value.value[index].y = value.value[index].def_y
-                console.log(x1.value + "," + y1.value)
+      // value_point.value[index].x = value_point.value[index].def_x
-                four.value[0].x = 0
+      // value_point.value[index].y = value_point.value[index].def_y
-                four.value[0].y = 1080
+      chang(index, value.value[index].def_y, type)
-                point1.x = 0
+      save_set_cache()
-                point1.y = 0
+    }
-                x1.value = 0
+    const send_value = (index: number, x: number, y: number) => {
-                y1.value = 0
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
-            }
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
-            if (index == 1) {
+      set?.setBlendingCorrection(row, col, 4, value_point.value.length, index + 1, Number(x), Number(y));
-                four.value[1].x = 1920
+    }
-                four.value[1].y = 1080
+    const resetall = () => {
-                fourpostion.value[1].x = div.value.offsetWidth - 25
+      for (let index = 0; index < value_point.value.length; index++) {
-                fourpostion.value[1].y = 0
+        reset(index, true, 'v')
-            }
+      }
-            if (index == 2) {
+    }
-                four.value[2].x = 0
+    const recalculate_coordinates = () => {
-                four.value[2].y = 0
+      try {
-                fourpostion.value[2].x = 0
+        Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
-                fourpostion.value[2].y = div.value.offsetHeight - 25
+        Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
-            }
+        max.value.x = div.value.offsetWidth
-            if (index == 3) {
+        max.value.y = div.value.offsetHeight
-                four.value[3].x = 1920
+        for (let index = 0; index < value.value.length; index++) {
-                four.value[3].y = 0
+          let x_y = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
-                fourpostion.value[3].x = div.value.offsetWidth - 25
+          let def_x_y = coordinate_transformation_value_to_xy(value.value[index].def_x, value.value[index].def_x)
-                fourpostion.value[3].y = div.value.offsetHeight - 25
+          value_point.value[index].x = x_y.x
-            }
+          value_point.value[index].y = x_y.y
-            isshowarray.value[index] = false
+          value_point.value[index].def_x = def_x_y.x
-            setTimeout(() => {
+          value_point.value[index].def_y = def_x_y.y
-                isshowarray.value[index] = true
-            }, 100);
         }
+      } catch (error) {
 
-        const resetall=()=>{
+      }
+    }
+    defineExpose({
+      options_model,
+    });
+    return {
+      resetall,
+      div,
+      max,
+      point,
+      options_model,
+      value,
+      value_point,
+      dragStartHandle,
+      chang,
+      reset,
+      value_point_amount,
+      chang_point_amount,
+      options
+    }
+  }
+})
 
-            for (let index = 0; index < fourpostion.value.length; index++) {
-                fourpostion.value[index].x=defaultfourpostion.value[index].x 
-                fourpostion.value[index].y=defaultfourpostion.value[index].y 
-                console.log("ok");
-                four.value[index].x=defaultfour.value[index].x
-                four.value[index].y=defaultfour.value[index].y
-
-                isshowarray.value[index] = false
-                setTimeout(() => {
-                isshowarray.value[index] = true
-                }, 100);
-            }
-        }
-
-        const moveHandler_1 = (data: any) => {
-            let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
-            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[0].y));
-
-            four.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
-            isactivearray.value[0] = true
-        }
-        const moveHandler_2 = (data: any) => {
-            //y0 x1920
-            let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + 1920);
-            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[1].y));
-            four.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
-            //console.log("x :"+x+" y:"+y)
-        }
-        const moveHandler_3 = (data: any) => {
-            let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x);
-            let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
-            four.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
-            console.log("x :" + x + " y:" + y)
-            //console.log("x :" + data.left + " y:" + (1370-data.top));
-        }
-        const moveHandler_4 = (data: any) => {
-            let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + 1920);
-            let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
-            four.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
-            //console.log("x :"+x+" y:"+y)
-        }
-        return {
-            div,
-            div2,
-            options,
-            fourpostion,
-            reset,
-            resetall,
-            moveHandler_1,
-            moveHandler_2,
-            moveHandler_3,
-            moveHandler_4,
-            four,
-            save,
-            point1,
-            point2,
-            point3,
-            point4,
-            x1,
-            y1,
-            isshowarray,
-            isactivearray,
-            activeMouseDown,
-            mouseUpHandler
-        };
-    },
-});
 </script>

src/components/FusionSettings/FusionLocale.vue

@@ -1,34 +1,25 @@
 <template>
   <div class="row">
     <div class="col-12">
-      <p class="text-center">{{$t('Set the fusion band width')}}</p>
+      <div style="height: 1rem"></div>
       <div class="row">
         <div class="col-12">
           <div class="row">
             <div class="col-4 offset-4">
               <div class="row">
-                <div class="col-6">
+                <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
-                    class="float-right"
-                    v-model="array2[selectedprojector][0].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input dense filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
-                    type="number"
-                    @focus="group = 0"
-                    v-model="array2[selectedprojector][0].value"
-                    :label="$t('upper fusion zone parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
-                        (val > -1 && val < 1080) || $t('Please enter 0-100'),
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
@@ -38,56 +29,40 @@
           <div class="row">
             <div class="col-6">
               <div class="row">
-                <div class="col-6">
+                <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
-                    class="float-right"
-                    v-model="array2[selectedprojector][1].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input dense filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
-                    type="number"
-                    @focus="group = 1"
-                    v-model="array2[selectedprojector][1].value"
-                    :label="$t('Left fusion Band Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
-                        (val > -1 && val < 1920) || $t('Please enter 0-100'),
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
             <div class="col-6">
               <div class="row">
-                <div class="col-6">
+                <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
-                    class="float-right"
-                    v-model="array2[selectedprojector][2].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input dense filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
-                    type="number"
-                    @focus="group = 2"
-                    v-model="array2[selectedprojector][2].value"
-                    :label="$t('Right fusion Band Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
-                        (val > -1 && val < 1920) || $t('Please enter 0-100'),
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
+                <div class="col-3"><span>{{ $t('Whether to operate synchronously') }}</span><q-checkbox
+                    v-model="auto_sync" /></div>
               </div>
             </div>
           </div>
@@ -96,92 +71,106 @@
           <div class="row">
             <div class="col-4 offset-4">
               <div class="row">
-                <div class="col-6">
+                <div class="col-3">
-                  <q-toggle
+                  <q-toggle class="float-right" v-model="array[3].isshow" label="" />
-                    class="float-right"
-                    v-model="array2[selectedprojector][3].isshow"
-                    label=""
-                  />
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input dense filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
-                    filled
+                    @focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
-                    type="number"
-                    @focus="group = 3"
-                    v-model="array2[selectedprojector][3].value"
-                    :label="$t('Lower fusion Zone Parameters')"
-                    lazy-rules
                     :rules="[
                       (val) =>
-                        (val !== null && val !== '') || $t('Please enter a number'),
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
                       (val) =>
-                        (val > -1 && val < 1080) || $t('Please enter 0-100'),
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
-                    ]"
+                    ]" />
-                  />
                 </div>
               </div>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
-    <div v-if="!(group == 4) && array2[selectedprojector][group].isshow" class="col-4 offset-4">
+    <div class="col-12" v-if="group != 4">
-      <p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
+      <p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p>
       <div style="display: flex; justify-content: space-evenly">
         <div>
-          <q-slider
+          <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
-            v-model="array[group].alpha"
+            vertical reverse label-always />
-            :min="0.0"
+          <div> <q-input dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
-            @change="chang('alpha')"
+              @update:model-value="chang('alpha')" v-model="array[group].alpha" lazy-rules :rules="[
-            :max="1"
+                (val) =>
-            :step="0.01"
+                  (val !== null && val !== '') ||
-            color="green"
+                  $t('Please enter a number'),
-            vertical
+                (val) =>
-            reverse
+                  (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
-            label-always
+              ]" />
-          />
+            <p style="text-align: center;">Alpha</p>
-          <p class="text-center">alpha</p>
+            <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('alpha')" text-color="black"
+              :label="$t('reset')" />
+          </div>
         </div>
 
         <div>
-          <q-slider
+          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green" vertical
-            v-model="array[group].p"
+            reverse label-always />
-            :min="0"
+          <div> <q-input dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-            @change="chang('p')"
+              @update:model-value="chang('p')" v-model="array[group].p" lazy-rules :rules="[
-            :max="2.5"
+                (val) =>
-            :step="0.01"
+                  (val !== null && val !== '') ||
-            color="green"
+                  $t('Please enter a number'),
-            vertical
+                (val) =>
-            reverse
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
-            label-always
+              ]" />
-          />
+            <p style="text-align: center;">Power</p>
-          <p class="text-center">p</p>
+            <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('p')" text-color="black"
+              :label="$t('reset')" />
+          </div>
         </div>
 
         <div>
-          <q-slider
+          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
-            v-model="array[group].gamma"
+            vertical reverse label-always />
-            :min="0"
+          <div>
-            @change="chang('gamma')"
+            <q-input :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-            :max="2.5"
+              @update:model-value="chang('gamma')" v-model="array[group].gamma" lazy-rules :rules="[
-            :step="0.01"
+                (val) =>
-            color="green"
+                  (val !== null && val !== '') ||
-            vertical
+                  $t('Please enter a number'),
-            reverse
+                (val) =>
-            label-always
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
-          />
+              ]" />
-          <p class="text-center">gamma</p>
+            <p style="text-align: center;">Gamma</p>
+            <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('gamma')" text-color="black"
+              :label="$t('reset')" />
+          </div>
         </div>
       </div>
     </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>
 </template>
 
 <style>
 .boder {
   border: 2px solid #0000;
 }
+
+.btn_bottom {
+  margin-bottom: 0.5rem;
+}
+
+.btn_top {
+  margin-top: 0.3rem;
+}
+
+p {
+  margin: 0;
+}
 </style>
 
 <script lang="ts">
@@ -192,12 +181,15 @@ import {
   computed,
   defineProps,
   withDefaults,
+  onBeforeUnmount,
   reactive,
+  onMounted,
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import { number } from "@intlify/core-base";
+import { switchCase } from "@babel/types";
 
 export default defineComponent({
   name: "ComponentFusionLocale",
@@ -205,196 +197,411 @@ export default defineComponent({
     let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
-    const age = ref(0);
-    const standard = ref(0);
     const group = ref(4);
-    const EnableBlending=ref(false);
+    const set_cache: any = ref([]);
-    let array: any = ref([
+    const enablefusion = ref(false);
-      { alpha: 0, p: 0, gamma: 0 },
+    let array: any = reactive([
-      { alpha: 0, p: 0, gamma: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
-      { alpha: 0, p: 0, gamma: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
+      { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
     ]);
-    let array2: any = reactive([[
+    const auto_sync = ref(false)
-      { isshow: false, value: 0 },
+    const auxiliary_line = ref(false)
-      { isshow: false, value: 0 },
+    const send_auxiliary_line = (val: boolean) => {
-      { isshow: false, value: 0 },
+      set?.SetBlendingOption("blending_grids_assistant_lines", val ? "1" : "0");
-      { isshow: false, value: 0 },
+    }
-    ],[
+    //正确的 索引编号
-      { isshow: false, value: 0 },
+    let arr = [1, 0, 2, 3];
-      { isshow: false, value: 0 },
+    let serverconfig = JSON.parse($store.state.fusion_configuration);
-      { isshow: false, value: 0 },
+    const selectedprojector = computed(() => {
-      { isshow: false, value: 0 },
+      return (
-    ]]);
+        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
-    const selectedprojector=computed(()=>{
+        $store.getters.GetTheCurrentlySelectedCamera[1]
-      return $store.state.selected_projector=="0/0"?0:1
+      );
-    })
-    const options = ref([
-      {
-        label: "上融合带参数",
-        value: 0,
-      },
-      {
-        label: "左融合带参数",
-        value: 1,
-      },
-      {
-        label: "右融合带参数",
-        value: 2,
-      },
-      {
-        label: "下融合带参数",
-        value: 3,
-      },
-    ]);
-    const accept = ref(false);
-    const text = ref("");
-    const model = computed({
-      get() {
-        return $store.state.selected_projector;
-      },
-      set(newValue) {
-        $store.commit("setSelectedProjector", newValue);
-      },
     });
+    const reset = (type: string) => {
+      switch (type) {
+        case 'gamma':
+          array[group.value].gamma = Number(config.params[group.value].def_gamma.toFixed(2));
+          break;
+        case 'p':
+          array[group.value].p = Number(config.params[group.value].def_power.toFixed(2));
+          break;
+        case 'alpha':
+          array[group.value].alpha = Number(config.params[group.value].def_alpha.toFixed(2));
+          break;
+        default:
+          break;
+      }
+      chang(type)
+    }
+    const ste_status = ref(0);
+    const use_set_cache = () => {
+      if (set_cache.value[selectedprojector.value] != null) {
+        let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
+        deepcopy(array, tmp);
+      }
+    };
+    const deepcopy = (o1: any, o2: any) => {
+      for (let k in o2) {
+        if (typeof o2[k] === "object") {
+          o1[k] = {};
+          deepcopy(o1[k], o2[k]);
+        } else {
+          o1[k] = o2[k];
+        }
+      }
+    };
+    const save_set_cache = () => {
+      set_cache.value[selectedprojector.value] = JSON.stringify(array);
+    };
+    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
+    const configselsect = computed(() => {
+      return $store.state.selected_projector;
+    });
+    watch(
+      () => configselsect,
+      (newVal, oldVal) => {
+        let tmp = JSON.parse($store.state.fusion_configuration);
+        let fortmp = null;
+        let i;
+        for (i of tmp.projectors) {
+          if (
+            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+          ) {
+            fortmp = JSON.parse(JSON.stringify(i));
+          }
+        }
+        ste_status.value = 1;
+
+        config = JSON.parse(JSON.stringify(fortmp));
+        use_server_config();
+        use_set_cache();
+        setTimeout(() => {
+          ste_status.value = 0;
+        }, 100);
+        setnowindex();
+      },
+      { deep: true }
+    );
+
     const chang = (type: string) => {
+      if (ste_status.value == 1) return
       if (type == "alpha") {
-        if($store.state.EnableBlending)set?.setBlendingAlphaParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingAlphaParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          group.value,
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array.value[group.value].alpha
+            arr[group.value],
-        );
+            Number(array[group.value].alpha)
+          );
       }
       if (type == "p") {
-        if($store.state.EnableBlending)set?.setBlendingPowerParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingPowerParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          group.value,
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array.value[group.value].p
+            arr[group.value],
-        );
+            Number(array[group.value].p)
+          );
       }
-      if($store.state.EnableBlending)if (type == "gamma") {
+      if (type == "gamma") {
-        set?.setBlendingGammaParam(
+        if ($store.state.enablefusion)
-          $store.getters.GetTheCurrentlySelectedCamera[0],
+          set?.setBlendingGammaParam(
-          $store.getters.GetTheCurrentlySelectedCamera[1],
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-          group.value,
+            $store.getters.GetTheCurrentlySelectedCamera[1],
-          array.value[group.value].gamma
+            arr[group.value],
-        );
+            Number(array[group.value].gamma)
+          );
       }
-      //console.log("giao")
+      save_set_cache();
     };
-     //0：左融合带，1：上融合带，2：右融合带，3：下融合带
+    //左上右下
-    watch(
+    const setnowindex = () => {
-      () => array2[0][0],
+      let sum = 0;
-      (newVal, oldVal) => {
+      let indexx = 4;
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
+      for (let index = 0; index < array.length - 1; index++) {
-        if(!array2[0][0].isshow){
+        if (array[index].isshow && Number(array[index].value) > 0) {
-          array2[0][0].value=0
+          sum++;
+          indexx = index;
         }
+      }
+      if (sum == 1) {
+        group.value = indexx;
+      } else {
+        group.value = 4;
+      }
+    };
+
+    const setconfig = (config: any) => {
+      let tmp = JSON.parse(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;
+      config = JSON.parse(JSON.stringify(fortmp));
+      for (let index = 0; index < array.length - 1; index++) {
+        array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
+        array[arr[index]].alpha = Number(config.params[index].alpha.toFixed(2));
+        array[arr[index]].p = Number(config.params[index].power.toFixed(2));
+        array[arr[index]].isshow = config.params[index].enable;
+        array[arr[index]].value = Number(config.params[index].size);
+      }
+
+      setTimeout(() => {
+        ste_status.value = 0;
+      }, 100);
+      setnowindex();
+    };
+    const startconfig = () => {
+      for (let index = 0; index < array.length - 1; index++) {
+        array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
+        array[arr[index]].alpha = Number(config.params[index].alpha.toFixed(2));
+        array[arr[index]].p = Number(config.params[index].power.toFixed(2));
+        array[arr[index]].isshow = config.params[index].enable;
+        array[arr[index]].value = Number(config.params[index].size);
+      }
+      let tmp = JSON.parse($store.state.fusion_configuration).options;
+      auxiliary_line.value=tmp.blending_grids_assistant_lines=="1"
+      if (sessionStorage.FusionLocale) set_cache.value = JSON.parse(sessionStorage.FusionLocale);
+      use_set_cache();
+      setnowindex();
+    };
+    const use_server_config = () => {
+      for (let index = 0; index < array.length - 1; index++) {
+        array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
+        array[arr[index]].alpha = Number(config.params[index].alpha.toFixed(2));
+        array[arr[index]].p = Number(config.params[index].power.toFixed(2));
+        array[arr[index]].isshow = config.params[index].enable;
+        array[arr[index]].value = Number(config.params[index].size);
+      }
+    };
+    onMounted(() => {
+      ste_status.value = 1;
+      startconfig();
+      setTimeout(() => {
+        ste_status.value = 0;
+      }, 100);
+    }),
+      onBeforeUnmount(() => {
+        sessionStorage.FusionLocale = JSON.stringify(set_cache.value);
+      });
+
+    watch(
+      () => array[0].value,
+      (newVal, oldVal) => {
+        if ($store.state.enablefusion && ste_status.value == 0)
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            1,
+            array[0].isshow,
+            Number(array[0].value)
+          );
+
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
-      () => array2[0][1],
+      () => array[1].value,
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
+        if ($store.state.enablefusion && ste_status.value == 0)
-        if(!array2[0][1].isshow){
+          set?.SetBlendingOverlap(
-          array2[0][1].value=0
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-        }
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            0,
+            array[1].isshow,
+            Number(array[1].value)
+          );
+        if (auto_sync.value) left_right_auto_add(newVal);
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
-      () => array2[0][2],
+      () => array[2].value,
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
+        if ($store.state.enablefusion && ste_status.value == 0)
-        if(!array2[0][2].isshow){
+          set?.SetBlendingOverlap(
-          array2[0][2].value=0
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-        }
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            2,
+            array[2].isshow,
+            Number(array[2].value)
+          );
+        if (auto_sync.value) left_right_auto_add(newVal);
+        save_set_cache();
       },
       { deep: true }
     );
     watch(
-      () => array2[0][3],
+      () => array[3].value,
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
+        if ($store.state.enablefusion && ste_status.value == 0)
-        if(!array2[0][3].isshow){
+          set?.SetBlendingOverlap(
-          array2[0][3].value=0
+            $store.getters.GetTheCurrentlySelectedCamera[0],
-        }
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            3,
+            array[3].isshow,
+            Number(array[3].value)
+          );
+        save_set_cache();
       },
       { deep: true }
     );
 
-///
-
-watch(
-      () => array2[1][0],
-      (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[1][0].isshow,Number(array2[1][0].value));
-        if(!array2[1][0].isshow){
-          array2[1][0].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[1][1],
-      (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[1][1].isshow,Number(array2[1][2].value));
-        if(!array2[1][1].isshow){
-          array2[1][1].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[1][2],
-      (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[1][2].isshow,Number(array2[1][2].value));
-        if(!array2[1][2].isshow){
-          array2[1][2].value=0
-        }
-      },
-      { deep: true }
-    );
-    watch(
-      () => array2[1][3],
-      (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[1][3].isshow,Number(array2[1][3].value));
-        if(!array2[1][3].isshow){
-          array2[1][3].value=0
-        }
-      },
-      { deep: true }
-    );
-///
 
     watch(
-      () => EnableBlending,
+      () => array[0].isshow,
       (newVal, oldVal) => {
-        $store.commit('setEnableBlending',newVal.value);
+        if ($store.state.enablefusion && ste_status.value == 0)
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            1,
+            array[0].isshow,
+            Number(array[0].value)
+          );
+        save_set_cache();
+      },
+      { deep: true }
+    );
+    watch(
+      () => array[1].isshow,
+      (newVal, oldVal) => {
+        if ($store.state.enablefusion && ste_status.value == 0)
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            0,
+            array[1].isshow,
+            Number(array[1].value)
+          );
+        if (auto_sync.value) left_right_auto_add(-1);
+        save_set_cache();
+      },
+      { deep: true }
+    );
+    watch(
+      () => array[2].isshow,
+      (newVal, oldVal) => {
+        if ($store.state.enablefusion && ste_status.value == 0)
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            2,
+            array[2].isshow,
+            Number(array[2].value)
+          );
+        if (auto_sync.value) left_right_auto_add(-1);
+        save_set_cache();
+      },
+      { deep: true }
+    );
+    watch(
+      () => array[3].isshow,
+      (newVal, oldVal) => {
+        if ($store.state.enablefusion && ste_status.value == 0)
+          set?.SetBlendingOverlap(
+            $store.getters.GetTheCurrentlySelectedCamera[0],
+            $store.getters.GetTheCurrentlySelectedCamera[1],
+            3,
+            array[3].isshow,
+            Number(array[3].value)
+          );
+        save_set_cache();
+      },
+      { deep: true }
+    );
+
+
+    watch(
+      () => enablefusion,
+      (newVal, oldVal) => {
+        $store.commit("setenablefusion", newVal.value);
         set?.EnableBlending(newVal.value);
-      },{ deep: true }
+      },
+      { deep: true }
     );
-    const changEnableBlending=()=>{
+    const changenablefusion = () => {
-      $store.commit('setEnableBlending',EnableBlending.value);
+      $store.commit("setenablefusion", enablefusion.value);
+    };
+    const left_right_auto_add = (difference: number) => {
+
+      let tmpobjall = JSON.parse($store.state.fusion_configuration)
+      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0) {
+
+        let tmp = set_cache.value[1] == null ? tmpobjall.projectors[1].params : JSON.parse(set_cache.value[1]);
+        let set_cache_tmp: any = []
+        if (tmp[1].hasOwnProperty("power")) {
+          for (let index = 0; index < 4; index++) {
+            let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
+            set_cache_tmp.push(tmpobj)
+          }
+        } else {
+          set_cache_tmp = tmp
+        }
+        if (ste_status.value == 0) {
+          //set_cache_tmp[1].value = Number(set_cache_tmp[1].value) + difference
+
+          if (difference == -1) {
+            set_cache_tmp[1].isshow = array[2].isshow
+          } else {
+            set_cache_tmp[1].value = difference
+          }
+          set?.SetBlendingOverlap(0, 1, 0, set_cache_tmp[1].isshow, Number(set_cache_tmp[1].value));
+          set_cache.value[1] = JSON.stringify(set_cache_tmp);
+        }
+      }
+      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1) {
+
+        let tmp = set_cache.value[0] == null ? tmpobjall.projectors[0].params : JSON.parse(set_cache.value[0]);
+        let set_cache_tmp: any = []
+        if (tmp[0].hasOwnProperty("power")) {
+          for (let index = 0; index < 4; index++) {
+            let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
+            set_cache_tmp.push(tmpobj)
+          }
+        } else {
+          set_cache_tmp = tmp
+        }
+        if (ste_status.value == 0) {
+          //set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
+
+          if (difference == -1) {
+            set_cache_tmp[2].isshow = array[1].isshow
+          } else {
+            set_cache_tmp[2].value = difference
+          }
+          set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow, Number(set_cache_tmp[2].value));
+          set_cache.value[0] = JSON.stringify(set_cache_tmp);
+        }
+      }
     }
     return {
-      model,
+      send_auxiliary_line,
-      age,
-      accept,
-      standard,
-      options,
       group,
-      text,
       array,
       chang,
-      EnableBlending,
+      enablefusion,
-      array2,
+      changenablefusion,
-      changEnableBlending,
+      selectedprojector,
-      selectedprojector
+      set_cache,
+      auxiliary_line,
+      reset,
+      auto_sync,
+      config
     };
   },
 });

src/components/FusionSettings/GridSettings.vue

@@ -1,86 +1,236 @@
 <template>
-    <div class="row">
+  <div class="row">
+    <div class="col-12">
+      <div class="row">
         <div class="col-12">
-            <div class="row">
+          <div class="row">
-                <div class="col-12">
+            <div class="col-4"></div>
-                    <div class="row">
+            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]"
-                        <div class="col-4"></div>
+                @update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
-                        <div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]" :options="options" :dense="true"
+                :label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
-                                :options-dense="true" label="单元行数" /> </div><q-checkbox v-model="RowsColumns[0]" />
+              v-model="RowsColumns[0]" />
-                    </div>
+          </div>
-                </div>
-                <div class="col-12">
-                    <div class="row">
-                        <div class="col-4"></div>
-                        <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]" :options="options" :dense="true"
-                                :options-dense="true" label="单元列数" /> </div><q-checkbox v-model="RowsColumns[1]" />
-                    </div>
-                </div>
-                <div class="col-12">
-                    <div class="row" style="min-height: 40px;">
-                        <div class="col-4"></div>
-                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>网格颜色</span></div><div class="col-8" @click="isshowhex=true;index=0" :style="{'background-color':color[0]}"></div></div></div>
-                    </div>
-                </div>
-                <div class="col-12">
-                    <div class="row" style="min-height: 40px;">
-                        <div class="col-4"></div>
-                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>背景颜色</span></div><div class="col-8"  @click="isshowhex=true;index=1" :style="{'background-color':color[1]}"></div></div></div>
-                    </div>
-                </div>
-                <div class="col-12">
-                    <div class="row" style="min-height: 40px;">
-                        <div class="col-4"></div>
-                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心线颜色</span></div><div class="col-8" @click="isshowhex=true;index=2" :style="{'background-color':color[2]}"></div></div></div><q-checkbox v-model="RowsColumns[2]" />
-                    </div>
-                </div>
-                <div class="col-12">
-                    <div class="row" style="min-height: 40px;">
-                        <div class="col-4"></div>
-                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心圆颜色</span></div><div class="col-8"  @click="isshowhex=true;index=3" :style="{'background-color':color[3]}"></div></div></div><q-checkbox v-model="RowsColumns[3]" />
-                    </div>
-                </div>
-            </div>
         </div>
-        <div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs  no-footer v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="isshowhex=false" class=" q-pt-sm" text-color="black" label="提交" /></div>
+        <div class="col-12">
+          <div class="row">
+            <div class="col-4"></div>
+            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]"
+                @update:model-value="update_row_col(1, model[1])" :options="options" :dense="true" :options-dense="true"
+                :label="$t('wall col')" /> </div><q-checkbox @update:model-value="send_off(1)"
+              v-model="RowsColumns[1]" />
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row">
+            <div class="col-4"></div>
+            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[2]"
+                @update:model-value="update_row_col(2, model[2])" :options="line_width_options" :dense="true" :options-dense="true"
+                :label="$t('line width')" /> </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row" style="min-height: 40px;">
+            <div class="col-4"></div>
+            <div class="col-4 q-pt-sm">
+              <q-item>
+                <q-item-section avatar class="head_1">
+                  {{ $t("line color") }}
+                </q-item-section>
+                <q-item-section>
+                  <q-input v-model="color[0]" :rules="['anyColor']">
+                    <template v-slot:append>
+                      <q-icon name="colorize" class="cursor-pointer" @click="index = 0">
+                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                          <q-color v-model="color[0]" @change="submit" />
+                        </q-popup-proxy>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </q-item-section>
+              </q-item>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row" style="min-height: 40px;">
+            <div class="col-4"></div>
+            <div class="col-4 q-pt-sm">
+              <q-item>
+                <q-item-section avatar class="head_1">
+                  {{ $t("background color") }}
+                </q-item-section>
+                <q-item-section>
+                  <q-input v-model="color[1]" :rules="['anyColor']">
+                    <template v-slot:append>
+                      <q-icon name="colorize" class="cursor-pointer" @click="index = 1">
+                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                          <q-color v-model="color[1]" @change="submit" />
+                        </q-popup-proxy>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </q-item-section>
+              </q-item>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row" style="min-height: 40px;">
+            <div class="col-4"></div>
+            <div class="col-4 q-pt-sm">
+              <q-item>
+                <q-item-section avatar class="head_1">
+                  {{ $t("center circle color") }}
+                </q-item-section>
+                <q-item-section>
+                  <q-input v-model="color[2]" :rules="['anyColor']">
+                    <template v-slot:append>
+                      <q-icon name="colorize" class="cursor-pointer" @click="index = 2">
+                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                          <q-color v-model="color[2]" @change="submit" />
+                        </q-popup-proxy>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </q-item-section>
+              </q-item>
+            </div>
+            <div class="col-2"><q-checkbox class="q-pt-md" @update:model-value="send_off(2)" v-model="RowsColumns[2]" /></div>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
-
+.border {
+  border: 1px solid;
+}
 </style>
 
 <script lang="ts">
 import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
-import { defineComponent, ref,reactive } from "vue";
+import { defineComponent, ref, reactive, onBeforeUnmount } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
-
+import GlobalData from "src/common/GlobalData";
+import { json } from "body-parser";
 
 export default defineComponent({
-    name: "ComponentGridSettings",
+  name: "ComponentGridSettings",
-    components:{
+  components: {
-        vue3ResizeDrag
+    vue3ResizeDrag
-    },
+  },
-    setup() {
+  setup() {
-        let $store = useStore();
+    let set = GlobalData.getInstance().getCurrentClient();
-        let $t = useI18n();
+    let $store = useStore();
-        const RowsColumns=reactive([false,false,false,false]);
+    let $t = useI18n();
-        const hex=ref("")
+    const RowsColumns = reactive([false, false, false, false]);
-        const isshowhex=ref(false);
+    const index = ref(0);
-        const index=ref(0);
+    const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
-        const color=reactive(["#000","#000","#000","#000"]);
+    let model = reactive([20, 40, 20]);
-        let model = reactive([10,10]);
+    let options = ref([10, 20, 30, 40, 50]);
-        let options = ref(['10', '20', '30', '40', '50']);
+    let line_width_options = ref([2,4,6,8,10, 20, 30, 40, 50]);
-        return {
+    const submit = () => {
-            model,
+      switch (index.value) {
-            options,
+        case 0:
-            hex,
+          set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
-            RowsColumns,
+          break;
-            isshowhex,
+        case 1:
-            index,
+          set?.SetBlendingOption("blending_grids_background_color", color[index.value]);
-            color,
+          break;
-        };
+        case 2:
-    },
+          set?.SetBlendingOption("blending_grids_ellipse_line_color",color[index.value]);
+          break;
+        case 3:
+          //set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
+          break;
+        default:
+          break;
+      }
+    }
+    const update_row_col = (type: number, value: number) => {
+      switch (type) {
+        case 0:
+          set?.SetBlendingOption("blending_grids_row", value + "");
+          break;
+        case 1:
+          set?.SetBlendingOption("blending_grids_column", value + "");
+          break;
+        case 2:
+          set?.SetBlendingOption("blending_grids_line_width", value + "");
+          break;
+        default:
+          break;
+      }
+    }
+    const send_off = (type: number) => {
+      setTimeout(() => {
+        switch (type) {
+          case 0:
+            set?.SetBlendingOption("blending_grids_show_row", RowsColumns[type] + "");
+            break;
+          case 1:
+            if (!RowsColumns[1]) RowsColumns[2] = false; RowsColumns[3] = false
+            set?.SetBlendingOption("blending_grids_show_column", RowsColumns[type] + "");
+            break;
+          case 2:
+            set?.SetBlendingOption("blending_grids_show_ellipse", RowsColumns[type] + "");
+            break;
+          case 3:
+
+            break;
+          default:
+            break;
+        }
+      }, 100);
+    }
+    const use_server_config = () => {
+      let server_conf = JSON.parse($store.state.fusion_configuration).options
+      model[0] = server_conf.blending_grids_row ?? 20;
+      model[1] = server_conf.blending_grids_column ?? 40;
+      model[2] = server_conf.blending_grids_line_width ?? 6;
+      color[0] = server_conf.blending_grids_line_color ?? "#ffffff"
+      color[1] = server_conf.blending_grids_background_color ?? "#7f7f7f"
+      color[2] = server_conf.blending_grids_ellipse_line_color ?? "#0000ff"
+      RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
+      RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
+      RowsColumns[2] = server_conf.blending_grids_show_ellipse === "false" ? false : true
+    }
+    use_server_config()
+
+    onBeforeUnmount(() => {
+      set_sessionStorage()
+    });
+    const set_sessionStorage = () => {
+      let tmp = { RowsColumns: RowsColumns, color: color, model: model }
+      sessionStorage.GridSettings = JSON.stringify(tmp)
+    }
+    const get_sessionStorage = () => {
+      let tmp = JSON.parse(sessionStorage.GridSettings)
+      for (let index = 0; index < tmp.RowsColumns.length; index++) {
+        RowsColumns[index] = tmp.RowsColumns[index];
+      }
+      for (let index = 0; index < tmp.color.length; index++) {
+        color[index] = tmp.color[index];
+      }
+      for (let index = 0; index < tmp.model.length; index++) {
+        model[index] = tmp.model[index];
+      }
+    }
+    if (sessionStorage.GridSettings) get_sessionStorage()
+    return {
+      line_width_options,
+      model,
+      options,
+      submit,
+      RowsColumns,
+      index,
+      color,
+      update_row_col,
+      send_off
+    };
+  },
 });
 </script>

src/components/FusionSettings/SurfaceCorrection.vue

@@ -1,487 +1,531 @@
 <template>
-    <div class="row">
+  <div class="row">
-        <div class="col-4">
+    <div class="col-1"></div>
-            <div class="row">
+    <div class="col-10 q-pt-md">
-                <div class="col-6"></div>
+      <div ref="div" style="width: 100%; background-color: #646464; height: 40vh">
-                <div class="col-3"><q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false"
+        <div style="position: absolute">
-                        :dense="true" v-model="nine[0].x" label="x" lazy-rules />
+          <Vue3DraggableResizable :class="[options_model == index ? 'action' : 'point']"
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false" :dense="true"
+            v-for="(item, index) in value_point.length" :initW="point.w" :initH="point.h" :resizable="false"
-                        v-model="nine[0].y" label="y" lazy-rules />
+            v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
-                    <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
+            @click="options_model = index" @dragging="dragStartHandle($event, index)">
-                </div>
+            <span>{{
-            </div>
+              index+ 1
-        </div>
+            }}</span>
-        <div class="col-4">
+          </Vue3DraggableResizable>
-
-            <div class="row">
-                <div class="col-5"></div>
-                <div class="col-3"> <q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false"
-                        :dense="true" v-model="nine[1].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false" :dense="true"
-                        v-model="nine[1].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
-                </div>
-
-                <div class="col-3" style="margin-left: 5px;"> <q-input filled type="number" class="q-pt-md"
-                        :dense="true" v-model="nine[4].x" label="x" @focus="isactivearray[4] = false" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" :dense="true" v-model="nine[4].y" label="y"
-                        @focus="isactivearray[4] = false" lazy-rules />
-                    <q-btn color="white" @click="reset(4)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-        </div>
-        <div class="col-4">
-            <div class="row">
-                <div class="col-4"></div>
-                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[2] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[2].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[2] = false" :dense="true"
-                        v-model="nine[2].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-
-        </div>
-        <div class="col-2">
-            <div class="row" style="margin-top: 10vh;">
-                <div class="col-6"></div>
-                <div class="col-6"> <q-input filled type="number" @focus="isactivearray[3] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[3].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[3] = false" :dense="true"
-                        v-model="nine[3].y" label="y" lazy-rules />
-                    <q-btn color="white"  @click="reset(3)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-
-        </div>
-        <div class="col-8">
-            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
-                <div style="position:absolute;">
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
-                        :y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
-                        @moveHandler="moveHandler_1"><span>{{ $t('point') }}1</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
-                        :y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
-                        @moveHandler="moveHandler_2"><span>{{ $t('point') }}2</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
-                        :y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
-                        @moveHandler="moveHandler_3"><span>{{ $t('point') }}3</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
-                        :y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
-                        @moveHandler="moveHandler_4"><span>{{ $t('point') }}4</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
-                        :y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
-                        @moveHandler="moveHandler_5"><span>{{ $t('point') }}5</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
-                        :y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
-                        @moveHandler="moveHandler_6"><span>{{ $t('point') }}6</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
-                        :y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
-                        @moveHandler="moveHandler_7"><span>{{ $t('point') }}7</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
-                        :y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
-                        @moveHandler="moveHandler_8"><span>{{ $t('point') }}8</span> </vue3ResizeDrag>
-                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
-                        :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
-                        @moveHandler="moveHandler_9"><span>{{ $t('point') }}9</span> </vue3ResizeDrag>
-                </div>
-
-            </div>
-        </div>
-        <div class="col-2">
-            <div class="row" style="margin-top: 10vh;">
-                <div class="col-6"> <q-input filled type="number" @focus="isactivearray[5] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[5].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[5] = false" :dense="true"
-                        v-model="nine[5].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(5)" text-color="black" :label="$t('reset')" />
-                </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')" /><q-btn color="white" @click="save" text-color="black"
-                        :label="$t('save config')" /></div>
-                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[6].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
-                        v-model="nine[6].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(6)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-
-        </div>
-        <div class="col-4">
-            <div class="row">
-                <div class="col-6"></div>
-                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[7] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[7].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[7] = false" :dense="true"
-                        v-model="nine[7].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(7)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-
-        </div>
-        <div class="col-4">
-            <div class="row">
-                <div class="col-4"></div>
-                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[8] = false" class="q-pt-md"
-                        :dense="true" v-model="nine[8].x" label="x" lazy-rules />
-                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[8] = false" :dense="true"
-                        v-model="nine[8].y" label="y" lazy-rules />
-                    <q-btn color="white" @click="reset(8)" text-color="black" :label="$t('reset')" />
-                </div>
-            </div>
-
         </div>
+      </div>
     </div>
+  </div>
+  <div>
+    <div class="row" v-show="false">
+      <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 }" :disable="value_point_amount<=9"  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>
+.action {
+  background-color: rgb(27, 180, 111);
+  border-radius: 50%;
+}
 
+.point {
+  background-color: rgb(186, 245, 245);
+  border-radius: 50%;
+}
 </style>
+
 <script lang="ts">
-import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
+import {
-import GlobalData from "src/common/GlobalData";
+  defineComponent,
-import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted } from "vue";
+  onMounted,
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  defineExpose
+} 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: {
+  components: {
-        vue3ResizeDrag
+    Vue3DraggableResizable
-    },
+  },
-    setup() {
+  setup() {
-        let $store = useStore();
+    let set = GlobalData.getInstance().getCurrentClient();
-        let $t = useI18n();
+    let $store = useStore();
-        const setIndexProjector = () => {
+    let $t = useI18n();
-            console.log($store.state.selected_projector);
+    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(() => {
-        let centor = ref({ x: 0, y: 0 });
+      return $store.state.selected_projector;
-        const div = ref();
+    });
-        let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
-        let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
-        ///
-        const activeMouseDown = (index: number) => {
-            isactivearray.value[index] = true
-        }
-        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 = 1080 - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
 
-            nine.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    //用于计算当前投影仪的索引
-            nine.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+    let serverconfig = JSON.parse($store.state.fusion_configuration);
-        }
+    const selectedprojector = computed(() => {
-        const moveHandler_2 = (data: any) => {
+      return (
-            let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
+        $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col +
-            let y = 1080 - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
+        $store.getters.GetTheCurrentlySelectedCamera[1]
+      );
+    });
 
-            nine.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    const value_point_amount = ref(9)
-            nine.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+    const del_dialog = ref(false)
-        }
+    // const options_value_point_amount = computed(() => {
-        const moveHandler_3 = (data: any) => {
+    //   return Object.keys(config.multi_curved_surface)
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
+    // })
-            let y = 1080 - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
 
-            nine.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    const options_value_point_amount = ref(<string[]>[])
-            nine.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
-        }
-        const moveHandler_4 = (data: any) => {
-            let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
-            let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
 
-            nine.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    const deepcopy = (o1: any, o2: any) => {
-            nine.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+      for (let k in o2) {
-        }
+        if (typeof o2[k] === "object") {
-        const moveHandler_5 = (data: any) => {
+          o1[k] = {};
-            let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
+          deepcopy(o1[k], o2[k]);
-            let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
+        } else {
+          o1[k] = o2[k];
 
-            nine.value[4].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[4].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
         }
-        const moveHandler_6 = (data: any) => {
+      }
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
+    };
-            let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
 
-            nine.value[5].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    const use_server_config = () => {
-            nine.value[5].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+      value_point_amount.value=9
+      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
         }
-        const moveHandler_7 = (data: any) => {
+        value_point.value.push(tmp_point)
-            let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x);
+      }
-            let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));
+    }
 
-            nine.value[6].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
+    const use_set_cache = () => {
-            nine.value[6].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+      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,
+      (newVal, oldVal) => {
+        let tmp = JSON.parse($store.state.fusion_configuration);
+        let fortmp = null;
+        let i;
+        for (i of tmp.projectors) {
+          if (
+            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+          ) {
+            fortmp = JSON.parse(JSON.stringify(i));
+          }
         }
-        const moveHandler_8 = (data: any) => {
+        ste_status.value = 1;
-            let x = 960 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
+        config = JSON.parse(JSON.stringify(fortmp));
-            let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;
+        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 }
+    );
 
-            nine.value[7].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[7].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
-        }
-        const moveHandler_9 = (data: any) => {
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
-            let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));
 
-            nine.value[8].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
-        }
-        onMounted(() => {
-            startpostion();
 
+    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}`)
+      save_set_cache()
+    }, { 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 = () => {
+      }
-            ninepostion.value[0].x = 0
+      return tmp
-            ninepostion.value[0].y = 0
+    })
-
-            ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
-            ninepostion.value[1].y = 0
-
-            ninepostion.value[2].x = div.value.offsetWidth - 25
-            ninepostion.value[2].y = 0
-
-            ninepostion.value[3].x = 0
-            ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
-
-            ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
-            ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
-
-            ninepostion.value[5].x = div.value.offsetWidth - 25
-            ninepostion.value[5].y = div.value.offsetHeight / 2
-
-            ninepostion.value[6].x = 0
-            ninepostion.value[6].y = div.value.offsetHeight - 25
-
-            ninepostion.value[7].x = div.value.offsetWidth / 2 - 8
-            ninepostion.value[7].y = div.value.offsetHeight - 25
-
-            ninepostion.value[8].x = div.value.offsetWidth - 25
-            ninepostion.value[8].y = div.value.offsetHeight - 25
-
-            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
-            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
-
-            centor.value.x = 2160 / (div.value.offsetWidth + 25)
-            centor.value.y = 3840 / (div.value.offsetHeight + 25)
-
-            for (let index = 0; index < defaultninepostion.value.length; index++) {
-                defaultninepostion.value[index].x = ninepostion.value[index].x;
-                defaultninepostion.value[index].y = ninepostion.value[index].y;
-                defaultnine.value[index].x = nine.value[index].x
-                defaultnine.value[index].y = nine.value[index].y
-            }
 
 
+    /**
+     * 将分辨率的坐标转换为 页面的坐标
+     * @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)
-        const reset = (index: number) => {
+      }
-            if (index == 0 || index == -1) {
+    }
-                nine.value[0].x = 0
-                nine.value[0].y = 1080
-                ninepostion.value[0].x = 0
-                ninepostion.value[0].y = 0
-            }
-            if (index == 1 || index == -1) {
-                nine.value[1].x = 960
-                nine.value[1].y = 1080
-                ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
-                ninepostion.value[1].y = 0
-            }
-            if (index == 2 || index == -1) {
-                nine.value[2].x = 1920
-                nine.value[2].y = 1080
-                ninepostion.value[2].x = div.value.offsetWidth - 25
-                ninepostion.value[2].y = 0
-            }
-            if (index == 3 || index == -1) {
-                nine.value[3].x = 0
-                nine.value[3].y = 540
-                ninepostion.value[3].x = 0
-                ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
-            }
-            if (index == 4 || index == -1) {
-                nine.value[4].x = 960
-                nine.value[4].y = 540
-                ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
-                ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
-            }
-            if (index == 5 || index == -1) {
-                nine.value[5].x = 1920
-                nine.value[5].y = 540
 
-                ninepostion.value[5].x = div.value.offsetWidth - 25
-                ninepostion.value[5].y = div.value.offsetHeight / 2
-            }
-            if (index == 6 || index == -1) {
-                nine.value[6].x = 0
-                nine.value[6].y = 0
 
-                ninepostion.value[6].x = 0
+    const start = () => {
-                ninepostion.value[6].y = div.value.offsetHeight - 25
+      let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
-            }
+      value.value.push(tmp)
-            if (index == 7 || index == -1) {
+      value_point.value.push(tmp)
-                nine.value[7].x = 960
+    }
-                nine.value[7].y = 0
+    start()
-                ninepostion.value[7].x = div.value.offsetWidth / 2
+    onMounted(() => {
-                ninepostion.value[7].y = div.value.offsetHeight - 25
+      Proportion.value.x = config.width / (div.value.offsetWidth - point.value.w)
-            }
+      Proportion.value.y = config.height / (div.value.offsetHeight - point.value.h)
-            if (index == 8 || index == -1) {
+      start_point(9)
-                nine.value[8].x = 1920
+      start()
-                nine.value[8].y = 0
+      use_server_config()
+      if (
+        sessionStorage.SurfaceCorrection &&
+        sessionStorage.SurfaceCorrection.length > 0
+      ) {
+        set_cache.value = JSON.parse(sessionStorage.SurfaceCorrection);
+        use_set_cache();
+      }
+      options_value_point_amount.value = Object.keys(config.multi_curved_surface)
+      window.onresize = () => {
+        return (() => {
+          if (div != null) {
+            recalculate_coordinates()
+          }
+        })();
+      };
+    })
 
-                ninepostion.value[8].x = div.value.offsetWidth - 25
+    onBeforeUnmount(() => {
-                ninepostion.value[8].y = div.value.offsetHeight - 25
+      sessionStorage.SurfaceCorrection = JSON.stringify(set_cache.value);
-            }
+    });
-            isshowarray.value[index] = false
+
-            setTimeout(() => {
+    const reset = (index: number, send: boolean, type: string) => {
-                isshowarray.value[index] = true
+      value.value[index].x = value.value[index].def_x
-            }, 100);
+      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 < 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_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
         }
-        const resetall = () => {
+      } catch (error) {
-            for (let index = 0; index < nine.value.length; index++) {
 
-                ninepostion.value[index].x = defaultninepostion.value[index].x;
+      }
-                ninepostion.value[index].y = defaultninepostion.value[index].y;
+    }
-                nine.value[index].x = defaultnine.value[index].x
+    const add_control_points = (amount: number) => {
-                nine.value[index].y = defaultnine.value[index].y
+      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?.AddBlendingCtrlPoint('9', row, col, amount).then((res) => {
-                isshowarray.value[index] = false
+        if (res == null || typeof (res) == "undefined") return
-                setTimeout(() => {
+        let tmp = JSON.parse(res?.config);
-                    isshowarray.value[index] = true
+        let fortmp = null;
-                }, 100);
+        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;
-        watch(() => nine.value[0], (newVal, oldVal) => {
+        tmpconfig = JSON.parse(JSON.stringify(fortmp));
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
+        config = JSON.parse(JSON.stringify(fortmp));
-            ///
+        options_value_point_amount.value = []
-            if (!isactivearray.value[0]) {
+        for (let key in tmpconfig.multi_curved_surface) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
+          options_value_point_amount.value.push(key)
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(0, x, y)
-            }
-            ///
-        }, { deep: true })
-        watch(() => nine.value[1], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
-            ///
-            if (!isactivearray.value[1]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(1, x, y)
-            }
-            ///
-        }, { deep: true })
-        watch(() => nine.value[2], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[2]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(2, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[3], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[3]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(3, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[4], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[4]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(4, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[5], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[5]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(5, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[6], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[6]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(6, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[7], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[7]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(7, x, y)
-            }
-        }, { deep: true })
-        watch(() => nine.value[8], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
-            if (!isactivearray.value[8]) {
-                let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
-                setdianposin(8, x, y)
-            }
-        }, { deep: true })
-        ///
-        let model = ref(null);
-        let options = ref(['10', '20', '30', '40', '50']);
-        let set = GlobalData.getInstance().getCurrentClient();
-        const setdianposin = (index: number, x: number, y: number) => {
-            ninepostion.value[index].x = x
-            ninepostion.value[index].y = y
-            isshowarray.value[index] = false
-            isactivearray.value[index] = false
-            setTimeout(() => {
-                isshowarray.value[index] = true
-            }, 100);
-
-
-
         }
-        const save = () => {
+        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)
         }
-        return {
+      });
-            model,
+    }
-            options,
+    const del_control_points = (amount: number) => {
-            save,
+      let tmp=amount
-            nine,
+      if (amount <= 9) return
-            moveHandler_1,
+      let cardinality = Math.sqrt(amount)
-            moveHandler_2,
+      amount = (cardinality + -1) ** 2
-            moveHandler_3,
+      let tmpconfig: any = null
-            moveHandler_4,
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
-            moveHandler_5,
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
-            moveHandler_6,
+
-            moveHandler_7,
+      set?.DelBlendingCtrlPoint('9', row, col, Number(tmp)).then((res) => {
-            moveHandler_8,
+        if (res == null || typeof (res) == "undefined") return
-            moveHandler_9,
+        let tmp = JSON.parse(res?.config);
-            div,
+        let fortmp = null;
-            resetall,
+        let i;
-            ninepostion,
+        for (i of tmp.projectors) {
-            reset,
+          if (
-            isshowarray,
+            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
-            isactivearray,
+            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
-            activeMouseDown
+          ) {
-        };
+            fortmp = JSON.parse(JSON.stringify(i));
-    },
+          }
-});
+        }
+        ste_status.value = 1;
+        tmpconfig = JSON.parse(JSON.stringify(fortmp));
+        config = 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)
+        }
+        value_point_amount.value = 9
+        amount=9
+        $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)
+        }
+
+      });
+    }
+    defineExpose({
+      options_model,
+    });
+    return {
+      resetall,
+      div,
+      max,
+      point,
+      options_model,
+      value,
+      value_point,
+      dragStartHandle,
+      chang,
+      options,
+      reset,
+      options_value_point_amount,
+      value_point_amount,
+      chang_point_amount,
+      del_dialog,
+      add_control_points,
+      del_control_points
+    }
+  }
+})
+
 </script>

src/components/FusionSettingsDialog.vue

@@ -1,18 +1,16 @@
 <template>
-  <q-dialog
+  <q-dialog persistent v-model="show_dialog" @keydown="
-    persistent
+    (evt: any) => {
-    v-model="show_dialog"
+      if (evt.keyCode == 27) {
-    @keydown="
+        show_dialog = false;
-      (evt:any) => {
-        if (evt.keyCode == 27) {
-          show_dialog = false;
-        }
       }
-    "
+      if (evt.keyCode == 17) {
-  >
+        record_times++
-    <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
+      }
+    }
+  ">
+    <q-card class="" style="max-width: 90vw;padding: 0;">
       <q-form>
-        <!-- @submit="onSubmit" -->
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
             <div class="col-auto text-h6">
@@ -20,42 +18,37 @@
             </div>
 
             <q-space />
-            <q-btn flat round icon="close" color="red" v-close-popup>
+            <q-btn size="sm" dense flat round icon="close" color="red" @click="clear()" v-close-popup>
               <q-tooltip>
                 {{ $t("close") }}
               </q-tooltip>
             </q-btn>
-            <div></div>
           </div>
         </q-card-section>
 
         <q-separator />
         <!-- height: 80vh -->
-        <q-card-section class="scroll" style="width: 90vw">
+        <q-card-section class="scroll" style="width: 60vw;padding: 0;">
-          <div class="row" style="border: 1px solid;text-align: center;">
+          <div class="row" style="border: 1px solid #b0bec5; text-align: center">
-            <div class="col-3" style="border-right: 1px solid;">
+            <div class="col-2" style="border-right: 1px solid #b0bec5">
               <p class="text-center">{{ $t("Projector") }}</p>
-              <projector-item
+              <!-- row 在前col在后 -->
-                class="w-100"
+              <div v-for="(item, index_row) in config.row">
-                :llabel="$t('Projector') + '1'"
+                <projector-item v-for="(item, index_col) in config.col" class="w-100" :llabel="
-                :lvalue="'0/0'"
+                  $t('Projector') + (index_row * config.col + index_col + 1)
-              ></projector-item>
+                " :lvalue="index_row + '/' + index_col"
-              <projector-item
+                  @click="currently_selected_projector(index_row + '-' + index_col)"></projector-item>
-                class="w-100"
+              </div>
-                :llabel="$t('Projector') + '2'"
+
-                :lvalue="'0/1'"
-              ></projector-item>
               <div class="col-12" style="text-align: center">
-                {{$t('Whether to enable mixing')}}<q-checkbox v-model="EnableBlending" />
+                {{
+                  $t("Whether to enable integration")
+                }}<q-checkbox v-model="EnableBlending" />
               </div>
             </div>
-            <div class="col-9">
+            <div class="col-10">
               <div class="q-ta-md">
-                <q-btn-toggle
+                <q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
-                  :disable="!$store.state.EnableBlending"
-                  no-caps
-                  v-model="options"
-                  toggle-color="primary"
                   :options="[
                     { label: $t('FusionLocale'), value: 'FusionLocale' },
                     {
@@ -71,11 +64,13 @@
                       value: 'DensityCorrection',
                     },
                     { label: $t('GridSettings'), value: 'GridSettings' },
-                  ]"
+                  ]" />
-                />
+                <q-btn-toggle v-show="isdebug" no-caps v-model="options" toggle-color="primary" :options="[
+                  { label: $t('debugging'), value: 'Debugging' }
+                ]" />
               </div>
               <div style="min-height: 72vh">
-                <component :is="options" />
+                <component ref="child" :is="options" />
               </div>
             </div>
           </div>
@@ -84,16 +79,94 @@
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn
+          <span>{{ $t("disable blending params") }}</span>
-            flat
+          <q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
-            :label="$t('Cancel')"
+            @click="send_disable_blending_params" />
-            no-caps
+          <span>{{ $t("show blending grids") }}</span>
-            color="primary"
+          <q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
-            v-close-popup
+            @click="send_show_blending_grids" />
-          />
+          <div class="q-space" data-v-39efcd1f=""></div>
+          <div class="q-space" data-v-39efcd1f=""></div>
+          <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
+          <div class="q-space" data-v-39efcd1f=""></div>
+          <q-btn flat :label="$t('Select saved configuration')" no-caps color="primary"
+            @click="select_configuration = true; get_scenes()" />
+          <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup
+            @click="$store.commit('setSelectedProjector', '0/0');" />
+          <q-btn flat :label="$t('save config')" no-caps color="primary" @click="save" />
         </q-card-actions>
       </q-form>
     </q-card>
+
+    <q-dialog v-model="medium">
+      <q-card style="width: 700px; max-width: 80vw;">
+        <q-card-section>
+          <div class="text-h6">{{ $t('Whether to save the configuration') }}</div>
+        </q-card-section>
+        <q-card-section class="q-pt-none">
+          <q-select filled :model-value="save_cover_name" use-input hide-selected fill-input input-debounce="0"
+            :options="plan_list_op" @filter="filterFn" @input-value="setModel">
+            <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps">
+                <q-item-section>
+                  <q-item-label v-html="opt" />
+                </q-item-section>
+                <q-item-section side>
+                  <q-icon name="clear" @click="del_scenes(opt)"></q-icon>
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </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('save')" @click="saveconfig" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+
+    <q-dialog v-model="select_configuration">
+      <q-card style="width: 700px; max-width: 80vw;">
+        <q-card-section>
+          <div class="text-h6">{{ $t('read saved configuration') }}</div>
+        </q-card-section>
+        <q-card-section class="q-pt-none">
+          <q-select filled v-model="select_configuration_name" :options="plan_list" :label="$t('please choose')">
+            <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+              <q-item v-bind="itemProps">
+                <q-item-section>
+                  <q-item-label v-html="opt" />
+                </q-item-section>
+                <q-item-section side>
+                  <q-icon name="clear" @click="del_scenes(opt)"></q-icon>
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </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('apply')" @click="apply_the_selected_configuration" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <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('Whether to delete') + name_to_be_deleted }}
+        </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="dialog_del_scenes" color="primary" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
   </q-dialog>
 </template>
 
@@ -115,8 +188,7 @@ import {
   watch,
   computed,
   onMounted,
-  onBeforeUnmount,
+  onBeforeMount,
-  nextTick,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar, copyToClipboard } from "quasar";
@@ -132,6 +204,7 @@ import FourPointCalibration from "src/components/FusionSettings/FourPointCalibra
 import GridSettings from "src/components/FusionSettings/GridSettings.vue";
 import SurfaceCorrection from "src/components/FusionSettings/SurfaceCorrection.vue";
 import DensityCorrection from "src/components/FusionSettings/DensityCorrection.vue";
+import Debugging from "src/components/FusionSettings/Debugging.vue";
 
 export default defineComponent({
   name: "ComponentFusionSettingsDialog",
@@ -142,6 +215,7 @@ export default defineComponent({
     GridSettings,
     SurfaceCorrection,
     DensityCorrection,
+    Debugging
   },
   setup() {
     let set = GlobalData.getInstance().getCurrentClient();
@@ -149,14 +223,102 @@ export default defineComponent({
     let $q = useQuasar();
     let $t = useI18n();
     let show_dialog = ref(false);
-    const target_language = ref("zh-CN");
+    const save_name = ref("")
-    const text = ref("Projector");
     const showDialog = async () => {
       show_dialog.value = true;
     };
+    const select_configuration = ref(false)
+    const del_dialog = ref(false)
+    const select_configuration_name = ref("")
+    const send_disable_blending_params = () => {
+      set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
+    };
+    const child :any = ref(null);
+    const send_show_blending_grids = () => {
+      let tmp = ""
+        switch (optionsstr.value) {
+          case 'FusionLocale':
+            tmp = '0'
+            break;
+          case 'FourPointCalibration':
+            tmp = '4'
+            break;
+          case 'SurfaceCorrection':
+            tmp = '9'
+            break;
+          case 'DensityCorrection':
+            if(child.value!.now_v_h=='vertical'){
+              tmp = 'ver_density'
+            }else{
+              tmp = 'hor_density'
+            }
+
+            break;
+          default:
+            break;
+        }
+      set?.SetBlendingOption("blending_grids_select_ui", tmp)
+      set?.SetBlendingOption('blending_grids_select_projector', now_selsect_projector.value);
+      set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
+
+      switch (optionsstr.value) {
+          case 'FusionLocale':
+
+            break;
+          case 'FourPointCalibration':
+          set?.SetBlendingOption("blending_grids_select_point", `4:${child.value!.options_model+1}`)
+            break;
+          case 'SurfaceCorrection':
+          set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model+1}`)
+            break;
+          case 'DensityCorrection':
+            console.log(child.value!.now_v_h)
+            if(child.value!.now_v_h=='vertical'){
+              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`)
+            }else{
+              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`)
+            }
+            break;
+          default:
+            break;
+        }
+
+    };
+    const resetall = () => {
+      set?.ResetBlendingConfig().then((res) => {
+        let tmp = JSON.parse(res ? res.config : "");
+        EnableBlending.value = tmp.enable;
+        $store.commit("setEnablefusion", tmp.enable);
+        config.value.col = tmp.col;
+        config.value.row = tmp.row;
+        $store.commit("setfusion_configuration", res?.config);
+      });
+      let tmp = options.value
+      options.value = ""
+      $store.commit("setSelectedProjector", "0/0");
+      setTimeout(() => {
+        clear_sessionStorage()
+        options.value = tmp
+      }, 300);
+    }
+    const clear_sessionStorage = () => {
+      sessionStorage.removeItem("FusionLocale");
+      sessionStorage.removeItem("SurfaceCorrection");
+      sessionStorage.removeItem("DensityCorrection");
+      sessionStorage.removeItem("FourPointCalibration");
+      sessionStorage.removeItem("GridSettings");
+      sessionStorage.removeItem("Debugging");
+    }
+
+    const config = ref({ col: 0, row: 0 });
     const EnableBlending = ref(false);
     let optionsstr = ref();
     optionsstr.value = "FusionLocale";
+    const disable_blending_params_id = ref("blending@disable_blending_params");
+    const disable_blending_params = ref(false);
+    const show_blending_grids_id = ref("blending_grids_show");
+    const show_blending_grids = ref(false);
+    const medium = ref(false);
     const options = computed({
       get() {
         return optionsstr.value;
@@ -168,18 +330,197 @@ export default defineComponent({
     watch(
       () => EnableBlending,
       (newVal, oldVal) => {
-        $store.commit("setEnableBlending", newVal.value);
+        $store.commit("setEnablefusion", newVal.value);
         set?.EnableBlending(newVal.value);
       },
       { deep: true }
     );
-    let data = ref({});
+
+    watch(() => optionsstr,
+      (newVal) => {
+        let tmp = ""
+        switch (newVal.value) {
+          case 'FusionLocale':
+            tmp = "blending"
+            break;
+          case 'FourPointCalibration':
+            tmp = '4'
+            break;
+          case 'SurfaceCorrection':
+            tmp = '9'
+            break;
+          case 'DensityCorrection':
+            tmp = 'hor_density'
+            break;
+          default:
+            break;
+        }
+		if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
+      },
+      { deep: true })
+
+
+
+    const save = () => {
+      medium.value = true
+      //读取场景
+      get_scenes()
+    };
+    const getconfig = () => {
+      try {
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          $store.commit("setEnablefusion", tmp.enable);
+          $store.commit("setfusion_configuration", res?.config);
+        });
+      } catch (error) { }
+    };
+    const clear = () => {
+      record_times.value = 0
+      show_blending_grids.value = false;
+      send_show_blending_grids();
+      $store.commit("setSelectedProjector", "0/0");
+      setTimeout(() => {
+        clear_sessionStorage()
+      }, 500);
+      getconfig()
+      options.value = "FusionLocale"
+    };
+
+
+    const get_scenes = () => {
+      set?.EnumBlendingScene().then((res) => {
+        if (res == null || res.scenes.length == 0) return
+        plan_list.splice(0, plan_list.length);
+        for (let index = 0; index < res.scenes.length; index++) {
+          plan_list[index] = (res.scenes[index]);
+        }
+      })
+    }
+
+    onMounted(() => {
+      setTimeout(() => {
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          let local_options = [
+            [disable_blending_params_id, disable_blending_params],
+            [show_blending_grids_id, show_blending_grids]
+          ];
+          let k: any;
+          for (k in local_options) {
+            let local_opt = local_options[k];
+            let opt = tmp.options[(<any>local_opt[0].value)];
+            if (opt) {
+              local_opt[1].value = ("0" == opt || "false" == opt.toLowerCase() ? false : true);
+            }
+          }
+          EnableBlending.value = tmp.enable;
+          $store.commit("setEnablefusion", tmp.enable);
+          config.value.col = tmp.col;
+          config.value.row = tmp.row;
+          $store.commit("setfusion_configuration", res?.config);
+
+        });
+        get_scenes()
+        set?.SetBlendingOption("blending_grids_select_ui", "blending")
+      }, 1000);
+    });
+    const save_cover_name = ref("")
+    const plan_list = [
+      ''
+    ]
+    const apply_the_selected_configuration = () => {
+      set?.ApplyBlendingScene(select_configuration_name.value).then((res) => {
+        let tmp = JSON.parse(res ? res.config : "{}");
+        EnableBlending.value = tmp.enable;
+        $store.commit("setEnablefusion", tmp.enable);
+        config.value.col = tmp.col;
+        config.value.row = tmp.row;
+        $store.commit("setfusion_configuration", res?.config);
+      });
+
+      let tmp = options.value
+      options.value = ""
+      $store.commit("setSelectedProjector", "0/0");
+      setTimeout(() => {
+        clear_sessionStorage()
+        options.value = tmp
+      }, 800);
+      getconfig()
+    }
+    const plan_list_op = ref(plan_list)
+    const filterFn = (val: any, update: any, abort: any) => {
+      update(() => {
+        const needle = val.toLocaleLowerCase()
+        plan_list_op.value = plan_list.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
+      })
+    }
+    const record_times = ref(0)
+    const setModel = (val: string) => {
+      save_cover_name.value = val
+    }
+
+    const saveconfig = () => {
+      set?.SaveBlendingConfig(save_cover_name.value);
+    }
+
+    const isdebug = computed(() => {
+      try {
+        let tmp = JSON.parse($store.state.fusion_configuration)
+        return record_times.value > 2
+      } catch (error) {
+
+      }
+
+    })
+    const name_to_be_deleted = ref("");
+    const del_scenes = (name: string) => {
+      del_dialog.value = true;
+      name_to_be_deleted.value = name;
+    }
+    const dialog_del_scenes = () => {
+      set?.DeleteBlendingScene(name_to_be_deleted.value);
+      plan_list.splice(plan_list.findIndex(item => item === name_to_be_deleted.value), 1)
+    }
+    const now_selsect_projector=ref("0-0")
+    const currently_selected_projector = (value: string) => {
+      set?.SetBlendingOption('blending_grids_select_projector', value);
+      now_selsect_projector.value=value
+    }
     return {
+      currently_selected_projector,
+      name_to_be_deleted,
+      dialog_del_scenes,
+      get_scenes,
+      del_scenes,
+      filterFn,
+      setModel,
+      send_disable_blending_params,
+      disable_blending_params,
+      send_show_blending_grids,
+      show_blending_grids,
+      clear,
       show_dialog,
       options,
       copyToClipboard,
       showDialog,
       EnableBlending,
+      config,
+      save,
+      resetall,
+      medium,
+      save_name,
+      save_cover_name,
+      plan_list,
+      select_configuration,
+      select_configuration_name,
+      apply_the_selected_configuration,
+      plan_list_op,
+      record_times,
+      saveconfig,
+      isdebug,
+      del_dialog,
+      child
     };
   },
 });

src/components/SystemSettingDialog.vue

@@ -61,10 +61,11 @@
           />
           <q-tab
             v-if="
-              $store.state.advanced_debug&&!$store.state.custom_defines.function_fusion ||
+              $store.state.advanced_debug ||
-              /*!$store.state.custom_defines.is_custom_isv */ (!$store.state
+              /*!$store.state.custom_defines.is_custom_isv */
-                .custom_defines.function_output_board &&
+              (!$store.state.custom_defines.function_output_board &&
-                $store.state.isLedPlayer()) &&!$store.state.custom_defines.function_fusion
+                $store.state.isLedPlayer()) ||
+              $store.state.custom_defines.function_fusion
             "
             name="graphics"
             no-caps
@@ -76,17 +77,6 @@
             "
             :disable="loading"
           />
-          <q-tab
-          v-if="$store.state.custom_defines.function_fusion &&
-                $store.state.isLedPlayer()"
-            name="graphics"
-            no-caps
-            icon="img:new_icon/graphics_setting.png"
-            :label="
-               $t('output setting')
-            "
-            :disable="loading"
-          />
 
           <q-tab
             name="timing_task"
@@ -428,7 +418,10 @@
                       </q-item-section>
                     </q-item>
                     <q-item
-                      v-if="!$store.state.custom_defines.function_output_board ||$store.state.custom_defines.function_fusion"
+                      v-if="
+                        !$store.state.custom_defines.function_output_board ||
+                        $store.state.custom_defines.function_fusion
+                      "
                     >
                       <q-item-section avatar class="width_5_2_2"
                         >{{ $t("output type") }}:</q-item-section
@@ -473,9 +466,10 @@
                     </q-item>
                     <q-item
                       v-if="
-                        !$store.state.custom_defines.function_output_board &&
+                        (!$store.state.custom_defines.function_output_board &&
-                        device_resolution_type.toUpperCase() == 'EDID'||$store.state.custom_defines.function_fusion&&
+                          device_resolution_type.toUpperCase() == 'EDID') ||
-                        device_resolution_type.toUpperCase() == 'EDID'
+                        ($store.state.custom_defines.function_fusion &&
+                          device_resolution_type.toUpperCase() == 'EDID')
                       "
                     >
                       <q-item-section avatar class="width_5_2_2"
@@ -492,9 +486,10 @@
                     </q-item>
                     <q-item
                       v-if="
-                        !$store.state.custom_defines.function_output_board &&
+                        (!$store.state.custom_defines.function_output_board &&
-                        device_resolution_type.toUpperCase() == 'CVT'||$store.state.custom_defines.function_fusion&&
+                          device_resolution_type.toUpperCase() == 'CVT') ||
-                        device_resolution_type.toUpperCase() == 'CVT'
+                        ($store.state.custom_defines.function_fusion &&
+                          device_resolution_type.toUpperCase() == 'CVT')
                       "
                     >
                       <q-item-section avatar class="width_5_2_2"
@@ -511,9 +506,10 @@
                     </q-item>
                     <q-item
                       v-if="
-                        !$store.state.custom_defines.function_output_board &&
+                        (!$store.state.custom_defines.function_output_board &&
-                        device_resolution_type.toUpperCase() == 'CUSTOM'||$store.state.custom_defines.function_fusion&&
+                          device_resolution_type.toUpperCase() == 'CUSTOM') ||
-                        device_resolution_type.toUpperCase() == 'CUSTOM'
+                        ($store.state.custom_defines.function_fusion &&
+                          device_resolution_type.toUpperCase() == 'CUSTOM')
                       "
                     >
                       <q-item-section avatar class="width_5_2_2"
@@ -827,7 +823,8 @@
             class="_panel"
             v-if="
               $store.state.custom_defines.function_output_board ||
-              $store.state.advanced_debug ||$store.state.custom_defines.function_fusion
+              $store.state.advanced_debug ||
+              $store.state.custom_defines.function_fusion
             "
           >
             <q-card class="fit">

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;
+}

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;
+}

src/entities/WSProtocol.ts

@@ -521,6 +521,33 @@ export namespace Protocol {
     public static get kSaveBlendingConfig() {
       return Commands.PROTOCOL_PREFIX + "SaveBlendingConfig";
     }
+    public static get kSetBlendingHorDensity() {
+      return Commands.PROTOCOL_PREFIX + "SetBlendingHorDensity";
+    }
+    public static get kSetBlendingVerDensity() {
+      return Commands.PROTOCOL_PREFIX + "SetBlendingVerDensity";
+    }
+    public static get kResetBlending() {
+      return Commands.PROTOCOL_PREFIX + "ResetBlending";
+    }
+    public static get kSetBlendingOption() {
+      return Commands.PROTOCOL_PREFIX + "SetBlendingOption";
+    }
+    public static get kEnumBlendingScene() {
+      return Commands.PROTOCOL_PREFIX + "EnumBlendingScene";
+    }
+    public static get kApplyBlendingScene() {
+      return Commands.PROTOCOL_PREFIX + "ApplyBlendingScene";
+    }
+    public static get kDeleteBlendingScene() {
+      return Commands.PROTOCOL_PREFIX + "DeleteBlendingScene";
+    }
+    public static get kAddBlendingCtrlPoint() {
+      return Commands.PROTOCOL_PREFIX + "AddBlendingCtrlPoint";
+    }
+    public static get kDelBlendingCtrlPoint() {
+      return Commands.PROTOCOL_PREFIX + "DelBlendingCtrlPoint";
+    }
     public static get kRpcFileManagerGetFileList() {
       return Commands.PROTOCOL_PREFIX + "RpcFileManagerGetFileList";
     }
@@ -665,6 +692,15 @@ export namespace Protocol {
       Commands.kSetBlendingOverlap,
       Commands.kGetBlendingConfig,
       Commands.kSaveBlendingConfig,
+      Commands.kSetBlendingHorDensity,
+      Commands.kSetBlendingVerDensity,
+      Commands.kResetBlending,
+      Commands.kSetBlendingOption,
+      Commands.kEnumBlendingScene,
+      Commands.kApplyBlendingScene,
+      Commands.kDeleteBlendingScene,
+      Commands.kAddBlendingCtrlPoint,
+      Commands.kDelBlendingCtrlPoint,
       Commands.kRpcSetMagicWallGridState,
       Commands.kRpcGetMagicWallGridState,
       Commands.kRpcFileManagerGetFileList,
@@ -3204,7 +3240,7 @@ export namespace Protocol {
   }
 
   export class RpcGetMagicWallGridStateRequestEntity extends PacketEntity {
-    constructor( rpc_id = 0) {
+    constructor(rpc_id = 0) {
       super();
       super.command = Commands.kRpcGetMagicWallGridState;
       super.flag = PacketEntity.FLAG_REQUEST;
@@ -3230,7 +3266,6 @@ export namespace Protocol {
     }
   }
 
-
   export class RpcTestARequestEntity extends PacketEntity {
     constructor(
       x: number,
@@ -3275,12 +3310,22 @@ export namespace Protocol {
     lb_l = 0;
   }
 
+  export class RpcBlendingResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    success = false;
+  }
+
   /** */
   export class SetBlendingCorrectionRequestEntity extends PacketEntity {
     constructor(
       row: number,
       column: number,
       correction_type: number,
+      control_point_count: number,
       control_point: number,
       x: number,
       y: number,
@@ -3296,11 +3341,13 @@ export namespace Protocol {
       this.row = row ?? 0;
       this.column = column ?? 0;
       this.correction_type = correction_type ?? 0;
+      this.control_point_count = control_point_count ?? 0;
       this.control_point = control_point ?? 0;
     }
     row = 0;
     column = 0;
     correction_type = 0; //4：四点校正，9：曲面校正
+    control_point_count = 0;
     control_point = 0; //控制点编号，1开始，从上到下从左到右
     x = 0;
     y = 0;
@@ -3458,108 +3505,279 @@ export namespace Protocol {
     }
     name = "";
   }
-  export class RpcFileManagerGetFileListRequest extends PacketEntity{
+
-    dir_path:string=""
+  export class SetBlendingHorDensityRequestEntity extends PacketEntity {
-    constructor(dir_path:string,rpc_id = 0) {
+    constructor(
+      row: number,
+      column: number,
+      control_point_count: number,
+      control_point: number,
+      value: number,
+      rpc_id = 0
+    ) {
+      super();
+      super.command = Commands.kSetBlendingHorDensity;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.row = row ?? 0;
+      this.column = column ?? 0;
+      this.control_point_count = control_point_count ?? 0;
+      this.control_point = control_point ?? 0;
+      this.value = value ?? 0;
+    }
+    row = 0;
+    column = 0;
+    control_point_count = 0;
+    control_point = 0; //控制点编号，1开始，从上到下从左到右
+    value = 0;
+  }
+
+  export class SetBlendingVerDensityRequestEntity extends PacketEntity {
+    constructor(
+      row: number,
+      column: number,
+      control_point_count: number,
+      control_point: number,
+      value: number,
+      rpc_id = 0
+    ) {
+      super();
+      super.command = Commands.kSetBlendingVerDensity;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.row = row ?? 0;
+      this.column = column ?? 0;
+      this.control_point_count = control_point_count ?? 0;
+      this.control_point = control_point ?? 0;
+      this.value = value ?? 0;
+    }
+    row = 0;
+    column = 0;
+    control_point_count = 0;
+    control_point = 0; //控制点编号，1开始，从上到下从左到右
+    value = 0;
+  }
+
+  export class ResetBlendingConfigRequestEntity extends PacketEntity {
+    constructor(rpc_id = 0) {
+      super();
+      super.command = Commands.kResetBlending;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+    }
+  }
+
+  export class SetBlendingOptionRequestEntity extends PacketEntity {
+    constructor(id: string, value: string, rpc_id = 0) {
+      super();
+      super.command = Commands.kSetBlendingOption;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.id = id ?? "";
+      this.value = value ?? "";
+    }
+    id;
+    value;
+  }
+
+  export class EnumBlendingSceneResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    scenes = [];
+  }
+
+  export class EnumBlendingSceneRequestEntity extends PacketEntity {
+    constructor(rpc_id = 0) {
+      super();
+      super.command = Commands.kEnumBlendingScene;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+    }
+  }
+
+  export class ApplyBlendingSceneRequestEntity extends PacketEntity {
+    constructor(name: string, rpc_id = 0) {
+      super();
+      super.command = Commands.kApplyBlendingScene;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.name = name ?? "";
+    }
+    name;
+  }
+
+  export class DeleteBlendingSceneRequestEntity extends PacketEntity {
+    constructor(name: string, rpc_id = 0) {
+      super();
+      super.command = Commands.kDeleteBlendingScene;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.name = name ?? "";
+    }
+    name;
+  }
+
+  export class AddBlendingCtrlPointRequestEntity extends PacketEntity {
+    constructor(
+      type: string,
+      row: number,
+      column: number,
+      count: number,
+      rpc_id = 0
+    ) {
+      super();
+      super.command = Commands.kAddBlendingCtrlPoint;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.type = type ?? "";
+      this.row = row ?? 0;
+      this.column = column ?? 0;
+      this.count = count ?? 0;
+    }
+    type; //ver_density:垂直疏密，hor_density:水平疏密，9：曲面
+    row = 0;
+    column = 0;
+    count = 0; //控制点数量
+  }
+
+  export class DelBlendingCtrlPointRequestEntity extends PacketEntity {
+    constructor(
+      type: string,
+      row: number,
+      column: number,
+      count: number,
+      rpc_id = 0
+    ) {
+      super();
+      super.command = Commands.kDelBlendingCtrlPoint;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+
+      this.type = type ?? "";
+      this.row = row ?? 0;
+      this.column = column ?? 0;
+      this.count = count ?? 0;
+    }
+    type; //ver_density:垂直疏密，hor_density:水平疏密，9：曲面
+    row = 0;
+    column = 0;
+    count = 0; //控制点数量
+  }
+  export class RpcFileManagerGetFileListRequest extends PacketEntity {
+    dir_path: string = "";
+    constructor(dir_path: string, rpc_id = 0) {
       super();
       super.command = Commands.kRpcFileManagerGetFileList;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
-      this.dir_path=dir_path
+      this.dir_path = dir_path;
     }
   }
-  export class RpcFileManagerGetFileListResponse  extends PacketEntity{
+  export class RpcFileManagerGetFileListResponse extends PacketEntity {
     constructor() {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    error_code=0;
+    error_code = 0;
     success = false;
-    error_message=""
+    error_message = "";
-    free=0;
+    free = 0;
-    files:FileEntry[]=[]
+    files: FileEntry[] = [];
   }
-  export class RpcFileManagerRenameRequest extends PacketEntity{
+  export class RpcFileManagerRenameRequest extends PacketEntity {
-    constructor(base_dir:string,file_name:string,new_file_name:string,rpc_id = 0) {
+    constructor(
+      base_dir: string,
+      file_name: string,
+      new_file_name: string,
+      rpc_id = 0
+    ) {
       super();
       super.command = Commands.kRpcFileManagerRename;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
-      this.base_dir=base_dir
+      this.base_dir = base_dir;
-      this.file_name=file_name
+      this.file_name = file_name;
-      this.new_file_name=new_file_name
+      this.new_file_name = new_file_name;
     }
-    base_dir=""
+    base_dir = "";
-    file_name=""
+    file_name = "";
-    new_file_name=""
+    new_file_name = "";
   }
-  export class RpcFileManagerRenameResponse  extends PacketEntity{
+  export class RpcFileManagerRenameResponse extends PacketEntity {
     constructor() {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
     success = false;
-    error_code=0;
+    error_code = 0;
-    error_message=""
+    error_message = "";
   }
-  export class RpcFileManagerDeleteRequest extends PacketEntity{
+  export class RpcFileManagerDeleteRequest extends PacketEntity {
-    constructor(base_dir:string,file_name:string,rpc_id = 0) {
+    constructor(base_dir: string, file_name: string, rpc_id = 0) {
       super();
       super.command = Commands.kRpcFileManagerDelete;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
-      this.base_dir=base_dir
+      this.base_dir = base_dir;
-      this.file_name=file_name
+      this.file_name = file_name;
     }
-    base_dir=""
+    base_dir = "";
-    file_name=""
+    file_name = "";
   }
-  export class RpcFileManagerDeleteResponse  extends PacketEntity{
+  export class RpcFileManagerDeleteResponse extends PacketEntity {
     constructor() {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
     success = false;
-    delete_count=""
+    delete_count = "";
-    error_code=0;
+    error_code = 0;
-    error_message=""
+    error_message = "";
   }
-  export class RpcFileManagerCreateDirectoryRequest extends PacketEntity{
+  export class RpcFileManagerCreateDirectoryRequest extends PacketEntity {
-    constructor(base_dir:string,dir_name:string,rpc_id = 0) {
+    constructor(base_dir: string, dir_name: string, rpc_id = 0) {
       super();
       super.command = Commands.kRpcFileManagerCreateDirectory;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
-      this.base_dir=base_dir
+      this.base_dir = base_dir;
-      this.dir_name=dir_name
+      this.dir_name = dir_name;
     }
-    base_dir=""
+    base_dir = "";
-    dir_name=""
+    dir_name = "";
   }
-  export class RpcFileManagerCreateDirectoryResponse  extends PacketEntity{
+  export class RpcFileManagerCreateDirectoryResponse extends PacketEntity {
     constructor() {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
     success = false;
-    error_message=""
+    error_message = "";
-    error_code=0;
+    error_code = 0;
   }
-  export class RpcCheckModeIndexRequestEntity extends PacketEntity{
+  export class RpcCheckModeIndexRequestEntity extends PacketEntity {
-    constructor(mode_index:number,rpc_id = 0) {
+    constructor(mode_index: number, rpc_id = 0) {
       super();
       super.command = Commands.kRpcCheckModeIndex;
       super.flag = PacketEntity.FLAG_REQUEST;
-      this.mode_index=mode_index
+      this.mode_index = mode_index;
     }
     mode_index = 0;
   }
-  export class   RpcCheckModeIndexResponseEntity extends PacketEntity{
+  export class RpcCheckModeIndexResponseEntity extends PacketEntity {
     constructor() {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
     success = false;
-
   }
 }

src/i18n/en-US/index.ts

@@ -294,7 +294,7 @@ export default {
   "open left tool bar": "Open Left Tool Bar",
   "open right tool bar": "Open Right Tool Bar",
   fail: " Fail",
-  finish:"Finish",
+  finish: "Finish",
   "edit group": "Edit Group",
   "open window": "Open Window",
   "close all windows": "Close All Windows",
@@ -407,8 +407,8 @@ export default {
   "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
     "Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
   "equipment data": "Equipment Data",
-  "fusion":"Fusion",
+  fusion: "Fusion",
-  "fusion settings": "fusion settings",
+  "fusion settings": "Fusion Settings",
   FusionLocale: "Fusion Locale",
   FourPointCalibration: "Four Pint Calibration",
   SurfaceCorrection: "Surface Correction",
@@ -416,7 +416,7 @@ export default {
   GridSettings: "Grid Settings",
   point: "dot",
   reset: "reset",
-  "upper fusion zone parameters": "upper fusion zone parameters",
+  "upper fusion zone parameters": "Upper Fusion Zone Parameters",
   "Left fusion Band Parameters": "Left Fusion Band Parameters",
   "Lower fusion Zone Parameters": "Lower Fusion Zone Parameters",
   "Right fusion Band Parameters": "Right Fusion Band Parameters",
@@ -426,8 +426,49 @@ export default {
   "Set Fusion Band Parameters": "Set Fusion Band Parameters",
   Projector: "Projector",
   resetall: "reset all",
-  "save config": "save config",
+  "save config": "Save Config",
-  "Whether to enable mixing": "Whether to enable mixing",
+  "Whether to enable integration": "Whether to enable integration",
+  "Whether to hide the desktop": "Whether to hide the desktop",
+  "resetall config": "resetall config",
+  "disable blending params": "Dsable blending params",
+  "show blending grids": "Show Grids",
+  "line color": "Line Color",
+  "center line color": "center line color",
+  "center circle color": "center circle color",
+  "Whether to operate synchronously": "Whether to operate synchronously",
+  "Select saved configuration": "Select saved Configuration",
+  "read saved configuration": "read saved configuration",
+  "please choose": "please choose",
+  save: "Save",
+  "Whether to save the configuration": "Whether to save the configuration",
+  "New Please enter a name": "New Please enter a name",
+  "Please select an override": "Please select an override",
+  "confirm delete": "confirm delete",
+  "delete or not": "delete or not",
+  debugging: "Debugging",
+  disable_blending: "disable blending",
+  disable_clip: "disable clip",
+  show_mask: "hide desktop",
+  save_bmp: "save bmp",
+  disable_blending_params: "disable blending params",
+  "Please enter a value within the range":
+    "Please enter a value within the range",
+  "vertical correction": "vertical correction",
+  "horizontal correction": "horizontal correction",
+  "line width": "line width",
+  level: "level",
+  vertical: "vertical",
+  "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": "delete 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",
   "device verify key": "Device Verify Key",
   "use wss": "Use Wss",
   "server address": "Server Address",
@@ -445,6 +486,6 @@ export default {
   resize: "Resize",
   "export magic": "Export",
   "raster graph": "Raster Graph",
-  "the folder name cannot start with a '.'":"The Folder Name Cannot Start With a '.'",
+  "the folder name cannot start with a '.'":
-
+    "The Folder Name Cannot Start With a '.'",
 };

src/i18n/zh-CN/index.ts

@@ -5,7 +5,7 @@ export default {
   " ": "",
   title: "MediaPlayerWebApp",
   failed: "失败",
-  finish:"完成",
+  finish: "完成",
   fail: "失败",
   error: "错误",
   Confirm: "确认",
@@ -675,7 +675,7 @@ export default {
   "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
     "请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
   "equipment data": "联动设备",
-  "fusion":"融合",
+  fusion: "融合",
   "fusion settings": "融合设置",
   FusionLocale: "融合区域设置",
   FourPointCalibration: "四点校正",
@@ -695,7 +695,46 @@ export default {
   Projector: "投影机",
   resetall: "重置所有",
   "save config": "保存配置",
-  "Whether to enable mixing": "是否启用混合",
+  "Whether to enable integration": "是否启用融合",
+  "Whether to hide the desktop": "是否隐藏桌面",
+  "resetall config": "重置所有配置",
+  "disable blending params": "禁用融合参数",
+  "show blending grids": "显示网格",
+  "line color": "线条颜色",
+  "center line color": "中心线颜色",
+  "center circle color": "中心圆颜色",
+  "Whether to operate synchronously": "是否同步操作",
+  "Select saved configuration": "选择保存的配置",
+  "read saved configuration": "读取保存的配置",
+  "please choose": "请选择",
+  save: "保存",
+  "Whether to save the configuration": "是否保存配置",
+  "New Please enter a name": "新建 请输入名称",
+  "Please select an override": "请选择覆盖",
+  "confirm delete": "确定删除",
+  "Whether to delete": "是否删除",
+  debugging: "调试",
+  disable_blending: "禁用混合",
+  disable_clip: "禁用裁剪",
+  show_mask: "隐藏桌面",
+  save_bmp: "保存BMP",
+  disable_blending_params: "禁用融合参数",
+  "Please enter a value within the range": "请输入范围内的值",
+  "vertical correction": "垂直校正",
+  "horizontal correction": "水平校正",
+  "line width": "线宽",
+  level: "水平",
+  vertical: "垂直",
+  "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": "是否添加控制点",
   "device verify key": "设备校验码",
   "use wss": "使用Wss",
   "server address": "服务器地址",
@@ -713,5 +752,5 @@ export default {
   resize: "缩放",
   "export magic": "导出",
   "raster graph": "栅格图",
-  "the folder name cannot start with a '.'":"文件夹名称不能以“.” 开头",
+  "the folder name cannot start with a '.'": "文件夹名称不能以“.” 开头",
 };

src/pages/TopToolBar.vue

@@ -620,6 +620,8 @@ export default defineComponent({
     let $q = useQuasar();
     let $t = useI18n();
 
+    let set = GlobalData.getInstance().getCurrentClient();
+
     let show_advanced_menu = ref(true);
     const edge_blending_dialog: Ref<any> = ref(null);
     const register_dialog: Ref<any> = ref(null);
@@ -646,6 +648,16 @@ export default defineComponent({
       let sulv: any = 1 - wendu / 150;
       return "rotate " + sulv + "s linear infinite";
     });
+    const getconfig = () => {
+      try {
+        set?.GetBlendingConfig("").then((res) => {});
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          $store.commit("setEnablefusion", tmp.enable);
+          $store.commit("setfusion_configuration", res?.config);
+        });
+      } catch (error) {}
+    };
     const checkRegistered = () => {
       if (
         GlobalData.getInstance().getCurrentClient()?.is_connected &&
@@ -715,6 +727,7 @@ export default defineComponent({
       isfan.value = false;
     }
     return {
+      getconfig,
       show_advanced_menu,
       plan_running,
       edge_blending_dialog,

src/store/index.ts

@@ -73,7 +73,6 @@ class test_monitor {
     this.id = id;
     this.w = w;
     this.h = h;
-
   }
 }
 export interface StateInterface {
@@ -115,14 +114,14 @@ export interface StateInterface {
   product_name: string;
   show_monitor_list: test_monitor[];
   custom_defines: CustomDefines;
-  fusion_configuration: object;
+  fusion_configuration: string;
   isLedPlayer: () => boolean;
   isSpecialVideo: () => boolean;
 
   $wujie: IWuJieInterface | null;
   //
   selected_projector: string;
-  EnableBlending: boolean;
+  enablefusion: boolean;
 }
 
 // provide typings for `this.$store`
@@ -380,12 +379,12 @@ export default store(function (/* { ssrContext } */) {
       landspace: window.innerWidth > window.innerHeight,
       device_attribute: 0,
       power_state: false,
-      fusion_configuration: {},
+      fusion_configuration: "",
       product_name: EProductNames.LED_PLAYER,
       show_monitor_list: [],
       custom_defines: new CustomDefines(),
       selected_projector: "0/0",
-      EnableBlending: false,
+      enablefusion: false,
       isLedPlayer: () => {
         return (
           Store.state.product_name == EProductNames.LED_PLAYER ||
@@ -404,7 +403,7 @@ export default store(function (/* { ssrContext } */) {
         state.initialized = true;
       },
       setShowMonitorList(state: StateInterface, playload?: any) {
-        state.show_monitor_list = playload
+        state.show_monitor_list = playload;
       },
       updateLandspace(state: StateInterface, playload?: any) {
         if (typeof playload == "boolean") {
@@ -516,7 +515,7 @@ export default store(function (/* { ssrContext } */) {
                   Math.round(Math.random() * window_color_list.length),
                   1
                 )[0];
-              } catch { }
+              } catch {}
             }
           }
         }
@@ -537,7 +536,7 @@ export default store(function (/* { ssrContext } */) {
               Math.round(Math.random() * window_color_list.length - 1),
               1
             )[0];
-          } catch { }
+          } catch {}
           state.windows.push(playload);
           state.windows_sort.push(playload.uuid);
         }
@@ -642,7 +641,7 @@ export default store(function (/* { ssrContext } */) {
       setDeviceScreenConnectState(state: StateInterface, playload?: any) {
         try {
           state.device_screen_connect_state = JSON.parse(playload);
-        } catch { }
+        } catch {}
       },
       // signal source
       setSignalSourceTree(
@@ -656,8 +655,8 @@ export default store(function (/* { ssrContext } */) {
       setSelectedProjector(state: StateInterface, playload?: any) {
         state.selected_projector = playload;
       },
-      setEnableBlending(state: StateInterface, playload?: any) {
+      setEnablefusion(state: StateInterface, playload?: any) {
-        state.EnableBlending = playload;
+        state.enablefusion = playload;
       },
       clearSignalSourceTree(state: StateInterface, playload?: any) {
         state.signal_source_tree = [];
@@ -1051,6 +1050,9 @@ export default store(function (/* { ssrContext } */) {
       setWuJie(state: StateInterface, playload?: any) {
         state.$wujie = playload;
       },
+      setfusion_configuration(state: StateInterface, playload?: any) {
+        state.fusion_configuration = playload;
+      },
     },
     getters: {
       GetTheCurrentlySelectedCamera(state) {

yarn.lock

@@ -1403,10 +1403,10 @@
     selfsigned "^2.0.0"
     update-notifier "^6.0.2"
 
-"@quasar/extras@^1.15.10":
+"@quasar/extras@^1.15.11":
-  version "1.15.10"
+  version "1.15.11"
-  resolved "https://registry.npmmirror.com/@quasar/extras/-/extras-1.15.10.tgz#515298377249765f9ca0027f6843f6a8e61efcd8"
+  resolved "https://registry.npmmirror.com/@quasar/extras/-/extras-1.15.11.tgz#a54d60b14446b850a1e5fccab3f381a2e447a73f"
-  integrity sha512-6w8e+wPNfcWhzW43tlnJPHOrcNwAgaaNJ3zBz8k+BMqpenA3fHZhFhxCYEVRZVqPFE2IK/8nRiPBp4t9xlW5tA==
+  integrity sha512-EEXL10EJQmL9jNs5fp0Kd/nyonG8hTODolj+qpYNPG3qEEoy3txr05Pdmp9qJYaXIzP9rOS9FGhFe9Mnq6MBBg==
 
 "@quasar/fastclick@1.1.5":
   version "1.1.5"
@@ -8319,10 +8319,10 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-quasar@^2.11.5:
+quasar@^2.11.6:
-  version "2.11.5"
+  version "2.11.6"
-  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.11.5.tgz#c8a74c8f7bf24b16cdf51f1257df1a38b68fdfb8"
+  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.11.6.tgz#9d200a0de44dc235915fee3ea3ff5673045fdcbc"
-  integrity sha512-rX4Rwp9wlCeB9A6RQUxEx/q84LMBVVm6WTECkoq8r/+NBgl9aHVexzZQBnRn2i61D0BJpdX5VcnMxAnJkTx/kA==
+  integrity sha512-jJniWqTtfLHDuAT1YNx6ZZdZU7nM8vwscyM7IxmijaHq+fDpgjaujDQUlJWgn5ZMkqe3Yvg93MgSxjcL71oJIw==
 
 question-cache@^0.4.0:
   version "0.4.0"
@@ -10300,6 +10300,11 @@ vue-style-loader@4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue3-draggable-resizable@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.npmmirror.com/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz#021b2c00bff2885ab4fa5981e03bf4f56f12cdac"
+  integrity sha512-31142E31fGNnq3HKqvmFLSsqIbhck7TyGuQWhUKrDw6DOcGAuRx4ddRjaxvT6fe7dgeKH53qAh+i0ZlWtPLl2g==
+
 vue@^3.0.0:
   version "3.2.45"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"