diff --git a/spug_web/src/pages/home/AlarmTrend.js b/spug_web/src/pages/home/AlarmTrend.js
new file mode 100644
index 0000000..37f0375
--- /dev/null
+++ b/spug_web/src/pages/home/AlarmTrend.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Card } from 'antd';
+import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
+import { http } from 'libs';
+
+export default class AlarmTrend extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ res: []
+ };
+ }
+
+ componentDidMount() {
+ http.get('/api/home/alarm/')
+ .then(res => this.setState({res}))
+ .finally(() => this.setState({loading: false}))
+ }
+
+ render() {
+ const {res, loading} = this.state;
+ return (
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/spug_web/src/pages/home/DeployPie.js b/spug_web/src/pages/home/DeployPie.js
new file mode 100644
index 0000000..b699955
--- /dev/null
+++ b/spug_web/src/pages/home/DeployPie.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Card } from 'antd';
+import { Chart, Geom, Axis, Tooltip, Coord, Guide, Label } from 'bizcharts';
+import DataSet from "@antv/data-set";
+import { http } from 'libs';
+
+export default class AlarmTrend extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ host: 0,
+ res: []
+ };
+ }
+
+ componentDidMount() {
+ http.get('/api/home/deploy/')
+ .then(res => this.setState(res))
+ .finally(() => this.setState({loading: false}))
+ }
+
+ render() {
+ const {res, host, loading} = this.state;
+ const dv = new DataSet.DataView();
+ dv.source(res).transform({
+ type: "percent",
+ field: "count",
+ dimension: "name",
+ as: "percent"
+ });
+ const cols = {
+ percent: {
+ formatter: val => {
+ val = val * 100 + "%";
+ return val;
+ }
+ }
+ };
+ return (
+
+
+
+
+
+
+ 主机
${host}台`}
+ alignX="middle"
+ alignY="middle"
+ />
+
+ {
+ return {
+ name: name,
+ value: count + '台'
+ };
+ }
+ ]}
+ style={{lineWidth: 1, stroke: "#fff"}}>
+
+
+
+ )
+ }
+}
diff --git a/spug_web/src/pages/home/RequestTop.js b/spug_web/src/pages/home/RequestTop.js
new file mode 100644
index 0000000..0b786c2
--- /dev/null
+++ b/spug_web/src/pages/home/RequestTop.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card } from 'antd';
+import { Chart, Geom, Axis, Tooltip } from 'bizcharts';
+import { http } from 'libs';
+
+export default class RequestTop extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ res: []
+ };
+ }
+
+ componentDidMount() {
+ http.get('/api/home/request/')
+ .then(res => this.setState({res}))
+ .finally(() => this.setState({loading: false}))
+ }
+
+ render() {
+ const {res, loading} = this.state;
+ return (
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/spug_web/src/pages/home/StatisticCard.js b/spug_web/src/pages/home/StatisticCard.js
new file mode 100644
index 0000000..c75437a
--- /dev/null
+++ b/spug_web/src/pages/home/StatisticCard.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Statistic, Card, Row, Col} from 'antd';
+import { http } from 'libs';
+
+export default class StatisticCard extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ res: {}
+ }
+ }
+ componentDidMount() {
+ http.get('/api/home/statistic/')
+ .then(res => this.setState({res}))
+ .finally(() => this.setState({loading: false}))
+ }
+
+ render() {
+ const {res, loading} = this.state;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/spug_web/src/pages/home/index.js b/spug_web/src/pages/home/index.js
index cb6d4c8..448ed56 100644
--- a/spug_web/src/pages/home/index.js
+++ b/spug_web/src/pages/home/index.js
@@ -1,199 +1,25 @@
import React from 'react';
-import {observer} from 'mobx-react';
-import { Card, Row, Col } from 'antd';
-import { StatisticsCard } from "../../components";
-import { Chart, Geom, Axis, Tooltip, Coord, Guide, Label } from 'bizcharts';
-import DataSet from "@antv/data-set";
-import store from './store';
+import { Row, Col } from 'antd';
+import StatisticsCard from './StatisticCard';
+import AlarmTrend from './AlarmTrend';
+import RequestTop from './RequestTop';
+import DeployPie from './DeployPie';
-@observer
class HomeIndex extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- failure: 0
- };
- this.data = [
- {region: '北京机房', count: 275},
- {region: '上海机房', count: 115},
- {region: '杭州机房', count: 350},
- ];
- this.cols = {
- region: {alias: '机房'},
- count: {alias: '服务器数量'}
- };
- this.data2 = [
- {item: 'RPC-User', count: 5},
- {item: 'SOA', count: 2},
- {item: 'RPC-Order', count: 10},
- {item: 'RPC-Goods', count: 10},
- {item: 'WebServer', count: 5},
- ];
- this.dv = new DataSet.DataView();
- this.dv.source(this.data2).transform({
- type: "percent",
- field: "count",
- dimension: "item",
- as: "percent"
- });
- this.cols2 = {
- percent: {
- formatter: val => {
- val = (val * 100).toFixed(0) + "%";
- return val;
- }
- }
- };
-
- }
-
- componentDidMount() {
- // store.fetchInfo()
- }
-
render() {
- const data = [
- {
- year: "1991",
- value: 3
- },
- {
- year: "1992",
- value: 4
- },
- {
- year: "1993",
- value: 3.5
- },
- {
- year: "1994",
- value: 5
- },
- {
- year: "1995",
- value: 4.9
- },
- {
- year: "1996",
- value: 6
- },
- {
- year: "1997",
- value: 7
- },
- {
- year: "1998",
- value: 9
- },
- {
- year: "1999",
- value: 13
- }
- ];
- const cols = {
- value: {
- min: 0
- },
- year: {
- range: [0, 1]
- }
- };
return (
-
-
-
-
- 99}/>
- 1}/>
- {/*value={{store.info.failure}}/>*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- percent = percent * 100 + "%";
- return {
- name: item,
- value: percent
- };
- }
- ]}
- style={{lineWidth: 1, stroke: "#fff"}}>
-
-
-
-
-
-
+
+
+
+
+
+
+
+
)
}
}