jinna
3 years ago
parent
2333a2db4c
commit
67074f6b90
6 changed files with 1662 additions and 554 deletions
@ -0,0 +1,383 @@ |
||||
<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.reportingUnitId}}</view> |
||||
</view> |
||||
<view class="unit_time">{{roadData.statisticalDate || ''}} {{roadData.reportPhaseValue}}</view> |
||||
</view> |
||||
<view class="all_item first"> |
||||
<view class="all_left">负责人</view> |
||||
<view class="all_right">{{roadData.responsiblePersonId || ''}}</view> |
||||
</view> |
||||
<view class="all_item"> |
||||
<view class="all_left">除定线、农民工包车辆</view> |
||||
<view class="all_right" >{{roadData.otherCharter == 0 ? 0 : roadData.otherCharter || ''}}</view> |
||||
</view> |
||||
<view class="all_item"> |
||||
<view class="all_left">投放运力：包车数</view> |
||||
<view class="all_right" >{{roadData.capacityCharter == 0 ? 0 : roadData.capacityCharter || ''}}</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)"> |
||||
<image class="img" src="../../../static/image/spread.png" mode=""></image> |
||||
<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">编辑</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.length != 0){ |
||||
// item1.highwaySubDataList[0].isSpread = true; //显示展开收起按钮，false时为收起，true为展开 |
||||
// } |
||||
this.roadData = item |
||||
// this.getDetail() |
||||
}, |
||||
methods: { |
||||
//点击收起按钮 |
||||
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