update right

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: 32, right: 12, bottom: 20, left: 48 },
+		grid: { top: 26, right: 12, bottom: 18, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -99,6 +99,29 @@ const EnergyCostChart = (props) => {
 						<li>总量</li>
 					</ul>
 				</div>
+			</div>
+			<div className={cls.radioGroupWrapper}>
+				<Radio.Group
+					defaultValue="restHeat"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					<Radio.Button value="restHeat" className="radio-group__item">
+						余热发电
+					</Radio.Button>
+					<Radio.Button value="waterCost" className="radio-group__item">
+						水耗能
+					</Radio.Button>
+					<Radio.Button value="elecCost" className="radio-group__item">
+						电耗能
+					</Radio.Button>
+					<Radio.Button value="gasCost" className="radio-group__item">
+						天然气
+					</Radio.Button>
+					<Radio.Button value="gasiiCost" className="radio-group__item">
+						焦炉煤气
+					</Radio.Button>
+				</Radio.Group>
 				<Radio.Group
 					defaultValue="week"
 					buttonStyle="solid"
@@ -119,7 +142,7 @@ const EnergyCostChart = (props) => {
 				</Radio.Group>
 			</div>
 			<div className="flex-1">
-				<ReactECharts option={options} style={{ height: '180px' }} />
+				<ReactECharts option={options} style={{ height: '145px' }} />
 			</div>
 		</div>
 	);

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

@@ -5,7 +5,7 @@
 }
 .energyCostChart .titleBar {
 	display: flex;
-	justify-content: space-between;
+	gap: 12px;
 	align-items: center;
 	color: white;
 }
@@ -63,6 +63,13 @@
 	background-color: #2760ff;
 }
 
+.radioGroupWrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 4px 0;
+}
+
 .radioGroup * {
 	border: none !important;
 	border-radius: 0 !important;

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

@@ -1,13 +1,13 @@
 .energyCost {
-	background: url(../../../assets/energy.png) no-repeat;
+	background: url(../../../assets/energy-bg.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 400px;
+	height: 395px;
 }
 
 .cost__info {
 	margin-top: 4px;
-	margin-bottom: 12px;
+	// margin-bottom: 12px;
 
 	div {
 		flex-grow: 1;
@@ -19,7 +19,7 @@
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
 	// width: 288px;
-	height: 43px;
+	height: 40px;
 	font-size: 20px;
 	letter-spacing: 1.43px;
 	line-height: 40px;
@@ -35,5 +35,5 @@
 	margin-left: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	gap: 8px;
+	gap: 6px;
 }

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

@@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
 const SmokeTrendChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		grid: { top: 32, right: 12, bottom: 18, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
 					</Radio.Button>
 				</Radio.Group>
 			</div>
-			<ReactECharts option={options} style={{ height: '240px' }} />
+			<ReactECharts option={options} style={{ height: '220px' }} />
 		</div>
 	);
 };

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

@@ -1,9 +1,9 @@
 .smokeHandle {
 	// background: #b730305c;
-	background: url(../../../assets/smoke.png) no-repeat;
+	background: url(../../../assets/smoke-bg.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 540px;
+	height: 512px;
 	.smokeHandle__content {
 		margin-top: 8px;
 	}
@@ -14,7 +14,7 @@
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
 	// width: 288px;
-	height: 56px;
+	height: 52px;
 	font-size: 20px;
 	letter-spacing: 1.43px;
 	line-height: 56px;
@@ -23,7 +23,7 @@
 }
 
 .info__item_groups {
-	margin-bottom: 12px;
+	// margin-bottom: 12px;
 	margin-left: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;

src/components/yx-dark/RightContent.jsx

@@ -1,5 +1,13 @@
 import './styles/right.module.css';
 
+import Energy from '../RightBar/EnergyCost';
+import Smoke from '../RightBar/SmokeHandle';
+
 export default (props) => {
-	return <div className={`right-content ${props.className}`}> </div>;
+	return (
+		<div className={`right-content ${props.className}`}>
+			<Energy />
+			<Smoke />
+		</div>
+	);
 };

src/components/yx-dark/styles/right.module.css

@@ -1,3 +1,7 @@
-.right {
-    background: #03f3;
+.right-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    /* background: #fcc3; */
 }