添加企业服务管理、企业数据管理页面
Some checks failed
Node CI / build (14.x, macOS-latest) (push) Has been cancelled
Node CI / build (14.x, ubuntu-latest) (push) Has been cancelled
Node CI / build (14.x, windows-latest) (push) Has been cancelled
Node CI / build (16.x, macOS-latest) (push) Has been cancelled
Node CI / build (16.x, ubuntu-latest) (push) Has been cancelled
Node CI / build (16.x, windows-latest) (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
coverage CI / build (push) Has been cancelled
Node pnpm CI / build (16.x, macOS-latest) (push) Has been cancelled
Node pnpm CI / build (16.x, ubuntu-latest) (push) Has been cancelled
Node pnpm CI / build (16.x, windows-latest) (push) Has been cancelled
Some checks failed
Node CI / build (14.x, macOS-latest) (push) Has been cancelled
Node CI / build (14.x, ubuntu-latest) (push) Has been cancelled
Node CI / build (14.x, windows-latest) (push) Has been cancelled
Node CI / build (16.x, macOS-latest) (push) Has been cancelled
Node CI / build (16.x, ubuntu-latest) (push) Has been cancelled
Node CI / build (16.x, windows-latest) (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
coverage CI / build (push) Has been cancelled
Node pnpm CI / build (16.x, macOS-latest) (push) Has been cancelled
Node pnpm CI / build (16.x, ubuntu-latest) (push) Has been cancelled
Node pnpm CI / build (16.x, windows-latest) (push) Has been cancelled
This commit is contained in:
BIN
shihezi.zip
BIN
shihezi.zip
Binary file not shown.
@@ -11,6 +11,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="/shihezi/umi.e48152fb.js"></script>
|
||||
<script src="/shihezi/umi.d7600bbb.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -165,7 +165,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 32
|
||||
"register": 29
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "preset",
|
||||
@@ -178,7 +178,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 16
|
||||
"register": 13
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "preset",
|
||||
@@ -195,7 +195,7 @@
|
||||
1
|
||||
]
|
||||
},
|
||||
"register": 5
|
||||
"register": 7
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "preset",
|
||||
@@ -212,7 +212,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 5
|
||||
"register": 10
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -229,7 +229,7 @@
|
||||
3
|
||||
]
|
||||
},
|
||||
"register": 4
|
||||
"register": 7
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -246,7 +246,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 1
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -259,7 +259,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -273,10 +273,10 @@
|
||||
"time": {
|
||||
"hooks": {
|
||||
"modifyAppData": [
|
||||
76
|
||||
79
|
||||
]
|
||||
},
|
||||
"register": 30
|
||||
"register": 35
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -289,7 +289,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -306,7 +306,7 @@
|
||||
0
|
||||
],
|
||||
"onCheck": [
|
||||
1
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 2
|
||||
@@ -356,7 +356,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 15
|
||||
"register": 19
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1238,7 +1238,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1251,7 +1251,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 94
|
||||
"register": 96
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1264,7 +1264,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 88
|
||||
"register": 117
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1277,7 +1277,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 22
|
||||
"register": 25
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1307,7 +1307,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1320,7 +1320,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 4
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1333,7 +1333,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 42
|
||||
"register": 46
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/mock/mock.js",
|
||||
@@ -1345,7 +1345,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1358,7 +1358,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 1
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/okam/okam.js",
|
||||
@@ -1370,7 +1370,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1400,7 +1400,7 @@
|
||||
1
|
||||
]
|
||||
},
|
||||
"register": 3
|
||||
"register": 4
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/polyfill/polyfill.js",
|
||||
@@ -1412,7 +1412,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1451,7 +1451,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1464,7 +1464,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1477,7 +1477,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 8
|
||||
"register": 10
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1490,7 +1490,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1515,7 +1515,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 6
|
||||
"register": 5
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1528,7 +1528,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 5
|
||||
"register": 14
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1541,7 +1541,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 5
|
||||
"register": 7
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1554,7 +1554,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 5
|
||||
"register": 7
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1580,7 +1580,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 14
|
||||
"register": 15
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/apiRoute/apiRoute.js",
|
||||
@@ -1592,7 +1592,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 31
|
||||
"register": 30
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1605,7 +1605,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/test/test.js",
|
||||
@@ -1617,7 +1617,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/clickToComponent/clickToComponent.js",
|
||||
@@ -1629,7 +1629,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 3
|
||||
"register": 4
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1642,7 +1642,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1671,7 +1671,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1684,7 +1684,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 6
|
||||
"register": 7
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/ui/ui.js",
|
||||
@@ -1709,7 +1709,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/utoopack/utoopack.js",
|
||||
@@ -1733,7 +1733,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 32
|
||||
"register": 41
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/features/routePreloadOnLoad/routePreloadOnLoad.js",
|
||||
@@ -1745,7 +1745,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 3
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -1771,7 +1771,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 23
|
||||
"register": 25
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1784,7 +1784,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 51
|
||||
"register": 57
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1797,7 +1797,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 70
|
||||
"register": 90
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/preset-umi/dist/commands/dev/dev.js",
|
||||
@@ -1822,7 +1822,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1874,7 +1874,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 4
|
||||
"register": 6
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1887,7 +1887,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1926,7 +1926,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -1978,7 +1978,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -2017,7 +2017,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -2069,7 +2069,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 6
|
||||
"register": 8
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -2082,7 +2082,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 2
|
||||
"register": 4
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2097,7 +2097,7 @@
|
||||
},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/plugins/dist/analytics.js",
|
||||
@@ -2110,13 +2110,13 @@
|
||||
"time": {
|
||||
"hooks": {
|
||||
"modifyConfig": [
|
||||
6
|
||||
9
|
||||
],
|
||||
"modifyAppData": [
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 7
|
||||
"register": 8
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/plugins/dist/antd.js",
|
||||
@@ -2128,7 +2128,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 10
|
||||
"register": 11
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2166,7 +2166,7 @@
|
||||
1
|
||||
]
|
||||
},
|
||||
"register": 3
|
||||
"register": 5
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2298,7 +2298,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 2
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2311,7 +2311,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 0
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2341,7 +2341,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -2375,7 +2375,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 0
|
||||
"register": 1
|
||||
},
|
||||
"enableBy": "register",
|
||||
"type": "plugin",
|
||||
@@ -2422,7 +2422,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 307
|
||||
"register": 379
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2435,7 +2435,7 @@
|
||||
"config": {},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 270
|
||||
"register": 271
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2450,7 +2450,7 @@
|
||||
},
|
||||
"time": {
|
||||
"hooks": {},
|
||||
"register": 1
|
||||
"register": 0
|
||||
},
|
||||
"enableBy": "config",
|
||||
"type": "plugin",
|
||||
@@ -2479,7 +2479,7 @@
|
||||
0
|
||||
]
|
||||
},
|
||||
"register": 80
|
||||
"register": 86
|
||||
},
|
||||
"type": "plugin",
|
||||
"path": "D:/work/SHIHEZI/shz-admin/node_modules/@umijs/request-record/dist/cjs/index.js",
|
||||
|
||||
21637
src/.umi/appData.json
21637
src/.umi/appData.json
File diff suppressed because it is too large
Load Diff
98
src/pages/Company/DataManagement/components/chartbar.tsx
Normal file
98
src/pages/Company/DataManagement/components/chartbar.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const Chartline: React.FC<{}> = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
initCharts()
|
||||
}, []);
|
||||
|
||||
const initCharts = () => {
|
||||
const labelRight = {
|
||||
position: 'right'
|
||||
} as const;
|
||||
const myChart = echarts.init(document.getElementById('bar'));
|
||||
const option = {
|
||||
// title: {
|
||||
// text: 'Bar Chart with Negative Value'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 30
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: [
|
||||
'ten',
|
||||
'nine',
|
||||
'eight',
|
||||
'seven',
|
||||
'six',
|
||||
'five',
|
||||
'four',
|
||||
'three',
|
||||
'two',
|
||||
'one'
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Cost',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}'
|
||||
},
|
||||
data: [
|
||||
{ value: -0.07, label: labelRight },
|
||||
{ value: -0.09, label: labelRight },
|
||||
0.2,
|
||||
0.44,
|
||||
{ value: -0.23, label: labelRight },
|
||||
0.08,
|
||||
{ value: -0.17, label: labelRight },
|
||||
0.47,
|
||||
{ value: -0.36, label: labelRight },
|
||||
0.18
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title="企业年利率分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}>
|
||||
<div id='bar' style={{ height: '110%', width: '110%' }} ></div>
|
||||
</Card >
|
||||
</>
|
||||
);
|
||||
};
|
||||
// 必须导出组件
|
||||
export default Chartline;
|
||||
215
src/pages/Company/DataManagement/components/chartcards.tsx
Normal file
215
src/pages/Company/DataManagement/components/chartcards.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import React from 'react';
|
||||
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
|
||||
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
|
||||
|
||||
export const IndustryTrendCard = ({
|
||||
loading,
|
||||
currentIndustryData,
|
||||
config,
|
||||
availableIndustries,
|
||||
selectedIndustry,
|
||||
onIndustryChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="行业趋势分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedIndustry}
|
||||
onChange={onIndustryChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择行业"
|
||||
disabled={availableIndustries.length === 0}
|
||||
>
|
||||
{availableIndustries.map((industry: any) => (
|
||||
<Option key={industry} value={industry}>
|
||||
{industry}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{currentIndustryData.length > 0 ? (
|
||||
<Line {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
loading
|
||||
? '数据加载中...'
|
||||
: selectedIndustry
|
||||
? '当前时间段无数据'
|
||||
: '请先选择行业'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const AreaAnalysisCard = ({ loading, areaData, config }) => (
|
||||
<Card
|
||||
title="人员区域分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{
|
||||
padding: 12,
|
||||
height: 250,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Spin tip="数据加载中..." size="large" />
|
||||
) : areaData.length > 0 ? (
|
||||
<div style={{ height: '100%', width: '100%', minHeight: 300 }}>
|
||||
<Heatmap {...config} />
|
||||
</div>
|
||||
) : (
|
||||
<Empty description="暂无区域数据" />
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const SalaryTrendCard = ({
|
||||
loading,
|
||||
currentSalaryData,
|
||||
config,
|
||||
availableSalaryRanges,
|
||||
selectedSalaryRange,
|
||||
onSalaryRangeChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="薪资区间分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedSalaryRange}
|
||||
onChange={onSalaryRangeChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择薪资区间"
|
||||
disabled={availableSalaryRanges.length === 0}
|
||||
>
|
||||
{availableSalaryRanges.map((range) => (
|
||||
<Option key={range} value={range}>
|
||||
{range}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{currentSalaryData.length > 0 ? (
|
||||
<Line {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
loading
|
||||
? '数据加载中...'
|
||||
: selectedSalaryRange
|
||||
? '当前时间段无数据'
|
||||
: '请先选择薪资区间'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const WorkYearCard = ({
|
||||
loading,
|
||||
workYearData,
|
||||
config,
|
||||
availableWorkYearRanges,
|
||||
selectedWorkYearRange,
|
||||
onWorkYearRangeChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="企业人员工作经验分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{
|
||||
padding: '12px',
|
||||
height: 250,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedWorkYearRange}
|
||||
onChange={onWorkYearRangeChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择经验要求"
|
||||
disabled={availableWorkYearRanges.length === 0}
|
||||
>
|
||||
{availableWorkYearRanges.map((range: any) => (
|
||||
<Option key={range} value={range}>
|
||||
{range}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{workYearData && workYearData.length > 0 ? (
|
||||
<div style={{ width: '100%', height: '100%', padding: 8 }}>
|
||||
<Pie {...config} />
|
||||
</div>
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={loading ? '数据加载中...' : '暂无工作经验数据'}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const EducationCard = ({
|
||||
loading,
|
||||
educationData,
|
||||
config,
|
||||
availableEducationLevels,
|
||||
selectedEducationLevel,
|
||||
onEducationLevelChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="企业学历分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedEducationLevel}
|
||||
onChange={onEducationLevelChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择学历要求"
|
||||
disabled={availableEducationLevels.length === 0}
|
||||
>
|
||||
<Option value="">全部学历</Option>
|
||||
{availableEducationLevels.map((level) => (
|
||||
<Option key={level} value={level}>
|
||||
{level}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{educationData.length > 0 ? (
|
||||
<Bar {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={loading ? '数据加载中...' : '暂无学历数据'}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
456
src/pages/Company/DataManagement/components/chartconfigs.tsx
Normal file
456
src/pages/Company/DataManagement/components/chartconfigs.tsx
Normal file
@@ -0,0 +1,456 @@
|
||||
import { ChartConfig } from '@/types/analysis/industry';
|
||||
import dayjs from 'dayjs';
|
||||
import { formatDateForDisplay } from '../utils';
|
||||
|
||||
export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
|
||||
const sortedData = [...areaData].sort((a, b) => {
|
||||
if (timeDimension === '年') {
|
||||
return parseInt(a.time) - parseInt(b.time);
|
||||
} else if (timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.time.split('-Q');
|
||||
const [yearB, quarterB] = b.time.split('-Q');
|
||||
return yearA === yearB
|
||||
? parseInt(quarterA) - parseInt(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else {
|
||||
return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
data: sortedData,
|
||||
height: 240,
|
||||
autoFit: true,
|
||||
xField: 'name',
|
||||
yField: 'time',
|
||||
colorField: 'value',
|
||||
shapeField: 'square',
|
||||
sizeField: 'value',
|
||||
xAxis: {
|
||||
title: {
|
||||
text: '区域',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
style: {
|
||||
fontSize: 10,
|
||||
fill: '#666',
|
||||
},
|
||||
formatter: (text: string) => {
|
||||
return text.length > 4 ? `${text.substring(0, 3)}...` : text;
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: '时间',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
formatter: (text: string) => {
|
||||
if (timeDimension === '年') return `${text}年`;
|
||||
if (timeDimension === '季度') return text.replace('-Q', '年Q');
|
||||
return text.replace('-', '年').replace('-', '月');
|
||||
},
|
||||
style: {
|
||||
fontSize: 10,
|
||||
fill: '#666',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
text: (d: { value: number }) => d.value.toString(),
|
||||
position: 'inside',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
scale: {
|
||||
size: { range: [14, 14] },
|
||||
color: { range: ['#dddddd', '#9ec8e0', '#5fa4cd', '#2e7ab6', '#114d90'] },
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
responsive: true,
|
||||
};
|
||||
};
|
||||
|
||||
export const getIndustryChartConfig = (currentIndustryData: any[], type: string): ChartConfig => ({
|
||||
data: currentIndustryData,
|
||||
height: 200,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'cat',
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}${type === '招聘增长率' ? '%' : ''}`,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
size: 4,
|
||||
shape: 'circle',
|
||||
},
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'path-in',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
interactions: [
|
||||
{
|
||||
type: 'tooltip',
|
||||
cfg: {
|
||||
render: (e, { title, items }) => {
|
||||
const list = items.filter((item) => item.value);
|
||||
return (
|
||||
<div key={title} style={{ padding: '8px 12px' }}>
|
||||
<h4 style={{ marginBottom: 8 }}>{title}</h4>
|
||||
{list.map((item, index) => {
|
||||
const { name, value, color } = item;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: color,
|
||||
marginRight: 8,
|
||||
}}
|
||||
></span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<b>
|
||||
{value}
|
||||
{type === '招聘增长率' ? '%' : ''}
|
||||
</b>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: undefined,
|
||||
title: undefined,
|
||||
customContent: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export const getSalaryChartConfig = (currentSalaryData: any[]): ChartConfig => ({
|
||||
data: currentSalaryData,
|
||||
height: 240,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'cat',
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}`,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
size: 4,
|
||||
shape: 'circle',
|
||||
},
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'path-in',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
interactions: [
|
||||
{
|
||||
type: 'tooltip',
|
||||
cfg: {
|
||||
render: (e, { title, items }) => {
|
||||
const list = items.filter((item) => item.value);
|
||||
return (
|
||||
<div key={title} style={{ padding: '8px 12px' }}>
|
||||
<h4 style={{ marginBottom: 8 }}>{title}</h4>
|
||||
{list.map((item, index) => {
|
||||
const { name, value, color } = item;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: color,
|
||||
marginRight: 8,
|
||||
}}
|
||||
></span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<b>{value}</b>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: undefined,
|
||||
title: undefined,
|
||||
customContent: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export const getWorkYearPieConfig = (workYearData: any[], selectedWorkYearRange: string) => {
|
||||
const filteredData = workYearData
|
||||
.filter((item) => item.category === selectedWorkYearRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
value: item.value || 0,
|
||||
type: `${formatDateForDisplay(item.date, '月')} ${item.category}`,
|
||||
}));
|
||||
|
||||
return {
|
||||
data: filteredData,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
radius: 0.2,
|
||||
innerRadius: 0.5,
|
||||
label: {
|
||||
text: (d: { type: any; value: any }) => `${d.type}\n ${d.value}`,
|
||||
position: 'spider',
|
||||
},
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: true,
|
||||
title: '工作经验分布',
|
||||
fields: ['type', 'value'],
|
||||
formatter: (datum: { type: any; value: any }) => ({
|
||||
name: datum.type,
|
||||
value: datum.value,
|
||||
}),
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
padding: 'auto',
|
||||
autoFit: true,
|
||||
};
|
||||
};
|
||||
|
||||
export const getEducationBarConfig = (educationData: any[], selectedEducationLevel: string) => {
|
||||
const educationLevelOrder = [
|
||||
'不限',
|
||||
'初中及以下',
|
||||
'中专/中技',
|
||||
'高中',
|
||||
'大专',
|
||||
'本科',
|
||||
'硕士',
|
||||
'博士',
|
||||
'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 barData = Object.entries(educationSummary)
|
||||
.filter(([_, value]) => value > 0)
|
||||
.map(([name, value]) => ({
|
||||
name,
|
||||
value,
|
||||
color: educationColorMap[name] || '#999',
|
||||
}))
|
||||
.sort((a, b) => educationLevelOrder.indexOf(a.name) - educationLevelOrder.indexOf(b.name));
|
||||
|
||||
return {
|
||||
data: barData,
|
||||
height: 200,
|
||||
xField: 'value',
|
||||
yField: 'name',
|
||||
seriesField: 'name',
|
||||
color: ({ name }: { name: string }) => educationColorMap[name] || '#999',
|
||||
meta: {
|
||||
name: { alias: '学历要求' },
|
||||
value: { alias: '岗位数量' },
|
||||
},
|
||||
xAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}`,
|
||||
},
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#f0f0f0',
|
||||
lineDash: [4, 4],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
barStyle: {
|
||||
radius: [2, 2, 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',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
legend: false,
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'scale-in-y',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const timeData = cleanEducationData
|
||||
.filter((item) => 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
108
src/pages/Company/DataManagement/components/chartline.tsx
Normal file
108
src/pages/Company/DataManagement/components/chartline.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const Chartline: React.FC<{}> = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
initCharts()
|
||||
}, []);
|
||||
|
||||
const initCharts = () => {
|
||||
const myChart = echarts.init(document.getElementById('main'));
|
||||
const option = {
|
||||
// title: {
|
||||
// text: 'Accumulated Waterfall Chart'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let tar;
|
||||
if (params[1] && params[1].value !== '-') {
|
||||
tar = params[1];
|
||||
} else {
|
||||
tar = params[2];
|
||||
}
|
||||
return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Expenses', 'Income']
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 30
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: (function () {
|
||||
let list = [];
|
||||
for (let i = 1; i <= 11; i++) {
|
||||
list.push('Nov ' + i);
|
||||
}
|
||||
return list;
|
||||
})()
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Placeholder',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent'
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
|
||||
},
|
||||
{
|
||||
name: 'A',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
|
||||
},
|
||||
{
|
||||
name: 'B',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'bottom'
|
||||
},
|
||||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title="企业年收入分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}>
|
||||
<div id='main' style={{ height: '110%', width: '110%' }} ></div>
|
||||
</Card >
|
||||
</>
|
||||
);
|
||||
};
|
||||
// 必须导出组件
|
||||
export default Chartline;
|
||||
574
src/pages/Company/DataManagement/index.tsx
Normal file
574
src/pages/Company/DataManagement/index.tsx
Normal file
@@ -0,0 +1,574 @@
|
||||
import React, { useEffect, useState, useMemo, useRef } from 'react';
|
||||
import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker } from 'antd';
|
||||
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
|
||||
import {
|
||||
getIndustryTrend,
|
||||
getIndustryAreaTrend,
|
||||
getSalaryTrend,
|
||||
getWorkYearTrend,
|
||||
getEducationTrend,
|
||||
} from '@/services/analysis/industry';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import {
|
||||
TimeDimension,
|
||||
AnalysisType,
|
||||
IndustryTrendState,
|
||||
IndustryDataItem,
|
||||
ChartConfig,
|
||||
} from '@/types/analysis/industry';
|
||||
import {
|
||||
formatQuarter,
|
||||
formatDateForDisplay,
|
||||
convertApiData,
|
||||
convertSalaryData,
|
||||
convertWorkYearData,
|
||||
convertEducationData,
|
||||
} from './utils';
|
||||
import {
|
||||
getHeatmapConfig,
|
||||
getIndustryChartConfig,
|
||||
getSalaryChartConfig,
|
||||
getWorkYearPieConfig,
|
||||
getEducationBarConfig,
|
||||
} from './components/chartconfigs';
|
||||
import {
|
||||
IndustryTrendCard,
|
||||
AreaAnalysisCard,
|
||||
SalaryTrendCard,
|
||||
WorkYearCard,
|
||||
EducationCard,
|
||||
} from './components/chartcards';
|
||||
import Chartline from './components/chartline'
|
||||
import Chartbar from './components/chartbar'
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const flattenAreaData = (apiResponse: any) => {
|
||||
if (!apiResponse || typeof apiResponse !== 'object') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const flattenedData: { name: any; time: any; value: number }[] = [];
|
||||
|
||||
for (const month in apiResponse) {
|
||||
if (apiResponse.hasOwnProperty(month)) {
|
||||
const areas = apiResponse[month];
|
||||
|
||||
areas.forEach((area: { name: any; time: any; data: string }) => {
|
||||
flattenedData.push({
|
||||
name: area.name,
|
||||
time: area.time,
|
||||
value: parseInt(area.data) || 0,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return flattenedData;
|
||||
};
|
||||
|
||||
const IndustryTrendPage: React.FC = () => {
|
||||
const [params, setParams] = useState<IndustryTrendState>({
|
||||
timeDimension: '月',
|
||||
type: '岗位发布数量',
|
||||
startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
|
||||
endTime: dayjs().format('YYYY-MM'),
|
||||
selectedIndustry: '',
|
||||
selectedSalaryRange: '',
|
||||
selectedWorkYearRange: '',
|
||||
});
|
||||
|
||||
const [allData, setAllData] = useState<IndustryDataItem[]>([]);
|
||||
const [areaData, setAreaData] = useState<any[]>([]);
|
||||
const [salaryData, setSalaryData] = useState<any[]>([]);
|
||||
const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
|
||||
const [availableSalaryRanges, setAvailableSalaryRanges] = useState<string[]>([]);
|
||||
const heatmapRef = useRef(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [workYearData, setWorkYearData] = useState<any[]>([]);
|
||||
const [availableWorkYearRanges, setAvailableWorkYearRanges] = useState<string[]>([]);
|
||||
const [educationData, setEducationData] = useState<any[]>([]);
|
||||
const [availableEducationLevels, setAvailableEducationLevels] = useState<string[]>([]);
|
||||
const [selectedEducationLevel, setSelectedEducationLevel] = useState<string>('');
|
||||
|
||||
// 获取行业趋势数据
|
||||
const { loading: industryLoading, run: fetchIndustryData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getIndustryTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertApiData(data);
|
||||
setAllData(formattedData);
|
||||
|
||||
const industries = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
|
||||
setAvailableIndustries(industries);
|
||||
|
||||
if (industries.length > 0 && !industries.includes(params.selectedIndustry)) {
|
||||
setParams((p) => ({ ...p, selectedIndustry: industries[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('行业数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取地区趋势数据
|
||||
const { loading: areaLoading, run: fetchAreaData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getIndustryAreaTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (res) => {
|
||||
const formattedData = flattenAreaData(res);
|
||||
setAreaData(formattedData);
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('地区数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取薪资趋势数据
|
||||
const { loading: salaryLoading, run: fetchSalaryData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getSalaryTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertSalaryData(data);
|
||||
setSalaryData(formattedData);
|
||||
|
||||
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const extractNumber = (str: string) => parseInt(str.replace(/[^0-9]/g, '') || 0);
|
||||
return extractNumber(a) - extractNumber(b);
|
||||
});
|
||||
|
||||
setAvailableSalaryRanges(ranges);
|
||||
|
||||
if (ranges.length > 0 && !ranges.includes(params.selectedSalaryRange)) {
|
||||
setParams((p) => ({ ...p, selectedSalaryRange: ranges[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('薪资数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取工作年限数据
|
||||
const { loading: workYearLoading, run: fetchWorkYearData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getWorkYearTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertWorkYearData(data);
|
||||
setWorkYearData(formattedData);
|
||||
|
||||
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const order = ['应届', '1-3年', '3-5年', '5年以上'];
|
||||
return order.indexOf(a) - order.indexOf(b);
|
||||
});
|
||||
|
||||
setAvailableWorkYearRanges(ranges);
|
||||
if (ranges.length > 0 && !ranges.includes(params.selectedWorkYearRange)) {
|
||||
setParams((p) => ({ ...p, selectedWorkYearRange: ranges[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('工作经验数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取学历数据
|
||||
const { loading: educationLoading, run: fetchEducationData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getEducationTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertEducationData(data);
|
||||
setEducationData(formattedData);
|
||||
|
||||
const levels = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const order = ['不限', '初中及以下', '中专/中技', '大专', '本科', '硕士', '博士'];
|
||||
return order.indexOf(a) - order.indexOf(b);
|
||||
});
|
||||
|
||||
setAvailableEducationLevels(levels);
|
||||
if (levels.length > 0 && !levels.includes(selectedEducationLevel)) {
|
||||
setSelectedEducationLevel(levels[0]);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('学历数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const currentWorkYearData = useMemo(() => {
|
||||
if (!params.selectedWorkYearRange || workYearData.length === 0) return [];
|
||||
|
||||
return workYearData
|
||||
.filter((item) => item.category === params.selectedWorkYearRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [workYearData, params.selectedWorkYearRange]);
|
||||
|
||||
const currentIndustryData = useMemo(() => {
|
||||
if (!params.selectedIndustry || allData.length === 0) return [];
|
||||
|
||||
return allData
|
||||
.filter((item) => item.category === params.selectedIndustry)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, params.timeDimension),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (params.timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.originalDate.split('-');
|
||||
const [yearB, quarterB] = b.originalDate.split('-');
|
||||
|
||||
const quarterToNumber = (q: string) => {
|
||||
if (q.includes('第一')) return 1;
|
||||
if (q.includes('第二')) return 2;
|
||||
if (q.includes('第三')) return 3;
|
||||
if (q.includes('第四')) return 4;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return yearA === yearB
|
||||
? quarterToNumber(quarterA) - quarterToNumber(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else if (params.timeDimension === '年') {
|
||||
return parseInt(a.originalDate) - parseInt(b.originalDate);
|
||||
} else {
|
||||
return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
|
||||
}
|
||||
});
|
||||
}, [allData, params.selectedIndustry, params.timeDimension]);
|
||||
|
||||
const currentSalaryData = useMemo(() => {
|
||||
if (!params.selectedSalaryRange || salaryData.length === 0) return [];
|
||||
|
||||
return salaryData
|
||||
.filter((item) => item.category === params.selectedSalaryRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [salaryData, params.selectedSalaryRange]);
|
||||
|
||||
const currentEducationData = useMemo(() => {
|
||||
if (!selectedEducationLevel || educationData.length === 0) return [];
|
||||
return educationData
|
||||
.filter((item) => item.category === selectedEducationLevel)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [educationData, selectedEducationLevel]);
|
||||
|
||||
const heatmapConfig = useMemo(
|
||||
() => getHeatmapConfig(areaData, params.timeDimension),
|
||||
[areaData, params.timeDimension],
|
||||
);
|
||||
|
||||
const industryChartConfig = useMemo(
|
||||
() => getIndustryChartConfig(currentIndustryData, params.type),
|
||||
[currentIndustryData, params.type],
|
||||
);
|
||||
|
||||
const salaryChartConfig = useMemo(
|
||||
() => getSalaryChartConfig(currentSalaryData),
|
||||
[currentSalaryData],
|
||||
);
|
||||
|
||||
const workYearPieConfig = useMemo(
|
||||
() => getWorkYearPieConfig(workYearData, params.selectedWorkYearRange),
|
||||
[workYearData, params.selectedWorkYearRange],
|
||||
);
|
||||
|
||||
const educationBarConfig = useMemo(
|
||||
() => getEducationBarConfig(educationData, selectedEducationLevel),
|
||||
[educationData, selectedEducationLevel],
|
||||
);
|
||||
|
||||
const handleTimeDimensionChange = (value: TimeDimension) => {
|
||||
const now = dayjs();
|
||||
let newStartTime = '';
|
||||
|
||||
if (value === '月') {
|
||||
newStartTime = now.subtract(5, 'month').format('YYYY-MM');
|
||||
} else if (value === '季度') {
|
||||
newStartTime = now.subtract(6, 'quarter').format('YYYY-Q');
|
||||
} else {
|
||||
newStartTime = now.subtract(5, 'year').format('YYYY');
|
||||
}
|
||||
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
timeDimension: value,
|
||||
startTime: newStartTime,
|
||||
endTime:
|
||||
value === '月'
|
||||
? now.format('YYYY-MM')
|
||||
: value === '季度'
|
||||
? now.format('YYYY-Q')
|
||||
: now.format('YYYY'),
|
||||
selectedIndustry: '',
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (dates: any, dateStrings: [string, string]) => {
|
||||
if (dates && dates[0] && dates[1]) {
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
startTime: dateStrings[0],
|
||||
endTime: dateStrings[1],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const disabledDate = (current: dayjs.Dayjs) => {
|
||||
const now = dayjs();
|
||||
|
||||
if (params.timeDimension === '月') {
|
||||
return current.isAfter(now.endOf('month'));
|
||||
} else if (params.timeDimension === '季度') {
|
||||
return current.isAfter(now.endOf('quarter'));
|
||||
} else {
|
||||
return current.isAfter(now.endOf('year'));
|
||||
}
|
||||
};
|
||||
|
||||
const getPickerValue = () => {
|
||||
try {
|
||||
return [
|
||||
dayjs(
|
||||
params.startTime,
|
||||
params.timeDimension === '年'
|
||||
? 'YYYY'
|
||||
: params.timeDimension === '季度'
|
||||
? 'YYYY-Q'
|
||||
: 'YYYY-MM',
|
||||
),
|
||||
dayjs(
|
||||
params.endTime,
|
||||
params.timeDimension === '年'
|
||||
? 'YYYY'
|
||||
: params.timeDimension === '季度'
|
||||
? 'YYYY-Q'
|
||||
: 'YYYY-MM',
|
||||
),
|
||||
];
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
fetchSalaryData();
|
||||
fetchWorkYearData();
|
||||
fetchEducationData();
|
||||
}, [params.timeDimension, params.startTime, params.endTime, params.type]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16 }} ref={containerRef}>
|
||||
<Card title="企业数据分析" style={{ marginBottom: 24 }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Space size="middle" wrap>
|
||||
<Select
|
||||
value={params.timeDimension}
|
||||
onChange={handleTimeDimensionChange}
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value="月">按月</Option>
|
||||
<Option value="季度">按季度</Option>
|
||||
<Option value="年">按年</Option>
|
||||
</Select>
|
||||
|
||||
<RangePicker
|
||||
picker={
|
||||
params.timeDimension === '月'
|
||||
? 'month'
|
||||
: params.timeDimension === '季度'
|
||||
? 'quarter'
|
||||
: 'year'
|
||||
}
|
||||
value={getPickerValue()}
|
||||
onChange={handleDateRangeChange}
|
||||
style={{ width: 180 }}
|
||||
disabled={industryLoading || areaLoading}
|
||||
allowClear={false}
|
||||
disabledDate={disabledDate}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={params.type}
|
||||
onChange={(value) => setParams((p) => ({ ...p, type: value }))}
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value="岗位发布数量">岗位数量</Option>
|
||||
<Option value="招聘增长率">增长率</Option>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
}}
|
||||
loading={industryLoading || areaLoading}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
{/* 行业趋势图表 - 全宽显示 */}
|
||||
<Col xs={24} lg={24}>
|
||||
<IndustryTrendCard
|
||||
loading={industryLoading}
|
||||
currentIndustryData={currentIndustryData}
|
||||
config={industryChartConfig}
|
||||
availableIndustries={availableIndustries}
|
||||
selectedIndustry={params.selectedIndustry}
|
||||
onIndustryChange={(value) => setParams((p) => ({ ...p, selectedIndustry: value }))}
|
||||
/>
|
||||
</Col>
|
||||
{/* 工作经验和学历要求 - 中等屏幕下分成两列 */}
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<WorkYearCard
|
||||
loading={workYearLoading}
|
||||
workYearData={workYearData}
|
||||
config={workYearPieConfig}
|
||||
availableWorkYearRanges={availableWorkYearRanges}
|
||||
selectedWorkYearRange={params.selectedWorkYearRange}
|
||||
onWorkYearRangeChange={(value) =>
|
||||
setParams((p) => ({ ...p, selectedWorkYearRange: value }))
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<Chartbar />
|
||||
{/* <EducationCard
|
||||
loading={educationLoading}
|
||||
educationData={educationData}
|
||||
config={educationBarConfig}
|
||||
availableEducationLevels={availableEducationLevels}
|
||||
selectedEducationLevel={selectedEducationLevel}
|
||||
onEducationLevelChange={setSelectedEducationLevel}
|
||||
/> */}
|
||||
</Col>
|
||||
{/* 区域分析和薪资趋势 - 中等屏幕下分成两列 */}
|
||||
{/* <Col xs={24} md={12} lg={12}>
|
||||
<AreaAnalysisCard loading={areaLoading} areaData={areaData} config={heatmapConfig} />
|
||||
</Col> */}
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<SalaryTrendCard
|
||||
loading={salaryLoading}
|
||||
currentSalaryData={currentSalaryData}
|
||||
config={salaryChartConfig}
|
||||
availableSalaryRanges={availableSalaryRanges}
|
||||
selectedSalaryRange={params.selectedSalaryRange}
|
||||
onSalaryRangeChange={(value) =>
|
||||
setParams((p) => ({ ...p, selectedSalaryRange: value }))
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<Chartline />
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndustryTrendPage;
|
||||
232
src/pages/Company/DataManagement/utils.ts
Normal file
232
src/pages/Company/DataManagement/utils.ts
Normal file
@@ -0,0 +1,232 @@
|
||||
import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem, AreaDataItem } from '@/types/analysis/industry';
|
||||
|
||||
export const formatQuarter: QuarterFormatter = (dateStr: string): QuarterFormat => {
|
||||
if (dateStr.includes('第')) return dateStr as QuarterFormat;
|
||||
|
||||
const [year, quarterPart] = dateStr.includes('-Q')
|
||||
? dateStr.split('-Q')
|
||||
: dateStr.split('-');
|
||||
|
||||
const quarterNum = quarterPart.replace('季度', '');
|
||||
const quarterMap: Record<string, string> = {
|
||||
'1': '第一季度',
|
||||
'2': '第二季度',
|
||||
'3': '第三季度',
|
||||
'4': '第四季度'
|
||||
};
|
||||
return `${year}-${quarterMap[quarterNum] || quarterPart}` as QuarterFormat;
|
||||
};
|
||||
|
||||
export const formatDateForDisplay: DateFormatter = (dateStr: string, dimension: TimeDimension): string => {
|
||||
try {
|
||||
if (dimension === '年') return dateStr.split('-')[0];
|
||||
if (dimension === '季度') {
|
||||
if (dateStr.includes('第')) {
|
||||
const [year, quarter] = dateStr.split('-');
|
||||
return `${year}年${quarter}`;
|
||||
}
|
||||
const [year, quarterNum] = dateStr.split('-');
|
||||
const quarterMap: Record<string, string> = {
|
||||
'1': '第一季度',
|
||||
'2': '第二季度',
|
||||
'3': '第三季度',
|
||||
'4': '第四季度',
|
||||
'Q1': '第一季度',
|
||||
'Q2': '第二季度',
|
||||
'Q3': '第三季度',
|
||||
'Q4': '第四季度'
|
||||
};
|
||||
return `${year}年${quarterMap[quarterNum] || quarterNum}`;
|
||||
}
|
||||
const [year, month] = dateStr.split('-');
|
||||
return `${year}年${month}月`;
|
||||
} catch (e) {
|
||||
console.error('日期格式化错误:', e);
|
||||
return dateStr;
|
||||
}
|
||||
};
|
||||
|
||||
export const convertApiData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date,
|
||||
category: item.name || item.category || '未知行业',
|
||||
value: Number(item.data || item.value) || 0
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date,
|
||||
category: item.name || item.category || '未知行业',
|
||||
value: Number(item.data || item.value) || 0
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertAreaApiData = (apiData: any): AreaDataItem[] => {
|
||||
if (!apiData?.data) {
|
||||
console.warn('convertAreaApiData: apiData.data 为空');
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const result: AreaDataItem[] = [];
|
||||
|
||||
// 处理嵌套的月份数据
|
||||
if (typeof apiData.data === 'object' && !Array.isArray(apiData.data)) {
|
||||
Object.entries(apiData.data).forEach(([time, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
if (!item) return;
|
||||
const uniqueName = items.filter((i: any) => i.name === item.name).length > 1
|
||||
? `${item.name}_${index}`
|
||||
: item.name;
|
||||
result.push({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || time,
|
||||
x:uniqueName,
|
||||
y:time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
if (Array.isArray(apiData.data)) {
|
||||
return apiData.data.map((item: any) => ({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || '未知时间',
|
||||
x: item.name,
|
||||
y: item.time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertSalaryData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date,
|
||||
category: item.name || item.category || '未知薪资区间',
|
||||
value: Number(item.data || item.value) || 0
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date,
|
||||
category: item.name || item.category || '未知薪资区间',
|
||||
value: Number(item.data || item.value) || 0
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('薪资数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertWorkYearData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date || '',
|
||||
category: item.name || item.category || '未知经验要求',
|
||||
value: Number(item.data || item.value || 0) // 确保数值不为null/undefined
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date: date || '',
|
||||
category: item.name || item.category || '未知经验要求',
|
||||
value: Number(item.data || item.value || 0) // 确保数值不为null/undefined
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('工作经验数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
export const convertEducationData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
const result: any[] = [];
|
||||
|
||||
// 处理嵌套的月份数据
|
||||
if (typeof apiData === 'object' && !Array.isArray(apiData)) {
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
if (!item) return; // 跳过空项
|
||||
result.push({
|
||||
date: date || '', // 确保日期不为undefined
|
||||
category: item.name || item.category || '不限', // 默认值
|
||||
value: Number(item.data || item.value || 0), // 确保数值有效
|
||||
originalData: item
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// 处理数组格式的响应
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date || '',
|
||||
category: item.name || item.category || '不限',
|
||||
value: Number(item.data || item.value || 0),
|
||||
originalData: item
|
||||
}));
|
||||
}
|
||||
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('学历数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
215
src/pages/Company/ServiceManagement/components/chartcards.tsx
Normal file
215
src/pages/Company/ServiceManagement/components/chartcards.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import React from 'react';
|
||||
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
|
||||
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
|
||||
|
||||
export const IndustryTrendCard = ({
|
||||
loading,
|
||||
currentIndustryData,
|
||||
config,
|
||||
availableIndustries,
|
||||
selectedIndustry,
|
||||
onIndustryChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="岗位趋势分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedIndustry}
|
||||
onChange={onIndustryChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择行业"
|
||||
disabled={availableIndustries.length === 0}
|
||||
>
|
||||
{availableIndustries.map((industry: any) => (
|
||||
<Option key={industry} value={industry}>
|
||||
{industry}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{currentIndustryData.length > 0 ? (
|
||||
<Line {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
loading
|
||||
? '数据加载中...'
|
||||
: selectedIndustry
|
||||
? '当前时间段无数据'
|
||||
: '请先选择岗位'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const AreaAnalysisCard = ({ loading, areaData, config }) => (
|
||||
<Card
|
||||
title="人员区域分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{
|
||||
padding: 12,
|
||||
height: 250,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<Spin tip="数据加载中..." size="large" />
|
||||
) : areaData.length > 0 ? (
|
||||
<div style={{ height: '100%', width: '100%', minHeight: 300 }}>
|
||||
<Heatmap {...config} />
|
||||
</div>
|
||||
) : (
|
||||
<Empty description="暂无区域数据" />
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const SalaryTrendCard = ({
|
||||
loading,
|
||||
currentSalaryData,
|
||||
config,
|
||||
availableSalaryRanges,
|
||||
selectedSalaryRange,
|
||||
onSalaryRangeChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="薪资区间分析"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedSalaryRange}
|
||||
onChange={onSalaryRangeChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择薪资区间"
|
||||
disabled={availableSalaryRanges.length === 0}
|
||||
>
|
||||
{availableSalaryRanges.map((range) => (
|
||||
<Option key={range} value={range}>
|
||||
{range}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{currentSalaryData.length > 0 ? (
|
||||
<Line {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={
|
||||
loading
|
||||
? '数据加载中...'
|
||||
: selectedSalaryRange
|
||||
? '当前时间段无数据'
|
||||
: '请先选择薪资区间'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const WorkYearCard = ({
|
||||
loading,
|
||||
workYearData,
|
||||
config,
|
||||
availableWorkYearRanges,
|
||||
selectedWorkYearRange,
|
||||
onWorkYearRangeChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="企业服务方向分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{
|
||||
padding: '12px',
|
||||
height: 250,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedWorkYearRange}
|
||||
onChange={onWorkYearRangeChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择服务方向"
|
||||
disabled={availableWorkYearRanges.length === 0}
|
||||
>
|
||||
{availableWorkYearRanges.map((range: any) => (
|
||||
<Option key={range} value={range}>
|
||||
{range}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{workYearData && workYearData.length > 0 ? (
|
||||
<div style={{ width: '100%', height: '100%', padding: 8 }}>
|
||||
<Pie {...config} />
|
||||
</div>
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={loading ? '数据加载中...' : '暂无工作经验数据'}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export const EducationCard = ({
|
||||
loading,
|
||||
educationData,
|
||||
config,
|
||||
availableEducationLevels,
|
||||
selectedEducationLevel,
|
||||
onEducationLevelChange,
|
||||
}) => (
|
||||
<Card
|
||||
title="企业学历分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}
|
||||
extra={
|
||||
<Select
|
||||
value={selectedEducationLevel}
|
||||
onChange={onEducationLevelChange}
|
||||
style={{ width: 180 }}
|
||||
loading={loading}
|
||||
placeholder="选择学历要求"
|
||||
disabled={availableEducationLevels.length === 0}
|
||||
>
|
||||
<Option value="">全部学历</Option>
|
||||
{availableEducationLevels.map((level) => (
|
||||
<Option key={level} value={level}>
|
||||
{level}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
}
|
||||
>
|
||||
<Spin spinning={loading}>
|
||||
{educationData.length > 0 ? (
|
||||
<Bar {...config} />
|
||||
) : (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={loading ? '数据加载中...' : '暂无学历数据'}
|
||||
/>
|
||||
)}
|
||||
</Spin>
|
||||
</Card>
|
||||
);
|
||||
456
src/pages/Company/ServiceManagement/components/chartconfigs.tsx
Normal file
456
src/pages/Company/ServiceManagement/components/chartconfigs.tsx
Normal file
@@ -0,0 +1,456 @@
|
||||
import { ChartConfig } from '@/types/analysis/industry';
|
||||
import dayjs from 'dayjs';
|
||||
import { formatDateForDisplay } from '../utils';
|
||||
|
||||
export const getHeatmapConfig = (areaData: any[], timeDimension: string) => {
|
||||
const sortedData = [...areaData].sort((a, b) => {
|
||||
if (timeDimension === '年') {
|
||||
return parseInt(a.time) - parseInt(b.time);
|
||||
} else if (timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.time.split('-Q');
|
||||
const [yearB, quarterB] = b.time.split('-Q');
|
||||
return yearA === yearB
|
||||
? parseInt(quarterA) - parseInt(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else {
|
||||
return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
data: sortedData,
|
||||
height: 240,
|
||||
autoFit: true,
|
||||
xField: 'name',
|
||||
yField: 'time',
|
||||
colorField: 'value',
|
||||
shapeField: 'square',
|
||||
sizeField: 'value',
|
||||
xAxis: {
|
||||
title: {
|
||||
text: '区域',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
style: {
|
||||
fontSize: 10,
|
||||
fill: '#666',
|
||||
},
|
||||
formatter: (text: string) => {
|
||||
return text.length > 4 ? `${text.substring(0, 3)}...` : text;
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: '时间',
|
||||
style: { fontSize: 12 },
|
||||
},
|
||||
label: {
|
||||
formatter: (text: string) => {
|
||||
if (timeDimension === '年') return `${text}年`;
|
||||
if (timeDimension === '季度') return text.replace('-Q', '年Q');
|
||||
return text.replace('-', '年').replace('-', '月');
|
||||
},
|
||||
style: {
|
||||
fontSize: 10,
|
||||
fill: '#666',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
text: (d: { value: number }) => d.value.toString(),
|
||||
position: 'inside',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
scale: {
|
||||
size: { range: [14, 14] },
|
||||
color: { range: ['#dddddd', '#9ec8e0', '#5fa4cd', '#2e7ab6', '#114d90'] },
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
responsive: true,
|
||||
};
|
||||
};
|
||||
|
||||
export const getIndustryChartConfig = (currentIndustryData: any[], type: string): ChartConfig => ({
|
||||
data: currentIndustryData,
|
||||
height: 200,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'cat',
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}${type === '招聘增长率' ? '%' : ''}`,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
size: 4,
|
||||
shape: 'circle',
|
||||
},
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'path-in',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
interactions: [
|
||||
{
|
||||
type: 'tooltip',
|
||||
cfg: {
|
||||
render: (e, { title, items }) => {
|
||||
const list = items.filter((item) => item.value);
|
||||
return (
|
||||
<div key={title} style={{ padding: '8px 12px' }}>
|
||||
<h4 style={{ marginBottom: 8 }}>{title}</h4>
|
||||
{list.map((item, index) => {
|
||||
const { name, value, color } = item;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: color,
|
||||
marginRight: 8,
|
||||
}}
|
||||
></span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<b>
|
||||
{value}
|
||||
{type === '招聘增长率' ? '%' : ''}
|
||||
</b>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: undefined,
|
||||
title: undefined,
|
||||
customContent: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export const getSalaryChartConfig = (currentSalaryData: any[]): ChartConfig => ({
|
||||
data: currentSalaryData,
|
||||
height: 240,
|
||||
xField: 'date',
|
||||
yField: 'value',
|
||||
seriesField: 'category',
|
||||
xAxis: {
|
||||
type: 'cat',
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}`,
|
||||
},
|
||||
},
|
||||
point: {
|
||||
size: 4,
|
||||
shape: 'circle',
|
||||
},
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'path-in',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
interactions: [
|
||||
{
|
||||
type: 'tooltip',
|
||||
cfg: {
|
||||
render: (e, { title, items }) => {
|
||||
const list = items.filter((item) => item.value);
|
||||
return (
|
||||
<div key={title} style={{ padding: '8px 12px' }}>
|
||||
<h4 style={{ marginBottom: 8 }}>{title}</h4>
|
||||
{list.map((item, index) => {
|
||||
const { name, value, color } = item;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: color,
|
||||
marginRight: 8,
|
||||
}}
|
||||
></span>
|
||||
<span>{name}</span>
|
||||
</div>
|
||||
<b>{value}</b>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: undefined,
|
||||
title: undefined,
|
||||
customContent: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export const getWorkYearPieConfig = (workYearData: any[], selectedWorkYearRange: string) => {
|
||||
const filteredData = workYearData
|
||||
.filter((item) => item.category === selectedWorkYearRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
value: item.value || 0,
|
||||
type: `${formatDateForDisplay(item.date, '月')} ${item.category}`,
|
||||
}));
|
||||
|
||||
return {
|
||||
data: filteredData,
|
||||
angleField: 'value',
|
||||
colorField: 'type',
|
||||
radius: 0.2,
|
||||
innerRadius: 0.5,
|
||||
label: {
|
||||
text: (d: { type: any; value: any }) => `${d.type}\n ${d.value}`,
|
||||
position: 'spider',
|
||||
},
|
||||
legend: false,
|
||||
tooltip: {
|
||||
showTitle: true,
|
||||
title: '工作经验分布',
|
||||
fields: ['type', 'value'],
|
||||
formatter: (datum: { type: any; value: any }) => ({
|
||||
name: datum.type,
|
||||
value: datum.value,
|
||||
}),
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
padding: 'auto',
|
||||
autoFit: true,
|
||||
};
|
||||
};
|
||||
|
||||
export const getEducationBarConfig = (educationData: any[], selectedEducationLevel: string) => {
|
||||
const educationLevelOrder = [
|
||||
'不限',
|
||||
'初中及以下',
|
||||
'中专/中技',
|
||||
'高中',
|
||||
'大专',
|
||||
'本科',
|
||||
'硕士',
|
||||
'博士',
|
||||
'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 barData = Object.entries(educationSummary)
|
||||
.filter(([_, value]) => value > 0)
|
||||
.map(([name, value]) => ({
|
||||
name,
|
||||
value,
|
||||
color: educationColorMap[name] || '#999',
|
||||
}))
|
||||
.sort((a, b) => educationLevelOrder.indexOf(a.name) - educationLevelOrder.indexOf(b.name));
|
||||
|
||||
return {
|
||||
data: barData,
|
||||
height: 200,
|
||||
xField: 'value',
|
||||
yField: 'name',
|
||||
seriesField: 'name',
|
||||
color: ({ name }: { name: string }) => educationColorMap[name] || '#999',
|
||||
meta: {
|
||||
name: { alias: '学历要求' },
|
||||
value: { alias: '岗位数量' },
|
||||
},
|
||||
xAxis: {
|
||||
label: {
|
||||
formatter: (val: string) => `${val}`,
|
||||
},
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
stroke: '#f0f0f0',
|
||||
lineDash: [4, 4],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
label: {
|
||||
formatter: (text: string) => text,
|
||||
},
|
||||
},
|
||||
barStyle: {
|
||||
radius: [2, 2, 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',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{ type: 'element-active' }],
|
||||
legend: false,
|
||||
animation: {
|
||||
appear: {
|
||||
animation: 'scale-in-y',
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const timeData = cleanEducationData
|
||||
.filter((item) => 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Card, Select, Spin, Empty, Row, Col } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const Chartline: React.FC<{}> = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
initCharts()
|
||||
}, []);
|
||||
|
||||
const initCharts = () => {
|
||||
const myChart = echarts.init(document.getElementById('main'));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// dataView: { readOnly: false },
|
||||
// restore: {},
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
data: ['岗位1', '岗位2', '岗位3', '岗位4', '岗位5']
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '岗位3' },
|
||||
{ value: 40, name: '岗位4' },
|
||||
{ value: 20, name: '岗位5' },
|
||||
{ value: 80, name: '岗位2' },
|
||||
{ value: 100, name: '岗位1' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title="企业人员分布"
|
||||
style={{ marginBottom: 16 }}
|
||||
bodyStyle={{ padding: '12px', height: 250 }}>
|
||||
<div id='main' style={{ height: '110%', width: '110%' }} ></div>
|
||||
</Card >
|
||||
</>
|
||||
);
|
||||
};
|
||||
// 必须导出组件
|
||||
export default Chartline;
|
||||
578
src/pages/Company/ServiceManagement/index.tsx
Normal file
578
src/pages/Company/ServiceManagement/index.tsx
Normal file
@@ -0,0 +1,578 @@
|
||||
import React, { useEffect, useState, useMemo, useRef } from 'react';
|
||||
import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker } from 'antd';
|
||||
import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
|
||||
import {
|
||||
getIndustryTrend,
|
||||
getIndustryAreaTrend,
|
||||
getSalaryTrend,
|
||||
getWorkYearTrend,
|
||||
getEducationTrend,
|
||||
} from '@/services/analysis/industry';
|
||||
import dayjs from 'dayjs';
|
||||
import { useRequest } from '@umijs/max';
|
||||
import {
|
||||
TimeDimension,
|
||||
AnalysisType,
|
||||
IndustryTrendState,
|
||||
IndustryDataItem,
|
||||
ChartConfig,
|
||||
} from '@/types/analysis/industry';
|
||||
import {
|
||||
formatQuarter,
|
||||
formatDateForDisplay,
|
||||
convertApiData,
|
||||
convertSalaryData,
|
||||
convertWorkYearData,
|
||||
convertEducationData,
|
||||
} from './utils';
|
||||
import {
|
||||
getHeatmapConfig,
|
||||
getIndustryChartConfig,
|
||||
getSalaryChartConfig,
|
||||
getWorkYearPieConfig,
|
||||
getEducationBarConfig,
|
||||
} from './components/chartconfigs';
|
||||
import {
|
||||
IndustryTrendCard,
|
||||
AreaAnalysisCard,
|
||||
SalaryTrendCard,
|
||||
WorkYearCard,
|
||||
EducationCard,
|
||||
} from './components/chartcards';
|
||||
import Chartfunnel from './components/chartfunnel'
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const flattenAreaData = (apiResponse: any) => {
|
||||
if (!apiResponse || typeof apiResponse !== 'object') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const flattenedData: { name: any; time: any; value: number }[] = [];
|
||||
|
||||
for (const month in apiResponse) {
|
||||
if (apiResponse.hasOwnProperty(month)) {
|
||||
const areas = apiResponse[month];
|
||||
|
||||
areas.forEach((area: { name: any; time: any; data: string }) => {
|
||||
flattenedData.push({
|
||||
name: area.name,
|
||||
time: area.time,
|
||||
value: parseInt(area.data) || 0,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return flattenedData;
|
||||
};
|
||||
|
||||
const IndustryTrendPage: React.FC = () => {
|
||||
const [params, setParams] = useState<IndustryTrendState>({
|
||||
timeDimension: '月',
|
||||
type: '岗位发布数量',
|
||||
startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
|
||||
endTime: dayjs().format('YYYY-MM'),
|
||||
selectedIndustry: '',
|
||||
selectedSalaryRange: '',
|
||||
selectedWorkYearRange: '',
|
||||
});
|
||||
|
||||
const [allData, setAllData] = useState<IndustryDataItem[]>([]);
|
||||
const [areaData, setAreaData] = useState<any[]>([]);
|
||||
const [salaryData, setSalaryData] = useState<any[]>([]);
|
||||
const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
|
||||
const [availableSalaryRanges, setAvailableSalaryRanges] = useState<string[]>([]);
|
||||
const heatmapRef = useRef(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [workYearData, setWorkYearData] = useState<any[]>([]);
|
||||
const [availableWorkYearRanges, setAvailableWorkYearRanges] = useState<string[]>([]);
|
||||
const [educationData, setEducationData] = useState<any[]>([]);
|
||||
const [availableEducationLevels, setAvailableEducationLevels] = useState<string[]>([]);
|
||||
const [selectedEducationLevel, setSelectedEducationLevel] = useState<string>('');
|
||||
|
||||
// 获取行业趋势数据
|
||||
const { loading: industryLoading, run: fetchIndustryData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getIndustryTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertApiData(data);
|
||||
setAllData(formattedData);
|
||||
|
||||
const industries = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
|
||||
setAvailableIndustries(industries);
|
||||
|
||||
if (industries.length > 0 && !industries.includes(params.selectedIndustry)) {
|
||||
setParams((p) => ({ ...p, selectedIndustry: industries[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('行业数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取地区趋势数据
|
||||
const { loading: areaLoading, run: fetchAreaData } = useRequest(
|
||||
async () => {
|
||||
let { startTime, endTime, timeDimension, type } = params;
|
||||
|
||||
if (timeDimension === '季度') {
|
||||
startTime = formatQuarter(startTime);
|
||||
endTime = formatQuarter(endTime);
|
||||
}
|
||||
|
||||
return await getIndustryAreaTrend({
|
||||
timeDimension,
|
||||
type,
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (res) => {
|
||||
const formattedData = flattenAreaData(res);
|
||||
setAreaData(formattedData);
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('地区数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取薪资趋势数据
|
||||
const { loading: salaryLoading, run: fetchSalaryData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getSalaryTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertSalaryData(data);
|
||||
setSalaryData(formattedData);
|
||||
|
||||
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const extractNumber = (str: string) => parseInt(str.replace(/[^0-9]/g, '') || 0);
|
||||
return extractNumber(a) - extractNumber(b);
|
||||
});
|
||||
|
||||
setAvailableSalaryRanges(ranges);
|
||||
|
||||
if (ranges.length > 0 && !ranges.includes(params.selectedSalaryRange)) {
|
||||
setParams((p) => ({ ...p, selectedSalaryRange: ranges[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('薪资数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取工作年限数据
|
||||
const { loading: workYearLoading, run: fetchWorkYearData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getWorkYearTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertWorkYearData(data);
|
||||
setWorkYearData(formattedData);
|
||||
|
||||
const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const order = ['应届', '1-3年', '3-5年', '5年以上'];
|
||||
return order.indexOf(a) - order.indexOf(b);
|
||||
});
|
||||
|
||||
setAvailableWorkYearRanges(ranges);
|
||||
if (ranges.length > 0 && !ranges.includes(params.selectedWorkYearRange)) {
|
||||
setParams((p) => ({ ...p, selectedWorkYearRange: ranges[0] }));
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('工作经验数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 获取学历数据
|
||||
const { loading: educationLoading, run: fetchEducationData } = useRequest(
|
||||
async () => {
|
||||
const now = dayjs();
|
||||
let startTime = now.subtract(1, 'year').format('YYYY-MM');
|
||||
let endTime = now.format('YYYY-MM');
|
||||
const timeDimension = '月';
|
||||
|
||||
return await getEducationTrend({
|
||||
timeDimension,
|
||||
type: '岗位发布数量',
|
||||
startTime,
|
||||
endTime,
|
||||
});
|
||||
},
|
||||
{
|
||||
manual: true,
|
||||
onSuccess: (data) => {
|
||||
const formattedData = convertEducationData(data);
|
||||
setEducationData(formattedData);
|
||||
|
||||
const levels = Array.from(new Set(formattedData.map((item: any) => item.category)))
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => {
|
||||
const order = ['不限', '初中及以下', '中专/中技', '大专', '本科', '硕士', '博士'];
|
||||
return order.indexOf(a) - order.indexOf(b);
|
||||
});
|
||||
|
||||
setAvailableEducationLevels(levels);
|
||||
if (levels.length > 0 && !levels.includes(selectedEducationLevel)) {
|
||||
setSelectedEducationLevel(levels[0]);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error('学历数据加载失败');
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const currentWorkYearData = useMemo(() => {
|
||||
if (!params.selectedWorkYearRange || workYearData.length === 0) return [];
|
||||
|
||||
return workYearData
|
||||
.filter((item) => item.category === params.selectedWorkYearRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [workYearData, params.selectedWorkYearRange]);
|
||||
|
||||
const currentIndustryData = useMemo(() => {
|
||||
if (!params.selectedIndustry || allData.length === 0) return [];
|
||||
|
||||
return allData
|
||||
.filter((item) => item.category === params.selectedIndustry)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, params.timeDimension),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (params.timeDimension === '季度') {
|
||||
const [yearA, quarterA] = a.originalDate.split('-');
|
||||
const [yearB, quarterB] = b.originalDate.split('-');
|
||||
|
||||
const quarterToNumber = (q: string) => {
|
||||
if (q.includes('第一')) return 1;
|
||||
if (q.includes('第二')) return 2;
|
||||
if (q.includes('第三')) return 3;
|
||||
if (q.includes('第四')) return 4;
|
||||
return 0;
|
||||
};
|
||||
|
||||
return yearA === yearB
|
||||
? quarterToNumber(quarterA) - quarterToNumber(quarterB)
|
||||
: parseInt(yearA) - parseInt(yearB);
|
||||
} else if (params.timeDimension === '年') {
|
||||
return parseInt(a.originalDate) - parseInt(b.originalDate);
|
||||
} else {
|
||||
return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
|
||||
}
|
||||
});
|
||||
}, [allData, params.selectedIndustry, params.timeDimension]);
|
||||
|
||||
const currentSalaryData = useMemo(() => {
|
||||
if (!params.selectedSalaryRange || salaryData.length === 0) return [];
|
||||
|
||||
return salaryData
|
||||
.filter((item) => item.category === params.selectedSalaryRange)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [salaryData, params.selectedSalaryRange]);
|
||||
|
||||
const currentEducationData = useMemo(() => {
|
||||
if (!selectedEducationLevel || educationData.length === 0) return [];
|
||||
return educationData
|
||||
.filter((item) => item.category === selectedEducationLevel)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
originalDate: item.date,
|
||||
date: formatDateForDisplay(item.date, '月'),
|
||||
}))
|
||||
.sort((a, b) => dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf());
|
||||
}, [educationData, selectedEducationLevel]);
|
||||
|
||||
const heatmapConfig = useMemo(
|
||||
() => getHeatmapConfig(areaData, params.timeDimension),
|
||||
[areaData, params.timeDimension],
|
||||
);
|
||||
|
||||
const industryChartConfig = useMemo(
|
||||
() => getIndustryChartConfig(currentIndustryData, params.type),
|
||||
[currentIndustryData, params.type],
|
||||
);
|
||||
|
||||
const salaryChartConfig = useMemo(
|
||||
() => getSalaryChartConfig(currentSalaryData),
|
||||
[currentSalaryData],
|
||||
);
|
||||
|
||||
const workYearPieConfig = useMemo(
|
||||
() => getWorkYearPieConfig(workYearData, params.selectedWorkYearRange),
|
||||
[workYearData, params.selectedWorkYearRange],
|
||||
);
|
||||
|
||||
const educationBarConfig = useMemo(
|
||||
() => getEducationBarConfig(educationData, selectedEducationLevel),
|
||||
[educationData, selectedEducationLevel],
|
||||
);
|
||||
|
||||
const handleTimeDimensionChange = (value: TimeDimension) => {
|
||||
const now = dayjs();
|
||||
let newStartTime = '';
|
||||
|
||||
if (value === '月') {
|
||||
newStartTime = now.subtract(5, 'month').format('YYYY-MM');
|
||||
} else if (value === '季度') {
|
||||
newStartTime = now.subtract(6, 'quarter').format('YYYY-Q');
|
||||
} else {
|
||||
newStartTime = now.subtract(5, 'year').format('YYYY');
|
||||
}
|
||||
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
timeDimension: value,
|
||||
startTime: newStartTime,
|
||||
endTime:
|
||||
value === '月'
|
||||
? now.format('YYYY-MM')
|
||||
: value === '季度'
|
||||
? now.format('YYYY-Q')
|
||||
: now.format('YYYY'),
|
||||
selectedIndustry: '',
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (dates: any, dateStrings: [string, string]) => {
|
||||
if (dates && dates[0] && dates[1]) {
|
||||
setParams((p) => ({
|
||||
...p,
|
||||
startTime: dateStrings[0],
|
||||
endTime: dateStrings[1],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const disabledDate = (current: dayjs.Dayjs) => {
|
||||
const now = dayjs();
|
||||
|
||||
if (params.timeDimension === '月') {
|
||||
return current.isAfter(now.endOf('month'));
|
||||
} else if (params.timeDimension === '季度') {
|
||||
return current.isAfter(now.endOf('quarter'));
|
||||
} else {
|
||||
return current.isAfter(now.endOf('year'));
|
||||
}
|
||||
};
|
||||
|
||||
const getPickerValue = () => {
|
||||
try {
|
||||
return [
|
||||
dayjs(
|
||||
params.startTime,
|
||||
params.timeDimension === '年'
|
||||
? 'YYYY'
|
||||
: params.timeDimension === '季度'
|
||||
? 'YYYY-Q'
|
||||
: 'YYYY-MM',
|
||||
),
|
||||
dayjs(
|
||||
params.endTime,
|
||||
params.timeDimension === '年'
|
||||
? 'YYYY'
|
||||
: params.timeDimension === '季度'
|
||||
? 'YYYY-Q'
|
||||
: 'YYYY-MM',
|
||||
),
|
||||
];
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
fetchSalaryData();
|
||||
fetchWorkYearData();
|
||||
fetchEducationData();
|
||||
}, [params.timeDimension, params.startTime, params.endTime, params.type]);
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16 }} ref={containerRef}>
|
||||
<Card title="企业服务分析" style={{ marginBottom: 24 }}>
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Space size="middle" wrap>
|
||||
<Select
|
||||
value={params.timeDimension}
|
||||
onChange={handleTimeDimensionChange}
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value="月">按月</Option>
|
||||
<Option value="季度">按季度</Option>
|
||||
<Option value="年">按年</Option>
|
||||
</Select>
|
||||
|
||||
<RangePicker
|
||||
picker={
|
||||
params.timeDimension === '月'
|
||||
? 'month'
|
||||
: params.timeDimension === '季度'
|
||||
? 'quarter'
|
||||
: 'year'
|
||||
}
|
||||
value={getPickerValue()}
|
||||
onChange={handleDateRangeChange}
|
||||
style={{ width: 180 }}
|
||||
disabled={industryLoading || areaLoading}
|
||||
allowClear={false}
|
||||
disabledDate={disabledDate}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={params.type}
|
||||
onChange={(value) => setParams((p) => ({ ...p, type: value }))}
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<Option value="岗位发布数量">岗位数量</Option>
|
||||
<Option value="招聘增长率">增长率</Option>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
fetchIndustryData();
|
||||
fetchAreaData();
|
||||
}}
|
||||
loading={industryLoading || areaLoading}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<SalaryTrendCard
|
||||
loading={salaryLoading}
|
||||
currentSalaryData={currentSalaryData}
|
||||
config={salaryChartConfig}
|
||||
availableSalaryRanges={availableSalaryRanges}
|
||||
selectedSalaryRange={params.selectedSalaryRange}
|
||||
onSalaryRangeChange={(value) =>
|
||||
setParams((p) => ({ ...p, selectedSalaryRange: value }))
|
||||
}
|
||||
/>
|
||||
</Col>
|
||||
{/* 行业趋势图表 - 全宽显示 */}
|
||||
|
||||
|
||||
{/* 工作经验和学历要求 - 中等屏幕下分成两列 */}
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<Chartfunnel />
|
||||
</Col>
|
||||
{/* <Col xs={24} md={12} lg={12}>
|
||||
<WorkYearCard
|
||||
loading={workYearLoading}
|
||||
workYearData={workYearData}
|
||||
config={workYearPieConfig}
|
||||
availableWorkYearRanges={availableWorkYearRanges}
|
||||
selectedWorkYearRange={params.selectedWorkYearRange}
|
||||
onWorkYearRangeChange={(value) =>
|
||||
setParams((p) => ({ ...p, selectedWorkYearRange: value }))
|
||||
}
|
||||
/>
|
||||
</Col> */}
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<EducationCard
|
||||
loading={educationLoading}
|
||||
educationData={educationData}
|
||||
config={educationBarConfig}
|
||||
availableEducationLevels={availableEducationLevels}
|
||||
selectedEducationLevel={selectedEducationLevel}
|
||||
onEducationLevelChange={setSelectedEducationLevel}
|
||||
/>
|
||||
</Col>
|
||||
{/* 区域分析和薪资趋势 - 中等屏幕下分成两列 */}
|
||||
<Col xs={24} md={12} lg={12}>
|
||||
<AreaAnalysisCard loading={areaLoading} areaData={areaData} config={heatmapConfig} />
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={24}>
|
||||
<IndustryTrendCard
|
||||
loading={industryLoading}
|
||||
currentIndustryData={currentIndustryData}
|
||||
config={industryChartConfig}
|
||||
availableIndustries={availableIndustries}
|
||||
selectedIndustry={params.selectedIndustry}
|
||||
onIndustryChange={(value) => setParams((p) => ({ ...p, selectedIndustry: value }))}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
|
||||
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndustryTrendPage;
|
||||
232
src/pages/Company/ServiceManagement/utils.ts
Normal file
232
src/pages/Company/ServiceManagement/utils.ts
Normal file
@@ -0,0 +1,232 @@
|
||||
import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem, AreaDataItem } from '@/types/analysis/industry';
|
||||
|
||||
export const formatQuarter: QuarterFormatter = (dateStr: string): QuarterFormat => {
|
||||
if (dateStr.includes('第')) return dateStr as QuarterFormat;
|
||||
|
||||
const [year, quarterPart] = dateStr.includes('-Q')
|
||||
? dateStr.split('-Q')
|
||||
: dateStr.split('-');
|
||||
|
||||
const quarterNum = quarterPart.replace('季度', '');
|
||||
const quarterMap: Record<string, string> = {
|
||||
'1': '第一季度',
|
||||
'2': '第二季度',
|
||||
'3': '第三季度',
|
||||
'4': '第四季度'
|
||||
};
|
||||
return `${year}-${quarterMap[quarterNum] || quarterPart}` as QuarterFormat;
|
||||
};
|
||||
|
||||
export const formatDateForDisplay: DateFormatter = (dateStr: string, dimension: TimeDimension): string => {
|
||||
try {
|
||||
if (dimension === '年') return dateStr.split('-')[0];
|
||||
if (dimension === '季度') {
|
||||
if (dateStr.includes('第')) {
|
||||
const [year, quarter] = dateStr.split('-');
|
||||
return `${year}年${quarter}`;
|
||||
}
|
||||
const [year, quarterNum] = dateStr.split('-');
|
||||
const quarterMap: Record<string, string> = {
|
||||
'1': '第一季度',
|
||||
'2': '第二季度',
|
||||
'3': '第三季度',
|
||||
'4': '第四季度',
|
||||
'Q1': '第一季度',
|
||||
'Q2': '第二季度',
|
||||
'Q3': '第三季度',
|
||||
'Q4': '第四季度'
|
||||
};
|
||||
return `${year}年${quarterMap[quarterNum] || quarterNum}`;
|
||||
}
|
||||
const [year, month] = dateStr.split('-');
|
||||
return `${year}年${month}月`;
|
||||
} catch (e) {
|
||||
console.error('日期格式化错误:', e);
|
||||
return dateStr;
|
||||
}
|
||||
};
|
||||
|
||||
export const convertApiData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date,
|
||||
category: item.name || item.category || '未知行业',
|
||||
value: Number(item.data || item.value) || 0
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date,
|
||||
category: item.name || item.category || '未知行业',
|
||||
value: Number(item.data || item.value) || 0
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertAreaApiData = (apiData: any): AreaDataItem[] => {
|
||||
if (!apiData?.data) {
|
||||
console.warn('convertAreaApiData: apiData.data 为空');
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const result: AreaDataItem[] = [];
|
||||
|
||||
// 处理嵌套的月份数据
|
||||
if (typeof apiData.data === 'object' && !Array.isArray(apiData.data)) {
|
||||
Object.entries(apiData.data).forEach(([time, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
if (!item) return;
|
||||
const uniqueName = items.filter((i: any) => i.name === item.name).length > 1
|
||||
? `${item.name}_${index}`
|
||||
: item.name;
|
||||
result.push({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || time,
|
||||
x:uniqueName,
|
||||
y:time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
if (Array.isArray(apiData.data)) {
|
||||
return apiData.data.map((item: any) => ({
|
||||
name: item.name || '未知区域',
|
||||
value: Number(item.data) || 0,
|
||||
time: item.time || '未知时间',
|
||||
x: item.name,
|
||||
y: item.time,
|
||||
category: item.name,
|
||||
originalData: item
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertSalaryData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date,
|
||||
category: item.name || item.category || '未知薪资区间',
|
||||
value: Number(item.data || item.value) || 0
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date,
|
||||
category: item.name || item.category || '未知薪资区间',
|
||||
value: Number(item.data || item.value) || 0
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('薪资数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const convertWorkYearData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date || '',
|
||||
category: item.name || item.category || '未知经验要求',
|
||||
value: Number(item.data || item.value || 0) // 确保数值不为null/undefined
|
||||
}));
|
||||
}
|
||||
if (typeof apiData === 'object') {
|
||||
const result: IndustryDataItem[] = [];
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
result.push({
|
||||
date: date || '',
|
||||
category: item.name || item.category || '未知经验要求',
|
||||
value: Number(item.data || item.value || 0) // 确保数值不为null/undefined
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('工作经验数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
export const convertEducationData: ApiDataConverter = (apiData: any) => {
|
||||
if (!apiData) return [];
|
||||
try {
|
||||
const result: any[] = [];
|
||||
|
||||
// 处理嵌套的月份数据
|
||||
if (typeof apiData === 'object' && !Array.isArray(apiData)) {
|
||||
Object.entries(apiData).forEach(([date, items]) => {
|
||||
if (Array.isArray(items)) {
|
||||
items.forEach((item: any) => {
|
||||
if (!item) return; // 跳过空项
|
||||
result.push({
|
||||
date: date || '', // 确保日期不为undefined
|
||||
category: item.name || item.category || '不限', // 默认值
|
||||
value: Number(item.data || item.value || 0), // 确保数值有效
|
||||
originalData: item
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// 处理数组格式的响应
|
||||
if (Array.isArray(apiData)) {
|
||||
return apiData.map(item => ({
|
||||
date: item.time || item.date || '',
|
||||
category: item.name || item.category || '不限',
|
||||
value: Number(item.data || item.value || 0),
|
||||
originalData: item
|
||||
}));
|
||||
}
|
||||
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('学历数据转换错误:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user