diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index c4c435c..e9f90a2 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -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, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: '#213259', + }, }, }, - }, - 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', + yAxis: { + name: '单位/m³', + nameTextStyle: { + color: '#fff', + fontSize: 10, + align: 'right', }, - }, - splitLine: { - lineStyle: { - color: '#213259a0', + 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); } } diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx index 0ee2909..daf4e37 100644 --- a/src/components/BottomBar/gasii/gasChart/index.jsx +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -10,13 +10,16 @@ function GasChart(props) { const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2'; + // keys() 的结果不是按照顺序的,需要 sort() const seriesData = hisState?.[dataName] - ? Object.keys(hisState?.[dataName]).map( - (key, index) => hisState?.[dataName][key], - ) + ? Object.keys(hisState?.[dataName]) + .sort() + .map((key, index) => hisState?.[dataName][key]) : 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 (