update

src/components/DashBoard/AlertItem.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {List, Grid, Label} from 'semantic-ui-react';
+
+const AlertItem = ({i18n, name, type}) => {
+
+    return (
+        <Grid.Row columns={3} color="red">
+            <Grid.Column>
+                <Label basic content={type == 'di' ? "DigitInput" : "LeOne"} />
+            </Grid.Column>
+            <Grid.Column>
+                <Label basic content={i18n&&i18n.t ? i18n.t('dashboard.label.name') : ''} />{name}
+            </Grid.Column>
+            <Grid.Column>
+                <Label basic content={i18n&&i18n.t ? i18n.t('dashboard.label.status') : ''} />
+                {i18n&&i18n.t ? ( type == 'di' ? i18n.t('dashboard.status.digitinput') : i18n.t('dashboard.status.leone') ): ''}
+            </Grid.Column>
+        </Grid.Row>
+    )
+}
+
+export default AlertItem;

src/components/DashBoard/index.js

@@ -1,40 +1,103 @@
 import React from 'react';
-import {Container, Segment, Divider, Grid, Label} from 'semantic-ui-react';
+import {Container, Segment, Divider, Grid, Label, List} from 'semantic-ui-react';
+import {getRequest} from '../../actions';
+import {convertTime} from '../../tools';
+import AlertItem from './AlertItem';
 
 class DashBoardUnit extends React.Component {
-    
+    state = {
+        timeOffset: 0,
+        timeStr: '',
+        show: false
+    }
+
     tick = null;
 
     runTick = () => {
-        
+        let time = Date.now();
+        if(Math.floor(time/1000)%5 == 0){
+            this.props.getDashboard();
+        }
+        this.setState({
+            timeStr: convertTime((time + this.state.timeOffset), true)
+        })
     }
 
     componentDidMount(){
-        this.tick = setInterval(this.runTick, 1000)
+        this.checkRunTick();
+        fetch('/api/system/gettime', getRequest())
+            .then(response => response.json())
+            .then(json => {
+                if(json.status != 1) return this.props.showDialog(json.message);
+                let t = Date.now();
+                let timeOffset = t - (json.data.record[0].time * 1000);
+                this.setState({
+                    timeOffset
+                })
+            })
     }
 
+    componentWillReceiveProps (np) {
+        if(np.show != this.state.show) {
+            this.setState({
+                show: np.show
+            }, ()=>{
+                this.checkRunTick();
+            })
+        }
+    }
+
+    checkRunTick = () => {
+        if(this.state.show){
+            this.tick = setInterval(this.runTick, 1000)
+        }else{
+            clearInterval(this.tick);
+            this.props.clearList();
+        }
+    }
+
+    componentWillUnmount() {
+		clearInterval(this.tick);
+        this.props.clearList();
+	}
+
     render(){
-        let {i18n} = this.props;
+        let {i18n, data} = this.props;
+        if(!this.state.show) return null;
         return (
-            <Container style={{fontSize: '20px'}}>
+            <Container style={{fontSize: '20px', marginBottom: '30px'}}>
                 <Segment>
                     <Divider horizontal>{i18n&&i18n.t ? i18n.t('dashboard.sysinfo') : ''}</Divider>
                     <Grid columns={3}>
                         <Grid.Column textAlign="center">
                             <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.systime') : ''} />
                             <br />
+                            {this.state.timeStr}
                         </Grid.Column>
                         <Grid.Column textAlign="center">
                             <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.sysip') : ''} />
                             <br />
+                            {data.ip}
                         </Grid.Column>
                         <Grid.Column textAlign="center">
                             <Label basic size="large" content={i18n&&i18n.t?i18n.t('dashboard.sysversion') : ''} />
                             <br />
+                            {data.version}
                         </Grid.Column>
                     </Grid>
                     <Divider horizontal>{i18n&&i18n.t ? i18n.t('dashboard.devstats') : ''}</Divider>
-
+                        <Grid>
+                            {
+                                data.di.map((t,idx)=>(
+                                    <AlertItem key={`di${idx}`} i18n={i18n} name={t.diname} type="di" />
+                                ))
+                            }
+                            {
+                                data.leone.map((t,idx)=>(
+                                    <AlertItem key={`le${idx}`} i18n={i18n} name={t.leonename} type="leone" />
+                                ))
+                            }
+                        </Grid>
                 </Segment>
             </Container>
         )

src/components/MainMenu/index.js

@@ -3,7 +3,7 @@ import {Sidebar, Menu, Segment, Icon, Container} from 'semantic-ui-react';
 import {Link} from 'react-router';
 import MItem from './Item';
 
-const MainMenu = ({i18n, show, toggleMenu, children, permissions}) => (
+const MainMenu = ({i18n, show, toggleMenu, children, permissions, showDashboard, toggleDashboard}) => (
 	<div style={{height: '100%'}}>
 		<Sidebar.Pushable as={Segment} style={{zIndex: 100}}>
 			<Sidebar as={Menu}  animation="push" width="thin" visible={show} icon="labeled" vertical inverted>
@@ -28,6 +28,17 @@ const MainMenu = ({i18n, show, toggleMenu, children, permissions}) => (
 						<Icon name="sidebar" />
 						{i18n && 't' in i18n ? i18n.t('menu.title') : ''}
 					</Menu.Item>
+					<Menu.Menu position="right">
+						<Menu.Item onClick={()=>{
+								let ss = !showDashboard;
+								toggleDashboard(ss)
+								localStorage.setItem('show_dashboard', ss ? '1' : '0');
+							}}>
+							{i18n&&i18n.t ? (
+								showDashboard ? '關閉Dashboard' : '開啟Dashboard'
+							) : ''}
+						</Menu.Item>
+					</Menu.Menu>
 				</Menu>
 				<Container style={{paddingTop: '45px', paddingBottom: '40px'}}>
 				{children}