Browse Source

设置页面

master
巴林闲侠 2 years ago
parent
commit
0185a0ade6
  1. 1
      console/client/src/layout/containers/layout/index.js
  2. 2
      console/client/src/layout/containers/layout/index.less
  3. 4
      console/client/src/layout/containers/no-match/index.js
  4. 13
      console/client/src/layout/index.js
  5. 5
      console/client/src/layout/index.less
  6. 39
      console/client/src/sections/console/containers/index.js
  7. 69
      console/client/src/sections/console/containers/setUp.js
  8. 21
      console/client/src/sections/console/routes.js
  9. 6
      console/client/src/sections/console/style.less
  10. 10
      console/client/src/styles/antd.less
  11. 16
      console/client/src/styles/theme.less

1
console/client/src/layout/containers/layout/index.js

@ -1,6 +1,5 @@
'use strict';
import './index.less';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { message, Layout } from 'antd';

2
console/client/src/layout/containers/layout/index.less

@ -1,2 +0,0 @@
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import '~nprogress/nprogress.css';

4
console/client/src/layout/containers/no-match/index.js

@ -8,8 +8,8 @@ const NoMatch = props => {
<div style={{ textAlign: 'center', padding: 120 }}>
<p style={{ fontSize: 80, lineHeight: 1.5 }}>404</p>
<p style={{ fontSize: 32, lineHeight: 2 }}>PAGE NOT FOUND</p>
<p>很遗憾您暂时无法访问该页面</p>
<p>请检查您访问的链接地址是否正确</p>
<p>很遗憾,您暂时无法访问该页面.</p>
<p>请检查您访问的链接地址是否正确.</p>
<p style={{ marginTop: 80 }}>Copyright © {moment().year()} 飞尚</p>
</div>
)

13
console/client/src/layout/index.js

