addEventshow2.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <!-- 画板 -->
  2. <template>
  3. <div class="base-map">
  4. <canvas
  5. v-loading="loading"
  6. id="floorMap4"
  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. import { eventScene } from "./addEventClass/eventScene";
  18. const map1 = require("../../../public/assets/map/1.json");
  19. export default {
  20. data() {
  21. return {
  22. canvasWidth: 0, // 画布的宽
  23. canvasHeight: 0, // 画布的高
  24. view: null, // 视图 view
  25. scene: null, // 场景类
  26. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  27. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  28. loading: false,
  29. isShowColumn: false, //是否展示柱子
  30. isShowWall: false, //是否显示墙
  31. isShowVirtualWall: false, //是否显示虚拟墙
  32. isShowDoor: false, // 是否显示门
  33. isShowWindow: false, //是否显示窗户
  34. isSpaceSelectable: true, //是否显示空间
  35. selectItem: null, // 选中的 item 实例
  36. };
  37. },
  38. methods: {
  39. // 初始化
  40. init() {
  41. this.clearImg();
  42. this.view ? (this.view.scene = this.scene) : null;
  43. // 解析数据并放入压缩包中
  44. setTimeout(() => {
  45. this.parserData(map1.EntityList[0].Elements);
  46. });
  47. },
  48. // 解析数据并注入 scene 类中
  49. parserData(data) {
  50. let parser = new SFloorParser();
  51. parser.parseData(data);
  52. parser.spaceList.forEach((t) => {
  53. /////////////////////////////////////////
  54. // 样式调整
  55. // 是否显示实例
  56. t.visible = this.isSpaceSelectable;
  57. //是否展示名称
  58. t.showBaseName = false;
  59. // 显示边框色
  60. t.strokeColor = new SColor("#F0F3F7");
  61. // 填充色
  62. t.fillColor = new SColor("#F0F3F7");
  63. // 边框线宽
  64. t.lineWidth = 1;
  65. t.connect("onMouseDown", this, this.onMousedown);
  66. t.connect("onMouseUp", this, this.onMouseup);
  67. t.connect("onMouseLeave", this, this.onMouseleave);
  68. t.connect("onMouseEnter", this, this.onMouseenter);
  69. // 添加图例
  70. this.scene.addItem(t);
  71. });
  72. parser.wallList.forEach((t) => {
  73. // 是否显示
  74. t.visible = this.isShowWall;
  75. this.scene.addItem(t);
  76. });
  77. parser.virtualWallList.forEach((t) => {
  78. // 是否显示
  79. t.visible = this.isShowVirtualWall;
  80. this.scene.addItem(t);
  81. });
  82. parser.doorList.forEach((t) => {
  83. // 是否显示
  84. t.visible = this.isShowDoor;
  85. this.scene.addItem(t);
  86. });
  87. parser.columnList.forEach((t) => {
  88. // 是否显示
  89. t.visible = this.isShowColumn;
  90. this.scene.addItem(t);
  91. });
  92. parser.casementList.forEach((t) => {
  93. // 是否显示
  94. t.visible = this.isShowWindow;
  95. this.scene.addItem(t);
  96. });
  97. // 画板是否可拖动
  98. this.view.DragMove = true;
  99. this.view.fitSceneToView();
  100. },
  101. // 鼠标点击事件
  102. onMousedown(item, e) {
  103. const DefaltColor = "#F0F3F7"; //默认颜色
  104. const clickColor = "#7ed321";
  105. // 如果点击前有选中的 selectItem 清空
  106. if (this.selectItem) {
  107. this.selectItem.fillColor = new SColor(DefaltColor);
  108. this.selectItem.strokeColor = new SColor(DefaltColor);
  109. }
  110. // 是否选中 item
  111. if (item) {
  112. // 判断当前 item 是否重复点击或者之前 selectItem = null
  113. if (this.selectItem) {
  114. if (this.selectItem != item) {
  115. // 之前空间置回原来的状态
  116. const oldSelectItem = this.selectItem;
  117. oldSelectItem.fillColor = new SColor(DefaltColor);
  118. oldSelectItem.strokeColor = new SColor(DefaltColor);
  119. // 新item高亮
  120. const newSelectItem = item;
  121. newSelectItem.fillColor = new SColor(clickColor);
  122. newSelectItem.strokeColor = new SColor(clickColor);
  123. this.selectItem = newSelectItem;
  124. } else {
  125. // 将选中的item 置为默认状态 选中 selectItem 为空
  126. const oldSelectItem = this.selectItem;
  127. oldSelectItem.fillColor = new SColor(DefaltColor);
  128. oldSelectItem.strokeColor = new SColor(DefaltColor);
  129. this.selectItem = null;
  130. }
  131. } else {
  132. // 如果点击前没有选中的 item 则直接赋给
  133. this.selectItem = item;
  134. this.selectItem.fillColor = new SColor(clickColor);
  135. this.selectItem.strokeColor = new SColor(clickColor);
  136. }
  137. } else {
  138. this.selectItem = null;
  139. }
  140. },
  141. // 鼠标抬起事件
  142. onMouseup(item, e) {},
  143. // 鼠标事件移入
  144. onMouseenter(item, e) {
  145. if (this.selectItem && item == this.selectItem) return;
  146. item.fillColor = new SColor("#E1F2FF");
  147. item.strokeColor = new SColor("#E1F2FF");
  148. },
  149. // 鼠标事件移出
  150. onMouseleave(item, e) {
  151. if (this.selectItem && item == this.selectItem) return;
  152. item.fillColor = new SColor("#F0F3F7");
  153. item.strokeColor = new SColor("#F0F3F7");
  154. },
  155. // 清空画布
  156. clearImg() {
  157. this.scene = new eventScene();
  158. this.scene.vueOnMouseDown = this.onMousedown;
  159. if (this.view) {
  160. this.view.update();
  161. }
  162. },
  163. },
  164. created() {
  165. this.clearImg();
  166. },
  167. mounted() {
  168. // 获取 canvas 的宽高
  169. this.canvasWidth = 800;
  170. this.canvasHeight = 600;
  171. // 初始化场景类
  172. this.view = new SGraphView("floorMap4");
  173. if (this.scene) {
  174. this.view.scene = this.scene;
  175. this.init();
  176. }
  177. },
  178. };
  179. </script>