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

巡检记录页面

Browse Source
main
zjlnb666 1 day ago
parent 72f2140c64
commit 7f83dcb869
9 changed files with 526 additions and 20 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/img/record1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/img/record2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/assets/img/record3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

3
src/pages/inspectiontasks/InspectionTask.less
Unescape Escape View File

@ -14,6 +14,9 @@
:global(.ant-table-thead > tr > th){
background-color:#F0F7F7;
}
//:global(.ant-picker,.ant-input){
// border:1px solid #2C9E9D !important;
//}
}
*{
font-size:16px

11
src/pages/inspectiontasks/InspectionTasks.js
Unescape Escape View File

@ -57,8 +57,15 @@ const InspectionTasks = () => {
activeBarHeight:0
},
Select:{
activeBorderColor:'#2C9E9D'
}
activeBorderColor:'#2C9E9D',
colorBorder:'#2C9E9D'
},
Input:{
colorBorder:'#2C9E9D'
},
DatePicker:{
colorBorder:'#2C9E9D'
},
},
};
const onChange=()=>{

496
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} from "antd";
import {Button, Col, DatePicker, Drawer, Input, Menu, Row, Select, Table, Tag} from "antd";
import {MenuBg, TablePagination} from "@/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan";
import {DownOutlined, SearchOutlined, UndoOutlined} from "@ant-design/icons";
import {Title} from "@/pages/inspectiontasks/InspectionTasks";
@ -10,9 +10,77 @@ import * as echarts from 'echarts';
import btnImg1 from '@/assets/img/planBtn1.png'
import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png'
import record1 from '@/assets/img/record1.png'
import record2 from '@/assets/img/record2.png'
import record3 from '@/assets/img/record3.png'
const Drawers=(props)=>{
const columns = [
{
title: '设备名称',
dataIndex: 'deviceName',
key: 'deviceName',
// width: 200,
},
{
title: '关注指标',
dataIndex: 'metric',
key: 'metric',
// width: 150,
},
{
title: '指标值',
dataIndex: 'value',
key: 'value',
// width: 120,
render: (value) => <strong>{value}</strong>,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 70,
render: (status) => (
<Tag color={status === '正常' ? 'green' : 'red'}>
{status}
</Tag>
),
},
{
title: '备注',
dataIndex: 'remark',
key: 'remark',
width:140,
ellipsis: true,
},
];
// 数据源
const dataSource = [
{
key: '1',
deviceName: '1# 储油罐',
metric: '液位高度',
value: '10.5m',
status: '正常',
remark: '无泄漏',
},
{
key: '2',
deviceName: '输油主泵',
metric: '出口压力',
value: '0.6MPa',
status: '正常',
remark: '振动值<3mm/s',
},
{
key: '3',
deviceName: '中控室 DCS 系统',
metric: '信号冗余度',
value: '99%',
status: '正常',
remark: '双路供电稳定',
},
];
console.log(props.row)
return(
<Drawer
@ -20,7 +88,7 @@ const Drawers=(props)=>{
closable={{'aria-label': 'Close Button'}}
open={props.open}
onClose={props.onClose}
width={500}
width={522}
className={styles['customDrawer']}
>
<Title title={'基本信息'}></Title>
@ -52,16 +120,121 @@ const Drawers=(props)=>{
</Row>
<Title title={'当值记事'}></Title>
<Row style={{marginTop:'20px',}}>
<ul >
<li style={{fontSize:'14px'}}>1#储油罐液位10.5m稳定，输油主泵压力0.6MPa无波动，中控室DCS系统信号冗余度99%</li>
<ul className={styles['drawersUl']}>
<li>1#储油罐液位10.5m稳定，输油主泵压力0.6MPa无波动，中控室DCS系统信号冗余度99%</li>
</ul>
</Row>
<Row style={{marginTop:'20px'}}>
<Title title={'关注设备及指标'}></Title>
<Table
dataSource={dataSource}
columns={columns}
pagination={false}
className={styles['drawersTable']}
>
</Table>
</Row>
</Drawer>
)
}
const InspectionStatusComponent=({shifts,valueLong,statues,dataSource})=>{
const columns = [
{
title: '巡检名称',
dataIndex: 'inspectionName',
key: 'inspectionName',
align:'center',
width:'20%',
},
{
title: '巡检状态',
dataIndex: 'inspectionStatus',
key: 'inspectionStatus',
align:'center',
width:'20%',
},
{
title: '巡检人',
dataIndex: 'inspector',
key: 'inspector',
align:'center',
width:'20%',
},
{
title: '已巡区域',
dataIndex: 'inspectedArea',
key: 'inspectedArea',
align:'center',
width:'20%',
render:(value)=>{
return <>
<span style={{color:'#2C9E9D'}}>{value}</span>
</>
}
},
{
title: '漏检区域',
dataIndex: 'missedArea',
key: 'missedArea',
align:'center',
width:'20%',
render:(value)=>{
return <>
<span style={{color:'#2C9E9D'}}>{value}</span>
</>
}
},
];
return(
<>
<Row style={{width:'100%',color:'#006665'}}>
<Col span={2}>班次:&nbsp;{shifts}</Col>
<Col span={2}>值长:&nbsp;{valueLong}</Col>
<Col span={2}>签到状态:&nbsp;{statues}</Col>
</Row>
<Row style={{width:'100%',marginTop:'20px'}}>
<Table
pagination={false}
dataSource={dataSource}
columns={columns}
style={{width:'100%'}}
locale={{
emptyText:(
<div style={{display:'flex',justifyContent:'center',alignItems:'center',height:'40px'}}>
暂无数据
</div>
)
}}
>
</Table>
</Row>
</>
)
}
const Drawers1=({open,onClose,row})=>{
return(
<Drawer
title={'查看详情'}
open={open}
onClose={onClose}
width={522}
className={styles['customDrawer']}
>
<Title title={'基本信息'}></Title>
<Row wrap={true} style={{marginTop:'20px'}} gutter={[0,20]}>
<Col span={24}>
<Row>
<Col></Col>
<Col></Col>
</Row>
</Col>
<Col span={24}>2</Col>
</Row>
</Drawer>
)
}
//巡检记录首页
const InspectionRecordHomepage=()=>{
@ -1176,6 +1349,310 @@ const HistoricalDailyValueRecordQuery=()=>{
</div>
)
}
//当前巡检状态查询
const CurrentInspectionStatusQuery=()=>{
const dataSource1=[]
const dataSource2 = [
{
key: '1',
inspectionName: '白班巡检',
inspectionStatus: '已完成',
inspector: '李宇宙',
inspectedArea: '已巡区域 (1)',
missedArea: '漏检区域 (0)',
},
];
const dataSource3 = [
{
key: '1',
inspectionName: '白班巡检',
inspectionStatus: '已完成',
inspector: '赵健民',
inspectedArea: '已巡区域 (1)',
missedArea: '漏检区域 (0)',
},
];
return(
<div style={{backgroundColor:'#fff',padding:'20px'}}>
<Row style={{borderBottom:'1px solid #EEEEEE',paddingBottom:'20px'}}>
<Row style={{width:'100%'}} justify={"space-between"}>
<Title title={'当前巡检状态查询'}></Title>
<Col>
<Button className={styles['addBtn']} icon={<SearchOutlined></SearchOutlined>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
<Button className={styles['resetBtn']} icon={<UndoOutlined></UndoOutlined>} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
</Col>
</Row>
<Row style={{width:'100%',marginTop:'20px'}}>
<Col span={6}>
<label htmlFor="" style={{marginRight:'15px'}}> 岗位类型:</label>
<Select defaultValue={'全部'} style={{width:'200px'}}></Select>
</Col>
<Col span={6}>
<label htmlFor="" style={{marginRight:'15px'}}> 巡检日期:</label>
<DatePicker></DatePicker>
</Col>
</Row>
</Row>
<Row style={{padding:'20px 0'}}>
<InspectionStatusComponent
shifts='白班'
valueLong='马德利'
statues='补签'
dataSource={dataSource1}
></InspectionStatusComponent>
</Row>
<Row style={{padding:'20px 0'}}>
<InspectionStatusComponent
shifts='中班'
valueLong='刘丽'
statues='补签'
dataSource={dataSource2}
></InspectionStatusComponent>
</Row>
<Row style={{padding:'20px 0'}}>
<InspectionStatusComponent
shifts='夜班'
valueLong='温浙源'
statues='正常签到'
dataSource={dataSource3}
></InspectionStatusComponent>
</Row>
</div>
)
}
//当日巡检状态查询
const InspectionStatusQueryOnTheSameDay=()=>{
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
const [open,setOpen]=useState(false)
const [row,setRow]=useState({})
// 选择框配置
const rowSelection = {
selectedRowKeys,
onChange: (newSelectedRowKeys) => {
setSelectedRowKeys(newSelectedRowKeys);
},
};
const columns = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
align: 'center',
width:100,
},
{
title: '巡检 ID',
dataIndex: 'inspectionId',
key: 'inspectionId',
align: 'center',
},
{
title: '设备名称',
dataIndex: 'equipmentName',
key: 'equipmentName',
align: 'center',
},
{
title: '巡检负责人',
dataIndex: 'inspector',
key: 'inspector',
align: 'center',
},
{
title: '巡检时间',
dataIndex: 'inspectionTime',
key: 'inspectionTime',
align: 'center',
},
{
title: '巡检状态',
dataIndex: 'inspectionStatus',
key: 'inspectionStatus',
align: 'center',
},
{
title: '属性名称',
dataIndex: 'propertyName',
key: 'propertyName',
align: 'center',
},
{
title: '阈值范围',
dataIndex: 'thresholdRange',
key: 'thresholdRange',
align: 'center',
},
{
title: '巡检值',
dataIndex: 'inspectionValue',
key: 'inspectionValue',
align: 'center',
},
{
title: '超限情况',
dataIndex: 'overLimit',
key: 'overLimit',
align: 'center',
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (_,record) => <a style={{ color: '#2C9E9D' }} onClick={()=>{
setRow(record)
setOpen(true)
}}>查看详情</a>,
align: 'center',
},
];
const onClose=function(){
setOpen(false)
}
const dataSource = [
{
key: '1',
checkbox: '',
index: 1,
inspectionId: 'XJ-20230519-001',
equipmentName: '#1 发电机',
inspector: '李恩霖',
inspectionTime: '2023-05-19 11:15',
inspectionStatus: '异常',
propertyName: '核心温度',
thresholdRange: '≤3000℃',
inspectionValue: '3500℃',
overLimit: '超过上限',
},
{
key: '2',
checkbox: '',
index: 2,
inspectionId: 'XJ-20230519-002',
equipmentName: '#1 发电机',
inspector: '李瑞霜',
inspectionTime: '2023-05-19 11:30',
inspectionStatus: '异常',
propertyName: '核心温度',
thresholdRange: '≤3000℃',
inspectionValue: '2600℃',
overLimit: '超过上限',
},
{
key: '3',
checkbox: '',
index: 3,
inspectionId: 'XJ-20230519-003',
equipmentName: '#1 发电机',
inspector: '赵礼义',
inspectionTime: '2023-05-19 10:15',
inspectionStatus: '异常',
propertyName: '核心温度',
thresholdRange: '≤3000℃',
inspectionValue: '4500℃',
overLimit: '超过上限',
},
{
key: '4',
checkbox: '',
index: 4,
inspectionId: 'XJ-20230519-004',
equipmentName: '输油管道段 A',
inspector: '郑文英',
inspectionTime: '2023-05-19 09:30',
inspectionStatus: '已完成',
propertyName: '压力',
thresholdRange: '0.4-0.6MPa',
inspectionValue: '0.5MPa',
overLimit: '---',
},
{
key: '5',
checkbox: '',
index: 5,
inspectionId: 'XJ-20230519-005',
equipmentName: '中控室 DCS 系统',
inspector: '王尊瑶',
inspectionTime: '2023-05-19 10:00',
inspectionStatus: '运行中',
propertyName: '信号冗余度',
thresholdRange: '≥95%',
inspectionValue: '98%',
overLimit: '---',
},
{
key: '6',
checkbox: '',
index: 6,
inspectionId: 'XJ-20230519-006',
equipmentName: '消防水泵房',
inspector: '钱韵澄',
inspectionTime: '2023-05-19 11:00',
inspectionStatus: '已完成',
propertyName: '液位',
thresholdRange: '2-5m',
inspectionValue: '3.2m',
overLimit: '---',
},
];
return(
<div style={{backgroundColor:'#fff',padding:'20px'}}>
<Row style={{borderBottom:'1px solid #EEEEEE',paddingBottom:'20px'}}>
<Row style={{width:'100%'}} justify={"space-between"}>
<Title title={'当日巡检状态查询'}></Title>
<Col>
<Button className={styles['addBtn']} icon={<SearchOutlined></SearchOutlined>} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>查询</Button>
<Button className={styles['resetBtn']} icon={<UndoOutlined></UndoOutlined>} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
</Col>
</Row>
<Row style={{width:'100%',marginTop:'20px'}}>
<Col span={6}>
<label htmlFor="" style={{marginRight:'15px'}}> 岗位类型:</label>
<Select defaultValue={'全部'} style={{width:'200px'}}></Select>
</Col>
<Col span={6}>
<label htmlFor="" style={{marginRight:'15px'}}> 班次:</label>
<Select defaultValue={'全部'} style={{width:'200px'}}></Select>
</Col>
</Row>
</Row>
<Row style={{marginTop:'20px'}}>
<Col>
<div>
<img width={'296px'} height={'120x'} src={record1} alt=""/>
</div>
</Col>
<Col>
<div>
<img width={'296px'} height={'120x'} src={record2} alt=""/>
</div>
</Col>
<Col>
<div>
<img width={'296px'} height={'120x'} src={record3} alt=""/>
</div>
</Col>
</Row>
<Row style={{marginTop:'20px'}}>
<Title title={'当日巡检状态列表'}></Title>
<Table
dataSource={dataSource}
columns={columns}
pagination={false}
style={{width:'100%',marginTop:'20px'}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
rowKey="key"
>
</Table>
<Drawers1 row={row} onClose={onClose} open={open}></Drawers1>
</Row>
</div>
)
}
const items = [
{
label: <MenuBg text={'巡检记录'} icon={<DownOutlined style={{fontSize: 16}}/>}></MenuBg>,
@ -1191,7 +1668,8 @@ const items = [
label: <MenuBg text={'巡检状态管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
key:'巡检状态管理',
children:[
{label:'当前巡检状态查询',key:'当前巡检状态查询'},
{label:'当日巡检状态查询',key:'当日巡检状态查询'},
]
},
{
@ -1213,7 +1691,9 @@ const tabList={
'巡检记录首页': <InspectionRecordHomepage></InspectionRecordHomepage>,
'接班班组签到': <TheSuccessorTeamSignsIn></TheSuccessorTeamSignsIn>,
'当班值长交班日志': <TheShiftManagerOnDutyIsTheShiftLog></TheShiftManagerOnDutyIsTheShiftLog>,
'历史日值记录查询': <HistoricalDailyValueRecordQuery></HistoricalDailyValueRecordQuery>
'历史日值记录查询': <HistoricalDailyValueRecordQuery></HistoricalDailyValueRecordQuery>,
'当前巡检状态查询': <CurrentInspectionStatusQuery></CurrentInspectionStatusQuery>,
'当日巡检状态查询': <InspectionStatusQueryOnTheSameDay></InspectionStatusQueryOnTheSameDay>,
}
const InspectionRecords=()=>{
const [current,setCurrent]=useState('巡检记录首页')

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

@ -132,3 +132,19 @@
}
}
}
.drawersUl{
li{
font-size: 14px;
line-height: 20px;
}
}
.drawersTable{
width: 100%;
margin-top: 20px;
:global(.ant-table-cell){
padding:10px 5px !important;
}
:global(.ant-table-thead > tr > th){
background-color:#F0F7F7;
}
}

8
src/pages/inspectiontasks/components/Inspectiontaskplan/InspectionTaskPlan.js
Unescape Escape View File

@ -112,7 +112,7 @@ const EmployeeTable = () => {
title: '序号',
dataIndex: 'index',
key: 'index',
width: 60,
width: 100,
align:'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},
@ -340,7 +340,7 @@ const GroupTable=()=>{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 60,
width: 100,
align:'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},
@ -565,7 +565,7 @@ const TimeTable=()=>{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 60,
width: 100,
align:'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},
@ -721,7 +721,7 @@ const StandardTable=()=>{
title: '序号',
dataIndex: 'index',
key: 'index',
width: 60,
width: 100,
align:'center',
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
},

12
src/pages/nav_system_content/SystemContentList.js
Unescape Escape View File

@ -201,8 +201,8 @@ const SystemContentList = (props) => {
style={{
width: 192,
height: 42,
borderColor: '#3D81FF',
backgroundColor: '#003AA7',
borderColor: '#008F8E',
backgroundColor: '#00666599',
borderRadius: 0,
color: '#fff',
fontSize: 22,
@ -215,8 +215,8 @@ const SystemContentList = (props) => {
{ value: '智能巡检系统', label: '智能巡检系统' }
]}
dropdownStyle={{
backgroundColor: '#003AA7',
borderColor: '#3D81FF'
borderColor: '#008F8E',
backgroundColor: '#006665',
}}
popupClassName="custom-select-dropdown"
className="custom-select"
@ -227,8 +227,8 @@ const SystemContentList = (props) => {
.custom-select .ant-select-selector {
height: 42px !important;
border-radius: 0 !important;
border-color: #3D81FF !important;
background-color: #003AA7 !important;
border-color: #008F8E !important;
background-color: #006665 !important;
color: #fff !important;
fontSize: 22px !important;
fontWeight: 600 !important;

Write Preview
Loading…
Cancel
Save