首页

frontend/saas-web/app/model/chart/DataXY.js

@@ -0,0 +1,12 @@
+Ext.define('saas.model.chart.DataXY', {
+    extend: 'saas.model.Base',
+
+    fields: [
+        {
+            name: 'xvalue'
+        },
+        {
+            name: 'yvalue'
+        }
+    ]
+});

frontend/saas-web/app/model/chart/MultiDataXY.js

@@ -0,0 +1,21 @@
+Ext.define('saas.model.chart.MultiDataXY', {
+    extend: 'saas.model.Base',
+
+    fields: [
+        {
+            name: 'xvalue'
+        },
+        {
+            name: 'y1value'
+        },
+        {
+            name: 'y2value'
+        },
+        {
+            name: 'y3value'
+        },
+        {
+            name: 'y4value'
+        }
+    ]
+});

frontend/saas-web/app/view/core/chart/Area.js

@@ -0,0 +1,89 @@
+Ext.define('saas.view.core.chart.Area', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-area',
+
+    requires: [
+        'Ext.chart.CartesianChart',
+        'Ext.chart.axis.Category',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.series.Line',
+        'Ext.chart.interactions.PanZoom'
+    ],
+
+    title: 'Area Chart',
+    iconCls: 'x-fa fa-area-chart',
+
+    items: [{
+        xtype: 'cartesian',
+        colors: [
+            '#115fa6',
+            '#94ae0a'
+        ],
+        bind: '{areaData}',
+        series: [
+            {
+                type: 'line',
+                colors: [
+                    'rgba(103, 144, 199, 0.6)'
+                ],
+                xField: 'xvalue',
+                yField: [
+                    'y1value'
+                ],
+                fill: true,
+                smooth: true
+            },
+            {
+                type: 'line',
+                colors: [
+                    'rgba(238, 146, 156, 0.6)'
+                ],
+                xField: 'xvalue',
+                yField: [
+                    'y2value'
+                ],
+                fill: true,
+                smooth: true
+            }
+        ],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: {
+                    type: 'panzoom',
+                    zoomOnPanGesture: true
+                }
+            }
+        },
+        axes: [{
+            type: 'category',
+            fields: [
+                'xvalue'
+            ],
+            hidden: true,
+            position: 'bottom'
+        },{
+            type: 'numeric',
+            fields: [
+                'y1value',
+                'y2value',
+                'y3value'
+            ],
+            grid: {
+                odd: {
+                    fill: '#e8e8e8'
+                }
+            },
+            hidden: true,
+            position: 'left'
+        }]
+    }]
+});

frontend/saas-web/app/view/core/chart/Bar.js

@@ -0,0 +1,67 @@
+Ext.define('saas.view.core.chart.Bar', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-bar',
+
+    requires: [
+        'Ext.chart.CartesianChart',
+        'Ext.chart.axis.Category',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.interactions.PanZoom',
+        'Ext.chart.series.Bar'
+    ],
+
+    title: 'Bar Chart',
+    iconCls: 'x-fa fa-bar-chart',
+
+    items: [{
+        xtype: 'cartesian',
+        colors: [
+            '#6aa5db'
+        ],
+        bind: '{barData}',
+        axes: [{
+            type: 'category',
+            fields: [
+                'xvalue'
+            ],
+            hidden: true,
+            position: 'bottom'
+        },{
+            type: 'numeric',
+            fields: [
+                'yvalue'
+            ],
+            grid: {
+                odd: {
+                    fill: '#e8e8e8'
+                }
+            },
+            hidden: true,
+            position: 'left'
+        }],
+        series: [{
+            type: 'bar',
+            xField: 'xvalue',
+            yField: [
+                'yvalue'
+            ]
+        }],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: {
+                    type: 'panzoom',
+                    zoomOnPanGesture: true
+                }
+            }
+        }
+    }]
+});

frontend/saas-web/app/view/core/chart/ChartBase.js

@@ -0,0 +1,23 @@
+Ext.define('saas.view.core.chart.ChartBase', {
+    extend: 'Ext.Panel',
+
+    height: 300,
+
+    ui: 'light',
+    layout: 'fit',
+
+    cls: 'quick-graph-panel shadow',
+    // headerPosition: 'bottom',
+
+    defaults: {
+        width: '100%'
+    },
+
+    initComponent: function() {
+        var me = this;
+        
+
+
+        me.callParent(arguments);
+    }
+});

