隐患提交

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.js

@@ -1,29 +1,31 @@
 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'
+import styles from './HiddenTrouble.less'
+import HiddenDangerRighted from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted";
+import HiddenDangerCount from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount";
 
 const items = [
     {
         key: '1',
         label: '隐患检查',
-        children: <HiddenDangerInspection/>,
+        children: <HiddenDangerInspection key={1}/>,
     },
     {
         key: '2',
         label: '隐患整改',
-        children: 'Content of Tab Pane 2',
+        children: <HiddenDangerRighted key={2}/>
     },
     {
         key: '3',
         label: '隐患统计',
-        children: 'Content of Tab Pane 3',
+        children: <HiddenDangerCount key={3}/>,
     },
 ];
 const HiddenTrouble = () => {
     return (
         <>
-            <Tabs className={'custom-tabs'} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10}   />
+            <Tabs className={styles['custom-tabs']} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10}   />
         </>
     )
 }

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.less

@@ -4,22 +4,26 @@
 }
 
 /* 未选中状态 */
-.custom-tabs .ant-tabs-tab {
+.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 {
+.custom-tabs  {
+  :global(.ant-tabs-tab-active) {
     background: #2E4CD4 !important;
+  }
 }
 
 /* 选中状态 - 文字变为白色 */
-.custom-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
+.custom-tabs :global(.ant-tabs-tab-active .ant-tabs-tab-btn) {
   color: white !important;
   font-weight: 500 !important;
 }

src/pages/hrefficiency_hiddentrouble/component/MyCard.js

@@ -1,5 +1,5 @@
 import Icon from "antd/es/icon";
-import {Col,  Row} from "antd";
+import {Col, Pagination, Row, Table} from "antd";
 import {Descriptions} from "antd";
 import * as echarts from 'echarts';
 import {useEffect, useRef} from "react";
@@ -51,6 +51,8 @@ const MyCard = (props) => {
     )
 }
 
+
+// 环形图
 const items = [
     {
         key: '1',
@@ -83,9 +85,7 @@ const items = [
         color:'#5FDCF7',
     },
 ];
-
+export const PieChart=(props)=>{
-
-export const PieChart=()=>{
     const chartRef=useRef(null)
     const data=[
         { value: 5, name: '设备安全' ,itemStyle:{color:'#868BF9'}},
@@ -104,6 +104,12 @@ export const PieChart=()=>{
                 x: 'left',
                 data: ['设备安全', '电气安全', '消防安全', '工艺安全', '储罐专业','其他']
             },
+            grid:{
+                top: 20,
+                bottom: 20,
+                left: 20,
+                right: 20,
+            },
             series: [
                 {
                     type: 'pie',
@@ -153,7 +159,7 @@ export const PieChart=()=>{
             <Row>
                 <Col span={9}>
                     <Descriptions
-                        title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> 检查领域分布</>}
+                        title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> {props.title}</>}
                         column={2}
                     >
                         {items.map((item)=>{
@@ -173,7 +179,8 @@ export const PieChart=()=>{
                 </Col>
                 <Col span={15}>
                     <div ref={chartRef}
-                        style={{width:'100%',height:'100%'}}
+                        style={{width:'100%',height:'100%',}}
+                         key={2}
                     >
 
                     </div>
@@ -182,4 +189,137 @@ export const PieChart=()=>{
         </div>
     )
 }
+
+// 柱状图
+
+export const BarChart=()=>{
+    const chartRef=useRef(null)
+    const data=[]
+    useEffect(() => {
+        const chart =echarts.init(chartRef.current)
+        const option = {
+            grid:{
+                top:20,
+                bottom:20,
+                right:30,
+                left:30,
+            },
+            xAxis:{
+                type: 'category',
+                data:['每日','每周','每月','每季度','每半年','每年','季节性','专项'],
+                axisLine:{
+                    show:true,
+                    lineStyle:{
+                        color:'#D5E2FF'
+                    }
+                },
+                axisLabel:{
+                    show:true,
+                    position:'bottom',
+                    color:'#333'
+                },
+
+            },
+            yAxis:{
+                type:'value',
+
+                axisLine:{
+                    show:true,
+                    min:0,
+                    lineStyle:{
+                        color:'#D5E2FF'
+                    }
+
+                },
+                axisLabel: {
+                    show:true,
+                    color:'#333'
+                },
+                splitLine:{
+                    show:true,
+                    lineStyle:{
+                        color:'#D5E2FF',
+                        type:'dashed'
+                    }
+                },
+                nameTextStyle:{
+                    color:'#000',
+                    fontSize:16,
+                    fontWeight:'600',
+                }
+            },
+            series:[
+                {
+                    name: '数据系列1',
+                    type: 'bar', // 柱状图
+                    data: [120, 200, 150, 80, 70,123,70,90], // 数据值
+                    barWidth: '20%', // 柱子宽度
+                    itemStyle: {
+                        color: '#007BFF', // 柱子颜色
+                        borderRadius: [4, 4, 0, 0] ,// 柱子圆角
+                    },
+                    label: {
+                        show: true,
+                        position: 'top', // 数据标签位置
+                        color: '#333'
+                    },
+                    emphasis: { // 高亮样式
+                        itemStyle: {
+                            color: '#7491db'
+                        }
+                    }
+                }
+            ]
+
+        }
+        chart.setOption(option)
+        const handleResize = () => {
+            chart.resize();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // 清理函数
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            chart.dispose();
+        };
+    })
+    return(
+        <div  style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'15px'}}>
+            <div style={{fontSize:'16px',fontWeight:'600'}}><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>检查频次分布</div>
+            <div ref={chartRef} style={{width:'100%',height:'126.84px',}}>
+
+            </div>
+        </div>
+
+    )
+}
+
+export const MyTable=(props)=>{
+    const {dataSource,columns}=props
+    return (
+        <>
+            <Table
+                dataSource={dataSource}
+                columns={columns}
+                pagination={{
+                    total:25,
+                    showSizeChanger:true,
+                    showQuickJumper:true,
+                    showTotal:() => '共 25 条',
+                    pageSizeOptions:[5,10,20,50,100],
+                    defaultPageSize:5,
+                    style:{
+                        marginTop:50
+                    }
+                }}
+                style={{width:'100%'}}
+            />
+
+        </>
+    )
+}
+
+
 export default MyCard;

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount.js

@@ -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

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection.js

@@ -1,6 +1,10 @@
-import {Col, Row} from "antd";
+import {Card, Col, Row, Input, Space, Select, Upload, Button, message, Tag} from "antd";
 import './hiddenDangerInspection.less'
-import MyCard, {PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
+import MyCard, {BarChart, MyTable, PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
+import {ExportOutlined, UploadOutlined} from "@ant-design/icons";
+import {render} from "react-dom";
+const { Search } = Input;
+
 const dataList=[
     {
         title:'隐患总数',
@@ -39,6 +43,105 @@ const dataList=[
         color:'#FF3E48',
     }
 ]
+export const Select1=()=>{
+    return(
+        <Select defaultValue="所有领域" style={{ width: 120 }}>
+            <Select.Option value="sample" >所有领域</Select.Option>
+        </Select>
+    )
+}
+export const Select2=()=>{
+    return(
+        <Select defaultValue="所有频次" style={{ width: 120 }}>
+            <Select.Option value="sample">所有频次</Select.Option>
+        </Select>
+    )
+}
+const props = {
+    name: 'file',
+    action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+    headers: {
+        authorization: 'authorization-text',
+    },
+    onChange(info) {
+        if (info.file.status !== 'uploading') {
+            console.log(info.file, info.fileList);
+        }
+        if (info.file.status === 'done') {
+            message.success(`${info.file.name} file uploaded successfully`);
+        } else if (info.file.status === 'error') {
+            message.error(`${info.file.name} file upload failed.`);
+        }
+    },
+};
+export const Import=()=>{
+  return(
+        <Upload {...props}>
+            <Button icon={<UploadOutlined />} style={{color:'#2E4CD4'}}>导入</Button>
+        </Upload>
+      )
+
+
+}
+export const Export=()=>{
+    return(
+        <Button icon={<ExportOutlined/>} style={{color:'#2E4CD4'}}>导出</Button>
+    )
+}
+export const levelList= {
+    '一般隐患':['#DAF3FF','#00AAFA'],
+    '中等隐患':['#FFF3E9','#FF8800'],
+    '极高隐患':['#FFE0E2','#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 <Button type={"link"}>详情</Button>
+    }},
+]
+
+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 HiddenDangerInspection=()=>{
@@ -51,14 +154,42 @@ const HiddenDangerInspection=()=>{
                     })}
                 </Row>
             </header>
-            <section style={{overflow: 'hidden',}}>
+            <section style={{overflow: 'hidden',marginBottom:'10px'}}>
-                <Row >
+                <Row gutter={10}>
                     <Col span={8}>
-                        <PieChart></PieChart>
+                        <PieChart title={'检查领域分布'}></PieChart>
+                    </Col>
+                    <Col span={16}>
+                        <BarChart></BarChart>
                     </Col>
-                    <Col span={14}></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>
 
 
         </>

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted.js

@@ -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;

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted.less

@@ -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;
+}