修复用户输入input后点击加减号时变成字符串

# Conflicts:
#	src/components/ControlPanelDialog.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

@@ -102,7 +102,7 @@
 
         <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>
@@ -124,9 +124,22 @@
                           min="0"
                           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>
@@ -285,8 +298,8 @@
                   <div
                     style="
                       position: absolute;
-                      height: 20.7vw;
-                      width: 36.8vw;
+                      height: 18vw;
+                      width: 32vw;
                       text-align: center;
                     "
                     :class="$store.state.power_state ? 'wall' : ''"
@@ -308,8 +321,8 @@
                     v-if="$store.state.power_state"
                     style="
                       position: absolute;
-                      height: 20.7vw;
-                      width: 36.8vw;
+                      height: 18vw;
+                      width: 32vw;
                       overflow: hidden;
                     "
                     @click="canel_active()"
@@ -657,7 +670,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 +869,24 @@ export default defineComponent({
     const br = 0.6;
     const cr = 0.7;
     let test_monitor_list: Ref<test_monitor[]> = ref([
-      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(5, "06", bw, bh, br),
-      new test_monitor(6, "07", bw, bh, br),
-      new test_monitor(7, "08", bw, bh, br),
-      new test_monitor(8, "09", cw, ch, cr),
-      new test_monitor(9, "10", cw, ch, cr),
-      new test_monitor(10, "11", cw, ch, cr),
-      new test_monitor(11, "12", cw, ch, cr),
       // 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(5, "06", bw, bh, br),
+        new test_monitor(6, "07", bw, bh, br),
+        new test_monitor(7, "08", bw, bh, br),
+        new test_monitor(8, "09", cw, ch, cr),
+        new test_monitor(9, "10", cw, ch, cr),
+        new test_monitor(10, "11", cw, ch, cr),
+        new test_monitor(11, "12", cw, ch, cr),
+      ];
+    };
     interface show__Rect {
       width: number;
       height: number;
@@ -886,7 +903,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 +913,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 +921,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 +934,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,7 +956,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,
               });
@@ -1015,56 +1022,56 @@ export default defineComponent({
     const four_point = (item: test_monitor) => {
       const wall_dom = wall.value;
       let centerx: any, centery: any;
-      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;
-      const y1: number = centery;
-      if (item.angle != 0) {
-        const point_left_top = calculateCoordinates(
-          item.currentx,
-          item.currenty,
-          x1,
-          y1,
-          item
-        );
-        const point_left_bootom = calculateCoordinates(
-          item.currentx,
-          y2,
-          x1,
-          y1,
-          item
-        );
-        const point_right_top = calculateCoordinates(
-          x2,
-          item.currenty,
-          x1,
-          y1,
-          item
-        );
-        const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item);
-        const point_list = [
-          point_left_top,
-          point_left_bootom,
-          point_right_top,
-          point_right_bottom,
-        ];
-        return point_list;
-      } else {
-        const point_list = [
-          { x: item.currentx, y: item.currenty }, //左上
-          { x: x2, y: item.currenty }, //右上
-          { x: item.currentx, y: y2 }, //左下
-          { x: x2, y: y2 }, //右下
-        ];
-        return point_list;
+      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);
+        const x2: number = item.currentx + item.w;
+        const y2: number = item.currenty + item.h;
+        const x1: number = centerx;
+        const y1: number = centery;
+        if (item.angle != 0) {
+          const point_left_top = calculateCoordinates(
+            item.currentx,
+            item.currenty,
+            x1,
+            y1,
+            item
+          );
+          const point_left_bootom = calculateCoordinates(
+            item.currentx,
+            y2,
+            x1,
+            y1,
+            item
+          );
+          const point_right_top = calculateCoordinates(
+            x2,
+            item.currenty,
+            x1,
+            y1,
+            item
+          );
+          const point_right_bottom = calculateCoordinates(x2, y2, x1, y1, item);
+          const point_list = [
+            point_left_top,
+            point_left_bootom,
+            point_right_top,
+            point_right_bottom,
+          ];
+          return point_list;
+        } else {
+          const point_list = [
+            { x: item.currentx, y: item.currenty }, //左上
+            { x: x2, y: item.currenty }, //右上
+            { x: item.currentx, y: y2 }, //左下
+            { x: x2, y: y2 }, //右下
+          ];
+          return point_list;
+        }
       }
     };
     let offsetHeight = ref(0.0);
@@ -1090,8 +1097,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 minx = 0;
           point_list.forEach((element) => {
@@ -1164,8 +1171,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 +1198,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 +1263,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 +1292,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;
@@ -1343,32 +1359,24 @@ export default defineComponent({
     const refresh_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) => {
-      //   element.isHide = false;
-      //   element.isactive=false;
-      // });
-      // last_wall.value.forEach((element) => {
-      //   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);
+      test_monitor_list.value = JSON.parse(list_magic);
+      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 +1430,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) {
@@ -1476,6 +1484,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 +1495,12 @@ export default defineComponent({
           });
         });
       }
+      if (a.length == 0) {
+        test_monitor_list.value.forEach((ele) => {
+          ele.isHide = false;
+        });
+        test_monitor_wall.value = [];
+      }
     };
     const sub_x = () => {
       const wall_dom = wall.value;
@@ -1622,6 +1637,7 @@ export default defineComponent({
       }
       realtime_upload();
     };
+    let list_magic: any = [];
     EventBus.getInstance().on(
       EventNamesDefine.NotifyMessage,
       (notify: NotifyMessage) => {
@@ -1643,9 +1659,7 @@ export default defineComponent({
               ) as Protocol.SetApplicationConfigRequestEntity;
               if (temp.key == "magic_wall_config") {
                 const a = JSON.parse(temp.value).windows;
-                if (
-                  true
-                ) {
+                if (true) {
                   refresh_magic(a);
                 }
               }
@@ -1700,27 +1714,38 @@ 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=[]
-        last_wall.value=[]
+        old_sort_index = [];
+        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
           );
+          list_magic = (await client.getApplicationSettins())?.config
+            ?.magic_list;
+          if (list_magic) {
+            test_monitor_list.value = JSON.parse(list_magic);
+          }
           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 =
@@ -1749,12 +1774,10 @@ 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) {
+            }  else if (a && wall_dom) {
               a.forEach((element) => {
                 let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
                 extend(true, item, test_monitor_list.value[element.index]);
@@ -1778,6 +1801,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 +1810,7 @@ export default defineComponent({
                 old_sort_index.push(
                   test_monitor_list.value[element.index].uuid
                 );
-                test_monitor_list.value.forEach((ele) => {
-                  if (element.index == ele.id) {
-                    ele.isHide = true;
-                  }
-                });
+                test_monitor_list.value[element.index].isHide = true;
               });
               if (a.length == 1) {
                 current_index.value = 0;
@@ -1798,6 +1818,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 +1867,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 +1877,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 +1890,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,
                 });
@@ -2026,8 +2055,8 @@ export default defineComponent({
       },
       closeWindow(item: test_monitor, index: number) {
         current_index.value = -1;
-        item.cmw = Math.round(item.w / lcm.value);
-        item.cmh = Math.round(item.h / lcm.value);
+        // item.cmw = Math.round(item.w / 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])
         );
@@ -2036,44 +2065,40 @@ export default defineComponent({
         test_monitor_list.value[item.id].isHide = false;
         test_monitor_wall.value[index].isShow = false;
         multiple_select.value = [];
+        test_monitor_wall.value.splice(temp_index, 1);
         realtime_upload();
       },
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;
-        test_monitor_wall.value.forEach((ele) => {
-          ele.cmh = Math.round(ele.h / lcm.value);
-          ele.cmw = Math.round(ele.w / lcm.value);
-          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
-        });
+        // test_monitor_wall.value.forEach((ele) => {
+        //   ele.cmh = Math.round(ele.h / lcm.value);
+        //   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;
         });
-        test_monitor_wall.value.forEach((element, i) => {
-          if (index != i) {
-            element.isShow = false;
-          }
-        });
+        test_monitor_wall.value = [item];
         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) => {
-          ele.cmh = Math.round(ele.h / lcm.value);
-          ele.cmw = Math.round(ele.w / lcm.value);
-          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
-        });
+        // test_monitor_wall.value.forEach((ele) => {
+        //   ele.cmh = Math.round(ele.h / lcm.value);
+        //   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;
         });
-        test_monitor_wall.value.forEach((element) => {
-          element.isShow = false;
-        });
+        test_monitor_wall.value = [];
         multiple_select.value = [];
         realtime_upload();
       },
@@ -2116,7 +2141,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 +2171,7 @@ export default defineComponent({
             tep = true;
           }
         });
