From 5b9db03b1e3bd52ef73062c930e8504abc449644 Mon Sep 17 00:00:00 2001 From: zjlnb666 <14659021+zhangjianlong666@user.noreply.gitee.com> Date: Mon, 20 Oct 2025 10:51:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A1=E6=A3=80=E4=BB=BB=E5=8A=A1=E8=AE=A1?= =?UTF-8?q?=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/inspectiontasks/InspectionTasks.js | 2 +- .../Inspectiontaskplan/InspectionTaskPlan.js | 557 +++++++++++++++++- .../InspectionTaskPlan.less | 26 +- 3 files changed, 563 insertions(+), 22 deletions(-) diff --git a/src/pages/inspectiontasks/InspectionTasks.js b/src/pages/inspectiontasks/InspectionTasks.js index f0cbcba..7199355 100644 --- a/src/pages/inspectiontasks/InspectionTasks.js +++ b/src/pages/inspectiontasks/InspectionTasks.js @@ -50,7 +50,7 @@ const InspectionTasks = () => { }, Table:{ headerBg:'#F0F7F7', - } + }, }, }; const onChange=()=>{ diff --git a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js index 2f96ecc..1062c89 100644 --- a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js +++ b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js @@ -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 (
@@ -24,6 +25,77 @@ const MenuBg=(props)=>{
) } +//抽屉 +const Drawers=(props)=>{ + + return ( + +
+ + + + + 所属班次 + {props.row?.shifts} + + + 路线名称 + {props.row?.name} + + + + + 所属专业 + {props.row?.affiliation} + + + 创建时间 + {props.row?.time} + + + + + +
+ 发电机 + 中水处区 + 1#增压风机变频器 + 1#炉右上炉膛温度 + 1#冷干机 +
+ + + 发电机 + + +
    +
  • 外观检查：有无破损、油污
    • +
  • 温度检测：轴承温度≤70℃，定子温度≤105℃
    • +
+ + + 1#增压风机变频器 + + +
    +
  • 运行指示灯：是否正常亮起
    • +
  • 散热风扇：是否正常转动
    • +
  • 输出电压：380V±5%
    • +
+ + +
+ + + ) +} // 员工表格组件 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( + <> + + setOpen(false)} + row={row} + > + + + + + ) +} +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) => ( + + ) + }, + { + title: '最后更新时间', + dataIndex: 'time', + key: 'time', + align:'center', + }, + { + title: '操作', + key: 'action', + align:'center', + render: (_, record) => ( + + handleView(record)} style={{ color: '#2C9E9D' }}> + 查看详情 + + handleEdit(record)} style={{ color: '#2C9E9D' }}> + 编辑 + + handleDelete(record)} style={{ color: '#ff4d4f' }}> + 删除 + + + ), + }, + ]; + + // 选择框配置 + 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 (
{ 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( +
+
上限：{value['上限']}
+
下限：{value['下限']}
+
单位：{value['单位']}
+
+ ) + } + }, + { + title: '测点名称', + dataIndex: 'point', + key: 'point', + align:'center', + }, + { + title: '操作', + key: 'action', + align:'center', + render: (_, record) => ( + + handleEdit(record)} style={{ color: '#2C9E9D' }}> + 编辑 + + handleDelete(record)} style={{ color: '#ff4d4f' }}> + 删除 + + + ), + }, + ] + // 获取表格数据 + 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 ( +
+ ); } // 分页组件 -const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => { +export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => { return (
{ - + + + {
) } +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( +
+ + + + + + + + + + + +
+ ) +} +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( +
+ +
+ + + + + + + + + + + + + + + + + + + + + ) +} const items = [ { label: }>, @@ -953,7 +1469,9 @@ const items = [ label:}>, key:'巡检路线管理', children: [ - {label:'巡视路线查询',key:'巡视路线查询'} + {label:'巡视路线查询',key:'巡视路线查询'}, + {label:'巡检标准管理',key:'巡检标准管理'}, + {label:'设备属性设置',key:'设备属性设置'}, ] } ] @@ -962,8 +1480,8 @@ const list={ '班组管理':, '排班管理':, '巡视路线查询':, - - + '巡检标准管理':, + '设备属性设置':, } const InspectionTaskPlan=()=>{ const [current,setCurrent]=useState('人员管理') @@ -985,7 +1503,6 @@ const InspectionTaskPlan=()=>{ mode={'horizontal'} style={{flex: '1'}} className={styles['menu']} - > diff --git a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less index aa0e300..853f458 100644 --- a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less +++ b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less @@ -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; + } +}