update 烟气
This commit is contained in:
parent
60616fcb0e
commit
bc7ddff321
@ -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 (
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
|
@ -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/m³</div>
|
||||
<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div>
|
||||
<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</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/m³</div>
|
||||
<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div>
|
||||
<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</div>
|
||||
</div>
|
||||
|
||||
<TechSplitline />
|
||||
|
||||
<SmokeTrendChart />
|
||||
</div>
|
||||
|
||||
<TechSplitline />
|
||||
|
||||
<SmokeTrendChart />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -5,6 +5,5 @@
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 600px;
|
||||
background: #77777737;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user