ahyd_DIB/pages/nationalPage/testPage.vue
2024-04-07 16:13:10 +08:00

721 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="main" >
<div class="img" :style="{left:allScreen?'100%':'0'}">
<div class="imgContent">
<div class="imgTop">
<span class="unit">单位万元<span style="color: red">(可左滑查看)</span></span>
<div class="searchAllScreen">
<img class="allScreenIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allScreenIcon.png"/>
<span class="text" @click="handleShowAllScreen">全屏</span>
</div>
</div>
<qiunDataCharts
type="area"
:opts="opts"
:chartData="res"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="entryCarNumber"
:ontouch="true"
/>
</div>
<scroll-view scroll-y="true" class="scrollView">
<div class="noticeBox" v-if="selectFestival===0">
<div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':''"></div>
<div class="contentBox">
<!-- <img class="contentIcon" src=""/>-->
<img class="contentIcon" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png':''"/>
<div class="contentText" v-if="selectFestival===0">
根据历史大数据显示<br/>
<div style="text-indent: 2rem;font-size: 24rpx">
服务区会在春运前至农历小年夜前<span class="red">农历二十二</span>到底回程小高峰然后流量逐步回落至春运最低点<span class="red">除夕夜</span>大年初二开始随着出行自驾游的高峰来临流量逐步放大会在初六达到整个春运最高峰随后流量逐步回落至次低点<span class="red">元宵节</span>在正月十六出现一波返程小高峰后流量逐步回复正常
</div>
</div>
</div>
</div>
<div class="allPkBox">
<div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':''"></div>
<div class="pkContent">
<div class="contentTop">
<!-- <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />-->
<img class="titleImg" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmSumData.png':''" />
</div>
<div class="pkBox">
<div class="leftBox">
<text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
<text class="label">2024/万元</text>
</div>
<div class="rightBox">
<text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
<text class="label">2023/万元</text>
</div>
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
</div>
<div class="pkBox">
<div class="leftBox revenueLeft">
<text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
<text class="label">2024/万元</text>
</div>
<div class="rightBox revenueRight">
<text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
<text class="label">2023/万元</text>
</div>
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
</div>
<div class="pkBox" style="margin-bottom: 20px">
<div class="leftBox carLeft">
<text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
<text class="label">2024/万辆</text>
</div>
<div class="rightBox carRight">
<text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
<text class="label">2023/万辆</text>
</div>
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
</div>
</div>
</div>
</scroll-view>
</div>
<div class="allScreen" :style="{left:allScreen?'0':'100%'}" >
<div class="bigBox">
<div class="bigImg">
<qiunDataCharts
type="area"
:opts="opts2"
:chartData="res2"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="entryCarNumber2"
:ontouch="true"
:reshow="allScreen"
/>
</div>
<div class="closeBox">
<img class="closeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/closeIcon.svg" @click="handleShowAllScreen"/>
</div>
</div>
</div>
</div>
</template>
<script>
import qiunDataCharts from "./components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import request from '@/util/index.js'
var uChartsInstance = {};
export default {
components: {qiunDataCharts},
data() {
return {
opts:{},
opts2:{},
res:{},
res2:{},
allScreen:false,
ScrollTop:0,
howDayNumber:0,
giveTrendObj:{},
selectFestival: 0,
}
},
onLoad(query){
if (query.detailObj){
this.giveTrendObj = JSON.parse(query.detailObj)
}
if (query.festivalType){
this.selectFestival = Number(query.festivalType)
}
this.lastDay = uni.getStorageSync('lastDay')
const lastDate = new Date(this.lastDay)
// 拿到是春运开始的第几天
let dayNumber = 0
let lastMonth = lastDate.getMonth() + 1
let lastDays = lastDate.getDate()
// 24年春运开始时间为 1.26
if (lastMonth === 1){
dayNumber = lastDays - 26 + 1
}else{
dayNumber = 6 + lastDays
}
console.log('dayNumber',dayNumber)
this.ScrollTop = (dayNumber-3)*30
if (this.selectFestival===0){
this.howDayNumber = dayNumber
}else if (this.selectFestival===1){
this.howDayNumber = 5
}
this.handleGetData()
},
methods:{
async handleGetData(){
uni.showLoading({
title: '正在加载...'
})
const req = {
pushProvinceCode:'340000',
StatisticsDate: this.lastDay,
holidayType: this.selectFestival===0?2:this.selectFestival===1?3:'',
curYear:2024,
compareYear:2023,
}
const data = await request.$webGet('CommercialApi/Revenue/GetHolidayCompare',req)
console.log('data',data)
let dateList = []
let dateList2 = []
let dataObj = data.Result_Data
if (dataObj && dataObj.compareList && dataObj.compareList.length>0){
dataObj.compareList.forEach(item=>{
const date = new Date(item.name)
let m = date.getMonth() + 1
let d = date.getDate()
let dateText = `${m}.${d}`
item.easyDate = dateText
})
}
if (dataObj && dataObj.curList && dataObj.curList.length>0){
dataObj.curList.forEach(item=>{
const date = new Date(item.name)
let m = date.getMonth() + 1
let d = date.getDate()
let dateText = `${m}.${d}`
item.easyDate = dateText
})
}
if (this.selectFestival===0){
for(let i = 1;i<=40;i++){
if (i===7){
// dateList.push(`北小年`)
dateList.push(`大年廿二`)
}else if(i===9){
dateList.push(`南小年`)
}else if(i===15){
dateList.push(`大年三十`)
}else if(i===16){
dateList.push(`春节`)
}else if(i===21){
dateList.push(`初六`)
}else if(i===23){
dateList.push(`初八`)
}else if(i===25){
dateList.push(`初十`)
}else if(i===26){
dateList.push(`正月十一`)
}else if(i===30){
dateList.push(`正月十五`)
}else if(i===31){
dateList.push(`正月十六`)
}else{
dateList.push(`${i}`)
}
}
for(let i = 1;i<=40;i++){
dateList2.push(i)
}
}else if (this.selectFestival===1){
for(let i = 1;i<=5;i++){
dateList.push(`${i}`)
}
for(let i = 1;i<=5;i++){
dateList2.push(i)
}
}
let max = 0
let compareList = []
let realCompareList = []
let curListList = []
let realCurList = []
// 农历日期
let tradDateList = []
if (dataObj){
dateList.forEach((item,index)=>{
// let beforeValue = dataObj.compareList.filter(filter=> filter.easyDate === item)[0]
// beforeValue = beforeValue?beforeValue.value:null
let beforeValue = dataObj.compareList[index].value
if (beforeValue){
if (Number(beforeValue) / 10000 > max){
max = Number(beforeValue) / 10000
}
compareList.push(Number(beforeValue) / 10000)
realCompareList.push(Number(beforeValue))
}
else{
compareList.push(0)
realCompareList.push(0)
}
// let compareValue = dataObj.curList.filter(filter=> filter.easyDate === item)[0]
// compareValue = compareValue?compareValue.value:null
let compareValue = dataObj.curList[index].value
if (compareValue){
if (Number(compareValue) / 10000 > max){
max = Number(compareValue) / 10000
}
curListList.push(Number(compareValue) / 10000)
realCurList.push(Number(compareValue))
}else{
curListList.push(0)
realCurList.push(0)
}
})
}
max = this.getSplitNumber(max)
let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿一','大年廿二','北小年','南小年','大年廿五','大年廿六','大年廿七',
'大年廿八','大年廿九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
'正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿一','正月廿二','正月廿三','正月廿四','正月廿五']
let res = {
categories: dateList,
series:[
{
name:`24年`,
data:curListList,
real:realCurList,
tradDate:list,
howDayNumber:this.howDayNumber,
selectFestival: this.selectFestival
},
{
name:`23年`,
data:compareList,
real:realCompareList,
tradDate:list,
howDayNumber:this.howDayNumber,
selectFestival: this.selectFestival
},
],
max:Number(max.toFixed(2)),
}
let res2 = {
categories: dateList2,
series:[
{
name:`24年`,
data:curListList,
real:realCurList,
tradDate:list,
howDayNumber:this.howDayNumber
},
{
name:`23年`,
data:compareList,
real:realCompareList,
tradDate:list,
howDayNumber:this.howDayNumber
},
],
max:Number(max.toFixed(2)),
}
console.log('res',res)
this.res = res
this.res2 = res2
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
enableScroll: true,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
padding: [15, 15, 5, 5],
dataLabel: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
itemCount: 6,
scrollAlign: 'left',
// fontColor:'red',
// format:"entryCarNumberXFormat"
},
yAxis: {
gridType: "dash",
dashLength: 2,
splitNumber:6,
data: [
{
min: 0,
max: this.selectFestival===0?3000:1500
}
]
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
}
let phoneInfo = uni.getStorageSync('phoneInfo')
console.log('phoneInfo',phoneInfo)
this.opts2 = {
// width:phoneInfo.screenHeight+'px',
// height:(2*phoneInfo.screenWidth)+'px',
categories: res.categories,
series: res.series,
animation: false,
rotate: true,
rotateLock: false,
enableScroll: true,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
padding: [15, 15, 5, 5],
dataLabel: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
itemCount: 40
},
yAxis: {
gridType: "dash",
dashLength: 2,
splitNumber:6,
data: [
{
min: 0,
max:3000
}
]
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
}
uni.hideLoading()
},
handleShowAllScreen(){
this.allScreen = !this.allScreen
},
getSplitNumber(value){
if (value === 0 || value<5){
let num = Math.ceil(Number(value))
return num
}else{
let sum = Number(value) + Number(value) *0.2
return Number((Math.ceil(sum / 1000)).toFixed(0)) * 1000
}
},
// 写死赋值农历日期
handleGetTraditionalDate(){
let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿十一','大年廿十二','大年廿十三','大年廿十四','大年廿十五','大年廿十六','大年廿十七',
'大年廿十八','大年廿十九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
'正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿十一','正月廿十二','正月廿十三','正月廿十四','正月廿十五']
}
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
height: 100vh;
background: #F3F4F9;
box-sizing: border-box;
.img{
width: 100%;
height: calc(100vh - 64rpx);
position: fixed;
box-sizing: border-box;
padding: 0 32rpx;
top: 32rpx;
.imgContent{
width: 100%;
background: #fff;
padding: 24rpx;
border-radius: 16rpx;
box-sizing: border-box;
.imgTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.unit{
margin-left: 24rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.searchAllScreen{
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
padding: 8rpx 10rpx;
border: 2rpx solid #DFDFDF;
background: #fff;
.allScreenIcon{
width: 32rpx;
height: 32rpx;
}
.text{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #6B6C78;
line-height: 36rpx;
}
}
}
}
.scrollView{
height: calc(100% - 312px);
margin-top: 24rpx;
.noticeBox{
width: 100%;
height: 400rpx;
background: #fff;
box-sizing: border-box;
border-radius: 16rpx;
padding: 4rpx;
position: relative;
.springBox{
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
}
.qmBox{
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
}
.boxBg{
z-index: 1;
position: absolute;
top: 4rpx;left: 4rpx;
width: calc(100% - 8rpx);
height: 192rpx;
//background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
border-radius: 16rpx;
}
.contentBox{
position: absolute;
z-index: 2;
width: calc(100% - 8rpx);
height: 100%;
box-sizing: border-box;
padding: 22rpx;
.contentIcon{
width: 180rpx;
height: 44rpx;
}
.contentText{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
//margin-top: 16rpx;
.red{
color: red;
//color: #226C61;
}
}
}
}
.allPkBox{
width: 100%;
height: 625rpx;
margin-top: 32rpx;
background: #fff;
box-sizing: border-box;
border-radius: 16rpx;
padding: 4rpx;
position: relative;
.springBox{
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
}
.qmBox{
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
}
.boxBg{
z-index: 1;
position: absolute;
top: 4rpx;left: 4rpx;
width: calc(100% - 8rpx);
height: 192rpx;
//background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
border-radius: 16rpx;
}
.pkContent{
width: 100%;
box-sizing: border-box;
position: absolute;
z-index: 2;
padding: 22rpx;
.contentTop{
width: 100%;
.titleImg{
width: 144rpx;
height: 74rpx;
}
}
.pkBox{
width: 100%;
height: 140rpx;
position: relative;
box-sizing: border-box;
margin-bottom: 32rpx;
.pkLogo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 88rpx;
height: 88rpx;
}
.leftBox,.rightBox{
width: 50%;
height: 100%;
box-sizing: border-box;
padding: 24rpx 32rpx;
display: flex;
flex-direction: column;
position: absolute;
}
.leftBox{
left: 0;top: 0;
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.value{
font-size: 44rpx;
//font-family: DINAlternate, DINAlternate;
color: #FFFFFF;
font-weight: bold;
line-height: 52rpx;
}
.label{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
color: #FFFFFF;
font-weight: 400;
line-height: 40rpx;
}
}
.rightBox{
right: 0;top: 0;
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
background-repeat: no-repeat;
background-size: 100% 100%;
align-items: flex-end;
.value{
font-size: 44rpx;
//font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #FF5A3C;
line-height: 52rpx;
}
.label{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #FF5A3C;
line-height: 40rpx;
}
}
.revenueLeft{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
}
.revenueRight{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
.value{
color: #D48F00;
}
.label{
color: #D48F00;
}
}
.carLeft{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
}
.carRight{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
.value{
color: #3873DD;
}
.label{
color: #3873DD;
}
}
}
}
}
}
}
.allScreen{
position: fixed;
top: 0;
width: 100vh;
height: 100vh;
background: black;
//padding: 5vh 0;
.bigBox{
width: 100vw;
height: 100vh;
background: #fff;
.bigImg{
width: 100vw;
height: calc(100vh - 50rpx);
background: #fff;
}
.closeBox{
width: 100vw;
height: 50rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.closeIcon{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
}
}
}
}
</style>