魔墙添加上传时的参数-背景墙的分辨率

src/components/ControlPanelDialog.vue

@@ -42,7 +42,7 @@
                     <q-item-section>
                       <q-input v-if="(current_index > -1)" type="number" min="0"
                         v-model="(test_monitor_wall[current_index].angle)"
-                        oninput="if(value<0)value=0;if(value>360)value=360;" hint="">
+                        oninput="if(value<0)value=0;if(value>360)value=360;" hint="" @update:model-value="changeAngle()">
                         <template v-slot:append>
                           <span class="input_append">°</span>
                         </template>
@@ -144,8 +144,8 @@
                 <div ref="wall" v-if="$store.state.power_state"
                   style="position: absolute;  height: 85%; width: 95%; overflow: hidden;" @click="canel_active()">
                   <div v-for=" (item, index) of test_monitor_wall" @click.stop="Unchecked == false">
-                    <vue3-resize-drag v-if="item.isShow" :w="item.w" :h="item.h" :x="parseInt(item.currentx.toString())"
+                    <vue3-resize-drag v-if="item.isShow" :w="item.w" :h="item.h" :x="item.currentx"
-                      :y="parseInt(item.currenty.toString())" :isActive="true" :isGuide="(true && item.angle == 0)"
+                      :y="item.currenty" :isActive="true" :isGuide="(true && item.angle == 0)"
                       :rotate="parseInt(item.angle.toString())" :is-resizable="false" :resizeIconSize="10"
                       style="background-color: grey; text-align: center;position: absolute; "
                       @moveHandler="moveingMonitor(item, $event, index)" @moveEndHandler="moveMonitor(item, $event)"
@@ -237,7 +237,7 @@
 <style scoped>
 .monitor_selected {
   outline-style: dashed;
-  outline-color: #166fab;
+  outline-color: transparent;
   background-color: dimgrey;
 }
 
