首页

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

@@ -10,8 +10,6 @@ Ext.define('saas.view.core.chart.ChartBase', {
 
     layout: 'fit',
 
-    cls: 'quick-graph-panel shadow',
-
     defaults: {
         width: '100%'
     },
@@ -19,6 +17,10 @@ Ext.define('saas.view.core.chart.ChartBase', {
     initComponent: function() {
         var me = this;
 
+        Ext.apply(me, {
+            cls: 'quick-graph-panel ' + (me.cls || '')
+        });
+
         me.callParent(arguments);
     }
 });

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

@@ -0,0 +1,30 @@
+.quick-graph-panel {
+
+    .x-panel-header-default {
+        background-color: #fff;
+        border: none;
+        padding: 0;
+        margin-top: 20px;
+
+        .x-panel-header-title-default {
+            .x-title-text {
+
+                font-size: 14px;
+                color: #485465;
+                letter-spacing: -0.07px;
+                padding-left: 15px;
+
+                &:before {
+                    content: ' ';
+                    position: absolute;
+                    width: 9px;
+                    height: 9px;
+                    background: #2C82BE;
+                    // border-radius: 50%;
+                    left: 0px;
+                    top: 5px;
+                }
+            }
+        }
+    } 
+}

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

@@ -40,7 +40,6 @@ Ext.define('saas.view.home.Home', {
         // title: '2018年11月经营分析',
         latyout: 'responsivecolumn',
         defaults: {
-            cls: 'x-home-chart',
             margin: '0 0 0 14',
             userCls: 'big-33 small-50',
         },
@@ -60,7 +59,6 @@ Ext.define('saas.view.home.Home', {
             marginBottom: '0'
         },
         defaults: {
-            cls: 'x-home-chart',
             margin: '0 0 0 14',
             userCls: 'big-33 small-50',
         },

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

@@ -132,7 +132,7 @@ $unaudit-purc-container-color: dynamic(#e91e63);
     }
 }
 
-.x-home-chart {
+.quick-graph-panel {
     box-shadow: none;
 
     .x-panel-header-default {

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

@@ -7,6 +7,9 @@ Ext.define('saas.view.home.HomeModel', {
         month_purchase_amount: '0', // 本月采购合计
         month_in: '0', // 本月收入合计
         month_out: '0', // 本月支出合计
+
+        insetPadding: '12 0 0 0', // 图表insetPadding
+        maxBarWidth: 20, // 最大柱宽
     },
 
     stores: {

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

@@ -3,35 +3,46 @@ Ext.define('saas.view.home.charts.MonthIO', {
     xtype: 'month-io',
     id: 'month_io',
 
+    bind: {
+        title: '本月收入支出额（万元）<div style="text-align: right;"><span style="font-weight:bold;">收入：{month_in}</span><span style="font-weight:bold;margin-left: 10px;">支出：{month_out}</span></div>'
+    },
+
     initComponent: function () {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'cartesian',
-                insetPadding: '28 0 0 0',
                 colors: [
                     '#2C82BE',
                     '#82CCFF'
                 ],
                 bind: {
-                    captions: {
-                        title: {
-                            text: '本月收入支出额（万元）\n收入：{month_in}\t支出：{month_out}',
-                            style: {
-                                'font-size': '14px',
-                                'color': '#485465',
-                                'letter-spacing': '-0.07px'
-                            },
-                            align: 'left'
-                        },
-                    },
+                    // captions: {
+                    //     title: {
+                    //         text: '收入：{month_in}\t支出：{month_out}',
+                    //         style: {
+                    //             'color': '#485465',
+                    //             'letter-spacing': '-0.07px'
+                    //         },
+                    //         align: 'left'
+                    //     },
+                    // },
+                    insetPadding: '{insetPadding}',
                     store: '{month_io}'
                 },
                 // legend: {
                 //     type: 'sprite',
                 //     docked: 'bottom'
                 // },
+                legend: {
+                    type: 'dom',
+                    docked: 'top',
+                    padding: 0,
+                    bodyPadding: 0,
+                    border: 0,
+                    cls: 'x-monthio-legend'
+                },
                 axes: [{
                     type: 'numeric',
                     position: 'left',
@@ -71,10 +82,12 @@ Ext.define('saas.view.home.charts.MonthIO', {
                     xField: 'x',
                     yField: ['main', 'other'],
                     stacked: true,
-                    style: {
-                        lineWidth: 0,
-                        strokeStyle: 'transparent',
-                        maxBarWidth: 50,
+                    bind: {
+                        style: {
+                            lineWidth: 0,
+                            strokeStyle: 'transparent',
+                            maxBarWidth: '{maxBarWidth}',
+                        },
                     },
                     tooltip: {
                         trackMouse: true,

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

@@ -0,0 +1,25 @@
+.quick-graph-panel .x-panel-header-default .x-panel-header-title-default > .x-title-text-default {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.x-monthio-legend {
+
+    .x-legend-inner {
+        padding: 0;
+
+        .x-legend-container {
+
+            .x-legend-item {
+                border: none !important;
+                outline: none !important;
+                text-align: left;
+
+                .x-legend-item-marker {
+                    box-shadow: none;
+                    border-radius: 50%;
+                }
+            }
+        }
+    }
+}

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

@@ -4,27 +4,22 @@ Ext.define('saas.view.home.charts.MonthPurchase', {
 
     id: 'month-purchase',
 
+    bind: {
+        title: '本月采购额（万元）：{month_purchase_amount}'
+    },
+
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'cartesian',
-                insetPadding: '28 0 0 0',
                 colors: [
                     '#34BAF6'
                 ],
                 bind: {
+                    insetPadding: '{insetPadding}',
                     store: '{month_purchase}',
-                    captions: {
-                        title: {
-                            text: '本月采购额（万元）：{month_purchase_amount}',
-                            align: 'left',
-                            style: {
-                                'color': '#485465',
-                            },
-                        }
-                    },
                 },
                 axes: [{
                     type: 'category',
@@ -64,10 +59,12 @@ Ext.define('saas.view.home.charts.MonthPurchase', {
                     type: 'bar',
                     xField: 'x',
                     yField: ['y'],
-                    style: {
-                        lineWidth: 0,
-                        strokeStyle: 'transparent',
-                        maxBarWidth: 50,
+                    bind: {
+                        style: {
+                            lineWidth: 0,
+                            strokeStyle: 'transparent',
+                            maxBarWidth: '{maxBarWidth}',
+                        },
                     },
                     tooltip: {
                         trackMouse: true,

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

@@ -4,6 +4,10 @@ Ext.define('saas.view.home.charts.MonthSale', {
 
     id: 'month_sale',
 
+    bind: {
+        title: '本月销售额（万元）：{month_sale_amount}'
+    },
+
     initComponent: function() {
         var me = this;
 
@@ -13,17 +17,6 @@ Ext.define('saas.view.home.charts.MonthSale', {
                 width: '100%',
                 height: '100%',
                 bind: {
-                    captions: {
-                        title: {
-                            text: '本月销售额（万元）：{month_sale_amount}',
-                            style: {
-                                'font-size': '14px',
-                                'color': '#485465',
-                                'letter-spacing': '-0.07px'
-                            },
-                            align: 'left'
-                        }
-                    },
                     store: '{month_sale}',
                 },
                 colors: [

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

@@ -4,28 +4,21 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
 
     id: 'purchase_trend',
 
+    bind: {
+        title: '近六月采购趋势图'
+    },
+
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'cartesian',
-                insetPadding: '28 0 0 0',
                 colors: [
                     '#34BAF6'
                 ],
                 bind: {
-                    captions: {
-                        title: {
-                            text: '近六月采购趋势图',
-                            style: {
-                                'font-size': '14px',
-                                'color': '#485465',
-                                'letter-spacing': '-0.07px'
-                            },
-                            align: 'left'
-                        }
-                    },
+                    insetPadding: '{insetPadding}',
                     store: '{purchase_trend}',
                 },
                 axes: [{
@@ -78,10 +71,12 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
                     //     fontSize: '12px',
                     //     strokeStyle: '#fff',
                     // },
-                    style: {
-                        lineWidth: 0,
-                        strokeStyle: 'transparent',
-                        maxBarWidth: 30,
+                    bind: {
+                        style: {
+                            lineWidth: 0,
+                            strokeStyle: 'transparent',
+                            maxBarWidth: '{maxBarWidth}',
+                        },
                     },
                 }]
             }]

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

@@ -4,29 +4,22 @@ Ext.define('saas.view.home.charts.SaleTrend', {
 
     id: 'sale_trend',
 
+    bind: {
+        title: '近六月销售趋势图'
+    },
+
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'cartesian',
-                insetPadding: '28 0 0 0',
                 colors: [
                     '#64B0E4',
                     '#FF1038'
                 ],
                 bind: {
-                    captions: {
-                        title: {
-                            text: '近六月销售趋势图',
-                            style: {
-                                'font-size': '14px',
-                                'color': '#485465',
-                                'letter-spacing': '-0.07px'
-                            },
-                            align: 'left'
-                        }
-                    },
+                    insetPadding: '{insetPadding}',
                     store: '{sale_trend}',
                 },
                 // legend: {

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

@@ -4,28 +4,21 @@ Ext.define('saas.view.home.charts.StockAmount', {
 
     id: 'stock_amount',
 
+    bind: {
+        title: '近六月库存金额图'
+    },
+
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
             items: [{
                 xtype: 'cartesian',
-                insetPadding: '28 0 0 0',
                 colors: [
                     '#34BAF6'
                 ],
                 bind: {
-                    captions: {
-                        title: {
-                            text: '近六月库存金额图',
-                            style: {
-                                'font-size': '14px',
-                                'color': '#485465',
-                                'letter-spacing': '-0.07px'
-                            },
-                            align: 'left'
-                        }
-                    },
+                    insetPadding: '{insetPadding}',
                     store: '{stock_amount}',
                 },
                 axes: [{
@@ -72,10 +65,12 @@ Ext.define('saas.view.home.charts.StockAmount', {
                         trackMouse: true,
                         renderer: me.onBarTipRender
                     },
-                    style: {
-                        lineWidth: 0,
-                        strokeStyle: 'transparent',
-                        maxBarWidth: 30,
+                    bind: {
+                        style: {
+                            lineWidth: 0,
+                            strokeStyle: 'transparent',
+                            maxBarWidth: '{maxBarWidth}',
+                        },
                     },
                 }]
             }]