From 330c8a205e9074ba8d383e61c7ab886df0f99a0b Mon Sep 17 00:00:00 2001
From: miao <2514145421@qq.com>
Date: Wed, 28 Dec 2022 10:48:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AD=94=E5=A2=99=EF=BC=9A=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8D=95=E4=B8=AA=E5=8F=AF=E9=94=AE=E7=9B=98=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ControlPanelDialog.vue | 617 +++++++++++++++-----------
 src/pages/TopToolBar.vue              |   4 -
 2 files changed, 354 insertions(+), 267 deletions(-)

diff --git a/src/components/ControlPanelDialog.vue b/src/components/ControlPanelDialog.vue
index 2b37e8d..31702a2 100644
--- a/src/components/ControlPanelDialog.vue
+++ b/src/components/ControlPanelDialog.vue
@@ -8,7 +8,20 @@
         if (!loading && evt.keyCode == 27) {
           show_dialog = false;
         }
+        if(evt.keyCode == 37){//左
+          sub_x();
+        }
+        if(evt.keyCode==38){//上
+          add_y();
+        }
+        if(evt.keyCode==39){//右
+          add_x();
+        }
+        if(evt.keyCode==40){//下
+          sub_y();
+        }
       }
+
     "
   >
     <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
@@ -434,7 +447,24 @@
 <script lang="ts">
 import { defineComponent, ref, watch, computed, Ref, reactive } from "vue";
 import { useStore } from "src/store";
