jiangxucong
/
flx-lms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组织架构页面开发

Browse Source
master
jiangxucong 2 weeks ago
parent aa9afb0fcb
commit 9c96ab638b
3 changed files with 944 additions and 17 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -19,6 +19,7 @@
"braft-finder": "^0.0.21",
"braft-utils": "^3.0.2",
"echarts": "^4.9.0",
"echarts-for-react": "^3.0.2",
"moment": "^2.29.1",
"qs": "^6.11.0",
"react": "^18.2.0",

478
src/pages/organmanage_organchart/OrganChart.js
Unescape Escape View File

@ -1,14 +1,472 @@
import React, {Fragment, PureComponent} from 'react';
import React, { PureComponent } from 'react';
import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic } from 'antd';
import {
BuildingOutlined,
TeamOutlined,
ClockCircleOutlined,
DownloadOutlined,
DownOutlined,
SyncOutlined,
UserOutlined,
DollarOutlined,
SettingOutlined,
BellOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './OrganChart.less';
class OrganChart extends PureComponent {
render() {
return (
<>
<iframe title="组织架构图" className={styles.frameContent} src="/组织架构图.html"/>
</>
)
}
constructor(props) {
super(props);
this.state = {
selectedYear: '2023',
expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
organizationData: [
{
title: '集团公司',
key: '0-0',
count: 1284,
children: [
{
title: '行政中心',
key: '0-0-0',
count: 356,
children: [
{ title: '人力资源部', key: '0-0-0-0', count: 45 },
{ title: '财务部', key: '0-0-0-1', count: 32 },
{ title: 'IT部', key: '0-0-0-2', count: 28 }
]
},
{
title: '营销中心',
key: '0-0-1',
count: 268,
children: [
{ title: '市场部', key: '0-0-1-0', count: 86 },
{ title: '销售部', key: '0-0-1-1', count: 124 },
{ title: '客户服务部', key: '0-0-1-2', count: 58 }
]
},
{
title: '研发中心',
key: '0-0-2',
count: 232,
children: [
{ title: '前端开发部', key: '0-0-2-0', count: 76 },
{ title: '后端开发部', key: '0-0-2-1', count: 92 },
{ title: '移动开发部', key: '0-0-2-2', count: 64 }
]
}
]
}
]
};
}
// 获取处理后的树形数据
getTreeData = () => {
const { organizationData } = this.state;
const processNode = (node) => ({
key: node.key,
title: (
<span className={styles['tree-node-title']}>
{this.getNodeIcon(node.title)}
<span className={styles['node-title']}>{node.title}</span>
<span className={styles['node-count']}>({node.count})</span>
</span>
),
children: node.children ? node.children.map(processNode) : undefined
});
return organizationData.map(processNode);
};
// 获取节点图标
getNodeIcon = (title) => {
if (title.includes('集团')) return <TeamOutlined />;
if (title.includes('中心')) return <TeamOutlined />;
if (title.includes('人力')) return <UserOutlined />;
if (title.includes('财务')) return <DollarOutlined />;
if (title.includes('IT') || title.includes('开发')) return <SettingOutlined />;
return <TeamOutlined />;
};
// 获取年份菜单
getYearMenu = () => {
const years = ['2021', '2022', '2023', '2024'];
const menuItems = years.map(year => ({
key: year,
label: year,
}));
return {
items: menuItems,
onClick: ({ key }) => this.setState({ selectedYear: key })
};
};
// ECharts配置选项
getDepartmentChartOption = () => {
return {
title: {
text: '各部门人员分布',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}: {c}人'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: { color: '#f0f0f0' }
}
},
yAxis: {
type: 'category',
data: ['人力资源部', '财务部', 'IT部', '市场部', '销售部', '客户服务部', '前端开发部', '后端开发部', '移动开发部'],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
fontSize: 12
}
},
series: [
{
name: '人数',
type: 'bar',
data: [45, 32, 28, 86, 124, 58, 76, 92, 64],
itemStyle: {
color: '#1890ff',
borderRadius: [0, 4, 4, 0]
},
barWidth: 20,
label: {
show: true,
position: 'right',
formatter: '{c}人',
fontSize: 11
}
}
]
};
};
// 组织架构分布饼图配置
getOrgPieChartOption = () => {
return {
title: {
text: '部门人员占比',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}人 ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
top: 'middle',
textStyle: {
fontSize: 12
}
},
series: [
{
name: '部门分布',
type: 'pie',
radius: ['40%', '70%'],
center: ['65%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 356, name: '行政中心' },
{ value: 268, name: '营销中心' },
{ value: 232, name: '研发中心' },
{ value: 428, name: '其他部门' }
],
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 2
}
}
]
};
};
// 树节点展开/收起处理
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
render() {
const { selectedYear, expandedKeys } = this.state;
return (
<div className={styles['organ-chart-page']} style={{
height: '100vh',
overflowY: 'auto',
overflowX: 'hidden',
padding: '16px'
}}>
{/* 公告栏 */}
<Alert
message={
<div className={styles['announcement-container']}>
<div className={styles['announcement-badge']}>
<BellOutlined />
公告
</div>
<div className={styles['announcement-content']}>
<div className={styles['marquee-text']}>
<span>2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
<span>系统将于2023年12月25日00:00-06:00进行升级维护</span>
<span>新员工入职培训计划已更新，请相关人员注意查收邮件</span>
<span>年度优秀员工评选活动正式启动，详情请见内网公告</span>
</div>
</div>
</div>
}
type="info"
closable
className={styles['organ-chart-announcement']}
/>
<Row gutter={24}>
{/* 左侧组织架构树 */}
<Col xs={24} md={6}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
<span>组织架构</span>
</div>
<Button
type="text"
icon={<SyncOutlined />}
size="small"
style={{ color: '#1890ff' }}
/>
</div>
}
className={styles['org-sidebar']}
style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }}
>
<div style={{ maxHeight: 'calc(100vh - 280px)', overflowY: 'auto' }}>
<Tree
showIcon
expandedKeys={expandedKeys}
onExpand={this.onExpand}
treeData={this.getTreeData()}
/>
</div>
</Card>
</Col>
{/* 右侧内容区 */}
<Col xs={24} md={18}>
<div style={{ height: 'calc(100vh - 200px)', overflowY: 'auto', paddingRight: '8px' }}>
{/* 筛选区域 */}
<Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<h2 className={styles['section-title']}>组织架构详情</h2>
<div className={styles['filter-actions']}>
<div className={styles['year-selector']}>
<span>年份:</span>
<Dropdown
menu={this.getYearMenu()}
trigger={['click']}
>
<Button type="default">
{selectedYear} <DownOutlined />
</Button>
</Dropdown>
</div>
<Button type="primary" icon={<DownloadOutlined />}>
导出
</Button>
</div>
</div>
</Card>
{/* 主要内容区 */}
<Card className={styles['main-content']}>
{/* 组织架构图 */}
<div className={styles['org-chart-container']}>
<Card className={`${styles['org-chart-node']} ${styles['company-node']}`}>
<div className={styles['node-title']}>集团公司</div>
<div className={styles['node-count']}>1,284人</div>
</Card>
<Row gutter={32} className={styles['center-row']}>
<Col xs={24} md={8} className={styles['center-column']}>
<Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
<div className={styles['node-title']}>行政中心</div>
<div className={styles['node-count']}>356人</div>
</Card>
<div className={styles['department-list']}>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>人力资源部</div>
<div className={styles['node-count']}>45人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>财务部</div>
<div className={styles['node-count']}>32人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>IT部</div>
<div className={styles['node-count']}>28人</div>
</Card>
</div>
</Col>
<Col xs={24} md={8} className={styles['center-column']}>
<Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
<div className={styles['node-title']}>营销中心</div>
<div className={styles['node-count']}>268人</div>
</Card>
<div className={styles['department-list']}>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>市场部</div>
<div className={styles['node-count']}>86人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>销售部</div>
<div className={styles['node-count']}>124人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>客户服务部</div>
<div className={styles['node-count']}>58人</div>
</Card>
</div>
</Col>
<Col xs={24} md={8} className={styles['center-column']}>
<Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
<div className={styles['node-title']}>研发中心</div>
<div className={styles['node-count']}>232人</div>
</Card>
<div className={styles['department-list']}>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>前端开发部</div>
<div className={styles['node-count']}>76人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>后端开发部</div>
<div className={styles['node-count']}>92人</div>
</Card>
<Card className={styles['department-node']}>
<div className={styles['node-title']}>移动开发部</div>
<div className={styles['node-count']}>64人</div>
</Card>
</div>
</Col>
</Row>
</div>
{/* 统计卡片 */}
<Row gutter={16} className={styles['statistics-row']}>
<Col xs={24} sm={8}>
<Card className={styles['stat-card']}>
<Statistic
title="部门总数"
value={24}
prefix={<TeamOutlined />}
suffix="个"
valueStyle={{ color: '#1890ff' }}
/>
<div className={styles['stat-desc']}>较上月增加2个</div>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card className={styles['stat-card']}>
<Statistic
title="员工总数"
value={1284}
prefix={<UserOutlined />}
suffix="人"
valueStyle={{ color: '#52c41a' }}
/>
<div className={styles['stat-desc']}>较上月增加56人</div>
</Card>
</Col>
<Col xs={24} sm={8}>
<Card className={styles['stat-card']}>
<Statistic
title="平均在职时长"
value={3.2}
prefix={<ClockCircleOutlined />}
suffix="年"
precision={1}
valueStyle={{ color: '#fa8c16' }}
/>
<div className={styles['stat-desc']}>较上月增加0.1年</div>
</Card>
</Col>
</Row>
</Card>
{/* 图表区域 */}
<Row gutter={16} className={styles['charts-row']}>
<Col xs={24} lg={14}>
<Card title="各部门人员分布" className={styles['chart-section']}>
<ReactECharts
option={this.getDepartmentChartOption()}
style={{ height: '300px' }}
/>
</Card>
</Col>
<Col xs={24} lg={10}>
<Card title="部门人员占比" className={styles['chart-section']}>
<ReactECharts
option={this.getOrgPieChartOption()}
style={{ height: '300px' }}
/>
</Card>
</Col>
</Row>
</div>
</Col>
</Row>
</div>
);
}
}
export default OrganChart
export default OrganChart;

