jiangxucong
/
dq-ems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

风险问题页面

Browse Source
main
wangyunfei888 1 month ago
parent e65be6e07e
commit c3863f8cff
2 changed files with 255 additions and 32 deletions
Show Stats Download Patch File Download Diff File

230
src/pages/business_envInformation_monthly/components/content_component_fxwt/CurveAnalysis.js
Unescape Escape View File

@ -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: '一般风险', type: 'line', smooth: true, data: [12, 13, 11, 12, 10, 12, 10, 9, 12, 11, 10, 12] },
{ name: '低风险', type: 'line', smooth: true, data: [10, 12, 9, 10, 8, 9, 8, 7, 9, 8, 7, 8] }
{
name: '重大风险',
type: 'line',
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: 10, color: '#f6b64d' },
{ name: '一般风险', value: 4, color: '#5fa2e0' },
{ name: '低风险', value: 4, color: '#2fc25b' }
{ name: '低风险', value: 4, color: 'rgba(0, 170, 250, 1)' },
{ name: '一般风险', value: 3, color: 'rgba(255, 187, 0, 1)' },
{ name: '较大风险', value: 2, color: 'rgba(255, 136, 0, 1)' },
{ 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' },
legend: { bottom: 0, icon: 'circle' },
tooltip: { trigger: 'item', formatter: '{b}: {d}% ' },
legend: {
bottom: 0,
icon: 'rect',
borderColor: "transparent",
itemWidth: 14,
itemHeight: 14,
data: legendNamesDesc,
},
series: [
{
name: '风险等级分布',
type: 'pie',
radius: ['35%', '60%'],
center: ['50%', '45%'],
data: levelBoard.map(i => ({ name: i.name, value: i.value })),
label: { formatter: '{b}: {d}%' }
roseType: 'radius',
radius: ['20%', '55%'],
center: ['50%', '50%'],
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: '一般风险', type: 'bar', stack: 'total', data: [20, 14, 18, 16, 12] },
{ name: '低风险', type: 'bar', stack: 'total', data: [16, 10, 14, 12, 8] }
{
name: '重大风险',
type: 'bar',
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: 90,
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: 220,
endAngle: -40,
startAngle: 90,
endAngle: -270,
radius: '80%',
progress: { show: true, width: 18, itemStyle: { color: '#2fc25b' } },
axisLine: { lineStyle: { width: 18, color: [[1, '#e6f7ff']] } },
progress: {
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,8 +292,23 @@ const CurveAnalysis = () => {
<span className={styles.panelHeaderIcon} />
<span>月度风险趋势分析</span>
</div>
<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}>
<span className={styles.panelHeaderIcon} />

55
src/pages/business_envInformation_monthly/components/content_component_fxwt/CurveAnalysis.less
Unescape Escape View File

@ -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 {

Write Preview
Loading…
Cancel
Save