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

巡检任务计划

Browse Source
main
zjlnb666 1 week ago
parent ae45fdcd7e
commit 5b9db03b1e
3 changed files with 563 additions and 22 deletions
Show Stats Download Patch File Download Diff File

2
src/pages/inspectiontasks/InspectionTasks.js
Unescape Escape View File

@ -50,7 +50,7 @@ const InspectionTasks = () => {
},
Table:{
headerBg:'#F0F7F7',
}
},
},
};
const onChange=()=>{

555
src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js
Unescape Escape View File

@ -1,4 +1,4 @@
import {Button, Col, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tree} from "antd";
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";
@ -15,6 +15,7 @@ import {
PlusOutlined,
RedoOutlined
} from "@ant-design/icons";
const {Search}=Input
const MenuBg=(props)=>{
return (
<div className={styles["parallelogram-container"]}>
@ -24,6 +25,77 @@ const MenuBg=(props)=>{
</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 EmployeeTable = () => {
// 状态管理
@ -486,6 +558,8 @@ const TimeTable=()=>{
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: '序号',
@ -560,13 +634,6 @@ const TimeTable=()=>{
),
},
]
// 选择框配置
// const rowSelection = {
// selectedRowKeys,
// onChange: (newSelectedRowKeys) => {
// setSelectedRowKeys(newSelectedRowKeys);
// },
// };
const fetchTableData=()=>{
try{
setLoading(true)
@ -581,6 +648,7 @@ const TimeTable=()=>{
deviceNum: '22',
lookNum: 3,
status: 'true',
time:'2025-03-31'
},
{
key: '2',
@ -592,6 +660,7 @@ const TimeTable=()=>{
deviceNum: '22',
lookNum: 3,
status: 'true',
time:'2025-05-31'
},
@ -609,6 +678,182 @@ const TimeTable=()=>{
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: 60,
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) => {
// 预留查看详情逻辑
@ -626,12 +871,14 @@ const TimeTable=()=>{
// 预留删除逻辑
console.log('删除:', record);
};
return(
// 渲染表格
return (
<Table
// rowSelection={{
// type: 'checkbox',
// ...rowSelection,
// }}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={columns}
dataSource={dataSource}
loading={loading}
@ -640,10 +887,154 @@ const TimeTable=()=>{
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%',}}
/>
);
}
// 分页组件
const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
return (
<div style={{ textAlign: 'right', marginTop: 16 ,width:'100%'}}>
<Pagination
@ -918,7 +1309,9 @@ const PatrolRouteQuery=()=>{
</Button>
</Row>
<Row style={{marginTop:'20px',minHeight:'550px'}}>
<TimeTable></TimeTable>
<TimeTable>
</TimeTable>
</Row>
<Row style={{marginTop:'20px'}}>
<TablePagination
@ -935,6 +1328,129 @@ const PatrolRouteQuery=()=>{
</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={'人员管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
@ -953,7 +1469,9 @@ const items = [
label:<MenuBg text={'巡检路线管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
key:'巡检路线管理',
children: [
{label:'巡视路线查询',key:'巡视路线查询'}
{label:'巡视路线查询',key:'巡视路线查询'},
{label:'巡检标准管理',key:'巡检标准管理'},
{label:'设备属性设置',key:'设备属性设置'},
]
}
]
@ -962,8 +1480,8 @@ const list={
'班组管理':<ClassMange/>,
'排班管理':<TimeMange/>,
'巡视路线查询':<PatrolRouteQuery/>,
'巡检标准管理':<StandardManagement/>,
'设备属性设置':<DeviceAttributeSettings/>,
}
const InspectionTaskPlan=()=>{
const [current,setCurrent]=useState('人员管理')
@ -985,7 +1503,6 @@ const InspectionTaskPlan=()=>{
mode={'horizontal'}
style={{flex: '1'}}
className={styles['menu']}
>
</Menu>
</div>

26
src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less
Unescape Escape View File

@ -97,7 +97,7 @@
background-size:cover;
background-position:center;
color:#000;
opacity:0.7;
//opacity:0.7;
border-radius:4px;
width: 88px;
height: 36px;
@ -146,3 +146,27 @@
border-inline-end:none !important;
}
}
.font1{
color: #999999;
font-size: 14px;
}
.box{
display:flex;
flex-wrap:wrap;
margin:20px 0;
}
.tag{
margin-right:20px;
margin-bottom: 10px;
}
.ul{
li{
margin-bottom: 10px;
}
}
.customDrawer{
:global(.ant-drawer-header){
background-color:#B8E0D833 !important;
}
}

Write Preview
Loading…
Cancel
Save