index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <div class='floorFunc-box'>
  3. <div class='lcgn-title'>
  4. <span class='span1'>{{floorInfo.code}}</span>
  5. </div>
  6. <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
  7. <!-- 图例 -->
  8. <div class='legend-boxs'>
  9. <Legend :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层楼层功能平面图`'></Legend>
  10. <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. import floorMap from '@/components/floorMap/index.vue'
  16. import floorList from '@/components/floorList.vue'
  17. import { mapGetters } from 'vuex'
  18. export default {
  19. components: { floorMap, floorList },
  20. data() {
  21. return {
  22. show: true,
  23. floorInfo: {},
  24. loadName: '',
  25. type: '',
  26. }
  27. },
  28. computed: {
  29. ...mapGetters(['floorsArr', 'floorObj']),
  30. },
  31. methods: {
  32. emitFloor(item) {
  33. console.log(item)
  34. this.floorInfo = item
  35. this.$refs.floorMap.init(this.floorInfo.gname)
  36. this.init()
  37. },
  38. additionalColl() {
  39. this.show = !this.show
  40. },
  41. init() {
  42. this.loadName = `楼层功能-${this.floorInfo.code}`
  43. console.log(this.floorsArr.length)
  44. console.log(this.$cookie.get('currentFloorId'))
  45. if (this.floorsArr.length > 0 && this.$cookie.get('currentFloorId')) {
  46. this.floorInfo = this.floorsArr.find((item) => {
  47. return this.$cookie.get('currentFloorId') == item.seq
  48. })
  49. } else {
  50. }
  51. },
  52. },
  53. mounted() {
  54. console.log(this.floorInfo)
  55. this.init()
  56. this.$refs.floorMap.init(this.floorInfo.gname)
  57. },
  58. }
  59. </script>
  60. <style lang="less">
  61. .floorFunc-box {
  62. background: rgba(242, 245, 247, 1);
  63. height: calc(100vh - 48px);
  64. flex: 1;
  65. .lcgn-title {
  66. position: fixed;
  67. z-index: 2;
  68. display: block;
  69. top: 120px;
  70. left: 146px;
  71. width: 140px;
  72. height: 32px;
  73. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  74. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  75. color: #025baa;
  76. font-size: 16px;
  77. &::before {
  78. width: 2px;
  79. height: 16px;
  80. background: rgba(2, 91, 170, 1);
  81. display: inline-block;
  82. content: '';
  83. margin-right: 10px;
  84. margin-top: 8px;
  85. }
  86. .span1 {
  87. position: absolute;
  88. top: 3px;
  89. }
  90. }
  91. .legend-boxs {
  92. position: fixed;
  93. z-index: 9;
  94. right: 32px;
  95. top: 142px;
  96. }
  97. }
  98. </style>