实现查找公交线路的功能

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Tabs,Carousel } from 'antd';
import RouteSerarch from './content/RouteSerarch'
import picture from './img/1.jpg'
import picture2 from './img/4.jpg'

export class Bus extends Component {
    callback(key) {
        console.log(key);
    }
    render() {
        const { TabPane } = Tabs;
        const contentStyle = {
            height: '500px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
          };
        return (
            <div>
                <h1>公交地铁查询</h1>
                {/* <Carousel autoplay>
                    <div>
                    <h3 style={contentStyle}><img src={picture}  alt="logo" style={{height:500,width:'100%'}} /></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src={picture2}  alt="logo" style={{height:500,width:'100%'}} /></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src={picture}  alt="logo" style={{height:500,width:'100%'}} /></h3>
                    </div>
                    <div>
                    <h3 style={contentStyle}><img src={picture2}  alt="logo" style={{height:500,width:'100%'}} /></h3>
                    </div>
                </Carousel> */}
                <Tabs defaultActiveKey="1" onChange={this.callback}>
                    <TabPane tab="线路查询" key="1">
                        <RouteSerarch/>
                    </TabPane>
                    <TabPane tab="换乘查询" key="2">
                    Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="站点查询" key="3">
                    Content of Tab Pane 3
                    </TabPane>
                    <TabPane tab="附件站点查询" key="4">
                    Content of Tab Pane 4
                    </TabPane>
                    <TabPane tab="城市查询" key="5">
                    Content of Tab Pane 5
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

export default Bus

import React, { Component } from 'react'
import axios from 'axios'
import { Input ,Button,Select,Table, Tag, Space } from 'antd';
import ReactDOM from 'react-dom';

export class RouteSerarch extends Component {
    constructor(){
      super()
      this.state={
        city: '杭州',
        transitno:'',
        busContent:[],
        key:'',
        xiangxizhandian:[]
      }
    }
    onChange(value) {
      console.log(`selected ${value}`);
    }
    onSearch(val) {
      console.log('search:', val);
    }
    //获取input输入的城市
    changeCity=(event)=>{
      console.log(event.target.value);
      this.setState({city:event.target.value})
      
    }
    //获取input输入的车次
    changeTransitno=(event)=>{
      console.log(event.target.value);
      this.setState({transitno:event.target.value})
    }
    search=()=>{
      const {city,transitno,busContent}=this.state;
      console.log(city,transitno);
      let data = {
        params: {
          key: "7z5fCtRPrDkdWJUvvuLNSfPTa",
          city: city,
          transitno:transitno
        },
      };
      axios.get("https://binstd.apistd.com/transit/line", data).then(
          (res) => {
            const busContent=res.data.result;
            console.log(busContent);
            this.setState({busContent:busContent})
            
           },
          (error) => {
            console.log("失败了", error);
          }
        );
      
    }
    searchJutizd=(event)=>{
      const {busContent,xiangxizhandian}=this.state;
      const key=event.target.innerText-1;
      console.log(event.target.innerText);
      busContent.map((item,index)=>{
        if(index===key){
          console.log(item.list);
          this.setState({xiangxizhandian:item.list});

        }
      })

      
    }
   
    render() {
      const { Option } = Select;
      const {city,transitno,busContent,xiangxizhandian}=this.state;
      console.log(busContent);
      let  columns=[];
      let data=[];
      if(busContent.length===0){
      }else{
         columns = [ 
          {
            title: '车次',
            dataIndex: 'transitno',
            key: 'transitno',
          },
          {
            title: '始发站',
            dataIndex: 'startstation',
            key: 'startstation',
          },
          {
            title: '终点站',
            dataIndex: 'endstation',
            key: 'endstation',
          },
          {
            title: '票价',
            key: 'price',
            dataIndex: 'price',
          },
          {
            title: '营业时间',
            key: 'timetable',
            dataIndex: 'timetable',
          },
          {
            title: '详细站点',
            key: 'xiangxizhandian',
            render: (record) => (
              <Space size="middle">
                  <button onClick={this.searchJutizd}>{record.key}</button>
              </Space>
            ),
          },
        ];
        busContent.map((item,index)=>{
          data.push(
            {
              key: index+1,
              transitno: item.transitno,
              startstation:item.startstation ,
              endstation: item.endstation,
              price: item.price,
              timetable:item.timetable,
            }
          )
        })
        
      }
    
      
    
      // 太多了，累的不行不写了
      const routeList=["1路",'2路','3路','4路','4路区间','5路','6路','7路','7路外环','8路','9路'];
        return (
            <div>
              <div>
                请输入你要查询的城市:
                <Input placeholder="请输入查询的城市" defaultValue={city} onBlur={this.changeCity}  style={{width:300}} />
              </div>
              <div>
                请输入你要查询的车次:
                <Input placeholder="请输入查询的车次" defaultValue={transitno}  onBlur={this.changeTransitno} style={{width:300}} />
                <Button type="primary" onClick={this.search}>查询</Button>
              </div>
              <div>
              {/* 请选择你要查询的车次:
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="Select a person"
                optionFilterProp="children"
                onChange={this.onChange}
                onSearch={this.onSearch}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {
                   routeList.map((item,index) => {
                        return  <Option key={index} value={item}>{item}</Option>
                   })
               }
              </Select> */}
              </div>
              <div>
              {busContent.length!==0?<Table columns={columns} dataSource={data} />:null}
              {/* <Table columns={columns} dataSource={data} /> */}
              </div>
            <div>{xiangxizhandian.length!==0?<div>
              {xiangxizhandian.map((item,index)=>{
                  return <li key={index}>{item.sequenceno}{item.station}</li>

              })
            }</div>:null}</div> 
            </div>
        )
    }
}

export default RouteSerarch

import React, { Component } from 'react'
import axios from 'axios'
import { Input ,Button,Select,Table, Tag, Space } from 'antd';
export class Station extends Component {
    constructor(){
        super()
        this.state=({
            city:'杭州',
            address:'浙江大学',
            stations:[],
            xiangxiZhandian:[]
        })
    }
    //获取input输入的城市
    changeCity=(event)=>{
        console.log(event.target.value);
        this.setState({city:event.target.value})
        
    }
    //获取input输入的城市
    changeAddress=(event)=>{
        console.log(event.target.value);
        this.setState({address:event.target.value})
        
    }
    search=()=>{
        const {city,address,stations}=this.state;
        console.log(city,address,stations);
        let data = {
          params: {
            key: "7z5fCtRPrDkdWJUvvuLNSfPTa",
            city: city,
            address:address
          },
        };
        console.log(data);
        
        axios.get("https://binstd.apistd.com/transit/nearby", data).then(
            (res) => {
               console.log(res.data.result);
               this.setState({stations:res.data.result})
             },
            (error) => {
              console.log("失败了", error);
            }
        );
        
      }
      xiangxiZhandian=(event)=>{
        console.log(event.target.innerText);  
          const stationContent=event.target.innerText;
          const {stations}=this.state
          let station = stations.filter(item=>item.station===stationContent);
          console.log(station);
          this.setState({xiangxiZhandian:station})
          
        
      }
    render() {
        const {city,address,stations,xiangxiZhandian}=this.state;
        // if(xiangxiZhandian.length>0){
        //     const lines=xiangxiZhandian[0].lines;
        //     lines.map((item,index)=>{
        //         console.log(item); 
        //         return <li>{item}</li>
        //     })
        // }
        
        return (
            <div>
              <h1>站点查询yyds</h1>
              <div>
                请输入你要查询的城市:
                <Input placeholder="请输入查询的城市" defaultValue={city} onBlur={this.changeCity}  style={{width:300}} />
              </div>
              <div>
                请输入你要查询的地址:
                <Input placeholder="请输入查询的地址" defaultValue={address}  onBlur={this.changeAddress} style={{width:300}} />
                <Button type="primary" onClick={this.search}>查询</Button>
              </div>
              <div>
                {stations.length>0?
                 <li>
                    {stations.map((item,index)=>{return <li key={index} onClick={this.xiangxiZhandian} style={{color:'blue',textDecoration:'underline'}}>
                    {item.station}
                 </li>})}</li>:null}
              </div>
              <div>
                {xiangxiZhandian.length>0?(xiangxiZhandian[0].lines?<div>{xiangxiZhandian[0].lines.map((item,index)=>{ return <li key={index}>{item}</li>
                })}</div>:<div>附件没有其他站点</div>):null}
              </div>
            </div>
        )
    }
}

export default Station

import React, { Component } from 'react'
import axios from 'axios'

export class CitySearch extends Component {

    constructor(){
        super()
        this.state=({
            citys:[],
            city:[],
            num:'',
            inputCity:''
        })
    }

    componentDidMount() {
        
    }
    searchAll=()=>{
        let data = {
            params: {
              key: "7z5fCtRPrDkdWJUvvuLNSfPTa",
            },
          };
        axios.get("https://binstd.apistd.com/transit/city", data).then(
        (res) => {
            console.log(res.data.result);
            const citys=res.data.result;
            // for(let i=0;i<citys.length;i++){
            //     console.log(citys[i]);
                
            // }
            this.setState({citys:citys})
            
        },
        (error) => {
            console.log("失败了", error);
        }
        );

    }
    searchOne=()=>{
        const {citys,num,inputCity}=this.state;
        console.log(num==='');
        
        let city = citys.filter(item=>item.name===inputCity);
        console.log(city);
        this.setState({city:city,citys:[]})
       
        
    }
    changeTransitno=(event)=>{
        this.setState({inputCity:event.target.value})
    }
    render() {
        const {citys,city,inputCity}=this.state
        console.log(city);
        
        return (
            <div>
                你可以查询到所有的城市和城市对应id
                <button onClick={this.searchAll}>点击查看所有</button>
                请输入你要查询的某个城市：<input defaultValue={inputCity}  onBlur={this.changeTransitno} ></input><button onClick={this.searchOne}>查询</button>
                <div>
                    <ul>
                        {citys.length!==0?<div>{citys.map((item,index)=>{return <li>{item.cityid}-{item.name}</li>})}</div>:null}
                    </ul>
                    <ul>
                        {city!==''?<div>{city.map((item,index)=>{return <li key={index}>{item.cityid}-{item.name}</li>})}</div>:null}
                    </ul>
                </div>
            </div>
        )
    }
}

export default CitySearch