update 烟气

This commit is contained in:
lb 2023-07-02 11:29:05 +08:00
parent 60616fcb0e
commit bc7ddff321
6 changed files with 70 additions and 20 deletions

View File

@ -5,6 +5,7 @@ import cls from './container.module.less';
import IconStack from '../assets/Icon/icon-stack.png';
import IconGood from '../assets/Icon/icon-good.png';
import IconCharger from '../assets/Icon/icon-charge.png';
import IconSmoke from '../assets/Icon/icon-taiji.png';
const Container = (props) => {
let icon = useRef(null);
@ -19,6 +20,9 @@ const Container = (props) => {
case 'charger':
icon.current = IconCharger;
break;
case 'smoke':
icon.current = IconSmoke;
break;
}
return (

View File

@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
const SmokeTrendChart = (props) => {
const options = {
color: ['#FFD160', '#12FFF5', '#2760FF'],
grid: { top: 28, right: 12, bottom: 32, left: 48 },
grid: { top: 38, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
@ -34,6 +34,12 @@ const SmokeTrendChart = (props) => {
},
},
yAxis: {
name: '单位m³/h',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
@ -72,6 +78,38 @@ const SmokeTrendChart = (props) => {
},
// smooth: true,
},
{
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,
},
{
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: '#2760FF40' },
{ offset: 0.5, color: '#2760FF20' },
{ offset: 1, color: '#2760FF10' },
]),
},
// smooth: true,
},
],
tooltip: {
trigger: 'axis',
@ -98,7 +136,7 @@ const SmokeTrendChart = (props) => {
</div>
</div>
<div className={cls.choiceBar}>
<div className={`${cls.choiceBar} flex items-center justify-between`}>
<Radio.Group
defaultValue="oxygen"
buttonStyle="solid"

View File

@ -1,11 +1,11 @@
.energyCostChart {
margin-top: 12px;
height: 1px;
flex: 1;
padding-top: 8px;
background: #ae27276a;
}
.energyCostChart .titleBar {
width: 400px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: center;
@ -65,6 +65,9 @@
background-color: #2760ff;
}
.choiceBar {
}
.radioGroup * {
border: none !important;
border-radius: 0 !important;

View File

@ -5,17 +5,19 @@ import SmokeTrendChart from './SmokeTrendChart';
function SmokeHandle(props) {
return (
<Container title="能耗" icon="charger" className={cls.energyCost}>
<div className={cls.info__item_groups}>
<div className={cls.info__item}> : 72%</div>
<div className={cls.info__item}>一氧化氮排放浓度:59mg/</div>
<div className={cls.info__item}>二氧化硫排放浓度:59mg/</div>
<div className={cls.info__item}>二氧化氮排放浓度:59mg/</div>
<Container title="烟气处理" icon="smoke" className={cls.smokeHandle}>
<div className={`${cls.smokeHandle__content} flex flex-col`}>
<div className={cls.info__item_groups}>
<div className={cls.info__item}> : 72%</div>
<div className={cls.info__item}>一氧化氮排放浓度:59mg/</div>
<div className={cls.info__item}>二氧化硫排放浓度:59mg/</div>
<div className={cls.info__item}>二氧化氮排放浓度:59mg/</div>
</div>
<TechSplitline />
<SmokeTrendChart />
</div>
<TechSplitline />
<SmokeTrendChart />
</Container>
);
}

View File

@ -1,9 +1,12 @@
.energyCost {
background: #b730305c;
}
.smokeHandle {
// background: #b730305c;
background: url(../../../assets/smoke.png) no-repeat;
background-size: 100% 100%;
width: 626px;
.cost__info {
margin-bottom: 12px;
.smokeHandle__content {
margin-top: 8px;
}
}
.info__item {
@ -20,6 +23,7 @@
}
.info__item_groups {
margin-bottom: 12px;
margin-left: 8px;
display: grid;
grid-template-columns: 1fr 1fr;

View File

@ -5,6 +5,5 @@
position: fixed;
top: 100px;
right: 600px;
background: #77777737;
z-index: 10000;
}