elevationMap.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div v-loading="load" class="saga-elevation">
  3. <div v-if="elevationData.length" class="saga-floor">
  4. <div class="saga-rf">
  5. <p class="saga-floorName">RF</p>
  6. <div class="saga-spaceList">
  7. <div class="saga-group" v-for="(winth, index) in groupWidth" :key="index" :style="`width: ${100*winth}px;`"></div>
  8. </div>
  9. </div>
  10. <div class="saga-floor-item" v-for="floor in elevationData" :key="floor.FloorID">
  11. <p class="saga-floorName" :title="floor.FloorLocalName?floor.FloorLocalName:floor.FloorName">
  12. {{floor.FloorLocalName?floor.FloorLocalName:floor.FloorName}}
  13. <i class="el-icon-right"></i>
  14. </p>
  15. <div class="saga-spaceList">
  16. <div class="saga-group" v-for="(group, groupIndex) in floor.group" :style="`width: ${100*groupWidth[groupIndex]}px;`">
  17. <div class="saga-spaceItem"
  18. :class="[spaceItem.IsAI?spaceItem.checked?'saga-spaceItem-checked':'saga-spaceItem-ai':'']"
  19. v-for="spaceItem in group.spaceList"
  20. :key="spaceItem.RoomID"
  21. :title="spaceItem.RoomLocalName"
  22. @click="handleClickCheck(spaceItem)"
  23. >
  24. {{spaceItem.RoomLocalName}}
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <div v-else class="saga-center">
  31. <i class="icon-wushuju iconfont"></i>
  32. 数据暂无
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import { shaftVerticalSpace, shaftZoneLink } from "@/api/scan/request"
  38. import {mapGetters} from 'vuex'
  39. export default {
  40. data () {
  41. return {
  42. elevationData: [],
  43. groupWidth: {},
  44. checkedList: [],
  45. load: false,
  46. }
  47. },
  48. computed: {
  49. ...mapGetters("layout", ["projectId"])
  50. },
  51. props: {
  52. params: Object,
  53. onlyRead: Boolean,
  54. isEdit: Boolean,
  55. isAI: Boolean,
  56. },
  57. methods: {
  58. init () { //获取数据并格式化数据
  59. this.elevationData = [];
  60. //根据isAI判断请求参数是否包含AI推介数据(暂未完成)
  61. this.params.AiSwitch = this.isAI
  62. console.log(this.params)
  63. this.load = true;
  64. // 查询竖井关联的空间垂直交通关系
  65. shaftVerticalSpace(this.params, (res) => {
  66. let data = res.Content;
  67. let max = 0, idMap = {}, groupMap = {}, copyData = JSON.parse(JSON.stringify(data));
  68. this.groupWidth = {};
  69. copyData.reverse().forEach(floor => {
  70. if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
  71. floor.ZoneSpaceList.forEach(space => {
  72. if (idMap[space.RoomID]) { // 该业务空间在映射列表中
  73. groupMap[idMap[space.RoomID]].push(space)
  74. space.SpaceIdList.forEach(RoomID =>{
  75. if (!idMap[RoomID]) {
  76. idMap[RoomID] = idMap[space.RoomID];
  77. }
  78. })
  79. } else { // 该业务空间不在映射列表中
  80. max++;
  81. idMap[space.RoomID] = max;
  82. groupMap[max] = [];
  83. this.groupWidth[max] = 0;
  84. groupMap[max].push(space);
  85. space.SpaceIdList.forEach(RoomID =>{
  86. if (!idMap[RoomID]) {
  87. idMap[RoomID] = max;
  88. }
  89. })
  90. }
  91. })
  92. }
  93. })
  94. data.forEach((floor, index) =>{
  95. floor.group = {};
  96. Object.keys(groupMap).forEach(groupIndex =>{
  97. let max = 0;
  98. floor.group[groupIndex] = {
  99. spaceList: []
  100. };
  101. if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
  102. floor.ZoneSpaceList.forEach(space => {
  103. if (groupMap[groupIndex].find(item => { return space.RoomID == item.RoomID })) {
  104. space.checked = false;
  105. floor.group[groupIndex].spaceList.push(space);
  106. max++;
  107. }
  108. })
  109. }
  110. if (max > this.groupWidth[groupIndex]) {
  111. this.groupWidth[groupIndex] = max;
  112. }
  113. })
  114. });
  115. this.elevationData = data
  116. console.log(this.elevationData)
  117. this.load = false;
  118. })
  119. },
  120. handleClickCheck (sapceItem) { //点选推介的业务空间
  121. console.log(this.isEdit)
  122. if (sapceItem.IsAI && this.isEdit && !this.onlyRead) { //是AI推荐并且编辑模式下
  123. sapceItem.checked = sapceItem.checked? false: true;
  124. if (sapceItem.checked) {
  125. this.checkedList.push(sapceItem);
  126. // 选中平面图的对应空间
  127. this.$emit('elevationChecked',sapceItem.RoomID);
  128. } else {
  129. let index = this.checkedList.findIndex(item =>{ return item.RoomID == sapceItem.RoomID })
  130. if (index != -1) { // 找到对应的数据
  131. this.checkedList.splice(index,1);
  132. // 取消选中平面图的对应空间
  133. this.$emit('elevationUncheck',sapceItem.RoomID);
  134. }
  135. }
  136. }
  137. },
  138. savaEdit () {// 接口保存数据和业务空间的关系
  139. let params = {
  140. ShaftId: this.params.ShaftId,
  141. SpaceIdList: this.checkedList.map(item => {
  142. return item.RoomID
  143. })
  144. }
  145. console.log(params);
  146. shaftZoneLink(params, res =>{
  147. this.$message.success("保存成功");
  148. this.init();
  149. })
  150. }
  151. },
  152. watch: {
  153. projectId() {
  154. if (this.params.BuildingId && this.params.ObjectType && this.params.ShaftId) {
  155. this.init();
  156. }
  157. console.log(this.projectId)
  158. },
  159. // isAI() {
  160. // if (this.params.BuildingId && this.params.ObjectType && this.params.ShaftId) {
  161. // this.init();
  162. // }
  163. // },
  164. params: {
  165. handler() {
  166. if (this.params.BuildingId && this.params.ObjectType && this.params.ShaftId) {
  167. this.init();
  168. }
  169. },
  170. immediate: true,
  171. deep: true,
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="less">
  177. .saga-elevation {
  178. position: relative;
  179. .saga-center{
  180. position: absolute;
  181. top: 50%;
  182. left: 50%;
  183. transform: translate(-50%,-60%);
  184. text-align: center;
  185. }
  186. .saga-floor {
  187. display: flex;
  188. box-sizing: border-box;
  189. flex-direction: column;
  190. justify-content: flex-end;
  191. padding: 60px 10px 20px 0px;
  192. .saga-rf {
  193. display: flex;
  194. flex-direction: row;
  195. font-size: 12px;
  196. color: blue;
  197. }
  198. .saga-floor-item {
  199. display: flex;
  200. flex-direction: row;
  201. font-size: 12px;
  202. height: 60px;
  203. line-height: 60px;
  204. }
  205. .saga-floorName {
  206. min-width: 80px;
  207. text-align: right;
  208. overflow: hidden;
  209. text-overflow: ellipsis;
  210. white-space: nowrap;
  211. }
  212. .saga-spaceList {
  213. display: flex;
  214. flex-direction: row;
  215. flex: 1;
  216. border-bottom: 2px solid #c1c6d2;
  217. box-sizing: border-box;
  218. .saga-group {
  219. display: flex;
  220. flex-direction: row;
  221. margin-left: 25px;
  222. box-sizing: border-box;
  223. .saga-spaceItem {
  224. width: 100px;
  225. margin-left: 1px;
  226. text-align: center;
  227. overflow: hidden;
  228. text-overflow:ellipsis;
  229. white-space: nowrap;
  230. background-color: #ffcc00;
  231. border: 1px solid #333333;
  232. }
  233. .saga-spaceItem-ai{
  234. cursor: pointer;
  235. box-sizing: border-box;
  236. background-color: #eaeae9;
  237. border: 1px dashed #333333;
  238. }
  239. .saga-spaceItem-checked {
  240. cursor: pointer;
  241. box-sizing: border-box;
  242. background-color: #1abc9c;
  243. border: 1px dashed #333333;
  244. }
  245. }
  246. }
  247. }
  248. }
  249. </style>