|
|
import React, { 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 { Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag, Row, Col, 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 BasicInfoCreateForm from '../form/BasicInfoCreateForm'; //新增表单
|
|
|
import BasicInfoUpdateForm from '../form/BasicInfoUpdateForm'; //修改表单
|
|
|
import BasicInfoViewForm from '../form/BasicInfoViewForm'; //查看表单
|
|
|
import BasicInfoImportForm from '../form/BasicInfoImportForm'; //修改表单
|
|
|
import styles from '../BasicInformation.less';
|
|
|
import datadictionary from "@/utils/dataDictionary";
|
|
|
import { formatDate } from "@/utils/formatUtils";
|
|
|
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
|
|
import riskShieldImg from '@/assets/basic_information/risk-shield.png'; // 新增：引入盾牌图片
|
|
|
import riskTip from '@/assets/basic_information/risk-tip.png';
|
|
|
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,
|
|
|
},
|
|
|
}
|
|
|
|
|
|
class BasicInfoManagement extends PureComponent {
|
|
|
state = {
|
|
|
modalVisible: false,
|
|
|
updateModalVisible: false,
|
|
|
viewModalVisible: false,
|
|
|
importModalVisible: false, // 新增导入弹窗状态
|
|
|
expandForm: false,
|
|
|
selectedRows: [],
|
|
|
formValues: {},
|
|
|
updateFormValues: {},
|
|
|
viewFormValues: {},
|
|
|
toggleExpand: false,
|
|
|
}
|
|
|
|
|
|
columns = [
|
|
|
{
|
|
|
title: '编号',
|
|
|
dataIndex: 'id',
|
|
|
key: 'id',
|
|
|
width: 80,
|
|
|
fixed: 'left',
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text}</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '项目名称',
|
|
|
dataIndex: 'projectName',
|
|
|
key: 'projectName',
|
|
|
width: 150,
|
|
|
fixed: 'left',
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text}</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '地理信息',
|
|
|
dataIndex: 'location',
|
|
|
key: 'location',
|
|
|
width: 120,
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text}</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '占地面积',
|
|
|
dataIndex: 'area',
|
|
|
key: 'area',
|
|
|
width: 100,
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text}</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '组织机构',
|
|
|
dataIndex: 'organization',
|
|
|
key: 'organization',
|
|
|
width: 120,
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text}</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '职业人数',
|
|
|
dataIndex: 'staffCount',
|
|
|
key: 'staffCount',
|
|
|
width: 100,
|
|
|
render: (text) => (
|
|
|
<span style={{ fontSize: '12px' }}>{text} 人</span>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: '安全等级',
|
|
|
dataIndex: 'safetyLevel',
|
|
|
key: 'safetyLevel',
|
|
|
width: 100,
|
|
|
render: (text) => {
|
|
|
let color = '#FF2526';
|
|
|
let bgColor = '#FFE0E2';
|
|
|
if (text === '中') {
|
|
|
color = '#FF8800';
|
|
|
bgColor = '#FFF3E9';
|
|
|
} else if (text === '低') {
|
|
|
color = '#00AAFA';
|
|
|
bgColor = '#DAF3FF';
|
|
|
}
|
|
|
return (
|
|
|
<Tag
|
|
|
style={{
|
|
|
color: color,
|
|
|
backgroundColor: bgColor,
|
|
|
border: 'none',
|
|
|
borderRadius: 14,
|
|
|
padding: '4px 8px',
|
|
|
fontSize: '12px'
|
|
|
}}
|
|
|
>
|
|
|
{text}
|
|
|
</Tag>
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
fixed: 'right',
|
|
|
align: 'center',
|
|
|
width: 200,
|
|
|
render: (text, record) => {
|
|
|
return (
|
|
|
<div>
|
|
|
<a className={styles.operateStyle} style={{ marginRight: 15, fontSize: '12px' }} onClick={() => this.handleViewModalVisible(true, record)}> 详情 </a>
|
|
|
<a className={styles.operateStyle} style={{ marginRight: 15, fontSize: '12px' }} onClick={() => this.handleUpdateModalVisible(true, record)}> 修改 </a>
|
|
|
<a className={styles.operateStyle} style={{ color: '#FF2626', fontSize: '12px' }}> 删除 </a>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
]
|
|
|
|
|
|
getPieChartOption = () => {
|
|
|
return {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c}% ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
right: '20%',
|
|
|
top: '27%',
|
|
|
itemWidth: 16,
|
|
|
itemHeight: 4,
|
|
|
itemGap: 16,
|
|
|
textStyle: {
|
|
|
fontSize: 12,
|
|
|
color: '#666',
|
|
|
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: '#4B69F1'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: '仓储区',
|
|
|
itemStyle: {
|
|
|
color: '#44BB5F'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: '办公区',
|
|
|
itemStyle: {
|
|
|
color: '#A493FB'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: 15,
|
|
|
name: '辅助区',
|
|
|
itemStyle: {
|
|
|
color: '#FFD85A'
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
}
|
|
|
|
|
|
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}`)
|
|
|
|
|
|
// 这里应该调用实际的数据获取方法
|
|
|
// 由于当前使用的是mockData，我们可以在这里添加日志或者调用相应的action
|
|
|
console.log('分页参数:', params);
|
|
|
|
|
|
// 如果有实际的数据获取action，应该这样调用：
|
|
|
// dispatch({
|
|
|
// type: 'namespace/fetch',
|
|
|
// payload: params,
|
|
|
// });
|
|
|
}
|
|
|
|
|
|
handleFormReset = () => {
|
|
|
const { dispatch } = this.props
|
|
|
this.setState({
|
|
|
formValues: {}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
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
|
|
|
})
|
|
|
}
|
|
|
|
|
|
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
|
|
|
// 添加逻辑
|
|
|
}
|
|
|
|
|
|
handleDeleteRecord = record => {
|
|
|
const { dispatch } = this.props
|
|
|
// 删除逻辑
|
|
|
}
|
|
|
|
|
|
handleUpdate = fields => {
|
|
|
const { dispatch } = this.props
|
|
|
// 更新逻辑
|
|
|
}
|
|
|
|
|
|
handleCollapse = () => {
|
|
|
const { toggleExpand } = this.state
|
|
|
this.setState({
|
|
|
toggleExpand: !toggleExpand
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleImportModalVisible = (flag) => {
|
|
|
this.setState({
|
|
|
importModalVisible: !!flag
|
|
|
});
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const {
|
|
|
loading,
|
|
|
dispatch
|
|
|
} = this.props
|
|
|
const {
|
|
|
selectedRows,
|
|
|
modalVisible,
|
|
|
updateModalVisible,
|
|
|
viewModalVisible,
|
|
|
updateFormValues,
|
|
|
viewFormValues,
|
|
|
toggleExpand,
|
|
|
importModalVisible,
|
|
|
} = this.state
|
|
|
|
|
|
const parentMethods = {
|
|
|
handleAdd: this.handleAdd,
|
|
|
handleModalVisible: this.handleModalVisible,
|
|
|
dispatch: dispatch,
|
|
|
loading,
|
|
|
}
|
|
|
|
|
|
const updateMethods = {
|
|
|
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
|
|
handleUpdate: this.handleUpdate,
|
|
|
dispatch: dispatch,
|
|
|
loading,
|
|
|
}
|
|
|
|
|
|
const viewMethods = {
|
|
|
handleViewModalVisible: this.handleViewModalVisible
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<Card bordered={false} className={styles['card-container']}>
|
|
|
{/* 主要内容区域 */}
|
|
|
<Row gutter={16} style={{ marginBottom: 15 }}>
|
|
|
{/* 左侧：组织机构人员管理 */}
|
|
|
<Col span={9}>
|
|
|
<div
|
|
|
className={styles['organ-area-bg']}
|
|
|
style={{
|
|
|
border: '1px solid #e9ecef',
|
|
|
borderRadius: 4,
|
|
|
padding: 20,
|
|
|
height: 300
|
|
|
}}
|
|
|
>
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: 20,
|
|
|
color: '#333',
|
|
|
fontSize: 14,
|
|
|
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 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-safety']}`}>
|
|
|
<SafetyOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']} style={{ color: '#3CC82D' }}>安监部</div>
|
|
|
</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 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-production']}`}>
|
|
|
<ProjectOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']} style={{ color: '#3F78FA' }}>生产部</div>
|
|
|
</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 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
|
<div className={`${styles['org-department-icon']} ${styles['org-department-icon-equipment']}`}>
|
|
|
<SettingOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-department-label']} style={{ color: '#20C3FE' }}>设备部</div>
|
|
|
</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 className={styles['org-sub-row-group']}>
|
|
|
{/* 安监部子部门 */}
|
|
|
<div className={styles['org-sub-group']}>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-green']}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-green']}>安全监督岗</div>
|
|
|
</div>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-green']}>
|
|
|
<TeamOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-green']}>风险评估岗</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 生产部子部门 */}
|
|
|
<div className={styles['org-sub-group']}>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-blue']}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-blue']}>生产调度岗</div>
|
|
|
</div>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-blue']}>
|
|
|
<TeamOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-blue']}>现场管理岗</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 设备部子部门 */}
|
|
|
<div className={styles['org-sub-group']}>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-cyan']}>
|
|
|
<UserOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-cyan']}>设备维护岗</div>
|
|
|
</div>
|
|
|
<div className={styles['org-sub-item']}>
|
|
|
<div className={styles['org-sub-icon-cyan']}>
|
|
|
<SettingOutlined style={{ color: 'white', fontSize: 16 }} />
|
|
|
</div>
|
|
|
<div className={styles['org-sub-label-cyan']}>备件管理岗</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
|
|
|
{/* 中间：功能区域占比 */}
|
|
|
<Col span={8}>
|
|
|
<div
|
|
|
className={styles['func-area-bg']}
|
|
|
style={{
|
|
|
border: '1px solid #E3E7FB',
|
|
|
borderRadius: 4,
|
|
|
padding: 20,
|
|
|
height: 300
|
|
|
}}
|
|
|
>
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: 20,
|
|
|
color: '#333',
|
|
|
fontSize: 14,
|
|
|
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']}>
|
|
|
<img
|
|
|
src={riskShieldImg}
|
|
|
alt="风险盾牌"
|
|
|
style={{ width: 130, height: 130, marginLeft: '-20px', objectFit: 'contain' }}
|
|
|
/>
|
|
|
</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']}>
|
|
|
<img
|
|
|
src={riskTip}
|
|
|
alt="提示"
|
|
|
style={{ width: 20, height: 20, display: 'block' }}
|
|
|
/>
|
|
|
</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}
|
|
|
/>
|
|
|
<span style={{ marginLeft: 20 }}>筛选条件</span>
|
|
|
<Select
|
|
|
placeholder="请选择"
|
|
|
className={styles['filter-select']}
|
|
|
options={[
|
|
|
{ value: 'all', label: '全部' },
|
|
|
{ value: 'high', label: '高风险' },
|
|
|
{ value: 'medium', label: '中风险' },
|
|
|
{ value: 'low', label: '低风险' },
|
|
|
]}
|
|
|
/>
|
|
|
</Space>
|
|
|
</Col>
|
|
|
<Col>
|
|
|
<Space>
|
|
|
<Button
|
|
|
icon={<PlusOutlined />}
|
|
|
className={styles['button-style']}
|
|
|
onClick={() => this.handleModalVisible(true)}
|
|
|
>
|
|
|
新建项目
|
|
|
</Button>
|
|
|
<Button
|
|
|
icon={<ImportOutlined />}
|
|
|
className={styles['button-style']}
|
|
|
onClick={() => this.handleImportModalVisible(true)} // 新增点击事件
|
|
|
>
|
|
|
导入数据
|
|
|
</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 && <BasicInfoCreateForm {...parentMethods} modalVisible={modalVisible} />}
|
|
|
|
|
|
{updateFormValues && Object.keys(updateFormValues).length ? (
|
|
|
<BasicInfoUpdateForm
|
|
|
{...updateMethods}
|
|
|
updateModalVisible={updateModalVisible}
|
|
|
values={updateFormValues}
|
|
|
/>
|
|
|
) : null}
|
|
|
|
|
|
{viewFormValues && Object.keys(viewFormValues).length ? (
|
|
|
<BasicInfoViewForm
|
|
|
{...viewMethods}
|
|
|
viewModalVisible={viewModalVisible}
|
|
|
values={viewFormValues}
|
|
|
/>
|
|
|
) : null}
|
|
|
{importModalVisible && (
|
|
|
<BasicInfoImportForm
|
|
|
modalVisible={importModalVisible}
|
|
|
handleModalVisible={this.handleImportModalVisible}
|
|
|
/>
|
|
|
)}
|
|
|
</Card>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default BasicInfoManagement;
|
