feat:表格添加趋势展示,并且添加指标时期排序

src/views/components/TableComponent.vue

@@ -23,7 +23,7 @@
         <!-- 自定义单元格渲染 -->
         <template #bodyCell="{ column, text, record }">
           <div :class="getCellClass(column.dataIndex)">
-            {{ renderCellContent(column.dataIndex, text, record) || '-' }}
+            <span v-html="getDisplayContent(column.dataIndex, text, record) || '-'"></span>
           </div>
         </template>
       </a-table>
@@ -314,19 +314,13 @@ const isTextColumn = (header: string) => {
 // 判断是否为可排序列(数字字段+文字字段里面包含名称的)
 const isSortColumn = (header: string): boolean => {
   // 数字字段 或者 (文本字段且包含"名称")
-  return isNumericColumn(header) || (isTextColumn(header) && header.toLowerCase().includes('名称'));
-};
-
-// 判断列是否为趋势列
-const isTrendColumn = (header: string) => {
-  return header.toLowerCase().includes('趋势') || header.toLowerCase().includes('trend');
+  let sortFileds = ['指标时期'];
+  return isNumericColumn(header) || (isTextColumn(header) && (sortFileds.includes(header.toLowerCase())) || header.toLowerCase().includes('名称'));
 };
 
 // 获取列对齐方式
 const getColumnAlign = (header: string) => {
-  if (isTrendColumn(header)) {
-    return 'center';
-  } else if (isNumericColumn(header)) {
+  if (isNumericColumn(header)) {
     return 'right';
   } else if (isTextColumn(header)) {
     return 'left';
@@ -354,8 +348,6 @@ const getColumnWidth = (header: string) => {
   // 列数较多时，使用固定宽度
   if (isNumericColumn(header)) {
     return 120;
-  } else if (isTrendColumn(header)) {
-    return 80;
   } else {
     return 'auto';
   }
@@ -363,29 +355,110 @@ const getColumnWidth = (header: string) => {
 
 // 获取单元格样式类
 const getCellClass = (header: string) => {
-  if (isTrendColumn(header)) {
-    return 'trend-cell';
-  } else if (isNumericColumn(header)) {
+  if (isNumericColumn(header)) {
     return 'numeric-cell';
   } else {
     return 'text-cell';
   }
 };
 
+// 检查是否包含本期和同期字段
+const hasCurrentAndPreviousFields = computed(() => {
+  const indexFields = props.tableData?.indexFields || [];
+  const hasCurrent = indexFields.some((field: string) => field.includes('本期'));
+  const hasPrevious = indexFields.some((field: string) => field.includes('同期'));
+  return hasCurrent && hasPrevious;
+});
+
+// 获取本期字段名
+const getCurrentField = () => {
+  const indexFields = props.tableData?.indexFields || [];
+  return indexFields.find((field: string) => field.includes('本期')) || '';
+};
+
+// 获取同期字段名
+const getPreviousField = () => {
+  const indexFields = props.tableData?.indexFields || [];
+  return indexFields.find((field: string) => field.includes('同期')) || '';
+};
+
+// 计算趋势值（本期-同期）
+const calculateTrend = (record: any) => {
+  if (!hasCurrentAndPreviousFields.value) return null;
+  
+  const currentField = getCurrentField();
+  const previousField = getPreviousField();
+  
+  if (!currentField || !previousField) return null;
+  
+  // 获取本期值
+  let currentValue = record[currentField];
+  if (currentValue && typeof currentValue === 'object' && currentValue.value !== undefined) {
+    currentValue = currentValue.value;
+  }
+  currentValue = parseFloat(currentValue) || 0;
+  
+  // 获取同期值
+  let previousValue = record[previousField];
+  if (previousValue && typeof previousValue === 'object' && previousValue.value !== undefined) {
+    previousValue = previousValue.value;
+  }
+  previousValue = parseFloat(previousValue) || 0;
+  
+  return currentValue - previousValue;
+};
+
+// 获取趋势箭头
+const getTrendArrow = (trendValue: number) => {
+  if (trendValue > 0) {
+    return '↑';
+  } else if (trendValue < 0) {
+    return '↓';
+  }
+  return '';
+};
+
+// 获取显示内容（处理对象和普通值的显示）
+const getDisplayContent = (header: string, value: any, record: any) => {
+  const content = renderCellContent(header, value, record);
+  
+  // 如果返回的是对象，提取display属性
+  if (content && typeof content === 'object' && content.display !== undefined) {
+    return content.display;
+  }
+  
+  return content;
+};
+
 // 渲染单元格内容
 const renderCellContent = (header: string, value: any, record: any) => {
   // 处理indexFields字段的特殊数据结构
   if (value && typeof value === 'object' && value.display !== undefined) {
     value = value.display;
   }
-  
-  // 如果是趋势列，根据up/down值显示箭头图标
-  if (isTrendColumn(header)) {
-    const trendValue = String(value).toLowerCase().trim();
-    if (trendValue === 'up' || trendValue === '上升' || trendValue === '上涨') {
-      return '↑';
-    } else if (trendValue === 'down' || trendValue === '下降' || trendValue === '下跌') {
-      return '↓';
+  // 如果是本期字段且包含同期字段，显示趋势箭头
+  if (hasCurrentAndPreviousFields.value && isNumericColumn(header)) {
+    const currentField = getCurrentField();
+    if (header === currentField) {
+      const trendValue = calculateTrend(record);
+      if (trendValue !== null) {
+        const trendArrow = getTrendArrow(trendValue);
+        const formattedValue = formatNumber(Number(value)) || value;
+        
+        // 创建包含趋势箭头的HTML内容，只给箭头添加颜色
+        let coloredArrow = trendArrow;
+        if (trendValue > 0) {
+          coloredArrow = `<span style="color: #f5222d;">${trendArrow}</span>`;
+        } else if (trendValue < 0) {
+          coloredArrow = `<span style="color: #52c41a;">${trendArrow}</span>`;
+        }
+        
+        return {
+          display: `${formattedValue} ${coloredArrow}`,
+          value: value,
+          trendValue: trendValue
+        };
+      }
     }
   }
 
@@ -501,15 +574,6 @@ const getTableScroll = () => {
   text-align: left;
 }
 
-/* 趋势箭头样式 */
-.trend-cell:has(span:contains('↑')) {
-  color: #f5222d; /* 红色表示上涨 */
-}
-
-.trend-cell:has(span:contains('↓')) {
-  color: #52c41a; /* 绿色表示下跌 */
-}
-
 /* 表格样式 */
 :deep(.ant-table) {
   width: 100%;