6 changed files with 243 additions and 134 deletions
@ -1,71 +1,151 @@ |
|||||
import React, { useState } from 'react' |
import React, { useState } from 'react' |
||||
import { Carousel } from 'antd'; |
import { Carousel, Input } from 'antd'; |
||||
import Module from '../../public/module' |
import Module from '../../public/module' |
||||
|
import AutoRollComponent from '../build/AutoRollComponent' |
||||
|
import { useEffect } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { busWillRun } from '../../public/olMap' |
||||
|
|
||||
const Right = () => { |
let queryTimeout = null |
||||
const [dataLists, setDataList] = useState([ |
const Right = ({ busRunTime }) => { |
||||
{ |
const [dataLists, setDataList] = useState([ |
||||
route: '147', |
{ |
||||
plate: '赣APJ090' |
route: '147', |
||||
}, { |
plate: '赣APJ090' |
||||
route: '166', |
}, { |
||||
plate: '赣APJ087' |
route: '166', |
||||
}, { |
plate: '赣APJ087' |
||||
route: '171', |
}, { |
||||
plate: '赣APJ184' |
route: '171', |
||||
}, { |
plate: '赣APJ184' |
||||
route: '186', |
}, { |
||||
plate: '赣APJ241' |
route: '186', |
||||
}, { |
plate: '赣APJ241' |
||||
route: '199', |
}, { |
||||
plate: '赣APJ337' |
route: '199', |
||||
} |
plate: '赣APJ337' |
||||
]) |
} |
||||
const style = { height: "97%", marginTop: "3%" } |
]) |
||||
return ( |
const [busRunTimeList, setBusRunTimeList] = useState(busRunTime) |
||||
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}> |
const [queryStr, setQueryStr] = useState('') |
||||
<Module style={style} customize={true} title={"车辆视频监控"}> |
|
||||
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
useEffect(() => { |
||||
<Carousel |
setBusRunTimeList( |
||||
autoplay |
queryStr ? |
||||
infinite |
busRunTime.filter(b => { |
||||
autoplaySpeed={300000} |
return b?.busNoChar?.indexOf(queryStr) > -1 |
||||
vertical={true} |
}) |
||||
slidesToShow={4} |
: busRunTime |
||||
> |
) |
||||
{ |
}, [queryStr, busRunTime]) |
||||
dataLists.map((data, index) => ( |
|
||||
<div key={index} style={{ width: '100%', height: '40%' }}> |
const style = { height: "97%", marginTop: "3%" } |
||||
<div className='busInformation'> |
return ( |
||||
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> |
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}> |
||||
<span> |
<Module style={style} customize={true} |
||||
<h3>所属线路</h3> |
// title={"车辆视频监控"}
|
||||
<h4>{data.route}</h4> |
title={"公交运营信息"} |
||||
<h3>车辆牌照号</h3> |
> |
||||
<h5>{data.plate}</h5> |
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}> |
||||
</span> |
<div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}> |
||||
</div> |
<img src='/assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} /> |
||||
<div className='busVideo'> |
<Input |
||||
<div style={{ |
style={{ |
||||
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
width: '90%', |
||||
border: '1px solid #1C60FE' |
background: 'none', |
||||
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div> |
backgroundColor: 'none', |
||||
<div style={{ |
color: 'rgba(216, 240, 255, 0.8)', |
||||
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
border: 'none', |
||||
border: '1px solid #1C60FE' |
boxShadow: 'none', |
||||
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div> |
}} |
||||
<div style={{ |
placeholder="请输入车牌号" |
||||
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
onChange={(e) => { |
||||
border: '1px solid #1C60FE' |
if (queryTimeout) { |
||||
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div> |
clearTimeout(queryTimeout) |
||||
</div> |
} |
||||
</div> |
queryTimeout = setTimeout(() => { |
||||
)) |
setQueryStr(e.target.value) |
||||
} |
}, 600) |
||||
</Carousel> |
}} |
||||
</div> |
/> |
||||
</Module> |
</div> |
||||
</div> |
|
||||
) |
<Carousel |
||||
|
autoplay |
||||
|
infinite |
||||
|
// autoplaySpeed={300000}
|
||||
|
autoplaySpeed={1000 * 3} |
||||
|
vertical={true} |
||||
|
slidesToShow={4} |
||||
|
> |
||||
|
{ |
||||
|
busRunTimeList.map((b, i) => { |
||||
|
return ( |
||||
|
<div key={index} style={{ width: '100%', height: '40%' }}> |
||||
|
<div className='busInformation'> |
||||
|
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> |
||||
|
<span> |
||||
|
<h3>车辆牌照</h3> |
||||
|
<h5>{d.busNoChar}</h5> |
||||
|
<h3>调度状态</h3> |
||||
|
<h4>{busWillRun.find(w => w.value == d.willRun)?.text || '--'}</h4> |
||||
|
</span> |
||||
|
<span> |
||||
|
<h3>发车时间</h3> |
||||
|
<h4>{d.lastDepTime}</h4> |
||||
|
</span> |
||||
|
<span> |
||||
|
<h3>司机</h3> |
||||
|
<h5>{d.employeeName}</h5> |
||||
|
<h3>工号</h3> |
||||
|
<h4>{d.opNo}</h4> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
}) |
||||
|
} |
||||
|
{/* { |
||||
|
dataLists.map((data, index) => ( |
||||
|
<div key={index} style={{ width: '100%', height: '40%' }}> |
||||
|
<div className='busInformation'> |
||||
|
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> |
||||
|
<span> |
||||
|
<h3>所属线路</h3> |
||||
|
<h4>{data.route}</h4> |
||||
|
<h3>车辆牌照号</h3> |
||||
|
<h5>{data.plate}</h5> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className='busVideo'> |
||||
|
<div style={{ |
||||
|
width: '98%', margin: '1% 1%', height: 152, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border: '1px solid #1C60FE' |
||||
|
}}><img src='/assets/images/quanju/fake/gj1.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
|
<div style={{ |
||||
|
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border: '1px solid #1C60FE' |
||||
|
}}><img src='/assets/images/quanju/fake/gj2.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
|
<div style={{ |
||||
|
width: '48%', margin: '1% 1%', height: 100, display: 'block', float: 'left', boxShadow: '0px 1px 5px 0px #1C60FE', |
||||
|
border: '1px solid #1C60FE' |
||||
|
}}><img src='/assets/images/quanju/fake/gj3.png' style={{ width: '100%', height: '100%' }} /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)) |
||||
|
} */} |
||||
|
</Carousel> |
||||
|
</div> |
||||
|
</Module> |
||||
|
</div> |
||||
|
) |
||||
} |
} |
||||
export default Right |
|
||||
|
function mapStateToProps (state) { |
||||
|
const { busRunTime, } = state; |
||||
|
return { |
||||
|
busRunTime: busRunTime.data || [], |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(Right); |
||||
Loading…
Reference in new issue