| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799 | <!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <meta name="author" content=""/>    <meta name="description" content=""/>    <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>    <meta name="format-detection" content="telphone=no,email=no"/>    <meta name="viewport"          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">    <title>趋势</title>    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>    <link rel="stylesheet" href="../components/custom/css/common.css"/>    <link rel="stylesheet" href="css/xyf.common.min.css">    <style>        [my-control-content] {            display: none;        }        [my-control-content].active {            display: block;        }        /*避免键盘导致半屏显示*/        .income-segmented {            display: none;            position: relative;        }        .income-segmented.active {            display: block;        }    </style></head><body class="income-trend income-time income-panel"><div class="mui-input-group ">    <div class="mui-row">        <div class="mui-col-xs-9 mui-col-sm-9 padding-l-10" style="padding-top: 6px">            <span class="mui-btn mui-btn-outlined btn-outlined-check filter-btn-custom" my-control-item="month"                  key="chartMonth">月统计</span>            <span class="mui-btn mui-btn-outlined btn-outlined-check filter-btn-custom" my-control-item="year0" range="0"                  key="chartYear">今年</span>            <span class="mui-btn mui-btn-outlined btn-outlined-check filter-btn-custom" my-control-item="year1" range="1"                  key="chartYear">去年</span>            <span class="mui-btn mui-btn-outlined btn-outlined-check filter-btn-custom" my-control-item="year2" range="2"                  key="chartYear">前年</span>        </div>        <div class="mui-col-xs-3 mui-col-sm-3 mui-text-right">            <div class="filter-btn padding-l-r-5" onclick="goDownload()" id="goDownload"><i                    class="iconfont icon-download font-18"></i></div>            <div class="filter-btn padding-l-r-5" onclick="showChart()"><i                    class="iconfont icon-chart-line font-18"></i></div>        </div>    </div></div><div class="filter-panel" style="display: none" id="options">    <div class="input-group-vertical mui-table-view clear-b-border">        <div style="background: #def;color: #333;font-size: 12px;padding: 10px;">            注:为加速查询性能,提供更好的查询体验,系统仅支持查询最近3年的订单统计数据。        </div>        <div class="mui-input-row input-clear or-order-status" id="targetMonthRow">            <label class="or-label-text">选择月份</label>            <span class="mui-icon mui-icon-arrowright"></span>            <span class="or-order-status-font selected-text" id="targetMonth"></span>        </div>        <div class="mui-input-row filter-panel-btn flexbox">            <span class="ok-btn flex">确定</span>        </div>    </div></div><div class="filter-panel" style="display: none" id="options2">    <div class="input-group-vertical mui-table-view clear-b-border datepicker">        <!--        暂时隐藏-->        <div class="mui-input-row input-clear or-order-status" id="targetYearRow" style="">            <label class="or-label-text">选择年份</label>            <span class="mui-icon mui-icon-arrowright"></span>            <span class="or-order-status-font selected-text" id="targetYear"></span>        </div>        <div class="mui-input-row filter-panel-btn flexbox">            <span class="ok-btn flex">确定</span>        </div>    </div></div><div class="mui-table-view clear-before">    <div class="mui-row head-status">        <div class="font-bold mui-col-xs-6 mui-col-sm-6" id="categoryName">            收益情况        </div>        <div class="mui-col-xs-6 mui-col-sm-6 per-box">            <div class="mui-pull-right" id="toggleCategory" onclick="toggleCategory()">                <div class="mui-btn"><span style="-webkit-transform: rotate(0deg);">查看消费</span></div>                <div class="mui-btn"><span style="-webkit-transform: rotate(0deg);">查看收益</span></div>            </div>        </div>    </div></div><div class="mui-content income-segmented active" id="incomePanel">    <div id="monthItem" my-control-content="month">        <div class="chart-box" id="chartMonth-income"></div>        <div class="index-hd " id="indexHdDay30">            <i class="iconfont icon-purse purse-logo-back"></i>            <a href="javascript:;" class="hd-tab">                本月总收益(元)<span id="monthIncome">0.00</span>            </a>            <div class="mui-table hd-cell " id="hdCellDay30">                <div class="mui-table-cell mui-ellipsis">                    <span>在线支付</span><em id="payIncome">0.00元</em>                </div>                <div class="mui-table-cell mui-ellipsis mui-hidden">                    <span>线下投币</span><em id="offlineCoins">0.00次</em>                </div>            </div>        </div>        <ul class="mui-table-view" id="monthIncomeList"></ul>    </div>    <div id="yearItem" my-control-content="year">        <div class="chart-box" id="chartYear-income"></div>    </div></div><div class="mui-content income-segmented" id="consumePanel">    <div id="consumeMonthItem" my-control-content="month">        <div class="chart-box" id="chartMonth-consume"></div>        <ul class="mui-table-view" id="monthConsumeList"></ul>    </div>    <div my-control-content="year">        <div class="chart-box" id="chartYear-consume"></div>        <ul class="mui-table-view" id="yearConsumeList"></ul>    </div></div><script src="https://cdn.washpayer.com/components/lib/echarts.js"></script><script src="https://cdn.washpayer.com/components/lib/echarts-theme/macarons.js"></script><script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script><script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script><script src="https://cdn.washpayer.com/components/lib/mui.picker.min.js"></script><script src="https://cdn.washpayer.com/components/lib/moment.min.js"></script><script src="/components/custom/js/common.js"></script><script src="js/xyf.common.js"></script><script>    var targetMonth = moment().format("YYYY-MM");    var targetYear = moment().format("YYYY");    var thisRange = "month";// 或 year    var categoryBtn = "income";// 或 consume    $(function () {        $('#targetMonth').text(targetMonth);        $('#targetYear').text(targetYear);        var targetMonthRow = $('#targetMonthRow');        var targetMonthPicker = new mui.DtPicker({            type: "month",            beginDate: moment().add(-2, 'year').startOf("year").toDate(),            endDate: new Date()        });        targetMonthPicker.setSelectedValue(targetMonth);//默认选中开始时间        targetMonthRow[0].addEventListener('tap', function () {            targetMonthPicker.show(function (time) {                targetMonth = time.y.text + '-' + time.m.text;                $('#targetMonth').text(targetMonth);            });        }, false);        var targetYearRow = $('#targetYearRow');        var targetYearPicker = new mui.PopPicker();        var yearList = []        var startY = moment().add(-2, 'year').format('YYYY')        startY = parseInt(startY)        for (var index = startY; index <= new Date().getFullYear(); index++) {            yearList.push({                value: index + "",                text: index + "",            })        }        targetYearPicker.setData(yearList);        targetYearPicker.pickers[0].setSelectedValue(targetYear)        targetYearRow[0].addEventListener('tap', function () {            targetYearPicker.show(function (items) {                targetYear = items[0].value;                $('#targetYear').text(targetYear);            });        }, false);        //快速选择年        $('[range]').tap(function () {            var range = $(this).attr('range');            targetYear = moment().add(-range, "year").format("YYYY");            triggerYear(range)        });    })    FilterComponent(        [            {                trigger: "[my-control-item='month']",                panel: "#options",                cancel: function () {                    if (thisRange !== 'month') {                        togActive(thisRange, theNum)                    }                },                ok: function () {                    thisRange = 'month';                    togActive(thisRange);                    if (categoryBtn === 'income') {                        initIncomePageData()                    } else {                        initConsumePageData()                    }                    $('#goDownload').show()                }            },            {                trigger: "[my-control-item='year']",                panel: "#options2",                cancel: function () {                    if (thisRange === 'month') {                        togActive("month")                    }                },                ok: function () {                    triggerYear()                }            },        ]    );    let theNum = null    function triggerYear(num) {        thisRange = 'year';        theNum = num        togActive(thisRange, num);        if (categoryBtn === 'income') {            initIncomePageData()        } else {            initConsumePageData()        }    }    function togActive(range, num) {        $("[my-control-item]").removeClass("active");        $("[my-control-content]").removeClass("active");        let itemKey = range        if (num != null) {            itemKey = range + num        }        console.log(itemKey)        $("[my-control-item='" + itemKey + "']").addClass("active");        $("[my-control-content='" + range + "']").addClass("active");        if (itemKey.includes('year')) {            $('#goDownload').hide()        } else {            $('#goDownload').show()        }    }    // 只加载一次    var consumeLoaded = false;    // 切换统计类目    function toggleCategory() {        var toggleCategoryDom = $("#toggleCategory");        if (toggleCategoryDom.hasClass("disabled")) {            return        }        toggleCategoryDom.addClass("disabled");        if (categoryBtn == "income") {            categoryBtn = "consume";            $("#categoryName").text("消费情况");            toggleCategoryDom.addClass("rotate");            $("#incomePanel").animate({left: "-100%"}, function () {                $("#incomePanel").removeClass("active");                $("#consumePanel").addClass("active").css({left: "0"});                refreshData()            });        } else {            categoryBtn = "income";            $("#categoryName").text("收益情况");            toggleCategoryDom.removeClass("rotate");            $("#consumePanel").animate({left: "100%"}, function () {                $("#incomePanel").addClass("active").css({left: "0"});                $("#consumePanel").removeClass("active");                refreshData();            });        }        function refreshData() {            if (categoryBtn == "consume") {                initConsumePageData()            } else {                initIncomePageData()            }            // 动画结束后,还是需要等待 列表加载完,页面的mask才移除            toggleCategoryDom.removeClass("disabled");        }    }    //初始化    var featureList = {};    getFeatureList("dealer", {list: ['show_offline_coins']}, function (payload) {        featureList = payload;        togActive("month");        // 加载收益        initIncomePageData();    });    function initIncomePageData(callback) {        var mask = new Mask({text: "正在加载数据...", performance: true}).show(true);//禁止动画,否则顶部的tab渲染有问题        if (thisRange === 'month') {            var url = "/dealer/lastMonthIncome";            sendRequest(url, "GET", {time: targetMonth}, function (response) {                var payload = response.payload                if (response.result === 1) {                    var monthIncomeList = "";                    var monthPayIncome = parseFloat(payload.payIncome) >= 0 ? ('+' + payload.payIncome) : payload.payIncome;                    var monthLineCoins = payload.offlineCoins;                    for (var i = 0, len = payload.dataList.length; i < len; i++) {                        var item = payload.dataList[i];                        var eq0 = parseFloat(item.payIncome) >= 0                        var payIncome = eq0 ? ('+' + item.payIncome) : item.payIncome;//线上支付                        var offlineCoins = parseFloat(item.offlineCoins) >= 0 ? ('+' + item.offlineCoins) : item.offlineCoins;//线下支付                        var startTime = moment(item.dateStr).format("YYYY-MM-DD");                        var endTime = startTime;                        monthIncomeList += '<li class="mui-table-view-cell"><a class="mui-navigate-right" ' +                            'onclick="goIncomeList(\'' + startTime + '\', \'' + endTime + '\')" >' +                            item.dateText +                            (featureList.show_offline_coins ? '<span class="mui-pull-right custom-right font-12">线下<em>' + offlineCoins + '</em> </span>' : '') +                            '<span class="mui-pull-right custom-right font-12">在线<em class="' + (eq0? "c-red" : "") + '">' + payIncome + '</em> </span>' +                            '</a></li>';                    }                    readyChartData(payload.dataList, "chartMonth-income");                    $("#payIncome").html(monthPayIncome);                    if (featureList.show_offline_coins) {                        $("#offlineCoins").html((monthLineCoins) + "次").parent().removeClass("mui-hidden");                    }                    $("#monthIncome").html(payload.totalIncome);//30天总收入【!!!注意,不统计线下投币!!!】                    // 渲染页面                    $("#monthIncomeList").html(monthIncomeList);                } else {                    mui.toast(response.description);                }                mask.remove();            });        }        if (thisRange === 'year') {            url = "/dealer/lastYearIncome";            sendRequest(url, "GET", {time: targetYear}, function (response) {                if (response.result == 1) {                    var payload = response.payload                    var halfYearIncomeList = "";                    for (var i = 0, len = payload.dataList.length; i < len; i++) {                        var item = payload.dataList[i];                        var offlineCoins = (item.offlineCoins);//线下支付                        var payIncome = parseFloat(item.payIncome) >= 0 ? ('+' + item.payIncome) : item.payIncome;//在线支付                        var totalIncome = (item.totalIncome);//广告加线上                        var startTime = moment(item.dateStr).format("YYYY-MM-DD");                        var endTime = moment(item.dateStr).endOf('month').format("YYYY-MM-DD");                        halfYearIncomeList += '<div class="index-hd custom-bottom">' +                            '<i class="iconfont icon-purse purse-logo-back"></i>' +                            '<a onclick="goIncomeList(\'' + startTime + '\', \'' + endTime + '\')" class="hd-tab">' +                            '' + item.dateText + '收益(元)<span id="halfYearIncome">' + (totalIncome) + '</span>' + //【!!!注意,不统计线下投币!!!】                            '</a>' +                            '<div class="mui-table hd-cell">' +                            '<div class="mui-table-cell mui-ellipsis">' +                            '<span>在线支付</span>' + payIncome + '' +                            '</div>' +                            (featureList.show_offline_coins ? '<div class="mui-table-cell mui-ellipsis">' +                                '<span>线下投币</span>' + offlineCoins + '次' +                                '</div>' : '') +                            '</div>' +                            '</div></div>';                    }                    readyChartData(payload.dataList, "chartYear-income");                    $("#yearItem .index-hd").remove();                    $("#yearItem").append(halfYearIncomeList);                } else {                    mui.toast(response.description);                }                mask.remove();            });        }    }    function initConsumePageData(callback) {        var mask = new Mask({text: "正在加载数据...", performance: true}).show(true);//禁止动画,否则顶部的tab渲染有问题        if (thisRange === 'month') {            var url = "/dealer/lastMonthConsumption";            sendRequest(url, "GET", {time: targetMonth}, function (response) {                toHtml(response, "month");                mask.remove();            });        }        if (thisRange === 'year') {            url = "/dealer/lastYearConsumption";            sendRequest(url, "GET", {time: targetYear}, function (response) {                toHtml(response, "year");                mask.remove();            });        }        function toHtml(response, range) {            if (response.result == 1) {                var htmlMod = "";                for (var i = 0, len = response.para.dataList.length; i < len; i++) {                    var item = response.para.dataList[i];                    var startTime = moment(item.dateStr).format("YYYY-MM-DD");                    var endTime = startTime;                    if (range === 'year') {                        endTime = moment(item.dateStr).endOf('month').format("YYYY-MM-DD");                    }                    var consumptionListDom = '';                    for (var index in item.consumptionList) {                        var itemIn = item.consumptionList[index];                        consumptionListDom = consumptionListDom + '<p class="font-b-6">' + itemIn.name + '<span class="mui-pull-right font-b font-b-12">' + itemIn.value + itemIn.unit + '</span></p>';                    }                    // 如果没有数据,则显示 无数据                    if (consumptionListDom === '') {                        consumptionListDom = consumptionListDom + '<p class="font-b-6">没有记录<span class="mui-pull-right font-b font-b-12"></span></p>';                    }                    htmlMod += '<li class="mui-table-view-cell"><a class="mui-navigate-right" ' +                        'onclick="goConsumeList(\'' + startTime + '\', \'' + endTime + '\')" >' +                        item.dateText +                        '<div class="padding-r-10 margin-t-10">' +                        consumptionListDom +                        '</div></a></li>';                }                var chartDomId = "";                if (range == "month") {                    chartDomId = "chartMonth-consume";                    $("#monthConsumeList").html(htmlMod);                } else if (range == "year") {                    chartDomId = "chartYear-consume";                    $("#yearConsumeList").html(htmlMod);                }                readyChartData(response.para.dataList, chartDomId);            } else {                mui.toast(response.description);            }        }    }    var chartData = {};    var chartEntity = {};    //缓存echarts数据    function readyChartData(list, id) {        // 目前只需要补全消费数据,收益数据结构有所不同        if (id.indexOf("consume") > -1) {            fixChartData(list);        }        chartData[id] = list;        initChartAndData(id)    }    //初始化echarts到页面    function initChartAndData(id) {        var list = chartData[id];        // 数据没准备好也不用渲染        if (!chartData[id]) {            console.log(id + "数据为空,无法渲染echart")            return        }        // 如果视图还看不见,则不用渲染,避免性能浪费; 因为用了 visibility, 通过高度 和 is(':visible')不准        if ($("#" + id).css('visibility') === 'hidden') {            console.log(id + "视图visibility = hidden,不可见,不用渲染echart")            return        }        console.log("渲染echarts:" + id)        var xData = [];        var payIncome = [];        var offlineCoins = [];        var consumeSeriesMap = {};        var length = list.length;        for (var index in list) {            // 正序时间排列            var item = list[length - 1 - index];            if (id.indexOf("chartYear") > -1) {                xData.push(moment(item.dateStr).format("YY-MM"));            } else if (id.indexOf("chartMonth") > -1) {                xData.push(moment(item.dateStr).format("MM-DD"));            }            if (id.indexOf("income") > -1) {                payIncome.push(parseFloat(item.payIncome));                offlineCoins.push(parseFloat(item.offlineCoins));            } else if (id.indexOf("consume") > -1) {                var list2 = item.consumptionList;                for (var index2 in list2) {                    var item2 = list2[index2];                    var name = item2.name;                    var value = item2.value;                    if (!consumeSeriesMap[name]) {                        consumeSeriesMap[name] = [];                    }                    consumeSeriesMap[name].push(value);                }            }        }        var option = {            tooltip: {                trigger: 'axis',                axisPointer: {                    lineStyle: {                        color: '#108EE9',                        width: .3,                    }                }            },            grid: {                x: 40,                x2: 15,                y: 30,                y2: 54,            },            //显示legend,因为有些数据很小,趋势不太明细            legend: {                bottom: 0,                data: []            },            xAxis: [                {                    type: 'category',                    axisLabel: {                        textStyle: {                            color: "#aaa",                            fontSize: "12px"                        }                    },                    axisTick: {                        show: false,                    },                    axisLine: {                        show: false,                    },                    data: xData                }            ],            yAxis: [                {                    type: 'value',                    axisLabel: {                        textStyle: {                            color: "#aaa",                            fontSize: "12px"                        }                    },                    axisTick: {                        show: false,                    },                    axisLine: {                        show: false,                    },                    splitLine: {                        lineStyle: {                            color: '#ccc',                            width: 0.3,                            type: 'dotted'                        }                    },                },            ],            series: []        };        var legendData = [];        // 收入和消费显示不同的图形        if (id.indexOf("income") > -1) {            legendData.push('在线支付')            option.series.push({                name: '在线支付',                stack: '收入',                type: 'bar',                itemStyle: {                    color: "rgba(16,142,233,1)",                },                data: payIncome            });            if (featureList.show_offline_coins) {                legendData.push('线下投币')                option.series.push({                    name: '线下投币',                    stack: '收入',                    type: 'bar',                    itemStyle: {                        color: "#ACD8F7",                    },                    data: offlineCoins                });            }        } else if (id.indexOf("consume") > -1) {            for (var key in consumeSeriesMap) {                legendData.push(key)                var dataList = consumeSeriesMap[key];                option.series.push({                    name: key,                    type: 'line',                    data: dataList                });            }        }        option.legend.data = legendData        if (chartEntity[id]) {        } else {            var container = document.getElementById(id);            chartEntity[id] = echarts.init(container);        }        chartEntity[id].setOption(option);        chartEntity[id].resize();    }    // 由于早期的消费可能没有数据,需要给源数据,需要补齐 0,否则折现的时间轴和数据对应错误;    function fixChartData(list) {        // 找到所有key        var allConsumKey = {};        for (var index in list) {            var item = list[index];            var list2 = item.consumptionList;            for (var index2 in list2) {                var item2 = list2[index2];                var name = item2.name;                allConsumKey[name] = name;            }        }        //修复该条数据。 这里只是多循环一次,性能问题不大。        for (var index in list) {            var item = list[index];            if (!item.consumptionList) {                item.consumptionList = []            }            var list2 = item.consumptionList;            for (var key in allConsumKey) {                var hasKeyFlag = false;                for (var index2 in list2) {                    var item2 = list2[index2];                    var name = item2.name;                    // 如果有 key的消费数据,则找下一个key                    if (key === name) {                        hasKeyFlag = true;                        break;                    }                }                // 如果list2循环结束后,找不到key,则补全数据;                if (!hasKeyFlag) {                    item.consumptionList.push({                        name: key,                        value: 0,                    });                }            }        }    }    function goIncomeList(startTime, endTime) {        var halfYear = moment().add(-6, 'month').startOf("month").format("YYYY-MM-DD");        console.log(startTime, halfYear)        if (startTime && moment(startTime).isBefore(halfYear)) {            mui.toast('系统目前仅支持查询最近半年的订单明细数据(当前可查询' + halfYear + '起的数据)');        } else {            goPage('income-list.html?typeShow=income&startTime=' + startTime + '&endTime=' + endTime);        }    }    function goConsumeList(startTime, endTime) {        var halfYear = moment().add(-6, 'month').startOf("month").format("YYYY-MM-DD");        console.log(startTime, halfYear)        if (startTime && moment(startTime).isBefore(halfYear)) {            mui.toast('系统目前仅支持查询最近半年的订单明细数据(当前可查询' + halfYear + '起的数据)');        } else {            goPage('income-list.html?typeShow=consume&startTime=' + startTime + '&endTime=' + endTime);        }    }    // 列表和echarts模式切换    var showChartFlag = false;    function showChart() {        var id = $("[my-control-content]:visible .chart-box").attr("id");        if (showChartFlag) {            $("[my-control-content]").removeClass("chart-active");            $(".icon-chart-line").removeClass("active");        } else {            $("[my-control-content]").addClass("chart-active");            $(".icon-chart-line").addClass("active");        }        showChartFlag = !showChartFlag;        initChartAndData(id);    }    //因为该a标签已经用在mui的特性中,必须重新加上mui的tap事件,点击a标签才有反应    mui('body').on('tap', '.mui-tab-item[data-href]', function () {        replacePage($(this).attr("data-href"));    });    function goDownload(){        var query = {            kind: "monthly_bill",            time: targetMonth        }        sendRequest({            url: '/dealer/exportBusinessStats',            data: query,            type: 'GET',            success: (data) => {                var searchKey = ''                if (data.result == 1) {                    searchKey = data.payload;                }                goPage('/dealer/index.html#/export/exportList?searchKey=' + searchKey);            },        })    }</script></body></html>
 |