drawFloor.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
  3. <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
  4. <div class="operate" v-if="showTools">
  5. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo" @scale="scale"
  6. @changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import { SGraphyView } from "@saga-web/graphy/lib";
  12. import { DivideFloorScene, FloorView } from "@saga-web/cad-engine/lib"
  13. import { SColor, SPoint } from "@saga-web/draw/lib";
  14. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  15. import { floorQuery } from "@/api/scan/request";
  16. export default {
  17. components: {
  18. canvasFun
  19. },
  20. data() {
  21. return {
  22. drawMainScene: null,
  23. view: null,
  24. dataKey: '',
  25. cadWidth: 800,
  26. cadHeight: 600,
  27. canvasLoading: false,
  28. modelId: '',
  29. FloorID: '',
  30. Outline: [],
  31. floorData: {},
  32. config: {
  33. isEdit: false,
  34. divide: true
  35. },
  36. shadeList: []
  37. };
  38. },
  39. props: {
  40. isEdit: {
  41. default: false
  42. },
  43. showTools: {
  44. default: false
  45. },
  46. id: {
  47. default: 0
  48. },
  49. dialog: {
  50. default: false
  51. }
  52. },
  53. created() {
  54. this.FloorID = this.$route.query.FloorID;
  55. if (!this.dialog) {
  56. this.init();
  57. }
  58. },
  59. mounted() {
  60. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  61. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  62. },
  63. methods: {
  64. //
  65. init(){
  66. this.getFloorData();
  67. },
  68. // 初始化canvas
  69. initGraphy(Id, type) {
  70. // type=1 => id:模型id
  71. // type=2 => id:floormap
  72. let that = this;
  73. that.modelId = Id;
  74. that.clearGraphy()
  75. that.drawMainScene = new DivideFloorScene();
  76. that.canvasLoading = true;
  77. if (type == 1) {
  78. that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
  79. that.getGraphtSuc(res)
  80. })
  81. } else {
  82. that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
  83. that.getGraphtSuc(res)
  84. })
  85. }
  86. },
  87. // 获取底图成功
  88. getGraphtSuc(res) {
  89. this.canvasLoading = false;
  90. if (res == 'error') {
  91. this.FloorMap = '';
  92. this.$message.warning('数据解析异常');
  93. return;
  94. }
  95. if (res.Result == 'failure') {
  96. this.showTools = false;
  97. this.$message.warning(res.Message);
  98. return;
  99. }
  100. this.view.scene = this.drawMainScene;
  101. this.view.fitSceneToView();
  102. this.drawMainScene.isSpaceSelectable = false;
  103. if (this.$refs.canvasFun) {
  104. this.view.maxScale = this.view.scale * 10;
  105. this.view.minScale = this.view.scale;
  106. this.$refs.canvasFun.everyScale = this.view.scale;
  107. }
  108. if (this.floorData.Outline && this.floorData.Outline.length) {
  109. let newArr = this.floorData.Outline.map(t => {
  110. return new SPoint(t.X, t.Y);
  111. })
  112. this.drawMainScene.addSceneMark(newArr)
  113. }
  114. },
  115. // 获取楼层数据
  116. getFloorData() {
  117. let pa = {
  118. Filters: `FloorID='${this.FloorID}'`
  119. }
  120. floorQuery(pa, res => {
  121. this.floorData = res.Content[0];
  122. this.getOtherFloorOutLine();
  123. this.initGraphy(this.floorData.StructureInfo.FloorMap, 2)
  124. })
  125. },
  126. // 获取绑定该模型id的其他楼层轮廓线
  127. getOtherFloorOutLine() {
  128. let modelid = this.floorData.ModelId;
  129. let pa = {
  130. Filters: `ModelId='${modelid}'`
  131. }
  132. this.shadeList = [];
  133. floorQuery(pa, res => {
  134. res.Content.map(t => {
  135. if (t.FloorID != this.FloorID && t.Outline && t.Outline.length) {
  136. let line = t.Outline.map(item => {
  137. return new SPoint(item.X, item.Y);
  138. })
  139. this.shadeList.push(line);
  140. }
  141. });
  142. this.drawMainScene.addAllShade(this.shadeList);
  143. });
  144. },
  145. // 清空平面图
  146. clearGraphy() {
  147. if (this.view) {
  148. this.view.scene = null;
  149. return
  150. }
  151. let id = `floorCanvas${this.id}`;
  152. this.view = new FloorView(id)
  153. },
  154. // canvas 获取焦点
  155. focus() {
  156. document.getElementById(`floorCanvas${this.id}`).focus()
  157. },
  158. // 工具栏操作
  159. // 适配底图到窗口
  160. fit() {
  161. this.view.fitSceneToView()
  162. },
  163. // 保存为png
  164. savePng() {
  165. this.view.saveImage(`${this.floor}.png`, 'png');
  166. },
  167. // 保存为svg
  168. saveSvg() {
  169. this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  170. },
  171. // 切割划分
  172. divide() {
  173. this.drawMainScene.isMarking = true;
  174. },
  175. // 清除切割划分
  176. clearDivide() {
  177. this.drawMainScene.clearSceneMark()
  178. },
  179. // 吸附
  180. changeAbsorb(isAbsorbing) {
  181. this.drawMainScene.isAbsorbing = isAbsorbing;
  182. },
  183. // 保存json
  184. saveJson() {
  185. this.view.saveFloorJson(`${this.floor}.json`)
  186. },
  187. // 撤销
  188. undo() {
  189. },
  190. // 反撤销
  191. redo() { },
  192. // 缩放
  193. scale(val) {
  194. if (!this.view) {
  195. return;
  196. }
  197. let scale = this.view.scale;
  198. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  199. },
  200. },
  201. watch: {
  202. "view.scale": {
  203. handler(n) {
  204. if (this.$refs.canvasFun) {
  205. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  206. }
  207. }
  208. },
  209. "isEdit": {
  210. handler(n) {
  211. this.config.isEdit = n;
  212. }
  213. }
  214. }
  215. };
  216. </script>
  217. <style scoped lang="less">
  218. .drawFloor {
  219. width: 100%;
  220. height: 100%;
  221. position: relative;
  222. .operate {
  223. position: absolute;
  224. left: 50%;
  225. bottom: 20px;
  226. transform: translateX(-50%);
  227. z-index: 99;
  228. }
  229. }
  230. </style>