feat: 新增风险图谱算法与系统仪表盘及操作反馈体系
后端新增风险图谱算法模块、风险观察与反馈服务、规则 DSL 校验器和可解释性引擎，完善系统仪表盘和财务仪表盘统计， 优化 agent 运行和编排执行链路，清理旧开发文档，前端新增 系统趋势、负载热力图等多种仪表盘图表组件，完善操作反馈 对话框和工作台日期选择器，优化报销创建和审批详情交互， 补充单元测试覆盖。
This commit is contained in:
caoxiaozhu
199
web/src/components/charts/SystemUserTokenPie.vue
Normal file
199
web/src/components/charts/SystemUserTokenPie.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="system-user-token-pie">
|
||||
<div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
|
||||
<div class="token-user-list">
|
||||
<div v-for="item in resolvedItems" :key="item.name" class="token-user-row">
|
||||
<i :style="{ background: item.resolvedColor }"></i>
|
||||
<div>
|
||||
<strong>{{ item.name }}</strong>
|
||||
<span>{{ item.role }}</span>
|
||||
</div>
|
||||
<em>{{ formatTokens(item.tokens) }}</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent } from 'echarts/components'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
import { useEcharts } from '../../composables/useEcharts.js'
|
||||
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
use([TooltipComponent, PieChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const chartElement = shallowRef(null)
|
||||
const themeColors = useThemeColors()
|
||||
const totalTokens = computed(() =>
|
||||
props.items.reduce((sum, item) => sum + Number(item.tokens || 0), 0)
|
||||
)
|
||||
const resolvedItems = computed(() =>
|
||||
props.items.map((item) => ({
|
||||
...item,
|
||||
tokens: Number(item.tokens || 0),
|
||||
resolvedColor: resolveCssColor(item.color, themeColors.value.chartPrimary)
|
||||
}))
|
||||
)
|
||||
|
||||
const ariaLabel = computed(() =>
|
||||
resolvedItems.value.map((item) => (
|
||||
`${item.name}${formatTokens(item.tokens)}，占比${getShare(item.tokens)}%`
|
||||
)).join('；')
|
||||
)
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
backgroundColor: 'transparent',
|
||||
animation: true,
|
||||
animationDuration: 900,
|
||||
animationEasing: 'cubicOut',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||
borderWidth: 1,
|
||||
padding: [9, 10],
|
||||
textStyle: {
|
||||
color: '#334155',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
|
||||
formatter: (params) => `${params.marker}${params.name}<br/>${formatTokens(params.value)} · ${params.percent}%`
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [0, '82%'],
|
||||
center: ['47%', '50%'],
|
||||
roseType: 'radius',
|
||||
minAngle: 8,
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#475569',
|
||||
fontSize: 11,
|
||||
fontWeight: 800,
|
||||
formatter: '{b}\n{d}%'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
length2: 6,
|
||||
lineStyle: { color: 'rgba(148, 163, 184, 0.55)' }
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 3,
|
||||
borderRadius: 4
|
||||
},
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 4
|
||||
},
|
||||
data: resolvedItems.value.map((item) => ({
|
||||
name: item.name,
|
||||
value: item.tokens,
|
||||
itemStyle: { color: item.resolvedColor }
|
||||
}))
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
useEcharts(chartElement, chartOptions)
|
||||
|
||||
function getShare(value) {
|
||||
if (!totalTokens.value) return 0
|
||||
return Math.round((Number(value || 0) / totalTokens.value) * 1000) / 10
|
||||
}
|
||||
|
||||
function formatTokens(value) {
|
||||
const number = Number(value || 0)
|
||||
if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1)}M`
|
||||
if (number >= 1_000) return `${(number / 1_000).toFixed(1)}K`
|
||||
return `${Math.round(number)}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-user-token-pie {
|
||||
min-height: 292px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 188px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 292px;
|
||||
}
|
||||
|
||||
.token-user-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.token-user-row {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.token-user-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.token-user-row i {
|
||||
width: 8px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.token-user-row strong,
|
||||
.token-user-row span {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.token-user-row strong {
|
||||
color: #1e293b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.token-user-row span {
|
||||
margin-top: 2px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.token-user-row em {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 850;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.system-user-token-pie {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user