|
@@ -33,7 +33,7 @@
|
|
|
</div>
|
|
|
<!-- 电井 -->
|
|
|
<div class='well-container'>
|
|
|
- <div class='well' v-for='(detail,dIndex) in item.data.slice(0,2)' :key='`${dIndex}_${detail.floor}`'>
|
|
|
+ <div class='well' v-for='(detail) in item.data.slice(0,2)' :key='detail.meterbox'>
|
|
|
<div class='well-title'>{{detail.welldes}}</div>
|
|
|
<div class='meterbox'>
|
|
|
<span class='well-left'>商铺电表箱:</span>
|
|
@@ -45,10 +45,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 加载更多 -->
|
|
|
- <div class='load-more' v-show='!detail.loadmore && item.data.length>2' @click='detail.loadMore=true'></div>
|
|
|
+ <div class='load-more' v-show='!item.loadMore && item.data.length>2' @click='loadMore(item)'>加载更多</div>
|
|
|
<!-- 第三条以上 -->
|
|
|
- <div v-show='detail.loadMore && item.data.length>2'>
|
|
|
- <div class='well' v-for='(detail,dIndex) in item.data.slice(2)' :key='`${dIndex}_${detail.floor}`'>
|
|
|
+ <div v-show='item.loadMore && item.data.length>2' :key='key'>
|
|
|
+ <div class='well' v-for='(detail) in item.data.slice(2)' :key='detail.meterbox'>
|
|
|
<div class='well-title'>{{detail.welldes}}</div>
|
|
|
<div class='meterbox'>
|
|
|
<span class='well-left'>商铺电表箱:</span>
|
|
@@ -60,6 +60,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -77,18 +79,16 @@
|
|
|
<div class='system'>
|
|
|
<h1 class='title'>楼层</h1>
|
|
|
<div class='system-btn-container'>
|
|
|
- <div class='system-btn' v-for='(item,index) in systemList' :key='index'>
|
|
|
- <van-button class='m-btn' :class='item.active' @click='changeSystem(item)'>{{item.text}}</van-button>
|
|
|
+ <div class='system-btn' v-for='(item,index) in floorList' :key='index'>
|
|
|
+ <van-button class='m-btn' :class='item.active' @click='changeFloor(item)'>{{item.text}}</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class='divider'></div>
|
|
|
<!-- 设备设施 -->
|
|
|
<div class='sbss'>
|
|
|
- <h1 class='title'>
|
|
|
- 设备设施
|
|
|
- <!-- <div v-for='i in 10' :key='i'>{{i}}</div> -->
|
|
|
- </h1>
|
|
|
+ <h1 class='title'>电井类型</h1>
|
|
|
+ <!-- <div v-for='i in 10' :key='i'>{{i}}</div> -->
|
|
|
</div>
|
|
|
<div class='footer'>
|
|
|
<van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
|
|
@@ -119,8 +119,11 @@ export default {
|
|
|
page: 1,
|
|
|
size: 20,
|
|
|
list: [],
|
|
|
+ key: new Date().getTime(),
|
|
|
loading: false,
|
|
|
showPopup: false,
|
|
|
+ floorList: [],
|
|
|
+ currentFloor: '全部',
|
|
|
// 弹窗中使用数据
|
|
|
modalData: {
|
|
|
system: '',
|
|
@@ -138,6 +141,17 @@ export default {
|
|
|
},
|
|
|
components: {},
|
|
|
created() {
|
|
|
+ // code:"F6"
|
|
|
+ // gcname:"f6"
|
|
|
+ // gcode:"6F"
|
|
|
+ // gname:"f6"
|
|
|
+ // seq:600
|
|
|
+
|
|
|
+ let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '全部', seq: null }]
|
|
|
+ this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
|
|
|
+ floorList.push({ code, gcname, gcode, gname, seq })
|
|
|
+ })
|
|
|
+ this.floorList = floorList
|
|
|
this.getList()
|
|
|
},
|
|
|
beforeMount() {},
|
|
@@ -152,10 +166,10 @@ export default {
|
|
|
handleRightClick() {
|
|
|
this.showPopup = true
|
|
|
// 设置选中的专业系统
|
|
|
- this.changeSystem({ smsxt: this.system_code })
|
|
|
+ this.changeFloor({ code: this.currentFloor })
|
|
|
},
|
|
|
/**
|
|
|
- * 获取设备列表
|
|
|
+ * 获取电井列表
|
|
|
*/
|
|
|
async getList() {
|
|
|
console.log('getList')
|
|
@@ -193,31 +207,34 @@ export default {
|
|
|
console.log(this.list)
|
|
|
// console.log(JSON.stringify(res_data, null, 2))
|
|
|
},
|
|
|
- async onLoad() {},
|
|
|
+ /**
|
|
|
+ * 点击加载更多,显示该楼层下的更多数据
|
|
|
+ */
|
|
|
+ loadMore(item) {
|
|
|
+ item.loadMore = true
|
|
|
+ this.key = new Date().getTime()
|
|
|
+ },
|
|
|
/**
|
|
|
* 搜索
|
|
|
*/
|
|
|
onSearch() {
|
|
|
// 初始化数据,查询列表
|
|
|
this.initData()
|
|
|
- this.onLoad()
|
|
|
+ this.getList()
|
|
|
},
|
|
|
/**
|
|
|
* 初始化数据,查询列表
|
|
|
*/
|
|
|
initData() {
|
|
|
- this.finished = false
|
|
|
- this.page = 1
|
|
|
- this.count = 0
|
|
|
this.list = []
|
|
|
},
|
|
|
/**
|
|
|
- * popup 更改系统
|
|
|
+ * popup 更改楼层
|
|
|
*/
|
|
|
- changeSystem(data) {
|
|
|
+ changeFloor(data) {
|
|
|
console.log(data)
|
|
|
- let systemList = this.systemList
|
|
|
- systemList.map((item) => {
|
|
|
+ let floorList = this.floorList
|
|
|
+ floorList.map((item) => {
|
|
|
item.active = ''
|
|
|
if (item.smsxt === data.smsxt) {
|
|
|
item.active = 'active'
|
|
@@ -247,7 +264,7 @@ export default {
|
|
|
confirm() {
|
|
|
this.modalData = cloneDeep(this.modalDataBak)
|
|
|
this.showPopup = false
|
|
|
- this.system_code = this.systemList.filter((v) => v.active)[0].smsxt
|
|
|
+ this.system_code = this.floorList.filter((v) => v.active)[0].smsxt
|
|
|
// 初始化数据,查询列表
|
|
|
this.initData()
|
|
|
this.onLoad()
|
|
@@ -259,8 +276,9 @@ export default {
|
|
|
.electric-well-page {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
background-color: #f5f6f7;
|
|
|
// 返回箭头修改
|
|
|
/deep/ .van-nav-bar .van-icon {
|
|
@@ -285,16 +303,18 @@ export default {
|
|
|
// 设备列表
|
|
|
.electric-well-list {
|
|
|
width: 100%;
|
|
|
- flex: 1;
|
|
|
+ // flex: 1;
|
|
|
+ height: calc(100% - 100px);
|
|
|
// padding: 0 10px;
|
|
|
background-color: #fff;
|
|
|
- // overflow: auto;
|
|
|
+ overflow: auto;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #333333;
|
|
|
.floor {
|
|
|
width: 100%;
|
|
|
max-height: 400px;
|
|
|
+ overflow: auto;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
// 楼层title
|
|
@@ -329,7 +349,7 @@ export default {
|
|
|
.well {
|
|
|
width: 100%;
|
|
|
// height: 130px;
|
|
|
- padding-bottom: 10px;
|
|
|
+ padding: 10px 0;
|
|
|
border-bottom: 1px solid #e6e6e6;
|
|
|
.well-title {
|
|
|
font-size: 16px;
|
|
@@ -354,6 +374,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .load-more {
|
|
|
+ width: 80px;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #025baa;
|
|
|
+ background: #e5eef6;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|