<template>
  <modulen>
    <template #title>收费重点数据</template>
    <template #end>
      <date-switcher
        v-model="selectType"
        @change="handleChangeDate"
        :selectTime="1"
        :type="2"
      ></date-switcher>
      <!-- <new-date-switcher v-model="selectType" @change="handleChangeDate" :selectTime="1"></new-date-switcher> -->
    </template>
    <div class="importantData-md">
      <div class="importantData-bg-top">
        <div class="realTime_vehicle">
          <div class="vehicle_text">
            <div class="vehicle">实时车辆:</div>
          </div>
          <div>
            <div class="demo">
              <ul
                id="remove"
                :class="[num.length >= 7 ? 'fp-box' : 'fp-box_new']"
              >
                <!-- 需要显示7列 -->
                <li
                  v-for="index in num.length >= 8 ? num.length : 8"
                  :key="index"
                >
                  <span v-for="num in 10" :key="num">{{ num - 1 }}</span>
                </li>
                <span class="vehicle_unit">辆</span>
              </ul>
            </div>
          </div>
        </div>
        <div class="in-center-tj in-center-tj-top">
          <div class="in-ce-text1">收入指标（万元）</div>
          <div class="in-ce-text2">
            {{ formatThousand(datainfo.qfys || 0) }}
          </div>
        </div>
        <div class="in-center-tj">
          <div class="in-ce-text1">清分收费/指标占比</div>
          <div class="in-ce-text2">{{ datainfo.qfsryszb }}%</div>
          <!-- <div class="in-ce-text3">{{ datainfo.time }}</div> -->
        </div>
        <div class="suspen-qfsr suspen-qfsr-1">
          <div class="text1">预清分收入（万元）</div>
          <div class="text1-1">
            {{ liveData.startdate }}~{{ liveData.enddate }}
          </div>
          <div class="text2">{{ formatThousand(feesumNum || 0) }}</div>
        </div>
        <div class="suspen-qfsr suspen-qfsr-2">
          <div class="text1">清分收入（万元）</div>
          <div class="text1-1">
            {{ datainfo.clearStartDate }}~{{ datainfo.clearEndDate }}
          </div>
          <div class="text2">
            {{ formatThousand(datainfo.qfsr || 0) }}
          </div>
        </div>

        <div class="suspen suspen-c suspen-padright">
          <div class="suspen-text1">减免费用（万元）</div>
          <div class="suspen-text2">
            {{ formatThousand(datainfo.jmfy || 0) }}
          </div>
        </div>
        <!-- 数据跟日均清分收入对调了 -->
        <div class="suspen suspen-b suspen-padright">
          <div class="suspen-text1">日均车流量（万辆）</div>
          <div class="suspen-text2">
            {{ formatThousand(datainfo.rjcll || 0) }}
          </div>
        </div>

        <!-- 数据跟日均车流量对调了 -->
        <div class="suspen suspen-d suspen-padleft">
          <div class="suspen-text1">日均清分收入（万元）</div>
          <div class="suspen-text2">
            {{ formatThousand(datainfo.rjqfsr || 0) }}
          </div>
        </div>
        <div class="suspen suspen-a suspen-padleft">
          <div class="suspen-text1">日均单公里收入（万元）</div>
          <div class="suspen-text2">
            {{ formatThousand(datainfo.rjzcl || 0) }}
          </div>
        </div>
      </div>

      <div class="bottomboxlist">
        <!-- <div class="bot-item">
          <div class="bot-item-text1">年度通行量(万辆)</div>
          <div class="bot-item-text2">
            {{ (datainfo.ndtxl / 10000).toFixed(2) || 0}}
          </div>
        </div> -->
        <div class="bot-item">
          <div class="bot-item-text1">客车通行量(万辆)</div>
          <div class="bot-item-text2">
            {{ formatThousand(datainfo.keFlowCount || 0) }}
          </div>
        </div>
        <div class="bot-item">
          <div class="bot-item-text1">货车通行量(万辆)</div>
          <div class="bot-item-text2">
            {{ formatThousand(datainfo.ndhctxl || 0) }}
          </div>
        </div>
        <div class="bot-item">
          <div class="bot-item-text1">特情车辆数(万辆)</div>
          <div class="bot-item-text2">
            {{ formatThousand(datainfo.drtqsl || 0) }}
          </div>
        </div>
        <div class="bot-item">
          <div class="bot-item-text1">现金通行量(万辆)</div>
          <div class="bot-item-text2">
            {{ formatThousand(datainfo.cashFlowCount || 0) }}
          </div>
        </div>
        <div class="bot-item">
          <div class="bot-item-text1">非现金通行量(万辆)</div>
          <div class="bot-item-text2">
            {{ formatThousand(datainfo.fxj || 0) }}
          </div>
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { formatThousand, formatThousandMoney } from "@/utils/util";
import moment from "moment";

