魔墙：显示列表添加可修改单个窗口的宽高

src/components/ControlPanelDialog.vue

@@ -102,7 +102,6 @@
                         oninput="if(value<0)value=0;if(value>360)value=360;"
                         hint=""
                         @update:model-value="changeAngle()"
-                        :max="max_angle()"
                       >
                         <template v-slot:append>
                           <span class="input_append">°</span>
@@ -333,6 +332,8 @@
                         {{ item.uuid }}
                         <q-separator></q-separator>
                         x:{{ item.centerx }} y:{{ item.centery }}
+                        <q-separator></q-separator>
+                        W:{{filter_px(item.w)}}H:{{filter_px(item.h)}}
                       </div>
                     </vue3-resize-drag>
                   </div>
@@ -349,6 +350,89 @@
                 }}</q-item-label>
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-item-section avatar>
+                <span class="q-mb-md">W:</span>
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-if="monitor_list_current_index > -1"
+                  type="number"
+                  :min="0"
+                  v-model="test_monitor_list[monitor_list_current_index].w"
+                  @update:model-value="changewidth()"
+                  :max="2000"
+                  :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'),
+                  ]"
+                  lazy-rules
+                  hint=""
+                >
+                  <template v-slot:append>
+                    <span class="input_append text-h6">px</span>
+                  </template>
+                </q-input>
+                <q-input
+                  v-else
+                  type="number"
+                  :model-value="0"
+                  :disable="true"
+                  hint=""
+                >
+                  <template v-slot:append>
+                    <span class="input_append text-h6">px</span>
+                  </template>
+                </q-input>
+              </q-item-section>
+              <q-item-section avatar>
+                <span class="q-mb-md">H:</span>
+              </q-item-section>
+              <q-item-section>
+                <q-input
+                  v-if="monitor_list_current_index > -1"
+                  type="number"
+                  :min="0"
+                  v-model="test_monitor_list[monitor_list_current_index].h"
+                  @update:model-value="changeHeight()"
+                  :max="2000"
+                  :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'),
+                  ]"
+                  lazy-rules
+                  hint=""
+                >
+                  <template v-slot:append>
+                    <span class="input_append text-h6">px</span>
+                  </template>
+                </q-input>
+                <q-input
+                  v-else
+                  type="number"
+                  min="0"
+                  :model-value="0"
+                  :disable="true"
+                  hint=""
+                >
+                  <template v-slot:append>
+                    <span class="input_append text-h6">px</span>
+                  </template>
+                </q-input>
+              </q-item-section>
+            </q-item>
             <q-separator></q-separator>
             <q-card-section horizontal>
               <q-list key="uuid" class="full-width">
@@ -360,7 +444,7 @@
                     v-for="j in 4"
                     style="display: inline-block"
                     v-if="item < output_length / 4 || output_length % 4 == 0"
-                    :style="{ lineHeight: box_height(item, j) }"
+                    :style="{ lineHeight: box_line_height(item, j) }"
                   >
                     <div
                       v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
@@ -378,6 +462,7 @@
                         height: box_height(item, j),
                       }"
                       :draggable="$store.state.power_state"
+                      @click="activeMonitorList((item - 1) * 4 + (j - 1))"
                       @dragstart="
                         (evt) =>
                           onDragStart(
@@ -388,16 +473,17 @@
                       @dragend="(evt) => onDragend(evt, item, j)"
                     >
                       {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
-                      W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
+                      W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
-                        test_monitor_list[(item - 1) * 4 + (j - 1)].h
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
                       }}
+                      <!-- 占比：{{test_monitor_list[(item - 1) * 4 + (j - 1)].resize }} -->
                     </div>
                   </div>
                   <div
                     v-else
                     v-for="j in output_length % 4"
                     style="display: inline-block; text-align: center"
-                    :style="{ lineHeight: box_height(item, j) }"
+                    :style="{ lineHeight: box_line_height(item, j) }"
                   >
                     <div
                       v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide"
@@ -409,6 +495,7 @@
                         width: box_width(item, j),
                         height: box_height(item, j),
                       }"
+                       @click="activeMonitorList((item - 1) * 4 + (j - 1))"
                       :draggable="$store.state.power_state"
                       @dragstart="
                         (evt) =>
@@ -420,8 +507,8 @@
                       @dragend="(evt) => onDragend(evt, item, j)"
                     >
                       {{ test_monitor_list[(item - 1) * 4 + (j - 1)].uuid }}
-                      W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
+                      W:{{ filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].w )}} H:{{
-                        test_monitor_list[(item - 1) * 4 + (j - 1)].h
+                        filter_px(test_monitor_list[(item - 1) * 4 + (j - 1)].h)
                       }}
                     </div>
                   </div>
