修复pc端操作融合带 伽马值校正时不发送数据

# Conflicts:
#	src/components/FusionSettings/DensityCorrection.vue
#	src/components/FusionSettings/FourPointCalibration.vue
#	src/components/FusionSettings/SurfaceCorrection.vue
#	src/components/FusionSettingsDialog.vue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

quasar.conf.js

@@ -41,9 +41,12 @@ module.exports = configure(function (ctx) {
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: "hash", // available values: 'hash', 'history'
-
+      uglifyOptions: {
+        compress: {
+          drop_console: true,
+        },
+      },
       // transpile: false,
-
       // Add dependencies for transpiling with Babel (Array of string/regex)
       // (from node_modules, which are by default not transpiled).
       // Applies only if "transpile" is set to true.
@@ -52,7 +55,7 @@ module.exports = configure(function (ctx) {
       // rtl: true, // https://v2.quasar.dev/options/rtl-support
       // preloadChunks: true,
       // showProgress: false,
-      // gzip: true,
+      gzip: true,
       // analyze: true,
 
       // Options below are automatically set depending on the env, set them if you want to override

src/App.vue

@@ -15,6 +15,8 @@ import GlobalData from "./common/GlobalData";
 import { EProductNames } from "./entities/ProductNames";
 import { api } from "./boot/axios";
 import { WuJieInitializer } from "./common/WuJieInitializer";
+import ClientConnection from "./common/ClientConnection";
+import { Common } from "./common/Common";
 
 export default defineComponent({
   name: "App",
@@ -117,7 +119,7 @@ export default defineComponent({
       console.log(e);
     }
 
-    EventBus.getInstance().on(EventNamesDefine.CheckDebug2, () => {
+    EventBus.getInstance().on(EventNamesDefine.CheckDebug, () => {
       const to_normal_url = () => {
         const p1 = window.location.href.indexOf("?debug");
         const p2 = window.location.href.indexOf("#");
@@ -284,6 +286,40 @@ export default defineComponent({
       });
     }
 
+    EventBus.getInstance().on(
+      EventNamesDefine.CurrentConnectConnected,
+      async (connection: ClientConnection) => {
+        const show_version_tip = () =>
+          $q.dialog({
+            persistent: true,
+            title: $t.t("Version Mismatch !"),
+            message: $t.t(
+              "Version Mismatch ! Please Upgrade The Software Again ! Otherwise, The File Function Cannot Be Used !"
+            ),
+          });
+        if (connection) {
+          let count = 0;
+          while (
+            connection &&
+            !connection.is_login &&
+            count < (1000 * 10) / 100 /* 10 S */
+          ) {
+            await Common.waitFor(100);
+          }
+          if (count < (1000 * 10) / 100) {
+            try {
+              const response = await connection.getHttpInterfaceVersion();
+              if (!response || response.version != 2) {
+                show_version_tip();
+              }
+            } catch (e) {
+              show_version_tip();
+            }
+          }
+        }
+      }
+    );
+
     return {};
   },
 });

src/common/ClientConnection.ts

@@ -710,6 +710,17 @@ export default class ClientConnection {
       )
     );
   }
+  public setMagicWallList(list:any) {
+    this.ws?.send(
+      JSON.stringify(
+        new Protocol.SetApplicationConfigRequestEntity(
+          0,
+          "magic_list",
+          typeof (list) == 'string' ? list : JSON.stringify(list)
+        )
+      )
+    );
+  }
 
   public setConfigure(k: string, v: string) {
     this.ws?.send(
@@ -823,6 +834,7 @@ export default class ClientConnection {
     active_code: string,
     online: boolean,
     active_forever: boolean,
+    attribute: number,
     secret_key?: string,
     hour?: number
   ) {
@@ -833,6 +845,7 @@ export default class ClientConnection {
           active_code,
           online,
           active_forever,
+          attribute,
           secret_key,
           hour,
           0
@@ -1343,6 +1356,12 @@ export default class ClientConnection {
     );
   }
 
+  public async getHttpInterfaceVersion() {
+    return await this.doRpc<Protocol.RpcGetHttpInterfaceVersionResponseEntity>(
+      new Protocol.RpcGetHttpInterfaceVersionRequestEntity()
+    );
+  }
+
   public async setJointActionEquipment(
     entity: JointActionEquipmentTableEntity
   ) {
@@ -1438,7 +1457,8 @@ export default class ClientConnection {
     column: number,
     location: number,
     enable: boolean,
-    width: number
+    width: number,
+    auto_sync: boolean,
   ) {
     return await this.doRpc<Protocol.NoneResponse>(
       new Protocol.SetBlendingOverlapRequestEntity(
@@ -1446,7 +1466,8 @@ export default class ClientConnection {
         column,
         location,
         enable,
-        width
+        width,
+        auto_sync
       )
     );
   }
@@ -1551,21 +1572,15 @@ export default class ClientConnection {
     );
   }
 
-  public async SetProjectorResolution(
-      width: number,
-      height: number
-  ) {
+  public async SetProjectorResolution(width: number, height: number) {
     return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
       new Protocol.SetProjectorResolutionRequestEntity(width, height)
     );
   }
 
-  public async SetProjectorLayout(
-      row: number,
-      column: number
-  ) {
+  public async SetProjectorLayout(row: number, column: number) {
     return await this.doRpc<Protocol.GetBlendingConfigResponseEntity>(
-      new Protocol.SetProjectorResolutionRequestEntity(row, column)
+      new Protocol.SetProjectorLayoutRequestEntity(row, column)
     );
   }
 

src/components/AdvancedDebugDialog.vue

@@ -11,7 +11,7 @@
       }
     "
   >
-    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 40vw">
       <q-form>
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
@@ -37,8 +37,67 @@
 
         <q-separator />
 
-        <q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
+        <q-card-section style="max-height: 60vh; width: 40vw" class="scroll">
           <q-list>
+            <q-item>
+              <q-item-section avatar>{{ $t("product") }}</q-item-section>
+              <q-item-section>
+                <q-radio
+                  v-model="selected_product"
+                  val=""
+                  :label="$t('normal')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-radio
+                  v-model="selected_product"
+                  val="magic_wall"
+                  :label="$t('magic wall')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-radio
+                  v-model="selected_product"
+                  val="fusion"
+                  :label="$t('fusion')"
+                  color="cyan"
+                  class="offset-md-1 col"
+                  :loading="loading"
+                  :disable="loading"
+                />
+              </q-item-section>
+            </q-item>
+            <q-item v-if="selected_product == 'fusion'">
+              <q-item-section avatar>{{ $t("fusion") }}</q-item-section>
+              <q-item-section>
+                <div class="row" v-for="(row, row_index) in 3" :key="row">
+                  <q-radio
+                    v-for="(item, item_index) in 3"
+                    :key="row_index * 3 + item"
+                    v-model="function_fusion_count"
+                    :val="row_index * 3 + item"
+                    :label="
+                      (row_index * 3 + item).toString() +
+                      $t(' ') +
+                      $t('fusion out')
+                    "
+                    color="cyan"
+                    class="col"
+                    :class="item_index ? 'offset-md-1 ' : ''"
+                    :loading="loading"
+                    :disable="loading"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
             <q-item>
               <q-item-section avatar>{{ $t("function") }}</q-item-section>
               <q-item-section>
@@ -69,7 +128,6 @@
                   :disable="loading"
                 />
               </q-item-section>
-
             </q-item>
             <q-item>
               <q-item-section avatar></q-item-section>
@@ -83,40 +141,22 @@
                   :disable="loading"
                 />
               </q-item-section>
-
+            </q-item>
+            <q-item>
+              <q-item-section> </q-item-section>
               <q-item-section>
-                <q-checkbox
-                  v-model="function_magic_wall"
-                  @update:model-value="changeMagic()"
-                  :label="$t('magic wall')"
-                  color="cyan"
-                  class="offset-md-1 col"
-                  :loading="loading"
-                  :disable="loading"
-                />
-              </q-item-section>
-              <q-item-section>
-                <q-checkbox
-                  v-model="function_fusion"
-                  @update:model-value="changeFusion()"
-                  :label="$t('fusion')"
-                  color="cyan"
-                  class="offset-md-1 col"
-                  :loading="loading"
-                  :disable="loading"
-
-                />
-              </q-item-section>
-              <q-item-section avatar>
                 <q-btn
-                  @click="setDeviceAttribute"
+                  @click="setDeviceAttributeAndProduct"
                   :label="$t('commit')"
                   no-caps
                   outline
+                  class="q-px-lg"
                   color="primary"
                 />
               </q-item-section>
+              <q-item-section> </q-item-section>
             </q-item>
+            <q-separator />
             <q-item>
               <q-item-section avatar>
                 {{ $t("language") }}
@@ -153,7 +193,6 @@
                 />
               </q-item-section>
             </q-item>
-
             <q-separator class="q-mt-md" />
 
             <q-item class="q-mt-md">
@@ -199,8 +238,10 @@ import { useStore } from "src/store";
 import { useQuasar, date as $date } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
-import { Protocol } from "src/entities/WSProtocol";
-import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
+import {
+  EDeviceAttribute,
+  EDeviceAttributeHelper,
+} from "src/entities/EDeviceAttribute";
 
 export default defineComponent({
   name: "ComponentAdvancedDebugDialog",
@@ -226,10 +267,44 @@ export default defineComponent({
     const function_magic_wall = ref(
       $store.state.custom_defines.function_magic_wall
     );
-    const function_fusion = ref(
-      $store.state.custom_defines.function_magic_wall
-    );
+    const function_fusion = ref($store.state.custom_defines.function_fusion);
+    const function_fusion_count = ref(0);
     const target_language = ref("zh-CN");
+    const selected_product = ref("");
+
+    watch(
+      () => selected_product.value,
+      (newValue) => {
+        function_fusion.value = newValue == "fusion";
+        function_magic_wall.value = newValue == "magic_wall";
+      }
+    );
+
+    const getFinalAttribute = () => {
+      let attribute = EDeviceAttribute.None;
+      if (function_center_control.value) {
+        attribute |= EDeviceAttribute.CenterControl;
+      }
+      if (function_output_board.value) {
+        attribute |= EDeviceAttribute.OutputBoard;
+      }
+      if (function_mirroring_output.value) {
+        attribute |= EDeviceAttribute.MirroringOutput;
+      }
+
+      if (function_custom_ISV.value) {
+        attribute |= EDeviceAttribute.CustomISV;
+      }
+      if (function_magic_wall.value) {
+        attribute |= EDeviceAttribute.ProductMagicWall;
+      }
+      if (function_fusion.value) {
+        attribute |= EDeviceAttributeHelper.getProdictFusionAttributeByIndex(
+          function_fusion_count.value
+        );
+      }
+      return attribute;
+    };
 
     return {
       show_dialog,
@@ -239,8 +314,10 @@ export default defineComponent({
       function_custom_ISV,
       function_magic_wall,
       function_fusion,
+      function_fusion_count,
       function_mirroring_output,
       target_language,
+      selected_product,
 
       showDialog() {
         show_dialog.value = true;
@@ -254,8 +331,18 @@ export default defineComponent({
           $store.state.custom_defines.function_mirroring_output;
         function_magic_wall.value =
           $store.state.custom_defines.function_magic_wall;
-          function_fusion.value =
-          $store.state.custom_defines.function_fusion;
+        function_fusion.value = $store.state.custom_defines.function_fusion;
+        function_fusion_count.value =
+          EDeviceAttributeHelper.getProductFusionOutputCountDefault(
+            $store.state.device_attribute,
+            1
+          );
+
+        if (function_magic_wall.value) {
+          selected_product.value = "magic_wall";
+        } else if (function_fusion.value) {
+          selected_product.value = "fusion";
+        }
       },
       resetData() {
         loading.value = false;
@@ -264,8 +351,9 @@ export default defineComponent({
         function_output_board.value = false;
         function_mirroring_output.value = false;
         function_custom_ISV.value = false;
-        function_magic_wall.value=false;
-        function_fusion.value=false
+        function_magic_wall.value = false;
+        function_fusion.value = false;
+        selected_product.value = "";
       },
 
       restartDevice() {
@@ -343,27 +431,22 @@ export default defineComponent({
           </div>`,
         });
       },
-      setDeviceAttribute() {
-        let attribute = EDeviceAttribute.None;
-        if (function_center_control.value) {
-          attribute |= EDeviceAttribute.CenterControl;
-        }
-        if (function_output_board.value) {
-          attribute |= EDeviceAttribute.OutputBoard;
-        }
-        if (function_mirroring_output.value) {
-          attribute |= EDeviceAttribute.MirroringOutput;
-        }
+      setDeviceAttributeAndProduct() {
+        let attribute = getFinalAttribute();
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setDeviceAttribute(attribute);
 
-        if (function_custom_ISV.value) {
-          attribute |= EDeviceAttribute.CustomISV;
-        }
-        if (function_magic_wall.value) {
-            attribute |= EDeviceAttribute.ProductMagicWall;
-        }
-        if (function_fusion.value) {
-            attribute |= EDeviceAttribute.ProductFusion;
-        }
+        $q.notify({
+          color: "positive",
+          icon: "done",
+          message: $t.t("set device function") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1500,
+        });
+      },
+      setDeviceAttribute() {
+        let attribute = getFinalAttribute();
 
         GlobalData.getInstance()
           .getCurrentClient()
@@ -389,16 +472,16 @@ export default defineComponent({
           timeout: 1500,
         });
       },
-      changeMagic(){
-        if(function_magic_wall.value){
-          function_fusion.value=false;
+      changeMagic() {
+        if (function_magic_wall.value) {
+          function_fusion.value = false;
         }
       },
-      changeFusion(){
-        if(function_fusion.value){
-          function_magic_wall.value=false;
-        }
+      changeFusion() {
+        if (function_fusion.value) {
+          function_magic_wall.value = false;
         }
+      },
     };
   },
 });

src/components/FileManageDialog.vue

@@ -222,10 +222,11 @@
                   style="color: #ffbe4a; font-size: 2.5em"
                 ></q-icon>
                 {{
-                  props.value.length > 60
-                    ? props.value.substr(0, 60) + "..."
+                  props.value.length > 25
+                    ? props.value.substr(0, 25) + "..."
                     : props.value
                 }}
+
                 <q-tooltip> {{ props.value }} </q-tooltip>
               </div>
               <div v-else-if="props.col.name == 'file_size'">
@@ -918,7 +919,6 @@ export default defineComponent({
           const response = await GlobalData.getInstance()
             .getCurrentClient()
             ?.CreateDirectoryFileManager(path.value, data);
-          console.log(response);
           if (response && response.success) {
             refresh_file_list();
             $q.notify({
@@ -1090,6 +1090,8 @@ export default defineComponent({
             });
             loading.value = false;
             uploading.value = false;
+            refresh_file_list()
+          uploader.value.reset()
         }, 500);
       },
       copyFile(file: FileEntity) {

src/components/FusionSettings/FourPointCalibration.vue

@@ -17,18 +17,19 @@
     </div>
   </div>
   <div>
-    <div class="row">
+    <div class="row" v-show="ispad">
       <div class="col-1"></div>
-      <div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
+      <div class="col-2 q-px-md"  @mousewheel="details_selsect"> <q-select  class="q-pt-md" :label="$t('point')" :dense="true" filled
           v-model="options_model" @update:model-value="(val) => { options_model = val }" :options="options" emit-value
           map-options /></div>
-      <div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
-          v-model="value[options_model].x" @update:model-value="chang(options_model, $event, 'h')" label="x"
-          lazy-rules />
-
+      <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event,'x')">
+         <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].x" @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  @update:model-value="chang(options_model, $event, 'h')" label="x"
+          lazy-rules >
+        </q-input>
       </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"
+      <div class="col-2 q-px-md"  @mousewheel="details_selsect_val($event,'y')"> <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].y" @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1" @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')" />
@@ -38,7 +39,76 @@
       </div>
     </div>
 
+
+
+
+    <div v-show="!ispad" style="display: flex;justify-content: space-around;">
+
+      <div class="q-px-md"  @mousewheel="details_selsect"> <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="q-px-md" @mousewheel="details_selsect_val($event,'x')">
+         <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].x" @focus="input_x_focus=true" @blur="input_x_focus=false"  @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  @update:model-value="chang(options_model, $event, 'h')" label="x"
+          lazy-rules >
+        <template v-if="input_x_focus" v-slot:append>
+          <q-icon name="arrow_upward" @mousedown="mousedown('+','x')" @mouseup="mouseup" />
+          <q-icon name="arrow_downward"  @mousedown="mousedown('-','x')" @mouseup="mouseup"  />
+        </template>
+        </q-input>
       </div>
+      <div class="q-px-md"  @mousewheel="details_selsect_val($event,'y')"> <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].y"  @focus="input_y_focus=true" @blur="input_y_focus=false"   @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1" @update:model-value="chang(options_model, $event, 'h')" label="y"
+          lazy-rules >
+          <template v-if="input_y_focus" v-slot:append>
+          <q-icon name="arrow_upward" @mousedown="mousedown('+','y')" @mouseup="mouseup" />
+          <q-icon name="arrow_downward"  @mousedown="mousedown('-','y')" @mouseup="mouseup"  />
+        </template>
+        </q-input>
+        </div>
+      <div class="q-pt-md">
+        <q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
+      </div>
+      <div class="q-pt-md">
+        <div><q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
+      </div>
+    </div>
+
+    </div>
+
+
+
+
+
+  <!-- </div> -->
+    <q-dialog v-model="ipad_chang">
+    <q-card style="width: 40vw; max-width: 80vw;">
+      <q-card-section>
+        <!-- <div class="text-h6">{{ $t('point') +(options_model+1 )}}</div> -->
+        <div class="row">
+          <div class="col-4"><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>
+
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <div class="row">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up" @touchstart="handlerTouchstart('y','+')"  @touchend="handlerTouchend" /></div>
+        </div>
+        <div class="row">
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_left" @touchstart="handlerTouchstart('x','-')"  @touchend="handlerTouchend" /></div>
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x','+')"  @touchend="handlerTouchend"  /></div>
+        </div>
+        <div class="row">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_down" @touchstart="handlerTouchstart('y','-')"  @touchend="handlerTouchend" /></div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang=false" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped>
@@ -53,6 +123,16 @@
 }
 </style>
 
+ <!-- 取消浏览器自带的input箭头 使用q-input的图标实现  -->
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+</style>
+
+
 <script lang="ts">
 import {
   defineComponent,
@@ -62,7 +142,9 @@ import {
   watch,
   nextTick,
   onBeforeUnmount,
-  defineExpose
+  defineExpose,
+toRefs,
+inject
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
@@ -76,20 +158,39 @@ 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: "ComponentDensityCorrection",
   components: {
     Vue3DraggableResizable
   },
-  setup() {
+  props: {
+        col: {
+            type: String,
+        },
+        row: {
+            type: String,
+        }
+    },
+  setup(props) {
+    const now_selsect_projector:any = inject<string>("now_selsect_projector");
     let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
     const ste_status = ref(0);
     let allconfig = JSON.parse($store.state.fusion_configuration);
-    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
+
+    /**
+     * 平板弹窗修改
+     */
+    const ipad_chang=ref(false)
+    /**
+     * 当前url路径
+     */
+    let url = window.location.href;
     const configselsect = computed(() => {
       return $store.state.selected_projector;
     });
@@ -104,10 +205,20 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
-
+    /**
+     * 当前配置文件
+     */
+    let config = JSON.parse($store.state.fusion_configuration).projectors[selectedprojector.value];
+    /**
+     * 当前点的数量
+     */
     const value_point_amount = ref(5)
 
-
+    /**
+     * 深度copy函数
+     * @param o1
+     * @param o2
+     */
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -118,11 +229,14 @@ export default defineComponent({
         }
       }
     };
-
+    /**
+     * 使用服务器配置
+     */
     const use_server_config = () => {
       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)
@@ -137,7 +251,9 @@ export default defineComponent({
         value_point.value.push(tmp_point)
       }
     }
-
+    /**
+     * 使用缓存
+     */
     const use_set_cache = () => {
       if (set_cache.value[selectedprojector.value] != null) {
         let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
@@ -146,12 +262,16 @@ export default defineComponent({
         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) => {
@@ -178,7 +298,9 @@ export default defineComponent({
     );
 
 
-
+    /**
+     * 缓存 变量
+     */
     const set_cache: any = ref([]);
     //值
     let value = ref(<DensityCorrection[]>[]);
@@ -188,11 +310,21 @@ export default defineComponent({
      * 当前选中的点的索引
      */
     const options_model = ref(0)
-
+    /**
+     * html div元素用来计算
+     */
     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 })
@@ -205,7 +337,9 @@ export default defineComponent({
       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++) {
@@ -216,23 +350,61 @@ export default defineComponent({
       }
       return tmp
     })
-
+    /**
+     * 修改点数量函数
+     * @param val
+     */
     const chang_point_amount = (val: number) => {
       start_point()
     }
-
+    /**
+     * 小点移动回调
+     * @param $event
+     * @param index
+     */
     const dragStartHandle = ($event: any, index: number) => {
       let obj_x = $event.x
       let obj_y = $event.y
       let tmp = coordinate_transformation_xy_to_value(obj_x, obj_y)
       value.value[index].x = Math.round(tmp.x)
       value.value[index].y = Math.round(tmp.y)
-      send_value(index, Math.round(tmp.x), Math.round(tmp.y))
-      save_set_cache()
+      /**
+       * 判断摄像机
+       */
+      if(now_selsect_projector?.value=='0-0'){
+
+        if(index==1||index==3){
+          value.value[index].x = Math.round(tmp.x)>allconfig.projector_width?allconfig.projector_width:Math.round(tmp.x)
+        }
+      }
+      if(now_selsect_projector?.value=='0-1'){
+        if(index==0||index==2){
+          value.value[index].x = Math.round(tmp.x)<0?0:Math.round(tmp.x)
+        }
       }
 
+      send_value(index, value.value[index].x , value.value[index].y)
+      save_set_cache()
+    }
+    /**
+     * 点的数据发生修改时计算位置
+     * @param index
+     * @param $event
+     * @param type
+     */
     const chang = (index: number, $event: any, type: string) => {
       index = Number(index)
+      if (now_selsect_projector?.value == '0-0'&&props.col=='2') {
+
+        if (index == 1 || index == 3) {
+          value.value[index].x > allconfig.projector_width ? value.value[index].x =allconfig.projector_width : value.value[index].x
+        }
+      }
+      if (now_selsect_projector?.value == '0-1'&&props.col=='2') {
+        if (index == 0 || index == 2) {
+          value.value[index].x  < 0 ?  value.value[index].x= 0 :  value.value[index].x
+        }
+      }
       let tmp = coordinate_transformation_value_to_xy(value.value[index].x, value.value[index].y)
       value_point.value[index].y = Math.round(tmp.y)
       value_point.value[index].x = Math.round(tmp.x)
@@ -296,8 +468,10 @@ export default defineComponent({
     onMounted(() => {
       Proportion.value.x = allconfig.projector_width / (div.value.offsetWidth - point.value.w)
       Proportion.value.y = allconfig.projector_height / (div.value.offsetHeight - point.value.h)
+      set?.GetBlendingConfig("").then((res) => {
+        config=JSON.parse(res?.config??"").projectors[selectedprojector.value];
       start_point()
-      start()
+      //start()
       use_server_config()
       if (
         sessionStorage.FourPointCalibration &&
@@ -305,7 +479,8 @@ export default defineComponent({
       ) {
         set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
         use_set_cache();
-      }
+      }})
+      keyDown()
       window.onresize = () => {
         return (() => {
           if (div != null) {
@@ -339,6 +514,7 @@ export default defineComponent({
       value_point.value[index].x = Math.round(tmp.x)
       }
       send_value(-2,0,0)
+      save_set_cache()
     }
     const recalculate_coordinates = () => {
       try {
@@ -358,10 +534,228 @@ export default defineComponent({
 
       }
     }
+    /**
+     *  滚轮切换
+     * @param details
+     */
+    const details_selsect=(details:any) => {
+        let spt=details.deltaY/100
+        if(spt>0){
+          if(options_model.value>=value_point.value.length-1){
+            options_model.value=0
+          }else{
+            options_model.value++
+          }
+        }else{
+          if(options_model.value<=1){
+            options_model.value=value_point.value.length-1
+          }else{
+            options_model.value--
+          }
+
+        }
+    }
+
+    /**
+     * 滚轮改变数据
+     */
+    const details_selsect_val = (details: any, type: string) => {
+      let spt = details.deltaY / 100
+      switch (type) {
+        case 'x':
+      if (spt < 0) {
+        if(now_selsect_projector?.value=='0-0'&&props.col=='2'){
+        if(options_model.value==1||options_model.value==3){
+          value.value[options_model.value].x>allconfig.projector_width?value.value[options_model.value].x = allconfig.projector_width:value.value[options_model.value].x++
+        }else{
+          value.value[options_model.value].x++
+        }
+        }else{
+          value.value[options_model.value].x++
+        }
+      } else {
+
+        if(now_selsect_projector?.value=='0-1'&&props.col=='2'){
+        if(options_model.value==0||options_model.value==2){
+          value.value[options_model.value].x <0?value.value[options_model.value].x = 0:value.value[options_model.value].x --
+        }else{
+          value.value[options_model.value].x--
+        }
+        }else{
+          value.value[options_model.value].x --
+        }
+
+      }
+      break;
+      default:
+      if (spt < 0) {
+        value.value[options_model.value].y++
+      } else {
+        value.value[options_model.value].y--
+      }
+        break;
+    }
+    chang(options_model.value,"","")
+    }
+    /**
+     * 长按实现
+     * 单击实现
+     */
+    let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
+    const  handlerTouchstart=(type:string,fun:string)=>{
+      loop_end =  setTimeout(() => {
+        loop=setInterval(()=>{
+        if(type=='x'){
+          if(fun=='+'){
+            value.value[options_model.value].x++
+          }else{
+            value.value[options_model.value].x--
+          }
+
+        }else{
+          if(fun=='+'){
+            value.value[options_model.value].y++
+          }else{
+            value.value[options_model.value].y--
+          }
+        }
+        chang(options_model.value,0,'')
+      },10)
+      }, 1000);
+      if(type=='x'){
+          if(fun=='+'){
+            value.value[options_model.value].x++
+          }else{
+            value.value[options_model.value].x--
+          }
+
+        }else{
+          if(fun=='+'){
+            value.value[options_model.value].y++
+          }else{
+            value.value[options_model.value].y--
+          }
+        }
+        chang(options_model.value,0,'')
+    }
+    const handlerTouchend=()=>{
+      clearTimeout(loop_end)
+      clearInterval(loop)
+    }
+    /**
+     * 键盘监听
+     */
+     const keyDown = () => {
+      document.onkeydown = (e) => {
+        let lock=0;
+        let e1 = e || window.event || arguments.callee.caller.arguments[0]
+        switch (e.code) {
+          case "KeyW":
+            value.value[options_model.value].y++
+            break;
+          case "KeyA":
+          value.value[options_model.value].x--
+            break;
+          case "KeyS":
+          value.value[options_model.value].y--
+            break;
+          case "KeyD":
+          value.value[options_model.value].x++
+            break;
+          default:
+            lock=1
+            break;
+        }
+        if(lock==0)chang(options_model.value,"h", 'h')
+      }
+    }
+    const ispad=computed(()=>{
+      let url = window.location.href;
+      return url.indexOf("pad")!=-1
+    })
+    const add_cut=(fun:string,type:string)=>{
+      switch (type) {
+        case 'x':
+          if(fun=='+'){
+            value.value[options_model.value].x++
+          }else{
+            value.value[options_model.value].x--
+          }
+          break;
+
+        default:
+        if(fun=='+'){
+            value.value[options_model.value].y++
+          }else{
+            value.value[options_model.value].y--
+          }
+          break;
+      }
+    }
+
+    let loop_start:NodeJS.Timeout
+    let loop_finish:NodeJS.Timeout
+    const input_x_focus=ref(false)
+    const input_y_focus=ref(false)
+    const mousedown = (fun:string,type:string) => {
+      loop_start=  setTimeout(() => {
+        loop_finish=setInterval(()=>{
+          switch (type) {
+        case 'x':
+          if(fun=='+'){
+            value.value[options_model.value].x++
+          }else{
+            value.value[options_model.value].x--
+          }
+          break;
+
+        default:
+        if(fun=='+'){
+            value.value[options_model.value].y++
+          }else{
+            value.value[options_model.value].y--
+          }
+          break;
+      }
+      chang(options_model.value,0,'')
+        },30)
+      }, 1000);
+      switch (type) {
+        case 'x':
+          if(fun=='+'){
+            value.value[options_model.value].x++
+          }else{
+            value.value[options_model.value].x--
+          }
+          break;
+
+        default:
+        if(fun=='+'){
+            value.value[options_model.value].y++
+          }else{
+            value.value[options_model.value].y--
+          }
+          break;
+      }
+      chang(options_model.value,0,'')
+    }
+
+    const mouseup = () => {
+      clearTimeout(loop_start)
+      clearInterval(loop_finish)
+    }
     defineExpose({
       options_model,
     });
     return {
+      input_x_focus,
+      input_y_focus,
+      mousedown,
+      mouseup,
+      add_cut,
+      now_selsect_projector,
+      details_selsect,
       resetall,
       div,
       max,
@@ -374,7 +768,13 @@ export default defineComponent({
       reset,
       value_point_amount,
       chang_point_amount,
-      options
+      options,
+      details_selsect_val,
+      ipad_chang,
+      url,
+      handlerTouchstart,
+      handlerTouchend,
+      ispad
     }
   }
 })

src/components/FusionSettings/FusionLocale.vue

@@ -11,15 +11,33 @@
                   <q-toggle class="float-right" v-model="array[0].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input dense filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
-                    @focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 0"
+                    :bg-color="group == 0 ? 'cyan-1' : ''" @focus="group = 0" v-model.number="array[0].value"
+                    :label="$t('upper fusion zone parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 0 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.height) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 0"
+                    :bg-color="group == 0 ? 'cyan-1' : ''" @focus="() => { group = 0; input_focus[0] = true }"
+                    v-model.number="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 0 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[0] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[0]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 0)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 0)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
@@ -30,39 +48,75 @@
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[1].isshow" label="" />
+                  <q-toggle class="float-right" @click="group = 1" v-model="array[1].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input dense filled type="number" :autofocus="group == 1" :bg-color="group == 1 ? 'cyan-1' : ''"
-                    @focus="group = 1" v-model="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 1"
+                    :bg-color="group == 1 ? 'cyan-1' : ''" @focus="group = 1" v-model.number="array[1].value"
+                    :label="$t('Left fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 1 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.width) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 1"
+                    :bg-color="group == 1 ? 'cyan-1' : ''" @focus="() => { group = 1; input_focus[1] = true }"
+                    v-model.number="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 1 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[1] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[1]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 1)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 1)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
             <div class="col-6">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right" v-model="array[2].isshow" label="" />
+                  <q-toggle class="float-right" @click="group = 2" v-model="array[2].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input dense filled type="number" :autofocus="group == 2" :bg-color="group == 2 ? 'cyan-1' : ''"
-                    @focus="group = 2" v-model="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 2"
+                    :bg-color="group == 2 ? 'cyan-1' : ''" @focus="group = 2" v-model.number="array[2].value"
+                    :label="$t('Right fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 2 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.width) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 2"
+                    :bg-color="group == 2 ? 'cyan-1' : ''" @focus="() => { group = 2; input_focus[2] = true }"
+                    v-model.number="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 2 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[2] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[2]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 2)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 2)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
                 <div class="col-3"><span>{{ $t('Whether to operate synchronously') }}</span><q-checkbox
-                    v-model="auto_sync" /></div>
+                    v-model="auto_sync" @update:model-value="() => { }" /></div>
               </div>
             </div>
           </div>
@@ -75,15 +129,33 @@
                   <q-toggle class="float-right" v-model="array[3].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input dense filled type="number" :autofocus="group == 3" :bg-color="group == 3 ? 'cyan-1' : ''"
-                    @focus="group = 3" v-model="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 3"
+                    :bg-color="group == 3 ? 'cyan-1' : ''" @focus="group = 3" v-model.number="array[3].value"
+                    :label="$t('Lower fusion Zone Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 3 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.height) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 3"
+                    :bg-color="group == 3 ? 'cyan-1' : ''" @focus="() => { group = 3; input_focus[3] = true }"
+                    v-model.number="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 3 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[3] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[3]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="handlerTouchstart('+')" @mouseup="handlerTouchend" />
+                      <q-icon name="arrow_downward" @mousedown="handlerTouchstart('-')" @mouseup="handlerTouchend" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
@@ -91,20 +163,38 @@
         </div>
       </div>
     </div>
-    <div class="col-12" v-if="group != 4">
+    <div class="col-12" v-show="group != 4 || ispad">
       <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 v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
-            vertical reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
-              @update:model-value="chang('alpha')" v-model="array[group].alpha" lazy-rules :rules="[
+          <q-slider v-model="array[group].alpha" v-show="!ispad" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01"
+            color="green" vertical reverse label-always />
+          <div> <q-input v-show="ispad" dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
+              @update:model-value="chang('alpha')"
+              @click="() => { now_apg = 'alpha'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].alpha" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
               ]" />
+            <q-input v-show="!ispad" dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
+              @update:model-value="chang('alpha')"
+              @click="() => { now_apg = 'alpha'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              @focus="input_focus_apg[0] = true" @blur="input_focus_apg[0] = false" v-model.number="array[group].alpha"
+              lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
+              ]">
+              <template v-if="input_focus_apg[0]" v-slot:append>
+                <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+              </template>
+            </q-input>
             <p style="text-align: center;">Alpha</p>
             <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('alpha')" text-color="black"
               :label="$t('reset')" />
@@ -112,16 +202,32 @@
         </div>
 
         <div>
-          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green" vertical
-            reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-              @update:model-value="chang('p')" v-model="array[group].p" lazy-rules :rules="[
+          <q-slider v-model="array[group].p" v-show="!ispad" :min="0" @change="chang('p')" :max="16" :step="0.01"
+            color="green" vertical reverse label-always />
+          <div> <q-input v-show="ispad" dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('p')" @click="() => { now_apg = 'p'; ispad ? ipad_chang_input = true : '' }"
+              :readonly="ispad" v-model.number="array[group].p" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
               ]" />
+            <q-input v-show="!ispad" dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @focus="input_focus_apg[1] = true" @blur="input_focus_apg[1] = false" @update:model-value="chang('p')"
+              @click="() => { now_apg = 'p'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].p" lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
+              ]">
+              <template v-if="input_focus_apg[1]" v-slot:append>
+                <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+              </template>
+            </q-input>
             <p style="text-align: center;">Power</p>
             <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('p')" text-color="black"
               :label="$t('reset')" />
@@ -129,17 +235,34 @@
         </div>
 
         <div>
-          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
-            vertical reverse label-always />
+          <q-slider v-model="array[group].gamma" v-show="!ispad" :min="0" @change="chang('gamma')" :max="16" :step="0.01"
+            color="green" vertical reverse label-always />
           <div>
-            <q-input :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-              @update:model-value="chang('gamma')" v-model="array[group].gamma" lazy-rules :rules="[
+            <q-input v-show="ispad" :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('gamma')"
+              @click="() => { now_apg = 'gamma'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].gamma" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
               ]" />
+            <q-input v-show="!ispad" :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('gamma')" @focus="input_focus_apg[2] = true" @blur="input_focus_apg[2] = false"
+              @click="() => { now_apg = 'gamma'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].gamma" lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
+              ]">
+              <template v-if="input_focus_apg[2]" v-slot:append>
+                <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+              </template>
+            </q-input>
             <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')" />
@@ -147,12 +270,88 @@
         </div>
       </div>
     </div>
+    <div class="col-12">
+      <div class="row" style="min-height: 40px;">
+        <div class="col-4 col-sm-3"></div>
+        <div class="col-4 col-sm-6 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" :rules="['anyColor']">
+                <template v-slot:append>
+                  <q-icon name="colorize" class="cursor-pointer">
+                    <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                      <q-color v-model="color" @change="submit" />
+                    </q-popup-proxy>
+                  </q-icon>
+                </template>
+              </q-input>
+            </q-item-section>
+          </q-item>
+        </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)}"
+    <q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }"
       :label="$t('auxiliary lines')" />
   </div>
+
+
+  <q-dialog v-model="ipad_chang" ref="ipadref">
+    <q-card style="width: 40vw; max-width: 80vw;">
+      <q-card-section>
+        <!-- <div class="text-h6">{{ $t('fusion zone') + (group + 1) }}</div> -->
+        <div class="row">
+          <div class="col-4"><q-select class="q-pt-md" :label="$t('fusion zone')" :dense="true" filled v-model="group"
+              @update:model-value="(val) => { group = val }" :options="options" emit-value map-options /></div>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <div class="row  q-pb-md">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up"
+              @touchstart="handlerTouchstart('+')" @touchend="handlerTouchend" /></div>
+        </div>
+        <div class="row  q-pt-md">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_down" @touchstart="handlerTouchstart('-')" @touchend="handlerTouchend" /></div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang = false" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="ipad_chang_input">
+    <q-card style="width: 40vw; max-width: 80vw;">
+      <q-card-section>
+        <!-- <div class="text-h6">{{ $t('fusion zone') + options[group].label + ` ${now_apg}` }}</div> -->
+        <div class="row">
+          <div class="col-4"><q-select class="q-pt-md" :label="$t('fusion zone')  + ` ${now_apg}`" :dense="true" filled v-model="group"
+              @update:model-value="(val) => { group = val }" :options="options" emit-value map-options /></div>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <div class="row  q-pb-md">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up"
+              @touchstart="handlerTouchstart_apg('+')" @touchend="handlerTouchend_apg" /></div>
+        </div>
+        <div class="row  q-pt-md">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_down" @touchstart="handlerTouchstart_apg('-')" @touchend="handlerTouchend_apg" /></div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang_input = false" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>
@@ -171,6 +370,14 @@
 p {
   margin: 0;
 }
+</style>
+ <!-- 取消浏览器自带的input箭头 使用q-input的图标实现  -->
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
 </style>
 
 <script lang="ts">
@@ -184,12 +391,11 @@ import {
   onBeforeUnmount,
   reactive,
   onMounted,
+  toRefs,
 } 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",
@@ -197,7 +403,7 @@ export default defineComponent({
     let set = GlobalData.getInstance().getCurrentClient();
     let $store = useStore();
     let $t = useI18n();
-    const group = ref(4);
+    const group = ref(2);
     const set_cache: any = ref([]);
     const enablefusion = ref(false);
     let array: any = reactive([
@@ -207,7 +413,7 @@ export default defineComponent({
       { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
       { alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 },
     ]);
-    const auto_sync = ref(false)
+    const auto_sync = ref(true)
     const auxiliary_line = ref(false)
     const send_auxiliary_line = (val: boolean) => {
       set?.SetBlendingOption("blending_grids_assistant_lines", val ? "1" : "0");
@@ -221,6 +427,15 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
+    const color = ref("#ffffff");
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
+    /**
+     * 重置数据
+     * @param type
+     */
     const reset = (type: string) => {
       switch (type) {
         case 'gamma':
@@ -237,13 +452,24 @@ export default defineComponent({
       }
       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);
       }
     };
+    /**
+     * 深度拷贝
+     * @param o1
+     * @param o2
+     */
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -254,17 +480,29 @@ export default defineComponent({
         }
       }
     };
+    /**
+     * 保存缓存
+     */
     const save_set_cache = () => {
       set_cache.value[selectedprojector.value] = JSON.stringify(array);
     };
-    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
+
+    let config = JSON.parse($store.state.fusion_configuration).projectors[selectedprojector.value];
+    /**
+     * 当前选择的投影机
+     */
     const configselsect = computed(() => {
       return $store.state.selected_projector;
     });
+    /**
+     * 监听投影机切换
+     */
     watch(
       () => configselsect,
       (newVal, oldVal) => {
-        let tmp = JSON.parse($store.state.fusion_configuration);
+        set?.GetBlendingConfig("").then((res) => {
+          let tmp = JSON.parse(res ? res.config : "");
+          // let tmp = JSON.parse($store.state.fusion_configuration);
           let fortmp = null;
           let i;
           for (i of tmp.projectors) {
@@ -279,15 +517,20 @@ export default defineComponent({
 
           config = JSON.parse(JSON.stringify(fortmp));
           use_server_config();
-        use_set_cache();
+          // use_set_cache();
           setTimeout(() => {
             ste_status.value = 0;
           }, 100);
           setnowindex();
+        });
+
       },
       { deep: true }
     );
-
+      /**
+       * 输入inpu数据 时发送到后端
+       * @param type
+       */
     const chang = (type: string) => {
       if (ste_status.value == 1) return
       if (type == "alpha") {
@@ -320,6 +563,9 @@ export default defineComponent({
       save_set_cache();
     };
     //左上右下
+    /**
+     * 初始化数据时 自动获取焦点 的判断
+     */
     const setnowindex = () => {
       let sum = 0;
       let indexx = 4;
@@ -363,6 +609,9 @@ export default defineComponent({
       }, 100);
       setnowindex();
     };
+    /**
+     * 初始化赋值
+     */
     const startconfig = () => {
       for (let index = 0; index < array.length - 1; index++) {
         array[arr[index]].gamma = Number(config.params[index].gamma.toFixed(2));
@@ -372,11 +621,14 @@ export default defineComponent({
         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"
+      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));
@@ -387,14 +639,22 @@ export default defineComponent({
       }
     };
     onMounted(() => {
+      set?.GetBlendingConfig("").then((res) => {
+        let tmp = JSON.parse(res ? res.config : "");
+        config = tmp.projectors[selectedprojector.value];
         ste_status.value = 1;
+        color.value = tmp.blending_grids_background_color ?? "#7f7f7f"
+        // console.log(tmp.blending_grids_background_color )
         startconfig();
         setTimeout(() => {
           ste_status.value = 0;
         }, 100);
+      })
+      if (sessionStorage.FusionLocale_async) auto_sync.value = sessionStorage.FusionLocale_async == 'true'
     }),
       onBeforeUnmount(() => {
         sessionStorage.FusionLocale = JSON.stringify(set_cache.value);
+        sessionStorage.FusionLocale_async = auto_sync.value
       });
 
     watch(
@@ -406,7 +666,7 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             1,
             array[0].isshow,
-            Number(array[0].value)
+            Number(array[0].value), auto_sync.value
           );
 
         save_set_cache();
@@ -422,9 +682,13 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             0,
             array[1].isshow,
-            Number(array[1].value)
+            Number(array[1].value), auto_sync.value
           );
-        if (auto_sync.value) left_right_auto_add(newVal);
+        if (auto_sync.value) {
+          // left_right_auto_add(Number(newVal)%2==0?newVal:Number(newVal)+1);
+
+        }
+        Number(newVal) % 2 != 0 ? array[1].value = Number(array[1].value) + 1 : ''
         save_set_cache();
       },
       { deep: true }
@@ -438,9 +702,10 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             2,
             array[2].isshow,
-            Number(array[2].value)
+            Number(array[2].value), auto_sync.value
           );
-        if (auto_sync.value) left_right_auto_add(newVal);
+        // if (auto_sync.value) left_right_auto_add(Number(newVal)%2==0?newVal:Number(newVal)+1);
+        Number(newVal) % 2 != 0 ? array[2].value = Number(array[2].value) + 1 : ''
         save_set_cache();
       },
       { deep: true }
@@ -454,7 +719,7 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             3,
             array[3].isshow,
-            Number(array[3].value)
+            Number(array[3].value), auto_sync.value
           );
         save_set_cache();
       },
@@ -471,7 +736,7 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             1,
             array[0].isshow,
-            Number(array[0].value)
+            Number(array[0].value), auto_sync.value
           );
         save_set_cache();
       },
@@ -486,9 +751,9 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             0,
             array[1].isshow,
-            Number(array[1].value)
+            Number(array[1].value), auto_sync.value
           );
-        if (auto_sync.value) left_right_auto_add(-1);
+        // if (auto_sync.value) left_right_auto_add(-1);
         save_set_cache();
       },
       { deep: true }
@@ -502,9 +767,9 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             2,
             array[2].isshow,
-            Number(array[2].value)
+            Number(array[2].value), auto_sync.value
           );
-        if (auto_sync.value) left_right_auto_add(-1);
+        // if (auto_sync.value) left_right_auto_add(-1);
         save_set_cache();
       },
       { deep: true }
@@ -518,7 +783,7 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             3,
             array[3].isshow,
-            Number(array[3].value)
+            Number(array[3].value), auto_sync.value
           );
         save_set_cache();
       },
@@ -537,71 +802,220 @@ export default defineComponent({
     const changenablefusion = () => {
       $store.commit("setenablefusion", enablefusion.value);
     };
-    const left_right_auto_add = (difference: number) => {
+    /**
+     * 利用缓存手动同步
+     */
+    // const left_right_auto_add = (difference: number) => {
+    //   let tmpobjall = JSON.parse($store.state.fusion_configuration)
+    //   if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0&&group.value==2) {
+    //     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) {
+    //       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&&group.value==1) {
 
-      let tmpobjall = JSON.parse($store.state.fusion_configuration)
-      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0) {
+    //     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
 
-        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)
-          }
+    //       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);
+    //     }
+    //   }
+    // }
+
+
+    // watch(()=>auto_sync,()=>{
+    //   console.log(auto_sync.value)
+    //   set?.SetBlendingOption("fusion_with_automatic_sync", auto_sync.value?'1':'0');
+    // },{deep:true})
+
+    /**
+     * 平板弹窗修改
+     */
+    const ipad_chang = ref(false)
+    /**
+     * 当前url路径
+     */
+    let url = window.location.href;
+
+
+    /**
+    * 长按实现
+    * 单击实现
+    */
+    let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
+    const handlerTouchstart = (fun: string) => {
+      loop_end = setTimeout(() => {
+        loop = setInterval(() => {
+          if (fun == '+') {
+            array[group.value].value += 2
           } else {
-          set_cache_tmp = tmp
+            array[group.value].value -= 2
           }
-        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
+        }, 30)
+      }, 100);
+      if (fun == '+') {
+        array[group.value].value += 2
       } 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);
+        array[group.value].value -= 2
       }
     }
-      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1) {
+    const handlerTouchend = () => {
+      clearInterval(loop)
+      clearTimeout(loop_end)
+    }
 
-        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)
+    const submit = () => {
+      set?.SetBlendingOption("blending_grids_background_color", color.value);
     }
+    /**
+* 处理平板模式下 伽马校正操作
+* 手写实现pad长按点击
+*/
+    const ipad_chang_input = ref(false)
+    const now_apg = ref("");
+    let loop__apg: NodeJS.Timeout
+    let loop__apg_end: NodeJS.Timeout
+    const handlerTouchstart_apg = (fun: string) => {
+      loop__apg_end = setTimeout(() => {
+        loop__apg = setInterval(() => {
+          if (fun == '+') {
+            array[group.value][now_apg.value] = toDecimal(array[group.value][now_apg.value] + 0.1)
           } else {
-          set_cache_tmp = tmp
+            array[group.value][now_apg.value] = toDecimal(array[group.value][now_apg.value] - 0.1)
+          }
+          chang(now_apg.value)
+        }, 30)
+      }, 1000);
+      if (fun == '+') {
+        array[group.value][now_apg.value] = toDecimal(array[group.value][now_apg.value] + 0.1)
+      } else {
+        array[group.value][now_apg.value] = toDecimal(array[group.value][now_apg.value] - 0.1)
+      }
+      chang(now_apg.value)
+    }
+    const handlerTouchend_apg = () => {
+      clearTimeout(loop__apg_end)
+      clearInterval(loop__apg)
+    }
+    const toDecimal = (num: number): number => {
+      return Math.round(num * 100) / 100;
     }
-        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
+
+
+
+    let loop_start: NodeJS.Timeout
+    let loop_finish: NodeJS.Timeout
+    const input_focus = ref([false, false, false, false,])
+    const mousedown = (fun: string, index: number) => {
+      loop_start = setTimeout(() => {
+        loop_finish = setInterval(() => {
+          if (fun == '+') {
+            array[index].value += 2
           } else {
-            set_cache_tmp[2].value = difference
+            array[index].value -= 2
           }
-          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);
+        }, 30)
+      }, 1000);
+      if (fun == '+') {
+        array[index].value += 2
+      } else {
+        array[index].value -= 2
       }
     }
+
+    const mouseup = () => {
+      clearTimeout(loop_start)
+      clearInterval(loop_finish)
     }
+
+
+    const input_focus_apg = ref([false, false, false,])
+
+
+
+    // const ["上","左","右","下"]
+    /**
+     * 可供选择的
+     */
+    const options = [{
+      label: $t.t('up'),
+      value: 0
+    }, {
+      label: $t.t('left'),
+      value: 1
+    }, {
+      label: $t.t('right'),
+      value: 2
+    }, {
+      label: $t.t('down'),
+      value: 3
+    }]
+
+
     return {
+      options,
+      input_focus_apg,
+      input_focus,
+      mousedown,
+      mouseup,
+      now_apg,
+      handlerTouchstart_apg,
+      handlerTouchend_apg,
+      ipad_chang_input,
       send_auxiliary_line,
       group,
       array,
       chang,
       enablefusion,
-      changenablefusion,
+      // changenablefusion,
       selectedprojector,
       set_cache,
       auxiliary_line,
       reset,
       auto_sync,
-      config
+      config,
+      save_set_cache,
+      ipad_chang,
+      url,
+      handlerTouchstart,
+      handlerTouchend,
+      ispad,
+      color,
+      submit
     };
   },
 });

src/components/FusionSettings/GridSettings.vue

@@ -4,8 +4,8 @@
       <div class="row">
         <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[0]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm"><q-select outlined v-model="model[0]"
                 @update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
                 :label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
               v-model="RowsColumns[0]" />
@@ -13,8 +13,8 @@
         </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]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 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]" />
@@ -22,16 +22,16 @@
         </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]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 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">
+            <div class="col-4  col-sm-3"></div>
+            <div class="col-4  col-sm-6 q-pt-sm">
               <q-item>
                 <q-item-section avatar class="head_1">
                   {{ $t("line color") }}
@@ -51,33 +51,11 @@
             </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">
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm">
               <q-item>
                 <q-item-section avatar class="head_1">
                   {{ $t("center circle color") }}
@@ -130,8 +108,11 @@ export default defineComponent({
     const index = ref(0);
     const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
     let model = reactive([20, 40, 20]);
-    let options = ref([10, 20, 30, 40, 50]);
+    let options = ref([10, 20, 30, 40, 50, 60 ,80]);
     let line_width_options = ref([2,4,6,8,10, 20, 30, 40, 50]);
+    /**
+     * 发送颜色 根据index不同确定是那个接口
+     */
     const submit = () => {
       switch (index.value) {
         case 0:
@@ -150,6 +131,11 @@ export default defineComponent({
           break;
       }
     }
+    /**
+     * 修改 横纵 线的数量
+     * @param type 类型
+     * @param value 值
+     */
     const update_row_col = (type: number, value: number) => {
       switch (type) {
         case 0:
@@ -165,6 +151,10 @@ export default defineComponent({
           break;
       }
     }
+    /**
+     * 修改 单选 发送数据 使用switch 匹配多个
+     * @param type
+     */
     const send_off = (type: number) => {
       setTimeout(() => {
         switch (type) {
@@ -186,6 +176,9 @@ export default defineComponent({
         }
       }, 100);
     }
+    /**
+     * 使用服务端配置
+     */
     const use_server_config = () => {
       let server_conf = JSON.parse($store.state.fusion_configuration).options
       model[0] = server_conf.blending_grids_row ?? 20;
@@ -203,10 +196,16 @@ export default defineComponent({
     onBeforeUnmount(() => {
       set_sessionStorage()
     });
+    /**
+     * 保存缓存到sessionStorage
+     */
     const set_sessionStorage = () => {
       let tmp = { RowsColumns: RowsColumns, color: color, model: model }
       sessionStorage.GridSettings = JSON.stringify(tmp)
     }
+    /**
+     * 获取sessionStorage
+     */
     const get_sessionStorage = () => {
       let tmp = JSON.parse(sessionStorage.GridSettings)
       for (let index = 0; index < tmp.RowsColumns.length; index++) {

src/components/FusionSettings/SurfaceCorrection.vue

@@ -9,59 +9,115 @@
             v-model:x="value_point[index].x" v-model:y="value_point[index].y" @activated="options_model = index"
             @click="options_model = index" @dragging="dragStartHandle($event, index)">
             <span>{{
-              index+ 1
+              index + 1
             }}</span>
           </Vue3DraggableResizable>
         </div>
       </div>
     </div>
   </div>
-  <div>
-    <div class="row" v-show="false">
+  <div v-show="ispad">
+    <div class="row  q-md-py-xl">
       <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 />
+            @update:model-value="(val) => { now_amount = 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))"
+        <div class="col-1 q-pt-md "><q-btn color="white"
+            @click="() => { add_dialog = true; value_point_amount_tmp = value_point_amount; now_amount = 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 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 class="q-pt-md q-px-md col-4"> <q-btn color="white" @click="resetall_all" text-color="black"
+          :label="$t('Reset all program control points')" /></div>
     </div>
     <div class="row">
       <div class="col-1"></div>
-      <div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('point')" :dense="true" filled
-          v-model="options_model" @update:model-value="(val) => { options_model = val }" :options="options" emit-value
-          map-options /></div>
-      <div class="col-2 q-px-md"> <q-input filled type="number" class="q-pt-md" :dense="true"
-          v-model="value[options_model].x" @update:model-value="chang(options_model, $event, 'h')" label="x"
-          lazy-rules />
+      <div class="col-2 q-px-md" @mousewheel="details_selsect"> <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" @mousewheel="details_selsect_val($event, 'x')"> <q-input v-if="value[options_model]"
+          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
+          @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" />
+      </div>
+      <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'y')"><q-input v-if="value[options_model]"
+          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
+          @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" />
       </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 class="q-pt-md q-px-md col-3"> <q-btn color="white" @click="resetall" text-color="black"
+          :label="$t('reset all') + value_point_amount + $t('point')" /></div>
+    </div>
+  </div>
+
+  <div v-show="!ispad">
+    <div style="display: flex;justify-content: space-around;">
+      <div style="min-width: 100px;"> <q-select class="q-pt-md" :label="$t('point amount')"
+          @update:model-value="(val) => { now_amount = val; chang_point_amount(val) }" :dense="true" filled
+          v-model="value_point_amount" :options="options_value_point_amount" emit-value map-options />
+      </div>
+      <div class=" q-pt-md "><q-btn color="white"
+          @click="() => { add_dialog = true; value_point_amount_tmp = value_point_amount; now_amount = value_point_amount }"
+          text-color="black" :label="$t('add control points')" /></div>
+      <div class="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 class="q-pt-md q-px-md "> <q-btn color="white" @click="resetall_all" text-color="black"
+          :label="$t('Reset all program control points')" /></div>
+    </div>
+
+    <div style="display: flex;justify-content: space-around;">
+      <div  style="min-width: 100px;" @mousewheel="details_selsect"> <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=" q-px-md" @mousewheel="details_selsect_val($event, 'x')"> <q-input v-if="value[options_model]" 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
+          @focus="input_x_focus=true" @blur="input_x_focus=false"
+          @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" >
+          <template v-if="input_x_focus" v-slot:append>
+          <q-icon name="arrow_upward" @mousedown="mousedown('+','x')" @mouseup="mouseup" />
+          <q-icon name="arrow_downward"  @mousedown="mousedown('-','x')" @mouseup="mouseup"  />
+        </template>
+        </q-input>
+      </div>
+      <div class=" q-px-md" @mousewheel="details_selsect_val($event, 'y')"><q-input v-if="value[options_model]" 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
+          @focus="input_y_focus=true" @blur="input_y_focus=false"
+          @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" >
+          <template v-if="input_y_focus" v-slot:append>
+          <q-icon name="arrow_upward" @mousedown="mousedown('+','y')" @mouseup="mouseup" />
+          <q-icon name="arrow_downward"  @mousedown="mousedown('-','y')" @mouseup="mouseup"  />
+        </template>
+        </q-input>
+      </div>
+      <div class="q-pt-md ">
+        <q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
+
+      </div>
+      <div class="q-pt-md q-px-md "> <q-btn color="white" @click="resetall" text-color="black"
+          :label="$t('reset all') + value_point_amount + $t('point')" /></div>
     </div>
   </div>
 
 
-  </div>
   <q-dialog v-model="del_dialog">
-    <q-card style="width: 700px; max-width: 80vw;">
+    <q-card style="width: 500px; max-width: 80vw;">
       <q-card-section>
         <div class="text-h6">{{ $t('confirm delete') }}</div>
       </q-card-section>
@@ -75,6 +131,65 @@
     </q-card>
   </q-dialog>
 
+
+
+  <q-dialog position="bottom" v-model="add_dialog">
+    <q-card style="width: 500px; 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">
+        <div class="row">
+          <div class="col-10"><q-input filled v-model="now_amount" min="3" disable type="number"
+              :label="$t('Please enter the points you need to add')"
+              @update:model-value="(val: any) => { preview(val) }" />
+          </div>
+          <div class="col-1 q-pa-sm"> <q-btn color="white" text-color="black" label="↑"
+              @click="() => { preview(Math.sqrt(now_amount) + 1) }" /> </div>
+          <div class="col-1 q-pa-sm"> <q-btn color="white" text-color="black" label="↓"
+              @click="() => { preview(Math.sqrt(now_amount) - 1) }" /></div>
+        </div>
+
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('Cancel')" @click="() => { preview(Math.sqrt(value_point_amount_tmp)) }" 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>
+
+
+  <q-dialog v-model="ipad_chang">
+    <q-card style="width: 40vw; max-width: 80vw;">
+      <q-card-section>
+        <!-- <div class="text-h6">{{ $t('point') +(options_model+1 )}}</div> -->
+        <div class="row">
+          <div class="col-4"><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>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <div class="row">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up"
+              @touchstart="handlerTouchstart('y', '+')" @touchend="handlerTouchend" /></div>
+        </div>
+        <div class="row">
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_left" @touchstart="handlerTouchstart('x', '-')" @touchend="handlerTouchend" /></div>
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x', '+')" @touchend="handlerTouchend" /></div>
+        </div>
+        <div class="row">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_down" @touchstart="handlerTouchstart('y', '-')" @touchend="handlerTouchend" /></div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang = false" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped>
@@ -89,6 +204,16 @@
 }
 </style>
 
+ <!-- 取消浏览器自带的input箭头 使用q-input的图标实现  -->
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+</style>
+
+
 <script lang="ts">
 import {
   defineComponent,
@@ -125,11 +250,20 @@ export default defineComponent({
     let $t = useI18n();
     const ste_status = ref(0);
     let allconfig = JSON.parse($store.state.fusion_configuration);
-    let config = JSON.parse($store.state.fusion_configuration).projectors[0];
+
     const configselsect = computed(() => {
       return $store.state.selected_projector;
     });
 
+    /**
+     * 平板弹窗修改
+     */
+    const ipad_chang = ref(false)
+    /**
+     * 当前url路径
+     */
+    let url = window.location.href;
+
     //用于计算当前投影仪的索引
     let serverconfig = JSON.parse($store.state.fusion_configuration);
     const selectedprojector = computed(() => {
@@ -138,13 +272,35 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
-
+    /**
+     * 当前投影机的数据
+     */
+    let config = JSON.parse($store.state.fusion_configuration).projectors[selectedprojector.value];
+    /**
+     * 当前点的个数
+     */
     const value_point_amount = ref(9)
+    /**
+     * 删除 弹窗
+     */
     const del_dialog = ref(false)
-
-
+    /**
+     * 添加弹窗
+     */
+    const add_dialog = ref(false)
+    /**
+     * 当前点的个数
+     */
+    const now_amount = ref(9)
+    /**
+     * 可以选择点数的列表
+     */
     const options_value_point_amount = ref(<string[]>[])
-
+    /**
+     * 深度copy
+     * @param o1
+     * @param o2
+     */
     const deepcopy = (o1: any, o2: any) => {
       for (let k in o2) {
         if (typeof o2[k] === "object") {
@@ -156,10 +312,12 @@ export default defineComponent({
         }
       }
     };
-
+    /**
+     * 使用服务端获取的配置
+     */
     const use_server_config = () => {
-      value_point_amount.value=9
-      let a = 9
+      value_point_amount.value = Number(Object.keys(config.multi_curved_surface)[0])
+      let a = value_point_amount.value
       value.value = []
       value_point.value = []
       for (let index = 0; index < config.multi_curved_surface[a].length; index++) {
@@ -177,7 +335,9 @@ export default defineComponent({
         value_point.value.push(tmp_point)
       }
     }
-
+    /**
+     * 使用本地缓存配置
+     */
     const use_set_cache = () => {
       if (set_cache.value[selectedprojector.value] != null) {
         let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
@@ -187,13 +347,17 @@ export default defineComponent({
         recalculate_coordinates()
       }
     }
-
+    /**
+     * 保存本地缓存
+     */
     const save_set_cache = () => {
-      let tmp = { value: value.value, value_point_amount: value_point_amount.value, value_point: value_point.value}
+      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) => {
@@ -214,14 +378,18 @@ export default defineComponent({
         use_set_cache();
         options_value_point_amount.value = Object.keys(config.multi_curved_surface)
         setTimeout(() => {
-          ste_status.value = 0;
+          set?.SetBlendingOption("blending_grids_control_point_count", `${value_point_amount.value}`)
         }, 100);
+        setTimeout(() => {
+          ste_status.value = 0;
+        }, 120);
       },
       { deep: true }
     );
 
-
-
+      /**
+       * 缓存 变量
+       */
     const set_cache: any = ref([]);
     //值
     let value = ref(<DensityCorrection[]>[]);
@@ -233,15 +401,26 @@ export default defineComponent({
     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}`)
+      if (ste_status.value == 0) set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+      options_model.value = 0
       save_set_cache()
     }, { deep: true })
 
@@ -254,12 +433,19 @@ export default defineComponent({
       max.value.y = div.value.offsetHeight
     })
 
-
+    /**
+     * 变更点数
+     * @param val
+     */
     const chang_point_amount = (val: number) => {
       start_point(val)
       //use_set_cache()
     }
-
+    /**
+     * 拖拽组件移动回调
+     * @param $event
+     * @param index
+     */
     const dragStartHandle = ($event: any, index: number) => {
       let obj_x = $event.x
       let obj_y = $event.y
@@ -269,7 +455,12 @@ export default defineComponent({
       send_value(index, Math.trunc(tmp.x), Math.trunc(tmp.y))
       save_set_cache()
     }
-
+    /**
+     * 修改input 手动计算拖拽组件的位置
+     * @param index
+     * @param $event
+     * @param type
+     */
     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)
@@ -279,6 +470,9 @@ export default defineComponent({
 
       save_set_cache()
     }
+    /**
+     * 计算可供选择的点
+     */
     const options = computed(() => {
       let tmp = []
       for (let index = 0; index < value_point.value.length; index++) {
@@ -313,7 +507,10 @@ export default defineComponent({
       y = (max.value.y - (y + point.value.h)) * Proportion.value.y
       return { x, y }
     }
-
+    /**
+     * 初始化 赋值
+     * @param a
+     */
     const start_point = (a: number) => {
       value.value = []
       value_point.value = []
@@ -331,9 +528,12 @@ export default defineComponent({
         }
         value_point.value.push(tmp_point)
       }
+      save_set_cache()
     }
 
-
+    /**
+     * 用于模拟数据让dom先渲染
+     */
     const start = () => {
       let tmp: DensityCorrectionPoint = { control_point: 0, x: 0, y: 0, def_x: 0, def_y: 0 };
       value.value.push(tmp)
@@ -341,11 +541,16 @@ export default defineComponent({
     }
     start()
     onMounted(() => {
+      /**
+       * 计算比例
+       */
       Proportion.value.x = allconfig.projector_width / (div.value.offsetWidth - point.value.w)
       Proportion.value.y = allconfig.projector_height / (div.value.offsetHeight - point.value.h)
-      start_point(9)
+
       start()
       use_server_config()
+      options_value_point_amount.value = Object.keys(config.multi_curved_surface)
+      start_point(Number(options_value_point_amount.value[0]))
       if (
         sessionStorage.SurfaceCorrection &&
         sessionStorage.SurfaceCorrection.length > 0
@@ -353,7 +558,7 @@ export default defineComponent({
         set_cache.value = JSON.parse(sessionStorage.SurfaceCorrection);
         use_set_cache();
       }
-      options_value_point_amount.value = Object.keys(config.multi_curved_surface)
+      keyDown()
       window.onresize = () => {
         return (() => {
           if (div != null) {
@@ -362,22 +567,38 @@ export default defineComponent({
         })();
       };
     })
-
+    /**
+     * 注销组件时 把当前修改的数据存入sessionStorage
+     */
     onBeforeUnmount(() => {
       sessionStorage.SurfaceCorrection = JSON.stringify(set_cache.value);
     });
-
+    /**
+     * 重置
+     * @param index 索引
+     * @param send 是否发送给后端
+     * @param type
+     */
     const reset = (index: number, send: boolean, type: string) => {
       value.value[index].x = value.value[index].def_x
       value.value[index].y = value.value[index].def_y
       chang(index, value.value[index].def_y, type)
       save_set_cache()
     }
+    /**
+     * 发送点的数据
+     * @param index 当前点的索引
+     * @param x x值
+     * @param y y值
+     */
     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++) {
         value.value[index].x = value.value[index].def_x
@@ -386,8 +607,37 @@ export default defineComponent({
         value_point.value[index].y = Math.trunc(tmp.y)
         value_point.value[index].x = Math.trunc(tmp.x)
       }
-      send_value(-2,0,0)
+      send_value(-1, 0, 0)
+      save_set_cache()
     }
+    /**
+     * 重置所有配置方案的 配置
+     */
+    const resetall_all = () => {
+      let amount_tmp = value_point_amount.value
+      for (let index = 0; index < value_point.value.length; index++) {
+        value.value[index].x = value.value[index].def_x
+        value.value[index].y = value.value[index].def_y
+        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(-2, 0, 0)
+
+      for (let key in config.multi_curved_surface) {
+        for (let index = 0; index < config.multi_curved_surface[key].length; index++) {
+          config.multi_curved_surface[key][index].x = config.multi_curved_surface[key][index].def_x
+          config.multi_curved_surface[key][index].y = config.multi_curved_surface[key][index].def_y
+        }
+        start_point(Number(key))
+      }
+      value_point_amount.value = amount_tmp
+      start_point(Number(value_point_amount.value))
+
+    }
+    /**
+     * 窗口改变大小时重新计算 比例
+     */
     const recalculate_coordinates = () => {
       try {
         Proportion.value.x = allconfig.projector_width / (div.value.offsetWidth - point.value.w)
@@ -406,8 +656,12 @@ export default defineComponent({
 
       }
     }
+    /**
+     * 增加点数
+     * @param amount 数量 平方
+     */
     const add_control_points = (amount: number) => {
-      if (amount < 9) return
+      if (amount < 9 ||amount>=169) return
       let cardinality = Math.sqrt(amount)
       amount = (cardinality + 1) ** 2
       let tmpconfig: any = null
@@ -429,7 +683,7 @@ export default defineComponent({
         }
         ste_status.value = 1;
         tmpconfig = JSON.parse(JSON.stringify(fortmp));
-        config = JSON.parse(JSON.stringify(fortmp));
+        config = fortmp
         options_value_point_amount.value = []
         for (let key in tmpconfig.multi_curved_surface) {
           options_value_point_amount.value.push(key)
@@ -453,10 +707,16 @@ export default defineComponent({
           }
           value_point.value.push(tmp_point)
         }
+        ste_status.value = 0;
       });
+      save_set_cache()
     }
+    /**
+     * 删除点数量
+     * @param amount
+     */
     const del_control_points = (amount: number) => {
-      let tmp=amount
+      let tmp = amount
       if (amount <= 9) return
       let cardinality = Math.sqrt(amount)
       amount = (cardinality + -1) ** 2
@@ -484,8 +744,9 @@ export default defineComponent({
         for (let key in tmpconfig.multi_curved_surface) {
           options_value_point_amount.value.push(key)
         }
-        value_point_amount.value = 9
-        amount=9
+        value_point_amount.value = Number(options_value_point_amount.value[0])
+        amount = Number(options_value_point_amount.value[0])
+        now_amount.value = Number(options_value_point_amount.value[0])
         $store.commit("setfusion_configuration", res?.config);
         value.value = []
         value_point.value = []
@@ -503,13 +764,308 @@ export default defineComponent({
           }
           value_point.value.push(tmp_point)
         }
+        ste_status.value = 0;
 
       });
+      save_set_cache()
     }
+    const add = () => {
+      let tmpconfig: any = null
+      let row = $store.getters.GetTheCurrentlySelectedCamera[0]
+      let col = $store.getters.GetTheCurrentlySelectedCamera[1]
+      let amount = now_amount.value
+      set?.AddBlendingCtrlPoint('9', 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_point_amount.value = []
+        for (let key in tmpconfig.multi_curved_surface) {
+          options_value_point_amount.value.push(key)
+        }
+
+        value_point_amount.value = amount
+        $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)
+        }
+        ste_status.value = 0;
+      });
+      set?.SetBlendingOption("blending_grids_control_point_count", `${value_point_amount.value}`)
+      save_set_cache()
+    }
+    /**
+     * 预览增加点的效果
+     * @param val
+     */
+    const preview = (val: number) => {
+      val = Number(val)
+      if (val < 3||val>=13) return
+      let width = allconfig.projector_width / (val - 1)
+      let height = allconfig.projector_height / (val - 1)
+      value.value = []
+      value_point.value = []
+      for (let index = 0; index < val; index++) {
+        for (let indexx = 0; indexx < val; indexx++) {
+          let y = allconfig.projector_height - height * index
+          let x = width * indexx
+          let tmp: DensityCorrectionPoint = { x, y, def_x: x, def_y: y, control_point: index + indexx + 1 };
+          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)
+        }
+      }
+      now_amount.value = val ** 2
+      value_point_amount.value = val ** 2
+      options_model.value = 1
+      save_set_cache()
+    }
+
+    /**
+     *  滚轮切换
+     * @param details 鼠标返回对象
+     */
+    const details_selsect = (details: any) => {
+      let spt = details.deltaY / 100
+      if (spt > 0) {
+        if (options_model.value >= value_point.value.length - 1) {
+          options_model.value = 0
+        } else {
+          options_model.value++
+        }
+      } else {
+        if (options_model.value <= 1) {
+          options_model.value = value_point.value.length - 1
+        } else {
+          options_model.value--
+        }
+
+      }
+    }
+
+    /**
+     * 滚轮改变数据
+     */
+    const details_selsect_val = (details: any, type: string) => {
+      let spt = details.deltaY / 100
+      switch (type) {
+        case 'x':
+          if (spt < 0) {
+            value.value[options_model.value].x++
+          } else {
+            value.value[options_model.value].x--
+          }
+          break;
+        default:
+          if (spt < 0) {
+            value.value[options_model.value].y++
+          } else {
+            value.value[options_model.value].y--
+          }
+          break;
+      }
+      chang(options_model.value, "", "")
+    }
+    /**
+     * 在增加时 实现回退
+     */
+    const value_point_amount_tmp = ref(0)
+    /**
+    * 长按实现
+    */
+    let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
+    const handlerTouchstart = (type: string, fun: string) => {
+      loop_end = setTimeout(() => {
+        loop = setInterval(() => {
+          if (type == 'x') {
+            if (fun == '+') {
+              value.value[options_model.value].x++
+            } else {
+              value.value[options_model.value].x--
+            }
+
+          } else {
+            if (fun == '+') {
+              value.value[options_model.value].y++
+            } else {
+              value.value[options_model.value].y--
+            }
+          }
+          chang(options_model.value, 0, '')
+        }, 30)
+      }, 1000);
+      if (type == 'x') {
+            if (fun == '+') {
+              value.value[options_model.value].x++
+            } else {
+              value.value[options_model.value].x--
+            }
+
+          } else {
+            if (fun == '+') {
+              value.value[options_model.value].y++
+            } else {
+              value.value[options_model.value].y--
+            }
+          }
+          chang(options_model.value, 0, '')
+    }
+    const handlerTouchend = () => {
+      clearTimeout(loop_end)
+      clearInterval(loop)
+    }
+    /**
+     * 键盘监听
+     */
+    const keyDown = () => {
+      document.onkeydown = (e) => {
+        let lock = 0;
+        let e1 = e || window.event || arguments.callee.caller.arguments[0]
+        switch (e.code) {
+          case "KeyW":
+            value.value[options_model.value].y++
+            break;
+          case "KeyA":
+            value.value[options_model.value].x--
+            break;
+          case "KeyS":
+            value.value[options_model.value].y--
+            break;
+          case "KeyD":
+            value.value[options_model.value].x++
+            break;
+          default:
+            lock = 1
+            break;
+        }
+        if (lock == 0) chang(options_model.value, "h", 'h')
+      }
+    }
+
+    /**
+     * 判断是否是平板
+     */
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
+
+    /**
+     * 针对平板的 手动实现单机和长按
+     */
+    let loop_start: NodeJS.Timeout
+    let loop_finish: NodeJS.Timeout
+
+    const mousedown = (fun: string, type: string) => {
+      loop_start = setTimeout(() => {
+        loop_finish = setInterval(() => {
+          switch (type) {
+            case 'x':
+              if (fun == '+') {
+                value.value[options_model.value].x++
+              } else {
+                value.value[options_model.value].x--
+              }
+              break;
+
+            default:
+              if (fun == '+') {
+                value.value[options_model.value].y++
+              } else {
+                value.value[options_model.value].y--
+              }
+              break;
+          }
+          chang(options_model.value, 0, '')
+        }, 30)
+      }, 1000);
+      switch (type) {
+        case 'x':
+          if (fun == '+') {
+            value.value[options_model.value].x++
+          } else {
+            value.value[options_model.value].x--
+          }
+          break;
+
+        default:
+          if (fun == '+') {
+            value.value[options_model.value].y++
+          } else {
+            value.value[options_model.value].y--
+          }
+          break;
+      }
+      chang(options_model.value, 0, '')
+    }
+
+    const mouseup = () => {
+      clearTimeout(loop_start)
+      clearInterval(loop_finish)
+    }
+
+    /**
+     * 控制是否显示 input x 的自定义监听
+     */
+    const input_x_focus=ref(false)
+    /**
+     * 控制是否显示 input y 的自定义监听
+     */
+    const input_y_focus=ref(false)
+
+
+
+
+
+
+
+
+
     defineExpose({
       options_model,
     });
     return {
+       input_x_focus,
+     input_y_focus,
+      ispad,
+      mousedown,
+      mouseup,
+      value_point_amount_tmp,
+      details_selsect,
+      resetall_all,
       resetall,
       div,
       max,
@@ -526,7 +1082,16 @@ export default defineComponent({
       chang_point_amount,
       del_dialog,
       add_control_points,
-      del_control_points
+      del_control_points,
+      add_dialog,
+      add,
+      now_amount,
+      preview,
+      details_selsect_val,
+      ipad_chang,
+      url,
+      handlerTouchstart,
+      handlerTouchend
     }
   }
 })

src/components/FusionSettingsDialog.vue

@@ -9,7 +9,7 @@
       }
     }
   ">
-    <q-card class="" style="max-width: 90vw;padding: 0;">
+    <q-card class="" id="element" style="max-width: 90vw;padding: 0;">
       <q-form>
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
@@ -18,6 +18,9 @@
             </div>
 
             <q-space />
+            <q-btn v-show="ispad" size="sm" dense flat @click="element_full_screen" round :icon="is_pad_screen?'zoom_in_map':'zoom_out_map'" >
+
+            </q-btn>
             <q-btn size="sm" dense flat round icon="close" color="red" @click="clear()" v-close-popup>
               <q-tooltip>
                 {{ $t("close") }}
@@ -28,54 +31,55 @@
 
         <q-separator />
         <!-- height: 80vh -->
-        <q-card-section class="scroll" style="width: 60vw;padding: 0;">
+        <q-card-section class="scroll" :style="{ 'width': is_pad_style, padding: 0 }">
           <div class="row" style="border: 1px solid #b0bec5; text-align: center">
             <div class="col-2" style="border-right: 1px solid #b0bec5">
               <p class="text-center">{{ $t("Projector") }}</p>
               <!-- row 在前col在后 -->
+              <!-- <div v-for="(item, index_row) in config.row">
+                <projector-item v-for="(item, index_col) in config.col" class="w-100" :llabel="
+                  $t('Projector') + (index_row * config.col + index_col + 1)
+                " :lvalue="index_row + '/' + index_col"
+                  @click="currently_selected_projector(index_row + '-' + index_col)"></projector-item>
+              </div> -->
+
               <div v-for="(item, index_row) in config.row">
                 <projector-item v-for="(item, index_col) in config.col" class="w-100" :llabel="
                   $t('Projector') + (index_row * config.col + index_col + 1)
                 " :lvalue="index_row + '/' + index_col"
                   @click="currently_selected_projector(index_row + '-' + index_col)"></projector-item>
               </div>
+              <hr>
+              <div>
 
-
-
+                <div class="col-3 q-px-md "> <q-select class="q-pt-md overflow-hidden" :label="$t('change resolution')"
+                    @update:model-value="(val) => { dialog(val, set_resolution, 'resolution') }" :dense="true" filled
+                    v-model="now_resolution" :options="options_resolution" emit-value map-options /></div>
+                <!-- <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
+                    @filter="filterFn_projector" :label="$t('Change projector layout')"
+                    @update:model-value="(val) => { dialog(val, send_projectorlayout, 'projector') }" :dense="true" filled
+                    v-model="now_select_projectorlayout" :options="show_projectorlayout" emit-value map-options /></div> -->
+                    <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
+                    @filter="filterFn_projector2" :label="$t('Change projector layout')"
+                    @update:model-value="(val) => { dialog_projectorlayout(val, send_projectorlayout2) }" :dense="true" filled
+                    v-model="now_select_projectorlayout_tmp" :options="show_projectorlayout2" emit-value  /></div>
+              </div>
               <div class="col-12" style="text-align: center">
                 {{
-                  $t("Whether to enable integration")
+                  $t("Enable projection mode")
                 }}<q-checkbox v-model="EnableBlending" />
               </div>
-              <div class="col-3 q-px-md"> <q-select class="q-pt-md " :label="$t('change resolution')"
-          @update:model-value="(val) => { set_resolution(val) }" :dense="true" filled v-model="now_resolution"
-          :options="options_resolution" emit-value map-options /></div>
             </div>
             <div class="col-10">
               <div class="q-ta-md">
                 <q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
-                  :options="[
-                    { label: $t('FusionLocale'), value: 'FusionLocale' },
-                    {
-                      label: $t('FourPointCalibration'),
-                      value: 'FourPointCalibration',
-                    },
-                    {
-                      label: $t('SurfaceCorrection'),
-                      value: 'SurfaceCorrection',
-                    },
-                    {
-                      label: $t('DensityCorrection'),
-                      value: 'DensityCorrection',
-                    },
-                    { label: $t('GridSettings'), value: 'GridSettings' },
-                  ]" />
+                  :options="btn_options" />
                 <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 ref="child" :is="options" />
+                <component ref="child" :is="options" :row="config.row" :col="config.col" />
               </div>
             </div>
           </div>
@@ -95,16 +99,16 @@
           <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()" />
+            @click="select_configuration = true; select_configuration_name = ''; get_scenes()" />
           <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup
-            @click="$store.commit('setSelectedProjector', '0/0');" />
+            @click="$store.commit('setSelectedProjector', '0/0'); clear()" />
           <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 style="width: 40vw; max-width: 80vw;">
         <q-card-section>
           <div class="text-h6">{{ $t('Whether to save the configuration') }}</div>
         </q-card-section>
@@ -124,15 +128,15 @@
           </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-btn flat :label="$t('Cancel')" color="primary" @click="medium = false"/>
+          <q-btn flat :label="$t('save')" @click="saveconfig" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
 
 
     <q-dialog v-model="select_configuration">
-      <q-card style="width: 700px; max-width: 80vw;">
+      <q-card style="width: 40vw; max-width: 80vw;">
         <q-card-section>
           <div class="text-h6">{{ $t('read saved configuration') }}</div>
         </q-card-section>
@@ -151,14 +155,14 @@
           </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-btn flat :label="$t('Cancel')" color="primary" @click="select_configuration=false" />
+          <q-btn flat :label="$t('load')" @click="apply_the_selected_configuration" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
 
     <q-dialog v-model="del_dialog">
-      <q-card style="width: 700px; max-width: 80vw;">
+      <q-card style="width: 40vw; max-width: 80vw;">
         <q-card-section>
           <div class="text-h6">{{ $t('confirm delete') }}</div>
         </q-card-section>
@@ -166,8 +170,42 @@
           {{ $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-btn flat :label="$t('Cancel')" color="primary" @click="del_dialog=false" />
+          <q-btn flat :label="$t('ok')" @click="()=>{dialog_del_scenes();del_dialog=false}" color="primary"  />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+
+    <q-dialog v-model="confirm">
+      <q-card style="width: 40vw; max-width: 80vw;">
+        <q-card-section>
+          <div class="text-h6">{{ $t('Do you confirm the modification') }}</div>
+        </q-card-section>
+        <q-card-section class="q-pt-none">
+          {{ dialog_data.type == 'resolution' ? $t('Whether to modify the resolution to') +
+            options_resolution[dialog_data.parameter].label : $t('Whether to change the projector layout to') +
+            projectorlayout[dialog_data.parameter].label }}
+        </q-card-section>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat :label="$t('Cancel')" @click="()=>{re_match_data();confirm=false}" color="primary"  />
+          <q-btn flat :label="$t('ok')" @click="()=>{trigger_dialog();confirm=false}" color="primary"  />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+
+    <q-dialog v-model="confirm_projectorlayout">
+      <q-card style="width: 40vw; max-width: 80vw;">
+        <q-card-section>
+          <div class="text-h6">{{ $t('Do you confirm the modification') }}</div>
+        </q-card-section>
+        <q-card-section class="q-pt-none">
+          {{ $t('Whether to change the projector layout to') + dialog_data_projectorlayout.parameter }}
+        </q-card-section>
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat :label="$t('Cancel')" @click="()=>{re_match_data();confirm_projectorlayout=false}" color="primary"  />
+          <q-btn flat :label="$t('ok')" @click="()=>{trigger_dialog_projectorlayout();confirm_projectorlayout=false}" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -194,6 +232,7 @@ import {
   computed,
   onMounted,
   onBeforeMount,
+  provide,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar, copyToClipboard } from "quasar";
@@ -210,6 +249,7 @@ 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";
+import { number } from "yargs";
 
 export default defineComponent({
   name: "ComponentFusionSettingsDialog",
@@ -232,21 +272,60 @@ export default defineComponent({
     const showDialog = async () => {
       show_dialog.value = true;
     };
+    /**
+     * 当前平板是否全屏
+     */
+    const is_pad_screen = ref(false);
+    /**
+     * 计算平板和pc的样式
+     */
+    const is_pad_style = computed(() => {
+      let url = window.location.href
+      if (url.indexOf("pad") != -1 && $t.locale.value == "en-US") {
+        return ""
+      }
+      if (url.indexOf("pad") != -1 && is_pad_screen.value) {
+        return "100vw"
+      }
+      return "60vw"
+    })
+    /**
+     * 选择配置的弹窗
+     */
     const select_configuration = ref(false)
+    /**
+     * 删除配置时弹窗
+     */
     const del_dialog = ref(false)
+    /**
+     * 后端获取的配置
+     */
+    const config_projectors = ref(null)
+    /**
+     * 选择配置文件的名称
+     */
     const select_configuration_name = ref("")
+    /**
+     * 发送是否禁用融合参数
+     */
     const send_disable_blending_params = () => {
       set?.SetBlendingOption(disable_blending_params_id.value, disable_blending_params.value ? "1" : "0");
     };
-    const now_resolution=ref(1)
+    /**
+     * 当前分辨率 在配置文件中的索引
+     */
+    const now_resolution = ref(1)
     // let allconfig = JSON.parse($store.state.fusion_configuration);
     /**
      * 模拟数据完成dom渲染再次获取真实后台数据
      */
     let allconfig = JSON.parse("{\"resolution\": [{\"width\": 1920,\"height\": 1080}]}");
+    /**
+     * 计算可供选择的分辨率
+     */
     const options_resolution = computed(() => {
-      let tmp=[];
-      if(allconfig.resolution){
+      let tmp = [];
+      if (allconfig.resolution) {
         for (let index = 0; index < allconfig.resolution.length; index++) {
           tmp.push({
             label: `${allconfig.resolution[index].width}*${allconfig.resolution[index].height}`,
@@ -256,7 +335,10 @@ export default defineComponent({
       }
       return tmp
     })
-    const child :any = ref(null);
+    /**
+     * 子组件
+     */
+    const child: any = ref(null);
     /**
      * 开启网格时发送全部参数
      *
@@ -274,9 +356,9 @@ export default defineComponent({
           tmp = '9'
           break;
         case 'DensityCorrection':
-            if(child.value!.now_v_h=='vertical'){
+          if (child.value!.now_v_h == 'vertical') {
             tmp = 'ver_density'
-            }else{
+          } else {
             tmp = 'hor_density'
           }
 
@@ -293,17 +375,18 @@ export default defineComponent({
 
           break;
         case 'FourPointCalibration':
-          set?.SetBlendingOption("blending_grids_select_point", `4:${child.value!.options_model+1}`)
+          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}`)
+          set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model + 1}`)
+          set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
           break;
         case 'DensityCorrection':
-            if(child.value!.now_v_h=='vertical'){
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`)
+          if (child.value!.now_v_h == 'vertical') {
+            set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v + 1}`)
             set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_v_point_amount}`)
-            }else{
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`)
+          } else {
+            set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h + 1}`)
             set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_h_point_amount}`)
           }
           break;
@@ -315,6 +398,7 @@ export default defineComponent({
     /**
      * 重置全部参数
      */
+    const tmp_options = ref("")
     const resetall = () => {
       set?.ResetBlendingConfig().then((res) => {
         let tmp = JSON.parse(res ? res.config : "");
@@ -324,12 +408,14 @@ export default defineComponent({
         config.value.row = tmp.row;
         $store.commit("setfusion_configuration", res?.config);
       });
-      let tmp = options.value
+      if (options.value.length != 0) {
+        tmp_options.value = options.value
+      }
       options.value = ""
       $store.commit("setSelectedProjector", "0/0");
       setTimeout(() => {
         clear_sessionStorage()
-        options.value = tmp
+        options.value = tmp_options.value
       }, 300);
     }
     /**
@@ -342,16 +428,37 @@ export default defineComponent({
       sessionStorage.removeItem("FourPointCalibration");
       sessionStorage.removeItem("GridSettings");
       sessionStorage.removeItem("Debugging");
+      sessionStorage.removeItem("FusionLocale_async");
     }
-
+    /**
+     * 从配置文件中获取的行和列
+     */
     const config = ref({ col: 0, row: 0 });
+    /**
+     * 是否开启融合
+     */
     const EnableBlending = ref(false);
     let optionsstr = ref();
-    optionsstr.value = "FusionLocale";
+    optionsstr.value = "";
+    /**
+     * 是否禁用融合参数 的参数名称
+     */
     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 show_blending_grids = ref(true);
+    /**
+     * 是否保存配置弹窗
+     */
     const medium = ref(false);
     const options = computed({
       get() {
@@ -366,7 +473,7 @@ export default defineComponent({
      */
     watch(
       () => EnableBlending,
-      (newVal, oldVal) => {
+      (newVal) => {
         $store.commit("setEnablefusion", newVal.value);
         set?.EnableBlending(newVal.value);
       },
@@ -377,13 +484,13 @@ export default defineComponent({
      * 设置分辨率
      * @param index 索引号
      */
-    const set_resolution=(index:number)=>{
+    const set_resolution = (index: number) => {
       $q.loading.show({
         message: 'Loading please wait'
       })
-      let w =allconfig.resolution[index].width
-      let h =allconfig.resolution[index].height
-      set?.SetProjectorResolution(w,h).then((res)=>{
+      let w = allconfig.resolution[index].width
+      let h = allconfig.resolution[index].height
+      set?.SetProjectorResolution(w, h).then((res) => {
         $store.commit("setfusion_configuration", res?.config);
       })
       let tmp = options.value
@@ -405,20 +512,34 @@ export default defineComponent({
         switch (newVal.value) {
           case 'FusionLocale':
             tmp = "blending"
+            set?.SetBlendingOption("blending_grids_select_ui", tmp)
             break;
           case 'FourPointCalibration':
             tmp = '4'
+            set?.SetBlendingOption("blending_grids_select_ui", tmp)
+            set?.SetBlendingOption("blending_grids_control_point_count", `4`)
+            set?.SetBlendingOption("blending_grids_select_point", `4:1`)
             break;
           case 'SurfaceCorrection':
             tmp = '9'
+            /**
+             * 延迟发送不然获取不到值
+             */
+            set?.SetBlendingOption("blending_grids_select_ui", tmp)
+            setTimeout(() => {
+              set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
+              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.value_point_amount}:1`)
+            }, 100);
+
             break;
           case 'DensityCorrection':
             tmp = 'hor_density'
+            set?.SetBlendingOption("blending_grids_select_ui", tmp)
             break;
           default:
             break;
         }
-		if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
+        // if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
       },
       { deep: true })
 
@@ -426,6 +547,7 @@ export default defineComponent({
 
     const save = () => {
       medium.value = true
+      save_cover_name.value = ''
       //读取场景
       get_scenes()
     };
@@ -441,16 +563,26 @@ export default defineComponent({
         });
       } catch (error) { }
     };
+    /**
+     * 点击页面取消时调用 恢复默认参数
+     */
     const clear = () => {
       record_times.value = 0
-      show_blending_grids.value = false;
+      // show_blending_grids.value = false;
+      is_pad_screen.value = false
       send_show_blending_grids();
       $store.commit("setSelectedProjector", "0/0");
+      set?.SetBlendingOption("blending_grids_show", "0");
       setTimeout(() => {
         clear_sessionStorage()
       }, 500);
-      getconfig()
-      options.value = "FusionLocale"
+      //getconfig()
+      if (config.value.col == 1 && config.value.row == 1) {
+        optionsstr.value = "FourPointCalibration"
+      } else {
+        optionsstr.value = "FourPointCalibration";
+      }
+      now_selsect_projector.value = "0-0"
     };
 
     /**
@@ -470,6 +602,7 @@ export default defineComponent({
       setTimeout(() => {
         set?.GetBlendingConfig("").then((res) => {
           let tmp = JSON.parse(res ? res.config : "");
+          config_projectors.value = tmp
           let local_options = [
             [disable_blending_params_id, disable_blending_params],
             [show_blending_grids_id, show_blending_grids]
@@ -482,31 +615,77 @@ export default defineComponent({
               local_opt[1].value = ("0" == opt || "false" == opt.toLowerCase() ? false : true);
             }
           }
+          show_blending_grids.value = 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);
+          optionsstr.value = "FourPointCalibration";
           allconfig = JSON.parse($store.state.fusion_configuration);
-          if(allconfig.resolution){
+          /**
+           * 匹配当前分辨率的索引 没有匹配到自动加入当前分辨率
+           */
+          if (allconfig.resolution) {
             for (let index = 0; index < allconfig.resolution.length; index++) {
-            if(allconfig.resolution.width==allconfig.projector_width&&allconfig.resolution.height==allconfig.projector_height){
-              now_resolution.value=index
+              if (allconfig.resolution[index].width == allconfig.projector_width && allconfig.resolution[index].height == allconfig.projector_height) {
+                now_resolution.value = index
+
               }
             }
-        }else{
-          allconfig = {resolution: [{width: tmp.projector_width,height: tmp.projector_height}]};
-          now_resolution.value=0
+          } else {
+            allconfig = { resolution: [{ width: tmp.projector_width, height: tmp.projector_height }] };
+            now_resolution.value = 0
+          }
+          /**
+           * 计算当前可供选择的 投影机布局
+           */
+          projectorlayout.value = []
+          let cont = 0
+          for (let index = 1; index <= tmp.max_projector_count; index++) {
+            for (let indexx = 1; indexx <= tmp.max_projector_count; indexx++) {
+              if (index * indexx > tmp.max_projector_count) {
+                continue
+              } else {
+                projectorlayout.value.push({ label: `${index}x${indexx}`, value: cont })
+                cont++
+                projectorlayout_tmp.value.push(`${index}x${indexx}`)
+              }
+            }
+          }
+          /**
+           * 匹配当前投影机布局
+           */
+          for (let index = 0; index < projectorlayout.value.length; index++) {
+            let arr = projectorlayout.value[index].label.split('x');
+            if (tmp.col == Number(arr[1]) && tmp.row == Number(arr[0])) {
+              now_select_projectorlayout.value = index
+            }
+            if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
           }
         });
         get_scenes()
         set?.SetBlendingOption("blending_grids_select_ui", "blending")
+        // show_blending_grids.value=true
+        // send_show_blending_grids()
       }, 1000);
+      // console.log("已经挂载 ")
     });
+    /**
+     * 保存配置的名称
+     */
     const save_cover_name = ref("")
+    /**
+     *
+     */
     const plan_list = [
       ''
     ]
+    /**
+     * 应用当前选择的配置文件
+     */
     const apply_the_selected_configuration = () => {
       $q.loading.show({
         message: 'Loading please wait'
@@ -518,6 +697,23 @@ export default defineComponent({
         config.value.col = tmp.col;
         config.value.row = tmp.row;
         $store.commit("setfusion_configuration", res?.config);
+        allconfig = tmp
+        for (let index = 0; index < options_resolution.value.length; index++) {
+          let arr = options_resolution.value[index].label.split('*');
+          if (tmp.projector_width == Number(arr[1]) && tmp.projector_height == Number(arr[0])) {
+            now_resolution.value = index
+          }
+        }
+        for (let index = 0; index < projectorlayout.value.length; index++) {
+          let arr = projectorlayout.value[index].label.split('x');
+          if (tmp.row == Number(arr[1]) && tmp.col == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+        }
+        select_configuration.value=false
       });
 
       let tmp = options.value
@@ -531,12 +727,20 @@ export default defineComponent({
       getconfig()
     }
     const plan_list_op = ref(plan_list)
-    const filterFn = (val: any, update: any, abort: any) => {
+    /**
+     * select 自动提示函数
+     * @param val
+     * @param update
+     */
+    const filterFn = (val: any, update: any) => {
       update(() => {
         const needle = val.toLocaleLowerCase()
         plan_list_op.value = plan_list.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
       })
     }
+    /**
+     * 当前按下ctrl 次数
+     */
     const record_times = ref(0)
     const setModel = (val: string) => {
       save_cover_name.value = val
@@ -544,32 +748,282 @@ export default defineComponent({
 
     const saveconfig = () => {
       set?.SaveBlendingConfig(save_cover_name.value);
+      medium.value = false
     }
-
+    /**
+     * 是否开启debug页面
+     */
     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("");
+    /**
+     * 待删除配置函数
+     * @param name 待删除的名称
+     */
     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)
+      name_to_be_deleted.value = ''
+      select_configuration_name.value = ''
+      save_cover_name.value = ''
     }
-    const now_selsect_projector=ref("0-0")
+    /**
+     * 当前选择的投影机
+     */
+    const now_selsect_projector = ref("0-0")
+    /**
+     * 发送当前选择的投影机
+     * @param value
+     */
     const currently_selected_projector = (value: string) => {
       set?.SetBlendingOption('blending_grids_select_projector', value);
-      now_selsect_projector.value=value
+      now_selsect_projector.value = value
+
     }
+    /**
+     * 依赖注入
+     */
+    provide("now_selsect_projector", now_selsect_projector);
+    /**
+     * 可以供选择的布局 变量
+     */
+    let projectorlayout = ref([{ label: '1x1', value: 0 }, { label: '1x2', value: 1 }])
+    let projectorlayout_tmp = ref(<string[]>[])
+    const now_select_projectorlayout = ref(0)
+    const now_select_projectorlayout_tmp = ref("")
+    /**
+     * 发送当前选择的布局
+     * @param val
+     */
+    const send_projectorlayout = (val: number) => {
+      let arr = projectorlayout.value[val].label.split('x');
+      set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
+        let tmpp = JSON.parse(res!.config)
+        config.value.row = tmpp.row;
+        config.value.col = tmpp.col;
+        $q.loading.show({
+          message: 'Loading please wait'
+        })
+        $store.commit("setfusion_configuration", res?.config);
+        for (let index = 0; index < projectorlayout.value.length; index++) {
+          let arr = projectorlayout.value[index].label.split('x');
+          if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+        }
+        let tmp = options.value
+        options.value = ""
+        $store.commit("setSelectedProjector", "0/0");
+        setTimeout(() => {
+          clear_sessionStorage()
+          options.value = tmp
+          $q.loading.hide()
+        }, 800);
+        getconfig()
+      })
+    }
+    /**
+     * 发送当前选择的布局
+     * @param val
+     */
+    const send_projectorlayout2 = (val: string) => {
+      let arr = val.split('x');
+      set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
+        let tmpp = JSON.parse(res!.config)
+        config.value.row = tmpp.row;
+        config.value.col = tmpp.col;
+        $q.loading.show({
+          message: 'Loading please wait'
+        })
+        $store.commit("setfusion_configuration", res?.config);
+        for (let index = 0; index < projectorlayout.value.length; index++) {
+          let arr = projectorlayout.value[index].label.split('x');
+          if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+        }
+        let tmp = options.value
+        options.value = ""
+        $store.commit("setSelectedProjector", "0/0");
+        setTimeout(() => {
+          clear_sessionStorage()
+          options.value = tmp
+          $q.loading.hide()
+        }, 800);
+        getconfig()
+      })
+    }
+
+    const btn_options = computed(() => {
+      let tmp = []
+      tmp.push({ label: $t.t('FourPointCalibration'), value: 'FourPointCalibration' })
+      tmp.push({ label: $t.t('SurfaceCorrection'), value: 'SurfaceCorrection', })
+      if (now_select_projectorlayout.value != 0) {
+        tmp.push({ label: $t.t('FusionLocale'), value: 'FusionLocale' })
+      } else {
+        optionsstr.value = "FourPointCalibration";
+      }
+      tmp.push({ label: $t.t('DensityCorrection'), value: 'DensityCorrection', })
+      tmp.push({ label: $t.t('GridSettings'), value: 'GridSettings' })
+      return tmp
+    })
+    /**
+     * 计算可以显示的投影机数量
+     */
+    const projectors_that_can_display = computed(() => {
+      let allconfig = JSON.parse($store.state.fusion_configuration);
+      let col = allconfig.projectors.length
+      return { col }
+    })
+    /**
+     * 弹窗
+     * 浅拷贝
+     */
+    const confirm = ref(false)
+    let dialog_data: any = { parameter: "", fun: "", type: "" }
+    const dialog = (parameter: any, fun: any, type: string) => {
+      confirm.value = true
+      dialog_data.parameter = parameter
+      dialog_data.fun = fun
+      dialog_data.type = type
+    }
+    const trigger_dialog = () => {
+      dialog_data.fun(dialog_data.parameter)
+    }
+
+
+
+
+    const confirm_projectorlayout=ref(false);
+    let dialog_data_projectorlayout: any = { parameter: "", fun: ""}
+    const dialog_projectorlayout = (parameter: any, fun: any) => {
+      confirm_projectorlayout.value = true
+      dialog_data_projectorlayout.parameter = parameter
+      dialog_data_projectorlayout.fun = fun
+    }
+    const trigger_dialog_projectorlayout = () => {
+      dialog_data_projectorlayout.fun(dialog_data_projectorlayout.parameter)
+    }
+
+
+
+
+
+
+
+
+    /**
+     * select 组件选中就触发修改 这里是通过再次获取数据判断 显示在页面
+     */
+    const re_match_data = () => {
+      let tmp = JSON.parse($store.state.fusion_configuration);
+      for (let index = 0; index < options_resolution.value.length; index++) {
+        let arr = options_resolution.value[index].label.split('*');
+        if (tmp.projector_width == Number(arr[0]) && tmp.projector_height == Number(arr[1])) {
+          now_resolution.value = index
+        }
+      }
+      for (let index = 0; index < projectorlayout.value.length; index++) {
+        let arr = projectorlayout.value[index].label.split('x');
+
+        if (tmp.row == Number(arr[0]) && tmp.col == Number(arr[1])) {
+          now_select_projectorlayout.value = index
+        }
+        if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+      }
+    }
+    const element: any = ref()
+    /**
+     * 手动全屏指定元素
+     */
+    const element_full_screen = () => {
+      let elem = document.getElementById("element")
+      if (!document.fullscreenElement) {
+        elem!.requestFullscreen().catch((err) => {
+
+        });
+        is_pad_screen.value = true
+      } else {
+        document.exitFullscreen();
+        is_pad_screen.value = false
+      }
+
+    }
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
+    interface projectorlayoutarray {
+      label: string; value: number;
+    }
+    /**
+     * 经过筛选的 投影机布局
+     */
+    const show_projectorlayout = ref(<projectorlayoutarray[]>[])
+    /**
+     * 筛选投影机函数
+     * @param val
+     * @param update
+     */
+    const filterFn_projector = (val: any, update: any) => {
+      update(() => {
+        const needle = val.toLowerCase()
+        show_projectorlayout.value = projectorlayout.value.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
+      })
+    }
+    /**
+     * 经过筛选的 投影机布局
+     */
+    const show_projectorlayout2 = ref(<string[]>[])
+    /**
+     * 筛选投影机函数
+     * @param val
+     * @param update
+     */
+    const filterFn_projector2 = (val: any, update: any) => {
+      update(() => {
+        const needle = val.toLowerCase()
+        show_projectorlayout2.value = projectorlayout_tmp.value.filter(v => v.toLowerCase().indexOf(needle) > -1)
+      })
+    }
+
+
     return {
+      now_select_projectorlayout_tmp,
+      show_projectorlayout2,
+      filterFn_projector2,
+      is_pad_screen,
+      dialog_data,
+      allconfig,
+      now_selsect_projector,
+      re_match_data,
+      trigger_dialog,
+      confirm,
+      dialog,
       currently_selected_projector,
       name_to_be_deleted,
       dialog_del_scenes,
@@ -605,7 +1059,23 @@ export default defineComponent({
       child,
       options_resolution,
       now_resolution,
-      set_resolution
+      set_resolution,
+      send_projectorlayout,
+      send_projectorlayout2,
+      now_select_projectorlayout,
+      projectorlayout,
+      btn_options,
+      projectors_that_can_display,
+      is_pad_style,
+      element,
+      element_full_screen,
+      ispad,
+      filterFn_projector,
+      show_projectorlayout,
+      confirm_projectorlayout,
+      dialog_data_projectorlayout,
+      dialog_projectorlayout,
+      trigger_dialog_projectorlayout
     };
   },
 });

src/components/RegisterDialog.vue

@@ -73,6 +73,7 @@
         <q-separator />
 
         <q-card-section class="scroll" style="width: 70vw">
+          <q-scroll-area style="height: 65vh">
             <q-list>
               <q-item v-if="ext_flag">
                 <q-item-section avatar class="header_label">
@@ -108,7 +109,15 @@
                   {{ $t("register code") }}
                 </q-item-section>
                 <q-item-section>
-                <div style="word-break: break-all">
+                  <div
+                    style="
+                      word-break: break-all;
+                      -webkit-user-select: text;
+                      -moz-user-select: text;
+                      -ms-user-select: text;
+                      user-select: text;
+                    "
+                  >
                     {{ register_code }}
                   </div>
                 </q-item-section>
@@ -117,7 +126,7 @@
                     :value="register_code"
                     level="H"
                     render-as="svg"
-                  :size="195"
+                    :size="160"
                   />
                 </q-item-section>
                 <q-item-section avatar>
@@ -256,6 +265,83 @@
                   </q-input>
                 </q-item-section>
               </q-item>
+              <q-separator class="q-mt-md" />
+              <q-item>
+                <q-item-section avatar class="header_label">
+                  {{ $t("product") }}
+                </q-item-section>
+
+                <q-item-section>
+                  <div class="row q-gutter-sm">
+                    <q-radio
+                      v-model="selected_product"
+                      val=""
+                      :label="$t('normal')"
+                      color="cyan"
+                      class="offset-md-1 col"
+                      :loading="loading"
+                      :disable="loading"
+                    />
+
+                    <q-radio
+                      v-model="selected_product"
+                      val="magic_wall"
+                      :label="$t('magic wall')"
+                      color="cyan"
+                      class="offset-md-1 col"
+                      :loading="loading"
+                      :disable="loading"
+                    />
+                    <q-radio
+                      v-model="selected_product"
+                      val="fusion"
+                      :label="$t('fusion')"
+                      color="cyan"
+                      class="offset-md-1 col"
+                      :loading="loading"
+                      :disable="loading"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+              <q-item v-if="selected_product == 'fusion'">
+                <q-item-section avatar class="header_label">
+                  {{ $t("fusion") }}
+                </q-item-section>
+
+                <q-item-section>
+                  <div class="row q-gutter-sm">
+                    <q-radio
+                      v-for="item of 5"
+                      :key="item"
+                      v-model="function_fusion_count"
+                      :val="item"
+                      :label="item.toString() + $t(' ') + $t('fusion out')"
+                      color="cyan"
+                      class="offset-md-1 col"
+                      :loading="loading"
+                      :disable="loading"
+                    />
+                  </div>
+                  <div class="row q-gutter-sm">
+                    <q-radio
+                      v-for="item of 4"
+                      :key="5 + item"
+                      v-model="function_fusion_count"
+                      :val="5 + item"
+                      :label="
+                        (5 + item).toString() + $t(' ') + $t('fusion out')
+                      "
+                      color="cyan"
+                      class="offset-md-1 col"
+                      :loading="loading"
+                      :disable="loading"
+                    />
+                    <div class="offset-md-1 col"></div>
+                  </div>
+                </q-item-section>
+                <q-item-section avatar> </q-item-section>
+              </q-item>
 
               <q-item>
                 <q-item-section avatar class="header_label">
@@ -303,24 +389,6 @@
                       :loading="loading"
                       :disable="loading"
                     />
-                  <q-checkbox
-                    v-model="function_magic_wall"
-                    @update:model-value="changeMagic()"
-                    :label="$t('magic wall')"
-                    color="cyan"
-                    class="offset-md-1 col"
-                    :loading="loading"
-                    :disable="loading"
-                  />
-                  <q-checkbox
-                    v-model="function_fusion"
-                    @update:model-value="changeFusion()"
-                    :label="$t('fusion')"
-                    color="cyan"
-                    class="offset-md-1 col"
-                    :loading="loading"
-                    :disable="loading"
-                  />
                   </div>
                 </q-item-section>
               </q-item>
@@ -351,8 +419,8 @@
                     />
                   </div>
                 </q-item-section>
-            </q-item>
-          </q-list>
+              </q-item> </q-list
+          ></q-scroll-area>
         </q-card-section>
 
         <q-separator />
@@ -401,12 +469,15 @@ import {
   nextTick,
 } from "vue";
 import { useStore } from "src/store";
-import { useQuasar, copyToClipboard } from "quasar";
+import { useQuasar, copyToClipboard, Cookies } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import QrcodeVue from "qrcode.vue";
 import { Protocol } from "src/entities/WSProtocol";
-import { EDeviceAttribute } from "src/entities/EDeviceAttribute";
+import {
+  EDeviceAttribute,
+  EDeviceAttributeHelper,
+} from "src/entities/EDeviceAttribute";
 import ValidationUtil from "src/common/ValidationUtil";
 
 export default defineComponent({
@@ -440,6 +511,16 @@ export default defineComponent({
     const function_custom_ISV = ref(false);
     const function_magic_wall = ref(false);
     const function_fusion = ref(false);
+    const function_fusion_count = ref(1);
+    const selected_product = ref("");
+
+    watch(
+      () => selected_product.value,
+      (newValue) => {
+        function_fusion.value = newValue == "fusion";
+        function_magic_wall.value = newValue == "magic_wall";
+      }
+    );
 
     const trial_days = ref(0);
     const last_days = ref(0);
@@ -457,6 +538,7 @@ export default defineComponent({
       trial_days.value = 0;
       register_date.value = "";
       last_days.value = 0;
+      selected_product.value = "";
 
       function_center_control.value = false;
       function_output_board.value = false;
@@ -497,7 +579,18 @@ export default defineComponent({
         $store.state.custom_defines.function_mirroring_output;
       function_magic_wall.value =
         $store.state.custom_defines.function_magic_wall;
-      function_magic_wall.value = $store.state.custom_defines.function_fusion;
+      function_fusion.value = $store.state.custom_defines.function_fusion;
+      function_fusion_count.value =
+        EDeviceAttributeHelper.getProductFusionOutputCountDefault(
+          $store.state.device_attribute,
+          1
+        );
+
+      if (function_magic_wall.value) {
+        selected_product.value = "magic_wall";
+      } else if (function_fusion.value) {
+        selected_product.value = "fusion";
+      }
     };
 
     return {
@@ -521,8 +614,10 @@ export default defineComponent({
       function_custom_ISV,
       function_magic_wall,
       function_fusion,
+      function_fusion_count,
       function_center_control,
       function_mirroring_output,
+      selected_product,
       target_language,
       copyToClipboard,
       isShow() {
@@ -620,22 +715,9 @@ export default defineComponent({
           }
 
           let success = false;
-          const response = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.registerDevice(
-              register_code.value,
-              active_code.value,
-              register_type.value == "online",
-              active_type.value == "forever",
-              secret_key.value,
-              parseInt(active_hour.value.toString())
-            );
-          if (response) {
-            success = response.success;
-          }
 
-          if (success) {
           let attribute = EDeviceAttribute.None;
+          {
             if (function_center_control.value) {
               attribute |= EDeviceAttribute.CenterControl;
             }
@@ -653,16 +735,33 @@ export default defineComponent({
               attribute |= EDeviceAttribute.ProductMagicWall;
             }
             if (function_fusion.value) {
-              attribute |= EDeviceAttribute.ProductFusion;
+              attribute |=
+                EDeviceAttributeHelper.getProdictFusionAttributeByIndex(
+                  function_fusion_count.value
+                );
+            }
           }
 
-            GlobalData.getInstance()
+          const response = await GlobalData.getInstance()
             .getCurrentClient()
-              ?.setDeviceAttribute(attribute);
+            ?.registerDevice(
+              register_code.value,
+              active_code.value,
+              register_type.value == "online",
+              active_type.value == "forever",
+              attribute,
+              secret_key.value,
+              parseInt(active_hour.value.toString())
+            );
+          if (response) {
+            success = response.success;
+          }
 
+          if (success) {
             GlobalData.getInstance()
               .getCurrentClient()
               ?.setServerLanguage(target_language.value);
+            Cookies.remove("language");
           }
 
           $q.notify({
@@ -675,7 +774,7 @@ export default defineComponent({
             position: "top",
             timeout: 1500,
           });
-          show_dialog.value = false;
+          show_dialog.value = !success;
         } catch {}
         loading.value = false;
       },
@@ -694,16 +793,6 @@ export default defineComponent({
       isIpAddress(str: string) {
         return ValidationUtil.isIpAddress(str);
       },
-      changeMagic() {
-        if (function_magic_wall.value) {
-          function_fusion.value = false;
-        }
-      },
-      changeFusion() {
-        if (function_fusion.value) {
-          function_magic_wall.value = false;
-        }
-      },
     };
   },
 });

src/components/UpgradeDialog.vue

@@ -91,7 +91,9 @@
 
         <q-separator />
 
-        <q-card-actions align="right">
+        <q-card-actions>
+          <q-item-section>V: {{ server_version }}</q-item-section>
+          <q-space />
           <q-btn
             :loading="loading"
             flat
@@ -143,7 +145,7 @@ export default defineComponent({
 
     let select_options = [$t.t("software"), $t.t("rootfs")];
     let upgrade_type = ref($t.t("software"));
-
+    const server_version = ref("unknow");
     return {
       show_dialog,
       loading,
@@ -154,12 +156,12 @@ export default defineComponent({
       file_count,
       upgrade_type,
       select_options,
+      server_version,
       loga(a: any) {
         console.log(a);
       },
       showDialog() {
         show_dialog.value = true;
-
         let url = GlobalData.getInstance().createCurrentRequestUrl();
         if (url) {
           url.pathname = "/upload_soft_file";
@@ -167,6 +169,14 @@ export default defineComponent({
           url.pathname = "/upload_root_fs_file";
           upload_url_rootfs.value = url.toString();
         }
+        try {
+          let client = GlobalData.getInstance().getCurrentClient();
+          client?.getBuildInfo()?.then((build_info) => {
+            if (build_info) {
+              server_version.value = build_info.version;
+            }
+          });
+        } catch (error) {}
       },
       resetData() {
         loading.value = false;
@@ -192,7 +202,15 @@ export default defineComponent({
               : uploader_rootfs.value;
           $q.dialog({
             title: $t.t("Confirm"),
-            message: $t.t("use this file to upgrade") + "?",
+            message:
+              $t.t("Confirm") +
+              $t.t(" ") +
+              $t.t("use this file to upgrade") +
+              "?" +
+              $t.t(" ") +
+              $t.t(
+                "after upgrade, please clear browser cache Or refresh hard (Ctrl/Shift + F5 Or Ctrl + Shift + R)"
+              ),
             ok: {
               label: $t.t("ok"),
               noCaps: true,
@@ -236,6 +254,15 @@ export default defineComponent({
           position: "top",
           timeout: 1500,
         });
+        $q.notify({
+          type: "positive",
+          icon: "done",
+          message: $t.t(
+            "after upgrade, please clear browser cache Or refresh hard (Ctrl/Shift + F5 Or Ctrl + Shift + R)"
+          ),
+          position: "top",
+          timeout: 3000,
+        });
         setTimeout(() => {
           window.location.reload();
         }, 2000);

src/entities/ApplicationConfigEntity.ts

@@ -45,4 +45,5 @@ export default class ApplicationConfigEntity {
   cloud_server_verify_key = "";
   cloud_server_use_wss = "0";
   cloud_server_enable = "0";
+  magic_list:any=[]
 }

src/entities/EDeviceAttribute.ts

@@ -1,38 +1,145 @@
 export enum EDeviceAttribute {
-  None_UnKNow = 0x0000,
+  None = 0x0000000000000001,
+  OutputBoard = 0x0000000000000002,
+  CenterControl = 0x0000000000000004,
+  MirroringOutput = 0x0000000000000008,
+  CustomISV = 0x0000000000000010,
+  Reserve5 = 0x0000000000000020,
+  Reserve6 = 0x0000000000000040,
+  Reserve7 = 0x0000000000000080,
+  Reserve8 = 0x0000000000000100,
+  Reserve9 = 0x0000000000000200,
+  Reserve10 = 0x0000000000000400,
+  Reserve11 = 0x0000000000000800,
+  Reserve12 = 0x0000000000001000,
+  Reserve13 = 0x0000000000002000,
+  Reserve14 = 0x0000000000004000,
+  Reserve15 = 0x0000000000008000,
+  Reserve16 = 0x0000000000010000,
+  Reserve17 = 0x0000000000020000,
+  Reserve18 = 0x0000000000040000,
+  Reserve19 = 0x0000000000080000,
+  Reserve20 = 0x0000000000100000,
+  ProductMagicWall = 0x0000000000200000,
+  ProductFusion_1 = 0x0000000000400000,
+  ProductFusion_2 = 0x0000000000800000,
+  ProductFusion_3 = 0x0000000001000000,
+  ProductFusion_4 = 0x0000000002000000,
+  ProductFusion_5 = 0x0000000004000000,
+  ProductFusion_6 = 0x0000000008000000,
+  ProductFusion_7 = 0x0000000010000000,
+  ProductFusion_8 = 0x0000000020000000,
+  ProductFusion_9 = 0x0000000040000000,
+  Reserve31 = 0x0000000080000000,
+  Reserve32 = 0x0000000100000000,
+  Reserve33 = 0x0000000200000000,
+  Reserve34 = 0x0000000400000000,
+  Reserve35 = 0x0000000800000000,
+  Reserve36 = 0x0000001000000000,
+  Reserve37 = 0x0000002000000000,
+  Reserve38 = 0x0000004000000000,
+  Reserve39 = 0x0000008000000000,
+  Reserve40 = 0x0000010000000000,
+  Reserve41 = 0x0000020000000000,
+  Reserve42 = 0x0000040000000000,
+  Reserve43 = 0x0000080000000000,
+  Reserve44 = 0x0000100000000000,
+  Reserve45 = 0x0000200000000000,
+  Reserve46 = 0x0000400000000000,
+  Reserve47 = 0x0000800000000000,
+  Reserve48 = 0x0001000000000000,
+  Reserve49 = 0x0002000000000000,
+  Reserve50 = 0x0004000000000000,
+  Reserve51 = 0x0008000000000000,
+  Reserve52 = 0x0010000000000000,
+  Reserve53 = 0x0020000000000000,
+  Reserve54 = 0x0040000000000000,
+  Reserve55 = 0x0080000000000000,
+  Reserve56 = 0x0100000000000000,
+  Reserve57 = 0x0200000000000000,
+  Reserve58 = 0x0400000000000000,
+  Reserve59 = 0x0800000000000000,
+  Reserve60 = 0x1000000000000000,
+  Reserve61 = 0x2000000000000000,
+  Reserve62 = 0x4000000000000000,
+  Reserve63 = 0x8000000000000000,
 
-  None = 0x00000001,
-  OutputBoard = 0x00000002,
-  CenterControl = 0x00000004,
-  MirroringOutput = 0x00000008,
-  CustomISV = 0x00000010,
-  Reserve5 = 0x00000020,
-  Reserve6 = 0x00000040,
-  Reserve7 = 0x00000080,
-  Reserve8 = 0x00000100,
-  Reserve9 = 0x00000200,
-  Reserve10 = 0x00000400,
-  Reserve11 = 0x00000800,
-  Reserve12 = 0x00001000,
-  Reserve13 = 0x00002000,
-  Reserve14 = 0x00004000,
-  Reserve15 = 0x00008000,
-  Reserve16 = 0x00010000,
-  Reserve17 = 0x00020000,
-  Reserve18 = 0x00040000,
-  Reserve19 = 0x00080000,
-  Reserve20 = 0x00100000,
-  ProductMagicWall = 0x00200000,
-  ProductFusion = 0x00400000,
-  Reserve23 = 0x00800000,
-  Reserve24 = 0x01000000,
-  Reserve25 = 0x02000000,
-  Reserve26 = 0x04000000,
-  Reserve27 = 0x08000000,
-  Reserve28 = 0x10000000,
-  Reserve29 = 0x20000000,
-  Reserve30 = 0x40000000,
-  Reserve31 = 0x80000000,
-
-  All = 0xffffffff,
+  StandMediaControl = OutputBoard | CenterControl,
+  All = 0xffffffffffffffff,
+}
+
+export class EDeviceAttributeHelper {
+  public static isProductFusion(attribute: number) {
+    return (
+      (attribute & EDeviceAttribute.ProductFusion_1) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_2) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_3) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_4) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_5) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_6) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_7) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_8) != 0 ||
+      (attribute & EDeviceAttribute.ProductFusion_9) != 0
+    );
+  }
+
+  public static getProductFusionOutputCount(attribute: number) {
+    if (attribute & EDeviceAttribute.ProductFusion_1) {
+      return 1;
+    } else if (attribute & EDeviceAttribute.ProductFusion_2) {
+      return 2;
+    } else if (attribute & EDeviceAttribute.ProductFusion_3) {
+      return 3;
+    } else if (attribute & EDeviceAttribute.ProductFusion_4) {
+      return 4;
+    } else if (attribute & EDeviceAttribute.ProductFusion_5) {
+      return 5;
+    } else if (attribute & EDeviceAttribute.ProductFusion_6) {
+      return 6;
+    } else if (attribute & EDeviceAttribute.ProductFusion_7) {
+      return 7;
+    } else if (attribute & EDeviceAttribute.ProductFusion_8) {
+      return 8;
+    } else if (attribute & EDeviceAttribute.ProductFusion_9) {
+      return 9;
+    } else {
+      return 0;
+    }
+  }
+
+  public static getProductFusionOutputCountDefault(
+    attribute: number,
+    default_Value: number
+  ) {
+    const ret = EDeviceAttributeHelper.getProductFusionOutputCount(attribute);
+    if (ret == 0) {
+      return default_Value;
+    }
+    return ret;
+  }
+
+  public static getProdictFusionAttributeByIndex(index: number) {
+    switch (index) {
+      case 1:
+        return EDeviceAttribute.ProductFusion_1;
+      case 2:
+        return EDeviceAttribute.ProductFusion_2;
+      case 3:
+        return EDeviceAttribute.ProductFusion_3;
+      case 4:
+        return EDeviceAttribute.ProductFusion_4;
+      case 5:
+        return EDeviceAttribute.ProductFusion_5;
+      case 6:
+        return EDeviceAttribute.ProductFusion_6;
+      case 7:
+        return EDeviceAttribute.ProductFusion_7;
+      case 8:
+        return EDeviceAttribute.ProductFusion_8;
+      case 9:
+        return EDeviceAttribute.ProductFusion_9;
+      default:
+        return 0;
+    }
+  }
 }

src/entities/WSProtocol.ts

@@ -570,6 +570,9 @@ export namespace Protocol {
     public static get kRpcCheckModeIndex() {
       return Commands.PROTOCOL_PREFIX + "RpcCheckModeIndex";
     }
+    public static get kRpcGetHttpInterfaceVersion() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetHttpInterfaceVersion";
+    }
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -716,6 +719,7 @@ export namespace Protocol {
       Commands.kRpcFileManagerDelete,
       Commands.kRpcFileManagerCreateDirectory,
       Commands.kRpcCheckModeIndex,
+      Commands.kRpcGetHttpInterfaceVersion,
     ]);
     public static get AllCommands() {
       return this._all_commands;
@@ -1824,11 +1828,14 @@ export namespace Protocol {
     online: boolean = false;
     active_forever: boolean = false;
     hour: number = 0;
+    attribute: number = 0;
+
     constructor(
       register_code: string,
       active_code: string,
       online: boolean,
       active_forever: boolean,
+      attribute: number,
       secret_key?: string,
       hour?: number,
       rcp_id?: number
@@ -1843,6 +1850,7 @@ export namespace Protocol {
       this.online = online;
       this.active_forever = active_forever;
       this.secret_key = secret_key ?? "";
+      this.attribute = attribute ?? 0;
       if (active_forever) {
         this.hour = 0;
       } else {
@@ -3452,6 +3460,7 @@ export namespace Protocol {
       location: number,
       enable: boolean,
       width: number,
+      auto_sync:boolean,
       rpc_id = 0
     ) {
       super();
@@ -3464,12 +3473,15 @@ export namespace Protocol {
       this.location = location ?? 0;
       this.enable = enable ?? false;
       this.width = width ?? 0;
+      this.auto_sync = auto_sync ?? false;
+
     }
     row = 0;
     column = 0;
     location = 0; //0：左融合带，1：上融合带，2：右融合带，3：下融合带
     enable = false;
     width = 0;
+    auto_sync=false;
   }
 
   export class GetBlendingConfigResponseEntity extends PacketEntity {
@@ -3682,11 +3694,7 @@ export namespace Protocol {
   }
 
   export class SetProjectorResolutionRequestEntity extends PacketEntity {
-    constructor(
-      width: number,
-      height: number,
-      rpc_id = 0
-    ) {
+    constructor(width: number, height: number, rpc_id = 0) {
       super();
       super.command = Commands.kSetProjectorResolution;
       super.flag = PacketEntity.FLAG_REQUEST;
@@ -3701,13 +3709,9 @@ export namespace Protocol {
   }
 
   export class SetProjectorLayoutRequestEntity extends PacketEntity {
-    constructor(
-      row: number,
-      column: number,
-      rpc_id = 0
-    ) {
+    constructor(row: number, column: number, rpc_id = 0) {
       super();
-      super.command = Commands.kSetProjectorResolution;
+      super.command = Commands.kSetProjectorLayout;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
 
@@ -3827,4 +3831,20 @@ export namespace Protocol {
     }
     success = false;
   }
+
+  export class RpcGetHttpInterfaceVersionRequestEntity extends PacketEntity {
+    constructor(rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcGetHttpInterfaceVersion;
+      super.flag = PacketEntity.FLAG_REQUEST;
+    }
+    timestamp = 0;
+  }
+  export class RpcGetHttpInterfaceVersionResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+    version = 0;
+  }
 }

src/i18n/en-US/index.ts

@@ -57,7 +57,10 @@ export default {
   Accept: "Accept",
   "move speed": "Move Speed",
   "y offset": "Y Offset",
-  "the number must be greater than 0": "the number must be greater than 0",
+  "the number must be greater than 0": "The Number Must Be Greater Than 0",
+  "the number must be less than 2160":"The Number Must Be Less Than 2160",
+  "the number must be less than 3840":"The Number Must Be Less Than 3840",
+  "the number must be greater than 360":"The Number Must Be Less Than 360",
   "pos x": "X Position",
   "pos y": "Y Position",
   width: "Width",
@@ -170,6 +173,7 @@ export default {
   advanced: "Advanced",
   "revert and exit": "Revert And Exit",
   apply: "Apply",
+  load: "Load",
   "current real resolution": "Current Real Resolution",
   "output type": "Output Type",
   "target resolution": "Target Resolution",
@@ -413,7 +417,7 @@ export default {
   FourPointCalibration: "Four Pint Calibration",
   SurfaceCorrection: "Surface Correction",
   DensityCorrection: "Density Correction",
-  GridSettings: "Grid Settings",
+  GridSettings: "Auxiliary Settings",
   point: "dot",
   reset: "reset",
   "upper fusion zone parameters": "Upper Fusion Zone Parameters",
@@ -427,7 +431,7 @@ export default {
   Projector: "Projector",
   resetall: "reset all",
   "save config": "Save Config",
-  "Whether to enable integration": "Whether to enable integration",
+  "Whether to enable integration": "Enable projection mode",
   "Whether to hide the desktop": "Whether to hide the desktop",
   "resetall config": "resetall config",
   "disable blending params": "Dsable blending params",
@@ -435,9 +439,9 @@ export default {
   "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",
+  "Whether to operate synchronously": "synchronous operation",
+  "Select saved configuration": "Configuration list",
+  "read saved configuration": "Configuration list",
   "please choose": "please choose",
   save: "Save",
   "Whether to save the configuration": "Whether to save the configuration",
@@ -469,8 +473,9 @@ export default {
   "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",
-  "Reset all program control points":"Reset all program control points",
-  "Reset the current program control point":"Reset the current program control point",
+  "Reset all program control points": "Reset all program control points",
+  "Reset the current program control point":
+    "Reset the current program control point",
   "device verify key": "Device Verify Key",
   "use wss": "Use Wss",
   "server address": "Server Address",
@@ -490,6 +495,23 @@ export default {
   "raster graph": "Raster Graph",
   "the folder name cannot start with a '.'":
     "The Folder Name Cannot Start With a '.'",
-  "change resolution":"change resolution",
-  "Loading please wait":"Loading please wait"
+  "change resolution": "change resolution",
+  "Loading please wait": "Loading please wait",
+  product: "Product",
+  normal: "Normal",
+  "fusion out": "Out",
+  "Please enter the square number": "Please enter the square number",
+  "Change projector layout": "Change projector layout",
+  "reset all": "reset all",
+  "Do you confirm the modification": "Do you confirm the modification",
+  "Whether to modify the resolution to": "Whether to modify the resolution to",
+  "Whether to change the projector layout to":
+    "Whether to change the projector layout to",
+  "after upgrade, please clear browser cache Or refresh hard (Ctrl/Shift + F5 Or Ctrl + Shift + R)":
+    "After Upgrade, Please Clear Browser Cache Or Refresh Hard (Ctrl/Shift + F5 Or Ctrl + Shift + R)",
+    "fusion zone":"fusion zone",
+    "up":"up",
+    "left":"left",
+    "right":"right",
+    "down":"down"
 };

src/i18n/zh-CN/index.ts

@@ -218,6 +218,7 @@ export default {
   disable: "禁用",
   enable: "启用",
   apply: "应用",
+  load: "加载",
   "apply and exit": "应用并退出",
   revert: "恢复",
   "revert and exit": "不保存退出",
@@ -488,7 +489,11 @@ export default {
   "full screen window": "全屏",
   "restore window size": "恢复",
   "the number must be greater than 0": "数字必须大于0",
+  "the number must be less than 2160":"数字必须小于等于2160",
+  "the number must be less than 3840":"数字必须小于等于3840",
   "the number must be greater than 1": "数字必须大于1",
+  "the number must be greater than 360":"数字必须小于等于360",
+
   X: "X坐标",
   Y: "Y坐标",
   "edit window rect": "窗口大小调整",
@@ -681,7 +686,7 @@ export default {
   FourPointCalibration: "四点校正",
   SurfaceCorrection: "曲面校正",
   DensityCorrection: "疏密校正",
-  GridSettings: "网格设置",
+  GridSettings: "辅助设置",
   point: "点",
   reset: "重置",
   "upper fusion zone parameters": "上融合带参数",
@@ -695,7 +700,7 @@ export default {
   Projector: "投影机",
   resetall: "重置所有",
   "save config": "保存配置",
-  "Whether to enable integration": "是否启用融合",
+  "Enable projection mode": "启用投影模式",
   "Whether to hide the desktop": "是否隐藏桌面",
   "resetall config": "重置所有配置",
   "disable blending params": "禁用融合参数",
@@ -704,8 +709,8 @@ export default {
   "center line color": "中心线颜色",
   "center circle color": "中心圆颜色",
   "Whether to operate synchronously": "是否同步操作",
-  "Select saved configuration": "选择保存的配置",
-  "read saved configuration": "读取保存的配置",
+  "Select saved configuration": "配置列表",
+  "read saved configuration": "融合配置列表",
   "please choose": "请选择",
   save: "保存",
   "Whether to save the configuration": "是否保存配置",
@@ -735,8 +740,8 @@ export default {
     "确定删除你将失去现在调整的数据",
   "Please enter the points you need to add": "请输入你所需要添加的点数",
   "Whether to add control points": "是否添加控制点",
-  "Reset all program control points":"重置全部方案控制点",
-  "Reset the current program control point":"重置当前方案控制点",
+  "Reset all program control points": "重置全部方案控制点",
+  "Reset the current program control point": "重置当前方案控制点",
   "device verify key": "设备校验码",
   "use wss": "使用Wss",
   "server address": "服务器地址",
@@ -755,6 +760,25 @@ export default {
   "export magic": "导出",
   "raster graph": "栅格图",
   "the folder name cannot start with a '.'": "文件夹名称不能以“.” 开头",
-  "change resolution":"更改分辨率",
-  "Loading please wait":"加载中 请稍等"
+  "change resolution": "更改分辨率",
+  "Loading please wait": "加载中 请稍等",
+  "Version Mismatch !": "版本不匹配!",
+  "Version Mismatch ! Please Upgrade The Software Again ! Otherwise, The File Function Cannot Be Used !":
+    "版本不匹配!请重新升级软件!否则文件功能无法正常使用!",
+  product: "产品",
+  normal: "普通",
+  "fusion out": "出",
+  "Please enter the square number": "请输入平方数",
+  "Change projector layout": "更改投影机布局",
+  "reset all": "重置所有",
+  "Do you confirm the modification": "是否确认修改",
+  "Whether to modify the resolution to": "是否将分辨率修改到",
+  "Whether to change the projector layout to": "是否更改投影机布局为",
+  "after upgrade, please clear browser cache Or refresh hard (Ctrl/Shift + F5 Or Ctrl + Shift + R)":
+    "升级完成后请清空浏览器缓存或者进行硬刷新(Ctrl/Shift + F5 或者 CTRL + SHIFT + R)",
+  "fusion zone":"融合带",
+  "up":"上",
+  "left":"左",
+  "right":"右",
+  "down":"下"
 };

src/pad/TopToolbar.vue

@@ -193,6 +193,24 @@
               {{ $t("background image setting") }}
             </q-item-section>
           </q-item>
+
+          <q-item
+            clickable
+            v-close-popup
+            @click="
+              $refs.fusion_settings_dialog.showDialog();
+              getconfig();
+            "
+            v-if="$store.state.custom_defines.function_fusion"
+          >
+            <q-item-section avatar>
+              <q-icon style="color: #63bab4;" name="open_with" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("fusion settings") }}
+            </q-item-section>
+          </q-item>
+
           <q-item clickable v-close-popup @click="switchLanguage">
             <q-item-section avatar>
               <q-icon name="img:pad/toolbar/cn_en.png" />
@@ -235,6 +253,9 @@
   <advanced-debug-dialog ref="advanced_debug_dialog" />
   <window-rect-edit-dialog ref="window_rect_edit_dialog" />
   <system-setting-dialog ref="system_setting_dialog" />
+
+  <fusion-settings-dialog ref="fusion_settings_dialog" />
+
 </template>
 
 <script lang="ts">
@@ -242,6 +263,9 @@ import { defineComponent, Ref, ref, computed, watch } from "vue";
 import { Cookies, SessionStorage, useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
+
+import FusionSettingsDialog from "src/components/FusionSettingsDialog.vue";
+
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
 import FileManageDialog from "src/components/FileManageDialog.vue";
 import SubtitleDialog from "src/components/SubtitleDialog.vue";
@@ -265,12 +289,13 @@ export default defineComponent({
     AdvancedDebugDialog,
     WindowRectEditDialog,
     SystemSettingDialog,
+    FusionSettingsDialog
   },
   setup() {
     const $store = useStore();
     const $q = useQuasar();
     const $t = useI18n();
-
+    let set = GlobalData.getInstance().getCurrentClient();
     const window_rect_edit_dialog: Ref<any> = ref(null);
 
     const plan_running = computed(
@@ -288,7 +313,19 @@ export default defineComponent({
         }
       }
     );
-
+    const getconfig = () => {
+      set?.SetBlendingOption("blending_grids_select_ui", '4')
+      set?.SetBlendingOption('blending_grids_select_projector',"0-0");
+      set?.SetBlendingOption("blending_grids_select_point", `4:1`)
+      set?.SetBlendingOption("blending_grids_show", "1");
+      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) {}
+    };
     return {
       plan_running,
       window_rect_edit_dialog,

src/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page class="row items-center justify-evenly" :style-fn="wujie_height">
     <wall-page />
     <media-control-page />
   </q-page>
@@ -70,7 +70,11 @@ export default defineComponent({
       new Initializer(options).initialize();
     });
 
-    return {};
+    return {
+      wujie_height(offset:any){
+        return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
+      }
+    };
   },
 });
 </script>

src/pages/TopToolBar.vue

@@ -302,6 +302,22 @@
           class="shadow-2 text-white"
           @dragstart.prevent
         >
+          <q-item
+            clickable
+            v-close-popup
+            @click="
+              $refs.fusion_settings_dialog.showDialog();
+              getconfig();
+            "
+            v-if="$store.state.custom_defines.function_fusion"
+          >
+            <q-item-section avatar>
+              <q-icon name="open_with" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("fusion settings") }}
+            </q-item-section>
+          </q-item>
           <q-item
             clickable
             :disable="!$store.state.power_state"
@@ -357,6 +373,7 @@
             </q-item-section>
           </q-item>
           <q-item
+            v-if="!iswujie"
             clickable
             v-close-popup
             @click="$refs.background_image_dialog.showDialog()"
@@ -370,6 +387,7 @@
             </q-item-section>
           </q-item>
           <q-item
+            v-if="!iswujie"
             clickable
             v-close-popup
             @click="$refs.recovery_database_dialog.showDialog()"
@@ -405,6 +423,7 @@
             </q-item-section>
           </q-item>
           <q-item
+            v-if="!iswujie"
             clickable
             v-close-popup
             @click="$refs.upgrade_dialog.showDialog()"
@@ -440,22 +459,7 @@
             </q-item-section>
           </q-item>
 
-          <q-item
-            clickable
-            v-close-popup
-            @click="
-              $refs.fusion_settings_dialog.showDialog();
-              getconfig();
-            "
-            v-if="$store.state.custom_defines.function_fusion"
-          >
-            <q-item-section avatar>
-              <q-icon name="open_with" />
-            </q-item-section>
-            <q-item-section>
-              {{ $t("fusion settings") }}
-            </q-item-section>
-          </q-item>
+
 
           <q-item
             clickable
@@ -487,7 +491,7 @@
 
       <q-separator vertical inset />
 
-      <q-item v-if="isfan">
+      <q-item v-if="!iswujie">
         <q-item-section avatar style="margin-right: 0px; padding-right: 0px">
           <!-- <q-icon class="text-white rotate" name="img:svgs/fan.svg" /> -->
           <!-- <q-icon class="text-white rotate" name="img:new_icon/fan.png" /> -->
@@ -649,6 +653,10 @@ export default defineComponent({
       return "rotate " + sulv + "s linear infinite";
     });
     const getconfig = () => {
+      set?.SetBlendingOption("blending_grids_select_ui", '4')
+      set?.SetBlendingOption('blending_grids_select_projector',"0-0");
+      set?.SetBlendingOption("blending_grids_select_point", `4:1`)
+      set?.SetBlendingOption("blending_grids_show", "1");
       try {
         set?.GetBlendingConfig("").then((res) => {});
         set?.GetBlendingConfig("").then((res) => {
@@ -722,9 +730,9 @@ export default defineComponent({
       show_device_list.value =
         typeof (<any>window).user_search?.hide_device_list == "undefined";
     });
-    let isfan = ref(true);
+    let iswujie = ref(false);
     if ((window as any).$wujie) {
-      isfan.value = false;
+      iswujie.value = true;
     }
     return {
       getconfig,
@@ -737,7 +745,7 @@ export default defineComponent({
       power_flag,
       fan,
       isfull,
-      isfan,
+      iswujie,
       async backupDB() {
         let client = GlobalData.getInstance().getCurrentClient();
         if (client) {
@@ -830,9 +838,12 @@ export default defineComponent({
       },
       logout() {
         const w = window as any;
+        console.log(w);
         if (w.controlLogout && typeof w.controlLogout == "function") {
+          console.log(1);
           w.controlLogout();
         } else {
+          console.log(2);
           Cookies.remove("auto_login");
           SessionStorage.clear();
           try {

src/pages/WallPage.vue

@@ -93,7 +93,6 @@
           style="text-align: center"
         >
           {{ item.id + 1 }}
-        </vue3-resize-drag>
 
           <q-popup-proxy
             context-menu
@@ -109,7 +108,7 @@
                 :disable="plan_running || !$store.state.power_state"
                 clickable
                 v-close-popup
-              @click="openWindowByLocalFile($event)"
+                @click="openWindowByLocalFile(index, $event)"
               >
                 <q-item-section avatar>
                   <q-icon name="open_in_browser" />
@@ -129,6 +128,7 @@
               </q-item>
             </q-list>
           </q-popup-proxy>
+        </vue3-resize-drag>
       </div>
     </div>
     <div
@@ -174,7 +174,7 @@
                 :disable="plan_running || !$store.state.power_state"
                 clickable
                 v-close-popup
-                @click="openWindowByLocalFile($event)"
+                @click="openWindowByLocalFile(-1, $event)"
               >
                 <q-item-section avatar>
                   <q-icon name="open_in_browser" />
@@ -245,7 +245,7 @@
 }
 .magic_wall {
   border: 1px solid black;
-  background-color: rgb(50,130,246);
+  background-color: rgb(50, 130, 246);
   position: absolute;
 }
 .magic_wall_select {
@@ -343,10 +343,6 @@ export default defineComponent({
         nextTick(() => {
           show_windows_flag.value = true;
         });
-        if (wall.value) {
-          let teph = wall.value?.clientHeight / offsetHeight;
-          let tepw = wall.value?.clientWidth / offsetWidth;
-        }
       }, 100);
     };
 
@@ -357,8 +353,6 @@ export default defineComponent({
 
     const last_context_menu_pos_x = ref(0);
     const last_context_menu_pos_y = ref(0);
-    let offsetHeight = 0;
-    let offsetWidth = 0;
     const plan_running = computed(
       () => $store.state.current_running_plan.trim() != ""
     );
@@ -384,14 +378,15 @@ export default defineComponent({
     const area_open_window_rect = ref(new Rect());
     let item_witdh = ref(0);
     const item_height = ref(0);
-    const radians = () => {
+    const radians = (index:number) => {
       const test_monitor_list: any = clacMonitor();
       if (test_monitor_list) {
-        const item = test_monitor_list[current_index.value];
+        const item = test_monitor_list[index];
         return /*a*/ (item.angle * Math.PI) / 180;
       }
     };
     const calculateCoordinates = (
+      index:number,
       px: number,
       py: number,
       cx: number,
@@ -399,13 +394,13 @@ export default defineComponent({
     ) => {
       const x =
         cx +
-        (px - cx) * Math.cos(Number(radians())) -
-        (py - cy) * Math.sin(Number(radians()));
+        (px - cx) * Math.cos(Number(radians(index))) -
+        (py - cy) * Math.sin(Number(radians(index)));
 
       const y =
         cy +
-        (px - cx) * Math.sin(Number(radians())) +
-        (py - cy) * Math.cos(Number(radians()));
+        (px - cx) * Math.sin(Number(radians(index))) +
+        (py - cy) * Math.cos(Number(radians(index)));
 
       return { x, y };
     };
@@ -429,34 +424,38 @@ export default defineComponent({
       });
       return test_monitor_list;
     };
-    const four_point = () => {
+    const four_point = (index:number) => {
       const test_monitor_list: any = clacMonitor();
       if (test_monitor_list) {
-        const item = test_monitor_list[current_index.value];
+        const item = test_monitor_list[index];
         item.centerx = parseInt(item.centerx.toString());
         item.centery = parseInt(item.centery.toString());
         const x2: number = item.currentx + item.w;
         const y2: number = item.currenty + item.h;
         if (item.angle != 0) {
           const point_left_top = calculateCoordinates(
+            index,
             item.currentx,
             item.currenty,
             item.centerx,
             item.centery
           );
           const point_left_bootom = calculateCoordinates(
+            index,
             item.currentx,
             y2,
             item.centerx,
             item.centery
           );
           const point_right_top = calculateCoordinates(
+            index,
             x2,
             item.currenty,
             item.centerx,
             item.centery
           );
           const point_right_bottom = calculateCoordinates(
+            index,
             x2,
             y2,
             item.centerx,
@@ -473,9 +472,9 @@ export default defineComponent({
         }
       }
     };
-    const select_x = () => {
-      const point_list = four_point();
-      const item = $store.state.show_monitor_list[current_index.value];
+    const select_x = (index:number) => {
+      const point_list = four_point(index);
+      const item = $store.state.show_monitor_list[index];
       if (item.angle != 0) {
         if (point_list) {
           let minx = 100000;
@@ -490,8 +489,8 @@ export default defineComponent({
         if (wall.value) return item.currentx * wall.value?.clientWidth;
       }
     };
-    const select_y = () => {
-      const point_list = four_point();
+    const select_y = (index:number) => {
+      const point_list = four_point(index);
       let miny = 100000;
       if (point_list) {
         point_list.forEach((element) => {
@@ -500,15 +499,15 @@ export default defineComponent({
           }
         });
       }
-      const item = $store.state.show_monitor_list[current_index.value];
+      const item = $store.state.show_monitor_list[index];
       if (item.angle != 0) {
         return miny;
       } else {
         if (wall.value) return item.currenty * wall.value?.clientHeight;
       }
     };
-    const select_height = () => {
-      const point_list = four_point();
+    const select_height = (index:number) => {
+      const point_list = four_point(index);
       let maxy = 0;
       let miny = 100000;
       if (point_list) {
@@ -521,7 +520,7 @@ export default defineComponent({
           }
         });
       }
-      const item = $store.state.show_monitor_list[current_index.value];
+      const item = $store.state.show_monitor_list[index];
       if (item.angle != 0) {
         return maxy - miny;
       } else {
@@ -529,8 +528,8 @@ export default defineComponent({
       }
     };
 
-    const select_width = () => {
-      const point_list = four_point();
+    const select_width = (index:number) => {
+      const point_list = four_point(index);
       let maxx = 0;
       let minx = 100000;
       if (point_list) {
@@ -543,7 +542,7 @@ export default defineComponent({
           }
         });
       }
-      const item = $store.state.show_monitor_list[current_index.value];
+      const item = $store.state.show_monitor_list[index];
       if (item.angle != 0) {
         return maxx - minx;
       } else {
@@ -729,8 +728,6 @@ export default defineComponent({
           let monitorList: any = [];
 
           if (a && wall_dom) {
-            offsetHeight = wall_dom.clientHeight;
-            offsetWidth = wall_dom.clientHeight;
             a.forEach((element) => {
               let item: test_monitor = new test_monitor(0, 0, 0);
               item.h = element.h;
@@ -984,7 +981,6 @@ export default defineComponent({
                 }
               }
               break;
-
           }
         } catch {}
       }
@@ -997,6 +993,7 @@ export default defineComponent({
           (element: HTMLElement) => {
             if ($store.state.custom_defines.function_magic_wall) {
               show_magic_wall();
+              refresh_windows_pos();
             }
             if (element) {
               calcWallItemWH();
@@ -1242,6 +1239,18 @@ export default defineComponent({
                           .getCurrentClient()
                           ?.replaceWindow2(find_window, uuid, true);
                       } else {
+                        if ($store.state.custom_defines.function_magic_wall) {
+                          const item =
+                            $store.state.show_monitor_list[current_index.value];
+                          if (wall.value) {
+                            x = Number(select_x(current_index.value)) / wall.value.clientWidth;
+                            y = Number(select_y(current_index.value)) / wall.value.clientHeight;
+                            width =
+                              Number(select_width(current_index.value)) / wall.value.clientWidth;
+                            height =
+                              Number(select_height(current_index.value)) / wall.value.clientHeight;
+                          }
+                        }
                         const open_polling_request =
                           new Protocol.OpenPollingRequestEntity(
                             uuid,
@@ -1273,19 +1282,15 @@ export default defineComponent({
                             if (
                               $store.state.custom_defines.function_magic_wall
                             ) {
-                              const item =
-                                $store.state.show_monitor_list[
-                                  current_index.value
-                                ];
                               if (wall.value) {
-                                x = Number(select_x()) / wall.value.clientWidth;
+                                x = Number(select_x(current_index.value)) / wall.value.clientWidth;
                                 y =
-                                  Number(select_y()) / wall.value.clientHeight;
+                                  Number(select_y(current_index.value)) / wall.value.clientHeight;
                                 width =
-                                  Number(select_width()) /
+                                  Number(select_width(current_index.value)) /
                                   wall.value.clientWidth;
                                 height =
-                                  Number(select_height()) /
+                                  Number(select_height(current_index.value)) /
                                   wall.value.clientHeight;
                               }
                             }
@@ -1484,7 +1489,7 @@ export default defineComponent({
           }
         }
       },
-      async openWindowByLocalFile(event: MouseEvent) {
+      async openWindowByLocalFile(index: number, event: MouseEvent) {
         if (!wall.value) {
           return;
         }
@@ -1524,8 +1529,8 @@ export default defineComponent({
                   .getCurrentClient()
                   ?.addSignalSource(signal_source);
                 if (wall.value && response && response.success) {
-                  const cell_width = 1.0 / $store.state.wall_col;
-                  const cell_height = 1.0 / $store.state.wall_row;
+                  let cell_width = 1.0 / $store.state.wall_col;
+                  let cell_height = 1.0 / $store.state.wall_row;
 
                   const col = Math.floor(
                     last_context_menu_pos_x.value /
@@ -1538,9 +1543,17 @@ export default defineComponent({
                       cell_height
                   );
 
-                  const x = col * cell_width;
-                  const y = row * cell_height;
-
+                  let x = col * cell_width;
+                  let y = row * cell_height;
+                  if ($store.state.custom_defines.function_magic_wall&&index!=-1) {
+                    if (wall.value) {
+                      x = Number(select_x(index)) / wall.value.clientWidth;
+                      y = Number(select_y(index)) / wall.value.clientHeight;
+                      cell_width = Number(select_width(index)) / wall.value.clientWidth;
+                      cell_height =
+                        Number(select_height(index)) / wall.value.clientHeight;
+                    }
+                  }
                   if (!isNaN(x) && !isNaN(y)) {
                     const open_window_request =
                       new Protocol.OpenWindowRequestEntity(

src/store/index.ts

@@ -1,3 +1,4 @@
+import { EDeviceAttributeHelper } from "./../entities/EDeviceAttribute";
 import { ConnectTableEntity } from "src/entities/ConnectTableEntity";
 import {
   PollingEntity,
@@ -440,7 +441,7 @@ export default store(function (/* { ssrContext } */) {
           state.custom_defines.function_magic_wall =
             (state.device_attribute & EDeviceAttribute.ProductMagicWall) != 0;
           state.custom_defines.function_fusion =
-            (state.device_attribute & EDeviceAttribute.ProductFusion) != 0;
+            EDeviceAttributeHelper.isProductFusion(state.device_attribute);
         }
       },
       setAvancedDebug(state: StateInterface, playload?: any) {