隐患提交
zjlnb666
1 month ago
parent
00116906f0
commit
17dc1193df
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@ -0,0 +1,100 @@
|
||||
import {Col, List, Row} from "antd";
|
||||
import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
||||
|
||||
const headerList=[
|
||||
{
|
||||
title:'总隐患数',
|
||||
num:'1489',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#E5EEFE',
|
||||
color:'#1269FF',
|
||||
},
|
||||
{
|
||||
title:'已整改隐患',
|
||||
num:'986',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#D9F8E8',
|
||||
color:'#1DCE74',
|
||||
},
|
||||
{
|
||||
title:'整改率',
|
||||
num:'86%',
|
||||
data:'8',
|
||||
flag:2,
|
||||
grow:0,
|
||||
backgroundColor:'#FFF3E9',
|
||||
color:'orange',
|
||||
},
|
||||
{
|
||||
title:'按期整改率',
|
||||
num:'89%',
|
||||
data:'2',
|
||||
flag:3,
|
||||
grow:0,
|
||||
backgroundColor:'#FFE6E8',
|
||||
color:'#FF3E48',
|
||||
}
|
||||
]
|
||||
const data=[
|
||||
{name:'Q3设备故障类隐患',tip:'占比最高',num:'45%'},
|
||||
{name:'Q2安全防护隐患',tip:'显著下降',num:'32%'},
|
||||
{name:'Q4电器隐患',tip:'持续改善',num:'28%'},
|
||||
{name:'全年平均整改周期',tip:'同比缩短',num:'7天'},
|
||||
]
|
||||
const TrendAnalysis=()=>{
|
||||
return(
|
||||
<div style={{backgroundColor:'#fff',padding:'15px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={18}>1</Col>
|
||||
<Col span={6}>
|
||||
{data.map((item,index)=>{
|
||||
return(
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<div>
|
||||
<div style={{fontSize:'16px',fontWeight:'500',color:'#333'}}>{item.name}</div>
|
||||
<div style={{fontSize:'12px',color:'#666666'}}>{item.tip}</div>
|
||||
</div>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
{item.num}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HiddenDangerCount=()=>{
|
||||
return (
|
||||
<>
|
||||
<header style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
{headerList.map((item, index) => {
|
||||
return <Col span={6}><MyCard {...item}></MyCard></Col>
|
||||
})}
|
||||
</Row>
|
||||
</header>
|
||||
<section style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={16}>
|
||||
<TrendAnalysis></TrendAnalysis>
|
||||
</Col>
|
||||
<Col span={8}>1</Col>
|
||||
</Row>
|
||||
</section>
|
||||
<footer style={{overflow: 'hidden'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={15}>2</Col>
|
||||
<Col span={9}>2</Col>
|
||||
</Row>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenDangerCount
|
||||
@ -0,0 +1,318 @@
|
||||
import {Button, Card, Col, Input, Row, Space, Steps, Tag} from "antd";
|
||||
import MyCard, {MyTable, PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
||||
import {useEffect, useRef} from "react";
|
||||
import img1 from '../../../../assets/img/stepOne.png'
|
||||
import img2 from '../../../../assets/img/stepTwo.png'
|
||||
import img3 from '../../../../assets/img/stepThree.png'
|
||||
import img4 from '../../../../assets/img/stepFour.png'
|
||||
|
||||
import echarts from "echarts/lib/echarts";
|
||||
import {
|
||||
Export, Import,
|
||||
levelList,
|
||||
Select1, Select2
|
||||
} from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
|
||||
import './hiddenDangerRighted.less'
|
||||
const { Search } = Input;
|
||||
const dataList=[
|
||||
{
|
||||
title:'待整改隐患',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#E5EEFE',
|
||||
color:'#1269FF',
|
||||
},
|
||||
{
|
||||
title:'整改中隐患',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#D9F8E8',
|
||||
color:'#1DCE74',
|
||||
},
|
||||
{
|
||||
title:'已完成整改',
|
||||
num:'169',
|
||||
data:'8',
|
||||
flag:2,
|
||||
grow:0,
|
||||
backgroundColor:'#FFF3E9',
|
||||
color:'orange',
|
||||
},
|
||||
{
|
||||
title:'整改完成率',
|
||||
num:'89%',
|
||||
data:'2',
|
||||
flag:3,
|
||||
grow:0,
|
||||
backgroundColor:'#FFE6E8',
|
||||
color:'#FF3E48',
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const columns=[
|
||||
{align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
|
||||
{align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
|
||||
{align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{
|
||||
|
||||
return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
|
||||
}},
|
||||
{align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
|
||||
{align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
|
||||
{align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
|
||||
{align:'center',title:'治理类型',dataIndex:'type',key:'type'},
|
||||
{align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
|
||||
{align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
|
||||
{align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
|
||||
{align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
|
||||
{align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
|
||||
return <div style={{display:"flex"}}>
|
||||
<Button type={"link"}>详情</Button>
|
||||
<Button type={"link"}>验收</Button>
|
||||
</div>
|
||||
}},
|
||||
]
|
||||
|
||||
const dataSource=[
|
||||
{key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
const Qiu=(props)=>{
|
||||
return(
|
||||
<div className={'qiu'}>
|
||||
{props.num}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const items=[
|
||||
{'0': img1},
|
||||
{'1': img2},
|
||||
{'2': img3},
|
||||
{'3': img4},
|
||||
|
||||
]
|
||||
|
||||
const TrendChart=()=>{
|
||||
const TrendChart=useRef(null)
|
||||
useEffect(() => {
|
||||
const chart=echarts.init(TrendChart.current);
|
||||
const option={
|
||||
grid:{
|
||||
bottom:25,
|
||||
top:20,
|
||||
},
|
||||
legend:{
|
||||
show:true,
|
||||
left:'50%',
|
||||
top:0,
|
||||
icon: 'path://M0,0 L20,0',
|
||||
itemStyle:{
|
||||
color:'#00A0E9',
|
||||
}
|
||||
},
|
||||
xAxis:{
|
||||
type:'category',
|
||||
data:['3月','4月','5月','6月','7月','8月'],
|
||||
axisLabel:{
|
||||
color:'#000',
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed',
|
||||
}
|
||||
},
|
||||
boundaryGap: false, // 关键
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true, // 关键
|
||||
inside: true, // 刻度朝外
|
||||
length: 100, // 足够长的长度（根据图表高度调整）
|
||||
lineStyle: {
|
||||
color: '#cccccc',
|
||||
width: 1,
|
||||
type: 'dashed',
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
axisLabel:{
|
||||
color:'#000',
|
||||
type:'dashed',
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed',
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
name:'整改完成率',
|
||||
data:[120,200,150,80,70,110],
|
||||
type:'line',
|
||||
smooth:true,
|
||||
lineStyle:{
|
||||
color:'#00A0E9'
|
||||
},
|
||||
areaStyle:{
|
||||
color:{
|
||||
type:'linear',
|
||||
x:0,
|
||||
y:0,
|
||||
x2:0,
|
||||
y2:1,
|
||||
colorStops:[
|
||||
{offset:0,color:'#00A0E9'},
|
||||
{offset:1,color:'#99D4F5 '}
|
||||
]
|
||||
}
|
||||
},
|
||||
symbol:'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
// 响应式调整
|
||||
const handleResize = () => {
|
||||
chart.resize();
|
||||
};
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
chart.dispose();
|
||||
};
|
||||
}, []);
|
||||
return(
|
||||
<div style={{padding:'10px',backgroundColor:'#fff',height:'100%',width:'100%'}}>
|
||||
<div style={{fontSize:'16px',fontWeight:'600'}}>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改进度趋势
|
||||
</div>
|
||||
<div ref={TrendChart} style={{width:'100%',height:'136.86px'}} key={1}>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const Workflow=()=>{
|
||||
return(
|
||||
<div style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'10px'}}>
|
||||
<div style={{fontSize: '16px', fontWeight: '600'}}>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改流程
|
||||
</div>
|
||||
<div style={{display:'flex',justifyContent:'space-around'}}>
|
||||
{items.map((item,index)=>{
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className={'box'}>
|
||||
<Qiu num={index+1}></Qiu>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '136px',
|
||||
height: '111px',
|
||||
backgroundImage: `url(${item[index]})`
|
||||
}}>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HiddenDangerRighted = () => {
|
||||
return (
|
||||
<>
|
||||
<header style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
{dataList.map((item, index) => {
|
||||
return <Col span={6}><MyCard {...item}></MyCard></Col>
|
||||
})}
|
||||
</Row>
|
||||
</header>
|
||||
<section style={{overflow: 'hidden',marginBottom:'10px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={8}>
|
||||
<PieChart title={'隐患整改类型'}></PieChart>
|
||||
</Col>
|
||||
<Col span={7}>
|
||||
<TrendChart></TrendChart>
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<Workflow></Workflow>
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
<footer>
|
||||
<div style={{width: '100%', backgroundColor: '#fff', padding: '15px'}}>
|
||||
<Space direction='vertical' size={"middle"} style={{width: '100%'}}>
|
||||
<Row>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
|
||||
<span style={{fontSize: '16px', fontWeight: '600'}}>隐患整改列表</span>
|
||||
</Row>
|
||||
<Row style={{display: 'flex', justifyContent: 'space-between'}}>
|
||||
<div>
|
||||
<Search placeholder="搜素检查项" style={{width: 300}}/>
|
||||
</div>
|
||||
<div>
|
||||
<Space>
|
||||
<Select1></Select1>
|
||||
<Select2></Select2>
|
||||
<Import></Import>
|
||||
<Export></Export>
|
||||
</Space>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<MyTable dataSource={dataSource} columns={columns}></MyTable>
|
||||
</Row>
|
||||
</Space>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenDangerRighted;
|
||||
@ -0,0 +1,13 @@
|
||||
.qiu{
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
border-radius: 50%;
|
||||
background-color:blue;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
}
|
||||
.box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
Loading…
Reference in New Issue