mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

more clean job

Browse Source
This commit is contained in:
lb 2023-07-03 16:44:57 +08:00
parent 5a5adaf108
commit cb2bb8663f
3 changed files with 115 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/BottomBar/gasi/index.jsx
View File

@ -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,84 +23,123 @@ function GasI(props) {
'#8cd26d', '#8cd26d',
'#2aa1ff', '#2aa1ff',
]; ];
const options = { let options = null;
color: colors, if (showChart) {
grid: { top: 32, right: 12, bottom: 20, left: 48 }, // keys() 结果不是按照顺序，需要 sort()
xAxis: { hisState?.combustionAir
type: 'category', ? Object.keys(hisState.combustionAir)
data: Array(7) .sort()
.fill(1) .map((key) => hisState.combustionAir[key])
.map((_, index) => { : Array(8)
const today = new Date(); .fill(1)
const dtimestamp = today - index * 24 * 60 * 60 * 1000; .map((_) => Array(7).fill(0));
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp, // debug
).getDate()}`; console.log('gasI series data', hisState?.combustionAir, seriesData);
}) options = {
.reverse(), color: colors,
axisLabel: { grid: { top: 32, right: 12, bottom: 20, left: 48 },
color: '#fff', xAxis: {
fontSize: 12, type: 'category',
}, data: Array(7)
axisTick: { show: false }, .fill(1)
axisLine: { .map((_, index) => {
lineStyle: { const today = new Date();
width: 1, const dtimestamp = today - index * 24 * 60 * 60 * 1000;
color: '#213259', 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',
},
}, },
}, },
}, yAxis: {
yAxis: { name: '单位/m³',
name: '单位/m³', nameTextStyle: {
nameTextStyle: { color: '#fff',
color: '#fff', fontSize: 10,
fontSize: 10, align: 'right',
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: '{value} %',
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
}, },
}, type: 'value',
splitLine: { axisLabel: {
lineStyle: { color: '#fff',
color: '#213259a0', fontSize: 12,
formatter: '{value} %',
}, },
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
interval: 10,
min: 0,
max: 100,
}, },
interval: 10, series: seriesData.map((v, i) => ({
min: 0, name: i + 1 + '#助燃风',
max: 100, data: v,
}, type: 'line',
series: seriesData.map((v, i) => ({ areaStyle: {
name: i + 1 + '#助燃风', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
data: v, { offset: 0, color: colors[i] + '40' },
type: 'line', { offset: 0.5, color: colors[i] + '20' },
areaStyle: { { offset: 1, color: colors[i] + '00' },
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: { } else {
trigger: 'axis', 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);
} }
} }

11
src/components/BottomBar/gasii/gasChart/index.jsx
View File

@ -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

2
src/components/BottomBar/gasii/index.jsx
View File

@ -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);
} }
} }