partChange.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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, SPoint } 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. // 添加到场景
  111. item.selectable = true;
  112. item.showSelect = false;
  113. item.connect("onMouseDown", this, this.spaceDown);
  114. this.scene.addItem(item);
  115. });
  116. },
  117. // 解析设备点
  118. mapEquipment(val) {
  119. val.forEach((item) => {
  120. if (item.bimLocation) {
  121. const arr = item.bimLocation.split(",");
  122. const mark = {
  123. Id: item.equipId,
  124. ElementType: "Mark",
  125. equipId: item.equipId,
  126. Name: item.equipName,
  127. x: Number(arr[0]),
  128. y: Number(arr[1]),
  129. width: item.width,
  130. height: item.height,
  131. url: require("./../../public/assets/img/mark.png"),
  132. };
  133. const aaa = new MarkItem(null, mark);
  134. aaa.connect("onMouseDown", this, this.equipDown);
  135. this.scene.addItem(aaa);
  136. }
  137. });
  138. },
  139. // 点击设备
  140. equipDown(item, e) {
  141. this.locationGraphy(item);
  142. },
  143. // 点击空间
  144. spaceDown(item, e) {
  145. item.selected = true;
  146. this.sizeGraphy();
  147. },
  148. // 画布移动到中部
  149. locationGraphy(item) {
  150. let centerX = this.view.width / 2 - item.x * this.view.scale;
  151. let centerY = (this.view.height / 2 - item.y * this.view.scale);
  152. this.view.origin = new SPoint(centerX, centerY);
  153. },
  154. // 局部放大
  155. sizeGraphy() {
  156. this.view.fitSelectedToView(0.9);
  157. },
  158. // 清空画布
  159. clearImg() {
  160. this.scene = new SGraphScene();
  161. if (this.view) {
  162. this.view.update();
  163. }
  164. },
  165. },
  166. watch: {
  167. // 监听key
  168. dataKey: {
  169. handler(val) {
  170. if (val) {
  171. this.init();
  172. }
  173. },
  174. immediate: true,
  175. },
  176. },
  177. created() {
  178. this.clearImg();
  179. },
  180. mounted() {
  181. // 获取 canvas 的宽高
  182. this.canvasWidth = 800;
  183. this.canvasHeight = 600;
  184. // 初始化场景类
  185. this.view = new FloorView("floorMap1");
  186. if (this.scene) {
  187. this.view.scene = this.scene;
  188. }
  189. },
  190. };
  191. </script>