Browse Source

镜像调用服务

release_1.3.0
wenlele 3 years ago
parent
commit
311226953a
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/application/背景@2x (1).png
  2. 4
      code/VideoAccess-VCMP/web/client/src/app.jsx
  3. 161
      code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
  4. 15
      code/VideoAccess-VCMP/web/client/src/layout/index.jsx
  5. 192
      code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx
  6. 191
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
  7. 2
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  8. 58
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx
  9. 76
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx
  10. 3
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/index.js
  11. 101
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroringDetail.jsx
  12. 9
      code/VideoAccess-VCMP/web/client/src/sections/openness/routes.js
  13. 2
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

BIN
code/VideoAccess-VCMP/web/client/assets/images/application/背景@2x (1).png

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 KiB

4
code/VideoAccess-VCMP/web/client/src/app.jsx

@ -20,7 +20,9 @@ const App = props => {
const { projectName } = props const { projectName } = props
useEffect(() => { useEffect(() => {
document.title = projectName; if (!window.__MICRO_APP_ENVIRONMENT__) {
document.title = projectName;
}
}, []) }, [])
return ( return (

161
code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx

@ -4,92 +4,95 @@ import { connect } from "react-redux";
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui"; import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
const Header = (props) => { const Header = (props) => {
const { dispatch, history, user, actions, socket } = props; const { dispatch, history, user, actions, socket } = props;
return ( return (
<> <>
<Nav <Nav
mode={"horizontal"} mode={"horizontal"}
onClick={({ itemKey }) => { onClick={({ itemKey }) => {
if (itemKey == "logout") { if (itemKey == "logout") {
dispatch(actions.auth.logout(user)); dispatch(actions.auth.logout(user));
const iotAuth = document.getElementById('iotAuth').contentWindow; if (!window.__MICRO_APP_ENVIRONMENT__) {
iotAuth.postMessage({ action: 'logout' }, '*'); const iotAuth = document.getElementById('iotAuth').contentWindow;
if (socket) { iotAuth.postMessage({ action: 'logout' }, '*');
socket.disconnect(); }
}
history.push(`/signin`); if (socket) {
} socket.disconnect();
}} }
style={{ history.push(`/signin`);
height: 60, }
minWidth: 520, }}
background: `url(${__webpack_public_path__}assets/images/background/header.png)`, style={{
backgroundSize: "100% 100%", height: 60,
color: "white", minWidth: 520,
}} background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
header={{ backgroundSize: "100% 100%",
logo: ( color: "white",
}}
header={{
logo: (
<img
src="/assets/images/background/logo.png"
style={{ display: "inline-block", width: 280, height: 52 }}
/>
),
text: "",
}}
footer={
<Nav.Sub
itemKey={"user"}
text={
<div
style={{
marginLeft: 20,
display: "inline-block",
color: "white",
}}
>
<img <img
src="/assets/images/background/logo.png" src="/assets/images/background/notice.png"
style={{ display: "inline-block", width: 280, height: 52 }} style={{
display: "inline-block",
width: 18,
height: 18,
position: "relative",
top: 6,
left: -10,
}}
/> />
),
text: "",
}}
footer={
<Nav.Sub
itemKey={"user"}
text={
<div
style={{
marginLeft: 20,
display: "inline-block",
color: "white",
}}
>
<img
src="/assets/images/background/notice.png"
style={{
display: "inline-block",
width: 18,
height: 18,
position: "relative",
top: 6,
left: -10,
}}
/>
<Avatar size="small" color="light-blue" style={{marginRight:4}}> <Avatar size="small" color="light-blue" style={{ marginRight: 4 }}>
<img src="/assets/images/avatar/6.png" /> <img src="/assets/images/avatar/6.png" />
</Avatar> </Avatar>
<div style={{ <div style={{
display: "inline-block", position: "relative", display: "inline-block", position: "relative",
top: 10, top: 10,
left: 4, left: 4,
marginRight: 4, marginRight: 4,
}}> }}>
<div>你好</div> <div>你好</div>
<div>{user && user.displayName}</div> <div>{user && user.displayName}</div>
</div> </div>
</div> </div>
} }
> >
<Nav.Item itemKey={"logout"} text={"退出"} /> <Nav.Item itemKey={"logout"} text={"退出"} />
</Nav.Sub> </Nav.Sub>
} }
/> />
</> </>
); );
}; };
function mapStateToProps (state) { function mapStateToProps (state) {
const { global, auth, webSocket } = state; const { global, auth, webSocket } = state;
return { return {
actions: global.actions, actions: global.actions,
user: auth.user, user: auth.user,
socket: webSocket.socket, socket: webSocket.socket,
}; };
} }
export default connect(mapStateToProps)(Header); export default connect(mapStateToProps)(Header);

15
code/VideoAccess-VCMP/web/client/src/layout/index.jsx

@ -19,7 +19,7 @@ moment.locale('zh-cn');
const { initLayout, initApiRoot, resize, initWebSocket } = layoutActions; const { initLayout, initApiRoot, resize, initWebSocket } = layoutActions;
const Root = props => { const Root = props => {
const { sections, title, copyright } = props; const { sections, title, copyright, actions } = props;
const [history, setHistory] = useState(null) const [history, setHistory] = useState(null)
const [store, setStore] = useState(null) const [store, setStore] = useState(null)
const [outerRoutes, setOuterRoutes] = useState([]) const [outerRoutes, setOuterRoutes] = useState([])
@ -172,6 +172,9 @@ const Root = props => {
// MicroApp // MicroApp
const microAppListen = async (data) => { const microAppListen = async (data) => {
console.log(actions);
console.log('mid:' + data.data.mid);
if (data.action == 'initMicro') { if (data.action == 'initMicro') {
await store.dispatch(actions.auth.initAuth({ await store.dispatch(actions.auth.initAuth({
authorized: true, authorized: true,
@ -179,7 +182,13 @@ const Root = props => {
// mirrorId: data.data.mirrorId // mirrorId: data.data.mirrorId
...(data.data || {}) ...(data.data || {})
})) }))
// await store.dispatch(push('/noMatch')); if (data?.data?.mid) {
console.log(22315348);
await store.dispatch(push('/callService'));
} else {
await store.dispatch(push('/noMatch'));
}
setMicroAppWaiting(false) setMicroAppWaiting(false)
} }
} }
@ -227,7 +236,7 @@ const Root = props => {
: '' : ''
} }
{ {
resourceRoot.iotAuthWeb ? resourceRoot.iotAuthWeb && !window.__MICRO_APP_ENVIRONMENT__ ?
<iframe id="iotAuth" src={`${resourceRoot.iotAuthWeb}/cross`} style={{ position: 'absolute', top: 0, height: 1, visibility: 'hidden' }} frameBorder={0} > <iframe id="iotAuth" src={`${resourceRoot.iotAuthWeb}/cross`} style={{ position: 'absolute', top: 0, height: 1, visibility: 'hidden' }} frameBorder={0} >
<p>你的浏览器不支持 iframe</p> <p>你的浏览器不支持 iframe</p>
</iframe> </iframe>

192
code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@ -8,110 +8,112 @@ import { IconLock, IconUser } from '@douyinfe/semi-icons';
import '../style.less' import '../style.less'
const Login = props => { const Login = props => {
const { dispatch, user, error, actions, apiRoot, isRequesting } = props const { dispatch, user, error, actions, apiRoot, isRequesting } = props
const form = useRef(); const form = useRef();
useEffect(() => { useEffect(() => {
if (error) { if (error) {
Toast.error(error); Toast.error(error);
form.current.setValue('password', '') form.current.setValue('password', '')
} }
}, [error]) }, [error])
useEffect(() => { useEffect(() => {
if (user && user.authorized) { if (user && user.authorized) {
if (!window.__MICRO_APP_ENVIRONMENT__) {
const iotAuth = document.getElementById('iotAuth').contentWindow; const iotAuth = document.getElementById('iotAuth').contentWindow;
iotAuth.postMessage({ action: 'login', user: user }, '*'); iotAuth.postMessage({ action: 'login', user: user }, '*');
dispatch(push('/equipmentWarehouse/nvr')); }
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr'])) dispatch(push('/equipmentWarehouse/nvr'));
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse'])) localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
} localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
}, [user]) }
}, [user])
return ( return (
<div style={{ <div style={{
// height: '100vh', // height: '100vh',
// backgroundImage: "url('/assets/images/background/loginBackground.gif')", // backgroundImage: "url('/assets/images/background/loginBackground.gif')",
// backgroundSize: 'cover', // backgroundSize: 'cover',
// backgroundRepeat: 'no-repeat', // backgroundRepeat: 'no-repeat',
// position: 'relative', // position: 'relative',
}}> }}>
<video <video
autoPlay loop muted autoPlay loop muted
style={{ style={{
width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)' width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
}} }}
src="/assets/video/login_bg.mp4" src="/assets/video/login_bg.mp4"
type="video/mp4" type="video/mp4"
/> />
<img src='/assets/images/background/loginBackground.gif' style={{ <img src='/assets/images/background/loginBackground.gif' style={{
width: "100%", width: "100%",
height: 'calc(100vh - 4px)', height: 'calc(100vh - 4px)',
objectFit: "cover", objectFit: "cover",
objectPosition: 'left top', objectPosition: 'left top',
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
zIndex: "5" zIndex: "5"
}} /> }} />
<div style={{ <div style={{
width: 446, width: 446,
height: 348, height: 348,
padding: '45px 60px', padding: '45px 60px',
background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))', background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))',
backdropFilter: "saturate(100%) contrast(100%) blur(17px)", backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
position: 'absolute', position: 'absolute',
top: '33.89%', top: '33.89%',
right: '16.43%', right: '16.43%',
zIndex: "6" zIndex: "6"
}}> }}>
<div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}> <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
<img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} /> <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
</div>
<Form
onSubmit={values => {
dispatch(login(values.username, values.password)).then(res => {
const data = res.payload.user
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
})
}}
getFormApi={formApi => form.current = formApi}
>
<Form.Input
className='inputbgc'
field='username'
noLabel={true}
label='用户名'
placeholder='请输入账号'
prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
/>
<Form.Input
field='password'
noLabel={true}
mode="password"
autoComplete=""
placeholder='请输入密码'
label='密码'
prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
/>
<Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
</Form>
</div> </div>
</div> <Form
); onSubmit={values => {
dispatch(login(values.username, values.password)).then(res => {
const data = res.payload.user
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
})
}}
getFormApi={formApi => form.current = formApi}
>
<Form.Input
className='inputbgc'
field='username'
noLabel={true}
label='用户名'
placeholder='请输入账号'
prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
/>
<Form.Input
field='password'
noLabel={true}
mode="password"
autoComplete=""
placeholder='请输入密码'
label='密码'
prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
/>
<Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
</Form>
</div>
</div>
);
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,
error: auth.error, error: auth.error,
actions: global.actions, actions: global.actions,
apiRoot: global.apiRoot, apiRoot: global.apiRoot,
isRequesting: auth.isRequesting isRequesting: auth.isRequesting
} }
} }
export default connect(mapStateToProps)(Login); export default connect(mapStateToProps)(Login);

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

