add modbus preview page
This commit is contained in:
parent
64ad807310
commit
e5bf72435c
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
|
23
src/components/AdminPage/ModbusPreview/DeviceField.js
Normal file
23
src/components/AdminPage/ModbusPreview/DeviceField.js
Normal 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;
|
34
src/components/AdminPage/ModbusPreview/StatusItem.js
Normal file
34
src/components/AdminPage/ModbusPreview/StatusItem.js
Normal 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;
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user