add modbus log

2017-03-29 15:06:50 +08:00
parent 77bf5f58d2
commit 3e66691b67
15 changed files with 5579 additions and 4735 deletions
@@ -0,0 +1,101 @@
+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;