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

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

Write Preview
Loading…
Cancel
Save