zx_flk_app/pages/mileageStatistics/index.vue

<template>
  <view class="mileage-statistics-page">
    <view class="search-type-wrap">
      <view
        v-for="item in queryTypes"
        :class="['item', curType == item.type && 'isActive']"
        :key="item.type"
        @tap="changeType(item.type)"
      >
        {{ item.label }}
      </view>
    </view>
    <view class="statistics-wrap">
      <view class="kilometers-row">
        <view class="kilometers">
          <u-count-to
            :start-val="0"
            :end-val="1361.8"
            :decimals="1"
            class="count"
            font-size="80rpx"
            bold
          />
          <text class="unit">km</text>
        </view>
        <view class="date">2023-2024</view>
      </view>
      <view class="statistics-row">
        <view
          v-for="(item, idx) in statisticsEnum"
          :key="idx"
          class="item"
        >
          <view class="label">{{ item.label }}</view>
          <view class="value">
            <u-count-to
              :start-val="0"
              :end-val="statisticsInfo[item.prop]"
              bold
            />
            {{ item.unit }}
          </view>
        </view>
      </view>
    </view>
    <view ref="chartContainer" class="charts-container"></view>
    <view class="list-wrap">
      <view
        v-for="(item, idx) in cyclingRecord"
        :key="idx"
        class="list-item"
      >
        <view class="row top-row">
          <view>行驶里程
            <u-count-to
              :start-val="0"
              :end-val="54"
              :decimals="2"
              class="num"
              bold
            /> km
          </view>
          <view>2024-12-04 16:15</view>
        </view>
        <view class="row bottom-row">
          <text>功率: 30wh</text>
          <text>减少碳排放: 40g</text>
          <text>骑行时长: 00:20:31</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      queryTypes: [],
      curType: '0',
      cyclingRecord: [
        {}, {}, {}
      ],
      statisticsInfo: {
        num: 9,
        power: '475',
        reduceEmissions: '996',
        cyclingDuration: 432
      }
    }
  },
  computed: {
    statisticsEnum() {
      const t = v => this.$t(v)
      return [
        { label: t('骑行次数'), unit: t('次'), prop: 'num' },
        { label: t('累计功率'), unit: 'wh', prop: 'power' },
        { label: t('减少排放量'), unit: 'g', prop: 'reduceEmissions' },
        { label: t('骑行时长'), unit: '天', prop: 'cyclingDuration' }
      ]
    }
  },
  created() {
    this._initQueryTypes()
  },
  mounted() {
    this.initChart()
  },
  methods: {
    _initQueryTypes() {
      this.queryTypes = [
        { label: '总', type: '0' },
        { label: '年', type: '1' },
        { label: '月', type: '2' },
        { label: '周', type: '3' },
        { label: '日', type: '4' }
      ]
    },
    changeType(type) {
      this.setData({
        curType: type
      })
    },
    initChart() {
        // this.chart = echarts.init(this.$refs.chartContainer);
        console.log(111, this.$refs.chartContainer)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";

.mileage-statistics-page {
  padding: 24rpx 32rpx;
  background: #fff;
  min-height: 100vh;
  .search-type-wrap {
      background: #F4F5F6;
      border-radius: 16rpx;
      display: flex;
      padding: 4rpx;
      .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 134rpx;
          height: 52rpx;
          border-radius: 12rpx;
          font-size: 28rpx;
          color: #060809;
          &.isActive {
              background: #FFFFFF;
          }
      }
  }
  .statistics-wrap {
      margin: 64rpx 0 0 0;
      .kilometers-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .kilometers {
              .count {
                  font-family: DIN, DIN;
                  font-size: 80rpx;
                  color: #060809;
              }
              .unit {
                  font-weight: bold;
                  font-size: 40rpx;
                  margin-left: 16rpx;
              }
          }
          .date {
              font-family: Roboto, Roboto;
              font-weight: 400;
              font-size: 32rpx;
              color: #060809;
          }
      }
      .statistics-row {
          display: flex;
          justify-content: space-between;
          margin: 64rpx 0 102rpx;
          .item {}
      }
  }
  .charts-container {
    width: 100%;
    height: 250rpx;
  }
  .list-wrap {
      .list-item {
          margin-bottom: 70rpx;
      }
      .row {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      .top-row {
          margin-bottom: 22rpx;
          font-size: 28rpx;
          color: #060809;
          .num {
              margin: 0 4rpx 0 8rpx;
              font-size: 44rpx;
          }
      }
      .bottom-row {
          font-size: 28rpx;
          color: #9D9E9F;
      }
  }
}
</style>