addPicture1.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <!-- 画板 -->
  2. <template>
  3. <div ref="baseMap" class="base-map">
  4. <canvas
  5. v-loading="loading"
  6. id="floorMap1"
  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. /////////模拟接口数据
  18. const map1 = require("../../../public/assets/map/1.json");
  19. import { equipmentList } from "./data/equipmentList.js";
  20. import { spaceList } from "./data/spacelist.js";
  21. import { MarkItem } from "./addPictrueClass/MarkItem";
  22. import { FloorView } from "./addPictrueClass/FloorView";
  23. export default {
  24. data() {
  25. return {
  26. canvasWidth: 0, // 画布的宽
  27. canvasHeight: 0, // 画布的高
  28. view: null, // 视图 view
  29. scene: null, // 场景类
  30. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  31. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  32. loading: false,
  33. isShowColumn: false, //是否展示柱子
  34. isShowWall: false, //是否显示墙
  35. isShowVirtualWall: false, //是否显示虚拟墙
  36. isShowDoor: false, // 是否显示门
  37. isShowWindow: false, //是否显示窗户
  38. isSpaceSelectable: true, //是否显示空间
  39. };
  40. },
  41. methods: {
  42. // 初始化
  43. init() {
  44. this.clearImg();
  45. this.view ? (this.view.scene = this.scene) : null;
  46. // 获取压缩包数据并解压
  47. setTimeout(() => {
  48. this.parserData(map1.EntityList[0].Elements);
  49. });
  50. },
  51. // 解析数据并注入 scene 类中
  52. parserData(data) {
  53. let parser = new SFloorParser();
  54. parser.parseData(data);
  55. parser.spaceList.forEach((t) => {
  56. /////////////////////////////////////////
  57. // 样式调整
  58. // 是否显示实例
  59. t.visible = this.isSpaceSelectable;
  60. //是否展示名称
  61. t.showBaseName = false;
  62. // 显示边框色
  63. t.strokeColor = new SColor("#F0F3F7");
  64. // 填充色
  65. t.fillColor = new SColor("#F0F3F7");
  66. // 边框线宽
  67. t.lineWidth = 1;
  68. // 添加图例
  69. this.scene.addItem(t);
  70. });
  71. parser.wallList.forEach((t) => {
  72. // 是否显示
  73. t.visible = this.isShowWall;
  74. this.scene.addItem(t);
  75. });
  76. parser.virtualWallList.forEach((t) => {
  77. // 是否显示
  78. t.visible = this.isShowVirtualWall;
  79. this.scene.addItem(t);
  80. });
  81. parser.doorList.forEach((t) => {
  82. // 是否显示
  83. t.visible = this.isShowDoor;
  84. this.scene.addItem(t);
  85. });
  86. parser.columnList.forEach((t) => {
  87. // 是否显示
  88. t.visible = this.isShowColumn;
  89. this.scene.addItem(t);
  90. });
  91. parser.casementList.forEach((t) => {
  92. // 是否显示
  93. t.visible = this.isShowWindow;
  94. this.scene.addItem(t);
  95. });
  96. // 画板是否可拖动
  97. if (this.view) {
  98. this.view.DragMove = true;
  99. this.view.fitSceneToView();
  100. }
  101. // 获取空间
  102. this.mapSpace(spaceList);
  103. // 设备
  104. this.mapEquipment(equipmentList);
  105. },
  106. // 解析业务空间
  107. mapSpace(val) {
  108. if (!this.scene) return;
  109. const parse = new SZoneParser();
  110. parse.parseData(val);
  111. parse.zoneList.forEach((item) => {
  112. // 设置 tooltip 信息
  113. item.data.tooltipmsg = "空调房";
  114. // 添加事件绑定
  115. item.connect("onMouseLeave", this, this.onMouseleave);
  116. item.connect("onMouseEnter", this, this.onMouseenter);
  117. // 添加到场景
  118. this.scene.addItem(item);
  119. });
  120. },
  121. // 解析设备点
  122. mapEquipment(val) {
  123. val.forEach((item) => {
  124. if (item.bimLocation) {
  125. const arr = item.bimLocation.split(",");
  126. const mark = {
  127. Id: item.equipId,
  128. ElementType: "Mark",
  129. equipId: item.equipId,
  130. Name: item.equipName,
  131. x: Number(arr[0]),
  132. y: Number(arr[1]),
  133. width: item.width,
  134. height: item.height,
  135. url: require("./../../public/assets/img/mark.png"),
  136. tooltipmsg: "空调01", //tooltip信息
  137. };
  138. const t = new MarkItem(null, mark);
  139. t.connect("onMouseLeave", this, this.onMouseleave);
  140. t.connect("onMouseEnter", this, this.onMouseenter);
  141. this.scene.addItem(t);
  142. }
  143. });
  144. },
  145. // 清空画布
  146. clearImg() {
  147. this.scene = new SGraphScene();
  148. if (this.view) {
  149. this.view.update();
  150. }
  151. },
  152. // 鼠标移出
  153. onMouseleave(item, e) {
  154. this.$emit("onMouseleave", item, e);
  155. },
  156. // 鼠标移入
  157. onMouseenter(item, e) {
  158. this.$emit("onMouseenter", item, e);
  159. },
  160. },
  161. watch: {
  162. // 监听key
  163. dataKey: {
  164. handler(val) {
  165. if (val) {
  166. this.init();
  167. }
  168. },
  169. immediate: true,
  170. },
  171. },
  172. created() {
  173. this.clearImg();
  174. },
  175. mounted() {
  176. // 获取 canvas 的宽高
  177. this.canvasWidth = 800;
  178. this.canvasHeight = 600;
  179. // 初始化场景类
  180. this.view = new FloorView("floorMap1");
  181. if (this.scene) {
  182. this.view.scene = this.scene;
  183. }
  184. },
  185. };
  186. </script>