diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/back.png b/code/VideoAccess-VCMP/web/client/assets/images/application/back.png new file mode 100644 index 0000000..6c2e2cd Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/back.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/background.png b/code/VideoAccess-VCMP/web/client/assets/images/application/background.png new file mode 100644 index 0000000..dc0eb4a Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/background.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/gongge.png b/code/VideoAccess-VCMP/web/client/assets/images/application/gongge.png new file mode 100644 index 0000000..e334076 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/gongge.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/monitor.png b/code/VideoAccess-VCMP/web/client/assets/images/application/monitor.png new file mode 100644 index 0000000..29efb41 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/monitor.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/polling.png b/code/VideoAccess-VCMP/web/client/assets/images/application/polling.png new file mode 100644 index 0000000..2d73330 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/polling.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen1.png b/code/VideoAccess-VCMP/web/client/assets/images/application/screen1.png new file mode 100644 index 0000000..e884acc Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/screen1.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen12.png b/code/VideoAccess-VCMP/web/client/assets/images/application/screen12.png new file mode 100644 index 0000000..e85c1d6 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/screen12.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen4.png b/code/VideoAccess-VCMP/web/client/assets/images/application/screen4.png new file mode 100644 index 0000000..34d485d Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/screen4.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/screen6.png b/code/VideoAccess-VCMP/web/client/assets/images/application/screen6.png new file mode 100644 index 0000000..9e68c0a Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/screen6.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/application/titleBottom.png b/code/VideoAccess-VCMP/web/client/assets/images/application/titleBottom.png new file mode 100644 index 0000000..e52957f Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/application/titleBottom.png differ diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index 2055c63..a7f1ca0 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx @@ -4,7 +4,6 @@ import './textScroll.less' function TextScroll (props) { const { content, duration, roll } = props - console.log(content, roll); const [showContent, setShowContent] = useState('') const showIndex = useRef(0) const initialization = useRef(false) @@ -13,7 +12,6 @@ function TextScroll (props) { if (content.length) { if (roll) { let contentParent = document.getElementById('marquee_box') - console.log(document.getElementById('contentPMakeUp')); document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' const contentP = document.getElementById('contentP') contentP.style.visibility = 'visible' @@ -28,7 +26,6 @@ function TextScroll (props) { let refreshTime = moment() const scroll = () => { let contentParent = document.getElementById('marquee_box') - console.log(document.getElementById('contentPMakeUp')); document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' //初始化 // if(!showContent&&!initialization.current){ diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx index b88ed7a..8816200 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx @@ -65,6 +65,7 @@ const VideoPlay = ({ iotVideoServer, local, //是否本地调用视频 }) => { + console.log(videoObj); if (videoObj.type == 'yingshi') { videoObj = { ...videoObj, @@ -386,7 +387,6 @@ const VideoPlay = ({ const setupSize = (data) => { if (!operationRef.current?.fullScreen.select) { - console.log(sizeWh); let containerWidth = sizeWh?.parentWidth //容器的宽高和视频的宽高 let containerHeight = sizeWh?.parentHeight let videoWidth = width || sizeWh?.width @@ -500,7 +500,6 @@ const VideoPlay = ({ function mapStateToProps (state) { const { auth, global } = state; - console.log(global); return { user: auth.user, iotVideoServer: global.iotVideoServer, diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx index 7732b06..af34527 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/voiceHeader.jsx @@ -14,8 +14,6 @@ const VideoHeader = ({ operationState, changeSelectState, setProcessDisX, name, const upTimeInterval = useRef(null) const [showTime_, setShowTime] = useState(' ') - console.log(11212111313131); - const updateTime = () => { if (!showTime) { setShowTime('') diff --git a/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx b/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx index a9b28ab..ebb83b9 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/application/containers/applicationCenter.jsx @@ -196,7 +196,7 @@ const ApplicationCenter = (props) => { const details = (data) => { pageLimit.current = query dispatch(applicationCenter.getApplication(pageLimit.current)).then((res) => { - limits.current = res.payload.data.data.length + limits.current = res.payload?.data?.data.length }); } useEffect(() => { diff --git a/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/container.jsx b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/container.jsx new file mode 100644 index 0000000..c2bfad8 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/container.jsx @@ -0,0 +1,39 @@ +import React, { useEffect, useRef } from 'react'; +import { connect } from 'react-redux'; +import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui'; +import { VideoPlay } from "$components"; +import { useState } from 'react'; + + +const Container = ({ videoObj }) => { + const [videoWidth, setVideoWidth] = useState() + const [videoHeight, setVideoHeight] = useState() + useEffect(() => { + setVideoWidth(document.getElementById('videoo').clientWidth) + setVideoHeight(document.getElementById('videoo').clientHeight) + }, []) + + return ( +
+ {/* */} + +
+ ) +} + +function mapStateToProps (state) { + const { auth } = state; + return { + user: auth.user, + }; +} + +export default connect(mapStateToProps)(Container) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoCard.jsx b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoCard.jsx new file mode 100644 index 0000000..bfd4bb3 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoCard.jsx @@ -0,0 +1,49 @@ +import React, { useEffect, useRef } from 'react'; +import { connect } from 'react-redux'; +import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui'; +import Container from "./container"; + + +const VideoCard = ({ data, pageSize = 9 }) => { + + let span = 8 + if (pageSize === 1) { + span = 24 + } + + if (pageSize === 4) { + span = 12 + } + + let rowsCount = 2 + if (pageSize == 1) { + rowsCount = 1 + } + + if (pageSize == 9) { + rowsCount = 3 + } + let cheight = Math.floor(100 / rowsCount) + "%" + + return ( + <> + +
+ +
+ + + + ) +} + +function mapStateToProps (state) { + const { auth } = state; + return { + user: auth.user, + }; +} + +export default connect(mapStateToProps)(VideoCard) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx index 40ed2ab..3d5349f 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.jsx @@ -1,91 +1,260 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import { connect } from 'react-redux'; -import { TreeSelect, Tree } from '@douyinfe/semi-ui'; +import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row } from '@douyinfe/semi-ui'; +import './videoScreen.less' +import VideoCard from './videoCard' const VideoScreen = (props) => { - const treeData = [{ - label: '全部', - value: '全部', - key: '0', - children: [{ - label: '公司', - value: '公司', - key: '0-1', - children: [ - { - label: '大门', - value: '大门', - key: '0-1-1', - }, { - label: '机房', - value: '机房', - key: '0-1-2', - }, { - label: '后门', - value: '后门', - key: '0-1-3', - }, - ] - }, { - label: '外部', - value: '外部', - key: '0-2', - children: [ - { - label: '门口', - value: '门口', - key: '0-2-1', - }, - ] - }] - }] + const api = useRef(); + const treeData = [{ + label: '全部', + value: '全部', + key: '0', + children: [{ + label: '公司', + value: '公司', + key: '0-1', + children: [ + { + label: '大门', + value: '大门', + key: '0-1-1', + }, { + label: '机房', + value: '机房', + key: '0-1-2', + }, { + label: '后门', + value: '后门', + key: '0-1-3', + }, + ] + }, { + label: '外部', + value: '外部', + key: '0-2', + children: [ + { + label: '门口', + value: '门口', + key: '0-2-1', + }, + ] + }] + }] + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "#fff", + }; - return ( - <> - {/* 头部标题及搜索 */} -
智慧小蓝视频融合监管中心
-
-
-
查询： - { - console.log(e) - }} - /> -
+ const data = [{ + channelNo: 1, + content: ['5442542542', '452345', '234524525'], + serialNo: "G75922040", + type: "yingshi", + yingshiToken: "at.02vgv9vn19rek6hh6a9k35r61rf2orw5-6pmmn2tu6v-040zcc8-xj4tdjtau" + },] - -
-
+ return ( + <> +
+ {/* 头部标题 */} +
+
智慧小蓝视频融合监管中心
+
-
+
+
+
查询： + { + console.log(e) + }} + /> +
+ +
+
+
+
+
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + + {/* + 在线 + 离线 + 未知 + 禁用 + + */} + +
+
+ + {/* */} +
+
+
+ {/* 视频 */} +
+ + {data.map((v, index) => { + return + })} + +
+ {/* 视频设置 */} +
+ {[{ img: 'gongge', value: '宫格设置', screen: [{ img: 'screen1', value: '单屏' }, { img: 'screen4', value: '4分屏' }, { img: 'screen6', value: '6分屏' }, { img: 'screen12', value: '12分屏' },] }, + { img: 'polling', value: '轮询设置' }, + { img: 'back', value: '背投' }, + { img: 'monitor', value: '监控地图' },].map((v, index) => { + return
+ { + switch (v.value) { + case '宫格设置': + return
+ {v.screen.map((item) => { + return
+ +
{item.value}
+
+ })} +
+ case '轮询设置': + return
+ console.log(v)} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', }} /> + 轮询间隔 + + 分钟 +
+ default: + break; + } + }} + > + + +
{v.value}
+
+ })} +
+
+
+
+ - - ) + ) } function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth } = state; + return { + user: auth.user, + }; } export default connect(mapStateToProps)(VideoScreen) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.less b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.less new file mode 100644 index 0000000..e070836 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/journaling/components/videoScreen.less @@ -0,0 +1,18 @@ +.KJBlue { + .semi-tree-option, + .semi-icon, + .semi-form-field-label-text { + color: #fff; + } + .semi-checkbox-inner-display { + //树状多选框 + border: 1px solid #fff; + } + input { + background: #01185f; + box-shadow: inset 0px 0px 5px 1px rgba(28, 96, 254, 0.4); + } + input::placeholder { + color: #fff; + } +} diff --git a/code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx b/code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx index 2d87595..192acf5 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/monitor/containers/videoPlayCross.jsx @@ -47,7 +47,6 @@ const VideoPlayCross = (props) => { window.removeEventListener('resize', resize_); } }, []) - console.log(videoParams); return ( <> { diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index af5543e..c088dc7 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -51,14 +51,14 @@ export const ApiTable = { delPush: 'status/push/{configId}',//删除推送配置 putPushBanned: 'status/push/banned',//禁用推送配置 getPushCopy: 'status/push/{configId}/copy',//复制推送配置 - getPushLog: '/status/push/{configId}/log',//获取推送记录 + getPushLog: 'status/push/{configId}/log',//获取推送记录 //应用管理 - getApplication: '/application', //获取应用信息 - putApplication: '/application', //禁用应用 - delApplication: '/application/{appId}', //删除应用 - postApplication: '/application', //创建/修改应用 + getApplication: 'application', //获取应用信息 + putApplication: 'application', //禁用应用 + delApplication: 'application/{appId}', //删除应用 + postApplication: 'application', //创建/修改应用 }; export const VideoServeApi = {