index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. <!-- 底图 -->
  2. <template>
  3. <div id='floor_base' v-loading='loading' ref='graphy'>
  4. <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
  5. <!-- 地图底部操作按钮 -->
  6. <div class='strip-bottom'>
  7. <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
  8. </div>
  9. <room-box ref='boxRoom'></room-box>
  10. </div>
  11. </template>
  12. <script>
  13. import { SFengParser } from '@saga-web/feng-map'
  14. import { SFloorParser } from '@saga-web/big'
  15. import { FloorView } from '@/lib/FloorView'
  16. import { FloorScene } from '@/lib/FloorScene'
  17. import RoomBox from '@/views/room/index'
  18. import canvasFun from '@/components/floorMap/canvasFun'
  19. import { readGroup } from '@/api/public'
  20. import { STopologyParser } from '@/lib/parsers/STopologyParser'
  21. import { mapGetters, mapActions } from 'vuex'
  22. import { SImageItem } from '@saga-web/graph/lib'
  23. import bus from '@/utils/bus.js'
  24. // import { uuid } from "@/components/mapClass/until";
  25. export default {
  26. data() {
  27. return {
  28. appName: '万达可视化系统',
  29. key: '23f30a832a862c58637a4aadbf50a566',
  30. mapServerURL: `/wdfn`,
  31. canvasWidth: 600,
  32. canvasHeight: 800,
  33. loading: false, // 限制重复查询
  34. view: null,
  35. urlMsg: {},
  36. canvasID: 'canvas',
  37. floorid: '', //楼层id
  38. topologyParser: null // 解析器数据
  39. }
  40. },
  41. props: {
  42. id: {
  43. default: '1',
  44. type: String
  45. },
  46. categoryId: {
  47. default: '',
  48. type: String
  49. },
  50. // 弹窗高度,适配底图高度使用
  51. modalHeight: {
  52. type: [Number, undefined],
  53. default: undefined
  54. },
  55. loadName: null,
  56. type: null
  57. },
  58. components: { RoomBox, canvasFun },
  59. computed: {
  60. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
  61. },
  62. methods: {
  63. ...mapActions(['getfmapID']),
  64. init(floorid) {
  65. this.loading = true
  66. this.floorid = floorid
  67. this.mapSize()
  68. setTimeout(() => {
  69. if (this.haveFengMap) {
  70. this.clearGraphy()
  71. this.scene = new FloorScene()
  72. this.scene.selectContainer.connect('listChange', this, this.listChange)
  73. if (this.canvasID != `canvas${this.id}`) {
  74. this.canvasID = `canvas${this.id}`
  75. }
  76. this.parserData(floorid)
  77. }
  78. }, 100)
  79. },
  80. parserData(floor) {
  81. if (floor == 'g80') {
  82. // 屋顶
  83. if (window.fengmapData.frImg) {
  84. let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
  85. this.scene.addItem(imgItem)
  86. this.view.scene = this.scene
  87. this.view.minScale = this.view.scale
  88. if (this.$refs.canvasFun) {
  89. this.$refs.canvasFun.everyScale = this.view.scale
  90. }
  91. this.view.fitSceneToView()
  92. }
  93. } else {
  94. if (window.fengmapData.gnameToGid[floor]) {
  95. window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
  96. if (res.err) {
  97. console.log('errr', res.err)
  98. return
  99. }
  100. const fParser = new SFloorParser(null)
  101. fParser.parseData(res)
  102. fParser.spaceList.forEach(t => {
  103. // t.selectable = true;
  104. this.scene.addItem(t)
  105. })
  106. fParser.wallList.forEach(t => this.scene.addItem(t))
  107. fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  108. fParser.doorList.forEach(t => this.scene.addItem(t))
  109. fParser.columnList.forEach(t => this.scene.addItem(t))
  110. fParser.casementList.forEach(t => this.scene.addItem(t))
  111. this.view.scene = this.scene
  112. this.view.minScale = this.view.scale
  113. if (this.$refs.canvasFun) {
  114. this.$refs.canvasFun.everyScale = this.view.scale
  115. }
  116. this.view.fitSceneToView()
  117. //console.log('success')
  118. })
  119. } else {
  120. console.log('楼层不正确')
  121. }
  122. }
  123. this.readGroup(this.floorid).then(data => {
  124. this.loading = false
  125. if (data.Result == 'failure') {
  126. // 取消 失败时的提示: 图不存在
  127. /* this.$message({
  128. message: data.Message,
  129. type: 'warning'
  130. }) */
  131. this.$store.commit('SETISMESSAGE', false)
  132. // 一会回来存这个
  133. } else {
  134. this.$store.commit('SETISMESSAGE', true)
  135. }
  136. // FIXME: Cannot read property '0' of undefined
  137. // 无返回Data处理
  138. if (!(data.Data && data.Data.length) ) {
  139. return false
  140. //console.log(data.data.Data[0].ID)
  141. // this.$cookie.set('graphId', data.Data[0].ID, 3)
  142. }
  143. // 放到后边 $cookie graphId
  144. this.$cookie.set('graphId', data.Data[0].ID, 3)
  145. this.topologyParser = new STopologyParser(null)
  146. this.topologyParser.parseData(data.Data[0].Elements)
  147. // 多边形
  148. this.topologyParser.zoneLegendList.forEach(t => {
  149. this.scene.addItem(t)
  150. })
  151. // 增加文字
  152. this.topologyParser.textMarkerList.forEach(t => {
  153. this.scene.addItem(t)
  154. })
  155. // 增加图片
  156. this.topologyParser.imageMarkerList.forEach(t => {
  157. this.scene.addItem(t)
  158. })
  159. // 增加直线
  160. this.topologyParser.lineMarkerList.forEach(t => {
  161. this.scene.addItem(t)
  162. })
  163. // 增加图标类图例
  164. this.topologyParser.imageLegendList.forEach(t => {
  165. this.scene.addItem(t)
  166. })
  167. // 增加管线类
  168. // 增加图标类图例
  169. this.topologyParser.relationList.forEach(t => {
  170. this.scene.addItem(t)
  171. })
  172. this.view.fitSceneToView()
  173. })
  174. },
  175. clearGraphy() {
  176. if (this.view) {
  177. this.view.scene = null
  178. return
  179. }
  180. this.view = new FloorView(`canvas${this.id}`)
  181. },
  182. listChange(item, ev) {
  183. let name = ev[0][0].data.Name
  184. if (name.slice(name.length - 2, name.length) == '机房') {
  185. this.$refs.boxRoom.open({ name: name, type: this.type })
  186. }
  187. },
  188. // 适配底图到窗口
  189. fit() {
  190. this.view.fitSceneToView()
  191. },
  192. // 保存为png
  193. savePng() {
  194. this.view.saveImage(`${this.loadName}.png`, 'png')
  195. //console.log(`${this.loadName}.png`)
  196. },
  197. // 保存为svg
  198. saveSvg() {
  199. this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
  200. },
  201. // 保存为json
  202. saveJson() {
  203. this.view.saveFloorJson(`${this.loadName}.json`)
  204. },
  205. // 缩放
  206. scale(val) {
  207. if (!this.view) {
  208. return
  209. }
  210. let scale = this.view.scale
  211. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  212. },
  213. showText(val) {
  214. this.topologyParser.zoneLegendList.forEach(t => {
  215. t.showText = val
  216. })
  217. },
  218. // 读取数据
  219. readGroup(FloorID) {
  220. const data = {
  221. BuildingID: '1',
  222. FloorID: FloorID,
  223. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  224. projectId: this.urlMsg.ProjectID
  225. }
  226. return readGroup(data)
  227. },
  228. // 地图尺寸
  229. mapSize() {
  230. this.canvasWidth = this.$refs.graphy.offsetWidth
  231. if (window.screen.height == '768') {
  232. this.canvasHeight = this.$refs.graphy.offsetHeight - 100
  233. } else {
  234. this.canvasHeight = 900
  235. }
  236. // 弹窗中底图高度适配
  237. if (this.modalHeight) {
  238. this.canvasHeight = this.modalHeight
  239. }
  240. },
  241. getEvent() {
  242. bus.$on('changeShow', res => {
  243. this.topologyParser.zoneLegendList.forEach(t => {
  244. let id = t.data.GraphElementId
  245. t.maskFlag = !(res.indexOf(id) > -1)
  246. })
  247. this.topologyParser.textMarkerList.forEach(t => {
  248. let id = t.data.GraphElementId
  249. t.maskFlag = !(res.indexOf(id) > -1)
  250. })
  251. this.topologyParser.imageMarkerList.forEach(t => {
  252. let id = t.data.GraphElementId
  253. t.maskFlag = !(res.indexOf(id) > -1)
  254. })
  255. this.topologyParser.lineMarkerList.forEach(t => {
  256. let id = t.data.GraphElementId
  257. t.maskFlag = !(res.indexOf(id) > -1)
  258. })
  259. this.topologyParser.imageLegendList.forEach(t => {
  260. let id = t.data.GraphElementId
  261. t.maskFlag = !(res.indexOf(id) > -1)
  262. })
  263. this.topologyParser.relationList.forEach(t => {
  264. let id = t.data.GraphElementId
  265. t.maskFlag = !(res.indexOf(id) > -1)
  266. })
  267. })
  268. }
  269. },
  270. watch: {
  271. 'view.scale': {
  272. handler(n) {
  273. if (this.$refs.canvasFun) {
  274. let s = (n * 10) / this.view.minScale
  275. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
  276. }
  277. }
  278. },
  279. haveFengMap(val) {
  280. if (val) {
  281. this.init(this.floorid)
  282. }
  283. }
  284. },
  285. mounted() {
  286. this.mapSize()
  287. this.getEvent()
  288. },
  289. created() {
  290. this.urlMsg = {
  291. categoryId: this.$cookie.get('categoryId'),
  292. ProjectID: this.plazaId,
  293. BuildingID: '1',
  294. FloorID: this.$cookie.get('floorMapId') || 'f1',
  295. fmapID: this.fmapID
  296. }
  297. }
  298. }
  299. </script>
  300. <style lang="less" scoped>
  301. #floor_base {
  302. position: relative;
  303. height: 100%;
  304. .fengMap {
  305. position: fixed;
  306. width: 100px;
  307. height: 100px;
  308. z-index: -1;
  309. }
  310. .strip-bottom {
  311. position: absolute;
  312. right: 0;
  313. bottom: 40px;
  314. width: 100%;
  315. }
  316. }
  317. </style>