drawFloor.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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 @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
  6. @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import eventBus from "./bus.js";
  12. import { SGraphyView } from "@sybotan-web/graphy/lib";
  13. import { DivideFloorScene } from "cad-engine"
  14. import { SColor, SPoint } from "@sybotan-web/draw/lib";
  15. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  16. import { floorQuery } from "@/api/scan/request";
  17. export default {
  18. components: {
  19. canvasFun
  20. },
  21. data() {
  22. return {
  23. drawMainScene: null,
  24. view: null,
  25. dataKey: '',
  26. cadWidth: 800,
  27. cadHeight: 600,
  28. canvasLoading: false,
  29. modelId: '',
  30. FloorID: '',
  31. Outline: [],
  32. };
  33. },
  34. props: {
  35. isEdit: {
  36. default: false
  37. },
  38. showTools: {
  39. default: false
  40. },
  41. id: {
  42. default: 0
  43. }
  44. },
  45. created() {
  46. this.FloorID = this.$route.query.FloorID;
  47. this.OutlineFlag = this.$route.query.OutlineFlag;
  48. },
  49. mounted() {
  50. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  51. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  52. },
  53. methods: {
  54. initGraphy(ModelId) {
  55. let that = this;
  56. that.modelId = ModelId;
  57. that.clearGraphy()
  58. that.drawMainScene = new DivideFloorScene();
  59. that.canvasLoading = true;
  60. that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
  61. let Elements = res.EntityList[0].Elements;
  62. let flag = false;
  63. for (let key in Elements) {
  64. if (Elements[key].length > 0) {
  65. flag = true;
  66. }
  67. }
  68. if (flag) {
  69. that.view.scene = that.drawMainScene
  70. that.view.fitSceneToView();
  71. that.canvasLoading = false;
  72. that.view.maxScale = that.view.scale * 10;
  73. that.view.minScale = that.view.scale;
  74. that.drawMainScene.isSpaceSelectable = false;
  75. if (this.$refs.canvasFun) {
  76. that.$refs.canvasFun.everyScale = that.view.scale;
  77. }
  78. if (that.OutlineFlag) {
  79. this.getFloorData()
  80. }
  81. }
  82. })
  83. },
  84. getFloorData() {
  85. let pa = {
  86. Filters: `FloorID='${this.FloorID}'`
  87. }
  88. floorQuery(pa, res => {
  89. let newArr = res.Content[0].Outline.map(t => {
  90. return new SPoint(t.X, t.Y);
  91. })
  92. this.drawMainScene.addSceneMark(newArr)
  93. })
  94. },
  95. // 清空平面图
  96. clearGraphy() {
  97. if (this.view) {
  98. this.view.scene = null;
  99. return
  100. }
  101. let id = `floorCanvas${this.id}`;
  102. this.view = new SGraphyView(id)
  103. },
  104. // canvas 获取焦点
  105. focus() {
  106. document.getElementById(`floorCanvas${this.id}`).focus()
  107. },
  108. // 工具栏操作
  109. // 移动底图
  110. moveCanvas(move) {
  111. // todo
  112. let canvas = document.getElementById(`floorCanvas${this.id}`);
  113. if (move) {
  114. canvas.style.cursor = 'move';
  115. } else {
  116. canvas.style.cursor = 'default';
  117. }
  118. },
  119. // 适配底图到窗口
  120. fit() {
  121. this.view.fitSceneToView()
  122. },
  123. // 保存为png
  124. savePng() {
  125. this.view.saveImage(`${this.floor}.png`, 'png');
  126. },
  127. // 保存为svg
  128. saveSvg() {
  129. this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  130. },
  131. // 切割划分
  132. divide() {
  133. this.drawMainScene.isMarking = true;
  134. },
  135. // 清除切割划分
  136. clearDivide() {
  137. this.drawMainScene.clearSceneMark()
  138. },
  139. // 撤销
  140. undo() {
  141. },
  142. // 反撤销
  143. redo() { },
  144. // 缩放
  145. scale(val) {
  146. if (!this.view) {
  147. return;
  148. }
  149. let scale = this.view.scale;
  150. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  151. },
  152. },
  153. watch: {
  154. "view.scale": {
  155. handler(n) {
  156. if (this.$refs.canvasFun) {
  157. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  158. }
  159. }
  160. }
  161. }
  162. };
  163. </script>
  164. <style scoped lang="less">
  165. .drawFloor {
  166. width: 100%;
  167. height: 100%;
  168. position: relative;
  169. .operate {
  170. position: absolute;
  171. left: 50%;
  172. bottom: 20px;
  173. transform: translateX(-50%);
  174. z-index: 99;
  175. }
  176. }
  177. </style>