|
|
|
@ -1,19 +1,139 @@
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react'; // ======== 导入React库，用于创建React组件 ========
|
|
|
|
import React from 'react';
|
|
|
|
import { Card, Result } from 'antd'; // ======== 导入Ant Design的Card和Result组件 ========
|
|
|
|
import { Card, Result, Timeline,Statistic, Table,Row, Input,Button,Col} from 'antd';
|
|
|
|
|
|
|
|
import StandardTable from '@/components/StandardTable';
|
|
|
|
const ResponsibilityImplementation = () => { // ======== 定义责任落实组件函数 ========
|
|
|
|
import styles from './ResponsibilityImplementation.less';
|
|
|
|
return ( // ======== 返回JSX结构 ========
|
|
|
|
|
|
|
|
<div style={{ padding: '24px' }}> // ======== 外层容器，设置24px内边距 ========
|
|
|
|
|
|
|
|
<Card title="责任落实" style={{ minHeight: '400px' }}> // ======== Card组件，标题为"责任落实"，最小高度400px ========
|
|
|
|
|
|
|
|
<Result // ======== Result组件，用于显示状态页面 ========
|
|
|
|
const ResponsibilityImplementation = () => {
|
|
|
|
status="info" // ======== 设置状态为info（信息类型） ========
|
|
|
|
|
|
|
|
title="责任落实模块" // ======== 设置标题 ========
|
|
|
|
const columns = [
|
|
|
|
subTitle="此功能正在开发中，敬请期待..." // ======== 设置副标题，提示开发中 ========
|
|
|
|
{
|
|
|
|
/> // ======== Result组件结束 ========
|
|
|
|
title:"编号",
|
|
|
|
</Card> // ======== Card组件结束 ========
|
|
|
|
dataIndex:"id",
|
|
|
|
</div> // ======== 外层容器结束 ========
|
|
|
|
key:"id",
|
|
|
|
|
|
|
|
width:60,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"责任区域",
|
|
|
|
|
|
|
|
dataIndex:"zrqy",
|
|
|
|
|
|
|
|
key:"zrqy",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"设备型号",
|
|
|
|
|
|
|
|
dataIndex:"sbxh",
|
|
|
|
|
|
|
|
key:"sbxh",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"危险源类型",
|
|
|
|
|
|
|
|
dataIndex:"wxlylx",
|
|
|
|
|
|
|
|
key:"wxlylx",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"责任人",
|
|
|
|
|
|
|
|
dataIndex:"zrr",
|
|
|
|
|
|
|
|
key:"zrr",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"联系方式",
|
|
|
|
|
|
|
|
dataIndex:"lxfs",
|
|
|
|
|
|
|
|
key:"lxfs",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"巡检频率",
|
|
|
|
|
|
|
|
dataIndex:"xjpl",
|
|
|
|
|
|
|
|
key:"xjpl",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"最近巡检",
|
|
|
|
|
|
|
|
dataIndex:"zjxj",
|
|
|
|
|
|
|
|
key:"zjxj",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"状态",
|
|
|
|
|
|
|
|
dataIndex:"zt",
|
|
|
|
|
|
|
|
key:"zt",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title:"操作",
|
|
|
|
|
|
|
|
dataIndex:"cz",
|
|
|
|
|
|
|
|
key:"cz",
|
|
|
|
|
|
|
|
width:120,
|
|
|
|
|
|
|
|
render: (text, record) => { // ======== 渲染操作列 ========
|
|
|
|
|
|
|
|
const handleView = (record) => { // ======== 定义查看函数 ========
|
|
|
|
|
|
|
|
console.log('查看记录:', record); // ======== 打印记录信息到控制台 ========
|
|
|
|
|
|
|
|
// 这里可以添加查看详情的逻辑 // ======== 注释：可以添加查看详情的逻辑 ========
|
|
|
|
|
|
|
|
}; // ======== 函数结束 ========
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( // ======== 返回按钮组件 ========
|
|
|
|
|
|
|
|
<Button type="link" onClick={() => handleView(record)}>查看</Button> // ======== 查看按钮，点击时调用handleView函数 ========
|
|
|
|
); // ======== return语句结束 ========
|
|
|
|
); // ======== return语句结束 ========
|
|
|
|
}; // ======== 组件函数结束 ========
|
|
|
|
} // ======== render函数结束 ========
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 生成20条假数据
|
|
|
|
|
|
|
|
const generateMockData = () => { // ======== 定义生成假数据的函数 ========
|
|
|
|
|
|
|
|
const data = []; // ======== 创建空数组存储数据 ========
|
|
|
|
|
|
|
|
const areas = ['生产车间A区', '生产车间B区', '储罐区', '配电室', '锅炉房', '化学品仓库', '实验室', '办公区']; // ======== 责任区域选项 ========
|
|
|
|
|
|
|
|
const devices = ['压力容器', '储罐', '反应釜', '压缩机', '泵类设备', '电气设备', '管道系统', '安全阀']; // ======== 设备型号选项 ========
|
|
|
|
|
|
|
|
const statuses = ['正常', '维护中', '故障', '停用', '检修']; // ======== 状态选项 ========
|
|
|
|
|
|
|
|
const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十', '钱十一', '陈十二']; // ======== 责任人姓名选项 ========
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 1; i <= 20; i++) { // ======== 循环生成20条数据 ========
|
|
|
|
|
|
|
|
data.push({ // ======== 添加一条数据到数组 ========
|
|
|
|
|
|
|
|
key: i.toString(), // ======== 唯一标识 ========
|
|
|
|
|
|
|
|
id: `WX${String(i).padStart(3, '0')}`, // ======== 编号：WX001, WX002... ========
|
|
|
|
|
|
|
|
zrqy: areas[Math.floor(Math.random() * areas.length)], // ======== 随机选择责任区域 ========
|
|
|
|
|
|
|
|
sbxh: devices[Math.floor(Math.random() * devices.length)], // ======== 随机选择设备型号 ========
|
|
|
|
|
|
|
|
zrr: names[Math.floor(Math.random() * names.length)], // ======== 随机选择责任人 ========
|
|
|
|
|
|
|
|
zt: statuses[Math.floor(Math.random() * statuses.length)], // ======== 随机选择状态 ========
|
|
|
|
|
|
|
|
}); // ======== 数据对象结束 ========
|
|
|
|
|
|
|
|
} // ======== 循环结束 ========
|
|
|
|
|
|
|
|
return data; // ======== 返回生成的数据数组 ========
|
|
|
|
|
|
|
|
}; // ======== 函数结束 ========
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tableData = generateMockData(); // ======== 调用函数生成假数据 ========
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div className={styles.containerR}>
|
|
|
|
|
|
|
|
<div className={styles.containerOne}>
|
|
|
|
|
|
|
|
<div className={styles.containerOneLeft}>1</div>
|
|
|
|
|
|
|
|
<div className={styles.containerOneRight}>2</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
export default ResponsibilityImplementation; // ======== 导出组件供其他文件使用 ========
|
|
|
|
<div className={styles.containerTwo}>
|
|
|
|
|
|
|
|
<div>重大危险源安全包信息库</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<Input placeholder="搜索危险源编号" />
|
|
|
|
|
|
|
|
<Button>新增责任人</Button>
|
|
|
|
|
|
|
|
<Button>导出清单</Button>
|
|
|
|
|
|
|
|
<StandardTable
|
|
|
|
|
|
|
|
columns={columns} // ======== 表格列配置 ========
|
|
|
|
|
|
|
|
data={{ // ======== 数据对象，包含list和pagination ========
|
|
|
|
|
|
|
|
list: tableData, // ======== 表格数据列表 ========
|
|
|
|
|
|
|
|
pagination: { // ======== 分页配置 ========
|
|
|
|
|
|
|
|
currentPage: 1, // ======== 当前页码 ========
|
|
|
|
|
|
|
|
pageSize: 5, // ======== 每页显示10条数据 ========
|
|
|
|
|
|
|
|
total: tableData.length, // ======== 总数据条数 ========
|
|
|
|
|
|
|
|
} // ======== 分页配置结束 ========
|
|
|
|
|
|
|
|
}} // ======== 数据对象结束 ========
|
|
|
|
|
|
|
|
selectedRows={[]} // ======== 选中的行数据，初始为空数组 ========
|
|
|
|
|
|
|
|
onSelectRow={() => {}} // ======== 行选择事件处理函数 ========
|
|
|
|
|
|
|
|
onChange={() => {}} // ======== 表格变化事件处理函数 ========
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ResponsibilityImplementation;
|
|
|
|
|
wangyunfei
1 month ago