drawModel.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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>
  5. </template>
  6. <script>
  7. import { SGraphyView } from "@sybotan-web/graphy/lib";
  8. import { DivideFloorScene } from "cad-engine"
  9. import { SColor, SPoint } from "@sybotan-web/draw/lib";
  10. import canvasFun from "@/components/business_space/newGraphy/canvasFun"
  11. import { floorQuery } from "@/api/scan/request";
  12. export default {
  13. components: {
  14. },
  15. data() {
  16. return {
  17. drawMainScene: null,
  18. view: null,
  19. dataKey: '',
  20. cadWidth: 800,
  21. cadHeight: 600,
  22. canvasLoading: false,
  23. modelId: '',
  24. FloorID: '',
  25. Outline: [],
  26. };
  27. },
  28. props: {
  29. id: {
  30. default: 0
  31. },
  32. CurrentModelId: String
  33. },
  34. created() {},
  35. mounted() {
  36. this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
  37. this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
  38. },
  39. methods: {
  40. initGraphy(ModelId) {
  41. this.modelId = ModelId;
  42. this.clearGraphy()
  43. this.scene = new DivideFloorScene();
  44. this.canvasLoading = true;
  45. this.scene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
  46. let Elements = res.EntityList[0].Elements;
  47. let flag = false;
  48. for (let key in Elements) {
  49. if (Elements[key].length > 0) {
  50. flag = true;
  51. }
  52. }
  53. if (flag) {
  54. this.view.scene = this.scene
  55. this.view.fitSceneToView();
  56. this.canvasLoading = false;
  57. this.view.maxScale = this.view.scale * 10;
  58. this.view.minScale = this.view.scale;
  59. this.scene.click(this, this.canvasClick);
  60. } else {
  61. this.canvasLoading = false;
  62. }
  63. })
  64. },
  65. getFloorData() {
  66. let pa = {
  67. Filters: `FloorID='${this.FloorID}'`
  68. }
  69. floorQuery(pa, res => {
  70. let newArr = res.Content[0].Outline.map(t => {
  71. return new SPoint(t.X, t.Y);
  72. })
  73. this.drawMainScene.addSceneMark(newArr)
  74. })
  75. },
  76. getSelectedSpaces(){//获取选中区域
  77. if(this.view && this.view.scene){
  78. let list = this.view.scene.getSelectedSpaces();
  79. if(list.length){
  80. return list
  81. } else {
  82. return []
  83. }
  84. } else {
  85. return []
  86. }
  87. },
  88. // 清空平面图
  89. clearGraphy() {
  90. if (this.view) {
  91. this.view.scene = null;
  92. return
  93. }
  94. let id = `floorCanvas${this.id}`;
  95. this.view = new SGraphyView(id)
  96. },
  97. canvasClick(item,eventObj){//点击平面图事件
  98. }
  99. },
  100. watch: {
  101. CurrentModelId: {
  102. handler(newName, oldName){
  103. if(newName){
  104. this.initGraphy(newName)
  105. }
  106. },
  107. immediate: true,
  108. }
  109. }
  110. };
  111. </script>
  112. <style scoped lang="less">
  113. .drawFloor {
  114. width: 100%;
  115. height: 100%;
  116. position: relative;
  117. .operate {
  118. position: absolute;
  119. left: 50%;
  120. bottom: 20px;
  121. transform: translateX(-50%);
  122. z-index: 99;
  123. }
  124. }
  125. </style>