台帐维护记录

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})=>{
         </Drawer>
     )
 }
-
+const Drawers2=({open,row,onClose})=>{
+    console.log(row)
+    return(
+        <Drawer
+            title={'编辑'}
+            width={300}
+            open={open}
+            onClose={onClose}
+            className={styles['drawer2']}
+        >
+            <Title title={'基本信息'}></Title>
+            <Row gutter={[0,20]} style={{marginTop:'20px'}}>
+                <Col span={24}><label htmlFor="">期初分类:</label><span>{row.initialCategory}</span></Col>
+                <Col span={24}><label htmlFor="">重点设备:</label><span>{row.keyEquipment}</span></Col>
+                <Col span={24}><label htmlFor="">设备编号:</label><span>{row.equipmentNo}</span></Col>
+                <Col span={24}><label htmlFor="">设备名称:</label><span>{row.equipmentName}</span></Col>
+                <Col span={24}><label htmlFor="">设备状态:</label><span>{row.equipmentStatus}</span></Col>
+                <Col span={24}><label htmlFor="">物资分类:</label><span>{row.materialCategory}</span></Col>
+                <Col span={24}><label htmlFor="">价格分类:</label><span>{row.priceCategory}</span></Col>
+                <Col span={24}><label htmlFor="">特种设备分类:</label><span>{row.specialEquipmentCategory}</span></Col>
+                <Col span={24}><label htmlFor="">数量:</label><span>{row.quantity}</span></Col>
+                <Col span={24}><label htmlFor="">计量单位:</label><span>{row.unit}</span></Col>
+                <Col span={24}><label htmlFor="">规格:</label><span>{row.specification}</span></Col>
+                <Col span={24}><label htmlFor="">安装位置:</label><span>{row.installationLocation}</span></Col>
+                <Col span={24}><label htmlFor="">排序:</label><span>{row.sort}</span></Col>
+                <Col span={24}><label htmlFor="">备注:</label><span>暂无</span></Col>
+            </Row>
+            <div style={{position:'absolute',bottom:'20px',right:'20px'}}>
+                <Button className={styles['Drawer2Btn1']}>取消</Button>
+                <Button className={styles['Drawer2Btn2']}>保存</Button>
+            </div>
+        </Drawer>
+    )
+}
 //巡检记录首页
 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',
