drawFloor.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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" :isEdit="isEdit" ref="canvasFun"></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. };
  33. },
  34. props: {
  35. isEdit: {
  36. default: false
  37. },
  38. showTools: {
  39. default: false
  40. },
  41. id: {
  42. default: 0
  43. },
  44. dialog: {
  45. default: false
  46. }
  47. },
  48. created() {
  49. this.FloorID = this.$route.query.FloorID;
  50. if (!this.dialog) {
  51. this.getFloorData();
  52. }
  53. },
  54. mounted() {
  55. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  56. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  57. },
  58. methods: {
  59. // 初始化canvas
  60. initGraphy(Id, type) {
  61. // type=1 => id:模型id
  62. // type=2 => id:floormap
  63. let that = this;
  64. that.modelId = Id;
  65. that.clearGraphy()
  66. that.drawMainScene = new DivideFloorScene();
  67. that.canvasLoading = true;
  68. if (type == 1) {
  69. that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
  70. that.getGraphtSuc(res)
  71. })
  72. } else {
  73. that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
  74. that.getGraphtSuc(res)
  75. })
  76. }
  77. },
  78. // 获取底图成功
  79. getGraphtSuc(res) {
  80. this.canvasLoading = false;
  81. if (res == 'error') {
  82. this.FloorMap = '';
  83. this.$message.warning('数据解析异常');
  84. return;
  85. }
  86. if (res.Result == 'failure') {
  87. this.showTools = false;
  88. this.$message.warning(res.Message);
  89. return;
  90. }
  91. this.view.scene = this.drawMainScene;
  92. this.view.fitSceneToView();
  93. this.drawMainScene.isSpaceSelectable = false;
  94. if (this.$refs.canvasFun) {
  95. this.view.maxScale = this.view.scale * 10;
  96. this.view.minScale = this.view.scale;
  97. this.$refs.canvasFun.everyScale = this.view.scale;
  98. }
  99. if (this.floorData.Outline && this.floorData.Outline.length) {
  100. let newArr = this.floorData.Outline.map(t => {
  101. return new SPoint(t.X, t.Y);
  102. })
  103. this.drawMainScene.addSceneMark(newArr)
  104. }
  105. },
  106. // 获取楼层数据
  107. getFloorData() {
  108. let pa = {
  109. Filters: `FloorID='${this.FloorID}'`
  110. }
  111. floorQuery(pa, res => {
  112. this.floorData = res.Content[0];
  113. this.initGraphy(this.floorData.StructureInfo.FloorMap, 2)
  114. })
  115. },
  116. // 清空平面图
  117. clearGraphy() {
  118. if (this.view) {
  119. this.view.scene = null;
  120. return
  121. }
  122. let id = `floorCanvas${this.id}`;
  123. this.view = new FloorView(id)
  124. },
  125. // canvas 获取焦点
  126. focus() {
  127. document.getElementById(`floorCanvas${this.id}`).focus()
  128. },
  129. // 工具栏操作
  130. // 适配底图到窗口
  131. fit() {
  132. this.view.fitSceneToView()
  133. },
  134. // 保存为png
  135. savePng() {
  136. this.view.saveImage(`${this.floor}.png`, 'png');
  137. },
  138. // 保存为svg
  139. saveSvg() {
  140. this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  141. },
  142. // 切割划分
  143. divide() {
  144. this.drawMainScene.isMarking = true;
  145. },
  146. // 清除切割划分
  147. clearDivide() {
  148. this.drawMainScene.clearSceneMark()
  149. },
  150. // 吸附
  151. changeAbsorb(isAbsorbing) {
  152. this.drawMainScene.isAbsorbing = isAbsorbing;
  153. },
  154. // 撤销
  155. undo() {
  156. },
  157. // 反撤销
  158. redo() { },
  159. // 缩放
  160. scale(val) {
  161. if (!this.view) {
  162. return;
  163. }
  164. let scale = this.view.scale;
  165. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  166. },
  167. },
  168. watch: {
  169. "view.scale": {
  170. handler(n) {
  171. if (this.$refs.canvasFun) {
  172. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  173. }
  174. }
  175. }
  176. }
  177. };
  178. </script>
  179. <style scoped lang="less">
  180. .drawFloor {
  181. width: 100%;
  182. height: 100%;
  183. position: relative;
  184. .operate {
  185. position: absolute;
  186. left: 50%;
  187. bottom: 20px;
  188. transform: translateX(-50%);
  189. z-index: 99;
  190. }
  191. }
  192. </style>