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

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

File diff suppressed because it is too large Load Diff

442
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,211 +15,461 @@
.sectionContent { .sectionContent {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
.blocksContainer {
flex: 1;
display: flex; display: flex;
gap: 10px; gap: 10px;
height: 100%; height: 100%;
.blockItem { .middleBlock1 {
flex: 1; // flex: 1;
width: 28%;
height: 100%; height: 100%;
background: #fff;
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; 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;
}
}
} }
.blockNumber { .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-family: PingFang SC;
font-weight: 700; font-size: 14px;
font-size: 24px; 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; color: #333333;
line-height: 1.2;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
} }
.blockChange { .block1Segmented {
font-family: PingFang SC; padding: 0;
font-weight: 400; 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: #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;
}
}
.customSelect {
:global(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
height: 26px !important;
display: flex !important;
align-items: center !important;
} }
.checkIcon { :global(.ant-select-selection-item) {
font-size: 16px; line-height: 24px !important;
color: #1269FF; height: 24px !important;
display: flex !important;
align-items: center !important;
} }
} }
} }
.blockRight { .deviceStatusChart {
position: absolute;
top: 35px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 10;
}
}
.middleBlock2 {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: transparent; // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
border-radius: 0 4px 4px 0; // 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; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; // margin-bottom: 10px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.blockImage { .titleRight {
height: 130%; display: flex;
object-fit: contain; align-items: center;
margin-right: -10px; 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 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
.developmentBlock1 {
flex: 1; flex: 1;
background-color: #F1F7FF;
border-radius: 4px;
padding: 15px 20px;
display: flex;
align-items: center;
width: 100%; width: 100%;
height: 120%;
// // min-height: 200px; .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 {
.EcontainerBottom { background-color: #DAF3FF;
flex: 1; color: #00AAFA;
background-color: #fff; 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; border-radius: 4px;
}
}
}
}
}
.rightBlock {
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px;
.tableHeader { .tableHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; padding: 8px 15px 5px 15px;
.tableTitle { .tableTitle {
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;
.titleIcon { .titleIcon {
width: 3px; width: 3px;
height: 14px; height: 16px;
background-color: #2E4CD4; background-color: #2E4CD4;
} }
} }
}
.tableContainer { .tableActions {
flex: 1; display: flex;
overflow: hidden; gap: 8px;
margin-top: 5px;
:global(.ant-table-wrapper) { .actionButton {
height: 100%; 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;
:global(.ant-table) { &:hover {
height: 100%; background-color: #f0f2ff;
border-color: #2E4CD4;
} }
:global(.ant-table-container) { &:active {
height: 100%; background-color: #e6ebff;
} }
:global(.ant-table-body) { .buttonIcon {
height: calc(100% - 55px); // 减去表头高度 font-size: 14px;
overflow-y: auto; font-weight: bold;
}
}
}
} }
:global(.ant-table-tbody > tr > td) { .tableContainer {
padding: 8px 16px; flex: 1;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，左右边距15px
:global(.ant-table) {
font-size: 12px; font-size: 12px;
} }
:global(.ant-table-thead > tr > th) { :global(.ant-table-thead > tr > th) {
padding: 8px 16px; background-color: #f5f5fa;
font-size: 12px;
font-weight: 500; font-weight: 500;
background-color: #fafafa; 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) { :global(.ant-pagination) {
margin-top: 10px; margin-top: 16px;
text-align: right; 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