魔墙：添加根据输出版设置显示器个数

src/components/ControlPanelDialog.vue

@@ -241,7 +241,7 @@
                     markers
                     switch-marker-labels-side
                     label-always
-                    :min="0.10"
+                    :min="0.1"
                     :max="2"
                     :step="0.05"
                   />
@@ -353,16 +353,13 @@
             <q-card-section horizontal>
               <q-list key="uuid" class="full-width">
                 <div
-                  v-for="item in Math.ceil(test_monitor_list.length / 4)"
+                  v-for="item in Math.ceil(output_length / 4)"
                   class="row justify-around"
                 >
                   <div
                     v-for="j in 4"
                     style="display: inline-block"
-                    v-if="
+                    v-if="item < output_length / 4 || output_length % 4 == 0"
-                      item < test_monitor_list.length / 4 ||
-                      test_monitor_list.length % 4 == 0
-                    "
                     :style="{ lineHeight: box_height(item, j) }"
                   >
                     <div
@@ -391,13 +388,14 @@
                       @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  }}
+                      W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
-                      H:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].h }}
+                        test_monitor_list[(item - 1) * 4 + (j - 1)].h
+                      }}
                     </div>
                   </div>
                   <div
                     v-else
-                    v-for="j in test_monitor_list.length % 4"
+                    v-for="j in output_length % 4"
                     style="display: inline-block; text-align: center"
                     :style="{ lineHeight: box_height(item, j) }"
                   >
@@ -422,8 +420,9 @@
                       @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  }}
+                      W:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].w }} H:{{
-                      H:{{ test_monitor_list[(item - 1) * 4 + (j - 1)].h }}
+                        test_monitor_list[(item - 1) * 4 + (j - 1)].h
+                      }}
                     </div>
                   </div>
                 </div>
@@ -589,13 +588,66 @@ export default defineComponent({
     const ah = 72;
     const bw = 160;
     const bh = 90;
+    const cw = 192;
+    const ch = 108;
     //调整与背景的百分比
     const percenter = ref(1);
     let last_percenter = ref(1);
+    const ar = 0.5;
+    const br = 0.6;
+    const cr = 0.7;
+    let test_monitor_list: Ref<test_monitor[]> = ref([
+      new test_monitor(0, "01", aw, ah, ar),
+      new test_monitor(1, "02", aw, ah, ar),
+      new test_monitor(2, "03", aw, ah, ar),
+      new test_monitor(3, "04", aw, ah, ar),
+      new test_monitor(4, "05", bw, bh, br),
+      new test_monitor(5, "06", bw, bh, br),
+      new test_monitor(6, "07", bw, bh, br),
+      new test_monitor(7, "08", bw, bh, br),
+      new test_monitor(8, "09", cw, ch, cr),
+      new test_monitor(9, "10", cw, ch, cr),
+      new test_monitor(10, "11", cw, ch, cr),
+      new test_monitor(11, "12", cw, ch, cr),
+      // new test_monitor(12, "13", cw, ch, cr)
+    ]);
+    interface show__Rect {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+      left: number;
+      top: number;
+      angle: number;
+    }
+    let showMonitor = reactive({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      active: false,
+    });
     const realtime_upload = async () => {
+      let client = GlobalData.getInstance().getCurrentClient();
       const settings = await GlobalData.getInstance()
         .getCurrentClient()
         ?.getOutputBoardSetting();
+      if (settings) {
+        output_length.value =
+          parseInt(settings.wall_col.toString()) *
+          parseInt(settings.wall_row.toString());
+        if (output_length.value > test_monitor_list.value.length) {
+          let num = output_length.value - test_monitor_list.value.length;
+          while (num > 0) {
+            let index = test_monitor_list.value.length;
+            let uuid = (index + 1).toString();
+            test_monitor_list.value.push(
+              new test_monitor(index, uuid, aw, ah, ar)
+            );
+            num--;
+          }
+        }
+      }
       const cloud_monitor_list = new MagicWallConfig();
       const wall_dom = wall.value;
       if (wall_dom && settings) {
@@ -622,53 +674,22 @@ export default defineComponent({
           }
         });
       }
-      let client = GlobalData.getInstance().getCurrentClient();
+      // 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: setMagic?.success ? "positive" : "negative",
+      //       icon: setMagic?.success ? "done" : "warning",
-            icon: setMagic?.success ? "done" : "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 ar = 0.5;
-    const br = 0.6;
-    let test_monitor_list: Ref<test_monitor[]> = ref([
-      new test_monitor(0, "01", aw, ah, ar),
-      new test_monitor(1, "02", aw, ah, ar),
-      new test_monitor(2, "03", aw, ah, ar),
-      new test_monitor(3, "04", aw, ah, ar),
-      new test_monitor(4, "05", bw, bh, br),
-      new test_monitor(5, "06", bw, bh, br),
-      new test_monitor(6, "07", bw, bh, br),
-      new test_monitor(7, "08", bw, bh, br),
-      // new test_monitor(8, "09", bw, bh, br),
-    ]);
-    const copy_monitor_list = test_monitor_list.value;
-    interface show__Rect {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-      left: number;
-      top: number;
-      angle: number;
-    }
-    let showMonitor = reactive({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      active: false,
-    });
     const radians = () => {
       const item = test_monitor_wall.value[current_index.value];
       return /*a*/ (item.angle * Math.PI) / 180;
@@ -729,7 +750,7 @@ export default defineComponent({
     };
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
     let last_wall: Ref<test_monitor[]> = ref([]);
-
+    let output_length = ref(0);
     let multiple_select: Ref<number[]> = ref([]);
     const set_x = () => {
       const wall_dom = wall.value;
@@ -973,6 +994,7 @@ export default defineComponent({
       }
     });
     return {
+      output_length,
       multiple_select,
       multiple,
       exceedrange,
@@ -999,15 +1021,46 @@ export default defineComponent({
       loga(a: any) {
         console.log(a);
       },
-
       async showDialog() {
         show_dialog.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
         if (client) {
+          const settings = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getOutputBoardSetting();
           const response = await client.getMagicWallConfig();
-          const a = response?.config.windows;
           const wall_dom = wall.value;
-          if (a && wall_dom) {
+          if (response && settings) {
+            const a = response?.config.windows;
+            output_length.value =
+              parseInt(settings.wall_col.toString()) *
+              parseInt(settings.wall_row.toString());
+            if (output_length.value > test_monitor_list.value.length) {
+              let num = output_length.value - test_monitor_list.value.length;
+              while (num > 0) {
+                let index = test_monitor_list.value.length;
+                let uuid = (index + 1).toString();
+                test_monitor_list.value.push(
+                  new test_monitor(index, uuid, aw, ah, ar)
+                );
+                num--;
+              }
+            }
+            if (
+              output_length.value !=
+              response.config.col * response.config.row
+            ) {
+              test_monitor_wall.value = [];
+              current_index.value = -1;
+              percenter.value = 1;
+              multiple_select.value = [];
+              multiple.value = false;
+              last_wall.value = [];
+              test_monitor_list.value.forEach((element) => {
+                element.isHide = false;
+              });
+              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]);
@@ -1040,6 +1093,7 @@ export default defineComponent({
               }
             }
           }
+        }
       },
       resetData() {
         test_monitor_wall.value = [];
@@ -1212,7 +1266,6 @@ export default defineComponent({
         test_monitor_wall.value[index].isShow = false;
         multiple_select.value = [];
         realtime_upload();
-
       },
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;