魔墙：修复添加宽高后出现的bug

src/components/ControlPanelDialog.vue

@@ -333,7 +333,7 @@
                         <q-separator></q-separator>
                         x:{{ item.centerx }} y:{{ item.centery }}
                         <q-separator></q-separator>
-                        W:{{filter_px(item.w)}}H:{{filter_px(item.h)}}
+                        W:{{ filter_px(item.w) }}H:{{ filter_px(item.h) }}
                       </div>
                     </vue3-resize-drag>
                   </div>
@@ -350,6 +350,7 @@
                 }}</q-item-label>
               </q-item-section>
             </q-item>
+
             <q-item>
               <q-item-section avatar>
                 <span class="q-mb-md">W:</span>
@@ -357,11 +358,9 @@
               <q-item-section>
                 <q-input
                   v-if="monitor_list_current_index > -1"
-                  type="number"
+                  type="text"
-                  :min="0"
+                  v-model="test_monitor_list[monitor_list_current_index].cmw"
-                  v-model="test_monitor_list[monitor_list_current_index].w"
                   @update:model-value="changewidth()"
-                  :max="2000"
                   :rules="[
                     (val) =>
                       (val != null &&
@@ -371,12 +370,15 @@
                     (val) =>
                       parseInt(val) >= 0 ||
                       $t('the number must be greater than 0'),
+                      (val) =>
+                      parseInt(val) <= 3840 ||
+                      $t('the number must be less than 3840'),
                   ]"
                   lazy-rules
                   hint=""
                 >
                   <template v-slot:append>
-                    <span class="input_append text-h6">px</span>
+                    <span class="input_append text-h6">mm</span>
                   </template>
                 </q-input>
                 <q-input
@@ -387,7 +389,7 @@
                   hint=""
                 >
                   <template v-slot:append>
-                    <span class="input_append text-h6">px</span>
+                    <span class="input_append text-h6">mm</span>
                   </template>
                 </q-input>
               </q-item-section>
@@ -397,11 +399,9 @@
               <q-item-section>
                 <q-input
                   v-if="monitor_list_current_index > -1"
-                  type="number"
+                  type="text"
-                  :min="0"
+                  v-model="test_monitor_list[monitor_list_current_index].cmh"
-                  v-model="test_monitor_list[monitor_list_current_index].h"
                   @update:model-value="changeHeight()"
-                  :max="2000"
                   :rules="[
                     (val) =>
                       (val != null &&
@@ -411,12 +411,15 @@
                     (val) =>
                       parseInt(val) >= 0 ||
                       $t('the number must be greater than 0'),
+                      (val) =>
+                      parseInt(val) <= 2160 ||
+                      $t('the number must be less than 2160'),
                   ]"
                   lazy-rules
                   hint=""
                 >
                   <template v-slot:append>
-                    <span class="input_append text-h6">px</span>
+                    <span class="input_append text-h6">mm</span>
                   </template>
                 </q-input>
                 <q-input
@@ -428,7 +431,7 @@
                   hint=""
                 >
                   <template v-slot:append>
-                    <span class="input_append text-h6">px</span>
+                    <span class="input_append text-h6">mm</span>
                   </template>
                 </q-input>
               </q-item-section>
@@ -473,10 +476,12 @@
                       @dragend="(evt) => onDragend(evt, item, j)"
                     >
                       {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
-                      W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
+                      W:{{
-                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
+                      }}
+                      H:{{
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
                       }}
-                      <!-- 占比：{{test_monitor_list[(item - 1) * 4 + (j - 1)].resize }} -->
                     </div>
                   </div>
                   <div
@@ -507,8 +512,11 @@
                       @dragend="(evt) => onDragend(evt, item, j)"
                     >
                       {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
-                      W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
+                      W:{{
-                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmw)
+                      }}
+                      H:{{
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].cmh)
                       }}
                     </div>
                   </div>
