132 lines
5.0 KiB
JavaScript
132 lines
5.0 KiB
JavaScript
import React from 'react';
|
|
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
|
|
import {getRequest} from '../../../actions';
|
|
import CalModal from './CalModal';
|
|
|
|
class ModbusCmdPage extends React.Component {
|
|
|
|
state = {
|
|
res: '',
|
|
value: '',
|
|
modal: false
|
|
}
|
|
|
|
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 || ''
|
|
})
|
|
});
|
|
}
|
|
|
|
renderModal = () => {
|
|
let {i18n} = this.props;
|
|
return (
|
|
this.state.modal ?
|
|
(
|
|
<CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
|
|
): null
|
|
)
|
|
}
|
|
|
|
closeModal = () => {
|
|
this.setState({
|
|
modal: false
|
|
})
|
|
}
|
|
|
|
submitModal = (data) => {
|
|
if(!data) return ;
|
|
let {showDialog} = this.props;
|
|
let {r1, r2, s1, s2, val} = data;
|
|
if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
|
|
|
|
let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
|
|
|
|
this.setState({
|
|
value
|
|
}, ()=>{this.closeModal()})
|
|
}
|
|
|
|
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="請輸入數值"
|
|
action={{
|
|
content: "數值換算",
|
|
basic: true,
|
|
type: 'button',
|
|
onClick: ()=>{
|
|
this.setState({
|
|
modal: true
|
|
})
|
|
}
|
|
}}
|
|
value={this.state.value}
|
|
onChange={(e,d) => {this.setState({value: d.value})}} />
|
|
</Form.Field>
|
|
<Button type="submit" content="送出" fluid />
|
|
</Form>
|
|
</Segment>
|
|
<Segment>
|
|
{
|
|
this.state.res.split(/\n/).map((t,idx) => (
|
|
<div key={idx}>{t}</div>
|
|
))
|
|
}
|
|
</Segment>
|
|
{this.renderModal()}
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ModbusCmdPage; |