首页

frontend/saas-web/app/Application.scss

@@ -268,6 +268,10 @@ body.launching {
   border-color: #ABDAFF;
 }
 
+.x-grid-item-selected {
+  background-color: #ffefbb;
+}
+
 
 
 /*滚动条样式*/

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

@@ -1,89 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -18,8 +18,6 @@ Ext.define('saas.view.core.chart.ChartBase', {
 
     initComponent: function() {
         var me = this;
-        
-
 
         me.callParent(arguments);
     }

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

@@ -1,38 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,65 +0,0 @@
-Ext.define('saas.view.core.chart.Pie', {
-    extend: 'saas.view.core.chart.ChartBase',
-    xtype: 'month_sale',
-
-    requires: [
-        'Ext.chart.PolarChart',
-        'Ext.chart.interactions.Rotate',
-        'Ext.chart.series.Pie',
-        'Ext.chart.series.sprite.PieSlice'
-    ],
-
-    iconCls: 'x-fa fa-pie-chart',
-
-    initComponent: function() {
-        var me = this;
-
-        Ext.apply(me, {
-            items: [{
-                xtype: 'polar',
-                width: '100%',
-                height: 500,
-                innerPadding: me.innerPadding || 20,
-                interactions: ['rotate', 'itemhighlight'],
-                donut: 30,
-                colors: [
-                    '#2C82BE',
-                    '#27A7FF',
-                    '#82CCFF',
-                    '#53A8E2',
-                    '#76DDFB',
-                    '#DBECF8',
-                ],
-                bind: {
-                    store: '{month_sale}',
-                },
-                style: {
-                    border: 'none'
-                },
-                series: [{
-                    type: 'pie',
-                    angleField: me.yfield || 'yvalue',
-                    label: {
-                        field: me.xfield || 'xvalue',
-                        display: 'rotate'
-                    },
-                    donut: 55,
-                    highlight: true,
-                    tooltip: {
-                        trackMouse: true,
-                        renderer: me.onSeriesTooltipRender
-                    }
-                }],
-                // legend: {
-                //     docked: 'bottom'
-                // },
-            }]
-        });
-
-        me.callParent(arguments);
-    },
-
-    onSeriesTooltipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('xvalue') + ': ' + record.get('data1') + '%');
-    }
-});

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

@@ -1,42 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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/core/dbfind/MultiDbfindGridPanel.js

