From e6fed227dcda046a7795976079d1e4116c0d7124 Mon Sep 17 00:00:00 2001
From: miao <2514145421@qq.com>
Date: Fri, 16 Dec 2022 14:59:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=9F=BA=E6=9C=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ControlPanelDialog.vue | 798 ++++++++++++++++----------
 src/entities/MagicWallConfig.ts       |   4 +-
 src/entities/RectF.ts                 |   3 +
 src/i18n/en-US/index.ts               |   3 +-
 src/i18n/zh-CN/index.ts               |   8 +-
 5 files changed, 492 insertions(+), 324 deletions(-)

diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue
index 3579af3..f00dd28 100644
--- a/src/components/ControlPanelDialog.vue
+++ b/src/components/ControlPanelDialog.vue
@@ -7,250 +7,230 @@
     }
   ">
     <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
-      <q-card-section class="q-ma-none q-pa-sm">
-        <div class="row">
-          <div class="col-auto text-h6">
-            {{ $t("magic wall") }}
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("magic wall") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn :loading="loading" flat round :disable="loading" icon="close" color="red" v-close-popup>
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
           </div>
-          <q-space />
-          <div>
-            <q-btn :loading="loading" flat round :disable="loading" icon="close" color="red" v-close-popup>
-              <q-tooltip>
-                {{ $t("close") }}
-              </q-tooltip>
-            </q-btn>
-          </div>
-        </div>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
-
-        <q-card class="my-card" flat bordered>
-          <q-card-section horizontal>
-            <q-card-section class="col-3" style="">
-              <div class="text-h5">{{ $t("angle") }}</div>
-              <q-separator />
-              <br />
-              <div class="row no-wrap items-center">
-                <q-item>
-                  <q-item-section avatar>
-                    <span class="q-mb-md" style="font-size:1rem"> angle:</span>
-                  </q-item-section>
-                  <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="">
-                      <template v-slot:append>
-                        <span class="input_append">°</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">°</span>
-                      </template>
-                    </q-input>
-                  </q-item-section>
-                </q-item>
-              </div>
-              <br />
-              <div class="text-h5">{{ $t("physical central location") }}</div>
-              <q-separator />
-              <br />
-              <div class="row no-wrap items-center">
-                <q-item>
-                  <q-item-section avatar>
-                    <span class="q-mb-md">X:</span>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-input v-if="(current_index > -1)" type="number" min="0"
-                      v-model="test_monitor_wall[current_index].currentx" :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>
-              </div>
-              <br />
-
-              <div class="row ">
-                <q-item>
-                  <q-item-section avatar>
-                    <span class="q-mb-md">Y:</span>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-input v-if="(current_index > -1)" :hint="''" type="number" min="0"
-                      v-model="test_monitor_wall[current_index].currenty" :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>
-                      <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>
-              </div>
-            </q-card-section>
-            <q-separator vertical></q-separator>
-
-            <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
-              style="max-height: 80vh; width: 55vw ; position: relative;">
-              <div class="text-h6">{{ $t("topology diagram") }}</div>
-              <div style="position: absolute;  height: 85%; width: 95%; text-align: center;"
-                :class="$store.state.power_state ? 'wall' : ''">
-                <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
-                  :class="(i % 2) == 0 ? 'wall_row' : ''">
-                  <div class="col" v-for="j in 8" :key="j">
-                    {{ (i * j) }}
-                  </div>
-                </div>
-              </div>
-              <div id="monitors" ref="wall" v-if="$store.state.power_state"
-                style="position: absolute;  height: 85%; width: 95%; overflow: hidden;">
-                <div v-for=" (item, index) of test_monitor_wall">
-                  <vue3-resize-drag v-if="((item.id < 4) && item.uuid != '')" :w="($refs.wall?.offsetWidth * 0.5)"
-                    :h="($refs.wall?.offsetHeight * 0.5)"
-                    :x="((item.currentx) > $refs.wall?.offsetWidth - item.w ? item.currenty - item.w : item.currentx)"
-                    :y="((item.currenty) > $refs.wall?.offsetHeight - item.h ? item.currenty - item.h : item.currenty)"
-                    :resizeIconSize="8" :isActive="item.active" :isGuide="(true && item.angle == 0)" :rotate="item.angle"
-                    style="background-color: grey; opacity: 0.8; text-align: center;position: absolute; "
-                    @moveHandler="moveingMonitor(item, $event)" @moveEndHandler="moveMonitor(item, $event)"
-                    @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
-                    :z-index="item.active ? 99 : 0">
-                    <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
-                      style="text-align:center;" :style="{ lineHeight: show_box_line_height($refs.wall?.offsetHeight) }">
-                      <q-popup-proxy context-menu>
-                        <q-list>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
-                            </q-item-section>
-                          </q-item>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeOtherWindows(item, index)">
-                              {{ $t("close other windows") }}
-                            </q-item-section>
-                          </q-item>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }} </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-popup-proxy>
-                      {{ item.uuid }}
-                    </div>
-                  </vue3-resize-drag>
-                  <vue3-resize-drag v-else-if="(item.id < 8 && item.uuid != '')" :w="($refs.wall?.offsetWidth * 0.6)"
-                    :h="($refs.wall?.offsetHeight * 0.6)"
-                    :x="((item.currentx) > $refs.wall?.offsetWidth - item.w ? item.currenty - item.w : item.currentx)"
-                    :y="((item.currenty) > $refs.wall?.offsetHeight - item.h ? item.currenty - item.h : item.currenty)"
-                    :resizeIconSize="8" :isActive="item.active" :isGuide="(true && item.angle == 0)" :rotate="item.angle"
-                    style="background-color: grey; opacity: 0.8; text-align: center;position: absolute;"
-                    @moveHandler="moveingMonitor(item, $event)" @moveEndHandler="moveMonitor(item, $event)"
-                    @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
-                    :z-index="item.active ? 99 : 0">
-                    <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
-                      style="text-align:center;" :style="{ lineHeight: show_box_line_height($refs.wall?.offsetHeight) }">
-                      <q-popup-proxy context-menu>
-                        <q-list>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
-                            </q-item-section>
-                          </q-item>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeOtherWindows(item, index)">
-                              {{ $t("close other windows") }}
-                            </q-item-section>
-                          </q-item>
-                          <q-item clickable v-close-popup>
-                            <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }} </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-popup-proxy>
-                      {{ item.uuid }}
-                    </div>
-                  </vue3-resize-drag>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card-section>
-        </q-card>
-        <br />
-        <q-card class="my-card" flat bordered>
-          <q-item>
-            <q-item-section>
-              <q-item-label class="text-h6">{{ $t("monitors list") }}</q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-separator></q-separator>
-          <q-card-section horizontal>
-            <q-list key="uuid" class=" full-width">
-              <div v-for="item in (Math.ceil(test_monitor_list.length / 4))">
-                <div v-for="(j) in 4" style="display:inline-block"
-                  v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
-                  :style="{ lineHeight: box_height(item, j) }">
-                  <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)] == ''">
-
-                  </div>
-                  <div v-else style="background-color: grey; opacity: 0.5; border: 1px solid black;text-align: center;"
-                    :style="{ width: box_width(item, j), height: box_height(item, j) }" :draggable="$store.state.power_state"
-                    @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
-                    @dragend="(evt) => onDragend(evt, item, j)">
-                    {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
-                  </div>
-                </div>
-                <div v-else v-for="j in (test_monitor_list.length) % 4" style="display:inline-block;text-align: center;"
-                  :style="{ lineHeight: box_height(item, j) }">
-                  <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)] == ''">
-
-                  </div>
-                  <div v-else style="background-color: grey; opacity: 0.5; border: 1px solid black;"
-                    :style="{ width: box_width(item, j), height: box_height(item, j) }" :draggable="$store.state.power_state"
-                    @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
-                    @dragend="(evt) => onDragend(evt, item, j)">
-                    {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
-                  </div>
-                </div>
-              </div>
-
-            </q-list>
-          </q-card-section>
-        </q-card>
+        </q-card-section>
 
         <q-separator />
 
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn :loading="loading" flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
-        <q-btn ref="accept" flat :label="$t('Accept')" no-caps :loading="loading" type="submit" color="primary" />
-      </q-card-actions>
+        <q-card-section style="max-height: 80vh; width: 55vw" class="scroll">
+
+          <q-card class="my-card" flat bordered>
+            <q-card-section horizontal>
+              <q-card-section class="col-3" style="">
+                <div class="text-h5">{{ $t("angle") }}</div>
+                <q-separator />
+                <br />
+                <div class="row no-wrap items-center">
+                  <q-item>
+                    <q-item-section avatar>
+                      <span class="q-mb-md" style="font-size:1rem"> angle:</span>
+                    </q-item-section>
+                    <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="">
+                        <template v-slot:append>
+                          <span class="input_append">°</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">°</span>
+                        </template>
+                      </q-input>
+                    </q-item-section>
+                  </q-item>
+                </div>
+                <br />
+                <div class="text-h5">{{ $t("physical central location") }}</div>
+                <q-separator />
+                <br />
+                <div class="row no-wrap items-center">
+                  <q-item>
+                    <q-item-section avatar>
+                      <span class="q-mb-md">X:</span>
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input v-if="(current_index > -1)" type="number" :min="min_x()"
+                        v-model="test_monitor_wall[current_index].centerx" 
+                        @update:model-value="center_x()"
+                        :max="max_x()"
+                        :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>
+                </div>
+                <br />
+
+                <div class="row ">
+                  <q-item>
+                    <q-item-section avatar>
+                      <span class="q-mb-md">Y:</span>
+                    </q-item-section>
+                    <q-item-section>
+                      <q-input v-if="(current_index > -1)" :hint="''" type="number" :min="min_y()" :max="max_y()"
+                        v-model="test_monitor_wall[current_index].centery" 
+                        @update:model-value="center_y()"
+                        :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>
+                        <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>
+                </div>
+              </q-card-section>
+              <q-separator vertical></q-separator>
+
+              <q-card-section @dragenter="onDragEnter" @dragleave="onDragLeave" @dragover="onDragOver" @drop="onDrop"
+                style="max-height: 80vh; width: 55vw ; position: relative;">
+                <div class="text-h6">{{ $t("topology diagram") }}</div>
+                <div style="position: absolute;  height: 85%; width: 95%; text-align: center;"
+                  :class="$store.state.power_state ? 'wall' : ''"  >
+                  <div class="row" v-for="i in (64 / 8)" :key="i" style="height:12.5%;align-items: center;"
+                    :class="(i % 2) == 0 ? 'wall_row' : ''">
+                    <div class="col" v-for="j in 8" :key="j">
+                      {{ (i * j) }}
+                    </div>
+                  </div>
+                </div>
+                <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())"
+                      :y="parseInt(item.currenty.toString())"
+                      :isActive="item.active" :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)"
+                      @mousedown="activeMouseDown(item, index)" @rotateHandler="rotateMonitor(item, $event)"
+                      :z-index="item.active ? 99 : 0">
+                      <div class="full-height full-width" :class="item.active ? 'monitor_selected' : ''"
+                        style="text-align:center;"
+                        :style="{ lineHeight: show_box_line_height(item.h) }">
+                        <q-popup-proxy context-menu>
+                          <q-list>
+                            <q-item clickable v-close-popup>
+                              <q-item-section @click="closeWindow(item, index)"> {{ $t("close this window") }}
+                              </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup>
+                              <q-item-section @click="closeOtherWindows(item, index)">
+                                {{ $t("close other windows") }}
+                              </q-item-section>
+                            </q-item>
+                            <q-item clickable v-close-popup>
+                              <q-item-section @click="closeAllWindows()"> {{ $t("close all windows") }}
+                              </q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-popup-proxy>
+                        {{ item.uuid }}
+                      </div>
+                    </vue3-resize-drag>
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card-section>
+          </q-card>
+          <br />
+          <q-card class="my-card" flat bordered>
+            <q-item>
+              <q-item-section>
+                <q-item-label class="text-h6">{{ $t("monitors list") }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-separator></q-separator>
+            <q-card-section horizontal>
+              <q-list key="uuid" class=" full-width">
+                <div v-for="item in (Math.ceil(test_monitor_list.length / 4))">
+                  <div v-for="(j) in 4" style="display:inline-block"
+                    v-if="(item < test_monitor_list.length / 4 || (test_monitor_list.length % 4 == 0))"
+                    :style="{ lineHeight: box_height(item, j) }">
+                    <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
+
+                    </div>
+                    <div v-else style="background-color: grey; border: 1px solid black;text-align: center;"
+                      :style="{ width: box_width(item, j), height: box_height(item, j) }"
+                      :draggable="$store.state.power_state"
+                      @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                      @dragend="(evt) => onDragend(evt, item, j)">
+                      {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                    </div>
+                  </div>
+                  <div v-else v-for="j in (test_monitor_list.length) % 4"
+                    style="display:inline-block;text-align: center;" :style="{ lineHeight: box_height(item, j) }">
+                    <div v-if="test_monitor_list[(item - 1) * 4 + (j - 1)].isHide">
+
+                    </div>
+                    <div v-else style="background-color: grey;  border: 1px solid black;"
+                      :style="{ width: box_width(item, j), height: box_height(item, j) }"
+                      :draggable="$store.state.power_state"
+                      @dragstart="(evt) => onDragStart(evt, (test_monitor_list[(item - 1) * 4 + (j - 1)]))"
+                      @dragend="(evt) => onDragend(evt, item, j)">
+                      {{ (test_monitor_list[(item - 1) * 4 + (j - 1)].uuid) }}
+                    </div>
+                  </div>
+                </div>
+
+              </q-list>
+            </q-card-section>
+          </q-card>
+
+          <q-separator />
+
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn :loading="loading" flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
+          <q-btn ref="accept" flat :label="$t('Accept')" no-caps :loading="loading" type="submit" color="primary" />
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
@@ -278,13 +258,16 @@
 <script lang="ts">
 import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
 import { useStore } from "src/store";
-import { useQuasar, extend } from "quasar";
+import { useQuasar, extend, QBtn, QCard, QCardActions, QCardSection, QDialog, QInput, QItem, QItemLabel, QItemSection, QList, QPopupProxy, QSeparator, QSpace, QTooltip } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import { HttpProtocol } from "src/entities/HttpProtocol";
 import vue3ResizeDrag from "../third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
 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";
 class test_monitor {
   uuid = "";
   active = false;
@@ -294,8 +277,13 @@ class test_monitor {
   h = 0;
   currentx = 0;
   currenty = 0;
+  centerx=0;
+  centery=0;
   angle = 0;
   id = 0;
+  resize = 0;
+  isHide = false;
+  isShow = false;
   reset() {
     this.uuid = "";
     this.active = false;
@@ -305,8 +293,21 @@ class test_monitor {
     this.h = 0;
     this.currentx = 0;
     this.currenty = 0;
+    this.centerx=0;
+    this.centery=0;
     this.angle = 0;
     this.id = 0;
+    this.isHide = false;//列表隐藏
+    this.isShow = false;//墙显示
+    this.resize = 0;
+  }
+  constructor(id: number, uuid: string, w: number, h: number, resize: number) {
+    this.reset();
+    this.id = id;
+    this.uuid = uuid;
+    this.w = w;
+    this.h = h;
+    this.resize = resize;
   }
 }
 
@@ -320,8 +321,6 @@ export default defineComponent({
 
     let show_dialog = ref(false);
     let loading = ref(false);
-    let upload_url = ref("");
-    let file_count = ref(0);
     let show_windows_flag = ref(true); // 用于刷新 window 坐标
     let wall: Ref<HTMLElement | null> = ref(null);
     let current_index = ref(-1);
@@ -335,17 +334,19 @@ export default defineComponent({
 
     const aw = 128; const ah = 72;
     const bw = 160; const bh = 90;
-    let test_monitor_list: Ref<Object[]> = ref([
-      { id: 0, uuid: "01", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
-      { id: 1, uuid: "02", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
-      { id: 2, uuid: "03", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
-      { id: 3, uuid: "04", active: false, start_x: 0, start_y: 0, w: aw, h: ah },
-      { id: 4, uuid: "05", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
-      { id: 5, uuid: "06", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
-      { id: 6, uuid: "07", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
-      { id: 7, uuid: "08", active: false, start_x: 0, start_y: 0, w: bw, h: bh },
+    const ar = 0.2; 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 delete_monitor_list: Ref<test_monitor[]> = ref([]);
+    const copy_monitor_list = test_monitor_list.value;
     interface show__Rect {
       width: number;
       height: number;
@@ -362,100 +363,226 @@ export default defineComponent({
       width: 0,
       height: 0,
       active: false
-    })
+    });
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
-    const moveingMonitor = (item: test_monitor, rect: show__Rect) => {
+    const set_x=()=>{
+        const wall_dom = wall.value
+        const item = test_monitor_wall.value[current_index.value]
+        const rx: number = item.currentx + item.w;
+        if (wall_dom) {
+          if (rx > wall_dom.offsetWidth) {
+            item.currentx = Math.round(wall_dom.offsetWidth - item.w)
+            return parseInt(item.currentx.toString());
+          }else{
+            return item.currentx
+          }
+        }
+        
+    };
+    const min_x=()=>{
+      const wall_dom = wall.value
+      const item = test_monitor_wall.value[current_index.value]
+        if (wall_dom) {
+          return Math.floor(item.w/2)
+        }
+    };
+    const max_x=()=>{
+      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)
+        }
+    };
+    const set_y=()=>{
+       //输入框正向溢出
+        const wall_dom = wall.value
+        const item = test_monitor_wall.value[current_index.value]
+        const ry: number = item.currenty + item.h;
+        if (wall_dom) {
+          if (ry > wall_dom.offsetHeight) {
+            item.currenty = Math.round(wall_dom.offsetHeight - item.h)
+            return parseInt(item.currenty.toString());
+          }else{
+            return parseInt(item.currenty.toString());
+          }
+        }
+        
+    };
+    const min_y=()=>{
+      const wall_dom = wall.value
+        const item = test_monitor_wall.value[current_index.value]
+        if (wall_dom) {
+          return Math.floor(item.h/2)
+        }
+    };
+    const max_y=()=>{
+        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)
+        }
+    };
+    let Unchecked=ref(false);
+    const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => {
       if (item.active) {
         test_monitor_wall.value.forEach(element => {
           element.active = false
         });
       }
-      item.active = true;
-      if (rect.left > 0) {
-        item.currentx = rect.left;
+      const wall_dom = wall.value
+      if (wall_dom) {
+        item.h = wall_dom.offsetHeight * item.resize;
+        item.w = wall_dom.offsetWidth * item.resize;
       }
-      if (rect.top > 0) {
-        item.currenty = rect.top;
+      item.active = true;
+      item.currentx = parseInt(rect.left.toString())
+      item.currenty = parseInt(rect.top.toString())
+      item.centerx=Math.round(item.currentx+item.w/2)
+      item.centery=Math.round(item.currenty+item.h/2)
+      if (Number.isNaN(rect.left || rect.left < 0)) {
+        item.currentx = 0
       }
     };
     const rotateMonitor = (item: test_monitor, rect: show__Rect) => {
-      item.angle = rect.angle;
     };
     const moveMonitor = (item: test_monitor, rect: show__Rect) => {
-      let test = JSON.stringify(rect)
       //计算是否超出，然后放回
-      //负方向
+      const wall_dom = wall.value
       if (rect.left < 0) {
-        if (item.currentx == 0) {
-          item.currentx = 0.1
-        } else {
-          item.currentx = 0
-        }
-
-      } else {
-        item.currentx = rect.left
+        item.currentx = 0
+      } else if(wall_dom&&rect.left>wall_dom.offsetWidth-item.w) {
+        item.currentx =set_x()??0;
+      }else{
+        item.currentx = parseInt(rect.left.toString())
       }
       if (rect.top < 0) {
-        if (item.currenty == 0) {
-          item.currenty = 0.1
-        } else {
-          item.currenty = 0
-        }
-      } else {
-        item.currenty = rect.top
+        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.centerx=Math.floor(item.currentx+item.w/2)
+      item.centery=Math.floor(item.currenty+item.h/2)
     };
     let test_delete_flag = false;
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      const wall_dom = wall.value
+      if (wall_dom) {
+        test_monitor_wall.value.forEach((element) => {
+          element.h = wall_dom.offsetHeight * element.resize;
+          element.w = wall_dom.offsetWidth * element.resize;
+        })
+      }
+    });
     return {
       show_dialog,
       loading,
-      upload_url,
-      delete_monitor_list,
-      file_count,
       window_rect,
+      Unchecked,
       current_index,
       test_monitor_list,
       test_monitor_wall,
+      wall,
+      set_x,
+      min_x,
+      max_x,
+      set_y,
+      min_y,
+      max_y,
       moveMonitor,
       moveingMonitor,
       rotateMonitor,
       loga(a: any) {
         console.log(a);
       },
-      aaa(x: any) {
-        console.log(x)
-      },
-      showDialog() {
+      async showDialog() {
         show_dialog.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
         if (client) {
-          let url = new URL(client.url);
-          url.port =
-            GlobalData.getInstance().applicationConfig?.httpserver_port ??
-            HttpProtocol.DefaultHttpPort.toString();
-          url.pathname = HttpProtocol.RequestUploadFile;
-          url.protocol = "http:";
-          url.searchParams.append(
-            "type",
-            HttpProtocol.UploadTypeBackgroundImage
-          );
-          upload_url.value = url.toString();
+          const response = await client.getMagicWallConfig()
+          const a = response?.config.windows;
+          const wall_dom = wall.value
+          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.currenty = Math.round(element.lt.y * wall_dom.offsetHeight);
+              item.h = wall_dom.offsetHeight * element.h;
+              item.w = wall_dom.offsetWidth * element.w;
+              item.centerx=Math.floor(item.currentx+item.w/2);
+              item.centery=Math.floor(item.currenty+item.h/2);
+              item.angle = element.angle
+              item.isShow = true;
+              test_monitor_wall.value.push(item);
+              test_monitor_list.value.forEach((ele) => {
+                if (element.index == ele.id) {
+                  ele.isHide = true;
+                }
+              })
+            })
+            if (a.length == 1) {
+              current_index.value = 0
+            } else {
+              current_index.value = -1
+            }
+
+          }
         }
       },
       resetData() {
+        test_monitor_wall.value = [];
+        current_index.value = -1;
+        test_monitor_list.value.forEach(element => {
+          element.isHide = false;
+        })
         loading.value = false;
-        upload_url.value = "";
-        file_count.value = 0;
       },
+      async onSubmit() {
+        loading.value = true;
+        let client = GlobalData.getInstance().getCurrentClient();
+        const wall_dom = wall.value
+        if (client && wall_dom) {
+          const response = await client.getMagicWallConfig();
+          const cloud_monitor_list = new MagicWallConfig();
+          cloud_monitor_list.magic_wall_enable = response?.config.magic_wall_enable ?? true;
+          cloud_monitor_list.col = response?.config.col ?? 2;
+          cloud_monitor_list.row = response?.config.row ?? 2;
+          let tep_width = 0;
+          test_monitor_wall.value.forEach((element, index) => {
+            if (element.isShow) {
+              cloud_monitor_list.windows.push({
+                index: element.id, lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight), h: element.h / wall_dom.offsetHeight, w: element.w / wall_dom.offsetWidth, angle: parseInt(element.angle.toString())
+              })
+            }
+          });
+          const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+          $q.notify({
+            color: setMagic?.success ? "positive" : "negative",
+            icon: setMagic?.success ? "done" : "warning",
+            message:
+              $t.t("set magic wall") +
+              (setMagic?.success ? $t.t("success") : $t.t("fail")) +
+              "!",
+            position: "top",
+            timeout: 2500,
+          });
+          show_dialog.value = false;
+        }
+        loading.value = false;
 
+      },
       activeMouseDown(item: test_monitor, index: number) {
-        current_index.value = index;
+        item.active = true;
+        Unchecked.value=false;
         if (item.active) {
           test_monitor_wall.value.forEach(element => {
             element.active = false
           });
         }
         item.active = true;
+        current_index.value = index;
       },
       onDragStart(e: DragEvent, item: test_monitor) {
         item.start_x = e.offsetX;
@@ -481,22 +608,38 @@ export default defineComponent({
             });
           }
           if (item.currentx < 0) {
-            item.currentx = 0.1
+            item.currentx = 0
             window_rect.x = 0
           } else {
             window_rect.x = item.currentx
           }
           if (item.currenty < 0) {
-            item.currenty = 0.1
+            item.currenty = 0
             window_rect.y = 0
           } else {
             window_rect.y = item.currenty
           }
           test_delete_flag = false;
+          const wall_dom = wall.value
+          item.isShow = true;
+          if (wall_dom) {
+            item.h = wall_dom?.offsetHeight * item.resize;
+            item.w = wall_dom?.offsetWidth * item.resize;
+            if(item.currentx> wall_dom?.offsetWidth-item.w){
+              item.currentx=Math.round(wall_dom?.offsetWidth-item.w)
+            }
+            if(item.currenty> wall_dom?.offsetHeight-item.h){
+              item.currenty=Math.round(wall_dom?.offsetHeight-item.h)
+            }
+            item.centerx=Math.round(item.currentx+item.w/2);
+            item.centery=Math.round(item.currenty+item.h/2);
+          }
+          
           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
         }
 
       },
@@ -517,7 +660,7 @@ export default defineComponent({
       onDragend(e: DragEvent, row: number, col: number) {
         let num = (row - 1) * 4 + (col - 1);
         if (test_delete_flag) {
-          test_monitor_list.value[num] = ""
+          test_monitor_list.value[num].isHide = true
         }
       },
       onDragLeave(e: DragEvent) {
@@ -526,27 +669,29 @@ export default defineComponent({
       },
       closeWindow(item: test_monitor, index: number) {
         current_index.value = -1;
-        test_monitor_list.value[item.id] = item;
-        test_monitor_wall.value[index] = new test_monitor;
-
+        test_monitor_list.value[item.id].isHide = false;
+        test_monitor_wall.value[index].isShow = false;
       },
       closeOtherWindows(item: test_monitor, index: number) {
-        current_index.value = 0;
+        current_index.value = index;
         let tep = JSON.parse(JSON.stringify(item));
-        delete_monitor_list.value = test_monitor_wall.value;
-        delete_monitor_list.value.forEach(element => {
-          test_monitor_list.value[element.id] = element
+        test_monitor_list.value.forEach(element => {
+          element.isHide = false;
         })
-        test_monitor_list.value[item.id] = []
-        test_monitor_wall.value = [tep,];
+        test_monitor_wall.value.forEach(element => {
+          element.isShow = false;
+        })
+        test_monitor_list.value[item.id].isHide = true;
+        test_monitor_wall.value[index].isShow = true;
       },
       closeAllWindows() {
         current_index.value = -1;
-        delete_monitor_list.value = test_monitor_wall.value;
-        delete_monitor_list.value.forEach(element => {
-          test_monitor_list.value[element.id] = element
+        test_monitor_list.value.forEach(element => {
+          element.isHide = false;
+        })
+        test_monitor_wall.value.forEach(element => {
+          element.isShow = false;
         })
-        test_monitor_wall.value = [];
       },
       box_width(row: number, col: number) {
         let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
@@ -558,7 +703,26 @@ export default defineComponent({
       },
       show_box_line_height(height: number) {
         return height * 0.5 + "px"
-      }
+      },
+      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);
+      },
+      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);
+      },
+      canel_active(){
+        Unchecked.value=true;
+        if(Unchecked){
+          current_index.value=-1
+          test_monitor_wall.value.forEach((element)=>{
+            element.active=false;
+          })
+        }
+      },
     };
   },
 });
diff --git a/src/entities/MagicWallConfig.ts b/src/entities/MagicWallConfig.ts
index 8917983..da169c6 100644
--- a/src/entities/MagicWallConfig.ts
+++ b/src/entities/MagicWallConfig.ts
@@ -1,8 +1,8 @@
-import RotatedRectF from "./RectF";
+import RotatedRectF, { RotatedRectFWithIndex } from "./RectF";
 
 export default class MagicWallConfig {
   magic_wall_enable = false;
   row = 0;
   col = 0;
-  windows: RotatedRectF[] = [];
+  windows: RotatedRectFWithIndex[] = [];
 }
diff --git a/src/entities/RectF.ts b/src/entities/RectF.ts
index d84612e..4f854ca 100644
--- a/src/entities/RectF.ts
+++ b/src/entities/RectF.ts
@@ -32,3 +32,6 @@ export class RotatedRectF extends RectF {
     this.angle = angle;
   }
 }
+export class RotatedRectFWithIndex extends RotatedRectF{
+  index:number=0;
+}
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 67747fc..ba6af99 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -401,9 +401,10 @@ export default {
   "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
     "Please Input Vaild Host. Example: 192.168.1.1 or 192.168.1.1:8080",
   "equipment data": "Equipment Data",
+  "set magic wall":"Set Magic wall Success",
   "magic wall":"Magic Wall",
   "angle":"Angle",
   "topology diagram":"Topology Diagram",
   "physical central location":"Central Location",
-  "monitors list":"Monitors List",  
+  "monitors list":"Monitors List",
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 378f89d..f12e43d 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -668,12 +668,12 @@ export default {
   "new password": "新密码",
   "edit user or password": "修改用户名和密码",
   "old password error": "旧密码不匹配",
-
+  "set magic wall":"设置魔墙",
   "magic wall":"魔墙",
   "angle":"角度",
-  "topology diagram":"拓扑图", 
-  "physical central location":"物理中心位置", 
-  "monitors list":"显示器", 
+  "topology diagram":"拓扑图",
+  "physical central location":"物理中心位置",
+  "monitors list":"显示器",
   "Please input vaild host. example: 192.168.1.1 or 192.168.1.1:8080":
     "请输入合法地址. 例: 192.168.1.1 或 192.168.1.1:8080",
   "equipment data": "联动设备",