|
|
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";
|
|
|
import EnvironmentalMonitoring from "../EnvironmentalMonitoring/EnvironmentalMonitoring";
|
|
|
import btnImg1 from '@/assets/img/planBtn1.png'
|
|
|
import btnImg2 from '@/assets/img/planBtn2.png'
|
|
|
import btnImg3 from '@/assets/img/planBtn3.png'
|
|
|
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' // 环境监测未激活背景图
|
|
|
import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
|
|
|
import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.png'
|
|
|
import newBgImage from '@/assets/img/a858e701a4fde498b9c3cc56ab2b62693055dee1.png'
|
|
|
|
|
|
import paibanBg from '@/assets/img/paiban.png'
|
|
|
import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
|
|
|
import taskPlanBg from '@/assets/img/image 674 1.svg'
|
|
|
import { DeleteOutlined, DownOutlined, EditOutlined, ExportOutlined, EyeOutlined, PlusOutlined, RedoOutlined, ReloadOutlined as IconRefresh, SearchOutlined as IconSearch } from "@ant-design/icons";
|
|
|
import TemperatureHumidityGauges from '../ReusableGauges/ReusableGauges';
|
|
|
// 新增导入
|
|
|
import DataAnalysisInspectionManagement from './DataAnalysisInspectionManagement';
|
|
|
const { Search } = Input
|
|
|
|
|
|
// 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>
|
|
|
);
|
|
|
};
|
|
|
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>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
|
|
|
// TimeMange component removed
|
|
|
// PatrolRouteQuery component removed
|
|
|
|
|
|
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 (
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
|
|
|
<Row gutter={[16, 16]}>
|
|
|
{/* 左侧树形结构 */}
|
|
|
<Col span={6}>
|
|
|
<div style={{
|
|
|
backgroundColor: '#E7F2ED',
|
|
|
borderRadius: '10px',
|
|
|
padding: '15px',
|
|
|
height: '100%',
|
|
|
border: '1px solid rgba(0, 102, 101, 0.2)'
|
|
|
}}>
|
|
|
<div style={{
|
|
|
fontSize: '16px',
|
|
|
fontWeight: 'bold',
|
|
|
color: '#006665',
|
|
|
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}>
|
|
|
<div style={{
|
|
|
position: 'relative',
|
|
|
height: '631px',
|
|
|
borderRadius: '10px',
|
|
|
overflow: 'hidden',
|
|
|
border: '1px solid rgba(0, 102, 101, 0.2)'
|
|
|
}}>
|
|
|
{/* 背景图 */}
|
|
|
<img
|
|
|
src={inspectionBg}
|
|
|
alt="智能巡检范围监控"
|
|
|
style={{
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
objectFit: 'cover'
|
|
|
}}
|
|
|
/>
|
|
|
|
|
|
{/* 区域基础信息框 */}
|
|
|
<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>
|
|
|
|
|
|
{/* 巡检覆盖清单框 */}
|
|
|
<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>
|
|
|
|
|
|
{/* 机器人图标 */}
|
|
|
<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>
|
|
|
|
|
|
{/* 绿色圆点标记 */}
|
|
|
<div style={{
|
|
|
position: 'absolute',
|
|
|
bottom: '35%',
|
|
|
left: '45%',
|
|
|
textAlign: 'center'
|
|
|
}}>
|
|
|
<div style={{
|
|
|
width: '20px',
|
|
|
height: '20px',
|
|
|
borderRadius: '50%',
|
|
|
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 style={{
|
|
|
position: 'absolute',
|
|
|
bottom: '30%',
|
|
|
right: '15%',
|
|
|
textAlign: 'center'
|
|
|
}}>
|
|
|
<div style={{
|
|
|
width: '20px',
|
|
|
height: '20px',
|
|
|
borderRadius: '50%',
|
|
|
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>
|
|
|
)
|
|
|
};
|
|
|
|
|
|
// 智能巡检内容监控中心组件
|
|
|
const SmartInspectionContent = () => {
|
|
|
const [activeTab, setActiveTab] = useState('温度异常检测');
|
|
|
const [currentPage, setCurrentPage] = useState(6);
|
|
|
|
|
|
const handleTabClick = (tab) => {
|
|
|
setActiveTab(tab);
|
|
|
};
|
|
|
|
|
|
const handlePageChange = (page) => {
|
|
|
setCurrentPage(page);
|
|
|
};
|
|
|
|
|
|
const renderContent = () => {
|
|
|
switch (activeTab) {
|
|
|
case '温度异常检测':
|
|
|
return (
|
|
|
<div style={{ padding: 20 }}>
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
|
|
<h2 style={{ margin: 0, color: 'black' }}>| 实时监测区</h2>
|
|
|
{/* <div style={{ display: 'flex', gap: 10 }}>
|
|
|
<button style={{
|
|
|
backgroundColor: '#52c41a',
|
|
|
color: 'white',
|
|
|
border: 'none',
|
|
|
padding: '8px 16px',
|
|
|
borderRadius: 4,
|
|
|
cursor: 'pointer',
|
|
|
fontWeight: 'bold'
|
|
|
}}>
|
|
|
实时刷新
|
|
|
</button>
|
|
|
<button style={{
|
|
|
backgroundColor: '#1890ff',
|
|
|
color: 'white',
|
|
|
border: 'none',
|
|
|
padding: '8px 16px',
|
|
|
borderRadius: 4,
|
|
|
cursor: 'pointer'
|
|
|
}}>
|
|
|
导出检测报告
|
|
|
</button>
|
|
|
<button style={{
|
|
|
backgroundColor: '#722ed1',
|
|
|
color: 'white',
|
|
|
border: 'none',
|
|
|
padding: '8px 16px',
|
|
|
borderRadius: 4,
|
|
|
cursor: 'pointer'
|
|
|
}}>
|
|
|
报警设置
|
|
|
</button>
|
|
|
</div> */}
|
|
|
</div>
|
|
|
|
|
|
<div style={{ display: 'flex', gap: 20 }}>
|
|
|
<div style={{
|
|
|
border: '1px solid #f0f0f0',
|
|
|
borderRadius: 8,
|
|
|
padding: 16,
|
|
|
width: '35%',
|
|
|
backgroundColor: '#fafafa'
|
|
|
}}>
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
<img
|
|
|
src={thermalImage}
|
|
|
alt="红外热成像图"
|
|
|
style={{ width: '100%', height: 'auto', borderRadius: 4 }}
|
|
|
/>
|
|
|
<div style={{
|
|
|
position: 'absolute',
|
|
|
top: 10,
|
|
|
right: 10,
|
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
|
color: 'white',
|
|
|
padding: '4px 8px',
|
|
|
borderRadius: 4,
|
|
|
fontSize: 12
|
|
|
}}>
|
|
|
当前最高温: 89°C
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style={{ marginTop: 12 }}>
|
|
|
<p style={{ margin: '8px 0', fontSize: 14 }}>实时温度: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>89°C</span></p>
|
|
|
<p style={{ margin: '8px 0', fontSize: 14 }}>高温异常: <span style={{ color: '#ff4d4f', fontWeight: 'bold' }}>80°C</span></p>
|
|
|
<p style={{ margin: '8px 0', fontSize: 14, color: '#666' }}>当前监测区域: 罐区管道连接处检测</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style={{ width: '65%', padding: 16 }}>
|
|
|
<div style={{
|
|
|
border: '1px solid #f0f0f0',
|
|
|
borderRadius: 8,
|
|
|
padding: 16,
|
|
|
marginBottom: 20,
|
|
|
backgroundColor: '#fafafa'
|
|
|
}}>
|
|
|
<h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>检测原理说明</h3>
|
|
|
<p style={{
|
|
|
margin: 0,
|
|
|
lineHeight: 1.6,
|
|
|
color: '#333',
|
|
|
backgroundColor: 'white',
|
|
|
padding: 12,
|
|
|
borderRadius: 4,
|
|
|
border: '1px solid #e8e8e8'
|
|
|
}}>
|
|
|
"搭载红外热成像测温仪，覆盖电缆、胶管、设备高温点；温度达到阈值时自动上报故障，同步录制热成像/可见光视频，为故障分析提供数据支撑。"
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div style={{
|
|
|
border: '1px solid #f0f0f0',
|
|
|
borderRadius: 8,
|
|
|
padding: 16,
|
|
|
backgroundColor: '#fafafa'
|
|
|
}}>
|
|
|
<h3 style={{ margin: '0 0 12px 0', fontSize: 16 }}>异常历史记录</h3>
|
|
|
<div style={{ overflowX: 'auto' }}>
|
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', backgroundColor: 'white' }}>
|
|
|
<thead>
|
|
|
<tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
|
|
|
<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 '温湿度检测':
|
|
|
// 创建一个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,
|
|
|
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: {
|
|
|
// backgroundColor: 'rgba(4, 95, 94, 0.2)',
|
|
|
// borderColor: 'rgba(4, 95, 94, 0.5)',
|
|
|
// borderWidth: 2,
|
|
|
width: '60%',
|
|
|
lineHeight: 40,
|
|
|
height: 40,
|
|
|
borderRadius: 8,
|
|
|
offsetCenter: [0, '35%'],
|
|
|
valueAnimation: true,
|
|
|
formatter: function (value) {
|
|
|
return '{value|温度：' + value.toFixed(0) + '℃}';
|
|
|
// return '{value|温度：' + value.toFixed(0) + '℃}{unit|°C}';
|
|
|
},
|
|
|
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: 28,
|
|
|
name: ''
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
// 湿度仪表盘配置
|
|
|
const humidityOption = {
|
|
|
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: {
|
|
|
// backgroundColor: 'rgba(4, 95, 94, 0.2)',
|
|
|
// borderColor: 'rgba(4, 95, 94, 0.5)',
|
|
|
// borderWidth: 2,
|
|
|
width: '60%',
|
|
|
lineHeight: 40,
|
|
|
height: 40,
|
|
|
borderRadius: 8,
|
|
|
offsetCenter: [0, '35%'],
|
|
|
valueAnimation: true,
|
|
|
formatter: function (value) {
|
|
|
// return '{value|' + value.toFixed(0) + '}{unit|%}';
|
|
|
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: 55,
|
|
|
name: ''
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
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,
|
|
|
width: '35%',
|
|
|
// backgroundColor: '#fafafa'
|
|
|
gap: 20
|
|
|
}}>
|
|
|
<div className={styles.dashboardContainer} style={{ width: '100%', height: 700 }}>
|
|
|
<h3 style={{ margin: '16px', fontSize: 16 }}>实时仪表盘</h3>
|
|
|
{/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
|
|
|
<TemperatureHumidityGauges temperature={28} humidity={55} width={450} height={350} />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className={styles.thresholdConfigContainer} style={{ marginTop: 20, padding: 16 }}>
|
|
|
<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>
|
|
|
<div style={{ backgroundColor: 'white', padding: 16, borderRadius: 4 }}>
|
|
|
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>低温预警阈值:</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value="5°C"
|
|
|
style={{
|
|
|
padding: '4px 8px',
|
|
|
border: '1px solid rgba(44, 158, 157, 1)',
|
|
|
borderRadius: 4,
|
|
|
width: '100%'
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>高温预警阈值:</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value="30°C"
|
|
|
style={{
|
|
|
padding: '4px 8px',
|
|
|
border: '1px solid rgba(44, 158, 157, 1)',
|
|
|
borderRadius: 4,
|
|
|
width: '100%'
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
<label style={{ display: 'inline-block', width: 120, fontSize: 14 }}>湿度预警阈值:</label>
|
|
|
<input
|
|
|
type="text"
|
|
|
value="90%RH"
|
|
|
style={{
|
|
|
padding: '4px 8px',
|
|
|
border: '1px solid rgba(44, 158, 157, 1)',
|
|
|
borderRadius: 4,
|
|
|
width: '100%'
|
|
|
}}
|
|
|
/>
|
|
|
</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 >
|
|
|
);
|
|
|
case '跑冒滴漏检测':
|
|
|
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>
|
|
|
<tr style={{ backgroundColor: 'rgba(240, 247, 247, 1)' }}>
|
|
|
<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>
|
|
|
);
|
|
|
case '仪器仪表采集':
|
|
|
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>
|
|
|
);
|
|
|
case '环境监测':
|
|
|
return (
|
|
|
<div style={{ padding: 0 }}>
|
|
|
<EnvironmentalMonitoring />
|
|
|
</div>
|
|
|
);
|
|
|
default:
|
|
|
return null;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10, marginBottom: 20 }}>
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
justifyContent: 'space-between',
|
|
|
alignItems: 'center',
|
|
|
backgroundColor: '#fff',
|
|
|
padding: '16px 24px',
|
|
|
color: 'black',
|
|
|
fontWeight: '400',
|
|
|
fontSize: 18
|
|
|
}}>
|
|
|
<div>
|
|
|
| 智能巡检内容监控中心
|
|
|
</div>
|
|
|
<div>
|
|
|
<Button className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>实时刷新</Button>
|
|
|
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px', width: 120 }}>导出巡检报告</Button>
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>报警设置</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
<div style={{
|
|
|
width: 240,
|
|
|
backgroundColor: '#fff',
|
|
|
minHeight: 'calc(100vh - 60px)',
|
|
|
padding: 16
|
|
|
}}>
|
|
|
<nav>
|
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|
|
{['温度异常检测', '温湿度检测', '跑冒滴漏检测', '仪器仪表采集', '环境监测'].map((tab) => (
|
|
|
<li key={tab} style={{ marginBottom: 22 }}>
|
|
|
<button
|
|
|
onClick={() => handleTabClick(tab)}
|
|
|
className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
|
|
|
style={{
|
|
|
backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
|
|
|
tab === '温度异常检测' ? `url(${menuInactiveBg1})` :
|
|
|
tab === '温湿度检测' ? `url(${menuInactiveBg2})` :
|
|
|
tab === '跑冒滴漏检测' ? `url(${menuInactiveBg3})` :
|
|
|
tab === '仪器仪表采集' ? `url(${menuInactiveBg4})` :
|
|
|
tab === '环境监测' ? `url(${menuInactiveBg5})` : `url(${menuInactiveBg2})`
|
|
|
}}
|
|
|
>
|
|
|
{tab}
|
|
|
</button>
|
|
|
</li>
|
|
|
))}
|
|
|
</ul>
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
<div style={{ flex: 1 }}>
|
|
|
{renderContent()}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
// 任务规划与执行流程组件
|
|
|
const TaskPlanningFlow = () => {
|
|
|
return (
|
|
|
<div style={{ backgroundColor: '#fff', padding: '20px', minHeight: '631px', borderRadius: '10px', marginBottom: 20 }}>
|
|
|
{/* 顶部标题 */}
|
|
|
<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>
|
|
|
<div>• 高度 {'>'} 10m 的罐体：距离罐体2m环绕</div>
|
|
|
</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>• 距离障碍物 {'>'} 1.5m：继续沿当前路径行驶</div>
|
|
|
<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>
|
|
|
);
|
|
|
};
|
|
|
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: '智能巡检范围监控',
|
|
|
},
|
|
|
{
|
|
|
label: <MenuBg text={'任务规划与执行流程'}></MenuBg>,
|
|
|
key: '任务规划与执行流程',
|
|
|
},
|
|
|
{
|
|
|
label: <MenuBg text={'巡检内容'}></MenuBg>,
|
|
|
key: '巡检内容',
|
|
|
},
|
|
|
{
|
|
|
label: <MenuBg text={'巡检管理'}></MenuBg>,
|
|
|
key: '巡检管理',
|
|
|
},
|
|
|
{
|
|
|
label: <MenuBg text={'数据分析巡检管理'}></MenuBg>,
|
|
|
key: '数据分析巡检管理',
|
|
|
},
|
|
|
]
|
|
|
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 === '巡检任务' && (
|
|
|
<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>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{activeTab === '报告管理' && (
|
|
|
<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
|
|
|
/>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const list = {
|
|
|
'巡检管理': <InspectionManagement />,
|
|
|
'巡检标准管理': <StandardManagement />,
|
|
|
'设备属性设置': <DeviceAttributeSettings />,
|
|
|
'智能巡检范围监控': <SmartInspectionRange />,
|
|
|
'巡检内容': <SmartInspectionContent />,
|
|
|
'任务规划与执行流程': <TaskPlanningFlow />,
|
|
|
'数据分析巡检管理': <DataAnalysisInspectionManagement />, // 添加新组件
|
|
|
}
|
|
|
const InspectionTaskPlan = () => {
|
|
|
const [current, setCurrent] = useState('智能巡检范围监控')
|
|
|
const onclick = (e) => {
|
|
|
console.log(e.key)
|
|
|
setCurrent(e.key)
|
|
|
}
|
|
|
return (
|
|
|
<>
|
|
|
<div className={styles['header']}>
|
|
|
<div className={styles['logo']}>
|
|
|
<span style={{ marginLeft: '-20px' }}> 当前: {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
|