-        if(a==2){
+        if (a == 2) {
           realtime_upload();
         }
       },
@@ -2189,7 +2214,7 @@ export default defineComponent({
             tep_item.currenty = item.currenty;
           }
         });
-
+        multiple_select.value=[]
         realtime_upload();
       },
       alignBottom() {
@@ -2200,6 +2225,7 @@ export default defineComponent({
             tep_item.currenty = item.currenty + item.h - tep_item.h;
           }
         });
+        multiple_select.value=[]
         realtime_upload();
       },
       alignRight() {
@@ -2210,7 +2236,7 @@ export default defineComponent({
             tep_item.currentx = item.currentx + item.w - tep_item.w;
           }
         });
-
+        multiple_select.value=[]
         realtime_upload();
       },
       alignLeft() {
@@ -2221,6 +2247,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,11 +59,12 @@
         <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>
-            <div class="q-pt-md  col-5"> <q-btn color="white" @click="resetall_all" text-color="black"
+        <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>
 
@@ -68,53 +73,147 @@
         <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]"
-            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 @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  />
+        <div class="col-2 q-px-md" @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
+            @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>
+        <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>
       </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>
-            <div class="q-pt-md q-px-md col-5"> <q-btn color="white" @click="resetall_all" text-color="black"
+        <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 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]"
-            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 @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  />
+        <div class="col-2 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
+            @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>
+        <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 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) }"
+    <q-checkbox v-model="auxiliary_line" @update:model-value="(value, evt) => { send_auxiliary_line(value) }"
       :label="$t('auxiliary lines')" />
   </div>
 
@@ -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"
-              :label="$t('Please enter the points you need to add')" @update:model-value="(val: any) => {  }" />
+          <div v-if="now_v_h == 'vertical'" class="col-10"><q-input filled v-model="value_v_point_amount" min="3" disable
+              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) => {  }" />
+              :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="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'" text-color="black" icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x','+')"  @touchend="handlerTouchend"  /></div>
+        <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'"
+              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>
@@ -199,6 +318,14 @@
 }
 </style>
 
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+}
+</style>
+
 <script lang="ts">
 import {
   defineComponent,
@@ -240,7 +367,7 @@ export default defineComponent({
     /**
      * 平板弹窗修改
      */
-     const ipad_chang=ref(false)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -400,24 +527,24 @@ export default defineComponent({
     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
-      }
+        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
+        }
 
-      save_set_cache()
+        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
-      }
-      save_set_cache()
+          set?.SetBlendingOption("blending_grids_select_ui", "hor_density")
+          set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+          options_model_h.value = 0
+        }
+        save_set_cache()
       }, 100);
 
     }, { deep: true })
@@ -648,7 +775,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 +788,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
@@ -1017,20 +1144,20 @@ export default defineComponent({
       value_v_point.value = []
       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 };
-          value_v.value.push(tmp)
-          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
-          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
-          let tmp_point: DensityCorrectionPoint = {
-            control_point: tmp.control_point,
-            x: x_y.x,
-            y: x_y.y,
-            def_x: def_x_f.x,
-            def_y: def_x_f.y
-          }
-          value_v_point.value.push(tmp_point)
+        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 };
+        value_v.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
+        }
+        value_v_point.value.push(tmp_point)
 
       }
       value_v_point_amount.value = val
@@ -1043,92 +1170,190 @@ export default defineComponent({
       let height = allconfig.projector_height / (val - 1)
       value_h.value = []
       value_h_point.value = []
-        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 };
-          value_h.value.push(tmp)
-          let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
-          let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
-          let tmp_point: DensityCorrectionPoint = {
-            control_point: tmp.control_point,
-            x: x_y.x,
-            y: x_y.y,
-            def_x: def_x_f.x,
-            def_y: def_x_f.y
-          }
-          value_h_point.value.push(tmp_point)
+      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 };
+        value_h.value.push(tmp)
+        let x_y = coordinate_transformation_value_to_xy(tmp.x, tmp.y)
+        let def_x_f = coordinate_transformation_value_to_xy(tmp.def_x, tmp.def_y)
+        let tmp_point: DensityCorrectionPoint = {
+          control_point: tmp.control_point,
+          x: x_y.x,
+          y: x_y.y,
+          def_x: def_x_f.x,
+          def_y: def_x_f.y
         }
+        value_h_point.value.push(tmp_point)
+      }
       value_h_point_amount.value = val
       options_model_h.value = 1
     }
-  /**
-  * 在增加时 实现回退
-  */
+    /**
+    * 在增加时 实现回退
+    */
     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 = setInterval(() => {
-        if (type == 'x') {
-          if (fun == '+') {
-            value_h.value[options_model_h.value].x++
+      loop_end = setTimeout(() => {
+        loop = setInterval(() => {
+          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 {
-            value_h.value[options_model_h.value].x--
+            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")
           }
-          chang(options_model_h.value, value_h.value[options_model_h.value].x, "h")
+          // chang(options_model.value, 0, '')
+        }, 15)
+      }, 1000);
+      if (type == 'x') {
+        if (fun == '+') {
+          value_h.value[options_model_h.value].x++
         } 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")
+          value_h.value[options_model_h.value].x--
         }
-        // chang(options_model.value, 0, '')
-      }, 15)
+        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)
     }
     /**
      * 键盘监听
      */
-     const keyDown = () => {
+    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){
-          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')
+        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')
         }
       }
     }
+    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_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)
+    }
+
+
+    const input_x_focus=ref(false)
+    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"
-          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 />
+      <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event,'x')">
+         <q-input filled type="number" class="q-pt-md" :dense="true"
+          v-model="value[options_model].x" @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1"  @update:model-value="chang(options_model, $event, 'h')" label="x"
+          lazy-rules >
+        </q-input>
       </div>
       <div class="col-2 q-px-md"  @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>
