Merge branch 'master' into release
This commit is contained in:
commit
a4ac4742be
19
app.js
19
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();
|
||||
|
||||
|
|
@ -56,4 +57,20 @@ app.get(['/admin', '/admin/*'], (req, res) => {
|
|||
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);
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
"ERR0063": "機器序號已存在",
|
||||
"ERR0064": "MAC Addr 輸入錯誤",
|
||||
"ERR0065": "版本輸入錯誤",
|
||||
"ERR0066": "SNMP Level輸入錯誤",
|
||||
|
||||
"ERR7000": "命令執行失敗",
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import {connect} from 'react-redux';
|
||||
import {add_dialog_msg, toggle_loading} from '../../actions';
|
||||
import ActionLinkAdd from '../../components/AdminPage/ActionLinkAdd';
|
||||
import { connect } from 'react-redux';
|
||||
import { add_dialog_msg, toggle_loading } from '../../actions';
|
||||
import ActionLinkAdd from '../../components/AdminPage/ActionLinkAddN';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
i18n: state.i18n
|
||||
i18n: state.i18n
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => ({
|
||||
showDialog: (msg) => {
|
||||
dispatch(add_dialog_msg(msg));
|
||||
},
|
||||
toggleLoading: (active = false) => {
|
||||
dispatch(toggle_loading(active));
|
||||
}
|
||||
showDialog: (msg) => {
|
||||
dispatch(add_dialog_msg(msg));
|
||||
},
|
||||
toggleLoading: (active = false) => {
|
||||
dispatch(toggle_loading(active));
|
||||
}
|
||||
})
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ActionLinkAdd);
|
||||
Loading…
Reference in New Issue