This commit is contained in:
gtz 2023-09-13 12:42:08 +08:00
parent cacfdf53c2
commit e909784dee
8 changed files with 50 additions and 33 deletions

View File

@ -34,12 +34,29 @@ function GasI(props) {
: Array(8) : Array(8)
.fill(1) .fill(1)
.map((_) => Array(7).fill(0)); .map((_) => Array(7).fill(0));
seriesData.unshift(hisState?.wind['FE_totalair'] || 1);
seriesData.splice(8, 1);
// debug // debug
// console.log(' chart series data', hisState?.wind, seriesData); // console.log(' chart series data', hisState?.wind, seriesData);
options = { options = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 48 },
legend: {
show: true,
icon: 'roundRect',
top: 10,
right: 10,
padding: 0,
itemWidth: 8,
itemHeight: 8,
itemGap: 3,
height: 8,
textStyle: {
color: '#DFF1FE',
fontSize: 10,
},
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Array(7) data: Array(7)
@ -66,7 +83,7 @@ function GasI(props) {
}, },
}, },
yAxis: { yAxis: {
name: '单位/m³', name: '单位/h',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -95,7 +112,7 @@ function GasI(props) {
// max: 100, // max: 100,
}, },
series: seriesData.map((v, i) => ({ series: seriesData.map((v, i) => ({
name: i ? i + 1 + '#助燃风' : '助燃风总流量', name: i ? i + '#助燃风' : '助燃风总流量',
data: v, data: v,
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',

View File

@ -56,7 +56,7 @@ export default function getOptions(seriesData, name) {
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: '单位Nm³/h',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,

View File

@ -7,14 +7,14 @@ function getData(type) {
switch (type) { switch (type) {
case 'gas-i': case 'gas-i':
data = [ data = [
{ id: 0, name: '天然气总流量', value: '0m³/h' }, { id: 0, name: '天然气总流量', value: '0Nm³/h' },
{ id: 1, name: '1#天然气', value: '0m³/h' }, { id: 1, name: '1#天然气', value: '0Nm³/h' },
{ id: 2, name: '2#天然气', value: '0m³/h' }, { id: 2, name: '2#天然气', value: '0Nm³/h' },
{ id: 3, name: '3#天然气', value: '0m³/h' }, { id: 3, name: '3#天然气', value: '0Nm³/h' },
{ id: 4, name: '4#天然气', value: '0m³/h' }, { id: 4, name: '4#天然气', value: '0Nm³/h' },
{ id: 5, name: '5#天然气', value: '0m³/h' }, { id: 5, name: '5#天然气', value: '0Nm³/h' },
{ id: 6, name: '6#天然气', value: '0m³/h' }, { id: 6, name: '6#天然气', value: '0Nm³/h' },
{ id: 7, name: '7#天然气', value: '0m³/h' }, { id: 7, name: '7#天然气', value: '0Nm³/h' },
]; ];
break; break;
case 'gas-ii': case 'gas-ii':

View File

@ -119,9 +119,9 @@ const GoodRateChart = (props) => {
<div className={cls.GoodRateChart}> <div className={cls.GoodRateChart}>
<div className={cls.titleBar}> <div className={cls.titleBar}>
<h2>生产良品率</h2> <h2>生产良品率</h2>
<Switch defaultChecked onChange={handleSwitchChange} /> {/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
<div className={cls.legend}> <div className={cls.legend}>
<span className="legend__title">班次详情</span> {/* <span className="legend__title">班次详情</span> */}
<ul className="legend__list"> <ul className="legend__list">
<li>总量</li> <li>总量</li>
<li>白班</li> <li>白班</li>

View File

@ -33,7 +33,7 @@ const EnergyCostChart = (props) => {
}, },
}, },
yAxis: { yAxis: {
name: '单位/', name: '单位/kWh',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -43,7 +43,7 @@ const EnergyCostChart = (props) => {
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 12,
formatter: '{value} %', formatter: '{value}',
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -92,9 +92,9 @@ const EnergyCostChart = (props) => {
<div className={cls.energyCostChart}> <div className={cls.energyCostChart}>
<div className={cls.titleBar}> <div className={cls.titleBar}>
<h2>能耗趋势图</h2> <h2>能耗趋势图</h2>
<Switch defaultChecked onChange={handleSwitchChange} /> {/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
<div className={cls.legend}> <div className={cls.legend}>
<span className="legend__title">班次详情</span> {/* <span className="legend__title">班次详情</span> */}
<ul className="legend__list"> <ul className="legend__list">
<li>总量</li> <li>总量</li>
</ul> </ul>
@ -102,23 +102,23 @@ const EnergyCostChart = (props) => {
</div> </div>
<div className={cls.radioGroupWrapper}> <div className={cls.radioGroupWrapper}>
<Radio.Group <Radio.Group
defaultValue="restHeat" defaultValue="elecCost"
buttonStyle="solid" buttonStyle="solid"
className={cls.radioGroup} className={cls.radioGroup}
> >
<Radio.Button value="elecCost" className="radio-group__item">
电耗能
</Radio.Button>
<Radio.Button value="restHeat" className="radio-group__item"> <Radio.Button value="restHeat" className="radio-group__item">
余热发电 余热发电
</Radio.Button> </Radio.Button>
<Radio.Button value="waterCost" className="radio-group__item"> <Radio.Button value="waterCost" className="radio-group__item">
水耗能 水耗能
</Radio.Button> </Radio.Button>
<Radio.Button value="elecCost" className="radio-group__item"> <Radio.Button value="gasCost" className="radio-group__item">
电耗能
</Radio.Button>
{/* <Radio.Button value="gasCost" className="radio-group__item">
天然气 天然气
</Radio.Button> </Radio.Button>
<Radio.Button value="gasiiCost" className="radio-group__item"> {/* <Radio.Button value="gasiiCost" className="radio-group__item">
焦炉煤气 焦炉煤气
</Radio.Button> */} </Radio.Button> */}
</Radio.Group> </Radio.Group>

View File

@ -16,7 +16,7 @@ function EnergyCost(props) {
// electricity = '0kWh', // electricity = '0kWh',
// } = energyState; // } = energyState;
let restHeat = energyState?.restHeat || '0kWh'; let restHeat = energyState?.restHeat || '0kWh';
let water = energyState?.water || '0Km³'; let water = energyState?.water || '0m³';
let gasi = energyState?.gasi || '0m³'; let gasi = energyState?.gasi || '0m³';
let gasii = energyState?.gasii || '0m³'; let gasii = energyState?.gasii || '0m³';
let electricity = energyState?.electricity || '0kWh'; let electricity = energyState?.electricity || '0kWh';

View File

@ -34,7 +34,7 @@ const SmokeTrendChart = (props) => {
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: '单位mg/m³',
nameTextStyle: { nameTextStyle: {
color: '#fff', color: '#fff',
fontSize: 10, fontSize: 10,
@ -44,7 +44,7 @@ const SmokeTrendChart = (props) => {
axisLabel: { axisLabel: {
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 12,
formatter: '{value} %', formatter: '{value}',
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -125,9 +125,9 @@ const SmokeTrendChart = (props) => {
<div className={cls.energyCostChart}> <div className={cls.energyCostChart}>
<div className={cls.titleBar}> <div className={cls.titleBar}>
<h2>烟气趋势图</h2> <h2>烟气趋势图</h2>
<Switch defaultChecked onChange={handleSwitchChange} /> {/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
<div className={cls.legend}> <div className={cls.legend}>
<span className="legend__title">班次详情</span> {/* <span className="legend__title">班次详情</span> */}
<ul className="legend__list"> <ul className="legend__list">
<li>总量</li> <li>总量</li>
<li>白班</li> <li>白班</li>
@ -138,13 +138,10 @@ const SmokeTrendChart = (props) => {
<div className={`${cls.choiceBar} flex items-center justify-between`}> <div className={`${cls.choiceBar} flex items-center justify-between`}>
<Radio.Group <Radio.Group
defaultValue="oxygen" defaultValue="so2"
buttonStyle="solid" buttonStyle="solid"
className={`${cls.radioGroup} flex items-center justify-between`} className={`${cls.radioGroup} flex items-center justify-between`}
> >
<Radio.Button value="oxygen" className="radio-group__item">
氧气含量
</Radio.Button>
<Radio.Button value="so2" className="radio-group__item"> <Radio.Button value="so2" className="radio-group__item">
二氧化硫 二氧化硫
</Radio.Button> </Radio.Button>
@ -154,6 +151,9 @@ const SmokeTrendChart = (props) => {
<Radio.Button value="no2" className="radio-group__item"> <Radio.Button value="no2" className="radio-group__item">
二氧化氮 二氧化氮
</Radio.Button> </Radio.Button>
<Radio.Button value="oxygen" className="radio-group__item">
氧气含量
</Radio.Button>
</Radio.Group> </Radio.Group>
<Radio.Group <Radio.Group

View File

@ -7,7 +7,7 @@
width: 400px; width: 400px;
margin-bottom: 4px; margin-bottom: 4px;
display: flex; display: flex;
justify-content: space-between; /* justify-content: space-between; */
align-items: center; align-items: center;
color: white; color: white;
} }