relatedSpace.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  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" :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" style="margin-left:15px;" v-model="isAI" 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.FloorID)" :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"></cenote-graphy>
  53. </el-col>
  54. </el-row>
  55. <div class="elevation-box">
  56. <elevation-map ref="elevationMap" :onlyRead="cenoteObj.onlyRead" :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 } 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. }
  97. },
  98. computed: {
  99. cenoteObj() {
  100. return this.$route.query;
  101. },
  102. showSpaceDot() {
  103. return this.spaceList.length > 1 && this.cenoteObj.onlyRead ? true : false;
  104. },
  105. showBuildDot() {
  106. return this.buildingList.length > 1 && this.cenoteObj.onlyRead ? true : false;
  107. },
  108. ...mapGetters("layout", ["projectId"])
  109. },
  110. props: {
  111. },
  112. components: {
  113. spaceSelect,
  114. relatedSpaceList,
  115. addSpaceDialog,
  116. cenoteGraphy,
  117. elevationMap
  118. },
  119. created() {
  120. this.isAI = this.$route.query.onlyRead ? false : true;
  121. this.getSpaceData();
  122. },
  123. methods: {
  124. //获取空间信息
  125. getSpaceData() {
  126. if (this.cenoteObj.onlyRead) {
  127. let pa = {
  128. shaftId: this.$route.query.ShaftId
  129. }
  130. shaftSpaceTypeQuery(pa, res => {
  131. this.spaceList = res.Content.map(item => {
  132. return { Code: item.ObjectType, Name: item.ObjectTypeName };
  133. });
  134. this.showDefaultSpace();
  135. });
  136. }
  137. else {
  138. let pa = {
  139. Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }]
  140. }
  141. queryAllZoneType(pa, res => {
  142. this.spaceList = res.Content.map(t => {
  143. if (t.Name != "元空间") {
  144. this.spaceType[t.Code] = t.Name;
  145. }
  146. return t;
  147. });
  148. this.showDefaultSpace();
  149. });
  150. }
  151. },
  152. //默认显示第一个空间
  153. showDefaultSpace() {
  154. if (this.spaceList.length) {
  155. this.space = this.spaceList.find((item) => { return item.Code == "GeneralZone" }) ? ["GeneralZone"] : [this.spaceList[0].Code];
  156. // if (this.spaceList.length > 1 && this.cenoteObj.onlyRead) {
  157. // this.showSpaceDot = true;
  158. // }
  159. }
  160. //处理空间类型
  161. this.spaceList.map(item => {
  162. if (item.Name != "元空间") {
  163. this.spaceType[item.Code] = item.Name;
  164. }
  165. });
  166. //加载楼层信息
  167. this.loadBuildingData();
  168. },
  169. //获取楼层信息
  170. loadBuildingData() {
  171. if (this.cenoteObj.onlyRead) {
  172. let param = {
  173. ShaftId: this.$route.query.ShaftId,
  174. ObjectType: this.ObjectType
  175. };
  176. this.buildingLoading = true;
  177. shaftSpaceBuildingQuery(param, res => {
  178. this.buildingLoading = false;
  179. this.buildingList = res.Content;
  180. this.buildingList = this.buildingList.map(item => {
  181. item.Floor = item.FloorList;
  182. item.BuildID = item.BuildingId;
  183. item.BuildLocalName = item.BuildingLocalName;
  184. if (item.Floor) {
  185. item.Floor = item.Floor.map(item => {
  186. item.FloorID = item.FloorId;
  187. item.FloorLocalName = item.FloorLocalName;
  188. return item;
  189. })
  190. }
  191. return item;
  192. })
  193. this.handleBuildingData();
  194. });
  195. }
  196. else {
  197. let param = {
  198. Cascade: [
  199. {
  200. Name: "floor",
  201. Orders: "FloorSequenceID desc, name asc",
  202. }
  203. ]
  204. };
  205. buildingQuery(param, res => {
  206. this.buildingList = res.Content;
  207. this.handleBuildingData();
  208. });
  209. }
  210. },
  211. //处理建筑楼层数据
  212. handleBuildingData() {
  213. if (this.isMyTab == 2) {
  214. this.$refs.relatedSpacelist.setFloorData(this.buildingList);
  215. }
  216. if (this.buildingList.length) {
  217. // if (this.buildingList.length > 1 && this.cenoteObj.onlyRead) {
  218. // this.showBuildDot = true;
  219. // }
  220. this.changeBuilding(this.buildingList[0].BuildID);
  221. } else {
  222. this.buildingList = [];
  223. this.building = '';
  224. this.floor = '';
  225. // this.showBuildDot = false;
  226. }
  227. this.buildingList.map(item => {
  228. if (item.BuildID && item.BuildLocalName) {
  229. this.floorType[item.BuildID] = item.BuildLocalName;
  230. if (item.Floor instanceof Array) {
  231. item.Floor.map(f => {
  232. if (f.FloorID && f.FloorLocalName) {
  233. this.floorType[f.FloorID] = f.FloorLocalName;
  234. }
  235. })
  236. }
  237. }
  238. });
  239. },
  240. //更改业务空间类型
  241. changeSpace(val) {
  242. this.ObjectType = val[val.length - 1];
  243. this.floor = '';
  244. this.buildingList = [];
  245. this.building = '';
  246. this.changeFloor('');
  247. this.loadBuildingData();
  248. },
  249. //更换建筑
  250. changeBuilding(bid) {
  251. this.buildingObj = {};
  252. this.building = bid;
  253. this.buildingList.map(item => {
  254. if (item.BuildID == bid) {
  255. this.buildingObj = item;
  256. if (item.Floor && item.Floor.length) {
  257. // this.floor = item.Floor[0].FloorID
  258. this.changeFloor(item.Floor[0].FloorID);
  259. }
  260. }
  261. })
  262. },
  263. //更换楼层
  264. changeFloor(fid) {
  265. this.floor = fid;
  266. let buildfloor = [this.building, fid]
  267. this.$refs.cenotegraphy.getFloorMap(buildfloor, this.ObjectType)
  268. },
  269. //平面图选中空间,立面图对应选中
  270. handleCheckedSpace(RoomID) {
  271. this.$refs.cenotegraphy.canvasChecked(RoomID);
  272. },
  273. //平面图取消选中空间,立面图对应取消选中
  274. handleUncheckSpace(RoomID) {
  275. this.$refs.cenotegraphy.canvasUncheck(RoomID);
  276. },
  277. // 编辑
  278. changeEditType() {
  279. this.isEdit = true;
  280. this.$refs.cenotegraphy.edit();
  281. },
  282. //取消编辑
  283. cancelEdit() {
  284. this.isEdit = false;
  285. this.$refs.cenotegraphy.cancelEdit();
  286. },
  287. //保存编辑
  288. saveEdit() {
  289. this.isEdit = false;
  290. this.$refs.cenotegraphy.saveEdit();
  291. // 走保存接口,然后回调渲染
  292. this.$refs.elevationMap.savaEdit();
  293. },
  294. //更换列表或平面图
  295. changeRadio(val) {
  296. if (val == 2) {
  297. this.spaceList.unshift({ Code: '', Name: '全部' });
  298. }
  299. if (val == 1) {
  300. if (this.spaceList.length > 0) {
  301. this.spaceList.shift();
  302. }
  303. }
  304. if (this.spaceList.length) {
  305. this.changeSpace(this.spaceList[0].Code);
  306. }
  307. this.isMyTab = val;
  308. },
  309. //返回
  310. goBack() {
  311. this.$router.push({
  312. name: 'cenotelist'
  313. })
  314. },
  315. //更新
  316. refresh() {
  317. this.$refs.relatedSpacelist.getSpaceList();
  318. this.dialogVisible = false;
  319. }
  320. },
  321. watch: {
  322. isEdit: {
  323. handler(val) {
  324. // this.$refs.cenotegraphy.setSelectAble(val);
  325. }
  326. },
  327. projectId: {
  328. handler(val) {
  329. this.goBack();
  330. }
  331. }
  332. }
  333. }
  334. </script>
  335. <style lang="less" scoped>
  336. .condition {
  337. position: relative;
  338. padding: 10px;
  339. display: flex;
  340. height: calc(100% - 22px);
  341. flex-direction: column;
  342. border: 1px solid #dfe6ec;
  343. background: #fff;
  344. .header {
  345. padding-bottom: 10px;
  346. border-bottom: 1px solid #e4e4e4;
  347. span {
  348. line-height: 33px;
  349. margin-left: 15px;
  350. }
  351. /deep/ .buildFloor {
  352. line-height: 32px;
  353. }
  354. }
  355. .spaceTypes {
  356. .types {
  357. float: left;
  358. width: calc(100% - 200px);
  359. /deep/ .el-tabs__item.is-top {
  360. border-top: 2px solid transparent;
  361. &.is-active {
  362. border-top: 2px solid #409eff;
  363. }
  364. }
  365. }
  366. .deleBtn {
  367. float: left;
  368. width: 200px;
  369. text-align: right;
  370. height: 40px;
  371. border-bottom: 1px solid #e4e7ed;
  372. }
  373. }
  374. }
  375. .saga-build-tab {
  376. position: absolute;
  377. left: 50%;
  378. transform: translateX(-50%);
  379. .tab-main {
  380. float: left;
  381. width: 120px;
  382. padding: 0 5px;
  383. margin: 5px 0;
  384. border: 1px solid #ccc;
  385. background-color: #fff;
  386. height: 30px;
  387. box-sizing: border-box;
  388. text-align: center;
  389. cursor: pointer;
  390. overflow: hidden;
  391. i {
  392. font-size: 18px;
  393. padding-right: 10px;
  394. float: left;
  395. line-height: 30px;
  396. margin-left: 10px;
  397. }
  398. span {
  399. line-height: 30px;
  400. float: left;
  401. }
  402. }
  403. .tab-active {
  404. background-color: #409eff;
  405. color: #fff;
  406. }
  407. }
  408. .data-item {
  409. height: calc(100% - 44px);
  410. padding: 10px 0px;
  411. box-sizing: border-box;
  412. /deep/ .is-horizontal {
  413. display: none;
  414. }
  415. .elevation-box {
  416. height: 100%;
  417. width: calc(45% - 14px);
  418. margin-left: 10px;
  419. display: inline-block;
  420. box-sizing: border-box;
  421. border: 1px solid #e4e4e4;
  422. overflow: auto;
  423. }
  424. }
  425. .floor-item {
  426. padding: 10px 10px;
  427. display: block;
  428. margin: 0px;
  429. cursor: pointer;
  430. }
  431. .floorItemChoose {
  432. background: #e4e4e4;
  433. }
  434. /deep/ .el-scrollbar__wrap {
  435. overflow-x: hidden;
  436. }
  437. </style>