隐患排查结构

config/routes.js

@@ -61,6 +61,12 @@ export default [
 					    name: 'workreport',
 					    component: './hrefficiency_workreport/WorkReport',
 					},
+                    // 隐患排查
+                    {
+                        path:'/topnavbar00/hrefficiency/hiddentrouble',
+                        name: 'hiddentrouble',
+                        component: './hrefficiency_hiddentrouble/HiddenTrouble',
+                    }
                 ],
             },
         ],

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.js

@@ -0,0 +1,30 @@
+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

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.less

@@ -0,0 +1,39 @@
+/* 移除下滑线 */
+.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;
+}

src/pages/hrefficiency_hiddentrouble/component/MyCard.js

@@ -0,0 +1,185 @@
+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 ? <>⬆</> : <>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </div>}
+                {props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
+                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
+                </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;

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

@@ -0,0 +1,67 @@
+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

src/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection.less

@@ -0,0 +1,3 @@
+
+
+

src/pages/nav_system_content/SystemContentList.less

@@ -105,10 +105,10 @@
 
 	.rightContentMain {
 		width: 100%;
-		background-color: #ffffff;
+		//background-color: #ffffff;
 		// border-radius: 6px;
 		overflow-y: auto;
 		// height: 100%;
 		overflow: auto;
 	}
-}
+}

src/pages/topnavbar/TopNavBar.js

@@ -38,6 +38,11 @@ const menuItem = [
         key: '/topnavbar00/hrefficiency/allstaffuph',
         // icon: <SettingOutlined />,
       },
+      {
+        label: '隐患排查',
+        key: '/topnavbar00/hrefficiency/hiddentrouble',
+        // icon: <SettingOutlined />,
+      },
     ]
   },
 ]

src/pages/topnavbar/TopNavBar.less

@@ -53,4 +53,4 @@
     height: calc(100% - 46px);
     overflow-y: hidden;
   }
-}
+}