巡检计划

config/routes.js

@@ -36,6 +36,12 @@ export default [
                         name: 'hiddentrouble',
                         component: './business_hiddentrouble/HiddenTrouble',
                     },
+                    //巡检任务
+                    {
+                        path: '/topnavbar00/business/inspectiontasks',
+                        name: 'inspectiontasks',
+                        component: './inspectiontasks/InspectionTasks',
+                    },
                 ],
             },
         ],

src/assets/img/rl.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.825 15.8502H1.25C0.674997 15.8502 0.199997 15.3752 0.199997 14.8002V3.2752C0.199997 2.7002 0.674997 2.2252 1.25 2.2252H1.775V3.8002C1.775 4.3752 2.25 4.8502 2.825 4.8502H11.2375C11.8125 4.8502 12.2875 4.3752 12.2875 3.8002V2.2252H12.8125C13.3875 2.2252 13.8625 2.7002 13.8625 3.2752V14.8002C13.875 15.3752 13.4 15.8502 12.825 15.8502ZM10.475 8.7252C10.1625 8.4252 9.6625 8.4252 9.35 8.7252L6.5375 11.4002L5.225 10.1502C4.9125 9.85019 4.4125 9.85019 4.1 10.1502C3.7875 10.4502 3.7875 10.9252 4.1 11.2127L5.975 12.9877C6.2875 13.2877 6.7875 13.2877 7.1 12.9877L10.475 9.7877C10.7875 9.5002 10.7875 9.0252 10.475 8.7252ZM9.6625 3.8002H4.4125C3.8375 3.8002 3.3625 3.3252 3.3625 2.7502V2.2252C5.4625 0.687695 5.4875 0.662695 6.0375 0.137695H8.125C8.6375 0.625195 8.625 0.687695 10.7125 2.2252V2.7502C10.7125 3.3377 10.25 3.8002 9.6625 3.8002ZM7.0375 1.1877C6.4625 1.1877 5.9875 1.6627 5.9875 2.2377C5.9875 2.8127 6.4625 3.2877 7.0375 3.2877C7.6125 3.2877 8.0875 2.8127 8.0875 2.2377C8.0875 1.6502 7.6125 1.1877 7.0375 1.1877Z" fill="white"/>
+</svg>

src/pages/inspectiontasks/InspectionTask.less

@@ -0,0 +1,14 @@
+.tabs{
+  :global(.ant-tabs-nav){
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 5px 20px;
+  }
+  :global(.ant-tabs-tab-btn){
+    color: #006665 !important;
+    font-size:18px !important;
+  }
+  :global(.ant-tabs-ink-bar) {
+    background-color: #006665 !important;
+  }
+}

src/pages/inspectiontasks/InspectionTasks.js

@@ -0,0 +1,48 @@
+import InspectionTaskPlan from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan";
+import {ConfigProvider, Tabs} from "antd";
+import styles from './InspectionTask.less'
+const items=[
+    {
+        key:1,
+        label:'巡检任务计划',
+        children: <InspectionTaskPlan></InspectionTaskPlan>
+    },
+    {
+        key:2,
+        label:'巡检任务执行',
+        children: <InspectionTaskPlan></InspectionTaskPlan>
+    },
+    {
+        key:3,
+        label:'巡检记录',
+        children: <InspectionTaskPlan></InspectionTaskPlan>
+    },
+]
+export const Title=(props)=>{
+    return (
+        <div style={{fontSize:'20px',fontWeight:'400'}}>
+            <span style={{borderRight:'3px solid rgba(0,102,101,1)',marginRight:'20px'}}></span>
+            {props.title}
+        </div>
+    )
+}
+const InspectionTasks = () => {
+    const customTheme = {
+        token: {
+            // 核心主题色（修改这里，Input 等组件的激活态会自动同步）
+            primaryColor: '#00b42a', // 例如修改为蓝色（默认），可改为 #f50、#00b42a 等
+            // 可选：补充其他相关变量（如聚焦时的边框色，默认继承 primaryColor）
+            colorPrimaryHover: '#39c574', // hover 时的颜色
+            colorPrimaryActive: '#008743', // 点击时的颜色
+        },
+    };
+    const onChange=()=>{
+
+    }
+    return <>
+        <ConfigProvider theme={customTheme}>
+        <Tabs className={styles['tabs']} defaultActiveKey={'1'} items={items} onChange={onChange}> </Tabs>
+        </ConfigProvider>
+    </>
+}
+export default InspectionTasks;

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

