From d4848ea0b3939cec34788804845bfe9badfb404b Mon Sep 17 00:00:00 2001 From: yupeng Date: Thu, 13 Nov 2025 11:21:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2=EF=BC=9A?= =?UTF-8?q?=E5=B7=A1=E6=A3=80=E7=AE=A1=E7=90=86=E2=80=94=E2=80=94=E5=AE=9E?= =?UTF-8?q?=E6=97=B6=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Inspectiontaskplan/SmartInspectionPlan.js | 342 ++++++++++-------- .../ReusableGauges/ReusableGauges.js | 291 +++++++++++++++ 2 files changed, 475 insertions(+), 158 deletions(-) create mode 100644 src/pages/smartinspection/components/ReusableGauges/ReusableGauges.js diff --git a/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js index 4445621..86cd061 100644 --- a/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js +++ b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js @@ -18,15 +18,8 @@ import newBgImage from '@/assets/img/a858e701a4fde498b9c3cc56ab2b62693055dee1.pn import paibanBg from '@/assets/img/paiban.png' import inspectionBg from '@/assets/img/Rectangle 34624130.svg' import taskPlanBg from '@/assets/img/image 674 1.svg' -import { - DeleteOutlined, - DownOutlined, - EditOutlined, - ExportOutlined, - EyeOutlined, - PlusOutlined, - RedoOutlined -} from "@ant-design/icons"; +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 export const MenuBg = (props) => { return ( @@ -109,145 +102,6 @@ const Drawers = (props) => { ) } -// End of removed code -// 员工表格组件 - - -// -// -// ), - -// ] -// // 选择框配置 -// const rowSelection = { -// selectedRowKeys, -// onChange: (newSelectedRowKeys) => { -// setSelectedRowKeys(newSelectedRowKeys); -// }, -// }; -// const fetchTableData = () => { -// try { -// setLoading(true) -// const mockData = [ -// { -// key: '1', -// groupId: 'GH001', -// groupName: '输油运行一班', -// groupHeader: '钱佳仪', -// num: '8', -// position: '油罐储存区 A、B 区', -// phone: '189 7731 3118', -// status: true, -// createTime: '2025-09-13', -// remarks: '负责日常输油设备巡检与操作', -// }, -// { -// key: '2', -// groupId: 'GH002', -// groupName: '消防应急班组', -// groupHeader: '何颖颀', -// num: '6', -// position: '全厂区消防系统', -// phone: '156 9747 2741', -// status: true, -// createTime: '2025-09-12', -// remarks: '含2 名持证消防设施操作员', -// }, -// { -// key: '3', -// groupId: 'GH003', -// groupName: '设备维保班组', -// groupHeader: '周遵武', -// num: '10', -// position: '泵房、工艺设备区', -// phone: '151 4456 8916', -// status: true, -// createTime: '2025-08-16', -// remarks: '擅长油泵、输油管道维护', -// }, -// { -// key: '4', -// groupId: 'GH004', -// groupName: '装卸作业班组', -// groupHeader: '钱博西', -// num: '7', -// position: '油品装卸区站台', -// phone: '181 8511 3486', -// status: true, -// createTime: '2025-08-15', -// remarks: '专注装卸作业安全监护', -// }, -// { -// key: '5', -// groupId: 'GH005', -// groupName: '工艺调和班组', -// groupHeader: '周缙绅', -// num: '9', -// position: '调和工艺区 1-3 号罐', -// phone: '183 3220 4078', -// status: true, -// createTime: '2025-07-20', -// remarks: '负责油品调和工艺参数管控', -// }, -// { -// key: '6', -// groupId: 'GH006', -// groupName: '临时支援班组', -// groupHeader: '周江', -// num: '4', -// position: '全厂区(机动)', -// phone: '187 5703 5618', -// status: false, -// createTime: '2025-07-17', -// remarks: '项目结束，暂停用待复用', -// } -// ] -// setDataSource(mockData) -// setTotal(85) - -// } catch (error) { -// console.error(error) -// } finally { -// setLoading(false) -// } -// } -// // 初始加载和分页变化时重新获取数据 -// useEffect(() => { -// fetchTableData(); -// }, [currentPage, pageSize]); -// // 处理查看详情 -// const handleView = (record) => { -// // 预留查看详情逻辑 -// console.log('查看详情:', record); -// }; - -// // 处理编辑 -// const handleEdit = (record) => { -// // 预留编辑逻辑 -// console.log('编辑:', record); -// }; - -// // 处理删除 -// const handleDelete = (record) => { -// // 预留删除逻辑 -// console.log('删除:', record); -// }; -// return ( -// -// ) -// } const TimeTable = () => { //状态管理 const [dataSource, setDataSource] = useState([]) //表格数据 @@ -815,7 +669,7 @@ const SmartInspectionRange = () => { ]; return ( -
+
{/* 左侧树形结构 */}
@@ -1491,14 +1345,7 @@ const SmartInspectionContent = () => {

实时仪表盘

{/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
-
- -
- - {/* 湿度仪表盘 - 使用React兼容的ECharts组件 */} -
- -
+
@@ -2134,7 +1981,7 @@ const SmartInspectionContent = () => { // 任务规划与执行流程组件 const TaskPlanningFlow = () => { return ( -
+
{/* 顶部标题 */}
@@ -2553,8 +2400,187 @@ const items = [ label: , key: '巡检内容', }, + { + label: , + key: '巡检管理', + }, ] +const InspectionManagement = () => { + const [activeTab, setActiveTab] = useState('实时监控'); + + return ( +
+ {/* 顶部按钮 */} +
+
+ | 智能巡检内容监控中心 +
+
+ + + +
+
+ {/* 左侧导航 */} +
+
+ +
+ + {/* 右侧内容区域 */} +
+ {activeTab === '实时监控' && ( +
+ {/* 搜索栏 */} +
+ + + + + + +
+ + {/* 内容区域 - 调整高度布局，顶部贴近，底部只留10px空间 */} +
+ {/* 传感器仪表盘 */} +
+

传感器仪表盘

+
+ +
+
+
甲烷: 0.01%
+
一氧化碳: 0.0ppm
+
分贝值: 69.2db
+
+
+ + {/* 双面监控区 */} +
+

双面监控区

+
+
+ 红外热成像图 +
+
+ 视频监控画面 +
+
+
+ + {/* 机器人信息和检测设备状态 */} +
+
+

机器人实时信息

+
+
机器人名称: AAA
+
当前位置: 中控室
+
速度: 0.07m/s
+
当前模式: 巡回检测
+
电量: 85%
+
累计里程: 96km
+
+
+ +
+

检测设备状态

+
+ + + + + )} + + {activeTab === '巡检任务' && ( +
+

巡检任务管理

+

此处将显示巡检任务相关内容

+
+ )} + + {activeTab === '报告管理' && ( +
+

巡检报告管理

+

此处将显示巡检报告相关内容

+
+ )} + + + + ); +}; + const list = { + '巡检管理': , '巡检标准管理': , '设备属性设置': , '智能巡检范围监控': , diff --git a/src/pages/smartinspection/components/ReusableGauges/ReusableGauges.js b/src/pages/smartinspection/components/ReusableGauges/ReusableGauges.js new file mode 100644 index 0000000..8f82ed6 --- /dev/null +++ b/src/pages/smartinspection/components/ReusableGauges/ReusableGauges.js @@ -0,0 +1,291 @@ +import React, { useRef, useEffect } from 'react'; + +/** + * ECharts仪表盘组件 - 支持动态大小 + */ +export const EChartsGauge = ({ id, option, height, width }) => { + const chartRef = useRef(null); + const chartInstanceRef = useRef(null); + + useEffect(() => { + // 确保在浏览器环境中运行 + if (typeof window !== 'undefined' && chartRef.current) { + const echarts = require('echarts'); + + // 初始化图表 + if (!chartInstanceRef.current) { + chartInstanceRef.current = echarts.init(chartRef.current); + } + + // 设置配置 + chartInstanceRef.current.setOption(option); + + // 响应窗口大小变化 + const handleResize = () => { + if (chartInstanceRef.current) { + chartInstanceRef.current.resize(); + } + }; + + window.addEventListener('resize', handleResize); + + // 清理函数 + return () => { + window.removeEventListener('resize', handleResize); + if (chartInstanceRef.current) { + chartInstanceRef.current.dispose(); + chartInstanceRef.current = null; + } + }; + } + }, [option]); + + return ( +
+ ); +}; + +/** + * 温度仪表盘配置生成函数 + * @param {number} value - 温度值 + * @returns {object} ECharts配置选项 + */ +export const getTemperatureGaugeOption = (value = 28) => { + return { + series: [ + { + type: 'gauge', + startAngle: 180, + endAngle: 0, + min: 0, + max: 120, + splitNumber: 6, + itemStyle: { + color: 'rgba(4, 95, 94, 0.5)', + shadowColor: 'rgba(4, 95, 94, 0.7)', + shadowBlur: 10, + shadowOffsetX: 2, + shadowOffsetY: 2 + }, + progress: { + show: true, + roundCap: true, + width: 18, + itemStyle: { + color: 'rgba(4, 95, 94, 0.5)' + } + }, + pointer: { + icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + length: '75%', + width: 16, + offsetCenter: [0, '5%'], + itemStyle: { + color: 'rgba(4, 95, 94, 1)' + } + }, + axisLine: { + roundCap: true, + lineStyle: { + width: 18, + color: [ + [1, 'rgba(4, 95, 94, 0.5)'] + ] + } + }, + axisTick: { + splitNumber: 2, + lineStyle: { + width: 2, + color: '#999' + } + }, + splitLine: { + length: 12, + lineStyle: { + width: 3, + color: 'rgba(4, 95, 94, 0.8)' + } + }, + axisLabel: { + distance: 30, + color: 'rgba(4, 95, 94, 0.8)', + fontSize: 20 + }, + title: { + show: true, + offsetCenter: [0, '10%'], + fontSize: 18, + color: 'rgba(4, 95, 94, 0.8)' + }, + detail: { + width: '60%', + lineHeight: 40, + height: 40, + borderRadius: 8, + offsetCenter: [0, '35%'], + valueAnimation: true, + formatter: function (value) { + return '{value|温度：' + value.toFixed(0) + '℃}'; + }, + rich: { + value: { + fontSize: 20, + fontWeight: '400', + color: 'rgba(4, 95, 94, 1)' + }, + unit: { + fontSize: 20, + color: 'rgba(4, 95, 94, 0.8)', + padding: [0, 0, -20, 10] + } + } + }, + data: [ + { + value: value, + name: '' + } + ] + } + ] + }; +}; + +/** + * 湿度仪表盘配置生成函数 + * @param {number} value - 湿度值 + * @returns {object} ECharts配置选项 + */ +export const getHumidityGaugeOption = (value = 55) => { + return { + series: [ + { + type: 'gauge', + startAngle: 180, + endAngle: 0, + min: 0, + max: 120, + splitNumber: 6, + itemStyle: { + color: 'rgba(4, 95, 94, 0.5)', + shadowColor: 'rgba(4, 95, 94, 0.7)', + shadowBlur: 10, + shadowOffsetX: 2, + shadowOffsetY: 2 + }, + progress: { + show: true, + roundCap: true, + width: 18, + itemStyle: { + color: 'rgba(4, 95, 94, 0.5)' + } + }, + pointer: { + icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + length: '75%', + width: 16, + offsetCenter: [0, '5%'], + itemStyle: { + color: 'rgba(4, 95, 94, 1)' + } + }, + axisLine: { + roundCap: true, + lineStyle: { + width: 18, + color: [ + [1, 'rgba(4, 95, 94, 0.5)'] + ] + } + }, + axisTick: { + splitNumber: 2, + lineStyle: { + width: 2, + color: '#999' + } + }, + splitLine: { + length: 12, + lineStyle: { + width: 3, + color: 'rgba(4, 95, 94, 0.8)' + } + }, + axisLabel: { + distance: 30, + color: 'rgba(4, 95, 94, 0.8)', + fontSize: 20 + }, + title: { + show: true, + offsetCenter: [0, '10%'], + fontSize: 18, + color: 'rgba(4, 95, 94, 0.8)' + }, + detail: { + width: '60%', + lineHeight: 40, + height: 40, + borderRadius: 8, + offsetCenter: [0, '35%'], + valueAnimation: true, + formatter: function (value) { + return '{value|湿度：' + value.toFixed(0) + '%}'; + }, + rich: { + value: { + fontSize: 20, + fontWeight: '400', + color: 'rgba(4, 95, 94, 1)' + }, + unit: { + fontSize: 20, + color: 'rgba(4, 95, 94, 0.8)', + padding: [0, 0, -20, 10] + } + } + }, + data: [ + { + value: value, + name: '' + } + ] + } + ] + }; +}; + +/** + * 温湿度仪表盘组合组件 + * @param {object} props - 组件属性 + * @param {number} props.temperature - 温度值 + * @param {number} props.humidity - 湿度值 + * @param {number} props.width - 单个仪表盘宽度 + * @param {number} props.height - 单个仪表盘高度 + */ +const TemperatureHumidityGauges = ({ temperature = 28, humidity = 55, width = 600, height = 600 }) => { + const temperatureOption = getTemperatureGaugeOption(temperature); + const humidityOption = getHumidityGaugeOption(humidity); + + return ( +
+
+ +
+ +
+ +
+
+ ); +}; + +export default TemperatureHumidityGauges; \ No newline at end of file