diff --git a/web/client/assets/images/monitor/left.png b/web/client/assets/images/monitor/left.png
new file mode 100644
index 0000000..dc616ac
Binary files /dev/null and b/web/client/assets/images/monitor/left.png differ
diff --git a/web/client/assets/images/monitor/pillar.png b/web/client/assets/images/monitor/pillar.png
new file mode 100644
index 0000000..3321f36
Binary files /dev/null and b/web/client/assets/images/monitor/pillar.png differ
diff --git a/web/client/assets/images/monitor/right.png b/web/client/assets/images/monitor/right.png
new file mode 100644
index 0000000..cd19530
Binary files /dev/null and b/web/client/assets/images/monitor/right.png differ
diff --git a/web/client/src/sections/bigScreen/components/basis.js b/web/client/src/sections/bigScreen/components/basis.js
index 3e2f4f8..4ce2613 100644
--- a/web/client/src/sections/bigScreen/components/basis.js
+++ b/web/client/src/sections/bigScreen/components/basis.js
@@ -9,7 +9,7 @@ const Basis = ({ user, module, setModule }) => {
 
 
 
-   return <div style={{ width: '100%', heigh: '100%' }}>
+   return <div style={{ width: '100%', height: '100%' }}>
     基础信息
 
    </div >
diff --git a/web/client/src/sections/bigScreen/components/capacity.js b/web/client/src/sections/bigScreen/components/capacity.js
index 5091abd..a22d328 100644
--- a/web/client/src/sections/bigScreen/components/capacity.js
+++ b/web/client/src/sections/bigScreen/components/capacity.js
@@ -4,14 +4,45 @@ import { Spin, Card, Modal, TreeSelect, message } from 'antd';
 import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
 import Title from 'antd/lib/skeleton/Title';
 
-const Capacity = ({ user,  }) => {
-
-
-
-
-
-   return <div style={{ width: '100%', heigh: '100%' }}>
-     能耗监测
+const Capacity = ({ user, }) => {
+
+
+
+
+
+   return <div style={{ width: '100%', height: 'calc(100% - 160px)' }}>
+
+      <div style={{ width: '100%', height: 'calc(60%)', display: 'flex', }}>
+         <div style={{
+            width: '30%', height: '100%', borderRight: '1px solid white', display: 'flex', justifyContent: 'center',
+         }}>
+            <div style={{ width: '80%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+               <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/left.png" />
+               <div style={{ display: 'flex', }}>
+                  <div>
+                     
+                  </div>
+               </div>
+               <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/right.png" />
+
+            </div>
+         </div>
+         <div style={{
+            width: '40%', height: '100%', borderRight: '1px solid white',
+            backgroundImage: 'url(/assets/images/monitor/pillar.png)',
+            backgroundSize: '80% 80%',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+         }}>
+
+         </div>
+         <div style={{ width: '30%', height: '100%', }}></div>
+      </div>
+      <div style={{ width: '100%', height: 'calc(40% - 1px)', borderTop: '1px solid white', display: 'flex', }}>
+         <div style={{ width: '33%', height: '100%', borderRight: '1px solid white' }}></div>
+         <div style={{ width: '33%', height: '100%', borderRight: '1px solid white' }}></div>
+         <div style={{ width: '33%', height: '100%', }}></div>
+      </div>
    </div >
 }
 
@@ -23,4 +54,4 @@ function mapStateToProps (state) {
    };
 }
 
-export default connect(mapStateToProps)(Capacity);
\ No newline at end of file
+export default connect(mapStateToProps)(Capacity); 
\ No newline at end of file
diff --git a/web/client/src/sections/bigScreen/components/electrical.js b/web/client/src/sections/bigScreen/components/electrical.js
index 12465e0..6df4b9c 100644
--- a/web/client/src/sections/bigScreen/components/electrical.js
+++ b/web/client/src/sections/bigScreen/components/electrical.js
@@ -10,7 +10,7 @@ const Electrical = ({ user, module, setModule }) => {
 
 
 
-   return <div style={{ width: '100%', heigh: '100%' }}>
+   return <div style={{ width: '100%', height: '100%' }}>
       电排远控
 
    </div >
diff --git a/web/client/src/sections/bigScreen/components/header.js b/web/client/src/sections/bigScreen/components/header.js
index cf2887d..834a501 100644
--- a/web/client/src/sections/bigScreen/components/header.js
+++ b/web/client/src/sections/bigScreen/components/header.js
@@ -9,7 +9,7 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
 
 
 
-   return <div style={{ width: '100%', heigh: '100%' }}>
+   return <div style={{ width: '100%', height: 160 }}>
       <div style={{
          width: '100%', height: 130,
          display: 'flex',
@@ -25,7 +25,7 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
             <div style={{
                width: 130, height: 52,
                backgroundImage: 'url(/assets/images/monitor/user.png)',
-               backgroundSize: 'cover',
+               backgroundSize: '100% 100%',
                backgroundPosition: 'center',
                textIndent: 45, lineHeight: '52px'
             }}>
@@ -40,9 +40,9 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
       </div>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{
-            width: '45%', height: 44, textAlign: 'center',
+            width: '45%', height: 30, textAlign: 'center',
             backgroundImage: 'url(/assets/images/monitor/strip.png)',
-            backgroundSize: '100% 25%',
+            backgroundSize: '100% 50%',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',
             display: 'flex',
@@ -55,7 +55,7 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
                return <div key={v.key} style={{
                   width: 100, height: 30, lineHeight: '30px',
                   backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'choseNone'}.png)`,
-                  backgroundSize: 'cover',
+                  backgroundSize: '100% 100%',
                   backgroundPosition: '100% 100%',
                   backgroundRepeat: 'no-repeat',
                   color: 'white',
diff --git a/web/client/src/sections/bigScreen/components/realTime.js b/web/client/src/sections/bigScreen/components/realTime.js
index a9ea597..545388e 100644
--- a/web/client/src/sections/bigScreen/components/realTime.js
+++ b/web/client/src/sections/bigScreen/components/realTime.js
@@ -10,7 +10,7 @@ const RealTime = ({ user, module, setModule }) => {
 
 
 
-   return <div style={{ width: '100%', heigh: '100%' }}>
+   return <div style={{ width: '100%', height: '100%' }}>
     实时监测
    </div >
 }
diff --git a/web/client/src/sections/bigScreen/containers/systemManagement.js b/web/client/src/sections/bigScreen/containers/systemManagement.js
index 35a87ed..b73b3bd 100644
--- a/web/client/src/sections/bigScreen/containers/systemManagement.js
+++ b/web/client/src/sections/bigScreen/containers/systemManagement.js
@@ -27,13 +27,13 @@ const SystemManagement = ({ clientHeight, user, history }) => {
       <div style={{
          width: '100vw', height: '100vh',
          backgroundImage: 'url(/assets/images/monitor/screen-bg.png)',
-         backgroundSize: 'cover',
+         backgroundSize: '100% 100%',
          backgroundPosition: 'center'
       }}>
          <div style={{
             width: '100%', height: '100%',
             backgroundImage: 'url(/assets/images/monitor/header-bg.png)',
-            backgroundSize: 'cover',
+            backgroundSize: '100% 100%',
             backgroundPosition: 'center'
          }}>
             <Header module={module} setModule={setModule} history={history} />