<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <jsp:include page="../../common.jsp"></jsp:include>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <%-- <link rel="shortcut icon" href="${resourcePath }/images/favicon.ico"
        type="image/x-icon"> --%>
    <link href="${resourcePath}/css/index/first.css" rel="stylesheet">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>武汉荣商创银科技有限公司</title>
    <script type="text/javascript">
        require("js/nicescroll.min.js");
        require("js/echarts.js");
    </script>
    <style type="text/css">
        .flex-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .count-data{
            box-shadow: 0px 0px 10px #d4d4d4;
            width: 25%;
        }
        .layui-icon{
            font-size: 55px;
            color: #f4516c;
        }
        .layui-icon-about{
            color: #6c6c6c;
            font-size: 23px;
            margin-left: 5px;
        }
        .header-info{
            display: flex;
            justify-content: space-between;
            padding: 25px 60px;
            align-items: center;
        }
        .info{
            line-height: 40px;
        }
        .label{
            color: #535353;
        }
        .value{
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="container-first">
    <div class="clearfix md-tj">
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs12 flex-header">
            <div class="tj-body mt3 mb3 ml3 mr3 count-data" style="background-color: #fff;margin-top: 10px">
                <div class="header-info">
                    <i class="layui-icon layui-icon-rmb"></i>
                    <div class="info">
                        <div class="label">总交易额</div>
                        <div class="value" id="transCount"></div>
                    </div>
                </div>
            </div>
            <div class="tj-body mt3 mb3 ml3 mr3 count-data" style="background-color: #fff;margin-top: 10px">
                <div class="header-info">
                    <i class="layui-icon layui-icon-form"></i>
                    <div class="info">
                        <div class="label">总笔数</div>
                        <div class="value" id="transNum"></div>
                    </div>
                </div>
            </div>
            <div class="tj-body mt3 mb3 ml3 mr3 count-data" style="background-color: #fff;margin-top: 10px">
                <div class="header-info">
                    <i class="layui-icon layui-icon-user"></i>
                    <div class="info">
                        <div class="label">总用户数</div>
                        <div class="value" id="promoterCount"></div>
                    </div>
                </div>
            </div>
            <div class="tj-body mt3 mb3 ml3 mr3 count-data" style="background-color: #fff;margin-top: 10px">
                <div class="header-info">
                    <i class="layui-icon layui-icon-home"></i>
                    <div class="info">
                        <div class="label">总商户数</div>
                        <div class="value" id="merchantCount"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix md-tj">

        <div class="tj-value">
            <div class="pl20 pt10">
                <span class="now-tj">今日实时数据统计</span>
            </div>
            <div class="tj-content pt5 pb10">
                <div class="layui-col-md1 layui-col-sm0 layui-col-xs0">
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div>收款金额<i class="layui-icon layui-icon-about" onmouseover="showTips(this)" onmouseout="closeTips()"></i></div>
                            <div style="margin:5px 0;">
                                <span id="toDayTransSum">￥0</span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="toDayTransZfbSum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="toDayTransWxSum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="toDayTransYsfSum">￥0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div>收款笔数</div>
                            <div style="margin:5px 0;">
                                <span id="toDayTransCount">0</span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="toDayTransZfbCount">0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="toDayTransWxCount">0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="toDayTransYsfCount">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div>退款金额</div>
                            <div style="margin:5px 0;">
                                <span id="toDayRefundSum">￥0</span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="toDayRefundZfbSum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="toDayRefundWxSum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="toDayRefundYsfSum">￥0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div> 新增数量</div>
                            <div style="margin:5px 0;">
                                <span id="toDayAddCount">0</span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">门店</div>
                                <div class="md-number">
                                    <span id="toDayStoreCount">0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">会员</div>
                                <div class="md-number">
                                    <span id="toDayMemberCount">0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">推广员</div>
                                <div class="md-number">
                                    <span id="toDayPromoterCount">0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div>累计收益</div>
                            <div style="margin:5px 0;">
                                <span id="toDayAddMoneyCount">￥0</span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">推广分润</div>
                                <div class="md-number">
                                    <span id="toDayShareoneySum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">粉丝奖励</div>
                                <div class="md-number">
                                    <span id="toDayFansShareMoneySum">￥0</span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">收益</div>
                                <div class="md-number">
                                    <span id="toDayEarnings">￥0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="md-tj">
        <div class="tj-value">
            <div class="pl20 pt10">
                <span class="now-tj">昨日实时数据统计</span>
            </div>
            <div class="tj-content pt5 pb10">
                <div class="layui-col-md1 layui-col-sm0 layui-col-xs0">
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div> 收款金额</div>
                            <div style="margin:5px 0;">
                                <span id="yesterDayTransSum"></span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="yesterDayTransZfbSum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="yesterDayTransWxSum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="yesterDayTransYsfSum"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div> 收款笔数</div>
                            <div style="margin:5px 0;">
                                <span id="yesterDayTransCount"></span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="yesterDayTransZfbCount"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="yesterDayTransWxCount"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="yesterDayTransYsfCount"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div> 退款金额</div>
                            <div style="margin:5px 0;">
                                <span id="yesterDayRefundSum"></span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">支付宝</div>
                                <div class="md-number">
                                    <span id="yesterDayRefundZfbSum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">微信</div>
                                <div class="md-number">
                                    <span id="yesterDayRefundWxSum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">云闪付</div>
                                <div class="md-number">
                                    <span id="yesterDayRefundYsfSum"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div> 新增数量</div>
                            <div style="margin:5px 0;">
                                <span id="yesterDayAddCount"></span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">门店</div>
                                <div class="md-number">
                                    <span id="yesterDayStoreCount"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">会员</div>
                                <div class="md-number">
                                    <span id="yesterDayMemberCount"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">推广员</div>
                                <div class="md-number">
                                    <span id="yesterDayPromoterCount"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2 layui-col-sm4 layui-col-xs12">
                    <div class="tj-body mt3 mb3 ml3 mr3">
                        <div class="md-pre-body">
                            <div>累计收益</div>
                            <div style="margin:5px 0;">
                                <span id="yesterDayAddMoneyCount"></span>
                            </div>
                        </div>
                        <div class="md-type">
                            <div class="md-positionr">
                                <div class="md-desc">推广分润</div>
                                <div class="md-number">
                                    <span id="yesterDayShareoneySum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">粉丝奖励</div>
                                <div class="md-number">
                                    <span id="yesterDayFansShareMoneySum"></span>
                                </div>
                            </div>
                            <div class="md-line"></div>
                            <div class="md-positionr">
                                <div class="md-desc">收益</div>
                                <div class="md-number">
                                    <span id="yesterDayEarnings"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="md-tj pb20 layui-col-space5">
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="echarts-model layui-col-md12 layui-col-sm12 layui-col-xs12">
                <div class="row echarts-top">
                    <div class="col-md-6  echarts-title">
                        <div class="title-tab"></div>
                        <span>数据统计</span>
                    </div>
                    <div class="col-md-6 textr">
                        <div class="btn-group mr30" data-toggle="buttons" id="date_order">
                            <label class="btn choose-btn active"> <input type="radio"
                                                                         name="options1" value="1" autocomplete="off"
                                                                         checked>
                                交易金额
                            </label> <label class="btn choose-btn"> <input type="radio"
                                                                           name="options1" value="2" autocomplete="off">
                            交易笔数
                        </label>
                        </div>
                    </div>
                </div>
                <div class="echarts-md echartBox1">
                    <div class="echarts-img" id="orderFee_date"></div>
<%--                    <div class="echarts-img hidden" id="orderCount_date"></div>--%>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12" style="float: right;">
            <div class="echarts-model layui-col-md12 layui-col-sm12 layui-col-xs12">
                <div class="row echarts-top">
                    <div class="col-md-6 echarts-title">
                        <div class="title-tab"></div>
                        <span>支付通道占比</span>
                    </div>
                    <div class="col-md-6 textr">
                        <div class="btn-group mr30" data-toggle="buttons" id="type_order">
                            <label class="btn choose-btn active"> <input type="radio"
                                                                         name="options2" value="1" autocomplete="off"
                                                                         checked>
                                交易金额
                            </label> <label class="btn choose-btn"> <input type="radio"
                                                                           name="options3" value="2" autocomplete="off">
                            交易笔数
                        </label>
                        </div>
                    </div>
                </div>
                <div class="echarts-md echartBox2">
                    <div class="echarts-img" id="orderFee_payType"></div>
<%--                    <div class="echarts-img hidden" id="orderCount_payType"></div>--%>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
<script type="text/javascript" src="${resourcePath }/js/index/first.js"></script>
<script type="text/javascript">
    let layer;
    layui.use(['layer'], function () {
        layer = layui.layer;
    });
</script>
</body>

</html>