+
+
+
+
+    <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,14 @@
 }
 </style>
 
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+}
+</style>
+
 <script lang="ts">
 import {
   defineComponent,
@@ -495,10 +553,13 @@ export default defineComponent({
     }
     /**
      * 长按实现
+     * 单击实现
      */
     let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
     const  handlerTouchstart=(type:string,fun:string)=>{
-      loop=setInterval(()=>{
+      loop_end =  setTimeout(() => {
+        loop=setInterval(()=>{
         if(type=='x'){
           if(fun=='+'){
             value.value[options_model.value].x++
@@ -515,8 +576,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 +624,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 +727,8 @@ export default defineComponent({
       ipad_chang,
       url,
       handlerTouchstart,
-      handlerTouchend
+      handlerTouchend,
+      ispad
     }
   }
 })

src/components/FusionSettings/FusionLocale.vue

@@ -8,18 +8,36 @@
             <div class="col-4 offset-4">
               <div class="row">
                 <div class="col-3">
-                  <q-toggle class="float-right"  v-model="array[0].isshow" label="" />
+                  <q-toggle class="float-right" v-model="array[0].isshow" label="" />
                 </div>
                 <div class="col-6">
-                  <q-input dense filled type="number" :autofocus="group == 0" :bg-color="group == 0 ? 'cyan-1' : ''"
-                    @focus="group = 0" v-model="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:'';group=0}" :readonly="url.indexOf('pad')!=-1"
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 0"
+                    :bg-color="group == 0 ? 'cyan-1' : ''" @focus="group = 0" v-model.number="array[0].value"
+                    :label="$t('upper fusion zone parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 0 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.height) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 0"
+                    :bg-color="group == 0 ? 'cyan-1' : ''" @focus="() => { group = 0; input_focus[0] = true }"
+                    v-model.number="array[0].value" :label="$t('upper fusion zone parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 0 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[0] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[0]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 0)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 0)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
@@ -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' : ''"
-                    @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"
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 1"
+                    :bg-color="group == 1 ? 'cyan-1' : ''" @focus="group = 1" v-model.number="array[1].value"
+                    :label="$t('Left fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 1 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.width) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 1"
+                    :bg-color="group == 1 ? 'cyan-1' : ''" @focus="() => { group = 1; input_focus[1] = true }"
+                    v-model.number="array[1].value" :label="$t('Left fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 1 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[1] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[1]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 1)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 1)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
@@ -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' : ''"
-                    @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"
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 2"
+                    :bg-color="group == 2 ? 'cyan-1' : ''" @focus="group = 2" v-model.number="array[2].value"
+                    :label="$t('Right fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 2 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.width) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 2"
+                    :bg-color="group == 2 ? 'cyan-1' : ''" @focus="() => { group = 2; input_focus[2] = true }"
+                    v-model.number="array[2].value" :label="$t('Right fusion Band Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 2 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[2] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.width) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[2]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="mousedown('+', 2)" @mouseup="mouseup" />
+                      <q-icon name="arrow_downward" @mousedown="mousedown('-', 2)" @mouseup="mouseup" />
+                    </template>
+                  </q-input>
                 </div>
                 <div class="col-3"><span>{{ $t('Whether to operate synchronously') }}</span><q-checkbox
-                    v-model="auto_sync" @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' : ''"
-                    @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"
-                    :rules="[
+                  <q-input v-show="ispad" dense filled type="number" :autofocus="group == 3"
+                    :bg-color="group == 3 ? 'cyan-1' : ''" @focus="group = 3" v-model.number="array[3].value"
+                    :label="$t('Lower fusion Zone Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 3 }"
+                    :readonly="url.indexOf('pad') != -1" :rules="[
                       (val) =>
                         (val !== null && val !== '') ||
                         $t('Please enter a number'),
                       (val) =>
                         (val >= 0 && val < config.height) || $t('Please enter 0-100'),
                     ]" />
+                  <q-input v-show="!ispad" dense filled type="number" :autofocus="group == 3"
+                    :bg-color="group == 3 ? 'cyan-1' : ''" @focus="() => { group = 3; input_focus[3] = true }"
+                    v-model.number="array[3].value" :label="$t('Lower fusion Zone Parameters')" lazy-rules
+                    @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : ''; group = 3 }"
+                    :readonly="url.indexOf('pad') != -1" @blur="input_focus[3] = false" :rules="[
+                      (val) =>
+                        (val !== null && val !== '') ||
+                        $t('Please enter a number'),
+                      (val) =>
+                        (val >= 0 && val < config.height) || $t('Please enter 0-100'),
+                    ]">
+                    <template v-if="input_focus[3]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="handlerTouchstart('+')" @mouseup="handlerTouchend" />
+                      <q-icon name="arrow_downward" @mousedown="handlerTouchstart('-')" @mouseup="handlerTouchend" />
+                    </template>
+                  </q-input>
                 </div>
               </div>
             </div>
@@ -91,20 +163,38 @@
         </div>
       </div>
     </div>
-    <div class="col-12" v-if="group != 4">
+    <div class="col-12" v-show="group != 4 || ispad">
       <p class="text-center" style="margin: 0 0 8;">{{ $t("Set Fusion Band Parameters") }}</p>
       <div style="display: flex; justify-content: space-evenly">
         <div>
-          <q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
-            vertical reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
-              @update:model-value="chang('alpha')" v-model="array[group].alpha" lazy-rules :rules="[
+          <q-slider v-model="array[group].alpha" v-show="!ispad" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01"
+            color="green" vertical reverse label-always />
+          <div> <q-input v-show="ispad" dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
+              @update:model-value="chang('alpha')"
+              @click="() => { now_apg = 'alpha'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].alpha" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
               ]" />
+               <q-input v-show="!ispad" dense filled hide-bottom-space type="number" max="1" min="0" step="0.1"
+              @update:model-value="chang('alpha')"
+              @click="() => { now_apg = 'alpha'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              @focus="input_focus_apg[0]=true" @blur="input_focus_apg[0]=false"
+              v-model.number="array[group].alpha" lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 1) || $t('Please enter a value within the range'),
+              ]" >
+              <template v-if="input_focus_apg[0]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                      <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+                    </template>
+                  </q-input>
             <p style="text-align: center;">Alpha</p>
             <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('alpha')" text-color="black"
               :label="$t('reset')" />
@@ -112,16 +202,32 @@
         </div>
 
         <div>
-          <q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green" vertical
-            reverse label-always />
-          <div> <q-input dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-              @update:model-value="chang('p')" v-model="array[group].p" lazy-rules :rules="[
+          <q-slider v-model="array[group].p" v-show="!ispad" :min="0" @change="chang('p')" :max="16" :step="0.01"
+            color="green" vertical reverse label-always />
+          <div> <q-input v-show="ispad" dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('p')" @click="() => { now_apg = 'p'; ispad ? ipad_chang_input = true : '' }"
+              :readonly="ispad" v-model.number="array[group].p" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
               ]" />
+               <q-input v-show="!ispad" dense filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+               @focus="input_focus_apg[1]=true" @blur="input_focus_apg[1]=false"
+              @update:model-value="chang('p')" @click="() => { now_apg = 'p'; ispad ? ipad_chang_input = true : '' }"
+              :readonly="ispad" v-model.number="array[group].p" lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
+              ]" >
+              <template v-if="input_focus_apg[1]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                      <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+                    </template>
+                  </q-input>
             <p style="text-align: center;">Power</p>
             <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('p')" text-color="black"
               :label="$t('reset')" />
@@ -129,17 +235,35 @@
         </div>
 
         <div>
-          <q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green"
-            vertical reverse label-always />
+          <q-slider v-model="array[group].gamma" v-show="!ispad" :min="0" @change="chang('gamma')" :max="16" :step="0.01"
+            color="green" vertical reverse label-always />
           <div>
-            <q-input :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
-              @update:model-value="chang('gamma')" v-model="array[group].gamma" lazy-rules :rules="[
+            <q-input v-show="ispad" :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('gamma')"
+              @click="() => { now_apg = 'gamma'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].gamma" lazy-rules :rules="[
                 (val) =>
                   (val !== null && val !== '') ||
                   $t('Please enter a number'),
                 (val) =>
                   (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
               ]" />
+              <q-input v-show="!ispad" :dense="true" filled hide-bottom-space type="number" max="16" min="0" step="0.1"
+              @update:model-value="chang('gamma')"
+              @focus="input_focus_apg[2]=true" @blur="input_focus_apg[2]=false"
+              @click="() => { now_apg = 'gamma'; ispad ? ipad_chang_input = true : '' }" :readonly="ispad"
+              v-model.number="array[group].gamma" lazy-rules :rules="[
+                (val) =>
+                  (val !== null && val !== '') ||
+                  $t('Please enter a number'),
+                (val) =>
+                  (val >= 0 && val <= 16) || $t('Please enter a value within the range'),
+              ]" >
+              <template v-if="input_focus_apg[2]" v-slot:append>
+                      <q-icon name="arrow_upward" @mousedown="handlerTouchstart_apg('+')" @mouseup="handlerTouchend_apg" />
+                      <q-icon name="arrow_downward" @mousedown="handlerTouchstart_apg('-')" @mouseup="handlerTouchend_apg" />
+                    </template>
+                  </q-input>
             <p style="text-align: center;">Gamma</p>
             <q-btn style="margin-top: 0.5rem;" color="white" @click="reset('gamma')" text-color="black"
               :label="$t('reset')" />
@@ -147,33 +271,86 @@
         </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">
