jiangxucong
/
dq-osi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

巡检任务+报告管理基础框架

Browse Source
main
yupeng 4 weeks ago
parent d4848ea0b3
commit 3d70b254f9
1 changed files with 293 additions and 6 deletions
Show Stats Download Patch File Download Diff File

299
src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js
Unescape Escape View File

@ -21,6 +21,95 @@ import taskPlanBg from '@/assets/img/image 674 1.svg'
import { DeleteOutlined, DownOutlined, EditOutlined, ExportOutlined, EyeOutlined, PlusOutlined, RedoOutlined, ReloadOutlined as IconRefresh, SearchOutlined as IconSearch } from "@ant-design/icons";
import TemperatureHumidityGauges from '../ReusableGauges/ReusableGauges';
const { Search } = Input
// TaskCard 组件 - 用于显示巡检任务卡片
const TaskCard = ({ task }) => {
return (
<div style={{
position: 'relative',
width: '18%'
}}>
{/* 时间节点 */}
<div style={{
position: 'absolute',
width: '20px',
height: '20px',
backgroundColor: '#2C9E9D',
borderRadius: '50%',
left: '50%',
top: '50%',
marginLeft: '-10px',
marginTop: '-10px',
zIndex: 1
}}></div>
{/* 日期标签 */}
<div style={{
position: 'absolute',
top: '60%',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: '#2C9E9D',
color: 'white',
padding: '5px 10px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold'
}}>
{task.date}
</div>
{/* 任务卡片 */}
<div style={{
position: 'absolute',
top: 0,
left: '50%',
transform: 'translateX(-50%)',
width: '90%',
backgroundColor: '#f8f9fa',
padding: '15px',
borderRadius: '10px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e9ecef'
}}>
<h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
<p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
<strong>{task.title}</strong>
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
开始时间：{task.startTime}
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
完成进度：{task.progress}%
</p>
<div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
<span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
<span style={{ fontSize: '11px', color: '#666' }}>
异常数：{task.abnormalCount}
</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
<Button size="small" type="primary" style={{
backgroundColor: '#2C9E9D',
borderColor: '#2C9E9D',
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
查看详情
</Button>
<Button size="small" danger style={{
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
终止任务
</Button>
</div>
</div>
</div>
);
};
export const MenuBg = (props) => {
return (
<div className={styles["parallelogram-container"]}>
@ -2561,16 +2650,214 @@ const InspectionManagement = () => {
)}
{activeTab === '巡检任务' && (
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
<h3>巡检任务管理</h3>
<p style={{ marginTop: '50px' }}>此处将显示巡检任务相关内容</p>
<div style={{ padding: '20px' }}>
{/* 巡检任务标题栏 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<h3 style={{ margin: 0, color: '#333' }}>巡检任务管理</h3>
<div>
<Button type="primary" icon={<PlusOutlined />} style={{ marginRight: '10px' }}>新建任务</Button>
<Button icon={<ExportOutlined />}>导出任务</Button>
</div>
</div>
{/* 横向时间轴布局 */}
<div style={{ position: 'relative', height: '200px', margin: '40px 0' }}>
{/* 时间轴线 - 横向 */}
<div style={{
position: 'absolute',
height: '6px',
backgroundColor: '#2C9E9D',
left: 0,
right: 0,
top: '50%',
marginTop: '-3px',
borderRadius: '3px'
}}></div>
{/* 任务卡片组 - 上面3个 */}
<div style={{
display: 'flex',
justifyContent: 'space-between',
position: 'relative',
height: '50%',
marginBottom: '20px'
}}>
{[
{
date: '2025/09/12',
title: '罐区A-2小时巡检任务',
startTime: '2025-10-17 09:00',
progress: 75,
abnormalCount: 3
},
{
date: '2025/09/28',
title: '泵房设备安全检查',
startTime: '2025-10-18 14:30',
progress: 100,
abnormalCount: 0
},
{
date: '2025/10/15',
title: '管线压力监测任务',
startTime: '2025-10-19 08:00',
progress: 45,
abnormalCount: 2
}
].map((task, index) => (
<TaskCard key={index} task={task} />
))}
</div>
{/* 任务卡片组 - 下面2个 */}
<div style={{
display: 'flex',
justifyContent: 'center',
position: 'relative',
height: '50%',
gap: '20px'
}}>
{[
{
date: '2025/10/19',
title: '环境参数采集任务',
startTime: '2025-10-20 10:00',
progress: 0,
abnormalCount: 0
},
{
date: '2025/10/20',
title: '安全阀定期检查',
startTime: '2025-10-21 15:00',
progress: 0,
abnormalCount: 0
}
].map((task, index) => (
<div key={index} style={{
position: 'relative',
width: '18%'
}}>
{/* 时间节点 */}
<div style={{
position: 'absolute',
width: '20px',
height: '20px',
backgroundColor: '#2C9E9D',
borderRadius: '50%',
left: '50%',
top: '50%',
marginLeft: '-10px',
marginTop: '-10px',
zIndex: 1
}}></div>
{/* 日期标签 */}
<div style={{
position: 'absolute',
top: '60%',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: '#2C9E9D',
color: 'white',
padding: '5px 10px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold'
}}>
{task.date}
</div>
{/* 任务卡片 */}
<div style={{
position: 'absolute',
top: 0,
left: '50%',
transform: 'translateX(-50%)',
width: '90%',
backgroundColor: '#f8f9fa',
padding: '15px',
borderRadius: '10px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e9ecef'
}}>
<h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
<p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
<strong>{task.title}</strong>
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
开始时间：{task.startTime}
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
完成进度：{task.progress}%
</p>
<div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
<span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
<span style={{ fontSize: '11px', color: '#666' }}>
异常数：{task.abnormalCount}
</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
<Button size="small" type="primary" style={{
backgroundColor: '#2C9E9D',
borderColor: '#2C9E9D',
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
查看详情
</Button>
<Button size="small" danger style={{
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
终止任务
</Button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
)}
{activeTab === '报告管理' && (
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
<h3>巡检报告管理</h3>
<p style={{ marginTop: '50px' }}>此处将显示巡检报告相关内容</p>
<div style={{ padding: '20px' }}>
<h1 style={{ marginBottom: '20px', textAlign: 'left' }}>| 历史报告</h1>
<Button type="primary" style={{ marginBottom: '20px' }}>一键生成分析报告</Button>
<Table
columns={[
{ title: '序号', dataIndex: 'id', key: 'id', align: 'center' },
{ title: '报告名称', dataIndex: 'name', key: 'name', align: 'center' },
{ title: '生成时间', dataIndex: 'time', key: 'time', align: 'center' },
{ title: '区域', dataIndex: 'area', key: 'area', align: 'center' },
{ title: '异常数', dataIndex: 'abnormal', key: 'abnormal', align: 'center' },
{
title: '操作',
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="middle">
<a style={{ color: 'green' }}>查看详情</a>
<a style={{ color: 'red' }}>下载PDF</a>
</Space>
),
},
]}
dataSource={[
{ id: 1, name: 'XL001', time: '2025-10-18 00:28', area: '红色区域', abnormal: '电气专业' },
{ id: 2, name: 'XL002', time: '2025-10-14 03:26', area: '橙色区域', abnormal: '水处理' },
]}
pagination={{
total: 85,
showSizeChanger: true,
showTotal: (total) => `共${total}条`,
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: 10,
}}
bordered
/>
</div>
)}
</div>

Write Preview
Loading…
Cancel
Save