数据分析模块demo

frontend/pc-web/app/view/analysis/attence/Chart1.js

@@ -0,0 +1,110 @@
+Ext.define('school.view.analysis.attence.Chart1', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'attence-chart1',
+
+    title: '初三年级本周准勤率',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart1}',
+                },
+                createOption: me.createOption.bind(me)
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var me = this,
+        fields = [],
+        cFields = ['一班', '二班', '三班', '四班'],
+        c1 = [],
+        c2 = [],
+        c3 = [],
+        c4 = [],
+        cDatas = [],
+        o;
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.day);
+            c1.push(d.c1);
+            c2.push(d.c2);
+            c3.push(d.c3);
+            c4.push(d.c4);
+        });
+
+        cDatas.push(c1, c2, c3, c4);
+
+        return {
+            grid: {
+                left: 0,
+                right: 0,
+                top: 40,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                min: 85,
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            legend: {
+                data: cFields
+            },
+            series: me.getSeries(cFields, cDatas)
+        };
+    },
+
+    getSeries: function(fields, datas) {
+        let series = [];
+
+        for(let i = fields.length - 1; i >= 0 ; i--) {
+            let s = {
+                name: fields[i],
+                type: 'line',
+                label: {
+                    normal: {
+                        show: true
+                    }
+                },
+                data: datas[i]
+            };
+            series.push(s);
+        }
+
+        return series;
+    }
+});

frontend/pc-web/app/view/analysis/attence/Chart2.js

@@ -0,0 +1,113 @@
+Ext.define('school.view.analysis.attence.Chart2', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'attence-chart2',
+
+    title: '初三年级今日迟到人数',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart2}',
+                },
+                createOption: me.createOption
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var fields = [],
+            data = [];
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.class);
+            data.push(d.count);
+        });
+        return {
+            color: [
+                '#34BAF6'
+            ],
+            grid: {
+                left: 0,
+                right: 0,
+                top: 40,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip: {
+                trigger: 'axis',
+                formatter: function (params, ticket, callback) {
+                    var name = '',
+                    series = [];
+
+                    for(var x = 0; x < params.length; x++) {
+                        var p = params[x],
+                        marker = p.marker,
+                        seriesName = p.seriesName,
+                        name = p.name,
+                        value = p.value;
+
+                        value = school.util.BaseUtil.numberFormat(value, 4, true);
+
+                        series.push(marker + value);
+                    }
+
+                    if(name.length > 9) {
+                        name = Ext.String.insert(name, '<br/>', 7)
+                    }
+        
+
+                    return name + ': ' + '<br/>' + series.join('<br/>');
+                }
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                interval: 1,
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            series: [{
+                type: 'bar',
+                barWidth: 25,
+                data: data,
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'outside'
+                    }
+                },
+            }]
+        };
+    }
+});

frontend/pc-web/app/view/analysis/attence/Panel.js

@@ -0,0 +1,19 @@
+Ext.define('school.view.analysis.attence.Panel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'analysis-attence',
+
+    viewModel: 'analysis-attence',
+    layout: 'responsivecolumn',
+    scrollable: true,
+
+    defaults: {
+        userCls: 'big-50 small-100',
+        padding: 10
+    },
+
+    items: [{
+        xtype: 'attence-chart1'
+    }, {
+        xtype: 'attence-chart2'
+    }]
+});

frontend/pc-web/app/view/analysis/attence/PanelModel.js

@@ -0,0 +1,60 @@
+Ext.define('school.view.analysis.attence.PanelModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.analysis-attence',
+
+    data: {
+    },
+
+    stores: {
+        chart1: {
+            fields: ['day', 'c1', 'c2', 'c3', 'c4'],
+            data: [{
+                day: '周一',
+                c1: '95.49',
+                c2: '98.13',
+                c3: '91.02',
+                c4: '92.64',
+            }, {
+                day: '周二',
+                c1: '96.49',
+                c2: '99.13',
+                c3: '93.02',
+                c4: '95.43',
+            }, {
+                day: '周三',
+                c1: '100',
+                c2: '98.34',
+                c3: '90.62',
+                c4: '97.13',
+            }, {
+                day: '周四',
+                c1: '100',
+                c2: '93.23',
+                c3: '98.23',
+                c4: '91.44',
+            }, {
+                day: '周五',
+                c1: '96.82',
+                c2: '94.68',
+                c3: '91.32',
+                c4: '94.54',
+            }]
+        },
+        chart2: {
+            fields: ['class', 'count'],
+            data: [{
+                class: '一班',
+                count: '2'
+            }, {
+                class: '二班',
+                count: '1'
+            }, {
+                class: '三班',
+                count: '3'
+            }, {
+                class: '四班',
+                count: '3'
+            }]
+        }
+    }
+});