-          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_left" @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 class="row  q-pb-md" >
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_up"
+              @touchstart="handlerTouchstart('+')" @touchend="handlerTouchend" /></div>
+        </div>
+        <div class="row  q-pt-md" >
+          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_down" @touchstart="handlerTouchstart('-')" @touchend="handlerTouchend" /></div>
         </div>
-
       </q-card-section>
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn flat :label="$t('close')" color="primary" 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>
 
+      </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>
@@ -194,6 +371,14 @@ p {
 }
 </style>
 
+<style>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+</style>
+
 <script lang="ts">
 import {
   defineComponent,
@@ -205,7 +390,7 @@ import {
   onBeforeUnmount,
   reactive,
   onMounted,
-toRefs,
+  toRefs,
 } from "vue";
 import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
@@ -217,7 +402,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 +426,11 @@ export default defineComponent({
         $store.getters.GetTheCurrentlySelectedCamera[1]
       );
     });
+    const color = ref("#ffffff");
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
     const reset = (type: string) => {
       switch (type) {
         case 'gamma':
@@ -285,26 +475,30 @@ export default defineComponent({
     watch(
       () => configselsect,
       (newVal, oldVal) => {
-        let tmp = JSON.parse($store.state.fusion_configuration);
-        let fortmp = null;
-        let i;
-        for (i of tmp.projectors) {
-          if (
-            i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
-            i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
-          ) {
-            fortmp = JSON.parse(JSON.stringify(i));
+        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) {
+            if (
+              i.col === $store.getters.GetTheCurrentlySelectedCamera[1] &&
+              i.row === $store.getters.GetTheCurrentlySelectedCamera[0]
+            ) {
+              fortmp = JSON.parse(JSON.stringify(i));
+            }
           }
-        }
-        ste_status.value = 1;
+          ste_status.value = 1;
+
+          config = JSON.parse(JSON.stringify(fortmp));
+          use_server_config();
+          // use_set_cache();
+          setTimeout(() => {
+            ste_status.value = 0;
+          }, 100);
+          setnowindex();
+        });
 
-        config = JSON.parse(JSON.stringify(fortmp));
-        use_server_config();
-        use_set_cache();
-        setTimeout(() => {
-          ste_status.value = 0;
-        }, 100);
-        setnowindex();
       },
       { deep: true }
     );
@@ -393,7 +587,7 @@ 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();
@@ -412,16 +606,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);
+          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 +629,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 +645,13 @@ export default defineComponent({
             $store.getters.GetTheCurrentlySelectedCamera[1],
             0,
             array[1].isshow,
-            Number(array[1].value)
+            Number(array[1].value), auto_sync.value
           );
-        if (auto_sync.value){
-          left_right_auto_add(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[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 +665,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);
-        Number(newVal)%2!=0?array[2].value=Number(array[2].value)+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 : ''
         save_set_cache();
       },
       { deep: true }
@@ -486,7 +682,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 +699,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 +714,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 +730,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 +746,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 +765,65 @@ 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]);
-        let set_cache_tmp: any = []
-        if (tmp[1].hasOwnProperty("power")) {
-          for (let index = 0; index < 4; index++) {
-            let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
-            set_cache_tmp.push(tmpobj)
-          }
-        } else {
-          set_cache_tmp = tmp
-        }
-        if (ste_status.value == 0) {
-          if (difference == -1) {
-            set_cache_tmp[1].isshow = array[2].isshow
-          } else {
-            set_cache_tmp[1].value = difference
-          }
-          set?.SetBlendingOverlap(0, 1, 0, set_cache_tmp[1].isshow, Number(set_cache_tmp[1].value));
-          set_cache.value[1] = JSON.stringify(set_cache_tmp);
-        }
-      }
-      if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1&&group.value==1) {
+    // const left_right_auto_add = (difference: number) => {
+    //   let tmpobjall = JSON.parse($store.state.fusion_configuration)
+    //   if ($store.getters.GetTheCurrentlySelectedCamera[1] == 0&&group.value==2) {
+    //     let tmp = set_cache.value[1] == null ? tmpobjall.projectors[1].params : JSON.parse(set_cache.value[1]);
+    //     let set_cache_tmp: any = []
+    //     if (tmp[1].hasOwnProperty("power")) {
+    //       for (let index = 0; index < 4; index++) {
+    //         let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
+    //         set_cache_tmp.push(tmpobj)
+    //       }
+    //     } else {
+    //       set_cache_tmp = tmp
+    //     }
+    //     if (ste_status.value == 0) {
+    //       if (difference == -1) {
+    //         set_cache_tmp[1].isshow = array[2].isshow
+    //       } else {
+    //         set_cache_tmp[1].value = difference
+    //       }
+    //       set?.SetBlendingOverlap(0, 1, 0, set_cache_tmp[1].isshow, Number(set_cache_tmp[1].value));
+    //       set_cache.value[1] = JSON.stringify(set_cache_tmp);
+    //     }
+    //   }
+    //   if ($store.getters.GetTheCurrentlySelectedCamera[1] == 1&&group.value==1) {
 
-        let tmp = set_cache.value[0] == null ? tmpobjall.projectors[0].params : JSON.parse(set_cache.value[0]);
-        let set_cache_tmp: any = []
-        if (tmp[0].hasOwnProperty("power")) {
-          for (let index = 0; index < 4; index++) {
-            let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
-            set_cache_tmp.push(tmpobj)
-          }
-        } else {
-          set_cache_tmp = tmp
-        }
-        if (ste_status.value == 0) {
-          //set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
+    //     let tmp = set_cache.value[0] == null ? tmpobjall.projectors[0].params : JSON.parse(set_cache.value[0]);
+    //     let set_cache_tmp: any = []
+    //     if (tmp[0].hasOwnProperty("power")) {
+    //       for (let index = 0; index < 4; index++) {
+    //         let tmpobj = { alpha: Number(tmp[arr[index]].alpha.toFixed(2)), p: Number(tmp[arr[index]].power.toFixed(2)), gamma: Number(tmp[arr[index]].gamma.toFixed(2)), isshow: tmp[arr[index]].enable, value: Number(tmp[arr[index]].size) }
+    //         set_cache_tmp.push(tmpobj)
+    //       }
+    //     } else {
+    //       set_cache_tmp = tmp
+    //     }
+    //     if (ste_status.value == 0) {
+    //       //set_cache_tmp[2].value = Number(set_cache_tmp[2].value) + difference
 
-          if (difference == -1) {
-            set_cache_tmp[2].isshow = array[1].isshow
-          } else {
-            set_cache_tmp[2].value = difference
-          }
-          set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow, Number(set_cache_tmp[2].value));
-          set_cache.value[0] = JSON.stringify(set_cache_tmp);
-        }
-      }
-    }
+    //       if (difference == -1) {
+    //         set_cache_tmp[2].isshow = array[1].isshow
+    //       } else {
+    //         set_cache_tmp[2].value = difference
+    //       }
+    //       set?.SetBlendingOverlap(0, 0, 2, set_cache_tmp[2].isshow, Number(set_cache_tmp[2].value));
+    //       set_cache.value[0] = JSON.stringify(set_cache_tmp);
+    //     }
+    //   }
+    // }
+
+
+    // watch(()=>auto_sync,()=>{
+    //   console.log(auto_sync.value)
+    //   set?.SetBlendingOption("fusion_with_automatic_sync", auto_sync.value?'1':'0');
+    // },{deep:true})
 
     /**
      * 平板弹窗修改
      */
-     const ipad_chang=ref(false)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -630,22 +832,128 @@ export default defineComponent({
 
     /**
     * 长按实现
+    * 单击实现
     */
     let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
     const handlerTouchstart = (fun: string) => {
-      loop = setInterval(() => {
+      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
           }
-      }, 15)
+        }, 30)
+      }, 100);
+      if (fun == '+') {
+        array[group.value].value += 2
+      } else {
+        array[group.value].value -= 2
+      }
     }
     const handlerTouchend = () => {
       clearInterval(loop)
+      clearTimeout(loop_end)
     }
 
