diff --git a/code/VideoAccess-VCMP/api/config.js b/code/VideoAccess-VCMP/api/config.js index b551f6f..151559d 100644 --- a/code/VideoAccess-VCMP/api/config.js +++ b/code/VideoAccess-VCMP/api/config.js @@ -101,7 +101,8 @@ const product = { { p: '/status/alarm', o: 'POST' }, { p: '/camera/unique/all', o: 'GET' }, { p: '/status/alarm/confirm', o: 'PUT' }, - { p: '/status/check', o: 'GET' } + { p: '/status/check', o: 'GET' }, + { p: '/mirror/:mirrorId', o: 'GET' }, ], // 不做认证的路由，也可以使用 exclude: ["*"] 跳过所有路由 redis: { host: IOTA_REDIS_SERVER_HOST, diff --git a/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx index 576ae3e..a24d152 100644 --- a/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx +++ b/code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx @@ -49,7 +49,7 @@ const LayoutContainer = props => { useEffect(() => { NProgress.done(); - if ((!user || !user.authorized) && !authCrossLoading && props.location.pathname != '/video_play_status') { + if ((!user || !user.authorized) && !authCrossLoading && props.location.pathname != '/video_play_status'&& props.location.pathname != '/callService') { history.push('/signin'); } if (msg) { diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js b/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js index c557566..04b1725 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js @@ -111,14 +111,27 @@ export function getErrorCode (query) {//查取指定状态码信息 } -export function getMirrorMid (orgId) {//获取指定镜像信息 +export function getMirrorMid (orgId,query) {//获取指定镜像信息 return (dispatch) => basicAction({ type: "get", + query, dispatch: dispatch, actionType: "GET_MIRRORMID", url: `${ApiTable.getMirrorMid.replace("{mid}", orgId)}`, msg: { option: "" }, reducer: { name: "" }, }) +} + +export function putUpdateMid (orgId) { //编辑推送配置 + return (dispatch) => + basicAction({ + type: "put", + dispatch: dispatch, + actionType: "PUT_UPDATE_MID", + url: `${ApiTable.putUpdateMid.replace('{mirrorId}', orgId)}`, + msg: { option: '更新镜像服务ID' }, + reducer: {}, + }); } \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx index 06b4cd5..d1c70b2 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx @@ -2,12 +2,14 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { tree } from './mirroringDetail'; import VideoScreen from '../components/videoScreen'; - +import { push } from 'react-router-redux'; +import qs from "qs"; +import { Notification } from '@douyinfe/semi-ui'; const CallService = (props) => { - const { dispatch, actions, user } = props + const { dispatch, actions, user, } = props const [treeData, setTreeData] = useState([]) //树形控件数据 const [headerName, setHeaderName] = useState('dfvbfdbe') const [showHeader, setShowHeader] = useState(true) //是否展示头部 @@ -16,32 +18,30 @@ const CallService = (props) => { 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 - } - } + const mid = qs.parse(props.location.search.slice(1))?.mid + dispatch(actions.openness.getMirrorMid(user?.mid || mid, { check: true })).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) } - }) + } + setTreeData(tree(data.tree)) + setHeaderName(data.title) + setShowHeader(data.showHeader) + setFilterGroup(filterGrouplist) + setTemplate(data.template) } else { - dispatch(push('/callService')); + dispatch(push('/noMatch')) + Notification.error({ + content: '获取镜像服务失败', + duration: 3, + }) } }) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx index 52b2577..2c79eff 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx @@ -2,298 +2,332 @@ import React, { useEffect, useState, useRef } from 'react'; import { connect } from 'react-redux'; import { push } from 'react-router-redux'; import '../style.less' -import { Notification, Popconfirm } from "@douyinfe/semi-ui"; +import { Notification, Popconfirm, Modal } from "@douyinfe/semi-ui"; import copy from "copy-to-clipboard"; import moment from "moment"; +import { IconRefresh } from '@douyinfe/semi-icons'; const Mirroring = (props) => { - const { history, dispatch, actions, user, loading, StatusPushList } = props; - const { openness } = actions; - const detailList = useRef([ - { - title: '科技蓝', - img: '/assets/images/imageImg/textblue.png', - color: 'blue' - }, { - title: '静谧白', - img: '/assets/images/imageImg/textwhite.png', - color: 'white' - }, { - title: '神秘黑', - img: '/assets/images/imageImg/textblack.png', - color: 'black' - }, - ]); + const { history, dispatch, actions, user, loading, StatusPushList } = props; + const { openness } = actions; + const detailList = useRef([ + { + title: '科技蓝', + img: '/assets/images/imageImg/textblue.png', + color: 'blue' + }, { + title: '静谧白', + img: '/assets/images/imageImg/textwhite.png', + color: 'white' + }, { + title: '神秘黑', + img: '/assets/images/imageImg/textblack.png', + color: 'black' + }, + ]); - const [myCustomList, setMyCustomList] = useState([])//我的自定义镜像服务 - useEffect(() => { - getMirror() - }, []); - function getMirror () { - dispatch(openness.getMirrorList()).then((res) => { - setMyCustomList(res.payload.data) - }) - } - const [maskNum, setMaskNum] = useState(1000); - function mouseOver (index) {//鼠标移入 - setMaskNum(index) - } - function mouseOut () {//鼠标移开 - setMaskNum(1000) - } - function todetail (color) {//去模板内部 - dispatch(push('/mirroring_detail'+'?template='+color)); - } - function tomirrordetail(mid,template){ - dispatch(push('/mirroring_detail'+'?template='+template+'&mid='+mid)); - } - function todelete (id) {//删除我的自定义镜像服务 - dispatch(openness.delMirror(id)).then((res) => { - getMirror() - }) - } - function tocopy (id) { - dispatch(openness.putMirrorCopy(id)).then((res) => { - getMirror() - }) - } - function topublish(id){ - dispatch(openness.putMirrorPublish(id)).then((res) => { - getMirror() - }) - } - function getTime(date){ - if(date){ - let year = moment(date).year() + '-' - let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '-' : '0' + (moment(date).month() + 1) + '-' - let day = moment(date).date() > 10 ? moment(date).date() : '0' + moment(date).date(); - let hour = moment(date).hour() > 10 ? moment(date).hour() : '0' + moment(date).hour(); - let minute = moment(date).minute() > 10 ? moment(date).minute() : '0' + moment(date).minute(); - let second = moment(date).second() > 10 ? moment(date).second() : '0' + moment(date).second(); - return year + month+day + ' ' + hour + ':' + minute + ':' + second - } - else{ - return '' - } - } - return ( - <> -
-
创建步骤
-
-
- 设置 -
-
-
创建镜像模板
-
选择样式模板
-
-
- 设置 -
-
- 设置 -
-
-
节点配置
-
创建节点及设备树
-
-
- 设置 -
-
- 设置 -
-
-
发布镜像
-
发布成功后，获取镜像服务ID
-
-
- 设置 -
-
+ const [myCustomList, setMyCustomList] = useState([])//我的自定义镜像服务 + const [isUpdate, setIsUpate] = useState(false) + const [updateId, setUpdateId] = useState() + useEffect(() => { + getMirror() + }, []); + function getMirror () { + dispatch(openness.getMirrorList()).then((res) => { + setMyCustomList(res.payload.data) + }) + } + const [maskNum, setMaskNum] = useState(1000); + function mouseOver (index) {//鼠标移入 + setMaskNum(index) + } + function mouseOut () {//鼠标移开 + setMaskNum(1000) + } + function todetail (color) {//去模板内部 + dispatch(push('/mirroring_detail' + '?template=' + color)); + } + function tomirrordetail (mid, template) { + dispatch(push('/mirroring_detail' + '?template=' + template + '&mid=' + mid)); + } + function todelete (id) {//删除我的自定义镜像服务 + dispatch(openness.delMirror(id)).then((res) => { + getMirror() + }) + } + function tocopy (id) { + dispatch(openness.putMirrorCopy(id)).then((res) => { + getMirror() + }) + } + function topublish (id) { + dispatch(openness.putMirrorPublish(id)).then((res) => { + getMirror() + }) + } + function getTime (date) { + if (date) { + let year = moment(date).year() + '-' + let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '-' : '0' + (moment(date).month() + 1) + '-' + let day = moment(date).date() > 10 ? moment(date).date() : '0' + moment(date).date(); + let hour = moment(date).hour() > 10 ? moment(date).hour() : '0' + moment(date).hour(); + let minute = moment(date).minute() > 10 ? moment(date).minute() : '0' + moment(date).minute(); + let second = moment(date).second() > 10 ? moment(date).second() : '0' + moment(date).second(); + return year + month + day + ' ' + hour + ':' + minute + ':' + second + } + else { + return '' + } + } + return ( + <> +
+
创建步骤
+
+
+ 设置 +
+
+
创建镜像模板
+
选择样式模板
+
+
+ 设置 +
+
+ 设置 +
+
+
节点配置
+
创建节点及设备树
+
+
+ 设置 +
+
+ 设置 +
+
+
发布镜像
+
发布成功后，获取镜像服务ID
+
+
+ 设置 +
+
+ 设置 +
+
+
调用服务
+
通过服务ID调用镜像服务
+
API调用镜像服务方法 + 设置 +
+
+
+
+
+
应用详情
+
+ {detailList.current.map((item, index) => { + return ( +
+
mouseOver(index)}> + 设置 + {maskNum == index ? (
mouseOut()} onClick={() => todetail(item.color)} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> +
+ 使用该模版 +
+
) : ''} +
+
+
+ 设置 +
+
+ {item.title} +
+
+
+ ) + })} +
+
+
+
+
我的自定义镜像服务
+
+ 共{myCustomList.length}份 +
+
+
+ {myCustomList.map((item, index) => { + return ( +
设置 { tomirrordetail(item.mid, item.template) }} /> -
-
-
调用服务
-
通过服务ID调用镜像服务
-
API调用镜像服务方法 - 设置 +
+ {item.title}
-
-
-
-
-
应用详情
-
- {detailList.current.map((item, index) => { - return ( -
-
mouseOver(index)}> +
+
topublish(item.id)}> +
+ 设置 +
+
+ 发布 +
+
+
tocopy(item.id)}> +
+ 设置 +
+
+ 复制 +
+
+ todelete(item.id)}> +
+
设置 - {maskNum == index ? (
mouseOut()} onClick={() => todetail(item.color)} style={{ position: 'absolute', width: '100%', height: '100%', background: 'rgba(0,0,0,0.3)', top: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }}> -
- 使用该模版 -
-
) : ''} -
-
-
- 设置 -
-
- {item.title} -
-
-
- ) - })} -
-
-
-
-
我的自定义镜像服务
-
- 共{myCustomList.length}份 -
-
-
- {myCustomList.map((item, index) => { - return ( -
- 设置 {tomirrordetail(item.mid,item.template)}} - /> -
- {item.title} -
-
-
topublish(item.id)}> -
- 设置 -
-
- 发布 -
-
-
tocopy(item.id)}> -
- 设置 -
-
- 复制 -
-
- todelete(item.id)}> -
-
- 设置 -
-
- 删除 -
-
- -
-
- 最后编辑于：{getTime(item.updateTime)||getTime(item.createTime)} -
-
- 最后发布于：{getTime(item.publishTime)} -
-
-
{ - copy(item.mid ? item.mid : "暂无id"); - Notification.success({ - content: "复制成功", - duration: 2, - }) - }}> - 设置 -
-
- ID:{item.mid} -
-
-
- ) - })} -
+
+
+ 删除 +
+
+ +
+
+ 最后编辑于：{getTime(item.updateTime) || getTime(item.createTime)} +
+
+ 最后发布于：{getTime(item.publishTime)} +
+
+ { + setIsUpate(true) + setUpdateId(item.id) + }} /> +
{ + const url = document.location?.toString()?.split("/") || [] + copy(item.mid ? `${url[0] + '//' + url[2] + '/callService?mid=' + item.mid}` : "暂无id"); + Notification.success({ + content: "复制成功", + duration: 2, + }) + }}> + 设置 +
+
+ ID:{item.mid} +
+
+
+ ) + })}
- - ) +
+ {isUpdate ? { + dispatch(openness.putUpdateMid(updateId)).then(res => { + if (res.success) { + myCustomList?.forEach(v => { + if (v.id == updateId) { + v.mid = res.payload.data?.mid + } + }) + setMyCustomList([...myCustomList]) + setIsUpate(false) + setUpdateId('') + } + }) + }} + onCancel={() => { + setIsUpate(false) + setUpdateId('') + }} + closeOnEsc={true} + > + 更新镜像服务的mid后，历史复制的镜像播放地址无效，需复制新的镜像地址。 + : "" + } + + ) } function mapStateToProps (state) { - const { auth, global } = state; - return { - user: auth.user, - actions: global.actions, - }; + const { auth, global } = state; + return { + user: auth.user, + actions: global.actions, + }; } export default connect(mapStateToProps)(Mirroring); diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index b12f0c2..d2f8278 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -78,6 +78,7 @@ export const ApiTable = { getMirror: 'mirror/{mid}', //获取指定镜像信息 putMirror: 'mirror', //编辑镜像信息 getMirrorMid:'mirror/{mid}' , //获取指定镜像信息 + putUpdateMid:'mirror/{mirrorId}/id', //更新镜像服务ID };