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

智能巡检——机器人智能巡检——设备总览

Browse Source
main
yupeng 2 days ago
parent b6d3019c06
commit e8242f00b0
2 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File

189
src/pages/smartinspection/components/Inspectiontaskplan/DeviceOverview.js
Unescape Escape View File

@ -0,0 +1,189 @@
import { Button, Col, Row, Select, Table, Tag } from "antd";
import { useState } from "react";
import styles from './InspectionTaskPlan.less'
// 设备监控仪表盘组件
const DeviceMonitoringDashboard = () => {
return (
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '600px', borderRadius: '15px' }}>
{/* 顶部筛选项目 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span>筛选项目：</span>
<Select defaultValue="全部" style={{ width: 120, marginLeft: '10px' }}>
<Select.Option value="全部">全部</Select.Option>
</Select>
</div>
<Button type="primary">刷新数据</Button>
</div>
{/* 主要内容区域 */}
<div style={{ display: 'flex', gap: '20px', height: 'calc(100vh - 200px)' }}>
{/* 左侧设备总览 */}
<div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '15px' }}>
{/* 设备总览 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px' }}>
<h3 style={{ marginBottom: '15px', marginTop: 0 }}>设备总览</h3>
{/* 项目A */}
<div style={{ backgroundColor: '#e8f5e9', padding: '10px', borderRadius: '6px', marginBottom: '10px' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>项目A（407输送机）</div>
<div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>设备类型：输送机×5，电机×10，减速器×8</div>
<div style={{ fontSize: '12px', color: '#666' }}>运行状态：95%正常，5%预警</div>
</div>
{/* 项目B */}
<div style={{ backgroundColor: '#fff3e0', padding: '10px', borderRadius: '6px', marginBottom: '10px' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>项目B（MA501输送机）</div>
<div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>设备类型：输送机×3，电机×6，滚筒×4</div>
<div style={{ fontSize: '12px', color: '#666' }}>运行状态：90%正常，10%异常</div>
</div>
{/* 项目C */}
<div style={{ backgroundColor: '#e3f2fd', padding: '10px', borderRadius: '6px' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>项目C（新建项目）</div>
<div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>设备类型：输送机×2，机器人×1</div>
<div style={{ fontSize: '12px', color: '#666' }}>运行状态：100%正常</div>
</div>
</div>
{/* 检测设备统计 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px' }}>
<h3 style={{ marginBottom: '15px', marginTop: 0 }}>检测设备统计</h3>
{/* 巡检机器人 */}
<div style={{ marginBottom: '15px' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>巡检机器人</div>
<div style={{ fontSize: '12px', color: '#666' }}>总数：5台（项目A×2，项目B×2，项目C×1）</div>
</div>
{/* 传感器集群 */}
<div>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>传感器集群</div>
<div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>在线率：80%（4台在线，1台维护）</div>
<div style={{ fontSize: '12px', color: '#666' }}>类型：红外热成像仪×10，温度传感器×15，气体传感器×3</div>
</div>
</div>
</div>
{/* 中央3D可视化区域 */}
<div style={{ flex: 1, backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px', position: 'relative' }}>
<h3 style={{ marginBottom: '15px', marginTop: 0 }}>3D工厂模型</h3>
<div style={{ width: '100%', height: 'calc(100% - 30px)', backgroundColor: '#e0e0e0', borderRadius: '6px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<div style={{ fontSize: '14px', color: '#666' }}>3D工厂模型展示区域</div>
{/* 状态标识 */}
<div style={{ position: 'absolute', top: '50%', left: '30%', transform: 'translate(-50%, -50%)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px', backgroundColor: '#4caf50', color: 'white', padding: '8px 12px', borderRadius: '20px' }}>
<div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: 'white' }}></div>
<span>生产</span>
</div>
</div>
<div style={{ position: 'absolute', top: '30%', right: '40%', transform: 'translate(-50%, -50%)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px', backgroundColor: '#4caf50', color: 'white', padding: '8px 12px', borderRadius: '20px' }}>
<div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: 'white' }}></div>
<span>生产入库</span>
</div>
</div>
<div style={{ position: 'absolute', bottom: '30%', right: '30%', transform: 'translate(-50%, -50%)' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px', backgroundColor: '#4caf50', color: 'white', padding: '8px 12px', borderRadius: '20px' }}>
<div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: 'white' }}></div>
<span>调拨出库</span>
</div>
</div>
</div>
</div>
{/* 右侧监控区域 */}
<div style={{ width: '350px', display: 'flex', flexDirection: 'column', gap: '15px' }}>
{/* 重点设备实时监控 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px' }}>
<h3 style={{ marginBottom: '15px', marginTop: 0 }}>重点设备实时监控</h3>
<Table
columns={[
{ title: '设备名称', dataIndex: 'name', key: 'name', width: 100 },
{ title: '所属项目', dataIndex: 'project', key: 'project', width: 80 },
{ title: '实时数据', dataIndex: 'data', key: 'data', width: 100 },
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 60,
render: (status) => (
<Tag color={status === '正常' ? 'green' : 'orange'}>{status}</Tag>
)
},
{ title: '操作', dataIndex: 'action', key: 'action', width: 80, render: () => <a href="#">查看详情</a> },
]}
dataSource={[
{ key: '1', name: '407输送机', project: '项目A', data: '温度45℃，电流10A', status: '正常', action: '查看详情' },
{ key: '2', name: 'MA501输送机', project: '项目B', data: '振动0.8mm/s', status: '预警', action: '查看详情' },
{ key: '3', name: '项目C输送机机器人', project: '项目C', data: '电量85%，位置东区', status: '正常', action: '查看详情' },
]}
pagination={false}
scroll={{ y: 200 }}
/>
</div>
{/* 实时报警栏 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px' }}>
<h3 style={{ marginBottom: '15px', marginTop: 0 }}>实时报警栏</h3>
<Table
columns={[
{ title: '报警时间', dataIndex: 'time', key: 'time', width: 120 },
{ title: '项目', dataIndex: 'project', key: 'project', width: 60 },
{ title: '设备', dataIndex: 'device', key: 'device', width: 100 },
{ title: '报警类型', dataIndex: 'type', key: 'type', width: 80 },
{
title: '级别',
dataIndex: 'level',
key: 'level',
width: 60,
render: (level) => (
<Tag color={level === '严重' ? 'red' : level === '警告' ? 'orange' : 'blue'}>{level}</Tag>
)
},
{
title: '处置状态',
dataIndex: 'status',
key: 'status',
width: 80,
render: (status) => (
<Tag color={status === '未处理' ? 'red' : status === '处理中' ? 'orange' : 'green'}>{status}</Tag>
)
},
]}
dataSource={[
{ key: '1', time: '2025-10-17 10:59', project: '项目B', device: 'MA501滚筒', type: '振动超限', level: '严重', status: '未处理' },
{ key: '2', time: '2025-10-17 09:30', project: '项目A', device: '407托辊组', type: '温度报警', level: '警告', status: '处理中' },
{ key: '3', time: '2025-10-17 08:15', project: '项目C', device: '巡检机器人', type: '电量低', level: '提示', status: '已处理' },
]}
pagination={false}
scroll={{ y: 150 }}
/>
</div>
{/* 底部指标 */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '10px' }}>
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px', textAlign: 'center' }}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#2196f3' }}>4456</div>
<div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>设备数量</div>
</div>
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px', textAlign: 'center' }}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#4caf50' }}>98%</div>
<div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>在线率</div>
</div>
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '15px', textAlign: 'center' }}>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ff9800' }}>2%</div>
<div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>异常数</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default DeviceMonitoringDashboard;

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

@ -22,6 +22,7 @@ import { DeleteOutlined, DownOutlined, EditOutlined, ExportOutlined, EyeOutlined
import TemperatureHumidityGauges from '../ReusableGauges/ReusableGauges';
// 新增导入
import DataAnalysisInspectionManagement from './DataAnalysisInspectionManagement';
import DeviceMonitoringDashboard from './DeviceOverview'; // 导入设备监控仪表盘组件
const { Search } = Input
// TaskCard 组件 - 用于显示巡检任务卡片
@ -2499,6 +2500,10 @@ const items = [
label: <MenuBg text={'数据分析巡检管理'}></MenuBg>,
key: '数据分析巡检管理',
},
{
label: <MenuBg text={'设备总览'}></MenuBg>,
key: '设备总览',
},
]
const InspectionManagement = () => {
const [activeTab, setActiveTab] = useState('实时监控');
@ -2880,6 +2885,7 @@ const list = {
'巡检内容': <SmartInspectionContent />,
'任务规划与执行流程': <TaskPlanningFlow />,
'数据分析巡检管理': <DataAnalysisInspectionManagement />, // 添加新组件
'设备总览': <DeviceMonitoringDashboard />,
}
const InspectionTaskPlan = () => {
const [current, setCurrent] = useState('智能巡检范围监控')

Write Preview
Loading…
Cancel
Save