init commit

src/components/公共组件/烟气处理/SmokeTrendChart/index.jsx

@@ -0,0 +1,183 @@
+import cls from './index.module.css';
+import { randomInt } from '../../../../utils';
+
+import * as echarts from 'echarts';
+import { Switch, Radio } from 'antd';
+import ReactECharts from 'echarts-for-react';
+
+const SmokeTrendChart = (props) => {
+	const options = {
+		color: ['#FFD160', '#12FFF5', '#2760FF'],
+		grid: { top: 38, 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³/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',
+				},
+			},
+			interval: 10,
+			min: 0,
+			max: 100,
+		},
+		series: [
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#FFD16040' },
+						{ offset: 0.5, color: '#FFD16020' },
+						{ offset: 1, color: '#FFD16010' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#12FFF540' },
+						{ offset: 0.5, color: '#12FFF520' },
+						{ offset: 1, color: '#12FFF510' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#2760FF40' },
+						{ offset: 0.5, color: '#2760FF20' },
+						{ offset: 1, color: '#2760FF10' },
+					]),
+				},
+				// smooth: true,
+			},
+		],
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+
+	function handleSwitchChange(val) {
+		// val: boolean
+		console.log('switch change', val);
+	}
+
+	return (
+		<div className={cls.energyCostChart}>
+			<div className={cls.titleBar}>
+				<h2>烟气趋势图</h2>
+				<Switch defaultChecked onChange={handleSwitchChange} />
+				<div className={cls.legend}>
+					<span className="legend__title">班次详情</span>
+					<ul className="legend__list">
+						<li>总量</li>
+						<li>白班</li>
+						<li>夜班</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className={`${cls.choiceBar} flex items-center justify-between`}>
+				<Radio.Group
+					defaultValue="oxygen"
+					buttonStyle="solid"
+					className={`${cls.radioGroup} flex items-center justify-between`}
+				>
+					<Radio.Button value="oxygen" className="radio-group__item">
+						氧气含量
+					</Radio.Button>
+					<Radio.Button value="so2" className="radio-group__item">
+						二氧化硫
+					</Radio.Button>
+					<Radio.Button value="no" className="radio-group__item">
+						一氧化氮
+					</Radio.Button>
+					<Radio.Button value="no2" className="radio-group__item">
+						二氧化氮
+					</Radio.Button>
+				</Radio.Group>
+
+				<Radio.Group
+					defaultValue="week"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					<Radio.Button value="day" className="radio-group__item">
+						日
+					</Radio.Button>
+					<Radio.Button value="week" className="radio-group__item">
+						周
+					</Radio.Button>
+					<Radio.Button value="month" className="radio-group__item">
+						月
+					</Radio.Button>
+					<Radio.Button value="year" className="radio-group__item">
+						年
+					</Radio.Button>
+				</Radio.Group>
+			</div>
+			<ReactECharts option={options} style={{ height: '240px' }} />
+		</div>
+	);
+};
+
+export default SmokeTrendChart;