@@ -687,7 +722,7 @@ const RiskAssessment = () => {
-
+
@@ -710,7 +745,7 @@ const RiskAssessment = () => {
设备运行参数
-
+
- {/* 第三个div - 占满剩余位置 */}
-
-
-
- {/* 第一行块 - 蓝色方块加标题 */}
-
-
- {/* 第二行块 - 图片 */}
-
- {/*

*/}
-
-
- {/* 第三行块 */}
-
-
- {/* 第四行块 */}
-
-
- {/* 第五行块 */}
-
-
-
-
- {/* 表格 */}
-
-
- {/* 表格 */}
-
-
- `共 ${total} 条`,
- }}
- scroll={{ x: 1200 }}
- />
-
-
-
-
+ {/* 第三个div - 占满剩余位置 */}
+
+
+
+ {/* 第一行块 - 蓝色方块加标题 */}
+
+
+
+
+
+
灭火器压力不足
+
2号楼3层 丨 15分钟前
+
+
+
+
+
+
烟雾探测器电池低电量
+
1号楼5层 丨 1小时前
+
+
+
+
+
+
消防栓维护到期
+
3号楼1层 丨 2小时前
+
+
+
+
+
+
应急照明故障
+
地下停车场 丨 3小时前
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ // scroll={{ x: 1200 }}
+ />
+
+
- );
-};
+
+
+ );
+};
export default RiskAssessment;
\ No newline at end of file
diff --git a/src/pages/business_basic/module/RiskAssessment.less b/src/pages/business_basic/module/RiskAssessment.less
index 71f0328..5932c50 100644
--- a/src/pages/business_basic/module/RiskAssessment.less
+++ b/src/pages/business_basic/module/RiskAssessment.less
@@ -103,9 +103,9 @@
}
}
- // 第二个div - 高度30%
+ // 第二个div - 高度39%
.RcontainerMiddle {
- height: 35%;
+ height: 33%;
border-radius: 4px;
display: flex;
flex-direction: column;
@@ -123,10 +123,10 @@
// flex: 1;
width: 28%;
height: 100%;
- background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
+ background: #fff;
border: 2px solid #fff;
- border-radius: 4px;
+ // border-radius: 4px;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
@@ -361,9 +361,10 @@
}
}
- // 第三个div - 占满剩余位置
+ // 第三个div - 高度不超过45%
.RcontainerBottom {
- flex: 1; // 占满剩余空间
+ height: 45%; // 限制高度不超过45%
+ max-height: 45%; // 确保最大高度不超过45%
display: flex;
flex-direction: column;
@@ -374,10 +375,11 @@
padding: 0;
.leftBlock {
- width: 30%;
+ width: 28%;
+ flex-shrink: 0;
height: 100%;
- background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center;
- background-size: cover;
+ background: #fff;
+ // background-size: cover;
padding: 0;
display: flex;
flex-direction: column;
@@ -392,6 +394,7 @@
font-weight: 500;
font-size: 14px;
color: #333333;
+ margin-bottom: 10px;
.titleIcon {
width: 3px;
@@ -400,43 +403,91 @@
}
}
- .leftBlockImage {
- height: 40%;
+ .developmentContainer {
width: 100%;
- border-radius: 4px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 80%;
- }
-
- .leftBlockItem {
- flex: 1;
+ height: 100%;
display: flex;
flex-direction: column;
- justify-content: center;
- padding: 10px;
- // background-color: #f5f5f5;
- border-radius: 4px;
- font-family: PingFang SC;
-
- .itemTitle {
- font-size: 12px;
- color: #666666;
- margin-bottom: 5px;
- }
+ gap: 8px;
- .itemValue {
- font-size: 14px;
- color: #333333;
- font-weight: 500;
- }
+ .developmentBlock1 {
+ flex: 1;
+ background-color: #F1F7FF;
+ border-radius: 4px;
+ padding: 15px 20px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+
+ .leftContent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ min-width: 0;
+
+ .mainText {
+ color: #333333;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: PingFang SC;
+ width: 100%;
+ max-width: 500px;
+ }
+
+ .subText {
+ color: #666666;
+ font-size: 12px;
+ font-weight: 400;
+ font-family: PingFang SC;
+ width: 100%;
+ max-width: 400px;
+ }
+ }
+
+ .rightContent {
+ flex: 0 0 auto;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding-right: 10px;
+ min-width: 80px;
+
+ .importantTag {
+ background-color: #FFE0E2;
+ color: #FF3E48;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: PingFang SC;
+ width: 45px;
+ height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ }
+
+ .normalTag {
+ background-color: #DAF3FF;
+ color: #00AAFA;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: PingFang SC;
+ width: 45px;
+ height: 25px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ }
+ }
+ }
}
}
.rightBlock {
- width: 68%;
+ width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
@@ -464,11 +515,48 @@
background-color: #2E4CD4;
}
}
+
+ .tableActions {
+ display: flex;
+ gap: 8px;
+ margin-top: 5px;
+
+ .actionButton {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ height: 28px;
+ border: 1px solid #DFE4F6;
+ border-radius: 4px;
+ color: #2E4CD4;
+ font-weight: 500;
+ font-size: 12px;
+ padding: 0px 8px;
+ background: transparent;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: #f0f2ff;
+ border-color: #2E4CD4;
+ }
+
+ &:active {
+ background-color: #e6ebff;
+ }
+
+ .buttonIcon {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ }
+ }
}
.tableContainer {
flex: 1;
overflow: hidden;
+ margin: 10px 15px 0 15px; // 上边距10px,左右边距15px
:global(.ant-table) {
font-size: 12px;