frontend/pc-web/app/view/analysis/consumption/Chart1.js

@@ -0,0 +1,123 @@
+Ext.define('school.view.analysis.consumption.Chart1', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'consumption-chart1',
+
+    title: '各年级学生月校园平均消费统计',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart1}',
+                },
+                createOption: me.createOption.bind(me)
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var me = this,
+        fields = [],
+        gFields = ['初一', '初二', '初三'],
+        g1 = [],
+        g2 = [],
+        g3 = [],
+        gDatas = [],
+        o;
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.month);
+            g1.push(d.g1);
+            g2.push(d.g2);
+            g3.push(d.g3);
+        });
+
+        gDatas.push(g1, g2, g3);
+
+        o = {
+            color: [
+                '#1EC09F',
+                '#27A7FF',
+                '#4E84F5',
+                '#FDC200',
+                '#76DDFB',
+                '#FE7D6B',
+            ],
+            grid: {
+                left: 0,
+                right: 0,
+                top: 60,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip : {
+                trigger: 'axis',
+                axisPointer : {
+                    type : 'shadow'
+                }
+            },
+            legend: {
+                data: gFields
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            series: me.getSeries(gFields, gDatas)
+        };
+
+        return o;
+    },
+
+    getSeries: function(fields, datas) {
+        let series = [];
+
+        for(let i = fields.length - 1; i >= 0 ; i--) {
+            let s = {
+                name: fields[i],
+                type: 'line',
+                label: {
+                    normal: {
+                        show: true
+                    }
+                },
+                data: datas[i]
+            };
+            series.push(s);
+        }
+
+        return series;
+    }
+});

frontend/pc-web/app/view/analysis/consumption/Chart2.js

@@ -0,0 +1,71 @@
+Ext.define('school.view.analysis.consumption.Chart2', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'consumption-chart2',
+
+    title: '学生校园消费占比分析',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart2}',
+                },
+                createOption: me.createOption.bind(me)
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var me = this,
+        fields = [],
+        data = [];
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.type);
+            data.push({
+                name: d.type,
+                value: d.money
+            });
+        });
+
+        o = {
+            grid: {
+                left: 0,
+                right: 0,
+                top: 60,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip : {
+                trigger: 'item',
+                formatter: "{a} <br/>{b} : {d}%"
+            },
+            legend: {
+                data: fields
+            },
+            series : [{
+                name: '消费类别',
+                type: 'pie',
+                radius : '55%',
+                // center: ['40%', '50%'],
+                data: data,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }]
+        };
+
+        return o;
+    }
+});

frontend/pc-web/app/view/analysis/consumption/Panel.js

@@ -0,0 +1,23 @@
+/**
+ * 成绩分析
+ */
+Ext.define('school.view.analysis.consumption.Panel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'analysis-consumption',
+
+    viewModel: 'analysis-consumption',
+
+    layout: 'responsivecolumn',
+    scrollable: true,
+
+    defaults: {
+        userCls: 'big-50 small-100',
+        padding: 10
+    },
+
+    items: [{
+        xtype: 'consumption-chart1'
+    }, {
+        xtype: 'consumption-chart2'
+    }]
+});

frontend/pc-web/app/view/analysis/consumption/PanelModel.js

@@ -0,0 +1,50 @@
+Ext.define('school.view.analysis.consumption.PanelModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.analysis-consumption',
+
+    data: {
+    },
+
+    stores: {
+        chart1: {
+            fields: ['month', 'g1', 'g2', 'g3'],
+            data: [{
+                month: '二月',
+                g1: '334.62',
+                g2: '347.98',
+                g3: '399.17'
+            }, {
+                month: '三月',
+                g1: '784.62',
+                g2: '766.23',
+                g3: '832.63'
+            }, {
+                month: '四月',
+                g1: '692.34',
+                g2: '834.63',
+                g3: '823.93'
+            }, {
+                month: '五月',
+                g1: '723.23',
+                g2: '818.03',
+                g3: '821.92'
+            }]
+        },
+        chart2: {
+            fields: ['type', 'money'],
+            data: [{
+                type: '饮食类',
+                money: 73.33
+            }, {
+                type: '学习用品类',
+                money: 14.81
+            }, {
+                type: '日常用品类',
+                money: 4.44
+            }, {
+                type: '其他',
+                money: 7.42
+            }]
+        }
+    }
+});