@@ -144,7 +144,7 @@ Ext.define('saas.view.core.dbfind.MultiDbfindGridPanel', {
                     items:[{
                         xtype:'checkbox',
                         id:'showSelectRecord',
-                        boxLabel:'显示选中数据',
+                        boxLabel:'已选中数据',
                         handler:function(b){
                             var grid = me;
                             if(b.checked){

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

@@ -1,6 +1,7 @@
 Ext.define('saas.view.home.Home', {
     extend: 'Ext.container.Container',
     xtype: 'home',
+    id: 'home',
 
     requires: [
         'Ext.slider.Single',
@@ -27,84 +28,48 @@ Ext.define('saas.view.home.Home', {
     },
 
     items: [{
+        style: {
+            marginRight: '0',
+        },
         xtype: 'infocard'
     }, {
         xtype: 'panel',
+        style: {
+            marginRight: '0',
+        },
         title: '2018年11月经营分析',
         latyout: 'responsivecolumn',
         defaults: {
             cls: 'x-home-chart',
-            margin: '0 0 0 14'
+            margin: '0 0 0 14',
+            userCls: 'big-33 small-50',
         },
         items: [{
             xtype: 'month-sale',
-            userCls: 'big-33 small-50',
         }, {
             xtype: 'month-purchase',
-            userCls: 'big-33 small-50',
         }, {
-            xtype: 'core-chart-gauge',
-            userCls: 'big-33 small-100',
+            xtype: 'month-io',
         }]
     }, {
+        xtype: 'panel',
         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: 'core-chart-bar',
-            columnWidth: 0.33
-        }, {
-            xtype: 'core-chart-gauge',
-            columnWidth: 0.33
-        }]
-    }, {
-        title: '经营趋势分析',
-        userCls: 'big-50 small-100',
+        latyout: 'responsivecolumn',
+        style: {
+            marginRight: '0',
+            marginBottom: '0'
+        },
+        defaults: {
+            cls: 'x-home-chart',
+            margin: '0 0 0 14',
+            userCls: 'big-33 small-50',
+        },
         items: [{
-            xtype: 'core-chart-line',
-            columnWidth: 0.33
-        }, {
-            xtype: 'core-chart-pie',
-            columnWidth: 0.33
+            xtype: 'sale-trend',
         }, {
-            xtype: 'core-chart-pie3d',
-            columnWidth: 0.33
-        }]
-    }, {
-        title: '待办事宜',
-        userCls: 'big-100 small-100',
-        items: [{
-            xtype: 'core-chart-polar',
-            columnWidth: 0.5
+            xtype: 'purchase-trend'
         }, {
-            xtype: 'core-chart-stacked',
-            columnWidth: 0.5
+            xtype: 'stock-amount'
         }]
-    }],
+    }]
 });

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

@@ -3,8 +3,10 @@ Ext.define('saas.view.home.HomeModel', {
     alias: 'viewmodel.home',
 
     data: {
-        month_sale_amount: '0',
-        month_purchase_amount: '0'
+        month_sale_amount: '0', // 本月销售合计
+        month_purchase_amount: '0', // 本月采购合计
+        month_in: '0', // 本月收入合计
+        month_out: '0', // 本月支出合计
     },
 
     stores: {
@@ -15,6 +17,10 @@ Ext.define('saas.view.home.HomeModel', {
                 type: 'ajax',
                 // url: 'http://192.168.253.58:8920/homePage/liveData',
                 url: '/api/commons/homePage/liveData',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
+                },
                 reader: {
                     type: 'json'
                 },
@@ -40,14 +46,33 @@ Ext.define('saas.view.home.HomeModel', {
 
         month_sale: {
             model: 'saas.model.chart.DataXY',
-            // url: 'http://192.168.253.58:8920/homePage/liveData',
-            data: [{
-                "xvalue": "无",
-                "yvalue": 1
-            }],
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/saleData',
+                url: '/api/commons/homePage/saleData',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
+                },
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
+                },
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('month_sale').setLoading(false);
+                    }
+                }
+            },
             listeners: {
-                load: function() {
-                    console.log();
+                beforeload: function() {
+                    Ext.getCmp('month_sale').setLoading(true);
+                },
+                load: function(s, d) {
+                    Ext.getCmp('month_sale').setLoading(false);
+                    var sum = Ext.util.Format.number(s.sum('y'), '0.00') || 0;
+                    Ext.getCmp('home').getViewModel().set('month_sale_amount', sum)
                 }
             }
         },
@@ -57,10 +82,15 @@ Ext.define('saas.view.home.HomeModel', {
             autoLoad: true,
             proxy: {
                 type: 'ajax',
-                url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=false',
-                // url: '/api/commons/homePage/liveData',
+                // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=false',
+                url: '/api/commons/homePage/purchaseData?sixMonths=false',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
+                },
                 reader: {
-                    type: 'json'
+                    type: 'json',
+                    rootProperty: 'data',
                 },
                 listeners: {
                     exception: function(proxy, response, operation, eOpts) {
@@ -74,384 +104,151 @@ Ext.define('saas.view.home.HomeModel', {
                 },
                 load: function(s, d) {
                     Ext.getCmp('month-purchase').setLoading(false);
+                    var sum = Ext.util.Format.number(s.sum('y'), '0.00') || 0;
+                    Ext.getCmp('home').getViewModel().set('month_purchase_amount', sum+'')
                 }
             }
         },
 
-        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
+        month_io: {
+            fields: ['x', 'main', 'other'],
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/payAndRecData',
+                url: '/api/commons/homePage/payAndRecData',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
                 },
-                {
-                    "xvalue": 2013,
-                    "yvalue": 312
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
                 },
-                {
-                    "xvalue": 2014,
-                    "yvalue": 600
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('month_io').setLoading(false);
+                    }
+                }
+            },
+            listeners: {
+                beforeload: function() {
+                    Ext.getCmp('month_io').setLoading(true);
                 },
-                {
-                    "xvalue": 2015,
-                    "yvalue": 283
+                load: function(s, d) {
+                    Ext.getCmp('month_io').setLoading(false);
+                    s.each(function(r) {
+                        var sum = Ext.util.Format.number(r.get('main') + r.get('other'), '0.00') || 0;
+                        if(r.get('x') == '收入') {
+                            Ext.getCmp('home').getViewModel().set('month_in', sum);
+                        }else if(r.get('x') == '支出') {
+                            Ext.getCmp('home').getViewModel().set('month_in', sum);
+                        }
+                    });
                 }
-            ]
+            }
         },
 
-        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
+        sale_trend: {
+            fields: ['x', 'sale', 'saleback'],
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/saleFutureData',
+                url: '/api/commons/homePage/saleFutureData',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
                 },
-                {
-                    "xvalue": 1980,
-                    "y1value": 456,
-                    "y2value": 615,
-                    "y3value": 342,
-                    "y4value": 412
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
                 },
-                {
-                    "xvalue": 1990,
-                    "y1value": 788,
-                    "y2value": 531,
-                    "y3value": 489,
-                    "y4value": 114
-                }
-            ]
-        },
-
-        gaugeData: {
-            data: [
-                {
-                    position: 40
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('sale_trend').setLoading(false);
+                    }
                 }
+            },
+            sorters: [
+                { property: 'x', direction: 'ASC' }
             ],
-
-            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
+            listeners: {
+                beforeload: function() {
+                    Ext.getCmp('sale_trend').setLoading(true);
                 },
-                {
-                    "xvalue": "J",
-                    "yvalue": 603
+                load: function(s, d) {
+                    Ext.getCmp('sale_trend').setLoading(false);
                 }
-            ]
+            } 
         },
 
-        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
+        purchase_trend: {
+            fields: ['x', 'y'],
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=true',
+                url: '/api/commons/homePage/purchaseData?sixMonths=true',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
                 },
-                {
-                    "xvalue": 2012,
-                    "yvalue": 0.2,
-                    "y1value": 0.4,
-                    "y2value": 0.2,
-                    "y3value": 0.2,
-                    "y4value": 0,
-                    "y5value": 1
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
                 },
-                {
-                    "xvalue": 2013,
-                    "yvalue": 0.3,
-                    "y1value": 0.2,
-                    "y2value": 0.4,
-                    "y3value": 0.3,
-                    "y4value": 0,
-                    "y5value": 1
-        
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('purchase_trend').setLoading(false);
+                    }
+                }
+            },
+            sorters: [
+                { property: 'x', direction: 'ASC' }
+            ],
+            listeners: {
+                beforeload: function() {
+                    Ext.getCmp('purchase_trend').setLoading(true);
                 },
-                {
-                    "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
+                load: function(s, d) {
+                    Ext.getCmp('purchase_trend').setLoading(false);
                 }
-            ]
+            } 
         },
 
