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

岗位分析/ 用户分析 style

Browse Source 
用户管理查看简历
This commit is contained in:
bin
2025-12-01 17:35:58 +08:00
parent e6543185ab
commit 1ea8f6b609
9 changed files with 1711 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/Analysis/Industrytrend/components/chartcards.tsx
View File

@@ -1,7 +1,9 @@
import React from 'react';
import { Card, Empty, Select, Spin } from 'antd';
import { Card, Empty, Select, Spin, Tag } from 'antd';
import { Bar, Heatmap, Line, Pie } from '@ant-design/charts';
const { Option } = Select;
export const IndustryTrendCard = ({
loading,
currentIndustryData,
@@ -11,17 +13,33 @@ export const IndustryTrendCard = ({
onIndustryChange,
}) => (
<Card
title="行业趋势分析"
style={{ marginBottom: 16 }}
bodyStyle={{ padding: '12px', height: 250 }}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>📊 行业趋势分析</span>
<Tag color="blue" style={{ marginLeft: 'auto' }}>
趋势图
</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: '16px',
height: 280,
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8
}}
extra={
<Select
value={selectedIndustry}
onChange={onIndustryChange}
style={{ width: 180 }}
style={{ width: 200 }}
loading={loading}
placeholder="选择行业"
disabled={availableIndustries.length === 0}
suffixIcon="🏢"
>
{availableIndustries.map((industry: any) => (
<Option key={industry} value={industry}>
@@ -31,7 +49,7 @@ export const IndustryTrendCard = ({
</Select>
}
>
<Spin spinning={loading}>
<Spin spinning={loading} tip="数据加载中...">
{currentIndustryData.length > 0 ? (
<Line {...config} />
) : (
@@ -40,6 +58,7 @@ export const IndustryTrendCard = ({
description={
loading ? '数据加载中...' : selectedIndustry ? '当前时间段无数据' : '请先选择行业'
}
style={{ margin: '40px 0' }}
/>
)}
</Spin>
@@ -48,23 +67,36 @@ export const IndustryTrendCard = ({
export const AreaAnalysisCard = ({ loading, areaData, config }) => (
<Card
title="区域分析"
style={{ marginBottom: 16 }}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>🌍 区域分析</span>
<Tag color="green">热力图</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: 12,
height: 250,
padding: 16,
height: 280,
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8,
position: 'relative',
}}
>
{loading ? (
<Spin tip="数据加载中..." size="large" />
) : areaData.length > 0 ? (
<div style={{ height: '100%', width: '100%', minHeight: 300 }}>
<Spin spinning={loading} tip="数据加载中...">
{areaData.length > 0 ? (
<div style={{ height: '100%', width: '100%' }}>
<Heatmap {...config} />
</div>
) : (
<Empty description="暂无区域数据" />
<Empty
description="暂无区域数据"
style={{ margin: '40px 0' }}
/>
)}
</Spin>
</Card>
);
@@ -77,9 +109,22 @@ export const SalaryTrendCard = ({
onSalaryRangeChange,
}) => (
<Card
title="薪资区间趋势分析"
style={{ marginBottom: 16 }}
bodyStyle={{ padding: '12px', height: 250 }}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>💰 薪资区间趋势分析</span>
<Tag color="orange">趋势图</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: '16px',
height: 280,
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8
}}
extra={
<Select
value={selectedSalaryRange}
@@ -88,6 +133,7 @@ export const SalaryTrendCard = ({
loading={loading}
placeholder="选择薪资区间"
disabled={availableSalaryRanges.length === 0}
suffixIcon="💵"
>
{availableSalaryRanges.map((range) => (
<Option key={range} value={range}>
@@ -97,7 +143,7 @@ export const SalaryTrendCard = ({
</Select>
}
>
<Spin spinning={loading}>
<Spin spinning={loading} tip="数据加载中...">
{currentSalaryData.length > 0 ? (
<Line {...config} />
) : (
@@ -110,6 +156,7 @@ export const SalaryTrendCard = ({
? '当前时间段无数据'
: '请先选择薪资区间'
}
style={{ margin: '40px 0' }}
/>
)}
</Spin>
@@ -125,11 +172,21 @@ export const WorkYearCard = ({
onWorkYearRangeChange,
}) => (
<Card
title="工作经验要求分布"
style={{ marginBottom: 16 }}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>⏳ 工作经验要求分布</span>
<Tag color="purple">饼图</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: '12px',
height: 250,
padding: '16px',
height: 280,
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
@@ -139,10 +196,11 @@ export const WorkYearCard = ({
<Select
value={selectedWorkYearRange}
onChange={onWorkYearRangeChange}
style={{ width: 180 }}
style={{ width: 140 }}
loading={loading}
placeholder="选择经验要求"
disabled={availableWorkYearRanges.length === 0}
suffixIcon="👔"
>
{availableWorkYearRanges.map((range: any) => (
<Option key={range} value={range}>
@@ -152,7 +210,7 @@ export const WorkYearCard = ({
</Select>
}
>
<Spin spinning={loading}>
<Spin spinning={loading} tip="数据加载中...">
{workYearData && workYearData.length > 0 ? (
<div style={{ width: '100%', height: '100%', padding: 8 }}>
<Pie {...config} />
@@ -161,6 +219,7 @@ export const WorkYearCard = ({
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={loading ? '数据加载中...' : '暂无工作经验数据'}
style={{ margin: '40px 0' }}
/>
)}
</Spin>
@@ -176,17 +235,31 @@ export const EducationCard = ({
onEducationLevelChange,
}) => (
<Card
title="学历要求分布"
style={{ marginBottom: 16 }}
bodyStyle={{ padding: '12px', height: 250 }}
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>🎓 学历要求分布</span>
<Tag color="red">柱状图</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: '16px',
height: 280,
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8
}}
extra={
<Select
value={selectedEducationLevel}
onChange={onEducationLevelChange}
style={{ width: 180 }}
style={{ width: 140 }}
loading={loading}
placeholder="选择学历要求"
disabled={availableEducationLevels.length === 0}
suffixIcon="📚"
>
{availableEducationLevels.map((level) => (
<Option key={level} value={level}>
@@ -196,13 +269,14 @@ export const EducationCard = ({
</Select>
}
>
<Spin spinning={loading}>
<Spin spinning={loading} tip="数据加载中...">
{educationData.length > 0 ? (
<Bar {...config} />
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={loading ? '数据加载中...' : '暂无学历数据'}
style={{ margin: '40px 0' }}
/>
)}
</Spin>

333
src/pages/Analysis/Industrytrend/components/chartconfigs.tsx
View File

@@ -2,6 +2,20 @@ import { ChartConfig } from '@/types/analysis/industry';
import dayjs from 'dayjs';
import { formatDateForDisplay } from '../utils';
// 统一的颜色方案
const COLOR_PALETTE = [
'#1890ff',
'#36cfc9',
'#faad14',
'#f5222d',
'#722ed1',
'#fa8c16',
'#52c41a',
'#eb2f96',
'#13c2c2',
'#eb2f96',
];
export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
const sortedData = [...areaData].sort((a, b) => {
if (timeDimension === '年') {
@@ -19,7 +33,7 @@ export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
return {
data: sortedData,
height: 240,
height: 280,
autoFit: true,
xField: 'name',
yField: 'time',
@@ -29,7 +43,10 @@ export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
xAxis: {
title: {
text: '区域',
style: { fontSize: 12 },
style: {
fontSize: 12,
fill: '#666',
},
},
label: {
style: {
@@ -44,7 +61,10 @@ export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
yAxis: {
title: {
text: '时间',
style: { fontSize: 12 },
style: {
fontSize: 12,
fill: '#666',
},
},
label: {
formatter: (text: string) => {
@@ -59,39 +79,56 @@ export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
},
},
label: {
text: (d: { value: number }) => d.value.toString(),
text: (d: { value: number }) => (d.value > 0 ? d.value.toString() : ''),
position: 'inside',
style: {
fill: '#fff',
pointerEvents: 'none',
fontSize: 10,
fontWeight: 'bold',
},
},
// 关键配置：值越大，颜色越深；值越大，方块越大
scale: {
size: { range: [14, 14] },
color: { range: ['#dddddd', '#9ec8e0', '#5fa4cd', '#2e7ab6', '#114d90'] },
size: {
range: [12, 20], // 小值对应小方块，大值对应大方块
},
color: {
range: [
'#b7c2c3ff', // 浅色，对应小值
'#afd4fbff',
'#8ecaf0ff',
'#40a9ff',
'#1890ff',
'#0050b3', // 深色，对应大值
],
},
},
tooltip: {
title: (d: { name: any; time: any }) => `${d.name} - ${d.time}`,
field: 'value',
valueFormatter: (v: number) => v.toString(),
domStyles: {
'g2-tooltip': {
padding: '8px 12px',
borderRadius: '4px',
},
},
title: '区域岗位分布',
items: [
{ field: 'name', name: '区域' },
{ field: 'time', name: '时间' },
{ field: 'value', name: '岗位数量', valueFormatter: (v) => `${v} 个` },
],
},
interactions: [{ type: 'element-active' }],
responsive: true,
animation: {
appear: {
animation: 'scale-in',
duration: 1000,
},
},
};
};
export const getIndustryChartConfig = (currentIndustryData: any[], type: string): ChartConfig => ({
data: currentIndustryData,
height: 200,
height: 280,
xField: 'date',
yField: 'value',
seriesField: 'category',
color: COLOR_PALETTE,
xAxis: {
type: 'cat',
label: {
@@ -107,66 +144,37 @@ export const getIndustryChartConfig = (currentIndustryData: any[], type: string)
size: 4,
shape: 'circle',
},
line: {
size: 3,
style: {
lineCap: 'round',
},
},
animation: {
appear: {
animation: 'path-in',
duration: 1000,
duration: 1500,
},
},
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}
{type === '招聘增长率' ? '%' : ''}
</b>
</div>
);
})}
</div>
);
},
},
},
],
legend: false,
tooltip: {
showTitle: undefined,
title: undefined,
customContent: undefined,
title: '行业趋势',
items: [
{ field: 'category', name: '行业' },
{ field: 'date', name: '时间' },
{
field: 'value',
name: type === '招聘增长率' ? '增长率' : '岗位数量',
valueFormatter: (v) => `${v}${type === '招聘增长率' ? '%' : ''}`,
},
],
},
});
export const getSalaryChartConfig = (currentSalaryData: any[]): ChartConfig => ({
data: currentSalaryData,
height: 240,
height: 280,
xField: 'date',
yField: 'value',
seriesField: 'category',
@@ -252,26 +260,41 @@ export const getWorkYearPieConfig = (workYearData: any[], selectedWorkYearRange:
return {
data: filteredData,
angleField: 'value',
colorField: 'type',
colorField: 'category',
radius: 0.2,
innerRadius: 0.5,
label: {
text: (d: { type: any; value: any }) => `${d.type}\n ${d.value}`,
position: 'spider',
transform: [
{
type: 'overlapDodgeY',
},
],
},
legend: false,
tooltip: {
showTitle: true,
title: '工作经验分布',
fields: ['type', 'value'],
formatter: (datum: { type: any; value: any }) => ({
name: datum.type,
value: datum.value,
}),
items: [
{ field: 'date', name: '时间' },
{ field: 'category', name: '工作经验' },
{
field: 'value',
name: '岗位数量',
valueFormatter: (v) => `${v} 个`,
},
],
},
interactions: [{ type: 'element-active' }],
padding: 'auto',
padding: [20, 0, 40, 0],
autoFit: true,
color: COLOR_PALETTE,
animation: {
appear: {
animation: 'wave-in',
duration: 1000,
},
},
};
};
@@ -285,172 +308,86 @@ export const getEducationBarConfig = (educationData: any[], selectedEducationLev
'本科',
'硕士',
'博士',
'MBA/EMBA',
'留学-学士',
'留学-硕士',
'留学-博士',
];
const educationColorMap: Record<string, string> = {
不限: '#8884d8',
初中及以下: '#82ca9d',
'中专/中技': '#ffc658',
高中: '#ff8042',
大专: '#0088FE',
本科: '#00C49F',
硕士: '#FFBB28',
博士: '#FF8042',
'MBA/EMBA': '#8884d8',
'留学-学士': '#82ca9d',
'留学-硕士': '#ffc658',
'留学-博士': '#ff8042',
};
const cleanEducationData = educationData
.filter((item) => item && item.category && item.date && !isNaN(item.value))
.map((item) => ({
...item,
date: formatDateForDisplay(item.date, '月'),
category: item.category || '不限',
value: Number(item.value) || 0,
}));
if (!selectedEducationLevel) {
const educationSummary: Record<string, number> = {};
cleanEducationData.forEach((item) => {
if (!educationSummary[item.category]) {
educationSummary[item.category] = 0;
}
educationSummary[item.category] += item.value;
// 汇总数据
const summaryData = educationData.reduce((acc, item) => {
const existing = acc.find((d: any) => d.name === item.category);
if (existing) {
existing.value += item.value;
} else {
acc.push({
name: item.category,
value: item.value,
});
}
return acc;
}, [] as any[]);
const barData = Object.entries(educationSummary)
.filter(([_, value]) => value > 0)
.map(([name, value]) => ({
name,
value,
color: educationColorMap[name] || '#999',
}))
const barData = summaryData
.filter((item) => item.value > 0)
.sort((a, b) => educationLevelOrder.indexOf(a.name) - educationLevelOrder.indexOf(b.name));
return {
data: barData,
height: 200,
height: 280,
xField: 'value',
yField: 'name',
seriesField: 'name',
color: ({ name }: { name: string }) => educationColorMap[name] || '#999',
color: COLOR_PALETTE,
meta: {
name: { alias: '学历要求' },
value: { alias: '岗位数量' },
name: {
alias: '学历要求',
},
value: {
alias: '岗位数量',
},
},
xAxis: {
label: {
formatter: (val: string) => `${val}`,
style: {
fill: '#666',
fontSize: 11,
},
},
grid: {
line: {
style: {
stroke: '#f0f0f0',
lineDash: [4, 4],
lineDash: [3, 3],
},
},
},
},
yAxis: {
label: {
formatter: (text: string) => text,
style: {
fill: '#666',
fontSize: 11,
},
},
},
barStyle: {
radius: [2, 2, 0, 0],
radius: [4, 4, 0, 0],
},
tooltip: {
showTitle: true,
title: '学历要求分布',
fields: ['name', 'value'],
formatter: (datum: { name: any; value: any }) => ({
name: datum.name,
value: datum.value,
}),
domStyles: {
'g2-tooltip': {
background: 'rgba(255, 255, 255, 0.9)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
borderRadius: '4px',
},
items: [
{ field: 'name', name: '学历要求' },
{
field: 'value',
name: '岗位数量',
valueFormatter: (v) => `${v} 个`,
},
],
},
interactions: [{ type: 'element-active' }],
legend: false,
animation: {
appear: {
animation: 'scale-in-y',
animation: 'scale-in-x',
duration: 1000,
},
},
};
}
const timeData = cleanEducationData
.filter((item) => selectedEducationLevel === '全部' || item.category === selectedEducationLevel)
.sort((a, b) => {
const dateA = dayjs(a.date, 'YYYY年MM月').valueOf();
const dateB = dayjs(b.date, 'YYYY年MM月').valueOf();
return dateA - dateB;
});
return {
data: timeData,
height: 200,
xField: 'date',
yField: 'value',
seriesField: 'category',
color: educationColorMap[selectedEducationLevel] || '#999',
meta: {
date: {
alias: '时间',
type: 'cat',
values: timeData
.map((item) => item.date)
.sort((a, b) => {
const dateA = dayjs(a, 'YYYY年MM月').valueOf();
const dateB = dayjs(b, 'YYYY年MM月').valueOf();
return dateA - dateB;
}),
},
value: { alias: '岗位数量' },
},
barStyle: {
radius: [2, 2, 0, 0],
},
tooltip: {
showTitle: true,
title: `${selectedEducationLevel}趋势`,
fields: ['date', 'value'],
formatter: (datum: { date: any; value: any }) => ({ name: datum.date, value: datum.value }),
domStyles: {
'g2-tooltip': {
background: 'rgba(255, 255, 255, 0.9)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
borderRadius: '4px',
},
},
},
interactions: [{ type: 'element-active' }],
legend: false,
animation: {
appear: {
animation: 'scale-in-y',
duration: 1000,
},
},
xAxis: {
type: 'cat',
label: {
formatter: (text: string) => text,
},
},
};
};

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

@@ -64,7 +64,8 @@ const IndustryTrendPage: React.FC = () => {
const [params, setParams] = useState<IndustryTrendState>({
timeDimension: '月',
type: '岗位发布数量',
startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
// startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
startTime:dayjs().month(0).format('YYYY-MM'),
endTime: dayjs().format('YYYY-MM'),
selectedIndustry: '',
selectedSalaryRange: '',
@@ -374,7 +375,8 @@ const IndustryTrendPage: React.FC = () => {
let newStartTime = '';
if (value === '月') {
newStartTime = now.subtract(5, 'month').format('YYYY-MM');
// newStartTime = now.subtract(5, 'month').format('YYYY-MM');
newStartTime = dayjs().month(0).format('YYYY-MM');
} else if (value === '季度') {
newStartTime = now.subtract(6, 'quarter').format('YYYY-Q');
} else {
@@ -451,14 +453,14 @@ const IndustryTrendPage: React.FC = () => {
}, [params.timeDimension, params.startTime, params.endTime, params.type]);
return (
<div style={{ padding: 16 }} ref={containerRef}>
<Card title="趋势分析" style={{ marginBottom: 24 }}>
<div style={{ marginBottom: 24 }}>
<div ref={containerRef} style={{borderRadius:'20px', padding:'15px', background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)' }}>
<div style={{ marginBottom: 8, padding: '12px 16px', background: 'white', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
<Space size="middle" wrap>
<Select
value={params.timeDimension}
onChange={handleTimeDimensionChange}
style={{ width: 100 }}
size="middle"
>
<Option value="月">按月</Option>
<Option value="季度">按季度</Option>
@@ -475,16 +477,18 @@ const IndustryTrendPage: React.FC = () => {
}
value={getPickerValue()}
onChange={handleDateRangeChange}
style={{ width: 180 }}
style={{ width: 220 }}
disabled={industryLoading || areaLoading}
allowClear={false}
disabledDate={disabledDate}
size="middle"
/>
<Select
value={params.type}
onChange={(value) => setParams((p) => ({ ...p, type: value }))}
style={{ width: 100 }}
style={{ width: 120 }}
size="middle"
>
<Option value="岗位发布数量">岗位数量</Option>
<Option value="招聘增长率">增长率</Option>
@@ -497,13 +501,19 @@ const IndustryTrendPage: React.FC = () => {
fetchAreaData();
}}
loading={industryLoading || areaLoading}
size="middle"
style={{
background: 'linear-gradient(45deg, #1890ff, #36cfc9)',
border: 'none',
borderRadius: 6
}}
>
查询
</Button>
</Space>
</div>
<Row gutter={[16, 16]}>
<Row gutter={[8, 8]}>
{/* 行业趋势图表 - 全宽显示 */}
<Col xs={24} lg={24}>
<IndustryTrendCard
@@ -516,9 +526,13 @@ const IndustryTrendPage: React.FC = () => {
/>
</Col>
{/* 区域分析和薪资趋势 - 中等屏幕下分成两列 */}
{/* 区域分析和薪资趋势 */}
<Col xs={24} md={12} lg={12}>
<AreaAnalysisCard loading={areaLoading} areaData={areaData} config={heatmapConfig} />
<AreaAnalysisCard
loading={areaLoading}
areaData={areaData}
config={heatmapConfig}
/>
</Col>
<Col xs={24} md={12} lg={12}>
<SalaryTrendCard
@@ -532,7 +546,8 @@ const IndustryTrendPage: React.FC = () => {
}
/>
</Col>
{/* 工作经验和学历要求 - 中等屏幕下分成两列 */}
{/* 工作经验和学历要求 */}
<Col xs={24} md={12} lg={12}>
<WorkYearCard
loading={workYearLoading}
@@ -556,7 +571,7 @@ const IndustryTrendPage: React.FC = () => {
/>
</Col>
</Row>
</Card>
</div>
);
};

360
src/pages/Analysis/User/components/AreaStatics.tsx
View File

@@ -1,10 +1,14 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Table, Card, Select } from 'antd';
import { Card, Select, Row, Col, Statistic, Tag, Empty, Spin } from 'antd';
import { getUserStaticsByArea } from '@/services/analysis/user';
import { Pie, Column } from '@ant-design/charts';
import { Column, Pie } from '@ant-design/charts';
const { Option } = Select;
export default function AreaStatics({ data }) {
const [selectedArea, setSelectedArea] = useState('');
const [byArea, setByArea] = useState({});
const [loading, setLoading] = useState(false);
useEffect(() => {
if (data.length > 0) {
@@ -14,22 +18,28 @@ export default function AreaStatics({ data }) {
}, [data]);
const fetchAreaStatics = async (areaCode) => {
setLoading(true);
try {
const resData = await getUserStaticsByArea(areaCode);
if (resData.code === 200) {
const data = {
const processedData = {
gender: transformNum(resData.data.gender),
education: transformNum(resData.data.education),
position: transformNum(resData.data.position),
salary: transformNum(resData.data.salary),
age: transformNum(resData.data.age),
};
console.log(data.education);
setByArea(data);
setByArea(processedData);
}
} catch (error) {
console.error('获取区域数据失败:', error);
} finally {
setLoading(false);
}
};
const transformNum = useCallback((datas) => {
return datas.map((item) => ({ ...item, data: parseInt(item.data) }));
return (datas || []).map((item) => ({ ...item, data: parseInt(item.data) || 0 }));
}, []);
const handleAreaChange = (value) => {
@@ -37,161 +47,249 @@ export default function AreaStatics({ data }) {
fetchAreaStatics(value);
};
const educationColumns = [
{ title: '学历', dataIndex: 'name', key: 'name' },
{ title: '数量', dataIndex: 'data', key: 'data' },
];
// 统一的柱状图配置
const getColumnConfig = (data: any[], color: string, title: string) => ({
data: data || [],
xField: 'name',
yField: 'data',
height: 220,
autoFit: true,
style:{
columnWidthRatio: 0.4, // 统一柱状图宽度比例
},
color: color,
xAxis: {
label: {
style: {
fontSize: 12,
fill: '#666',
},
formatter: (text: string) => {
return text.length > 4 ? `${text.substring(0, 4)}...` : text;
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
yAxis: {
label: {
style: {
fontSize: 12,
fill: '#666',
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
tooltip: {
title: title,
items: [
{ field: 'name', name: '分类' },
{ field: 'data', name: '人数', valueFormatter: (v) => `${v} 人` },
],
},
interactions: [{ type: 'element-active' }],
animation: {
appear: {
animation: 'scale-in-y',
duration: 1000,
},
},
});
const genderColumns = [
{ title: '性别', dataIndex: 'name', key: 'name' },
{ title: '数量', dataIndex: 'data', key: 'data' },
];
// 教育程度柱状图配置
const educationConfig = getColumnConfig(byArea.education, '#36cfc9', '学历分布');
const positionColumns = [
{ title: '求职岗位', dataIndex: 'name', key: 'name' },
{ title: '数量', dataIndex: 'data', key: 'data' },
];
// 期望薪资柱状图配置
const salaryConfig = getColumnConfig(byArea.salary, '#faad14', '期望薪资分布');
const salaryColumns = [
{ title: '期望薪资', dataIndex: 'name', key: 'name' },
{ title: '数量', dataIndex: 'data', key: 'data' },
];
// 年龄分布柱状图配置
const ageConfig = getColumnConfig(byArea.age, '#722ed1', '年龄分布');
const ageColumns = [
{ title: '年龄阶段', dataIndex: 'name', key: 'name' },
{ title: '数量', dataIndex: 'data', key: 'data' },
];
// 性别饼图配置
const genderConfig = {
data: byArea.gender || [],
angleField: 'data',
colorField: 'name',
radius: 0.6,
height: 220,
label: {
text: (d) => `${d.name}\n${d.data}人`,
position: 'spider',
style: {
fontSize: 12,
textAlign: 'center',
},
transform: [
{
type: 'overlapDodgeY',
},
],
},
tooltip: {
title: '性别分布',
items: [
{ field: 'name', name: '性别' },
{ field: 'data', name: '人数', valueFormatter: (v) => `${v} 人` },
],
},
interactions: [{ type: 'element-active' }],
animation: {
appear: {
animation: 'wave-in',
duration: 1000,
},
},
};
// 计算用户总数
const totalUsers = byArea.gender ? byArea.gender.reduce((acc, cur) => acc + cur.data, 0) : 0;
return (
<div style={{ padding: '8px' }}>
<Card title="区域用户统计" style={{ marginBottom: '8px' }}>
<div
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>🌍 区域用户统计</span>
<Tag color="green">区域分析</Tag>
</div>
}
style={{
display: 'flex',
gap: '16px',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
bodyStyle={{
padding: '16px',
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8
}}
>
<div>
<Spin spinning={loading} tip="数据加载中...">
<div style={{ marginBottom: 16 }}>
<Row gutter={[16, 16]} align="middle">
<Col xs={24} md={8}>
<Select
style={{ width: '200px', marginBottom: '8px' }}
style={{ width: '100%' }}
placeholder="选择区域"
onChange={handleAreaChange}
value={selectedArea}
suffixIcon="📍"
>
{data.map((item) => (
<Select.Option key={item.dictValue} value={item.dictValue}>
<Option key={item.dictValue} value={item.dictValue}>
{item.dictLabel}
</Select.Option>
</Option>
))}
</Select>
</div>
<div>
</Col>
<Col xs={24} md={16}>
{byArea.gender && byArea.gender.length > 0 ? (
<div style={{ display: 'flex', flexWrap: 'nowrap', gap: '16px' }}>
<div style={{ display: 'flex', flexWrap: 'nowrap' }}>
<h4>用户数量: </h4>&nbsp; {byArea.gender.reduce((acc, cur) => acc + cur.data, 0)}
</div>
<div>男性: &nbsp;{byArea.gender.find((item) => item.name === '男')?.data || 0}</div>
<div>女性: &nbsp;{byArea.gender.find((item) => item.name === '女')?.data || 0}</div>
</div>
<Row gutter={[16, 16]}>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(24, 144, 255, 0.1)' }}>
<Statistic
title="总用户数"
value={totalUsers}
suffix="人"
/>
</Card>
</Col>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(64, 169, 255, 0.1)' }}>
<Statistic
title="男性用户"
value={byArea.gender.find(item => item.name === '男')?.data || 0}
suffix="人"
/>
</Card>
</Col>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(235, 47, 150, 0.1)' }}>
<Statistic
title="女性用户"
value={byArea.gender.find(item => item.name === '女')?.data || 0}
suffix="人"
/>
</Card>
</Col>
</Row>
) : (
<div>暂无数据</div>
<div style={{ textAlign: 'center', padding: 20 }}>
暂无用户数据
</div>
)}
</Col>
</Row>
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px' }}>
<Card title="学历分布" style={{ marginBottom: '8px' }}>
<Column
data={byArea.education}
xField="name"
yField="data"
label={{
text: (d) => `${d.data}人`,
textBaseline: 'bottom',
}}
axis={{
y: {
label: {
formatter: (v) => `${v}k`,
},
},
}}
style={{
radiusTopLeft: 3,
radiusTopRight: 3,
columnWidthRatio: 0.6,
inset: 0.5,
}}
/>
</Card>
{byArea.education && byArea.education.length > 0 ? (
<Row gutter={[16, 16]}>
{/* 学历分布 */}
<Col xs={24} md={14}>
<Card
title="求职岗位排行"
style={{ marginBottom: '8px', height: '600px', overflowY: 'auto' }}
>
<Table
columns={positionColumns}
dataSource={byArea.position}
pagination={false}
rowKey="name"
title="🎓 学历分布"
size="small"
scroll={{ y: 440 }}
/>
style={{ height: '100%' }}
>
<Column {...educationConfig} />
</Card>
</Col>
<Card title="期望薪资阶段" style={{ marginBottom: '8px' }}>
<Column
data={byArea.salary}
xField="name"
yField="data"
label={{
text: (d) => `${d.data}人`,
textBaseline: 'bottom',
}}
axis={{
y: {
label: {
formatter: (v) => `${v}k`,
},
},
}}
style={{
radiusTopLeft: 3,
radiusTopRight: 3,
columnWidthRatio: 0.6,
inset: 0.5,
}}
/>
{/* 性别分布 */}
<Col xs={24} md={5}>
<Card
title="👥 性别分布"
size="small"
style={{ height: '100%' }}
>
<Pie {...genderConfig} />
</Card>
</Col>
<Card title="年龄阶段分布">
<Column
data={byArea.age}
xField="name"
yField="data"
label={{
text: (d) => `${d.data}人`,
textBaseline: 'bottom',
}}
axis={{
y: {
label: {
formatter: (v) => `${v}k`,
},
},
}}
style={{
radiusTopLeft: 5,
radiusTopRight: 5,
columnWidthRatio: 0.3,
inset: 0.5,
}}
{/* 年龄分布 */}
<Col xs={24} md={5}>
<Card
title="📊 年龄分布"
size="small"
style={{ height: '100%' }}
>
<Column {...ageConfig} />
</Card>
</Col>
{/* 期望薪资 */}
<Col xs={24}>
<Card
title="💰 期望薪资分布"
size="small"
style={{ marginTop: 16 }}
>
<Column {...salaryConfig} />
</Card>
</Col>
</Row>
) : (
<Empty
description={selectedArea ? "该区域暂无用户数据" : "请选择区域"}
style={{ margin: '40px 0' }}
/>
)}
</Spin>
</Card>
</div>
</Card>
</div>
);
}

273
src/pages/Analysis/User/components/KeywordChart.tsx
View File

@@ -1,98 +1,239 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Column } from '@ant-design/charts';
import { Column, WordCloud } from '@ant-design/charts';
import { getKeyWordSearchRank } from '@/services/analysis/user';
import { Card, Select, Empty, Spin, Tag, Row, Col, Statistic } from 'antd';
interface KeywordChartProps {
data?: any[];
const { Option } = Select;
interface KeywordData {
keyWord: string;
searchCount: number;
rank?: number;
}
export default function KeywordChart({ data: initialData }: KeywordChartProps) {
const [data, setData] = useState(initialData || []);
export default function KeywordChart() {
const [data, setData] = useState<KeywordData[]>([]);
const [loading, setLoading] = useState(false);
const [timeType, setTimeType] = useState<'1' | '2' | '3'>('3');
const [displayMode, setDisplayMode] = useState<'column' | 'wordcloud'>('column');
const [totalSearches, setTotalSearches] = useState(0);
const fetchData = useCallback(
async (params?: { searchDate?: string; searchCount?: number; searchType?: 1 | 2 | 3 }) => {
const fetchData = useCallback(async (searchType: '1' | '2' | '3' = '3') => {
setLoading(true);
try {
const resData = await getKeyWordSearchRank({
searchDate: params?.searchDate || '2025-11-03',
// searchCount: params?.searchCount || 4,
searchType: params?.searchType || 3,
searchDate: '2025-11-03',
searchType: searchType,
});
if (resData.code === 200) {
setData(resData.rows);
const formattedData = resData.rows
.sort((a, b) => b.searchCount - a.searchCount)
.slice(0, 15)
.map((item, index) => ({
...item,
searchCount: Number(item.searchCount) || 0,
rank: index + 1,
}));
setData(formattedData);
// 计算总搜索次数
const total = formattedData.reduce((sum, item) => sum + item.searchCount, 0);
setTotalSearches(total);
}
},
[],
);
} catch (error) {
console.error('获取关键词数据失败:', error);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
const config = {
data,
fetchData(timeType);
}, [timeType]);
//
const columnConfig = {
data: data,
stack:true,
xField: 'keyWord',
yField: 'searchCount',
height: 350,
label: {
position: 'middle',
style: {
fill: '#FFFFFF',
opacity: 0.6,
},
height: 280,
autoFit: true,
style:{
columnWidthRatio:0.3,
},
// labels: [
// {
// text: 'searchCount',
// style: {
// fill: '#666',
// fontSize: 12,
// fontWeight: 600,
// textBaseline: 'bottom',
// dy: -6, // 向上偏移，避免与柱状图顶部重叠
// },
// position: 'top',
// }
// ],
xAxis: {
label: {
autoHide: true,
autoRotate: false,
style: {
fontSize: 12,
fill: '#666',
},
formatter: (text: string) => {
return text.length > 6 ? `${text.substring(0, 6)}...` : text;
},
},
meta: {
keyWord: { alias: '关键词' },
searchCount: { alias: '搜索次数' },
title: {
text: '关键词',
style: {
fontSize: 14,
fill: '#333',
fontWeight: 'bold',
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
yAxis: {
title: {
text: '搜索次数',
style: {
fontSize: 14,
fill: '#333',
fontWeight: 'bold',
},
},
label: {
style: {
fontSize: 12,
fill: '#666',
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
tooltip: {
title: '关键词搜索统计',
items: [
{ field: 'keyWord', name: '关键词' },
{ field: 'rank', name: '排名' },
{ field: 'searchCount', name: '搜索次数', valueFormatter: (v) => `${v} 次` },
],
},
interactions: [{ type: 'element-active' }],
animation: {
appear: {
animation: 'scale-in-y',
duration: 1000,
},
},
};
const getTimeText = () => {
switch(timeType) {
case '1': return '今日';
case '2': return '本周';
case '3': return '本月';
default: return '';
}
};
return (
<>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
<h3 style={{ marginRight: 16 }}>查询关键词搜索排行</h3>
<select
onChange={(e) => {
fetchData({
searchDate: '2025-11-03',
searchCount: 10,
searchType: Number(e.target.value) as 1 | 2 | 3,
});
}}
defaultValue="3"
>
<option value="1">日</option>
<option value="2">周</option>
<option value="3">月</option>
</select>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>🔍 查询关键词搜索排行</span>
<Tag color="purple">搜索分析</Tag>
</div>
<div
}
style={{
height: '400px',
overflowY: 'auto',
border: '1px solid #eee',
borderRadius: '4px',
padding: '8px',
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
>
{data?.map((item, index) => (
<div
key={index}
style={{
padding: '8px',
borderBottom: '1px solid #eee',
display: 'flex',
justifyContent: 'space-around',
bodyStyle={{
padding: '16px',
borderRadius: 8
}}
extra={
<Row gutter={[8, 8]} align="middle">
<Col>
<Select
value={timeType}
onChange={setTimeType}
style={{ width: 100 }}
>
<span>关键词：{item.keyWord}</span>
<span>搜索次数：{item.searchCount}</span>
</div>
))}
</div>
</>
<Option value="1">今日</Option>
<Option value="2">本周</Option>
<Option value="3">本月</Option>
</Select>
</Col>
</Row>
}
>
<Spin spinning={loading} tip="数据加载中...">
{/* 统计信息 */}
<Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(24, 144, 255, 0.1)', textAlign: 'center' }}>
<Statistic
title="总搜索次数"
value={totalSearches}
suffix="次"
/>
</Card>
</Col>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(250, 173, 20, 0.1)', textAlign: 'center' }}>
<Statistic
title="关键词数量"
value={data.length}
suffix="个"
/>
</Card>
</Col>
<Col xs={8}>
<Card size="small" style={{ background: 'rgba(114, 46, 209, 0.1)', textAlign: 'center' }}>
<Statistic
title="统计时段"
value={getTimeText()}
/>
</Card>
</Col>
</Row>
{/* 图表显示区域 */}
{data.length > 0 ? (
<Column {...columnConfig} />
) : (
<Empty
description="暂无搜索关键词数据"
style={{ margin: '80px 0' }}
/>
)}
</Spin>
</Card>
);
}

459
src/pages/Analysis/User/components/WantedPositionStatics.tsx
View File

@@ -1,83 +1,446 @@
import React, { useState, useEffect, useCallback } from 'react';
import { getWantedPositionStaticsCount } from '@/services/analysis/user';
import { Card, Table } from 'antd';
import { Card, Row, Col, Select, Empty, Spin, Tag, Statistic } from 'antd';
import { Column } from '@ant-design/charts';
interface PositionStatics {
const { Option } = Select;
interface PositionItem {
jobId: number;
jobName: string;
count: number;
sexCode?: string; // 可能为 '男' 或 '女'
staticsCount?: number;
}
interface getWantedPositionStaticsCountStaticsResult {
male: PositionStatics[];
female: PositionStatics[];
interface PositionStatics {
jobId: number;
jobName: string;
count: number;
percentage: number;
}
const WantedPositionStatics: React.FC = () => {
const [staticsData, setStaticsData] = useState<StaticsResult>({ male: [], female: [] });
const [malePositions, setMalePositions] = useState<PositionStatics[]>([]);
const [femalePositions, setFemalePositions] = useState<PositionStatics[]>([]);
const [loading, setLoading] = useState(false);
const [topCount, setTopCount] = useState<10 | 15 | 20>(10);
const [totalMale, setTotalMale] = useState(0);
const [totalFemale, setTotalFemale] = useState(0);
const [allPositions, setAllPositions] = useState<PositionItem[]>([]);
const fetchStatics = useCallback(async () => {
const resData = await getWantedPositionStaticsCount({ sexCode: 0 });
setLoading(true);
try {
const resData = await getWantedPositionStaticsCount();
if (resData.code === 200) {
const malePositions: Record<string, number> = {};
const femalePositions: Record<string, number> = {};
const positions = resData.data as PositionItem[];
setAllPositions(positions);
resData.data.forEach((item) => {
// 统计每个岗位的男女数量
const maleCounts: Record<number, number> = {};
const femaleCounts: Record<number, number> = {};
positions.forEach((item,index) => {
if (item.sexCode === '男') {
malePositions[item.jobName] = (malePositions[item.jobName] || 0) + 1;
maleCounts[item.jobId] = (maleCounts[item.jobId] || 0) + 1;
} else if (item.sexCode === '女') {
femalePositions[item.jobName] = (femalePositions[item.jobName] || 0) + 1;
femaleCounts[item.jobId] = (femaleCounts[item.jobId] || 0) + 1;
}
});
const result: StaticsResult = {
male: Object.entries(malePositions).map(([jobName, count]) => ({ jobName, count })),
female: Object.entries(femalePositions).map(([jobName, count]) => ({ jobName, count })),
};
// 计算总数
const maleTotal = Object.values(maleCounts).reduce((a, b) => a + b, 0);
const femaleTotal = Object.values(femaleCounts).reduce((a, b) => a + b, 0);
setStaticsData(result);
setTotalMale(maleTotal);
setTotalFemale(femaleTotal);
// 获取所有岗位的唯一列表
const uniqueJobs = Array.from(
new Map(positions.map(item => [item.jobId, item])).values()
);
// 处理男性数据
const processedMale = uniqueJobs
.map(job => ({
jobId: job.jobId,
jobName: job.jobName,
count: maleCounts[job.jobId] || 0,
percentage: maleTotal > 0 ? Math.round(((maleCounts[job.jobId] || 0) / maleTotal) * 100) : 0
}))
.filter(item => item.count > 0) // 只显示有数据的岗位
.sort((a, b) => b.count - a.count)
.slice(0, topCount);
// 处理女性数据
const processedFemale = uniqueJobs
.map(job => ({
jobId: job.jobId,
jobName: job.jobName,
count: femaleCounts[job.jobId] || 0,
percentage: femaleTotal > 0 ? Math.round(((femaleCounts[job.jobId] || 0) / femaleTotal) * 100) : 0
}))
.filter(item => item.count > 0) // 只显示有数据的岗位
.sort((a, b) => b.count - a.count)
.slice(0, topCount);
console.log(processedMale,processedFemale,'++++++++')
setMalePositions(processedMale);
setFemalePositions(processedFemale);
}
}, []);
} catch (error) {
console.error('获取期望岗位数据失败:', error);
} finally {
setLoading(false);
}
}, [topCount]);
useEffect(() => {
fetchStatics();
}, [fetchStatics]);
const columns = [
// 横向柱状图配置 - 男性
const maleColumnConfig = {
data: malePositions,
xField: 'count',
yField: 'jobName',
seriesField: 'jobName',
isGroup: false,
isStack: false,
height: 280,
autoFit: true,
columnWidthRatio: 0.6,
color: '#1890ff',
labels: [
{
title: '岗位名称',
dataIndex: 'jobName',
key: 'jobName',
text: 'count',
style: {
fill: '#666',
fontSize: 12,
fontWeight: 600,
},
position: 'right',
formatter: (datum: any) => `${datum.count}人`,
}
],
xAxis: {
title: {
text: '人数',
style: {
fontSize: 14,
fill: '#333',
fontWeight: 'bold',
},
},
label: {
style: {
fontSize: 12,
fill: '#666',
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
yAxis: {
title: null,
label: {
style: {
fontSize: 12,
fill: '#666',
},
formatter: (text: string) => {
return text.length > 10 ? `${text.substring(0, 10)}...` : text;
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
tooltip: {
title: '男性期望岗位',
items: [
{ field: 'jobName', name: '岗位名称' },
{ field: 'count', name: '人数', valueFormatter: (v) => `${v} 人` },
{ field: 'percentage', name: '占比', valueFormatter: (v) => `${v}%` },
],
},
interactions: [{ type: 'element-active' }],
animation: {
appear: {
animation: 'scale-in-x',
duration: 1000,
},
},
};
// 横向柱状图配置 - 女性
const femaleColumnConfig = {
data: femalePositions,
xField: 'count',
yField: 'jobName',
seriesField: 'jobName',
isGroup: false,
isStack: false,
height: 280,
autoFit: true,
columnWidthRatio: 0.6,
color: '#eb2f96',
labels: [
{
title: '数量',
dataIndex: 'count',
key: 'count',
text: 'count',
style: {
fill: '#666',
fontSize: 12,
fontWeight: 600,
},
];
position: 'right',
formatter: (datum: any) => `${datum.count}人`,
}
],
xAxis: {
title: {
text: '人数',
style: {
fontSize: 14,
fill: '#333',
fontWeight: 'bold',
},
},
label: {
style: {
fontSize: 12,
fill: '#666',
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
yAxis: {
title: null,
label: {
style: {
fontSize: 12,
fill: '#666',
},
formatter: (text: string) => {
return text.length > 10 ? `${text.substring(0, 10)}...` : text;
},
},
grid: {
line: {
style: {
stroke: '#e8e8e8',
lineWidth: 1,
lineDash: [3, 3],
},
},
alignTick: true,
},
},
tooltip: {
title: '女性期望岗位',
items: [
{ field: 'jobName', name: '岗位名称' },
{ field: 'count', name: '人数', valueFormatter: (v) => `${v} 人` },
{ field: 'percentage', name: '占比', valueFormatter: (v) => `${v}%` },
],
},
interactions: [{ type: 'element-active' }],
animation: {
appear: {
animation: 'scale-in-x',
duration: 1000,
},
},
};
// 如果没有数据，显示所有岗位的占位图
const showPlaceholder = malePositions.length === 0 && femalePositions.length === 0;
return (
<div style={{ padding: '8px', display: 'flex', width: '100%', height: '100%' }}>
<Card title="男性用户期望岗位统计" style={{ width: '50%' }}>
<Table
columns={columns}
dataSource={staticsData.male}
pagination={false}
rowKey="jobName"
size="small"
scroll={{ y: 440 }}
/>
</Card>
<Card title="女性用户期望岗位统计" style={{ width: '50%' }}>
<Table
columns={columns}
dataSource={staticsData.female}
pagination={false}
rowKey="jobName"
size="small"
scroll={{ y: 440 }}
/>
</Card>
<Spin spinning={loading} tip="数据加载中...">
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span>🎯 期望岗位统计分析</span>
<Tag color="orange">岗位分析</Tag>
</div>
}
style={{
borderRadius: 12,
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
marginBottom: 16
}}
bodyStyle={{
padding: '16px',
background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
borderRadius: 8
}}
extra={
<Select
value={topCount}
onChange={setTopCount}
style={{ width: 120 }}
size="middle"
>
<Option value={10}>显示前10</Option>
<Option value={15}>显示前15</Option>
<Option value={20}>显示前20</Option>
</Select>
}
>
{/* 统计数据行 */}
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
<Col xs={8} md={8} lg={8}>
<Card size="small" style={{ background: 'rgba(24, 144, 255, 0.1)', textAlign: 'center' }}>
<Statistic
title="男性用户"
value={totalMale}
suffix="人"
valueStyle={{ color: '#1890ff' }}
/>
</Card>
</Col>
<Col xs={8} md={8} lg={8}>
<Card size="small" style={{ background: 'rgba(235, 47, 150, 0.1)', textAlign: 'center' }}>
<Statistic
title="女性用户"
value={totalFemale}
suffix="人"
valueStyle={{ color: '#eb2f96' }}
/>
</Card>
</Col>
<Col xs={8} md={8} lg={8}>
<Card size="small" style={{ background: 'rgba(82, 196, 26, 0.1)', textAlign: 'center' }}>
<Statistic
title="总用户数"
value={totalMale + totalFemale}
suffix="人"
valueStyle={{ color: '#52c41a' }}
/>
</Card>
</Col>
</Row>
{showPlaceholder ? (
<Row gutter={[16, 16]}>
<Col xs={24} md={12} lg={12}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ color: '#1890ff' }}>👨 男性热门岗位</span>
<Tag color="blue">TOP {topCount}</Tag>
</div>
}
size="small"
style={{ height: '100%' }}
>
<Empty
description="暂无男性期望岗位数据"
style={{ margin: '40px 0' }}
/>
</Card>
</Col>
<Col xs={24} md={12} lg={12}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ color: '#eb2f96' }}>👩 女性热门岗位</span>
<Tag color="pink">TOP {topCount}</Tag>
</div>
}
size="small"
style={{ height: '100%' }}
>
<Empty
description="暂无女性期望岗位数据"
style={{ margin: '40px 0' }}
/>
</Card>
</Col>
</Row>
) : (
<Row gutter={[16, 16]}>
{/* 男性期望岗位 - 横向柱状图 */}
<Col xs={24} md={12} lg={12}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ color: '#1890ff' }}>👨 男性热门岗位</span>
<Tag color="blue">TOP {topCount}</Tag>
</div>
}
size="small"
style={{ height: '100%' }}
bodyStyle={{ padding: '12px', height: '100%' }}
>
{malePositions.length > 0 ? (
<div style={{ height: 250 }}>
<Column {...maleColumnConfig} />
</div>
) : (
<Empty
description="暂无男性期望岗位数据"
style={{ margin: '40px 0' }}
/>
)}
</Card>
</Col>
{/* 女性期望岗位 - 横向柱状图 */}
<Col xs={24} md={12} lg={12}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ color: '#eb2f96' }}>👩 女性热门岗位</span>
<Tag color="pink">TOP {topCount}</Tag>
</div>
}
size="small"
style={{ height: '100%' }}
bodyStyle={{ padding: '12px', height: '100%' }}
>
{femalePositions.length > 0 ? (
<div style={{ height:250 }}>
<Column {...femaleColumnConfig} />
</div>
) : (
<Empty
description="暂无女性期望岗位数据"
style={{ margin: '40px 0' }}
/>
)}
</Card>
</Col>
</Row>
)}
</Card>
</Spin>
);
};

19
src/pages/Analysis/User/index.tsx
View File

@@ -43,18 +43,19 @@ export default function userAnalysis() {
}, []);
return (
<div style={{ padding: '16px' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
<div style={{ width: '100%' }}>
<KeywordChart />
</div>
<div style={{ width: '100%' }}>
<WantedPositionStatics />
</div>
</div>
<div style={{borderRadius:'20px', padding:'15px', background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)' }}>
<div style={{ width: '100%' }}>
<AreaStatics data={areaDict} />
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' ,marginTop:'15px'}}>
<div style={{ width: '100%' }}>
<KeywordChart />
</div>
<div style={{ width: '100%'}}>
<WantedPositionStatics />
</div>
</div>
</div>
);
}

183
src/pages/Mobileusers/List/index.tsx
View File

@@ -1,62 +1,70 @@
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { FormattedMessage, useAccess } from '@umijs/max';
import React, { Fragment, useRef, useState, useEffect } from 'react';
import { useAccess } from '@umijs/max';
import { getCmsAppUserList } from '@/services/mobileusers/list';
import { getResumeDetail } from '@/services/resumeLibrary/resumeList'; // 简历库的简历详情接口
import { Button, FormInstance, message } from 'antd';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import { EyeOutlined, UserOutlined } from '@ant-design/icons';
import { getDictValueEnum } from '@/services/system/dict';
import DictTag from '@/components/DictTag';
import { exportCmsAppUserExport, getCmsAppUserList } from '@/services/mobileusers/list';
import ResumeDetail from '../components/detail';
const handleExport = async (values: API.MobileUser.ListParams) => {
const hide = message.loading('正在导出');
try {
await exportCmsAppUserExport(values);
hide();
message.success('导出成功');
return true;
} catch (error) {
hide();
message.error('导出失败，请重试');
return false;
}
};
function ManagementList() {
function MobileUserList() {
const access = useAccess();
const formTableRef = useRef<FormInstance>();
const actionRef = useRef<ActionType>();
const [educationEnum, setEducationEnum] = useState<any>([]);
const [experienceEnum, setExperienceEnum] = useState<any>([]);
const [areaEnum, setAreaEnum] = useState<any>([]);
const [sexEnum, setSexEnum] = useState<any>([]);
const [hotEnum, setHotEnum] = useState<any>([]);
const [politicalEnum, setPoliticalEnum] = useState<any>([]);
const [currentRow, setCurrentRow] = useState<API.MobileUser.ListRow>();
const [modalVisible, setModalVisible] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
// 字典枚举值
const [sexEnum, setSexEnum] = useState<any>([]);
const [educationEnum, setEducationEnum] = useState<any>([]);
const [politicalEnum, setPoliticalEnum] = useState<any>([]);
const [areaEnum, setAreaEnum] = useState<any>([]);
// 获取字典数据
useEffect(() => {
getDictValueEnum('education', true, true).then((data) => {
setEducationEnum(data);
});
getDictValueEnum('experience', true, true).then((data) => {
setExperienceEnum(data);
});
getDictValueEnum('area', true, true).then((data) => {
setAreaEnum(data);
});
getDictValueEnum('sys_user_sex', true).then((data) => {
setSexEnum(data);
});
getDictValueEnum('education', true, true).then((data) => {
setEducationEnum(data);
});
getDictValueEnum('political_affiliation', true, true).then((data) => {
setPoliticalEnum(data);
});
// getDictValueEnum('job_hot',true).then((data) => {
// setHotEnum(data)
// })
getDictValueEnum('area', true, true).then((data) => {
setAreaEnum(data);
});
}, []);
// 查看简历详情
const handleViewResume = async (userId: any) => {
setLoading(true);
try {
const res = await getResumeDetail(userId);
if (res.code === 200) {
setCurrentRow(res.data);
setModalVisible(true);
} else {
message.error(res.msg);
}
} catch (error) {
message.error('获取简历详情失败');
} finally {
setLoading(false);
}
};
// 查看用户行为（待定功能）
const handleViewBehavior = (userId: any) => {
message.info('用户行为查看功能开发中');
// TODO: 待后续开发
};
const columns: ProColumns<API.MobileUser.ListRow>[] = [
{
title: '用户名',
@@ -64,18 +72,6 @@ function ManagementList() {
valueType: 'text',
align: 'center',
},
{
title: '期望薪资',
dataIndex: 'minSalary',
valueType: 'text',
hideInSearch: true,
align: 'center',
render: (_, record) => (
<>
{record.salaryMin}-{record.salaryMax}
</>
),
},
{
title: '出生日期',
dataIndex: 'birthDate',
@@ -122,13 +118,49 @@ function ManagementList() {
return <DictTag enums={politicalEnum} value={record.politicalAffiliation} />;
},
},
{
title: '期望薪资',
dataIndex: 'minSalary',
valueType: 'text',
hideInSearch: true,
align: 'center',
render: (_, record) => (
<span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>
{record.salaryMin || '面议'} - {record.salaryMax || '面议'}
</span>
),
},
{
title: '操作',
hideInSearch: true,
align: 'center',
dataIndex: 'jobId',
width: 200,
render: (jobId, record) => [],
dataIndex: 'userId',
width: 240,
render: (userId, record) => (
<div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
<Button
type="primary"
size="small"
key="resume"
icon={<EyeOutlined />}
loading={loading && currentRow?.userId === userId}
hidden={!access.hasPerms('mobileusers:list:viewResume')}
onClick={() => handleViewResume(userId)}
>
用户简历
</Button>
<Button
type="default"
size="small"
key="behavior"
icon={<UserOutlined />}
hidden={!access.hasPerms('mobileusers:list:viewBehavior')}
onClick={() => handleViewBehavior(userId)}
>
用户行为
</Button>
</div>
),
},
];
@@ -136,42 +168,39 @@ function ManagementList() {
<Fragment>
<div style={{ width: '100%', float: 'right' }}>
<ProTable<API.MobileUser.ListRow>
// params 是需要自带的参数
// 这个参数优先级更高，会覆盖查询表单的参数
actionRef={actionRef}
formRef={formTableRef}
rowKey="jobId"
key="index"
rowKey="userId"
key="mobileUserIndex"
columns={columns}
request={(params) =>
getCmsAppUserList({ ...params } as API.MobileUser.ListParams).then((res) => {
console.log(params);
const result = {
search={{
labelWidth: 120,
}}
request={async (
params: API.MobileUser.ListParams & {
pageSize?: number;
current?: number;
},
) => {
const res = await getCmsAppUserList({ ...params } as API.MobileUser.ListParams);
return {
data: res.rows,
total: res.total,
success: true,
};
return result;
})
}
toolBarRender={() => [
<Button
type="primary"
key="export"
hidden={!access.hasPerms('system:user:export')}
onClick={async () => {
const searchVal = formTableRef.current && formTableRef.current.getFieldsValue();
handleExport(searchVal as API.MobileUser.ListParams);
}}
>
<PlusOutlined />
<FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
</Button>,
]}
/>
</div>
<ResumeDetail
open={modalVisible}
values={currentRow}
onCancel={() => {
setModalVisible(false);
setCurrentRow(undefined);
}}
/>
</Fragment>
);
}
export default ManagementList;
export default MobileUserList;

402
src/pages/Mobileusers/components/detail.tsx Normal file
View File

@@ -0,0 +1,402 @@
import { Modal, Card, Row, Col, Divider, Tag, Typography, Avatar, Empty } from 'antd';
import React, { useEffect, useState } from 'react';
import { getDictValueEnum } from '@/services/system/dict';
import DictTag from '@/components/DictTag';
const { Text, Paragraph, Title } = Typography;
export type ResumeDetailProps = {
onCancel: (flag?: boolean, formVals?: unknown) => void;
open: boolean;
values?: any;
};
const ResumeDetail: React.FC<ResumeDetailProps> = (props) => {
const [sexEnum, setSexEnum] = useState<any>([]);
const [educationEnum, setEducationEnum] = useState<any>([]);
const [politicalEnum, setPoliticalEnum] = useState<any>([]);
const [areaEnum, setAreaEnum] = useState<any>([]);
// 获取字典数据
useEffect(() => {
getDictValueEnum('sys_user_sex', true).then((data) => {
setSexEnum(data);
});
getDictValueEnum('education', true, true).then((data) => {
setEducationEnum(data);
});
getDictValueEnum('political_affiliation', true, true).then((data) => {
setPoliticalEnum(data);
});
getDictValueEnum('area', true, true).then((data) => {
setAreaEnum(data);
});
}, []);
const handleCancel = () => {
props.onCancel();
};
const { values } = props;
// 格式化时间显示
const formatTimeRange = (start: string, end: string) => {
if (!start && !end) return '';
return `${start || ''} - ${end || '至今'}`;
};
// 渲染空状态
const renderEmpty = (description: string) => (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={description}
style={{ margin: '20px 0' }}
/>
);
return (
<Modal
title={
<div style={{ textAlign: 'center', fontSize: 18, fontWeight: 'bold' }}>
{values?.name || '用户'} - 简历详情
</div>
}
open={props.open}
width={1100}
onCancel={handleCancel}
footer={null}
bodyStyle={{ maxHeight: '80vh', overflowY: 'auto', padding: '24px' }}
>
{/* 头部基本信息卡片 */}
<Card
style={{
marginBottom: 24,
borderRadius: 8,
border: '1px solid #f0f0f0',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
}}
>
<Row gutter={24}>
{/* 头像区域 */}
<Col span={6}>
<div style={{ textAlign: 'center' }}>
{values?.avatar ? (
<Avatar
size={120}
src={values.avatar}
style={{
borderRadius: '50%',
border: '4px solid #e8f4fd',
marginBottom: 16,
}}
/>
) : (
<Avatar
size={120}
style={{
backgroundColor: '#1890ff',
fontSize: 36,
marginBottom: 16,
borderRadius: '50%',
border: '4px solid #e8f4fd',
}}
>
{values?.name?.charAt(0) || 'U'}
</Avatar>
)}
<div style={{ fontSize: 20, fontWeight: 'bold', color: '#1890ff' }}>
{values?.name || '未填写'}
</div>
<div style={{ color: '#666', marginTop: 4 }}>
{values?.jobTitle?.join(' / ') || '暂无期望岗位'}
</div>
</div>
</Col>
{/* 详细信息区域 */}
<Col span={18}>
<Row gutter={[16, 16]}>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>性别：</div>
<div style={{ fontWeight: 'bold' }}>
<DictTag enums={sexEnum} value={values?.sex} />
</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>年龄：</div>
<div style={{ fontWeight: 'bold' }}>{values?.age || '未填写'}</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>学历：</div>
<div style={{ fontWeight: 'bold' }}>
<DictTag enums={educationEnum} value={values?.education} />
</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>手机号：</div>
<div style={{ fontWeight: 'bold' }}>{values?.phone || '未填写'}</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>政治面貌：</div>
<div style={{ fontWeight: 'bold' }}>
<DictTag enums={politicalEnum} value={values?.politicalAffiliation} />
</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>出生日期：</div>
<div style={{ fontWeight: 'bold' }}>{values?.birthDate || '未填写'}</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>工作年限：</div>
<div style={{ fontWeight: 'bold' }}>{values?.workYears || '未填写'}</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>期望工作地：</div>
<div style={{ fontWeight: 'bold' }}>
<DictTag enums={areaEnum} value={values?.area} />
</div>
</div>
</Col>
<Col span={8}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#999', minWidth: 80 }}>期望薪资：</div>
<div style={{ fontWeight: 'bold', color: '#ff4d4f' }}>
{values?.salaryMin || '面议'} - {values?.salaryMax || '面议'} 元/月
</div>
</div>
</Col>
</Row>
{/* 附加信息 */}
<Divider style={{ margin: '16px 0' }} />
<Row gutter={16}>
<Col span={12}>
<div style={{ display: 'flex' }}>
<div style={{ color: '#999', minWidth: 80 }}>毕业院校：</div>
<div>{values?.graduationSchool || '未填写'}</div>
</div>
</Col>
<Col span={12}>
<div style={{ display: 'flex' }}>
<div style={{ color: '#999', minWidth: 80 }}>就读专业：</div>
<div>{values?.major || '未填写'}</div>
</div>
</Col>
<Col span={24} style={{ marginTop: 8 }}>
<div style={{ display: 'flex' }}>
<div style={{ color: '#999', minWidth: 80 }}>居住地址：</div>
<div>{values?.residenceAddress || '未填写'}</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Card>
{/* 个人介绍与求职意向 - 新布局 */}
<Card
title={
<div style={{ fontSize: 16, fontWeight: 'bold', color: '#1890ff' }}>
📋 个人介绍与求职意向
</div>
}
style={{
marginBottom: 24,
borderRadius: 8,
border: '1px solid #f0f0f0',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
}}
>
<Row gutter={24}>
<Col span={24} style={{ marginBottom: 20 }}>
<Title level={5} style={{ color: '#666', marginBottom: 12 }}>
<span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
个人简要介绍
</Title>
<Paragraph
style={{
padding: 16,
backgroundColor: '#f8f9fa',
borderRadius: 6,
lineHeight: 1.8,
minHeight: 60,
color: '#333',
}}
>
{values?.introduction || '暂无个人介绍'}
</Paragraph>
</Col>
<Col span={24} style={{ marginBottom: 20 }}>
<Title level={5} style={{ color: '#666', marginBottom: 12 }}>
<span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
求职意向岗位
</Title>
<div style={{ padding: '0 16px' }}>
{values?.jobTitle?.length > 0 ? (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
{values.jobTitle.map((job: string, index: number) => (
<Tag
key={index}
color="blue"
style={{
padding: '4px 12px',
borderRadius: 4,
fontSize: 14,
marginBottom: 8,
}}
>
{job}
</Tag>
))}
</div>
) : (
<Paragraph
style={{
padding: 16,
backgroundColor: '#f8f9fa',
borderRadius: 6,
lineHeight: 1.8,
color: '#999',
}}
>
{values?.jobIntention || '暂无求职意向'}
</Paragraph>
)}
</div>
</Col>
<Col span={24}>
<Title level={5} style={{ color: '#666', marginBottom: 12 }}>
<span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
自我评价
</Title>
<Paragraph
style={{
padding: 16,
backgroundColor: '#f8f9fa',
borderRadius: 6,
lineHeight: 1.8,
minHeight: 60,
color: '#333',
}}
>
{values?.selfEvaluation || '暂无自我评价'}
</Paragraph>
</Col>
</Row>
</Card>
{/* 工作经历 - 新布局 */}
<Card
title={
<div style={{ fontSize: 16, fontWeight: 'bold', color: '#1890ff' }}>
💼 工作经历 ({values?.workExp?.length || 0})
</div>
}
style={{
marginBottom: 24,
borderRadius: 8,
border: '1px solid #f0f0f0',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
}}
>
{values?.workExp?.length > 0 ? (
<div style={{ maxHeight: 400, overflowY: 'auto' }}>
{values.workExp.map((work: any, index: number) => (
<div
key={index}
style={{
padding: '20px',
marginBottom: 16,
border: '1px solid #e8e8e8',
borderRadius: 8,
backgroundColor: index % 2 === 0 ? '#fafafa' : '#fff',
transition: 'all 0.3s',
':hover': {
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
transform: 'translateY(-2px)',
},
}}
>
<Row justify="space-between" align="top">
<Col span={16}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
<Title level={5} style={{ margin: 0, marginRight: 12 }}>
{work.company || '未填写公司'}
</Title>
{work.isFullTime !== null && (
<Tag
color={work.isFullTime ? 'blue' : 'orange'}
style={{ fontSize: 12, height: 20, lineHeight: '18px' }}
>
{work.isFullTime ? '全职' : '兼职'}
</Tag>
)}
</div>
<div style={{ marginBottom: 8 }}>
<Text strong style={{ marginRight: 16 }}>
{work.position || '未填写职位'}
</Text>
<Text type="secondary">部门：{work.department || '未填写'}</Text>
</div>
{work.duty && (
<Paragraph
style={{
color: '#666',
lineHeight: 1.6,
marginBottom: 8,
fontSize: 14,
}}
>
{work.duty}
</Paragraph>
)}
</Col>
<Col span={8}>
<div style={{ textAlign: 'right' }}>
<div
style={{
color: '#1890ff',
fontSize: 14,
fontWeight: 'bold',
marginBottom: 4,
}}
>
{formatTimeRange(work.startTime, work.endTime)}
</div>
{work.salary && (
<div style={{ color: '#ff4d4f', fontSize: 14, fontWeight: 'bold' }}>
薪资：{work.salary}
</div>
)}
</div>
</Col>
</Row>
</div>
))}
</div>
) : (
renderEmpty('暂无工作经历')
)}
</Card>
</Modal>
);
};
export default ResumeDetail;