镜像服务接口联调

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

@@ -45,9 +45,54 @@ export function delMirror(orgId) {//删除镜像信息
         url: `${ApiTable.delMirror.replace("{mirrorId}", orgId)}`,
         msg: {
           option:
-            "删除推送配置",
+            "删除镜像信息",
         },
         reducer: { name: "" },
     });
 }
-// putMirrorCopy
+export function putMirrorCopy(orgId) { //编辑推送配置
+    return (dispatch) =>
+      basicAction({
+        type: "put",
+        dispatch: dispatch,
+        actionType: "PUT_MIRROR_COPY",
+        url: `${ApiTable.putMirrorCopy.replace("{mirrorId}", orgId)}`,
+        msg: { option: '复制镜像信息' },
+        reducer: {},
+    });
+}
+export function putMirrorPublish(orgId) { //编辑推送配置
+    return (dispatch) =>
+      basicAction({
+        type: "put",
+        dispatch: dispatch,
+        actionType: "PUT_MIRROR_PUBLISH",
+        url: `${ApiTable.putMirrorPublish.replace("{mirrorId}", orgId)}`,
+        msg: { option: '发布镜像信息' },
+        reducer: {},
+    });
+}
+
+export function getMirrorDetail(orgId) {//获取摄像头能力列表
+    return (dispatch) =>
+      basicAction({
+        type: "get",
+        dispatch: dispatch,
+        actionType: "GET_MIRROR",
+        url: `${ApiTable.getMirror.replace("{mid}", orgId)}`,
+        msg: { option: "" }, 
+        reducer: { name: "" },
+    });
+}
+export function putMirror(data) { //编辑推送配置
+    return (dispatch) =>
+      basicAction({
+        type: "put",
+        dispatch: dispatch,
+        data,
+        actionType: "PUT_MIRROR",
+        url: `${ApiTable.putMirror}`,
+        msg: { option: '编辑镜像信息' },
+        reducer: {},
+    });
+}

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

