update
This commit is contained in:
parent
b98529c16a
commit
87bbc1d3fb
@ -176,7 +176,6 @@ export default {
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
|
||||
@ -977,6 +977,7 @@ export default {
|
||||
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
uni.setStorageSync('phoneInfo',systemInfo)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
// 拿到用户手机的宽 用设计图的宽高比去设定上半部的高度
|
||||
this.phoneWidth = systemInfo.windowWidth
|
||||
@ -3593,6 +3594,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
|
||||
height: 286rpx;
|
||||
margin-left: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
background: linear-gradient(135deg, rgba(255, 238, 232, 1) 0%, rgba(255, 238, 231, 1) 79%, rgba(255, 221, 215, 1) 100%);
|
||||
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/indexBg.svg");
|
||||
//background-repeat: no-repeat;
|
||||
|
||||
160
pages/nationalPage/components/entryCarNumber.vue
Normal file
160
pages/nationalPage/components/entryCarNumber.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="entryCarNumber">
|
||||
<canvas class="entryCarNumber" canvas-id="entryCarNumber" id="entryCarNumber" @tap="handleTap"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
// 营收特征分析
|
||||
name: "entryCarNumber",
|
||||
data() {
|
||||
return {
|
||||
trendsPath:'',
|
||||
width:''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
this.trendsPath = ''
|
||||
this.handleCarData(value)
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleTap(e){
|
||||
console.log('e',e)
|
||||
uChartsInstance[e.target.id].showToolTip(e, {
|
||||
formatter: (item, category, index, opts) => {
|
||||
if (item.data){
|
||||
return item.name + ":" + item.data + '万元';
|
||||
}else{
|
||||
return item.name + ":" + 0 + '万元';
|
||||
}
|
||||
// if (item.data){
|
||||
// if (opts.series && opts.series.length>0){
|
||||
// let text = ''
|
||||
// opts.series.forEach(subItem=>{
|
||||
// if (subItem.name===item.name){
|
||||
// text= item.name + ":" + this.$util.noDecimal(subItem.real[index]) + '元';
|
||||
// }
|
||||
// })
|
||||
// return text
|
||||
// }
|
||||
// }else{
|
||||
// return item.name + ":" + 0 + '元';
|
||||
// }
|
||||
},
|
||||
});
|
||||
uChartsInstance[e.target.id].touchLegend(e);
|
||||
},
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
// let res = {
|
||||
// categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
// series: [
|
||||
// {
|
||||
// name: "2022年",
|
||||
// data: [35,36,31,33,13,34,31,33,13,34]
|
||||
// },
|
||||
// {
|
||||
// name: "2023年",
|
||||
// data: [18,27,21,24,6,28,21,24,6,28]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
console.log('value22222222222',value)
|
||||
let config = {
|
||||
max:this.getSplitNumber(value.max)
|
||||
}
|
||||
this.drawCharts('entryCarNumber', res,config)
|
||||
},
|
||||
getSplitNumber(value){
|
||||
if (value === 0){
|
||||
return 5
|
||||
}else{
|
||||
let sum = Number(value) + Number(value) *0.2
|
||||
return Number((sum / 1000).toFixed(0)) * 1000
|
||||
}
|
||||
},
|
||||
drawCharts(id, data,config) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let _this = this
|
||||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||||
this.width = phoneInfo.screenWidth - 56
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "area",
|
||||
context: ctx,
|
||||
width: _this.width ,
|
||||
height: 213,
|
||||
categories: data.categories,
|
||||
series: data.series,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF","#00B6FF"],
|
||||
padding: [15, 15, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max:config.max
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout( ()=>{
|
||||
// this.canvasToTempImage('trends')
|
||||
},2000)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.entryCarNumber{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
.entryCarNumber{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
pages/nationalPage/components/yearRevenue.vue
Normal file
144
pages/nationalPage/components/yearRevenue.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<canvas class="revenue" canvas-id="yearRevenue" id="yearRevenue" @tap="handleTap"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
// 入区车流量
|
||||
name: "yearRevenue",
|
||||
data() {
|
||||
return {
|
||||
trendsPath:'',
|
||||
width:''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
handler(value) {
|
||||
this.trendsPath = ''
|
||||
if (value){
|
||||
this.handleCarData(value)
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleTap(e){
|
||||
console.log('e',e)
|
||||
uChartsInstance[e.target.id].showToolTip(e, {
|
||||
formatter: (item, category, index, opts) => {
|
||||
if (item.data){
|
||||
return item.name + ":" + this.$util.noDecimal(item.data) + '辆';
|
||||
}else{
|
||||
return item.name + ":" + 0 + '辆';
|
||||
}
|
||||
},
|
||||
});
|
||||
uChartsInstance[e.target.id].touchLegend(e);
|
||||
},
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
console.log('res',res)
|
||||
// let res = {
|
||||
// categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
// series: [
|
||||
// {
|
||||
// name: "2022年",
|
||||
// data: [35,36,31,33,13,34,31,33,13,34]
|
||||
// },
|
||||
// {
|
||||
// name: "2023年",
|
||||
// data: [18,27,21,24,6,28,21,24,6,28]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
let config = {
|
||||
max:this.getSplitNumber(value.max)
|
||||
}
|
||||
this.drawCharts('yearRevenue', res,config)
|
||||
},
|
||||
getSplitNumber(value){
|
||||
if (value === 0){
|
||||
return 5
|
||||
}else{
|
||||
let sum = Number(value) + Number(value) *0.2
|
||||
return Number((sum / 1000).toFixed(0)) * 1000
|
||||
}
|
||||
},
|
||||
drawCharts(id, data,config) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let _this = this
|
||||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||||
this.width = phoneInfo.screenWidth - 28
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "column",
|
||||
context: ctx,
|
||||
width: _this.width,
|
||||
height: 208,
|
||||
categories: data.categories,
|
||||
series: data.series,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
canvas2d: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
|
||||
padding: [15, 40, 5, 0],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
position:'right',
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max:config.max
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 5,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
.revenue{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="top">
|
||||
<image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png"/>
|
||||
<div class="top" :style="{height:menu.height + menu.top+212+'rpx'}">
|
||||
<!-- <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png"/>-->
|
||||
<div class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
|
||||
<image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
||||
</div>
|
||||
@ -9,104 +9,111 @@
|
||||
<p class="pageTitle" >欢度国庆</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageContent">
|
||||
<!-- 服务区当日营收 Top5-->
|
||||
<div class="dailyRevenue">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{ dayName }}营收 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(1)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div class="itemTop">
|
||||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/firstItemIcon.svg"/>
|
||||
<div class="revenueBox">
|
||||
<p class="revenueValue">{{ $util.fmoney(revenueSum,2) }}</p>
|
||||
<p class="revenueText">总营收 <span>/元</span></p>
|
||||
<div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
|
||||
<div class="tabBox">
|
||||
<div :class="selectTab===1?'tabItem selectTab':'tabItem'" @click="changeTab(1)">排行分析</div>
|
||||
<div :class="selectTab===2?'tabItem selectTab':'tabItem'" @click="changeTab(2)">同比分析</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectTab===1">
|
||||
<!-- 服务区当日营收 Top5-->
|
||||
<div class="dailyRevenue">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{ dayName }}营收 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(1)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in revenueList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<!-- <span class="type">{{item.ShopRegionName}}</span>-->
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}</span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<span class="itemValue">{{$util.fmoney(item.CashPay,2)}}<span class="unit">/元</span></span>
|
||||
<div class="listBox">
|
||||
<div class="itemTop">
|
||||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/firstItemIcon.svg"/>
|
||||
<div class="revenueBox">
|
||||
<p class="revenueValue">{{ $util.fmoney(revenueSum,2) }}</p>
|
||||
<p class="revenueText">总营收 <span>/元</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in revenueList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<!-- <span class="type">{{item.ShopRegionName}}</span>-->
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}</span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<span class="itemValue">{{$util.fmoney(item.CashPay,2)}}<span class="unit">/元</span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 当日入区车流量 Top5-->
|
||||
<div class="dailyEntry">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryIcon.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{dayName}}入区车流量 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(2)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div class="itemTop">
|
||||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pass.svg"/>
|
||||
<div class="revenueBox">
|
||||
<p class="revenueValue">{{$util.noDecimal(entrySum)}}</p>
|
||||
<p class="revenueText">总车流量<span>/辆</span></p>
|
||||
<!-- 当日入区车流量 Top5-->
|
||||
<div class="dailyEntry">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryIcon.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{dayName}}入区车流量 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(2)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in entryCarList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<span class="itemValue">{{$util.noDecimal(item.Vehicle_Count) }}<span class="unit">/辆</span></span>
|
||||
<div class="listBox">
|
||||
<div class="itemTop">
|
||||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pass.svg"/>
|
||||
<div class="revenueBox">
|
||||
<p class="revenueValue">{{$util.noDecimal(entrySum)}}</p>
|
||||
<p class="revenueText">总车流量<span>/辆</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in entryCarList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<span class="itemValue">{{$util.noDecimal(item.Vehicle_Count) }}<span class="unit">/辆</span></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 当日入区车流量增幅 Top5-->
|
||||
<div class="dailyEntryAdd">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{dayName}}入区车流量增幅 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(3)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
<!-- 当日入区车流量增幅 Top5-->
|
||||
<div class="dailyEntryAdd">
|
||||
<div class="dailyContent">
|
||||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
|
||||
<div class="list">
|
||||
<div class="listTop">
|
||||
<p class="title">{{dayName}}入区车流量增幅 Top5</p>
|
||||
<div class="moreBox" @click="handleGoMore(3)">
|
||||
<span class="text">查看更多</span>
|
||||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in addList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<image class="addIcon" src='/static/images/examine/add.svg'/>
|
||||
<span class="itemValue">{{item.Entry_GrowthRate}}%</span>
|
||||
<div class="listBox">
|
||||
<div class="listItemTop" >
|
||||
<div class="listTopItem" v-for="(item,index) in addList" :key="index">
|
||||
<div class="itemLeft">
|
||||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||||
</div>
|
||||
<div class="itemRight">
|
||||
<image class="addIcon" src='/static/images/examine/add.svg'/>
|
||||
<span class="itemValue">{{item.Entry_GrowthRate}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -114,16 +121,68 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectTab===2" class="selectTab2">
|
||||
<div class="detail">
|
||||
<div class="detailTop">
|
||||
<p class="tabTitle">营收同比</p>
|
||||
<span class="timeText">{{showTimeText}}</span>
|
||||
</div>
|
||||
<div class="money">
|
||||
<div class="moneyTop">
|
||||
<p class="moneyTitle">2023年对客营收金额:</p>
|
||||
<!-- -->
|
||||
<p class="sumMoney">{{ $util.fmoney(currentRevenue,2) }}元</p>
|
||||
</div>
|
||||
<div class="moneyTop">
|
||||
<p class="moneyTitle">2022年对客营收金额:</p>
|
||||
<p class="sumMoney">{{ $util.fmoney(compareRevenue,2) }}元</p>
|
||||
</div>
|
||||
<div class="moneyTop">
|
||||
<p class="moneyTitle">同期对比:</p>
|
||||
<p class="sumMoney">{{add}}%</p>
|
||||
</div>
|
||||
<div class="desc">
|
||||
<div class="descLeft">
|
||||
<p style="line-height: 36rpx">注:</p>
|
||||
</div>
|
||||
<div class="descRight">
|
||||
<p>2022年国庆假期为10.1-10.7,共7日</p>
|
||||
<p>2023年双节假期为9.28-10.6,共8日</p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<p class="tabTitle">入区车流量</p>
|
||||
<span class="unit">单位:辆</span>
|
||||
<YearRevenue :dataList="carCompareList"/>
|
||||
<p class="descText">注:入区车辆数按当期卡口设备的服务区,计算的平均每日入区数量</p>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
<p class="tabTitle">营收特征分析</p>
|
||||
<span class="unit">单位:万元</span>
|
||||
<EntryCarNumber :data="compareRevenueList"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/util/index.js'
|
||||
import YearRevenue from "./components/yearRevenue.vue";
|
||||
import EntryCarNumber from "./components/entryCarNumber.vue";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {EntryCarNumber, YearRevenue},
|
||||
data(){
|
||||
return {
|
||||
selectTab:1,
|
||||
statusBarHeight:0,
|
||||
menu:{},
|
||||
revenueList: [],// 营收排行
|
||||
@ -132,7 +191,17 @@ export default {
|
||||
entrySum:0,// 入区总计
|
||||
addList:[],// 增幅排行
|
||||
time:'',
|
||||
dayName:''
|
||||
dayName:'',
|
||||
showTimeText:'',// 右上角显示的时间
|
||||
carCompareList:{},// 车流对比
|
||||
currentRevenue:0,//今年的营收总额
|
||||
compareRevenue:0,// 去年的营收总额
|
||||
add:0,// 增幅
|
||||
compareRevenueList:{},// 营收图表数据
|
||||
flagGetRevenue:false,// 拿到营收排行
|
||||
flagGetCar:false,// 车流排行
|
||||
flagGetCarCompare:false,//车流比较
|
||||
flagGetRevenueCompare:false,// 营收比较
|
||||
}
|
||||
},
|
||||
onLoad(query){
|
||||
@ -149,6 +218,16 @@ export default {
|
||||
})
|
||||
this.time = query.time
|
||||
const date = new Date(query.time)
|
||||
if (new Date(query.time).getTime() > new Date('2023-09-27').getTime()){
|
||||
const date = new Date(query.time)
|
||||
let m = date.getMonth()+1
|
||||
let d = date.getDate()
|
||||
this.showTimeText = `9.28-${m}.${d}`
|
||||
}else{
|
||||
this.showTimeText = `9.28-9.28`
|
||||
}
|
||||
|
||||
|
||||
let y = date.getFullYear()
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
@ -160,6 +239,17 @@ export default {
|
||||
this.handleGetCar(query.time)
|
||||
},
|
||||
methods:{
|
||||
// 切换标签卡
|
||||
changeTab(num){
|
||||
this.selectTab = num
|
||||
if (num===2 && JSON.stringify(this.carCompareList)==='{}' || num===2 && JSON.stringify(this.compareRevenueList)==='{}'){
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
this.handleGetCarCompare()
|
||||
this.handleGetRevenueCompare()
|
||||
}
|
||||
},
|
||||
handleGoMore(type){
|
||||
uni.navigateTo({
|
||||
url:`/pages/nationalPage/moreList?type=${type}&time=${this.time}&dayName=${this.dayName}`
|
||||
@ -181,8 +271,8 @@ export default {
|
||||
console.log('拿到营收排行',data)
|
||||
this.revenueSum = data.Result_Data.OtherData
|
||||
this.revenueList = data.Result_Data.List.slice(0,5)
|
||||
if (this.entrySum && this.entryCarList && this.entryCarList.length>0 && this.addList && this.addList.length>0
|
||||
&& this.revenueSum && this.revenueList && this.revenueList.length>0){
|
||||
this.flagGetRevenue = true
|
||||
if (this.flagGetRevenue && this.flagGetCar){
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
@ -194,7 +284,6 @@ export default {
|
||||
ShowGrowthRate:true
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/BigData/GetBayonetGrowthAnalysis',req)
|
||||
console.log('车流排行',data)
|
||||
this.entrySum = data.Result_Data.sumEntryCount
|
||||
this.entryCarList = data.Result_Data.EntryList.slice(0,5)
|
||||
let list = []
|
||||
@ -204,8 +293,113 @@ export default {
|
||||
}
|
||||
})
|
||||
this.addList = list.slice(0,5)
|
||||
if (this.entrySum && this.entryCarList && this.entryCarList.length>0 && this.addList && this.addList.length>0
|
||||
&& this.revenueSum && this.revenueList && this.revenueList.length>0){
|
||||
this.flagGetCar=true
|
||||
if (this.flagGetRevenue && this.flagGetCar){
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 车流比较
|
||||
async handleGetCarCompare(){
|
||||
const req = {
|
||||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||||
StatisticsStartDate:'2023/09/28',
|
||||
StatisticsEndDate:'2023/10/07'
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/BigData/GetBayonetCompare',req)
|
||||
console.log('compare',data)
|
||||
let list = data.Result_Data
|
||||
let compareList = []
|
||||
let curList = []
|
||||
let max = 0
|
||||
data.Result_Data.compareList.forEach(item=>{
|
||||
if (Number(item.value)>max){
|
||||
max = Number(item.value)
|
||||
}
|
||||
compareList.push(Number(item.value))
|
||||
})
|
||||
data.Result_Data.curList.forEach(item=>{
|
||||
if (Number(item.value)>max){
|
||||
max = Number(item.value)
|
||||
}
|
||||
curList.push(Number(item.value))
|
||||
})
|
||||
let res = {
|
||||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
series:[
|
||||
{
|
||||
name:"2022年",
|
||||
data:compareList
|
||||
},
|
||||
{
|
||||
name:"2023年",
|
||||
data:curList
|
||||
}
|
||||
],
|
||||
max:max
|
||||
}
|
||||
this.carCompareList = res
|
||||
this.flagGetCarCompare= true
|
||||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 营收比较
|
||||
async handleGetRevenueCompare(){
|
||||
const req = {
|
||||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||||
StatisticsStartDate:'2023/09/28',
|
||||
StatisticsEndDate:'2023/10/07',
|
||||
StatisticsDate:this.time
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueYOY',req)
|
||||
console.log('22222',data)
|
||||
this.currentRevenue = data.Result_Data.curRevenue
|
||||
this.compareRevenue = data.Result_Data.compareRevenue
|
||||
if (data.Result_Data.curRevenue && data.Result_Data.compareRevenue){
|
||||
this.add = ((data.Result_Data.curRevenue / data.Result_Data.compareRevenue)*100).toFixed(2)
|
||||
}
|
||||
let list = data.Result_Data
|
||||
let compareList = []
|
||||
let realCompareList = []
|
||||
let curList = []
|
||||
let realCurList = []
|
||||
let max =0
|
||||
data.Result_Data.compareList.forEach(item=>{
|
||||
let number = Number((item.value / 10000).toFixed(2))
|
||||
if (number>max){
|
||||
max = number
|
||||
}
|
||||
compareList.push(number)
|
||||
realCompareList.push(item.value)
|
||||
})
|
||||
data.Result_Data.curList.forEach(item=>{
|
||||
let number = Number((item.value / 10000).toFixed(2))
|
||||
if (number>max){
|
||||
max = number
|
||||
}
|
||||
curList.push(number)
|
||||
realCurList.push(item.value)
|
||||
})
|
||||
let res = {
|
||||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
series:[
|
||||
{
|
||||
name:"2022年",
|
||||
data:compareList,
|
||||
real:realCompareList
|
||||
},
|
||||
{
|
||||
name:"2023年",
|
||||
data:curList,
|
||||
real:realCurList
|
||||
}
|
||||
],
|
||||
max:max
|
||||
}
|
||||
this.compareRevenueList = res
|
||||
console.log('this.compareRevenueList',this.compareRevenueList)
|
||||
this.flagGetRevenueCompare=true
|
||||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
@ -222,12 +416,16 @@ export default {
|
||||
height: 100%;
|
||||
.top{
|
||||
width: 100%;
|
||||
height: 560rpx;
|
||||
position: relative;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: cover;
|
||||
z-index:3;
|
||||
.topBg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
z-index: 4;
|
||||
}
|
||||
.header{
|
||||
position: fixed;
|
||||
@ -268,7 +466,34 @@ export default {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx 28rpx;
|
||||
transform: translateY(-260rpx);
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
//transform: translateY(-260rpx);
|
||||
|
||||
.tabBox{
|
||||
width: 100%;
|
||||
height: 76rpx;
|
||||
background: #F6E8E5;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 8rpx;
|
||||
.tabItem{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #786B6C;
|
||||
}
|
||||
.selectTab{
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
color: #F95222;
|
||||
}
|
||||
}
|
||||
|
||||
.dailyRevenue{
|
||||
width: 100%;
|
||||
height: 680rpx;
|
||||
@ -704,7 +929,152 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectTab2{
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 8rpx;
|
||||
.detail{
|
||||
margin-bottom: 24rpx;
|
||||
.tabTitle{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.descText{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.detailTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tabTitle{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.timeText{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx
|
||||
}
|
||||
}
|
||||
|
||||
.money{
|
||||
width:calc(100% - 32px);
|
||||
padding: 18px 16px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 4px;
|
||||
.moneyTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
//.moneyTopItem{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.moneyTitle{
|
||||
font-size: 28rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.sumMoney{
|
||||
font-size: 16px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #341D00;
|
||||
line-height: 24px;
|
||||
.notice{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a69e9f;
|
||||
line-height: 20px;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
.descLeft{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.descRight{
|
||||
p{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
.icon{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.add{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FA5151;
|
||||
line-height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.text{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user