free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

镜像

dev_trial
wenlele 2 years ago
parent
d53e3ef2d0
commit
439bf94ef6
6 changed files with 355 additions and 306 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      code/VideoAccess-VCMP/api/config.js
  2. 2
      code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
  3. 15
      code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
  4. 50
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx
  5. 590
      code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
  6. 1
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

3
code/VideoAccess-VCMP/api/config.js
View File

@ -101,7 +101,8 @@ const product = {
{ p: '/status/alarm', o: 'POST' }, { p: '/status/alarm', o: 'POST' },
{ p: '/camera/unique/all', o: 'GET' }, { p: '/camera/unique/all', o: 'GET' },
{ p: '/status/alarm/confirm', o: 'PUT' }, { p: '/status/alarm/confirm', o: 'PUT' },
{ p: '/status/check', o: 'GET' } { p: '/status/check', o: 'GET' },
{ p: '/mirror/:mirrorId', o: 'GET' },
], // 不做认证的路由，也可以使用 exclude: ["*"] 跳过所有路由 ], // 不做认证的路由，也可以使用 exclude: ["*"] 跳过所有路由
redis: { redis: {
host: IOTA_REDIS_SERVER_HOST, host: IOTA_REDIS_SERVER_HOST,

2
code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
View File

@ -49,7 +49,7 @@ const LayoutContainer = props => {
useEffect(() => { useEffect(() => {
NProgress.done(); 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'); history.push('/signin');
} }
if (msg) { if (msg) {

15
code/VideoAccess-VCMP/web/client/src/sections/openness/actions/mirroring.js
View File

@ -111,14 +111,27 @@ export function getErrorCode (query) {//查取指定状态码信息
} }
export function getMirrorMid (orgId) {//获取指定镜像信息 export function getMirrorMid (orgId,query) {//获取指定镜像信息
return (dispatch) => return (dispatch) =>
basicAction({ basicAction({
type: "get", type: "get",
query,
dispatch: dispatch, dispatch: dispatch,
actionType: "GET_MIRRORMID", actionType: "GET_MIRRORMID",
url: `${ApiTable.getMirrorMid.replace("{mid}", orgId)}`, url: `${ApiTable.getMirrorMid.replace("{mid}", orgId)}`,
msg: { option: "" }, msg: { option: "" },
reducer: { name: "" }, 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: {},
});
} }

50
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/callService.jsx
View File

@ -2,12 +2,14 @@ import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { tree } from './mirroringDetail'; import { tree } from './mirroringDetail';
import VideoScreen from '../components/videoScreen'; 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 CallService = (props) => {
const { dispatch, actions, user } = props const { dispatch, actions, user, } = props
const [treeData, setTreeData] = useState([]) //树形控件数据 const [treeData, setTreeData] = useState([]) //树形控件数据
const [headerName, setHeaderName] = useState('dfvbfdbe') const [headerName, setHeaderName] = useState('dfvbfdbe')
const [showHeader, setShowHeader] = useState(true) //是否展示头部 const [showHeader, setShowHeader] = useState(true) //是否展示头部
@ -16,32 +18,30 @@ const CallService = (props) => {
const [videoPlay, setVideoPlay] = useState(true) //视频预览 const [videoPlay, setVideoPlay] = useState(true) //视频预览
useEffect(() => { useEffect(() => {
const mid = qs.parse(props.location.search.slice(1))?.mid
dispatch(actions.openness.getMirrorMid(user?.mid || mid, { check: true })).then((r) => {
dispatch(actions.openness.getMirrorList()).then((res) => { if (r?.success) {
if (res?.success && res?.payload?.data?.some(v => v.mid == user?.mid)) { let data = r?.payload?.data || {}
dispatch(actions.openness.getMirrorMid(user?.mid)).then((r) => { let filterGrouplist = data.filterGroup
if (r?.success) { for (let i = 0; i < filterGrouplist.length; i++) {
let data = r?.payload?.data || {} filterGrouplist[i].num = i
if (filterGrouplist[i].filters.length > 0) {
let filterGrouplist =data.filterGroup for (let j = 0; j < filterGrouplist[i].filters.length; j++) {
for (let i = 0; i < filterGrouplist.length; i++) { filterGrouplist[i].filters[j].num = j
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 { } else {
dispatch(push('/callService')); dispatch(push('/noMatch'))
Notification.error({
content: '获取镜像服务失败',
duration: 3,
})
} }
}) })

590
code/VideoAccess-VCMP/web/client/src/sections/openness/containers/mirroring.jsx
View File

@ -2,298 +2,332 @@ import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import '../style.less' 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 copy from "copy-to-clipboard";
import moment from "moment"; import moment from "moment";
import { IconRefresh } from '@douyinfe/semi-icons';
const Mirroring = (props) => { const Mirroring = (props) => {
const { history, dispatch, actions, user, loading, StatusPushList } = props; const { history, dispatch, actions, user, loading, StatusPushList } = props;
const { openness } = actions; const { openness } = actions;
const detailList = useRef([ const detailList = useRef([
{ {
title: '科技蓝', title: '科技蓝',
img: '/assets/images/imageImg/textblue.png', img: '/assets/images/imageImg/textblue.png',
color: 'blue' color: 'blue'
}, { }, {
title: '静谧白', title: '静谧白',
img: '/assets/images/imageImg/textwhite.png', img: '/assets/images/imageImg/textwhite.png',
color: 'white' color: 'white'
}, { }, {
title: '神秘黑', title: '神秘黑',
img: '/assets/images/imageImg/textblack.png', img: '/assets/images/imageImg/textblack.png',
color: 'black' color: 'black'
}, },
]); ]);
const [myCustomList, setMyCustomList] = useState([])//我的自定义镜像服务 const [myCustomList, setMyCustomList] = useState([])//我的自定义镜像服务
useEffect(() => { const [isUpdate, setIsUpate] = useState(false)
getMirror() const [updateId, setUpdateId] = useState()
}, []); useEffect(() => {
function getMirror () { getMirror()
dispatch(openness.getMirrorList()).then((res) => { }, []);
setMyCustomList(res.payload.data) function getMirror () {
}) dispatch(openness.getMirrorList()).then((res) => {
} setMyCustomList(res.payload.data)
const [maskNum, setMaskNum] = useState(1000); })
function mouseOver (index) {//鼠标移入 }
setMaskNum(index) const [maskNum, setMaskNum] = useState(1000);
} function mouseOver (index) {//鼠标移入
function mouseOut () {//鼠标移开 setMaskNum(index)
setMaskNum(1000) }
} function mouseOut () {//鼠标移开
function todetail (color) {//去模板内部 setMaskNum(1000)
dispatch(push('/mirroring_detail'+'?template='+color)); }
} function todetail (color) {//去模板内部
function tomirrordetail(mid,template){ dispatch(push('/mirroring_detail' + '?template=' + color));
dispatch(push('/mirroring_detail'+'?template='+template+'&mid='+mid)); }
} function tomirrordetail (mid, template) {
function todelete (id) {//删除我的自定义镜像服务 dispatch(push('/mirroring_detail' + '?template=' + template + '&mid=' + mid));
dispatch(openness.delMirror(id)).then((res) => { }
getMirror() function todelete (id) {//删除我的自定义镜像服务
}) dispatch(openness.delMirror(id)).then((res) => {
} getMirror()
function tocopy (id) { })
dispatch(openness.putMirrorCopy(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 topublish (id) {
}) dispatch(openness.putMirrorPublish(id)).then((res) => {
} getMirror()
function getTime(date){ })
if(date){ }
let year = moment(date).year() + '-' function getTime (date) {
let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '-' : '0' + (moment(date).month() + 1) + '-' if (date) {
let day = moment(date).date() > 10 ? moment(date).date() : '0' + moment(date).date(); let year = moment(date).year() + '-'
let hour = moment(date).hour() > 10 ? moment(date).hour() : '0' + moment(date).hour(); let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '-' : '0' + (moment(date).month() + 1) + '-'
let minute = moment(date).minute() > 10 ? moment(date).minute() : '0' + moment(date).minute(); let day = moment(date).date() > 10 ? moment(date).date() : '0' + moment(date).date();
let second = moment(date).second() > 10 ? moment(date).second() : '0' + moment(date).second(); let hour = moment(date).hour() > 10 ? moment(date).hour() : '0' + moment(date).hour();
return year + month+day + ' ' + hour + ':' + minute + ':' + second 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();
else{ return year + month + day + ' ' + hour + ':' + minute + ':' + second
return '' }
} else {
} return ''
return ( }
<> }
<div style={{ height: 171, background: '#FFFFFF' }}> return (
<div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>创建步骤</div> <>
<div style={{ marginTop: 2, display: 'flex', width: "100%", alignItems: 'center' }}> <div style={{ height: 171, background: '#FFFFFF' }}>
<div style={{ width: '4.513%', marginLeft: '5.549%' }}> <div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>创建步骤</div>
<img <div style={{ marginTop: 2, display: 'flex', width: "100%", alignItems: 'center' }}>
src="/assets/images/imageImg/stepone.png" <div style={{ width: '4.513%', marginLeft: '5.549%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/stepone.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> />
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div> </div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>选择样式模板</div> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div>
<div style={{ width: '6.281%' }}> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>选择样式模板</div>
<img </div>
src="/assets/images/imageImg/nextStep.png" <div style={{ width: '6.281%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/nextStep.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ width: '4.513%', marginLeft: '4.086%' }}> />
<img </div>
src="/assets/images/imageImg/steptwo.png" <div style={{ width: '4.513%', marginLeft: '4.086%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/steptwo.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}> />
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div> </div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>创建节点及设备树</div> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div>
<div style={{ width: '6.281%' }}> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>创建节点及设备树</div>
<img </div>
src="/assets/images/imageImg/nextStep.png" <div style={{ width: '6.281%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/nextStep.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ width: '4.513%', marginLeft: '5.183%' }}> />
<img </div>
src="/assets/images/imageImg/stepthree.png" <div style={{ width: '4.513%', marginLeft: '5.183%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/stepthree.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}> />
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div> </div>
<div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>发布成功后，获取镜像服务ID</div> <div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}>
</div> <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div>
<div style={{ width: '6.281%' }}> <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.45)' }}>发布成功后，获取镜像服务ID</div>
<img </div>
src="/assets/images/imageImg/nextStep.png" <div style={{ width: '6.281%' }}>
alt="设置" <img
style={{ width: '100%' }} src="/assets/images/imageImg/nextStep.png"
/> alt="设置"
</div> style={{ width: '100%' }}
<div style={{ width: '4.513%', marginLeft: '5.549%' }}> />
</div>
<div style={{ width: '4.513%', marginLeft: '5.549%' }}>
<img
src="/assets/images/imageImg/stepfour.png"
alt="设置"
style={{ width: '100%' }}
/>
</div>
<div style={{ marginLeft: '0.854%', marginTop: 16 }}>
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</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调用镜像服务方法
<img
src="/assets/images/imageImg/question.png"
alt="设置"
style={{ width: 11, height: 11, marginLeft: 3 }}
/>
</div>
</div>
</div>
</div>
<div style={{ background: '#FFFFFF', marginTop: 20 }}>
<div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>应用详情</div>
<div style={{ display: 'flex', padding: '34px 64px 18px 64px', flexWrap: 'wrap', }}>
{detailList.current.map((item, index) => {
return (
<div key={index} style={{ marginRight: 84 }}>
<div style={{ position: 'relative', width: '306px', height: 142, boxShadow: '0px 2px 4px 0px rgba(231,231,231,0.5)', }} onMouseOver={() => mouseOver(index)}>
<img
src={item.img}
alt="设置"
style={{ width: '306px', height: 142 }}
/>
{maskNum == index ? (<div onMouseOut={() => 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' }}>
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
使用该模版
</div>
</div>) : ''}
</div>
<div style={{ marginTop: 11, display: 'flex', alignItems: 'center' }}>
<div style={{ marginRight: 4 }}>
<img
src="/assets/images/imageImg/detail_icon.png"
alt="设置"
style={{ width: 26, height: 26 }}
/>
</div>
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 16 }}>
{item.title}
</div>
</div>
</div>
)
})}
</div>
</div>
<div style={{ background: '#FFFFFF', marginTop: 27 }}>
<div style={{ padding: '18px 0px 0px 20px', display: 'flex', alignItems: 'center' }}>
<div style={{ color: '#34383E', fontSize: 20, fontWeight: 600 }}>我的自定义镜像服务</div>
<div style={{ height: 20, border: '1px solid #1859C1', padding: '0px 12px', fontSize: 14, color: '#1859C1', marginLeft: 4, borderRadius: 2, display: 'flex', alignItems: 'center' }}>
共{myCustomList.length}份
</div>
</div>
<div style={{ display: 'flex', padding: '19px 6px 39px 64px', flexWrap: 'wrap' }}>
{myCustomList.map((item, index) => {
return (
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16, marginRight: 26, marginBottom: 40 }} key={index}>
<img <img
src="/assets/images/imageImg/stepfour.png" src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'}
alt="设置" alt="设置"
style={{ width: '100%' }} style={{ width: 330, height: 153, cursor: 'pointer' }}
onClick={() => { tomirrordetail(item.mid, item.template) }}
/> />
</div> <div style={{ color: '#2F2F2F', fontSize: 16, width: 300, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>
<div style={{ marginLeft: '0.854%', marginTop: 16 }}> {item.title}
<div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>调用服务</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调用镜像服务方法
<img
src="/assets/images/imageImg/question.png"
alt="设置"
style={{ width: 11, height: 11, marginLeft: 3 }}
/>
</div> </div>
</div> <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 10 }}>
</div> <div style={{ display: 'flex', cursor: 'pointer' }} onClick={() => topublish(item.id)}>
</div> <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ background: '#FFFFFF', marginTop: 20 }}> <img
<div style={{ padding: '18px 0px 0px 20px', color: '#34383E', fontSize: 20, fontWeight: 600 }}>应用详情</div> src="/assets/images/imageImg/release.png"
<div style={{ display: 'flex', padding: '34px 64px 18px 64px', flexWrap: 'wrap', }}> alt="设置"
{detailList.current.map((item, index) => { style={{ width: 16, height: 16 }}
return ( />
<div key={index} style={{ marginRight: 84 }}> </div>
<div style={{ position: 'relative', width: '306px', height: 142, boxShadow: '0px 2px 4px 0px rgba(231,231,231,0.5)', }} onMouseOver={() => mouseOver(index)}> <div style={{ color: '#1859C1', fontSize: 14, margin: '0px 10px' }}>
发布
</div>
</div>
<div style={{ display: 'flex', cursor: 'pointer' }} onClick={() => tocopy(item.id)}>
<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>
<Popconfirm
title="删除会导致正在使用该镜像应用的服务丢失，请谨慎操作！"
arrowPointAtCenter={false}
showArrow={true}
position="topRight"
onConfirm={() => todelete(item.id)}>
<div style={{ display: 'flex', cursor: 'pointer' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<img <img
src={item.img} src="/assets/images/imageImg/del.png"
alt="设置" alt="设置"
style={{ width: '306px', height: 142 }} style={{ width: 16, height: 16 }}
/> />
{maskNum == index ? (<div onMouseOut={() => 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' }}> </div>
<div style={{ width: 127, height: 33, border: '1px solid #FFFFFF', borderRadius: 4, color: '#ffffff', fontSize: 14, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }}>
使用该模版 删除
</div> </div>
</div>) : ''} </div>
</div> </Popconfirm>
<div style={{ marginTop: 11, display: 'flex', alignItems: 'center' }}> </div>
<div style={{ marginRight: 4 }}> <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
<img 最后编辑于：{getTime(item.updateTime) || getTime(item.createTime)}
src="/assets/images/imageImg/detail_icon.png" </div>
alt="设置" <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
style={{ width: 26, height: 26 }} 最后发布于：{getTime(item.publishTime)}
/> </div>
</div> <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ color: 'rgba(0,0,0,0.65)', fontSize: 16 }}> <IconRefresh style={{ color: 'rgb(74 129 205 / 93%)', marginRight: 4 }} onClick={() => {
{item.title} setIsUpate(true)
</div> setUpdateId(item.id)
</div> }} />
</div> <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => {
) const url = document.location?.toString()?.split("/") || []
})} copy(item.mid ? `${url[0] + '//' + url[2] + '/callService?mid=' + item.mid}` : "暂无id");
</div> Notification.success({
</div> content: "复制成功",
<div style={{ background: '#FFFFFF', marginTop: 27 }}> duration: 2,
<div style={{ padding: '18px 0px 0px 20px', display: 'flex', alignItems: 'center' }}> })
<div style={{ color: '#34383E', fontSize: 20, fontWeight: 600 }}>我的自定义镜像服务</div> }}>
<div style={{ height: 20, border: '1px solid #1859C1', padding: '0px 12px', fontSize: 14, color: '#1859C1', marginLeft: 4, borderRadius: 2, display: 'flex', alignItems: 'center' }}> <img
共{myCustomList.length}份 src="/assets/images/imageImg/idCopy.png"
</div> alt="设置"
</div> style={{ width: 20, height: 20 }}
<div style={{ display: 'flex', padding: '19px 6px 39px 64px', flexWrap: 'wrap' }}> />
{myCustomList.map((item, index) => { </div>
return ( <div style={{ marginLeft: 4, background: '#1859C1', padding: '2px 8px', color: '#FFFFFF', fontSize: 12, borderRadius: 2 }}>
<div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16, marginRight: 26, marginBottom: 40 }} key={index}> ID:{item.mid}
<img </div>
src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'} </div>
alt="设置" </div>
style={{ width: 330, height: 153, cursor: 'pointer' }} )
onClick={() => {tomirrordetail(item.mid,item.template)}} })}
/>
<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' }} onClick={()=>topublish(item.id)}>
<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' }} onClick={() => tocopy(item.id)}>
<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>
<Popconfirm
title="删除会导致正在使用该镜像应用的服务丢失，请谨慎操作！"
arrowPointAtCenter={false}
showArrow={true}
position="topRight"
onConfirm={() => todelete(item.id)}>
<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>
</Popconfirm>
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
最后编辑于：{getTime(item.updateTime)||getTime(item.createTime)}
</div>
<div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
最后发布于：{getTime(item.publishTime)}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => {
copy(item.mid ? item.mid : "暂无id");
Notification.success({
content: "复制成功",
duration: 2,
})
}}>
<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.mid}
</div>
</div>
</div>
)
})}
</div>
</div> </div>
</> </div>
) {isUpdate ? <Modal
title="更新mid"
visible={true}
onOk={() => {
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后，历史复制的镜像播放地址无效，需复制新的镜像地址。
</Modal> : ""
}
</>
)
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
}; };
} }
export default connect(mapStateToProps)(Mirroring); export default connect(mapStateToProps)(Mirroring);

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

@ -78,6 +78,7 @@ export const ApiTable = {
getMirror: 'mirror/{mid}', //获取指定镜像信息 getMirror: 'mirror/{mid}', //获取指定镜像信息
putMirror: 'mirror', //编辑镜像信息 putMirror: 'mirror', //编辑镜像信息
getMirrorMid:'mirror/{mid}' , //获取指定镜像信息 getMirrorMid:'mirror/{mid}' , //获取指定镜像信息
putUpdateMid:'mirror/{mirrorId}/id', //更新镜像服务ID
}; };

Write Preview
Loading…
Cancel
Save