EquipmentList.vue 21 KB

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