统计分析新增

This commit is contained in:
yy
2025-05-26 11:28:13 +08:00
parent 6ce4e857ab
commit 7e8d7d3409
9 changed files with 905 additions and 596 deletions

View File

@@ -20,24 +20,14 @@ body,
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
left: unset;
}
.ant-table-cell .ant-table-row-expand-icon {
vertical-align: middle;
margin-right: 8px;
}
.ant-table-row {
&-level-0 .ant-table-cell:first-child {
padding-left: 16px !important;
}
&-level-1 .ant-table-cell:first-child {
padding-left: 40px !important;
padding-left: 24px !important;
}
&-level-2 .ant-table-cell:first-child {
padding-left: 64px !important;
padding-left: 48px !important;
}
}
.ant-table-row .ant-table-cell:first-child {
display: flex;
align-items: center;
// 可根据需要添加更多层级
}
.ant-table-row-level-2 .ant-table-row-expand-icon {
display: none;
@@ -74,4 +64,4 @@ ol {
}
}
}
}
}

View File

@@ -0,0 +1,289 @@
import React, { useEffect, useState, useMemo } from 'react';
import { Card, Select, Button, Space, Spin, Empty, Row, Col, message } from 'antd';
import { Line } from '@ant-design/charts';
import { getIndustryTrend } from '@/services/analysis/industry';
import dayjs from 'dayjs';
import { useRequest } from '@umijs/max';
const { Option } = Select;
type IndustryDataItem = {
date: string;
category: string;
value: number;
};
const IndustryTrendPage: React.FC = () => {
const [params, setParams] = useState({
timeDimension: '月' as '月' | '季度' | '年',
type: '岗位发布数量' as '岗位发布数量' | '招聘增长率',
startTime: dayjs().subtract(6, 'month').format('YYYY-MM'),
endTime: dayjs().format('YYYY-MM'),
selectedIndustry: ''
});
const [allData, setAllData] = useState<IndustryDataItem[]>([]);
const [prevSelectedIndustry, setPrevSelectedIndustry] = useState('');
const { loading, run } = useRequest(
() => getIndustryTrend({
...params,
startTime: formatTimeParam(params.startTime, params.timeDimension),
endTime: formatTimeParam(params.endTime, params.timeDimension)
}),
{
manual: true,
onError: (error) => message.error('数据加载失败: ' + error.message),
onSuccess: (responseData) => {
const formattedData = convertApiData(responseData);
setAllData(formattedData);
const industryToSelect = prevSelectedIndustry ||
(formattedData.length > 0 ? formattedData[0].category : '');
setParams(prev => ({ ...prev, selectedIndustry: industryToSelect }));
}
}
);
const convertApiData = (apiData: any): IndustryDataItem[] => {
if (!apiData) return [];
try {
const result: IndustryDataItem[] = [];
if (typeof apiData === 'object' && !Array.isArray(apiData)) {
Object.entries(apiData).forEach(([month, monthData]) => {
if (Array.isArray(monthData)) {
(monthData as any[]).forEach(item => {
const convertedItem = {
date: month,
category: item.name || item.category,
value: Number(item.data || item.value) || 0
};
console.log('转换后的数据项:', convertedItem);
result.push(convertedItem);
});
}
});
return result;
}
if (Array.isArray(apiData)) {
return apiData.map(item => {
const convertedItem = {
date: item.time || item.date,
category: item.name || item.category,
value: Number(item.data || item.value) || 0
};
console.log('转换后的数据项:', convertedItem);
return convertedItem;
});
}
return [];
} catch (error) {
console.error('数据转换错误:', error);
return [];
}
};
const industries = useMemo(() => {
if (allData.length === 0) return [];
const categories = new Set<string>();
allData.forEach(item => categories.add(item.category));
return Array.from(categories).sort();
}, [allData]);
const formatTimeParam = (dateStr: string, dimension: string) => {
const date = dayjs(dateStr);
switch (dimension) {
case '季度': return `${date.year()}-Q${Math.ceil((date.month() + 1) / 3)}`;
case '年': return `${date.year()}`;
default: return date.format('YYYY-MM');
}
};
const handleIndustryChange = (value: string) => {
setPrevSelectedIndustry(value);
setParams(p => ({ ...p, selectedIndustry: value }));
};
const currentIndustryData = useMemo(() => {
if (!params.selectedIndustry) return [];
const filteredData = allData
.filter(item => item.category === params.selectedIndustry)
.map(item => ({
date: item.date,
category: item.category,
value: item.value ?? 0,
}))
.sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf());
console.log("当前行业数据 (过滤后):", filteredData);
return filteredData;
}, [allData, params.selectedIndustry]);
console.log("最终图表数据:", currentIndustryData);
const chartConfig = {
data: currentIndustryData,
height: 180,
xField: 'date',
yField: 'value',
seriesField: 'category',
xAxis: {
type: 'cat',
tickCount: 5,
label: {
formatter: (text: string) => {
if (params.timeDimension === '年') return text.split('-')[0];
if (params.timeDimension === '季度') return text.split('-')[1];
return text.split('-')[1];
},
},
},
yAxis: {
label: {
formatter: (val: string) => `${val}${params.type === '招聘增长率' ? '%' : '个'}`,
},
},
tooltip: false,
point: {
size: 4,
shape: 'circle',
},
animation: {
appear: {
animation: 'path-in',
duration: 1000,
},
},
};
useEffect(() => {
run();
}, [params.timeDimension, params.startTime, params.endTime]);
return (
<div style={{ padding: 16 }}>
<Card
title="行业趋势分析"
style={{ marginBottom: 24 }}
>
<div style={{ marginBottom: 16 }}>
<Space size="middle" wrap>
<Select
value={params.selectedIndustry}
onChange={handleIndustryChange}
style={{ width: 180 }}
loading={loading}
placeholder="选择行业"
>
{industries.map(industry => (
<Option key={industry} value={industry}>{industry}</Option>
))}
</Select>
<Select
value={params.timeDimension}
onChange={value => setParams(p => ({ ...p, timeDimension: value }))}
style={{ width: 100 }}
>
<Option value="月"></Option>
<Option value="季度"></Option>
<Option value="年"></Option>
</Select>
<Select
value={params.type}
onChange={value => setParams(p => ({ ...p, type: value }))}
style={{ width: 120 }}
>
<Option value="岗位发布数量"></Option>
<Option value="招聘增长率"></Option>
</Select>
<Button
type="primary"
onClick={() => run()}
loading={loading}
size="middle"
>
</Button>
</Space>
</div>
<Card
title={`${params.selectedIndustry || '行业'}趋势`}
style={{ marginBottom: 24 }}
bodyStyle={{
padding: 12,
height: 180,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Spin spinning={loading}>
{currentIndustryData.length > 0 ? (
<Line {...chartConfig} />
) : (
<Empty description={loading ? '数据加载中...' : '请选择行业'} />
)}
</Spin>
</Card>
<Row gutter={[16, 16]}>
<Col xs={24} sm={12} md={8} lg={8} xl={6}>
<Card
title="区域分析"
bodyStyle={{
padding: 12,
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Empty description="热力地图预留位置" />
</Card>
</Col>
<Col xs={24} sm={12} md={8} lg={8} xl={6}>
<Card
title="薪资趋势"
bodyStyle={{
padding: 12,
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Empty description="薪资分析预留位置" />
</Card>
</Col>
<Col xs={24} sm={12} md={8} lg={8} xl={6}>
<Card
title="经验要求"
bodyStyle={{
padding: 12,
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Empty description="经验分析预留位置" />
</Card>
</Col>
<Col xs={24} sm={12} md={8} lg={8} xl={6}>
<Card
title="技能需求"
bodyStyle={{
padding: 12,
height: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Empty description="技能分析预留位置" />
</Card>
</Col>
</Row>
</Card>
</div>
);
};
export default IndustryTrendPage;

View File

View File

@@ -0,0 +1,8 @@
import { request } from '@umijs/max';
export async function getIndustryTrend(params?: API.Analysis.IndustryParams) {
return request<API.Analysis.IndustryResult>('/api/cms/statics/industry', {
method: 'GET',
params
});
}

View File

@@ -1,159 +1,159 @@
import { createIcon } from '@/utils/IconUtil';
import { MenuDataItem } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import React, { lazy } from 'react';
let remoteMenu: any = null;
export function getRemoteMenu() {
return remoteMenu;
}
export function setRemoteMenu(data: any) {
remoteMenu = data;
}
function patchRouteItems(route: any, menu: any, parentPath: string) {
for (const menuItem of menu) {
if (menuItem.component === 'Layout' || menuItem.component === 'ParentView') {
if (menuItem.routes) {
let hasItem = false;
let newItem = null;
for (const routeChild of route.routes) {
if (routeChild.path === menuItem.path) {
hasItem = true;
newItem = routeChild;
}
}
if (!hasItem) {
newItem = {
path: menuItem.path,
routes: [],
children: []
}
route.routes.push(newItem)
}
patchRouteItems(newItem, menuItem.routes, parentPath + menuItem.path + '/');
}
} else {
const names: string[] = menuItem.component.split('/');
let path = '';
names.forEach(name => {
if (path.length > 0) {
path += '/';
}
if (name !== 'index') {
path += name.at(0)?.toUpperCase() + name.substr(1);
} else {
path += name;
}
})
if (!path.endsWith('.tsx')) {
path += '.tsx'
}
if (route.routes === undefined) {
route.routes = [];
}
if (route.children === undefined) {
route.children = [];
}
const newRoute = {
element: React.createElement(lazy(() => import('@/pages/' + path))),
path: parentPath + menuItem.path,
}
route.children.push(newRoute);
route.routes.push(newRoute);
}
}
}
export function patchRouteWithRemoteMenus(routes: any) {
if (remoteMenu === null) { return; }
let proLayout = null;
for (const routeItem of routes) {
if (routeItem.id === 'ant-design-pro-layout') {
proLayout = routeItem;
break;
}
}
patchRouteItems(proLayout, remoteMenu, '');
}
/** 获取当前的用户 GET /api/getUserInfo */
export async function getUserInfo(options?: Record<string, any>) {
return request<API.UserInfoResult>('/api/getInfo', {
method: 'GET',
...(options || {}),
});
}
// 刷新方法
export async function refreshToken() {
return request('/api/auth/refresh', {
method: 'post'
})
}
export async function getRouters(): Promise<any> {
return request('/api/getRouters');
}
export function convertCompatRouters(childrens: API.RoutersMenuItem[]): any[] {
return childrens.map((item: API.RoutersMenuItem) => {
return {
path: item.path,
icon: createIcon(item.meta.icon),
// icon: item.meta.icon,
name: item.meta.title,
routes: item.children ? convertCompatRouters(item.children) : undefined,
hideChildrenInMenu: item.hidden,
hideInMenu: item.hidden,
component: item.component,
authority: item.perms,
};
});
}
export async function getRoutersInfo(): Promise<MenuDataItem[]> {
return getRouters().then((res) => {
if (res.code === 200) {
return convertCompatRouters(res.data);
} else {
return [];
}
});
}
export function getMatchMenuItem(
path: string,
menuData: MenuDataItem[] | undefined,
): MenuDataItem[] {
if (!menuData) return [];
let items: MenuDataItem[] = [];
menuData.forEach((item) => {
if (item.path) {
if (item.path === path) {
items.push(item);
return;
}
if (path.length >= item.path?.length) {
const exp = `${item.path}/*`;
if (path.match(exp)) {
if (item.routes) {
const subpath = path.substr(item.path.length + 1);
const subItem: MenuDataItem[] = getMatchMenuItem(subpath, item.routes);
items = items.concat(subItem);
} else {
const paths = path.split('/');
if (paths.length >= 2 && paths[0] === item.path && paths[1] === 'index') {
items.push(item);
}
}
}
}
}
});
return items;
}
import { createIcon } from '@/utils/IconUtil';
import { MenuDataItem } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import React, { lazy } from 'react';
let remoteMenu: any = null;
export function getRemoteMenu() {
return remoteMenu;
}
export function setRemoteMenu(data: any) {
remoteMenu = data;
}
function patchRouteItems(route: any, menu: any, parentPath: string) {
for (const menuItem of menu) {
if (menuItem.component === 'Layout' || menuItem.component === 'ParentView') {
if (menuItem.routes) {
let hasItem = false;
let newItem = null;
for (const routeChild of route.routes) {
if (routeChild.path === menuItem.path) {
hasItem = true;
newItem = routeChild;
}
}
if (!hasItem) {
newItem = {
path: menuItem.path,
routes: [],
children: []
}
route.routes.push(newItem)
}
patchRouteItems(newItem, menuItem.routes, parentPath + menuItem.path + '/');
}
} else {
const names: string[] = menuItem.component.split('/');
let path = '';
names.forEach(name => {
if (path.length > 0) {
path += '/';
}
if (name !== 'index') {
path += name.at(0)?.toUpperCase() + name.substr(1);
} else {
path += name;
}
})
if (!path.endsWith('.tsx')) {
path += '.tsx'
}
if (route.routes === undefined) {
route.routes = [];
}
if (route.children === undefined) {
route.children = [];
}
const newRoute = {
element: React.createElement(lazy(() => import('@/pages/' + path))),
path: parentPath + menuItem.path,
}
route.children.push(newRoute);
route.routes.push(newRoute);
}
}
}
export function patchRouteWithRemoteMenus(routes: any) {
if (remoteMenu === null) { return; }
let proLayout = null;
for (const routeItem of routes) {
if (routeItem.id === 'ant-design-pro-layout') {
proLayout = routeItem;
break;
}
}
patchRouteItems(proLayout, remoteMenu, '');
}
/** 获取当前的用户 GET /api/getUserInfo */
export async function getUserInfo(options?: Record<string, any>) {
return request<API.UserInfoResult>('/api/getInfo', {
method: 'GET',
...(options || {}),
});
}
// 刷新方法
export async function refreshToken() {
return request('/api/auth/refresh', {
method: 'post'
})
}
export async function getRouters(): Promise<any> {
return request('/api/getRouters');
}
export function convertCompatRouters(childrens: API.RoutersMenuItem[]): any[] {
return childrens.map((item: API.RoutersMenuItem) => {
return {
path: item.path,
icon: createIcon(item.meta.icon),
// icon: item.meta.icon,
name: item.meta.title,
routes: item.children ? convertCompatRouters(item.children) : undefined,
hideChildrenInMenu: item.hidden,
hideInMenu: item.hidden,
component: item.component,
authority: item.perms,
};
});
}
export async function getRoutersInfo(): Promise<MenuDataItem[]> {
return getRouters().then((res) => {
if (res.code === 200) {
return convertCompatRouters(res.data);
} else {
return [];
}
});
}
export function getMatchMenuItem(
path: string,
menuData: MenuDataItem[] | undefined,
): MenuDataItem[] {
if (!menuData) return [];
let items: MenuDataItem[] = [];
menuData.forEach((item) => {
if (item.path) {
if (item.path === path) {
items.push(item);
return;
}
if (path.length >= item.path?.length) {
const exp = `${item.path}/*`;
if (path.match(exp)) {
if (item.routes) {
const subpath = path.substr(item.path.length + 1);
const subItem: MenuDataItem[] = getMatchMenuItem(subpath, item.routes);
items = items.concat(subItem);
} else {
const paths = path.split('/');
if (paths.length >= 2 && paths[0] === item.path && paths[1] === 'index') {
items.push(item);
}
}
}
}
}
});
return items;
}

20
src/types/analysis/industry.d.ts vendored Normal file
View File

@@ -0,0 +1,20 @@
declare namespace API.Analysis {
export interface IndustryResult {
data: TrendItem[];
code: number;
msg: string;
}
export interface TrendItem {
date: string;
category: string;
value: number;
}
export interface IndustryParams {
timeDimension: '月' | '季度' | '年';
type: '岗位发布数量' | '招聘增长率';
startTime: string;
endTime: string;
}
}