feat:表格添加格式化列

src/views/components/AiChat.vue

@@ -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

 <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

@@ -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

@@ -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;