You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
9.2 KiB
396 lines
9.2 KiB
<template> |
|
<view class="page"> |
|
<view class="list_box" v-for="(item,index) in data" :key="index"> |
|
<view class="list_top"> |
|
<view class="unit_tags">管理单位</view> |
|
<view class="unit_name">{{item.organizationName}}</view> |
|
</view> |
|
<view class="report_time">{{item.statDate || ''}}<text style="margin-left:16rpx;">{{item.statPeriod || ''}}</text> |
|
</view> |
|
<view @click="item2.show = !item.show" class="list_item_box" v-for="(item2,index2) in item.highwaySubDataList" |
|
:key="item2.id"> |
|
<view class="list_item"> |
|
<view class="list_item_label">收费站名称：</view> |
|
<view class="list_item_cnt">{{item2.tollStationName}}{{item2.show}}</view> |
|
</view> |
|
<view class="content" :style="!item2.show ? '' : 'display:none;'"> |
|
<view class="list_item"> |
|
<view class="list_item_label">高速公路名称：</view> |
|
<view class="list_item_cnt">{{item2.highwayName}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">收费站入口车辆数：</view> |
|
<view class="list_item_cnt">{{item2.entranceVehicleCount}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">收费站出口车辆数：</view> |
|
<view class="list_item_cnt">{{item2.exitVehicleCount}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">免收通行费车辆数：</view> |
|
<view class="list_item_cnt">{{item2.tollExemptVehicleCount}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">免收通行费金额：</view> |
|
<view class="list_item_cnt">{{item2.tollExemptAmount}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">出口通行费：</view> |
|
<view class="list_item_cnt">{{item2.exitToll}}</view> |
|
</view> |
|
<view class="list_item"> |
|
<view class="list_item_label">报送人员及联系方式：</view> |
|
<view class="list_item_cnt">{{item2.submitPersonnelContact}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 按钮 --> |
|
<view class="act_btn_box"> |
|
<view class="act_btn blue">编辑</view> |
|
<view class="act_btn" style="margin-right: 30rpx;">查看详情</view> |
|
</view> |
|
</view> |
|
<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore" |
|
:contentText="contentText"></uni-load-more> |
|
<!-- 筛选 --> |
|
<view class="foot_btn_box"> |
|
<view @click="goPage('/pages/highway/runData/form')" class="act_btn"><uni-icons type="plusempty" size="30" |
|
color="#fff"></uni-icons>新建</view> |
|
<view @click="showSearch" class="act_btn btn1"><uni-icons type="search" size="30" color="#2D8CF0"></uni-icons>查询 |
|
</view> |
|
</view> |
|
<!-- 筛选 --> |
|
<view class="pop_box"> |
|
<uni-popup ref="popup" style="width: 100%;" background-color="#fff"> |
|
<view class="pop_title"> |
|
查询 |
|
</view> |
|
<view class="popup-content"> |
|
<view class="cont_tit"> |
|
统计起止时间 |
|
</view> |
|
<view class="time_box"> |
|
<uni-datetime-picker v-model="timeRange" type="daterange" @maskClick="maskClick" /> |
|
</view> |
|
<view class="cont_tit picker"> |
|
统计时段 |
|
</view> |
|
<view class="picker_box"> |
|
<uni-data-picker v-model="unit" :localdata="unitData" :map="{text:'deptName',value:'deptId'}" |
|
popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker> |
|
</view> |
|
</view> |
|
<view class="btn_box"> |
|
<p class="btn" @click="searchReset">重置</p> |
|
<p class="btn" @click="searchList">确认</p> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
data: [], |
|
current: 0, |
|
size: 10, |
|
hasMore: true, |
|
status: '', |
|
query: { |
|
statDateStart: '', |
|
statDateEnd: '', |
|
statPeriod: '' |
|
}, |
|
timeRange: [], |
|
contentText: { |
|
contentdown: "点击查看更多", |
|
contentrefresh: "正在加载...", |
|
contentnomore: "没有更多数据了", |
|
}, |
|
} |
|
}, |
|
onLoad() { |
|
this.loadMore(); |
|
}, |
|
onUnload() { |
|
this.hasMore = true; |
|
this.data = []; |
|
}, |
|
onPullDownRefresh() { |
|
console.log('onPullDownRefresh'); |
|
this.data = []; |
|
this.current = 0; |
|
this.hasMore = true; |
|
this.loadMore(); |
|
}, |
|
methods: { |
|
//确认查询 |
|
searchList() { |
|
this.data = []; |
|
this.current = 0; |
|
this.hasMore = true; |
|
this.loadMore(); |
|
}, |
|
//重置搜索 |
|
searchReset() { |
|
|
|
}, |
|
//查询 |
|
showSearch() { |
|
this.$refs.popup.open('bottom') |
|
}, |
|
loadMore() { |
|
if (this.hasMore) { |
|
this.current = this.current + 1; |
|
this.status = 'loading'; |
|
let params = ''; |
|
Object.keys(this.query).map(key => { |
|
params = params + '&' + key + '=' + this.query[key] |
|
}) |
|
this.$request(getApp().globalData.baseUrl + '/api/biz/highwayParentDataController/list?page=' + this.current + |
|
'&pageSize=' + this.size + '&_t=' + Date.parse(new Date()) + params, {}, 'GET').then(res => { |
|
if (res.code == 200) { |
|
res.data.list.map(item => { |
|
item.highwaySubDataList.map(item2 => { |
|
item2.show = false; |
|
}) |
|
}) |
|
console.log(res.data.list) |
|
this.data = this.data.concat(res.data.list); |
|
if (res.data.list.length == 0 || res.data.totalCount < this.size) { |
|
this.hasMore = false; |
|
this.status = 'nomore'; |
|
} else { |
|
this.status = 'more'; |
|
} |
|
uni.stopPullDownRefresh(); |
|
} else { |
|
this.status = 'more'; |
|
uni.stopPullDownRefresh(); |
|
} |
|
}).catch(() => { |
|
this.status = 'more'; |
|
uni.stopPullDownRefresh(); |
|
}) |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.page { |
|
min-height: 100vh; |
|
padding: 30rpx 30rpx 0; |
|
} |
|
|
|
.list_box { |
|
background-color: #fff; |
|
border-radius: 30rpx; |
|
margin-bottom: 30rpx; |
|
padding: 30rpx; |
|
|
|
.list_top { |
|
display: flex; |
|
margin-bottom: 30rpx; |
|
|
|
.unit_tags { |
|
height: 37rpx; |
|
color: #E37616; |
|
font-size: 20rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
background: #FFF7E4; |
|
border-radius: 10rpx; |
|
border: 1rpx solid #EF9A4F; |
|
padding: 0 11rpx; |
|
} |
|
|
|
.unit_name { |
|
color: #333333; |
|
font-size: 30rpx; |
|
font-family: PingFang SC-Bold, PingFang SC; |
|
font-weight: bold; |
|
line-height: 48rpx; |
|
margin-left: 20rpx; |
|
word-break: break-all; |
|
} |
|
} |
|
|
|
.report_time { |
|
color: #999999; |
|
font-size: 24rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 48rpx; |
|
text-align: center; |
|
margin-bottom: 30rpx; |
|
} |
|
|
|
.list_item_box { |
|
padding: 30rpx 30rpx 0; |
|
background: #F8F8F8; |
|
border-radius: 30rpx; |
|
margin-bottom: 30rpx; |
|
} |
|
|
|
.list_item { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 0 0 30rpx; |
|
|
|
.list_item_label { |
|
color: #666666; |
|
font-size: 26rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 48rpx; |
|
} |
|
|
|
.list_item_cnt { |
|
color: #333333; |
|
font-size: 28rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 48rpx; |
|
text-align: right; |
|
margin-left: 20rpx; |
|
word-break: break-all; |
|
} |
|
} |
|
|
|
.act_btn_box { |
|
display: flex; |
|
flex-direction: row-reverse; |
|
margin: 10rpx 0; |
|
|
|
.act_btn { |
|
width: 180rpx; |
|
color: #666666; |
|
font-size: 28rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 70rpx; |
|
background: #FFFFFF; |
|
border-radius: 100rpx; |
|
border: 1rpx solid #C1C1C1; |
|
text-align: center; |
|
|
|
&.blue { |
|
color: #fff; |
|
background: #2D8CF0; |
|
border-color: #2D8CF0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.foot_btn_box { |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 20rpx; |
|
display: flex; |
|
justify-content: space-around; |
|
|
|
.act_btn { |
|
width: 329rpx; |
|
line-height: 90rpx; |
|
display: flex; |
|
justify-content: center; |
|
color: #FFFFFF; |
|
font-size: 28rpx; |
|
font-family: PingFang SC-Regular, PingFang SC; |
|
font-weight: 400; |
|
background: #2D8CF0; |
|
border-radius: 100rpx; |
|
border: 1px solid #2D8CF0; |
|
|
|
.txt { |
|
margin-left: 9rpx; |
|
} |
|
|
|
&.btn1 { |
|
color: #2D8CF0; |
|
background: #F6F6F6; |
|
} |
|
} |
|
} |
|
|
|
.pop_box { |
|
.pop_title { |
|
width: 100%; |
|
display: flex; |
|
justify-content: center; |
|
margin: 30rpx 0; |
|
} |
|
|
|
.popup-content { |
|
// display: flex; |
|
// flex-direction: column; |
|
|
|
.cont_tit { |
|
width: 100%; |
|
display: flex; |
|
margin-bottom: 30rpx; |
|
margin-left: 30rpx; |
|
|
|
&.picker { |
|
margin-top: 30rpx; |
|
} |
|
} |
|
|
|
.time_box { |
|
width: 690rpx; |
|
margin: 0 auto; |
|
|
|
/deep/ .uni-date-x--border { |
|
border-radius: 30rpx; |
|
|
|
.uni-date-x { |
|
background: transparent; |
|
} |
|
} |
|
} |
|
|
|
.picker_box { |
|
width: 690rpx; |
|
margin: 0 auto; |
|
|
|
/deep/.input-value-border { |
|
border-radius: 30rpx; |
|
} |
|
} |
|
} |
|
|
|
.btn_box { |
|
width: 100%; |
|
height: 120rpx; |
|
display: flex; |
|
margin-top: 20px; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
.btn { |
|
width: 320rpx; |
|
height: 78rpx; |
|
background: #FFFFFF; |
|
border-radius: 20rpx 20rpx 20rpx 20rpx; |
|
border: 1rpx solid #D73232; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 26rpx; |
|
color: #D73232; |
|
|
|
&:last-child { |
|
background: #D73232; |
|
margin-left: 50rpx; |
|
color: #FFFFFF; |
|
} |
|
} |
|
} |
|
} |
|
</style> |