|
@@ -1,268 +1,293 @@
|
|
<!-- 底图 -->
|
|
<!-- 底图 -->
|
|
<template>
|
|
<template>
|
|
- <div id='floor_base' v-loading='loading' ref='graphy'>
|
|
|
|
- <div :id='`fengMap${id}`' class='fengMap'></div>
|
|
|
|
- <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
|
|
|
|
- <!-- 地图底部操作按钮 -->
|
|
|
|
- <div class='strip-bottom'>
|
|
|
|
- <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
|
|
|
|
- </div>
|
|
|
|
- <room-box ref='boxRoom'></room-box>
|
|
|
|
|
|
+ <div id="floor_base" v-loading="loading" ref="graphy">
|
|
|
|
+ <div :id="`fengMap${id}`" class="fengMap"></div>
|
|
|
|
+ <canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
|
|
|
|
+ <!-- 地图底部操作按钮 -->
|
|
|
|
+ <div class="strip-bottom">
|
|
|
|
+ <canvasFun
|
|
|
|
+ @fit="fit"
|
|
|
|
+ @savePng="savePng"
|
|
|
|
+ @saveSvg="saveSvg"
|
|
|
|
+ @saveJson="saveJson"
|
|
|
|
+ @scale="scale"
|
|
|
|
+ ref="canvasFun"
|
|
|
|
+ ></canvasFun>
|
|
</div>
|
|
</div>
|
|
|
|
+ <room-box ref="boxRoom"></room-box>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { SFengParser } from '@saga-web/feng-map'
|
|
|
|
-import { SFloorParser } from '@saga-web/big'
|
|
|
|
-import { FloorView } from '@/lib/FloorView'
|
|
|
|
-import { FloorScene } from '@/lib/FloorScene'
|
|
|
|
-import RoomBox from '@/views/room/index'
|
|
|
|
-import canvasFun from '@/components/floorMap/canvasFun'
|
|
|
|
-import { readGroup } from '@/api/public'
|
|
|
|
-import { STopologyParser } from '@/lib/parsers/STopologyParser'
|
|
|
|
-import { mapGetters, mapActions } from 'vuex'
|
|
|
|
-import { SImageItem } from '@saga-web/graph/lib'
|
|
|
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
|
+import { SFloorParser } from "@saga-web/big";
|
|
|
|
+import { FloorView } from "@/lib/FloorView";
|
|
|
|
+import { FloorScene } from "@/lib/FloorScene";
|
|
|
|
+import RoomBox from "@/views/room/index";
|
|
|
|
+import canvasFun from "@/components/floorMap/canvasFun";
|
|
|
|
+import { readGroup } from "@/api/public";
|
|
|
|
+import { STopologyParser } from "@/lib/parsers/STopologyParser";
|
|
|
|
+import { mapGetters, mapActions } from "vuex";
|
|
|
|
+import { SImageItem } from "@saga-web/graph/lib";
|
|
// import { uuid } from "@/components/mapClass/until";
|
|
// import { uuid } from "@/components/mapClass/until";
|
|
-let fengmap = null
|
|
|
|
|
|
+let fengmap = null;
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- appName: '万达可视化系统',
|
|
|
|
- key: '23f30a832a862c58637a4aadbf50a566',
|
|
|
|
- mapServerURL: `/wdfn`,
|
|
|
|
- canvasWidth: 1100,
|
|
|
|
- canvasHeight: 800,
|
|
|
|
- loading: false, // 限制重复查询
|
|
|
|
- view: null,
|
|
|
|
- urlMsg: {},
|
|
|
|
- canvasID: 'canvas'
|
|
|
|
- // fmapID:'1001012_42',
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- props: {
|
|
|
|
- id: {
|
|
|
|
- default: '1',
|
|
|
|
- type: String
|
|
|
|
- },
|
|
|
|
- loadName: null,
|
|
|
|
- type: null
|
|
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ appName: "万达可视化系统",
|
|
|
|
+ key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
|
+ mapServerURL: `/wdfn`,
|
|
|
|
+ canvasWidth: 1100,
|
|
|
|
+ canvasHeight: 800,
|
|
|
|
+ loading: false, // 限制重复查询
|
|
|
|
+ view: null,
|
|
|
|
+ urlMsg: {},
|
|
|
|
+ canvasID: "canvas"
|
|
|
|
+ // fmapID:'1001012_42',
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ props: {
|
|
|
|
+ id: {
|
|
|
|
+ default: "1",
|
|
|
|
+ type: String
|
|
},
|
|
},
|
|
- components: { RoomBox, canvasFun },
|
|
|
|
- computed: {
|
|
|
|
- ...mapGetters(['plazaId', 'fmapID'])
|
|
|
|
|
|
+ loadName: null,
|
|
|
|
+ type: null
|
|
|
|
+ },
|
|
|
|
+ components: { RoomBox, canvasFun },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(["plazaId", "fmapID"])
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapActions(["getfmapID"]),
|
|
|
|
+ init(floorid) {
|
|
|
|
+ if (this.loading) {
|
|
|
|
+ //console.log('正在查询...')
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.loading = true;
|
|
|
|
+ if (!this.fmapID) {
|
|
|
|
+ this.getfmapID().then(() => {
|
|
|
|
+ this.urlMsg.fmapID = this.fmapID;
|
|
|
|
+ this.getMap(floorid);
|
|
|
|
+ });
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.getMap(floorid);
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- ...mapActions(['getfmapID']),
|
|
|
|
- init(floorid) {
|
|
|
|
- if (this.loading) {
|
|
|
|
- //console.log('正在查询...')
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.loading = true
|
|
|
|
- if (!this.fmapID) {
|
|
|
|
- this.getfmapID().then(() => {
|
|
|
|
- this.urlMsg.fmapID = this.fmapID
|
|
|
|
- this.getMap(floorid)
|
|
|
|
- })
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- this.getMap(floorid)
|
|
|
|
- },
|
|
|
|
- getMap(floorid) {
|
|
|
|
- this.clearGraphy()
|
|
|
|
- this.scene = new FloorScene()
|
|
|
|
- this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
|
- if (!fengmap || this.canvasID != `canvas${this.id}`) {
|
|
|
|
- this.canvasID = `canvas${this.id}`
|
|
|
|
- fengmap = new SFengParser(`fengMap${this.id}`, `${this.mapServerURL}/fmap/${this.fmapID}`, this.key, this.appName, null)
|
|
|
|
- fengmap.loadMap(this.fmapID, () => {
|
|
|
|
- this.parserData(floorid)
|
|
|
|
- })
|
|
|
|
- // 获取主题数据
|
|
|
|
- fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
|
|
|
|
- //console.log('获取rf成功', res)
|
|
|
|
- })
|
|
|
|
- this.readGroup().then(data => {
|
|
|
|
- if (data.data.Data.length > 0) {
|
|
|
|
- //console.log(data.data.Data[0].ID)
|
|
|
|
- this.$cookie.set('graphId', data.data.Data[0].ID, 3)
|
|
|
|
- }
|
|
|
|
- const parserData = new STopologyParser(null)
|
|
|
|
- parserData.parseData(data.data.Data[0].Elements)
|
|
|
|
- // 多边形
|
|
|
|
- parserData.zoneLegendList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- // 增加文字
|
|
|
|
- parserData.textMarkerList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- // 增加图片
|
|
|
|
- parserData.imageMarkerList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- // 增加直线
|
|
|
|
- parserData.lineMarkerList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- // 增加图标类图例
|
|
|
|
- parserData.imageLegendList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- // 增加管线类
|
|
|
|
- // 增加图标类图例
|
|
|
|
- parserData.relationList.forEach(t => {
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- this.view.fitSceneToView()
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.parserData(floorid)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- parserData(floor) {
|
|
|
|
- if (floor == 'g80') {
|
|
|
|
- // 屋顶
|
|
|
|
- if (fengmap.frImg) {
|
|
|
|
- let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`)
|
|
|
|
- this.scene.addItem(imgItem)
|
|
|
|
- this.view.scene = this.scene
|
|
|
|
- this.view.fitSceneToView()
|
|
|
|
- this.view.minScale = this.view.scale
|
|
|
|
- if (this.$refs.canvasFun) {
|
|
|
|
- this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
|
- }
|
|
|
|
- this.loading = false
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- if (fengmap.gnameToGid[floor]) {
|
|
|
|
- fengmap.parseData(fengmap.gnameToGid[floor], res => {
|
|
|
|
- if (res.err) {
|
|
|
|
- //console.log(res.err)
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- const fParser = new SFloorParser(null)
|
|
|
|
- fParser.parseData(res)
|
|
|
|
- fParser.spaceList.forEach(t => {
|
|
|
|
- t.selectable = true
|
|
|
|
- this.scene.addItem(t)
|
|
|
|
- })
|
|
|
|
- fParser.wallList.forEach(t => this.scene.addItem(t))
|
|
|
|
- fParser.virtualWallList.forEach(t => this.scene.addItem(t))
|
|
|
|
- fParser.doorList.forEach(t => this.scene.addItem(t))
|
|
|
|
- fParser.columnList.forEach(t => this.scene.addItem(t))
|
|
|
|
- fParser.casementList.forEach(t => this.scene.addItem(t))
|
|
|
|
- this.view.scene = this.scene
|
|
|
|
- this.view.fitSceneToView()
|
|
|
|
- this.view.minScale = this.view.scale
|
|
|
|
- if (this.$refs.canvasFun) {
|
|
|
|
- this.$refs.canvasFun.everyScale = this.view.scale
|
|
|
|
- }
|
|
|
|
- this.loading = false
|
|
|
|
- //console.log('success')
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- //console.log('楼层不正确')
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- clearGraphy() {
|
|
|
|
- if (this.view) {
|
|
|
|
- this.view.scene = null
|
|
|
|
- return
|
|
|
|
|
|
+ getMap(floorid) {
|
|
|
|
+ this.clearGraphy();
|
|
|
|
+ this.scene = new FloorScene();
|
|
|
|
+ this.scene.selectContainer.connect("listChange", this, this.listChange);
|
|
|
|
+ if (!fengmap || this.canvasID != `canvas${this.id}`) {
|
|
|
|
+ this.canvasID = `canvas${this.id}`;
|
|
|
|
+ fengmap = new SFengParser(
|
|
|
|
+ `fengMap${this.id}`,
|
|
|
|
+ `${this.mapServerURL}/fmap/${this.fmapID}`,
|
|
|
|
+ this.key,
|
|
|
|
+ this.appName,
|
|
|
|
+ null
|
|
|
|
+ );
|
|
|
|
+ fengmap.loadMap(this.fmapID, () => {
|
|
|
|
+ this.parserData(floorid);
|
|
|
|
+ this.readGroup(floorid).then(data => {
|
|
|
|
+ if (data.Data.length > 0) {
|
|
|
|
+ //console.log(data.data.Data[0].ID)
|
|
|
|
+ this.$cookie.set("graphId", data.Data[0].ID, 3);
|
|
}
|
|
}
|
|
- this.view = new FloorView(`canvas${this.id}`)
|
|
|
|
- },
|
|
|
|
- listChange(item, ev) {
|
|
|
|
- let name = ev[0][0].data.Name
|
|
|
|
- if (name.slice(name.length - 2, name.length) == '机房') {
|
|
|
|
- this.$refs.boxRoom.open({ name: name, type: this.type })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 适配底图到窗口
|
|
|
|
- fit() {
|
|
|
|
- this.view.fitSceneToView()
|
|
|
|
- },
|
|
|
|
- // 保存为png
|
|
|
|
- savePng() {
|
|
|
|
- this.view.saveImage(`${this.loadName}.png`, 'png')
|
|
|
|
- //console.log(`${this.loadName}.png`)
|
|
|
|
- },
|
|
|
|
- // 保存为svg
|
|
|
|
- saveSvg() {
|
|
|
|
- this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
|
|
|
|
- },
|
|
|
|
- // 保存为json
|
|
|
|
- saveJson() {
|
|
|
|
- this.view.saveFloorJson(`${this.loadName}.json`)
|
|
|
|
- },
|
|
|
|
- // 缩放
|
|
|
|
- scale(val) {
|
|
|
|
- if (!this.view) {
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- let scale = this.view.scale
|
|
|
|
- console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
|
- this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
|
- },
|
|
|
|
- // 读取数据
|
|
|
|
- readGroup() {
|
|
|
|
- const data = {
|
|
|
|
- // categoryId: this.urlMsg.categoryId,
|
|
|
|
- categoryId: this.$cookie.get('categoryId'),
|
|
|
|
- projectId: this.urlMsg.ProjectID
|
|
|
|
|
|
+ const parserData = new STopologyParser(null);
|
|
|
|
+ parserData.parseData(data.Data[0].Elements);
|
|
|
|
+ // 多边形
|
|
|
|
+ parserData.zoneLegendList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 增加文字
|
|
|
|
+ parserData.textMarkerList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 增加图片
|
|
|
|
+ parserData.imageMarkerList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 增加直线
|
|
|
|
+ parserData.lineMarkerList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 增加图标类图例
|
|
|
|
+ parserData.imageLegendList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ // 增加管线类
|
|
|
|
+ // 增加图标类图例
|
|
|
|
+ parserData.relationList.forEach(t => {
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ // 获取主题数据
|
|
|
|
+ fengmap
|
|
|
|
+ .loadTheme(
|
|
|
|
+ `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
|
|
|
|
+ )
|
|
|
|
+ .then(res => {
|
|
|
|
+ //console.log('获取rf成功', res)
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ this.parserData(floorid);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ parserData(floor) {
|
|
|
|
+ if (floor == "g80") {
|
|
|
|
+ // 屋顶
|
|
|
|
+ if (fengmap.frImg) {
|
|
|
|
+ let imgItem = new SImageItem(
|
|
|
|
+ null,
|
|
|
|
+ `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
|
|
|
|
+ );
|
|
|
|
+ this.scene.addItem(imgItem);
|
|
|
|
+ this.view.scene = this.scene;
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ this.view.minScale = this.view.scale;
|
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale;
|
|
|
|
+ }
|
|
|
|
+ this.loading = false;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ if (fengmap.gnameToGid[floor]) {
|
|
|
|
+ fengmap.parseData(fengmap.gnameToGid[floor], res => {
|
|
|
|
+ if (res.err) {
|
|
|
|
+ //console.log(res.err)
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- return readGroup(data)
|
|
|
|
- },
|
|
|
|
- // 地图尺寸
|
|
|
|
- mapSize() {
|
|
|
|
- if (window.screen.height == '768') {
|
|
|
|
- this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
|
|
- this.canvasHeight = this.$refs.graphy.offsetHeight - 100
|
|
|
|
- } else {
|
|
|
|
- this.canvasWidth = this.$refs.graphy.offsetWidth
|
|
|
|
- this.canvasHeight = 900
|
|
|
|
|
|
+ const fParser = new SFloorParser(null);
|
|
|
|
+ fParser.parseData(res);
|
|
|
|
+ fParser.spaceList.forEach(t => {
|
|
|
|
+ t.selectable = true;
|
|
|
|
+ this.scene.addItem(t);
|
|
|
|
+ });
|
|
|
|
+ fParser.wallList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ fParser.virtualWallList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ fParser.doorList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ fParser.columnList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ fParser.casementList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.view.scene = this.scene;
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ this.view.minScale = this.view.scale;
|
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
|
+ this.$refs.canvasFun.everyScale = this.view.scale;
|
|
}
|
|
}
|
|
|
|
+ this.loading = false;
|
|
|
|
+ //console.log('success')
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ //console.log('楼层不正确')
|
|
}
|
|
}
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- 'view.scale': {
|
|
|
|
- handler(n) {
|
|
|
|
- if (this.$refs.canvasFun) {
|
|
|
|
- let s = (n * 10) / this.view.minScale
|
|
|
|
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ clearGraphy() {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.scene = null;
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.view = new FloorView(`canvas${this.id}`);
|
|
|
|
+ },
|
|
|
|
+ listChange(item, ev) {
|
|
|
|
+ let name = ev[0][0].data.Name;
|
|
|
|
+ if (name.slice(name.length - 2, name.length) == "机房") {
|
|
|
|
+ this.$refs.boxRoom.open({ name: name, type: this.type });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 适配底图到窗口
|
|
|
|
+ fit() {
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ },
|
|
|
|
+ // 保存为png
|
|
|
|
+ savePng() {
|
|
|
|
+ this.view.saveImage(`${this.loadName}.png`, "png");
|
|
|
|
+ //console.log(`${this.loadName}.png`)
|
|
|
|
+ },
|
|
|
|
+ // 保存为svg
|
|
|
|
+ saveSvg() {
|
|
|
|
+ this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800);
|
|
|
|
+ },
|
|
|
|
+ // 保存为json
|
|
|
|
+ saveJson() {
|
|
|
|
+ this.view.saveFloorJson(`${this.loadName}.json`);
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- this.mapSize()
|
|
|
|
|
|
+ // 缩放
|
|
|
|
+ scale(val) {
|
|
|
|
+ if (!this.view) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let scale = this.view.scale;
|
|
|
|
+ console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
|
|
|
|
+ this.view.scaleByPoint(
|
|
|
|
+ val / scale,
|
|
|
|
+ this.canvasWidth / 2,
|
|
|
|
+ this.canvasHeight / 2
|
|
|
|
+ );
|
|
},
|
|
},
|
|
- created() {
|
|
|
|
- this.urlMsg = {
|
|
|
|
- categoryId: this.$cookie.get('categoryId'),
|
|
|
|
- ProjectID: this.plazaId,
|
|
|
|
- BuildingID: '1',
|
|
|
|
- FloorID: this.$cookie.get('floorMapId') || 'f1',
|
|
|
|
- fmapID: this.fmapID
|
|
|
|
|
|
+ // 读取数据
|
|
|
|
+ readGroup(FloorID) {
|
|
|
|
+ const data = {
|
|
|
|
+ BuildingID: "1",
|
|
|
|
+ FloorID: FloorID,
|
|
|
|
+ categoryId: this.$cookie.get("categoryId"),
|
|
|
|
+ projectId: this.urlMsg.ProjectID
|
|
|
|
+ };
|
|
|
|
+ return readGroup(data);
|
|
|
|
+ },
|
|
|
|
+ // 地图尺寸
|
|
|
|
+ mapSize() {
|
|
|
|
+ if (window.screen.height == "768") {
|
|
|
|
+ this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
|
+ this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
|
|
|
|
+ } else {
|
|
|
|
+ this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
|
+ this.canvasHeight = 900;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ "view.scale": {
|
|
|
|
+ handler(n) {
|
|
|
|
+ if (this.$refs.canvasFun) {
|
|
|
|
+ let s = (n * 10) / this.view.minScale;
|
|
|
|
+ this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
|
|
}
|
|
}
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.mapSize();
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.urlMsg = {
|
|
|
|
+ categoryId: this.$cookie.get("categoryId"),
|
|
|
|
+ ProjectID: this.plazaId,
|
|
|
|
+ BuildingID: "1",
|
|
|
|
+ FloorID: this.$cookie.get("floorMapId") || "f1",
|
|
|
|
+ fmapID: this.fmapID
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
#floor_base {
|
|
#floor_base {
|
|
- position: relative;
|
|
|
|
- .fengMap {
|
|
|
|
- position: fixed;
|
|
|
|
- width: 100px;
|
|
|
|
- height: 100px;
|
|
|
|
- z-index: -1;
|
|
|
|
- }
|
|
|
|
- .strip-bottom {
|
|
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
- bottom: 40px;
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ .fengMap {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ z-index: -1;
|
|
|
|
+ }
|
|
|
|
+ .strip-bottom {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|