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

评估对象页面

Browse Source
main
wangyunfei 2 weeks ago
parent 75c2cae56b
commit 3f90be3a04
3 changed files with 140 additions and 52 deletions
Show Stats Download Patch File Download Diff File

56
src/pages/business_envInformation_monthly/components/secondary_menu/Step01.js
Unescape Escape View File

@ -64,17 +64,67 @@ const dataSource = {
key: '1',
deptName: 'xxxx部',
workshopName: '第五车间',
workshopType: '喷漆车间',
workshopType: '喷涂车间',
leader: '李斌',
phone: '0948-45149757',
area: '生产A区',
lastEvaluateTime: '2025-11-14 00:19:50',
},
{
key: '2',
deptName: 'xxxx部',
workshopName: '第一车间',
workshopType: '电镀车间',
leader: '孙亚荣',
phone: '061-5042637',
area: '公用工程区',
lastEvaluateTime: '2025-11-14 07:52:53',
},
{
key: '3',
deptName: 'xxxx部',
workshopName: '第二车间',
workshopType: '电镀车间',
leader: '赵慧',
phone: '0407-82176847',
area: '生产A区',
lastEvaluateTime: '2025-11-16 15:45:10',
},
{
key: '4',
deptName: 'xxxx部',
workshopName: '第一车间',
workshopType: '电镀车间',
leader: '李昭',
phone: '030-60442414',
area: '生产B区',
lastEvaluateTime: '2025-11-20 04:24:15',
},
{
key: '5',
deptName: 'xxxx部',
workshopName: 'Tododo2029',
workshopType: '电镀车间',
leader: '李昭',
phone: '030-60442414',
area: '生产B区',
lastEvaluateTime: '2025-11-20 04:24:15',
},
{
key: '6',
deptName: 'xxxx部',
workshopName: '午利有限公司',
workshopType: '电镀车间',
leader: '周国晖',
phone: '086-31653597',
area: '生产B区',
lastEvaluateTime: '2025-11-24 14:42:05',
},
],
pagination: {
currentPage: 1,
pageSize: 5,
total: 1,
pageSize: 10,
total: 6,
},
};

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

