|
@@ -0,0 +1,181 @@
|
|
|
|
+<!-- 画板 -->
|
|
|
|
+<template>
|
|
|
|
+ <div class="base-map">
|
|
|
|
+ <canvas
|
|
|
|
+ v-loading="loading"
|
|
|
|
+ id="floorMap4"
|
|
|
|
+ :width="canvasWidth"
|
|
|
|
+ :height="canvasHeight"
|
|
|
|
+ tabindex="0"
|
|
|
|
+ ></canvas>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import { SGraphView, SGraphScene } from "@persagy-web/graph";
|
|
|
|
+import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
|
|
|
|
+import { SColor } from "@persagy-web/draw";
|
|
|
|
+import { eventScene } from "./addEventClass/eventScene";
|
|
|
|
+const map1 = require("../../../public/assets/map/1.json");
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ canvasWidth: 0, // 画布的宽
|
|
|
|
+ canvasHeight: 0, // 画布的高
|
|
|
|
+ view: null, // 视图 view
|
|
|
|
+ scene: null, // 场景类
|
|
|
|
+ dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
|
|
|
|
+ mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
|
|
|
|
+ loading: false,
|
|
|
|
+ isShowColumn: false, //是否展示柱子
|
|
|
|
+ isShowWall: false, //是否显示墙
|
|
|
|
+ isShowVirtualWall: false, //是否显示虚拟墙
|
|
|
|
+ isShowDoor: false, // 是否显示门
|
|
|
|
+ isShowWindow: false, //是否显示窗户
|
|
|
|
+ isSpaceSelectable: true, //是否显示空间
|
|
|
|
+ selectItem: null, // 选中的 item 实例
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 初始化
|
|
|
|
+ init() {
|
|
|
|
+ this.clearImg();
|
|
|
|
+ this.view ? (this.view.scene = this.scene) : null;
|
|
|
|
+ // 解析数据并放入压缩包中
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.parserData(map1.EntityList[0].Elements);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 解析数据并注入 scene 类中
|
|
|
|
+ parserData(data) {
|
|
|
|
+ let parser = new SFloorParser();
|
|
|
|
+ parser.parseData(data);
|
|
|
|
+ parser.spaceList.forEach((t) => {
|
|
|
|
+ /////////////////////////////////////////
|
|
|
|
+ // 样式调整
|
|
|
|
+ // 是否显示实例
|
|
|
|
+ t.visible = this.isSpaceSelectable;
|
|
|
|
+ //是否展示名称
|
|
|
|
+ t.showBaseName = false;
|
|
|
|
+ // 显示边框色
|
|
|
|
+ t.strokeColor = new SColor("#F0F3F7");
|
|
|
|
+ // 填充色
|
|
|
|
+ t.fillColor = new SColor("#F0F3F7");
|
|
|
|
+ // 边框线宽
|
|
|
|
+ t.lineWidth = 1;
|
|
|
|
+
|
|
|
|
+ t.connect("onMouseDown", this, this.onMousedown);
|
|
|
|
+ t.connect("onMouseUp", this, this.onMouseup);
|
|
|
|
+ t.connect("onMouseLeave", this, this.onMouseleave);
|
|
|
|
+ t.connect("onMouseEnter", this, this.onMouseenter);
|
|
|
|
+ // 添加图例
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ parser.wallList.forEach((t) => {
|
|
|
|
+ // 是否显示
|
|
|
|
+ t.visible = this.isShowWall;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ parser.virtualWallList.forEach((t) => {
|
|
|
|
+ // 是否显示
|
|
|
|
+ t.visible = this.isShowVirtualWall;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ parser.doorList.forEach((t) => {
|
|
|
|
+ // 是否显示
|
|
|
|
+ t.visible = this.isShowDoor;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ parser.columnList.forEach((t) => {
|
|
|
|
+ // 是否显示
|
|
|
|
+ t.visible = this.isShowColumn;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ parser.casementList.forEach((t) => {
|
|
|
|
+ // 是否显示
|
|
|
|
+ t.visible = this.isShowWindow;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 画板是否可拖动
|
|
|
|
+ this.view.DragMove = true;
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 鼠标点击事件
|
|
|
|
+ onMousedown(item, e) {
|
|
|
|
+ const DefaltColor = "#F0F3F7"; //默认颜色
|
|
|
|
+ const clickColor = "#7ed321";
|
|
|
|
+ // 如果点击前有选中的 selectItem 清空
|
|
|
|
+ if (this.selectItem) {
|
|
|
|
+ this.selectItem.fillColor = new SColor(DefaltColor);
|
|
|
|
+ this.selectItem.strokeColor = new SColor(DefaltColor);
|
|
|
|
+ }
|
|
|
|
+ // 是否选中 item
|
|
|
|
+ if (item) {
|
|
|
|
+ // 判断当前 item 是否重复点击或者之前 selectItem = null
|
|
|
|
+ if (this.selectItem) {
|
|
|
|
+ if (this.selectItem != item) {
|
|
|
|
+ // 之前空间置回原来的状态
|
|
|
|
+ const oldSelectItem = this.selectItem;
|
|
|
|
+ oldSelectItem.fillColor = new SColor(DefaltColor);
|
|
|
|
+ oldSelectItem.strokeColor = new SColor(DefaltColor);
|
|
|
|
+ // 新item高亮
|
|
|
|
+ const newSelectItem = item;
|
|
|
|
+ newSelectItem.fillColor = new SColor(clickColor);
|
|
|
|
+ newSelectItem.strokeColor = new SColor(clickColor);
|
|
|
|
+ this.selectItem = newSelectItem;
|
|
|
|
+ } else {
|
|
|
|
+ // 将选中的item 置为默认状态 选中 selectItem 为空
|
|
|
|
+ const oldSelectItem = this.selectItem;
|
|
|
|
+ oldSelectItem.fillColor = new SColor(DefaltColor);
|
|
|
|
+ oldSelectItem.strokeColor = new SColor(DefaltColor);
|
|
|
|
+ this.selectItem = null;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ // 如果点击前没有选中的 item 则直接赋给
|
|
|
|
+ this.selectItem = item;
|
|
|
|
+ this.selectItem.fillColor = new SColor(clickColor);
|
|
|
|
+ this.selectItem.strokeColor = new SColor(clickColor);
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.selectItem = null;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 鼠标抬起事件
|
|
|
|
+ onMouseup(item, e) {},
|
|
|
|
+ // 鼠标事件移入
|
|
|
|
+ onMouseenter(item, e) {
|
|
|
|
+ if (this.selectItem && item == this.selectItem) return;
|
|
|
|
+ item.fillColor = new SColor("#E1F2FF");
|
|
|
|
+ item.strokeColor = new SColor("#E1F2FF");
|
|
|
|
+ },
|
|
|
|
+ // 鼠标事件移出
|
|
|
|
+ onMouseleave(item, e) {
|
|
|
|
+ if (this.selectItem && item == this.selectItem) return;
|
|
|
|
+ item.fillColor = new SColor("#F0F3F7");
|
|
|
|
+ item.strokeColor = new SColor("#F0F3F7");
|
|
|
|
+ },
|
|
|
|
+ // 清空画布
|
|
|
|
+ clearImg() {
|
|
|
|
+ this.scene = new eventScene();
|
|
|
|
+ this.scene.vueOnMouseDown = this.onMousedown;
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.update();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.clearImg();
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ // 获取 canvas 的宽高
|
|
|
|
+ this.canvasWidth = 800;
|
|
|
|
+ this.canvasHeight = 600;
|
|
|
|
+ // 初始化场景类
|
|
|
|
+ this.view = new SGraphView("floorMap4");
|
|
|
|
+ if (this.scene) {
|
|
|
|
+ this.view.scene = this.scene;
|
|
|
|
+ this.init();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|