Browse Source

Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

release_1.3.0
巴林闲侠 2 years ago
parent
commit
97f26b4145
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/addMainNodes.png
  2. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/banner.png
  3. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/close.png
  4. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/down.png
  5. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/find.png
  6. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/folder.png
  7. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nameChange.png
  8. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeCamera.png
  9. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeDel.png
  10. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeEdit.png
  11. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeadd.png
  12. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png
  13. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/toback.png
  14. BIN
      code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png
  15. 945
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  16. 8
      code/VideoAccess-VCMP/web/client/src/sections/journaling/containers/journalingCenter.jsx
  17. 4
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/index.js
  18. 16
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
  19. 27
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  20. 5
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx
  21. 253
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
  22. 1
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less
  23. 3
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/index.js
  24. 176
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  25. 672
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx
  26. 9
      code/VideoAccess-VCMP/web/client/src/sections/openness/routes.js
  27. 27
      code/VideoAccess-VCMP/web/client/src/sections/openness/style.less
  28. 1
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js
  29. 2
      code/VideoAccess-VCMP/web/package.json

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/addMainNodes.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/banner.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/close.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/down.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/find.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/folder.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nameChange.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 528 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeCamera.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeDel.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeEdit.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/nodeadd.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/save.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/toback.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 788 B

BIN
code/VideoAccess-VCMP/web/client/assets/images/imageImg/upload.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

