add modbus value convert modal
This commit is contained in:
parent
2d958f2d85
commit
768bad6e2d
|
|
@ -0,0 +1,74 @@
|
|||
import React from 'react';
|
||||
import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
|
||||
|
||||
const CalModal = ({ i18n, onClose, onSubmit }) => {
|
||||
|
||||
return (
|
||||
<Modal open={true}>
|
||||
<Modal.Header content="數值換算" />
|
||||
<Modal.Content>
|
||||
<Form onSubmit={(e,d) => {
|
||||
e.preventDefault();
|
||||
onSubmit(d.formData);
|
||||
}} serializer={e=>{
|
||||
let json = {
|
||||
r1: '',
|
||||
r2: '',
|
||||
s1: '',
|
||||
s2: '',
|
||||
val: ''
|
||||
}
|
||||
|
||||
let r1 = e.querySelector('input[name="r1"]');
|
||||
if(r1 && 'value' in r1) json.r1 = r1.value;
|
||||
let r2 = e.querySelector('input[name="r2"]');
|
||||
if(r2 && 'value' in r2) json.r2 = r2.value;
|
||||
let s1 = e.querySelector('input[name="s1"]');
|
||||
if(s1 && 'value' in s1) json.s1 = s1.value;
|
||||
let s2 = e.querySelector('input[name="s2"]');
|
||||
if(s2 && 'value' in s2) json.s2 = s2.value;
|
||||
let val = e.querySelector('input[name="val"]');
|
||||
if(val && 'value' in val) json.val = val.value;
|
||||
|
||||
return json;
|
||||
}}>
|
||||
<Form.Field>
|
||||
<label>Range</label>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Input label="RangeMin" name="r1" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Input label="RangeMax" name="r2" />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>Scale</label>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Input label="ScaleMin" name="s1" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Input label="ScaleMax" name="s2" />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Input label="輸入數值" name="val" />
|
||||
</Form.Field>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Button fluid content="送出" basic />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalModal;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import {Form, Input} from 'semantic-ui-react';
|
||||
import { getRequest } from '../../../../actions';
|
||||
import CalModal from './CalModal';
|
||||
|
||||
class UnitLeone extends React.Component {
|
||||
state = {
|
||||
|
|
@ -12,7 +13,8 @@ class UnitLeone extends React.Component {
|
|||
funcName: '',
|
||||
addr: '',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
modal: false
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -27,6 +29,38 @@ class UnitLeone extends React.Component {
|
|||
})
|
||||
}
|
||||
|
||||
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({
|
||||
data:{
|
||||
...this.state.data,
|
||||
value
|
||||
}
|
||||
}, ()=>{this.closeModal()})
|
||||
}
|
||||
|
||||
changeState = (tag, value) =>{
|
||||
let data = {...this.state.data};
|
||||
|
||||
|
|
@ -77,7 +111,7 @@ class UnitLeone extends React.Component {
|
|||
let {i18n} = this.props;
|
||||
let dev = '';
|
||||
let m = this.state.data.dev.match(/(\d+)/);
|
||||
console.log(this.state)
|
||||
|
||||
if(m!=null && m.length > 1){
|
||||
dev = m[1];
|
||||
}
|
||||
|
|
@ -128,8 +162,21 @@ class UnitLeone extends React.Component {
|
|||
<Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Input label="輸入數值" value={this.state.data.value} onChange={(e,d) => {this.changeState('value', d.value)}} />
|
||||
<Input label="輸入數值"
|
||||
value={this.state.data.value}
|
||||
onChange={(e,d) => {this.changeState('value', d.value)}}
|
||||
action={{
|
||||
content:"數值換算",
|
||||
basic: true,
|
||||
onClick: ()=>{
|
||||
this.setState({
|
||||
modal: true
|
||||
})
|
||||
},
|
||||
type: 'button'
|
||||
}} />
|
||||
</Form.Field>
|
||||
{this.renderModal()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import React from 'react';
|
||||
import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
|
||||
|
||||
const CalModal = ({ i18n, onClose, onSubmit }) => {
|
||||
|
||||
return (
|
||||
<Modal open={true}>
|
||||
<Modal.Header content="數值換算" />
|
||||
<Modal.Content>
|
||||
<Form onSubmit={(e,d) => {
|
||||
e.preventDefault();
|
||||
onSubmit(d.formData);
|
||||
}} serializer={e=>{
|
||||
let json = {
|
||||
r1: '',
|
||||
r2: '',
|
||||
s1: '',
|
||||
s2: '',
|
||||
val: ''
|
||||
}
|
||||
|
||||
let r1 = e.querySelector('input[name="r1"]');
|
||||
if(r1 && 'value' in r1) json.r1 = r1.value;
|
||||
let r2 = e.querySelector('input[name="r2"]');
|
||||
if(r2 && 'value' in r2) json.r2 = r2.value;
|
||||
let s1 = e.querySelector('input[name="s1"]');
|
||||
if(s1 && 'value' in s1) json.s1 = s1.value;
|
||||
let s2 = e.querySelector('input[name="s2"]');
|
||||
if(s2 && 'value' in s2) json.s2 = s2.value;
|
||||
let val = e.querySelector('input[name="val"]');
|
||||
if(val && 'value' in val) json.val = val.value;
|
||||
|
||||
return json;
|
||||
}}>
|
||||
<Form.Field>
|
||||
<label>Range</label>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Input label="RangeMin" name="r1" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Input label="RangeMax" name="r2" />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>Scale</label>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Input label="ScaleMin" name="s1" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Input label="ScaleMax" name="s2" />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Input label="輸入數值" name="val" />
|
||||
</Form.Field>
|
||||
<Grid columns={2}>
|
||||
<Grid.Column>
|
||||
<Button fluid content="送出" basic />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalModal;
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
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: ''
|
||||
res: '',
|
||||
value: '',
|
||||
modal: false
|
||||
}
|
||||
|
||||
handleSubmit = (data) => {
|
||||
|
|
@ -24,6 +27,35 @@ class ModbusCmdPage extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -66,7 +98,20 @@ class ModbusCmdPage extends React.Component {
|
|||
<Input name="addr" label="請輸入位址" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Input name="val" label="請輸入數值" />
|
||||
<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>
|
||||
|
|
@ -78,6 +123,7 @@ class ModbusCmdPage extends React.Component {
|
|||
))
|
||||
}
|
||||
</Segment>
|
||||
{this.renderModal()}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue