spaceGraph.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div id="graphContainer" ref="graphContainer">
  3. <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { Vue, Component } from "vue-property-decorator";
  8. import { FloorView } from "@/utils/graph/FloorView";
  9. import { FloorScene } from "@/utils/graph/FloorScene";
  10. @Component
  11. export default class spaceGraph extends Vue {
  12. canvasWidth = 800;
  13. canvasHeight = 800;
  14. view: FloorView | undefined = undefined;
  15. floorMap =
  16. "/image-service/common/file_get?systemId=revit&key=base/76233a3214dd11eb94d469663ce1649a.jsonz";
  17. canvasLoading = false;
  18. mounted(): void {
  19. this.canvasWidth = this.$refs.graphContainer.offsetWidth;
  20. this.canvasHeight = this.$refs.graphContainer.offsetHeight;
  21. this.getGraph();
  22. }
  23. init(): void {
  24. console.log('init');
  25. }
  26. getGraph(): void {
  27. const scene = new FloorScene();
  28. this.canvasLoading = true;
  29. this.clearGraphy()
  30. scene.loadUrl(this.floorMap).then((res) => {
  31. if (this.view) {
  32. this.view.scene = scene;
  33. }
  34. this.getGraphSuc(res);
  35. });
  36. }
  37. getGraphSuc(res: any): void {
  38. this.canvasLoading = false;
  39. if (res == "error") {
  40. this.floorMap = "";
  41. this.$message.warning("数据解析异常");
  42. return;
  43. }
  44. this.view?.fitSceneToView()
  45. }
  46. // 清除canvas
  47. clearGraphy() {
  48. if (this.view) {
  49. this.view.scene = null;
  50. return
  51. }
  52. this.view = new FloorView('spaceCanvas')
  53. }
  54. }
  55. </script>
  56. <style lang="scss">
  57. #graphContainer {
  58. position: relative;
  59. width: 100%;
  60. height: 100%;
  61. }
  62. </style>