You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
2.1 KiB
57 lines
2.1 KiB
import React, { useEffect, useState } from 'react'
|
|
import { Box } from '$components';
|
|
import { Select } from 'antd';
|
|
import './style.less';
|
|
|
|
const { Option } = Select;
|
|
|
|
function DataTop5(props) {
|
|
const { structures, accessToken, videoList } = props;
|
|
const [showVideoList, setShowVideoList] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (videoList.length && structures.length) setShowVideoList(videoList.filter(v => v.structId === structures[0].id));
|
|
}, [videoList])
|
|
|
|
const renderSubtitle = () => (
|
|
<Select
|
|
className="gis-search-select"
|
|
popupClassName="super-dropdownClassName"
|
|
style={{ width: 120, height: 24 }}
|
|
showSearch={false}
|
|
optionFilterProp="children"
|
|
key={Math.random()}
|
|
defaultValue={structures[0]?.id}
|
|
onChange={(value) => { setShowVideoList(videoList.filter(v => v.structId === value)) }}
|
|
>
|
|
{structures.map(s => <Option key={s.id} value={s.id}>{s.name}</Option>)}
|
|
</Select>
|
|
);
|
|
return <Box title={"视频监控"} bodyPaddingTop={1} subtitleSelect={renderSubtitle()}>
|
|
<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>
|
|
</Box>
|
|
}
|
|
|
|
export default DataTop5;
|
|
|
|
|
|
|