提交最新的

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, Input, Menu, Row, Select, Table} from "antd";
+import {Button, Col, DatePicker, Drawer, Input, Menu, Row, Select, Table} from "antd";
 import {MenuBg, TablePagination} from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan";
 import {DownOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons";
 import {Title} from "@/pages/inspectiontasks/InspectionTasks";
@@ -11,6 +11,58 @@ import btnImg1 from '@/assets/img/planBtn1.png'
 import btnImg2 from '@/assets/img/planBtn2.png'
 import btnImg3 from '@/assets/img/planBtn3.png'
 
+
+const Drawers=(props)=>{
+    console.log(props.row)
+    return(
+        <Drawer
+            title="查看详情"
+            closable={{'aria-label': 'Close Button'}}
+            open={props.open}
+            onClose={props.onClose}
+            width={500}
+            className={styles['customDrawer']}
+        >
+            <Title title={'基本信息'}></Title>
+            <Row className={styles['drawerRow']} wrap={true}>
+                <Col span={12}>
+                    <span>岗位类型：</span>{props.row.postType}
+                </Col>
+                <Col span={12}>
+                    <span>签到人员：</span>{props.row.signPerson}
+                </Col>
+                <Col span={12}>
+                    <span>值别：</span>{props.row.dutyLevel}
+                </Col>
+                <Col span={12}>
+                    <span>签到时间：</span>{props.row.signDate}
+                </Col>
+                <Col span={12}>
+                    <span>班次：</span>{props.row.shift}
+                </Col>
+                <Col span={12}>
+                    <span>接班人员：</span>{props.row.handoverPerson}
+                </Col>
+                <Col span={12}>
+                    <span>签到状态：</span>{props.row.signStatus}
+                </Col>
+                <Col span={12}>
+                    <span>接班时间：</span>{props.row.handoverTime}
+                </Col>
+            </Row>
+            <Title title={'当值记事'}></Title>
+            <Row style={{marginTop:'20px',}}>
+                <ul >
+                    <li style={{fontSize:'14px'}}>1#储油罐液位10.5m稳定，输油主泵压力0.6MPa无波动，中控室DCS系统信号冗余度99%</li>
+                </ul>
+
+            </Row>
+
+        </Drawer>
+    )
+}
+
+
 //巡检记录首页
 const InspectionRecordHomepage=()=>{
     const [data1,setData1]=useState([])
@@ -880,16 +932,18 @@ const HistoricalDailyValueRecordQuery=()=>{
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
-
-
-    const columns = [
-        {
-            title: '',
-            dataIndex: 'checkbox',
-            key: 'checkbox',
-            width: 40,
-            render: () => <input type="checkbox" />
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
+    const [open,setOpen]=useState(false)
+    const [row,setRow]=useState([])
+    // 选择框配置
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: (newSelectedRowKeys) => {
+            setSelectedRowKeys(newSelectedRowKeys);
         },
+    };
+    const columns = [
+
         {
             title: '序号',
             dataIndex: 'serial',
@@ -949,7 +1003,7 @@ const HistoricalDailyValueRecordQuery=()=>{
             title: '操作',
             dataIndex: 'operation',
             key: 'operation',
-            render: () => <a style={{color:'#2C9E9D'}}>查看详情</a>
+            render: (_,record) => <a onClick={()=>handleView(record)} style={{color:'#2C9E9D'}}>查看详情</a>
         }
     ];
     const dataSource = [
@@ -1039,8 +1093,10 @@ const HistoricalDailyValueRecordQuery=()=>{
         }
     ];
 
-
-
+    const handleView=(record)=>{
+        setRow(record)
+        setOpen(true)
+    }
     // 处理页码变化
     const handlePageChange = (page, pageSize) => {
         setCurrentPage(page);
@@ -1097,8 +1153,14 @@ const HistoricalDailyValueRecordQuery=()=>{
                             dataSource={dataSource}
                             columns={columns}
                             pagination={false}
+                            rowSelection={{
+                                type: 'checkbox',
+                                ...rowSelection,
+                            }}
+                            rowKey="key"
                             style={{width:'100%'}}
                         ></Table>
+                        <Drawers open={open} onClose={() => setOpen(false)} row={row}></Drawers>
                     </Row>
                     <Row>
                         <TablePagination

src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less

@@ -116,3 +116,19 @@
   width: 88px;
   height: 36px;
 }
+.customDrawer{
+  :global(.ant-drawer-header){
+    background-color:#B8E0D833 !important;
+  }
+}
+.drawerRow{
+  margin: 10px 0 20px 0;
+  :global(.ant-col){
+    margin-top: 10px;
+    color: #000;
+    span{
+      color: #999999;
+      font-size:14px;
+    }
+  }
+}