spaceGraph.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  1. <template>
  2. <div id="graphContainer" ref="graphContainer">
  3. <div v-show="floorKey" v-loading="canvasLoading">
  4. <el-row class="buttons-box">
  5. <div class="button-group">
  6. <!-- 默认操作模式 -->
  7. <div v-if="type==1">
  8. <el-dropdown split-button type="primary" @click="editGraphy" @command="handleCommand">
  9. 创建空间
  10. <el-dropdown-menu slot="dropdown">
  11. <!-- <el-dropdown-item command="groupCreateBSpace">批量创建业务空间</el-dropdown-item> -->
  12. <el-dropdown-item command="createWall">创建墙体</el-dropdown-item>
  13. </el-dropdown-menu>
  14. </el-dropdown>
  15. <!-- 点击已经关联的业务空间 -->
  16. <!-- <el-button plain @click="refactorBSP" :disabled="zoneDisable" style="margin-left:10px;">编辑业务空间</el-button> -->
  17. <!-- <el-button plain :disabled="zoneDisable" style="margin-left:10px;">维护空间信息</el-button> -->
  18. <!-- <el-button plain @click="cancelGraphy" v-show="!zoneDisable">取 消</el-button> -->
  19. </div>
  20. <!-- 点击未关联的业务空间 -->
  21. <div v-if="type==3">
  22. <el-button plain @click="createNewZone">创 建</el-button>
  23. <el-button plain @click="cancelGraphy">取 消</el-button>
  24. </div>
  25. <!-- 重新划分业务空间 -->
  26. <div v-if="type==4">
  27. <el-button type="primary" @click="saveRefactorBSP">保 存</el-button>
  28. <el-button plain @click="cancelGraphy">取 消</el-button>
  29. </div>
  30. <!-- 批量创建所选业务空间 -->
  31. <div v-if="type==5">
  32. <el-button type="primary" @click="groupCreateZone">批量创建所选业务空间</el-button>
  33. <el-button plain @click="cancelGraphy">取 消</el-button>
  34. </div>
  35. <!-- 保存墙 -->
  36. <div v-if="type==6">
  37. <el-button type="primary" @click="saveMap">保 存</el-button>
  38. <el-button plain @click="cancelGraphy">取 消</el-button>
  39. </div>
  40. <!-- 删除业务空间 -->
  41. <div v-if="type==7">
  42. <el-button type="primary" @click="deleteRoom">删 除</el-button>
  43. <el-button plain @click="cancelGraphy">取 消</el-button>
  44. </div>
  45. </div>
  46. </el-row>
  47. <canvas id="spaceCanvas" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  48. <el-row class="canvas-actions-box">
  49. <canvas-fun :config="config" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide"
  50. ref="canvasFun" @saveJson="saveJson" @changeAbsorb="changeAbsorb" @scale="scale" @groupSelect="groupSelect" @drawWall="drawWall"
  51. @clearWall="clearWall" />
  52. </el-row>
  53. </div>
  54. <div v-show="!floorKey">
  55. <p style="text-align:center;margin-top:199px;">
  56. 暂无数据
  57. </p>
  58. </div>
  59. <!-- 创建新的业务空间 -->
  60. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  61. </div>
  62. </template>
  63. <script lang="ts">
  64. import { Vue, Component, Watch } from "vue-property-decorator";
  65. import { FloorView } from "@/utils/graph/FloorView";
  66. import { DivideFloorScene } from "@/utils/graph/DivideFloorScene";
  67. import canvasFun from "./canvasFun.vue";
  68. import {
  69. queryZone,
  70. queryIspace,
  71. createZone,
  72. updateZone,
  73. deleteZone,
  74. } from "@/api/datacenter";
  75. import createBSP from "./createBSP";
  76. import colorArr from "@/utils/graph/config/zoneColor";
  77. import { SObject } from "@persagy-web/base/lib";
  78. import { ItemColor } from "@persagy-web/big/lib";
  79. import { SSpaceItem } from "@persagy-web/big/lib/items/floor/SSpaceItem";
  80. import { SZoneItem } from "@persagy-web/big/lib/items/floor/ZoneItem";
  81. import { AppModule } from "@/store/modules/app";
  82. import { watch } from "fs";
  83. import { SWallItem } from "@persagy-web/big/lib/items/floor/SWallItem";
  84. import { CustomWall } from "@/utils/graph/CustomWall";
  85. @Component({
  86. components: { canvasFun, createBSP },
  87. })
  88. export default class spaceGraph extends Vue {
  89. canvasWidth = 800;
  90. canvasHeight = 800;
  91. view: FloorView | null = null;
  92. scene: DivideFloorScene | null = null;
  93. canvasLoading = false;
  94. type = -1;
  95. config = {
  96. isEdit: false,
  97. divide: true,
  98. groupSelect: false,
  99. drawWall: false,
  100. };
  101. // zoneDisable = true;
  102. curZoneItem = {};
  103. zoneList = [];
  104. buildFloor: string[] = [];
  105. floor = {}; // 当前楼层对象
  106. floorKey = ""; // 当前楼层底图请求完整url
  107. curZoneType = "";
  108. allzone = [];
  109. BSPRelaISPList = [];
  110. businessSpaceList = [];
  111. BIMIDToSID = {};
  112. BIMIDToSIName = {};
  113. sourceIdToISP = {};
  114. localFun = [];
  115. get mapBaseUrl() {
  116. return AppModule.mapBaseUrl;
  117. }
  118. // 挂载
  119. mounted(): void {
  120. this.canvasWidth = this.$refs.graphContainer.offsetWidth;
  121. this.canvasHeight = this.$refs.graphContainer.offsetHeight;
  122. // this.getGraph();
  123. }
  124. // 父组件调用查询楼层底图
  125. getData(floor: any, zoneType: any) {
  126. this.curZoneType = zoneType[zoneType.length - 1];
  127. this.canvasLoading = true;
  128. if (floor.infos && floor.infos.floorMap) {
  129. this.floor = floor;
  130. if (floor.infos.floorMap == this.floorKey) {
  131. this.init(2);
  132. } else {
  133. this.floorKey = floor.infos.floorMap;
  134. this.init(1);
  135. }
  136. } else {
  137. this.noMap();
  138. }
  139. }
  140. // 无底图时操作
  141. noMap() {
  142. this.floorKey = "";
  143. this.canvasLoading = false;
  144. this.$emit('initCreatBtn', true)
  145. }
  146. // 初始化
  147. init(initType: number): void {
  148. this.type = -1;
  149. if (this.scene) {
  150. this.scene.selectContainer.clear();
  151. this.scene.initSpaceColor();
  152. this.scene.initWallColor();
  153. this.scene.clearCut();
  154. this.scene.clearWalls();
  155. // this.zoneDisable = true;
  156. this.scene.isZoneSelectable = true;
  157. this.scene.isSpaceSelectable = false;
  158. this.scene.isWallSelectable = false
  159. }
  160. if (
  161. this.buildFloor.indexOf("all") > -1 ||
  162. this.buildFloor.indexOf("noKnow") > -1
  163. ) {
  164. return;
  165. }
  166. this.$emit('initCreatBtn', false)
  167. if (initType == 1) {
  168. // 底图
  169. this.getGraph();
  170. } else {
  171. // 业务空间
  172. this.getBussiness();
  173. }
  174. this.config = {
  175. isEdit: false,
  176. divide: true,
  177. groupSelect: true,
  178. drawWall: false,
  179. };
  180. if (this.$refs.canvasFun) {
  181. // @ts-ignore
  182. this.$refs.canvasFun.active = "";
  183. }
  184. // 获取当前楼层的元空间
  185. this.getFloorISpace();
  186. }
  187. // 获取底图
  188. getGraph(): void {
  189. const scene = new DivideFloorScene();
  190. this.canvasLoading = true;
  191. this.clearGraphy();
  192. this.scene = null;
  193. scene.loadUrl(this.mapBaseUrl + this.floorKey).then((res) => {
  194. if (this.view) {
  195. this.view.scene = scene;
  196. }
  197. this.scene = scene;
  198. this.getGraphSuc(res);
  199. });
  200. }
  201. // 获取底图成功
  202. getGraphSuc(res: any): void {
  203. this.canvasLoading = false;
  204. if (res == "error") {
  205. this.noMap();
  206. this.$message.warning("数据解析异常");
  207. return;
  208. }
  209. if (this.view) {
  210. this.view.fitSceneToView();
  211. this.view.minScale = this.view.scale;
  212. }
  213. if (this.$refs.canvasFun) {
  214. // @ts-ignore
  215. this.$refs.canvasFun.everyScale = this.view.scale;
  216. }
  217. if (this.scene) {
  218. this.scene.changeSelect = this.changeSelect;
  219. this.scene.isSpaceSelectable = false;
  220. }
  221. this.getBussiness();
  222. }
  223. // 清除canvas
  224. clearGraphy() {
  225. if (this.view) {
  226. this.view.scene = null;
  227. return;
  228. }
  229. this.view = new FloorView("spaceCanvas");
  230. }
  231. // 查询选中,定位
  232. handleSelect(zone: SZoneItem) {
  233. // 清空选中
  234. this.scene?.selectContainer.clear();
  235. this.curZoneItem = zone;
  236. this.scene?.selectContainer.setItem(zone);
  237. // this.zoneDisable = false;
  238. this.view?.fitSelectedToView();
  239. }
  240. // 点击创建业务空间
  241. editGraphy() {
  242. this.type = 3;
  243. this.config.isEdit = true;
  244. this.config.groupSelect = false;
  245. this.config.divide = true;
  246. this.config.drawWall = false;
  247. if (this.scene) {
  248. this.scene.isSpaceSelectable = true;
  249. this.scene.isZoneSelectable = false;
  250. this.scene.isWallSelectable = false
  251. this.scene.selectContainer.clear();
  252. }
  253. this.view?.update();
  254. }
  255. // 创建新的业务空间
  256. createNewZone() {
  257. if (this.scene) {
  258. let arr = this.scene.selectContainer.itemList;
  259. if (arr.length || this.scene.drawItem) {
  260. // 手绘的空间只有轮廓线可用
  261. let tempArr = [];
  262. this.localFun = [];
  263. arr.map((t) => {
  264. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  265. if (
  266. this.sourceIdToISP[t.data.SourceId] &&
  267. this.sourceIdToISP[t.data.SourceId].infos
  268. ) {
  269. this.localFun.push(
  270. this.sourceIdToISP[t.data.SourceId].infos
  271. );
  272. }
  273. });
  274. this.$refs.createBSP.showDialog(tempArr.toString());
  275. } else {
  276. this.$message.warning("请至少选择一个空间");
  277. }
  278. }
  279. }
  280. // 下拉菜单
  281. handleCommand(command: string) {
  282. if (command == "createWall") {
  283. // 绘制墙
  284. this.config.isEdit = true;
  285. this.config.groupSelect = false;
  286. this.config.divide = false;
  287. this.config.drawWall = true;
  288. this.type = 6;
  289. if (this.scene) {
  290. this.scene.isSpaceSelectable = false;
  291. this.scene.isZoneSelectable = false;
  292. this.scene.isWallSelectable = true
  293. }
  294. }
  295. }
  296. // 编辑业务空间
  297. refactorBSP() {
  298. this.config.isEdit = true;
  299. this.config.groupSelect = false;
  300. this.config.divide = true;
  301. this.config.drawWall = false;
  302. if (this.scene) {
  303. this.scene.isZoneSelectable = false;
  304. this.scene.isSpaceSelectable = true;
  305. this.scene.isWallSelectable = false
  306. this.scene.selectContainer.clear();
  307. }
  308. this.type = 4;
  309. this.curZoneItem.visible = false;
  310. }
  311. editeSpaceDetail() {}
  312. // 获取元空间
  313. getFloorISpace() {
  314. const pa = {
  315. floorId: this.floor.id,
  316. buildingId: this.floor.buildingId,
  317. pageSize: 2000,
  318. };
  319. queryIspace(pa).then((res) => {
  320. if (res.message == this.floor.id) {
  321. this.BIMIDToSID = {};
  322. this.BIMIDToSIName = {};
  323. this.sourceIdToISP = {};
  324. res.content.map((t) => {
  325. let key = t.bimId.split(":")[1];
  326. this.BIMIDToSID[key] = t.id;
  327. this.BIMIDToSIName[key] = t.localName || t.name;
  328. this.sourceIdToISP[key] = t;
  329. });
  330. }
  331. });
  332. }
  333. // 获取业务空间
  334. getBussiness() {
  335. const pa = {
  336. filters: `classCode='${this.curZoneType}';floorId='${this.floor.id}';buildingId='${this.floor.buildingId}'`,
  337. pageSize: 2000,
  338. };
  339. this.canvasLoading = true;
  340. queryZone(pa).then((res) => {
  341. // if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
  342. // 所有业务空间
  343. this.businessSpaceList = res.content;
  344. // 已关联元空间的业务空间
  345. this.BSPRelaISPList = [];
  346. res.content.map((t) => {
  347. if (t.outline && t.outline.length) {
  348. this.BSPRelaISPList.push(t);
  349. }
  350. });
  351. // 绘制业务空间
  352. let tempArr = this.BSPRelaISPList.map((t, i) => {
  353. return {
  354. RoomLocalName: t.localName || t.name,
  355. OutLine: t.outline,
  356. RoomID: t.id,
  357. Color: colorArr[i % colorArr.length],
  358. };
  359. }).filter((item) => item);
  360. this.scene?.removeAllZone();
  361. this.scene?.addZoneList(tempArr);
  362. this.$emit("getZoneSuc", this.scene?.zoneList);
  363. this.view?.update();
  364. this.canvasLoading = false;
  365. // }
  366. });
  367. }
  368. // 取消(所有取消公用)
  369. cancelGraphy() {
  370. this.init(2);
  371. }
  372. // 重新划分业务空间保存
  373. saveRefactorBSP() {
  374. let zoneObj = {
  375. id: this.curZoneItem.data.RoomID,
  376. classCode: this.curZoneType,
  377. outline: [],
  378. };
  379. // 没有业务空间,也没有绘制切割区域
  380. let arr = this.scene?.selectContainer.itemList;
  381. let temp = arr
  382. ?.map((t) => {
  383. return this.sourceIdToISP[t.data.SourceId]
  384. ? this.sourceIdToISP[t.data.SourceId].infos
  385. : undefined;
  386. })
  387. .filter((item) => item);
  388. if (temp?.length) {
  389. zoneObj.infos = temp[0];
  390. }
  391. if (this.scene) {
  392. zoneObj = this.setZoneOutline(zoneObj);
  393. this.handleUpdateZone(zoneObj);
  394. }
  395. }
  396. groupCreateZone() {}
  397. // 点击平面图事件
  398. changeSelect(selectContainer: SObject, data: any[]) {
  399. if (data.length) {
  400. console.log(data[0]);
  401. if (data[0].length) {
  402. if (data[0][0] instanceof SSpaceItem) {
  403. this.scene?.initSpaceColor();
  404. } else if (data[0][0] instanceof SZoneItem) {
  405. this.scene?.initZoneColor();
  406. // this.zoneDisable = false;
  407. this.type = 7;
  408. this.curZoneItem = data[0][0];
  409. }
  410. } else {
  411. this.scene?.initSpaceColor();
  412. if (this.type == 3) {
  413. console.log(3);
  414. } else if (this.type == 6) {
  415. console.log(6)
  416. } else {
  417. this.scene?.initZoneColor();
  418. this.type = -1;
  419. // this.zoneDisable = true;
  420. }
  421. }
  422. data[0].forEach((t) => {
  423. t.fillColor = ItemColor.selectColor;
  424. });
  425. } else {
  426. this.scene?.initSpaceColor();
  427. this.scene?.initZoneColor();
  428. this.type = -1;
  429. // this.zoneDisable = true;
  430. }
  431. }
  432. // 根据图创建新的业务空间-弹窗返回确认创建
  433. createRoom(val) {
  434. let zoneObj = {
  435. outline: [],
  436. localName: val,
  437. buildingId: this.floor.buildingId,
  438. floorId: this.floor.id,
  439. classCode: this.curZoneType,
  440. };
  441. if (this.localFun.length) {
  442. zoneObj.infos = this.localFun[0];
  443. }
  444. if (this.scene) {
  445. // 旧逻辑--计算区域交集--
  446. // zoneObj = this.calIntersect(zoneObj);
  447. // 设置业务空间轮廓线
  448. zoneObj = this.setZoneOutline(zoneObj);
  449. this.handleCreateZone(zoneObj);
  450. }
  451. }
  452. /**
  453. * 删除业务空间
  454. */
  455. deleteRoom() {
  456. let arr = this.scene?.selectContainer.itemList || [];
  457. if (arr.length) {
  458. let temp = arr
  459. .map((t) => {
  460. if (t instanceof SZoneItem) {
  461. return { id: t.data.RoomID };
  462. }
  463. })
  464. .filter((item) => item);
  465. if (temp.length) {
  466. this.handleDeleteZone(temp);
  467. }
  468. }
  469. }
  470. /**
  471. * 生成底图json
  472. */
  473. saveMap() {
  474. if (this.scene) {
  475. this.scene.generateFile(this.floorKey, () => {
  476. this.$message.success('修改模型成功');
  477. this.init(1)
  478. });
  479. }
  480. }
  481. /**
  482. * 画墙
  483. */
  484. drawWall() {
  485. if (this.scene) {
  486. this.scene.drawCmd = "wallDraw";
  487. }
  488. }
  489. /**
  490. * 单个计算交集
  491. */
  492. calIntersect(zoneObj: any) {
  493. // 画了切割区域
  494. if (this.scene.cutItem && this.scene.cutItem.closeFlag) {
  495. const seg = this.scene.getCurInZone();
  496. const poly = this.scene.getSpaceCutIntersect(seg);
  497. for (let key in poly) {
  498. for (let i = 0; i < poly[key].length; i++) {
  499. const arr = poly[key][i].map((t) => {
  500. return t.map((it) => {
  501. return {
  502. X: Number(it.x.toFixed(2)),
  503. Y: -Number(it.y.toFixed(2)),
  504. Z: 0,
  505. };
  506. });
  507. });
  508. zoneObj.outline.push(arr);
  509. }
  510. }
  511. } else if (this.scene.zoneList.length) {
  512. // 没画切割区域,但是有业务空间
  513. const poly = this.scene.getSpaceZoneIntersect();
  514. // 与已有业务空间的外接矩阵有交集
  515. if (poly) {
  516. for (let key in poly) {
  517. for (let i = 0; i < poly[key].length; i++) {
  518. const arr = poly[key][i].map((t) => {
  519. return t.map((it) => {
  520. return {
  521. X: Number(it.x.toFixed(2)),
  522. Y: -Number(it.y.toFixed(2)),
  523. Z: 0,
  524. };
  525. });
  526. });
  527. zoneObj.outline.push(arr);
  528. }
  529. }
  530. } else {
  531. let arr = this.scene?.selectContainer.itemList;
  532. arr?.forEach((t) => {
  533. zoneObj.outline.push(t.data.OutLine);
  534. });
  535. }
  536. } else {
  537. // 没有业务空间,也没有绘制切割区域
  538. let arr = this.scene?.selectContainer.itemList;
  539. arr?.forEach((t) => {
  540. zoneObj.outline.push(t.data.OutLine);
  541. });
  542. }
  543. return zoneObj;
  544. }
  545. /**
  546. * 新逻辑添加业务空间轮廓线
  547. */
  548. setZoneOutline(zoneObj: any) {
  549. if (this.scene) {
  550. if (this.scene.drawItem) {
  551. if (
  552. this.scene.drawItem.pointList.length &&
  553. this.scene.drawItem.pointList.length > 2
  554. ) {
  555. const temp = this.scene.drawItem.pointList.map((t) => {
  556. return {
  557. X: t.x,
  558. Y: -t.y,
  559. Z: 0,
  560. };
  561. });
  562. zoneObj.outline.push([temp]);
  563. }
  564. }
  565. let arr = this.scene.selectContainer.itemList;
  566. if (arr.length) {
  567. arr.forEach((t) => {
  568. if (t instanceof SSpaceItem)
  569. zoneObj.outline.push(t.data.OutLine);
  570. });
  571. }
  572. }
  573. return zoneObj;
  574. }
  575. /**
  576. * 创建业务空间接口
  577. */
  578. handleCreateZone(zoneObj: any) {
  579. const pa = {
  580. content: [zoneObj],
  581. };
  582. if (Array.isArray(zoneObj)) {
  583. pa.content = zoneObj;
  584. }
  585. this.canvasLoading = true;
  586. createZone(pa).then(() => {
  587. this.$message.success("创建成功");
  588. this.init(2);
  589. });
  590. }
  591. /**
  592. * 更新业务空间接口
  593. */
  594. handleUpdateZone(zoneObj: any) {
  595. const pa = {
  596. content: [zoneObj],
  597. };
  598. if (Array.isArray(zoneObj)) {
  599. pa.content = zoneObj;
  600. }
  601. this.canvasLoading = true;
  602. updateZone(pa).then(() => {
  603. this.$message.success("更新成功");
  604. this.init(2);
  605. });
  606. }
  607. /**
  608. * 删除业务空间接口
  609. */
  610. handleDeleteZone(zone: any) {
  611. let pa = [zone]
  612. if (Array.isArray(zone)) {
  613. pa = zone;
  614. }
  615. this.canvasLoading = true;
  616. deleteZone(pa).then(() => {
  617. this.$message.success("删除成功");
  618. this.init(2);
  619. });
  620. }
  621. // 适配底图到窗口
  622. fit() {
  623. this.view?.fitSceneToView();
  624. }
  625. // 保存为png
  626. savePng() {
  627. this.view?.saveImage(`1.png`, "png");
  628. }
  629. // 保存为svg
  630. saveSvg() {
  631. this.view?.saveSceneSvg(`1.svg`, 6400, 4800);
  632. }
  633. // 保存json
  634. saveJson() {
  635. try {
  636. this.view?.saveFloorJson(
  637. `${this.floor.build}-${this.floor.localName}.json`
  638. );
  639. } catch (err) {
  640. console.log(err);
  641. this.view?.saveFloorJson(`1.json`);
  642. }
  643. }
  644. // 切割划分
  645. divide() {
  646. if (this.scene) {
  647. this.scene.drawCmd = "zoneDraw";
  648. }
  649. }
  650. // 清除切割划分
  651. clearDivide() {
  652. // @ts-ignore
  653. this.view!.scene.clearCut();
  654. }
  655. // 缩放
  656. scale(val: number) {
  657. if (!this.view) {
  658. return;
  659. }
  660. let scale = this.view.scale;
  661. this.view.scaleByPoint(
  662. val / scale,
  663. this.canvasWidth / 2,
  664. this.canvasHeight / 2
  665. );
  666. }
  667. groupSelect() {
  668. console.log("groupSelect");
  669. }
  670. changeAbsorb() {
  671. console.log("changeAbsorb");
  672. }
  673. /**
  674. * 删除墙
  675. */
  676. clearWall() {
  677. if (this.scene) {
  678. if (this.scene.selectContainer.itemList.length) {
  679. const item = this.scene.selectContainer.itemList[0];
  680. if (item instanceof SWallItem || item instanceof CustomWall) {
  681. this.scene.deleteItem(item);
  682. }
  683. }
  684. }
  685. }
  686. @Watch("view.scale", { immediate: true, deep: true })
  687. onScaleChange(n: number) {
  688. if (this.$refs.canvasFun) {
  689. // @ts-ignore
  690. let s = (n * 10) / this.view.minScale;
  691. // @ts-ignore
  692. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  693. }
  694. }
  695. @Watch("scene.drawCmd", { immediate: true, deep: true })
  696. onCmdChange(n: string) {
  697. if (!n) {
  698. if (this.$refs.canvasFun) {
  699. this.$refs.canvasFun.active = "";
  700. this.$refs.canvasFun.isSwitch = false;
  701. }
  702. }
  703. }
  704. }
  705. </script>
  706. <style lang="scss">
  707. #graphContainer {
  708. position: relative;
  709. width: 100%;
  710. height: 100%;
  711. .canvas-actions-box {
  712. position: absolute;
  713. bottom: 14px;
  714. left: 50%;
  715. transform: translateX(-50%);
  716. z-index: 99;
  717. }
  718. .buttons-box {
  719. position: absolute;
  720. bottom: 68px;
  721. left: 0;
  722. padding: 0 16px;
  723. width: 100%;
  724. z-index: 999;
  725. & > div {
  726. margin: 0 auto;
  727. }
  728. .button-group {
  729. width: 300px;
  730. height: 35px;
  731. margin: 0 auto;
  732. text-align: center;
  733. }
  734. }
  735. }
  736. </style>