From f1aa893cd384f3dded3dc26c459ab8d4b388aea6 Mon Sep 17 00:00:00 2001 From: yupeng Date: Tue, 28 Oct 2025 11:37:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2=EF=BC=9A?= =?UTF-8?q?=E5=B7=A1=E6=A3=80=E7=AE=A1=E7=90=86=E2=80=94-=E5=B7=A1?= =?UTF-8?q?=E6=A3=80=E7=82=B9=E7=AE=A1=E7=90=86=E2=80=94-=E5=85=B3?= =?UTF-8?q?=E8=81=94=E9=9A=90=E6=82=A3=E6=8E=92=E6=9F=A5=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/progress1.svg | 196 +++ .../InspectionManagement.js | 125 +- .../Inspectionrecords/inspectionRecords.js | 1451 +++-------------- .../Inspectionrecords/inspectionRecords.less | 402 +++-- 4 files changed, 780 insertions(+), 1394 deletions(-) create mode 100644 src/assets/img/progress1.svg diff --git a/src/assets/img/progress1.svg b/src/assets/img/progress1.svg new file mode 100644 index 0000000..c38c846 --- /dev/null +++ b/src/assets/img/progress1.svg @@ -0,0 +1,196 @@ + + + + + + + + + + + + + +
 + + + + + + +
 + + + + +
 + + + +
 + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/inspectionmanagement/InspectionManagement.js b/src/pages/inspectionmanagement/InspectionManagement.js index 3fa6a6b..e2a9ab2 100644 --- a/src/pages/inspectionmanagement/InspectionManagement.js +++ b/src/pages/inspectionmanagement/InspectionManagement.js @@ -1,73 +1,60 @@ -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"; +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 = () => { + { + key: '1', + label: '巡检管理类型', + children: + }, + { + key: '3', + label: '巡检点管理', + children: + } +]; +const InspectionManagement = () => { + const customTheme = { + token: { + primaryColor: '#00b42a', + colorPrimaryHover: '#39c574', + colorPrimaryActive: '#008743' + }, + components: { + Switch: { + colorPrimary: '#008743', + colorBg: '#333' + }, + Pagination: { + colorPrimary: '#39c574' + }, + Tree: { + colorPrimary: '#006665', + lineColor: '#006665', + checkboxBorderColor: '#006665' + }, + Table: { + headerBg: '#F0F7F7' + }, + Menu: { + activeBarHeight: 0 + }, + Select: { + activeBorderColor: '#2C9E9D' + } } - return <> - - - - -} + }; + + const onChange = () => {}; + + return ( + + + + ); +}; + export default InspectionManagement; \ No newline at end of file diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js index 82fb87f..fd3f41f 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js @@ -1,1271 +1,288 @@ -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} - - - - -
    -
  • 1#储油罐液位10.5m稳定，输油主泵压力0.6MPa无波动，中控室DCS系统信号冗余度99%
    • -
