: ""}
- {beijing == index ? 
: ""}
+ {beijing == index ? 
-
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js index 3b76e4bf..872032b3 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/left-center.js @@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react' import Module from '../../../public/module' import Lunbo from "../right/lunbo" import { connect } from 'react-redux' +import { YSIframePlayer } from '../../../../../../components' // import "./left.less" const Leftcenter = ({ videoCenterList }) => { - console.log(videoCenterList); const style = { height: "30%", marginTop: "5%" } // const hualun = "auto" const [num, setNum] = useState(1); @@ -31,10 +31,10 @@ const Leftcenter = ({ videoCenterList }) => { const timer = setInterval(() => { if (num == list.length) { setNum(1); - setTu(list[0].img); + // setTu(list[0].img); } else { setNum(num + 1); - setTu(list[num].img); + // setTu(list[num].img); } }, 2000 * 10); return () => clearInterval(timer); @@ -77,10 +77,24 @@ const Leftcenter = ({ videoCenterList }) => {
{
list.map((item, index) => {
+ console.log(item);
return index + 1 == num ?
- 
+ {/* */}
+
+
-
-
+
+ )
+}
+
+function mapStateToProps (state) {
+ const { videoCenterList } = state
-
- )
+ return {
+ videoCenterList: videoCenterList.data || []
+ }
}
-export default Righttop
\ No newline at end of file
+export default connect(mapStateToProps)(Righttop)
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index a9ec44d9..add7d5a1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,11 +6,7 @@
"scripts": {
"test": "mocha",
"start": "cross-env NODE_ENV=development npm run start-params",
-<<<<<<< Updated upstream
"start-params": "node server -p 5000 -u http://localhost:13400 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com --vcmpWebUrl https://mediaconsole.ngaiot.com --vcmpMirrorId 24461524032354",
-=======
- "start-params": "node server -p 5000 -u http://localhost:13401 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
->>>>>>> Stashed changes
"deploy": "export NODE_ENV=production&&npm run color && npm run build && node server",
"build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
"build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js",
-
{ this.stop() }} //鼠标进入停止自动播放
- onMouseLeave={() => { this.start() }} //鼠标退出自动播放
- >
-
- )
- }
- componentDidMount () { //一开始自动播放
- this.start();
- }
+ )
+ }
+ componentDidMount () { //一开始自动播放
+ if(this.props.shuzu)
+ 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
- })
- }
+ 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
+ })
+ }
}
export default ReactCarousel;
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js b/web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js
new file mode 100644
index 00000000..ae9aca35
--- /dev/null
+++ b/web/client/src/sections/quanju/containers/footer/leadership/right/hudongVideo.js
@@ -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 -
- {
- this.state.imgs.map((value, index) => {
- return (
-
-
- ---+ render () { + console.log(this.props); + return ( +--
- {value[0]?.name}
- +{ this.stop() }} //鼠标进入停止自动播放 + onMouseLeave={() => { this.start() }} //鼠标退出自动播放 + > ++ {value[1]?.name ?-
+ {
+ this.state.imgs.map((value, index) => {
+ return (
+
-
+ +- {value[1]?.name ?+-++
+ {value[0]?.name}
+ -: ""} - {value[2]?.name ?----
- {value[1]?.name}
- -: ""} - {value[3]?.name ?----
- {value[2]?.name}
- -: ""} - {/*----
- {value[3]?.name}
- {value[1].name}+
+: ""} + {value[2]?.name ?++++
+ {value[1]?.name}
+ +: ""} + {value[3]?.name ?++++
+ {value[2]?.name}
+ +: ""} + {/*++++
+ {value[3]?.name}
+ {value[1].name}{value[2].name}{value[3].name}*/} - - ) - }) - } - - {/*-
+
+ )
+ })
+ }
+
-
{
this.state.imgs.map((value, index) => {
return (
@@ -115,68 +116,71 @@ class ReactCarousel extends Component {
}
- { this.previous(e) }}> -+
-
- { this.next(e) }}>
- 
-
- + { this.previous(e) }}> ++
+
+ { this.next(e) }}>
+
+
+ -
+
+
+ )
+ }
+
+ 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)
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js
index c46e0de6..fa7fb934 100644
--- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js
+++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-top.js
@@ -2,133 +2,151 @@ import React, { useState, useEffect } from 'react';
import Module from '../../../public/module'
import { Radio, Select, Spin } from 'antd';
import Lunbo from "./lunbo"
-import Huadong from './hudong';
+import Huadong from './hudongVideo';
+import { connect } from 'react-redux'
import "./left.less"
-const Righttop = () => {
- const { Option } = Select;
- const style = { height: "68%" }
- const children = [];
- const [size, setSize] = useState('454544545');
- const [num, setNum] = useState();
- const [tu, setTu] = useState("");
- const [name, setName] = useState("");
- const handleChange = (value) => {
- // console.log(`Selected: ${value}`);
- setSize(value)
- };
+const Righttop = ({ videoCenterList }) => {
+ const { Option } = Select;
+ const style = { height: "68%" }
+ const children = [];
+ const [size, setSize] = useState('454544545');
+ const [num, setNum] = useState();
+ const [tu, setTu] = useState("");
+ const [name, setName] = useState("");
+ const handleChange = (value) => {
+ // console.log(`Selected: ${value}`);
+ setSize(value)
+ };
- const [list, setList] = useState([
- { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
- { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
- { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
- { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
- { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
- { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
- { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
- { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
- { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
- { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
- ])
- for (let i = 0; i < list.length; i++) {
- children.push();
- }
+ const [list, setList] = useState([
+ // { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
+ // { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
+ // { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
+ // { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
+ // { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
+ // { name: '沙潭至五星', img: "/assets/images/leadership/fake/1.jpg" },
+ // { name: '滁槎至协城', img: "/assets/images/leadership/fake/2.jpg" },
+ // { name: '瓜山至广福', img: "/assets/images/leadership/fake/3.jpg" },
+ // { name: '罗舍至泗洪', img: "/assets/images/leadership/fake/4.jpg" },
+ // { name: '渔业至万州', img: "/assets/images/leadership/fake/5.jpg" },
+ ])
+ // for (let i = 0; i < list.length; i++) {
+ // children.push();
+ // }
- // useEffect(() => {
- // const timer = setInterval(() => {
- // if (num == 12) {
- // setNum(1);
- // setTu(list[0].img);
- // } else {
- // setNum(num + 1);
- // setTu(list[num].img);
- // }
- // }, 6000);
- // return () => clearInterval(timer);
- // }, [num]);
- const renderBody = () => {
- return (
- { this.stop() }} //鼠标进入停止自动播放
+ onMouseLeave={() => { this.start() }} //鼠标退出自动播放
+ >
+
+ -
+ {
+ this.state.imgs.map((value, index) => {
+ return (
+
-
+ {
+ imgs.map((value, index) => {
+ if (index == 0) {
+ return value?.deviceSerial ? + {this.renderVideo(value, index)} +: '' + } else if (index == 1) { + return value?.deviceSerial ?++++
+ {value?.deviceName}
+ + {this.renderVideo(value, index)} +: "" + } else if (index == 2) { + return value?.deviceSerial ?++++
+ {value?.deviceName}
+ + {this.renderVideo(value, index)} +: "" + } else if (index == 3) { + return value?.deviceSerial ?++++
+ {value?.deviceName}
+ + {this.renderVideo(value, index)} +: "" + } else { + return undefined + } + }) + } +++++
+ {value?.deviceName}
+
+ )
+ })
+ }
+
+ { this.previous(e) }}>
+
+
+ { this.next(e) }}>
+
+
+
*/}
+
+
+ { this.next(e) }}>
+
+
+ {
- list.map((item, index) => {
- return (
-
+ )
+ }
+ return (
+ <>
-
-
- )
+ useEffect(() => {
+ if (videoCenterList.length) {
+ setList(videoCenterList.slice(-4))
+ }
+ }, [videoCenterList])
+ const renderBody = () => {
+ const offlineDevice = videoCenterList.filter(v => v.status == 0)
+ return (
+
- {
- // setTu(item.img);
- setNum(index);
- }} onMouseLeave={() => {
- setNum()
- }}>
- {num == index ? : ""}
- {num == index ? : ""}
+ // useEffect(() => {
+ // const timer = setInterval(() => {
+ // if (num == 12) {
+ // setNum(1);
+ // setTu(list[0].img);
+ // } else {
+ // setNum(num + 1);
+ // setTu(list[num].img);
+ // }
+ // }, 6000);
+ // return () => clearInterval(timer);
+ // }, [num]);
-
-
- {item.name}
-{item.name}
-{
+ offlineDevice.length ? offlineDevice.map((item, index) => {
+ return (
+
+ )
+ }) : ''
+ }
+
+
+
+ {
+ // setTu(item.img);
+ setNum(index);
+ }} onMouseLeave={() => {
+ setNum()
+ }}>
+ {/* {num == index ? : ""}
+ {num == index ? : ""} */}
- })
- }
-
- )
- }
- return (
- <>
+ {item.deviceName}
+{item.deviceSerial}
+ +
-
- 监控总数
129
-在线率
88.87%
-
- 
+
+
-
+
+
+ 监控总数
{videoCenterList.length}
+在线率
+ { + videoCenterList.length ? + ((videoCenterList.filter(v => v.status == 1).length / videoCenterList.length) * 100).toFixed(0) : '100' + }%
+
+
-
+
-
-
-
+ {size}
+ {/*
+
+
*/}
- {size}
+
+
+
+
+
+
-
+ {/* 
+ 离线详情
+ 
+
+ {title || ''}
*/} +
+ 离线详情
+
+
-
-
-
-
-
+
- {/*
- 离线详情
-
-
- {title || ''}
*/} -
- 离线详情
-
-