mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 流量

Browse Source
This commit is contained in:
lb 2023-07-02 16:06:38 +08:00
parent c7abdb4c03
commit 4aaa12b630
2 changed files with 180 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/BottomBar/gasi/index.jsx
View File

@ -1,12 +1,97 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomBarItem';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { randomInt } from '../../../utils';
function GasI(props) {
const options = {
color: ['#12FFF5', '#2760FF', '#FFD160'],
grid: { top: 32, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp,
).getDate()}`;
})
.reverse(),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位/m³',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value} %',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
interval: 10,
min: 0,
max: 100,
},
series: [
{
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(60, 100);
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#12FFF540' },
{ offset: 0.5, color: '#12FFF520' },
{ offset: 1, color: '#12FFF510' },
]),
},
// smooth: true,
},
],
tooltip: {
trigger: 'axis',
},
};
return (
<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
{/* 当前流量 */}
<div className={cls.currentFlow}>当前流量: 280m³</div>
<div className={cls.chart}>
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</BottomBarItem>
);
}

97
src/components/BottomBar/gasii/index.jsx
View File

@ -1,11 +1,104 @@
import cls from './index.module.css';
import BottomBarItem from '../BottomBarItem';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { randomInt } from '../../../utils';
function GasII(props) {
const options = {
color: ['#12FFF5', '#2760FF', '#FFD160'],
grid: { top: 38, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp,
).getDate()}`;
})
.reverse(),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位m³/h',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
// interval: 10,
// min: 0,
// max: 100,
},
series: [
{
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(1000, 2000);
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#12FFF540' },
{ offset: 0.5, color: '#12FFF520' },
{ offset: 1, color: '#12FFF510' },
]),
},
// smooth: true,
},
{
data: Array(7)
.fill(1)
.map((_) => {
return randomInt(1000, 2000);
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2760FF40' },
{ offset: 0.5, color: '#2760FF20' },
{ offset: 1, color: '#2760FF10' },
]),
},
// smooth: true,
},
],
tooltip: {
trigger: 'axis',
},
};
return (
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
{/* 当前流量 */}
@ -24,7 +117,7 @@ function GasII(props) {
</div>
<div className={cls.chart}>
{/* <ReactECharts option={options} style={{ height: '100%' }} /> */}
<ReactECharts option={options} style={{ height: '100%' }} />
</div>
</BottomBarItem>
);