1899 lines
63 KiB
Vue
1899 lines
63 KiB
Vue
<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 === 2">
|
||
<div
|
||
:class="
|
||
selectFestival === 2
|
||
? 'boxBg springBox'
|
||
: selectFestival === 3
|
||
? 'boxBg qmBox'
|
||
: ''
|
||
"
|
||
></div>
|
||
<div class="contentBox">
|
||
<!-- <img class="contentIcon" src=""/>-->
|
||
<img
|
||
class="contentIcon"
|
||
:src="
|
||
selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png'
|
||
: selectFestival === 3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png'
|
||
: selectFestival === 4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/larburTrendChart.png'
|
||
: ''
|
||
"
|
||
/>
|
||
<div class="contentText" v-if="selectFestival === 1">
|
||
根据历史大数据显示：<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="noticeBox"
|
||
style="height: 500rpx"
|
||
v-if="selectFestival === 3"
|
||
>
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'boxBg springBox'
|
||
: selectFestival ===3
|
||
? 'boxBg qmBox'
|
||
: selectFestival === 4
|
||
? 'boxBg labourBox'
|
||
: selectFestival === 5
|
||
? 'boxBg dragonBoatBox'
|
||
: selectFestival === 6
|
||
? 'boxBg summerHolidayBox'
|
||
: selectFestival === 7
|
||
? 'boxBg midAutumnBox'
|
||
: selectFestival === 8
|
||
? 'boxBg nationalDayBox'
|
||
: ''
|
||
"
|
||
></div>
|
||
<div class="contentBox">
|
||
<img
|
||
class="contentIcon"
|
||
:src="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png'
|
||
: selectFestival === 3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png'
|
||
: selectFestival ===4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/larburTrendChart.png'
|
||
: selectFestival === 5
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatChart.png'
|
||
: selectFestival === 6
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayChart.png'
|
||
: selectFestival === 7
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnChart.png'
|
||
: selectFestival === 8
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayChart.png'
|
||
: ''
|
||
"
|
||
/>
|
||
<div class="contentText">
|
||
根据历史大数据显示：<br />
|
||
<div style="text-indent: 2rem; font-size: 24rpx">
|
||
2024年五一假期期间，预计安徽驿达服务区<span class="red"
|
||
>5月1日</span
|
||
>（假期首日）10时-14时是<span class="red">出程入区高峰</span
|
||
>时段，<span class="red">峰值</span>出现在11时-13时；
|
||
</div>
|
||
<div style="text-indent: 2rem; font-size: 24rpx; margin-top: 8px">
|
||
安徽驿达服务区返程入区高峰或将较为分散，预计<span class="red"
|
||
>5月4日</span
|
||
>（假日第四天）15时-19时，<span class="red">5月5日</span
|
||
>（假期末日）14时-20时为<span class="red">返程入区高峰</span
|
||
>时段，预计<span class="red">入区峰值</span>出现在<span
|
||
class="red"
|
||
>5月4日</span
|
||
>（假日第四天）<span class="red">17时-19时</span>，<span
|
||
class="red"
|
||
>5月5日</span
|
||
>（假期末日）<span class="red">16时-18时</span>，5月6日恢复正常
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="allPkBox">
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'boxBg springBox'
|
||
: selectFestival === 3
|
||
? 'boxBg qmBox'
|
||
: selectFestival === 4
|
||
? 'boxBg labourBox'
|
||
: selectFestival === 5
|
||
? 'boxBg dragonBoatBox'
|
||
: selectFestival === 6
|
||
? 'boxBg summerHolidayBox'
|
||
: selectFestival === 7
|
||
? 'boxBg midAutumnBox'
|
||
: selectFestival === 8
|
||
? 'boxBg nationalDayBox'
|
||
: ''
|
||
"
|
||
></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 === 1 || selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png'
|
||
: selectFestival ===3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmSumData.png'
|
||
: selectFestival === 4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourAllData.png'
|
||
: selectFestival === 5
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatAllData.png'
|
||
: selectFestival === 6
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayAllData.png'
|
||
: selectFestival === 7
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnAllData.png'
|
||
: selectFestival === 8
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayAllData.png'
|
||
: ''
|
||
"
|
||
/>
|
||
</div>
|
||
<div class="pkBox">
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'leftBox springLeftBox'
|
||
: selectFestival === 3
|
||
? 'leftBox qmLeftBox'
|
||
: selectFestival === 4
|
||
? 'leftBox labourLeftBox'
|
||
: selectFestival === 5
|
||
? 'leftBox dragonBoatLeftBox'
|
||
: selectFestival === 6
|
||
? 'leftBox summerHolidayLeftBox'
|
||
: selectFestival === 7
|
||
? 'leftBox midAutumnLeftBox'
|
||
: selectFestival === 8
|
||
? 'leftBox nationalDayLeftBox'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.curYearRevenue
|
||
? $util.getMoney(giveTrendObj.curYearRevenue / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2024年/万元</text>
|
||
</div>
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'rightBox springRightBox'
|
||
: selectFestival === 3
|
||
? 'rightBox qmRightBox'
|
||
: selectFestival === 4
|
||
? 'rightBox labourRightBox'
|
||
: selectFestival ===5
|
||
? 'rightBox dragonBoatRightBox'
|
||
: selectFestival === 6
|
||
? 'rightBox summerHolidayRightBox'
|
||
: selectFestival === 7
|
||
? 'rightBox midAutumnRightBox'
|
||
: selectFestival === 8
|
||
? 'rightBox nationalDayRightBox'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.lYearRevenue
|
||
? $util.getMoney(giveTrendObj.lYearRevenue / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2023年/万元</text>
|
||
</div>
|
||
<img
|
||
class="pkLogo"
|
||
:src="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png'
|
||
: selectFestival === 3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk1st.png'
|
||
: selectFestival === 4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS1st.png'
|
||
: selectFestival === 5
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatVS1st.png'
|
||
: selectFestival === 6
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayVS1st.png'
|
||
: selectFestival === 7
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnVS1st.png'
|
||
: selectFestival === 8
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayVS1st.png'
|
||
: ''
|
||
"
|
||
/>
|
||
</div>
|
||
<div class="pkBox">
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'leftBox revenueLeft'
|
||
: selectFestival === 3
|
||
? 'leftBox qmRevenueLeft'
|
||
: selectFestival === 4
|
||
? 'leftBox labourRevenueLeft'
|
||
: selectFestival === 5
|
||
? 'leftBox dragonBoatRevenueLeft'
|
||
: selectFestival === 6
|
||
? 'leftBox summerHolidayRevenueLeft'
|
||
: selectFestival === 7
|
||
? 'leftBox midAutumnRevenueLeft'
|
||
: selectFestival === 8
|
||
? 'leftBox nationalDayRevenueLeft'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.curYearAccount
|
||
? $util.getMoney(giveTrendObj.curYearAccount / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2024年/万元</text>
|
||
</div>
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'rightBox revenueRight'
|
||
: selectFestival === 3
|
||
? 'rightBox qmRevenueRight'
|
||
: selectFestival === 4
|
||
? 'rightBox labourRevenueRight'
|
||
: selectFestival === 5
|
||
? 'rightBox dragonBoatRevenueRight'
|
||
: selectFestival === 6
|
||
? 'rightBox summerHolidayRevenueRight'
|
||
: selectFestival === 7
|
||
? 'rightBox midAutumnRevenueRight'
|
||
: selectFestival === 8
|
||
? 'rightBox nationalDayRevenueRight'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.lYearAccount
|
||
? $util.getMoney(giveTrendObj.lYearAccount / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2023年/万元</text>
|
||
</div>
|
||
<img
|
||
class="pkLogo"
|
||
:src="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png'
|
||
: selectFestival === 3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk2st.png'
|
||
: selectFestival === 4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS2st.png'
|
||
: selectFestival === 5
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatVS2st.png'
|
||
: selectFestival === 6
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayVS2st.png'
|
||
: selectFestival === 7
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnVS2st.png'
|
||
: selectFestival === 8
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayVS2st.png'
|
||
: ''
|
||
"
|
||
/>
|
||
</div>
|
||
<div class="pkBox" style="margin-bottom: 20px">
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'leftBox carLeft'
|
||
: selectFestival === 3
|
||
? 'leftBox qmCarLeft'
|
||
: selectFestival === 4
|
||
? 'leftBox labourCarLeft'
|
||
: selectFestival === 5
|
||
? 'leftBox dragonBoatCarLeft'
|
||
: selectFestival === 6
|
||
? 'leftBox summerHolidayCarLeft'
|
||
: selectFestival === 7
|
||
? 'leftBox midAutumnCarLeft'
|
||
: selectFestival === 8
|
||
? 'leftBox nationalDayCarLeft'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.curYearBayonet
|
||
? $util.getMoney(giveTrendObj.curYearBayonet / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2024年/万辆</text>
|
||
</div>
|
||
<div
|
||
:class="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'rightBox carRight'
|
||
: selectFestival === 3
|
||
? 'rightBox qmCarRight'
|
||
: selectFestival === 4
|
||
? 'rightBox labourCarRight'
|
||
: selectFestival === 5
|
||
? 'rightBox dragonBoatCarRight'
|
||
: selectFestival === 6
|
||
? 'rightBox summerHolidayCarRight'
|
||
: selectFestival === 7
|
||
? 'rightBox midAutumnCarRight'
|
||
: selectFestival === 8
|
||
? 'rightBox nationalDayCarRight'
|
||
: ''
|
||
"
|
||
>
|
||
<text class="value">{{
|
||
giveTrendObj.lYearBayonet
|
||
? $util.getMoney(giveTrendObj.lYearBayonet / 10000)
|
||
: "0.00"
|
||
}}</text>
|
||
<text class="label">2023年/万辆</text>
|
||
</div>
|
||
<img
|
||
class="pkLogo"
|
||
:src="
|
||
selectFestival === 1 || selectFestival === 2
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png'
|
||
: selectFestival === 3
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk3st.png'
|
||
: selectFestival === 4
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS3st.png'
|
||
: selectFestival === 5
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatVS3st.png'
|
||
: selectFestival === 6
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayVS3st.png'
|
||
: selectFestival === 7
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnVS3st.png'
|
||
: selectFestival === 8
|
||
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayVS3st.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";
|
||
import moment from "moment";
|
||
var uChartsInstance = {};
|
||
export default {
|
||
components: { qiunDataCharts },
|
||
data() {
|
||
return {
|
||
opts: {},
|
||
opts2: {},
|
||
res: {},
|
||
res2: {},
|
||
allScreen: false,
|
||
ScrollTop: 0,
|
||
howDayNumber: 0,
|
||
giveTrendObj: {},
|
||
currentFestival: {},
|
||
selectFestival: 0,
|
||
StatisticsDate: "", // 统计时间
|
||
};
|
||
},
|
||
onLoad(query) {
|
||
console.log("query", query);
|
||
if (query.detailObj) {
|
||
this.giveTrendObj = JSON.parse(query.detailObj);
|
||
}
|
||
if (query.currentFestival) {
|
||
this.currentFestival = JSON.parse(query.currentFestival);
|
||
}
|
||
if (query.festivalType) {
|
||
this.selectFestival = Number(query.festivalType);
|
||
}
|
||
console.log("this.currentFestival", this.currentFestival);
|
||
console.log("this.selectFestival", this.selectFestival);
|
||
|
||
this.lastDay = uni.getStorageSync("lastDay");
|
||
const currentDate = new Date(this.lastDay);
|
||
let nowTime = currentDate.getTime(); // 当前的时间戳 来拿到现在的时间 是过了哪个节日 没到哪个节日
|
||
let dayList = [];
|
||
if (
|
||
new Date(this.currentFestival.startTime).getTime() < nowTime &&
|
||
new Date(this.currentFestival.endTime).getTime() > nowTime
|
||
) {
|
||
let dayNumber = moment(this.lastDay).diff(
|
||
this.currentFestival.startTime,
|
||
"days"
|
||
);
|
||
console.log("dayNumber", dayNumber);
|
||
if (dayNumber > 0) {
|
||
for (let i = 0; i < dayNumber; i++) {
|
||
dayList.push({
|
||
label: `第${i + 1}天`,
|
||
value: moment(this.currentFestival.startTime)
|
||
.add(i, "days")
|
||
.format("YYYY-MM-DD"),
|
||
});
|
||
}
|
||
}
|
||
this.StatisticsDate = this.lastDay;
|
||
} else if (new Date(this.currentFestival.endTime).getTime() < nowTime) {
|
||
// 当前时间已经过了这个时间范围了
|
||
let dayNumber =
|
||
moment(this.currentFestival.endTime).diff(
|
||
this.currentFestival.startTime,
|
||
"days"
|
||
) + 1;
|
||
console.log("dayNumber", dayNumber);
|
||
this.howDayNumber = dayNumber;
|
||
if (dayNumber > 0) {
|
||
for (let i = 0; i < dayNumber; i++) {
|
||
dayList.push({
|
||
label: `第${i + 1}天`,
|
||
value: moment(this.currentFestival.startTime)
|
||
.add(i, "days")
|
||
.format("YYYY-MM-DD"),
|
||
});
|
||
}
|
||
}
|
||
this.StatisticsDate = this.currentFestival.endTime;
|
||
}
|
||
console.log("this.StatisticsDate", this.StatisticsDate);
|
||
this.handleGetData();
|
||
|
||
return;
|
||
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;
|
||
} else if (this.selectFestival === 2) {
|
||
this.howDayNumber = 7;
|
||
} else if (this.selectFestival === 3) {
|
||
this.howDayNumber = 5;
|
||
} else if (this.selectFestival === 4) {
|
||
this.howDayNumber = 62;
|
||
} else if (this.selectFestival === 5) {
|
||
this.howDayNumber = 5;
|
||
} else if (this.selectFestival === 6) {
|
||
this.howDayNumber = 9;
|
||
}
|
||
this.handleGetData();
|
||
},
|
||
methods: {
|
||
async handleGetData() {
|
||
uni.showLoading({
|
||
title: "正在加载...",
|
||
});
|
||
// 因为要根据选择的年份节日 来请求数据 判断显示两条 还是两条以上
|
||
// 根据选择的节日年份 减去 2023 年 看看有几年差 那就要请求几次
|
||
// 年份差
|
||
let yearNumber =
|
||
this.currentFestival.curYear === 2024
|
||
? 1
|
||
: this.currentFestival.curYear - 2023;
|
||
|
||
let dateList = [];
|
||
let dayNumber =
|
||
moment(this.currentFestival.endTime).diff(
|
||
this.currentFestival.startTime,
|
||
"days"
|
||
) + 1;
|
||
console.log("dayNumber", dayNumber);
|
||
if (dayNumber > 0) {
|
||
for (let i = 0; i < dayNumber; i++) {
|
||
dateList.push(`第${i + 1}天`);
|
||
}
|
||
}
|
||
console.log("dateList", dateList);
|
||
// 正常模式下的图表数据
|
||
let normalData = {
|
||
categories: dateList,
|
||
series: [],
|
||
};
|
||
// 全屏模式下的图表数据
|
||
let allScreenData = [];
|
||
for (let i = 0; i < yearNumber; i++) {
|
||
const req = {
|
||
pushProvinceCode: "340000",
|
||
StatisticsDate: this.StatisticsDate,
|
||
holidayType: this.currentFestival.HolidayType,
|
||
curYear: 2024 + i,
|
||
compareYear: 2023 + i,
|
||
};
|
||
console.log("req", req);
|
||
const data = await request.$webGet(
|
||
"CommercialApi/Revenue/GetHolidayCompare",
|
||
req
|
||
);
|
||
console.log("handleGetData", data);
|
||
|
||
// 去年的最大值
|
||
let compareDateMax = 0;
|
||
let dataObj = data.Result_Data;
|
||
// 去年的具体日期
|
||
let compareDateList = [];
|
||
// 除以一万的值
|
||
let compareList = [];
|
||
// 实际值 不除以一万
|
||
let realCompareList = [];
|
||
|
||
if (dataObj && dataObj.compareList && dataObj.compareList.length > 0) {
|
||
// 根据字段 拿到开始结束时间 月日 因为年份不好添加 所以只能用月日 来筛选开始结束时间
|
||
console.log("type", typeof dataObj.compareHoliday);
|
||
let startIndex = 0;
|
||
let endIndex = 0;
|
||
if (dataObj.compareHoliday.indexOf("-") === -1) {
|
||
let midIndex = 0;
|
||
let time = dataObj.compareHoliday.replace(".", "/");
|
||
dataObj.compareList.forEach((item, index) => {
|
||
let date = new Date(item.name);
|
||
let dateM = date.getMonth() + 1;
|
||
if (dateM < 10) {
|
||
dateM = "0" + dateM;
|
||
}
|
||
let dateD = date.getDate();
|
||
if (dateD < 10) {
|
||
dateD = "0" + dateD;
|
||
}
|
||
let monthDay = `${dateM}/${dateD}`;
|
||
if (monthDay === time) {
|
||
midIndex = index;
|
||
}
|
||
});
|
||
startIndex = midIndex - 1;
|
||
endIndex = midIndex + 1;
|
||
} else {
|
||
let [start, end] = dataObj.compareHoliday.split("-");
|
||
start = start.replace(".", "/");
|
||
end = end.replace(".", "/");
|
||
console.log("start", start);
|
||
console.log("end", end);
|
||
// 拿到开始结束时间的索引 因为年份不好添加 不好用开始结束时间去判断 所以直接用索引去取
|
||
|
||
dataObj.compareList.forEach((item, index) => {
|
||
let date = new Date(item.name);
|
||
let dateM = date.getMonth() + 1;
|
||
if (dateM < 10) {
|
||
dateM = "0" + dateM;
|
||
}
|
||
let dateD = date.getDate();
|
||
if (dateD < 10) {
|
||
dateD = "0" + dateD;
|
||
}
|
||
let monthDay = `${dateM}/${dateD}`;
|
||
if (monthDay === start) {
|
||
startIndex = index;
|
||
}
|
||
if (monthDay === end) {
|
||
endIndex = index;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 截取出来的实际数据数组
|
||
let list = dataObj.compareList.slice(startIndex, endIndex + 1);
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
realCompareList.push(Number(item.value));
|
||
compareList.push(Number(item.value) / 10000);
|
||
const date = new Date(item.name);
|
||
let m = date.getMonth() + 1;
|
||
let d = date.getDate();
|
||
let dateText = `${m}.${d}`;
|
||
item.easyDate = dateText;
|
||
compareDateList.push(moment(item.name).format("YYYY-MM-DD"));
|
||
});
|
||
}
|
||
}
|
||
// 今年的具体日期
|
||
let curDateList = [];
|
||
// 除以一万的值
|
||
let curListList = [];
|
||
// 实际值 不除以一万
|
||
let realCurList = [];
|
||
// 拿到开始结束时间的索引 因为年份不好添加 不好用开始结束时间去判断 所以直接用索引去取
|
||
let startIndex = 0;
|
||
let endIndex = 0;
|
||
if (dataObj && dataObj.curList && dataObj.curList.length > 0) {
|
||
if (dataObj.curHoliday.indexOf("-") === -1) {
|
||
let midIndex = 0;
|
||
let time = dataObj.curHoliday.replace(".", "/");
|
||
dataObj.curList.forEach((item, index) => {
|
||
let date = new Date(item.name);
|
||
let dateM = date.getMonth() + 1;
|
||
if (dateM < 10) {
|
||
dateM = "0" + dateM;
|
||
}
|
||
let dateD = date.getDate();
|
||
if (dateD < 10) {
|
||
dateD = "0" + dateD;
|
||
}
|
||
let monthDay = `${dateM}/${dateD}`;
|
||
if (monthDay === time) {
|
||
midIndex = index;
|
||
}
|
||
});
|
||
startIndex = midIndex - 1;
|
||
endIndex = midIndex + 1;
|
||
} else {
|
||
// 根据字段 拿到开始结束时间 月日 因为年份不好添加 所以只能用月日 来筛选开始结束时间
|
||
let [start, end] = dataObj.curHoliday.split("-");
|
||
start = start.replace(".", "/");
|
||
end = end.replace(".", "/");
|
||
console.log("start", start);
|
||
console.log("end", end);
|
||
|
||
dataObj.curList.forEach((item, index) => {
|
||
let date = new Date(item.name);
|
||
let dateM = date.getMonth() + 1;
|
||
if (dateM < 10) {
|
||
dateM = "0" + dateM;
|
||
}
|
||
let dateD = date.getDate();
|
||
if (dateD < 10) {
|
||
dateD = "0" + dateD;
|
||
}
|
||
let monthDay = `${dateM}/${dateD}`;
|
||
if (monthDay === start) {
|
||
startIndex = index;
|
||
}
|
||
if (monthDay === end) {
|
||
endIndex = index;
|
||
}
|
||
});
|
||
// 截取出来的实际数据数组
|
||
let list = dataObj.curList.slice(startIndex, endIndex + 1);
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
realCurList.push(Number(item.value));
|
||
curListList.push(Number(item.value) / 10000);
|
||
const date = new Date(item.name);
|
||
let m = date.getMonth() + 1;
|
||
let d = date.getDate();
|
||
let dateText = `${m}.${d}`;
|
||
item.easyDate = dateText;
|
||
curDateList.push(moment(item.name).format("YYYY-MM-DD"));
|
||
});
|
||
}
|
||
|
||
console.log("startIndex", startIndex);
|
||
console.log("endIndex", endIndex);
|
||
console.log("list", list);
|
||
}
|
||
}
|
||
console.log("compareDateMax", compareDateMax);
|
||
console.log("compareDateList", compareDateList);
|
||
console.log("curDateList", curDateList);
|
||
|
||
if (i === 0) {
|
||
normalData.series.push({
|
||
name: 2023 + i,
|
||
data: compareList,
|
||
real: realCompareList,
|
||
tradDate: list, // 如果是春节模式 要显示农历日期
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
realDateList: compareDateList,
|
||
});
|
||
normalData.series.push({
|
||
name: 2024 + i,
|
||
data: curListList,
|
||
real: realCurList,
|
||
tradDate: list, // 如果是春节模式 要显示农历日期
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
realDateList: curDateList,
|
||
});
|
||
} else if (i > 0) {
|
||
normalData.series.push({
|
||
name: 2024 + i,
|
||
data: curListList,
|
||
real: realCurList,
|
||
tradDate: list, // 如果是春节模式 要显示农历日期
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
realDateList: curDateList,
|
||
});
|
||
}
|
||
}
|
||
|
||
this.res = normalData;
|
||
this.opts = {
|
||
categories: normalData.categories,
|
||
series: normalData.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
|
||
: this.selectFestival === 4
|
||
? 900
|
||
: 1500,
|
||
},
|
||
],
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow",
|
||
},
|
||
},
|
||
};
|
||
this.opts2 = {
|
||
categories: normalData.categories,
|
||
series: normalData.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: 15,
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
splitNumber: 5,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
max: 2000,
|
||
},
|
||
],
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow",
|
||
},
|
||
},
|
||
};
|
||
uni.hideLoading();
|
||
return;
|
||
// let dateList = [];
|
||
// let dateList2 = [];
|
||
|
||
// 去年的具体日期
|
||
let compareDateList = [];
|
||
// 今年的具体日期
|
||
let curDateList = [];
|
||
// 去年的最大值
|
||
let compareDateMax = 0;
|
||
|
||
let dataObj = data.Result_Data;
|
||
if (dataObj && dataObj.compareList && dataObj.compareList.length > 0) {
|
||
dataObj.compareList.forEach((item) => {
|
||
if (compareDateMax < Number(item.value)) {
|
||
compareDateMax = Number(item.value);
|
||
}
|
||
const date = new Date(item.name);
|
||
let m = date.getMonth() + 1;
|
||
let d = date.getDate();
|
||
let dateText = `${m}.${d}`;
|
||
item.easyDate = dateText;
|
||
compareDateList.push(moment(item.name).format("YYYY-MM-DD"));
|
||
});
|
||
}
|
||
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;
|
||
curDateList.push(moment(item.name).format("YYYY-MM-DD"));
|
||
});
|
||
}
|
||
|
||
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);
|
||
}
|
||
} else if (this.selectFestival === 2) {
|
||
for (let i = 1; i <= 7; i++) {
|
||
dateList.push(`第${i}天`);
|
||
}
|
||
for (let i = 1; i <= 7; i++) {
|
||
dateList2.push(`第${i}天`);
|
||
}
|
||
} else if (this.selectFestival === 3) {
|
||
for (let i = 1; i <= 5; i++) {
|
||
dateList.push(`第${i}天`);
|
||
}
|
||
for (let i = 1; i <= 5; i++) {
|
||
dateList2.push(`第${i}天`);
|
||
}
|
||
} else if (this.selectFestival === 4) {
|
||
for (let i = 1; i <= 62; i++) {
|
||
dateList.push(`第${i}天`);
|
||
}
|
||
for (let i = 1; i <= 62; i++) {
|
||
dateList2.push(`第${i}天`);
|
||
}
|
||
} else if (this.selectFestival === 5) {
|
||
for (let i = 1; i <= 5; i++) {
|
||
dateList.push(`第${i}天`);
|
||
}
|
||
for (let i = 1; i <= 5; i++) {
|
||
dateList2.push(`第${i}天`);
|
||
}
|
||
} else if (this.selectFestival === 6) {
|
||
for (let i = 1; i <= 9; i++) {
|
||
dateList.push(`第${i}天`);
|
||
}
|
||
for (let i = 1; i <= 9; 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;
|
||
if (
|
||
dataObj.compareList &&
|
||
dataObj.compareList.length > 0 &&
|
||
dataObj.compareList[index]
|
||
) {
|
||
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;
|
||
if (
|
||
dataObj.curList &&
|
||
dataObj.curList.length > 0 &&
|
||
dataObj.curList[index]
|
||
) {
|
||
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 = [
|
||
"大年十六",
|
||
"大年十七",
|
||
"大年十八",
|
||
"大年十九",
|
||
"大年二十",
|
||
"大年廿一",
|
||
"大年廿二",
|
||
"北小年",
|
||
"南小年",
|
||
"大年廿五",
|
||
"大年廿六",
|
||
"大年廿七",
|
||
"大年廿八",
|
||
"大年廿九",
|
||
"除夕",
|
||
"春节",
|
||
"正月初二",
|
||
"正月初三",
|
||
"正月初四",
|
||
"正月初五",
|
||
"正月初六",
|
||
"正月初七",
|
||
"正月初八",
|
||
"正月初九",
|
||
"正月初十",
|
||
"正月十一",
|
||
"正月十二",
|
||
"正月十三",
|
||
"正月十四",
|
||
"元宵",
|
||
"正月十六",
|
||
"正月十七",
|
||
"正月十八",
|
||
"正月十九",
|
||
"正月二十",
|
||
"正月廿一",
|
||
"正月廿二",
|
||
"正月廿三",
|
||
"正月廿四",
|
||
"正月廿五",
|
||
];
|
||
|
||
// compareDateList
|
||
// curDateList
|
||
|
||
let res = {
|
||
categories: dateList,
|
||
series: [
|
||
{
|
||
name: `24年`,
|
||
data: curListList,
|
||
real: realCurList,
|
||
tradDate: list,
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2024-06-07','2024-06-08','2024-06-09','2024-06-10','2024-06-11']
|
||
realDateList: curDateList,
|
||
},
|
||
{
|
||
name: `23年`,
|
||
data: compareList,
|
||
real: realCompareList,
|
||
tradDate: list,
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']//劳动节
|
||
// realDateList: ['2023-06-21','2023-06-22','2023-06-23','2023-06-24','2023-06-25']
|
||
realDateList: compareDateList,
|
||
},
|
||
],
|
||
max: Number(max.toFixed(2)),
|
||
selectFestival: this.selectFestival,
|
||
};
|
||
let res2 = {
|
||
categories: dateList2,
|
||
series: [
|
||
{
|
||
name: `24年`,
|
||
data: curListList,
|
||
real: realCurList,
|
||
tradDate: list,
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2024-04-30','2024-05-01','2024-05-02','2024-05-03','2024-05-04','2024-05-05','2024-05-06']//劳动节
|
||
// realDateList: ['2024-06-07','2024-06-08','2024-06-09','2024-06-10','2024-06-11']
|
||
realDateList: curDateList,
|
||
},
|
||
{
|
||
name: `23年`,
|
||
data: compareList,
|
||
real: realCompareList,
|
||
tradDate: list,
|
||
howDayNumber: this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']//劳动节
|
||
// realDateList: ['2023-06-21','2023-06-22','2023-06-23','2023-06-24','2023-06-25']
|
||
realDateList: compareDateList,
|
||
},
|
||
],
|
||
max: Number(max.toFixed(2)),
|
||
};
|
||
console.log("res", res);
|
||
console.log("res2", res2);
|
||
console.log(
|
||
"compareDateMax",
|
||
this.getSplitNumber(compareDateMax / 10000)
|
||
);
|
||
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
|
||
: this.selectFestival === 4
|
||
? 900
|
||
: 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);
|
||
let _this = this;
|
||
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: 15,
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
splitNumber: 5,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
// max:_this.selectFestival===2?2000:3000
|
||
max: 2000,
|
||
},
|
||
],
|
||
},
|
||
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%
|
||
);
|
||
}
|
||
.labourBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(255, 236, 208, 0) 0%,
|
||
#ffecd0 100%
|
||
);
|
||
}
|
||
.dragonBoatBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(225, 241, 237, 0) 0%,
|
||
#e1f1ed 100%
|
||
);
|
||
}
|
||
.summerHolidayBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(214, 238, 243, 0) 0%,
|
||
#dcecef 100%
|
||
);
|
||
}
|
||
.midAutumnBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(255, 215, 180, 0) 0%,
|
||
#fff3e9 100%
|
||
);
|
||
}
|
||
.nationalDayBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(255, 218, 210, 0) 0%,
|
||
#fff2f0 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%
|
||
);
|
||
}
|
||
.labourBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(255, 236, 208, 0) 0%,
|
||
#ffecd0 100%
|
||
);
|
||
}
|
||
.dragonBoatBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(225, 241, 237, 0) 0%,
|
||
#e1f1ed 100%
|
||
);
|
||
}
|
||
.summerHolidayBox {
|
||
background: linear-gradient(
|
||
360deg,
|
||
rgba(214, 238, 243, 0) 0%,
|
||
#dcecef 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;
|
||
}
|
||
}
|
||
.springLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
|
||
}
|
||
.qmLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg1st.png");
|
||
}
|
||
.labourLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo1.png");
|
||
}
|
||
.dragonBoatLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo1.png");
|
||
}
|
||
.summerHolidayLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo1.png");
|
||
}
|
||
.midAutumnLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo1.png");
|
||
}
|
||
.nationalDayLeftBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo1.png");
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.springRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
|
||
}
|
||
.qmRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg2st.png");
|
||
.value {
|
||
color: #2d7e72 !important;
|
||
}
|
||
.label {
|
||
color: #2d7e72 !important;
|
||
}
|
||
}
|
||
.labourRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo2.png");
|
||
.value {
|
||
color: #e17900 !important;
|
||
}
|
||
.label {
|
||
color: #e17900 !important;
|
||
}
|
||
}
|
||
.dragonBoatRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo2.png");
|
||
.value {
|
||
color: #2f7f4b !important;
|
||
}
|
||
.label {
|
||
color: #2f7f4b !important;
|
||
}
|
||
}
|
||
.summerHolidayRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo2.png");
|
||
.value {
|
||
color: #047795 !important;
|
||
}
|
||
.label {
|
||
color: #047795 !important;
|
||
}
|
||
}
|
||
.midAutumnRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo2.png");
|
||
.value {
|
||
color: #e54b00 !important;
|
||
}
|
||
.label {
|
||
color: #e54b00 !important;
|
||
}
|
||
}
|
||
.nationalDayRightBox {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo2.png");
|
||
.value {
|
||
color: #dc3c25 !important;
|
||
}
|
||
.label {
|
||
color: #dc3c25 !important;
|
||
}
|
||
}
|
||
.revenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
|
||
}
|
||
.qmRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg3st.png");
|
||
}
|
||
.labourRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo3.png");
|
||
}
|
||
.dragonBoatRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo3.png");
|
||
}
|
||
.summerHolidayRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo3.png");
|
||
}
|
||
.midAutumnRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo3.png");
|
||
}
|
||
.nationalDayRevenueLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo3.png");
|
||
}
|
||
.revenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
|
||
.value {
|
||
color: #d48f00;
|
||
}
|
||
.label {
|
||
color: #d48f00;
|
||
}
|
||
}
|
||
.qmRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg4st.png");
|
||
.value {
|
||
color: #3873dd;
|
||
}
|
||
.label {
|
||
color: #3873dd;
|
||
}
|
||
}
|
||
.labourRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo4.png");
|
||
.value {
|
||
color: #f0490e;
|
||
}
|
||
.label {
|
||
color: #f0490e;
|
||
}
|
||
}
|
||
.dragonBoatRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo4.png");
|
||
.value {
|
||
color: #6f8a14;
|
||
}
|
||
.label {
|
||
color: #6f8a14;
|
||
}
|
||
}
|
||
.summerHolidayRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo4.png");
|
||
.value {
|
||
color: #2f7f4b;
|
||
}
|
||
.label {
|
||
color: #2f7f4b;
|
||
}
|
||
}
|
||
.midAutumnRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo4.png");
|
||
.value {
|
||
color: #b77500;
|
||
}
|
||
.label {
|
||
color: #b77500;
|
||
}
|
||
}
|
||
.nationalDayRevenueRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo4.png");
|
||
.value {
|
||
color: #e54b00;
|
||
}
|
||
.label {
|
||
color: #e54b00;
|
||
}
|
||
}
|
||
.carLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
|
||
}
|
||
.qmCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg5st.png");
|
||
}
|
||
.labourCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo5.png");
|
||
}
|
||
.dragonBoatCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo5.png");
|
||
}
|
||
.summerHolidayCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo5.png");
|
||
}
|
||
.midAutumnCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo5.png");
|
||
}
|
||
.nationalDayCarLeft {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo5.png");
|
||
}
|
||
.carRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
|
||
.value {
|
||
color: #3873dd;
|
||
}
|
||
.label {
|
||
color: #3873dd;
|
||
}
|
||
}
|
||
.qmCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg6st.png");
|
||
.value {
|
||
color: #0793bb;
|
||
}
|
||
.label {
|
||
color: #0793bb;
|
||
}
|
||
}
|
||
.labourCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo6.png");
|
||
.value {
|
||
color: #a59301;
|
||
}
|
||
.label {
|
||
color: #a59301;
|
||
}
|
||
}
|
||
.dragonBoatCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatNo6.png");
|
||
.value {
|
||
color: #218794;
|
||
}
|
||
.label {
|
||
color: #218794;
|
||
}
|
||
}
|
||
.summerHolidayCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayNo6.png");
|
||
.value {
|
||
color: #6f8a14;
|
||
}
|
||
.label {
|
||
color: #6f8a14;
|
||
}
|
||
}
|
||
.midAutumnCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnNo6.png");
|
||
.value {
|
||
color: #a08f00;
|
||
}
|
||
.label {
|
||
color: #a08f00;
|
||
}
|
||
}
|
||
.nationalDayCarRight {
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayNo6.png");
|
||
.value {
|
||
color: #b77500;
|
||
}
|
||
.label {
|
||
color: #b77500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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>
|