86 lines
3.5 KiB
JavaScript
86 lines
3.5 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
|
||
|
|
import {getRequest} from '../../../actions';
|
||
|
|
|
||
|
|
class ModbusCmdPage extends React.Component {
|
||
|
|
|
||
|
|
state = {
|
||
|
|
res: ''
|
||
|
|
}
|
||
|
|
|
||
|
|
handleSubmit = (data) => {
|
||
|
|
let {i18n} = this.props;
|
||
|
|
if(data.ip == '' || data.node == '' || data.func == '' || data.addr == '' || data.value == '') return this.props.showDialog(i18n&&i18n.t?i18n.t('tip.input_empty'):'');
|
||
|
|
this.props.toggleLoading(1);
|
||
|
|
this.setState({res:''})
|
||
|
|
fetch('/api/modbus/modbuscmd', getRequest(data))
|
||
|
|
.then(response=>response.json())
|
||
|
|
.then(json=>{
|
||
|
|
this.props.toggleLoading(0);
|
||
|
|
if(json.status != 1) return this.props.showDialog(json.message);
|
||
|
|
this.setState({
|
||
|
|
res: json.data.record[0].msg || ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<Segment>
|
||
|
|
<Form onSubmit={(e,d)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
this.handleSubmit(d.formData);
|
||
|
|
}} serializer={e=>{
|
||
|
|
let json = {
|
||
|
|
ip: '',
|
||
|
|
node: '',
|
||
|
|
func: '',
|
||
|
|
addr: '',
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
|
||
|
|
let ip = e.querySelector('input[name="ip"]');
|
||
|
|
if(ip && 'value' in ip) json.ip = ip.value;
|
||
|
|
let node = e.querySelector('input[name="node"]');
|
||
|
|
if(node && 'value' in node) json.node = node.value;
|
||
|
|
let func = e.querySelector('input[name="func"]');
|
||
|
|
if(func && 'value' in func) json.func = func.value;
|
||
|
|
let addr = e.querySelector('input[name="addr"]');
|
||
|
|
if(addr && 'value' in addr) json.addr = addr.value;
|
||
|
|
let val = e.querySelector('input[name="val"]');
|
||
|
|
if(val && 'value' in val) json.value = val.value;
|
||
|
|
|
||
|
|
return json;
|
||
|
|
}}>
|
||
|
|
<Form.Field>
|
||
|
|
<Input name="ip" label="請輸入IP" defaultValue="127.0.0.1" />
|
||
|
|
</Form.Field>
|
||
|
|
<Form.Field>
|
||
|
|
<Input name="node" label="請輸入節點" />
|
||
|
|
</Form.Field>
|
||
|
|
<Form.Field>
|
||
|
|
<Input name="func" label="請輸入FunctionCode" />
|
||
|
|
</Form.Field>
|
||
|
|
<Form.Field>
|
||
|
|
<Input name="addr" label="請輸入位址" />
|
||
|
|
</Form.Field>
|
||
|
|
<Form.Field>
|
||
|
|
<Input name="val" label="請輸入數值" />
|
||
|
|
</Form.Field>
|
||
|
|
<Button type="submit" content="送出" fluid />
|
||
|
|
</Form>
|
||
|
|
</Segment>
|
||
|
|
<Segment>
|
||
|
|
{
|
||
|
|
this.state.res.split(/\n/).map((t,idx) => (
|
||
|
|
<div key={idx}>{t}</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</Segment>
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ModbusCmdPage;
|