-import { useQuasar, extend, QBtn, QCard, QCardActions, QCardSection, QDialog, QInput, QItem, QItemLabel, QItemSection, QList, QPopupProxy, QSeparator, QSpace, QTooltip } 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";
@@ -475,8 +505,8 @@ class test_monitor {
     this.centery = 0;
     this.angle = 0;
     this.id = 0;
-    this.isHide = false;//列表隐藏
-    this.isShow = false;//墙显示
+    this.isHide = false; //列表隐藏
+    this.isShow = false; //墙显示
     this.resize = 0;
     this.InitialW = 0;
     this.InitialW = 0;
@@ -512,8 +542,10 @@ export default defineComponent({
       angle: 0,
     });
 
-    const aw = 128; const ah = 72;
-    const bw = 160; const bh = 90;
+    const aw = 128;
+    const ah = 72;
+    const bw = 160;
+    const bh = 90;
     //调整与背景的百分比
     const percenter = ref(1);
     const ar = 0.5;
@@ -538,291 +570,323 @@ export default defineComponent({
       left: number;
       top: number;
       angle: number;
-    };
+    }
     let showMonitor = reactive({
       x: 0,
       y: 0,
       width: 0,
       height: 0,
-      active: false
+      active: false,
     });
     const radians = () => {
-      const item = test_monitor_wall.value[current_index.value]
+      const item = test_monitor_wall.value[current_index.value];
       return /*a*/ (item.angle * Math.PI) / 180;
     };
-   const calculateCoordinates=(px:number,py:number, cx:number,cy:number) =>{
-      const x =cx+(px-cx)*Math.cos(radians())-(py - cy) * Math.sin(radians());
+    const calculateCoordinates = (
+      px: number,
+      py: number,
+      cx: number,
+      cy: number
+    ) => {
+      const x =
+        cx + (px - cx) * Math.cos(radians()) - (py - cy) * Math.sin(radians());
 
-      const y =cy+(px-cx)*Math.sin(radians())+(py - cy) * Math.cos(radians());
+      const y =
+        cy + (px - cx) * Math.sin(radians()) + (py - cy) * Math.cos(radians());
 
       return { x, y };
     };
-    const four_point=()=>{
-      const item = test_monitor_wall.value[current_index.value]
-      item.centerx = parseInt(item.centerx.toString())
-      item.centery = parseInt(item.centery.toString())
+    const four_point = () => {
+      const item = test_monitor_wall.value[current_index.value];
+      item.centerx = parseInt(item.centerx.toString());
+      item.centery = parseInt(item.centery.toString());
       const x2: number = item.currentx + item.w;
       const y2: number = item.currenty + item.h;
-          if(item.angle!=0){
-              const point_left_top=calculateCoordinates(item.currentx,item.currenty,item.centerx,item.centery);
-              const point_left_bootom=calculateCoordinates(item.currentx,y2,item.centerx,item.centery);
-              const point_right_top=calculateCoordinates(x2,item.currenty,item.centerx,item.centery);
-              const point_right_bottom=calculateCoordinates(x2,y2,item.centerx,item.centery);
-              const point_list=[point_left_top,point_left_bootom,point_right_top,point_right_bottom];
-              return point_list;
-          }
+      if (item.angle != 0) {
+        const point_left_top = calculateCoordinates(
+          item.currentx,
+          item.currenty,
+          item.centerx,
+          item.centery
+        );
+        const point_left_bootom = calculateCoordinates(
+          item.currentx,
+          y2,
+          item.centerx,
+          item.centery
+        );
+        const point_right_top = calculateCoordinates(
+          x2,
+          item.currenty,
+          item.centerx,
+          item.centery
+        );
+        const point_right_bottom = calculateCoordinates(
+          x2,
+          y2,
+          item.centerx,
+          item.centery
+        );
+        const point_list = [
+          point_left_top,
+          point_left_bootom,
+          point_right_top,
+          point_right_bottom,
+        ];
+        return point_list;
+      }
     };
     let test_monitor_wall: Ref<test_monitor[]> = ref([]);
     const set_x = () => {
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
+      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 = wall_dom.offsetWidth - item.w
+          item.currentx = wall_dom.offsetWidth - item.w;
           return item.currentx;
         } else {
           return item.currentx;
         }
-    }
+      }
     };
     const min_x = () => {
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
-      const point_list=four_point();
+      const wall_dom = wall.value;
+      const item = test_monitor_wall.value[current_index.value];
+      const point_list = four_point();
       if (wall_dom) {
-        if(item.angle!=0&&point_list){
-          let minx=0;
-          point_list.forEach((element)=>{
-            if(minx>element.x){
-              minx=element.x;
+        if (item.angle != 0 && point_list) {
+          let minx = 0;
+          point_list.forEach((element) => {
+            if (minx > element.x) {
+              minx = element.x;
             }
-          })
-          if(minx<0){
-            return Math.floor(item.w/2+item.currentx+Math.abs(minx))
-          }else {
-          return Math.floor(item.w / 2)
+          });
+          if (minx < 0) {
+            return Math.floor(item.w / 2 + item.currentx + Math.abs(minx));
+          } else {
+            return Math.floor(item.w / 2);
           }
-        }else{
-          return Math.floor(item.w / 2)
+        } else {
+          return Math.floor(item.w / 2);
         }
-
       }
     };
     const max_x = () => {
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
-      const point_list=four_point();
+      const wall_dom = wall.value;
+      const item = test_monitor_wall.value[current_index.value];
+      const point_list = four_point();
       if (wall_dom) {
-        if(item.angle!=0&&point_list){
-          let maxx=0;
-          point_list.forEach((element)=>{
-            if(maxx<element.x){
-              maxx=element.x;
+        if (item.angle != 0 && point_list) {
+          let maxx = 0;
+          point_list.forEach((element) => {
+            if (maxx < element.x) {
+              maxx = element.x;
             }
-          })
-          if(maxx>wall_dom.offsetWidth){
-            return Math.floor(item.currentx+item.w/2-(maxx-wall_dom.offsetWidth))
-          }else{
-          return Math.floor(wall_dom.offsetWidth - item.w / 2)
+          });
+          if (maxx > wall_dom.offsetWidth) {
+            return Math.floor(
+              item.currentx + item.w / 2 - (maxx - wall_dom.offsetWidth)
+            );
+          } else {
+            return Math.floor(wall_dom.offsetWidth - item.w / 2);
           }
-        }else{
-          return Math.floor(wall_dom.offsetWidth - item.w / 2)
+        } else {
+          return Math.floor(wall_dom.offsetWidth - item.w / 2);
         }
       }
     };
     const set_y = () => {
       //输入框正向溢出
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
+      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 = wall_dom.offsetHeight - item.h
-            return item.currenty;
-          } else {
-            return item.currenty;
+        if (ry > wall_dom.offsetHeight) {
+          item.currenty = wall_dom.offsetHeight - item.h;
+          return item.currenty;
+        } else {
+          return item.currenty;
         }
       }
-
     };
     const min_y = () => {
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
-      const point_list=four_point();
+      const wall_dom = wall.value;
+      const item = test_monitor_wall.value[current_index.value];
+      const point_list = four_point();
       if (wall_dom) {
-        if(item.angle!=0&&point_list){
-          let miny=0;
-          point_list.forEach((element)=>{
-            if(miny>element.y){
-              miny=element.y;
+        if (item.angle != 0 && point_list) {
+          let miny = 0;
+          point_list.forEach((element) => {
+            if (miny > element.y) {
+              miny = element.y;
             }
-          })
-          if(miny<0){
-            return Math.floor(item.h/2+item.currenty+Math.abs(miny))
-          }else{
-            return Math.floor(item.h / 2)
+          });
+          if (miny < 0) {
+            return Math.floor(item.h / 2 + item.currenty + Math.abs(miny));
+          } else {
+            return Math.floor(item.h / 2);
           }
-        }else{
-            return Math.floor(item.h / 2)
-
+        } else {
+          return Math.floor(item.h / 2);
         }
       }
     };
     const max_y = () => {
-      const wall_dom = wall.value
-      const item = test_monitor_wall.value[current_index.value]
-      const point_list=four_point();
+      const wall_dom = wall.value;
+      const item = test_monitor_wall.value[current_index.value];
+      const point_list = four_point();
       if (wall_dom) {
-        if(item.angle!=0&&point_list){
-          let maxy=0;
-          point_list.forEach((element)=>{
-            if(maxy<element.y){
-              maxy=element.y;
+        if (item.angle != 0 && point_list) {
+          let maxy = 0;
+          point_list.forEach((element) => {
+            if (maxy < element.y) {
+              maxy = element.y;
             }
-          })
-          if(maxy>wall_dom.offsetHeight){
-            return Math.floor(item.currenty+item.h/2-(maxy-wall_dom.offsetHeight))
-          }else{
-            return Math.floor(wall_dom.offsetHeight - item.h / 2)
+          });
+          if (maxy > wall_dom.offsetHeight) {
+            return Math.floor(
+              item.currenty + item.h / 2 - (maxy - wall_dom.offsetHeight)
+            );
+          } else {
+            return Math.floor(wall_dom.offsetHeight - item.h / 2);
           }
-        }else{
-            return Math.floor(wall_dom.offsetHeight - item.h / 2)
+        } else {
+          return Math.floor(wall_dom.offsetHeight - item.h / 2);
         }
       }
     };
-    const max_angle=()=>{
-
-    };
+    const max_angle = () => {};
     let Unchecked = ref(false);
-    const moveingMonitor = (item: test_monitor, rect: show__Rect, index: number) => {
+    const moveingMonitor = (
+      item: test_monitor,
+      rect: show__Rect,
+      index: number
+    ) => {
       item.active = true;
       if (item.active) {
-        test_monitor_wall.value.forEach(element => {
-          element.active = false
+        test_monitor_wall.value.forEach((element) => {
+          element.active = false;
         });
       }
-      const wall_dom = wall.value
+      const wall_dom = wall.value;
       if (wall_dom) {
         item.h = item.InitialH * percenter.value;
         item.w = item.InitialW * percenter.value;
       }
       item.active = true;
-      item.currentx =rect.left
-      item.currenty = rect.top
-      item.centerx = Math.floor(item.currentx + item.w / 2)
-      item.centery = Math.floor(item.currenty + item.h / 2)
+      item.currentx = rect.left;
+      item.currenty = rect.top;
+      item.centerx = Math.floor(item.currentx + item.w / 2);
+      item.centery = Math.floor(item.currenty + item.h / 2);
       if (Number.isNaN(rect.left || rect.left < 0)) {
-        item.currentx = 0
+        item.currentx = 0;
       }
     };
 
     const moveMonitor = (item: test_monitor, rect: show__Rect) => {
       //计算是否超出，然后放回
-      const wall_dom = wall.value
-      if(item.angle!=0){
+      const wall_dom = wall.value;
+      if (item.angle != 0) {
         exceedrange(item);
-      }else{
+      } else {
         if (rect.left < 0) {
-          item.currentx = 0
+          item.currentx = 0;
         } else if (wall_dom && rect.left > wall_dom.offsetWidth - item.w) {
-            item.currentx = Number(set_x()) ?? 0;
+          item.currentx = Number(set_x()) ?? 0;
         } else {
-          item.currentx = rect.left
+          item.currentx = rect.left;
         }
         if (rect.top < 0) {
-          item.currenty = 0
+          item.currenty = 0;
         } else if (wall_dom && rect.top > wall_dom.offsetHeight - item.h) {
           item.currenty = set_y() ?? 0;
         } else {
-          item.currenty = rect.top
+          item.currenty = rect.top;
         }
-        item.centerx = Math.floor(item.currentx + item.w / 2)
-        item.centery = Math.floor(item.currenty + item.h / 2)
+        item.centerx = Math.floor(item.currentx + item.w / 2);
+        item.centery = Math.floor(item.currenty + item.h / 2);
       }
-
     };
-    const isexceed=(element:test_monitor)=>{
+    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 (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;
-
+        if (tepy < 0) {
+          element.currenty = 0;
+        } else if (tepy > 1) {
+          element.currenty = wall_dom.offsetHeight;
         }
       }
       return element;
     };
 
-   const exceedrange=(item:test_monitor)=>{
-        const wall_dom = wall.value
-        let a=0;
-        const point_list=four_point();
-        if(wall_dom&&point_list){
-          let maxx=0;
-          let maxy=0;
-          let minx=0;
-          let miny=0;
-          point_list.forEach((element)=>{
-            if(minx>element.x){
-              minx=element.x;
-            }
-            if(maxx<element.x){
-              maxx=element.x;
-            }
-            if(miny>element.y){
-              miny=element.y;
-            }
-            if(maxy<element.y){
-              maxy=element.y;
-            }
-          })
-          if(minx<0){
-            item.currentx+=Math.abs(minx);
-            item.centerx=item.w/2+item.currentx;
+    const exceedrange = (item: test_monitor) => {
+      const wall_dom = wall.value;
+      let a = 0;
+      const point_list = four_point();
+      if (wall_dom && point_list) {
+        let maxx = 0;
+        let maxy = 0;
+        let minx = 0;
+        let miny = 0;
+        point_list.forEach((element) => {
+          if (minx > element.x) {
+            minx = element.x;
           }
-          if(maxx>wall_dom.offsetWidth){
-            item.currentx-=(maxx-wall_dom.offsetWidth);
-            item.centerx=item.currentx+item.w/2;
+          if (maxx < element.x) {
+            maxx = element.x;
           }
-          if(miny<0){
-            item.currenty+=Math.abs(miny);
-            item.centery=item.h/2+item.currenty;
+          if (miny > element.y) {
+            miny = element.y;
           }
-          if(maxy>wall_dom.offsetHeight){
-            item.currenty-=(maxy-wall_dom.offsetHeight);
-            item.centery=item.currenty+item.h/2;
+          if (maxy < element.y) {
+            maxy = element.y;
           }
+        });
+        if (minx < 0) {
+          item.currentx += Math.abs(minx);
+          item.centerx = item.w / 2 + item.currentx;
         }
+        if (maxx > wall_dom.offsetWidth) {
+          item.currentx -= maxx - wall_dom.offsetWidth;
+          item.centerx = item.currentx + item.w / 2;
+        }
+        if (miny < 0) {
+          item.currenty += Math.abs(miny);
+          item.centery = item.h / 2 + item.currenty;
+        }
+        if (maxy > wall_dom.offsetHeight) {
+          item.currenty -= maxy - wall_dom.offsetHeight;
+          item.centery = item.currenty + item.h / 2;
+        }
+      }
     };
     let test_delete_flag = false;
     EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
-      const wall_dom = wall.value
+      const wall_dom = wall.value;
       if (wall_dom) {
         test_monitor_wall.value.forEach((element) => {
-          let teph=element.InitialH;
-          let tepw=element.InitialW;
+          let teph = element.InitialH;
+          let tepw = element.InitialW;
           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;
-          let sizeh=element.InitialH/teph;
-          let sizew=element.InitialW/tepw;
-          element.currentx=element.currentx*sizew;
-          element.currenty=element.currenty*sizeh;
+          let sizeh = element.InitialH / teph;
+          let sizew = element.InitialW / tepw;
+          element.currentx = element.currentx * sizew;
+          element.currenty = element.currenty * sizeh;
           element.centerx = Math.floor(element.currentx + element.w / 2);
-          element.centery = Math.floor(element.currenty + element.h/ 2);
-        })
+          element.centery = Math.floor(element.currenty + element.h / 2);
+        });
       }
     });
     return {
@@ -855,61 +919,62 @@ export default defineComponent({
         let client = GlobalData.getInstance().getCurrentClient();
 
         if (client) {
-          const response = await client.getMagicWallConfig()
+          const response = await client.getMagicWallConfig();
           const a = response?.config.windows;
-          const wall_dom = wall.value
+          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])
-              let sizeh=wall_dom.offsetHeight/element.background_h;
-              let sizew=wall_dom.offsetWidth/element.background_w;
+              let item: test_monitor = new test_monitor(0, "0", 0, 0, 0);
+              extend(true, item, test_monitor_list.value[element.index]);
+              let sizeh = wall_dom.offsetHeight / element.background_h;
+              let sizew = wall_dom.offsetWidth / element.background_w;
               item.currentx = element.lt.x * wall_dom.offsetWidth;
-              percenter.value = parseFloat((element.percenter).toString());
-              item.InitialH = element.initial_h*sizeh;
-              item.InitialW = element.initial_w*sizew;
-              item.h = (item.InitialH * percenter.value);
-              item.w = (item.InitialW * percenter.value);
+              percenter.value = parseFloat(element.percenter.toString());
+              item.InitialH = element.initial_h * sizeh;
+              item.InitialW = element.initial_w * sizew;
+              item.h = item.InitialH * percenter.value;
+              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
+              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
+              current_index.value = 0;
             } else {
-              current_index.value = -1
+              current_index.value = -1;
             }
-
           }
         }
       },
       resetData() {
         test_monitor_wall.value = [];
         current_index.value = -1;
-        percenter.value = 1
-        test_monitor_list.value.forEach(element => {
+        percenter.value = 1;
+        test_monitor_list.value.forEach((element) => {
           element.isHide = false;
-        })
+        });
         loading.value = false;
       },
       async onSubmit() {
         loading.value = true;
         let client = GlobalData.getInstance().getCurrentClient();
-        const wall_dom = wall.value
-        const settings = await GlobalData.getInstance().getCurrentClient()?.getOutputBoardSetting();
+        const wall_dom = wall.value;
+        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((settings.wall_col).toString())
-          cloud_monitor_list.row =parseInt((settings.wall_row).toString())
+          cloud_monitor_list.magic_wall_enable = true; //response?.config.magic_wall_enable ?? true;
+          cloud_monitor_list.col = parseInt(settings.wall_col.toString());
+          cloud_monitor_list.row = parseInt(settings.wall_row.toString());
           let tep_width = 0;
           test_monitor_wall.value.forEach((element, index) => {
             if (element.isShow) {
@@ -918,19 +983,23 @@ export default defineComponent({
               // console.log(wall_dom.offsetHeight)
               cloud_monitor_list.windows.push({
                 index: element.id,
-                lt: new PointF(element.currentx / wall_dom.offsetWidth, element.currenty / wall_dom.offsetHeight),
+                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()),
-                initial_h: element.InitialH, initial_w: element.InitialW,
+                initial_h: element.InitialH,
+                initial_w: element.InitialW,
                 percenter: percenter.value,
-                background_h:wall_dom.offsetHeight,
-                background_w:wall_dom.offsetWidth,
-              })
+                background_h: wall_dom.offsetHeight,
+                background_w: wall_dom.offsetWidth,
+              });
             }
           });
           const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
-          console.log(setMagic)
+          console.log(setMagic);
           $q.notify({
             color: setMagic?.success ? "positive" : "negative",
             icon: setMagic?.success ? "done" : "warning",
@@ -944,14 +1013,13 @@ export default defineComponent({
           show_dialog.value = false;
         }
         loading.value = false;
-
       },
       activeMouseDown(item: test_monitor, index: number) {
         item.active = true;
         Unchecked.value = false;
         if (item.active) {
-          test_monitor_wall.value.forEach(element => {
-            element.active = false
+          test_monitor_wall.value.forEach((element) => {
+            element.active = false;
           });
         }
         item.active = true;
@@ -966,7 +1034,6 @@ export default defineComponent({
       },
       onDragOver(e: DragEvent) {
         e.preventDefault();
-
       },
       onDrop(e: DragEvent) {
         if (e.dataTransfer?.getData("item") != "") {
@@ -976,35 +1043,35 @@ export default defineComponent({
           item.active = true;
           item.angle = 0;
           if (item.active) {
-            test_monitor_wall.value.forEach(element => {
-              element.active = false
+            test_monitor_wall.value.forEach((element) => {
+              element.active = false;
             });
           }
           if (item.currentx < 0) {
-            item.currentx = 0
-            window_rect.x = 0
+            item.currentx = 0;
+            window_rect.x = 0;
           } else {
-            window_rect.x = item.currentx
+            window_rect.x = item.currentx;
           }
           if (item.currenty < 0) {
-            item.currenty = 0
-            window_rect.y = 0
+            item.currenty = 0;
+            window_rect.y = 0;
           } else {
-            window_rect.y = item.currenty
+            window_rect.y = item.currenty;
           }
           test_delete_flag = false;
-          const wall_dom = wall.value
+          const wall_dom = wall.value;
           item.isShow = true;
           if (wall_dom) {
-            item.InitialH = wall_dom?.offsetHeight * (item.resize);
-            item.InitialW = wall_dom?.offsetWidth * (item.resize);
+            item.InitialH = wall_dom?.offsetHeight * item.resize;
+            item.InitialW = wall_dom?.offsetWidth * item.resize;
             item.h = item.InitialH * percenter.value;
             item.w = item.InitialW * percenter.value;
             if (item.currentx > wall_dom?.offsetWidth - item.w) {
-              item.currentx = wall_dom?.offsetWidth - item.w
+              item.currentx = wall_dom?.offsetWidth - item.w;
             }
             if (item.currenty > wall_dom?.offsetHeight - item.h) {
-              item.currenty = wall_dom?.offsetHeight - item.h
+              item.currenty = wall_dom?.offsetHeight - item.h;
             }
             item.centerx = Math.floor(item.currentx + item.w / 2);
             item.centery = Math.floor(item.currenty + item.h / 2);
@@ -1013,7 +1080,7 @@ export default defineComponent({
             test_monitor_wall.value.push(item);
             test_delete_flag = true;
           }
-          current_index.value = test_monitor_wall.value.length - 1
+          current_index.value = test_monitor_wall.value.length - 1;
         }
       },
       onDragEnter(e: DragEvent, index: string) {
@@ -1033,7 +1100,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].isHide = true
+          test_monitor_list.value[num].isHide = true;
         }
       },
       onDragLeave(e: DragEvent) {
@@ -1048,85 +1115,109 @@ export default defineComponent({
       closeOtherWindows(item: test_monitor, index: number) {
         current_index.value = index;
         let tep = JSON.parse(JSON.stringify(item));
-        test_monitor_list.value.forEach(element => {
+        test_monitor_list.value.forEach((element) => {
           element.isHide = false;
-        })
-        test_monitor_wall.value.forEach(element => {
+        });
+        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;
-        test_monitor_list.value.forEach(element => {
+        test_monitor_list.value.forEach((element) => {
           element.isHide = false;
-        })
-        test_monitor_wall.value.forEach(element => {
+        });
+        test_monitor_wall.value.forEach((element) => {
           element.isShow = false;
-        })
+        });
       },
       box_width(row: number, col: number) {
-        let tep = JSON.parse(JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)]))
-        return tep.w + "px"
+        let tep = JSON.parse(
+          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
+        );
+        return tep.w + "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"
+        let tep = JSON.parse(
+          JSON.stringify(test_monitor_list.value[(row - 1) * 4 + (col - 1)])
+        );
+        return tep.h + "px";
       },
       show_box_line_height(height: number) {
-        return height * 0.5 + "px"
+        return height * 0.5 + "px";
       },
       center_x() {
-        const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
-        item.currentx =item.centerx - item.w / 2;
+        const wall_dom = wall.value;
+        const item = test_monitor_wall.value[current_index.value];
+        item.currentx = item.centerx - item.w / 2;
       },
       center_y() {
-        const wall_dom = wall.value
-        const item = test_monitor_wall.value[current_index.value]
+        const wall_dom = wall.value;
+        const item = test_monitor_wall.value[current_index.value];
         item.currenty = item.centery - item.h / 2;
       },
       changePercenter() {
-        const wall_dom = wall.value
+        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;
           const rx: number = element.currentx + element.w;
-          const ry:number=element.currenty + element.h;
+          const ry: number = element.currenty + element.h;
           const wall_dom = wall.value;
-           if(wall_dom){
+          if (wall_dom) {
             if (rx > wall_dom.offsetWidth) {
-                element.currentx = wall_dom.offsetWidth - element.w
+              element.currentx = wall_dom.offsetWidth - element.w;
             }
-            if(ry>wall_dom.offsetHeight){
-              element.currenty = wall_dom.offsetHeight - element.h
+            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);
+          }
+          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;
         if (Unchecked) {
-          current_index.value = -1
+          current_index.value = -1;
           test_monitor_wall.value.forEach((element) => {
             element.active = false;
-          })
+          });
         }
       },
-      changeAngle(){
-        const wall_dom = wall.value
-        let item = test_monitor_wall.value[current_index.value]
+      changeAngle() {
+        const wall_dom = wall.value;
+        let item = test_monitor_wall.value[current_index.value];
         exceedrange(item);
+      },
+      sub_x(){
+        console.log(111)
+        let item = test_monitor_wall.value[current_index.value]
+        item.currentx--;
+        item.centerx--;
+      },
+      sub_y(){
+        let item = test_monitor_wall.value[current_index.value]
+        item.currenty--;
+        item.centery--;
+      },
+      add_x(){
+        let item = test_monitor_wall.value[current_index.value]
+        item.currentx++;
+        item.centerx++;
+      },
+      add_y(){
+        let item = test_monitor_wall.value[current_index.value]
+        item.currenty++;
+        item.centery++;
       }
     };
   },
-})
+});
 </script>
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index fb9c120..0d68072 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -309,10 +309,6 @@
               {{ $t("grid setting") }}
             </q-item-section>
           </q-item>
-
-
-
-
           <q-item
             clickable
             :disable="!$store.state.power_state"