统一报表图表并接通首页与负责人待办

yeg

2026-09-09 528d52f2c7c6f911c54cae6e3f25500eab4384fe

 src/components/ConsoleProjectChartPanel.vue

@@ -1,31 +1,18 @@
<script setup lang="ts">
import ProjectCycleCharts from './ProjectCycleCharts.vue'
import type { ProjectSeries } from '@/utils/projectCycleChart'
import { toTestDisplayValue } from '@/utils/testDataUnits'
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: 'mAh / F' },
]
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)
@@ -43,25 +30,9 @@
  const capacity = row ? numericValue(row.dischargeCapacity) : null
  return capacity === null ? null : toTestDisplayValue('dischargeCapacity', 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, formatter: (value: number) => String(Number(value.toFixed(metric.key === 'dischargeCapacityF' ? 2 : 4))) }, 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] })) : [] }
}
const hidden = ref<string[]>([])
const projectSeries = computed<ProjectSeries[]>(() => props.cells.map(cell => ({ key: cell.no, name: cell.no, points: cycleLabels.value.map(label => ({ position: Number(label), values: { finalVoltage1: lastStepVoltage(cell.no, Number(label)), dischargeCapacityF: dischargeCapacityPerFactor(cell.no, Number(label)) } })) })))
</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>
  <ProjectCycleCharts :series="projectSeries" :positions="cycleLabels.map(Number)" :colors="seriesColors" :hidden="hidden" :factor-warning="capacityFactorUnavailable" @hidden-change="hidden = $event" />
</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>