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"; |
|||
import React from "react"; |
|||
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"; |
|||
|
|||
const Header = (props) => { |
|||
const { dispatch, history, user, actions, socket, headerItems, tochange } = props; |
|||
const { dispatch, history, user, actions, socket, headerItems, tochange } = props; |
|||
|
|||
return ( |
|||
<> |
|||
<div id="top-slider"> |
|||
<Nav |
|||
mode={"horizontal"} |
|||
onClick={({ itemKey }) => { |
|||
if (itemKey == "logout") { |
|||
dispatch(actions.auth.logout(user)); |
|||
if (socket) { |
|||
socket.disconnect(); |
|||
} |
|||
history.push(`/signin`); |
|||
return ( |
|||
<> |
|||
<div id="top-slider"> |
|||
<Nav |
|||
mode={"horizontal"} |
|||
onClick={({ itemKey }) => { |
|||
if (itemKey == "logout") { |
|||
dispatch(actions.auth.logout(user)); |
|||
if (socket) { |
|||
socket.disconnect(); |
|||
} |
|||
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={{ |
|||
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 }} |
|||
/> |
|||
), |
|||
// 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" }} /> |
|||
> |
|||
<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> |
|||
</> |
|||
} |
|||
/> |
|||
</div> |
|||
</> |
|||
); |
|||
</Nav.Sub> |
|||
</> |
|||
} |
|||
/> |
|||
</div> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
function mapStateToProps (state) { |
|||
const { global, auth, webSocket } = state; |
|||
return { |
|||
actions: global.actions, |
|||
user: auth.user, |
|||
socket: webSocket.socket, |
|||
}; |
|||
const { global, auth, webSocket } = state; |
|||
return { |
|||
actions: global.actions, |
|||
user: auth.user, |
|||
socket: webSocket.socket, |
|||
}; |
|||
} |
|||
|
|||
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'; |
|||
import { Roles,System } from './containers'; |
|||
import { Roles, System,Setup,Set } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/install', |
|||
key: 'install', |
|||
breadcrumb: '设置', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/authentication', |
|||
key: 'authentication', |
|||
breadcrumb: '鉴权管理', |
|||
childRoutes:[{ |
|||
path: '/roles', |
|||
key: 'roles', |
|||
component: Roles, |
|||
breadcrumb: '人员及角色', |
|||
}] |
|||
},{ |
|||
path: '/mapping', |
|||
key: 'mapping', |
|||
breadcrumb: '关系映射', |
|||
childRoutes:[{ |
|||
path: '/system', |
|||
key: 'system', |
|||
component: System, |
|||
breadcrumb: '系统映射', |
|||
}] |
|||
}] |
|||
} |
|||
}]; |
|||
export default [ |
|||
{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/install', |
|||
key: 'install', |
|||
breadcrumb: '设置', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [ |
|||
{ |
|||
path: '/authentication', |
|||
key: 'authentication', |
|||
breadcrumb: '鉴权管理', |
|||
childRoutes: [{ |
|||
path: '/roles', |
|||
key: 'roles', |
|||
component: Roles, |
|||
breadcrumb: '人员及角色', |
|||
}] |
|||
}, { |
|||
path: '/mapping', |
|||
key: 'mapping', |
|||
breadcrumb: '关系映射', |
|||
childRoutes: [{ |
|||
path: '/system', |
|||
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