feat: 本体字段治理与风险规则模板执行器重构

- 新增本体字段注册表与字段治理审计脚本 - 重构风险规则模板执行器、DSL 验证与清单分类器 - 完善票据夹服务与差旅请求详情页交互 - 优化趋势图表与总览页数据展示 - 增强报销平台风险分级与模拟公司筛选 - 补充本体字段、风险规则生成与票据夹服务测试覆盖
2026-06-03 15:46:56 +08:00
parent e12b140508
commit 34457f9c3e
81 changed files with 4858 additions and 1073 deletions
--- a/web/src/components/charts/TrendChart.vue
+++ b/web/src/components/charts/TrendChart.vue
@@ -1,7 +1,17 @@
 <template>
  <div class="trend-chart">
-    <div class="chart-legend">
-      <span><i :style="{ background: activeColor }"></i>{{ legendLabel }}</span>
+    <div class="chart-toolbar">
+      <div class="chart-legend">
+        <span
+          v-for="item in legendItems"
+          :key="item.name"
+          class="legend-pill"
+          :title="item.title"
+        >
+          <i :style="{ background: item.color }"></i>{{ item.name }}
+        </span>
+      </div>
+      <span class="chart-unit">{{ unitLabel }}</span>
    </div>
    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
  </div>
@@ -9,34 +19,59 @@

 <script setup>
 import { computed, shallowRef } from 'vue'
-import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
+import {
+  BarChart as EChartsBarChart,
+  CustomChart as EChartsCustomChart,
+  LineChart as EChartsLineChart
+} from 'echarts/charts'
 import { GridComponent, TooltipComponent } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'

 import { useEcharts } from '../../composables/useEcharts.js'
-import { useThemeColors } from '../../composables/useThemeColors.js'
+import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

-use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])
+use([GridComponent, TooltipComponent, EChartsBarChart, EChartsCustomChart, EChartsLineChart, CanvasRenderer])

 const props = defineProps({
  labels: { type: Array, required: true },
  mode: { type: String, default: 'amount' },
  claimCount: { type: Array, default: () => [] },
  claimAmount: { type: Array, default: () => [] },
+  categoryAmountSeries: { type: Array, default: () => [] },
  applications: { type: Array, default: () => [] },
-  approved: { type: Array, default: () => [] },
-  avgHours: { type: Array, default: () => [] }
+  approved: { type: Array, default: () => [] }
 })

 const chartElement = shallowRef(null)
 const themeColors = useThemeColors()
+const isCountMode = computed(() => props.mode === 'count')
 const chartColors = computed(() => ({
  primary: themeColors.value.chartPrimary,
-  blue: themeColors.value.chartBlue
+  blue: themeColors.value.chartBlue,
+  amber: themeColors.value.chartAmber,
+  purple: themeColors.value.chartPurple,
+  success: themeColors.value.success,
+  danger: themeColors.value.chartDanger
+}))
+const fallbackSeriesColors = computed(() => [
+  chartColors.value.blue,
+  chartColors.value.amber,
+  chartColors.value.purple,
+  chartColors.value.success,
+  chartColors.value.danger,
+  chartColors.value.primary
+])
+const expenseCategoryColorMap = computed(() => ({
+  '差旅': chartColors.value.blue,
+  '办公用品': chartColors.value.amber,
+  '业务招待': chartColors.value.purple,
+  '通讯': chartColors.value.success,
+  '培训': '#65789b',
+  '交通': chartColors.value.primary,
+  '餐饮': '#9a7b4f',
+  '会议': '#7f6c9f'
 }))
-const isCountMode = computed(() => props.mode === 'count')
-
 const claimCountSeries = computed(() => (
  props.claimCount.length ? props.claimCount : props.applications
 ))