+    const submit = () => {
+      set?.SetBlendingOption("blending_grids_background_color", color.value);
+    }
+    /**
+* 处理平板模式下 伽马校正操作
+*/
+    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)
+          }
+        }, 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)
+      }
+    }
+    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
+    }, {
+      label: $t.t('down'),
+      value: 4
+    }]
+
+
     return {
+      options,
+      input_focus_apg,
+      input_focus,
+      mousedown,
+      mouseup,
+      now_apg,
+      handlerTouchstart_apg,
+      handlerTouchend_apg,
+      ipad_chang_input,
       send_auxiliary_line,
       group,
       array,
@@ -662,7 +970,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 q-pt-sm"><q-select outlined v-model="model[0]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm"><q-select outlined v-model="model[0]"
                 @update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
                 :label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
               v-model="RowsColumns[0]" />
@@ -13,8 +13,8 @@
         </div>
         <div class="col-12">
           <div class="row">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm"><q-select outlined v-model="model[1]"
                 @update:model-value="update_row_col(1, model[1])" :options="options" :dense="true" :options-dense="true"
                 :label="$t('wall col')" /> </div><q-checkbox @update:model-value="send_off(1)"
               v-model="RowsColumns[1]" />
@@ -22,16 +22,16 @@
         </div>
         <div class="col-12">
           <div class="row">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm"><q-select outlined v-model="model[2]"
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm"><q-select outlined v-model="model[2]"
                 @update:model-value="update_row_col(2, model[2])" :options="line_width_options" :dense="true" :options-dense="true"
                 :label="$t('line width')" /> </div>
           </div>
         </div>
         <div class="col-12">
           <div class="row" style="min-height: 40px;">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm">
+            <div class="col-4  col-sm-3"></div>
+            <div class="col-4  col-sm-6 q-pt-sm">
               <q-item>
                 <q-item-section avatar class="head_1">
                   {{ $t("line color") }}
@@ -51,33 +51,11 @@
             </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row" style="min-height: 40px;">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm">
-              <q-item>
-                <q-item-section avatar class="head_1">
-                  {{ $t("background color") }}
-                </q-item-section>
-                <q-item-section>
-                  <q-input v-model="color[1]" :rules="['anyColor']">
-                    <template v-slot:append>
-                      <q-icon name="colorize" class="cursor-pointer" @click="index = 1">
-                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                          <q-color v-model="color[1]" @change="submit" />
-                        </q-popup-proxy>
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </q-item-section>
-              </q-item>
-            </div>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row" style="min-height: 40px;">
-            <div class="col-4"></div>
-            <div class="col-4 q-pt-sm">
+            <div class="col-4 col-sm-3"></div>
+            <div class="col-4 col-sm-6 q-pt-sm">
               <q-item>
                 <q-item-section avatar class="head_1">
                   {{ $t("center circle color") }}

src/components/FusionSettings/SurfaceCorrection.vue

@@ -16,8 +16,8 @@
       </div>
     </div>
   </div>
-  <div>
-    <div class="row row q-md-py-xl">
+  <div v-show="ispad">
+    <div class="row  q-md-py-xl">
       <div class="col-1"></div>
       <div class="col-2 q-px-md">
         <div class="col-2"> <q-select class="q-pt-md" :label="$t('point amount')"
@@ -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
-          type="number" class="q-pt-md" :dense="true" v-model="value[options_model].y"
-          @update:model-value="chang(options_model, $event, 'h')" label="y" lazy-rules @click="()=>{url.indexOf('pad')!=-1?ipad_chang=true:''}" :readonly="url.indexOf('pad')!=-1" />
+      <div class="col-2 q-px-md" @mousewheel="details_selsect_val($event, 'y')"><q-input v-if="value[options_model]"
+          filled type="number" class="q-pt-md" :dense="true" v-model="value[options_model].y"
+          @update:model-value="chang(options_model, $event, 'h')" label="y" lazy-rules
+          @click="() => { url.indexOf('pad') != -1 ? ipad_chang = true : '' }" :readonly="url.indexOf('pad') != -1" />
       </div>
       <div class="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" icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x','+')"  @touchend="handlerTouchend"  /></div>
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_left" @touchstart="handlerTouchstart('x', '-')" @touchend="handlerTouchend" /></div>
+          <div class="col-6" style="text-align: center;"><q-btn color="white" text-color="black"
+              icon="keyboard_arrow_right" @touchstart="handlerTouchstart('x', '+')" @touchend="handlerTouchend" /></div>
         </div>
         <div class="row">
-          <div class="col-12" style="text-align: center;"><q-btn color="white" text-color="black" icon="keyboard_arrow_down" @touchstart="handlerTouchstart('y','-')"  @touchend="handlerTouchend" /></div>
+          <div 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,14 @@
 }
 </style>
 
