From 235ad4a2d84bf89968a6541dc9a4bbe99005ba89 Mon Sep 17 00:00:00 2001 From: yupeng Date: Tue, 28 Oct 2025 17:48:40 +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-=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=B7=A1=E6=A3=80=E7=82=B9=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/inspectionmanagement0.svg | 42 ++ src/assets/img/inspectionmanagement1.1.svg | 52 +++ src/assets/img/inspectionmanagement1.svg | 38 ++ src/assets/img/inspectionmanagement2.2.svg | 52 +++ src/assets/img/inspectionmanagement2.svg | 38 ++ src/assets/img/inspectionmanagement3.3.svg | 52 +++ src/assets/img/inspectionmanagement3.svg | 38 ++ src/assets/img/progress2.svg | 196 +++++++++ .../Inspectionrecords/inspectionRecords.js | 374 +++++++++++++++--- .../Inspectionrecords/inspectionRecords.less | 243 ++++++++++++ 10 files changed, 1073 insertions(+), 52 deletions(-) create mode 100644 src/assets/img/inspectionmanagement0.svg create mode 100644 src/assets/img/inspectionmanagement1.1.svg create mode 100644 src/assets/img/inspectionmanagement1.svg create mode 100644 src/assets/img/inspectionmanagement2.2.svg create mode 100644 src/assets/img/inspectionmanagement2.svg create mode 100644 src/assets/img/inspectionmanagement3.3.svg create mode 100644 src/assets/img/inspectionmanagement3.svg create mode 100644 src/assets/img/progress2.svg diff --git a/src/assets/img/inspectionmanagement0.svg b/src/assets/img/inspectionmanagement0.svg new file mode 100644 index 0000000..e965845 --- /dev/null +++ b/src/assets/img/inspectionmanagement0.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement1.1.svg b/src/assets/img/inspectionmanagement1.1.svg new file mode 100644 index 0000000..71ca239 --- /dev/null +++ b/src/assets/img/inspectionmanagement1.1.svg @@ -0,0 +1,52 @@ + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement1.svg b/src/assets/img/inspectionmanagement1.svg new file mode 100644 index 0000000..df553ae --- /dev/null +++ b/src/assets/img/inspectionmanagement1.svg @@ -0,0 +1,38 @@ + +
 + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement2.2.svg b/src/assets/img/inspectionmanagement2.2.svg new file mode 100644 index 0000000..5b0f05d --- /dev/null +++ b/src/assets/img/inspectionmanagement2.2.svg @@ -0,0 +1,52 @@ + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement2.svg b/src/assets/img/inspectionmanagement2.svg new file mode 100644 index 0000000..e5defda --- /dev/null +++ b/src/assets/img/inspectionmanagement2.svg @@ -0,0 +1,38 @@ + +
 + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement3.3.svg b/src/assets/img/inspectionmanagement3.3.svg new file mode 100644 index 0000000..ec92a92 --- /dev/null +++ b/src/assets/img/inspectionmanagement3.3.svg @@ -0,0 +1,52 @@ + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/inspectionmanagement3.svg b/src/assets/img/inspectionmanagement3.svg new file mode 100644 index 0000000..717037f --- /dev/null +++ b/src/assets/img/inspectionmanagement3.svg @@ -0,0 +1,38 @@ + +
 + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/progress2.svg b/src/assets/img/progress2.svg new file mode 100644 index 0000000..9660394 --- /dev/null +++ b/src/assets/img/progress2.svg @@ -0,0 +1,196 @@ + + + + + + + + + + + + + +
 + + + + +
 + + + +
 + + + + + + +
 + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js index fd3f41f..2f7f4b2 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js @@ -1,17 +1,39 @@ import React, { useState } from 'react'; -import { Button, Tree, Table, Pagination, Checkbox } from 'antd'; +import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd'; import { SearchOutlined, PlusOutlined } from '@ant-design/icons'; +import btnImg3 from '@/assets/img/planBtn3.png' + +const { Option } = Select; import styles from './inspectionRecords.less'; import progress1 from '@/assets/img/progress1.svg'; +import progress2 from '@/assets/img/progress2.svg'; import btnImg1 from '@/assets/img/planBtn1.png'; import btnImg2 from '@/assets/img/planBtn2.png'; - +import { + DeleteOutlined, + DownOutlined, + EditOutlined, + ExportOutlined, + EyeOutlined, + RedoOutlined, +} from "@ant-design/icons"; // 巡检点管理组件 const InspectionRecords = () => { const [currentPage, setCurrentPage] = useState(6); const [pageSize, setPageSize] = useState(10); const [total, setTotal] = useState(85); // 总条数 + const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单 + + // 处理新增巡检点按钮点击 + const handleAddInspectionPoint = () => { + setShowAddInspectionPoint(true); + }; + + // 处理返回按钮点击 + const handleBack = () => { + setShowAddInspectionPoint(false); + }; // 树形结构数据 - 隐患排查项 const treeData = [ @@ -219,66 +241,314 @@ const InspectionRecords = () => { return (
