巡检任务全局样式修改11

src/pages/inspectiontasks/InspectionTasks.js

@@ -42,6 +42,11 @@ const InspectionTasks = () => {
             },
             Pagination:{
                 colorPrimary:'#39c574',
+            },
+            Tree:{
+                colorPrimary:'#006665',
+                lineColor:'#006665',
+                checkboxBorderColor:'#006665'
             }
         },
     };

src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js

@@ -478,6 +478,170 @@ const GroupTable=()=>{
         />
     )
 }
+const TimeTable=()=>{
+    //状态管理
+    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: '线路ID',
+            dataIndex: 'id',
+            key: 'id',
+            align:'center',
+        },
+        {
+            title: '线路名称',
+            dataIndex: 'name',
+            key: 'name',
+            align:'center',
+        },
+        {
+            title: '所属班次',
+            dataIndex: 'shifts',
+            key: 'shifts',
+            align:'center',
+        },
+        {
+            title: '所属专业',
+            dataIndex: 'affiliation',
+            key: 'affiliation',
+            align:'center',
+        },
+        {
+            title: '涉及区域',
+            dataIndex: 'position',
+            key: 'position',
+            align:'center',
+        },
+        {
+            title: '设备数量',
+            dataIndex: 'deviceNum',
+            key: 'deviceNum',
+            align:'center',
+        },
+        {
+            title: '巡视项数量',
+            dataIndex: 'lookNum',
+            key: 'lookNum',
+            align:'center',
+
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            align:'center',
+            render: (status) => (
+                <Switch checked={status}  />
+            )
+        },
+        {
+            title: '操作',
+            key: 'action',
+            align:'center',
+            render: (_, record) => (
+                <Space size="small">
+                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
+                        <EyeOutlined /> 查看详情
+                    </a>
+                </Space>
+            ),
+        },
+    ]
+    // 选择框配置
+    // const rowSelection = {
+    //     selectedRowKeys,
+    //     onChange: (newSelectedRowKeys) => {
+    //         setSelectedRowKeys(newSelectedRowKeys);
+    //     },
+    // };
+    const fetchTableData=()=>{
+        try{
+            setLoading(true)
+            const mockData=[
+                {
+                    key: '1',
+                    id: 'GH001',
+                    name: '白班电气巡检线 1',
+                    shifts: '白班',
+                    affiliation: '电气专业',
+                    position: '发电机、中水处区',
+                    deviceNum: '22',
+                    lookNum: 3,
+                    status: 'true',
+                },
+                {
+                    key: '2',
+                    id: 'GH001',
+                    name: '白班电气巡检线 1',
+                    shifts: '白班',
+                    affiliation: '电气专业',
+                    position: '发电机、中水处区',
+                    deviceNum: '22',
+                    lookNum: 3,
+                    status: 'true',
+                },
+
+
+            ]
+            setDataSource(mockData)
+            setTotal(85)
+
+        }catch(error){
+            console.error(error)
+        }finally{
+            setLoading(false)
+        }
+    }
+    // 初始加载和分页变化时重新获取数据
+    useEffect(() => {
+        fetchTableData();
+    }, [currentPage, pageSize]);
+    // 处理查看详情
+    const handleView = (record) => {
+        // 预留查看详情逻辑
+        console.log('查看详情:', record);
+    };
+
+    // 处理编辑
+    const handleEdit = (record) => {
+        // 预留编辑逻辑
+        console.log('编辑:', record);
+    };
+
+    // 处理删除
+    const handleDelete = (record) => {
+        // 预留删除逻辑
+        console.log('删除:', record);
+    };
+    return(
+        <Table
+            // rowSelection={{
+            //     type: 'checkbox',
+            //     ...rowSelection,
+            // }}
+            columns={columns}
+            dataSource={dataSource}
+            loading={loading}
+            pagination={false} // 关闭表格自带分页，使用外部分页组件
+            rowKey="key"
+            style={{width:'100%',}}
+
+        />
+    )
+}
 // 分页组件
 const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
     return (
@@ -679,6 +843,21 @@ const TimeMange=()=>{
     )
 }
 const PatrolRouteQuery=()=>{
+    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); // 重置到第一页
+    };
     const treeData=[
         {
             title:'班次',
@@ -708,24 +887,50 @@ const PatrolRouteQuery=()=>{
                 {title:'除盐水区域', key:'除盐水区域',},
             ]
         },
-
-
     ]
 
 
     return(
         <div style={{backgroundColor:'#fff',padding:'20px'}}>
             <Row>
-                <Col span={4}>
+                <Col span={3} style={{backgroundColor:'#E7F2ED',padding:'10px 20px'}}>
+
+                        <Title title={'巡视线路'} ></Title>
+                        <div style={{marginTop:'20px'}}>
+                            <Tree
+                                treeData={treeData}
+                                checkable
+                                showLine
+                                defaultExpandParent={true}
+                                defaultExpandedKeys={['班次', '专业', '区域']}
+                                className={styles['tree']}
+                            >
+                            </Tree>
+                        </div>
+
+
+                </Col>
+                <Col span={21} style={{padding:'0 20px'}}>
                     <Title title={'巡视线路'}></Title>
-                    <Tree
+                    <Row style={{marginTop:'20px'}}>
-                        treeData={treeData}
+                        <Button className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`}}>
-                        checkable
+                            重新选择
-                        defaultExpandParent
+                        </Button>
-                    >
+                    </Row>
-                    </Tree>
+                    <Row style={{marginTop:'20px',minHeight:'550px'}}>
+                        <TimeTable></TimeTable>
+                    </Row>
+                    <Row style={{marginTop:'20px'}}>
+                        <TablePagination
+                            currentPage={currentPage}
+                            pageSize={pageSize}
+                            total={total}
+                            onPageChange={handlePageChange}
+                            onPageSizeChange={handlePageSizeChange}
+
+                        />
+                    </Row>
                 </Col>
-                <Col span={20}>1</Col>
             </Row>
         </div>
     )

src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less

@@ -131,4 +131,18 @@
   width: 100%;
   height: 631px;
 }
-
+.tree{
+  background-color: #E7F2ED;
+  :global(.ant-tree-switcher-leaf-line::after){
+    border-bottom:1px solid #006665;
+  }
+  :global(.ant-tree-switcher-leaf-line::before){
+    border-inline-end:1px solid #006665;
+  }
+  :global(.ant-tree-checkbox-inner){
+    border:1px solid #006665 !important;
+  }
+  :global(.ant-tree-indent-unit::before){
+    border-inline-end:none !important;
+  }
+}