free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

路面执法监控 但视频展示

dev
巴林闲侠 1 year ago
parent
c1756e68d3
commit
aa275367ed
4 changed files with 87 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
  2. 5
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js
  3. 20
      web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js
  4. 137
      web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js

1
web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
View File

@ -34,7 +34,6 @@ const Right = (props) => {
// const
})
}, [])
console.log("1211", nums);
const renderBody = () => {
return (

5
web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js
View File

@ -45,11 +45,9 @@ class ReactCarousel extends Component {
// arr1: ""
dizhi: localStorage.getItem("qndmn")
}
console.log(this.props.shuzu);
this.state.imgs = this.props.shuzu.filter((item) => {
return item.imgs !== ""
})
}
@ -80,7 +78,8 @@ class ReactCarousel extends Component {
<img src={this.state.dizhi + "/" + value.imgs} style={{
// width: "100%", height: "100%",
width: 140, height: 140,
marginLeft: "3%", marginRight: "3%"
marginLeft: "7%", marginRight: "1%",
position: 'relative', left: 16, top: 8
}} />
</div>
</li>

20
web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js
View File

@ -28,16 +28,16 @@ const Leftcenter = ({ videoCenterList }) => {
}, [videoCenterList])
useEffect(() => {
const timer = setInterval(() => {
if (num == list.length) {
setNum(1);
// setTu(list[0].img);
} else {
setNum(num + 1);
// setTu(list[num].img);
}
}, 1000 * 60 * 5);
return () => clearInterval(timer);
// const timer = setInterval(() => {
// if (num == list.length) {
// setNum(1);
// // setTu(list[0].img);
// } else {
// setNum(num + 1);
// // setTu(list[num].img);
// }
// }, 1000 * 60 * 5);
// return () => clearInterval(timer);
}, [num]);
const renderBody = () => {

137
web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js
View File

@ -50,80 +50,93 @@ class ReactCarousel extends Component {
}
render () {
const { imgs } = this.state
const { imgs, showIndex } = this.state
return (
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
<div className="contain"
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
>
<ul className="ul">
{
imgs[showIndex] ?
<div style={{ width: "90%", height: "80%", backgroundSize: 'cover', position: "absolute", left: "10%", top: "-5%" }}>
{this.renderVideo(imgs[showIndex], showIndex)}
<div style={{ width: "100%", position: "absolute", top: "83%" }}>
<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%" }} />
{imgs[showIndex]?.deviceName}
</div>
</div>
</div>
: ''
}
{/* <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>
)
})
// 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) }}>
</ul> */}
<div className="control" style={{ width: "100%", height: "10%" }}>
<span style={{ position: "absolute", top: "75%", 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) }}>
<span style={{ position: "absolute", top: "75%", 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>
</div>
)

Write Preview
Loading…
Cancel
Save