drawFloor.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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 "@saga-web/graphy/lib";
  13. import { DivideFloorScene } from "@saga-web/cad-engine/lib"
  14. import { SColor, SPoint } from "@saga-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. that.canvasLoading = false;
  62. if (res.Result == 'failure') {
  63. this.showTools = false;
  64. that.$message.warning(res.Message);
  65. return;
  66. }
  67. let Elements = res.EntityList[0].Elements;
  68. let flag = false;
  69. for (let key in Elements) {
  70. if (Elements[key].length > 0) {
  71. flag = true;
  72. }
  73. }
  74. if (flag) {
  75. that.view.scene = that.drawMainScene
  76. that.view.fitSceneToView();
  77. that.view.maxScale = that.view.scale * 10;
  78. that.view.minScale = that.view.scale;
  79. that.drawMainScene.isSpaceSelectable = false;
  80. if (this.$refs.canvasFun) {
  81. that.$refs.canvasFun.everyScale = that.view.scale;
  82. }
  83. if (that.OutlineFlag) {
  84. this.getFloorData()
  85. }
  86. }
  87. })
  88. },
  89. getFloorData() {
  90. let pa = {
  91. Filters: `FloorID='${this.FloorID}'`
  92. }
  93. floorQuery(pa, res => {
  94. let newArr = res.Content[0].Outline.map(t => {
  95. return new SPoint(t.X, t.Y);
  96. })
  97. this.drawMainScene.addSceneMark(newArr)
  98. })
  99. },
  100. // 清空平面图
  101. clearGraphy() {
  102. if (this.view) {
  103. this.view.scene = null;
  104. return
  105. }
  106. let id = `floorCanvas${this.id}`;
  107. this.view = new SGraphyView(id)
  108. },
  109. // canvas 获取焦点
  110. focus() {
  111. document.getElementById(`floorCanvas${this.id}`).focus()
  112. },
  113. // 工具栏操作
  114. // 移动底图
  115. moveCanvas(move) {
  116. // todo
  117. let canvas = document.getElementById(`floorCanvas${this.id}`);
  118. if (move) {
  119. canvas.style.cursor = 'move';
  120. } else {
  121. canvas.style.cursor = 'default';
  122. }
  123. },
  124. // 适配底图到窗口
  125. fit() {
  126. this.view.fitSceneToView()
  127. },
  128. // 保存为png
  129. savePng() {
  130. this.view.saveImage(`${this.floor}.png`, 'png');
  131. },
  132. // 保存为svg
  133. saveSvg() {
  134. this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  135. },
  136. // 切割划分
  137. divide() {
  138. this.drawMainScene.isMarking = true;
  139. },
  140. // 清除切割划分
  141. clearDivide() {
  142. this.drawMainScene.clearSceneMark()
  143. },
  144. // 撤销
  145. undo() {
  146. },
  147. // 反撤销
  148. redo() { },
  149. // 缩放
  150. scale(val) {
  151. if (!this.view) {
  152. return;
  153. }
  154. let scale = this.view.scale;
  155. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  156. },
  157. },
  158. watch: {
  159. "view.scale": {
  160. handler(n) {
  161. if (this.$refs.canvasFun) {
  162. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  163. }
  164. }
  165. }
  166. }
  167. };
  168. </script>
  169. <style scoped lang="less">
  170. .drawFloor {
  171. width: 100%;
  172. height: 100%;
  173. position: relative;
  174. .operate {
  175. position: absolute;
  176. left: 50%;
  177. bottom: 20px;
  178. transform: translateX(-50%);
  179. z-index: 99;
  180. }
  181. }
  182. </style>