LowVoltageCabinetDetail.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <div class='low-voltage-cabinet-detail'>
  3. <!-- 顶部条 -->
  4. <van-nav-bar :title='drawernum' left-arrow @click-left='backPage'></van-nav-bar>
  5. <!-- 搜索框 -->
  6. <div class='equipment-search-container'>
  7. <!-- TODO: 配电室名称 -->
  8. <van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
  9. </div>
  10. <div class='card-container'>
  11. <swiper class='swiper' :options='swiperOption'>
  12. <swiper-slide>1-2AA1-11</swiper-slide>
  13. <swiper-slide>1-2AA1-112</swiper-slide>
  14. <swiper-slide>1-2AA1-113</swiper-slide>
  15. <swiper-slide>1-2AA1-114</swiper-slide>
  16. <swiper-slide>1-2AA1-115</swiper-slide>
  17. <swiper-slide>1-2AA1-116</swiper-slide>
  18. <swiper-slide>1-2AA1-117</swiper-slide>
  19. <swiper-slide>1-2AA1-118</swiper-slide>
  20. <swiper-slide>1-2AA1-119</swiper-slide>
  21. <swiper-slide>1-2AA1-1110</swiper-slide>
  22. <swiper-slide>1-2AA1-1111</swiper-slide>
  23. <swiper-slide>1-2AA1-1112</swiper-slide>
  24. <swiper-slide>1-2AA1-1113</swiper-slide>
  25. <swiper-slide>1-2AA1-1114</swiper-slide>
  26. <swiper-slide>1-2AA1-1115</swiper-slide>
  27. <swiper-slide>1-2AA1-1116</swiper-slide>
  28. <swiper-slide>1-2AA1-1117</swiper-slide>
  29. <swiper-slide>1-2AA1-1118</swiper-slide>
  30. <swiper-slide>1-2AA1-1119</swiper-slide>
  31. <swiper-slide>1-2AA1-1120</swiper-slide>
  32. <div class='swiper-pagination' slot='pagination'></div>
  33. </swiper>
  34. </div>
  35. <div class='info-container'>
  36. <div class='border'></div>
  37. <div class='info'>
  38. <div class='label'>出线规格:</div>
  39. <div class='value'>{{outspec}}</div>
  40. </div>
  41. <div class='info'>
  42. <div class='label'>楼 层:</div>
  43. <div class='value'>{{floor}}</div>
  44. </div>
  45. <div class='info'>
  46. <div class='label'>电井编号:</div>
  47. <div class='value'>{{wellnum}}</div>
  48. </div>
  49. <div class='info'>
  50. <div class='label'>电箱编号:</div>
  51. <div class='value'>{{boxnum}}</div>
  52. </div>
  53. <div class='info'>
  54. <div class='label'>供电容量:</div>
  55. <div class='value'>{{capacitynum}} kw</div>
  56. </div>
  57. <div class='info'>
  58. <div class='label'>控制回路:</div>
  59. <div class='value'>{{control}}</div>
  60. </div>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. /**
  66. * 配电室低压柜及出线明细
  67. */
  68. import Vue from 'vue'
  69. import { NavBar, Search } from 'vant'
  70. Vue.use(NavBar).use(Search)
  71. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  72. import 'swiper/swiper-bundle.css'
  73. export default {
  74. name: 'LowVoltageCabinetDetail',
  75. props: {},
  76. components: {
  77. Swiper,
  78. SwiperSlide,
  79. },
  80. directives: {
  81. swiper: directive,
  82. },
  83. data() {
  84. return {
  85. keyword: '',
  86. swiperOption: {
  87. slidesPerView: 3,
  88. // slidesPerGroup: 3,
  89. slidesPerColumn: 5,
  90. spaceBetween: 10,
  91. slidesPerColumnFill: 'row',
  92. pagination: {
  93. el: '.swiper-pagination',
  94. clickable: true,
  95. },
  96. // autoplay: {
  97. // //自动播放
  98. // delay: 1500,
  99. // disableOnInteraction: false,
  100. // },
  101. // speed: 1500, //播放速度
  102. },
  103. control: '',
  104. drawernum: '',
  105. floor: '',
  106. glsms_proimgupid: '',
  107. outspec: '',
  108. wellnum: '',
  109. boxnum: '',
  110. capacitynum: '',
  111. }
  112. },
  113. computed: {},
  114. created() {
  115. this.control = '步行街分区2中庭用电'
  116. this.drawernum = '1-5AA-2'
  117. this.floor = '1F'
  118. this.glsms_proimgupid = 37206
  119. this.outspec = '4*150+1*70'
  120. },
  121. beforeMount() {},
  122. mounted() {},
  123. methods: {
  124. backPage() {
  125. this.$router.go(-1)
  126. },
  127. onSearch() {},
  128. },
  129. }
  130. </script>
  131. <style lang='less' scoped>
  132. .low-voltage-cabinet-detail {
  133. width: 100%;
  134. height: 100%;
  135. background-color: #f5f6f7;
  136. // 返回箭头修改
  137. /deep/ .van-nav-bar .van-icon {
  138. color: #000;
  139. }
  140. // 搜索
  141. .equipment-search-container {
  142. width: 100%;
  143. height: 55px;
  144. // background-color: #fff;
  145. text-align: center;
  146. .equipment-search {
  147. width: 80%;
  148. margin: 0 auto;
  149. background: none;
  150. }
  151. .van-search__content {
  152. background: #fff;
  153. border-radius: 50px;
  154. }
  155. }
  156. .card-container {
  157. margin-top: 12px;
  158. padding: 20px 15px 0 15px;
  159. background: #fff;
  160. .swiper {
  161. max-height: 300px;
  162. width: 100%;
  163. .swiper-slide {
  164. display: flex;
  165. justify-content: center;
  166. align-items: center;
  167. text-align: center;
  168. font-weight: bold;
  169. font-size: 14px;
  170. background: #ebeded;
  171. }
  172. }
  173. .swiper {
  174. max-height: 300px;
  175. margin-left: auto;
  176. margin-right: auto;
  177. .swiper-slide {
  178. height: 30px;
  179. }
  180. }
  181. .swiper-pagination {
  182. position: relative;
  183. bottom: 0;
  184. height: 30px;
  185. display: flex;
  186. justify-content: center;
  187. align-items: center;
  188. }
  189. }
  190. .info-container {
  191. padding: 15px;
  192. background: #fff;
  193. .border {
  194. border-top: 1px solid #e4e6e7;
  195. margin-bottom: 23px;
  196. }
  197. .info {
  198. display: flex;
  199. height: 20px;
  200. font-size: 14px;
  201. font-weight: 400;
  202. line-height: 20px;
  203. margin-bottom: 8px;
  204. }
  205. .label {
  206. color: #666;
  207. // width: 60px;
  208. // text-align: justify;
  209. // text-align-last: justify;
  210. }
  211. .value {
  212. color: #333;
  213. margin-left: 10px;
  214. flex: 1;
  215. }
  216. }
  217. }
  218. </style>