工作台.php 2.1 KB
<?php $this->load->view('common/header'); ?>

<body>
    <div class="body mt-20 ml-20 mr-20" id="statistics">
        <div class="col-sm-10">
            <div class="row cl pb-20">
                <div class="col-md-2 col-sm-4 col-xs-6 card" >
                    <span class="count_top c-999">全部</span>
                    <div class="count">{{all}}</div>
                    <!-- <span class="count_bottom c-999"><i class="red"><i class="Hui-iconfont">&#xe6d5;</i>12% </i></span> -->
                    <!-- <span class="count_bottom c-999"><i class="green"><i class="Hui-iconfont">&#xe6d6;</i>4 </i></span> -->
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 card" v-for="undisposedOrder in undisposedOrders">
                    <span class="count_top c-999">{{undisposedOrder.desc}}</span>
                    <div class="count">{{undisposedOrder.orderCount}}</div>
                </div>
            </div>
        </div>

        <div class="col-sm-2 top">
            <h3 class="text-c">进件排行榜Top 10</h3>
            <ul class="mt-20">
                <li class="pl-10">
                    <img src="holder.js/60x60" class="round">
                    <span class="name">张三</span>
                    <span class="num">600单</span>
                </li>
            </ul>
        </div>
    </div>
    <?php $this->load->view('common/footer'); ?>

    <script>
        var vm = new Vue({
            el: '#statistics',
            data: {
                undisposedOrders: []
            },
            mounted: function () {
                var _this = this;
                instance.get('order/undisposedOrders').then( function (req) {
                    _this.undisposedOrders = req.data.data;
                });
            },
            computed: {
                all: function () {
                    var all = 0;
                    this.undisposedOrders.forEach(function (undisposedOrder) {
                        all += undisposedOrder.orderCount;
                    })

                    return all;
                }
            }
        })
    </script>
</body>
<html>