Compare commits
No commits in common. 'daf7b79cf8dd5378093de073b7f2389b69a1eccf' and 'eaa90302af1aa4cea498d12b5403891bbef60172' have entirely different histories.
daf7b79cf8
...
eaa90302af
@ -1,30 +0,0 @@
|
|||||||
import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
|
||||||
import {Col, Row, Tabs} from "antd";
|
|
||||||
import HiddenDangerInspection from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
|
|
||||||
import './HiddenTrouble.less'
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
label: '隐患检查',
|
|
||||||
children: <HiddenDangerInspection/>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
label: '隐患整改',
|
|
||||||
children: 'Content of Tab Pane 2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
label: '隐患统计',
|
|
||||||
children: 'Content of Tab Pane 3',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const HiddenTrouble = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Tabs className={'custom-tabs'} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default HiddenTrouble
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
/* 移除下滑线 */
|
|
||||||
.custom-tabs .ant-tabs-ink-bar {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 未选中状态 */
|
|
||||||
.custom-tabs .ant-tabs-tab {
|
|
||||||
background: #f0f0f0 !important;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 6px !important;
|
|
||||||
margin-right: 8px !important;
|
|
||||||
padding: 8px 16px !important;
|
|
||||||
transition: all 0.3s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选中状态 - 背景变为蓝色 */
|
|
||||||
.custom-tabs .ant-tabs-tab-active {
|
|
||||||
background: #2E4CD4 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选中状态 - 文字变为白色 */
|
|
||||||
.custom-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
|
|
||||||
color: white !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 移除底部边框 */
|
|
||||||
.custom-tabs .ant-tabs-nav::before {
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 悬停效果 */
|
|
||||||
.custom-tabs .ant-tabs-tab:hover {
|
|
||||||
background: #e6e6e6 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tabs .ant-tabs-tab-active:hover {
|
|
||||||
background: #40a9ff !important;
|
|
||||||
}
|
|
||||||
@ -1,185 +0,0 @@
|
|||||||
import Icon from "antd/es/icon";
|
|
||||||
import {Col, Row} from "antd";
|
|
||||||
import {Descriptions} from "antd";
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import {useEffect, useRef} from "react";
|
|
||||||
|
|
||||||
const HourglassSvg=()=>{
|
|
||||||
return (
|
|
||||||
<svg width="21px" height="33px" fill="currentColor" viewBox="0 0 1024 1024">
|
|
||||||
<title>hourglass icon</title>
|
|
||||||
<path
|
|
||||||
d="M768 832h-512c-17.6 0-32-14.4-32-32s14.4-32 32-32h64v-192c0-52.8 33.6-99.2 84-116.8-50.4-17.6-84-64-84-116.8v-192h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h512c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64v192c0 52.8-33.6 99.2-84 116.8 50.4 17.6 84 64 84 116.8v192h64c17.6 0 32 14.4 32 32s-14.4 32-32 32zM320 192v192c0 70.4 57.6 128 128 128s128-57.6 128-128v-192h-256zM448 768c-70.4 0-128-57.6-128-128v-192h256v192c0 70.4-57.6 128-128 128z"/>
|
|
||||||
</svg>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const HourglassIcon=(props)=>{
|
|
||||||
return(
|
|
||||||
<Icon component={HourglassSvg} {...props}></Icon>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const MyCard = (props) => {
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
// width: '100%',
|
|
||||||
// height: '134px',
|
|
||||||
borderRadius: '5px',
|
|
||||||
backgroundColor: 'white',
|
|
||||||
padding: '20px 20px',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
display:'flex',
|
|
||||||
justifyContent:'space-between'
|
|
||||||
}}>
|
|
||||||
<div>
|
|
||||||
<div>{props.title}</div>
|
|
||||||
<div style={{fontWeight: '600', fontSize: '18px', }}>{props.num}</div>
|
|
||||||
{props.flag === 1 && <div style={{color: '#44BB5F', fontSize: '14px'}}>
|
|
||||||
{props.grow === 1 ? <>⬆</> : <>⬇</>} {props.data}% 较上周
|
|
||||||
</div>}
|
|
||||||
{props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
|
|
||||||
{props.grow===1 ? <>⬆</>:<>⬇</>} {props.data}% 较上周
|
|
||||||
</div>}
|
|
||||||
{props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
|
|
||||||
{props.grow===1 ? <>⬆</>:<>⬇</>} {props.data}% 较上周
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
<div style={{color:props.color,height:'53px',width:'53px',backgroundColor:props.backgroundColor,borderRadius:'10px',display:'flex',justifyContent:'center',alignItems: 'center'}}>
|
|
||||||
<HourglassSvg ></HourglassSvg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
children: '设备安全',
|
|
||||||
color:'#868BF9',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
children: '电气安全',
|
|
||||||
color:'#F29629',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
children: '消防安全',
|
|
||||||
color:'#FFD85A',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
children: '工艺安全',
|
|
||||||
color:'#5ED6BE',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
children: '储罐专业',
|
|
||||||
color:'#00AAFF',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '6',
|
|
||||||
children: '其他',
|
|
||||||
color:'#5FDCF7',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
export const PieChart=()=>{
|
|
||||||
const chartRef=useRef(null)
|
|
||||||
const data=[
|
|
||||||
{ value: 5, name: '设备安全' ,itemStyle:{color:'#868BF9'}},
|
|
||||||
{ value: 5, name: '电气安全',itemStyle:{color:'#F29629'} },
|
|
||||||
{ value: 10, name: '消防安全' ,itemStyle:{color:'#FFD85A'}},
|
|
||||||
{ value: 20, name: '工艺安全',itemStyle:{color:'#5ED6BE'} },
|
|
||||||
{ value: 30, name: '储罐专业',itemStyle:{color:'#00AAFF'} },
|
|
||||||
{ value: 30, name:'其他',itemStyle:{color:'#5FDCF7'}}
|
|
||||||
]
|
|
||||||
useEffect(() => {
|
|
||||||
const chart=echarts.init(chartRef.current)
|
|
||||||
const option = {
|
|
||||||
legend: {
|
|
||||||
show:false,
|
|
||||||
orient: 'vertical',
|
|
||||||
x: 'left',
|
|
||||||
data: ['设备安全', '电气安全', '消防安全', '工艺安全', '储罐专业','其他']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['50%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
formatter: '{d}%',
|
|
||||||
position: 'outsider',
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position:'center',
|
|
||||||
fontSize: '15',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
formatter: function(params) {
|
|
||||||
return `${params.name}\n${params.percent}%`;
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data:data,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
chart.setOption(option)
|
|
||||||
// 响应式调整
|
|
||||||
const handleResize = () => {
|
|
||||||
chart.resize();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
|
||||||
|
|
||||||
// 清理函数
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize);
|
|
||||||
chart.dispose();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return(
|
|
||||||
<div style={{backgroundColor:'#fff',borderRadius:'5px',padding:'15px',boxSizing:'border-box'}}>
|
|
||||||
<Row>
|
|
||||||
<Col span={9}>
|
|
||||||
<Descriptions
|
|
||||||
title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> 检查领域分布</>}
|
|
||||||
column={2}
|
|
||||||
>
|
|
||||||
{items.map((item)=>{
|
|
||||||
return(
|
|
||||||
<Descriptions.Item>
|
|
||||||
<div style={{display:'flex',alignItems:'center',fontSize:'12px'}}>
|
|
||||||
<span style={{borderBottom:'4px solid',width:'10px',marginRight:'5px',borderBottomColor:item.color }}></span>
|
|
||||||
{item.children}
|
|
||||||
</div>
|
|
||||||
</Descriptions.Item>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
|
|
||||||
|
|
||||||
</Descriptions>
|
|
||||||
|
|
||||||
</Col>
|
|
||||||
<Col span={15}>
|
|
||||||
<div ref={chartRef}
|
|
||||||
style={{width:'100%',height:'100%'}}
|
|
||||||
>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default MyCard;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import {Col, Row} from "antd";
|
|
||||||
import './hiddenDangerInspection.less'
|
|
||||||
import MyCard, {PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
|
|
||||||
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:'169',
|
|
||||||
data:'2',
|
|
||||||
flag:3,
|
|
||||||
grow:0,
|
|
||||||
backgroundColor:'#FFE6E8',
|
|
||||||
color:'#FF3E48',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
const HiddenDangerInspection=()=>{
|
|
||||||
return(
|
|
||||||
< >
|
|
||||||
<header style={{overflow: 'hidden',marginBottom:'10px'}}>
|
|
||||||
<Row gutter={10}>
|
|
||||||
{dataList.map((item) => {
|
|
||||||
return <Col span={6}><MyCard {...item}> </MyCard></Col>
|
|
||||||
})}
|
|
||||||
</Row>
|
|
||||||
</header>
|
|
||||||
<section style={{overflow: 'hidden',}}>
|
|
||||||
<Row >
|
|
||||||
<Col span={8}>
|
|
||||||
<PieChart></PieChart>
|
|
||||||
</Col>
|
|
||||||
<Col span={14}></Col>
|
|
||||||
</Row>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default HiddenDangerInspection
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue