117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import {Input} from 'semantic-ui-react';
|
|
import {getRequest} from '../../../../../actions';
|
|
|
|
class UnitLeone extends React.Component {
|
|
state = {
|
|
list: [],
|
|
data: {
|
|
id: '',
|
|
op: '',
|
|
mode: '',
|
|
value: ''
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
let {showDialog, toggleLoading} = this.props;
|
|
|
|
toggleLoading(1);
|
|
fetch('/api/system/getselectlist', getRequest({type: 'leone'}))
|
|
.then(response=>response.json())
|
|
.then(json=>{
|
|
toggleLoading(0);
|
|
if(json.status != 1) return showDialog(json.message);
|
|
this.setState({
|
|
list: json.data.record || []
|
|
})
|
|
})
|
|
}
|
|
|
|
componentWillReceiveProps(np) {
|
|
let data = {...this.state.data};
|
|
if(np.data.op != data.op) data.op = np.data.op;
|
|
if(np.data.value != data.value) data.value = np.data.op;
|
|
|
|
let id = np.data.id.split(',')[0];
|
|
let mode = np.data.id.split(',')[1];
|
|
if(id != data.id) data.id = id;
|
|
if(mode != data.mode) data.mode = mode;
|
|
|
|
this.setState({
|
|
data: {...data}
|
|
})
|
|
}
|
|
|
|
changeState = (key, value) => {
|
|
let data = {
|
|
...this.state.data
|
|
}
|
|
if(key == 'dev') {
|
|
data.id = value == '' ? '' : `le${value}`;
|
|
}
|
|
if(key == 'mode'){
|
|
data.mode = value;
|
|
}
|
|
if(key == 'op'){
|
|
data.op = value;
|
|
}
|
|
if(key == 'value') {
|
|
data.value = value;
|
|
}
|
|
|
|
this.setState({
|
|
data: {...data}
|
|
}, ()=>{ this.sendUpdate() });
|
|
}
|
|
|
|
sendUpdate = () => {
|
|
let data = {...this.state.data};
|
|
data.id = `${data.id},${data.mode}`;
|
|
delete data.mode;
|
|
this.props.updateData({...this.props.data, ...data});
|
|
}
|
|
|
|
render() {
|
|
let {ops} = this.props;
|
|
let id = '';
|
|
if(this.state.data.id != '') {
|
|
let m = this.state.data.id.match(/(\d+)/);
|
|
if(m != null && m.length > 1){
|
|
id = m[1];
|
|
}
|
|
}
|
|
return (
|
|
<div>
|
|
<select value={id} onChange={e => {this.changeState('dev', e.target.value)}}>
|
|
<option value="">選擇裝置</option>
|
|
{
|
|
this.state.list.map((t,idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
<select value={this.state.data.mode} onChange={e=>{this.changeState('mode', e.target.value)}}>
|
|
<option value="">選擇感測器</option>
|
|
<option value="leone_ttrigger1">溫度</option>
|
|
<option value="leone_htrigger1">濕度</option>
|
|
</select>
|
|
<select value={this.state.data.op} onChange={e=>{this.changeState('op', e.target.value)}}>
|
|
<option value="">選擇條件</option>
|
|
{
|
|
ops.map((t,idx) => {
|
|
if(t.code != 8 && t.code != 9) {
|
|
return (
|
|
<option value={t.code} key={idx}>{t.name}</option>
|
|
)
|
|
}
|
|
})
|
|
}
|
|
</select>
|
|
<Input placeholder="請輸入數值" value={this.state.data.value} onChange={(e, d)=>{this.changeState('value', d.value)}} />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default UnitLeone; |