graphyCanvas.vue 11 KB

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