|
@@ -1,20 +1,126 @@
|
|
|
+<!-- 底图 -->
|
|
|
<template>
|
|
|
- <div id='floor_map'>
|
|
|
- <floorBase ref='floorBase'></floorBase>
|
|
|
+ <div id='floor_base' v-loading='loading' ref='graphy'>
|
|
|
+ <div id='fengMap'></div>
|
|
|
+ <canvas id='canvas' :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>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import floorBase from './floorBase'
|
|
|
+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'
|
|
|
+
|
|
|
export default {
|
|
|
- components: { floorBase },
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ appName: '万达可视化系统',
|
|
|
+ key: '23f30a832a862c58637a4aadbf50a566',
|
|
|
+ mapServerURL: '/wanda',
|
|
|
+ fmapID: '1001724_29',
|
|
|
+ fmap: null,
|
|
|
+ canvasWidth: 1100,
|
|
|
+ canvasHeight: 800,
|
|
|
+ fParser: null,
|
|
|
+ loading: true,
|
|
|
+ view: null
|
|
|
+ }
|
|
|
},
|
|
|
+ components: { RoomBox, canvasFun },
|
|
|
methods: {
|
|
|
init(floorid) {
|
|
|
- this.$refs.floorBase.init(floorid)
|
|
|
+ this.clearGraphy()
|
|
|
+ this.scene = new FloorScene()
|
|
|
+ this.scene.selectContainer.connect('listChange', this, this.listChange)
|
|
|
+ this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
|
|
|
+ this.fmap.parseData('1001724_29', Number(floorid), res => {
|
|
|
+ this.fParser = new SFloorParser(null)
|
|
|
+ this.fParser.parseData(res)
|
|
|
+ this.fParser.spaceList.forEach(t => {
|
|
|
+ t.selectable = true
|
|
|
+ this.scene.addItem(t)
|
|
|
+ })
|
|
|
+ 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.view.fitSceneToView()
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.view = new FloorView('canvas')
|
|
|
+ },
|
|
|
+ listChange(item, ev) {
|
|
|
+ let name = ev[0][0].data.Name
|
|
|
+ if (name.slice(name.length - 2, name.length) == '机房') {
|
|
|
+ this.$refs.boxRoom.open(name)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 适配底图到窗口
|
|
|
+ fit() {
|
|
|
+ this.view.fitSceneToView()
|
|
|
+ },
|
|
|
+ // 保存为png
|
|
|
+ savePng() {
|
|
|
+ this.view.saveImage(`1.png`, 'png')
|
|
|
+ },
|
|
|
+ // 保存为svg
|
|
|
+ saveSvg() {
|
|
|
+ this.view.saveSceneSvg(`1.svg`, 6400, 4800)
|
|
|
+ },
|
|
|
+ // 保存为json
|
|
|
+ saveJson() {
|
|
|
+ console.log(2222)
|
|
|
+ this.view.saveFloorJson(`1.json`)
|
|
|
+ },
|
|
|
+ // 缩放
|
|
|
+ scale(val) {
|
|
|
+ if (!this.view) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let scale = this.view.scale
|
|
|
+ this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
|
|
|
}
|
|
|
},
|
|
|
- mounted() {}
|
|
|
+ mounted() {
|
|
|
+ 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 = this.$refs.graphy.offsetHeight
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#floor_base {
|
|
|
+ position: relative;
|
|
|
+ #fengMap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .strip-bottom {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 40px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|