Rain-Bus/trailway-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
Rain&Bus
2024-01-18 13:28:56 +08:00
parent fe6e1933a0
commit 97b143b526
11 changed files with 450 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Page.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import NotFound from './components/pages/NotFound'; import NotFound from './components/pages/NotFound';
import Register from './components/pages/Register';
import Login from './components/pages/Login'; import Login from './components/pages/Login';
import App from './App'; import App from './App';
@@ -11,6 +12,7 @@ export default () => (
<Route path="/app" component={App} /> <Route path="/app" component={App} />
<Route path="/404" component={NotFound} /> <Route path="/404" component={NotFound} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
</Router> </Router>

5
src/components/HeaderCustom.tsx
View File

@@ -93,14 +93,15 @@ const HeaderCustom = (props: HeaderCustomProps) => {
onClick={props.toggle} onClick={props.toggle}
/> />
)} )}
<span style={{ color: 'white' }}>地铁换乘站换乘客流预测系统</span>
<Menu <Menu
mode="horizontal" mode="horizontal"
style={{ lineHeight: '64px', float: 'right' }} style={{ lineHeight: '64px', float: 'right' }}
onClick={menuClick} onClick={menuClick}
> >
<Menu.Item key="pwa"> {/* <Menu.Item key="pwa">
<PwaInstaller /> <PwaInstaller />
</Menu.Item> </Menu.Item> */}
<Menu.Item key="full"> <Menu.Item key="full">
<ArrowsAltOutlined onClick={screenFull} /> <ArrowsAltOutlined onClick={screenFull} />
</Menu.Item> </Menu.Item>

4
src/components/index.tsx
View File

