|
@@ -81,12 +81,12 @@ export default {
|
|
|
* 使用模拟数据,加载绘制后的数据到视图
|
|
|
*/
|
|
|
initLoad() {
|
|
|
- let data = require("./test.json");
|
|
|
+ let data = require("./mock.json");
|
|
|
const parserData = new STopologyParser(null);
|
|
|
parserData.parseData(data.Elements);
|
|
|
let Markers = data.Elements.Markers;
|
|
|
let Nodes = data.Elements.Nodes;
|
|
|
-
|
|
|
+ const itemMap = {};
|
|
|
// 使用 SEquipmentParser 解析器增加设备
|
|
|
let parserData1 = new SEquipmentParser(null);
|
|
|
parserData1.parseData(Nodes);
|
|
@@ -98,22 +98,24 @@ export default {
|
|
|
this.scene.addItem(item);
|
|
|
// this.scene.equipmentItem.push(item);
|
|
|
this.scene.Nodes.push(item);
|
|
|
+ console.log(item);
|
|
|
+ itemMap[item.id] = item;
|
|
|
});
|
|
|
// 使用STopologyParser 解析器 增加直线
|
|
|
parserData.lineMarkerList.map(t => {
|
|
|
this.scene.addItem(t);
|
|
|
this.scene.Markers.push(t);
|
|
|
- // 设置关联Item
|
|
|
- // if (t.data.Properties && t.data.Properties.StartItemId) {
|
|
|
- // const startItem = Nodes.filter(equipment => equipment.ID === t.data.Properties.StartItemId)[0];
|
|
|
- // startItem?.connect("onMove", t, t.changePos);
|
|
|
- // t.startItem = startItem || null;
|
|
|
- // }
|
|
|
- // if (t.data.Properties && t.data.Properties.EndItemId) {
|
|
|
- // const endItem = Nodes.filter(equipment => equipment.ID === t.data.Properties.EndItemId)[0];
|
|
|
- // endItem?.connect("onMove", t, t.changePos);
|
|
|
- // t.endItem = endItem || null;
|
|
|
- // }
|
|
|
+ // 设置关联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;
|
|
|
+ }
|
|
|
});
|
|
|
// bus.$emit("elementDataChange", this.scene);
|
|
|
console.log("initLoad end");
|
|
@@ -194,14 +196,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 读取绘制数据
|
|
|
+ // 读取绘制数据
|
|
|
readGraph() {
|
|
|
this.readGroup().then(data => {
|
|
|
this.graphId = data.Data[0].ID;
|
|
|
bus.$emit("setGraphId", this.graphId);
|
|
|
if (data.Data) {
|
|
|
const parserData = new STopologyParser(null);
|
|
|
+ const itemMap = {};
|
|
|
parserData.parseData(data.Data[0].Elements);
|
|
|
- // 多边形
|
|
|
+ // 多边形(此item需在直线item添加之前添加)
|
|
|
parserData.zoneLegendList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
// 记录提取
|
|
@@ -209,46 +213,59 @@ export default {
|
|
|
this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
|
|
|
}
|
|
|
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);
|
|
|
- });
|
|
|
- // 增加直线
|
|
|
- parserData.lineMarkerList.forEach(t => {
|
|
|
- this.scene.addItem(t);
|
|
|
- this.scene.Markers.push(t);
|
|
|
+ itemMap[t.id] = t;
|
|
|
});
|
|
|
// 增加图标类图例(此item需在管线item添加之前添加)
|
|
|
- const ancToAnchor = {};
|
|
|
parserData.imageLegendList.forEach(t => {
|
|
|
this.scene.addItem(t);
|
|
|
this.scene.Nodes.push(t);
|
|
|
if (t.anchorList && t.anchorList.length) {
|
|
|
t.anchorList.forEach(anc => {
|
|
|
- ancToAnchor[anc.id] = 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 = ancToAnchor[t.anchor1ID];
|
|
|
+ const startAnc = itemMap[t.anchor1ID];
|
|
|
startAnc.isConnected = true;
|
|
|
startAnc.parent?.connect("changePos", t, t.changePos);
|
|
|
t.startAnchor = startAnc || null;
|
|
|
}
|
|
|
if (t.anchor2ID) {
|
|
|
- const endAnc = ancToAnchor[t.anchor2ID];
|
|
|
+ const endAnc = itemMap[t.anchor2ID];
|
|
|
endAnc.isConnected = true;
|
|
|
endAnc.parent?.connect("changePos", t, t.changePos);
|
|
|
t.endAnchor = endAnc || null;
|