baseTopu4.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!-- 画板 -->
  2. <template>
  3. <div ref="basetopu4" class="base-topu">
  4. <canvas
  5. id="floor_topu4"
  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. import { data } from "./data/data1.js"; //模拟接口返回参数
  17. export default {
  18. data() {
  19. return {
  20. canvasWidth: 0, // 画布的宽
  21. canvasHeight: 0, // 画布的高
  22. view: null, // 视图 view
  23. scene: null, // 场景类
  24. };
  25. },
  26. methods: {
  27. // 初始化
  28. init() {
  29. this.clearImg();
  30. this.view ? (this.view.scene = this.scene) : null;
  31. // 获取压缩包数据并解压
  32. this.getMapBlob();
  33. },
  34. // 请求获取地图的压缩包
  35. getMapBlob() {
  36. const obj = {
  37. graphId: "2dd925178d164a96941c34326ad340e8",
  38. id: "376f578716fb48febe8fb291b527169f",
  39. };
  40. // 请求头上加 projectId
  41. axios.interceptors.request.use(
  42. (config) => {
  43. config.headers = {
  44. projectId: "Pj1101050029", //项目id
  45. };
  46. return config;
  47. },
  48. (error) => {
  49. return Promise.reject(error);
  50. }
  51. );
  52. // 生产环境放开此代码获取真实数据
  53. // axios.post("/labsl/graph/pub/read", obj).then((res) => {
  54. // this.getDataSuc(data);
  55. // });
  56. // 以下为测试环境demo;
  57. this.getDataSuc(data);
  58. },
  59. // 读图成功回调
  60. getDataSuc(data) {
  61. // if (res.data.result == "failure") return;
  62. // 添加图片路径
  63. if (data.content.elements.nodes && data.content.elements.nodes.length) {
  64. data.content.elements.nodes = data.content.elements.nodes.map((obj) => {
  65. if (obj.properties.type == "BaseEquipment") {
  66. if (obj.style.default.url) {
  67. obj.style.default.url = !obj.style.default.url.includes(
  68. "/image-service/common/"
  69. )
  70. ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
  71. obj.style.default.url
  72. : obj.style.default.url;
  73. } else {
  74. // 默认图标
  75. obj.style.default.url = !obj.style.default.url.includes(
  76. "/image-service/common/"
  77. )
  78. ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
  79. "1607752841478.svg"
  80. : obj.style.default.url;
  81. }
  82. }
  83. return obj;
  84. });
  85. }
  86. const parse = new PTopoParser();
  87. // 获取数据解析数据再将转化得实例添加到场景中
  88. parse.parseData(data.content.elements);
  89. parse.markers.forEach((item) => {
  90. this.scene.addItem(item);
  91. });
  92. parse.nodes.forEach((item) => {
  93. item.moveable = false; //设备不可拖动
  94. this.scene.addItem(item);
  95. });
  96. parse.relations.forEach((t) => {
  97. this.scene.addItem(t);
  98. });
  99. setTimeout(() => {
  100. this.view.fitSceneToView();
  101. });
  102. },
  103. // 清空画布
  104. clearImg() {
  105. this.scene = new SGraphScene();
  106. if (this.view) {
  107. this.view.update();
  108. }
  109. },
  110. },
  111. created() {
  112. this.clearImg();
  113. },
  114. mounted() {
  115. // 获取 canvas 的宽高
  116. this.canvasWidth = 800;
  117. this.canvasHeight = 600;
  118. // 初始化场景类
  119. this.view = new SGraphView("floor_topu4");
  120. //////////////////////////////////////
  121. //////////////////////////////////////
  122. this.view.moveable = false;
  123. //////////////////////////////////////
  124. /////////////////////////////////////
  125. if (this.scene) {
  126. this.view.scene = this.scene;
  127. }
  128. this.init();
  129. },
  130. };
  131. </script>
  132. <style lang="less" scoped>
  133. .base-topu {
  134. width: 100%;
  135. height: 100%;
  136. position: relative;
  137. }
  138. </style>