diff --git a/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
index 82b3568..34763a9 100644
--- a/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
+++ b/src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx
@@ -1,4 +1,8 @@
-import cls from './index.module.less';
+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 EnergyCostChart = (props) => {
 	const options = {
diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx
index fae647a..9fc928e 100644
--- a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx
+++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx
@@ -1,4 +1,9 @@
-import cls from './index.module.less';
+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 = {
diff --git a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css
index 1b915ba..79b9cb9 100644
--- a/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css
+++ b/src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css
@@ -1,17 +1,17 @@
-.EnergyCostChart {
+.energyCostChart {
 	margin-top: 12px;
 	height: 1px;
 	flex: 1;
 	padding-top: 8px;
 	background: #ae27276a;
 }
-.EnergyCostChart .titleBar {
+.energyCostChart .titleBar {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	color: white;
 }
-.EnergyCostChart .titleBar h2 {
+.energyCostChart .titleBar h2 {
 	margin: 0;
 	font-size: 18px;
 	line-height: 32px;
@@ -19,17 +19,17 @@
 	color: #52fff8;
 }
 
-.EnergyCostChart .titleBar .legend {
+.energyCostChart .titleBar .legend {
 	display: flex;
 	align-items: center;
 }
-.EnergyCostChart .titleBar .legend * {
+.energyCostChart .titleBar .legend * {
 	font-size: 14px;
 	line-height: 14px;
 	color: #dff1fe;
 }
 
-.EnergyCostChart .titleBar .legend ul {
+.energyCostChart .titleBar .legend ul {
 	display: flex;
 	margin: 0;
 	margin-left: 8px;
@@ -37,12 +37,12 @@
 	list-style: none;
 	align-items: center;
 }
-.EnergyCostChart .titleBar .legend ul li {
+.energyCostChart .titleBar .legend ul li {
 	position: relative;
 	margin: 4px;
 	padding-left: 16px;
 }
-.EnergyCostChart .titleBar .legend ul li::before {
+.energyCostChart .titleBar .legend ul li::before {
 	content: '';
 	position: absolute;
 	left: 2px;
@@ -53,15 +53,15 @@
 	border-radius: 2px;
 }
 
-.EnergyCostChart .titleBar .legend ul li:first-child::before {
+.energyCostChart .titleBar .legend ul li:first-child::before {
 	background-color: #ffd160;
 }
 
-.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before {
+.energyCostChart .titleBar .legend ul li:nth-child(2)::before {
 	background-color: #12fff5;
 }
 
-.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before {
+.energyCostChart .titleBar .legend ul li:nth-child(3)::before {
 	background-color: #2760ff;
 }
 
diff --git a/src/components/RightBar/index.jsx b/src/components/RightBar/index.jsx
index 1882516..61c6c8c 100644
--- a/src/components/RightBar/index.jsx
+++ b/src/components/RightBar/index.jsx
@@ -1,27 +1,27 @@
-import React from 'react'
+import React from 'react';
 
-
-import Chart1 from './Chart1'
-
-import Chart2 from './Chart2'
-
-import Chart3 from './Chart3'
+import Chart1 from './Chart1';
+import Chart2 from './Chart2';
+import Chart3 from './Chart3';
 // import RightChart2 from './Chart2'
-
+import SmokeHandle from './SmokeHandle';
+import EnergyCost from './EnergyCost';
 //引用原来的公共工程
-import RightChart2 from './Chart2'
+// import RightChart2 from './Chart2'
+// import RightChart3 from './Chart3'
 
-
-import RightChart3 from './Chart3'
-
-import './index.less'
+import cls from './index.module.less';
 
 export default function index() {
-    return (
-        <div className='RightBorder'>
-            <Chart1 />
-            <Chart2 />
-            <Chart3 />
-        </div>
-    )
+	return (
+		<div className={cls.rightBar}>
+			<div className={cls.demoFloat}>
+				<EnergyCost />
+				<SmokeHandle />
+			</div>
+			<Chart1 />
+			<Chart2 />
+			<Chart3 />
+		</div>
+	);
 }
diff --git a/src/components/RightBar/index.less b/src/components/RightBar/index.less
deleted file mode 100644
index 11004d3..0000000
--- a/src/components/RightBar/index.less
+++ /dev/null
@@ -1,18 +0,0 @@
-.RightBorder {
-  width: 625px;
-  height: 966px;
-  margin-left: 24px;
-  display: flex;
-  flex-direction:column;
-  justify-content: flex-start;
-
-  .RightBorder1 {
-    width: 440px;
-    height: 340px;
-  }
-  .RightBorder2 {
-    width: 850px;
-    height: 305px;
-    margin-left: 25px;
-  }
-}
diff --git a/src/components/RightBar/index.module.less b/src/components/RightBar/index.module.less
new file mode 100644
index 0000000..e05cf55
--- /dev/null
+++ b/src/components/RightBar/index.module.less
@@ -0,0 +1,10 @@
+.rightBar {
+}
+
+.demoFloat {
+	position: fixed;
+	top: 100px;
+	right: 600px;
+	background: #77777737;
+	z-index: 10000;
+}