update
This commit is contained in:
parent
4cb7d0021e
commit
1d001a6340
13
package-lock.json
generated
13
package-lock.json
generated
@ -1,10 +1,11 @@
|
||||
{
|
||||
"name": "ahyd_DIB-master",
|
||||
"name": "ahyd_DIB",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"chinese-lunar-calendar": "^1.0.1",
|
||||
"moment": "^2.25.3",
|
||||
"sass": "^1.45.1",
|
||||
"sass-loader": "^10.3.1",
|
||||
@ -397,6 +398,11 @@
|
||||
],
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/chinese-lunar-calendar": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/chinese-lunar-calendar/-/chinese-lunar-calendar-1.0.1.tgz",
|
||||
"integrity": "sha512-T5XjtA6ygOkxjwltYf8dEB1DLsPKewDKajf74fNeT6rH2g9EZPf2AHk6vAlK/SAImTYKXoUNQ3Q4JwN0BduqRA=="
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
@ -1518,6 +1524,11 @@
|
||||
"integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
|
||||
"peer": true
|
||||
},
|
||||
"chinese-lunar-calendar": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/chinese-lunar-calendar/-/chinese-lunar-calendar-1.0.1.tgz",
|
||||
"integrity": "sha512-T5XjtA6ygOkxjwltYf8dEB1DLsPKewDKajf74fNeT6rH2g9EZPf2AHk6vAlK/SAImTYKXoUNQ3Q4JwN0BduqRA=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"chinese-lunar-calendar": "^1.0.1",
|
||||
"moment": "^2.25.3",
|
||||
"sass": "^1.45.1",
|
||||
"sass-loader": "^10.3.1",
|
||||
"vuex-persistedstate": "^4.1.0",
|
||||
"moment": "^2.25.3"
|
||||
"vuex-persistedstate": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"root": "pages/nationalPage",
|
||||
"pages": [
|
||||
|
||||
160
pages/festival/components/entryCarNumber.vue
Normal file
160
pages/festival/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/festival/components/yearRevenue.vue
Normal file
144
pages/festival/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>
|
||||
986
pages/festival/index.vue
Normal file
986
pages/festival/index.vue
Normal file
@ -0,0 +1,986 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<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>
|
||||
<div class="topContent" :style="{top:200+'rpx'}">
|
||||
<picker mode="selector" :range="festival" range-key="label" :value="selectIndex-1" @change="handleChangeType" >
|
||||
<div style="display: flex;align-items: center">
|
||||
<p class="pageTitle" style="margin-right: 8px">{{`欢度${festival[selectIndex - 1].label}`}}</p>
|
||||
<img style="width: 20px;height: 20px" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg"/>
|
||||
</div>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
|
||||
<div 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年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.30-5.4':'1.31-2.09'},共${selectIndex===1?'7':selectIndex===2?'5':'10'}日`}}</p>
|
||||
|
||||
<p>{{`2023年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.29-5.5':'1.20-1.29'},共${selectIndex===3?10:7}日`}}</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";
|
||||
import moment from "moment";
|
||||
import {getLunar} from "chinese-lunar-calendar";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {EntryCarNumber, YearRevenue},
|
||||
data(){
|
||||
return {
|
||||
statusBarHeight:0,
|
||||
festival:[{label:'国庆',value:1},{label:'五一',value:2},{label:'春节',value:3}],
|
||||
selectIndex:1,
|
||||
menu:{},
|
||||
time:'',// 传入的时间
|
||||
showTimeText:'',// 右上角显示的时间
|
||||
carCompareList:{},// 车流对比
|
||||
currentRevenue:0,//今年的营收总额
|
||||
compareRevenue:0,// 去年的营收总额
|
||||
add:0,// 增幅
|
||||
compareRevenueList:{},// 营收图表数据
|
||||
flagGetRevenue:false,// 拿到营收排行
|
||||
flagGetCar:false,// 车流排行
|
||||
flagGetCarCompare:false,//车流比较
|
||||
flagGetRevenueCompare:false,// 营收比较
|
||||
}
|
||||
},
|
||||
onLoad(query){
|
||||
console.log('query',query)
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
// 获取用户信息
|
||||
let userInfo = uni.getStorageSync('vuex')
|
||||
userInfo = JSON.parse(userInfo)
|
||||
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
this.showTimeText = this.selectIndex===1?'9.28-10.7':this.selectIndex===2?'4.29-5.5':'1.20-1.29'
|
||||
this.handleGetCarCompare()
|
||||
this.handleGetRevenueCompare()
|
||||
},
|
||||
methods:{
|
||||
handleBack(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
// 车流比较
|
||||
async handleGetCarCompare(){
|
||||
const req = {
|
||||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||||
StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||||
ShowDateFormat:this.selectIndex===3?2:1
|
||||
}
|
||||
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
|
||||
let dateList = []
|
||||
|
||||
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))
|
||||
|
||||
if (this.selectIndex===3){
|
||||
const date = new Date(item.name)
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const lunarDate = getLunar(year, month, day);
|
||||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||||
}else{
|
||||
dateList.push(moment(item.name).format('M.D'))
|
||||
}
|
||||
})
|
||||
|
||||
let res = {
|
||||
categories: dateList,
|
||||
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:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||||
StatisticsDate:this.time,
|
||||
ShowDateFormat:this.selectIndex===3?2:1
|
||||
}
|
||||
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
|
||||
let dateList = []
|
||||
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)
|
||||
|
||||
if (this.selectIndex===3){
|
||||
const date = new Date(item.name)
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const lunarDate = getLunar(year, month, day);
|
||||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||||
}else{
|
||||
dateList.push(moment(item.name).format('M.D'))
|
||||
}
|
||||
})
|
||||
|
||||
// if (this.selectIndex===3){
|
||||
// let smallDateList = []
|
||||
// let smallCompareList = []
|
||||
// let smallCurList = []
|
||||
// dateList.forEach((item,index)=>{
|
||||
// if (smallDateList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallDateList.push('2.15')
|
||||
// }else{
|
||||
// smallDateList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
//
|
||||
// compareList.forEach((item,index)=>{
|
||||
// if (smallCompareList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallCompareList.push(compareList[compareList.length-1])
|
||||
// }else{
|
||||
// smallCompareList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
//
|
||||
// curList.forEach((item,index)=>{
|
||||
// if (smallCurList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallCurList.push(smallCurList[smallCurList.length-1])
|
||||
// }else{
|
||||
// smallCurList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// dateList = smallDateList
|
||||
// compareList = smallCompareList
|
||||
// curList = smallCurList
|
||||
// }
|
||||
|
||||
let res = {
|
||||
categories: dateList,
|
||||
series:[
|
||||
{
|
||||
name:"2022年",
|
||||
data:compareList,
|
||||
real:realCompareList
|
||||
},
|
||||
{
|
||||
name:"2023年",
|
||||
data:curList,
|
||||
real:realCurList
|
||||
}
|
||||
],
|
||||
max:max
|
||||
}
|
||||
this.compareRevenueList = res
|
||||
this.flagGetRevenueCompare=true
|
||||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 切换节日类型
|
||||
handleChangeType(e){
|
||||
console.log('e',e)
|
||||
this.selectIndex = Number(e.detail.value) + 1
|
||||
uni.showLoading({
|
||||
title:' 正在加载...'
|
||||
})
|
||||
this.showTimeText = this.selectIndex===1?'4.29-5.5':this.selectIndex===2?'9.28-10.7':'1.07-2.15'
|
||||
this.handleGetCarCompare()
|
||||
this.handleGetRevenueCompare()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '/static/public/fontNational/stylesheet.css';
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top{
|
||||
width: 100%;
|
||||
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: 4;
|
||||
}
|
||||
.header{
|
||||
position: fixed;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
.backArrow{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.topContent{
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
.pageTitle{
|
||||
font-size: 56rpx;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 68rpx;
|
||||
text-shadow: 0px 8px 20px rgba(158,29,0,0.25);
|
||||
background: linear-gradient(180deg, #FEFFFE 0%, #FFC7B6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pageContent{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx 28rpx;
|
||||
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;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
.dailyContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 24rpx;
|
||||
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, rgba(255,233,229,0.7) 21%, #FFE9E5 100%);
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
.itemBg{
|
||||
width: 266rpx;
|
||||
height: 208rpx;
|
||||
position: absolute;
|
||||
right: 0;top: 0;
|
||||
z-index:1;
|
||||
}
|
||||
.list{
|
||||
position: absolute;
|
||||
width: calc(100% - 48rpx);
|
||||
z-index: 2;
|
||||
.listTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: 36rpx;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #F95222;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.moreBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.moreIcon{
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listBox{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx;
|
||||
.itemTop{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 36rpx;
|
||||
border-bottom: 2rpx solid #F7F4F4;
|
||||
.itemIcon{
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.revenueBox{
|
||||
.revenueValue{
|
||||
font-size: 40rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.revenueText{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 40rpx;
|
||||
text-align: right;
|
||||
span{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listItemTop{
|
||||
margin-top: 34rpx;
|
||||
.listTopItem{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
.itemLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.itemIcon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.name{
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
.type{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemRight{
|
||||
.itemValue{
|
||||
font-size: 32rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
.unit{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dailyEntry{
|
||||
width: 100%;
|
||||
height: 680rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
margin-top: 28rpx;
|
||||
.dailyContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 24rpx;
|
||||
background: linear-gradient(360deg, rgba(238,242,255,0) 0%, rgba(238,242,255,0.7) 20%, #EEF2FF 100%);
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
.itemBg{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
position: absolute;
|
||||
right: 0;top: 0;
|
||||
z-index:1;
|
||||
}
|
||||
.list{
|
||||
position: absolute;
|
||||
width: calc(100% - 48rpx);
|
||||
z-index: 2;
|
||||
.listTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: 36rpx;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #096EF7;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.moreBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.moreIcon{
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listBox{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx;
|
||||
.itemTop{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 36rpx;
|
||||
border-bottom: 2rpx solid #F7F4F4;
|
||||
.itemIcon{
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.revenueBox{
|
||||
.revenueValue{
|
||||
font-size: 40rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.revenueText{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 40rpx;
|
||||
text-align: right;
|
||||
span{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.listItemTop{
|
||||
margin-top: 34rpx;
|
||||
.listTopItem{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
.itemLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.itemIcon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.name{
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
.type{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemRight{
|
||||
.itemValue{
|
||||
font-size: 32rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
.unit{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dailyEntryAdd{
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 2px;
|
||||
margin-top: 28rpx;
|
||||
.dailyContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 22rpx 24rpx;
|
||||
background: linear-gradient(360deg, rgba(229,247,255,0) 0%, rgba(229,247,255,0.7) 23%, #E5F7FF 100%);
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
.itemBg{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
position: absolute;
|
||||
right: 0;top: 0;
|
||||
z-index:1;
|
||||
}
|
||||
.list{
|
||||
position: absolute;
|
||||
width: calc(100% - 48rpx);
|
||||
z-index: 2;
|
||||
.listTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: 36rpx;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #018ABD;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.moreBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.text{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.moreIcon{
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listBox{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx;
|
||||
.listItemTop{
|
||||
.listTopItem{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0;
|
||||
.itemLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.itemIcon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.name{
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
.type{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemRight{
|
||||
.addIcon{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.itemValue{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: left;
|
||||
margin-left: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -419,35 +419,6 @@
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<!--欢度国庆-->
|
||||
<div class="nationalDay" @click="goToNational">
|
||||
<div class="national">
|
||||
<div class="nationalTop">
|
||||
<div class="nationalTopLeft">
|
||||
<image class="lanternImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/lantern.png" />
|
||||
<div class="titleBox">
|
||||
<!-- @click="goToNational" -->
|
||||
<!-- <image class="titleBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/titleBox.svg"/>-->
|
||||
<div class="title" >
|
||||
<span class="text">欢度国庆</span>
|
||||
<image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/rightIcon.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nationalTopRight">
|
||||
<text class="timeText" >{{lastDay}}</text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nationalContent">
|
||||
<div class="itemContent" v-for="(item,index) in nationalDayList" :key="index">
|
||||
<p class="value">{{item.value || '-'}}</p>
|
||||
<p class="title">{{item.title}}<span>{{item.unit}}</span></p>
|
||||
<image class="itemBg" :src="item.bg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 营收占比-->
|
||||
@ -716,7 +687,35 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--欢度国庆-->
|
||||
<div class="nationalDay" @click="goToNational">
|
||||
<div class="national">
|
||||
<div class="nationalTop">
|
||||
<div class="nationalTopLeft">
|
||||
<span class="topText">节日特刊</span>
|
||||
<!-- <image class="lanternImg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/lantern.png" />-->
|
||||
<!-- <div class="titleBox">-->
|
||||
<!-- <!– @click="goToNational" –>-->
|
||||
<!-- <!– <image class="titleBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/titleBox.svg"/>–>-->
|
||||
<!-- <div class="title" >-->
|
||||
<!-- <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/rightIcon.svg"/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="nationalTopRight">
|
||||
<text class="timeText" >{{lastDay}}</text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nationalContent">
|
||||
<div class="itemContent" v-for="(item,index) in nationalDayList" :key="index">
|
||||
<p class="value">{{item.value || '-'}}</p>
|
||||
<p class="title">{{item.title}}<span>{{item.unit}}</span></p>
|
||||
<image class="itemBg" :src="item.bg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -3597,7 +3596,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
|
||||
|
||||
.nationalDay{
|
||||
width: calc(100% - 64rpx);
|
||||
height: 286rpx;
|
||||
//height: 286rpx;
|
||||
margin-left: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
@ -3607,7 +3606,7 @@ $iphoneHeight: env(safe-area-inset-bottom);
|
||||
//background-size: 100% 100%;
|
||||
.national{
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx 24rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.nationalTop{
|
||||
@ -3615,9 +3614,18 @@ $iphoneHeight: env(safe-area-inset-bottom);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
.nationalTopLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.topText{
|
||||
font-size: 32rpx;
|
||||
//font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #EC6C00;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
.lanternImg{
|
||||
width: 104rpx;
|
||||
height: 126rpx;
|
||||
|
||||
@ -6,11 +6,17 @@
|
||||
<image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
||||
</div>
|
||||
<div class="topContent" :style="{top:200+'rpx'}">
|
||||
<p class="pageTitle" >欢度国庆</p>
|
||||
<p class="pageTitle" v-if="selectTab===1">欢度国庆</p>
|
||||
<picker v-else mode="selector" :range="festival" range-key="label" :value="selectIndex-1" @change="handleChangeType" >
|
||||
<div style="display: flex;align-items: center">
|
||||
<p class="pageTitle" style="margin-right: 8px">{{`欢度${festival[selectIndex - 1].label}`}}</p>
|
||||
<img style="width: 20px;height: 20px" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg"/>
|
||||
</div>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
|
||||
<div class="tabBox">
|
||||
<div class="tabBox" v-if="isUserEnter">
|
||||
<div :class="selectTab===1?'tabItem selectTab':'tabItem'" @click="changeTab(1)">排行分析</div>
|
||||
<div :class="selectTab===2?'tabItem selectTab':'tabItem'" @click="changeTab(2)">同比分析</div>
|
||||
</div>
|
||||
@ -131,7 +137,7 @@
|
||||
<div class="money">
|
||||
<div class="moneyTop">
|
||||
<p class="moneyTitle">2023年对客营收金额：</p>
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<p class="sumMoney">{{ $util.fmoney(currentRevenue,2) }}元</p>
|
||||
</div>
|
||||
<div class="moneyTop">
|
||||
@ -147,8 +153,9 @@
|
||||
<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>{{`2022年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.30-5.4':'1.31-2.09'},共${selectIndex===1?'7':selectIndex===2?'5':'10'}日`}}</p>
|
||||
|
||||
<p>{{`2023年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.29-5.5':'1.20-1.29'},共${selectIndex===3?10:7}日`}}</p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -166,7 +173,6 @@
|
||||
<span class="unit">单位：万元</span>
|
||||
<EntryCarNumber :data="compareRevenueList"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -177,6 +183,8 @@
|
||||
import request from '@/util/index.js'
|
||||
import YearRevenue from "./components/yearRevenue.vue";
|
||||
import EntryCarNumber from "./components/entryCarNumber.vue";
|
||||
import {getLunar} from "chinese-lunar-calendar";
|
||||
import moment from "moment/moment";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {EntryCarNumber, YearRevenue},
|
||||
@ -184,6 +192,8 @@ export default {
|
||||
return {
|
||||
selectTab:1,
|
||||
statusBarHeight:0,
|
||||
festival:[{label:'国庆',value:1},{label:'五一',value:2},{label:'春节',value:3}],
|
||||
selectIndex:1,
|
||||
menu:{},
|
||||
revenueList: [],// 营收排行
|
||||
revenueSum:0,// 营收总计
|
||||
@ -202,6 +212,7 @@ export default {
|
||||
flagGetCar:false,// 车流排行
|
||||
flagGetCarCompare:false,//车流比较
|
||||
flagGetRevenueCompare:false,// 营收比较
|
||||
isUserEnter:true
|
||||
}
|
||||
},
|
||||
onLoad(query){
|
||||
@ -216,13 +227,17 @@ export default {
|
||||
uni.showLoading({
|
||||
title: '正在加载...'
|
||||
})
|
||||
if (query.type){
|
||||
this.isUserEnter = !(query.type==='true')
|
||||
this.selectTab = 2
|
||||
}
|
||||
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}`
|
||||
this.showTimeText = `9.28-10.7`
|
||||
}else{
|
||||
this.showTimeText = `9.28-9.28`
|
||||
}
|
||||
@ -233,12 +248,30 @@ export default {
|
||||
let d = date.getDate()
|
||||
// ${y}年
|
||||
this.dayName = `${m}月${d}日`
|
||||
// 拿到营收排行
|
||||
this.handleGetRevenue(query.time)
|
||||
// 车流排行
|
||||
this.handleGetCar(query.time)
|
||||
if (this.selectTab===1){
|
||||
// 拿到营收排行
|
||||
this.handleGetRevenue(query.time)
|
||||
// 车流排行
|
||||
this.handleGetCar(query.time)
|
||||
}else{
|
||||
this.showTimeText = this.selectIndex===1?'9.28-10.7':this.selectIndex===2?'4.29-5.5':'1.20-1.29'
|
||||
this.handleGetCarCompare()
|
||||
this.handleGetRevenueCompare()
|
||||
}
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 切换节日类型
|
||||
handleChangeType(e){
|
||||
console.log('e',e)
|
||||
this.selectIndex = Number(e.detail.value) + 1
|
||||
uni.showLoading({
|
||||
title:' 正在加载...'
|
||||
})
|
||||
this.showTimeText = this.selectIndex===1?'9.28-10.7':this.selectIndex===2?'4.29-5.5':'1.07-2.15'
|
||||
this.handleGetCarCompare()
|
||||
this.handleGetRevenueCompare()
|
||||
},
|
||||
// 切换标签卡
|
||||
changeTab(num){
|
||||
this.selectTab = num
|
||||
@ -302,8 +335,9 @@ export default {
|
||||
async handleGetCarCompare(){
|
||||
const req = {
|
||||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||||
StatisticsStartDate:'2023/09/28',
|
||||
StatisticsEndDate:'2023/10/07'
|
||||
StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||||
ShowDateFormat:this.selectIndex===3?2:1
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/BigData/GetBayonetCompare',req)
|
||||
console.log('compare',data)
|
||||
@ -311,6 +345,8 @@ export default {
|
||||
let compareList = []
|
||||
let curList = []
|
||||
let max = 0
|
||||
let dateList = []
|
||||
|
||||
data.Result_Data.compareList.forEach(item=>{
|
||||
if (Number(item.value)>max){
|
||||
max = Number(item.value)
|
||||
@ -322,9 +358,22 @@ export default {
|
||||
max = Number(item.value)
|
||||
}
|
||||
curList.push(Number(item.value))
|
||||
|
||||
if (this.selectIndex===3){
|
||||
const date = new Date(item.name)
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const lunarDate = getLunar(year, month, day);
|
||||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||||
}else{
|
||||
dateList.push(moment(item.name).format('M.D'))
|
||||
}
|
||||
})
|
||||
|
||||
let res = {
|
||||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
categories: dateList,
|
||||
series:[
|
||||
{
|
||||
name:"2022年",
|
||||
@ -347,9 +396,10 @@ export default {
|
||||
async handleGetRevenueCompare(){
|
||||
const req = {
|
||||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||||
StatisticsStartDate:'2023/09/28',
|
||||
StatisticsEndDate:'2023/10/07',
|
||||
StatisticsDate:this.time
|
||||
StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||||
StatisticsDate:this.time,
|
||||
ShowDateFormat:this.selectIndex===3?2:1
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueYOY',req)
|
||||
console.log('22222',data)
|
||||
@ -364,6 +414,7 @@ export default {
|
||||
let curList = []
|
||||
let realCurList = []
|
||||
let max =0
|
||||
let dateList = []
|
||||
data.Result_Data.compareList.forEach(item=>{
|
||||
let number = Number((item.value / 10000).toFixed(2))
|
||||
if (number>max){
|
||||
@ -379,9 +430,69 @@ export default {
|
||||
}
|
||||
curList.push(number)
|
||||
realCurList.push(item.value)
|
||||
|
||||
if (this.selectIndex===3){
|
||||
const date = new Date(item.name)
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth() + 1
|
||||
let day = date.getDate()
|
||||
const lunarDate = getLunar(year, month, day);
|
||||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||||
}else{
|
||||
dateList.push(moment(item.name).format('M.D'))
|
||||
}
|
||||
})
|
||||
|
||||
// if (this.selectIndex===3){
|
||||
// let smallDateList = []
|
||||
// let smallCompareList = []
|
||||
// let smallCurList = []
|
||||
// dateList.forEach((item,index)=>{
|
||||
// if (smallDateList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallDateList.push('2.15')
|
||||
// }else{
|
||||
// smallDateList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
//
|
||||
// compareList.forEach((item,index)=>{
|
||||
// if (smallCompareList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallCompareList.push(compareList[compareList.length-1])
|
||||
// }else{
|
||||
// smallCompareList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
//
|
||||
// curList.forEach((item,index)=>{
|
||||
// if (smallCurList.length>=10){
|
||||
// return
|
||||
// }
|
||||
// if (index%4===0){
|
||||
// if (smallDateList.length===9){
|
||||
// smallCurList.push(smallCurList[smallCurList.length-1])
|
||||
// }else{
|
||||
// smallCurList.push(item)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// dateList = smallDateList
|
||||
// compareList = smallCompareList
|
||||
// curList = smallCurList
|
||||
// }
|
||||
|
||||
let res = {
|
||||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||||
categories: dateList,
|
||||
series:[
|
||||
{
|
||||
name:"2022年",
|
||||
@ -397,12 +508,11 @@ export default {
|
||||
max:max
|
||||
}
|
||||
this.compareRevenueList = res
|
||||
console.log('this.compareRevenueList',this.compareRevenueList)
|
||||
this.flagGetRevenueCompare=true
|
||||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<span class="resolve-person text-detail" v-if="isLoadingDelPerson" @click="choeseDelPerson">请选择</span>
|
||||
<picker class="resolve-person text-detail" mode="selector"
|
||||
v-else-if="dealerList.length>0"
|
||||
:value="pickerIndex" range-key="MEMBERSHIP_NAME" :range="dealerList"
|
||||
:value="pickerIndex===-1?0:pickerIndex" range-key="MEMBERSHIP_NAME" :range="dealerList"
|
||||
@change="pickerChange"
|
||||
>
|
||||
<view>{{pickerIndex==-1? '请选择': dealerList[pickerIndex].MEMBERSHIP_NAME}}</view>
|
||||
@ -195,6 +195,7 @@
|
||||
let arr = []
|
||||
_this.isLoadingDelPerson = false
|
||||
uni.hideLoading()
|
||||
console.log('res.Data.List',res.Data.List)
|
||||
_this.dealerList = res.Data.List
|
||||
|
||||
})
|
||||
|
||||
@ -79,10 +79,10 @@ import Tabbar from "../../components/tabbar/tabbar.vue";
|
||||
{
|
||||
id:'',
|
||||
name: '节日特刊',
|
||||
homeUrl: '/commercialOperation/festival/index',
|
||||
homeUrl: `/pages/nationalPage/index?time=${lastDay}&type=true`,
|
||||
imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/festival.svg',
|
||||
bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/user/firstBg_2.png',
|
||||
isNotice:'',
|
||||
isNotice:true,
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Loading…
x
Reference in New Issue
Block a user