yunke/yunkes/src/components/management/AnomalyList.vue

<template>
  <el-table
    v-loading="loading"
    :data="anomalies"
    :row-class-name="rowClass"
    @row-click="onRowClick"
  >
    <el-table-column label="级别" width="70" align="center">
      <template #default="{ row }">
        <el-tag v-if="row.severity === 'critical'" type="danger" size="small">严重</el-tag>
        <el-tag v-else type="warning" size="small">关注</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="异常" min-width="240">
      <template #default="{ row }">
        <div class="cell-title">{{ row.title }}</div>
        <div class="cell-sub">{{ row.reason }}</div>
      </template>
    </el-table-column>
    <el-table-column label="当前值" width="150">
      <template #default="{ row }">
        <div>{{ formatValue(row.current_value, row.unit) }}</div>
        <div class="cell-sub">
          {{ row.baseline_value === null ? '无基线' : `基线 ${formatValue(row.baseline_value, row.unit)}` }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="样本" prop="sample_size" align="right" width="80" />
    <el-table-column label="影响" align="right" width="90">
      <template #default="{ row }">
        <span :class="{ 'affected-hot': row.affected_count >= 50 }">{{ row.affected_count }}</span>
      </template>
    </el-table-column>
    <el-table-column label="建议动作" min-width="180" show-overflow-tooltip>
      <template #default="{ row }">
        <span class="cell-sub">{{ row.suggested_action }}</span>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description="暂无异常" :image-size="60" />
    </template>
  </el-table>
</template>

<script setup lang="ts">
// 异常榜(批次C 驾驶舱):后端 AnomalyCard[] 平铺表——级别 tag/标题+原因
// 双行/单位感知当前值+基线/样本/影响(≥50 红显)/建议动作。行 click 打开
// 下钻抽屉(emit drill,抽屉自治加载);critical 整行淡红底提示优先处置。
// 纯展示+事件,不取数。
import { formatMsDuration, formatRatio } from '@/utils/format'
import type { AnomalyCard } from '@/api/management'

// showEmployee(默认 true):D3 驾驶舱异常榜将在标题下加员工行(employee_name
// 链接→员工详情);员工详情页复用本组件时传 false 免自链接——prop 先行落位
// (批次D2),员工行的渲染随 D3 接上。
withDefaults(
  defineProps<{
    anomalies: AnomalyCard[]
    loading?: boolean
    showEmployee?: boolean
  }>(),
  { showEmployee: true },
)

const emit = defineEmits<{
  (e: 'drill', card: AnomalyCard): void
}>()

// 单位感知格式化:ms→时长,0-1→比率,其余千分位(与指标口径字典 unit 对齐)
function formatValue(v: number, unit: string): string {
  if (unit === 'ms') return formatMsDuration(v)
  if (unit === '0-1') return formatRatio(v)
  return v.toLocaleString()
}

function rowClass({ row }: { row: AnomalyCard }): string {
  return row.severity === 'critical'
    ? 'anomaly-critical-row yk-clickable-row'
    : 'yk-clickable-row'
}

function onRowClick(row: AnomalyCard): void {
  emit('drill', row)
}
</script>

<style scoped>
/* critical 行整行淡红底(优先处置);hover 深一档由 EP 行 hover 自带 */
:deep(.el-table .anomaly-critical-row) {
  background-color: var(--el-color-danger-light-9);
}
:deep(.el-table .anomaly-critical-row:hover > td.el-table__cell) {
  background-color: var(--el-color-danger-light-8);
}
.cell-title {
  font-size: 13px;
  color: var(--el-text-color-primary);
}
.cell-sub {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 2px;
}
.affected-hot {
  color: var(--el-color-danger);
  font-weight: 600;
}
</style>