temp
This commit is contained in:
@@ -3,16 +3,16 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Row, Col, Card } from 'antd';
|
||||
import EchartsArea from './EchartsArea';
|
||||
import EchartsPie from './EchartsPie';
|
||||
import EchartsEffectScatter from './EchartsEffectScatter';
|
||||
import EchartsForce from './EchartsForce';
|
||||
import EchartsArea from '../charts/EchartsArea';
|
||||
import EchartsPie from '../charts/EchartsPie';
|
||||
import EchartsEffectScatter from '../charts/EchartsEffectScatter';
|
||||
import EchartsForce from '../charts/EchartsForce';
|
||||
|
||||
class Echarts extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="gutter-example">
|
||||
{/* <Row gutter={16}>
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" md={24}>
|
||||
<div className="gutter-box">
|
||||
<Card title="区域图" bordered={false}>
|
||||
@@ -20,9 +20,9 @@ class Echarts extends React.Component {
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row> */}
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" md={24}>
|
||||
<Col className="gutter-row" md={12}>
|
||||
<div className="gutter-box">
|
||||
<Card title="关系图" bordered={false}>
|
||||
{/* <EchartsGraphnpm /> */}
|
||||
@@ -30,15 +30,15 @@ class Echarts extends React.Component {
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
{/* <Col className="gutter-row" md={12}>
|
||||
<Col className="gutter-row" md={12}>
|
||||
<div className="gutter-box">
|
||||
<Card title="饼图" bordered={false}>
|
||||
<EchartsPie />
|
||||
</Card>
|
||||
</div>
|
||||
</Col> */}
|
||||
</Col>
|
||||
</Row>
|
||||
{/* <Row gutter={16}>
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" md={24}>
|
||||
<div className="gutter-box">
|
||||
<Card title="散点图" bordered={false}>
|
||||
@@ -46,7 +46,7 @@ class Echarts extends React.Component {
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row> */}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -443,7 +443,7 @@ var links = [
|
||||
var lineNames = [];
|
||||
|
||||
for (var index = 0; index < stations.length - 1; index++) {
|
||||
if (lineNames.indexOf(stations[index].category) == -1) {
|
||||
if (lineNames.indexOf(stations[index].category) === -1) {
|
||||
lineNames.push(stations[index].category);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,8 @@ import MultipleMenu from './extension/MultipleMenu';
|
||||
import Sub1 from './smenu/Sub1';
|
||||
import Sub2 from './smenu/Sub2';
|
||||
import Env from './env';
|
||||
import Home from './visualize/Home';
|
||||
import UserManage from './management/UserManage';
|
||||
|
||||
const WysiwygBundle = Loadable({
|
||||
// 按需加载富文本配置
|
||||
@@ -67,4 +69,6 @@ export default {
|
||||
Sub1,
|
||||
Sub2,
|
||||
Env,
|
||||
Home,
|
||||
UserManage,
|
||||
} as any;
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
/**
|
||||
* Created by hao.cheng on 2017/4/16.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Table, Input, Button } from 'antd';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Joe Black',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Jim Green',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
},
|
||||
];
|
||||
|
||||
class SearchTable extends React.Component {
|
||||
state = {
|
||||
filterDropdownVisible: false,
|
||||
data,
|
||||
searchText: '',
|
||||
filtered: false,
|
||||
};
|
||||
searchInput: any;
|
||||
onInputChange = (e: any) => {
|
||||
this.setState({ searchText: e.target.value });
|
||||
};
|
||||
onSearch = () => {
|
||||
const { searchText } = this.state;
|
||||
const reg = new RegExp(searchText, 'gi');
|
||||
this.setState({
|
||||
filterDropdownVisible: false,
|
||||
filtered: !!searchText,
|
||||
data: data
|
||||
.map((record) => {
|
||||
const match = record.name.match(reg);
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
...record,
|
||||
name: (
|
||||
<span>
|
||||
{record.name
|
||||
.split(reg)
|
||||
.map((text, i) =>
|
||||
i > 0
|
||||
? [<span className="highlight">{match[0]}</span>, text]
|
||||
: text
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
};
|
||||
})
|
||||
.filter((record) => !!record),
|
||||
});
|
||||
};
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
filterDropdown: (
|
||||
<div className="custom-filter-dropdown">
|
||||
<Input
|
||||
ref={(ele) => (this.searchInput = ele)}
|
||||
placeholder="Search name"
|
||||
value={this.state.searchText}
|
||||
onChange={this.onInputChange}
|
||||
onPressEnter={this.onSearch}
|
||||
/>
|
||||
<Button type="primary" onClick={this.onSearch}>
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
filterIcon: (
|
||||
<SmileOutlined style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />
|
||||
),
|
||||
filterDropdownVisible: this.state.filterDropdownVisible,
|
||||
onFilterDropdownVisibleChange: (visible: boolean) =>
|
||||
this.setState({ filterDropdownVisible: visible }, () =>
|
||||
this.searchInput.focus()
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{
|
||||
text: 'London',
|
||||
value: 'London',
|
||||
},
|
||||
{
|
||||
text: 'New York',
|
||||
value: 'New York',
|
||||
},
|
||||
],
|
||||
onFilter: (value: any, record: any) => record.address.indexOf(value) === 0,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<Table columns={columns} dataSource={this.state.data} />
|
||||
<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 SearchTable;
|
||||
127
src/components/management/UserManage.tsx
Normal file
127
src/components/management/UserManage.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Created by hao.cheng on 2017/4/16.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Table, Input, Button } from 'antd';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { trailwayDelUser, trailwayListUsers } from '../../service';
|
||||
|
||||
class UserManage extends React.Component {
|
||||
state = {
|
||||
filterDropdownVisible: false,
|
||||
data: [],
|
||||
searchText: '',
|
||||
filtered: false,
|
||||
};
|
||||
searchInput: any;
|
||||
|
||||
componentDidMount() {
|
||||
this.refreshUser();
|
||||
}
|
||||
|
||||
onInputChange = (e: any) => {
|
||||
this.setState({ searchText: e.target.value });
|
||||
};
|
||||
onSearch = () => {
|
||||
// const { searchText } = this.state;
|
||||
// const reg = new RegExp(searchText, 'gi');
|
||||
// this.setState({
|
||||
// filterDropdownVisible: false,
|
||||
// filtered: !!searchText,
|
||||
// data: data
|
||||
// .map((record) => {
|
||||
// const match = record.name.match(reg);
|
||||
// if (!match) {
|
||||
// return null;
|
||||
// }
|
||||
// return {
|
||||
// ...record,
|
||||
// name: (
|
||||
// <span>
|
||||
// {record.name
|
||||
// .split(reg)
|
||||
// .map((text, i) =>
|
||||
// i > 0
|
||||
// ? [<span className="highlight">{match[0]}</span>, text]
|
||||
// : text
|
||||
// )}
|
||||
// </span>
|
||||
// ),
|
||||
// };
|
||||
// })
|
||||
// .filter((record) => !!record),
|
||||
// });
|
||||
};
|
||||
refreshUser = () => {
|
||||
trailwayListUsers().then((res) => {
|
||||
this.setState({
|
||||
data: res.data,
|
||||
});
|
||||
});
|
||||
};
|
||||
handleDel = (id: Number) => {
|
||||
trailwayDelUser(id);
|
||||
this.refreshUser();
|
||||
};
|
||||
render() {
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
sorter: (a: any, b: any) => a.id - b.id,
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: '管理员',
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
render: (role: any) => (role === 1 ? '是' : '否'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (record: any) => (
|
||||
<div>
|
||||
<Button type="primary" size="small">
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
onClick={() => this.handleDel(record.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary">增加用户</Button>
|
||||
<Table columns={columns} dataSource={this.state.data} />
|
||||
<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 UserManage;
|
||||
26
src/components/visualize/Home.tsx
Normal file
26
src/components/visualize/Home.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Created by hao.cheng on 2017/4/17.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Row, Col, Card } from 'antd';
|
||||
import TrailwayRoute from './TrailwayRoute';
|
||||
|
||||
class Echarts extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="gutter-example">
|
||||
<Row gutter={16}>
|
||||
<Col className="gutter-row" md={24}>
|
||||
<div className="gutter-box">
|
||||
<Card title="区域图" bordered={false}>
|
||||
<TrailwayRoute />
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Echarts;
|
||||
519
src/components/visualize/TrailwayRoute.tsx
Normal file
519
src/components/visualize/TrailwayRoute.tsx
Normal file
@@ -0,0 +1,519 @@
|
||||
/**
|
||||
* Created by SEELE on 2017/8/23.
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
|
||||
var stations = [
|
||||
{
|
||||
name: 'F7',
|
||||
x: -150,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F6',
|
||||
x: -300,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F5',
|
||||
x: -450,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F4',
|
||||
x: -600,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F3',
|
||||
x: -750,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F2',
|
||||
x: -850,
|
||||
y: -700,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F1',
|
||||
x: -950,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F9',
|
||||
x: 150,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'F11',
|
||||
x: 450,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F12',
|
||||
x: 600,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F13',
|
||||
x: 750,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F14',
|
||||
x: 750,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F15',
|
||||
x: 900,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F16',
|
||||
x: 1050,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F17',
|
||||
x: 1300,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
{
|
||||
name: 'F18',
|
||||
x: 1450,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#EE1822', color: 'white' },
|
||||
category: '1号线',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'S1',
|
||||
x: 0,
|
||||
y: -1400,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S2',
|
||||
x: 0,
|
||||
y: -1300,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S3',
|
||||
x: 0,
|
||||
y: -1200,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S4',
|
||||
x: 0,
|
||||
y: -1100,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S5',
|
||||
x: 0,
|
||||
y: -1000,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S6',
|
||||
x: 0,
|
||||
y: -900,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'FS8',
|
||||
x: 0,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S8',
|
||||
x: 0,
|
||||
y: -700,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S9',
|
||||
x: 0,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S10',
|
||||
x: 0,
|
||||
y: -500,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S12',
|
||||
x: 200,
|
||||
y: -300,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S13',
|
||||
x: 300,
|
||||
y: -200,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S14',
|
||||
x: 400,
|
||||
y: -100,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S15',
|
||||
x: 500,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S16',
|
||||
x: 650,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S17',
|
||||
x: 800,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S18',
|
||||
x: 950,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S19',
|
||||
x: 1100,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'S20',
|
||||
x: 1300,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#FDD303', color: 'white' },
|
||||
category: '2号线',
|
||||
},
|
||||
{
|
||||
name: 'T16',
|
||||
x: 400,
|
||||
y: -1000,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
label: { rotate: 120 },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T15',
|
||||
x: 300,
|
||||
y: -900,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'FT10',
|
||||
x: 300,
|
||||
y: -800,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T13',
|
||||
x: 300,
|
||||
y: -600,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T12',
|
||||
x: 200,
|
||||
y: -500,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'ST11',
|
||||
x: 100,
|
||||
y: -400,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T10',
|
||||
x: 0,
|
||||
y: -300,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T9',
|
||||
x: 0,
|
||||
y: -200,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T8',
|
||||
x: 0,
|
||||
y: -100,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T7',
|
||||
x: 0,
|
||||
y: 0,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T6',
|
||||
x: 0,
|
||||
y: 100,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T5',
|
||||
x: 0,
|
||||
y: 200,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T4',
|
||||
x: 0,
|
||||
y: 300,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T3',
|
||||
x: 0,
|
||||
y: 400,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T2',
|
||||
x: 0,
|
||||
y: 500,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
{
|
||||
name: 'T1',
|
||||
x: 0,
|
||||
y: 600,
|
||||
itemStyle: { borderColor: '#00b2ff', color: 'white' },
|
||||
category: '3号线',
|
||||
},
|
||||
];
|
||||
|
||||
var links = [
|
||||
{ source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },
|
||||
|
||||
{ source: 'T16', target: 'T15', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T15', target: 'FT10', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'FT10', target: 'T13', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T13', target: 'T12', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T12', target: 'ST11', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'ST11', target: 'T10', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T10', target: 'T9', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T9', target: 'T8', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T8', target: 'T7', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T7', target: 'T6', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T6', target: 'T5', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T5', target: 'T4', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T4', target: 'T3', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T3', target: 'T2', lineStyle: { color: '#00b2ff' } },
|
||||
{ source: 'T2', target: 'T1', lineStyle: { color: '#00b2ff' } },
|
||||
|
||||
{ source: 'S1', target: 'S2', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S2', target: 'S3', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S3', target: 'S4', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S4', target: 'S5', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S5', target: 'S6', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S6', target: 'FS8', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'FS8', target: 'S8', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S8', target: 'S9', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S9', target: 'S10', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S10', target: 'ST11', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'ST11', target: 'S12', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S12', target: 'S13', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S13', target: 'S14', lineStyle: { color: '#FDD303' } },
|
||||
|
||||
{ source: 'S14', target: 'S15', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S15', target: 'S16', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S16', target: 'S17', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S17', target: 'S18', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S18', target: 'S19', lineStyle: { color: '#FDD303' } },
|
||||
{ source: 'S19', target: 'S20', lineStyle: { color: '#FDD303' } },
|
||||
|
||||
{ source: 'FS8', target: 'F7', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F7', target: 'F6', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F6', target: 'F5', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F5', target: 'F4', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F4', target: 'F3', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F3', target: 'F2', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F2', target: 'F1', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'FS8', target: 'F9', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F9', target: 'FT10', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'FT10', target: 'F11', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F11', target: 'F12', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F12', target: 'F13', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F13', target: 'F14', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F14', target: 'F15', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F15', target: 'F16', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F16', target: 'F17', lineStyle: { color: '#EE1822' } },
|
||||
{ source: 'F17', target: 'F18', lineStyle: { color: '#EE1822' } },
|
||||
];
|
||||
|
||||
var lineNames = [];
|
||||
|
||||
for (var index = 0; index < stations.length - 1; index++) {
|
||||
if (lineNames.indexOf(stations[index].category) === -1) {
|
||||
lineNames.push(stations[index].category);
|
||||
}
|
||||
}
|
||||
|
||||
var legend = [
|
||||
{
|
||||
data: lineNames,
|
||||
},
|
||||
];
|
||||
|
||||
var categories = lineNames.map((lineName) => {
|
||||
return {
|
||||
name: lineName,
|
||||
};
|
||||
});
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '地铁示意图',
|
||||
},
|
||||
color: ['#EE1822', '#FDD303', '#00b2ff'],
|
||||
tooltip: {},
|
||||
legend: legend,
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 6,
|
||||
focusNodeAdjacency: true,
|
||||
roam: false,
|
||||
label: {
|
||||
show: true,
|
||||
rotate: '30',
|
||||
color: 'black',
|
||||
position: 'right',
|
||||
},
|
||||
edgeSymbol: ['none', 'none'],
|
||||
edgeSymbolSize: [4, 6],
|
||||
edgeLabel: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: stations,
|
||||
links: links,
|
||||
categories: categories,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.9,
|
||||
width: 6,
|
||||
curveness: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
class TrailwayRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '700px', width: '1400px' }}
|
||||
className={'react_for_echarts'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TrailwayRoute;
|
||||
@@ -21,7 +21,7 @@ const menus: {
|
||||
} = {
|
||||
menus: [
|
||||
// 菜单相关路由
|
||||
{ key: '/app/dashboard/index', title: '首页', icon: 'mobile', component: 'Dashboard' },
|
||||
{ key: '/app/home', title: '首页', icon: 'mobile', component: 'Home' },
|
||||
// {
|
||||
// key: '/app/ui',
|
||||
// title: 'UI',
|
||||
@@ -151,44 +151,43 @@ const menus: {
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
key: '/app/visualize',
|
||||
title: 'Visualize',
|
||||
key: '/app/manage',
|
||||
title: '管理',
|
||||
icon: 'bars',
|
||||
subs: [
|
||||
{
|
||||
key: '/app/extension/queryParams',
|
||||
title: '问号形式参数',
|
||||
component: 'QueryParams',
|
||||
query: '?param1=1¶m2=2',
|
||||
},
|
||||
{
|
||||
key: '/app/extension/visitor',
|
||||
title: '访客模式',
|
||||
component: 'Visitor',
|
||||
login: true,
|
||||
},
|
||||
{
|
||||
key: '/app/extension/multiple',
|
||||
title: '多级菜单',
|
||||
subs: [
|
||||
{
|
||||
key: '/app/extension/multiple/child',
|
||||
title: '多级菜单子菜单',
|
||||
subs: [
|
||||
{
|
||||
key: '/app/extension/multiple/child/child',
|
||||
title: '多级菜单子子菜单',
|
||||
component: 'MultipleMenu',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '/app/extension/env',
|
||||
title: '环境配置',
|
||||
component: 'Env',
|
||||
key: '/app/manage/user',
|
||||
title: '用户管理',
|
||||
component: 'UserManage',
|
||||
},
|
||||
// {
|
||||
// key: '/app/extension/visitor',
|
||||
// title: '访客模式',
|
||||
// component: 'Visitor',
|
||||
// login: true,
|
||||
// },
|
||||
// {
|
||||
// key: '/app/extension/multiple',
|
||||
// title: '多级菜单',
|
||||
// subs: [
|
||||
// {
|
||||
// key: '/app/extension/multiple/child',
|
||||
// title: '多级菜单子菜单',
|
||||
// subs: [
|
||||
// {
|
||||
// key: '/app/extension/multiple/child/child',
|
||||
// title: '多级菜单子子菜单',
|
||||
// component: 'MultipleMenu',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '/app/extension/env',
|
||||
// title: '环境配置',
|
||||
// component: 'Env',
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -47,3 +47,6 @@ export const guest = () => get({ url: config.MOCK_AUTH_VISITOR });
|
||||
export const fetchMenu = () => get({ url: config.MOCK_MENU });
|
||||
|
||||
export const trailwayLogin = (data: any) => post({ url: config.TRAILWAY_API + '/login', data });
|
||||
export const trailwayListUsers = () => get({ url: config.TRAILWAY_API + '/user/list' });
|
||||
export const trailwayDelUser = (id: Number) =>
|
||||
get({ url: config.TRAILWAY_API + '/user/delete/' + id });
|
||||
|
||||
Reference in New Issue
Block a user