<!-- 画板 --> <template> <div ref="basetopu" class="base-topu"> <canvas id="floor_topu" :width="canvasWidth" :height="canvasHeight" tabindex="0" ></canvas> <scaleBtn v-show="hasShowContro" class="sacle-btn" @sacle="changeSize" ></scaleBtn> </div> </template> <script> import { topuScene } from "./topuClass/topuScene"; import { FloorView } from "./topuClass/FloorView"; import { readPubGroup } from "@/api/tuopu"; // 引入获取底图得接口 import scaleBtn from "./scale"; import { PTopoParser } from "./topuClass/PTopoParser"; import { SColor, SFont, SPoint } from "@persagy-web/draw"; import { SLineStyle } from "@persagy-web/graph"; export default { components: { scaleBtn }, props: { // 是否展示大小控制器 hasShowContro: { type: Boolean, default: true, required: false, }, }, data() { return { canvasWidth: 0, // 画布的宽 canvasHeight: 0, // 画布的高 view: null, // 视图 view scene: null, // 场景类 }; }, methods: { fixWindow() { this.view.fitSceneToView(); }, // 初始化 init() { this.clearImg(); this.view ? (this.view.scene = this.scene) : null; // 获取压缩包数据并解压 this.getMapBlob(); }, // 请求获取地图的压缩包 getMapBlob() { if (false) { const obj = { // graphId: "0314991b0cd148ba89da60eddf30efd1", projectId: "Pj4403070003", graphId: "994d0f65d647426f854d2a5f7f0173a4", id: "be4c75daf4d44cb89b447eb7581614da", }; } const obj = { graphId: window._graphId, id: window._id, projectId: window._projectId, }; // 已发布 readPubGroup(obj).then((res) => { this.statDeviceIds(res); this.getDataSuc(res); }); }, // 读图成功回调 getDataSuc(res) { let anchorList = []; //保存锚点对象 // 'url 新增路径' if (res.result == "failure") return; const parse = new PTopoParser(); if (this.scene) { const backgroundColor = res.data.content.viewBackground ? res.data.content.viewBackground : "#1f1f27"; this.scene.changeBackgroundColor(backgroundColor); } window.parse = parse; if ( res.data.content.elements.nodes && res.data.content.elements.nodes.length ) { res.data.content.elements.nodes = res.data.content.elements.nodes.map( (obj) => { if (obj.properties.type == "BaseEquipment") { if (obj.style.default.url) { obj.style.default.url = window.img_baseurl + "/image-service/common/image_get?systemId=dataPlatform&key=" + obj.properties.state[1].pic; } else { // 默认图标 obj.style.default.url = window.img_baseurl + "/image-service/common/image_get?systemId=dataPlatform&key=" + "1607752841478.svg"; } } return obj; } ); } parse.parseData(res.data.content.elements); parse.markers.forEach((item) => { this.scene.addItem(item); }); parse.nodes.forEach((item) => { // item.moveable = false; if ("BaseEquipment" == item.data.properties.type) { item.setEquipName(); item.setStatusPointColor("#7ed321"); } // 相关事件触发 item.connect("onMouseDown", this, this.onMousedown); item.connect("onMouseUp", this, this.onMouseup); item.connect("onMouseLeave", this, this.onMouseleave); item.connect("onMouseEnter", this, this.onMouseenter); this.scene.addItem(item); }); parse.relations.forEach((t) => { // 设置锚点 if (t.anchor1Id) { let startAnc = null; anchorList.forEach((aItem) => { if (aItem.id == t.anchor1Id) { startAnc = aItem; } }); if (startAnc) { startAnc.isConnected = true; startAnc.parent?.connect("changePos", t, t.changePos); t.startAnchor = startAnc || null; } } if (t.anchor12d) { let endAnc = null; anchorList.forEach((aItem) => { if (aItem.id == t.anchor12d) { endAnc = aItem; } }); if (endAnc) { endAnc.isConnected = true; endAnc.parent?.connect("changePos", t, t.changePos); t.endAnchor = endAnc || null; } } this.scene.addItem(t); }); this.fixWindow(); }, // 读图成功回调 statDeviceIds(res) { let anchorList = []; //保存锚点对象 // 'url 新增路径' if (res.result == "failure") return; const parse = new PTopoParser(); if ( res.data.content.elements.nodes && res.data.content.elements.nodes.length ) { let tempDatas = res.data.content.elements.nodes.map((obj) => { return obj.attachObjectIds[0]; }); } }, // 图片缩小 changeSize(isbiger) { if (isbiger) { this.view.scaleByPoint( (this.view.scale * 1.1) / this.view.scale, this.canvasWidth / 2, this.canvasHeight / 2 ); } else { this.view.scaleByPoint( (this.view.scale * 0.9) / this.view.scale, this.canvasWidth / 2, this.canvasHeight / 2 ); } }, // 清空画布 clearImg() { this.scene = new topuScene(); this.scene.vueOnMouseDown = this.onMousedown; if (this.view) { this.view.update(); } }, // 鼠标点击事件 onMousedown(item, e) { console.log("鼠标按下!", item, e); this.$emit("onMousedown", item, e); }, // 鼠标抬起事件 onMouseup(item, e) { // console.log("鼠标抬起!", item, e); }, // 鼠标事件移入 onMouseenter(item, e) { // 判断是否为设备图例 item.showImgShadow = true; console.log("鼠标移入!", item.img, e); }, // 鼠标事件移出 onMouseleave(item, e) { item.showImgShadow = false; console.log("鼠标移出!", item, e); }, }, watch: {}, created() { this.clearImg(); }, mounted() { // 获取 canvas 的宽高 this.canvasWidth = this.$refs.basetopu.offsetWidth; this.canvasHeight = this.$refs.basetopu.offsetHeight; // 初始化场景类 this.view = new FloorView("floor_topu"); if (this.scene) { this.view.scene = this.scene; } this.init(); }, }; </script> <style lang="less" scoped> .base-topu { width: 100%; height: 100%; position: relative; .sacle-btn { position: absolute; right: 20px; bottom: 20px; } } </style>