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.
384 lines
12 KiB
384 lines
12 KiB
2 years ago
|
<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 ? roadData.entranceVehicleCount : ''}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="all_item">
|
||
|
|
<view class="all_left">收费站出口车辆数汇总：</view>
|
||
|
|
<view class="all_right">{{roadData.exitVehicleCount ? 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)">
|
||
|
|
<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){
|
||
|
|
item1.highwaySubDataList[0].isSpread = true; //显示展开收起按钮，false时为收起，true为展开
|
||
|
|
}
|
||
|
|
this.roadData = item1
|
||
|
|
// 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>
|