- {/* 顶部进度条 */} -
+ {/* 顶部进度条 - 根据状态切换图片 */} +
{/* 主体内容区域 */}
- {/* 左侧树形结构 */} -
-
隐患排查项
- -
+ {/* 左侧树形结构 - 根据状态决定是否显示 */} + {!showAddInspectionPoint && ( +
+
隐患排查项
+ +
+ )} {/* 右侧表格和操作区域 */}
- {/* 顶部按钮区域 */} -
- - -
+ {/* 根据状态渲染不同内容 */} + {!showAddInspectionPoint ? ( + <> + {/* 顶部按钮区域 */} +
+ + +
- {/* 搜索区域 */} -
-
- - +
+ + +
+ +
+ + {/* 表格 */} + - - - - {/* 表格 */} -
+ {/* 分页 */} +
+ 共 {total} 条 + `共 ${total} 条`} + /> +
+ + ) : ( +
+
+

新增巡检点

+ +
+
+ {/* 查询条件区域 - 使用antd组件 */} +
+
+ | 查询条件 +
+ + +
+
- {/* 分页 */} -
- 共 {total} 条 - `共 ${total} 条`} - /> -
+
+
+
名称
+ +
+ +
+
所属区域
+ +
+ +
+
巡检时间范围
+ +
+ +
+
关联设备
+
+ 设备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', + }, + }} + /> + + + + )} diff --git a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less index 757f7ec..aad221c 100644 --- a/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less +++ b/src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less @@ -6,6 +6,16 @@ border-radius: 10px; } +.resetBtn { + background-size: cover; + background-position: center; + color: #006665; + //opacity:0.7; + border-radius: 4px; + width: 88px; + height: 36px; +} + /* 进度条容器 */ .progressContainer { margin-bottom: 20px; @@ -111,6 +121,13 @@ padding: 20px; display: flex; flex-direction: column; + transition: all 0.3s ease; +} + +/* 当左侧树形结构隐藏时，右侧内容占据全部宽度 */ +.contentContainer:only-child .rightSide, +.contentContainer>.rightSide:last-child { + width: 100%; } /* 顶部按钮区域 */ @@ -285,6 +302,105 @@ } } +/* 表单操作按钮区域 */ +/* 新增巡检点表单样式 */ +.addInspectionPointForm { + background: #fff; + padding: 24px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); +} + +.formHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid #f0f0f0; + + h3 { + margin: 0; + font-size: 18px; + font-weight: 500; + color: #333; + } +} + +.formContent { + width: 100%; +} + +.formGroup { + display: flex; + align-items: center; + margin-bottom: 20px; + + label { + width: 120px; + font-size: 14px; + color: #333; + text-align: right; + margin-right: 16px; + } + + input[type="text"], + select { + flex: 1; + max-width: 400px; + height: 36px; + padding: 0 12px; + border: 1px solid #d9d9d9; + border-radius: 4px; + font-size: 14px; + transition: all 0.3s; + + &:focus { + border-color: #1890ff; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + outline: none; + } + } +} + +.checkboxGroup { + flex: 1; + max-width: 400px; + display: flex; + gap: 24px; + margin-bottom: 12px; + + label { + width: auto; + text-align: left; + margin-right: 8px; + font-weight: normal; + cursor: pointer; + } +} + +.deviceTagGroup { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 12px; +} + +.deviceTag { + display: inline-block; + padding: 4px 12px; + background-color: #f0f0f0; + border-radius: 12px; + font-size: 14px; + cursor: pointer; + transition: all 0.3s ease; + + &:hover { + background-color: #e0e0e0; + color: #1890ff; + } +} + /* 响应式设计 */ @media (max-width: 1200px) { .contentContainer { @@ -297,6 +413,119 @@ } } +/* 查询条件区域样式 */ +.queryConditionContainer { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + margin-bottom: 20px; +} + +.queryConditionHeader { + display: flex; + align-items: center; + margin-bottom: 20px; + font-size: 16px; + font-weight: 500; + color: #333; + justify-content: space-between; +} + +.queryConditionIcon { + margin-right: 8px; +} + +/* 查询行布局 */ +.queryRow { + display: flex; + margin-bottom: 16px; + gap: 20px; +} + +/* 查询列布局 */ +.queryCol { + flex: 1; + display: flex; + flex-direction: column; +} + +/* 查询标签样式 */ +.queryColLabel { + font-size: 14px; + color: #333; + margin-bottom: 8px; +} + +/* 查询输入框样式 */ +.queryInput { + width: 100%; + max-width: 200px; +} + +/* 查询选择器样式 */ +.querySelect { + width: 100%; + max-width: 200px; +} + +/* 查询日期范围样式 */ +.queryDateRange { + width: 100%; + max-width: 280px; +} + +/* 设备标签组样式 */ +.deviceTags { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +/* 查询操作按钮区域 */ +.queryActions { + display: flex; + justify-content: flex-end; + gap: 12px; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid #f0f0f0; +} + +.queryButton { + background-color: #006665; + border-color: #006665; +} + +.queryButton:hover { + background-color: #00876e; + border-color: #00876e; +} + +/* 确保第一行四个查询项正确显示 */ +.queryRow:first-of-type { + .queryCol { + flex: 1; + } +} + +/* 确保第二行两个查询项正确显示 */ +.queryRow:last-of-type:not(:last-child) { + .queryCol { + flex: 1; + } +} + +@media (max-width: 1200px) { + .queryRow { + flex-wrap: wrap; + } + + .queryCol { + min-width: calc(50% - 10px); + } +} + @media (max-width: 768px) { .container { padding: 10px; @@ -317,4 +546,18 @@ align-items: center; gap: 12px; } + + .queryRow { + flex-direction: column; + } + + .queryCol { + min-width: 100%; + } + + .queryInput, + .querySelect, + .queryDateRange { + max-width: 100%; + } } \ No newline at end of file