7 changed files with 528 additions and 287 deletions
@ -0,0 +1,202 @@ |
|||||
|
import React, { Component } from 'react'; |
||||
|
import './left.less'; |
||||
|
import { connect } from 'react-redux' |
||||
|
import { YSIframePlayer } from '../../../../../../components' |
||||
|
|
||||
|
class ReactCarousel extends Component { |
||||
|
chunk (arr, size) { |
||||
|
var arr1 = new Array(); |
||||
|
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
||||
|
arr1[i] = new Array(); |
||||
|
} |
||||
|
var j = 0; |
||||
|
var x = 0; |
||||
|
for (var i = 0; i < arr.length; i++) { |
||||
|
if (!((i % size == 0) && (i != 0))) { |
||||
|
arr1[j][x] = arr[i]; |
||||
|
x++; |
||||
|
} else { |
||||
|
j++; |
||||
|
x = 0; |
||||
|
arr1[j][x] = arr[i]; |
||||
|
x++; |
||||
|
} |
||||
|
} |
||||
|
return arr1; |
||||
|
} |
||||
|
|
||||
|
constructor() { |
||||
|
super(); |
||||
|
this.state = { |
||||
|
imgs: [], |
||||
|
showIndex: 0, //显示第几个图片
|
||||
|
timer: null, // 定时器
|
||||
|
show: false, // 前后按钮显示
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderVideo = (item, index) => { |
||||
|
return <YSIframePlayer |
||||
|
containerId={`yingshiPlay_lu_${index}`} |
||||
|
height='100%' |
||||
|
width="100%" |
||||
|
url={`ezopen://open.ys7.com/${item.deviceSerial}/${item.channelNo || '1'}.live`} |
||||
|
audio="0" |
||||
|
ysToken={item.token} |
||||
|
videoState={{ |
||||
|
status: item.status |
||||
|
}} |
||||
|
/> |
||||
|
} |
||||
|
|
||||
|
render () { |
||||
|
console.log(this.props); |
||||
|
const { imgs } = this.state |
||||
|
return ( |
||||
|
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
||||
|
<div className="contain" |
||||
|
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
|
||||
|
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
||||
|
> |
||||
|
<ul className="ul"> |
||||
|
{ |
||||
|
this.state.imgs.map((value, index) => { |
||||
|
return ( |
||||
|
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
||||
|
key={index} |
||||
|
> |
||||
|
{ |
||||
|
imgs.map((value, index) => { |
||||
|
if (index == 0) { |
||||
|
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}> |
||||
|
{this.renderVideo(value, index)} |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
|
{value?.deviceName} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> : '' |
||||
|
} else if (index == 1) { |
||||
|
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}> |
||||
|
{this.renderVideo(value, index)} |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
|
{value?.deviceName} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> : "" |
||||
|
} else if (index == 2) { |
||||
|
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}> |
||||
|
{this.renderVideo(value, index)} |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
|
{value?.deviceName} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> : "" |
||||
|
} else if (index == 3) { |
||||
|
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}> |
||||
|
{this.renderVideo(value, index)} |
||||
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
||||
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
||||
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
||||
|
{value?.deviceName} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> : "" |
||||
|
} else { |
||||
|
return undefined |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
</li> |
||||
|
) |
||||
|
}) |
||||
|
} |
||||
|
</ul> |
||||
|
{/* <div className="control" style={{ width: "100%", height: "10%" }}> |
||||
|
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}> |
||||
|
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
||||
|
</span> |
||||
|
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}> |
||||
|
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} /> |
||||
|
</span> |
||||
|
</div> */} |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
componentWillReceiveProps (nextProps, oldProps) { |
||||
|
if (nextProps.videoCenterList && nextProps.videoCenterList.length && (!oldProps.videoCenterList || !oldProps.videoCenterList.length)) { |
||||
|
this.setState({ |
||||
|
imgs: nextProps.videoCenterList.slice(-4) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
componentDidMount () { //一开始自动播放
|
||||
|
setTimeout(() => { |
||||
|
this.start(); |
||||
|
}, 0) |
||||
|
} |
||||
|
|
||||
|
componentWillUnmount () { //销毁前清除定时器
|
||||
|
this.stop(); |
||||
|
} |
||||
|
stop = () => { //暂停
|
||||
|
let { timer } = this.state; |
||||
|
clearInterval(timer); |
||||
|
} |
||||
|
start = () => { //开始
|
||||
|
let { timer } = this.state; |
||||
|
timer = setInterval(() => { |
||||
|
this.next(); |
||||
|
}, 300000); |
||||
|
this.setState({ |
||||
|
timer |
||||
|
}) |
||||
|
} |
||||
|
change = (index) => { //点击下面的按钮切换当前显示的图片
|
||||
|
let { showIndex } = this.state; |
||||
|
showIndex = index; |
||||
|
this.setState({ |
||||
|
showIndex |
||||
|
}) |
||||
|
} |
||||
|
previous = (e) => { //上一张
|
||||
|
let ev = e || window.event; |
||||
|
let { showIndex, imgs } = this.state; |
||||
|
if (showIndex <= 0) { |
||||
|
showIndex = imgs.length - 1; |
||||
|
} else { |
||||
|
showIndex--; |
||||
|
} |
||||
|
this.setState({ |
||||
|
showIndex |
||||
|
}) |
||||
|
} |
||||
|
next = (e) => { //下一张
|
||||
|
let ev = e || window.event; |
||||
|
let { showIndex, imgs } = this.state; |
||||
|
if (showIndex >= imgs.length - 1) { |
||||
|
showIndex = 0; |
||||
|
} else { |
||||
|
showIndex++; |
||||
|
} |
||||
|
this.setState({ |
||||
|
showIndex |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { videoCenterList } = state |
||||
|
|
||||
|
return { |
||||
|
videoCenterList: videoCenterList.data || [] |
||||
|
} |
||||
|
} |
||||
|
export default connect(mapStateToProps)(ReactCarousel) |
||||
Loading…
Reference in new issue