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

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

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(
@@ -1446,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(
@@ -1454,7 +1466,8 @@ export default class ClientConnection {
         column,
         location,
         enable,
-        width
+        width,
+        auto_sync
       )
     );
   }

src/components/ControlPanelDialog.vue

@@ -77,7 +77,7 @@
       <q-form @submit="onSubmit">
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
-            <div class="col-auto text-h6">
+            <div class="col-auto text-h5">
               {{ $t("magic wall") }}
             </div>
             <q-space />
@@ -102,17 +102,17 @@
 
         <q-separator />
 
-        <q-card-section style="max-height: 80vh; width: 55vw" class="q-pa-none">
+        <q-card-section style="max-height: 70vh; width: 48vw" class="q-pa-none">
           <q-scroll-area style="height: 70vh">
             <q-card class="my-card" flat bordered>
               <q-card-section horizontal>
                 <q-card-section class="col-3" style="">
-                  <div class="text-h5">{{ $t("angle") }}</div>
+                  <div style="font-size: 1.2rem">{{ $t("angle") }}</div>
                   <q-separator />
                   <br />
-                  <div class="row no-wrap items-center">
+                  <div class="no-wrap items-center">
-                    <q-item>
+                    <q-item class="row">
-                      <q-item-section avatar>
+                      <q-item-section avatar class="">
                         <span class="q-mb-md" style="font-size: 1rem">
                           angle:</span
                         >
@@ -122,11 +122,25 @@
                           v-if="current_index > -1"
                           type="number"
                           min="0"
+                          oninput="if(value<0)value=0;if(value>360)value=(value/10);if(value>=0&value<=360)value=Math.floor(value)"
                           v-model="test_monitor_wall[current_index].angle"
                           @keydown="testLog($event)"
-                          oninput="if(value<0)value=0;if(value>360)value=360;"
                           hint=""
                           @update:model-value="changeAngle()"
+                          :rules="[
+                            (val) =>
+                              (val != null &&
+                                val != undefined &&
+                                val.toString().length > 0) ||
+                              $t('Please type something'),
+                            (val) =>
+                              parseInt(val) >= 0 ||
+                              $t('the number must be greater than 0'),
+                            (val) =>
+                              parseInt(val) <= 360 ||
+                              $t('the number must be greater than 360'),
+                          ]"
+                          lazy-rules
                         >
                           <template v-slot:append>
                             <span class="input_append">°</span>
@@ -148,17 +162,17 @@
                     </q-item>
                   </div>
                   <br />
-                  <div class="text-h5">
+                  <div style="font-size: 1.2rem">
                     {{ $t("physical central location") }}
                   </div>
                   <q-separator />
                   <br />
-                  <div class="row no-wrap items-center">
+                  <div class="no-wrap items-center">
-                    <q-item>
+                    <q-item class="row">
-                      <q-item-section avatar>
+                      <q-item-section avatar class="col-2">
                         <span class="q-mb-md">X:</span>
                       </q-item-section>
-                      <q-item-section>
+                      <q-item-section class="col">
                         <q-input
                           v-if="current_index > -1"
                           type="number"
@@ -201,12 +215,12 @@
                   </div>
                   <br />
 
-                  <div class="row">
+                  <div>
-                    <q-item>
+                    <q-item class="row">
-                      <q-item-section avatar>
+                      <q-item-section avatar class="col-2">
                         <span class="q-mb-md">Y:</span>
                       </q-item-section>
-                      <q-item-section>
+                      <q-item-section class="col">
                         <q-input
                           v-if="current_index > -1"
                           :hint="''"
@@ -285,8 +299,8 @@
                   <div
                     style="
                       position: absolute;
-                      height: 20.7vw;
+                      height: 18vw;
-                      width: 36.8vw;
+                      width: 32vw;
                       text-align: center;
                     "
                     :class="$store.state.power_state ? 'wall' : ''"
@@ -308,8 +322,8 @@
                     v-if="$store.state.power_state"
                     style="
                       position: absolute;
-                      height: 20.7vw;
+                      height: 18vw;
-                      width: 36.8vw;
+                      width: 32vw;
                       overflow: hidden;
                     "
                     @click="canel_active()"
@@ -397,7 +411,7 @@
                 <q-item-section>
                   <q-input
                     v-if="monitor_list_current_index > -1"
-                    type="text"
+                    type="number"
                     v-model="test_monitor_list[monitor_list_current_index].cmw"
                     @update:model-value="changewidth()"
                     :rules="[
@@ -438,7 +452,7 @@
                 <q-item-section>
                   <q-input
                     v-if="monitor_list_current_index > -1"
-                    type="text"
+                    type="number"
                     v-model="test_monitor_list[monitor_list_current_index].cmh"
                     @update:model-value="changeHeight()"
                     :rules="[
@@ -630,7 +644,7 @@
             no-caps
             :label="$t('revert')"
             color="primary"
-            @click="refresh_all"
+            @click="back_all"
           />
           <q-btn
             ref="accept"
@@ -657,7 +671,7 @@
 .wall {
   border: 1px solid black;
   background: no-repeat url("../../public/magic_bg/bg.jpg");
-  background-size: 36.8vw 20.7vw;
+  background-size: 32vw 18vw;
 }
 
 .wall_row {
@@ -856,20 +870,24 @@ export default defineComponent({
     const br = 0.6;
     const cr = 0.7;
     let test_monitor_list: Ref<test_monitor[]> = ref([
+      // new test_monitor(12, "13", cw, ch, cr)
+    ]);
+    const initialize = () => {
+      test_monitor_list.value = [
         new test_monitor(0, "01", aw, ah, ar),
         new test_monitor(1, "02", aw, ah, ar),
         new test_monitor(2, "03", aw, ah, ar),
         new test_monitor(3, "04", aw, ah, ar),
-      new test_monitor(4, "05", bw, bh, br),
+        new test_monitor(4, "05", aw, ah, ar),
-      new test_monitor(5, "06", bw, bh, br),
+        new test_monitor(5, "06", aw, ah, ar),
-      new test_monitor(6, "07", bw, bh, br),
+        new test_monitor(6, "07", aw, ah, ar),
-      new test_monitor(7, "08", bw, bh, br),
+        new test_monitor(7, "08", aw, ah, ar),
-      new test_monitor(8, "09", cw, ch, cr),
+        new test_monitor(8, "09", aw, ah, ar),
-      new test_monitor(9, "10", cw, ch, cr),
+        new test_monitor(9, "10", aw, ah, ar),
-      new test_monitor(10, "11", cw, ch, cr),
+        new test_monitor(10, "11", aw, ah, ar),
-      new test_monitor(11, "12", cw, ch, cr),
+        new test_monitor(11, "12", aw, ah, ar),
-      // new test_monitor(12, "13", cw, ch, cr)
+      ];
-    ]);
+    };
     interface show__Rect {
       width: number;
       height: number;
@@ -886,7 +904,7 @@ export default defineComponent({
     const realtime_upload = async (
       WallList: any = test_monitor_wall.value,
       per: number = percenter.value,
-      tep:number=1
+      tep: number = 1
     ) => {
       let client = GlobalData.getInstance().getCurrentClient();
       const settings = await GlobalData.getInstance()
@@ -896,16 +914,6 @@ export default defineComponent({
         output_length.value =
           parseInt(settings.wall_col.toString()) *
           parseInt(settings.wall_row.toString());
-        if (output_length.value > WallList.length) {
-          let num = output_length.value - WallList.length;
-          while (num > 0) {
-            let index = WallList.length;
-            let uuid = (index + 1).toString();
-            WallList.push(new test_monitor(index, uuid, aw, ah, ar));
-            num--;
-          }
-          getpx();
-        }
       }
 
       const cloud_monitor_list = new MagicWallConfig();
@@ -914,7 +922,7 @@ export default defineComponent({
         cloud_monitor_list.magic_wall_enable = true;
         cloud_monitor_list.col = parseInt(settings.wall_col.toString());
         cloud_monitor_list.row = parseInt(settings.wall_row.toString());
-        if(tep==1){
+        if (tep == 1) {
           WallList = ordination(WallList);
         }
         WallList.forEach((element: any, index: number) => {
@@ -927,7 +935,7 @@ export default defineComponent({
               ),
               h: element.h / wall_dom.offsetHeight,
               w: element.w / wall_dom.offsetWidth,
-              angle: parseInt(element.angle.toString()),
+              angle: Number(element.angle.toString()) ?? 0,
               initial_h: element.InitialH,
               initial_w: element.InitialW,
               percenter: per,
@@ -949,13 +957,14 @@ export default defineComponent({
                 currenty: element.currenty / wall_dom.offsetHeight,
                 h: element.h / wall_dom.offsetHeight,
                 w: element.w / wall_dom.offsetWidth,
-                angle: parseInt(element.angle.toString()),
+                angle: Number(element.angle.toString()) ?? 0,
                 centerx: element.centerx / 3840,
                 centery: element.centery / 2160,
               });
             }
           });
-          $store.commit("setShowMonitorList", monitorList);
+          // $store.commit("setShowMonitorList", monitorList);
+          // console.log($store.state.show_monitor_list)
         }
         if (!setMagic?.success) {
           $q.notify({
@@ -973,8 +982,10 @@ export default defineComponent({
       if (wall_dom) {
         lcm.value = (wall_dom.offsetWidth * 0.5) / 1214;
         test_monitor_list.value.forEach((ele) => {
-          ele.cmw = Math.round(ele.w / lcm.value);
+          ele.cmw = 1214;
-          ele.cmh = Math.round(ele.h / lcm.value);
+          ele.cmh = 684;
+          ele.w = wall_dom.offsetWidth * 0.5;
+          ele.h = wall_dom.offsetHeight * 0.5;
         });
       }
     };
@@ -987,7 +998,13 @@ export default defineComponent({
       }
     };
     const close_magic_switch = () => {
+      let client = GlobalData.getInstance().getCurrentClient();
       magic_switch.value = false;
+      if (client) {
+        client.setMagicWallList(
+          JSON.parse(JSON.stringify(test_monitor_list.value))
+        );
+      }
       upload_magic_switch();
     };
     const radians = (item: test_monitor) => {
@@ -1015,14 +1032,13 @@ export default defineComponent({
     const four_point = (item: test_monitor) => {
       const wall_dom = wall.value;
       let centerx: any, centery: any;
+      if (item) {
         if (wall_dom) {
           centerx = (item.centerx / 3840) * wall_dom.offsetWidth;
           centery = (item.centery / 2160) * wall_dom.offsetHeight;
         }
         centerx = Math.round(centerx);
         centery = Math.round(centery);
-      // item.centerx = Math.round((item.centerx));
-      // item.centery = Math.round(item.centery);
         const x2: number = item.currentx + item.w;
         const y2: number = item.currenty + item.h;
         const x1: number = centerx;
@@ -1066,6 +1082,7 @@ export default defineComponent({
           ];
           return point_list;
         }
+      }
     };
     let offsetHeight = ref(0.0);
     let offsetWidth = ref(0.0);
@@ -1090,9 +1107,9 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point(item);
       if (wall_dom) {
-        if (item.angle != 0 && point_list) {
+        const point_list = four_point(item);
+        if (item && item.angle != 0 && point_list) {
           let minx = 0;
           point_list.forEach((element) => {
             if (minx > element.x) {
@@ -1164,8 +1181,8 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point(item);
       if (wall_dom) {
+        const point_list = four_point(item);
         if (item.angle != 0 && point_list) {
           let miny = 0;
           point_list.forEach((element) => {
@@ -1191,8 +1208,8 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point(item);
       if (wall_dom) {
+        const point_list = four_point(item);
         if (item.angle != 0 && point_list) {
           let maxy = 0;
           point_list.forEach((element) => {
@@ -1256,6 +1273,11 @@ export default defineComponent({
     const moveMonitor = (item: test_monitor, rect: show__Rect) => {
       //计算是否超出，然后放回
       const wall_dom = wall.value;
+      const temp_index = sort_index.value.findIndex((v: any) => v == item.uuid);
+      if (temp_index != -1) {
+        sort_index.value.splice(temp_index, 1);
+        sort_index.value.push(item.uuid);
+      }
       if (item.angle != 0) {
         exceedrange(item);
       } else if (wall_dom) {
@@ -1280,7 +1302,11 @@ export default defineComponent({
           ((item.currenty + item.h / 2) / wall_dom?.offsetHeight) * 2160
         );
       }
+      test_monitor_wall.value = ordination(
+        JSON.parse(JSON.stringify(test_monitor_wall.value))
+      );
       realtime_upload();
+      item.active = true;
     };
     const exceedrange = (item: test_monitor) => {
       const wall_dom = wall.value;
@@ -1340,35 +1366,34 @@ export default defineComponent({
       test_monitor_list.value[index].isactive = true;
     };
     let test_delete_flag = false;
-    const refresh_all = () => {
+    const back_all = () => {
       refresh_resize(2);
       current_index.value = -1;
-      monitor_list_current_index.value=-1
+      monitor_list_current_index.value = -1;
       percenter.value = last_percenter.value;
       multiple_select.value = [];
       multiple.value = false;
       loading.value = false;
-      // test_monitor_list.value.forEach((element) => {
+      if (list_magic) {
-      //   element.isHide = false;
+        JSON.parse(list_magic).forEach((element: any, index: number) => {
-      //   element.isactive=false;
+          if (test_monitor_list.value[index].uuid == element.uuid) {
-      // });
+            test_monitor_list.value[index].cmw = element.cmw;
-      // last_wall.value.forEach((element) => {
+            test_monitor_list.value[index].cmh = element.cmh;
-      //   element.isShow = true;
+          }
-      //   test_monitor_wall.value.push(JSON.parse(JSON.stringify(element)));
+        });
-      //   test_monitor_list.value[element.id].isHide = true;
+      }
-      // });
+      realtime_upload(last_wall.value, last_percenter.value, 2);
-      realtime_upload(last_wall.value,last_percenter.value,2);
     };
     let sort_index: any = ref([]);
     let old_sort_index: any = [];
 
     const ordination = (wall_list: any, sort: any = sort_index.value) => {
       let temp_list: test_monitor[] = [];
-      
       wall_list.forEach((ele: any, index: number) => {
         let i = sort.indexOf(ele.uuid);
         temp_list[i] = wall_list[index];
       });
+      current_index.value = wall_list.length - 1;
       return temp_list;
     };
     const refresh_resize = (a: number) => {
@@ -1422,7 +1447,7 @@ export default defineComponent({
       refresh_resize(1);
     });
     const refresh_magic = (a: any) => {
-      sort_index.value=[]
+      sort_index.value = [];
       let monitorList: any = [];
       $store.commit("setShowMonitorList", monitorList);
       if (a) {
@@ -1451,6 +1476,9 @@ export default defineComponent({
           }
         });
       }
+      test_monitor_list.value.forEach((ele) => {
+        ele.isHide = false;
+      });
       const wall_dom = wall.value;
       if (a && wall_dom) {
         test_monitor_wall.value = [];
@@ -1476,6 +1504,7 @@ export default defineComponent({
           );
           item.angle = element.angle;
           item.isShow = true;
+          item.active = false;
           test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
 
           sort_index.value.push(test_monitor_list.value[element.index].uuid);
@@ -1486,6 +1515,9 @@ export default defineComponent({
           });
         });
       }
+      if (a.length == 0) {
+        test_monitor_wall.value = [];
+      }
     };
     const sub_x = () => {
       const wall_dom = wall.value;
@@ -1622,6 +1654,10 @@ export default defineComponent({
       }
       realtime_upload();
     };
+    let list_magic: any = [];
+    const detect = (list: any) => {
+      list.forEach((ele: any) => {});
+    };
     EventBus.getInstance().on(
       EventNamesDefine.NotifyMessage,
       (notify: NotifyMessage) => {
@@ -1643,9 +1679,7 @@ export default defineComponent({
               ) as Protocol.SetApplicationConfigRequestEntity;
               if (temp.key == "magic_wall_config") {
                 const a = JSON.parse(temp.value).windows;
-                if (
+                if (true) {
-                  true
-                ) {
                   refresh_magic(a);
                 }
               }
@@ -1666,7 +1700,7 @@ export default defineComponent({
       upload_magic_switch,
       magic_switch,
       magic_isbutton,
-      refresh_all,
+      back_all,
       getpx,
       lcm,
       model,
@@ -1700,27 +1734,34 @@ export default defineComponent({
         console.log(a);
       },
       async showDialog() {
+        initialize();
         monitor_list_current_index.value = -1;
         show_dialog.value = true;
         magic_switch.value = true;
         sort_index.value = [];
-        old_sort_index=[]
+        old_sort_index = [];
-        last_wall.value=[]
+        last_wall.value = [];
+        last_percenter.value = 1;
         let client = GlobalData.getInstance().getCurrentClient();
         if (client) {
           const settings = await GlobalData.getInstance()
             .getCurrentClient()
             ?.getOutputBoardSetting();
+
           const response = await client.getMagicWallConfig();
           const wall_dom = wall.value;
           const SetMagicWallGridState = await client.setMagicWallGridState(
             magic_switch.value
           );
+
           if (wall_dom) {
             offsetHeight.value = wall_dom.offsetHeight;
             offsetWidth.value = wall_dom.offsetWidth;
             getpx();
           }
+          test_monitor_list.value.forEach((element) => {
+            element.isHide = false;
+          });
           if (response && settings) {
             const a = response?.config.windows;
             output_length.value =
@@ -1738,6 +1779,15 @@ export default defineComponent({
               }
               getpx();
             }
+            list_magic = (await client.getApplicationSettins())?.config
+              ?.magic_list;
+            if (list_magic) {
+              test_monitor_list.value = JSON.parse(list_magic);
+            }
+            test_monitor_list.value.forEach((element) => {
+              element.isHide = false;
+              element.isactive=false
+            });
             if (
               output_length.value !=
               response.config.col * response.config.row
@@ -1749,9 +1799,7 @@ export default defineComponent({
               multiple.value = false;
               last_wall.value = [];
               sort_index.value = [];
-              test_monitor_list.value.forEach((element) => {
+
-                element.isHide = false;
-              });
               $store.commit("setShowMonitorList", []);
               loading.value = false;
             } else if (a && wall_dom) {
@@ -1778,6 +1826,7 @@ export default defineComponent({
                 );
                 item.angle = element.angle;
                 item.isShow = true;
+                item.active = false;
                 test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
                 last_wall.value.push(JSON.parse(JSON.stringify(item)));
                 sort_index.value.push(
@@ -1786,11 +1835,7 @@ export default defineComponent({
                 old_sort_index.push(
                   test_monitor_list.value[element.index].uuid
                 );
-                test_monitor_list.value.forEach((ele) => {
+                test_monitor_list.value[element.index].isHide = true;
-                  if (element.index == ele.id) {
-                    ele.isHide = true;
-                  }
-                });
               });
               if (a.length == 1) {
                 current_index.value = 0;
@@ -1798,6 +1843,13 @@ export default defineComponent({
                 current_index.value = -1;
               }
             }
+            if (a.length == 0) {
+              test_monitor_list.value.forEach((ele) => {
+                ele.isHide = false;
+              });
+              sort_index.value = [];
+              test_monitor_wall.value = [];
+            }
           }
         }
       },
@@ -1840,7 +1892,7 @@ export default defineComponent({
                 ),
                 h: element.h / wall_dom.offsetHeight,
                 w: element.w / wall_dom.offsetWidth,
-                angle: parseInt(element.angle.toString()),
+                angle: Number(element.angle.toString()) ?? 0,
                 initial_h: element.InitialH,
                 initial_w: element.InitialW,
                 percenter: percenter.value,
@@ -1850,7 +1902,9 @@ export default defineComponent({
             }
           });
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
-
+          client.setMagicWallList(
+            JSON.parse(JSON.stringify(test_monitor_list.value))
+          );
           if (setMagic?.success) {
             let monitorList: any = [];
             test_monitor_wall.value.forEach((element, index) => {
@@ -1861,7 +1915,7 @@ export default defineComponent({
                   currenty: element.currenty / wall_dom.offsetHeight,
                   h: element.h / wall_dom.offsetHeight,
                   w: element.w / wall_dom.offsetWidth,
-                  angle: parseInt(element.angle.toString()),
+                  angle: Number(element.angle.toString()) ?? 0,
                   centerx: element.centerx / 3840,
                   centery: element.centery / 2160,
                 });
@@ -1957,6 +2011,16 @@ export default defineComponent({
           const wall_dom = wall.value;
           item.isShow = true;
           if (wall_dom) {
+            if (item.cmw == 1214) {
+              item.w = wall_dom.offsetWidth * 0.5;
+            } else {
+              item.w = (item.cmw / 1214) * (wall_dom.offsetWidth * 0.5);
+            }
+            if (item.cmh == 684) {
+              item.h = wall_dom.offsetHeight * 0.5;
+            } else {
+              item.h = (item.cmh / 684) * (wall_dom.offsetHeight * 0.5);
+            }
             item.InitialH = item.h;
             item.InitialW = item.w;
             item.resizew = item.w / wall_dom.offsetWidth;
@@ -1999,7 +2063,6 @@ export default defineComponent({
           }
         }
       },
-
       onDragEnter(e: DragEvent, index: string) {
         e.stopPropagation();
         let target: HTMLElement | null = e.target as HTMLElement;
@@ -2026,54 +2089,58 @@ export default defineComponent({
       },
       closeWindow(item: test_monitor, index: number) {
         current_index.value = -1;
-        item.cmw = Math.round(item.w / lcm.value);
+        // item.cmw = Math.round(item.w / lcm.value);
-        item.cmh = Math.round(item.h / lcm.value);
+        // item.cmh = Math.round(item.h / lcm.value);
         test_monitor_list.value[item.id] = JSON.parse(
           JSON.stringify(test_monitor_wall.value[index])
         );
         const temp_index = sort_index.value.indexOf(item.uuid);
         sort_index.value.splice(temp_index, 1);
+        test_monitor_wall.value.forEach((ele, ind) => {
+          if (ele.uuid == item.uuid) {
+            test_monitor_wall.value.splice(ind, 1);
+          }
+        });
         test_monitor_list.value[item.id].isHide = false;
-        test_monitor_wall.value[index].isShow = false;
+        // test_monitor_wall.value[temp_index].isShow = false;
         multiple_select.value = [];
         realtime_upload();
+        current_index.value = -1;
       },
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;
-        test_monitor_wall.value.forEach((ele) => {
+        // test_monitor_wall.value.forEach((ele) => {
-          ele.cmh = Math.round(ele.h / lcm.value);
+        //   ele.cmh = Math.round(ele.h / lcm.value);
-          ele.cmw = Math.round(ele.w / lcm.value);
+        //   ele.cmw = Math.round(ele.w / lcm.value);
-          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
+        //   test_monitor_list.value[ele.id].cmh = Number(JSON.stringify(ele.cmh));
-        });
+        //   test_monitor_list.value[ele.id].cmw = Number(JSON.stringify(ele.cmw));
+        // });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
         });
-        test_monitor_wall.value.forEach((element, i) => {
+        test_monitor_wall.value = [item];
-          if (index != i) {
-            element.isShow = false;
-          }
-        });
         sort_index.value = [item.uuid];
         test_monitor_list.value[item.id].isHide = true;
-        test_monitor_wall.value[index].isShow = true;
+        current_index.value = 0;
         realtime_upload();
-        current_index.value = sort_index.value.indexOf(item.uuid);
       },
       //cache和与主存间的地址映射由硬件自动完成
       closeAllWindows() {
         sort_index.value = [];
         current_index.value = -1;
-        test_monitor_wall.value.forEach((ele) => {
+          monitor_list_current_index.value = -1;
-          ele.cmh = Math.round(ele.h / lcm.value);
+        // test_monitor_wall.value.forEach((ele) => {
-          ele.cmw = Math.round(ele.w / lcm.value);
+        //   ele.cmh = Math.round(ele.h / lcm.value);
-          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
+        //   ele.cmw = Math.round(ele.w / lcm.value);
-        });
+        //   test_monitor_list.value[ele.id].cmh = Number(JSON.stringify(ele.cmh));
+        //   test_monitor_list.value[ele.id].cmw = Number(JSON.stringify(ele.cmw));
+        // });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
+          element.isactive=false
         });
-        test_monitor_wall.value.forEach((element) => {
+
-          element.isShow = false;
+        test_monitor_wall.value = [];
-        });
         multiple_select.value = [];
         realtime_upload();
       },
@@ -2116,7 +2183,7 @@ export default defineComponent({
         }
         realtime_upload();
       },
-      changePercenter(a:number) {
+      changePercenter(a: number) {
         const wall_dom = wall.value;
         let tep = false;
         test_monitor_wall.value.forEach((element) => {
@@ -2146,7 +2213,7 @@ export default defineComponent({
             tep = true;
           }
         });
-        if(a==2){
+        if (a == 2) {
           realtime_upload();
         }
       },
@@ -2174,12 +2241,22 @@ export default defineComponent({
       },
 
       changewidth() {
+        const wall_dom = wall.value;
         let item = test_monitor_list.value[monitor_list_current_index.value];
-        item.w = Number(item.cmw) * lcm.value;
+        // if (wall_dom) {
+        //   if(item.cmw==1214){
+        //   item.w = 0.5 * wall_dom.offsetWidth;
+        //   }
+        // }
       },
       changeHeight() {
+        const wall_dom = wall.value;
         let item = test_monitor_list.value[monitor_list_current_index.value];
-        item.h = item.cmh * lcm.value;
+        // if (wall_dom) {
+        //  if(item.cmh==684){
+        //   item.h = 0.5 * wall_dom?.offsetHeight;
+        //  }
+        // }
       },
       alignTop() {
         let item = test_monitor_wall.value[multiple_select.value[0]];
@@ -2189,7 +2266,7 @@ export default defineComponent({
             tep_item.currenty = item.currenty;
           }
         });
-
+        multiple_select.value = [];
         realtime_upload();
       },
       alignBottom() {
@@ -2200,6 +2277,7 @@ export default defineComponent({
             tep_item.currenty = item.currenty + item.h - tep_item.h;
           }
         });
+        multiple_select.value = [];
         realtime_upload();
       },
       alignRight() {
@@ -2210,7 +2288,7 @@ export default defineComponent({
             tep_item.currentx = item.currentx + item.w - tep_item.w;
           }
         });
-
+        multiple_select.value = [];
         realtime_upload();
       },
       alignLeft() {
@@ -2221,6 +2299,7 @@ export default defineComponent({
             tep_item.currentx = item.currentx;
           }
         });
+        multiple_select.value = [];
         realtime_upload();
       },
       testLog(a: any) {

src/components/FusionSettings/DensityCorrection.vue

@@ -7,7 +7,8 @@
           <Vue3DraggableResizable v-show="now_v_h == 'vertical'" :class="[options_model_v == index ? 'action' : 'point']"
             v-for="(item, index) in value_v_point.length" :initW="point.w" :initH="point.h" :resizable="false" :x="0"
             v-model:y="value_v_point[index].y" @activated="options_model_v = index; now_v_h = 'vertical'"
-            @click="options_model_v = index; now_v_h = 'vertical'" :draggable="url.indexOf('pad')==-1" @dragging="dragStartHandle($event, index, 'v')">
+            @click="options_model_v = index; now_v_h = 'vertical'" :draggable="url.indexOf('pad') == -1"
+            @dragging="dragStartHandle($event, index, 'v')">
             <span>v{{
               index + 1
             }}</span>
@@ -15,7 +16,8 @@
           <Vue3DraggableResizable v-show="now_v_h == 'vertical'" :class="[options_model_v == index ? 'action' : 'point']"
             v-for="(item, index) in value_v_point.length" :initW="point.w" :initH="point.h" :resizable="false"
             :x="max.x - 20" @click="options_model_v = index; now_v_h = 'vertical'" v-model:y="value_v_point[index].y"
-            @activated="options_model_v = index; now_v_h = 'vertical'" :draggable="url.indexOf('pad')==-1" @dragging="dragStartHandle($event, index, 'v')">
+            @activated="options_model_v = index; now_v_h = 'vertical'" :draggable="url.indexOf('pad') == -1"
+            @dragging="dragStartHandle($event, index, 'v')">
             <span>v{{
               index + 1
             }}</span>
@@ -23,7 +25,8 @@
           <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
             v-for="(item, index) in value_h_point.length" :initW="point.w" :initH="point.h" :resizable="false"
             v-model:x="value_h_point[index].x" :y="0" @activated="options_model_h = index; now_v_h = 'level'"
-            @click="options_model_h = index; now_v_h = 'level'" :draggable="url.indexOf('pad')==-1" @dragging="dragStartHandle($event, index, 'h')">
+            @click="options_model_h = index; now_v_h = 'level'" :draggable="url.indexOf('pad') == -1"
+            @dragging="dragStartHandle($event, index, 'h')">
             <span>h{{
               index + 1
             }}</span>
@@ -31,7 +34,8 @@
           <Vue3DraggableResizable v-show="now_v_h == 'level'" :class="[options_model_h == index ? 'action' : 'point']"
             v-for="(item, index) in value_h_point.length" :initW="point.w" :initH="point.h" :resizable="false"
             v-model:x="value_h_point[index].x" @activated="options_model_h = index; now_v_h = 'level'" :y="max.y - 20"
-            @click="options_model_h = index; now_v_h = 'level'" :draggable="url.indexOf('pad')==-1" @dragging="dragStartHandle($event, index, 'h')">
+            @click="options_model_h = index; now_v_h = 'level'" :draggable="url.indexOf('pad') == -1"
+            @dragging="dragStartHandle($event, index, 'h')">
             <span>h{{
               index + 1
             }}</span>
@@ -40,7 +44,7 @@
       </div>
     </div>
   </div>
-  <div>
+  <div v-show="ispad">
     <div class="row">
       <div class="col-1"></div>
       <div class="col-5">
@@ -55,7 +59,8 @@
         <div class="col-2 q-md-px-md"> <q-select class="q-pt-md" :label="$t('vertical point')"
             @update:model-value="(val) => { chang_point_amount(val, 'v') }" :dense="true" filled
             v-model="value_v_point_amount" :options="options_value_v_point_amount" emit-value map-options /></div>
-        <div class="col-2 q-pt-md  "><q-btn color="white" @click="()=>{add_dialog=true;value_point_amount_tmp_v=value_v_point_amount}" text-color="black"
+        <div class="col-2 q-pt-md  "><q-btn color="white"
+            @click="() => { add_dialog = true; value_point_amount_tmp_v = value_v_point_amount }" text-color="black"
             :label="$t('add control points')" /></div>
         <div class="col-2 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }"
             :disable="value_v_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
@@ -68,26 +73,29 @@
         <div class="col-2" @mousewheel="details_selsect_v"> <q-select class="q-pt-md " :label="$t('vertical')"
             @update:model-value="(val) => { options_v = val }" :dense="true" filled v-model="options_model_v"
             :options="options_v" emit-value map-options /></div>
-        <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'v')"> <q-input v-if="value_v[options_model_v]"
+        <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'v')"> <q-input
-            filled type="number" class="q-pt-md" :dense="true" v-model="value_v[options_model_v].y"
+            v-if="value_v[options_model_v]" filled type="number" class="q-pt-md" :dense="true"
-            @update:model-value="chang(options_model_v, $event, 'v')" lazy-rules @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  />
+            v-model="value_v[options_model_v].y" @update:model-value="chang(options_model_v, $event, 'v')" lazy-rules
+            @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" />
+
         </div>
         <div class="q-pt-md  col-2">
           <q-btn color="white" @click="reset(options_model_v, true, 'v')" text-color="black" :label="$t('reset')" />
         </div>
 
         <div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall" text-color="black"
-            :label="$t('reset all')+value_v_point_amount+$t('point')" /></div>
+            :label="$t('reset all') + value_v_point_amount + $t('point')" /></div>
       </div>
     </div>
 
     <div>
       <div class="row q-md-py-md" v-show="now_v_h == 'level'">
         <div class="col-1"></div>
-        <div class="col-2 q-px-md"> <q-select class="q-pt-md" :label="$t('level point')"
+        <div class="col-2  q-md-px-md"> <q-select class="q-pt-md" :label="$t('level point')"
             @update:model-value="(val) => { chang_point_amount(val, 'h') }" :dense="true" filled
             v-model="value_h_point_amount" :options="options_value_h_point_amount" emit-value map-options /></div>
-        <div class="col-2 q-pt-md "><q-btn color="white" @click="add_dialog = true;value_point_amount_tmp_h=value_h_point_amount" text-color="black"
+        <div class="col-2 q-pt-md "><q-btn color="white"
+            @click="add_dialog = true; value_point_amount_tmp_h = value_h_point_amount" text-color="black"
             :label="$t('add control points')" /></div>
         <div class="col-2 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }"
             :disable="value_h_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
@@ -97,22 +105,113 @@
 
       <div class="row" v-show="now_v_h == 'level'">
         <div class="col-1"></div>
-        <div class="col-2 q-px-md" @mousewheel="details_selsect_h"> <q-select class="q-pt-md" :label="$t('level')"
+        <div class="col-2  q-md-px-md" @mousewheel="details_selsect_h"> <q-select class="q-pt-md" :label="$t('level')"
             @update:model-value="(val) => { options_h = val }" :dense="true" filled v-model="options_model_h"
             :options="options_h" emit-value map-options /></div>
-        <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'h')"> <q-input v-if="value_h[options_model_h]"
+        <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'h')"> <q-input
-            filled type="number" class="q-pt-md" :dense="true" v-model="value_h[options_model_h].x"
+            v-if="value_h[options_model_h]" filled type="number" class="q-pt-md" :dense="true"
-            @update:model-value="chang(options_model_h, $event, 'h')" lazy-rules @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  />
+            v-model="value_h[options_model_h].x" @update:model-value="chang(options_model_h, $event, 'h')" lazy-rules
+            @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" />
         </div>
         <div class="q-pt-md col-2">
           <q-btn color="white" @click="reset(options_model_h, true, 'h')" text-color="black" :label="$t('reset')" />
         </div>
 
         <div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall" text-color="black"
-            :label="$t('reset all')+value_h_point_amount+$t('point')" /></div>
+            :label="$t('reset all') + value_h_point_amount + $t('point')" /></div>
       </div>
     </div>
   </div>
+
+
+  <div v-show="!ispad">
+    <div class="row">
+      <div class="col-1"></div>
+      <div class="col-5">
+        <q-radio v-model="now_v_h" val="level" :label="$t('level')" />
+      </div>
+      <div class="col-5"><q-radio v-model="now_v_h" val="vertical" :label="$t('vertical')" /></div>
+    </div>
+
+    <div>
+      <div class="row q-md-py-md" v-show="now_v_h == 'vertical'">
+        <div class="col-1"></div>
+        <div class="col-2 q-md-px-md"> <q-select class="q-pt-md" :label="$t('vertical point')"
+            @update:model-value="(val) => { chang_point_amount(val, 'v') }" :dense="true" filled
+            v-model="value_v_point_amount" :options="options_value_v_point_amount" emit-value map-options /></div>
+        <div class="col-2 q-pt-md  "><q-btn color="white"
+            @click="() => { add_dialog = true; value_point_amount_tmp_v = value_v_point_amount }" text-color="black"
+            :label="$t('add control points')" /></div>
+        <div class="col-2 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }"
+            :disable="value_v_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
+        <div class="q-pt-md  col-5"> <q-btn color="white" @click="resetall_all" text-color="black"
+            :label="$t('Reset all program control points')" /></div>
+      </div>
+
+      <div v-show="now_v_h == 'vertical'" style="display: flex;justify-content: space-around;">
+        <div style="min-width: 100px;" @mousewheel="details_selsect_v"> <q-select class="q-pt-md " :label="$t('vertical')"
+            @update:model-value="(val) => { options_v = val }" :dense="true" filled v-model="options_model_v"
+            :options="options_v" emit-value map-options /></div>
+        <div  @mousewheel="details_selsect_val($event, 'v')"> <q-input
+            v-if="value_v[options_model_v]" filled type="number" class="q-pt-md" :dense="true"
+            v-model="value_v[options_model_v].y" @update:model-value="chang(options_model_v, $event, 'v')" lazy-rules
+            @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_v, true, 'v')" 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_v_point_amount + $t('point')" /></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="row q-md-py-md" v-show="now_v_h == 'level'">
+        <div class="col-1"></div>
+        <div class="col-2  q-md-px-md"> <q-select class="q-pt-md" :label="$t('level point')"
+            @update:model-value="(val) => { chang_point_amount(val, 'h') }" :dense="true" filled
+            v-model="value_h_point_amount" :options="options_value_h_point_amount" emit-value map-options /></div>
+        <div class="col-2 q-pt-md "><q-btn color="white"
+            @click="add_dialog = true; value_point_amount_tmp_h = value_h_point_amount" text-color="black"
+            :label="$t('add control points')" /></div>
+        <div class="col-2 q-pt-md "><q-btn color="white" @click="() => { del_dialog = true }"
+            :disable="value_h_point_amount <= 5" text-color="black" :label="$t('reduce control points')" /></div>
+        <div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall_all" text-color="black"
+            :label="$t('Reset all program control points')" /></div>
+      </div>
+
+      <div  v-show="now_v_h == 'level'"  style="display: flex;justify-content: space-around;">
+        <div style="min-width: 100px;"  @mousewheel="details_selsect_h"> <q-select class="q-pt-md" :label="$t('level')"
+            @update:model-value="(val) => { options_h = val }" :dense="true" filled v-model="options_model_h"
+            :options="options_h" emit-value map-options /></div>
+        <div class=" q-px-md" @mousewheel="details_selsect_val($event, 'h')"> <q-input
+            v-if="value_h[options_model_h]" filled type="number" class="q-pt-md" :dense="true"
+            v-model="value_h[options_model_h].x" @update:model-value="chang(options_model_h, $event, 'h')" lazy-rules
+            @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-pt-md ">
+          <q-btn color="white" @click="reset(options_model_h, true, 'h')" text-color="black" :label="$t('reset')" />
+        </div>
+
+        <div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall" text-color="black"
+            :label="$t('reset all') + value_h_point_amount + $t('point')" /></div>
+      </div>
+    </div>
+  </div>
+
   <div style="position: absolute;bottom: 0;">
     <q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }"
       :label="$t('auxiliary lines')" />
@@ -141,21 +240,26 @@
       </q-card-section>
       <q-card-section class="q-pt-none">
         <div class="row">
-          <div v-if="now_v_h=='vertical'" class="col-10"><q-input filled v-model="value_v_point_amount" min="3" disable type="number"
+          <div v-if="now_v_h == 'vertical'" class="col-10"><q-input filled v-model="value_v_point_amount" min="3" disable
-              :label="$t('Please enter the points you need to add')" @update:model-value="(val: any) => {  }" />
+              type="number" :label="$t('Please enter the points you need to add')"
+              @update:model-value="(val: any) => { }" />
           </div>
           <div v-else class="col-10"><q-input filled v-model="value_h_point_amount" min="3" disable type="number"
               :label="$t('Please enter the points you need to add')" @update:model-value="(val: any) => { }" />
           </div>
           <div class="col-1 q-pa-sm"> <q-btn color="white" text-color="black" label="↑"
-              @click="() => {now_v_h=='vertical'?preview_v(Number(value_v_point_amount)+1):preview_h(Number(value_h_point_amount)+1)}" /> </div>
+              @click="() => { now_v_h == 'vertical' ? preview_v(Number(value_v_point_amount) + 1) : preview_h(Number(value_h_point_amount) + 1) }" />
+          </div>
           <div class="col-1 q-pa-sm"> <q-btn color="white" text-color="black" label="↓"
-              @click="() => {now_v_h=='vertical'?preview_v(Number(value_v_point_amount)-1):preview_h(Number(value_h_point_amount)-1)}" /></div>
+              @click="() => { now_v_h == 'vertical' ? preview_v(Number(value_v_point_amount) - 1) : preview_h(Number(value_h_point_amount) - 1) }" />
+          </div>
         </div>
 
       </q-card-section>
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn flat :label="$t('Cancel')" @click="()=>{now_v_h=='vertical'?preview_v(value_point_amount_tmp_v):preview_h(value_point_amount_tmp_h)}" color="primary" v-close-popup />
+        <q-btn flat :label="$t('Cancel')"
+          @click="() => { now_v_h == 'vertical' ? preview_v(value_point_amount_tmp_v) : preview_h(value_point_amount_tmp_h) }"
+          color="primary" v-close-popup />
         <q-btn flat :label="$t('ok')" @click="add" color="primary" v-close-popup />
       </q-card-actions>
     </q-card>
@@ -165,26 +269,41 @@
   <q-dialog v-model="ipad_chang">
     <q-card style="width: 40vw; max-width: 80vw;">
       <q-card-section>
-        <div class="text-h6">{{ $t('point') +(now_v_h == 'level'?options_model_h+1:options_model_v+1)}}</div>
+        <!-- <div class="text-h6">{{ $t('point') +(now_v_h == 'level'?options_model_h+1:options_model_v+1)}}</div> -->
+        <div class="row">
+          <div class="col-4" v-show="now_v_h != 'level'">
+            <q-select class="q-pt-md " :label="$t('vertical')" @update:model-value="(val) => { options_v = val }"
+              :dense="true" filled v-model="options_model_v" :options="options_v" emit-value map-options />
+          </div>
+          <div class="col-4" v-show="now_v_h == 'level'">
+            <q-select class="q-pt-md" :label="$t('level')" @update:model-value="(val) => { options_h = val }"
+              :dense="true" filled v-model="options_model_h" :options="options_h" emit-value map-options />
+          </div>
+        </div>
       </q-card-section>
       <q-card-section class="q-pt-none">
         <div class="row q-pb-md" v-show="now_v_h != 'level'">
-          <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 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="row">
-          <div class="col-6" style="text-align: center;"><q-btn color="white" v-show="now_v_h == 'level'" 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" v-show="now_v_h == 'level'"
-          <div class="col-6" style="text-align: center;"><q-btn color="white" v-show="now_v_h == 'level'" text-color="black" icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x','+')"  @touchend="handlerTouchend"  /></div>
+              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" v-show="now_v_h == 'level'"
+              text-color="black" icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x', '+')"
+              @touchend="handlerTouchend" /></div>
         </div>
         <div class="row  q-pt-md" v-show="now_v_h != 'level'">
-          <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 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" v-close-popup />
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang = false" />
       </q-card-actions>
     </q-card>
   </q-dialog>
-
 </template>
 
 <style scoped>
@@ -197,6 +316,15 @@
   background-color: rgb(186, 245, 245);
   border-radius: 50%;
 }
+</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">
@@ -233,14 +361,16 @@ export default defineComponent({
     let $store = useStore();
     let $t = useI18n();
     const ste_status = ref(0);
-
+    /**
+     * 计算当前的投影机
+     */
     const configselsect = computed(() => {
       return $store.state.selected_projector;
     });
     /**
      * 平板弹窗修改
      */
-     const ipad_chang=ref(false)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -255,15 +385,43 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
+    /**
+     * 当前的参数
+     */
     let config = JSON.parse($store.state.fusion_configuration).projectors[selectedprojector.value];
+    /**
+     * 控制页面上当前显示垂直校正还是水平
+     */
     const now_v_h = ref("")
+    /**
+     * 水平校正 点的个数 默认取配置文件的第一个参数
+     */
     const value_h_point_amount = ref(Number(Object.keys(config.multi_hor_density)[0]))
+    /**
+     * 垂直校正 点的个数 默认取配置文件的第一个参数
+     */
     const value_v_point_amount = ref(Number(Object.keys(config.multi_ver_density)[0]))
+    /**
+     * 添加点的弹窗
+     */
     const add_dialog = ref(false)
+    /**
+     * 当前数量 好像没有用
+     */
     const now_amount = ref(0)
-
+    /**
+     * 可供选择的 水平 点的数量 绑定 select
+     */
     const options_value_h_point_amount = ref(<string[]>[])
+    /**
+     * 可供选择的 垂直 点的数量 绑定 select
+     */
     const options_value_v_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") {
@@ -274,7 +432,9 @@ export default defineComponent({
         }
       }
     };
-
+    /**
+     * 使用服务器端的配置
+     */
     const use_server_config = () => {
       value_h_point_amount.value = Number(Object.keys(config.multi_hor_density)[0])
       value_v_point_amount.value = Number(Object.keys(config.multi_ver_density)[0])
@@ -315,7 +475,9 @@ export default defineComponent({
       }
 
     }
-
+    /**
+     * 使用缓存的配置
+     */
     const use_set_cache = () => {
       if (set_cache.value[selectedprojector.value] != null) {
         let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
@@ -333,11 +495,16 @@ export default defineComponent({
       }
     }
 
-
+    /**
+     * 保存缓存配置
+     */
     const save_set_cache = () => {
       let tmp = { value_h: value_h.value, value_v: value_v.value, value_v_point_amount: value_v_point_amount.value, value_h_point_amount: value_h_point_amount.value, value_v_point: value_v_point.value, value_h_point: value_h_point.value }
       set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
     }
+    /**
+     * 是否开启辅助线 变量
+     */
     const auxiliary_line = ref(false)
     watch(
       () => configselsect,
@@ -367,25 +534,48 @@ export default defineComponent({
     );
 
 
-
+    /**
+     * 缓存 变量
+     */
     const set_cache: any = ref([]);
-    //值
+    /**
+     * 垂直点的值
+     */
     let value_h = ref(<DensityCorrection[]>[]);
+    /**
+     * 水平点的值
+     */
     let value_v = ref(<DensityCorrection[]>[]);
-    //位置
+    /**
+     * 水平点的位置
+     */
     let value_h_point = ref(<DensityCorrectionPoint[]>[]);
+    /**
+     * 垂直点的位置
+     */
     let value_v_point = ref(<DensityCorrectionPoint[]>[]);
     /**
-     * 当前选中的点的索引
+     * 当前选中 垂直的点的索引
      */
     const options_model_v = ref(0)
+    /**
+     * 当前选中 水平的点的索引
+     */
     const options_model_h = ref(0)
 
     const div = ref();
+    /**
+     * 用于限制分辨率最大值 会在渲染时 自动赋值
+     */
     const max = ref({ x: 0, y: 0 })
+    /**
+     * 点的大小
+     */
     const point = ref({ w: 20, h: 20 })
 
-
+      /**
+       * 监听垂直和水平界面切换
+       */
     watch(() => now_v_h, (newval, oldval) => {
       if (newval.value == 'level') {
         set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
@@ -397,34 +587,45 @@ export default defineComponent({
         set?.SetBlendingOption("blending_grids_select_point", `${options_model_v.value + 1}`)
       }
     }, { deep: true })
+    /**
+     * 监听垂直点 的数量
+     */
     watch(() => value_v_point_amount, (newval, oldval) => {
 
       setTimeout(() => {
         if (now_v_h.value != 'level') {
           set?.SetBlendingOption("blending_grids_select_ui", "ver_density")
           set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
-        options_model_v.value=0
+          options_model_v.value = 0
         }
 
         save_set_cache()
       }, 100);
     }, { deep: true })
+    /**
+     * 监听水平点的数量
+     */
     watch(() => value_h_point_amount, (newval, oldval) => {
 
       setTimeout(() => {
         if (now_v_h.value == 'level') {
           set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
           set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
-        options_model_h.value=0
+          options_model_h.value = 0
         }
         save_set_cache()
       }, 100);
 
     }, { deep: true })
-
+    /**
+     * 发送 select 选择的水平点数
+     */
     watch(() => options_model_h, (newval, oldval) => {
       set?.SetBlendingOption("blending_grids_select_point", `${value_h_point.value[newval.value].control_point}`)
     }, { deep: true })
+    /**
+     * 发送 select 选择的垂直点数
+     */
     watch(() => options_model_v, (newval, oldval) => {
       set?.SetBlendingOption("blending_grids_select_point", `${value_v_point.value[newval.value].control_point}`)
     }, { deep: true })
@@ -443,7 +644,12 @@ export default defineComponent({
       start_point(val, type)
       save_set_cache()
     }
-
+    /**
+     * 拖拽组件移动回调
+     * @param $event
+     * @param index
+     * @param type
+     */
     const dragStartHandle = ($event: any, index: number, type: string) => {
       let obj_x = $event.x
       let obj_y = $event.y
@@ -516,7 +722,11 @@ export default defineComponent({
       y = (max.value.y - y - point.value.h) * Proportion.value.y
       return { x, y }
     }
-
+    /**
+     * 给初始点赋值
+     * @param a
+     * @param type
+     */
     const start_point = (a: number, type: string) => {
       if (type == 'h' || type == 'all') {
         value_h.value = []
@@ -567,6 +777,9 @@ 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)
       options_value_h_point_amount.value = Object.keys(config.multi_hor_density)
@@ -596,7 +809,12 @@ export default defineComponent({
     onBeforeUnmount(() => {
       sessionStorage.DensityCorrection = JSON.stringify(set_cache.value);
     });
-
+    /**
+     * 重置单个点的数据
+     * @param index 索引
+     * @param send
+     * @param type
+     */
     const reset = (index: number, send: boolean, type: string) => {
       if (type == 'v') {
         value_v.value[index].x = value_v.value[index].def_x
@@ -610,6 +828,13 @@ export default defineComponent({
       }
       save_set_cache()
     }
+    /**
+     * 发送数据
+     * @param index
+     * @param type
+     * @param value
+     * @param send
+     */
     const send_value = (index: number, type: string, value: number, send: boolean = true) => {
       if (!send) return;
       let row = $store.getters.GetTheCurrentlySelectedCamera[0]
@@ -621,6 +846,9 @@ export default defineComponent({
         set?.SetBlendingHorDensity(row, col, Number(value_h_point_amount.value), index + 1, Number(value));
       }
     }
+    /**
+     * 重置 多点数据
+     */
     const resetall = () => {
       switch (now_v_h.value) {
         case 'vertical':
@@ -648,7 +876,7 @@ export default defineComponent({
     const resetall_all = () => {
       switch (now_v_h.value) {
         case 'vertical':
-          let tmp =value_v_point_amount.value
+          let tmp = value_v_point_amount.value
           for (let key in config.multi_ver_density) {
             for (let index = 0; index < config.multi_ver_density[key].length; index++) {
               config.multi_ver_density[key][index].x = config.multi_ver_density[key][index].def_x
@@ -661,7 +889,7 @@ export default defineComponent({
           send_value(-2, 'v', 0);
           break;
         case 'level':
-        let tmpp =value_h_point_amount.value
+          let tmpp = value_h_point_amount.value
           for (let key in config.multi_hor_density) {
             for (let index = 0; index < config.multi_hor_density[key].length; index++) {
               config.multi_hor_density[key][index].x = config.multi_hor_density[key][index].def_x
@@ -677,9 +905,17 @@ export default defineComponent({
           break;
       }
     }
+    /**
+     * 删除点 弹窗
+     */
     const del_dialog = ref(false)
+    /**
+     * 添加点
+     * @param amount
+     * @param type
+     */
     const add_control_points = (amount: number, type: string) => {
-      if (amount < 5) return
+      if (amount < 5||amount >=60) return
       let tmpconfig: any = null
       let row = $store.getters.GetTheCurrentlySelectedCamera[0]
       let col = $store.getters.GetTheCurrentlySelectedCamera[1]
@@ -807,7 +1043,11 @@ export default defineComponent({
       }
     }
 
-
+    /**
+     * 删除 点数配置
+     * @param amount
+     * @param type
+     */
     const reduce_control_points = (amount: number, type: string) => {
       if (amount <= 5) return
       let tmpconfig: any = null
@@ -982,7 +1222,7 @@ export default defineComponent({
     }
 
     /**
-     * v数据
+     * v数据 滚轮交互
      */
 
     const details_selsect_val = (details: any, type: string) => {
@@ -1007,10 +1247,13 @@ export default defineComponent({
       }
 
     }
-
+    /**
+     * 增加 垂直校正点数
+     * @param val 数量
+     */
     const preview_v = (val: number) => {
       val = Number(val)
-      if (val < 5) return
+      if (val < 5 ||val>=60) return
       let width = allconfig.projector_width / (val - 1)
       let height = allconfig.projector_height / (val - 1)
       value_v.value = []
@@ -1036,9 +1279,13 @@ export default defineComponent({
       value_v_point_amount.value = val
       options_model_v.value = 1
     }
+    /**
+     * 水平校正点的数量
+     * @param val 数量
+     */
     const preview_h = (val: number) => {
       val = Number(val)
-      if (val < 5) return
+      if (val < 5 ||val>=60) return
       let width = allconfig.projector_width / (val - 1)
       let height = allconfig.projector_height / (val - 1)
       value_h.value = []
@@ -1046,7 +1293,7 @@ export default defineComponent({
       for (let index = 0; index < val; index++) {
         let y = allconfig.projector_height - height * index
         let x = width * index
-          let tmp: DensityCorrectionPoint = { x, y, def_x: x, def_y: y, control_point:index + 1 };
+        let tmp: DensityCorrectionPoint = { x, y, def_x: x, def_y: y, control_point: index + 1 };
         value_h.value.push(tmp)
         let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
         let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
@@ -1068,10 +1315,12 @@ export default defineComponent({
     const value_point_amount_tmp_v = ref(0)
     const value_point_amount_tmp_h = 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 == '+') {
@@ -1090,8 +1339,25 @@ export default defineComponent({
           }
           // chang(options_model.value, 0, '')
         }, 15)
+      }, 1000);
+      if (type == 'x') {
+        if (fun == '+') {
+          value_h.value[options_model_h.value].x++
+        } else {
+          value_h.value[options_model_h.value].x--
+        }
+        chang(options_model_h.value, value_h.value[options_model_h.value].x, "h")
+      } else {
+        if (fun == '+') {
+          value_v.value[options_model_v.value].y++
+        } else {
+          value_v.value[options_model_v.value].y--
+        }
+        chang(options_model_v.value, value_v.value[options_model_v.value].y, "v")
+      }
     }
     const handlerTouchend = () => {
+      clearTimeout(loop_end)
       clearInterval(loop)
     }
     /**
@@ -1099,36 +1365,126 @@ export default defineComponent({
      */
     const keyDown = () => {
       document.onkeydown = (e) => {
-        let lock=0;
+        let lock = 0;
         let e1 = e || window.event || arguments.callee.caller.arguments[0]
         switch (e.code) {
           case "KeyW":
-          now_v_h.value == 'vertical'?value_v.value[options_model_v.value].y++:""
+            now_v_h.value == 'vertical' ? value_v.value[options_model_v.value].y++ : ""
             break;
           case "KeyA":
-          now_v_h.value == 'level'?value_h.value[options_model_h.value].x--:""
+            now_v_h.value == 'level' ? value_h.value[options_model_h.value].x-- : ""
             break;
           case "KeyS":
-          now_v_h.value == 'vertical'?value_v.value[options_model_v.value].y--:""
+            now_v_h.value == 'vertical' ? value_v.value[options_model_v.value].y-- : ""
             break;
           case "KeyD":
-          now_v_h.value == 'level'?value_h.value[options_model_h.value].x++:""
+            now_v_h.value == 'level' ? value_h.value[options_model_h.value].x++ : ""
             break;
           default:
-            lock=1
+            lock = 1
             break;
         }
-        if(lock==0){
+        if (lock == 0) {
-          now_v_h.value == 'level'?chang(options_model_h.value, value_h.value[options_model_h.value].x, 'h'):chang(options_model_v.value, value_v.value[options_model_v.value].y, 'v')
+          now_v_h.value == 'level' ? chang(options_model_h.value, value_h.value[options_model_h.value].x, 'h') : chang(options_model_v.value, value_v.value[options_model_v.value].y, 'v')
         }
       }
     }
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
+
+
+
+
+    /**
+     * 手写长按和的那几实现
+     */
+
+    let loop_start: NodeJS.Timeout
+    let loop_finish: NodeJS.Timeout
+    /**
+     * 平板弹出来的操作 函数
+     * @param fun 加法还是减法+ -
+     * @param type x or y
+     */
+    const mousedown = (fun: string, type: string) => {
+      loop_start = setTimeout(() => {
+        loop_finish = setInterval(() => {
+          switch (type) {
+            case 'x':
+              if (fun == '+') {
+                value_h.value[options_model_h.value].x++
+              } else {
+                value_h.value[options_model_h.value].x--
+              }
+              chang(options_model_h.value,value_h.value[options_model_h.value].x, 'h')
+
+              break;
+
+            default:
+              if (fun == '+') {
+                value_v.value[options_model_v.value].y++
+              } else {
+                value_v.value[options_model_v.value].y--
+              }
+              chang(options_model_v.value, value_v.value[options_model_v.value].y, "v")
+              break;
+          }
+
+        }, 30)
+      }, 1000);
+      switch (type) {
+            case 'x':
+              if (fun == '+') {
+                value_h.value[options_model_h.value].x++
+              } else {
+                value_h.value[options_model_h.value].x--
+              }
+              chang(options_model_h.value,value_h.value[options_model_h.value].x, 'h')
+              break;
+
+            default:
+              if (fun == '+') {
+                value_v.value[options_model_v.value].y++
+              } else {
+                value_v.value[options_model_v.value].y--
+              }
+              chang(options_model_v.value, value_v.value[options_model_v.value].y, "v")
+              break;
+          }
+    }
+
+    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({
       now_v_h,
       options_model_v,
       options_model_h
     });
     return {
+      mousedown,
+      mouseup,
+      input_x_focus,
+      input_y_focus,
+      ispad,
       config,
       value_point_amount_tmp_v,
       value_point_amount_tmp_h,

src/components/FusionSettings/FourPointCalibration.vue

@@ -17,14 +17,16 @@
     </div>
   </div>
   <div>
-    <div class="row">
+    <div class="row" v-show="ispad">
       <div class="col-1"></div>
       <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 filled type="number" class="q-pt-md" :dense="true"
+      <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 />
+          lazy-rules >
+        </q-input>
       </div>
       <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"
@@ -36,11 +38,59 @@
         <div><q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /></div>
       </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="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">
@@ -55,7 +105,7 @@
         </div>
       </q-card-section>
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn flat :label="$t('close')" color="primary" v-close-popup />
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang=false" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -73,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,
@@ -145,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") {
@@ -159,7 +229,9 @@ export default defineComponent({
         }
       }
     };
-
+    /**
+     * 使用服务器配置
+     */
     const use_server_config = () => {
       value.value = []
       value_point.value = []
@@ -179,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]);
@@ -188,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) => {
@@ -220,7 +298,9 @@ export default defineComponent({
     );
 
 
-
+    /**
+     * 缓存 变量
+     */
     const set_cache: any = ref([]);
     //值
     let value = ref(<DensityCorrection[]>[]);
@@ -230,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 })
@@ -247,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++) {
@@ -258,11 +350,18 @@ 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
@@ -287,7 +386,12 @@ export default defineComponent({
       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') {
@@ -495,9 +599,12 @@ export default defineComponent({
     }
     /**
      * 长按实现
+     * 单击实现
      */
     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=='+'){
@@ -515,8 +622,25 @@ export default defineComponent({
         }
         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)
     }
     /**
@@ -546,10 +670,90 @@ export default defineComponent({
         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,
@@ -569,7 +773,8 @@ export default defineComponent({
       ipad_chang,
       url,
       handlerTouchstart,
-      handlerTouchend
+      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' : ''"
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 0"
-                    @focus="group = 0" v-model="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"
+                    :bg-color="group == 0 ? 'cyan-1' : ''" @focus="group = 0" v-model.number="array[0].value"
-                    :rules="[
+                    :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>
@@ -33,15 +51,33 @@
                   <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' : ''"
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 1"
-                    @focus="group = 1" v-model="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"
+                    :bg-color="group == 1 ? 'cyan-1' : ''" @focus="group = 1" v-model.number="array[1].value"
-                    :rules="[
+                    :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>
@@ -51,18 +87,36 @@
                   <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' : ''"
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 2"
-                    @focus="group = 2" v-model="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"
+                    :bg-color="group == 2 ? 'cyan-1' : ''" @focus="group = 2" v-model.number="array[2].value"
-                    :rules="[
+                    :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" @update:model-value="()=>{}" /></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' : ''"
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 3"
-                    @focus="group = 3" v-model="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"
+                    :bg-color="group == 3 ? 'cyan-1' : ''" @focus="group = 3" v-model.number="array[3].value"
-                    :rules="[
+                    :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"
+          <q-slider v-model="array[group].alpha" v-show="!ispad" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01"
-            vertical reverse label-always />
+            color="green" vertical reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
+          <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')" v-model="array[group].alpha" lazy-rules :rules="[
+              @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
+          <q-slider v-model="array[group].p" v-show="!ispad" :min="0" @change="chang('p')" :max="16" :step="0.01"
-            reverse label-always />
+            color="green" vertical reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+          <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')" v-model="array[group].p" lazy-rules :rules="[
+              @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"
+          <q-slider v-model="array[group].gamma" v-show="!ispad" :min="0" @change="chang('gamma')" :max="16" :step="0.01"
-            vertical reverse label-always />
+            color="green" vertical reverse label-always />
           <div>
-            <q-input :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+            <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')" v-model="array[group].gamma" lazy-rules :rules="[
+              @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,33 +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">
+  <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="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="row">
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up"
-          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_left" @touchstart="handlerTouchstart('-')"  @touchend="handlerTouchend" /></div>
+              @touchstart="handlerTouchstart('+')" @touchend="handlerTouchend" /></div>
-          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_right" @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" v-close-popup />
+        <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>
@@ -192,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">
@@ -205,7 +391,7 @@ import {
   onBeforeUnmount,
   reactive,
   onMounted,
-toRefs,
+  toRefs,
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
@@ -217,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([
@@ -241,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':
@@ -257,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") {
@@ -274,18 +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[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) {
@@ -300,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") {
@@ -341,6 +563,9 @@ export default defineComponent({
       save_set_cache();
     };
     //左上右下
+    /**
+     * 初始化数据时 自动获取焦点 的判断
+     */
     const setnowindex = () => {
       let sum = 0;
       let indexx = 4;
@@ -384,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));
@@ -393,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));
@@ -412,16 +643,18 @@ export default defineComponent({
         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'
+      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
+        sessionStorage.FusionLocale_async = auto_sync.value
       });
 
     watch(
@@ -433,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();
@@ -449,13 +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){
+        if (auto_sync.value) {
-          left_right_auto_add(Number(newVal)%2==0?newVal:Number(newVal)+1);
+          // left_right_auto_add(Number(newVal)%2==0?newVal:Number(newVal)+1);
 
         }
-        Number(newVal)%2!=0?array[1].value=Number(array[1].value)+1:''
+        Number(newVal) % 2 != 0 ? array[1].value = Number(array[1].value) + 1 : ''
         save_set_cache();
       },
       { deep: true }
@@ -469,10 +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(Number(newVal)%2==0?newVal:Number(newVal)+1);
+        // 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:''
+        Number(newVal) % 2 != 0 ? array[2].value = Number(array[2].value) + 1 : ''
         save_set_cache();
       },
       { deep: true }
@@ -486,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();
       },
@@ -503,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();
       },
@@ -518,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 }
@@ -534,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 }
@@ -550,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();
       },
@@ -569,59 +802,68 @@ export default defineComponent({
     const changenablefusion = () => {
       $store.commit("setenablefusion", enablefusion.value);
     };
-    const left_right_auto_add = (difference: number) => {
+    /**
-      let tmpobjall = JSON.parse($store.state.fusion_configuration)
+     * 利用缓存手动同步
-      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0&&group.value==2) {
+     */
-        let tmp = set_cache.value[1] == null ? tmpobjall.projectors[1].params : JSON.parse(set_cache.value[1]);
+    // const left_right_auto_add = (difference: number) => {
-        let set_cache_tmp: any = []
+    //   let tmpobjall = JSON.parse($store.state.fusion_configuration)
-        if (tmp[1].hasOwnProperty("power")) {
+    //   if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0&&group.value==2) {
-          for (let index = 0; index < 4; index++) {
+    //     let tmp = set_cache.value[1] == null ? tmpobjall.projectors[1].params : JSON.parse(set_cache.value[1]);
-            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) }
+    //     let set_cache_tmp: any = []
-            set_cache_tmp.push(tmpobj)
+    //     if (tmp[1].hasOwnProperty("power")) {
-          }
+    //       for (let index = 0; index < 4; index++) {
-        } else {
+    //         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 = tmp
+    //         set_cache_tmp.push(tmpobj)
-        }
+    //       }
-        if (ste_status.value == 0) {
+    //     } else {
-          if (difference == -1) {
+    //       set_cache_tmp = tmp
-            set_cache_tmp[1].isshow = array[2].isshow
+    //     }
-          } else {
+    //     if (ste_status.value == 0) {
-            set_cache_tmp[1].value = difference
+    //       if (difference == -1) {
-          }
+    //         set_cache_tmp[1].isshow = array[2].isshow
-          set?.SetBlendingOverlap(0, 1, 0, set_cache_tmp[1].isshow, Number(set_cache_tmp[1].value));
+    //       } else {
-          set_cache.value[1] = JSON.stringify(set_cache_tmp);
+    //         set_cache_tmp[1].value = difference
-        }
+    //       }
-      }
+    //       set?.SetBlendingOverlap(0, 1, 0, set_cache_tmp[1].isshow, Number(set_cache_tmp[1].value));
-      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1&&group.value==1) {
+    //       set_cache.value[1] = JSON.stringify(set_cache_tmp);
+    //     }
+    //   }
+    //   if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1&&group.value==1) {
 
-        let tmp = set_cache.value[0] == null ? tmpobjall.projectors[0].params : JSON.parse(set_cache.value[0]);
+    //     let tmp = set_cache.value[0] == null ? tmpobjall.projectors[0].params : JSON.parse(set_cache.value[0]);
-        let set_cache_tmp: any = []
+    //     let set_cache_tmp: any = []
-        if (tmp[0].hasOwnProperty("power")) {
+    //     if (tmp[0].hasOwnProperty("power")) {
-          for (let index = 0; index < 4; index++) {
+    //       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) }
+    //         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)
+    //         set_cache_tmp.push(tmpobj)
-          }
+    //       }
-        } else {
+    //     } else {
-          set_cache_tmp = tmp
+    //       set_cache_tmp = tmp
-        }
+    //     }
-        if (ste_status.value == 0) {
+    //     if (ste_status.value == 0) {
-          //set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
+    //       //set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
 
-          if (difference == -1) {
+    //       if (difference == -1) {
-            set_cache_tmp[2].isshow = array[1].isshow
+    //         set_cache_tmp[2].isshow = array[1].isshow
-          } else {
+    //       } else {
-            set_cache_tmp[2].value = difference
+    //         set_cache_tmp[2].value = difference
-          }
+    //       }
-          set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow, Number(set_cache_tmp[2].value));
+    //       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);
+    //       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)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -630,28 +872,136 @@ export default defineComponent({
 
     /**
     * 长按实现
+    * 单击实现
     */
     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
+            array[group.value].value += 2
           } else {
-            array[group.value].value-=2
+            array[group.value].value -= 2
+          }
+        }, 30)
+      }, 100);
+      if (fun == '+') {
+        array[group.value].value += 2
+      } else {
+        array[group.value].value -= 2
       }
-      }, 15)
     }
     const handlerTouchend = () => {
       clearInterval(loop)
+      clearTimeout(loop_end)
     }
 
+    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 {
+            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;
+    }
+
+
+
+
+    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 {
+            array[index].value -= 2
+          }
+        }, 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,
@@ -662,7 +1012,10 @@ export default defineComponent({
       ipad_chang,
       url,
       handlerTouchstart,
-      handlerTouchend
+      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 col-sm-3"></div>
-            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]"
+            <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 col-sm-3"></div>
-            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]"
+            <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 col-sm-3"></div>
-            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[2]"
+            <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  col-sm-3"></div>
-            <div class="col-4 q-pt-sm">
+            <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 col-sm-3"></div>
-            <div class="col-4 q-pt-sm">
+            <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[1]" :rules="['anyColor']">
-                    <template v-slot:append>
-                      <q-icon name="colorize" class="cursor-pointer" @click="index = 1">
-                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                          <q-color v-model="color[1]" @change="submit" />
-                        </q-popup-proxy>
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </q-item-section>
-              </q-item>
-            </div>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row" style="min-height: 40px;">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm">
               <q-item>
                 <q-item-section avatar class="head_1">
                   {{ $t("center circle color") }}
@@ -132,6 +110,9 @@ export default defineComponent({
     let model = reactive([20, 40, 20]);
     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

@@ -16,8 +16,8 @@
       </div>
     </div>
   </div>
-  <div>
+  <div v-show="ispad">
-    <div class="row row q-md-py-xl">
+    <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')"
@@ -47,11 +47,13 @@
           :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" />
+          @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
+      <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'y')"><q-input v-if="value[options_model]"
-          type="number" class="q-pt-md" :dense="true" v-model="value[options_model].y"
+          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" />
+          @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="q-pt-md col-2">
         <q-btn color="white" @click="reset(options_model, true, 'h')" text-color="black" :label="$t('reset')" />
@@ -60,9 +62,60 @@
       <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>
+
+
   <q-dialog v-model="del_dialog">
     <q-card style="width: 500px; max-width: 80vw;">
       <q-card-section>
@@ -110,26 +163,33 @@
   <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="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 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"
-          <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>
+              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 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" v-close-popup />
+        <q-btn flat :label="$t('close')" color="primary" @click="ipad_chang = false" />
       </q-card-actions>
     </q-card>
   </q-dialog>
-
 </template>
 
 <style scoped>
@@ -144,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,
@@ -188,7 +258,7 @@ export default defineComponent({
     /**
      * 平板弹窗修改
      */
-     const ipad_chang=ref(false)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -202,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") {
@@ -220,7 +312,9 @@ export default defineComponent({
         }
       }
     };
-
+    /**
+     * 使用服务端获取的配置
+     */
     const use_server_config = () => {
       value_point_amount.value = Number(Object.keys(config.multi_curved_surface)[0])
       let a = value_point_amount.value
@@ -241,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]);
@@ -251,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 }
       set_cache.value[selectedprojector.value] = JSON.stringify(tmp);
     }
 
-
+    /**
+     * 监听投影机是否切换
+     */
     watch(
       () => configselsect,
       (newVal, oldVal) => {
@@ -287,7 +387,9 @@ export default defineComponent({
       { deep: true }
     );
 
-
+      /**
+       * 缓存 变量
+       */
     const set_cache: any = ref([]);
     //值
     let value = ref(<DensityCorrection[]>[]);
@@ -299,16 +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) => {
-      if(ste_status.value==0)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
+      options_model.value = 0
       save_set_cache()
     }, { deep: true })
 
@@ -321,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
@@ -336,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)
@@ -346,6 +470,9 @@ export default defineComponent({
 
       save_set_cache()
     }
+    /**
+     * 计算可供选择的点
+     */
     const options = computed(() => {
       let tmp = []
       for (let index = 0; index < value_point.value.length; index++) {
@@ -380,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 = []
@@ -401,7 +531,9 @@ export default defineComponent({
       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)
@@ -409,6 +541,9 @@ 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)
 
@@ -432,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
@@ -459,6 +610,9 @@ export default defineComponent({
       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++) {
@@ -481,6 +635,9 @@ export default defineComponent({
       start_point(Number(value_point_amount.value))
 
     }
+    /**
+     * 窗口改变大小时重新计算 比例
+     */
     const recalculate_coordinates = () => {
       try {
         Proportion.value.x = allconfig.projector_width / (div.value.offsetWidth - point.value.w)
@@ -499,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
@@ -546,9 +707,14 @@ 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
       if (amount <= 9) return
@@ -598,6 +764,7 @@ export default defineComponent({
           }
           value_point.value.push(tmp_point)
         }
+        ste_status.value = 0;
 
       });
       save_set_cache()
@@ -646,13 +813,18 @@ export default defineComponent({
           }
           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) return
+      if (val < 3||val>=13) return
       let width = allconfig.projector_width / (val - 1)
       let height = allconfig.projector_height / (val - 1)
       value.value = []
@@ -734,7 +906,9 @@ export default defineComponent({
     * 长按实现
     */
     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 == '+') {
@@ -751,9 +925,26 @@ export default defineComponent({
             }
           }
           chang(options_model.value, 0, '')
-      }, 15)
+        }, 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)
     }
     /**
@@ -761,7 +952,7 @@ export default defineComponent({
      */
     const keyDown = () => {
       document.onkeydown = (e) => {
-        let lock=0;
+        let lock = 0;
         let e1 = e || window.event || arguments.callee.caller.arguments[0]
         switch (e.code) {
           case "KeyW":
@@ -777,16 +968,101 @@ export default defineComponent({
             value.value[options_model.value].x++
             break;
           default:
-            lock=1
+            lock = 1
             break;
         }
-        if(lock==0)chang(options_model.value,"h", 'h')
+        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,

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,7 +31,7 @@
 
         <q-separator />
         <!-- height: 80vh -->
-        <q-card-section class="scroll" :style="{width: is_pad_style,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>
@@ -50,11 +53,16 @@
               <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"
+                    @update:model-value="(val) => { dialog(val, set_resolution, 'resolution') }" :dense="true" filled
-          :options="options_resolution" emit-value map-options /></div>
+                    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 " :label="$t('Change projector layout')"
+                <!-- <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
-          @update:model-value="(val) => { dialog(val,send_projectorlayout,'projector') }" :dense="true" filled v-model="now_select_projectorlayout"
+                    @filter="filterFn_projector" :label="$t('Change projector layout')"
-          :options="projectorlayout" emit-value map-options /></div>
+                    @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">
                 {{
@@ -91,9 +99,9 @@
           <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;select_configuration_name=''; 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');clear()" />
+            @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>
@@ -120,8 +128,8 @@
           </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('Cancel')" color="primary" @click="medium = false"/>
-          <q-btn flat :label="$t('save')" @click="saveconfig" color="primary" v-close-popup />
+          <q-btn flat :label="$t('save')" @click="saveconfig" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -147,8 +155,8 @@
           </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('Cancel')" color="primary" @click="select_configuration=false" />
-          <q-btn flat :label="$t('load')" @click="apply_the_selected_configuration" color="primary" v-close-popup />
+          <q-btn flat :label="$t('load')" @click="apply_the_selected_configuration" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -162,8 +170,8 @@
           {{ $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('Cancel')" color="primary" @click="del_dialog=false" />
-          <q-btn flat :label="$t('ok')" @click="dialog_del_scenes" color="primary" v-close-popup />
+          <q-btn flat :label="$t('ok')" @click="()=>{dialog_del_scenes();del_dialog=false}" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -175,11 +183,29 @@
           <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 }}
+          {{ 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" color="primary" v-close-popup />
+          <q-btn flat :label="$t('Cancel')" @click="()=>{re_match_data();confirm=false}" color="primary"  />
-          <q-btn flat :label="$t('ok')" @click="trigger_dialog" color="primary" v-close-popup />
+          <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>
@@ -206,7 +232,7 @@ import {
   computed,
   onMounted,
   onBeforeMount,
-provide,
+  provide,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar, copyToClipboard } from "quasar";
@@ -246,29 +272,60 @@ export default defineComponent({
     const showDialog = async () => {
       show_dialog.value = true;
     };
-    const is_pad_style=computed(()=>{
+    /**
-      let url=window.location.href
+     * 当前平板是否全屏
-      if(url.indexOf("pad")!=-1&&$t.locale.value=="en-US"){
+     */
+    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 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=[];
+      let tmp = [];
-      if(allconfig.resolution){
+      if (allconfig.resolution) {
         for (let index = 0; index < allconfig.resolution.length; index++) {
           tmp.push({
             label: `${allconfig.resolution[index].width}*${allconfig.resolution[index].height}`,
@@ -278,7 +335,10 @@ export default defineComponent({
       }
       return tmp
     })
-    const child :any = ref(null);
+    /**
+     * 子组件
+     */
+    const child: any = ref(null);
     /**
      * 开启网格时发送全部参数
      *
@@ -296,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'
           }
 
@@ -315,18 +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'){
+          if (child.value!.now_v_h == 'vertical') {
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`)
+            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{
+          } else {
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`)
+            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;
@@ -338,7 +398,7 @@ export default defineComponent({
     /**
      * 重置全部参数
      */
-    const tmp_options=ref("")
+    const tmp_options = ref("")
     const resetall = () => {
       set?.ResetBlendingConfig().then((res) => {
         let tmp = JSON.parse(res ? res.config : "");
@@ -348,7 +408,7 @@ export default defineComponent({
         config.value.row = tmp.row;
         $store.commit("setfusion_configuration", res?.config);
       });
-      if(options.value.length!=0){
+      if (options.value.length != 0) {
         tmp_options.value = options.value
       }
       options.value = ""
@@ -370,15 +430,35 @@ export default defineComponent({
       sessionStorage.removeItem("Debugging");
       sessionStorage.removeItem("FusionLocale_async");
     }
-
+    /**
+     * 从配置文件中获取的行和列
+     */
     const config = ref({ col: 0, row: 0 });
+    /**
+     * 是否开启融合
+     */
     const EnableBlending = ref(false);
     let optionsstr = ref();
     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() {
@@ -404,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 w = allconfig.resolution[index].width
-      let h =allconfig.resolution[index].height
+      let h = allconfig.resolution[index].height
-      set?.SetProjectorResolution(w,h).then((res)=>{
+      set?.SetProjectorResolution(w, h).then((res) => {
         $store.commit("setfusion_configuration", res?.config);
       })
       let tmp = options.value
@@ -467,7 +547,7 @@ export default defineComponent({
 
     const save = () => {
       medium.value = true
-      save_cover_name.value=''
+      save_cover_name.value = ''
       //读取场景
       get_scenes()
     };
@@ -483,11 +563,16 @@ 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);
@@ -497,7 +582,7 @@ export default defineComponent({
       } else {
         optionsstr.value = "FourPointCalibration";
       }
-      now_selsect_projector.value="0-0"
+      now_selsect_projector.value = "0-0"
     };
 
     /**
@@ -517,7 +602,7 @@ export default defineComponent({
       setTimeout(() => {
         set?.GetBlendingConfig("").then((res) => {
           let tmp = JSON.parse(res ? res.config : "");
-          config_projectors.value=tmp
+          config_projectors.value = tmp
           let local_options = [
             [disable_blending_params_id, disable_blending_params],
             [show_blending_grids_id, show_blending_grids]
@@ -530,6 +615,7 @@ 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;
@@ -537,45 +623,69 @@ export default defineComponent({
           $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[index].width==allconfig.projector_width&&allconfig.resolution[index].height==allconfig.projector_height){
+              if (allconfig.resolution[index].width == allconfig.projector_width && allconfig.resolution[index].height == allconfig.projector_height) {
-              now_resolution.value=index
+                now_resolution.value = index
 
               }
             }
-        }else{
+          } else {
-          allconfig = {resolution: [{width: tmp.projector_width,height: tmp.projector_height}]};
+            allconfig = { resolution: [{ width: tmp.projector_width, height: tmp.projector_height }] };
-          now_resolution.value=0
+            now_resolution.value = 0
           }
-
+          /**
-        projectorlayout.value=[]
+           * 计算当前可供选择的 投影机布局
-          for (let index = 0; index < tmp.max_projector_count; index++) {
+           */
-            for (let indexx = 0; indexx < tmp.max_projector_count; indexx++) {
+          projectorlayout.value = []
-              if(index*tmp.max_projector_count+indexx>tmp.max_projector_count){
+          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{
+              } else {
-                projectorlayout.value.push({ label: `${index+1}x${indexx+1}`, value: index*tmp.max_projector_count+indexx })
+                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])){
+            if (tmp.col == Number(arr[1]) && tmp.row == Number(arr[0])) {
-            now_select_projectorlayout.value=index
+              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'
@@ -590,16 +700,20 @@ export default defineComponent({
         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])){
+          if (tmp.projector_width == Number(arr[1]) && tmp.projector_height == Number(arr[0])) {
-              now_resolution.value=index
+            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])){
+          if (tmp.row == Number(arr[1]) && tmp.col == Number(arr[0])) {
-            now_select_projectorlayout.value=index
+            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
@@ -613,12 +727,20 @@ export default defineComponent({
       getconfig()
     }
     const plan_list_op = ref(plan_list)
+    /**
+     * 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
@@ -626,8 +748,11 @@ export default defineComponent({
 
     const saveconfig = () => {
       set?.SaveBlendingConfig(save_cover_name.value);
+      medium.value = false
     }
-
+    /**
+     * 是否开启debug页面
+     */
     const isdebug = computed(() => {
       try {
         return record_times.value > 2
@@ -636,34 +761,60 @@ export default defineComponent({
       }
 
     })
+    /**
+     * 需要删除的配置 名称
+     */
     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=''
+      name_to_be_deleted.value = ''
-      select_configuration_name.value=''
+      select_configuration_name.value = ''
-      save_cover_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);
+    provide("now_selsect_projector", now_selsect_projector);
-    let projectorlayout=ref([{label:'1x1',value:0},{label:'1x2',value:1}])
+    /**
-    const now_select_projectorlayout=ref(1)
+     * 可以供选择的布局 变量
-    const send_projectorlayout=(val:number) => {
+     */
+    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 => {
+      set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
-        let tmpp=JSON.parse(res!.config)
+        let tmpp = JSON.parse(res!.config)
         config.value.row = tmpp.row;
         config.value.col = tmpp.col;
         $q.loading.show({
@@ -672,8 +823,45 @@ export default defineComponent({
         $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])){
+          if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
-            now_select_projectorlayout.value=index
+            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
@@ -689,58 +877,146 @@ export default defineComponent({
     }
 
     const btn_options = computed(() => {
-      let tmp=[]
+      let tmp = []
-      tmp.push({label: $t.t('FourPointCalibration'), value: 'FourPointCalibration'})
+      tmp.push({ label: $t.t('FourPointCalibration'), value: 'FourPointCalibration' })
-      tmp.push({label: $t.t('SurfaceCorrection'),value: 'SurfaceCorrection',})
+      tmp.push({ label: $t.t('SurfaceCorrection'), value: 'SurfaceCorrection', })
-      if(now_select_projectorlayout.value!=0){
+      if (now_select_projectorlayout.value != 0) {
         tmp.push({ label: $t.t('FusionLocale'), value: 'FusionLocale' })
-      }else{
+      } else {
         optionsstr.value = "FourPointCalibration";
       }
-      tmp.push({label: $t.t('DensityCorrection'),value: 'DensityCorrection',})
+      tmp.push({ label: $t.t('DensityCorrection'), value: 'DensityCorrection', })
       tmp.push({ label: $t.t('GridSettings'), value: 'GridSettings' })
       return tmp
     })
     /**
      * 计算可以显示的投影机数量
      */
-    const projectors_that_can_display=computed(()=>{
+    const projectors_that_can_display = computed(() => {
       let allconfig = JSON.parse($store.state.fusion_configuration);
       let col = allconfig.projectors.length
-      return {col}
+      return { col }
     })
     /**
      * 弹窗
      * 浅拷贝
      */
-    const confirm=ref(false)
+    const confirm = ref(false)
-    let dialog_data:any={parameter:"",fun:"",type:""}
+    let dialog_data: any = { parameter: "", fun: "", type: "" }
-    const dialog=(parameter:any,fun:any,type:string)=>{
+    const dialog = (parameter: any, fun: any, type: string) => {
-      confirm.value=true
+      confirm.value = true
-      dialog_data.parameter=parameter
+      dialog_data.parameter = parameter
-      dialog_data.fun=fun
+      dialog_data.fun = fun
-      dialog_data.type=type
+      dialog_data.type = type
     }
-    const trigger_dialog=()=>{
+    const trigger_dialog = () => {
       dialog_data.fun(dialog_data.parameter)
     }
-    const re_match_data=()=>{
+
+
+
+
+    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])){
+        if (tmp.projector_width == Number(arr[0]) && tmp.projector_height == Number(arr[1])) {
-              now_resolution.value=index
+          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])){
+        if (tmp.row == Number(arr[0]) && tmp.col == Number(arr[1])) {
-            now_select_projectorlayout.value=index
+          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,
@@ -785,11 +1061,21 @@ export default defineComponent({
       now_resolution,
       set_resolution,
       send_projectorlayout,
+      send_projectorlayout2,
       now_select_projectorlayout,
       projectorlayout,
       btn_options,
       projectors_that_can_display,
-      is_pad_style
+      is_pad_style,
+      element,
+      element_full_screen,
+      ispad,
+      filterFn_projector,
+      show_projectorlayout,
+      confirm_projectorlayout,
+      dialog_data_projectorlayout,
+      dialog_projectorlayout,
+      trigger_dialog_projectorlayout
     };
   },
 });

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/WSProtocol.ts

@@ -3460,6 +3460,7 @@ export namespace Protocol {
       location: number,
       enable: boolean,
       width: number,
+      auto_sync:boolean,
       rpc_id = 0
     ) {
       super();
@@ -3472,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 {

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",
@@ -414,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",
@@ -506,5 +509,9 @@ export default {
     "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"
+    "fusion zone":"fusion zone",
+    "up":"up",
+    "left":"left",
+    "right":"right",
+    "down":"down"
 };

src/i18n/zh-CN/index.ts

@@ -489,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": "窗口大小调整",
@@ -682,7 +686,7 @@ export default {
   FourPointCalibration: "四点校正",
   SurfaceCorrection: "曲面校正",
   DensityCorrection: "疏密校正",
-  GridSettings: "网格设置",
+  GridSettings: "辅助设置",
   point: "点",
   reset: "重置",
   "upper fusion zone parameters": "上融合带参数",
@@ -772,5 +776,9 @@ export default {
   "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":"融合带"
+  "fusion zone":"融合带",
+  "up":"上",
+  "left":"左",
+  "right":"右",
+  "down":"下"
 };

src/pad/TopToolbar.vue

@@ -314,6 +314,10 @@ 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 : "");

src/pages/TopToolBar.vue

@@ -653,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) => {