spaceGraph.vue 20 KB

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