添加魔墙在主页面的显示

src/components/ControlPanelDialog.vue

@@ -568,7 +568,7 @@
             no-caps
             :label="$t('revert')"
             color="primary"
-            @click="refresh_all()"
+            @click="refresh_all"
           />
           <q-btn
             ref="accept"
@@ -637,7 +637,7 @@ import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { number } from "@intlify/core-base";
 // import VeeValidate from 'vee-validate';
 
-class test_monitor {
+export class test_monitor {
   uuid = "";
   active = false;
   start_x = 0;
@@ -822,7 +822,7 @@ export default defineComponent({
             );
             num--;
           }
-          getpx()
+          getpx();
         }
       }
       const cloud_monitor_list = new MagicWallConfig();
@@ -851,21 +851,39 @@ export default defineComponent({
           }
         });
       }
-      if (client) {
+      // if (client) {
-        const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+      //   const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
-        if(!setMagic?.success){
+      // if (setMagic?.success) {
-          $q.notify({
+      //   let monitorList:any=[]
-            color: "negative",
+      //       test_monitor_wall.value.forEach((element, index) => {
-            icon: "warning",
+      //         if (element.isShow&&wall_dom) {
-            message:
+      //           monitorList.push({
-              $t.t("update magic wall") +
+      //             id: element.id,
-              $t.t("fail") +
+      //             currentx: element.currentx / wall_dom.offsetWidth,
-              "!",
+      //             currenty: element.currenty / wall_dom.offsetHeight,
-            position: "top",
+      //             h: element.h / wall_dom.offsetHeight,
-            timeout: 2500,
+      //             w: element.w / wall_dom.offsetWidth,
-          });
+      //             angle: parseInt(element.angle.toString()),
-        }
+      //             centerx: element.centerx/ wall_dom.offsetWidth,
-      }
+      //             centery: element.centery / wall_dom.offsetHeight,
+      //           });
+      //         }
+      //       });
+      //       $store.commit("setShowMonitorList", monitorList);
+      //     }
+      //   if(!setMagic?.success){
+      //     $q.notify({
+      //       color: "negative",
+      //       icon: "warning",
+      //       message:
+      //         $t.t("update magic wall") +
+      //         $t.t("fail") +
+      //         "!",
+      //       position: "top",
+      //       timeout: 2500,
+      //     });
+      //   }
+      // }
     };
     const getpx = () => {
       const wall_dom = wall.value;
@@ -1171,12 +1189,27 @@ export default defineComponent({
       test_monitor_list.value[index].active = true;
     };
     let test_delete_flag = false;
+    const refresh_all=()=> {
+        test_monitor_wall.value = [];
+        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;
+        });
+        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();
+      };
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value;
+      console.log(test_monitor_wall.value)
       if (wall_dom) {
-        getpx();
-        let size_h = offsetHeight.value / wall_dom.offsetHeight;
-        let size_w = offsetWidth.value / wall_dom.offsetWidth;
         test_monitor_wall.value.forEach((element) => {
           let teph = element.InitialH;
           let tepw = element.InitialW;
@@ -1191,9 +1224,11 @@ export default defineComponent({
           element.centerx = Math.floor(element.currentx + element.w / 2);
           element.centery = Math.floor(element.currenty + element.h / 2);
         });
+        getpx();
       }
     });
     return {
+      refresh_all,
       getpx,
       lcm,
       model,
@@ -1260,6 +1295,7 @@ export default defineComponent({
                 );
                 num--;
               }
+              getpx();
             }
             if (
               output_length.value !=
@@ -1293,7 +1329,7 @@ export default defineComponent({
                 item.centery = Math.floor(item.currenty + item.h / 2);
                 item.angle = element.angle;
                 item.isShow = true;
-                test_monitor_wall.value.push(item);
+                test_monitor_wall.value.push(JSON.parse(JSON.stringify(item)));
                 last_wall.value.push(JSON.parse(JSON.stringify(item)));
                 test_monitor_list.value.forEach((ele) => {
                   if (element.index == ele.id) {
@@ -1354,6 +1390,24 @@ export default defineComponent({
             }
           });
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+          if (setMagic?.success) {
+            let monitorList:any=[]
+            test_monitor_wall.value.forEach((element, index) => {
+              if (element.isShow&&wall_dom) {
+                monitorList.push({
+                  id: element.id,
+                  currentx: element.currentx / wall_dom.offsetWidth,
+                  currenty: element.currenty / wall_dom.offsetHeight,
+                  h: element.h / wall_dom.offsetHeight,
+                  w: element.w / wall_dom.offsetWidth,
+                  angle: parseInt(element.angle.toString()),
+                  centerx: element.centerx/ wall_dom.offsetWidth,
+                  centery: element.centery / wall_dom.offsetHeight,
+                });
+              }
+            });
+            $store.commit("setShowMonitorList", monitorList);
+          }
           $q.notify({
             color: setMagic?.success ? "positive" : "negative",
             icon: setMagic?.success ? "done" : "warning",
@@ -1721,23 +1775,7 @@ export default defineComponent({
         }
         realtime_upload();
       },
-      refresh_all() {
+      
-        test_monitor_wall.value = [];
-        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;
-        });
-        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();
-      },
       changewidth() {
         let item = test_monitor_list.value[monitor_list_current_index.value];
         item.w = Number(item.cmw) * lcm.value;
@@ -1747,7 +1785,7 @@ export default defineComponent({
         item.h = item.cmh * lcm.value;
       },
       alignTop() {
-        let item=test_monitor_wall.value[multiple_select.value[0]];
+        let item = test_monitor_wall.value[multiple_select.value[0]];
         multiple_select.value.forEach((element) => {
           if (element != -1) {
             let tep_item = test_monitor_wall.value[element];
@@ -1758,28 +1796,28 @@ export default defineComponent({
         realtime_upload();
       },
       alignBottom() {
-        let item=test_monitor_wall.value[multiple_select.value[0]];
+        let item = test_monitor_wall.value[multiple_select.value[0]];
         multiple_select.value.forEach((element) => {
           if (element != -1) {
             let tep_item = test_monitor_wall.value[element];
-            tep_item.currenty = item.currenty+item.h-tep_item.h;
+            tep_item.currenty = item.currenty + item.h - tep_item.h;
           }
         });
         realtime_upload();
       },
       alignRight() {
-        let item=test_monitor_wall.value[multiple_select.value[0]];
+        let item = test_monitor_wall.value[multiple_select.value[0]];
         multiple_select.value.forEach((element) => {
           if (element != -1) {
             let tep_item = test_monitor_wall.value[element];
-            tep_item.currentx = item.currentx+item.w-tep_item.w;
+            tep_item.currentx = item.currentx + item.w - tep_item.w;
           }
         });
 
         realtime_upload();
       },
       alignLeft() {
-        let item=test_monitor_wall.value[multiple_select.value[0]];
+        let item = test_monitor_wall.value[multiple_select.value[0]];
         multiple_select.value.forEach((element) => {
           if (element != -1) {
             let tep_item = test_monitor_wall.value[element];

src/pages/TopToolBar.vue

@@ -292,7 +292,7 @@
           <q-item
             clickable
             :disable="!$store.state.power_state"
-            v-if="$store.state.isLedPlayer()"
+            v-if="$store.state.isLedPlayer()&&!$store.state.custom_defines.function_magic_wall"
             v-close-popup
             @click="
               ($store.state.isSpecialVideo()

src/pages/WallPage.vue

@@ -28,7 +28,7 @@
           item.y * ($refs.wall?.offsetHeight ?? 0)
         "
         :zIndex="
-          $store.state.windows_sort.findIndex((element) => element == item.uuid)
+          $store.state.windows_sort.findIndex((element) => element == item.uuid) +1
         "
         :isActive="item.uuid == $store.state.selected_window"
         :resizeIconSize="14"
@@ -67,11 +67,79 @@
         </window>
       </vue3-resize-drag>
     </div>
+    <div
+      id="magic_wall_grids"
+      ref="magic_wall_grids"
+      @click="onWallGridsClick"
+      v-if="
+        $store.state.power_state &&
+        $store.state.custom_defines.function_magic_wall
+      "
+    >
+      <div
+        class="row magic_wall_grids"
+        :style="{
+          height: magic_height(item_height) + 'px',
+        }"
+      >
+        <vue3-resize-drag
+          v-for="(item, index) of $store.state.show_monitor_list"
+          :w="item.w * $refs.wall?.clientWidth"
+          :h="item.h * $refs.wall?.clientHeight"
+          :x="item.currentx * $refs.wall?.clientWidth"
+          :y="item.currenty * $refs.wall?.clientHeight"
+          :rotate="parseInt(item.angle.toString())"
+          :is-resizable="false"
+          :isGuide="false"
+          class="magic_wall"
+          @dragenter="magic_select(index, item, $event)"
+        >
+        </vue3-resize-drag>
+
+        <q-popup-proxy
+          context-menu
+          @show="
+            {
+              last_context_menu_pos_x = $event.layerX;
+              last_context_menu_pos_y = $event.layerY;
+            }
+          "
+        >
+          <q-list>
+            <q-item
+              :disable="plan_running || !$store.state.power_state"
+              clickable
+              v-close-popup
+              @click="openWindowByLocalFile($event)"
+            >
+              <q-item-section avatar>
+                <q-icon name="open_in_browser" />
+              </q-item-section>
+              <q-item-section> {{ $t("open window") }} </q-item-section>
+            </q-item>
+            <q-item
+              :disable="plan_running || !$store.state.power_state"
+              clickable
+              v-close-popup
+              @click="closeAllWindows"
+            >
+              <q-item-section avatar>
+                <q-icon name="close" color="red" />
+              </q-item-section>
+              <q-item-section> {{ $t("close all windows") }} </q-item-section>
+            </q-item>
+          </q-list>
+        </q-popup-proxy>
+      </div>
+    </div>
     <div
       id="wall_grids"
       ref="wall_grids"
       @click="onWallGridsClick"
-      v-if="$store.state.power_state"
+      v-if="
+        $store.state.power_state &&
+        !$store.state.custom_defines.function_magic_wall
+      "
     >
       <div
         v-for="row of wall_rows"
@@ -176,6 +244,16 @@
   background: #aacceec2;
   border: 1px solid #0069bee7;
 }
+.magic_wall {
+  border: 1px solid black;
+  background-color: rgb(173, 228, 251);
+  position: absolute;
+}
+.magic_wall_select {
+  border: 1px dashed black;
+}
+.magic_wall_grids {
+}
 </style>
 
 <script lang="ts">
@@ -191,7 +269,7 @@ import { NullSignalSource, useStore } from "src/store";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
-import { useQuasar } from "quasar";
+import { extend, useQuasar } from "quasar";
 import { NotifyMessage } from "src/common/ClientConnection";
 
 import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
@@ -204,7 +282,6 @@ import FileEntity from "src/entities/FileEntity";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import FileSuffixHelper from "src/common/FileSuffixHelper";
 import { SpecialVideoHelper } from "src/common/SpecialVideoHelper";
-
 class Rect {
   start_x = 0;
   start_y = 0;
@@ -218,10 +295,29 @@ class Rect {
     this.end_y = 0;
   }
 }
+class test_monitor {
+  w = 0.0;
+  h = 0.0;
+  currentx = 0.0;
+  currenty = 0.0;
+  centerx = 0.0;
+  centery = 0.0;
+  angle = 0;
+  id = 0;
+  constructor(id: number, w: number, h: number) {
+    this.currentx = 0.0;
+    this.currenty = 0.0;
+    this.angle = 0;
+    this.centerx = 0;
+    this.centery = 0;
+    this.id = id;
+    this.w = w;
+    this.h = h;
+  }
+}
 
 export default defineComponent({
   name: "PageWall",
-
   components: {
     vue3ResizeDrag,
     Window,
@@ -241,7 +337,7 @@ export default defineComponent({
     const window_rect_edit_dialog: Ref<any> = ref(null);
 
     const show_windows_flag = ref(true); // 用于刷新 window 坐标
-    const refresh_windows_pos = () => {
+    const refresh_windows_pos = async () => {
       // 浏览器窗口大小调整时, 重新显示隐藏虚拟窗口来刷新虚拟窗口坐标
       show_windows_flag.value = false;
       setTimeout(() => {
@@ -249,6 +345,7 @@ export default defineComponent({
           show_windows_flag.value = true;
         });
       }, 100);
+      
     };
 
     EventBus.getInstance().on(
@@ -282,10 +379,174 @@ export default defineComponent({
 
     const area_open_window_flag = ref(false);
     const area_open_window_rect = ref(new Rect());
-
     let item_witdh = ref(0);
     const item_height = ref(0);
+    const radians = () => {
+      const test_monitor_list: any = clacMonitor();
+      if (test_monitor_list) {
+        const item = test_monitor_list[current_index.value];
+        return /*a*/ (item.angle * Math.PI) / 180;
+      }
+    };
+    const calculateCoordinates = (
+      px: number,
+      py: number,
+      cx: number,
+      cy: number
+    ) => {
+      const x =
+        cx +
+        (px - cx) * Math.cos(Number(radians())) -
+        (py - cy) * Math.sin(Number(radians()));
 
+      const y =
+        cy +
+        (px - cx) * Math.sin(Number(radians())) +
+        (py - cy) * Math.cos(Number(radians()));
+
+      return { x, y };
+    };
+    let current_index = ref(0);
+    const clacMonitor = () => {
+      let test_monitor_list: any = [];
+      $store.state.show_monitor_list.forEach((element) => {
+        let item: test_monitor = new test_monitor(0, 0, 0);
+        const wall_dom = wall.value;
+        if (wall_dom) {
+          item.h = element.h * wall_dom.clientHeight;
+          item.w = element.w * wall_dom.clientWidth;
+          item.currentx = element.currentx * wall_dom.clientWidth;
+          item.currenty = element.currenty * wall_dom.clientHeight;
+          item.centerx = item.currentx + item.w * 0.5;
+          item.centery = item.currenty + item.h * 0.5;
+          item.angle = element.angle;
+          item.id = element.id;
+          test_monitor_list.push(item);
+        }
+      });
+      return test_monitor_list;
+    };
+    const four_point = () => {
+      const test_monitor_list: any = clacMonitor();
+      if (test_monitor_list) {
+        const item = test_monitor_list[current_index.value];
+        item.centerx = parseInt(item.centerx.toString());
+        item.centery = parseInt(item.centery.toString());
+        const x2: number = item.currentx + item.w;
+        const y2: number = item.currenty + item.h;
+        if (item.angle != 0) {
+          const point_left_top = calculateCoordinates(
+            item.currentx,
+            item.currenty,
+            item.centerx,
+            item.centery
+          );
+          const point_left_bootom = calculateCoordinates(
+            item.currentx,
+            y2,
+            item.centerx,
+            item.centery
+          );
+          const point_right_top = calculateCoordinates(
+            x2,
+            item.currenty,
+            item.centerx,
+            item.centery
+          );
+          const point_right_bottom = calculateCoordinates(
+            x2,
+            y2,
+            item.centerx,
+            item.centery
+          );
+          const point_list = [
+            point_left_top,
+            point_left_bootom,
+            point_right_top,
+            point_right_bottom,
+          ];
+
+          return point_list;
+        }
+      }
+    };
+    const select_x = () => {
+      const point_list = four_point();
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        if (point_list) {
+          let minx = 100000;
+          point_list.forEach((element) => {
+            if (minx > element.x) {
+              minx = element.x;
+            }
+          });
+          return minx;
+        }
+      } else {
+        if (wall.value) return item.currentx * wall.value?.clientWidth;
+      }
+    };
+    const select_y = () => {
+      const point_list = four_point();
+      let miny = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (miny > element.y) {
+            miny = element.y;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return miny;
+      } else {
+        if (wall.value) return item.currenty * wall.value?.clientHeight;
+      }
+    };
+    const select_height = () => {
+      const point_list = four_point();
+      let maxy = 0;
+      let miny = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (miny > element.y) {
+            miny = element.y;
+          }
+          if (maxy < element.y) {
+            maxy = element.y;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return maxy - miny;
+      } else {
+        if (wall.value) return item.h * wall.value?.clientHeight;
+      }
+    };
+
+    const select_width = () => {
+      const point_list = four_point();
+      let maxx = 0;
+      let minx = 100000;
+      if (point_list) {
+        point_list.forEach((element) => {
+          if (minx > element.x) {
+            minx = element.x;
+          }
+          if (maxx < element.x) {
+            maxx = element.x;
+          }
+        });
+      }
+      const item = $store.state.show_monitor_list[current_index.value];
+      if (item.angle != 0) {
+        return maxx - minx;
+      } else {
+        if (wall.value) return item.w * wall.value?.clientWidth;
+      }
+    };
     const calcWallItemWH = () => {
       item_witdh.value = Math.floor(
         (wall?.value?.parentElement?.offsetWidth ?? 0) / wall_cols.value
@@ -415,6 +676,7 @@ export default defineComponent({
                 );
             }
           }
+          //开窗
         }
       }
       area_open_window_flag.value = false;
@@ -450,6 +712,53 @@ export default defineComponent({
       }
     };
 
+    const magic_height = (h: number) => {
+      const wall_dom = wall.value;
+      if (wall_dom?.parentElement) {
+        h = wall_dom.parentElement.offsetHeight * 0.6;
+      }
+      return 500;
+    };
+
+    const show_magic_wall = async () => {
+      console.log( $store.state.windows_sort)
+      // $store.state.windows_sort.findIndex((element) => element == item.uuid)
+      let client = GlobalData.getInstance().getCurrentClient();
+      if (client) {
+        const response = await client.getMagicWallConfig();
+        if (response) {
+          const a = response?.config.windows;
+          const wall_dom = wall.value;
+          let monitorList: any = [];
+          if (a && wall_dom) {
+            a.forEach((element) => {
+              let item: test_monitor = new test_monitor(0, 0, 0);
+              item.h = element.h;
+              item.w = element.w;
+              item.currentx = element.lt.x;
+              item.currenty = element.lt.y;
+              item.angle = element.angle;
+              item.id = element.index;
+              if ($store.state.show_monitor_list.length == 0) {
+                monitorList.push(item);
+                $store.commit("setShowMonitorList", monitorList);
+              } else {
+                let flag = false;
+                $store.state.show_monitor_list.forEach((ele: any) => {
+                  if (element.index == ele.id) {
+                    flag = true;
+                  }
+                });
+                if (!flag) {
+                  monitorList.push(item);
+                  $store.commit("setShowMonitorList", monitorList);
+                }
+              }
+            });
+          }
+        }
+      }
+    };
     EventBus.getInstance().on(EventNamesDefine.WindowMouseDown, wallMouseDown);
     EventBus.getInstance().on(EventNamesDefine.WindowMouseMove, wallMouseMove);
     EventBus.getInstance().on(EventNamesDefine.WindowMouseUp, wallMouseUp);
@@ -685,6 +994,9 @@ export default defineComponent({
         elementResizeDetectorMaker().listenTo(
           wall.value,
           (element: HTMLElement) => {
+            if ($store.state.custom_defines.function_magic_wall) {
+              show_magic_wall();
+            }
             if (element) {
               calcWallItemWH();
             }
@@ -751,6 +1063,7 @@ export default defineComponent({
     };
 
     return {
+      magic_height,
       windows,
       wall,
       window_rect_edit_dialog,
@@ -957,6 +1270,25 @@ export default defineComponent({
                               .getCurrentClient()
                               ?.replaceWindow2(find_window, uuid);
                           } else {
+                            if (
+                              $store.state.custom_defines.function_magic_wall
+                            ) {
+                              const item =
+                                $store.state.show_monitor_list[
+                                  current_index.value
+                                ];
+                              if (wall.value) {
+                                x = Number(select_x()) / wall.value.clientWidth;
+                                y =
+                                  Number(select_y()) / wall.value.clientHeight;
+                                width =
+                                  Number(select_width()) /
+                                  wall.value.clientWidth;
+                                height =
+                                  Number(select_height()) /
+                                  wall.value.clientHeight;
+                              }
+                            }
                             const open_window_request =
                               new Protocol.OpenWindowRequestEntity(
                                 uuid,
@@ -999,6 +1331,14 @@ export default defineComponent({
           target?.classList.add("drag-enter");
         }
       },
+      magic_select(index: number, item: test_monitor, e: DragEvent) {
+        current_index.value = index;
+        e.stopPropagation();
+        let target: HTMLElement | null = e.target as HTMLElement;
+        if (target) {
+          target?.classList.add("drag-enter");
+        }
+      },
 
       onDragLeave(e: DragEvent) {
         let target: HTMLElement = e.target as HTMLElement;

src/store/index.ts

@@ -39,7 +39,27 @@ export class CustomDefines {
   function_mirroring_output = false;
   function_magic_wall=false;
 }
+class test_monitor {
+  w = 0.0;
+  h = 0.0;
+  currentx = 0.0;
+  currenty = 0.0;
+  centerx = 0.0;
+  centery = 0.0;
+  angle = 0;
+  id = 0;
+  constructor(id: number, w: number, h: number) {
+    this.currentx = 0.0;
+    this.currenty = 0.0;
+    this.angle = 0;
+    this.centerx = 0;
+    this.centery = 0;
+    this.id = id;
+    this.w = w;
+    this.h = h;
 
+  }
+}
 export interface StateInterface {
   // Define your own store structure, using submodules if needed
   // example: ExampleStateInterface;
@@ -77,7 +97,7 @@ export interface StateInterface {
   device_attribute: number;
   power_state: boolean;
   product_name: string;
-
+  show_monitor_list:test_monitor[];
   custom_defines: CustomDefines;
 
   isLedPlayer: () => boolean;
@@ -340,9 +360,8 @@ export default store(function (/* { ssrContext } */) {
       device_attribute: 0,
       power_state: false,
       product_name: EProductNames.LED_PLAYER,
-
+      show_monitor_list:[],
       custom_defines: new CustomDefines(),
-
       isLedPlayer: () => {
         return (
           Store.state.product_name == EProductNames.LED_PLAYER ||
@@ -358,6 +377,9 @@ export default store(function (/* { ssrContext } */) {
       setInitialized(state: StateInterface, playload?: any) {
         state.initialized = true;
       },
+      setShowMonitorList(state: StateInterface, playload?: any) {
+        state.show_monitor_list = playload
+      },
       updateLandspace(state: StateInterface, playload?: any) {
         if (typeof playload == "boolean") {
           state.landspace = playload;