relatedSpace.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <template>
  2. <div id="relatedSpace">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <div class="edit-tool" v-if="!(cenoteObj.onlyRead == 'true')">
  7. <el-button v-if="isMyTab == 2" size="small" style="float:right" @click="dialogVisible = true">添加</el-button>
  8. <div v-else>
  9. <el-button v-show="!isEdit" @click="changeEditType" size="small" style="float:right">编辑</el-button>
  10. <el-button v-show="isEdit" size="small" @click="saveEdit" style="float:right">保存</el-button>
  11. <el-button v-show="isEdit" size="small" @click="cancelEdit" style="float:right">取消</el-button>
  12. </div>
  13. <addSpaceDialog :dialogVisible.sync="dialogVisible" ref="addSpaceDialog" @refresh="refresh"
  14. :params="cenoteObj" :spaceType="spaceType"
  15. :floorType="floorType"></addSpaceDialog>
  16. </div>
  17. <el-badge :is-dot="showSpaceDot" style="margin-left:15px;">
  18. <label style="line-height:32px;">业务空间类型:</label>
  19. <el-cascader v-model="space" placeholder="请选择业务空间" :props="{value:'code',label:'name',children:'zoneType'}"
  20. :options="spaceList"
  21. @change="changeSpace" style="margin-left:15px;"></el-cascader>
  22. </el-badge>
  23. </div>
  24. <div class="saga-build-tab">
  25. <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
  26. <el-radio-button label="1">平面图</el-radio-button>
  27. <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
  28. </el-radio-group>
  29. </div>
  30. <div v-show="isMyTab == 1" class="data-item">
  31. <el-badge :is-dot="showBuildDot">
  32. <label style="line-height:32px;padding: 0 10px;">所属建筑:</label>
  33. <el-select v-model="building" placeholder="请选择建筑" @change="changeBuilding" v-loading="buildingLoading">
  34. <el-option v-for="item in buildingList" :key="item.value"
  35. :label="item.localName || item.name"
  36. :value="item.id"></el-option>
  37. </el-select>
  38. </el-badge>
  39. <el-switch v-if="!(cenoteObj.onlyRead == 'true')" style="margin-left:15px;" v-model="isAI" @change="handleChangeAI"
  40. active-text="打开AI">
  41. </el-switch>
  42. <div style="height:calc(100% - 42px);margin:10px 0 0 0;width:100%;">
  43. <el-row
  44. style="height:100%;margin:0;width:55%;position:relative;display:inline-block;border:1px solid #e4e4e4;">
  45. <el-col :span="4" style="height:100%;border-right:1px solid #e4e4e4;">
  46. <el-scrollbar style="height:100%;">
  47. <div class="floor" style="height:100%;text-align:center;">
  48. <span class="floor-item" style="border-bottom:1px solid #e4e4e4;">楼 层</span>
  49. <div v-if="building" v-loading="buildingLoading">
  50. <span class="floor-item" @click="changeFloor(item)"
  51. :class="{floorItemChoose:(item.id == floor)}"
  52. v-for="item in buildingObj.floor" :key="item.id">{{ item.localName }}</span>
  53. </div>
  54. </div>
  55. </el-scrollbar>
  56. </el-col>
  57. <el-col :span="20" style="height:100%;position:relative;">
  58. <cenote-graphy ref="cenotegraphy" :buildFloorName="buildFloorName"></cenote-graphy>
  59. </el-col>
  60. </el-row>
  61. <div class="elevation-box">
  62. <elevation-map ref="elevationMap" :onlyRead="cenoteObj.onlyRead=='true'" :isEdit="isEdit" :isAI="isAI"
  63. @elevationChecked="handleCheckedSpace"
  64. @elevationUncheck="handleUncheckSpace"
  65. :params="{buildingId: building, objectType: ObjectType, shaftId: $route.query.ShaftId}">
  66. </elevation-map>
  67. </div>
  68. </div>
  69. </div>
  70. <div v-show="isMyTab == 2" class="data-item">
  71. <related-spaceList :space="ObjectType" :buildingList="buildingList" :spaceType="spaceType"
  72. :floorType="floorType" ref="relatedSpacelist">
  73. </related-spaceList>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script>
  79. import spaceSelect from "@/components/ledger/lib/spaceSelect";
  80. import relatedSpaceList from "@/components/ledger/cenote/relatedSpaceList";
  81. import elevationMap from "@/components/ledger/cenote/elevationMap";
  82. import addSpaceDialog from '@/components/ledger/cenote/dialog/addSpaceDialog';
  83. import {
  84. queryAllZoneType,
  85. shaftSpaceTypeQuery,
  86. shaftSpaceBuildingQuery,
  87. verticalSpace
  88. } from '@/api/scan/request';
  89. import cenoteGraphy from '@/components/ledger/lib/cenoteGraphy'
  90. import { mapGetters } from 'vuex'
  91. import { buildingQuery } from '@/api/object/build';
  92. export default {
  93. data() {
  94. return {
  95. isMyTab: 1,//默认平面图
  96. isEdit: false,//是否正在编辑
  97. building: '',//当前建筑id
  98. buildingObj: {},//当前建筑obj
  99. buildingList: [],
  100. space: [],//当前业务空间
  101. ObjectType: '',//业务空间code
  102. spaceList: [],//空间list
  103. floor: '',//当前楼层
  104. dialogVisible: false,//添加空间弹窗
  105. spaceType: {},//空间种类
  106. floorType: {},//子组件楼层信息
  107. buildingLoading: false,//左侧列表加载
  108. // showSpaceDot: false,//空间提示红点
  109. // showBuildDot: false,//楼层提示红点
  110. isAI: true,//是否打开AI
  111. buildFloorName: '', //建筑楼层名称
  112. }
  113. },
  114. computed: {
  115. cenoteObj() {
  116. return this.$route.query;
  117. },
  118. showSpaceDot() {
  119. return this.spaceList.length > 1 && this.cenoteObj.onlyRead == 'true' ? true : false;
  120. },
  121. showBuildDot() {
  122. return this.buildingList.length > 1 && this.cenoteObj.onlyRead == 'true' ? true : false;
  123. },
  124. ...mapGetters("layout", ["projectId"])
  125. },
  126. props: {},
  127. components: {
  128. spaceSelect,
  129. relatedSpaceList,
  130. addSpaceDialog,
  131. cenoteGraphy,
  132. elevationMap
  133. },
  134. created() {
  135. this.isAI = this.$route.query.onlyRead == 'true' ? false : true;
  136. this.getSpaceData();
  137. },
  138. methods: {
  139. //获取空间信息
  140. getSpaceData() {
  141. if (this.cenoteObj.onlyRead == 'true') {
  142. let pa = {
  143. shaftId: this.$route.query.ShaftId
  144. }
  145. shaftSpaceTypeQuery(pa, res => {
  146. this.spaceList = res.content.map(item => {
  147. return { code: item.objectType, name: item.objectTypeName };
  148. });
  149. this.showDefaultSpace();
  150. });
  151. } else {
  152. let params1 = {},
  153. //Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }]
  154. params2 = {shaftId: this.$route.query.ShaftId};
  155. let promise1 = new Promise((resolve, reject) => {
  156. queryAllZoneType(params1, res => {
  157. resolve(res)
  158. })
  159. })
  160. let promise2 = new Promise((resolve, reject) => {
  161. shaftSpaceTypeQuery(params2, res => {
  162. resolve(res)
  163. })
  164. })
  165. Promise.all([promise1, promise2]).then(values => {
  166. let val1 = values[0], val2 = values[1]
  167. this.spaceList = val1.content.map(t => {
  168. if (t.name != "元空间") {
  169. this.spaceType[t.code] = t.name;
  170. }
  171. return t;
  172. });
  173. if (val2.content.length) {
  174. this.space = [val2.content[0].objectType];
  175. } else {
  176. this.space = this.spaceList.find((item) => {
  177. return item.code == "GeneralZone"
  178. }) ? ["GeneralZone"] : [this.spaceList[0].code];
  179. }
  180. this.ObjectType = this.space[0];
  181. //加载楼层信息
  182. this.loadBuildingData();
  183. })
  184. }
  185. },
  186. //默认显示默认分区,无默认分区显示第一个分区
  187. showDefaultSpace() {
  188. if (this.spaceList.length && this.cenoteObj.onlyRead == 'true') {
  189. this.space = this.spaceList.find((item) => {
  190. return item.Code == "GeneralZone"
  191. }) ? ["GeneralZone"] : [this.spaceList[0].Code];
  192. this.ObjectType = this.space[0];
  193. }
  194. //处理空间类型
  195. this.spaceList.map(item => {
  196. if (item.Name != "元空间") {
  197. this.spaceType[item.Code] = item.Name;
  198. }
  199. });
  200. //加载楼层信息
  201. this.loadBuildingData();
  202. },
  203. //获取楼层信息
  204. loadBuildingData() {
  205. if (this.cenoteObj.onlyRead == 'true') {
  206. let param = {
  207. ShaftId: this.$route.query.ShaftId,
  208. ObjectType: this.ObjectType
  209. };
  210. this.buildingLoading = true;
  211. shaftSpaceBuildingQuery(param, res => {
  212. this.buildingLoading = false;
  213. this.buildingList = res.content;
  214. this.buildingList = this.buildingList.map(item => {
  215. debugger
  216. item.floor = item.floorList;
  217. item.BuildID = item.BuildingId;
  218. item.BuildLocalName = item.BuildingLocalName;
  219. if (item.Floor) {
  220. item.Floor = item.Floor.map(item => {
  221. item.FloorID = item.FloorId;
  222. item.FloorLocalName = item.FloorLocalName;
  223. return item;
  224. })
  225. }
  226. return item;
  227. })
  228. this.handleBuildingData();
  229. });
  230. } else {
  231. let param = {
  232. cascade: [
  233. {
  234. name: "floor",
  235. orders: "floorSequenceId desc, name asc",
  236. }
  237. ]
  238. };
  239. buildingQuery(param, res => {
  240. this.buildingList = res.content;
  241. this.handleBuildingData();
  242. });
  243. }
  244. },
  245. //处理建筑楼层数据
  246. handleBuildingData() {
  247. if (this.isMyTab == 2) {
  248. this.$refs.relatedSpacelist.setFloorData(this.buildingList);
  249. }
  250. if (this.buildingList.length) {
  251. this.changeBuilding(this.buildingList[0].id);
  252. } else {
  253. this.buildingList = [];
  254. this.building = '';
  255. this.floor = '';
  256. }
  257. this.buildingList.map(item => {
  258. if (item.id && item.localName) {
  259. this.floorType[item.id] = item.localName;
  260. if (item.floor instanceof Array) {
  261. item.floor.map(f => {
  262. if (f.id && f.localName) {
  263. this.floorType[f.id] = f.localName;
  264. }
  265. })
  266. }
  267. }
  268. });
  269. },
  270. //计算 和当前竖井有关联的空间的垂直交通关系
  271. calculateRelation() {
  272. if (this.isAI && this.building && this.ObjectType && this.cenoteObj.ShaftId) {
  273. let params = {
  274. buildingId: this.building,
  275. objectType: this.ObjectType,
  276. shaftId: this.cenoteObj.ShaftId,
  277. }
  278. verticalSpace(params, res => {
  279. console.log(res)
  280. })
  281. }
  282. },
  283. //改变AI开关
  284. handleChangeAI(val) {
  285. this.calculateRelation();
  286. },
  287. //更改业务空间类型
  288. changeSpace(val) {
  289. this.ObjectType = val[0];
  290. this.floor = '';
  291. this.buildingList = [];
  292. this.building = '';
  293. this.changeFloor({ id: '' });
  294. this.loadBuildingData();
  295. this.calculateRelation();
  296. },
  297. //更换建筑
  298. changeBuilding(bid) {
  299. this.buildingObj = {};
  300. this.building = bid;
  301. this.buildingList.map(item => {
  302. if (item.id == bid) {
  303. this.buildingObj = item;
  304. if (item.floor && item.floor.length) {
  305. this.changeFloor(item.floor[0]);
  306. }
  307. }
  308. })
  309. this.calculateRelation();
  310. },
  311. //更换楼层
  312. changeFloor(floorObj) {
  313. this.buildFloorName = `${this.buildingObj.localName || this.buildingObj.name || ""}-${floorObj.localName || floorObj.name || ""}`
  314. this.floor = floorObj.id;
  315. let buildfloor = [this.building, floorObj.id]
  316. this.$refs.cenotegraphy.getFloorMap(buildfloor, this.ObjectType)
  317. },
  318. //平面图选中空间,立面图对应选中
  319. handleCheckedSpace(RoomID) {
  320. this.$refs.cenotegraphy.canvasChecked(RoomID);
  321. },
  322. //平面图取消选中空间,立面图对应取消选中
  323. handleUncheckSpace(RoomID) {
  324. this.$refs.cenotegraphy.canvasUncheck(RoomID);
  325. },
  326. // 编辑
  327. changeEditType() {
  328. this.isEdit = true;
  329. this.$refs.cenotegraphy.edit();
  330. },
  331. //取消编辑
  332. cancelEdit() {
  333. this.isEdit = false;
  334. this.$refs.cenotegraphy.cancelEdit();
  335. },
  336. //保存编辑
  337. saveEdit() {
  338. this.isEdit = false;
  339. this.$refs.cenotegraphy.saveEdit();
  340. // 走保存接口,然后回调渲染
  341. this.$refs.elevationMap.savaEdit();
  342. },
  343. //更换列表或平面图
  344. changeRadio(val) {
  345. if (val == 2) {
  346. this.spaceList.unshift({ code: '', name: '全部' });
  347. }
  348. if (val == 1) {
  349. if (this.spaceList.length > 0) {
  350. this.spaceList.shift();
  351. }
  352. }
  353. if (this.spaceList.length) {
  354. this.changeSpace(this.spaceList[0].code);
  355. this.space = [this.spaceList[0].code]
  356. }
  357. this.isMyTab = val;
  358. },
  359. //返回
  360. goBack() {
  361. this.$router.push({
  362. name: 'cenotelist'
  363. })
  364. },
  365. //更新
  366. refresh() {
  367. this.$refs.relatedSpacelist.getSpaceList();
  368. this.dialogVisible = false;
  369. }
  370. },
  371. watch: {
  372. isEdit: {
  373. handler(val) {
  374. // this.$refs.cenotegraphy.setSelectAble(val);
  375. }
  376. },
  377. projectId: {
  378. handler(val) {
  379. this.goBack();
  380. }
  381. }
  382. }
  383. }
  384. </script>
  385. <style lang="less" scoped>
  386. .condition {
  387. position: relative;
  388. padding: 10px;
  389. display: flex;
  390. height: calc(100% - 22px);
  391. flex-direction: column;
  392. border: 1px solid #dfe6ec;
  393. background: #fff;
  394. .header {
  395. padding-bottom: 10px;
  396. border-bottom: 1px solid #e4e4e4;
  397. span {
  398. line-height: 33px;
  399. margin-left: 15px;
  400. }
  401. /deep/ .buildFloor {
  402. line-height: 32px;
  403. }
  404. }
  405. .spaceTypes {
  406. .types {
  407. float: left;
  408. width: calc(100% - 200px);
  409. /deep/ .el-tabs__item.is-top {
  410. border-top: 2px solid transparent;
  411. &.is-active {
  412. border-top: 2px solid #409eff;
  413. }
  414. }
  415. }
  416. .deleBtn {
  417. float: left;
  418. width: 200px;
  419. text-align: right;
  420. height: 40px;
  421. border-bottom: 1px solid #e4e7ed;
  422. }
  423. }
  424. }
  425. .saga-build-tab {
  426. position: absolute;
  427. left: 50%;
  428. transform: translateX(-50%);
  429. .tab-main {
  430. float: left;
  431. width: 120px;
  432. padding: 0 5px;
  433. margin: 5px 0;
  434. border: 1px solid #ccc;
  435. background-color: #fff;
  436. height: 30px;
  437. box-sizing: border-box;
  438. text-align: center;
  439. cursor: pointer;
  440. overflow: hidden;
  441. i {
  442. font-size: 18px;
  443. padding-right: 10px;
  444. float: left;
  445. line-height: 30px;
  446. margin-left: 10px;
  447. }
  448. span {
  449. line-height: 30px;
  450. float: left;
  451. }
  452. }
  453. .tab-active {
  454. background-color: #409eff;
  455. color: #fff;
  456. }
  457. }
  458. .data-item {
  459. height: calc(100% - 44px);
  460. padding: 10px 0px;
  461. box-sizing: border-box;
  462. /deep/ .is-horizontal {
  463. display: none;
  464. }
  465. .elevation-box {
  466. height: 100%;
  467. width: calc(45% - 14px);
  468. margin-left: 10px;
  469. display: inline-block;
  470. box-sizing: border-box;
  471. border: 1px solid #e4e4e4;
  472. overflow: auto;
  473. }
  474. }
  475. .floor-item {
  476. padding: 10px 10px;
  477. display: block;
  478. margin: 0px;
  479. cursor: pointer;
  480. }
  481. .floorItemChoose {
  482. background: #e4e4e4;
  483. }
  484. /deep/ .el-scrollbar__wrap {
  485. overflow-x: hidden;
  486. }
  487. </style>