后端查看效果，不用拉取
This commit is contained in:
@@ -1,24 +1,45 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
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 React, { useEffect, useState, useMemo, useRef } from 'react';
|
||||
import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker, Tabs } from 'antd';
|
||||
import { Line, Heatmap } from '@ant-design/charts';
|
||||
import { getIndustryTrend, getIndustryAreaTrend, getSalaryTrend } from '@/services/analysis/industry';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import {
|
||||
import {
|
||||
TimeDimension,
|
||||
AnalysisType,
|
||||
IndustryTrendState,
|
||||
IndustryDataItem,
|
||||
ChartConfig
|
||||
ChartConfig,
|
||||
} from '@/types/analysis/industry';
|
||||
import {
|
||||
formatQuarter,
|
||||
formatDateForDisplay,
|
||||
convertApiData
|
||||
} from './utils';
|
||||
import { formatQuarter, formatDateForDisplay, convertApiData, convertSalaryData } from './utils';
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const flattenAreaData = (apiResponse: any) => {
|
||||
if (!apiResponse || typeof apiResponse !== 'object') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const flattenedData = [];
|
||||
|
||||
for (const month in apiResponse) {
|
||||
if (apiResponse.hasOwnProperty(month)) {
|
||||
const areas = apiResponse[month];
|
||||
|
||||
areas.forEach((area) => {
|
||||
flattenedData.push({
|
||||
name: area.name,
|
||||
time: area.time,
|
||||
value: parseInt(area.data) || 0,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return flattenedData;
|
||||
};
|
||||
|
||||
const IndustryTrendPage: React.FC = () => {
|
||||
const [params, setParams] = useState<IndustryTrendState>({
|
||||
@@ -26,26 +47,33 @@ const IndustryTrendPage: React.FC = () => {
|
||||
type: '岗位发布数量',
|
||||
startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
|
||||
endTime: dayjs().format('YYYY-MM'),
|
||||
selectedIndustry: ''
|
||||
selectedIndustry: '',
|
||||
selectedSalaryRange: '',
|
||||
analysisCategory: 'industry', // 默认显示行业分析
|
||||
});
|
||||
|
||||
const [allData, setAllData] = useState<IndustryDataItem[]>([]);
|
||||
const [areaData, setAreaData] = useState<any[]>([]);
|
||||
const [salaryData, setSalaryData] = useState<any[]>([]);
|
||||
const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
|
||||
const [availableSalaryRanges, setAvailableSalaryRanges] = useState<string[]>([]);
|
||||
const heatmapRef = useRef(null);
|
||||
|
||||
const { loading, run: fetchData } = useRequest(
|
||||
// 获取行业趋势数据
|
||||
const { loading: industryLoading, run: fetchIndustryData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
|
||||
return await getIndustryTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
@@ -53,25 +81,273 @@ const IndustryTrendPage: React.FC = () => {
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertApiData(data);
|
||||
setAllData(formattedData);
|
||||
|
||||
const industries = Array.from(
|
||||
new Set(formattedData.map((item: { category: any; }) => item.category))
|
||||
).filter(Boolean).sort();
|
||||
|
||||
|
||||
const industries = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
|
||||
setAvailableIndustries(industries);
|
||||
|
||||
|
||||
if (industries.length > 0 && !industries.includes(params.selectedIndustry)) {
|
||||
setParams(p => ({ ...p, selectedIndustry: industries[0] }));
|
||||
setParams((p) => ({ ...p, selectedIndustry: industries[0] }));
|
||||
}
|
||||
},
|
||||
onError: () => message.error('数据加载失败')
|
||||
}
|
||||
onError: (error) => {
|
||||
message.error('行业数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取地区趋势数据
|
||||
const { loading: areaLoading, run: fetchAreaData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getIndustryAreaTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (res) => {
|
||||
const formattedData = flattenAreaData(res);
|
||||
setAreaData(formattedData);
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('地区数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取薪资趋势数据
|
||||
const { loading: salaryLoading, run: fetchSalaryData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getSalaryTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertSalaryData(data);
|
||||
setSalaryData(formattedData);
|
||||
|
||||
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
|
||||
setAvailableSalaryRanges(ranges);
|
||||
|
||||
if (ranges.length > 0 && !ranges.includes(params.selectedSalaryRange)) {
|
||||
setParams((p) => ({ ...p, selectedSalaryRange: ranges[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('薪资数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 根据分析类别获取当前数据
|
||||
const currentData = useMemo(() => {
|
||||
if (params.analysisCategory === 'industry') {
|
||||
return allData
|
||||
.filter((item) => item.category === params.selectedIndustry)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, params.timeDimension),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (params.timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.originalDate.split('-');
|
||||
const [yearB, quarterB] = b.originalDate.split('-');
|
||||
|
||||
const quarterToNumber = (q: string) => {
|
||||
if (q.includes('第一')) return 1;
|
||||
if (q.includes('第二')) return 2;
|
||||
if (q.includes('第三')) return 3;
|
||||
if (q.includes('第四')) return 4;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return yearA === yearB
|
||||
? quarterToNumber(quarterA) - quarterToNumber(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else if (params.timeDimension === '年') {
|
||||
return parseInt(a.originalDate) - parseInt(b.originalDate);
|
||||
} else {
|
||||
return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
|
||||
}
|
||||
});
|
||||
} else if (params.analysisCategory === 'salary') {
|
||||
return salaryData
|
||||
.filter((item) => item.category === params.selectedSalaryRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, params.timeDimension),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (params.timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.originalDate.split('-');
|
||||
const [yearB, quarterB] = b.originalDate.split('-');
|
||||
|
||||
const quarterToNumber = (q: string) => {
|
||||
if (q.includes('第一')) return 1;
|
||||
if (q.includes('第二')) return 2;
|
||||
if (q.includes('第三')) return 3;
|
||||
if (q.includes('第四')) return 4;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return yearA === yearB
|
||||
? quarterToNumber(quarterA) - quarterToNumber(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else if (params.timeDimension === '年') {
|
||||
return parseInt(a.originalDate) - parseInt(b.originalDate);
|
||||
} else {
|
||||
return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
|
||||
}
|
||||
});
|
||||
}
|
||||
return [];
|
||||
}, [allData, salaryData, params]);
|
||||
|
||||
// 热力图配置
|
||||
const heatmapConfig = useMemo(() => {
|
||||
const sortedData = [...areaData].sort((a, b) => {
|
||||
if (params.timeDimension === '年') {
|
||||
return parseInt(a.time) - parseInt(b.time);
|
||||
} else if (params.timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.time.split('-Q');
|
||||
const [yearB, quarterB] = b.time.split('-Q');
|
||||
return yearA === yearB
|
||||
? parseInt(quarterA) - parseInt(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else {
|
||||
return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
|
||||
}
|
||||
});
|
||||
|
||||
// 计算最大值和阈值
|
||||
const maxValue = Math.max(...sortedData.map((item) => item.value), 1);
|
||||
const hotThreshold = maxValue * 0.8; // 热门阈值(前20%)
|
||||
const growthThreshold = maxValue * 0.5; // 增长阈值(前50%)
|
||||
|
||||
return {
|
||||
data: sortedData,
|
||||
height: 300,
|
||||
autoFit: false,
|
||||
xField: 'name',
|
||||
yField: 'time',
|
||||
colorField: 'value',
|
||||
mark: 'cell',
|
||||
style: {
|
||||
inset: 1,
|
||||
fillOpacity: 0.9,
|
||||
},
|
||||
cellSize: [100, 40],
|
||||
color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
|
||||
label: {
|
||||
text: (d: { value: number }) => {
|
||||
if (d.value >= 10000) return (d.value / 10000).toFixed(0) + 'w';
|
||||
if (d.value >= 1000) return (d.value / 1000).toFixed(0) + 'k';
|
||||
return d.value;
|
||||
},
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
textShadow: '0 0 3px rgba(0,0,0,0.7)',
|
||||
},
|
||||
position: 'inside',
|
||||
},
|
||||
xAxis: {
|
||||
title: {
|
||||
text: '区域',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
autoRotate: true,
|
||||
style: {
|
||||
fontSize: 11,
|
||||
fill: '#666',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: '时间',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
formatter: (text) => {
|
||||
if (params.timeDimension === '年') return `${text}年`;
|
||||
if (params.timeDimension === '季度') return text.replace('-Q', '年Q');
|
||||
return text.replace('-', '年').replace('-', '月');
|
||||
},
|
||||
style: {
|
||||
fontSize: 11,
|
||||
fill: '#666',
|
||||
},
|
||||
},
|
||||
sortable: false,
|
||||
},
|
||||
tooltip: {
|
||||
title: (d) => `${d.name} - ${d.time}`,
|
||||
field: 'value',
|
||||
valueFormatter: (v) => {
|
||||
if (v >= 10000) return (v / 10000).toFixed(1) + '万';
|
||||
if (v >= 1000) return (v / 1000).toFixed(1) + '千';
|
||||
return v;
|
||||
},
|
||||
pointerEvents: 'none',
|
||||
domStyles: {
|
||||
'g2-tooltip': {
|
||||
padding: '8px 12px',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
layout: 'horizontal',
|
||||
slidable: true,
|
||||
title: false,
|
||||
itemName: {
|
||||
style: {
|
||||
fill: '#666',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}, [areaData, params.timeDimension]);
|
||||
|
||||
const handleTimeDimensionChange = (value: TimeDimension) => {
|
||||
const now = dayjs();
|
||||
let newStartTime = '';
|
||||
|
||||
|
||||
if (value === '月') {
|
||||
newStartTime = now.subtract(5, 'month').format('YYYY-MM');
|
||||
} else if (value === '季度') {
|
||||
@@ -79,31 +355,35 @@ const IndustryTrendPage: React.FC = () => {
|
||||
} else {
|
||||
newStartTime = now.subtract(5, 'year').format('YYYY');
|
||||
}
|
||||
|
||||
setParams(p => ({
|
||||
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
timeDimension: value,
|
||||
startTime: newStartTime,
|
||||
endTime: value === '月' ? now.format('YYYY-MM') :
|
||||
value === '季度' ? now.format('YYYY-Q') :
|
||||
now.format('YYYY'),
|
||||
selectedIndustry: ''
|
||||
endTime:
|
||||
value === '月'
|
||||
? now.format('YYYY-MM')
|
||||
: value === '季度'
|
||||
? now.format('YYYY-Q')
|
||||
: now.format('YYYY'),
|
||||
selectedIndustry: params.analysisCategory === 'industry' ? '' : p.selectedIndustry,
|
||||
selectedSalaryRange: params.analysisCategory === 'salary' ? '' : p.selectedSalaryRange,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (dates: any, dateStrings: [string, string]) => {
|
||||
if (dates && dates[0] && dates[1]) {
|
||||
setParams(p => ({
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
startTime: dateStrings[0],
|
||||
endTime: dateStrings[1]
|
||||
endTime: dateStrings[1],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const disabledDate = (current: dayjs.Dayjs) => {
|
||||
const now = dayjs();
|
||||
|
||||
|
||||
if (params.timeDimension === '月') {
|
||||
return current.isAfter(now.endOf('month'));
|
||||
} else if (params.timeDimension === '季度') {
|
||||
@@ -113,68 +393,41 @@ const IndustryTrendPage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const currentIndustryData = useMemo(() => {
|
||||
if (!params.selectedIndustry || allData.length === 0) return [];
|
||||
|
||||
return allData
|
||||
.filter(item => item.category === params.selectedIndustry)
|
||||
.map(item => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, params.timeDimension)
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (params.timeDimension === '季度') {
|
||||
// 处理中文季度格式，如 "2024-第一季度" -> ["2024", "第一"]
|
||||
const [yearA, quarterA] = a.originalDate.split('-');
|
||||
const [yearB, quarterB] = b.originalDate.split('-');
|
||||
|
||||
// 转换中文季度为数字（"第一" -> 1, "第二" -> 2...）
|
||||
const quarterToNumber = (q: string) => {
|
||||
if (q.includes('第一')) return 1;
|
||||
if (q.includes('第二')) return 2;
|
||||
if (q.includes('第三')) return 3;
|
||||
if (q.includes('第四')) return 4;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return yearA === yearB
|
||||
? quarterToNumber(quarterA) - quarterToNumber(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else if (params.timeDimension === '年') {
|
||||
return parseInt(a.originalDate) - parseInt(b.originalDate);
|
||||
} else {
|
||||
return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
|
||||
}
|
||||
});
|
||||
}, [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')
|
||||
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: ChartConfig = {
|
||||
data: currentIndustryData,
|
||||
data: currentData,
|
||||
height: 180,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'cat',
|
||||
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
@@ -205,7 +458,10 @@ const IndustryTrendPage: React.FC = () => {
|
||||
{list.map((item, index) => {
|
||||
const { name, value, color } = item;
|
||||
return (
|
||||
<div key={index} style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div
|
||||
key={index}
|
||||
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
@@ -219,7 +475,10 @@ const IndustryTrendPage: React.FC = () => {
|
||||
></span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<b>{value}{params.type === '招聘增长率' ? '%' : ''}</b>
|
||||
<b>
|
||||
{value}
|
||||
{params.type === '招聘增长率' ? '%' : ''}
|
||||
</b>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -233,31 +492,71 @@ const IndustryTrendPage: React.FC = () => {
|
||||
tooltip: {
|
||||
showTitle: undefined,
|
||||
title: undefined,
|
||||
customContent: undefined
|
||||
}
|
||||
customContent: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [params.timeDimension, params.startTime, params.endTime, params.type]);
|
||||
if (params.analysisCategory === 'industry') {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
} else if (params.analysisCategory === 'salary') {
|
||||
fetchSalaryData();
|
||||
fetchAreaData();
|
||||
}
|
||||
}, [params.timeDimension, params.startTime, params.endTime, params.type, params.analysisCategory]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16 }}>
|
||||
<Card title="行业趋势分析" style={{ marginBottom: 24 }}>
|
||||
<Card title="趋势分析" style={{ marginBottom: 24 }}>
|
||||
<Tabs
|
||||
activeKey={params.analysisCategory}
|
||||
onChange={(key) => setParams(p => ({
|
||||
...p,
|
||||
analysisCategory: key as 'industry' | 'salary' | 'area',
|
||||
selectedIndustry: key === 'industry' && availableIndustries.length > 0 ? availableIndustries[0] : p.selectedIndustry,
|
||||
selectedSalaryRange: key === 'salary' && availableSalaryRanges.length > 0 ? availableSalaryRanges[0] : p.selectedSalaryRange
|
||||
}))}
|
||||
>
|
||||
<TabPane tab="行业趋势" key="industry" />
|
||||
<TabPane tab="薪资趋势" key="salary" />
|
||||
</Tabs>
|
||||
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Space size="middle" wrap>
|
||||
<Select
|
||||
value={params.selectedIndustry}
|
||||
onChange={(value) => setParams(p => ({ ...p, selectedIndustry: value }))}
|
||||
style={{ width: 150 }}
|
||||
loading={loading}
|
||||
placeholder="选择行业"
|
||||
disabled={availableIndustries.length === 0}
|
||||
>
|
||||
{availableIndustries.map(industry => (
|
||||
<Option key={industry} value={industry}>{industry}</Option>
|
||||
))}
|
||||
</Select>
|
||||
{params.analysisCategory === 'industry' && (
|
||||
<Select
|
||||
value={params.selectedIndustry}
|
||||
onChange={(value) => setParams((p) => ({ ...p, selectedIndustry: value }))}
|
||||
style={{ width: 150 }}
|
||||
loading={industryLoading}
|
||||
placeholder="选择行业"
|
||||
disabled={availableIndustries.length === 0}
|
||||
>
|
||||
{availableIndustries.map((industry) => (
|
||||
<Option key={industry} value={industry}>
|
||||
{industry}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{params.analysisCategory === 'salary' && (
|
||||
<Select
|
||||
value={params.selectedSalaryRange}
|
||||
onChange={(value) => setParams((p) => ({ ...p, selectedSalaryRange: value }))}
|
||||
style={{ width: 150 }}
|
||||
loading={salaryLoading}
|
||||
placeholder="选择薪资区间"
|
||||
disabled={availableSalaryRanges.length === 0}
|
||||
>
|
||||
{availableSalaryRanges.map((range) => (
|
||||
<Option key={range} value={range}>
|
||||
{range}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
|
||||
<Select
|
||||
value={params.timeDimension}
|
||||
@@ -270,19 +569,24 @@ const IndustryTrendPage: React.FC = () => {
|
||||
</Select>
|
||||
|
||||
<RangePicker
|
||||
picker={params.timeDimension === '月' ? 'month' :
|
||||
params.timeDimension === '季度' ? 'quarter' : 'year'}
|
||||
picker={
|
||||
params.timeDimension === '月'
|
||||
? 'month'
|
||||
: params.timeDimension === '季度'
|
||||
? 'quarter'
|
||||
: 'year'
|
||||
}
|
||||
value={getPickerValue()}
|
||||
onChange={handleDateRangeChange}
|
||||
style={{ width: 180 }}
|
||||
disabled={loading}
|
||||
disabled={industryLoading || areaLoading || salaryLoading}
|
||||
allowClear={false}
|
||||
disabledDate={disabledDate}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={params.type}
|
||||
onChange={(value) => setParams(p => ({ ...p, type: value }))}
|
||||
onChange={(value) => setParams((p) => ({ ...p, type: value }))}
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value="岗位发布数量">岗位数量</Option>
|
||||
@@ -291,89 +595,76 @@ const IndustryTrendPage: React.FC = () => {
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => fetchData()}
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
if (params.analysisCategory === 'industry') {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
} else if (params.analysisCategory === 'salary') {
|
||||
fetchSalaryData();
|
||||
fetchAreaData();
|
||||
}
|
||||
}}
|
||||
loading={industryLoading || areaLoading || salaryLoading}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
title={`${params.selectedIndustry || '请选择行业'}趋势 (${params.type})`}
|
||||
style={{ marginBottom: 24 }}
|
||||
bodyStyle={{ padding: '24px 12px' }}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{currentIndustryData.length > 0 ? (
|
||||
<Line {...chartConfig} />
|
||||
) : (
|
||||
<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={{
|
||||
{params.analysisCategory !== 'area' && (
|
||||
<Col span={24}>
|
||||
<Card
|
||||
title={
|
||||
params.analysisCategory === 'industry'
|
||||
? `${params.selectedIndustry || '请选择行业'}趋势 (${params.type})`
|
||||
: `${params.selectedSalaryRange || '请选择薪资区间'}趋势 (${params.type})`
|
||||
}
|
||||
style={{ marginBottom: 24 }}
|
||||
bodyStyle={{ padding: '24px 12px', height: 210 }}
|
||||
>
|
||||
<Spin spinning={params.analysisCategory === 'industry' ? industryLoading : salaryLoading}>
|
||||
{currentData.length > 0 ? (
|
||||
<Line {...chartConfig} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
industryLoading || salaryLoading
|
||||
? '数据加载中...'
|
||||
: params.analysisCategory === 'industry'
|
||||
? params.selectedIndustry
|
||||
? '当前时间段无数据'
|
||||
: '请先选择行业'
|
||||
: params.selectedSalaryRange
|
||||
? '当前时间段无数据'
|
||||
: '请先选择薪资区间'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
<Col span={24}>
|
||||
<Card
|
||||
title="区域分析"
|
||||
bodyStyle={{
|
||||
padding: 12,
|
||||
height: 300,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
height: 400,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<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'
|
||||
}}
|
||||
>
|
||||
<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'
|
||||
}}
|
||||
>
|
||||
<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'
|
||||
}}
|
||||
>
|
||||
<Empty description="技能分析预留位置" />
|
||||
{areaLoading ? (
|
||||
<Spin tip="数据加载中..." size="large" />
|
||||
) : areaData.length > 0 ? (
|
||||
<div style={{ height: '100%', width: '100%' }}>
|
||||
<Heatmap {...heatmapConfig} />
|
||||
</div>
|
||||
) : (
|
||||
<Empty description="暂无区域数据" />
|
||||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem } from '@/types/analysis/industry';
|
||||
import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem, AreaDataItem } from '@/types/analysis/industry';
|
||||
|
||||
export const formatQuarter: QuarterFormatter = (dateStr: string): QuarterFormat => {
|
||||
if (dateStr.includes('第')) return dateStr as QuarterFormat;
|
||||
@@ -77,4 +76,86 @@ export const convertApiData: ApiDataConverter = (apiData: any) => {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertAreaApiData = (apiData: any): AreaDataItem[] => {
|
||||
if (!apiData?.data) {
|
||||
console.warn('convertAreaApiData: apiData.data 为空');
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const result: AreaDataItem[] = [];
|
||||
|
||||
// 处理嵌套的月份数据
|
||||
if (typeof apiData.data === 'object' && !Array.isArray(apiData.data)) {
|
||||
Object.entries(apiData.data).forEach(([time, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
if (!item) return;
|
||||
const uniqueName = items.filter((i: any) => i.name === item.name).length > 1
|
||||
? `${item.name}_${index}`
|
||||
: item.name;
|
||||
result.push({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || time,
|
||||
x:uniqueName,
|
||||
y:time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
if (Array.isArray(apiData.data)) {
|
||||
return apiData.data.map((item: any) => ({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || '未知时间',
|
||||
x: item.name,
|
||||
y: item.time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertSalaryData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
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
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('薪资数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user