suojin
/
transport_integrated_app
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
海信交通一体化小程序
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.
88 Commits
2 Branches
0 Tags
5.9 MiB
 
 
 
 
 
Tag: Branch: Tree: 75fe6f23ff
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '75fe6f23ff'
${ noResults }
transport_integrated_app/pages/roadTransport/transportData/detail-copy.vue

383 lines
11 KiB
Raw Blame History

<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>