|
|
|
|
@ -1,76 +1,489 @@
|
|
|
|
|
import {Col, List, Row} from "antd";
|
|
|
|
|
import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
|
|
|
|
import {Col, List, Pagination, Row, Table, Layout, Select, Typography, Tag} from "antd";
|
|
|
|
|
import MyCard, {Tips} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
|
|
|
|
import {useEffect, useRef, useState} from "react";
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
import {DownOutlined} from "@ant-design/icons";
|
|
|
|
|
import G6 from '@antv/g6';
|
|
|
|
|
import cloud from '../../../../assets/img/cloud.png'
|
|
|
|
|
const {Title}=Typography
|
|
|
|
|
const {Content}=Layout
|
|
|
|
|
const GetBarChart=()=>{
|
|
|
|
|
const chartRef=useRef(null)
|
|
|
|
|
const chartInstance = useRef(null);
|
|
|
|
|
useEffect(()=>{
|
|
|
|
|
chartInstance.current=echarts.init(chartRef.current)
|
|
|
|
|
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
|
|
const data={
|
|
|
|
|
'设备故障类':[100, 150, 300, 400, 350, 250, 200, 220, 200, 150, 80, 50],
|
|
|
|
|
'安全防护类': [200, 250, 300, 250, 200, 150, 200, 250, 300, 350, 250, 180],
|
|
|
|
|
'电气隐患类': [450, 400, 300, 200, 350, 550, 450, 350, 400, 500, 400, 350],
|
|
|
|
|
'操作规范类': [300, 200, 150, 200, 300, 400, 450, 480, 450, 400, 300, 200]
|
|
|
|
|
};
|
|
|
|
|
const option={
|
|
|
|
|
//图例
|
|
|
|
|
legend:{
|
|
|
|
|
data:['设备故障类', '安全防护类', '电气隐患类', '操作规范类'],
|
|
|
|
|
top:0
|
|
|
|
|
},
|
|
|
|
|
grid:{
|
|
|
|
|
left:'3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '0%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: months
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '数量(个)',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 600,
|
|
|
|
|
interval: 100
|
|
|
|
|
},
|
|
|
|
|
series:[
|
|
|
|
|
{
|
|
|
|
|
type:'line',
|
|
|
|
|
name:'设备故障类',
|
|
|
|
|
data:data['设备故障类'],
|
|
|
|
|
symbol:'circle',
|
|
|
|
|
smooth:true,
|
|
|
|
|
symbolSize:0,
|
|
|
|
|
lineStyle:{
|
|
|
|
|
width:2,
|
|
|
|
|
color:'#f56c6c',
|
|
|
|
|
|
|
|
|
|
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天'},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
itemStyle:{
|
|
|
|
|
color:'#f56c6c',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
areaStyle:{
|
|
|
|
|
color:new echarts.graphic.LinearGradient(0,0,0,1,[
|
|
|
|
|
{ offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
|
|
|
|
|
{ offset: 1, color: 'rgba(245, 108, 108, 0)' }
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '安全防护类',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: data['安全防护类'],
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
smooth:true,
|
|
|
|
|
symbolSize: 0,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#e6a23c' // 橙色系
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#e6a23c'
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
|
|
|
|
|
{ offset: 1, color: 'rgba(230, 162, 60, 0)' }
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '电气隐患类',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: data['电气隐患类'],
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
smooth:true,
|
|
|
|
|
symbolSize: 0,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#409eff' // 蓝色系
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#409eff'
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
|
|
|
|
{ offset: 1, color: 'rgba(64, 158, 255, 0)' }
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '操作规范类',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: data['操作规范类'],
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
smooth:true,
|
|
|
|
|
symbolSize: 0,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#67c23a' // 绿色系
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#67c23a'
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
|
|
|
|
|
{ offset: 1, color: 'rgba(103, 194, 58, 0)' }
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
chartInstance.current.setOption(option);
|
|
|
|
|
const handleResize=()=>{
|
|
|
|
|
chartInstance.current.resize()
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener('resize',handleResize)
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
window.removeEventListener('resize', handleResize);
|
|
|
|
|
|
|
|
|
|
chartInstance.current.dispose();
|
|
|
|
|
chartInstance.current = null;
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
},[])
|
|
|
|
|
return <div>
|
|
|
|
|
<div ref={chartRef} style={{width:'100%',height:'270px'}}></div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
const DepartmentRateChart=()=>{
|
|
|
|
|
const chartRef=useRef(null)
|
|
|
|
|
const chartInstance=useRef(null)
|
|
|
|
|
useEffect(()=>{
|
|
|
|
|
chartInstance.current=echarts.init(chartRef.current)
|
|
|
|
|
const departmentsData = {
|
|
|
|
|
'departments': ['生产部', '设备部', '安全部', '后勤部', '质检部'],
|
|
|
|
|
'整改率': [55, 45, 65, 42, 58], // 蓝色柱子数据
|
|
|
|
|
'按期完成率': [35, 25, 45, 55, 52] // 绿色柱子数据
|
|
|
|
|
};
|
|
|
|
|
const option={
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['整改率', '按期完成率'],
|
|
|
|
|
top: 0,
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true,
|
|
|
|
|
top: 40 // 给图例留出空间
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: departmentsData.departments,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0 // 确保所有标签都显示
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '百分比(%)',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 70,
|
|
|
|
|
interval: 10,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value}%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '整改率',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: departmentsData['整改率'],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#409eff' // 蓝色
|
|
|
|
|
},
|
|
|
|
|
barWidth: 30 // 柱子宽度
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '按期完成率',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: departmentsData['按期完成率'],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#67c23a' // 绿色
|
|
|
|
|
},
|
|
|
|
|
barWidth: 30 // 柱子宽度
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
chartInstance.current.setOption(option);
|
|
|
|
|
const handleResize = () => {
|
|
|
|
|
chartInstance.current?.resize();
|
|
|
|
|
};
|
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
|
return () => {
|
|
|
|
|
window.removeEventListener('resize', handleResize);
|
|
|
|
|
if (chartInstance.current) {
|
|
|
|
|
chartInstance.current.dispose();
|
|
|
|
|
chartInstance.current = null;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},[])
|
|
|
|
|
return<div style={{width:'100%',height:'100%',backgroundColor:'#fff',padding:'10px',borderRadius:'4px'}}>
|
|
|
|
|
<Tips title='各部门隐患整改情况对比'></Tips>
|
|
|
|
|
<div ref={chartRef} style={{width:'100%',height:'270px'}}></div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
const TrendAnalysis=()=>{
|
|
|
|
|
const data=[
|
|
|
|
|
{name:'Q3设备故障类隐患',tip:'占比最高',num:'45%',background: '#FFF1F2',border: '1px solid #FFD2D1',color:'#FF2526'},
|
|
|
|
|
{name:'Q2安全防护隐患',tip:'显著下降',num:'32%',background: '#FFF7F0',border: '1px solid #FFD7BB',color:'#FF8800'},
|
|
|
|
|
{name:'Q4电器隐患',tip:'持续改善',num:'28%',background: '#FFFAEA',border: '1px solid #F8EFD0',color: '#FFC403'},
|
|
|
|
|
{name:'全年平均整改周期',tip:'同比缩短',num:'7天',background: '#EBFCEE',border:' 1px solid #C3F6CC',color:'#44BB5F'},
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
return(
|
|
|
|
|
<div style={{backgroundColor:'#fff',padding:'15px'}}>
|
|
|
|
|
<Row gutter={10}>
|
|
|
|
|
<Col span={18}>1</Col>
|
|
|
|
|
<Col span={6}>
|
|
|
|
|
<Col span={17}>
|
|
|
|
|
<Tips title='隐患数据趋势分析'></Tips>
|
|
|
|
|
<GetBarChart style={{width:'100%',height:'600px'}}></GetBarChart>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={7}>
|
|
|
|
|
{data.map((item,index)=>{
|
|
|
|
|
return(
|
|
|
|
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
|
|
|
|
<div style={{display:'flex', justifyContent:'space-between',backgroundColor:item.background,margin:'10px',padding:'10px',borderRadius:'4px',border:item.border}}>
|
|
|
|
|
<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'}}>
|
|
|
|
|
<div style={{display:'flex',alignItems:'center',color:item.color}}>
|
|
|
|
|
{item.num}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
const DepartmentRankingTable=()=>{
|
|
|
|
|
const [sortType, setSortType] = useState('整改率'); // 排序类型
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(3); // 当前页码
|
|
|
|
|
const totalItems = 48; // 总条数
|
|
|
|
|
const pageSize = 4; // 每页条数
|
|
|
|
|
|
|
|
|
|
const mockData = [
|
|
|
|
|
{
|
|
|
|
|
'排名': 1,
|
|
|
|
|
'部门': '安全部',
|
|
|
|
|
'隐患总数': 135,
|
|
|
|
|
'已整改': 156,
|
|
|
|
|
'整改率': '97.6%',
|
|
|
|
|
'按期完成率': '87%',
|
|
|
|
|
'状态': '优秀'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'排名': 2,
|
|
|
|
|
'部门': '设备部',
|
|
|
|
|
'隐患总数': 135,
|
|
|
|
|
'已整改': 156,
|
|
|
|
|
'整改率': '97.6%',
|
|
|
|
|
'按期完成率': '87%',
|
|
|
|
|
'状态': '良好'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'排名': 3,
|
|
|
|
|
'部门': '生产部',
|
|
|
|
|
'隐患总数': 135,
|
|
|
|
|
'已整改': 156,
|
|
|
|
|
'整改率': '97.6%',
|
|
|
|
|
'按期完成率': '87%',
|
|
|
|
|
'状态': '一般'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
'排名': 4,
|
|
|
|
|
'部门': '行政部',
|
|
|
|
|
'隐患总数': 135,
|
|
|
|
|
'已整改': 156,
|
|
|
|
|
'整改率': '97.6%',
|
|
|
|
|
'按期完成率': '87%',
|
|
|
|
|
'状态': '预警'
|
|
|
|
|
},
|
|
|
|
|
// 可以继续添加更多数据...
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 状态标签颜色映射
|
|
|
|
|
const statusColorMap = {
|
|
|
|
|
'优秀': 'green',
|
|
|
|
|
'良好': 'orange',
|
|
|
|
|
'一般': 'gold',
|
|
|
|
|
'预警': 'red'
|
|
|
|
|
};
|
|
|
|
|
// 表格列配置
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: '排名',
|
|
|
|
|
dataIndex: '排名',
|
|
|
|
|
key: '排名',
|
|
|
|
|
width: 80,
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (text) => (
|
|
|
|
|
<div style={{ color: '#1890ff', fontWeight: 'bold',backgroundColor:'#E9EEFF' ,borderRadius:'50%',display:'inline-block',width:'40px',height:'40px',textAlign:'center',lineHeight:'40px'}}>{text}</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '部门',
|
|
|
|
|
dataIndex: '部门',
|
|
|
|
|
key: '部门',
|
|
|
|
|
width: 120,
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '隐患总数',
|
|
|
|
|
dataIndex: '隐患总数',
|
|
|
|
|
key: '隐患总数',
|
|
|
|
|
width: 100,
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '已整改',
|
|
|
|
|
dataIndex: '已整改',
|
|
|
|
|
key: '已整改',
|
|
|
|
|
width: 100,
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '整改率',
|
|
|
|
|
dataIndex: '整改率',
|
|
|
|
|
key: '整改率',
|
|
|
|
|
width: 100,
|
|
|
|
|
align:'center',
|
|
|
|
|
render:(text)=>{
|
|
|
|
|
return <span style={{color:'#2E4CD4'}}>{text}</span>
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '按期完成率',
|
|
|
|
|
dataIndex: '按期完成率',
|
|
|
|
|
key: '按期完成率',
|
|
|
|
|
width: 120,
|
|
|
|
|
align:'center',
|
|
|
|
|
render:(text)=>{
|
|
|
|
|
return <span style={{color:'#2E4CD4'}}>{text}</span>
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: '状态',
|
|
|
|
|
key: '状态',
|
|
|
|
|
width: 100,
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (status) => (
|
|
|
|
|
<Tag color={statusColorMap[status]}>
|
|
|
|
|
{status}
|
|
|
|
|
</Tag>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
// 排序变更处理
|
|
|
|
|
const handleSortChange = (value) => {
|
|
|
|
|
setSortType(value);
|
|
|
|
|
// 实际项目中这里可以添加排序逻辑
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 分页变更处理
|
|
|
|
|
const handlePageChange = (page) => {
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
// 实际项目中这里可以添加分页数据请求逻辑
|
|
|
|
|
};
|
|
|
|
|
return <div style={{width:'100%',height:'100%'}}>
|
|
|
|
|
<Content style={{ padding: '10px', backgroundColor: '#fff' }}>
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
|
|
|
<Tips title='部门隐患整改效能排名'></Tips>
|
|
|
|
|
<Select
|
|
|
|
|
defaultValue="整改率"
|
|
|
|
|
style={{ width: 180 }}
|
|
|
|
|
onChange={handleSortChange}
|
|
|
|
|
suffixIcon={<DownOutlined />}
|
|
|
|
|
>
|
|
|
|
|
<Option value="整改率">按照整改率排序</Option>
|
|
|
|
|
<Option value="按期完成率">按照按期完成率排序</Option>
|
|
|
|
|
<Option value="隐患总数">按照隐患总数排序</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Table
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={mockData}
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
// bordered
|
|
|
|
|
rowKey="排名"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 16 }}>
|
|
|
|
|
<span style={{ marginRight: 16 }}>共 {totalItems} 条</span>
|
|
|
|
|
<Pagination
|
|
|
|
|
current={currentPage}
|
|
|
|
|
total={totalItems}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
onChange={handlePageChange}
|
|
|
|
|
showSizeChanger={false} // 不显示每页条数选择器
|
|
|
|
|
showQuickJumper
|
|
|
|
|
showTotal={(total) => `共 ${total} 条`}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Content>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
const HiddenDangerCloud=()=>{
|
|
|
|
|
return <div style={{width:'100%',height:'100%',backgroundColor:'#fff',padding:'10px'}}>
|
|
|
|
|
<Tips title='高频隐患类型词云图'></Tips>
|
|
|
|
|
<div style={{width:'100%',marginTop:'60px'}}>
|
|
|
|
|
<div style={{backgroundImage:`url(${cloud})`,width:'522px',height:'361px',margin:'auto'}}>
|
|
|
|
|
|
|
|
|
|
const HiddenDangerCount=()=>{
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
const HiddenDangerCount = () => {
|
|
|
|
|
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',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<header style={{overflow: 'hidden', marginBottom: '10px'}}>
|
|
|
|
|
@ -85,13 +498,15 @@ const HiddenDangerCount=()=>{
|
|
|
|
|
<Col span={16}>
|
|
|
|
|
<TrendAnalysis></TrendAnalysis>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={8}>1</Col>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<DepartmentRateChart></DepartmentRateChart>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</section>
|
|
|
|
|
<footer style={{overflow: 'hidden'}}>
|
|
|
|
|
<Row gutter={10}>
|
|
|
|
|
<Col span={15}>2</Col>
|
|
|
|
|
<Col span={9}>2</Col>
|
|
|
|
|
<Col span={15}><DepartmentRankingTable></DepartmentRankingTable></Col>
|
|
|
|
|
<Col span={9}><HiddenDangerCloud></HiddenDangerCloud></Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</footer>
|
|
|
|
|
</>
|
|
|
|
|
|
zjlnb666
2 weeks ago
