bimDialog.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. <template>
  2. <el-dialog
  3. title='修改BIM模型中的坐标'
  4. v-if='dialog.bimcode'
  5. custom-class='custom-dialog'
  6. :visible.sync='dialog.bimcode'
  7. width='900px'
  8. @close='handleClose'
  9. >
  10. <div id='bim-code' v-if='Object.keys(bimcodeobj).length>0'>
  11. <div class='eq'>
  12. <span class='eq-name'>设备名称 &nbsp;&nbsp;</span>
  13. {{ bimcodeobj.EquipLocalName || bimcodeobj.EquipName || '--' }}
  14. </div>
  15. <div>
  16. <noAllDataFloor @change='changeFloor' ref='floors' @getFloorMap='getFloorMap'></noAllDataFloor>
  17. <span v-if='isShow' class='errMsg'>请选择设备所属建筑楼层</span>
  18. </div>
  19. <div class='canvas-box' v-loading='canvasLoading'>
  20. <canvas v-show='isdata' :id='`floorCanvas${id}`' :width='cadWidth' :height='cadHeight' ref='canvas'
  21. tabindex='0'></canvas>
  22. <p v-show='!isdata'>当前楼层暂无平面图,请前往“建筑楼层管理”中给楼层添加平面图</p>
  23. </div>
  24. </div>
  25. <div slot='footer' class='footer'>
  26. <el-button @click='handleClose'>取 消</el-button>
  27. <el-button type='primary' @click='save'>确 定</el-button>
  28. </div>
  29. </el-dialog>
  30. </template>
  31. <script>
  32. import noAllDataFloor from './noAllDataFloor'
  33. import { FloorView, LocationPointScene } from '@saga-web/cad-engine/lib'
  34. import { SPoint } from '@saga-web/draw/lib'
  35. import { updateEquip } from '@/api/scan/request'
  36. import { SGraphItem } from '@saga-web/graph/lib'
  37. export default {
  38. components: {
  39. noAllDataFloor,
  40. },
  41. props: {
  42. dialog: {
  43. type: Object,
  44. default: function () {
  45. return {
  46. bimcode: false,
  47. }
  48. },
  49. },
  50. bimcodeobj: {
  51. default: {},
  52. },
  53. },
  54. data() {
  55. return {
  56. cadWidth: 800,
  57. cadHeight: 400,
  58. Buildfloor: '',
  59. value: [],
  60. isdata: true,
  61. floorData: {},
  62. canvasLoading: false,
  63. isShow: false,
  64. id: 'ty',
  65. view: '',
  66. drawMainScene: '',
  67. floorToMap: {},
  68. }
  69. },
  70. created() {
  71. },
  72. mounted() {
  73. console.log(this.bimcodeobj)
  74. this.init()
  75. },
  76. methods: {
  77. init() {
  78. this.isShow = true
  79. this.$nextTick(function () {
  80. if (this.bimcodeobj.FloorId) {
  81. this.isShow = false
  82. }
  83. if (this.$refs.floors) {
  84. this.$refs.floors.setValue([this.bimcodeobj.BuildingId, this.bimcodeobj.FloorId])
  85. }
  86. })
  87. },
  88. //切换楼层
  89. changeFloor(value) {
  90. this.Buildfloor = value
  91. this.isShow = true
  92. if (value.length > 1) {
  93. this.isShow = false
  94. this.floorData = this.floorToMap[value[1]]
  95. } else {
  96. this.isShow = false
  97. this.floorData = {}
  98. }
  99. this.getFloorData()
  100. },
  101. // 初始化canvas
  102. initGraphy(Id, type) {
  103. // type=1 => id:模型id 这里不需要
  104. // type=2 => id:floormap jsonz格式
  105. // type = 3 => id:floormap png或者jpg格式
  106. let that = this
  107. that.clearGraphy()
  108. that.drawMainScene = new LocationPointScene()
  109. that.canvasLoading = true
  110. if (type == 2) {
  111. that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then((res) => {
  112. that.getGraphtSuc(res)
  113. })
  114. } else if (type == 3) {
  115. that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, (res) => {
  116. that.getGraphtSuc(res)
  117. })
  118. }
  119. },
  120. // 获取底图成功
  121. getGraphtSuc(res) {
  122. this.canvasLoading = false
  123. if (res == 'error') {
  124. this.FloorMap = ''
  125. this.$message.warning('数据解析异常')
  126. return
  127. }
  128. if (res.Result == 'failure') {
  129. this.showTools = false
  130. this.$message.warning(res.Message)
  131. return
  132. }
  133. this.view.scene = this.drawMainScene
  134. if (this.bimcodeobj.LocationJson) {
  135. let obj = {
  136. X: this.bimcodeobj.LocationJson.X,
  137. Y: -this.bimcodeobj.LocationJson.Y,
  138. }
  139. //回写编辑
  140. this.drawMainScene.addMarker(obj)
  141. }
  142. this.view.fitSceneToView()
  143. this.drawMainScene.isSpaceSelectable = false
  144. this.drawMainScene.spaceClick(this, this.canvasClick) //锚点触发
  145. if (this.floorData.Outline && this.floorData.Outline.length) {
  146. let newArr = this.floorData.Outline.map((t) => {
  147. return new SPoint(t.X, t.Y)
  148. })
  149. this.drawMainScene.addSceneMark(newArr)
  150. }
  151. },
  152. //获取楼层数据
  153. getFloorData() {
  154. console.log(this.floorData)
  155. if (this.floorData && this.floorData.StructureInfo && this.floorData.StructureInfo.FloorMap) {
  156. this.isdata = true
  157. let floorMap = this.floorData.StructureInfo.FloorMap
  158. if (floorMap.split('.')[1].toString() == 'png' || floorMap.split('.')[1].toString() == 'jpg') {
  159. this.initGraphy(floorMap, 3)
  160. } else {
  161. this.initGraphy(floorMap, 2)
  162. }
  163. } else {
  164. //暂无数据
  165. this.isdata = false
  166. this.clearGraphy()
  167. }
  168. },
  169. //关闭弹窗
  170. handleClose(val) {
  171. this.view = ''
  172. this.drawMainScene = ''
  173. this.$emit('closeBIM', val)
  174. },
  175. //保存事件
  176. save() {
  177. if (this.drawMainScene) {
  178. if (this.drawMainScene.markerList.length) {
  179. let obj = this.drawMainScene.markerList[0], BIMLocation;
  180. if (this.bimcodeobj.BIMLocation && this.bimcodeobj.BIMLocation.split(',')[2]) {
  181. BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},${this.bimcodeobj.BIMLocation.split(',')[2]}`
  182. } else {
  183. BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},0`
  184. }
  185. let param = {
  186. content: [
  187. {
  188. equipId: this.bimcodeobj.EquipID,
  189. buildingId: this.Buildfloor[0],
  190. floorId: this.Buildfloor[1],
  191. bimLocation: BIMLocation
  192. },
  193. ],
  194. projection: ['bimLocation', 'buildingId', 'floorId'],
  195. }
  196. updateEquip(param, (res) => {
  197. if (res.result == 'success') {
  198. this.$message.success('保存成功')
  199. this.handleClose('update')
  200. }
  201. })
  202. }
  203. }
  204. },
  205. // 清空平面图
  206. clearGraphy() {
  207. if (this.view) {
  208. this.view.scene = null
  209. return
  210. }
  211. let id = `floorCanvas${this.id}`
  212. this.view = new FloorView(id)
  213. },
  214. //得到floormap
  215. getFloorMap(val) {
  216. this.floorToMap = val
  217. this.floorData = this.floorToMap[this.bimcodeobj.FloorId]
  218. this.getFloorData()
  219. },
  220. // canvas点击事件
  221. canvasClick(item, event) {
  222. if (item instanceof SGraphyItem) {
  223. this.clearMark()
  224. let obj = {
  225. X: event[0].x,
  226. Y: event[0].y,
  227. }
  228. this.drawMainScene.addMarker(obj)
  229. this.view.fitSceneToView()
  230. }
  231. },
  232. //清空标记
  233. clearMark() {
  234. if (this.drawMainScene) {
  235. this.drawMainScene.markerList.forEach((t) => {
  236. this.drawMainScene.removeItem(t)
  237. })
  238. this.drawMainScene.markerList = []
  239. }
  240. },
  241. },
  242. watch: {
  243. bimcodeobj: {
  244. immediate: true,
  245. handler(val) {
  246. this.init()
  247. },
  248. },
  249. },
  250. }
  251. </script>
  252. <style lang="less" scoped>
  253. #bim-code {
  254. height: 500px;
  255. .eq {
  256. padding-bottom: 10px;
  257. .eq-name {
  258. color: #999999;
  259. padding-left: 10px;
  260. }
  261. }
  262. .errMsg {
  263. color: red;
  264. padding-left: 10px;
  265. }
  266. #buildFloor {
  267. clear: both;
  268. margin-bottom: 10px;
  269. }
  270. .canvas-box {
  271. border: 1px solid #ccc;
  272. clear: both;
  273. width: 800px;
  274. height: 400px;
  275. margin-left: 10px;
  276. display: flex;
  277. justify-content: center;
  278. align-items: center;
  279. }
  280. }
  281. </style>
  282. <style lang="less">
  283. #bim-code {
  284. }
  285. </style>