diff --git a/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.js b/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.js index 55878dd..ea38691 100644 --- a/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.js +++ b/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.js @@ -2,7 +2,7 @@ import styles from './inspectionRecords.less' import titleBg from '@/assets/img/recordTitleBg.png' import {useEffect, useRef, useState} from "react"; -import {Button, Col, DatePicker, Drawer, Input, Menu, Row, Select, Table, Tag, Tree} from "antd"; +import {Button, Col, DatePicker, Drawer, Form, Input, Menu, Row, Select, Table, Tag, Tree,} from "antd"; import {MenuBg, TablePagination} from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan"; import {DownOutlined, PlusOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons"; import {Title} from "@/pages/inspectiontasks/InspectionTasks"; @@ -14,6 +14,8 @@ import record1 from '@/assets/img/record1.png' import record2 from '@/assets/img/record2.png' import record3 from '@/assets/img/record3.png' +const {RangePicker}=DatePicker + const Drawers=(props)=>{ const columns = [ { @@ -283,7 +285,40 @@ const Drawers1=({open,onClose,row})=>{ ) } - +const Drawers2=({open,row,onClose})=>{ + console.log(row) + return( + + + + {row.initialCategory} + {row.keyEquipment} + {row.equipmentNo} + {row.equipmentName} + {row.equipmentStatus} + {row.materialCategory} + {row.priceCategory} + {row.specialEquipmentCategory} + {row.quantity} + {row.unit} + {row.specification} + {row.installationLocation} + {row.sort} + 暂无 + +
+ + +
+
+ ) +} //巡检记录首页 const InspectionRecordHomepage=()=>{ const [data1,setData1]=useState([]) @@ -298,6 +333,9 @@ const InspectionRecordHomepage=()=>{ let chart2=null let chart3=null useEffect(()=>{ + if (!chartRef.current) { + return + } chart=echarts.init(chartRef.current) const option={ // 坐标轴 @@ -358,6 +396,9 @@ const InspectionRecordHomepage=()=>{ }; },[]) useEffect(()=>{ + if (!chartRef1.current) { + return + } chart1=echarts.init(chartRef1.current) const option={ legend:{ @@ -394,6 +435,9 @@ const InspectionRecordHomepage=()=>{ } },[]) useEffect(()=>{ + if (!chartRef2.current) { + return + } chart2=echarts.init(chartRef2.current) const option={ xAxis:{ @@ -434,6 +478,9 @@ const InspectionRecordHomepage=()=>{ } },[]) useEffect(()=>{ + if (!chartRef3.current) { + return + } chart3=echarts.init(chartRef3.current) const option={ legend:{ @@ -1704,97 +1751,143 @@ const InspectionStatusQueryOnTheSameDay=()=>{ //设备台账查询与维护 const EquipmentLedgerQueryAndMaintenance=()=>{ const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(85); // 总条数,实际项目中从接口获取 + const [open,setOpen]=useState(false) + const [row,setRow]=useState({}) // 表格列配置 const columns = [ + { + title: '期初分类', + dataIndex: 'initialCategory', + key: 'initialCategory', + }, + { + title: '重点设备', + dataIndex: 'keyEquipment', + key: 'keyEquipment', + }, { title: '设备编号', - dataIndex: 'equipmentCode', - key: 'equipmentCode', - width: 120, + dataIndex: 'equipmentNo', + key: 'equipmentNo', }, { title: '设备名称', dataIndex: 'equipmentName', key: 'equipmentName', - width: 100, }, { title: '设备状态', - dataIndex: 'status', - key: 'status', - width: 100, - render: (status) => ( - - {status} - - ), + dataIndex: 'equipmentStatus', + key: 'equipmentStatus', }, { - title: '物资分类', + title: '物质分类', dataIndex: 'materialCategory', key: 'materialCategory', - width: 100, }, { title: '价格分类', dataIndex: 'priceCategory', key: 'priceCategory', - width: 100, }, { title: '特种设备分类', dataIndex: 'specialEquipmentCategory', key: 'specialEquipmentCategory', - width: 120, }, { title: '数量', dataIndex: 'quantity', key: 'quantity', - width: 80, - align: 'center', }, { title: '计量单位', dataIndex: 'unit', key: 'unit', - width: 100, + }, + { + title: '规格', + dataIndex: 'specification', + key: 'specification', + }, + { + title: '安装位置', + dataIndex: 'installationLocation', + key: 'installationLocation', + }, + { + title: '排序', + dataIndex: 'sort', + key: 'sort', + }, + { + title: '操作', + key: 'operation', + render: (_,record) => ( +
+ 查看详情 + { + setRow(record) + setOpen(true) + }} style={{color:'#2C9E9D'}}>编辑 + 删除 +
+ ), + align:'center', }, ]; // 表格数据 const dataSource = [ { key: '1', - equipmentCode: '60-1611', - equipmentName: '发电机', - status: '已启用', + initialCategory: '电气系统', + keyEquipment: '是', + equipmentNo: 'eq-f611', + equipmentName: '#1发电机', + equipmentStatus: '已使用', materialCategory: '设备', - priceCategory: 'ne', - specialEquipmentCategory: '发电机', + priceCategory: '机组', + specialEquipmentCategory: '高压电机', quantity: 1, unit: '台', + specification: 'QFZN', + installationLocation: '定子间', + sort: 5, }, { key: '2', - equipmentCode: '20-9722', - equipmentName: '12 ME', - status: '已启用', + initialCategory: '化学系统', + keyEquipment: '否', + equipmentNo: 'eq-p722', + equipmentName: '#2加药泵', + equipmentStatus: '备用', materialCategory: '设备', - priceCategory: 'me', - specialEquipmentCategory: '', - quantity: 5, - unit: '套', + priceCategory: '泵类', + specialEquipmentCategory: '离心泵', + quantity: 1, + unit: '台', + specification: '50m³/h', + installationLocation: '加药间', + sort: 3, }, { key: '3', - equipmentCode: '60-4889', - equipmentName: 'ROReR', - status: '已启用', + initialCategory: '水处理', + keyEquipment: '是', + equipmentNo: 'eq-v833', + equipmentName: '反渗透装置', + equipmentStatus: '已使用', materialCategory: '设备', - priceCategory: 'ae', - specialEquipmentCategory: '', - quantity: 3, - unit: '个', + priceCategory: '容器', + specialEquipmentCategory: '压力容器', + quantity: 1, + unit: '套', + specification: '100t/h', + installationLocation: '水处理间', + sort: 1, }, ]; const rowSelection = { @@ -1833,6 +1926,21 @@ const EquipmentLedgerQueryAndMaintenance=()=>{ } ] + // 处理页码变化 + const handlePageChange = (page, pageSize) => { + setCurrentPage(page); + setPageSize(pageSize); + }; + + // 处理每页条数变化 + const handlePageSizeChange = (current, size) => { + setPageSize(size); + setCurrentPage(1); // 重置到第一页 + }; + const onClose=()=>{ + setOpen(false) + } + return (
@@ -1860,7 +1968,7 @@ const EquipmentLedgerQueryAndMaintenance=()=>{ - + @@ -1904,11 +2012,18 @@ const EquipmentLedgerQueryAndMaintenance=()=>{ dataSource={dataSource} pagination={false} rowSelection={rowSelection} - style={{width:'100%',minHeight:'400px'}} + className={styles['recordTable']} > + - +
@@ -1916,6 +2031,173 @@ const EquipmentLedgerQueryAndMaintenance=()=>{ ) } +//台账维护记录 +const TheLedgerMaintainsRecords=()=>{ + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(85); // 总条数,实际项目中从接口获取 + const dataSource = [ + { + key: '1', + maintenanceRecordId: 'WH-20230519-001', + equipmentName: '#1发电机', + equipmentCategory: '电气系统', + updatedBy: '李婧妍', + maintenanceTime: '2023-05-19 10:30:22', + maintenanceMethod: '修改', + operation: '查看详情' + }, + { + key: '2', + maintenanceRecordId: 'WH-20230518-002', + equipmentName: '手动蝶阀', + equipmentCategory: '化学系统', + updatedBy: '李密', + maintenanceTime: '2023-05-18 09:15:45', + maintenanceMethod: '新增', + operation: '查看详情' + }, + { + key: '3', + maintenanceRecordId: 'WH-20230517-003', + equipmentName: '气动蝶阀', + equipmentCategory: '化学系统', + updatedBy: '赵礼义', + maintenanceTime: '2023-05-17 14:20:10', + maintenanceMethod: '删除', + operation: '查看详情' + }, + { + key: '4', + maintenanceRecordId: 'WH-20230516-004', + equipmentName: '手动球阀', + equipmentCategory: '化学系统', + updatedBy: '孙思达', + maintenanceTime: '2023-05-16 11:05:30', + maintenanceMethod: '修改导入', + operation: '查看详情' + }, + { + key: '5', + maintenanceRecordId: 'WH-20230515-005', + equipmentName: '止回阀', + equipmentCategory: '化学系统', + updatedBy: '郑岩', + maintenanceTime: '2023-05-15 16:40:05', + maintenanceMethod: '模板更新', + operation: '查看详情' + } + ]; + const columns = [ + { + title: '维护记录 ID', + dataIndex: 'maintenanceRecordId', + key: 'maintenanceRecordId', + }, + { + title: '设备名称', + dataIndex: 'equipmentName', + key: 'equipmentName', + }, + { + title: '设备分类', + dataIndex: 'equipmentCategory', + key: 'equipmentCategory', + }, + { + title: '更新人', + dataIndex: 'updatedBy', + key: 'updatedBy', + }, + { + title: '维护时间', + dataIndex: 'maintenanceTime', + key: 'maintenanceTime', + }, + { + title: '维护方式', + dataIndex: 'maintenanceMethod', + key: 'maintenanceMethod', + }, + { + title: '操作', + dataIndex: 'operation', + key: 'operation', + render: (text) => {text}, // 可添加点击事件实现详情查看 + }, + ]; + const rowSelection = { + selectedRowKeys, + onChange: (newSelectedRowKeys) => { + setSelectedRowKeys(newSelectedRowKeys); + } + }; + // 处理页码变化 + const handlePageChange = (page, pageSize) => { + setCurrentPage(page); + setPageSize(pageSize); + }; + + // 处理每页条数变化 + const handlePageSizeChange = (current, size) => { + setPageSize(size); + setCurrentPage(1); // 重置到第一页 + }; + return( +
+ + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+
+ +
+
+ + + +
+ ) +} const items = [ { label: }>, @@ -1940,6 +2222,7 @@ const items = [ key:'设备台账数据', children:[ {label:'设备台账查询与维护',key:'设备台账查询与维护'}, + {label:'台账维护记录',key:'台账维护记录'}, ] }, { @@ -1958,6 +2241,7 @@ const tabList={ '当前巡检状态查询': , '当日巡检状态查询': , '设备台账查询与维护': , + '台账维护记录': , } const InspectionRecords=()=>{ const [current,setCurrent]=useState('巡检记录首页') diff --git a/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less index 1a43295..37f62e0 100644 --- a/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less +++ b/src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less @@ -167,3 +167,44 @@ color:#4E5856; } } +.recordTable{ + width:100%; + min-height:400px; + :global(.ant-table-cell){ + padding:10px 5px !important; + } +} +.drawer2{ + position:relative; + label{ + margin-right: 15px; + color:#999; + font-size: 14px; + } + :global(.ant-drawer-header){ + background-color:#B8E0D833 !important; + } +} +.Drawer2Btn1,.Drawer2Btn2{ + border-radius:4px; + text-align:center; +} +.Drawer2Btn1{ + background: #B7E5D533; + margin-right:10px; + border: 1px solid; + border-image-source: conic-gradient(from 102.75deg at 50% 52.91%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(140, 160, 156, 0.5) 10.52deg, rgba(140, 160, 156, 0.35) 32.12deg, rgba(255, 255, 255, 0.5) 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(140, 160, 156, 0.35) 187.59deg, #F9F9F9 207.58deg, rgba(255, 255, 255, 0.5) 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(140, 160, 156, 0.5) 370.52deg); + border-image-slice: 1; + box-shadow: 0 4px 4px 0 #FFFFFF40 inset; + backdrop-filter: blur(8px); +} +.Drawer2Btn2{ + background: #045F5E80; + border: 1px solid; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%); + border-image-slice: 1; + color:#fff; + box-shadow: 1px 2px 5px 0 #00666540; + backdrop-filter: blur(3.4000000953674316px); + font-size:14px; +}