temp
This commit is contained in:
@@ -117,7 +117,7 @@ const App = (props: AppProps) => {
|
||||
{!responsive.isMobile && checkLogin(auth.permissions) && (
|
||||
<SiderCustom collapsed={collapsed} />
|
||||
)}
|
||||
<ThemePicker />
|
||||
{/* <ThemePicker /> */}
|
||||
<Layout
|
||||
className={classNames('app_layout', { 'app_layout-mobile': responsive.isMobile })}
|
||||
>
|
||||
|
||||
@@ -35,6 +35,7 @@ import Home from './visualize/Home';
|
||||
import UserManage from './management/UserManage';
|
||||
import BlankPage from './management/BlankPage';
|
||||
import StationInfo from './station/StationInfo';
|
||||
import PredictInfo from './station/PredictInfo';
|
||||
|
||||
const WysiwygBundle = Loadable({
|
||||
// 按需加载富文本配置
|
||||
@@ -75,4 +76,5 @@ export default {
|
||||
UserManage,
|
||||
BlankPage,
|
||||
StationInfo,
|
||||
PredictInfo,
|
||||
} as any;
|
||||
|
||||
30
src/components/station/PredictInfo.tsx
Normal file
30
src/components/station/PredictInfo.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Tabs, Select, Image } from 'antd';
|
||||
import React from 'react';
|
||||
import predict from './predict.png';
|
||||
|
||||
const durationSelect = () => {
|
||||
const options = [
|
||||
{ value: '15', label: '15min' },
|
||||
{ value: '30', label: '30min' },
|
||||
{ value: '60', label: '60min' },
|
||||
];
|
||||
return <Select defaultValue="15" style={{ width: 120 }} options={options} />;
|
||||
};
|
||||
|
||||
const StationInfo = () => {
|
||||
return (
|
||||
<Tabs defaultActiveKey="1" tabBarExtraContent={durationSelect()}>
|
||||
<Tabs.TabPane tab="FS8" key="1">
|
||||
<Image style={{ maxWidth: '90%' }} src={predict} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="FT10" key="2">
|
||||
<Image style={{ maxWidth: '90%' }} src={predict} />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="ST11" key="3">
|
||||
<Image style={{ maxWidth: '98%' }} src={predict} />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default StationInfo;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Card } from 'antd';
|
||||
import { Card, Image } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
type StationInfoProps = {
|
||||
@@ -7,10 +7,61 @@ type StationInfoProps = {
|
||||
|
||||
const StationInfo = (props: StationInfoProps) => {
|
||||
console.log(props.query.param1);
|
||||
const stationPics: Map<string, Array<string>> = new Map([
|
||||
[
|
||||
'F3',
|
||||
[
|
||||
'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Exit_2_of_Qiaojiahu_Station%2C_Xuzhou_Metro.jpg/1280px-Exit_2_of_Qiaojiahu_Station%2C_Xuzhou_Metro.jpg',
|
||||
'https://pic.baike.soso.com/ugc/baikepic2/0/20191116064847-556402123_jpeg_1280_960_113270.jpg/0_90',
|
||||
],
|
||||
],
|
||||
[
|
||||
'FS8',
|
||||
[
|
||||
'https://upload.wikimedia.org/wikipedia/commons/3/39/Interchange_tunnel_to_Line_1%27s_platform_at_end_of_Line_2_platform_of_Pengchengguangchang_Station%2C_Xuzhou_Metro.jpg',
|
||||
'https://upload.wikimedia.org/wikipedia/commons/4/49/Exit_9_of_Pengchengguangchang_Station%2C_Xuzhou_Metro.jpg',
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
const images = stationPics.get(props.query.station) || [];
|
||||
const errorImg =
|
||||
'data:image/png;base64,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';
|
||||
|
||||
if (props.query == undefined || props.query.station == undefined) {
|
||||
return (
|
||||
<div>
|
||||
<Card title="站点信息">
|
||||
<p>请在首页选择站点</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Card title="站点信息">
|
||||
<p>参数：{props.query.t}</p>
|
||||
<Card title={props.query.station + ' 站点信息'}>
|
||||
<p>
|
||||
徐州的xx站是一个现代化的地铁站，位于徐州市中心。这个站点以其现代建筑风格和便捷的交通位置著称，提供对徐州地铁网络的便利接入。站内设施齐全，包括自动售票机、清晰的指示牌，以及舒适的候车区域。xx站不仅是徐州市民的重要交通枢纽，也是游客进出市中心的主要通道。
|
||||
</p>
|
||||
<p>站点名称： {props.query.station}</p>
|
||||
<p>地址： xx省 xx市 xx区 xx路 xxx号</p>
|
||||
<p>出入口数量：{Math.floor(Math.random() * 5) + 1}</p>
|
||||
<p>进站人数: {Math.floor(Math.random() * 100)}</p>
|
||||
<p>出站人数: {Math.floor(Math.random() * 100)}</p>
|
||||
<p>站点图片:</p>
|
||||
{images.length > 0 ? (
|
||||
images.map((url, index) => (
|
||||
<Image
|
||||
width={200}
|
||||
key={index}
|
||||
src={url}
|
||||
alt={'Image ' + (index + 1)}
|
||||
fallback={errorImg}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p>没有可用的站点图片</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
BIN
src/components/station/predict.png
Normal file
BIN
src/components/station/predict.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -11,7 +11,7 @@ import React from 'react';
|
||||
const Copyright = () => {
|
||||
return (
|
||||
<div>
|
||||
react-admin ©{new Date().getFullYear()} Created by yezihaohao@yezi.haohao@foxmail.com
|
||||
{/* react-admin ©{new Date().getFullYear()} Created by yezihaohao@yezi.haohao@foxmail.com */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -157,10 +157,17 @@ const menus: {
|
||||
icon: 'bars',
|
||||
component: 'StationInfo',
|
||||
},
|
||||
{
|
||||
key: '/app/predict',
|
||||
title: '人流预测',
|
||||
icon: 'bars',
|
||||
component: 'PredictInfo',
|
||||
},
|
||||
{
|
||||
key: '/app/manage',
|
||||
title: '管理',
|
||||
icon: 'bars',
|
||||
showAuth: 'auth/admin',
|
||||
subs: [
|
||||
{
|
||||
key: '/app/manage/user',
|
||||
|
||||
@@ -34,6 +34,13 @@ const CRouter = (props: CRouterProps) => {
|
||||
}
|
||||
return permit ? requireAuth(permit, component) : component;
|
||||
};
|
||||
|
||||
const showAuth = (permit: any, component: React.ReactElement) => {
|
||||
const permits = getPermits();
|
||||
if (!permits || !permits.includes(permit)) return null;
|
||||
return component;
|
||||
};
|
||||
|
||||
const createMenu = (r: IFMenu) => {
|
||||
const route = (r: IFMenuBase) => {
|
||||
const Component = r.component && AllComponents[r.component];
|
||||
|
||||
Reference in New Issue
Block a user