frontend/saas-web/app/view/core/chart/Gauge.js

@@ -0,0 +1,38 @@
+Ext.define('saas.view.core.chart.Gauge', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-gauge',
+
+    requires: [
+        'Ext.chart.PolarChart',
+        'Ext.chart.series.Gauge'
+    ],
+
+    title: 'Gauge Chart',
+    iconCls: 'x-fa fa-wifi',
+
+    items: [{
+        xtype: 'polar',
+        colors: [
+            '#6aa5db',
+            '#aed581'
+        ],
+        bind: '{gaugeData}',
+        series: [{
+            type: 'gauge',
+            angleField: 'position',
+            needleLength: 100
+        }],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            }
+        }
+    }]
+
+});

frontend/saas-web/app/view/core/chart/Line.js

@@ -0,0 +1,75 @@
+Ext.define('saas.view.core.chart.Line', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-line',
+
+    requires: [
+        'Ext.chart.CartesianChart',
+        'Ext.chart.axis.Category',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.interactions.PanZoom',
+        'Ext.chart.series.Line'
+
+    ],
+
+    title: 'Line Chart',
+    iconCls: 'x-fa fa-line-chart',
+
+    items: [{
+        xtype: 'cartesian',
+        colors: [
+            '#6aa5db',
+            '#94ae0a'
+        ],
+        bind: '{lineData}',
+        axes: [{
+            type: 'category',
+            fields: [
+                'xvalue'
+            ],
+            hidden: true,
+            position: 'bottom'
+        },{
+            type: 'numeric',
+            fields: [
+                'yvalue',
+                'y1value',
+                'y2value',
+                'y3value',
+                'y4value',
+                'y5value'
+            ],
+            hidden: true,
+            position: 'left'
+        }],
+        series: [{
+            type: 'line',
+            xField: 'xvalue',
+            yField: [
+                'yvalue'
+            ]
+        },{
+            type: 'line',
+            xField: 'xvalue',
+            yField: [
+                'y1value'
+            ]
+        }],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: {
+                    type: 'panzoom',
+                    zoomOnPanGesture: true
+                }
+            }
+        }
+    }]
+});

frontend/saas-web/app/view/core/chart/Pie.js

@@ -0,0 +1,55 @@
+Ext.define('saas.view.core.chart.Pie', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-pie',
+
+    requires: [
+        'Ext.chart.PolarChart',
+        'Ext.chart.interactions.Rotate',
+        'Ext.chart.series.Pie',
+        'Ext.chart.series.sprite.PieSlice'
+    ],
+
+    iconCls: 'x-fa fa-pie-chart',
+
+    items: [{
+        xtype: 'polar',
+        colors: [
+            '#aed581',
+            '#6aa5db',
+            '#ee929c',
+            '#61A0A8',
+            '#D48265',
+            '#91C7AE',
+            '#CA8622',
+            '#BDA29A'
+        ],
+        bind: '{pieData}',
+        // series: [{
+        //     type: 'pie',
+        //     angleField: 'yvalue',
+        //     label: {
+        //         field: 'xvalue',
+        //         display: 'rotate',
+        //         contrast: true,
+        //         font: '12px Open Sans',
+        //     },
+        //     // xField: 'yvalue'
+        // }],
+        series: [{
+            type: 'pie',
+            angleField: 'yvalue',
+            label: {
+                field: 'xvalue',
+            },
+            highlight: true,
+            tooltip: {
+                trackMouse: true,
+                renderer: 'onSeriesTooltipRender'
+            }
+        }],
+        // legend: {
+        //     docked: 'bottom'
+        // },
+        interactions: 'rotate'
+    }]
+});

frontend/saas-web/app/view/core/chart/Pie3D.js

