2017-04-11 08:48:31 +00:00
|
|
|
import React from 'react';
|
|
|
|
import {Container, Segment, Grid, List, Label} from 'semantic-ui-react';
|
2017-04-12 06:26:01 +00:00
|
|
|
import DevField from './DeviceField';
|
2017-04-11 08:48:31 +00:00
|
|
|
|
|
|
|
class ModbusPreview extends React.Component {
|
2017-04-12 06:26:01 +00:00
|
|
|
state = {
|
|
|
|
list: []
|
|
|
|
}
|
2017-04-11 08:48:31 +00:00
|
|
|
|
2017-04-12 06:26:01 +00:00
|
|
|
tick = null
|
|
|
|
|
|
|
|
componentDidMount(){
|
|
|
|
this.getList()
|
|
|
|
this.tick = setInterval(this.runTick, 10000);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount(){
|
|
|
|
clearInterval(this.tick);
|
|
|
|
}
|
2017-04-11 08:48:31 +00:00
|
|
|
|
2017-04-12 06:26:01 +00:00
|
|
|
runTick = () => {
|
|
|
|
this.getList();
|
|
|
|
}
|
|
|
|
|
|
|
|
getList = () => {
|
|
|
|
let {getRequest, showDialog} = this.props;
|
|
|
|
fetch('/api/modbus/getalliostatus', getRequest())
|
|
|
|
.then(response=>response.json())
|
|
|
|
.then(json => {
|
|
|
|
if(json.status != 1) return showDialog(json.message);
|
|
|
|
let dev = json.data.rt.device || [];
|
|
|
|
let status = json.data.record || [];
|
|
|
|
for(let i in dev) {
|
|
|
|
dev[i].list = [];
|
|
|
|
for(let j in status){
|
|
|
|
if(status[j].node == dev[i].node){
|
|
|
|
dev[i].list.push(status[j]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
list: dev
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let {i18n} = this.props;
|
2017-04-11 08:48:31 +00:00
|
|
|
return (
|
2017-04-12 06:26:01 +00:00
|
|
|
<Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
|
|
|
|
<Grid columns={3}>
|
|
|
|
{
|
|
|
|
this.state.list.map((t,idx) => (
|
|
|
|
<DevField key={idx} i18n={i18n} data={t} />
|
|
|
|
))
|
|
|
|
}
|
|
|
|
</Grid>
|
|
|
|
</Container>
|
2017-04-11 08:48:31 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ModbusPreview;
|