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

图表

Browse Source
main
wangyunfei 1 month ago
parent 82b1d1d7bf
commit 2b91701228
2 changed files with 210 additions and 23 deletions
Show Stats Download Patch File Download Diff File

139
src/pages/safe_majorHazard/module/OnlineMonitoring.js
Unescape Escape View File

@ -1,6 +1,7 @@
import React from 'react'; import React, { useEffect, useRef } from 'react';
import { Card, Result } from 'antd'; import { Card, Result, Select } from 'antd';
import * as echarts from 'echarts';
import styles from './OnlineMonitoring.less'; import styles from './OnlineMonitoring.less';
import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png'; import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
@ -11,11 +12,109 @@ import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
const OnlineMonitoring = () => { const OnlineMonitoring = () => {
const chartRef = useRef(null);
useEffect(() => {
if (chartRef.current) {
const chart = echarts.init(chartRef.current);
const option = {
color: ['#04A7F3', '#E7C42C', '#EC6941'],
title: {
// text: '实时监测数据',
left: 'center',
// textStyle: {
// fontSize: 14,
// color: '#333'
// }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['液位', '温度', '压力'],
top: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '0%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
},
yAxis: {
type: 'value',
min: 0,
max: 900,
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: '液位',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#04A7F3'
},
data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
},
{
name: '温度',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#E7C42C'
},
data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
},
{
name: '压力',
type: 'line',
smooth: true,
lineStyle: {
width: 1.5,
color: '#EC6941'
},
data: [200, 300, 250, 450, 400, 600, 550, 420, 480, 280, 320, 260, 240]
}
]
};
chart.setOption(option);
// 响应式调整
const handleResize = () => {
chart.resize();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
chart.dispose();
};
}
}, []);
return ( return (
<div className={styles.Econtainer}> <div className={styles.Ocontainer}>
<div className={styles.EcontainerTop}> <div className={styles.OcontainerTop}>
<div className={styles.EcontainerTopLeft}> <div className={styles.OcontainerTopLeft}>
<div className={styles.EcontainerTopLeftTop}> <div className={styles.OcontainerTopLeftTop}>
<div className={styles.alarmO}> <div className={styles.alarmO}>
<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' />
@ -85,11 +184,33 @@ const OnlineMonitoring = () => {
</div> </div>
</div> </div>
</div> </div>
<div className={styles.EcontainerLeftBottom}></div> <div className={styles.OcontainerTopLeftBottom}>
<div className={styles.OcontainerTopLeftBottomTitle}>
<div className={styles.titleLeft}>
<div className={styles.titleIcon}></div>
<div>预警看板</div>
</div>
<div className={styles.titleRight}>
<div>检测对象</div>
<Select
style={{ width: 80 }}
defaultValue="储罐"
options={[
{ value: '储罐', label: '储罐' },
{ value: '管道', label: '管道' },
{ value: '设备', label: '设备' }
]}
/>
</div>
</div>
<div className={styles.OcontainerTopLeftBottomChart} ref={chartRef}>
</div>
</div>
</div> </div>
<div className={styles.EcontainerRight}></div> <div className={styles.OcontainerRight}></div>
</div> </div>
<div className={styles.EcontainerBottom}></div> <div className={styles.OcontainerBottom}></div>
</div> </div>
); );
}; };

84
src/pages/safe_majorHazard/module/OnlineMonitoring.less
Unescape Escape View File

@ -1,21 +1,22 @@
.Econtainer { .Ocontainer {
padding: 8px 6px; padding: 8px 6px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.EcontainerTop { .OcontainerTop {
display: flex; display: flex;
gap: 12px; gap: 12px;
height: 50%; height: 50%;
margin-bottom: 5px; margin-bottom: 5px;
.EcontainerTopLeft { .OcontainerTopLeft {
// background-color: #999;
width: 72%; width: 72%;
height: 100%;
margin-right: 10px; margin-right: 10px;
// display: flex;
.EcontainerTopLeftTop { .OcontainerTopLeftTop {
width: 100%; width: 100%;
height: 35%; height: 35%;
display: flex; display: flex;
@ -230,15 +231,80 @@
} }
} }
} }
.OcontainerTopLeftBottom {
margin-top: 12px;
background-color: #fff;
width: 100%;
height: 60%;
.OcontainerTopLeftBottomTitle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
} }
.EcontainerLeftBottom { .titleRight {
background-color: #999; display: flex;
width: 42%; align-items: center;
gap: 8px;
font-family: PingFang SC;
font-style: Medium;
font-size: 13px;
line-height: 100%;
letter-spacing: 0%;
.selectBox {
padding: 4px 8px;
border: 1px solid #d9d9d9;
border-radius: 4px;
background-color: #fff;
font-size: 12px;
color: #333;
outline: none;
&:focus {
border-color: #2E4CD4;
}
}
} }
} }
.EcontainerBottom { .OcontainerTopLeftBottomChart {
flex: 1;
// padding: 15px;
width: 100%;
// height: 100%;
height: 75%;
}
}
}
}
.OcontainerBottom {
background-color: #666; background-color: #666;
flex: 1; flex: 1;
} }

Write Preview
Loading…
Cancel
Save