@ -1,111 +1,124 @@
"use strict"; "use strict";
import { ApiTable,basicAction } from "$utils"; import { ApiTable, basicAction } from "$utils";
export function getCamera(query) { export function getCamera (query) {
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_CAMREA", actionType: "GET_CAMREA",
query: query, query: query,
url: `${ApiTable.getCamera}`, url: `${ApiTable.getCamera}`,
msg: { option: "获取摄像头列表信息" }, msg: { option: "获取摄像头列表信息" },
reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } }, reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } },
}); });
} }
export function getCameraListAll() {//获取摄像头能力列表 export function getCameraListAll () {//获取摄像头能力列表
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_CAMERA_LIST_ALL", actionType: "GET_CAMERA_LIST_ALL",
url: `${ApiTable.getCameraListAll}`, url: `${ApiTable.getCameraListAll}`,
msg: { option: "" }, msg: { option: "" },
reducer: { name: "" }, reducer: { name: "" },
}); });
} }
export function getMirrorList() {//获取摄像头能力列表 export function getMirrorList () {//获取镜像信息列表
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_MIRROR_LIST", actionType: "GET_MIRROR_LIST",
url: `${ApiTable.getMirrorList}`, url: `${ApiTable.getMirrorList}`,
msg: { option: "" }, msg: { option: "" },
reducer: { name: "" }, reducer: { name: "" },
}); });
} }
export function delMirror(orgId) {//删除镜像信息 export function delMirror (orgId) {//删除镜像信息
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "del", type: "del",
dispatch: dispatch, dispatch: dispatch,
actionType: "DEL_MIRROR", actionType: "DEL_MIRROR",
url: `${ApiTable.delMirror.replace("{mirrorId}", orgId)}`, url: `${ApiTable.delMirror.replace("{mirrorId}", orgId)}`,
msg: { msg: {
option: option:
"删除镜像信息", "删除镜像信息",
}, },
reducer: { name: "" }, reducer: { name: "" },
}); });
} }
export function putMirrorCopy(orgId) { //编辑推送配置 export function putMirrorCopy (orgId) { //编辑推送配置
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "put", type: "put",
dispatch: dispatch, dispatch: dispatch,
actionType: "PUT_MIRROR_COPY", actionType: "PUT_MIRROR_COPY",
url: `${ApiTable.putMirrorCopy.replace("{mirrorId}", orgId)}`, url: `${ApiTable.putMirrorCopy.replace("{mirrorId}", orgId)}`,
msg: { option: '复制镜像信息' }, msg: { option: '复制镜像信息' },
reducer: {}, reducer: {},
}); });
} }
export function putMirrorPublish(orgId) { //编辑推送配置 export function putMirrorPublish (orgId) { //编辑推送配置
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "put", type: "put",
dispatch: dispatch, dispatch: dispatch,
actionType: "PUT_MIRROR_PUBLISH", actionType: "PUT_MIRROR_PUBLISH",
url: `${ApiTable.putMirrorPublish.replace("{mirrorId}", orgId)}`, url: `${ApiTable.putMirrorPublish.replace("{mirrorId}", orgId)}`,
msg: { option: '发布镜像信息' }, msg: { option: '发布镜像信息' },
reducer: {}, reducer: {},
}); });
} }
export function getMirrorDetail(orgId) {//获取摄像头能力列表 export function getMirrorDetail (orgId) {//获取摄像头能力列表
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_MIRROR", actionType: "GET_MIRROR",
url: `${ApiTable.getMirror.replace("{mid}", orgId)}`, url: `${ApiTable.getMirror.replace("{mid}", orgId)}`,
msg: { option: "" }, msg: { option: "" },
reducer: { name: "" }, reducer: { name: "" },
}); });
} }
export function putMirror(data) { //编辑推送配置 export function putMirror (data) { //编辑推送配置
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "put", type: "put",
dispatch: dispatch, dispatch: dispatch,
data, data,
actionType: "PUT_MIRROR", actionType: "PUT_MIRROR",
url: `${ApiTable.putMirror}`, url: `${ApiTable.putMirror}`,
msg: { option: '编辑镜像信息' }, msg: { option: '编辑镜像信息' },
reducer: {}, reducer: {},
}); });
} }
export function getErrorCode(query) {//查取指定状态码信息 export function getErrorCode (query) {//查取指定状态码信息
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
dispatch: dispatch, dispatch: dispatch,
query, query,
actionType: "GET_ERRORCODE", actionType: "GET_ERRORCODE",
url: `${ApiTable.getErrorCode}`, url: `${ApiTable.getErrorCode}`,
msg: { option: "" }, msg: { option: "" },
reducer: { name: "" }, reducer: { name: "" },
}); });
}
export function getMirrorMid (orgId) {//获取指定镜像信息
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_MIRRORMID",
url: `${ApiTable.getMirrorMid.replace("{mid}", orgId)}`,
msg: { option: "" },
reducer: { name: "" },
})
} }

