update Energy

src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx

@@ -1,7 +1,116 @@
 import cls from './index.module.less';
 
-const TechSplitline = (props) => {
-	return <div className={cls.techSplitline}></div>;
+const EnergyCostChart = (props) => {
+	const options = {
+		color: ['#FFD160', '#12FFF5', '#2760FF'],
+		grid: { top: 28, right: 12, bottom: 32, 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: {
+			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,
+			},
+		],
+		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>
+					</ul>
+				</div>
+				<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} />
+		</div>
+	);
 };
 
-export default TechSplitline;
+export default EnergyCostChart;

src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css

@@ -0,0 +1,87 @@
+.EnergyCostChart {
+	margin-top: 12px;
+	height: 1px;
+	flex: 1;
+	padding-top: 8px;
+	background: #ae27276a;
+}
+.EnergyCostChart .titleBar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: white;
+}
+.EnergyCostChart .titleBar h2 {
+	margin: 0;
+	font-size: 18px;
+	line-height: 32px;
+	letter-spacing: 1.2px;
+	color: #52fff8;
+}
+
+.EnergyCostChart .titleBar .legend {
+	display: flex;
+	align-items: center;
+}
+.EnergyCostChart .titleBar .legend * {
+	font-size: 14px;
+	line-height: 14px;
+	color: #dff1fe;
+}
+
+.EnergyCostChart .titleBar .legend ul {
+	display: flex;
+	margin: 0;
+	margin-left: 8px;
+	padding: 0;
+	list-style: none;
+	align-items: center;
+}
+.EnergyCostChart .titleBar .legend ul li {
+	position: relative;
+	margin: 4px;
+	padding-left: 16px;
+}
+.EnergyCostChart .titleBar .legend ul li::before {
+	content: '';
+	position: absolute;
+	left: 2px;
+	top: 2px;
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+}
+
+.EnergyCostChart .titleBar .legend ul li:first-child::before {
+	background-color: #ffd160;
+}
+
+.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before {
+	background-color: #12fff5;
+}
+
+.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before {
+	background-color: #2760ff;
+}
+
+.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;
+}
+
+.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
+	background: #02457e !important;
+}

src/components/RightBar/EnergyCost/EnergyCostChart/index.module.less

@@ -1,3 +0,0 @@
-.EnergyCostChart {
-	background: #b730305c;
-}

src/components/RightBar/EnergyCost/TechSplitline/index.jsx

@@ -1,7 +1,7 @@
 import cls from './index.module.less';
 
-const EnergyCostChart = (props) => {
-	return <div className={cls.energyCostChart}>EnergyCostChart</div>;
+const TechSplitline = (props) => {
+	return <div className={cls.techSplitline}></div>;
 };
 
-export default EnergyCostChart;
+export default TechSplitline;

src/components/RightBar/EnergyCost/index.jsx

@@ -1,7 +1,7 @@
 import cls from './index.module.less';
 import Container from '../../Container';
 import TechSplitline from './TechSplitline';
-import EnergyCostChart from './TechSplitline';
+import EnergyCostChart from './EnergyCostChart';
 
 function EnergyCost(props) {
 	return (

src/components/RightBar/EnergyCost/index.module.less

@@ -2,6 +2,10 @@
 	background: #b730305c;
 }
 
+.cost__info {
+	margin-bottom: 12px;
+}
+
 .info__item {
 	border-radius: 2px;
 	color: hsl(0, 0%, 100%, 0.9);