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

<style>
    #checkChannel {
        border-spacing: 0;
        border-collapse: collapse;
    }

    #checkChannel td {
        min-width: 110px;
        height: 20px;
        padding: 2px;
        background: #F3FBFE;
        border: 1px solid #fff;
        display: block;
        white-space: nowrap;
        font-size: 10px;
    }

    #checkChannel tr {
        height: 26px;
    }

    #checkChannel thead tr {
        table-layout: fixed;
        top: 0;
        left: 0;
    }

    #checkChannel tbody {
        height: calc(100vh - 180px);
        display: block;
        overflow-y: scroll;
    }

    .echartsContent {
        display: flex;
        height: calc(100vh - 150px);
    }

    #echart {
        flex: 1;
        margin-left: 5px;
    }

    #echart img {
        width: 100%;
    }
</style>

<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>
                <li><a href="?index.php&act=refill_analysis&op=index&type=provider_speed"><span>通道单量与成功率监控</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=new_version&type=provider_succs"><span>通道按时段成功单量监控</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=new_version&type=provider"><span>通道累计成功率监控</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=index&type=network"><span>通道网络监控</span></a></li>

                <li><a href="?index.php&act=refill_analysis&op=index&type=system"><span>机构成功率监控</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=new_version&type=system"><span>机构累计成功率监控</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=merchant_ratios"><span>机构成功率统计</span></a></li>
                <li><a href="?index.php&act=refill_analysis&op=new_version&type=mch_order_send"><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" style="min-width: 1200px;">
        <table class="tb-type1 noborder search tableFixed">
            <tr>
                <th><label for="query_start_time">统计时间</label></th>
                <td>
                    <input class="txt date" type="text" value="<?php echo $_GET['query_start_time']; ?>" id="startTime" name="query_start_time" autocomplete="off" style="width:120px" />
                    <label for="query_start_time">~</label>
                    <input class="txt date" type="text" value="<?php echo $_GET['query_end_time']; ?>" id="endTime" name="query_end_time" autocomplete="off" style="width:120px" />
                </td>
                <th><label>通道质量</label></th>
                <td>
                    <select name="quality" class="querySelect">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <option value="">全部</option>
                        <option value="<?php echo refill\Quality::Normal; ?>">普充（无流水）
                        </option>
                        <option value="<?php echo refill\Quality::Quick; ?>">快充
                        </option>
                        <option value="<?php echo refill\Quality::CardKey; ?>">卡密
                        </option>
                        <option value="<?php echo refill\Quality::ThirdShop; ?>">三方
                        </option>
                        <option value="<?php echo refill\Quality::SlowTwentyFour; ?>">慢24(有流水)
                        </option>
                        <option value="<?php echo refill\Quality::SlowSix; ?>">慢6
                        </option>
                        <option value="<?php echo refill\Quality::SlowTwo; ?>">慢2
                        </option>
                        <option value="<?php echo refill\Quality::SlowFortyEight; ?>">慢48
                        </option>
                        <option value="<?php echo refill\Quality::SlowSeventyTwo; ?>">慢72
                        </option>
                        <option value="<?php echo refill\Quality::Fastest; ?>">速充
                        </option>
                    </select>
                </td>
                <th><label>卡类型</label></th>
                <td>
                    <div id="select_cardtypes"></div>
                </td>
                <th><label>面额</label></th>
                <td>
                    <select name="amount">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <option value="10" <?php if ($_GET['refill_amount'] == '10') { ?>selected<?php } ?>>10</option>
                        <option value="20" <?php if ($_GET['refill_amount'] == '20') { ?>selected<?php } ?>>20</option>
                        <option value="30" <?php if ($_GET['refill_amount'] == '30') { ?>selected<?php } ?>>30</option>
                        <option value="50" <?php if ($_GET['refill_amount'] == '50') { ?>selected<?php } ?>>50</option>
                        <option value="100" <?php if ($_GET['refill_amount'] == '100') { ?>selected<?php } ?>>100</option>
                        <option value="200" <?php if ($_GET['refill_amount'] == '200') { ?>selected<?php } ?>>200</option>
                        <option value="300" <?php if ($_GET['refill_amount'] == '300') { ?>selected<?php } ?>>300</option>
                        <option value="500" <?php if ($_GET['refill_amount'] == '500') { ?>selected<?php } ?>>500</option>
                        <option value="1000" <?php if ($_GET['refill_amount'] == '1000') { ?>selected<?php } ?>>1000</option>
                        <option value="2000" <?php if ($_GET['refill_amount'] == '2000') { ?>selected<?php } ?>>2000</option>
                    </select>
                </td>
                <th><label>窗口时长</label></th>
                <td>
                    <select name="filter_wave">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <option value="900">15分钟</option>
                        <option value="1800">半小时</option>
                        <option value="3600">1小时</option>
                        <option value="7200">2小时</option>
                        <option value="0" selected>关闭</option>
                    </select>
                </td>
                <th><label>数据筛选(全部)</label></th>
                <td>
                    <label>
                        <select name="only_all">
                            <!--                            <option value="">--><?php //echo $lang['nc_please_choose']; 
                                                                                ?>
                            <!--</option>-->
                            <option value="1">只看</option>
                            <option value="2">看</option>
                            <option value="3" selected>不看</option>
                        </select>
                    </label>
                </td>
                <td>
                    <a href="javascript:void(0);" id="ncsubmit" class="btn-search" title="<?php echo $lang['nc_query']; ?>">&nbsp;
                    </a>
                </td>
            </tr>
        </table>

        <div class="echartsContent">
            <table id="checkChannel">
                <thead>
                    <tr>
                        <td style="padding-top: 5px;padding-bottom:10px;">
                            <label>
                                <input type="checkbox" id="checkAllChannel">
                                编号(通道列表)
                            </label>
                            <label style="padding-left: 10px;padding-right:10px;">排序：<select value="ratio1" id="changeSortType">
                                    <option value="ratio1">成功率（百分比）</option>
                                    <option value="ratio2">成功率（普通）</option>
                                    <option value="succ">成功单量</option>
                                    <option value="commit">提交单量</option>
                                    <option value="succ_time">成功回调时间</option>
                                    <option value="fail_time">失败回调时间</option>
                                </select>
                            </label>


                        </td>
                    </tr>
                </thead>
                <tbody id="checkChannelContent">

                </tbody>
            </table>
            <div id="echart">

            </div>
        </div>



    </form>
    <div id="box">
        <!-- <iframe
            src="https://www.xyzshops.cn/plot/index?time_stamp=1621488600&interval=60" 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 ADMIN_TEMPLATES_URL; ?>/js/xm-select.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/refill/layer.js"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/refill/moment-with-locales.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() {
        let qualitys = {};
        let sortType = 'ratio1';
        let pageInit = false;

        const defaultChannelType = <?php echo refill\Quality::Normal; ?>;

        $.get(`index.php?act=refill_analysis&op=provider_data`, function(data) {
            data = JSON.parse(data)
            if (data.length > 0) {
                qualitys = init_channels(data);

                const items = [];
                Object.keys(qualitys).map(key => {
                    items.push(qualitys[key])
                })
                formatChannelTable(items);
            }
        })

        $('.querySelect').on('change', function() {
            const qualityType = $(this).val();
            console.log('qualityType', $(this).val());
            $.get(`index.php?act=refill_analysis&op=provider_data&quality=${qualityType}`, function(data) {
                console.log('querySelectChangeData', JSON.parse(data));
                const channeValues = [];
                JSON.parse(data).map(item => {
                    channeValues.push(item.value)
                })
                $('#checkChannelContent tr').css('display', 'none');
                $(`tr[name = "all"]`).css('display', 'block');
                channeValues.map(item => {
                    $(`tr[name = "${item}"]`).css('display', 'block');
                })
            })

        })


        function init_channels(data) {
            let result = {};
            data.map(item => {
                let sname = item.value
                result[sname] = {
                    name: sname,
                    checked: false,
                    value: sname,
                    ratio: 0,
                    succ: 0,
                    commit: 0,
                    succ_time: 0,
                    fail_time: 0
                }
            })
            return result;
        }

        $('#changeSortType').change(function() {
            console.log('#changeSortType', $(this).val());
            if (sortType == $(this).val()) return;
            sortType = $(this).val();
            sortQualityTable()
        })

        function formatChannelTable(tableData) {
            console.log('formatChannelTable', tableData);
            $('#checkChannelContent').children().remove();
            let tableHTML = '';

            tableData.map(item => {
                if (item.name) {
                    if (sortType == 'ratio1') {
                        tableHTML += `
                            <tr name="${item.value}">
                                <td>
                                    <label>
                                    <input type="checkbox" name="channelValue" ${item.checked?'checked="checked"':''}  value="${item.value}" />
                                    ${item.name.split(':').length >= 2 ? item.name.split(':')[1]:item.name.split(':')[0]}
                                    ${pageInit ? `(
                                       ${item.succ}/${item.commit} =  <span style='color:${item.ratio > 0?'red':'#000'};'>${(item.ratio * 100).toFixed(3)}%</span>
                                    )`:''}</label></td>
                            </tr>
                        `;
                    } else {
                        tableHTML += `
                            <tr name="${item.value}">
                                <td>
                                    <label>
                                    <input type="checkbox" name="channelValue" ${item.checked?'checked="checked"':''}  value="${item.value}" />
                                    ${item.name}
                                    ${pageInit ? `(
                                        ${sortType == 'succ'? "<span style='color:red;'>"+`${item.succ}`+"</span>": item.succ}/
                                        ${sortType == 'commit'? "<span style='color:red;'>"+`${item.commit}`+"</span>": item.commit}
                                        = ${sortType == 'ratio2'? "<span style='color:red;'>"+`${(item.ratio*100).toFixed(3)}%`+"</span>": (item.ratio*100).toFixed(3)+"%"}
                                    )
                                    (
                                        ${sortType == 'succ_time'? "<span style='color:red;'>"+`${item.succ_time}`+"</span>": item.succ_time},
                                        ${sortType == 'fail_time'? "<span style='color:red;'>"+`${item.fail_time}`+"</span>": item.fail_time}
                                    )
                                    `:''}</label></td>
                            </tr>
                        `;
                    }
                }
            })

            $('#checkChannelContent').append(tableHTML);

            if (!pageInit) {
                $('#ncsubmit').trigger('click');
            }
        }

        laydate.render({
            elem: '#startTime',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endTime',
            type: 'datetime'
        });


        let select_cardtypes
        $.get('index.php?act=refill_analysis&op=card_type_data', function(data) {
            data = JSON.parse(data)
            select_cardtypes = xmSelect.render({
                el: '#select_cardtypes',
                size: 'mini',
                filterable: true,
                style: {
                    minHeight: '27px',
                    lineHeight: '27px',
                    marginLeft: '4px',
                    width: '250px'
                },
                language: 'zn',
                data: data
            })
        })

        function select_set(selectArr) {
            let selectStr = ''
            for (let i = 0; i < selectArr.length; i++) {
                selectStr += selectArr[i].value + ','
            }
            selectStr = selectStr.substr(0, selectStr.length - 1)
            return selectStr
        }

        function sortQualityTable() {
            let headers = []
            let others = qualitys

            if (qualitys['all']) {
                headers.push(qualitys['all'])
                delete others['all']
            }


            let sortTypeStr = sortType;
            if (sortTypeStr == 'ratio1' || sortTypeStr == 'ratio2') {
                sortTypeStr = 'ratio';
            }

            let otherList = [];
            Object.keys(others).map(key => {
                otherList.push(others[key])
            })

            const checkedSortQualitys = otherList.filter(item => {
                return item.checked;
            }).sort(function(a, b) {
                return b[sortTypeStr] - a[sortTypeStr];
            })

            const unCheckedSortQualitys = otherList.filter(item => {
                return !item.checked;
            }).sort(function(a, b) {
                return b[sortTypeStr] - a[sortTypeStr];
            })

            formatChannelTable([...headers, ...checkedSortQualitys, ...unCheckedSortQualitys]);
        }

        function updateQualityTable() {
            const allQualityList = JSON.parse(JSON.stringify(qualitys));
            Object.keys(allQualityList).map(key => {
                allQualityList[key].checked = false;
            })

            // 并集成功后更新数据
            pageInit = true;
            sortQualityTable();
        }

        $('#ncsubmit').click(function() {
            let query_start_time = $("input[name=query_start_time]").val()
            let start_time = parseInt((new Date(query_start_time)).getTime() / 1000);
            let query_end_time = $("input[name=query_end_time]").val()
            let end_time = parseInt((new Date(query_end_time)).getTime() / 1000);

            if (!start_time && !end_time) {
                start_time = Date.parse(new Date()) / 1000 - 7200;
                end_time = Date.parse(new Date()) / 1000;
            }

            let chnamesList = [];
            $('input[name="channelValue"]').each(function() {
                if ($(this).attr('checked')) {
                    key = $(this).attr('value')
                    if (key != 'all') {
                        chnamesList.push(key)
                    }
                    qualitys[key]['checked'] = true
                }
            })

            let chnames = chnamesList.join(',');
            let card_types = select_cardtypes && select_set(select_cardtypes.getValue())
            let spec = $("select[name=amount]").val()
            let filter_wave = $("select[name=filter_wave]").val()
            let only_all = $("select[name=only_all]").val()

            let url = window.location.origin + "/plot/ch_covratio?"
            if (start_time) {
                url += "&start_time=" + start_time;
            }
            if (end_time) {
                if (end_time < start_time || !start_time) {
                    layer.msg('日期有误，结束日期需大于开始日期');
                    return
                }
                url += "&end_time=" + end_time;
            }
            if (chnames) {
                url += "&chnames=" + chnames;
            }
            if (card_types) {
                url += "&card_types=" + card_types;
            }
            if (spec) {
                url += "&spec=" + spec;
            }
            if (filter_wave > 0) {
                url += '&filter_wave=' + filter_wave;
            }
            if (only_all > 0) {
                url += '&only_all=' + only_all;
            }

            $.get(url, function(data) {
                if (data.state === 'success') {
                    $('#echart').html(`<img src='data:image/png;base64,${data.img}'/>`)

                    Object.keys(qualitys).map(key => {
                        qualitys[key]['checked'] = false
                    })

                    let detail = data.result.detail;
                    Object.keys(detail).map(key => {
                        let item = detail[key]
                        let sname = qualitys[key] ? qualitys[key].name : key
                        let checked = key == 'all' ? false : true

                        let val = {
                            name: sname,
                            ratio: item[0],
                            succ: item[1],
                            commit: item[2],
                            succ_time: item[3],
                            fail_time: item[4],
                            checked: checked,
                            value: key
                        }
                        qualitys[key] = val
                    })

                    updateQualityTable(qualitys)
                }
            });
        });

        $('#checkAllChannel').click(function() {
            if ($(this).get(0).checked) {
                $('input[name="channelValue"]').attr('checked', 'checked')
            } else {
                $('input[name="channelValue"]').removeAttr('checked')
            }
        })

        $('.querySelect').trigger('change');

    })
</script>