index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div id='equipment'>
  3. <div class='eq-top'>
  4. <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  5. <img :src='item.id==systemId?item.icon1:item.icon' />
  6. {{item.name}}
  7. </span>
  8. </div>
  9. <div class='eq-bottom'>
  10. <div class='eq-left'>
  11. <ul>
  12. <li
  13. class='li-style'
  14. :class='{"is-active": eve.id}'
  15. v-for='(eve,index) in everySystem'
  16. :key='"o"+index'
  17. @click='dialogVisible(eve)'
  18. >
  19. <span class='circle'></span>
  20. {{eve.label}}
  21. </li>
  22. </ul>
  23. </div>
  24. <div class='eq-right'>
  25. <div class='eq-right-bottom'>
  26. <div class='eq-title'>
  27. <span>{{floorInfo.floorName}}</span>
  28. </div>
  29. <div class='eq-content'>
  30. <floorMap ref='floorMap'></floorMap>
  31. <bottomLayer></bottomLayer>
  32. </div>
  33. <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
  34. </div>
  35. </div>
  36. <editList></editList>
  37. </div>
  38. <eq-dialog ref='dialog' :systemName='systemName'></eq-dialog>
  39. </div>
  40. </template>
  41. <script>
  42. import floorList from '@/components/floorList.vue'
  43. import floorMap from '@/components/floorMap/index.vue'
  44. import eqDialog from './eqDialog'
  45. import bottomLayer from './bottomLayer'
  46. import editList from '@/components/edit.vue'
  47. import { system, floors } from '@/utils/plugins/components.js'
  48. import { getFloorList } from '@/api/public.js'
  49. export default {
  50. data() {
  51. return {
  52. system,
  53. floors,
  54. everySystem: [],
  55. systemId: 1,
  56. systemName: '供电系统',
  57. floorInfo: {
  58. floorName: 'F1',
  59. floorId: 'f1'
  60. },
  61. dialogInfo: {}
  62. }
  63. },
  64. components: { floorList, eqDialog, floorMap, bottomLayer, editList },
  65. methods: {
  66. tabSyatem(item) {
  67. this.systemId = item.id
  68. ;(this.everySystem = item.children), (this.systemName = item.name)
  69. },
  70. emitFloor(item) {
  71. this.floorInfo = item
  72. this.$refs.floorMap.init()
  73. },
  74. dialogVisible(eve) {
  75. console.log(eve)
  76. this.$refs.dialog.showModal(eve)
  77. // this.dialogInfo = eve
  78. }
  79. },
  80. mounted() {
  81. this.everySystem = this.system[0].children
  82. // this.$refs.floorMap.init()
  83. getFloorList({ plazaId: '964' }).then(res => {
  84. console.log('12313', res)
  85. })
  86. // this.$refs.dialog.init()
  87. // this.$refs.floorMap.init()
  88. }
  89. }
  90. </script>
  91. <style lang="less" scoped>
  92. #equipment {
  93. background: rgba(242, 245, 247, 1);
  94. display: flex;
  95. flex: 1;
  96. .eq-top {
  97. margin-left: 240px;
  98. padding-top: 24px;
  99. position: fixed;
  100. z-index: 3;
  101. min-width: 1300px;
  102. .eq-system {
  103. padding: 12px 23px;
  104. color: #1f2429;
  105. background: #fff;
  106. font-size: 16px;
  107. cursor: pointer;
  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. .eq-bottom {
  120. display: flex;
  121. flex: 1;
  122. .eq-left {
  123. position: fixed;
  124. z-index: 2;
  125. // width: 196px;
  126. padding-top: 100px;
  127. color: #646c73;
  128. font-size: 14px;
  129. height: 100%;
  130. // background: rgba(242, 245, 247, 1);
  131. }
  132. .li-style {
  133. padding: 0 0 18px 35px;
  134. cursor: pointer;
  135. .circle {
  136. width: 6px;
  137. height: 6px;
  138. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  139. border-radius: 50%;
  140. display: inline-block;
  141. margin-right: 10px;
  142. }
  143. }
  144. .is-active {
  145. // background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  146. }
  147. .eq-right {
  148. flex: 1;
  149. .eq-right-bottom {
  150. display: flex;
  151. flex: 1;
  152. .eq-title {
  153. position: fixed;
  154. z-index: 2;
  155. top: 146px;
  156. left: 242px;
  157. width: 141px;
  158. height: 32px;
  159. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  160. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  161. color: #025baa;
  162. font-size: 16px;
  163. &::before {
  164. width: 2px;
  165. height: 16px;
  166. background: rgba(2, 91, 170, 1);
  167. display: inline-block;
  168. content: '';
  169. margin-right: 10px;
  170. margin-top: 8px;
  171. }
  172. }
  173. .eq-content {
  174. flex: 1;
  175. }
  176. }
  177. }
  178. }
  179. }
  180. </style>