101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import {Container, Menu, Grid, Button, Input, Segment, Table} from 'semantic-ui-react';
|
|
import DeviceList from './DeviceList';
|
|
import {convertTime} from '../../../tools';
|
|
import Datetime from 'react-datetime';
|
|
import LogPanel from './LogPanel';
|
|
|
|
let getDayTime = () => {
|
|
let date = new Date();
|
|
date.setHours(0,0,0,0);
|
|
return date.getTime();
|
|
}
|
|
|
|
class ModbusLogPage extends React.Component {
|
|
state = {
|
|
selected: [],
|
|
stime: getDayTime(),
|
|
etime: Date.now()
|
|
}
|
|
|
|
toggleSelect = (id) => {
|
|
let selected = [...this.state.selected];
|
|
let idx = selected.indexOf(id);
|
|
if(idx == -1) selected.push(id);
|
|
else selected.splice(idx, 1);
|
|
|
|
this.setState({
|
|
selected
|
|
})
|
|
}
|
|
|
|
getLogList = () => {
|
|
let ids = [...this.state.selected];
|
|
let data = {
|
|
ids,
|
|
stime: Math.floor(this.state.stime /1000),
|
|
etime: Math.floor(this.state.etime)
|
|
}
|
|
|
|
if(ids.length == 0) return this.props.showDialog('請選擇裝置');
|
|
|
|
this.props.getMBLog(data);
|
|
}
|
|
|
|
componentDidMount(){
|
|
this.props.getList();
|
|
|
|
this.props.router.setRouteLeaveHook(this.props.route, () => {
|
|
this.props.clearList();
|
|
});
|
|
}
|
|
|
|
render(){
|
|
let {i18n, list, log} = this.props;
|
|
|
|
return (
|
|
<Container>
|
|
<Menu>
|
|
<Menu.Item>
|
|
<Input label="起始時間" input={
|
|
<Datetime dateFormat="YYYY-MM-DD"
|
|
timeFormat="HH:mm"
|
|
value={convertTime(this.state.stime)}
|
|
input={true}
|
|
onChange={(e)=>{ this.setState({stime: e.valueOf()}) }} />
|
|
}/>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<Input label="結束時間" input={
|
|
<Datetime dateFormat="YYYY-MM-DD"
|
|
timeFormat="HH:mm"
|
|
value={convertTime(this.state.etime)}
|
|
input={true}
|
|
onChange={(e)=>{ this.setState({etime: e.valueOf()}) }} />
|
|
}/>
|
|
</Menu.Item>
|
|
<Menu.Menu position="right">
|
|
<Menu.Item>
|
|
<Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getLogList()}} />
|
|
</Menu.Item>
|
|
</Menu.Menu>
|
|
</Menu>
|
|
<Grid>
|
|
<Grid.Column width={4}>
|
|
<DeviceList i18n={i18n}
|
|
list={list}
|
|
selected={this.state.selected}
|
|
toggleSelect={this.toggleSelect}
|
|
/>
|
|
</Grid.Column>
|
|
<Grid.Column width={12}>
|
|
<LogPanel i18n={i18n}
|
|
log={log} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ModbusLogPage; |