index.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <!-- 底图 -->
  2. <template>
  3. <div id='floor_base' v-loading='loading' ref='graphy'>
  4. <div id='fengMap'></div>
  5. <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
  6. <!-- 地图底部操作按钮 -->
  7. <div class='strip-bottom'>
  8. <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
  9. </div>
  10. <room-box ref='boxRoom'></room-box>
  11. </div>
  12. </template>
  13. <script>
  14. import { SFengParser } from '@saga-web/feng-map'
  15. import { SFloorParser } from '@saga-web/big'
  16. import { FloorView } from '@/lib/FloorView'
  17. import { FloorScene } from '@/lib/FloorScene'
  18. import RoomBox from '@/views/room/index'
  19. import canvasFun from '@/components/floorMap/canvasFun'
  20. import { readGroup } from '@/api/public'
  21. import { STopologyParser } from '@/lib/parsers/STopologyParser'
  22. import { mapGetters } from 'vuex'
  23. // import { uuid } from "@/components/mapClass/until";
  24. let fengmap = null
  25. export default {
  26. data() {
  27. return {
  28. appName: '万达可视化系统',
  29. key: '23f30a832a862c58637a4aadbf50a566',
  30. mapServerURL: `/wdfn`,
  31. canvasWidth: 1100,
  32. canvasHeight: 800,
  33. loading: false,
  34. view: null,
  35. isQuerying: false, // 限制重复查询
  36. urlMsg: {}
  37. }
  38. },
  39. components: { RoomBox, canvasFun },
  40. computed: {
  41. ...mapGetters(['plazaId', 'fmapID'])
  42. },
  43. methods: {
  44. init(floorid) {
  45. if (this.isQuerying) {
  46. console.log('正在查询...')
  47. return
  48. }
  49. console.log(this.fmapID)
  50. this.isQuerying = true
  51. this.clearGraphy()
  52. this.scene = new FloorScene()
  53. this.scene.selectContainer.connect('listChange', this, this.listChange)
  54. if (!fengmap) {
  55. fengmap = new SFengParser('fengMap', `${this.mapServerURL}/${this.fmapID}`, this.key, this.appName, null)
  56. fengmap.loadMap(this.fmapID, res => {
  57. this.floorList = res
  58. this.parserData(floorid)
  59. })
  60. this.readGroup().then(data => {
  61. const parserData = new STopologyParser(null)
  62. parserData.parseData(data.data.Data[0].Elements)
  63. // 多边形
  64. parserData.zoneLegendList.forEach(t => {
  65. this.scene.addItem(t)
  66. this.scene.Nodes.push(t)
  67. })
  68. // 增加文字
  69. parserData.textMarkerList.forEach(t => {
  70. this.scene.addItem(t)
  71. this.scene.Markers.push(t)
  72. })
  73. // 增加图片
  74. parserData.imageMarkerList.forEach(t => {
  75. this.scene.addItem(t)
  76. this.scene.Markers.push(t)
  77. })
  78. // 增加直线
  79. parserData.lineMarkerList.forEach(t => {
  80. this.scene.addItem(t)
  81. this.scene.Markers.push(t)
  82. })
  83. // 增加图标类图例
  84. parserData.imageLegendList.forEach(t => {
  85. this.scene.addItem(t)
  86. this.scene.Nodes.push(t)
  87. })
  88. // 增加管线类
  89. // 增加图标类图例
  90. parserData.relationList.forEach(t => {
  91. this.scene.addItem(t)
  92. this.scene.Relations.push(t)
  93. })
  94. this.view.fitSceneToView()
  95. })
  96. } else {
  97. this.parserData(floorid)
  98. }
  99. },
  100. parserData(floor) {
  101. if (this.floorList[floor]) {
  102. console.log(this.floorList[floor])
  103. fengmap.parseData(this.floorList[floor], res => {
  104. if (res.err) {
  105. console.log(res.err)
  106. return
  107. }
  108. const fParser = new SFloorParser(null)
  109. fParser.parseData(res)
  110. fParser.spaceList.forEach(t => {
  111. t.selectable = true
  112. this.scene.addItem(t)
  113. })
  114. fParser.wallList.forEach(t => this.scene.addItem(t))
  115. fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  116. fParser.doorList.forEach(t => this.scene.addItem(t))
  117. fParser.columnList.forEach(t => this.scene.addItem(t))
  118. fParser.casementList.forEach(t => this.scene.addItem(t))
  119. this.view.scene = this.scene
  120. this.view.fitSceneToView()
  121. this.loading = false
  122. this.isQuerying = false
  123. console.log('success')
  124. })
  125. } else {
  126. console.log('楼层不正确')
  127. }
  128. },
  129. clearGraphy() {
  130. console.log(new FloorView('canvas'))
  131. if (this.view) {
  132. this.view.scene = null
  133. return
  134. }
  135. this.view = new FloorView('canvas')
  136. },
  137. listChange(item, ev) {
  138. let name = ev[0][0].data.Name
  139. if (name.slice(name.length - 2, name.length) == '机房') {
  140. this.$refs.boxRoom.open(name)
  141. }
  142. },
  143. // 适配底图到窗口
  144. fit() {
  145. this.view.fitSceneToView()
  146. },
  147. // 保存为png
  148. savePng() {
  149. this.view.saveImage(`1.png`, 'png')
  150. },
  151. // 保存为svg
  152. saveSvg() {
  153. this.view.saveSceneSvg(`1.svg`, 6400, 4800)
  154. },
  155. // 保存为json
  156. saveJson() {
  157. console.log(2222)
  158. this.view.saveFloorJson(`1.json`)
  159. },
  160. // 缩放
  161. scale(val) {
  162. if (!this.view) {
  163. return
  164. }
  165. let scale = this.view.scale
  166. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  167. },
  168. // 读取数据
  169. readGroup() {
  170. const data = {
  171. categoryId: this.urlMsg.categoryId,
  172. projectId: this.urlMsg.ProjectID
  173. }
  174. return readGroup(data)
  175. }
  176. // handleFmapID(fmapID) {
  177. // if (fmapID) {
  178. // this.fmapID = fmapID
  179. // }
  180. // }
  181. },
  182. watch: {
  183. // '$store.state.fmapID': 'handleFmapID'
  184. },
  185. mounted() {
  186. this.$nextTick(() => {
  187. // console.log('-------------')
  188. // console.log(this.$store.state.fmapID)
  189. // console.log('-------------')
  190. })
  191. setTimeout(() => {
  192. console.log(this.$store.state.fmapID)
  193. }, 50000)
  194. if (window.screen.height == '768') {
  195. this.canvasWidth = this.$refs.graphy.offsetWidth
  196. this.canvasHeight = this.$refs.graphy.offsetHeight - 100
  197. } else {
  198. this.canvasWidth = this.$refs.graphy.offsetWidth
  199. this.canvasHeight = this.$refs.graphy.offsetHeight
  200. }
  201. },
  202. created() {
  203. this.urlMsg = {
  204. categoryId: this.$cookie.get('categoryId') || 'LCGN',
  205. ProjectID: this.plazaId,
  206. BuildingID: '1',
  207. FloorID: this.$cookie.get('floorMapId') || 'f1',
  208. fmapID: this.fmapID
  209. }
  210. console.log('this.urlMsg', this.urlMsg)
  211. }
  212. }
  213. </script>
  214. <style lang="less" scoped>
  215. #floor_base {
  216. position: relative;
  217. #fengMap {
  218. position: fixed;
  219. width: 100px;
  220. height: 100px;
  221. z-index: -1;
  222. }
  223. .strip-bottom {
  224. position: absolute;
  225. right: 0;
  226. bottom: 40px;
  227. width: 100%;
  228. }
  229. }
  230. </style>