The work of system ui implementation of controlling list of assets in relations of P/L.

asset_portfoilo.js

/**
 * Created by hesk on 2018/1/9. zyntauri ltd
 */
import tzmoment from 'moment-timezone'
import VueResource from 'vue-resource';
import {Vuetable, VueTablePagination, VueTablePaginationDropDown, VueTablePaginationInfo} from 'vuetable-2';
window.Vue.use(VueResource);
let t = "", order_start = 0, usdbtc = 0;
//
// thirdly, register components to Vue
//
window.Vue.component("vuetable", Vuetable);
window.Vue.component("vuetable-pagination", VueTablePagination);
window.Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
window.Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
function bitchk(numRetry = 0) {
    getcoinbase();
    return window.axios.post('/api/rn/appconsole/warehouse', get_request_bbx(numRetry))
        .catch(response => {
            if (numRetry > window.FETCH_RETRY_LIMIT) {
                window.console.log("error and it stops");
            } else {
                window.console.log("failed and retry:: ", response);
                bitchk(numRetry + 1);
            }
        }).then(response => {
            append_data_item(response.data);
            return setTimeout(function () {
                bitchk(1);
            }, window.FETCH_BIT_RATE);
        });
}
function get_full_coin_account(numRetry = 0) {
    return window.axios.post('/api/rn/appconsole/accountreviews', get_request_bbx(numRetry))
        .catch(response => {
            if (numRetry > window.FETCH_RETRY_LIMIT) {
                window.console.log("error and it stops");
            } else {
                window.console.log("failed and retry:: ", response);
                get_full_coin_account(numRetry + 1);
            }
        }).then(response => {
            append_data_account_sum(response.data);
            return setTimeout(function () {
                get_full_coin_account(1);
            }, window.FETCH_BIT_RATE);
        });
}
function getcoinbase() {
    //https://api.coinbase.com/v2/prices/spot?currency=USD
    window.axios.get('https://api.coinbase.com/v2/prices/spot?currency=USD')
        .then(response => {
            try {
                usdbtc = parseFloat(response.data.data.amount);
            } catch (e) {
            }
        });
}
function get_request_bbx(numtry) {
    let b = {};
    b["group"] = "1";
    if (typeof t !== 'object')return b;
    const time_checker = t.toISOString();
    b["t"] = time_checker;
    return b;
}
function append_data_account_sum(result_data) {
    if (result_data === undefined) return;
    // window.console.log("table ---:: ", result_data);
    if (result_data.table_data !== undefined) {
        //   window.console.log("table data is now up:: ", result_data);
        let list = [];
        window._.forEach(result_data.table_data, function (dt) {
            const market_name = dt.market;
            let row = {};
            row.market = market_name;
            window._.forEach(dt.accounts, function (account_o) {
                row[account_o.coin] = account_o.balance;
            });
            list.push(row);
        });
        // window.console.log("table list:: ", list);
        summary_warehouse.tableData = list;
    }
}

//summary_warehouse.account_bal = result_data.table_data;
function append_data_item(result_data) {
    // summary_warehouse.main.summary_table = result_data.trading_summary;
    // window.console.log("TR", result_data)
    if (result_data === undefined)return;
    if (result_data.trading_summary === undefined)return;
    summary_warehouse.main.btc = result_data.cx_header;
    summary_warehouse.main.usd = parseFloat(result_data.cx_header) * usdbtc;
    if (result_data.trading_summary !== undefined) {
        window.dt_table.rows().remove().draw(false);
        result_data.trading_summary.forEach((li) => {
            //const date_moment = tzmoment.tz(li.t, "Asia/Hong_Kong");
            //const order_start_d = date_moment.valueOf();
            window.dt_table.row.add(window.injec([
                {'display': li.coin},
                {'display': li.total},
                {'display': li.avg_margin},
                {'display': li.max_margin},
                {'display': li.profit},
                {'display': li.cost},
                {'display': li.max_amount},
                {'display': ''}
                /* {
                 'display': date_moment.calendar(),
                 '@data-order': order_start_d,
                 }*/
            ]));
        });//.draw(false);
        window.dt_table.draw(false);
        t = new Date();
    }
}


const summary_warehouse = new window.Vue({
    el: '#interactive_report',
    data: {
        main: {
            btc: {},
            usd: {},
            sumbtccurrent: 0
        },
        account_bal: {},
        columns: ['market', 'BTC', 'ETH', 'LTC', 'TRX', 'IOTA', 'BTG', 'ADA', 'NEM', 'XMR', 'XRP', 'DASH', 'EOS', 'ETC', 'LSK', 'USD', 'EUR', 'USDT', 'QTUM', 'BCD', 'ZEC', 'NEO', 'GBP'],
        tableData: [],
        options: {
            // see the options API
        },
        itemActions: [
            {name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button'},
            {name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
            {name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button'}
        ]
    },

    methods: {
        viewProfile: function (id) {
            window.console.log('view profile with id:', id)
        }
    },

    events: {
        'vuetable:action': function (action, data) {
            window.console.log('vuetable:action', action, data)
            if (action == 'view-item') {
                this.viewProfile(data.id)
            }
        },
        'vuetable:load-error': function (response) {
            window.console.log('Load Error: ', response)
        }
    },
    mounted: function () {
        t = new Date();
        window.console.log("TR");
        bitchk(0);
        get_full_coin_account(0);
    },
    created: function () {
        let self = this;
        self.$on("close", function (value) {
            // self.control_show.showModal = false;
            // window.location.reload();
        });
    }
});