EngineRoomPicture.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  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'></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='100' :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' :key='item.wzjm'>
  18. <!-- 使用 title 插槽来自定义标题 -->
  19. <template #title>
  20. <span class='name'>{{item.wzjc}}</span>
  21. </template>
  22. <template #right-icon>
  23. <span @click='showPhoto(item)'>{{item.photos_num}}张</span>
  24. <van-icon @click='showPhoto(item)' name='arrow' class='arrow-icon' />
  25. </template>
  26. </van-cell>
  27. </van-list>
  28. </div>
  29. <!-- 无数据 -->
  30. <van-empty class='m-empty' v-if='finished &&!list.length' description='暂无数据'>
  31. <template #image>
  32. <img class='no-data' src='../../assets/images/search_null.png' alt />
  33. </template>
  34. </van-empty>
  35. <!-- 预览照片 -->
  36. <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
  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='footer'>
  50. <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
  51. <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
  52. </div>
  53. </div>
  54. </van-popup>
  55. </div>
  56. </template>
  57. <script>
  58. /**
  59. * 机房平面布置图
  60. */
  61. import Vue from 'vue'
  62. import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
  63. Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
  64. import { mapGetters } from 'vuex'
  65. import { querySmsLocation } from '@/api/equipmentList'
  66. import { queryPic } from '@/api/public'
  67. import ImagePreview from '@/components/ImagePreview'
  68. import { sleep } from '@/utils/util'
  69. import { cloneDeep } from 'lodash'
  70. export default {
  71. name: 'EngineRoomPicture',
  72. props: {},
  73. components: { ImagePreview },
  74. data() {
  75. return {
  76. title: '机房平面布置图',
  77. keyword: '',
  78. page: 1,
  79. size: 20,
  80. list: [],
  81. loading: false,
  82. finished: false,
  83. category_code: '',
  84. showPopup: false,
  85. systemList: [
  86. { text: '全部', smsxt: '全部', active: 'active' },
  87. { text: '供电系统', smsxt: '1001', active: '' },
  88. { text: '暖通系统', smsxt: '1002', active: '' },
  89. { text: '消防系统', smsxt: '1003', active: '' },
  90. { text: '弱电系统', smsxt: '1004', active: '' },
  91. { text: '给排水系统', smsxt: '1005', active: '' },
  92. { text: '电梯系统', smsxt: '1006', active: '' },
  93. { text: '燃气系统', smsxt: '1007', active: '' },
  94. { text: '土建系统', smsxt: '1008', active: '' },
  95. ],
  96. showImgPreview: false, //是否展示图片预览
  97. imgKey: new Date().getTime(),
  98. imgList: [],
  99. system_code: '', //系统code,右弹窗使用
  100. // 弹窗中使用数据
  101. modalData: {
  102. system: '',
  103. },
  104. // 弹窗中使用备份数据
  105. modalDataBak: {
  106. system: '',
  107. },
  108. globalFlag: false, //是否是从全局搜索进入的
  109. }
  110. },
  111. computed: {
  112. ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  113. },
  114. created() {
  115. const { type } = this.$route.params
  116. this.globalFlag = Boolean(type)
  117. console.log(this.globalFlag)
  118. if (this.globalFlag) {
  119. this.system_code = '全部'
  120. } else {
  121. this.system_code = this.smsxt
  122. }
  123. this.onLoad()
  124. },
  125. beforeMount() {},
  126. mounted() {},
  127. methods: {
  128. backPage() {
  129. this.$router.go(-1)
  130. },
  131. /**
  132. * 点击右侧筛选
  133. */
  134. handleRightClick() {
  135. this.showPopup = true
  136. // 设置选中的专业系统
  137. this.changeSystem({ smsxt: this.system_code })
  138. },
  139. /**
  140. * 获取设备列表
  141. */
  142. async getList() {
  143. let data = {
  144. plazaId: this.plazaId,
  145. page: this.page,
  146. size: this.size,
  147. }
  148. let postParams = {
  149. system_code: this.smsxt,
  150. photosNumGte: 1, //查询数量大于等于1的
  151. }
  152. // 搜索 设备间名称
  153. if (this.keyword) {
  154. data.keyword = `${this.keyword}:wzjc;`
  155. }
  156. // 右弹窗选择专业之后
  157. if (this.system_code && this.system_code !== '全部') {
  158. postParams.system_code = this.system_code
  159. } else if (this.system_code === '全部') {
  160. postParams = {}
  161. }
  162. let res = await querySmsLocation({ data, postParams })
  163. console.log(res.data)
  164. if (!res.data || !res.data?.data) {
  165. this.list = []
  166. return false
  167. }
  168. let resData = res.data.data || []
  169. console.log(resData)
  170. this.list = this.list.concat(resData)
  171. this.count = res.data.count || 0
  172. },
  173. async onLoad() {
  174. if (this.page > 1) {
  175. await sleep(1000)
  176. }
  177. await this.getList()
  178. // list无数据,不执行后续分页查询
  179. if (!this.list.length) {
  180. this.finished = true
  181. return true
  182. }
  183. this.page++
  184. this.loading = false
  185. if (this.list.length >= this.count) {
  186. this.finished = true
  187. }
  188. },
  189. /**
  190. * 显示图片
  191. */
  192. async showPhoto(data) {
  193. this.imgKey = `img${new Date().getTime()}`
  194. let getParams = {
  195. module: '1002', // 设备设施
  196. plazaId: this.plazaId,
  197. typename: '位置布置图',
  198. system: data.system_code,
  199. location: data.location,
  200. }
  201. let res = await queryPic({ getParams })
  202. if (!res?.data) {
  203. this.imgList = []
  204. return false
  205. }
  206. let imgList = []
  207. res.data.map((item) => {
  208. imgList.push(item.url)
  209. })
  210. this.imgList = imgList
  211. imgList.length && (this.showImgPreview = true)
  212. },
  213. /**
  214. * 搜索
  215. */
  216. onSearch() {
  217. // 初始化数据,查询列表
  218. this.initData()
  219. this.onLoad()
  220. },
  221. /**
  222. * 初始化数据,查询列表
  223. */
  224. initData() {
  225. this.finished = false
  226. this.page = 1
  227. this.count = 0
  228. this.list = []
  229. },
  230. /**
  231. * popup 更改系统
  232. */
  233. changeSystem(data) {
  234. console.log(data)
  235. let systemList = this.systemList
  236. systemList.map((item) => {
  237. item.active = ''
  238. if (item.smsxt === data.smsxt) {
  239. item.active = 'active'
  240. }
  241. })
  242. // 弹窗选中的系统
  243. this.$set(this.modalDataBak, 'system', data.smsxt)
  244. },
  245. /**
  246. * 重置
  247. */
  248. reset() {
  249. this.modalDataBak = {
  250. system: '',
  251. }
  252. this.modalData = {
  253. system: '',
  254. }
  255. this.system_code = this.smsxt
  256. if (this.globalFlag) {
  257. this.system_code = '全部'
  258. }
  259. this.showPopup = false
  260. // 初始化数据,查询列表
  261. this.initData()
  262. this.onLoad()
  263. },
  264. /**
  265. * 弹窗确认
  266. */
  267. confirm() {
  268. this.modalData = cloneDeep(this.modalDataBak)
  269. this.showPopup = false
  270. this.system_code = this.modalData.system
  271. // 初始化数据,查询列表
  272. this.initData()
  273. this.onLoad()
  274. },
  275. },
  276. }
  277. </script>
  278. <style lang='less' scoped>
  279. .equipment-page {
  280. width: 100%;
  281. height: 100%;
  282. background-color: #f5f6f7;
  283. // 返回箭头修改
  284. /deep/ .van-nav-bar .van-icon {
  285. color: #000;
  286. }
  287. // 搜索
  288. .equipment-search-container {
  289. width: 100%;
  290. height: 55px;
  291. // background-color: #fff;
  292. text-align: center;
  293. .equipment-search {
  294. width: 80%;
  295. margin: 0 auto;
  296. background: none;
  297. }
  298. .van-search__content {
  299. background: #fff;
  300. border-radius: 50px;
  301. }
  302. }
  303. // 设备列表
  304. .equipment-list {
  305. width: 100%;
  306. padding: 0 10px;
  307. background-color: #fff;
  308. min-height: 1px;
  309. max-height: calc(100% - 100px);
  310. overflow: auto;
  311. font-size: 14px;
  312. font-weight: 400;
  313. color: #333333;
  314. /deep/ .van-cell {
  315. display: flex;
  316. align-items: center;
  317. .van-cell__title {
  318. display: flex;
  319. vertical-align: center;
  320. .number {
  321. width: 35px;
  322. display: flex;
  323. align-items: center;
  324. }
  325. .name {
  326. display: flex;
  327. align-items: center;
  328. padding: 0 10px;
  329. }
  330. }
  331. }
  332. .arrow-icon {
  333. font-size: 16px;
  334. line-height: inherit !important;
  335. color: #333333 !important;
  336. }
  337. // 维修
  338. .wx,
  339. .wb {
  340. color: #d83931;
  341. display: inline-block;
  342. width: 44px;
  343. margin-right: 10px;
  344. background: #fbeceb;
  345. border-radius: 2px;
  346. text-align: center;
  347. }
  348. .wb {
  349. color: #0481e1;
  350. background: #e6f3fc;
  351. }
  352. }
  353. // 空状态
  354. .m-empty {
  355. // position: fixed;
  356. // top: 0;
  357. // left: 0;
  358. // width: 100%;
  359. // height: 100%;
  360. display: flex;
  361. align-items: center;
  362. /deep/ .van-empty__image {
  363. display: flex;
  364. justify-content: center;
  365. align-items: flex-end;
  366. img {
  367. width: auto;
  368. height: auto;
  369. }
  370. }
  371. }
  372. // 筛选弹窗
  373. .m-popup-container {
  374. width: 80%;
  375. height: 100%;
  376. padding: 55px 20px 10px 20px;
  377. .m-popup {
  378. width: 100%;
  379. height: calc(100% - 80px);
  380. display: flex;
  381. flex-direction: column;
  382. .title {
  383. font-size: 16px;
  384. font-weight: 500;
  385. color: #333333;
  386. margin-bottom: 15px;
  387. }
  388. // 专业
  389. .system {
  390. width: 100%;
  391. height: auto;
  392. // 专业系统按钮
  393. .system-btn-container {
  394. display: flex;
  395. width: 100%;
  396. flex-wrap: wrap;
  397. flex-flow: wrap;
  398. .system-btn {
  399. width: 50% !important;
  400. min-width: 50% !important;
  401. max-width: 50% !important;
  402. height: 40px;
  403. box-sizing: border-box;
  404. padding: 10px 10px 10px 0;
  405. .m-btn {
  406. width: 100%;
  407. height: 32px !important;
  408. text-align: center;
  409. background: #eff0f1;
  410. border-radius: 2px;
  411. }
  412. }
  413. }
  414. .active {
  415. background-color: #025baa !important;
  416. color: #fff;
  417. }
  418. }
  419. // 设备设施
  420. .sbss {
  421. flex: 1;
  422. display: flex;
  423. flex-direction: column;
  424. overflow: auto;
  425. .title {
  426. width: 100%;
  427. height: 25px;
  428. }
  429. .system-btn-container {
  430. width: 100%;
  431. height: 40px;
  432. flex: 1;
  433. overflow: auto;
  434. .system-btn {
  435. width: 100% !important;
  436. box-sizing: border-box;
  437. background: #eff0f1 !important;
  438. margin: 10px 0 10px 0;
  439. .m-btn {
  440. display: block !important;
  441. width: 100% !important;
  442. height: 32px !important;
  443. text-align: center;
  444. background: #eff0f1;
  445. border-radius: 2px;
  446. }
  447. }
  448. }
  449. .active {
  450. background-color: #025baa !important;
  451. color: #fff;
  452. }
  453. .load-more {
  454. width: 80px;
  455. height: 25px;
  456. line-height: 25px;
  457. text-align: center;
  458. margin: 0 auto;
  459. color: #025baa;
  460. background: #e5eef6;
  461. }
  462. }
  463. .divider {
  464. border-bottom: 1px solid #e6e6e6;
  465. margin: 20px 0;
  466. }
  467. .footer {
  468. position: absolute;
  469. bottom: 30px;
  470. right: 0;
  471. width: 100%;
  472. height: 35px;
  473. display: flex;
  474. justify-content: space-around;
  475. .van-button {
  476. width: 40%;
  477. height: 100%;
  478. max-width: 40%;
  479. min-width: 40%;
  480. }
  481. }
  482. }
  483. }
  484. }
  485. </style>