jiangxucong
/
dq-osi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b6d3019c06'
${ noResults }
dq-osi/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js

2913 lines
147 KiB
JavaScript
Raw Normal View History Unescape Escape

新增页面智能巡检——智能巡检范围监控
1 month ago
import { Button, Col, Drawer, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tag, Tree } from "antd";
import { useEffect, useRef, useState } from "react";
import styles from './InspectionTaskPlan.less'
import { Title } from "@/pages/inspectiontasks/InspectionTasks";
新增：环境监测
1 month ago
import EnvironmentalMonitoring from "../EnvironmentalMonitoring/EnvironmentalMonitoring";
新增页面智能巡检——智能巡检范围监控
1 month ago
import btnImg1 from '@/assets/img/planBtn1.png'
import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png'
新增页面——温湿度检测1
1 month ago
import menuInactiveBg1 from '@/assets/img/d368476fbf3b6a5e808b0274d96e1809d945da24.png' // 温度异常检测未激活背景图
import menuInactiveBg2 from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png' // 温湿度检测未激活背景图
import menuInactiveBg3 from '@/assets/img/90501c706560228b7b68e4c8f4c9924c490578ad.png' // 跑冒滴漏检测未激活背景图
import menuInactiveBg4 from '@/assets/img/a4a0367e2a7e14611cc75be2e1a2d51127a4d390.png' // 仪器仪表采集未激活背景图
import menuInactiveBg5 from '@/assets/img/f729103541513c2e864c1f8a710db1d80125f3e7.png' // 环境监测未激活背景图
新增页面：巡检内容——温度异常检测
1 month ago
import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.png'
新增 跑冒滴漏检测页面
1 month ago
import newBgImage from '@/assets/img/a858e701a4fde498b9c3cc56ab2b62693055dee1.png'
新增页面：巡检内容——温度异常检测
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
import paibanBg from '@/assets/img/paiban.png'
import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
新增页面任务规划与执行流程
1 month ago
import taskPlanBg from '@/assets/img/image 674 1.svg'
新增页面：巡检管理——实时监控
1 month ago
import { DeleteOutlined, DownOutlined, EditOutlined, ExportOutlined, EyeOutlined, PlusOutlined, RedoOutlined, ReloadOutlined as IconRefresh, SearchOutlined as IconSearch } from "@ant-design/icons";
import TemperatureHumidityGauges from '../ReusableGauges/ReusableGauges';
智能巡检——机器人智能巡检——数据分析巡检管理页面
1 day ago
// 新增导入
import DataAnalysisInspectionManagement from './DataAnalysisInspectionManagement';
新增页面智能巡检——智能巡检范围监控
1 month ago
const { Search } = Input
巡检任务+报告管理基础框架
4 weeks ago
// TaskCard 组件 - 用于显示巡检任务卡片
const TaskCard = ({ task }) => {
return (
<div style={{
position: 'relative',
width: '18%'
}}>
{/* 时间节点 */}
<div style={{
position: 'absolute',
width: '20px',
height: '20px',
backgroundColor: '#2C9E9D',
borderRadius: '50%',
left: '50%',
top: '50%',
marginLeft: '-10px',
marginTop: '-10px',
zIndex: 1
}}></div>
{/* 日期标签 */}
<div style={{
position: 'absolute',
top: '60%',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: '#2C9E9D',
color: 'white',
padding: '5px 10px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold'
}}>
{task.date}
</div>
{/* 任务卡片 */}
<div style={{
position: 'absolute',
top: 0,
left: '50%',
transform: 'translateX(-50%)',
width: '90%',
backgroundColor: '#f8f9fa',
padding: '15px',
borderRadius: '10px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e9ecef'
}}>
<h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
<p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
<strong>{task.title}</strong>
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
开始时间：{task.startTime}
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
完成进度：{task.progress}%
</p>
<div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
<span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
<span style={{ fontSize: '11px', color: '#666' }}>
异常数：{task.abnormalCount}
</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
<Button size="small" type="primary" style={{
backgroundColor: '#2C9E9D',
borderColor: '#2C9E9D',
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
查看详情
</Button>
<Button size="small" danger style={{
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
终止任务
</Button>
</div>
</div>
</div>
);
};
新增页面智能巡检——智能巡检范围监控
1 month ago
export const MenuBg = (props) => {
return (
<div className={styles["parallelogram-container"]}>
<span className={styles["text-content"]}>{props.text}</span>
<span className={styles["text-content"]} style={{ margin: '0' }}>{props.icon}</span>
</div>
)
}
//抽屉
const Drawers = (props) => {
return (
<Drawer
title='详情'
closable={{ 'aria-label': 'Close Button' }}
onClose={props.onClose}
open={props.open}
width={500}
className={styles['customDrawer']}
>
<div style={{ padding: '20px' }}>
<Title title={'基本信息'} ></Title>
<Row style={{ margin: '20px 0' }}>
<Col span={12}>
<Row style={{ marginBottom: '20px' }}>
<Col span={8} className={styles['font1']}>所属班次</Col>
<Col span={16}>{props.row?.shifts}</Col>
</Row>
<Row>
<Col span={8} className={styles['font1']}>路线名称</Col>
<Col span={16}>{props.row?.name}</Col>
</Row>
</Col>
<Col span={12}>
<Row style={{ marginBottom: '20px' }}>
<Col span={8} className={styles['font1']}>所属专业</Col>
<Col span={16}>{props.row?.affiliation}</Col>
</Row>
<Row>
<Col span={8} className={styles['font1']}>创建时间</Col>
<Col span={16}>{props.row?.time}</Col>
</Row>
</Col>
</Row>
<Title title={'巡检设备范围'}></Title>
<div className={styles['box']}>
<Tag className={styles['tag']} color="magenta">发电机</Tag>
<Tag className={styles['tag']} color="red">中水处区</Tag>
<Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
<Tag className={styles['tag']} color="orange">1#炉右上炉膛温度</Tag>
<Tag className={styles['tag']} color="gold">1#冷干机</Tag>
</div>
<Title title={'巡视项详情'}></Title>
<Row style={{ margin: '20px 0 10px 0' }}>
<Tag className={styles['tag']} color="magenta">发电机</Tag>
</Row>
<Row style={{ margin: '0 0 20px 0' }}>
<ul className={styles['ul']}>
<li>外观检查：有无破损、油污 </li>
<li>温度检测：轴承温度≤70℃，定子温度≤105℃</li>
</ul>
</Row>
<Row style={{ margin: '20px 0 10px 0' }}>
<Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
</Row>
<Row style={{ margin: '0 0 20px 0' }}>
<ul className={styles['ul']}>
<li>运行指示灯：是否正常亮起 </li>
<li>散热风扇：是否正常转动</li>
<li>输出电压：380V±5%</li>
</ul>
</Row>
</div>
</Drawer>
)
}
const TimeTable = () => {
//状态管理
const [dataSource, setDataSource] = useState([]) //表格数据
const [loading, setLoading] = useState(false) //加载状态
const [total, setTotal] = useState(0)
const [currentPage, setCurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(10)
const [selectedRowKeys, setSelectedRowKeys] = useState([])//选中行的id
const [open, setOpen] = useState(false)
const [row, setRow] = useState(null)
const columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 100,
align: 'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},
{
title: '线路ID',
dataIndex: 'id',
key: 'id',
align: 'center',
},
{
title: '线路名称',
dataIndex: 'name',
key: 'name',
align: 'center',
},
{
title: '所属班次',
dataIndex: 'shifts',
key: 'shifts',
align: 'center',
},
{
title: '所属专业',
dataIndex: 'affiliation',
key: 'affiliation',
align: 'center',
},
{
title: '涉及区域',
dataIndex: 'position',
key: 'position',
align: 'center',
},
{
title: '设备数量',
dataIndex: 'deviceNum',
key: 'deviceNum',
align: 'center',
},
{
title: '巡视项数量',
dataIndex: 'lookNum',
key: 'lookNum',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
align: 'center',
render: (status) => (
<Switch checked={status} />
)
},
{
title: '操作',
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="small">
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
<EyeOutlined /> 查看详情
</a>
</Space>
),
},
]
const fetchTableData = () => {
try {
setLoading(true)
const mockData = [
{
key: '1',
id: 'GH001',
name: '白班电气巡检线 1',
shifts: '白班',
affiliation: '电气专业',
position: '发电机、中水处区',
deviceNum: '22',
lookNum: 3,
status: 'true',
time: '2025-03-31'
},
{
key: '2',
id: 'GH001',
name: '白班电气巡检线 1',
shifts: '白班',
affiliation: '电气专业',
position: '发电机、中水处区',
deviceNum: '22',
lookNum: 3,
status: 'true',
time: '2025-05-31'
},
]
setDataSource(mockData)
setTotal(85)
} catch (error) {
console.error(error)
} finally {
setLoading(false)
}
}
// 初始加载和分页变化时重新获取数据
useEffect(() => {
fetchTableData();
}, [currentPage, pageSize]);
// 处理查看详情
const handleView = (record) => {
console.log('查看详情:', record);
setRow(record)
setOpen(true)
};
return (
<>
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
pagination={false} // 关闭表格自带分页，使用外部分页组件
rowKey="key"
style={{ width: '100%', }}
/>
<Drawers
open={open}
onClose={() => setOpen(false)}
row={row}
>
</Drawers>
</>
)
}
const StandardTable = () => {
// 状态管理
const [dataSource, setDataSource] = useState([]); // 表格数据
const [loading, setLoading] = useState(false); // 加载状态
const [total, setTotal] = useState(0); // 总条数
const [currentPage, setCurrentPage] = useState(1); // 当前页码
const [pageSize, setPageSize] = useState(10); // 每页条数
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
// 表格列配置
const columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 100,
align: 'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},
{
title: '方案名称',
dataIndex: 'name',
key: 'name',
align: 'center',
},
{
title: '版本',
dataIndex: 'version',
key: 'version',
align: 'center',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
align: 'center',
render: (status) => (
<Switch checked={status} />
)
},
{
title: '最后更新时间',
dataIndex: 'time',
key: 'time',
align: 'center',
},
{
title: '操作',
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="small">
<a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
<EyeOutlined /> 查看详情
</a>
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
<EditOutlined /> 编辑
</a>
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
<DeleteOutlined /> 删除
</a>
</Space>
),
},
];
// 选择框配置
const rowSelection = {
selectedRowKeys,
onChange: (newSelectedRowKeys) => {
setSelectedRowKeys(newSelectedRowKeys);
},
};
// 获取表格数据
const fetchTableData = async () => {
try {
setLoading(true);
// 这里是预留的接口调用位置
// 实际项目中替换为真实接口请求
// const response = await api.getEmployeeList({
// page: currentPage,
// pageSize: pageSize
// });
// 模拟数据 - 实际项目中删除
const mockData = [
{
key: '1',
name: '输油设备巡检标准',
version: 'V2.0',
status: true,
time: '2025-09-13'
},
{
key: '2',
name: '消防系统巡检标准',
version: 'V1.1',
status: true,
time: '2025-09-13'
},
{
key: '3',
name: '电气设备巡检标准',
version: 'V1.0',
status: true,
time: '2025-09-13'
},
{
key: '4',
name: '输油设备巡检标准',
version: 'V2.0',
status: true,
time: '2025-09-13'
},
{
key: '5',
name: '消防系统巡检标准',
version: 'V1.1',
status: true,
time: '2025-09-13'
},
{
key: '6',
name: '电气设备巡检标准',
version: 'V1.0',
status: true,
time: '2025-09-13'
},
];
// 模拟接口返回 - 实际项目中使用接口数据
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 (
<Table
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={columns}
dataSource={dataSource}
loading={loading}
pagination={false} // 关闭表格自带分页，使用外部分页组件
rowKey="key"
style={{ width: '100%', }}
/>
);
}
const DeviceAttribute = () => {
// 状态管理
const [dataSource, setDataSource] = useState([]); // 表格数据
const [loading, setLoading] = useState(false); // 加载状态
const [total, setTotal] = useState(0); // 总条数
const [currentPage, setCurrentPage] = useState(1); // 当前页码
const [pageSize, setPageSize] = useState(10); // 每页条数
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
// 表格列配置
const columns = [
{
title: '属性名称',
dataIndex: 'attribute',
key: 'attribute',
align: 'center',
},
{
title: '属性内容',
dataIndex: 'content',
key: 'content',
align: 'center',
},
{
title: '属性分类',
dataIndex: 'class',
key: 'class',
align: 'center',
},
{
title: '阈值内容',
dataIndex: 'threshold',
key: 'threshold',
align: 'center',
render: (value) => {
return (
<div style={{ textAlign: 'left', width: '100px', margin: 'auto' }}>
<div>上限：{value['上限']}</div>
<div>下限：{value['下限']}</div>
<div>单位：{value['单位']}</div>
</div>
)
}
},
{
title: '测点名称',
dataIndex: 'point',
key: 'point',
align: 'center',
},
{
title: '操作',
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="small">
<a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
<EditOutlined /> 编辑
</a>
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
<DeleteOutlined /> 删除
</a>
</Space>
),
},
]
// 获取表格数据
const fetchTableData = async () => {
try {
setLoading(true);
// 这里是预留的接口调用位置
// 实际项目中替换为真实接口请求
// const response = await api.getEmployeeList({
// page: currentPage,
// pageSize: pageSize
// });
// 模拟数据 - 实际项目中删除
const mockData = [
{
key: '1',
attribute: '震动',
content: '加速度',
class: '阈值',
threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
point: '测点2',
}, {
key: '2',
attribute: '震动',
content: '加速度',
class: '阈值',
threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
point: '测点2',
}, {
key: '3',
attribute: '震动',
content: '加速度',
class: '阈值',
threshold: { '上限': '', '下限': '', '单位': '' },
point: '测点2',
},
];
// 模拟接口返回 - 实际项目中使用接口数据
setDataSource(mockData);
setTotal(85); // 总条数，实际项目中从接口获取
} catch (error) {
console.error('获取员工数据失败:', error);
} finally {
setLoading(false);
}
};
// 初始加载和分页变化时重新获取数据
useEffect(() => {
fetchTableData();
}, [currentPage, pageSize]);
// 处理编辑
const handleEdit = (record) => {
// 预留编辑逻辑
console.log('编辑:', record);
};
// 处理删除
const handleDelete = (record) => {
// 预留删除逻辑
console.log('删除:', record);
};
// 渲染表格
return (
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
pagination={false} // 关闭表格自带分页，使用外部分页组件
rowKey="key"
style={{ width: '100%', }}
/>
);
}
// 分页组件
export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
return (
<div style={{ textAlign: 'right', marginTop: 16, width: '100%' }}>
<Pagination
current={currentPage}
pageSize={pageSize}
total={total}
onChange={onPageChange}
onShowSizeChange={onPageSizeChange}
showSizeChanger
showQuickJumper
showTotal={(total) => `共 ${total} 条`}
pageSizeOptions={['10', '20', '50', '100']}
/>
</div>
);
};
新增：仪器仪表采集
1 month ago
// TimeMange component removed
// PatrolRouteQuery component removed
新增页面智能巡检——智能巡检范围监控
1 month ago
const SmartInspectionRange = () => {
// 巡检范围树形数据，根据参考图更新
const treeData = [
{
title: '核心环控路径',
key: 'core-path',
children: [
{ title: '指挥调度中心', key: 'command-center' },
{ title: '罐区集群', key: 'tank-cluster' },
{ title: '泵房集群', key: 'pump-cluster' },
{ title: '管线网络', key: 'pipeline-network' },
],
},
{
title: '罐区',
key: 'tank-area',
children: [
{
title: '高危罐区',
key: 'high-risk-tank',
children: [
{ title: '顶源罐区', key: 'top-tank-area' },
{ title: '拱顶罐区', key: 'dome-top-tank' },
],
},
{
title: '常规罐区',
key: 'normal-tank',
children: [
{ title: '浮顶罐区', key: 'floating-top-tank' },
{ title: '拱顶罐区', key: 'normal-dome-tank' },
],
},
],
},
{
title: '泵房',
key: 'pump-house',
children: [
{
title: '运行中泵房',
key: 'running-pump',
children: [
{ title: '1#泵房', key: 'pump-1' },
{ title: '2#泵房', key: 'pump-2' },
]
},
{ title: '备用泵房', key: 'spare-pump' },
{
title: '3#泵房',
key: 'pump-3',
children: [
{ title: '4#泵房', key: 'pump-4' },
]
},
],
},
{ title: '智能网格', key: 'smart-grid' },
];
return (
新增页面：巡检管理——实时监控
1 month ago
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
新增页面智能巡检——智能巡检范围监控
1 month ago
<Row gutter={[16, 16]}>
{/* 左侧树形结构 */}
<Col span={6}>
新增页面任务规划与执行流程
1 month ago
<div style={{
backgroundColor: '#E7F2ED',
borderRadius: '10px',
新增页面智能巡检——智能巡检范围监控
1 month ago
padding: '15px',
height: '100%',
border: '1px solid rgba(0, 102, 101, 0.2)'
}}>
新增页面任务规划与执行流程
1 month ago
<div style={{
fontSize: '16px',
fontWeight: 'bold',
color: '#006665',
新增页面智能巡检——智能巡检范围监控
1 month ago
marginBottom: '15px',
paddingBottom: '10px',
borderBottom: '2px solid #006665'
}}>| 巡检范围</div>
<Tree
className={styles['tree']}
defaultExpandAll
treeData={treeData}
checkable
style={{ fontSize: '14px', color: '#006665' }}
/>
</div>
</Col>
{/* 右侧背景图和内容 */}
<Col span={18}>
新增页面任务规划与执行流程
1 month ago
<div style={{
新增页面智能巡检——智能巡检范围监控
1 month ago
position: 'relative',
height: '631px',
borderRadius: '10px',
overflow: 'hidden',
border: '1px solid rgba(0, 102, 101, 0.2)'
}}>
{/* 背景图 */}
<img
src={inspectionBg}
alt="智能巡检范围监控"
新增页面任务规划与执行流程
1 month ago
style={{
width: '100%',
新增页面智能巡检——智能巡检范围监控
1 month ago
height: '100%',
objectFit: 'cover'
}}
/>
新增页面任务规划与执行流程
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
{/* 区域基础信息框 */}
<div style={{
position: 'absolute',
top: '20%',
left: '30%',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
padding: '15px',
borderRadius: '8px',
border: '1px solid #006665',
width: '200px'
}}>
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>区域基础信息</div>
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
<div>区域名称：高危罐区 - 3#-9#罐组</div>
<div>区域编号：第2节点 (指挥中心→高危罐区)</div>
<div>巡检状态：正在巡检</div>
<div>完成进度：设备4/30台</div>
</div>
</div>
新增页面任务规划与执行流程
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
{/* 巡检覆盖清单框 */}
<div style={{
position: 'absolute',
top: '10%',
right: '10%',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
padding: '15px',
borderRadius: '8px',
border: '1px solid #006665',
width: '220px'
}}>
<div style={{ fontSize: '14px', fontWeight: 'bold', color: '#006665', marginBottom: '8px' }}>巡检覆盖清单</div>
<div style={{ fontSize: '12px', color: '#333', lineHeight: '1.5' }}>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>覆盖主体</div>
<div>重点设备：储罐×8、3#-9#罐组、罐前付转装置</div>
<div>检测方式：红外检测、视觉识别</div>
<div>环境监控：声噪、消防水池监测</div>
<div>管控单位：3#罐区特种管控部门</div>
</div>
</div>
新增页面任务规划与执行流程
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
{/* 机器人图标 */}
<div style={{
position: 'absolute',
bottom: '20%',
right: '25%',
textAlign: 'center'
}}>
<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>
新增页面任务规划与执行流程
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
{/* 绿色圆点标记 */}
<div style={{
position: 'absolute',
bottom: '35%',
left: '45%',
textAlign: 'center'
}}>
新增页面任务规划与执行流程
1 month ago
<div style={{
width: '20px',
height: '20px',
borderRadius: '50%',
新增页面智能巡检——智能巡检范围监控
1 month ago
backgroundColor: 'green',
border: '2px solid white',
boxShadow: '0 0 10px green',
margin: '0 auto 5px'
}}></div>
<div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>高危罐区</div>
</div>
新增页面任务规划与执行流程
1 month ago
新增页面智能巡检——智能巡检范围监控
1 month ago
<div style={{
position: 'absolute',
bottom: '30%',
right: '15%',
textAlign: 'center'
}}>
新增页面任务规划与执行流程
1 month ago
<div style={{
width: '20px',
height: '20px',
borderRadius: '50%',
新增页面智能巡检——智能巡检范围监控
1 month ago
backgroundColor: 'green',
border: '2px solid white',
boxShadow: '0 0 10px green',
margin: '0 auto 5px'
}}></div>
<div style={{ backgroundColor: 'rgba(0, 128, 0, 0.8)', color: 'white', padding: '3px 8px', borderRadius: '15px', fontSize: '11px' }}>常规罐区</div>
</div>
</div>
</Col>
</Row>
</div>
)
新增页面任务规划与执行流程
1 month ago
};
新增页面：巡检内容——温度异常检测
1 month ago
// 智能巡检内容监控中心组件
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 }}>
新增页面——温湿度检测1
1 month ago
<h2 style={{ margin: 0, color: 'black' }}>| 实时监测区</h2>
新增页面：巡检内容——温度异常检测
1 month ago
{/* <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>
新增页面——温湿度检测
1 month ago
<div style={{ width: '65%', padding: 16 }}>
新增页面：巡检内容——温度异常检测
1 month ago
<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>
新增：仪器仪表采集
1 month ago
<tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
新增页面：巡检内容——温度异常检测
1 month ago
<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 '温湿度检测':
新增页面——温湿度检测
1 month ago
// 创建一个React兼容的ECharts组件
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 (
<div
ref={chartRef}
id={id}
style={{ width, height }}
/>
);
};
// 温度仪表盘配置
const temperatureOption = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
新增页面——温湿度检测1
1 month ago
max: 120,
splitNumber: 6,
新增页面——温湿度检测
1 month ago
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: {
新增页面：巡检内容——温度异常检测1
1 month ago
// backgroundColor: 'rgba(4, 95, 94, 0.2)',
// borderColor: 'rgba(4, 95, 94, 0.5)',
// borderWidth: 2,
新增页面——温湿度检测
1 month ago
width: '60%',
lineHeight: 40,
height: 40,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
新增页面：巡检内容——温度异常检测1
1 month ago
return '{value|温度：' + value.toFixed(0) + '℃}';
// return '{value|温度：' + value.toFixed(0) + '℃}{unit|°C}';
新增页面——温湿度检测
1 month ago
},
rich: {
value: {
fontSize: 20,
新增页面：巡检内容——温度异常检测1
1 month ago
fontWeight: '400',
新增页面——温湿度检测
1 month ago
color: 'rgba(4, 95, 94, 1)'
},
unit: {
fontSize: 20,
color: 'rgba(4, 95, 94, 0.8)',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 28,
新增页面：巡检内容——温度异常检测1
1 month ago
name: ''
新增页面——温湿度检测
1 month ago
}
]
}
]
};
// 湿度仪表盘配置
const humidityOption = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
新增页面——温湿度检测1
1 month ago
max: 120,
splitNumber: 6,
新增页面——温湿度检测
1 month ago
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: {
新增页面：巡检内容——温度异常检测1
1 month ago
// backgroundColor: 'rgba(4, 95, 94, 0.2)',
// borderColor: 'rgba(4, 95, 94, 0.5)',
// borderWidth: 2,
新增页面——温湿度检测
1 month ago
width: '60%',
lineHeight: 40,
height: 40,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
新增页面：巡检内容——温度异常检测1
1 month ago
// return '{value|' + value.toFixed(0) + '}{unit|%}';
return '{value|湿度：' + value.toFixed(0) + '%}';
新增页面——温湿度检测
1 month ago
},
rich: {
value: {
fontSize: 20,
新增页面：巡检内容——温度异常检测1
1 month ago
fontWeight: '400',
新增页面——温湿度检测
1 month ago
color: 'rgba(4, 95, 94, 1)'
},
unit: {
fontSize: 20,
color: 'rgba(4, 95, 94, 0.8)',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 55,
新增页面：巡检内容——温度异常检测1
1 month ago
name: ''
新增页面——温湿度检测
1 month ago
}
]
}
]
};
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<h2 style={{ margin: 0, color: 'black' }}>| 温湿度检测</h2>
</div>
<div style={{ display: 'flex', gap: 20 }}>
<div style={{
// border: '1px solid #f0f0f0',
// borderRadius: 8,
// padding: 16,
新增页面——温湿度检测1
1 month ago
width: '35%',
新增页面——温湿度检测
1 month ago
// backgroundColor: '#fafafa'
gap: 20
}}>
<div className={styles.dashboardContainer} style={{ width: '100%', height: 700 }}>
<h3 style={{ margin: '16px', fontSize: 16 }}>实时仪表盘</h3>
{/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
新增页面——温湿度检测1
1 month ago
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
新增页面：巡检管理——实时监控
1 month ago
<TemperatureHumidityGauges temperature={28} humidity={55} width={450} height={350} />
新增页面——温湿度检测
1 month ago
</div>
</div>
<div className={styles.thresholdConfigContainer} style={{ marginTop: 20, padding: 16 }}>
新增页面：巡检内容——温度异常检测1
1 month ago
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>阈值配置区</h3>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 0px', width: 120 }}>保存配置</Button>
</div>
新增页面——温湿度检测
1 month ago
<div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
新增页面：巡检内容——温度异常检测1
1 month ago
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
新增页面——温湿度检测
1 month ago
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>低温预警阈值:</label>
<input
type="text"
value="5°C"
style={{
padding: '4px 8px',
新增页面——温湿度检测1
1 month ago
border: '1px solid rgba(44, 158, 157, 1)',
新增页面——温湿度检测
1 month ago
borderRadius: 4,
新增页面：巡检内容——温度异常检测1
1 month ago
width: '100%'
新增页面——温湿度检测
1 month ago
}}
/>
</div>
新增页面：巡检内容——温度异常检测1
1 month ago
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
新增页面——温湿度检测
1 month ago
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>高温预警阈值:</label>
<input
type="text"
value="30°C"
style={{
padding: '4px 8px',
新增页面——温湿度检测1
1 month ago
border: '1px solid rgba(44, 158, 157, 1)',
新增页面——温湿度检测
1 month ago
borderRadius: 4,
新增页面：巡检内容——温度异常检测1
1 month ago
width: '100%'
新增页面——温湿度检测
1 month ago
}}
/>
</div>
新增页面：巡检内容——温度异常检测1
1 month ago
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
新增页面——温湿度检测
1 month ago
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>湿度预警阈值:</label>
<input
type="text"
value="90%RH"
style={{
padding: '4px 8px',
新增页面——温湿度检测1
1 month ago
border: '1px solid rgba(44, 158, 157, 1)',
新增页面——温湿度检测
1 month ago
borderRadius: 4,
新增页面：巡检内容——温度异常检测1
1 month ago
width: '100%'
新增页面——温湿度检测
1 month ago
}}
/>
</div>
</div>
</div>
</div>
<div className={styles.chartContainer} style={{ width: '65%' }}>
<div style={{
border: '1px solid #f0f0f0',
borderRadius: 8,
padding: 16,
backgroundColor: '#fafafa',
height: '100%'
}}>
<h3 style={{ margin: '0 0 16px 0', fontSize: 16 }}>历史趋势图</h3>
<div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
<div style={{ display: 'flex', gap: 20, marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#1890ff' }}></span>
<span style={{ fontSize: 14, color: '#333' }}>温度(°C)</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ display: 'inline-block', width: 16, height: 3, backgroundColor: '#52c41a' }}></span>
<span style={{ fontSize: 14, color: '#333' }}>湿度(%RH)</span>
</div>
</div>
<div style={{ height: 400, position: 'relative' }}>
{/* 模拟趋势图 */}
<svg width="100%" height="100%" viewBox="0 0 800 400">
{/* 网格线 */}
{[0, 25, 50, 75, 100].map((val, index) => (
<g key={index}>
<line
x1="50"
y1={400 - val * 4}
x2="750"
y2={400 - val * 4}
stroke="#f0f0f0"
strokeWidth="1"
/>
<text x="30" y={400 - val * 4 + 5} fontSize="12" fill="#666" textAnchor="end">
{val}
</text>
</g>
))}
{/* 时间标签 */}
{['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'].map((time, index) => (
<text
key={index}
x={50 + index * 90}
y={390}
fontSize="12"
fill="#666"
textAnchor="middle"
>
{time}
</text>
))}
{/* 温度曲线 */}
<path
d="M50,200 L140,160 L230,180 L320,120 L410,160 L500,140 L590,120 L680,140 L750,100"
stroke="#1890ff"
strokeWidth="2"
fill="none"
/>
{/* 温度数据点 */}
{[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
<circle
key={`temp-${index}`}
cx={x}
cy={[200, 160, 180, 120, 160, 140, 120, 140, 100][index]}
r="4"
fill="#1890ff"
/>
))}
{/* 湿度曲线 */}
<path
d="M50,100 L140,140 L230,120 L320,160 L410,150 L500,180 L590,170 L680,140 L750,130"
stroke="#52c41a"
strokeWidth="2"
fill="none"
/>
{/* 湿度数据点 */}
{[50, 140, 230, 320, 410, 500, 590, 680, 750].map((x, index) => (
<circle
key={`humi-${index}`}
cx={x}
cy={[100, 140, 120, 160, 150, 180, 170, 140, 130][index]}
r="4"
fill="#52c41a"
/>
))}
</svg>
</div>
</div>
</div>
</div>
</div>
</div >
);
新增页面：巡检内容——温度异常检测
1 month ago
case '跑冒滴漏检测':
新增 跑冒滴漏检测页面
1 month ago
return (
<div style={{ padding: '20px', display: 'flex', gap: 20, height: '100%' }}>
<div style={{ marginBottom: '20px', width: '60%', height: '100%' }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
实时检测画面
</div>
<div style={{
display: 'flex',
justifyContent: 'end',
gap: '10px',
marginBottom: '15px'
}}>
<button style={{
padding: '8px 16px',
backgroundColor: '#2c9e9d',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}>红外热成像检测</button>
<button style={{
padding: '8px 16px',
backgroundColor: '#f0f0f0',
color: '#333',
border: '1px solid #d9d9d9',
borderRadius: '4px',
cursor: 'pointer'
}}>DCAM双摄像头分析</button>
</div>
</div>
<div style={{
width: '100%',
height: 'auto',
borderRadius: '8px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5'
}}>
<img
src={newBgImage}
alt="热成像检测画面"
style={{
width: '100%',
height: '100%',
// objectFit: 'cover'
}}
/>
</div>
</div>
<div style={{ width: '40%', height: '100%', display: 'flex', flexDirection: 'column' }}>
<h3>异常记录表格</h3>
<div style={{ overflowX: 'auto' }}>
<table style={{
width: '100%',
borderCollapse: 'collapse',
marginTop: '10px'
}}>
<thead>
新增：仪器仪表采集
1 month ago
<tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
新增 跑冒滴漏检测页面
1 month ago
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>序号</th>
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>故障时间</th>
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>检测区域</th>
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>检测技术</th>
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>处理状态</th>
<th style={{
padding: '10px',
textAlign: 'left',
borderBottom: '1px solid #e8e8e8'
}}>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>1</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>2025-10-16 14:20</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>1#泵房电机</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>红外热成像</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>
<span style={{
color: '#52c41a',
backgroundColor: '#f6ffed',
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>已处理</span>
</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>
<button style={{
padding: '4px 8px',
backgroundColor: '#1890ff',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}}>查看详情</button>
</td>
</tr>
<tr>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>2</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>2025-10-16 14:20</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>2#泵房电机</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>红外热成像</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>
<span style={{
color: '#52c41a',
backgroundColor: '#f6ffed',
padding: '2px 8px',
borderRadius: '4px',
fontSize: '12px'
}}>已处理</span>
</td>
<td style={{
padding: '10px',
borderBottom: '1px solid #e8e8e8'
}}>
<button style={{
padding: '4px 8px',
backgroundColor: '#1890ff',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
}}>查看详情</button>
</td>
</tr>
</tbody>
</table>
</div>
<div style={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
marginTop: 'auto',
gap: '10px'
}}>
<span>共 05 条 10 / page</span>
<div>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>上一页</button>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #1890ff',
backgroundColor: '#1890ff',
color: 'white',
cursor: 'pointer'
}}>1</button>
<span>...</span>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>4</button>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>5</button>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>6</button>
<button style={{
padding: '4px 8px',
margin: '0 2px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>下一页</button>
</div>
</div>
</div>
</div>
);
新增页面：巡检内容——温度异常检测
1 month ago
case '仪器仪表采集':
新增：仪器仪表采集
1 month ago
return (
<div style={{ padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* 顶部批量编辑按钮 */}
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
<div style={{ size: '20px' }}>| 仪器仪表采集</div>
<button style={{
padding: '8px 16px',
backgroundColor: '#2c9e9d',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}>批量设备阈值</button>
</div>
{/* 状态统计卡片 */}
<div style={{ marginBottom: '20px' }}>
<h4 style={{ marginBottom: '10px' }}>状态统计卡片</h4>
<div style={{ display: 'flex', gap: '15px' }}>
{/* 正常仪表卡片 */}
<div style={{
flex: 1,
backgroundColor: '#e6f7ff',
borderRadius: '8px',
padding: '15px',
borderLeft: '4px solid #1890ff',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<div>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>正常仪表</div>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>28</div>
</div>
<div style={{ width: '40px', height: '40px', backgroundColor: '#bae7ff', borderRadius: '50%' }}></div>
</div>
{/* 超限仪表卡片 */}
<div style={{
flex: 1,
backgroundColor: '#fff2e8',
borderRadius: '8px',
padding: '15px',
borderLeft: '4px solid #ff7875',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<div>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>超限仪表</div>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ff7875' }}>2</div>
</div>
<div style={{ width: '40px', height: '40px', backgroundColor: '#ffccc7', borderRadius: '50%' }}></div>
</div>
{/* 待确认卡片 */}
<div style={{
flex: 1,
backgroundColor: '#f6ffed',
borderRadius: '8px',
padding: '15px',
borderLeft: '4px solid #52c41a',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<div>
<div style={{ fontSize: '14px', color: '#666', marginBottom: '5px' }}>待确认</div>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>0</div>
</div>
<div style={{ width: '40px', height: '40px', backgroundColor: '#b7eb8f', borderRadius: '50%' }}></div>
</div>
</div>
</div>
{/* 采集数据列表 */}
<div style={{ marginBottom: '20px' }}>
<h4 style={{ marginBottom: '10px' }}>统计数据列表</h4>
<div style={{ overflow: 'auto' }}>
<table style={{
width: '100%',
borderCollapse: 'collapse',
backgroundColor: '#fff',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
}}>
<thead>
<tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>序号</th>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>仪表名称</th>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>采集值</th>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>设备位置</th>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>状态</th>
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #e8e8e8' }}>报警阈值</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1# 罐液位计</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>8.2m</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>高危罐区 3# 罐</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>
<span style={{ color: '#52c41a' }}>正常</span>
</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8', color: '#1890ff' }}>0-10m</td>
</tr>
<tr>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>2</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>2# 泵出口压力表</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>0.5MPa</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>1# 泵房</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8' }}>
<span style={{ color: '#52c41a' }}>正常</span>
</td>
<td style={{ padding: '12px', borderBottom: '1px solid #e8e8e8', color: '#1890ff' }}>0.4-0.8MPa</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* 分页控件 */}
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 'auto' }}>
<div style={{ marginRight: '20px' }}>共95条 10/95页</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>上一页</button>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#1890ff',
color: '#fff',
cursor: 'pointer'
}}>1</button>
<span>...</span>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>4</button>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>5</button>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>6</button>
<button style={{
padding: '5px 10px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
cursor: 'pointer'
}}>下一页</button>
</div>
</div>
</div>
);
新增页面：巡检内容——温度异常检测
1 month ago
case '环境监测':
return (
新增：环境监测
1 month ago
<div style={{ padding: 0 }}>
<EnvironmentalMonitoring />
新增页面：巡检内容——温度异常检测
1 month ago
</div>
);
default:
return null;
}
};
return (
新增页面——温湿度检测1
1 month ago
<div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10, marginBottom: 20 }}>
新增页面：巡检内容——温度异常检测
1 month ago
<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) => (
新增页面——温湿度检测
1 month ago
<li key={tab} style={{ marginBottom: 22 }}>
新增页面：巡检内容——温度异常检测
1 month ago
<button
onClick={() => handleTabClick(tab)}
新增页面——温湿度检测1
1 month ago
className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
新增页面：巡检内容——温度异常检测
1 month ago
style={{
新增页面——温湿度检测1
1 month ago
backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
tab === '温度异常检测' ? `url(${menuInactiveBg1})` :
tab === '温湿度检测' ? `url(${menuInactiveBg2})` :
tab === '跑冒滴漏检测' ? `url(${menuInactiveBg3})` :
tab === '仪器仪表采集' ? `url(${menuInactiveBg4})` :
tab === '环境监测' ? `url(${menuInactiveBg5})` : `url(${menuInactiveBg2})`
新增页面：巡检内容——温度异常检测
1 month ago
}}
>
{tab}
</button>
</li>
))}
</ul>
</nav>
</div>
<div style={{ flex: 1 }}>
{renderContent()}
</div>
</div>
</div>
);
};
新增页面任务规划与执行流程
1 month ago
// 任务规划与执行流程组件
const TaskPlanningFlow = () => {
return (
新增页面：巡检管理——实时监控
1 month ago
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
新增页面任务规划与执行流程
1 month ago
{/* 顶部标题 */}
<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>
1
1 month ago
<div>• 高度 {'>'} 10m 的罐体：距离罐体2m环绕</div>
新增页面任务规划与执行流程
1 month ago
</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' }}>
1
1 month ago
<div>• 距离障碍物 {'>'} 1.5m：继续沿当前路径行驶</div>
新增页面任务规划与执行流程
1 month ago
<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>
);
};
新增页面智能巡检——智能巡检范围监控
1 month ago
const StandardManagement = () => {
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
// 处理页码变化
const handlePageChange = (page, pageSize) => {
setCurrentPage(page);
setPageSize(pageSize);
};
// 处理每页条数变化
const handlePageSizeChange = (current, size) => {
setPageSize(size);
setCurrentPage(1); // 重置到第一页
};
return (
<div style={{ backgroundColor: '#fff', padding: '20px', borderBottomLeftRadius: '10px', }}>
<Title title={'巡检标准管理'}></Title>
<Row style={{ marginTop: '20px' }}>
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }}>新建方案</Button>
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
</Row>
<Row style={{ marginTop: '20px', minHeight: '450px' }}>
<StandardTable></StandardTable>
</Row>
<Row style={{ marginTop: '20px' }}>
<TablePagination
currentPage={currentPage}
pageSize={pageSize}
total={total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
></TablePagination>
</Row>
</div>
)
}
const DeviceAttributeSettings = () => {
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
const treeData = [
{
title: '发电机区域',
key: '发电机区域',
children: [
{ title: '#1 发电机', key: '#1发电机', },
{ title: '#2 发电机', key: '#2发电机', },
{ title: '#3 发电机', key: '#3发电机', },
{ title: '#4 发电机', key: '#4发电机', },
{ title: '#5 发电机', key: '#5发电机', },
]
},
{
title: '中水处理区',
key: '中水处理区',
children: [
{ title: '中水过滤装置A', key: '中水过滤装置A', },
{ title: '中水过滤装置B', key: '中水过滤装置B', },
]
},
{
title: '除盐水区',
key: '除盐水区',
children: [
{ title: '除盐水泵1', key: '除盐水泵1', },
{ title: '除盐水泵2', key: '除盐水泵2', },
{ title: '除盐水泵3', key: '除盐水泵3', },
]
}]
// 处理页码变化
const handlePageChange = (page, pageSize) => {
setCurrentPage(page);
setPageSize(pageSize);
};
// 处理每页条数变化
const handlePageSizeChange = (current, size) => {
setPageSize(size);
setCurrentPage(1); // 重置到第一页
};
return (
<div style={{ backgroundColor: '#fff', padding: '20px' }}>
<Row>
<Col span={4} style={{ backgroundColor: 'rgb(231, 242, 237)', padding: '20px' }}>
<Title title={'巡检区域&设备'}></Title>
<Search style={{ margin: '20px 0' }}
placeholder={'搜索节点'}
></Search>
<Tree
treeData={treeData}
className={styles['tree']}
checkable
showLine
defaultExpandParent={true}
defaultExpandedKeys={['发电机区域', '中水处理区', '除盐水区',]}
>
</Tree>
</Col>
<Col span={20} style={{ padding: '10px' }}>
<Row style={{ marginBottom: '20px' }}>
<Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>重新选择</Button>
</Row>
<Title title={'#1 发电机'}></Title>
<Row style={{ marginTop: '20px', minHeight: '450px' }}>
<DeviceAttribute></DeviceAttribute>
</Row>
<Row style={{ marginTop: '20px' }}>
<TablePagination
currentPage={currentPage}
pageSize={pageSize}
total={total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
></TablePagination>
</Row>
</Col>
</Row>
</div>
)
}
const items = [
{
label: <MenuBg text={'智能巡检范围监控'}></MenuBg>,
key: '智能巡检范围监控',
},
新增页面任务规划与执行流程
1 month ago
{
label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
key: '任务规划与执行流程',
},
新增：仪器仪表采集
1 month ago
{
label: <MenuBg text={'巡检内容'}></MenuBg>,
key: '巡检内容',
},
新增页面：巡检管理——实时监控
1 month ago
{
label: <MenuBg text={'巡检管理'}></MenuBg>,
key: '巡检管理',
},
智能巡检——机器人智能巡检——数据分析巡检管理页面
1 day ago
{
label: <MenuBg text={'数据分析巡检管理'}></MenuBg>,
key: '数据分析巡检管理',
},
新增页面智能巡检——智能巡检范围监控
1 month ago
]
新增页面：巡检管理——实时监控
1 month ago
const InspectionManagement = () => {
const [activeTab, setActiveTab] = useState('实时监控');
return (
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '600px', marginBottom: 10, borderRadius: '15px' }}>
{/* 顶部按钮 */}
<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']} icon={<IconRefresh />} style={{ backgroundImage: `url(${btnImg2})`, width: 120 }}>刷新数据</Button>
</div>
</div>
{/* 左侧导航 */}
<div style={{ display: 'flex', height: 'calc(100vh - 200px)' }}>
<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: 22 }}>
<button
onClick={() => setActiveTab(tab)}
className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
style={{
backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
tab === '实时监控' ? `url(${menuInactiveBg1})` :
tab === '巡检任务' ? `url(${menuInactiveBg2})` :
`url(${menuInactiveBg3})`
}}
>
{tab}
</button>
</li>
))}
</ul>
</nav>
</div>
{/* 右侧内容区域 */}
<div style={{ flex: 1 }}>
{activeTab === '实时监控' && (
<div>
{/* 搜索栏 */}
<div style={{ display: 'flex', marginBottom: '20px', alignItems: 'center' }}>
<Input placeholder="请输入名称" style={{ width: '200px', marginRight: '15px' }} />
<Select placeholder="区域" style={{ width: '120px', marginRight: '15px' }}>
<Select.Option value="全部">全部</Select.Option>
</Select>
<Select placeholder="任务" style={{ width: '120px', marginRight: '15px' }}>
<Select.Option value="全部">全部</Select.Option>
</Select>
<Select placeholder="设备" style={{ width: '120px', marginRight: '15px' }}>
<Select.Option value="全部">全部</Select.Option>
</Select>
<Button className={styles['addBtn']} icon={<IconSearch />} style={{ backgroundImage: `url(${btnImg1})`, width: 120 }}>查询</Button>
<Button className={styles['resetBtn']} icon={<IconRefresh />} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>重置</Button>
</div>
{/* 内容区域 - 调整高度布局，顶部贴近，底部只留10px空间 */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr 1fr', gap: '10px', marginTop: 0, marginBottom: '10px', height: '100%', minHeight: '0' }}>
{/* 传感器仪表盘 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBottom: '10px', marginTop: 0 }}>传感器仪表盘</h3>
<div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '10px', alignItems: 'center' }}>
<TemperatureHumidityGauges temperature={28} humidity={55} width={240} height={180} />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>甲烷: 0.01%</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>一氧化碳: 0.0ppm</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>分贝值: 69.2db</div>
</div>
</div>
{/* 双面监控区 */}
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBottom: '10px', marginTop: 0 }}>双面监控区</h3>
<div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: '10px' }}>
<div style={{ backgroundColor: '#000', borderRadius: '4px', height: '150px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
<img
src={thermalImage}
alt="红外热成像图"
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 4 }}
/>
</div>
<div style={{ backgroundColor: '#000', borderRadius: '4px', height: '150px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
<img
src={thermalImage}
alt="视频监控画面"
style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 4 }}
/>
</div>
</div>
</div>
{/* 机器人信息和检测设备状态 */}
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '10px' }}>
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, marginBottom: 0, flex: 1, display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBottom: '10px', marginTop: 0 }}>机器人实时信息</h3>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>机器人名称: AAA</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>当前位置: 中控室</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>速度: 0.07m/s</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>当前模式: 巡回检测</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>电量: 85%</div>
<div style={{ backgroundColor: '#fff', padding: '10px', borderRadius: '4px' }}>累计里程: 96km</div>
</div>
</div>
<div style={{ backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '10px 20px 10px 20px', marginTop: 0, flex: 2, display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBottom: '10px', marginTop: 0 }}>检测设备状态</h3>
<Table
dataSource={[
{ key: '1', 序号: 1, 接管设备: '接管设备A', 设备名称: '设备C', 状态: '正常', 检测时间: '2025-10-12 16:40', 检测精度: '已处理' },
{ key: '2', 序号: 2, 接管设备: '接管设备B', 设备名称: '设备C', 状态: '正常', 检测时间: '2025-10-10 09:10', 检测精度: '误报' },
]}
columns={[
{ title: '序号', dataIndex: '序号', key: '序号', width: '40px' },
{ title: '接管设备', dataIndex: '接管设备', key: '接管设备', width: '80px' },
{ title: '设备名称', dataIndex: '设备名称', key: '设备名称', width: '60px' },
{ title: '状态', dataIndex: '状态', key: '状态', width: '60px' },
{ title: '检测时间', dataIndex: '检测时间', key: '检测时间', width: '120px' },
{ title: '检测精度', dataIndex: '检测精度', key: '检测精度', width: '60px' },
]}
pagination={{
total: 85,
pageSize: 10,
current: 8,
showSizeChanger: true,
pageSizeOptions: ['10', '20', '50', '100'],
}}
size="small"
/>
</div>
</div>
</div>
</div>
)}
{activeTab === '巡检任务' && (
巡检任务+报告管理基础框架
4 weeks ago
<div style={{ padding: '20px' }}>
{/* 巡检任务标题栏 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<h3 style={{ margin: 0, color: '#333' }}>巡检任务管理</h3>
<div>
<Button type="primary" icon={<PlusOutlined />} style={{ marginRight: '10px' }}>新建任务</Button>
<Button icon={<ExportOutlined />}>导出任务</Button>
</div>
</div>
{/* 横向时间轴布局 */}
<div style={{ position: 'relative', height: '200px', margin: '40px 0' }}>
{/* 时间轴线 - 横向 */}
<div style={{
position: 'absolute',
height: '6px',
backgroundColor: '#2C9E9D',
left: 0,
right: 0,
top: '50%',
marginTop: '-3px',
borderRadius: '3px'
}}></div>
{/* 任务卡片组 - 上面3个 */}
<div style={{
display: 'flex',
justifyContent: 'space-between',
position: 'relative',
height: '50%',
marginBottom: '20px'
}}>
{[
{
date: '2025/09/12',
title: '罐区A-2小时巡检任务',
startTime: '2025-10-17 09:00',
progress: 75,
abnormalCount: 3
},
{
date: '2025/09/28',
title: '泵房设备安全检查',
startTime: '2025-10-18 14:30',
progress: 100,
abnormalCount: 0
},
{
date: '2025/10/15',
title: '管线压力监测任务',
startTime: '2025-10-19 08:00',
progress: 45,
abnormalCount: 2
}
].map((task, index) => (
<TaskCard key={index} task={task} />
))}
</div>
{/* 任务卡片组 - 下面2个 */}
<div style={{
display: 'flex',
justifyContent: 'center',
position: 'relative',
height: '50%',
gap: '20px'
}}>
{[
{
date: '2025/10/19',
title: '环境参数采集任务',
startTime: '2025-10-20 10:00',
progress: 0,
abnormalCount: 0
},
{
date: '2025/10/20',
title: '安全阀定期检查',
startTime: '2025-10-21 15:00',
progress: 0,
abnormalCount: 0
}
].map((task, index) => (
<div key={index} style={{
position: 'relative',
width: '18%'
}}>
{/* 时间节点 */}
<div style={{
position: 'absolute',
width: '20px',
height: '20px',
backgroundColor: '#2C9E9D',
borderRadius: '50%',
left: '50%',
top: '50%',
marginLeft: '-10px',
marginTop: '-10px',
zIndex: 1
}}></div>
{/* 日期标签 */}
<div style={{
position: 'absolute',
top: '60%',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: '#2C9E9D',
color: 'white',
padding: '5px 10px',
borderRadius: '15px',
fontSize: '12px',
fontWeight: 'bold'
}}>
{task.date}
</div>
{/* 任务卡片 */}
<div style={{
position: 'absolute',
top: 0,
left: '50%',
transform: 'translateX(-50%)',
width: '90%',
backgroundColor: '#f8f9fa',
padding: '15px',
borderRadius: '10px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e9ecef'
}}>
<h4 style={{ margin: '0 0 8px 0', color: '#2C9E9D', fontSize: '14px' }}>任务基本信息</h4>
<p style={{ margin: '5px 0', fontSize: '12px', color: '#333' }}>
<strong>{task.title}</strong>
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
开始时间：{task.startTime}
</p>
<p style={{ margin: '5px 0', fontSize: '11px', color: '#666' }}>
完成进度：{task.progress}%
</p>
<div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
<span style={{ marginRight: '5px', fontSize: '11px' }}>👁️</span>
<span style={{ fontSize: '11px', color: '#666' }}>
异常数：{task.abnormalCount}
</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
<Button size="small" type="primary" style={{
backgroundColor: '#2C9E9D',
borderColor: '#2C9E9D',
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
查看详情
</Button>
<Button size="small" danger style={{
fontSize: '11px',
padding: '0 8px',
height: '24px'
}}>
终止任务
</Button>
</div>
</div>
</div>
))}
</div>
</div>
新增页面：巡检管理——实时监控
1 month ago
</div>
)}
{activeTab === '报告管理' && (
巡检任务+报告管理基础框架
4 weeks ago
<div style={{ padding: '20px' }}>
<h1 style={{ marginBottom: '20px', textAlign: 'left' }}>| 历史报告</h1>
<Button type="primary" style={{ marginBottom: '20px' }}>一键生成分析报告</Button>
<Table
columns={[
{ title: '序号', dataIndex: 'id', key: 'id', align: 'center' },
{ title: '报告名称', dataIndex: 'name', key: 'name', align: 'center' },
{ title: '生成时间', dataIndex: 'time', key: 'time', align: 'center' },
{ title: '区域', dataIndex: 'area', key: 'area', align: 'center' },
{ title: '异常数', dataIndex: 'abnormal', key: 'abnormal', align: 'center' },
{
title: '操作',
key: 'action',
align: 'center',
render: (_, record) => (
<Space size="middle">
<a style={{ color: 'green' }}>查看详情</a>
<a style={{ color: 'red' }}>下载PDF</a>
</Space>
),
},
]}
dataSource={[
{ id: 1, name: 'XL001', time: '2025-10-18 00:28', area: '红色区域', abnormal: '电气专业' },
{ id: 2, name: 'XL002', time: '2025-10-14 03:26', area: '橙色区域', abnormal: '水处理' },
]}
pagination={{
total: 85,
showSizeChanger: true,
showTotal: (total) => `共${total}条`,
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: 10,
}}
bordered
/>
新增页面：巡检管理——实时监控
1 month ago
</div>
)}
</div>
</div>
</div>
);
};
新增页面智能巡检——智能巡检范围监控
1 month ago
const list = {
新增页面：巡检管理——实时监控
1 month ago
'巡检管理': <InspectionManagement />,
新增页面智能巡检——智能巡检范围监控
1 month ago
'巡检标准管理': <StandardManagement />,
'设备属性设置': <DeviceAttributeSettings />,
'智能巡检范围监控': <SmartInspectionRange />,
新增页面：巡检内容——温度异常检测
1 month ago
'巡检内容': <SmartInspectionContent />,
新增页面任务规划与执行流程
1 month ago
'任务规划与执行流程': <TaskPlanningFlow />,
智能巡检——机器人智能巡检——数据分析巡检管理页面
1 day ago
'数据分析巡检管理': <DataAnalysisInspectionManagement />, // 添加新组件
新增页面智能巡检——智能巡检范围监控
1 month ago
}
const InspectionTaskPlan = () => {
新增：仪器仪表采集
1 month ago
const [current, setCurrent] = useState('智能巡检范围监控')
新增页面智能巡检——智能巡检范围监控
1 month ago
const onclick = (e) => {
console.log(e.key)
setCurrent(e.key)
}
return (
<>
<div className={styles['header']}>
<div className={styles['logo']}>
<span style={{ marginLeft: '-20px' }}> 当前:&nbsp;&nbsp;{current}</span>
</div>
<Menu
onClick={onclick}
items={items}
selectedKeys={[current]}
mode={'horizontal'}
style={{ flex: '1' }}
className={styles['menu']}
>
</Menu>
</div>
{list[current]}
</>
)
}
export default InspectionTaskPlan