floorBase.vue 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!-- 底图 -->
  2. <template>
  3. <div id='floor_base' v-loading='loading'>
  4. <div id='fengMap'></div>
  5. <div class='canvas-container' ref='graphy'>
  6. <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
  7. </div>
  8. <room-box ref='boxRoom'></room-box>
  9. </div>
  10. </template>
  11. <script>
  12. import { SFengParser } from '@saga-web/feng-map'
  13. import { SFloorParser } from '@saga-web/big'
  14. import { FloorView } from '@/lib/FloorView'
  15. import { FloorScene } from '@/lib/FloorScene'
  16. import RoomBox from '../../views/room/index'
  17. export default {
  18. data() {
  19. return {
  20. appName: '万达可视化系统',
  21. key: '23f30a832a862c58637a4aadbf50a566',
  22. mapServerURL: '/wanda',
  23. fmapID: '1001724_29',
  24. fmap: null,
  25. canvasWidth: 700,
  26. canvasHeight: 800,
  27. fParser: null,
  28. loading: true
  29. }
  30. },
  31. components: { RoomBox },
  32. methods: {
  33. init(floorid) {
  34. this.clearGraphy()
  35. this.scene = new FloorScene()
  36. this.scene.selectContainer.connect('listChange', this, this.listChange)
  37. this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
  38. // console.log(this.fmap)
  39. this.fmap.parseData('1001724_29', Number(floorid), res => {
  40. // console.log(res)
  41. this.fParser = new SFloorParser(null)
  42. // console.log(this.fParser)
  43. this.fParser.parseData(res)
  44. this.fParser.spaceList.forEach(t => {
  45. t.selectable = true
  46. this.scene.addItem(t)
  47. })
  48. this.fParser.wallList.forEach(t => this.scene.addItem(t))
  49. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  50. this.fParser.doorList.forEach(t => this.scene.addItem(t))
  51. this.fParser.columnList.forEach(t => this.scene.addItem(t))
  52. this.fParser.casementList.forEach(t => this.scene.addItem(t))
  53. this.view.scene = this.scene
  54. this.view.fitSceneToView()
  55. this.loading = false
  56. })
  57. },
  58. clearGraphy() {
  59. if (this.view) {
  60. this.view.scene = null
  61. return
  62. }
  63. this.view = new FloorView('canvas')
  64. },
  65. listChange(item, ev) {
  66. let name = ev[0][0].data.Name
  67. if (name.slice(name.length - 2, name.length) == '机房') {
  68. this.$refs.boxRoom.open(name)
  69. }
  70. }
  71. },
  72. mounted() {
  73. this.canvasWidth = this.$refs.graphy.offsetWidth
  74. this.canvasHeight = this.$refs.graphy.offsetHeight
  75. }
  76. }
  77. </script>
  78. <style lang="less" scoped>
  79. #floor_base {
  80. #fengMap {
  81. position: absolute;
  82. width: 100px;
  83. height: 100px;
  84. z-index: -1;
  85. }
  86. .canvas-container {
  87. width: 100%;
  88. height: 100%;
  89. }
  90. }
  91. </style>