更新提交

src/pages/business_basic/module/RiskAssessment.js

@@ -22,6 +22,7 @@ import eqicon4 from '@/assets/business_basic/eqicon4.png';
 const RiskAssessment = () => { 
     const chartRef = useRef(null);
     const pieChartRef = useRef(null);
+    const faultPieChartRef = useRef(null);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [selectedRows, setSelectedRows] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -100,6 +101,74 @@ const RiskAssessment = () => {
         }
     }, []);
 
+    // 故障类型饼图初始化
+    useEffect(() => {
+        if (faultPieChartRef.current) {
+            const faultPieChart = echarts.init(faultPieChartRef.current);
+            
+            const faultPieOption = {
+                color: ['#FF3E48', '#FF8800', '#FFC403'],
+                legend: {
+                    orient: 'vertical',
+                    right: '10%',
+                    top: 'center',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#333'
+                    }
+                },
+                series: [{
+                    name: '设备故障类型',
+                    type: 'pie',
+                    radius: '70%',
+                    center: ['35%', '50%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        position: 'outside',
+                        formatter: '{b}: {c}',
+                        fontSize: 12
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: '14',
+                            fontWeight: 'bold'
+                        }
+                    },
+                    labelLine: {
+                        show: true
+                    },
+                    data: [
+                        { value: 120, name: '紧急' },
+                        { value: 80, name: '重要' },
+                        { value: 60, name: '一般' }
+                    ]
+                }]
+            };
+
+            faultPieChart.setOption(faultPieOption);
+
+            // 响应式调整
+            const handleFaultPieResize = () => {
+                if (faultPieChart && !faultPieChart.isDisposed()) {
+                    faultPieChart.resize();
+                }
+            };
+
+            window.addEventListener('resize', handleFaultPieResize);
+
+            return () => {
+                window.removeEventListener('resize', handleFaultPieResize);
+                if (faultPieChart && !faultPieChart.isDisposed()) {
+                    faultPieChart.dispose();
+                }
+            };
+        }
+    }, []);
+
     useEffect(() => {
         if (chartRef.current) {
             const chart = echarts.init(chartRef.current);
@@ -610,7 +679,29 @@ const RiskAssessment = () => {
                         </div> */}
                     </div>
                     
+                    <div className={styles.middleBlock12}>
+                        <div className={styles.block1Header}>
+                            <div className={styles.block1Title}>
+                                <div className={styles.titleIcon}></div>
+                                设备故障类型分布
+                            </div>
+                            <Select
+                                className={styles.customSelect}
+                                style={{ width: 120  }}
+                                defaultValue="全部区域"
+                                // defaultValue="全部区域"
+                                options={[
+                                    { value: '全部区域', label: '全部区域' },
+                                    { value: '部分区域', label: '部分区域' },
+                                ]}
+                            />
+                        </div>
 
+                        {/* 设备故障类型饼图 */}
+                        <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
+                        </div>
+                
+                    </div>
                     
                     <div className={styles.middleBlock2}>
                         <div className={styles.middleBlock2Title}>

src/pages/business_basic/module/RiskAssessment.less

@@ -105,7 +105,7 @@
 
     // 第二个div - 高度30%
     .RcontainerMiddle {
-        height: 30%;
+        height: 35%;
         border-radius: 4px;
         display: flex;
         flex-direction: column;
@@ -120,7 +120,8 @@
 
 
             .middleBlock1 {
-                flex: 1;
+                // flex: 1;
+                width: 28%;
                 height: 100%;
                 background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
 
@@ -214,6 +215,98 @@
                 // }
             }
 
+            .middleBlock12 {
+                flex: 1;
+                height: 100%;
+                background-color: #fff;
+                display: flex;
+                flex-direction: column;
+                font-family: PingFang SC;
+                font-size: 14px;
+                color: #333333;
+                padding: 5px 10px 5px 10px;
+                position: relative;
+
+                .block1Header {
+                    position: absolute;
+                    top: 5px;
+                    left: 10px;
+                    right: 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    z-index: 10;
+
+                    .block1Title {
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-weight: 500;
+                        font-size: 14px;
+                        color: #333333;
+
+                        .titleIcon {
+                            width: 3px;
+                            height: 14px;
+                            background-color: #2E4CD4;
+                        }
+                    }
+
+                    .block1Segmented {
+                        padding: 0;
+                        margin: 0;
+                        border: 1px solid #E3E3E3;
+                        border-radius: 4px;
+                        height: 28px;
+
+                        :global(.ant-segmented) {
+                            padding: 0;
+                            margin: 0;
+                            height: 28px;
+                        }
+
+                        :global(.ant-segmented-item) {
+                            font-size: 12px;
+                            padding: 2px 8px;
+                            height: 26px;
+                            line-height: 26px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
+
+                        :global(.ant-segmented-item-selected) {
+                            background-color: #1890ff;
+                            color: #fff;
+                        }
+                    }
+
+                    .customSelect {
+                        :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
+                            height: 26px !important;
+                            display: flex !important;
+                            align-items: center !important;
+                        }
+
+                        :global(.ant-select-selection-item) {
+                            line-height: 24px !important;
+                            height: 24px !important;
+                            display: flex !important;
+                            align-items: center !important;
+                        }
+                    }
+                }
+
+                .deviceStatusChart {
+                    position: absolute;
+                    top: 35px;
+                    left: 10px;
+                    right: 10px;
+                    bottom: 10px;
+                    z-index: 10;
+                }
+            }
+
             .middleBlock2 {
                 flex: 1;
                 height: 100%;