<script setup lang="ts">
|
import { computed, ref, watch } from 'vue'
|
import { use } from 'echarts/core'
|
import { LineChart } from 'echarts/charts'
|
import { CanvasRenderer } from 'echarts/renderers'
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
|
import VChart from 'vue-echarts'
|
import type { PersistedTestCycle, PersistedTestStep } from '@/api/tests'
|
|
interface ConsoleCell { no: string }
|
type MetricKey = 'finalVoltage1' | 'finalVoltage2' | 'dischargeCapacityF'
|
interface ProjectMetric { key: MetricKey; title: string; unit: string }
|
const props = defineProps<{ cells: ConsoleCell[]; steps: PersistedTestStep[]; cycles: PersistedTestCycle[]; capacityFactor: string }>()
|
use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent])
|
const metrics: ProjectMetric[] = [
|
{ key: 'finalVoltage1', title: '最终电压1', unit: 'V' },
|
{ key: 'finalVoltage2', title: '最终电压2', unit: 'V' },
|
{ key: 'dischargeCapacityF', title: '每循环放电末容量 / F', unit: '' },
|
]
|
const palette = ['#3978f6', '#7d42d8', '#f08a3e', '#23a983', '#e15268', '#1b9ac8', '#b5892f', '#6957c8', '#4f8d44', '#d264a3', '#46748e', '#a95d37']
|
const seriesColors = ref<string[]>(props.cells.map((_, index) => palette[index % palette.length]))
|
const chartUpdateOptions = { notMerge: true, lazyUpdate: false }
|
watch(() => props.cells, cells => { seriesColors.value = cells.map((_, index) => seriesColors.value[index] || palette[index % palette.length]) }, { deep: true })
|
const cycleLabels = computed(() => [...new Set([...props.steps, ...props.cycles].map(row => Number(row.cycleNo)).filter(value => Number.isFinite(value) && value > 0))].sort((a, b) => a - b).map(String))
|
const capacityFactor = computed(() => { const value = Number(props.capacityFactor); return Number.isFinite(value) && value !== 0 ? value : null })
|
const capacityFactorUnavailable = computed(() => capacityFactor.value === null)
|
const chartStateKey = computed(() => `${props.cells.map(cell => cell.no).join('|')}:${cycleLabels.value.join('|')}:${props.steps.length}:${props.cycles.length}:${props.capacityFactor}`)
|
function numericValue(value: unknown): number | null {
|
if (value === null || value === undefined || (typeof value === 'string' && !value.trim())) return null
|
const number = Number(value)
|
return Number.isFinite(number) ? number : null
|
}
|
// 只读取当前有效工步；缺少该循环或最后工步终止电压时保留空点，不补值。
|
function lastStepVoltage(batteryNo: string, cycleNo: number): number | null {
|
const rows = props.steps.filter(row => String(row.batteryNo) === batteryNo && Number(row.cycleNo) === cycleNo).sort((a, b) => Number(a.stepNo) - Number(b.stepNo))
|
return rows.length ? numericValue(rows[rows.length - 1].endVoltage) : null
|
}
|
// F 是当前电池组的非零数值除数，缺失循环或无效 F 均不生成曲线点。
|
function dischargeCapacityPerFactor(batteryNo: string, cycleNo: number): number | null {
|
if (capacityFactor.value === null) return null
|
const row = props.cycles.find(item => String(item.batteryNo) === batteryNo && Number(item.cycleNo) === cycleNo)
|
const capacity = row ? numericValue(row.dischargeCapacity) : null
|
return capacity === null ? null : capacity / capacityFactor.value
|
}
|
function seriesValues(cell: ConsoleCell, metric: ProjectMetric): Array<number | null> {
|
return cycleLabels.value.map(label => metric.key === 'finalVoltage1' ? lastStepVoltage(cell.no, Number(label)) : dischargeCapacityPerFactor(cell.no, Number(label)))
|
}
|
function chartOption(metric: ProjectMetric) {
|
const hasDataSeries = metric.key !== 'finalVoltage2'
|
const seriesData = hasDataSeries ? props.cells.map(cell => seriesValues(cell, metric)) : []
|
const values = seriesData.flat().filter((value): value is number => value !== null)
|
const dataMin = values.length ? Math.min(...values) : undefined
|
const dataMax = values.length ? Math.max(...values) : undefined
|
const margin = dataMin === undefined || dataMax === undefined ? undefined : Math.max((dataMax - dataMin) * 0.15, 0.01)
|
return { animation: false, color: seriesColors.value, grid: { top: 62, right: 34, bottom: 48, left: 62 }, tooltip: { trigger: 'axis' }, legend: { top: 8, left: 12, right: 12, type: 'scroll', icon: 'roundRect', itemWidth: 14, itemHeight: 8, itemGap: 16, textStyle: { fontSize: 10, color: '#52606d' } }, xAxis: { type: 'category', boundaryGap: false, name: '循环次数', nameLocation: 'middle', nameGap: 30, data: cycleLabels.value, axisLine: { lineStyle: { color: '#cbd8e4' } }, axisLabel: { color: '#8795a3', fontSize: 10 }, nameTextStyle: { color: '#52606d', fontSize: 10 } }, yAxis: { type: 'value', name: metric.unit, nameLocation: 'middle', nameGap: metric.unit ? 42 : 0, min: margin === undefined ? undefined : dataMin! - margin, max: margin === undefined ? undefined : dataMax! + margin, axisLabel: { color: '#8795a3', fontSize: 10 }, splitLine: { lineStyle: { color: '#e8eef4' } } }, series: hasDataSeries ? props.cells.map((cell, index) => ({ name: cell.no, type: 'line', showSymbol: false, connectNulls: false, lineStyle: { width: 2 }, data: seriesData[index] })) : [] }
|
}
|
</script>
|
<template>
|
<section class="project-chart-panel">
|
<p v-if="capacityFactorUnavailable" class="factor-warning" role="status">电池组 F 不可用，未计算每循环放电末容量 / F。</p>
|
<article v-for="metric in metrics" :key="metric.key" class="project-chart-card"><header><strong>{{ metric.title }}</strong></header><VChart :key="`${metric.key}-${chartStateKey}`" class="project-chart" :option="chartOption(metric)" :update-options="chartUpdateOptions" autoresize /></article>
|
</section>
|
</template>
|
<style scoped>
|
.project-chart-panel{display:grid;gap:16px;min-width:0}.project-chart-card{min-width:0;border:1px solid #d8e1e9;background:#fff}.project-chart-card>header{height:44px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #edf1f5}.project-chart-card>header strong{color:#26333f;font-size:13px}.project-chart{width:100%;height:270px}.factor-warning{margin:0;padding:10px 14px;border:1px solid #efd59e;color:#8b5a14;background:#fff8e9;font-size:12px}@media(max-width:680px){.project-chart{height:250px}.project-chart-card>header{padding:0 12px}}
|
</style>
|
