Skip to content
GitLab
Commit f377459f authored by 水玉婷's avatar 水玉婷
Browse files

feat:表格添加格式化列

parent 536744e2
Hide whitespace changes
Inline Side-by-side
src/views/components/AiChat.vue
View file @ f377459f
......@@ -455,7 +455,7 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
headers: {
'Content-Type': 'application/json',
'token': props.token,
'x-session-id': props.token,
'x-session-id': props?.token,
'x-app-code': props.appCode || ''
},
body: JSON.stringify(requestData)
......@@ -603,68 +603,132 @@ onBeforeUnmount(() => {
});
// 模拟折线图消息
// const simulateLineChartMessage = () => {
// console.log('模拟折线图消息');
const simulateLineChartMessage = () => {
console.log('模拟折线图消息');
// // 使用真实医院数据创建折线图数据，包含多个维度和指标
// const lineChartData = {
// title:"2023年各医院月度运营数据汇总",
// dimFields: ['月份', '地区', '医院类型', '科室'],
// indexFields: ['用户总数', '费用汇总', '平均住院天数', '手术台数', '门诊量'],
// desc: `根据您提供的四川公司费用总额数据，我进行了详细分析和总结：
// 费用总额呈现持续增长趋势‌：从2025年1月的1068.3万元增长至3月的3906.0万元，三个月累计增长超过2837.7万元。
// 月度增长幅度显著‌：2月较1月增长1440.3万元，3月较2月增长1397.4万元，增长势头强劲。
// 同比分析‌：与上年同期相比，2025年同期费用总额均高于上年同期，显示公司业务规模持续扩大。
// 增长趋势稳定‌：从1月到3月，费用总额稳步上升，未出现明显波动或下降趋势。
// 数据完整性‌：所有数据点均完整，便于进行趋势分析和预测。
// 这些数据表明四川公司在2025年呈现出良好的业务发展态势，费用支出与业务增长保持同步。`,
// rows: [
// { '月份': '1月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 100, '费用汇总': 5000, '平均住院天数': 7.2, '手术台数': 15, '门诊量': 1200 },
// { '月份': '2月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 6000, '平均住院天数': 6.8, '手术台数': 18, '门诊量': 1400 },
// { '月份': '3月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 5500, '平均住院天数': 7.5, '手术台数': 16, '门诊量': 1300 },
// { '月份': '4月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 8000, '平均住院天数': 6.5, '手术台数': 22, '门诊量': 1600 },
// { '月份': '5月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 200, '费用汇总': 9000, '平均住院天数': 6.2, '手术台数': 25, '门诊量': 1800 },
// { '月份': '6月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 250, '费用汇总': 11000, '平均住院天数': 5.8, '手术台数': 30, '门诊量': 2000 },
// { '月份': '1月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 80, '费用汇总': 8000, '平均住院天数': 8.5, '手术台数': 45, '门诊量': 800 },
// { '月份': '2月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 120, '费用汇总': 9500, '平均住院天数': 8.2, '手术台数': 52, '门诊量': 900 },
// { '月份': '3月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 100, '费用汇总': 8500, '平均住院天数': 8.8, '手术台数': 48, '门诊量': 850 },
// { '月份': '4月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 150, '费用汇总': 12000, '平均住院天数': 7.8, '手术台数': 60, '门诊量': 1100 },
// { '月份': '5月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 180, '费用汇总': 14000, '平均住院天数': 7.5, '手术台数': 68, '门诊量': 1200 },
// { '月份': '6月', '地区': '北京', '医院类型': '三甲医院', '科室': '外科', '用户总数': 220, '费用汇总': 16000, '平均住院天数': 7.2, '手术台数': 75, '门诊量': 1400 },
// ],
// // chartType: 'line' // 设置默认图表类型为折线图
// };
// 使用真实医院数据创建折线图数据，包含多个维度和指标
const lineChartData = {
title:"2023年各医院月度运营数据汇总",
dimFields: ['月份', '地区', '医院类型', '科室'],
indexFields: ['用户总数', '费用汇总', '平均住院天数', '手术台数', '门诊量'],
indexFieldsFormat: ['用户总数FORMAT', '费用汇总FORMAT', '平均住院天数FORMAT', '手术台数FORMAT', '门诊量FORMAT'],
desc: `根据您提供的四川公司费用总额数据，我进行了详细分析和总结：
费用总额呈现持续增长趋势‌：从2025年1月的1068.3万元增长至3月的3906.0万元，三个月累计增长超过2837.7万元。
月度增长幅度显著‌：2月较1月增长1440.3万元，3月较2月增长1397.4万元，增长势头强劲。
同比分析‌：与上年同期相比，2025年同期费用总额均高于上年同期，显示公司业务规模持续扩大。
增长趋势稳定‌：从1月到3月，费用总额稳步上升，未出现明显波动或下降趋势。
数据完整性‌：所有数据点均完整，便于进行趋势分析和预测。
这些数据表明四川公司在2025年呈现出良好的业务发展态势，费用支出与业务增长保持同步。`,
rows: [
{ '月份': '1月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 100, '费用汇总': 5000, '平均住院天数': 7.2, '手术台数': 15, '门诊量': 1200, '用户总数FORMAT': '100人', '费用汇总FORMAT': '5,000元', '平均住院天数FORMAT': '7.2天', '手术台数FORMAT': '15台', '门诊量FORMAT': '1,200人次' },
{ '月份': '2月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 150, '费用汇总': 6000, '平均住院天数': 6.8, '手术台数': 18, '门诊量': 1400, '用户总数FORMAT': '150人', '费用汇总FORMAT': '6,000元', '平均住院天数FORMAT': '6.8天', '手术台数FORMAT': '18台', '门诊量FORMAT': '1,400人次' },
{ '月份': '3月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 120, '费用汇总': 5500, '平均住院天数': 7.5, '手术台数': 16, '门诊量': 1300, '用户总数FORMAT': '120人', '费用汇总FORMAT': '5,500元', '平均住院天数FORMAT': '7.5天', '手术台数FORMAT': '16台', '门诊量FORMAT': '1,300人次' },
{ '月份': '4月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 180, '费用汇总': 8000, '平均住院天数': 6.5, '手术台数': 22, '门诊量': 1600, '用户总数FORMAT': '180人', '费用汇总FORMAT': '8,000元', '平均住院天数FORMAT': '6.5天', '手术台数FORMAT': '22台', '门诊量FORMAT': '1,600人次' },
{ '月份': '5月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 200, '费用汇总': 9000, '平均住院天数': 6.2, '手术台数': 25, '门诊量': 1800, '用户总数FORMAT': '200人', '费用汇总FORMAT': '9,000元', '平均住院天数FORMAT': '6.2天', '手术台数FORMAT': '25台', '门诊量FORMAT': '1,800人次' },
{ '月份': '6月', '地区': '北京', '医院类型': '三甲医院', '科室': '内科', '用户总数': 250, '费用汇总': 11000, '平均住院天数': 5.8, '手术台数': 30, '门诊量': 2000, '用户总数FORMAT': '250人', '费用汇总FORMAT': '11,000元', '平均住院天数FORMAT': '5.8天', '手术台数FORMAT': '30台', '门诊量FORMAT': '2,000人次' }
],
// chartType: 'line' // 设置默认图表类型为折线图
};
// // 正确的SSE消息格式：status 3（图表数据），type 2（表格数据）
// const simulatedMessage = {
// message: lineChartData,
// status: 3, // 图表数据
// type: 2 // 表格数据
// };
// 正确的SSE消息格式：status 3（图表数据），type 2（表格数据）
const simulatedMessage = {
message: lineChartData,
status: 3, // 图表数据
type: 2 // 表格数据
};
// // 调用handleSSEMessage处理模拟消息
// handleSSEMessage(simulatedMessage);
// };
// const simulateTips = () => {
// console.log('模拟总结消息');
// 调用handleSSEMessage处理模拟消息
handleSSEMessage(simulatedMessage);
};
const simulateTips = () => {
console.log('模拟总结消息');
// // 模拟提示消息
// 模拟提示消息
// const simulatedMessage = {
// message: `根据您提供的四川公司费用总额数据，我进行了详细分析和总结：
// 费用总额呈现持续增长趋势‌：从2025年1月的1068.3万元增长至3月的3906.0万元，三个月累计增长超过2837.7万元。
// 月度增长幅度显著‌：2月较1月增长1440.3万元，3月较2月增长1397.4万元，增长势头强劲。
// 同比分析‌：与上年同期相比，2025年同期费用总额均高于上年同期，显示公司业务规模持续扩大。
// 增长趋势稳定‌：从1月到3月，费用总额稳步上升，未出现明显波动或下降趋势。
// 数据完整性‌：所有数据点均完整，便于进行趋势分析和预测。
// 这些数据表明四川公司在2025年呈现出良好的业务发展态势，费用支出与业务增长保持同步。`,
// message: `# 四川公司费用总额分析报告 📊
// ## 一、数据概览 📌
// 根据提供的数据，四川公司2025年1月至3月的费用总额如下：
// | 年月 | 本期费用总额（元） | 同期费用总额（元） | 同比变化（%） |
// |--------|------------------|------------------|--------------|
// | 202501 | 10,682,961.54 | 12,240,780.34 | -12.74% |
// | 202502 | 25,086,103.67 | 26,530,119.19 | -5.45% |
// | 202503 | 39,060,157.77 | 38,533,655.20 | +1.36% |
// ## 二、趋势分析 📈
// ### 1. **费用总额同比变化分析**
// - **2025年1月**：费用总额同比下降 **12.74%**，降幅较大，可能与年初预算控制、业务收缩或成本优化有关。
// - **2025年2月**：费用总额同比下降 **5.45%**，降幅有所收窄，但仍处于下降趋势。
// - **2025年3月**：费用总额同比**增长1.36%**，首次出现同比增长，可能与业务回暖、市场拓展或季节性因素有关。
// ### 2. **费用总额环比变化分析**
// - **1月至2月**：费用总额环比增长 **135.63%**，增长显著，可能与业务活动增加、项目启动或季节性支出有关。
// - **2月至3月**：费用总额环比增长 **55.72%**，增长速度有所放缓，但仍保持增长趋势。
// ## 三、问题识别 🔍
// ### 1. **费用总额同比持续下降（1-2月）**
// - **问题点**：1月至2月费用总额同比持续下降，可能表明公司在成本控制方面采取了较为严格的措施，但也可能影响业务的正常开展。
// - **建议**：需进一步分析费用下降的具体原因，是否为成本优化、业务收缩或预算执行偏差，避免因过度压缩费用影响业务发展。
// ### 2. **3月费用总额同比首次增长**
// - **问题点**：3月费用总额同比首次增长，但增长幅度较小（1.36%），可能表明业务恢复速度较慢，或费用增长主要集中在某些特定项目或部门。
// - **建议**：需关注费用增长的结构，分析增长是否合理，是否与业务增长匹配，避免费用增长脱离实际业务需求。
// ### 3. **缺乏预算和年初数据**
// - **问题点**：数据中“年初费用总额”和“预算费用总额”均为 'null'，缺乏预算和年初数据，无法进行预算执行情况分析。
// - **建议**：建议补充预算和年初费用数据，以便更全面地评估费用控制和预算执行情况。
// ## 四、总结与建议 📌
// ### ✅ **总结**
// - 四川公司2025年1月至3月费用总额呈现“先降后升”的趋势，1-2月费用总额同比下降，3月首次出现同比增长。
// - 费用总额同比变化较大，需关注费用控制与业务发展的平衡。
// ### 📌 **建议**
// 1. **加强预算管理**：补充预算和年初费用数据，以便进行预算执行分析。
// 2. **优化费用结构**：分析费用增长的结构，确保费用增长与业务发展相匹配。
// 3. **关注费用下降原因**：对1-2月费用总额同比下降的原因进行深入分析，避免因过度压缩费用影响业务发展。
// 4. **加强成本控制**：在费用增长阶段，需加强成本控制，确保费用增长合理、可控。
// ---
// 📊 **数据可视化建议**（如需进一步分析，可制作折线图、柱状图等，展示费用总额同比、环比变化趋势）。`,
// status: 3, // 图表数据
// type: 6 // 总结消息
// };
const simulatedMessage = {
message: `# 四川公司费用总额分析📊
## 数据概览
- **2025年1月**：费用总额为 **10,682,961.54元**，同比减少 **1,557,818.80元**（约 **12.72%**）。
- **2025年2月**：费用总额为 **25,086,103.67元**，同比减少 **1,444,015.52元**（约 **5.44%**）。
- **2025年3月**：费用总额为 **39,060,157.77元**，同比增加 **526,502.57元**（约 **1.36%**）。
## 问题分析
- **费用总额同比波动较大**，1月和2月均出现同比下降，3月略有回升，但整体仍低于去年同期水平，可能与成本控制或业务结构调整有关。
- **缺乏年初及预算数据**，无法判断费用总额是否符合预算目标，影响进一步分析。
- **费用增长趋势不明确**，3月虽有回升，但增幅较小，需关注后续月份数据以判断是否为短期波动。
## 建议
- **加强费用预算管理**，明确费用控制目标。
- **深入分析费用结构**，识别费用增长或下降的主要驱动因素。
- **补充年初及预算数据**，以便进行更全面的费用对比分析。
🔍 **结论**：四川公司费用总额呈现波动下降趋势，需进一步分析费用结构及预算执行情况，以优化费用管理。`,
status: 3, // 图表数据
type: 6 // 总结消息
}
// // 调用handleSSEMessage处理模拟消息
// handleSSEMessage(simulatedMessage);
// };
// 调用handleSSEMessage处理模拟消息
handleSSEMessage(simulatedMessage);
};
</script>
<style lang="less" scoped>
@import './style.less';
......
src/views/components/ChartComponent.vue
View file @ f377459f
<template>
<div class="chart-container">
<div class="tips">
{{ chartData?.desc }}
{{ chartData?.description }}
</div>
<!-- 图表类型选择器 -->
<div class="chart-controls">
......@@ -150,7 +150,7 @@ interface ChartData {
dimFields?: string[];
indexFields?: string[];
rows?: any[];
desc?: string;
description?: string;
}
interface ChartTypeOption {
......@@ -162,7 +162,7 @@ interface Props {
chartData?: ChartData;
chartType?: number | string;
title?: string;
desc?: string;
description?: string;
width?: number | string;
height?: number | string;
}
......@@ -343,11 +343,12 @@ onMounted(() => {
max-width: 100% !important;
.tips {
margin-bottom: 8px;
font-weight: 500;
}
}
.chart-controls {
padding: 8px 16px;
padding: 8px 6px;
background-color: #fafafa;
border-bottom: 1px solid #e8e8e8;
display: flex;
......
src/views/components/TableComponent.vue
View file @ f377459f
......@@ -54,7 +54,8 @@ const props = withDefaults(defineProps<Props>(), {
config: () => ({
title: '数据表格',
dimFields: [],
indexFields: []
indexFields: [],
indexFieldsFormat:[]
})
});
......@@ -64,7 +65,26 @@ const processedTableData = computed(() => {
// 处理传入完整数据结构的情况
if (Array.isArray(props.tableData.rows)) {
return props.tableData.rows;
// 过滤掉indexFields中的字段，只保留dimFields和indexFieldsFormat中的字段
const indexFields = props.tableData?.indexFields || [];
const dimFields = props.tableData?.dimFields || [];
const indexFieldsFormat = props.tableData?.indexFieldsFormat || [];
// 需要保留的字段：dimFields + indexFieldsFormat
const fieldsToKeep = [...dimFields, ...indexFieldsFormat];
return props.tableData.rows.map(row => {
const filteredRow: Record<string, any> = {};
// 只保留需要的字段
fieldsToKeep.forEach(field => {
if (row.hasOwnProperty(field)) {
filteredRow[field] = row[field];
}
});
return filteredRow;
});
} else if (Array.isArray(props.tableData)) {
return props.tableData;
}
......@@ -72,6 +92,15 @@ const processedTableData = computed(() => {
return [];
});
// 判断列是否为数字列
const isNumericColumn = (header: string) => {
// 使用indexFieldsFormat来判断数字列，而不是indexFields
const indexFieldsFormat = props.tableData?.indexFieldsFormat || [];
// 只通过indexFieldsFormat来判断数字列
return indexFieldsFormat.includes(header);
};
// 表格标题
const tableTitle = computed(() => {
if (props.tableData?.title) {
......@@ -85,32 +114,29 @@ const tableTitle = computed(() => {
const tableColumns = computed(() => {
if (processedTableData.value.length === 0) return [];
// 使用过滤后的数据的字段作为表头
const headers = Object.keys(processedTableData.value[0]);
return headers.map(header => ({
title: header,
dataIndex: header,
key: header,
align: getColumnAlign(header),
width: getColumnWidth(header),
ellipsis: true,
sorter: isNumericColumn(header) ? (a, b) => {
const aValue = parseFloat(a[header]);
const bValue = parseFloat(b[header]);
return aValue - bValue;
} : undefined
}));
return headers.map(header => {
// 将字段名中的FORMAT后缀去掉
const displayHeader = header.replace(/FORMAT$/, '');
return {
title: displayHeader,
dataIndex: header,
key: header,
align: getColumnAlign(header),
width: getColumnWidth(header),
ellipsis: true,
sorter: isNumericColumn(header) ? (a, b) => {
const aValue = parseFloat(a[header]);
const bValue = parseFloat(b[header]);
return aValue - bValue;
} : undefined
};
});
});
// 判断列是否为数字列
const isNumericColumn = (header: string) => {
// 直接从传入的数据中获取indexFields
const indexFields = props.tableData?.indexFields || [];
// 只通过indexFields来判断数字列
return indexFields.includes(header);
};
// 判断是否为文本列
const isTextColumn = (header: string) => {
// 直接从传入的数据中获取dimFields
......@@ -171,13 +197,6 @@ const renderCellContent = (header: string, value: any) => {
return '↓';
}
}
// 如果是数字列，进行格式化
if (isNumericColumn(header)) {
return formatNumber(value);
}
// 其他列保持原样
return value;
};
</script>
......@@ -272,12 +291,12 @@ const renderCellContent = (header: string, value: any) => {
width: 100%;
.ant-table-thead > tr > th {
background: linear-gradient(135deg, #5B8AFE 0%, #4a7df5 100%);
color: white;
font-weight: 400;
background:#D1E9FF;
color: #323232;
font-weight: 600;
padding: 6px 8px;
font-size: 14px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgb(202 181 181 / 20%);
height: 35px;
white-space: nowrap;
overflow: hidden;
......@@ -288,7 +307,7 @@ const renderCellContent = (header: string, value: any) => {
border-right: none;
}
.ant-table-column-sorter-up.active, .ant-table-column-sorter-down.active {
color: white;
color: #656363;
}
}
......@@ -303,6 +322,7 @@ const renderCellContent = (header: string, value: any) => {
text-overflow: ellipsis;
vertical-align: middle;
min-width: 80px;
font-weight: 400;
}
/* 奇偶行样式 */
......@@ -324,5 +344,8 @@ const renderCellContent = (header: string, value: any) => {
.ant-table-pagination.ant-pagination {
margin: 12px 0 0;
}
.ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{
display: none;
}
}
</style>
\ No newline at end of file
src/views/components/style.less
View file @ f377459f
......@@ -18,8 +18,9 @@
@gray-5: #999999;
@gray-6: #666666;
@gray-7: #323232;
@gray-8:#646566;
@gray-8:#686566;
@gray-9:#222629;
@gray-10:#C8C9CC;
@success-color: #52c41a;
@error-color: #f5222d;
@warning-color: #faad14;
......@@ -283,7 +284,7 @@ li {
.message.received .message-content {
background-color:none;
border-top-left-radius: 5px;
color: @gray-7;
color: @gray-9;
border: none;
padding: 0;
box-shadow:none;
......@@ -367,10 +368,10 @@ li {
}
.thinking-text {
color: @gray-7;
font-size: 13px;
color: @gray-8;
font-size: 14px;
transition: color 0.3s ease;
font-weight: 500;
font-weight: 400;
}
}
......@@ -417,7 +418,8 @@ li {
.think-content {
font-size: 14px;
color: @gray-5;
color: @gray-8;
font-weight:400;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment