风险问题页面

src/pages/business_envInformation_monthly/components/content_component_fxwt/CurveAnalysis.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import ReactECharts from 'echarts-for-react';
 import styles from './CurveAnalysis.less';
+import PickerButton from 'antd/es/date-picker/PickerButton';
 
 const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
 
 const trendOption = {
-    color: ['#f2637b', '#f6b64d', '#5fa2e0', '#2fc25b'],
+    color: ['rgba(255, 62, 72, 1)', 'rgba(255, 136, 0, 1)', 'rgba(255, 196, 3, 1)', 'rgba(0, 170, 250, 1)'],
     tooltip: { trigger: 'axis' },
     legend: {
         top: 10,
@@ -15,68 +16,219 @@ const trendOption = {
     xAxis: {
         type: 'category',
         data: months,
-        boundaryGap: false
+        boundaryGap: false,
+        axisLine: { show: true, lineStyle: { color: 'rgba(213, 226, 255, 1)' } },
+        axisTick: { show: false },
+        axisLabel: { color: 'rgba(102, 102, 102, 1)' }
     },
     yAxis: {
         type: 'value',
-        name: '风险值'
+        name: '风险值',
+        axisLine: { show: true, lineStyle: { color: 'rgba(213, 226, 255, 1)' } },
+        axisTick: { show: false },
+        axisLabel: { color: 'rgba(102, 102, 102, 1)' },
+        nameTextStyle: { color: 'rgba(102, 102, 102, 1)' },
+        splitLine: { lineStyle: { color: 'rgba(213, 226, 255, 1)', type: 'dashed' } }
     },
     series: [
-        { name: '重大风险', type: 'line', smooth: true, data: [8, 14, 7, 15, 6, 10, 12, 5, 8, 6, 12, 16] },
+        {
-        { name: '较大风险', type: 'line', smooth: true, data: [16, 11, 14, 18, 12, 16, 14, 12, 20, 14, 18, 20] },
+            name: '重大风险',
-        { name: '一般风险', type: 'line', smooth: true, data: [12, 13, 11, 12, 10, 12, 10, 9, 12, 11, 10, 12] },
+            type: 'line',
-        { name: '低风险', type: 'line', smooth: true, data: [10, 12, 9, 10, 8, 9, 8, 7, 9, 8, 7, 8] }
+            smooth: false,
+            lineStyle: { width: 1, color: 'rgba(255, 62, 72, 1)' },
+            symbol: 'circle',
+            symbolSize: 5,
+            itemStyle: {
+                color: '#fff',          // 点填充色，和线条区分
+                borderColor: 'rgba(255, 62, 72, 1)',    // 边框色
+                borderWidth: 1
+            },
+            data: [8, 14, 7, 15, 6, 10, 12, 5, 8, 6, 12, 16]
+        },
+        {
+            name: '较大风险',
+            type: 'line',
+            smooth: false,
+            symbol: "circle",
+            symbolSize: 5,
+            itemStyle: {
+                color: "#fff",
+                borderColor: "rgba(255, 136, 0, 1)",
+                borderWidth: 1
+            },
+            lineStyle: { width: 1, color: 'rgba(255, 136, 0, 1)' },
+            data: [16, 11, 14, 18, 12, 16, 14, 12, 20, 14, 18, 20]
+        },
+        {
+            name: '一般风险',
+            type: 'line',
+            smooth: false,
+            symbol: "circle",
+            symbolSize: 5,
+            itemStyle: {
+                color: "#fff",
+                borderColor: "rgba(255, 196, 3, 1)",
+                borderWidth: 1
+            },
+            lineStyle: { width: 1, color: 'rgba(255, 196, 3, 1)' },
+            data: [12, 13, 11, 12, 10, 12, 10, 9, 12, 11, 10, 12]
+        },
+        {
+            name: '低风险',
+            type: 'line',
+            smooth: false,
+            symbol: "circle",
+            symbolSize: 5,
+            itemStyle: {
+                color: "#fff",
+                borderColor: "rgba(0, 170, 250, 1)",
+                borderWidth: 1
+            },
+            lineStyle: { width: 1, color: "rgba(0, 170, 250, 1)" },
+            data: [10, 12, 9, 10, 8, 9, 8, 7, 9, 8, 7, 8]
+        }
     ]
 };
 
 const levelBoard = [
-    { name: '重大风险', value: 4, color: '#f2637b' },
+    { name: '低风险', value: 4, color: 'rgba(0, 170, 250, 1)' },
-    { name: '较大风险', value: 10, color: '#f6b64d' },
+    { name: '一般风险', value: 3, color: 'rgba(255, 187, 0, 1)' },
-    { name: '一般风险', value: 4, color: '#5fa2e0' },
+    { name: '较大风险', value: 2, color: 'rgba(255, 136, 0, 1)' },
-    { name: '低风险', value: 4, color: '#2fc25b' }
+    { name: '重大风险', value: 1, color: 'rgba(255, 62, 72, 1)' },
+];
+
+const legendNamesDesc = levelBoard.map(i => i.name).reverse();
+const trendSummary = [
+    { name: '重大风险', value: 4, color: 'rgba(255, 62, 72, 1)', bg: 'rgba(255, 241, 242, 1)' },
+    { name: '较大风险', value: 10, color: 'rgba(255, 136, 0, 1)', bg: 'rgba(255, 243, 233, 1)  ' },
+    { name: '一般风险', value: 4, color: 'rgba(255, 187, 0, 1)', bg: 'rgba(255, 248, 226, 1)  ' },
+    { name: '低风险', value: 4, color: 'rgba(0, 170, 250, 1)', bg: ' rgba(238, 249, 255, 1) ' }
 ];
 
 const levelOption = {
     color: levelBoard.map(i => i.color),
-    tooltip: { trigger: 'item' },
+    tooltip: { trigger: 'item', formatter: '{b}: {d}% ' },
-    legend: { bottom: 0, icon: 'circle' },
+    legend: {
+        bottom: 0,
+        icon: 'rect',
+        borderColor: "transparent",
+        itemWidth: 14,
+        itemHeight: 14,
+        data: legendNamesDesc,
+    },
     series: [
         {
             name: '风险等级分布',
             type: 'pie',
-            radius: ['35%', '60%'],
+            roseType: 'radius',
-            center: ['50%', '45%'],
+            radius: ['20%', '55%'],
-            data: levelBoard.map(i => ({ name: i.name, value: i.value })),
+            center: ['50%', '50%'],
-            label: { formatter: '{b}: {d}%' }
+            avoidLabelOverlap: true,
+            itemStyle: { borderColor: '#fff', borderWidth: 3 },
+            label: { formatter: '{b}: {d}%', color: '#666', fontSize: 12 },
+            labelLine: { length: 18, length2: 16 },
+            data: levelBoard
         }
     ]
 };
 
 const typeOption = {
-    color: ['#f2637b', '#f6b64d', '#5fa2e0', '#2fc25b'],
+    color: [
+        'rgba(255, 62, 72, 1)',   // 重大风险
+        'rgba(255, 136, 0, 1)',   // 较大风险
+        'rgba(255, 187, 0, 1)',   // 一般风险
+        'rgba(0, 170, 250, 1)'    // 低风险
+    ],
     tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
     legend: { top: 10, data: ['重大风险', '较大风险', '一般风险', '低风险'] },
     grid: { left: 50, right: 10, top: 50, bottom: 40 },
     xAxis: { type: 'category', data: ['设备故障', '操作违规', '环境泄露', '管理缺陷', '其他'] },
     yAxis: { type: 'value', name: '数量' },
     series: [
-        { name: '重大风险', type: 'bar', stack: 'total', data: [18, 12, 16, 14, 10] },
+        {
-        { name: '较大风险', type: 'bar', stack: 'total', data: [22, 16, 20, 18, 15] },
+            name: '重大风险',
-        { name: '一般风险', type: 'bar', stack: 'total', data: [20, 14, 18, 16, 12] },
+            type: 'bar',
-        { name: '低风险', type: 'bar', stack: 'total', data: [16, 10, 14, 12, 8] }
+            stack: 'total',
+            barWidth: 25,
+            itemStyle: { borderColor: '#fff', borderWidth: 1 },
+            data: [18, 12, 16, 14, 10]
+        },
+        {
+            name: '较大风险',
+            type: 'bar',
+            stack: 'total',
+            barWidth: 25,
+            itemStyle: { borderColor: '#fff', borderWidth: 1 },
+            data: [22, 16, 20, 18, 15]
+        },
+        {
+            name: '一般风险',
+            type: 'bar',
+            stack: 'total',
+            barWidth: 25,
+            itemStyle: { borderColor: '#fff', borderWidth: 1 },
+            data: [20, 14, 18, 16, 12]
+        },
+        {
+            name: '低风险',
+            type: 'bar',
+            stack: 'total',
+            barWidth: 25,
+            itemStyle: { borderColor: '#fff', borderWidth: 1 },
+            data: [16, 10, 14, 12, 8]
+        }
     ]
 };
 
 const gaugeOption = {
-    title: { text: '风险处理率', left: 'center', top: '5%', textStyle: { fontSize: 14, fontWeight: 600 } },
+    title: { left: 'center', top: '5%' },
     series: [
+        // 外层背景环
         {
             type: 'gauge',
-            startAngle: 220,
+            startAngle: 90,
-            endAngle: -40,
+            endAngle: -270,
+            radius: '84%',
+            axisLine: { lineStyle: { width: 26, color: [[1, 'rgba(231, 247, 251, 1)']] } },
+            progress: { show: false },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            pointer: { show: false },
+            detail: { show: false },
+            data: [{ value: 100 }],
+            silent: true,
+            z: 1
+        },
+        // 内层进度环
+        {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
             radius: '80%',
-            progress: { show: true, width: 18, itemStyle: { color: '#2fc25b' } },
+            progress: {
-            axisLine: { lineStyle: { width: 18, color: [[1, '#e6f7ff']] } },
+                show: true,
+                width: 14,
+                roundCap: true,
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [
+                            { offset: 1, color: '#77FF59' },
+                            { offset: 0.8, color: '#71FFA9' },
+                            { offset: 0.65, color: '#30FFA6' },
+                            { offset: 0.45, color: '#11EDEA' },
+                            { offset: 0.2, color: '#46D3FF' },
+                            { offset: 0, color: '#356EFF' }
+                        ]
+                    }
+                }
+            },
+            axisLine: { lineStyle: { width: 14, color: [[1, 'rgba(231, 247, 251, 1)']] } },
             splitLine: { show: false },
             axisTick: { show: false },
             axisLabel: { show: false },
@@ -84,11 +236,14 @@ const gaugeOption = {
             detail: {
                 valueAnimation: true,
                 formatter: '88%',
-                color: '#2fc25b',
+                color: 'rgba(0, 164, 246, 1)',
                 fontSize: 28,
-                offsetCenter: [0, '0%']
+                offsetCenter: [0, '-6%']
             },
-            data: [{ value: 88 }]
+            anchor: { show: false },
+            title: { show: false },
+            data: [{ value: 88 }],
+            z: 2
         }
     ]
 };
@@ -137,7 +292,22 @@ const CurveAnalysis = () => {
                         <span className={styles.panelHeaderIcon} />
                         <span>月度风险趋势分析</span>
                     </div>
-                    <ReactECharts option={trendOption} style={{ height: 320 }} notMerge lazyUpdate />
+                    <div className={styles.trendContent}>
+                        <div className={styles.chartArea}>
+                            <ReactECharts option={trendOption} style={{ height: 320 }} notMerge lazyUpdate />
+                        </div>
+                        <div className={styles.riskBoard}>
+                            {trendSummary.map(item => (
+                                <div key={item.name} className={styles.riskCard} style={{ background: item.bg }}>
+                                    <div className={styles.riskCardHeader} style={{ color: item.color }}>
+                                        {/* <span className={styles.riskCardDot} style={{ backgroundColor: item.color }} /> */}
+                                        <span className={styles.riskCardTitle}>{item.name}</span>
+                                    </div>
+                                    <span className={styles.riskCardValue} style={{ color: item.color }}>{item.value}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </div>
                 <div className={styles.panel}>
                     <div className={styles.panelHeader}>

src/pages/business_envInformation_monthly/components/content_component_fxwt/CurveAnalysis.less

@@ -81,8 +81,12 @@
     .topRow,
     .bottomRow {
         display: grid;
-        grid-template-columns: 2fr 1fr;
+        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
         gap: 12px;
+
+        > .panel {
+            min-width: 0;
+        }
     }
 
     .bottomRow {
@@ -111,6 +115,55 @@
                 background: rgba(0, 157, 111, 1);
             }
         }
+
+        .trendContent {
+            display: flex;
+            gap: 12px;
+            align-items: stretch;
+            width: 100%;
+        }
+
+        .chartArea {
+            flex: 1 1 0;
+            min-width: 0;
+        }
+
+        .riskBoard {
+            flex: 0 0 150px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .riskCard {
+            flex: 1;
+            border-radius: 2px;
+            padding: 10px 12px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+        }
+
+        .riskCardHeader {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            // color: #333;
+            font-size: 13px;
+            font-weight: 400;
+        }
+
+        .riskCardDot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+
+        .riskCardValue {
+            font-size: 20px;
+            font-weight: 700;
+        }
     }
 
     label {