|
|
@@ -11,36 +11,8 @@ function GasI(props) { |
|
|
|
const [showChart, setShowChart] = useState(true); |
|
|
|
const { runState, hisState } = useContext(SocketContext); |
|
|
|
|
|
|
|
const dataList = runState?.combustionAirFlow |
|
|
|
? [ |
|
|
|
{ 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)); |
|
|
|
|
|
|
|
let dataList = []; |
|
|
|
let seriesData = []; |
|
|
|
const colors = [ |
|
|
|
'#12FFF5', |
|
|
|
'#2760FF', |
|
|
@@ -51,84 +23,123 @@ function GasI(props) { |
|
|
|
'#8cd26d', |
|
|
|
'#2aa1ff', |
|
|
|
]; |
|
|
|
const options = { |
|
|
|
color: colors, |
|
|
|
grid: { top: 32, right: 12, bottom: 20, left: 48 }, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: Array(7) |
|
|
|
.fill(1) |
|
|
|
.map((_, index) => { |
|
|
|
const today = new Date(); |
|
|
|
const dtimestamp = today - index * 24 * 60 * 60 * 1000; |
|
|
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( |
|
|
|
dtimestamp, |
|
|
|
).getDate()}`; |
|
|
|
}) |
|
|
|
.reverse(), |
|
|
|
axisLabel: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
}, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
width: 1, |
|
|
|
color: '#213259', |
|
|
|
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, |
|
|
|
grid: { top: 32, right: 12, bottom: 20, left: 48 }, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: Array(7) |
|
|
|
.fill(1) |
|
|
|
.map((_, index) => { |
|
|
|
const today = new Date(); |
|
|
|
const dtimestamp = today - index * 24 * 60 * 60 * 1000; |
|
|
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( |
|
|
|
dtimestamp, |
|
|
|
).getDate()}`; |
|
|
|
}) |
|
|
|
.reverse(), |
|
|
|
axisLabel: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
name: '单位/m³', |
|
|
|
nameTextStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 10, |
|
|
|
align: 'right', |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
axisLabel: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
formatter: '{value} %', |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#213259', |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
width: 1, |
|
|
|
color: '#213259', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#213259a0', |
|
|
|
yAxis: { |
|
|
|
name: '单位/m³', |
|
|
|
nameTextStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 10, |
|
|
|
align: 'right', |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
axisLabel: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12, |
|
|
|
formatter: '{value} %', |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#213259', |
|
|
|
}, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#213259a0', |
|
|
|
}, |
|
|
|
}, |
|
|
|
interval: 10, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
}, |
|
|
|
interval: 10, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
}, |
|
|
|
series: seriesData.map((v, i) => ({ |
|
|
|
name: i + 1 + '#助燃风', |
|
|
|
data: v, |
|
|
|
type: 'line', |
|
|
|
areaStyle: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ offset: 0, color: colors[i] + '40' }, |
|
|
|
{ offset: 0.5, color: colors[i] + '20' }, |
|
|
|
{ offset: 1, color: colors[i] + '00' }, |
|
|
|
]), |
|
|
|
series: seriesData.map((v, i) => ({ |
|
|
|
name: i + 1 + '#助燃风', |
|
|
|
data: v, |
|
|
|
type: 'line', |
|
|
|
areaStyle: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ offset: 0, color: colors[i] + '40' }, |
|
|
|
{ offset: 0.5, color: colors[i] + '20' }, |
|
|
|
{ offset: 1, color: colors[i] + '00' }, |
|
|
|
]), |
|
|
|
}, |
|
|
|
})), |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
}, |
|
|
|
})), |
|
|
|
tooltip: { |
|
|
|
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) { |
|
|
|
if (val) { |
|
|
|
// 展示图表 |
|
|
|
setShowChart(true); |
|
|
|
} else { |
|
|
|
// 展示数据 |
|
|
|
setShowChart(false); |
|
|
|
} |
|
|
|
} |
|
|
|