财务门户设计
This commit is contained in:
238
web-vue/packages/erp/views/erp/erpInc/account/list.vue
Normal file
238
web-vue/packages/erp/views/erp/erpInc/account/list.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||||
<span> {{ getTitle.value }} </span>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<a-button type="default" :loading="loading" @click="handleExport()">
|
||||
<Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsErpAccountCycleList">
|
||||
import { onMounted, ref, unref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { downloadByUrl } from '@jeesite/core/utils/file/download';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import { ErpAccountCycle, erpAccountCycleList } from '@jeesite/erp/api/erp/accountCycle';
|
||||
import { erpAccountCycleDelete, erpAccountCycleListData } from '@jeesite/erp/api/erp/accountCycle';
|
||||
import { useDrawer } from '@jeesite/core/components/Drawer';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
|
||||
const { t } = useI18n('erp.accountCycle');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<ErpAccountCycle>({} as ErpAccountCycle);
|
||||
|
||||
const getTitle = {
|
||||
icon: meta.icon || 'i-ant-design:book-outlined',
|
||||
value: meta.title || t('账户分析管理'),
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm: FormProps<ErpAccountCycle> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('交易账户'),
|
||||
field: 'accountId',
|
||||
fieldLabel: 'accountName',
|
||||
component: 'ListSelect',
|
||||
componentProps: {
|
||||
selectType: 'erpAccountSelect',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('交易类型'),
|
||||
field: 'transactionType',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
dictType: 'transaction_type',
|
||||
allowClear: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('年度'),
|
||||
field: 'yearDate',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<ErpAccountCycle>[] = [
|
||||
{
|
||||
title: t('交易账户'),
|
||||
dataIndex: 'accountName',
|
||||
key: 'b.account_name',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('交易类型'),
|
||||
dataIndex: 'transactionType',
|
||||
key: 'a.transaction_type',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
align: 'left',
|
||||
dictType: 'transaction_type',
|
||||
},
|
||||
{
|
||||
title: t('年度'),
|
||||
dataIndex: 'yearDate',
|
||||
key: 'a.year_date',
|
||||
sorter: true,
|
||||
width: 80,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('01月'),
|
||||
dataIndex: 'amount01',
|
||||
key: 'a.amount_01',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('02月'),
|
||||
dataIndex: 'amount02',
|
||||
key: 'a.amount_02',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('03月'),
|
||||
dataIndex: 'amount03',
|
||||
key: 'a.amount_03',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('04月'),
|
||||
dataIndex: 'amount04',
|
||||
key: 'a.amount_04',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('05月'),
|
||||
dataIndex: 'amount05',
|
||||
key: 'a.amount_05',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('06月'),
|
||||
dataIndex: 'amount06',
|
||||
key: 'a.amount_06',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('07月'),
|
||||
dataIndex: 'amount07',
|
||||
key: 'a.amount_07',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('08月'),
|
||||
dataIndex: 'amount08',
|
||||
key: 'a.amount_08',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('09月'),
|
||||
dataIndex: 'amount09',
|
||||
key: 'a.amount_09',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('10月'),
|
||||
dataIndex: 'amount10',
|
||||
key: 'a.amount_10',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('11月'),
|
||||
dataIndex: 'amount11',
|
||||
key: 'a.amount_11',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('12月'),
|
||||
dataIndex: 'amount12',
|
||||
key: 'a.amount_12',
|
||||
sorter: true,
|
||||
width: 60,
|
||||
align: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<ErpAccountCycle>({
|
||||
api: erpAccountCycleListData,
|
||||
beforeFetch: (params) => {
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await erpAccountCycleList();
|
||||
record.value = (res.erpAccountCycle || {}) as ErpAccountCycle;
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
openDrawer(true, record);
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
loading.value = true;
|
||||
const { ctxAdminPath } = useGlobSetting();
|
||||
await downloadByUrl({
|
||||
url: ctxAdminPath + '/erp/accountCycle/exportData',
|
||||
params: getForm().getFieldsValue(),
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
512
web-vue/packages/erp/views/erp/green/components/ChartAccount.vue
Normal file
512
web-vue/packages/erp/views/erp/green/components/ChartAccount.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<Card title="年度账户收支情况" style="width: 100%; height: 100%;">
|
||||
<template #extra>
|
||||
<div class="status-filter-container">
|
||||
<div class="status-filter">
|
||||
<span
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:class="['status-item', { active: currentStatus === item.value }]"
|
||||
@click="handleStatusChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { erpAccountIncomeExpenseListAll } from '@jeesite/erp/api/erp/accountIncomeExpense';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const statusOptions = ref([
|
||||
{ value: String(currentYear), label: '今年' },
|
||||
{ value: String(currentYear - 1), label: '去年' },
|
||||
]);
|
||||
|
||||
const currentStatus = ref<string>(String(currentYear));
|
||||
|
||||
const handleStatusChange = (status: string) => {
|
||||
if (currentStatus.value === status) return;
|
||||
currentStatus.value = status;
|
||||
fetchList();
|
||||
};
|
||||
|
||||
interface ErpIncExpRatio {
|
||||
incomeAmount?: number | string;
|
||||
expenseAmount?: number | string;
|
||||
accountName?: string;
|
||||
}
|
||||
|
||||
const rawData = ref<ErpIncExpRatio[]>([]);
|
||||
const chartDom = ref<HTMLDivElement | null>(null);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const formatNumber = (num: number | string | undefined, decimal = 2): number => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return 0;
|
||||
return Number(parsed.toFixed(decimal));
|
||||
};
|
||||
|
||||
const toTenThousandYuan = (num: number | string | undefined): number => {
|
||||
const rawNum = formatNumber(num);
|
||||
return formatNumber(rawNum / 10000);
|
||||
};
|
||||
|
||||
const formatWithThousandsSeparator = (num: number | string | undefined): string => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return '0.00';
|
||||
return parsed.toLocaleString('zh-CN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
};
|
||||
|
||||
const calculateNetProfit = (income: number | string | undefined, expense: number | string | undefined): number => {
|
||||
const incomeNum = formatNumber(income);
|
||||
const expenseNum = formatNumber(expense);
|
||||
return formatNumber(incomeNum - expenseNum);
|
||||
};
|
||||
|
||||
const sortByCategory = (data: ErpIncExpRatio[]): ErpIncExpRatio[] => {
|
||||
return data.sort((a, b) => {
|
||||
const nameA = a.accountName || '';
|
||||
const nameB = b.accountName || '';
|
||||
return nameA.localeCompare(nameB, 'zh-CN');
|
||||
});
|
||||
};
|
||||
|
||||
const barLabelConfig = {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 3,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
color: '#333',
|
||||
fontWeight: '500'
|
||||
},
|
||||
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)}`
|
||||
};
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const params = {
|
||||
yearDate: currentStatus.value
|
||||
}
|
||||
const result = await erpAccountIncomeExpenseListAll(params);
|
||||
const validData = (result || [])
|
||||
.filter(item => item.accountName)
|
||||
.map(item => ({
|
||||
monthDate: item.monthDate,
|
||||
accountName: item.accountName,
|
||||
incomeAmount: formatNumber(item.incomeAmount),
|
||||
expenseAmount: formatNumber(item.expenseAmount)
|
||||
})) as ErpIncExpRatio[];
|
||||
rawData.value = sortByCategory(validData);
|
||||
} catch (error) {
|
||||
console.error('获取数据列表失败：', error);
|
||||
rawData.value = [];
|
||||
} finally {
|
||||
initChart();
|
||||
}
|
||||
};
|
||||
|
||||
const calculateYAxisExtent = (data: number[]) => {
|
||||
if (data.length === 0) return [0, 10];
|
||||
|
||||
const formattedData = data.map(num => formatNumber(num));
|
||||
const min = Math.min(...formattedData);
|
||||
const max = Math.max(...formattedData);
|
||||
|
||||
const padding = Math.max((max - min) * 0.1, 1);
|
||||
|
||||
let minExtent = min - padding;
|
||||
let maxExtent = max + padding;
|
||||
|
||||
if (minExtent > 0) minExtent = 0;
|
||||
if (maxExtent < 0) maxExtent = 0;
|
||||
|
||||
return [minExtent, maxExtent];
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartDom.value) return;
|
||||
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
}
|
||||
|
||||
myChart = echarts.init(chartDom.value);
|
||||
|
||||
if (rawData.value.length === 0) {
|
||||
myChart.setOption({
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: { data: ['收入', '支出'], top: 10, textStyle: { fontSize: 12 } },
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
series: [],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无收入支出数据',
|
||||
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
|
||||
position: 'center',
|
||||
effect: 'none'
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const xAxisData = rawData.value.map(item => item.accountName || '').filter(Boolean);
|
||||
const incomeData = rawData.value.map(item => toTenThousandYuan(item.incomeAmount));
|
||||
const expenseData = rawData.value.map(item => toTenThousandYuan(item.expenseAmount));
|
||||
|
||||
const amountData = [...incomeData, ...expenseData];
|
||||
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontSize: 12 },
|
||||
padding: 12,
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e8e8e8',
|
||||
borderWidth: 1,
|
||||
formatter: (params: any[]) => {
|
||||
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
|
||||
|
||||
const currentCategory = params[0]?.axisValue || '';
|
||||
const item = rawData.value.find(i => i.accountName === currentCategory);
|
||||
|
||||
if (!item) return `<div style="padding: 8px;">${currentCategory}：暂无明细</div>`;
|
||||
|
||||
const netProfit = calculateNetProfit(item.incomeAmount, item.expenseAmount);
|
||||
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
|
||||
|
||||
return `
|
||||
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentCategory}</div>
|
||||
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
|
||||
<thead>
|
||||
<tr style="background-color: #f8f8f8;">
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.incomeAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.expenseAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '支出'],
|
||||
top: 10,
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 11 }
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2,
|
||||
margin: 8
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
min: amountMin,
|
||||
max: amountMax,
|
||||
axisLine: { onZero: true },
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无数据',
|
||||
textStyle: { fontSize: 14, color: '#999' },
|
||||
effect: 'bubble',
|
||||
effectOption: { effect: { n: 0 } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: incomeData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#1890ff' },
|
||||
{ offset: 0, color: '#096dd9' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
barGap: '30%',
|
||||
barCategoryGap: '20%',
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#40a9ff' },
|
||||
{ offset: 1, color: '#1890ff' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
data: expenseData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#f5222d' },
|
||||
{ offset: 1, color: '#cf1322' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#ff4d4f' },
|
||||
{ offset: 1, color: '#f5222d' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animationDuration: 500,
|
||||
animationEasingUpdate: 'quinticInOut'
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
const resizeChart = () => {
|
||||
if (myChart) {
|
||||
myChart.resize({
|
||||
animation: {
|
||||
duration: 300,
|
||||
easing: 'quadraticInOut'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let resizeTimer: number;
|
||||
const debounceResize = () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = window.setTimeout(resizeChart, 100);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchList();
|
||||
window.addEventListener('resize', debounceResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', debounceResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
|
||||
watch(rawData, () => {
|
||||
initChart();
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.status-item.active {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.status-item:not(.active):hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card:hover) {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e8e8e8 !important;
|
||||
max-width: 450px;
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:deep(.echarts-xaxis-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
:deep(.echarts-yaxis-name) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend-item) {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
:deep(.echarts-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<Card title="年度分类收支情况" style="width: 100%; height: 100%;">
|
||||
<template #extra>
|
||||
<div class="status-filter-container">
|
||||
<div class="status-filter">
|
||||
<span
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:class="['status-item', { active: currentStatus === item.value }]"
|
||||
@click="handleStatusChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { erpCategoryIncomeExpenseListAll } from '@jeesite/erp/api/erp/categoryIncomeExpense';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const statusOptions = ref([
|
||||
{ value: String(currentYear), label: '今年' },
|
||||
{ value: String(currentYear - 1), label: '去年' },
|
||||
]);
|
||||
|
||||
const currentStatus = ref<string>(String(currentYear));
|
||||
|
||||
const handleStatusChange = (status: string) => {
|
||||
if (currentStatus.value === status) return;
|
||||
currentStatus.value = status;
|
||||
fetchList();
|
||||
};
|
||||
|
||||
interface ErpIncExpRatio {
|
||||
incomeAmount?: number | string;
|
||||
expenseAmount?: number | string;
|
||||
categoryName?: string;
|
||||
}
|
||||
|
||||
const rawData = ref<ErpIncExpRatio[]>([]);
|
||||
const chartDom = ref<HTMLDivElement | null>(null);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const formatNumber = (num: number | string | undefined, decimal = 2): number => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return 0;
|
||||
return Number(parsed.toFixed(decimal));
|
||||
};
|
||||
|
||||
const toTenThousandYuan = (num: number | string | undefined): number => {
|
||||
const rawNum = formatNumber(num);
|
||||
return formatNumber(rawNum / 10000);
|
||||
};
|
||||
|
||||
const formatWithThousandsSeparator = (num: number | string | undefined): string => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return '0.00';
|
||||
return parsed.toLocaleString('zh-CN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
};
|
||||
|
||||
const calculateNetProfit = (income: number | string | undefined, expense: number | string | undefined): number => {
|
||||
const incomeNum = formatNumber(income);
|
||||
const expenseNum = formatNumber(expense);
|
||||
return formatNumber(incomeNum - expenseNum);
|
||||
};
|
||||
|
||||
const sortByCategory = (data: ErpIncExpRatio[]): ErpIncExpRatio[] => {
|
||||
return data.sort((a, b) => {
|
||||
const nameA = a.categoryName || '';
|
||||
const nameB = b.categoryName || '';
|
||||
return nameA.localeCompare(nameB, 'zh-CN');
|
||||
});
|
||||
};
|
||||
|
||||
const barLabelConfig = {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 3,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
color: '#333',
|
||||
fontWeight: '500'
|
||||
},
|
||||
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)}`
|
||||
};
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const params = {
|
||||
yearDate: currentStatus.value
|
||||
}
|
||||
const result = await erpCategoryIncomeExpenseListAll(params);
|
||||
const validData = (result || [])
|
||||
.filter(item => item.categoryName)
|
||||
.map(item => ({
|
||||
monthDate: item.monthDate,
|
||||
categoryName: item.categoryName,
|
||||
incomeAmount: formatNumber(item.incomeAmount),
|
||||
expenseAmount: formatNumber(item.expenseAmount)
|
||||
})) as ErpIncExpRatio[];
|
||||
rawData.value = sortByCategory(validData);
|
||||
} catch (error) {
|
||||
console.error('获取数据列表失败：', error);
|
||||
rawData.value = [];
|
||||
} finally {
|
||||
initChart();
|
||||
}
|
||||
};
|
||||
|
||||
const calculateYAxisExtent = (data: number[]) => {
|
||||
if (data.length === 0) return [0, 10];
|
||||
|
||||
const formattedData = data.map(num => formatNumber(num));
|
||||
const min = Math.min(...formattedData);
|
||||
const max = Math.max(...formattedData);
|
||||
|
||||
const padding = Math.max((max - min) * 0.1, 1);
|
||||
|
||||
let minExtent = min - padding;
|
||||
let maxExtent = max + padding;
|
||||
|
||||
if (minExtent > 0) minExtent = 0;
|
||||
if (maxExtent < 0) maxExtent = 0;
|
||||
|
||||
return [minExtent, maxExtent];
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartDom.value) return;
|
||||
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
}
|
||||
|
||||
myChart = echarts.init(chartDom.value);
|
||||
|
||||
if (rawData.value.length === 0) {
|
||||
myChart.setOption({
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: { data: ['收入', '支出'], top: 10, textStyle: { fontSize: 12 } },
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
series: [],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无收入支出数据',
|
||||
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
|
||||
position: 'center',
|
||||
effect: 'none'
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const xAxisData = rawData.value.map(item => item.categoryName || '').filter(Boolean);
|
||||
const incomeData = rawData.value.map(item => toTenThousandYuan(item.incomeAmount));
|
||||
const expenseData = rawData.value.map(item => toTenThousandYuan(item.expenseAmount));
|
||||
|
||||
const amountData = [...incomeData, ...expenseData];
|
||||
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontSize: 12 },
|
||||
padding: 12,
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e8e8e8',
|
||||
borderWidth: 1,
|
||||
formatter: (params: any[]) => {
|
||||
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
|
||||
|
||||
const currentCategory = params[0]?.axisValue || '';
|
||||
const item = rawData.value.find(i => i.categoryName === currentCategory);
|
||||
|
||||
if (!item) return `<div style="padding: 8px;">${currentCategory}：暂无明细</div>`;
|
||||
|
||||
const netProfit = calculateNetProfit(item.incomeAmount, item.expenseAmount);
|
||||
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
|
||||
|
||||
return `
|
||||
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentCategory}</div>
|
||||
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
|
||||
<thead>
|
||||
<tr style="background-color: #f8f8f8;">
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.incomeAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.expenseAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '支出'],
|
||||
top: 10,
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 11 }
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2,
|
||||
margin: 8
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
min: amountMin,
|
||||
max: amountMax,
|
||||
axisLine: { onZero: true },
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无数据',
|
||||
textStyle: { fontSize: 14, color: '#999' },
|
||||
effect: 'bubble',
|
||||
effectOption: { effect: { n: 0 } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: incomeData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#1890ff' },
|
||||
{ offset: 1, color: '#096dd9' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
barGap: '30%',
|
||||
barCategoryGap: '20%',
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#40a9ff' },
|
||||
{ offset: 1, color: '#1890ff' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
data: expenseData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#f5222d' },
|
||||
{ offset: 1, color: '#cf1322' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#ff4d4f' },
|
||||
{ offset: 1, color: '#f5222d' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animationDuration: 500,
|
||||
animationEasingUpdate: 'quinticInOut'
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
const resizeChart = () => {
|
||||
if (myChart) {
|
||||
myChart.resize({
|
||||
animation: {
|
||||
duration: 300,
|
||||
easing: 'quadraticInOut'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let resizeTimer: number;
|
||||
const debounceResize = () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = window.setTimeout(resizeChart, 100);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchList();
|
||||
window.addEventListener('resize', debounceResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', debounceResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
|
||||
watch(rawData, () => {
|
||||
initChart();
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.status-item.active {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.status-item:not(.active):hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card:hover) {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e8e8e8 !important;
|
||||
max-width: 450px;
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:deep(.echarts-xaxis-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
:deep(.echarts-yaxis-name) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend-item) {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
:deep(.echarts-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
524
web-vue/packages/erp/views/erp/green/components/ChartLine.vue
Normal file
524
web-vue/packages/erp/views/erp/green/components/ChartLine.vue
Normal file
@@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<Card title="年度各月收支情况" style="width: 100%; height: 100%;">
|
||||
<template #extra>
|
||||
<div class="status-filter-container">
|
||||
<div class="status-filter">
|
||||
<span
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:class="['status-item', { active: currentStatus === item.value }]"
|
||||
@click="handleStatusChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="chartDom" style="width: 100%; height: 100%;"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { erpIncomeExpenseCycleListAll } from '@jeesite/erp/api/erp/incomeExpenseCycle';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const statusOptions = ref([
|
||||
{ value: String(currentYear), label: '今年' },
|
||||
{ value: String(currentYear - 1), label: '去年' },
|
||||
]);
|
||||
|
||||
const currentStatus = ref<string>(String(currentYear));
|
||||
|
||||
const handleStatusChange = (status: string) => {
|
||||
if (currentStatus.value === status) return;
|
||||
currentStatus.value = status;
|
||||
fetchList();
|
||||
};
|
||||
|
||||
interface ErpIncExpRatio {
|
||||
monthDate?: string;
|
||||
incomeAmount?: number | string;
|
||||
expenseAmount?: number | string;
|
||||
}
|
||||
|
||||
const rawData = ref<ErpIncExpRatio[]>([]);
|
||||
const chartDom = ref<HTMLDivElement | null>(null);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const formatNumber = (num: number | string | undefined, decimal = 2): number => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return 0;
|
||||
return Number(parsed.toFixed(decimal));
|
||||
};
|
||||
|
||||
const toTenThousandYuan = (num: number | string | undefined): number => {
|
||||
const rawNum = formatNumber(num);
|
||||
return formatNumber(rawNum / 10000);
|
||||
};
|
||||
|
||||
const formatWithThousandsSeparator = (num: number | string | undefined): string => {
|
||||
const parsed = Number(num);
|
||||
if (isNaN(parsed)) return '0.00';
|
||||
return parsed.toLocaleString('zh-CN', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
};
|
||||
|
||||
const calculateNetProfit = (income: number | string | undefined, expense: number | string | undefined): number => {
|
||||
const incomeNum = formatNumber(income);
|
||||
const expenseNum = formatNumber(expense);
|
||||
return formatNumber(incomeNum - expenseNum);
|
||||
};
|
||||
|
||||
const formatDate = (date: string | undefined): string => {
|
||||
if (!date) return '';
|
||||
return date.replace(/\//g, '-').trim();
|
||||
};
|
||||
|
||||
const sortDates = (data: ErpIncExpRatio[]): ErpIncExpRatio[] => {
|
||||
return data.sort((a, b) => {
|
||||
const dateA = new Date(a.monthDate || '');
|
||||
const dateB = new Date(b.monthDate || '');
|
||||
return dateA.getTime() - dateB.getTime();
|
||||
});
|
||||
};
|
||||
|
||||
const barLabelConfig = {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 3,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
color: '#333',
|
||||
fontWeight: '500'
|
||||
},
|
||||
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)}`
|
||||
};
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const params = {
|
||||
yearDate: currentStatus.value
|
||||
}
|
||||
const result = await erpIncomeExpenseCycleListAll(params);
|
||||
const validData = (result || [])
|
||||
.filter(item => item.monthDate)
|
||||
.map(item => ({
|
||||
monthDate: formatDate(item.monthDate),
|
||||
incomeAmount: formatNumber(item.incomeAmount),
|
||||
expenseAmount: formatNumber(item.expenseAmount)
|
||||
})) as ErpIncExpRatio[];
|
||||
rawData.value = sortDates(validData);
|
||||
} catch (error) {
|
||||
console.error('获取数据列表失败：', error);
|
||||
rawData.value = [];
|
||||
} finally {
|
||||
initChart();
|
||||
}
|
||||
};
|
||||
|
||||
const calculateYAxisExtent = (data: number[]) => {
|
||||
if (data.length === 0) return [0, 10];
|
||||
|
||||
const formattedData = data.map(num => formatNumber(num));
|
||||
const min = Math.min(...formattedData);
|
||||
const max = Math.max(...formattedData);
|
||||
|
||||
const padding = Math.max((max - min) * 0.1, 1);
|
||||
|
||||
let minExtent = min - padding;
|
||||
let maxExtent = max + padding;
|
||||
|
||||
if (minExtent > 0) minExtent = 0;
|
||||
if (maxExtent < 0) maxExtent = 0;
|
||||
|
||||
return [minExtent, maxExtent];
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartDom.value) return;
|
||||
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
}
|
||||
|
||||
myChart = echarts.init(chartDom.value);
|
||||
|
||||
if (rawData.value.length === 0) {
|
||||
myChart.setOption({
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: { data: ['收入', '支出'], top: 10, textStyle: { fontSize: 12 } },
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
series: [],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无收入支出数据',
|
||||
textStyle: { fontSize: 16, color: '#666', fontWeight: '500' },
|
||||
position: 'center',
|
||||
effect: 'none'
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const xAxisData = rawData.value.map(item => {
|
||||
const dateStr = item.monthDate || '';
|
||||
const monthMatch = dateStr.match(/(\d{1,2})$/);
|
||||
return monthMatch ? `${monthMatch[1]}月` : dateStr;
|
||||
}).filter(Boolean);
|
||||
|
||||
const incomeData = rawData.value.map(item => toTenThousandYuan(item.incomeAmount));
|
||||
const expenseData = rawData.value.map(item => toTenThousandYuan(item.expenseAmount));
|
||||
|
||||
const amountData = [...incomeData, ...expenseData];
|
||||
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 18, color: '#333' }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontSize: 12 },
|
||||
padding: 12,
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e8e8e8',
|
||||
borderWidth: 1,
|
||||
formatter: (params: any[]) => {
|
||||
if (!params || params.length === 0) return '<div style="padding: 8px;">暂无数据</div>';
|
||||
|
||||
const currentDate = params[0]?.axisValue || '';
|
||||
const item = rawData.value.find(i => {
|
||||
const monthMatch = (i.monthDate || '').match(/(\d{1,2})$/);
|
||||
return monthMatch && `${monthMatch[1]}月` === currentDate;
|
||||
});
|
||||
|
||||
if (!item) return `<div style="padding: 8px;">${currentDate}：暂无明细</div>`;
|
||||
|
||||
const netProfit = calculateNetProfit(item.incomeAmount, item.expenseAmount);
|
||||
const netProfitColor = netProfit > 0 ? '#52c41a' : netProfit < 0 ? '#f5222d' : '#666';
|
||||
|
||||
return `
|
||||
<div style="font-weight: 600; color: #333; margin-bottom: 8px; text-align: center;">${currentDate}</div>
|
||||
<table style="width: 100%; border-collapse: collapse; font-size: 11px; min-width: 400px; margin-bottom: 8px;">
|
||||
<thead>
|
||||
<tr style="background-color: #f8f8f8;">
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总收入</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">总支出</th>
|
||||
<th style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; font-weight: 600;">净收益</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #1890ff;">${formatWithThousandsSeparator(item.incomeAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: #f5222d;">${formatWithThousandsSeparator(item.expenseAmount)} 元</td>
|
||||
<td style="padding: 8px; border: 1px solid #e8e8e8; text-align: center; color: ${netProfitColor};">${formatWithThousandsSeparator(netProfit)} 元</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '支出'],
|
||||
top: 10,
|
||||
left: 'center',
|
||||
textStyle: { fontSize: 11 }
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
overflow: 'truncate',
|
||||
width: 60,
|
||||
lineHeight: 1.2,
|
||||
margin: 8
|
||||
},
|
||||
axisLine: { onZero: true },
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
length: 3
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额（万元）',
|
||||
nameTextStyle: { fontSize: 11 },
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
formatter: (value: number) => formatNumber(value).toFixed(2)
|
||||
},
|
||||
min: amountMin,
|
||||
max: amountMax,
|
||||
axisLine: { onZero: true },
|
||||
splitLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisTick: { alignWithLabel: true },
|
||||
splitNumber: 5,
|
||||
scale: true
|
||||
}
|
||||
],
|
||||
noDataLoadingOption: {
|
||||
text: '暂无数据',
|
||||
textStyle: { fontSize: 14, color: '#999' },
|
||||
effect: 'bubble',
|
||||
effectOption: { effect: { n: 0 } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: incomeData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#1890ff' },
|
||||
{ offset: 1, color: '#096dd9' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
barGap: '30%',
|
||||
barCategoryGap: '20%',
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#40a9ff' },
|
||||
{ offset: 1, color: '#1890ff' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
data: expenseData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#f5222d' },
|
||||
{ offset: 1, color: '#cf1322' }
|
||||
]),
|
||||
borderRadius: [6, 6, 0, 0]
|
||||
},
|
||||
barWidth: 12,
|
||||
label: barLabelConfig,
|
||||
yAxisIndex: 0,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#ff4d4f' },
|
||||
{ offset: 1, color: '#f5222d' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animationDuration: 500,
|
||||
animationEasingUpdate: 'quinticInOut'
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
const resizeChart = () => {
|
||||
if (myChart) {
|
||||
myChart.resize({
|
||||
animation: {
|
||||
duration: 300,
|
||||
easing: 'quadraticInOut'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let resizeTimer: number;
|
||||
const debounceResize = () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = window.setTimeout(resizeChart, 100);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchList();
|
||||
window.addEventListener('resize', debounceResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', debounceResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
|
||||
watch(rawData, () => {
|
||||
initChart();
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.status-item.active {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.status-item:not(.active):hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card:hover) {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #e8e8e8 !important;
|
||||
max-width: 450px;
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
:deep(.echarts-xaxis-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
:deep(.echarts-yaxis-name) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend-item) {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
:deep(.echarts-label) {
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar) {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-thumb) {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip::-webkit-scrollbar-track) {
|
||||
background: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
506
web-vue/packages/erp/views/erp/green/components/ChartPie.vue
Normal file
506
web-vue/packages/erp/views/erp/green/components/ChartPie.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<Card title="账户余额" class="account-balance-card">
|
||||
<template #extra>
|
||||
<div class="total-amount">
|
||||
总金额：<span class="amount-value">{{ totalAmountText }}</span> 元
|
||||
</div>
|
||||
</template>
|
||||
<div class="layout-container">
|
||||
<div class="left-panel">
|
||||
<div class="stat-card">
|
||||
<span class="stat-title">本年收入</span>
|
||||
<div class="stat-content">
|
||||
<Icon icon="icons/erp-income.png" size="28"/>
|
||||
<span class="stat-value">{{ thisIncome }} 元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-title">本年支出</span>
|
||||
<div class="stat-content">
|
||||
<Icon icon="icons/erp-expense.png" size="28"/>
|
||||
<span class="stat-value">{{ thisExpense }} 元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-title">消费占比</span>
|
||||
<div class="stat-content">
|
||||
<Icon icon="icons/erp-share.png" size="28"/>
|
||||
<span class="stat-value">{{ thisShare }} %</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div ref="chartDom" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { erpAccountListAll } from '@jeesite/erp/api/erp/account';
|
||||
import { erpIncExpRatioListAll } from '@jeesite/erp/api/erp/incExpRatio';
|
||||
import * as echarts from 'echarts';
|
||||
import type { ECharts, EChartsOption } from 'echarts';
|
||||
|
||||
// 核心：初始化时明确赋值，避免null
|
||||
const listAccount = ref<any[]>([]);
|
||||
const chartDom = ref<HTMLDivElement | null>(null);
|
||||
let myChart: ECharts | null = null;
|
||||
let resizeTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
const thisIncome = ref(0);
|
||||
const thisExpense = ref(0);
|
||||
const thisShare = ref(0);
|
||||
|
||||
const allLegendNames = ref<string[]>([]);
|
||||
const selectedMap = ref<Record<string, boolean>>({});
|
||||
|
||||
// 总金额计算（增加空值防护）
|
||||
const totalAmountText = computed(() => {
|
||||
if (!listAccount.value.length) return '0.00';
|
||||
|
||||
let total = 0;
|
||||
listAccount.value.forEach(item => {
|
||||
const name = item.accountName || '未知账户';
|
||||
// 未显式取消的都算选中
|
||||
if (selectedMap.value[name] !== false) {
|
||||
total += Number(item.currentBalance || 0);
|
||||
}
|
||||
});
|
||||
return total.toFixed(2);
|
||||
});
|
||||
|
||||
// 百分比格式化（增强容错）
|
||||
const formatPercent = (value: number) => {
|
||||
const parsed = Number(value);
|
||||
if (isNaN(parsed) || !isFinite(parsed)) return '0.0%';
|
||||
return `${parsed.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
// 颜色生成（简化逻辑）
|
||||
const generateRandomColors = (count: number): string[] => {
|
||||
const colorLibrary = [
|
||||
'#1890ff', '#52c41a', '#f5a623', '#fa8c16', '#722ed1', '#eb2f96',
|
||||
'#13c2c2', '#2f54eb', '#f7ba1e', '#f5222d', '#8543e0', '#0fc6c2',
|
||||
'#7cb305', '#ff7a45', '#ff4d4f', '#6b778c', '#5d7092', '#91d5ff'
|
||||
];
|
||||
|
||||
if (count <= colorLibrary.length) {
|
||||
return colorLibrary.slice(0, count);
|
||||
}
|
||||
|
||||
const colors = [...colorLibrary];
|
||||
while (colors.length < count) {
|
||||
const hue = Math.floor(Math.random() * 360);
|
||||
colors.push(`hsl(${hue}, 75%, 55%)`);
|
||||
}
|
||||
return colors;
|
||||
};
|
||||
|
||||
// 获取本年收支数据（增加错误捕获）
|
||||
const getThisData = async () => {
|
||||
try {
|
||||
const year = new Date().getFullYear();
|
||||
const res = await erpIncExpRatioListAll({ cycleType: 'Y', statDate: year });
|
||||
thisIncome.value = Number(res?.[0]?.incomeAmount) || 0;
|
||||
thisExpense.value = Number(res?.[0]?.expenseAmount) || 0;
|
||||
thisShare.value = Number(res?.[0]?.expenseRatio) || 0;
|
||||
} catch (error) {
|
||||
console.error('获取收支数据失败：', error);
|
||||
thisIncome.value = 0;
|
||||
thisExpense.value = 0;
|
||||
thisShare.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取账户列表（增加错误捕获）
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const res = await erpAccountListAll();
|
||||
listAccount.value = res || [];
|
||||
} catch (error) {
|
||||
console.error('获取账户列表失败：', error);
|
||||
listAccount.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表（核心修复：全链路null防护）
|
||||
const initChart = () => {
|
||||
// 1. 先检查DOM是否存在
|
||||
if (!chartDom.value) {
|
||||
console.warn('图表容器DOM不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 安全销毁旧实例
|
||||
if (myChart) {
|
||||
try {
|
||||
myChart.off('legendselectchanged'); // 先解绑事件
|
||||
myChart.dispose();
|
||||
} catch (e) {
|
||||
console.warn('销毁旧图表实例失败：', e);
|
||||
}
|
||||
myChart = null;
|
||||
}
|
||||
|
||||
try {
|
||||
// 3. 重新创建实例（强制指定尺寸）
|
||||
myChart = echarts.init(chartDom.value, undefined, {
|
||||
width: chartDom.value.clientWidth || 'auto',
|
||||
height: chartDom.value.clientHeight || 'auto'
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('创建图表实例失败：', e);
|
||||
myChart = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 空数据处理（避免操作null实例）
|
||||
if (!listAccount.value.length) {
|
||||
const emptyOption: EChartsOption = {
|
||||
title: {
|
||||
text: '暂无账户数据',
|
||||
left: 'center',
|
||||
top: 'middle',
|
||||
textStyle: { fontSize: 14, color: '#999' }
|
||||
},
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { show: false },
|
||||
series: []
|
||||
};
|
||||
myChart.setOption(emptyOption);
|
||||
return;
|
||||
}
|
||||
|
||||
// 5. 处理有效数据
|
||||
const pieData = listAccount.value
|
||||
.map(item => ({
|
||||
name: item.accountName || '未知账户',
|
||||
value: Number(item.currentBalance) || 0
|
||||
}))
|
||||
.filter(item => item.value > 0 && item.name); // 过滤空名称和0值
|
||||
|
||||
// 6. 再次空数据检查
|
||||
if (!pieData.length) {
|
||||
const emptyOption: EChartsOption = {
|
||||
title: {
|
||||
text: '暂无有效账户金额数据',
|
||||
left: 'center',
|
||||
top: 'middle',
|
||||
textStyle: { fontSize: 14, color: '#999' }
|
||||
},
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { show: false },
|
||||
series: []
|
||||
};
|
||||
myChart.setOption(emptyOption);
|
||||
return;
|
||||
}
|
||||
|
||||
// 7. 准备图表数据
|
||||
allLegendNames.value = pieData.map(p => p.name);
|
||||
const colors = generateRandomColors(pieData.length);
|
||||
const total = pieData.reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
// 8. 构建选中状态映射
|
||||
const selected: Record<string, boolean> = {};
|
||||
pieData.forEach(item => {
|
||||
// 未设置过的默认选中
|
||||
selected[item.name] = selectedMap.value[item.name] !== false;
|
||||
});
|
||||
|
||||
// 9. 图表配置（简化且安全）
|
||||
const option: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: ({ name, value, percent }: any) => `${name}: ${value} 元 (${(percent * 100).toFixed(1)}%)`,
|
||||
textStyle: { fontSize: 11 },
|
||||
padding: 8,
|
||||
backgroundColor: '#fff',
|
||||
borderColor: '#e8e8e8',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 'center',
|
||||
textStyle: { fontSize: 11, color: '#666' },
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 8,
|
||||
selected: selected, // 绑定选中状态
|
||||
formatter: (name: string) => name.length > 8 ? `${name.slice(0, 8)}...` : name
|
||||
},
|
||||
series: [{
|
||||
name: '账户金额',
|
||||
type: 'pie',
|
||||
radius: ['30%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 11,
|
||||
formatter: (params: any) => {
|
||||
if (total <= 0) return params.name;
|
||||
return `${params.name} ${formatPercent((params.value / total) * 100)}`;
|
||||
},
|
||||
color: '#333',
|
||||
distance: 10
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 10,
|
||||
length2: 8,
|
||||
smooth: 0.2,
|
||||
lineStyle: { width: 1, color: '#999' }
|
||||
},
|
||||
data: pieData.map((item, index) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: { color: colors[index] }
|
||||
}))
|
||||
}]
|
||||
};
|
||||
|
||||
// 10. 设置配置项（安全执行）
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
|
||||
// 11. 绑定图例事件（先解绑再绑定，避免重复）
|
||||
myChart.off('legendselectchanged');
|
||||
myChart.on('legendselectchanged', (params: any) => {
|
||||
if (params && params.name !== undefined) {
|
||||
selectedMap.value[params.name] = params.selected[params.name];
|
||||
// 无需重新初始化，ECharts会自动更新视图
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('设置图表配置失败：', e);
|
||||
}
|
||||
};
|
||||
|
||||
// 防抖调整图表尺寸（增加null防护）
|
||||
const resizeChart = () => {
|
||||
if (resizeTimer) clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(() => {
|
||||
if (myChart && chartDom.value) {
|
||||
try {
|
||||
myChart.resize({
|
||||
width: chartDom.value.clientWidth || 'auto',
|
||||
height: chartDom.value.clientHeight || 'auto'
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('调整图表尺寸失败：', e);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 监听数据变化（使用nextTick确保DOM就绪）
|
||||
watch(listAccount, () => {
|
||||
nextTick(() => initChart());
|
||||
}, { deep: true });
|
||||
|
||||
// 生命周期（增加安全防护）
|
||||
onMounted(async () => {
|
||||
// 先加载数据
|
||||
await Promise.all([fetchList(), getThisData()]);
|
||||
|
||||
// DOM渲染完成后初始化图表
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
// 绑定窗口大小变化事件
|
||||
window.addEventListener('resize', resizeChart);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清理定时器
|
||||
if (resizeTimer) clearTimeout(resizeTimer);
|
||||
|
||||
// 解绑事件
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
|
||||
// 安全销毁图表实例
|
||||
if (myChart) {
|
||||
try {
|
||||
myChart.off('legendselectchanged');
|
||||
myChart.dispose();
|
||||
} catch (e) {
|
||||
console.warn('销毁图表实例失败：', e);
|
||||
}
|
||||
myChart = null;
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
selectedMap.value = {};
|
||||
allLegendNames.value = [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.account-balance-card {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
padding: 0 16px !important;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: calc(100% - 56px) !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
color: #1890ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.layout-container {
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: #f0f7ff;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e6f4ff;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #1f2937;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:deep(.stat-content .icon) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1 1 auto;
|
||||
height: 100% !important;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-height: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
:deep(.left-panel::-webkit-scrollbar) {
|
||||
width: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.left-panel::-webkit-scrollbar-thumb) {
|
||||
background: #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.layout-container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
max-height: 120px;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-right: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
height: calc(100% - 132px) !important;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
:deep(.echarts-legend) {
|
||||
top: auto !important;
|
||||
bottom: 10px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
orient: 'horizontal' !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
web-vue/packages/erp/views/erp/green/index.vue
Normal file
115
web-vue/packages/erp/views/erp/green/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="erp-green-page-container">
|
||||
<div class="top-section">
|
||||
<div class="top-left">
|
||||
<ChartPie />
|
||||
</div>
|
||||
<div class="top-middle">
|
||||
<ChartLine />
|
||||
</div>
|
||||
<div class="top-right">上右区域</div>
|
||||
</div>
|
||||
<div class="middle-section">
|
||||
<div class="middle-left">
|
||||
<ChartAccount />
|
||||
</div>
|
||||
<div class="middle-right">
|
||||
<ChartCategory />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-section">
|
||||
<div class="bottom-left">
|
||||
|
||||
</div>
|
||||
<div class="bottom-right">下右区域</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ErpGreenPage">
|
||||
import { ref } from 'vue';
|
||||
import { BasicForm, FormProps } from '@jeesite/core/components/Form';
|
||||
|
||||
import ChartPie from './components/ChartPie.vue';
|
||||
import ChartLine from './components/ChartLine.vue';
|
||||
|
||||
import ChartAccount from './components/ChartAccount.vue'
|
||||
import ChartCategory from './components/ChartCategory.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.erp-green-page-container {
|
||||
height: calc(100vh - 100px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-section {
|
||||
height: 30%; /* 顶部占30% */
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-left, .top-middle, .top-right {
|
||||
flex: 1;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #f9fafb;
|
||||
/* 子元素垂直居中 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.middle-section {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.middle-left, .middle-right {
|
||||
flex: 1;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #f9fafb;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
height: 40%;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom-left, .bottom-right {
|
||||
flex: 1;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
background-color: #f9fafb;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.top-middle) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user