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

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

@ -297,99 +297,52 @@ const EvaluationReport = () => {
}, 100);
const option = {
color: ['#8979FF', '#3CC3DF'],
color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'],
legend: {
top: "-3px",
itemWidth: 20,
itemHeight: 8,
orient: 'vertical',
right: '2%',
top: 'middle',
itemWidth: 14,
itemHeight: 5,
textStyle: {
fontSize: 10
fontSize: 10,
color: '#666'
}
},
grid: {
left: '2%',
right: '4%',
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
}
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{d}%'
},
series: [
{
name: '消防水泵1',
type: 'line',
smooth: false,
lineStyle: {
width: 2,
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,
name: '设备类型占比',
type: 'pie',
radius: '70%',
center: ['40%', '55%'],
avoidLabelOverlap: false,
itemStyle: {
color: '#fff',
borderColor: '#8979FF',
borderRadius: 0,
borderColor: '#fff',
borderWidth: 1
},
data: [12, 15, 18, 14, 16, 20, 22, 19, 17, 21, 23, 25]
},
{
name: '消防水泵2',
type: 'line',
smooth: false,
lineStyle: {
width: 2,
color: '#3CC3DF'
label: {
show: false,
position: 'center'
},
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)' }
]
emphasis: {
label: {
show: false
}
},
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fff',
borderColor: '#3CC3DF',
borderWidth: 1
labelLine: {
show: false
},
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>设备类型占比</div>
</div>
<div className={styles.titleRight}>
</div>
</div>
<div className={styles.middleBlock2Chart} ref={chartRef}>
</div>
@ -794,48 +745,20 @@ const EvaluationReport = () => {
<div className={styles.EcontainerBottom}>
<div className={styles.sectionContent}>
<div className={styles.leftBlock}>
{/* 第一行块 - 蓝色方块加标题 */}
<div className={styles.leftBlockTitle}>
<div className={styles.titleIcon}></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 className={styles.maintenanceStack}>
<div className={styles.maintenanceSection}>
<div className={styles.maintenanceTitle}>
<div className={styles.titleIcon}></div>
<div>近期维护提醒</div>
</div>
<div className={styles.maintenanceContent}></div>
</div>
<div className={styles.developmentBlock1}>
<div className={styles.leftContent}>
<div className={styles.mainText}>烟雾探测器电池低电量</div>
<div className={styles.subText}>1号楼5层 丨 1小时前</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 className={styles.maintenanceSection}>
<div className={styles.maintenanceTitle}>
<div className={styles.titleIcon}></div>
<div>维护任务进度</div>
</div>
<div className={styles.maintenanceContent}></div>
</div>
</div>
</div>

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

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