From b2399bbe12ac58c3aa49b7dca18d7304ae2b95fa Mon Sep 17 00:00:00 2001 From: yupeng Date: Wed, 29 Oct 2025 09:56:34 +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-=E7=94=9F?= =?UTF-8?q?=E6=88=90=E4=BA=8C=E7=BB=B4=E7=A0=81=E4=B8=8E=E6=89=AB=E7=A0=81?= =?UTF-8?q?=E5=B7=A1=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/QRCodeScanning.svg | 96 +++ src/assets/img/progress3.svg | 196 ++++++ .../img/scanningProcessDemonstration.svg | 103 +++ .../Inspectionrecords/inspectionRecords.js | 609 +++++++++++------- .../Inspectionrecords/inspectionRecords.less | 6 +- 5 files changed, 787 insertions(+), 223 deletions(-) create mode 100644 src/assets/img/QRCodeScanning.svg create mode 100644 src/assets/img/progress3.svg create mode 100644 src/assets/img/scanningProcessDemonstration.svg diff --git a/src/assets/img/QRCodeScanning.svg b/src/assets/img/QRCodeScanning.svg new file mode 100644 index 0000000..91d06f6 --- /dev/null +++ b/src/assets/img/QRCodeScanning.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/progress3.svg b/src/assets/img/progress3.svg new file mode 100644 index 0000000..62cc9b3 --- /dev/null +++ b/src/assets/img/progress3.svg @@ -0,0 +1,196 @@ + + + + + + + + + + + + + +
 + + + + +
 + + + +
 + + + + +
 + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/scanningProcessDemonstration.svg b/src/assets/img/scanningProcessDemonstration.svg new file mode 100644 index 0000000..1a60f39 --- /dev/null +++ b/src/assets/img/scanningProcessDemonstration.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js index 2f7f4b2..3d68755 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js @@ -1,6 +1,8 @@ import React, { useState } from 'react'; import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd'; +import QRCodeScanning from '../../../../assets/img/QRCodeScanning.svg'; +import scanningProcessDemonstration from '../../../../assets/img/scanningProcessDemonstration.svg'; import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; import btnImg3 from '@/assets/img/planBtn3.png' @@ -8,6 +10,8 @@ const { Option } = Select; import styles from './inspectionRecords.less'; import progress1 from '@/assets/img/progress1.svg'; import progress2 from '@/assets/img/progress2.svg'; +import progress3 from '@/assets/img/progress3.svg'; + import btnImg1 from '@/assets/img/planBtn1.png'; import btnImg2 from '@/assets/img/planBtn2.png'; import { @@ -20,9 +24,10 @@ import { } from "@ant-design/icons"; // 巡检点管理组件 const InspectionRecords = () => { - const [currentPage, setCurrentPage] = useState(6); + const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); - const [total, setTotal] = useState(85); // 总条数 + const [total, setTotal] = useState(85); + const [currentPageSection, setCurrentPageSection] = useState(1); // 总条数 const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单 // 处理新增巡检点按钮点击 @@ -244,7 +249,9 @@ const InspectionRecords = () => { {/* 顶部进度条 - 根据状态切换图片 */}
{/* 主体内容区域 */} @@ -311,243 +318,405 @@ const InspectionRecords = () => { ) : ( -
-
-

新增巡检点

- -
-
- {/* 查询条件区域 - 使用antd组件 */} -
-
- | 查询条件 -
- - + currentPageSection === 1 ? ( +
+
+ + + {/*

新增巡检点

*/} +
+
+ {/* 查询条件区域 - 使用antd组件 */} +
+
+ | 查询条件 +
+ + +
-
-
-
-
名称
- -
+
+
+
名称
+ +
-
-
所属区域
- -
+
+
所属区域
+ +
+ +
+
巡检时间范围
+ +
-
-
巡检时间范围
- +
+
关联设备
+
+ 设备1 + 设备2 +
+
-
-
关联设备
-
- 设备1 - 设备2 +
+
+
位置
+ +
+ +
+
巡检频率
+
+ + {/*
+ +
*/}
-
-
-
位置
- -
+ {/* 巡检点列表 - 使用antd组件 */} +
+
| 巡检点列表
-
-
巡检频率
- + {/* 顶部按钮组 */} +
+ + + +
+ + {/* 巡检点表格 - 使用antd Table组件 */} + { + console.log('选中的行:', selectedRowKeys, selectedRows); + }, + }} + columns={[ + { + title: '序号', + key: 'serialNumber', + width: 80, + render: (_, __, index) => (currentPage - 1) * pageSize + index + 1, + }, + { + title: '名称', + dataIndex: 'name', + key: 'name', + }, + { + title: '位置', + dataIndex: 'location', + key: 'location', + }, + { + title: '关联设备', + dataIndex: 'relatedDevices', + key: 'relatedDevices', + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + render: (text) => { + let color = '#52c41a'; // 默认正常绿色 + if (text === '待巡检') color = '#faad14'; + else if (text === '异常待处理') color = '#ff4d4f'; + return {text}; + }, + }, + { + title: '巡检频率', + dataIndex: 'frequency', + key: 'frequency', + }, + { + title: '操作', + key: 'action', + width: 200, + render: (_, record) => ( + + + + + + ), + }, + ]} + dataSource={[ + { + key: '1', + name: '一号储罐', + location: '储罐储存区 A区1号罐', + relatedDevices: '一号储罐本体、罐区消防栓组', + status: '正常', + frequency: '每日', + }, + { + key: '2', + name: '原油输送泵组', + location: '泵房 B区', + relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组', + status: '正常', + frequency: '每2小时', + }, + { + key: '3', + name: '油品装车站台', + location: '装卸区北侧站台', + relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器', + status: '待巡检', + frequency: '每次装卸前', + }, + { + key: '4', + name: '办公区消防通道', + location: '办公楼1楼东侧通道', + relatedDevices: '通道应急灯、通道灭火器、疏散标示', + status: '正常', + frequency: '每周', + }, + { + key: '5', + name: '输油管道段 A', + location: '库区东侧输油管道0-500米段', + relatedDevices: '管道压力传感器、管道监测点', + status: '异常待处理', + frequency: '每月', + }, + { + key: '6', + name: '调和工艺罐区', + location: '生产工艺区调和罐群前', + relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置', + status: '正常', + frequency: '每小时', + }, + ]} + pagination={{ + current: currentPage, + pageSize: pageSize, + total: total, + onChange: (page, size) => { + setCurrentPage(page); + setPageSize(size); + }, + showSizeChanger: true, + showTotal: (total) => `共 ${total} 条`, + style: { + textAlign: 'right', + marginTop: '20px', + }, + }} + /> + + + ) : ( +
+
+ +
+
+ {/* 三栏布局 */} +
+ {/* 第一栏：二维码生成 */} +
+

二维码生成

+
+ + + +
+
+ {/* 二维码SVG */} + 二维码 +
+
+ + +
+
- {/*
+ {/* 第二栏：扫码流程 */} +
+

扫码流程演示

+
+ {/* Step 1 */} +
+ {/* 扫码流程演示SVG */} + 扫码流程演示 +
+
+
-
*/} -
+ {/* 第三栏：历史记录 */} +
+

历史记录

+
+
+ + +
+
+ + +
+ + +
- {/* 巡检点列表 - 使用antd组件 */} -
-
| 巡检点列表
+ {/* 历史记录表格 */} +
+
+ + + + + + + + + + + {/* 模拟数据 */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
序号巡检点人员时间巡检结果
1一号储罐消防赵翔2025-08-16 08:07 + 已完成(无隐患) +
2油品装卸站台钱新2025-08-04 14:38 + 已完成(有隐患) +
3办公区消防通道孙引琪2025-07-28 11:02 + 已完成(无隐患) +
4输油管廊间A李婧静2025-07-20 08:14 + 已完成(有隐患) +
5消防水泵房冯冯2025-07-16 02:44 + 已完成(无隐患) +
+
- {/* 顶部按钮组 */} -
- - - - + {/* 分页 */} +
+
共 85 条
+
+ 10 / page + +
+ + + ... + + + + + + ... + + +
+
+
+
- - {/* 巡检点表格 - 使用antd Table组件 */} - { - console.log('选中的行:', selectedRowKeys, selectedRows); - }, - }} - columns={[ - { - title: '序号', - key: 'serialNumber', - width: 80, - render: (_, __, index) => (currentPage - 1) * pageSize + index + 1, - }, - { - title: '名称', - dataIndex: 'name', - key: 'name', - }, - { - title: '位置', - dataIndex: 'location', - key: 'location', - }, - { - title: '关联设备', - dataIndex: 'relatedDevices', - key: 'relatedDevices', - }, - { - title: '状态', - dataIndex: 'status', - key: 'status', - render: (text) => { - let color = '#52c41a'; // 默认正常绿色 - if (text === '待巡检') color = '#faad14'; - else if (text === '异常待处理') color = '#ff4d4f'; - return {text}; - }, - }, - { - title: '巡检频率', - dataIndex: 'frequency', - key: 'frequency', - }, - { - title: '操作', - key: 'action', - width: 200, - render: (_, record) => ( - - - - - - ), - }, - ]} - dataSource={[ - { - key: '1', - name: '一号储罐', - location: '储罐储存区 A区1号罐', - relatedDevices: '一号储罐本体、罐区消防栓组', - status: '正常', - frequency: '每日', - }, - { - key: '2', - name: '原油输送泵组', - location: '泵房 B区', - relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组', - status: '正常', - frequency: '每2小时', - }, - { - key: '3', - name: '油品装车站台', - location: '装卸区北侧站台', - relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器', - status: '待巡检', - frequency: '每次装卸前', - }, - { - key: '4', - name: '办公区消防通道', - location: '办公楼1楼东侧通道', - relatedDevices: '通道应急灯、通道灭火器、疏散标示', - status: '正常', - frequency: '每周', - }, - { - key: '5', - name: '输油管道段 A', - location: '库区东侧输油管道0-500米段', - relatedDevices: '管道压力传感器、管道监测点', - status: '异常待处理', - frequency: '每月', - }, - { - key: '6', - name: '调和工艺罐区', - location: '生产工艺区调和罐群前', - relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置', - status: '正常', - frequency: '每小时', - }, - ]} - pagination={{ - current: currentPage, - pageSize: pageSize, - total: total, - onChange: (page, size) => { - setCurrentPage(page); - setPageSize(size); - }, - showSizeChanger: true, - showTotal: (total) => `共 ${total} 条`, - style: { - textAlign: 'right', - marginTop: '20px', - }, - }} - /> - + ) )} diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less index aad221c..6adc7a2 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less @@ -416,9 +416,9 @@ /* 查询条件区域样式 */ .queryConditionContainer { background: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + // padding: 20px; + // border-radius: 8px; + // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-bottom: 20px; }