relatedSpace.vue 15 KB

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