Browse Source

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

master
peng.peng 1 year ago
parent
commit
8e6b21bb66
  1. 33
      super-screen/client/src/sections/water-prevention/components/right-bottom.js

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

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

Loading…
Cancel
Save