drawModel.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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 @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" :scale="scale" @undo="undo" @redo="redo"
  6. @changeAbsorb="changeAbsorb" ref="canvasFun" isEdit="true"></canvasFun>
  7. </div> -->
  8. </div>
  9. </template>
  10. <script>
  11. import { SGraphyView } from "@sybotan-web/graphy/lib";
  12. import { DivideFloorScene } from "cad-engine"
  13. import { SColor, SPoint } from "@sybotan-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. buttonContent:"",
  32. showTools: false
  33. };
  34. },
  35. props: {
  36. id: {
  37. default: 0
  38. },
  39. CurrentModelId: String
  40. },
  41. created() {},
  42. mounted() {
  43. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  44. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  45. },
  46. methods: {
  47. initGraphy(ModelId) {
  48. this.modelId = ModelId;
  49. this.clearGraphy()
  50. this.scene = new DivideFloorScene();
  51. this.canvasLoading = true;
  52. this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
  53. let Elements = res.EntityList[0].Elements;
  54. let flag = false;
  55. for (let key in Elements) {
  56. if (Elements[key].length > 0) {
  57. flag = true;
  58. }
  59. }
  60. if (flag) {
  61. this.view.scene = this.scene
  62. this.view.fitSceneToView();
  63. this.canvasLoading = false;
  64. this.showTools = true;
  65. this.view.maxScale = this.view.scale * 10;
  66. this.view.minScale = this.view.scale;
  67. this.scene.click(this, this.canvasClick);
  68. } else {
  69. this.canvasLoading = false;
  70. }
  71. })
  72. },
  73. getFloorData() {
  74. let pa = {
  75. Filters: `FloorID='${this.FloorID}'`
  76. }
  77. floorQuery(pa, res => {
  78. let newArr = res.Content[0].Outline.map(t => {
  79. return new SPoint(t.X, t.Y);
  80. })
  81. this.drawMainScene.addSceneMark(newArr)
  82. })
  83. },
  84. getSelectedSpaces(){//获取选中区域
  85. if(this.view && this.view.scene){
  86. let list = this.view.scene.getSelectedSpaces();
  87. if(list.length){
  88. return list
  89. } else {
  90. return []
  91. }
  92. } else {
  93. return []
  94. }
  95. },
  96. // 清空平面图
  97. clearGraphy() {
  98. if (this.view) {
  99. this.view.scene = null;
  100. return
  101. }
  102. let id = `floorCanvas${this.id}`;
  103. this.view = new SGraphyView(id)
  104. },
  105. canvasClick(item,eventObj){//点击平面图事件
  106. this.view.scene.getSelectedSpaces().length?this.$emit("changeButtonContent","通过模型空间创建"):this.$emit("changeButtonContent","通过模型创建")
  107. },
  108. getGraphtSuc(res) {
  109. this.canvasLoading = false;
  110. if (res == 'error') {
  111. this.FloorMap = '';
  112. this.$message.warning('数据解析异常');
  113. return;
  114. }
  115. if (res.Result == 'failure') {
  116. this.showTools = false;
  117. this.$message.warning(res.Message);
  118. return;
  119. }
  120. this.view.scene = this.drawMainScene;
  121. this.view.fitSceneToView();
  122. this.drawMainScene.isSpaceSelectable = false;
  123. if (this.$refs.canvasFun) {
  124. this.view.maxScale = this.view.scale * 10;
  125. this.view.minScale = this.view.scale;
  126. this.$refs.canvasFun.everyScale = this.view.scale;
  127. }
  128. if (this.floorData.Outline && this.floorData.Outline.length) {
  129. let newArr = this.floorData.Outline.map(t => {
  130. return new SPoint(t.X, t.Y);
  131. })
  132. this.drawMainScene.addSceneMark(newArr)
  133. }
  134. },
  135. // focus() {
  136. // document.getElementById(`floorCanvas${this.id}`).focus()
  137. // },
  138. // // 工具栏操作
  139. // fit() {
  140. // this.view.fitSceneToView()
  141. // },
  142. // // 保存png
  143. // savePng() {
  144. // this.view.saveImage(`${this.floor}.png`, 'png');
  145. // },
  146. // saveSvg() {
  147. // this.view.saveSceneSvg(`${this.floor}.svg`, 6400, 4800);
  148. // },
  149. // divide() {
  150. // this.drawMainScene.isMarking = true;
  151. // },
  152. // // 清除切割划分
  153. // clearDivide() {
  154. // this.drawMainScene.clearSceneMark()
  155. // },
  156. // // 吸附
  157. // changeAbsorb(isAbsorbing) {
  158. // this.drawMainScene.isAbsorbing = isAbsorbing;
  159. // },
  160. // // 撤销
  161. // undo() {
  162. // },
  163. // // 反撤销
  164. // redo() { },
  165. // // 缩放
  166. // scale(val) {
  167. // if (!this.view) {
  168. // return;
  169. // }
  170. // let scale = this.view.scale;
  171. // this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  172. // }
  173. },
  174. watch: {
  175. CurrentModelId: {
  176. handler(newName, oldName){
  177. if(newName){
  178. this.initGraphy(newName)
  179. }
  180. },
  181. immediate: true,
  182. }
  183. }
  184. };
  185. </script>
  186. <style scoped lang="less">
  187. .drawFloor {
  188. width: 100%;
  189. height: 100%;
  190. position: relative;
  191. .operate {
  192. position: absolute;
  193. left: 50%;
  194. bottom: 20px;
  195. transform: translateX(-50%);
  196. z-index: 99;
  197. }
  198. }
  199. </style>