279 lines
9.0 KiB
JavaScript
279 lines
9.0 KiB
JavaScript
import React from 'react';
|
|
import {Grid, Form, Segment, Input} from 'semantic-ui-react';
|
|
|
|
const ops = [
|
|
{
|
|
"code": "0",
|
|
"name": "等於"
|
|
}, {
|
|
"code": "1",
|
|
"name": "大於"
|
|
}, {
|
|
"code": "2",
|
|
"name": "小於"
|
|
}, {
|
|
"code": "3",
|
|
"name": "大於等於"
|
|
}, {
|
|
"code": "4",
|
|
"name": "小於等於"
|
|
}, {
|
|
"code": "5",
|
|
"name": "不等於"
|
|
}, {
|
|
"code": "8",
|
|
"name": "AND"
|
|
}, {
|
|
"code": "9",
|
|
"name": "OR"
|
|
}
|
|
]
|
|
|
|
const stype = {
|
|
di: {
|
|
prefix: 'di',
|
|
dev: '',
|
|
op: '',
|
|
value: '',
|
|
mode: 'di_status'
|
|
},
|
|
leone: {
|
|
prefix: 'le',
|
|
dev: '',
|
|
op: '',
|
|
value: '',
|
|
mode: ''
|
|
},
|
|
unit: {
|
|
dev: ''
|
|
},
|
|
time: {
|
|
op: '',
|
|
dev: 'dt0',
|
|
mode: 'mode0',
|
|
year: '-',
|
|
week: '-',
|
|
month: '-',
|
|
day: '-',
|
|
hour: '-',
|
|
min: '-'
|
|
}
|
|
}
|
|
|
|
class UnitItem extends React.Component {
|
|
|
|
state = {
|
|
st: '',
|
|
data:{}
|
|
}
|
|
|
|
handleDataChange = (tag, value) => {
|
|
let {data} = this.state;
|
|
let {updateData} = this.props;
|
|
if(tag in data) {
|
|
data[tag] = value;
|
|
}
|
|
|
|
this.setState({
|
|
data
|
|
}, () => {
|
|
let {data} = this.state
|
|
let d = {...this.props.data.data}
|
|
let {st} = this.props.data;
|
|
|
|
if(st == 'di' || st == 'leone'){
|
|
d.id = `${data.prefix}${data.dev},${data.mode}`;
|
|
d.op = data.op;
|
|
d.value = data.value;
|
|
}
|
|
if(st == 'unit') {
|
|
d.dev = data.dev;
|
|
}
|
|
if(st == 'time') {
|
|
d.id = `${data.dev},${data.mode}`;
|
|
d.op = data.op;
|
|
d.value = `${data.min}|${data.hour}|${data.day}|${data.month}|${data.week}|${data.year}`;
|
|
}
|
|
|
|
updateData(this.props.unit, d);
|
|
});
|
|
}
|
|
|
|
componentWillReceiveProps(np) {
|
|
let data = {...this.state.data};
|
|
|
|
if(np.data.st != this.state.st){
|
|
|
|
if(np.data.st in stype) {
|
|
data = {...stype[np.data.st]};
|
|
}else {
|
|
data = {}
|
|
}
|
|
|
|
}
|
|
|
|
this.setState({
|
|
data,
|
|
st: np.data.st
|
|
})
|
|
}
|
|
|
|
render() {
|
|
let {unit, data, getList} = this.props;
|
|
|
|
return (
|
|
<Grid.Column>
|
|
<Segment>
|
|
<Form.Field>
|
|
<label>選擇元件</label>
|
|
<select
|
|
value={data.st}
|
|
onChange={e => {
|
|
getList(unit, e.target.value);
|
|
}}>
|
|
<option value="">請選擇元件</option>
|
|
<option value="leone">LeOne</option>
|
|
<option value="di">DigitInput</option>
|
|
<option value="time">時間</option>
|
|
<option value="unit">已建立群組</option>
|
|
</select>
|
|
</Form.Field>
|
|
{
|
|
!data.st
|
|
? null
|
|
: (<UnitPanel data={data} state={this.state.data} dataChange={this.handleDataChange}/>)
|
|
}
|
|
</Segment>
|
|
</Grid.Column>
|
|
)
|
|
}
|
|
}
|
|
|
|
const UnitPanel = ({data, state, dataChange}) => {
|
|
if (data.st == 'di') {
|
|
return (
|
|
<div>
|
|
<select value={state.dev} onChange={(e) => {
|
|
dataChange('dev', e.target.value);
|
|
}}>
|
|
<option value="">選擇裝置</option>
|
|
{
|
|
data.list.map((t, idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
<select value={state.op} onChange={e => {
|
|
dataChange('op', e.target.value);
|
|
}}>
|
|
<option value="">選擇條件</option>
|
|
{
|
|
ops.map((t,idx) => {
|
|
if(t.code == 8 || t.code == 9) return ;
|
|
return (<option key={idx} value={t.code}>{t.name}</option>)
|
|
})
|
|
}
|
|
</select>
|
|
<select value={state.value} onChange={e => {
|
|
dataChange('value', e.target.value);
|
|
}}>
|
|
<option value="">選擇狀態</option>
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
if(data.st == 'leone') {
|
|
return (
|
|
<div>
|
|
<select value={state.dev} onChange={e => {
|
|
dataChange('dev', e.target.value);
|
|
}}>
|
|
<option value="">選擇裝置</option>
|
|
{
|
|
data.list.map((t, idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
<select value={state.mode} onChange={e => {
|
|
dataChange('mode', e.target.value);
|
|
}}>
|
|
<option value="">選擇感測器</option>
|
|
<option value="leone_ttrigger1">溫度</option>
|
|
<option value="leone_htrigger1">濕度</option>
|
|
</select>
|
|
<select value={state.op} onChange={e => {
|
|
dataChange('op', e.target.value);
|
|
}}>
|
|
<option value="">選擇條件</option>
|
|
{
|
|
ops.map((t,idx) => {
|
|
if(t.code == 8 || t.code == 9) return ;
|
|
return (<option key={idx} value={t.code}>{t.name}</option>)
|
|
})
|
|
}
|
|
</select>
|
|
<Input size="mini" placeholder="請輸入數值" value={state.value} onChange={(e,d) => {
|
|
dataChange('value', d.value);
|
|
}} />
|
|
</div>
|
|
)
|
|
}
|
|
if(data.st == 'unit') {
|
|
return (
|
|
<div>
|
|
<select value={state.dev} onChange={e => {
|
|
dataChange('dev', e.target.value);
|
|
}}>
|
|
<option value="">選擇群組</option>
|
|
{
|
|
data.list.map((t,idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
if(data.st == 'time') {
|
|
return (
|
|
<div>
|
|
<select value={state.op} onChange={e => {
|
|
dataChange('op', e.target.value);
|
|
}}>
|
|
<option value="">選擇條件</option>
|
|
{
|
|
ops.map((t,idx) => {
|
|
if(t.code == 8 || t.code == 9) return ;
|
|
return (<option key={idx} value={t.code}>{t.name}</option>)
|
|
})
|
|
}
|
|
</select>
|
|
<Input size="mini" placeholder="年(不指定請留空)" value={state.year == '-' ? '' : state.year} onChange={(e,d) => {
|
|
dataChange('year', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
<Input size="mini" placeholder="週(不指定請留空)" value={state.week == '-' ? '' : state.week} onChange={(e,d) => {
|
|
dataChange('week', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
<Input size="mini" placeholder="月(不指定請留空)" value={state.month == '-' ? '' : state.month} onChange={(e,d) => {
|
|
dataChange('month', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
<Input size="mini" placeholder="日(不指定請留空)" value={state.day == '-' ? '' : state.day} onChange={(e,d) => {
|
|
dataChange('day', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
<Input size="mini" placeholder="時(不指定請留空)" value={state.hour == '-' ? '' : state.hour} onChange={(e,d) => {
|
|
dataChange('hour', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
<Input size="mini" placeholder="分(不指定請留空)" value={state.min == '-' ? '' : state.min} onChange={(e,d) => {
|
|
dataChange('min', d.value.length == 0 ? '-' : d.value);
|
|
}} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
export default UnitItem; |