xuchang-screen/src/components/BottomBar/gasi/index.jsx

// 助燃风流量
import cls from './index.module.css';
import BottomBarItem from '../BottomBarItem';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { randomInt } from '../../../utils';
import { Switch } from 'antd';
import { useState, useContext } from 'react';
import SocketContext from '../../../store/socket-data-provider';

function GasI(props) {
	const [showChart, setShowChart] = useState(true);
	const { runState, hisState } = useContext(SocketContext);

	let dataList = [];
	let seriesData = [];
	const colors = [
		'#12FFF5',
		'#2760FF',
		'#FFD160',
		'#E80091',
		'#8064ff',
		'#ff8a3b',
		'#8cd26d',
		'#2aa1ff',
	];
	let options = null;
	if (showChart) {
		// keys() 结果不是按照顺序，需要 sort()
		seriesData = hisState?.combustionAir
			? Object.keys(hisState.combustionAir)
					.sort()
					.map((key) => hisState.combustionAir[key])
			: Array(8)
					.fill(1)
					.map((_) => Array(7).fill(0));

		// debug
		console.log(
			'助燃风 chart 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,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#213259',
					},
				},
				splitLine: {
					lineStyle: {
						color: '#213259a0',
					},
				},
				// interval: 10,
				// min: 0,
				// max: 100,
			},
			series: seriesData.map((v, i) => ({
				name: i + 1 + '#助燃风',
				data: v,
				type: 'line',
				symbol: 'circle',
				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',
			},
		};
	} else {
		dataList = runState?.combustionAirPressureArr
			? [
					{ 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.combustionAirPressureArr[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('助燃风 实时 data', runState?.combustionAirPressureArr);
	}

	function handleSwitchChange(val) {
		if (val) {
			setShowChart(true);
		} else {
			setShowChart(false);
		}
	}
	return (
		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
			<div className={cls.headWidget}>
				<div className="flex items-center">
					<Switch size="small" defaultChecked onChange={handleSwitchChange} />
					{showChart && <span className={cls.switchLabel}>历史详情</span>}
					{!showChart && <span className={cls.switchLabel}>实时流量</span>}
				</div>
			</div>

			<div className={cls.chart}>
				{showChart && (
					<ReactECharts option={options} style={{ height: '100%' }} />
				)}
				{!showChart && (
					<div className={cls.gridList}>
						{dataList.map((item) => (
							<div key={item.id} className={cls.listItem}>
								{item.name}: {item.value}
							</div>
						))}
					</div>
				)}
			</div>
		</BottomBarItem>
	);
}

export default GasI;