sdz/shihezi-admin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix:新增岗位分析五个图表

Browse Source
This commit is contained in:
yy
2025-06-09 11:18:07 +08:00
parent 4136170101
commit 1bb796b5ef
6 changed files with 1042 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

666
src/pages/Analysis/Industrytrend/index.tsx
View File

@@ -1,7 +1,13 @@
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 { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker } from 'antd';
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
import {
getIndustryTrend,
getIndustryAreaTrend,
getSalaryTrend,
getWorkYearTrend,
getEducationTrend,
} from '@/services/analysis/industry';
import dayjs from 'dayjs';
import { useRequest } from '@umijs/max';
import {
@@ -11,24 +17,44 @@ import {
IndustryDataItem,
ChartConfig,
} from '@/types/analysis/industry';
import { formatQuarter, formatDateForDisplay, convertApiData, convertSalaryData } from './utils';
import {
formatQuarter,
formatDateForDisplay,
convertApiData,
convertSalaryData,
convertWorkYearData,
convertEducationData,
} from './utils';
import {
getHeatmapConfig,
getIndustryChartConfig,
getSalaryChartConfig,
getWorkYearPieConfig,
getEducationBarConfig,
} from './components/chartconfigs';
import {
IndustryTrendCard,
AreaAnalysisCard,
SalaryTrendCard,
WorkYearCard,
EducationCard,
} from './components/chartcards';
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const flattenAreaData = (apiResponse: any) => {
if (!apiResponse || typeof apiResponse !== 'object') {
return [];
}
const flattenedData = [];
const flattenedData: { name: any; time: any; value: number }[] = [];
for (const month in apiResponse) {
if (apiResponse.hasOwnProperty(month)) {
const areas = apiResponse[month];
areas.forEach((area) => {
areas.forEach((area: { name: any; time: any; data: string }) => {
flattenedData.push({
name: area.name,
time: area.time,
@@ -49,7 +75,7 @@ const IndustryTrendPage: React.FC = () => {
endTime: dayjs().format('YYYY-MM'),
selectedIndustry: '',
selectedSalaryRange: '',
analysisCategory: 'industry', // 默认显示行业分析
selectedWorkYearRange: '',
});
const [allData, setAllData] = useState<IndustryDataItem[]>([]);
@@ -58,6 +84,12 @@ const IndustryTrendPage: React.FC = () => {
const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
const [availableSalaryRanges, setAvailableSalaryRanges] = useState<string[]>([]);
const heatmapRef = useRef(null);
const containerRef = useRef<HTMLDivElement>(null);
const [workYearData, setWorkYearData] = useState<any[]>([]);
const [availableWorkYearRanges, setAvailableWorkYearRanges] = useState<string[]>([]);
const [educationData, setEducationData] = useState<any[]>([]);
const [availableEducationLevels, setAvailableEducationLevels] = useState<string[]>([]);
const [selectedEducationLevel, setSelectedEducationLevel] = useState<string>('');
// 获取行业趋势数据
const { loading: industryLoading, run: fetchIndustryData } = useRequest(
@@ -130,16 +162,14 @@ const IndustryTrendPage: React.FC = () => {
// 获取薪资趋势数据
const { loading: salaryLoading, run: fetchSalaryData } = useRequest(
async () => {
let { startTime, endTime, timeDimension, type } = params;
if (timeDimension === '季度') {
startTime = formatQuarter(startTime);
endTime = formatQuarter(endTime);
}
const now = dayjs();
let startTime = now.subtract(1, 'year').format('YYYY-MM');
let endTime = now.format('YYYY-MM');
const timeDimension = '月';
return await getSalaryTrend({
timeDimension,
type,
type: '岗位发布数量',
startTime,
endTime,
});
@@ -152,8 +182,11 @@ const IndustryTrendPage: React.FC = () => {
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
.filter(Boolean)
.sort();
.sort((a, b) => {
const extractNumber = (str: string) => parseInt(str.replace(/[^0-9]/g, '') || 0);
return extractNumber(a) - extractNumber(b);
});
setAvailableSalaryRanges(ranges);
if (ranges.length > 0 && !ranges.includes(params.selectedSalaryRange)) {
@@ -166,183 +199,180 @@ const IndustryTrendPage: React.FC = () => {
},
);
// 根据分析类别获取当前数据
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 { loading: workYearLoading, run: fetchWorkYearData } = useRequest(
async () => {
const now = dayjs();
let startTime = now.subtract(1, 'year').format('YYYY-MM');
let endTime = now.format('YYYY-MM');
const timeDimension = '月';
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 await getWorkYearTrend({
timeDimension,
type: '岗位发布数量',
startTime,
endTime,
});
},
{
manual: true,
onSuccess: (data) => {
const formattedData = convertWorkYearData(data);
setWorkYearData(formattedData);
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 ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
.filter(Boolean)
.sort((a, b) => {
const order = ['应届', '1-3年', '3-5年', '5年以上'];
return order.indexOf(a) - order.indexOf(b);
});
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,
setAvailableWorkYearRanges(ranges);
if (ranges.length > 0 && !ranges.includes(params.selectedWorkYearRange)) {
setParams((p) => ({ ...p, selectedWorkYearRange: ranges[0] }));
}
},
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',
onError: (error) => {
message.error('工作经验数据加载失败');
},
xAxis: {
title: {
text: '区域',
style: { fontSize: 12 },
},
label: {
autoRotate: true,
style: {
fontSize: 11,
fill: '#666',
},
},
},
);
// 获取学历数据
const { loading: educationLoading, run: fetchEducationData } = useRequest(
async () => {
const now = dayjs();
let startTime = now.subtract(1, 'year').format('YYYY-MM');
let endTime = now.format('YYYY-MM');
const timeDimension = '月';
return await getEducationTrend({
timeDimension,
type: '岗位发布数量',
startTime,
endTime,
});
},
{
manual: true,
onSuccess: (data) => {
const formattedData = convertEducationData(data);
setEducationData(formattedData);
const levels = Array.from(new Set(formattedData.map((item: any) => item.category)))
.filter(Boolean)
.sort((a, b) => {
const order = ['不限', '初中及以下', '中专/中技', '大专', '本科', '硕士', '博士'];
return order.indexOf(a) - order.indexOf(b);
});
setAvailableEducationLevels(levels);
if (levels.length > 0 && !levels.includes(selectedEducationLevel)) {
setSelectedEducationLevel(levels[0]);
}
},
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,
onError: (error) => {
message.error('学历数据加载失败');
},
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 currentWorkYearData = useMemo(() => {
if (!params.selectedWorkYearRange || workYearData.length === 0) return [];
return workYearData
.filter((item) => item.category === params.selectedWorkYearRange)
.map((item) => ({
...item,
originalDate: item.date,
date: formatDateForDisplay(item.date, '月'),
}))
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
}, [workYearData, params.selectedWorkYearRange]);
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 === '季度') {
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();
}
});
}, [allData, params.selectedIndustry, params.timeDimension]);
const currentSalaryData = useMemo(() => {
if (!params.selectedSalaryRange || salaryData.length === 0) return [];
return salaryData
.filter((item) => item.category === params.selectedSalaryRange)
.map((item) => ({
...item,
originalDate: item.date,
date: formatDateForDisplay(item.date, '月'),
}))
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
}, [salaryData, params.selectedSalaryRange]);
const currentEducationData = useMemo(() => {
if (!selectedEducationLevel || educationData.length === 0) return [];
return educationData
.filter((item) => item.category === selectedEducationLevel)
.map((item) => ({
...item,
originalDate: item.date,
date: formatDateForDisplay(item.date, '月'),
}))
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
}, [educationData, selectedEducationLevel]);
const heatmapConfig = useMemo(
() => getHeatmapConfig(areaData, params.timeDimension),
[areaData, params.timeDimension],
);
const industryChartConfig = useMemo(
() => getIndustryChartConfig(currentIndustryData, params.type),
[currentIndustryData, params.type],
);
const salaryChartConfig = useMemo(
() => getSalaryChartConfig(currentSalaryData),
[currentSalaryData],
);
const workYearPieConfig = useMemo(
() => getWorkYearPieConfig(workYearData, params.selectedWorkYearRange),
[workYearData, params.selectedWorkYearRange],
);
const educationBarConfig = useMemo(
() => getEducationBarConfig(educationData, selectedEducationLevel),
[educationData, selectedEducationLevel],
);
const handleTimeDimensionChange = (value: TimeDimension) => {
const now = dayjs();
@@ -366,8 +396,7 @@ const IndustryTrendPage: React.FC = () => {
: value === '季度'
? now.format('YYYY-Q')
: now.format('YYYY'),
selectedIndustry: params.analysisCategory === 'industry' ? '' : p.selectedIndustry,
selectedSalaryRange: params.analysisCategory === 'salary' ? '' : p.selectedSalaryRange,
selectedIndustry: '',
}));
};
@@ -418,146 +447,19 @@ const IndustryTrendPage: React.FC = () => {
}
};
const chartConfig: ChartConfig = {
data: currentData,
height: 180,
xField: 'date',
yField: 'value',
seriesField: 'category',
xAxis: {
type: 'cat',
label: {
formatter: (text: string) => text,
},
},
yAxis: {
label: {
formatter: (val: string) => `${val}${params.type === '招聘增长率' ? '%' : ''}`,
},
},
point: {
size: 4,
shape: 'circle',
},
animation: {
appear: {
animation: 'path-in',
duration: 1000,
},
},
smooth: true,
interactions: [
{
type: 'tooltip',
cfg: {
render: (e, { title, items }) => {
const list = items.filter((item) => item.value);
return (
<div key={title} style={{ padding: '8px 12px' }}>
<h4 style={{ marginBottom: 8 }}>{title}</h4>
{list.map((item, index) => {
const { name, value, color } = item;
return (
<div
key={index}
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{
display: 'inline-block',
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: color,
marginRight: 8,
}}
></span>
<span>{name}</span>
</div>
<b>
{value}
{params.type === '招聘增长率' ? '%' : ''}
</b>
</div>
);
})}
</div>
);
},
},
},
],
legend: false,
tooltip: {
showTitle: undefined,
title: undefined,
customContent: undefined,
},
};
useEffect(() => {
if (params.analysisCategory === 'industry') {
fetchIndustryData();
fetchAreaData();
} else if (params.analysisCategory === 'salary') {
fetchSalaryData();
fetchAreaData();
}
}, [params.timeDimension, params.startTime, params.endTime, params.type, params.analysisCategory]);
fetchIndustryData();
fetchAreaData();
fetchSalaryData();
fetchWorkYearData();
fetchEducationData();
}, [params.timeDimension, params.startTime, params.endTime, params.type]);
return (
<div style={{ padding: 16 }}>
<div style={{ padding: 16 }} ref={containerRef}>
<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>
{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}
onChange={handleTimeDimensionChange}
@@ -579,7 +481,7 @@ const IndustryTrendPage: React.FC = () => {
value={getPickerValue()}
onChange={handleDateRangeChange}
style={{ width: 180 }}
disabled={industryLoading || areaLoading || salaryLoading}
disabled={industryLoading || areaLoading}
allowClear={false}
disabledDate={disabledDate}
/>
@@ -596,15 +498,10 @@ const IndustryTrendPage: React.FC = () => {
<Button
type="primary"
onClick={() => {
if (params.analysisCategory === 'industry') {
fetchIndustryData();
fetchAreaData();
} else if (params.analysisCategory === 'salary') {
fetchSalaryData();
fetchAreaData();
}
fetchIndustryData();
fetchAreaData();
}}
loading={industryLoading || areaLoading || salaryLoading}
loading={industryLoading || areaLoading}
>
查询
</Button>
@@ -612,60 +509,57 @@ const IndustryTrendPage: React.FC = () => {
</div>
<Row gutter={[16, 16]}>
{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 xs={24} lg={24}>
<IndustryTrendCard
loading={industryLoading}
currentIndustryData={currentIndustryData}
config={industryChartConfig}
availableIndustries={availableIndustries}
selectedIndustry={params.selectedIndustry}
onIndustryChange={(value) => setParams((p) => ({ ...p, selectedIndustry: value }))}
/>
</Col>
<Col span={24}>
<Card
title="区域分析"
bodyStyle={{
padding: 12,
height: 400,
position: 'relative',
}}
>
{areaLoading ? (
<Spin tip="数据加载中..." size="large" />
) : areaData.length > 0 ? (
<div style={{ height: '100%', width: '100%' }}>
<Heatmap {...heatmapConfig} />
</div>
) : (
<Empty description="暂无区域数据" />
)}
</Card>
{/* 区域分析和薪资趋势 - 中等屏幕下分成两列 */}
<Col xs={24} md={12} lg={12}>
<AreaAnalysisCard loading={areaLoading} areaData={areaData} config={heatmapConfig} />
</Col>
<Col xs={24} md={12} lg={12}>
<SalaryTrendCard
loading={salaryLoading}
currentSalaryData={currentSalaryData}
config={salaryChartConfig}
availableSalaryRanges={availableSalaryRanges}
selectedSalaryRange={params.selectedSalaryRange}
onSalaryRangeChange={(value) =>
setParams((p) => ({ ...p, selectedSalaryRange: value }))
}
/>
</Col>
{/* 工作经验和学历要求 - 中等屏幕下分成两列 */}
<Col xs={24} md={12} lg={12}>
<WorkYearCard
loading={workYearLoading}
workYearData={workYearData}
config={workYearPieConfig}
availableWorkYearRanges={availableWorkYearRanges}
selectedWorkYearRange={params.selectedWorkYearRange}
onWorkYearRangeChange={(value) =>
setParams((p) => ({ ...p, selectedWorkYearRange: value }))
}
/>
</Col>
<Col xs={24} md={12} lg={12}>
<EducationCard
loading={educationLoading}
educationData={educationData}
config={educationBarConfig}
availableEducationLevels={availableEducationLevels}
selectedEducationLevel={selectedEducationLevel}
onEducationLevelChange={setSelectedEducationLevel}
/>
</Col>
</Row>
</Card>
@@ -673,4 +567,4 @@ const IndustryTrendPage: React.FC = () => {
);
};
export default IndustryTrendPage;
export default IndustryTrendPage;