-        
-
-        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
+        stock_amount: {
+            fields: ['x', 'y'],
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/storageData',
+                url: '/api/commons/homePage/storageData',
+                timeout: 8000,
+                actionMethods: {
+                    read: 'GET'
                 },
-                {
-                    "xvalue": 7250,
-                    "y1value": 41,
-                    "y2value": 74
+                reader: {
+                    type: 'json',
+                    rootProperty: 'data',
                 },
-                {
-                    "xvalue": 7500,
-                    "y1value": 65,
-                    "y2value": 60
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('stock_amount').setLoading(false);
+                    }
+                }
+            },
+            sorters: [
+                { property: 'x', direction: 'ASC' }
+            ],
+            listeners: {
+                beforeload: function() {
+                    Ext.getCmp('stock_amount').setLoading(true);
                 },
-                {
-                    "xvalue": 7750,
-                    "y1value": 89,
-                    "y2value": 46
+                load: function(s, d) {
+                    Ext.getCmp('stock_amount').setLoading(false);
                 }
-            ]
-        }
-    }
+            } 
+        },
+    },
 });

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

@@ -39,11 +39,11 @@ Ext.define('saas.view.home.InfoCard', {
             color: 'purple'
         },
         unpay: {
-            title: '七天内代付款',
+            title: '七天内待付款',
             color: 'red'
         },
         unreceive: {
-            title: '七天内代收款',
+            title: '七天内待收款',
             color: 'pink'
         },
         unauditcheck: {

frontend/saas-web/app/view/home/charts/MonthIO.js

@@ -0,0 +1,78 @@
+Ext.define('saas.view.home.charts.MonthIO', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'month-io',
+    id: 'month_io',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'cartesian',
+                reference: 'chart',
+                colors: [
+                    '#2C82BE',
+                    '#82CCFF'
+                ],
+                bind: {
+                    captions: {
+                        title: {
+                            text: '本月收入（万元）：{month_in}\n本月支出（万元）：{month_out}',
+                            style: {
+                                'font-size': '14px',
+                                'color': '#485465',
+                                'letter-spacing': '-0.07px'
+                            },
+                            align: 'left'
+                        },
+                    },
+                    store: '{month_io}'
+                },
+                // legend: {
+                //     type: 'sprite',
+                //     docked: 'bottom'
+                // },
+                axes: [{
+                    type: 'numeric',
+                    position: 'left',
+                    adjustByMajorUnit: true,
+                    fields: ['main'],
+                    minimum: 0
+                }, {
+                    type: 'category',
+                    position: 'bottom',
+                    grid: true,
+                    fields: ['x'],
+                    label: {
+                        rotate: {
+                            degrees: -45
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    title: ['主营业务', '其他业务'],
+                    xField: 'x',
+                    yField: ['main', 'other'],
+                    stacked: true,
+                    style: {
+                        opacity: 0.80
+                    },
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onBarTipRender
+                    }
+                }]
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    onBarTipRender: function (tooltip, record, item) {
+        var fieldIndex = Ext.Array.indexOf(item.series.getYField(), item.field),
+        type = item.series.getTitle()[fieldIndex];
+
+        tooltip.setHtml(type + record.get('x') + record.get(item.field));
+    },
+});

frontend/saas-web/app/view/home/charts/MonthPurchase.js

@@ -2,71 +2,63 @@ Ext.define('saas.view.home.charts.MonthPurchase', {
     extend: 'saas.view.core.chart.ChartBase',
     xtype: 'month-purchase',
 
-    requires: [
-        'Ext.chart.CartesianChart',
-        'Ext.chart.axis.Category',
-        'Ext.chart.axis.Numeric',
-        'Ext.chart.interactions.PanZoom',
-        'Ext.chart.series.Bar'
-    ],
-
     id: 'month-purchase',
 
-    iconCls: 'x-fa fa-bar-chart',
+    initComponent: function() {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'cartesian',
+                colors: [
+                    '#34BAF6'
+                ],
+                bind: {
+                    store: '{month_purchase}',
+                    captions: {
+                        title: {
+                            text: '本月采购额（万元）：{month_purchase_amount}',
+                            style: {
+                                'font-size': '14px',
+                                'color': '#485465',
+                                'letter-spacing': '-0.07px'
+                            },
+                            align: 'left'
+                        }
+                    },
+                },
+                axes: [{
+                    type: 'category',
+                    fields: [
+                        'x'
+                    ],
+                    position: 'bottom'
+                },{
+                    type: 'numeric',
+                    fields: [
+                        'y'
+                    ],
+                    position: 'left'
+                }],
+                series: [{
+                    type: 'bar',
+                    xField: 'x',
+                    yField: [
+                        'y'
+                    ],
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onBarTipRender
+                    }
+                }]
+            }]
+        });
+
+        me.callParent(arguments);
+    },
 
