index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  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, queryStatis } 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: `http://map.wanda.cn/editor`,
  31. canvasWidth: 600,
  32. canvasHeight: 800,
  33. loading: false, // 限制重复查询
  34. view: null,
  35. urlMsg: {},
  36. canvasID: 'canvas',
  37. floorid: '', //楼层id
  38. topologyParser: null, // 解析器数据
  39. fParser: null // 底图解析器
  40. }
  41. },
  42. props: {
  43. id: {
  44. default: '1',
  45. type: String
  46. },
  47. categoryId: {
  48. default: '',
  49. type: String
  50. },
  51. // 弹窗高度,适配底图高度使用
  52. modalHeight: {
  53. type: [Number, undefined],
  54. default: undefined
  55. },
  56. loadName: null,
  57. type: null
  58. },
  59. components: { RoomBox, canvasFun },
  60. computed: {
  61. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
  62. },
  63. methods: {
  64. ...mapActions(['getfmapID']),
  65. init(floorid) {
  66. this.loading = true
  67. this.floorid = floorid
  68. this.mapSize()
  69. setTimeout(() => {
  70. if (this.haveFengMap) {
  71. this.clearGraphy()
  72. this.scene = new FloorScene()
  73. this.scene.selectContainer.connect('listChange', this, this.listChange)
  74. if (this.canvasID != `canvas${this.id}`) {
  75. this.canvasID = `canvas${this.id}`
  76. }
  77. this.parserData(floorid)
  78. }
  79. }, 100)
  80. },
  81. parserData(floor) {
  82. if (floor == 'g80') {
  83. // 屋顶
  84. if (window.fengmapData.frImg) {
  85. let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
  86. this.scene.addItem(imgItem)
  87. this.view.scene = this.scene
  88. this.view.minScale = this.view.scale
  89. if (this.$refs.canvasFun) {
  90. this.$refs.canvasFun.everyScale = this.view.scale
  91. }
  92. this.view.fitSceneToView()
  93. }
  94. } else {
  95. if (window.fengmapData.gnameToGid[floor]) {
  96. window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
  97. if (res.err) {
  98. console.log('errr', res.err)
  99. return
  100. }
  101. this.fParser = new SFloorParser(null)
  102. this.fParser.parseData(res)
  103. this.fParser.spaceList.forEach(t => {
  104. // t.selectable = true;
  105. this.scene.addItem(t)
  106. })
  107. this.fParser.wallList.forEach(t => this.scene.addItem(t))
  108. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
  109. this.fParser.doorList.forEach(t => this.scene.addItem(t))
  110. this.fParser.columnList.forEach(t => this.scene.addItem(t))
  111. this.fParser.casementList.forEach(t => this.scene.addItem(t))
  112. this.view.scene = this.scene
  113. this.view.fitSceneToView()
  114. this.view.minScale = this.view.scale
  115. if (this.$refs.canvasFun) {
  116. this.$refs.canvasFun.everyScale = this.view.scale
  117. }
  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. this.$store.commit('SETISMESSAGE', false)
  127. return
  128. } else {
  129. this.$store.commit('SETISMESSAGE', true)
  130. }
  131. // 无返回Data处理
  132. if (!(data.Data && data.Data.length)) {
  133. return false
  134. }
  135. // 请求回来的备注
  136. if (data.Data && data.Data[0].Note) {
  137. let note = data.Data[0].Note
  138. bus.$emit('queryRemarksMethods', note)
  139. } else {
  140. bus.$emit('queryRemarksMethods', '')
  141. }
  142. //土建系统的图例展示
  143. if (this.$cookie.get('categoryId') == 'SCPZ') {
  144. let scpzTable = []
  145. scpzTable = data.Data[0].Elements.Nodes || []
  146. this.$store.commit('SETSCPZTABLE', scpzTable)
  147. }
  148. // 放到后边 $cookie graphId
  149. this.$cookie.set('graphId', data.Data[0].ID, 3)
  150. if (this.$cookie.get('graphId')) {
  151. // 得到graphId 就请求图例
  152. // 除土建系统之外的图例展示 包括楼层功能
  153. bus.$emit('queryViewMethods')
  154. }
  155. this.topologyParser = new STopologyParser(null)
  156. this.topologyParser.parseData(data.Data[0].Elements)
  157. // 多边形
  158. this.topologyParser.zoneLegendList.forEach(t => {
  159. this.scene.addItem(t)
  160. })
  161. // 增加文字
  162. this.topologyParser.textMarkerList.forEach(t => {
  163. this.scene.addItem(t)
  164. })
  165. // 增加图片
  166. this.topologyParser.imageMarkerList.forEach(t => {
  167. this.scene.addItem(t)
  168. })
  169. // 增加直线
  170. this.topologyParser.lineMarkerList.forEach(t => {
  171. this.scene.addItem(t)
  172. })
  173. // 增加图标类图例
  174. this.topologyParser.imageLegendList.forEach(t => {
  175. this.scene.addItem(t)
  176. })
  177. // 增加管线类
  178. // 增加图标类图例
  179. this.topologyParser.relationList.forEach(t => {
  180. this.scene.addItem(t)
  181. })
  182. this.view.fitSceneToView()
  183. })
  184. },
  185. clearGraphy() {
  186. if (this.view) {
  187. this.view.scene = null
  188. return
  189. }
  190. this.view = new FloorView(`canvas${this.id}`)
  191. },
  192. listChange(item, ev) {
  193. let name = ev[0][0].data.Name
  194. if (name.slice(name.length - 2, name.length) == '机房') {
  195. this.$refs.boxRoom.open({ name: name, type: this.type })
  196. }
  197. },
  198. // 适配底图到窗口
  199. fit() {
  200. this.view.fitSceneToView()
  201. },
  202. // 保存为png
  203. savePng() {
  204. this.view.saveImage(`${this.loadName}.png`, 'png')
  205. //console.log(`${this.loadName}.png`)
  206. },
  207. // 保存为svg
  208. saveSvg() {
  209. this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
  210. },
  211. // 保存为json
  212. saveJson() {
  213. this.view.saveFloorJson(`${this.loadName}.json`)
  214. },
  215. // 缩放
  216. scale(val) {
  217. if (!this.view) {
  218. return
  219. }
  220. let scale = this.view.scale
  221. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
  222. },
  223. showText(val) {
  224. // this.topologyParser.zoneLegendList.forEach(t => {
  225. // t.showText = val
  226. // })
  227. this.fParser.spaceList.forEach(t => {
  228. t.showBaseName = val
  229. })
  230. },
  231. // 读取数据
  232. readGroup(FloorID) {
  233. const data = {
  234. BuildingID: '1',
  235. FloorID: FloorID,
  236. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  237. projectId: this.urlMsg.ProjectID,
  238. Pub: true
  239. }
  240. return readGroup(data)
  241. },
  242. // 地图尺寸
  243. mapSize() {
  244. this.canvasWidth = this.$refs.graphy.offsetWidth
  245. if (window.screen.height == '768') {
  246. this.canvasHeight = this.$refs.graphy.offsetHeight - 100
  247. } else {
  248. this.canvasHeight = 900
  249. }
  250. // 弹窗中底图高度适配
  251. if (this.modalHeight) {
  252. this.canvasHeight = this.modalHeight
  253. }
  254. },
  255. getEvent() {
  256. bus.$on('changeShow', res => {
  257. this.topologyParser.zoneLegendList.forEach(t => {
  258. let id = t.data.GraphElementId
  259. t.maskFlag = !(res.indexOf(id) > -1)
  260. })
  261. this.topologyParser.textMarkerList.forEach(t => {
  262. let id = t.data.GraphElementId
  263. t.maskFlag = !(res.indexOf(id) > -1)
  264. })
  265. this.topologyParser.imageMarkerList.forEach(t => {
  266. let id = t.data.GraphElementId
  267. t.maskFlag = !(res.indexOf(id) > -1)
  268. })
  269. this.topologyParser.lineMarkerList.forEach(t => {
  270. let id = t.data.GraphElementId
  271. t.maskFlag = !(res.indexOf(id) > -1)
  272. })
  273. this.topologyParser.imageLegendList.forEach(t => {
  274. let id = t.data.GraphElementId
  275. t.maskFlag = !(res.indexOf(id) > -1)
  276. })
  277. this.topologyParser.relationList.forEach(t => {
  278. let id = t.data.GraphElementId
  279. t.maskFlag = !(res.indexOf(id) > -1)
  280. })
  281. })
  282. }
  283. },
  284. watch: {
  285. 'view.scale': {
  286. handler(n) {
  287. if (this.$refs.canvasFun) {
  288. let s = (n * 10) / this.view.minScale
  289. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
  290. }
  291. }
  292. },
  293. haveFengMap(val) {
  294. if (val) {
  295. this.init(this.floorid)
  296. }
  297. }
  298. },
  299. mounted() {
  300. this.mapSize()
  301. this.getEvent()
  302. },
  303. created() {
  304. this.urlMsg = {
  305. categoryId: this.$cookie.get('categoryId'),
  306. ProjectID: this.plazaId,
  307. BuildingID: '1',
  308. FloorID: this.$cookie.get('floorMapId') || 'f1',
  309. fmapID: this.fmapID
  310. }
  311. }
  312. }
  313. </script>
  314. <style lang="less" scoped>
  315. #floor_base {
  316. position: relative;
  317. height: 100%;
  318. .fengMap {
  319. position: fixed;
  320. width: 100px;
  321. height: 100px;
  322. z-index: -1;
  323. }
  324. .strip-bottom {
  325. position: absolute;
  326. right: 0;
  327. bottom: 40px;
  328. width: 100%;
  329. }
  330. }
  331. </style>