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:
Your Nmae
2024-01-17 12:19:04 +08:00
parent b1d6d8c175
commit fe6e1933a0
2 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/visualize/Home.tsx
View File

@@ -1,22 +1,129 @@
/** /**
* Created by hao.cheng on 2017/4/17. * Created by hao.cheng on 2017/4/17.
*/ */
import React from 'react'; 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 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 { class Echarts extends React.Component {
render() { render() {
return ( return (
<div className="gutter-example"> <div className="gutter-example">
<Row gutter={16}> <Row gutter={16}>
<Col className="gutter-row" md={24}> <Col className="gutter-row" md={18}>
<div className="gutter-box"> <div className="gutter-box">
<Card title="区域图" bordered={false}> <Card title="区域图" bordered={false}>
<TrailwayRoute /> <TrailwayRoute />
</Card> </Card>
</div> </div>
</Col> </Col>
<Col className="gutter-row" md={6}>
<div>
<Card title="当前人流" bordered={false} style={{ width: 500 }}>
<div>
<Sider></Sider>
</div>
</Card>
</div>
</Col>
</Row> </Row>
</div> </div>
); );

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

@@ -39,6 +39,8 @@ var stations = [
y: -800, y: -800,
itemStyle: { borderColor: '#EE1822', color: 'white' }, itemStyle: { borderColor: '#EE1822', color: 'white' },
category: '1号线', category: '1号线',
value1: 400,
value2: '出站人数：200',
}, },
{ {
name: 'F2', name: 'F2',
@@ -167,6 +169,8 @@ var stations = [
y: -800, y: -800,
itemStyle: { borderColor: '#FDD303', color: 'white' }, itemStyle: { borderColor: '#FDD303', color: 'white' },
category: '2号线', category: '2号线',
value1: 271,
value2: '换乘人数：824',
}, },
{ {
name: 'S8', name: 'S8',
@@ -465,7 +469,17 @@ const option = {
text: '地铁示意图', text: '地铁示意图',
}, },
color: ['#EE1822', '#FDD303', '#00b2ff'], 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, legend: legend,
animationDurationUpdate: 1500, animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut', animationEasingUpdate: 'quinticInOut',