38 changed files with 660 additions and 253 deletions
|
After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,125 +1,138 @@ |
|||||
"use strict"; |
"use strict"; |
||||
import React from "react"; |
import React from "react"; |
||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui"; |
import { SplitButtonGroup, Dropdown, Button, Nav, Avatar } from '@douyinfe/semi-ui'; |
||||
|
import { IconTreeTriangleDown } from '@douyinfe/semi-icons'; |
||||
import "./index.less"; |
import "./index.less"; |
||||
|
|
||||
const Header = (props) => { |
const Header = (props) => { |
||||
const { dispatch, history, user, actions, socket, headerItems, tochange } = props; |
const { dispatch, history, user, actions, socket, headerItems, tochange } = props; |
||||
|
|
||||
return ( |
return ( |
||||
<> |
<> |
||||
<div id="top-slider"> |
<div id="top-slider"> |
||||
<Nav |
<Nav |
||||
mode={"horizontal"} |
mode={"horizontal"} |
||||
onClick={({ itemKey }) => { |
onClick={({ itemKey }) => { |
||||
if (itemKey == "logout") { |
if (itemKey == "logout") { |
||||
dispatch(actions.auth.logout(user)); |
dispatch(actions.auth.logout(user)); |
||||
if (socket) { |
if (socket) { |
||||
socket.disconnect(); |
socket.disconnect(); |
||||
} |
} |
||||
history.push(`/signin`); |
history.push(`/signin`); |
||||
|
} |
||||
|
}} |
||||
|
style={{ |
||||
|
height: 48, |
||||
|
minWidth: 520, |
||||
|
background: '#1D2343', |
||||
|
backgroundSize: "100% 100%", |
||||
|
color: "white", |
||||
|
}} |
||||
|
header={{ |
||||
|
logo: ( |
||||
|
<img |
||||
|
src="/assets/images/install/long_logo.png" |
||||
|
style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24 }} |
||||
|
/> |
||||
|
), |
||||
|
text: ( |
||||
|
<> |
||||
|
|
||||
|
<SplitButtonGroup style={{ marginLeft: 10 }} aria-label="项目操作按钮组"> |
||||
|
<Button theme="solid" type="primary" style={{ width: 52, height: 24, background: '#005ABD' }}>全局</Button> |
||||
|
<Dropdown onVisibleChange={(v) => { }} menu={{}} trigger="click" position="bottomRight"> |
||||
|
<Button style={{ width: 16, height: 24, background: '#005ABD' }} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button> |
||||
|
</Dropdown> |
||||
|
</SplitButtonGroup> |
||||
|
</> |
||||
|
), |
||||
|
}} |
||||
|
footer={ |
||||
|
<> |
||||
|
{headerItems.map((item, index) => { |
||||
|
if (item.hasOwnProperty('items')) { |
||||
|
return ( |
||||
|
<Nav.Sub |
||||
|
key={index + 'a'} |
||||
|
itemKey={item.itemKey} |
||||
|
text={item.text} |
||||
|
dropdownStyle={{ color: '#F2F3F5' }} |
||||
|
> |
||||
|
{item.hasOwnProperty('items') && item.items.map((ite, idx) => ( |
||||
|
<Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} /> |
||||
|
))} |
||||
|
</Nav.Sub> |
||||
|
) |
||||
|
} |
||||
|
else { |
||||
|
return ( |
||||
|
<> |
||||
|
<img src="/assets/images/background/console.png" style={{ width: 24, marginRight: 10 }} /> |
||||
|
<Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} /> |
||||
|
</> |
||||
|
|
||||
|
) |
||||
|
} |
||||
|
})} |
||||
|
<Nav.Sub |
||||
|
itemKey={"user"} |
||||
|
text={ |
||||
|
<div |
||||
|
style={{ |
||||
|
marginLeft: -8, |
||||
|
display: "inline-block", |
||||
|
color: "white", |
||||
|
}} |
||||
|
> |
||||
|
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}> |
||||
|
{user?.name?.substr(0, 1)} |
||||
|
</Avatar> |
||||
|
<div style={{ |
||||
|
display: "inline-block", position: "relative", |
||||
|
top: 10, |
||||
|
left: 4, |
||||
|
marginRight: 4, |
||||
|
}} |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
} |
} |
||||
}} |
> |
||||
style={{ |
<div style={{ width: 200, padding: 16, background: '#c7bebeeb' }}> |
||||
height: 48, |
<div style={{ display: "flex" }}> |
||||
minWidth: 520, |
<Avatar size="default" color="light-blue" style={{ marginRight: 4 }}> |
||||
background: '#1D2343', |
{user?.name?.substr(0, 1)} |
||||
backgroundSize: "100% 100%", |
</Avatar> |
||||
color: "white", |
<div style={{ fontSize: 12 }}> |
||||
}} |
{user.name} |
||||
header={{ |
<div title={user?.department?.map(v => v.name + '、')} style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{user?.department?.map(v => v.name + '、')}</div> |
||||
logo: ( |
</div> |
||||
<img |
</div> |
||||
src="/assets/images/install/long_logo.png" |
<div>用户中心</div> |
||||
style={{ display: "inline-block", width: 200, height: 40 }} |
<div>安全认证</div> |
||||
/> |
</div> |
||||
), |
<Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> |
||||
// text: ( |
|
||||
// <div style={{ fontFamily: "YouSheBiaoTiHei", color: '#FFFFFF' }}>运维管理系统</div> |
|
||||
// ), |
|
||||
}} |
|
||||
footer={ |
|
||||
<> |
|
||||
{headerItems.map((item, index) => { |
|
||||
if (item.hasOwnProperty('items')) { |
|
||||
return ( |
|
||||
<Nav.Sub |
|
||||
key={index + 'a'} |
|
||||
itemKey={item.itemKey} |
|
||||
text={item.text} |
|
||||
dropdownStyle={{ color: '#F2F3F5' }} |
|
||||
> |
|
||||
{item.hasOwnProperty('items') && item.items.map((ite, idx) => ( |
|
||||
<Nav.Item key={idx + 'd'} itemKey={ite.itemKey} text={ite.text} onClick={() => { tochange(ite); }} /> |
|
||||
))} |
|
||||
</Nav.Sub> |
|
||||
) |
|
||||
} |
|
||||
else { |
|
||||
return ( |
|
||||
<Nav.Item key={index + 'a'} itemKey={item.itemKey} text={item.text} onClick={() => { tochange(item) }} /> |
|
||||
) |
|
||||
} |
|
||||
})} |
|
||||
<Nav.Sub |
|
||||
itemKey={"user"} |
|
||||
text={ |
|
||||
<div |
|
||||
style={{ |
|
||||
marginLeft: -8, |
|
||||
display: "inline-block", |
|
||||
color: "white", |
|
||||
}} |
|
||||
> |
|
||||
<Avatar size="extra-small" color="light-blue" style={{ marginRight: 4 }}> |
|
||||
{user?.name?.substr(0, 1)} |
|
||||
</Avatar> |
|
||||
<div style={{ |
|
||||
display: "inline-block", position: "relative", |
|
||||
top: 10, |
|
||||
left: 4, |
|
||||
marginRight: 4, |
|
||||
}} |
|
||||
> |
|
||||
</div> |
|
||||
</div> |
|
||||
} |
|
||||
> |
|
||||
<div style={{ width: 200, padding: 16, background: '#c7bebeeb' }}> |
|
||||
<div style={{ display: "flex" }}> |
|
||||
<Avatar size="default" color="light-blue" style={{ marginRight: 4 }}> |
|
||||
{user?.name?.substr(0, 1)} |
|
||||
</Avatar> |
|
||||
<div style={{ fontSize: 12 }}> |
|
||||
{user.name} |
|
||||
<div title={user?.department?.map(v => v.name + '、')} style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{user?.department?.map(v => v.name + '、')}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div>用户中心</div> |
|
||||
<div>安全认证</div> |
|
||||
</div> |
|
||||
<Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> |
|
||||
|
|
||||
{/* collapseButton collapseText */} |
{/* collapseButton collapseText */} |
||||
|
|
||||
|
|
||||
</Nav.Sub> |
</Nav.Sub> |
||||
</> |
</> |
||||
} |
} |
||||
/> |
/> |
||||
</div> |
</div> |
||||
</> |
</> |
||||
); |
); |
||||
}; |
}; |
||||
|
|
||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||
const { global, auth, webSocket } = state; |
const { global, auth, webSocket } = state; |
||||
return { |
return { |
||||
actions: global.actions, |
actions: global.actions, |
||||
user: auth.user, |
user: auth.user, |
||||
socket: webSocket.socket, |
socket: webSocket.socket, |
||||
}; |
}; |
||||
} |
} |
||||
|
|
||||
export default connect(mapStateToProps)(Header); |
export default connect(mapStateToProps)(Header); |
||||
|
|||||
@ -0,0 +1,2 @@ |
|||||
|
'use strict'; |
||||
|
|
||||
@ -0,0 +1,6 @@ |
|||||
|
'use strict'; |
||||
|
|
||||
|
import SetControl from './setControl'; |
||||
|
import Server from './server'; |
||||
|
import Rest from './rest'; |
||||
|
export { SetControl,Server,Rest}; |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React, { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const Rest = (props) => { |
||||
|
const { dispatch, actions, user, loading, socket } = props |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div> |
||||
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket } = state; |
||||
|
return { |
||||
|
// loading: members.isRequesting, |
||||
|
// user: auth.user, |
||||
|
// actions: global.actions, |
||||
|
// members: members.data, |
||||
|
// socket: webSocket.socket |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(Rest); |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React, { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const Server = (props) => { |
||||
|
const { dispatch, actions, user, loading, socket } = props |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div> |
||||
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket } = state; |
||||
|
return { |
||||
|
// loading: members.isRequesting, |
||||
|
// user: auth.user, |
||||
|
// actions: global.actions, |
||||
|
// members: members.data, |
||||
|
// socket: webSocket.socket |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(Server); |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React, { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const SetControl = (props) => { |
||||
|
const { dispatch, actions, user, loading, socket } = props |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div> |
||||
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket } = state; |
||||
|
return { |
||||
|
// loading: members.isRequesting, |
||||
|
// user: auth.user, |
||||
|
// actions: global.actions, |
||||
|
// members: members.data, |
||||
|
// socket: webSocket.socket |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(SetControl); |
||||
@ -0,0 +1,15 @@ |
|||||
|
'use strict'; |
||||
|
|
||||
|
import reducers from './reducers'; |
||||
|
import routes from './routes'; |
||||
|
import actions from './actions'; |
||||
|
import { getNavItem } from './nav-item'; |
||||
|
|
||||
|
export default { |
||||
|
key: 'data', |
||||
|
name: '数据', |
||||
|
reducers: reducers, |
||||
|
routes: routes, |
||||
|
actions: actions, |
||||
|
getNavItem: getNavItem |
||||
|
}; |
||||
@ -0,0 +1,37 @@ |
|||||
|
import React from 'react'; |
||||
|
import { IconCode } from '@douyinfe/semi-icons'; |
||||
|
|
||||
|
export function getNavItem (user, dispatch) { |
||||
|
return ( |
||||
|
[ |
||||
|
{ |
||||
|
itemKey: 'data', |
||||
|
text: '数据', |
||||
|
icon: <IconCode />, |
||||
|
items: [ |
||||
|
{ |
||||
|
itemKey: 'dataMonitoring', |
||||
|
text: '数据监控', |
||||
|
icon: <iconpark-icon style={{ width: 20, height: 20 }} name="iconsjjiankong"></iconpark-icon>, |
||||
|
to: '/data/dataMonitoring/dataQuery', |
||||
|
items: [{ |
||||
|
itemKey: 'dataQuery', to: '/data/dataMonitoring/dataQuery', text: '数据查询' |
||||
|
}] |
||||
|
}, { |
||||
|
itemKey: 'dataAnalysis', |
||||
|
text: '数据分析', |
||||
|
icon: <iconpark-icon style={{ width: 20, height: 20 }} name="iconsjfenxi"></iconpark-icon>, |
||||
|
to: '/data/dataAnalysis/dataComparison', |
||||
|
items: [{ |
||||
|
itemKey: 'dataComparison', to: '/data/dataAnalysis/dataComparison', text: '数据对比' |
||||
|
},{ |
||||
|
itemKey: 'dataAssociation', to: '/data/dataAnalysis/dataAssociation', text: '数据关联' |
||||
|
},{ |
||||
|
itemKey: 'notebook', to: '/data/dataAnalysis/notebook', text: 'notebook' |
||||
|
}] |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
'use strict'; |
||||
|
|
||||
|
export default { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
import { DataQuery, DataComparison, DataAssociation,Notebook } from './containers'; |
||||
|
|
||||
|
export default [{ |
||||
|
type: 'inner', |
||||
|
route: { |
||||
|
path: '/data', |
||||
|
key: 'data', |
||||
|
breadcrumb: '数据', |
||||
|
// 不设置 component 则面包屑禁止跳转
|
||||
|
childRoutes: [{ |
||||
|
path: '/dataMonitoring', |
||||
|
key: 'dataMonitoring', |
||||
|
breadcrumb: '数据监控', |
||||
|
childRoutes: [{ |
||||
|
path: '/dataQuery', |
||||
|
key: 'dataQuery', |
||||
|
component: DataQuery, |
||||
|
breadcrumb: '数据查询', |
||||
|
}] |
||||
|
}, { |
||||
|
path: '/dataAnalysis', |
||||
|
key: 'dataAnalysis', |
||||
|
breadcrumb: '数据分析', |
||||
|
childRoutes: [{ |
||||
|
path: '/dataComparison', |
||||
|
key: 'dataComparison', |
||||
|
component: DataComparison, |
||||
|
breadcrumb: '数据对比', |
||||
|
},{ |
||||
|
path: '/dataAssociation', |
||||
|
key: 'dataAssociation', |
||||
|
component: DataAssociation, |
||||
|
breadcrumb: '数据关联', |
||||
|
},{ |
||||
|
path: '/notebook', |
||||
|
key: 'notebook', |
||||
|
component: Notebook, |
||||
|
breadcrumb: 'notebook', |
||||
|
}] |
||||
|
}] |
||||
|
} |
||||
|
}]; |
||||
@ -0,0 +1,7 @@ |
|||||
|
#example { |
||||
|
box-shadow: 3px 3px 2px black; |
||||
|
} |
||||
|
|
||||
|
#example:hover { |
||||
|
color: yellowgreen; |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React, { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const Set = (props) => { |
||||
|
const { dispatch, actions, user, loading, socket } = props |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div> |
||||
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket } = state; |
||||
|
return { |
||||
|
// loading: members.isRequesting, |
||||
|
// user: auth.user, |
||||
|
// actions: global.actions, |
||||
|
// members: members.data, |
||||
|
// socket: webSocket.socket |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(Set); |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React, { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const Setup = (props) => { |
||||
|
const { dispatch, actions, user, loading, socket } = props |
||||
|
|
||||
|
useEffect(() => { |
||||
|
|
||||
|
}, []) |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<div> |
||||
|
<img src="/assets/images/install/watting.png" alt="" style={{ width: 'calc(100% + 16px)', position: "relative", top: -12, left: -8, }} /> |
||||
|
</div> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket } = state; |
||||
|
return { |
||||
|
// loading: members.isRequesting, |
||||
|
// user: auth.user, |
||||
|
// actions: global.actions, |
||||
|
// members: members.data, |
||||
|
// socket: webSocket.socket |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(Setup); |
||||
@ -1,33 +1,56 @@ |
|||||
'use strict'; |
'use strict'; |
||||
import { Roles,System } from './containers'; |
import { Roles, System,Setup,Set } from './containers'; |
||||
|
|
||||
export default [{ |
export default [ |
||||
type: 'inner', |
{ |
||||
route: { |
type: 'inner', |
||||
path: '/install', |
route: { |
||||
key: 'install', |
path: '/install', |
||||
breadcrumb: '设置', |
key: 'install', |
||||
// 不设置 component 则面包屑禁止跳转
|
breadcrumb: '设置', |
||||
childRoutes: [{ |
// 不设置 component 则面包屑禁止跳转
|
||||
path: '/authentication', |
childRoutes: [ |
||||
key: 'authentication', |
{ |
||||
breadcrumb: '鉴权管理', |
path: '/authentication', |
||||
childRoutes:[{ |
key: 'authentication', |
||||
path: '/roles', |
breadcrumb: '鉴权管理', |
||||
key: 'roles', |
childRoutes: [{ |
||||
component: Roles, |
path: '/roles', |
||||
breadcrumb: '人员及角色', |
key: 'roles', |
||||
}] |
component: Roles, |
||||
},{ |
breadcrumb: '人员及角色', |
||||
path: '/mapping', |
}] |
||||
key: 'mapping', |
}, { |
||||
breadcrumb: '关系映射', |
path: '/mapping', |
||||
childRoutes:[{ |
key: 'mapping', |
||||
path: '/system', |
breadcrumb: '关系映射', |
||||
key: 'system', |
childRoutes: [{ |
||||
component: System, |
path: '/system', |
||||
breadcrumb: '系统映射', |
key: 'system', |
||||
}] |
component: System, |
||||
}] |
breadcrumb: '系统映射', |
||||
} |
}] |
||||
}]; |
},, { |
||||
|
path: '/order', |
||||
|
key: 'order', |
||||
|
breadcrumb: '工单管理', |
||||
|
childRoutes: [{ |
||||
|
path: '/setup', |
||||
|
key: 'setup', |
||||
|
component: Setup, |
||||
|
breadcrumb: '工单设置', |
||||
|
}] |
||||
|
}, { |
||||
|
path: '/relation', |
||||
|
key: 'relation', |
||||
|
breadcrumb: '容差管理', |
||||
|
childRoutes: [{ |
||||
|
path: '/set', |
||||
|
key: 'set', |
||||
|
component: Set, |
||||
|
breadcrumb: '容差设置', |
||||
|
}] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}]; |
||||
Loading…
Reference in new issue