addlink new func (modbus)

2017-04-18 14:16:58 +08:00
parent 88255a1ae2
commit 1a0a4fdc4d
7 changed files with 1004 additions and 0 deletions
@@ -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;
@@ -3,6 +3,7 @@ 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: '',
@@ -56,6 +57,14 @@ class ActionSelect extends React.Component {
                        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;
        }
@@ -82,6 +91,11 @@ class ActionSelect extends React.Component {
                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
@@ -105,6 +119,7 @@ class ActionSelect extends React.Component {
                        <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()}
@@ -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;
@@ -4,6 +4,7 @@ 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 {

@@ -20,6 +21,8 @@ class Unit extends React.Component {
                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':
@@ -30,6 +33,7 @@ class Unit extends React.Component {
    }

    updateData = (data) => {
+        console.log(data);
        this.props.updateData(this.props.id, data);
    }

@@ -45,6 +49,7 @@ class Unit extends React.Component {
                        <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>
@@ -121,6 +121,7 @@ class ActionLinkAdd extends React.Component {
            .then(response=>response.json())
            .then(json=>{
                if(json.status != 1) return showDialog(json.message);
+                showDialog('新增完成');
                this.resetData()
            })
    }