镜像服务静态页面

code/VideoAccess-VCMP/web/client/src/sections/offline/components/pushSideSheet.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { connect } from "react-redux";
-import { Modal, Spin,Tag, Space,Collapse ,SideSheet,Tabs, TabPane,Popover} from "@douyinfe/semi-ui";
+import { Modal, Spin, Tag, Space, Collapse, SideSheet, Tabs, TabPane, Popover } from "@douyinfe/semi-ui";
 import moment from "moment";
 import './pushSideSheet.less'
 import PerfectScrollbar from "perfect-scrollbar";
@@ -13,74 +13,87 @@ function pushSideSheet (props) {
         close,
         actions,
         pushData,//表格信息
-        journal//日志信息
+        rowId,
+        dispatch
     } = props;
     const { offline } = actions;
     const [logList, setLogList] = useState([]);//日志列表
     const [noticeTest, setNoticeTest] = useState([]);//通知列表
     const [equipmentTest, setEquipmentTest] = useState([]);//设备列表
+    const journal = useRef([]);
+    const [isloading, setloading] = useState(false);
 
     //初始化
     useEffect(() => {
-        let timeList = []
+        setloading(true)
-        for (let index = 0; index < journal.length; index++) {
+        setTimeout(() => {
-            let receiverTest=journal[index].receiver.join(';');
+        dispatch(offline.getPushLog(rowId)).then((res) => {
-            let camerTest=''
+            if (res.success) {
-            for (let j = 0; j < journal[index].camera.length; j++) {
+                journal.current=res.payload.data
-                camerTest=camerTest+journal[index].camera[j].name+';'
+            }
+            else {
+                journal.current=[]
             }
-            timeList.push(
+            let timeList = []
-                {
+            for (let index = 0; index < journal.current.length; index++) {
-                    title:getTimeTitle(journal[index].time),
+                let receiverTest = journal.current[index].receiver.join(';');
-                    time:getTimeData(journal[index].time),
+                let camerTest = ''
-                    cameraList:camerTest,
+                for (let j = 0; j < journal.current[index].camera.length; j++) {
-                    receiverList:receiverTest,
+                    camerTest = camerTest + journal.current[index].camera[j].name + ';'
-                    noticeWay:journal[index].noticeWay[0],
                 }
-            )
+                timeList.push(
-        }
+                    {
-        let yearList=[]
+                        title: getTimeTitle(journal.current[index].time),
-        for (let index = 0; index < journal.length; index++) {
+                        time: getTimeData(journal.current[index].time),
-            yearList.push(
+                        cameraList: camerTest,
-                {
+                        receiverList: receiverTest,
-                    title:getTimeTitle(journal[index].time),
+                        noticeWay: journal.current[index].noticeWay[0],
+                    }
+                )
+            }
+            let yearList = []
+            for (let index = 0; index < journal.current.length; index++) {
+                yearList.push(
+                    {
+                        title: getTimeTitle(journal.current[index].time),
+                    }
+                )
+            }
+            let showList = []
+            let obj = {};
+            for (let i = 0; i < yearList.length; i++) {
+                if (!obj[yearList[i].title]) {
+                    showList.push(yearList[i]);
+                    obj[yearList[i].title] = true;
                 }
-            )
+            }
-        }
+            for (let index = 0; index < showList.length; index++) {
-        let showList=[]
+                showList[index].timeList = []
-        let obj = {};
+            }
-        for (let i = 0; i < yearList.length; i++) {
+            for (let j = 0; j < showList.length; j++) {
-            if (!obj[yearList[i].title]) {
+                for (let i = 0; i < timeList.length; i++) {
-                showList.push(yearList[i]);
+                    if (timeList[i].title == showList[j].title) {
-                obj[yearList[i].title] = true;
+                        showList[j].timeList.push({ time: timeList[i].time, cameraList: timeList[i].cameraList, receiverList: timeList[i].receiverList, noticeWay: timeList[i].noticeWay, })
-              }
+                    }
-        }
-        for (let index = 0; index < showList.length; index++) {
-            showList[index].timeList=[]
-        }
-        for (let j = 0; j < showList.length; j++) {
-            for (let i = 0; i < timeList.length; i++) {
-                if(timeList[i].title==showList[j].title){
-                    showList[j].timeList.push({time:timeList[i].time,cameraList:timeList[i].cameraList,receiverList:timeList[i].receiverList,noticeWay:timeList[i].noticeWay,})
                 }
             }
-        }
+            setLogList(showList)
-        setLogList(showList)
+            let noticeList = []
-        let noticeList =[]
+            for (let i = 0; i < pushData.cameraStatusPushReceivers.length; i++) {
-        for (let i = 0; i < pushData.cameraStatusPushReceivers.length; i++) {
+                noticeList.push(pushData.cameraStatusPushReceivers[i].receiver)
-            noticeList.push(pushData.cameraStatusPushReceivers[i].receiver)
+            }
-        }
+            setNoticeTest(noticeList)
-        setNoticeTest(noticeList)
+            let equipmentList = []
-        let equipmentList=[]
+            for (let i = 0; i < pushData.cameraStatusPushMonitors.length; i++) {
-        for (let i = 0; i < pushData.cameraStatusPushMonitors.length; i++) {
+                equipmentList.push(pushData.cameraStatusPushMonitors[i].camera.name)
-            equipmentList.push(pushData.cameraStatusPushMonitors[i].camera.name)
+            }
-        }
+            setEquipmentTest(equipmentList)
-        setEquipmentTest(equipmentList)
-        setTimeout(() => {
             equipmentScrollbar = new PerfectScrollbar("#collapse_test", {
                 suppressScrollX: true,
             });
-        }, 100);
+            setloading(false)
+        });
+        }, 0);
     }, []);
     useEffect(() => {
         const videoStreaming = document.getElementById("collapse_test");
@@ -88,19 +101,19 @@ function pushSideSheet (props) {
             equipmentScrollbar.update();
         }
     });
-    function getTimeTitle(date){
+    function getTimeTitle (date) {
-        let year = moment(date).year()+'年'
+        let year = moment(date).year() + '年'
-        let month = (moment(date).month()+1)>10?(moment(date).month()+1)+'月':'0'+(moment(date).month()+1)+'月'
+        let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '月' : '0' + (moment(date).month() + 1) + '月'
-        return year+month
+        return year + month
     }
-    function getTimeData(date){
+    function getTimeData (date) {
-        let day=moment(date).date()>10?moment(date).date()+'日':'0'+moment(date).date()+'日';
+        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 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 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();
+        let second = moment(date).second() > 10 ? moment(date).second() : '0' + moment(date).second();
-        return day+' '+hour+':'+minute+':'+second
+        return day + ' ' + hour + ':' + minute + ':' + second
     }
-    function sideSheetChange(){
+    function sideSheetChange () {
         close()
     }
     return (
@@ -108,55 +121,64 @@ function pushSideSheet (props) {
             <SideSheet title={pushData.name} className='sideSheet' width={670} visible={true} onCancel={sideSheetChange}>
                 <Tabs type="line">
                     <TabPane tab="推送日志" itemKey="1">
+                        <Spin tip="数据加载中..." spinning={isloading}>
+                            {
+                                isloading?(
+                                    <div style={{height:300}}>
+                                    </div>
+                                ):''
+                            }
+                        </Spin>
                         <div id="collapse_test"
                             style={{
                                 height: document.body.clientHeight - 122,
                                 position: "relative",
                             }}
                         >
-                        <Collapse defaultActiveKey="0">
+                            <Collapse defaultActiveKey="0">
-                        {logList.map((item, index) => {
+                                {logList.map((item, index) => {
-                        return (
+                                    return (
-                            <Collapse.Panel header={<div style={{width:'100%',textAlign:'center'}}>{item.title}</div>} itemKey={String(index)} key={index}>
+                                        <Collapse.Panel header={<div style={{ width: '100%', textAlign: 'center' }}>{item.title}</div>} itemKey={String(index)} key={index}>
-                                {item.timeList.map((itm,idx)=>{
+                                            {item.timeList.map((itm, idx) => {
-                                    return(
+                                                return (
-                                        <div style={{display:'flex',alignItems:'center',height:46,borderBottom: '1px solid #E8E8E8',fontSize:12,color:'rgba(0,0,0,0.6500)'}} key={idx}>
+                                                    <div style={{ display: 'flex', alignItems: 'center', height: 46, borderBottom: '1px solid #E8E8E8', fontSize: 12, color: 'rgba(0,0,0,0.6500)' }} key={idx}>
-                                            <div style={{margin:'0px 24px',width:74}}>{itm.time}</div>
+                                                        <div style={{ margin: '0px 24px', width: 74 }}>{itm.time}</div>
-                                            <Popover content={
+                                                        <Popover content={
-                                                <div style={{ padding: 12,width:300,wordBreak:'break-all' }}>
+                                                            <div style={{ padding: 12, width: 300, wordBreak: 'break-all' }}>
-                                                    {itm.receiverList}
+                                                                {itm.receiverList}
-                                                </div>
+                                                            </div>
-                                            }>
+                                                        }>
-                                                <div style={{marginRight:24,width:262,textOverflow:'ellipsis',whiteSpace:'nowrap',overflow:'hidden'}}>{itm.receiverList}</div>
+                                                            <div style={{ marginRight: 24, width: 262, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{itm.receiverList}</div>
-                                            </Popover>
+                                                        </Popover>
-                                            <Popover content={
+                                                        <Popover content={
-                                                <div style={{ padding: 12,width:200,wordBreak:'break-all' }}>
+                                                            <div style={{ padding: 12, width: 200, wordBreak: 'break-all' }}>
-                                                    {itm.cameraList}
+                                                                {itm.cameraList}
-                                                </div>
+                                                            </div>
-                                            }>
+                                                        }>
-                                                <div style={{marginRight:24,width:133,textOverflow:'ellipsis',whiteSpace:'nowrap',overflow:'hidden'}}>{itm.cameraList}</div>
+                                                            <div style={{ marginRight: 24, width: 133, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{itm.cameraList}</div>
-                                            </Popover>
+                                                        </Popover>
-                                            <div style={{marginRight:25,width:83}} className={itm.noticeWay=='online'?'online':itm.noticeWay=='offline'?'offline':'timing'}>{itm.noticeWay=='online'?'上线及时通知':itm.noticeWay=='offline'?'离线即时通知':'24时定时统计'}</div>
+                                                        <div style={{ marginRight: 25, width: 83 }} className={itm.noticeWay == 'online' ? 'online' : itm.noticeWay == 'offline' ? 'offline' : 'timing'}>{itm.noticeWay == 'online' ? '上线及时通知' : itm.noticeWay == 'offline' ? '离线即时通知' : '24时定时统计'}</div>
-                                        </div>
+                                                    </div>
+                                                )
+                                            })}
+                                        </Collapse.Panel>
                                     )
                                 })}
-                            </Collapse.Panel>
+                            </Collapse>
-                        )})}
-                        </Collapse>
                         </div>
                     </TabPane>
                     <TabPane tab="监听范围" itemKey="2">
-                        <div style={{margin:'12px 36px',fontSize:12,color:'rgba(0,0,0,0.6500)'}}>
+                        <div style={{ margin: '12px 36px', fontSize: 12, color: 'rgba(0,0,0,0.6500)' }}>
                             <img
                                 src="/assets/images/background/icon_camera.png"
                                 alt="设置"
                                 style={{ width: 26, height: 26 }}
                             />
-                            <div style={{marginTop:1,background: '#F1F5FF',padding:14,minHeight:139}}>
+                            <div style={{ marginTop: 1, background: '#F1F5FF', padding: 14, minHeight: 139 }}>
                                 <Space wrap>
                                     {equipmentTest.map((item, index) => {
-                                        return(
+                                        return (
-                                        <Tag color='blue' style={{height:33}} type='solid' key={index}>{item}</Tag>
+                                            <Tag color='blue' style={{ height: 33 }} type='solid' key={index}>{item}</Tag>
                                         )
                                     })}
                                 </Space>
@@ -164,17 +186,17 @@ function pushSideSheet (props) {
                         </div>
                     </TabPane>
                     <TabPane tab="接收信息" itemKey="3">
-                        <div style={{margin:'12px 36px',fontSize:12,color:'rgba(0,0,0,0.6500)'}}>
+                        <div style={{ margin: '12px 36px', fontSize: 12, color: 'rgba(0,0,0,0.6500)' }}>
                             <img
-                                src={pushData.pushWay=='email'?"/assets/images/background/icon_email.png":"/assets/images/background/icon_phone.png"}
+                                src={pushData.pushWay == 'email' ? "/assets/images/background/icon_email.png" : "/assets/images/background/icon_phone.png"}
                                 alt="设置"
                                 style={{ width: 26, height: 26 }}
                             />
-                            <div style={{marginTop:1,background: '#F1F5FF',padding:14,minHeight:139}}>
+                            <div style={{ marginTop: 1, background: '#F1F5FF', padding: 14, minHeight: 139 }}>
                                 <Space wrap>
                                     {noticeTest.map((item, index) => {
-                                        return(
+                                        return (
-                                        <Tag color='blue' style={{height:33}} type='solid' key={index}>{item}</Tag>
+                                            <Tag color='blue' style={{ height: 33 }} type='solid' key={index}>{item}</Tag>
                                         )
                                     })}
                                 </Space>

code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx

@@ -34,7 +34,6 @@ const Carrierpigeon = (props) => {
     const cameraList = useRef([]);//第三阶段监听范围摄像头列表
     const [sideSheetVisible, setSideSheetVisible] = useState(false);
     const [pushData, setPushData] = useState({});
-    const [journal, setJournal] = useState([]);
     const tableList = [//表格属性
         {
             title: '推送信息',
@@ -197,16 +196,9 @@ const Carrierpigeon = (props) => {
                             复制
                         </Button>
                         <Button onClick={()=>{
-                            dispatch(offline.getPushLog(row.id)).then((res) => {
+                            setRowId(row.id);
-                                if(res.success){
+                            setPushData(row);
-                                    setJournal(res.payload.data);
+                            setSideSheetVisible(true);
-                                }
-                                else{
-                                    setJournal([]);
-                                }
-                                setPushData(row);
-                                setSideSheetVisible(true);
-                            });
                         }} theme="borderless">
                             查看
                         </Button>
@@ -540,10 +532,11 @@ const Carrierpigeon = (props) => {
                 />}
                 {sideSheetVisible&&<PushSideSheet
                     pushData={pushData}
-                    journal={journal}
+                    rowId={rowId}
                     close={() => {
                         setSideSheetVisible(false);
-                        setPushData({})
+                        setPushData({});
+                        setRowId();
                     }}
                 />}
             </div>

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

@@ -1,20 +1,270 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { Coming } from '$components'
 import '../style.less'
 
 const Mirroring = (props) => {
+    const detailList = useRef([
+        {
+            title: '科技蓝',
+            img: '/assets/images/imageImg/text.png',
+            color: 'blue'
+        }, {
+            title: '白',
+            img: '/assets/images/imageImg/text.png',
+            color: 'blue'
+        }, {
+            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'
+        },
+    ]);
+    const [maskNum, setMaskNum] = useState(100);
+    function mouseOver (index) {
+        setMaskNum(index)
+    }
+    function mouseOut () {
+        setMaskNum(100)
+    }
+    return (
+        <>
+            <div style={{ height: 171, background: '#FFFFFF' }}>
+                <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={{ width: '4.513%', marginLeft: '5.549%' }}>
+                        <img
+                            src="/assets/images/imageImg/stepone.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
+                        <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>创建镜像模板</div>
+                        <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>选择样式模板</div>
+                    </div>
+                    <div style={{ width: '6.281%' }}>
+                        <img
+                            src="/assets/images/imageImg/nextStep.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div style={{ width: '4.513%', marginLeft: '4.086%' }}>
+                        <img
+                            src="/assets/images/imageImg/steptwo.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div style={{ marginLeft: '0.854%', marginTop: 16, width: '7.683%' }}>
+                        <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>节点配置</div>
+                        <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>创建节点及设备树</div>
+                    </div>
+                    <div style={{ width: '6.281%' }}>
+                        <img
+                            src="/assets/images/imageImg/nextStep.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div style={{ width: '4.513%', marginLeft: '5.183%' }}>
+                        <img
+                            src="/assets/images/imageImg/stepthree.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div style={{ marginLeft: '0.854%', marginTop: 16, width: '11.464%' }}>
+                        <div style={{ fontSize: 16, color: '#1859C1', fontWeight: 600 }}>发布镜像</div>
+                        <div style={{ marginTop: 2, fontSize: 14, color: 'rgba(0,0,0,0.4500)' }}>发布成功后，获取镜像服务ID</div>
+                    </div>
+                    <div style={{ width: '6.281%' }}>
+                        <img
+                            src="/assets/images/imageImg/nextStep.png"
+                            alt="设置"
+                            style={{ width: '100%' }}
+                        />
+                    </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.4500)' }}>通过服务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', justifyContent: 'space-between' }}>
+                    {detailList.current.map((item, index) => {
+                        return (
+                            <div key={index}>
+                                <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()} 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' }}>
+                        共9份
+                    </div>
+                </div>
+                <div style={{ display: 'flex', padding: '19px 46px 79px 64px', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+                    {myCustomList.current.map((item,index)=>{
+                        return(
                             
-   return (
+                    <div style={{ height: 334, width: 362, boxShadow: '1px 2px 12px 1px rgba(217,217,217,0.7)', padding: 16 }}>
-      <Coming />
+                    <img
-   )
+                        src={item.img}
+                        alt="设置"
+                        style={{ width: 330, height: 153 }}
+                    />
+                    <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', 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' }}>
+                            <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>
+                        <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>
+                    <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 10, fontSize: 12 }}>
+                        最后编辑于：{item.lastEditTime}
+                    </div>
+                    <div style={{ color: 'rgba(0,0,0,0.45)', marginTop: 8, fontSize: 12 }}>
+                        最后发布于：{item.lastReleaseTime}
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 12 }}>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                            <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.typeId}
+                        </div>
+                    </div>
+                </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
 }
 
 function mapStateToProps (state) {
-   const { auth } = state;
+    const { auth } = state;
-   return {
+    return {
-      user: auth.user,
+        user: auth.user,
-   };
+    };
 }
 
 export default connect(mapStateToProps)(Mirroring);

code/VideoAccess-VCMP/web/package.json

@@ -7,7 +7,7 @@
       "test": "mocha",
       "start-vite": "cross-env NODE_ENV=developmentVite npm run start-params",
       "start": "cross-env NODE_ENV=development npm run start-params",
-      "start-params": "node server -p 5000 -u http://localhost:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://localhost:4200 --apiAnxinyunUrl http://localhost:4100  --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081",
+      "start-params": "node server -p 5000 -u http://10.8.30.112:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://10.8.30.112:4200 --apiAnxinyunUrl http://10.8.30.112:4100  --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081",
       "deploy": "export NODE_ENV=production&& npm run build && node server",
       "build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js",
       "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js"