|
|
@ -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} /> |
|
|
|
} |
|
|
|