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

建筑消防

Browse Source
main
wangyunfei 3 weeks ago
parent 9e6c9bb009
commit 0cd11c363b
3 changed files with 914 additions and 485 deletions
Show Stats Download Patch File Download Diff File

864
src/pages/business_basic/module/EvaluationReport.js
View File

File diff suppressed because it is too large Load Diff

522
src/pages/business_basic/module/EvaluationReport.less
Unescape Escape View File

@ -5,9 +5,9 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
// 第一个大块 - 高度16% // 第二个div - 高度39%
.EcontainerTop { .EcontainerMiddle {
height: 16%; height: 33%;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -15,210 +15,460 @@
.sectionContent { .sectionContent {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; display: flex;
gap: 10px;
height: 100%;
.blocksContainer { .middleBlock1 {
flex: 1; // flex: 1;
display: flex; width: 28%;
gap: 10px;
height: 100%; height: 100%;
background: #fff;
.blockItem { border: 2px solid #fff;
flex: 1; // border-radius: 4px;
height: 100%; 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; display: flex;
background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%); justify-content: space-between;
border-radius: 4px; align-items: center;
border: 2px solid #FFFFFF; z-index: 10;
.blockLeft { .block1Title {
width: 60%;
height: 100%;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
padding: 15px;
padding-left: 20px;
gap: 8px; gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.blockTitle { .titleIcon {
font-family: PingFang SC; width: 3px;
font-weight: 400; height: 14px;
background-color: #2E4CD4;
}
}
.block1Segmented {
padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
:global(.ant-segmented) {
padding: 0;
margin: 0;
height: 28px;
}
:global(.ant-segmented-item) {
font-size: 12px; font-size: 12px;
color: #666666; padding: 2px 8px;
line-height: 1.2; height: 26px;
line-height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
:global(.ant-segmented-item-selected) {
background-color: #1890ff;
color: #fff;
}
}
}
.deviceStatusChart {
position: absolute;
top: 35px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 10;
}
}
.middleBlock12 {
flex: 1;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
position: relative;
.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;
} }
}
.block1Segmented {
padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
.blockNumber { :global(.ant-segmented) {
font-family: PingFang SC; padding: 0;
font-weight: 700; margin: 0;
font-size: 24px; height: 28px;
color: #333333;
line-height: 1.2;
} }
.blockChange { :global(.ant-segmented-item) {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px; font-size: 12px;
color: #1269FF; padding: 2px 8px;
line-height: 1.2; height: 26px;
line-height: 26px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; justify-content: center;
}
.arrow { :global(.ant-segmented-item-selected) {
font-size: 14px; background-color: #1890ff;
font-weight: bold; color: #fff;
} }
}
.checkIcon { .customSelect {
font-size: 16px; :global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
color: #1269FF; height: 26px !important;
} display: flex !important;
align-items: center !important;
}
:global(.ant-select-selection-item) {
line-height: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
} }
} }
}
.blockRight { .deviceStatusChart {
flex: 1; position: absolute;
height: 100%; top: 35px;
background-color: transparent; left: 10px;
border-radius: 0 4px 4px 0; right: 10px;
bottom: 10px;
z-index: 10;
}
}
.middleBlock2 {
flex: 1;
height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff;
background-color: #fff;
// border-radius: 4px;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
.middleBlock2Title {
display: flex;
justify-content: space-between;
align-items: center;
// margin-bottom: 10px;
.titleLeft {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.blockImage { .titleIcon {
height: 130%; width: 3px;
object-fit: contain; height: 14px;
margin-right: -10px; background-color: #2E4CD4;
} }
} }
.titleRight {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
}
}
.middleBlock2Chart {
width: 100%;
height: 100%;
// min-height: 200px;
} }
} }
} }
} }
// 第二个大块 - 三个图表块 // 第三个div - 高度不超过45%
.EcontainerMiddle { .EcontainerBottom {
height: 30%; height: 45%; // 限制高度不超过45%
border-radius: 4px; max-height: 45%; // 确保最大高度不超过45%
background-color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.sectionContent { .sectionContent {
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
padding: 10px; padding: 0;
.chartBlock { .leftBlock {
flex: 1; width: 28%;
flex-shrink: 0;
height: 100%; height: 100%;
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); background: #fff;
border: 2px solid #fff; // background-size: cover;
border-radius: 4px; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: PingFang SC; gap: 10px;
font-size: 14px; padding: 15px;
color: #333333;
.chartTitle { .leftBlockTitle {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
padding: 10px 15px 5px 15px; margin-bottom: 10px;
.titleIcon { .titleIcon {
width: 3px; width: 3px;
height: 14px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
} }
} }
.chartContainer { .developmentContainer {
flex: 1;
width: 100%; width: 100%;
height: 120%; height: 100%;
// // min-height: 200px; display: flex;
} flex-direction: column;
} gap: 8px;
}
}
// 第三大块 - 评估报告表格 .developmentBlock1 {
.EcontainerBottom { flex: 1;
flex: 1; background-color: #F1F7FF;
background-color: #fff; border-radius: 4px;
border-radius: 4px; padding: 15px 20px;
display: flex; display: flex;
flex-direction: column; align-items: center;
padding: 10px; width: 100%;
.tableHeader { .leftContent {
display: flex; flex: 1;
justify-content: space-between; display: flex;
align-items: center; flex-direction: column;
margin-bottom: 10px; gap: 8px;
min-width: 0;
.tableTitle { .mainText {
display: flex; color: #333333;
align-items: center; font-size: 14px;
gap: 8px; font-weight: 500;
font-weight: 500; font-family: PingFang SC;
font-size: 14px; width: 100%;
color: #333333; max-width: 500px;
}
.titleIcon { .subText {
width: 3px; color: #666666;
height: 14px; font-size: 12px;
background-color: #2E4CD4; font-weight: 400;
} font-family: PingFang SC;
} width: 100%;
} max-width: 400px;
}
}
.tableContainer { .rightContent {
flex: 1; flex: 0 0 auto;
overflow: hidden; display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
min-width: 80px;
:global(.ant-table-wrapper) { .importantTag {
height: 100%; 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;
}
:global(.ant-table) { .normalTag {
height: 100%; 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;
}
}
}
}
} }
:global(.ant-table-container) { .rightBlock {
width: calc(100% - 28% - 10px);
height: 100%; height: 100%;
} background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
:global(.ant-table-body) { .tableHeader {
height: calc(100% - 55px); // 减去表头高度 display: flex;
overflow-y: auto; justify-content: space-between;
} align-items: center;
padding: 8px 15px 5px 15px;
:global(.ant-table-tbody > tr > td) { .tableTitle {
padding: 8px 16px; display: flex;
font-size: 12px; align-items: center;
} gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
:global(.ant-table-thead > tr > th) { .titleIcon {
padding: 8px 16px; width: 3px;
font-size: 12px; height: 16px;
font-weight: 500; background-color: #2E4CD4;
background-color: #fafafa; }
} }
.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-pagination) { :global(.ant-table) {
margin-top: 10px; font-size: 12px;
text-align: right; }
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
} }
} }
} }

1
src/pages/business_basic/module/OnlineMonitoring.js
Unescape Escape View File

@ -487,6 +487,7 @@ const OnlineMonitoring = () => {
<div className={styles.alarmOLeft}> <div className={styles.alarmOLeft}>
<img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' /> <img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
</div> </div>
<div className={styles.alarmORight}> <div className={styles.alarmORight}>
<div className={styles.alarmORightText1}>总报警</div> <div className={styles.alarmORightText1}>总报警</div>
<div className={styles.alarmORightText2}>1456</div> <div className={styles.alarmORightText2}>1456</div>

Write Preview
Loading…
Cancel
Save