frontend/pc-web/app/view/analysis/score/Chart1.js

@@ -0,0 +1,127 @@
+Ext.define('school.view.analysis.score.Chart1', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'score-chart1',
+
+    title: '初三年级期中数学成绩综合统计',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart1}',
+                },
+                createOption: me.createOption.bind(me)
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var me = this,
+        fields = [],
+        lvsFields = ['优秀', '良好', '及格', '不及格'],
+        lv1 = [],
+        lv2 = [],
+        lv3 = [],
+        lv4 = [],
+        lvDatas = [],
+        o;
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.class);
+            lv1.push(d.lv1);
+            lv2.push(d.lv2);
+            lv3.push(d.lv3);
+            lv4.push(d.lv4);
+        });
+
+        lvDatas.push(lv1, lv2, lv3, lv4);
+
+        o = {
+            color: [
+                '#1EC09F',
+                '#27A7FF',
+                '#4E84F5',
+                '#FDC200',
+                '#76DDFB',
+                '#FE7D6B',
+            ],
+            grid: {
+                left: 0,
+                right: 0,
+                top: 60,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip : {
+                trigger: 'axis',
+                axisPointer : {
+                    type : 'shadow'
+                }
+            },
+            legend: {
+                data: lvsFields
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            series: me.getSeries(lvsFields, lvDatas)
+        };
+
+        return o;
+    },
+
+    getSeries: function(fields, datas) {
+        let series = [];
+
+        for(let i = fields.length - 1; i >= 0 ; i--) {
+            let s = {
+                name: fields[i],
+                type: 'bar',
+                stack: '总量',
+                barWidth: 50,
+                label: {
+                    normal: {
+                        show: true
+                    }
+                },
+                data: datas[i]
+            };
+            series.push(s);
+        }
+
+        return series;
+    }
+});

frontend/pc-web/app/view/analysis/score/Chart2.js

@@ -0,0 +1,118 @@
+Ext.define('school.view.analysis.score.Chart2', {
+    extend: 'school.view.core.chart.ChartBase',
+    xtype: 'score-chart2',
+
+    title: '初三年级期中各科成绩平均分分析',
+
+    initComponent: function () {
+        var me = this;
+
+        Ext.apply(me, {
+            items: [{
+                xtype: 'echartsbase',
+                bind: {
+                    store: '{chart2}',
+                },
+                createOption: me.createOption.bind(me)
+            }]
+        });
+
+        me.callParent(arguments);
+    },
+
+    createOption: function (store) {
+        var me = this,
+        fields = [],
+        lvsFields = ['语文', '数学', '英语'],
+        lv1 = [],
+        lv2 = [],
+        lv3 = [],
+        lvDatas = [],
+        o;
+
+        store.each(function (d) {
+            var d = d.data;
+            fields.push(d.class);
+            lv1.push(d.yuwen);
+            lv2.push(d.shuxue);
+            lv3.push(d.yingyu);
+        });
+
+        lvDatas.push(lv1, lv2, lv3);
+
+        o = {
+            color: [
+                '#FE7D6B',
+                '#4E84F5',
+                '#C2EAFC',
+                '#76DDFB'
+            ],
+            grid: {
+                left: 0,
+                right: 0,
+                top: 60,
+                bottom: 5,
+                borderColor: '#E5EAEF',
+                containLabel: true
+            },
+            tooltip : {
+                trigger: 'axis',
+                axisPointer : {
+                    type : 'shadow'
+                }
+            },
+            legend: {
+                data: lvsFields
+            },
+            xAxis: {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                axisLabel: {
+                    color: '#485465',
+                    interval: 0
+                },
+                data: fields,
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    lineStyle: {
+                        color: '#E5EAEF',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: ['#E5EAEF']
+                    }
+                },
+                axisLabel: {
+                    color: '#485465'
+                }
+            },
+            series: me.getSeries(lvsFields, lvDatas)
+        };
+
+        return o;
+    },
+
+    getSeries: function(fields, datas) {
+        let series = [];
+
+        for(let i = 0; i < fields.length; i++) {
+            let s = {
+                name: fields[i],
+                type: 'bar',
+                barWidth: 18,
+                barCategoryGap: 0,
+                data: datas[i]
+            };
+            series.push(s);
+        }
+
+        return series;
+    }
+});

frontend/pc-web/app/view/analysis/score/Panel.js

