529 lines
16 KiB
Vue
529 lines
16 KiB
Vue
<template>
|
|
<view class="main">
|
|
<div class="headerTopBox" >
|
|
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
|
|
<image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
|
<div class="timeSelect">
|
|
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
|
|
<picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
|
|
<view class="time">
|
|
<view class="text">{{ searchText }}</view>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleGoSelectService">
|
|
<div class="selectService" >
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
|
|
<p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="otherCharts">
|
|
<span class="itemTitle">车流数据</span>
|
|
<scroll-view class="list" :scroll-y="true">
|
|
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item,index)">
|
|
<div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
|
|
<div class="itemTop">
|
|
<div class="itemLeft">
|
|
<div style="display: flex;align-items: center">
|
|
<img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
|
|
<span class="serverName">{{item.Serverpart_Name || ''}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="itemRight">
|
|
<div class="entryRate">
|
|
<text class="entryValue">{{item.Entry_Rate ||''}}%</text>
|
|
<text class="entryLabel">入区率</text>
|
|
</div>
|
|
<img class="img" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="childList" v-if="item.showChild" >
|
|
<view class="childItem">
|
|
<text class="childValue">{{item.RevenueAmount?$util.fmoney($util.getMoney(item.RevenueAmount/10000)):''}}</text>
|
|
<text class="childLabel">营收 /万元</text>
|
|
</view>
|
|
<view class="childItem">
|
|
<text class="childValue">{{item.AvgVehicleAmount ||''}}</text>
|
|
<text class="childLabel">单车 /元</text>
|
|
</view>
|
|
<view class="childItem">
|
|
<text class="childValue">{{item.Vehicle_Count?$util.fmoney($util.getMoney(item.Vehicle_Count/10000)):''}}</text>
|
|
<text class="childLabel">入区 /万辆</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "serviceMessage",
|
|
data(){
|
|
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
|
return {
|
|
menu:{}, //手机参数
|
|
serviceInfo:{},
|
|
lastDay:lastDay,
|
|
searchText:'',
|
|
regionList:[]
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
let nearServiceInfo = uni.getStorageSync('nearService')
|
|
if (!storeServiceInfo){
|
|
this.serviceInfo = nearServiceInfo
|
|
}else{
|
|
this.serviceInfo = storeServiceInfo
|
|
}
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
if (storeTime){
|
|
this.time = storeTime
|
|
}
|
|
this.searchText = this.time
|
|
console.log('this.serviceInfo',this.serviceInfo)
|
|
},
|
|
onShow(){
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
let nearServiceInfo = uni.getStorageSync('nearService')
|
|
if (!storeServiceInfo){
|
|
this.serviceInfo = nearServiceInfo
|
|
}else{
|
|
this.serviceInfo = storeServiceInfo
|
|
}
|
|
this.getCarData()
|
|
},
|
|
methods:{
|
|
handleBack(){
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
async changeAllProvinceSearch(e){
|
|
this.searchText = e.detail.value
|
|
},
|
|
handleGoSelectService() {
|
|
uni.navigateTo({
|
|
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBINew/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
|
})
|
|
},
|
|
getCarData(){
|
|
this.regionList=[]
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
const date = new Date(this.time)
|
|
const y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
let req
|
|
if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
|
|
req = {
|
|
StatisticsMonth:`${y}${m}`,
|
|
}
|
|
}else{
|
|
req = {
|
|
StatisticsMonth:`${y}${m}`,
|
|
Serverpart_ID :this.serviceInfo.Serverpart_ID || "",
|
|
}
|
|
}
|
|
request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis',req).then(res=>{
|
|
console.log('res',res)
|
|
this.carData = res.Result_Data.List
|
|
this.carData.forEach(item=>{
|
|
item.Serverpart_ID = this.serviceInfo.Serverpart_ID
|
|
item.showChild = false
|
|
})
|
|
this.regionList = this.carData
|
|
console.log('this.carData',this.carData)
|
|
uni.hideLoading()
|
|
// let sumObj = {
|
|
// Serverpart_Name:'',
|
|
// Serverpart_Region:'',
|
|
// SectionFlow_Count:0,
|
|
// Vehicle_Count:0,
|
|
// showChild:false
|
|
// }
|
|
// this.carData.forEach(item=>{
|
|
// sumObj.Serverpart_Name = item.Serverpart_Name
|
|
// sumObj.Serverpart_Region = item.Serverpart_Region
|
|
// sumObj.SectionFlow_Count += item.SectionFlow_Count
|
|
// sumObj.Vehicle_Count += item.Vehicle_Count
|
|
// })
|
|
// if (sumObj.Vehicle_Count && sumObj.SectionFlow_Count){
|
|
// sumObj.Entry_Rate = ((sumObj.Vehicle_Count / sumObj.SectionFlow_Count)*100).toFixed(2)
|
|
// }
|
|
// console.log('sumObj',sumObj)
|
|
// sumObj.Vehicle_Count = this.$util.fmoney(this.$util.getMoney(sumObj.Vehicle_Count / 10000),2)
|
|
// this.regionList = [sumObj]
|
|
})
|
|
},
|
|
handleNoneChild(obj,selectIndex){
|
|
this.regionList.forEach((item,index)=>{
|
|
if (item.name === obj.name && index===selectIndex){
|
|
item.showChild = !item.showChild
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100%;
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
.headerTopBox{
|
|
width: 100%;
|
|
//height: 152px;
|
|
height: 324px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
|
|
.header{
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
}
|
|
.timeSelect{
|
|
display: flex;
|
|
align-items: center;
|
|
.selectIcon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.time{
|
|
display: flex;
|
|
align-items: center;
|
|
.text{
|
|
margin: 0 5px;
|
|
color: #fff;
|
|
}
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.picker{
|
|
position: absolute;
|
|
left: 16px;
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.otherCharts{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
/*日结上传*/
|
|
.chartsTop {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.serviceArea{
|
|
box-sizing: border-box;
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.right{
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
.day {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 44rpx;
|
|
margin-right: 4px;
|
|
}
|
|
.uni-input {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ae664e;
|
|
line-height: 36rpx;
|
|
}
|
|
.icon {
|
|
width: 24px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.itemTitle{
|
|
display: block;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
margin-top: 12px;
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: calc(100ch - 400px);
|
|
margin-top: 24px;
|
|
box-sizing: border-box;
|
|
padding-bottom: 12px;
|
|
.listItem{
|
|
margin-bottom: 12px;
|
|
border: 1px solid #D9DBE0;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
.bg{
|
|
position: absolute;
|
|
right: 0;top: 0;
|
|
width: 97px;
|
|
height: 97px;
|
|
}
|
|
.listBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px 16px;
|
|
background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
|
|
border-bottom: 1px solid #D9DBE0;
|
|
border-radius: 8px;
|
|
.itemTop{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.itemLeft{
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
background: rgba(26, 95, 255, 0.1);
|
|
border-radius: 14px;
|
|
.itemFixed{
|
|
width: 12px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
}
|
|
.serverName{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
color: #1A5FFF;
|
|
line-height: 22px
|
|
}
|
|
}
|
|
.itemRight{
|
|
display: flex;
|
|
align-items: center;
|
|
.entryRate{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.entryValue{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: red;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
.entryLabel{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.img{
|
|
width: 26px;
|
|
height: 14px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.itemDetail{
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.message{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.cirRate{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.label{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px
|
|
}
|
|
.value{
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.childList{
|
|
border-radius: 8px 8px 0 0;
|
|
box-sizing: border-box;
|
|
margin-left: 16px;
|
|
width: calc(100% - 32px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px;
|
|
.childItem{
|
|
width: calc(100% / 3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.childLabel{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px
|
|
}
|
|
.childValue{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|