Browse Source

画墙按钮增加

haojianlong 3 năm trước cách đây
mục cha
commit
56cc901eb1

+ 1 - 1
package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.50",
+    "@persagy-web/big": "2.2.51",
     "@persagy-web/draw": "2.2.13",
     "@persagy-web/graph": "2.2.45",
     "axios": "^0.21.1",

+ 24 - 0
src/utils/graph/CustomWall.ts

@@ -73,6 +73,12 @@ export class CustomWall extends SGraphStyleItem {
         } else {
             this.pointList = list;
         }
+        this.data = {
+            ElementType: "Wall",
+            Id: +new Date().toString(),
+            Width: 200.0,
+            SourceId: +new Date().toString()
+        }
     }
 
     /**
@@ -364,6 +370,22 @@ export class CustomWall extends SGraphStyleItem {
     }
 
     /**
+     * item转换成保存时的数据
+    */
+    toData(): any {
+        this.data.OutLine = [];
+        const temp = this.pointList.map(t => {
+            return {
+                X: t.x,
+                Y: -t.y,
+                Z: 0.0
+            }
+        })
+        this.data.OutLine.push(temp)
+        return this.data;
+    }
+
+    /**
      * Item 绘制操作
      *
      * @param painter   绘制对象
@@ -371,5 +393,7 @@ export class CustomWall extends SGraphStyleItem {
     onDraw(painter: SPainter): void {
         // 缓存场景长度
         this.sceneDis = painter.toPx(this.dis);
+
+        painter.drawPolyline(this.pointList)
     }
 }

+ 51 - 1
src/utils/graph/DivideFloorScene.ts

@@ -8,6 +8,8 @@ import { ShadeItem } from "./ShadeItem";
 import { intersect, polygon, segments, combine, selectIntersect, selectUnion, selectDifference, selectDifferenceRev, difference } from "polybooljs";
 import { DrawZoneItem } from "./DrawZoneItem";
 import { SItemStatus } from "@persagy-web/big/lib";
+import { Wall } from "@persagy-web/big/lib/types/floor/Wall";
+import { CustomWall } from "./CustomWall";
 
 export class DivideFloorScene extends FloorScene {
     /** 划分item  */
