132 lines
3.6 KiB
JavaScript
132 lines
3.6 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"
|
|
}
|
|
]
|
|
|
|
class UnitItem extends React.Component {
|
|
|
|
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}/>)
|
|
}
|
|
</Segment>
|
|
</Grid.Column>
|
|
)
|
|
}
|
|
}
|
|
|
|
const UnitPanel = ({data}) => {
|
|
if (data.st == 'di') {
|
|
return (
|
|
<div>
|
|
<LC_List data={data} />
|
|
<select>
|
|
<option value="">選擇狀態</option>
|
|
<option value="0">0</option>
|
|
<option value="1">1</option>
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
if(data.st == 'leone') {
|
|
return (
|
|
<div>
|
|
<LC_List data={data} />
|
|
<select>
|
|
<option value="">選擇感測器</option>
|
|
<option value="leone_ttrigger1">溫度</option>
|
|
<option value="leone_htrigger1">濕度</option>
|
|
</select>
|
|
<Input size="mini" placeholder="請輸入數值" />
|
|
</div>
|
|
)
|
|
}
|
|
if(data.st == 'unit') {
|
|
return (
|
|
<div>
|
|
<select>
|
|
<option value="">選擇群組</option>
|
|
{
|
|
data.list.map((t,idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
const LC_List = ({data}) => {
|
|
return (
|
|
<div>
|
|
<select>
|
|
<option value="">選擇裝置</option>
|
|
{
|
|
data.list.map((t, idx) => (
|
|
<option key={idx} value={t.id}>{t.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
<select>
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UnitItem; |