index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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. import { queryPic } from '@/api/public.js'
  42. import { queryGlams, querygcfzyfhz, queryfzyfchange } from '@/api/other.js'
  43. export default {
  44. data() {
  45. return {
  46. matter,
  47. floors,
  48. everySystem: [],
  49. matterId: 1,
  50. systemName: '供电系统',
  51. floorInfo: {
  52. floorName: 'F1',
  53. floorId: 'f1'
  54. },
  55. dialogInfo: {}
  56. }
  57. },
  58. components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
  59. methods: {
  60. tabSyatem(item) {
  61. this.matterId = item.id
  62. this.everySystem = item.children
  63. console.log(this.everySystem)
  64. this.systemName = item.name
  65. },
  66. emitFloor(item) {
  67. this.floorInfo = item
  68. },
  69. dialogVisible(item) {
  70. console.log(item)
  71. this.$refs.gcfzDialog.showModal(item)
  72. },
  73. queryPicter() {
  74. let getParams = {
  75. data: { tyepcode: 2, floor: '4F', plazaId: '1001145' },
  76. params: {}
  77. }
  78. queryPic(getParams).then(res => {
  79. console.log('resres', res)
  80. })
  81. }
  82. },
  83. mounted() {
  84. this.everySystem = this.matter[0].children
  85. this.queryPicter()
  86. console.log(this.everySystem)
  87. }
  88. }
  89. </script>
  90. <style lang="less" scoped>
  91. .other {
  92. background: rgba(242, 245, 247, 1);
  93. height: 100%;
  94. overflow: hidden;
  95. .other-top {
  96. margin-top: 24px;
  97. position: fixed;
  98. text-align: center;
  99. width: 100%;
  100. z-index: 2;
  101. .other-system {
  102. padding: 12px 23px;
  103. color: #1f2429;
  104. background: #fff;
  105. font-size: 16px;
  106. cursor: pointer;
  107. vertical-align: bottom;
  108. img {
  109. width: 16px;
  110. height: 16px;
  111. margin-right: 4px;
  112. margin-bottom: 3px;
  113. }
  114. }
  115. .isActive {
  116. color: #025baa;
  117. }
  118. }
  119. .other-bottom {
  120. display: flex;
  121. .other-left {
  122. position: fixed;
  123. z-index: 2;
  124. padding-top: 100px;
  125. color: #646c73;
  126. font-size: 14px;
  127. }
  128. .li-style {
  129. padding: 0 0 18px 35px;
  130. cursor: pointer;
  131. .circle {
  132. width: 6px;
  133. height: 6px;
  134. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  135. border-radius: 50%;
  136. display: inline-block;
  137. margin-right: 10px;
  138. }
  139. }
  140. .other-right {
  141. margin-top: 24px;
  142. flex: 1;
  143. }
  144. .legend-box {
  145. position: fixed;
  146. right: 32px;
  147. top: 155px;
  148. }
  149. }
  150. .qtfugl {
  151. img {
  152. width: 100%;
  153. height: 100%;
  154. margin: 0 auto;
  155. }
  156. }
  157. }
  158. </style>