From f5bda27f5e61195ba9a4b9a8605e60a5024cec29 Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Wed, 7 Sep 2022 11:35:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layout/components/sider/index.jsx | 226 ++++----- .../src/layout/containers/layout/index.jsx | 461 +++++++++--------- .../src/sections/auth/containers/login.jsx | 4 +- web/client/src/sections/example/nav-item.jsx | 12 - web/client/src/sections/example1/nav-item.jsx | 12 - 5 files changed, 337 insertions(+), 378 deletions(-) diff --git a/web/client/src/layout/components/sider/index.jsx b/web/client/src/layout/components/sider/index.jsx index e4010dd..4ee581f 100644 --- a/web/client/src/layout/components/sider/index.jsx +++ b/web/client/src/layout/components/sider/index.jsx @@ -9,133 +9,117 @@ import "./index.less"; let scrollbar = null const homePath = '/example/e1/c1' const Sider = (props) => { - const { collapsed, clientHeight, dispatch, pathname,leftItems,leftChange } = props - const [items, setItems] = useState([]) - const [selectedKeys, setSelectedKeys] = useState([]) - const [openKeys, setOpenKeys] = useState([]) - useEffect(() => { - const { sections, dispatch, user } = props; - let nextItems = leftItems - let pathname_ = pathname == '/' ? homePath : pathname - const initKeys = (items, lastKeys) => { - console.log('1111111',items); - for (let it of items) { - if (it.to && it.to == pathname_) { - lastKeys.selectedKeys.push(it.itemKey) - return lastKeys - } else if (it.items && it.items.length) { - const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) - preLastKeys.openKeys.push(it.itemKey) - const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) - if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { - return nextKeys - } - } - } - return lastKeys - return { - selectedKeys: [], - openKeys: [] - } - } - setItems(nextItems) - const { selectedKeys, openKeys } = initKeys( - nextItems, - { - selectedKeys: [], - openKeys: [] - } - ) - if (selectedKeys.length || openKeys.length) { - setSelectedKeys(selectedKeys) - setOpenKeys(openKeys) - } else { - const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider') - if (lastSelectedKeys) { - setSelectedKeys(JSON.parse(lastSelectedKeys)) - } - const lastOpenKeys = localStorage.getItem('vcmp_open_sider') - if (lastOpenKeys) { + const { collapsed, clientHeight, dispatch, pathname, leftItems, leftChange } = props + const [items, setItems] = useState([]) + const [selectedKeys, setSelectedKeys] = useState([]) + const [openKeys, setOpenKeys] = useState([]) + useEffect(() => { + const { sections, dispatch, user } = props; + let nextItems = leftItems + // let pathname_ = pathname == '/' ? homePath : pathname + // const initKeys = (items, lastKeys) => { + // // console.log('1111111',items); + // for (let it of items) { + // if (it.to && it.to == pathname_) { + // // console.log('22222222222',it.itemKey); + // lastKeys.selectedKeys.push(it.itemKey) + // return lastKeys + // } else if (it.items && it.items.length) { + // const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) + // preLastKeys.openKeys.push(it.itemKey) + // const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) + // if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { + // return nextKeys + // } + // } + // } + // return lastKeys + // return { + // selectedKeys: [], + // openKeys: [] + // } + // } + setItems(nextItems) + // const { selectedKeys, openKeys } = initKeys( + // nextItems, + // { + // selectedKeys: [], + // openKeys: [] + // } + // ) + // if (selectedKeys.length || openKeys.length) { + // setSelectedKeys(selectedKeys) + // setOpenKeys(openKeys) + // } else { + // const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider') + // if (lastSelectedKeys) { + // setSelectedKeys(JSON.parse(lastSelectedKeys)) + // } + // const lastOpenKeys = localStorage.getItem('vcmp_open_sider') + // if (lastOpenKeys) { + // setOpenKeys(JSON.parse(lastOpenKeys)) + // } + // } + + scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true }); + if (pathname == '/') { + dispatch(push(homePath)) + } + }, [leftItems]) + let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的 + let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的 + let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的 + useEffect(() => { + if (routeSelectedKeyss[0]) { + setSelectedKeys(routeSelectedKeyss) + } + else if (routeSelectedKeys[0]) { + setSelectedKeys(routeSelectedKeys) + } + else { + setSelectedKeys(routeSelectedKey) + } + const lastOpenKeys = localStorage.getItem('vcmp_open_sider') + if (lastOpenKeys) { setOpenKeys(JSON.parse(lastOpenKeys)) - } - } + } + }, [window.localStorage.vcmp_open_sider, window.localStorage.vcmp_selected_sider, leftChange]) - scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true }); - if (pathname == '/') { - dispatch(push(homePath)) - } - }, [leftItems]) - let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的 - let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的 - let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的 - useEffect(()=>{ - let pathname_ = pathname == '/' ? homePath : pathname - const initKeys = (items, lastKeys) => { - for (let it of items) { - if (it.to && it.to == pathname_) { - lastKeys.selectedKeys.push(it.itemKey) - return lastKeys - } else if (it.items && it.items.length) { - const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) - preLastKeys.openKeys.push(it.itemKey) - const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) - if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { - return nextKeys - } - } - } - return lastKeys - } - if(routeSelectedKeyss[0]){ - setSelectedKeys(routeSelectedKeyss) - } - else if(routeSelectedKeys[0]){ - setSelectedKeys(routeSelectedKeys) - } - else{ - setSelectedKeys(routeSelectedKey) - } - const lastOpenKeys = localStorage.getItem('vcmp_open_sider') - if (lastOpenKeys) { - setOpenKeys(JSON.parse(lastOpenKeys)) - } - },[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider,leftChange]) + useEffect(() => { + if (scrollbar) { + scrollbar.update(); + } + }) + return ( +
+
+ ) } function mapStateToProps (state) { - const { global } = state; - return { - clientHeight: global.clientHeight, - }; + const { global } = state; + return { + clientHeight: global.clientHeight, + }; } export default connect(mapStateToProps)(Sider); \ No newline at end of file diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index 315cd55..6c3f876 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -11,7 +11,7 @@ import * as NProgress from 'nprogress'; import PerfectScrollbar from 'perfect-scrollbar'; NProgress.configure({ - template: ` + template: `
@@ -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: (
{msg.name}
已上线。
), - 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: (
{msg.name}
发生离线。
), - 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 ( - - { - <> - -
{ - 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: (
{msg.name}
已上线。
), + duration: 2, + }) + } + if (msg.online == 'OFF') { + Notification.error({ + title: 'Hi', + content: (
{msg.name}
发生离线。
), + duration: 2, + }) + } + }); + return () => { + socket.off("CAMERA_ONLINE"); + } + } + }, [socket]) + + return ( + + { + <> + +
{ + 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); - }} - /> - - - {leftShow?( - - ):('')} - -
-
-
- {children} -
- -
- -
-
- - - - } - - ) + else { + setLeftShow(false) + } + history.push(val.to); + }} + /> + + + {leftShow ? ( + + ) : ('')} + +
+
+
+ {children} +
+ +
+ +
+
+ + + + } + + ) } 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); \ No newline at end of file diff --git a/web/client/src/sections/auth/containers/login.jsx b/web/client/src/sections/auth/containers/login.jsx index 69aa086..552086c 100644 --- a/web/client/src/sections/auth/containers/login.jsx +++ b/web/client/src/sections/auth/containers/login.jsx @@ -20,9 +20,7 @@ const Login = props => { useEffect(() => { if (user && user.authorized) { - dispatch(push('/example/e1/c1')); - localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr'])) - localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse'])) + dispatch(push('/console')); } }, [user]) diff --git a/web/client/src/sections/example/nav-item.jsx b/web/client/src/sections/example/nav-item.jsx index 430fc85..e7018a0 100644 --- a/web/client/src/sections/example/nav-item.jsx +++ b/web/client/src/sections/example/nav-item.jsx @@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) { text: '举个棒子1', icon: , to: '/example/e1/c1', - fatherKey:'example', items: [{ itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1' }] @@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) { text: '举个棒子2', icon: , to: '/example/e2/c2', - fatherKey:'example', items: [{ itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2' }] @@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) { ] }, ] - // ,[ - // { - // itemKey: 'equipmentWarehouse', text: '设备仓库', icon:, - // items: [ - // { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' }, - // { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' }, - // { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' }, - // ] - // }, - // ] ); } \ No newline at end of file diff --git a/web/client/src/sections/example1/nav-item.jsx b/web/client/src/sections/example1/nav-item.jsx index ba0443e..e48fafb 100644 --- a/web/client/src/sections/example1/nav-item.jsx +++ b/web/client/src/sections/example1/nav-item.jsx @@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) { text: '举个棒子3', icon: , to: '/example/e3/c3', - fatherKey:'example1', items: [{ itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3' }] @@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) { text: '举个棒子4', icon: , to: '/example/e4/c4', - fatherKey:'example1', items: [{ itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4' }] @@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) { ] }, ] - // ,[ - // { - // itemKey: 'equipmentWarehouse', text: '设备仓库', icon:, - // items: [ - // { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' }, - // { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' }, - // { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' }, - // ] - // }, - // ] ); } \ No newline at end of file