free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

release_0.0.1
巴林闲侠 3 years ago
parent
4ae13f8ff6 8596e5c6a0
commit
f7f9b309f0
5 changed files with 337 additions and 378 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      web/client/src/layout/components/sider/index.jsx
  2. 21
      web/client/src/layout/containers/layout/index.jsx
  3. 4
      web/client/src/sections/auth/containers/login.jsx
  4. 12
      web/client/src/sections/example/nav-item.jsx
  5. 12
      web/client/src/sections/example1/nav-item.jsx

118
web/client/src/layout/components/sider/index.jsx
View File

@ -9,56 +9,57 @@ import "./index.less";
let scrollbar = null let scrollbar = null
const homePath = '/example/e1/c1' const homePath = '/example/e1/c1'
const Sider = (props) => { const Sider = (props) => {
const { collapsed, clientHeight, dispatch, pathname,leftItems,leftChange } = props const { collapsed, clientHeight, dispatch, pathname, leftItems, leftChange } = props
const [items, setItems] = useState([]) const [items, setItems] = useState([])
const [selectedKeys, setSelectedKeys] = useState([]) const [selectedKeys, setSelectedKeys] = useState([])
const [openKeys, setOpenKeys] = useState([]) const [openKeys, setOpenKeys] = useState([])
useEffect(() => { useEffect(() => {
const { sections, dispatch, user } = props; const { sections, dispatch, user } = props;
let nextItems = leftItems let nextItems = leftItems
let pathname_ = pathname == '/' ? homePath : pathname // let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => { // const initKeys = (items, lastKeys) => {
console.log('1111111',items); // // console.log('1111111',items);
for (let it of items) { // for (let it of items) {
if (it.to && it.to == pathname_) { // if (it.to && it.to == pathname_) {
lastKeys.selectedKeys.push(it.itemKey) // // console.log('22222222222',it.itemKey);
return lastKeys // lastKeys.selectedKeys.push(it.itemKey)
} else if (it.items && it.items.length) { // return lastKeys
const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) // } else if (it.items && it.items.length) {
preLastKeys.openKeys.push(it.itemKey) // const preLastKeys = JSON.parse(JSON.stringify(lastKeys))
const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) // preLastKeys.openKeys.push(it.itemKey)
if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { // const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys)))
return nextKeys // if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) {
} // return nextKeys
} // }
} // }
return lastKeys // }
return { // return lastKeys
selectedKeys: [], // return {
openKeys: [] // selectedKeys: [],
} // openKeys: []
} // }
// }
setItems(nextItems) setItems(nextItems)
const { selectedKeys, openKeys } = initKeys( // const { selectedKeys, openKeys } = initKeys(
nextItems, // nextItems,
{ // {
selectedKeys: [], // selectedKeys: [],
openKeys: [] // openKeys: []
} // }
) // )
if (selectedKeys.length || openKeys.length) { // if (selectedKeys.length || openKeys.length) {
setSelectedKeys(selectedKeys) // setSelectedKeys(selectedKeys)
setOpenKeys(openKeys) // setOpenKeys(openKeys)
} else { // } else {
const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider') // const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider')
if (lastSelectedKeys) { // if (lastSelectedKeys) {
setSelectedKeys(JSON.parse(lastSelectedKeys)) // setSelectedKeys(JSON.parse(lastSelectedKeys))
} // }
const lastOpenKeys = localStorage.getItem('vcmp_open_sider') // const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
if (lastOpenKeys) { // if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys)) // setOpenKeys(JSON.parse(lastOpenKeys))
} // }
} // }
scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true }); scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
if (pathname == '/') { if (pathname == '/') {
@ -68,38 +69,21 @@ const Sider = (props) => {
let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的 let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的
let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的 let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的
let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的 let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//有子目录的
useEffect(()=>{ useEffect(() => {
let pathname_ = pathname == '/' ? homePath : pathname if (routeSelectedKeyss[0]) {
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) setSelectedKeys(routeSelectedKeyss)
} }
else if(routeSelectedKeys[0]){ else if (routeSelectedKeys[0]) {
setSelectedKeys(routeSelectedKeys) setSelectedKeys(routeSelectedKeys)
} }
else{ else {
setSelectedKeys(routeSelectedKey) setSelectedKeys(routeSelectedKey)
} }
const lastOpenKeys = localStorage.getItem('vcmp_open_sider') const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
if (lastOpenKeys) { if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys)) setOpenKeys(JSON.parse(lastOpenKeys))
} }
},[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider,leftChange]) }, [window.localStorage.vcmp_open_sider, window.localStorage.vcmp_selected_sider, leftChange])
useEffect(() => { useEffect(() => {
if (scrollbar) { if (scrollbar) {
@ -107,9 +91,9 @@ const Sider = (props) => {
} }
}) })
return ( return (
<div id={'page-slider'} style={{ height: clientHeight, position: 'relative',background:'#101531',width:180 }}> <div id={'page-slider'} style={{ height: clientHeight, position: 'relative', background: '#101531', width: 180 }}>
<Nav <Nav
style={{background:'#101531',width:180,padding:0}} style={{ background: '#101531', width: 180, padding: 0 }}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
openKeys={openKeys} openKeys={openKeys}

21
web/client/src/layout/containers/layout/index.jsx
View File

@ -38,7 +38,7 @@ const LayoutContainer = props => {
document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240) document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240)
)); ));
} }
function deepCopy(data) {//深拷贝 function deepCopy (data) {//深拷贝
//string,number,bool,null,undefined,symbol //string,number,bool,null,undefined,symbol
//object,array,date //object,array,date
if (data && typeof data === "object") { if (data && typeof data === "object") {
@ -94,11 +94,11 @@ const LayoutContainer = props => {
if (item) { if (item) {
nextItems.push.apply(nextItems, item) nextItems.push.apply(nextItems, item)
if (item.length > 0) { if (item.length > 0) {
let itm = deepCopy(item[0]); for (let j = 0; j < item.length; j++) {
let itms=deepCopy(item[0]); let itm = deepCopy(item[j]);
if (itm.hasOwnProperty('items')) { if (itm.hasOwnProperty('items')) {
// siderItems.push.apply(siderItems, itms.items)
for (let i = 0; i < itm.items.length; i++) { for (let i = 0; i < itm.items.length; i++) {
itm.items[i].fatherKey=itm.itemKey
delete itm.items[i].items delete itm.items[i].items
} }
topItems.push(itm) topItems.push(itm)
@ -110,6 +110,7 @@ const LayoutContainer = props => {
} }
} }
} }
}
setLeftShow(false) setLeftShow(false)
setAllItems(nextItems) setAllItems(nextItems)
setHeaderItems(topItems) setHeaderItems(topItems)
@ -198,15 +199,15 @@ const LayoutContainer = props => {
history={history} history={history}
tochange={(val) => { tochange={(val) => {
setLeftChange(!leftChange) setLeftChange(!leftChange)
if(val.fatherKey){ if (val.fatherKey) {
for (let i = 0; i < allItems.length; i++) { for (let i = 0; i < allItems.length; i++) {
if(val.fatherKey==allItems[i].itemKey){ if (val.fatherKey == allItems[i].itemKey) {
setLeftItems(allItems[i].items) setLeftItems(allItems[i].items)
} }
} }
setLeftShow(true) setLeftShow(true)
} }
else{ else {
setLeftShow(false) setLeftShow(false)
} }
history.push(val.to); history.push(val.to);
@ -214,7 +215,7 @@ const LayoutContainer = props => {
/> />
</Layout.Header> </Layout.Header>
<Layout style={{ height: 'calc(100% - 60px)' }}> <Layout style={{ height: 'calc(100% - 60px)' }}>
{leftShow?(<Layout.Sider> {leftShow ? (<Layout.Sider>
<Sider <Sider
sections={sections} sections={sections}
leftItems={leftItems} leftItems={leftItems}
@ -224,11 +225,11 @@ const LayoutContainer = props => {
pathname={location.pathname} pathname={location.pathname}
collapsed={collapsed} collapsed={collapsed}
/> />
</Layout.Sider>):('')} </Layout.Sider>) : ('')}
<Layout.Content> <Layout.Content>
<div style={{ <div style={{
margin: '12px 12px 0px', margin: '12px 12px 0px',
background: "#F2F3F5", background: "#F6FAFF",
}}> }}>
<div id="page-content" style={{ <div id="page-content" style={{
height: clientHeight - 12, height: clientHeight - 12,

4
web/client/src/sections/auth/containers/login.jsx
View File

@ -20,9 +20,7 @@ const Login = props => {
useEffect(() => { useEffect(() => {
if (user && user.authorized) { if (user && user.authorized) {
dispatch(push('/example/e1/c1')); dispatch(push('/console'));
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
} }
}, [user]) }, [user])

12
web/client/src/sections/example/nav-item.jsx
View File

@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子1', text: '举个棒子1',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e1/c1', to: '/example/e1/c1',
fatherKey:'example',
items: [{ items: [{
itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1' itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
}] }]
@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子2', text: '举个棒子2',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e2/c2', to: '/example/e2/c2',
fatherKey:'example',
items: [{ items: [{
itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2' itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2'
}] }]
@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) {
] ]
}, },
] ]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '设备仓库', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' },
// ]
// },
// ]
); );
} }

12
web/client/src/sections/example1/nav-item.jsx
View File

@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子3', text: '举个棒子3',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e3/c3', to: '/example/e3/c3',
fatherKey:'example1',
items: [{ items: [{
itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3' itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3'
}] }]
@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子4', text: '举个棒子4',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e4/c4', to: '/example/e4/c4',
fatherKey:'example1',
items: [{ items: [{
itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4' itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4'
}] }]
@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) {
] ]
}, },
] ]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '设备仓库', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' },
// ]
// },
// ]
); );
} }
Write Preview
Loading…
Cancel
Save