index.vue 2.4 KB

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