@ -12,7 +12,8 @@ import * as layoutActions from './actions/global';
import zhCN from 'antd/lib/locale/zh_CN';
import { basicReducer } from '@peace/utils';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.less';
// import 'antd/dist/antd.less';
import './index.less';
moment.locale('zh-cn');
@ -29,7 +30,7 @@ const Root = props => {
const flatRoutes = (routes) => {
const combineRoutes = [];
function flat(routes, parentRoute) {
function flat (routes, parentRoute) {
routes.forEach((route, i) => {
let obj = {
path: route.path,
@ -39,10 +40,10 @@ const Root = props => {
key: route.key
}
if (!route.path.startsWith("/")) {
console.error('路由配置需以 "/" 开始' + route.path);
console.error('路由配置需以 "/" 开始:' + route.path);
}
if (route.path.length > 1 && route.path[route.path.length] == '/') {
console.error('除根路由路由配置不可以以 "/" 结束' + route.path);
console.error('除根路由路由配置不可以以 "/" 结束:' + route.path);
}
if (parentRoute && parentRoute != '/') {
obj.path = parentRoute + route.path;
@ -90,9 +91,9 @@ const Root = props => {
let actions = {
layout: layoutActions
}
for (let s of sections) {
if (!s.key) console.warn('请给你的section添加一个key值section name:' + s.name);
if (!s.key) console.warn('请给你的section添加一个key值,section name:' + s.name);
for (let r of s.routes) {
if (r.type == 'inner' || r.type == 'home') {
innerRoutes.push(r.route)

5
console/client/src/layout/index.less

@ -0,0 +1,5 @@
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import '~nprogress/nprogress.css';
@import '~antd/dist/antd.dark.less';
@primary-color: rgb(249,179,45); // 全局主色

39
console/client/src/sections/console/containers/index.js

@ -1,5 +1,10 @@
import React, { useEffect, useState, useRef } from 'react'
import { Col, Row } from 'antd';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import {
SettingOutlined
} from '@ant-design/icons';
import { Col, Row, Button, Modal, Input } from 'antd';
import '../style.less'
function calculateIntersection (cx, cy, d, angle) {
@ -33,6 +38,7 @@ function calculateIntersection (cx, cy, d, angle) {
function Index (props) {
const { dispatch } = props
const xyCvs = useRef()
const xzCvs = useRef()
const [darkModde] = useState(true)
@ -42,7 +48,8 @@ function Index (props) {
subTextColor: '#D3D3D3',
shadow: '#303030'
})
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
console.log(FS_API_ROOT, window.FS_API_ROOT);
const canvasArea = document.getElementById('canvasArea')
@ -411,13 +418,20 @@ function Index (props) {
boxShadow: `0 0 10px ${darkModde ? darkColor.shadow : 'rgba(0, 0, 0, 0.2)'}`,
color: darkModde ? darkColor.textColor : 'auto'
}
return (
<div style={{
height: '100vh', padding: 8,
color: darkModde ? darkColor.textColor : 'auto',
background: darkModde ? darkColor.background : 'auto'
}}>
<div style={{ height: '80%', padding: 8 }}>
<div style={{ padding: '0 8px 8px', textAlign: 'right' }}>
<Button type="primary" size={'large'} style={{}} icon={<SettingOutlined />} onClick={() => setIsModalOpen(true)}>
设置
</Button>
</div>
<div style={{ height: 'calc(80% - 40px)', padding: 8 }}>
<Row style={{ height: '100%' }}>
<Col span={12} id="canvasArea" style={{ paddingRight: 8, maxHeight: '100%' }}>
<div className='card' style={cardStyle}>
@ -493,11 +507,24 @@ function Index (props) {
})
}
</Row>
</div>
<Modal title="密码验证" open={isModalOpen}
onOk={() => {
dispatch(push('/setup'));
}}
onCancel={() => {
setIsModalOpen(false)
}}
>
<Input.Password size="large" placeholder="请输入密码" />
</Modal>
</div>
)
}
export default Index
function mapStateToProps (state) {
const { auth } = state;
return {}
}
export default connect(mapStateToProps)(Index);

69
console/client/src/sections/console/containers/setUp.js

@ -0,0 +1,69 @@
import React, { useEffect, useState, useRef } from 'react'
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import {
BorderlessTableOutlined, BlockOutlined, RollbackOutlined
} from '@ant-design/icons';
import { Col, Row, Button, Modal, Input } from 'antd';
import '../style.less'
function SetUp ({ dispatch }) {
const [renderMenu, setRenderMenu] = useState([])
const [levelOneMenu] = useState([{
n: '参数标定',
ic: <BlockOutlined className='setup-icon' />,
child: [
{
n: '塔机参数',
ic: <BorderlessTableOutlined className='setup-icon' />
}, {
n: '返回',
ic: <RollbackOutlined className='setup-icon' />,
click: () => {
dispatch(push('/'));
}
},
]
}, {
n: '限位告警参数',
ic: <BorderlessTableOutlined className='setup-icon' />
}, {
n: '返回',
ic: <RollbackOutlined className='setup-icon' />,
click: () => {
dispatch(push('/'));
}
},])
useEffect(() => {
setRenderMenu(levelOneMenu)
}, [])
return (
<div style={{ height: '100vh' }}>
<div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
{
renderMenu.map((item, index) => {
return (
<div key={index} style={{ width: 168, textAlign: 'center', margin: 32, boxShadow: ' 0 0 10px var(--antd-wave-shadow-color)' }} onClick={item.click}>
{item.ic}
<div style={{ lineHeight: '64px', fontSize: 24 }}>
{item.n}
</div>
</div>
)
})
}
</div>
</div>
)
}
function mapStateToProps (state) {
const { auth } = state;
return {}
}
export default connect(mapStateToProps)(SetUp);

21
console/client/src/sections/console/routes.js

@ -1,5 +1,6 @@
'use strict';
import Console from './containers/index';
import SetUp from './containers/setUp';
export default [{
type: 'outer',
@ -8,6 +9,22 @@ export default [{
key: 'console',
breadcrumb: '控制台',
// 不设置 component 则面包屑禁止跳转
component: Console
}
component: Console,
childRoutes: [{
type: 'outer',
path: '/setup',
key: 'setup',
component: SetUp,
breadcrumb: '设置',
}]
},
}, {
type: 'outer',
route: {
path: '/setup',
key: 'setup',
component: SetUp,
breadcrumb: '设置',
},
}];

6
console/client/src/sections/console/style.less

@ -27,4 +27,10 @@
font-size: 14px;
text-transform: uppercase;
text-align: right;
}
//
.setup-icon {
font-size: 128px;
display: block;
}

10
console/client/src/styles/antd.less

@ -1,10 +0,0 @@
@icon-url: "/assets/fonticon/iconfont";
.tree-transfer .ant-transfer-list-body {
overflow: auto !important;
}
.ant-pro-table-search {
background-color: @component-background !important;
}

16
console/client/src/styles/theme.less

@ -1,16 +0,0 @@
@import "~antd/lib/style/themes/default.less";
@primary-color : @blue-6;
@link-color : @primary-color;
@secondary-color : fade(@primary-color, 20%);
@btn-primary-bg : @primary-color;
@select-item-selected-option-color: @primary-color;
@processing-color : @primary-color;
@select-item-selected-bg : @background-color-base;
@skeleton-color : @primary-color;
@btn-primary-bg : @primary-color;
@component-background: transparent;
:root {
--PC: @primary-color;
}
Loading…
Cancel
Save