<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 === 2">
              根据历史大数据显示：<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 === 4"
        >
          <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="entryCarNumber"
            :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) {
          dataObj.compareList.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"));
          });
          // 根据字段 拿到开始结束时间 月日  因为年份不好添加 所以只能用月日 来筛选开始结束时间
          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) {
          console.log("dataObj.curList", dataObj.curList);
          dataObj.curList.forEach((item) => {
            const date = new Date(item.name);
            let m = date.getMonth() + 1;
            let d = date.getDate();
            let dateText = `${m}.${d}`;
            item.easyDate = dateText;
            if (
              new Date(item.name).getTime() < new Date(this.lastDay).getTime()
            ) {
              realCurList.push(Number(item.value));
              curListList.push(Number(item.value) / 10000);
              curDateList.push(moment(item.name).format("YYYY-MM-DD"));
            }
          });

          // 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;
          //     }
          //   });

          //   console.log("startIndex", startIndex);
          //   console.log("endIndex", endIndex);
          //   console.log("list", list);
          // }

          // // 截取出来的实际数据数组
          // 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("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.res2 = normalData;
      this.opts = {
        categories: normalData.categories,
        series: normalData.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        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 === 2
                  ? 3000
                  : this.selectFestival === 6
                  ? 900
                  : 1500,
            },
          ],
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow",
          },
        },
        selectFestival: this.selectFestival,
      };
      let phoneInfo = uni.getStorageSync("phoneInfo");
      console.log("phoneInfo", phoneInfo);
      this.opts2 = {
        width: phoneInfo.screenHeight + "px",
        height: 2 * phoneInfo.screenWidth + "px",
        categories: normalData.categories,
        series: normalData.series,
        animation: false,
        rotate: true,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        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
                  ? 3000
                  : this.selectFestival === 6
                  ? 900
                  : 1500,
            },
          ],
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow",
          },
        },
        selectFestival: this.selectFestival,
      };
      console.log("this.opts2", this.opts2);
      console.log("this.res2", this.res2);
      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;
      console.log("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>