@@ -2,6 +2,9 @@ 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 copy from "copy-to-clipboard";
+import moment from "moment";
 
 const Mirroring = (props) => {
     const { history, dispatch, actions, user, loading, StatusPushList } = props;
@@ -9,16 +12,16 @@ const Mirroring = (props) => {
     const detailList = useRef([
         {
             title: '科技蓝',
-            img: '/assets/images/imageImg/text.png',
+            img: '/assets/images/imageImg/textblue.png',
             color: 'blue'
         }, {
             title: '白',
-            img: '/assets/images/imageImg/text.png',
+            img: '/assets/images/imageImg/textwhite.png',
-            color: 'blue'
+            color: 'white'
         }, {
             title: '黑色（深灰）',
-            img: '/assets/images/imageImg/text.png',
+            img: '/assets/images/imageImg/textblack.png',
-            color: 'blue'
+            color: 'black'
         },
     ]);
 
@@ -38,8 +41,13 @@ const Mirroring = (props) => {
     function mouseOut () {//鼠标移开
         setMaskNum(1000)
     }
-    function todetail(){//去模板内部
+    function todetail (color) {//去模板内部
-        dispatch(push('/mirroring_detail'));
+        dispatch(push('/mirroring_detail'+'?template='+color));
+    }
+    function tomirrordetail(mid){
+        dispatch(openness.getMirrorDetail(mid)).then((res) => {
+            // dispatch(push('/mirroring_detail'+'?id='+item.id+'&template='+item.template))
+        })
     }
     function todelete (id) {//删除我的自定义镜像服务
         dispatch(openness.delMirror(id)).then((res) => {
@@ -47,7 +55,28 @@ const Mirroring = (props) => {
         })
     }
     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 (
         <>
@@ -140,7 +169,7 @@ const Mirroring = (props) => {
                                         alt="设置"
                                         style={{ width: '306px', height: 142 }}
                                     />
-                                    {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' }}>
+                                    {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>
@@ -173,17 +202,18 @@ const Mirroring = (props) => {
                 <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:40,marginBottom:40 }} key={index}>
+                            <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
-                                    src={item.img}
+                                    src={item.template == 'blue' ? '/assets/images/imageImg/textblue.png' : item.template == 'black' ? '/assets/images/imageImg/textblack.png' : '/assets/images/imageImg/textwhite.png'}
                                     alt="设置"
-                                    style={{ width: 330, height: 153 }}
+                                    style={{ width: 330, height: 153, cursor: 'pointer' }}
+                                    onClick={() => {tomirrordetail(item.mid)}}
                                 />
                                 <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', cursor: 'pointer' }} onClick={()=>topublish(item.id)}>
                                         <div style={{ display: 'flex', alignItems: 'center' }}>
                                             <img
                                                 src="/assets/images/imageImg/release.png"
@@ -195,7 +225,7 @@ const Mirroring = (props) => {
                                             发布
                                         </div>
                                     </div>
-                                    <div style={{ display: 'flex', cursor: 'pointer' }}>
+                                    <div style={{ display: 'flex', cursor: 'pointer' }} onClick={() => tocopy(item.id)}>
                                         <div style={{ display: 'flex', alignItems: 'center' }}>
                                             <img
                                                 src="/assets/images/imageImg/copy.png"
@@ -207,6 +237,12 @@ const Mirroring = (props) => {
                                             复制
                                         </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
@@ -215,19 +251,26 @@ const Mirroring = (props) => {
                                                     style={{ width: 16, height: 16 }}
                                                 />
                                             </div>
-                                        <div style={{ color: '#1859C1', fontSize: 14, marginLeft: 10 }} onClick={()=>todelete(item.id)}>
+                                            <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 }}>
-                                    最后编辑于：{item.updateTime}
+                                    最后编辑于：{getTime(item.updateTime)}
                                 </div>
                                 <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
-                                    最后发布于：{item.publishTime}
+                                    最后发布于：{getTime(item.publishTime)}
                                 </div>
                                 <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
-                                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <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="设置"

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

@@ -9,11 +9,22 @@ const MirroringDetail = (props) => {
     const { history, dispatch, actions, user, loading, StatusPushList } = props;
     const { openness } = actions;
     useEffect(() => {
-
+        let search=props.location.search
+        let result = search.slice(1)
+        let searcharr=result.split('&')
+        if(searcharr.length==1){
+            setTemplate(searcharr[0].split('=')[1])//主题颜色
+        }
+        else{
+            setTemplate(searcharr[0].split('=')[1])//主题颜色
+            setMirrorId(searcharr[2].split('=')[1])//id
+        }
+        equipmentGetCamera();
     }, []);
-    // const  = useRef(0)
+    const [showHeader,setShowHeader] = useState(false)//是否展示头部
+    const [mirrorId,setMirrorId] = useState(null)//id
     
-    const [themeColor,setThemeColor] = useState('')//主题颜色
+    const [template,setTemplate] = useState('')//主题颜色
     const [chooseNum, setChooseNum] = useState(0);//当前选择tab
     const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
     const [editKey, setEditKey] = useState('')
@@ -106,10 +117,20 @@ const MirroringDetail = (props) => {
         setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
         setCheckall(checkedList.length === showCameraList.length);
     }
-    useEffect(() => {
+    function topublish(publish){//编辑镜像信息
-        setThemeColor('blue')//主题颜色
+        let mirrordata={
-        equipmentGetCamera();
+            mirrorId:mirrorId,
-    }, []);
+            template:template,
+            title:headerName,
+            showHeader:showHeader,
+            publish:publish,
+            tree:treeData,
+            filterGroup:filterGroup
+        }
+        dispatch(openness.putMirror(mirrordata)).then((res) => {
+            console.log('res',res);
+        })
+    }
     function nodeDelete (item) {//删除树状子节点
         let mainData = JSON.parse(JSON.stringify(treeData))
         let nodeKeyArr = item.key.split('-')
@@ -450,7 +471,7 @@ const MirroringDetail = (props) => {
                                         value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
                                         key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1]) + 1),
                                         cameraId: plainOptions[q].value,
-                                        videoData: {
+                                        camera: {
                                             channelNo: plainOptions[q].channelNo,
                                             content: plainOptions[q].content,
                                             serialNo: plainOptions[q].serialNo,
@@ -468,7 +489,7 @@ const MirroringDetail = (props) => {
                                         value: (Number(thekeyarr[0])) + '-0',
                                         key: (Number(thekeyarr[0])) + '-0',
                                         cameraId: plainOptions[q].value,
-                                        videoData: {
+                                        camera: {
                                             channelNo: plainOptions[q].channelNo,
                                             content: plainOptions[q].content,
                                             serialNo: plainOptions[q].serialNo,
@@ -499,7 +520,7 @@ const MirroringDetail = (props) => {
                                                 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,
-                                                videoData: {
+                                                camera: {
                                                     channelNo: plainOptions[q].channelNo,
                                                     content: plainOptions[q].content,
                                                     serialNo: plainOptions[q].serialNo,
@@ -517,7 +538,7 @@ const MirroringDetail = (props) => {
                                                 value: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
                                                 key: (Number(thekeyarr[0])) + '-' + (Number(thekeyarr[1])) + '-0',
                                                 cameraId: plainOptions[q].value,
-                                                videoData: {
+                                                camera: {
                                                     channelNo: plainOptions[q].channelNo,
                                                     content: plainOptions[q].content,
                                                     serialNo: plainOptions[q].serialNo,
@@ -552,7 +573,7 @@ const MirroringDetail = (props) => {
                                                         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,
-                                                        videoData: {
+                                                        camera: {
                                                             channelNo: plainOptions[q].channelNo,
                                                             content: plainOptions[q].content,
                                                             serialNo: plainOptions[q].serialNo,
@@ -570,7 +591,7 @@ const MirroringDetail = (props) => {
                                                         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,
-                                                        videoData: {
+                                                        camera: {
                                                             channelNo: plainOptions[q].channelNo,
                                                             content: plainOptions[q].content,
                                                             serialNo: plainOptions[q].serialNo,
@@ -711,14 +732,14 @@ const MirroringDetail = (props) => {
                             style={{ width: '100%' }}
                         />
                     </div>
-                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
+                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{topublish(false)}}>
                         <img
                             src="/assets/images/imageImg/save.png"
                             alt="设置"
                             style={{ width: '100%' }}
                         />
                     </div>
-                    <div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }}>
+                    <div style={{ width: 22, height: 22, marginRight: 44, cursor: 'pointer' }} onClick={()=>{topublish(true)}}>
                         <img
                             src="/assets/images/imageImg/upload.png"
                             alt="设置"
@@ -827,7 +848,7 @@ const MirroringDetail = (props) => {
                     <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 style={{ marginRight: 13 }}><Switch onChange={(v, e) => setShowHeader(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>
@@ -1002,7 +1023,7 @@ const MirroringDetail = (props) => {
                     }
                 </div>
                 <div style={{ flex: 1 }}>
-                    <VideoScreen treeData={treeData} headerName={headerName} filterGroup={filterGroup} themeColor={themeColor} videoPlay={videoPlay}/>
+                    <VideoScreen treeData={treeData} headerName={headerName} showHeader={showHeader} filterGroup={filterGroup} template={template} videoPlay={videoPlay}/>
                 </div>
             </div>
             <Modal

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

@@ -72,6 +72,9 @@ export const ApiTable = {
    getMirrorList: 'mirror/list',   //获取镜像信息列表
    delMirror: 'mirror/{mirrorId}',   //删除镜像信息
    putMirrorCopy: 'mirror/{mirrorId}/copy',   //删除镜像信息
+   putMirrorPublish: 'mirror/{mirrorId}/publish',   //发布镜像信息
+   getMirror: 'mirror/{mid}',   //获取指定镜像信息
+   putMirror: 'mirror',   //编辑镜像信息
 
 };