update 基本完成rightbar

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

@@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react';
 const EnergyCostChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 28, right: 12, bottom: 32, left: 48 },
+		grid: { top: 32, right: 12, bottom: 20, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -33,6 +33,12 @@ const EnergyCostChart = (props) => {
 			},
 		},
 		yAxis: {
+			name: '单位/m³',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
 			type: 'value',
 			axisLabel: {
 				color: '#fff',
@@ -112,7 +118,9 @@ const EnergyCostChart = (props) => {
 					</Radio.Button>
 				</Radio.Group>
 			</div>
-			<ReactECharts option={options} />
+			<div className="flex-1">
+				<ReactECharts option={options} style={{ height: '180px' }} />
+			</div>
 		</div>
 	);
 };

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

@@ -1,5 +1,4 @@
 .energyCostChart {
-	margin-top: 12px;
 	height: 1px;
 	flex: 1;
 	padding-top: 8px;

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

@@ -2,10 +2,11 @@
 	background: url(../../../assets/energy.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
+	height: 400px;
 }
 
 .cost__info {
-	margin-top: 8px;
+	margin-top: 4px;
 	margin-bottom: 12px;
 
 	div {

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx

@@ -124,7 +124,7 @@ const SmokeTrendChart = (props) => {
 	return (
 		<div className={cls.energyCostChart}>
 			<div className={cls.titleBar}>
-				<h2>能耗趋势图</h2>
+				<h2>烟气趋势图</h2>
 				<Switch defaultChecked onChange={handleSwitchChange} />
 				<div className={cls.legend}>
 					<span className="legend__title">班次详情</span>
@@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
 					</Radio.Button>
 				</Radio.Group>
 			</div>
-			<ReactECharts option={options} />
+			<ReactECharts option={options} style={{ height: '270px' }} />
 		</div>
 	);
 };

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css

@@ -66,6 +66,7 @@
 }
 
 .choiceBar {
+	margin: 4px 0;
 }
 
 .radioGroup * {

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

@@ -3,7 +3,7 @@
 	background: url(../../../assets/smoke.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-
+	height: 540px;
 	.smokeHandle__content {
 		margin-top: 8px;
 	}

src/components/RightBar/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Chart1 from './Chart1';
+// import Chart1 from './Chart1';
-import Chart2 from './Chart2';
+// import Chart2 from './Chart2';
-import Chart3 from './Chart3';
+// import Chart3 from './Chart3';
 // import RightChart2 from './Chart2'
 import SmokeHandle from './SmokeHandle';
 import EnergyCost from './EnergyCost';
@@ -14,14 +14,13 @@ import cls from './index.module.less';
 
 export default function index() {
 	return (
-		<div className={cls.rightBar}>
+		<div className={`${cls.rightBar} flex flex-col`}>
-			<div className={cls.demoFloat}>
+			<EnergyCost />
-				<EnergyCost />
+			<SmokeHandle />
-				<SmokeHandle />
+
-			</div>
+			{/* <Chart1 />
-			<Chart1 />
 			<Chart2 />
-			<Chart3 />
+			<Chart3 /> */}
 		</div>
 	);
 }

src/components/RightBar/index.module.less

@@ -1,4 +1,14 @@
 .rightBar {
+	// background: #f00;
+
+	> div {
+		// height: 1px;
+		// flex: 1;
+
+		&:first-child {
+			margin-bottom: 24px;
+		}
+	}
 }
 
 .demoFloat {

src/pages/global.less

@@ -6,6 +6,10 @@
 	flex-direction: column;
 }
 
+.flex-1 {
+	flex: 1;
+}
+
 .justify-between {
 	justify-content: space-between;
 }