free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

运营大屏-公交运营信息关键字搜索会展示重复数据

dev
巴林闲侠 1 year ago
parent
82a676b0e8
commit
25d4c60362
1 changed files with 86 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 151
      web/client/src/sections/quanju/containers/footer/operation/right.js

151
web/client/src/sections/quanju/containers/footer/operation/right.js
View File

@ -30,16 +30,55 @@ const Right = ({ busRunTime }) => {
const [queryStr, setQueryStr] = useState('') const [queryStr, setQueryStr] = useState('')
useEffect(() => { useEffect(() => {
setBusRunTimeList( let repeatCarNo = []
queryStr ? let nextBusRunList = queryStr ?
busRunTime.filter(b => { busRunTime.filter(b => {
return b?.busNoChar?.indexOf(queryStr) > -1 let queryMatch = b?.busNoChar?.indexOf(queryStr) > -1
}) if (repeatCarNo.some(c => c == b.busNoChar.trim())) {
: busRunTime return false
) } else {
repeatCarNo.push(b.busNoChar.trim())
return queryMatch && true
}
})
: busRunTime.filter(b => {
if (repeatCarNo.some(c => c == b.busNoChar.trim())) {
return false
} else {
repeatCarNo.push(b.busNoChar.trim())
return true
}
})
console.log(nextBusRunList);
setBusRunTimeList(nextBusRunList)
}, [queryStr, busRunTime]) }, [queryStr, busRunTime])
const style = { height: "97%", marginTop: "3%" } const style = { height: "97%", marginTop: "3%" }
const carouselContent = busRunTimeList.map((d, index) => {
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>
<h5>{d.lastDepTime}</h5>
</span>
<span style={{ position: 'relative', left: '21%' }}>
<h3>司机</h3>
<h5>{d.employeeName}</h5>
<h3>工号</h3>
<h4>{d.opNo}</h4>
</span>
</div>
</div>
)
})
return ( return (
<div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}> <div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}>
<Module style={style} customize={true} <Module style={style} customize={true}
@ -70,71 +109,53 @@ const Right = ({ busRunTime }) => {
/> />
</div> </div>
<Carousel {
autoplay carouselContent.length > 3 ?
infinite <Carousel
// autoplaySpeed={300000} autoplay
autoplaySpeed={1000 * 3} infinite
vertical={true} // autoplaySpeed={300000}
slidesToShow={4} autoplaySpeed={1000 * 3}
> vertical={true}
{ slidesToShow={4}
busRunTimeList.map((d, index) => { >
return ( {
carouselContent
}
{/* {
dataLists.map((data, index) => (
<div key={index} style={{ width: '100%', height: '40%' }}> <div key={index} style={{ width: '100%', height: '40%' }}>
<div className='busInformation'> <div className='busInformation'>
<img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} /> <img src='/assets/images/quanju/theBus.png' style={{ width: '15%', display: 'block', float: 'left' }} />
<span> <span>
<h3>车辆牌照</h3> <h3>所属线路</h3>
<h5>{d.busNoChar}</h5> <h4>{data.route}</h4>
<h3>调度状态</h3> <h3>车辆牌照号</h3>
<h4>{busWillRun.find(w => w.value == d.willRun)?.text || '--'}</h4> <h5>{data.plate}</h5>
</span>
<span>
<h3>发车时间</h3>
<h5>{d.lastDepTime}</h5>
</span>
<span style={{ position: 'relative', left: '21%' }}>
<h3>司机</h3>
<h5>{d.employeeName}</h5>
<h3>工号</h3>
<h4>{d.opNo}</h4>
</span> </span>
</div> </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> </div>
) ))
}) } */}
} </Carousel>
{/* { :
dataLists.map((data, index) => ( carouselContent
<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> </div>
</Module> </Module>
</div> </div>

Write Preview
Loading…
Cancel
Save