@@ -0,0 +1,42 @@
+Ext.define('saas.view.core.chart.Pie3D', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-pie3d',
+
+    requires: [
+        'Ext.chart.PolarChart',
+        'Ext.chart.interactions.Rotate',
+        'Ext.chart.series.Pie3D'
+    ],
+
+    title: '3D Pie Chart',
+    iconCls: 'x-fa fa-pie-chart',
+
+    items: [{
+        xtype: 'polar',
+        colors: [
+            '#aed581',
+            '#6aa5db',
+            '#ee929c'
+        ],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: 'rotate'
+            }
+        },
+        bind: '{pieData}',
+        series: [{
+            type: 'pie3d',
+            angleField: 'yvalue',
+            donut: 30
+        }]
+    }]
+});

frontend/saas-web/app/view/core/chart/Polar.js

@@ -0,0 +1,55 @@
+Ext.define('saas.view.core.chart.Polar', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-polar',
+
+    requires: [
+        'Ext.chart.PolarChart',
+        'Ext.chart.axis.Category',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.interactions.Rotate',
+        'Ext.chart.series.Radar'
+    ],
+
+    title: 'Radial Chart',
+    iconCls: 'x-fa fa-dot-circle-o',
+
+    items: [{
+        xtype: 'polar',
+        colors: ['#6aa5db'],
+        bind: '{radialData}',
+        axes: [{
+            type: 'numeric',
+            fields: [
+                'yvalue'
+            ],
+            grid: true,
+            position: 'radial'
+        },{
+            type: 'category',
+            fields: [
+                'xvalue'
+            ],
+            grid: true,
+            position: 'angular'
+        }],
+        series: [{
+            type: 'radar',
+            xField: 'xvalue',
+            yField: 'yvalue'
+        }],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: 'rotate'
+            }
+        }
+    }]
+});

frontend/saas-web/app/view/core/chart/Stacked.js

@@ -0,0 +1,71 @@
+Ext.define('saas.view.core.chart.Stacked', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'core-chart-stacked',
+
+    requires: [
+        'Ext.chart.CartesianChart',
+        'Ext.chart.axis.Category',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.series.Bar',
+        'Ext.chart.interactions.PanZoom'
+    ],
+
+    title: 'Stacked Bar Chart',
+    iconCls: 'x-fa fa-bar-chart',
+
+    items: [{
+        xtype: 'cartesian',
+        colors: [
+            '#6aa5db',
+            '#ee929c'
+        ],
+        bind: '{stackedData}',
+        axes: [{
+            type: 'category',
+            fields: [
+                'xvalue'
+            ],
+            hidden: true,
+            position: 'bottom'
+        },{
+            type: 'numeric',
+            fields: [
+                'y1value',
+                'y2value',
+                'y3value'
+            ],
+            grid: {
+                odd: {
+                    fill: '#e8e8e8'
+                }
+            },
+            hidden: true,
+            position: 'left'
+        }],
+        series: [{
+            type: 'bar',
+            xField: 'xvalue',
+            yField: [
+                'y2value',
+                'y3value'
+            ]
+        }],
+        platformConfig: {
+            phone: {
+                // On a phone the whole view becomes a vertical strip of charts,
+                // which makes it impossible to scroll the view if touch action
+                // started on a chart. So we use a custom touchAction config.
+                touchAction: {
+                    panX: true,
+                    panY: true
+                }
+            },
+            '!phone': {
+                interactions: {
+                    type: 'panzoom',
+                    zoomOnPanGesture: true
+                }
+            }
+        }
+    }]
+});

frontend/saas-web/app/view/home/ChartsModel.js

