spaceGraph.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  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. zoneObj.outline.push(t.data.OutLine);
  341. });
  342. }
  343. const pa = {
  344. content: [zoneObj]
  345. }
  346. this.canvasLoading = true;
  347. updateZone(pa).then((res) => {
  348. this.$message.success("更新成功");
  349. this.init(2);
  350. });
  351. }
  352. groupCreateZone() {}
  353. //
  354. changeSelect(selectContainer: SObject, data: any[]) {
  355. if (data.length) {
  356. if (data[0].length) {
  357. if (data[0][0] instanceof SSpaceItem) {
  358. this.scene?.initSpaceColor();
  359. } else if (data[0][0] instanceof SZoneItem) {
  360. this.scene?.initZoneColor();
  361. this.zoneDisable = false;
  362. this.curZoneItem = data[0][0];
  363. }
  364. }
  365. data[0].forEach((t) => {
  366. t.fillColor = ItemColor.selectColor;
  367. });
  368. } else {
  369. this.scene?.initSpaceColor();
  370. this.scene?.initZoneColor();
  371. this.zoneDisable = true;
  372. }
  373. }
  374. // 根据图创建新的业务空间-弹窗返回确认创建
  375. createRoom(val) {
  376. const zoneObj = {
  377. outline: [],
  378. localName: val,
  379. buildingId: this.floor.buildingId,
  380. floorId: this.floor.id,
  381. classCode: this.curZoneType,
  382. };
  383. let arr = this.scene?.selectContainer.itemList;
  384. arr?.forEach((t) => {
  385. zoneObj.outline.push(t.data.OutLine);
  386. });
  387. const pa = {
  388. content: [zoneObj],
  389. };
  390. this.canvasLoading = true;
  391. createZone(pa).then((res) => {
  392. this.$message.success("创建成功");
  393. this.init(2);
  394. });
  395. }
  396. // 适配底图到窗口
  397. fit() {
  398. this.view?.fitSceneToView();
  399. }
  400. // 保存为png
  401. savePng() {
  402. this.view?.saveImage(`1.png`, "png");
  403. }
  404. // 保存为svg
  405. saveSvg() {
  406. this.view?.saveSceneSvg(`1.svg`, 6400, 4800);
  407. }
  408. // 保存json
  409. saveJson() {
  410. this.view?.saveFloorJson(`1.json`);
  411. }
  412. // 切割划分
  413. divide() {
  414. this.scene.isCutting = true;
  415. }
  416. // 清除切割划分
  417. clearDivide() {
  418. // @ts-ignore
  419. this.view!.scene.clearCut();
  420. }
  421. // 缩放
  422. scale(val: number) {
  423. if (!this.view) {
  424. return;
  425. }
  426. let scale = this.view.scale;
  427. this.view.scaleByPoint(
  428. val / scale,
  429. this.canvasWidth / 2,
  430. this.canvasHeight / 2
  431. );
  432. }
  433. groupSelect() {
  434. console.log("groupSelect");
  435. }
  436. changeAbsorb() {
  437. console.log("changeAbsorb");
  438. }
  439. @Watch("view.scale", { immediate: true, deep: true })
  440. onScaleChange(n: number) {
  441. if (this.$refs.canvasFun) {
  442. // @ts-ignore
  443. let s = (n * 10) / this.view.minScale;
  444. // @ts-ignore
  445. this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
  446. }
  447. }
  448. }
  449. </script>
  450. <style lang="scss">
  451. #graphContainer {
  452. position: relative;
  453. width: 100%;
  454. height: 100%;
  455. .canvas-actions-box {
  456. position: absolute;
  457. bottom: 14px;
  458. left: 50%;
  459. transform: translateX(-50%);
  460. z-index: 99;
  461. }
  462. .buttons-box {
  463. position: absolute;
  464. top: 16px;
  465. left: 0;
  466. padding: 0 16px;
  467. width: 100%;
  468. z-index: 999;
  469. & > div {
  470. float: left;
  471. }
  472. .el-autocomplete {
  473. display: inline-block;
  474. width: 320px;
  475. margin-right: 10px;
  476. }
  477. .button-group button,
  478. .button-group .el-dropdown {
  479. display: block;
  480. float: left;
  481. }
  482. .my-autocomplete {
  483. li {
  484. line-height: normal;
  485. padding: 7px;
  486. .name {
  487. text-overflow: ellipsis;
  488. overflow: hidden;
  489. }
  490. .addr {
  491. font-size: 12px;
  492. color: #b4b4b4;
  493. }
  494. .highlighted .addr {
  495. color: #ddd;
  496. }
  497. }
  498. }
  499. }
  500. }
  501. </style>