魔墙：增加导出坐标

src/components/ControlPanelDialog.vue

@@ -553,7 +553,16 @@
           <q-separator />
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right">
+        <q-card-actions>
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('export')"
+            no-caps
+            color="primary"
+            @click="export_magic_wall"
+          />
+          <q-space />
           <q-btn
             :loading="loading"
             flat
@@ -625,6 +634,9 @@ import {
   QSeparator,
   QSpace,
   QTooltip,
+  exportFile,
+  QForm,
+  QSlider,
 } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
@@ -635,7 +647,6 @@ import MagicWallConfig from "src/entities/MagicWallConfig";
 import { PointF } from "src/entities/RectF";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { number } from "@intlify/core-base";
-// import VeeValidate from 'vee-validate';
 
 export class test_monitor {
   uuid = "";
@@ -699,7 +710,35 @@ export class test_monitor {
     this.cmh = 0.0;
   }
 }
-
+class exporttxt {
+  id = 0;
+  point_left_top = {};
+  point_left_bootom = {};
+  point_right_top = {};
+  point_right_bottom = {};
+  w = 0.0;
+  h = 0.0;
+  angle = 0;
+  constructor(
+    id: number,
+    w: number,
+    h: number,
+    angle: number,
+    point_left_top: {},
+    point_left_bootom: {},
+    point_right_top: {},
+    point_right_bottom: {}
+  ) {
+    this.id = id;
+    this.point_left_top = point_left_top;
+    this.point_left_bootom = point_left_bootom;
+    this.point_right_top = point_right_top;
+    this.point_right_bottom = point_right_bottom;
+    this.w = w;
+    this.h = h;
+    this.angle = angle;
+  }
+}
 export default defineComponent({
   name: "ComponentControlPanelDialog",
   components: { vue3ResizeDrag },
@@ -851,39 +890,39 @@ export default defineComponent({
           }
         });
       }
-      // if (client) {
-      //   const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
-      // if (setMagic?.success) {
-      //   let monitorList:any=[]
-      //       test_monitor_wall.value.forEach((element, index) => {
-      //         if (element.isShow&&wall_dom) {
-      //           monitorList.push({
-      //             id: element.id,
-      //             currentx: element.currentx / wall_dom.offsetWidth,
-      //             currenty: element.currenty / wall_dom.offsetHeight,
-      //             h: element.h / wall_dom.offsetHeight,
-      //             w: element.w / wall_dom.offsetWidth,
-      //             angle: parseInt(element.angle.toString()),
-      //             centerx: element.centerx/ wall_dom.offsetWidth,
-      //             centery: element.centery / wall_dom.offsetHeight,
-      //           });
-      //         }
-      //       });
-      //       $store.commit("setShowMonitorList", monitorList);
-      //     }
-      //   if(!setMagic?.success){
-      //     $q.notify({
-      //       color: "negative",
-      //       icon: "warning",
-      //       message:
-      //         $t.t("update magic wall") +
-      //         $t.t("fail") +
-      //         "!",
-      //       position: "top",
-      //       timeout: 2500,
-      //     });
-      //   }
-      // }
+      if (client) {
+        const setMagic = await client.setMagicWallConfig(cloud_monitor_list);
+      if (setMagic?.success) {
+        let monitorList:any=[]
+            test_monitor_wall.value.forEach((element, index) => {
+              if (element.isShow&&wall_dom) {
+                monitorList.push({
+                  id: element.id,
+                  currentx: element.currentx / wall_dom.offsetWidth,
+                  currenty: element.currenty / wall_dom.offsetHeight,
+                  h: element.h / wall_dom.offsetHeight,
+                  w: element.w / wall_dom.offsetWidth,
+                  angle: parseInt(element.angle.toString()),
+                  centerx: element.centerx/ wall_dom.offsetWidth,
+                  centery: element.centery / wall_dom.offsetHeight,
+                });
+              }
+            });
+            $store.commit("setShowMonitorList", monitorList);
+          }
+        if(!setMagic?.success){
+          $q.notify({
+            color: "negative",
+            icon: "warning",
+            message:
+              $t.t("update magic wall") +
+              $t.t("fail") +
+              "!",
+            position: "top",
+            timeout: 2500,
+          });
+        }
+      }
     };
     const getpx = () => {
       const wall_dom = wall.value;
@@ -895,26 +934,29 @@ export default defineComponent({
         });
       }
     };
