index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class='floorFunc-box'>
  3. <div class='eq-title'>
  4. <span>{{floorInfo.code}}</span>
  5. </div>
  6. <!-- 图例 -->
  7. <div class='legend-boxs'>
  8. <Legend></Legend>
  9. </div>
  10. <floor-list @emitFloor='emitFloor'></floor-list>
  11. <div class='additional-box'>
  12. <div class='additional' @click='additionalColl'>
  13. <img src='../../assets/imgs/bg.png' alt />
  14. </div>
  15. <el-collapse-transition>
  16. <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
  17. </el-collapse-transition>
  18. </div>
  19. <floorMap ref='floorMap'></floorMap>
  20. </div>
  21. </template>
  22. <script>
  23. import floorMap from '@/components/floorMap/index.vue'
  24. import floorList from '@/components/floorList.vue'
  25. export default {
  26. components: { floorMap, floorList },
  27. data() {
  28. return {
  29. show: false,
  30. floorInfo: {
  31. gname: 'f1',
  32. code: 'F1'
  33. }
  34. }
  35. },
  36. methods: {
  37. emitFloor(item) {
  38. this.floorInfo = item
  39. // this.$refs.floorMap.init(this.floorInfo.gname)
  40. },
  41. additionalColl() {
  42. this.show = !this.show
  43. }
  44. },
  45. mounted() {
  46. // this.$refs.floorMap.init(this.floorInfo.gname)
  47. }
  48. }
  49. </script>
  50. <style lang="less">
  51. .floorFunc-box {
  52. background: rgba(242, 245, 247, 1);
  53. height: calc(100vh - 48px);
  54. flex: 1;
  55. .eq-title {
  56. position: fixed;
  57. z-index: 2;
  58. top: 92px;
  59. left: 242px;
  60. width: 140px;
  61. height: 32px;
  62. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  63. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  64. color: #025baa;
  65. font-size: 16px;
  66. &::before {
  67. width: 2px;
  68. height: 16px;
  69. background: rgba(2, 91, 170, 1);
  70. display: inline-block;
  71. content: '';
  72. margin-right: 10px;
  73. margin-top: 8px;
  74. }
  75. }
  76. .legend-boxs {
  77. position: fixed;
  78. z-index: 9;
  79. right: 32px;
  80. top: 155px;
  81. }
  82. .additional-box {
  83. position: relative;
  84. .additional {
  85. width: 44px;
  86. height: 44px;
  87. background: rgba(255, 255, 255, 1);
  88. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  89. border-radius: 2px;
  90. position: fixed;
  91. right: 32px;
  92. top: 420px;
  93. z-index: 2;
  94. display: flex;
  95. justify-content: center;
  96. align-items: center;
  97. cursor: pointer;
  98. img {
  99. width: 20px;
  100. height: 20px;
  101. }
  102. }
  103. .add-img {
  104. width: 560px;
  105. height: 325px;
  106. background: #ffffff;
  107. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  108. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  109. border-radius: 2px;
  110. border: 1px solid #e4e5e7;
  111. position: absolute;
  112. right: 77px;
  113. top: 93px;
  114. z-index: 2;
  115. }
  116. }
  117. }
  118. </style>