baseTopu5.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!-- 画板 -->
  2. <template>
  3. <div ref="basetopu3" class="base-topu">
  4. <canvas
  5. id="floor_topu3"
  6. :width="canvasWidth"
  7. :height="canvasHeight"
  8. tabindex="0"
  9. ></canvas>
  10. </div>
  11. </template>
  12. <script>
  13. import { SGraphScene } from "@persagy-web/graph";
  14. import { FloorView } from "./FloorView";
  15. import { PTopoParser } from "./PTopoParser";
  16. import { SColor } from "@persagy-web/draw/";
  17. import axios from "axios";
  18. export default {
  19. data() {
  20. return {
  21. canvasWidth: 0, // 画布的宽
  22. canvasHeight: 0, // 画布的高
  23. view: null, // 视图 view
  24. scene: null, // 场景类
  25. };
  26. },
  27. methods: {
  28. // 初始化
  29. init() {
  30. this.clearImg();
  31. this.view ? (this.view.scene = this.scene) : null;
  32. // 获取压缩包数据并解压
  33. this.getMapBlob();
  34. },
  35. // 请求获取地图的压缩包
  36. getMapBlob() {
  37. const obj = {
  38. graphId: "2dd925178d164a96941c34326ad340e8",
  39. id: "376f578716fb48febe8fb291b527169f",
  40. };
  41. // 请求头上加 projectId
  42. axios.interceptors.request.use(
  43. (config) => {
  44. config.headers = {
  45. projectId: "Pj1101050029", //项目id
  46. };
  47. return config;
  48. },
  49. (error) => {
  50. return Promise.reject(error);
  51. }
  52. );
  53. axios.post("/labsl/graph/pub/read", obj).then((res) => {
  54. this.getDataSuc(res);
  55. });
  56. },
  57. // 读图成功回调
  58. getDataSuc(res) {
  59. if (res.data.result == "failure") return;
  60. const parse = new PTopoParser();
  61. // 获取数据解析数据再将转化得实例添加到场景中
  62. parse.parseData(res.data.content.elements);
  63. parse.markers.forEach((item) => {
  64. item.moveable = false;
  65. this.scene.addItem(item);
  66. });
  67. parse.nodes.forEach((item) => {
  68. item.moveable = false;
  69. // 相关事件触发
  70. item.connect("onMouseDown", this, this.onMousedown);
  71. item.connect("onMouseUp", this, this.onMouseup);
  72. item.connect("onMouseLeave", this, this.onMouseleave);
  73. item.connect("onMouseEnter", this, this.onMouseenter);
  74. this.scene.addItem(item);
  75. });
  76. parse.relations.forEach((t) => {
  77. t.moveable = false;
  78. this.scene.addItem(t);
  79. });
  80. this.view.fitSceneToView();
  81. },
  82. // 鼠标点击事件
  83. onMousedown(item, e) {
  84. console.log("鼠标按下!", item, e);
  85. this.$emit("onMousedown", item, e);
  86. },
  87. // 鼠标抬起事件
  88. onMouseup(item, e) {
  89. console.log("鼠标抬起!", item, e);
  90. },
  91. // 鼠标事件移入
  92. onMouseenter(item, e) {
  93. console.log("鼠标移入!", item, e);
  94. },
  95. // 鼠标事件移出
  96. onMouseleave(item, e) {
  97. console.log("鼠标移出!", item, e);
  98. },
  99. // 清空画布
  100. clearImg() {
  101. this.scene = new SGraphScene();
  102. if (this.view) {
  103. this.view.update();
  104. }
  105. },
  106. },
  107. created() {
  108. this.clearImg();
  109. },
  110. mounted() {
  111. // 获取 canvas 的宽高
  112. this.canvasWidth = 800;
  113. this.canvasHeight = 600;
  114. // 初始化场景类
  115. this.view = new FloorView("floor_topu3");
  116. /** 背景色 */
  117. this.view.backgroundColor = new SColor("#1f1f27");
  118. if (this.scene) {
  119. this.view.scene = this.scene;
  120. }
  121. this.init();
  122. },
  123. };
  124. </script>
  125. <style lang="less" scoped>
  126. .base-topu {
  127. width: 100%;
  128. height: 100%;
  129. position: relative;
  130. }
  131. </style>