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

建筑页面

Browse Source
main
wangyunfei 3 weeks ago
parent d6676fcbdf
commit 90a1992550
2 changed files with 92 additions and 216 deletions
Show Stats Download Patch File Download Diff File

161
src/pages/business_basic/module/EvaluationReport.js
Unescape Escape View File

@ -297,99 +297,52 @@ const EvaluationReport = () => {
}, 100); }, 100);
const option = { const option = {
color: ['#8979FF', '#3CC3DF'], color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'],
legend: { legend: {
top: "-3px", orient: 'vertical',
itemWidth: 20, right: '2%',
itemHeight: 8, top: 'middle',
itemWidth: 14,
itemHeight: 5,
textStyle: { textStyle: {
fontSize: 10 fontSize: 10,
color: '#666'
} }
}, },
grid: { tooltip: {
left: '2%', trigger: 'item',
right: '4%', formatter: '{b}<br/>{d}%'
bottom: '2%',
top: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
min: 0,
max: 30,
axisLabel: {
formatter: '{value}',
fontSize: 10
}
}, },
series: [ series: [
{ {
name: '消防水泵1', name: '设备类型占比',
type: 'line', type: 'pie',
smooth: false, radius: '70%',
lineStyle: { center: ['40%', '55%'],
width: 2, avoidLabelOverlap: false,
color: '#8979FF'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(137, 121, 255, 0.3)' },
{ offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
]
}
},
symbol: 'circle',
symbolSize: 4,
itemStyle: { itemStyle: {
color: '#fff', borderRadius: 0,
borderColor: '#8979FF', borderColor: '#fff',
borderWidth: 1 borderWidth: 1
}, },
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25] label: {
show: false,
position: 'center'
}, },
{ emphasis: {
name: '消防水泵2', label: {
type: 'line', show: false
smooth: false,
lineStyle: {
width: 2,
color: '#3CC3DF'
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
{ offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
]
} }
}, },
symbol: 'circle', labelLine: {
symbolSize: 4, show: false
itemStyle: {
color: '#fff',
borderColor: '#3CC3DF',
borderWidth: 1
}, },
data: [8, 11, 14, 10, 13, 17, 19, 16, 14, 18, 20, 22] data: [
{ value: 25, name: '灭火器' },
{ value: 30, name: '消防栓' },
{ value: 20, name: '报警器' },
{ value: 25, name: '烟雾探测器' }
]
} }
] ]
}; };
@ -781,8 +734,6 @@ const EvaluationReport = () => {
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>设备类型占比</div> <div>设备类型占比</div>
</div> </div>
<div className={styles.titleRight}>
</div>
</div> </div>
<div className={styles.middleBlock2Chart} ref={chartRef}> <div className={styles.middleBlock2Chart} ref={chartRef}>
</div> </div>
@ -794,48 +745,20 @@ const EvaluationReport = () => {
<div className={styles.EcontainerBottom}> <div className={styles.EcontainerBottom}>
<div className={styles.sectionContent}> <div className={styles.sectionContent}>
<div className={styles.leftBlock}> <div className={styles.leftBlock}>
{/* 第一行块 - 蓝色方块加标题 */} <div className={styles.maintenanceStack}>
<div className={styles.leftBlockTitle}> <div className={styles.maintenanceSection}>
<div className={styles.maintenanceTitle}>
<div className={styles.titleIcon}></div> <div className={styles.titleIcon}></div>
<div>预警信息</div> <div>近期维护提醒</div>
</div>
<div className={styles.developmentContainer}>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>灭火器压力不足</div>
<div className={styles.subText}>2号楼3层 丨 15分钟前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div> </div>
<div className={styles.maintenanceContent}></div>
</div> </div>
<div className={styles.developmentBlock1}> <div className={styles.maintenanceSection}>
<div className={styles.leftContent}> <div className={styles.maintenanceTitle}>
<div className={styles.mainText}>烟雾探测器电池低电量</div> <div className={styles.titleIcon}></div>
<div className={styles.subText}>1号楼5层 丨 1小时前</div> <div>维护任务进度</div>
</div>
<div className={styles.rightContent}>
<div className={styles.importantTag}>重要</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>消防栓维护到期</div>
<div className={styles.subText}>3号楼1层 丨 2小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>应急照明故障</div>
<div className={styles.subText}>地下停车场 丨 3小时前</div>
</div>
<div className={styles.rightContent}>
<div className={styles.normalTag}>一般</div>
</div> </div>
<div className={styles.maintenanceContent}></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -20,13 +20,10 @@
height: 100%; height: 100%;
.middleBlock1 { .middleBlock1 {
// flex: 1; width: 30%;
width: calc((100% - 42% - 10px) / 2);
height: 100%; height: 100%;
background: #fff; background: #fff;
border: 2px solid #fff; border: 2px solid #fff;
// border-radius: 4px;
position: relative; position: relative;
padding: 0px 10px 10px 2px; padding: 0px 10px 10px 2px;
font-family: PingFang SC; font-family: PingFang SC;
@ -49,6 +46,7 @@
gap: 8px; gap: 8px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
margin-top: 5px;
color: #333333; color: #333333;
.titleIcon { .titleIcon {
@ -98,6 +96,7 @@
gap: 8px; gap: 8px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
margin-top: 5px;
color: #333333; color: #333333;
.titleIcon { .titleIcon {
@ -120,7 +119,7 @@
} }
.middleBlock12 { .middleBlock12 {
width: 42%; width: 45%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
@ -169,7 +168,8 @@
} }
.middleBlock2 { .middleBlock2 {
width: calc((100% - 42% - 15px) / 2); // flex: 1;
width: calc(100% - 75% - 15px);
height: 100%; height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff; // border: 2px solid #fff;
@ -186,7 +186,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
// margin-bottom: 10px; margin-top: 5px;
.titleLeft { .titleLeft {
display: flex; display: flex;
@ -203,13 +203,6 @@
} }
} }
.titleRight {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
}
} }
.middleBlock2Chart { .middleBlock2Chart {
@ -223,28 +216,30 @@
// 第三个div - 高度不超过45% // 第三个div - 高度不超过45%
.EcontainerBottom { .EcontainerBottom {
height: 45%; // 限制高度不超过45% // height: 45%; // 限制高度不超过45%
max-height: 45%; // 确保最大高度不超过45% // max-height: 45%; // 确保最大高度不超过45%
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
.sectionContent { .sectionContent {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1;
gap: 10px; gap: 10px;
padding: 0; padding: 0;
.leftBlock { .leftBlock {
width: 28%; width: 30%;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
background: #fff; // background: #fff;
// background-size: cover; // background-size: cover;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
padding: 15px; // padding: 15px;
.leftBlockTitle { .leftBlockTitle {
display: flex; display: flex;
@ -263,84 +258,42 @@
} }
} }
.developmentContainer { .maintenanceStack {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 10px;
.developmentBlock1 { .maintenanceSection {
flex: 1;
background-color: #F1F7FF;
border-radius: 4px;
padding: 15px 20px;
display: flex;
align-items: center;
width: 100%; width: 100%;
height: 50%;
.leftContent { background: #FFF;
flex: 1; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; padding: 12px 14px;
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 { .maintenanceTitle {
flex: 0 0 auto;
display: flex; display: flex;
justify-content: flex-end;
align-items: center; align-items: center;
padding-right: 10px; gap: 8px;
min-width: 80px;
.importantTag {
background-color: #FFE0E2;
color: #FF3E48;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC; 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-weight: 500;
font-family: PingFang SC; font-size: 14px;
width: 45px; color: #333333;
height: 25px; margin-bottom: 8px;
}
display: flex; .titleIcon {
align-items: center; width: 3px;
justify-content: center; height: 16px;
border-radius: 4px; background-color: #2E4CD4;
} }
.maintenanceContent {
flex: 1;
width: 100%;
} }
} }
} }

Write Preview
Loading…
Cancel
Save