index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <div class='other'>
  3. <div class='other-top'>
  4. <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  5. <img :src='item.id==matterId?item.icon1:item.icon' alt />
  6. {{item.name}}
  7. </span>
  8. </div>
  9. <div class='other-bottom' v-if='matterId!=1'>
  10. <div class='other-left'>
  11. <ul>
  12. <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
  13. <span class='circle'></span>
  14. {{item.label}}
  15. </li>
  16. </ul>
  17. </div>
  18. <!-- 楼层 -->
  19. <div class='other-right' v-if='matterId!=1'>
  20. <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
  21. </div>
  22. <!-- 图例 -->
  23. <div class='legend-box' v-if='matterId!=1'>
  24. <Legend></Legend>
  25. </div>
  26. </div>
  27. <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
  28. <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
  29. <div class='qtfugl' v-if='matterId==2'>
  30. <img src='../../assets/imgs/matter_floorB2.png' alt />
  31. </div>
  32. <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
  33. </div>
  34. </template>
  35. <script>
  36. import floorList from '@/components/floorList.vue'
  37. import OtherDialog from './otherDialog'
  38. import { matter, floors } from '@/utils/plugins/components.js'
  39. import ZhsxOther from './zhsxOther'
  40. import GcfzDialog from './gcfzDialog'
  41. export default {
  42. data() {
  43. return {
  44. matter,
  45. floors,
  46. everySystem: [],
  47. matterId: 1,
  48. systemName: '供电系统',
  49. floorInfo: {
  50. floorName: 'F1',
  51. floorId: 'f1'
  52. },
  53. dialogInfo: {}
  54. }
  55. },
  56. components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
  57. methods: {
  58. tabSyatem(item) {
  59. this.matterId = item.id
  60. this.everySystem = item.children
  61. console.log(this.everySystem)
  62. this.systemName = item.name
  63. },
  64. emitFloor(item) {
  65. this.floorInfo = item
  66. },
  67. dialogVisible(item) {
  68. console.log(item)
  69. this.$refs.gcfzDialog.showModal(item)
  70. }
  71. },
  72. mounted() {
  73. this.everySystem = this.matter[0].children
  74. console.log(this.everySystem)
  75. }
  76. }
  77. </script>
  78. <style lang="less" scoped>
  79. .other {
  80. background: rgba(242, 245, 247, 1);
  81. height: 100%;
  82. overflow: hidden;
  83. .other-top {
  84. margin-top: 24px;
  85. position: fixed;
  86. text-align: center;
  87. width: 100%;
  88. z-index: 2;
  89. .other-system {
  90. padding: 12px 23px;
  91. color: #1f2429;
  92. background: #fff;
  93. font-size: 16px;
  94. cursor: pointer;
  95. vertical-align: bottom;
  96. img {
  97. width: 16px;
  98. height: 16px;
  99. margin-right: 4px;
  100. margin-bottom: 3px;
  101. }
  102. }
  103. .isActive {
  104. color: #025baa;
  105. }
  106. }
  107. .other-bottom {
  108. display: flex;
  109. .other-left {
  110. position: fixed;
  111. z-index: 2;
  112. padding-top: 100px;
  113. color: #646c73;
  114. font-size: 14px;
  115. }
  116. .li-style {
  117. padding: 0 0 18px 35px;
  118. cursor: pointer;
  119. .circle {
  120. width: 6px;
  121. height: 6px;
  122. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  123. border-radius: 50%;
  124. display: inline-block;
  125. margin-right: 10px;
  126. }
  127. }
  128. .other-right {
  129. margin-top: 24px;
  130. flex: 1;
  131. }
  132. .legend-box {
  133. position: fixed;
  134. right: 32px;
  135. top: 155px;
  136. }
  137. }
  138. .qtfugl {
  139. img {
  140. width: 100%;
  141. height: 100%;
  142. margin: 0 auto;
  143. }
  144. }
  145. }
  146. </style>