480
src/pages/organmanage_organchart/OrganChart.less
Unescape Escape View File

@ -1,10 +1,478 @@
@import '~@/utils/utils.less';
.frameContent {
/* 组织架构页面样式 */
.organ-chart-page {
padding: 16px;
background-color: #f9fafb;
min-height: 100vh;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
/* 内容滚动区域的滚动条样式 */
div[style*="overflowY: auto"] {
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
&:hover {
background: #bfbfbf;
}
}
}
}
/* 公告栏样式 */
.organ-chart-announcement {
margin-bottom: 24px;
border-radius: 6px;
overflow: hidden;
}
.announcement-container {
display: flex;
align-items: center;
}
.announcement-badge {
background-color: #fef3c7;
color: #92400e;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
margin-right: 12px;
white-space: nowrap;
display: flex;
align-items: center;
.anticon {
margin-right: 4px;
}
}
.announcement-content {
overflow: hidden;
flex: 1;
}
.marquee-text {
white-space: nowrap;
animation: marquee 20s linear infinite;
display: inline-block;
span {
font-size: 14px;
margin-right: 32px;
&:last-child {
margin-right: 0;
}
}
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* 组织架构侧边栏样式 */
.org-sidebar {
height: fit-content;
.ant-card-body {
padding: 16px 8px 16px 16px;
}
/* 树形组件滚动区域样式 */
.ant-tree {
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 2px;
&:hover {
background: #bfbfbf;
}
}
}
}
/* Tree节点标题样式 */
.tree-node-title {
display: flex;
align-items: center;
.node-text {
flex: 1;
font-size: 14px;
margin-left: 8px;
}
.node-count {
color: #999;
font-size: 12px;
margin-left: auto;
}
}
.org-node {
background-color: #F5F6FA;
padding: 8px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
&.has-children {
cursor: pointer;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
.node-content {
display: flex;
align-items: center;
.node-icon {
color: #6b7280;
display: flex;
align-items: center;
.anticon {
color: #6b7280;
}
}
}
.node-text {
font-size: 14px;
margin-left: 8px;
}
.expand-icon {
font-size: 12px;
color: #9ca3af;
}
.org-children {
margin-left: 24px;
}
/* 筛选区域样式 */
.filter-section {
margin-bottom: 24px;
}
.section-title {
font-size: 18px;
font-weight: 500;
}
.filter-actions {
display: flex;
align-items: center;
gap: 16px;
}
.year-selector {
display: flex;
align-items: center;
span {
font-size: 14px;
color: #6b7280;
margin-right: 8px;
}
}
/* 主要内容区样式 */
.main-content {
border-radius: 6px;
}
/* 组织架构图样式 */
.org-chart-container {
display: flex;
flex-direction: column;
align-items: center;
}
.org-chart-node {
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
.company-node {
background: #2D5CF6;
color: #fff;
width: 192px;
margin-bottom: 16px;
:global(.ant-card-body) {
padding: 12px;
}
.node-title {
font-weight: 500;
font-size: 16px;
}
.node-count {
font-size: 12px;
opacity: 0.8;
}
}
.center-row {
width: 100%;
height: 100vh;
border: none;
display: block;
margin: 0;
padding: 0;
}
.center-column {
display: flex;
flex-direction: column;
align-items: center;
}
.center-node {
background: #dbeafe;
width: 160px;
margin-bottom: 16px;
:global(.ant-card-body) {
padding: 12px;
}
.node-title {
font-weight: 500;
}
.node-count {
font-size: 12px;
color: #6b7280;
}
}
.department-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.department-node {
background: #eff6ff;
width: 128px;
:global(.ant-card-body) {
padding: 8px;
}
.node-title {
font-size: 14px;
}
.node-count {
font-size: 12px;
color: #6b7280;
}
}
/* 统计卡片样式 */
.statistics-row {
margin-top: 32px;
}
.stat-card {
background: #F5F6FA;
border-radius: 6px;
}
.stat-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.stat-title {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}
.stat-icon {
.anticon {
font-size: 20px;
color: #2d5cf6;
}
}
.stat-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
}
.stat-desc {
font-size: 12px;
color: #6b7280;
}
/* 图表区域样式 */
.chart-section {
margin-top: 32px;
}
.chart-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 16px;
}
.chart-container {
background: #F5F6FA;
border-radius: 6px;
}
/* 图表区域样式 */
.charts-row {
margin-top: 16px;
}
.chart-section {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
:global(.ant-card-head-title) {
font-size: 16px;
font-weight: 500;
}
:global(.ant-card-body) {
padding: 20px;
}
}
/* 统计描述样式 */
.stat-desc {
margin-top: 8px;
font-size: 12px;
color: #52c41a;
}
/* 响应式样式 */
@media (max-width: 768px) {
.organ-chart-page {
padding: 8px;
}
.announcement-badge {
display: none;
}
.announcement-content {
overflow: hidden;
}
.filter-actions {
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.center-row {
flex-direction: column;
align-items: center;
gap: 24px;
}
.statistics-row {
:global(.ant-col) {
margin-bottom: 16px;
}
}
.charts-row {
:global(.ant-col) {
margin-bottom: 16px;
}
}
/* 移动端下的滚动优化 */
.organ-chart-page {
padding: 8px;
}
.org-sidebar {
margin-bottom: 16px;
}
}
/* 移动端触摸滚动优化 */
@media screen and (max-width: 768px) {
.organ-chart-page {
-webkit-overflow-scrolling: touch;
div[style*="overflowY: auto"] {
-webkit-overflow-scrolling: touch;
}
}
/* 移动端隐藏滚动条但保留滚动功能 */
.org-sidebar .ant-tree {
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
}
Write Preview
Loading…
Cancel
Save