|
@@ -11,11 +11,87 @@
|
|
|
<van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
|
|
|
</div>
|
|
|
<!-- 配电室 -->
|
|
|
- <div class='switch-room-container' v-if='1'>
|
|
|
- <div class='switch-room' v-for='ii in 3' :key='ii'>
|
|
|
- <div class='title'>商业楼/B1层/配电室/3#</div>
|
|
|
+ <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
|
|
|
+ <van-list class='switch-room-container' v-model='loading' :finished='finished' @load='onLoad' finished-text='没有更多了' v-if='1'>
|
|
|
+ <div class='switch-room' v-for='(item,index) in list' :key='index'>
|
|
|
+ <div class='title'>{{item.wzjc}}</div>
|
|
|
<!-- 一个低压柜信息 -->
|
|
|
<div class='info-container'>
|
|
|
+ <!-- 第1,2条 -->
|
|
|
+ <div class='info' v-for='(detail,dIndex) in item.data.slice(0,2) || []' :key='dIndex'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ <!-- 加载更多 -->
|
|
|
+ <div class='load-more' v-show='item.loadMore && item.data && item.data.length>=3' @click='locationLoadMore(item,index)'>加载更多</div>
|
|
|
+ <!-- 第3-5条 -->
|
|
|
+ <div class='info' v-show='!item.loadMore' v-for='(detail,dIndex) in item.data.slice(2) || []' :key='`loadMore-${dIndex}`'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-model='item.loading'
|
|
|
+ v-show='!item.loadMore && item.list.length'
|
|
|
+ :finished='item.finished'
|
|
|
+ :immediate-check='false'
|
|
|
+ @load='locationOnLoad(item,index)'
|
|
|
+ finished-text='没有更多了'
|
|
|
+ >
|
|
|
+ <div class='info' v-for='(detail,dIndex) in item.list || []' :key='dIndex'>
|
|
|
+ <div class='name'>{{detail.drawernum}}</div>
|
|
|
+ <div class='specification'>
|
|
|
+ <div class='label'>出线规格:</div>
|
|
|
+ <div class='value'>{{detail.outspec}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='loop'>
|
|
|
+ <div class='label'>控制回路:</div>
|
|
|
+ <div class='value'>{{detail.control}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='floor'>
|
|
|
+ <div class='label'>
|
|
|
+ <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
|
|
|
+ <span>楼层:</span>
|
|
|
+ </div>
|
|
|
+ <div class='value'>{{detail.floor}}</div>
|
|
|
+ </div>
|
|
|
+ <div class='divider'></div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class='switch-room' v-for='ii in 3' :key='ii'>
|
|
|
+ <div class='title'>商业楼/B1层/配电室/3#</div>
|
|
|
+ <div class='info-container'>
|
|
|
<div class='info' v-for='i in mock' :key='i'>
|
|
|
<div class='name'>1AAAA1</div>
|
|
|
<div class='specification'>
|
|
@@ -35,11 +111,10 @@
|
|
|
</div>
|
|
|
<div class='divider'></div>
|
|
|
</div>
|
|
|
- <!-- 加载更多 -->
|
|
|
<div class='load-more' @click='mock=5'>加载更多</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
+ </van-list>
|
|
|
<!-- 点击头部筛选,出现的右侧弹窗 -->
|
|
|
<van-popup class='m-popup-container' v-model='showPopup' position='right'>
|
|
|
<div class='m-popup'>
|
|
@@ -75,43 +150,41 @@ import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
|
|
|
Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
|
|
|
import { mapGetters } from 'vuex'
|
|
|
|
|
|
-import { querySmsLocation } from '@/api/equipmentList'
|
|
|
-import { queryPic } from '@/api/public'
|
|
|
-import ImagePreview from '@/components/ImagePreview'
|
|
|
+import { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
|
|
|
import { sleep } from '@/utils/util'
|
|
|
import { cloneDeep } from 'lodash'
|
|
|
export default {
|
|
|
name: 'LowVoltageCabinet',
|
|
|
props: {},
|
|
|
- components: { ImagePreview },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
mock: 2,
|
|
|
title: '配电室低压柜及出线明细',
|
|
|
keyword: '',
|
|
|
page: 1,
|
|
|
- size: 20, //TODO: size1500
|
|
|
+ size: 5,
|
|
|
+ innerSize: 5,
|
|
|
list: [],
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
showPopup: false,
|
|
|
- systemList: [
|
|
|
- { text: '全部', smsxt: '全部', active: 'active' },
|
|
|
- { text: '供电系统', smsxt: '1001', active: '' },
|
|
|
- { text: '暖通系统', smsxt: '1002', active: '' },
|
|
|
- { text: '消防系统', smsxt: '1003', active: '' },
|
|
|
- { text: '弱电系统', smsxt: '1004', active: '' },
|
|
|
- { text: '给排水系统', smsxt: '1005', active: '' },
|
|
|
- { text: '电梯系统', smsxt: '1006', active: '' },
|
|
|
- { text: '燃气系统', smsxt: '1007', active: '' },
|
|
|
- { text: '土建系统', smsxt: '1008', active: '' },
|
|
|
- ],
|
|
|
+ systemList: [{ text: '全部', location: '全部', active: 'active' }],
|
|
|
+ modalData: {
|
|
|
+ location: '全部',
|
|
|
+ },
|
|
|
+ modalDataBak: {
|
|
|
+ location: '全部',
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(['plazaId', 'smsxt', 'categoryId']),
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ // 查询筛选条件(右弹窗)
|
|
|
+ this.getFilterList()
|
|
|
+ },
|
|
|
beforeMount() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
@@ -119,6 +192,194 @@ export default {
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
/**
|
|
|
+ *
|
|
|
+ */
|
|
|
+ async onLoad() {
|
|
|
+ if (this.page > 1) {
|
|
|
+ await sleep(1000)
|
|
|
+ }
|
|
|
+ await this.getList()
|
|
|
+ // list无数据,不执行后续分页查询
|
|
|
+ if (!this.list.length) {
|
|
|
+ this.finished = true
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ this.page++
|
|
|
+ this.loading = false
|
|
|
+ if (this.list.length >= this.count) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询低压柜list
|
|
|
+ */
|
|
|
+ async getList() {
|
|
|
+ // 请求地址 POST /data/sms_dygjcxline/queryDygjcxline?plazaId=1000772&page=1&size=10&keyword=123:drawernum,outspec
|
|
|
+ // 参数说明
|
|
|
+ // {
|
|
|
+ // "locfl": 1003,//分类内码
|
|
|
+ // "locflList": [],//分类内码
|
|
|
+ // "pageable:{ //低压出线柜条数
|
|
|
+ // "pageNumber":1,
|
|
|
+ // "pageSize":50
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ page: this.page,
|
|
|
+ size: this.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ // location: '',
|
|
|
+ pageable: {
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: this.innerSize,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // 筛选 配电室之后, location字段上送
|
|
|
+ if (this.modalData.location && this.modalData.location !== '全部') {
|
|
|
+ queryData.postParams.location = this.modalData.location
|
|
|
+ }
|
|
|
+ console.log(queryData)
|
|
|
+ let res
|
|
|
+ try {
|
|
|
+ res = await queryDygjcxline(queryData)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ // mockData
|
|
|
+ res = require('./mockData').queryDygjcxlineData
|
|
|
+ res.data.map((item, index, arr) => {
|
|
|
+ if (item?.count > 5) {
|
|
|
+ // console.log(item)
|
|
|
+ arr[index] = {
|
|
|
+ ...item,
|
|
|
+ loadMore: true,
|
|
|
+ loading: true,
|
|
|
+ finished: false,
|
|
|
+ list: [],
|
|
|
+ page: 2,
|
|
|
+ size: this.innerSize,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.loadMore = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list = [...this.list, ...res.data]
|
|
|
+ this.count = res.count
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 点击加载更多
|
|
|
+ */
|
|
|
+ locationLoadMore(item, index) {
|
|
|
+ // console.log(item, index)
|
|
|
+ item.loadMore = false
|
|
|
+ this.$set(this.list, index, item)
|
|
|
+ this.locationOnLoad(item, index)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询一个location下的onLoad事件
|
|
|
+ */
|
|
|
+ async locationOnLoad({ location }, index) {
|
|
|
+ console.log(location, index)
|
|
|
+ let item = cloneDeep(this.list[index])
|
|
|
+ console.log(item)
|
|
|
+ if (item.page > 2) {
|
|
|
+ await sleep(1000)
|
|
|
+ }
|
|
|
+ await this.getLocationList({ location, index })
|
|
|
+ // 调用接口后的item
|
|
|
+ let currentItem = cloneDeep(this.list[index])
|
|
|
+ // list无数据,不执行后续分页查询
|
|
|
+ if (!currentItem.list.length) {
|
|
|
+ currentItem.finished = true
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ currentItem.page++
|
|
|
+ currentItem.finished = false
|
|
|
+ currentItem.loading = false
|
|
|
+ if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
|
|
|
+ currentItem.finished = true
|
|
|
+ }
|
|
|
+ this.$set(this.list, index, currentItem)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询一个location下的低压柜
|
|
|
+ */
|
|
|
+ async getLocationList(item) {
|
|
|
+ console.log('getLocationList')
|
|
|
+ console.log(item)
|
|
|
+ const { location, index } = item
|
|
|
+ let currentList = cloneDeep(this.list[index])
|
|
|
+ console.log(currentList)
|
|
|
+ console.log('getLocationList')
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ page: 1, // TODO: page
|
|
|
+ size: currentList.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ location: item.location,
|
|
|
+ pageable: {
|
|
|
+ pageNumber: currentList.page,
|
|
|
+ pageSize: this.innerSize,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // 筛选 配电室之后, location字段上送
|
|
|
+ console.log(queryData)
|
|
|
+ let res
|
|
|
+ try {
|
|
|
+ res = await queryDygjcxline(queryData)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ // mockData
|
|
|
+ res = require('./mockData').queryDygjcxlineData1
|
|
|
+ currentList.list = [...currentList.list, ...res.data[0].data]
|
|
|
+ this.$set(this.list, index, currentList)
|
|
|
+ console.log('====================')
|
|
|
+ console.log(this.list)
|
|
|
+ console.log('====================')
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 查询筛选条件
|
|
|
+ */
|
|
|
+ async getFilterList() {
|
|
|
+ let queryData = {
|
|
|
+ data: {
|
|
|
+ // page: this.page,
|
|
|
+ // size: this.size,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ postParams: {
|
|
|
+ locflList: ['5201', '5204', '5209'], //低压柜
|
|
|
+ // location: '',
|
|
|
+ system_code: this.smsxt,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ let res = await querySmsLocation(queryData)
|
|
|
+ console.log(res)
|
|
|
+ if (!res?.data?.data) {
|
|
|
+ this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let data = res?.data?.data || []
|
|
|
+ data.map((item) => {
|
|
|
+ item.text = item.wzjc
|
|
|
+ item.active = ''
|
|
|
+ })
|
|
|
+ console.log(data)
|
|
|
+ this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 点击右侧筛选
|
|
|
*/
|
|
|
handleRightClick() {
|
|
@@ -135,39 +396,54 @@ export default {
|
|
|
let systemList = this.systemList
|
|
|
systemList.map((item) => {
|
|
|
item.active = ''
|
|
|
- if (item.smsxt === data.smsxt) {
|
|
|
+ if (item.location === data.location) {
|
|
|
item.active = 'active'
|
|
|
}
|
|
|
})
|
|
|
// 弹窗选中的系统
|
|
|
- // this.$set(this.modalDataBak, 'system', data.smsxt)
|
|
|
+ this.$set(this.modalDataBak, 'location', data.location)
|
|
|
},
|
|
|
/**
|
|
|
* 重置
|
|
|
*/
|
|
|
reset() {
|
|
|
- // this.modalDataBak = {
|
|
|
- // system: '',
|
|
|
- // }
|
|
|
- // this.modalData = {
|
|
|
- // system: '',
|
|
|
- // }
|
|
|
- // this.system_code = this.smsxt
|
|
|
+ this.modalDataBak = {
|
|
|
+ location: '全部',
|
|
|
+ }
|
|
|
+ this.modalData = {
|
|
|
+ location: '全部',
|
|
|
+ }
|
|
|
+ let { systemList } = this
|
|
|
+ systemList.map((item) => {
|
|
|
+ item.active = ''
|
|
|
+ if (item.text === '全部') {
|
|
|
+ item.active = 'active'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.systemList = systemList
|
|
|
this.showPopup = false
|
|
|
// 初始化数据,查询列表
|
|
|
- // this.initData()
|
|
|
- // this.onLoad()
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
},
|
|
|
/**
|
|
|
* 弹窗确认
|
|
|
*/
|
|
|
confirm() {
|
|
|
- // this.modalData = cloneDeep(this.modalDataBak)
|
|
|
+ this.modalData = cloneDeep(this.modalDataBak)
|
|
|
this.showPopup = false
|
|
|
- // this.system_code = this.modalData.system
|
|
|
// 初始化数据,查询列表
|
|
|
- // this.initData()
|
|
|
- // this.onLoad()
|
|
|
+ this.initData()
|
|
|
+ this.onLoad()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 初始化数据,查询列表
|
|
|
+ */
|
|
|
+ initData() {
|
|
|
+ this.finished = false
|
|
|
+ this.page = 1
|
|
|
+ this.count = 0
|
|
|
+ this.list = []
|
|
|
},
|
|
|
},
|
|
|
}
|
|
@@ -315,8 +591,8 @@ export default {
|
|
|
.m-popup {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 80px);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
.title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
@@ -326,26 +602,33 @@ export default {
|
|
|
// 配电室
|
|
|
.system {
|
|
|
width: 100%;
|
|
|
- height: auto;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
// 专业系统按钮
|
|
|
.system-btn-container {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
+ max-height: calc(100% - 80px);
|
|
|
+ overflow: auto;
|
|
|
flex-wrap: wrap;
|
|
|
flex-flow: wrap;
|
|
|
.system-btn {
|
|
|
width: 100% !important;
|
|
|
min-width: 100% !important;
|
|
|
max-width: 100% !important;
|
|
|
- height: 40px;
|
|
|
+ // min-height: 40px;
|
|
|
+ height: auto;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 10px 10px 10px 0;
|
|
|
+ padding: 5px 0 !important;
|
|
|
.m-btn {
|
|
|
width: 100%;
|
|
|
- height: 32px !important;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 100%;
|
|
|
+ // height: 32px !important;
|
|
|
text-align: center;
|
|
|
background: #eff0f1;
|
|
|
border-radius: 2px;
|
|
|
+ padding: 5px 0 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|