<script setup lang="ts">
|
import { computed } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { getDataRevision, type RevisionDataValues } from '@/stores/dataRevisions'
|
|
const route = useRoute()
|
const router = useRouter()
|
const record = computed(() => getDataRevision(String(route.params.id)))
|
|
const dataFields: Array<{ key: keyof RevisionDataValues; label: string }> = [
|
{ key: 'voltage', label: '电压 (V)' },
|
{ key: 'current', label: '电流 (mA)' },
|
{ key: 'capacity', label: '容量 (mAh)' },
|
{ key: 'energy', label: '能量 (mWh)' },
|
{ key: 'temperature', label: '温度（采集器）' },
|
{ key: 'positivePotential', label: '正电位（采集器）' },
|
{ key: 'negativePotential', label: '负电位（采集器）' },
|
]
|
|
function isChanged(key: keyof RevisionDataValues) {
|
const item = record.value
|
return Boolean(item?.revisedData && item.originalData[key] !== item.revisedData[key])
|
}
|
|
function goBack() {
|
router.push('/data-revision')
|
}
|
</script>
|
|
<template>
|
<div class="revision-detail-page">
|
<div class="page-tools">
|
<button class="back-button" type="button" @click="goBack"><el-icon><ArrowLeft /></el-icon>返回数据修订记录</button>
|
<span>DATA REVISION DETAILS</span>
|
</div>
|
<section v-if="record" class="detail-panel">
|
<header class="detail-toolbar">
|
<div class="heading-group">
|
<i></i>
|
<div><strong>数据详情</strong><span>{{ record.id }} · 只读审计记录</span></div>
|
</div>
|
<span class="operation-tag" :class="record.operation === '删除' ? 'deleted' : 'modified'">
|
<el-icon><Delete v-if="record.operation === '删除'" /><EditPen v-else /></el-icon>{{ record.operation }}
|
</span>
|
</header>
|
|
<section class="summary-section" aria-label="修订记录概要">
|
<div class="summary-grid">
|
<div><span>测试编号</span><strong>#{{ record.testId }}</strong></div>
|
<div><span>测试名称</span><strong>{{ record.testName }}</strong></div>
|
<div><span>工步名称</span><strong>{{ record.stepName }}</strong></div>
|
<div><span>循环编号</span><strong>{{ record.cycleNo }}</strong></div>
|
<div><span>工步序号</span><strong>{{ record.stepNo }}</strong></div>
|
<div><span>工步时间</span><strong class="mono-value">{{ record.stepDuration }}</strong></div>
|
<div><span>绝对时间</span><strong>{{ record.absoluteTime }}</strong></div>
|
<div><span>记录生成时间</span><strong>{{ record.generatedAt }}</strong></div>
|
<div><span>修改时间</span><strong>{{ record.modifiedAt }}</strong></div>
|
<div><span>修改人</span><strong>{{ record.modifier }}</strong></div>
|
</div>
|
<div class="remark-line"><span>修改备注</span><p>{{ record.remark }}</p></div>
|
</section>
|
|
<section class="data-section" aria-label="原始数据">
|
<div class="section-title"><i></i><strong>原始数据</strong><span>ORIGINAL DATA</span></div>
|
<div class="data-grid">
|
<div v-for="field in dataFields" :key="field.key" class="data-field">
|
<span>{{ field.label }}</span>
|
<output :class="{ changed: isChanged(field.key) }">{{ record.originalData[field.key] }}</output>
|
</div>
|
</div>
|
</section>
|
|
<section class="data-section revised-section" aria-label="修改结果">
|
<div class="section-title"><i></i><strong>修改后数据</strong><span>REVISION RESULT</span></div>
|
<div v-if="record.revisedData" class="data-grid">
|
<div v-for="field in dataFields" :key="field.key" class="data-field">
|
<span>{{ field.label }}</span>
|
<output :class="{ changed: isChanged(field.key) }">
|
{{ record.revisedData[field.key] }}
|
<small v-if="isChanged(field.key)">已修订</small>
|
</output>
|
</div>
|
</div>
|
<div v-else class="deleted-result">
|
<span class="deleted-icon"><el-icon><Delete /></el-icon></span>
|
<div><strong>原始数据已删除</strong><p>该采样记录已从测试结果中移除，原始值仅在本审计页面保留展示。</p></div>
|
</div>
|
</section>
|
</section>
|
|
<section v-else class="not-found-panel">
|
<el-empty description="未找到该数据修订记录" />
|
<button class="secondary-button" type="button" @click="goBack"><el-icon><ArrowLeft /></el-icon>返回记录列表</button>
|
</section>
|
</div>
|
</template>
|
|
<style scoped>
|
.revision-detail-page { width: 100%; }
|
.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; }
|
.back-button:hover { color: var(--blue); }
|
.detail-panel, .not-found-panel { background: #fff; border: 1px solid #d8e1e9; }
|
.detail-toolbar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
|
.heading-group { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
.heading-group > i { width: 3px; height: 18px; background: #2b78a3; }
|
.heading-group > div { min-width: 0; }
|
.heading-group strong, .heading-group span { display: block; }
|
.heading-group strong { color: var(--ink); font-size: 15px; font-weight: 600; }
|
.heading-group span { margin-top: 2px; color: #81909d; font-size: 10px; }
|
.operation-tag { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid; font-size: 12px; font-weight: 600; }
|
.operation-tag.modified { color: #176fcb; background: #edf6ff; border-color: #b8d9fb; }
|
.operation-tag.deleted { color: #b34f4f; background: #fff1f1; border-color: #e9bcbc; }
|
.summary-section { padding: 20px 22px; }
|
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; }
|
.summary-grid > div { min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 8px; }
|
.summary-grid span, .remark-line > span { color: #7b8794; font-size: 12px; }
|
.summary-grid strong { min-width: 0; color: #34414d; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
.mono-value { font-family: 'Cascadia Mono', Consolas, monospace; }
|
.remark-line { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed #dce5ed; }
|
.remark-line p { color: #34414d; font-size: 13px; line-height: 1.6; }
|
.data-section { padding: 20px 22px 24px; border-top: 1px solid var(--line); }
|
.section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
|
.section-title i { width: 3px; height: 15px; background: #2b78a3; }
|
.section-title strong { color: #26333f; font-size: 14px; font-weight: 600; }
|
.section-title span { color: #8a98a5; font-size: 10px; }
|
.data-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
|
.data-field { min-width: 0; }
|
.data-field > span { display: block; margin-bottom: 7px; color: #52606d; font-size: 12px; font-weight: 500; }
|
.data-field output { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 1px solid #e0e8ef; color: #34414d; background: #f6f8fa; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 13px; }
|
.data-field output.changed { color: #176fcb; background: #eef7ff; border-color: #b8d9fb; }
|
.data-field output small { color: #176fcb; font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; font-size: 10px; font-weight: 500; }
|
.revised-section { min-height: 210px; }
|
.deleted-result { min-height: 118px; display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid #efd0d0; background: #fff7f7; }
|
.deleted-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: #b34f4f; background: #ffe9e9; font-size: 20px; }
|
.deleted-result strong { color: #9e4141; font-size: 14px; font-weight: 600; }
|
.deleted-result p { margin-top: 6px; color: #785c5c; font-size: 12px; line-height: 1.6; }
|
.not-found-panel { min-height: 420px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
|
.secondary-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 3px; color: #52606d; background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
|
.secondary-button:hover { color: var(--blue); border-color: #9dc8f5; }
|
|
@media (max-width: 1280px) {
|
.summary-grid, .data-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
}
|
|
@media (max-width: 900px) {
|
.summary-grid, .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
}
|
|
@media (max-width: 620px) {
|
.detail-toolbar { padding: 0 12px; }
|
.heading-group span { display: none; }
|
.summary-section, .data-section { padding: 16px 12px 20px; }
|
.summary-grid, .data-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
|
.summary-grid > div, .remark-line { grid-template-columns: 86px minmax(0, 1fr); }
|
}
|
</style>
|
