|
@@ -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;
|