12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!-- 底图 -->
- <template>
- <div id='floor_base' v-loading='loading'>
- <div id='fengMap'></div>
- <div class='canvas-container' ref='graphy'>
- <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
- </div>
- <room-box ref='boxRoom'></room-box>
- </div>
- </template>
- <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'
- export default {
- data() {
- return {
- appName: '万达可视化系统',
- key: '23f30a832a862c58637a4aadbf50a566',
- mapServerURL: '/wanda',
- fmapID: '1001724_29',
- fmap: null,
- canvasWidth: 700,
- canvasHeight: 800,
- fParser: null,
- loading: true
- }
- },
- components: { RoomBox },
- methods: {
- 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)
- // console.log(this.fmap)
- this.fmap.parseData('1001724_29', Number(floorid), res => {
- // console.log(res)
- this.fParser = new SFloorParser(null)
- // console.log(this.fParser)
- 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)
- }
- }
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth
- this.canvasHeight = this.$refs.graphy.offsetHeight
- }
- }
- </script>
- <style lang="less" scoped>
- #floor_base {
- #fengMap {
- position: absolute;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .canvas-container {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|