elevationMap.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <div class="saga-elevation">
  3. <div v-if="elevationData.length" class="saga-floor">
  4. <div class="saga-rf"><p class="saga-floorName">RF</p><div class="saga-spaceList"></div></div>
  5. <div class="saga-floor-item" v-for="floor in elevationData" :key="floor.FloorSequenceID">
  6. <p class="saga-floorName">{{floor.FloorLocalName}}<i class="el-icon-right"></i></p>
  7. <div class="saga-spaceList"></div>
  8. </div>
  9. </div>
  10. <div v-else class="saga-center">
  11. <i class="icon-wushuju iconfont"></i>
  12. 数据暂无
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import { shaftVerticalSpace } from "@/api/scan/request"
  18. import {mapGetters} from 'vuex'
  19. export default {
  20. data () {
  21. return {
  22. elevationData: [
  23. {
  24. FloorSequenceID: 5,
  25. FloorLocalName: 'F5',
  26. ZoneSpaceList: [
  27. {
  28. RoomID: 'f5-001',
  29. RoomLocalName: '业务空间f5-001',
  30. SpaceIdList: ['f4-002']
  31. }
  32. ]
  33. },
  34. {
  35. FloorSequenceID: 4,
  36. FloorLocalName: 'F4',
  37. ZoneSpaceList: [{
  38. RoomID: 'f4-001',
  39. RoomLocalName: '业务空间f4-001',
  40. SpaceIdList: ['f3-002']
  41. }, {
  42. RoomID: 'f4-002',
  43. RoomLocalName: '业务空间f4-002',
  44. SpaceIdList: ['f5-001']
  45. }]
  46. },
  47. {
  48. FloorSequenceID: 3,
  49. FloorLocalName: 'F3',
  50. ZoneSpaceList: [{
  51. RoomID: 'f3-001',
  52. RoomLocalName: '业务空间f3-001',
  53. SpaceIdList: ['f2-002']
  54. }, {
  55. RoomID: 'f3-002',
  56. RoomLocalName: '业务空间f3-002',
  57. SpaceIdList: ['f2-002','f4-001']
  58. }]
  59. },
  60. {
  61. FloorSequenceID: 2,
  62. FloorLocalName: 'F2',
  63. ZoneSpaceList: [{
  64. RoomID: 'f2-001',
  65. RoomLocalName: '业务空间f2-001',
  66. SpaceIdList: ['f1-001']
  67. }, {
  68. RoomID: 'f2-002',
  69. RoomLocalName: '业务空间f2-002',
  70. SpaceIdList: ['f3-001','f3-002']
  71. }, {
  72. RoomID: 'f2-003',
  73. RoomLocalName: '业务空间f2-003',
  74. SpaceIdList: []
  75. }]
  76. },
  77. {
  78. FloorSequenceID: 1,
  79. FloorLocalName: 'F1',
  80. ZoneSpaceList: [{
  81. RoomID: 'f1-001',
  82. RoomLocalName: '业务空间f1-001',
  83. SpaceIdList: ['f2-001']
  84. }, {
  85. RoomID: 'f1-002',
  86. RoomLocalName: '业务空间f1-002',
  87. SpaceIdList: []
  88. }, {
  89. RoomID: 'f1-003',
  90. RoomLocalName: '业务空间f1-003',
  91. SpaceIdList: []
  92. }]
  93. }
  94. ]
  95. }
  96. },
  97. computed: {
  98. ...mapGetters("layout", ["projectId"])
  99. },
  100. props: {
  101. params: Object
  102. },
  103. methods: {
  104. init () {
  105. console.log(JSON.stringify(this.elevationData))
  106. // console.log(this.params)
  107. //// 查询竖井关联的空间垂直交通关系
  108. // shaftVerticalSpace(this.params, (res) => {
  109. // this.elevationData = res.Content
  110. // })
  111. let max = 0, idMap = {};
  112. this.elevationData.reverse().forEach(floor => {
  113. if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
  114. floor.ZoneSpaceList.forEach(space => {
  115. if (idMap[space.RoomID]) {
  116. space.SpaceIdList.forEach(RoomID =>{
  117. if (!idMap[RoomID]) {
  118. idMap[RoomID] = idMap[space.RoomID];
  119. }
  120. })
  121. } else {
  122. max++;
  123. idMap[space.RoomID] = max;
  124. space.SpaceIdList.forEach(RoomID =>{
  125. if (!idMap[RoomID]) {
  126. idMap[RoomID] = max;
  127. }
  128. })
  129. }
  130. })
  131. }
  132. })
  133. console.log(idMap)
  134. }
  135. },
  136. watch: {
  137. projectId() {
  138. if (this.params.buildingId && this.params.objectType && this.params.shaftId) {
  139. this.init();
  140. }
  141. console.log(this.projectId)
  142. },
  143. params: {
  144. handler(val) {
  145. if (this.params.buildingId && this.params.objectType && this.params.shaftId) {
  146. this.init();
  147. }
  148. },
  149. immediate: true,
  150. deep: true,
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="less">
  156. .saga-elevation {
  157. height: 100%;
  158. position: relative;
  159. .saga-center{
  160. position: absolute;
  161. top: 50%;
  162. left: 50%;
  163. transform: translate(-50%,-60%);
  164. text-align: center;
  165. }
  166. .saga-floor {
  167. display: flex;
  168. height: 100%;
  169. box-sizing: border-box;
  170. flex-direction: column;
  171. justify-content: flex-end;
  172. padding: 0 10px 60px 0;
  173. .saga-rf {
  174. display: flex;
  175. flex-direction: row;
  176. font-size: 12px;
  177. color: blue;
  178. }
  179. .saga-floor-item {
  180. display: flex;
  181. flex-direction: row;
  182. font-size: 12px;
  183. height: 60px;
  184. line-height: 60px;
  185. }
  186. .saga-floorName {
  187. width: 50px;
  188. text-align: right;
  189. }
  190. .saga-spaceList {
  191. flex: 1;
  192. border-bottom: 2px solid #c1c6d2;
  193. }
  194. }
  195. }
  196. .block {
  197. display: inline-block;
  198. height: 60px;
  199. line-height: 60px;
  200. width: 120px;
  201. text-align: center;
  202. position: relative;
  203. }
  204. .relate {
  205. background-color: yellow;
  206. border: 1px solid black;
  207. }
  208. .space {
  209. background-color: #999;
  210. }
  211. </style>