@@ -46,22 +81,108 @@ const claimAmountSeries = computed(() => (
 const activeSeries = computed(() => (
  isCountMode.value ? claimCountSeries.value : claimAmountSeries.value
 ))
+const amountCategorySeries = computed(() => {
+  if (isCountMode.value) {
+    return []
+  }
+  return (Array.isArray(props.categoryAmountSeries) ? props.categoryAmountSeries : [])
+    .filter((item) => Array.isArray(item.data) && item.data.some((value) => Number(value || 0) > 0))
+    .slice(0, 6)
+})
+const stackedAmountData = computed(() => props.labels.map((_, index) => [
+  index,
+  ...amountCategorySeries.value.map((item) => Number(item.data?.[index] || 0))
+]))
 const activeColor = computed(() => (
  isCountMode.value ? chartColors.value.primary : chartColors.value.blue
 ))
 const legendLabel = computed(() => (
-  isCountMode.value ? '报销数量（单）' : '报销金额（元）'
+  isCountMode.value ? '报销数量' : '报销金额'
 ))
+const unitLabel = computed(() => (isCountMode.value ? '单位：单' : '单位：元'))
+const legendItems = computed(() => {
+  if (amountCategorySeries.value.length) {
+    return amountCategorySeries.value.map((item, index) => ({
+      name: item.name || `费用类型 ${index + 1}`,
+      color: resolveCategoryColor(item, index),
+      title: `${item.name || `费用类型 ${index + 1}`} ${formatCurrency(item.total || 0)}`
+    }))
+  }
+  return [{
+    name: legendLabel.value,
+    color: activeColor.value,
+    title: `${legendLabel.value} ${unitLabel.value}`
+  }]
+})
 const maxValue = computed(() => Math.max(...activeSeries.value.map((value) => Number(value || 0)), 1))
-
+const stackedMaxValue = computed(() => {
+  if (!amountCategorySeries.value.length) {
+    return maxValue.value
+  }
+  const dailyTotals = props.labels.map((_, index) => amountCategorySeries.value
+    .reduce((sum, item) => sum + Number(item.data?.[index] || 0), 0))
+  return Math.max(...dailyTotals, 1)
+})
 const ariaLabel = computed(() =>
  props.labels.map((label, index) => (
    isCountMode.value
      ? `${label}报销${claimCountSeries.value[index] || 0}单`
      : `${label}报销金额${formatCurrency(claimAmountSeries.value[index] || 0)}`
-  )).join('；')
+  )).join('，')
 )
+const chartSeries = computed(() => {
+  if (!isCountMode.value && amountCategorySeries.value.length) {
+    return [{
+      name: '费用类型占比',
+      type: 'custom',
+      data: stackedAmountData.value,
+      renderItem: renderStackedAmountBar,
+      animationDelay: (index) => index * 18,
+      tooltip: {
+        formatter: (params) => formatStackedTooltip(params)
+      }
+    }]
+  }

+  return [{
+    name: legendLabel.value,
+    type: isCountMode.value ? 'line' : 'bar',
+    data: activeSeries.value,
+    barWidth: 16,
+    smooth: isCountMode.value,
+    symbol: isCountMode.value ? 'circle' : 'none',
+    symbolSize: 7,
+    lineStyle: {
+      width: 2.5,
+      color: activeColor.value
+    },
+    itemStyle: {
+      color: isCountMode.value ? '#ffffff' : activeColor.value,
+      borderColor: activeColor.value,
+      borderWidth: isCountMode.value ? 2.5 : 0,
+      borderRadius: [4, 4, 0, 0]
+    },
+    areaStyle: {
+      opacity: isCountMode.value ? 1 : 0,
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: toRgba(activeColor.value, 0.14) },
+          { offset: 1, color: toRgba(activeColor.value, 0.02) }
+        ]
+      }
+    },
+    tooltip: {
+      valueFormatter: (value) => (
+        isCountMode.value ? `${Number(value || 0)} 单` : formatCurrency(value)
+      )
+    }
+  }]
+})
 const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: true,
