|
|
|
@ -1,8 +1,9 @@ |
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { Modal, Spin,Input,Collapse ,SideSheet,Tabs, TabPane} from "@douyinfe/semi-ui"; |
|
|
|
import { Modal, Spin,Input,Collapse ,SideSheet,Tabs, TabPane,Popover} from "@douyinfe/semi-ui"; |
|
|
|
import moment from "moment"; |
|
|
|
import './pushSideSheet.less' |
|
|
|
import { push } from "react-router-redux"; |
|
|
|
function pushSideSheet (props) { |
|
|
|
const { |
|
|
|
close, |
|
|
|
@ -11,20 +12,67 @@ function pushSideSheet (props) { |
|
|
|
journal//日志信息 |
|
|
|
} = props; |
|
|
|
const { offline } = actions; |
|
|
|
const [notesValue, setNotesValue] = useState('');//释义 |
|
|
|
const [logList, setLogList] = useState([]);//日志列表 |
|
|
|
const [noticeTest, setNoticeTest] = useState('');//通知列表 |
|
|
|
const [equipmentTest, setEquipmentTest] = useState();//设备列表 |
|
|
|
|
|
|
|
//初始化 |
|
|
|
useEffect(() => { |
|
|
|
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+';' |
|
|
|
} |
|
|
|
timeList.push( |
|
|
|
{ |
|
|
|
title:getTimeTitle(journal[index].time), |
|
|
|
time:getTimeData(journal[index].time) |
|
|
|
time:getTimeData(journal[index].time), |
|
|
|
cameraList:camerTest, |
|
|
|
receiverList:receiverTest |
|
|
|
} |
|
|
|
) |
|
|
|
} |
|
|
|
console.log('timeList',timeList); |
|
|
|
let yearList=[] |
|
|
|
for (let index = 0; index < journal.length; index++) { |
|
|
|
yearList.push( |
|
|
|
{ |
|
|
|
title:getTimeTitle(journal[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++) { |
|
|
|
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}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setLogList(showList) |
|
|
|
let noticeList ='' |
|
|
|
for (let i = 0; i < pushData.cameraStatusPushReceivers.length; i++) { |
|
|
|
noticeList=noticeList+pushData.cameraStatusPushReceivers[i].receiver+';' |
|
|
|
} |
|
|
|
setNoticeTest(noticeList) |
|
|
|
|
|
|
|
let equipmentList='' |
|
|
|
for (let i = 0; i < pushData.cameraStatusPushMonitors.length; i++) { |
|
|
|
noticeList=noticeList+pushData.cameraStatusPushMonitors[i].camera.name+';' |
|
|
|
} |
|
|
|
setEquipmentTest(equipmentList) |
|
|
|
console.log('pushData',pushData); |
|
|
|
}, []); |
|
|
|
function getTimeTitle(date){ |
|
|
|
let year = moment(date).year()+'年' |
|
|
|
@ -47,16 +95,54 @@ function pushSideSheet (props) { |
|
|
|
<Tabs type="line"> |
|
|
|
<TabPane tab="推送日志" itemKey="1"> |
|
|
|
<Collapse> |
|
|
|
<Collapse.Panel header={<div style={{width:'100%',textAlign:'center'}}>11111111</div>} itemKey="1"> |
|
|
|
<p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p> |
|
|
|
{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> |
|
|
|
<Popover content={ |
|
|
|
<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> |
|
|
|
</Popover> |
|
|
|
<Popover content={ |
|
|
|
<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> |
|
|
|
</Popover> |
|
|
|
<div style={{marginRight:25,width:83}} className='online' >上线及时通知</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
})} |
|
|
|
</Collapse.Panel> |
|
|
|
)})} |
|
|
|
</Collapse> |
|
|
|
</TabPane> |
|
|
|
<TabPane tab="监听范围" itemKey="2"> |
|
|
|
22 |
|
|
|
<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: 24, height: 24 }} |
|
|
|
/> |
|
|
|
<div>{equipmentTest}</div> |
|
|
|
</div> |
|
|
|
</TabPane> |
|
|
|
<TabPane tab="接收信息" itemKey="3"> |
|
|
|
33 |
|
|
|
<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"} |
|
|
|
alt="设置" |
|
|
|
style={{ width: 24, height: 24 }} |
|
|
|
/> |
|
|
|
<div>{noticeTest}</div> |
|
|
|
</div> |
|
|
|
</TabPane> |
|
|
|
</Tabs> |
|
|
|
</SideSheet> |
|
|
|
|
