spaceGraph.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  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 { FloorScene } from "@/utils/graph/FloorScene";
  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. @Component({
  84. components: { canvasFun, createBSP },
  85. })
  86. export default class spaceGraph extends Vue {
  87. canvasWidth = 800;
  88. canvasHeight = 800;
  89. view: FloorView | null = null;
  90. scene: FloorScene | null = null;
  91. mapBaseUrl = "/image-service/common/file_get?systemId=revit&key=";
  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. // 挂载
  114. mounted(): void {
  115. this.canvasWidth = this.$refs.graphContainer.offsetWidth;
  116. this.canvasHeight = this.$refs.graphContainer.offsetHeight;
  117. this.getGraph();
  118. }
  119. // 父组件调用查询楼层底图
  120. getData(floor, zoneType) {
  121. this.curZoneType = zoneType[zoneType.length - 1];
  122. this.canvasLoading = true;
  123. if (floor.infos && floor.infos.floorMap) {
  124. this.floor = floor;
  125. this.floorKey = this.mapBaseUrl + floor.infos.floorMap;
  126. this.init(1);
  127. } else {
  128. this.noMap();
  129. }
  130. }
  131. // 无底图时操作
  132. noMap() {
  133. this.floorKey = "";
  134. this.canvasLoading = false;
  135. }
  136. // 初始化
  137. init(initType: number): void {
  138. this.type = 1;
  139. if (this.scene) {
  140. this.scene.selectContainer.clear();
  141. this.scene.initSpaceColor();
  142. this.zoneDisable = true;
  143. this.scene.isZoneSelectable = true;
  144. this.scene.isSpaceSelectable = false;
  145. }
  146. if (
  147. this.buildFloor.indexOf("all") > -1 ||
  148. this.buildFloor.indexOf("noKnow") > -1
  149. ) {
  150. return;
  151. }
  152. if (initType == 1) {
  153. // 底图
  154. this.getGraph();
  155. } else {
  156. // 业务空间
  157. this.getBussiness();
  158. }
  159. this.config = {
  160. isEdit: false,
  161. divide: true,
  162. groupSelect: true,
  163. };
  164. // 获取当前楼层的元空间
  165. this.getFloorISpace();
  166. }
  167. // 获取底图
  168. getGraph(): void {
  169. const scene = new FloorScene();
  170. this.canvasLoading = true;
  171. this.clearGraphy();
  172. this.scene = null;
  173. scene.loadUrl(this.floorKey).then((res) => {
  174. if (this.view) {
  175. this.view.scene = scene;
  176. }
  177. this.scene = scene;
  178. this.getGraphSuc(res);
  179. });
  180. }
  181. // 获取底图成功
  182. getGraphSuc(res: any): void {
  183. this.canvasLoading = false;
  184. if (res == "error") {
  185. this.noMap();
  186. this.$message.warning("数据解析异常");
  187. return;
  188. }
  189. if (this.view) {
  190. this.view.fitSceneToView();
  191. this.view.minScale = this.view.scale;
  192. }
  193. if (this.$refs.canvasFun) {
  194. // @ts-ignore
  195. this.$refs.canvasFun.everyScale = this.view.scale;
  196. }
  197. if (this.scene) {
  198. this.scene.changeSelect = this.changeSelect;
  199. this.scene.isSpaceSelectable = false;
  200. }
  201. this.getBussiness();
  202. this.canvasLoading = false;
  203. }
  204. // 清除canvas
  205. clearGraphy() {
  206. if (this.view) {
  207. this.view.scene = null;
  208. return;
  209. }
  210. this.view = new FloorView("spaceCanvas");
  211. }
  212. // 搜索
  213. querySearch(queryString: string, cb: Function) {
  214. let restaurants = this.zoneList;
  215. let results = queryString
  216. ? restaurants.filter(this.createFilter(queryString))
  217. : restaurants;
  218. // 调用 callback 返回建议列表的数据
  219. cb(results);
  220. }
  221. // 过滤器
  222. createFilter(queryString: any) {
  223. return (restaurant: any) => {
  224. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  225. };
  226. }
  227. // 查询选中,定位
  228. handleSelect(zone) {
  229. // 清空选中
  230. this.scene?.selectContainer.clear();
  231. this.curZoneItem = zone;
  232. this.scene?.selectContainer.setItem(zone);
  233. this.zoneDisable = false;
  234. this.view.fitSelectedToView();
  235. }
  236. // 点击创建业务空间
  237. editGraphy() {
  238. this.type = 3;
  239. this.config.isEdit = true;
  240. this.config.groupSelect = false;
  241. this.config.divide = true;
  242. this.scene!.isSpaceSelectable = true;
  243. this.scene!.isZoneSelectable = false;
  244. this.view?.update();
  245. console.log(12312312);
  246. }
  247. // 创建新的业务空间
  248. createNewZone() {
  249. let arr = this.scene?.selectContainer.itemList;
  250. if (arr.length) {
  251. let tempArr = [];
  252. arr.map((t) => {
  253. tempArr.push(this.BIMIDToSIName[t.data.SourceId]);
  254. });
  255. this.$refs.createBSP.showDialog(tempArr.toString());
  256. } else {
  257. this.$message.warning("请至少选择一个空间");
  258. }
  259. }
  260. handleCommand() {}
  261. // 编辑业务空间
  262. refactorBSP() {
  263. this.scene!.isZoneSelectable = false;
  264. this.scene!.isSpaceSelectable = true;
  265. this.type = 4;
  266. this.curZoneItem.visible = false;
  267. }
  268. editeSpaceDetail() {}
  269. // 获取元空间
  270. getFloorISpace() {
  271. const pa = {
  272. floorId: this.floor.id,
  273. buildingId: this.floor.buildingId,
  274. pageSize: 2000,
  275. };
  276. queryIspace(pa).then((res) => {
  277. if (res.message == this.floor.id) {
  278. this.BIMIDToSID = {};
  279. this.BIMIDToSIName = {};
  280. this.sourceIdToISP = {};
  281. res.content.map((t) => {
  282. let key = t.bimId.split(":")[1];
  283. this.BIMIDToSID[key] = t.id;
  284. this.BIMIDToSIName[key] = t.localName || t.name;
  285. this.sourceIdToISP[key] = t;
  286. });
  287. }
  288. });
  289. }
  290. // 获取业务空间
  291. getBussiness() {
  292. const pa = {
  293. filters: `classCode='${this.curZoneType}';floorId='${this.floor.id}';buildingId='${this.floor.buildingId}'`,
  294. pageSize: 2000,
  295. };
  296. this.canvasLoading = true;
  297. queryZone(pa).then((res) => {
  298. // if (res.FloorId == this.buildFloor[1] && res.ZoneType == tempType) {
  299. // 所有业务空间
  300. this.businessSpaceList = res.content;
  301. // 已关联元空间的业务空间
  302. this.BSPRelaISPList = [];
  303. res.content.map((t) => {
  304. if (t.outline && t.outline.length) {
  305. this.BSPRelaISPList.push(t);
  306. }
  307. });
  308. // 绘制业务空间
  309. let tempArr = this.BSPRelaISPList.map((t, i) => {
  310. return {
  311. RoomLocalName: t.localName || t.name,
  312. OutLine: t.outline,
  313. RoomID: t.id,
  314. Color: colorArr[i % colorArr.length],
  315. };
  316. }).filter((item) => item);
  317. console.log(this.scene);
  318. this.scene.removeAllZone();
  319. this.scene.addZoneList(tempArr);
  320. this.zoneList = this.scene.zoneList;
  321. this.view.update();
  322. this.canvasLoading = false;
  323. // }
  324. });
  325. }
  326. // 取消(所有取消公用)
  327. cancelGraphy() {
  328. this.init(2);
  329. }
  330. // 重新划分业务空间保存
  331. saveRefactorBSP() {
  332. const arr = this.scene?.selectContainer.itemList;
  333. const zoneObj = {
  334. id: this.curZoneItem.data.RoomID,
  335. classCode: this.curZoneType,
  336. outline: [],
  337. };
  338. if (arr.length) {
  339. arr?.forEach((t) => {
  340. if (t instanceof SSpaceItem) {
  341. zoneObj.outline.push(t.data.OutLine);
  342. }
  343. });
  344. }
  345. const pa = {
  346. content: [zoneObj],
  347. };
  348. this.canvasLoading = true;
  349. updateZone(pa).then((res) => {
  350. this.$message.success("更新成功");
  351. this.init(2);
  352. });
  353. }
  354. groupCreateZone() {}
  355. // 点击平面图事件
  356. changeSelect(selectContainer: SObject, data: any[]) {
  357. if (data.length) {
  358. console.log(data[0]);
  359. if (data[0].length) {
  360. if (data[0][0] instanceof SSpaceItem) {
  361. this.scene?.initSpaceColor();
  362. } else if (data[0][0] instanceof SZoneItem) {
  363. this.scene?.initZoneColor();
  364. this.zoneDisable = false;
  365. this.curZoneItem = data[0][0];
  366. }
  367. } else {
  368. this.scene?.initSpaceColor();
  369. this.scene?.initZoneColor();
  370. this.zoneDisable = true;
  371. }
  372. data[0].forEach((t) => {
  373. t.fillColor = ItemColor.selectColor;
  374. });
  375. } else {
  376. this.scene?.initSpaceColor();
  377. this.scene?.initZoneColor();
  378. this.zoneDisable = true;
  379. }
  380. }
  381. // 根据图创建新的业务空间-弹窗返回确认创建
  382. createRoom(val) {
  383. const zoneObj = {
  384. outline: [],
  385. localName: val,
  386. buildingId: this.floor.buildingId,
  387. floorId: this.floor.id,
  388. classCode: this.curZoneType,
  389. };
  390. let arr = this.scene?.selectContainer.itemList;
  391. arr?.forEach((t) => {
  392. zoneObj.outline.push(t.data.OutLine);
  393. });
  394. const pa = {
  395. content: [zoneObj],
  396. };
  397. this.canvasLoading = true;
  398. createZone(pa).then((res) => {
  399. this.$message.success("创建成功");
  400. this.init(2);
  401. });
  402. }
  403. // 适配底图到窗口
  404. fit() {
  405. this.view?.fitSceneToView();
  406. }
  407. // 保存为png
  408. savePng() {
  409. this.view?.saveImage(`1.png`, "png");
  410. }
  411. // 保存为svg
  412. saveSvg() {
  413. this.view?.saveSceneSvg(`1.svg`, 6400, 4800);
  414. }
  415. // 保存json
  416. saveJson() {
  417. this.view?.saveFloorJson(`1.json`);
  418. }
  419. // 切割划分
  420. divide() {
  421. this.scene.isCutting = true;
  422. }
  423. // 清除切割划分
  424. clearDivide() {
  425. // @ts-ignore
  426. this.view!.scene.clearCut();
  427. }
  428. // 缩放
  429. scale(val: number) {
  430. if (!this.view) {
  431. return;
  432. }
  433. let scale = this.view.scale;
  434. this.view.scaleByPoint(
  435. val / scale,
  436. this.canvasWidth / 2,
  437. this.canvasHeight / 2
  438. );
  439. }
  440. groupSelect() {
  441. console.log("groupSelect");
  442. }
  443. changeAbsorb() {
  444. console.log("changeAbsorb");
  445. }
  446. @Watch("view.scale", { immediate: true, deep: true })
  447. onScaleChange(n: number) {
  448. if (this.$refs.canvasFun) {
  449. // @ts-ignore
  450. let s = (n * 10) / this.view.minScale;
  451. // @ts-ignore
  452. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  453. }
  454. }
  455. }
  456. </script>
  457. <style lang="scss">
  458. #graphContainer {
  459. position: relative;
  460. width: 100%;
  461. height: 100%;
  462. .canvas-actions-box {
  463. position: absolute;
  464. bottom: 14px;
  465. left: 50%;
  466. transform: translateX(-50%);
  467. z-index: 99;
  468. }
  469. .buttons-box {
  470. position: absolute;
  471. top: 16px;
  472. left: 0;
  473. padding: 0 16px;
  474. width: 100%;
  475. z-index: 999;
  476. & > div {
  477. float: left;
  478. }
  479. .el-autocomplete {
  480. display: inline-block;
  481. width: 320px;
  482. margin-right: 10px;
  483. }
  484. .button-group button,
  485. .button-group .el-dropdown {
  486. display: block;
  487. float: left;
  488. }
  489. .my-autocomplete {
  490. li {
  491. line-height: normal;
  492. padding: 7px;
  493. .name {
  494. text-overflow: ellipsis;
  495. overflow: hidden;
  496. }
  497. .addr {
  498. font-size: 12px;
  499. color: #b4b4b4;
  500. }
  501. .highlighted .addr {
  502. color: #ddd;
  503. }
  504. }
  505. }
  506. }
  507. }
  508. </style>