+            dataIndex: 'equipmentNo',
-            key: 'equipmentCode',
+            key: 'equipmentNo',
-            width: 120,
         },
         {
             title: '设备名称',
             dataIndex: 'equipmentName',
             key: 'equipmentName',
-            width: 100,
         },
         {
             title: '设备状态',
-            dataIndex: 'status',
+            dataIndex: 'equipmentStatus',
-            key: 'status',
+            key: 'equipmentStatus',
-            width: 100,
-            render: (status) => (
-                <Tag color={status === '已启用' ? 'green' : 'blue'}>
-                    {status}
-                </Tag>
-            ),
         },
         {
-            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) => (
+                <div style={{display:'flex', justifyContent:'space-between'}}>
+                    <a style={{color:'#2C9E9D'}}>查看详情</a>
+                    <a onClick={()=>{
+                        setRow(record)
+                        setOpen(true)
+                    }} style={{color:'#2C9E9D'}}>编辑</a>
+                    <a style={{ color: 'red' }}>删除</a>
+                </div>
+            ),
+            align:'center',
         },
     ];
     // 表格数据
     const dataSource = [
         {
             key: '1',
-            equipmentCode: '60-1611',
+            initialCategory: '电气系统',
-            equipmentName: '发电机',
+            keyEquipment: '是',
-            status: '已启用',
+            equipmentNo: 'eq-f611',
+            equipmentName: '#1发电机',
+            equipmentStatus: '已使用',
             materialCategory: '设备',
-            priceCategory: 'ne',
+            priceCategory: '机组',
-            specialEquipmentCategory: '发电机',
+            specialEquipmentCategory: '高压电机',
             quantity: 1,
             unit: '台',
+            specification: 'QFZN',
+            installationLocation: '定子间',
+            sort: 5,
         },
         {
             key: '2',
-            equipmentCode: '20-9722',
+            initialCategory: '化学系统',
-            equipmentName: '12 ME',
+            keyEquipment: '否',
-            status: '已启用',
+            equipmentNo: 'eq-p722',
+            equipmentName: '#2加药泵',
+            equipmentStatus: '备用',
             materialCategory: '设备',
-            priceCategory: 'me',
+            priceCategory: '泵类',
-            specialEquipmentCategory: '',
+            specialEquipmentCategory: '离心泵',
-            quantity: 5,
+            quantity: 1,
-            unit: '套',
+            unit: '台',
+            specification: '50m³/h',
+            installationLocation: '加药间',
+            sort: 3,
         },
         {
             key: '3',
-            equipmentCode: '60-4889',
+            initialCategory: '水处理',
-            equipmentName: 'ROReR',
+            keyEquipment: '是',
-            status: '已启用',
+            equipmentNo: 'eq-v833',
+            equipmentName: '反渗透装置',
+            equipmentStatus: '已使用',
             materialCategory: '设备',
-            priceCategory: 'ae',
+            priceCategory: '容器',
-            specialEquipmentCategory: '',
+            specialEquipmentCategory: '压力容器',
-            quantity: 3,
+            quantity: 1,
-            unit: '个',
+            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 (
         <div style={{backgroundColor:'#fff',padding:'20px'}}>
             <Row gutter={20} >
@@ -1860,7 +1968,7 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
                                 <Button icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']} style={{backgroundImage: `url(${btnImg3})`}}>重置</Button>
                             </Col>
                         </Row>
-                        <Row wrap={true} style={{margin:'20px 0',borderBottom:'1px solid #eee',paddingBottom:'20px'}} gutter={[0,20]} className={styles['selectForm']}>
+                        <Row wrap={true} style={{marginTop:'20px',marginBottom:'20px',borderBottom:'1px solid #eee',paddingBottom:'20px'}} gutter={[0,20]} className={styles['selectForm']}>
                             <Col span={6}>
                                 <label htmlFor="">系统分类:</label>
                                 <Select defaultValue={'全部'} style={{width:'132px',marginLeft:'15px'}}></Select>
@@ -1904,11 +2012,18 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
                                 dataSource={dataSource}
                                 pagination={false}
                                 rowSelection={rowSelection}
-                                style={{width:'100%',minHeight:'400px'}}
+                                className={styles['recordTable']}
                             ></Table>
+                            <Drawers2 open={open} onClose={onClose} row={row}></Drawers2>
                         </Row>
                         <Row>
-
+                            <TablePagination
+                                currentPage={currentPage}
+                                pageSize={pageSize}
+                                total={total}
+                                onPageChange={handlePageChange}
+                                onPageSizeChange={handlePageSizeChange}
+                            ></TablePagination>
                         </Row>
                     </div>
                 </Col>
@@ -1916,6 +2031,173 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
         </div>
     )
 }
+//台账维护记录
+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) => <a style={{color:'#2C9E9D'}}>{text}</a>, // 可添加点击事件实现详情查看
+        },
+    ];
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: (newSelectedRowKeys) => {
+            setSelectedRowKeys(newSelectedRowKeys);
+        }
+    };
+    // 处理页码变化
+    const handlePageChange = (page, pageSize) => {
+        setCurrentPage(page);
+        setPageSize(pageSize);
+    };
+
+    // 处理每页条数变化
+    const handlePageSizeChange = (current, size) => {
+        setPageSize(size);
+        setCurrentPage(1); // 重置到第一页
+    };
+    return(
+        <div style={{backgroundColor:'#fff',padding:'20px'}}>
+            <Row justify={'space-between'} >
+                <Col>
+                    <Title title={'精准查询'}></Title>
+                </Col>
+                <Col>
+                    <Button style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}} icon={<SearchOutlined></SearchOutlined>} className={styles['addBtn']}>查询</Button>
+                    <Button style={{backgroundImage:`url(${btnImg3})`}} icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']}>重置</Button>
+                </Col>
+            </Row>
+            <Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}} >
+                <Form
+                    layout={'inline'}
+                    style={{display:'flex', justifyContent:'space-between',width:'100%'}}
+                >
+                    <Form.Item label={'维护时间范围：'}>
+                        <RangePicker></RangePicker>
+                    </Form.Item>
+                    <Form.Item label={'设备分类：'}>
+                        <Select defaultValue={'全部'}></Select>
+                    </Form.Item>
+                    <Form.Item label={'设备名称：'}>
+                        <Input placeholder={'请输入位置'}></Input>
+                    </Form.Item>
+                    <Form.Item label={'更新人：'}>
+                        <Input placeholder={'请输入位置'}></Input>
+                    </Form.Item>
+                    <Form.Item label={'维护方式：'}>
+                        <Select defaultValue={'全部'}></Select>
+                    </Form.Item>
+                </Form>
+            </Row>
+             <Row style={{marginTop:'20px'}}>
+                 <Table
+                     rowSelection={rowSelection}
+                    dataSource={dataSource}
+                    columns={columns}
+                    style={{width:'100%'}}
+                    pagination={false}
+                 ></Table>
+             </Row>
+            <Row>
+                <TablePagination
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    total={total}
+                    onPageChange={handlePageChange}
+                    onPageSizeChange={handlePageSizeChange}
+                ></TablePagination>
+            </Row>
+        </div>
+    )
+}
 const items = [
     {
         label: <MenuBg text={'巡检记录'} icon={<DownOutlined style={{fontSize: 16}}/>}></MenuBg>,
@@ -1940,6 +2222,7 @@ const items = [
         key:'设备台账数据',
         children:[
             {label:'设备台账查询与维护',key:'设备台账查询与维护'},
+            {label:'台账维护记录',key:'台账维护记录'},
         ]
     },
     {
@@ -1958,6 +2241,7 @@ const tabList={
     '当前巡检状态查询': <CurrentInspectionStatusQuery></CurrentInspectionStatusQuery>,
     '当日巡检状态查询': <InspectionStatusQueryOnTheSameDay></InspectionStatusQueryOnTheSameDay>,
     '设备台账查询与维护': <EquipmentLedgerQueryAndMaintenance></EquipmentLedgerQueryAndMaintenance>,
+    '台账维护记录': <TheLedgerMaintainsRecords></TheLedgerMaintainsRecords>,
 }
 const InspectionRecords=()=>{
     const [current,setCurrent]=useState('巡检记录首页')

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;
+}