@@ -36,6 +36,8 @@ import UserManage from './management/UserManage';
import BlankPage from './management/BlankPage'; import BlankPage from './management/BlankPage';
import StationInfo from './station/StationInfo'; import StationInfo from './station/StationInfo';
import PredictInfo from './station/PredictInfo'; import PredictInfo from './station/PredictInfo';
import StationManage from './management/StationManage';
import ChangePwd from './user/ChangePwd';
const WysiwygBundle = Loadable({ const WysiwygBundle = Loadable({
// 按需加载富文本配置 // 按需加载富文本配置
@@ -77,4 +79,6 @@ export default {
BlankPage, BlankPage,
StationInfo, StationInfo,
PredictInfo, PredictInfo,
StationManage,
ChangePwd,
} as any; } as any;

316
src/components/management/StationManage.tsx Normal file
View File

@@ -0,0 +1,316 @@
import React from 'react';
import { Button, Table } from 'antd';
const StationManage = () => {
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
sorter: (a: any, b: any) => a.id - b.id,
},
{
title: '站点名称',
dataIndex: 'name',
key: 'name',
},
{
title: '所属线路',
dataIndex: 'route',
key: 'route',
},
{
title: '操作',
render: (record: any) => (
<div>
<Button type="primary" size="small">
修改信息
</Button>
<Button type="primary" size="small">
删除车站
</Button>
</div>
),
},
];
const data = [
{
id: 1,
name: 'F7',
route: '1号线',
},
{
id: 2,
name: 'F6',
route: '1号线',
},
{
id: 3,
name: 'F5',
route: '1号线',
},
{
id: 4,
name: 'F4',
route: '1号线',
},
{
id: 5,
name: 'F3',
route: '1号线',
},
{
id: 6,
name: 'F2',
route: '1号线',
},
{
id: 7,
name: 'F1',
route: '1号线',
},
{
id: 8,
name: 'F9',
route: '1号线',
},
{
id: 9,
name: 'F11',
route: '1号线',
},
{
id: 10,
name: 'F12',
route: '1号线',
},
{
id: 11,
name: 'F13',
route: '1号线',
},
{
id: 12,
name: 'F14',
route: '1号线',
},
{
id: 13,
name: 'F15',
route: '1号线',
},
{
id: 14,
name: 'F16',
route: '1号线',
},
{
id: 15,
name: 'F17',
route: '1号线',
},
{
id: 16,
name: 'F18',
route: '1号线',
},
{
id: 17,
name: 'S1',
route: '2号线',
},
{
id: 18,
name: 'S2',
route: '2号线',
},
{
id: 19,
name: 'S3',
route: '2号线',
},
{
id: 20,
name: 'S4',
route: '2号线',
},
{
id: 21,
name: 'S5',
route: '2号线',
},
{
id: 22,
name: 'S6',
route: '2号线',
},
{
id: 23,
name: 'FS8',
route: '2号线',
},
{
id: 24,
name: 'S8',
route: '2号线',
},
{
id: 25,
name: 'S9',
route: '2号线',
},
{
id: 26,
name: 'S10',
route: '2号线',
},
{
id: 27,
name: 'S12',
route: '2号线',
},
{
id: 28,
name: 'S13',
route: '2号线',
},
{
id: 29,
name: 'S14',
route: '2号线',
},
{
id: 30,
name: 'S15',
route: '2号线',
},
{
id: 31,
name: 'S16',
route: '2号线',
},
{
id: 32,
name: 'S17',
route: '2号线',
},
{
id: 33,
name: 'S18',
route: '2号线',
},
{
id: 34,
name: 'S19',
route: '2号线',
},
{
id: 35,
name: 'S20',
route: '2号线',
},
{
id: 36,
name: 'T16',
route: '3号线',
},
{
id: 37,
name: 'T15',
route: '3号线',
},
{
id: 38,
name: 'FT10',
route: '3号线',
},
{
id: 39,
name: 'T13',
route: '3号线',
},
{
id: 40,
name: 'T12',
route: '3号线',
},
{
id: 41,
name: 'ST11',
route: '3号线',
},
{
id: 42,
name: 'T10',
route: '3号线',
},
{
id: 43,
name: 'T9',
route: '3号线',
},
{
id: 44,
name: 'T8',
route: '3号线',
},
{
id: 45,
name: 'T7',
route: '3号线',
},
{
id: 46,
name: 'T6',
route: '3号线',
},
{
id: 47,
name: 'T5',
route: '3号线',
},
{
id: 48,
name: 'T4',
route: '3号线',
},
{
id: 49,
name: 'T3',
route: '3号线',
},
{
id: 50,
name: 'T2',
route: '3号线',
},
{
id: 51,
name: 'T1',
route: '3号线',
},
];
return (
<div>
<Button type="primary">增加车站</Button>
<Table columns={columns} dataSource={data} rowKey={(record) => record.id} />
<style>{`
.custom-filter-dropdown {
padding: 8px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.custom-filter-dropdown input {
width: 130px;
margin-right: 8px;
}
.highlight {
color: #f50;
}
`}</style>
</div>
);
};
export default StationManage;

4
src/components/pages/Login.tsx
View File

@@ -40,10 +40,10 @@ const Login = (props: LoginProps) => {
if (res.data.success) { if (res.data.success) {
let user = { let user = {
uid: res.data.id, uid: res.data.id,
role: res.data.role === 1 ? '系统管理员' : '访客', role: res.data.role == 1 ? '系统管理员' : '访客',
roleType: res.data.role, roleType: res.data.role,
username: values.userName, username: values.userName,
permissions: res.data.role === 1 ? ['auth/admin'] : [], permissions: res.data.role == 1 ? ['auth/admin'] : [],
}; };
setAlita('auth', user); setAlita('auth', user);
} }

68
src/components/pages/Register.tsx Normal file
View File

@@ -0,0 +1,68 @@
/**
* Created by hao.cheng on 2017/4/16.
*/
import React, { useEffect } from 'react';
import { Button, Form, Input } from 'antd';
import { PwaInstaller } from '../widget';
import { useAlita } from 'redux-alita';
import { RouteComponentProps } from 'react-router';
import { FormProps } from 'antd/lib/form';
import umbrella from 'umbrella-storage';
import { GithubOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { useUpdateEffect } from 'ahooks';
const FormItem = Form.Item;
type RegisterProps = {
setAlitaState: (param: any) => void;
auth: any;
} & RouteComponentProps &
FormProps;
const Register = (props: RegisterProps) => {
return (
<div className="login">
<div className="login-form">
<div className="login-logo">
<span>用户注册</span>
</div>
<Form style={{ maxWidth: '300px' }}>
<FormItem
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input prefix={<UserOutlined size={13} />} placeholder="Username" />
</FormItem>
<FormItem name="password" rules={[{ required: true, message: '请输入密码!' }]}>
<Input
prefix={<LockOutlined size={13} />}
type="password"
placeholder="Password"
/>
</FormItem>
<FormItem
name="passwordConfirm"
rules={[{ required: true, message: '请再次输入密码!' }]}
>
<Input
prefix={<LockOutlined size={13} />}
type="password"
placeholder="Password Confirm"
/>
</FormItem>
<FormItem>
<Button
type="primary"
htmlType="submit"
className="Register-form-button"
style={{ width: '100%' }}
>
注册
</Button>
</FormItem>
</Form>
</div>
</div>
);
};
export default Register;

6
src/components/station/PredictInfo.tsx
View File

@@ -15,13 +15,13 @@ const StationInfo = () => {
return ( return (
<Tabs defaultActiveKey="1" tabBarExtraContent={durationSelect()}> <Tabs defaultActiveKey="1" tabBarExtraContent={durationSelect()}>
<Tabs.TabPane tab="FS8" key="1"> <Tabs.TabPane tab="FS8" key="1">
<Image style={{ maxWidth: '90%' }} src={predict} /> <Image style={{ maxWidth: '80%' }} src={predict} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="FT10" key="2"> <Tabs.TabPane tab="FT10" key="2">
<Image style={{ maxWidth: '90%' }} src={predict} /> <Image style={{ maxWidth: '80%' }} src={predict} />
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="ST11" key="3"> <Tabs.TabPane tab="ST11" key="3">
<Image style={{ maxWidth: '98%' }} src={predict} /> <Image style={{ maxWidth: '80%' }} src={predict} />
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs>
); );

7
src/components/station/StationInfo.tsx
View File

@@ -46,7 +46,12 @@ const StationInfo = (props: StationInfoProps) => {
<p>站点名称： {props.query.station}</p> <p>站点名称： {props.query.station}</p>
<p>地址： xx省 xx市 xx区 xx路 xxx号</p> <p>地址： xx省 xx市 xx区 xx路 xxx号</p>
<p>出入口数量：{Math.floor(Math.random() * 5) + 1}</p> <p>出入口数量：{Math.floor(Math.random() * 5) + 1}</p>
<p>进站人数: {Math.floor(Math.random() * 100)}</p> <p>
{['ST', 'FS', 'FT'].some((ele) => String(props.query.station).startsWith(ele))
? '换乘'
: '近站'}
人数: {Math.floor(Math.random() * 100)}
</p>
<p>出站人数: {Math.floor(Math.random() * 100)}</p> <p>出站人数: {Math.floor(Math.random() * 100)}</p>
<p>站点图片:</p> <p>站点图片:</p>
{images.length > 0 ? ( {images.length > 0 ? (

20
src/components/user/ChangePwd.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { Button, Card, Divider, Input, Table } from 'antd';
const ChangePwd = () => {
return (
<div>
<Card title="修改密码" style={{ maxWidth: 400, margin: 'auto' }}>
<Input placeholder="请输入原密码" />
<Divider />
<Input placeholder="请输入新密码" />
<Divider />
<Input placeholder="请再次输入新密码" />
<Divider />
<Button type="primary">更改</Button>
</Card>
</div>
);
};
export default ChangePwd;

9
src/components/visualize/TrailwayRoute.tsx
View File

@@ -3,6 +3,7 @@
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
var stations = [ var stations = [
{ {
@@ -518,11 +519,15 @@ const option = {
}, },
], ],
}; };
class TrailwayRoute extends Component { class TrailwayRoute extends Component<RouteComponentProps, {}> {
render() { render() {
return ( return (
<ReactEcharts <ReactEcharts
option={option} option={option}
onEvents={{
click: (params: any) =>
this.props.history.push('/app/station?station=' + params.data.name),
}}
style={{ height: '700px', width: '1400px' }} style={{ height: '700px', width: '1400px' }}
className={'react_for_echarts'} className={'react_for_echarts'}
/> />
@@ -530,4 +535,4 @@ class TrailwayRoute extends Component {
} }
} }
export default TrailwayRoute; export default withRouter(TrailwayRoute);

20
src/routes/config.ts
View File

@@ -159,7 +159,7 @@ const menus: {
}, },
{ {
key: '/app/predict', key: '/app/predict',
title: '人流预测', title: '中转人流预测',
icon: 'bars', icon: 'bars',
component: 'PredictInfo', component: 'PredictInfo',
}, },
@@ -175,6 +175,12 @@ const menus: {
component: 'UserManage', component: 'UserManage',
requireAuth: 'auth/admin', requireAuth: 'auth/admin',
}, },
{
key: '/app/manage/station',
title: '车站信息管理',
component: 'StationManage',
requireAuth: 'auth/admin',
},
// { // {
// key: '/app/extension/visitor', // key: '/app/extension/visitor',
// title: '访客模式', // title: '访客模式',
@@ -205,6 +211,18 @@ const menus: {
// }, // },
], ],
}, },
{
key: '/app/user',
title: '用户',
icon: 'bars',
subs: [
{
key: '/app/user/pwd',
title: '更改密码',
component: 'ChangePwd',
},
],
},
], ],
others: [], // 非菜单相关路由 others: [], // 非菜单相关路由
}; };