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', key: '1',
deptName: 'xxxx部', deptName: 'xxxx部',
workshopName: '第五车间', workshopName: '第五车间',
workshopType: '喷漆车间', workshopType: '喷涂车间',
leader: '李斌', leader: '李斌',
phone: '0948-45149757', phone: '0948-45149757',
area: '生产A区', area: '生产A区',
lastEvaluateTime: '2025-11-14 00:19:50', 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: { pagination: {
currentPage: 1, currentPage: 1,
pageSize: 5, pageSize: 10,
total: 1, total: 6,
}, },
}; };

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {Button, Select} from 'antd'; import { Button, Select } from 'antd';
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import styles from './step02.less'; import styles from './step02.less';
@ -8,11 +8,11 @@ const Step02 = () => {
const gaugeOption = { const gaugeOption = {
series: [ series: [
{ {
type: 'gauge', type: 'gauge', // 仪表
startAngle: 180, startAngle: 180,
endAngle: 0, endAngle: 0,
min: 0, min: 0,
max: 100, max: 90,
splitNumber: 10, splitNumber: 10,
radius: '80%', radius: '80%',
center: ['50%', '75%'], center: ['50%', '75%'],
@ -20,8 +20,8 @@ const Step02 = () => {
lineStyle: { lineStyle: {
width: 20, width: 20,
color: [ color: [
[0.48, '#00FFE1'], // 已填充部分 - 青色 [0.48, 'rgba(0, 229, 255, 1)'], // 已填充部分 - 青色
[1, 'rgba(180, 180, 220, 0.3)'] // 未填充部分 - 浅蓝紫色 [1, '#c3d6fb)'] // 未填充部分 - 浅蓝紫色
] ]
} }
}, },
@ -51,10 +51,10 @@ const Step02 = () => {
detail: { detail: {
show: true, show: true,
offsetCenter: [0, '10%'], offsetCenter: [0, '10%'],
fontSize: 48, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
color: '#000', color: '#000',
formatter: function(value) { formatter: function (value) {
return value; return value;
} }
}, },
@ -64,7 +64,7 @@ const Step02 = () => {
name: '当前分值', name: '当前分值',
title: { title: {
offsetCenter: [0, '25%'], offsetCenter: [0, '25%'],
fontSize: 14, fontSize: 12,
color: '#000' color: '#000'
} }
} }
@ -109,17 +109,17 @@ const Step02 = () => {
结合历史数据、设备状况、管理水平,评估事故发生的几率。 结合历史数据、设备状况、管理水平,评估事故发生的几率。
</div> </div>
<div className={styles.optionRow}> <div className={styles.optionRow}>
<div className={styles.optionCard}>实际不可能<br/>0.1分</div> <div className={styles.optionCard}>实际不可能<br />0.1分</div>
<div className={styles.optionCard}>极不可能<br/>0.2分</div> <div className={styles.optionCard}>极不可能<br />0.2分</div>
<div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能 可以设想<br/>0.5分</div> <div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能 可以设想<br />0.5分</div>
<div className={styles.optionCard}>可能性小 完全意外<br/>1分</div> <div className={styles.optionCard}>可能性小 完全意外<br />1分</div>
<div className={styles.optionCard}>可能 但不经常<br/>3分</div> <div className={styles.optionCard}>可能 但不经常<br />3分</div>
<div className={styles.optionCard}>相当可能<br/>6分</div> <div className={styles.optionCard}>相当可能<br />6分</div>
<div className={styles.optionCard}>完全意外 不可预料<br/>10分</div> <div className={styles.optionCard}>完全意外 不可预料<br />10分</div>
</div> </div>
<div className={styles.sliderRow}> <div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数权重</span> <span className={styles.sliderLabel}>参数权重</span>
<div className={styles.sliderBar}/> <div className={styles.sliderBar} />
<span className={styles.sliderValue}>0.8</span> <span className={styles.sliderValue}>0.8</span>
</div> </div>
</div> </div>
@ -133,16 +133,16 @@ const Step02 = () => {
人员出现在此危险环境下的时间频率。 人员出现在此危险环境下的时间频率。
</div> </div>
<div className={styles.optionRow}> <div className={styles.optionRow}>
<div className={`${styles.optionCard} ${styles.optionActive}`}>非常罕见 地暴露<br/>0.5分</div> <div className={`${styles.optionCard} ${styles.optionActive}`}>非常罕见 地暴露<br />0.5分</div>
<div className={styles.optionCard}>可能 但不经常<br/>1分</div> <div className={styles.optionCard}>可能 但不经常<br />1分</div>
<div className={styles.optionCard}>每月一次 暴露<br/>2分</div> <div className={styles.optionCard}>每月一次 暴露<br />2分</div>
<div className={styles.optionCard}>每周一次 或偶然暴露<br/>3分</div> <div className={styles.optionCard}>每周一次 或偶然暴露<br />3分</div>
<div className={styles.optionCard}>每天工作 时间内暴露<br/>6分</div> <div className={styles.optionCard}>每天工作 时间内暴露<br />6分</div>
<div className={styles.optionCard}>连续暴露<br/>10分</div> <div className={styles.optionCard}>连续暴露<br />10分</div>
</div> </div>
<div className={styles.sliderRow}> <div className={styles.sliderRow}>
<span className={styles.sliderLabel}>参数权重</span> <span className={styles.sliderLabel}>参数权重</span>
<div className={styles.sliderBar}/> <div className={styles.sliderBar} />
<span className={styles.sliderValue}>0.8</span> <span className={styles.sliderValue}>0.8</span>
</div> </div>
</div> </div>
@ -157,11 +157,11 @@ const Step02 = () => {
</div> </div>
<div className={styles.optionRow}> <div className={styles.optionRow}>
<div className={styles.optionCard}>引人注目 需要救护</div> <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> </div>
</div> </div>
@ -221,7 +221,7 @@ const Step02 = () => {
<td>{'> 320'}</td> <td>{'> 320'}</td>
<td>极其危险, 重大风险</td> <td>极其危险, 重大风险</td>
<td> <td>
<span className={`${styles.colorDot} ${styles.colorRed}`}/> <span className={`${styles.colorDot} ${styles.colorRed}`} />
<span className={styles.colorName}>红色</span> <span className={styles.colorName}>红色</span>
</td> </td>
<td>立即停止作业, 整改</td> <td>立即停止作业, 整改</td>
@ -230,7 +230,7 @@ const Step02 = () => {
<td>160 ~ 320</td> <td>160 ~ 320</td>
<td>高度危险, 较大风险</td> <td>高度危险, 较大风险</td>
<td> <td>
<span className={`${styles.colorDot} ${styles.colorOrange}`}/> <span className={`${styles.colorDot} ${styles.colorOrange}`} />
<span className={styles.colorName}>橙色</span> <span className={styles.colorName}>橙色</span>
</td> </td>
<td>需要立即采取措施整改</td> <td>需要立即采取措施整改</td>
@ -239,7 +239,7 @@ const Step02 = () => {
<td>70 ~ 159</td> <td>70 ~ 159</td>
<td>显著危险, 一般风险</td> <td>显著危险, 一般风险</td>
<td> <td>
<span className={`${styles.colorDot} ${styles.colorYellow}`}/> <span className={`${styles.colorDot} ${styles.colorYellow}`} />
<span className={styles.colorName}>黄色</span> <span className={styles.colorName}>黄色</span>
</td> </td>
<td>需要关注和整改</td> <td>需要关注和整改</td>
@ -248,7 +248,7 @@ const Step02 = () => {
<td>20 ~ 69</td> <td>20 ~ 69</td>
<td>一般危险, 低风险</td> <td>一般危险, 低风险</td>
<td> <td>
<span className={`${styles.colorDot} ${styles.colorBlue}`}/> <span className={`${styles.colorDot} ${styles.colorBlue}`} />
<span className={styles.colorName}>蓝色</span> <span className={styles.colorName}>蓝色</span>
</td> </td>
<td>需要注意</td> <td>需要注意</td>
@ -257,7 +257,7 @@ const Step02 = () => {
<td>{'< 20'}</td> <td>{'< 20'}</td>
<td>稍有危险, 低风险</td> <td>稍有危险, 低风险</td>
<td> <td>
<span className={`${styles.colorDot} ${styles.colorGreen}`}/> <span className={`${styles.colorDot} ${styles.colorGreen}`} />
<span className={styles.colorName}>绿色</span> <span className={styles.colorName}>绿色</span>
</td> </td>
<td>可以接受</td> <td>可以接受</td>

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

@ -1,5 +1,3 @@
.step01Layout { .step01Layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -10,7 +8,7 @@
.leftPanel { .leftPanel {
width: 20%; width: 20%;
height: 100%; height: 100%;
background-color: green; // 暂定颜色，后续可调整为主题色 background: linear-gradient(180deg, #CCFFEF 0%, #FDFEFE 100%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
@ -20,18 +18,55 @@
.leftTop { .leftTop {
display: flex; display: flex;
gap: 10px; // gap: 10px;
width: 80%;
align-items: center;
.toggleBtn { .toggleBtn {
flex: 1; 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 { .leftBottom {
flex: 1; flex: 1;
background-color: #fff; background-color: transparent;
border-radius: 2px; // border-radius: 2px;
padding: 8px; padding: 2px;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
} }
@ -79,9 +114,12 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
:global {
.ant-table-thead>tr>th {
font-weight: 400;
}
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save