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

风险管控

Browse Source
main
wangyunfei 1 month ago
parent 4d91bf0039
commit 653a9dac0b
6 changed files with 407 additions and 18 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/safe_majorHazard/online_monitoring/img1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/safe_majorHazard/online_monitoring/img2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/safe_majorHazard/online_monitoring/img3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1
src/pages/safe_majorHazard/SafeMajorHazardList.less
Unescape Escape View File

@ -20,6 +20,7 @@
height: auto !important;
border: none !important;
line-height: 1.2 !important;
box-shadow: none !important;
&:hover {
color: #333333 !important;

190
src/pages/safe_majorHazard/module/RiskAssessment.js
Unescape Escape View File

@ -1,19 +1,173 @@
import React from 'react'; // ======== 导入React库，用于创建React组件 ========
import { Card, Result } from 'antd'; // ======== 导入Ant Design的Card和Result组件 ========
const RiskAssessment = () => { // ======== 定义风险管控组件函数 ========
return ( // ======== 返回JSX结构 ========
<div style={{ padding: '24px' }}> // ======== 外层容器，设置24px内边距 ========
<Card title="风险管控" style={{ height: '100%' }}> // ======== Card组件，标题为"风险管控"，高度为父级100% ========
<Result // ======== Result组件，用于显示状态页面 ========
status="info" // ======== 设置状态为info（信息类型） ========
title="风险管控模块" // ======== 设置标题 ========
subTitle="此功能正在开发中，敬请期待..." // ======== 设置副标题，提示开发中 ========
/> // ======== Result组件结束 ========
</Card> // ======== Card组件结束 ========
</div> // ======== 外层容器结束 ========
); // ======== return语句结束 ========
}; // ======== 组件函数结束 ========
export default RiskAssessment; // ======== 导出组件供其他文件使用 ========
import React from 'react';
import { Card, Result, Select } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import styles from './RiskAssessment.less';
import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
const RiskAssessment = () => {
return (
<div className={styles.Rcontainer}>
{/* 第一个div - 高度20% */}
<div className={styles.RcontainerTop}>
<div className={styles.sectionContent}>
<div className={styles.blocksContainer}>
{/* 块1 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>总危险源数量</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img1} alt="总危险源数量" className={styles.blockImage} />
</div>
</div>
{/* 块2 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>高风险设备</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img2} alt="高风险设备" className={styles.blockImage} />
</div>
</div>
{/* 块3 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>今日预警次数</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img3} alt="今日预警次数" className={styles.blockImage} />
</div>
</div>
{/* 块4 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>未处理预警</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<span className={styles.arrow}>↑</span>
较昨日 +2
</div>
</div>
<div className={styles.blockRight}>
<img src={img1} alt="未处理预警" className={styles.blockImage} />
</div>
</div>
{/* 块5 */}
<div className={styles.blockItem}>
<div className={styles.blockLeft}>
<div className={styles.blockTitle}>已处理预警</div>
<div className={styles.blockNumber}>65</div>
<div className={styles.blockChange}>
<CheckCircleOutlined className={styles.checkIcon} />
已完成
</div>
</div>
<div className={styles.blockRight}>
<img src={img2} alt="已处理预警" className={styles.blockImage} />
</div>
</div>
</div>
</div>
</div>
<div className={styles.RcontainerMiddle}>
<div className={styles.sectionContent}>
<div className={styles.middleBlock1}>
<div className={styles.block1Header}>
<div className={styles.block1Title}>
<div className={styles.titleIcon}></div>
危险源风险热力分布
</div>
<Select
className={styles.block1Select}
defaultValue="全部区域"
options={[
{ value: '全部区域', label: '全部区域' },
{ value: '区域A', label: '区域A' },
{ value: '区域B', label: '区域B' },
{ value: '区域C', label: '区域C' }
]}
/>
</div>
{/* 第二行 - 简易曲线图 */}
<div className={styles.block1Chart}>
<svg width="100%" height="100%" viewBox="0 0 300 150">
{/* 坐标轴 */}
<line x1="20" y1="130" x2="280" y2="130" stroke="#ddd" strokeWidth="1"/>
<line x1="20" y1="20" x2="20" y2="130" stroke="#ddd" strokeWidth="1"/>
{/* 曲线 */}
<path
d="M 30 100 Q 80 60 130 80 T 230 50 T 280 70"
stroke="#1269FF"
strokeWidth="2"
fill="none"
/>
{/* 数据点 */}
<circle cx="30" cy="100" r="3" fill="#1269FF"/>
<circle cx="80" cy="60" r="3" fill="#1269FF"/>
<circle cx="130" cy="80" r="3" fill="#1269FF"/>
<circle cx="180" cy="50" r="3" fill="#1269FF"/>
<circle cx="230" cy="50" r="3" fill="#1269FF"/>
<circle cx="280" cy="70" r="3" fill="#1269FF"/>
{/* 网格线 */}
<line x1="50" y1="20" x2="50" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
<line x1="100" y1="20" x2="100" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
<line x1="150" y1="20" x2="150" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
<line x1="200" y1="20" x2="200" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
<line x1="250" y1="20" x2="250" y2="130" stroke="#f0f0f0" strokeWidth="1"/>
</svg>
</div>
</div>
<div className={styles.middleBlock2}>
<p>第二个小块内容</p>
</div>
</div>
</div>
{/* 第三个div - 占满剩余位置 */}
<div className={styles.RcontainerBottom}>
<div className={styles.sectionContent}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>风险控制措施</div>
</div>
<div className={styles.contentArea}>
<p>这里是第三个区域的内容，占满剩余位置</p>
</div>
</div>
</div>
</div>
);
};
export default RiskAssessment;

234
src/pages/safe_majorHazard/module/RiskAssessment.less
Unescape Escape View File

@ -0,0 +1,234 @@
.Rcontainer {
padding: 8px 6px 0px 6px;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
// 第一个div - 高度20%
.RcontainerTop {
height: 16%;
// background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
flex-direction: column;
// padding: 15px;
.blocksContainer {
flex: 1;
display: flex;
gap: 10px;
height: 100%;
.blockItem {
flex: 1;
height: 100%;
display: flex;
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
border-radius: 4px;
border: 2px solid #FFFFFF;
.blockLeft {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
padding-left: 20px;
gap: 8px;
.blockTitle {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #666666;
line-height: 1.2;
}
.blockNumber {
font-family: PingFang SC;
font-weight: 700;
font-size: 24px;
color: #333333;
line-height: 1.2;
}
.blockChange {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #1269FF;
line-height: 1.2;
display: flex;
align-items: center;
gap: 4px;
.arrow {
font-size: 14px;
font-weight: bold;
}
.checkIcon {
font-size: 16px;
color: #1269FF;
}
}
}
.blockRight {
flex: 1;
height: 100%;
background-color: transparent;
border-radius: 0 4px 4px 0;
display: flex;
align-items: center;
justify-content: center;
.blockImage {
// width: 80%;
height: 130%;
// height: 80%;
object-fit: contain;
margin-right: -10px;
}
}
}
}
}
}
// 第二个div - 高度30%
.RcontainerMiddle {
height: 30%;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
display: flex;
gap: 10px;
height: 100%;
.middleBlock1 {
flex: 1;
height: 100%;
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
border: 2px solid #fff;
border-radius: 4px;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.block1Select {
width: 120px;
}
}
.block1Chart {
width: 100%;
height: 100%;
margin-top: 20px;
}
}
.middleBlock2 {
flex: 1;
height: 100%;
background-color: pink;
border: 2px solid #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
}
}
}
// 第三个div - 占满剩余位置
.RcontainerBottom {
flex: 1; // 占满剩余空间
background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
flex-direction: column;
padding: 15px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
color: #333333;
margin-bottom: 10px;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.contentArea {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-size: 14px;
color: #666666;
}
}
}
}
Write Preview
Loading…
Cancel
Save