2
code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@ -40,7 +40,7 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
videoStyle='true' videoStyle='true'
containerId={videoObj.key} containerId={videoObj.key}
local={true} /> : local={true} /> :
<img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2', 'white2', 'black2') : mould('blue1.5', 'white1.5', 'black1.5')}.png`} style={{ <img src={`${__webpack_public_path__}assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2', 'white2', 'black2') : mould('blue1.5', 'white1.5', 'black1.5')}.png`} style={{
display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30, display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
}} /> : ""} }} /> : ""}
<div style={{ lineHeight: '30px', paddingLeft: 6, color: mould('#FFFFFF', '#615E5E', '#FFFFFF') }}>{videoObj?.label}</div> <div style={{ lineHeight: '30px', paddingLeft: 6, color: mould('#FFFFFF', '#615E5E', '#FFFFFF') }}>{videoObj?.label}</div>

58
code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

@ -9,8 +9,8 @@ import PerfectScrollbar from "perfect-scrollbar";
let timing let timing
let projectScrollbar; let projectScrollbar;
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => { const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
// console.log({ : treeData }); // console.log('', treeData);
// console.log(filterGroup); // console.log('', filterGroup);
// console.log(headerName); // console.log(headerName);
// console.log(videoPlay); // console.log(videoPlay);
// console.log(template); // console.log(template);
@ -57,50 +57,6 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
// } // }
// }, // },
// ] // ]
// },
// {
// label: '',
// value: '',
// key: '25425425',
// children: [
// {
// label: '',
// value: '',
// key: '2542542542542',
// children: [
// {
// label: '',
// value: '',
// key: '2542542542542',
// videoData: {
// channelNo: null,
// content: ['5442542542', '452345', '234524525'],
// serialNo: "G56384764",
// type: "yingshi",
// yingshiToken: "at.c7dnknnvd4irh8zddul3dgkpb4f3oz83-4n6u7zv8st-1gxz7ny-lgffyh25z",
// }
// },
// ]
// },
// ]
// }, {
// label: '',
// value: '',
// key: '0-3',
// children: [
// {
// label: '',
// value: '',
// key: '0-3-1',
// children: [
// {
// label: '',
// value: '',
// key: '0-3-1-1',
// },
// ]
// },
// ]
// }] // }]
const [pageSize, setPageSize] = useState(4) // const [pageSize, setPageSize] = useState(4) //
@ -356,7 +312,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
className={template} className={template}
style={{ style={{
width: '100%', height: '100%', width: '100%', height: '100%',
background: `url(/assets/images/application/${mould('buleBackground', "whiteBackground", "blackBackground")}.png)`, background: `url(${__webpack_public_path__}assets/images/application/${mould('buleBackground', "whiteBackground", "blackBackground")}.png)`,
color: '#FFFFFF', color: '#FFFFFF',
// minWidth: 1000, // minWidth: 1000,
}}> }}>
@ -375,7 +331,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
color: mould('#FFFFFF', 'rgba(0,0,0,0.65)', '#FFFFFF'), color: mould('#FFFFFF', 'rgba(0,0,0,0.65)', '#FFFFFF'),
lineHeight: '70px', lineHeight: '70px',
letterSpacing: '5px', letterSpacing: '5px',
background: `url(/assets/images/application/${mould('buletitleBottom', "whitetitleBottom", "blacktitleBottom")}.png)`, background: `url(${__webpack_public_path__}assets/images/application/${mould('buletitleBottom', "whitetitleBottom", "blacktitleBottom")}.png)`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}} >{headerName}</div> }} >{headerName}</div>
</div> : ""} </div> : ""}
@ -581,7 +537,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
</div> </div>
{/* 视频设置 */} {/* 视频设置 */}
<div style={{ <div style={{
marginTop:5, width: 64, height: 476, background: mould('#01185F', ' linear-gradient(197deg, rgba(255,255,255,0.65) 0%, #E4E4E4 100%)', 'linear-gradient(216deg, #979797 0%, #BEBEBE 53%, #969696 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.4000)', 'rgba(97,94,94,0.5)', 'rgba(132,132,132,0.5)')}`, borderRadius: ' 1px', textAlign: 'center', marginTop: 5, width: 64, height: 476, background: mould('#01185F', ' linear-gradient(197deg, rgba(255,255,255,0.65) 0%, #E4E4E4 100%)', 'linear-gradient(216deg, #979797 0%, #BEBEBE 53%, #969696 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.4000)', 'rgba(97,94,94,0.5)', 'rgba(132,132,132,0.5)')}`, borderRadius: ' 1px', textAlign: 'center',
}}> }}>
{[{ img: mould('blueGongge', 'whiteGongge', 'blackGongge'), value: '宫格设置', screen: [{ img: mould('blueScreen1', 'whiteScreen1', 'blackScreen1'), value: '单屏' }, { img: mould('blueScreen4', 'whiteScreen4', 'blackScreen4'), value: '4分屏' }, { img: mould('blueScreen6', 'whiteScreen6', 'blackScreen6'), value: '6分屏' }, { img: mould('blueScreen12', 'whiteScreen12', 'blackScreen12'), value: '12分屏' },] }, {[{ img: mould('blueGongge', 'whiteGongge', 'blackGongge'), value: '宫格设置', screen: [{ img: mould('blueScreen1', 'whiteScreen1', 'blackScreen1'), value: '单屏' }, { img: mould('blueScreen4', 'whiteScreen4', 'blackScreen4'), value: '4分屏' }, { img: mould('blueScreen6', 'whiteScreen6', 'blackScreen6'), value: '6分屏' }, { img: mould('blueScreen12', 'whiteScreen12', 'blackScreen12'), value: '12分屏' },] },
{ img: mould('bluePolling', 'whitePolling', 'blackPolling'), value: '轮询设置', }, { img: mould('bluePolling', 'whitePolling', 'blackPolling'), value: '轮询设置', },
@ -597,7 +553,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
return <div style={{ height: 69, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(311deg, #9D9D9D 0%, #8C8C8C 50%, #7E7E7E 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}> return <div style={{ height: 69, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(311deg, #9D9D9D 0%, #8C8C8C 50%, #7E7E7E 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
{v.screen.map((item) => { {v.screen.map((item) => {
return <div key={item.img} onClick={() => { flipScreens(item.value); setMultiScreen(item.value) }}> return <div key={item.img} onClick={() => { flipScreens(item.value); setMultiScreen(item.value) }}>
<img src={`/assets/images/application/${item.img}.png`} alt="" style={{ width: 40, height: 40, }} /> <img src={`${__webpack_public_path__}assets/images/application/${item.img}.png`} alt="" style={{ width: 40, height: 40, }} />
<div style={{ width: 40, fontWeight: 400, color: mould('#D9D9D9', '#615E5E', '#D9D9D9'), fontSize: 12, textAlign: 'center' }}>{item.value}</div> <div style={{ width: 40, fontWeight: 400, color: mould('#D9D9D9', '#615E5E', '#D9D9D9'), fontSize: 12, textAlign: 'center' }}>{item.value}</div>
</div> </div>
})} })}
@ -623,7 +579,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
} }
}} }}
> >
<img src={`/assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }} <img src={`${__webpack_public_path__}assets/images/application/${v.img}.png`} alt="" style={{ width: 54, height: 54, margin: '20px 0 0px 10px' }}
onClick={() => { onClick={() => {
if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen() if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen()
}} /> }} />

