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

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

@@ -30,16 +30,55 @@ const Right = ({ busRunTime }) => {
     const [queryStr, setQueryStr] = useState('')
 
     useEffect(() => {
-        setBusRunTimeList(
-            queryStr ?
+        let repeatCarNo = []
+        let nextBusRunList = queryStr ?
             busRunTime.filter(b => {
-                    return b?.busNoChar?.indexOf(queryStr) > -1
+                let queryMatch = b?.busNoChar?.indexOf(queryStr) > -1
+                if (repeatCarNo.some(c => c == b.busNoChar.trim())) {
+                    return false
+                } else {
+                    repeatCarNo.push(b.busNoChar.trim())
+                    return queryMatch && true
+                }
             })
-                : busRunTime
-        )
+            : 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])
 
     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 (
         <div style={{ position: 'absolute', right: 0, width: "23%", height: "100%", marginRight: "1%", }}>
             <Module style={style} customize={true}
@@ -70,6 +109,8 @@ const Right = ({ busRunTime }) => {
                         />
                     </div>
 
+                    {
+                        carouselContent.length > 3 ?
                             <Carousel
                                 autoplay
                                 infinite
@@ -79,31 +120,7 @@ const Right = ({ busRunTime }) => {
                                 slidesToShow={4}
                             >
                                 {
-                            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>
-                                )
-                            })
+                                    carouselContent
                                 }
                                 {/* {
                                 dataLists.map((data, index) => (
@@ -135,6 +152,10 @@ const Right = ({ busRunTime }) => {
                                 ))
                             } */}
                             </Carousel>
+                            :
+                            carouselContent
+                    }
+
                 </div>
             </Module>
         </div>