123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364 |
- <!-- 画板 -->
- <template>
- <div ref="baseMap" class="base-map">
- <canvas
- id="floorMap"
- :width="canvasWidth"
- :height="canvasHeight"
- tabindex="0"
- ></canvas>
- </div>
- </template>
- <script>
- import { SGraphScene } from "@persagy-web/graph/lib";
- import { SGraphView, SGraphSvgItem } from "@persagy-web/graph";
- import { SFloorParser, getJsonz } from "@persagy-web/big/lib";
- import { SZoneParser } from "@persagy-web/big";
- export default {
- props: {
-
- hasShowContro: {
- type: Boolean,
- default: true,
- required: false,
- },
-
-
-
- isShowColumn: {
- type: Boolean,
- default: false,
- required: false,
- },
-
- isShowWall: {
- type: Boolean,
- default: false,
- required: false,
- },
-
- isShowVirtualWall: {
- type: Boolean,
- default: false,
- required: false,
- },
-
- isShowDoor: {
- type: Boolean,
- default: false,
- required: false,
- },
-
- isShowWindow: {
- type: Boolean,
- default: false,
- required: false,
- },
-
- isSpaceSelectable: {
- type: Boolean,
- default: true,
- required: false,
- },
-
- showBaseName: {
- type: Boolean,
- default: false,
- required: false,
- },
- },
- data() {
- return {
- canvasWidth: 0,
- canvasHeight: 0,
- view: null,
- scene: null,
- };
- },
- methods: {
-
- init() {
- this.clearImg();
- this.view ? (this.view.scene = this.scene) : null;
-
- this.getMapBlob();
- },
-
- emitChoice(itemList) {
- this.$emit("emitChoice", itemList);
- this.choiceListLength = itemList.length;
- },
-
- vueOnMouseDown(e) {
-
- if (!this.view.isDrag) {
- this.$emit("vueOnMouseDown", e);
-
-
- setTimeout(() => {
- if (this.choiceListLength) {
- if (
- (typeof this.SetNewMarkConfig == "boolean" &&
- this.SetNewMarkConfig == true) ||
- typeof this.SetNewMarkConfig == "object"
- ) {
- this.setNewMark(e, this.SetNewMarkConfig);
- }
- }
- }, 100);
- }
- },
-
- getMapBlob() {
- const url = this.mapUrl + this.dataKey;
- getJsonz(url).then((data) => {
-
- this.parserData(data);
- });
- },
-
- parserData(data) {
- let parser = new SFloorParser();
- parser.parseData(data);
- parser.spaceList.forEach((t) => {
-
- t.visible = this.isSpaceSelectable;
-
- t.style = this.baseMapStyle;
-
- t.showBaseName = this.showBaseName;
-
- t.selectable = true;
- t.connect("onMouseDown", this, this.clickSpaceItem);
-
- this.scene.addItem(t);
- });
- parser.wallList.forEach((t) => {
-
- t.visible = this.isShowWall;
-
- t.selectable = true;
- this.scene.addItem(t);
- });
- parser.virtualWallList.forEach((t) => {
-
- t.visible = this.isShowVirtualWall;
-
- t.selectable = true;
- this.scene.addItem(t);
- });
- parser.doorList.forEach((t) => {
-
- t.visible = this.isShowDoor;
-
- t.selectable = true;
- this.scene.addItem(t);
- });
- parser.columnList.forEach((t) => {
-
- t.visible = this.isShowColumn;
-
- t.selectable = true;
- this.scene.addItem(t);
- });
- parser.casementList.forEach((t) => {
-
- t.visible = this.isShowWindow;
-
- t.selectable = true;
- this.scene.addItem(t);
- });
-
- this.view.DragMove = true;
- this.view.fitSceneToView();
- },
-
- 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
- );
- }
- },
-
- mouseEnter(item, e) {
- if (item.data.ElementType == "Mark") {
- item.status = "highlight";
- }
- this.$emit("mouseEnter", item, e);
- },
-
- mouseLeave(item, e) {
- if (item.data.ElementType == "Mark") {
- item.status = "default";
- }
- this.$emit("mouseLeave", e, item);
- },
-
- clickSpaceItem(item, e) {
- console.log(item, e);
- this.$emit("clickSpaceItem", e, item);
- },
-
- clickEquipItem(item, e) {
- this.$emit("clickEquipItem", e, item);
- },
-
- mapEquipment(val) {
- this.scene ? this.scene.clearEquip() : "";
- const EqParse = new EquipmentParser(new EquipmentFactory());
- const markList = [];
- val.forEach((item) => {
- if (item.bimLocation) {
- const arr = item.bimLocation.split(",");
- const mark = {
- Id: item.equipId,
- ElementType: "Mark",
- equipId: item.equipId,
- Name: item.equipName,
- x: Number(arr[0]),
- y: Number(arr[1]),
- width: item.width,
- height: item.height,
- imgSource: item.imgSource,
- textObj: item.textObj ? item.textObj : null,
- tooltipMsg: item.tooltipMsg || [],
- };
- markList.push(mark);
- }
- });
- EqParse.parseData(markList);
- EqParse.markList.forEach((item) => {
- item.style = this.equipStyle;
- item.status = "disabled";
- item.connect("mouseEnter", this, this.mouseEnter);
- item.connect("mouseLeave", this, this.mouseLeave);
- item.connect("click", this, this.clickEquipItem);
- this.scene.addItem(item);
- });
- this.scene.equipItemList = EqParse.markList;
- },
-
- mapSpace(val) {
- this.scene ? this.scene.clearSpace() : "";
- const parse = new SZoneParser();
- parse.parseData(val);
- parse.zoneList.forEach((item) => {
- item.connect("click", this, this.clickSpaceItem);
- this.scene.addItem(item);
- });
- this.scene.zoonItemList = parse.markList;
- },
-
- clearImg() {
- this.scene = new FloorScene();
- this.scene.emitChoice = this.emitChoice;
- this.scene.vueOnMouseDown = this.vueOnMouseDown;
- if (this.view) {
- this.view.update();
- }
- },
-
- setNewMark(e, markConfig) {
- let markWidth = 30;
- let markHeight = 30;
-
- if (typeof markConfig == "object") {
- markWidth = Number(markConfig.width) ? Number(markConfig.width) : 30;
- markHeight = Number(markConfig.height) ? Number(markConfig.height) : 30;
- }
- let mark = null;
- if (this.newMarkList.length) {
- mark = this.newMarkList[0];
- mark.x = e.x;
- mark.y = e.y;
- } else {
-
- const EqParse = new EquipmentParser(new EquipmentFactory());
- mark = {
- Id: new Date(),
- Name: "",
- width: markWidth,
- height: markHeight,
- x: e.x,
- y: e.y,
- };
- EqParse.parseData([mark]);
- EqParse.markList.forEach((item) => {
- item.style = this.equipStyle;
- this.scene.addItem(item);
- this.newMarkList.push(item);
- });
- }
- this.$emit("setNewMark", e);
- },
- },
- watch: {
-
- zoneList: {
- handler(val) {
- if (val && val.length) {
- this.mapSpace(val);
- }
- },
- deep: true,
- },
-
- equipmentList: {
- handler(val) {
- if (val && val.length) {
- this.mapEquipment(val);
- }
- },
- deep: true,
- },
-
- dataKey: {
- handler(val) {
- if (val) {
- this.init();
- }
- },
- immediate: true,
- },
- },
- created() {
- this.clearImg();
- },
- mounted() {
-
- this.canvasWidth = this.$refs.baseMap.offsetWidth;
- this.canvasHeight = this.$refs.baseMap.offsetHeight;
-
- this.view = new FloorView("floorMap");
- if (this.scene) {
- this.view.scene = this.scene;
- }
- },
- };
- </script>
- <style lang="less" scoped>
- .base-map {
- width: 100%;
- height: 100%;
- position: relative;
- .sacle-btn {
- position: absolute;
- right: 0;
- bottom: 0;
- }
- }
- </style>
|