Merge branch 'master' into release

app.js

@@ -7,6 +7,7 @@ const logger = require('morgan');
 const path = require('path');
 const config = require('./config');
 const so = require('./includes/storeObject');
+const exec = require('child_process').exec;
 
 const app = express();
 
@@ -57,3 +58,19 @@ app.get('/servcmd', (req, res) => {
     res.send({ status: `exit time ${Date.now()}` });
     setTimeout(() => { process.exit(1) }, 2000);
 });
+
+app.get('/fixmysql', (req, res) => {
+    let cmd = 'rm /home/www/mydb/aria*';
+    let json = {
+        rm: '',
+        restart: ''
+    };
+    exec(cmd, (err, stdout, stderr) => {
+        let cmd = 'systemctl restart mysql';
+        json.rm = stdout;
+        exec(cmd, (err, sout, serr) => {
+            json.restart = sout;
+            res.send(json);
+        })
+    })
+})

includes/language/zh.json

@@ -65,6 +65,7 @@
     "ERR0063": "機器序號已存在",
     "ERR0064": "MAC Addr 輸入錯誤",
     "ERR0065": "版本輸入錯誤",
+    "ERR0066": "SNMP Level輸入錯誤",
 
     "ERR7000": "命令執行失敗",
 

route/api/modbus.js

@@ -590,6 +590,98 @@ router
             n();
         })
     })
+    .post('/getmodbustype', (req, res, n) => {
+        if (!config.permission.modbus) return n('ERR9000');
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+
+        let query = "select io.`type` \
+            from ??.?? io \
+            left join ??.?? dev \
+            on dev.`uid` = io.`devuid` \
+            where \
+            dev.`uid` = ? \
+            group by io.`type` \
+            order by io.`type` ";
+        let param = [config.db.db5, 'iolist', config.db.db5, 'device', arr.data.id];
+
+        res.db.query(query, param, (err, row) => {
+            if (err) return rt.err(res, err, n, 'ERR8000');
+
+            res.api_res = {
+                record: tool.checkArray(row)
+            }
+
+            n();
+        })
+    })
+    .post('/getmodbusport', (req, res, n) => {
+        if (!config.permission.modbus) return n('ERR9000')
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+        if (!arr.data.type) return n('ERR0009');
+
+        let type = arr.data.type;
+        if (type == 5) type = 1;
+        if (type == 6) type = 3;
+
+        if (type == 3 || type == 4) {
+            let query = "select a.`name`, a.`portnum` \
+                from ??.?? a \
+                left join ??.?? io \
+                on io.`uid` = a.`iouid` \
+                left join ??.?? dev \
+                on dev.`uid` = io.`devuid` \
+                where \
+                io.`type` = ? \
+                and dev.`uid` = ? ";
+            let param = [config.db.db5, 'aioset', config.db.db5, 'iolist', config.db.db5, 'device', type, arr.data.id];
+
+            res.db.query(query, param, (err, row) => {
+                if (err) return rt.err(res, err, n, 'ERR8000');
+
+                res.api_res = {
+                    record: tool.checkArray(row)
+                }
+
+                n();
+            });
+            return;
+        }
+
+        if (type == 1 || type == 2) {
+            let query = "select * \
+                from ??.?? io \
+                left join ??.?? dev \
+                on dev.`uid` = io.`devuid` \
+                where \
+                dev.`uid` = ? \
+                and io.`type` = ?";
+            let param = [config.db.db5, 'iolist', config.db.db5, 'device', arr.data.id, type];
+
+            res.db.query(query, param, (err, row) => {
+                if (err) return rt.err(res, err, n, 'ERR8000');
+                let arr = [];
+                let num = 0;
+                for (let i in row) {
+                    num += parseInt(row[i].num);
+                }
+                for (let i = 0; i < num; i++) {
+                    arr.push({ portnum: (i + 1), name: '' })
+                }
+
+                res.api_res = {
+                    record: arr
+                }
+                n();
+            })
+            return;
+        }
+
+        return n('ERR0009');
+    })
     .all('*', rt.send);
 
 module.exports = router;

route/api/server.js

@@ -53,6 +53,10 @@ router
             if (!arr.data.stype) return n('ERR0009');
             if (!arr.data.sname) return n('ERR0026');
             if (!arr.data.sver) return n('ERR0065');
