fenbuPic.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <div class='fenbu-box'>
  3. <!-- 图例 -->
  4. <div class='legend-boxs'>
  5. <Legend :floors='floors' type='0'></Legend>
  6. </div>
  7. <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
  8. <div class='additional-box' v-if='floors.length>0'>
  9. <div class='additional' @click='additionalColl'>
  10. <img src='../../assets/imgs/bg.png' alt />
  11. </div>
  12. <el-collapse-transition>
  13. <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
  14. </el-collapse-transition>
  15. </div>
  16. <div v-show='floors.length>0'>
  17. <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
  18. </div>
  19. <div class='nodata' v-show='floors.length==0'>
  20. <img class='img1' src='@/assets/imgs/wtp.png' alt />
  21. <div class='no-img'>暂无分布图,请手动绘制</div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import floorMap from '@/components/floorMap/index.vue'
  27. import floorList from '@/components/floorList.vue'
  28. import { mapGetters } from 'vuex'
  29. import { queryPics } from '@/api/legendLibrary.js'
  30. export default {
  31. components: { floorMap, floorList },
  32. data() {
  33. return {
  34. show: false,
  35. floorInfo: {
  36. gname: 'f1',
  37. code: 'F1'
  38. },
  39. loadName: '',
  40. type: '',
  41. floors: []
  42. }
  43. },
  44. computed: {
  45. ...mapGetters(['floorsArr'])
  46. },
  47. methods: {
  48. emitFloor(item) {
  49. this.floorInfo = item
  50. this.$refs.floorMap.init(this.floorInfo.gname)
  51. },
  52. additionalColl() {
  53. this.show = !this.show
  54. },
  55. getFloorData() {
  56. let postParams = {
  57. Distinct: true,
  58. Filters: "projectId ='1000423';categoryId='LCGN' or categoryId='XFBFYCFL';isPub=true",
  59. PageNumber: 1,
  60. PageSize: 500,
  61. Projection: ['floorId']
  62. }
  63. let floor = []
  64. queryPics({ postParams }).then(res => {
  65. console.log(res)
  66. if (res.Total == 0) {
  67. this.floors = []
  68. } else {
  69. floor = res.Content
  70. this.floorsArr.forEach(el => {
  71. floor.forEach(ele => {
  72. if (ele.floorId == el.gname) {
  73. this.floors.push({
  74. gname: el.gname,
  75. code: el.code
  76. })
  77. }
  78. })
  79. })
  80. }
  81. console.log(this.floors)
  82. })
  83. }
  84. },
  85. mounted() {
  86. // this.getFloorData()
  87. // this.$refs.floorMap.init(this.floorInfo.gname)
  88. }
  89. }
  90. </script>
  91. <style lang="less">
  92. .fenbu-box {
  93. display: flex;
  94. height: 100%;
  95. justify-content: center;
  96. align-items: center;
  97. .legend-boxs {
  98. position: fixed;
  99. z-index: 9;
  100. right: 32px;
  101. top: 155px;
  102. }
  103. .additional-box {
  104. position: relative;
  105. .additional {
  106. width: 44px;
  107. height: 44px;
  108. background: rgba(255, 255, 255, 1);
  109. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  110. border-radius: 2px;
  111. position: fixed;
  112. right: 32px;
  113. top: 420px;
  114. z-index: 2;
  115. display: flex;
  116. justify-content: center;
  117. align-items: center;
  118. cursor: pointer;
  119. img {
  120. width: 20px;
  121. height: 20px;
  122. }
  123. }
  124. .add-img {
  125. width: 560px;
  126. height: 325px;
  127. background: #ffffff;
  128. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  129. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  130. border-radius: 2px;
  131. border: 1px solid #e4e5e7;
  132. position: absolute;
  133. right: 77px;
  134. top: 93px;
  135. z-index: 2;
  136. }
  137. }
  138. .nodata {
  139. height: calc(100%-50px);
  140. .img1 {
  141. width: 126px;
  142. height: 121px;
  143. }
  144. .no-img {
  145. font-size: 16px;
  146. font-family: MicrosoftYaHei;
  147. color: rgba(100, 108, 115, 1);
  148. margin-top: 8px;
  149. }
  150. }
  151. }
  152. </style>