diff --git a/config/routes.js b/config/routes.js index 0614436..0c4ed7a 100644 --- a/config/routes.js +++ b/config/routes.js @@ -36,6 +36,12 @@ export default [ name: 'hiddentrouble', component: './business_hiddentrouble/HiddenTrouble', }, + //巡检任务 + { + path: '/topnavbar00/business/inspectiontasks', + name: 'inspectiontasks', + component: './inspectiontasks/InspectionTasks', + }, ], }, ], diff --git a/src/assets/img/paiban.png b/src/assets/img/paiban.png new file mode 100644 index 0000000..3d1d09f Binary files /dev/null and b/src/assets/img/paiban.png differ diff --git a/src/assets/img/planBtn1.png b/src/assets/img/planBtn1.png new file mode 100644 index 0000000..0569633 Binary files /dev/null and b/src/assets/img/planBtn1.png differ diff --git a/src/assets/img/planBtn3.png b/src/assets/img/planBtn3.png new file mode 100644 index 0000000..5157c20 Binary files /dev/null and b/src/assets/img/planBtn3.png differ diff --git a/src/assets/img/planImg1.png b/src/assets/img/planImg1.png new file mode 100644 index 0000000..f6dcae8 Binary files /dev/null and b/src/assets/img/planImg1.png differ diff --git a/src/assets/img/planbtn2.png b/src/assets/img/planbtn2.png new file mode 100644 index 0000000..ee461e8 Binary files /dev/null and b/src/assets/img/planbtn2.png differ diff --git a/src/assets/img/rl.svg b/src/assets/img/rl.svg new file mode 100644 index 0000000..6776fc6 --- /dev/null +++ b/src/assets/img/rl.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/inspectiontasks/InspectionTask.less b/src/pages/inspectiontasks/InspectionTask.less new file mode 100644 index 0000000..5320e88 --- /dev/null +++ b/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; + } +} diff --git a/src/pages/inspectiontasks/InspectionTasks.js b/src/pages/inspectiontasks/InspectionTasks.js new file mode 100644 index 0000000..78676e5 --- /dev/null +++ b/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: + }, + { + key:2, + label:'巡检任务执行', + children: + }, + { + key:3, + label:'巡检记录', + children: + }, +] +export const Title=(props)=>{ + return ( +
+ + {props.title} +
+ ) +} +const InspectionTasks = () => { + const customTheme = { + token: { + // 核心主题色（修改这里，Input 等组件的激活态会自动同步） + primaryColor: '#00b42a', // 例如修改为蓝色（默认），可改为 #f50、#00b42a 等 + // 可选：补充其他相关变量（如聚焦时的边框色，默认继承 primaryColor） + colorPrimaryHover: '#39c574', // hover 时的颜色 + colorPrimaryActive: '#008743', // 点击时的颜色 + }, + }; + const onChange=()=>{ + + } + return <> + + + + +} +export default InspectionTasks; diff --git a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js new file mode 100644 index 0000000..26a4df9 --- /dev/null +++ b/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 ( +
+ {props.text} + {props.icon} + +
+ ) +} +// 员工表格组件 +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) => ( + + ) + }, + { + title: '入职时间', + dataIndex: 'hireDate', + key: 'hireDate', + align:'center', + }, + { + title: '操作', + key: 'action', + align:'center', + render: (_, record) => ( + + handleView(record)} style={{ color: '#1890ff' }}> + 查看详情 + + handleEdit(record)} style={{ color: '#1890ff' }}> + 编辑 + + handleDelete(record)} style={{ color: '#ff4d4f' }}> + 删除 + + + ), + }, + ]; + + // 选择框配置 + 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 ( + + ); +}; +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) => ( + + ) + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + align:'center', + }, + { + title:'备注', + dataIndex:'remarks', + key:'remarks', + align:'center' + }, + { + title: '操作', + key: 'action', + align:'center', + render: (_, record) => ( + + handleView(record)} style={{ color: '#1890ff' }}> + 查看详情 + + handleEdit(record)} style={{ color: '#1890ff' }}> + 编辑 + + handleDelete(record)} style={{ color: '#ff4d4f' }}> + 删除 + + + ), + }, + ] + // 选择框配置 + 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( +
+ ) +} +// 分页组件 +const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => { + return ( +
+ `共 ${total} 条`} + pageSizeOptions={['10', '20', '50', '100']} + /> +
+ ); +}; +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 ( +
+ + + + + + + + + + + +
+ ) +} +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( +
+ + + + + + + + + + + +
+ ) +} +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 ( +
+ + +
+ +
+ < + 2025年8月 + > +
+
+ 上次编辑： + 李朔   + 2025-7-22 09:34 +
+ + + + + + + + + + {/**/} + + +
+ 岗位类型} + name="type" + > + + + 姓名} + name="type" + + > + + + 班组} + name="type" + + > + + + + + + + + + + + + + + +
+ +
+ + + ) +} +const items = [ + { + label: }>, + key: '人员管理', + + children: [ + {label: '人员管理', key: '人员管理'}, + {label: '班组管理', key: '班组管理'}, + ], + }, + { + label: , + key:'排班管理', + }, + { + label:}>, + key:'巡检路线管理', + } +] +const list={ + '人员管理':, + '班组管理':, + '排班管理':, + '巡检路线管理':, + + +} +const InspectionTaskPlan=()=>{ + const [current,setCurrent]=useState('人员管理') + const onclick=(e)=>{ + console.log(e.key) + setCurrent(e.key) + } + return ( + <> +
+
+ 当前:  {current} +
+ + +
+ {list[current]} + + + ) +} +export default InspectionTaskPlan diff --git a/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less b/src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.less new file mode 100644 index 0000000..45a67bc --- /dev/null +++ b/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; +} + diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index cdf3db9..5a69678 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/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: 工时仪表盘, "key": "/topnavbar00/business/hiddentrouble", "label": "隐患排查" + }, + { + "path": "/topnavbar00/business/inspectiontasks", + icon: 巡检任务, + "key": "/topnavbar00/business/inspectiontasks", + "label": "巡检任务" } ] setMenuItems(fixedMenuItems) diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 48f9c89..ac49e05 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/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) => {