From e8242f00b0581f7957108a44ed110411596bafff Mon Sep 17 00:00:00 2001 From: yupeng Date: Wed, 17 Dec 2025 09:45:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E5=B7=A1=E6=A3=80=E2=80=94?= =?UTF-8?q?=E2=80=94=E6=9C=BA=E5=99=A8=E4=BA=BA=E6=99=BA=E8=83=BD=E5=B7=A1?= =?UTF-8?q?=E6=A3=80=E2=80=94=E2=80=94=E8=AE=BE=E5=A4=87=E6=80=BB=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Inspectiontaskplan/DeviceOverview.js | 189 ++++++++++++++++++ .../Inspectiontaskplan/SmartInspectionPlan.js | 6 + 2 files changed, 195 insertions(+) create mode 100644 src/pages/smartinspection/components/Inspectiontaskplan/DeviceOverview.js diff --git a/src/pages/smartinspection/components/Inspectiontaskplan/DeviceOverview.js b/src/pages/smartinspection/components/Inspectiontaskplan/DeviceOverview.js new file mode 100644 index 0000000..0ae595e --- /dev/null +++ b/src/pages/smartinspection/components/Inspectiontaskplan/DeviceOverview.js @@ -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 ( +
+ {/* 顶部筛选项目 */} +
+
+ 筛选项目： + +
+ +
+ + {/* 主要内容区域 */} +
+ {/* 左侧设备总览 */} +
+ {/* 设备总览 */} +
+

设备总览

+ + {/* 项目A */} +
+
项目A（407输送机）
+
设备类型：输送机×5，电机×10，减速器×8
+
运行状态：95%正常，5%预警
+
+ + {/* 项目B */} +
+
项目B（MA501输送机）
+
设备类型：输送机×3，电机×6，滚筒×4
+
运行状态：90%正常，10%异常
+
+ + {/* 项目C */} +
+
项目C（新建项目）
+
设备类型：输送机×2，机器人×1
+
运行状态：100%正常
+
+
+ + {/* 检测设备统计 */} +
+

检测设备统计

+ + {/* 巡检机器人 */} +
+
巡检机器人
+
总数：5台（项目A×2，项目B×2，项目C×1）
+
+ + {/* 传感器集群 */} +
+
传感器集群
+
在线率：80%（4台在线，1台维护）
+
类型：红外热成像仪×10，温度传感器×15，气体传感器×3
+
+
+
+ + {/* 中央3D可视化区域 */} +
+

3D工厂模型

+
+
3D工厂模型展示区域
+ + {/* 状态标识 */} +
+
+
+ 生产 +
+
+ +
+
+
+ 生产入库 +
+
+ +
+
+
+ 调拨出库 +
+
+
+
+ + {/* 右侧监控区域 */} +
+ {/* 重点设备实时监控 */} +
+

重点设备实时监控

+ ( + {status} + ) + }, + { title: '操作', dataIndex: 'action', key: 'action', width: 80, render: () => 查看详情 }, + ]} + 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 }} + /> + + + {/* 实时报警栏 */} +
+

实时报警栏

+
( + {level} + ) + }, + { + title: '处置状态', + dataIndex: 'status', + key: 'status', + width: 80, + render: (status) => ( + {status} + ) + }, + ]} + 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 }} + /> + + + {/* 底部指标 */} +
+
+
4456
+
设备数量
+
+
+
98%
+
在线率
+
+
+
2%
+
异常数
+
+
+ + + + ); +} + +export default DeviceMonitoringDashboard; \ No newline at end of file diff --git a/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js index fe4fc1e..9e8dba3 100644 --- a/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js +++ b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js @@ -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: , key: '数据分析巡检管理', }, + { + label: , + key: '设备总览', + }, ] const InspectionManagement = () => { const [activeTab, setActiveTab] = useState('实时监控'); @@ -2880,6 +2885,7 @@ const list = { '巡检内容': , '任务规划与执行流程': , '数据分析巡检管理': , // 添加新组件 + '设备总览': , } const InspectionTaskPlan = () => { const [current, setCurrent] = useState('智能巡检范围监控')