|
@@ -118,7 +118,7 @@
|
|
|
<div v-show="data.floor.FloorName.length">
|
|
|
<el-checkbox v-model="data.floor.Checked" :ref="`${key}check`" @change="handleCheckChange(key, data.floor.Checked)"></el-checkbox>
|
|
|
{{`${data.floor.Name}`}}
|
|
|
- <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
+ <el-link :underline="false" type="primary" @click="handleShowMap(data.floor, 'floor')" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
</div>
|
|
|
<div class="bind-equip-list">
|
|
|
<el-tag
|
|
@@ -136,7 +136,7 @@
|
|
|
<div class="bind-equip-title">
|
|
|
<el-checkbox v-model="equip.Checked" :ref="`${key}check`" @change="handleCheckChange(key, equip.Checked)"></el-checkbox>
|
|
|
{{`设备设施:${equip.Name}`}}
|
|
|
- <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
+ <el-link :underline="false" type="primary" @click="handleShowMap(equip, 'equip')" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
</div>
|
|
|
<div class="bind-equip-list">
|
|
|
<el-tag
|
|
@@ -155,7 +155,7 @@
|
|
|
<div class="bind-equip-title">
|
|
|
<el-checkbox v-model="system.Checked" :ref="`${key}check`" @change="handleCheckChange(key, system.Checked)"></el-checkbox>
|
|
|
{{`系统原理图:${system.Name}`}}
|
|
|
- <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
+ <el-link :underline="false" type="primary" @click="handleShowMap(system, 'system')" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
|
|
|
</div>
|
|
|
<div class="bind-equip-list">
|
|
|
<el-tag
|
|
@@ -174,12 +174,17 @@
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
|
|
|
- <a-modal v-model="visibleMap" title="标题" width="1200px"></a-modal>
|
|
|
+ <a-modal v-model="visibleMap" :title="mapName" :footer="null" width="1200px" class="bind-map-dialog">
|
|
|
+ <div class="bind-map-content" v-loading="canvasLoading">
|
|
|
+ <canvas id="bind-canvas" :width="1200" :height="591" ref="bind-canvas" tabindex="0"></canvas>
|
|
|
+ <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import searchTree from "@/components/edit/search_tree";
|
|
|
+ import floorList from "@/components/edit/floorList.vue";
|
|
|
import {
|
|
|
queryGlsmsasset,
|
|
|
getQuerySmsxt,
|
|
@@ -190,15 +195,22 @@
|
|
|
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",
|
|
|
- components: {searchTree},
|
|
|
+ components: {floorList},
|
|
|
props: {
|
|
|
sysNum: Number,//设备总数
|
|
|
attrCards: Array,
|
|
@@ -303,7 +315,6 @@
|
|
|
},
|
|
|
],
|
|
|
tableData: [],
|
|
|
- loading: false,
|
|
|
page: 1,
|
|
|
size: 10,
|
|
|
treeData: [],
|
|
@@ -330,7 +341,15 @@
|
|
|
HasPub: {},
|
|
|
NotPub: {}
|
|
|
},
|
|
|
- GraphsIdList: []
|
|
|
+ GraphsIdList: [],
|
|
|
+ visibleMap: false,
|
|
|
+ mapName: "",
|
|
|
+ floorsArr: [],
|
|
|
+ view: '',
|
|
|
+ scene: '',
|
|
|
+ mapServerURL: "http://map.wanda.cn/editor",
|
|
|
+ activeFloor: null,
|
|
|
+ canvasLoading: false
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -469,10 +488,9 @@
|
|
|
const floor = this.bindData[key].floor;
|
|
|
if (item.Graphs.length) {
|
|
|
item.Graphs.forEach(graph => {
|
|
|
- floor.FloorName.push({
|
|
|
- Id: graph.Id,
|
|
|
- Name: graph.Floor.Code
|
|
|
- });
|
|
|
+ graph.Name = graph.Floor.Code;
|
|
|
+ graph.Type = key;
|
|
|
+ floor.FloorName.push(graph);
|
|
|
// this.GraphsIdList.push(graph.Id);
|
|
|
})
|
|
|
}
|
|
@@ -495,10 +513,9 @@
|
|
|
const systemLast = this.bindData[key].system[this.bindData[key].system.length - 1];
|
|
|
if (item.Graphs.length) {
|
|
|
item.Graphs.forEach(graph => {
|
|
|
- systemLast.FloorName.push({
|
|
|
- Id: graph.Id,
|
|
|
- Name: graph.Floor.Code
|
|
|
- });
|
|
|
+ graph.Name = graph.Floor.Code;
|
|
|
+ graph.Type = key;
|
|
|
+ systemLast.FloorName.push(graph);
|
|
|
// this.GraphsIdList.push(graph.Id);
|
|
|
})
|
|
|
}
|
|
@@ -521,10 +538,9 @@
|
|
|
const equipLast = this.bindData[key].equip[this.bindData[key].equip.length - 1];
|
|
|
if (item.Graphs.length) {
|
|
|
item.Graphs.forEach(graph => {
|
|
|
- equipLast.FloorName.push({
|
|
|
- Id: graph.Id,
|
|
|
- Name: graph.Floor.Code
|
|
|
- });
|
|
|
+ graph.Name = graph.Floor.Code;
|
|
|
+ graph.Type = key;
|
|
|
+ equipLast.FloorName.push(graph);
|
|
|
// this.GraphsIdList.push(graph.Id);
|
|
|
})
|
|
|
}
|
|
@@ -574,6 +590,29 @@
|
|
|
this.visibleBind = false;
|
|
|
this.visible = false;
|
|
|
},
|
|
|
+ // 点击查看按钮
|
|
|
+ handleShowMap(data, type) {
|
|
|
+ this.floorsArr = [];
|
|
|
+ if (type == 'floor') {
|
|
|
+ this.mapName = data.Name;
|
|
|
+ } else if (type == 'equip') {
|
|
|
+ this.mapName = `设备设施 - ${data.Name}`;
|
|
|
+ } else if (type == 'system') {
|
|
|
+ this.mapName = `系统原理图 - ${data.Name}`;
|
|
|
+ }
|
|
|
+ this.floorsArr = data.FloorName;
|
|
|
+ this.visibleMap = true;
|
|
|
+ },
|
|
|
+ // 切换楼层
|
|
|
+ emitFloor(floorObj) {
|
|
|
+ if (floorObj) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.canvasLoading = true;
|
|
|
+ this.activeFloor = floorObj;
|
|
|
+ this.initGraph(floorObj.FloorId);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
// 点击批量绑定按钮
|
|
|
handleClickBind(Marked) {
|
|
|
const lists = [];
|
|
@@ -1031,7 +1070,211 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 清除底图
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.view = new FloorView("bind-canvas");
|
|
|
+ document.getElementById("bind-canvas").focus();
|
|
|
+ },
|
|
|
+ // 初始化
|
|
|
+ initGraph(floor){
|
|
|
+ this.clearGraphy();
|
|
|
+ this.scene = new EditScence();
|
|
|
+ this.scene.isEditStatus = false;
|
|
|
+ this.parserData(floor);
|
|
|
+ },
|
|
|
+ // 解析数据
|
|
|
+ parserData(floor) {
|
|
|
+ const obj = getUrlMsg()
|
|
|
+ this.floorMapList = 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.floorMapList[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.activeFloor.CategoryId,
|
|
|
+ projectId: this.activeFloor.ProjectId,
|
|
|
+ BuildingID: this.activeFloor.BuildingId, // 建筑ID
|
|
|
+ FloorID: this.activeFloor.FloorId, // 楼层id
|
|
|
+ Pub: this.activeFloor.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.floorMapList[floor]);
|
|
|
+ window.FENGMAP.parseData(this.floorMapList[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
|
|
@@ -1207,4 +1450,19 @@
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .bind-map-dialog {
|
|
|
+ .bind-map-content {
|
|
|
+ position: relative;
|
|
|
+ #system {
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ right: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/ .ant-modal-body {
|
|
|
+ padding: 0;
|
|
|
+ background: #F2F5F7;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|