首页chart图全屏展示初步设计预留

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

@@ -10,13 +10,55 @@ Ext.define('saas.view.core.chart.ChartBase', {
         width: '100%'
     },
 
+    etc: {
+        tools: [{
+            name: 'fullscreen',
+            iconCls: 'x-sa sa-fullscreen',
+            handler: 'fullscreen'
+        }]
+    },
+
     initComponent: function() {
         var me = this;
 
         Ext.apply(me, {
+            title: Ext.create('Ext.panel.Header', {
+                title: me.getTitleHtml(),
+                width: '100%',
+                // listeners: {
+                //     boxready: function() {
+                //         debugger
+                //     }
+                // }
+            }),
             cls: 'quick-graph-panel ' + (me.cls || '')
         });
 
         me.callParent(arguments);
-    }
+    },
+
+    getTitleHtml: function() {
+        var me = this,
+        title = me.title || '',
+        tools = me.chartTools;
+
+        return '<div>' + title + '</div><div class="tools">' + me.getToolStr(tools) + '</div>';
+    },
+
+    getToolStr: function(names) {
+        names = Ext.isArray(names) ? names : [];
+
+        var me = this,
+        tools = me.etc.tools,
+        str = '';
+
+        tools.map(function(t) {
+            if(names.indexOf(t.name) != -1) {
+                str += '<a class="tool ' + t.iconCls + '" onClick=""></a>';
+            }
+        })
+
+        return str;
+    },
+
 });

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

@@ -6,23 +6,34 @@
         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: 5px;
-                    height: 16px;
-                    border-radius: 4px;
-                    background: #33B4EE;
-                    left: 4px;
-                    top: 1px;
+        .x-box-inner > .x-box-target > .x-container > .x-box-inner > .x-box-target {
+            &> .x-title {
+                .x-title-text {
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    font-size: 14px;
+                    color: #485465;
+                    letter-spacing: -0.07px;
+                    padding-left: 15px;
+    
+                    .tools {
+                        text-align: right;
+                
+                        .tool {
+                            cursor: pointer;
+                        }
+                    }
+    
+                    &:before {
+                        content: ' ';
+                        position: absolute;
+                        width: 5px;
+                        height: 16px;
+                        border-radius: 4px;
+                        background: #33B4EE;
+                        left: 4px;
+                        top: 1px;
+                    }
                 }
             }
         }

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

