zhangqun
2 years ago
parent
5fa453aedc
commit
2333a2db4c
5 changed files with 618 additions and 62 deletions
@ -0,0 +1,389 @@ |
|||||||
|
<template> |
||||||
|
<!-- 查看详情页面 --> |
||||||
|
<view class="detail_con"> |
||||||
|
<view class="detail_box"> |
||||||
|
<view class="top_box"> |
||||||
|
<view class="top_item"> |
||||||
|
<view class="unit_left"> |
||||||
|
<view class="unit">管理单位</view> |
||||||
|
<view class="unit_name">{{roadData.organizationName}}</view> |
||||||
|
</view> |
||||||
|
<view class="unit_time">{{roadData.statDate || ''}} {{roadData.statPeriodValue || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item first"> |
||||||
|
<view class="all_left">收费站入口车辆数汇总：</view> |
||||||
|
<view class="all_right">{{roadData.entranceVehicleCount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item"> |
||||||
|
<view class="all_left">收费站出口车辆数汇总：</view> |
||||||
|
<view class="all_right">{{roadData.exitVehicleCount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item"> |
||||||
|
<view class="all_left">收费站入口车辆数汇总环比：</view> |
||||||
|
<view class="all_right" :class="roadData.entranceVehicleCountMom > 0 ? 'green' : roadData.entranceVehicleCountMom < 0 ? 'red' : ''">{{roadData.entranceVehicleCountMom ? roadData.entranceVehicleCountMom + '%' : roadData.entranceVehicleCountMom == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item"> |
||||||
|
<view class="all_left">收费站出口车辆数汇总环比：</view> |
||||||
|
<view class="all_right" :class="roadData.exitVehicleCountMom > 0 ? 'green' : roadData.exitVehicleCountMom < 0 ? 'red' : ''">{{roadData.exitVehicleCountMom ? roadData.exitVehicleCountMom + '%' : roadData.exitVehicleCountMom == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item"> |
||||||
|
<view class="all_left">收费站入口车辆数汇总同比：</view> |
||||||
|
<view class="all_right" :class="roadData.entranceVehicleCountYoy > 0 ? 'green' : roadData.entranceVehicleCountYoy < 0 ? 'red' : ''">{{roadData.entranceVehicleCountYoy ? roadData.entranceVehicleCountYoy + '%' : roadData.entranceVehicleCountYoy == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="all_item last"> |
||||||
|
<view class="all_left">收费站出口车辆数汇总同比：</view> |
||||||
|
<view class="all_right" :class="roadData.exitVehicleCountYoy > 0 ? 'green' : roadData.exitVehicleCountYoy < 0 ? 'red' : ''">{{roadData.exitVehicleCountYoy ? roadData.exitVehicleCountYoy + '%' : roadData.exitVehicleCountYoy == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="con_item" v-if="roadData.highwaySubDataList" v-for="(item,index) in roadData.highwaySubDataList" :key="index"> |
||||||
|
<view class="spread_box" v-if="item.isSpread"> |
||||||
|
<view class="item_con first"> |
||||||
|
<view class="left">收费站名称：</view> |
||||||
|
<view class="right">{{item.tollStationName || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">高速公路名称：</view> |
||||||
|
<view class="right">{{item.highwayName || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">收费站入口车辆数：</view> |
||||||
|
<view class="right">{{item.entranceVehicleCount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_content"> |
||||||
|
<view class="content top"> |
||||||
|
<view class="left">收费站入口车辆数环比(%)</view> |
||||||
|
<view class="right" :class="item.entranceVehicleCountMom > 0 ? 'green' : item.entranceVehicleCountMom < 0 ? 'red' : ''">{{item.entranceVehicleCountMom ? item.entranceVehicleCountMom + '%' : item.entranceVehicleCountMom == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="content"> |
||||||
|
<view class="left">收费站入口车辆数同比(%)</view> |
||||||
|
<view class="right" :class="item.entranceVehicleCountYoy > 0 ? 'green' : item.entranceVehicleCountYoy < 0 ? 'red' : ''">{{item.entranceVehicleCountYoy ? item.entranceVehicleCountYoy + '%' : item.entranceVehicleCountYoy == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">收费站出口车辆数：</view> |
||||||
|
<view class="right">{{item.exitVehicleCount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_content"> |
||||||
|
<view class="content top"> |
||||||
|
<view class="left">收费站出口车辆数环比(%)</view> |
||||||
|
<view class="right" :class="item.exitVehicleCountMom > 0 ? 'green' : item.exitVehicleCountMom < 0 ? 'red' : ''">{{item.exitVehicleCountMom ? item.exitVehicleCountMom + '%' : item.exitVehicleCountMom == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="content"> |
||||||
|
<view class="left">收费站出口车辆数同比(%)</view> |
||||||
|
<view class="right" :class="item.exitVehicleCountYoy > 0 ? 'green' : item.exitVehicleCountYoy < 0 ? 'red' : ''">{{item.exitVehicleCountYoy ? item.exitVehicleCountYoy + '%' : item.exitVehicleCountYoy == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">免收通行费车辆数：</view> |
||||||
|
<view class="right">{{item.tollExemptVehicleCount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_content"> |
||||||
|
<view class="content top"> |
||||||
|
<view class="left">免收通行费车辆数环比(%)</view> |
||||||
|
<view class="right" :class="item.tollExemptVehicleCountMom > 0 ? 'green' : item.tollExemptVehicleCountMom < 0 ? 'red' : ''">{{item.tollExemptVehicleCountMom ? item.tollExemptVehicleCountMom + '%' : item.tollExemptVehicleCountMom == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="content"> |
||||||
|
<view class="left">免收通行费车辆数同比(%)</view> |
||||||
|
<view class="right" :class="item.tollExemptVehicleCountYoy > 0 ? 'green' : item.tollExemptVehicleCountYoy < 0 ? 'red' : ''">{{item.tollExemptVehicleCountYoy ? item.tollExemptVehicleCountYoy + '%' : item.tollExemptVehicleCountYoy == 0 ? 0 : ''}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">免收通行费金额：</view> |
||||||
|
<view class="right">{{item.tollExemptAmount || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">出口通行费：</view> |
||||||
|
<view class="right">{{item.exitToll || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="item_con"> |
||||||
|
<view class="left">报送人员及联系方式：</view> |
||||||
|
<view class="right">{{item.submitPersonnelContact || ''}}</view> |
||||||
|
</view> |
||||||
|
<view class="expand_box" @click="clickPack(item)"> |
||||||
|
<uni-icons type="top" size="16" color="#2D8CF0"></uni-icons> |
||||||
|
<view class="tit">收起</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="no_spread" v-if="!item.isSpread" @click="handleSpread(item)"> |
||||||
|
<view class="item_con first"> |
||||||
|
<view class="left">收费站名称：</view> |
||||||
|
<view class="right">{{item.tollStationName || ''}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="bottom_box"> |
||||||
|
<p class="edit_btn" @click="goEditPage">编辑</p> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
roadData:{}, |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options){ |
||||||
|
let item = JSON.parse(options.item) |
||||||
|
console.log(item) |
||||||
|
let item1 = JSON.parse(JSON.stringify(item)) |
||||||
|
if(item1.highwaySubDataList){ |
||||||
|
item1.highwaySubDataList[0].isSpread = true; //显示展开收起按钮，false时为收起，true为展开 |
||||||
|
} |
||||||
|
this.roadData = item1 |
||||||
|
// this.getDetail() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//跳转到编辑 |
||||||
|
goEditPage() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '/pages/highway/runData/form?item=' + JSON.stringify(this.roadData) |
||||||
|
}) |
||||||
|
}, |
||||||
|
//点击收起按钮 |
||||||
|
clickPack(item){ |
||||||
|
this.$set(item,"isSpread",false) |
||||||
|
}, |
||||||
|
handleSpread(item){ |
||||||
|
this.$set(item,"isSpread",true) |
||||||
|
}, |
||||||
|
getDetail(){ |
||||||
|
this.$request(getApp().globalData.baseUrl + '/api/biz/highSpeedOperationController/selectById/' + '8A47103EE00000018772BC97AE50FFB7',{},"GET").then(res =>{ |
||||||
|
console.log(res) |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.detail_con{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.detail_box{ |
||||||
|
width: 690rpx; |
||||||
|
background: #fff; |
||||||
|
border-radius: 30rpx; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
margin-bottom: 50rpx; |
||||||
|
|
||||||
|
.top_box{ |
||||||
|
width: 630rpx; |
||||||
|
padding: 38rpx 30rpx 0rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.top_item{ |
||||||
|
width: 100%; |
||||||
|
// margin-top: 38rpx; |
||||||
|
margin-bottom: 60rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.unit_left{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
.unit{ |
||||||
|
width: 102rpx; |
||||||
|
height: 37rpx; |
||||||
|
background: #FFF7E4; |
||||||
|
border-radius: 10rpx; |
||||||
|
border: 1rpx solid #EF9A4F; |
||||||
|
font-size: 20rpx; |
||||||
|
color: #E37616; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.unit_name{ |
||||||
|
font-size: 30rpx; |
||||||
|
color: #333; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 48rpx; |
||||||
|
margin-left: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.unit_time{ |
||||||
|
margin-top: 30rpx; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.all_item{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 32rpx; |
||||||
|
|
||||||
|
&.first{ |
||||||
|
margin-top: 0rpx; |
||||||
|
} |
||||||
|
|
||||||
|
&.last{ |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.all_left{ |
||||||
|
color: #666666; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.all_right{ |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.con_item{ |
||||||
|
width: 570rpx; |
||||||
|
background: #F8F8F8; |
||||||
|
border-radius: 30rpx; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30rpx; |
||||||
|
padding: 30rpx 30rpx; |
||||||
|
|
||||||
|
.spread_box{ |
||||||
|
width: 100%; |
||||||
|
.item_con{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 32rpx; |
||||||
|
|
||||||
|
&.first{ |
||||||
|
margin-top: 0rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.left{ |
||||||
|
color: #666666; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
.right{ |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item_content{ |
||||||
|
width: 570rpx; |
||||||
|
margin: 0 auto; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 30rpx; |
||||||
|
margin-top: 30rpx; |
||||||
|
|
||||||
|
|
||||||
|
.content{ |
||||||
|
width: 516rpx; |
||||||
|
padding: 34rpx 32rpx 30rpx 22rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&.top{ |
||||||
|
border-bottom: 1rpx solid #F2F2F2; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.left{ |
||||||
|
font-size: 24rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
.right{ |
||||||
|
color: #333; |
||||||
|
font-size: 28rpx; |
||||||
|
|
||||||
|
&.green{ |
||||||
|
color: #1ECE5F; |
||||||
|
} |
||||||
|
|
||||||
|
&.red{ |
||||||
|
color: #EB4747; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.expand_box{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
margin-top: 30rpx; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.img{ |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
.tit{ |
||||||
|
color: #2D8CF0; |
||||||
|
font-size: 24rpx; |
||||||
|
margin-left: 12rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.no_spread{ |
||||||
|
width: 100%; |
||||||
|
background: #F8F8F8; |
||||||
|
border-radius: 30rpx; |
||||||
|
.item_con{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 32rpx; |
||||||
|
|
||||||
|
&.first{ |
||||||
|
margin-top: 0rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.left{ |
||||||
|
color: #666666; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
.right{ |
||||||
|
font-size: 28rpx; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottom_box{ |
||||||
|
width: 100%; |
||||||
|
padding: 40rpx 0; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
.edit_btn{ |
||||||
|
width: 180rpx; |
||||||
|
height: 70rpx; |
||||||
|
background: #2D8CF0; |
||||||
|
border-radius: 100rpx; |
||||||
|
color: #fff; |
||||||
|
font-size: 28rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue