setup

src/components/Common/NatGasFlow/gasChart/chart.config.js

@@ -0,0 +1,98 @@
+import * as echarts from 'echarts';
+import { randomInt } from '../../../../utils';
+
+export default function getOptions(seriesData, name) {
+	const colors = [
+		'#12FFF5',
+		'#2760FF',
+		'#FFD160',
+		'#E80091',
+		'#8064ff',
+		'#ff8a3b',
+		'#8cd26d',
+		'#2aa1ff',
+	];
+	return {
+		color: colors,
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		legend: {
+			show: true,
+			icon: 'roundRect',
+			top: 10,
+			right: 10,
+			padding: 0,
+			itemWidth: 8,
+			itemHeight: 8,
+			itemGap: 3,
+			height: 8,
+			textStyle: {
+				color: '#DFF1FE',
+				fontSize: 10,
+			},
+		},
+		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³/h',
+			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',
+				},
+			},
+		},
+		series: seriesData.map((arr, index) => ({
+			name: index + 1 + '#' + name,
+			data: arr,
+			type: 'line',
+			areaStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					{ offset: 0, color: colors[index] + '40' },
+					{ offset: 0.5, color: colors[index] + '20' },
+					{ offset: 1, color: colors[index] + '00' },
+				]),
+			},
+		})),
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+}

src/components/Common/NatGasFlow/gasChart/index.jsx

@@ -0,0 +1,37 @@
+import cls from './index.module.css';
+import ReactECharts from 'echarts-for-react';
+import getOptions from './chart.config';
+// import SocketContext from '../../../../store/socket-data-provider';
+import { useContext } from 'react';
+
+function GasChart(props) {
+	const { dataSource } = props;
+	// const { hisState } = useContext(SocketContext);
+	const hisState = null;
+	const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
+
+	// keys() 的结果不是按照顺序的，需要 sort()
+	const seriesData = hisState?.[dataName]
+		? Object.keys(hisState?.[dataName])
+				.sort()
+				.map((key, index) => hisState?.[dataName][key])
+		: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
+
+	// debug
+	console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
+
+	return (
+		<div className={cls.gasChart}>
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					seriesData,
+					dataSource == 'gas-i' ? '天然气I' : '天然气II',
+				)}
+				style={{ height: '100%' }}
+			/>
+		</div>
+	);
+}
+
+export default GasChart;

src/components/Common/NatGasFlow/gasChart/index.module.css

@@ -0,0 +1,3 @@
+.gasChart {
+  height: 100%;
+}

src/components/Common/NatGasFlow/gridList/index.jsx

@@ -0,0 +1,55 @@
+import cls from './index.module.css';
+import { useContext, useEffect, useState } from 'react';
+// import SocketContext from '../../../../store/socket-data-provider';
+
+function getData(type) {
+	let data = [];
+	switch (type) {
+		case 'gas-i':
+			data = [
+				{ id: 1, name: '1#天然气I', value: '0m³/h' },
+				{ id: 2, name: '2#天然气I', value: '0m³/h' },
+				{ id: 3, name: '3#天然气I', value: '0m³/h' },
+				{ id: 4, name: '4#天然气I', value: '0m³/h' },
+				{ id: 5, name: '5#天然气I', value: '0m³/h' },
+				{ id: 6, name: '6#天然气I', value: '0m³/h' },
+				{ id: 7, name: '7#天然气I', value: '0m³/h' },
+				{ id: 8, name: '8#天然气I', value: '0m³/h' },
+			];
+			break;
+		case 'gas-ii':
+			data = [
+				{ id: 11, name: '1#天然气II', value: '0m³/h' },
+				{ id: 12, name: '2#天然气II', value: '0m³/h' },
+				{ id: 13, name: '3#天然气II', value: '0m³/h' },
+				{ id: 14, name: '4#天然气II', value: '0m³/h' },
+				// { id: 15, name: '5#天然气II', value: '0m³/h' },
+			];
+			break;
+	}
+	return data;
+}
+
+function GridList(props) {
+	// const { runState } = useContext(SocketContext);
+	const runState = null;
+	
+	const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
+
+	let dataList = getData(props.dataSource);
+	dataList = runState?.[key]
+		? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
+		: dataList;
+
+	return (
+		<div className={cls.gridList}>
+			{dataList.map((item) => (
+				<div key={item.id} className={cls.listItem}>
+					{item.name}: {item.value}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default GridList;

src/components/Common/NatGasFlow/gridList/index.module.css

@@ -0,0 +1,14 @@
+.gridList {
+  margin-top: 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+.listItem {
+  border-radius: 2px;
+  padding: 12px 0;
+  text-align: center;
+	color: #fff;
+	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+}

src/components/Common/NatGasFlow/index.jsx

@@ -0,0 +1,71 @@
+// 天然气流量
+import cls from './index.module.css';
+import BottomBarItem from '../BottomItemBackground';
+
+import { Switch, Radio } from 'antd';
+import { useState } from 'react';
+import GridList from './gridList';
+import GasChart from './gasChart';
+
+function GasII(props) {
+	const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii
+	const [showChart, setShowChart] = useState(true);
+
+	function handleSwitchChange(val) {
+		if (val) {
+			setShowChart(true);
+		} else {
+			setShowChart(false);
+		}
+	}
+
+	function handleSourceChange(e) {
+		console.log('val', e.target.value);
+		if (e.target.value == 'ii') {
+			// 天然气II
+			setDataSource('gas-ii');
+		} else if (e.target.value == 'i') {
+			// 天然气 I
+			setDataSource('gas-i');
+		}
+	}
+
+	return (
+		<BottomBarItem
+			icon="pause"
+			title="天然气流量"
+			className={`${cls.gas} ${props.className}`}
+			style={props.style}
+		>
+			{/* legend */}
+			<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>
+
+				<Radio.Group
+					defaultValue="i"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+					onChange={handleSourceChange}
+				>
+					<Radio.Button value="i" className="radio-group__item">
+						天然气 I
+					</Radio.Button>
+					<Radio.Button value="ii" className="radio-group__item">
+						天然气 II
+					</Radio.Button>
+				</Radio.Group>
+			</div>
+
+			<div className={cls.chart}>
+				{showChart && <GasChart dataSource={dataSource} />}
+				{!showChart && <GridList dataSource={dataSource} />}
+			</div>
+		</BottomBarItem>
+	);
+}
+
+export default GasII;

src/components/Common/NatGasFlow/index.module.css

@@ -0,0 +1,86 @@
+.chart {
+	height: 100%;
+}
+
+.gas {
+	position: relative;
+}
+
+.currentFlow {
+	position: absolute;
+	top: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 8px 22px;
+	border-radius: 2px;
+	letter-spacing: 2px;
+	box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+	line-height: 18px;
+	font-size: 18px;
+	text-align: center;
+	color: #12fff5;
+}
+
+.headWidget {
+	position: absolute;
+	top: 22px;
+	right: 24px;
+	height: 32px;
+	width: 410px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}
+
+.legend:last-child {
+	margin-left: 8px;
+}
+
+.legend > span {
+	display: inline-block;
+	color: #dff1fe;
+	font-size: 14px;
+	letter-spacing: 2px;
+}
+
+.legend > span:first-child {
+	width: 12px;
+	height: 12px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.gasIcon {
+	background: #12fff5;
+}
+
+.gas2Icon {
+	background: #2760ff;
+}
+
+.radioGroup {
+	user-select: none;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.radioGroup_button_wrapper {
+	color: #fff !important;
+	background: #03233c !important;
+}