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

新增页面任务规划与执行流程

Browse Source
main
yupeng 1 month ago
parent fd8a79d5a2
commit 0e987a3214
2 changed files with 366 additions and 24 deletions
Show Stats Download Patch File Download Diff File

49
src/assets/img/image 674 1.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

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

@ -7,6 +7,7 @@ import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png' import btnImg3 from '@/assets/img/planBtn3.png'
import paibanBg from '@/assets/img/paiban.png' import paibanBg from '@/assets/img/paiban.png'
import inspectionBg from '@/assets/img/Rectangle 34624130.svg' import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
import taskPlanBg from '@/assets/img/image 674 1.svg'
import { import {
DeleteOutlined, DeleteOutlined,
DownOutlined, DownOutlined,
@ -1395,17 +1396,17 @@ const SmartInspectionRange = () => {
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
{/* 左侧树形结构 */} {/* 左侧树形结构 */}
<Col span={6}> <Col span={6}>
<div style={{ <div style={{
backgroundColor: '#E7F2ED', backgroundColor: '#E7F2ED',
borderRadius: '10px', borderRadius: '10px',
padding: '15px', padding: '15px',
height: '100%', height: '100%',
border: '1px solid rgba(0, 102, 101, 0.2)' border: '1px solid rgba(0, 102, 101, 0.2)'
}}> }}>
<div style={{ <div style={{
fontSize: '16px', fontSize: '16px',
fontWeight: 'bold', fontWeight: 'bold',
color: '#006665', color: '#006665',
marginBottom: '15px', marginBottom: '15px',
paddingBottom: '10px', paddingBottom: '10px',
borderBottom: '2px solid #006665' borderBottom: '2px solid #006665'
@ -1421,7 +1422,7 @@ const SmartInspectionRange = () => {
</Col> </Col>
{/* 右侧背景图和内容 */} {/* 右侧背景图和内容 */}
<Col span={18}> <Col span={18}>
<div style={{ <div style={{
position: 'relative', position: 'relative',
height: '631px', height: '631px',
borderRadius: '10px', borderRadius: '10px',
@ -1432,13 +1433,13 @@ const SmartInspectionRange = () => {
<img <img
src={inspectionBg} src={inspectionBg}
alt="智能巡检范围监控" alt="智能巡检范围监控"
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
objectFit: 'cover' objectFit: 'cover'
}} }}
/> />
{/* 区域基础信息框 */} {/* 区域基础信息框 */}
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
@ -1458,7 +1459,7 @@ const SmartInspectionRange = () => {
<div>完成进度：设备4/30台</div> <div>完成进度：设备4/30台</div>
</div> </div>
</div> </div>
{/* 巡检覆盖清单框 */} {/* 巡检覆盖清单框 */}
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
@ -1479,7 +1480,7 @@ const SmartInspectionRange = () => {
<div>管控单位：3#罐区特种管控部门</div> <div>管控单位：3#罐区特种管控部门</div>
</div> </div>
</div> </div>
{/* 机器人图标 */} {/* 机器人图标 */}
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
@ -1490,7 +1491,7 @@ const SmartInspectionRange = () => {
<div style={{ fontSize: '48px', color: '#006665', marginBottom: '5px' }}>🤖</div> <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 style={{ backgroundColor: 'rgba(0, 102, 101, 0.8)', color: 'white', padding: '5px 10px', borderRadius: '15px', fontSize: '12px' }}>机器人实时位置</div>
</div> </div>
{/* 绿色圆点标记 */} {/* 绿色圆点标记 */}
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
@ -1498,10 +1499,10 @@ const SmartInspectionRange = () => {
left: '45%', left: '45%',
textAlign: 'center' textAlign: 'center'
}}> }}>
<div style={{ <div style={{
width: '20px', width: '20px',
height: '20px', height: '20px',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: 'green', backgroundColor: 'green',
border: '2px solid white', border: '2px solid white',
boxShadow: '0 0 10px green', boxShadow: '0 0 10px green',
@ -1509,17 +1510,17 @@ const SmartInspectionRange = () => {
}}></div> }}></div>
<div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>高危罐区</div> <div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>高危罐区</div>
</div> </div>
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
bottom: '30%', bottom: '30%',
right: '15%', right: '15%',
textAlign: 'center' textAlign: 'center'
}}> }}>
<div style={{ <div style={{
width: '20px', width: '20px',
height: '20px', height: '20px',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: 'green', backgroundColor: 'green',
border: '2px solid white', border: '2px solid white',
boxShadow: '0 0 10px green', boxShadow: '0 0 10px green',
@ -1532,7 +1533,294 @@ const SmartInspectionRange = () => {
</Row> </Row>
</div> </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 StandardManagement = () => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize, setPageSize] = useState(10);
@ -1683,6 +1971,10 @@ const items = [
label: <MenuBg text={'智能巡检范围监控'}></MenuBg>, label: <MenuBg text={'智能巡检范围监控'}></MenuBg>,
key: '智能巡检范围监控', key: '智能巡检范围监控',
}, },
{
label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
key: '任务规划与执行流程',
},
] ]
const list = { const list = {
'人员管理': <PeopleMange />, '人员管理': <PeopleMange />,
@ -1692,6 +1984,7 @@ const list = {
'巡检标准管理': <StandardManagement />, '巡检标准管理': <StandardManagement />,
'设备属性设置': <DeviceAttributeSettings />, '设备属性设置': <DeviceAttributeSettings />,
'智能巡检范围监控': <SmartInspectionRange />, '智能巡检范围监控': <SmartInspectionRange />,
'任务规划与执行流程': <TaskPlanningFlow />,
} }
const InspectionTaskPlan = () => { const InspectionTaskPlan = () => {
const [current, setCurrent] = useState('人员管理') const [current, setCurrent] = useState('人员管理')

Write Preview
Loading…
Cancel
Save