@@ -70,7 +191,7 @@ const chartOptions = computed(() => ({
  animationEasing: 'linear',
  animationEasingUpdate: 'linear',
  grid: {
-    top: 18,
+    top: 12,
    right: 24,
    bottom: 22,
    left: 36,
@@ -89,7 +210,8 @@ const chartOptions = computed(() => ({
      fontSize: 12,
      fontWeight: 700
    },
-    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);'
+    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
+    formatter: (params) => formatTooltip(params)
  },
  xAxis: {
    type: 'category',
@@ -106,14 +228,9 @@ const chartOptions = computed(() => ({
  yAxis: {
    type: 'value',
    min: 0,
-    max: Math.ceil(maxValue.value * 1.2),
+    max: Math.ceil(stackedMaxValue.value * 1.18),
    splitNumber: 5,
-    name: isCountMode.value ? '单' : '元',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 11,
-      fontWeight: 700
-    },
+    name: '',
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
@@ -122,46 +239,7 @@ const chartOptions = computed(() => ({
    },
    splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.75)' } }
  },
-  series: [
-    {
-      name: legendLabel.value,
-      type: isCountMode.value ? 'line' : 'bar',
-      data: activeSeries.value,
-      barWidth: 16,
-      smooth: isCountMode.value,
-      symbol: isCountMode.value ? 'circle' : 'none',
-      symbolSize: 7,
-      lineStyle: {
-        width: 2.5,
-        color: activeColor.value
-      },
-      itemStyle: {
-        color: isCountMode.value ? '#ffffff' : activeColor.value,
-        borderColor: activeColor.value,
-        borderWidth: isCountMode.value ? 2.5 : 0,
-        borderRadius: [4, 4, 0, 0]
-      },
-      areaStyle: {
-        opacity: isCountMode.value ? 1 : 0,
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: toRgba(activeColor.value, 0.14) },
-            { offset: 1, color: toRgba(activeColor.value, 0.02) }
-          ]
-        }
-      },
-      tooltip: {
-        valueFormatter: (value) => (
-          isCountMode.value ? `${Number(value || 0)} 单` : formatCurrency(value)
-        )
-      }
-    }
-  ]
+  series: chartSeries.value
 }))

 useEcharts(chartElement, chartOptions)
@@ -178,6 +256,134 @@ function toRgba(color, alpha) {
  return `rgba(58, 124, 165, ${alpha})`
 }

+function resolveCategoryColor(item, index) {
+  const name = String(item?.name || '').trim()
+  const mapped = expenseCategoryColorMap.value[name]
+  if (mapped) {
+    return mapped
+  }
+
+  const fallback = fallbackSeriesColors.value[index % fallbackSeriesColors.value.length]
+  return resolveCssColor(item?.color, fallback)
+}
+
+function renderStackedAmountBar(params, api) {
+  const categoryIndex = Number(api.value(0))
+  const zeroPoint = api.coord([categoryIndex, 0])
+  const xCenter = zeroPoint[0]
+  const zeroY = zeroPoint[1]
+  const categoryWidth = api.size([1, 0])?.[0] || 32
+  const barWidth = Math.max(12, Math.min(24, categoryWidth * 0.48))
+  const barX = xCenter - barWidth / 2
+  let accumulated = 0
+  const values = amountCategorySeries.value.map((_, index) => Number(api.value(index + 1) || 0))
+  const lastVisibleIndex = values.reduce((last, value, index) => (value > 0 ? index : last), -1)
+  const children = []
+  let topY = zeroY
+
+  values.forEach((value, index) => {
+    if (value <= 0) {
+      return
+    }
+    const lower = accumulated
+    const upper = accumulated + value
+    const lowerY = api.coord([categoryIndex, lower])[1]
+    const upperY = api.coord([categoryIndex, upper])[1]
+    const height = Math.max(1, lowerY - upperY)
+    topY = Math.min(topY, upperY)
+    accumulated = upper
+    children.push({
+      type: 'rect',
+      shape: {
+        x: barX,
+        y: upperY,
+        width: barWidth,
+        height,
+        r: index === lastVisibleIndex ? [4, 4, 0, 0] : 0
+      },
+      style: {
+        fill: resolveCategoryColor(amountCategorySeries.value[index], index)
+      }
+    })
+  })
+
+  if (!children.length) {
+    return {
+      type: 'group',
+      children: []
+    }
+  }
+
+  const totalHeight = Math.max(1, zeroY - topY)
+  return {
+    type: 'group',
+    originX: xCenter,
+    originY: zeroY,
+    scaleY: 1,
+    enterFrom: {
+      scaleY: 0
+    },
+    transition: ['scaleY'],
+    clipPath: {
+      type: 'rect',
+      shape: {
+        x: barX,
+        y: topY,
+        width: barWidth,
+        height: totalHeight
+      },
+      enterFrom: {
+        shape: {
+          x: barX,
+          y: zeroY,
+          width: barWidth,
+          height: 0
+        }
+      },
+      transition: ['shape']
+    },
+    children
+  }
+}
+
+function formatTooltip(params) {
+  const items = Array.isArray(params) ? params : [params]
+  const first = items[0]
+  if (!first) {
+    return ''
+  }
+  if (!isCountMode.value && amountCategorySeries.value.length) {
+    return formatStackedTooltip(first)
+  }
+
+  const index = Number(first.dataIndex || 0)
+  const label = props.labels[index] || first.axisValueLabel || first.name || ''
+  const value = isCountMode.value ? claimCountSeries.value[index] : activeSeries.value[index]
+  const displayValue = isCountMode.value ? `${Number(value || 0)} 单` : formatCurrency(value)
+  return `${label}<br/>${legendLabel.value}：${displayValue}`
+}
+
+function formatStackedTooltip(params) {
+  const index = Number(params?.data?.[0] ?? params?.dataIndex ?? 0)
+  const label = props.labels[index] || params?.axisValueLabel || ''
+  const rows = amountCategorySeries.value
+    .map((item, itemIndex) => ({
+      name: item.name || `费用类型 ${itemIndex + 1}`,
+      color: resolveCategoryColor(item, itemIndex),
+      value: Number(item.data?.[index] || 0)
+    }))
+    .filter((item) => item.value > 0)
+  const total = rows.reduce((sum, item) => sum + item.value, 0)
+  const details = rows.map((item) => (
+    `<span style="display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:${item.color};"></span>${item.name}：${formatCurrency(item.value)}`
+  ))
+  return [
+    label,
+    ...details,
+    `合计：${formatCurrency(total)}`
+  ].join('<br/>')
+}
+
 function formatCurrency(value) {
  const number = Number(value || 0)
  if (number >= 1000000) return `¥${(number / 1000000).toFixed(1)}M`
@@ -200,24 +406,61 @@ function formatAxisCurrency(value) {
  flex-direction: column;
 }

+.chart-toolbar {
+  min-height: 30px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
 .chart-legend {
+  flex: 1;
+  min-width: 0;
  display: flex;
  align-items: center;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 6px 12px;
  color: #475569;
  font-size: 12px;
-  margin-bottom: 12px;
+  line-height: 1.4;
+}
+
+.legend-pill {
+  max-width: 132px;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: #475569;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .chart-legend i {
+  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
-  margin-right: 4px;
+  margin-right: 5px;
  vertical-align: middle;
 }

+.chart-unit {
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.5;
+}
+
 .chart-body {
  flex: 1;
  min-height: 0;
--- a/web/src/components/shared/EnterpriseDetailPage.vue
+++ b/web/src/components/shared/EnterpriseDetailPage.vue
@@ -37,6 +37,10 @@
            <slot name="side"></slot>
          </aside>
        </div>
+
+        <section v-if="$slots.bottom" class="detail-bottom">
+          <slot name="bottom"></slot>
+        </section>
      </template>
    </div>