fenbuPic.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <div class='fenbu-box'>
  3. <!-- 图例 -->
  4. <div class='legend-boxs'>
  5. <Legend :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
  6. </div>
  7. <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
  8. <div v-if='floors.length>0'>
  9. <floorMap ref='floorMap' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
  10. </div>
  11. <div class='nodata' v-show='floors.length==0'>
  12. <img class='img1' src='@/assets/imgs/wtp.png' alt />
  13. <div class='no-img'>暂无分布图,请手动绘制</div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import floorMap from '@/components/floorMap/index.vue'
  19. import floorList from '@/components/floorList.vue'
  20. import { mapGetters } from 'vuex'
  21. import { queryPics } from '@/api/legendLibrary.js'
  22. export default {
  23. components: { floorMap, floorList },
  24. data() {
  25. return {
  26. show: false,
  27. floorInfo: {
  28. gname: 'f1',
  29. code: 'F1'
  30. },
  31. loadName: '',
  32. type: '',
  33. floors: []
  34. }
  35. },
  36. props: ['typecode'],
  37. computed: {
  38. ...mapGetters(['floorsArr'])
  39. },
  40. methods: {
  41. emitFloor(item) {
  42. console.log(item)
  43. this.floorInfo = item
  44. this.$refs.floorMap.init(this.floorInfo.gname)
  45. },
  46. additionalColl() {
  47. this.show = !this.show
  48. },
  49. getFloorData() {
  50. let postParams = {
  51. Distinct: true,
  52. <<<<<<< HEAD
  53. Filters: `projectId =${this.$store.state.plazaId}; categoryId='XFBFYCFL';isPub=true`,
  54. =======
  55. Filters: `projectId =${this.$store.state.plazaId};categoryId='XTYLT';isPub=true`,
  56. >>>>>>> 4fc95b05ad81abc33c44ac2be3ffca29d9da58fe
  57. PageNumber: 1,
  58. PageSize: 500,
  59. Projection: ['floorId']
  60. }
  61. if (this.typecode == 'FBT1') {
  62. postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='FZQZL';isPub=true`
  63. }
  64. if (this.typecode == 'FBT2') {
  65. postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='XFBFYCFL';isPub=true`
  66. }
  67. let floor = []
  68. queryPics({ postParams }).then(res => {
  69. console.log(res)
  70. if (res.Total == 0) {
  71. this.floors = []
  72. } else {
  73. floor = res.Content
  74. this.floorsArr.forEach(el => {
  75. floor.forEach(ele => {
  76. if (ele.FloorId == el.gname) {
  77. console.log(el)
  78. this.floors.push({
  79. gname: el.gname,
  80. gcode: el.gcode,
  81. name: el.name,
  82. code: el.code,
  83. seq: el.seq
  84. })
  85. }
  86. })
  87. })
  88. }
  89. console.log(this.floors)
  90. this.floorInfo = this.floors[0]
  91. console.log(this.floorInfo.gname)
  92. this.$refs.floorMap.init(this.floorInfo.gname)
  93. this.init()
  94. })
  95. },
  96. init() {
  97. this.loadName = `${this.floorInfo.code}`
  98. }
  99. },
  100. mounted() {
  101. console.log(this.floorsArr)
  102. this.getFloorData()
  103. }
  104. }
  105. </script>
  106. <style lang="less">
  107. .fenbu-box {
  108. display: flex;
  109. height: 100%;
  110. justify-content: center;
  111. align-items: center;
  112. .legend-boxs {
  113. position: fixed;
  114. z-index: 9;
  115. right: 32px;
  116. top: 155px;
  117. }
  118. .nodata {
  119. height: calc(100%-50px);
  120. .img1 {
  121. width: 126px;
  122. height: 121px;
  123. }
  124. .no-img {
  125. font-size: 16px;
  126. font-family: MicrosoftYaHei;
  127. color: rgba(100, 108, 115, 1);
  128. margin-top: 8px;
  129. }
  130. }
  131. }
  132. </style>