diff --git a/src/pages/business_basic/module/RiskAssessment.js b/src/pages/business_basic/module/RiskAssessment.js
index 5348b52..34b80d6 100644
--- a/src/pages/business_basic/module/RiskAssessment.js
+++ b/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 = () => {
*/}
+
+
+ {/* 设备故障类型饼图 */}
+
+
+
+
diff --git a/src/pages/business_basic/module/RiskAssessment.less b/src/pages/business_basic/module/RiskAssessment.less
index 539b686..71f0328 100644
--- a/src/pages/business_basic/module/RiskAssessment.less
+++ b/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%;