feat: 统一后端分页查询与前端服务层适配
后端新增通用分页模块，为报销单、员工、预算、agent 资产等 端点统一接入分页参数和游标查询，优化 repository 层分页实 现，前端服务层适配分页响应结构，完善预算图表和全局样式， 优化侧边栏和企业选择器组件，引入 Element Plus 插件注册。
This commit is contained in:
caoxiaozhu
@@ -1,24 +1,18 @@
|
||||
<template>
|
||||
<div class="budget-trend-chart">
|
||||
<Bar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
<div ref="chartElement" class="budget-trend-chart" role="img" :aria-label="ariaLabel"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
BarElement,
|
||||
CategoryScale,
|
||||
Legend,
|
||||
LinearScale,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { BarChart as EChartsBarChart } 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'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
|
||||
use([GridComponent, TooltipComponent, EChartsBarChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
labels: { type: Array, required: true },
|
||||
@@ -28,13 +22,7 @@ const props = defineProps({
|
||||
available: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([
|
||||
() => props.labels,
|
||||
() => props.budget,
|
||||
() => props.used,
|
||||
() => props.occupied,
|
||||
() => props.available
|
||||
], 1000)
|
||||
const chartElement = shallowRef(null)
|
||||
const themeColors = useThemeColors()
|
||||
const prefersReducedMotion = () =>
|
||||
typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
|
||||
@@ -54,18 +42,23 @@ const percent = (value, total) => {
|
||||
const percentSeries = (series) =>
|
||||
props.budget.map((total, index) => percent(series[index], total))
|
||||
|
||||
const scaleSeries = (series) =>
|
||||
series.map((value) => Number((Number(value || 0) * progress.value).toFixed(2)))
|
||||
|
||||
const usedPercent = computed(() => percentSeries(props.used))
|
||||
const occupiedPercent = computed(() => percentSeries(props.occupied))
|
||||
const availablePercent = computed(() =>
|
||||
const availableAmountSeries = computed(() =>
|
||||
props.budget.map((total, index) => {
|
||||
const explicitValue = Number(props.available[index])
|
||||
if (Number.isFinite(explicitValue) && explicitValue > 0) {
|
||||
return explicitValue
|
||||
}
|
||||
|
||||
const usedValue = Number(props.used[index] || 0)
|
||||
const occupiedValue = Number(props.occupied[index] || 0)
|
||||
return percent(Math.max(Number(total || 0) - usedValue - occupiedValue, 0), total)
|
||||
return Math.max(Number(total || 0) - usedValue - occupiedValue, 0)
|
||||
})
|
||||
)
|
||||
const availablePercent = computed(() =>
|
||||
props.budget.map((total, index) => percent(availableAmountSeries.value[index], total))
|
||||
)
|
||||
|
||||
const yAxisMax = computed(() => {
|
||||
const maxUsage = Math.max(
|
||||
@@ -75,111 +68,122 @@ const yAxisMax = computed(() => {
|
||||
return Math.ceil(maxUsage / 20) * 20
|
||||
})
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '已使用',
|
||||
data: scaleSeries(usedPercent.value),
|
||||
backgroundColor: themeColors.value.chartPrimary,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.used
|
||||
},
|
||||
{
|
||||
label: '已占用',
|
||||
data: scaleSeries(occupiedPercent.value),
|
||||
backgroundColor: themeColors.value.warning,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.occupied
|
||||
},
|
||||
{
|
||||
label: '剩余可用',
|
||||
data: scaleSeries(availablePercent.value),
|
||||
backgroundColor: '#e5edf3',
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.available
|
||||
}
|
||||
]
|
||||
}))
|
||||
const ariaLabel = computed(() =>
|
||||
props.labels.map((label, index) => (
|
||||
`${label}预算${currency(props.budget[index])}，已使用${usedPercent.value[index] || 0}%，已占用${occupiedPercent.value[index] || 0}%`
|
||||
)).join('；')
|
||||
)
|
||||
|
||||
function buildSeriesData(percentValues, amountValues) {
|
||||
return percentValues.map((value, index) => ({
|
||||
value,
|
||||
amount: Number(amountValues[index] || 0)
|
||||
}))
|
||||
}
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
animation: {
|
||||
duration: prefersReducedMotion() ? 0 : 760,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
grid: {
|
||||
top: 12,
|
||||
right: 16,
|
||||
bottom: 24,
|
||||
left: 34,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#e2e8f0',
|
||||
borderWidth: 1,
|
||||
padding: [10, 12],
|
||||
textStyle: {
|
||||
color: '#475569',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#e2e8f0',
|
||||
borderWidth: 1,
|
||||
bodyColor: '#475569',
|
||||
titleColor: '#0f172a',
|
||||
cornerRadius: 4,
|
||||
padding: 12,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
label(context) {
|
||||
const value = Number(context.parsed.y || 0)
|
||||
const amount = Number(context.dataset.amounts?.[context.dataIndex] || 0)
|
||||
return `${context.dataset.label}: ${value.toFixed(2)}%（¥${currency(amount)}）`
|
||||
},
|
||||
afterBody(items) {
|
||||
const index = items[0]?.dataIndex ?? 0
|
||||
return `预算总额: ¥${currency(props.budget[index])}`
|
||||
}
|
||||
}
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
|
||||
formatter(params = []) {
|
||||
const items = Array.isArray(params) ? params : [params]
|
||||
const index = Number(items[0]?.dataIndex || 0)
|
||||
const lines = items.map((item) => {
|
||||
const percentValue = Number(item?.value || 0).toFixed(2)
|
||||
const amount = currency(item?.data?.amount || 0)
|
||||
return `${item.marker}${item.seriesName}: ${percentValue}%（¥${amount}）`
|
||||
})
|
||||
return [`${items[0]?.axisValue || ''}`, ...lines, `预算总额: ¥${currency(props.budget[index])}`].join('<br/>')
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 12 }
|
||||
},
|
||||
border: { display: false }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: yAxisMax.value,
|
||||
stacked: true,
|
||||
grid: {
|
||||
color: '#edf2f7',
|
||||
drawTicks: false
|
||||
},
|
||||
border: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 12 },
|
||||
stepSize: 20,
|
||||
callback(value) {
|
||||
return `${Number(value)}%`
|
||||
}
|
||||
}
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.labels,
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#64748b',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
}
|
||||
},
|
||||
datasets: {
|
||||
bar: {
|
||||
categoryPercentage: 0.58,
|
||||
barPercentage: 0.72
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisMax.value,
|
||||
splitNumber: Math.max(1, Math.ceil(yAxisMax.value / 20)),
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#64748b',
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
formatter: (value) => `${Number(value)}%`
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#edf2f7' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '已使用',
|
||||
type: 'bar',
|
||||
stack: 'budgetUsage',
|
||||
data: buildSeriesData(usedPercent.value, props.used),
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
color: themeColors.value.chartPrimary,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '已占用',
|
||||
type: 'bar',
|
||||
stack: 'budgetUsage',
|
||||
data: buildSeriesData(occupiedPercent.value, props.occupied),
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
color: themeColors.value.warning,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '剩余可用',
|
||||
type: 'bar',
|
||||
stack: 'budgetUsage',
|
||||
data: buildSeriesData(availablePercent.value, availableAmountSeries.value),
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
color: '#e5edf3',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
useEcharts(chartElement, chartOptions)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user