graphyCanvas.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <template>
  2. <div ref="graphyMain" class="canvasGraphy">
  3. <div style="width:100%;height:100%;" v-show="type==3" ref="canvasContainer" v-loading="canvasLoading">
  4. <canvas id="canvas" :width="canvasW" :height="canvasH" ref="canvas"></canvas>
  5. </div>
  6. <div v-if="type!=3" class="center" style="height: 400px;padding-top: 315px; box-sizing:border-box;">
  7. <i class="icon-wushuju iconfont"></i>
  8. <p>{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图,请去空间管理根据模型生成'}}</p>
  9. </div>
  10. <!-- 底部操作按钮 -->
  11. <el-row v-show="type == 3" class="canvas-actions-box">
  12. <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" @divide="divide" @clearDivide="clearDivide"
  13. @undo="undo" @redo="redo" @scale="scale" :isEdit="isEdit" :config="config" ref="canvasFun"></canvasFun>
  14. </el-row>
  15. <div v-show="menuShow" id="menu" ref="menu">
  16. <p @click="getDatails">编辑该标签</p>
  17. <p @click="clearXY">清除该点位的坐标</p>
  18. <p @click="noLocate">修改为无法定位到楼层的点位</p>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  24. //引擎的引用
  25. import { mapGetters, mapActions } from "vuex";
  26. import {
  27. updateLocationPoint, //更新点位标签
  28. } from "@/api/scan/request";
  29. import { FloorView, LocationPointScene, MarkerItem, SpaceItem } from "@saga-web/cad-engine/lib";
  30. import { SPoint } from "@saga-web/draw/lib";
  31. export default {
  32. components: {
  33. canvasFun
  34. },
  35. data() {
  36. return {
  37. isEdit: false, //是否为编辑态
  38. view: null, //视图
  39. scene: null, //场景
  40. menuShow: false, //右键菜单的显示
  41. canvasH: 600,
  42. canvasW: 800,
  43. type: 1, //1 没有选择楼层, 2没有平面图, 3有平面图
  44. list: [],
  45. buildMess: {},
  46. imageUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAlCAYAAABReInxAAAEaElEQVRYhd2XTWhdRRTHf+clgb7XRbCK6MZSiS5SrVRsq6tiX1AI2LV0UejSneJGqaFFiTtxJ+7UgFCLgqJQCC+oFT/eixKhASGBSuHFiIVKbD5fX96RuXdm7ty59wbduPCEy5t7Z+b8z//M+ZjwvxcJCW40jyW/gqAoIgKafLgP5XngGeARRe+VdOsfii4KMgtcqrfav5c5LNHjxuHEZvN48qsJSiKjInIB5QVgn5tzhiRjp0LYRnlX0YuNVmetCrAWWxMoOSKwgPKSAVM0m1OHIaSvCbpZ8yKwsDlx/EiBZhlgxkzHBbkKHHJAztLwPVmpmhkqiQmHzN6tiROHC2hlDIEDCp8Zd6pj4dyi6bs7Yw9iHxLwZG5U0U+3Jk4c2BMwUSUyJchYyNtS8cxihv7xehIZA52KAeMoPSiwrDASTqof+wBJAHw0h1Gds1PvKDy0f27+hvs8HKGfBRkhUJKzSmoMNZ9l6Ogx2N2l//Ucg59+yLncAVtDRlKdvFEKCNLEbdAs5BNgEfa9Nk3t5Cm/emjyNP0P36f33juI5tllZ0ozBIyjdFztueSTVRh+6mQOzFt85iy1Bx706eEDSlMjQcbD9XGU3h26JzSl9tjjBTDv5kePZqwCI23K3FMJKMi2T2wJH0HX1wtY3pyNdZf8EFQfSb22VQkIrOAyLAh3o2jw5Sz07xTB/rzFbvvbwBdkxSEpBLJSCajoPC6R7Z+TQfcGvdfPw1pWJgerK+ycfxndWkfyGRa86Xz4PYpSvgDO2OhKLcySkP53X9H/8XuGHj6M9nvo0i8wGGQIthL5EpHq+bgSUEQ+QVkFuT+01aVIorO3w2BxIatAbiYXZH7mN0U/r3QpSg/0FV+kNB/qucIkEr1nZxe489VGq9OvBLRKZ4DLao8/rDhBX/Jdwu9TX4vdqsv1VmcmZl3WLYycE6RNUCtdoIddIyMb9MV0VVuQcwWtJXnohpvAc8ByxiLwYKAcstSxZ7lk9tZb7c0CWoGhbwYJs5sIpwS6WadPFefdabele7umdtZb7ZsFpFJAcm6xCmRSRNYIklqCsi62JKnqmqKT9Va7W0CpBNR8g7RMrln3bmf90YWU98y2iJxutDrXCgh7AubOSsOP3yh6IXflCMaqOqWqVwvaS6QAmGK5rBMPLCJvAZ30oibhgXcEebuoulwKgGR5lDFOI3FXkKkwYKw9U4ru5q4Xe0gEqMQlSvIGzAqy4C9Tqj/bb7nI3UuiShPdpvEF2PE0rGbI1n0Q3Kv+PWDcYlzzjVrVFec+Ra+ovz5K/o5aIYVaGhQxTzusq7aSrInI7Td/XV0uV1stcT+0geC6hdCY6xijRoG6/Ydm+NbTT5guLtPXu2PT17umIe6YPAX+suNKie6lQbEUaLQ6Q8DBeN3SxvZHwzXvnZo1xjx3gemn3P5HgDE7K4N405OdxUsFTXZX2foYIlsdRGRw8GawH2hYl5p/Awwr890oNw3WuNHczszVLmm4Fbr+YwH+Bv+IBpdT6d7pAAAAAElFTkSuQmCC",
  47. setFlag: false, //插旗标志
  48. point: {}, //右侧列表传来的位置标签
  49. canvasLoading: false, //loading
  50. markItem: null, // 当前选中的标签item
  51. config: {
  52. isEdit: false
  53. },
  54. };
  55. },
  56. computed: {
  57. ...mapGetters("layout", ["projectId", "projects"]),
  58. projectName() {
  59. let projectObj = this.projects.find(item => {
  60. return item.id == this.projectId
  61. })
  62. return projectObj ? projectObj.name ? projectObj.name : projectObj.id : this.projectId
  63. }
  64. },
  65. created() { },
  66. mounted() {
  67. this.resize()
  68. },
  69. methods: {
  70. resize() {
  71. this.canvasW =
  72. document.getElementsByClassName("graphy-main")[0].offsetWidth - 2;
  73. this.canvasH =
  74. document.getElementsByTagName("body")[0].offsetHeight - 167;
  75. },
  76. //获取数据
  77. getData(data) {
  78. if (!data.map) {
  79. this.type = 2;
  80. } else {
  81. this.buildMess = data;
  82. this.buildFloorName = data.buildFloorName
  83. this.type = 3;
  84. }
  85. },
  86. //下载json文件
  87. getJson(jsonId) {
  88. let that = this;
  89. that.clearGraphy()
  90. that.scene = new LocationPointScene();
  91. that.canvasLoading = true;
  92. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${jsonId}`).then(res => {
  93. that.canvasLoading = false;
  94. if (res == 'error') {
  95. this.floorMap = '';
  96. this.$message.warning('数据解析异常');
  97. return;
  98. }
  99. that.view.scene = that.scene;
  100. that.scene.isSpaceSelectable = false;
  101. //添加标签显示
  102. that.scene.addMarkerList(that.list);
  103. //注册标签事件
  104. that.scene.markerClick(that, that.markClick);
  105. that.scene.spaceClick(that, that.spaceClick);
  106. that.view.fitSceneToView();
  107. that.view.minScale = that.view.scale;
  108. // that.view.minScale = 0.000001;
  109. if (that.$refs.canvasFun) {
  110. that.$refs.canvasFun.everyScale = that.view.scale;
  111. }
  112. this.disableRightButton();
  113. })
  114. },
  115. //画点位坐标
  116. doPoint(list) {
  117. this.setFlag = false;
  118. if (this.view) {
  119. this.view.canvasView.style.cursor = `default`;
  120. }
  121. this.list = list.map(t => {
  122. if (t.x == 0 && t.y == 0) {
  123. return undefined;
  124. } else {
  125. return {
  126. Id: t.id,
  127. X: t.x,
  128. Y: t.y * -1,
  129. Name: t.name
  130. };
  131. }
  132. }).filter(item => item);
  133. this.getJson(this.buildMess.map)
  134. },
  135. //右键菜单的编辑该标签
  136. getDatails() {
  137. this.menuShow = false;
  138. this.$emit("getDetails", { id: this.point.Id });
  139. },
  140. //右键的清除该点位的坐标
  141. clearXY() {
  142. this.menuShow = false
  143. this.point.x = 0
  144. this.point.y = 0
  145. this.updatePoint('clearXY')
  146. },
  147. //右键的修改为无法定位到楼层的点位
  148. noLocate() {
  149. this.menuShow = false
  150. delete this.point.floorId
  151. this.updatePoint('noLocate')
  152. },
  153. //创建实例
  154. createCanvas() {
  155. if (this.view.scene) {
  156. this.view.scene.root.children = [];
  157. this.view = null;
  158. }
  159. this.view = new FloorView("canvas");
  160. },
  161. // 定位
  162. locationGraphy(point) {
  163. let centerX = (this.view.width / 2) - point.x * this.view.scale;
  164. let centerY = (this.view.height / 2) - point.y * this.view.scale;
  165. this.view.origin = new SPoint(centerX, centerY)
  166. },
  167. //点击按钮
  168. addPoint(point) {
  169. if (this.point.id != point.id) {
  170. this.point = point;
  171. this.view.canvasView.style.cursor = `url(${this.imageUrl}) 14 33,auto`;
  172. this.setFlag = true
  173. }
  174. else {//再次点击取消插旗
  175. this.cancelSetFlag();
  176. }
  177. },
  178. //取消插旗状态
  179. cancelSetFlag() {
  180. this.point = {};
  181. this.view.canvasView.style.cursor = `Default`;
  182. this.setFlag = false;
  183. },
  184. //右键菜单
  185. showRightClick(e) {
  186. this.menuShow = true
  187. let el = this.$refs.graphyMain;
  188. this.$refs.menu.style.left = e.clientX - 245 + "px";
  189. this.$refs.menu.style.top = e.clientY - 150 + "px";
  190. },
  191. //插旗 item - 点击的空间item
  192. spaceClick(item, event) {
  193. console.log("click sapce")
  194. this.menuShow = false;
  195. if (this.setFlag) {
  196. this.scene.addMarker({
  197. Id: this.point.id,
  198. Name: this.point.name,
  199. X: event[0].x,
  200. Y: event[0].y
  201. })
  202. this.scene.markerClick(this, this.markClick);
  203. this.point.x = event[0].x
  204. this.point.y = -event[0].y
  205. this.updatePoint('setFlag')
  206. this.cancelSetFlag()
  207. }
  208. this.setFlag = false
  209. },
  210. //标签点击事件(包含左键,右键)
  211. markClick(item, event) {
  212. console.log("click mark")
  213. if (event[0].type == 'contextmenu') {
  214. this.markItem = item;
  215. this.point = item.data;
  216. this.showRightClick(event[0])
  217. } else {
  218. this.markItem = null;
  219. this.menuShow = false;
  220. }
  221. },
  222. //更新位置标签
  223. updatePoint(type) {
  224. let pa = {
  225. content: [this.point]
  226. }
  227. if (type == 'noLocate') {
  228. pa.projection = ['floorId']
  229. }
  230. //type == clearXY setFlag noLocate
  231. updateLocationPoint(pa, res => {
  232. this.$message.success('修改成功');
  233. if (type == 'clearXY' || type == 'noLocate') {
  234. this.scene.removeItem(this.markItem);
  235. this.$emit('resetPoint');
  236. }
  237. })
  238. },
  239. // 清除canvas
  240. clearGraphy() {
  241. if (this.view) {
  242. this.view.scene = null;
  243. return
  244. }
  245. this.view = new FloorView('canvas')
  246. },
  247. // 清除默认左右键事件
  248. disableRightButton() {
  249. this.$refs.canvas.addEventListener('contextmenu', (e) => {
  250. e.preventDefault();
  251. })
  252. this.$refs.canvas.addEventListener('click', (e) => {
  253. e.preventDefault();
  254. this.menuShow = false
  255. })
  256. },
  257. // 工具栏操作
  258. // 移动底图
  259. moveCanvas(move) {
  260. // todo
  261. let canvas = document.getElementById(`floorCanvas`);
  262. if (move) {
  263. canvas.style.cursor = 'move';
  264. } else {
  265. canvas.style.cursor = 'default';
  266. }
  267. },
  268. // 适配底图到窗口
  269. fit() {
  270. this.view.fitSceneToView()
  271. },
  272. // 保存为png
  273. savePng() {
  274. this.view.saveImage(`${this.projectName}-${this.buildFloorName}.png`, 'png');
  275. },
  276. // 保存为svg
  277. saveSvg() {
  278. this.view.saveSceneSvg(`${this.projectName}-${this.buildFloorName}.svg`, 6400, 4800);
  279. },
  280. // 保存json
  281. saveJson() {
  282. this.view.saveFloorJson(`${this.projectName}-${this.buildFloorName}.json`)
  283. },
  284. // 切割划分
  285. divide() {
  286. this.drawMainScene.isMarking = true;
  287. },
  288. // 清除切割划分
  289. clearDivide() {
  290. this.drawMainScene.clearSceneMark()
  291. },
  292. // 撤销
  293. undo() {
  294. },
  295. // 反撤销
  296. redo() { },
  297. // 缩放
  298. scale(val) {
  299. if (!this.view) {
  300. return;
  301. }
  302. let scale = this.view.scale;
  303. this.view.scaleByPoint(val / scale, this.canvasW / 2, this.canvasH / 2)
  304. },
  305. },
  306. watch: {
  307. projectId() {
  308. this.type = 1
  309. this.resize()
  310. },
  311. "view.scale": {
  312. handler(n, o) {
  313. if (this.$refs.canvasFun) {
  314. let s = n * 10 / this.view.minScale
  315. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  316. }
  317. }
  318. }
  319. }
  320. };
  321. </script>
  322. <!-- Add "scoped" attribute to limit CSS to this component only -->
  323. <style lang="less" scoped>
  324. .canvasGraphy {
  325. position: relative;
  326. height: 100%;
  327. .saga-message {
  328. height: 400px;
  329. line-height: 400px;
  330. color: #ccc;
  331. font-size: 24px;
  332. text-align: center;
  333. }
  334. #menu {
  335. width: 200px;
  336. z-index: 88;
  337. overflow: hidden;
  338. box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
  339. position: absolute;
  340. background-color: #fff;
  341. }
  342. #menu p {
  343. width: 100%;
  344. padding-left: 5px;
  345. overflow: hidden;
  346. height: 35px;
  347. line-height: 35px;
  348. font-size: 14px;
  349. margin: 0;
  350. text-align: left;
  351. cursor: pointer;
  352. }
  353. #menu p:hover {
  354. background-color: aqua;
  355. }
  356. .canvas-actions-box {
  357. position: absolute;
  358. bottom: 20px;
  359. left: 50%;
  360. transform: translateX(-50%);
  361. z-index: 999;
  362. }
  363. }
  364. </style>