- - - - - ) -} +import React, { useState } from 'react'; +import { Button, Tree, Table, Pagination, Checkbox } from 'antd'; +import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import styles from './inspectionRecords.less'; +import progress1 from '@/assets/img/progress1.svg'; +import btnImg1 from '@/assets/img/planBtn1.png'; +import btnImg2 from '@/assets/img/planBtn2.png'; +// 巡检点管理组件 +const InspectionRecords = () => { + const [currentPage, setCurrentPage] = useState(6); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(85); // 总条数 -//巡检记录首页 -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: [ + // 树形结构数据 - 隐患排查项 + const treeData = [ + { + title: '储罐储存区', + key: '储罐储存区', + children: [ { - data: [25, 50, 30, 25, 30], // 第一条折线数据 - type: 'line', - symbol: 'circle', // 标记点样式（圆点） - symbolSize: 8, // 标记点大小 - itemStyle: { color: '#00A1FF' } // 标记点颜色 + title: '储油设备', + key: '储油设备', + children: [ + { + title: '罐体隐患', + key: '罐体隐患', + children: [ + { + title: '罐体温度是否正常', + key: '罐体温度是否正常', + checkable: true, + }, + { + title: '罐体是否有锈蚀渗漏', + key: '罐体是否有锈蚀渗漏', + checkable: true, + }, + { + title: '罐体压力是否在规定范围', + key: '罐体压力是否在规定范围', + checkable: true, + }, + ], + }, + ], }, { - 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' } }, + title: '附件隐患', + key: '附件隐患', + children: [ + { + title: '呼吸阀是否通畅', + key: '呼吸阀是否通畅', + checkable: true, + }, + { + title: '阻火器是否完好', + key: '阻火器是否完好', + checkable: true, + }, + { + title: '液位计显示是否准确', + key: '液位计显示是否准确', + checkable: true, + }, ], - 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: '输油管道设备', + key: '输油管道设备', + children: [ + { + title: '管道压力是否稳定', + key: '管道压力是否稳定', + checkable: true, + }, + { + title: '管道是否存在泄漏', + key: '管道是否存在泄漏', + checkable: true, + }, + ], }, { - title: '备注', - dataIndex: 'remark', - key: 'remark' - } - ]; - const datasource = [ - { - deviceName: '1# 发电机', - focusIndex: '轴承温度', - indexValue: '65℃', - status: '正常', - remark: '无异常' + title: '消防设备', + key: '消防设备', + children: [ + { + title: '灭火器压力是否正常', + key: '灭火器压力是否正常', + checkable: true, + }, + { + title: '消防水带是否破损', + key: '消防水带是否破损', + checkable: true, + }, + ], }, { - deviceName: '输油管道段 A', - focusIndex: '压力', - indexValue: '0.45MPa', - status: '正常', - remark: '压力稳定' + title: '油品装卸区', + key: '油品装卸区', + children: [ + { + title: '装卸设备', + key: '装卸设备', + children: [ + { + title: '泵体设备是否稳定', + key: '泵体设备是否稳定', + checkable: true, + }, + { + title: '泵体温度是否超限', + key: '泵体温度是否超限', + checkable: true, + }, + { + title: '泵体振动是否异常', + key: '泵体振动是否异常', + checkable: true, + }, + ], + }, + ], }, - { - deviceName: '中控室监控系统', - focusIndex: '信号强度', - indexValue: '95%', - status: '正常', - remark: '无丢包' - } ]; - return( -
- -
- - - - - - - - - - - - - -
- - -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
- - -
- ) -} -//当班值长交班日志 -const TheShiftManagerOnDutyIsTheShiftLog=()=>{ - const columns = [ - { - title: '设备名称', - dataIndex: 'deviceName', - key: 'deviceName' - }, - { - title: '关注指标', - dataIndex: 'focusIndex', - key: 'focusIndex' - }, + // 表格数据 + const tableData = [ { - title: '指标值', - dataIndex: 'indexValue', - key: 'indexValue' - }, - { - title: '状态', - dataIndex: 'status', - key: 'status' + key: '1', + serialNumber: '1', + riskClassification: '储罐储存区', + riskName: '罐体温度是否正常', + requiredTools: '<70℃、天然气探测、接地电阻≤4Ω', + riskModule: '存储风险管控', + relatedPoints: '', }, { - title: '备注', - dataIndex: 'remark', - key: 'remark' - } - ]; - const datasource = [ - { - deviceName: '1# 发电机', - focusIndex: '轴承温度', - indexValue: '65℃', - status: '正常', - remark: '无异常' + key: '2', + serialNumber: '2', + riskClassification: '储罐储存区', + riskName: '罐体是否有锈蚀渗漏', + requiredTools: '<70℃、天然气探测、接地电阻≤4Ω', + riskModule: '存储风险管控', + relatedPoints: '', }, { - deviceName: '输油管道段 A', - focusIndex: '压力', - indexValue: '0.45MPa', - status: '正常', - remark: '压力稳定' + key: '3', + serialNumber: '3', + riskClassification: '储罐储存区', + riskName: '罐体压力是否在规定范围', + requiredTools: '<70℃、天然气探测、接地电阻≤4Ω', + riskModule: '存储风险管控', + relatedPoints: '', }, - { - 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: 'serialNumber', + key: 'serialNumber', + render: (text) => {text}, }, { - title: '签到日期', - dataIndex: 'signDate', - key: 'signDate' + title: '隐患分类', + dataIndex: 'riskClassification', + key: 'riskClassification', }, { - title: '签到时间', - dataIndex: 'signTime', - key: 'signTime' + title: '隐患名称', + dataIndex: 'riskName', + key: 'riskName', }, { - title: '签到人员', - dataIndex: 'signPerson', - key: 'signPerson' + title: '排查检测器具', + dataIndex: 'requiredTools', + key: 'requiredTools', }, { - title: '签到日志', - dataIndex: 'signLog', - key: 'signLog' + title: '所属风险模块', + dataIndex: 'riskModule', + key: 'riskModule', }, { - title: '签到状态', - dataIndex: 'signStatus', - key: 'signStatus' - }, - { - title: '接班人员', - dataIndex: 'handoverPerson', - key: 'handoverPerson' - }, - { - title: '接班时间', - dataIndex: 'handoverTime', - key: 'handoverTime' + title: '已关联巡检点', + dataIndex: 'relatedPoints', + key: 'relatedPoints', }, { 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: 'action', + render: () => ( + <> + + + + + ), }, - { - 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) => { + // 处理分页变化 + const handlePageChange = (page, size) => { setCurrentPage(page); - setPageSize(pageSize); - }; - - // 处理每页条数变化 - const handlePageSizeChange = (current, size) => { setPageSize(size); - setCurrentPage(1); // 重置到第一页 }; - return( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
- setOpen(false)} row={row}> - - - - + return ( +
+ {/* 顶部进度条 */} +
+ + {/* 主体内容区域 */} +
+ {/* 左侧树形结构 */} +
+
隐患排查项
+
- -
- ) -} -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} -
- + {/* 表格 */} + - + {/* 分页 */} +
+ 共 {total} 条 + `共 ${total} 条`} + /> +
+ - {tabList[current]} - - ) -} -export default InspectionRecords + + ); +}; + +export default InspectionRecords; \ No newline at end of file diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less index 1d7306c..757f7ec 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less @@ -1,134 +1,320 @@ -.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; +/* 巡检点管理组件样式 */ +.container { + padding: 20px; + background-color: #ffffff; + min-height: 100vh; + border-radius: 10px; } -.logo{ - width: 298px; - background-position: -56px -6px; + +/* 进度条容器 */ +.progressContainer { + margin-bottom: 20px; + width: 810px; + height: 48px; + background-image: url('~@/assets/img/progress1.svg'); + background-position: left top; background-repeat: no-repeat; - height: 54px; - font-size: 20px; - font-weight: 400; - color: #fff; + overflow: hidden; +} + +/* 主体内容容器 */ +.contentContainer { 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; - } + gap: 20px; } -.state1{ - color:#4E5856 + +/* 主体内容容器 */ +.contentContainer { + display: flex; + gap: 20px; } -.state2{ - color:#2C9E9D + +/* 左侧树形结构区域 */ +.leftSide { + flex: 0 0 300px; + background: #e8f1ec; + padding: 20px; + max-height: calc(100vh - 150px); + overflow-y: auto; + border-radius: 4px; + border: 1px solid; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%); + box-shadow: 1px 2px 5px 0px rgba(0, 102, 101, 0.25); + + box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05); + + box-shadow: -7px 17px 18px 0px rgba(145, 145, 145, 0.04); + + box-shadow: -15px 37px 24px 0px rgba(145, 145, 145, 0.03); + + box-shadow: -27px 66px 29px 0px rgba(145, 145, 145, 0.01); + + box-shadow: -42px 103px 31px 0px rgba(145, 145, 145, 0); + + backdrop-filter: blur(3.4000000953674316px) +} + +.leftSide .ant-tree-list { + background: #e8f1ec; } -.state3{ - color:#999999 + +.tree { + background: #e8f1ec; } -.state1,.state2,.state3{ + +/* 树形结构标题 */ +.treeTitle { font-size: 16px; + font-weight: 500; + margin-bottom: 16px; + color: #333; + padding-bottom: 8px; + border-bottom: 1px solid #f0f0f0; } -.inspection-table{ - :global(.ant-table-cell){ - background-color:#F0F7F7; - padding:16px 1px !important; - border-bottom: 0.5px solid #DBE8E5 !important; + +/* 树形结构样式 */ +.tree { + .ant-tree-treenode { + margin-bottom: 4px; } -} -.inspection-table1{ - :global(.ant-table-cell){ - background-color:#F0F7F7; - padding:12px 1px !important; - border-bottom: 0.5px solid #DBE8E5 !important; + + .ant-tree-node-content-wrapper { + padding: 4px 8px; + border-radius: 4px; + transition: all 0.2s; + + &:hover { + background-color: #f0f7f7; + } + } + + .ant-tree-checkbox-checked .ant-tree-checkbox-inner { + background-color: #006665; + border-color: #006665; + } + + .ant-tree-checkbox:hover .ant-tree-checkbox-inner { + border-color: #006665; + } + + .ant-tree-selected .ant-tree-node-content-wrapper { + background-color: #f0f7f7; + color: #006665; + font-weight: 500; } } -.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; + +/* 右侧表格区域 */ +.rightSide { + flex: 1; + background: white; + padding: 20px; + display: flex; + flex-direction: column; +} + +/* 顶部按钮区域 */ +.topButtons { + display: flex; + margin-bottom: 20px; } -.delBtn{ - background-size:cover; - background-position:center; - color:#000; + +.delBtn { + background-size: cover; + background-position: center; + color: #000; //opacity:0.7; - border-radius:4px; + border-radius: 4px; width: 88px; height: 36px; } -.exportBtn{ - background-size:cover; - background-position:center; - color:#fff; - opacity:0.7; - border-radius:4px; - width: 88px; + +/* 按钮样式 */ +.button { + border: none; + // background-color: transparent; + padding: 6px 16px; + font-size: 14px; + color: #fff; + transition: all 0.3s; + background-position: center; + background-size: cover; height: 36px; + + &:hover { + opacity: 0.9; + } + + &.ant-btn-danger { + color: #fff; + } } -.resetBtn{ - background-size:cover; - background-position:center; - color:#006665; - //opacity:0.7; - border-radius:4px; - width: 88px; + +/* 搜索区域 */ +.searchContainer { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +/* 搜索框样式 */ +.searchBox { + display: flex; + align-items: center; + border: 1px solid #d9d9d9; + border-radius: 4px; + padding: 0 12px; + width: 300px; height: 36px; + transition: all 0.3s; + + &:focus-within { + border-color: #006665; + box-shadow: 0 0 0 2px rgba(0, 102, 101, 0.1); + } + + .anticon { + color: #999; + margin-right: 8px; + } + + .searchInput { + border: none; + outline: none; + flex: 1; + height: 100%; + font-size: 14px; + + &::placeholder { + color: #bfbfbf; + } + } } -.customDrawer{ - :global(.ant-drawer-header){ - background-color:#B8E0D833 !important; + +/* 新增按钮 */ +.addButton { + background-color: #006665; + border-color: #006665; + border-radius: 4px; + padding: 6px 20px; + font-size: 14px; + transition: all 0.3s; + height: 36px; + + &:hover { + background-color: #00876e; + border-color: #00876e; + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } } -.drawerRow{ - margin: 10px 0 20px 0; - :global(.ant-col){ - margin-top: 10px; - color: #000; - span{ - color: #999999; - font-size:14px; + +/* 表格样式 */ +.table { + margin-bottom: 20px; + + .ant-table-thead>tr>th { + background-color: #f0f7f7; + color: #333; + font-weight: 500; + border-bottom: 1px solid #e8e8e8; + padding: 12px 16px; + } + + .ant-table-tbody>tr>td { + padding: 12px 16px; + border-bottom: 1px solid #f0f0f0; + + &:last-child { + padding-right: 24px; } } + + .ant-table-tbody>tr:hover { + background-color: #fafafa; + } + + /* 自定义序号列宽度 */ + .ant-table-column-has-actions { + width: 80px; + } } + +/* 分页区域 */ +.pagination { + display: flex; + justify-content: flex-end; + align-items: center; + margin-top: auto; + padding-top: 20px; + border-top: 1px solid #f0f0f0; + + >span { + margin-right: 20px; + color: #666; + font-size: 14px; + } + + .ant-pagination { + display: flex; + align-items: center; + + .ant-pagination-item-active { + border-color: #006665; + + a { + color: #006665; + font-weight: 500; + } + } + + .ant-pagination-item:hover { + border-color: #006665; + + a { + color: #006665; + } + } + + .ant-pagination-prev:hover .ant-pagination-item-link, + .ant-pagination-next:hover .ant-pagination-item-link { + color: #006665; + border-color: #006665; + } + } +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .contentContainer { + flex-direction: column; + } + + .leftSide { + flex: none; + max-height: 400px; + } +} + +@media (max-width: 768px) { + .container { + padding: 10px; + } + + .searchContainer { + flex-direction: column; + gap: 12px; + align-items: stretch; + } + + .searchBox { + width: 100%; + } + + .pagination { + flex-direction: column; + align-items: center; + gap: 12px; + } +} \ No newline at end of file