魔墙：添加栅格图按钮

src/common/ClientConnection.ts

@@ -1252,7 +1252,6 @@ export default class ClientConnection {
       console.error(e);
     }
   }
-
   public async setMagicWallConfig(config: MagicWallConfig) {
     try {
       return await this.doRpc<Protocol.RpcSetMagicWallConfigResponseEntity>(
@@ -1262,7 +1261,26 @@ export default class ClientConnection {
       console.error(e);
     }
   }
+//
+  public async getMagicWallGridState() {
+    try {
+      return await this.doRpc<Protocol.RpcGetMagicWallGridStateResponseEntity>(
+        new Protocol.RpcGetMagicWallGridStateRequestEntity()
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
 
+  public async setMagicWallGridState(show_grid:boolean) {
+    try {
+      return await this.doRpc<Protocol.RpcSetMagicWallGridStateResponseEntity>(
+        new Protocol.RpcSetMagicWallGridStateRequestEntity(show_grid)
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  }
   public async testA(
     x: number,
     y: number,

src/components/ControlPanelDialog.vue

@@ -58,7 +58,7 @@
           alignRight();
         }
         //保存魔墙配置
-        if (evt.keyCode==83&&evt.shiftKey) {
+        if (evt.keyCode == 83 && evt.shiftKey) {
           //右
           export_magic_wall();
         }
@@ -568,6 +568,11 @@
             color="primary"
             @click="export_magic_wall"
           />
+          <q-toggle
+            v-model="magic_switch"
+            @update:model-value="upload_magic_switch()"
+            :label="$t('raster graph')"
+          />
           <q-space />
           <q-btn
             :loading="loading"
@@ -650,6 +655,8 @@ import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize
 import MagicWallConfig from "src/entities/MagicWallConfig";
 import { PointF } from "src/entities/RectF";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { Protocol } from "src/entities/WSProtocol";
+import { NotifyMessage } from "src/common/ClientConnection";
 
 export class test_monitor {
   uuid = "";
@@ -751,7 +758,7 @@ export default defineComponent({
     let $t = useI18n();
     let lcm = ref(0);
     let show_dialog = ref(false);
-    let magic_isbutton=ref(false)
+    let magic_isbutton = ref(false);
     let loading = ref(false);
     let wall: Ref<HTMLElement | null> = ref(null);
     let current_index = ref(-1);
@@ -773,6 +780,7 @@ export default defineComponent({
     const cw = 255.5;
     const ch = 144;
     const model = ref(null);
+    let magic_switch = ref(false);
     const options = ref([
       {
         id: "55",
@@ -836,13 +844,7 @@ export default defineComponent({
       top: number;
       angle: number;
     }
-    let showMonitor = reactive({
+
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      active: false,
-    });
     const filter_px = (val: number) => {
       return Math.round(val);
     };
@@ -897,9 +899,9 @@ export default defineComponent({
       if (client) {
         const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
         if (setMagic?.success) {
-        let monitorList:any=[]
+          let monitorList: any = [];
           test_monitor_wall.value.forEach((element, index) => {
-              if (element.isShow&&wall_dom) {
+            if (element.isShow && wall_dom) {
               monitorList.push({
                 id: element.id,
                 currentx: element.currentx / wall_dom.offsetWidth,
@@ -907,21 +909,18 @@ export default defineComponent({
                 h: element.h / wall_dom.offsetHeight,
                 w: element.w / wall_dom.offsetWidth,
                 angle: parseInt(element.angle.toString()),
-                  centerx: element.centerx/ wall_dom.offsetWidth,
+                centerx: element.centerx / wall_dom.offsetWidth,
                 centery: element.centery / wall_dom.offsetHeight,
               });
             }
           });
           $store.commit("setShowMonitorList", monitorList);
         }
-        if(!setMagic?.success){
+        if (!setMagic?.success) {
           $q.notify({
             color: "negative",
             icon: "warning",
-            message:
+            message: $t.t("update magic wall") + $t.t("fail") + "!",
-              $t.t("update magic wall") +
-              $t.t("fail") +
-              "!",
             position: "top",
             timeout: 2500,
           });
@@ -1001,13 +1000,13 @@ export default defineComponent({
           point_right_bottom,
         ];
         return point_list;
-      }else{
+      } else {
-        const point_list =[
+        const point_list = [
-          {x:item.currentx,y:item.currenty},//左上
+          { x: item.currentx, y: item.currenty }, //左上
-          {x:x2,y:item.currenty},//右上
+          { x: x2, y: item.currenty }, //右上
-          {x:item.currentx,y:y2},//左下
+          { x: item.currentx, y: y2 }, //左下
-          {x:x2,y:y2}//右下
+          { x: x2, y: y2 }, //右下
-        ]
+        ];
         return point_list;
       }
     };
@@ -1283,7 +1282,26 @@ export default defineComponent({
         });
       }
     });
+    EventBus.getInstance().on(
+      EventNamesDefine.NotifyMessage,
+      (notify: NotifyMessage) => {
+        try {
+          switch (notify.packet.command) {
+            case Protocol.Commands.kRpcSetMagicWallGridState:
+              let temp = JSON.parse(
+                notify.data
+              ) as Protocol.MagicWallGridStateNotifyEntity;
+              if (temp) {
+                magic_switch.value = temp.grid_showing;
+              }
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    );
     return {
+      magic_switch,
       magic_isbutton,
       refresh_all,
       getpx,
@@ -1325,6 +1343,7 @@ export default defineComponent({
       },
       async showDialog() {
         show_dialog.value = true;
+        magic_switch.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
         if (client) {
           const settings = await GlobalData.getInstance()
@@ -1332,6 +1351,9 @@ export default defineComponent({
             ?.getOutputBoardSetting();
           const response = await client.getMagicWallConfig();
           const wall_dom = wall.value;
+          const SetMagicWallGridState = await client.setMagicWallGridState(
+            magic_switch.value
+          );
           if (wall_dom) {
             offsetHeight.value = wall_dom.offsetHeight;
             offsetWidth.value = wall_dom.offsetWidth;
@@ -1450,6 +1472,7 @@ export default defineComponent({
             }
           });
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+
           if (setMagic?.success) {
             let monitorList: any = [];
             test_monitor_wall.value.forEach((element, index) => {
@@ -1671,7 +1694,7 @@ export default defineComponent({
         return tep.starth * 0.4 + "px";
       },
       show_box_line_height(height: number) {
-        return height * 0.3+ "px";
+        return height * 0.3 + "px";
       },
       center_x() {
         const wall_dom = wall.value;
@@ -1888,16 +1911,19 @@ export default defineComponent({
         realtime_upload();
       },
       export_magic_wall() {
-        let res:string="";
+        let res: string = "";
         test_monitor_wall.value.forEach((ele, index) => {
           const point_list = four_point(ele);
           if (wall.value && point_list && ele.isShow) {
             point_list?.forEach((element) => {
-              if(wall.value ){
+              if (wall.value) {
-                element.x =Math.round((element.x / wall.value.offsetWidth) * 3840);
+                element.x = Math.round(
-               element.y = Math.round((element.y / wall.value.offsetHeight) * 2160);
+                  (element.x / wall.value.offsetWidth) * 3840
+                );
+                element.y = Math.round(
+                  (element.y / wall.value.offsetHeight) * 2160
+                );
               }
-              
             });
             let item: exporttxt = new exporttxt(0, 0, 0, 0, {}, {}, {}, {});
             item.id = ele.id;
@@ -1908,10 +1934,10 @@ export default defineComponent({
             item.w = Math.round((ele.w / wall.value?.offsetWidth) * 3840);
             item.h = Math.round((ele.h / wall.value.offsetHeight) * 2160);
             item.angle = ele.angle;
-            res=res+JSON.stringify(item)+"\r\n"
+            res = res + JSON.stringify(item) + "\r\n";
           }
         });
-        res=res.replace(/\"/g,"");
+        res = res.replace(/\"/g, "");
         const status = exportFile("magic_wall.txt", res);
         if (status === true) {
         } else {
@@ -1923,6 +1949,14 @@ export default defineComponent({
           });
         }
       },
+      async upload_magic_switch() {
+        let client = GlobalData.getInstance().getCurrentClient();
+        if (client) {
+          const SetMagicWallGridState = await client.setMagicWallGridState(
+            magic_switch.value
+          );
+        }
+      },
     };
   },
 });

src/entities/WSProtocol.ts

@@ -486,6 +486,13 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "RpcGetMagicWallConfig";
     }
 
+    public static get kRpcGetMagicWallGridState() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetMagicWallGridState";
+    }
+    public static get kRpcSetMagicWallGridState() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetMagicWallGridState";
+    }
+
     public static get kRpcTestA() {
       return Commands.PROTOCOL_PREFIX + "RpcTestA";
     }
@@ -643,6 +650,8 @@ export namespace Protocol {
       Commands.kSetBlendingOverlap,
       Commands.kGetBlendingConfig,
       Commands.kSaveBlendingConfig,
+      Commands.kRpcSetMagicWallGridState,
+      Commands.kRpcGetMagicWallGridState,
     ]);
     public static get AllCommands() {
       return this._all_commands;
@@ -3155,6 +3164,51 @@ export namespace Protocol {
     success = false;
   }
 
+  export class RpcSetMagicWallGridStateRequestEntity extends PacketEntity {
+    constructor(show_grid: boolean, rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcSetMagicWallGridState;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+      this.show_grid = show_grid;
+    }
+    show_grid = false;
+  }
+
+  export class RpcSetMagicWallGridStateResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+    success = false;
+  }
+
+  export class RpcGetMagicWallGridStateRequestEntity extends PacketEntity {
+    constructor( rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcGetMagicWallGridState;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+    }
+    timestamp = 0;
+  }
+
+  export class RpcGetMagicWallGridStateResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+    grid_showing = false;
+  }
+
+  export class MagicWallGridStateNotifyEntity extends PacketEntity {
+    grid_showing = false;
+    constructor() {
+      super();
+      this.command = Commands.kRpcSetMagicWallGridState;
+    }
+  }
+
   export class RpcTestARequestEntity extends PacketEntity {
     constructor(
       x: number,
@@ -3303,10 +3357,7 @@ export namespace Protocol {
   }
 
   export class EnableBlendingRequestEntity extends PacketEntity {
-    constructor(
+    constructor(enable: boolean, rpc_id = 0) {
-      enable: boolean,
-      rpc_id = 0
-    ) {
       super();
       super.command = Commands.kEnableBlending;
       super.flag = PacketEntity.FLAG_REQUEST;
@@ -3354,12 +3405,9 @@ export namespace Protocol {
   }
 
   export class GetBlendingConfigRequestEntity extends PacketEntity {
-    constructor(
+    constructor(name: string, rpc_id = 0) {
-      name: string,
-      rpc_id = 0
-    ) {
       super();
-      super.command = Commands.kGetBlendingConfig
+      super.command = Commands.kGetBlendingConfig;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = rpc_id;
 
@@ -3378,10 +3426,7 @@ export namespace Protocol {
   }
 
   export class SaveBlendingConfigRequestEntity extends PacketEntity {
-    constructor(
+    constructor(name: string, rpc_id = 0) {
-      name: string,
-      rpc_id = 0
-    ) {
       super();
       super.command = Commands.kSaveBlendingConfig;
       super.flag = PacketEntity.FLAG_REQUEST;

src/i18n/en-US/index.ts

@@ -185,7 +185,7 @@ export default {
   "task type": "Task Type",
   time: "Time",
   loop: "Loop",
-  "timing cycle": "Timing Exexute",
+  "timing cycle": "Timing Execute",
   monday: "Monday",
   tuesday: "Turesday",
   wednesday: "Wednesday",
@@ -441,6 +441,6 @@ export default {
   "physical central location":"Central Location",
   "monitors list":"Monitors List",
   "resize":"Resize",
-  "export magic":"Export"
+  "export magic":"Export",
-
+  "raster graph":"Raster Graph"
 };

src/i18n/zh-CN/index.ts

@@ -708,5 +708,6 @@ export default {
   "physical central location":"物理中心位置",
   "monitors list":"显示器",
   "resize":"缩放",
-  "export magic":"导出"
+  "export magic":"导出",
+  "raster graph":"栅格图"
 };