@@ -0,0 +1,403 @@
+Ext.define('saas.view.home.ChartsModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.chartsmodel',
+
+    stores: {
+        barData: {
+            model: 'saas.model.chart.DataXY',
+            data: [
+                {
+                    "xvalue": 2004,
+                    "yvalue": 239
+                },
+                {
+                    "xvalue": 2005,
+                    "yvalue": 402
+                },
+                {
+                    "xvalue": 2006,
+                    "yvalue": 706
+                },
+                {
+                    "xvalue": 2007,
+                    "yvalue": 432
+                },
+                {
+                    "xvalue": 2008,
+                    "yvalue": 200
+                },
+                {
+                    "xvalue": 2009,
+                    "yvalue": 763
+                },
+                {
+                    "xvalue": 2010,
+                    "yvalue": 550
+                },
+                {
+                    "xvalue": 2011,
+                    "yvalue": 630
+                },
+                {
+                    "xvalue": 2012,
+                    "yvalue": 278
+                },
+                {
+                    "xvalue": 2013,
+                    "yvalue": 312
+                },
+                {
+                    "xvalue": 2014,
+                    "yvalue": 600
+                },
+                {
+                    "xvalue": 2015,
+                    "yvalue": 283
+                }
+            ]
+        },
+
+        stackedData: {
+            model: 'saas.model.chart.MultiDataXY',
+            data: [
+                {
+                    "xvalue": 1997,
+                    "y1value": 281,
+                    "y2value": 72,
+                    "y3value": 269,
+                    "y4value": 762
+                },
+                {
+                    "xvalue": 1981,
+                    "y1value": 518,
+                    "y2value": 999,
+                    "y3value": 43,
+                    "y4value": 310
+                },
+                {
+                    "xvalue": 1985,
+                    "y1value": 38,
+                    "y2value": 311,
+                    "y3value": 942,
+                    "y4value": 77
+                },
+                {
+                    "xvalue": 1984,
+                    "y1value": 936,
+                    "y2value": 415,
+                    "y3value": 562,
+                    "y4value": 412
+                },
+                {
+                    "xvalue": 1979,
+                    "y1value": 978,
+                    "y2value": 331,
+                    "y3value": 927,
+                    "y4value": 114
+                },
+                {
+                    "xvalue": 1982,
+                    "y1value": 196,
+                    "y2value": 240,
+                    "y3value": 72,
+                    "y4value": 888
+                },
+                {
+                    "xvalue": 1992,
+                    "y1value": 481,
+                    "y2value": 375,
+                    "y3value": 139,
+                    "y4value": 762
+                },
+                {
+                    "xvalue": 19895,
+                    "y1value": 623,
+                    "y2value": 999,
+                    "y3value": 260,
+                    "y4value": 310
+                },
+                {
+                    "xvalue": 1988,
+                    "y1value": 328,
+                    "y2value": 451,
+                    "y3value": 542,
+                    "y4value": 77
+                },
+                {
+                    "xvalue": 1980,
+                    "y1value": 456,
+                    "y2value": 615,
+                    "y3value": 342,
+                    "y4value": 412
+                },
+                {
+                    "xvalue": 1990,
+                    "y1value": 788,
+                    "y2value": 531,
+                    "y3value": 489,
+                    "y4value": 114
+                }
+            ]
+        },
+
+        gaugeData: {
+            data: [
+                {
+                    position: 40
+                }
+            ],
+
+            fields: [
+                {
+                    name: 'position'
+                }
+            ]
+        },
+
+        radialData: {
+            model: 'saas.model.chart.DataXY',
+            data: [
+                {
+                    "xvalue": "A",
+                    "yvalue": 417
+                },
+                {
+                    "xvalue": "B",
+                    "yvalue": 676
+                },
+                {
+                    "xvalue": "C",
+                    "yvalue": 606
+                },
+                {
+                    "xvalue": "D",
+                    "yvalue": 124
+                },
+                {
+                    "xvalue": "E",
+                    "yvalue": 473
+                },
+                {
+                    "xvalue": "F",
+                    "yvalue": 108
+                },
+                {
+                    "xvalue": "G",
+                    "yvalue": 847
+                },
+                {
+                    "xvalue": "H",
+                    "yvalue": 947
+                },
+                {
+                    "xvalue": "I",
+                    "yvalue": 694
+                },
+                {
+                    "xvalue": "J",
+                    "yvalue": 603
+                }
+            ]
+        },
+
+        lineData: {
+            model: 'saas.model.chart.DataXY',
+            data: [
+                {
+                    "xvalue": 2011,
+                    "yvalue": 0.1,
+                    "y1value": 0.2,
+                    "y2value": 0.3,
+                    "y3value": 0.1,
+                    "y4value": 0,
+                    "y5value": 1
+                },
+                {
+                    "xvalue": 2012,
+                    "yvalue": 0.2,
+                    "y1value": 0.4,
+                    "y2value": 0.2,
+                    "y3value": 0.2,
+                    "y4value": 0,
+                    "y5value": 1
+                },
+                {
+                    "xvalue": 2013,
+                    "yvalue": 0.3,
+                    "y1value": 0.2,
+                    "y2value": 0.4,
+                    "y3value": 0.3,
+                    "y4value": 0,
+                    "y5value": 1
+        
+                },
+                {
+                    "xvalue": 2014,
+                    "yvalue": 0.2,
+                    "y1value": 0.4,
+                    "y2value": 0.1,
+                    "y3value": 0.2,
+                    "y4value": 0,
+                    "y5value": 1
+                },{
+                    "xvalue": 2015,
+                    "yvalue": 0.4,
+                    "y1value": 0.3,
+                    "y2value": 0.4,
+                    "y3value": 0.4,
+                    "y4value": 0,
+                    "y5value": 1
+                }
+            ]
+        },
+
+        pieData: {
+            model: 'saas.model.chart.DataXY',
+            data: [{
+                "xvalue": "华商龙",
+                "yvalue": 200.19
+            }, {
+                "xvalue": "维泰",
+                "yvalue": 180.17
+            }, {
+                "xvalue": "数码",
+                "yvalue": 150.15
+            }, {
+                "xvalue": "优企",
+                "yvalue": 150.15
+            }, {
+                "xvalue": "云服",
+                "yvalue": 120.12
+            }, {
+                "xvalue": "其他",
+                "yvalue": 230.22
+            }]
+        },
+
+        areaData: {
+            model: 'saas.model.chart.MultiDataXY',
+            data: [
+                {
+                    "xvalue": 250,
+                    "y1value": 94,
+                    "y2value": 40
+                },
+                {
+                    "xvalue": 500,
+                    "y1value": 78,
+                    "y2value": 46
+                },
+                {
+                    "xvalue": 750,
+                    "y1value": 60,
+                    "y2value": 53
+                },
+                {
+                    "xvalue": 1250,
+                    "y1value": 51,
+                    "y2value": 48
+                },
+                {
+                    "xvalue": 1500,
+                    "y1value": 60,
+                    "y2value": 36
+                },
+                {
+                    "xvalue": 1750,
+                    "y1value": 68,
+                    "y2value": 26
+                },
+                {
+                    "xvalue": 2250,
+                    "y1value": 59,
+                    "y2value": 37
+                },
+                {
+                    "xvalue": 2500,
+                    "y1value": 40,
+                    "y2value": 58
+                },
+                {
+                    "xvalue": 2750,
+                    "y1value": 24,
+                    "y2value": 78
+                },
+                {
+                    "xvalue": 3250,
+                    "y1value": 36,
+                    "y2value": 85
+                },
+                {
+                    "xvalue": 3500,
+                    "y1value": 65,
+                    "y2value": 70
+                },
+                {
+                    "xvalue": 3750,
+                    "y1value": 94,
+                    "y2value": 55
+                },
+                {
+                    "xvalue": 4250,
+                    "y1value": 103,
+                    "y2value": 61
+                },
+                {
+                    "xvalue": 4500,
+                    "y1value": 83,
+                    "y2value": 82
+                },
+                {
+                    "xvalue": 4750,
+                    "y1value": 61,
+                    "y2value": 102
+                },
+                {
+                    "xvalue": 5250,
+                    "y1value": 55,
+                    "y2value": 95
+                },
+                {
+                    "xvalue": 5500,
+                    "y1value": 70,
+                    "y2value": 67
+                },
+                {
+                    "xvalue": 5750,
+                    "y1value": 84,
+                    "y2value": 39
+                },
+                {
+                    "xvalue": 6250,
+                    "y1value": 78,
+                    "y2value": 31
+                },
+                {
+                    "xvalue": 6500,
+                    "y1value": 58,
+                    "y2value": 49
+                },
+                {
+                    "xvalue": 6750,
+                    "y1value": 38,
+                    "y2value": 69
+                },
+                {
+                    "xvalue": 7250,
+                    "y1value": 41,
+                    "y2value": 74
+                },
+                {
+                    "xvalue": 7500,
+                    "y1value": 65,
+                    "y2value": 60
+                },
+                {
+                    "xvalue": 7750,
+                    "y1value": 89,
+                    "y2value": 46
+                }
+            ]
+        }
+    }
+});