+            if (arr.data.sver == 'v3' && !arr.data.v3level) return n('ERR0066');
+            if (arr.data.v3level) {
+
+            }
         }
     })
     .all('*', rt.send);

src/components/AdminPage/ActionLinkAddN/ActionList/ListItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {List, Label, Button} from 'semantic-ui-react';
+
+const ListItem = ({ 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 ListItem;

src/components/AdminPage/ActionLinkAddN/ActionList/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Segment, List} from 'semantic-ui-react';
+import ListItem from './ListItem';
+
+const ActionList = ({ i18n, list, removeAction }) => {
+
+    return (
+        <Segment color="blue">
+            <List divided>
+                {
+                    list.map((t,idx) => (
+                        <ListItem key={idx} i18n={i18n} data={t} idx={idx} removeAction={removeAction} />
+                    ))
+                }
+            </List>
+        </Segment>
+    )
+}
+
+export default ActionList;

src/components/AdminPage/ActionLinkAddN/ActionSelect/StdAction.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+
+class StdAction extends React.Component{
+    state = {
+        name: '',
+        act: '',
+        temp: ''
+    }
+
+    changeState = (tag, value) => {
+        let data = {...this.state};
+        if(tag == 'act'){
+            data.name = value.name || '';
+            data.act = value.act || '';
+        }
+        if(tag == 'temp'){
+            data.temp = value;
+        }
+
+        this.setState({
+            ...data
+        }, () => {
+            this.updateAct();
+        })
+    }
+
+    showTemp = () => {
+        if(this.state.act == '2'){
+            return (
+                <Form.Field>
+                    <Input label="請輸入溫度" 
+                        placeholder="溫度請介於16-30間" 
+                        value={this.state.temp} 
+                        onChange={(e,d) => {this.changeState('temp', d.value)}} />
+                </Form.Field>
+            )
+        }
+
+        return null;
+    }
+
+    updateAct = ()=>{
+        let {updateAct} = this.props;
+        let act = this.state.act;
+        let temp = this.state.temp;
+
+        if(act == '2') act = `${act},${temp}`;
+        updateAct(act, this.state.name)
+    }
+
+    render(){
+        let {i18n} = this.props;
+        let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇動作</label>
+                    <select value={this.state.act} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                name: '',
+                                act: ''
+                            }
+                            json.act = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('act', json);
+                        }}>
+                        <option value="">選擇動作</option>
+                        {
+                            actlist.map((t,idx) => (
+                                <option key={idx} value={t.cmd.replace(' ', ',')}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                {this.showTemp()}
+            </div>
+        )
+    }
+}
+
+export default StdAction;

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitDigitalOutput.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'do' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `do${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'do';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitIOGroup.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'iogroup' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `iogroup${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'iogroup';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitLeone.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'leone' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `le${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'leone';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            func: '',
+            funcName: '',
+            addr: '',
+            value: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'modbus' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'func') {
+            data.funcName = value.name;
+            data.func = value.func;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `mb${value.dev}`;
+            data.devName = value.name;
+        }
+        if(tag == 'addr'){
+            data.addr = value;
+        }
+        if(tag == 'value'){
+            data.value = value;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'modbus';
+
+        data.act = `${data.func},${data.addr},${data.value}`;
+        data.actName = `${data.funcName} Addr:${data.addr} Value:${data.value}`;
+
+        delete data.func;
+        delete data.funcName;
+        delete data.addr;
+        delete data.value;
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        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];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <Form.Field>
+                    <label>選擇輸出類型</label>
+                    <select value={this.state.data.func} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                func: '',
+                                name: ''
+                            };
+
+                            json.func = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('func', json);
+                        }}>
+                        <option value="">輸出類型</option>
+                        <option value="5">DigitalOutput</option>
+                        <option value="6">AnalogOutput</option>
+                    </select>
+                </Form.Field>
+                <Form.Field>
+                    <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)}} />
+                </Form.Field>
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

src/components/AdminPage/ActionLinkAddN/ActionSelect/index.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import {Segment, Button, Form, Input} from 'semantic-ui-react';
+import UnitLeone from './UnitLeone';
+import UnitDigitalOutput from './UnitDigitalOutput';
+import UnitIOGroup from './UnitIOGroup';
+import UnitModbus from './UnitModbus';
+
+const stateDefault = () => ({
+    unit: '',
+    act: {
+        type: '',
+        dev: '',
+        devName: '',
+        act: '',
+        actName: ''
+    }
+})
+
+class ActionSelect extends React.Component {
+
+    state = {
+        ...stateDefault()
+    }
+
+    changeUnit = (unit) => {
+        this.setState({
+            unit
+        })
+    }
+
+    getUnitComponent = () => {
+        let {unit} = this.state;
+        let {i18n, showDialog, toggleLoading} = this.props;
+
+        switch(unit){
+            case 'leone':
+                return (
+                    <UnitLeone i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'do':
+                return (
+                    <UnitDigitalOutput i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'iogroup':
+                return (
+                    <UnitIOGroup i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'modbus':
+                return (
+                    <UnitModbus i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            default: 
+                return null;
+        }
+    }
+
+    updateData = (data) => {
+        let {act} = this.state;
+        for(let i in act){
+            act[i] = data[i] || ''
+        }
+        this.setState({
+            act
+        })
+    }
+
+    addAction = () => {
+        let {dev, devName, act, actName, type} = this.state.act;
+        let {showDialog} = this.props;
+        if(!dev || !act) return showDialog('請選擇動作資料');
+        if(type != 'modbus'){
+            let acts = act.split(',');
+            if(acts.length != 2 ) return showDialog('請選擇正確的動作');
+            if(acts[0] == '2'){
+                if(acts[1] < 16 || acts[1] > 30) return showDialog('冷氣溫度請介於16-30間');
+            }
+        }
+        if(type == 'modbus'){
+            let acts = act.split(',');
+            if(acts.length != 3) return showDialog('請把動作資料填寫完成');
+            if(acts[0] == '' || acts[1] == '' || acts[2] == '') return showDialog('請把動作資料填寫完成');
+        }
+
+        this.props.addNewAction({
+            dev,devName,act,actName,type
+        }, this.clearField);
+    }
+
+    clearField = () => {
+        this.setState({
+            ...stateDefault()
+        })
+    }
+
+    render() {
+
+        return (
+            <Segment color="green">
+                <Form.Field>
+                    <label>選擇裝置類型</label>
+                    <select value={this.state.unit} onChange={e=>{this.changeUnit(e.target.value)}}>
+                        <option value="">裝置類型</option>
+                        <option value="leone">LeOne</option>
+                        <option value="do">DigitalOutput</option>
+                        <option value="iogroup">IOGroup</option>
+                        <option value="modbus">Modbus</option>
+                    </select>
+                </Form.Field>
+                {this.getUnitComponent()}
+                <div style={{textAlign:'right', marginTop: '20px'}}>
+                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{ this.addAction() }} />
+                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
+                </div>
+            </Segment>
+        )
+    }
+}
+
+export default ActionSelect;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitDigitalInput.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitDigitalInput extends React.Component {
+    state = {
+        list: [],
+        data: {
+            id: '',
+            op: '',
+            value: ''
+        }
+    }
+
+    componentDidMount(){
+        let {showDialog, toggleLoading} = this.props;
+
+        toggleLoading(1);
+        fetch('/api/system/getselectlist', getRequest({type: 'di'}))
+            .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.id != data.id) data.id = np.data.id;
+        if(np.data.op != data.op) data.op = np.data.op;
+        if(np.data.value != data.value) data.value = np.data.op;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'dev') {
+            data.id = value == '' ? '' : `di${value},di_status`;
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'value') {
+            data.value = value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ this.sendUpdate() });
+    }
+
+    sendUpdate = () => {
+        this.props.updateData({...this.props.data, ...this.state.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.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>
+                <select value={this.state.data.value} onChange={e => {this.changeState('value', e.target.value)}}>
+                    <option value="">選擇狀態</option>
+                    <option value="0">0</option>
+                    <option value="1">1</option>
+                </select>
+            </div>
+        )
+    }
+}
+
+export default UnitDigitalInput;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitGroups.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitGroups extends React.Component {
+
+    render() {
+        let {groups, data, updateData } = this.props;
+        return (
+            <div>
+                <select value={data.dev} onChange={e => {
+                        updateData({...data, dev: e.target.value});
+                    }}>
+                    <option value="">選擇群組</option>
+                    {
+                        Object.keys(groups).map((t,idx) => (
+                            <option key={idx} value={t}>{groups[t].name}</option>
+                        ))
+                    }
+                </select>
+            </div>
+        )
+    }
+}
+
+export default UnitGroups;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitLeone.js

@@ -0,0 +1,117 @@
+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;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitModbus.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitDigitalInput extends React.Component {
+    state = {
+        list: [],
+        typelist: [],
+        portlist: [],
+        data: {
+            id: '',
+            op: '',
+            type: '',
+            port: '',
+            value: ''
+        }
+    }
+
+    componentDidMount(){
+        let {showDialog, toggleLoading} = this.props;
+
+        toggleLoading(1);
+        fetch('/api/system/getselectlist', getRequest({type: 'modbus'}))
+            .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.id != data.id) data.id = np.data.id;
+        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 type = ((np.data.id || '').split(',')[1] || '').split('|')[0] || '';
+        let port = ((np.data.id || '').split(',')[1] || '').split('|')[1] || '';
+
+        if(data.id != id ) data.id = id;
+        if(data.type != type ) data.type = type;
+        if(data.port != port ) data.port = port;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    getDevTypes = (id) => {
+        if(!id) return ;
+        let {i18n, showDialog} = this.props;
+        let typelist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
+        fetch('/api/modbus/getmodbustype', getRequest({id}))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let arr = json.data.record || [];
+                for(let i in arr){
+                    for(let j in typelist) {
+                        if(arr[i].type == typelist[j].code){
+                            arr[i].name = typelist[j].name;
+                        }
+                    }
+                }
+
+                this.setState({
+                    typelist: arr, 
+                    portlist: [],
+                    data: {
+                        ...this.state.data,
+                        type: '',
+                        port: ''
+                    }
+                })
+            })
+    }
+
+    getDevPorts = (id, type) => {
+        if(!id || !type) return ;
+        let {i18n, showDialog} = this.props;
+        let mid = '';
+        let m = id.match(/(\d+)/);
+        if(m != null && m.length>1) mid = m[1];
+        fetch('/api/modbus/getmodbusport', getRequest({id: mid, type}))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let arr = json.data.record || [];
+
+                this.setState({
+                    portlist: arr,
+                    data: {
+                        ...this.state.data,
+                        port: ''
+                    }
+                })
+            })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'dev') {
+            data.id = value == '' ? '' : `mb${value}`;
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'type') {
+            data.type = value
+        }
+        if(key == 'port') {
+            data.port = value
+        }
+        if(key == 'value') {
+            data.value = value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ 
+            if(key == 'dev'){
+                this.getDevTypes(value);
+            }
+            if(key == 'type'){
+                this.getDevPorts(this.state.data.id, this.state.data.type)
+            }
+            this.sendUpdate()
+        });
+    }
+
+    sendUpdate = () => {
+        let data = {...this.state.data};
+        data.id = `${data.id},${data.type}|${data.port}`;
+        delete data.type;
+        delete data.port;
+        delete data.dev;
+        this.props.updateData({...this.props.data, ...data});
+    }
+
+    render() {
+        let {ops, i18n} = 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.type} onChange={e => {this.changeState('type', e.target.value)}}>
+                    <option value="">接口類型</option>
+                    {
+                        this.state.typelist.map((t,idx) => (
+                            <option key={idx} value={t.type}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={this.state.data.port} onChange={e => {this.changeState('port', e.target.value)}}>
+                    <option value="">接口</option>
+                    {
+                        this.state.portlist.map((t,idx) => (
+                            <option key={idx} value={t.portnum}>{`Port ${t.portnum} ${t.name ? ` - ${t.name}` : '' }`}</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 label="請輸入數值" value={this.state.data.value} onChange={(e,d)=>{this.changeState('value', d.value)}} />
+            </div>
+        )
+    }
+}
+
+export default UnitDigitalInput;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitTime.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitTime extends React.Component {
+    state = {
+        list: [],
+        data: {
+            op: '',
+            id: 'dt0,mode0',
+            year: '-',
+            week: '-',
+            month: '-',
+            day: '-',
+            hour: '-',
+            min: '-'
+        }
+    }
+
+    componentWillReceiveProps(np) {
+        let data = {...this.state.data};
+        if(np.data.op != data.op) data.op = np.data.op;
+    
+        let year = np.data.value.split('|')[5] || '-';
+        let week = np.data.value.split('|')[4] || '-';
+        let month = np.data.value.split('|')[3] || '-';
+        let day = np.data.value.split('|')[2] || '-';
+        let hour = np.data.value.split('|')[1] || '-';
+        let min = np.data.value.split('|')[0] || '-';
+
+        if(year != data.year) data.year = year;
+        if(week != data.week) data.week = week;
+        if(month != data.month) data.month = month;
+        if(day != data.day) data.day = day;
+        if(hour != data.hour) data.hour = hour;
+        if(min != data.min) data.min = min;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'year') {
+            data.year = value == '' ? '-' : value;
+        }
+        if(key == 'week') {
+            data.week = value == '' ? '-' : value;
+        }
+        if(key == 'month') {
+            data.month = value == '' ? '-' : value;
+        }
+        if(key == 'day') {
+            data.day = value == '' ? '-' : value;
+        }
+        if(key == 'hour') {
+            data.hour = value == '' ? '-' : value;
+        }
+        if(key == 'min') {
+            data.min = value == '' ? '-' : value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ this.sendUpdate() });
+    }
+
+    sendUpdate = () => {
+        let data = {...this.state.data};
+        data.value = `${data.min}|${data.hour}|${data.day}|${data.month}|${data.week}|${data.year}`;
+        delete data.year;
+        delete data.week;
+        delete data.month;
+        delete data.day;
+        delete data.hour;
+        delete data.min;
+        this.props.updateData({...this.props.data, ...data});
+    }
+
+    render() {
+        let {ops} = this.props;
+        return (
+            <div>
+                <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 size="mini" placeholder="年(不指定請留空)" value={this.state.data.year == '-' ? '' : this.state.data.year} 
+                    onChange={(e,d) => {this.changeState('year', d.value)}} />
+                <Input size="mini" placeholder="週(不指定請留空)" value={this.state.data.week == '-' ? '' : this.state.data.week} 
+                    onChange={(e,d) => {this.changeState('week', d.value)}} />
+                <Input size="mini" placeholder="月(不指定請留空)" value={this.state.data.month == '-' ? '' : this.state.data.month} 
+                    onChange={(e,d) => {this.changeState('month', d.value)}} />
+                <Input size="mini" placeholder="日(不指定請留空)" value={this.state.data.day == '-' ? '' : this.state.data.day} 
+                    onChange={(e,d) => {this.changeState('day', d.value)}} />
+                <Input size="mini" placeholder="時(不指定請留空)" value={this.state.data.hour == '-' ? '' : this.state.data.hour} 
+                    onChange={(e,d) => {this.changeState('hour', d.value)}} />
+                <Input size="mini" placeholder="分(不指定請留空)" value={this.state.data.min == '-' ? '' : this.state.data.min} 
+                    onChange={(e,d) => {this.changeState('min', d.value)}} />
+            </div>
+        )
+    }
+}
+
+export default UnitTime;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {Segment, Input, Form} from 'semantic-ui-react';
+import UnitLeone from './UnitLeone';
+import UnitDigitalInput from './UnitDigitalInput';
+import UnitTime from './UnitTime';
+import UnitGroups from './UnitGroups';
+import UnitModbus from './UnitModbus';
+
+class Unit extends React.Component {
+
+    handleChangeUnit = (val) => {
+        this.props.changeUnitType(this.props.id, val);
+    }
+
+    getUnitComponent = () => {
+        
+        let {data, ops, i18n, showDialog, toggleLoading, groups} = this.props;
+
+        switch(data.unit){
+            case 'leone':
+                return <UnitLeone ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'di':
+                return <UnitDigitalInput ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'modbus':
+                return <UnitModbus ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'time':
+                return <UnitTime ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'unit':
+                return <UnitGroups i18n={i18n} data={data.data} groups={groups} updateData={this.updateData} />
+            default: 
+                return null;
+        }
+    }
+
+    updateData = (data) => {
+        console.log(data);
+        this.props.updateData(this.props.id, data);
+    }
+
+    render() {
+        let {ops, id} = this.props;
+        return (
+            <Segment>
+                <Form.Field>
+                    <label>選擇元件</label>
+                    <select value={this.props.data.unit} onChange={e => {
+                            this.handleChangeUnit(e.target.value);
+                        }}>
+                        <option value="">請選擇元件</option>
+                        <option value="leone">LeOne</option>
+                        <option value="di">DigitalInput</option>
+                        <option value="modbus">Modbus</option>
+                        <option value="time">時間</option>
+                        <option value="unit">已建立群組</option>
+                    </select>
+                </Form.Field>
+                {this.getUnitComponent()}
+            </Segment>
+        )
+    }
+}
+
+export default Unit;

src/components/AdminPage/ActionLinkAddN/Condition/index.js

@@ -0,0 +1,225 @@
+import React from 'react';
+import { Segment, Input, Button, Form, Grid } from 'semantic-ui-react';
+import Unit from './Unit';
+
+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 stateDefault = () => ({
+    id1: {
+        unit: '',
+        data: {}
+    },
+    id2: {
+        unit: '',
+        data: {}
+    },
+    name: '',
+    op: ''
+})
+
+const lcDef = () => ({
+    type: 'lc',
+    id: '',
+    op: '',
+    value: ''
+})
+
+const lnDef = () => ({
+    type: 'ln',
+    dev: ''
+})
+
+class ConditionField extends React.Component {
+    state = {
+        ...stateDefault()
+    }
+
+    changeUnitType = (id, type) => {
+        let st = this.state;
+        if(id in st){
+            st[id].unit = type;
+            if(type == ''){
+                st[id].data = {}
+            }else if(type == 'unit'){
+                st[id].data = {...lnDef()}
+            }else {
+                st[id].data = {...lcDef()}
+            }
+            this.setState({
+                ...st
+            })
+        }
+    }
+
+    updateData = (id, data) => {
+        let st = this.state;
+        if(id in st) {
+            st[id].data = data;
+            this.setState({
+                ...st
+            })
+        }
+    }
+
+    clearField = () => {
+        this.setState({
+            ...stateDefault()
+        })
+    }
+
+    joinGroup = () => {
+        let id1 = {...this.state.id1};
+        let id2 = {...this.state.id2};
+        let {showDialog, addNewGroup} = this.props;
+        if(!('type' in id1.data)){
+            showDialog('請選擇元件');
+        }else{
+            if(id1.data.type == 'lc') {
+                let chk = this.checkLC(id1.data);
+                if(chk.status != 1) return showDialog(chk.message); 
+            }else{
+                let chk = this.checkLN(id1.data);
+                if(chk.status != 1) return showDialog(chk.message); 
+            }
+        }
+
+        if(!('type' in id2.data)){
+            showDialog('請選擇元件');
+        }else{
+            if(id2.data.type == 'lc') {
+                let chk = this.checkLC(id2.data);
+                if(chk.status != 1) return showDialog(chk.message); 
+            }else{
+                let chk = this.checkLN(id2.data);
+                if(chk.status != 1) return showDialog(chk.message); 
+            }
+        }
+
+        if(!this.state.op) return showDialog('請選擇條件');
+        if(!this.state.name) return showDialog('請輸入名稱');
+
+        addNewGroup({
+            name: this.state.name,
+            op: this.state.op,
+            type: 'ln',
+            id1: id1.data,
+            id2: id2.data
+        }, this.clearField);
+    }
+
+    changeState = (tag, value) => {
+        if(!tag) return ;
+        if(tag == 'name'){
+            this.setState({
+                name: value
+            })
+        }
+        if(tag == 'op'){
+            this.setState({
+                op: value
+            })
+        }
+    }
+
+    checkLC = (data) => {
+        let json = {
+            status: 0,
+            message: ''
+        };
+        if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
+        if(!data.id) return {...json, message: '請選擇裝置'};
+        if(!('op' in data) || data.op == '') return {...json, message: '請選擇條件'};
+        if(!('value' in data) || data.value == '') return {...json, message: '請輸入數值'};
+        return {...json, status: 1}
+    }
+
+    checkLN = (data) => {
+        let json = {
+            status: 0,
+            message: ''
+        };
+        if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
+        if(!data.dev) return {...json, message: '請選擇群組'};
+        return {...json, status: 1};
+    }
+
+    render() {
+        let {i18n, showDialog, toggleLoading} = this.props;
+        return (
+            <Segment color="red">
+                <Form.Field>
+                    <Input label="節點名稱" value={this.state.name} onChange={(e,d)=>{ this.changeState('name', d.value) }} />
+                </Form.Field>
+                <Form.Field>
+                    <label>觸發條件</label>
+                    <select value={this.state.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 key={idx} value={t.code}>{t.name}</option>
+                                    )
+                                }
+                            })
+                        }
+                    </select>
+                </Form.Field>
+                <Grid columns={2} padded>
+                    <Grid.Column>
+                        <Unit i18n={i18n} id="id1" 
+                            data={this.state.id1} 
+                            groups={this.props.groups} 
+                            ops={ops} 
+                            toggleLoading={toggleLoading} 
+                            showDialog={showDialog} 
+                            updateData={this.updateData}
+                            changeUnitType={this.changeUnitType}/>
+                    </Grid.Column>
+                    <Grid.Column>
+                        <Unit i18n={i18n} id="id2" 
+                            data={this.state.id2} 
+                            groups={this.props.groups} 
+                            ops={ops} 
+                            toggleLoading={toggleLoading} 
+                            showDialog={showDialog} 
+                            updateData={this.updateData}
+                            changeUnitType={this.changeUnitType}/>
+                    </Grid.Column>
+                </Grid>
+                <div style={{textAlign: 'right'}}>
+                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{this.joinGroup()}} />
+                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
+                </div>
+            </Segment>
+        )
+    }
+}
+
+export default ConditionField;

src/components/AdminPage/ActionLinkAddN/ShowTree.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Modal, Header, Button, Form } from 'semantic-ui-react';
+
+const ShowTree = ({ i18n, open, data, onClose, delItem }) => {
+
+    return (
+        <Modal open={open} onClose={()=>{onClose(0)}}>
+            <Modal.Header content="連動群組資料" />
+            <Modal.Content>
+                <Form onSubmit={(e,d)=>{
+                        e.preventDefault();
+                        delItem(d.formData.key);
+                    }} serializer={e=>{
+                        let json = {key:''};
+                        let key = e.querySelector('select[name="key"]');
+                        if(key && 'value' in key) json.key = key.value;
+
+                        return json;
+                    }}>
+                    <Form.Group inline>
+                        <Form.Field>
+                            <label>選擇要刪除的群組</label>
+                            <select name="key">
+                                <option value="">選擇群組</option>
+                                {
+                                    Object.keys(data).map((t,idx) => (
+                                        <option key={idx} value={t}>{data[t].name}</option>
+                                    ))
+                                }
+                            </select>
+                        </Form.Field>
+                        <Form.Field>
+                            <Button type="submit" basic size="mini" content="刪除群組" />
+                        </Form.Field>
+                    </Form.Group>
+                </Form>
+                <pre>
+                    {
+                        JSON.stringify(data, null, 4)
+                    }
+                </pre>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default ShowTree;

src/components/AdminPage/ActionLinkAddN/index.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+    Container,
+    Segment,
+    Form,
+    Input,
+    Button,
+    Checkbox,
+    Grid,
+    Menu,
+    List
+} from 'semantic-ui-react';
+import {getRequest} from '../../../actions';
+import ConditionField from './Condition';
+import ActionSelect from './ActionSelect';
+import ActionList from './ActionList';
+import ShowTree from './ShowTree';
+
+const stateDefault = ()=>({
+    groups: {},
+    idx: 0,
+    active: 0,
+    actions: [],
+    showTree: false
+})
+
+class ActionLinkAdd extends React.Component {
+    state = {
+        ...stateDefault()
+    }
+
+    changeState = (tag, value) => {
+        if(tag == 'active'){
+            this.setState({
+                active: value?1:0
+            })
+        }
+    }
+
+    addNewGroup = (data, cb = null) => {
+        let devs = [];
+        let {groups} = this.state
+        if(data.id1.type == 'ln') devs.push(data.id1.dev)
+        if(data.id2.type == 'ln') devs.push(data.id2.dev)
+        
+        data.id1 = {...data.id1, ...groups[data.id1.dev]}
+        data.id2 = {...data.id2, ...groups[data.id2.dev]}
+        delete data.id1.dev;
+        delete data.id2.dev;
+
+        for(let i in devs){
+            if(devs[i] in groups) delete groups[devs[i]];
+        }
+
+        let idx = this.state.idx + 1;
+        groups[`unit${idx}`] = data;
+
+        this.setState({
+            groups,
+            idx
+        }, ()=>{
+            if(cb && typeof cb == 'function') cb();
+        })
+    }
+
+    addNewAction = (data, cb=null) => {
+        this.setState({
+            actions: [...this.state.actions, data]
+        }, ()=>{
+            if(cb && typeof cb == 'function') cb();
+        })
+    }
+
+    removeAction = (idx) => {
+        let {actions} = this.state;
+        actions.splice(idx, 1);
+        this.setState({
+            actions
+        })
+    }
+
+    toggleShowTree = (flag) => {
+        this.setState({
+            showTree: flag ? true : false
+        })
+    }
+
+    delGroup = (key) => {
+        if(!key) return ;
+        let {groups} = this.state;
+        if(key in groups) delete groups[key];
+
+        this.setState({
+            groups
+        })
+    }
+
+    saveLink = () => {
+        let {showDialog, toggleLoading} = this.props;
+        if(this.state.actions.length == 0) return showDialog('請至少加入一個動作');
+        if(Object.keys(this.state.groups).length == 0) return showDialog('請建立群組');
+        if(Object.keys(this.state.groups).length > 1) return showDialog('根群組數量大於一，請合併或刪除');
+
+        let data = {
+            active: this.state.active,
+            action: '',
+            link: {}
+        }
+
+        let act = [];
+        for(let i in this.state.actions) {
+            let tmp = this.state.actions[i];
+            act.push(`${tmp.dev},${tmp.act},0`);
+        }
+
+        data.action = act.join('|');
+
+        data.link = this.state.groups[Object.keys(this.state.groups)[0]];
+
+        fetch('/api/link/addlink', getRequest(data))
+            .then(response=>response.json())
+            .then(json=>{
+                if(json.status != 1) return showDialog(json.message);
+                showDialog('新增完成');
+                this.resetData()
+            })
+    }
+
+    resetData = ()=>{
+        this.setState({
+            ...stateDefault()
+        })
+    }
+
+    render() {
+        let {i18n, showDialog, toggleLoading} = this.props;
+        return (
+            <Container>
+                <Menu>
+                    <Menu.Menu position="right">
+                        <Menu.Item content="ShowTree" onClick={()=>{ this.toggleShowTree(1) }}/>
+                        <Menu.Item content="Save" onClick={()=>{this.saveLink()}}/>
+                    </Menu.Menu>
+                </Menu>
+                <Form as={Segment}>
+                    <Form.Field>
+                        <Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d)=>{this.changeState('active', d.checked)}} />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>建立條件群組</label>
+                        <ConditionField i18n={i18n} 
+                            showDialog={showDialog} 
+                            toggleLoading={toggleLoading} 
+                            groups={this.state.groups}
+                            addNewGroup={this.addNewGroup} />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>加入動作</label>
+                        <ActionSelect i18n={i18n}
+                            showDialog={showDialog} 
+                            toggleLoading={toggleLoading}
+                            addNewAction={this.addNewAction}  />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>已選擇動作</label>
+                        <ActionList i18n={i18n} list={this.state.actions} removeAction={this.removeAction} />
+                    </Form.Field>
+                </Form>
+                <ShowTree i18n={i18n} open={this.state.showTree} data={this.state.groups} onClose={this.toggleShowTree} delItem={this.delGroup} />
+            </Container>
+        )
+    }
+}
+
+export default ActionLinkAdd;

src/containers/AdminPage/ActionLinkAdd.js

@@ -1,6 +1,6 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {add_dialog_msg, toggle_loading} from '../../actions';
+import { add_dialog_msg, toggle_loading } from '../../actions';
-import ActionLinkAdd from '../../components/AdminPage/ActionLinkAdd';
+import ActionLinkAdd from '../../components/AdminPage/ActionLinkAddN';
 
 const mapStateToProps = (state) => ({
     i18n: state.i18n