MoreEquipmentList.vue 21 KB

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