|
|
import React, { Fragment, PureComponent } from 'react';
|
|
|
import {
|
|
|
DeleteOutlined,
|
|
|
EditOutlined,
|
|
|
PlusOutlined,
|
|
|
SearchOutlined,
|
|
|
RedoOutlined,
|
|
|
DownOutlined,
|
|
|
ExclamationCircleFilled,
|
|
|
UpOutlined,
|
|
|
SafetyOutlined,
|
|
|
ImportOutlined,
|
|
|
ExportOutlined,
|
|
|
UserOutlined,
|
|
|
TeamOutlined,
|
|
|
SettingOutlined,
|
|
|
FileTextOutlined,
|
|
|
ProjectOutlined,
|
|
|
WarningOutlined,
|
|
|
AlertOutlined,
|
|
|
} from '@ant-design/icons';
|
|
|
import { connect, history } from '@umijs/max';
|
|
|
import { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, Tabs, Tree, Progress, Input, Select } from 'antd';
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
import ReactECharts from 'echarts-for-react';
|
|
|
|
|
|
import { MyIcon } from "@/components/Icon"
|
|
|
import style from "@/global.less";
|
|
|
import StaffSheetCreateForm from './form/BasicInfoCreateForm'; //新增表单
|
|
|
import StaffSheetUpdateForm from './form/BasicInfoUpdateForm'; //修改表单
|
|
|
import StaffSheetViewForm from './form/BasicInfoViewForm'; //查看表单
|
|
|
import styles from './BasicInformation.less';
|
|
|
import datadictionary from "@/utils/dataDictionary";
|
|
|
import { formatDate } from "@/utils/formatUtils";
|
|
|
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
|
|
|
|
const { confirm } = Modal;
|
|
|
|
|
|
//预约类型
|
|
|
const sex_type = datadictionary.sex
|
|
|
const user_status = datadictionary.user_status
|
|
|
const sys_user_post = datadictionary.sys_user_post
|
|
|
|
|
|
const mockData = {
|
|
|
list: [
|
|
|
{
|
|
|
id: '01',
|
|
|
projectName: '安全项目一',
|
|
|
location: '北京朝阳区',
|
|
|
area: '15,000m²',
|
|
|
organization: '安全生产部',
|
|
|
staffCount: 168,
|
|
|
safetyLevel: '高',
|
|
|
},
|
|
|
{
|
|
|
id: '02',
|
|
|
projectName: '安全项目二',
|
|
|
location: '北京朝阳区',
|
|
|
area: '15,000m²',
|
|
|
organization: '安全生产部',
|
|
|
staffCount: 168,
|
|
|
safetyLevel: '中',
|
|
|
},
|
|
|
{
|
|
|
id: '03',
|
|
|
projectName: '安全项目三',
|
|
|
location: '北京朝阳区',
|
|
|
area: '15,000m²',
|
|
|
organization: '安全生产部',
|
|
|
staffCount: 168,
|
|
|
safetyLevel: '低',
|
|
|
},
|
|
|
{
|
|
|
id: '04',
|
|
|
projectName: '安全项目四',
|
|
|
location: '北京朝阳区',
|
|
|
area: '15,000m²',
|
|
|
organization: '安全生产部',
|
|
|
staffCount: 168,
|
|
|
safetyLevel: '低',
|
|
|
},
|
|
|
{
|
|
|
id: '05',
|
|
|
projectName: '安全项目五',
|
|
|
location: '北京朝阳区',
|
|
|
area: '15,000m²',
|
|
|
organization: '安全生产部',
|
|
|
staffCount: 168,
|
|
|
safetyLevel: '中',
|
|
|
},
|
|
|
],
|
|
|
pagination: {
|
|
|
total: 48,
|
|
|
current: 1,
|
|
|
pageSize: 5,
|
|
|
},
|
|
|
}
|
|
|
|
|
|
// 组织架构树形数据
|
|
|
const treeData = [
|
|
|
{
|
|
|
title: '安全部',
|
|
|
key: '0-0',
|
|
|
icon: <TeamOutlined />,
|
|
|
children: [
|
|
|
{
|
|
|
title: '安全管理科',
|
|
|
key: '0-0-0',
|
|
|
icon: <SafetyOutlined />,
|
|
|
},
|
|
|
{
|
|
|
title: '生产科',
|
|
|
key: '0-0-1',
|
|
|
icon: <ProjectOutlined />,
|
|
|
},
|
|
|
{
|
|
|
title: '设备科',
|
|
|
key: '0-0-2',
|
|
|
icon: <SettingOutlined />,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
];
|
|
|
@connect(({ staffsheet, loading }) => ({
|
|
|
staffsheet,
|
|
|
loading: loading.models.staffsheet,
|
|
|
}))
|
|
|
|
|
|
class BasicInformation extends PureComponent {
|
|
|
state = {
|
|
|
modalVisible: false,
|
|
|
updateModalVisible: false,
|
|
|
viewModalVisible: false,
|
|
|
expandForm: false,
|
|
|
selectedRows: [],
|
|
|
formValues: {},
|
|
|
updateFormValues: {},
|
|
|
viewFormValues: {},
|
|
|
toggleExpand: false,
|
|
|
activeTab: '1',
|
|
|
}
|
|
|
|
|
|
columns = [
|
|
|
{
|
|
|
title: '编号',
|
|
|
dataIndex: 'id',
|
|
|
key: 'id',
|
|
|
width: 80,
|
|
|
fixed: 'left',
|
|
|
},
|
|
|
{
|
|
|
title: '项目名称',
|
|
|
dataIndex: 'projectName',
|
|
|
key: 'projectName',
|
|
|
width: 150,
|
|
|
fixed: 'left',
|
|
|
},
|
|
|
{
|
|
|
title: '地理信息',
|
|
|
dataIndex: 'location',
|
|
|
key: 'location',
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '占地面积',
|
|
|
dataIndex: 'area',
|
|
|
key: 'area',
|
|
|
width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '组织机构',
|
|
|
dataIndex: 'organization',
|
|
|
key: 'organization',
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '职业人数',
|
|
|
dataIndex: 'staffCount',
|
|
|
key: 'staffCount',
|
|
|
width: 100,
|
|
|
render: (text) => `${text} 人`,
|
|
|
},
|
|
|
{
|
|
|
title: '安全等级',
|
|
|
dataIndex: 'safetyLevel',
|
|
|
key: 'safetyLevel',
|
|
|
width: 100,
|
|
|
render: (text) => {
|
|
|
let color = 'green';
|
|
|
if (text === '高') color = 'red';
|
|
|
else if (text === '中') color = 'orange';
|
|
|
return <Tag color={color}>{text}</Tag>;
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
fixed: 'right',
|
|
|
align: 'center',
|
|
|
width: 200,
|
|
|
render: (text, record) => {
|
|
|
return (
|
|
|
<Fragment>
|
|
|
<a className={styles.operateStyle} style={{ marginRight: 15 }}> 详情 </a>
|
|
|
<a className={styles.operateStyle} style={{ marginRight: 15 }}> 修改 </a>
|
|
|
<a className={styles.operateStyle} style={{ color: '#FF2626' }}> 删除 </a>
|
|
|
</Fragment>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
]
|
|
|
|
|
|
componentDidMount() {
|
|
|
// 初始化页面数据
|
|
|
}
|
|
|
|
|
|
getPieChartOption = () => {
|
|
|
return {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c}% ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
right: '25%',
|
|
|
top: '25%',
|
|
|
itemWidth: 14,
|
|
|
itemHeight: 14,
|
|
|
itemGap: 20,
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
color: '#333',
|
|
|
fontWeight: 'normal'
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '功能区域占比',
|
|
|
type: 'pie',
|
|
|
radius: ['30%', '45%'],
|
|
|
center: ['30%', '45%'],
|
|
|
avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
emphasis: {
|
|
|
scale: true,
|
|
|
scaleSize: 5
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
value: 45,
|
|
|
name: '生产区',
|
|
|
itemStyle: {
|
|
|
color: '#4A90E2'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: '仓储区',
|
|
|
itemStyle: {
|
|
|
color: '#7ED321'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: '办公区',
|
|
|
itemStyle: {
|
|
|
color: '#9B59B6'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 15,
|
|
|
name: '辅助区',
|
|
|
itemStyle: {
|
|
|
color: '#F5A623'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
}
|
|
|
|
|
|
handleStandardTableChange = (pagination, sorter) => {
|
|
|
const { dispatch } = this.props
|
|
|
const { formValues } = this.state
|
|
|
|
|
|
const params = {
|
|
|
currentPage: pagination.current,
|
|
|
pageSize: pagination.pageSize,
|
|
|
...formValues
|
|
|
}
|
|
|
|
|
|
sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
|
|
|
|
|
|
// dispatch({
|
|
|
// type: 'prouser/query_page_for_prouser',
|
|
|
// payload: params
|
|
|
// })
|
|
|
}
|
|
|
|
|
|
handleFormReset = () => {
|
|
|
const { dispatch } = this.props
|
|
|
this.setState({
|
|
|
formValues: {}
|
|
|
})
|
|
|
|
|
|
// dispatch({
|
|
|
// type: 'prouser/query_page_for_prouser',
|
|
|
// payload: {
|
|
|
// resetFlag: true
|
|
|
// }
|
|
|
// })
|
|
|
}
|
|
|
|
|
|
toggleForm = () => {
|
|
|
const { expandForm } = this.state
|
|
|
this.setState({
|
|
|
expandForm: !expandForm
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleSelectRows = rows => {
|
|
|
this.setState({
|
|
|
selectedRows: rows
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleSearch = values => {
|
|
|
const { dispatch } = this.props
|
|
|
const { expandForm } = this.state
|
|
|
|
|
|
this.setState({
|
|
|
formValues: values
|
|
|
})
|
|
|
|
|
|
// dispatch({
|
|
|
// type: 'prouser/query_page_for_prouser',
|
|
|
// payload: {
|
|
|
// ...values,
|
|
|
// resetFlag: true,
|
|
|
// expandForm
|
|
|
// }
|
|
|
// })
|
|
|
}
|
|
|
|
|
|
handleModalVisible = flag => {
|
|
|
this.setState({
|
|
|
modalVisible: !!flag
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleUpdateModalVisible = (flag, record) => {
|
|
|
this.setState({
|
|
|
updateModalVisible: !!flag,
|
|
|
updateFormValues: record || {}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleViewModalVisible = (flag, record) => {
|
|
|
this.setState({
|
|
|
viewModalVisible: !!flag,
|
|
|
viewFormValues: record || {}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleAdd = fields => {
|
|
|
const { dispatch } = this.props
|
|
|
|
|
|
dispatch({
|
|
|
type: 'prouser/insert_for_prouser',
|
|
|
payload: {
|
|
|
user_id: fields.user_id,
|
|
|
user_name: fields.user_name,
|
|
|
user_name_cn: fields.user_name_cn,
|
|
|
user_name_en: fields.user_name_en,
|
|
|
password: fields.password,
|
|
|
email: fields.email,
|
|
|
phone: fields.phone,
|
|
|
landline: fields.landline,
|
|
|
sex: fields.sex,
|
|
|
avatar: fields.avatar,
|
|
|
sign: fields.sign,
|
|
|
tags: fields.tags,
|
|
|
id_card: fields.id_card,
|
|
|
birthday: fields.birthday,
|
|
|
job_status: fields.job_status,
|
|
|
hiredate: fields.hiredate,
|
|
|
departure_time: fields.departure_time,
|
|
|
user_type: fields.user_type,
|
|
|
emp_no: fields.emp_no,
|
|
|
access_card_no: fields.access_card_no,
|
|
|
country: fields.country,
|
|
|
province: fields.province,
|
|
|
city: fields.city,
|
|
|
address: fields.address,
|
|
|
work_addr: fields.work_addr,
|
|
|
floor: fields.floor,
|
|
|
inprovince: fields.inprovince,
|
|
|
// dept_code: fields.dept_code,
|
|
|
// dept_name: fields.dept_name,
|
|
|
inner_dept_code: fields.inner_dept_code,
|
|
|
org_code: fields.org_code,
|
|
|
org_name: fields.org_name,
|
|
|
inner_org_code: fields.inner_org_code,
|
|
|
posts: fields.posts,
|
|
|
wx_openid: fields.wx_openid,
|
|
|
wx_mpopenid: fields.wx_mpopenid,
|
|
|
wx_miniopenid: fields.wx_miniopenid,
|
|
|
wx_unionid: fields.wx_unionid,
|
|
|
mobile_imei: fields.mobile_imei,
|
|
|
device_num: fields.device_num,
|
|
|
al_taobao: fields.al_taobao,
|
|
|
al_alipay: fields.al_alipay,
|
|
|
al_dingding: fields.al_dingding,
|
|
|
is_system_user: fields.is_system_user,
|
|
|
mgr_type: fields.mgr_type,
|
|
|
pwd_security_level: fields.pwd_security_level,
|
|
|
pwd_update_date: fields.pwd_update_date,
|
|
|
last_login_ip: fields.last_login_ip,
|
|
|
last_login_date: fields.last_login_date,
|
|
|
freeze_date: fields.freeze_date,
|
|
|
freeze_cause: fields.freeze_cause,
|
|
|
zindex: fields.zindex,
|
|
|
wx_msg: fields.wx_msg,
|
|
|
email_msg: fields.email_msg,
|
|
|
system_msg: fields.system_msg,
|
|
|
remarks: fields.remarks,
|
|
|
status: fields.status,
|
|
|
creator: fields.creator,
|
|
|
create_date: fields.create_date,
|
|
|
updater: fields.updater,
|
|
|
update_date: fields.update_date
|
|
|
},
|
|
|
callback: (res) => {
|
|
|
if (res.success == true) {
|
|
|
message.success('添加成功')
|
|
|
this.handleModalVisible()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleDeleteRecord = record => {
|
|
|
const { dispatch } = this.props
|
|
|
|
|
|
dispatch({
|
|
|
type: 'prouser/delete_by_primarykey_for_prouser',
|
|
|
payload: {
|
|
|
recordid: record.user_id
|
|
|
},
|
|
|
callback: res => {
|
|
|
if (res.success) {
|
|
|
message.success('删除成功')
|
|
|
|
|
|
this.setState({
|
|
|
selectedRows: []
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleUpdate = fields => {
|
|
|
const { dispatch } = this.props
|
|
|
|
|
|
dispatch({
|
|
|
type: 'prouser/update_for_prouser',
|
|
|
payload: {
|
|
|
user_id: fields.user_id,
|
|
|
user_name: fields.user_name,
|
|
|
user_name_cn: fields.user_name_cn,
|
|
|
user_name_en: fields.user_name_en,
|
|
|
password: fields.password,
|
|
|
email: fields.email,
|
|
|
phone: fields.phone,
|
|
|
landline: fields.landline,
|
|
|
sex: fields.sex,
|
|
|
avatar: fields.avatar,
|
|
|
sign: fields.sign,
|
|
|
tags: fields.tags,
|
|
|
id_card: fields.id_card,
|
|
|
birthday: fields.birthday,
|
|
|
job_status: fields.job_status,
|
|
|
hiredate: fields.hiredate,
|
|
|
departure_time: fields.departure_time,
|
|
|
user_type: fields.user_type,
|
|
|
emp_no: fields.emp_no,
|
|
|
access_card_no: fields.access_card_no,
|
|
|
country: fields.country,
|
|
|
province: fields.province,
|
|
|
city: fields.city,
|
|
|
address: fields.address,
|
|
|
work_addr: fields.work_addr,
|
|
|
floor: fields.floor,
|
|
|
inprovince: fields.inprovince,
|
|
|
// dept_code: fields.dept_code,
|
|
|
// dept_name: fields.dept_name,
|
|
|
inner_dept_code: fields.inner_dept_code,
|
|
|
org_code: fields.org_code,
|
|
|
org_name: fields.org_name,
|
|
|
inner_org_code: fields.inner_org_code,
|
|
|
posts: fields.posts,
|
|
|
wx_openid: fields.wx_openid,
|
|
|
wx_mpopenid: fields.wx_mpopenid,
|
|
|
wx_miniopenid: fields.wx_miniopenid,
|
|
|
wx_unionid: fields.wx_unionid,
|
|
|
mobile_imei: fields.mobile_imei,
|
|
|
device_num: fields.device_num,
|
|
|
al_taobao: fields.al_taobao,
|
|
|
al_alipay: fields.al_alipay,
|
|
|
al_dingding: fields.al_dingding,
|
|
|
is_system_user: fields.is_system_user,
|
|
|
mgr_type: fields.mgr_type,
|
|
|
pwd_security_level: fields.pwd_security_level,
|
|
|
pwd_update_date: fields.pwd_update_date,
|
|
|
last_login_ip: fields.last_login_ip,
|
|
|
last_login_date: fields.last_login_date,
|
|
|
freeze_date: fields.freeze_date,
|
|
|
freeze_cause: fields.freeze_cause,
|
|
|
zindex: fields.zindex,
|
|
|
wx_msg: fields.wx_msg,
|
|
|
email_msg: fields.email_msg,
|
|
|
system_msg: fields.system_msg,
|
|
|
remarks: fields.remarks,
|
|
|
status: fields.status,
|
|
|
creator: fields.creator,
|
|
|
create_date: fields.create_date,
|
|
|
updater: fields.updater,
|
|
|
update_date: fields.update_date
|
|
|
},
|
|
|
callback: (res) => {
|
|
|
if (res.success === true) {
|
|
|
message.success('修改成功')
|
|
|
this.handleUpdateModalVisible()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 修改用户状态
|
|
|
handleUpdateUserStatus = (fields, status, msg) => {
|
|
|
const { dispatch } = this.props
|
|
|
|
|
|
confirm({
|
|
|
title: `确定要 ${msg} 当前用户的吗?`,
|
|
|
icon: <ExclamationCircleFilled />,
|
|
|
onOk() {
|
|
|
dispatch({
|
|
|
type: 'prouser/update_for_prouser',
|
|
|
payload: {
|
|
|
user_id: fields.user_id,
|
|
|
status: status,
|
|
|
},
|
|
|
callback: (res) => {
|
|
|
if (res.success === true) {
|
|
|
message.success('修改成功')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 修改用户密码
|
|
|
handleUpdateUserPassword = fields => {
|
|
|
const { dispatch } = this.props
|
|
|
confirm({
|
|
|
title: '确定要重置当前用户的密码吗?',
|
|
|
icon: <ExclamationCircleFilled />,
|
|
|
onOk() {
|
|
|
dispatch({
|
|
|
type: 'prouser/resetpwd_for_prouser',
|
|
|
payload: {
|
|
|
user_id: fields.user_id
|
|
|
},
|
|
|
callback: (res) => {
|
|
|
if (res.success === true) {
|
|
|
message.success('重置成功')
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleCollapse = () => {
|
|
|
const { toggleExpand } = this.state
|
|
|
this.setState({
|
|
|
toggleExpand: !toggleExpand
|
|
|
})
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const {
|
|
|
staffsheet: {
|
|
|
data,
|
|
|
selectDeptTree,
|
|
|
selectOrganTree
|
|
|
},
|
|
|
loading,
|
|
|
dispatch
|
|
|
} = this.props
|
|
|
const {
|
|
|
selectedRows,
|
|
|
modalVisible,
|
|
|
updateModalVisible,
|
|
|
viewModalVisible,
|
|
|
updateFormValues,
|
|
|
viewFormValues,
|
|
|
toggleExpand,
|
|
|
activeTab
|
|
|
} = this.state
|
|
|
|
|
|
const parentMethods = {
|
|
|
handleAdd: this.handleAdd,
|
|
|
handleModalVisible: this.handleModalVisible,
|
|
|
dispatch: dispatch,
|
|
|
loading,
|
|
|
selectDeptTree: selectDeptTree,
|
|
|
selectOrganTree: selectOrganTree
|
|
|
}
|
|
|
|
|
|
const updateMethods = {
|
|
|
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
|
|
handleUpdate: this.handleUpdate,
|
|
|
dispatch: dispatch,
|
|
|
loading,
|
|
|
selectDeptTree: selectDeptTree,
|
|
|
selectOrganTree: selectOrganTree
|
|
|
}
|
|
|
|
|
|
const viewMethods = {
|
|
|
handleViewModalVisible: this.handleViewModalVisible
|
|
|
}
|
|
|
|
|
|
const tabItems = [
|
|
|
{
|
|
|
key: '1',
|
|
|
label: '基本信息管理',
|
|
|
},
|
|
|
{
|
|
|
key: '2',
|
|
|
label: '资质证照管理',
|
|
|
},
|
|
|
{
|
|
|
key: '3',
|
|
|
label: '人员基础信息',
|
|
|
}
|
|
|
];
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
{/* 顶部标签页 */}
|
|
|
<div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
|
|
|
<Tabs
|
|
|
activeKey={activeTab}
|
|
|
onChange={(key) => this.setState({ activeTab: key })}
|
|
|
items={tabItems}
|
|
|
className="custom-tabs"
|
|
|
style={{ marginBottom: 0 }}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<Card bordered={false} style={{ margin: 0, background: '#fff', borderRadius: 0 }}>
|
|
|
{/* 主要内容区域 */}
|
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
|
|
{/* 左侧：组织机构人员管理 */}
|
|
|
<Col span={9}>
|
|
|
<div
|
|
|
style={{
|
|
|
background: '#f8f9fa',
|
|
|
border: '1px solid #e9ecef',
|
|
|
borderRadius: 8,
|
|
|
padding: 20,
|
|
|
height: 300
|
|
|
}}
|
|
|
>
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: 20,
|
|
|
color: '#333',
|
|
|
fontSize: 16,
|
|
|
fontWeight: 500
|
|
|
}}>
|
|
|
<span style={{
|
|
|
display: 'inline-block',
|
|
|
width: 2,
|
|
|
height: 16,
|
|
|
background: '#2E4CD4',
|
|
|
marginRight: 8
|
|
|
}}></span>
|
|
|
组织机构与人员管理
|
|
|
</div>
|
|
|
|
|
|
{/* 组织架构图 */}
|
|
|
<div className={styles['org-chart-container']}>
|
|
|
{/* 顶部按钮 */}
|
|
|
<div className={styles['org-top-button-container']}>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
className={styles['org-top-button']}
|
|
|
>
|
|
|
项目安全管组织架构
|
|
|
</Button>
|
|
|
</div>
|
|
|
|
|
|
{/* 连接线 - 顶部到第一层 */}
|
|
|
<div className={styles['org-connect-line-vertical']}></div>
|
|
|
|
|
|
{/* 第一层水平连接线 */}
|
|
|
<div className={styles['org-connect-line-horizontal']}></div>
|
|
|
|
|
|
{/* 第一层垂直连接线 */}
|
|
|
<div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-left']}`}></div>
|
|
|
<div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-center']}`}></div>
|
|
|
<div className={`${styles['org-connect-line-branch']} ${styles['org-connect-line-branch-right']}`}></div>
|
|
|
|
|
|
{/* 第一层部门 */}
|
|
|
<div className={styles['org-departments-container']}>
|
|
|
<div className={styles['org-department']}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-safety']}`}>
|
|
|
<SafetyOutlined style={{ color: 'white', fontSize: 20 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']}>安监部</div>
|
|
|
|
|
|
{/* 安监部连接线 */}
|
|
|
<div className={styles['org-department-connect-v']}></div>
|
|
|
<div className={styles['org-department-connect-h']}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles['org-department']}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-production']}`}>
|
|
|
<ProjectOutlined style={{ color: 'white', fontSize: 20 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']}>生产部</div>
|
|
|
|
|
|
{/* 生产部连接线 */}
|
|
|
<div className={styles['org-department-connect-v']}></div>
|
|
|
<div className={styles['org-department-connect-h']}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles['org-department']}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-equipment']}`}>
|
|
|
<SettingOutlined style={{ color: 'white', fontSize: 20 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']}>设备部</div>
|
|
|
|
|
|
{/* 设备部连接线 */}
|
|
|
<div className={styles['org-department-connect-v']}></div>
|
|
|
<div className={styles['org-department-connect-h']}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-left']}`}></div>
|
|
|
<div className={`${styles['org-department-connect-sub']} ${styles['org-department-connect-sub-right']}`}></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 第二层子部门 */}
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
justifyContent: 'space-between',
|
|
|
paddingLeft: '4%',
|
|
|
paddingRight: '4%'
|
|
|
}}>
|
|
|
{/* 安监部子部门 */}
|
|
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#52c41a',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>安全监督科</div>
|
|
|
</div>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#52c41a',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<TeamOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>风险评估科</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 生产部子部门 */}
|
|
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#1890ff',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>生产调度科</div>
|
|
|
</div>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#1890ff',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<TeamOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>现场管理科</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 设备部子部门 */}
|
|
|
<div style={{ display: 'flex', gap: 16 }}>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#13c2c2',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>设备维护科</div>
|
|
|
</div>
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<div style={{
|
|
|
width: 36,
|
|
|
height: 36,
|
|
|
borderRadius: '50%',
|
|
|
backgroundColor: '#13c2c2',
|
|
|
margin: '0 auto 6px',
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
}}>
|
|
|
<SettingOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.2 }}>备件管理科</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
|
|
|
{/* 中间：功能区域占比 */}
|
|
|
<Col span={8}>
|
|
|
<div
|
|
|
style={{
|
|
|
background: '#f8f9fa',
|
|
|
border: '1px solid #e9ecef',
|
|
|
borderRadius: 8,
|
|
|
padding: 20,
|
|
|
height: 300
|
|
|
}}
|
|
|
>
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: 20,
|
|
|
color: '#333',
|
|
|
fontSize: 16,
|
|
|
fontWeight: 500
|
|
|
}}>
|
|
|
<span style={{
|
|
|
display: 'inline-block',
|
|
|
width: 2,
|
|
|
height: 16,
|
|
|
background: '#2E4CD4',
|
|
|
marginRight: 8
|
|
|
}}></span>
|
|
|
功能区面积占比
|
|
|
</div>
|
|
|
|
|
|
<div className={styles['chart-container']}>
|
|
|
<ReactECharts
|
|
|
option={this.getPieChartOption()}
|
|
|
className={styles['chart-full-size']}
|
|
|
opts={{ renderer: 'canvas' }}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
|
|
|
{/* 右侧：实时风险评估 */}
|
|
|
<Col span={7}>
|
|
|
<div className={styles['risk-assessment-container']}>
|
|
|
{/* 顶部装饰性背景层 */}
|
|
|
<div className={styles['risk-background-top']}></div>
|
|
|
|
|
|
{/* 底部装饰性背景层 */}
|
|
|
<div className={styles['risk-background-bottom']}></div>
|
|
|
|
|
|
{/* 标题 */}
|
|
|
<div className={styles['risk-title']}>
|
|
|
<span className={styles['risk-title-indicator']}></span>
|
|
|
<span className={styles['risk-title-text']}>实时风险评估</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 主要内容区域 */}
|
|
|
<div className={styles['risk-content-area']}>
|
|
|
{/* 左侧盾牌图标 */}
|
|
|
<div className={styles['risk-shield-container']}>
|
|
|
<div className={styles['risk-shield']}>
|
|
|
<SafetyOutlined className={styles['risk-shield-icon']} />
|
|
|
{/* 3D效果的底座 */}
|
|
|
<div className={styles['risk-shield-shadow']}></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* 右侧内容 */}
|
|
|
<div className={styles['risk-info-container']}>
|
|
|
{/* 风险等级提示框 */}
|
|
|
<div className={styles['risk-level-alert']}>
|
|
|
<span className={styles['risk-level-text']}>
|
|
|
当前风险等级：
|
|
|
<span className={styles['risk-level-danger']}>重大风险</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
{/* 提示信息 */}
|
|
|
<div className={styles['risk-tip-container']}>
|
|
|
<div className={styles['risk-tip-icon']}>
|
|
|
<span className={styles['risk-tip-emoji']}>💡</span>
|
|
|
</div>
|
|
|
<div className={styles['risk-tip-content']}>
|
|
|
<div className={styles['risk-tip-text']}>
|
|
|
提示：安全等级分为 红、橙、黄、蓝四级，当前风险等级为红区，存在重大风险
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
|
|
|
{/* 底部表格区域 */}
|
|
|
<div>
|
|
|
<div className={styles['table-toolbar-container']}>
|
|
|
<Row justify="space-between" align="middle">
|
|
|
<Col>
|
|
|
<Space>
|
|
|
<Input.Search
|
|
|
placeholder="请输入项目名称、地理信息..."
|
|
|
className={styles['search-input']}
|
|
|
onSearch={this.handleSearch}
|
|
|
/>
|
|
|
<Select
|
|
|
placeholder="筛选条件"
|
|
|
className={styles['filter-select']}
|
|
|
defaultValue="all"
|
|
|
options={[
|
|
|
{ value: 'all', label: '全部' },
|
|
|
{ value: 'high', label: '高风险' },
|
|
|
{ value: 'medium', label: '中风险' },
|
|
|
{ value: 'low', label: '低风险' },
|
|
|
]}
|
|
|
/>
|
|
|
</Space>
|
|
|
</Col>
|
|
|
<Col>
|
|
|
<Space>
|
|
|
<Button
|
|
|
icon={<PlusOutlined />}
|
|
|
className={styles['button-style']}
|
|
|
>
|
|
|
新建项目
|
|
|
</Button>
|
|
|
<Button
|
|
|
icon={<ImportOutlined />}
|
|
|
className={styles['button-style']}
|
|
|
>
|
|
|
导入数据
|
|
|
</Button>
|
|
|
<Button
|
|
|
icon={<ExportOutlined />}
|
|
|
className={styles['button-style']}>
|
|
|
导出数据
|
|
|
</Button>
|
|
|
</Space>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</div>
|
|
|
|
|
|
<StandardTable
|
|
|
rowKey={'id'}
|
|
|
selectedRows={selectedRows}
|
|
|
loading={loading}
|
|
|
data={mockData}
|
|
|
columns={this.columns}
|
|
|
onSelectRow={this.handleSelectRows}
|
|
|
onChange={this.handleStandardTableChange}
|
|
|
scroll={{ x: 1200 }}
|
|
|
showTotal={(total, range) => `共 ${total} 条`}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
{modalVisible && <StaffSheetCreateForm {...parentMethods} modalVisible={modalVisible} />}
|
|
|
|
|
|
{updateFormValues && Object.keys(updateFormValues).length ? (
|
|
|
<StaffSheetUpdateForm
|
|
|
{...updateMethods}
|
|
|
updateModalVisible={updateModalVisible}
|
|
|
values={updateFormValues}
|
|
|
/>
|
|
|
) : null}
|
|
|
|
|
|
{viewFormValues && Object.keys(viewFormValues).length ? (
|
|
|
<StaffSheetViewForm
|
|
|
{...viewMethods}
|
|
|
viewModalVisible={viewModalVisible}
|
|
|
values={viewFormValues}
|
|
|
/>
|
|
|
) : null}
|
|
|
</Card>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default BasicInformation
|
