baseTopu2.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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. item.moveable = false;
  63. this.scene.addItem(item);
  64. });
  65. parse.nodes.forEach((item) => {
  66. item.moveable = false;
  67. // 相关事件触发
  68. item.connect("onMouseDown", this, this.onMousedown);
  69. item.connect("onMouseUp", this, this.onMouseup);
  70. item.connect("onMouseLeave", this, this.onMouseleave);
  71. item.connect("onMouseEnter", this, this.onMouseenter);
  72. this.scene.addItem(item);
  73. });
  74. parse.relations.forEach((t) => {
  75. t.moveable = false;
  76. this.scene.addItem(t);
  77. });
  78. this.view.fitSceneToView();
  79. },
  80. // 鼠标点击事件
  81. onMousedown(item, e) {
  82. console.log("鼠标按下!", item, e);
  83. this.$emit("onMousedown", item, e);
  84. },
  85. // 鼠标抬起事件
  86. onMouseup(item, e) {
  87. console.log("鼠标抬起!", item, e);
  88. },
  89. // 鼠标事件移入
  90. onMouseenter(item, e) {
  91. console.log("鼠标移入!", item, e);
  92. },
  93. // 鼠标事件移出
  94. onMouseleave(item, e) {
  95. console.log("鼠标移出!", item, e);
  96. },
  97. // 清空画布
  98. clearImg() {
  99. this.scene = new SGraphScene();
  100. if (this.view) {
  101. this.view.update();
  102. }
  103. },
  104. },
  105. created() {
  106. this.clearImg();
  107. },
  108. mounted() {
  109. // 获取 canvas 的宽高
  110. this.canvasWidth = 800;
  111. this.canvasHeight = 600;
  112. // 初始化场景类
  113. this.view = new SGraphView("floor_topu");
  114. if (this.scene) {
  115. this.view.scene = this.scene;
  116. }
  117. this.init();
  118. },
  119. };
  120. </script>
  121. <style lang="less" scoped>
  122. .base-topu {
  123. width: 100%;
  124. height: 100%;
  125. position: relative;
  126. }
  127. </style>