|
|
|
|
@ -5,6 +5,10 @@ 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 menuInactiveBg from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png'
|
|
|
|
|
import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
|
|
|
|
|
import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.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'
|
|
|
|
|
@ -1535,6 +1539,348 @@ const SmartInspectionRange = () => {
|
|
|
|
|
)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 智能巡检内容监控中心组件
|
|
|
|
|
const SmartInspectionContent = () => {
|
|
|
|
|
const [activeTab, setActiveTab] = useState('温度异常检测');
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(6);
|
|
|
|
|
|
|
|
|
|
const handleTabClick = (tab) => {
|
|
|
|
|
setActiveTab(tab);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handlePageChange = (page) => {
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderContent = () => {
|
|
|
|
|
switch (activeTab) {
|
|
|
|
|
case '温度异常检测':
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ padding: 20 }}>
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
|
|
|
|
<h2 style={{ margin: 0, color: '#1890ff' }}>实时监测区</h2>
|
|
|
|
|
{/* <div style={{ display: 'flex', gap: 10 }}>
|
|
|
|
|
<button style={{
|
|
|
|
|
backgroundColor: '#52c41a',
|
|
|
|
|
color: 'white',
|
|
|
|
|
border: 'none',
|
|
|
|
|
padding: '8px 16px',
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
}}>
|
|
|
|
|
实时刷新
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
backgroundColor: '#1890ff',
|
|
|
|
|
color: 'white',
|
|
|
|
|
border: 'none',
|
|
|
|
|
padding: '8px 16px',
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
导出检测报告
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
backgroundColor: '#722ed1',
|
|
|
|
|
color: 'white',
|
|
|
|
|
border: 'none',
|
|
|
|
|
padding: '8px 16px',
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
报警设置
|
|
|
|
|
</button>
|
|
|
|
|
</div> */}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', gap: 20 }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
border: '1px solid #f0f0f0',
|
|
|
|
|
borderRadius: 8,
|
|
|
|
|
padding: 16,
|
|
|
|
|
width: '35%',
|
|
|
|
|
backgroundColor: '#fafafa'
|
|
|
|
|
}}>
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
<img
|
|
|
|
|
src={thermalImage}
|
|
|
|
|
alt="红外热成像图"
|
|
|
|
|
style={{ width: '100%', height: 'auto', borderRadius: 4 }}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: 10,
|
|
|
|
|
right: 10,
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
|
|
|
color: 'white',
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
fontSize: 12
|
|
|
|
|
}}>
|
|
|
|
|
当前最高温: 89°C
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ marginTop: 12 }}>
|
|
|
|
|
<p style={{ margin: '8px 0', fontSize: 14 }}>实时温度: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>89°C</span></p>
|
|
|
|
|
<p style={{ margin: '8px 0', fontSize: 14 }}>高温异常: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>80°C</span></p>
|
|
|
|
|
<p style={{ margin: '8px 0', fontSize: 14, color: '#666' }}>当前监测区域: 罐区管道连接处检测</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ width: '65%' }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
border: '1px solid #f0f0f0',
|
|
|
|
|
borderRadius: 8,
|
|
|
|
|
padding: 16,
|
|
|
|
|
marginBottom: 20,
|
|
|
|
|
backgroundColor: '#fafafa'
|
|
|
|
|
}}>
|
|
|
|
|
<h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>检测原理说明</h3>
|
|
|
|
|
<p style={{
|
|
|
|
|
margin: 0,
|
|
|
|
|
lineHeight: 1.6,
|
|
|
|
|
color: '#333',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
padding: 12,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
border: '1px solid #e8e8e8'
|
|
|
|
|
}}>
|
|
|
|
|
"搭载红外热成像测温仪，覆盖电缆、胶管、设备高温点；温度达到阈值时自动上报故障，同步录制热成像/可见光视频，为故障分析提供数据支撑。"
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{
|
|
|
|
|
border: '1px solid #f0f0f0',
|
|
|
|
|
borderRadius: 8,
|
|
|
|
|
padding: 16,
|
|
|
|
|
backgroundColor: '#fafafa'
|
|
|
|
|
}}>
|
|
|
|
|
<h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>异常历史记录</h3>
|
|
|
|
|
<div style={{ overflowX: 'auto' }}>
|
|
|
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', backgroundColor: 'white' }}>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr style={{ backgroundColor: '#fafafa' }}>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>序号</th>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>故障时间</th>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>检测区域</th>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>异常温度</th>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>处理状态</th>
|
|
|
|
|
<th style={{ padding: '10px', border: '1px solid #e8e8e8', textAlign: 'left' }}>操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2025-10-16 14:20</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1# 泵房电机</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>92°C</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>已处理</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>
|
|
|
|
|
<button style={{
|
|
|
|
|
color: '#1890ff',
|
|
|
|
|
border: 'none',
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
textDecoration: 'underline'
|
|
|
|
|
}}>
|
|
|
|
|
查看详情
|
|
|
|
|
</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>2025-10-16 14:20</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>1# 泵房电机</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>92°C</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>已处理</td>
|
|
|
|
|
<td style={{ padding: '10px', border: '1px solid #e8e8e8' }}>
|
|
|
|
|
<button style={{
|
|
|
|
|
color: '#1890ff',
|
|
|
|
|
border: 'none',
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
textDecoration: 'underline'
|
|
|
|
|
}}>
|
|
|
|
|
查看详情
|
|
|
|
|
</button>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
|
|
|
|
|
<span style={{ fontSize: 14, color: '#666' }}>共 85 条</span>
|
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
|
|
|
<span style={{ fontSize: 14 }}>10 / page</span>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
‹
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
1
|
|
|
|
|
</button>
|
|
|
|
|
<span>...</span>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
4
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
5
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #1890ff',
|
|
|
|
|
backgroundColor: '#1890ff',
|
|
|
|
|
color: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
6
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
7
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
8
|
|
|
|
|
</button>
|
|
|
|
|
<span>...</span>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
50
|
|
|
|
|
</button>
|
|
|
|
|
<button style={{
|
|
|
|
|
padding: '4px 8px',
|
|
|
|
|
border: '1px solid #d9d9d9',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
}}>
|
|
|
|
|
›
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
case '温湿度检测':
|
|
|
|
|
case '跑冒滴漏检测':
|
|
|
|
|
case '仪器仪表采集':
|
|
|
|
|
case '环境监测':
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ padding: 40, textAlign: 'center', color: '#666' }}>
|
|
|
|
|
<h3>该模块正在开发中...</h3>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
default:
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10 }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
display: 'flex',
|
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
padding: '16px 24px',
|
|
|
|
|
color: 'black',
|
|
|
|
|
fontWeight: '400',
|
|
|
|
|
fontSize: 18
|
|
|
|
|
}}>
|
|
|
|
|
<div>
|
|
|
|
|
| 智能巡检内容监控中心
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>实时刷新</Button>
|
|
|
|
|
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>导出巡检报告</Button>
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>报警设置</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
|
|
<div style={{
|
|
|
|
|
width: 240,
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
minHeight: 'calc(100vh - 60px)',
|
|
|
|
|
padding: 16
|
|
|
|
|
}}>
|
|
|
|
|
<nav>
|
|
|
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|
|
|
|
{['温度异常检测', '温湿度检测', '跑冒滴漏检测', '仪器仪表采集', '环境监测'].map((tab) => (
|
|
|
|
|
<li key={tab} style={{ marginBottom: 8 }}>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleTabClick(tab)}
|
|
|
|
|
style={{
|
|
|
|
|
width: 200,
|
|
|
|
|
height: 80,
|
|
|
|
|
display: 'flex',
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
border: 'none',
|
|
|
|
|
// backgroundColor: activeTab === tab ? '#1890ff' : 'transparent',
|
|
|
|
|
color: activeTab === tab ? 'white' : 'black',
|
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
fontSize: 24,
|
|
|
|
|
fontWeight:400,
|
|
|
|
|
transition: 'all 0.3s',
|
|
|
|
|
backgroundImage: activeTab === tab ? `url(${activeBgImage})` : `url(${menuInactiveBg})`,
|
|
|
|
|
backgroundSize: 'cover',
|
|
|
|
|
backgroundPosition: 'center',
|
|
|
|
|
backgroundRepeat: 'no-repeat'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{tab}
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
))}
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ flex: 1 }}>
|
|
|
|
|
{renderContent()}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 任务规划与执行流程组件
|
|
|
|
|
const TaskPlanningFlow = () => {
|
|
|
|
|
return (
|
|
|
|
|
@ -1971,6 +2317,10 @@ const items = [
|
|
|
|
|
label: <MenuBg text={'智能巡检范围监控'}></MenuBg>,
|
|
|
|
|
key: '智能巡检范围监控',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: <MenuBg text={'巡检内容'}></MenuBg>,
|
|
|
|
|
key: '巡检内容',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
|
|
|
|
|
key: '任务规划与执行流程',
|
|
|
|
|
@ -1984,6 +2334,7 @@ const list = {
|
|
|
|
|
'巡检标准管理': <StandardManagement />,
|
|
|
|
|
'设备属性设置': <DeviceAttributeSettings />,
|
|
|
|
|
'智能巡检范围监控': <SmartInspectionRange />,
|
|
|
|
|
'巡检内容': <SmartInspectionContent />,
|
|
|
|
|
'任务规划与执行流程': <TaskPlanningFlow />,
|
|
|
|
|
}
|
|
|
|
|
const InspectionTaskPlan = () => {
|
|
|
|
|
|
