123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <!-- 底图 -->
- <template>
- <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 { 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 } from 'vuex'
- // import { uuid } from "@/components/mapClass/until";
- let fengmap = null
- export default {
- data() {
- return {
- appName: '万达可视化系统',
- key: '23f30a832a862c58637a4aadbf50a566',
- mapServerURL: `/wdfn`,
- canvasWidth: 1100,
- canvasHeight: 800,
- loading: false,
- view: null,
- isQuerying: false, // 限制重复查询
- urlMsg: {}
- }
- },
- components: { RoomBox, canvasFun },
- computed: {
- ...mapGetters(['plazaId', 'fmapID'])
- },
- methods: {
- init(floorid) {
- if (this.isQuerying) {
- console.log('正在查询...')
- return
- }
- console.log(this.fmapID)
- this.isQuerying = true
- this.clearGraphy()
- this.scene = new FloorScene()
- this.scene.selectContainer.connect('listChange', this, this.listChange)
- if (!fengmap) {
- fengmap = new SFengParser('fengMap', `${this.mapServerURL}/${this.fmapID}`, this.key, this.appName, null)
- fengmap.loadMap(this.fmapID, res => {
- this.floorList = res
- this.parserData(floorid)
- })
- this.readGroup().then(data => {
- const parserData = new STopologyParser(null)
- parserData.parseData(data.data.Data[0].Elements)
- // 多边形
- parserData.zoneLegendList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Nodes.push(t)
- })
- // 增加文字
- parserData.textMarkerList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Markers.push(t)
- })
- // 增加图片
- parserData.imageMarkerList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Markers.push(t)
- })
- // 增加直线
- parserData.lineMarkerList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Markers.push(t)
- })
- // 增加图标类图例
- parserData.imageLegendList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Nodes.push(t)
- })
- // 增加管线类
- // 增加图标类图例
- parserData.relationList.forEach(t => {
- this.scene.addItem(t)
- this.scene.Relations.push(t)
- })
- this.view.fitSceneToView()
- })
- } else {
- this.parserData(floorid)
- }
- },
- parserData(floor) {
- if (this.floorList[floor]) {
- console.log(this.floorList[floor])
- fengmap.parseData(this.floorList[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.loading = false
- this.isQuerying = false
- console.log('success')
- })
- } else {
- console.log('楼层不正确')
- }
- },
- clearGraphy() {
- console.log(new FloorView('canvas'))
- 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)
- },
- // 读取数据
- readGroup() {
- const data = {
- categoryId: this.urlMsg.categoryId,
- projectId: this.urlMsg.ProjectID
- }
- return readGroup(data)
- }
- // handleFmapID(fmapID) {
- // if (fmapID) {
- // this.fmapID = fmapID
- // }
- // }
- },
- watch: {
- // '$store.state.fmapID': 'handleFmapID'
- },
- mounted() {
- this.$nextTick(() => {
- // console.log('-------------')
- // console.log(this.$store.state.fmapID)
- // console.log('-------------')
- })
- setTimeout(() => {
- console.log(this.$store.state.fmapID)
- }, 50000)
- 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
- }
- },
- created() {
- this.urlMsg = {
- categoryId: this.$cookie.get('categoryId') || 'LCGN',
- ProjectID: this.plazaId,
- BuildingID: '1',
- FloorID: this.$cookie.get('floorMapId') || 'f1',
- fmapID: this.fmapID
- }
- console.log('this.urlMsg', this.urlMsg)
- }
- }
- </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%;
- }
- }
- </style>
|