@@ -1,8 +1,3 @@
-.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 {
 
     .sumtip {

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

@@ -1,8 +1,3 @@
-.quick-graph-panel .x-panel-header-default .x-panel-header-title-default > .x-title-text-default {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-
 .x-saletrend-legend {
 
     .x-legend-inner {

frontend/saas-web/packages/font-saas/resources/fonts/iconfont.svg

@@ -26,6 +26,9 @@ Created by iconfont
     <glyph glyph-name="bar" unicode="&#59412;" d="M1024-67.76470600000005l0-60.235294-1024 0 0 60.235294 1024 0zM120.470588 293.647059l120.470588 0 0-301.176471 60.235294 0 0 361.411765-240.941176 0 0-361.411765 60.235294 0 0 301.176471zM421.647059 474.352941l120.470588 0 0-481.882353 60.235294 0 0 542.117647-240.941176 0 0-542.117647 60.235294 0 0 481.882353zM722.823529 715.294118l120.470588 0 0-722.823529 60.235294 0 0 783.058824-240.941176 0 0-783.058824 60.235294 0 0 722.823529z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="fullscreen" unicode="&#59417;" d="M896 417.28C878.336 417.28 864 431.616 864 449.28L864 695.808 594.624 426.496C582.656 414.528 563.264 414.528 551.296 426.496 539.328 438.464 539.328 457.856 551.296 469.824L818.752 737.28 576 737.28C558.336 737.28 544 751.616 544 769.28 544 786.944 558.336 801.28 576 801.28L893.056 801.28C897.728 801.984 901.568 800.768 906.112 799.232 907.584 798.72 908.992 798.208 910.336 797.504 913.152 796.096 916.48 796.352 918.784 793.984 920.448 792.3199999999999 920.064 789.888 921.28 787.968 924.288 783.936 926.208 779.264 927.04 774.144 927.104 773.248 927.552 772.544 927.488 771.712 927.552 770.88 928 770.112 928 769.28L928 449.28C928 431.616 913.664 417.28 896 417.28ZM205.248 33.27999999999997L448 33.27999999999997C465.664 33.27999999999997 480 18.94399999999996 480 1.2799999999999727 480-16.384000000000015 465.664-30.720000000000027 448-30.720000000000027L130.944-30.720000000000027C126.272-31.423999999999978 122.432-30.20799999999997 117.888-28.672000000000025 116.416-28.159999999999968 115.008-27.648000000000025 113.664-26.94399999999996 110.848-25.535999999999945 107.52-25.79200000000003 105.216-23.423999999999978 103.552-21.75999999999999 103.936-19.327999999999975 102.72-17.408000000000015 99.712-13.375999999999976 97.792-8.70399999999995 96.96-3.5839999999999463 96.896-2.687999999999988 96.448-1.9840000000000373 96.512-1.1520000000000437 96.448-0.32000000000005 96 0.4479999999999791 96 1.2799999999999727L96 321.28C96 338.94399999999996 110.336 353.28 128 353.28 145.664 353.28 160 338.94399999999996 160 321.28L160 74.75199999999995 429.376 344.06399999999996C441.344 356.03200000000004 460.736 356.03200000000004 472.704 344.06399999999996 484.672 332.096 484.672 312.70399999999995 472.704 300.736L205.248 33.27999999999997Z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="invite" unicode="&#59416;" d="M724.89984 293.34528c12.04224-9.56928 31.30368-4.7872 40.9344 9.5744 4.8128 7.18336 4.8128 14.3616 4.8128 21.53984-2.41152 7.17824-7.22432 14.3616-12.04224 19.14368-16.85504 9.5744-33.71008 21.53984-52.97152 28.71808 24.07936 23.936 43.3408 50.25792 55.37792 81.37728 14.4384 33.50016 21.67296 69.4016 21.67296 107.69408 0 148.3776-120.3968 268.04736-269.68576 268.04736S245.71904 707.38432 245.71904 559.00672c0-71.79776 28.89728-138.81344 79.4624-189.07648-156.50816-71.79264-257.6384-227.35872-257.6384-399.67744 0-16.75264 12.03712-28.71808 28.89216-28.71808s28.89216 11.96544 28.89216 28.71808c0 160.34816 101.12512 303.94368 250.4192 358.9888 84.28032-50.24768 192.63488-47.86688 274.49856 0 26.496-9.56416 52.98688-21.53472 74.65472-35.89632z m-211.8912 57.44128c-115.57888 0-209.48992 93.34272-209.48992 208.22016 0 114.87232 93.90592 208.20992 209.48992 208.20992 115.584 0 209.48992-93.3376 209.48992-208.20992 0-28.71808-4.8128-57.4464-16.85504-83.7632-9.63072-23.936-26.49088-45.47584-45.75744-64.61952-38.51776-38.2976-91.49952-59.83744-146.87744-59.83744z m411.71968-221.95712h-95.1296v95.13472a31.70816 31.70816 0 1 1-63.41632 0v-95.13472h-95.13472a31.70816 31.70816 0 0 1 0-63.42144h95.13472v-95.1296a31.71328 31.71328 0 1 1 63.41632 0v95.1296h95.1296a31.70816 31.70816 0 1 1 0 63.42144z"  horiz-adv-x="1024" />
 
     

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

@@ -1,51 +1,105 @@
-
-.sa-home:before { content: "\e817"; }
-
-.sa-bar:before { content: "\e814"; }
-
-.sa-invite:before { content: "\e818"; }
-
-.sa-tuichu:before { content: "\e811"; }
-
-.sa-feedback:before { content: "\e810"; }
-
-.sa-money:before { content: "\e805"; }
-
-.sa-setting:before { content: "\e803"; }
-
-.sa-document:before { content: "\e804"; }
-
-.sa-switch-on:before { content: "\e807"; }
-
-.sa-tag:before { content: "\e815"; }
-
-.sa-edit:before { content: "\e806"; }
-
-.sa-help:before { content: "\e813"; }
-
-.sa-sale:before { content: "\e801"; }
-
-.sa-info:before { content: "\e816"; }
-
-.sa-userBook:before { content: "\e80b"; }
-
-.sa-arrows-left:before { content: "\e809"; }
-
-.sa-purchase:before { content: "\e800"; }
-
-.sa-serviceOnline:before { content: "\e80c"; }
-
-.sa-accountCenter:before { content: "\e812"; }
-
-.sa-date:before { content: "\e80f"; }
-
-.sa-warehouse:before { content: "\e802"; }
-
-.sa-saas:before { content: "\e808"; }
-
-.sa-question:before { content: "\e80d"; }
-
-.sa-arrows-right:before { content: "\e80a"; }
-
-.sa-userGuite:before { content: "\e80e"; }
-
+.sa-home:before {
+    content: "\e817";
+  }
+  
+  .sa-bar:before {
+    content: "\e814";
+  }
+  
+  .sa-fullscreen:before {
+    content: "\e819";
+  }
+  
+  .sa-invite:before {
+    content: "\e818";
+  }
+  
+  .sa-tuichu:before {
+    content: "\e811";
+  }
+  
+  .sa-feedback:before {
+    content: "\e810";
+  }
+  
+  .sa-money:before {
+    content: "\e805";
+  }
+  
+  .sa-setting:before {
+    content: "\e803";
+  }
+  
+  .sa-document:before {
+    content: "\e804";
+  }
+  
+  .sa-switch-on:before {
+    content: "\e807";
+  }
+  
+  .sa-tag:before {
+    content: "\e815";
+  }
+  
+  .sa-edit:before {
+    content: "\e806";
+  }
+  
+  .sa-help:before {
+    content: "\e813";
+  }
+  
+  .sa-sale:before {
+    content: "\e801";
+  }
+  
+  .sa-info:before {
+    content: "\e816";
+  }
+  
+  .sa-userBook:before {
+    content: "\e80b";
+  }
+  
+  .sa-arrows-left:before {
+    content: "\e809";
+  }
+  
+  .sa-purchase:before {
+    content: "\e800";
+  }
+  
+  .sa-serviceOnline:before {
+    content: "\e80c";
+  }
+  
+  .sa-accountCenter:before {
+    content: "\e812";
+  }
+  
+  .sa-date:before {
+    content: "\e80f";
+  }
+  
+  .sa-warehouse:before {
+    content: "\e802";
+  }
+  
+  .sa-saas:before {
+    content: "\e808";
+  }
+  
+  .sa-question:before {
+    content: "\e80d";
+  }
+  
+  .sa-arrows-right:before {
+    content: "\e80a";
+  }
+  
+  .sa-userGuite:before {
+    content: "\e80e";
+  }
+  
+