绘制墙生成jsonz

src/utils/graph/CustomWall.ts

@@ -3,13 +3,14 @@ import { ItemOrder, SItemStatus } from "@persagy-web/big/lib";
 import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
 import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw/lib";
 import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointListUpdate, SGraphStyleItem, SLineStyle } from "@persagy-web/graph/lib";
+import { generate } from "./generate";
 
 /**
  * 折线编辑类
  *
  * @author  郝建龙
  */
- export class CustomWall extends SGraphStyleItem {
+export class CustomWall extends SGraphStyleItem {
     /** X 坐标最小值 */
     private minX = Number.MAX_SAFE_INTEGER;
     /** X 坐标最大值 */
@@ -70,10 +71,16 @@ import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointLi
             this.lastPoint = data;
         }
         this.fillColor = new SColor("#2196f3");
+        this.lineWidth = 2;
         this.selectable = true;
-        this.zOrder = ItemOrder.wallOrder
+        this.zOrder = ItemOrder.wallOrder;
+        this.data = {
+            SourceId: +new Date(),
+            OutLine: [],
+            Width: 200
+        }
     } // Constructor
-    
+
     /**
      * 添加点至数组中
      *
@@ -316,9 +323,9 @@ import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointLi
      */
     findAddPos(p: SPoint): void {
         let len = SMathUtil.pointToLine(
-                p,
-                new SLine(this.pointList[0], this.pointList[1])
-            ),
+            p,
+            new SLine(this.pointList[0], this.pointList[1])
+        ),
             index = 0;
         if (this.pointList.length > 2) {
             for (let i = 1; i < this.pointList.length - 1; i++) {
@@ -508,6 +515,46 @@ import { SGraphItem, SGraphPointListDelete, SGraphPointListInsert, SGraphPointLi
      * @return 对象储存的相关数据
      */
     toData(): any {
+        if (this.pointList.length == 2) {
+            const fGroup = generate.getVertical(this.pointList[0], this.pointList[1], this.data.Width);
+            const sGroup = generate.getVertical(this.pointList[1], this.pointList[0], this.data.Width);
+            const doubleGroup = generate.generateOrderLine(fGroup, sGroup, new SLine(this.pointList[0], this.pointList[1]));
+            this.data.OutLine = [
+                [
+                    {
+                        X: Number(doubleGroup[0][0].toFixed(2)),
+                        Y: -Number(doubleGroup[0][1].toFixed(2)),
+                        Z: 0
+                    },
+                    {
+                        X: Number(doubleGroup[0][2].toFixed(2)),
+                        Y: -Number(doubleGroup[0][3].toFixed(2)),
+                        Z: 0
+                    },
+                    {
+                        X: Number(doubleGroup[1][2].toFixed(2)),
+                        Y: -Number(doubleGroup[1][3].toFixed(2)),
+                        Z: 0
+                    },
+                    {
+                        X: Number(doubleGroup[1][0].toFixed(2)),
+                        Y: -Number(doubleGroup[1][1].toFixed(2)),
+                        Z: 0
+                    }
+                ]
+            ]
+        } else if (this.pointList.length > 2) {
+            // const list = this.pointList;
+            // const fGroup = generate.getVertical(list[0], list[1], this.data.Width);
+            // const lGroup = generate.getVertical(list[list.length - 1], list[list.length - 2], this.data.Width);
+            // let outline = [...fGroup];
+            // for (let i = 1; i < list.length - 1; i++) {
+            //     const midGroup = generate.getBisector(list[i - 1], list[i], list[i + 1], this.data.Width);
+            //     console.log(midGroup);
+            //     const midDoubleGroup = generate.generateOrderLine(fGroup, midGroup, this.data.Width);
+            // }
+        }
+
         return this.data;
     }
 

src/utils/graph/DivideFloorScene.ts

@@ -569,7 +569,7 @@ export class DivideFloorScene extends FloorScene {
      * 
      * @param fName 文件名
     */
-    generateFile(fName: string) {
+    generateFile(fName: string, _fn: Function) {
         if (this.json) {
             // const zip = new JSZip();
             // // // // // // 名称-文件内容
@@ -611,7 +611,7 @@ export class DivideFloorScene extends FloorScene {
             // unzip(blob);
             // console.log(blob)
             // const file = new File([bl], '111')
-            this.upload(fName, blob)
+            this.upload(fName, blob, _fn)
         }
     }
 
@@ -621,7 +621,7 @@ export class DivideFloorScene extends FloorScene {
      * @param key 当前显示的楼层平面图的key
      * @param blob 上传的blob对象
     */
-    upload(key: string, blob: Blob) {
+    upload(key: string, blob: Blob, _fn: Function) {
         let reader = new FileReader();
         reader.onloadstart = function () {
             // 这个事件在读取开始时触发
@@ -644,9 +644,8 @@ export class DivideFloorScene extends FloorScene {
             xhr.send(reader.result);
             xhr.onreadystatechange = function () {
                 if (xhr.readyState == 4) {
-                    console.log(xhr)
                     if (xhr.status == 200) {
-                        console.log(324234);
+                        _fn()
                     } else {
                     }
                 }

src/utils/graph/generate.ts

@@ -1,4 +1,4 @@
-import { SPoint } from "@persagy-web/draw/lib";
+import { SLine, SPoint } from "@persagy-web/draw/lib";
 // @ts-ignore
 import { intersect, polygon, segments, combine, selectUnion, selectDifference, selectDifferenceRev } from "polybooljs";
 
@@ -45,11 +45,11 @@ export class generate {
         const Y1 = k * X1 + b;
         const Y2 = k * X2 + b;
 
-        return [Number(X1.toFixed(2)), Number(Y1.toFixed(2)), Number(X2.toFixed(2)), Number(Y2.toFixed(2))]
+        return [X1, Y1, X2, Y2]
     }
 
     /**
-     * 计算一条线的垂线上距离线l的2个点
+     * 计算一条线的过p1垂线上距离线l的2个点
      * 
      * @param p1 点1
      * @param p2 点2
@@ -60,6 +60,14 @@ export class generate {
         const dy1 = p1.y - p2.y;
         const dx1 = p1.x - p2.x;
 
+        if (dy1 == 0) {
+            return [p1.x, p1.y - l, p1.x, p1.y + l]
+        }
+
+        if (dx1 == 0) {
+            return [p1.x - l, p1.y, p1.x + l, p1.y]
+        }
+
         // 线1的斜率
         const k1 = dy1 / dx1;
         // 垂线的斜率
@@ -76,7 +84,7 @@ export class generate {
         const Y1 = k * X1 + b;
         const Y2 = k * X2 + b;
 
-        return [Number(X1.toFixed(2)), Number(Y1.toFixed(2)), Number(X2.toFixed(2)), Number(Y2.toFixed(2))]
+        return [X1, Y1, X2, Y2]
     }
 
     /**
@@ -113,12 +121,75 @@ export class generate {
     /**
      * 一条线生成的4个点,根据这4个点和这条线,将轮廓线排序
      * 
+     * @description 计算3条线的斜率,差值小的一组
+     * 
      * @param [number, number, number, number]
      * @param [number, number, number, number]
      * @param SLine
-     * @return 轮廓线数据
+     * @return 两组线的数组
     */
+    static generateOrderLine(arr1: [number, number, number, number], arr2: [number, number, number, number], line: SLine) {
+        if (arr1.length && arr2.length) {
+            // 排除特殊情况
+            if (line.dy == 0) { // 线本身是水平的
+                if (arr1[1] - arr2[1] == 0) {
+                    return [
+                        [arr1[0], arr1[1], arr2[0], arr2[1]],
+                        [arr1[2], arr1[3], arr2[2], arr2[3]],
+                    ]
+                } else {
+                    return [
+                        [arr1[0], arr1[1], arr2[2], arr2[3]],
+                        [arr1[2], arr1[3], arr2[0], arr2[1]],
+                    ]
+                }
+            }
 
+            if (line.dx == 0) { // 线本身是垂直的
+                if (arr1[0] - arr2[0] == 0) { // 与另外一组的第一个点的连线是水平的
+                    return [
+                        [arr1[0], arr1[1], arr2[0], arr2[1]],
+                        [arr1[2], arr1[3], arr2[2], arr2[3]],
+                    ]
+                } else { // 与另外一组的第二个点的连线是竖直的
+                    return [
+                        [arr1[0], arr1[1], arr2[2], arr2[3]],
+                        [arr1[2], arr1[3], arr2[0], arr2[1]],
+                    ]
+                }
+                
+            }
+
+            // 标准线的斜率
+            const k = line.dy / line.dx;
+            // 第一条线
+            const l1 = new SLine(arr1[0], arr1[1], arr2[0], arr2[1]);
+            // 第一条线的斜率
+            const k1 = l1.dy / l1.dx;
+            // 第一条线斜率差值
+            const dk1 = Math.abs(k1 - k);
+            // 第二条线
+            const l2 = new SLine(arr1[0], arr1[1], arr2[2], arr2[3]);
+            // 第二条线的斜率
+            const k2 = l2.dy / l2.dx;
+            // 第二条线斜率差值
+            const dk2 = Math.abs(k2 - k);
+
+            // 判断差值小的放一组
+            if (dk1 < dk2) {
+                return [
+                    [arr1[0], arr1[1], arr2[0], arr2[1]],
+                    [arr1[2], arr1[3], arr2[2], arr2[3]],
+                ]
+            } else {
+                return [
+                    [arr1[0], arr1[1], arr2[2], arr2[3]],
+                    [arr1[2], arr1[3], arr2[0], arr2[1]],
+                ]
+            }
+        }
+        return []
+    }
 
 
     static llll() {

src/views/maintain/space/components/spaceGraph.vue

@@ -481,7 +481,10 @@ export default class spaceGraph extends Vue {
      */
     saveMap() {
         if (this.scene) {
-            this.scene.generateFile(this.floorKey);
+            this.scene.generateFile(this.floorKey, () => {
+                this.$message.success('修改模型成功');
+                this.init(1)
+            });
         }
     }