diff --git a/src/components/Container.jsx b/src/components/Container.jsx index 4788185..c48d12c 100644 --- a/src/components/Container.jsx +++ b/src/components/Container.jsx @@ -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 ( diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx index 9fc928e..b2f3e98 100644 --- a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx +++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx @@ -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) => { -
+
-
-
氧 气 含 量 : 72%
-
一氧化氮排放浓度:59mg/m³
-
二氧化硫排放浓度:59mg/m³
-
二氧化氮排放浓度:59mg/m³
+ +
+
+
氧 气 含 量 : 72%
+
一氧化氮排放浓度:59mg/m³
+
二氧化硫排放浓度:59mg/m³
+
二氧化氮排放浓度:59mg/m³
+
+ + + +
- - - -
); } diff --git a/src/components/RightBar/SmokeHandle/index.module.less b/src/components/RightBar/SmokeHandle/index.module.less index c2172cc..589b265 100644 --- a/src/components/RightBar/SmokeHandle/index.module.less +++ b/src/components/RightBar/SmokeHandle/index.module.less @@ -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; diff --git a/src/components/RightBar/index.module.less b/src/components/RightBar/index.module.less index e05cf55..f232c5a 100644 --- a/src/components/RightBar/index.module.less +++ b/src/components/RightBar/index.module.less @@ -5,6 +5,5 @@ position: fixed; top: 100px; right: 600px; - background: #77777737; z-index: 10000; }