隐患排查结构

src/pages/hrefficiency_hiddentrouble/HiddenTrouble.js

@@ -1,7 +1,7 @@
 import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
 import {Col, Row, Tabs} from "antd";
-import HiddenDangerInspection
-    from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
+import HiddenDangerInspection from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
+import './HiddenTrouble.less'
 
 const items = [
     {
@@ -23,7 +23,7 @@ const items = [
 const HiddenTrouble = () => {
     return (
         <>
-            <Tabs defaultActiveKey="1" items={items}  />
+            <Tabs className={'custom-tabs'} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10}   />
         </>
     )
 }

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

@@ -1,4 +1,8 @@
 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 (
@@ -46,4 +50,136 @@ const MyCard = (props) => {
         </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

@@ -1,5 +1,6 @@
 import {Col, Row} from "antd";
-import MyCard from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
+import './hiddenDangerInspection.less'
+import MyCard, {PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
 const dataList=[
     {
         title:'隐患总数',
@@ -38,16 +39,28 @@ const dataList=[
         color:'#FF3E48',
     }
 ]
+
+
 const HiddenDangerInspection=()=>{
     return(
-        <>
-            <header style={{overflow: 'hidden'}}>
+        < >
+            <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>
+
+
         </>
     )
 }

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

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