CloudSQLAdminPanel/public/scr/components/main.js

SPA_RESOLVE_INIT = function ($el, $router) {
    let contentAera = document.querySelector('.mdui-container.main-container'),
        getUserCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/getUserCount',
        getDatabaseCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/getDatabaseCount',
        content = `
                    <div class="mdui-row-xs-1 mdui-row-sm-1 mdui-row-md-3 mdui-row-xl-3 mdui-m-t-3 main-status-row">
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">用户数量</div>
                                <div id="numberOfUser" class="value-col">1024</div>
                            </div>
                        </div>
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">数据库数量</div>
                                <div id="numberOfDatabse" class="value-col">1024</div>
                            </div>
                        </div>
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">cloud</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">服务状态</div>
                                <div class="value-col">正常</div>
                            </div>
                        </div>
                    </div>
                `;

    mdui.JQ(contentAera).append(content);

    Utils.ajaxGet(getUserCountUrl, function (response) {
        document.querySelector('#numberOfUser').innerText = response.data.results;
    });

    Utils.ajaxGet(getDatabaseCountUrl, function (response) {
        document.querySelector('#numberOfDatabse').innerText = response.data.results;
    });

}