Forráskód Böngészése

批量绑定 图展示

haojianlong 4 éve
szülő
commit
9e4fbbcd6a
1 módosított fájl, 235 hozzáadás és 8 törlés
  1. 235 8
      src/components/edit/edit-dialog.vue

+ 235 - 8
src/components/edit/edit-dialog.vue

@@ -141,7 +141,7 @@
                             </div> -->
                         </div>
                     </div>
-                    <div class="bind-right">
+                    <div class="bind-right" v-loading="canvasLoading">
                         <p style="margin-bottom: 10px;" v-show="mapType && mapFloor">{{`${mapType}-${mapFloor}平面图`}}</p>
                         <canvas id="bind-canvas" :width="514" :height="410" ref="bind-canvas" tabindex="0"></canvas>
                     </div>
@@ -163,11 +163,18 @@
         queryGlsmsLocation,
         graphElementOrderInfoLocal,
         queryFloorByNode,
-        bindAttachObject
+		bindAttachObject,
+		readGroup
     } from "@/api/editer";
     import bus from "@/bus";
     import {getUrlMsg} from '@/components/urlMsg.js';
     import { mapGetters } from 'vuex';
+    import { FloorView } from "@/lib/FloorView";
+    import { EditScence } from "@/components/mapClass/EditScence";
+    import { ProjectRf } from "@saga-web/feng-map";
+	import { SImageItem, SImageShowType } from "@saga-web/graph/lib";
+	import { STopologyParser } from "@/lib/parsers/STopologyParser";
+    import { SFloorParser, SBoardItem } from "@saga-web/big";
 
     export default {
         name: "edit-dialog",
@@ -293,7 +300,12 @@
                 mapType: "",
                 mapFloor: "",
                 bindTreeData: [],
-                GraphsIdList: []
+                GraphsIdList: [],
+                view: '',
+                scene: '',
+                mapServerURL: "http://map.wanda.cn/editor",
+                selectedNode: {},
+                canvasLoading: false
             }
         },
         watch: {
@@ -353,9 +365,17 @@
                 if (data && data.Id) {
                     this.mapFloor = data.label;
                     this.mapType = node.parent.data.label;
+                    if (data.id == this.selectedNode.id) {
+                        return
+                    }
+                    this.canvasLoading = true;
+                    this.selectedNode = data;
+                    this.initGraph()
                 } else {
                     this.mapFloor = "";
                     this.mapType = "";
+                    this.selectedNode = {};
+                    this.clearGraphy()
                 }
             },
             // 查询相关图并打开批量绑定弹窗
@@ -392,7 +412,8 @@
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
                                                 graph.label = graph.Floor.Code;
-                                                graph.id = graph.Id;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
                                                 floorTreeLast.children.push(graph);
                                             })
                                         }
@@ -427,7 +448,8 @@
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
                                                 graph.label = graph.Floor.Code;
-                                                graph.id = graph.Id;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
                                                 systemTreeLast.children.push(graph);
                                             })
                                         }
@@ -462,7 +484,8 @@
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
                                                 graph.label = graph.Floor.Code;
-                                                graph.id = graph.Id;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
                                                 equipTreeLast.children.push(graph);
                                             })
                                         }
@@ -950,8 +973,212 @@
                     })
                 }
 