76
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx

@ -0,0 +1,76 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { tree } from './mirroringDetail';
import VideoScreen from '../components/videoScreen';
const CallService = (props) => {
const { dispatch, actions, user } = props
const [treeData, setTreeData] = useState([]) //
const [headerName, setHeaderName] = useState('dfvbfdbe')
const [showHeader, setShowHeader] = useState(true) //
const [filterGroup, setFilterGroup] = useState([]) //
const [template, setTemplate] = useState('') //
const [videoPlay, setVideoPlay] = useState(true) //
useEffect(() => {
dispatch(actions.openness.getMirrorList()).then((res) => {
if (res?.success && res?.payload?.data?.some(v => v.mid == user?.mid)) {
dispatch(actions.openness.getMirrorMid(user?.mid)).then((r) => {
if (r?.success) {
let data = r?.payload?.data || {}
let filterGrouplist =data.filterGroup
for (let i = 0; i < filterGrouplist.length; i++) {
filterGrouplist[i].num = i
if (filterGrouplist[i].filters.length > 0) {
for (let j = 0; j < filterGrouplist[i].filters.length; j++) {
filterGrouplist[i].filters[j].num = j
}
}
}
setTreeData(tree(data.tree))
setHeaderName(data.title)
setShowHeader(data.showHeader)
setFilterGroup(filterGrouplist)
setTemplate(data.template)
}
})
} else {
dispatch(push('/callService'));
}
})
}, [])
return (
<div style={{ width: '100%', height: '100%' }}>
{treeData ? <VideoScreen
treeData={treeData}
headerName={headerName}
showHeader={showHeader}
filterGroup={filterGroup}
template={template}
videoPlay={videoPlay} /> : ""}
</div>
)
}
function mapStateToProps (state) {
const { auth, global, members } = state;
console.log('ccccccccccc', state)
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
global: global,
members: members.data,
};
}
export default connect(mapStateToProps)(CallService);

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

