FuelLog/fuellog-web/src/pages/Statistics.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { NCard, NEmpty, NSpin, NSelect, NText } from 'naive-ui'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent,
} from 'echarts/components'
import { refuelsApi } from '@/api/refuels'
import { useVehicleStore } from '@/stores/vehicle'
import type { RefuelRecord } from '@/api/types'
import {
  consumptionL100km,
  costPerKm,
  pricePerLiter,
} from '@/utils/decimal'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  DataZoomComponent,
])

const store = useVehicleStore()
const records = ref<RefuelRecord[]>([])
const loading = ref(false)

// 趋势用过去多少月
const rangeOptions = [
  { label: '近 3 月', value: 3 },
  { label: '近 6 月', value: 6 },
  { label: '近 12 月', value: 12 },
  { label: '全部', value: 0 },
]
const range = ref(6)

async function load() {
  if (!store.currentId) {
    records.value = []
    return
  }
  loading.value = true
  try {
    records.value = await refuelsApi.list(store.currentId)
  } finally {
    loading.value = false
  }
}
onMounted(async () => {
  await store.loadList()
  await load()
})
watch(() => store.currentId, load)

// 过滤时间窗
const filtered = computed<RefuelRecord[]>(() => {
  if (!range.value) return records.value
  const cutoff = new Date()
  cutoff.setMonth(cutoff.getMonth() - range.value)
  return records.value.filter((r) => new Date(r.refuel_time) >= cutoff)
})

// 按月聚合工具
const monthKey = (iso: string) => {
  const d = new Date(iso)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
}

const byMonth = computed(() => {
  const map = new Map<string, RefuelRecord[]>()
  for (const r of filtered.value) {
    const k = monthKey(r.refuel_time)
    if (!map.has(k)) map.set(k, [])
    map.get(k)!.push(r)
  }
  // 月份升序
  return Array.from(map.entries()).sort((a, b) => (a[0] < b[0] ? -1 : 1))
})

// 1) 油价趋势:每月均价(总金额 / 升数)
const priceOption = computed(() => {
  const xs = byMonth.value.map(([k]) => k)
  const ys = byMonth.value.map(([, rs]) => {
    const totalA = rs.reduce((s, r) => s + r.total_amount, 0)
    const totalL = rs.reduce((s, r) => s + r.liters, 0)
    return totalL > 0 ? pricePerLiter(totalA, totalL) : 0
  })
  return lineOption(xs, ys, '元/升', '油价趋势')
})

// 2) 油耗趋势:每月只在"连续两次 is_full"之间采样;取当月样本的均值
const consumptionOption = computed(() => {
  const xs: string[] = []
  const ys: number[] = []
  for (const [k, rs] of byMonth.value) {
    // 升序遍历:相邻两次 is_full 算一次
    const sorted = [...rs].sort(
      (a, b) => new Date(a.refuel_time).getTime() - new Date(b.refuel_time).getTime(),
    )
    const samples: number[] = []
    let prevFull: RefuelRecord | null = null
    for (const r of sorted) {
      if (r.is_full) {
        if (prevFull) {
          const mileage = r.odometer - prevFull.odometer
          if (mileage > 0) samples.push(consumptionL100km(r.liters, mileage))
        }
        prevFull = r
      }
    }
    if (samples.length) {
      xs.push(k)
      ys.push(samples.reduce((s, x) => s + x, 0) / samples.length)
    }
  }
  return lineOption(xs, ys, 'L/100km', '标准油耗趋势')
})

// 3) 月度费用:每月加油总金额
const costOption = computed(() => {
  const xs = byMonth.value.map(([k]) => k)
  const ys = byMonth.value.map(([, rs]) =>
    Math.round(rs.reduce((s, r) => s + r.total_amount, 0) * 100) / 100,
  )
  return barOption(xs, ys, '元', '月度费用')
})

// 4) 每公里成本:同油耗的算法,每月一个样本
const costPerKmOption = computed(() => {
  const xs: string[] = []
  const ys: number[] = []
  for (const [k, rs] of byMonth.value) {
    const sorted = [...rs].sort(
      (a, b) => new Date(a.refuel_time).getTime() - new Date(b.refuel_time).getTime(),
    )
    const samples: number[] = []
    let prevFull: RefuelRecord | null = null
    for (const r of sorted) {
      if (r.is_full) {
        if (prevFull) {
          const mileage = r.odometer - prevFull.odometer
          if (mileage > 0) samples.push(costPerKm(r.total_amount, mileage))
        }
        prevFull = r
      }
    }
    if (samples.length) {
      xs.push(k)
      ys.push(samples.reduce((s, x) => s + x, 0) / samples.length)
    }
  }
  return lineOption(xs, ys, '元/公里', '每公里成本')
})

function lineOption(xs: string[], ys: number[], unit: string, title: string) {
  return {
    grid: { left: 50, right: 20, top: 30, bottom: 30 },
    tooltip: { trigger: 'axis' as const, valueFormatter: (v: unknown) => `${v} ${unit}` },
    xAxis: { type: 'category' as const, data: xs, boundaryGap: false },
    yAxis: { type: 'value' as const, name: unit, nameTextStyle: { color: '#999' } },
    series: [
      {
        type: 'line' as const,
        data: ys,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { width: 2, color: '#18a058' },
        itemStyle: { color: '#18a058' },
        areaStyle: { color: 'rgba(24,160,88,0.12)' },
      },
    ],
    title: { text: title, left: 'left', textStyle: { fontSize: 13, fontWeight: 600 } },
  }
}
function barOption(xs: string[], ys: number[], unit: string, title: string) {
  return {
    grid: { left: 50, right: 20, top: 30, bottom: 30 },
    tooltip: { trigger: 'axis' as const, valueFormatter: (v: unknown) => `${v} ${unit}` },
    xAxis: { type: 'category' as const, data: xs },
    yAxis: { type: 'value' as const, name: unit, nameTextStyle: { color: '#999' } },
    series: [
      {
        type: 'bar' as const,
        data: ys,
        itemStyle: { color: '#18a058', borderRadius: [4, 4, 0, 0] },
      },
    ],
    title: { text: title, left: 'left', textStyle: { fontSize: 13, fontWeight: 600 } },
  }
}
</script>

<template>
  <div class="max-w-screen-md mx-auto space-y-3">
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold">统计</h2>
      <NSelect v-model:value="range" :options="rangeOptions" size="small" style="width: 110px" />
    </div>

    <NText v-if="!store.currentId" depth="3">还没有车辆,无法展示统计。</NText>

    <NSpin v-else :show="loading">
      <NEmpty v-if="!loading && !filtered.length" description="选定时间窗内还没有加油记录" />

      <div v-else class="space-y-3">
        <NCard class="!rounded-2xl">
          <VChart :option="priceOption" autoresize style="height: 220px" />
        </NCard>
        <NCard class="!rounded-2xl">
          <VChart :option="consumptionOption" autoresize style="height: 220px" />
        </NCard>
        <NCard class="!rounded-2xl">
          <VChart :option="costOption" autoresize style="height: 220px" />
        </NCard>
        <NCard class="!rounded-2xl">
          <VChart :option="costPerKmOption" autoresize style="height: 220px" />
        </NCard>
      </div>
    </NSpin>
  </div>
</template>