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,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;