| | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import { computed, ref, watch } from 'vue' |
|---|
| | | import { computed, reactive, ref, watch } from 'vue' |
|---|
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
|---|
| | | import { useRoute, useRouter } from 'vue-router' |
|---|
| | | import { use } from 'echarts/core' |
|---|
| | |
|---|
| | | import { CanvasRenderer } from 'echarts/renderers' |
|---|
| | | import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components' |
|---|
| | | import VChart from 'vue-echarts' |
|---|
| | | import { getUserInfo } from '@/api/auth' |
|---|
| | | import { getFormationSources, previewFormationReport, formationValueKey, type FormationCandidate, type FormationItem, type FormationField } from '@/api/formationReports' |
|---|
| | | import { defaultFormationFields, formationFieldLabel, formationSourceValue, formationChargeChoice } from '@/utils/formationReportFields' |
|---|
| | | import { formationChartOption, formationCurveMetrics, formationSeriesKey, formationSeriesName, formationSeriesColor } from '@/utils/formationCycleChart' |
|---|
| | | import type { ReportMetricKey } from '@/utils/reportMeasurementChart' |
|---|
| | | import { openFormationSavedReportPrint } from '@/utils/formationSavedReportPrint' |
|---|
| | | import FormationFieldControls from '@/components/FormationFieldControls.vue' |
|---|
| | | import ReportTestDetail from '@/components/ReportTestDetail.vue' |
|---|
| | | import { reportDetailColumn, snapshotReportDetails } from '@/utils/reportTestDetails' |
|---|
| | | import FormationStepCurves from '@/components/FormationStepCurves.vue' |
|---|
| | | import { formationChargeSteps, formationCycleKey } from '@/utils/formationStepChart' |
|---|
| | | import type { FormationSettings, FormationStepSelection } from '@/api/formationReports' |
|---|
| | | import { createFormationReport, getFormationReport, editFormationReport, refreshFormationSource, listFormationVersions, |
|---|
| | | type SavedFormationReport, type FormationVersion } from '@/api/formationReports' |
|---|
| | | import { getCurrentUser } from '@/utils/auth' |
|---|
| | | import { useFormationReports, type FormationReportCycle } from '@/stores/formationReports' |
|---|
| | | import { useBatteryGroupFields } from '@/stores/batteryGroupFields' |
|---|
| | | import { formationCycleFields as cycleFields, formationFixedReportFields as fixedReportFields, formationMetricDefinitions, openFormationReportPrint, type FormationMetricDefinition } from '@/utils/formationReportPrint' |
|---|
| | | |
|---|
| | | use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent]) |
|---|
| | | const route = useRoute() |
|---|
| | | const router = useRouter() |
|---|
| | | const reportName = ref('') |
|---|
| | | const description = ref('') |
|---|
| | | const loadError = ref('') |
|---|
| | | const previewError = ref('') |
|---|
| | | const loading = ref(false) |
|---|
| | | const previewLoading = ref(false) |
|---|
| | | const canCreate = ref(false) |
|---|
| | | const canEdit = ref(false) |
|---|
| | | const canQuery = ref(false) |
|---|
| | | const canExport = ref(false) |
|---|
| | | const printing = ref(false) |
|---|
| | | const editingId = computed(() => Number(route.params.id) || null) |
|---|
| | | const readonly = computed(() => Boolean(editingId.value) && (route.query.mode !== 'edit' || !canEdit.value || Boolean(route.query.version))) |
|---|
| | | const saved = ref<SavedFormationReport | null>(null) |
|---|
| | | const savedContent = ref('') |
|---|
| | | const saving = ref(false) |
|---|
| | | const changeSummary = ref('') |
|---|
| | | const historyVisible = ref(false) |
|---|
| | | const history = ref<FormationVersion[]>([]) |
|---|
| | | const historyLoading = ref(false) |
|---|
| | | const historyError = ref('') |
|---|
| | | const candidates = ref<FormationCandidate[]>([]) |
|---|
| | | const selectedKeys = ref<string[]>([]) |
|---|
| | | const items = ref<FormationItem[]>([]) |
|---|
| | | const cycleNos = ref<number[]>([]) |
|---|
| | | const fields = ref<FormationField[]>(structuredClone(defaultFormationFields.filter(field => field.scope === 'cycle'))) |
|---|
| | | const values = ref<Record<string, string>>({}) |
|---|
| | | const sourceDetailOverrides = ref<NonNullable<FormationSettings['sourceDetailOverrides']>>({}) |
|---|
| | | const chargeStepSelections = ref<Record<string, number>>({}) |
|---|
| | | const metrics = ref<ReportMetricKey[]>(formationCurveMetrics.map(metric => metric.key)) |
|---|
| | | const seriesColors = ref<Record<string, string>>({}) |
|---|
| | | const activeCycle = ref<number | null>(null) |
|---|
| | | const manualChargeSteps = ref<Record<string, number[]>>({}) |
|---|
| | | const curveStepSelections = ref<Record<string, FormationStepSelection>>({}) |
|---|
| | | const hiddenSeriesKeys = ref<string[]>([]) |
|---|
| | | const actualSteps = computed(() => !saved.value || saved.value.curveMode === 'actual-steps') |
|---|
| | | const stepSettings = computed<FormationSettings>(() => ({ fields: fields.value, values: values.value, sourceDetailOverrides: snapshotReportDetails(reportDetailColumns.value, sourceDetailOverrides.value), chargeStepSelections: chargeStepSelections.value, metrics: metrics.value, seriesColors: seriesColors.value, manualChargeSteps: manualChargeSteps.value, curveStepSelections: curveStepSelections.value, hiddenSeriesKeys: hiddenSeriesKeys.value, activeCycle: activeCycle.value })) |
|---|
| | | function changeStepSettings(settings: Partial<FormationSettings>) { |
|---|
| | | if (settings.curveStepSelections) curveStepSelections.value = settings.curveStepSelections |
|---|
| | | if (settings.hiddenSeriesKeys) hiddenSeriesKeys.value = settings.hiddenSeriesKeys |
|---|
| | | if (settings.seriesColors) seriesColors.value = settings.seriesColors |
|---|
| | | const route = useRoute(); const router = useRouter(); const currentUser = getCurrentUser(); const { records, createReport, updateReport } = useFormationReports() |
|---|
| | | const { fields: managedGroupFields } = useBatteryGroupFields() |
|---|
| | | const editingId = computed(() => { const value = Number(route.params.id); return Number.isFinite(value) && value > 0 ? value : null }) |
|---|
| | | const editingRecord = computed(() => editingId.value ? records.value.find(item => item.id === editingId.value) || null : null) |
|---|
| | | const readonly = computed(() => route.query.mode === 'view') |
|---|
| | | const reportName = ref(''); const testName = ref('SP2电池化成测试'); const batteryGroup = ref('SP2样品组'); const saving = ref(false) |
|---|
| | | const cycles = ref<FormationReportCycle[]>([ |
|---|
| | | { cycle: 1, method: '恒流充电 / 恒流放电', chargeVoltage: '4.20', dischargeCapacity: '98.6%', retention: '100%', result: '合格' }, |
|---|
| | | { cycle: 2, method: '恒流充电 / 恒流放电', chargeVoltage: '4.20', dischargeCapacity: '98.1%', retention: '99.5%', result: '合格' }, |
|---|
| | | { cycle: 3, method: '恒流充电 / 恒流放电', chargeVoltage: '4.20', dischargeCapacity: '97.6%', retention: '99.0%', result: '合格' }, |
|---|
| | | ]) |
|---|
| | | const description = ref('汇总化成阶段的充放电数据、容量保持率和温升情况。') |
|---|
| | | const seriesColors = ref(['#3978f6', '#7d42d8', '#f08a3e']) |
|---|
| | | const formationMetricVisible = reactive<Record<FormationMetricDefinition['key'], boolean>>({ voltage: true, current: true, positiveVoltage: true, negativeVoltage: true, temperature: true }) |
|---|
| | | const visibleFormationMetrics = computed(() => formationMetricDefinitions.filter(metric => formationMetricVisible[metric.key])) |
|---|
| | | const activeCycle = ref(1) |
|---|
| | | const reportColumns = reactive([ |
|---|
| | | { id: 1, name: 'SP2电池化成测试', samples: ['样品1', '样品2', '样品3'] }, |
|---|
| | | { id: 2, name: '高温化成测试', samples: ['样品1', '样品2', '样品3'] }, |
|---|
| | | ]) |
|---|
| | | const batteryFields = ref<string[]>([]) |
|---|
| | | const specialFields = ref<string[]>([]) |
|---|
| | | const reportFieldValues = reactive<Record<string, string>>({}) |
|---|
| | | const templateDialogVisible = ref(false) |
|---|
| | | const templateMode = ref<'battery' | 'special'>('battery') |
|---|
| | | const selectedTemplateKey = ref('cycle') |
|---|
| | | const batteryTemplateStorageKey = 'battery_detection_group_field_templates_v1' |
|---|
| | | const presetBatteryTemplateLabels: Record<string, string[]> = { |
|---|
| | | '标准容量样品': ['额定容量', '电流', '内阻'], |
|---|
| | | '标准循环样品': ['额定容量', '循环温度', '内阻'], |
|---|
| | | '低温性能样品': ['目标温度', '静置时间', '环境备注'], |
|---|
| | | } |
|---|
| | | function unknownSteps(item: FormationItem, cycle: number) { return (item.chargeSteps?.[cycle] ?? []).filter(step => step.direction === 'UNKNOWN') } |
|---|
| | | function terminationRows(cycle: number) { return Math.max(1, ...items.value.map(item => formationChargeSteps(item, cycle, manualChargeSteps.value).length)) } |
|---|
| | | function termination(item: FormationItem, cycle: number, index: number) { |
|---|
| | | if (!item.cycleNos.includes(cycle)) return '无该循环' |
|---|
| | | const step = formationChargeSteps(item, cycle, manualChargeSteps.value)[index] |
|---|
| | | if (!step) return index ? '—' : (item.chargeSteps?.[cycle]?.length ? '未识别充电工步' : '缺工步') |
|---|
| | | return `工步${step.stepNo} · ${step.name || '未命名工步'} · ${step.endVoltage ?? '缺失'}${step.endVoltage == null ? '' : ' V'}` |
|---|
| | | const batteryTemplateSelections = reactive<Record<string, number[]>>((() => { |
|---|
| | | try { |
|---|
| | | const stored = localStorage.getItem(batteryTemplateStorageKey) |
|---|
| | | return stored ? JSON.parse(stored) as Record<string, number[]> : {} |
|---|
| | | } catch { |
|---|
| | | localStorage.removeItem(batteryTemplateStorageKey) |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | })()) |
|---|
| | | const selectedBatteryTemplateName = ref('标准容量样品') |
|---|
| | | const selectedBatteryTemplateFieldIds = ref<number[]>([]) |
|---|
| | | const specialTemplateStorageKey = 'battery_detection_compare_special_templates_v2' |
|---|
| | | const specialTemplateSelections = reactive<Record<string, string[]>>((() => { |
|---|
| | | try { |
|---|
| | | const stored = localStorage.getItem(specialTemplateStorageKey) |
|---|
| | | return stored ? JSON.parse(stored) as Record<string, string[]> : {} |
|---|
| | | } catch { |
|---|
| | | localStorage.removeItem(specialTemplateStorageKey) |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | })()) |
|---|
| | | const fieldTemplates = computed(() => [ |
|---|
| | | { key: 'cycle', name: '循环寿命模板', fields: ['容量保持率', '能量效率', '循环次数', '内阻变化'] }, |
|---|
| | | { key: 'thermal', name: '热特性模板', fields: ['最高温度', '温差', '温升速率'] }, |
|---|
| | | ...Object.entries(specialTemplateSelections).map(([name, fields]) => ({ key: `saved:${name}`, name, fields })), |
|---|
| | | ]) |
|---|
| | | const reportSamples = computed(() => reportColumns.flatMap(column => column.samples)) |
|---|
| | | const enabledGroupFields = computed(() => managedGroupFields.value.filter(field => field.status === '启用')) |
|---|
| | | const batteryTemplateFieldOptions = computed(() => [...managedGroupFields.value].sort((a, b) => b.createdAt.localeCompare(a.createdAt))) |
|---|
| | | const batteryTemplateNames = computed(() => [ |
|---|
| | | '自定义', |
|---|
| | | '标准容量样品', |
|---|
| | | '标准循环样品', |
|---|
| | | '低温性能样品', |
|---|
| | | ...Object.keys(batteryTemplateSelections).filter(name => !['自定义', '标准容量样品', '标准循环样品', '低温性能样品'].includes(name)), |
|---|
| | | ]) |
|---|
| | | const selectedTemplate = computed(() => fieldTemplates.value.find(item => item.key === selectedTemplateKey.value) || fieldTemplates.value[0]) |
|---|
| | | const reportDetailFields = computed(() => [ |
|---|
| | | ...fixedReportFields, |
|---|
| | | ...batteryFields.value.map(field => ({ key: `battery:${field}`, label: field, mode: 'input', unit: '' })), |
|---|
| | | ...specialFields.value.map(field => ({ key: `special:${field}`, label: field, mode: 'input', unit: '' })), |
|---|
| | | ]) |
|---|
| | | watch(testName, value => { reportColumns[0].name = value }) |
|---|
| | | const cycleFieldValues = reactive<Record<string, string>>({}) |
|---|
| | | |
|---|
| | | function cycleValueKey(cycle: number, field: string, sample: string) { return `${cycle}|${field}|${sample}` } |
|---|
| | | function rawValue(cycle: number, fieldIndex: number, sampleIndex: number) { |
|---|
| | | return (3.76 + cycle * 0.03 + fieldIndex * 0.018 + sampleIndex * 0.012).toFixed(3) |
|---|
| | | } |
|---|
| | | const visibleMetrics = computed(() => formationCurveMetrics.filter(metric => metrics.value.includes(metric.key))) |
|---|
| | | const hasCurves = computed(() => items.value.some(item => item.curves?.[activeCycle.value ?? -1]?.records.length)) |
|---|
| | | const cycleFields = computed(() => fields.value.filter(field => field.scope === 'cycle')) |
|---|
| | | const reportColumns = computed(() => [...new Set(items.value.map(item => item.source.selection.testId))].map(id => ({ |
|---|
| | | id, name: items.value.find(item => item.source.selection.testId === id)!.source.name, |
|---|
| | | items: items.value.filter(item => item.source.selection.testId === id), |
|---|
| | | }))) |
|---|
| | | const reportItems = computed(() => reportColumns.value.flatMap(column => column.items)) |
|---|
| | | const reportDetailColumns = computed(() => reportItems.value.map(item => reportDetailColumn(item.source))) |
|---|
| | | const tableStyle = computed(() => ({ minWidth: `${Math.max(720, reportItems.value.length * 160 + 180)}px` })) |
|---|
| | | function selectionKey(candidate: FormationCandidate) { return `${candidate.selection.testId}|${candidate.selection.testBatteryId}` } |
|---|
| | | function inputValue(item: FormationItem, cycle: number, field: FormationField) { |
|---|
| | | return values.value[formationValueKey(item, cycle, field)] ?? formationSourceValue(item, cycle, field) |
|---|
| | | |
|---|
| | | function loadEditingRecord() { |
|---|
| | | const record = editingRecord.value |
|---|
| | | if (!record) return |
|---|
| | | reportName.value = record.name; testName.value = record.testName; batteryGroup.value = record.batteryGroup; cycles.value = record.cycles.map(item => ({ ...item })); description.value = record.description |
|---|
| | | reportColumns[0].name = record.testName |
|---|
| | | reportColumns[1].name = `${record.testName} · 对照` |
|---|
| | | const restoredSamples = record.samples.slice(0, 3) |
|---|
| | | if (restoredSamples.length) reportColumns.forEach(column => { column.samples = [...restoredSamples] }) |
|---|
| | | Object.assign(cycleFieldValues, record.cycleFieldValues || {}) |
|---|
| | | Object.assign(reportFieldValues, record.reportFieldValues || {}) |
|---|
| | | if (record.batteryFields) batteryFields.value = [...record.batteryFields] |
|---|
| | | if (record.specialFields) specialFields.value = [...record.specialFields] |
|---|
| | | if (record.metrics) formationMetricDefinitions.forEach(metric => { formationMetricVisible[metric.key] = record.metrics!.includes(metric.key) }) |
|---|
| | | if (record.seriesColors?.length) seriesColors.value = [...record.seriesColors] |
|---|
| | | } |
|---|
| | | function setValue(item: FormationItem, cycle: number, field: FormationField, value: string) { |
|---|
| | | values.value[formationValueKey(item, cycle, field)] = value |
|---|
| | | loadEditingRecord() |
|---|
| | | function reportValueKey(field: string, sample: string) { return `${field}|${sample}` } |
|---|
| | | function rawReportValue(fieldIndex: number, sampleIndex: number) { return (1.02 + fieldIndex * 0.06 + sampleIndex * 0.03).toFixed(2) } |
|---|
| | | function addReportField() { |
|---|
| | | ElMessageBox.prompt('请输入要添加的字段名称', '添加项', { confirmButtonText: '添加', cancelButtonText: '取消', inputPlaceholder: '例如：环境备注', inputValidator: value => value.trim() ? true : '请输入字段名称' }).then(({ value }) => { |
|---|
| | | const name = value.trim() |
|---|
| | | if (reportDetailFields.value.some(field => field.label === name)) { ElMessage.warning('该字段已经存在'); return } |
|---|
| | | specialFields.value.push(name) |
|---|
| | | ElMessage.success(`已添加字段“${name}”`) |
|---|
| | | }).catch(() => { /* 用户取消 */ }) |
|---|
| | | } |
|---|
| | | function chargeChoices(item: FormationItem, cycle: number) { return item.chargeSteps?.[String(cycle)] || [] } |
|---|
| | | function chargeChoice(item: FormationItem, cycle: number) { |
|---|
| | | return formationChargeChoice(item, cycle, chargeStepSelections.value) |
|---|
| | | function persistBatteryTemplates() { localStorage.setItem(batteryTemplateStorageKey, JSON.stringify(batteryTemplateSelections)) } |
|---|
| | | function resolveBatteryTemplateFieldIds(name: string) { |
|---|
| | | const savedIds = batteryTemplateSelections[name] |
|---|
| | | if (savedIds) return savedIds.filter(id => enabledGroupFields.value.some(field => field.id === id)) |
|---|
| | | const labels = presetBatteryTemplateLabels[name] || [] |
|---|
| | | return enabledGroupFields.value.filter(field => labels.includes(field.name)).map(field => field.id) |
|---|
| | | } |
|---|
| | | function chargeKey(item: FormationItem, cycle: number) { return `${item.source.selection.testId}|${item.source.selection.testBatteryId}|${cycle}` } |
|---|
| | | function updateSeriesColor(item: FormationItem, color: string | null) { if (color) seriesColors.value[formationSeriesKey(item)] = color } |
|---|
| | | function formContent() { return JSON.stringify({ name: reportName.value, description: description.value, settings: actualSteps.value ? stepSettings.value : { fields: fields.value, values: values.value, sourceDetailOverrides: snapshotReportDetails(reportDetailColumns.value, sourceDetailOverrides.value), chargeStepSelections: chargeStepSelections.value, metrics: metrics.value, seriesColors: seriesColors.value } }) } |
|---|
| | | function restore(record: SavedFormationReport) { |
|---|
| | | saved.value = record; reportName.value = record.name; description.value = record.description || '' |
|---|
| | | items.value = record.items; cycleNos.value = record.cycleNos |
|---|
| | | fields.value = record.settings.fields.filter(field => field.scope === 'cycle'); values.value = record.settings.values; chargeStepSelections.value = record.settings.chargeStepSelections || {} |
|---|
| | | sourceDetailOverrides.value = record.settings.sourceDetailOverrides ?? {} |
|---|
| | | metrics.value = record.settings.metrics ?? formationCurveMetrics.map(metric => metric.key) |
|---|
| | | seriesColors.value = record.settings.seriesColors ?? {} |
|---|
| | | manualChargeSteps.value = record.settings.manualChargeSteps ?? {}; curveStepSelections.value = record.settings.curveStepSelections ?? {} |
|---|
| | | hiddenSeriesKeys.value = record.settings.hiddenSeriesKeys ?? []; activeCycle.value = record.settings.activeCycle ?? record.cycleNos[0] ?? null |
|---|
| | | changeSummary.value = ''; savedContent.value = formContent() |
|---|
| | | function loadBatteryTemplate(name: string) { selectedBatteryTemplateFieldIds.value = resolveBatteryTemplateFieldIds(name) } |
|---|
| | | function applyBatteryTemplateFields() { |
|---|
| | | const fixedLabels = fixedReportFields.map(field => field.label) |
|---|
| | | batteryFields.value = selectedBatteryTemplateFieldIds.value |
|---|
| | | .map(id => enabledGroupFields.value.find(field => field.id === id)?.name) |
|---|
| | | .filter((name): name is string => typeof name === 'string') |
|---|
| | | .filter(name => !fixedLabels.includes(name)) |
|---|
| | | specialFields.value = specialFields.value.filter(field => !batteryFields.value.includes(field) && !fixedLabels.includes(field)) |
|---|
| | | } |
|---|
| | | function pruneValues() { |
|---|
| | | const allowed = new Set(items.value.flatMap(item => fields.value.flatMap(field => |
|---|
| | | (field.scope === 'detail' ? [0] : item.cycleNos).map(cycle => formationValueKey(item, cycle, field))))) |
|---|
| | | values.value = Object.fromEntries(Object.entries(values.value).filter(([key]) => allowed.has(key))) |
|---|
| | | const sourceKeys = new Set(items.value.flatMap(item => [formationSeriesKey(item), ...Object.entries(item.chargeSteps ?? {}).flatMap(([cycle, steps]) => steps.map(step => `${formationSeriesKey(item)}|${cycle}|${step.stepNo}`))])) |
|---|
| | | sourceDetailOverrides.value = Object.fromEntries(Object.entries(sourceDetailOverrides.value).filter(([key]) => sourceKeys.has(key))) |
|---|
| | | hiddenSeriesKeys.value = hiddenSeriesKeys.value.filter(key => sourceKeys.has(key)) |
|---|
| | | const cycleKeys = new Set(items.value.flatMap(item => item.cycleNos.map(cycle => formationCycleKey(item, cycle)))) |
|---|
| | | manualChargeSteps.value = Object.fromEntries(Object.entries(manualChargeSteps.value).filter(([key]) => cycleKeys.has(key))) |
|---|
| | | curveStepSelections.value = Object.fromEntries(Object.entries(curveStepSelections.value).filter(([key]) => cycleKeys.has(key))) |
|---|
| | | seriesColors.value = Object.fromEntries(Object.entries(seriesColors.value).filter(([key]) => sourceKeys.has(key))) |
|---|
| | | function switchBatteryTemplate(name: string) { loadBatteryTemplate(name); applyBatteryTemplateFields() } |
|---|
| | | function saveBatteryTemplate() { applyBatteryTemplateFields(); batteryTemplateSelections[selectedBatteryTemplateName.value] = [...selectedBatteryTemplateFieldIds.value]; persistBatteryTemplates(); ElMessage.success(`模板“${selectedBatteryTemplateName.value}”已保存`) } |
|---|
| | | async function saveBatteryTemplateAs() { |
|---|
| | | try { |
|---|
| | | const result = await ElMessageBox.prompt('请输入新模板名称，当前字段勾选会保存为新模板。', '另存电池组字段模板', { confirmButtonText: '保存', cancelButtonText: '取消', inputPlaceholder: '输入模板名称', inputValidator: value => value.trim() ? true : '请输入模板名称' }) |
|---|
| | | const name = result.value.trim() |
|---|
| | | if (batteryTemplateNames.value.includes(name)) { ElMessage.warning('模板名称已存在，请使用其他名称'); return } |
|---|
| | | selectedBatteryTemplateName.value = name |
|---|
| | | applyBatteryTemplateFields() |
|---|
| | | batteryTemplateSelections[name] = [...selectedBatteryTemplateFieldIds.value] |
|---|
| | | persistBatteryTemplates() |
|---|
| | | ElMessage.success(`已另存为“${name}”`) |
|---|
| | | } catch { /* 用户取消 */ } |
|---|
| | | } |
|---|
| | | function applyFields(next: FormationField[]) { |
|---|
| | | // 模板仅改变草稿结构；同名换共享身份时不能继承原字段的人工调整。 |
|---|
| | | const unchanged = new Set(next.filter(field => fields.value.some(previous => previous.key === field.key && previous.scope === field.scope |
|---|
| | | && previous.kind === field.kind && (previous.fieldDefinitionId ?? null) === (field.fieldDefinitionId ?? null))).map(field => `${field.scope}|${field.key}`)) |
|---|
| | | values.value = Object.fromEntries(Object.entries(values.value).filter(([key]) => { |
|---|
| | | const parts = key.split('|') |
|---|
| | | return unchanged.has(`${parts[2] === '0' ? 'detail' : 'cycle'}|${parts[3]}`) |
|---|
| | | })) |
|---|
| | | fields.value = next |
|---|
| | | pruneValues() |
|---|
| | | function openFieldTemplate(mode: 'battery' | 'special') { |
|---|
| | | templateMode.value = mode |
|---|
| | | if (mode === 'battery') { |
|---|
| | | if (!batteryTemplateNames.value.includes(selectedBatteryTemplateName.value)) selectedBatteryTemplateName.value = '自定义' |
|---|
| | | loadBatteryTemplate(selectedBatteryTemplateName.value) |
|---|
| | | } else { |
|---|
| | | selectedTemplateKey.value = 'cycle' |
|---|
| | | } |
|---|
| | | templateDialogVisible.value = true |
|---|
| | | } |
|---|
| | | function applyFieldTemplate() { |
|---|
| | | const fixedLabels = fixedReportFields.map(field => field.label) |
|---|
| | | if (templateMode.value === 'battery') { |
|---|
| | | applyBatteryTemplateFields() |
|---|
| | | } else { |
|---|
| | | specialFields.value = selectedTemplate.value.fields.filter(field => !fixedLabels.includes(field) && !batteryFields.value.includes(field)) |
|---|
| | | } |
|---|
| | | templateDialogVisible.value = false |
|---|
| | | ElMessage.success(`${templateMode.value === 'battery' ? '电池组字段' : '特殊字段'}模板已应用`) |
|---|
| | | } |
|---|
| | | async function saveSpecialTemplate() { |
|---|
| | | if (!specialFields.value.length) { ElMessage.warning('请先添加或选择特殊字段'); return } |
|---|
| | | try { |
|---|
| | | const result = await ElMessageBox.prompt('请输入特殊字段模板名称，当前特殊字段会保存为新模板。', '另存特殊字段模板', { confirmButtonText: '保存', cancelButtonText: '取消', inputPlaceholder: '输入模板名称', inputValidator: value => value.trim() ? true : '请输入模板名称' }) |
|---|
| | | const name = result.value.trim() |
|---|
| | | if (fieldTemplates.value.some(item => item.name === name)) { ElMessage.warning('特殊字段模板名称已存在，请使用其他名称'); return } |
|---|
| | | specialTemplateSelections[name] = [...specialFields.value] |
|---|
| | | localStorage.setItem(specialTemplateStorageKey, JSON.stringify(specialTemplateSelections)) |
|---|
| | | selectedTemplateKey.value = `saved:${name}` |
|---|
| | | ElMessage.success(`已另存为“${name}”`) |
|---|
| | | } catch { /* 用户取消 */ } |
|---|
| | | } |
|---|
| | | function updateSeriesColor(index: number, color: string | null) { if (color) seriesColors.value[index] = color } |
|---|
| | | function chartOption(metric: FormationMetricDefinition) { |
|---|
| | | const names = reportSamples.value.slice(0, 3) |
|---|
| | | const cycleOffset = Math.max(0, activeCycle.value - 1) * 0.012 |
|---|
| | | const visibleSeries = metric.values.slice(0, Math.max(1, names.length)).map(series => series.map(value => Number((value + cycleOffset).toFixed(3)))) |
|---|
| | | const visibleValues = visibleSeries.flat() |
|---|
| | | const dataMax = Math.max(0, ...visibleValues) |
|---|
| | | const axisMax = metric.unit === '℃' ? Math.ceil(dataMax / 10) * 10 : Math.ceil(dataMax * 10) / 10 |
|---|
| | | const maxDataLength = Math.max(1, ...visibleSeries.map(series => series.length)) |
|---|
| | | const timeLabels = Array.from({ length: maxDataLength }, (_, index) => `${Math.floor(index / 2)}:${index % 2 ? '30' : '00'}`) |
|---|
| | | const createYAxis = (position: 'left' | 'right') => ({ type: 'value', name: metric.unit, position, min: 0, max: axisMax, nameTextStyle: { color: '#8795a3', fontSize: 10 }, axisLine: { show: true, lineStyle: { color: '#cbd8e4' } }, axisTick: { show: true, lineStyle: { color: '#cbd8e4' } }, splitLine: { show: position === 'left', lineStyle: { color: '#e8eef4' } }, axisLabel: { color: '#8795a3', fontSize: 10 } }) |
|---|
| | | return { animation: false, color: seriesColors.value, grid: { top: 40, right: 46, bottom: 42, left: 46 }, tooltip: { trigger: 'axis' }, legend: { top: 4, right: 6, icon: 'roundRect', itemWidth: 14, itemHeight: 8, textStyle: { fontSize: 11, color: '#52606d' } }, xAxis: { type: 'category', boundaryGap: false, name: '时间/h:mm', nameLocation: 'middle', nameGap: 28, data: timeLabels, axisLine: { lineStyle: { color: '#cbd8e4' } }, axisLabel: { color: '#8795a3', fontSize: 10, interval: 'auto' }, nameTextStyle: { color: '#26333f', fontSize: 11, fontWeight: 600 } }, yAxis: [createYAxis('left'), createYAxis('right')], series: names.map((name, index) => ({ name, type: 'line', smooth: true, showSymbol: false, lineStyle: { width: 2 }, data: visibleSeries[index] || visibleSeries[0] })) } |
|---|
| | | } |
|---|
| | | function exportPdf() { |
|---|
| | | if (!reportName.value.trim()) { |
|---|
| | | ElMessage.warning('请先输入报表名称') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | const opened = openFormationReportPrint({ |
|---|
| | | name: reportName.value.trim(), |
|---|
| | | reportId: editingRecord.value?.id, |
|---|
| | | creator: editingRecord.value?.creator || currentUser?.displayName || 'Admin', |
|---|
| | | createdAt: editingRecord.value?.createdAt, |
|---|
| | | testName: testName.value, |
|---|
| | | batteryGroup: batteryGroup.value, |
|---|
| | | samples: [...new Set(reportSamples.value)], |
|---|
| | | cycles: cycles.value.map(item => ({ ...item })), |
|---|
| | | cycleFieldValues: { ...cycleFieldValues }, |
|---|
| | | reportFieldValues: { ...reportFieldValues }, |
|---|
| | | batteryFields: [...batteryFields.value], |
|---|
| | | specialFields: [...specialFields.value], |
|---|
| | | metrics: visibleFormationMetrics.value.map(item => item.key), |
|---|
| | | seriesColors: [...seriesColors.value], |
|---|
| | | description: description.value.trim(), |
|---|
| | | }) |
|---|
| | | if (!opened) { |
|---|
| | | ElMessage.warning('浏览器阻止了报表窗口，请允许弹出窗口后重试') |
|---|
| | | return |
|---|
| | | } |
|---|
| | | ElMessage.info('已打开打印版报表，请在打印窗口选择“另存为 PDF”') |
|---|
| | | } |
|---|
| | | |
|---|
| | | async function saveReport() { |
|---|
| | | if (!reportName.value.trim()) { ElMessage.warning('请输入报表名称'); return } |
|---|
| | | if (!items.value.length || previewLoading.value || previewError.value) { ElMessage.warning('请先选择有效化成来源'); return } |
|---|
| | | if (editingId.value && !changeSummary.value.trim()) { ElMessage.warning('请输入修改说明'); return } |
|---|
| | | if (!testName.value || !batteryGroup.value) { ElMessage.warning('请选择测试和电池组'); return } |
|---|
| | | saving.value = true |
|---|
| | | try { |
|---|
| | | pruneValues() |
|---|
| | | const content = { name: reportName.value.trim(), description: description.value, settings: actualSteps.value ? stepSettings.value : { fields: fields.value, values: values.value, sourceDetailOverrides: snapshotReportDetails(reportDetailColumns.value, sourceDetailOverrides.value), chargeStepSelections: chargeStepSelections.value, metrics: metrics.value, seriesColors: seriesColors.value } } |
|---|
| | | const result = editingId.value && saved.value |
|---|
| | | ? await editFormationReport(editingId.value, { ...content, baseVersionNo: saved.value.versionNo, changeSummary: changeSummary.value.trim() }) |
|---|
| | | : await createFormationReport({ ...content, selections: items.value.map(item => item.source.selection) }) |
|---|
| | | restore(result) |
|---|
| | | ElMessage.success('化成报表已保存') |
|---|
| | | if (canQuery.value) await router.replace({ path: `/report-formation/${result.id}/edit`, query: { mode: 'view' } }) |
|---|
| | | else if (canEdit.value) await router.replace({ path: `/report-formation/${result.id}/edit`, query: { mode: 'edit' } }) |
|---|
| | | else { selectedKeys.value = []; values.value = {}; reportName.value = ''; description.value = ''; saved.value = null } |
|---|
| | | } catch (error) { ElMessage.error(error instanceof Error ? error.message : '化成报表保存失败') } |
|---|
| | | finally { saving.value = false } |
|---|
| | | await new Promise(resolve => window.setTimeout(resolve, 220)) |
|---|
| | | const payload = { |
|---|
| | | name: reportName.value.trim(), |
|---|
| | | creator: currentUser?.displayName || 'Admin', |
|---|
| | | testName: testName.value, |
|---|
| | | batteryGroup: batteryGroup.value, |
|---|
| | | samples: [...new Set(reportSamples.value)], |
|---|
| | | cycles: cycles.value.map(item => ({ ...item })), |
|---|
| | | cycleFieldValues: { ...cycleFieldValues }, |
|---|
| | | reportFieldValues: { ...reportFieldValues }, |
|---|
| | | batteryFields: [...batteryFields.value], |
|---|
| | | specialFields: [...specialFields.value], |
|---|
| | | metrics: visibleFormationMetrics.value.map(item => item.key), |
|---|
| | | seriesColors: [...seriesColors.value], |
|---|
| | | description: description.value.trim(), |
|---|
| | | } |
|---|
| | | editingId.value ? updateReport(editingId.value, payload) : createReport(payload) |
|---|
| | | saving.value = false |
|---|
| | | ElMessage.success(editingId.value ? '化成报表已更新' : '化成报表已保存') |
|---|
| | | await router.push('/report-formation') |
|---|
| | | } |
|---|
| | | async function refreshSource() { |
|---|
| | | if (!saved.value || !editingId.value) return |
|---|
| | | if (formContent() !== savedContent.value) { ElMessage.warning('请先保存当前修改'); return } |
|---|
| | | try { |
|---|
| | | const { value } = await ElMessageBox.prompt('按最新来源生成新版本，保留仍属于当前循环的人工调整；已消失循环的人工值仅保留在历史版。', '按最新来源生成新版本', { |
|---|
| | | inputPlaceholder: '请输入修改说明', inputValidator: value => Boolean(value?.trim()) || '请输入修改说明', confirmButtonText: '生成', cancelButtonText: '取消', |
|---|
| | | }) |
|---|
| | | saving.value = true |
|---|
| | | const result = await refreshFormationSource(editingId.value, saved.value.versionNo, value.trim()) |
|---|
| | | restore(result); ElMessage.success('已按最新来源生成新版本') |
|---|
| | | } catch (error) { if (error !== 'cancel' && error !== 'close') ElMessage.error(error instanceof Error ? error.message : '更新来源失败') } |
|---|
| | | finally { saving.value = false } |
|---|
| | | } |
|---|
| | | async function openHistory() { |
|---|
| | | if (!editingId.value) return |
|---|
| | | historyVisible.value = true; historyLoading.value = true; historyError.value = '' |
|---|
| | | try { history.value = await listFormationVersions(editingId.value) } |
|---|
| | | catch (error) { historyError.value = error instanceof Error ? error.message : '历史版本加载失败' } |
|---|
| | | finally { historyLoading.value = false } |
|---|
| | | } |
|---|
| | | async function openVersion(versionNo: number) { |
|---|
| | | historyVisible.value = false |
|---|
| | | await router.push({ path: `/report-formation/${editingId.value}/edit`, query: { mode: 'view', version: versionNo } }) |
|---|
| | | } |
|---|
| | | async function printReport(versionNo = saved.value?.versionNo) { |
|---|
| | | if (printing.value || saving.value || loading.value || loadError.value || !canExport.value) return |
|---|
| | | if (!saved.value || versionNo === undefined) { ElMessage.warning('请先保存报表后再打印'); return } |
|---|
| | | if (!readonly.value && (formContent() !== savedContent.value || changeSummary.value.trim())) { ElMessage.warning('有未保存修改，请先保存新版本后再打印'); return } |
|---|
| | | printing.value = true |
|---|
| | | try { await openFormationSavedReportPrint(saved.value.id, versionNo) } |
|---|
| | | catch (error) { ElMessage.error(error instanceof Error ? error.message : '打印失败，请重试') } |
|---|
| | | finally { printing.value = false } |
|---|
| | | } |
|---|
| | | // 快速切换来源时只接受最后一次预览，避免旧响应把矩阵归入错误的选择。 |
|---|
| | | let previewSequence = 0 |
|---|
| | | async function preview() { |
|---|
| | | const sequence = ++previewSequence |
|---|
| | | previewError.value = '' |
|---|
| | | if (!selectedKeys.value.length) { items.value = []; cycleNos.value = []; previewLoading.value = false; return } |
|---|
| | | previewLoading.value = true |
|---|
| | | try { |
|---|
| | | const selections = candidates.value.filter(candidate => selectedKeys.value.includes(selectionKey(candidate))).map(candidate => candidate.selection) |
|---|
| | | const result = await previewFormationReport(selections) |
|---|
| | | if (sequence !== previewSequence) return |
|---|
| | | items.value = result.items |
|---|
| | | cycleNos.value = result.cycleNos |
|---|
| | | fields.value = fields.value.map(field => field.kind === 'battery' && field.fieldDefinitionId == null |
|---|
| | | ? { ...field, fieldDefinitionId: items.value.flatMap(item => item.businessFields).find(value => value.fieldName === field.key)?.fieldDefinitionId ?? null } : field) |
|---|
| | | pruneValues() |
|---|
| | | } catch (error) { |
|---|
| | | if (sequence !== previewSequence) return |
|---|
| | | items.value = []; cycleNos.value = [] |
|---|
| | | previewError.value = error instanceof Error ? error.message : '化成数据加载失败' |
|---|
| | | } finally { if (sequence === previewSequence) previewLoading.value = false } |
|---|
| | | } |
|---|
| | | async function load() { |
|---|
| | | loading.value = true; loadError.value = '' |
|---|
| | | previewSequence++; previewLoading.value = false; previewError.value = '' |
|---|
| | | saved.value = null; items.value = []; cycleNos.value = []; values.value = {}; chargeStepSelections.value = {}; selectedKeys.value = [] |
|---|
| | | sourceDetailOverrides.value = {} |
|---|
| | | try { |
|---|
| | | const permissions = (await getUserInfo()).permissions || [] |
|---|
| | | const has = (action: string) => permissions.includes('*:*:*') || permissions.includes(`system:formation-report:${action}`) |
|---|
| | | canCreate.value = has('add'); canEdit.value = has('edit'); canQuery.value = has('query'); canExport.value = has('export') |
|---|
| | | if (!editingId.value) { |
|---|
| | | if (!canCreate.value) throw new Error('无新增化成报表权限') |
|---|
| | | reportName.value = ''; description.value = ''; fields.value = structuredClone(defaultFormationFields.filter(field => field.scope === 'cycle')); chargeStepSelections.value = {} |
|---|
| | | metrics.value = formationCurveMetrics.map(metric => metric.key); seriesColors.value = {} |
|---|
| | | manualChargeSteps.value = {}; curveStepSelections.value = {}; hiddenSeriesKeys.value = []; activeCycle.value = null |
|---|
| | | candidates.value = await getFormationSources() |
|---|
| | | } else { |
|---|
| | | const editing = route.query.mode === 'edit' && !route.query.version |
|---|
| | | if (editing ? !canEdit.value : !canQuery.value) throw new Error(editing ? '无编辑化成报表权限' : '无查看化成报表权限') |
|---|
| | | restore(await getFormationReport(editingId.value, route.query.version ? Number(route.query.version) : undefined, editing)) |
|---|
| | | } |
|---|
| | | } catch (error) { loadError.value = error instanceof Error ? error.message : '化成报表加载失败'; ElMessage.error(loadError.value) } |
|---|
| | | finally { loading.value = false } |
|---|
| | | } |
|---|
| | | watch(selectedKeys, () => { if (!editingId.value) void preview() }) |
|---|
| | | watch(cycleNos, cycles => { if (activeCycle.value === null || !cycles.includes(activeCycle.value)) activeCycle.value = cycles[0] ?? null }) |
|---|
| | | watch(() => route.fullPath, () => { void load() }, { immediate: true }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div class="formation-form-page" :class="{ 'is-readonly': readonly }" v-loading="loading"> |
|---|
| | | <div class="page-tools"><button class="back-button" type="button" @click="router.push('/report-formation')"><el-icon><ArrowLeft /></el-icon>返回化成报表</button><span>{{ readonly ? '查看化成报表' : editingId ? '编辑化成报表' : '新建化成报表' }}</span></div> |
|---|
| | | <el-alert v-if="loadError" :title="loadError" type="error" :closable="false" /> |
|---|
| | | <template v-else> |
|---|
| | | <section class="report-name-panel"><label><span>报表名称</span><el-input v-model="reportName" :disabled="readonly" maxlength="100" clearable placeholder="请输入报表名称" /></label></section> |
|---|
| | | <div v-if="saved" class="version-bar"><span>版本 {{ saved.versionNo }} · {{ saved.operatorName }} · {{ new Date(saved.versionCreatedAt).toLocaleString() }}</span><span>{{ saved.changeSummary }}</span><button v-if="canQuery" class="secondary-button" @click="openHistory">历史版本</button><button v-if="readonly && canEdit" class="secondary-button" @click="router.push({ path: `/report-formation/${editingId}/edit`, query: { mode: 'edit' } })">编辑</button><button v-if="!readonly" class="secondary-button" :disabled="saving" @click="refreshSource">按最新来源生成新版本</button></div> |
|---|
| | | <section v-if="!editingId" class="source-panel"> |
|---|
| | | <label><span>化成测试 / 电池号</span><el-select v-model="selectedKeys" multiple filterable collapse-tags collapse-tags-tooltip placeholder="选择化成测试及电池号" :disabled="loading" aria-label="化成来源"> |
|---|
| | | <el-option v-for="candidate in candidates" :key="selectionKey(candidate)" :value="selectionKey(candidate)" :label="`${candidate.name} / ${candidate.batteryGroup} / ${candidate.batteryNo}`" /> |
|---|
| | | </el-select></label> |
|---|
| | | <el-empty v-if="!loading && !candidates.length" description="暂无检测完成的化成测试" :image-size="60" /> |
|---|
| | | </section> |
|---|
| | | <el-alert v-if="previewError" :title="previewError" type="error" :closable="false" /> |
|---|
| | | <div v-loading="previewLoading"> |
|---|
| | | <ReportTestDetail v-model="sourceDetailOverrides" :columns="reportDetailColumns" :readonly="readonly" :disabled="saving || previewLoading || !!previewError" /> |
|---|
| | | <section v-if="!readonly" class="report-data-panel"><header class="panel-heading"><strong>循环指标设置</strong></header><FormationFieldControls :fields="fields" :items="items" :can-create="canCreate" :can-edit="canEdit" @apply="applyFields" /></section> |
|---|
| | | <section class="cycle-panel"><div class="cycle-list"> |
|---|
| | | <article v-for="cycle in cycleNos" :key="cycle" class="cycle-card" :data-cycle="cycle"> |
|---|
| | | <h3>循环{{ cycle }}</h3> |
|---|
| | | <div class="cycle-table-wrap"><table class="cycle-table cycle-data-table" :style="tableStyle"> |
|---|
| | | <thead><tr><th>测试</th><th v-for="column in reportColumns" :key="column.id" :colspan="column.items.length">{{ column.name }}</th></tr> |
|---|
| | | <tr><th>指标</th><th v-for="item in reportItems" :key="selectionKey(item.source)">{{ item.source.batteryGroup }} / {{ item.source.batteryNo }}</th></tr></thead> |
|---|
| | | <tbody><template v-if="!actualSteps"><tr><td>充电工步号</td><td v-for="item in reportItems" :key="selectionKey(item.source)"><template v-if="item.cycleNos.includes(cycle)"><el-select v-if="chargeChoices(item, cycle).length && !chargeChoice(item, cycle)" :model-value="chargeStepSelections[chargeKey(item, cycle)]" :disabled="readonly" placeholder="选择工步" size="small" @update:model-value="chargeStepSelections[chargeKey(item, cycle)] = $event"><el-option v-for="step in chargeChoices(item, cycle)" :key="step.stepNo" :label="`${step.stepNo} ${step.name || ''}`" :value="step.stepNo" /></el-select><span v-else>{{ chargeChoice(item, cycle)?.stepNo ?? '未识别' }}</span></template><span v-else class="missing-cycle">无该循环</span></td></tr> |
|---|
| | | <tr><td>充电工步名称</td><td v-for="item in reportItems" :key="selectionKey(item.source)"><span v-if="!item.cycleNos.includes(cycle)" class="missing-cycle">无该循环</span><span v-else>{{ chargeChoice(item, cycle)?.name || '未选择' }}</span></td></tr> |
|---|
| | | <tr><td>终止电压 (V)</td><td v-for="item in reportItems" :key="selectionKey(item.source)"><span v-if="!item.cycleNos.includes(cycle)" class="missing-cycle">无该循环</span><span v-else>{{ chargeChoice(item, cycle)?.endVoltage ?? '缺失' }}</span></td></tr> |
|---|
| | | </template><template v-else> |
|---|
| | | <tr v-for="index in terminationRows(cycle)" :key="`termination-${index}`" class="charge-termination-row"><td>充电工步{{ index }} / 终止电压 (V)</td><td v-for="item in reportItems" :key="selectionKey(item.source)">{{ termination(item, cycle, index - 1) }}</td></tr> |
|---|
| | | <tr v-if="!readonly && reportItems.some(item => unknownSteps(item, cycle).length)"><td>人工指定未知充电工步</td><td v-for="item in reportItems" :key="selectionKey(item.source)"><el-select v-if="unknownSteps(item, cycle).length" v-model="manualChargeSteps[formationCycleKey(item, cycle)]" multiple :aria-label="`未知充电工步 ${item.source.name} ${item.source.batteryNo} 循环${cycle}`" placeholder="可选择多个实际工步"><el-option v-for="step in unknownSteps(item, cycle)" :key="step.stepNo" :value="step.stepNo" :label="`${step.stepNo} ${step.name || '未命名工步'}`" /></el-select><span v-else>—</span></td></tr> |
|---|
| | | </template> |
|---|
| | | <tr v-for="field in cycleFields" :key="field.key"><td>{{ formationFieldLabel(field) }}</td><td v-for="item in reportItems" :key="selectionKey(item.source)"> |
|---|
| | | <span v-if="!item.cycleNos.includes(cycle)" class="missing-cycle">无该循环</span> |
|---|
| | | <el-input v-else :model-value="inputValue(item, cycle, field)" @update:model-value="setValue(item, cycle, field, $event)" :disabled="readonly" :aria-label="`${item.source.name} ${item.source.batteryNo} 循环${cycle} ${field.displayName}`" :placeholder="field.kind === 'manual' ? '人工填写' : '指标缺失'" size="small" /> |
|---|
| | | </td></tr></tbody> |
|---|
| | | </table></div> |
|---|
| | | </article> |
|---|
| | | <el-empty v-if="reportItems.length && !cycleNos.length && !previewLoading" description="所选电池暂无循环记录" :image-size="60" /> |
|---|
| | | </div></section> |
|---|
| | | <section class="metrics-panel"> |
|---|
| | | <header class="panel-heading"><div><strong>循环曲线</strong></div><label><el-select v-model="activeCycle" class="curve-cycle-select" aria-label="曲线循环" :disabled="!cycleNos.length"><el-option v-for="cycle in cycleNos" :key="cycle" :label="`循环${cycle}`" :value="cycle" /></el-select></label></header> |
|---|
| | | <el-checkbox-group v-if="!readonly" v-model="metrics" class="metric-switches"><el-checkbox v-for="metric in formationCurveMetrics" :key="metric.key" :value="metric.key">{{ metric.title }}</el-checkbox></el-checkbox-group> |
|---|
| | | <FormationStepCurves v-if="actualSteps" :items="items" :cycle="activeCycle" :settings="stepSettings" :readonly="readonly" @change="changeStepSettings" /> |
|---|
| | | <template v-else><div class="chart-legend-bar"><div v-for="(item, index) in items" :key="formationSeriesKey(item)" class="chart-legend-item"> |
|---|
| | | <el-color-picker v-if="!readonly" :model-value="formationSeriesColor(item, index, seriesColors)" :aria-label="`${formationSeriesName(item)}颜色`" @change="updateSeriesColor(item, $event)" /> |
|---|
| | | <i v-else class="series-swatch" :style="{ background: formationSeriesColor(item, index, seriesColors) }" /><span>{{ formationSeriesName(item) }}</span> |
|---|
| | | </div></div> |
|---|
| | | <div v-if="hasCurves && activeCycle !== null" class="charts-grid"><article v-for="metric in visibleMetrics" :key="metric.key" class="chart-card"><header><strong>{{ metric.title }} ({{ metric.unit }})</strong></header><VChart class="metric-chart" :option="formationChartOption(metric, items, activeCycle, seriesColors)" :update-options="{ notMerge: true }" autoresize /></article></div> |
|---|
| | | <el-empty v-if="!hasCurves" :description="saved && !items.some(item => item.curves) ? '该版本未保存曲线数据' : '该循环暂无已保存实时数据'" :image-size="60" /> |
|---|
| | | <el-empty v-else-if="!visibleMetrics.length" description="当前未启用曲线指标" :image-size="60" /></template> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | <section class="note-panel"><label><span>报表说明</span><el-input v-model="description" :disabled="readonly" type="textarea" :rows="3" maxlength="2000" show-word-limit /></label></section> |
|---|
| | | <section v-if="editingId && !readonly" class="note-panel"><label><span>修改说明</span><el-input v-model="changeSummary" maxlength="500" placeholder="请输入修改说明" /></label></section> |
|---|
| | | <footer class="form-actions"><button v-if="canExport" class="secondary-button" type="button" :disabled="printing || saving || loading || previewLoading" @click="printReport()"><el-icon><Printer /></el-icon>{{ printing ? '正在打开打印' : '打印 / 另存 PDF' }}</button><button class="secondary-button" type="button" @click="router.push('/report-formation')">返回列表</button><button v-if="!readonly && (editingId ? canEdit : canCreate)" class="primary-button" type="button" :disabled="saving || loading || previewLoading || !items.length" @click="saveReport"><el-icon><Check /></el-icon>{{ saving ? '保存中' : editingId ? '保存新版本' : '保存报表' }}</button></footer> |
|---|
| | | </template> |
|---|
| | | <el-dialog v-model="historyVisible" title="化成报表历史版本" width="min(760px, calc(100vw - 28px))"><el-alert v-if="historyError" :title="historyError" type="error" :closable="false" /><el-table v-loading="historyLoading" :data="history"><el-table-column prop="versionNo" label="版本" width="70" /><el-table-column prop="operatorName" label="操作人" width="110" /><el-table-column label="时间" width="180"><template #default="{ row }">{{ new Date(row.createdAt).toLocaleString() }}</template></el-table-column><el-table-column prop="changeSummary" label="修改说明" /><el-table-column label="操作" width="70"><template #default="{ row }"><el-button link type="primary" @click="openVersion(row.versionNo)">查看</el-button></template></el-table-column></el-table></el-dialog> |
|---|
| | | <div class="formation-form-page" :class="{ 'is-readonly': readonly }"><div class="page-tools"><button class="back-button" type="button" @click="router.push('/report-formation')"><el-icon><ArrowLeft /></el-icon>返回化成报表</button><span>{{ readonly ? 'VIEW FORMATION REPORT' : editingId ? 'EDIT FORMATION REPORT' : 'NEW FORMATION REPORT' }}</span></div> |
|---|
| | | <section class="report-name-panel"><label><span>报表名称</span><el-input v-model="reportName" clearable placeholder="请输入报表名称" /></label></section> |
|---|
| | | <section class="report-data-panel"><header class="panel-heading"><div><strong>报表数据</strong><span>测试详情字段</span></div></header><div class="report-data-table-wrap"><table class="report-data-table" :style="{ minWidth: `${Math.max(980, reportSamples.length * 150 + 160)}px` }"><thead><tr><th>电池组</th><th v-for="column in reportColumns" :key="column.id" :colspan="column.samples.length"><span class="group-index">{{ column.id }}</span>{{ column.name }}</th></tr><tr><th>电池号</th><template v-for="column in reportColumns" :key="`samples-${column.id}`"><th v-for="(sample, sampleIndex) in column.samples" :key="`${column.id}-${sampleIndex}`"><span class="fixed-sample">{{ sample }}</span></th></template></tr></thead><tbody><tr v-for="(field, fieldIndex) in reportDetailFields" :key="field.key"><td>{{ field.label }}</td><template v-for="(column, columnIndex) in reportColumns" :key="`fields-${column.id}`"><td v-for="(sample, sampleIndex) in column.samples" :key="`${field.key}-${column.id}-${sampleIndex}`"><el-input v-if="field.mode === 'input'" v-model="reportFieldValues[reportValueKey(field.key, `${column.id}-${sample}`)]" size="small" placeholder="请输入" /><span v-else-if="field.mode === 'raw'" class="raw-value">{{ rawReportValue(fieldIndex, sampleIndex + columnIndex) }}</span><span v-else class="auto-value">自动计算</span></td></template></tr></tbody></table></div><div v-if="!readonly" class="report-data-actions"><button class="primary-button" type="button" @click="addReportField"><el-icon><Plus /></el-icon>添加项</button><button class="secondary-button" type="button" @click="openFieldTemplate('battery')"><el-icon><DocumentCopy /></el-icon>电池组字段模板</button><button class="secondary-button" type="button" @click="openFieldTemplate('special')"><el-icon><DocumentCopy /></el-icon>选择特殊字段模板</button><button class="secondary-button" type="button" @click="saveSpecialTemplate"><el-icon><DocumentCopy /></el-icon>另存特殊字段模板</button></div></section> |
|---|
| | | <section class="cycle-panel"><header class="panel-heading"><div><strong>化成循环明细</strong></div></header><div class="cycle-list"><article v-for="cycle in cycles" :key="cycle.cycle" class="cycle-block"><div class="cycle-block-heading"><strong>循环{{ cycle.cycle }}</strong></div><div class="cycle-table-wrap"><table class="cycle-matrix" :style="{ minWidth: `${Math.max(920, reportSamples.length * 170 + 190)}px` }"><thead><tr><th>指标字段</th><th v-for="(sample, sampleIndex) in reportSamples" :key="`${sample}-${sampleIndex}`">{{ sample }}</th></tr></thead><tbody><tr class="method-row"><td>测试方法</td><td v-for="(sample, sampleIndex) in reportSamples" :key="`${sample}-${sampleIndex}`"><el-input v-model="cycle.method" size="small" /></td></tr><tr v-for="(field, fieldIndex) in cycleFields" :key="field.key"><td>{{ field.label }}</td><td v-for="(sample, sampleIndex) in reportSamples" :key="`${field.key}-${sample}-${sampleIndex}`"><el-input v-if="field.mode === 'input'" v-model="cycleFieldValues[cycleValueKey(cycle.cycle, field.key, `${sample}-${sampleIndex}`)]" size="small" placeholder="请输入" /><span v-else-if="field.mode === 'raw'" class="raw-value">{{ rawValue(cycle.cycle, fieldIndex, sampleIndex) }}</span><span v-else class="auto-value">自动计算</span></td></tr></tbody></table></div></article></div></section> |
|---|
| | | <section class="metrics-panel"><div v-if="!readonly" class="metric-switches"><label v-for="metric in formationMetricDefinitions" :key="metric.key"><span>{{ metric.title }}</span><el-switch v-model="formationMetricVisible[metric.key]" inline-prompt active-text="显" inactive-text="隐" /></label></div><div class="cycle-chart-tabs"><button v-for="cycle in cycles" :key="cycle.cycle" type="button" :class="{ active: activeCycle === cycle.cycle }" @click="activeCycle = cycle.cycle">循环{{ cycle.cycle }}</button></div><div class="chart-legend-bar"><strong>化成图例</strong><div v-for="(sample, index) in reportSamples.slice(0, 3)" :key="`${sample}-${index}`" class="chart-legend-item"><el-color-picker v-if="!readonly" class="legend-color-picker" :model-value="seriesColors[index]" :show-alpha="false" popper-class="legend-color-popper" :aria-label="`修改${sample}颜色`" @change="updateSeriesColor(index, $event)" /><span>{{ sample }}</span></div></div><div class="charts-grid"><article v-for="metric in visibleFormationMetrics" :key="metric.key" class="chart-card"><header><strong>{{ metric.title }}</strong><span>{{ metric.unit }}</span></header><VChart class="metric-chart" :option="chartOption(metric)" autoresize /></article></div></section> |
|---|
| | | <section class="note-panel"><label><span>报表说明</span><el-input v-model="description" type="textarea" :rows="3" maxlength="300" show-word-limit /></label></section><footer class="form-actions"><button class="secondary-button" type="button" @click="exportPdf"><el-icon><Download /></el-icon>导出PDF</button><button class="secondary-button" type="button" @click="router.push('/report-formation')">{{ readonly ? '返回列表' : '取消' }}</button><button v-if="!readonly" class="primary-button" type="button" :disabled="saving" @click="saveReport"><el-icon><Check /></el-icon>{{ saving ? '保存中' : editingId ? '保存修改' : '保存报表' }}</button></footer> |
|---|
| | | <el-dialog v-model="templateDialogVisible" class="formation-template-dialog" :title="templateMode === 'battery' ? '选择电池组字段模板' : '选择特殊字段模板'" :width="templateMode === 'battery' ? '720px' : '560px'" align-center> |
|---|
| | | <div v-if="templateMode === 'battery'" class="battery-template-editor"><label class="battery-template-select"><span>选择模板</span><el-select v-model="selectedBatteryTemplateName" @change="switchBatteryTemplate"><el-option v-for="name in batteryTemplateNames" :key="name" :label="name" :value="name" /></el-select></label><el-checkbox-group v-if="batteryTemplateFieldOptions.length" v-model="selectedBatteryTemplateFieldIds" class="battery-template-fields" @change="applyBatteryTemplateFields"><el-checkbox v-for="field in batteryTemplateFieldOptions" :key="field.id" :value="field.id" :disabled="field.status === '禁用'" :title="`${field.name}（${field.type}，${field.status}）`">{{ field.name }}</el-checkbox></el-checkbox-group><div v-else class="template-empty">暂无字段，请先到电池组字段管理中添加字段</div></div> |
|---|
| | | <el-radio-group v-else v-model="selectedTemplateKey" class="template-options"><el-radio v-for="item in fieldTemplates" :key="item.key" :value="item.key" border>{{ item.name }}（{{ item.fields.join('、') }}）</el-radio></el-radio-group> |
|---|
| | | <template #footer><div v-if="templateMode === 'battery'" class="battery-template-actions"><button class="primary-button" type="button" @click="applyFieldTemplate"><el-icon><Check /></el-icon>确认</button><button class="primary-button" type="button" @click="saveBatteryTemplate"><el-icon><Check /></el-icon>保存</button><button class="secondary-button" type="button" @click="saveBatteryTemplateAs"><el-icon><DocumentCopy /></el-icon>另存模板</button></div><div v-else><button class="secondary-button" type="button" @click="templateDialogVisible = false">取消</button><button class="primary-button" type="button" @click="applyFieldTemplate">应用模板</button></div></template> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .charge-termination-row td{white-space:normal!important;padding:8px 10px!important}.metrics-panel .panel-heading{flex-wrap:wrap} |
|---|
| | | .curve-cycle-select{width:130px;flex:0 0 130px;margin:8px 0}.metrics-panel .chart-legend-item span{max-width:100%;overflow:visible;white-space:normal;overflow-wrap:anywhere}.series-swatch{flex:0 0 14px;height:14px}.metric-switches .el-checkbox{margin-right:0}.metrics-panel .chart-legend-item{max-width:100%;align-items:flex-start}.metrics-panel .chart-legend-item .el-color-picker{flex-shrink:0}.metrics-panel .metric-chart{height:260px}.metrics-panel .chart-legend-bar{padding-top:12px;padding-bottom:12px} |
|---|
| | | .version-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0 16px;color:#52606d;font-size:12px}.version-bar span{overflow-wrap:anywhere} |
|---|
| | | .source-panel{padding:16px;background:#fff;border:1px solid #d8e1e9;margin-bottom:16px}.source-panel label{display:flex;align-items:center;gap:16px}.source-panel .el-select{flex:1;min-width:0}.formation-form-page{min-width:0}.missing-cycle{color:#7b8794}.cycle-card h3{margin:0;padding:12px 16px;font-size:14px}.cycle-data-table,.report-data-table{table-layout:fixed}.cycle-data-table th,.report-data-table th{white-space:normal;overflow-wrap:anywhere}.cycle-data-table th:first-child,.report-data-table th:first-child{width:180px}.cycle-data-table td,.report-data-table td{overflow-wrap:anywhere}.formation-form-page :deep(.el-alert){margin-bottom:12px}@media(max-width:680px){.source-panel label{align-items:stretch;flex-direction:column;gap:8px}} |
|---|
| | | .formation-form-page{width:100%;padding-bottom:78px}.page-tools{height:34px;display:flex;align-items:center;justify-content:space-between}.page-tools>span{color:#7f8d99;font-size:10px;font-weight:600}.back-button{display:inline-flex;align-items:center;gap:6px;border:0;color:#52606d;background:transparent;font-size:13px;cursor:pointer}.primary-button,.secondary-button{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 13px;border:1px solid transparent;border-radius:3px;font-size:13px;cursor:pointer;white-space:nowrap}.primary-button{color:#fff;background:var(--blue);border-color:var(--blue)}.secondary-button{color:#52606d;background:#fff;border-color:var(--line-strong)}.report-name-panel,.setup-panel,.cycle-panel,.metrics-panel,.note-panel{background:#fff;border:1px solid #d8e1e9;margin-bottom:16px}.report-name-panel{padding:18px 22px}.report-name-panel label,.note-panel label{display:grid;grid-template-columns:72px minmax(260px,520px);align-items:center;gap:12px}.report-name-panel label>span,.note-panel label>span,.setup-grid label>span{color:#52606d;font-size:12px;font-weight:500}.report-name-panel :deep(.el-input__wrapper),.setup-grid :deep(.el-input__wrapper),.setup-grid :deep(.el-select__wrapper),.note-panel :deep(.el-textarea__inner),.cycle-table :deep(.el-input__wrapper){border-radius:3px;box-shadow:0 0 0 1px #d8e1e9 inset;background:#f8fafc}.panel-heading{min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line)}.panel-heading>div{display:flex;align-items:center;gap:9px}.panel-heading>strong,.panel-heading>div>strong{color:#26333f;font-size:13px}.panel-heading span{color:#8795a3;font-size:11px;margin-left:10px}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:18px;padding:20px 24px 12px}.setup-grid label{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px}.sample-toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 24px 10px;color:#52606d;font-size:12px}.sample-list{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px 20px}.sample-chip{display:flex;align-items:center;gap:6px}.sample-chip :deep(.el-select){width:150px}.delete-link{border:0;color:#c45454;background:transparent;font-size:12px;cursor:pointer}.cycle-tabs{display:flex;gap:0;padding:16px 24px 0}.cycle-tabs button{min-width:84px;height:30px;color:#1677dd;background:#fff;border:1px solid #78b2f9;font-size:12px;cursor:pointer}.cycle-tabs button:first-child{border-radius:3px 0 0 3px}.cycle-tabs button:last-child{border-radius:0 3px 3px 0}.cycle-tabs button+button{border-left:0}.cycle-tabs button.active{color:#fff;background:#2188f5}.cycle-table-wrap{overflow-x:auto;padding:14px 24px 22px}.cycle-table{width:100%;min-width:900px;border-collapse:collapse;color:#52606d;font-size:12px}.cycle-table th,.cycle-table td{height:42px;padding:0 10px;border:1px solid #cbd8e4;text-align:center;white-space:nowrap}.cycle-table th{color:#fff;background:#3c6497;font-weight:600}.cycle-table th:nth-child(1){width:90px}.cycle-table th:nth-child(2){width:240px}.cycle-table th:nth-child(3){width:150px}.cycle-table th:nth-child(4),.cycle-table th:nth-child(5){width:130px}.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px 24px 24px}.chart-legend-bar{display:flex;align-items:center;gap:20px;padding:12px 24px;border-bottom:1px solid var(--line);color:#52606d;font-size:12px}.legend-item{display:inline-flex;align-items:center;gap:7px}.legend-color{width:14px;height:14px;border-radius:2px}.chart-card{border:1px solid #d8e1e9;background:#fff}.chart-card header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;color:#26333f;font-size:12px}.chart-card header span{color:#8795a3;font-size:10px}.metric-chart{width:100%;height:230px}.note-panel{padding:18px 24px}.note-panel :deep(.el-textarea){min-width:260px}.form-actions{position:sticky;bottom:0;z-index:4;display:flex;justify-content:flex-end;gap:10px;padding:14px 0;background:rgba(244,248,251,.96);border-top:1px solid #d8e1e9}@media(max-width:900px){.setup-grid,.charts-grid{grid-template-columns:1fr}.report-name-panel label,.note-panel label{grid-template-columns:1fr}.report-name-panel label>span,.note-panel label>span{margin-bottom:6px}.form-actions{position:static}} |
|---|
| | | .cycle-matrix{width:100%;border-collapse:collapse;color:#52606d;font-size:12px}.cycle-matrix th,.cycle-matrix td{height:40px;padding:0 10px;border:1px solid #cbd8e4;text-align:center;white-space:nowrap}.cycle-matrix th{color:#fff;background:#3c6497;font-weight:600}.cycle-matrix th:first-child{width:190px}.cycle-matrix th:last-child{width:90px}.cycle-matrix td:first-child{color:#31404d;background:#f2f7fb;font-weight:500;text-align:left}.cycle-matrix td:last-child{color:#8795a3;background:#fafcfe}.cycle-matrix :deep(.el-input__wrapper){border-radius:3px;box-shadow:0 0 0 1px #d8e1e9 inset;background:#f8fafc}.method-row td:first-child{border-left:3px solid #2188f5}.raw-value{color:#405261;font-family:'Cascadia Mono',Consolas,monospace}.auto-value{color:#2188f5;font-weight:500}.cycle-summary{display:flex;align-items:center;gap:28px;margin:0 24px 20px;padding:12px 14px;border:1px solid #d8e1e9;background:#f7fafc}.cycle-summary>div{display:flex;flex-direction:column;gap:3px}.cycle-summary span{color:#8795a3;font-size:10px}.cycle-summary strong{color:#33414e;font-size:12px}.cycle-summary>button{margin-left:auto}@media(max-width:900px){.cycle-summary{align-items:flex-start;flex-wrap:wrap}.cycle-summary>button{margin-left:0}} |
|---|
| | | .report-data-panel{background:#fff;border:1px solid #d8e1e9;margin-bottom:16px}.report-data-meta{display:flex;align-items:center;gap:12px}.report-data-meta label{display:flex;align-items:center;gap:6px;color:#52606d;font-size:11px;font-weight:500}.report-data-meta :deep(.el-select){width:190px}.report-data-meta :deep(.el-input){width:150px}.report-data-meta :deep(.el-input__wrapper),.report-data-meta :deep(.el-select__wrapper){min-height:30px;border-radius:3px;box-shadow:0 0 0 1px #d8e1e9 inset;background:#f8fafc}.report-data-table-wrap{overflow-x:auto;padding:18px 24px 0}.report-data-table{width:100%;border-collapse:collapse;color:#52606d;font-size:12px}.report-data-table th,.report-data-table td{height:38px;padding:0 10px;border:1px solid #cbd8e4;text-align:center;white-space:nowrap}.report-data-table th{color:#fff;background:#3c6497;font-weight:600}.report-data-table th:first-child,.report-data-table td:first-child{width:150px}.report-data-table td:first-child{color:#31404d;background:#f7fafc;font-weight:500}.report-data-table td:last-child,.report-data-table th:last-child{width:90px;color:#8795a3;background:#fafcfe}.report-data-table :deep(.el-select){width:100px}.report-data-table :deep(.el-select__wrapper),.report-data-table :deep(.el-input__wrapper){min-height:28px;border-radius:3px;box-shadow:0 0 0 1px #d8e1e9 inset;background:#fff}.group-index{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px;border:1px solid #cbd8e4;border-radius:50%;color:#647380;background:#fff;font-size:10px}.report-data-actions{display:flex;align-items:center;gap:10px;padding:18px 24px 20px}.report-data-actions .primary-button{height:30px;padding:0 12px;font-size:12px}@media(max-width:900px){.report-data-meta{align-items:flex-start;flex-direction:column;gap:6px}.report-data-actions{flex-wrap:wrap}} |
|---|
| | |
|---|
| | | @media(max-width:900px){.metrics-panel .charts-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:680px){.metric-switches{gap:14px;padding:0 12px}.metrics-panel>.chart-legend-bar{align-items:flex-start;flex-direction:column;gap:10px;padding:12px 12px}.cycle-chart-tabs{padding-left:12px}} |
|---|
| | | .formation-form-page.is-readonly :deep(.el-input), .formation-form-page.is-readonly :deep(.el-textarea) { pointer-events: none; } |
|---|
| | | .formation-form-page.is-readonly :deep(.el-input__wrapper), .formation-form-page.is-readonly :deep(.el-textarea__inner) { background: #f3f6f8; box-shadow: 0 0 0 1px #d8e1e9 inset; } |
|---|
| | | .note-panel :deep(.el-textarea){min-width:0}.report-data-table th,.cycle-data-table th{white-space:normal;overflow-wrap:anywhere}.report-data-table td:last-child,.report-data-table th:last-child{width:auto}.report-data-table th:last-child{color:#fff;background:#3c6497}.cycle-data-table th:nth-child(n){width:auto}.cycle-data-table th:first-child{width:180px}.cycle-data-table td:first-child{white-space:normal;width:180px}.report-data-actions,.form-actions{flex-wrap:wrap}.report-data-table-wrap,.cycle-table-wrap{max-width:100%;box-sizing:border-box} |
|---|
| | | </style> |
|---|