-    bind: {
-        title: '本月采购额（万元）：{month_purchase_amount}',
+    onBarTipRender: function (tooltip, record, item) {
+        tooltip.setHtml(record.get('x') + ': ' + record.get('y') + '万元');
     },
 
-    items: [{
-        xtype: 'cartesian',
-        colors: [
-            '#34BAF6'
-        ],
-        bind: '{month_purchase}',
-        axes: [{
-            type: 'category',
-            fields: [
-                'x'
-            ],
-            hidden: true,
-            position: 'bottom'
-        },{
-            type: 'numeric',
-            fields: [
-                'y'
-            ],
-            grid: {
-                odd: {
-                    fill: '#e8e8e8'
-                }
-            },
-            hidden: true,
-            position: 'left'
-        }],
-        series: [{
-            type: 'bar',
-            xField: 'x',
-            yField: [
-                'y'
-            ]
-        }],
-        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/charts/MonthSale.js

@@ -2,32 +2,29 @@ Ext.define('saas.view.home.charts.MonthSale', {
     extend: 'saas.view.core.chart.ChartBase',
     xtype: 'month-sale',
 
-    requires: [
-        'Ext.chart.PolarChart',
-        'Ext.chart.interactions.Rotate',
-        'Ext.chart.series.Pie',
-        'Ext.chart.series.sprite.PieSlice'
-    ],
-
     id: 'month_sale',
 
-    iconCls: 'x-fa fa-pie-chart',
-
-    bind: {
-        title: '本月销售额（万元）：{month_sale_amount}',
-    },
-
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'polar',
-                width: '100%',
-                height: 500,
-                innerPadding: me.innerPadding || 20,
-                interactions: ['rotate', 'itemhighlight'],
-                donut: 30,
+                reference: 'chart',
+                bind: {
+                    captions: {
+                        title: {
+                            text: '本月销售额（万元）：{month_sale_amount}',
+                            style: {
+                                'font-size': '14px',
+                                'color': '#485465',
+                                'letter-spacing': '-0.07px'
+                            },
+                            align: 'left'
+                        }
+                    },
+                    store: '{month_sale}',
+                },
                 colors: [
                     '#2C82BE',
                     '#27A7FF',
@@ -36,36 +33,40 @@ Ext.define('saas.view.home.charts.MonthSale', {
                     '#76DDFB',
                     '#DBECF8',
                 ],
-                bind: {
-                    store: '{month_sale}',
-                },
-                style: {
-                    border: 'none'
-                },
+                width: '100%',
+                innerPadding: 20,
+                // legend: {
+                //     docked: 'bottom'
+                // },
+                interactions: ['rotate', 'itemhighlight'],
                 series: [{
                     type: 'pie',
-                    angleField: me.yfield || 'yvalue',
+                    angleField: 'y',
+                    donut: 55,
                     label: {
-                        field: me.xfield || 'xvalue',
-                        display: 'rotate'
+                        field: 'x',
+                        renderer: me.onLabelRender
                     },
-                    donut: 55,
                     highlight: true,
                     tooltip: {
                         trackMouse: true,
                         renderer: me.onSeriesTooltipRender
-                    }
-                }],
-                // legend: {
-                //     docked: 'bottom'
-                // },
-            }]
+                    },
+                }]
+            }],
         });
 
         me.callParent(arguments);
     },
 
