add modbus preview page

This commit is contained in:
Jay 2017-04-12 14:26:01 +08:00
parent 64ad807310
commit e5bf72435c
7 changed files with 5756 additions and 5424 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -228,6 +228,55 @@ router
return n();
});
})
.post('/getalliostatus', (req, res, n) => {
if (!config.permission.modbus) return n('ERR9000');
let pros = [];
let query = "select rt.*, a.`name` as name \
from ??.?? rt \
left join ??.?? d \
on d.`node` = rt.`node` \
left join ??.?? i \
on i.`devuid` = d.`uid` \
and i.`type` = rt.`type` \
left join ??.?? a \
on a.`iouid` = i.`uid` \
and a.`portnum` = rt.`port`\
where \
i.`uid` is not null \
and ( a.`name` is not null or rt.`type` in (1,2)) \
order by rt.`type` asc, rt.`port` asc";
let param = [config.db.db6, 'jcmbrt', config.db.db5, 'device', config.db.db5, 'iolist', config.db.db5, 'aioset'];
pros.push(tool.promiseQuery(res, query, param, 'record'));
let rtq = "select * from ??.?? ";
let rtp = [config.db.db5, 'device'];
pros.push(tool.promiseQuery(res, rtq, rtp, 'rt'));
res.api_res = {
record: [],
rt: {
device: []
}
}
Promise.all(pros)
.then(d => {
for (let i in d) {
if (d[i].key == 'record') {
res.api_res.record = tool.checkArray(d[i].data);
}
if (d[i].key == 'rt') {
res.api_res.rt.device = tool.checkArray(d[i].data);
}
}
n();
})
.catch(err => rt.err(res, err, n, 'ERR8000'));
})
.post('/getiolist', (req, res, n) => {
if (!config.permission.modbus) return n('ERR9000');
let arr = req.body;

View File

@ -0,0 +1,23 @@
import React from 'react';
import {Grid, Segment, Header, List} from 'semantic-ui-react';
import StatusItem from './StatusItem';
const DevField = ({ i18n, data }) => {
return (
<Grid.Column>
<Header as="h4" content={`Name: ${data.name} / Node: ${data.node}`} />
<Segment style={{height: '400px', overflow: 'auto'}}>
<List divided>
{
data.list.map((t,idx) => (
<StatusItem key={idx} i18n={i18n} data={t} />
))
}
</List>
</Segment>
</Grid.Column>
)
}
export default DevField;

View File

@ -0,0 +1,34 @@
import React from 'react';
import { List, Label } from 'semantic-ui-react';
import {convertTime} from '../../../tools'
const StatusItem = ({ i18n, data }) => {
let iotype = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
let iot = {};
for(let i in iotype){
iot[iotype[i].code] = iotype[i].name;
}
let tc = {
"1": "orange",
"2": "green",
"3": "violet",
"4": "brown"
}
return (
<List.Item>
<Label basic size="small" color="teal" content={`Port: ${data.port}`} />
<Label basic size="small" color={tc[data.type] || 'blue'} content={`Type: ${iot[data.type]}`} />
{
data.type == 3 || data.type == 4 ?
(<Label basic size="small" color="teal" content={`Name: ${data.name}`} />) :
null
}
<Label basic size="small" color="blue" content={`數值: ${data.value2}`}/>
<List.Description style={{textAlign: 'right'}}>
{`最後更新於: ${convertTime(data.tst, true)}`}
</List.Description>
</List.Item>
)
}
export default StatusItem;

View File

@ -1,12 +1,62 @@
import React from 'react';
import {Container, Segment, Grid, List, Label} from 'semantic-ui-react';
import DevField from './DeviceField';
class ModbusPreview extends React.Component {
state = {
list: []
}
tick = null
componentDidMount(){
this.getList()
this.tick = setInterval(this.runTick, 10000);
}
componentWillUnmount(){
clearInterval(this.tick);
}
runTick = () => {
this.getList();
}
getList = () => {
let {getRequest, showDialog} = this.props;
fetch('/api/modbus/getalliostatus', getRequest())
.then(response=>response.json())
.then(json => {
if(json.status != 1) return showDialog(json.message);
let dev = json.data.rt.device || [];
let status = json.data.record || [];
for(let i in dev) {
dev[i].list = [];
for(let j in status){
if(status[j].node == dev[i].node){
dev[i].list.push(status[j]);
}
}
}
this.setState({
list: dev
});
})
}
render() {
let {i18n} = this.props;
return (
null
<Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
<Grid columns={3}>
{
this.state.list.map((t,idx) => (
<DevField key={idx} i18n={i18n} data={t} />
))
}
</Grid>
</Container>
)
}
}

View File

@ -47,7 +47,12 @@ class LocStatusWloc extends React.Component {
getStatus = () => {
let {toggleLoading, showDialog} = this.props;
fetch('/api/wristband/getstatus', getRequest())
fetch('/api/wristband/getstatus', getRequest({
sort: {
field: 'time',
order: 'desc'
}
}))
.then(response=>response.json())
.then(json => {
if(json.status != 1) return showDialog(json.message);