统计分析新增
This commit is contained in:
@@ -116,4 +116,5 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
@@ -54,9 +54,10 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@ant-design/charts": "^2.3.0",
|
||||
"@ant-design/icons": "^5.5.0",
|
||||
"@ant-design/plots": "^2.3.2",
|
||||
"@ant-design/pro-components": "^2.7.19",
|
||||
"@ant-design/pro-components": "^2.8.7",
|
||||
"@ant-design/use-emotion-css": "1.0.4",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@umijs/route-utils": "^4.0.1",
|
||||
|
||||
@@ -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;
|
||||
|
||||
289
src/pages/Analysis/Industrytrend/index.tsx
Normal file
289
src/pages/Analysis/Industrytrend/index.tsx
Normal 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;
|
||||
0
src/pages/Analysis/User/index.tsx
Normal file
0
src/pages/Analysis/User/index.tsx
Normal file
8
src/services/analysis/industry.ts
Normal file
8
src/services/analysis/industry.ts
Normal 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
|
||||
});
|
||||
}
|
||||
20
src/types/analysis/industry.d.ts
vendored
Normal file
20
src/types/analysis/industry.d.ts
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user