more clean job
This commit is contained in:
parent
5a5adaf108
commit
cb2bb8663f
@ -11,36 +11,8 @@ function GasI(props) {
|
|||||||
const [showChart, setShowChart] = useState(true);
|
const [showChart, setShowChart] = useState(true);
|
||||||
const { runState, hisState } = useContext(SocketContext);
|
const { runState, hisState } = useContext(SocketContext);
|
||||||
|
|
||||||
const dataList = runState?.combustionAirFlow
|
let dataList = [];
|
||||||
? [
|
let seriesData = [];
|
||||||
{ id: 1, name: '1#助燃风', value: '122m³/h' },
|
|
||||||
{ id: 2, name: '2#助燃风', value: '200m³/h' },
|
|
||||||
{ id: 3, name: '3#助燃风', value: '112m³/h' },
|
|
||||||
{ id: 4, name: '4#助燃风', value: '189m³/h' },
|
|
||||||
{ id: 5, name: '5#助燃风', value: '109m³/h' },
|
|
||||||
{ id: 6, name: '6#助燃风', value: '167m³/h' },
|
|
||||||
{ id: 7, name: '7#助燃风', value: '172m³/h' },
|
|
||||||
{ id: 8, name: '8#助燃风', value: '145m³/h' },
|
|
||||||
].map((item, index) => ({
|
|
||||||
...item,
|
|
||||||
value: runState.combustionAirFlow[index],
|
|
||||||
}))
|
|
||||||
: [
|
|
||||||
{ id: 1, name: '1#助燃风', value: '122m³/h' },
|
|
||||||
{ id: 2, name: '2#助燃风', value: '200m³/h' },
|
|
||||||
{ id: 3, name: '3#助燃风', value: '112m³/h' },
|
|
||||||
{ id: 4, name: '4#助燃风', value: '189m³/h' },
|
|
||||||
{ id: 5, name: '5#助燃风', value: '109m³/h' },
|
|
||||||
{ id: 6, name: '6#助燃风', value: '167m³/h' },
|
|
||||||
{ id: 7, name: '7#助燃风', value: '172m³/h' },
|
|
||||||
{ id: 8, name: '8#助燃风', value: '145m³/h' },
|
|
||||||
];
|
|
||||||
const seriesData = hisState?.combustionAir
|
|
||||||
? Object.keys(hisState.combustionAir).map(
|
|
||||||
(key) => hisState.combustionAir[key],
|
|
||||||
)
|
|
||||||
: Array(8).fill(Array(7).fill(0));
|
|
||||||
|
|
||||||
const colors = [
|
const colors = [
|
||||||
'#12FFF5',
|
'#12FFF5',
|
||||||
'#2760FF',
|
'#2760FF',
|
||||||
@ -51,7 +23,20 @@ function GasI(props) {
|
|||||||
'#8cd26d',
|
'#8cd26d',
|
||||||
'#2aa1ff',
|
'#2aa1ff',
|
||||||
];
|
];
|
||||||
const options = {
|
let options = null;
|
||||||
|
if (showChart) {
|
||||||
|
// keys() 结果不是按照顺序,需要 sort()
|
||||||
|
hisState?.combustionAir
|
||||||
|
? Object.keys(hisState.combustionAir)
|
||||||
|
.sort()
|
||||||
|
.map((key) => hisState.combustionAir[key])
|
||||||
|
: Array(8)
|
||||||
|
.fill(1)
|
||||||
|
.map((_) => Array(7).fill(0));
|
||||||
|
|
||||||
|
// debug
|
||||||
|
console.log('gasI series data', hisState?.combustionAir, seriesData);
|
||||||
|
options = {
|
||||||
color: colors,
|
color: colors,
|
||||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@ -122,13 +107,39 @@ function GasI(props) {
|
|||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
} else {
|
||||||
|
runState?.combustionAirFlow
|
||||||
|
? [
|
||||||
|
{ id: 1, name: '1#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 2, name: '2#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 3, name: '3#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 4, name: '4#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 5, name: '5#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 6, name: '6#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 7, name: '7#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 8, name: '8#助燃风', value: '0m³/h' },
|
||||||
|
].map((item, index) => ({
|
||||||
|
...item,
|
||||||
|
value: runState.combustionAirFlow[index],
|
||||||
|
}))
|
||||||
|
: [
|
||||||
|
{ id: 1, name: '1#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 2, name: '2#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 3, name: '3#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 4, name: '4#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 5, name: '5#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 6, name: '6#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 7, name: '7#助燃风', value: '0m³/h' },
|
||||||
|
{ id: 8, name: '8#助燃风', value: '0m³/h' },
|
||||||
|
];
|
||||||
|
// debug
|
||||||
|
console.log('gasI grid data', runState?.combustionAirFlow);
|
||||||
|
}
|
||||||
|
|
||||||
function handleSwitchChange(val) {
|
function handleSwitchChange(val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
// 展示图表
|
|
||||||
setShowChart(true);
|
setShowChart(true);
|
||||||
} else {
|
} else {
|
||||||
// 展示数据
|
|
||||||
setShowChart(false);
|
setShowChart(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,13 +10,16 @@ function GasChart(props) {
|
|||||||
|
|
||||||
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
||||||
|
|
||||||
|
// keys() 的结果不是按照顺序的,需要 sort()
|
||||||
const seriesData = hisState?.[dataName]
|
const seriesData = hisState?.[dataName]
|
||||||
? Object.keys(hisState?.[dataName]).map(
|
? Object.keys(hisState?.[dataName])
|
||||||
(key, index) => hisState?.[dataName][key],
|
.sort()
|
||||||
)
|
.map((key, index) => hisState?.[dataName][key])
|
||||||
: Array(dataSource == 'gas-i' ? 8 : 5).fill(Array(7).fill(0));
|
: Array(dataSource == 'gas-i' ? 8 : 5).fill(Array(7).fill(0));
|
||||||
|
|
||||||
console.log('series data ===> ', seriesData);
|
// debug
|
||||||
|
// console.log('gasII series data', dataName, hisState?.[dataName], seriesData)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cls.gasChart}>
|
<div className={cls.gasChart}>
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
|
@ -12,10 +12,8 @@ function GasII(props) {
|
|||||||
|
|
||||||
function handleSwitchChange(val) {
|
function handleSwitchChange(val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
// 展示图表
|
|
||||||
setShowChart(true);
|
setShowChart(true);
|
||||||
} else {
|
} else {
|
||||||
// 展示数据
|
|
||||||
setShowChart(false);
|
setShowChart(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user