EquipmentList.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  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.classstructureid}}</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. },
  120. // 弹窗中使用备份数据
  121. modalDataBak: {
  122. system: '',
  123. sbss: '全部',
  124. },
  125. }
  126. },
  127. computed: {
  128. ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  129. },
  130. components: {},
  131. created() {
  132. this.system_code = this.smsxt
  133. let { title, category_code } = this.$route.query
  134. this.title = title
  135. this.category_code = category_code
  136. this.onLoad()
  137. },
  138. beforeMount() {},
  139. mounted() {},
  140. methods: {
  141. backPage() {
  142. this.$router.go(-1)
  143. },
  144. /**
  145. * 点击右侧筛选
  146. */
  147. handleRightClick() {
  148. this.showPopup = true
  149. // 设置选中的专业系统
  150. this.changeSystem({ smsxt: this.system_code })
  151. this.loadMore = false
  152. this.sbssList = [{ text: '全部', code: '', active: 'active' }]
  153. // 查询筛选条件的 设备设施
  154. this.getSbss()
  155. },
  156. /**
  157. * 获取设备列表
  158. */
  159. async getList() {
  160. console.log('getList')
  161. let data = {
  162. page: this.page,
  163. size: this.size,
  164. plazaId: this.plazaId,
  165. onlyMainAsset: true,
  166. }
  167. let postParams = {
  168. system_code: this.system_code,
  169. category_code: this.category_code,
  170. }
  171. // 筛选后,专业系统选择全部, 删除上传system_code的字段
  172. if (!this.system_code || this.system_code === '全部') {
  173. delete postParams.system_code
  174. }
  175. // 筛选后, 使用classstructureid字段,删除category_code字段
  176. if (this.sbss_code) {
  177. this.sbss_code !== '全部' && (postParams.classstructureid = this.sbss_code)
  178. delete postParams.category_code
  179. }
  180. // keyword
  181. if (this.keyword) {
  182. data.keyword = `${this.keyword}:sbjc,assetnum;`
  183. }
  184. let resData = await queryEquipmentList({ data, postParams })
  185. if (!resData && !resData?.data) {
  186. return false
  187. }
  188. let res_data = resData.data?.data || []
  189. res_data.map((item) => {
  190. item._type = '正常'
  191. // 检测中
  192. if (item.is_detecting) {
  193. item._type = '维保'
  194. }
  195. // 异常
  196. if (item.is_exception) {
  197. item._type = '维修'
  198. }
  199. })
  200. this.list = this.list.concat(res_data)
  201. this.count = resData.data?.count
  202. // console.log(JSON.stringify(res_data, null, 2))
  203. },
  204. async onLoad() {
  205. console.log('onload')
  206. if (this.page > 1) {
  207. await sleep(1000)
  208. }
  209. await this.getList()
  210. this.page++
  211. this.loading = false
  212. if (this.list.length >= this.count) {
  213. this.finished = true
  214. }
  215. },
  216. /**
  217. * 跳转设备详情页
  218. */
  219. goToDetail(item) {
  220. const { assetid } = item
  221. assetid && this.$router.push({ name: 'AssetDetail', query: { assetid } })
  222. },
  223. /**
  224. * 搜索
  225. */
  226. onSearch() {
  227. // 初始化数据,查询列表
  228. this.initData()
  229. this.onLoad()
  230. },
  231. focus() {
  232. console.log(1123123123123)
  233. },
  234. /**
  235. * 初始化数据,查询列表
  236. */
  237. initData() {
  238. this.finished = false
  239. this.page = 1
  240. this.count = 0
  241. this.list = []
  242. },
  243. /**
  244. * popup 更改系统
  245. */
  246. changeSystem(data) {
  247. console.log(data)
  248. this.loadMore = false
  249. let systemList = this.systemList
  250. systemList.map((item) => {
  251. item.active = ''
  252. if (item.smsxt === data.smsxt) {
  253. item.active = 'active'
  254. }
  255. })
  256. // 弹窗选中的系统
  257. this.$set(this.modalDataBak, 'system', data.smsxt)
  258. this.getSbss(data.smsxt)
  259. },
  260. /**
  261. * popup 更改设备设施
  262. */
  263. changeSbss(data) {
  264. let sbssList = this.sbssList
  265. sbssList.map((item) => {
  266. item.active = ''
  267. if (item.text === data.text && item.code === data.code) {
  268. item.active = 'active'
  269. }
  270. })
  271. // 弹窗选中的系统
  272. console.log(data)
  273. this.$set(this.modalDataBak, 'sbss', data.code)
  274. },
  275. /**
  276. * 获取设备设施筛选条件
  277. * @param smsxt 右弹窗 更改专业系统传递参数
  278. */
  279. async getSbss(smsxt) {
  280. console.log(this.smsxt, this.system_code)
  281. let getParams = {
  282. system_code: smsxt || this.smsxt,
  283. }
  284. if (smsxt === '全部') {
  285. delete getParams.system_code
  286. }
  287. let resData = await queryAssetClass({ getParams })
  288. console.log(resData)
  289. if (!resData && !resData?.data) {
  290. this.sbssList = [{ text: '全部', code: '全部', active: 'active' }]
  291. return false
  292. }
  293. let res_data = resData.data || []
  294. let sbssList = []
  295. res_data.map((item) => {
  296. sbssList.push({
  297. text: item.classqc,
  298. active: '',
  299. // code: detail.systemqm,
  300. code: item.classstructureid,
  301. })
  302. })
  303. this.sbssList = [{ text: '全部', code: '全部', active: 'active' }, ...sbssList]
  304. },
  305. /**
  306. * 重置
  307. */
  308. reset() {
  309. this.modalDataBak = {
  310. system: '',
  311. sbss: '全部',
  312. }
  313. this.modalData = {
  314. system: '',
  315. sbss: '全部',
  316. }
  317. this.system_code = this.smsxt
  318. this.sbss_code = ''
  319. this.showPopup = false
  320. // 初始化数据,查询列表
  321. this.initData()
  322. this.onLoad()
  323. },
  324. /**
  325. * 弹窗确认
  326. */
  327. confirm() {
  328. this.modalData = cloneDeep(this.modalDataBak)
  329. this.showPopup = false
  330. this.system_code = this.modalData.system
  331. this.sbss_code = this.modalData.sbss
  332. // 初始化数据,查询列表
  333. this.initData()
  334. this.onLoad()
  335. },
  336. },
  337. }
  338. </script>
  339. <style lang='less' scoped>
  340. .equipment-page {
  341. width: 100%;
  342. height: 100%;
  343. background-color: #f5f6f7;
  344. // 返回箭头修改
  345. /deep/ .van-nav-bar .van-icon {
  346. color: #000;
  347. }
  348. // 搜索
  349. .equipment-search-container {
  350. width: 100%;
  351. height: 55px;
  352. // background-color: #fff;
  353. text-align: center;
  354. .equipment-search {
  355. width: 80%;
  356. margin: 0 auto;
  357. background: none;
  358. }
  359. .van-search__content {
  360. background: #fff;
  361. border-radius: 50px;
  362. }
  363. }
  364. // 设备列表
  365. .equipment-list {
  366. width: 100%;
  367. padding: 0 10px;
  368. background-color: #fff;
  369. min-height: 1px;
  370. max-height: calc(100% - 100px);
  371. overflow: auto;
  372. font-size: 14px;
  373. font-weight: 400;
  374. color: #333333;
  375. /deep/ .van-cell {
  376. display: flex;
  377. align-items: center;
  378. .van-cell__title {
  379. display: flex;
  380. vertical-align: center;
  381. .number {
  382. width: 35px;
  383. display: flex;
  384. align-items: center;
  385. }
  386. .name {
  387. display: flex;
  388. align-items: center;
  389. padding: 0 10px;
  390. }
  391. }
  392. }
  393. .arrow-icon {
  394. font-size: 16px;
  395. line-height: inherit !important;
  396. color: #333333 !important;
  397. }
  398. // 维修
  399. .wx,
  400. .wb {
  401. color: #d83931;
  402. display: inline-block;
  403. width: 44px;
  404. margin-right: 10px;
  405. background: #fbeceb;
  406. border-radius: 2px;
  407. text-align: center;
  408. }
  409. .wb {
  410. color: #0481e1;
  411. background: #e6f3fc;
  412. }
  413. }
  414. // 空状态
  415. .m-empty {
  416. // position: fixed;
  417. // top: 0;
  418. // left: 0;
  419. // width: 100%;
  420. // height: 100%;
  421. display: flex;
  422. align-items: center;
  423. /deep/ .van-empty__image {
  424. display: flex;
  425. justify-content: center;
  426. align-items: flex-end;
  427. img {
  428. width: auto;
  429. height: auto;
  430. }
  431. }
  432. }
  433. // 筛选弹窗
  434. .m-popup-container {
  435. width: 80%;
  436. height: 100%;
  437. padding: 55px 20px 10px 20px;
  438. .m-popup {
  439. width: 100%;
  440. height: calc(100% - 80px);
  441. display: flex;
  442. flex-direction: column;
  443. .title {
  444. font-size: 16px;
  445. font-weight: 500;
  446. color: #333333;
  447. margin-bottom: 15px;
  448. }
  449. // 专业
  450. .system {
  451. width: 100%;
  452. height: auto;
  453. // 专业系统按钮
  454. .system-btn-container {
  455. display: flex;
  456. width: 100%;
  457. flex-wrap: wrap;
  458. flex-flow: wrap;
  459. .system-btn {
  460. width: 50% !important;
  461. min-width: 50% !important;
  462. max-width: 50% !important;
  463. height: 40px;
  464. box-sizing: border-box;
  465. padding: 10px 10px 10px 0;
  466. .m-btn {
  467. width: 100%;
  468. height: 32px !important;
  469. text-align: center;
  470. background: #eff0f1;
  471. border-radius: 2px;
  472. }
  473. }
  474. }
  475. .active {
  476. background-color: #025baa !important;
  477. color: #fff;
  478. }
  479. }
  480. // 设备设施
  481. .sbss {
  482. flex: 1;
  483. display: flex;
  484. flex-direction: column;
  485. overflow: auto;
  486. .title {
  487. width: 100%;
  488. height: 25px;
  489. }
  490. .system-btn-container {
  491. width: 100%;
  492. height: 40px;
  493. flex: 1;
  494. overflow: auto;
  495. .system-btn {
  496. width: 100% !important;
  497. box-sizing: border-box;
  498. background: #eff0f1 !important;
  499. margin: 10px 0 10px 0;
  500. .m-btn {
  501. display: block !important;
  502. width: 100% !important;
  503. height: 32px !important;
  504. text-align: center;
  505. background: #eff0f1;
  506. border-radius: 2px;
  507. }
  508. }
  509. }
  510. .active {
  511. background-color: #025baa !important;
  512. color: #fff;
  513. }
  514. .load-more {
  515. width: 80px;
  516. height: 25px;
  517. line-height: 25px;
  518. text-align: center;
  519. margin: 0 auto;
  520. color: #025baa;
  521. background: #e5eef6;
  522. }
  523. }
  524. .divider {
  525. border-bottom: 1px solid #e6e6e6;
  526. margin: 20px 0;
  527. }
  528. .footer {
  529. position: absolute;
  530. bottom: 30px;
  531. right: 0;
  532. width: 100%;
  533. height: 35px;
  534. display: flex;
  535. justify-content: space-around;
  536. .van-button {
  537. width: 40%;
  538. height: 100%;
  539. max-width: 40%;
  540. min-width: 40%;
  541. }
  542. }
  543. }
  544. }
  545. }
  546. </style>