@@ -15,7 +17,7 @@ export class DivideFloorScene extends FloorScene {
 
     /** 绘制的分区item */
     drawItem: DrawZoneItem | null = null;
-    /** 当前绘制命令 cut-交集区域绘制 zoneDraw-绘制业务空间 */
+    /** 当前绘制命令 cut-交集区域绘制 zoneDraw-绘制业务空间 wallDraw-画墙 */
     // 2021.3.4需求不算交集,直接绘制业务空间
     drawCmd: string = '';
 
@@ -30,6 +32,10 @@ export class DivideFloorScene extends FloorScene {
 
     /** 高亮item  */
     highLight: HighlightItem | null = null;
+    /** 删除日志 */
+    deleteWallLog: Wall[] = []
+    /** 用户自己增加的墙item */
+    customWall: CustomWall[] = []
 
     /**
      * 清除划分区域
@@ -86,6 +92,15 @@ export class DivideFloorScene extends FloorScene {
                     this.grabItem = item;
                     return true;
                 }
+            } else if (this.drawCmd == "wallDraw") {
+                let point = new SPoint(event.x, event.y);
+                let item = new CustomWall(null, point)
+                item.status = SItemStatus.Create;
+                this.addItem(item);
+                console.log(2312312);
+                
+                this.grabItem = item;
+                return true;
             }
         }
         return super.onMouseDown(event)
@@ -454,4 +469,39 @@ export class DivideFloorScene extends FloorScene {
         // poly为segments类型
         return poly;
     }
+
+    /**
+     * 读取场景中的底图对象并生成相应json
+    */
+    getMapObject(): string {
+        try {
+            if (this.json) {
+                let map = JSON.parse(this.json);
+                const tempWall = map.EntityList[0].Elements.Walls
+                console.log(map.EntityList[0].Elements.Walls.length);
+                const logArr = this.deleteWallLog.map(t => {
+                    return t.SourceId
+                })
+                if (this.deleteWallLog.length) {
+                    for (let i = 0; i < tempWall.length; i++) {
+                        if (logArr.includes(tempWall[i].SourceId)) {
+                            tempWall.splice(i, 1);
+                            i--;
+                        }
+                    }
+                }
+                if (this.customWall.length) {
+                    this.customWall.forEach(t => {
+                        tempWall.push(t.toData())
+                    })
+                }
+                console.log(map.EntityList[0].Elements.Walls.length);
+                return JSON.stringify(map);
+            }
+            return ''
+        } catch (err) {
+            console.log(err)
+            return ''
+        }
+    }
 }

+ 3 - 2
src/utils/graph/FloorScene.ts

@@ -94,8 +94,8 @@ export class FloorScene extends SGraphScene {
      *  @param  url     请求数据文件路径
      */
     loadUrl(url: string): Promise<void> {
-        return getJsonz(url).then((res: any) => {
-            this.addBaseMapItem(res)
+        return getJsonz(url, true).then((res: any) => {
+            this.addBaseMapItem(res.EntityList ? res.EntityList[0].Elements : res.entityList[0].Elements)
             this.json = JSON.stringify(res);
             return res;
         })
@@ -174,6 +174,7 @@ export class FloorScene extends SGraphScene {
     addWall(wall: Wall): void {
         let item = new SWallItem(null, wall);
         item.fillColor = ItemColor.wallColor;
+        // item.selectable = true
         this.wallList.push(item);
         this.addItem(item);
     } // Function addWall()

+ 12 - 2
src/views/maintain/space/components/canvasFun.vue

@@ -11,7 +11,7 @@
                 <i class="el-icon-download" style="font-size:20px;color:#fff;"></i>
                 <el-dropdown-menu slot='dropdown'>
                     <el-dropdown-item command="savePng">保存为png</el-dropdown-item>
-                    <el-dropdown-item command="saveSvg">保存为svg</el-dropdown-item>
+                    <!-- <el-dropdown-item command="saveSvg">保存为svg</el-dropdown-item> -->
                     <el-dropdown-item command="saveJson">保存为Json</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
@@ -26,7 +26,10 @@
                 </el-dropdown-menu> -->
             </el-dropdown>
         </div>
-        <div v-if="config.isEdit&&config.divide" @click="clearDivide">
+        <div v-if="config.isEdit&&config.drawWall" @click="drawWall" :class="{ 'active': active === 'drawWall' }">
+            <i class="el-icon-share"></i>
+        </div>
+        <div v-if="config.isEdit&&(config.divide||config.drawWall)" @click="clearDivide">
             <i class="iconfont icon-Erase"></i>
         </div>
         <div @click="reduce">
@@ -45,6 +48,7 @@ interface configFace {
     isEdit: boolean;
     divide: boolean;
     groupSelect: boolean;
+    drawWall: boolean;
 }
 import { Vue, Component, Prop } from "vue-property-decorator";
 @Component
@@ -55,6 +59,7 @@ export default class canvasFun extends Vue {
             isEdit: false,
             divide: true,
             groupSelect: false,
+            drawWall: false,
         },
     })
     config!: configFace;
@@ -87,6 +92,11 @@ export default class canvasFun extends Vue {
         this.active = "divide";
         this.$emit("divide");
     }
+    // 画墙
+    drawWall() {
+        this.active = "drawWall";
+        this.$emit("drawWall");
+    }
     // 清除编辑
     clearDivide() {
         this.active = "";

+ 55 - 7
src/views/maintain/space/components/spaceGraph.vue

@@ -46,6 +46,11 @@
                         <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
                         <el-button plain @click="cancelGraphy">取 消</el-button>
                     </div>
+                    <!-- 保存墙 -->
+                    <div v-if="type==6">
+                        <el-button plain @click="cancelGraphy">取 消</el-button>
+                        <el-button type="primary" @click="saveMap">保存</el-button>
+                    </div>
                 </div>
             </el-row>
 
@@ -53,7 +58,8 @@
 
             <el-row class="canvas-actions-box">
                 <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide"
-                    ref="canvasFun" @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" />
+                    ref="canvasFun" @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect"
+                    @drawWall="drawWall" />
             </el-row>
         </div>
         <div v-show="!floorKey">
@@ -98,6 +104,7 @@ export default class spaceGraph extends Vue {
         isEdit: false,
         divide: true,
         groupSelect: false,
+        drawWall: false,
     };
     search = ""; //搜索
     zoneDisable = true;
@@ -131,11 +138,10 @@ export default class spaceGraph extends Vue {
         this.canvasLoading = true;
         if (floor.infos && floor.infos.floorMap) {
             this.floor = floor;
-            const url = this.mapBaseUrl + floor.infos.floorMap;
-            if (url == this.floorKey) {
+            if (floor.infos.floorMap == this.floorKey) {
                 this.init(2);
             } else {
-                this.floorKey = this.mapBaseUrl + floor.infos.floorMap;
+                this.floorKey = floor.infos.floorMap;
                 this.init(1);
             }
         } else {
@@ -176,6 +182,7 @@ export default class spaceGraph extends Vue {
             isEdit: false,
             divide: true,
             groupSelect: true,
+            drawWall: false,
         };
         if (this.$refs.canvasFun) {
             // @ts-ignore
@@ -191,7 +198,7 @@ export default class spaceGraph extends Vue {
         this.clearGraphy();
         this.scene = null;
         console.log(this.floorKey);
-        scene.loadUrl(this.floorKey).then((res) => {
+        scene.loadUrl(this.mapBaseUrl + this.floorKey).then((res) => {
             if (this.view) {
                 this.view.scene = scene;
             }
@@ -259,6 +266,7 @@ export default class spaceGraph extends Vue {
         this.config.isEdit = true;
         this.config.groupSelect = false;
         this.config.divide = true;
+        this.config.drawWall = false;
         if (this.scene) {
             this.scene.isSpaceSelectable = true;
             this.scene.isZoneSelectable = false;
@@ -291,12 +299,27 @@ export default class spaceGraph extends Vue {
             }
         }
     }
-    handleCommand() {}
+    // 下拉菜单
+    handleCommand(command: string) {
+        if (command == "createWall") {
+            // 绘制墙
+            this.config.isEdit = true;
+            this.config.groupSelect = false;
+            this.config.divide = false;
+            this.config.drawWall = true;
+            this.type = 6;
+            if (this.scene) {
+                this.scene.isSpaceSelectable = false;
+                this.scene.isZoneSelectable = false;
+            }
+        }
+    }
     // 编辑业务空间
     refactorBSP() {
         this.config.isEdit = true;
         this.config.groupSelect = false;
         this.config.divide = true;
+        this.config.drawWall = false;
         if (this.scene) {
             this.scene.isZoneSelectable = false;
             this.scene.isSpaceSelectable = true;
@@ -448,6 +471,20 @@ export default class spaceGraph extends Vue {
     }
 
     /**
+     * 生成底图json
+     */
+    saveMap() {}
+
+    /**
+     * 画墙
+     */
+    drawWall() {
+        if (this.scene) {
+            this.scene.drawCmd = "wallDraw";
+        }
+    }
+
+    /**
      * 单个计算交集
      */
     calIntersect(zoneObj: any) {
@@ -583,7 +620,18 @@ export default class spaceGraph extends Vue {
     }
     // 保存json
     saveJson() {
-        this.view?.saveFloorJson(`1.json`);
+        console.log(this.scene);
+
+        this.scene?.getMapObject();
+        return;
+        try {
+            this.view?.saveFloorJson(
+                `${this.floor.build}-${this.floor.localName}.json`
+            );
+        } catch (err) {
+            console.log(err);
+            this.view?.saveFloorJson(`1.json`);
+        }
     }
     // 切割划分
     divide() {

+ 1 - 0
src/views/maintain/space/index.vue

@@ -209,6 +209,7 @@ export default class spaceIndex extends Vue {
             data.forEach((build) => {
                 floorData.forEach((floor) => {
                     this.floorToMap[floor.id] = floor;
+                    this.floorToMap[floor.id].build = build.label;
                     if (
                         build.value == floor.buildingId &&
                         floor.id &&