-            }
-        },
+            },
+            // 清除底图
+            clearGraphy() {
+                if (this.view) {
+                    this.view.scene = null;
+                    return;
+                }
+                this.view = new FloorView("bind-canvas");
+                document.getElementById("bind-canvas").focus();
+            },
+            // 初始化
+            initGraph(){
+                this.clearGraphy();
+				this.scene = new EditScence();
+                this.scene.isEditStatus = false;
+				this.parserData(this.selectedNode.FloorId)
+            },
+            // 解析数据
+			parserData(floor) {
+				const obj = getUrlMsg()
+				this.floorList = window.FENGMAP.gnameToGid
+				if (floor == "g80") {
+					// 屋顶
+					if (window.FENGMAP.frImg) {
+					const pj = obj.fmapID.split('_')[0]
+					// 单张图片
+					if (!ProjectRf[pj]) {
+						const imgItem = new SImageItem(
+						null,
+						`${this.mapServerURL}/webtheme/${obj.fmapID}/${window.FENGMAP.frImg}`
+						);
+						imgItem.showType = SImageShowType.AutoFit;
+						imgItem.connect("imgLoadOver", this, () => {
+							this.readGraph();
+						});
+						this.scene.addItem(imgItem);
+						this.view.scene = this.scene;
+					} else {
+						// 多张图
+						try {
+							// 初始化0
+							this.count = 0;
+							ProjectRf[pj].forEach(t => {
+								const item = new SImageItem(
+								null,
+								`${this.mapServerURL}/webtheme/${obj.fmapID}/${t.name}`
+								);
+								item.width = t.width
+								item.height = t.height
+								item.moveTo(t.x, t.y)
+								item.connect("imgLoadOver", this, () => {
+									this.countRf(ProjectRf[pj].length);
+								});
+								this.scene.addItem(item);
+							})
+							this.view.scene = this.scene;
+						} catch(e) {
+							console.log(e);
+						}
+					}
+					} else {
+					// 屋顶图不为图片
+					this.readBaseMap(floor);
+					}
+				} else {
+					if (this.floorList[floor]) {
+						this.readBaseMap(floor);
+					} else {
+						console.log("楼层不正确");
+					}
+				}
+			},
+			// 顶楼为多张图时计数器
+			countRf(len) {
+				this.count++
+				console.log(len == this.count);
+				if (len == this.count) {
+					this.readGraph();
+				} else {
+					console.log('所有图片未加载完成');
+				}
+			},
+			// 读取绘制数据
+			readGraph() {
+                const pa = {
+                    categoryId: this.selectedNode.CategoryId,
+					projectId: this.selectedNode.ProjectId,
+					BuildingID: this.selectedNode.BuildingId, // 建筑ID
+                    FloorID: this.selectedNode.FloorId, // 楼层id
+                    Pub: this.selectedNode.Type == "HasPub", // false-草稿箱
+                }
+				readGroup(pa).then(data => {
+					if (data.Data) {
+					this.graphId = data.Data[0].ID;
+					const parserData = new STopologyParser(null);
+					const itemMap = {};
+					parserData.parseData(data.Data[0].Elements);
+					// 多边形(此item需在直线item添加之前添加)
+					parserData.zoneLegendList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Nodes.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加文字(此item需在直线item添加之前添加)
+					parserData.textMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加图片(此item需在直线item添加之前添加)
+					parserData.imageMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加图标类图例(此item需在管线item添加之前添加)
+					parserData.imageLegendList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Nodes.push(t);
+						if (t.anchorList && t.anchorList.length) {
+                            t.anchorList.forEach(anc => {
+                                itemMap[anc.id] = anc;
+                            });
+						}
+					});
+					// 增加直线
+					parserData.lineMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						// 设置关联Item
+						if (t.data.Properties && t.data.Properties.StartItemId) {
+                            const startItem = itemMap[t.data.Properties.StartItemId];
+                            startItem?.connect("onMove", t, t.changePos);
+                            t.startItem = startItem || null;
+						}
+						if (t.data.Properties && t.data.Properties.EndItemId) {
+                            const endItem = itemMap[t.data.Properties.EndItemId];
+                            endItem?.connect("onMove", t, t.changePos);
+                            t.endItem = endItem || null;
+						}
+					});
+					// 增加管线类(需在图标类图例添加后添加)
+					parserData.relationList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Relations.push(t);
+						// 设置锚点
+						if (t.anchor1ID) {
+						const startAnc = itemMap[t.anchor1ID];
+						if (startAnc) {
+							startAnc.isConnected = true;
+							startAnc.parent?.connect("changePos", t, t.changePos);
+							t.startAnchor = startAnc || null;
+						}
+						}
+						if (t.anchor2ID) {
+						const endAnc = itemMap[t.anchor2ID];
+						if (endAnc) {
+							endAnc.isConnected = true;
+							endAnc.parent?.connect("changePos", t, t.changePos);
+							t.endAnchor = endAnc || null;
+						}
+						}
+					});
+					}
+					this.view.fitSceneToView();
+                    this.canvasLoading = false;
+				});
+			},
+			// 解析底图
+			readBaseMap(floor){
+                this.loadBoard(this.floorList[floor]);
+                window.FENGMAP.parseData(this.floorList[floor], res => {
+                    if (res.err) {
+                        console.log(res.err);
+                        return;
+                    }
+                    this.fParser = new SFloorParser(null);
+                    this.fParser.parseData(res);
+                    this.scene.fidToItem = {};
+                    this.fParser.spaceList.forEach(t => {
+                        t.nameColor = "#2a2a2a";
+                        t.zOrder = t.zOrder + t.data.Height;
+                        t.selectable = true;
+                        this.scene.addItem(t);
+                    });
+                    this.scene.spaceList = this.fParser.spaceList;
+                    this.fParser.wallList.forEach(t => {
+                        this.scene.addItem(t)
+                    });
+                    this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+                    this.fParser.doorList.forEach(t => this.scene.addItem(t));
+                    this.fParser.columnList.forEach(t => this.scene.addItem(t));
+                    this.fParser.casementList.forEach(t => this.scene.addItem(t));
+                    this.view.scene = this.scene;
+                    this.readGraph();
+                    console.log("success");
+                });
+			},
+            // 解析楼地板
+            loadBoard(floor){
+                window.FENGMAP.loadFloor(floor, res => {
+                    const zone = new SBoardItem(null, res)
+                    this.scene.addItem(zone);
+                })
+            },
+		},
         created() {
             // 取gcname
             this.floorId = getUrlMsg().FloorID;