addPicture.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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. import { equipmentList } from "./data/equipmentList.js";
  19. import { spaceList } from "./data/spacelist.js";
  20. import { MarkItem } from "./addPictrueClass/MarkItem";
  21. export default {
  22. data() {
  23. return {
  24. canvasWidth: 0, // 画布的宽
  25. canvasHeight: 0, // 画布的高
  26. view: null, // 视图 view
  27. scene: null, // 场景类
  28. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  29. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  30. loading: false,
  31. isShowColumn: false, //是否展示柱子
  32. isShowWall: false, //是否显示墙
  33. isShowVirtualWall: false, //是否显示虚拟墙
  34. isShowDoor: false, // 是否显示门
  35. isShowWindow: false, //是否显示窗户
  36. isSpaceSelectable: true, //是否显示空间
  37. };
  38. },
  39. methods: {
  40. // 初始化
  41. init() {
  42. this.clearImg();
  43. this.view ? (this.view.scene = this.scene) : null;
  44. // 获取压缩包数据并解压
  45. this.getMapBlob();
  46. },
  47. // 请求获取地图的压缩包
  48. getMapBlob() {
  49. const url = this.mapUrl + this.dataKey;
  50. this.loading = true;
  51. getJsonz(url)
  52. .then((data) => {
  53. // 解析数据并放入压缩包中
  54. this.parserData(data);
  55. this.loading = false;
  56. })
  57. .catch(() => {
  58. this.loading = false;
  59. });
  60. },
  61. // 解析数据并注入 scene 类中
  62. parserData(data) {
  63. let parser = new SFloorParser();
  64. parser.parseData(data);
  65. parser.spaceList.forEach((t) => {
  66. /////////////////////////////////////////
  67. // 样式调整
  68. // 是否显示实例
  69. t.visible = this.isSpaceSelectable;
  70. //是否展示名称
  71. t.showBaseName = false;
  72. // 显示边框色
  73. t.strokeColor = new SColor("#F0F3F7");
  74. // 填充色
  75. t.fillColor = new SColor("#F0F3F7");
  76. // 边框线宽
  77. t.lineWidth = 1;
  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. this.mapSpace(spaceList);
  111. // 设备
  112. this.mapEquipment(equipmentList)
  113. },
  114. // 解析业务空间
  115. mapSpace(val) {
  116. if (!this.scene) return;
  117. const parse = new SZoneParser();
  118. parse.parseData(val);
  119. parse.zoneList.forEach((item) => {
  120. // 添加到场景
  121. this.scene.addItem(item);
  122. });
  123. },
  124. // 解析设备点
  125. mapEquipment(val) {
  126. val.forEach((item) => {
  127. if (item.bimLocation) {
  128. const arr = item.bimLocation.split(",");
  129. const mark = {
  130. Id: item.equipId,
  131. ElementType: "Mark",
  132. equipId: item.equipId,
  133. Name: item.equipName,
  134. x: Number(arr[0]),
  135. y: Number(arr[1]),
  136. width: item.width,
  137. height: item.height,
  138. url:require('./../../public/assets/img/mark.png')
  139. };
  140. const aaa = new MarkItem(mark);
  141. console.log(aaa,'aaa')
  142. this.scene.addItem(aaa);
  143. }
  144. });
  145. },
  146. // 清空画布
  147. clearImg() {
  148. this.scene = new SGraphScene();
  149. if (this.view) {
  150. this.view.update();
  151. }
  152. },
  153. },
  154. watch: {
  155. // 监听key
  156. dataKey: {
  157. handler(val) {
  158. if (val) {
  159. this.init();
  160. }
  161. },
  162. immediate: true,
  163. },
  164. },
  165. created() {
  166. this.clearImg();
  167. },
  168. mounted() {
  169. // 获取 canvas 的宽高
  170. this.canvasWidth = 800;
  171. this.canvasHeight = 600;
  172. // 初始化场景类
  173. this.view = new SGraphView("floorMap1");
  174. if (this.scene) {
  175. this.view.scene = this.scene;
  176. }
  177. },
  178. };
  179. </script>