头部 90%

web/client/src/sections/bigScreen/components/header.js

@@ -4,8 +4,7 @@ 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 Header = ({ user, module, setModule }) => {
-
+const Header = ({ dispatch, actions, user, module, setModule, history }) => {
 
 
 
@@ -13,25 +12,29 @@ const Header = ({ user, module, setModule }) => {
    return <div style={{ width: '100%', heigh: '100%' }}>
       <div style={{
          width: '100%', height: 130,
-         backgroundImage: 'url(/assets/images/monitor/header-bg.png)',
-         backgroundSize: 'cover',
-         backgroundPosition: 'center',
          display: 'flex',
          justifyContent: 'space-between',
+         alignItems: 'center'
       }}>
-         <div style={{ width: 140 }}>天气</div>
-         <div style={{
+         <div style={{ width: 200, color: 'white', }}>天气</div>
+         {/* <div style={{
             width: 424, lineHeight: '136px',
             fontFamily: 'YouSheBiaoTiHei', fontSize: 43, color: '#E2F8FF', letterSpacing: 4, fontWeight: 600
-         }}>泵站自动化控制系统</div>
-         <div>
+         }}>泵站自动化控制系统</div> */}
+         <div style={{ width: 200, color: 'white', display: 'flex', alignItems: 'center' }}>
             <div style={{
-               width: 140, height: 52,
+               width: 130, height: 52,
                backgroundImage: 'url(/assets/images/monitor/user.png)',
                backgroundSize: 'cover',
-               backgroundPosition: 'center'
-            }}>{user?.name}
+               backgroundPosition: 'center',
+               textIndent: 45, lineHeight: '52px'
+            }}>
+               {user?.name}
             </div>
+            <div style={{ cursor: "pointer" }} onClick={() => {
+               dispatch(actions.auth.logout(user));
+               history.push(`/signin`);
+            }}>退出</div>
          </div>
 
       </div>
@@ -50,17 +53,16 @@ const Header = ({ user, module, setModule }) => {
             { title: '电排远控', key: 'electrical ' },
             { title: '实时监测', key: 'realTime' },].map(v => {
                return <div key={v.key} style={{
-                  width: 80, height: 30, lineHeight: '30px',
-                  backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'chose-none'}.png)`,
-                  backgroundSize: 'center',
-                  backgroundPosition: 'center',
+                  width: 100, height: 30, lineHeight: '30px',
+                  backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'choseNone'}.png)`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: '100% 100%',
+                  backgroundRepeat: 'no-repeat',
                   color: 'white',
                }} onClick={() => setModule(v.key)}>{v.title}</div>
             })}
-
          </div>
       </div>
-
    </div >
 }
 
@@ -68,8 +70,9 @@ function mapStateToProps (state) {
    const { auth, global } = state;
    return {
       user: auth.user,
+      actions: global.actions,
       clientHeight: global.clientHeight,
-   };
+   }
 }
 
 export default connect(mapStateToProps)(Header);

web/client/src/sections/bigScreen/containers/systemManagement.js

@@ -12,7 +12,7 @@ import RealTime from '../components/realTime';
 
 const TreeNode = Tree.TreeNode;
 
-const SystemManagement = ({ clientHeight, user }) => {
+const SystemManagement = ({ clientHeight, user, history }) => {
 
    const [module, setModule] = useState('basis')
    useEffect(() => {
@@ -30,11 +30,18 @@ const SystemManagement = ({ clientHeight, user }) => {
          backgroundSize: 'cover',
          backgroundPosition: 'center'
       }}>
-         <Header module={module} setModule={setModule} />
-         {module == 'basis' ? <Basis /> : ""}
-         {module == 'capacity' ? <Capacity /> : ""}
-         {module == 'electrical' ? <Electrical /> : ""}
-         {module == 'realTime' ? <RealTime /> : ""}
+         <div style={{
+            width: '100%', height: '100%',
+            backgroundImage: 'url(/assets/images/monitor/header-bg.png)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center'
+         }}>
+            <Header module={module} setModule={setModule} history={history} />
+            {module == 'basis' ? <Basis /> : ""}
+            {module == 'capacity' ? <Capacity /> : ""}
+            {module == 'electrical' ? <Electrical /> : ""}
+            {module == 'realTime' ? <RealTime /> : ""}
+         </div>
       </div>
    )
 }