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
Unified 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 // const
}) })
}, []) }, [])
console.log("1211", nums);
const renderBody = () => { const renderBody = () => {
return ( return (

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

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

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

@ -28,16 +28,16 @@ const Leftcenter = ({ videoCenterList }) => {
}, [videoCenterList]) }, [videoCenterList])
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { // const timer = setInterval(() => {
if (num == list.length) { // if (num == list.length) {
setNum(1); // setNum(1);
// setTu(list[0].img); // // setTu(list[0].img);
} else { // } else {
setNum(num + 1); // setNum(num + 1);
// setTu(list[num].img); // // setTu(list[num].img);
} // }
}, 1000 * 60 * 5); // }, 1000 * 60 * 5);
return () => clearInterval(timer); // return () => clearInterval(timer);
}, [num]); }, [num]);
const renderBody = () => { 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 () { render () {
const { imgs } = this.state const { imgs, showIndex } = this.state
return ( return (
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> <div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
<div className="contain" <div className="contain"
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放 onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
onMouseLeave={() => { this.start() }} //鼠标退出自动播放 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) => { // this.state.imgs.map((value, index) => {
return ( // return (
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} // <li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''}
key={index} // key={index}
> // >
{ // {
imgs.map((value, index) => { // imgs.map((value, index) => {
if (index == 0) { // if (index == 0) {
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}> // return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "5%" }}>
{this.renderVideo(value, index)} // {this.renderVideo(value, index)}
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> // <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" }}> // <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%" }} /> // <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value?.deviceName} // {value?.deviceName}
</div> // </div>
</div> // </div>
</div> : '' // </div> : ''
} else if (index == 1) { // } else if (index == 1) {
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}> // return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "5%" }}>
{this.renderVideo(value, index)} // {this.renderVideo(value, index)}
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> // <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" }}> // <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%" }} /> // <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value?.deviceName} // {value?.deviceName}
</div> // </div>
</div> // </div>
</div> : "" // </div> : ""
} else if (index == 2) { // } else if (index == 2) {
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}> // return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "-3%", top: "49%" }}>
{this.renderVideo(value, index)} // {this.renderVideo(value, index)}
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> // <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" }}> // <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%" }} /> // <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value?.deviceName} // {value?.deviceName}
</div> // </div>
</div> // </div>
</div> : "" // </div> : ""
} else if (index == 3) { // } else if (index == 3) {
return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}> // return value?.deviceSerial ? <div style={{ width: "45%", height: "40%", backgroundSize: 'cover', position: "absolute", left: "45%", top: "49%" }}>
{this.renderVideo(value, index)} // {this.renderVideo(value, index)}
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> // <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" }}> // <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%" }} /> // <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
{value?.deviceName} // {value?.deviceName}
</div> // </div>
</div> // </div>
</div> : "" // </div> : ""
} else { // } else {
return undefined // return undefined
} // }
}) // })
} // }
</li> // </li>
) // )
}) // })
} }
</ul> </ul> */}
{/* <div className="control" style={{ width: "100%", height: "10%" }}> <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) }}> <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%" }} /> <img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} />
</span> </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%" }} /> <img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} />
</span> </span>
</div> */} </div>
</div> </div>
</div> </div>
) )

Write Preview
Loading…
Cancel
Save