MoreEquipmentList.vue 25 KB

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