@ -2,5 +2,6 @@
import Mirroring from './mirroring'; import Mirroring from './mirroring';
import MirroringDetail from './mirroringDetail'; import MirroringDetail from './mirroringDetail';
import CallService from './callService';
export { Mirroring,MirroringDetail}; export { Mirroring,MirroringDetail,CallService};

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

@ -5,6 +5,56 @@ import { Tree, Popconfirm, Typography, Input, Switch, Modal, Checkbox, CheckboxG
import VideoScreen from '../components/videoScreen'; import VideoScreen from '../components/videoScreen';
import { set } from 'nprogress'; import { set } from 'nprogress';
export const tree= (res)=>{
let mytreeData = res
for (let i = 0; i < mytreeData.length; i++) {//
mytreeData[i].value = mytreeData[i].key
for (let j = 0; j < mytreeData[i].children.length; j++) {//
mytreeData[i].children[j].value = mytreeData[i].children[j].key
if (mytreeData[i].children[j].camera) {
if (mytreeData[i].children[j].camera.type == 'yingshi') {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = mytreeData[i].children[j].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = null
}
}
else {
for (let k = 0; k < mytreeData[i].children[j].children.length; k++) {//
mytreeData[i].children[j].children[k].value = mytreeData[i].children[j].children[k].key
if (mytreeData[i].children[j].children[k].camera) {
if (mytreeData[i].children[j].children[k].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = mytreeData[i].children[j].children[k].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = null
}
}
else {
for (let l = 0; l < mytreeData[i].children[j].children[k].children.length; l++) {
mytreeData[i].children[j].children[k].children[l].value = mytreeData[i].children[j].children[k].children[l].key
if (mytreeData[i].children[j].children[k].children[l].camera) {
if (mytreeData[i].children[j].children[k].children[l].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = mytreeData[i].children[j].children[k].children[l].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = null
}
}
}
}
}
}
}
}
return mytreeData
}
const MirroringDetail = (props) => { const MirroringDetail = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props; const { history, dispatch, actions, user, loading, StatusPushList } = props;
@ -32,54 +82,9 @@ const MirroringDetail = (props) => {
setMirrorId(res.payload.data.id);//id setMirrorId(res.payload.data.id);//id
setShowHeader(res.payload.data.showHeader); setShowHeader(res.payload.data.showHeader);
setHeaderName(res.payload.data.title); setHeaderName(res.payload.data.title);
let mytreeData = res.payload.data.tree
for (let i = 0; i < mytreeData.length; i++) {// let mytreeDatas= tree(res.payload.data.tree)
mytreeData[i].value = mytreeData[i].key setTreeData(mytreeDatas);
for (let j = 0; j < mytreeData[i].children.length; j++) {//
mytreeData[i].children[j].value = mytreeData[i].children[j].key
if (mytreeData[i].children[j].camera) {
if (mytreeData[i].children[j].camera.type == 'yingshi') {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = mytreeData[i].children[j].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].camera.content = mytreeData[i].children[j].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].camera.yingshiToken = null
}
}
else {
for (let k = 0; k < mytreeData[i].children[j].children.length; k++) {//
mytreeData[i].children[j].children[k].value = mytreeData[i].children[j].children[k].key
if (mytreeData[i].children[j].children[k].camera) {
if (mytreeData[i].children[j].children[k].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = mytreeData[i].children[j].children[k].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].camera.content = mytreeData[i].children[j].children[k].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].camera.yingshiToken = null
}
}
else {
for (let l = 0; l < mytreeData[i].children[j].children[k].children.length; l++) {
mytreeData[i].children[j].children[k].children[l].value = mytreeData[i].children[j].children[k].children[l].key
if (mytreeData[i].children[j].children[k].children[l].camera) {
if (mytreeData[i].children[j].children[k].children[l].camera.type == 'yingshi') {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = mytreeData[i].children[j].children[k].children[l].camera.secretYingshi.token
}
else {
mytreeData[i].children[j].children[k].children[l].camera.content = mytreeData[i].children[j].children[k].children[l].camera.cameraRemarks.map(v => v.remark),
mytreeData[i].children[j].children[k].children[l].camera.yingshiToken = null
}
}
}
}
}
}
}
}
setTreeData(mytreeData);
}) })
} }
equipmentGetCamera(); equipmentGetCamera();

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

@ -1,5 +1,5 @@
'use strict'; 'use strict';
import { Mirroring,MirroringDetail } from './containers'; import { Mirroring,MirroringDetail,CallService } from './containers';
export default [{ export default [{
type: 'inner', type: 'inner',
@ -22,4 +22,11 @@ export default [{
key: 'MirroringDetail', key: 'MirroringDetail',
component: MirroringDetail, component: MirroringDetail,
} }
},{
type: 'outer',
route: {
path: '/callService',
key: 'CallService',
component: CallService,
}
}]; }];

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

@ -77,6 +77,8 @@ export const ApiTable = {
putMirrorPublish: 'mirror/{mirrorId}/publish', //发布镜像信息 putMirrorPublish: 'mirror/{mirrorId}/publish', //发布镜像信息
getMirror: 'mirror/{mid}', //获取指定镜像信息 getMirror: 'mirror/{mid}', //获取指定镜像信息
putMirror: 'mirror', //编辑镜像信息 putMirror: 'mirror', //编辑镜像信息
getMirrorMid:'mirror/{mid}' , //获取指定镜像信息
}; };

Loading…
Cancel
Save