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

台帐维护记录

Browse Source
main
zjlnb666 2 months ago
parent b2399bbe12
commit f479e853f3
2 changed files with 368 additions and 43 deletions
Show Stats Download Patch File Download Diff File

370
src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.js
Unescape Escape View File

@ -2,7 +2,7 @@
import styles from './inspectionRecords.less'
import titleBg from '@/assets/img/recordTitleBg.png'
import {useEffect, useRef, useState} from "react";
import {Button, Col, DatePicker, Drawer, Input, Menu, Row, Select, Table, Tag, Tree} from "antd";
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";
@ -14,6 +14,8 @@ 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 = [
{
@ -283,7 +285,40 @@ const Drawers1=({open,onClose,row})=>{
</Drawer>
)
}
const Drawers2=({open,row,onClose})=>{
console.log(row)
return(
<Drawer
title={'编辑'}
width={300}
open={open}
onClose={onClose}
className={styles['drawer2']}
>
<Title title={'基本信息'}></Title>
<Row gutter={[0,20]} style={{marginTop:'20px'}}>
<Col span={24}><label htmlFor="">期初分类:</label><span>{row.initialCategory}</span></Col>
<Col span={24}><label htmlFor="">重点设备:</label><span>{row.keyEquipment}</span></Col>
<Col span={24}><label htmlFor="">设备编号:</label><span>{row.equipmentNo}</span></Col>
<Col span={24}><label htmlFor="">设备名称:</label><span>{row.equipmentName}</span></Col>
<Col span={24}><label htmlFor="">设备状态:</label><span>{row.equipmentStatus}</span></Col>
<Col span={24}><label htmlFor="">物资分类:</label><span>{row.materialCategory}</span></Col>
<Col span={24}><label htmlFor="">价格分类:</label><span>{row.priceCategory}</span></Col>
<Col span={24}><label htmlFor="">特种设备分类:</label><span>{row.specialEquipmentCategory}</span></Col>
<Col span={24}><label htmlFor="">数量:</label><span>{row.quantity}</span></Col>
<Col span={24}><label htmlFor="">计量单位:</label><span>{row.unit}</span></Col>
<Col span={24}><label htmlFor="">规格:</label><span>{row.specification}</span></Col>
<Col span={24}><label htmlFor="">安装位置:</label><span>{row.installationLocation}</span></Col>
<Col span={24}><label htmlFor="">排序:</label><span>{row.sort}</span></Col>
<Col span={24}><label htmlFor="">备注:</label><span>暂无</span></Col>
</Row>
<div style={{position:'absolute',bottom:'20px',right:'20px'}}>
<Button className={styles['Drawer2Btn1']}>取消</Button>
<Button className={styles['Drawer2Btn2']}>保存</Button>
</div>
</Drawer>
)
}
//巡检记录首页
const InspectionRecordHomepage=()=>{
const [data1,setData1]=useState([])
@ -298,6 +333,9 @@ const InspectionRecordHomepage=()=>{
let chart2=null
let chart3=null
useEffect(()=>{
if (!chartRef.current) {
return
}
chart=echarts.init(chartRef.current)
const option={
// 坐标轴
@ -358,6 +396,9 @@ const InspectionRecordHomepage=()=>{
};
},[])
useEffect(()=>{
if (!chartRef1.current) {
return
}
chart1=echarts.init(chartRef1.current)
const option={
legend:{
@ -394,6 +435,9 @@ const InspectionRecordHomepage=()=>{
}
},[])
useEffect(()=>{
if (!chartRef2.current) {
return
}
chart2=echarts.init(chartRef2.current)
const option={
xAxis:{
@ -434,6 +478,9 @@ const InspectionRecordHomepage=()=>{
}
},[])
useEffect(()=>{
if (!chartRef3.current) {
return
}
chart3=echarts.init(chartRef3.current)
const option={
legend:{
@ -1704,97 +1751,143 @@ const InspectionStatusQueryOnTheSameDay=()=>{
//设备台账查询与维护
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: 'equipmentCode',
key: 'equipmentCode',
width: 120,
dataIndex: 'equipmentNo',
key: 'equipmentNo',
},
{
title: '设备名称',
dataIndex: 'equipmentName',
key: 'equipmentName',
width: 100,
},
{
title: '设备状态',
dataIndex: 'status',
key: 'status',
width: 100,
render: (status) => (
<Tag color={status === '已启用' ? 'green' : 'blue'}>
{status}
</Tag>
),
dataIndex: 'equipmentStatus',
key: 'equipmentStatus',
},
{
title: '物资分类',
title: '物质分类',
dataIndex: 'materialCategory',
key: 'materialCategory',
width: 100,
},
{
title: '价格分类',
dataIndex: 'priceCategory',
key: 'priceCategory',
width: 100,
},
{
title: '特种设备分类',
dataIndex: 'specialEquipmentCategory',
key: 'specialEquipmentCategory',
width: 120,
},
{
title: '数量',
dataIndex: 'quantity',
key: 'quantity',
width: 80,
align: 'center',
},
{
title: '计量单位',
dataIndex: 'unit',
key: 'unit',
width: 100,
},
{
title: '规格',
dataIndex: 'specification',
key: 'specification',
},
{
title: '安装位置',
dataIndex: 'installationLocation',
key: 'installationLocation',
},
{
title: '排序',
dataIndex: 'sort',
key: 'sort',
},
{
title: '操作',
key: 'operation',
render: (_,record) => (
<div style={{display:'flex', justifyContent:'space-between'}}>
<a style={{color:'#2C9E9D'}}>查看详情</a>
<a onClick={()=>{
setRow(record)
setOpen(true)
}} style={{color:'#2C9E9D'}}>编辑</a>
<a style={{ color: 'red' }}>删除</a>
</div>
),
align:'center',
},
];
// 表格数据
const dataSource = [
{
key: '1',
equipmentCode: '60-1611',
equipmentName: '发电机',
status: '已启用',
initialCategory: '电气系统',
keyEquipment: '是',
equipmentNo: 'eq-f611',
equipmentName: '#1发电机',
equipmentStatus: '已使用',
materialCategory: '设备',
priceCategory: 'ne',
specialEquipmentCategory: '发电机',
priceCategory: '机组',
specialEquipmentCategory: '高压电机',
quantity: 1,
unit: '台',
specification: 'QFZN',
installationLocation: '定子间',
sort: 5,
},
{
key: '2',
equipmentCode: '20-9722',
equipmentName: '12 ME',
status: '已启用',
initialCategory: '化学系统',
keyEquipment: '否',
equipmentNo: 'eq-p722',
equipmentName: '#2加药泵',
equipmentStatus: '备用',
materialCategory: '设备',
priceCategory: 'me',
specialEquipmentCategory: '',
quantity: 5,
unit: '套',
priceCategory: '泵类',
specialEquipmentCategory: '离心泵',
quantity: 1,
unit: '台',
specification: '50m³/h',
installationLocation: '加药间',
sort: 3,
},
{
key: '3',
equipmentCode: '60-4889',
equipmentName: 'ROReR',
status: '已启用',
initialCategory: '水处理',
keyEquipment: '是',
equipmentNo: 'eq-v833',
equipmentName: '反渗透装置',
equipmentStatus: '已使用',
materialCategory: '设备',
priceCategory: 'ae',
specialEquipmentCategory: '',
quantity: 3,
unit: '个',
priceCategory: '容器',
specialEquipmentCategory: '压力容器',
quantity: 1,
unit: '套',
specification: '100t/h',
installationLocation: '水处理间',
sort: 1,
},
];
const rowSelection = {
@ -1833,6 +1926,21 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
}
]
// 处理页码变化
const handlePageChange = (page, pageSize) => {
setCurrentPage(page);
setPageSize(pageSize);
};
// 处理每页条数变化
const handlePageSizeChange = (current, size) => {
setPageSize(size);
setCurrentPage(1); // 重置到第一页
};
const onClose=()=>{
setOpen(false)
}
return (
<div style={{backgroundColor:'#fff',padding:'20px'}}>
<Row gutter={20} >
@ -1860,7 +1968,7 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
<Button icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']} style={{backgroundImage: `url(${btnImg3})`}}>重置</Button>
</Col>
</Row>
<Row wrap={true} style={{margin:'20px 0',borderBottom:'1px solid #eee',paddingBottom:'20px'}} gutter={[0,20]} className={styles['selectForm']}>
<Row wrap={true} style={{marginTop:'20px',marginBottom:'20px',borderBottom:'1px solid #eee',paddingBottom:'20px'}} gutter={[0,20]} className={styles['selectForm']}>
<Col span={6}>
<label htmlFor="">系统分类:</label>
<Select defaultValue={'全部'} style={{width:'132px',marginLeft:'15px'}}></Select>
@ -1904,11 +2012,18 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
dataSource={dataSource}
pagination={false}
rowSelection={rowSelection}
style={{width:'100%',minHeight:'400px'}}
className={styles['recordTable']}
></Table>
<Drawers2 open={open} onClose={onClose} row={row}></Drawers2>
</Row>
<Row>
<TablePagination
currentPage={currentPage}
pageSize={pageSize}
total={total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
></TablePagination>
</Row>
</div>
</Col>
@ -1916,6 +2031,173 @@ const EquipmentLedgerQueryAndMaintenance=()=>{
</div>
)
}
//台账维护记录
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) => <a style={{color:'#2C9E9D'}}>{text}</a>, // 可添加点击事件实现详情查看
},
];
const rowSelection = {
selectedRowKeys,
onChange: (newSelectedRowKeys) => {
setSelectedRowKeys(newSelectedRowKeys);
}
};
// 处理页码变化
const handlePageChange = (page, pageSize) => {
setCurrentPage(page);
setPageSize(pageSize);
};
// 处理每页条数变化
const handlePageSizeChange = (current, size) => {
setPageSize(size);
setCurrentPage(1); // 重置到第一页
};
return(
<div style={{backgroundColor:'#fff',padding:'20px'}}>
<Row justify={'space-between'} >
<Col>
<Title title={'精准查询'}></Title>
</Col>
<Col>
<Button style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}} icon={<SearchOutlined></SearchOutlined>} className={styles['addBtn']}>查询</Button>
<Button style={{backgroundImage:`url(${btnImg3})`}} icon={<UndoOutlined></UndoOutlined>} className={styles['resetBtn']}>重置</Button>
</Col>
</Row>
<Row style={{padding:'20px 0',borderBottom:'1px solid #EEEEEE'}} >
<Form
layout={'inline'}
style={{display:'flex', justifyContent:'space-between',width:'100%'}}
>
<Form.Item label={'维护时间范围：'}>
<RangePicker></RangePicker>
</Form.Item>
<Form.Item label={'设备分类：'}>
<Select defaultValue={'全部'}></Select>
</Form.Item>
<Form.Item label={'设备名称：'}>
<Input placeholder={'请输入位置'}></Input>
</Form.Item>
<Form.Item label={'更新人：'}>
<Input placeholder={'请输入位置'}></Input>
</Form.Item>
<Form.Item label={'维护方式：'}>
<Select defaultValue={'全部'}></Select>
</Form.Item>
</Form>
</Row>
<Row style={{marginTop:'20px'}}>
<Table
rowSelection={rowSelection}
dataSource={dataSource}
columns={columns}
style={{width:'100%'}}
pagination={false}
></Table>
</Row>
<Row>
<TablePagination
currentPage={currentPage}
pageSize={pageSize}
total={total}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
></TablePagination>
</Row>
</div>
)
}
const items = [
{
label: <MenuBg text={'巡检记录'} icon={<DownOutlined style={{fontSize: 16}}/>}></MenuBg>,
@ -1940,6 +2222,7 @@ const items = [
key:'设备台账数据',
children:[
{label:'设备台账查询与维护',key:'设备台账查询与维护'},
{label:'台账维护记录',key:'台账维护记录'},
]
},
{
@ -1958,6 +2241,7 @@ const tabList={
'当前巡检状态查询': <CurrentInspectionStatusQuery></CurrentInspectionStatusQuery>,
'当日巡检状态查询': <InspectionStatusQueryOnTheSameDay></InspectionStatusQueryOnTheSameDay>,
'设备台账查询与维护': <EquipmentLedgerQueryAndMaintenance></EquipmentLedgerQueryAndMaintenance>,
'台账维护记录': <TheLedgerMaintainsRecords></TheLedgerMaintainsRecords>,
}
const InspectionRecords=()=>{
const [current,setCurrent]=useState('巡检记录首页')

41
src/pages/inspectiontasks/components/Inspectionrecords/inspectionRecords.less
Unescape Escape View File

@ -167,3 +167,44 @@
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;
}

Write Preview
Loading…
Cancel
Save