index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  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, ItemOrder } 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, queryStatis } from '@/api/public'
  20. import { queryShops } from '@/api/equipmentList.js'
  21. import { STopologyParser } from '@/lib/parsers/STopologyParser'
  22. import { mapGetters, mapActions } from 'vuex'
  23. import { SImageItem } from '@saga-web/graph/lib'
  24. import bus from '@/utils/bus.js'
  25. // import { uuid } from "@/components/mapClass/until";
  26. export default {
  27. data() {
  28. return {
  29. appName: '万达可视化系统',
  30. key: '23f30a832a862c58637a4aadbf50a566',
  31. mapServerURL: `http://map.wanda.cn/editor`,
  32. canvasWidth: 600,
  33. canvasHeight: 800,
  34. loading: false, // 限制重复查询
  35. view: null,
  36. urlMsg: {},
  37. canvasID: 'canvas',
  38. floorid: '', //楼层id
  39. topologyParser: null, // 解析器数据
  40. fParser: null, // 底图解析器
  41. wellMap: {} // 电井控制商铺映射
  42. }
  43. },
  44. props: {
  45. id: {
  46. default: '1',
  47. type: String
  48. },
  49. categoryId: {
  50. default: '',
  51. type: String
  52. },
  53. // 弹窗高度,适配底图高度使用
  54. modalHeight: {
  55. type: [Number, undefined],
  56. default: undefined
  57. },
  58. loadName: null,
  59. type: null
  60. },
  61. components: { RoomBox, canvasFun },
  62. computed: {
  63. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj'])
  64. },
  65. methods: {
  66. ...mapActions(['getfmapID']),
  67. init(floorid) {
  68. this.loading = true
  69. this.floorid = floorid
  70. this.mapSize()
  71. this.$refs.canvasFun.isShow = false
  72. setTimeout(() => {
  73. if (this.haveFengMap) {
  74. this.clearGraphy()
  75. this.scene = new FloorScene()
  76. this.scene.selectContainer.connect('listChange', this, this.listChange)
  77. if (this.canvasID != `canvas${this.id}`) {
  78. this.canvasID = `canvas${this.id}`
  79. }
  80. this.parserData(floorid)
  81. }
  82. }, 100)
  83. },
  84. parserData(floor) {
  85. if (floor == 'g80') {
  86. // 屋顶
  87. if (window.fengmapData.frImg) {
  88. let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
  89. this.scene.addItem(imgItem)
  90. this.view.scene = this.scene
  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. this.fParser = new SFloorParser(null)
  101. this.fParser.parseData(res)
  102. this.fParser.spaceList.forEach(t => {
  103. this.scene.addItem(t)
  104. t.nameSize = 12
  105. t.nameColor = '#646A73'
  106. if (t.data.Name && this.bunkObj[t.data.Name]) {
  107. t.name = this.bunkObj[t.data.Name].brandname
  108. } else {
  109. // t.name = t.data.Name
  110. t.name = ''
  111. }
  112. })
  113. this.fParser.wallList.forEach(t => this.scene.addItem(t))
  114. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  115. this.fParser.doorList.forEach(t => this.scene.addItem(t))
  116. this.fParser.columnList.forEach(t => this.scene.addItem(t))
  117. this.fParser.casementList.forEach(t => this.scene.addItem(t))
  118. this.view.scene = this.scene
  119. this.view.fitSceneToView()
  120. })
  121. } else {
  122. console.log('楼层不正确')
  123. }
  124. }
  125. this.readGroup(this.floorid).then(data => {
  126. this.loading = false
  127. if (data.Result == 'failure') {
  128. this.$store.commit('SETISMESSAGE', false)
  129. this.view.fitSceneToView()
  130. this.view.minScale = this.view.scale
  131. if (this.$refs.canvasFun) {
  132. this.$refs.canvasFun.everyScale = this.view.scale
  133. }
  134. return
  135. } else {
  136. if (
  137. data.Data[0].Elements.Nodes.length === 0 &&
  138. data.Data[0].Elements.Markers.length === 0 &&
  139. data.Data[0].Elements.Relations.length === 0
  140. ) {
  141. this.$store.commit('SETISMESSAGE', false)
  142. } else {
  143. this.$store.commit('SETISMESSAGE', true)
  144. }
  145. }
  146. // 无返回Data处理
  147. if (!(data.Data && data.Data.length)) {
  148. this.view.fitSceneToView()
  149. this.view.minScale = this.view.scale
  150. if (this.$refs.canvasFun) {
  151. this.$refs.canvasFun.everyScale = this.view.scale
  152. }
  153. return false
  154. }
  155. // 请求回来的备注
  156. if (data.Data && data.Data[0].Note) {
  157. let note = data.Data[0].Note
  158. bus.$emit('queryRemarksMethods', note)
  159. } else {
  160. bus.$emit('queryRemarksMethods', '')
  161. }
  162. //土建装饰的图例展示
  163. if (this.$cookie.get('categoryId') == 'SCPZ') {
  164. let scpzTable = []
  165. scpzTable = data.Data[0].Elements.Nodes || []
  166. this.$store.commit('SETSCPZTABLE', scpzTable)
  167. }
  168. // 放到后边 $cookie graphId
  169. this.$cookie.set('graphId', data.Data[0].ID, 3)
  170. if (this.$cookie.get('graphId')) {
  171. // 得到graphId 就请求图例
  172. // 除土建装饰之外的图例展示 包括楼层功能
  173. bus.$emit('queryViewMethods')
  174. }
  175. this.topologyParser = new STopologyParser(null)
  176. this.topologyParser.parseData(data.Data[0].Elements)
  177. // 多边形
  178. this.topologyParser.zoneLegendList.forEach(t => {
  179. this.scene.addItem(t)
  180. })
  181. // 增加文字
  182. this.topologyParser.textMarkerList.forEach(t => {
  183. this.scene.addItem(t)
  184. })
  185. // 增加图片
  186. this.topologyParser.imageMarkerList.forEach(t => {
  187. this.scene.addItem(t)
  188. })
  189. // 增加直线
  190. this.topologyParser.lineMarkerList.forEach(t => {
  191. this.scene.addItem(t)
  192. })
  193. // 增加图标类图例
  194. this.topologyParser.imageLegendList.forEach(t => {
  195. this.scene.addItem(t)
  196. })
  197. // 增加管线类
  198. // 增加图标类图例
  199. this.topologyParser.relationList.forEach(t => {
  200. t.selectable = true
  201. this.scene.addItem(t)
  202. })
  203. this.view.fitSceneToView()
  204. this.view.minScale = this.view.scale
  205. if (this.$refs.canvasFun) {
  206. this.$refs.canvasFun.everyScale = this.view.scale
  207. }
  208. })
  209. },
  210. clearGraphy() {
  211. if (this.view) {
  212. this.view.scene = null
  213. return
  214. }
  215. this.view = new FloorView(`canvas${this.id}`)
  216. },
  217. listChange(item, ev) {
  218. if (ev[0].length) {
  219. let selectItem1 = ev[0][0],
  220. location = selectItem1.data.AttachObjectIds[0] ? selectItem1.data.AttachObjectIds[0].id : ''
  221. // 空间类型都可打开弹窗(除防火分区 编号100131,商管办公室 编号100112,铺装石材 编号100129)
  222. if (selectItem1.data.GraphElementType == 'Zone') {
  223. if (
  224. selectItem1.data.GraphElementId != '100131' &&
  225. selectItem1.data.GraphElementId != '100112' &&
  226. selectItem1.data.GraphElementId != '100129'
  227. ) {
  228. if (location) {
  229. this.$refs.boxRoom.open({ name: selectItem1.name, type: this.type, location: location })
  230. }
  231. }
  232. }
  233. // 选中电井设置电井关联的商铺高亮
  234. this.setHightLight(ev[0])
  235. } else {
  236. this.clearHightLight()
  237. }
  238. },
  239. // 选中电井关联的商铺高亮
  240. setHightLight(arr) {
  241. this.clearHightLight()
  242. arr.forEach(item => {
  243. let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
  244. // 添加了位置类型并且选中的类型为电井类型
  245. if (
  246. (item.data.GraphElementId == '100050' ||
  247. item.data.GraphElementId == '100055' ||
  248. item.data.GraphElementId == '100056' ||
  249. item.data.GraphElementId == '100057') &&
  250. location
  251. ) {
  252. if (this.wellMap.hasOwnProperty(location)) {
  253. this.wellMap[location].forEach(item => {
  254. item.highLightFlag = true
  255. item.zOrder = 30
  256. })
  257. } else {
  258. let getParams = {
  259. plazaId: this.plazaId,
  260. floor: this.floorid,
  261. keyword: `${location}:wellnum;`
  262. }
  263. queryShops({ getParams }).then(res => {
  264. let shopsnumList = []
  265. let shopsnumItemList = []
  266. if (res.data && res.data.length) {
  267. for (let floor in res.data[0]) {
  268. if (res.data[0][floor].length) {
  269. res.data[0][floor].forEach(v => {
  270. shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
  271. })
  272. }
  273. }
  274. }
  275. if (shopsnumList.length) {
  276. this.fParser.spaceList.forEach(item => {
  277. if (shopsnumList.findIndex(name => name == item.data.Name) != -1) {
  278. item.highLightFlag = true
  279. item.zOrder = 30
  280. shopsnumItemList.push(item)
  281. }
  282. })
  283. this.wellMap[location] = shopsnumItemList
  284. }
  285. })
  286. }
  287. }
  288. })
  289. },
  290. // 清除电井关联商铺的高亮状态
  291. clearHightLight() {
  292. for (let key in this.wellMap) {
  293. this.wellMap[key].forEach(item => {
  294. item.highLightFlag = false
  295. item.zOrder = ItemOrder.spaceOrder
  296. })
  297. }
  298. },
  299. // 适配底图到窗口
  300. fit() {
  301. this.view.fitSceneToView()
  302. },
  303. // 保存为png
  304. savePng() {
  305. this.view.saveImage(`${this.loadName}.png`, 'png')
  306. //console.log(`${this.loadName}.png`)
  307. },
  308. // 保存为svg
  309. saveSvg() {
  310. this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
  311. },
  312. // 保存为json
  313. saveJson() {
  314. this.view.saveFloorJson(`${this.loadName}.json`)
  315. },
  316. // 缩放
  317. scale(val) {
  318. if (!this.view) {
  319. return
  320. }
  321. let scale = this.view.scale
  322. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  323. },
  324. // 小眼睛控制显示铺位名称
  325. showText(val) {
  326. // this.topologyParser.zoneLegendList.forEach(t => {
  327. // t.showText = val
  328. // })
  329. this.fParser.spaceList.forEach(t => {
  330. t.showBaseName = val
  331. })
  332. },
  333. // 读取数据
  334. readGroup(FloorID) {
  335. const data = {
  336. BuildingID: '1',
  337. FloorID: FloorID,
  338. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  339. projectId: this.urlMsg.ProjectID,
  340. Pub: true
  341. }
  342. return readGroup(data)
  343. },
  344. // 地图尺寸
  345. mapSize() {
  346. this.canvasWidth = this.$refs.graphy.offsetWidth
  347. if (window.screen.height == '768') {
  348. this.canvasHeight = this.$refs.graphy.offsetHeight - 100
  349. } else {
  350. this.canvasHeight = 900
  351. }
  352. // 弹窗中底图高度适配
  353. if (this.modalHeight) {
  354. this.canvasHeight = this.modalHeight
  355. }
  356. },
  357. getEvent() {
  358. bus.$on('changeShow', res => {
  359. this.topologyParser.zoneLegendList.forEach(t => {
  360. let id = t.data.GraphElementId
  361. t.maskFlag = !(res.indexOf(id) > -1)
  362. })
  363. // this.topologyParser.textMarkerList.forEach(t => {
  364. // let id = t.data.GraphElementId
  365. // t.maskFlag = !(res.indexOf(id) > -1)
  366. // })
  367. // this.topologyParser.imageMarkerList.forEach(t => {
  368. // let id = t.data.GraphElementId
  369. // t.maskFlag = !(res.indexOf(id) > -1)
  370. // })
  371. // this.topologyParser.lineMarkerList.forEach(t => {
  372. // let id = t.data.GraphElementId
  373. // t.maskFlag = !(res.indexOf(id) > -1)
  374. // })
  375. this.topologyParser.imageLegendList.forEach(t => {
  376. let id = t.data.GraphElementId
  377. t.maskFlag = !(res.indexOf(id) > -1)
  378. })
  379. this.topologyParser.relationList.forEach(t => {
  380. let id = t.data.GraphElementId || t.data.GraphElementID
  381. t.maskFlag = !(res.indexOf(id) > -1)
  382. })
  383. })
  384. }
  385. },
  386. watch: {
  387. 'view.scale': {
  388. handler(n) {
  389. if (this.$refs.canvasFun) {
  390. let s = (n * 10) / this.view.minScale
  391. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
  392. }
  393. }
  394. },
  395. haveFengMap(val) {
  396. if (val) {
  397. this.init(this.floorid)
  398. }
  399. }
  400. },
  401. mounted() {
  402. this.mapSize()
  403. this.getEvent()
  404. },
  405. created() {
  406. this.urlMsg = {
  407. categoryId: this.$cookie.get('categoryId'),
  408. ProjectID: this.plazaId,
  409. BuildingID: '1',
  410. FloorID: this.$cookie.get('floorMapId') || 'f1',
  411. fmapID: this.fmapID
  412. }
  413. }
  414. }
  415. </script>
  416. <style lang="less" scoped>
  417. #floor_base {
  418. position: relative;
  419. height: 100%;
  420. .fengMap {
  421. position: fixed;
  422. width: 100px;
  423. height: 100px;
  424. z-index: -1;
  425. }
  426. .strip-bottom {
  427. position: absolute;
  428. right: 0;
  429. bottom: 40px;
  430. width: 100%;
  431. }
  432. }
  433. </style>