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'
    }, {
        color: 'yellow',
        showIcon: true,
        icon: 'receiveTotal',
        name: 'receiveTotal',
        label: '应收总额',
        value: '0'
    }, {
        color: 'red',
        showIcon: true,
        icon: 'payTotal',
        name: 'payTotal',
        label: '应付总额',
        value: '0'
    }, {
        color: 'blue',
        showIcon: true,
        icon: 'balanceTotal',
        name: 'balanceTotal',
        label: '账户余额',
        value: '0'
    }],

    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) {
                    console.log('xxxx');
                    // 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);
    // }
});