Skip to content

D
db-tools
Commit d2917cf8 authored by Data Governance Dev's avatar Data Governance Dev
Browse files
Options

fix(web): 国标违规 tab 表格重做，去展开列参照字段长度 tab 布局 

用户反馈国标违规 tab 列被压扁、表格未铺满。上一版用 overflow-x:auto 包裹
未能根治。根因：原 el-table-column type="expand" 嵌套子 el-table 加
el-tabs__content 的 overflow:hidden 组合在某些视口下渲染异常。

参照字段长度异常 tab 的简洁模板布局重做两个表：

按标准统计（7 列，无展开）：
  - 标准         width=120
  - 标准名称    min-width=380  模板：粗体代码 + 小字名称
  - 字段数      width=100 align=right
  - 抽样数      width=120 align=right
  - 违规数      width=120 align=right
  - 违规率      width=140 三色（>50% 红 / >20% 橙 / 余绿）
  - 字段清单/违规率  min-width=340  模板内联最多 6 个字段，超出显示「…等共 N 个字段」
    （替代原本的展开行，违规率按字段级别上色）

违规明细（3 列大幅合并）：
  - 表 / 字段         min-width=280  模板：粗体表名 + 小字字段名
  - 标准 / 标准名     min-width=320  模板：粗体规则代码 + 小字标准名
  - 值 / 违规原因    min-width=420  模板：<code> 包值 + 小字错误原因

样式统一字段长度 tab：
  el-table style="margin-top: 12px; width: 100%" max-height="480"
删除上一版的 overflow-x: auto 包裹（不再需要）。

验证：本地 == HTTP 服务返回（54914 字节一致）。
parent 9112c312
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 34 deletions
web/static/index.html
View file @ d2917cf8
......@@ -509,48 +509,71 @@
<el-alert :title="`${jobResult.sections.standard_violations?.summary?.standards_applied || 0} 个标准，${jobResult.sections.standard_violations?.summary?.violations || 0} 条违规`" type="error" :closable="false" />
<!-- 按标准汇总 -->
<h4 style="margin-top: 16px">按标准统计</h4>
<el-table :data="jobResult.sections.standard_violations?.violations_by_standard || []" stripe size="small">
<el-table-column type="expand">
<el-table :data="jobResult.sections.standard_violations?.violations_by_standard || []" stripe size="small" style="margin-top: 12px; width: 100%" max-height="480">
<el-table-column prop="standard" label="标准" width="120" />
<el-table-column prop="standard_name" label="标准名称" min-width="380">
<template #default="{ row }">
<el-table :data="row.details" size="small" border>
<el-table-column prop="table" label="表" width="180" />
<el-table-column prop="field" label="字段" width="160" />
<el-table-column prop="sampled" label="抽样数" width="100" />
<el-table-column prop="violations" label="违规数" width="100" />
<el-table-column label="违规率" width="120">
<template #default="{ row: d }">{{ (d.violation_rate * 100).toFixed(1) }}%</template>
</el-table-column>
<el-table-column label="样本">
<template #default="{ row: d }">
<div v-for="(s, idx) in d.samples" :key="idx" style="font-size: 12px">
<code>{{ s.value }}</code> → {{ s.reason }}
<div>
<strong style="color: #303133">{{ row.standard }}</strong>
<div class="muted" style="font-size: 12px; margin-top: 2px">{{ row.standard_name }}</div>
</div>
<div v-if="d.error" style="color: red">{{ d.error }}</div>
</template>
</el-table-column>
</el-table>
<el-table-column prop="fields_count" label="字段数" width="100" align="right" />
<el-table-column prop="total_sampled" label="抽样数" width="120" align="right" />
<el-table-column prop="total_invalid" label="违规数" width="120" align="right" />
<el-table-column label="违规率" width="140" align="center">
<template #default="{ row }">
<span :style="{ color: row.violation_rate > 0.5 ? '#f56c6c' : (row.violation_rate > 0.2 ? '#e6a23c' : '#67c23a'), fontWeight: 600 }">
{{ (row.violation_rate * 100).toFixed(1) }}%
</span>
</template>
</el-table-column>
<el-table-column prop="standard" label="标准" width="100" />
<el-table-column prop="standard_name" label="标准名称" />
<el-table-column prop="fields_count" label="字段数" width="100" />
<el-table-column prop="total_sampled" label="抽样数" width="100" />
<el-table-column prop="total_invalid" label="违规数" width="100" />
<el-table-column label="违规率" width="120">
<template #default="{ row }">{{ (row.violation_rate * 100).toFixed(1) }}%</template>
<el-table-column label="字段清单 / 违规率" min-width="340">
<template #default="{ row }">
<div v-if="row.details && row.details.length">
<div v-for="d in row.details.slice(0, 6)" :key="d.table + '.' + d.field" style="font-size: 12px; margin-top: 2px">
<code style="color: #303133">{{ d.table }}.{{ d.field }}</code>
<span class="muted"> · </span>
<span :style="{ color: d.violation_rate > 0.5 ? '#f56c6c' : (d.violation_rate > 0.2 ? '#e6a23c' : '#67c23a') }">
{{ d.violations }}/{{ d.sampled }} ({{ (d.violation_rate * 100).toFixed(1) }}%)
</span>
</div>
<div v-if="row.details.length > 6" class="muted" style="font-size: 11px; margin-top: 2px; font-style: italic">
… 等共 {{ row.details.length }} 个字段
</div>
</div>
<span v-else class="muted">—</span>
</template>
</el-table-column>
</el-table>
<!-- 违规明细 -->
<h4 style="margin-top: 16px">违规明细（前 200 条）</h4>
<el-table :data="(jobResult.sections.standard_violations?.violations || []).slice(0, 200)" stripe size="small">
<el-table-column prop="table_name" label="表" width="180" />
<el-table-column prop="column_name" label="字段" width="160" />
<el-table-column prop="rule_type" label="标准" width="100" />
<el-table-column prop="standard_name" label="标准名" width="180" />
<el-table-column prop="value" label="值" width="160">
<template #default="{ row }"><code>{{ row.value }}</code></template>
</el-table-column>
<el-table-column prop="error" label="违规原因" />
<el-table :data="(jobResult.sections.standard_violations?.violations || []).slice(0, 200)" stripe size="small" style="margin-top: 12px; width: 100%" max-height="480">
<el-table-column label="表 / 字段" min-width="280">
<template #default="{ row }">
<div>
<strong style="color: #303133">{{ row.table_name }}</strong>
<div class="muted" style="font-size: 12px; margin-top: 2px">{{ row.column_name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="标准 / 标准名" min-width="320">
<template #default="{ row }">
<div>
<strong style="color: #303133">{{ row.rule_type }}</strong>
<div class="muted" style="font-size: 12px; margin-top: 2px">{{ row.standard_name }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="值 / 违规原因" min-width="420">
<template #default="{ row }">
<div>
<code style="color: #303133">{{ row.value }}</code>
<div class="muted" style="font-size: 12px; margin-top: 2px">{{ row.error }}</div>
</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment