From fe6e1933a07f07607cb0095cb18a7971d0df7c67 Mon Sep 17 00:00:00 2001
From: Your Nmae <email@example.com>
Date: Wed, 17 Jan 2024 12:19:04 +0800
Subject: [PATCH] temp

---
 src/components/visualize/Home.tsx          | 111 ++++++++++++++++++++-
 src/components/visualize/TrailwayRoute.tsx |  16 ++-
 2 files changed, 124 insertions(+), 3 deletions(-)

diff --git a/src/components/visualize/Home.tsx b/src/components/visualize/Home.tsx
index 86cecac..087628a 100644
--- a/src/components/visualize/Home.tsx
+++ b/src/components/visualize/Home.tsx
@@ -1,22 +1,129 @@
 /**
  * Created by hao.cheng on 2017/4/17.
  */
+
 import React from 'react';
-import { Row, Col, Card } from 'antd';
+import { Row, Col, Card, Menu } from 'antd';
+import type { MenuProps } from 'antd/lib/menu';
 import TrailwayRoute from './TrailwayRoute';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+
+const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
+const Sider = () => {
+    const [openKeys, setOpenKeys] = React.useState(['sub1']);
+    const onOpenChange = (keys: any) => {
+        const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
+        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+            setOpenKeys(keys);
+        } else {
+            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
+        }
+    };
+
+    return (
+        <Menu
+            mode="inline"
+            onOpenChange={onOpenChange}
+            style={{ color: 'black', background: 'white', width: 500 }}
+            theme="light"
+        >
+            <SubMenu key="sub1" title="1号线">
+                <Menu.Item key="1">
+                    F1&nbsp;&emsp;&emsp;&emsp;进站人数：74&emsp;&emsp;&emsp;出站人数：53
+                </Menu.Item>
+                <Menu.Item key="2">
+                    F2&nbsp;&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：62
+                </Menu.Item>
+                <Menu.Item key="3">
+                    F3&nbsp;&emsp;&emsp;&emsp;进站人数：72&emsp;&emsp;&emsp;出站人数：33
+                </Menu.Item>
+                <Menu.Item key="4">
+                    F4&nbsp;&emsp;&emsp;&emsp;进站人数：45&emsp;&emsp;&emsp;出站人数：64
+                </Menu.Item>
+                <Menu.Item key="5">
+                    F5&nbsp;&emsp;&emsp;&emsp;进站人数：46&emsp;&emsp;&emsp;出站人数：81
+                </Menu.Item>
+                <Menu.Item key="6">
+                    F6&nbsp;&emsp;&emsp;&emsp;进站人数：70&emsp;&emsp;&emsp;出站人数：34
+                </Menu.Item>
+                <Menu.Item key="7">
+                    F7&nbsp;&emsp;&emsp;&emsp;进站人数：74&emsp;&emsp;&emsp;出站人数：12
+                </Menu.Item>
+                <Menu.Item key="8">
+                    FS8&nbsp;&nbsp;&emsp;&emsp;进站人数：271&emsp;&emsp;&nbsp;&nbsp;换乘人数：824
+                </Menu.Item>
+                <Menu.Item key="9">
+                    F9&nbsp;&emsp;&emsp;&emsp;进站人数：126&emsp;&emsp;&nbsp;&nbsp;出站人数：89
+                </Menu.Item>
+                <Menu.Item key="10">
+                    FT10&nbsp;&emsp;&emsp;进站人数：358&emsp;&emsp;&nbsp;&nbsp;换乘人数：1054
+                </Menu.Item>
+                <Menu.Item key="11">
+                    F11&emsp;&emsp;&emsp;进站人数：56&emsp;&emsp;&emsp;出站人数：86
+                </Menu.Item>
+                <Menu.Item key="12">
+                    F12&emsp;&emsp;&emsp;进站人数：76&emsp;&emsp;&emsp;出站人数：23
+                </Menu.Item>
+                <Menu.Item key="13">
+                    F13&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：35
+                </Menu.Item>
+                <Menu.Item key="14">
+                    F14&emsp;&emsp;&emsp;进站人数：12&emsp;&emsp;&emsp;出站人数：39
+                </Menu.Item>
+                <Menu.Item key="15">
+                    F15&emsp;&emsp;&emsp;进站人数：59&emsp;&emsp;&emsp;出站人数：32
+                </Menu.Item>
+                <Menu.Item key="16">
+                    F16&emsp;&emsp;&emsp;进站人数：46&emsp;&emsp;&emsp;出站人数：87
+                </Menu.Item>
+                <Menu.Item key="17">
+                    F17&emsp;&emsp;&emsp;进站人数：34&emsp;&emsp;&emsp;出站人数：54
+                </Menu.Item>
+                <Menu.Item key="18">
+                    F18&emsp;&emsp;&emsp;进站人数：76&emsp;&emsp;&emsp;出站人数：59
+                </Menu.Item>
+            </SubMenu>
+            <SubMenu key="sub2" title="2号线">
+                <Menu.Item key="5">Option 5</Menu.Item>
+                <Menu.Item key="6">Option 6</Menu.Item>
+                <SubMenu key="sub3" title="Submenu">
+                    <Menu.Item key="7">Option 7</Menu.Item>
+                    <Menu.Item key="8">Option 8</Menu.Item>
+                </SubMenu>
+            </SubMenu>
+            <SubMenu key="sub4" title="3号线">
+                <Menu.Item key="9">Option 9</Menu.Item>
+                <Menu.Item key="10">Option 10</Menu.Item>
+                <Menu.Item key="11">Option 11</Menu.Item>
+                <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+        </Menu>
+    );
+};
 
 class Echarts extends React.Component {
     render() {
         return (
             <div className="gutter-example">
                 <Row gutter={16}>
-                    <Col className="gutter-row" md={24}>
+                    <Col className="gutter-row" md={18}>
                         <div className="gutter-box">
                             <Card title="区域图" bordered={false}>
                                 <TrailwayRoute />
                             </Card>
                         </div>
                     </Col>
+                    <Col className="gutter-row" md={6}>
+                        <div>
+                            <Card title="当前人流" bordered={false} style={{ width: 500 }}>
+                                <div>
+                                    <Sider></Sider>
+                                </div>
+                            </Card>
+                        </div>
+                    </Col>
                 </Row>
             </div>
         );
diff --git a/src/components/visualize/TrailwayRoute.tsx b/src/components/visualize/TrailwayRoute.tsx
index e4ae711..eb42860 100644
--- a/src/components/visualize/TrailwayRoute.tsx
+++ b/src/components/visualize/TrailwayRoute.tsx
@@ -39,6 +39,8 @@ var stations = [
         y: -800,
         itemStyle: { borderColor: '#EE1822', color: 'white' },
         category: '1号线',
+        value1: 400,
+        value2: '出站人数：200',
     },
     {
         name: 'F2',
@@ -167,6 +169,8 @@ var stations = [
         y: -800,
         itemStyle: { borderColor: '#FDD303', color: 'white' },
         category: '2号线',
+        value1: 271,
+        value2: '换乘人数：824',
     },
     {
         name: 'S8',
@@ -465,7 +469,17 @@ const option = {
         text: '地铁示意图',
     },
     color: ['#EE1822', '#FDD303', '#00b2ff'],
-    tooltip: {},
+    tooltip: {
+        trigger: 'item',
+        formatter: function (params: any) {
+            var result = '';
+            console.log(params);
+            result += '站点名: ' + params.data.name + '<br />';
+            result += '进站人数：' + params.data.value1 + '<br />';
+            result += params.data.value2 + '<br />';
+            return result;
+        },
+    },
     legend: legend,
     animationDurationUpdate: 1500,
     animationEasingUpdate: 'quinticInOut',