+<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 +256,7 @@ export default defineComponent({
     /**
      * 平板弹窗修改
      */
-     const ipad_chang=ref(false)
+    const ipad_chang = ref(false)
     /**
      * 当前url路径
      */
@@ -307,9 +375,9 @@ export default defineComponent({
     }, { deep: true })
 
     watch(() => value_point_amount, (newval, oldval) => {
-      if(ste_status.value==0)set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
-      options_model.value=0
-        save_set_cache()
+      if (ste_status.value == 0) set?.SetBlendingOption("blending_grids_control_point_count", `${newval.value}`)
+      options_model.value = 0
+      save_set_cache()
     }, { deep: true })
 
     /**
@@ -734,59 +802,155 @@ export default defineComponent({
     * 长按实现
     */
     let loop: NodeJS.Timeout
+    let loop_end: NodeJS.Timeout
     const handlerTouchstart = (type: string, fun: string) => {
-      loop = setInterval(() => {
-        if (type == 'x') {
-          if (fun == '+') {
-            value.value[options_model.value].x++
-          } else {
-            value.value[options_model.value].x--
-          }
+      loop_end = setTimeout(() => {
+        loop = setInterval(() => {
+          if (type == 'x') {
+            if (fun == '+') {
+              value.value[options_model.value].x++
+            } else {
+              value.value[options_model.value].x--
+            }
 
-        } else {
-          if (fun == '+') {
-            value.value[options_model.value].y++
           } else {
-            value.value[options_model.value].y--
+            if (fun == '+') {
+              value.value[options_model.value].y++
+            } else {
+              value.value[options_model.value].y--
+            }
           }
-        }
-        chang(options_model.value, 0, '')
-      }, 15)
+          chang(options_model.value, 0, '')
+        }, 30)
+      }, 1000);
+      if (type == 'x') {
+            if (fun == '+') {
+              value.value[options_model.value].x++
+            } else {
+              value.value[options_model.value].x--
+            }
+
+          } else {
+            if (fun == '+') {
+              value.value[options_model.value].y++
+            } else {
+              value.value[options_model.value].y--
+            }
+          }
+          chang(options_model.value, 0, '')
     }
     const handlerTouchend = () => {
+      clearTimeout(loop_end)
       clearInterval(loop)
     }
     /**
      * 键盘监听
      */
-     const keyDown = () => {
+    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":
             value.value[options_model.value].y++
             break;
           case "KeyA":
-          value.value[options_model.value].x--
+            value.value[options_model.value].x--
             break;
           case "KeyS":
-          value.value[options_model.value].y--
+            value.value[options_model.value].y--
             break;
           case "KeyD":
-          value.value[options_model.value].x++
+            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)
+    }
+
+
+    const input_x_focus=ref(false)
+    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>
@@ -49,19 +52,24 @@
               <hr>
               <div>
 
-              <div class="col-3 q-px-md "> <q-select class="q-pt-md overflow-hidden" :label="$t('change resolution')"
-          @update:model-value="(val) => { dialog(val,set_resolution,'resolution') }" :dense="true" filled v-model="now_resolution"
-          :options="options_resolution" emit-value map-options /></div>
-          <div class="col-3 q-px-md"> <q-select class="q-pt-md " :label="$t('Change projector layout')"
-          @update:model-value="(val) => { dialog(val,send_projectorlayout,'projector') }" :dense="true" filled v-model="now_select_projectorlayout"
-          :options="projectorlayout" emit-value map-options /></div>
-            </div>
-            <div class="col-12" style="text-align: center">
+                <div class="col-3 q-px-md "> <q-select class="q-pt-md overflow-hidden" :label="$t('change resolution')"
+                    @update:model-value="(val) => { dialog(val, set_resolution, 'resolution') }" :dense="true" filled
+                    v-model="now_resolution" :options="options_resolution" emit-value map-options /></div>
+                <!-- <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
+                    @filter="filterFn_projector" :label="$t('Change projector layout')"
+                    @update:model-value="(val) => { dialog(val, send_projectorlayout, 'projector') }" :dense="true" filled
+                    v-model="now_select_projectorlayout" :options="show_projectorlayout" emit-value map-options /></div> -->
+                    <div class="col-3 q-px-md"> <q-select class="q-pt-md " use-input hide-selected fill-input
+                    @filter="filterFn_projector2" :label="$t('Change projector layout')"
+                    @update:model-value="(val) => { dialog_projectorlayout(val, send_projectorlayout2) }" :dense="true" filled
+                    v-model="now_select_projectorlayout_tmp" :options="show_projectorlayout2" emit-value  /></div>
+              </div>
+              <div class="col-12" style="text-align: center">
                 {{
                   $t("Enable projection mode")
                 }}<q-checkbox v-model="EnableBlending" />
               </div>
-          </div>
+            </div>
             <div class="col-10">
               <div class="q-ta-md">
                 <q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary"
@@ -80,20 +88,20 @@
         <q-separator />
 
         <q-card-actions align="right">
-          <span>{{ $t("disable blending params") }}</span>
+          <!-- <span>{{ $t("disable blending params") }}</span>
           <q-checkbox style="justify-content: flex-start" v-model="disable_blending_params"
             @click="send_disable_blending_params" />
           <span>{{ $t("show blending grids") }}</span>
           <q-checkbox style="justify-content: flex-start" v-model="show_blending_grids"
-            @click="send_show_blending_grids" />
+            @click="send_show_blending_grids" /> -->
           <div class="q-space" data-v-39efcd1f=""></div>
           <div class="q-space" data-v-39efcd1f=""></div>
           <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall config')" />
           <div class="q-space" data-v-39efcd1f=""></div>
           <q-btn flat :label="$t('Select saved configuration')" no-caps color="primary"
-            @click="select_configuration = true;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('save')" @click="saveconfig" color="primary" v-close-popup />
+          <q-btn flat :label="$t('Cancel')" color="primary" @click="medium = false"/>
+          <q-btn flat :label="$t('save')" @click="saveconfig" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -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('load')" @click="apply_the_selected_configuration" color="primary" v-close-popup />
+          <q-btn flat :label="$t('Cancel')" color="primary" @click="select_configuration=false" />
+          <q-btn flat :label="$t('load')" @click="apply_the_selected_configuration" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -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('ok')" @click="dialog_del_scenes" color="primary" v-close-popup />
+          <q-btn flat :label="$t('Cancel')" color="primary" @click="del_dialog=false" />
+          <q-btn flat :label="$t('ok')" @click="()=>{dialog_del_scenes();del_dialog=false}" color="primary"  />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -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('ok')" @click="trigger_dialog" 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();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.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,99 +272,106 @@ 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);
+    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=[];
-      if(allconfig.resolution){
-      for (let index = 0; index < allconfig.resolution.length; index++) {
-        tmp.push({
-          label: `${allconfig.resolution[index].width}*${allconfig.resolution[index].height}`,
-          value: index,
-        })
+      let tmp = [];
+      if (allconfig.resolution) {
+        for (let index = 0; index < allconfig.resolution.length; index++) {
+          tmp.push({
+            label: `${allconfig.resolution[index].width}*${allconfig.resolution[index].height}`,
+            value: index,
+          })
+        }
       }
-    }
       return tmp
     })
-    const child :any = ref(null);
+    const child: any = ref(null);
     /**
      * 开启网格时发送全部参数
      *
      */
     const send_show_blending_grids = () => {
       let tmp = ""
-        switch (optionsstr.value) {
-          case 'FusionLocale':
-            tmp = '0'
-            break;
-          case 'FourPointCalibration':
-            tmp = '4'
-            break;
-          case 'SurfaceCorrection':
-            tmp = '9'
-            break;
-          case 'DensityCorrection':
-            if(child.value!.now_v_h=='vertical'){
-              tmp = 'ver_density'
-            }else{
-              tmp = 'hor_density'
-            }
+      switch (optionsstr.value) {
+        case 'FusionLocale':
+          tmp = '0'
+          break;
+        case 'FourPointCalibration':
+          tmp = '4'
+          break;
+        case 'SurfaceCorrection':
+          tmp = '9'
+          break;
+        case 'DensityCorrection':
+          if (child.value!.now_v_h == 'vertical') {
+            tmp = 'ver_density'
+          } else {
+            tmp = 'hor_density'
+          }
 
-            break;
-          default:
-            break;
-        }
+          break;
+        default:
+          break;
+      }
       set?.SetBlendingOption("blending_grids_select_ui", tmp)
       set?.SetBlendingOption('blending_grids_select_projector', now_selsect_projector.value);
       set?.SetBlendingOption(show_blending_grids_id.value, show_blending_grids.value ? "1" : "0");
 
       switch (optionsstr.value) {
-          case 'FusionLocale':
+        case 'FusionLocale':
 
-            break;
-          case 'FourPointCalibration':
-          set?.SetBlendingOption("blending_grids_select_point", `4:${child.value!.options_model+1}`)
-            break;
-          case 'SurfaceCorrection':
-          set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model+1}`)
+          break;
+        case 'FourPointCalibration':
+          set?.SetBlendingOption("blending_grids_select_point", `4:${child.value!.options_model + 1}`)
+          break;
+        case 'SurfaceCorrection':
+          set?.SetBlendingOption("blending_grids_select_point", `9:${child.value!.options_model + 1}`)
           set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
-            break;
-          case 'DensityCorrection':
-            if(child.value!.now_v_h=='vertical'){
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v+1}`)
-              set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_v_point_amount}`)
-            }else{
-              set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h+1}`)
-              set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_h_point_amount}`)
-            }
-            break;
-          default:
-            break;
-        }
+          break;
+        case 'DensityCorrection':
+          if (child.value!.now_v_h == 'vertical') {
+            set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_v + 1}`)
+            set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_v_point_amount}`)
+          } else {
+            set?.SetBlendingOption("blending_grids_select_point", `${child.value!.options_model_h + 1}`)
+            set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_h_point_amount}`)
+          }
+          break;
+        default:
+          break;
+      }
 
     };
     /**
      * 重置全部参数
      */
