+
+
-
+
{/* 行业趋势图表 - 全宽显示 */}
{
/>
- {/* 区域分析和薪资趋势 - 中等屏幕下分成两列 */}
+ {/* 区域分析和薪资趋势 */}
-
+
{
}
/>
- {/* 工作经验和学历要求 - 中等屏幕下分成两列 */}
+
+ {/* 工作经验和学历要求 */}
{
/>
-
+
);
};
diff --git a/src/pages/Analysis/User/components/AreaStatics.tsx b/src/pages/Analysis/User/components/AreaStatics.tsx
index 91172ab..752f0f1 100644
--- a/src/pages/Analysis/User/components/AreaStatics.tsx
+++ b/src/pages/Analysis/User/components/AreaStatics.tsx
@@ -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) => {
- const resData = await getUserStaticsByArea(areaCode);
- if (resData.code === 200) {
- const data = {
- 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);
+ setLoading(true);
+ try {
+ const resData = await getUserStaticsByArea(areaCode);
+ if (resData.code === 200) {
+ 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),
+ };
+ 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 (
-
-
-
-
-
-
-
- {byArea.gender && byArea.gender.length > 0 ? (
-
-
-
用户数量:
{byArea.gender.reduce((acc, cur) => acc + cur.data, 0)}
+
+ 🌍 区域用户统计
+ 区域分析
+
+ }
+ style={{
+ 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
+ }}
+ >
+
+
+
+
+
+
+
+ {byArea.gender && byArea.gender.length > 0 ? (
+
+
+
+
+
+
+
+
+ item.name === '男')?.data || 0}
+ suffix="人"
+ />
+
+
+
+
+ item.name === '女')?.data || 0}
+ suffix="人"
+ />
+
+
+
+ ) : (
+
+ 暂无用户数据
- 男性: {byArea.gender.find((item) => item.name === '男')?.data || 0}
- 女性: {byArea.gender.find((item) => item.name === '女')?.data || 0}
-
暂无数据
- )}
-
+ )}
+
+
-
-
- `${d.data}人`,
- textBaseline: 'bottom',
- }}
- axis={{
- y: {
- label: {
- formatter: (v) => `${v}k`,
- },
- },
- }}
- style={{
- radiusTopLeft: 3,
- radiusTopRight: 3,
- columnWidthRatio: 0.6,
- inset: 0.5,
- }}
- />
-
-
-
-
+ {byArea.education && byArea.education.length > 0 ? (
+
+ {/* 学历分布 */}
+
+
+
+
+
-
- `${d.data}人`,
- textBaseline: 'bottom',
- }}
- axis={{
- y: {
- label: {
- formatter: (v) => `${v}k`,
- },
- },
- }}
- style={{
- radiusTopLeft: 3,
- radiusTopRight: 3,
- columnWidthRatio: 0.6,
- inset: 0.5,
- }}
- />
-
+ {/* 性别分布 */}
+
+
+
+
+
-
- `${d.data}人`,
- textBaseline: 'bottom',
- }}
- axis={{
- y: {
- label: {
- formatter: (v) => `${v}k`,
- },
- },
- }}
- style={{
- radiusTopLeft: 5,
- radiusTopRight: 5,
- columnWidthRatio: 0.3,
- inset: 0.5,
- }}
- />
-
-
-
-
);
-}
+}
\ No newline at end of file
diff --git a/src/pages/Analysis/User/components/KeywordChart.tsx b/src/pages/Analysis/User/components/KeywordChart.tsx
index b3b743a..e67c165 100644
--- a/src/pages/Analysis/User/components/KeywordChart.tsx
+++ b/src/pages/Analysis/User/components/KeywordChart.tsx
@@ -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
([]);
+ 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;
+ },
+ },
+ title: {
+ text: '关键词',
+ style: {
+ fontSize: 14,
+ fill: '#333',
+ fontWeight: 'bold',
+ },
+ },
+ grid: {
+ line: {
+ style: {
+ stroke: '#e8e8e8',
+ lineWidth: 1,
+ lineDash: [3, 3],
+ },
+ },
+ alignTick: true,
},
},
- meta: {
- keyWord: { alias: '关键词' },
- searchCount: { alias: '搜索次数' },
+ 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 (
- <>
-
-
查询关键词搜索排行
-
-
-
- {data?.map((item, index) => (
-
- 关键词：{item.keyWord}
- 搜索次数：{item.searchCount}
-
- ))}
-
+ }
+ style={{
+ borderRadius: 12,
+ boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
+ }}
+ bodyStyle={{
+ padding: '16px',
+ borderRadius: 8
+ }}
+ extra={
+
+
+
+
+
+ }
+ >
+
+ {/* 统计信息 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 图表显示区域 */}
+ {data.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
);
-}
+}
\ No newline at end of file
diff --git a/src/pages/Analysis/User/components/WantedPositionStatics.tsx b/src/pages/Analysis/User/components/WantedPositionStatics.tsx
index 6c61227..f8cad03 100644
--- a/src/pages/Analysis/User/components/WantedPositionStatics.tsx
+++ b/src/pages/Analysis/User/components/WantedPositionStatics.tsx
@@ -1,84 +1,447 @@
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
({ male: [], female: [] });
+ const [malePositions, setMalePositions] = useState([]);
+ const [femalePositions, setFemalePositions] = useState([]);
+ 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([]);
const fetchStatics = useCallback(async () => {
- const resData = await getWantedPositionStaticsCount({ sexCode: 0 });
- if (resData.code === 200) {
- const malePositions: Record = {};
- const femalePositions: Record = {};
+ setLoading(true);
+ try {
+ const resData = await getWantedPositionStaticsCount();
+ if (resData.code === 200) {
+ const positions = resData.data as PositionItem[];
+ setAllPositions(positions);
+
+ // 统计每个岗位的男女数量
+ const maleCounts: Record = {};
+ const femaleCounts: Record = {};
+
+ positions.forEach((item,index) => {
+ if (item.sexCode === '男') {
+ maleCounts[item.jobId] = (maleCounts[item.jobId] || 0) + 1;
+ } else if (item.sexCode === '女') {
+ femaleCounts[item.jobId] = (femaleCounts[item.jobId] || 0) + 1;
+ }
+ });
- resData.data.forEach((item) => {
- if (item.sexCode === '男') {
- malePositions[item.jobName] = (malePositions[item.jobName] || 0) + 1;
- } else if (item.sexCode === '女') {
- femalePositions[item.jobName] = (femalePositions[item.jobName] || 0) + 1;
- }
- });
+ // 计算总数
+ const maleTotal = Object.values(maleCounts).reduce((a, b) => a + b, 0);
+ const femaleTotal = Object.values(femaleCounts).reduce((a, b) => a + b, 0);
+
+ setTotalMale(maleTotal);
+ setTotalFemale(femaleTotal);
- const result: StaticsResult = {
- male: Object.entries(malePositions).map(([jobName, count]) => ({ jobName, count })),
- female: Object.entries(femalePositions).map(([jobName, count]) => ({ jobName, count })),
- };
+ // 获取所有岗位的唯一列表
+ const uniqueJobs = Array.from(
+ new Map(positions.map(item => [item.jobId, item])).values()
+ );
- setStaticsData(result);
+ // 处理男性数据
+ 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 = [
- {
- title: '岗位名称',
- dataIndex: 'jobName',
- key: 'jobName',
+ // 横向柱状图配置 - 男性
+ const maleColumnConfig = {
+ data: malePositions,
+ xField: 'count',
+ yField: 'jobName',
+ seriesField: 'jobName',
+ isGroup: false,
+ isStack: false,
+ height: 280,
+ autoFit: true,
+ columnWidthRatio: 0.6,
+ color: '#1890ff',
+ labels: [
+ {
+ 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,
+ },
},
- {
- title: '数量',
- dataIndex: 'count',
- key: 'count',
+ 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: [
+ {
+ 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 (
-
-
-
+
+
+ 🎯 期望岗位统计分析
+ 岗位分析
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showPlaceholder ? (
+
+
+
+ 👨 男性热门岗位
+ TOP {topCount}
+