945
code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@ -8,7 +8,7 @@ import { Button, ToastFactory, } from '@douyinfe/semi-ui';
import VideoHeader from './voiceHeader' import VideoHeader from './voiceHeader'
import VideoOperation from './videoOperation' import VideoOperation from './videoOperation'
import './videoPlay.less'; import './videoPlay.less';
import EZUIKit from 'ezuikit-js' import EZUIKit, { log } from 'ezuikit-js'
import { done } from "nprogress"; import { done } from "nprogress";
const timeFormat = 'YYYY-MM-DD HH:mm:ss' const timeFormat = 'YYYY-MM-DD HH:mm:ss'
@ -18,492 +18,493 @@ const yingshiOpenSoundKey = 'openSound'
const VideoPlay = ({ const VideoPlay = ({
height, width, containerId = 'myPlayer', height, width, containerId = 'myPlayer',
// playUrl, // playUrl,
name, name,
global, global,
videoStyle, videoStyle,
changeData, changeData,
videoObj, videoObj,
sizeWh, sizeWh,
slideDown, // slideDown, //
IsSize, //16:9 IsSize, //16:9
// videoObj = { // videoObj = {
// type: 'yingshi', // type: 'yingshi',
// audio: false, // audio: false,
// serialNo: 'G75922040', // // serialNo: 'G75922040', //
// channelNo: 1, // // channelNo: 1, //
// yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // // yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', //
// playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', // // playUrlSd: 'ezopen://open.ys7.com/G75922040/1.live', //
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', // // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003',
// playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
// replayUrl: 'ezopen://open.ys7.com/G75922040/1.hd.local.rec', // replayUrl: 'ezopen://open.ys7.com/G75922040/1.hd.local.rec',
// }, // },
// videoObj = { // videoObj = {
// type: 'yingshi', // type: 'yingshi',
// audio: false, // audio: false,
// serialNo: 'G56385051', // // serialNo: 'G56385051', //
// channelNo: 1, // // channelNo: 1, //
// yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', // // yingshiToken: 'at.6nn6duwz8g8gbd919as9a6ea82bmn31x-709fnp7s3k-13q3v7e-mlov7lysf', //
// playUrlSd: 'ezopen://open.ys7.com/G56384814/1.live', // // playUrlSd: 'ezopen://open.ys7.com/G56384814/1.live', //
// // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003', // // playUrl: 'ws://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000003',
// playUrlHd: 'ezopen://open.ys7.com/G56384814/1.hd.live', // playUrlHd: 'ezopen://open.ys7.com/G56384814/1.hd.live',
// replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec', // replayUrl: 'ezopen://open.ys7.com/G56384814/1.hd.local.rec',
// }, // },
// videoObj = { // videoObj = {
// type: 'cascade', // type: 'cascade',
// audio: false, // audio: false,
// serialNo: '34020000001310000001', // // serialNo: '34020000001310000001', //
// topSerialNo: '34020000001110000077', // // topSerialNo: '34020000001110000077', //
// playUrlSd: 'http://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', // // playUrlSd: 'http://221.230.55.27:8081/jessica/34020000001110000077/34020000001310000001', //
// // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live', // // playUrlHd: 'ezopen://open.ys7.com/G75922040/1.hd.live',
// // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec', // // replayUrl: 'ezopen://open.ys7.com/G75922040/1.rec',
// }, // },
// //
iotVideoServer, iotVideoServer,
local, // local, //
}) => { }) => {
console.log(videoObj); // console.log(sizeWh,videoObj);
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
videoObj = { videoObj = {
...videoObj, ...videoObj,
playUrlSd: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.live`, playUrlSd: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.live`,
playUrlHd: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.hd.live`, playUrlHd: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.hd.live`,
replayUrl: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.hd.local.rec`, replayUrl: `ezopen://open.ys7.com/${videoObj.serialNo}/${videoObj.channelNo || '1'}.hd.local.rec`,
} }
} }
const [jessibuca, setjessibuca] = useState(null) const [jessibuca, setjessibuca] = useState(null)
const [player, setPlayer] = useState(null) const [player, setPlayer] = useState(null)
const [isPlaying, setIsPlaying] = useState(false) const [isPlaying, setIsPlaying] = useState(false)
const [operationState, setoperationState] = useState() const [operationState, setoperationState] = useState()
const [voiceDisY, setVoiceDisY] = useState(0) const [voiceDisY, setVoiceDisY] = useState(0)
const [processDisX, setProcessDisX] = useState(0) const [processDisX, setProcessDisX] = useState(0)
const [isAdjustProcess, setIsAdjustProcess] = useState(false) const [isAdjustProcess, setIsAdjustProcess] = useState(false)
const [histroyTime, setHistroyTime] = useState([]) const [histroyTime, setHistroyTime] = useState([])
const [histroyBegain, setHistroyBegain] = useState() const [histroyBegain, setHistroyBegain] = useState()
const [roll, setRoll] = useState()// const [roll, setRoll] = useState()//
const [photo, setPhoto] = useState(1)// const [photo, setPhoto] = useState(1)//
const [size, setSize] = useState({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) // const [size, setSize] = useState({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) //
const [resolution, setResolution] = useState('sd') // sd hd const [resolution, setResolution] = useState('sd') // sd hd
const [videoMask, setVideoMask] = useState(true) // sd hd const [videoMask, setVideoMask] = useState(true) // sd hd
// ifream // ifream
const [yingshiPrepare, setYingshiPrepare] = useState('') const [yingshiPrepare, setYingshiPrepare] = useState('')
const operationRef = useRef(null) const operationRef = useRef(null)
const Begain = useRef() const Begain = useRef()
const playBackTime = useRef([]) const playBackTime = useRef([])
const quanp = useRef() const quanp = useRef()
const processChangeTimeoutRef = useRef(null) const processChangeTimeoutRef = useRef(null)
// ifream // ifream
const yingshiPrepareRef = useRef(null) const yingshiPrepareRef = useRef(null)
const playState = useRef(false) // const playState = useRef(false) //
const player_ = useRef(null) const player_ = useRef(null)
useEffect(() => { useEffect(() => {
setRoll(false) setRoll(false)
}, [resolution]); }, [resolution]);
useEffect(() => { useEffect(() => {
setResolution(changeData?.hdChecked ? 'hd' : 'sd') setResolution(changeData?.hdChecked ? 'hd' : 'sd')
if (player) { if (player) {
player.stop().then(() => { player.stop().then(() => {
player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd }) player.play({ url: changeData?.hdChecked ? videoObj.playUrlHd : videoObj.playUrlSd })
}) })
} }
}, [changeData?.hdChecked]) }, [changeData?.hdChecked])
const changeSelectState = (key) => { const changeSelectState = (key) => {
// if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) { // if (videoObj.type == 'yingshi' && yingshiPrepareRef.current) {
// return // return
// } // }
const nextOperationState = JSON.parse(JSON.stringify(operationRef.current)) const nextOperationState = JSON.parse(JSON.stringify(operationRef.current))
if (key == 'histroy' && nextOperationState.histroy.select) { if (key == 'histroy' && nextOperationState.histroy.select) {
// //
setProcessDisX(0) setProcessDisX(0)
setHistroyTime([]) setHistroyTime([])
playBackTime.current = [] playBackTime.current = []
} }
for (let k in nextOperationState) { for (let k in nextOperationState) {
if (k == key) { if (k == key) {
nextOperationState[k].select = !nextOperationState[k].select nextOperationState[k].select = !nextOperationState[k].select
} else if (k !== 'fullScreen') { } else if (k !== 'fullScreen') {
nextOperationState[k].select = false nextOperationState[k].select = false
}
}
operationRef.current = nextOperationState
if (operationRef.current.histroy.select && histroyTime.length == 0) {
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
playBackTime.current = [moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]
}
setoperationState(nextOperationState)
}
//
const operation = [{
key: 'control',
click: () => {
changeSelectState('control')
}
}, {
key: 'talk',
hide: !(videoObj.type == 'yingshi'),
click: (e) => {
console.log(e);
changeSelectState('talk')
}
}, {
key: 'fullScreen',
click: () => {
changeSelectState('fullScreen')
let videoplay = document.getElementById('vcmp_videoplay')
if (screenfull.isEnabled) {
screenfull.toggle(videoplay);
if (videoObj?.type == 'yingshi' && player) {
if (operationRef.current?.fullScreen.select) {
console.log(5515);
player.reSize(screen.width, screen.height);
} else {
console.log(5515);
player.reSize(size?.width, size?.height);
}
} }
}
operationRef.current = nextOperationState
if (operationRef.current.histroy.select && histroyTime.length == 0) {
setHistroyTime([moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)])
playBackTime.current = [moment().subtract(72, 'hours').format(timeFormat), moment().format(timeFormat)]
}
setoperationState(nextOperationState)
}
//
const operation = [{
key: 'control',
click: () => {
changeSelectState('control')
}
}, {
key: 'talk',
hide: !(videoObj.type == 'yingshi'),
click: (e) => {
console.log(e);
changeSelectState('talk')
}
}, {
key: 'fullScreen',
click: () => {
changeSelectState('fullScreen')
let videoplay = document.getElementById('vcmp_videoplay')
if (screenfull.isEnabled) {
screenfull.toggle(videoplay);
if (videoObj?.type == 'yingshi') {
console.log(operationRef.current);
if (operationRef.current?.fullScreen.select) {
player.reSize(screen.width, screen.height);
} else {
player.reSize(size?.width, size?.height);
}
}
}
}
}, {
key: 'histroy',
hide: !Boolean(videoObj.replayUrl),
click: () => {
changeSelectState('histroy')
player.stop().then(() => {
if (operationRef.current?.histroy?.select && Begain.current) {
player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
}
playState.current = false
})
}
},]
// useEffect(() => {
// createPlay()
// }, [quanp.current])
useEffect(() => {
createPlay()
let nextOperationState = {}
for (let p of operation) {
nextOperationState[p.key] = {
select: false
}
}
setoperationState(nextOperationState)
operationRef.current = nextOperationState
//
screenfull.on('change', () => {
if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
}
if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
}
});
// const resize_ = () => {
// const VideoLocal = document.getElementById('vcmp_videoplay')
// setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight })
// }
// if (local) {
// window.addEventListener('resize', resize_); //
// }
return () => {
console.log(854453453);
if (jessibuca) {
jessibuca.destroy()
}
if (player && videoObj.type == 'yingshi') {
console.log(854453453);
player.stop()
}
// if (local) {
// window.removeEventListener('resize', resize_);
// }
}
}, [])
useEffect(() => {
if (histroyTime.length) {
setHistroyBegain(histroyTime[0])
Begain.current = histroyTime[0]
document.getElementById('process_point').style.left = 0 + 'px'; //
if (videoObj.type == 'yingshi') {
// yingshiPrepareRef.current = 'play'
// setYingshiPrepare('play')
}
} else {
setHistroyBegain(null)
Begain.current == null
}
}, [histroyTime])
useEffect(() => {
if (operationState && operationState.histroy.select) {
if (isAdjustProcess) {
//
if (processChangeTimeoutRef.current) {
clearTimeout(processChangeTimeoutRef.current)
} }
} processChangeTimeoutRef.current = setTimeout(() => {
}, { setHistroyBegain(
key: 'histroy', moment(histroyTime[0])
hide: !Boolean(videoObj.replayUrl), .add(
click: () => { Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth),
changeSelectState('histroy') 'second'
)
.format(timeFormat)
)
Begain.current = moment(histroyTime[0])
.add(
Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth),
'second'
)
.format(timeFormat)
if (videoObj.type == 'yingshi') {
// yingshiPrepareRef.current = 'play'
// setYingshiPrepare('play')
}
}, 300)
player.stop().then(() => { player.stop().then(() => {
if (operationRef.current?.histroy?.select && Begain.current) { player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` }) playState.current = false
}
playState.current = false
}) })
} } else {
},] //
document.getElementById('process_point').style.left = processDisX - 4.5 + 'px'
// useEffect(() => { }
// createPlay() }
// }, [quanp.current]) }, [processDisX])
useEffect(() => { const createPlay = async () => {
createPlay() if (videoObj.type != 'yingshi') {
let nextOperationState = {} try {
for (let p of operation) { // const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
nextOperationState[p.key] = { // id: '36011200002002021114',
select: false // channel: '36011200581314002900'
} // }).then(res => {
} // console.log(res);
setoperationState(nextOperationState) // }, err => {.
operationRef.current = nextOperationState // console.log(err);
// })
// console.log(videoObj);
screenfull.on('change', () => { const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) { } catch (error) {
changeSelectState('fullScreen') console.log(error.response);
} }
if (!screenfull.isFullscreen && operationRef.current && operationRef.current['fullScreen'].select) {
changeSelectState('fullScreen')
} let $container = document.getElementById(containerId);
}); const jessibuca = new window.Jessibuca({
// const resize_ = () => { container: $container,
// const VideoLocal = document.getElementById('vcmp_videoplay') videoBuffer: 0.2, //
// setSize({ parentWidth: VideoLocal?.clientWidth, parentHeight: VideoLocal?.clientHeight, width: VideoLocal?.clientWidth, height: VideoLocal?.clientHeight }) isResize: false,
text: "",
// } loadingText: "加载中",
// if (local) { debug: true,
// window.addEventListener('resize', resize_); // showBandwidth: false, //
// } operateBtns: {
return () => { fullscreen: true,
if (jessibuca) { screenshot: false,
jessibuca.destroy() play: false,
} audio: false,
if (player && videoObj.type == 'yingshi' && player) { },
console.log(11111111111); forceNoOffscreen: false,
player.stop() isNotMute: false,
} });
// if (local) { setjessibuca(jessibuca)
// window.removeEventListener('resize', resize_); play({ jessibuca })
// } } else {
} const player = new EZUIKit.EZUIKitPlayer({
}, []) id: containerId, // ID
accessToken: videoObj?.yingshiToken,
useEffect(() => { url: videoObj.playUrlSd,
if (histroyTime.length) { width: setupSize('width'),
setHistroyBegain(histroyTime[0]) height: setupSize('height'),
Begain.current = histroyTime[0] handleSuccess: () => { //
document.getElementById('process_point').style.left = 0 + 'px'; // setRoll(true)
if (videoObj.type == 'yingshi') { setVideoMask(false)
// yingshiPrepareRef.current = 'play' playState.current = true
// setYingshiPrepare('play') },
} handleError: (e) => { //
} else { console.log(e, '播放失败');
setHistroyBegain(null) },
Begain.current == null })
} setPlayer(player)
}, [histroyTime]) }
useEffect(() => { }
if (operationState && operationState.histroy.select) {
if (isAdjustProcess) { const play = (params) => {
// if (videoObj.type == 'yingshi') {
if (processChangeTimeoutRef.current) {
clearTimeout(processChangeTimeoutRef.current) } else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) {
} const jes = params.jessibuca || jessibuca
processChangeTimeoutRef.current = setTimeout(() => { jes.play(videoObj.playUrlSd);
setHistroyBegain( setIsPlaying(true)
moment(histroyTime[0]) }
.add( }
Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth),
'second' const pause = () => {
) if (videoObj.type == 'yingshi' && player) {
.format(timeFormat) 5
) } else if (jessibuca) {
Begain.current = moment(histroyTime[0]) jessibuca.pause();
.add( setIsPlaying(false)
Math.abs(moment(histroyTime[0]).diff(moment(histroyTime[1]), 'seconds')) * (processDisX / document.getElementById('process_point').parentElement.offsetWidth), }
'second' }
)
.format(timeFormat) const closeSound = () => {
if (videoObj.type == 'yingshi') { if (videoObj.type == 'yingshi') {
// yingshiPrepareRef.current = 'play' yingshiPrepareRef.current = yingshiCloseSoundKey
// setYingshiPrepare('play') setYingshiPrepare(yingshiCloseSoundKey)
} // yingshiOperation(yingshiCloseSoundKey)
}, 300) }
player.stop().then(() => { }
player.play({ url: `${videoObj.replayUrl}?begin=${moment(Begain.current).format("YYYYMMDDHHmmss")}&end=${moment(playBackTime.current[1]).format("YYYYMMDDHHmmss")}` })
playState.current = false const openSound = () => {
}) if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiOpenSoundKey
setYingshiPrepare(yingshiOpenSoundKey)
// yingshiOperation(yingshiOpenSoundKey)
}
}
const setupSize = (data) => {
if (!operationRef.current?.fullScreen.select) {
let containerWidth = sizeWh?.parentWidth //
let containerHeight = sizeWh?.parentHeight
let videoWidth = width || sizeWh?.width
let videoHeight = height || sizeWh?.height
if (IsSize == 'true') {
if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) {
} else {
console.warn('宽高不符合尺寸要求,故返回合适的尺寸')
if (videoWidth / 16 > videoHeight / 9) {
videoWidth = (videoHeight / 9) * 16
} else {
videoHeight = (videoWidth / 16) * 9
}
}
} else { } else {
// console.warn('传递宽高参数有误,请确认容器大小范围内')
document.getElementById('process_point').style.left = processDisX - 4.5 + 'px' if (containerWidth / 16 > containerHeight / 9) {
} videoWidth = (containerHeight / 9) * 16
} } else {
}, [processDisX]) videoHeight = (containerWidth / 16) * 9
}
const createPlay = async () => {
if (videoObj.type != 'yingshi') {
try {
// const inviteRes = await IotVideoServerRequest.get(VideoServeApi.invite, {
// id: '36011200002002021114',
// channel: '36011200581314002900'
// }).then(res => {
// console.log(res);
// }, err => {.
// console.log(err);
// })
console.log(videoObj);
const inviteRes_ = await request.get(`${iotVideoServer}/api/gb28181/invite?id=${videoObj.topSerialNo}&channel=${videoObj.serialNo}`)
} catch (error) {
console.log(error.response);
} }
if (videoObj.type == 'yingshi' && player) {
let $container = document.getElementById(containerId); player.reSize(videoWidth, videoHeight)
const jessibuca = new window.Jessibuca({
container: $container,
videoBuffer: 0.2, //
isResize: false,
text: "",
loadingText: "加载中",
debug: true,
showBandwidth: false, //
operateBtns: {
fullscreen: true,
screenshot: false,
play: false,
audio: false,
},
forceNoOffscreen: false,
isNotMute: false,
});
setjessibuca(jessibuca)
play({ jessibuca })
} else {
const player = new EZUIKit.EZUIKitPlayer({
id: containerId, // ID
accessToken: videoObj?.yingshiToken,
url: videoObj.playUrlSd,
width: setupSize('width'),
height: setupSize('height'),
handleSuccess: () => { //
setRoll(true)
setVideoMask(false)
playState.current = true
},
handleError: (e) => { //
console.log(e, '播放失败');
},
})
setPlayer(player)
player_.current = player
}
}
const play = (params) => {
if (videoObj.type == 'yingshi') {
} else if ((params.jessibuca || jessibuca) && videoObj.playUrlSd) {
const jes = params.jessibuca || jessibuca
jes.play(videoObj.playUrlSd);
setIsPlaying(true)
}
}
const pause = () => {
if (videoObj.type == 'yingshi' && player) {
5
} else if (jessibuca) {
jessibuca.pause();
setIsPlaying(false)
}
}
const closeSound = () => {
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiCloseSoundKey
setYingshiPrepare(yingshiCloseSoundKey)
// yingshiOperation(yingshiCloseSoundKey)
}
}
const openSound = () => {
if (videoObj.type == 'yingshi') {
yingshiPrepareRef.current = yingshiOpenSoundKey
setYingshiPrepare(yingshiOpenSoundKey)
// yingshiOperation(yingshiOpenSoundKey)
}
}
const setupSize = (data) => {
if (!operationRef.current?.fullScreen.select) {
let containerWidth = sizeWh?.parentWidth //
let containerHeight = sizeWh?.parentHeight
let videoWidth = width || sizeWh?.width
let videoHeight = height || sizeWh?.height
if (IsSize == 'true') {
if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) {
} else {
console.warn('宽高不符合尺寸要求,故返回合适的尺寸')
if (videoWidth / 16 > videoHeight / 9) {
videoWidth = (videoHeight / 9) * 16
} else {
videoHeight = (videoWidth / 16) * 9
}
}
} else {
console.warn('传递宽高参数有误,请确认容器大小范围内')
if (containerWidth / 16 > containerHeight / 9) {
videoWidth = (containerHeight / 9) * 16
} else {
videoHeight = (containerWidth / 16) * 9
}
}
if (videoObj.type == 'yingshi' && player) {
player.reSize(videoWidth, videoHeight)
}
} else {
if (videoObj.type == 'yingshi' && player) {
player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
}
} }
setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight }) } else {
return data == 'width' ? videoWidth : data == 'height' ? videoHeight : '' if (videoObj.type == 'yingshi' && player?.pluginStatus) {
} player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
} }
}
useEffect(() => { setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight })
setupSize() return data == 'width' ? videoWidth : data == 'height' ? videoHeight : ''
}, [sizeWh]) }
}
return ( useEffect(() => {
<> setupSize()
<div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}> }, [sizeWh])
<div id="vcmp_videoplay" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
{/* 顶部信息 */} return (
<VideoHeader <>
operationState={operationState} changeSelectState={changeSelectState} <div className="vcmp_videoplay" style={{ width: size?.parentWidth || '100%', height: size?.parentHeight || '100%', backgroundColor: 'black', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
histroyTime={histroyTime} <div id="vcmp_videoplay" style={{ position: 'relative', height: size?.height || '100%', width: size?.width || '100%', minWidth: 240, minHeight: 135, overflow: 'hidden' }}>
setoperationState={setoperationState} name={name} {/* 顶部信息 */}
roll={roll} <VideoHeader
videoObj={videoObj} operationState={operationState} changeSelectState={changeSelectState}
showTime={histroyBegain || moment()} histroyTime={histroyTime}
setProcessDisX={setProcessDisX} setoperationState={setoperationState} name={name}
content={videoObj.content} roll={roll}
videoStyle={videoStyle} videoObj={videoObj}
player={player} showTime={histroyBegain || moment()}
resolution={resolution} setProcessDisX={setProcessDisX}
playState={playState.current} content={videoObj.content}
/> videoStyle={videoStyle}
{/* 视频内容 */} player={player}
{ resolution={resolution}
// <iframe playState={playState.current}
// frameBorder="0" />
// allowFullScreen='true' {/* 视频内容 */}
// id={containerId} {
// src={ // <iframe
// `${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}` // frameBorder="0"
// } // allowFullScreen='true'
// // https://open.ys7.com/doc/zh/book/index/live_proto.html // id={containerId}
// // {width: 400px;height: 300px;} // src={
// width={'100%'} // `${yingshiUrl}?audio=${videoObj.audio && operationState && !operationState.histroy.select ? '1' : '0'}&url=${operationState && operationState.histroy.select && histroyBegain ? `${videoObj.replayUrl}?begin=${moment(histroyBegain).format("YYYYMMDDHHmmss")}&end=${moment(histroyTime[1]).format("YYYYMMDDHHmmss")}` : resolution == 'sd' ? videoObj.playUrlSd : videoObj.playUrlHd}&autoplay=${'1'}&accessToken=${videoObj.yingshiToken}`
// height={'100%'} // }
// wmode="transparent" // // https://open.ys7.com/doc/zh/book/index/live_proto.html
// style={{ pointerEvents: 'none' }} // // {width: 400px;height: 300px;}
// /> // width={'100%'}
} // height={'100%'}
<div id={containerId} style={{ height: '100%', width: '100%', }}></div> // wmode="transparent"
{videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'rgba(255,255,255,0.65)' }}></div> : ''} // style={{ pointerEvents: 'none' }}
// />
{/* 下方操作栏 */} }
{/* 显示操作功能条件(宽高) */} <div id={containerId} style={{ height: '100%', width: '100%', }}></div>
{size?.parentWidth > 320 ? {videoMask ? <div style={{ height: size?.height || '100%', width: size?.width || '100%', minWidth: 400, minHeight: 225, overflow: 'hidden', position: 'absolute', top: '0', left: '0', zIndex: 99, backgroundColor: 'rgba(255,255,255,0.65)' }}></div> : ''}
<VideoOperation
operationState={operationState} operation={operation} {/* 下方操作栏 */}
voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY} {/* 显示操作功能条件(宽高) */}
processDisX={processDisX} setProcessDisX={setProcessDisX} {size?.parentWidth > 320 ?
isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess} <VideoOperation
resolution={resolution} setResolution={setResolution} operationState={operationState} operation={operation}
histroyTime={histroyTime} setHistroyTime={setHistroyTime} voiceDisY={voiceDisY} setVoiceDisY={setVoiceDisY}
histroyBegain={histroyBegain} processDisX={processDisX} setProcessDisX={setProcessDisX}
play={play} pause={pause} closeSound={closeSound} openSound={openSound} isAdjustProcess={isAdjustProcess} setIsAdjustProcess={setIsAdjustProcess}
isPlaying={isPlaying} resolution={resolution} setResolution={setResolution}
videoObj={videoObj} histroyTime={histroyTime} setHistroyTime={setHistroyTime}
setYingshiPrepare={setYingshiPrepare} histroyBegain={histroyBegain}
yingshiPrepareRef={yingshiPrepareRef} play={play} pause={pause} closeSound={closeSound} openSound={openSound}
slideDown={slideDown} isPlaying={isPlaying}
setPlayer={setPlayer} videoObj={videoObj}
player={player} setYingshiPrepare={setYingshiPrepare}
playState={playState.current} yingshiPrepareRef={yingshiPrepareRef}
/> : "" slideDown={slideDown}
} setPlayer={setPlayer}
</div> player={player}
playState={playState.current}
/> : ""
}
</div> </div>
</>
) </div>
</>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,
iotVideoServer: global.iotVideoServer, iotVideoServer: global.iotVideoServer,
}; };
} }
export default connect(mapStateToProps)(VideoPlay); export default connect(mapStateToProps)(VideoPlay);

8
code/VideoAccess-VCMP/web/client/src/sections/journaling/containers/journalingCenter.jsx

@ -1,7 +1,7 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Coming } from '$components' import { Coming } from '$components'
import VideoScreen from '../components/videoScreen'
import '../style.less' import '../style.less'
@ -9,10 +9,8 @@ import '../style.less'
const JournalingCenter = (props) => { const JournalingCenter = (props) => {
return ( return (
// <Coming /> <Coming />
<>
<VideoScreen />
</>
) )
} }

4
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/index.js

@ -1,5 +1,7 @@
'use strict'; 'use strict';
export default { import * as mirroring from './mirroring'
export default {
...mirroring
} }

16
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js

@ -0,0 +1,16 @@
"use strict";
import { ApiTable,basicAction } from "$utils";
export function getCamera(query) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_CAMREA",
query: query,
url: `${ApiTable.getCamera}`,
msg: { option: "获取摄像头列表信息" },
reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } },
});
}

27
code/VideoAccess-VCMP/web/client/src/sections/journaling/components/container.jsx → code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@ -8,6 +8,7 @@ import { useState } from 'react';
const Container = ({ videoObj, pageSize }) => { const Container = ({ videoObj, pageSize }) => {
const [videoWidth, setVideoWidth] = useState() const [videoWidth, setVideoWidth] = useState()
const [videoHeight, setVideoHeight] = useState() const [videoHeight, setVideoHeight] = useState()
// console.log(videoObj);
useEffect(() => { useEffect(() => {
const resize_ = () => { const resize_ = () => {
@ -25,19 +26,21 @@ const Container = ({ videoObj, pageSize }) => {
setVideoWidth(document.getElementById('videoo').clientWidth) setVideoWidth(document.getElementById('videoo').clientWidth)
setVideoHeight(document.getElementById('videoo').clientHeight) setVideoHeight(document.getElementById('videoo').clientHeight)
}, [pageSize]) }, [pageSize])
console.log(videoWidth, videoHeight); // console.log(videoWidth, videoHeight);
return ( return (
<div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}> <div style={{ width: videoWidth || '100%', height: videoHeight || '100%', padding: 5 }}>
<VideoPlay sizeWh={{ {videoWidth && videoHeight ?
width: videoWidth - 10, <VideoPlay sizeWh={{
height: videoHeight - 10, width: videoWidth - 10,
parentWidth: videoWidth - 10, height: videoHeight - 40,
parentHeight: videoHeight - 10, parentWidth: videoWidth - 10,
}} parentHeight: videoHeight - 40,
videoObj={videoObj} }}
videoStyle='true' videoObj={videoObj.videoData}
containerId={videoObj.name} videoStyle='true'
local={true} /> containerId={videoObj.label}
local={true} /> : ""}
<div style={{lineHeight:'30px',paddingLeft:6}}>{videoObj?.label}</div>
</div> </div>
) )
} }

5
code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoCard.jsx → code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoCard.jsx

@ -7,9 +7,6 @@ import Container from "./container";
const VideoCard = ({ data, pageSize }) => { const VideoCard = ({ data, pageSize }) => {
let span = 8 let span = 8
let rowsCount = 2 let rowsCount = 2
if (pageSize === 1) { if (pageSize === 1) {
@ -29,7 +26,7 @@ const VideoCard = ({ data, pageSize }) => {
rowsCount = 3 rowsCount = 3
} }
let cheight = Math.floor(100 / rowsCount) + "%" let cheight = Math.floor(100 / rowsCount) + "%"
console.log(pageSize,span,cheight);
return ( return (
<> <>
<Col id="videoo" span={span} style={{ height: cheight, }}> <Col id="videoo" span={span} style={{ height: cheight, }}>

253
code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx → code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

@ -1,102 +1,104 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui'; import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Pagination, Checkbox } from '@douyinfe/semi-ui';
import './videoScreen.less' import './videoScreen.less'
import VideoCard from './videoCard' import VideoCard from './videoCard'
const VideoScreen = (props) => { const VideoScreen = (props) => {
const treeData = [{ const treeData = [
label: '公司', {
value: '公司', label: '公司',
key: '0-1', value: '公司',
children: [ key: '0-1',
{ children: [
label: '大门', {
value: '大门', label: '大门',
key: '0-1-1', value: '大门',
videoData: { key: '0-1-1',
channelNo: 1, videoData: {
content: ['5442542542', '452345', '234524525'], channelNo: 1,
serialNo: "F61504020", content: ['5442542542', '452345', '234524525'],
type: "yingshi", serialNo: "F61504020",
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" type: "yingshi",
} yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
}, { }
label: '机房', }, {
value: '机房', label: '机房',
key: '0-1-2', value: '机房',
videoData: { key: '0-1-2',
channelNo: 3, videoData: {
content: ['5442542542', '452345', '234524525'], channelNo: 3,
serialNo: "F61504020", content: ['5442542542', '452345', '234524525'],
type: "yingshi", serialNo: "F61504020",
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" type: "yingshi",
} yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
}, { }
label: '后门', }, {
value: '后门', label: '后门',
key: '0-1-3', value: '后门',
videoData: { key: '0-1-3',
channelNo: 1, videoData: {
content: ['5442542542', '452345', '234524525'], channelNo: 2,
serialNo: "F61504020", content: ['5442542542', '452345', '234524525'],
type: "yingshi", serialNo: "F61504020",
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva" type: "yingshi",
} yingshiToken: "at.6vznnc23bv51vzjt7lnkj7e19bb2z61f-3gnj7m5lxp-10666cy-bgwcjkekk"
}, }
] },
}, { ]
label: '外部', },
value: '外部', {
key: '0-2', label: '外部',
children: [ value: '外部',
{ key: '0-2',
label: '水库', children: [
value: '水库', {
key: '0-2-1', label: '水库',
children: [ value: '水库',
{ key: '0-2-1',
label: '房子', children: [
value: '房子', {
key: '0-2-1-1', label: '房子',
videoData: { value: '房子',
channelNo: 1, key: '0-2-1-1',
content: ['5442542542', '452345', '234524525'], videoData: {
serialNo: "F61504020", channelNo: null,
type: "yingshi", content: ['5442542542', '452345', '234524525'],
yingshiToken: "at.7pl4c5orb9fpndtlbjpsn5m11szujnf7-1laxxre0ob-010o8fw-kqeuwthva", serialNo: "G56384764",
} type: "yingshi",
}, yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z",
] }
}, },
] ]
}, { },
label: '外', ]
value: '外', }, {
key: '0-3', label: '外',
children: [ value: '外',
{ key: '0-3',
label: '库', children: [
value: '库', {
key: '0-3-1', label: '库',
children: [ value: '库',
{ key: '0-3-1',
label: '子', children: [
value: '子', {
key: '0-3-1-1', label: '子',
}, value: '子',
] key: '0-3-1-1',
}, },
] ]
}] },
]
}]
const [pageSize, setPageSize] = useState(4) // const [pageSize, setPageSize] = useState(4) //
const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) // const [queryData, setQueryData] = useState([{ label: '全部', value: '全部', key: '0' }]) //
const [leftTree, setLefTtree] = useState([{ label: '全部', value: '全部', key: '0', children: treeData}]) // const [leftTree, setLefTtree] = useState(treeData) //
const [playData, setPlayData] = useState([]) // const [playData, setPlayData] = useState([]) //
const [queryValue, setQueryValue] = useState(['全部']) // const [queryValue, setQueryValue] = useState(['全部']) //
const [leftValue, setLeftValue] = useState() // const [leftValue, setLeftValue] = useState(treeData.map(v => v.value)) //
const api = useRef(); const api = useRef();
@ -106,27 +108,52 @@ const VideoScreen = (props) => {
query.push({ label: v.label, value: v.value, key: v.key }) query.push({ label: v.label, value: v.value, key: v.key })
]) ])
setQueryData([{ label: '全部', value: '全部', key: '0', children: query }]) setQueryData([{ label: '全部', value: '全部', key: '0', children: query }])
let playVideo = []
const playVideoData = (data) => {
// console.log(data);
data.map(v => {
if (v.videoData) playVideo.push(v)
if (v.children) playVideoData(v.children)
})
}
playVideoData(treeData)
setPlayData(playVideo)
// console.log(playVideo);
}, []) }, [])
useEffect(() => { useEffect(() => {
if (treeData && queryValue.includes('全部')) { if (treeData && queryValue.includes('全部')) {
setLefTtree(treeData) setLefTtree(treeData)
} else { } else {
let leftData = [] let leftData = []
queryValue.map(item => leftData.push(treeData?.find(({ value }) => item == value))) // queryValue.map(item => {
setLefTtree([{ label: '全部', value: '全部', key: '0', children: leftData }]) leftData.push(treeData?.find(({ value }) => item == value))
}) //
console.log(leftData);
setLefTtree(leftData)
let playVideo = []
const playVideoData = (data) => {
// console.log(data);
data.map(v => {
if (v.videoData) playVideo.push(v)
if (v.children) playVideoData(v.children)
})
}
playVideoData(leftData)
setPlayData(playVideo)
} }
}, [queryData, queryValue]) }, [queryData, queryValue, leftValue])
useEffect(() => { useEffect(() => {
setLeftValue()
}, []) }, [])
// //
const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", }; const screen = { width: 193, marginRight: 20, marginBottom: 16, color: "#fff", };
@ -162,7 +189,7 @@ const VideoScreen = (props) => {
background: 'url(/assets/images/application/background.png) 100% 100%', background: 'url(/assets/images/application/background.png) 100% 100%',
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
color: '#FFFFFF', color: '#FFFFFF',
position: 'absolute', minWidth: 1000, // minWidth: 1000,
}}> }}>
{/* 头部标题 */} {/* 头部标题 */}
<div style={{ <div style={{
@ -185,9 +212,9 @@ const VideoScreen = (props) => {
</div> </div>
<div style={{ <div style={{
height: "calc(100% - 112px)", margin: '16px', display: 'flex', height: "calc(100% - 116px)", margin: '16px', display: 'flex',
}}> }}>
<div style={{ width: 300, height: "100%", border: '2px solid #003D9E', }}> <div style={{ width: 300, height: "100%", border: '2px solid #003D9E', position: 'relative' }}>
<div>查询 <div>查询
<TreeSelect <TreeSelect
style={{ width: 150, }} style={{ width: 150, }}
@ -208,17 +235,18 @@ const VideoScreen = (props) => {
multiple multiple
treeData={leftTree} treeData={leftTree}
defaultExpandAll defaultExpandAll
defaultValue={['公司','外部']} value={leftValue}
blockNode={false} blockNode={false}
onChange={(e) => { onChange={(e) => {
console.log(e); console.log(e);
setLeftValue(e) setLeftValue(e)
}} }}
onSelect={(e)=>{ onSelect={(e) => {
console.log(e); console.log(e);
}} }}
style={{ width: 150, color: '#FFFFFF' }} style={{ width: 150, color: '#FFFFFF' }}
/> />
<Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例" style={{ position: 'absolute', right: 0, bottom: 60 }}>全选</Checkbox>
</div> </div>
<div style={{ <div style={{
flex: 1, marginLeft: '10px', border: '2px solid #003D9E', flex: 1, marginLeft: '10px', border: '2px solid #003D9E',
@ -292,15 +320,35 @@ const VideoScreen = (props) => {
</Button> */} </Button> */}
</div> </div>
</div> </div>
<div style={{ display: 'flex', height: `calc( 100% - 160px )` }}> <div style={{ display: 'flex', height: '100%' }}>
{/* 视频 */} {/* 视频 */}
<div style={{ flex: 1, height: '100%' }}> <div style={{ flex: 1, height: '100%' }}>
<Row style={{ height: '100%' }}> <Row style={{ height: `calc( 100% - 160px )` }}>
{/* {data.map((v, index) => { {playData?.map((v, index) => {
console.log(v);
return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} /> return <VideoCard key={'VideoCard' + index} data={v} pageSize={pageSize} />
})} */} })}
</Row> </Row>
<div
style={{
display: "flex",
justifyContent: 'space-between',
padding: "10px",
}}
>
<span style={{ lineHeight: "30px" }}>
{10}个设备
</span>
<Pagination
total={100}
// currentPage={1}
style={{ color: 'white' }}
onChange={(currentPage, pageSize) => {
// setQuery({ limit: pageSize, page: currentPage - 1 });
// page.current = currentPage - 1
}}
/>
</div>
</div> </div>
{/* 视频设置 */} {/* 视频设置 */}
<div style={{ <div style={{
@ -313,7 +361,6 @@ const VideoScreen = (props) => {
return <div key={index}> return <div key={index}>
<Popover <Popover
position='left' position='left'
trigger='click'
content={() => { content={() => {
switch (v.value) { switch (v.value) {
case '宫格设置': case '宫格设置':

1
code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.less → code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.less

@ -1,6 +1,7 @@
.KJBlue { .KJBlue {
.semi-tree-option, .semi-tree-option,
.semi-icon, .semi-icon,
.semi-checkbox-addon, //全选文字
.semi-form-field-label-text { .semi-form-field-label-text {
color: #fff; color: #fff;
} }

3
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/index.js

@ -1,5 +1,6 @@
'use strict'; 'use strict';
import Mirroring from './mirroring'; import Mirroring from './mirroring';
import MirroringDetail from './mirroringDetail';
export { Mirroring}; export { Mirroring,MirroringDetail};

176
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx

@ -1,9 +1,10 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Coming } from '$components' import { push } from 'react-router-redux';
import '../style.less' import '../style.less'
const Mirroring = (props) => { const Mirroring = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props;
const detailList = useRef([ const detailList = useRef([
{ {
title: '科技蓝', title: '科技蓝',
@ -28,38 +29,41 @@ const Mirroring = (props) => {
title: '智慧小蓝视频融合中心实例实例实例实例', title: '智慧小蓝视频融合中心实例实例实例实例',
img: '/assets/images/imageImg/text.png', img: '/assets/images/imageImg/text.png',
color: 'blue', color: 'blue',
lastEditTime:'2022-12-22 16:00:57', lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57', lastReleaseTime: '2022-12-22 19:20:57',
typeId:'1511444S4545' typeId: '1511444S4545'
}, { }, {
title: '智慧小蓝视频融合', title: '智慧小蓝视频融合',
img: '/assets/images/imageImg/text.png', img: '/assets/images/imageImg/text.png',
color: 'blue', color: 'blue',
lastEditTime:'2022-12-22 16:00:57', lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57', lastReleaseTime: '2022-12-22 19:20:57',
typeId:'1511444S4545' typeId: '1511444S4545'
}, { }, {
title: '智慧小蓝视频融合小蓝视频融合', title: '智慧小蓝视频融合小蓝视频融合',
img: '/assets/images/imageImg/text.png', img: '/assets/images/imageImg/text.png',
color: 'blue', color: 'blue',
lastEditTime:'2022-12-22 16:00:57', lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57', lastReleaseTime: '2022-12-22 19:20:57',
typeId:'1511444S4545' typeId: '1511444S4545'
}, { }, {
title: '智慧小蓝视频融合小蓝视频融合是的阿三打阿三打', title: '智慧小蓝视频融合小蓝视频融合是的阿三打阿三打',
img: '/assets/images/imageImg/text.png', img: '/assets/images/imageImg/text.png',
color: 'blue', color: 'blue',
lastEditTime:'2022-12-22 16:00:57', lastEditTime: '2022-12-22 16:00:57',
lastReleaseTime:'2022-12-22 19:20:57', lastReleaseTime: '2022-12-22 19:20:57',
typeId:'1511444S4545' typeId: '1511444S4545'
}, },
]); ]);
const [maskNum, setMaskNum] = useState(100); const [maskNum, setMaskNum] = useState(1000);
function mouseOver (index) { function mouseOver (index) {
setMaskNum(index) setMaskNum(index)
} }
function mouseOut () { function mouseOut () {
setMaskNum(100) setMaskNum(1000)
}
function todetail(){
dispatch(push('/mirroring_detail'));
} }
return ( return (
<> <>
@ -75,7 +79,7 @@ const Mirroring = (props) => {
</div> </div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>选择样式模板</div> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>选择样式模板</div>
</div> </div>
<div style={{ width: '6.281%' }}> <div style={{ width: '6.281%' }}>
<img <img
@ -93,7 +97,7 @@ const Mirroring = (props) => {
</div> </div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>创建节点及设备树</div> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>创建节点及设备树</div>
</div> </div>
<div style={{ width: '6.281%' }}> <div style={{ width: '6.281%' }}>
<img <img
@ -111,7 +115,7 @@ const Mirroring = (props) => {
</div> </div>
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>发布成功后获取镜像服务ID</div> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>发布成功后获取镜像服务ID</div>
</div> </div>
<div style={{ width: '6.281%' }}> <div style={{ width: '6.281%' }}>
<img <img
@ -129,7 +133,7 @@ const Mirroring = (props) => {
</div> </div>
<div style={{ marginLeft: '0.854%', marginTop: 16 }}> <div style={{ marginLeft: '0.854%', marginTop: 16 }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>通过服务ID调用镜像服务</div> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>通过服务ID调用镜像服务</div>
<div style={{ marginTop: 3, fontSize: 12, color: '#1859C1', display: 'flex', alignItems: 'center' }}>API调用镜像服务方法 <div style={{ marginTop: 3, fontSize: 12, color: '#1859C1', display: 'flex', alignItems: 'center' }}>API调用镜像服务方法
<img <img
src="/assets/images/imageImg/question.png" src="/assets/images/imageImg/question.png"
@ -152,7 +156,7 @@ const Mirroring = (props) => {
alt="设置" alt="设置"
style={{ width: '306px', height: 142 }} style={{ width: '306px', height: 142 }}
/> />
{maskNum == index ? (<div onMouseOut={() => mouseOut()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> {maskNum == index ? (<div onMouseOut={() => mouseOut()} onClick={()=>todetail()} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}>
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
使用该模版 使用该模版
</div> </div>
@ -183,75 +187,74 @@ const Mirroring = (props) => {
</div> </div>
</div> </div>
<div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}> <div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
{myCustomList.current.map((item,index)=>{ {myCustomList.current.map((item, index) => {
return( return (
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }} key={index}>
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }}>
<img
src={item.img}
alt="设置"
style={{ width: 330, height: 153 }}
/>
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/release.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
发布
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/copy.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
复制
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img <img
src="/assets/images/imageImg/del.png" src={item.img}
alt="设置" alt="设置"
style={{ width: 16, height: 16 }} style={{ width: 330, height: 153 }}
/> />
<div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
{item.title}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/release.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
发布
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/copy.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
复制
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/del.png"
alt="设置"
style={{ width: 16, height: 16 }}
/>
</div>
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}>
删除
</div>
</div>
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
最后编辑于{item.lastEditTime}
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
最后发布于{item.lastReleaseTime}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/idCopy.png"
alt="设置"
style={{ width: 20, height: 20 }}
/>
</div>
<div style={{ marginLeft: 4, background: '#1859C1', padding: '2px 8px', color: '#FFFFFF', fontSize: 12, borderRadius: 2 }}>
ID:{item.typeId}
</div>
</div>
</div> </div>
<div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}>
删除
</div>
</div>
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
最后编辑于{item.lastEditTime}
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
最后发布于{item.lastReleaseTime}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src="/assets/images/imageImg/idCopy.png"
alt="设置"
style={{ width: 20, height: 20 }}
/>
</div>
<div style={{marginLeft:4,background:'#1859C1',padding:'2px 8px',color:'#FFFFFF',fontSize:12,borderRadius:2}}>
ID:{item.typeId}
</div>
</div>
</div>
) )
})} })}
</div> </div>
@ -261,9 +264,10 @@ const Mirroring = (props) => {
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth } = state; const { auth,global } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions,
}; };
} }

672
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx

@ -0,0 +1,672 @@
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import '../style.less'
import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxGroup } from "@douyinfe/semi-ui"
import VideoScreen from '../components/videoScreen';
const MirroringDetail = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props;
const { openness } = actions;
useEffect(() => {
}, []);
// const = useRef(0)
const [chooseNum, setChooseNum] = useState(0);//tab
const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
const [editKey, setEditKey] = useState('')
const [comingVisible, setComingVisible] = useState(false)
const [treeData, setTreeData] = useState([//
{
label: '主要节点1',
value: '0',
key: '0',
},
]);
const [indeterminate, setIndeterminate] = useState(false);//
const [checkAll, setCheckall] = useState(false);//
const [plainOptions, setPlainOptions] = useState([]);//
const [checkedList, setCheckedList] = useState([]);//
const [mykeyword, setMykeyword] = useState('');//
const [showCameraList, setShowCameraList] = useState([])//
const [addCamera, setAddCamera] = useState(false);//
const [addCameraKey, setAddCameraKey] = useState('');//
function onCheckAllChange (e) {//
if (e.target.checked) {
let mycheckList = []
for (let i = 0; i < showCameraList.length; i++) {
mycheckList.push(showCameraList[i].value)
}
setCheckedList(mycheckList)
}
else {
setCheckedList([])
}
setIndeterminate(false);
setCheckall(e.target.checked);
}
function equipmentGetCamera () {//
dispatch(openness.getCamera()).then((res) => {
let resList = res.payload.data.data
let optionsList = []
for (let i = 0; i < resList.length; i++) {
optionsList.push({
label: resList[i].name,
value: resList[i].id,
extra: 'DID:' + resList[i].gbCamera.did || '',
})
}
setShowCameraList(optionsList)
setPlainOptions(optionsList)
});
}
function onChange (checkedList) {//
setCheckedList(checkedList);
setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
setCheckall(checkedList.length === showCameraList.length);
}
useEffect(() => {
equipmentGetCamera();
}, []);
function nodeDelete (item) {//
let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = item.key.split('-')
if (nodeKeyArr.length == 1) {
mainData.splice(
mainData.indexOf(mainData.find(function (element) {
return element.key === item.key
})), 1)
} else if (nodeKeyArr.length == 2) {
for (let index = 0; index < mainData.length; index++) {
mainData[index].children.splice(
mainData[index].children.indexOf(mainData[index].children.find(function (element) {
return element.key === item.key
})), 1)
}
} else if (nodeKeyArr.length == 3) {
for (let j = 0; j < mainData.length; j++) {
for (let i = 0; i < mainData[j].children.length; i++) {
mainData[j].children[i].children.splice(
mainData[j].children[i].children.indexOf(mainData[j].children[i].children.find(function (element) {
return element.key === item.key
})), 1)
}
}
} else if (nodeKeyArr.length == 4) {
for (let k = 0; k < mainData.length; k++) {
for (let j = 0; j < mainData[k].children.length; j++) {
for (let i = 0; i < mainData[k].children[j].children.length; i++) {
mainData[k].children[j].children[i].children.splice(
mainData[k].children[j].children[i].children.indexOf(mainData[k].children[j].children[i].children.find(function (element) {
return element.key === item.key
})), 1)
}
}
}
}
setTreeData(mainData)
}
function nodeAdd (item) {//
let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = item.key.split('-')
if (nodeKeyArr.length == 1) {
for (let index = 0; index < mainData.length; index++) {
if (mainData[index].key == item.key) {
if (mainData[index].children && mainData[index].children.length > 0) {
let mainKey = mainData[index].children[mainData[index].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children.push({
label: '二级节点' + (Number(thekeyarr[1]) + 2),
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children = [{
label: '二级节点1',
value: (Number(thekeyarr[0])) + '-0',
key: (Number(thekeyarr[0])) + '-0',
}]
}
}
}
} else if (nodeKeyArr.length == 2) {
for (let index = 0; index < mainData.length; index++) {
if (mainData[index].children) {
for (let j = 0; j < mainData[index].children.length; j++) {
if (mainData[index].children[j].key == item.key) {
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children.push({
label: '三级节点' + (Number(thekeyarr[2]) + 2),
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
})
}
else {
let mainKey = mainData[index].children[j].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children = [{
label: '三级节点1',
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
}]
}
}
}
}
}
}
setTreeData(mainData)
}
function changeLable (value, item) {//
let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = item.key.split('-')
if (nodeKeyArr.length == 1) {
for (let index = 0; index < mainData.length; index++) {
if (mainData[index].key == item.key) {
mainData[index].label = value
}
}
} else if (nodeKeyArr.length == 2) {
for (let index = 0; index < mainData.length; index++) {
for (let j = 0; j < mainData[index].children.length; j++) {
if (mainData[index].children[j].key == item.key) {
mainData[index].children[j].label = value
}
}
}
} else if (nodeKeyArr.length == 3) {
for (let index = 0; index < mainData.length; index++) {
for (let j = 0; j < mainData[index].children.length; j++) {
for (let k = 0; k < mainData[index].children[j].children.length; k++) {
if (mainData[index].children[j].children[k].key == item.key) {
mainData[index].children[j].children[k].label = value
}
}
}
}
}
setTreeData(mainData)
}
function lableBlur () {
setEditKey('')
}
function cameraAdd (item) {//
let myplainOptions = JSON.parse(JSON.stringify(plainOptions))
for (let i = 0; i < myplainOptions.length; i++) {//
for (let j = 0; j < treeData.length; j++) {//
if (treeData[j].children) {//
for (let k = 0; k < treeData[j].children.length; k++) {//
if (treeData[j].children[k].children) {//
for (let l = 0; l < treeData[j].children[k].children.length; l++) {//
if (treeData[j].children[k].children[l].children) {//
for (let p = 0; p < treeData[j].children[k].children[l].children.length; p++) {
if (treeData[j].children[k].children[l].children[p].cameraId) {
if (myplainOptions[i].value == treeData[j].children[k].children[l].children[p].cameraId) {
myplainOptions.splice(i, 1)
}
}
}
}
else if (treeData[j].children[k].children[l].cameraId) {//
if (myplainOptions[i].value == treeData[j].children[k].children[l].cameraId) {
myplainOptions.splice(i, 1)
}
}
}
}
else if (treeData[j].children[k].cameraId) {//
if (myplainOptions[i].value == treeData[j].children[k].cameraId) {
myplainOptions.splice(i, 1)
}
}
}
}
}
}
console.log('myplainOptionsmyplainOptions', myplainOptions);
setCheckedList([])
setShowCameraList(myplainOptions)
setAddCamera(true)
setAddCameraKey(item.key)
}
const renderLabel = (label, item) => {//
let keyArr = item.key.split('-')
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{
keyArr.length == 1 ? (
<div style={{ display: 'flex' }}>
<div style={{ width: 13, height: 10 }}>
<img
src="/assets/images/imageImg/folder.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ marginLeft: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{
editKey == item.key ? (
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
) :
(
<Typography.Text
ellipsis={{ showTooltip: true }}
>
{label}
</Typography.Text>)
}
</div>
</div>
) : (
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{
editKey == item.key ? (
<Input value={label} onBlur={lableBlur} onChange={(value) => changeLable(value, item)} style={{ width: 65 }} className='inputpadding' size='small'></Input>
) :
(
<Typography.Text
ellipsis={{ showTooltip: true }}
>
{label}
</Typography.Text>)
}
</div>
)
}
<div style={{ display: 'flex', paddingRight: 13 }}>
{
(!item.children || item.children.length < 1 || item.children[0].cameraId) && !item.cameraId ? (
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => cameraAdd(item)}>
<img
src="/assets/images/imageImg/nodeCamera.png"
alt="添加摄像头"
style={{ width: '100%' }}
/>
</div>
) : ('')
}
{
item.cameraId ? ('') : (
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => { setEditKey(item.key) }}>
<img
src="/assets/images/imageImg/nodeEdit.png"
alt="编辑"
style={{ width: '100%' }}
/>
</div>
)
}
<Popconfirm
title="删除节点也会删除节点下的从属节点和视频,是否继续?"
arrowPointAtCenter={false}
showArrow={true}
position="topRight"
onConfirm={() => nodeDelete(item)}>
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }}>
<img
src="/assets/images/imageImg/nodeDel.png"
alt="删除"
style={{ width: '100%' }}
/>
</div>
</Popconfirm>
{
keyArr.length > 2||(item.children&&item.children[0].cameraId) ? ('') : (
<div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
<img
src="/assets/images/imageImg/nodeadd.png"
alt="添加子节点"
style={{ width: '100%' }}
/>
</div>
)
}
</div>
</div>
)
};
function toback () {//
history.goBack()
}
function tochange (index) {//
setChooseNum(index)
}
function addMainNode () {//
let mainData = JSON.parse(JSON.stringify(treeData))
if (mainData.length > 0) {
let mainKey = mainData[mainData.length - 1].key
mainKey = Number(mainKey) + 2
mainData.push({
label: '主要节点' + mainKey,
value: String(mainKey - 1),
key: String(mainKey - 1),
})
}
else {
mainData.push({
label: '主要节点1',
value: '0',
key: '0',
})
}
setTreeData(mainData)
}
function searchCamera () {//
if (mykeyword !== '') {
console.log('111111111', mykeyword);
}
else {
console.log('22222222222', mykeyword);
// setShowCameraList(plainOptions)
}
}
function finishAdd () {//
console.log('checkedList', checkedList);
let mainData = JSON.parse(JSON.stringify(treeData))
let nodeKeyArr = addCameraKey.split('-')
if (nodeKeyArr.length == 1) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {
if (mainData[index].key == addCameraKey) {
if (mainData[index].children && mainData[index].children.length > 0) {
let mainKey = mainData[index].children[mainData[index].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children.push({
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
cameraId: plainOptions[q].value
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children = [{
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-0',
key: (Number(thekeyarr[0])) + '-0',
cameraId: plainOptions[q].value
}]
}
}
}
}
}
}
} else if (nodeKeyArr.length == 2) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {//
if (mainData[index].children) {//
for (let j = 0; j < mainData[index].children.length; j++) {//
if (mainData[index].children[j].key == addCameraKey) {
if (mainData[index].children[j].children && mainData[index].children[j].children.length > 0) {
let mainKey = mainData[index].children[j].children[mainData[index].children[j].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children.push({
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2]) + 1),
cameraId: plainOptions[q].value
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children = [{
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
cameraId: plainOptions[q].value
}]
}
}
}
}
}
}
}
}
} else if (nodeKeyArr.length == 3) {
for (let q = 0; q < plainOptions.length; q++) {
for (let w = 0; w < checkedList.length; w++) {
if (plainOptions[q].value == checkedList[w]) {
for (let index = 0; index < mainData.length; index++) {//
if (mainData[index].children) {//
for (let j = 0; j < mainData[index].children.length; j++) {//
if (mainData[index].children[j].children) {//
for (let k = 0; k < mainData[index].children[j].children.length; k++) {//
if (mainData[index].children[j].children[k].key == addCameraKey) {
if (mainData[index].children[j].children[k].children && mainData[index].children[j].children[k].children.length > 0) {
let mainKey = mainData[index].children[j].children[k].children[mainData[index].children[j].children[k].children.length - 1].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children[k].children.push({
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1),
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-' + (Number(thekeyarr[3]) + 1),
cameraId: plainOptions[q].value
})
}
else {
let mainKey = mainData[index].key
let thekeyarr = mainKey.split('-')
mainData[index].children[j].children[k].children = [{
label: plainOptions[q].label,
value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0',
key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-' + (Number(thekeyarr[2])) + '-0',
cameraId: plainOptions[q].value
}]
}
}
}
}
}
}
}
}
}
}
}
setTreeData(mainData);
setAddCamera(false);
setAddCameraKey('');
}
return (
<div style={{ background: 'rgb(246, 250, 255)', height: '100%', width: '100%' }}>
<div style={{
height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between'
}}>
<div style={{ display: 'flex', }}>
<div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}>
<img
src="/assets/images/imageImg/toback.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
智慧小蓝智慧排涝视频融合系统
</div>
<div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}>
<img
src="/assets/images/imageImg/nameChange.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ display: 'flex', }}>
<div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
<img
src="/assets/images/imageImg/save.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}>
<img
src="/assets/images/imageImg/upload.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
</div>
<div style={{ display: 'flex', height: 'calc(100% - 64px)', }}>
<div style={{ height: "100%", width: 200, background: '#FFFFFF' }}>
<div style={{ display: 'flex', height: 49, background: '#1859C1', border: '1px solid #1859C1', color: 'rgba(255,255,255,0.65)', fontSize: 14, width: '100%' }}>
{chooseList.map((item, index) => {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '33.3333%', cursor: 'pointer' }}
key={index}
className={index == chooseNum ? 'onchoose' : ''}
onClick={() => tochange(index)} >
{item}
</div>
)
})}
</div>
{/* 节点 */}
<div style={{ display: chooseNum == "0" ? "block" : "none",height:'100%' }}>
<div style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgb(246, 250, 255)', cursor: 'pointer' }} onClick={addMainNode}>
<div style={{ width: 20, height: 20 }}>
<img
src="/assets/images/imageImg/addMainNodes.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ marginLeft: 9, fontSize: 15, color: 'rgba(0,0,0,0.65)' }}>
增加主要节点
</div>
</div>
{/* <div > */}
<Tree
style={{height: 'calc(100% - 89px)',overflowY: 'auto',}}
treeData={treeData}
renderLabel={renderLabel}
/>
{/* </div> */}
</div>
{/* 添加视频 */}
{addCamera ? (
<div style={{ width: 264, height: '100%', position: 'absolute', top: 64, left: 200, background: '#FFFFFF' }}>
<div style={{ background: 'linear-gradient(180deg, #1859C1 0%, #2C66E7 100%)', display: 'flex', height: 49, padding: '0px 12px 0px 10px', alignItems: 'center', justifyContent: 'space-between', }}>
<div style={{ fontSize: 14, color: '#F9F9F9' }}>添加视频</div>
<div style={{ width: 16, height: 16, cursor: 'pointer' }} onClick={() => { setAddCamera(false); setAddCameraKey('') }}>
<img
src="/assets/images/imageImg/close.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ borderBottom: '1px solid rgba(226,226,226,0.5)', background: '#FFFFFF' }}>
<div style={{ display: 'flex', padding: "8px 10px 10px 10px", alignItems: 'center' }}>
<div style={{ fontSize: 12 }}>摄像头名称</div>
<div>
<Input
style={{ width: 140, marginLeft: 10 }}
value={mykeyword}
onChange={(value) => { setMykeyword(value) }}
placeholder="请输入摄像头名称"
showClear>
</Input>
</div>
<div style={{ width: 32, height: 32, cursor: 'pointer' }} onClick={searchCamera}>
<img
src="/assets/images/imageImg/find.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
<div style={{ display: 'flex', marginBottom: 9, justifyContent: 'space-between' }}>
<div style={{ marginLeft: 20 }}>
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
aria-label="全选"
>
全选
</Checkbox>
</div>
<div style={{ marginRight: 20, color: '#1859C1', cursor: 'pointer' }} onClick={finishAdd}>
完成
</div>
</div>
</div>
<div style={{ padding: '10px 20px', overflowY: 'scroll', height: 'calc(100% - 193px)' }}>
<CheckboxGroup
style={{ marginTop: 6 }}
className='my_CheckboxGroup'
options={showCameraList}
value={checkedList}
onChange={onChange}
aria-label="text"
/>
</div>
</div>
) : ('')}
{/* 样式 */}
<div style={{ display: chooseNum == "1" ? "block" : "none", fontSize: 12 }} className="hasHeader">
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)' }}>
<div style={{ marginLeft: 20 }}>header</div>
<div style={{ marginRight: 13 }}><Switch onChange={(v, e) => console.log(v)} size="small" aria-label="是否有头部"></Switch></div>
</div>
<div style={{ height: 41, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(226,226,226,0.2)', cursor: 'pointer' }} onClick={() => { setComingVisible(true) }}>
<div style={{ marginLeft: 20 }}>自定义样式</div>
<div style={{ marginRight: 13, width: 9, height: 5, display: 'flex', alignItems: 'center', }}>
<img
src="/assets/images/imageImg/down.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
</div>
</div>
</div>
<div style={{ flex: 1 }}>
<VideoScreen/>
</div>
</div>
<Modal
title="提醒"
visible={comingVisible}
onOk={() => {
setComingVisible(false)
}}
width={610}
onCancel={() => {
setComingVisible(false)
}}
okText="确定"
cancelText="取消"
closeOnEsc={true}
>
开发中敬请期待~
</Modal>
</div>
)
}
function mapStateToProps (state) {
const { auth, global } = state;
return {
user: auth.user,
actions: global.actions,
};
}
export default connect(mapStateToProps)(MirroringDetail);

9
code/VideoAccess-VCMP/web/client/src/sections/openness/routes.js

@ -1,5 +1,5 @@
'use strict'; 'use strict';
import { Mirroring } from './containers'; import { Mirroring,MirroringDetail } from './containers';
export default [{ export default [{
type: 'inner', type: 'inner',
@ -15,4 +15,11 @@ export default [{
breadcrumb: '镜像服务', breadcrumb: '镜像服务',
}] }]
} }
},{
type: 'outer',
route: {
path: '/mirroring_detail',
key: 'MirroringDetail',
component: MirroringDetail,
}
}]; }];

27
code/VideoAccess-VCMP/web/client/src/sections/openness/style.less

@ -0,0 +1,27 @@
.onchoose{
background: linear-gradient(180deg, #1859C1 0%, #2C66E7 100%);
color: #F9F9F9;
font-weight: 600;
border-bottom: 2px solid #729BFF;
}
.inputpadding{
.semi-input-small{
padding: 0px;
}
}
.my_CheckboxGroup{
.semi-checkbox-addon{
font-size: 12px;
}
.semi-checkbox-extra{
font-size: 12px;
}
}
.hasHeader{
.semi-switch-checked{
background-color:#2F53EA
}
.semi-switch-checked:hover{
background-color:#2F53EA
}
}

1
code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@ -13,7 +13,6 @@ const { basicAction, RouteRequest } = webUtils
export { export {
basicAction, RouteRequest basicAction, RouteRequest
} }
console.log(basicAction, RouteRequest);
export const ApiTable = { export const ApiTable = {
login: "login", login: "login",

2
code/VideoAccess-VCMP/web/package.json

@ -51,7 +51,7 @@
"@douyinfe/semi-webpack-plugin": "^2.13.0", "@douyinfe/semi-webpack-plugin": "^2.13.0",
"@fs/attachment": "^1.0.0", "@fs/attachment": "^1.0.0",
"@micro-zoe/micro-app": "^1.0.0-alpha.1", "@micro-zoe/micro-app": "^1.0.0-alpha.1",
"@peace/utils": "0.0.64", "@peace/utils": "^0.0.64",
"@semi-bot/semi-theme-fscamera": "^1.0.0", "@semi-bot/semi-theme-fscamera": "^1.0.0",
"@vitejs/plugin-react": "^1.3.1", "@vitejs/plugin-react": "^1.3.1",
"@vitejs/plugin-react-refresh": "^1.3.6", "@vitejs/plugin-react-refresh": "^1.3.6",

Loading…
Cancel
Save