LowVoltageCabinet.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  1. <template>
  2. <div class='low-voltage-cabinet'>
  3. <!-- 顶部条 -->
  4. <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
  5. <template #right>
  6. <i class='iconfont wanda-scan'></i>
  7. </template>
  8. </van-nav-bar>
  9. <!-- 搜索框 -->
  10. <div class='equipment-search-container'>
  11. <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
  12. </div>
  13. <!-- 配电室 -->
  14. <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
  15. <van-list
  16. class='switch-room-container'
  17. :class='{"one-list":list.length === 1}'
  18. v-model='loading'
  19. :finished='finished'
  20. @load='onLoad'
  21. finished-text
  22. >
  23. <div class='switch-room' v-for='(item,index) in list' :key='index'>
  24. <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
  25. <!-- 一个低压柜信息 -->
  26. <div class='info-container'>
  27. <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.data' :key='dIndex'>{{detail.drawernum}}</div>
  28. <!-- 加载更多 -->
  29. <div class='load-more-container'>
  30. <div
  31. class='load-more'
  32. v-show='item.loadMore && item.data && item.data.length >= innerSize'
  33. @click='locationLoadMore(item,index)'
  34. >加载更多</div>
  35. </div>
  36. <van-list
  37. class='more-list'
  38. v-model='item.loading'
  39. v-show='!item.loadMore && item.list && item.list.length'
  40. :finished='item.finished'
  41. :immediate-check='false'
  42. @load='locationOnLoad(item,index)'
  43. finished-text='没有更多了'
  44. >
  45. <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.list' :key='dIndex'>{{detail.drawernum}}</div>
  46. </van-list>
  47. </div>
  48. <div class='bottom'>
  49. <div class='divider'></div>
  50. </div>
  51. </div>
  52. </van-list>
  53. <!-- 点击头部筛选,出现的右侧弹窗 -->
  54. <van-popup class='m-popup-container' v-model='showPopup' position='right'>
  55. <div class='m-popup'>
  56. <!-- 系统 -->
  57. <div class='system'>
  58. <h1 class='title'>配电室</h1>
  59. <div class='system-btn-container'>
  60. <div class='system-btn' v-for='(item,index) in systemList' :key='index'>
  61. <van-button class='m-btn' :class='item.active' @click='changeSwitchRoom(item)'>{{item.text}}</van-button>
  62. </div>
  63. </div>
  64. </div>
  65. <div class='footer'>
  66. <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
  67. <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
  68. </div>
  69. </div>
  70. </van-popup>
  71. <!-- 无数据 -->
  72. <van-empty class='m-empty' v-if='finished &&(!list.length || noDataFlag)' description='暂无数据'>
  73. <template #image>
  74. <img class='no-data' src='../../assets/images/search_null.png' alt />
  75. </template>
  76. </van-empty>
  77. </div>
  78. </template>
  79. <script>
  80. /**
  81. * 配电室低压柜及出线明细
  82. */
  83. import Vue from 'vue'
  84. import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
  85. Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
  86. import { mapGetters } from 'vuex'
  87. import { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
  88. import { sleep } from '@/utils/util'
  89. import { cloneDeep } from 'lodash'
  90. export default {
  91. name: 'LowVoltageCabinet',
  92. props: {},
  93. components: {},
  94. data() {
  95. return {
  96. mock: 2,
  97. title: '配电室低压柜及出线明细',
  98. keyword: '',
  99. page: 1,
  100. size: 5,
  101. innerSize: 15,
  102. list: [],
  103. loading: false,
  104. finished: false,
  105. noDataFlag: false,
  106. showPopup: false,
  107. systemList: [{ text: '全部', location: '全部', active: 'active' }],
  108. modalData: {
  109. location: '全部',
  110. },
  111. modalDataBak: {
  112. location: '全部',
  113. },
  114. }
  115. },
  116. computed: {
  117. ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  118. },
  119. created() {
  120. // 查询筛选条件(右弹窗)
  121. this.getFilterList()
  122. // this.onLoad()
  123. },
  124. beforeMount() {},
  125. mounted() {},
  126. methods: {
  127. backPage() {
  128. this.$router.go(-1)
  129. },
  130. /**
  131. *
  132. */
  133. async onLoad() {
  134. console.log('onLoad')
  135. if (this.page > 1) {
  136. // await sleep(1000)
  137. }
  138. await this.getList()
  139. // list无数据,不执行后续分页查询
  140. console.log(this.list)
  141. console.log(this.count)
  142. if (!this.list.length) {
  143. this.finished = true
  144. this.loading = false
  145. return true
  146. }
  147. this.page++
  148. this.loading = false
  149. if (this.list.length >= this.count) {
  150. this.finished = true
  151. }
  152. },
  153. /**
  154. * 查询低压柜list
  155. */
  156. async getList() {
  157. let queryData = {
  158. data: {
  159. page: this.page,
  160. size: this.size,
  161. plazaId: this.plazaId,
  162. },
  163. postParams: {
  164. // location: '',
  165. locflList: ['5201', '5204', '5209'], //低压柜
  166. pageable: {
  167. pageNumber: 1,
  168. pageSize: this.innerSize,
  169. },
  170. },
  171. }
  172. if (this.keyword) {
  173. queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
  174. }
  175. // 筛选 配电室之后, location字段上送
  176. if (this.modalData.location && this.modalData.location !== '全部') {
  177. queryData.postParams.location = this.modalData.location
  178. }
  179. console.log(queryData)
  180. let res
  181. try {
  182. res = await queryDygjcxline(queryData)
  183. } catch (error) {
  184. console.log(error)
  185. }
  186. // mockData
  187. // res = require('./mockData').queryDygjcxlineData
  188. if (!res?.data?.data) {
  189. return false
  190. }
  191. res.data.data.map((item, index, arr) => {
  192. // console.log(item)
  193. if (item?.count >= this.innerSize || item?.data?.length >= this.innerSize) {
  194. // console.log(item)
  195. arr[index] = {
  196. ...item,
  197. loadMore: true,
  198. loading: true,
  199. finished: false,
  200. list: [],
  201. page: 2,
  202. size: this.innerSize,
  203. }
  204. } else {
  205. item.loadMore = false
  206. }
  207. if (!item.data) {
  208. item.data = []
  209. }
  210. })
  211. this.list = [...this.list, ...res.data.data]
  212. console.log('%csssss', 'color:blue')
  213. console.log(this.list)
  214. this.count = res.data.count
  215. // 是否显示无数据的标志
  216. let noDataFlag = !Boolean(this.list.filter((v) => v.data.length).length)
  217. console.log(noDataFlag)
  218. this.noDataFlag = noDataFlag
  219. },
  220. /**
  221. * 点击加载更多
  222. */
  223. locationLoadMore(item, index) {
  224. // console.log(item, index)
  225. item.loadMore = false
  226. this.$set(this.list, index, item)
  227. this.locationOnLoad(item, index)
  228. },
  229. /**
  230. * 查询一个location下的onLoad事件
  231. */
  232. async locationOnLoad({ location }, index) {
  233. console.log(location, index)
  234. let item = cloneDeep(this.list[index])
  235. console.log(item)
  236. if (item.page > 2) {
  237. // await sleep(1000)
  238. }
  239. await this.getLocationList({ location, index })
  240. // 调用接口后的item
  241. let currentItem = cloneDeep(this.list[index])
  242. // list无数据,不执行后续分页查询
  243. if (!currentItem.list.length) {
  244. currentItem.finished = true
  245. return true
  246. }
  247. currentItem.page++
  248. currentItem.finished = false
  249. currentItem.loading = false
  250. if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
  251. currentItem.finished = true
  252. }
  253. this.$set(this.list, index, currentItem)
  254. },
  255. /**
  256. * 查询一个location下的设备
  257. */
  258. async getLocationList(item) {
  259. console.log('=========')
  260. console.log('=========')
  261. console.log('=========')
  262. console.log('=========')
  263. console.log('=========')
  264. console.log('=========')
  265. console.log('getLocationList')
  266. console.log(item)
  267. const { location, index } = item
  268. let currentList = cloneDeep(this.list[index])
  269. console.log(currentList)
  270. console.log('getLocationList')
  271. let queryData = {
  272. data: {
  273. page: Math.ceil((index + 1) / this.size), // 当前出线柜,所在的页码
  274. size: currentList.size,
  275. plazaId: this.plazaId,
  276. },
  277. postParams: {
  278. locflList: ['5201', '5204', '5209'], //低压柜
  279. location: item.location,
  280. pageable: {
  281. pageNumber: currentList.page,
  282. pageSize: this.innerSize,
  283. },
  284. },
  285. }
  286. if (this.keyword) {
  287. queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
  288. }
  289. // 筛选 配电室之后, location字段上送
  290. console.log(queryData)
  291. let res
  292. try {
  293. res = await queryDygjcxline(queryData)
  294. } catch (error) {
  295. console.log(error)
  296. }
  297. // mockData
  298. // res = require('./mockData').queryDygjcxlineData1
  299. console.log('=============')
  300. console.log(res)
  301. console.log('=============')
  302. if (!res?.data?.data[0]?.data) {
  303. return false
  304. }
  305. currentList.list = [...currentList.list, ...res.data.data[0].data]
  306. this.$set(this.list, index, currentList)
  307. console.log('====================')
  308. console.log(this.list)
  309. console.log('====================')
  310. },
  311. /**
  312. * 查询筛选条件
  313. */
  314. async getFilterList() {
  315. let queryData = {
  316. data: {
  317. // page: this.page,
  318. // size: this.size,
  319. plazaId: this.plazaId,
  320. },
  321. postParams: {
  322. locflList: ['5201', '5204', '5209'], //低压柜
  323. // location: '',
  324. // system_code: this.smsxt,
  325. },
  326. }
  327. if (this.smsxt) {
  328. queryData.postParams.system_code = this.smsxt
  329. }
  330. let res = await querySmsLocation(queryData)
  331. console.log(res)
  332. if (!res?.data?.data) {
  333. this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
  334. return false
  335. }
  336. let data = res?.data?.data || []
  337. data.map((item) => {
  338. item.text = item.wzjc
  339. item.active = ''
  340. })
  341. console.log(data)
  342. this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
  343. },
  344. /**
  345. * 显示详情
  346. */
  347. showDetail(detail) {
  348. console.log(detail)
  349. this.$router.push({ name: 'LowVoltageCabinetDetail', params: { ...detail } })
  350. },
  351. /**
  352. * 点击右侧筛选
  353. */
  354. handleRightClick() {
  355. this.showPopup = true
  356. // 设置选中的专业系统
  357. },
  358. onSearch() {
  359. // 初始化数据,查询列表
  360. this.initData()
  361. this.onLoad()
  362. },
  363. /**
  364. * popup 更改配电室
  365. */
  366. changeSwitchRoom(data) {
  367. let systemList = this.systemList
  368. systemList.map((item) => {
  369. item.active = ''
  370. if (item.location === data.location) {
  371. item.active = 'active'
  372. }
  373. })
  374. // 弹窗选中的系统
  375. this.$set(this.modalDataBak, 'location', data.location)
  376. },
  377. /**
  378. * 重置
  379. */
  380. reset() {
  381. this.modalDataBak = {
  382. location: '全部',
  383. }
  384. this.modalData = {
  385. location: '全部',
  386. }
  387. let { systemList } = this
  388. systemList.map((item) => {
  389. item.active = ''
  390. if (item.text === '全部') {
  391. item.active = 'active'
  392. }
  393. })
  394. this.systemList = systemList
  395. this.showPopup = false
  396. // 初始化数据,查询列表
  397. this.initData()
  398. this.onLoad()
  399. },
  400. /**
  401. * 弹窗确认
  402. */
  403. confirm() {
  404. this.modalData = cloneDeep(this.modalDataBak)
  405. this.showPopup = false
  406. // 初始化数据,查询列表
  407. this.initData()
  408. this.onLoad()
  409. },
  410. /**
  411. * 初始化数据,查询列表
  412. */
  413. initData() {
  414. // this.finished = false
  415. // this.loading = false
  416. this.noDataFlag = false
  417. this.page = 1
  418. this.count = 0
  419. this.list = []
  420. },
  421. },
  422. }
  423. </script>
  424. <style lang='less' scoped>
  425. .low-voltage-cabinet {
  426. width: 100%;
  427. height: 100%;
  428. background-color: #f5f6f7;
  429. // 返回箭头修改
  430. /deep/ .van-nav-bar .van-icon {
  431. color: #000;
  432. }
  433. // 搜索
  434. .equipment-search-container {
  435. width: 100%;
  436. height: 55px;
  437. // background-color: #fff;
  438. text-align: center;
  439. .equipment-search {
  440. width: 80%;
  441. margin: 0 auto;
  442. background: none;
  443. }
  444. .van-search__content {
  445. background: #fff;
  446. border-radius: 50px;
  447. }
  448. }
  449. // 配电室列表
  450. .switch-room-container {
  451. width: 100%;
  452. // background-color: #fff;
  453. min-height: 1px;
  454. max-height: calc(100% - 100px);
  455. // overflow: auto;
  456. font-size: 14px;
  457. font-weight: 400;
  458. color: #333333;
  459. .switch-room {
  460. width: 100%;
  461. position: relative;
  462. max-height: 300px;
  463. display: flex;
  464. background: #fff;
  465. flex-direction: column;
  466. // 浅蓝色title
  467. .title {
  468. padding: 0 10px;
  469. color: #025baa;
  470. height: 45px;
  471. background: rgba(2, 91, 170, 0.1);
  472. font-size: 16px;
  473. font-weight: 500;
  474. color: #025baa;
  475. line-height: 45px;
  476. }
  477. // 每个配电室出线明细信息
  478. .info-container {
  479. width: 100%;
  480. flex: 1;
  481. overflow: auto;
  482. display: flex;
  483. flex-wrap: wrap;
  484. // justify-content: space-between;
  485. padding: 12px 10px;
  486. // 每个配电室出线明细
  487. .card {
  488. width: 32%;
  489. // min-width: calc(33% - 8px);
  490. // max-width: calc(33% - 8px);
  491. // margin-right: 8px;
  492. margin-bottom: 8px;
  493. height: 30px;
  494. background: #e4e6e7;
  495. border-radius: 2px;
  496. opacity: 0.74;
  497. text-align: center;
  498. line-height: 30px;
  499. }
  500. // .card:nth-child(3n) {
  501. // margin-right: 0;
  502. // }
  503. .card:not(:nth-child(3n)) {
  504. margin-right: 2%;
  505. }
  506. .load-more-container {
  507. width: 100%;
  508. .load-more {
  509. width: 80px;
  510. height: 25px;
  511. line-height: 25px;
  512. text-align: center;
  513. margin: 10px auto;
  514. color: #025baa;
  515. background: #e5eef6;
  516. }
  517. }
  518. .more-list {
  519. width: 100%;
  520. display: flex;
  521. flex-wrap: wrap;
  522. // justify-content: space-between;
  523. // padding: 12px 10px;
  524. /deep/ .van-list__loading {
  525. margin: 0 auto;
  526. }
  527. /deep/ .van-list__finished-text {
  528. width: 100%;
  529. margin: 0 auto;
  530. }
  531. }
  532. }
  533. }
  534. .bottom {
  535. width: 100%;
  536. position: absolute;
  537. bottom: 0;
  538. left: 0;
  539. height: 10px;
  540. padding: 0 10px;
  541. background-color: #f5f6f7;
  542. .divider {
  543. background: #e6e6e6;
  544. height: 1px;
  545. width: 100%;
  546. }
  547. }
  548. }
  549. // 只有一个出线柜时,样式
  550. .one-list {
  551. height: calc(100% - 100px) !important;
  552. .switch-room {
  553. max-height: 100% !important;
  554. // height: 100% !important;
  555. .load-more {
  556. margin: 10px auto !important;
  557. }
  558. }
  559. }
  560. // 空状态
  561. .m-empty {
  562. // position: fixed;
  563. // top: 0;
  564. // left: 0;
  565. // width: 100%;
  566. // height: 100%;
  567. display: flex;
  568. align-items: center;
  569. /deep/ .van-empty__image {
  570. display: flex;
  571. justify-content: center;
  572. align-items: flex-end;
  573. img {
  574. width: auto;
  575. height: auto;
  576. }
  577. }
  578. }
  579. // 筛选弹窗
  580. .m-popup-container {
  581. width: 80%;
  582. height: 100%;
  583. padding: 55px 20px 10px 20px;
  584. .m-popup {
  585. width: 100%;
  586. height: calc(100% - 80px);
  587. // display: flex;
  588. // flex-direction: column;
  589. .title {
  590. font-size: 16px;
  591. font-weight: 500;
  592. color: #333333;
  593. margin-bottom: 15px;
  594. }
  595. // 配电室
  596. .system {
  597. width: 100%;
  598. height: 100%;
  599. overflow: auto;
  600. // 专业系统按钮
  601. .system-btn-container {
  602. display: flex;
  603. width: 100%;
  604. max-height: calc(100% - 80px);
  605. overflow: auto;
  606. flex-wrap: wrap;
  607. flex-flow: wrap;
  608. .system-btn {
  609. width: 100% !important;
  610. min-width: 100% !important;
  611. max-width: 100% !important;
  612. // min-height: 40px;
  613. height: auto;
  614. box-sizing: border-box;
  615. padding: 5px 0 !important;
  616. .m-btn {
  617. width: 100%;
  618. font-size: 14px;
  619. height: 100%;
  620. // height: 32px !important;
  621. text-align: center;
  622. background: #eff0f1;
  623. border-radius: 2px;
  624. padding: 5px 0 !important;
  625. }
  626. }
  627. }
  628. .active {
  629. background-color: #025baa !important;
  630. color: #fff;
  631. }
  632. }
  633. // 设备设施
  634. .sbss {
  635. flex: 1;
  636. display: flex;
  637. flex-direction: column;
  638. overflow: auto;
  639. .title {
  640. width: 100%;
  641. height: 25px;
  642. }
  643. .system-btn-container {
  644. width: 100%;
  645. height: 40px;
  646. flex: 1;
  647. overflow: auto;
  648. .system-btn {
  649. width: 100% !important;
  650. box-sizing: border-box;
  651. background: #eff0f1 !important;
  652. margin: 10px 0 10px 0;
  653. .m-btn {
  654. display: block !important;
  655. width: 100% !important;
  656. height: 32px !important;
  657. text-align: center;
  658. background: #eff0f1;
  659. border-radius: 2px;
  660. }
  661. }
  662. }
  663. .active {
  664. background-color: #025baa !important;
  665. color: #fff;
  666. }
  667. .load-more {
  668. width: 80px;
  669. height: 25px;
  670. line-height: 25px;
  671. text-align: center;
  672. margin: 0 auto;
  673. color: #025baa;
  674. background: #e5eef6;
  675. }
  676. }
  677. .divider {
  678. border-bottom: 1px solid #e6e6e6;
  679. margin: 20px 0;
  680. }
  681. .footer {
  682. position: absolute;
  683. bottom: 30px;
  684. right: 0;
  685. width: 100%;
  686. height: 35px;
  687. display: flex;
  688. justify-content: space-around;
  689. .van-button {
  690. width: 40%;
  691. height: 100%;
  692. max-width: 40%;
  693. min-width: 40%;
  694. }
  695. }
  696. }
  697. }
  698. }
  699. </style>