frontend/saas-web/app/view/home/Home.js

@@ -3,90 +3,138 @@ Ext.define('saas.view.home.Home', {
     xtype: 'home',
 
     requires: [
-        'saas.view.home.MsgCard',
         'Ext.slider.Single',
         'Ext.form.field.Display',
         'Ext.layout.container.Border'
     ],
 
-    layout: {
-        type: 'vbox',
-        pack: 'start',
-        align: 'stretch'
+    controller: 'home',
+    viewModel: {
+        type: 'chartsmodel'
     },
 
-    bodyPadding: 5,
+    layout: 'responsivecolumn',
+
+    scrollable: true,
 
     defaults: {
-        xtype: 'container'
+        shadow: true,
+        xtype: 'panel',
+        layout: 'column',
+        cls: 'x-home-panel',
+        userCls: 'big-100 small-100',
     },
 
-    items: [
-        {
-            height: 200,
-            layout: 'column',
-            margin: '0 0 20 0',
-            items: [
-                {
-                    xtype: 'msgcard',
-                    containerColor: 'cornflower-blue',
-                    columnWidth: 0.25,
-                    margin: '0 15 0 0',
-                    data: {
-                        count: 0,
-                        title: '库存预警',
-                        icon: 'exclamation-triangle'
-                    }
-                },
-                {
-                    xtype: 'msgcard',
-                    containerColor: 'green',
-                    columnWidth: 0.25,
-                    margin: '0 15 0 0',
-                    data: {
-                        count: 11,
-                        title: '未发货销售订单',
-                        icon: 'shopping-cart'
-                    }
-                },
-                {
-                    xtype: 'msgcard',
-                    containerColor: 'magenta',
-                    columnWidth: 0.25,
-                    margin: '0 15 0 0',
-                    data: {
-                        count: 6,
-                        title: '未审核销售订单',
-                        icon: 'check'
+    items: [{
+        title: '实时数据',
+        xtype: 'infocard',
+        infoData: [{
+            title: '七天内待出货销售',
+            content: '168件',
+            color: 'yellow',
+        }, {
+            title: '七天内待入库采购',
+            content: '168件',
+            color: 'purple',
+        }, {
+            title: '七天内代付款',
+            content: '168件',
+            color: 'red',
+        }, {
+            title: '七天内代收款',
+            content: '168件',
+            color: 'yellow',
+        }, {
+            title: '未审核验收',
+            content: '168件'
+        }, {
+            title: '七天内待出货销售',
+            content: '168件'
+        }, {
+            title: '未审核出货',
+            content: '168件'
+        }]
+    }, {
+        title: '2018年11月经营分析',
+        latyout: 'column',
+        items: [{
+            xtype: 'core-chart-pie',
+            columnWidth: 0.33,
+            chartConfig: {
+                captions: {
+                    credits: {
+                        text: 'Data: IDC Predictions - 2017\n' +
+                            'Source: Internet',
+                        align: 'left'
                     }
                 },
-                {
-                    xtype: 'msgcard',
-                    containerColor: 'orange',
-                    columnWidth: 0.25,
-                    data: {
-                        count: 5,
-                        title: '未审核购货订单',
-                        icon: 'calendar-check-o'
+            }
+        }, {
+            xtype: 'core-chart-bar',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-gauge',
+            columnWidth: 0.33
+        }]
+    }, {
+        title: '2018年11月经营分析',
+        latyout: 'column',
+        items: [{
+            xtype: 'core-chart-line',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-pie',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-pie3d',
+            columnWidth: 0.33
+        }]
+    }],
+
+    items1: [{
+        title: '2018年11月经营分析',
+        userCls: 'big-50 small-100',
+        items: [{
+            xtype: 'core-chart-pie',
+            columnWidth: 0.33,
+            chartConfig: {
+                captions: {
+                    credits: {
+                        text: 'Data: IDC Predictions - 2017\n' +
+                            'Source: Internet',
+                        align: 'left'
                     }
                 },
-            ]
-        },
-        {
-            xtype: 'tabpanel',
-            flex: 10,
-            cls: 'shadow',
-            items: [
-                {
-                    title: '销货'
-                },
-                {
-                    title: '购货'
-                },
-                {
-                    title: '仓库'
-                }
-            ]
-        }
-    ]
+            }
+        }, {
+            xtype: 'core-chart-bar',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-gauge',
+            columnWidth: 0.33
+        }]
+    }, {
+        title: '经营趋势分析',
+        userCls: 'big-50 small-100',
+        items: [{
+            xtype: 'core-chart-line',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-pie',
+            columnWidth: 0.33
+        }, {
+            xtype: 'core-chart-pie3d',
+            columnWidth: 0.33
+        }]
+    }, {
+        title: '待办事宜',
+        userCls: 'big-100 small-100',
+        items: [{
+            xtype: 'core-chart-polar',
+            columnWidth: 0.5
+        }, {
+            xtype: 'core-chart-stacked',
+            columnWidth: 0.5
+        }]
+    }],
 });

frontend/saas-web/app/view/home/Home.scss

@@ -91,6 +91,36 @@ $unaudit-purc-container-color: dynamic(#e91e63);
     left: 0
 }
 
+.x-home-panel {
+    border-radius: 2px;
+
+    &>.x-panel-header {
+        background-color: #fff;
+
+        &>.x-box-inner {
+            &>.x-box-target {
+                &>.x-title {
+                    &>.x-title-text {
+                        font-size: 16px;
+                        color: #505363;
+                        padding-left: 10px;
+            
+                        &:before {
+                            content: ' ';
+                            position: absolute;
+                            width: 4px;
+                            height: 100%;
+                            background: #34BAF6;
+                            left: 0;
+                            border-radius: 2px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .x-responsivecolumn {
     padding: 0;
 }

frontend/saas-web/app/view/home/HomeController.js

@@ -0,0 +1,8 @@
+Ext.define('saas.view.home.HomeController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.home',
+
+    onSeriesTooltipRender: function (tooltip, record, item) {
+        tooltip.setHtml(record.get('os') + ': ' + record.get('data1') + '%');
+    }
+});

frontend/saas-web/app/view/home/InfoCard.js

@@ -0,0 +1,118 @@
+Ext.define('saas.view.home.InfoCard', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'infocard',
+
+    latyou: 'fit',
+
+    initComponent: function() {
+        var me = this;
+
+        var view = Ext.create('Ext.view.View', {
+            store : Ext.create('Ext.data.Store', {
+				fields: ['title', 'content', 'color'],
+				data: me.infoData,
+			}),
+            tpl: new Ext.XTemplate([
+                '<div class="x-row">',
+                    '<tpl for=".">',
+                    '<div class="x-col">',
+                        '<div>',
+                            '<div class="x-box ',
+                                '<tpl if="color"> x-bg-{color}</tpl>',
+                                '<tpl else"> x-bg-default</tpl>',
+                            '">',
+                                '<h3>{title}</h3>',
+                                '<p>{content}</p>',
+                            '</div>',
+                        '</div>',
+                    '</div>',
+                    '</tpl>',
+                '</div>'
+            ]),
+            itemSelector: 'div.x-info-card-body',
+        });
+
+        Ext.apply(me, {
+            userCls: 'x-info-card ' + me.userCls,
+            items: [{
+                xtype: 'button',
+                cls: 'x-scroller-button x-scroller-button-left',
+                // iconCls: 'x-sa sa-arrows-left',
+                disabled: true,
+                handler: function() {
+                    me.scrollBody(1);
+                }
+            }, view, {
+                xtype: 'button',
+                cls: 'x-scroller-button x-scroller-button-right',
+                // iconCls: 'x-sa sa-arrows-right',
+                handler: function() {
+                    me.scrollBody(-1);
+                }
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    listeners: {
+        boxready: function(th) {
+
+            Ext.fly(th.body).on('mousewheel', function() {
+                var ev = window.event;
+                var delta = ev.wheelDelta;
+
+                if(ev.preventDefault) {
+                    ev.preventDefault();  
+                }
+                else {
+                    ev.cancel=true;
+                }
+                th.scrollBody(delta/120);
+            })
+        }
+    },
+
+    scrollBody: function(delta) {
+        var me = this;
+        var list = Ext.fly(me.items.items[1].el.dom);
+        var marginLeft = Number(list.getStyle('marginLeft').replace('px', ''));
+        var le = marginLeft + delta * 50;
+        var MAX_LEN = list.getBox().width - me.body.getBox().width + 100;
+
+        if(le > 0) {
+            le = 0;
+            me.scrollLeftDisabled();
+        }else if(le < -MAX_LEN) {
+            le = -MAX_LEN;
+            me.scrollRightDisabled();
+        }else {
+            me.scrollEnable();
+        }
+
+        list.setStyle({
+            marginLeft: le + 'px'
+        });
+    },
+    
+    scrollLeftDisabled: function() {
+        var me = this;
+        var leftBtn = me.query('button')[0];
+        leftBtn.setDisabled(true);
+    },
+
+    scrollRightDisabled: function() {
+        var me = this;
+        var rightBtn = me.query('button')[1];
+        rightBtn.setDisabled(true);
+    },
+
+    scrollEnable: function() {
+        var me = this;
+        var btns = me.query('button');
+
+        for(var i = 0; i < btns.length; i ++) {
+            btns[i].setDisabled(false);
+        }
+    }
+});

frontend/saas-web/app/view/home/InfoCard.scss

@@ -0,0 +1,88 @@
+$card-width: 200px;
+
+.x-info-card {
+
+    .x-panel-bodyWrap {
+        .x-autocontainer-innerCt {
+            padding: 0 44px;
+        }
+        .x-row {
+            display: flex;
+            flex-wrap: nowrap;
+        
+            .x-col {
+        
+                color: #fff;
+                padding: 10px;
+        
+                .x-box {
+                    padding: 16px;
+                    width: 235px;
+                    height: 131px;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
+                    position: relative;
+                    display: block;
+        
+                    h3 {
+                        font-size: 16px;
+                    }
+        
+                    p {
+                        font-size: 24px;
+                        text-align: center;
+                        margin-top: 32px;
+                    }
+        
+                }
+            }
+        }
+    }
+}
+
+.x-scroller-button {
+    position: absolute;
+    z-index: 1;
+    width: 44px;
+    height: 100%;
+    padding: 0;
+    background-color: white;
+    border: none !important;
+    box-shadow: none !important;
+    background-repeat: no-repeat !important;
+    background-size: 30px !important;
+    background-position-y: center !important;
+    background-position-x: 6px !important;
+}
+
+.x-scroller-button-left {
+    left: 0;
+    background-image: url('images/default/arrows-left.png') !important;
+}
+
+.x-scroller-button-right {
+    right: 0;
+    background-image: url('images/default/arrows-right.png') !important;
+}
+
+.x-btn-over.x-btn-default-small.x-scroller-button-left,
+.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-left,
+.x-btn-over.x-btn-default-small.x-scroller-button-right,
+.x-btn.x-btn-disabled.x-btn-default-small.x-scroller-button-right,
+.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-left,
+.x-keyboard-mode .x-btn-focus.x-btn-default-small.x-scroller-button-right {
+    background: white;
+}
+
+.x-bg-default {
+    background: linear-gradient(to right, #25CBDB , #5161F1);
+}
+.x-bg-yellow {
+    background: linear-gradient(to right, #F4BF59 , #F99A50);
+}
+.x-bg-purple {
+    background: linear-gradient(to right, #946DFF , #7460FF);
+}
+.x-bg-red {
+    background: linear-gradient(to right, #FA8B86 , #F36487);
+}

frontend/saas-web/packages/font-saas/sass/etc/icons.scss

@@ -1,6 +1,7 @@
+
 .sa-purchase:before { content: "\e613"; }
 
-.sa-weibiaoti1:before { content: "\e669"; }
+.sa-weibiaoti1:before { content: "\ef04"; }
 
 .sa-document:before { content: "\e654"; }
 
@@ -10,10 +11,15 @@
 
 .sa-sale:before { content: "\e638"; }
 
+.sa-arrows-left:before { content: "\ef02"; }
+
 .sa-warehouse:before { content: "\e63c"; }
 
 .sa-setting:before { content: "\e64b"; }
 
-.sa-saas:before { content: "\e769"; }
+.sa-saas:before { content: "\ef03"; }
+
+.sa-money:before { content: "\e6fa"; }
+
+.sa-arrows-right:before { content: "\ef01"; }
 
-.sa-money:before { content: "\e6fa"; }