设置页面

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';

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

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

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>
     )

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;
@@ -92,7 +93,7 @@ const Root = props => {
         }
 
         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)

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); // 全局主色

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,6 +48,7 @@ function Index (props) {
         subTextColor: '#D3D3D3',
         shadow: '#303030'
     })
+    const [isModalOpen, setIsModalOpen] = useState(false);
 
     useEffect(() => {
         console.log(FS_API_ROOT, window.FS_API_ROOT);
@@ -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);

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);

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: '设置',
+    },
 }];

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

@@ -28,3 +28,9 @@
     text-transform: uppercase;
     text-align: right;
 }
+
+//
+.setup-icon {
+    font-size: 128px;
+    display: block;
+}

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;
-}

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;
-}