添加日期选择器

src/pages/Analysis/Industrytrend/index.tsx

@@ -1,76 +1,122 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { Card, Select, Button, Space, Spin, Empty, Row, Col, message } from 'antd';
+import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker } from 'antd';
 import { Line } from '@ant-design/charts';
 import { getIndustryTrend } from '@/services/analysis/industry';
 import dayjs from 'dayjs';
 import { useRequest } from '@umijs/max';
 
 const { Option } = Select;
+const { RangePicker } = DatePicker;
+
 type IndustryDataItem = {
   date: string;
   category: string;
   value: number;
 };
+const formatDateForDisplay = (dateStr: string, dimension: string): string => {
+  try {
+    if (dimension === '年') {
+      return dateStr.split('-')[0]; 
+    }
+    if (dimension === '季度') {
+      const [year, quarter] = dateStr.split('-Q');
+      return `${year}年Q${quarter}`; 
+    }
+    // 默认按月显示
+    const [year, month] = dateStr.split('-');
+    return `${year}年${month}月`; 
+  } catch (e) {
+    console.error('日期格式化错误:', e);
+    return dateStr;
+  }
+};
+
 const IndustryTrendPage: React.FC = () => {
   const [params, setParams] = useState({
     timeDimension: '月' as '月' | '季度' | '年',
     type: '岗位发布数量' as '岗位发布数量' | '招聘增长率',
-    startTime: dayjs().subtract(6, 'month').format('YYYY-MM'),
+    startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
     endTime: dayjs().format('YYYY-MM'),
     selectedIndustry: ''
   });
+
   const [allData, setAllData] = useState<IndustryDataItem[]>([]);
-  const [prevSelectedIndustry, setPrevSelectedIndustry] = useState('');
-  const { loading, run } = useRequest(
-    () => getIndustryTrend({
-      ...params,
-      startTime: formatTimeParam(params.startTime, params.timeDimension),
-      endTime: formatTimeParam(params.endTime, params.timeDimension)
-    }),
+  const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
+  const { loading, run: fetchData } = useRequest(
+    async () => {
+      try {
+        const resp = await getIndustryTrend({
+          timeDimension: params.timeDimension,
+          type: params.type,
+          startTime: formatTimeParam(params.startTime, params.timeDimension),
+          endTime: formatTimeParam(params.endTime, params.timeDimension)
+        });
+        return resp;
+      } catch (error) {
+        message.error('数据加载失败');
+        throw error;
+      }
+    },
     {
       manual: true,
-      onError: (error) => message.error('数据加载失败: ' + error.message),
-      onSuccess: (responseData) => {
-        const formattedData = convertApiData(responseData);
+      onSuccess: (data) => {
+        const formattedData = convertApiData(data);
         setAllData(formattedData);
-        const industryToSelect = prevSelectedIndustry || 
-                                (formattedData.length > 0 ? formattedData[0].category : '');
-        setParams(prev => ({ ...prev, selectedIndustry: industryToSelect }));
+        const industries = Array.from(
+          new Set(formattedData.map(item => item.category))
+        ).filter(Boolean).sort();
+        
+        setAvailableIndustries(industries);
+        if (industries.length > 0 && !industries.includes(params.selectedIndustry)) {
+          setParams(p => ({ ...p, selectedIndustry: industries[0] }));
+        }
       }
     }
   );
+
+  const formatTimeParam = (dateStr: string, dimension: string): string => {
+    try {
+      const date = dayjs(dateStr);
+      switch (dimension) {
+        case '季度': 
+          return `${date.year()}-Q${Math.ceil((date.month() + 1) / 3)}`;
+        case '年':
+          return `${date.year()}`;
+        default:
+          return date.format('YYYY-MM');
+      }
+    } catch (e) {
+      console.error('日期参数格式化错误:', e);
+      return dateStr;
+    }
+  };
+
   const convertApiData = (apiData: any): IndustryDataItem[] => {
     if (!apiData) return [];
     
     try {
-      const result: IndustryDataItem[] = [];
-      if (typeof apiData === 'object' && !Array.isArray(apiData)) {
-        Object.entries(apiData).forEach(([month, monthData]) => {
-          if (Array.isArray(monthData)) {
-            (monthData as any[]).forEach(item => {
-              const convertedItem = {
-                date: month,
-                category: item.name || item.category,
+      if (Array.isArray(apiData)) {
+        return apiData.map(item => ({
+          date: item.time || item.date,
+          category: item.name || item.category || '未知行业',
+          value: Number(item.data || item.value) || 0
+        }));
+      }
+      if (typeof apiData === 'object') {
+        const result: IndustryDataItem[] = [];
+        Object.entries(apiData).forEach(([date, items]) => {
+          if (Array.isArray(items)) {
+            items.forEach((item: any) => {
+              result.push({
+                date,
+                category: item.name || item.category || '未知行业',
                 value: Number(item.data || item.value) || 0
-              };
-              console.log('转换后的数据项:', convertedItem); 
-              result.push(convertedItem);
+              });
             });
           }
         });
         return result;
       }
-      if (Array.isArray(apiData)) {
-        return apiData.map(item => {
-          const convertedItem = {
-            date: item.time || item.date,
-            category: item.name || item.category,
-            value: Number(item.data || item.value) || 0
-          };
-          console.log('转换后的数据项:', convertedItem); 
-          return convertedItem;
-        });
-      }
       
       return [];
     } catch (error) {
@@ -78,40 +124,65 @@ const IndustryTrendPage: React.FC = () => {
       return [];
     }
   };
-  const industries = useMemo(() => {
-    if (allData.length === 0) return [];
-    const categories = new Set<string>();
-    allData.forEach(item => categories.add(item.category));
-    return Array.from(categories).sort();
-  }, [allData]);
-  const formatTimeParam = (dateStr: string, dimension: string) => {
-    const date = dayjs(dateStr);
-    switch (dimension) {
-      case '季度': return `${date.year()}-Q${Math.ceil((date.month() + 1) / 3)}`;
-      case '年': return `${date.year()}`;
-      default: return date.format('YYYY-MM');
+  const handleTimeDimensionChange = (value: '月' | '季度' | '年') => {
+    const now = dayjs();
+    let newStartTime = '';
+    switch (value) {
+      case '月':
+        newStartTime = now.subtract(6, 'month').format('YYYY-MM');
+        break;
+      case '季度':
+        newStartTime = now.subtract(6, 'quarter').format('YYYY-Q');
+        break;
+      case '年':
+      default:
+        newStartTime = now.subtract(5, 'year').format('YYYY');
+    }
+    setParams(p => ({
+      ...p,
+      timeDimension: value,
+      startTime: newStartTime,
+      endTime: value === '月' ? now.format('YYYY-MM') : 
+               value === '季度' ? now.format('YYYY-Q') : 
+               now.format('YYYY'),
+      selectedIndustry: ''
+    }));
+  };
+  const handleDateRangeChange = (dates: any, dateStrings: [string, string]) => {
+    if (dates && dates[0] && dates[1]) {
+      setParams(p => ({
+        ...p,
+        startTime: dateStrings[0],
+        endTime: dateStrings[1]
+      }));
     }
   };
-  const handleIndustryChange = (value: string) => {
-    setPrevSelectedIndustry(value);
-    setParams(p => ({ ...p, selectedIndustry: value }));
-  };
-
   const currentIndustryData = useMemo(() => {
-    if (!params.selectedIndustry) return [];
+    if (!params.selectedIndustry || allData.length === 0) return [];
     
-    const  filteredData = allData
+    return allData
       .filter(item => item.category === params.selectedIndustry)
       .map(item => ({
-        date: item.date,
-        category: item.category,
-        value: item.value ?? 0,
+        ...item,
+        date: formatDateForDisplay(item.date, params.timeDimension) 
       }))
       .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf());
-      console.log("当前行业数据 (过滤后):", filteredData);
-      return filteredData;
-  }, [allData, params.selectedIndustry]);
-  console.log("最终图表数据:", currentIndustryData);
+  }, [allData, params.selectedIndustry, params.timeDimension]);
+  const getPickerValue = () => {
+    try {
+      return [
+        dayjs(params.startTime, params.timeDimension === '年' ? 'YYYY' : 
+             params.timeDimension === '季度' ? 'YYYY-Q' : 'YYYY-MM'),
+        dayjs(params.endTime, params.timeDimension === '年' ? 'YYYY' : 
+             params.timeDimension === '季度' ? 'YYYY-Q' : 'YYYY-MM')
+      ];
+    } catch (e) {
+      console.error('日期解析错误:', e);
+      return null;
+    }
+  };
+
+  // 图表配置
   const chartConfig = {
     data: currentIndustryData,
     height: 180,
@@ -120,13 +191,8 @@ const IndustryTrendPage: React.FC = () => {
     seriesField: 'category',
     xAxis: {
       type: 'cat',
-      tickCount: 5,
       label: {
-        formatter: (text: string) => {
-          if (params.timeDimension === '年') return text.split('-')[0];
-          if (params.timeDimension === '季度') return text.split('-')[1];
-          return text.split('-')[1]; 
-        },
+        formatter: (text: string) => text, 
       },
     },
     yAxis: {
@@ -145,36 +211,35 @@ const IndustryTrendPage: React.FC = () => {
         duration: 1000,
       },
     },
+    smooth: true,
   };
 
-
+  // 初始化加载数据
   useEffect(() => {
-    run();
-  }, [params.timeDimension, params.startTime, params.endTime]);
+    fetchData();
+  }, [params.timeDimension, params.startTime, params.endTime, params.type]);
 
   return (
     <div style={{ padding: 16 }}>
-      <Card 
-        title="行业趋势分析"
-        style={{ marginBottom: 24 }}
-      >
-        <div style={{ marginBottom: 16 }}>
+      <Card title="行业趋势分析" style={{ marginBottom: 24 }}>
+        <div style={{ marginBottom: 24 }}>
           <Space size="middle" wrap>
             <Select
               value={params.selectedIndustry}
-              onChange={handleIndustryChange}
-              style={{ width: 180 }}
+              onChange={(value) => setParams(p => ({ ...p, selectedIndustry: value }))}
+              style={{ width: 150 }}
               loading={loading}
               placeholder="选择行业"
+              disabled={availableIndustries.length === 0}
             >
-              {industries.map(industry => (
+              {availableIndustries.map(industry => (
                 <Option key={industry} value={industry}>{industry}</Option>
               ))}
             </Select>
 
             <Select
               value={params.timeDimension}
-              onChange={value => setParams(p => ({ ...p, timeDimension: value }))}
+              onChange={handleTimeDimensionChange}
               style={{ width: 100 }}
             >
               <Option value="月">按月</Option>
@@ -182,10 +247,20 @@ const IndustryTrendPage: React.FC = () => {
               <Option value="年">按年</Option>
             </Select>
 
+            <RangePicker
+              picker={params.timeDimension === '月' ? 'month' : 
+                     params.timeDimension === '季度' ? 'quarter' : 'year'}
+              value={getPickerValue()}
+              onChange={handleDateRangeChange}
+              style={{ width: 180 }}
+              disabled={loading}
+              allowClear={false}
+            />
+
             <Select
               value={params.type}
-              onChange={value => setParams(p => ({ ...p, type: value }))}
-              style={{ width: 120 }}
+              onChange={(value) => setParams(p => ({ ...p, type: value }))}
+              style={{ width: 100 }}
             >
               <Option value="岗位发布数量">岗位数量</Option>
               <Option value="招聘增长率">增长率</Option>
@@ -193,90 +268,53 @@ const IndustryTrendPage: React.FC = () => {
 
             <Button
               type="primary"
-              onClick={() => run()}
+              onClick={() => fetchData()}
               loading={loading}
-              size="middle"
             >
               查询
             </Button>
           </Space>
         </div>
 
-        
         <Card 
-          title={`${params.selectedIndustry || '行业'}趋势`}
+          title={`${params.selectedIndustry || '请选择行业'}趋势 (${params.type})`}
           style={{ marginBottom: 24 }}
-          bodyStyle={{ 
-            padding: 12,
-            height: 180,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
+          bodyStyle={{ padding: '20px 12px' }}
         >
           <Spin spinning={loading}>
             {currentIndustryData.length > 0 ? (
               <Line {...chartConfig} />
             ) : (
-              <Empty description={loading ? '数据加载中...' : '请选择行业'} />
+              <Empty 
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={
+                  loading ? '数据加载中...' : 
+                  params.selectedIndustry ? '当前时间段无数据' : '请先选择行业'
+                } 
+              />
             )}
           </Spin>
         </Card>
 
+      
         <Row gutter={[16, 16]}>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="区域分析" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
+          <Col span={6}>
+            <Card title="区域分析" bordered={false}>
               <Empty description="热力地图预留位置" />
             </Card>
           </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="薪资趋势" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
+          <Col span={6}>
+            <Card title="薪资趋势" bordered={false}>
               <Empty description="薪资分析预留位置" />
             </Card>
           </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="经验要求" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
+          <Col span={6}>
+            <Card title="经验要求" bordered={false}>
               <Empty description="经验分析预留位置" />
             </Card>
           </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="技能需求" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
+          <Col span={6}>
+            <Card title="技能需求" bordered={false}>
               <Empty description="技能分析预留位置" />
             </Card>
           </Col>