addlink page fin
This commit is contained in:
parent
8947715671
commit
7255b3fdd2
@ -8,7 +8,7 @@
|
|||||||
"db": {
|
"db": {
|
||||||
"user": "webio",
|
"user": "webio",
|
||||||
"pass": "16055536",
|
"pass": "16055536",
|
||||||
"host": "192.168.98.227",
|
"host": "localhost",
|
||||||
"port": "3306",
|
"port": "3306",
|
||||||
"db1": "jcwebioc",
|
"db1": "jcwebioc",
|
||||||
"db2": "jciocer",
|
"db2": "jciocer",
|
||||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
17
src/components/AdminPage/ActionLinkAdd/ActionItem.js
Normal file
17
src/components/AdminPage/ActionLinkAdd/ActionItem.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {List, Label, Button} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const ActionItem = ({i18n, data, idx, removeAction}) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List.Item>
|
||||||
|
<Label basic content={`裝置名稱`} /><span>{data.devName}</span>
|
||||||
|
<Label basic content={`動作`} /><span>{data.actName}</span>
|
||||||
|
<Button floated="right" color="red" basic size="tiny" content="Delete" type="button" onClick={()=>{
|
||||||
|
removeAction(idx);
|
||||||
|
}}/>
|
||||||
|
</List.Item>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ActionItem;
|
127
src/components/AdminPage/ActionLinkAdd/ActionSelect.js
Normal file
127
src/components/AdminPage/ActionLinkAdd/ActionSelect.js
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Form, Button, Input, Segment} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
class ActionSelect extends React.Component{
|
||||||
|
state = {
|
||||||
|
showTemp: false,
|
||||||
|
temp: '0'
|
||||||
|
}
|
||||||
|
|
||||||
|
checkShowTemp = (cmd = '') => {
|
||||||
|
let c = cmd;
|
||||||
|
let cs = c.split(' ');
|
||||||
|
let showTemp = false;
|
||||||
|
if(cs[0] == 2) {
|
||||||
|
showTemp = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
showTemp
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTemp = (temp) => {
|
||||||
|
this.setState({
|
||||||
|
temp
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
let {i18n,list, unit, getList, addAction} = this.props;
|
||||||
|
let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
|
||||||
|
return (
|
||||||
|
<Form.Field>
|
||||||
|
<label>加入動作</label>
|
||||||
|
<Segment color="green" className="clearfix">
|
||||||
|
<Form.Group inline>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇裝置</label>
|
||||||
|
<select ref="devType" onChange={e=>{
|
||||||
|
getList(unit, e.target.value);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇裝置類型</option>
|
||||||
|
<option value="do">DigitOutput</option>
|
||||||
|
<option value="leone">LeOne</option>
|
||||||
|
<option value="iogroup">IOGroup</option>
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<select ref="devName">
|
||||||
|
<option value="">選擇裝置</option>
|
||||||
|
{
|
||||||
|
list.map((t,idx)=>(<option key={idx} value={t.id}>{t.name}</option>))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group inline>
|
||||||
|
<Form.Field>
|
||||||
|
<label>選擇動作</label>
|
||||||
|
<select ref="act" onChange={e=>{
|
||||||
|
this.checkShowTemp(e.target.value);
|
||||||
|
}}>
|
||||||
|
<option value="">選擇動作</option>
|
||||||
|
{
|
||||||
|
actlist.map((t,idx) => (
|
||||||
|
<option key={idx} value={t.cmd}>{t.name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
{
|
||||||
|
this.state.showTemp ?
|
||||||
|
(
|
||||||
|
<Form.Field>
|
||||||
|
<Input size="mini" placeholder="請輸入溫度" value={this.state.temp} onChange={(e,d) => {
|
||||||
|
this.updateTemp(d.value);
|
||||||
|
}} />
|
||||||
|
</Form.Field>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
|
</Form.Group>
|
||||||
|
<Button floated="right" content="加入動作" size="tiny" basic color="orange" onClick={()=>{
|
||||||
|
let type = this.refs.devType.value;
|
||||||
|
let dev = this.refs.devName.value;
|
||||||
|
let devName = this.refs.devName.options[this.refs.devName.selectedIndex].innerHTML;
|
||||||
|
let act = this.refs.act.value;
|
||||||
|
let actName = this.refs.act.options[this.refs.act.selectedIndex].innerHTML;
|
||||||
|
let temp = this.state.temp;
|
||||||
|
let prefix = '';
|
||||||
|
|
||||||
|
switch(type){
|
||||||
|
case 'do':
|
||||||
|
prefix = 'do';
|
||||||
|
break;
|
||||||
|
case 'leone':
|
||||||
|
prefix = 'le';
|
||||||
|
break;
|
||||||
|
case 'iogroup':
|
||||||
|
prefix = 'iogroup';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return addAction(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!act) return addAction(null);
|
||||||
|
if(act == 2) {
|
||||||
|
act = `${act} ${temp}`;
|
||||||
|
actName += ` ${temp}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
id: `${prefix}${dev}`,
|
||||||
|
act,
|
||||||
|
actName,
|
||||||
|
devName
|
||||||
|
};
|
||||||
|
|
||||||
|
return addAction(data);
|
||||||
|
|
||||||
|
}} />
|
||||||
|
</Segment>
|
||||||
|
</Form.Field>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ActionSelect;
|
@ -29,10 +29,98 @@ const ops = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
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 {
|
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() {
|
render() {
|
||||||
let {unit, data, getList} = this.props;
|
let {unit, data, getList} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid.Column>
|
<Grid.Column>
|
||||||
<Segment>
|
<Segment>
|
||||||
@ -53,7 +141,7 @@ class UnitItem extends React.Component {
|
|||||||
{
|
{
|
||||||
!data.st
|
!data.st
|
||||||
? null
|
? null
|
||||||
: (<UnitPanel data={data}/>)
|
: (<UnitPanel data={data} state={this.state.data} dataChange={this.handleDataChange}/>)
|
||||||
}
|
}
|
||||||
</Segment>
|
</Segment>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
@ -61,12 +149,34 @@ class UnitItem extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const UnitPanel = ({data}) => {
|
const UnitPanel = ({data, state, dataChange}) => {
|
||||||
if (data.st == 'di') {
|
if (data.st == 'di') {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<LC_List data={data} />
|
<select value={state.dev} onChange={(e) => {
|
||||||
<select>
|
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="">選擇狀態</option>
|
||||||
<option value="0">0</option>
|
<option value="0">0</option>
|
||||||
<option value="1">1</option>
|
<option value="1">1</option>
|
||||||
@ -77,20 +187,46 @@ const UnitPanel = ({data}) => {
|
|||||||
if(data.st == 'leone') {
|
if(data.st == 'leone') {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<LC_List data={data} />
|
<select value={state.dev} onChange={e => {
|
||||||
<select>
|
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="">選擇感測器</option>
|
||||||
<option value="leone_ttrigger1">溫度</option>
|
<option value="leone_ttrigger1">溫度</option>
|
||||||
<option value="leone_htrigger1">濕度</option>
|
<option value="leone_htrigger1">濕度</option>
|
||||||
</select>
|
</select>
|
||||||
<Input size="mini" placeholder="請輸入數值" />
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if(data.st == 'unit') {
|
if(data.st == 'unit') {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<select>
|
<select value={state.dev} onChange={e => {
|
||||||
|
dataChange('dev', e.target.value);
|
||||||
|
}}>
|
||||||
<option value="">選擇群組</option>
|
<option value="">選擇群組</option>
|
||||||
{
|
{
|
||||||
data.list.map((t,idx) => (
|
data.list.map((t,idx) => (
|
||||||
@ -101,32 +237,43 @@ const UnitPanel = ({data}) => {
|
|||||||
</div>
|
</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;
|
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;
|
export default UnitItem;
|
41
src/components/AdminPage/ActionLinkAdd/ViewTreeModal.js
Normal file
41
src/components/AdminPage/ActionLinkAdd/ViewTreeModal.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {Modal, Form, Button} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
const ViewTree = ({i18n, open, data, closeView, removeNode}) => {
|
||||||
|
let seNode = null;
|
||||||
|
let nodeKey = Object.keys(data);
|
||||||
|
return (
|
||||||
|
<Modal open={open} onClose={()=>{closeView()}} >
|
||||||
|
<Modal.Header content="連動群組資料" />
|
||||||
|
<Modal.Content>
|
||||||
|
<Form as="div">
|
||||||
|
<Form.Group inline>
|
||||||
|
<Form.Field>
|
||||||
|
<label>刪除節點</label>
|
||||||
|
<select ref={node=>seNode=node}>
|
||||||
|
{
|
||||||
|
nodeKey.map((t,idx)=>(
|
||||||
|
<option key={idx} value={t}>{data[t].name}</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</Form.Field>
|
||||||
|
<Form.Field>
|
||||||
|
<Button type="button" basic size="tiny" content="刪除節點" onClick={()=>{
|
||||||
|
if(!seNode) return ;
|
||||||
|
removeNode(seNode.value);
|
||||||
|
}} />
|
||||||
|
</Form.Field>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
<pre>
|
||||||
|
{
|
||||||
|
JSON.stringify(data, null, 4)
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ViewTree;
|
@ -6,15 +6,21 @@ import {
|
|||||||
Input,
|
Input,
|
||||||
Button,
|
Button,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Grid
|
Grid,
|
||||||
|
Menu,
|
||||||
|
List
|
||||||
} from 'semantic-ui-react';
|
} from 'semantic-ui-react';
|
||||||
import {getRequest} from '../../../actions';
|
import {getRequest} from '../../../actions';
|
||||||
import UnitItem from './UnitItem';
|
import UnitItem from './UnitItem';
|
||||||
|
import ActionSelect from './ActionSelect';
|
||||||
|
import ActionItem from './ActionItem';
|
||||||
|
import ViewTree from './ViewTreeModal';
|
||||||
|
|
||||||
const defState = {
|
const defState = () => ({
|
||||||
|
gidx: 0,
|
||||||
groups: {},
|
groups: {},
|
||||||
|
active: false,
|
||||||
edit: {
|
edit: {
|
||||||
active: false,
|
|
||||||
name: '',
|
name: '',
|
||||||
type: 'ln',
|
type: 'ln',
|
||||||
op: '',
|
op: '',
|
||||||
@ -28,8 +34,11 @@ const defState = {
|
|||||||
list: [],
|
list: [],
|
||||||
data: {}
|
data: {}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
actDevlist: [],
|
||||||
|
items: [],
|
||||||
|
showTree: false
|
||||||
|
})
|
||||||
const gtype = {
|
const gtype = {
|
||||||
lc: {
|
lc: {
|
||||||
type: 'lc',
|
type: 'lc',
|
||||||
@ -38,98 +47,304 @@ const gtype = {
|
|||||||
value: ''
|
value: ''
|
||||||
},
|
},
|
||||||
ln: {
|
ln: {
|
||||||
type: 'ln'
|
type: 'ln',
|
||||||
|
dev: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class ActionLinkAdd extends React.Component {
|
class ActionLinkAdd extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
...defState
|
...defState()
|
||||||
}
|
}
|
||||||
|
|
||||||
getSelectList = (unit, type = '') => {
|
getSelectList = (unit, type = '') => {
|
||||||
if (!unit) {
|
if (!unit) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let edit = {
|
if(unit != 'act'){
|
||||||
...this.state.edit
|
let edit = {
|
||||||
};
|
...this.state.edit
|
||||||
if (!(unit in edit)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
edit[unit].st = type;
|
|
||||||
edit[unit].data = {
|
|
||||||
...gtype.lc
|
|
||||||
}
|
|
||||||
if (type != 'di' && type != 'leone') {
|
|
||||||
return this.setState({edit});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type == 'di' || type == 'leone') {
|
|
||||||
this.props.toggleLoading(1);
|
|
||||||
let json = {
|
|
||||||
type
|
|
||||||
};
|
};
|
||||||
fetch('/api/system/getselectlist', getRequest(json))
|
if (!(unit in edit)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
edit[unit].st = type;
|
||||||
|
edit[unit].data = {
|
||||||
|
...gtype.lc
|
||||||
|
}
|
||||||
|
if (type != 'di' && type != 'leone' && type != 'unit') {
|
||||||
|
return this.setState({edit});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type == 'di' || type == 'leone') {
|
||||||
|
this.props.toggleLoading(1);
|
||||||
|
let json = {
|
||||||
|
type
|
||||||
|
};
|
||||||
|
fetch('/api/system/getselectlist', getRequest(json))
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
if (json.status != 1)
|
||||||
|
return this.props.showDialog(json.message);
|
||||||
|
edit[unit].list = json.data.record || [];
|
||||||
|
this.setState({edit}, () => {
|
||||||
|
this.props.toggleLoading(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(type == 'unit') {
|
||||||
|
let list = [];
|
||||||
|
for(let i in this.state.groups){
|
||||||
|
list.push({id: i, name: this.state.groups[i].name});
|
||||||
|
}
|
||||||
|
edit[unit].list = list;
|
||||||
|
edit[unit].data = {
|
||||||
|
...gtype.ln
|
||||||
|
}
|
||||||
|
this.setState({edit})
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
let actDevlist = [];
|
||||||
|
if(!type) {
|
||||||
|
this.setState({
|
||||||
|
actDevlist
|
||||||
|
});
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
this.props.toggleLoading(1);
|
||||||
|
fetch('/api/system/getselectlist', getRequest({type}))
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(json => {
|
.then(json => {
|
||||||
if (json.status != 1)
|
if (json.status != 1)
|
||||||
return this.props.showDialog(json.message);
|
return this.props.showDialog(json.message);
|
||||||
edit[unit].list = json.data.record || [];
|
actDevlist = json.data.record || []
|
||||||
this.setState({edit}, () => {
|
this.setState({
|
||||||
|
actDevlist
|
||||||
|
}, ()=>{
|
||||||
this.props.toggleLoading(0);
|
this.props.toggleLoading(0);
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
|
||||||
if(type == 'unit') {
|
|
||||||
let list = [];
|
|
||||||
for(let i in this.state.groups){
|
|
||||||
list.push({id: i, name: this.state.groups[i].name});
|
|
||||||
}
|
|
||||||
edit[unit].list = list;
|
|
||||||
edit[unit].data = {
|
|
||||||
...gtype.ln
|
|
||||||
}
|
|
||||||
this.setState({edit})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
updateData = (unit, data) => {
|
||||||
|
let {edit} = this.state;
|
||||||
|
if(!(unit in edit)) return ;
|
||||||
|
edit[unit].data = data;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
edit
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateEditData = (tag, value) => {
|
||||||
|
let {edit} = this.state;
|
||||||
|
if(tag in edit){
|
||||||
|
edit[tag] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
edit
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateActive = (active = false) => {
|
||||||
|
this.setState({
|
||||||
|
active: active ? 1 : 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
joinUnit = () => {
|
||||||
|
let {edit} = this.state;
|
||||||
|
let {i18n} = this.props;
|
||||||
|
if(!edit.name || edit.op.length == 0 || Object.keys(edit.id1.data).length == 0 || Object.keys(edit.id2.data).length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
|
||||||
|
if(edit.id1.data.type == 'lc' && (edit.id1.data.id.length == 0 || edit.id1.data.op.length == 0 || edit.id1.data.value.length == 0)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
|
||||||
|
if(edit.id2.data.type == 'lc' && (edit.id2.data.id.length == 0 || edit.id2.data.op.length == 0 || edit.id2.data.value.length == 0)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
|
||||||
|
if(edit.id1.data.type == 'ln' && edit.id1.data.dev.length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
|
||||||
|
if(edit.id2.data.type == 'ln' && edit.id2.data.dev.length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
|
||||||
|
|
||||||
|
let unitKey = [];
|
||||||
|
if(edit.id1.data.type == 'lc'){
|
||||||
|
edit.id1 = {
|
||||||
|
...edit.id1.data
|
||||||
|
}
|
||||||
|
}else if(edit.id1.data.type == 'ln'){
|
||||||
|
unitKey.push(edit.id1.data.dev)
|
||||||
|
edit.id1 = {
|
||||||
|
...this.state.groups[edit.id1.data.dev]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(edit.id2.data.type == 'lc'){
|
||||||
|
edit.id2 = {
|
||||||
|
...edit.id2.data
|
||||||
|
}
|
||||||
|
}else if(edit.id2.data.type == 'ln'){
|
||||||
|
unitKey.push(edit.id2.data.dev)
|
||||||
|
edit.id2 = {
|
||||||
|
...this.state.groups[edit.id2.data.dev]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let groups = {...this.state.groups};
|
||||||
|
for(let i in unitKey){
|
||||||
|
if(unitKey[i] in groups) delete groups[unitKey[i]];
|
||||||
|
}
|
||||||
|
|
||||||
|
groups[`unit${this.state.gidx}`] = {
|
||||||
|
...edit
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
gidx: this.state.gidx+1,
|
||||||
|
groups: {...groups}
|
||||||
|
}, ()=>{
|
||||||
|
this.resetEdit()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
resetEdit = () => {
|
||||||
|
this.setState({
|
||||||
|
edit:{
|
||||||
|
...defState().edit
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
addAction = (item) => {
|
||||||
|
if(!item) return this.props.showDialog('動作請選擇完整');
|
||||||
|
let cmds = item.act.split(' ');
|
||||||
|
if(cmds.length != 2) return this.props.showDialog('動作選擇錯誤');
|
||||||
|
if(cmds[0] == 2 && (cmds[1] < 16 || cmds[1] > 30)) return this.props.showDialog('溫度範圍錯誤(16-30)');
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
items: [...this.state.items, item]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAction = (idx) => {
|
||||||
|
let items = [...this.state.items];
|
||||||
|
items.splice(idx, 1);
|
||||||
|
this.setState({
|
||||||
|
items
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleView = (sw = false) => {
|
||||||
|
this.setState({
|
||||||
|
showTree: sw ? true : false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
removeNode = (node) => {
|
||||||
|
if(!node) return ;
|
||||||
|
let groups = {...this.state.groups};
|
||||||
|
if(node in groups){
|
||||||
|
delete groups[node];
|
||||||
|
this.setState({
|
||||||
|
groups: {...groups}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
saveLink = () => {
|
||||||
|
if(Object.keys(this.state.groups).length == 0) return this.props.showDialog('請先建立群組');
|
||||||
|
if(Object.keys(this.state.groups).length > 1) return this.props.showDialog('根節點數量大於一');
|
||||||
|
if(this.state.items.length == 0) return this.props.showDialog('請選擇動作');
|
||||||
|
let json = {
|
||||||
|
active: this.state.active,
|
||||||
|
link: this.state.groups[Object.keys(this.state.groups)[0]],
|
||||||
|
action: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
let acts = this.state.items.map(t => {
|
||||||
|
return `${t.id},${t.act.replace(' ', ',')},0`
|
||||||
|
})
|
||||||
|
|
||||||
|
json.action = acts.join('|')
|
||||||
|
|
||||||
|
this.props.toggleLoading(1);
|
||||||
|
fetch('/api/link/addlink', getRequest(json))
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(json => {
|
||||||
|
this.props.toggleLoading(0);
|
||||||
|
if(json.status != 1) return this.props.showDialog(json.message);
|
||||||
|
this.resetAll();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
resetAll = () => {
|
||||||
|
this.setState({
|
||||||
|
...defState()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let {i18n} = this.props;
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
<Menu >
|
||||||
|
<Menu.Menu position="right">
|
||||||
|
<Menu.Item content="ShowTree" onClick={()=>{
|
||||||
|
this.toggleView(1)
|
||||||
|
}}/>
|
||||||
|
<Menu.Item content="Save" onClick={()=>{
|
||||||
|
this.saveLink();
|
||||||
|
}}/>
|
||||||
|
</Menu.Menu>
|
||||||
|
</Menu>
|
||||||
<Form as={Segment}>
|
<Form as={Segment}>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Checkbox label="啟用連動"/>
|
<Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d) =>{
|
||||||
|
this.updateActive(d.checked ? 1 : 0);
|
||||||
|
}}/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<label>建立條件群組</label>
|
<label>建立條件群組</label>
|
||||||
<Segment color="red">
|
<Segment color="red">
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<Input label="節點名稱"/>
|
<Input label="節點名稱" value={this.state.edit.name} onChange={(e,d) => {
|
||||||
|
this.updateEditData('name', d.value);
|
||||||
|
}}/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<label>觸發條件</label>
|
<label>觸發條件</label>
|
||||||
<select>
|
<select value={this.state.edit.op} onChange={(e) => {
|
||||||
|
this.updateEditData('op', e.target.value);
|
||||||
|
}}>
|
||||||
<option value="">請選擇觸發條件</option>
|
<option value="">請選擇觸發條件</option>
|
||||||
<option value="8">AND</option>
|
<option value="8">AND</option>
|
||||||
<option value="9">OR</option>
|
<option value="9">OR</option>
|
||||||
</select>
|
</select>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Grid columns={2} padded>
|
<Grid columns={2} padded>
|
||||||
<UnitItem unit="id1" data={this.state.edit.id1} getList={this.getSelectList}/>
|
<UnitItem unit="id1" data={this.state.edit.id1} getList={this.getSelectList} updateData={this.updateData}/>
|
||||||
<UnitItem unit="id2" data={this.state.edit.id2} getList={this.getSelectList}/>
|
<UnitItem unit="id2" data={this.state.edit.id2} getList={this.getSelectList} updateData={this.updateData}/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
textAlign: 'right'
|
textAlign: 'right'
|
||||||
}}>
|
}}>
|
||||||
<Button type="button" basic size="tiny" color="blue" content="加入"/>
|
<Button type="button" basic size="tiny" color="blue" content="加入" onClick={()=>{
|
||||||
<Button type="button" basic size="tiny" color="green" content="清除"/>
|
this.joinUnit();
|
||||||
|
}}/>
|
||||||
|
<Button type="button" basic size="tiny" color="green" content="清除" onClick={()=>{this.resetEdit()}}/>
|
||||||
</div>
|
</div>
|
||||||
</Segment>
|
</Segment>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
|
<ActionSelect i18n={i18n} unit="act" list={this.state.actDevlist} getList={this.getSelectList} addAction={this.addAction} />
|
||||||
|
<Form.Field>
|
||||||
|
<label>裝置動作列表</label>
|
||||||
|
<Segment color="blue">
|
||||||
|
<List>
|
||||||
|
{
|
||||||
|
this.state.items.map((t,idx) => (
|
||||||
|
<ActionItem key={idx} i18n={i18n} data={t} idx={idx} removeAction={this.removeAction}/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</List>
|
||||||
|
</Segment>
|
||||||
|
</Form.Field>
|
||||||
</Form>
|
</Form>
|
||||||
|
<ViewTree i18n={i18n} data={this.state.groups} open={this.state.showTree} closeView={this.toggleView} removeNode={this.removeNode} />
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user