@@ -0,0 +1,737 @@
+import {Button, Col, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table} from "antd";
+import {useEffect, useRef, useState} from "react";
+import styles from './InspectionTaskPlan.less'
+import {Title} from "@/pages/inspectiontasks/InspectionTasks";
+import btnImg1 from '@/assets/img/planBtn1.png'
+import btnImg2 from '@/assets/img/planBtn2.png'
+import btnImg3 from '@/assets/img/planBtn3.png'
+import paibanBg from '@/assets/img/paiban.png'
+import {
+    DeleteOutlined,
+    DownOutlined,
+    EditOutlined,
+    ExportOutlined,
+    EyeOutlined,
+    PlusOutlined,
+    RedoOutlined
+} from "@ant-design/icons";
+const MenuBg=(props)=>{
+    return (
+        <div className={styles["parallelogram-container"]}>
+            <span className={styles["text-content"]}>{props.text}</span>
+            <span className={styles["text-content"]} style={{margin:'0'}}>{props.icon}</span>
+
+        </div>
+    )
+}
+// 员工表格组件
+const EmployeeTable = () => {
+    // 状态管理
+    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: 'employeeId',
+            key: 'employeeId',
+            align:'center',
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            align:'center',
+        },
+        {
+            title: '性别',
+            dataIndex: 'gender',
+            key: 'gender',
+            align:'center',
+        },
+        {
+            title: '所属部门',
+            dataIndex: 'department',
+            key: 'department',
+            align:'center',
+        },
+        {
+            title: '岗位',
+            dataIndex: 'position',
+            key: 'position',
+            align:'center',
+        },
+        {
+            title: '手机号码',
+            dataIndex: 'phone',
+            key: 'phone',
+            align:'center',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+            align:'center',
+            render: (status) => (
+                <Switch checked={status}  />
+            )
+        },
+        {
+            title: '入职时间',
+            dataIndex: 'hireDate',
+            key: 'hireDate',
+            align:'center',
+        },
+        {
+            title: '操作',
+            key: 'action',
+            align:'center',
+            render: (_, record) => (
+                <Space size="small">
+                    <a onClick={() => handleView(record)} style={{ color: '#1890ff' }}>
+                        <EyeOutlined /> 查看详情
+                    </a>
+                    <a onClick={() => handleEdit(record)} style={{ color: '#1890ff' }}>
+                        <EditOutlined /> 编辑
+                    </a>
+                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
+                        <DeleteOutlined /> 删除
+                    </a>
+                </Space>
+            ),
+        },
+    ];
+
+    // 选择框配置
+    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',
+                    employeeId: 'GH001',
+                    name: '钱佳仪',
+                    gender: '女',
+                    department: '运行部',
+                    position: '巡检员',
+                    phone: '189 7731 3118',
+                    status: true,
+                    hireDate: '2025-09-13'
+                },
+                {
+                    key: '2',
+                    employeeId: 'GH002',
+                    name: '孙兆洪',
+                    gender: '女',
+                    department: '安保部',
+                    position: '安全员',
+                    phone: '156 9747 2741',
+                    status: true,
+                    hireDate: '2025-09-12'
+                },
+                {
+                    key: '3',
+                    employeeId: 'GH003',
+                    name: '季丹',
+                    gender: '男',
+                    department: '设备部',
+                    position: '维修工',
+                    phone: '151 4456 8916',
+                    status: true,
+                    hireDate: '2025-08-16'
+                },
+                {
+                    key: '4',
+                    employeeId: 'GH004',
+                    name: '赵晓辉',
+                    gender: '男',
+                    department: '调度室',
+                    position: '调度员',
+                    phone: '181 8511 3486',
+                    status: true,
+                    hireDate: '2025-08-15'
+                },
+                {
+                    key: '5',
+                    employeeId: 'GH005',
+                    name: '何扑金',
+                    gender: '女',
+                    department: '消防班',
+                    position: '消防员',
+                    phone: '183 3220 4078',
+                    status: true,
+                    hireDate: '2025-07-20'
+                },
+                {
+                    key: '6',
+                    employeeId: 'GH006',
+                    name: '吴国立',
+                    gender: '男',
+                    department: '综合部',
+                    position: '文员',
+                    phone: '187 5703 5618',
+                    status: false,
+                    hireDate: '2025-07-17'
+                }
+            ];
+
+            // 模拟接口返回 - 实际项目中使用接口数据
+            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 GroupTable=()=>{
+    //状态管理
+    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: 'groupId',
+            key: 'groundId',
+            align:'center',
+        },
+        {
+            title: '班组姓名',
+            dataIndex: 'groupName',
+            key: 'groupName',
+            align:'center',
+        },
+        {
+            title: '班组长',
+            dataIndex: 'groupHeader',
+            key: 'groupHeader',
+            align:'center',
+        },
+        {
+            title: '成员数量',
+            dataIndex: 'num',
+            key: 'num',
+            align:'center',
+        },
+        {
+            title: '负责区域',
+            dataIndex: 'position',
+            key: 'position',
+            align:'center',
+        },
+        {
+            title: '联系电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            align:'center',
+        },
+        {
+            title: '班组状态',
+            dataIndex: 'status',
+            key: 'status',
+            align:'center',
+            render: (status) => (
+                <Switch checked={status}  />
+            )
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            align:'center',
+        },
+        {
+            title:'备注',
+            dataIndex:'remarks',
+            key:'remarks',
+            align:'center'
+        },
+        {
+            title: '操作',
+            key: 'action',
+            align:'center',
+            render: (_, record) => (
+                <Space size="small">
+                    <a onClick={() => handleView(record)} style={{ color: '#1890ff' }}>
+                        <EyeOutlined /> 查看详情
+                    </a>
+                    <a onClick={() => handleEdit(record)} style={{ color: '#1890ff' }}>
+                        <EditOutlined /> 编辑
+                    </a>
+                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
+                        <DeleteOutlined /> 删除
+                    </a>
+                </Space>
+            ),
+        },
+    ]
+    // 选择框配置
+    const rowSelection = {
+        selectedRowKeys,
+        onChange: (newSelectedRowKeys) => {
+            setSelectedRowKeys(newSelectedRowKeys);
+        },
+    };
+    const fetchTableData=()=>{
+        try{
+            setLoading(true)
+            const mockData=[
+                {
+                    key: '1',
+                    groupId: 'GH001',
+                    groupName: '输油运行一班',
+                    groupHeader: '钱佳仪',
+                    num: '8',
+                    position: '油罐储存区 A、B 区',
+                    phone: '189 7731 3118',
+                    status: true,
+                    createTime: '2025-09-13',
+                    remarks:'负责日常输油设备巡检与操作',
+                },
+                {
+                    key: '2',
+                    groupId: 'GH002',
+                    groupName: '消防应急班组',
+                    groupHeader: '何颖颀',
+                    num: '6',
+                    position: '全厂区消防系统',
+                    phone: '156 9747 2741',
+                    status: true,
+                    createTime: '2025-09-12',
+                    remarks:'含2 名持证消防设施操作员',
+                },
+                {
+                    key: '3',
+                    groupId: 'GH003',
+                    groupName: '设备维保班组',
+                    groupHeader: '周遵武',
+                    num: '10',
+                    position: '泵房、工艺设备区',
+                    phone: '151 4456 8916',
+                    status: true,
+                    createTime: '2025-08-16',
+                    remarks:'擅长油泵、输油管道维护',
+                },
+                {
+                    key: '4',
+                    groupId: 'GH004',
+                    groupName: '装卸作业班组',
+                    groupHeader: '钱博西',
+                    num: '7',
+                    position: '油品装卸区站台',
+                    phone: '181 8511 3486',
+                    status: true,
+                    createTime: '2025-08-15',
+                    remarks:'专注装卸作业安全监护',
+                },
+                {
+                    key: '5',
+                    groupId: 'GH005',
+                    groupName: '工艺调和班组',
+                    groupHeader: '周缙绅',
+                    num: '9',
+                    position: '调和工艺区 1-3 号罐',
+                    phone: '183 3220 4078',
+                    status: true,
+                    createTime: '2025-07-20',
+                    remarks:'负责油品调和工艺参数管控',
+                },
+                {
+                    key: '6',
+                    groupId: 'GH006',
+                    groupName: '临时支援班组',
+                    groupHeader: '周江',
+                    num: '4',
+                    position: '全厂区(机动)',
+                    phone: '187 5703 5618',
+                    status: false,
+                    createTime: '2025-07-17',
+                    remarks:'项目结束，暂停用待复用',
+                }
+            ]
+            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 (
+        <div style={{ textAlign: 'right', marginTop: 16 ,width:'100%'}}>
+            <Pagination
+                current={currentPage}
+                pageSize={pageSize}
+                total={total}
+                onChange={onPageChange}
+                onShowSizeChange={onPageSizeChange}
+                showSizeChanger
+                showQuickJumper
+                showTotal={(total) => `共 ${total} 条`}
+                pageSizeOptions={['10', '20', '50', '100']}
+            />
+        </div>
+    );
+};
+const PeopleMange=()=>{
+    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 (
+        <div style={{backgroundColor: '#fff', padding: '20px'}}>
+            <Title title={'人员管理'}></Title>
+            <Row style={{marginTop:'20px'}}>
+                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
+                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
+            </Row>
+            <Row style={{marginTop:'20px'}}>
+                <EmployeeTable
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    setTotal={setTotal}
+                />
+            </Row>
+            <Row style={{marginTop:'20px'}}>
+                <TablePagination
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    total={total}
+                    onPageChange={handlePageChange}
+                    onPageSizeChange={handlePageSizeChange}
+
+                />
+            </Row>
+        </div>
+    )
+}
+const ClassMange=()=>{
+    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(
+        <div style={{backgroundColor:'#fff',padding:'20px'}}>
+            <Title title={'班组管理'}></Title>
+            <Row style={{marginTop:'20px'}}>
+                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
+                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
+            </Row>
+            <Row style={{marginTop:'20px'}}>
+                <GroupTable></GroupTable>
+            </Row>
+            <Row style={{marginTop:'20px'}}>
+                <TablePagination
+                    currentPage={currentPage}
+                    pageSize={pageSize}
+                    total={total}
+                    onPageChange={handlePageChange}
+                    onPageSizeChange={handlePageSizeChange}
+
+                />
+            </Row>
+        </div>
+    )
+}
+const TimeMange=()=>{
+    const [viewState,setViewState]=useState('view0')
+    const view0=useRef(null)
+    const view1=useRef(null)
+    const checkView=(viewState)=>{
+        setViewState(viewState)
+    }
+    useEffect(()=>{
+        view0.current.classList.remove('view-active')
+        view1.current.classList.remove('view-active')
+        if(viewState==='view0'){
+            view0.current.style.backgroundColor='#045F5E80'
+            view1.current.style.backgroundColor='#B7E5D533'
+            view0.current.style.color='#fff'
+            view1.current.style.color='#000'
+        }else{
+            view0.current.style.backgroundColor='#B7E5D533'
+            view1.current.style.backgroundColor='#045F5E80'
+            view0.current.style.color='#000'
+            view1.current.style.color='#fff'
+        }
+    },[viewState])
+    return (
+        <div style={{backgroundColor: '#fff', padding: '20px'}}>
+            <Title title={'排班管理'}></Title>
+            <Row style={{marginTop:'20px'}}>
+                <Col span={4}></Col>
+                <Col span={16} style={{textAlign:'center'}}>
+                    <div style={{color:'#006665',fontSize:'20px',fontWeight:'400'}}>
+                        <span style={{cursor:'pointer'}}>&lt;</span>
+                        <span style={{margin:'10px',}}>2025年8月</span>
+                        <span style={{cursor:'pointer'}}>&gt;</span>
+                    </div>
+                    <div style={{color:'#999999',fontSize:'14px'}}>
+                        <span>上次编辑：</span>
+                        <span>李朔&nbsp;&nbsp;</span>
+                        <span>2025-7-22 09:34</span>
+                    </div>
+                </Col>
+                <Col span={4} style={{display:"flex",alignItems:'center'}}>
+                    <Button  icon={<ExportOutlined />} className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`}}>导出</Button>
+                </Col>
+            </Row>
+            <Row style={{borderRadius:'4px',width:'100%',marginTop:'20px'}}>
+                <Row style={{backgroundColor:'#F0F7F7',width:'100%',padding:'10px 30px'}}>
+                    <Col span={18}>
+                        <Row>
+                            {/*<Button ref={view0} className={`${styles['view']} ${styles['view-active']}`} onClick={()=>checkView('view0')}>人员视角</Button>*/}
+                            <Button ref={view0} className={styles['view']} onClick={()=>checkView('view0')}>人员视角</Button>
+                            <Button ref={view1} className={styles['view']} onClick={()=>checkView('view1')}>班组视角</Button>
+                            <Form
+                                layout={'inline'}
+                            >
+                                <Form.Item
+                                    label={<label>岗位类型</label>}
+                                    name="type"
+                                >
+                                    <Select
+                                        defaultValue={'全部'}
+                                        style={{width:'132px'}}
+                                    ></Select>
+                                </Form.Item>
+                                <Form.Item
+                                    label={<label>姓名</label>}
+                                    name="type"
+
+                                >
+                                    <Input
+                                        placeholder={'请输入姓名'}
+                                        style={{width:'200px'}}
+                                    ></Input>
+                                </Form.Item>
+                                <Form.Item
+                                    label={<label>班组</label>}
+                                    name="type"
+
+                                >
+                                    <Select
+                                        defaultValue={'全部'}
+                                        style={{width:'132px'}}
+                                    ></Select>
+                                </Form.Item>
+                            </Form>
+                            <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
+                        </Row>
+
+                    </Col>
+                    <Col span={6} style={{textAlign:'right'}}>
+                        <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,}}>新增</Button>
+                        <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`,margin:'0 20px'}}>编辑</Button>
+                        <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
+
+                    </Col>
+                </Row>
+                <div className={styles['paibanBg']} style={{backgroundImage:`url(${paibanBg})`}}>
+
+                </div>
+            </Row>
+        </div>
+    )
+}
+const items = [
+    {
+        label: <MenuBg text={'人员管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
+        key: '人员管理',
+
+        children: [
+            {label: '人员管理', key: '人员管理'},
+            {label: '班组管理', key: '班组管理'},
+        ],
+    },
+    {
+        label: <MenuBg text={'排班管理'}></MenuBg>,
+        key:'排班管理',
+    },
+    {
+        label:<MenuBg text={'巡检路线管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
+        key:'巡检路线管理',
+    }
+]
+const list={
+    '人员管理':<PeopleMange/>,
+    '班组管理':<ClassMange/>,
+    '排班管理':<TimeMange/>,
+    '巡检路线管理':<PeopleMange/>,
+
+
+}
+const InspectionTaskPlan=()=>{
+    const [current,setCurrent]=useState('人员管理')
+    const onclick=(e)=>{
+        console.log(e.key)
+        setCurrent(e.key)
+    }
+    return (
+        <>
+            <div className={styles['header']}>
+                <div className={styles['logo']}>
+                    当前:&nbsp;&nbsp;{current}
+                </div>
+                <Menu
+                    onClick={onclick}
+                    items={items}
+                    selectedKeys={[current]}
+                    mode={'horizontal'}
+                    style={{flex: '1'}}
+                    className={styles['menu']}
+
+                >
+                </Menu>
+            </div>
+            {list[current]}
+
+        </>
+    )
+}
+export default InspectionTaskPlan

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

@@ -0,0 +1,129 @@
+
+.header{
+  display: flex;
+  backdrop-filter: blur(3.4000000953674316px);
+  box-shadow: 1px 2px 5px 0 rgba(0, 102, 101, 0.25);
+  border: 1px solid;
+
+  border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%);
+  border-top-left-radius: 20px;
+  background-color: #fff;
+}
+.logo{
+  position: relative;
+  font-size: 20px;
+  font-weight: 400;
+  color: #fff;
+  border-top-left-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  //padding: 10px 30px;
+  height: 54px;
+  width: 258px;
+}
+.logo::before{
+  position: absolute;
+  display: block;
+  content:'';
+  top: -7px;
+  left: -57px;
+  width: 327px;
+  height: 95px;
+  background-image: url("@/assets/img/planImg1.png");
+  background-repeat: no-repeat;
+
+  background-size: cover;
+
+  border-top-left-radius: 20px;
+  z-index: -1;
+}
+.menu{
+  :global(.ant-menu-title-content){
+    color: rgba(0, 102, 101, 1);
+    font-size:16px;
+  }
+  :global(.ant-menu-submenu-selected::after){
+      border-bottom:none !important;
+  }
+  :global(.ant-menu-submenu-open::after){
+    border-bottom:none !important;
+  }
+  :global(.ant-menu-item::after){
+    border-bottom:none !important;
+  }
+  :global(.parallelogram-container___Lxkxf){
+    height:30px;
+  }
+}
+.parallelogram-container {
+  /* 平行四边形变换 */
+  transform: skewX(-45deg);
+  //-webkit-transform: skewX(-15deg);
+
+  /* 基础样式 */
+  display: inline-flex;
+  align-items: center;
+  padding: 0 34px;
+  background-color: #e0f0f0; /* 浅蓝底色 */
+  border: none;
+  cursor: pointer;
+
+  /* 文字样式重置（因为容器有倾斜，内部文字需要反向倾斜） */
+  font-size: 16px;
+  color: #333;
+}
+
+.text-content {
+  /* 文字反向倾斜，保持正常显示 */
+  transform: skewX(45deg);
+  //-webkit-transform: skewX(15deg);
+  margin-right: 8px;
+}
+.addBtn{
+  background-size:cover;
+  background-position:center;
+  color:#fff;
+  opacity:0.7;
+  border-radius:4px;
+  height: 36px;
+}
+.delBtn{
+  background-size:cover;
+  background-position:center;
+  color:#000;
+  opacity:0.7;
+  border-radius:4px;
+  width: 88px;
+  height: 36px;
+}
+.exportBtn{
+  background-size:cover;
+  background-position:center;
+  color:#fff;
+  opacity:0.7;
+  border-radius:4px;
+  width: 88px;
+  height: 36px;
+}
+.resetBtn{
+  background-size:cover;
+  background-position:center;
+  color:#006665;
+  //opacity:0.7;
+  border-radius:4px;
+  width: 88px;
+  height: 36px;
+}
+.view{
+  background-color:#B7E5D533;
+  margin-right:30px;
+  border:none;
+}
+.paibanBg{
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 631px;
+}
+

src/pages/nav_system_content/SystemContentList.js

@@ -19,6 +19,7 @@ import danger1 from '@/assets/img/danger1.svg'
 import license from '@/assets/img/license.svg'
 import people from '@/assets/img/people.svg'
 import risk from '@/assets/img/risk.svg'
+import rl from '@/assets/img/rl.svg'
 import { CustomBreadcrumb } from '@/components/GlobalComponent'
 
 
@@ -98,6 +99,12 @@ const SystemContentList = (props) => {
                 icon: <img src={risk} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
                 "key": "/topnavbar00/business/hiddentrouble",
                 "label": "隐患排查"
+            },
+            {
+                "path": "/topnavbar00/business/inspectiontasks",
+                icon: <img src={rl} alt="巡检任务" style={{ width: '16px', height: '16px' }} />,
+                "key": "/topnavbar00/business/inspectiontasks",
+                "label": "巡检任务"
             }
         ]
         setMenuItems(fixedMenuItems)

src/pages/topnavbar/TopNavBar.js

@@ -13,9 +13,13 @@ const menuItem = [
     key: '/topnavbar00/business/basicinformation',
   },
   {
-    label: '隐患排查',
+    label: '隐患排',
     key: '/topnavbar00/business/hiddentrouble',
   },
+  {
+    label: '巡检任务',
+    key: '/topnavbar00/business/inspectiontasks',
+  },
 ]
 
 const TopNavBar = (props) => {