+    onLabelRender: function(text, sprite, config, rendererData, index) {
+        var homeModel = Ext.getCmp('home').getViewModel();
+        var monthSaleAmount = homeModel.get('month_sale_amount');
+        console.log(text, sprite, config, rendererData, index)
+        return text;
+    },
+
     onSeriesTooltipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('xvalue') + ': ' + record.get('data1') + '%');
+        tooltip.setHtml(record.get('x') + ': ' + record.get('y'));
     }
 });

frontend/saas-web/app/view/home/charts/PurchaseTrend.js

@@ -0,0 +1,58 @@
+Ext.define('saas.view.home.charts.PurchaseTrend', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'purchase-trend',
+
+    id: 'purchase_trend',
+
+    initComponent: function() {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'cartesian',
+                colors: [
+                    '#34BAF6'
+                ],
+                captions: {
+                    title: {
+                        text: '采购金额（万元）',
+                        style: {
+                            'font-size': '14px',
+                            'color': '#485465',
+                            'letter-spacing': '-0.07px'
+                        },
+                        align: 'left'
+                    }
+                },
+                bind: {
+                    store: '{purchase_trend}',
+                },
+                axes: [{
+                    type: 'category',
+                    fields: ['x'],
+                    position: 'bottom'
+                },{
+                    type: 'numeric',
+                    fields: ['y'],
+                    position: 'left'
+                }],
+                series: [{
+                    type: 'bar',
+                    xField: 'x',
+                    yField: ['y'],
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onBarTipRender
+                    }
+                }]
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    onBarTipRender: function (tooltip, record, item) {
+        tooltip.setHtml(record.get('x') + ': ' + record.get('y') + '万元');
+    },
+
+});

