fenbuPic.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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-show='floors.length>0' class='canvas-box'>
  9. <floorMap ref='floorMap' :modalHeight='modalHeight' :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. modalHeight: 500, //适配底图
  35. }
  36. },
  37. props: ['typecode'],
  38. computed: {
  39. ...mapGetters(['floorsArr'])
  40. },
  41. mounted() {
  42. if (window.screen.width > 1366) {
  43. this.modalHeight = 700
  44. } else {
  45. this.modalHeight = 500
  46. }
  47. },
  48. methods: {
  49. emitFloor(item) {
  50. this.floorInfo = item
  51. this.$refs.floorMap.init(this.floorInfo.gname)
  52. },
  53. additionalColl() {
  54. this.show = !this.show
  55. },
  56. getFloorData() {
  57. let postParams = {
  58. Distinct: true,
  59. PageNumber: 1,
  60. PageSize: 500,
  61. Projection: ['floorId']
  62. }
  63. if (this.typecode == 'FBT1') {
  64. postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='FZQZL';isPub=true`
  65. }
  66. if (this.typecode == 'FBT2') {
  67. postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='XFBFYCFL';isPub=true`
  68. }
  69. let floor = []
  70. this.floors = []
  71. queryPics({ postParams }).then(res => {
  72. if (res.Total == 0) {
  73. this.floors = []
  74. } else {
  75. floor = res.Content
  76. this.floorsArr.forEach(el => {
  77. floor.forEach(ele => {
  78. if (ele.FloorId == el.gname) {
  79. this.floors.push({
  80. gname: el.gname,
  81. gcode: el.gcode,
  82. name: el.name,
  83. code: el.code,
  84. seq: el.seq
  85. })
  86. }
  87. })
  88. })
  89. }
  90. this.floorInfo = this.floors[0]
  91. this.init()
  92. })
  93. },
  94. init() {
  95. this.loadName = `${this.floorInfo.code}`
  96. },
  97. openFloorMap() {
  98. this.getFloorData()
  99. this.$refs.floorMap.init(this.floorInfo.gname)
  100. }
  101. }
  102. }
  103. </script>
  104. <style lang="less">
  105. .fenbu-box {
  106. display: flex;
  107. height: 100%;
  108. justify-content: center;
  109. align-items: center;
  110. .legend-boxs {
  111. position: fixed;
  112. z-index: 9;
  113. right: 32px;
  114. top: 155px;
  115. }
  116. .canvas-box {
  117. width: 100%;
  118. height: 100%;
  119. }
  120. .nodata {
  121. height: calc(100%-50px);
  122. .img1 {
  123. width: 126px;
  124. height: 121px;
  125. }
  126. .no-img {
  127. font-size: 16px;
  128. font-family: MicrosoftYaHei;
  129. color: rgba(100, 108, 115, 1);
  130. margin-top: 8px;
  131. }
  132. }
  133. }
  134. </style>