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

方法配置页面

Browse Source
main
wangyunfei 2 weeks ago
parent a84978c586
commit e50ebb04c6
4 changed files with 427 additions and 179 deletions
Show Stats Download Patch File Download Diff File

2
src/pages/business_envInformation_monthly/components/hjbs.less
Unescape Escape View File

@ -18,7 +18,7 @@
background-color: #fff;
.menuItem {
width: 180px;
width: 140px;
height: 50px;
background-color: #FFFFFF;
border-radius: 4px;

289
src/pages/business_envInformation_monthly/components/secondary_menu/Step02.js
Unescape Escape View File

@ -1,74 +1,167 @@
import React from 'react';
import {Button} from 'antd';
import {Button, Select} from 'antd';
import ReactECharts from 'echarts-for-react';
import styles from './step02.less';
const Step02 = () => {
// 半圆形仪表盘配置
const gaugeOption = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
radius: '80%',
center: ['50%', '75%'],
axisLine: {
lineStyle: {
width: 20,
color: [
[0.48, '#00FFE1'], // 已填充部分 - 青色
[1, 'rgba(180, 180, 220, 0.3)'] // 未填充部分 - 浅蓝紫色
]
}
},
splitLine: {
show: true,
length: 10,
lineStyle: {
color: 'rgba(180, 180, 220, 0.5)',
type: 'dashed',
width: 1
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: true,
length: '65%',
width: 2,
itemStyle: {
color: '#00FFE1'
}
},
detail: {
show: true,
offsetCenter: [0, '10%'],
fontSize: 48,
fontWeight: 'bold',
color: '#000',
formatter: function(value) {
return value;
}
},
data: [
{
value: 48,
name: '当前分值',
title: {
offsetCenter: [0, '25%'],
fontSize: 14,
color: '#000'
}
}
]
}
]
};
return (
<div className={`${styles.stepContent} ${styles.step02Layout}`}>
{/* A 区域：评估方法（左侧 60%） */}
<div className={styles.leftPanel}>
{/* 可滚动内容区域 */}
{/* 第一行：评估方法标题 + 下拉选择框 */}
<div className={styles.methodHeaderRow}>
<span className={styles.methodTitle}>评估方法</span>
<Select
defaultValue="lec"
className={styles.methodSelect}
options={[
{ value: 'lec', label: 'LEC评价法' }
]}
/>
</div>
{/* 第二行：LEC评价法说明块 */}
<div className={styles.methodDescBlock}>
<div className={styles.methodDescTitle}>LEC评价法</div>
<div className={styles.methodDescContent}>
<div>公式: 风险分值 D = L x E x C</div>
<div>描述: 该方法简单易用,通过三个维度的主观判断对风险进行半定量评估。适用于对作业活动、设备设施等进行初步的风险筛查和等级排序。</div>
</div>
</div>
{/* 参数块区域 */}
<div className={styles.methodWrapper}>
{/* 参数1 */}
{/* 参数L：事故发生可能性 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数1：事故发生可能性</span>
<span className={styles.paramDesc}>（结合历史事故数据、设备状况、管理水平等，评估事故发生的几率）</span>
<span className={styles.paramTitle}>参数L: 事故发生可能性</span>
</div>
<div className={styles.paramSubtitle}>
结合历史数据、设备状况、管理水平,评估事故发生的几率。
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>极不可能发生<br/>0.1分</div>
<div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能<br/>0.5分</div>
<div className={styles.optionCard}>偶尔发生<br/>1分</div>
<div className={styles.optionCard}>可能但不经常<br/>3分</div>
<div className={styles.optionCard}>实际不可能<br/>0.1分</div>
<div className={styles.optionCard}>极不可能<br/>0.2分</div>
<div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能 可以设想<br/>0.5分</div>
<div className={styles.optionCard}>可能性小 完全意外<br/>1分</div>
<div className={styles.optionCard}>可能 但不经常<br/>3分</div>
<div className={styles.optionCard}>相当可能<br/>6分</div>
<div className={styles.optionCard}>完全可能<br/>10分</div>
<div className={styles.optionCard}>完全意外 不可预料<br/>10分</div>
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<span className={styles.sliderLabel}>参数权重</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
{/* 参数2 */}
{/* 参数E：暴露于危险环境的频繁程度 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数2：暴露于危险环境的频繁程度</span>
<span className={styles.paramDesc}>（人员或设备在危险环境中出现的频率）</span>
<span className={styles.paramTitle}>参数E: 暴露于危险环境的频繁程度</span>
</div>
<div className={styles.paramSubtitle}>
人员出现在此危险环境下的时间频率。
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>几乎不接触<br/>0.5分</div>
<div className={styles.optionCard}>每年数次<br/>1分</div>
<div className={styles.optionCard}>每月数次<br/>2分</div>
<div className={styles.optionCard}>每周数次<br/>3分</div>
<div className={styles.optionCard}>每天一次<br/>6分</div>
<div className={styles.optionCard}>持续暴露<br/>10分</div>
<div className={`${styles.optionCard} ${styles.optionActive}`}>非常罕见 地暴露<br/>0.5分</div>
<div className={styles.optionCard}>可能 但不经常<br/>1分</div>
<div className={styles.optionCard}>每月一次 暴露<br/>2分</div>
<div className={styles.optionCard}>每周一次 或偶然暴露<br/>3分</div>
<div className={styles.optionCard}>每天工作 时间内暴露<br/>6分</div>
<div className={styles.optionCard}>连续暴露<br/>10分</div>
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<span className={styles.sliderLabel}>参数权重</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
{/* 参数3 */}
{/* 参数C：发生事故可能造成的后果 */}
<div className={styles.paramBlock}>
<div className={styles.paramHeader}>
<span className={styles.paramTitle}>参数3：发生事故可能造成的后果</span>
<span className={styles.paramDesc}>（对人员、设备及环境的影响程度）</span>
<span className={styles.paramTitle}>参数C: 发生事故可能造成的后果</span>
</div>
<div className={styles.optionRow}>
<div className={styles.optionCard}>人员轻微受伤<br/>1分</div>
<div className={styles.optionCard}>需要医疗处理<br/>3分</div>
<div className={styles.optionCard}>需住院治疗<br/>7分</div>
<div className={styles.optionCard}>致人重伤<br/>15分</div>
<div className={styles.optionCard}>多人重伤或死亡<br/>40分</div>
<div className={styles.optionCard}>多人死亡<br/>100分</div>
<div className={styles.paramSubtitle}>
评估最可能发生的事故及其后果的严重性。
</div>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数取值</span>
<div className={styles.sliderBar}/>
<span className={styles.sliderValue}>0.8</span>
<div className={styles.optionRow}>
<div className={styles.optionCard}>引人注目 需要救护</div>
<div className={styles.optionCard}>重大/致残/<br/>较小的环境影响</div>
<div className={styles.optionCard}>需上报的环境<br/>污染事件</div>
<div className={styles.optionCard}>一人死亡/造成<br/>局部环境污染</div>
<div className={styles.optionCard}>数人死亡/<br/>严重环境污染</div>
<div className={styles.optionCard}>多人死亡/<br/>重大环境污染</div>
</div>
</div>
</div>
@ -78,15 +171,26 @@ const Step02 = () => {
<div className={styles.rightPanel}>
{/* 上块：仪表盘和公式说明 */}
<div className={styles.rightTop}>
<div className={styles.gaugePanel}>
<div className={styles.gaugeCircle}>
<span className={styles.gaugeValue}>48</span>
<span className={styles.gaugeLabel}>当前分值</span>
</div>
<div className={styles.gaugeFormula}>
D = L (x×x) × E (x×x) × C (x×x) ≈ 48
</div>
{/* 第一行：评估对象和LEC评价法标签 */}
<div className={styles.topHeader}>
<span className={styles.evaluationObject}>评估对象: 第五车间</span>
<span className={styles.lecLabel}>LEC评价法</span>
</div>
{/* 第二行：半圆形仪表盘 */}
<div className={styles.gaugeContainer}>
<ReactECharts
option={gaugeOption}
style={{ width: '100%', height: '200px' }}
/>
</div>
{/* 第三行：公式 */}
<div className={styles.formulaText}>
D = L (xx*xx) x E (xx*xx) x C (xx*xx) = 48
</div>
{/* 第四行：建议措施 */}
<div className={styles.suggestionPanel}>
<div className={styles.suggestionTitle}>建议措施：</div>
<div className={styles.suggestionContent}>1、需要注意。</div>
@ -100,47 +204,66 @@ const Step02 = () => {
</Button>
</div>
{/* 下块：风险等级评判标准 */}
{/* 下块：风险等级判定标准 */}
<div className={styles.rightBottom}>
<div className={styles.riskHeader}>风险等级评判标准</div>
<div className={styles.riskTable}>
<div className={`${styles.riskRow} ${styles.riskRowHeader}`}>
<span>风险分值</span>
<span>风险等级</span>
<span>表征颜色</span>
<span>应采取行动</span>
</div>
<div className={styles.riskRow}>
<span>{'>= 320'}</span>
<span>极其危险，重大风险</span>
<span className={`${styles.colorDot} ${styles.colorRed}`}/>
<span>立即停止作业，整改</span>
</div>
<div className={styles.riskRow}>
<span>160 ~ 320</span>
<span>高度危险，较大风险</span>
<span className={`${styles.colorDot} ${styles.colorOrange}`}/>
<span>制定期限和措施整改措施</span>
</div>
<div className={styles.riskRow}>
<span>70 ~ 159</span>
<span>显著危险，中等风险</span>
<span className={`${styles.colorDot} ${styles.colorYellow}`}/>
<span>需要关注和改进</span>
</div>
<div className={styles.riskRow}>
<span>20 ~ 69</span>
<span>一般危险，低风险</span>
<span className={`${styles.colorDot} ${styles.colorBlue}`}/>
<span>需要注意</span>
</div>
<div className={styles.riskRow}>
<span>{'< 20'}</span>
<span>可容许危险，低风险</span>
<span className={`${styles.colorDot} ${styles.colorGreen}`}/>
<span>可以接受</span>
</div>
</div>
<div className={styles.riskHeader}>风险等级判定标准</div>
<table className={styles.riskTable}>
<thead>
<tr className={styles.riskRowHeader}>
<th>风险分值</th>
<th>风险等级</th>
<th>表征颜色</th>
<th>应采取行动</th>
</tr>
</thead>
<tbody>
<tr className={styles.riskRow}>
<td>{'> 320'}</td>
<td>极其危险, 重大风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorRed}`}/>
<span className={styles.colorName}>红色</span>
</td>
<td>立即停止作业, 整改</td>
</tr>
<tr className={styles.riskRow}>
<td>160 ~ 320</td>
<td>高度危险, 较大风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorOrange}`}/>
<span className={styles.colorName}>橙色</span>
</td>
<td>需要立即采取措施整改</td>
</tr>
<tr className={styles.riskRow}>
<td>70 ~ 159</td>
<td>显著危险, 一般风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorYellow}`}/>
<span className={styles.colorName}>黄色</span>
</td>
<td>需要关注和整改</td>
</tr>
<tr className={styles.riskRow}>
<td>20 ~ 69</td>
<td>一般危险, 低风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorBlue}`}/>
<span className={styles.colorName}>蓝色</span>
</td>
<td>需要注意</td>
</tr>
<tr className={styles.riskRow}>
<td>{'< 20'}</td>
<td>稍有危险, 低风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorGreen}`}/>
<span className={styles.colorName}>绿色</span>
</td>
<td>可以接受</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

1
src/pages/business_envInformation_monthly/components/secondary_menu/fxpggzt.less
Unescape Escape View File

@ -76,7 +76,6 @@
.contentArea {
flex: 1;
overflow-y: auto;
background-color: #fff;
border-radius: 4px;
margin: 0 6px 6px 6px;
}

312
src/pages/business_envInformation_monthly/components/secondary_menu/step02.less
Unescape Escape View File

@ -2,66 +2,130 @@
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 12px 16px;
/* 根容器同时挂了 stepContent + step02Layout 两个类，这里用 &.step02Layout 做层级组织 */
&.step02Layout {
width: 100%;
height: 100%;
display: flex;
background-color: transparent;
gap: 10px;
background-color: #f5f6fa;
/* 左侧 A 区域：评估方法（60% 宽度） */
.leftPanel {
width: 60%;
flex: 0 0 55%;
// width: 60%;
height: 100%;
background-color: #ffffff;
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
overflow: auto;
display: flex;
flex-direction: column;
gap: 15px;
/* 第一行：评估方法标题 + 下拉选择框 */
.methodHeaderRow {
display: flex;
align-items: center;
gap: 10px;
.methodTitle {
color: rgba(0, 0, 0, 1);
font-size: 14px;
}
.methodSelect {
flex: 0 0 auto;
min-width: 150px;
:global {
.ant-select-selector {
color: rgba(0, 0, 0, 0.85) !important;
}
.ant-select-selection-item {
color: rgba(0, 0, 0, 0.85) !important;
}
}
}
}
/* 第二行：LEC评价法说明块 */
.methodDescBlock {
background-color: rgba(250, 250, 250, 1);
border-radius: 2px;
padding: 12px 16px;
box-sizing: border-box;
.methodDescTitle {
font-size: 14px;
font-weight: 450;
color: rgba(153, 153, 153, 1);
margin-bottom: 8px;
}
.methodDescContent {
font-size: 13px;
color: rgba(153, 153, 153, 1);
line-height: 1.6;
div {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
}
}
}
.methodWrapper {
display: flex;
flex-direction: column;
gap: 16px;
gap: 15px;
.paramBlock {
background-color: #fafafa;
border-radius: 4px;
border: 1px solid rgba(154, 154, 154, 0.2);
border-radius: 2px;
padding: 12px 16px;
background-color: #ffffff;
.paramHeader {
margin-bottom: 12px;
font-size: 13px;
margin-bottom: 8px;
font-size: 14px;
.paramTitle {
font-weight: 600;
margin-right: 8px;
font-weight: 450;
color: rgba(0, 0, 0, 1);
}
}
.paramDesc {
color: #888;
}
.paramSubtitle {
font-size: 13px;
color: rgba(0, 185, 78, 1);
margin-bottom: 12px;
}
.optionRow {
display: flex;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
.optionCard {
flex: 1;
min-width: 0;
background-color: #ffffff;
background-color: rgba(246, 246, 246, 1);
border-radius: 4px;
border: 1px solid #e5e5e5;
border: 1px solid rgba(154, 154, 154, 0.2);
text-align: center;
color: rgba(150, 150, 150, 1);
padding: 8px 4px;
font-size: 12px;
line-height: 18px;
cursor: pointer;
box-sizing: border-box;
&.optionActive {
border-color: #00d48a;
@ -78,7 +142,8 @@
.sliderLabel {
font-size: 12px;
color: #666;
color: rgba(0, 0, 0, 0.85);
flex-shrink: 0;
}
.sliderBar {
@ -92,7 +157,11 @@
width: 40px;
text-align: right;
font-size: 12px;
color: #333;
color: rgba(0, 0, 0, 0.85);
background-color: rgba(240, 240, 240, 1);
padding: 2px 6px;
border-radius: 2px;
flex-shrink: 0;
}
}
}
@ -109,66 +178,71 @@
/* 上块：仪表盘与建议 */
.rightTop {
background-color: #ffffff;
background-color: #FFFFFF;
background-image: linear-gradient(180deg, rgba(69, 255, 174, 0.2) 0%, rgba(255, 255, 255, 0) 20.33%);
border-radius: 4px;
padding: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 16px;
.gaugePanel {
flex: 1;
/* 第一行：评估对象和LEC评价法标签 */
.topHeader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.gaugeCircle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 16px solid #e5f9f3;
border-top-color: #00d48a;
border-right-color: #00d48a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
justify-content: space-between;
width: 100%;
.gaugeValue {
font-size: 40px;
font-weight: 600;
}
.gaugeLabel {
font-size: 14px;
margin-top: 4px;
}
.evaluationObject {
color: rgba(0, 0, 0, 1);
font-size: 14px;
background: transparent;
}
.gaugeFormula {
margin-top: 12px;
font-size: 12px;
color: #666;
.lecLabel {
color: #fff;
background: linear-gradient(92.78deg, #00FFE1 2.1%, #39C2EB 49.39%, #4570FF 100.47%);
padding: 4px 16px;
border-radius: 20px;
font-size: 14px;
}
}
/* 第二行：半圆形仪表盘 */
.gaugeContainer {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* 第三行：公式 */
.formulaText {
color: rgba(0, 0, 0, 1);
font-size: 14px;
text-align: center;
width: 100%;
}
/* 第四行：建议措施 */
.suggestionPanel {
width: 260px;
background-color: #f8f9ff;
width: 100%;
background-color: rgba(234, 246, 255, 1);
border-radius: 4px;
padding: 12px 16px;
font-size: 13px;
box-sizing: border-box;
.suggestionTitle {
color: rgba(0, 0, 0, 1);
font-weight: 600;
margin-bottom: 6px;
}
.suggestionContent {
color: #555;
color: rgba(51, 51, 51, 1);
}
}
}
@ -180,7 +254,7 @@
padding: 12px 16px;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
justify-content: center;
.nextBtn {
min-width: 120px;
@ -189,7 +263,7 @@
}
}
/* 下块：风险等级评判标准 */
/* 下块：风险等级判定标准 */
.rightBottom {
background-color: #ffffff;
border-radius: 4px;
@ -200,62 +274,114 @@
gap: 12px;
.riskHeader {
font-weight: 600;
color: rgba(153, 153, 153, 1);
font-size: 14px;
}
.riskTable {
border: 1px solid #e5e5e5;
border-radius: 4px;
overflow: hidden;
width: 100%;
border-collapse: collapse;
font-size: 12px;
.riskRow {
display: grid;
grid-template-columns: 120px 180px 80px auto;
align-items: center;
padding: 6px 12px;
border-top: 1px solid #f0f0f0;
&.riskRowHeader {
background-color: #fafafa;
font-weight: 600;
thead {
.riskRowHeader {
background-color: rgba(219, 232, 230, 0.59);
th {
color: rgba(102, 102, 102, 1);
padding: 8px 12px;
text-align: left;
font-weight: normal;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
&:first-child {
padding-left: 20px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: rgba(144, 238, 144, 0.5);
}
}
}
}
}
tbody {
.riskRow {
color: rgba(153, 153, 153, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
td {
padding: 8px 12px;
vertical-align: middle;
&:first-child {
padding-left: 20px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: rgba(144, 238, 144, 0.5);
}
}
&:nth-child(3) {
display: flex;
align-items: center;
gap: 8px;
}
}
&:first-child {
border-top: none;
&:last-child {
border-bottom: none;
}
}
}
.colorDot {
display: inline-block;
width: 16px;
height: 8px;
border-radius: 4px;
.colorDot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
flex-shrink: 0;
&.colorRed {
background-color: #ff4d4f;
}
&.colorRed {
background-color: #ff4d4f;
}
&.colorOrange {
background-color: #fa8c16;
}
&.colorOrange {
background-color: #fa8c16;
}
&.colorYellow {
background-color: #fadb14;
}
&.colorYellow {
background-color: #fadb14;
}
&.colorBlue {
background-color: #40a9ff;
}
&.colorBlue {
background-color: #40a9ff;
}
&.colorGreen {
background-color: #52c41a;
}
&.colorGreen {
background-color: #52c41a;
}
}
.colorName {
color: rgba(153, 153, 153, 1);
}
}
}
}
}
}

Write Preview
Loading…
Cancel
Save