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 { Card, Result } from 'antd';
import React, { useEffect, useRef } from 'react';
import { Card, Result, Select } from 'antd';
import * as echarts from 'echarts';
import styles from './OnlineMonitoring.less';
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 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 (
<div className={styles.Econtainer}>
<div className={styles.EcontainerTop}>
<div className={styles.EcontainerTopLeft}>
<div className={styles.EcontainerTopLeftTop}>
<div className={styles.Ocontainer}>
<div className={styles.OcontainerTop}>
<div className={styles.OcontainerTopLeft}>
<div className={styles.OcontainerTopLeftTop}>
<div className={styles.alarmO}>
<div className={styles.alarmOLeft}>
<img style={{ width: 58, height: 47 }} src={alarm0} alt='alarm0' />
@ -85,11 +184,33 @@ const OnlineMonitoring = () => {
</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 className={styles.EcontainerRight}></div>
<div className={styles.OcontainerRight}></div>
</div>
<div className={styles.EcontainerBottom}></div>
<div className={styles.OcontainerBottom}></div>
</div>
);
};

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

@ -1,21 +1,22 @@
.Econtainer {
.Ocontainer {
padding: 8px 6px;
height: 100%;
display: flex;
flex-direction: column;
.EcontainerTop {
.OcontainerTop {
display: flex;
gap: 12px;
height: 50%;
margin-bottom: 5px;
.EcontainerTopLeft {
// background-color: #999;
.OcontainerTopLeft {
width: 72%;
height: 100%;
margin-right: 10px;
// display: flex;
.EcontainerTopLeftTop {
.OcontainerTopLeftTop {
width: 100%;
height: 35%;
display: flex;
@ -46,7 +47,7 @@
display: flex;
flex-direction: column;
margin-left: 2px;
gap:18px;
gap: 18px;
font-family: PingFang SC;
font-weight: 400;
@ -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;
}
}
.titleRight {
display: flex;
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;
}
}
}
}
.EcontainerLeftBottom {
background-color: #999;
width: 42%;
.OcontainerTopLeftBottomChart {
flex: 1;
// padding: 15px;
width: 100%;
// height: 100%;
height: 75%;
}
}
}
}
.EcontainerBottom {
.OcontainerBottom {
background-color: #666;
flex: 1;
}

Write Preview
Loading…
Cancel
Save