@@ -0,0 +1,23 @@
+/**
+ * 成绩分析
+ */
+Ext.define('school.view.analysis.score.Panel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'analysis-score',
+
+    viewModel: 'analysis-score',
+
+    layout: 'responsivecolumn',
+    scrollable: true,
+
+    defaults: {
+        userCls: 'big-50 small-100',
+        padding: 10
+    },
+
+    items: [{
+        xtype: 'score-chart1'
+    }, {
+        xtype: 'score-chart2'
+    }]
+});

frontend/pc-web/app/view/analysis/score/PanelModel.js

@@ -0,0 +1,63 @@
+Ext.define('school.view.analysis.score.PanelModel', {
+    extend: 'Ext.app.ViewModel',
+    alias: 'viewmodel.analysis-score',
+
+    data: {
+    },
+
+    stores: {
+        chart1: {
+            // lv1-4: 优秀、良好、及格、不及格
+            fields: ['class', 'lv1', 'lv2', 'lv3', 'lv4'],
+            data: [{
+                class: '一班',
+                lv1: '16',
+                lv2: '22',
+                lv3: '25',
+                lv4: '36'
+            }, {
+                class: '二班',
+                lv1: '8',
+                lv2: '16',
+                lv3: '43',
+                lv4: '29'
+            }, {
+                class: '三班',
+                lv1: '18',
+                lv2: '13',
+                lv3: '28',
+                lv4: '39'
+            }, {
+                class: '四班',
+                lv1: '15',
+                lv2: '16',
+                lv3: '32',
+                lv4: '35'
+            }]
+        },
+        chart2: {
+            fields: ['class', 'yuwen', 'shuxue', 'yingyu'],
+            data: [{
+                class: '一班',
+                yuwen: '84.91',
+                shuxue: '76.50',
+                yingyu: '83.01'
+            }, {
+                class: '二班',
+                yuwen: '82.34',
+                shuxue: '73.41',
+                yingyu: '85.33'
+            }, {
+                class: '三班',
+                yuwen: '75.77',
+                shuxue: '76.98',
+                yingyu: '79.46'
+            }, {
+                class: '四班',
+                yuwen: '78.01',
+                shuxue: '72.65',
+                yingyu: '74.32'
+            }]
+        }
+    }
+});

frontend/pc-web/app/view/auth/Login.scss

@@ -21,7 +21,7 @@ $social-weixin-btn-background: dynamic(#00d500);
         .auth-title {
             text-align: center;
             img {
-              height: 58px;
+              height: 40px;
             }
         }
     }

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

@@ -1,7 +1,7 @@
 Ext.define('school.view.core.chart.ChartBase', {
     extend: 'Ext.panel.Panel',
 
-    height: 370,
+    minHeight: 370,
     bodyPadding: '16 16 16 0',
 
     layout: 'fit',
@@ -24,12 +24,7 @@ Ext.define('school.view.core.chart.ChartBase', {
         Ext.apply(me, {
             title: Ext.create('Ext.panel.Header', {
                 title: me.getTitleHtml(),
-                width: '100%',
-                // listeners: {
-                //     boxready: function() {
-                //         debugger
-                //     }
-                // }
+                width: '100%'
             }),
             cls: 'quick-graph-panel ' + (me.cls || '')
         });
@@ -37,6 +32,14 @@ Ext.define('school.view.core.chart.ChartBase', {
         me.callParent(arguments);
     },
 
+    listeners: {
+        boxready: function(p) {
+            var owner = p.ownerCt;
+            var pHeight = owner.getBox().height;
+            this.setHeight(pHeight);
+        }
+    },
+
     getTitleHtml: function() {
         var me = this,
         title = me.title || '',

frontend/pc-web/packages/font-school/sass/etc/icons.scss

@@ -22,6 +22,10 @@
   content: "\e904";
 }
 
+.ss-nav-analysis:before {
+  content: "\e642";
+}
+
 .ss-nav-info:before {
   content: "\e903";
 }

frontend/pc-web/resources/json/navigation.json

@@ -50,6 +50,22 @@
         "text": "出入校记录",
         "view": "interaction-access-list"
     }]
+}, {
+    "text": "数据分析",
+    "iconCls": "x-ss ss-nav-analysis",
+    "items": [{
+        "id": "analysis-score",
+        "text": "成绩分析",
+        "view": "analysis-score"
+    }, {
+        "id": "analysis-attence",
+        "text": "考勤分析",
+        "view": "analysis-attence"
+    }, {
+        "id": "analysis-consumption",
+        "text": "消费分析",
+        "view": "analysis-consumption"
+    }]
 }, {
     "text": "系统设置",
     "iconCls": "x-ss ss-nav-setting",