zone.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div>
  3. <canvas id="wall" width="800" height="400" tabindex="0" />
  4. </div>
  5. </template>
  6. <script>
  7. import {SGraphScene, SGraphView} from "@persagy-web/graph/";
  8. import {SZoneItem} from "../../../../guides/big/items/src/SZoneItem";
  9. export default {
  10. name: "zone",
  11. data(){
  12. return {
  13. outline:[
  14. [
  15. // 未掏洞的空间
  16. [
  17. {"X":30150.15,"Y":82300.04,"Z":59400.0},
  18. {"X":30150.15,"Y":81400.04,"Z":59400.0},
  19. {"X":33400.15,"Y":82300.04,"Z":59400.0},
  20. {"X":30150.15,"Y":82300.04,"Z":59400.0}
  21. ],
  22. ],
  23. [
  24. // 掏洞的空间
  25. [
  26. {"X":25500.15,"Y":77100.04,"Z":59400.0},
  27. {"X":28200.15,"Y":77100.04,"Z":59400.0},
  28. {"X":28200.15,"Y":82300.04,"Z":59400.0},
  29. {"X":25500.15,"Y":82300.04,"Z":59400.0},
  30. {"X":25500.15,"Y":77100.04,"Z":59400.0}
  31. ],
  32. [
  33. {"X":25900.15,"Y":80300.04,"Z":59400.0},
  34. {"X":27200.15,"Y":80300.04,"Z":59400.0},
  35. {"X":27200.15,"Y":77900.04,"Z":59400.0},
  36. {"X":25900.15,"Y":77900.04,"Z":59400.0},
  37. ]
  38. ]
  39. ]
  40. }
  41. },
  42. mounted() {
  43. this.init();
  44. },
  45. methods:{
  46. init(){
  47. this.view = new SGraphView('wall');
  48. const scene = new SGraphScene();
  49. this.view.scene = scene;
  50. // 只模拟了轮廓数据
  51. const item = new SZoneItem(null,{OutLine:this.outline});
  52. scene.addItem(item);
  53. this.view.fitSceneToView();
  54. this.view.scalable = false;
  55. }
  56. }
  57. }
  58. </script>
  59. <style scoped>
  60. </style>