-    const tmp_options=ref("")
+    const tmp_options = ref("")
     const resetall = () => {
       set?.ResetBlendingConfig().then((res) => {
         let tmp = JSON.parse(res ? res.config : "");
@@ -348,7 +381,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 = ""
@@ -378,7 +411,7 @@ export default defineComponent({
     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 +437,13 @@ export default defineComponent({
      * 设置分辨率
      * @param index 索引号
      */
-    const set_resolution=(index:number)=>{
+    const set_resolution = (index: number) => {
       $q.loading.show({
-          message: 'Loading please wait'
-        })
-      let w =allconfig.resolution[index].width
-      let h =allconfig.resolution[index].height
-      set?.SetProjectorResolution(w,h).then((res)=>{
+        message: 'Loading please wait'
+      })
+      let w = allconfig.resolution[index].width
+      let h = allconfig.resolution[index].height
+      set?.SetProjectorResolution(w, h).then((res) => {
         $store.commit("setfusion_configuration", res?.config);
       })
       let tmp = options.value
@@ -445,7 +478,7 @@ export default defineComponent({
             /**
              * 延迟发送不然获取不到值
              */
-             set?.SetBlendingOption("blending_grids_select_ui", tmp)
+            set?.SetBlendingOption("blending_grids_select_ui", tmp)
             setTimeout(() => {
               set?.SetBlendingOption("blending_grids_control_point_count", `${child.value!.value_point_amount}`)
               set?.SetBlendingOption("blending_grids_select_point", `${child.value!.value_point_amount}:1`)
@@ -459,7 +492,7 @@ export default defineComponent({
           default:
             break;
         }
-		// if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
+        // if (tmp.length) set?.SetBlendingOption("blending_grids_select_ui", tmp)
       },
       { deep: true })
 
@@ -467,7 +500,7 @@ export default defineComponent({
 
     const save = () => {
       medium.value = true
-      save_cover_name.value=''
+      save_cover_name.value = ''
       //读取场景
       get_scenes()
     };
@@ -485,9 +518,11 @@ export default defineComponent({
     };
     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 +532,7 @@ export default defineComponent({
       } else {
         optionsstr.value = "FourPointCalibration";
       }
-      now_selsect_projector.value="0-0"
+      now_selsect_projector.value = "0-0"
     };
 
     /**
@@ -517,7 +552,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 +565,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,49 +573,58 @@ export default defineComponent({
           $store.commit("setfusion_configuration", res?.config);
           optionsstr.value = "FourPointCalibration";
           allconfig = JSON.parse($store.state.fusion_configuration);
-          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){
-              now_resolution.value=index
+          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) {
+                now_resolution.value = index
 
+              }
             }
+          } else {
+            allconfig = { resolution: [{ width: tmp.projector_width, height: tmp.projector_height }] };
+            now_resolution.value = 0
           }
-        }else{
-          allconfig = {resolution: [{width: tmp.projector_width,height: tmp.projector_height}]};
-          now_resolution.value=0
-        }
 
-        projectorlayout.value=[]
-          for (let index = 0; index < tmp.max_projector_count; index++) {
-            for (let indexx = 0; indexx < tmp.max_projector_count; indexx++) {
-              if(index*tmp.max_projector_count+indexx>tmp.max_projector_count){
+          projectorlayout.value = []
+          let cont = 0
+          for (let index = 1; index <= tmp.max_projector_count; index++) {
+            for (let indexx = 1; indexx <= tmp.max_projector_count; indexx++) {
+              if (index * indexx > tmp.max_projector_count) {
                 continue
-              }else{
-                projectorlayout.value.push({ label: `${index+1}x${indexx+1}`, value: index*tmp.max_projector_count+indexx })
+              } else {
+                projectorlayout.value.push({ label: `${index}x${indexx}`, value: cont })
+                cont++
+                projectorlayout_tmp.value.push(`${index}x${indexx}`)
               }
             }
           }
 
-        for (let index = 0; index < projectorlayout.value.length; index++) {
-          let arr = projectorlayout.value[index].label.split('x');
-          if(tmp.col==Number(arr[1])&&tmp.row==Number(arr[0])){
-            now_select_projectorlayout.value=index
+          for (let index = 0; index < projectorlayout.value.length; index++) {
+            let arr = projectorlayout.value[index].label.split('x');
+            if (tmp.col == Number(arr[1]) && tmp.row == Number(arr[0])) {
+              now_select_projectorlayout.value = index
+            }
+            if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
           }
-        }
         });
         get_scenes()
         set?.SetBlendingOption("blending_grids_select_ui", "blending")
-
+        // show_blending_grids.value=true
+        // send_show_blending_grids()
       }, 1000);
+      // console.log("已经挂载 ")
     });
+
     const save_cover_name = ref("")
     const plan_list = [
       ''
     ]
     const apply_the_selected_configuration = () => {
       $q.loading.show({
-          message: 'Loading please wait'
-        })
+        message: 'Loading please wait'
+      })
       set?.ApplyBlendingScene(select_configuration_name.value).then((res) => {
         let tmp = JSON.parse(res ? res.config : "{}");
         EnableBlending.value = tmp.enable;
@@ -588,18 +633,22 @@ export default defineComponent({
         config.value.row = tmp.row;
         $store.commit("setfusion_configuration", res?.config);
         allconfig = tmp
-          for (let index = 0; index < options_resolution.value.length; index++) {
-            let arr = options_resolution.value[index].label.split('*');
-            if(tmp.projector_width==Number(arr[1])&&tmp.projector_height==Number(arr[0])){
-              now_resolution.value=index
-            }
-          }
-        for (let index = 0; index < projectorlayout.value.length; index++) {
-          let arr = projectorlayout.value[index].label.split('x');
-          if(tmp.row==Number(arr[1])&&tmp.col==Number(arr[0])){
-            now_select_projectorlayout.value=index
+        for (let index = 0; index < options_resolution.value.length; index++) {
+          let arr = options_resolution.value[index].label.split('*');
+          if (tmp.projector_width == Number(arr[1]) && tmp.projector_height == Number(arr[0])) {
+            now_resolution.value = index
           }
         }
+        for (let index = 0; index < projectorlayout.value.length; index++) {
+          let arr = projectorlayout.value[index].label.split('x');
+          if (tmp.row == Number(arr[1]) && tmp.col == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+        }
+        select_configuration.value=false
       });
 
       let tmp = options.value
@@ -626,6 +675,7 @@ export default defineComponent({
 
     const saveconfig = () => {
       set?.SaveBlendingConfig(save_cover_name.value);
+      medium.value = false
     }
 
     const isdebug = computed(() => {
@@ -644,103 +694,207 @@ export default defineComponent({
     const dialog_del_scenes = () => {
       set?.DeleteBlendingScene(name_to_be_deleted.value);
       plan_list.splice(plan_list.findIndex(item => item === name_to_be_deleted.value), 1)
-      name_to_be_deleted.value=''
-      select_configuration_name.value=''
-      save_cover_name.value=''
+      name_to_be_deleted.value = ''
+      select_configuration_name.value = ''
+      save_cover_name.value = ''
     }
-    const now_selsect_projector=ref("0-0")
+    const now_selsect_projector = ref("0-0")
     const currently_selected_projector = (value: string) => {
       set?.SetBlendingOption('blending_grids_select_projector', value);
-      now_selsect_projector.value=value
+      now_selsect_projector.value = value
 
     }
     /**
      * 依赖注入
      */
-    provide("now_selsect_projector",now_selsect_projector);
-    let projectorlayout=ref([{label:'1x1',value:0},{label:'1x2',value:1}])
-    const now_select_projectorlayout=ref(1)
-    const send_projectorlayout=(val:number) => {
+    provide("now_selsect_projector", now_selsect_projector);
+    let projectorlayout = ref([{ label: '1x1', value: 0 }, { label: '1x2', value: 1 }])
+    let projectorlayout_tmp = ref(<string[]>[])
+    const now_select_projectorlayout = ref(0)
+    const now_select_projectorlayout_tmp = ref("")
+    const send_projectorlayout = (val: number) => {
       let arr = projectorlayout.value[val].label.split('x');
-      set?.SetProjectorLayout(Number(arr[0]),Number(arr[1])).then(res => {
-        let tmpp=JSON.parse(res!.config)
+      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++) {
+        $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.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
           }
         }
-      let tmp = options.value
-      options.value = ""
-      $store.commit("setSelectedProjector", "0/0");
-      setTimeout(() => {
-        clear_sessionStorage()
-        options.value = tmp
-        $q.loading.hide()
-      }, 800);
-      getconfig()
+        let tmp = options.value
+        options.value = ""
+        $store.commit("setSelectedProjector", "0/0");
+        setTimeout(() => {
+          clear_sessionStorage()
+          options.value = tmp
+          $q.loading.hide()
+        }, 800);
+        getconfig()
+      })
+    }
+
+    const send_projectorlayout2 = (val: string) => {
+      let arr = val.split('x');
+      set?.SetProjectorLayout(Number(arr[0]), Number(arr[1])).then(res => {
+        let tmpp = JSON.parse(res!.config)
+        config.value.row = tmpp.row;
+        config.value.col = tmpp.col;
+        $q.loading.show({
+          message: 'Loading please wait'
+        })
+        $store.commit("setfusion_configuration", res?.config);
+        for (let index = 0; index < projectorlayout.value.length; index++) {
+          let arr = projectorlayout.value[index].label.split('x');
+          if (tmpp.col == Number(arr[1]) && tmpp.row == Number(arr[0])) {
+            now_select_projectorlayout.value = index
+          }
+          if(`${tmpp.row}x${tmpp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+        }
+        let tmp = options.value
+        options.value = ""
+        $store.commit("setSelectedProjector", "0/0");
+        setTimeout(() => {
+          clear_sessionStorage()
+          options.value = tmp
+          $q.loading.hide()
+        }, 800);
+        getconfig()
       })
     }
 
     const btn_options = computed(() => {
-      let tmp=[]
-      tmp.push({label: $t.t('FourPointCalibration'), value: 'FourPointCalibration'})
-      tmp.push({label: $t.t('SurfaceCorrection'),value: 'SurfaceCorrection',})
-      if(now_select_projectorlayout.value!=0){
+      let tmp = []
+      tmp.push({ label: $t.t('FourPointCalibration'), value: 'FourPointCalibration' })
+      tmp.push({ label: $t.t('SurfaceCorrection'), value: 'SurfaceCorrection', })
+      if (now_select_projectorlayout.value != 0) {
         tmp.push({ label: $t.t('FusionLocale'), value: 'FusionLocale' })
-      }else{
+      } 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)
-    let dialog_data:any={parameter:"",fun:"",type:""}
-    const dialog=(parameter:any,fun:any,type:string)=>{
-      confirm.value=true
-      dialog_data.parameter=parameter
-      dialog_data.fun=fun
-      dialog_data.type=type
+    const confirm = ref(false)
+    let dialog_data: any = { parameter: "", fun: "", type: "" }
+    const dialog = (parameter: any, fun: any, type: string) => {
+      confirm.value = true
+      dialog_data.parameter = parameter
+      dialog_data.fun = fun
+      dialog_data.type = type
     }
-    const trigger_dialog=()=>{
+    const trigger_dialog = () => {
       dialog_data.fun(dialog_data.parameter)
     }
-    const re_match_data=()=>{
-      let tmp = JSON.parse($store.state.fusion_configuration);
-          for (let index = 0; index < options_resolution.value.length; index++) {
-            let arr = options_resolution.value[index].label.split('*');
-            if(tmp.projector_width==Number(arr[0])&&tmp.projector_height==Number(arr[1])){
-              now_resolution.value=index
-            }
-          }
-        for (let index = 0; index < projectorlayout.value.length; index++) {
-          let arr = projectorlayout.value[index].label.split('x');
 
-          if(tmp.row==Number(arr[0])&&tmp.col==Number(arr[1])){
-            now_select_projectorlayout.value=index
-          }
-        }
+
+
+
+    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)
+    }
+
+
+
+
+
+
+
+
+
+    const re_match_data = () => {
+      let tmp = JSON.parse($store.state.fusion_configuration);
+      for (let index = 0; index < options_resolution.value.length; index++) {
+        let arr = options_resolution.value[index].label.split('*');
+        if (tmp.projector_width == Number(arr[0]) && tmp.projector_height == Number(arr[1])) {
+          now_resolution.value = index
+        }
+      }
+      for (let index = 0; index < projectorlayout.value.length; index++) {
+        let arr = projectorlayout.value[index].label.split('x');
+
+        if (tmp.row == Number(arr[0]) && tmp.col == Number(arr[1])) {
+          now_select_projectorlayout.value = index
+        }
+        if(`${tmp.row}x${tmp.col}`==projectorlayout_tmp.value[index]){
+            now_select_projectorlayout_tmp.value=projectorlayout_tmp.value[index]
+          }
+      }
+    }
+    const element: any = ref()
+    const element_full_screen = () => {
+      let elem = document.getElementById("element")
+      if (!document.fullscreenElement) {
+        elem!.requestFullscreen().catch((err) => {
+
+        });
+        is_pad_screen.value = true
+      } else {
+        document.exitFullscreen();
+        is_pad_screen.value = false
+      }
+
+    }
+    const ispad = computed(() => {
+      let url = window.location.href;
+      return url.indexOf("pad") != -1
+    })
+    interface projectorlayoutarray {
+      label: string; value: number;
+    }
+    const show_projectorlayout = ref(<projectorlayoutarray[]>[])
+    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[]>[])
+    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 +939,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

@@ -1,48 +1,49 @@
-import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
-export default class ApplicationConfigEntity {
-  user_name: string = "admin";
-  password: string = "";
-  auto_ip_address: string = "";
-  ip_address: string = "";
-  gateway: string = "";
-  mac_address: string = "";
-  subnet_mask: string = "";
-  dns1 = "";
-  dns2 = "";
-  ip_list: AdvancedIpAddressEntity[] = [];
-  use_ntp: string = "";
-  ntp_server: string = "";
-  ntp_sync_delay: string = "";
-  time_zone: number = 21;
-  wall_row: number = 1;
-  wall_col: number = 1;
-  tcp_port: string = "";
-  udp_port: string = "";
-  websocket_port: string = "";
-  httpserver_port: string = "";
-  root_fs_upload_path: string = "";
-  media_upload_dir: string = "";
-  power_on_plan: string = "";
-  graphics_brightness: number = 100;
-  graphics_contrast: number = 100;
-  graphics_hue: number = 100;
-  device_rotate: number = 0;
-  system_volume: number = 100;
-  system_muted: number = 0;
-  output_audio_card: string = "";
-  application_data_dir: string = "";
-  runtime_os: string = "";
-  registered: boolean = false;
-  hdmi_in_decode_type_1: string | undefined;
-  hdmi_in_audio_device_1: string | undefined;
-  hw_version: string | undefined;
-  device_hdmi_output_count = 1;
-  video_suffix_filter: string | null = "";
-  image_suffix_filter: string | null = "";
-  special_video_layout_rotation: string | undefined = "0";
-  device_hdmi_rotation: number = 0;
-  cloud_server_address = "";
-  cloud_server_verify_key = "";
-  cloud_server_use_wss = "0";
-  cloud_server_enable = "0";
-}
+import { AdvancedIpAddressEntity } from "./AdvancedIpAddressEntity";
+export default class ApplicationConfigEntity {
+  user_name: string = "admin";
+  password: string = "";
+  auto_ip_address: string = "";
+  ip_address: string = "";
+  gateway: string = "";
+  mac_address: string = "";
+  subnet_mask: string = "";
+  dns1 = "";
+  dns2 = "";
+  ip_list: AdvancedIpAddressEntity[] = [];
+  use_ntp: string = "";
+  ntp_server: string = "";
+  ntp_sync_delay: string = "";
+  time_zone: number = 21;
+  wall_row: number = 1;
+  wall_col: number = 1;
+  tcp_port: string = "";
+  udp_port: string = "";
+  websocket_port: string = "";
+  httpserver_port: string = "";
+  root_fs_upload_path: string = "";
+  media_upload_dir: string = "";
+  power_on_plan: string = "";
+  graphics_brightness: number = 100;
+  graphics_contrast: number = 100;
+  graphics_hue: number = 100;
+  device_rotate: number = 0;
+  system_volume: number = 100;
+  system_muted: number = 0;
+  output_audio_card: string = "";
+  application_data_dir: string = "";
+  runtime_os: string = "";
+  registered: boolean = false;
+  hdmi_in_decode_type_1: string | undefined;
+  hdmi_in_audio_device_1: string | undefined;
+  hw_version: string | undefined;
+  device_hdmi_output_count = 1;
+  video_suffix_filter: string | null = "";
+  image_suffix_filter: string | null = "";
+  special_video_layout_rotation: string | undefined = "0";
+  device_hdmi_rotation: number = 0;
+  cloud_server_address = "";
+  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 : "");
@@ -326,6 +330,7 @@ export default defineComponent({
       plan_running,
       window_rect_edit_dialog,
       power_flag,
+      getconfig,
 
       toogleFullScreen() {
         if (!$q.fullscreen.isCapable) {

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) => {