-    const radians = () => {
-      const item = test_monitor_wall.value[current_index.value];
+    const radians = (item: test_monitor) => {
       return /*a*/ (item.angle * Math.PI) / 180;
     };
     const calculateCoordinates = (
       px: number,
       py: number,
       cx: number,
-      cy: number
+      cy: number,
+      item: test_monitor
     ) => {
       const x =
-        cx + (px - cx) * Math.cos(radians()) - (py - cy) * Math.sin(radians());
+        cx +
+        (px - cx) * Math.cos(radians(item)) -
+        (py - cy) * Math.sin(radians(item));
 
       const y =
-        cy + (px - cx) * Math.sin(radians()) + (py - cy) * Math.cos(radians());
+        cy +
+        (px - cx) * Math.sin(radians(item)) +
+        (py - cy) * Math.cos(radians(item));
 
       return { x, y };
     };
-    const four_point = () => {
-      const item = test_monitor_wall.value[current_index.value];
+    const four_point = (item: test_monitor) => {
       item.centerx = parseInt(item.centerx.toString());
       item.centery = parseInt(item.centery.toString());
       const x2: number = item.currentx + item.w;
@@ -924,25 +966,29 @@ export default defineComponent({
           item.currentx,
           item.currenty,
           item.centerx,
-          item.centery
+          item.centery,
+          item
         );
         const point_left_bootom = calculateCoordinates(
           item.currentx,
           y2,
           item.centerx,
-          item.centery
+          item.centery,
+          item
         );
         const point_right_top = calculateCoordinates(
           x2,
           item.currenty,
           item.centerx,
-          item.centery
+          item.centery,
+          item
         );
         const point_right_bottom = calculateCoordinates(
           x2,
           y2,
           item.centerx,
-          item.centery
+          item.centery,
+          item
         );
         const point_list = [
           point_left_top,
@@ -976,7 +1022,7 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point();
+      const point_list = four_point(item);
       if (wall_dom) {
         if (item.angle != 0 && point_list) {
           let minx = 0;
@@ -999,7 +1045,7 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point();
+      const point_list = four_point(item);
       if (wall_dom) {
         if (item.angle != 0 && point_list) {
           let maxx = 0;
@@ -1040,7 +1086,7 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point();
+      const point_list = four_point(item);
       if (wall_dom) {
         if (item.angle != 0 && point_list) {
           let miny = 0;
@@ -1063,7 +1109,7 @@ export default defineComponent({
       item: test_monitor = test_monitor_wall.value[current_index.value]
     ) => {
       const wall_dom = wall.value;
-      const point_list = four_point();
+      const point_list = four_point(item);
       if (wall_dom) {
         if (item.angle != 0 && point_list) {
           let maxy = 0;
@@ -1141,7 +1187,7 @@ export default defineComponent({
     const exceedrange = (item: test_monitor) => {
       const wall_dom = wall.value;
       let a = 0;
-      const point_list = four_point();
+      const point_list = four_point(item);
       if (wall_dom && point_list) {
         let maxx = 0;
         let maxy = 0;
@@ -1315,8 +1361,7 @@ export default defineComponent({
                 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.resizew = element.w ;
-                item.resizeh = element.h ;
+
                 item.currentx = element.lt.x * wall_dom.offsetWidth;
                 item.currenty = element.lt.y * wall_dom.offsetHeight;
                 percenter.value = parseFloat(element.percenter.toString());
@@ -1325,7 +1370,8 @@ export default defineComponent({
                 item.InitialW = element.initial_w * sizew;
                 item.h = item.InitialH * percenter.value;
                 item.w = item.InitialW * percenter.value;
-                
+                item.resizew = item.InitialW / wall_dom.offsetWidth;
+                item.resizeh = item.InitialH / wall_dom.offsetHeight;
                 item.centerx = Math.floor(item.currentx + item.w / 2);
                 item.centery = Math.floor(item.currenty + item.h / 2);
                 item.angle = element.angle;
@@ -1827,6 +1873,44 @@ export default defineComponent({
         });
         realtime_upload();
       },
+      export_magic_wall() {
+        let export_list: any = [];
+        let res:string="";
+        test_monitor_wall.value.forEach((ele, index) => {
+          const point_list = four_point(ele);
+          if (wall.value && point_list && ele.isShow) {
+            point_list?.forEach((element) => {
+              if(wall.value ){
+                element.x =Math.round((element.x / wall.value.offsetWidth) * 3840);
+               element.y = Math.round((element.y / wall.value.offsetHeight) * 2160);
+              }
+              
+            });
+            let item: exporttxt = new exporttxt(0, 0, 0, 0, {}, {}, {}, {});
+            item.id = ele.id;
+            item.point_left_top = [point_list[0]];
+            item.point_left_bootom = [point_list[1]];
+            item.point_right_top = [point_list[2]];
+            item.point_right_bottom = [point_list[3]];
+            item.w = Math.round((ele.w / wall.value?.offsetWidth) * 3840);
+            item.h = Math.round((ele.h / wall.value.offsetHeight) * 2160);
+            item.angle = ele.angle;
+            export_list.push(JSON.parse(JSON.stringify(item)));
+            res=res+JSON.stringify(item)+"\r\n"
+          }
+        });
+        
+        const status = exportFile("important.txt", res);
+        if (status === true) {
+        } else {
+          $q.notify({
+            type: "warning",
+            message: $t.t("data export ") + $t.t("fail") + "!",
+            position: "top",
+            timeout: 1500,
+          });
+        }
+      },
     };
   },
 });