101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
|
import TreeData from "./treeData"
|
||
|
|
import './index.less'
|
||
|
|
import { Radio, Tabs, Empty } from "antd"
|
||
|
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import HFivePlayer from "../../components/video1Plary";
|
||
|
|
import { translate } from "ol/transform";
|
||
|
|
// import HFivePlayer from "./video1";
|
||
|
|
|
||
|
|
const SplitScreen: React.FC = (props: any) => {
|
||
|
|
const [size, setSize] = useState(1);
|
||
|
|
const [list, setList] = useState<any>([]);
|
||
|
|
const [videoList, setVideoList] = useState<any>([]);
|
||
|
|
const [num, setNum] = useState<any>(999);
|
||
|
|
const [styleType, setStyle] = useState(false);
|
||
|
|
|
||
|
|
|
||
|
|
const onChange = (e: any) => {
|
||
|
|
setSize(Number(e));
|
||
|
|
handDate(Number(e))
|
||
|
|
setNum(999)
|
||
|
|
};
|
||
|
|
const handDate = (size: any) => {
|
||
|
|
props.getType(size)
|
||
|
|
console.log(new Array(size).fill(1),'4678999');
|
||
|
|
|
||
|
|
setList(new Array(size).fill(1))
|
||
|
|
setVideoList([])
|
||
|
|
}
|
||
|
|
const clickVideo = (index: any,item:any) => {
|
||
|
|
if(num == index){
|
||
|
|
props.clickIndex(999,item)
|
||
|
|
setStyle(true)
|
||
|
|
setNum(999)
|
||
|
|
}else{
|
||
|
|
props.clickIndex(index,item)
|
||
|
|
setStyle(false)
|
||
|
|
setNum(index)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
const getNum = () => {
|
||
|
|
if (num === 999) {
|
||
|
|
// return props.videoArr.length - 1
|
||
|
|
} else {
|
||
|
|
return num
|
||
|
|
}
|
||
|
|
}
|
||
|
|
useEffect(() => {
|
||
|
|
if (props.count !== 999) {
|
||
|
|
setNum(props.count)
|
||
|
|
}
|
||
|
|
}, [props.count])
|
||
|
|
useEffect(() => {
|
||
|
|
|
||
|
|
setVideoList(props.videoArr)
|
||
|
|
console.log(props.videoArr,'props.videoArr');
|
||
|
|
|
||
|
|
}, [props.videoArr])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
onChange('9')
|
||
|
|
}, [])
|
||
|
|
const items = [
|
||
|
|
{ key: '1', label: '单屏' },
|
||
|
|
{ key: '4', label: '四分屏' },
|
||
|
|
{ key: '9', label: '九分屏' },
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<div className='splitScreen'>
|
||
|
|
<Tabs
|
||
|
|
onChange={onChange}
|
||
|
|
defaultActiveKey='9'
|
||
|
|
type="card"
|
||
|
|
items={items}
|
||
|
|
/>
|
||
|
|
{/* {props.videoArr} */}
|
||
|
|
<div className={['flex', 'flexwarp', 'borderF'].join(' ')} style={{ position: 'relative' }}>
|
||
|
|
{list.map((item: any, index: any) => {
|
||
|
|
return <div onClick={() => clickVideo(index,item)}
|
||
|
|
// onClick={()=>clickVideo(index)}
|
||
|
|
className={[getNum() == index ? 'videoBorder' : null,
|
||
|
|
size == 1 ? 'videoBorder1' : null, size == 4 ? 'videoBorder4' : null,
|
||
|
|
size == 9 ? 'videoBorder9' : null,'borderFa'].join(' ')}>
|
||
|
|
{props.videoArr[index]&&<div style={{height:'100%',width:'100%'}}>
|
||
|
|
<div style={{ height: 'calc(100% - 20px)',width:'100%' }}>
|
||
|
|
{videoList.length&&<HFivePlayer size={size} wsUrl={videoList[index]} playerID={index} />}
|
||
|
|
</div>
|
||
|
|
<div style={{ textAlign: 'center' }}>{videoList[index]?.name}</div>
|
||
|
|
</div>}
|
||
|
|
{!props.videoArr[index]&&<div className='borderType'>
|
||
|
|
<img src={require('../../assets/images/no-video.png')}/>
|
||
|
|
<div className='text'>暂无视频数据</div>
|
||
|
|
</div>}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default SplitScreen
|