addPicture.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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. export default {
  21. data() {
  22. return {
  23. canvasWidth: 0, // 画布的宽
  24. canvasHeight: 0, // 画布的高
  25. view: null, // 视图 view
  26. scene: null, // 场景类
  27. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  28. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  29. loading: false,
  30. isShowColumn: false, //是否展示柱子
  31. isShowWall: false, //是否显示墙
  32. isShowVirtualWall: false, //是否显示虚拟墙
  33. isShowDoor: false, // 是否显示门
  34. isShowWindow: false, //是否显示窗户
  35. isSpaceSelectable: true, //是否显示空间
  36. };
  37. },
  38. methods: {
  39. // 初始化
  40. init() {
  41. this.clearImg();
  42. this.view ? (this.view.scene = this.scene) : null;
  43. // 获取压缩包数据并解压
  44. this.getMapBlob();
  45. },
  46. // 请求获取地图的压缩包
  47. getMapBlob() {
  48. const url = this.mapUrl + this.dataKey;
  49. this.loading = true;
  50. getJsonz(url)
  51. .then((data) => {
  52. // 解析数据并放入压缩包中
  53. this.parserData(data);
  54. this.loading = false;
  55. })
  56. .catch(() => {
  57. this.loading = false;
  58. });
  59. },
  60. // 解析数据并注入 scene 类中
  61. parserData(data) {
  62. let parser = new SFloorParser();
  63. parser.parseData(data);
  64. parser.spaceList.forEach((t) => {
  65. /////////////////////////////////////////
  66. // 样式调整
  67. // 是否显示实例
  68. t.visible = this.isSpaceSelectable;
  69. //是否展示名称
  70. t.showBaseName = false;
  71. // 显示边框色
  72. t.strokeColor = new SColor("#F0F3F7");
  73. // 填充色
  74. t.fillColor = new SColor("#F0F3F7");
  75. // 边框线宽
  76. t.lineWidth = 1;
  77. // 添加图例
  78. this.scene.addItem(t);
  79. });
  80. parser.wallList.forEach((t) => {
  81. // 是否显示
  82. t.visible = this.isShowWall;
  83. this.scene.addItem(t);
  84. });
  85. parser.virtualWallList.forEach((t) => {
  86. // 是否显示
  87. t.visible = this.isShowVirtualWall;
  88. this.scene.addItem(t);
  89. });
  90. parser.doorList.forEach((t) => {
  91. // 是否显示
  92. t.visible = this.isShowDoor;
  93. this.scene.addItem(t);
  94. });
  95. parser.columnList.forEach((t) => {
  96. // 是否显示
  97. t.visible = this.isShowColumn;
  98. this.scene.addItem(t);
  99. });
  100. parser.casementList.forEach((t) => {
  101. // 是否显示
  102. t.visible = this.isShowWindow;
  103. this.scene.addItem(t);
  104. });
  105. // 画板是否可拖动
  106. this.view.DragMove = true;
  107. this.view.fitSceneToView();
  108. },
  109. // 解析业务空间
  110. mapSpace(val) {
  111. alert(12)
  112. if(this.scene) return ;
  113. const parse = new SZoneParser();
  114. parse.parseData(val);
  115. parse.zoneList.forEach((item) => {
  116. // 添加点击事件
  117. item.connect("click", this, this.clickSpaceItem);
  118. // 添加到场景
  119. this.scene.addItem(item);
  120. });
  121. },
  122. // 清空画布
  123. clearImg() {
  124. this.scene = new SGraphScene();
  125. if (this.view) {
  126. this.view.update();
  127. }
  128. },
  129. },
  130. watch: {
  131. // 监听key
  132. dataKey: {
  133. handler(val) {
  134. if (val) {
  135. this.init();
  136. }
  137. },
  138. immediate: true,
  139. },
  140. },
  141. created() {
  142. this.clearImg();
  143. },
  144. mounted() {
  145. // 获取 canvas 的宽高
  146. this.canvasWidth = 800;
  147. this.canvasHeight = 600;
  148. // 初始化场景类
  149. this.view = new SGraphView("floorMap1");
  150. if (this.scene) {
  151. this.view.scene = this.scene;
  152. // 模拟街廓获取二次绘制的轮廓
  153. this.mapSpace(spaceList)
  154. }
  155. },
  156. };
  157. </script>