diff --git a/src/views/Dashboard/Index.vue b/src/views/Dashboard/Index.vue index a342ec4f..55f44ef5 100644 --- a/src/views/Dashboard/Index.vue +++ b/src/views/Dashboard/Index.vue @@ -85,7 +85,7 @@
大帐统计
- +
@@ -171,12 +171,8 @@ const centerRightData = ref({ // 柱状图数据 const barChartData = ref<{ category: string; monthlyStandard: number; perCapita: number }[]>([]) -// 卡片数据 -const barCardData = ref({ - inProgress: 0, - toWarehouse: 0, - outWarehouse: 0 -}) +// 账户余额 +const balance = ref(0) // 基本信息数据 const basicInfo = ref({ @@ -374,14 +370,8 @@ const loadData = async (prisonerId: number) => { // 更新柱状图数据 barChartData.value = res.consumptionMonthlyData || [] - // 更新消费汇总 - if (res.consumptionSummary) { - barCardData.value = { - inProgress: res.consumptionSummary.inProgress || 0, - toWarehouse: res.consumptionSummary.toWarehouse || 0, - outWarehouse: res.consumptionSummary.outWarehouse || 0 - } - } + // 更新账户余额 + balance.value = res.balance || 0 // 更新基本信息 basicInfo.value = { diff --git a/src/views/Dashboard/components/BarChart.vue b/src/views/Dashboard/components/BarChart.vue index 082a5d19..dd626921 100644 --- a/src/views/Dashboard/components/BarChart.vue +++ b/src/views/Dashboard/components/BarChart.vue @@ -1,22 +1,7 @@ @@ -24,7 +9,7 @@ import type { EChartsOption } from 'echarts' // @ts-ignore import EChart from '@/components/Echart/src/Echart.vue' -import { computed, watch } from 'vue' +import { computed, ref, onMounted, watch } from 'vue' defineOptions({ name: 'BarChart' }) @@ -34,49 +19,45 @@ interface ChartDataItem { perCapita: number } -interface CardData { - inProgress: number - toWarehouse: number - outWarehouse: number -} - const props = withDefaults( defineProps<{ - width?: number + width?: number | string height?: string data?: ChartDataItem[] - cardData?: CardData + balance?: number }>(), { - width: 400, - height: '300px', + width: '100%', data: () => [], - cardData: () => ({ - inProgress: 5, - toWarehouse: 5, - outWarehouse: 5 - }) + balance: () => 0 } ) +const containerRef = ref() +const chartRef = ref() + // 创建图表配置 const createChartOption = (): EChartsOption => { const categories = props.data.map((item) => item.category) const monthlyStandardData = props.data.map((item) => item.monthlyStandard ?? 0) const perCapitaData = props.data.map((item) => item.perCapita ?? 0) - // 创建底色数据（最大值50） - const maxValue = 50 - const monthlyStandardBgData = categories.map((_, index) => maxValue - monthlyStandardData[index]) - const perCapitaBgData = categories.map((_, index) => maxValue - perCapitaData[index]) + // 动态计算最大值，确保能够显示所有数据 + const maxDataValue = Math.max(...monthlyStandardData, ...perCapitaData, 100) + // 向上取整到百位，并留出 20% 空间 + const maxValue = Math.ceil(maxDataValue * 1.2 / 100) * 100 + + // 创建底色数据（填充到 maxValue） + const monthlyStandardBgData = categories.map((_, index) => Math.max(0, maxValue - monthlyStandardData[index])) + const perCapitaBgData = categories.map((_, index) => Math.max(0, maxValue - perCapitaData[index])) return { backgroundColor: 'transparent', grid: { - left: '10%', - right: '15%', - top: '20%', - bottom: '15%', + left: '8%', + right: '8%', + top: '25%', + bottom: '18%', containLabel: false }, xAxis: { @@ -100,8 +81,8 @@ const createChartOption = (): EChartsOption => { yAxis: { type: 'value', min: 0, - max: 50, - interval: 10, + max: maxValue, + interval: Math.ceil(maxValue / 5 / 100) * 100, axisLine: { show: false }, @@ -110,7 +91,8 @@ const createChartOption = (): EChartsOption => { }, axisLabel: { color: '#D8F0FF', - fontSize: 10 + fontSize: 10, + formatter: (value: number) => value.toString() }, splitLine: { lineStyle: { @@ -119,17 +101,33 @@ const createChartOption = (): EChartsOption => { } } }, + // 图例和余额放在同一行 legend: { - data: ['支出', '收入'], - top: '5%', - right: '10%', + data: [ + { name: '支出', icon: 'rect' }, + { name: '收入', icon: 'rect' } + ], + top: '3%', + left: '8%', textStyle: { color: '#6D869A', - fontSize: 9 + fontSize: 10 }, - itemWidth: 9, - itemHeight: 9, - itemGap: 25 + itemWidth: 12, + itemHeight: 8, + itemGap: 15 + }, + // 使用 title 显示余额，放在图例右侧 + title: { + text: `账户余额: ${props.balance}元`, + left: 'auto', + right: '8%', + top: '3%', + textStyle: { + color: '#00d4ff', + fontSize: 14, + fontWeight: 'bold' + } }, tooltip: { trigger: 'axis', @@ -144,7 +142,6 @@ const createChartOption = (): EChartsOption => { }, formatter: function (params: any) { let result = params[0].name + '
' - // 只显示数据系列，不显示底色系列 params.forEach((param: any) => { if (param.seriesName === '支出' || param.seriesName === '收入') { result += param.marker + param.seriesName + ': ' + param.value + '
' @@ -154,7 +151,7 @@ const createChartOption = (): EChartsOption => { } }, series: [ - // 支出数据（渐变）- 先绘制，作为底层 + // 支出数据 { name: '支出', type: 'bar', @@ -165,40 +162,36 @@ const createChartOption = (): EChartsOption => { type: 'linear', x: 0, y: 0, - x2: 0, - y2: 1, + x2: 1, + y2: 0, colorStops: [ - { - offset: 0, - color: '#10A0F2' - }, - { - offset: 1, - color: 'rgba(0, 82, 184, 0)' - } + { offset: 0, color: '#10A0F2' }, + { offset: 0.5, color: '#0D8BD9' }, + { offset: 1, color: '#0A6EB0' } ] - } + }, + borderRadius: [2, 2, 0, 0] }, - barWidth: '20%', - barGap: '20%' + barWidth: '25%', + barGap: '30%' }, - // 支出底色 - 后绘制，堆叠在数据上方 + // 支出底色 { name: '支出底色', type: 'bar', stack: 'monthly', data: monthlyStandardBgData, itemStyle: { - color: '#38668D70' + color: 'rgba(56, 102, 141, 0.3)' }, - barWidth: '20%', - barGap: '20%', + barWidth: '25%', + barGap: '30%', silent: true, tooltip: { show: false } }, - // 收入数据（渐变） + // 收入数据 { name: '收入', type: 'bar', @@ -209,33 +202,30 @@ const createChartOption = (): EChartsOption => { type: 'linear', x: 0, y: 0, - x2: 0, - y2: 1, + x2: 1, + y2: 0, colorStops: [ - { - offset: 0, - color: '#FFA58D' - }, - { - offset: 1, - color: 'rgba(87, 140, 205, 0)' - } + { offset: 0, color: '#FFA58D' }, + { offset: 0.5, color: '#E88F5A' }, + { offset: 1, color: '#D07530' } ] - } + }, + borderRadius: [2, 2, 0, 0] }, - barWidth: '20%', - barGap: '80%' + barWidth: '25%', + barGap: '30%' }, + // 收入底色 { name: '收入底色', type: 'bar', stack: 'perCapita', data: perCapitaBgData, itemStyle: { - color: '#38668D70' + color: 'rgba(56, 102, 141, 0.3)' }, - barWidth: '20%', - barGap: '80%', + barWidth: '25%', + barGap: '30%', silent: true, tooltip: { show: false @@ -247,15 +237,6 @@ const createChartOption = (): EChartsOption => { // 柱状图配置 const barOption = computed(() => createChartOption()) - -// 监听数据变化，更新图表 -watch( - () => [props.data, props.cardData], - () => { - // 数据变化时，computed 会自动更新 - }, - { deep: true } -) diff --git a/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue index 9fc27e52..8a74f36d 100644 --- a/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue +++ b/src/views/Dashboard/components/RecentRewardsPunishments/Index.vue @@ -65,7 +65,7 @@ const filteredList = computed(() => { } else if (activeFilter.value === 'reward') { return listData.value.filter((item) => item.type === 'reward') } else { - return listData.value.filter((item) => item.type === 'danger') + return listData.value.filter((item) => item.type === 'punishment') } })