首页关键数据样式

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

@@ -19,13 +19,13 @@ Ext.define('saas.view.home.charts.KeyData', {
                             '<div class="x-icon x-icon-{icon}"></div>',
                         '</tpl>',
                         '<div class="x-text',
-                            // '<tpl if="!showIcon">',
-                            //     ' x-text-small',
-                            // '</tpl>',
+                            '<tpl if="!showIcon">',
+                                ' x-text-small',
+                            '</tpl>',
                         '">',
-                            // '<tpl if="!showIcon">',
-                            //     '<div class="x-icon-small x-icon-{icon}"></div>',
-                            // '</tpl>',
+                            '<tpl if="!showIcon">',
+                                '<div class="x-icon-small x-icon-{icon}"></div>',
+                            '</tpl>',
                             '<div class="x-key"><span>{label}</span></div>',
                             '<div class="x-value"><span>{value}</span></div>',
                         '</div>',
@@ -91,11 +91,11 @@ Ext.define('saas.view.home.charts.KeyData', {
                     r.set('value', d);
                 });
             },
-            // updateShowIcon: function(show) {
-            //     this.each(function(r) {
-            //         r.set('showIcon', show);
-            //     });
-            // }
+            updateShowIcon: function(show) {
+                this.each(function(r) {
+                    r.set('showIcon', show);
+                });
+            }
         });
         var view = Ext.create('Ext.view.View', {
             store: store,
@@ -104,6 +104,26 @@ Ext.define('saas.view.home.charts.KeyData', {
             listeners: {
                 itemclick: function(th, record, item, index, e, eOpts) {
                     saas.util.BaseUtil.openTab(record.get('viewType'), record.get('title'), record.get('id'));
+                },
+                itemmouseenter: function(th, record, item, index, e, eOpts) {
+                    var tip = th.tip;
+                    if(!tip) {
+                        var tip = Ext.create('Ext.tip.ToolTip', {
+                            target: th.el,
+                            title: record.get('label'),
+                            html: record.get('value'),
+                            showOnTap: true,
+                            trackMouse: true
+                        });
+                        th.tip = tip;
+                        tip.showAt(e.getXY());
+                    }
+                },
+                itemmouseleave: function(th, record, item, index, e, eOpts) {
+                    var tip = th.tip;
+                    if(tip) {
+                        th.tip = Ext.destroy(th.tip);
+                    }
                 }
             }
         });
@@ -118,15 +138,15 @@ Ext.define('saas.view.home.charts.KeyData', {
     },
 
     listeners: {
-        // afterlayout: function() {
-        //     var me = this,
-        //     box = me.getBox(),
-        //     view = me.view,
-        //     width = box.width,
-        //     store = view.store;
-
-        //     store.updateShowIcon(width >= 450);
-        // },
+        afterlayout: function() {
+            var me = this,
+            box = me.getBox(),
+            view = me.view,
+            width = box.width,
+            store = view.store;
+
+            store.updateShowIcon(width >= 450);
+        },
     },
 
     updateValue: function(datas) {
@@ -137,11 +157,11 @@ Ext.define('saas.view.home.charts.KeyData', {
         store.updateValue(datas);
     },
 
-    // updateShowIcon: function(showIcon) {
-    //     var me = this,
-    //     view = me.view,
-    //     store = view.store;
+    updateShowIcon: function(showIcon) {
+        var me = this,
+        view = me.view,
+        store = view.store;
 
-    //     store.updateShowIcon(showIcon);
-    // }
+        store.updateShowIcon(showIcon);
+    }
 });

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

@@ -35,6 +35,7 @@
                     background-position: center;
 
                     &-small {
+                        opacity: 0.7;
                         width: 36px;
                         height: 36px;
                         position: relative;
@@ -79,17 +80,25 @@
                         align-items: flex-start;
                         font-size: 16px;
                         color: #1E2429;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
                     }
 
                     &-small {
                         display: block;
 
                         .x-key {
+                            text-align: end;
                             display: block;
                             padding-left: 54px;
                             margin-top: -17px;
                             margin-bottom: 14px;
                         }
+
+                        .x-value {
+                            display: block;
+                            text-align: end;
+                        }
                     }
                 }
             }