manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增预警页面

Browse Source
This commit is contained in:
gaoxq
2025-12-10 23:27:11 +08:00
parent ee34f3bbf6
commit a2f4e1c31f
1 changed files with 178 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
web-vue/packages/biz/views/biz/dataReport/erp/components/ChartLine.vue
View File

@@ -18,9 +18,9 @@ import { Card } from 'ant-design-vue';
import { BasicForm, FormSchema } from '@jeesite/core/components/Form';
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { ErpSummaryAll, erpSummaryAllListAll } from '@jeesite/erp/api/erp/summaryAll';
import * as echarts from 'echarts';
// 表单默认值
const defaultFormValues = {
ctype: '1',
fcycle: 'M'
@@ -67,18 +67,31 @@ const chartDom = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
const { createMessage } = useMessage();
// 保留2位小数的工具函数
const formatNumber = (num: number | undefined, decimal = 2): number => {
if (num === undefined || isNaN(num)) return 0;
return Number(num.toFixed(decimal));
// ========== 核心工具函数 ==========
// 保留2位小数（增强容错）
const formatNumber = (num: number | string | undefined, decimal = 2): number => {
const parsed = Number(num);
if (isNaN(parsed)) return 0;
return Number(parsed.toFixed(decimal));
};
// 转换为万元（保留2位小数）
const toTenThousandYuan = (num: number | undefined): number => {
return formatNumber((num || 0) / 10000);
// 元转万元（仅用于柱状图/Y轴展示）
const toTenThousandYuan = (num: number | string | undefined): number => {
const rawNum = formatNumber(num);
return formatNumber(rawNum / 10000);
};
// 柱状图标签配置（显示万元）
// 千分位格式化（Tooltip显示原始元时使用）
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 barLabelConfig = {
show: true,
position: 'top',
@@ -88,10 +101,10 @@ const barLabelConfig = {
color: '#333',
fontWeight: '500'
},
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)} 万元`
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)}`
};
// 折线图标签配置（保留2位小数）
// 折线图标签配置：百分比格式（保留单位）
const lineLabelConfig = {
show: true,
position: 'top',
@@ -104,16 +117,34 @@ const lineLabelConfig = {
formatter: (params: any) => `${formatNumber(params.value).toFixed(2)} %`
};
// 表单提交处理
const handleFormSubmit = (values: Record<string, any>) => {
currentFormValues.value = { ...values };
fetchList(currentFormValues.value);
};
// 日期格式化（统一格式）
const formatDate = (date: string | undefined): string => {
if (!date) return '';
return date.replace(/\//g, '-').trim();
};
// 获取数据列表
const fetchList = async (params: Record<string, any>) => {
try {
const result = await erpSummaryAllListAll(params);
listSummary.value = result || [];
console.log('接口原始数据（元）：', result);
// 过滤空数据 + 统一日期格式 + 排序
const validData = (result || [])
.filter(item => item.cdate)
.map(item => ({
...item,
cdate: formatDate(item.cdate)
}))
.sort((a, b) => a.cdate.localeCompare(b.cdate));
listSummary.value = validData;
initChart();
} catch (error) {
console.error('获取数据列表失败：', error);
@@ -122,27 +153,27 @@ const fetchList = async (params: Record<string, any>) => {
}
};
// 计算Y轴极值，适配负数显示并确保0点对齐
// 计算Y轴极值（适配万元展示层）
const calculateYAxisExtent = (data: number[], isRate = false) => {
if (data.length === 0) return isRate ? [-10, 10] : [0, 100];
if (data.length === 0) return isRate ? [-10, 10] : [0, 10]; // 万元默认范围
// 格式化数据保留2位小数
const formattedData = data.map(num => formatNumber(num));
const min = Math.min(...formattedData);
const max = Math.max(...formattedData);
// 计算内边距（百分比轴内边距更大，确保负数显示清晰）
const padding = isRate ? Math.max(Math.abs(max) * 0.2, Math.abs(min) * 0.2, 5)
: (max - min) * 0.1 || 10;
// 万元轴内边距：10% 或最小1万元
const padding = isRate
? Math.max(Math.abs(max) * 0.2, Math.abs(min) * 0.2, 5)
: Math.max((max - min) * 0.1, 1);
let minExtent = min - padding;
let maxExtent = max + padding;
// 强制包含0点，确保X轴对齐
// 强制包含0点
if (minExtent > 0) minExtent = 0;
if (maxExtent < 0) maxExtent = 0;
// 百分比轴确保正负对称（可选，提升视觉效果）
// 百分比轴正负对称
if (isRate) {
const absMax = Math.max(Math.abs(minExtent), Math.abs(maxExtent));
minExtent = -absMax;
@@ -152,36 +183,50 @@ const calculateYAxisExtent = (data: number[], isRate = false) => {
return [minExtent, maxExtent];
};
// 初始化图表
// 初始化图表（核心修复：Tooltip兼容处理）
const initChart = () => {
if (!chartDom.value) return;
// 如果图表实例已存在，先销毁
if (myChart) {
myChart.dispose();
}
// 创建新的图表实例
myChart = echarts.init(chartDom.value);
// 处理空数据
const xAxisData = listSummary.value.length
? listSummary.value.map(item => item.cdate || '')
: [];
// 提取X轴类目
const xAxisData = listSummary.value.map(item => item.cdate).filter(Boolean);
// 提取金额数据（转换为万元）用于计算Y轴范围
const thisValueData = listSummary.value.map(item => toTenThousandYuan(item.thisValue));
const prevValueData = listSummary.value.map(item => toTenThousandYuan(item.prevValue));
const amountData = [...thisValueData, ...prevValueData];
// ========== 核心分离：展示数据（万元）和原始数据（元） ==========
// 1. 展示层数据（万元）：用于柱状图/Y轴/标签
const thisValueShow = xAxisData.map(date => {
const item = listSummary.value.find(i => i.cdate === date);
return toTenThousandYuan(item?.thisValue);
});
const prevValueShow = xAxisData.map(date => {
const item = listSummary.value.find(i => i.cdate === date);
return toTenThousandYuan(item?.prevValue);
});
// 2. 原始数据（元）：直接从接口数据提取，不做任何换算，用于Tooltip
const rawDataMap = new Map<string, { thisValue: any; prevValue: any; momRate: any }>();
listSummary.value.forEach(item => {
rawDataMap.set(item.cdate, {
thisValue: item.thisValue, // 接口原始值（元）
prevValue: item.prevValue, // 接口原始值（元）
momRate: item.momRate // 接口原始值（%）
});
});
// 环比数据（不变）
const rateData = xAxisData.map(date => {
const item = listSummary.value.find(i => i.cdate === date);
return formatNumber(item?.momRate);
});
// 计算Y轴范围（基于万元展示数据）
const amountData = [...thisValueShow, ...prevValueShow];
const [amountMin, amountMax] = calculateYAxisExtent(amountData);
// 提取环比数据用于计算百分比轴范围（保留2位小数）
const rateData = listSummary.value.map(item => formatNumber(item.momRate));
const [rateMin, rateMax] = calculateYAxisExtent(rateData, true);
// 原始金额数据（用于tooltip显示元）
const rawThisValueData = listSummary.value.map(item => formatNumber(item.thisValue));
const rawPrevValueData = listSummary.value.map(item => formatNumber(item.prevValue));
const option = {
title: {
@@ -192,23 +237,45 @@ const initChart = () => {
trigger: 'axis',
axisPointer: { type: 'shadow' },
textStyle: { fontSize: 12 },
padding: 10,
// ========== 核心修复：兼容params长度不固定 + 空值容错 ==========
formatter: (params: any[]) => {
let res = params[0].axisValue;
params.forEach((param, index) => {
// 区分金额和环比：金额显示原始元，环比显示百分比
let value = param.value;
let unit = ' 元';
if (!params || params.length === 0) return '暂无数据';
const date = params[0]?.axisValue || '';
const rawData = rawDataMap.get(date) || { thisValue: 0, prevValue: 0, momRate: 0 };
let res = `<div style="font-weight: 500; margin-bottom: 4px;">${date || '未知日期'}</div>`;
// 动态遍历params，不依赖固定索引
params.forEach((param) => {
// 跳过无效参数
if (!param || !param.seriesName) return;
if (param.seriesName === '环比') {
value = formatNumber(param.value);
unit = ' %';
} else {
// 还原为原始元数值（图表展示的是万元，需要乘10000）
value = formatNumber(param.value * 10000);
let displayText = '';
const seriesName = param.seriesName;
// 根据系列名称匹配原始数据，避免依赖param.value
if (seriesName === '本期金额') {
displayText = `${param.marker || ''}本期金额：<span style="font-weight: 500;">${
formatWithThousandsSeparator(rawData.thisValue)
}</span> 元`;
} else if (seriesName === '上期金额') {
displayText = `${param.marker || ''}上期金额：<span style="font-weight: 500;">${
formatWithThousandsSeparator(rawData.prevValue)
}</span> 元`;
} else if (seriesName === '环比') {
displayText = `${param.marker || ''}环比：<span style="font-weight: 500;">${
formatNumber(rawData.momRate).toFixed(2)
}</span> %`;
}
res += `<br/>${param.marker}${param.seriesName}：${value.toFixed(2)}${unit}`;
// 只有有效文本才添加到Tooltip
if (displayText) {
res += `<div style="margin: 2px 0;">${displayText}</div>`;
}
});
return res;
}
},
@@ -219,7 +286,7 @@ const initChart = () => {
},
grid: {
left: '8%',
right: '12%', // 增加右侧边距适配百分比轴
right: '12%',
bottom: '10%',
top: '20%',
containLabel: true
@@ -228,34 +295,32 @@ const initChart = () => {
type: 'category',
data: xAxisData,
axisLabel: { fontSize: 12 },
// 确保X轴在0点位置
axisLine: {
onZero: true
}
axisLine: { onZero: true }
},
yAxis: [
{
type: 'value',
name: '交易金额（万元）', // Y轴名称改为万元
name: '交易金额（万元）', // Y轴仍保留万元单位
nameTextStyle: { fontSize: 12 },
axisLabel: {
fontSize: 12,
formatter: (value: number) => formatNumber(value).toFixed(2)
fontSize: 11,
formatter: (value: number) => formatNumber(value).toFixed(2) // 万元数值
},
min: amountMin,
max: amountMax,
axisLine: { onZero: true },
splitLine: {
lineStyle: { color: '#e8e8e8' }
},
splitLine: { lineStyle: { color: '#e8e8e8' } },
axisTick: { alignWithLabel: true },
splitNumber: 4 // 控制刻度数量
splitNumber: 5,
scale: true
},
{
type: 'value',
name: '环比（%）',
nameTextStyle: { fontSize: 12 },
axisLabel: {
fontSize: 12,
formatter: (value: number) => formatNumber(value).toFixed(2) + ' %'
fontSize: 11,
formatter: (value: number) => `${formatNumber(value).toFixed(2)} %`
},
min: rateMin,
max: rateMax,
@@ -267,47 +332,60 @@ const initChart = () => {
splitNumber: 4
}
],
// 空数据提示
noDataLoadingOption: {
text: '暂无数据',
textStyle: { fontSize: 14, color: '#999' },
effect: 'bubble',
effectOption: {
effect: {
n: 0
}
}
effectOption: { effect: { n: 0 } }
},
series: [
{
name: '本期金额',
type: 'bar',
data: thisValueData, // 展示万元数据
data: thisValueShow, // 万元展示数据
itemStyle: {
color: '#1890ff',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#1890ff' },
{ offset: 1, color: '#096dd9' }
]),
borderRadius: [8, 8, 0, 0]
},
barWidth: 25,
barWidth: 25,
barBorderRadius: [8, 8, 0, 0],
label: barLabelConfig,
label: barLabelConfig, // 仅显示数值的标签
yAxisIndex: 0,
// 存储原始元数据用于tooltip
rawData: rawThisValueData
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#40a9ff' },
{ offset: 1, color: '#1890ff' }
])
}
}
},
{
name: '上期金额',
type: 'bar',
data: prevValueData, // 展示万元数据
data: prevValueShow, // 万元展示数据
itemStyle: {
color: '#52c41a',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#52c41a' },
{ offset: 1, color: '#389e0d' }
]),
borderRadius: [8, 8, 0, 0]
},
barWidth: 25,
barWidth: 25,
barBorderRadius: [8, 8, 0, 0],
label: barLabelConfig,
label: barLabelConfig, // 仅显示数值的标签
yAxisIndex: 0,
// 存储原始元数据用于tooltip
rawData: rawPrevValueData
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#73d13d' },
{ offset: 1, color: '#52c41a' }
])
}
}
},
{
name: '环比',
@@ -316,30 +394,19 @@ const initChart = () => {
smooth: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 3,
color: '#f5222d'
},
lineStyle: { width: 3, color: '#f5222d' },
itemStyle: {
color: '#f5222d',
borderColor: '#fff',
borderWidth: 2
},
label: lineLabelConfig,
emphasis: {
itemStyle: {
symbolSize: 12
}
},
emphasis: { itemStyle: { symbolSize: 12 } },
yAxisIndex: 1,
// 0%基准线（精确对齐X轴）
markLine: {
silent: true,
lineStyle: { color: '#ccc', type: 'dashed', width: 1 },
data: [{
yAxis: 0,
lineStyle: { color: '#999', type: 'dashed' }
}]
data: [{ yAxis: 0, lineStyle: { color: '#999', type: 'dashed' } }]
}
}
]
@@ -348,7 +415,7 @@ const initChart = () => {
myChart.setOption(option);
};
// 调整图表大小
// 调整图表大小（防抖+动画）
const resizeChart = () => {
if (myChart) {
myChart.resize({
@@ -360,7 +427,7 @@ const resizeChart = () => {
}
};
// 监听窗口大小变化（防抖处理）
// 窗口 resize 防抖处理
let resizeTimer: number;
const debounceResize = () => {
clearTimeout(resizeTimer);
@@ -400,15 +467,12 @@ watch(listSummary, () => {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* 优化图表样式 */
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
}
/* 优化图表tooltip样式 */
:deep(.echarts-tooltip) {
border-radius: 4px;
padding: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
border: none;
}
/* 优化表单样式 */
@@ -420,14 +484,14 @@ watch(listSummary, () => {
width: 100%;
}
/* 优化双Y轴标签样式 */
:deep(.echarts-yaxis-label) {
font-size: 12px;
color: #666;
/* 优化柱状图标签溢出处理 */
:deep(.echarts-label) {
font-family: 'Microsoft YaHei', sans-serif;
white-space: nowrap;
}
/* 优化0%基准线样式 */
:deep(.echarts-mark-line) {
z-index: 1;
/* 优化Y轴名称间距 */
:deep(.echarts-yaxis-name) {
margin-right: 5px;
}
</style>
</style>