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: 280,
    padding: 0,

    cardTpl: [
        '<div class="x-container">',
            '<tpl for=".">',
            '<div class="x-box x-box-{color}">',
                '<div class="x-box-content">',
                    '<div class="x-title">{label}</div>',
                    '<div class="x-contain">',
                        '<div class="x-icon x-icon-{icon}"></div>',
                        '<div class="x-value">{value}元</div>',
                    '</div>',
                '</div>',
            '</div>',
            '</tpl>',
        '</div>'
    ],

    cards: [{
        color: 'yellow',
        showIcon: true,
        icon: 'storageTotal',
        name: 'storageTotal',
        label: '库存总额',
        value: '0',
        viewType: 'stock-report-datalist',
        title: '物料库存数量金额表查询',
        id: 'stock-report-datalist',
    }, {
        color: 'purple',
        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 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'));
                },
            }
        });

        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);
    }
});