@ -1,5 +1,5 @@
import React from 'react';
import {Button, Select} from 'antd';
import { Button, Select } from 'antd';
import ReactECharts from 'echarts-for-react';
import styles from './step02.less';
@ -8,11 +8,11 @@ const Step02 = () => {
const gaugeOption = {
series: [
{
type: 'gauge',
type: 'gauge', // 仪表
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
max: 90,
splitNumber: 10,
radius: '80%',
center: ['50%', '75%'],
@ -20,8 +20,8 @@ const Step02 = () => {
lineStyle: {
width: 20,
color: [
[0.48, '#00FFE1'], // 已填充部分 - 青色
[1, 'rgba(180, 180, 220, 0.3)'] // 未填充部分 - 浅蓝紫色
[0.48, 'rgba(0, 229, 255, 1)'], // 已填充部分 - 青色
[1, '#c3d6fb)'] // 未填充部分 - 浅蓝紫色
]
}
},
@ -51,10 +51,10 @@ const Step02 = () => {
detail: {
show: true,
offsetCenter: [0, '10%'],
fontSize: 48,
fontSize: 18,
fontWeight: 'bold',
color: '#000',
formatter: function(value) {
formatter: function (value) {
return value;
}
},
@ -64,7 +64,7 @@ const Step02 = () => {
name: '当前分值',
title: {
offsetCenter: [0, '25%'],
fontSize: 14,
fontSize: 12,
color: '#000'
}
}
@ -109,17 +109,17 @@ const Step02 = () => {
结合历史数据、设备状况、管理水平,评估事故发生的几率。
</div>
<div className={styles.optionRow}>
<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 />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>
<div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数权重</span>
<div className={styles.sliderBar}/>
<div className={styles.sliderBar} />
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
@ -133,16 +133,16 @@ const Step02 = () => {
人员出现在此危险环境下的时间频率。
</div>
<div className={styles.optionRow}>
<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 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>
<div className={styles.sliderBar}/>
<div className={styles.sliderBar} />
<span className={styles.sliderValue}>0.8</span>
</div>
</div>
@ -157,11 +157,11 @@ const Step02 = () => {
</div>
<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 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>
@ -176,20 +176,20 @@ const Step02 = () => {
<span className={styles.evaluationObject}>评估对象: 第五车间</span>
<span className={styles.lecLabel}>LEC评价法</span>
</div>
{/* 第二行：半圆形仪表盘 */}
<div className={styles.gaugeContainer}>
<ReactECharts
option={gaugeOption}
<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>
@ -221,7 +221,7 @@ const Step02 = () => {
<td>{'> 320'}</td>
<td>极其危险, 重大风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorRed}`}/>
<span className={`${styles.colorDot} ${styles.colorRed}`} />
<span className={styles.colorName}>红色</span>
</td>
<td>立即停止作业, 整改</td>
@ -230,7 +230,7 @@ const Step02 = () => {
<td>160 ~ 320</td>
<td>高度危险, 较大风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorOrange}`}/>
<span className={`${styles.colorDot} ${styles.colorOrange}`} />
<span className={styles.colorName}>橙色</span>
</td>
<td>需要立即采取措施整改</td>
@ -239,7 +239,7 @@ const Step02 = () => {
<td>70 ~ 159</td>
<td>显著危险, 一般风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorYellow}`}/>
<span className={`${styles.colorDot} ${styles.colorYellow}`} />
<span className={styles.colorName}>黄色</span>
</td>
<td>需要关注和整改</td>
@ -248,7 +248,7 @@ const Step02 = () => {
<td>20 ~ 69</td>
<td>一般危险, 低风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorBlue}`}/>
<span className={`${styles.colorDot} ${styles.colorBlue}`} />
<span className={styles.colorName}>蓝色</span>
</td>
<td>需要注意</td>
@ -257,7 +257,7 @@ const Step02 = () => {
<td>{'< 20'}</td>
<td>稍有危险, 低风险</td>
<td>
<span className={`${styles.colorDot} ${styles.colorGreen}`}/>
<span className={`${styles.colorDot} ${styles.colorGreen}`} />
<span className={styles.colorName}>绿色</span>
</td>
<td>可以接受</td>

60
src/pages/business_envInformation_monthly/components/secondary_menu/step01.less
Unescape Escape View File

@ -1,5 +1,3 @@
.step01Layout {
width: 100%;
height: 100%;
@ -10,7 +8,7 @@
.leftPanel {
width: 20%;
height: 100%;
background-color: green; // 暂定颜色，后续可调整为主题色
background: linear-gradient(180deg, #CCFFEF 0%, #FDFEFE 100%);
display: flex;
flex-direction: column;
padding: 10px;
@ -20,18 +18,55 @@
.leftTop {
display: flex;
gap: 10px;
// gap: 10px;
width: 80%;
align-items: center;
.toggleBtn {
flex: 1;
height: 28px;
width: 80%;
display: flex;
align-items: center;
text-align: center;
font-size: 14px;
border-radius: 0;
&:first-child {
background: rgba(3, 197, 152, 1);
border-color: rgba(3, 197, 152, 1);
color: #fff;
&:hover,
&:focus,
&:active {
background: rgba(3, 197, 152, 1);
border-color: rgba(3, 197, 152, 1);
color: #fff;
}
}
&:last-child {
background: rgba(226, 255, 228, 1);
border-color: rgba(226, 255, 228, 1);
color: rgba(169, 169, 169, 1);
&:hover,
&:focus,
&:active {
background: rgba(226, 255, 228, 1);
border-color: rgba(226, 255, 228, 1);
color: rgba(169, 169, 169, 1);
}
}
}
}
.leftBottom {
flex: 1;
background-color: #fff;
border-radius: 2px;
padding: 8px;
background-color: transparent;
// border-radius: 2px;
padding: 2px;
box-sizing: border-box;
overflow: auto;
}
@ -79,9 +114,12 @@
height: 100%;
display: flex;
flex-direction: column;
:global {
.ant-table-thead>tr>th {
font-weight: 400;
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save