addEvent.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!-- 画板 -->
  2. <template>
  3. <div class="base-map">
  4. <canvas
  5. v-loading="loading"
  6. id="floorMap3"
  7. :width="canvasWidth"
  8. :height="canvasHeight"
  9. tabindex="0"
  10. ></canvas>
  11. </div>
  12. </template>
  13. <script>
  14. import { SGraphView, SGraphScene } from "@persagy-web/graph";
  15. import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
  16. import { SColor } from "@persagy-web/draw";
  17. export default {
  18. data() {
  19. return {
  20. canvasWidth: 0, // 画布的宽
  21. canvasHeight: 0, // 画布的高
  22. view: null, // 视图 view
  23. scene: null, // 场景类
  24. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  25. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  26. loading: false,
  27. isShowColumn: false, //是否展示柱子
  28. isShowWall: false, //是否显示墙
  29. isShowVirtualWall: false, //是否显示虚拟墙
  30. isShowDoor: false, // 是否显示门
  31. isShowWindow: false, //是否显示窗户
  32. isSpaceSelectable: true, //是否显示空间
  33. };
  34. },
  35. methods: {
  36. // 初始化
  37. init() {
  38. this.clearImg();
  39. this.view ? (this.view.scene = this.scene) : null;
  40. // 获取压缩包数据并解压
  41. this.getMapBlob();
  42. },
  43. // 请求获取地图的压缩包
  44. getMapBlob() {
  45. const url = this.mapUrl + this.dataKey;
  46. this.loading = true;
  47. getJsonz(url)
  48. .then((data) => {
  49. // 解析数据并放入压缩包中
  50. this.parserData(data);
  51. this.loading = false;
  52. })
  53. .catch(() => {
  54. this.loading = false;
  55. });
  56. },
  57. // 解析数据并注入 scene 类中
  58. parserData(data) {
  59. let parser = new SFloorParser();
  60. parser.parseData(data);
  61. parser.spaceList.forEach((t) => {
  62. /////////////////////////////////////////
  63. // 样式调整
  64. // 是否显示实例
  65. t.visible = this.isSpaceSelectable;
  66. //是否展示名称
  67. t.showBaseName = false;
  68. // 显示边框色
  69. t.strokeColor = new SColor("#F0F3F7");
  70. // 填充色
  71. t.fillColor = new SColor("#F0F3F7");
  72. // 边框线宽
  73. t.lineWidth = 1;
  74. t.connect("onMouseDown", this, this.onMousedown);
  75. t.connect("onMouseUp", this, this.onMouseup);
  76. t.connect("onMouseLeave", this, this.onMouseleave);
  77. t.connect("onMouseEnter", this, this.onMouseenter);
  78. // 添加图例
  79. this.scene.addItem(t);
  80. });
  81. parser.wallList.forEach((t) => {
  82. // 是否显示
  83. t.visible = this.isShowWall;
  84. this.scene.addItem(t);
  85. });
  86. parser.virtualWallList.forEach((t) => {
  87. // 是否显示
  88. t.visible = this.isShowVirtualWall;
  89. this.scene.addItem(t);
  90. });
  91. parser.doorList.forEach((t) => {
  92. // 是否显示
  93. t.visible = this.isShowDoor;
  94. this.scene.addItem(t);
  95. });
  96. parser.columnList.forEach((t) => {
  97. // 是否显示
  98. t.visible = this.isShowColumn;
  99. this.scene.addItem(t);
  100. });
  101. parser.casementList.forEach((t) => {
  102. // 是否显示
  103. t.visible = this.isShowWindow;
  104. this.scene.addItem(t);
  105. });
  106. // 画板是否可拖动
  107. this.view.DragMove = true;
  108. this.view.fitSceneToView();
  109. },
  110. // 鼠标点击事件
  111. onMousedown(item, e) {
  112. console.log("鼠标按下!", item, e);
  113. },
  114. // 鼠标抬起事件
  115. onMouseup(item, e) {},
  116. // 鼠标事件移入
  117. onMouseenter(item, e) {},
  118. // 鼠标事件移出
  119. onMouseleave(item, e) {},
  120. // 清空画布
  121. clearImg() {
  122. this.scene = new SGraphScene();
  123. if (this.view) {
  124. this.view.update();
  125. }
  126. },
  127. },
  128. watch: {
  129. // 监听key
  130. dataKey: {
  131. handler(val) {
  132. if (val) {
  133. this.init();
  134. }
  135. },
  136. immediate: true,
  137. },
  138. },
  139. created() {
  140. this.clearImg();
  141. },
  142. mounted() {
  143. // 获取 canvas 的宽高
  144. this.canvasWidth = 800;
  145. this.canvasHeight = 600;
  146. // 初始化场景类
  147. this.view = new SGraphView("floorMap3");
  148. if (this.scene) {
  149. this.view.scene = this.scene;
  150. }
  151. },
  152. };
  153. </script>