add modbus preview page

route/api/modbus.js

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

src/components/AdminPage/ModbusPreview/DeviceField.js

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

src/components/AdminPage/ModbusPreview/StatusItem.js

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

src/components/AdminPage/ModbusPreview/index.js

@@ -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>
         )
     }
 }

src/components/AdminPage/Wristband/LocStatusWloc/index.js

@@ -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);