baseTopu1.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!-- 画板 -->
  2. <template>
  3. <div ref="basetopu" class="base-topu">
  4. <canvas
  5. id="floor_topu"
  6. :width="canvasWidth"
  7. :height="canvasHeight"
  8. tabindex="0"
  9. ></canvas>
  10. </div>
  11. </template>
  12. <script>
  13. import { SGraphView, SGraphScene } from "@persagy-web/graph";
  14. import { PTopoParser } from "./PTopoParser";
  15. import axios from "axios";
  16. export default {
  17. data() {
  18. return {
  19. canvasWidth: 0, // 画布的宽
  20. canvasHeight: 0, // 画布的高
  21. view: null, // 视图 view
  22. scene: null, // 场景类
  23. };
  24. },
  25. methods: {
  26. // 初始化
  27. init() {
  28. this.clearImg();
  29. this.view ? (this.view.scene = this.scene) : null;
  30. // 获取压缩包数据并解压
  31. this.getMapBlob();
  32. },
  33. // 请求获取地图的压缩包
  34. getMapBlob() {
  35. const obj = {
  36. graphId: "2dd925178d164a96941c34326ad340e8",
  37. id: "376f578716fb48febe8fb291b527169f",
  38. };
  39. // 请求头上加 projectId
  40. axios.interceptors.request.use(
  41. (config) => {
  42. config.headers = {
  43. projectId: "Pj1101050029", //项目id
  44. };
  45. return config;
  46. },
  47. (error) => {
  48. return Promise.reject(error);
  49. }
  50. );
  51. axios.post("/labsl/graph/pub/read", obj).then((res) => {
  52. this.getDataSuc(res);
  53. });
  54. },
  55. // 读图成功回调
  56. getDataSuc(res) {
  57. if (res.data.result == "failure") return;
  58. const parse = new PTopoParser();
  59. // 获取数据解析数据再将转化得实例添加到场景中
  60. parse.parseData(res.data.content.elements);
  61. parse.markers.forEach((item) => {
  62. this.scene.addItem(item);
  63. });
  64. parse.nodes.forEach((item) => {
  65. this.scene.addItem(item);
  66. });
  67. parse.relations.forEach((t) => {
  68. this.scene.addItem(t);
  69. });
  70. this.view.fitSceneToView();
  71. },
  72. // 清空画布
  73. clearImg() {
  74. this.scene = new SGraphScene();
  75. if (this.view) {
  76. this.view.update();
  77. }
  78. },
  79. },
  80. created() {
  81. this.clearImg();
  82. },
  83. mounted() {
  84. // 获取 canvas 的宽高
  85. this.canvasWidth = 800;
  86. this.canvasHeight = 600;
  87. // 初始化场景类
  88. this.view = new SGraphView("floor_topu");
  89. if (this.scene) {
  90. this.view.scene = this.scene;
  91. }
  92. this.init();
  93. },
  94. };
  95. </script>
  96. <style lang="less" scoped>
  97. .base-topu {
  98. width: 100%;
  99. height: 100%;
  100. position: relative;
  101. }
  102. </style>