xyzshop/admin/templates/default/provider.successful.php

<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <h3>成功率监控列表</h3>
            <ul class="tab-base">
                <li><a href="JavaScript:void(0);" class="current" ><span>通道成功率监控</span></a></li>
            </ul>
        </div>
    </div>
    <div class="fixed-empty"></div>
    <div style="margin-top: 10px;color: #e60d0d;">
        请先选择时间
    </div>
    <form method="get" action="index.php" name="formSearch" id="formSearch">
        <table class="tb-type1 noborder search tableFixed">
            <tr>
                <th><label>起始日期</label></th>
                <td>
                    <select name="time_stamp" id="timeSelect">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <?php foreach ($output['days'] as $day => $txt) {?>
                            <option value="<?php echo $day; ?>"><?php echo $txt; ?></option>
                        <?php }?>
                    </select>
                </td>
                <th><label>起始时间</label></th>
                <td>
                    <select name="time_hour">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <?php for ($i = 1; $i <= 24; $i++) {?>
                            <option value="<?php echo $i; ?>"><?php echo sprintf("%02d",$i); ?>点</option>
                        <?php }?>
                    </select>
                </td>
                <th><label>起始分钟</label></th>
                <td>
                    <select name="minute">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <?php for ($i = 0; $i <= 59; $i++) {?>
                            <option value="<?php echo $i; ?>"><?php echo sprintf("%02d",$i); ?>分</option>
                        <?php }?>
                    </select>
                </td>
                <th><label>间隔</label></th>
                <td>
                    <select name="interval">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <option value="3600">一小时</option>
                        <option value="1800">半小时</option>
                        <option value="900" >15分钟</option>
                        <option value="600" >10分钟</option>
                        <option value="300">5分钟</option>
                        <option value="60" selected>1分钟</option>
                    </select>
                </td>
                <th><label>通道</label></th>
                <td>
                    <select name="chname">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                    </select>
                </td>
                <th><label>质量</label></th>
                <td>
                    <select name="quality">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                    </select>
                </td>
                <th><label>卡类型</label></th>
                <td>
                    <select name="card_type">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                    </select>
                </td>
                <th><label>面额</label></th>
                <td>
                    <select name="amount">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                    </select>
                </td>
                <td>
                    <a href="javascript:void(0);" id="ncsubmit" class="btn-search "
                       title="<?php echo $lang['nc_query']; ?>">&nbsp;
                    </a>
                </td>
            </tr>
        </table>
    </form>
    <div>
        <iframe
            src="" scrolling="no" id="Iframe" frameborder="0"></iframe>
    </div>
</div>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/laydate/laydate.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/jquery.ui.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/i18n/zh-CN.js"
        charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/refill/layer.js"></script>
<link rel="stylesheet" type="text/css"
      href="<?php echo RESOURCE_SITE_URL; ?>/js/jquery-ui/themes/ui-lightness/jquery.ui.css"/>
<script type="text/javascript">
    $(function () {
        $("#Iframe").load(function(){
            $(this).css("min-height", '900px')
            $(this).css("min-width", '1650px')
            // var iframeHeight = $(this).contents().find("html").height();
            // var iframeWidth = $(this).contents().find("html").scrollWidth;
            // $(this).attr("height",iframeHeight) 
            // $(this).attr("width",iframeWidth) 
            // console.log('iframeHeight', iframeHeight, iframeWidth);
        });
        //默认获取 当前日期 当前时间点前一个小时， 间隔15 900
        // 前15分钟
        let frontOneHour = new Date(new Date().getTime() - 15 * 60 * 1000)
        let year = frontOneHour.getFullYear();
        let month = frontOneHour.getMonth() + 1;
        let date = frontOneHour.getDate();
        let hour = frontOneHour.getHours()
        let minute = frontOneHour.getMinutes()
        let timestr = year+'-'+month+'-'+date
        let stamp = new Date(timestr).getTime()/1000
        $("select[name=time_stamp]").val(stamp)
        $("select[name=time_hour]").val(hour)
        $("select[name=minute]").val(minute)
        // console.log('frontOneHour', frontOneHour,hour,minute, stamp);
        let t = stamp + hour*3600 + minute*60
        let interval = $("select[name=interval]").val()
        let s = window.location.origin + "/plot/index?time_stamp=" + t + "&interval=" + interval
        TimeGetWhere(stamp)
        $.get( s, function (data){
            if (!data) {
                return
            }
            $('iframe').attr('src',s)
        });

        function TimeGetWhere(time){
            $.get("index.php?act=refill_successful&op=successful_time_get_where&timestamp="+time, function (data){
                if (!data) {
                    return
                }
                data = JSON.parse(data)
                $("select[name=chname]").find('.chnameOption').remove();
                $("select[name=quality]").find('.qualityOption').remove();
                $("select[name=card_type]").find('.ctOption').remove();
                $("select[name=amount]").find('.amountOption').remove();
                // 通道
                for (const key in data.chname) {
                    $("select[name=chname]").append("<option class='chnameOption' value='"+data.chname[key]+"'>"+data.chname[key]+"</option>")
                }
                // 质量
                for (const key in data.quality) {
                    // console.log('质量', key, data.quality[key]);
                    $("select[name=quality]").append("<option class='qualityOption' value='"+key+"'>"+data.quality[key]+"</option>")
                }
                // 卡类型
                for (const key in data.card_type) {
                    // console.log('类型', key, data.card_type[key]);
                    $("select[name=card_type]").append("<option class='ctOption' value='"+key+"'>"+data.card_type[key]+"</option>")
                }
                // 面额
                for (const key in data.amount) {
                    // console.log('面额', data.amount[key]);
                    $("select[name=amount]").append("<option class='amountOption' value='"+data.amount[key]+"'>"+data.amount[key]+"</option>")
                }
                // console.log('data1', data);
            });
        }

        $('#timeSelect').change(function () {
            let val = $(this).val()
            // console.log('val', val);
            TimeGetWhere(val);
        })
        $('#ncsubmit').click(function () {
            let time_stamp = $("select[name=time_stamp]").val()
            let time_hour = $("select[name=time_hour]").val()
            let minute = $("select[name=minute]").val()
            let time = Number(time_stamp) + Number(time_hour)*3600 + Number(minute)*60
            // console.log('time',time_stamp,time_hour,minute, time);
            let interval = $("select[name=interval]").val()
            let chname = $("select[name=chname]").val()
            let quality = $("select[name=quality]").val()
            let card_type = $("select[name=card_type]").val()
            let amount = $("select[name=amount]").val()
            if (!time_stamp) {
                layer.msg('请选择时间');
                return
            }
            let src = window.location.origin + "/plot/index?time_stamp=" + time + "&interval=" + interval + "&chname=" + chname + "&quality=" + quality + "&card_type=" + card_type + "&amount=" + amount
            if (!interval) {
                src = src.replace("&interval=", "")
            }
            if (!chname) {
                src = src.replace("&chname=", "")
            }
            if (!quality) {
                src = src.replace("&quality=", "")
            }
            if (!card_type) {
                src = src.replace("&card_type=", "")
            }
            if (!amount) {
                src = src.replace("&amount=", "")
            }

            $.get(src, function (data){
                if (!data) {
                    return
                }
                $('iframe').attr('src',src)
            });
        });
    })
</script>