graphy.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  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.data.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 "@saga-web/graphy/lib";
  69. import { SColor, SPoint } from "@saga-web/draw/lib";
  70. import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
  71. import unRelateBSP from "./unRelateBSP";
  72. import createBSP from "./createBSP";
  73. import {
  74. countZone,
  75. queryZone,
  76. updateZone,
  77. createZone,
  78. getIspNotInSpace,
  79. createRelateInZoneAndISp,
  80. groupCreRelaZoneAndISp
  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. FloorObj: {}, //楼层对象
  110. FloorMap: '', //楼层底图
  111. tab: {},
  112. isEdit: false,
  113. canvasLoading: false,
  114. view: null,
  115. scene: null,
  116. Outline: [], // 当前选中的多个空间组成的轮廓线->三维数组
  117. businessSpaceList: [], // 所有业务空间
  118. BSPUnrelaISPList: [], // 未关联元空间的业务空间
  119. BSPRelaISPList: [], // 已关联元空间的业务空间
  120. // 未关联元空间的业务空间弹窗
  121. isAction: false,
  122. curOutline: [],
  123. BIMIDToSID: {}, //bimid映射元空间id
  124. curZoneItem: {}, //当前选中的业务空间item
  125. allUnRelatISP: [], //
  126. }
  127. },
  128. computed: {
  129. ...mapGetters('layout', ['projectId'])
  130. },
  131. created() {
  132. },
  133. mounted() {
  134. this.canvasWidth = this.$refs.graphy.offsetWidth;
  135. this.canvasHeight = this.$refs.graphy.offsetHeight;
  136. },
  137. methods: {
  138. // 初始化
  139. init() {
  140. this.type = 1;
  141. // 获取当前分区下的业务空间
  142. this.getBusinessSpace();
  143. // 获取未关联平面图的业务空间统计
  144. this.getUnrelateCount();
  145. // 获取当前楼层的元空间
  146. this.getFloorISpace();
  147. // 查询未关联业务空间的元空间
  148. this.getISPSPUnrelaBSP()
  149. },
  150. // 获取当前楼层的元空间
  151. getFloorISpace() {
  152. let pa = {
  153. zone: 'Ispace',
  154. data: {
  155. Filters: `FloorId='${this.buildFloor[1]}'`,
  156. PageSize: 1000
  157. }
  158. }
  159. queryZone(pa, res => {
  160. this.BIMIDToSID = {}
  161. res.Content.map(t => {
  162. this.BIMIDToSID[t.BIMID.split(":")[1]] = t.RoomID;
  163. })
  164. })
  165. },
  166. // 搜索
  167. querySearch(queryString, cb) {
  168. var restaurants = this.zoneList;
  169. var results = queryString ?
  170. restaurants.filter(this.createFilter(queryString)) :
  171. restaurants;
  172. // 调用 callback 返回建议列表的数据
  173. cb(results);
  174. },
  175. // 过滤器
  176. createFilter(queryString) {
  177. return restaurant => {
  178. return restaurant.data.RoomLocalName.indexOf(queryString) > -1;
  179. };
  180. },
  181. // 查询选中,定位
  182. handleSelect(zone) {
  183. // 清空选中
  184. this.scene.clearSpaceSelection();
  185. this.scene.clearZoneSelection();
  186. // 选中当前
  187. zone.selected = true;
  188. this.type = 2;
  189. this.view.fitSelectedToView();
  190. },
  191. // 父组件调用
  192. getData(buildFloor, FloorObj, tab) {
  193. this.buildFloor = buildFloor;
  194. this.FloorObj = FloorObj;
  195. this.FloorMap = FloorObj.StructureInfo ? FloorObj.StructureInfo.FloorMap : ''
  196. this.tab = tab;
  197. console.log(arguments)
  198. this.init();
  199. },
  200. // 获取未关联平面图的业务空间统计
  201. getUnrelateCount() {
  202. let pa = {
  203. data: {
  204. Filters: `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}';Outline isNull`
  205. },
  206. zone: this.tab.code
  207. }
  208. countZone(pa, res => {
  209. this.num = res.Count
  210. })
  211. },
  212. // 获取未绑定业务空间的元空间
  213. getISPSPUnrelaBSP() {
  214. let pa = {
  215. data: {
  216. Filters: `FloorId='${this.buildFloor[1]}'`,
  217. PageSize: 1000
  218. },
  219. objectType: this.tab.code
  220. }
  221. this.allUnRelatISP = []
  222. getIspNotInSpace(pa, res => {
  223. this.allUnRelatISP = res.Content;
  224. })
  225. },
  226. // 获取底图
  227. getGraphy() {
  228. let that = this;
  229. that.clearGraphy()
  230. that.scene = new DivideFloorScene();
  231. that.canvasLoading = true;
  232. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
  233. that.canvasLoading = false;
  234. if (res == 'error') {
  235. this.FloorMap = '';
  236. this.$message.warning('数据解析异常');
  237. return;
  238. }
  239. that.view.scene = that.scene;
  240. // 绘制业务空间
  241. let tempArr = this.BSPRelaISPList.map((t, i) => {
  242. return {
  243. RoomLocalName: t.RoomLocalName,
  244. OutLine: t.Outline,
  245. RoomID: t.RoomID,
  246. Color: new SColor(colorArr[i % colorArr.length]),
  247. }
  248. })
  249. that.scene.addZoneList(tempArr);
  250. that.scene.click(that, that.canvasClick);
  251. that.zoneList = that.scene.zoneList;
  252. // 蒙版
  253. if (this.FloorObj.Outline) {
  254. let newArr = this.FloorObj.Outline.map(t => {
  255. return new SPoint(t.X, t.Y);
  256. })
  257. this.scene.addSceneMark(newArr)
  258. }
  259. that.view.fitSceneToView();
  260. that.view.maxScale = that.view.scale * 10;
  261. that.view.minScale = that.view.scale;
  262. if (that.$refs.canvasFun) {
  263. that.$refs.canvasFun.everyScale = that.view.scale;
  264. }
  265. })
  266. },
  267. // 获取当前分区下的业务空间
  268. getBusinessSpace() {
  269. this.isLoading = true
  270. let pa = {
  271. zone: this.tab.code,
  272. data: {
  273. Filters: ``,
  274. Orders: "createTime desc, RoomID asc",
  275. PageSize: 500
  276. }
  277. }
  278. if (this.buildFloor.length && this.buildFloor.length > 1) {
  279. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  280. }
  281. queryZone(pa, res => {
  282. // 所有业务空间
  283. this.businessSpaceList = res.Content;
  284. // 未关联元空间的业务空间
  285. this.BSPUnrelaISPList = [];
  286. // 已关联元空间的业务空间
  287. this.BSPRelaISPList = [];
  288. res.Content.map(t => {
  289. if (t.Outline && t.Outline.length) {
  290. this.BSPRelaISPList.push(t)
  291. } else {
  292. this.BSPUnrelaISPList.push(t)
  293. }
  294. })
  295. // 获取底图
  296. this.getGraphy();
  297. this.isLoading = false;
  298. })
  299. },
  300. // canvas点击事件
  301. canvasClick(item, event) {
  302. if (this.type == 4) {
  303. } else {
  304. if (item instanceof SpaceItem && item.selectable) {
  305. this.type = 3;
  306. this.curZoneItem = {};
  307. this.scene.isZoneSelectable = false;
  308. }
  309. if (item instanceof ZoneItem && item.selectable) {
  310. this.type = 2;
  311. this.curZoneItem = item;
  312. this.scene.isSpaceSelectable = false;
  313. this.scene.clearZoneSelection();
  314. item.selected = true;
  315. }
  316. }
  317. },
  318. // 编辑平面图
  319. editGraphy() {
  320. this.type = 3;
  321. },
  322. // 查看未关联的业务空间--flag--查看-or-选择
  323. lookUnrelatBSpace(flag) {
  324. this.isAction = flag;
  325. let arr = this.scene.getSelectedSpaces();
  326. if (flag && !arr.length) {
  327. this.$message.warning('请至少选择一个空间');
  328. return;
  329. }
  330. this.$refs.unRelateBSP.showDialog();
  331. },
  332. // 取消(所有取消公用)
  333. cancelGraphy() {
  334. this.type = 1;
  335. this.init();
  336. },
  337. // 批量创建业务空间
  338. groupCreateBSpace() {
  339. let text = []
  340. let Spaces = this.allUnRelatISP.map(t => {
  341. text.push(t.RoomLocalName || t.RoomName)
  342. return {
  343. IspaceId: t.RoomID,
  344. RoomLocalName: t.RoomLocalName || t.RoomName,
  345. Outline: [t.Outline],
  346. BuildingId: this.buildFloor[0],
  347. FloorId: this.buildFloor[1]
  348. }
  349. });
  350. this.$confirm(
  351. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  352. "<p>涉及的空间:</p>" +
  353. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  354. text.toString() +
  355. "</p>",
  356. "提示", {
  357. dangerouslyUseHTMLString: true,
  358. confirmButtonText: "确定",
  359. cancelButtonText: "取消",
  360. type: "warning"
  361. }
  362. ).then(() => {
  363. let pa = {
  364. zone: this.tab.code,
  365. data: {
  366. Content: Spaces
  367. }
  368. }
  369. this.canvasLoading = true;
  370. createZone(pa, res => {
  371. res.EntityList.map(t => {
  372. Spaces = Spaces.map(item => {
  373. if (t.RoomLocalName == item.RoomLocalName) {
  374. item.SpaceId = t.RoomID
  375. }
  376. return item;
  377. })
  378. })
  379. let param = {
  380. data: {
  381. Content: Spaces
  382. },
  383. type: this.tab.code
  384. }
  385. groupCreRelaZoneAndISp(param, res => {
  386. this.$message.success('创建成功')
  387. this.canvasLoading = false;
  388. this.init()
  389. })
  390. })
  391. }).catch(() => {
  392. this.$message({
  393. type: "info",
  394. message: "已取消批量创建"
  395. });
  396. });
  397. },
  398. // 创建新的业务空间
  399. createNewZone() {
  400. let arr = this.scene.getSelectedSpaces();
  401. if (arr.length) {
  402. let tempArr = [];
  403. arr.map(t => {
  404. tempArr.push(t.data.Name);
  405. })
  406. this.$refs.createBSP.showDialog(tempArr.toString());
  407. } else {
  408. this.$message.warning('请至少选择一个空间');
  409. }
  410. },
  411. // 创建新的业务空间-弹窗返回确认创建
  412. createRoom(val) {
  413. let arr = this.scene.getSelectedSpaces();
  414. let zoneObj = { Outline: [] }, IspaceIdList = [];
  415. arr.map(t => {
  416. zoneObj.Outline.push(t.data.OutLine);
  417. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId])
  418. })
  419. zoneObj.RoomLocalName = val;
  420. zoneObj.BuildingId = this.buildFloor[0];
  421. zoneObj.FloorId = this.buildFloor[1];
  422. let pa = {
  423. zone: this.tab.code,
  424. data: {
  425. Content: [zoneObj]
  426. }
  427. }
  428. createZone(pa, res => {
  429. this.relationInBSPandISP(res.EntityList[0].RoomID, IspaceIdList)
  430. })
  431. },
  432. // 从未关联平面图的业务空间中选择--按钮返回关联信号
  433. createFromUnrelated(BSP) {
  434. BSP.Outline = []
  435. let arr = this.scene.getSelectedSpaces();
  436. arr.map(t => {
  437. BSP.Outline.push(t.data.OutLine);
  438. })
  439. let pa = {
  440. zone: BSP.ObjectType,
  441. data: {
  442. Content: [BSP],
  443. Projection: ['Outline']
  444. }
  445. }
  446. updateZone(pa, res => {
  447. this.$message.success('更新成功');
  448. this.init();
  449. })
  450. },
  451. // 编辑空间详情
  452. editeSpaceDetail() {
  453. let item = this.curZoneItem.data;
  454. this.$router.push({
  455. path: "/ledger/spaceDetail",
  456. query: { RoomID: item.RoomID, zone: this.tab.code, isMyTab: 1 }
  457. })
  458. },
  459. // 重新划分业务空间
  460. refactorBSP() {
  461. this.type = 4;
  462. // 设置空间可选
  463. this.scene.isSpaceSelectable = true;
  464. // 将已关联的设置不可选,并将当前选的隐藏
  465. this.scene.changeSelectZone(this.curZoneItem);
  466. },
  467. // 重新划分--保存
  468. saveRefactorBSP() {
  469. let arr = this.scene.getSelectedSpaces();
  470. //更新业务空间
  471. let zoneObj = { Outline: [] }, IspaceIdList = [];
  472. arr.map(t => {
  473. zoneObj.Outline.push(t.data.OutLine);
  474. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId])
  475. })
  476. zoneObj.RoomID = this.curZoneItem.data.RoomID;
  477. if (!zoneObj.Outline.length) {
  478. zoneObj.Outline = null;
  479. }
  480. let pa = {
  481. zone: this.tab.code,
  482. data: {
  483. Content: [zoneObj],
  484. Projection: ['Outline']
  485. },
  486. }
  487. updateZone(pa, res => {
  488. this.relationInBSPandISP(zoneObj.RoomID, IspaceIdList)
  489. })
  490. },
  491. // 更新业务空间和元空间的关系
  492. relationInBSPandISP(SpaceId, IspaceIdList) {
  493. let pa = {
  494. data: { SpaceId: SpaceId, IspaceIdList: IspaceIdList },
  495. type: this.tab.code
  496. }
  497. createRelateInZoneAndISp(pa, res => {
  498. this.$message.success('创建成功');
  499. this.init();
  500. })
  501. },
  502. // canvas 获取焦点
  503. focus() {
  504. document.getElementById(`floorCanvas`).focus()
  505. },
  506. // 清除canvas
  507. clearGraphy() {
  508. if (this.view) {
  509. this.view.scene = null;
  510. return
  511. }
  512. this.view = new SGraphyView('floorCanvas')
  513. },
  514. // 工具栏操作
  515. // 移动底图
  516. moveCanvas(move) {
  517. // todo
  518. let canvas = document.getElementById(`floorCanvas`);
  519. if (move) {
  520. canvas.style.cursor = 'move';
  521. } else {
  522. canvas.style.cursor = 'default';
  523. }
  524. },
  525. // 适配底图到窗口
  526. fit() {
  527. this.view.fitSceneToView()
  528. },
  529. // 保存为png
  530. savePng() {
  531. this.view.saveImage(`${this.buildFloor[1]}.png`, 'png');
  532. },
  533. // 保存为svg
  534. saveSvg() {
  535. this.view.saveSceneSvg(`${this.buildFloor[1]}.svg`, 6400, 4800);
  536. },
  537. // 切割划分
  538. divide() {
  539. this.drawMainScene.isMarking = true;
  540. },
  541. // 清除切割划分
  542. clearDivide() {
  543. this.drawMainScene.clearSceneMark()
  544. },
  545. // 撤销
  546. undo() {
  547. },
  548. // 反撤销
  549. redo() { },
  550. // 缩放
  551. scale(val) {
  552. if (!this.view) {
  553. return;
  554. }
  555. let scale = this.view.scale;
  556. this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
  557. },
  558. },
  559. filters: {
  560. cutString: function (str, len) {
  561. //length属性读出来的汉字长度为1
  562. if (!!str && typeof str == "string" && str.length > len) {
  563. return str.substring(0, len) + "...";
  564. } else {
  565. return str || "--";
  566. }
  567. }
  568. },
  569. watch: {
  570. projectId() {
  571. this.FloorMap = '';
  572. this.tab = {};
  573. },
  574. "view.scale": {
  575. handler(n) {
  576. if (this.$refs.canvasFun) {
  577. this.$refs.canvasFun.sliderVal = n * 10 / this.view.minScale;
  578. }
  579. }
  580. }
  581. }
  582. }
  583. </script>
  584. <style lang="less" scoped>
  585. #graphy {
  586. position: relative;
  587. width: 100%;
  588. height: calc(100% - 56px);
  589. .canvas-box {
  590. width: 100%;
  591. height: 100%;
  592. }
  593. .buttons-box {
  594. position: absolute;
  595. top: 0;
  596. width: 100%;
  597. z-index: 999;
  598. & > div {
  599. float: left;
  600. }
  601. /deep/ .el-autocomplete {
  602. display: block;
  603. width: 320px;
  604. margin-right: 10px;
  605. }
  606. .button-group button {
  607. display: block;
  608. float: left;
  609. }
  610. .my-autocomplete {
  611. li {
  612. line-height: normal;
  613. padding: 7px;
  614. .name {
  615. text-overflow: ellipsis;
  616. overflow: hidden;
  617. }
  618. .addr {
  619. font-size: 12px;
  620. color: #b4b4b4;
  621. }
  622. .highlighted .addr {
  623. color: #ddd;
  624. }
  625. }
  626. }
  627. }
  628. .canvas-actions-box {
  629. position: absolute;
  630. bottom: 20px;
  631. left: 50%;
  632. transform: translateX(-50%);
  633. z-index: 999;
  634. }
  635. }
  636. </style>