Merge branch 'dev_trial' of https://gitea.anxinyun.cn/free-sun/FS-IOT into dev_trial

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

@@ -24,4 +24,75 @@ export function getCameraListAll() {//获取摄像头能力列表
         msg: { option: "" }, 
         reducer: { name: "" },
     });
-}
+}
+export function getMirrorList() {//获取摄像头能力列表
+    return (dispatch) =>
+      basicAction({
+        type: "get",
+        dispatch: dispatch,
+        actionType: "GET_MIRROR_LIST",
+        url: `${ApiTable.getMirrorList}`,
+        msg: { option: "" }, 
+        reducer: { name: "" },
+    });
+}
+export function delMirror(orgId) {//删除镜像信息
+    return (dispatch) =>
+      basicAction({
+        type: "del",
+        dispatch: dispatch,
+        actionType: "DEL_MIRROR",
+        url: `${ApiTable.delMirror.replace("{mirrorId}", orgId)}`,
+        msg: {
+          option:
+            "删除镜像信息",
+        },
+        reducer: { name: "" },
+    });
+}
+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,68 +2,81 @@ 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;
+    const { openness } = actions;
     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',
-            color: 'blue'
+            img: '/assets/images/imageImg/textwhite.png',
+            color: 'white'
         }, {
             title: '黑色（深灰）',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue'
-        }, {
-            title: '灰色',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue'
-        },
-    ]);
-    const myCustomList = useRef([
-        {
-            title: '智慧小蓝视频融合中心实例实例实例实例',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue',
-            lastEditTime: '2022-12-22 16:00:57',
-            lastReleaseTime: '2022-12-22 19:20:57',
-            typeId: '1511444S4545'
-        }, {
-            title: '智慧小蓝视频融合',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue',
-            lastEditTime: '2022-12-22 16:00:57',
-            lastReleaseTime: '2022-12-22 19:20:57',
-            typeId: '1511444S4545'
-        }, {
-            title: '智慧小蓝视频融合小蓝视频融合',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue',
-            lastEditTime: '2022-12-22 16:00:57',
-            lastReleaseTime: '2022-12-22 19:20:57',
-            typeId: '1511444S4545'
-        }, {
-            title: '智慧小蓝视频融合小蓝视频融合是的阿三打阿三打',
-            img: '/assets/images/imageImg/text.png',
-            color: 'blue',
-            lastEditTime: '2022-12-22 16:00:57',
-            lastReleaseTime: '2022-12-22 19:20:57',
-            typeId: '1511444S4545'
+            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) {
+    function mouseOver (index) {//鼠标移入
         setMaskNum(index)
     }
-    function mouseOut () {
+    function mouseOut () {//鼠标移开
         setMaskNum(1000)
     }
-    function todetail(){
-        dispatch(push('/mirroring_detail'));
+    function todetail (color) {//去模板内部
+        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) => {
+            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 (
         <>
@@ -146,17 +159,17 @@ const Mirroring = (props) => {
             </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', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', padding: '34px 64px 18px 64px', flexWrap: 'wrap', }}>
                     {detailList.current.map((item, index) => {
                         return (
-                            <div key={index}>
+                            <div key={index} style={{ marginRight: 100 }}>
                                 <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()} 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>
@@ -183,23 +196,24 @@ const Mirroring = (props) => {
                 <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' }}>
-                        共9份
+                        共{myCustomList.length}份
                     </div>
                 </div>
-                <div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
-                    {myCustomList.current.map((item, index) => {
+                <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 }} 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"
@@ -211,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"
@@ -223,27 +237,40 @@ const Mirroring = (props) => {
                                             复制
                                         </div>
                                     </div>
-                                    <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 }}>
-                                            删除
+                                    <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>
-                                    </div>
+                                    </Popconfirm>
                                 </div>
                                 <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
-                                    最后编辑于：{item.lastEditTime}
+                                    最后编辑于：{getTime(item.updateTime)}
                                 </div>
                                 <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
-                                    最后发布于：{item.lastReleaseTime}
+                                    最后发布于：{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="设置"
@@ -251,7 +278,7 @@ const Mirroring = (props) => {
                                         />
                                     </div>
                                     <div style={{ marginLeft: 4, background: '#1859C1', padding: '2px 8px', color: '#FFFFFF', fontSize: 12, borderRadius: 2 }}>
-                                        ID:{item.typeId}
+                                        ID:{item.mid}
                                     </div>
                                 </div>
                             </div>
@@ -264,7 +291,7 @@ const Mirroring = (props) => {
 }
 
 function mapStateToProps (state) {
-    const { auth,global } = state;
+    const { auth, global } = state;
     return {
         user: auth.user,
         actions: global.actions,

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

@@ -9,10 +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 [template,setTemplate] = useState('')//主题颜色
     const [chooseNum, setChooseNum] = useState(0);//当前选择tab
     const [chooseList, setChooseList] = useState(['节点', '样式', '功能']);
     const [editKey, setEditKey] = useState('')
@@ -41,7 +53,12 @@ const MirroringDetail = (props) => {
     const [addLabel, setAddLabel] = useState(false)//标签组设置弹框
     const [filterGroup, setFilterGroup] = useState([])//筛选项数据
     const [addLabelNum, setAddLabelNum] = useState(0)//标签组添加
-
+    const [headerName, setHeaderName] = useState('我的镜像服务01');//添加视频弹框
+    const [editHeaderName, setEditHeaderName] = useState(false)//是否设置头部名称
+    const [videoPlay, setVideoPlay] = useState(false);//视频预览
+    function changeHeaderName () {//修改头部名称
+        setEditHeaderName(true)
+    }
     function onCheckAllChange (e) {//全选
         if (e.target.checked) {
             let mycheckList = []
@@ -65,7 +82,7 @@ const MirroringDetail = (props) => {
                     optionsList.push({
                         label: resList[i].name,
                         value: resList[i].id,
-                        extra: 'DID:' + resList[i].gbCamera.did || '',
+                        extra: 'DID:' + (resList[i].gbCamera.did || ''),
                         did: resList[i].gbCamera.did || '',
                         id: resList[i].id,
                         channelNo: resList[i].channelNo,
@@ -79,7 +96,7 @@ const MirroringDetail = (props) => {
                     optionsList.push({
                         label: resList[i].name,
                         value: resList[i].id,
-                        extra: 'DID:' + resList[i].gbCamera.did || '',
+                        extra: 'DID:' + (resList[i].gbCamera.did || ''),
                         did: resList[i].gbCamera.did || '',
                         id: resList[i].id,
                         channelNo: resList[i].channelNo,
@@ -100,9 +117,20 @@ const MirroringDetail = (props) => {
         setIndeterminate(!!checkedList.length && checkedList.length < showCameraList.length);
         setCheckall(checkedList.length === showCameraList.length);
     }
-    useEffect(() => {
-        equipmentGetCamera();
-    }, []);
+    function topublish(publish){//编辑镜像信息
+        let mirrordata={
+            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('-')
@@ -368,7 +396,7 @@ const MirroringDetail = (props) => {
                         </div>
                     </Popconfirm>
                     {
-                        (item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2 ? ('') : (
+                        (item.children && item.children.length > 0 && item.children[0].cameraId) || keyArr.length > 2||item.cameraId ? ('') : (
                             <div style={{ width: 12, height: 12, cursor: 'pointer', marginRight: 4 }} onClick={() => nodeAdd(item)}>
                                 <img
                                     src="/assets/images/imageImg/nodeadd.png"
@@ -443,13 +471,13 @@ 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,
                                             type: plainOptions[q].type,
-                                            yingshiToken:plainOptions[q].yingshiToken,
-                                            id:plainOptions[q].id,
+                                            yingshiToken: plainOptions[q].yingshiToken,
+                                            id: plainOptions[q].id,
                                         }
                                     })
                                 }
@@ -461,13 +489,13 @@ 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,
                                             type: plainOptions[q].type,
-                                            yingshiToken:plainOptions[q].yingshiToken,
-                                            id:plainOptions[q].id,
+                                            yingshiToken: plainOptions[q].yingshiToken,
+                                            id: plainOptions[q].id,
                                         }
                                     }]
                                 }
@@ -492,13 +520,13 @@ 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,
                                                     type: plainOptions[q].type,
-                                                    yingshiToken:plainOptions[q].yingshiToken,
-                                                    id:plainOptions[q].id,
+                                                    yingshiToken: plainOptions[q].yingshiToken,
+                                                    id: plainOptions[q].id,
                                                 }
                                             })
                                         }
@@ -510,13 +538,13 @@ 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,
                                                     type: plainOptions[q].type,
-                                                    yingshiToken:plainOptions[q].yingshiToken,
-                                                    id:plainOptions[q].id,
+                                                    yingshiToken: plainOptions[q].yingshiToken,
+                                                    id: plainOptions[q].id,
                                                 }
                                             }]
                                         }
@@ -545,13 +573,13 @@ 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,
                                                             type: plainOptions[q].type,
-                                                            yingshiToken:plainOptions[q].yingshiToken,
-                                                            id:plainOptions[q].id,
+                                                            yingshiToken: plainOptions[q].yingshiToken,
+                                                            id: plainOptions[q].id,
                                                         }
                                                     })
                                                 }
@@ -563,13 +591,13 @@ 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,
                                                             type: plainOptions[q].type,
-                                                            yingshiToken:plainOptions[q].yingshiToken,
-                                                            id:plainOptions[q].id,
+                                                            yingshiToken: plainOptions[q].yingshiToken,
+                                                            id: plainOptions[q].id,
                                                         }
                                                     }]
                                                 }
@@ -583,6 +611,7 @@ const MirroringDetail = (props) => {
                 }
             }
         }
+        console.log('mainDatamainDatamainData',mainData);
         setTreeData(mainData);
         setAddCamera(false);
         setMykeyword('')
@@ -668,7 +697,7 @@ const MirroringDetail = (props) => {
             <div style={{
                 height: 64, background: "url(/assets/images/imageImg/banner.png)", backgroundSize: "100% 100%", display: 'flex', alignItems: 'center', justifyContent: 'space-between'
             }}>
-                <div style={{ display: 'flex', }}>
+                <div style={{ display: 'flex',alignItems: 'center' }}>
                     <div style={{ width: 20, height: 20, marginLeft: 19, cursor: 'pointer' }} onClick={toback}>
                         <img
                             src="/assets/images/imageImg/toback.png"
@@ -676,10 +705,18 @@ const MirroringDetail = (props) => {
                             style={{ width: '100%' }}
                         />
                     </div>
-                    <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
-                        智慧小蓝智慧排涝视频融合系统
-                    </div>
-                    <div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer' }}>
+                    {
+                        editHeaderName ? (
+                            <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
+                                <Input value={headerName} onBlur={() => { setEditHeaderName(false) }} onChange={(value) => setHeaderName(value)} style={{ width: 200,color: 'rgba(255,255,255,0.9)',background: 'rgba(0,0,0,0.2)' }} maxLength={20} className='inputpadding'></Input>
+                            </div>
+                        ) : (
+                            <div style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 20 }}>
+                                {headerName}
+                            </div>
+                        )
+                    }
+                    <div style={{ width: 12, height: 12, marginLeft: 8, marginTop: 1, cursor: 'pointer',display:'flex' }} onClick={changeHeaderName}>
                         <img
                             src="/assets/images/imageImg/nameChange.png"
                             alt="设置"
@@ -688,21 +725,21 @@ const MirroringDetail = (props) => {
                     </div>
                 </div>
                 <div style={{ display: 'flex', }}>
-                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }}>
+                    <div style={{ width: 22, height: 22, marginRight: 30, cursor: 'pointer' }} onClick={()=>{setVideoPlay(!videoPlay)}}>
                         <img
                             src="/assets/images/imageImg/generate.png"
                             alt="设置"
                             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="设置"
@@ -811,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>
@@ -986,7 +1023,7 @@ const MirroringDetail = (props) => {
                     }
                 </div>
                 <div style={{ flex: 1 }}>
-                    <VideoScreen treeData={treeData}/>
+                    <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

@@ -67,6 +67,15 @@ export const ApiTable = {
    putApplication: 'application',   //禁用应用
    delApplication: 'application/{appId}',   //删除应用
    postApplication: 'application',   //创建/修改应用
+
+   //镜像服务
+   getMirrorList: 'mirror/list',   //获取镜像信息列表
+   delMirror: 'mirror/{mirrorId}',   //删除镜像信息
+   putMirrorCopy: 'mirror/{mirrorId}/copy',   //删除镜像信息
+   putMirrorPublish: 'mirror/{mirrorId}/publish',   //发布镜像信息
+   getMirror: 'mirror/{mid}',   //获取指定镜像信息
+   putMirror: 'mirror',   //编辑镜像信息
+
 };
 
 export const VideoServeApi = {