new ver actionLink page
This commit is contained in:
parent
29a5543c44
commit
12ff3a4020
@ -65,6 +65,7 @@
|
||||
"ERR0063": "機器序號已存在",
|
||||
"ERR0064": "MAC Addr 輸入錯誤",
|
||||
"ERR0065": "版本輸入錯誤",
|
||||
"ERR0066": "SNMP Level輸入錯誤",
|
||||
|
||||
"ERR7000": "命令執行失敗",
|
||||
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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,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,41 @@
|
||||
import React from 'react';
|
||||
import {Input} from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../../../actions';
|
||||
|
||||
class UnitTime extends React.Component {
|
||||
state = {
|
||||
list: []
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {ops} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<select>
|
||||
<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="年(不指定請留空)" />
|
||||
<Input size="mini" placeholder="週(不指定請留空)" />
|
||||
<Input size="mini" placeholder="月(不指定請留空)" />
|
||||
<Input size="mini" placeholder="日(不指定請留空)" />
|
||||
<Input size="mini" placeholder="時(不指定請留空)" />
|
||||
<Input size="mini" placeholder="分(不指定請留空)" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default UnitTime;
|
@ -0,0 +1,58 @@
|
||||
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';
|
||||
|
||||
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 '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) => {
|
||||
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">DigitInput</option>
|
||||
<option value="time">時間</option>
|
||||
<option value="unit">已建立群組</option>
|
||||
</select>
|
||||
</Form.Field>
|
||||
{this.getUnitComponent()}
|
||||
</Segment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Unit;
|
151
src/components/AdminPage/ActionLinkAddN/Condition/index.js
Normal file
151
src/components/AdminPage/ActionLinkAddN/Condition/index.js
Normal file
@ -0,0 +1,151 @@
|
||||
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: {}
|
||||
}
|
||||
})
|
||||
|
||||
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 = () => {
|
||||
console.log(this.state);
|
||||
}
|
||||
|
||||
render() {
|
||||
let {i18n, showDialog, toggleLoading} = this.props;
|
||||
return (
|
||||
<Segment color="red">
|
||||
<Form.Field>
|
||||
<Input label="節點名稱" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>觸發條件</label>
|
||||
<select>
|
||||
<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;
|
55
src/components/AdminPage/ActionLinkAddN/index.js
Normal file
55
src/components/AdminPage/ActionLinkAddN/index.js
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Container,
|
||||
Segment,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Checkbox,
|
||||
Grid,
|
||||
Menu,
|
||||
List
|
||||
} from 'semantic-ui-react';
|
||||
import ConditionField from './Condition';
|
||||
|
||||
const stateDefault = ()=>({
|
||||
groups: {
|
||||
"g1":{
|
||||
name: "aaa"
|
||||
},
|
||||
"g2":{
|
||||
name: "bbb"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
class ActionLinkAdd extends React.Component {
|
||||
state = {
|
||||
...stateDefault()
|
||||
}
|
||||
|
||||
render() {
|
||||
let {i18n, showDialog, toggleLoading} = this.props;
|
||||
return (
|
||||
<Container>
|
||||
<Menu>
|
||||
<Menu.Menu position="right">
|
||||
<Menu.Item content="ShowTree" onClick={()=>{}}/>
|
||||
<Menu.Item content="Save" onClick={()=>{}}/>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
<Form as={Segment}>
|
||||
<Form.Field>
|
||||
<Checkbox label="啟用連動" />
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<label>建立條件群組</label>
|
||||
<ConditionField i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} groups={this.state.groups} />
|
||||
</Form.Field>
|
||||
</Form>
|
||||
</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
Block a user