|
|
|
@ -11,7 +11,7 @@ import * as NProgress from 'nprogress'; |
|
|
|
import PerfectScrollbar from 'perfect-scrollbar'; |
|
|
|
|
|
|
|
NProgress.configure({ |
|
|
|
template: ` |
|
|
|
template: ` |
|
|
|
<div class="bar" style="height:2px" role="bar"> |
|
|
|
<div class="peg"></div> |
|
|
|
</div> |
|
|
|
@ -24,250 +24,251 @@ NProgress.configure({ |
|
|
|
let scrollbar |
|
|
|
|
|
|
|
const LayoutContainer = props => { |
|
|
|
const { |
|
|
|
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, |
|
|
|
location, match, routes, history, socket, |
|
|
|
} = props |
|
|
|
const [collapsed, setCollapsed] = useState(false) |
|
|
|
const { |
|
|
|
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, |
|
|
|
location, match, routes, history, socket, |
|
|
|
} = props |
|
|
|
const [collapsed, setCollapsed] = useState(false) |
|
|
|
|
|
|
|
NProgress.start(); |
|
|
|
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 resize_ = () => { |
|
|
|
dispatch(resize( |
|
|
|
document.getElementById('PomsApp').clientHeight, |
|
|
|
document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240) |
|
|
|
)); |
|
|
|
} |
|
|
|
} |
|
|
|
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 = []//头部导航 |
|
|
|
// let siderItems = []//侧边导航 |
|
|
|
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) { |
|
|
|
let itm = deepCopy(item[0]); |
|
|
|
let itms=deepCopy(item[0]); |
|
|
|
if (itm.hasOwnProperty('items')) { |
|
|
|
// siderItems.push.apply(siderItems, itms.items) |
|
|
|
for (let i = 0; i < itm.items.length; i++) { |
|
|
|
delete itm.items[i].items |
|
|
|
} |
|
|
|
topItems.push(itm) |
|
|
|
} |
|
|
|
else { |
|
|
|
topItems.push.apply(topItems, item) |
|
|
|
} |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setLeftShow(false) |
|
|
|
setAllItems(nextItems) |
|
|
|
setHeaderItems(topItems) |
|
|
|
// setLeftItems(siderItems) |
|
|
|
|
|
|
|
window.addEventListener('resize', resize_); |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, []) |
|
|
|
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; |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
//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 = []//头部导航 |
|
|
|
// let siderItems = []//侧边导航 |
|
|
|
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) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setLeftShow(false) |
|
|
|
setAllItems(nextItems) |
|
|
|
setHeaderItems(topItems) |
|
|
|
// setLeftItems(siderItems) |
|
|
|
|
|
|
|
window.addEventListener('resize', resize_); |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, []) |
|
|
|
|
|
|
|
// 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, |
|
|
|
}) |
|
|
|
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, |
|
|
|
}) |
|
|
|
} |
|
|
|
if (msg.online == 'OFF') { |
|
|
|
Notification.error({ |
|
|
|
title: 'Hi', |
|
|
|
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>), |
|
|
|
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; |
|
|
|
} |
|
|
|
}); |
|
|
|
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){ |
|
|
|
setLeftItems(allItems[i].items) |
|
|
|
|
|
|
|
// 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) { |
|
|
|
setLeftItems(allItems[i].items) |
|
|
|
} |
|
|
|
} |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
} |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
else{ |
|
|
|
setLeftShow(false) |
|
|
|
} |
|
|
|
history.push(val.to); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Layout.Header> |
|
|
|
<Layout style={{ height: 'calc(100% - 60px)' }}> |
|
|
|
{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={{ |
|
|
|
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 > |
|
|
|
) |
|
|
|
else { |
|
|
|
setLeftShow(false) |
|
|
|
} |
|
|
|
history.push(val.to); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Layout.Header> |
|
|
|
<Layout style={{ height: 'calc(100% - 60px)' }}> |
|
|
|
{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={{ |
|
|
|
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 |
|
|
|
}; |
|
|
|
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); |
deartibers
3 years ago