|
|
|
|
|
import { Button, Col, Drawer, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tag, Tree } from "antd";
|
|
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
|
|
import styles from './InspectionTaskPlan.less'
|
|
|
|
|
|
import { Title } from "@/pages/inspectiontasks/InspectionTasks";
|
|
|
|
|
|
import btnImg1 from '@/assets/img/planBtn1.png'
|
|
|
|
|
|
import btnImg2 from '@/assets/img/planBtn2.png'
|
|
|
|
|
|
import btnImg3 from '@/assets/img/planBtn3.png'
|
|
|
|
|
|
import paibanBg from '@/assets/img/paiban.png'
|
|
|
|
|
|
import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
|
|
|
|
|
|
import taskPlanBg from '@/assets/img/image 674 1.svg'
|
|
|
|
|
|
import {
|
|
|
|
|
|
DeleteOutlined,
|
|
|
|
|
|
DownOutlined,
|
|
|
|
|
|
EditOutlined,
|
|
|
|
|
|
ExportOutlined,
|
|
|
|
|
|
EyeOutlined,
|
|
|
|
|
|
PlusOutlined,
|
|
|
|
|
|
RedoOutlined
|
|
|
|
|
|
} from "@ant-design/icons";
|
|
|
|
|
|
const { Search } = Input
|
|
|
|
|
|
export const MenuBg = (props) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div className={styles["parallelogram-container"]}>
|
|
|
|
|
|
<span className={styles["text-content"]}>{props.text}</span>
|
|
|
|
|
|
<span className={styles["text-content"]} style={{ margin: '0' }}>{props.icon}</span>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
//抽屉
|
|
|
|
|
|
const Drawers = (props) => {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Drawer
|
|
|
|
|
|
title='详情'
|
|
|
|
|
|
closable={{ 'aria-label': 'Close Button' }}
|
|
|
|
|
|
onClose={props.onClose}
|
|
|
|
|
|
open={props.open}
|
|
|
|
|
|
width={500}
|
|
|
|
|
|
className={styles['customDrawer']}
|
|
|
|
|
|
>
|
|
|
|
|
|
<div style={{ padding: '20px' }}>
|
|
|
|
|
|
<Title title={'基本信息'} ></Title>
|
|
|
|
|
|
<Row style={{ margin: '20px 0' }}>
|
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
|
<Row style={{ marginBottom: '20px' }}>
|
|
|
|
|
|
<Col span={8} className={styles['font1']}>所属班次</Col>
|
|
|
|
|
|
<Col span={16}>{props.row?.shifts}</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row>
|
|
|
|
|
|
<Col span={8} className={styles['font1']}>路线名称</Col>
|
|
|
|
|
|
<Col span={16}>{props.row?.name}</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
|
<Row style={{ marginBottom: '20px' }}>
|
|
|
|
|
|
<Col span={8} className={styles['font1']}>所属专业</Col>
|
|
|
|
|
|
<Col span={16}>{props.row?.affiliation}</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row>
|
|
|
|
|
|
<Col span={8} className={styles['font1']}>创建时间</Col>
|
|
|
|
|
|
<Col span={16}>{props.row?.time}</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Title title={'巡检设备范围'}></Title>
|
|
|
|
|
|
<div className={styles['box']}>
|
|
|
|
|
|
<Tag className={styles['tag']} color="magenta">发电机</Tag>
|
|
|
|
|
|
<Tag className={styles['tag']} color="red">中水处区</Tag>
|
|
|
|
|
|
<Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
|
|
|
|
|
|
<Tag className={styles['tag']} color="orange">1#炉右上炉膛温度</Tag>
|
|
|
|
|
|
<Tag className={styles['tag']} color="gold">1#冷干机</Tag>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<Title title={'巡视项详情'}></Title>
|
|
|
|
|
|
<Row style={{ margin: '20px 0 10px 0' }}>
|
|
|
|
|
|
<Tag className={styles['tag']} color="magenta">发电机</Tag>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ margin: '0 0 20px 0' }}>
|
|
|
|
|
|
<ul className={styles['ul']}>
|
|
|
|
|
|
<li>外观检查：有无破损、油污 </li>
|
|
|
|
|
|
<li>温度检测：轴承温度≤70℃，定子温度≤105℃</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ margin: '20px 0 10px 0' }}>
|
|
|
|
|
|
<Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ margin: '0 0 20px 0' }}>
|
|
|
|
|
|
<ul className={styles['ul']}>
|
|
|
|
|
|
<li>运行指示灯：是否正常亮起 </li>
|
|
|
|
|
|
<li>散热风扇：是否正常转动</li>
|
|
|
|
|
|
<li>输出电压：380V±5%</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Drawer>
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
// 员工表格组件
|
|
|
|
|
|
const EmployeeTable = () => {
|
|
|
|
|
|
// 状态管理
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]); // 表格数据
|
|
|
|
|
|
const [loading, setLoading] = useState(false); // 加载状态
|
|
|
|
|
|
const [total, setTotal] = useState(0); // 总条数
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); // 当前页码
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10); // 每页条数
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
|
|
|
|
|
|
|
|
|
|
|
|
// 表格列配置
|
|
|
|
|
|
const columns = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '序号',
|
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
|
key: 'index',
|
|
|
|
|
|
width: 100,
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '工号',
|
|
|
|
|
|
dataIndex: 'employeeId',
|
|
|
|
|
|
key: 'employeeId',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '姓名',
|
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
|
key: 'name',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '性别',
|
|
|
|
|
|
dataIndex: 'gender',
|
|
|
|
|
|
key: 'gender',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '所属部门',
|
|
|
|
|
|
dataIndex: 'department',
|
|
|
|
|
|
key: 'department',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '岗位',
|
|
|
|
|
|
dataIndex: 'position',
|
|
|
|
|
|
key: 'position',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '手机号码',
|
|
|
|
|
|
dataIndex: 'phone',
|
|
|
|
|
|
key: 'phone',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '状态',
|
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
|
key: 'status',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (status) => (
|
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '入职时间',
|
|
|
|
|
|
dataIndex: 'hireDate',
|
|
|
|
|
|
key: 'hireDate',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<Space size="small">
|
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 选择框配置
|
|
|
|
|
|
const rowSelection = {
|
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
|
onChange: (newSelectedRowKeys) => {
|
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
|
const fetchTableData = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true);
|
|
|
|
|
|
// 这里是预留的接口调用位置
|
|
|
|
|
|
// 实际项目中替换为真实接口请求
|
|
|
|
|
|
// const response = await api.getEmployeeList({
|
|
|
|
|
|
// page: currentPage,
|
|
|
|
|
|
// pageSize: pageSize
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟数据 - 实际项目中删除
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
employeeId: 'GH001',
|
|
|
|
|
|
name: '钱佳仪',
|
|
|
|
|
|
gender: '女',
|
|
|
|
|
|
department: '运行部',
|
|
|
|
|
|
position: '巡检员',
|
|
|
|
|
|
phone: '189 7731 3118',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
hireDate: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
employeeId: 'GH002',
|
|
|
|
|
|
name: '孙兆洪',
|
|
|
|
|
|
gender: '女',
|
|
|
|
|
|
department: '安保部',
|
|
|
|
|
|
position: '安全员',
|
|
|
|
|
|
phone: '156 9747 2741',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
hireDate: '2025-09-12'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '3',
|
|
|
|
|
|
employeeId: 'GH003',
|
|
|
|
|
|
name: '季丹',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
department: '设备部',
|
|
|
|
|
|
position: '维修工',
|
|
|
|
|
|
phone: '151 4456 8916',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
hireDate: '2025-08-16'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '4',
|
|
|
|
|
|
employeeId: 'GH004',
|
|
|
|
|
|
name: '赵晓辉',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
department: '调度室',
|
|
|
|
|
|
position: '调度员',
|
|
|
|
|
|
phone: '181 8511 3486',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
hireDate: '2025-08-15'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '5',
|
|
|
|
|
|
employeeId: 'GH005',
|
|
|
|
|
|
name: '何扑金',
|
|
|
|
|
|
gender: '女',
|
|
|
|
|
|
department: '消防班',
|
|
|
|
|
|
position: '消防员',
|
|
|
|
|
|
phone: '183 3220 4078',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
hireDate: '2025-07-20'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '6',
|
|
|
|
|
|
employeeId: 'GH006',
|
|
|
|
|
|
name: '吴国立',
|
|
|
|
|
|
gender: '男',
|
|
|
|
|
|
department: '综合部',
|
|
|
|
|
|
position: '文员',
|
|
|
|
|
|
phone: '187 5703 5618',
|
|
|
|
|
|
status: false,
|
|
|
|
|
|
hireDate: '2025-07-17'
|
|
|
|
|
|
}
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟接口返回 - 实际项目中使用接口数据
|
|
|
|
|
|
setDataSource(mockData);
|
|
|
|
|
|
setTotal(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取员工数据失败:', error);
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
fetchTableData();
|
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
|
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
|
// 预留查看详情逻辑
|
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染表格
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Table
|
|
|
|
|
|
rowSelection={{
|
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
|
...rowSelection,
|
|
|
|
|
|
}}
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
|
rowKey="key"
|
|
|
|
|
|
style={{ width: '100%', }}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
const GroupTable = () => {
|
|
|
|
|
|
//状态管理
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]) //表格数据
|
|
|
|
|
|
const [loading, setLoading] = useState(false) //加载状态
|
|
|
|
|
|
const [total, setTotal] = useState(0)
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10)
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([])//选中行的id
|
|
|
|
|
|
|
|
|
|
|
|
const columns = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '序号',
|
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
|
key: 'index',
|
|
|
|
|
|
width: 100,
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '班组编号',
|
|
|
|
|
|
dataIndex: 'groupId',
|
|
|
|
|
|
key: 'groundId',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '班组姓名',
|
|
|
|
|
|
dataIndex: 'groupName',
|
|
|
|
|
|
key: 'groupName',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '班组长',
|
|
|
|
|
|
dataIndex: 'groupHeader',
|
|
|
|
|
|
key: 'groupHeader',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '成员数量',
|
|
|
|
|
|
dataIndex: 'num',
|
|
|
|
|
|
key: 'num',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '负责区域',
|
|
|
|
|
|
dataIndex: 'position',
|
|
|
|
|
|
key: 'position',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '联系电话',
|
|
|
|
|
|
dataIndex: 'phone',
|
|
|
|
|
|
key: 'phone',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '班组状态',
|
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
|
key: 'status',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (status) => (
|
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '创建时间',
|
|
|
|
|
|
dataIndex: 'createTime',
|
|
|
|
|
|
key: 'createTime',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '备注',
|
|
|
|
|
|
dataIndex: 'remarks',
|
|
|
|
|
|
key: 'remarks',
|
|
|
|
|
|
align: 'center'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<Space size="small">
|
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
// 选择框配置
|
|
|
|
|
|
const rowSelection = {
|
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
|
onChange: (newSelectedRowKeys) => {
|
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
const fetchTableData = () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true)
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
groupId: 'GH001',
|
|
|
|
|
|
groupName: '输油运行一班',
|
|
|
|
|
|
groupHeader: '钱佳仪',
|
|
|
|
|
|
num: '8',
|
|
|
|
|
|
position: '油罐储存区 A、B 区',
|
|
|
|
|
|
phone: '189 7731 3118',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
createTime: '2025-09-13',
|
|
|
|
|
|
remarks: '负责日常输油设备巡检与操作',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
groupId: 'GH002',
|
|
|
|
|
|
groupName: '消防应急班组',
|
|
|
|
|
|
groupHeader: '何颖颀',
|
|
|
|
|
|
num: '6',
|
|
|
|
|
|
position: '全厂区消防系统',
|
|
|
|
|
|
phone: '156 9747 2741',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
createTime: '2025-09-12',
|
|
|
|
|
|
remarks: '含2 名持证消防设施操作员',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '3',
|
|
|
|
|
|
groupId: 'GH003',
|
|
|
|
|
|
groupName: '设备维保班组',
|
|
|
|
|
|
groupHeader: '周遵武',
|
|
|
|
|
|
num: '10',
|
|
|
|
|
|
position: '泵房、工艺设备区',
|
|
|
|
|
|
phone: '151 4456 8916',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
createTime: '2025-08-16',
|
|
|
|
|
|
remarks: '擅长油泵、输油管道维护',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '4',
|
|
|
|
|
|
groupId: 'GH004',
|
|
|
|
|
|
groupName: '装卸作业班组',
|
|
|
|
|
|
groupHeader: '钱博西',
|
|
|
|
|
|
num: '7',
|
|
|
|
|
|
position: '油品装卸区站台',
|
|
|
|
|
|
phone: '181 8511 3486',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
createTime: '2025-08-15',
|
|
|
|
|
|
remarks: '专注装卸作业安全监护',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '5',
|
|
|
|
|
|
groupId: 'GH005',
|
|
|
|
|
|
groupName: '工艺调和班组',
|
|
|
|
|
|
groupHeader: '周缙绅',
|
|
|
|
|
|
num: '9',
|
|
|
|
|
|
position: '调和工艺区 1-3 号罐',
|
|
|
|
|
|
phone: '183 3220 4078',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
createTime: '2025-07-20',
|
|
|
|
|
|
remarks: '负责油品调和工艺参数管控',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '6',
|
|
|
|
|
|
groupId: 'GH006',
|
|
|
|
|
|
groupName: '临时支援班组',
|
|
|
|
|
|
groupHeader: '周江',
|
|
|
|
|
|
num: '4',
|
|
|
|
|
|
position: '全厂区(机动)',
|
|
|
|
|
|
phone: '187 5703 5618',
|
|
|
|
|
|
status: false,
|
|
|
|
|
|
createTime: '2025-07-17',
|
|
|
|
|
|
remarks: '项目结束，暂停用待复用',
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
setDataSource(mockData)
|
|
|
|
|
|
setTotal(85)
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error(error)
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
fetchTableData();
|
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
|
// 预留查看详情逻辑
|
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Table
|
|
|
|
|
|
rowSelection={{
|
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
|
...rowSelection,
|
|
|
|
|
|
}}
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
|
rowKey="key"
|
|
|
|
|
|
style={{ width: '100%', }}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const TimeTable = () => {
|
|
|
|
|
|
//状态管理
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]) //表格数据
|
|
|
|
|
|
const [loading, setLoading] = useState(false) //加载状态
|
|
|
|
|
|
const [total, setTotal] = useState(0)
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10)
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([])//选中行的id
|
|
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
|
|
const [row, setRow] = useState(null)
|
|
|
|
|
|
const columns = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '序号',
|
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
|
key: 'index',
|
|
|
|
|
|
width: 100,
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '线路ID',
|
|
|
|
|
|
dataIndex: 'id',
|
|
|
|
|
|
key: 'id',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '线路名称',
|
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
|
key: 'name',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '所属班次',
|
|
|
|
|
|
dataIndex: 'shifts',
|
|
|
|
|
|
key: 'shifts',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '所属专业',
|
|
|
|
|
|
dataIndex: 'affiliation',
|
|
|
|
|
|
key: 'affiliation',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '涉及区域',
|
|
|
|
|
|
dataIndex: 'position',
|
|
|
|
|
|
key: 'position',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '设备数量',
|
|
|
|
|
|
dataIndex: 'deviceNum',
|
|
|
|
|
|
key: 'deviceNum',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '巡视项数量',
|
|
|
|
|
|
dataIndex: 'lookNum',
|
|
|
|
|
|
key: 'lookNum',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '状态',
|
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
|
key: 'status',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (status) => (
|
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<Space size="small">
|
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
const fetchTableData = () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true)
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
id: 'GH001',
|
|
|
|
|
|
name: '白班电气巡检线 1',
|
|
|
|
|
|
shifts: '白班',
|
|
|
|
|
|
affiliation: '电气专业',
|
|
|
|
|
|
position: '发电机、中水处区',
|
|
|
|
|
|
deviceNum: '22',
|
|
|
|
|
|
lookNum: 3,
|
|
|
|
|
|
status: 'true',
|
|
|
|
|
|
time: '2025-03-31'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
id: 'GH001',
|
|
|
|
|
|
name: '白班电气巡检线 1',
|
|
|
|
|
|
shifts: '白班',
|
|
|
|
|
|
affiliation: '电气专业',
|
|
|
|
|
|
position: '发电机、中水处区',
|
|
|
|
|
|
deviceNum: '22',
|
|
|
|
|
|
lookNum: 3,
|
|
|
|
|
|
status: 'true',
|
|
|
|
|
|
time: '2025-05-31'
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
setDataSource(mockData)
|
|
|
|
|
|
setTotal(85)
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error(error)
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
fetchTableData();
|
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
|
setRow(record)
|
|
|
|
|
|
setOpen(true)
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<>
|
|
|
|
|
|
<Table
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
|
rowKey="key"
|
|
|
|
|
|
style={{ width: '100%', }}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<Drawers
|
|
|
|
|
|
open={open}
|
|
|
|
|
|
onClose={() => setOpen(false)}
|
|
|
|
|
|
row={row}
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
</Drawers>
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const StandardTable = () => {
|
|
|
|
|
|
// 状态管理
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]); // 表格数据
|
|
|
|
|
|
const [loading, setLoading] = useState(false); // 加载状态
|
|
|
|
|
|
const [total, setTotal] = useState(0); // 总条数
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); // 当前页码
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10); // 每页条数
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
|
|
|
|
|
|
|
|
|
|
|
|
// 表格列配置
|
|
|
|
|
|
const columns = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '序号',
|
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
|
key: 'index',
|
|
|
|
|
|
width: 100,
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '方案名称',
|
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
|
key: 'name',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '版本',
|
|
|
|
|
|
dataIndex: 'version',
|
|
|
|
|
|
key: 'version',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '状态',
|
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
|
key: 'status',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (status) => (
|
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
|
)
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '最后更新时间',
|
|
|
|
|
|
dataIndex: 'time',
|
|
|
|
|
|
key: 'time',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<Space size="small">
|
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 选择框配置
|
|
|
|
|
|
const rowSelection = {
|
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
|
onChange: (newSelectedRowKeys) => {
|
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
|
const fetchTableData = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true);
|
|
|
|
|
|
// 这里是预留的接口调用位置
|
|
|
|
|
|
// 实际项目中替换为真实接口请求
|
|
|
|
|
|
// const response = await api.getEmployeeList({
|
|
|
|
|
|
// page: currentPage,
|
|
|
|
|
|
// pageSize: pageSize
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟数据 - 实际项目中删除
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
name: '输油设备巡检标准',
|
|
|
|
|
|
version: 'V2.0',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
name: '消防系统巡检标准',
|
|
|
|
|
|
version: 'V1.1',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '3',
|
|
|
|
|
|
name: '电气设备巡检标准',
|
|
|
|
|
|
version: 'V1.0',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '4',
|
|
|
|
|
|
name: '输油设备巡检标准',
|
|
|
|
|
|
version: 'V2.0',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '5',
|
|
|
|
|
|
name: '消防系统巡检标准',
|
|
|
|
|
|
version: 'V1.1',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '6',
|
|
|
|
|
|
name: '电气设备巡检标准',
|
|
|
|
|
|
version: 'V1.0',
|
|
|
|
|
|
status: true,
|
|
|
|
|
|
time: '2025-09-13'
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟接口返回 - 实际项目中使用接口数据
|
|
|
|
|
|
setDataSource(mockData);
|
|
|
|
|
|
setTotal(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取员工数据失败:', error);
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
fetchTableData();
|
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
|
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
|
// 预留查看详情逻辑
|
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染表格
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Table
|
|
|
|
|
|
rowSelection={{
|
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
|
...rowSelection,
|
|
|
|
|
|
}}
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
|
rowKey="key"
|
|
|
|
|
|
style={{ width: '100%', }}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
const DeviceAttribute = () => {
|
|
|
|
|
|
// 状态管理
|
|
|
|
|
|
const [dataSource, setDataSource] = useState([]); // 表格数据
|
|
|
|
|
|
const [loading, setLoading] = useState(false); // 加载状态
|
|
|
|
|
|
const [total, setTotal] = useState(0); // 总条数
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); // 当前页码
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10); // 每页条数
|
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
|
|
|
|
|
|
|
|
|
|
|
|
// 表格列配置
|
|
|
|
|
|
const columns = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '属性名称',
|
|
|
|
|
|
dataIndex: 'attribute',
|
|
|
|
|
|
key: 'attribute',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '属性内容',
|
|
|
|
|
|
dataIndex: 'content',
|
|
|
|
|
|
key: 'content',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '属性分类',
|
|
|
|
|
|
dataIndex: 'class',
|
|
|
|
|
|
key: 'class',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '阈值内容',
|
|
|
|
|
|
dataIndex: 'threshold',
|
|
|
|
|
|
key: 'threshold',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (value) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ textAlign: 'left', width: '100px', margin: 'auto' }}>
|
|
|
|
|
|
<div>上限：{value['上限']}</div>
|
|
|
|
|
|
<div>下限：{value['下限']}</div>
|
|
|
|
|
|
<div>单位：{value['单位']}</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '测点名称',
|
|
|
|
|
|
dataIndex: 'point',
|
|
|
|
|
|
key: 'point',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '操作',
|
|
|
|
|
|
key: 'action',
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
|
<Space size="small">
|
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
|
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
|
const fetchTableData = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
setLoading(true);
|
|
|
|
|
|
// 这里是预留的接口调用位置
|
|
|
|
|
|
// 实际项目中替换为真实接口请求
|
|
|
|
|
|
// const response = await api.getEmployeeList({
|
|
|
|
|
|
// page: currentPage,
|
|
|
|
|
|
// pageSize: pageSize
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟数据 - 实际项目中删除
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
key: '1',
|
|
|
|
|
|
attribute: '震动',
|
|
|
|
|
|
content: '加速度',
|
|
|
|
|
|
class: '阈值',
|
|
|
|
|
|
threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
|
|
|
|
|
|
point: '测点2',
|
|
|
|
|
|
}, {
|
|
|
|
|
|
key: '2',
|
|
|
|
|
|
attribute: '震动',
|
|
|
|
|
|
content: '加速度',
|
|
|
|
|
|
class: '阈值',
|
|
|
|
|
|
threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
|
|
|
|
|
|
point: '测点2',
|
|
|
|
|
|
}, {
|
|
|
|
|
|
key: '3',
|
|
|
|
|
|
attribute: '震动',
|
|
|
|
|
|
content: '加速度',
|
|
|
|
|
|
class: '阈值',
|
|
|
|
|
|
threshold: { '上限': '', '下限': '', '单位': '' },
|
|
|
|
|
|
point: '测点2',
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟接口返回 - 实际项目中使用接口数据
|
|
|
|
|
|
setDataSource(mockData);
|
|
|
|
|
|
setTotal(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取员工数据失败:', error);
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
setLoading(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
fetchTableData();
|
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染表格
|
|
|
|
|
|
return (
|
|
|
|
|
|
<Table
|
|
|
|
|
|
columns={columns}
|
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
|
loading={loading}
|
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
|
rowKey="key"
|
|
|
|
|
|
style={{ width: '100%', }}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 分页组件
|
|
|
|
|
|
export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ textAlign: 'right', marginTop: 16, width: '100%' }}>
|
|
|
|
|
|
<Pagination
|
|
|
|
|
|
current={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onChange={onPageChange}
|
|
|
|
|
|
onShowSizeChange={onPageSizeChange}
|
|
|
|
|
|
showSizeChanger
|
|
|
|
|
|
showQuickJumper
|
|
|
|
|
|
showTotal={(total) => `共 ${total} 条`}
|
|
|
|
|
|
pageSizeOptions={['10', '20', '50', '100']}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
const PeopleMange = () => {
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
|
|
|
|
|
|
<Title title={'人员管理'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>新增</Button>
|
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<EmployeeTable
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
setTotal={setTotal}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<TablePagination
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const ClassMange = () => {
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
|
|
|
|
|
|
<Title title={'班组管理'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>新增</Button>
|
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<GroupTable></GroupTable>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<TablePagination
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const TimeMange = () => {
|
|
|
|
|
|
const [viewState, setViewState] = useState('view0')
|
|
|
|
|
|
const view0 = useRef(null)
|
|
|
|
|
|
const view1 = useRef(null)
|
|
|
|
|
|
const checkView = (viewState) => {
|
|
|
|
|
|
setViewState(viewState)
|
|
|
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
view0.current.classList.remove('view-active')
|
|
|
|
|
|
view1.current.classList.remove('view-active')
|
|
|
|
|
|
if (viewState === 'view0') {
|
|
|
|
|
|
view0.current.style.backgroundColor = '#045F5E80'
|
|
|
|
|
|
view1.current.style.backgroundColor = '#B7E5D533'
|
|
|
|
|
|
view0.current.style.color = '#fff'
|
|
|
|
|
|
view1.current.style.color = '#000'
|
|
|
|
|
|
} else {
|
|
|
|
|
|
view0.current.style.backgroundColor = '#B7E5D533'
|
|
|
|
|
|
view1.current.style.backgroundColor = '#045F5E80'
|
|
|
|
|
|
view0.current.style.color = '#000'
|
|
|
|
|
|
view1.current.style.color = '#fff'
|
|
|
|
|
|
}
|
|
|
|
|
|
}, [viewState])
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
|
|
|
|
|
|
<Title title={'排班管理'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Col span={4}></Col>
|
|
|
|
|
|
<Col span={16} style={{ textAlign: 'center' }}>
|
|
|
|
|
|
<div style={{ color: '#006665', fontSize: '20px', fontWeight: '400' }}>
|
|
|
|
|
|
<span style={{ cursor: 'pointer' }}><</span>
|
|
|
|
|
|
<span style={{ margin: '10px', }}>2025年8月</span>
|
|
|
|
|
|
<span style={{ cursor: 'pointer' }}>></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style={{ color: '#999999', fontSize: '14px' }}>
|
|
|
|
|
|
<span>上次编辑：</span>
|
|
|
|
|
|
<span>李朔 </span>
|
|
|
|
|
|
<span>2025-7-22 09:34</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<Col span={4} style={{ display: "flex", alignItems: 'center', justifyContent: 'end' }}>
|
|
|
|
|
|
<Button icon={<ExportOutlined />} className={styles['exportBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>导出</Button>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ borderRadius: '4px', width: '100%', marginTop: '20px' }}>
|
|
|
|
|
|
<Row style={{ backgroundColor: '#F0F7F7', width: '100%', padding: '10px 30px' }}>
|
|
|
|
|
|
<Col span={18}>
|
|
|
|
|
|
<Row>
|
|
|
|
|
|
{/*<Button ref={view0} className={`${styles['view']} ${styles['view-active']}`} onClick={()=>checkView('view0')}>人员视角</Button>*/}
|
|
|
|
|
|
<Button ref={view0} className={styles['view']} onClick={() => checkView('view0')}>人员视角</Button>
|
|
|
|
|
|
<Button ref={view1} className={styles['view']} onClick={() => checkView('view1')}>班组视角</Button>
|
|
|
|
|
|
<Form
|
|
|
|
|
|
layout={'inline'}
|
|
|
|
|
|
>
|
|
|
|
|
|
<Form.Item
|
|
|
|
|
|
label={<label>岗位类型</label>}
|
|
|
|
|
|
name="type"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Select
|
|
|
|
|
|
defaultValue={'全部'}
|
|
|
|
|
|
style={{ width: '132px', height: 40 }}
|
|
|
|
|
|
></Select>
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
|
|
|
label={<label>姓名</label>}
|
|
|
|
|
|
name="type1"
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
<Input
|
|
|
|
|
|
placeholder={'请输入姓名'}
|
|
|
|
|
|
style={{ width: '200px' }}
|
|
|
|
|
|
></Input>
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
|
|
|
label={<label>班组</label>}
|
|
|
|
|
|
name="type2"
|
|
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
<Select
|
|
|
|
|
|
defaultValue={'全部'}
|
|
|
|
|
|
style={{ width: '132px' }}
|
|
|
|
|
|
></Select>
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})` }}>重置</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<Col span={6} style={{ textAlign: 'right' }}>
|
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>新增</Button>
|
|
|
|
|
|
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px' }}>编辑</Button>
|
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<div className={styles['paibanBg']} style={{ backgroundImage: `url(${paibanBg})` }}>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const PatrolRouteQuery = () => {
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
|
};
|
|
|
|
|
|
const treeData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '班次',
|
|
|
|
|
|
key: '班次',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '白班', key: '白班', },
|
|
|
|
|
|
{ title: '中班', key: '中班', },
|
|
|
|
|
|
{ title: '夜班', key: '夜班', },
|
|
|
|
|
|
{ title: '中班巡检', key: '中班巡检', },
|
|
|
|
|
|
{ title: '夜班二巡检', key: '夜班二巡检', },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '专业',
|
|
|
|
|
|
key: '专业',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '电器专业', key: '电器专业', },
|
|
|
|
|
|
{ title: '水处理', key: '水处理', },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '区域',
|
|
|
|
|
|
key: '区域',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '发电机区域', key: '发电机区域', },
|
|
|
|
|
|
{ title: '中水处区', key: '中水处区', },
|
|
|
|
|
|
{ title: '除盐水区域', key: '除盐水区域', },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
|
|
|
|
|
|
<Row>
|
|
|
|
|
|
<Col span={3} style={{ backgroundColor: '#E7F2ED', padding: '10px 20px' }}>
|
|
|
|
|
|
|
|
|
|
|
|
<Title title={'巡视线路'} ></Title>
|
|
|
|
|
|
<div style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Tree
|
|
|
|
|
|
treeData={treeData}
|
|
|
|
|
|
checkable
|
|
|
|
|
|
showLine
|
|
|
|
|
|
defaultExpandParent={true}
|
|
|
|
|
|
defaultExpandedKeys={['班次', '专业', '区域']}
|
|
|
|
|
|
className={styles['tree']}
|
|
|
|
|
|
>
|
|
|
|
|
|
</Tree>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<Col span={21} style={{ padding: '0 20px' }}>
|
|
|
|
|
|
<Title title={'巡视线路'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>
|
|
|
|
|
|
重新选择
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px', minHeight: '550px' }}>
|
|
|
|
|
|
<TimeTable>
|
|
|
|
|
|
|
|
|
|
|
|
</TimeTable>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<TablePagination
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const SmartInspectionRange = () => {
|
|
|
|
|
|
// 巡检范围树形数据，根据参考图更新
|
|
|
|
|
|
const treeData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '核心环控路径',
|
|
|
|
|
|
key: 'core-path',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '指挥调度中心', key: 'command-center' },
|
|
|
|
|
|
{ title: '罐区集群', key: 'tank-cluster' },
|
|
|
|
|
|
{ title: '泵房集群', key: 'pump-cluster' },
|
|
|
|
|
|
{ title: '管线网络', key: 'pipeline-network' },
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '罐区',
|
|
|
|
|
|
key: 'tank-area',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '高危罐区',
|
|
|
|
|
|
key: 'high-risk-tank',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '顶源罐区', key: 'top-tank-area' },
|
|
|
|
|
|
{ title: '拱顶罐区', key: 'dome-top-tank' },
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '常规罐区',
|
|
|
|
|
|
key: 'normal-tank',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '浮顶罐区', key: 'floating-top-tank' },
|
|
|
|
|
|
{ title: '拱顶罐区', key: 'normal-dome-tank' },
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '泵房',
|
|
|
|
|
|
key: 'pump-house',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '运行中泵房',
|
|
|
|
|
|
key: 'running-pump',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '1#泵房', key: 'pump-1' },
|
|
|
|
|
|
{ title: '2#泵房', key: 'pump-2' },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{ title: '备用泵房', key: 'spare-pump' },
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '3#泵房',
|
|
|
|
|
|
key: 'pump-3',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '4#泵房', key: 'pump-4' },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{ title: '智能网格', key: 'smart-grid' },
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px' }}>
|
|
|
|
|
|
<Row gutter={[16, 16]}>
|
|
|
|
|
|
{/* 左侧树形结构 */}
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
backgroundColor: '#E7F2ED',
|
|
|
|
|
|
borderRadius: '10px',
|
|
|
|
|
|
padding: '15px',
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
border: '1px solid rgba(0, 102, 101, 0.2)'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
fontSize: '16px',
|
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
|
color: '#006665',
|
|
|
|
|
|
marginBottom: '15px',
|
|
|
|
|
|
paddingBottom: '10px',
|
|
|
|
|
|
borderBottom: '2px solid #006665'
|
|
|
|
|
|
}}>| 巡检范围</div>
|
|
|
|
|
|
<Tree
|
|
|
|
|
|
className={styles['tree']}
|
|
|
|
|
|
defaultExpandAll
|
|
|
|
|
|
treeData={treeData}
|
|
|
|
|
|
checkable
|
|
|
|
|
|
style={{ fontSize: '14px', color: '#006665' }}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
{/* 右侧背景图和内容 */}
|
|
|
|
|
|
<Col span={18}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'relative',
|
|
|
|
|
|
height: '631px',
|
|
|
|
|
|
borderRadius: '10px',
|
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
|
border: '1px solid rgba(0, 102, 101, 0.2)'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
{/* 背景图 */}
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={inspectionBg}
|
|
|
|
|
|
alt="智能巡检范围监控"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
objectFit: 'cover'
|
|
|
|
|
|
}}
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 区域基础信息框 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
top: '20%',
|
|
|
|
|
|
left: '30%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
|
|
|
|
padding: '15px',
|
|
|
|
|
|
borderRadius: '8px',
|
|
|
|
|
|
border: '1px solid #006665',
|
|
|
|
|
|
width: '200px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>区域基础信息</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
|
|
|
|
|
|
<div>区域名称：高危罐区 - 3#-9#罐组</div>
|
|
|
|
|
|
<div>区域编号：第2节点 (指挥中心→高危罐区)</div>
|
|
|
|
|
|
<div>巡检状态：正在巡检</div>
|
|
|
|
|
|
<div>完成进度：设备4/30台</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 巡检覆盖清单框 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
top: '10%',
|
|
|
|
|
|
right: '10%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
|
|
|
|
padding: '15px',
|
|
|
|
|
|
borderRadius: '8px',
|
|
|
|
|
|
border: '1px solid #006665',
|
|
|
|
|
|
width: '220px'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>巡检覆盖清单</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
|
|
|
|
|
|
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>覆盖主体</div>
|
|
|
|
|
|
<div>重点设备：储罐×8、3#-9#罐组、罐前付转装置</div>
|
|
|
|
|
|
<div>检测方式：红外检测、视觉识别</div>
|
|
|
|
|
|
<div>环境监控：声噪、消防水池监测</div>
|
|
|
|
|
|
<div>管控单位：3#罐区特种管控部门</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 机器人图标 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '20%',
|
|
|
|
|
|
right: '25%',
|
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{ fontSize: '48px', color: '#006665', marginBottom: '5px' }}>🤖</div>
|
|
|
|
|
|
<div style={{ backgroundColor: 'rgba(0, 102, 101, 0.8)', color: 'white', padding: '5px 10px', borderRadius: '15px', fontSize: '12px' }}>机器人实时位置</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 绿色圆点标记 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '35%',
|
|
|
|
|
|
left: '45%',
|
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
width: '20px',
|
|
|
|
|
|
height: '20px',
|
|
|
|
|
|
borderRadius: '50%',
|
|
|
|
|
|
backgroundColor: 'green',
|
|
|
|
|
|
border: '2px solid white',
|
|
|
|
|
|
boxShadow: '0 0 10px green',
|
|
|
|
|
|
margin: '0 auto 5px'
|
|
|
|
|
|
}}></div>
|
|
|
|
|
|
<div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>高危罐区</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '30%',
|
|
|
|
|
|
right: '15%',
|
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
width: '20px',
|
|
|
|
|
|
height: '20px',
|
|
|
|
|
|
borderRadius: '50%',
|
|
|
|
|
|
backgroundColor: 'green',
|
|
|
|
|
|
border: '2px solid white',
|
|
|
|
|
|
boxShadow: '0 0 10px green',
|
|
|
|
|
|
margin: '0 auto 5px'
|
|
|
|
|
|
}}></div>
|
|
|
|
|
|
<div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>常规罐区</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 任务规划与执行流程组件
|
|
|
|
|
|
const TaskPlanningFlow = () => {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px' }}>
|
|
|
|
|
|
{/* 顶部标题 */}
|
|
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'row', textAlign: 'center', lineHeight: '31.43px', gap: '10px' }}>
|
|
|
|
|
|
<div style={{ fontSize: '20px', fontWeight: 'bold', color: '#006665', marginBottom: '20px' }}>
|
|
|
|
|
|
接班班组签到
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style={{ marginRight: '10px', fontSize: '14px', color: 'rgba(153, 153, 153, 1)' }}>当前多机协作任务完成时间较单机缩短 62%</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/* 顶部控制区域 */}
|
|
|
|
|
|
<Row gutter={[16, 16]} style={{ marginBottom: '20px' }}>
|
|
|
|
|
|
{/* 左侧任务状态选择框 */}
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
|
|
|
<span style={{ marginRight: '10px', fontSize: '14px', color: '#333' }}>任务状态：</span>
|
|
|
|
|
|
<Select
|
|
|
|
|
|
defaultValue="全部"
|
|
|
|
|
|
style={{ width: 220 }}
|
|
|
|
|
|
options={[
|
|
|
|
|
|
{ value: '全部', label: '全部' },
|
|
|
|
|
|
{ value: '运行中', label: '运行中' },
|
|
|
|
|
|
{ value: '待充电', label: '待充电' },
|
|
|
|
|
|
{ value: '已完成', label: '已完成' },
|
|
|
|
|
|
]}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 右侧按钮组 */}
|
|
|
|
|
|
<Col span={18} style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
|
|
|
|
<Space size="16px" style={{ gap: '20px' }}>
|
|
|
|
|
|
<Button
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: '120px',
|
|
|
|
|
|
height: '40px',
|
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
|
fontWeight: '400',
|
|
|
|
|
|
color: 'white',
|
|
|
|
|
|
backgroundImage: `url(${btnImg1})`,
|
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
|
border: 'none',
|
|
|
|
|
|
borderRadius: '5px'
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
新建任务
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: '120px',
|
|
|
|
|
|
height: '40px',
|
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
|
fontWeight: '400',
|
|
|
|
|
|
color: 'black',
|
|
|
|
|
|
backgroundImage: `url(${btnImg2})`,
|
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
|
border: 'none',
|
|
|
|
|
|
borderRadius: '5px'
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
暂停所有任务
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: '120px',
|
|
|
|
|
|
height: '40px',
|
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
|
fontWeight: '400',
|
|
|
|
|
|
color: 'white',
|
|
|
|
|
|
backgroundImage: `url(${btnImg3})`,
|
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
|
border: 'none',
|
|
|
|
|
|
borderRadius: '5px'
|
|
|
|
|
|
}}
|
|
|
|
|
|
>
|
|
|
|
|
|
刷新状态
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Space>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 主要内容区域 - 左右布局 */}
|
|
|
|
|
|
<Row gutter={[16, 16]} style={{}}>
|
|
|
|
|
|
{/* 左侧实时监控信息区域 */}
|
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
background: '#e8f1ec',
|
|
|
|
|
|
padding: '15px',
|
|
|
|
|
|
borderRadius: '8px',
|
|
|
|
|
|
// border: '1px solid #006665',
|
|
|
|
|
|
overflow: 'auto'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
{/* 自主导航规则 */}
|
|
|
|
|
|
<div style={{ fontSize: '16px', fontWeight: 'bold', color: '#006665', marginBottom: '10px', borderBottom: '1px solid #006665', paddingBottom: '5px' }}>自主导航规则</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>罐区高级规则：</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px', marginBottom: '15px' }}>
|
|
|
|
|
|
<div>• 陌生区域：基于罐区坐标生成"宇"字形环绕路径</div>
|
|
|
|
|
|
<div>• 高度 ≤ 10m 的罐体：距离罐体0.5m环绕</div>
|
|
|
|
|
|
<div>• 高度 {'>'} 10m 的罐体：距离罐体2m环绕</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>障碍物规则：</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px', marginBottom: '15px' }}>
|
|
|
|
|
|
<div>• 距离障碍物 {'>'} 1.5m：继续沿当前路径行驶</div>
|
|
|
|
|
|
<div>• 距离障碍物 ≤ 1.5m：触发停止并执行路径重规划</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>示例配置：</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
|
|
|
|
|
|
<div>• 罐区A：优先级高，检查点15个</div>
|
|
|
|
|
|
<div>• 罐区B：优先级中，检查点10个</div>
|
|
|
|
|
|
<div>• 罐区C：优先级低，检查点8个</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 右侧背景图和监控信息区域 */}
|
|
|
|
|
|
<Col span={18}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'relative',
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
borderRadius: '10px',
|
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
|
border: '1px solid rgba(0, 102, 101, 0.2)'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
{/* 背景图 */}
|
|
|
|
|
|
<img
|
|
|
|
|
|
src={taskPlanBg}
|
|
|
|
|
|
alt="任务规划与执行流程"
|
|
|
|
|
|
style={{
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
objectFit: 'cover'
|
|
|
|
|
|
}}
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 多级实时监控信息 - 右上角 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
top: '20px',
|
|
|
|
|
|
right: '20px',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
|
padding: '15px',
|
|
|
|
|
|
borderRadius: '8px',
|
|
|
|
|
|
border: '1px solid #006665',
|
|
|
|
|
|
width: '300px',
|
|
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{ fontSize: '16px', fontWeight: 'bold', color: '#006665', marginBottom: '10px', borderBottom: '1px solid #006665', paddingBottom: '5px' }}>多级实时监控</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 一级监控信息 */}
|
|
|
|
|
|
<div style={{ marginBottom: '15px' }}>
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>1. 高危罐区监控</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
|
|
|
|
|
|
<div>• 罐区A - 红外检测正常，压力稳定</div>
|
|
|
|
|
|
<div>• 罐区B - 温度监测中，运行状态良好</div>
|
|
|
|
|
|
<div>• 泄漏检测系统 - 无异常信号</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 二级监控信息 */}
|
|
|
|
|
|
<div style={{ marginBottom: '15px' }}>
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>2. 机器人状态监控</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
|
|
|
|
|
|
<div>• ROB-001 - 高危罐区A，电量85%，运行中</div>
|
|
|
|
|
|
<div>• ROB-002 - 高危罐区B，电量72%，运行中</div>
|
|
|
|
|
|
<div>• ROB-003 - 泵房区域，电量15%，待充电</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 三级监控信息 */}
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>3. 环境参数监控</div>
|
|
|
|
|
|
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.6', paddingLeft: '10px' }}>
|
|
|
|
|
|
<div>• 温度 - 26°C，湿度 - 58%</div>
|
|
|
|
|
|
<div>• 风速 - 2.3m/s，风向 - 东北</div>
|
|
|
|
|
|
<div>• 气体浓度 - 正常范围</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 浮动标签 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
top: '30%',
|
|
|
|
|
|
left: '20%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
|
padding: '8px 12px',
|
|
|
|
|
|
borderRadius: '15px',
|
|
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
|
color: '#006665'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
📦 更多功能
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '40%',
|
|
|
|
|
|
left: '40%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
|
padding: '8px 12px',
|
|
|
|
|
|
borderRadius: '15px',
|
|
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
|
color: '#006665'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
📋 调拨出库
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '25%',
|
|
|
|
|
|
right: '35%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
|
padding: '8px 12px',
|
|
|
|
|
|
borderRadius: '15px',
|
|
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
|
color: '#006665'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
📥 生产入库
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '15%',
|
|
|
|
|
|
right: '15%',
|
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
|
padding: '8px 12px',
|
|
|
|
|
|
borderRadius: '15px',
|
|
|
|
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
|
|
|
|
fontSize: '12px',
|
|
|
|
|
|
color: '#006665'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
📦 其他入库
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* 机器人位置标记 */}
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '35%',
|
|
|
|
|
|
left: '45%',
|
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
width: '15px',
|
|
|
|
|
|
height: '15px',
|
|
|
|
|
|
borderRadius: '50%',
|
|
|
|
|
|
backgroundColor: '#52c41a',
|
|
|
|
|
|
border: '2px solid white',
|
|
|
|
|
|
boxShadow: '0 0 10px #52c41a',
|
|
|
|
|
|
margin: '0 auto 5px'
|
|
|
|
|
|
}}></div>
|
|
|
|
|
|
<div style={{ backgroundColor: 'rgba(82, 196, 26, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>ROB-001</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
|
bottom: '30%',
|
|
|
|
|
|
right: '15%',
|
|
|
|
|
|
textAlign: 'center'
|
|
|
|
|
|
}}>
|
|
|
|
|
|
<div style={{
|
|
|
|
|
|
width: '15px',
|
|
|
|
|
|
height: '15px',
|
|
|
|
|
|
borderRadius: '50%',
|
|
|
|
|
|
backgroundColor: '#52c41a',
|
|
|
|
|
|
border: '2px solid white',
|
|
|
|
|
|
boxShadow: '0 0 10px #52c41a',
|
|
|
|
|
|
margin: '0 auto 5px'
|
|
|
|
|
|
}}></div>
|
|
|
|
|
|
<div style={{ backgroundColor: 'rgba(82, 196, 26, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>ROB-002</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
};
|
|
|
|
|
|
const StandardManagement = () => {
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px', borderBottomLeftRadius: '10px', }}>
|
|
|
|
|
|
<Title title={'巡检标准管理'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }}>新建方案</Button>
|
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px', minHeight: '450px' }}>
|
|
|
|
|
|
<StandardTable></StandardTable>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<TablePagination
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
></TablePagination>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const DeviceAttributeSettings = () => {
|
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
const treeData = [
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '发电机区域',
|
|
|
|
|
|
key: '发电机区域',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '#1 发电机', key: '#1发电机', },
|
|
|
|
|
|
{ title: '#2 发电机', key: '#2发电机', },
|
|
|
|
|
|
{ title: '#3 发电机', key: '#3发电机', },
|
|
|
|
|
|
{ title: '#4 发电机', key: '#4发电机', },
|
|
|
|
|
|
{ title: '#5 发电机', key: '#5发电机', },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '中水处理区',
|
|
|
|
|
|
key: '中水处理区',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '中水过滤装置A', key: '中水过滤装置A', },
|
|
|
|
|
|
{ title: '中水过滤装置B', key: '中水过滤装置B', },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
title: '除盐水区',
|
|
|
|
|
|
key: '除盐水区',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ title: '除盐水泵1', key: '除盐水泵1', },
|
|
|
|
|
|
{ title: '除盐水泵2', key: '除盐水泵2', },
|
|
|
|
|
|
{ title: '除盐水泵3', key: '除盐水泵3', },
|
|
|
|
|
|
]
|
|
|
|
|
|
}]
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
|
|
|
|
|
|
<Row>
|
|
|
|
|
|
<Col span={4} style={{ backgroundColor: 'rgb(231, 242, 237)', padding: '20px' }}>
|
|
|
|
|
|
<Title title={'巡检区域&设备'}></Title>
|
|
|
|
|
|
<Search style={{ margin: '20px 0' }}
|
|
|
|
|
|
placeholder={'搜索节点'}
|
|
|
|
|
|
></Search>
|
|
|
|
|
|
<Tree
|
|
|
|
|
|
treeData={treeData}
|
|
|
|
|
|
className={styles['tree']}
|
|
|
|
|
|
checkable
|
|
|
|
|
|
showLine
|
|
|
|
|
|
defaultExpandParent={true}
|
|
|
|
|
|
defaultExpandedKeys={['发电机区域', '中水处理区', '除盐水区',]}
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
</Tree>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
<Col span={20} style={{ padding: '10px' }}>
|
|
|
|
|
|
<Row style={{ marginBottom: '20px' }}>
|
|
|
|
|
|
<Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>重新选择</Button>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Title title={'#1 发电机'}></Title>
|
|
|
|
|
|
<Row style={{ marginTop: '20px', minHeight: '450px' }}>
|
|
|
|
|
|
<DeviceAttribute></DeviceAttribute>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
<Row style={{ marginTop: '20px' }}>
|
|
|
|
|
|
<TablePagination
|
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
|
total={total}
|
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
></TablePagination>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
const items = [
|
|
|
|
|
|
{
|
|
|
|
|
|
label: <MenuBg text={'人员管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
|
|
|
|
|
|
key: '人员管理',
|
|
|
|
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ label: '人员管理', key: '人员管理' },
|
|
|
|
|
|
{ label: '班组管理', key: '班组管理' },
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: <MenuBg text={'排班管理'}></MenuBg>,
|
|
|
|
|
|
key: '排班管理',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: <MenuBg text={'巡检路线管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
|
|
|
|
|
|
key: '巡检路线管理',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{ label: '巡视路线查询', key: '巡视路线查询' },
|
|
|
|
|
|
{ label: '巡检标准管理', key: '巡检标准管理' },
|
|
|
|
|
|
{ label: '设备属性设置', key: '设备属性设置' },
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: <MenuBg text={'智能巡检范围监控'}></MenuBg>,
|
|
|
|
|
|
key: '智能巡检范围监控',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
|
|
|
|
|
|
key: '任务规划与执行流程',
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
const list = {
|
|
|
|
|
|
'人员管理': <PeopleMange />,
|
|
|
|
|
|
'班组管理': <ClassMange />,
|
|
|
|
|
|
'排班管理': <TimeMange />,
|
|
|
|
|
|
'巡视路线查询': <PatrolRouteQuery />,
|
|
|
|
|
|
'巡检标准管理': <StandardManagement />,
|
|
|
|
|
|
'设备属性设置': <DeviceAttributeSettings />,
|
|
|
|
|
|
'智能巡检范围监控': <SmartInspectionRange />,
|
|
|
|
|
|
'任务规划与执行流程': <TaskPlanningFlow />,
|
|
|
|
|
|
}
|
|
|
|
|
|
const InspectionTaskPlan = () => {
|
|
|
|
|
|
const [current, setCurrent] = useState('人员管理')
|
|
|
|
|
|
const onclick = (e) => {
|
|
|
|
|
|
console.log(e.key)
|
|
|
|
|
|
setCurrent(e.key)
|
|
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
|
|
|
<>
|
|
|
|
|
|
<div className={styles['header']}>
|
|
|
|
|
|
<div className={styles['logo']}>
|
|
|
|
|
|
<span style={{ marginLeft: '-20px' }}> 当前: {current}</span>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<Menu
|
|
|
|
|
|
onClick={onclick}
|
|
|
|
|
|
items={items}
|
|
|
|
|
|
selectedKeys={[current]}
|
|
|
|
|
|
mode={'horizontal'}
|
|
|
|
|
|
style={{ flex: '1' }}
|
|
|
|
|
|
className={styles['menu']}
|
|
|
|
|
|
>
|
|
|
|
|
|
</Menu>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{list[current]}
|
|
|
|
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
export default InspectionTaskPlan
|
