ElectricWell.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. <template>
  2. <div class='electric-well-page'>
  3. <!-- 顶部条 -->
  4. <van-nav-bar 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='search-container'>
  11. <van-search class='search' v-model='keyword' placeholder='请输入电井间或商铺编号' @search='onSearch'>
  12. <!-- TODO: 空状态 自定义图标 -->
  13. <!-- <template #action>
  14. <div class='search' @click='onSearch'>搜索</div>
  15. </template>-->
  16. </van-search>
  17. </div>
  18. <!-- 电井列表 -->
  19. <div class='electric-well-list' v-if='list.length'>
  20. <div class='floor' v-for='(item,index) in list' :key='`${index}_${item.floor}`'>
  21. <!-- 楼层 -->
  22. <div class='title'>
  23. <div class='floor-left'>
  24. <i class='iconfont wanda-floor-func-active'></i>
  25. {{item.floor}}
  26. </div>
  27. <div class='floor-right' @click='goToMapView(item.floor)'>
  28. 查看平面图
  29. <van-icon name='arrow' />
  30. </div>
  31. </div>
  32. <!-- 电井 -->
  33. <div class='well-container'>
  34. <div class='well' v-for='(detail) in item.data.slice(0,2)' :key='detail.meterbox'>
  35. <div class='well-title'>{{detail.welldes}}</div>
  36. <div class='meterbox'>
  37. <span class='well-left'>商铺电表箱:</span>
  38. <span class='value'>{{detail.meterbox}}</span>
  39. </div>
  40. <div class='meterbox'>
  41. <span class='well-left'>商铺编号:</span>
  42. <span class='value'>{{detail.shopsnumList}}</span>
  43. </div>
  44. </div>
  45. <!-- 加载更多 -->
  46. <div class='load-more' v-show='!item.loadMore && item.data.length>2' @click='loadMore(item)'>加载更多</div>
  47. <!-- 第三条以上 -->
  48. <div v-show='item.loadMore && item.data.length>2' :key='key'>
  49. <div class='well' v-for='(detail) in item.data.slice(2)' :key='detail.meterbox'>
  50. <div class='well-title'>{{detail.welldes}}</div>
  51. <div class='meterbox'>
  52. <span class='well-left'>商铺电表箱:</span>
  53. <span class='value'>{{detail.meterbox}}</span>
  54. </div>
  55. <div class='meterbox'>
  56. <span class='well-left'>商铺编号:</span>
  57. <span class='value'>{{detail.shopsnumList}}</span>
  58. </div>
  59. </div>
  60. </div>
  61. <!-- </div> -->
  62. </div>
  63. </div>
  64. </div>
  65. <!-- 无数据 -->
  66. <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
  67. <!-- <template #image>
  68. <img src="../../assets/images/xxx.png" alt="">
  69. </template>-->
  70. </van-empty>
  71. <!-- 点击头部筛选,出现的右侧弹窗 -->
  72. <van-popup class='m-popup-container' v-model='showPopup' position='right'>
  73. <div class='m-popup'>
  74. <!-- 系统 -->
  75. <div class='system'>
  76. <h1 class='title'>楼层</h1>
  77. <div class='system-btn-container'>
  78. <div class='system-btn' v-for='(item,index) in floorList' :key='index'>
  79. <van-button class='m-btn' :class='item.active' @click='changeFloor(item)'>{{item.code}}</van-button>
  80. </div>
  81. </div>
  82. </div>
  83. <div class='divider'></div>
  84. <!-- 设备设施 -->
  85. <div class='sbss'>
  86. <h1 class='title'>电井类型</h1>
  87. <div class='system-btn-container'>
  88. <div class='system-btn' v-for='(item,index) in wellTypeList' :key='index'>
  89. <van-button class='m-btn' :class='item.active' @click='changeWellType(item)'>{{item.text}}</van-button>
  90. </div>
  91. </div>
  92. </div>
  93. <div class='footer'>
  94. <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
  95. <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
  96. </div>
  97. </div>
  98. </van-popup>
  99. </div>
  100. </template>
  101. <script>
  102. /**
  103. * 电井间控制商铺范围
  104. */
  105. import Vue from 'vue'
  106. import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
  107. Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
  108. import { mapGetters } from 'vuex'
  109. import { queryShops } from '@/api/equipmentList'
  110. import { sleep } from '@/utils/util'
  111. import { cloneDeep } from 'lodash'
  112. export default {
  113. name: 'ElectricWell',
  114. props: {},
  115. data() {
  116. return {
  117. keyword: '',
  118. page: 1,
  119. size: 20,
  120. list: [],
  121. key: new Date().getTime(),
  122. loading: false,
  123. showPopup: false,
  124. floorList: [],
  125. wellTypeList: [
  126. { text: '全部', id: '全部', active: 'active' },
  127. { text: '强电井', id: '强电井', active: '' },
  128. { text: '弱电井', id: '弱电井', active: '' },
  129. { text: '强弱电井', id: '强弱电井', active: '' },
  130. ],
  131. currentFloor: '全部',
  132. currentWellType: '全部',
  133. // 弹窗中使用数据
  134. modalData: {
  135. floor: '',
  136. wellType: '',
  137. },
  138. // 弹窗中使用备份数据
  139. modalDataBak: {
  140. floor: '',
  141. wellType: '',
  142. },
  143. }
  144. },
  145. computed: {
  146. ...mapGetters(['plazaId', 'smsxt', 'categoryId', 'floorsArr']),
  147. },
  148. components: {},
  149. created() {
  150. // code:"F6"
  151. // gcname:"f6"
  152. // gcode:"6F"
  153. // gname:"f6"
  154. // seq:600
  155. let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '全部', seq: null, active: 'active' }]
  156. this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
  157. floorList.push({ code, gcname, gcode, gname, seq, active: '' })
  158. })
  159. this.floorList = floorList
  160. console.log(this.floorList)
  161. this.getList()
  162. },
  163. beforeMount() {},
  164. mounted() {},
  165. methods: {
  166. backPage() {
  167. this.$router.go(-1)
  168. },
  169. /**
  170. * 点击右侧筛选
  171. */
  172. handleRightClick() {
  173. this.showPopup = true
  174. // 设置选中的专业系统
  175. this.changeFloor({ gcname: this.currentFloor })
  176. },
  177. /**
  178. * 获取电井列表
  179. */
  180. async getList() {
  181. console.log('getList')
  182. let getParams = {
  183. orderBy: `floor,1;welldesm,1;meterbox,1;`,
  184. plazaId: this.plazaId,
  185. }
  186. // 输入框搜索关键字
  187. if (this.keyword) {
  188. getParams.keyword = `${this.keyword}:welldes,meterbox,shopsnumList;`
  189. }
  190. // 右侧弹窗 筛选楼层的类型
  191. if (this.currentFloor && this.currentFloor !== '全部') {
  192. getParams.floor = this.currentFloor
  193. }
  194. // 右侧弹窗 筛选的电井类型
  195. if (this.currentWellType && this.currentWellType !== '全部') {
  196. getParams.keyword = getParams.keyword || ''
  197. getParams.keyword += `${this.currentWellType}:welldes;`
  198. }
  199. let resData = await queryShops({ getParams })
  200. if (!resData && !resData?.data) {
  201. this.list = []
  202. return false
  203. }
  204. let res_data = resData.data[0] || []
  205. let list = []
  206. for (const item in res_data) {
  207. console.log(item)
  208. list.push({
  209. floor: item,
  210. seq: res_data[item][0].seq,
  211. data: res_data[item],
  212. })
  213. }
  214. // 楼层降序排序 RF,F6-F1,B1
  215. list = list.sort((a, b) => b.seq - a.seq)
  216. this.list = list
  217. console.log(this.list)
  218. // console.log(JSON.stringify(res_data, null, 2))
  219. },
  220. /**
  221. * 点击的楼层,跳转楼层平面图
  222. */
  223. goToMapView(chooseFloor) {
  224. let { floorsArr } = this
  225. let currentFloor = floorsArr.filter((v) => v.code === chooseFloor)[0]
  226. let floor = {
  227. FloorId: currentFloor.gcname,
  228. FloorName: currentFloor.code,
  229. }
  230. this.$router.push({ name: 'MapView', params: { floor } })
  231. },
  232. /**
  233. * 点击加载更多,显示该楼层下的更多数据
  234. */
  235. loadMore(item) {
  236. item.loadMore = true
  237. this.key = new Date().getTime()
  238. },
  239. /**
  240. * 搜索
  241. */
  242. onSearch() {
  243. // 初始化数据,查询列表
  244. this.initData()
  245. this.getList()
  246. },
  247. /**
  248. * 初始化数据,查询列表
  249. */
  250. initData() {
  251. this.list = []
  252. },
  253. /**
  254. * popup 更改楼层
  255. */
  256. changeFloor(data) {
  257. console.log(data)
  258. let floorList = this.floorList
  259. floorList.map((item) => {
  260. item.active = ''
  261. if (item.gcname === data.gcname) {
  262. item.active = 'active'
  263. }
  264. })
  265. // 弹窗选中的系统
  266. this.$set(this.modalDataBak, 'floor', data.gcname)
  267. },
  268. changeWellType(data) {
  269. let { wellTypeList } = this
  270. wellTypeList.map((item) => {
  271. item.active = ''
  272. if (item.text === data.text) {
  273. item.active = 'active'
  274. }
  275. })
  276. this.$set(this.modalDataBak, 'wellType', data.text)
  277. },
  278. /**
  279. * 重置
  280. */
  281. reset() {
  282. this.modalDataBak = {
  283. floor: '',
  284. wellType: '',
  285. }
  286. this.modalData = {
  287. floor: '',
  288. wellType: '',
  289. }
  290. this.wellTypeList = [
  291. { text: '全部', id: '全部', active: 'active' },
  292. { text: '强电井', id: '强电井', active: '' },
  293. { text: '弱电井', id: '弱电井', active: '' },
  294. { text: '强弱电井', id: '强弱电井', active: '' },
  295. ]
  296. this.currentFloor = '全部'
  297. this.currentWellType = '全部'
  298. this.showPopup = false
  299. // 初始化数据,查询列表
  300. this.initData()
  301. this.getList()
  302. },
  303. /**
  304. * 弹窗确认
  305. */
  306. confirm() {
  307. this.modalData = cloneDeep(this.modalDataBak)
  308. this.showPopup = false
  309. this.currentFloor = this.modalData.floor
  310. this.currentWellType = this.modalData.wellType
  311. // 初始化数据,查询列表
  312. this.initData()
  313. this.getList()
  314. },
  315. },
  316. }
  317. </script>
  318. <style lang='less' scoped>
  319. .electric-well-page {
  320. width: 100%;
  321. height: 100%;
  322. // display: flex;
  323. // flex-direction: column;
  324. background-color: #f5f6f7;
  325. // 返回箭头修改
  326. /deep/ .van-nav-bar .van-icon {
  327. color: #000;
  328. }
  329. // 搜索
  330. .search-container {
  331. width: 100%;
  332. height: 55px;
  333. // background-color: #fff;
  334. text-align: center;
  335. .search {
  336. width: 80%;
  337. margin: 0 auto;
  338. background: none;
  339. }
  340. .van-search__content {
  341. background: #fff;
  342. border-radius: 50px;
  343. }
  344. }
  345. // 设备列表
  346. .electric-well-list {
  347. width: 100%;
  348. // flex: 1;
  349. height: calc(100% - 100px);
  350. // padding: 0 10px;
  351. background-color: #fff;
  352. overflow: auto;
  353. font-size: 14px;
  354. font-weight: 400;
  355. color: #333333;
  356. .floor {
  357. width: 100%;
  358. max-height: 400px;
  359. overflow: auto;
  360. display: flex;
  361. flex-direction: column;
  362. // 楼层title
  363. .title {
  364. width: 100%;
  365. height: 40px;
  366. min-height: 40px;
  367. max-height: 40px;
  368. padding: 0 15px;
  369. background: #dce5ee;
  370. display: flex;
  371. justify-content: space-between;
  372. align-items: center;
  373. .floor-left {
  374. color: #025baa;
  375. font-size: 16px;
  376. }
  377. .floor-right {
  378. color: #025baa;
  379. display: flex;
  380. align-items: center;
  381. i {
  382. margin-left: 5px;
  383. }
  384. }
  385. }
  386. // 电井列表
  387. .well-container {
  388. padding: 15px 15px 10px 15px;
  389. flex: 1;
  390. overflow: auto;
  391. .well {
  392. width: 100%;
  393. // height: 130px;
  394. padding: 10px 0;
  395. border-bottom: 1px solid #e6e6e6;
  396. .well-title {
  397. font-size: 16px;
  398. font-weight: 500;
  399. color: #333;
  400. }
  401. .meterbox,
  402. .shopsnumList {
  403. width: 100%;
  404. height: auto;
  405. margin-top: 8px;
  406. display: flex;
  407. color: #666;
  408. .well-left {
  409. width: 80px !important;
  410. }
  411. .value {
  412. flex: 1;
  413. height: auto;
  414. word-wrap: break-word;
  415. word-break: break-all;
  416. }
  417. }
  418. }
  419. .load-more {
  420. width: 80px;
  421. height: 25px;
  422. line-height: 25px;
  423. text-align: center;
  424. margin: 0 auto;
  425. margin-top: 10px;
  426. color: #025baa;
  427. background: #e5eef6;
  428. }
  429. }
  430. }
  431. }
  432. // 空状态
  433. .m-empty {
  434. position: fixed;
  435. top: 0;
  436. left: 0;
  437. width: 100%;
  438. height: 100%;
  439. display: flex;
  440. align-items: center;
  441. }
  442. // 筛选弹窗
  443. .m-popup-container {
  444. width: 80%;
  445. height: 100%;
  446. padding: 55px 20px 10px 20px;
  447. .m-popup {
  448. width: 100%;
  449. height: calc(100% - 80px);
  450. display: flex;
  451. flex-direction: column;
  452. .title {
  453. font-size: 16px;
  454. font-weight: 500;
  455. color: #333333;
  456. margin-bottom: 15px;
  457. }
  458. // 专业
  459. .system {
  460. width: 100%;
  461. height: auto;
  462. // 专业系统按钮
  463. .system-btn-container {
  464. display: flex;
  465. width: 100%;
  466. flex-wrap: wrap;
  467. flex-flow: wrap;
  468. .system-btn {
  469. width: 33% !important;
  470. min-width: 33% !important;
  471. max-width: 33% !important;
  472. height: 50px;
  473. box-sizing: border-box;
  474. padding: 5px 10px 5px 0;
  475. .m-btn {
  476. width: 100%;
  477. height: 40px !important;
  478. text-align: center;
  479. background: #eff0f1;
  480. border-radius: 2px;
  481. }
  482. }
  483. }
  484. .active {
  485. background-color: #025baa !important;
  486. color: #fff;
  487. }
  488. }
  489. // 电井类型
  490. .sbss {
  491. flex: 1;
  492. display: flex;
  493. flex-direction: column;
  494. overflow: auto;
  495. .title {
  496. width: 100%;
  497. height: 25px;
  498. }
  499. .system-btn-container {
  500. display: flex;
  501. width: 100%;
  502. flex-wrap: wrap;
  503. flex-flow: wrap;
  504. .system-btn {
  505. width: 33% !important;
  506. min-width: 33% !important;
  507. max-width: 33% !important;
  508. height: 50px;
  509. box-sizing: border-box;
  510. padding: 5px 10px 5px 0;
  511. .m-btn {
  512. width: 100%;
  513. height: 40px !important;
  514. text-align: center;
  515. background: #eff0f1;
  516. border-radius: 2px;
  517. padding: 0 !important;
  518. }
  519. }
  520. }
  521. .active {
  522. background-color: #025baa !important;
  523. color: #fff;
  524. }
  525. .load-more {
  526. width: 80px;
  527. height: 25px;
  528. line-height: 25px;
  529. text-align: center;
  530. margin: 0 auto;
  531. color: #025baa;
  532. background: #e5eef6;
  533. }
  534. }
  535. .divider {
  536. border-bottom: 1px solid #e6e6e6;
  537. margin: 20px 0;
  538. }
  539. .footer {
  540. position: absolute;
  541. bottom: 30px;
  542. right: 0;
  543. width: 100%;
  544. height: 35px;
  545. display: flex;
  546. justify-content: space-around;
  547. .van-button {
  548. width: 40%;
  549. height: 100%;
  550. max-width: 40%;
  551. min-width: 40%;
  552. }
  553. }
  554. }
  555. }
  556. }
  557. </style>