graphy.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  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>重新划分业务空间</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">保存</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. }
  124. },
  125. computed: {
  126. ...mapGetters('layout', ['projectId'])
  127. },
  128. created() {
  129. },
  130. mounted() {
  131. this.canvasWidth = this.$refs.graphy.offsetWidth;
  132. this.canvasHeight = this.$refs.graphy.offsetHeight;
  133. },
  134. methods: {
  135. // 初始化
  136. init() {
  137. this.type = 1;
  138. // 获取当前分区下的业务空间
  139. this.getBusinessSpace();
  140. // 获取未关联平面图的业务空间统计
  141. this.getUnrelateCount();
  142. // 获取当前楼层的元空间
  143. this.getFloorISpace();
  144. },
  145. // 获取当前楼层的元空间
  146. getFloorISpace() {
  147. let pa = {
  148. zone: 'Ispace',
  149. data: {
  150. Filters: `FloorId='${this.buildFloor[1]}'`,
  151. PageSize: 1000
  152. }
  153. }
  154. queryZone(pa, res => {
  155. this.BIMIDToSID = {}
  156. res.Content.map(t => {
  157. this.BIMIDToSID[t.BIMID.split(":")[1]] = t.RoomID;
  158. })
  159. })
  160. },
  161. // 搜索
  162. querySearch(queryString, cb) {
  163. var restaurants = this.BSPRelaISPList;
  164. var results = queryString ?
  165. restaurants.filter(this.createFilter(queryString)) :
  166. restaurants;
  167. // 调用 callback 返回建议列表的数据
  168. cb(results);
  169. },
  170. // 过滤器
  171. createFilter(queryString) {
  172. return restaurant => {
  173. return restaurant.RoomLocalName.indexOf(queryString) > -1;
  174. };
  175. },
  176. // 查询选中
  177. handleSelect(BSP) {
  178. console.log(arguments)
  179. },
  180. // 父组件调用
  181. getData(buildFloor, FloorMap, tab) {
  182. this.buildFloor = buildFloor;
  183. this.FloorMap = FloorMap;
  184. this.tab = tab;
  185. console.log(arguments)
  186. this.init();
  187. },
  188. // 获取未关联平面图的业务空间统计
  189. getUnrelateCount() {
  190. let pa = {
  191. data: {
  192. Filters: `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}';Outline isNull`
  193. },
  194. zone: this.tab.code
  195. }
  196. countZone(pa, res => {
  197. this.num = res.Count
  198. })
  199. },
  200. // 获取未绑定业务空间的元空间
  201. getISPSPUnrelaBSP() {
  202. },
  203. // 获取底图
  204. getGraphy() {
  205. let that = this;
  206. that.clearGraphy()
  207. that.view = new SGraphyView('floorCanvas')
  208. that.scene = new DivideFloorScene();
  209. that.canvasLoading = true;
  210. that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(() => {
  211. that.canvasLoading = false;
  212. that.view.scene = that.scene;
  213. let tempArr = this.BSPRelaISPList.map((t, i) => {
  214. return {
  215. RoomLocalName: t.RoomLocalName,
  216. OutLine: t.Outline,
  217. RoomID: t.RoomID,
  218. Color: new SColor(colorArr[i % colorArr.length]),
  219. }
  220. })
  221. that.scene.addZoneList(tempArr);
  222. that.scene.click(that, that.canvasClick)
  223. that.view.fitSceneToView();
  224. })
  225. },
  226. // 获取当前分区下的业务空间
  227. getBusinessSpace() {
  228. this.isLoading = true
  229. let pa = {
  230. zone: this.tab.code,
  231. data: {
  232. Filters: ``,
  233. Orders: "createTime desc, RoomID asc",
  234. PageSize: 500
  235. }
  236. }
  237. if (this.buildFloor.length && this.buildFloor.length > 1) {
  238. pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
  239. }
  240. queryZone(pa, res => {
  241. // 所有业务空间
  242. this.businessSpaceList = res.Content;
  243. // 未关联元空间的业务空间
  244. this.BSPUnrelaISPList = [];
  245. // 已关联元空间的业务空间
  246. this.BSPRelaISPList = [];
  247. res.Content.map(t => {
  248. if (t.Outline && t.Outline.length) {
  249. this.BSPRelaISPList.push(t)
  250. } else {
  251. this.BSPUnrelaISPList.push(t)
  252. }
  253. })
  254. // 获取底图
  255. this.getGraphy();
  256. this.isLoading = false;
  257. })
  258. },
  259. // canvas点击事件
  260. canvasClick(item, event) {
  261. console.log(arguments)
  262. if (item instanceof SpaceItem) {
  263. this.type = 3;
  264. }
  265. if (item instanceof ZoneItem) {
  266. this.type = 2;
  267. }
  268. },
  269. // 编辑平面图
  270. editGraphy() {
  271. this.type = 3;
  272. },
  273. // 查看未关联的业务空间--flag--查看-or-选择
  274. lookUnrelatBSpace(flag) {
  275. this.isAction = flag;
  276. let arr = this.scene.getSelectedSpaces();
  277. if (flag && !arr.length) {
  278. this.$message.warning('请至少选择一个空间');
  279. return;
  280. }
  281. this.$refs.unRelateBSP.showDialog();
  282. },
  283. // 取消(所有取消公用)
  284. cancelGraphy() {
  285. this.type = 1;
  286. this.init();
  287. },
  288. // 批量创建业务空间
  289. groupCreateBSpace() {
  290. let text = []
  291. let Spaces = this.scene.spaceList.map(t => {
  292. text.push(t.data.Name)
  293. return {
  294. RoomLocalName: t.data.Name,
  295. Outline: [t.data.OutLine]
  296. }
  297. });
  298. console.log(Spaces)
  299. console.log(this.scene.spaceList)
  300. // return
  301. this.$confirm(
  302. "<p>确定根据未关联业务空间的空间批量创建业务空间</p>" +
  303. "<p>涉及的空间:</p>" +
  304. "<p style='line-height:20px;max-height:60px;overflow-y:auto;'>" +
  305. text.toString() +
  306. "</p>",
  307. "提示", {
  308. dangerouslyUseHTMLString: true,
  309. confirmButtonText: "确定",
  310. cancelButtonText: "取消",
  311. type: "warning"
  312. }
  313. ).then(() => {
  314. console.log()
  315. let pa = {
  316. zone: this.zoneCode,
  317. data: {
  318. Content: Spaces
  319. }
  320. }
  321. createZone(pa, res => {
  322. })
  323. }).catch(() => {
  324. this.$message({
  325. type: "info",
  326. message: "已取消批量创建"
  327. });
  328. });
  329. },
  330. // 创建新的业务空间
  331. createNewZone() {
  332. let arr = this.scene.getSelectedSpaces();
  333. if (arr.length) {
  334. let tempArr = [];
  335. arr.map(t => {
  336. tempArr.push(t.data.Name);
  337. })
  338. this.$refs.createBSP.showDialog(tempArr.toString());
  339. } else {
  340. this.$message.warning('请至少选择一个空间');
  341. }
  342. },
  343. // 创建新的业务空间-弹窗返回确认创建
  344. createRoom(val) {
  345. let arr = this.scene.getSelectedSpaces();
  346. let zoneObj = { Outline: [] }, IspaceIdList = [];
  347. arr.map(t => {
  348. zoneObj.Outline.push(t.data.OutLine);
  349. IspaceIdList.push(this.BIMIDToSID[t.data.SourceId])
  350. })
  351. zoneObj.RoomLocalName = val;
  352. zoneObj.BuildingId = this.buildFloor[0];
  353. zoneObj.FloorId = this.buildFloor[1];
  354. let pa = {
  355. zone: this.tab.code,
  356. data: {
  357. Content: [zoneObj]
  358. }
  359. }
  360. createZone(pa, res => {
  361. let params = {
  362. SpaceId: res.EntityList[0].RoomID,
  363. IspaceIdList: IspaceIdList
  364. }
  365. createRelateInZoneAndISp(params, res => {
  366. this.$message.success('创建成功');
  367. this.init();
  368. })
  369. })
  370. },
  371. // 从未关联平面图的业务空间中选择--按钮返回关联信号
  372. createFromUnrelated(BSP) {
  373. BSP.Outline = []
  374. let arr = this.scene.getSelectedSpaces();
  375. arr.map(t => {
  376. BSP.Outline.push(t.data.OutLine);
  377. })
  378. let pa = {
  379. zone: BSP.ObjectType,
  380. data: {
  381. Content: [BSP],
  382. Projection: ['Outline']
  383. }
  384. }
  385. updateZone(pa, res => {
  386. this.$message.success('更新成功');
  387. this.init();
  388. })
  389. },
  390. // 编辑空间详情
  391. editeSpaceDetail() {
  392. let arr = this.scene.getSelectedSpaces();
  393. console.log(arr)
  394. // this.$router.push({
  395. // path: "/ledger/spaceDetail",
  396. // query: { RoomID: infos.RoomID, zone: this.zoneCode, isMyTab: 2 }
  397. // })
  398. },
  399. // canvas 获取焦点
  400. focus() {
  401. document.getElementById(`floorCanvas`).focus()
  402. },
  403. // 清除canvas
  404. clearGraphy() {
  405. if (this.view) {
  406. this.view = null;
  407. this.scene.root.children = null;
  408. this.scene = null;
  409. }
  410. },
  411. // 工具栏操作
  412. // 移动底图
  413. moveCanvas(move) {
  414. // todo
  415. let canvas = document.getElementById(`floorCanvas`);
  416. if (move) {
  417. canvas.style.cursor = 'move';
  418. } else {
  419. canvas.style.cursor = 'default';
  420. }
  421. },
  422. // 适配底图到窗口
  423. fit() {
  424. this.view.fitSceneToView()
  425. },
  426. // 保存为png
  427. savePng() {
  428. this.view.saveImage(`${this.floor}.png`, 'png');
  429. },
  430. // 保存为svg
  431. saveSvg() {
  432. this.view.saveSceneSvg(`${this.floor}.png`, 6400, 4800);
  433. },
  434. // 切割划分
  435. divide() {
  436. this.drawMainScene.isMarking = true;
  437. },
  438. // 清除切割划分
  439. clearDivide() {
  440. this.drawMainScene.clearSceneMark()
  441. },
  442. // 撤销
  443. undo() {
  444. },
  445. // 反撤销
  446. redo() { },
  447. // 缩放
  448. scale(val) {
  449. let scale = this.view.scale
  450. this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
  451. },
  452. },
  453. filters: {
  454. cutString: function (str, len) {
  455. //length属性读出来的汉字长度为1
  456. if (!!str && typeof str == "string" && str.length > len) {
  457. return str.substring(0, len) + "...";
  458. } else {
  459. return str || "--";
  460. }
  461. }
  462. },
  463. watch: {
  464. projectId() {
  465. this.FloorMap = '';
  466. this.tab = {};
  467. }
  468. }
  469. }
  470. </script>
  471. <style lang="less" scoped>
  472. #graphy {
  473. position: relative;
  474. width: 100%;
  475. height: calc(100% - 56px);
  476. .canvas-box {
  477. width: 100%;
  478. height: 100%;
  479. }
  480. .buttons-box {
  481. position: absolute;
  482. top: 0;
  483. width: 100%;
  484. z-index: 999;
  485. & > div {
  486. float: left;
  487. }
  488. /deep/ .el-autocomplete {
  489. display: block;
  490. width: 320px;
  491. margin-right: 10px;
  492. }
  493. .button-group button {
  494. display: block;
  495. float: left;
  496. }
  497. .my-autocomplete {
  498. li {
  499. line-height: normal;
  500. padding: 7px;
  501. .name {
  502. text-overflow: ellipsis;
  503. overflow: hidden;
  504. }
  505. .addr {
  506. font-size: 12px;
  507. color: #b4b4b4;
  508. }
  509. .highlighted .addr {
  510. color: #ddd;
  511. }
  512. }
  513. }
  514. }
  515. .canvas-actions-box {
  516. position: absolute;
  517. bottom: 20px;
  518. left: 50%;
  519. transform: translateX(-50%);
  520. z-index: 999;
  521. }
  522. }
  523. </style>