(*)水利视频改为用视频点位列表展示

super-screen/client/src/sections/water-prevention/components/right-bottom.js

@@ -7,49 +7,44 @@ const { Option } = Select;
 
 function DataTop5(props) {
     const { structures, accessToken, videoList } = props;
-    const [showVideoList, setShowVideoList] = useState([]);
-    const [structure, setStructure] = useState(structures[0]?.id);
+    const [showVideoList, setShowVideoList] = useState(videoList[0]?.url);
 
     useEffect(() => {
         if (videoList.length && structures.length) setShowVideoList(videoList.filter(v => v.structId === structures[0].id));
     }, [videoList])
 
     const renderSubtitle = () => (
-        <Select
+        videoList?.length > 0 && <Select
             className="gis-search-select"
             popupClassName="super-dropdownClassName"
-            style={{ width: 120, height: 24 }}
+            style={{ width: 200, height: 24 }}
             showSearch={false}
             optionFilterProp="children"
-            key={Math.random()}
-            defaultValue={structures[0]?.id}
-            value={structure}
-            onChange={(value) => { setShowVideoList(videoList.filter(v => v.structId === value)); setStructure(value) }}
+            // key={Math.random()}
+            defaultValue={videoList[0]?.url}
+            // value={showVideoList}
+            onChange={(value) => { setShowVideoList(value); }}
         >
-            {structures.map(s => <Option key={s.id} value={s.id}>{s.name}</Option>)}
+            {videoList.map(s => <Option key={s.url} value={s.url}>{s.name}</Option>)}
         </Select>
     );
     return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
-        {showVideoList?.length > 0 ?
+        {showVideoList ?
             <div className='water_video_container'>
-                {
-                    showVideoList?.map((v, i) => {
-                        const src = `https://open.ys7.com/ezopen/h5/iframe?url=${v.url}&autoplay=1&accessToken=${accessToken}`
-                        return <div className='_item' key={v.url}>
-                            <iframe
-                                id={`myPlayer-${i}`}
-                                src={src}
-                                width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
-                                height='100%'
-                                allowFullScreen
-                            >
-                            </iframe>
-                            <div className='video_bottom'>
-                                <span className='video_bottom_text'>{v.name}</span>
-                            </div>
-                        </div>
-                    })
-                }
+                <div className='_item' key={showVideoList}>
+                    <iframe
+                        id={`myPlayer-${showVideoList}`}
+                        src={`https://open.ys7.com/ezopen/h5/iframe?url=${showVideoList}&autoplay=1&accessToken=${accessToken}`}
+                        width='100%' // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
+                        height='100%'
+                        allowFullScreen
+                    >
+                    </iframe>
+                    <div className='video_bottom'>
+                        <span className='video_bottom_text'>{videoList?.find(s => s?.url == showVideoList)?.name}</span>
+                    </div>
+                </div>
+
             </div>
             : <NoData height={320} />
         }