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

Ext.define('saas.view.home.charts.KeyData', {
    extend: 'Ext.panel.Panel',

    xtype: 'key-data',
    id: 'key_data',
    cls: 'quick-graph-panel',

    title: '关键数据',

    layout: 'fit',
    height: 300,

    cardTpl: [
        '<div class="x-container">',
            '<tpl for=".">',
                '<div class="x-box x-box-{color}">',
                    '<div class="x-box-content">',
                        '<tpl if="showIcon">',
                            '<div class="x-icon x-icon-{icon}"></div>',
                        '</tpl>',
                        '<div class="x-text',
                            '<tpl if="!showIcon">',
                                ' x-text-small',
                            '</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>',
                    '</div>',
                '</div>',
            '</tpl>',
        '</div>'
    ],

    cards: [{
        color: 'green',
        showIcon: true,
        icon: 'storageTotal',
        name: 'storageTotal',
        label: '库存总额',
        value: '0',
        viewType: 'stock-report-datalist',
        title: '物料库存数量金额表查询',
        id: 'stock-report-datalist',
    }, {
        color: 'yellow',
        showIcon: true,
        icon: 'receiveTotal',
        name: 'receiveTotal',
        label: '应收总额',
        value: '0',
        viewType: 'monry-report-totalrecdetail',
        title: '应收总账查询',
        id: 'monry-report-totalrecdetail',
    }, {
        color: 'red',
        showIcon: true,
        icon: 'payTotal',
        name: 'payTotal',
        label: '应付总额',
        value: '0',
        viewType: 'monry-report-totalpaydetail',
        title: '应付总账查询',
        id: 'monry-report-totalpaydetail',
    }, {
        color: 'blue',
        showIcon: true,
        icon: 'balanceTotal',
        name: 'balanceTotal',
        label: '账户余额',
        value: '0',
        viewType: 'document-bankinformation-datalist',
        title: '资金账户查询',
        id: 'document-bankinformation-datalist',
    }],

    initComponent: function () {
        var me = this;

        var store = Ext.create('Ext.data.Store', {
            fields: ['color', 'showIcon', 'icon', 'label', 'value'],
            data: me.cards,
            updateValue: function(datas) {
                this.each(function(r, index) {
                    // var v = datas[r.get('name')];
                    // var d = saas.util.BaseUtil.formatAmount(v);
                    var d = Ext.util.Format.number(datas[r.get('name')], '0,000.00');
                    r.set('value', d);
                });
            },
            updateShowIcon: function(show) {
                this.each(function(r) {
                    r.set('showIcon', show);
                });
            }
        });
        var view = Ext.create('Ext.view.View', {
            store: store,
            tpl: new Ext.XTemplate(me.cardTpl),
            itemSelector: 'div.x-box',
            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,
                            minWidth: 100,
                            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);
                    }
                }
            }
        });

        Ext.apply(me, {
            items: [view]
        });

        me.view = view;

        me.callParent(arguments);
    },

    listeners: {
        afterlayout: function() {
            var me = this,
            box = me.getBox(),
            view = me.view,
            width = box.width,
            store = view.store;

            store.updateShowIcon(width >= 450);
        },
    },

    updateValue: function(datas) {
        var me = this,
        view = me.view,
        store = view.store;

        store.updateValue(datas);
    },

    updateShowIcon: function(showIcon) {
        var me = this,
        view = me.view,
        store = view.store;

        store.updateShowIcon(showIcon);
    }
});