add event history
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { Modal, Grid, List, Menu, Icon } from 'semantic-ui-react';
|
||||
import {convertTime} from '../../../tools';
|
||||
import ImgGrid from './EvtImgGrid';
|
||||
|
||||
const EventModal = ({ i18n, open, name, list, sel, closeEventModal, changeSelectEvent,refreshEvt }) => {
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={()=>{closeEventModal()}} size="fullscreen">
|
||||
<Modal.Header content={`IPCam: ${name}`} />
|
||||
<Modal.Content>
|
||||
<Grid>
|
||||
<Grid.Column width={4}>
|
||||
<Menu vertical>
|
||||
<Menu.Item>
|
||||
<Menu.Header>
|
||||
事件列表
|
||||
<Icon name="refresh" style={{
|
||||
cursor: "pointer",
|
||||
float: 'right'
|
||||
}} onClick={()=>{refreshEvt(-1)}}/>
|
||||
</Menu.Header>
|
||||
<Menu.Menu>
|
||||
{
|
||||
list.map((t,idx) =>{
|
||||
let n = t.name;
|
||||
let time = n.split('-')[1];
|
||||
return (
|
||||
<Menu.Item key={idx} active={sel == idx} onClick={()=>{changeSelectEvent(idx)}}>
|
||||
{convertTime(time, true)}
|
||||
</Menu.Item>
|
||||
)})
|
||||
}
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={12}>
|
||||
{
|
||||
sel != -1 ?
|
||||
(
|
||||
<ImgGrid i18n={i18n}
|
||||
dname={list[sel].name}
|
||||
list={list[sel].files.img} />
|
||||
) : null
|
||||
}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventModal;
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import {Grid, Image} from 'semantic-ui-react';
|
||||
|
||||
const EvtImgGrid = ({ i18n, dname, list }) => {
|
||||
|
||||
return (
|
||||
<Grid columns={3}>
|
||||
{
|
||||
list.map((t,idx) => {
|
||||
return (
|
||||
<Grid.Column key={idx}>
|
||||
<Image fluid src={`/viewcamimg/${dname}/${t}`} href={`/viewcamimg/${dname}/${t}`} target="_blank"/>
|
||||
</Grid.Column>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
export default EvtImgGrid;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import {Table, Button} from 'semantic-ui-react';
|
||||
|
||||
const ListItem = ({ i18n, data, swActive, openModal, delIPCam }) => {
|
||||
const ListItem = ({ i18n, data, swActive, openModal, delIPCam, getEvents }) => {
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
@@ -9,10 +9,12 @@ const ListItem = ({ i18n, data, swActive, openModal, delIPCam }) => {
|
||||
<Button basic content="修改" type="button" onClick={()=>openModal(1, data)} />
|
||||
<Button basic content="刪除" type="button" onClick={()=>delIPCam(data.uid)}/>
|
||||
<Button basic content={data.active == 1 ? '停用' : '啟用'} type="button" onClick={()=>swActive(data.uid)} />
|
||||
<Button basic content="事件紀錄" type="button" onClick={()=>getEvents(data.uid, data.name)} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>{data.name}</Table.Cell>
|
||||
<Table.Cell>{data.ip}</Table.Cell>
|
||||
<Table.Cell>{data.model}</Table.Cell>
|
||||
<Table.Cell>{data.model == 'AXIS-M1124' ? `/${data.model}-${data.uid}` : '/'}</Table.Cell>
|
||||
<Table.Cell>{data.active == 1? '啟用' : '停用'}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Container, Segment, Table, Button, Label } from 'semantic-ui-react';
|
||||
import { Container, Segment, Table, Button, Label, Message } from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../actions';
|
||||
import ListItem from './ListItem';
|
||||
import IPCamModal from './IPCamModal';
|
||||
|
||||
import EvtModal from './EventModal';
|
||||
|
||||
const stateDefault = ()=>({
|
||||
list: [],
|
||||
@@ -11,6 +11,13 @@ const stateDefault = ()=>({
|
||||
type: 0,
|
||||
open: false,
|
||||
data: {}
|
||||
},
|
||||
evt: {
|
||||
open: false,
|
||||
list: [],
|
||||
name: '',
|
||||
sel: -1,
|
||||
id: -1
|
||||
}
|
||||
})
|
||||
|
||||
@@ -101,11 +108,55 @@ class IPCamPage extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getEvents = (id, name = '') => {
|
||||
if(!id) return ;
|
||||
if(id==-1) id = this.state.evt.id;
|
||||
let {callConfirm, toggleLoading, showDialog} = this.props;
|
||||
toggleLoading(1);
|
||||
fetch('/api/ipcam/getevents', getRequest({id}))
|
||||
.then(response=>response.json())
|
||||
.then(json => {
|
||||
toggleLoading(0);
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
evt: {
|
||||
open: true,
|
||||
list: json.data.record || [],
|
||||
name: name != '' ? name : this.state.evt.name,
|
||||
sel: -1,
|
||||
id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
closeEventModal = () => {
|
||||
this.setState({
|
||||
evt: {
|
||||
...stateDefault().evt
|
||||
}
|
||||
})
|
||||
}
|
||||
changeSelectEvent = (idx) => {
|
||||
if(!isFinite(idx) || idx < 0) return ;
|
||||
this.setState({
|
||||
evt:{
|
||||
...this.state.evt,
|
||||
sel: idx
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let {i18n} = this.props;
|
||||
return (
|
||||
<Container>
|
||||
<Segment className="clearfix">
|
||||
<Message>
|
||||
<Message.Header>攝影機事件通知位址</Message.Header>
|
||||
<p>
|
||||
{`${location.protocol}//${location.host}${location.port != '' ? `:${location.port}` : ''}/camevent`}
|
||||
</p>
|
||||
</Message>
|
||||
<Button basic content="新增" icon="plus" floated="right" type="button" style={{marginBottom: '15px'}} color="green" onClick={()=>{this.openModal(0)}} />
|
||||
<Table>
|
||||
<Table.Header>
|
||||
@@ -114,6 +165,7 @@ class IPCamPage extends React.Component {
|
||||
<Table.HeaderCell>名稱</Table.HeaderCell>
|
||||
<Table.HeaderCell>IP</Table.HeaderCell>
|
||||
<Table.HeaderCell>型號</Table.HeaderCell>
|
||||
<Table.HeaderCell>FTP路徑</Table.HeaderCell>
|
||||
<Table.HeaderCell>啟用狀態</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
@@ -125,7 +177,8 @@ class IPCamPage extends React.Component {
|
||||
data={t}
|
||||
swActive={this.swActive}
|
||||
delIPCam={this.delIPCam}
|
||||
openModal={this.openModal} />
|
||||
openModal={this.openModal}
|
||||
getEvents={this.getEvents} />
|
||||
))
|
||||
}
|
||||
</Table.Body>
|
||||
@@ -137,6 +190,14 @@ class IPCamPage extends React.Component {
|
||||
type={this.state.modal.type}
|
||||
closeModal={this.closeModal}
|
||||
submitModal={this.submitModal} />
|
||||
<EvtModal i18n={i18n}
|
||||
open={this.state.evt.open}
|
||||
list={this.state.evt.list}
|
||||
sel={this.state.evt.sel}
|
||||
name={this.state.evt.name}
|
||||
refreshEvt={this.getEvents}
|
||||
closeEventModal={this.closeEventModal}
|
||||
changeSelectEvent={this.changeSelectEvent} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user