relatedSpace.vue 15 KB

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