You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
321 lines
12 KiB
321 lines
12 KiB
'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';
|
|
import { useLocation } from "react-router";
|
|
|
|
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 location111 = useLocation();
|
|
const LayoutContainer = props => {
|
|
const {
|
|
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
|
|
location, match, routes, history, socket,
|
|
} = props
|
|
const [collapsed, setCollapsed] = useState(false)
|
|
|
|
NProgress.start();
|
|
|
|
const resize_ = () => {
|
|
dispatch(resize(
|
|
document.getElementById('PomsApp').clientHeight,
|
|
document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240)
|
|
));
|
|
}
|
|
function deepCopy (data) {//深拷贝
|
|
//string,number,bool,null,undefined,symbol
|
|
//object,array,date
|
|
if (data && typeof data === "object") {
|
|
//针对函数的拷贝
|
|
if (typeof data === "function") {
|
|
let tempFunc = data.bind(null);
|
|
tempFunc.prototype = deepCopy(data.prototype);
|
|
return tempFunc;
|
|
}
|
|
|
|
switch (Object.prototype.toString.call(data)) {
|
|
case "[object String]":
|
|
return data.toString();
|
|
case "[object Number]":
|
|
return Number(data.toString());
|
|
case "[object Boolean]":
|
|
return new Boolean(data.toString());
|
|
case "[object Date]":
|
|
return new Date(data.getTime());
|
|
case "[object Array]":
|
|
var arr = [];
|
|
for (let i = 0; i < data.length; i++) {
|
|
arr[i] = deepCopy(data[i]);
|
|
}
|
|
return arr;
|
|
|
|
//js自带对象或用户自定义类实例
|
|
case "[object Object]":
|
|
var obj = {};
|
|
for (let key in data) {
|
|
//会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
|
|
obj[key] = deepCopy(data[key]);
|
|
}
|
|
return obj;
|
|
}
|
|
} else {
|
|
//string,number,bool,null,undefined,symbol
|
|
return data;
|
|
}
|
|
}
|
|
const [allItems, setAllItems] = useState([])
|
|
const [headerItems, setHeaderItems] = useState([])
|
|
const [leftItems, setLeftItems] = useState([])
|
|
const [leftChange, setLeftChange] = useState(true)
|
|
const [leftShow, setLeftShow] = useState(false)
|
|
useEffect(() => {
|
|
let topItems = []//头部导航
|
|
const lastSelectedKeys = localStorage.getItem('poms_selected_sider')
|
|
let nextItems = []//所有导航
|
|
for (let c of sections) {
|
|
if (typeof c.getNavItem == 'function') {
|
|
let item = c.getNavItem(user, dispatch);
|
|
if (item) {
|
|
nextItems.push.apply(nextItems, item)
|
|
if (item.length > 0) {
|
|
for (let j = 0; j < item.length; j++) {
|
|
let itm = deepCopy(item[j]);
|
|
if (itm.hasOwnProperty('items')) {
|
|
for (let i = 0; i < itm.items.length; i++) {
|
|
itm.items[i].fatherKey = itm.itemKey
|
|
delete itm.items[i].items
|
|
}
|
|
topItems.push(itm)
|
|
}
|
|
else {
|
|
topItems.push.apply(topItems, item)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
setAllItems(nextItems)
|
|
setHeaderItems(topItems)
|
|
if (lastSelectedKeys) {//如果有缓存
|
|
for (let i = 0; i < nextItems.length; i++) {
|
|
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) {
|
|
|
|
let openArr = []
|
|
for (let j = 0; j < nextItems[i].items.length; j++) {
|
|
openArr.push(nextItems[i].items[j].itemKey)
|
|
}
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
|
|
setLeftItems(nextItems[i].items)
|
|
}
|
|
}
|
|
setLeftShow(true)
|
|
}
|
|
else {
|
|
setLeftShow(false)
|
|
}
|
|
|
|
window.addEventListener('resize', resize_);
|
|
return () => {
|
|
window.removeEventListener('resize', resize_);
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
let pathnameArr = location.pathname.split('/')
|
|
let openArr = []
|
|
for (let i = 0; i < allItems.length; i++) {
|
|
if (allItems[i].items) {
|
|
for (let j = 0; j < allItems[i].items.length; j++) {
|
|
if (allItems[i].items[j].items) {
|
|
for (let k = 0; k < allItems[i].items[j].items.length; k++) {
|
|
if (allItems[i].items[j].items[k].to == location.pathname) {
|
|
for (let o = 0; o < allItems[i].items.length; o++) {
|
|
openArr.push(allItems[i].items[o].itemKey)
|
|
}
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]]))
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
|
|
setLeftItems(allItems[i].items)
|
|
setLeftShow(true)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, [location])
|
|
|
|
useEffect(() => {
|
|
NProgress.done();
|
|
if ((!user || !user.authorized)) {
|
|
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%' }}>
|
|
{
|
|
<>
|
|
<Layout.Header>
|
|
<Header
|
|
headerItems={headerItems}
|
|
user={user}
|
|
pathname={location.pathname}
|
|
toggleCollapsed={() => {
|
|
setCollapsed(!collapsed);
|
|
}}
|
|
collapsed={collapsed}
|
|
history={history}
|
|
tochange={(val) => {
|
|
setLeftChange(!leftChange)
|
|
if (val.fatherKey) {
|
|
for (let i = 0; i < allItems.length; i++) {
|
|
if (val.fatherKey == allItems[i].itemKey) {
|
|
let openArr = []
|
|
for (let j = 0; j < allItems[i].items.length; j++) {
|
|
openArr.push(allItems[i].items[j].itemKey)
|
|
}
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey]))
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
|
|
setLeftItems(allItems[i].items)
|
|
}
|
|
}
|
|
setLeftShow(true)
|
|
}
|
|
else {
|
|
localStorage.setItem('poms_open_sider', JSON.stringify([]))
|
|
localStorage.removeItem('poms_selected_sider')
|
|
setLeftShow(false)
|
|
}
|
|
history.push(val.to);
|
|
}}
|
|
/>
|
|
</Layout.Header>
|
|
<Layout style={{ height: 'calc(100% - 50px)' }}>
|
|
{leftShow ? (<Layout.Sider>
|
|
<Sider
|
|
sections={sections}
|
|
leftItems={leftItems}
|
|
dispatch={dispatch}
|
|
user={user}
|
|
leftChange={leftChange}
|
|
pathname={location.pathname}
|
|
collapsed={collapsed}
|
|
/>
|
|
</Layout.Sider>) : ('')}
|
|
<Layout.Content>
|
|
<div style={{
|
|
background: "#F2F3F5",
|
|
}}>
|
|
<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);
|