graphy.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  1. <template>
  2. <div id="graphy" ref="graphy">
  3. <div v-show="!FloorMap">
  4. <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
  5. <i class="icon-wushuju iconfont"></i>
  6. 暂无数据
  7. </div>
  8. </div>
  9. <div class="canvas-box" v-show="FloorMap" v-loading="canvasLoading">
  10. <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  11. <!-- 初始两个按钮 -->
  12. <el-row class="buttons-box">
  13. <div>
  14. <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
  15. width="180px" @select="handleSelect">
  16. <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSelect"></i>
  17. <template slot-scope="{ item }">
  18. <div class="name" style="position: relative;">
  19. {{ item.RoomLocalName | cutString(8) }}
  20. <span class="addr" style="position: absolute;right:10px;color:#409EFF;">定位</span>
  21. </div>
  22. </template>
  23. </el-autocomplete>
  24. </div>
  25. <div class="button-group">
  26. <!-- 默认操作模式 -->
  27. <div v-show="type==1">
  28. <el-button @click="editGraphy">编辑平面图</el-button>
  29. </div>
  30. <!-- 点击已经关联的业务空间 -->
  31. <div v-show="type==2">
  32. <el-button type="primary" plain @click="refactorBSP">重新划分业务空间</el-button>
  33. <el-button type="primary" @click="editeSpaceDetail">编辑空间详情</el-button>
  34. <el-button plain @click="cancelGraphy">取 消</el-button>
  35. </div>
  36. <!-- 点击未关联的业务空间 -->
  37. <div v-show="type==3">
  38. <el-button plain @click="createNewZone">创建新的业务空间</el-button>
  39. <el-button type="primary" @click="lookUnrelatBSpace(true)">从未关联平面图的业务空间中选择</el-button>
  40. <el-button plain @click="cancelGraphy">取 消</el-button>
  41. </div>
  42. <!-- 重新划分业务空间 -->
  43. <div v-show="type==4">
  44. <el-button plain @click="cancelGraphy">取 消</el-button>
  45. <el-button type="primary" @click="saveRefactorBSP">保存</el-button>
  46. </div>
  47. </div>
  48. <div style="position: absolute;right: 0;">
  49. <el-button type="text" @click="lookUnrelatBSpace(false)">未关联平面图的业务空间 {{num}} 条</el-button>
  50. </div>
  51. </el-row>
  52. <!-- 底部操作按钮 -->
  53. <el-row class="canvas-actions-box">
  54. <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
  55. @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
  56. </el-row>
  57. </div>
  58. <!-- -->
  59. <!-- 未关联元空间的业务空间 -->
  60. <unRelateBSP ref="unRelateBSP" :tableData="BSPUnrelaISPList" :isAction="isAction" @createFromUnrelated="createFromUnrelated"></unRelateBSP>
  61. <!-- 创建新的业务空间 -->
  62. <createBSP ref="createBSP" @createRoom="createRoom"></createBSP>
  63. </div>
  64. </template>
  65. <script>
  66. import canvasFun from "./canvasFun"
  67. import { mapGetters, mapActions } from "vuex";
  68. import { SGraphyView } from "@sybotan-web/graphy/lib";
  69. import { DivideFloorScene, } from "cad-engine"
  70. import { SColor, SPoint } from "@sybotan-web/draw/lib";
  71. import { SpaceItem } from "cad-engine/lib/items/SpaceItem";
  72. import { ZoneItem } from "cad-engine/lib/items/ZoneItem";
  73. import unRelateBSP from "./unRelateBSP";
  74. import createBSP from "./createBSP";
  75. import {
  76. countZone,
  77. queryZone,
  78. updateZone,
  79. createZone,
  80. createRelateInZoneAndISp
  81. } from "@/api/scan/request"
  82. const colorArr = [
  83. "#F9C3C3",
  84. "#FFD1BF",
  85. "#FFF3BF",
  86. "#D8F7C6",
  87. "#C6F2F6",
  88. "#DCE3C0",
  89. "#FAE6C9",
  90. "#E3D7F7",
  91. "#C4CBF8",
  92. "#DEC3F6"
  93. ];
  94. // BSP => 业务空间
  95. export default {
  96. components: {
  97. canvasFun,
  98. unRelateBSP,
  99. createBSP
  100. },
  101. data() {
  102. return {
  103. canvasWidth: 800,
  104. canvasHeight: 600,
  105. type: 1, // 默认操作模式
  106. search: '',//搜索
  107. num: 0, // 未关联空间的业务空间条数
  108. buildFloor: [],
  109. FloorMap: '',
  110. tab: {},
  111. isEdit: false,
  112. canvasLoading: false,
  113. view: null,
  114. scene: null,
  115. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  116. businessSpaceList: [], // 所有业务空间
  117. BSPUnrelaISPList: [], // 未关联元空间的业务空间
  118. BSPRelaISPList: [], // 已关联元空间的业务空间
  119. // 未关联元空间的业务空间弹窗
  120. isAction: false,
  121. curOutline: [],
  122. BIMIDToSID: {}, //bimid映射元空间id
  123. curZoneItem: {}, //当前选中的业务空间item
  124. }
  125. },
  126. computed: {
  127. ...mapGetters('layout', ['projectId'])
  128. },
  129. created() {
  130. },
  131. mounted() {
  132. this.canvasWidth = this.$refs.graphy.offsetWidth;
  133. this.canvasHeight = this.$refs.graphy.offsetHeight;
  134. },
  135. methods: {
  136. // 初始化
  137. init() {
  138. this.type = 1;
  139. // 获取当前分区下的业务空间
  140. this.getBusinessSpace();
  141. // 获取未关联平面图的业务空间统计
  142. this.getUnrelateCount();
  143. // 获取当前楼层的元空间
  144. this.getFloorISpace();
  145. },
  146. // 获取当前楼层的元空间
  147. getFloorISpace() {
  148. let pa = {
  149. zone: 'Ispace',
  150. data: {
  151. Filters: `FloorId='${this.buildFloor[1]}'`,
  152. PageSize: 1000
  153. }
  154. }
  155. queryZone(pa, res => {
  156. this.BIMIDToSID = {}
  157. res.Content.map(t => {
  158. this.BIMIDToSID[t.BIMID.split(":")[1]] = t.RoomID;
  159. })
  160. })
  161. },
  162. // 搜索
  163. querySearch(queryString, cb) {
  164. var restaurants = this.BSPRelaISPList;
  165. var results = queryString ?
  166. restaurants.filter(this.createFilter(queryString)) :
  167. restaurants;
  168. // 调用 callback 返回建议列表的数据
  169. cb(results);
  170. },
  171. // 过滤器
  172. createFilter(queryString) {
  173. return restaurant => {
  174. return restaurant.RoomLocalName.indexOf(queryString) > -1;
  175. };
  176. },
  177. // 查询选中
  178. handleSelect(BSP) {
  179. console.log(arguments)
  180. },
  181. // 父组件调用
  182. getData(buildFloor, FloorMap, tab) {
  183. this.buildFloor = buildFloor;
  184. this.FloorMap = FloorMap;
  185. this.tab = tab;
  186. console.log(arguments)
  187. this.init();
  188. },
  189. // 获取未关联平面图的业务空间统计
  190. getUnrelateCount() {
  191. let pa = {
  192. data: {
  193. Filters: `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}';Outline isNull`
  194. },
  195. zone: this.tab.code
  196. }
  197. countZone(pa, res => {
  198. this.num = res.Count
  199. })
  200. },
  201. // 获取未绑定业务空间的元空间
  202. getISPSPUnrelaBSP() {
  203. },
  204. // 获取底图
  205. getGraphy() {
  206. let that = this;
  207. that.clearGraphy()
  208. that.view = new SGraphyView('floorCanvas')
  209. that.scene = new DivideFloorScene();
  210. that.canvasLoading = true;
  211. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(() => {
  212. that.canvasLoading = false;
  213. that.view.scene = that.scene;
  214. let tempArr = this.BSPRelaISPList.map((t, i) => {
  215. return {
  216. RoomLocalName: t.RoomLocalName,
  217. OutLine: t.Outline,
  218. RoomID: t.RoomID,
  219. Color: new SColor(colorArr[i % colorArr.length]),
  220. }
  221. })
  222. that.scene.addZoneList(tempArr);
  223. that.scene.click(that, that.canvasClick)
  224. that.view.fitSceneToView();
  225. })
  226. },
  227. // 获取当前分区下的业务空间
  228. getBusinessSpace() {
  229. this.isLoading = true
  230. let pa = {
  231. zone: this.tab.code,
  232. data: {
  233. Filters: ``,
  234. Orders: "createTime desc, RoomID asc",
  235. PageSize: 500
  236. }
  237. }
  238. if (this.buildFloor.length && this.buildFloor.length > 1) {
  239. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  240. }
  241. queryZone(pa, res => {
  242. // 所有业务空间
  243. this.businessSpaceList = res.Content;
  244. // 未关联元空间的业务空间
  245. this.BSPUnrelaISPList = [];
  246. // 已关联元空间的业务空间
  247. this.BSPRelaISPList = [];
  248. res.Content.map(t => {
  249. if (t.Outline && t.Outline.length) {
  250. this.BSPRelaISPList.push(t)
  251. } else {
  252. this.BSPUnrelaISPList.push(t)
  253. }
  254. })
  255. // 获取底图
  256. this.getGraphy();
  257. this.isLoading = false;
  258. })
  259. },
  260. // canvas点击事件
  261. canvasClick(item, event) {
  262. console.log(arguments)
  263. this.scene.setSpaceSelectable(true);
  264. this.scene.setZoneSelectable(true);
  265. if (this.type == 4) {
  266. } else {
  267. if (item instanceof SpaceItem) {
  268. this.type = 3;
  269. this.curZoneItem = {};
  270. this.scene.setZoneSelectable(false);
  271. }
  272. if (item instanceof ZoneItem) {
  273. this.type = 2;
  274. this.curZoneItem = item;
  275. this.scene.setSpaceSelectable(false);
  276. }
  277. }
  278. },
  279. // 编辑平面图
  280. editGraphy() {
  281. this.type = 3;
  282. },
  283. // 查看未关联的业务空间--flag--查看-or-选择
  284. lookUnrelatBSpace(flag) {
  285. this.isAction = flag;
  286. let arr = this.scene.getSelectedSpaces();
  287. if (flag && !arr.length) {
  288. this.$message.warning('请至少选择一个空间');
  289. return;
  290. }
  291. this.$refs.unRelateBSP.showDialog();
  292. },
  293. // 取消(所有取消公用)
  294. cancelGraphy() {
  295. this.type = 1;
  296. this.init();
  297. },
  298. // 批量创建业务空间
  299. groupCreateBSpace() {
  300. let text = []
  301. let Spaces = this.scene.spaceList.map(t => {
  302. text.push(t.data.Name)
  303. return {
  304. RoomLocalName: t.data.Name,
  305. Outline: [t.data.OutLine]
  306. }
  307. });
  308. console.log(Spaces)
  309. console.log(this.scene.spaceList)
  310. // return
  311. this.$confirm(
  312. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  313. "<p>涉及的空间:</p>" +
  314. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  315. text.toString() +
  316. "</p>",
  317. "提示", {
  318. dangerouslyUseHTMLString: true,
  319. confirmButtonText: "确定",
  320. cancelButtonText: "取消",
  321. type: "warning"
  322. }
  323. ).then(() => {
  324. console.log()
  325. let pa = {
  326. zone: this.zoneCode,
  327. data: {
  328. Content: Spaces
  329. }
  330. }
  331. createZone(pa, res => {
  332. })
  333. }).catch(() => {
  334. this.$message({
  335. type: "info",
  336. message: "已取消批量创建"
  337. });
  338. });
  339. },
  340. // 创建新的业务空间
  341. createNewZone() {
  342. let arr = this.scene.getSelectedSpaces();
  343. if (arr.length) {
  344. let tempArr = [];
  345. arr.map(t => {
  346. tempArr.push(t.data.Name);
  347. })
  348. this.$refs.createBSP.showDialog(tempArr.toString());
  349. } else {
  350. this.$message.warning('请至少选择一个空间');
  351. }
  352. },
  353. // 创建新的业务空间-弹窗返回确认创建
  354. createRoom(val) {
  355. let arr = this.scene.getSelectedSpaces();
  356. let zoneObj = { Outline: [] }, IspaceIdList = [];
  357. arr.map(t => {
  358. zoneObj.Outline.push(t.data.OutLine);
  359. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId])
  360. })
  361. zoneObj.RoomLocalName = val;
  362. zoneObj.BuildingId = this.buildFloor[0];
  363. zoneObj.FloorId = this.buildFloor[1];
  364. let pa = {
  365. zone: this.tab.code,
  366. data: {
  367. Content: [zoneObj]
  368. }
  369. }
  370. createZone(pa, res => {
  371. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  372. })
  373. },
  374. // 从未关联平面图的业务空间中选择--按钮返回关联信号
  375. createFromUnrelated(BSP) {
  376. BSP.Outline = []
  377. let arr = this.scene.getSelectedSpaces();
  378. arr.map(t => {
  379. BSP.Outline.push(t.data.OutLine);
  380. })
  381. let pa = {
  382. zone: BSP.ObjectType,
  383. data: {
  384. Content: [BSP],
  385. Projection: ['Outline']
  386. }
  387. }
  388. updateZone(pa, res => {
  389. this.$message.success('更新成功');
  390. this.init();
  391. })
  392. },
  393. // 编辑空间详情
  394. editeSpaceDetail() {
  395. let item = this.curZoneItem.data;
  396. this.$router.push({
  397. path: "/ledger/spaceDetail",
  398. query: { RoomID: item.RoomID, zone: this.tab.code, isMyTab: 1 }
  399. })
  400. },
  401. // 重新划分业务空间
  402. refactorBSP() {
  403. this.type = 4;
  404. // 设置空间可选
  405. this.scene.setSpaceSelectable(true);
  406. // 将已关联的设置不可选,并将当前选的隐藏
  407. this.scene.changeSelectZone(this.curZoneItem);
  408. },
  409. // 重新划分--保存
  410. saveRefactorBSP() {
  411. let arr = this.scene.getSelectedSpaces();
  412. //更新业务空间
  413. let zoneObj = { Outline: [] }, IspaceIdList = [];
  414. arr.map(t => {
  415. zoneObj.Outline.push(t.data.OutLine);
  416. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId])
  417. })
  418. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  419. if (!zoneObj.Outline.length) {
  420. zoneObj.Outline = null;
  421. }
  422. let pa = {
  423. zone: this.tab.code,
  424. data: {
  425. Content: [zoneObj],
  426. Projection: ['Outline']
  427. },
  428. }
  429. updateZone(pa, res => {
  430. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  431. })
  432. },
  433. // 更新业务空间和元空间的关系
  434. relationInBSPandISP(SpaceId, IspaceIdList) {
  435. let pa = { SpaceId: SpaceId, IspaceIdList: IspaceIdList }
  436. createRelateInZoneAndISp(pa, res => {
  437. this.$message.success('创建成功');
  438. this.init();
  439. })
  440. },
  441. // canvas 获取焦点
  442. focus() {
  443. document.getElementById(`floorCanvas`).focus()
  444. },
  445. // 清除canvas
  446. clearGraphy() {
  447. if (this.view) {
  448. this.view = null;
  449. this.scene.root.children = null;
  450. this.scene = null;
  451. }
  452. },
  453. // 工具栏操作
  454. // 移动底图
  455. moveCanvas(move) {
  456. // todo
  457. let canvas = document.getElementById(`floorCanvas`);
  458. if (move) {
  459. canvas.style.cursor = 'move';
  460. } else {
  461. canvas.style.cursor = 'default';
  462. }
  463. },
  464. // 适配底图到窗口
  465. fit() {
  466. this.view.fitSceneToView()
  467. },
  468. // 保存为png
  469. savePng() {
  470. this.view.saveImage(`${this.floor}.png`, 'png');
  471. },
  472. // 保存为svg
  473. saveSvg() {
  474. this.view.saveSceneSvg(`${this.floor}.png`, 6400, 4800);
  475. },
  476. // 切割划分
  477. divide() {
  478. this.drawMainScene.isMarking = true;
  479. },
  480. // 清除切割划分
  481. clearDivide() {
  482. this.drawMainScene.clearSceneMark()
  483. },
  484. // 撤销
  485. undo() {
  486. },
  487. // 反撤销
  488. redo() { },
  489. // 缩放
  490. scale(val) {
  491. // let scale = this.view.scale
  492. // this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  493. },
  494. },
  495. filters: {
  496. cutString: function (str, len) {
  497. //length属性读出来的汉字长度为1
  498. if (!!str && typeof str == "string" && str.length > len) {
  499. return str.substring(0, len) + "...";
  500. } else {
  501. return str || "--";
  502. }
  503. }
  504. },
  505. watch: {
  506. projectId() {
  507. this.FloorMap = '';
  508. this.tab = {};
  509. }
  510. }
  511. }
  512. </script>
  513. <style lang="less" scoped>
  514. #graphy {
  515. position: relative;
  516. width: 100%;
  517. height: calc(100% - 56px);
  518. .canvas-box {
  519. width: 100%;
  520. height: 100%;
  521. }
  522. .buttons-box {
  523. position: absolute;
  524. top: 0;
  525. width: 100%;
  526. z-index: 999;
  527. & > div {
  528. float: left;
  529. }
  530. /deep/ .el-autocomplete {
  531. display: block;
  532. width: 320px;
  533. margin-right: 10px;
  534. }
  535. .button-group button {
  536. display: block;
  537. float: left;
  538. }
  539. .my-autocomplete {
  540. li {
  541. line-height: normal;
  542. padding: 7px;
  543. .name {
  544. text-overflow: ellipsis;
  545. overflow: hidden;
  546. }
  547. .addr {
  548. font-size: 12px;
  549. color: #b4b4b4;
  550. }
  551. .highlighted .addr {
  552. color: #ddd;
  553. }
  554. }
  555. }
  556. }
  557. .canvas-actions-box {
  558. position: absolute;
  559. bottom: 20px;
  560. left: 50%;
  561. transform: translateX(-50%);
  562. z-index: 999;
  563. }
  564. }
  565. </style>