|
|
|
|
@ -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,12 +241,16 @@ const InspectionRecords = () => {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles.container}>
|
|
|
|
|
{/* 顶部进度条 */}
|
|
|
|
|
<div className={styles.progressContainer}></div>
|
|
|
|
|
{/* 顶部进度条 - 根据状态切换图片 */}
|
|
|
|
|
<div
|
|
|
|
|
className={styles.progressContainer}
|
|
|
|
|
style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
|
|
|
|
|
></div>
|
|
|
|
|
|
|
|
|
|
{/* 主体内容区域 */}
|
|
|
|
|
<div className={styles.contentContainer}>
|
|
|
|
|
{/* 左侧树形结构 */}
|
|
|
|
|
{/* 左侧树形结构 - 根据状态决定是否显示 */}
|
|
|
|
|
{!showAddInspectionPoint && (
|
|
|
|
|
<div className={styles.leftSide}>
|
|
|
|
|
<div className={styles.treeTitle}>隐患排查项</div>
|
|
|
|
|
<Tree
|
|
|
|
|
@ -235,9 +261,13 @@ const InspectionRecords = () => {
|
|
|
|
|
checkable
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* 右侧表格和操作区域 */}
|
|
|
|
|
<div className={styles.rightSide}>
|
|
|
|
|
{/* 根据状态渲染不同内容 */}
|
|
|
|
|
{!showAddInspectionPoint ? (
|
|
|
|
|
<>
|
|
|
|
|
{/* 顶部按钮区域 */}
|
|
|
|
|
<div className={styles.topButtons}>
|
|
|
|
|
<Button className={styles['button']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>重新选择</Button>
|
|
|
|
|
@ -254,7 +284,7 @@ const InspectionRecords = () => {
|
|
|
|
|
className={styles.searchInput}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<Button type="primary" className={styles.addButton}>新增巡检点</Button>
|
|
|
|
|
<Button type="primary" className={styles.addButton} onClick={handleAddInspectionPoint}>新增巡检点</Button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 表格 */}
|
|
|
|
|
@ -279,6 +309,246 @@ const InspectionRecords = () => {
|
|
|
|
|
showTotal={(total) => `共 ${total} 条`}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<div className={styles.addInspectionPointForm}>
|
|
|
|
|
<div className={styles.formHeader}>
|
|
|
|
|
<h3>新增巡检点</h3>
|
|
|
|
|
<Button onClick={handleBack}>返回</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.formContent}>
|
|
|
|
|
{/* 查询条件区域 - 使用antd组件 */}
|
|
|
|
|
<div className={styles.queryConditionContainer}>
|
|
|
|
|
<div className={styles.queryConditionHeader}>
|
|
|
|
|
<span className={styles.queryConditionIcon}>| 查询条件</span>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryRow}>
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>名称</div>
|
|
|
|
|
<Input className={styles.queryInput} placeholder="请输入名称" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>所属区域</div>
|
|
|
|
|
<Select className={styles.querySelect} placeholder="全部">
|
|
|
|
|
<Option value="">全部</Option>
|
|
|
|
|
<Option value="area1">储罐储存区</Option>
|
|
|
|
|
<Option value="area2">泵房区域</Option>
|
|
|
|
|
<Option value="area3">装卸区域</Option>
|
|
|
|
|
<Option value="area4">办公区域</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>巡检时间范围</div>
|
|
|
|
|
<DatePicker.RangePicker className={styles.queryDateRange} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>关联设备</div>
|
|
|
|
|
<div className={styles.deviceTags}>
|
|
|
|
|
<Tag color="blue">设备1</Tag>
|
|
|
|
|
<Tag color="blue">设备2</Tag>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryRow}>
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>位置</div>
|
|
|
|
|
<Input className={styles.queryInput} placeholder="请输入位置" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className={styles.queryCol}>
|
|
|
|
|
<div className={styles.queryColLabel}>巡检频率</div>
|
|
|
|
|
<Select className={styles.querySelect} placeholder="全部">
|
|
|
|
|
<Option value="">全部</Option>
|
|
|
|
|
<Option value="daily">每日</Option>
|
|
|
|
|
<Option value="weekly">每周</Option>
|
|
|
|
|
<Option value="monthly">每月</Option>
|
|
|
|
|
<Option value="other">其他</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* <div className={styles.queryActions}>
|
|
|
|
|
|
|
|
|
|
</div> */}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 巡检点列表 - 使用antd组件 */}
|
|
|
|
|
<div>
|
|
|
|
|
<div style={{ marginBottom: '20px', fontSize: '16px', fontWeight: '500' }}>| 巡检点列表</div>
|
|
|
|
|
|
|
|
|
|
{/* 顶部按钮组 */}
|
|
|
|
|
<div className={styles.tableButtons} style={{ marginBottom: '20px' }}>
|
|
|
|
|
<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>
|
|
|
|
|
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>
|
|
|
|
|
删除
|
|
|
|
|
</Button>
|
|
|
|
|
<Button icon={<PlusOutlined />} type="primary" style={{ backgroundImage: `url(${btnImg1})`, float: 'right' }} className={styles.button}>
|
|
|
|
|
新增巡检点
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 巡检点表格 - 使用antd Table组件 */}
|
|
|
|
|
<Table
|
|
|
|
|
className={styles.table}
|
|
|
|
|
rowSelection={{
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
|
|
|
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 <span style={{ color }}>{text}</span>;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '巡检频率',
|
|
|
|
|
dataIndex: 'frequency',
|
|
|
|
|
key: 'frequency',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
width: 200,
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
<Space size="middle">
|
|
|
|
|
<Button
|
|
|
|
|
type="text"
|
|
|
|
|
style={{ color: '#006665' }}
|
|
|
|
|
onClick={() => console.log('查看详情:', record)}
|
|
|
|
|
>
|
|
|
|
|
查看详情
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
type="text"
|
|
|
|
|
style={{ color: '#1890ff' }}
|
|
|
|
|
onClick={() => console.log('编辑:', record)}
|
|
|
|
|
>
|
|
|
|
|
编辑
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
type="text"
|
|
|
|
|
style={{ color: '#52c41a' }}
|
|
|
|
|
onClick={() => console.log('巡检:', record)}
|
|
|
|
|
>
|
|
|
|
|
巡检
|
|
|
|
|
</Button>
|
|
|
|
|
</Space>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
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',
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
