jiangxucong
/
dq-osi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增页面：巡检管理—-巡检点管理—-生成二维码与扫码巡查

Browse Source
main
yupeng 18 hours ago
parent 811b665424
commit b2399bbe12
5 changed files with 787 additions and 223 deletions
Show Stats Download Patch File Download Diff File

96
src/assets/img/QRCodeScanning.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

196
src/assets/img/progress3.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

103
src/assets/img/scanningProcessDemonstration.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

179
src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js
Unescape Escape View File

@ -1,6 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd'; 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 { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import btnImg3 from '@/assets/img/planBtn3.png' import btnImg3 from '@/assets/img/planBtn3.png'
@ -8,6 +10,8 @@ const { Option } = Select;
import styles from './inspectionRecords.less'; import styles from './inspectionRecords.less';
import progress1 from '@/assets/img/progress1.svg'; import progress1 from '@/assets/img/progress1.svg';
import progress2 from '@/assets/img/progress2.svg'; import progress2 from '@/assets/img/progress2.svg';
import progress3 from '@/assets/img/progress3.svg';
import btnImg1 from '@/assets/img/planBtn1.png'; import btnImg1 from '@/assets/img/planBtn1.png';
import btnImg2 from '@/assets/img/planBtn2.png'; import btnImg2 from '@/assets/img/planBtn2.png';
import { import {
@ -20,9 +24,10 @@ import {
} from "@ant-design/icons"; } from "@ant-design/icons";
// 巡检点管理组件 // 巡检点管理组件
const InspectionRecords = () => { const InspectionRecords = () => {
const [currentPage, setCurrentPage] = useState(6); const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10); 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); // 控制是否显示新增巡检点表单 const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单
// 处理新增巡检点按钮点击 // 处理新增巡检点按钮点击
@ -244,7 +249,9 @@ const InspectionRecords = () => {
{/* 顶部进度条 - 根据状态切换图片 */} {/* 顶部进度条 - 根据状态切换图片 */}
<div <div
className={styles.progressContainer} className={styles.progressContainer}
style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }} // style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
// style={{ backgroundImage: `url(${currentPageSection === 3 ? progress3 : currentPageSection === 2 ? progress2 : progress1})` }}
style={{ backgroundImage: `url(${!showAddInspectionPoint ? progress1 : currentPageSection === 1 ? progress2 : progress3})` }}
></div> ></div>
{/* 主体内容区域 */} {/* 主体内容区域 */}
@ -311,10 +318,12 @@ const InspectionRecords = () => {
</div> </div>
</> </>
) : ( ) : (
currentPageSection === 1 ? (
<div className={styles.addInspectionPointForm}> <div className={styles.addInspectionPointForm}>
<div className={styles.formHeader}> <div className={styles.formHeader}>
<h3>新增巡检点</h3> <Button onClick={handleBack}>上一页</Button>
<Button onClick={handleBack}>返回</Button> <Button onClick={() => setCurrentPageSection(2)}>下一页</Button>
{/* <h3>新增巡检点</h3> */}
</div> </div>
<div className={styles.formContent}> <div className={styles.formContent}>
{/* 查询条件区域 - 使用antd组件 */} {/* 查询条件区域 - 使用antd组件 */}
@ -548,6 +557,166 @@ const InspectionRecords = () => {
</div> </div>
</div> </div>
</div> </div>
) : (
<div className={styles.addInspectionPointForm}>
<div className={styles.formHeader}>
<Button onClick={() => setCurrentPageSection(1)}>上一页</Button>
</div>
<div className={styles.formContent}>
{/* 三栏布局 */}
<div style={{ display: 'flex', gap: '10px', height: '100%' }}>
{/* 第一栏：二维码生成 */}
<div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '10px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>二维码生成</h3>
<div style={{ marginBottom: '20px' }}>
<label style={{ marginRight: '5px' }}>选择巡检点：</label>
<Select style={{ width: 130 }} placeholder="请选择">
<Option value="1">车辆二维扫码</Option>
</Select>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>生成二维码</Button>
</div>
<div style={{ width: '200px', height: '200px', border: '1px dashed #d9d9d9', margin: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
{/* 二维码SVG */}
<img
src={QRCodeScanning}
alt="二维码"
style={{ width: '150px', height: '150px', objectFit: 'contain' }}
/>
</div>
<div style={{ display: 'flex', gap: '10px' }}>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>下载</Button>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
打印
</Button>
</div>
</div>
{/* 第二栏：扫码流程 */}
<div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>扫码流程演示</h3>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
{/* Step 1 */}
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '400px' }}>
{/* 扫码流程演示SVG */}
<img
src={scanningProcessDemonstration}
alt="扫码流程演示"
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
/>
</div>
</div>
</div>
{/* 第三栏：历史记录 */}
<div style={{ flex: 2, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>历史记录</h3>
<div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
<div>
<label style={{ marginRight: '5px' }}>人员：</label>
<Input placeholder="请输入人员名称" style={{ width: 150 }} />
</div>
<div>
<label style={{ marginRight: '5px' }}>巡检点：</label>
<Select style={{ width: 120 }} placeholder="全部">
<Option value="all">全部</Option>
</Select>
</div>
<Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
</div>
{/* 历史记录表格 */}
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ backgroundColor: '#fafafa' }}>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>序号</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检点</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>人员</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>时间</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检结果</th>
</tr>
</thead>
<tbody>
{/* 模拟数据 */}
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>1</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>一号储罐消防</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>赵翔</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-16 08:07</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>油品装卸站台</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>钱新</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-04 14:38</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="orange">已完成(有隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>3</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>办公区消防通道</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>孙引琪</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-28 11:02</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>4</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>输油管廊间A</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>李婧静</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-20 08:14</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="orange">已完成(有隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>5</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>消防水泵房</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>冯冯</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-16 02:44</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
</tbody>
</table>
</div>
{/* 分页 */}
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>共 85 条</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<span>10 / page</span>
<Select style={{ width: 60 }} defaultValue="10">
<Option value="10">10</Option>
<Option value="20">20</Option>
</Select>
<div style={{ display: 'flex', gap: '5px' }}>
<Button disabled>←</Button>
<Button type="primary" style={{ backgroundColor: '#006665' }}>1</Button>
<span>...</span>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
<span>...</span>
<Button>50</Button>
<Button>→</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
)} )}
</div> </div>
</div> </div>

6
src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less
Unescape Escape View File

@ -416,9 +416,9 @@
/* 查询条件区域样式 */ /* 查询条件区域样式 */
.queryConditionContainer { .queryConditionContainer {
background: #fff; background: #fff;
padding: 20px; // padding: 20px;
border-radius: 8px; // border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-bottom: 20px; margin-bottom: 20px;
} }

Write Preview
Loading…
Cancel
Save