@@ -515,6 +602,7 @@ 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 VeeValidate from 'vee-validate';
 class test_monitor {
   uuid = "";
@@ -523,6 +611,8 @@ class test_monitor {
   start_y = 0;
   InitialW = 0;
   InitialH = 0;
+  startw=0.0;
+  starth=0.0;
   w = 0.0;
   h = 0.0;
   currentx = 0.0;
@@ -531,7 +621,7 @@ class test_monitor {
   centery = 0;
   angle = 0;
   id = 0;
-  resize = 0;
+  resize = 0.0;
   isHide = false;
   isShow = false;
   reset() {
@@ -549,9 +639,11 @@ class test_monitor {
     this.id = 0;
     this.isHide = false; //列表隐藏
     this.isShow = false; //墙显示
-    this.resize = 0;
+    this.resize = 0.0;
     this.InitialW = 0;
     this.InitialW = 0;
+    this.startw=0.0;
+    this.starth=0.0;
   }
   constructor(id: number, uuid: string, w: number, h: number, resize: number) {
     this.reset();
@@ -560,6 +652,8 @@ class test_monitor {
     this.w = w;
     this.h = h;
     this.resize = resize;
+    this.startw=128;
+    this.starth=72;
   }
 }
 
@@ -576,6 +670,9 @@ export default defineComponent({
     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);
+    const monitor_percenter = ref([0.1, 0.2, 0.3, 0.4, 0.5]);
+    const monitor_proportion = ref(["16:9", "4:3"]);
     let window_rect = reactive({
       x: 0,
       y: 0,
@@ -584,12 +681,12 @@ export default defineComponent({
       angle: 0,
     });
     let multiple = ref(false);
-    const aw = 128;
+    const aw = 607;
-    const ah = 72;
+    const ah = 342;
-    const bw = 160;
+    const bw = 539;
-    const bh = 90;
+    const bh = 304;
-    const cw = 192;
+    const cw = 511;
-    const ch = 108;
+    const ch = 288;
     //调整与背景的百分比
     const percenter = ref(1);
     let last_percenter = ref(1);
@@ -627,6 +724,9 @@ export default defineComponent({
       height: 0,
       active: false,
     });
+    const filter_px=(val:number)=>{
+      return Math.round(val)
+    }
     const realtime_upload = async () => {
       let client = GlobalData.getInstance().getCurrentClient();
       const settings = await GlobalData.getInstance()
@@ -674,21 +774,21 @@ 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({
+          $q.notify({
-      //       color: setMagic?.success ? "positive" : "negative",
+            color: "negative",
-      //       icon: setMagic?.success ? "done" : "warning",
+            icon: "warning",
-      //       message:
+            message:
-      //         $t.t("update magic wall") +
+              $t.t("update magic wall") +
-      //         $t.t("fail") +
+              $t.t("fail") +
-      //         "!",
+              "!",
-      //       position: "top",
+            position: "top",
-      //       timeout: 2500,
+            timeout: 2500,
-      //     });
+          });
-      //   }
+        }
-      // }
+      }
     };
     const radians = () => {
       const item = test_monitor_wall.value[current_index.value];
@@ -879,7 +979,6 @@ export default defineComponent({
         }
       }
     };
-    const max_angle = () => {};
     let Unchecked = ref(false);
     const moveingMonitor = (
       item: test_monitor,
@@ -973,6 +1072,15 @@ export default defineComponent({
         }
       }
     };
+    const activeMonitorList = (index: number) => {
+      monitor_list_current_index.value = index;
+      test_monitor_list.value[index].active = true;
+
+      test_monitor_list.value.forEach((element) => {
+        element.active = false;
+      });
+      test_monitor_list.value[index].active = true;
+    };
     let test_delete_flag = false;
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
       const wall_dom = wall.value;
@@ -994,16 +1102,20 @@ export default defineComponent({
       }
     });
     return {
+      filter_px,
+      activeMonitorList,
+      monitor_percenter,
+      monitor_proportion,
       output_length,
       multiple_select,
       multiple,
       exceedrange,
-      max_angle,
       four_point,
       show_dialog,
       loading,
       window_rect,
       Unchecked,
+      monitor_list_current_index,
       current_index,
       test_monitor_list,
       test_monitor_wall,
@@ -1183,6 +1295,7 @@ export default defineComponent({
         item.active = false;
         test_delete_flag = false;
         e.dataTransfer?.setData("item", JSON.stringify(item));
+        monitor_list_current_index.value = -1;
       },
       onDragOver(e: DragEvent) {
         e.preventDefault();
@@ -1215,8 +1328,12 @@ export default defineComponent({
           const wall_dom = wall.value;
           item.isShow = true;
           if (wall_dom) {
-            item.InitialH = wall_dom?.offsetHeight * item.resize;
+            if(wall_dom.offsetHeight*0.5<item.h){
-            item.InitialW = wall_dom?.offsetWidth * item.resize;
+                item.h=item.h*0.5;
+                item.w=item.w*0.5
+            }
+            item.InitialH = item.h;
+            item.InitialW = item.w;
             item.h = item.InitialH * percenter.value;
             item.w = item.InitialW * percenter.value;
             if (item.currentx > wall_dom?.offsetWidth - item.w) {
@@ -1262,6 +1379,7 @@ 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]))
         test_monitor_list.value[item.id].isHide = false;
         test_monitor_wall.value[index].isShow = false;
         multiple_select.value = [];
@@ -1269,7 +1387,9 @@ export default defineComponent({
       },
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;
-        let tep = JSON.parse(JSON.stringify(item));
+        test_monitor_wall.value.forEach((ele) => {
+            test_monitor_list.value[ele.id]=JSON.parse(JSON.stringify(ele));
+          });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
         });
@@ -1282,6 +1402,9 @@ 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));
+          });
         test_monitor_list.value.forEach((element) => {
           element.isHide = false;
         });
@@ -1295,16 +1418,22 @@ export default defineComponent({
         let tep = JSON.parse(
           JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
         );
-        return tep.w + "px";
+        return tep.startw + "px";
       },
       box_height(row: number, col: number) {
         let tep = JSON.parse(
           JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
         );
-        return tep.h + "px";
+        return tep.starth + "px";
+      },
+      box_line_height(row: number, col: number) {
+        let tep = JSON.parse(
+          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
+        );
+        return tep.starth*0.4 + "px";
       },
       show_box_line_height(height: number) {
-        return height * 0.5 + "px";
+        return height * 0.3 + "px";
       },
       center_x() {
         const wall_dom = wall.value;
@@ -1486,6 +1615,14 @@ export default defineComponent({
         });
         realtime_upload();
       },
+      changewidth(){
+
+      },
+      changeHeight(){
+
+      },
+
+
     };
   },
 });