|
|
@ -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,41 +13,53 @@ 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(() => { |
|
|
|
setloading(true) |
|
|
|
setTimeout(() => { |
|
|
|
dispatch(offline.getPushLog(rowId)).then((res) => { |
|
|
|
if (res.success) { |
|
|
|
journal.current=res.payload.data |
|
|
|
} |
|
|
|
else { |
|
|
|
journal.current=[] |
|
|
|
} |
|
|
|
let timeList = [] |
|
|
|
for (let index = 0; index < journal.length; index++) { |
|
|
|
let receiverTest=journal[index].receiver.join(';'); |
|
|
|
let camerTest='' |
|
|
|
for (let j = 0; j < journal[index].camera.length; j++) { |
|
|
|
camerTest=camerTest+journal[index].camera[j].name+';' |
|
|
|
for (let index = 0; index < journal.current.length; index++) { |
|
|
|
let receiverTest = journal.current[index].receiver.join(';'); |
|
|
|
let camerTest = '' |
|
|
|
for (let j = 0; j < journal.current[index].camera.length; j++) { |
|
|
|
camerTest = camerTest + journal.current[index].camera[j].name + ';' |
|
|
|
} |
|
|
|
timeList.push( |
|
|
|
{ |
|
|
|
title:getTimeTitle(journal[index].time), |
|
|
|
time:getTimeData(journal[index].time), |
|
|
|
cameraList:camerTest, |
|
|
|
receiverList:receiverTest, |
|
|
|
noticeWay:journal[index].noticeWay[0], |
|
|
|
title: getTimeTitle(journal.current[index].time), |
|
|
|
time: getTimeData(journal.current[index].time), |
|
|
|
cameraList: camerTest, |
|
|
|
receiverList: receiverTest, |
|
|
|
noticeWay: journal.current[index].noticeWay[0], |
|
|
|
} |
|
|
|
) |
|
|
|
} |
|
|
|
let yearList=[] |
|
|
|
for (let index = 0; index < journal.length; index++) { |
|
|
|
let yearList = [] |
|
|
|
for (let index = 0; index < journal.current.length; index++) { |
|
|
|
yearList.push( |
|
|
|
{ |
|
|
|
title:getTimeTitle(journal[index].time), |
|
|
|
title: getTimeTitle(journal.current[index].time), |
|
|
|
} |
|
|
|
) |
|
|
|
} |
|
|
|
let showList=[] |
|
|
|
let showList = [] |
|
|
|
let obj = {}; |
|
|
|
for (let i = 0; i < yearList.length; i++) { |
|
|
|
if (!obj[yearList[i].title]) { |
|
|
@ -56,31 +68,32 @@ function pushSideSheet (props) { |
|
|
|
} |
|
|
|
} |
|
|
|
for (let index = 0; index < showList.length; index++) { |
|
|
|
showList[index].timeList=[] |
|
|
|
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,}) |
|
|
|
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) |
|
|
|
let noticeList =[] |
|
|
|
let noticeList = [] |
|
|
|
for (let i = 0; i < pushData.cameraStatusPushReceivers.length; i++) { |
|
|
|
noticeList.push(pushData.cameraStatusPushReceivers[i].receiver) |
|
|
|
} |
|
|
|
setNoticeTest(noticeList) |
|
|
|
let equipmentList=[] |
|
|
|
let equipmentList = [] |
|
|
|
for (let i = 0; i < pushData.cameraStatusPushMonitors.length; i++) { |
|
|
|
equipmentList.push(pushData.cameraStatusPushMonitors[i].camera.name) |
|
|
|
} |
|
|
|
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){ |
|
|
|
let year = moment(date).year()+'年' |
|
|
|
let month = (moment(date).month()+1)>10?(moment(date).month()+1)+'月':'0'+(moment(date).month()+1)+'月' |
|
|
|
return year+month |
|
|
|
} |
|
|
|
function getTimeData(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 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 day+' '+hour+':'+minute+':'+second |
|
|
|
} |
|
|
|
function sideSheetChange(){ |
|
|
|
function getTimeTitle (date) { |
|
|
|
let year = moment(date).year() + '年' |
|
|
|
let month = (moment(date).month() + 1) > 10 ? (moment(date).month() + 1) + '月' : '0' + (moment(date).month() + 1) + '月' |
|
|
|
return year + month |
|
|
|
} |
|
|
|
function getTimeData (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 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 day + ' ' + hour + ':' + minute + ':' + second |
|
|
|
} |
|
|
|
function sideSheetChange () { |
|
|
|
close() |
|
|
|
} |
|
|
|
return ( |
|
|
@ -108,6 +121,14 @@ 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, |
|
|
@ -117,46 +138,47 @@ function pushSideSheet (props) { |
|
|
|
<Collapse defaultActiveKey="0"> |
|
|
|
{logList.map((item, index) => { |
|
|
|
return ( |
|
|
|
<Collapse.Panel header={<div style={{width:'100%',textAlign:'center'}}>{item.title}</div>} itemKey={String(index)} key={index}> |
|
|
|
{item.timeList.map((itm,idx)=>{ |
|
|
|
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={{margin:'0px 24px',width:74}}>{itm.time}</div> |
|
|
|
<Collapse.Panel header={<div style={{ width: '100%', textAlign: 'center' }}>{item.title}</div>} itemKey={String(index)} key={index}> |
|
|
|
{item.timeList.map((itm, idx) => { |
|
|
|
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={{ margin: '0px 24px', width: 74 }}>{itm.time}</div> |
|
|
|
<Popover content={ |
|
|
|
<div style={{ padding: 12,width:300,wordBreak:'break-all' }}> |
|
|
|
<div style={{ padding: 12, width: 300, wordBreak: 'break-all' }}> |
|
|
|
{itm.receiverList} |
|
|
|
</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 content={ |
|
|
|
<div style={{ padding: 12,width:200,wordBreak:'break-all' }}> |
|
|
|
<div style={{ padding: 12, width: 200, wordBreak: 'break-all' }}> |
|
|
|
{itm.cameraList} |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
) |
|
|
|
})} |
|
|
|
</Collapse.Panel> |
|
|
|
)})} |
|
|
|
) |
|
|
|
})} |
|
|
|
</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( |
|
|
|
<Tag color='blue' style={{height:33}} type='solid' key={index}>{item}</Tag> |
|
|
|
return ( |
|
|
|
<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( |
|
|
|
<Tag color='blue' style={{height:33}} type='solid' key={index}>{item}</Tag> |
|
|
|
return ( |
|
|
|
<Tag color='blue' style={{ height: 33 }} type='solid' key={index}>{item}</Tag> |
|
|
|
) |
|
|
|
})} |
|
|
|
</Space> |
|
|
|