diff --git a/config/routes.js b/config/routes.js index b7bbf6f..b7fb9a4 100644 --- a/config/routes.js +++ b/config/routes.js @@ -26,10 +26,15 @@ export default [ routes: [ //巡检任务 { - path: '/topnavbar00/business/inspectiontasks', - name: 'inspectiontasks', - component: './inspectiontasks/InspectionTasks', - }, + path: '/topnavbar00/business/inspectiontasks', + name: 'inspectiontasks', + component: './inspectiontasks/InspectionTasks', + }, + { + path: '/topnavbar00/business/inspectionmanagement', + name: 'inspectionmanagement', + component: './inspectionmanagement/InspectionManagement', + }, ], }, ], diff --git a/src/assets/img/InspectionManagement.svg b/src/assets/img/InspectionManagement.svg new file mode 100644 index 0000000..da885b6 --- /dev/null +++ b/src/assets/img/InspectionManagement.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/temp1.png b/src/assets/img/temp1.png new file mode 100644 index 0000000..e784ff4 Binary files /dev/null and b/src/assets/img/temp1.png differ diff --git a/src/pages/inspectionmanagement/InspectionManagement.js b/src/pages/inspectionmanagement/InspectionManagement.js new file mode 100644 index 0000000..3fa6a6b --- /dev/null +++ b/src/pages/inspectionmanagement/InspectionManagement.js @@ -0,0 +1,73 @@ +import InspectionTaskPlan from "@/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan"; +import { ConfigProvider, Tabs } from "antd"; +import styles from './InspectionManagement.less' +import InspectionRecords from "@/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords"; +const items = [ + { + key: 1, + label: '巡检管理类型', + children: + }, + // { + // key:2, + // label:'巡检管理执行', + // children: + // }, + { + key: 3, + label: '巡检点管理', + children: + }, +] +export const Title = (props) => { + return ( +
+ + {props.title} +
+ ) +} +const InspectionManagement = () => { + const customTheme = { + token: { + // 核心主题色（修改这里，Input 等组件的激活态会自动同步） + primaryColor: '#00b42a', // 例如修改为蓝色（默认），可改为 #f50、#00b42a 等 + // 可选：补充其他相关变量（如聚焦时的边框色，默认继承 primaryColor） + colorPrimaryHover: '#39c574', // hover 时的颜色 + colorPrimaryActive: '#008743', // 点击时的颜色 + }, + components: { + Switch: { + colorPrimary: '#008743', // 开启状态颜色 + colorBg: '#333', // 关闭状态颜色（默认灰色） + }, + Pagination: { + colorPrimary: '#39c574', + }, + Tree: { + colorPrimary: '#006665', + lineColor: '#006665', + checkboxBorderColor: '#006665' + }, + Table: { + headerBg: '#F0F7F7', + // bodyBg:'#F0F7F7', + }, + Menu: { + activeBarHeight: 0 + }, + Select: { + activeBorderColor: '#2C9E9D' + } + }, + }; + const onChange = () => { + + } + return <> + + + + +} +export default InspectionManagement; \ No newline at end of file diff --git a/src/pages/inspectionmanagement/InspectionManagement.less b/src/pages/inspectionmanagement/InspectionManagement.less new file mode 100644 index 0000000..90c0647 --- /dev/null +++ b/src/pages/inspectionmanagement/InspectionManagement.less @@ -0,0 +1,20 @@ +.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; + } + :global(.ant-table-thead > tr > th){ + background-color:#F0F7F7; + } +} +*{ + font-size:16px +} \ No newline at end of file diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js new file mode 100644 index 0000000..82fb87f --- /dev/null +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js @@ -0,0 +1,1271 @@ + +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, Pagination, Row, Select, Table} from "antd"; +// 菜单背景组件定义 +const MenuBg = ({ text, icon }) => { + return ( +
+ {icon} + {text} +
+ ); +}; + +// 分页组件定义 +const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => { + return ( +
+ `共 ${total} 条`} + pageSizeOptions={['10', '20', '50', '100']} + /> +
+ ); +}; +import {DownOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons"; +import {Title} from "@/pages/inspectionmanagement/InspectionManagement"; +import * as echarts from 'echarts'; +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( + + + + + 岗位类型：{props.row.postType} + + + 签到人员：{props.row.signPerson} + + + 值别：{props.row.dutyLevel} + + + 签到时间：{props.row.signDate} + + + 班次：{props.row.shift} + + + 接班人员：{props.row.handoverPerson} + + + 签到状态：{props.row.signStatus} + + + 接班时间：{props.row.handoverTime} + + + + + + + + + + ) +} + + +//巡检记录首页 +const InspectionRecordHomepage=()=>{ + const [data1,setData1]=useState([]) + const [data2,setData2]=useState([]) + const [data3,setData3]=useState([]) + const chartRef=useRef(null) + const chartRef1=useRef(null) + const chartRef2=useRef(null) + const chartRef3=useRef(null) + let chart=null + let chart1=null + let chart2=null + let chart3=null + useEffect(()=>{ + chart=echarts.init(chartRef.current) + const option={ + // 坐标轴 + xAxis: { + type: 'category', + data: ['第1周', '第2周', '第3周', '第4周', '第5周'] + }, + yAxis: { + type: 'value', + max: 100, // y轴最大值匹配示例图 + interval: 25, // y轴刻度间隔 + name:'设备缺陷数' + }, + // 折线系列 + series: [ + { + data: [25, 50, 30, 25, 30], // 第一条折线数据 + type: 'line', + symbol: 'circle', // 标记点样式（圆点） + symbolSize: 8, // 标记点大小 + itemStyle: { color: '#00A1FF' } // 标记点颜色 + }, + { + data: [10, 35, 50, 10, 35], // 第二条折线数据 + type: 'line', + symbol: 'circle', + symbolSize: 8, + itemStyle: { color: '#00CC99' } // 标记点颜色 + } + ], + // 网格（调整图表位置，可选） + grid: { + left: '3%', + right: '3%', + bottom: '3%', + top: '20%', + containLabel: true + }, + // 区域填充（可选，如示例图的阴影） + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ offset: 0, color: 'rgba(0, 204, 153, 0.2)' }, { offset: 1, color: 'rgba(0, 204, 153, 0)' }] + } + } + }; + + // 渲染图表 + chart.setOption(option); + + // 销毁图表（组件卸载时） + return () => { + chart.dispose(); + }; + },[]) + useEffect(()=>{ + chart1=echarts.init(chartRef1.current) + const option={ + legend:{ + show:true, + data:['发电机','输油管道','维修中','待验收','停用'], + position:'right', + orient: 'vertical', + right:'18%', + top:'20%', + itemHeight:4, + itemWidth:15, + }, + series: [ + { + type: 'pie', + radius: ['50%', '70%'], // 环形的内外半径，实现环形效果 + center: ['40%', '60%'], // 环形图的中心位置 + data: [ + { name: '发电机', value: 15, itemStyle: { color: '#B7E5D599' } }, + { name: '输油管道', value: 30, itemStyle: { color: '#FADD7F99' } }, + { name: '维修中', value: 20, itemStyle: { color: '#C4B7E599' } }, + { name: '待验收', value: 25, itemStyle: { color: '#7FC1FA99' } }, + { name: '停用', value: 10, itemStyle: { color: '#FA7FA499' } }, + ], + label: { + show: false, // 可根据需求显示标签 + }, + }, + ], + } + chart1.setOption(option) + return ()=>{ + chart1.dispose() + } + },[]) + useEffect(()=>{ + chart2=echarts.init(chartRef2.current) + const option={ + xAxis:{ + type:'category', + data:['第1周','第2周','第3周','第4周','第5周'] + }, + yAxis:{ + type:'value', + max: 100, // y轴最大值匹配示例图 + interval: 25, // y轴刻度间隔 + // name:'设备缺陷数', + }, + grid:{ + left:'10%', + right:'10%', + bottom:0, + top:'20%', + containLabel: true + }, + series:[ + { + type:'bar', + data: [56, 32, 85, 15, 27], + barWidth: '30%', + itemStyle: { + color: 'teal' // 柱子颜色，可根据需求调整 + }, + label:{ + position:'top', + show:true, + } + } + ] + } + chart2.setOption(option) + return ()=>{ + chart2.dispose() + } + },[]) + useEffect(()=>{ + chart3=echarts.init(chartRef3.current) + const option={ + legend:{ + data:['已闭环','处理中','待处理'], + orient:'vertical', + position:'right', + top:'40%', + right:'18%', + itemHeight:4, + itemWidth:15, + show:true, + }, + series:[ + { + type:'pie', + radius: ['50%', '70%'], // 环形的内外半径，实现环形效果 + center: ['40%', '60%'], // 环形图的中心位置 + data:[ + {name:'已闭环',value:'13',itemStyle:{color:'#44BB5F99'}}, + {name:'处理中',value:'15',itemStyle:{color:'#FADD7F99'}}, + {name:'待处理',value:'40',itemStyle:{color:'#A990EA99'}}, + ], + label:{ + show:false + } + } + ] + } + chart3.setOption(option) + return ()=>{ + chart3.dispose() + } + },[]) + useEffect(()=>{ + const list1=[ + {'职位': "集控副值", '名称': "冯毅芜", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控主值", '名称': "赵威皓", '状态': "已离岗", '时间': "00:00-07:59"}, + {'职位': "集控副值", '名称': "赵子峰", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控主值", '名称': "周珊珊", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控副值", '名称': "何仙超", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控副值", '名称': "赵小瑞", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控副值", '名称': "王英", '状态': "正常排班", '时间': "00:00-07:59"}, + {'职位': "集控副值", '名称': "周海迪", '状态': "正常排班", '时间': "00:00-07:59"} + ] + const list2=[ + {'职位': "集控副值", '名称': "赵竹林", '状态': "正常排班", '时间': "08:00-15:59"}, + {'职位': "集控主值", '名称': "李斌", '状态': "正常排班", '时间': "08:00-15:59"}, + {'职位': "集控副值", '名称': "郑雅", '状态': "待到岗", '时间': "08:00-15:59"}, + {'职位': "集控主值", '名称': "冯艺莲", '状态': "待到岗", '时间': "08:00-15:59"}, + {'职位': "集控副值", '名称': "郑盈", '状态': "正常排班", '时间': "08:00-15:59"}, + {'职位': "集控主值", '名称': "孙东辉", '状态': "正常排班", '时间': "08:00-15:59"}, + {'职位': "集控副值", '名称': "李金颖", '状态': "待到岗", '时间': "08:00-15:59"}, + {'职位': "集控主值", '名称': "吴恒", '状态': "待到岗", '时间': "08:00-15:59"} + ] + const list3=[ + {'职位': "集控副值", '名称': "王敦强", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控主值", '名称': "赵紫豪", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控副值", '名称': "何能", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "值长", '名称': "王溪蕾", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控副值", '名称': "赵涛", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控副值", '名称': "周伟林", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控主值", '名称': "李靖霜", '状态': "正常排班", '时间': "16:00-23:59"}, + {'职位': "集控副值", '名称': "何忠琴", '状态': "正常排班", '时间': "16:00-23:59"} + ] + setData1(list1) + setData2(list2) + setData3(list3) + + },[]) + + + + const defectData = [ + { + rank: 'NO.1', + defectType: '类型A', + deviceName: '设备A', + occurrenceCount: 12, + recentTime: '2025-08-04' + }, + { + rank: 'NO.2', + defectType: '类型A', + deviceName: '设备A', + occurrenceCount: 12, + recentTime: '2025-08-04' + }, + { + rank: 'NO.3', + defectType: '类型A', + deviceName: '设备A', + occurrenceCount: 12, + recentTime: '2025-08-04' + }, + { + rank: 'NO.4', + defectType: '类型A', + deviceName: '设备A', + occurrenceCount: 12, + recentTime: '2025-08-04' + }, + { + rank: 'NO.5', + defectType: '类型A', + deviceName: '设备A', + occurrenceCount: 12, + recentTime: '2025-08-04' + } + ]; + const columns = [ + { + title: '排名', + dataIndex: 'rank', + key: 'rank', + width: '10%', + }, + { + title: '缺陷类型', + dataIndex: 'defectType', + key: 'defectType', + width: '20%', + }, + { + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName', + width: '20%', + }, + { + title: '发生次数', + dataIndex: 'occurrenceCount', + key: 'occurrenceCount', + width: '20%', + }, + { + title: '最近发生时间', + dataIndex: 'recentTime', + key: 'recentTime', + width: '30%', + } + ]; + + + const colorMap={ + '严重':'#FF2526', + '一般':'#FF8800', + '轻微':'#FFBC00', + } + const columnsRight = [ + { title: '序号', dataIndex: '序号', key: '序号' }, + { title: '发现时间', dataIndex: '发现时间', key: '发现时间' }, + { title: '缺陷类型', dataIndex: '缺陷类型', key: '缺陷类型' }, + { title: '设备名称', dataIndex: '设备名称', key: '设备名称' }, + { title: '缺陷发现人', dataIndex: '缺陷发现人', key: '缺陷发现人' }, + { title: '缺陷等级', dataIndex: '缺陷等级', key: '缺陷等级' ,render:(value)=>{ + return {value} + }}, + { title: '状态', dataIndex: '状态', key: '状态' } + ] + const dataSource=[ + { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '李福娃', '缺陷等级': '严重', '状态': '处理中' }, + { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '何余', '缺陷等级': '一般', '状态': '已闭环' }, + { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '孙玉轩', '缺陷等级': '轻微', '状态': '待处理' }, + { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '钱一唯', '缺陷等级': '严重', '状态': '处理中' }, + { '序号': 1, '发现时间': '2025-08-05', '缺陷类型': '白班电气巡检线1', '设备名称': '设备A', '缺陷发现人': '吴那', '缺陷等级': '严重', '状态': '处理中' }, + ] + return
+ + +
+ + + + + + + + + + + 正常排班 + 待到岗 + 已离岗 + + + +
00:00-07:59
+ {data1?.map(item=>{ + if(item['状态']==='正常排班'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else if(item['状态']==='待到岗'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else{ + return ( + + {item['职位']}： + {item['名称']} + + ) + } + + })} + + +
08:00-15:59
+ {data2?.map(item=>{ + if(item['状态']==='正常排班'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else if(item['状态']==='待到岗'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else{ + return ( + + {item['职位']}： + {item['名称']} + + ) + } + + })} + + +
16:00-23:59
+ {data3?.map(item=>{ + if(item['状态']==='正常排班'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else if(item['状态']==='待到岗'){ + return ( + + {item['职位']}： + {item['名称']} + + ) + }else{ + return ( + + {item['职位']}： + {item['名称']} + + ) + } + + })} + + +
+ + +
+ + + + + +
+ + +
+
白班
+
未开始
+ + +
白班
+
进行中
+ + +
白班
+
未开始
+ + +
+ +
+
+ + + + +
+ + + +
+ + +
+ + +
+
+ + +
+ + +
+ + + +
+ + +
+ + +
+
+ + +
+ + +
+} +//接班班组签到 +const TheSuccessorTeamSignsIn=()=>{ + const columns = [ + { + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName' + }, + { + title: '关注指标', + dataIndex: 'focusIndex', + key: 'focusIndex' + }, + { + title: '指标值', + dataIndex: 'indexValue', + key: 'indexValue' + }, + { + title: '状态', + dataIndex: 'status', + key: 'status' + }, + { + title: '备注', + dataIndex: 'remark', + key: 'remark' + } + ]; + const datasource = [ + { + deviceName: '1# 发电机', + focusIndex: '轴承温度', + indexValue: '65℃', + status: '正常', + remark: '无异常' + }, + { + deviceName: '输油管道段 A', + focusIndex: '压力', + indexValue: '0.45MPa', + status: '正常', + remark: '压力稳定' + }, + { + deviceName: '中控室监控系统', + focusIndex: '信号强度', + indexValue: '95%', + status: '正常', + remark: '无丢包' + } + ]; + return( +
+ +
+ + + + + + + + + + + + + +
+ + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + +
+ ) +} +//当班值长交班日志 +const TheShiftManagerOnDutyIsTheShiftLog=()=>{ + const columns = [ + { + title: '设备名称', + dataIndex: 'deviceName', + key: 'deviceName' + }, + { + title: '关注指标', + dataIndex: 'focusIndex', + key: 'focusIndex' + }, + { + title: '指标值', + dataIndex: 'indexValue', + key: 'indexValue' + }, + { + title: '状态', + dataIndex: 'status', + key: 'status' + }, + { + title: '备注', + dataIndex: 'remark', + key: 'remark' + } + ]; + const datasource = [ + { + deviceName: '1# 发电机', + focusIndex: '轴承温度', + indexValue: '65℃', + status: '正常', + remark: '无异常' + }, + { + deviceName: '输油管道段 A', + focusIndex: '压力', + indexValue: '0.45MPa', + status: '正常', + remark: '压力稳定' + }, + { + deviceName: '中控室监控系统', + focusIndex: '信号强度', + indexValue: '95%', + status: '正常', + remark: '无丢包' + } + ]; + return( +
+ +
+ + + + + + + + + + + + + +
+ + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ + +
+ ) +} +//历史日值记录查询 +const HistoricalDailyValueRecordQuery=()=>{ + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取 + 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', + key: 'serial' + }, + { + title: '岗位类型', + dataIndex: 'postType', + key: 'postType' + }, + { + title: '值别', + dataIndex: 'dutyLevel', + key: 'dutyLevel' + }, + { + title: '班次', + dataIndex: 'shift', + key: 'shift' + }, + { + title: '签到日期', + dataIndex: 'signDate', + key: 'signDate' + }, + { + title: '签到时间', + dataIndex: 'signTime', + key: 'signTime' + }, + { + title: '签到人员', + dataIndex: 'signPerson', + key: 'signPerson' + }, + { + title: '签到日志', + dataIndex: 'signLog', + key: 'signLog' + }, + { + title: '签到状态', + dataIndex: 'signStatus', + key: 'signStatus' + }, + { + title: '接班人员', + dataIndex: 'handoverPerson', + key: 'handoverPerson' + }, + { + title: '接班时间', + dataIndex: 'handoverTime', + key: 'handoverTime' + }, + { + title: '操作', + dataIndex: 'operation', + key: 'operation', + render: (_,record) => handleView(record)} style={{color:'#2C9E9D'}}>查看详情 + } + ]; + const dataSource = [ + { + key: '1', + serial: '1', + postType: '中控室', + dutyLevel: '五', + shift: '中班', + signDate: '2025-09-08', + signTime: '2025-10-12 05:16', + signPerson: '周子喧', + signLog: '签到', + signStatus: '正常签到', + handoverPerson: '---', + handoverTime: '---' + }, + { + key: '2', + serial: '2', + postType: '中控室', + dutyLevel: '五', + shift: '白班', + signDate: '2025-09-02', + signTime: '2025-10-03 05:08', + signPerson: '钱品妍', + signLog: '管理补签-补签', + signStatus: '补签', + handoverPerson: '冯毅延', + handoverTime: '2025-10-07 11:55' + }, + { + key: '3', + serial: '3', + postType: '中控室', + dutyLevel: '二', + shift: '中班', + signDate: '2025-08-25', + signTime: '2025-09-29 04:02', + signPerson: '赵义', + signLog: '签到', + signStatus: '正常签到', + handoverPerson: '---', + handoverTime: '---' + }, + { + key: '4', + serial: '4', + postType: '中控室', + dutyLevel: '二', + shift: '白班', + signDate: '2025-08-12', + signTime: '2025-09-26 10:55', + signPerson: '李丽茵', + signLog: '管理补签', + signStatus: '补签', + handoverPerson: '李斌', + handoverTime: '2025-09-25 22:38' + }, + { + key: '5', + serial: '5', + postType: '中控室', + dutyLevel: '二', + shift: '中班', + signDate: '2025-08-06', + signTime: '2025-09-23 06:37', + signPerson: '李景', + signLog: '签到', + signStatus: '正常签到', + handoverPerson: '---', + handoverTime: '---' + }, + { + key: '6', + serial: '6', + postType: '中控室', + dutyLevel: '三', + shift: '夜班', + signDate: '2025-07-25', + signTime: '2025-08-28 07:31', + signPerson: '王佛瑶', + signLog: '签到', + signStatus: '正常签到', + handoverPerson: '---', + handoverTime: '---' + } + ]; + + const handleView=(record)=>{ + setRow(record) + setOpen(true) + } + // 处理页码变化 + const handlePageChange = (page, pageSize) => { + setCurrentPage(page); + setPageSize(pageSize); + }; + + // 处理每页条数变化 + const handlePageSizeChange = (current, size) => { + setPageSize(size); + setCurrentPage(1); // 重置到第一页 + }; + + return( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ setOpen(false)} row={row}> + + + + +
+ +
+ ) +} +const items = [ + { + label: }>, + key:'巡检记录', + children:[ + {label:'巡检记录首页',key:'巡检记录首页'}, + {label:'接班班组签到',key:'接班班组签到'}, + {label:'当班值长交班日志',key:'当班值长交班日志'}, + {label:'历史日值记录查询',key:'历史日值记录查询'}, + ] + }, + { + label: }>, + key:'巡检状态管理', + children:[ + + ] + }, + { + label: }>, + key:'设备台账数据', + children:[ + + ] + }, + { + label: }>, + key:'缺陷管理', + children:[ + + ] + }, +] +const tabList={ + '巡检记录首页': , + '接班班组签到': , + '当班值长交班日志': , + '历史日值记录查询': +} +const InspectionRecords=()=>{ + const [current,setCurrent]=useState('巡检记录首页') + const onClick=(e)=>{ + setCurrent(e.key) + } + return( + <> +
+
+ 当前：  {current} +
+ + + +
+ {tabList[current]} + + ) +} +export default InspectionRecords diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less new file mode 100644 index 0000000..1d7306c --- /dev/null +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less @@ -0,0 +1,134 @@ +.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{ + width: 298px; + background-position: -56px -6px; + background-repeat: no-repeat; + height: 54px; + font-size: 20px; + font-weight: 400; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + } +.menu{ + :global(.ant-menu-title-content){ + color: rgba(0, 102, 101, 1); + font-size:16px; + } + :global(.parallelogram-container___Lxkxf){ + height:30px; + margin-top: 12px; + } +} +.state1{ + color:#4E5856 +} +.state2{ + color:#2C9E9D +} +.state3{ + color:#999999 +} +.state1,.state2,.state3{ + font-size: 16px; +} +.inspection-table{ + :global(.ant-table-cell){ + background-color:#F0F7F7; + padding:16px 1px !important; + border-bottom: 0.5px solid #DBE8E5 !important; + } +} +.inspection-table1{ + :global(.ant-table-cell){ + background-color:#F0F7F7; + padding:12px 1px !important; + border-bottom: 0.5px solid #DBE8E5 !important; + } +} +.paiBanState{ + 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); + background: #828C8833; + backdrop-filter: blur(8px); + box-shadow: -2px 4px 10px 0 #9191910D; + border-radius: 4px; + opacity: 1; + padding:6px 8px; + margin-top: 10px; + font-size: 12px; + } +.paiBanState1{ + 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); + background: #05454480; + backdrop-filter: blur(8px); + box-shadow: -2px 4px 10px 0 #9191910D; + border-radius: 4px; + opacity: 1; + padding:6px 8px; + margin-top: 10px; + color:#fff; + font-size: 12px; +} +.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; +} +.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; + } + } +} diff --git a/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.js b/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.js new file mode 100644 index 0000000..931bbb9 --- /dev/null +++ b/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.js @@ -0,0 +1,77 @@ +import { Button, Col, Input, Row, Select } from "antd"; +import { useState } from "react"; +import styles from './InspectionTaskPlan.less'; +// 导入图片 +import tempImage from '../../../../assets/img/temp1.png'; + +const { Search } = Input; +const { Option } = Select; + + +const InspectionTaskPlan = () => { + // 状态管理 + const [searchValue, setSearchValue] = useState(''); + const [filterStatus, setFilterStatus] = useState(''); + + // 处理搜索 + const handleSearch = (value) => { + setSearchValue(value); + console.log('搜索:', value); + // 这里可以实现搜索逻辑 + }; + + // 处理状态筛选 + const handleStatusFilter = (value) => { + setFilterStatus(value); + console.log('筛选状态:', value); + // 这里可以实现筛选逻辑 + }; + + // 处理重置 + const handleReset = () => { + setSearchValue(''); + setFilterStatus(''); + console.log('重置搜索和筛选'); + }; + + return ( +
+ {/* 搜索和筛选区域 */} + + + setSearchValue(e.target.value)} + value={searchValue} + style={{ width: '100%' }} + /> + + + + + + + + + + {/* 下方留白区域 */} +
+ 巡检计划 +
+
+ ); +} + +export default InspectionTaskPlan; diff --git a/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.less b/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.less new file mode 100644 index 0000000..7609541 --- /dev/null +++ b/src/pages/inspectionmanagement/components/Inspectiontaskplan/InspectionTaskPlan.less @@ -0,0 +1,59 @@ +@import '@/global.less'; + +.container { + padding: 20px; + background: #fff; + min-height: 100vh; + border-radius: 8px; +} + +.searchArea { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); +} + +.emptyArea { + background-color: #fff; + min-height: 400px; + margin: 0; + padding: 0; +} + +.searchArea :global { + .ant-input { + background: transparent; + } + + .ant-select-selector { + border: 1px solid #d9d9d9; + border-radius: 6px; + height: 40px; + display: flex; + align-items: center; + } + + .ant-select-selector:hover { + border-color: #40a9ff; + border-right-width: 1px; + } + + .ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector { + border-color: #40a9ff; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + } +} + + + +@media (max-width: 768px) { + .container { + padding: 10px; + } + + .searchArea, + .emptyArea { + padding: 15px; + } +} \ No newline at end of file diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index 09e81c6..65f7f89 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -20,6 +20,7 @@ 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 InspectionManagement from '@/assets/img/InspectionManagement.svg' import { CustomBreadcrumb } from '@/components/GlobalComponent' @@ -88,6 +89,12 @@ const SystemContentList = (props) => { setMenuItems(newList) const fixedMenuItems = [ + { + "path": "/topnavbar00/business/inspectionmanagement", + icon: 巡检管理, + "key": "/topnavbar00/business/inspectionmanagement", + "label": "巡检管理" + }, { "path": "/topnavbar00/business/inspectiontasks", icon: 巡检任务, diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 09f890e..22df23f 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -12,6 +12,10 @@ const menuItem = [ label: '巡检任务', key: '/topnavbar00/business/inspectiontasks', }, + { + label: '巡检管理', + key: '/topnavbar00/business/inspectionmanagement', + }, ] const TopNavBar = (props) => {