- 当前: {current}
+ 当前: {current}
diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js
index bc2f277..f1984b0 100644
--- a/src/pages/nav_system_content/SystemContentList.js
+++ b/src/pages/nav_system_content/SystemContentList.js
@@ -21,6 +21,11 @@ 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 SmartInspection from '@/assets/img/smartinspection.svg'
+import SmartInspection1 from '@/assets/img/smartinspection1.svg'
+
+
+
import { CustomBreadcrumb } from '@/components/GlobalComponent'
@@ -95,6 +100,12 @@ const SystemContentList = (props) => {
"key": "/topnavbar00/business/inspectionmanagement",
"label": "巡检管理"
},
+ {
+ "path": "/topnavbar00/business/smartinspection",
+ icon:
,
+ "key": "/topnavbar00/business/smartinspection",
+ "label": "智能巡检"
+ },
{
"path": "/topnavbar00/business/inspectiontasks",
icon:
,
@@ -325,6 +336,10 @@ const SystemContentList = (props) => {
else if (item.key === '/topnavbar00/business/staffsheet' && typeof danger1 !== 'undefined') {
iconSrc = danger1;
}
+ // 智能巡检：激活态使用smartinspection1
+ else if (item.key === '/topnavbar00/business/smartinspection' && typeof SmartInspection1 !== 'undefined') {
+ iconSrc = SmartInspection1;
+ }
}
icon =
![]()
+ },
+ {
+ 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', // 点击时的颜色
+ },
+ 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',
+ colorBorder: '#2C9E9D'
+ },
+ Input: {
+ colorBorder: '#2C9E9D'
+ },
+ DatePicker: {
+ colorBorder: '#2C9E9D'
+ },
+ },
+ };
+ const onChange = () => {
+
+ }
+ return <>
+
+
+
+
+}
+export default InspectionTasks;
diff --git a/src/pages/smartinspection/SmartInspection.less b/src/pages/smartinspection/SmartInspection.less
new file mode 100644
index 0000000..2530686
--- /dev/null
+++ b/src/pages/smartinspection/SmartInspection.less
@@ -0,0 +1,23 @@
+.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;
+ }
+ //:global(.ant-picker,.ant-input){
+ // border:1px solid #2C9E9D !important;
+ //}
+}
+*{
+ font-size:16px
+}
diff --git a/src/pages/smartinspection/components/Inspectionrecords/SmartInspectionRecords.js b/src/pages/smartinspection/components/Inspectionrecords/SmartInspectionRecords.js
new file mode 100644
index 0000000..9e12ead
--- /dev/null
+++ b/src/pages/smartinspection/components/Inspectionrecords/SmartInspectionRecords.js
@@ -0,0 +1,2272 @@
+
+import styles from './inspectionRecords.less'
+import titleBg from '@/assets/img/recordTitleBg.png'
+import {useEffect, useRef, useState} from "react";
+import {Button, Col, DatePicker, Drawer, Form, Input, Menu, Row, Select, Table, Tag, Tree,} from "antd";
+import {MenuBg, TablePagination} from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan";
+import {DownOutlined, PlusOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons";
+import {Title} from "@/pages/inspectiontasks/InspectionTasks";
+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'
+import record1 from '@/assets/img/record1.png'
+import record2 from '@/assets/img/record2.png'
+import record3 from '@/assets/img/record3.png'
+
+const {RangePicker}=DatePicker
+
+const Drawers=(props)=>{
+ const columns = [
+ {
+ title: '设备名称',
+ dataIndex: 'deviceName',
+ key: 'deviceName',
+ // width: 200,
+ },
+ {
+ title: '关注指标',
+ dataIndex: 'metric',
+ key: 'metric',
+ // width: 150,
+ },
+ {
+ title: '指标值',
+ dataIndex: 'value',
+ key: 'value',
+ // width: 120,
+ render: (value) =>
{value},
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 70,
+ render: (status) => (
+
+ {status}
+
+ ),
+ },
+ {
+ title: '备注',
+ dataIndex: 'remark',
+ key: 'remark',
+ width:140,
+ ellipsis: true,
+ },
+ ];
+ // 数据源
+ const dataSource = [
+ {
+ key: '1',
+ deviceName: '1# 储油罐',
+ metric: '液位高度',
+ value: '10.5m',
+ status: '正常',
+ remark: '无泄漏',
+ },
+ {
+ key: '2',
+ deviceName: '输油主泵',
+ metric: '出口压力',
+ value: '0.6MPa',
+ status: '正常',
+ remark: '振动值<3mm/s',
+ },
+ {
+ key: '3',
+ deviceName: '中控室 DCS 系统',
+ metric: '信号冗余度',
+ value: '99%',
+ status: '正常',
+ remark: '双路供电稳定',
+ },
+ ];
+ 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%
+
+
+
+
+
+
+
+
+ )
+}
+const InspectionStatusComponent=({shifts,valueLong,statues,dataSource})=>{
+ const columns = [
+ {
+ title: '巡检名称',
+ dataIndex: 'inspectionName',
+ key: 'inspectionName',
+ align:'center',
+ width:'20%',
+ },
+ {
+ title: '巡检状态',
+ dataIndex: 'inspectionStatus',
+ key: 'inspectionStatus',
+ align:'center',
+ width:'20%',
+ },
+ {
+ title: '巡检人',
+ dataIndex: 'inspector',
+ key: 'inspector',
+ align:'center',
+ width:'20%',
+ },
+ {
+ title: '已巡区域',
+ dataIndex: 'inspectedArea',
+ key: 'inspectedArea',
+ align:'center',
+ width:'20%',
+ render:(value)=>{
+ return <>
+
{value}
+
+ }
+ },
+ {
+ title: '漏检区域',
+ dataIndex: 'missedArea',
+ key: 'missedArea',
+ align:'center',
+ width:'20%',
+ render:(value)=>{
+ return <>
+
{value}
+
+ }
+ },
+ ];
+ return(
+ <>
+
+ 班次: {shifts}
+ 值长: {valueLong}
+ 签到状态: {statues}
+
+
+
+
+
+ )
+}
+const Drawers1=({open,onClose,row})=>{
+ console.log(row)
+ return(
+
+
+
+
+
+ 设备名称:
+ {row.equipmentName}
+
+
+
+
+ 异常属性:
+ {row.propertyName}
+
+
+
+
+ 阈值上限:
+ {row.max}
+
+
+
+
+ 实际检测值:
+ {row.inspectionValue}
+
+
+
+
+ 超限差值:
+ +500°C
+
+
+
+
+ 巡检负责人:
+ {row.inspector}
+
+
+
+
+ 巡检时间:
+ {row.inspectionTime}
+
+
+
+
+ 异常处理状态:
+ {row.inspectionStatus}
+
+
+
+
+ 处理建议(可选)：:
+ 立即停机检查，联系维保班组
+
+
+
+
+ )
+}
+const Drawers2=({open,row,onClose})=>{
+ console.log(row)
+ return(
+
+
+
+ {row.initialCategory}
+ {row.keyEquipment}
+ {row.equipmentNo}
+ {row.equipmentName}
+ {row.equipmentStatus}
+ {row.materialCategory}
+ {row.priceCategory}
+ {row.specialEquipmentCategory}
+ {row.quantity}
+ {row.unit}
+ {row.specification}
+ {row.installationLocation}
+ {row.sort}
+ 暂无
+
+
+
+
+
+
+ )
+}
+//巡检记录首页
+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(()=>{
+ if (!chartRef.current) {
+ return
+ }
+ 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(()=>{
+ if (!chartRef1.current) {
+ return
+ }
+ 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(()=>{
+ if (!chartRef2.current) {
+ return
+ }
+ 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(()=>{
+ if (!chartRef3.current) {
+ return
+ }
+ 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(
+
+
+
+
+
+
+
+
+
+
+
+
+ } className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>查询
+ } className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+//当班值长交班日志
+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(
+
+
+
+
+
+
+
+
+
+
+
+
+ } className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,margin:'0 20px'}}>查询
+ } className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+//历史日值记录查询
+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 CurrentInspectionStatusQuery=()=>{
+ const dataSource1=[]
+ const dataSource2 = [
+ {
+ key: '1',
+ inspectionName: '白班巡检',
+ inspectionStatus: '已完成',
+ inspector: '李宇宙',
+ inspectedArea: '已巡区域 (1)',
+ missedArea: '漏检区域 (0)',
+ },
+ ];
+ const dataSource3 = [
+ {
+ key: '1',
+ inspectionName: '白班巡检',
+ inspectionStatus: '已完成',
+ inspector: '赵健民',
+ inspectedArea: '已巡区域 (1)',
+ missedArea: '漏检区域 (0)',
+ },
+ ];
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+//当日巡检状态查询
+const InspectionStatusQueryOnTheSameDay=()=>{
+ 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: 'index',
+ key: 'index',
+ align: 'center',
+ width:100,
+ },
+ {
+ title: '巡检 ID',
+ dataIndex: 'inspectionId',
+ key: 'inspectionId',
+ align: 'center',
+ },
+ {
+ title: '设备名称',
+ dataIndex: 'equipmentName',
+ key: 'equipmentName',
+ align: 'center',
+ },
+ {
+ title: '巡检负责人',
+ dataIndex: 'inspector',
+ key: 'inspector',
+ align: 'center',
+ },
+ {
+ title: '巡检时间',
+ dataIndex: 'inspectionTime',
+ key: 'inspectionTime',
+ align: 'center',
+ },
+ {
+ title: '巡检状态',
+ dataIndex: 'inspectionStatus',
+ key: 'inspectionStatus',
+ align: 'center',
+ },
+ {
+ title: '属性名称',
+ dataIndex: 'propertyName',
+ key: 'propertyName',
+ align: 'center',
+ },
+ {
+ title: '阈值范围',
+ dataIndex: 'thresholdRange',
+ key: 'thresholdRange',
+ align: 'center',
+ },
+ {
+ title: '巡检值',
+ dataIndex: 'inspectionValue',
+ key: 'inspectionValue',
+ align: 'center',
+ },
+ {
+ title: '超限情况',
+ dataIndex: 'overLimit',
+ key: 'overLimit',
+ align: 'center',
+ },
+ {
+ title: '操作',
+ dataIndex: 'operation',
+ key: 'operation',
+ render: (_,record) =>
{
+ setRow(record)
+ setOpen(true)
+ }}>查看详情,
+ align: 'center',
+ },
+ ];
+ const onClose=function(){
+ setOpen(false)
+ }
+ const dataSource = [
+ {
+ key: '1',
+ index: 1,
+ inspectionId: 'XJ-20230519-001',
+ equipmentName: '#1 发电机',
+ inspector: '李恩霖',
+ inspectionTime: '2023-05-19 11:15',
+ inspectionStatus: '异常',
+ propertyName: '核心温度',
+ thresholdRange: '≤3000℃',
+ inspectionValue: '3500℃',
+ overLimit: '超过上限',
+ max:'3500℃',
+ },
+ {
+ key: '2',
+ index: 2,
+ inspectionId: 'XJ-20230519-002',
+ equipmentName: '#1 发电机',
+ inspector: '李瑞霜',
+ inspectionTime: '2023-05-19 11:30',
+ inspectionStatus: '异常',
+ propertyName: '核心温度',
+ thresholdRange: '≤3000℃',
+ inspectionValue: '2600℃',
+ overLimit: '超过上限',
+ max:'3000℃',
+ },
+ {
+ key: '3',
+ index: 3,
+ inspectionId: 'XJ-20230519-003',
+ equipmentName: '#1 发电机',
+ inspector: '赵礼义',
+ inspectionTime: '2023-05-19 10:15',
+ inspectionStatus: '异常',
+ propertyName: '核心温度',
+ thresholdRange: '≤3000℃',
+ inspectionValue: '4500℃',
+ overLimit: '超过上限',
+ max:'3000℃',
+ },
+ {
+ key: '4',
+ index: 4,
+ inspectionId: 'XJ-20230519-004',
+ equipmentName: '输油管道段 A',
+ inspector: '郑文英',
+ inspectionTime: '2023-05-19 09:30',
+ inspectionStatus: '已完成',
+ propertyName: '压力',
+ thresholdRange: '0.4-0.6MPa',
+ inspectionValue: '0.5MPa',
+ overLimit: '---',
+ max:'0.6MPa',
+ },
+ {
+ key: '5',
+ index: 5,
+ inspectionId: 'XJ-20230519-005',
+ equipmentName: '中控室 DCS 系统',
+ inspector: '王尊瑶',
+ inspectionTime: '2023-05-19 10:00',
+ inspectionStatus: '运行中',
+ propertyName: '信号冗余度',
+ thresholdRange: '≥95%',
+ inspectionValue: '98%',
+ overLimit: '---',
+ max:'95%',
+ },
+ {
+ key: '6',
+ index: 6,
+ inspectionId: 'XJ-20230519-006',
+ equipmentName: '消防水泵房',
+ inspector: '钱韵澄',
+ inspectionTime: '2023-05-19 11:00',
+ inspectionStatus: '已完成',
+ propertyName: '液位',
+ thresholdRange: '2-5m',
+ inspectionValue: '3.2m',
+ overLimit: '---',
+ max:'5m',
+ },
+ ];
+
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+//设备台账查询与维护
+const EquipmentLedgerQueryAndMaintenance=()=>{
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
+ const [open,setOpen]=useState(false)
+ const [row,setRow]=useState({})
+ // 表格列配置
+ const columns = [
+ {
+ title: '期初分类',
+ dataIndex: 'initialCategory',
+ key: 'initialCategory',
+ },
+ {
+ title: '重点设备',
+ dataIndex: 'keyEquipment',
+ key: 'keyEquipment',
+ },
+ {
+ title: '设备编号',
+ dataIndex: 'equipmentNo',
+ key: 'equipmentNo',
+ },
+ {
+ title: '设备名称',
+ dataIndex: 'equipmentName',
+ key: 'equipmentName',
+ },
+ {
+ title: '设备状态',
+ dataIndex: 'equipmentStatus',
+ key: 'equipmentStatus',
+ },
+ {
+ title: '物质分类',
+ dataIndex: 'materialCategory',
+ key: 'materialCategory',
+ },
+ {
+ title: '价格分类',
+ dataIndex: 'priceCategory',
+ key: 'priceCategory',
+ },
+ {
+ title: '特种设备分类',
+ dataIndex: 'specialEquipmentCategory',
+ key: 'specialEquipmentCategory',
+ },
+ {
+ title: '数量',
+ dataIndex: 'quantity',
+ key: 'quantity',
+ },
+ {
+ title: '计量单位',
+ dataIndex: 'unit',
+ key: 'unit',
+ },
+ {
+ title: '规格',
+ dataIndex: 'specification',
+ key: 'specification',
+ },
+ {
+ title: '安装位置',
+ dataIndex: 'installationLocation',
+ key: 'installationLocation',
+ },
+ {
+ title: '排序',
+ dataIndex: 'sort',
+ key: 'sort',
+ },
+ {
+ title: '操作',
+ key: 'operation',
+ render: (_,record) => (
+
+ ),
+ align:'center',
+ },
+ ];
+ // 表格数据
+ const dataSource = [
+ {
+ key: '1',
+ initialCategory: '电气系统',
+ keyEquipment: '是',
+ equipmentNo: 'eq-f611',
+ equipmentName: '#1发电机',
+ equipmentStatus: '已使用',
+ materialCategory: '设备',
+ priceCategory: '机组',
+ specialEquipmentCategory: '高压电机',
+ quantity: 1,
+ unit: '台',
+ specification: 'QFZN',
+ installationLocation: '定子间',
+ sort: 5,
+ },
+ {
+ key: '2',
+ initialCategory: '化学系统',
+ keyEquipment: '否',
+ equipmentNo: 'eq-p722',
+ equipmentName: '#2加药泵',
+ equipmentStatus: '备用',
+ materialCategory: '设备',
+ priceCategory: '泵类',
+ specialEquipmentCategory: '离心泵',
+ quantity: 1,
+ unit: '台',
+ specification: '50m³/h',
+ installationLocation: '加药间',
+ sort: 3,
+ },
+ {
+ key: '3',
+ initialCategory: '水处理',
+ keyEquipment: '是',
+ equipmentNo: 'eq-v833',
+ equipmentName: '反渗透装置',
+ equipmentStatus: '已使用',
+ materialCategory: '设备',
+ priceCategory: '容器',
+ specialEquipmentCategory: '压力容器',
+ quantity: 1,
+ unit: '套',
+ specification: '100t/h',
+ installationLocation: '水处理间',
+ sort: 1,
+ },
+ ];
+ const rowSelection = {
+ selectedRowKeys,
+ onChange: (newSelectedRowKeys) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ }
+ };
+
+ const treeDate=[
+ {
+ title:'电器专业',
+ key:'电气专业',
+ children:[
+ {
+ title:'开关设备',
+ key:'开关设备',
+ children:[
+ {title:'断路器',key:'断路器'},
+ {title:'隔断开关',key:'隔断开关'},
+ ]
+ },
+ {
+ title:'变压器',
+ key:'变压器',
+ }
+ ]
+ },
+ {
+ title:'化学专业',
+ key:'化学专业',
+ children:[
+ {title:'泵类设备',key:'泵类设备'},
+ {title:'容器类',key:'容器类'}
+ ]
+ }
+ ]
+
+ // 处理页码变化
+ const handlePageChange = (page, pageSize) => {
+ setCurrentPage(page);
+ setPageSize(pageSize);
+ };
+
+ // 处理每页条数变化
+ const handlePageSizeChange = (current, size) => {
+ setPageSize(size);
+ setCurrentPage(1); // 重置到第一页
+ };
+ const onClose=()=>{
+ setOpen(false)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>新增
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+//台账维护记录
+const TheLedgerMaintainsRecords=()=>{
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
+ const dataSource = [
+ {
+ key: '1',
+ maintenanceRecordId: 'WH-20230519-001',
+ equipmentName: '#1发电机',
+ equipmentCategory: '电气系统',
+ updatedBy: '李婧妍',
+ maintenanceTime: '2023-05-19 10:30:22',
+ maintenanceMethod: '修改',
+ operation: '查看详情'
+ },
+ {
+ key: '2',
+ maintenanceRecordId: 'WH-20230518-002',
+ equipmentName: '手动蝶阀',
+ equipmentCategory: '化学系统',
+ updatedBy: '李密',
+ maintenanceTime: '2023-05-18 09:15:45',
+ maintenanceMethod: '新增',
+ operation: '查看详情'
+ },
+ {
+ key: '3',
+ maintenanceRecordId: 'WH-20230517-003',
+ equipmentName: '气动蝶阀',
+ equipmentCategory: '化学系统',
+ updatedBy: '赵礼义',
+ maintenanceTime: '2023-05-17 14:20:10',
+ maintenanceMethod: '删除',
+ operation: '查看详情'
+ },
+ {
+ key: '4',
+ maintenanceRecordId: 'WH-20230516-004',
+ equipmentName: '手动球阀',
+ equipmentCategory: '化学系统',
+ updatedBy: '孙思达',
+ maintenanceTime: '2023-05-16 11:05:30',
+ maintenanceMethod: '修改导入',
+ operation: '查看详情'
+ },
+ {
+ key: '5',
+ maintenanceRecordId: 'WH-20230515-005',
+ equipmentName: '止回阀',
+ equipmentCategory: '化学系统',
+ updatedBy: '郑岩',
+ maintenanceTime: '2023-05-15 16:40:05',
+ maintenanceMethod: '模板更新',
+ operation: '查看详情'
+ }
+ ];
+ const columns = [
+ {
+ title: '维护记录 ID',
+ dataIndex: 'maintenanceRecordId',
+ key: 'maintenanceRecordId',
+ },
+ {
+ title: '设备名称',
+ dataIndex: 'equipmentName',
+ key: 'equipmentName',
+ },
+ {
+ title: '设备分类',
+ dataIndex: 'equipmentCategory',
+ key: 'equipmentCategory',
+ },
+ {
+ title: '更新人',
+ dataIndex: 'updatedBy',
+ key: 'updatedBy',
+ },
+ {
+ title: '维护时间',
+ dataIndex: 'maintenanceTime',
+ key: 'maintenanceTime',
+ },
+ {
+ title: '维护方式',
+ dataIndex: 'maintenanceMethod',
+ key: 'maintenanceMethod',
+ },
+ {
+ title: '操作',
+ dataIndex: 'operation',
+ key: 'operation',
+ render: (text) =>
{text}, // 可添加点击事件实现详情查看
+ },
+ ];
+ const rowSelection = {
+ selectedRowKeys,
+ onChange: (newSelectedRowKeys) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ }
+ };
+ // 处理页码变化
+ const handlePageChange = (page, pageSize) => {
+ setCurrentPage(page);
+ setPageSize(pageSize);
+ };
+
+ // 处理每页条数变化
+ const handlePageSizeChange = (current, size) => {
+ setPageSize(size);
+ setCurrentPage(1); // 重置到第一页
+ };
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+const items = [
+ {
+ label:
}>,
+ key:'巡检记录',
+ children:[
+ {label:'巡检记录首页',key:'巡检记录首页'},
+ {label:'接班班组签到',key:'接班班组签到'},
+ {label:'当班值长交班日志',key:'当班值长交班日志'},
+ {label:'历史日值记录查询',key:'历史日值记录查询'},
+ ]
+ },
+ {
+ label:
}>,
+ key:'巡检状态管理',
+ children:[
+ {label:'当前巡检状态查询',key:'当前巡检状态查询'},
+ {label:'当日巡检状态查询',key:'当日巡检状态查询'},
+ ]
+ },
+ {
+ label:
}>,
+ key:'设备台账数据',
+ children:[
+ {label:'设备台账查询与维护',key:'设备台账查询与维护'},
+ {label:'台账维护记录',key:'台账维护记录'},
+ ]
+ },
+ {
+ 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/smartinspection/components/Inspectionrecords/inspectionRecords.less b/src/pages/smartinspection/components/Inspectionrecords/inspectionRecords.less
new file mode 100644
index 0000000..37f62e0
--- /dev/null
+++ b/src/pages/smartinspection/components/Inspectionrecords/inspectionRecords.less
@@ -0,0 +1,210 @@
+.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;
+ }
+ }
+}
+.drawersUl{
+ li{
+ font-size: 14px;
+ line-height: 20px;
+ }
+}
+.drawersTable{
+ width: 100%;
+ margin-top: 20px;
+ :global(.ant-table-cell){
+ padding:10px 5px !important;
+ }
+ :global(.ant-table-thead > tr > th){
+ background-color:#F0F7F7;
+ }
+}
+.drawersLabel{
+ text-align:right;
+ font-size: 14px;
+ color:#999999;
+}
+.drawersValue{
+ text-align:left;
+ margin-left:20px;
+}
+.recordTree{
+ background-color: #EAF6F2;
+ margin-top:20px;
+ //height:100%;
+}
+.selectForm{
+ label{
+ color:#4E5856;
+ }
+}
+.recordTable{
+ width:100%;
+ min-height:400px;
+ :global(.ant-table-cell){
+ padding:10px 5px !important;
+ }
+}
+.drawer2{
+ position:relative;
+ label{
+ margin-right: 15px;
+ color:#999;
+ font-size: 14px;
+ }
+ :global(.ant-drawer-header){
+ background-color:#B8E0D833 !important;
+ }
+}
+.Drawer2Btn1,.Drawer2Btn2{
+ border-radius:4px;
+ text-align:center;
+}
+.Drawer2Btn1{
+ background: #B7E5D533;
+ margin-right:10px;
+ 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);
+ border-image-slice: 1;
+ box-shadow: 0 4px 4px 0 #FFFFFF40 inset;
+ backdrop-filter: blur(8px);
+}
+.Drawer2Btn2{
+ background: #045F5E80;
+ 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%);
+ border-image-slice: 1;
+ color:#fff;
+ box-shadow: 1px 2px 5px 0 #00666540;
+ backdrop-filter: blur(3.4000000953674316px);
+ font-size:14px;
+}
diff --git a/src/pages/smartinspection/components/Inspectiontaskplan/InspectionTaskPlan.less b/src/pages/smartinspection/components/Inspectiontaskplan/InspectionTaskPlan.less
new file mode 100644
index 0000000..4021ae9
--- /dev/null
+++ b/src/pages/smartinspection/components/Inspectiontaskplan/InspectionTaskPlan.less
@@ -0,0 +1,231 @@
+
+.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;
+ 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(.parallelogram-container___Lxkxf){
+ height:30px;
+ margin-top: 12px;
+ }
+}
+.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:#006665;
+
+ border: 1px solid;
+ border-image-slice:1;
+ border-image-source: linear-gradient(96.05deg, #FFFFFF 9.52%, rgba(255, 255, 255, 0) 27.03%, rgba(0, 143, 142, 0) 60.86%, #0E5A4B 72.09%);
+
+
+}
+
+.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;
+}
+
+.tabButton {
+ width: 200px;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ border: none;
+ color: black;
+ cursor: pointer;
+ border-radius: 4px;
+ font-size: 24px;
+ font-weight: 400;
+ transition: all 0.3s;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ box-shadow: 2px 6px 6.7px 0px rgba(212, 220, 231, 0.3);
+ transform: translateY(0);
+}
+
+.tabButton:hover {
+ transform: translateY(-5px);
+ box-shadow: 3px 8px 12px 0px rgba(212, 220, 231, 0.5);
+}
+
+.tabButton.active {
+ color: white;
+}
+
+.tabButton.inactive {
+ color: black;
+}
+
+.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;
+}
+.tree{
+ background-color: #E7F2ED;
+ :global(.ant-tree-switcher-leaf-line::after){
+ border-bottom:1px solid #006665;
+ }
+ :global(.ant-tree-switcher-leaf-line::before){
+ border-inline-end:1px solid #006665;
+ }
+ :global(.ant-tree-checkbox-inner){
+ border:1px solid #006665 !important;
+ }
+ :global(.ant-tree-indent-unit::before){
+ border-inline-end:none !important;
+ }
+}
+.font1{
+ color: #999999;
+ font-size: 14px;
+}
+.box{
+ display:flex;
+ flex-wrap:wrap;
+ margin:20px 0;
+
+}
+.tag{
+ margin-right:20px;
+ margin-bottom: 10px;
+}
+.ul{
+ li{
+ margin-bottom: 10px;
+ }
+}
+.customDrawer{
+ :global(.ant-drawer-header){
+ background-color:#B8E0D833 !important;
+ }
+}
+
+// 仪表盘容器样式 - 复杂边框和阴影效果
+.dashboardContainer{
+ border: 1px solid;
+ border-image-slice: 1;
+ border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg);
+ backdrop-filter: blur(15px);
+ box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05),
+ -7px 17px 18px 0px rgba(145, 145, 145, 0.04),
+ -15px 37px 24px 0px rgba(145, 145, 145, 0.03);
+}
+
+// 阈值配置区样式 - 带背景、边框和阴影效果
+.thresholdConfigContainer {
+ background: rgba(255, 255, 255, 0.3);
+ border: 1px solid;
+ border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg);
+ backdrop-filter: blur(15px);
+ box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05),
+ -7px 17px 18px 0px rgba(145, 145, 145, 0.04),
+ -15px 37px 24px 0px rgba(145, 145, 145, 0.03);
+}
+
+.chartContainer {
+ background: rgba(255, 255, 255, 0.3);
+ border: 1px solid;
+ border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg);
+ backdrop-filter: blur(15px);
+ box-shadow: -2px 4px 10px 0px rgba(145, 145, 145, 0.05),
+ -7px 17px 18px 0px rgba(145, 145, 145, 0.04),
+ -15px 37px 24px 0px rgba(145, 145, 145, 0.03);
+}
diff --git a/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js
new file mode 100644
index 0000000..d36a917
--- /dev/null
+++ b/src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js
@@ -0,0 +1,2791 @@
+import { Button, Col, Drawer, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tag, Tree } 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 menuInactiveBg1 from '@/assets/img/d368476fbf3b6a5e808b0274d96e1809d945da24.png' // 温度异常检测未激活背景图
+import menuInactiveBg2 from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png' // 温湿度检测未激活背景图
+import menuInactiveBg3 from '@/assets/img/90501c706560228b7b68e4c8f4c9924c490578ad.png' // 跑冒滴漏检测未激活背景图
+import menuInactiveBg4 from '@/assets/img/a4a0367e2a7e14611cc75be2e1a2d51127a4d390.png' // 仪器仪表采集未激活背景图
+import menuInactiveBg5 from '@/assets/img/f729103541513c2e864c1f8a710db1d80125f3e7.png' // 环境监测未激活背景图
+import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
+import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.png'
+
+import paibanBg from '@/assets/img/paiban.png'
+import inspectionBg from '@/assets/img/Rectangle 34624130.svg'
+import taskPlanBg from '@/assets/img/image 674 1.svg'
+import {
+ DeleteOutlined,
+ DownOutlined,
+ EditOutlined,
+ ExportOutlined,
+ EyeOutlined,
+ PlusOutlined,
+ RedoOutlined
+} from "@ant-design/icons";
+const { Search } = Input
+export const MenuBg = (props) => {
+ return (
+
+ {props.text}
+ {props.icon}
+
+
+ )
+}
+//抽屉
+const Drawers = (props) => {
+
+ return (
+
+
+
+
+
+
+ 所属班次
+ {props.row?.shifts}
+
+
+ 路线名称
+ {props.row?.name}
+
+
+
+
+ 所属专业
+ {props.row?.affiliation}
+
+
+ 创建时间
+ {props.row?.time}
+
+
+
+
+
+
+ 发电机
+ 中水处区
+ 1#增压风机变频器
+ 1#炉右上炉膛温度
+ 1#冷干机
+
+
+
+ 发电机
+
+
+
+ - 外观检查：有无破损、油污
+ - 温度检测：轴承温度≤70℃，定子温度≤105℃
+
+
+
+ 1#增压风机变频器
+
+
+
+ - 运行指示灯：是否正常亮起
+ - 散热风扇：是否正常转动
+ - 输出电压：380V±5%
+
+
+
+
+
+ )
+}
+// 员工表格组件
+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: 100,
+ 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: '#2C9E9D' }}>
+ 查看详情
+
+ handleEdit(record)} style={{ color: '#2C9E9D' }}>
+ 编辑
+
+ 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: 100,
+ 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: '#2C9E9D' }}>
+ 查看详情
+
+ handleEdit(record)} style={{ color: '#2C9E9D' }}>
+ 编辑
+
+ 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 TimeTable = () => {
+ //状态管理
+ const [dataSource, setDataSource] = useState([]) //表格数据
+ const [loading, setLoading] = useState(false) //加载状态
+ const [total, setTotal] = useState(0)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [pageSize, setPageSize] = useState(10)
+ const [selectedRowKeys, setSelectedRowKeys] = useState([])//选中行的id
+ const [open, setOpen] = useState(false)
+ const [row, setRow] = useState(null)
+ const columns = [
+ {
+ title: '序号',
+ dataIndex: 'index',
+ key: 'index',
+ width: 100,
+ align: 'center',
+ render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
+ },
+ {
+ title: '线路ID',
+ dataIndex: 'id',
+ key: 'id',
+ align: 'center',
+ },
+ {
+ title: '线路名称',
+ dataIndex: 'name',
+ key: 'name',
+ align: 'center',
+ },
+ {
+ title: '所属班次',
+ dataIndex: 'shifts',
+ key: 'shifts',
+ align: 'center',
+ },
+ {
+ title: '所属专业',
+ dataIndex: 'affiliation',
+ key: 'affiliation',
+ align: 'center',
+ },
+ {
+ title: '涉及区域',
+ dataIndex: 'position',
+ key: 'position',
+ align: 'center',
+ },
+ {
+ title: '设备数量',
+ dataIndex: 'deviceNum',
+ key: 'deviceNum',
+ align: 'center',
+ },
+ {
+ title: '巡视项数量',
+ dataIndex: 'lookNum',
+ key: 'lookNum',
+ align: 'center',
+
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ align: 'center',
+ render: (status) => (
+
+ )
+ },
+ {
+ title: '操作',
+ key: 'action',
+ align: 'center',
+ render: (_, record) => (
+
+ handleView(record)} style={{ color: '#2C9E9D' }}>
+ 查看详情
+
+
+ ),
+ },
+ ]
+ const fetchTableData = () => {
+ try {
+ setLoading(true)
+ const mockData = [
+ {
+ key: '1',
+ id: 'GH001',
+ name: '白班电气巡检线 1',
+ shifts: '白班',
+ affiliation: '电气专业',
+ position: '发电机、中水处区',
+ deviceNum: '22',
+ lookNum: 3,
+ status: 'true',
+ time: '2025-03-31'
+ },
+ {
+ key: '2',
+ id: 'GH001',
+ name: '白班电气巡检线 1',
+ shifts: '白班',
+ affiliation: '电气专业',
+ position: '发电机、中水处区',
+ deviceNum: '22',
+ lookNum: 3,
+ status: 'true',
+ time: '2025-05-31'
+ },
+
+
+ ]
+ setDataSource(mockData)
+ setTotal(85)
+
+ } catch (error) {
+ console.error(error)
+ } finally {
+ setLoading(false)
+ }
+ }
+ // 初始加载和分页变化时重新获取数据
+ useEffect(() => {
+ fetchTableData();
+ }, [currentPage, pageSize]);
+ // 处理查看详情
+ const handleView = (record) => {
+ console.log('查看详情:', record);
+ setRow(record)
+ setOpen(true)
+ };
+
+ return (
+ <>
+
+
setOpen(false)}
+ row={row}
+ >
+
+
+
+
+ )
+}
+const StandardTable = () => {
+ // 状态管理
+ 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: 100,
+ align: 'center',
+ render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
+ },
+ {
+ title: '方案名称',
+ dataIndex: 'name',
+ key: 'name',
+ align: 'center',
+ },
+ {
+ title: '版本',
+ dataIndex: 'version',
+ key: 'version',
+ align: 'center',
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ align: 'center',
+ render: (status) => (
+
+ )
+ },
+ {
+ title: '最后更新时间',
+ dataIndex: 'time',
+ key: 'time',
+ align: 'center',
+ },
+ {
+ title: '操作',
+ key: 'action',
+ align: 'center',
+ render: (_, record) => (
+
+ handleView(record)} style={{ color: '#2C9E9D' }}>
+ 查看详情
+
+ handleEdit(record)} style={{ color: '#2C9E9D' }}>
+ 编辑
+
+ 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',
+ name: '输油设备巡检标准',
+ version: 'V2.0',
+ status: true,
+ time: '2025-09-13'
+ },
+ {
+ key: '2',
+ name: '消防系统巡检标准',
+ version: 'V1.1',
+ status: true,
+ time: '2025-09-13'
+ },
+ {
+ key: '3',
+ name: '电气设备巡检标准',
+ version: 'V1.0',
+ status: true,
+ time: '2025-09-13'
+ },
+ {
+ key: '4',
+ name: '输油设备巡检标准',
+ version: 'V2.0',
+ status: true,
+ time: '2025-09-13'
+ },
+ {
+ key: '5',
+ name: '消防系统巡检标准',
+ version: 'V1.1',
+ status: true,
+ time: '2025-09-13'
+ },
+ {
+ key: '6',
+ name: '电气设备巡检标准',
+ version: 'V1.0',
+ status: true,
+ time: '2025-09-13'
+ },
+
+
+ ];
+
+ // 模拟接口返回 - 实际项目中使用接口数据
+ 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 DeviceAttribute = () => {
+ // 状态管理
+ 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: 'attribute',
+ key: 'attribute',
+ align: 'center',
+ },
+ {
+ title: '属性内容',
+ dataIndex: 'content',
+ key: 'content',
+ align: 'center',
+ },
+ {
+ title: '属性分类',
+ dataIndex: 'class',
+ key: 'class',
+ align: 'center',
+ },
+ {
+ title: '阈值内容',
+ dataIndex: 'threshold',
+ key: 'threshold',
+ align: 'center',
+ render: (value) => {
+ return (
+
+
上限：{value['上限']}
+
下限：{value['下限']}
+
单位：{value['单位']}
+
+ )
+ }
+ },
+ {
+ title: '测点名称',
+ dataIndex: 'point',
+ key: 'point',
+ align: 'center',
+ },
+ {
+ title: '操作',
+ key: 'action',
+ align: 'center',
+ render: (_, record) => (
+
+ handleEdit(record)} style={{ color: '#2C9E9D' }}>
+ 编辑
+
+ handleDelete(record)} style={{ color: '#ff4d4f' }}>
+ 删除
+
+
+ ),
+ },
+ ]
+ // 获取表格数据
+ const fetchTableData = async () => {
+ try {
+ setLoading(true);
+ // 这里是预留的接口调用位置
+ // 实际项目中替换为真实接口请求
+ // const response = await api.getEmployeeList({
+ // page: currentPage,
+ // pageSize: pageSize
+ // });
+
+ // 模拟数据 - 实际项目中删除
+ const mockData = [
+ {
+ key: '1',
+ attribute: '震动',
+ content: '加速度',
+ class: '阈值',
+ threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
+ point: '测点2',
+ }, {
+ key: '2',
+ attribute: '震动',
+ content: '加速度',
+ class: '阈值',
+ threshold: { '上限': 4000, '下限': 0, '单位': 'mm/s²' },
+ point: '测点2',
+ }, {
+ key: '3',
+ attribute: '震动',
+ content: '加速度',
+ class: '阈值',
+ threshold: { '上限': '', '下限': '', '单位': '' },
+ point: '测点2',
+ },
+
+ ];
+
+ // 模拟接口返回 - 实际项目中使用接口数据
+ setDataSource(mockData);
+ setTotal(85); // 总条数，实际项目中从接口获取
+ } catch (error) {
+ console.error('获取员工数据失败:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // 初始加载和分页变化时重新获取数据
+ useEffect(() => {
+ fetchTableData();
+ }, [currentPage, pageSize]);
+
+ // 处理编辑
+ const handleEdit = (record) => {
+ // 预留编辑逻辑
+ console.log('编辑:', record);
+ };
+
+ // 处理删除
+ const handleDelete = (record) => {
+ // 预留删除逻辑
+ console.log('删除:', record);
+ };
+
+ // 渲染表格
+ return (
+
+ );
+}
+// 分页组件
+export 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 (
+
+
+
+ } className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>新增
+
+
+
+
+
+
+
+
+
+ )
+}
+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 (
+
+
+
+ } className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>新增
+
+
+
+
+
+
+
+
+
+ )
+}
+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
+
+
+
+ } className={styles['exportBtn']} style={{ backgroundImage: `url(${btnImg1})` }}>导出
+
+
+
+
+
+
+ {/**/}
+
+
+
+ } className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})` }}>重置
+
+
+
+
+ } className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, }}>新增
+ } className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, margin: '0 20px' }}>编辑
+
+
+
+
+
+
+
+
+ )
+}
+const PatrolRouteQuery = () => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
+
+ // 处理页码变化
+ const handlePageChange = (page, pageSize) => {
+ setCurrentPage(page);
+ setPageSize(pageSize);
+ };
+
+ // 处理每页条数变化
+ const handlePageSizeChange = (current, size) => {
+ setPageSize(size);
+ setCurrentPage(1); // 重置到第一页
+ };
+ const treeData = [
+ {
+ title: '班次',
+ key: '班次',
+ children: [
+ { title: '白班', key: '白班', },
+ { title: '中班', key: '中班', },
+ { title: '夜班', key: '夜班', },
+ { title: '中班巡检', key: '中班巡检', },
+ { title: '夜班二巡检', key: '夜班二巡检', },
+ ]
+ },
+ {
+ title: '专业',
+ key: '专业',
+ children: [
+ { title: '电器专业', key: '电器专业', },
+ { title: '水处理', key: '水处理', },
+ ]
+ },
+ {
+ title: '区域',
+ key: '区域',
+ children: [
+ { title: '发电机区域', key: '发电机区域', },
+ { title: '中水处区', key: '中水处区', },
+ { title: '除盐水区域', key: '除盐水区域', },
+ ]
+ },
+ ]
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const SmartInspectionRange = () => {
+ // 巡检范围树形数据，根据参考图更新
+ const treeData = [
+ {
+ title: '核心环控路径',
+ key: 'core-path',
+ children: [
+ { title: '指挥调度中心', key: 'command-center' },
+ { title: '罐区集群', key: 'tank-cluster' },
+ { title: '泵房集群', key: 'pump-cluster' },
+ { title: '管线网络', key: 'pipeline-network' },
+ ],
+ },
+ {
+ title: '罐区',
+ key: 'tank-area',
+ children: [
+ {
+ title: '高危罐区',
+ key: 'high-risk-tank',
+ children: [
+ { title: '顶源罐区', key: 'top-tank-area' },
+ { title: '拱顶罐区', key: 'dome-top-tank' },
+ ],
+ },
+ {
+ title: '常规罐区',
+ key: 'normal-tank',
+ children: [
+ { title: '浮顶罐区', key: 'floating-top-tank' },
+ { title: '拱顶罐区', key: 'normal-dome-tank' },
+ ],
+ },
+ ],
+ },
+ {
+ title: '泵房',
+ key: 'pump-house',
+ children: [
+ {
+ title: '运行中泵房',
+ key: 'running-pump',
+ children: [
+ { title: '1#泵房', key: 'pump-1' },
+ { title: '2#泵房', key: 'pump-2' },
+ ]
+ },
+ { title: '备用泵房', key: 'spare-pump' },
+ {
+ title: '3#泵房',
+ key: 'pump-3',
+ children: [
+ { title: '4#泵房', key: 'pump-4' },
+ ]
+ },
+ ],
+ },
+ { title: '智能网格', key: 'smart-grid' },
+ ];
+
+ return (
+
+
+ {/* 左侧树形结构 */}
+
+
+
+ {/* 右侧背景图和内容 */}
+
+
+ {/* 背景图 */}
+
+
+ {/* 区域基础信息框 */}
+
+
区域基础信息
+
+
区域名称：高危罐区 - 3#-9#罐组
+
区域编号：第2节点 (指挥中心→高危罐区)
+
巡检状态：正在巡检
+
完成进度：设备4/30台
+
+
+
+ {/* 巡检覆盖清单框 */}
+
+
巡检覆盖清单
+
+
覆盖主体
+
重点设备：储罐×8、3#-9#罐组、罐前付转装置
+
检测方式：红外检测、视觉识别
+
环境监控：声噪、消防水池监测
+
管控单位：3#罐区特种管控部门
+
+
+
+ {/* 机器人图标 */}
+
+
+ {/* 绿色圆点标记 */}
+
+
+
+
+
+ )
+};
+
+// 智能巡检内容监控中心组件
+const SmartInspectionContent = () => {
+ const [activeTab, setActiveTab] = useState('温度异常检测');
+ const [currentPage, setCurrentPage] = useState(6);
+
+ const handleTabClick = (tab) => {
+ setActiveTab(tab);
+ };
+
+ const handlePageChange = (page) => {
+ setCurrentPage(page);
+ };
+
+ const renderContent = () => {
+ switch (activeTab) {
+ case '温度异常检测':
+ return (
+
+
+
| 实时监测区
+ {/*
+
+
+
+
*/}
+
+
+
+
+
+
+
+ 当前最高温: 89°C
+
+
+
+
实时温度: 89°C
+
高温异常: 80°C
+
当前监测区域: 罐区管道连接处检测
+
+
+
+
+
+
检测原理说明
+
+ "搭载红外热成像测温仪，覆盖电缆、胶管、设备高温点；温度达到阈值时自动上报故障，同步录制热成像/可见光视频，为故障分析提供数据支撑。"
+
+
+
+
+
异常历史记录
+
+
+
+
+ | 序号 |
+ 故障时间 |
+ 检测区域 |
+ 异常温度 |
+ 处理状态 |
+ 操作 |
+
+
+
+
+ | 1 |
+ 2025-10-16 14:20 |
+ 1# 泵房电机 |
+ 92°C |
+ 已处理 |
+
+
+ |
+
+
+ | 2 |
+ 2025-10-16 14:20 |
+ 1# 泵房电机 |
+ 92°C |
+ 已处理 |
+
+
+ |
+
+
+
+
+
+
共 85 条
+
+ 10 / page
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+
+
+
+ );
+ case '温湿度检测':
+ // 创建一个React兼容的ECharts组件
+ const EChartsGauge = ({ id, option, height, width }) => {
+ const chartRef = useRef(null);
+ const chartInstanceRef = useRef(null);
+
+ useEffect(() => {
+ // 确保在浏览器环境中运行
+ if (typeof window !== 'undefined' && chartRef.current) {
+ const echarts = require('echarts');
+
+ // 初始化图表
+ if (!chartInstanceRef.current) {
+ chartInstanceRef.current = echarts.init(chartRef.current);
+ }
+
+ // 设置配置
+ chartInstanceRef.current.setOption(option);
+
+ // 响应窗口大小变化
+ const handleResize = () => {
+ if (chartInstanceRef.current) {
+ chartInstanceRef.current.resize();
+ }
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ // 清理函数
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ if (chartInstanceRef.current) {
+ chartInstanceRef.current.dispose();
+ chartInstanceRef.current = null;
+ }
+ };
+ }
+ }, [option]);
+
+ return (
+
+ );
+ };
+
+ // 温度仪表盘配置
+ const temperatureOption = {
+ series: [
+ {
+ type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 120,
+ splitNumber: 6,
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 0.5)',
+ shadowColor: 'rgba(4, 95, 94, 0.7)',
+ shadowBlur: 10,
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ },
+ progress: {
+ show: true,
+ roundCap: true,
+ width: 18,
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 0.5)'
+ }
+ },
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+ length: '75%',
+ width: 16,
+ offsetCenter: [0, '5%'],
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 1)'
+ }
+ },
+ axisLine: {
+ roundCap: true,
+ lineStyle: {
+ width: 18,
+ color: [
+ [1, 'rgba(4, 95, 94, 0.5)']
+ ]
+ }
+ },
+ axisTick: {
+ splitNumber: 2,
+ lineStyle: {
+ width: 2,
+ color: '#999'
+ }
+ },
+ splitLine: {
+ length: 12,
+ lineStyle: {
+ width: 3,
+ color: 'rgba(4, 95, 94, 0.8)'
+ }
+ },
+ axisLabel: {
+ distance: 30,
+ color: 'rgba(4, 95, 94, 0.8)',
+ fontSize: 20
+ },
+ title: {
+ show: true,
+ offsetCenter: [0, '10%'],
+ fontSize: 18,
+ color: 'rgba(4, 95, 94, 0.8)'
+ },
+ detail: {
+ // backgroundColor: 'rgba(4, 95, 94, 0.2)',
+ // borderColor: 'rgba(4, 95, 94, 0.5)',
+ // borderWidth: 2,
+ width: '60%',
+ lineHeight: 40,
+ height: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '35%'],
+ valueAnimation: true,
+ formatter: function (value) {
+ return '{value|温度：' + value.toFixed(0) + '℃}';
+ // return '{value|温度：' + value.toFixed(0) + '℃}{unit|°C}';
+ },
+ rich: {
+ value: {
+ fontSize: 20,
+ fontWeight: '400',
+ color: 'rgba(4, 95, 94, 1)'
+ },
+ unit: {
+ fontSize: 20,
+ color: 'rgba(4, 95, 94, 0.8)',
+ padding: [0, 0, -20, 10]
+ }
+ }
+ },
+ data: [
+ {
+ value: 28,
+ name: ''
+ }
+ ]
+ }
+ ]
+ };
+
+ // 湿度仪表盘配置
+ const humidityOption = {
+ series: [
+ {
+ type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 120,
+ splitNumber: 6,
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 0.5)',
+ shadowColor: 'rgba(4, 95, 94, 0.7)',
+ shadowBlur: 10,
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ },
+ progress: {
+ show: true,
+ roundCap: true,
+ width: 18,
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 0.5)'
+ }
+ },
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+ length: '75%',
+ width: 16,
+ offsetCenter: [0, '5%'],
+ itemStyle: {
+ color: 'rgba(4, 95, 94, 1)'
+ }
+ },
+ axisLine: {
+ roundCap: true,
+ lineStyle: {
+ width: 18,
+ color: [
+ [1, 'rgba(4, 95, 94, 0.5)']
+ ]
+ }
+ },
+ axisTick: {
+ splitNumber: 2,
+ lineStyle: {
+ width: 2,
+ color: '#999'
+ }
+ },
+ splitLine: {
+ length: 12,
+ lineStyle: {
+ width: 3,
+ color: 'rgba(4, 95, 94, 0.8)'
+ }
+ },
+ axisLabel: {
+ distance: 30,
+ color: 'rgba(4, 95, 94, 0.8)',
+ fontSize: 20
+ },
+ title: {
+ show: true,
+ offsetCenter: [0, '10%'],
+ fontSize: 18,
+ color: 'rgba(4, 95, 94, 0.8)'
+ },
+ detail: {
+ // backgroundColor: 'rgba(4, 95, 94, 0.2)',
+ // borderColor: 'rgba(4, 95, 94, 0.5)',
+ // borderWidth: 2,
+ width: '60%',
+ lineHeight: 40,
+ height: 40,
+ borderRadius: 8,
+ offsetCenter: [0, '35%'],
+ valueAnimation: true,
+ formatter: function (value) {
+ // return '{value|' + value.toFixed(0) + '}{unit|%}';
+ return '{value|湿度：' + value.toFixed(0) + '%}';
+ },
+ rich: {
+ value: {
+ fontSize: 20,
+ fontWeight: '400',
+ color: 'rgba(4, 95, 94, 1)'
+ },
+ unit: {
+ fontSize: 20,
+ color: 'rgba(4, 95, 94, 0.8)',
+ padding: [0, 0, -20, 10]
+ }
+ }
+ },
+ data: [
+ {
+ value: 55,
+ name: ''
+ }
+ ]
+ }
+ ]
+ };
+
+ return (
+
+
+
| 温湿度检测
+
+
+
+
+
+
实时仪表盘
+ {/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
+
+
+
+
+
+ {/* 湿度仪表盘 - 使用React兼容的ECharts组件 */}
+
+
+
+
+
+
+
+
+
+
+
+
历史趋势图
+
+
+
+
+ 温度(°C)
+
+
+
+ 湿度(%RH)
+
+
+
+ {/* 模拟趋势图 */}
+
+
+
+
+
+
+
+ );
+ case '跑冒滴漏检测':
+ case '仪器仪表采集':
+ case '环境监测':
+ return (
+
+
该模块正在开发中...
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+
+ | 智能巡检内容监控中心
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderContent()}
+
+
+
+ );
+};
+
+// 任务规划与执行流程组件
+const TaskPlanningFlow = () => {
+ return (
+
+ {/* 顶部标题 */}
+
+
+ 接班班组签到
+
+
当前多机协作任务完成时间较单机缩短 62%
+
+ {/* 顶部控制区域 */}
+
+ {/* 左侧任务状态选择框 */}
+
+
+ 任务状态：
+
+
+
+
+ {/* 右侧按钮组 */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* 主要内容区域 - 左右布局 */}
+
+ {/* 左侧实时监控信息区域 */}
+
+
+ {/* 自主导航规则 */}
+
自主导航规则
+
+
罐区高级规则：
+
+
• 陌生区域：基于罐区坐标生成"宇"字形环绕路径
+
• 高度 ≤ 10m 的罐体：距离罐体0.5m环绕
+
• 高度 {'>'} 10m 的罐体：距离罐体2m环绕
+
+
+
障碍物规则：
+
+
• 距离障碍物 {'>'} 1.5m：继续沿当前路径行驶
+
• 距离障碍物 ≤ 1.5m：触发停止并执行路径重规划
+
+
+
示例配置：
+
+
• 罐区A：优先级高，检查点15个
+
• 罐区B：优先级中，检查点10个
+
• 罐区C：优先级低，检查点8个
+
+
+ {/* 背景图 */}
+
+
+ {/* 多级实时监控信息 - 右上角 */}
+
+
多级实时监控
+
+ {/* 一级监控信息 */}
+
+
1. 高危罐区监控
+
+
• 罐区A - 红外检测正常，压力稳定
+
• 罐区B - 温度监测中，运行状态良好
+
• 泄漏检测系统 - 无异常信号
+
+
+
+ {/* 二级监控信息 */}
+
+
2. 机器人状态监控
+
+
• ROB-001 - 高危罐区A，电量85%，运行中
+
• ROB-002 - 高危罐区B，电量72%，运行中
+
• ROB-003 - 泵房区域，电量15%，待充电
+
+
+
+ {/* 三级监控信息 */}
+
+
3. 环境参数监控
+
+
• 温度 - 26°C，湿度 - 58%
+
• 风速 - 2.3m/s，风向 - 东北
+
• 气体浓度 - 正常范围
+
+
+
+
+ {/* 浮动标签 */}
+
+ 📦 更多功能
+
+
+
+ 📋 调拨出库
+
+
+
+ 📥 生产入库
+
+
+
+ 📦 其他入库
+
+
+ {/* 机器人位置标记 */}
+
+
+
+
+
+ );
+};
+const StandardManagement = () => {
+ 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 (
+
+
+
+ } className={styles['addBtn']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }}>新建方案
+
+
+
+
+
+
+
+
+
+ )
+}
+const DeviceAttributeSettings = () => {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
+ const treeData = [
+ {
+ title: '发电机区域',
+ key: '发电机区域',
+ children: [
+ { title: '#1 发电机', key: '#1发电机', },
+ { title: '#2 发电机', key: '#2发电机', },
+ { title: '#3 发电机', key: '#3发电机', },
+ { title: '#4 发电机', key: '#4发电机', },
+ { title: '#5 发电机', key: '#5发电机', },
+ ]
+ },
+ {
+ title: '中水处理区',
+ key: '中水处理区',
+ children: [
+ { title: '中水过滤装置A', key: '中水过滤装置A', },
+ { title: '中水过滤装置B', key: '中水过滤装置B', },
+ ]
+ },
+ {
+ title: '除盐水区',
+ key: '除盐水区',
+ children: [
+ { title: '除盐水泵1', key: '除盐水泵1', },
+ { title: '除盐水泵2', key: '除盐水泵2', },
+ { title: '除盐水泵3', key: '除盐水泵3', },
+ ]
+ }]
+ // 处理页码变化
+ const handlePageChange = (page, pageSize) => {
+ setCurrentPage(page);
+ setPageSize(pageSize);
+ };
+
+ // 处理每页条数变化
+ const handlePageSizeChange = (current, size) => {
+ setPageSize(size);
+ setCurrentPage(1); // 重置到第一页
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+const items = [
+ {
+ label:
}>,
+ key: '人员管理',
+
+ children: [
+ { label: '人员管理', key: '人员管理' },
+ { label: '班组管理', key: '班组管理' },
+ ],
+ },
+ {
+ label:
,
+ key: '排班管理',
+ },
+ {
+ label:
}>,
+ key: '巡检路线管理',
+ children: [
+ { label: '巡视路线查询', key: '巡视路线查询' },
+ { label: '巡检标准管理', key: '巡检标准管理' },
+ { 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/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 22df23f..6874e87 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -16,6 +16,10 @@ const menuItem = [
label: '巡检管理',
key: '/topnavbar00/business/inspectionmanagement',
},
+ {
+ label: '智能巡检',
+ key: '/topnavbar00/business/smartinspection',
+ },
]
const TopNavBar = (props) => {