more clean job
This commit is contained in:
		@@ -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,7 +23,20 @@ function GasI(props) {
 | 
			
		||||
		'#8cd26d',
 | 
			
		||||
		'#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,
 | 
			
		||||
			grid: { top: 32, right: 12, bottom: 20, left: 48 },
 | 
			
		||||
			xAxis: {
 | 
			
		||||
@@ -122,13 +107,39 @@ function GasI(props) {
 | 
			
		||||
				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);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 
 | 
			
		||||
@@ -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 (
 | 
			
		||||
		<div className={cls.gasChart}>
 | 
			
		||||
			<ReactECharts
 | 
			
		||||
 
 | 
			
		||||
@@ -12,10 +12,8 @@ function GasII(props) {
 | 
			
		||||
 | 
			
		||||
	function handleSwitchChange(val) {
 | 
			
		||||
		if (val) {
 | 
			
		||||
			// 展示图表
 | 
			
		||||
			setShowChart(true);
 | 
			
		||||
		} else {
 | 
			
		||||
			// 展示数据
 | 
			
		||||
			setShowChart(false);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user