@@ -274,10 +274,10 @@ class test_monitor {
   start_y = 0;
   InitialW = 0;
   InitialH = 0;
-  w = 0;
+  w = 0.0;
-  h = 0;
+  h = 0.0;
-  currentx = 0;
+  currentx = 0.0;
-  currenty = 0;
+  currenty = 0.0;
   centerx = 0;
   centery = 0;
   angle = 0;
@@ -290,10 +290,10 @@ class test_monitor {
     this.active = false;
     this.start_x = 0;
     this.start_y = 0;
-    this.w = 0;
+    this.w = 0.0;
-    this.h = 0;
+    this.h = 0.0;
-    this.currentx = 0;
+    this.currentx = 0.0;
-    this.currenty = 0;
+    this.currenty = 0.0;
     this.centerx = 0;
     this.centery = 0;
     this.angle = 0;
@@ -376,10 +376,10 @@ export default defineComponent({
       const rx: number = item.currentx + item.w;
       if (wall_dom) {
         if (rx > wall_dom.offsetWidth) {
-          item.currentx = Math.round(wall_dom.offsetWidth - item.w)
+          item.currentx = wall_dom.offsetWidth - item.w
-          return parseInt(item.currentx.toString());
+          return item.currentx;
         } else {
-          return item.currentx
+          return item.currentx;
         }
       }
 
@@ -395,7 +395,7 @@ export default defineComponent({
       const wall_dom = wall.value
       const item = test_monitor_wall.value[current_index.value]
       if (wall_dom) {
-        return Math.round(wall_dom.offsetWidth - item.w / 2)
+        return Math.floor(wall_dom.offsetWidth - item.w / 2)
       }
     };
     const set_y = () => {
@@ -405,10 +405,10 @@ export default defineComponent({
       const ry: number = item.currenty + item.h;
       if (wall_dom) {
         if (ry > wall_dom.offsetHeight) {
-          item.currenty = Math.round(wall_dom.offsetHeight - item.h)
+          item.currenty = wall_dom.offsetHeight - item.h
-          return parseInt(item.currenty.toString());
+          return item.currenty;
         } else {
-          return parseInt(item.currenty.toString());
+          return item.currenty;
         }
       }
     };
@@ -423,7 +423,7 @@ export default defineComponent({
       const wall_dom = wall.value
       const item = test_monitor_wall.value[current_index.value]
       if (wall_dom) {
-        return Math.round(wall_dom.offsetHeight - item.h / 2)
+        return Math.floor(wall_dom.offsetHeight - item.h / 2)
       }
     };
     let Unchecked = ref(false);
@@ -440,10 +440,10 @@ export default defineComponent({
         item.w = item.InitialW * percenter.value;
       }
       item.active = true;
-      item.currentx = parseInt(rect.left.toString())
+      item.currentx =rect.left
-      item.currenty = parseInt(rect.top.toString())
+      item.currenty = rect.top
-      item.centerx = Math.round(item.currentx + item.w / 2)
+      item.centerx = Math.floor(item.currentx + item.w / 2)
-      item.centery = Math.round(item.currenty + item.h / 2)
+      item.centery = Math.floor(item.currenty + item.h / 2)
       if (Number.isNaN(rect.left || rect.left < 0)) {
         item.currentx = 0
       }
@@ -457,27 +457,57 @@ export default defineComponent({
       } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
         item.currentx = set_x() ?? 0;
       } else {
-        item.currentx = parseInt(rect.left.toString())
+        item.currentx = rect.left
       }
       if (rect.top < 0) {
         item.currenty = 0
       } else if (wall.value && rect.top > wall.value.offsetHeight - item.h) {
         item.currenty = set_y() ?? 0;
       } else {
-        item.currenty = parseInt(rect.top.toString())
+        item.currenty = rect.top
       }
       item.centerx = Math.floor(item.currentx + item.w / 2)
       item.centery = Math.floor(item.currenty + item.h / 2)
     };
+    const isexceed=(element:test_monitor)=>{
+      // element.currentx / wall_dom.offsetWidth
+      const wall_dom = wall.value;
+      if(wall_dom){
+        let tepx=element.currentx / wall_dom.offsetWidth;
+        let tepy=element.currenty / wall_dom.offsetWidth;
+        if(tepx<0){
+          element.currentx=0;
+        }else if(tepx>1){
+          element.currentx=wall_dom.offsetWidth;
+
+        }
+        if(tepy<0){
+          element.currenty=0;
+        }else if(tepy>1){
+          element.currenty=wall_dom.offsetHeight;
+
+        }
+      }
+
+      return element;
+    };
     let test_delete_flag = false;
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value
       if (wall_dom) {
         test_monitor_wall.value.forEach((element) => {
+          console.log(element.currentx+"111")
           element.InitialH = wall_dom.offsetHeight * element.resize;
           element.InitialW = wall_dom.offsetWidth * element.resize;
           element.h = element.InitialH * percenter.value;
           element.w = element.InitialW * percenter.value;
+          element.currentx=element.currentx*percenter.value;
+          element.currenty=element.currenty*percenter.value;
+          element.centerx = Math.floor(element.currentx + element.w / 2);
+          element.centery = Math.floor(element.currenty + element.h/ 2);
+          console.log(percenter.value+"222")
+          console.log(element.currentx*percenter.value+"222")
+
         })
       }
     });
@@ -499,27 +529,30 @@ export default defineComponent({
       max_y,
       moveMonitor,
       moveingMonitor,
+      isexceed,
       loga(a: any) {
         console.log(a);
       },
       async showDialog() {
         show_dialog.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
+
         if (client) {
           const response = await client.getMagicWallConfig()
           const a = response?.config.windows;
           const wall_dom = wall.value
+          console.log(response)
           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])
-              item.currentx = Math.round(element.lt.x * wall_dom.offsetWidth);
+              item.currentx = element.lt.x * wall_dom.offsetWidth;
-              item.currenty = Math.round(element.lt.y * wall_dom.offsetHeight);
+              item.currenty = element.lt.y * wall_dom.offsetHeight;
               percenter.value = parseFloat((element.percenter).toString());
               item.InitialH = element.initial_h;
               item.InitialW = element.initial_w;
-              item.h = parseInt((item.InitialH * percenter.value).toString());
+              item.h = (item.InitialH * percenter.value);
-              item.w = parseInt((item.InitialW * percenter.value).toString());
+              item.w = (item.InitialW * percenter.value);
               item.centerx = Math.floor(item.currentx + item.w / 2);
               item.centery = Math.floor(item.currenty + item.h / 2);
               item.angle = element.angle
@@ -553,15 +586,20 @@ export default defineComponent({
         loading.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
         const wall_dom = wall.value
-        if (client && wall_dom) {
+        const settings = await GlobalData.getInstance().getCurrentClient()?.getOutputBoardSetting();
+        if (client && wall_dom && settings) {
           const response = await client.getMagicWallConfig();
           const cloud_monitor_list = new MagicWallConfig();
           cloud_monitor_list.magic_wall_enable = true;//response?.config.magic_wall_enable ?? true;
-          cloud_monitor_list.col = parseInt((GlobalData.getInstance().applicationConfig?.wall_col ?? 2).toString()) // response?.config.col ?? 2;
+          cloud_monitor_list.col = parseInt((settings.wall_col).toString()) // response?.config.col ?? 2;
-          cloud_monitor_list.row = parseInt((GlobalData.getInstance().applicationConfig?.wall_row ?? 2).toString())  // response?.config.row ?? 2;
+          cloud_monitor_list.row =parseInt((settings.wall_row).toString())  // response?.config.row ?? 2;
           let tep_width = 0;
           test_monitor_wall.value.forEach((element, index) => {
             if (element.isShow) {
+              //处理缩放后超出
+              // element=isexceed(element);
+              // console.log(wall_dom.offsetHeight)
+              console.log(element)
               cloud_monitor_list.windows.push({
                 index: element.id,
                 lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight),
@@ -570,10 +608,13 @@ export default defineComponent({
                 angle: parseInt(element.angle.toString()),
                 initial_h: element.InitialH, initial_w: element.InitialW,
                 percenter: percenter.value,
+                background_h:wall_dom.offsetHeight,
+                background_w:wall_dom.offsetWidth,
               })
             }
           });
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+          console.log(setMagic)
           $q.notify({
             color: setMagic?.success ? "positive" : "negative",
             icon: setMagic?.success ? "done" : "warning",
@@ -644,13 +685,13 @@ export default defineComponent({
             item.h = item.InitialH * percenter.value;
             item.w = item.InitialW * percenter.value;
             if (item.currentx > wall_dom?.offsetWidth - item.w) {
-              item.currentx = Math.round(wall_dom?.offsetWidth - item.w)
+              item.currentx = wall_dom?.offsetWidth - item.w
             }
             if (item.currenty > wall_dom?.offsetHeight - item.h) {
-              item.currenty = Math.round(wall_dom?.offsetHeight - item.h)
+              item.currenty = wall_dom?.offsetHeight - item.h
             }
-            item.centerx = Math.round(item.currentx + item.w / 2);
+            item.centerx = Math.floor(item.currentx + item.w / 2);
-            item.centery = Math.round(item.currenty + item.h / 2);
+            item.centery = Math.floor(item.currenty + item.h / 2);
           }
           if (test_monitor_wall.value.indexOf(item) == -1) {
             test_monitor_wall.value.push(item);
@@ -658,7 +699,6 @@ export default defineComponent({
           }
           current_index.value = test_monitor_wall.value.length - 1
         }
-
       },
       onDragEnter(e: DragEvent, index: string) {
         e.stopPropagation();
@@ -724,25 +764,38 @@ export default defineComponent({
       center_x() {
         const wall_dom = wall.value
         const item = test_monitor_wall.value[current_index.value]
-        item.currentx = Math.round(item.centerx - item.w / 2);
+        item.currentx =item.centerx - item.w / 2;
       },
       center_y() {
         const wall_dom = wall.value
         const item = test_monitor_wall.value[current_index.value]
-        item.currenty = Math.round(item.centery - item.h / 2);
+        item.currenty = item.centery - item.h / 2;
       },
       changePercenter() {
+        const wall_dom = wall.value
         let tep = false;
         test_monitor_wall.value.forEach((element) => {
           element.w = element.InitialW * percenter.value;
           element.h = element.InitialH * percenter.value;
-          element.centerx = element.currentx + Math.floor(element.w / 2);
+          const rx: number = element.currentx + element.w;
-          element.centery = element.currenty + Math.floor(element.h / 2);
+          const ry:number=element.currenty + element.h;
+
+          const wall_dom = wall.value;
+
+           if(wall_dom){
+            if (rx > wall_dom.offsetWidth) {
+                element.currentx = wall_dom.offsetWidth - element.w
+            }
+            if(ry>wall_dom.offsetHeight){
+              element.currenty = wall_dom.offsetHeight - element.h
+            }
+           }
+           element.centerx =  Math.floor(element.currentx +element.w / 2);
+           element.centery = Math.floor(element.currenty + element.h / 2);
           if (element.isShow) {
             tep = true;
           }
         })
-
       },
       canel_active() {
         Unchecked.value = true;
@@ -753,6 +806,11 @@ export default defineComponent({
           })
         }
       },
+      changeAngle(){
+        const wall_dom = wall.value
+        const item = test_monitor_wall.value[current_index.value]
+        console.log(item.currentx)
+      }
     };
   },
 });

src/entities/RectF.ts

@@ -37,4 +37,6 @@ export class RotatedRectFWithIndex extends RotatedRectF{
   percenter:number=0;
   initial_h:number=0;
   initial_w:number=0;
+  background_h:number=0;
+  background_w:number=0;
 }