浅念
137 lines
4.4 KiB
Vue
137 lines
4.4 KiB
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 v-if="showEmployee" class="cell-emp">
|
|
<el-link
|
|
type="primary"
|
|
:underline="false"
|
|
@click.stop="goEmployee(row)"
|
|
>{{ row.employee_name || row.employee_user_id.slice(0, 8) }}</el-link>
|
|
</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/标题+员工行
|
|
// (showEmployee,批次D:employee_name 链接→员工详情,.stop 防触发行下钻)
|
|
// +原因/单位感知当前值+基线/样本/影响(≥50 红显)/建议动作。行 click 打开
|
|
// 下钻抽屉(emit drill,抽屉自治加载);critical 整行淡红底提示优先处置。
|
|
// 纯展示+事件,不取数。
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { formatMsDuration, formatRatio } from '@/utils/format'
|
|
import type { AnomalyCard } from '@/api/management'
|
|
|
|
// showEmployee(默认 true):驾驶舱异常榜显示员工行;员工详情页复用本组件
|
|
// 传 false(自指链接无意义)
|
|
withDefaults(
|
|
defineProps<{
|
|
anomalies: AnomalyCard[]
|
|
loading?: boolean
|
|
showEmployee?: boolean
|
|
}>(),
|
|
{ showEmployee: true },
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'drill', card: AnomalyCard): void
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// 员工链接:带当前 URL query(channel/start/end/compare 随行,与列表
|
|
// goDetail 带窗进详情同语义);detail 页对白名单外 query 键不敏感
|
|
function goEmployee(row: AnomalyCard): void {
|
|
router.push({
|
|
path: `/management/employees/${row.employee_user_id}`,
|
|
query: route.query,
|
|
})
|
|
}
|
|
|
|
// 单位感知格式化: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-emp {
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
line-height: 1.4;
|
|
}
|
|
.cell-emp .el-link {
|
|
font-size: 12px;
|
|
}
|
|
.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>
|