temp

src/App.tsx

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

src/components/index.tsx

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

src/components/station/PredictInfo.tsx

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

src/components/station/StationInfo.tsx

@@ -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="站点信息">
+            <Card title={props.query.station + ' 站点信息'}>
-                <p>参数：{props.query.t}</p>
+                <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>
     );

src/components/widget/Copyright.tsx

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

src/routes/config.ts

@@ -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',

src/routes/index.tsx

@@ -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];