import {
  dayAvgFlowcount,
  daySpecialnum,
  yearTruckFlow,
  currentDayFee,
  qingfenAmount,
  yearEtcFlow,
  getRedisData,
  cashorNotFlow,
  getLiveData,
  Gateavgclear,
  GetreduceFee,
  getLiveDatas,
  getEnExFlowRealTime,
  getQingfenAmountNew,
} from "@/api/chargeInfo.js";
export default {
  data() {
    return {
      random: 0,
      timer: null,
      presentY: "",
      presentN: "",
      present: "",
      noTimeCount: "",
      ndCount: "", //年度
      count: "", //计算结果
      goTime: true,
      data1: "",
      newNum: "",
      live_interval: null,
      selectType: 1,
      datainfo: {
        drtxf: "", //当日通行费
        drtqsl: "", // 当日特情数量
        ndhctxl: "", //年度货车通行量
        jmfy: "",

        ndtxl: "", //年度通行量   timemode:year level按需求传
        rjmglsr: "", //日均每公里收入  timemode和level按需求传参
        rjzcl: "", // 日均车流量   timemode和level按需求传参
        rjsr: "", // 日均收入
        rjqfsr: "",
        ndetctxl: "", //年度etc通行量
        rjcll: "", //新增日均车流量  请用新增接口数据

        time: "", //时间
        qfsr: "", // 清分收入
        qfys: "", // 清分预算
        qfsryszb: "", //清分收入预算占比
      },
      query: {
        timemode: "year",
        timeflag: moment(new Date()).format("yyyy"),
        level: 0,
        dimension: "",
      },
      time: {
        timemode: "day",
        timeflag: moment(new Date()).format("yyyyMMDD"),
        level: 0,
        dimension: "",
      },
      queryDay: {
        day: moment(new Date()).subtract(1, "day").format("yyyyMMDD"),
        level: 0,
        dimension: "",
      },
      queryYear: {
        level: 0,
        dimension: "",
        year: moment(new Date()).format("yyyy"),
      },
      liveData: {},
      feesumNum: "", // 预清分数据

      numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //固定每列中的19行数字
      numStr: "", // 需要展示的数字字符串
      numArr: [0, 0, 0, 0, 0, 0, 0, 0], //默认展示8个数字数组
      num: "00000001",
    };
  },

  mounted() {
    // this.getData();
    // this.getFlowRealTime()
    //实时收入
    // this.initNumCard()
    this.live_interval = setInterval(() => {
      this.getLiveData();
      // 预清分数据
      this.getQingfenAmountNew();
    }, 1000 * 60);
    // this.live_interval = setInterval(() => {
    //     // this.getFlowRealTime();
    // }, 30 * 1000);

    this.live_interval = setInterval(() => {
      this.setTime();
    }, 60 * 1000);
  },

  computed: {
    getDate() {
      this.query.timeflag = moment(this.$store.state.appDate).format("yyyy");
      return this.$store.state.appDate;
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
  },
  watch: {
    getDate(newVal) {
      if (
        moment(newVal).format("yyyyMMDD") !=
        moment(new Date()).format("yyyyMMDD")
      ) {
        this.time.timeflag = moment(new Date()).format("yyyyMMDD");
      }
      // 年
      if (this.selectType === 1) {
        this.query.timeflag = moment(newVal).format("yyyy");
        this.present = this.query.timeflag;
      } else if (this.selectType === 2) {
        this.query.timeflag = moment(newVal).format("yyyyMM");
        this.present = this.query.timeflag;
      } else {
        this.query.timeflag = moment(newVal).format("yyyyMMDD");
      }
      this.getData();
      this.getFlowRealTime();
      // this.setTime();
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = this.queryDay.level = this.queryYear.level = level;
      this.query.dimension =
        this.queryDay.dimension =
        this.queryYear.dimension =
          roadId;
      this.time.level = level;
      this.time.dimension = roadId;
      this.getData();
      this.getFlowRealTime();
      // this.setTime();
    },
    num(val, oVal) {
      // this.setTime();
      this.goTime = true;
      this.num = String(this.num);
      this.numStr = String(val);
      this.numArr = this.numStr.split("");
      let numArrlen = this.numArr.length;
      // 展示数字的处理，不够7位前面补0
      // 默认进来是7位，超过自动加

      if (this.num.length <= 7) {
        for (
          let i = 0;
          i <= (this.num.length >= 7 ? this.num.length : 7) - numArrlen;
          i++
        ) {
          this.numArr.unshift(0);
        }
      }
      let list = document.querySelectorAll(".demo li");
      //   console.log(194,list);
      list.forEach((item, index) => {
        let ty = this.numArr[index];
        // 滚动数字(li标签)
        item.setAttribute("class", `item0${ty}`);
      });
    },
  },
  beforeUnmount() {
    if (this.live_interval) {
      clearInterval(this.live_interval);
      clearInterval(this.timer);
    }
  },
  methods: {
    formatThousandMoney,
    formatThousand,
    handleChangeDate(value) {
      this.selectType = value;
      // 年
      if (value === 1) {
        this.query.timemode = "year";
        this.query.timeflag = moment(this.getDate).format("yyyy");
        this.time.timemode = "day";
        this.time.timeflag = moment(this.getDate).format("yyyyMMDD");
        this.getFlowRealTime();
        if (
          moment(this.getDate).format("yyyyMMDD") !=
          moment(new Date()).format("yyyyMMDD")
        ) {
          this.time.timeflag = moment(new Date()).format("yyyyMMDD");
        }
      } else if (value === 2) {
        // this.ListArr=nulls
        this.query.timemode = "month";
        this.query.timeflag = moment(this.getDate).format("yyyyMM");
        this.time.timemode = "day";
        this.time.timeflag = moment(this.getDate).format("yyyyMMDD");
        if (
          moment(this.getDate).format("yyyyMMDD") !=
          moment(new Date()).format("yyyyMMDD")
        ) {
          this.time.timeflag = moment(new Date()).format("yyyyMMDD");
        }
        // console.log(3333333333);
        this.getLiveData();
      } else {
        // 季度
        this.query.timemode = "day";
        this.query.timeflag = moment(this.getDate).format("yyyyMMDD");
      }
      this.getData();
      this.getFlowRealTime();
      // this.setTime();
    },

    async getData() {
      this.getLiveData();
      // 可用年、月、日查询的 query
      const data = await dayAvgFlowcount(this.query);
      this.datainfo.rjqfsr = data.msgContent[0]?.avgclearamount; //日均收入
      // console.log(350,data.msgContent[0]);
      this.datainfo.rjcll = data.msgContent[0]?.avgflowcount;
      this.datainfo.ndtxl = data.msgContent[0]?.flowCount; // 年度通行量
      this.datainfo.rjmglsr = data.msgContent[0]?.avgamountperlen; //日均每公里收入
      this.datainfo.rjzcl = data.msgContent[0]?.avgclearamountperlen; // 日均单公里收入
      this.datainfo.rjsr = data.msgContent[0]?.avgamount; //日均收入
      const NewData = await GetreduceFee(this.query);
      this.datainfo.jmfy = NewData.msgContent[0]?.reduceAmount.toFixed(2); //减免费用
      this.datainfo = Object.assign({}, this.datainfo, data.msgContent[0]); //日均收入
      try {
        // console.log(359,this.query);
        const data2 = await qingfenAmount(this.query);
        this.datainfo.time = data2.msgContent[0]?.timeFlag; //时间
        this.datainfo.qfsr = data2.msgContent[0]?.qingfenAmount; //清分收入
        let qfsrMantissa = String(this.datainfo.qfsr).split(".")[1];
        if (qfsrMantissa && qfsrMantissa.length == 1) {
          qfsrMantissa = (qfsrMantissa - 0) * 10;
          const qfsrFront = String(this.datainfo.qfsr).split(".")[0];
          this.datainfo.qfsr = ((qfsrFront + qfsrMantissa - 0) / 100).toFixed(
            2
          );
        } else {
          this.datainfo.qfsr = data2.msgContent[0]?.qingfenAmount;
        }
        this.datainfo.qfys = data2.msgContent[0]?.budget; //清分预算
        this.datainfo.qfsryszb = data2.msgContent[0]?.amountRate; //清分收入预算占比
        // console.log(374,data2);
        if (this.datainfo.qfsryszb == null) {
          this.datainfo.qfsryszb = 0;
        }
        this.datainfo.clearStartDate = data2.msgContent[0]?.clearStartDate; //开始起
        this.datainfo.clearEndDate = data2.msgContent[0]?.clearEndDate; //结束日期
        //    console.log(367, data2.msgContent[0]);
        // 预清分数据
        this.getQingfenAmountNew();
      } catch (err) {}

      try {
        const dataFxj = await cashorNotFlow(this.query);
        this.datainfo.fxj = (
          dataFxj.msgContent[0]?.notcashFlowCount / 10000
        ).toFixed(2);
        this.datainfo.cashFlowCount = (
          dataFxj.msgContent[0]?.cashFlowCount / 10000
        ).toFixed(2);
      } catch (err) {}

      try {
        // 只能用日查询 queryDay
        const drtxf = await currentDayFee(this.queryDay);
        this.datainfo.drtxf = drtxf.msgContent[0]?.feeSum; //当日通行费
      } catch (err) {}
      try {
        const drtq = await daySpecialnum(this.query);

        // 第六中心是没有值的，所以直接给0，如果返回数据有值。便不会进入这个判断
        if (drtq.msgContent.length === 0) {
          this.datainfo.drtqsl = 0;
        }
        this.datainfo.drtqsl = parseFloat(
          drtq.msgContent[0].specialnum / 10000
        ).toFixed(2); //当日特情数量
      } catch (err) {}

      try {
        //只能用年查询 queryYear
        const ndhctxl = await yearTruckFlow(this.query);
        this.datainfo.ndhctxl = (
          parseFloat(ndhctxl.msgContent[0]?.huoFlowCount || 0) / 10000
        ).toFixed(2); //年度货车通行量
        this.datainfo.keFlowCount = (
          parseFloat(ndhctxl.msgContent[0]?.keFlowCount || 0) / 10000
        ).toFixed(2); //年度货车通行量
      } catch (err) {}

      try {
        const ndetc = await yearEtcFlow(this.queryYear);
        this.datainfo.ndetctxl = ndetc.msgContent[0].etcFlowcount; //年度etc
        // this.datainfo.ndtxl = (ndetc.msgContent[0].flowCount / 10000).toFixed(2); // 年度通行量
      } catch (err) {}
    },

    async getLiveData() {
      // const liveData = await getLiveData(
      //   Object.assign({}, this.query, {
      //     timeFlag: this.query.timemode,
      //   })
      // );
      const liveDatas = await getLiveDatas(this.query);
      this.liveData = { ...liveDatas.msgContent[0] };
      // 预清分数据单独调接口获取  不取此接口返回的值
      // this.liveData.feesum = ''
      // this.liveData.feesum = this.liveData.feesum;
      // let mantissa = String(this.liveData.feesum).split(".")[1];
      // if (mantissa && mantissa?.length == 1) {
      //   mantissa = (mantissa - 0) * 10;
      //   const front = String(this.liveData.feesum).split(".")[0];
      //   // this.liveData.feesum = ((front + mantissa - 0) / 100).toFixed(2);
      // } else {
      //   // this.liveData.feesum = this.liveData.feesum;
      // }
    },
    async getFlowRealTime() {
      if (
        this.getDate &&
        moment(this.getDate).format("yyyyMM") < moment().format("yyyyMM")
      ) {
        // 当前月份之前不需要获取实时车流量
        this.resData = 0;
      } else {
        // 只有展示本月的情况才需要获取实时车流量
        const res = await getEnExFlowRealTime(this.time);
        this.resData = res.msgContent[0].flowCount - 0; // console.log("401,实时车流量", this.resData);
      }
      const data = await dayAvgFlowcount(this.query); //年度车流量
      this.noTimeCount = data.msgContent[0].flowCount;
      //如果年度数据为空即不显示，默认为八位数0
      if (this.noTimeCount == null) {
        // console.log("如果年度数据为空即不显示，默认为八位数0")
        this.num = "00000000";
        clearInterval(this.timer); //关闭定时器
        return;
      }
      //如果实施车流量数据为空或不显示，默认为年度数据或者八位数0
      if (
        this.resData == null ||
        this.resData == 0 ||
        this.resData == undefined
      ) {
        // console.log("如果实施车流量数据为空或不显示，默认为年度数据或者八位数0")
        this.num = this.noTimeCount ? this.noTimeCount : "00000000";
        clearInterval(this.timer); //关闭定时器
        return;
      }

      //因为安徽贵州湖南云南没有数据   暂时屏蔽掉
      if (["AH", "GZ", "HN", "YN"].includes(this.query.dimension)) {
        // console.log("因为安徽贵州湖南云南没有数据   暂时屏蔽掉");
        clearInterval(this.timer); //关闭定时器
        return;
      }

      this.num = this.noTimeCount + this.resData; //进入页面即显示基础数值 年度+车流量
      clearInterval(this.timer); //关闭定时器

      this.timer = setInterval(() => {
        //如果选择为重庆或者全国时 随机数为10内 ，其他地区则为随机数5内
        if (this.query.dimension == undefined || this.query.dimension == "CQ") {
          // console.log("如果为重庆或者全国时随机数为10以内，不包括子路段");
          this.random = Math.floor(Math.random() * 10);
        } else {
          // console.log("如果为重庆或者全国以外时随机数为5以内，包括子路段");
          this.random = Math.floor(Math.random() * 5);
        }
        //如果随机数等于0时 就让随机数等于1
        if (this.random == 0) {
          this.random = 1;
        }
        this.resData += this.random;
        this.num = this.resData + this.noTimeCount;
        //   console.log("每五秒变动的数据，",this.num );
      }, 5000);
    },

    //一分钟后重新请求数据，查看是否可以校准
    async setTime() {
      if (
        this.getDate &&
        moment(this.getDate).format("yyyyMM") < moment().format("yyyyMM")
      ) {
        return;
      }
      const res = await getEnExFlowRealTime(this.time);
      let resDataflowCount = res.msgContent[0].flowCount - 0;
      const data = await dayAvgFlowcount(this.query);
      let dataFlowCount = data.msgContent[0].flowCount;
      let dataNum = dataFlowCount + resDataflowCount;
      console.log("每分钟秒变动的数据，", dataNum, res, data);
      //如果年度数据为空即不显示，默认为八位数0
      if (dataFlowCount == null) {
        console.log(481, "一分钟后校准数据默认为八位数0");
        this.num = "00000000";
        clearInterval(this.timer); //关闭定时器
      }
      //如果实施车流量数据为空或不显示，默认为年度数据或者八位数0
      if (
        resDataflowCount == null ||
        resDataflowCount == 0 ||
        resDataflowCount == undefined
      ) {
        console.log(482, "一分钟后校准数据默认为八位数0或者年度数据");
        this.num = resDataflowCount ? resDataflowCount : "00000000";
        clearInterval(this.timer);
      }
      //如果叠加的数量小于最新请求的年度*实时车流量总和的时候就用最新的总和去当值计算  （一分钟校准一次）
      if (this.num <= dataNum) {
        clearInterval(this.timer);
        this.num = dataNum;
        this.getFlowRealTime();
      }
    },
    // 预清分数据 新接口
    async getQingfenAmountNew() {
      this.feesumNum = 0;
      if (!this.datainfo.clearEndDate || !this.liveData.enddate) {
        return;
      }
      const params = {
        startdate: this.datainfo.clearEndDate.replace(/-/g, ""),
        enddate: this.liveData.enddate.replaceAll("-", ""),
        level: this.query.level,
        dimension: this.query.dimension,
      };
      const { msgState, msgContent } = await getQingfenAmountNew(params);
      if (msgState === "SUCCESS" && msgContent.length) {
        let sum = msgContent[0].feesum || 0;
        // 云南做假数据
        // if (
        //   params.dimension === "1551973630102081536" ||
        //   params.dimension === "401" ||
        //   params.dimension === "YN"
        // ) {
        //   const deltaDay = moment(params.enddate).diff(
        //     moment(params.startdate),
        //     "days"
        //   );
        //   sum = (this.datainfo.rjqfsr || 0) * deltaDay;
        // }
        // console.log(1212, this.datainfo)
        this.feesumNum = parseFloat(sum + (+this.datainfo.qfsr || 0)).toFixed(2);
        // this.feesumNum = (parseFloat(msgContent[0].feesum) + parseFloat(this.datainfo.qfsr)).toFixed(2)
      } else {
        this.feesumNum = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.importantData-md {
  width: 100%;
  height: 100%;

  .importantData-bg-top {
    width: 100%;
    height: calc(100% - vh(78));
    background: url("@/assets/images/ChargeInfo/new_importantDatabg.png");
    background-size: 100% 100%;
    padding: 1px;
    // display: flex;
    // align-items: center;
    position: relative;
  }

  .text-top,
  .text-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: vw(18);
  }

  .text-top {
    top: 20px;
  }

  .text-top-in {
    font-size: vw(28);
    font-family: "Exo2";
    font-weight: bold;
  }

  .text-bottom {
    bottom: 20px !important;
  }

  .in-center-tj {
    width: vw(190);
    height: vh(80);
    margin: auto;
    padding: 1px;

    div {
      width: 100%;
      text-align: center;
    }

    .in-ce-text1 {
      font-size: vw(18);
      // font-weight: bold;
      font-family: "YouSheBiaoTiHei";
      letter-spacing: 1px;
    }

    .in-ce-text2 {
      font-family: "DinNextRegular";
      font-size: vw(28);
      letter-spacing: 1px;
    }

    .in-ce-text2-1 {
      font-family: "DinNextRegular";
      font-size: vw(20);
      letter-spacing: 1px;
    }

    .in-ce-text3 {
      color: #f5f5f5ea;
    }
  }

  .in-center-tj-top {
    margin-top: vh(210);
  }

  .suspen {
    width: vw(185);
    height: vh(53);
    line-height: vh(18);

    .suspen-text1 {
      width: 100%;
      text-align: center;
      font-size: vw(12);
      color: #909fac;
      margin-top: vh(7);
    }

    .suspen-text2 {
      width: 100%;
      text-align: center;
      font-size: vw(17);
      font-family: "DinNextRegular";
    }
  }

  .suspen-padleft {
    padding-left: vw(40);
  }

  .suspen-padright {
    padding-right: vw(20);
  }

  //
  .suspen-a {
    position: absolute;
    right: 15%;
    bottom: 3%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon1.png");
    background-size: 100% 100%;
  }

  .suspen-b {
    position: absolute;
    left: 15%;
    bottom: 3%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon2.png");
    background-size: 100% 100%;
  }

  .suspen-c {
    position: absolute;
    left: 5%;
    top: 60%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon3.png");
    background-size: 100% 100%;
  }

  .suspen-d {
    position: absolute;
    right: 5%;
    top: 60%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon4.png");
    background-size: 100% 100%;
  }

  .suspen-qfsr {
    width: vw(230);
    height: vh(68);
    line-height: vh(18);
    box-sizing: border-box;
    padding: vh(7) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .text1 {
      width: 100%;
      text-align: center;
      font-size: vw(14);
    }

    .text1-1 {
      width: 100%;
      text-align: center;
      font-size: vw(12);
    }

    .text2 {
      width: 100%;
      text-align: center;
      font-size: vw(22);
      font-family: "DinNextRegular";
    }
  }

  .suspen-qfsr-1 {
    position: absolute;
    left: 10%;
    top: 30%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon6.png");
    background-size: 100% 100%;
    padding-right: vw(30);
  }

  .suspen-qfsr-2 {
    position: absolute;
    right: 10%;
    top: 30%;
    background: url("@/assets/images/ChargeInfo/sfzd-icon7.png");
    background-size: 100% 100%;
    padding-left: vw(40);
  }

  .bottomboxlist {
    width: 100%;
    height: vh(78);
    margin-top: vh(10);
    display: flex;

    .bot-item {
      width: calc(20% - 30px);
      height: 100%;
      margin-left: 15px;
      margin-right: 15px;
      background: url("@/assets/images/ChargeInfo/sfzd-icon5.png");
      background-size: 100% 100%;
      padding: 1px;

      div {
        width: 100%;
        text-align: center;
      }
    }

    .bot-item-text1 {
      font-size: vw(12);
      color: #94a8c6;
      margin-top: vh(12);
    }

    .bot-item-text2 {
      font-size: vw(17);
      font-family: "DinNextRegular";
      margin-top: vh(5);
    }
  }
}

.realTime_vehicle {
  position: absolute;
  top: 20px;
  width: 100%;
  height: vh(120);
  line-height: vh(50);

  .vehicle_text {
    display: flex;
    position: absolute;
    left: vw(50);
    top: vh(22);
  }

  .letfBox {
    display: flex;
    flex-wrap: wrap;
    width: vw(44);
    height: vh(60);
    margin-right: 10px;
    background: url("@/assets/images/ChargeInfo/vehicle_back.png");
    background-size: 100% 100%;
  }

  .vehicle {
    display: flex;
    width: vw(100);
    margin-left: vw(10);
    font-size: 20px;
    margin-left: vw(60);
  }

  .number_Text {
    position: absolute;
    display: flex;
    left: vw(200);
    width: vw(400);
    height: 70px;
    margin-left: 20px;
  }

  .unit {
    position: absolute;
    left: vw(232);
    top: vh(-25);
    width: vw(500);

    .unitName {
      width: vw(44);
      display: inline-block;
      margin-right: 3px;
      color: #5bc6ff;
      text-align: center;
    }
  }

  .unit_text {
    width: vw(44);
    height: vh(20);
    position: absolute;
    top: -10px;
    font-size: 12px;
    text-align: center;
    color: #5bc6ff;
  }

  .unit_Number {
    display: inline-block;
    width: vw(44);
    height: vh(60);
    line-height: vh(60);
    margin-top: 20px;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: #6befff;
    background: url("@/assets/images/ChargeInfo/vehicle_back.png");
    background-size: 100% 100%;
  }
}

.demo {
  position: absolute;
  left: vw(220);
  top: vh(15);
  width: vw(500);
  overflow: hidden;
}

.vehicle_unit {
  font-size: 16px;
  line-height: 0px;
  padding: 0;
  padding-top: vh(50);
  margin-left: vh(20);
  // background-color: aliceblue;
}

.douhao {
  width: 5px;
  height: 5px;
  background-color: aliceblue;
}
</style>
<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.fp-box {
  width: 550px;
  display: flex;
  overflow: hidden;

  // &:last-of-type {
  //   li:last-of-type {
  //     display: none;
  //   }
  // }

  li {
    -webkit-text-size-adjust: none;
    font-size: 0;
    margin-left: 12px;
    width: 35px;
    height: 60px;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    list-style-type: none;

    span {
      text-align: center;
      background: url("@/assets/images/ChargeInfo/vehicle_back.png");
      font-size: 36px;
      color: #5bc8ff;
      font-family: "Source Han Sans CN";
      font-weight: 900;
      width: 44px;
      height: 60px;
      border-radius: 10px;
      line-height: 60px;
      float: left;
    }
  }
}

.fp-box_new {
  width: 550px;
  display: flex;
  overflow: hidden;

  // &:last-of-type{
  //   li:last-of-type{
  //     display: none;
  //   }
  //  }
  li {
    -webkit-text-size-adjust: none;
    font-size: 0;
    margin-left: 12px;
    width: 35px;
    height: 60px;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    list-style-type: none;

    span {
      text-align: center;
      background: url("@/assets/images/ChargeInfo/vehicle_back.png");
      font-size: 36px;
      color: #5bc8ff;
      font-family: "Source Han Sans CN";
      font-weight: 900;
      width: 44px;
      height: 60px;
      border-radius: 10px;
      line-height: 60px;
      float: left;
    }
  }
}

@for $i from 0 through 9 {
  $base-font-size: -60px;

  .item0#{$i} {
    transform: translateY($i * $base-font-size);
  }
}
</style>
