addPicture1.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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. this.view.DragMove = true;
  98. this.view.fitSceneToView();
  99. // 获取空间
  100. this.mapSpace(spaceList);
  101. // 设备
  102. this.mapEquipment(equipmentList);
  103. },
  104. // 解析业务空间
  105. mapSpace(val) {
  106. if (!this.scene) return;
  107. const parse = new SZoneParser();
  108. parse.parseData(val);
  109. parse.zoneList.forEach((item) => {
  110. // 设置 tooltip 信息
  111. item.data.tooltipmsg = "空调房";
  112. // 添加事件绑定
  113. item.connect("onMouseLeave", this, this.onMouseleave);
  114. item.connect("onMouseEnter", this, this.onMouseenter);
  115. // 添加到场景
  116. this.scene.addItem(item);
  117. });
  118. },
  119. // 解析设备点
  120. mapEquipment(val) {
  121. val.forEach((item) => {
  122. if (item.bimLocation) {
  123. const arr = item.bimLocation.split(",");
  124. const mark = {
  125. Id: item.equipId,
  126. ElementType: "Mark",
  127. equipId: item.equipId,
  128. Name: item.equipName,
  129. x: Number(arr[0]),
  130. y: Number(arr[1]),
  131. width: item.width,
  132. height: item.height,
  133. url: require("./../../public/assets/img/mark.png"),
  134. tooltipmsg: "空调01", //tooltip信息
  135. };
  136. const t = new MarkItem(null, mark);
  137. t.connect("onMouseLeave", this, this.onMouseleave);
  138. t.connect("onMouseEnter", this, this.onMouseenter);
  139. this.scene.addItem(t);
  140. }
  141. });
  142. },
  143. // 清空画布
  144. clearImg() {
  145. this.scene = new SGraphScene();
  146. if (this.view) {
  147. this.view.update();
  148. }
  149. },
  150. // 鼠标移出
  151. onMouseleave(item, e) {
  152. this.$emit("onMouseleave", item, e);
  153. },
  154. // 鼠标移入
  155. onMouseenter(item, e) {
  156. this.$emit("onMouseenter", item, e);
  157. },
  158. },
  159. watch: {
  160. // 监听key
  161. dataKey: {
  162. handler(val) {
  163. if (val) {
  164. this.init();
  165. }
  166. },
  167. immediate: true,
  168. },
  169. },
  170. created() {
  171. this.clearImg();
  172. },
  173. mounted() {
  174. // 获取 canvas 的宽高
  175. this.canvasWidth = 800;
  176. this.canvasHeight = 600;
  177. // 初始化场景类
  178. this.view = new FloorView("floorMap1");
  179. if (this.scene) {
  180. this.view.scene = this.scene;
  181. }
  182. },
  183. };
  184. </script>