FS-IOT/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx

'use strict';

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Layout, Notification } from '@douyinfe/semi-ui';
import Sider from '../../components/sider';
import Header from '../../components/header';
import Footer from '../../components/footer';
import { resize } from '../../actions/global';
import * as NProgress from 'nprogress';
import PerfectScrollbar from 'perfect-scrollbar';

NProgress.configure({
   template: `
    <div class="bar" style="height:2px" role="bar">
        <div class="peg"></div>
    </div>
    <div class="spinner" role="spinner">
        <div class="spinner-icon"></div>
    </div>
    `
});

let scrollbar

const LayoutContainer = props => {
   const {
      dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
      location, match, routes, history, authCrossLoading, socket,
      microAppWaiting
   } = props
   const [collapsed, setCollapsed] = useState(false)

   NProgress.start();

   const resize_ = () => {
      dispatch(resize(
         document.getElementById('VcmpApp').clientHeight,
         document.getElementById('VcmpApp').clientWidth - (collapsed ? 120 : 240)
      ));
   }

   useEffect(() => {
      window.addEventListener('resize', resize_);
      return () => {
         window.removeEventListener('resize', resize_);
      }
   }, [])

   useEffect(() => {
      NProgress.done();
      if ((!user || !user.authorized) && !authCrossLoading && props.location.pathname != '/video_play_status'&& props.location.pathname != '/callService') {
         history.push('/signin');
      }
      if (msg) {
         if (msg.done) {
            Notification.success({
               // title: msg.done,
               content: msg.done,
               duration: 2,
            })
         }
         if (msg.error) {
            Notification.error({
               // title: msg.error,
               content: msg.error,
               duration: 2,
            })
         }
      }
      const dom = document.getElementById('page-content');
      if (dom) {
         if (!scrollbar) {
            scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true });
            scrollbar.update();
         } else {
            scrollbar.update();
            dom.scrollTop = 0;
         }
      }
   })


   // websocket 使用测试
   useEffect(() => {
      // console.log(socket)
      if (socket) {
         socket.on('CAMERA_ONLINE', function (msg) {
            console.info(msg);
            if (msg.online == 'ON') {
               Notification.success({
                  title: 'Hi',
                  content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>),
                  duration: 2,
               })
            }
            if (msg.online == 'OFF') {
               Notification.error({
                  title: 'Hi',
                  content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>),
                  duration: 2,
               })
            }
         });
         return () => {
            socket.off("CAMERA_ONLINE");
         }
      }
   }, [socket])

   return (
      <Layout id="layout" style={{ height: '100%' }}>
         {
            authCrossLoading || microAppWaiting ?
               <div style={{
                  // position: 'absolute',
                  height: '100%', width: '100%',
                  display: 'flex', alignItems: 'center', placeContent: 'center',
                  backgroundColor: "#000"
               }}>
                  <video
                     autoPlay loop muted
                     style={{}}
                     src={`${__webpack_public_path__}assets/video/cross_loading.mp4`}
                     type="video/mp4"
                  />
               </div>
               :
               <>
                  <Layout.Header>
                     <Header
                        user={user}
                        pathname={location.pathname}
                        toggleCollapsed={() => {
                           setCollapsed(!collapsed);
                        }}
                        collapsed={collapsed}
                        history={history}
                     />
                  </Layout.Header>
                  <Layout style={{ height: 'calc(100% - 60px)' }}>
                     <Layout.Sider>
                        <Sider
                           sections={sections}
                           dispatch={dispatch}
                           user={user}
                           pathname={location.pathname}
                           collapsed={collapsed}
                        />
                     </Layout.Sider>
                     <Layout.Content>
                        <div style={{
                           margin: '12px 12px 0px',
                           background: "#F6FAFF",
                        }}>
                           <div id="page-content" style={{
                              height: clientHeight - 12,
                              minWidth: 520,
                              position: 'relative',
                           }}>
                              <div style={{
                                 minHeight: clientHeight - 32 - 12,
                                 position: 'relative',
                                 padding: '12px 8px',
                              }}>
                                 {children}
                              </div>
                              <Layout.Footer>
                                 <Footer />
                              </Layout.Footer>
                           </div>
                        </div>
                     </Layout.Content>
                  </Layout>
               </>
         }
      </Layout >
   )
}

function mapStateToProps (state) {
   const { global, auth, ajaxResponse, webSocket } = state;
   return {
      title: global.title,
      copyright: global.copyright,
      sections: global.sections,
      actions: global.actions,
      clientWidth: global.clientWidth,
      clientHeight: global.clientHeight,
      msg: ajaxResponse.msg,
      user: auth.user,
      socket: webSocket.socket
   };
}

export default connect(mapStateToProps)(LayoutContainer);