@@ -600,10 +608,10 @@ import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize
 import itemDrag from "src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag";
 import MagicWallConfig from "src/entities/MagicWallConfig";
 import { PointF } from "src/entities/RectF";
-import { number } from "@intlify/core-base";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
-import { filter } from "minimatch";
+import { number } from "@intlify/core-base";
 // import VeeValidate from 'vee-validate';
+
 class test_monitor {
   uuid = "";
   active = false;
@@ -611,10 +619,12 @@ class test_monitor {
   start_y = 0;
   InitialW = 0;
   InitialH = 0;
-  startw=0.0;
+  startw = 0.0;
-  starth=0.0;
+  starth = 0.0;
   w = 0.0;
   h = 0.0;
+  cmw = 0.0;
+  cmh = 0.0;
   currentx = 0.0;
   currenty = 0.0;
   centerx = 0;
@@ -622,6 +632,8 @@ class test_monitor {
   angle = 0;
   id = 0;
   resize = 0.0;
+  resizew=0.0;
+  resizeh=0.0
   isHide = false;
   isShow = false;
   reset() {
@@ -631,6 +643,8 @@ class test_monitor {
     this.start_y = 0;
     this.w = 0.0;
     this.h = 0.0;
+    this.cmh = 0.0;
+    this.cmw = 0.0;
     this.currentx = 0.0;
     this.currenty = 0.0;
     this.centerx = 0;
@@ -640,10 +654,12 @@ class test_monitor {
     this.isHide = false; //列表隐藏
     this.isShow = false; //墙显示
     this.resize = 0.0;
+    this.resizew=0.0;
+    this.resizeh=0.0;
     this.InitialW = 0;
     this.InitialW = 0;
-    this.startw=0.0;
+    this.startw = 0.0;
-    this.starth=0.0;
+    this.starth = 0.0;
   }
   constructor(id: number, uuid: string, w: number, h: number, resize: number) {
     this.reset();
@@ -652,8 +668,10 @@ class test_monitor {
     this.w = w;
     this.h = h;
     this.resize = resize;
-    this.startw=128;
+    this.startw = 128;
-    this.starth=72;
+    this.starth = 72;
+    this.cmw = 0.0;
+    this.cmh = 0.0;
   }
 }
 
@@ -664,10 +682,9 @@ export default defineComponent({
     let $store = useStore();
     let $q = useQuasar();
     let $t = useI18n();
-
+    let lcm = ref(0);
     let show_dialog = ref(false);
     let loading = ref(false);
-    let show_windows_flag = ref(true); // 用于刷新 window 坐标
     let wall: Ref<HTMLElement | null> = ref(null);
     let current_index = ref(-1);
     let monitor_list_current_index = ref(-1);
@@ -681,12 +698,46 @@ export default defineComponent({
       angle: 0,
     });
     let multiple = ref(false);
-    const aw = 607;
+    const aw = 303.5;
-    const ah = 342;
+    const ah = 171;
-    const bw = 539;
+    const bw = 269.5;
-    const bh = 304;
+    const bh = 152;
-    const cw = 511;
+    const cw = 255.5;
-    const ch = 288;
+    const ch = 144;
+    const model = ref(null);
+    const options = ref([
+      {
+        id: "55",
+        w: 1214,
+        h: 684,
+        desc: "Google",
+      },
+      {
+        id: "49",
+        w: 1078,
+        h: 608,
+        desc: "Facebook",
+      },
+      {
+        id: "46",
+        w: 1022,
+        h: 577,
+        desc: "Twitter",
+      },
+      {
+        id: "70",
+        w: 1920,
+        h: 1080,
+        desc: "Apple",
+      },
+      // {
+      //   id: '55',
+      //   w:1214,
+      //   h:684,
+      //   desc: 'Oracle',
+      //   inactive: true
+      // }
+    ]);
     //调整与背景的百分比
     const percenter = ref(1);
     let last_percenter = ref(1);
@@ -724,9 +775,9 @@ export default defineComponent({
       height: 0,
       active: false,
     });
-    const filter_px=(val:number)=>{
+    const filter_px = (val: number) => {
-      return Math.round(val)
+      return Math.round(val);
-    }
+    };
     const realtime_upload = async () => {
       let client = GlobalData.getInstance().getCurrentClient();
       const settings = await GlobalData.getInstance()
@@ -790,6 +841,32 @@ export default defineComponent({
         }
       }
     };
+    const getpx = () => {
+      const wall_dom = wall.value;
+      if(wall_dom){
+        lcm.value = (wall_dom.offsetWidth*0.5/1214);
+        // console.log(lcm.value)
+        test_monitor_list.value.forEach((ele) => {
+          ele.cmw = ele.w /lcm.value;
+          ele.cmh = ele.h /lcm.value;
+      });
+      }
+
+    };
+    const getsize=(item:test_monitor)=>{
+      const wall_dom = wall.value;
+      if(wall_dom){
+        // item.w=item.w/3840*wall_dom.offsetWidth;
+        // item.h=item.h/2160*wall_dom.offsetHeight;
+      }
+    }
+    const setsize=(item:test_monitor)=>{
+      const wall_dom = wall.value;
+      if(wall_dom){
+        // item.w=item.w/wall_dom.offsetWidth*3840;
+        // item.h=item.h/wall_dom.offsetHeight*2160;
+      }
+    }
     const radians = () => {
       const item = test_monitor_wall.value[current_index.value];
       return /*a*/ (item.angle * Math.PI) / 180;
@@ -848,8 +925,8 @@ export default defineComponent({
         return point_list;
       }
     };
-    let offsetHeight=ref(0.0);
+    let offsetHeight = ref(0.0);
-    let offsetWidth=ref(0.0)
+    let offsetWidth = ref(0.0);
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
     let last_wall: Ref<test_monitor[]> = ref([]);
     let output_length = ref(0);
@@ -1087,14 +1164,14 @@ export default defineComponent({
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value;
       if (wall_dom) {
-        let size_h=offsetHeight.value/wall_dom.offsetHeight;
+        getpx()
-        let size_w=offsetWidth.value/wall_dom.offsetWidth;
+        let size_h = offsetHeight.value / wall_dom.offsetHeight;
-        console.log(offsetHeight.value)
+        let size_w = offsetWidth.value / wall_dom.offsetWidth;
         test_monitor_wall.value.forEach((element) => {
           let teph = element.InitialH;
           let tepw = element.InitialW;
-          element.InitialH = wall_dom.offsetHeight * element.resize;
+          element.InitialH = wall_dom.offsetHeight * element.resizeh;
-          element.InitialW = wall_dom.offsetWidth * element.resize;
+          element.InitialW = wall_dom.offsetWidth * element.resizew;
           element.h = element.InitialH * percenter.value;
           element.w = element.InitialW * percenter.value;
           let sizeh = element.InitialH / teph;
@@ -1107,6 +1184,12 @@ export default defineComponent({
       }
     });
     return {
+      getpx,
+      getsize,
+      setsize,
+      lcm,
+      model,
+      options,
       offsetHeight,
       offsetWidth,
       filter_px,
@@ -1149,9 +1232,10 @@ export default defineComponent({
             ?.getOutputBoardSetting();
           const response = await client.getMagicWallConfig();
           const wall_dom = wall.value;
-          if(wall_dom){
+          if (wall_dom) {
-              offsetHeight.value=wall_dom.offsetHeight
+            offsetHeight.value = wall_dom.offsetHeight;
-              offsetWidth.value=wall_dom.offsetWidth
+            offsetWidth.value = wall_dom.offsetWidth;
+            getpx();
           }
           if (response && settings) {
             const a = response?.config.windows;
@@ -1184,7 +1268,6 @@ export default defineComponent({
               });
               loading.value = false;
             } 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]);
@@ -1340,16 +1423,11 @@ export default defineComponent({
           const wall_dom = wall.value;
           item.isShow = true;
           if (wall_dom) {
-            while(wall_dom.offsetWidth<item.w*2){
+            getsize(item)
-                console.log("进来了")
-                console.log(item.w)
-                console.log(wall_dom.offsetWidth*0.5)
-                item.h=item.h*0.5;
-                item.w=item.w*0.5
-            }
-            item.resize=item.w/wall_dom.offsetWidth
             item.InitialH = item.h;
             item.InitialW = item.w;
+            item.resizew = item.w / wall_dom.offsetWidth;
+            item.resizeh=item.h / wall_dom.offsetHeight;
             item.h = item.InitialH * percenter.value;
             item.w = item.InitialW * percenter.value;
             if (item.currentx > wall_dom?.offsetWidth - item.w) {
@@ -1360,14 +1438,27 @@ export default defineComponent({
             }
             item.centerx = Math.floor(item.currentx + item.w / 2);
             item.centery = Math.floor(item.currenty + item.h / 2);
-          }
+            if (
+              item.h > wall_dom.offsetHeight ||
+              item.w > wall_dom.offsetWidth
+            ) {
+              $q.notify({
+                color: "negative",
+                icon: "warning",
+                message: "该显示器超出,请调整缩放",
+                position: "top",
+                timeout: 2500,
+              });
+            } else {
               if (test_monitor_wall.value.indexOf(item) == -1) {
                 test_monitor_wall.value.push(item);
                 test_delete_flag = true;
               }
               current_index.value = test_monitor_wall.value.length - 1;
-        }
               realtime_upload();
+            }
+          }
+        }
       },
       onDragEnter(e: DragEvent, index: string) {
         e.stopPropagation();
@@ -1395,7 +1486,12 @@ export default defineComponent({
       },
       closeWindow(item: test_monitor, index: number) {
         current_index.value = -1;
-        test_monitor_list.value[item.id]=JSON.parse(JSON.stringify(test_monitor_wall.value[index]))
+        setsize(item)
+        item.cmw = item.w  /lcm.value;
+        item.cmh = item.h / lcm.value;
+        test_monitor_list.value[item.id] = JSON.parse(
+          JSON.stringify(test_monitor_wall.value[index])
+        );
         test_monitor_list.value[item.id].isHide = false;
         test_monitor_wall.value[index].isShow = false;
         multiple_select.value = [];
@@ -1404,7 +1500,10 @@ export default defineComponent({
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;
         test_monitor_wall.value.forEach((ele) => {
-            test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
+          setsize(ele)
+          ele.cmh = ele.h /lcm.value;
+          ele.cmw = ele.w /lcm.value;
+          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
         });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
@@ -1419,7 +1518,10 @@ export default defineComponent({
       closeAllWindows() {
         current_index.value = -1;
         test_monitor_wall.value.forEach((ele) => {
-            test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
+          setsize(ele)
+          ele.cmh = ele.h /lcm.value;
+          ele.cmw = ele.w /lcm.value;
+          test_monitor_list.value[ele.id] = JSON.parse(JSON.stringify(ele));
         });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
@@ -1446,7 +1548,7 @@ export default defineComponent({
         let tep = JSON.parse(
           JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
         );
-        return tep.starth*0.4 + "px";
+        return tep.starth * 0.4 + "px";
       },
       show_box_line_height(height: number) {
         return height * 0.3 + "px";
@@ -1631,14 +1733,15 @@ export default defineComponent({
         });
         realtime_upload();
       },
-      changewidth(){
+      changewidth() {
-
+        let item = test_monitor_list.value[monitor_list_current_index.value];
+        item.w = Number(item.cmw) * lcm.value;
+        // console.log(item.w)
       },
-      changeHeight(){
+      changeHeight() {
-
+        let item = test_monitor_list.value[monitor_list_current_index.value];
+        item.h = item.cmh * lcm.value;
       },
-
-
     };
   },
 });