NN2022081301/public/agent/pages/store/finance-stat.html

<style type="text/css">
    .xm-label-block {
        background-color: #287bd2
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
    <!--    // 营业额-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    总营业额<span class="layui-badge layui-badge-green pull-right">总</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span><span id="coun_total">0</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日营业额<span class="layui-badge layui-badge-blue pull-right">日</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span><span id="coun_today">0</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    本月营业额<span class="layui-badge layui-badge-red pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span><span id="coun_month">0</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    年度营业额 <span class="icon-text pull-right" lay-tips="指标说明" lay-direction="4" lay-offset="5px,5px">
                        <i class="layui-icon layui-icon-tips"></i>
                    </span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span><span id="coun_year">0</span></p>
                </div>
            </div>
        </div>
    </div>
    <!--    订单-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    总订单量<span class="layui-badge layui-badge-green pull-right">总</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"> <span id="order_total">0</span> <span style="font-size: 24px;line-height: 1;">单</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日订单<span class="layui-badge layui-badge-blue pull-right">日</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font">  <span id="order_today">0</span> <span style="font-size: 24px;line-height: 1;">单</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    本月订单<span class="layui-badge layui-badge-red pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"> <span id="order_month">0</span> <span style="font-size: 24px;line-height: 1;">单</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    年度订单 <span class=" pull-right">年 </span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font"> <span id="order_year">0</span> <span style="font-size: 24px;line-height: 1;">单</span></p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card" style="margin-top: 50px;">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
                <div id="xse" style="height: 300px;margin-top: 20px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="/agent/assets/libs/echarts/echarts.min.js"></script>
<script src="/agent/assets/libs/echarts/echartsTheme.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'notice', 'admin', 'setter', 'xmSelect', 'laydate', 'cascader'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var notice = layui.notice;
        var laydate = layui.laydate;

        // 时间选择
       laydate.render({
            elem: '#dateChoose',
            type: 'date',
            format: 'yyyy/MM/dd',
            calendar: true,
            theme: '#ec6c44',
            range: true,
            trigger: 'click'
        });
        form.render('select');

        // 搜索
        form.on('submit(formSubSearchAgent)', function (data) {
            // 省市区地址处理
            var values = data.field.area.split(",");
            var areaId = values[values.length - 1];
            // console.log(areaId);
            layer.load(2);
            loadData({
                areaId,
                time: data.field.time
            });
            return false;
        });
        // 渲染销售额图表
        var myCharts = echarts.init(document.getElementById('xse'), myEchartsTheme);
        myCharts.setOption({
            title: {
                text: '每月订单统计图'
            },
            tooltip: {},
            gird: {
                left:0,
                right:0,
                bottom:0,
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [{
                name: '订单',
                type: 'bar',
                data: [],
                barMaxWidth: 45
            }]
        });

        // 加载数据
        function loadData(data) {
            admin.req('store/stats/index', data, function (res) {
                layer.closeAll('loading');
                if (res.code === 10000) {
                    $.each(res.data,(i,d) => {
                        if (i !== "chart"){
                            $.each(d,(ii,dd) => {
                                $("#" + (i + '_' + ii)).html(dd)
                            })
                        }
                        form.render('select');
                    });
                    myCharts.setOption({
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '订单',
                            data: res.data.chart
                        }]
                    });
                } else {
                    notice.msg(res.message, {icon: 2});
                }
            });
        }



        loadData(0);
    });
</script>