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

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

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

    #checkChannel tr {
        height: 20px;
    }

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

    #checkChannel tbody {
        height: calc(100vh - 150px);
        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="?index.php&act=refill_analysis&op=index&type=provider"><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="JavaScript:void(0);" class="current"><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>
                    <div id="select_merchants"></div>
                </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>
                    <select name="show_all">
                        <option value=""><?php echo $lang['nc_please_choose']; ?></option>
                        <option value="1">只看all</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 class="echartsContent">
        <table id="checkChannel">
            <thead>
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" id="checkAllChannel">
                            编号(机构列表)
                        </label>
                    </td>
                </tr>
            </thead>
            <tbody id="checkChannelContent">

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

        </div>
    </div>

    <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 ratios = [];

        let qualitys = [];


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



        function formatChannelTable(tableData) {
            $('#checkChannelContent').children().remove();
            let data;
            if (typeof tableData == 'object') {
                data = tableData;
            } else {
                data = JSON.parse(tableData)
            }
            let tableHTML = '';
            data.map(item => {
                tableHTML += `
                    <tr>
                        <td><label><input type="checkbox" name="channelValue" ${item.checked?'checked="checked"':''}  value="${item.value}" />${item.name}${item.ratio?`<span style="color:red;">(${item.ratio})</span>`:''}</label></td>
                    </tr>
                `;
            })
            $('#checkChannelContent').append(tableHTML);
        }

        function updateQualityTable() {
            const allQualityList = JSON.parse(JSON.stringify(qualitys));

            allQualityList.map(item => {
                item.checked = false;
            })


            function findItem(value) {
                const item = allQualityList.filter(item => {
                    return item.value == value;
                })
                if (item.length > 0) {
                    return item[0].name
                }
                return false
            }
            const ratioList = ratios.map(item => {
                return {
                    name: findItem(item.split(':')[0]) || item.split(':')[0],
                    value: item.split(':')[0],
                    ratio: item.split(':')[1],
                    checked: parseFloat(item.split(':')[1]) == 0 ? false : true
                }
            });


            let mergeQualitys = [...ratioList, ...allQualityList];

            const newArr = [];
            const obj = {};

            for (let i = 0; i < mergeQualitys.length; i++) {
                if (!obj[mergeQualitys[i].value]) {
                    newArr.push(mergeQualitys[i]);
                    obj[mergeQualitys[i].value] = true;
                }
            }

            formatChannelTable(newArr);
        }

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

        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
        }

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

        $('#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 mchids = select_set(select_merchants.getValue())
            let mchidList = [];
            $('input[name="channelValue"]').each(function() {
                if ($(this).attr('checked')) {
                    mchidList.push($(this).attr('value'))
                }
            })

            let mchids = mchidList.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 show_all = $("select[name=show_all]").val()
            let src = window.location.origin + "/plot/mch_covratio?"
            if (start_time) {
                src += "&start_time=" + start_time;
            }
            if (end_time) {
                if (end_time < start_time || !start_time) {
                    layer.msg('日期有误，结束日期需大于开始日期');
                    return
                }
                src += "&end_time=" + end_time;
            }
            if (mchids) {
                src += "&mchids=" + mchids;
            }
            if (card_types) {
                src += "&card_types=" + card_types;
            }
            if (spec) {
                src += "&spec=" + spec;
            }
            if (filter_wave > 0) {
                src += '&filter_wave=' + filter_wave;
            }
            if (show_all > 0) {
                src += '&show_all=' + true;
            }
            $.get(src, function(data) {
                if (data.state == 'success') {
                    $('#echart').html(`<img src='data:image/png;base64,${data.img}'/>`)
                    ratios = data.ratios;
                    updateQualityTable()
                }
            });
        });

        $('#ncsubmit').trigger('click');

        const fixedHeight = $('.fixed-bar').height();
        $('.fixed-empty').css('cssText', 'height:' + (parseFloat(fixedHeight) + 8) + 'px !important');
    })
</script>