frontend/saas-web/app/view/home/charts/SaleTrend.js

@@ -0,0 +1,77 @@
+Ext.define('saas.view.home.charts.SaleTrend', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'sale-trend',
+
+    id: 'sale_trend',
+
+    initComponent: function() {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'cartesian',
+                colors: [
+                    '#64B0E4',
+                    '#FF1038'
+                ],
+                captions: {
+                    title: {
+                        text: '销售趋势图',
+                        style: {
+                            'font-size': '14px',
+                            'color': '#485465',
+                            'letter-spacing': '-0.07px'
+                        },
+                        align: 'left'
+                    }
+                },
+                bind: {
+                    store: '{sale_trend}',
+                },
+                axes: [{
+                    type: 'category',
+                    fields: ['x'],
+                    position: 'bottom',
+                    label: {
+                        rotate: {
+                            degrees: -25
+                        }
+                    }
+                },{
+                    type: 'numeric',
+                    fields: ['sale', 'saleback'],
+                    position: 'left',
+                }],
+                series: [{
+                    type: 'line',
+                    smooth: true,
+                    title: '销售额',
+                    xField: 'x',
+                    yField: ['sale'],
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onSeriesTooltipRender
+                    }
+                }, {
+                    type: 'line',
+                    smooth: true,
+                    title: '销售回款',
+                    xField: 'x',
+                    yField: ['saleback'],
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onSeriesTooltipRender
+                    }
+                }]
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    onSeriesTooltipRender: function (tooltip, record, item) {
+        var title = item.series.getTitle();
+        tooltip.setHtml(record.get('x') + title + record.get(item.series.getYField()) + '万元');
+    },
+
+});

frontend/saas-web/app/view/home/charts/StockAmount.js

@@ -0,0 +1,58 @@
+Ext.define('saas.view.home.charts.StockAmount', {
+    extend: 'saas.view.core.chart.ChartBase',
+    xtype: 'stock-amount',
+
+    id: 'stock_amount',
+
+    initComponent: function() {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'cartesian',
+                colors: [
+                    '#34BAF6'
+                ],
+                captions: {
+                    title: {
+                        text: '库存金额（万元）',
+                        style: {
+                            'font-size': '14px',
+                            'color': '#485465',
+                            'letter-spacing': '-0.07px'
+                        },
+                        align: 'left'
+                    }
+                },
+                bind: {
+                    store: '{stock_amount}',
+                },
+                axes: [{
+                    type: 'category',
+                    fields: ['x'],
+                    position: 'bottom'
+                },{
+                    type: 'numeric',
+                    fields: ['y'],
+                    position: 'left'
+                }],
+                series: [{
+                    type: 'bar',
+                    xField: 'x',
+                    yField: ['y'],
+                    tooltip: {
+                        trackMouse: true,
+                        renderer: me.onBarTipRender
+                    }
+                }]
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    onBarTipRender: function (tooltip, record, item) {
+        tooltip.setHtml(record.get('x') + ': ' + record.get('y') + '万元');
+    },
+
+});