ziqim/Yangcai365_web/manage/zview/stat/after/designAfterReasonStatistics.zml

${Scripts.src("/zinc/chart/highcharts.js")}
${Scripts.src("/zinc/chart/exporting.js")}
${Scripts.src("/zinc/chart/highcharts-zh_CN.js")}
<script>

var dataList = ${reasonList};

Z.onload(function()
{
    //构建图表
    doBuildCharts();
    
    //构建表格统计
    doBuildChartTable();
    
});

//构建图表
function doBuildCharts()
{
    var allCount = 0;
    var chartDatas = [];
    
    try
    {
        Z.each(dataList, function(reasonData, i){
            allCount += reasonData.afterCount ? reasonData.afterCount : 0;
        });
        
        Z.each(dataList, function(reasonData, i){
            var ratio = 0;
            if (allCount > 0)
            {
               ratio = ((reasonData.afterCount ? reasonData.afterCount : 0) / allCount)*100;
            }
            
            var name = reasonData.problemReason;
            chartDatas.push({name: name, y:ratio.toFixed(2)*1})
        });
    }
    catch(e)
    {console.error(e)}
    
    Highcharts.chart('container', 
    {
        chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'},
        title: {text: '售后原因总统计(总售后单量：'+allCount+')'},
        tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'},
        plotOptions: 
        {
            pie:
            {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: 
                {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                    style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}
                }
            }
        },
        series: 
        [{
            name: '百分比',
            colorByPoint: true,
            data:chartDatas
        }]
    });
}

//构建表格统计
function doBuildChartTable()
{
    var allCount = 0;
    var allLostAmount = 0;
    var allOrderAmount = 0;
    Z.each(dataList, function(reasonData, i){
            allCount += reasonData.afterCount ? reasonData.afterCount : 0;
            allLostAmount += reasonData.lostAmount ? reasonData.lostAmount : 0;
            allOrderAmount += reasonData.totalOrderAmount ? Z.Amounts.toYuanMustRadix(reasonData.totalOrderAmount)*1 : 0;
    });
    
    var chartTableHtml = '';
    chartTableHtml += '<table class="z-table z-bordered-line z-pd10 z-bg-white z-text-left">';
    chartTableHtml += '            <tr class="z-bg-gray">';
    chartTableHtml += '                <td width="200">售后原因</td>';
    chartTableHtml += '                <td width="100">售后单量</td>';
    chartTableHtml += '                <td width="100">单量占比</td>';
    chartTableHtml += '                <td width="100">损失金额</td>';
    chartTableHtml += '                <td width="100">订单金额</td>';
    chartTableHtml += '                <td width="*">损失&订单金额占比</td>';
    chartTableHtml += '            </tr>';
    
    Z.each(dataList, function(reasonData, i){
        var reason = reasonData.problemReason;
        var afterCount = reasonData.afterCount ? reasonData.afterCount : 0;
        var totalOrderAmount = reasonData.totalOrderAmount ? Z.Amounts.toYuanMustRadix(reasonData.totalOrderAmount)*1 : 0;
        var lostAmount = reasonData.lostAmount ? reasonData.lostAmount : 0;
        
        chartTableHtml += '            <tr class="z-h40" bgcolor="'+(i%2 != 0 ? '#f3fdfc' : '#ffffff')+'">';
        chartTableHtml += '                <td>'+reason+'</td>';
        chartTableHtml += '                <td>'+afterCount+'</td>';
        chartTableHtml += '                <td>'+(allCount == 0 ? 0 : (afterCount/allCount)*100).toFixed(2)+'%</td>';
        chartTableHtml += '                <td>'+lostAmount.toFixed(2)+'</td>';
        chartTableHtml += '                <td>'+totalOrderAmount.toFixed(2)+'</td>';
        chartTableHtml += '                <td>'+(totalOrderAmount == 0 ? 100 : (lostAmount/totalOrderAmount)*100).toFixed(2)+'%</td>';
        chartTableHtml += '            </tr>';
    });
    
    chartTableHtml += '            <tr class="z-bold">';
    chartTableHtml += '                <td>总计</td>';
    chartTableHtml += '                <td>'+allCount+'</td>';
    chartTableHtml += '                <td>'+(allCount != 0 ? '100%' : 0)+'</td>';
    chartTableHtml += '                <td>'+allLostAmount.toFixed(2)+'</td>';
    chartTableHtml += '                <td>'+allOrderAmount.toFixed(2)+'</td>';
    chartTableHtml += '                <td>'+(allOrderAmount == 0 ? 0 : (allLostAmount/allOrderAmount)*100).toFixed(2)+'%</td>';
    chartTableHtml += '            </tr>';
    chartTableHtml += '       </table>';
    
    Z("#chartTable_panal").htmlc(chartTableHtml)
}

//显示原因详情列表
function doShowDetailList(reason)
{
    var afterModule = dataMap.get(reason);
    var detailList = afterModule.afterDetail ? afterModule.afterDetail : [];
    if (detailList .length == 0)
        return;
        
        
    detailList.sort(function (a, b){
        a.afterCount = Z.V.isInteger(a.afterCount) ? a.afterCount : 0;
        b.afterCount = Z.V.isInteger(b.afterCount) ? b.afterCount : 0;
        
        a.lostAmount = Z.V.isFloat(a.lostAmount) ? a.lostAmount : 0;
        b.lostAmount = Z.V.isFloat(b.lostAmount) ? b.lostAmount : 0;
        
        var result1 = a.afterCount - b.afterCount;
        var result2 = a.lostAmount - b.lostAmount;
        return result2 != 0 ? result2 : result1;
    });
    detailList.sort();
    detailList.reverse();
    
    
    var detailHtml = '';
    
    var commNorecod = '';
    commNorecod += '<tr valign="middle" class="z-h40 z-text-center z-bg-white">';
    commNorecod += '    <td colspan="20">暂无数据信息</td>';
    commNorecod += '</tr>';
    var commThead = ''
    commThead += '<tr class="z-h40 z-text-center z-bg-gray">';
    commThead += '    <td width="90">售后单号</td>';
    commThead += '    <td width="90">设计单号</td>';
    commThead += '    <td width="90">处理状态</td>';
    commThead += '    <td width="100">损失金额</td>';
    commThead += '    <td width="100">设计师</td>';
    commThead += '    <td width="100">店铺</td>';
    commThead += '    <td width="100">旺旺号</td>';
    commThead += '    <td width="*">产品</td>';
    commThead += '    <td width="90">订单金额</td>';
    commThead += '    <td width="90">售后创建时间</td>';
    commThead += '    <td width="90">联系人</td>';
    commThead += '    <td width="100">联系电话</td>';
    commThead += '</tr>';
    
    detailHtml += '<div class="z-overflow-y-auto" style="max-height:750px">';
    detailHtml += '<table class="z-table z-bordered z-bg-white z-text-center">';
    detailHtml += commThead;
    
    if (detailList.length > 0)
    {
        Z.each(detailList, function(item, i)
        {
            detailHtml += '<tr align="center" class="z-h40 z-pointer"  bgcolor="'+(i%2 != 0 ? '#f3fdfc' : '#ffffff')+'"> ';
            detailHtml += '    <td>'+item.designAfsId+'</td>';
            detailHtml += '    <td>'+item.designId+'</td>';
            detailHtml += '    <td>'+getAfterStatusHtml(item.afterStatus)+'</td>';
            detailHtml += '    <td>'+(item.lossAmount ? item.lossAmount : 0).toFixed(2)+'</td>';
            detailHtml += '    <td>'+item.designer+'</td>';
            detailHtml += '    <td>'+(item.shopNick ? item.shopNick : '')+'</td>';
            detailHtml += '    <td>'+(item.buyerNick ? item.buyerNick : '')+'</td>';
            detailHtml += '    <td>'+(item.orderText ? item.orderText : '')+'</td>';
            detailHtml += '    <td>'+parseFloat((item.amount ? Z.Amounts.toYuanMustRadix(''+item.amount) : 0)).toFixed(2)+'</td>';
            detailHtml += '    <td>'+(item.afterFinishTime ? item.afterCreateTime : '')+'</td>';
            detailHtml += '    <td>'+(item.userContact ? item.userContact : '')+'</td>';
            detailHtml += '    <td>'+(item.userMobile ? item.userMobile : '')+'</td>';
            detailHtml += '</tr>';
        });
        
        detailHtml += '<tr valign="middle" class="z-h40 z-text-right z-bg-white">';
        detailHtml += '    <td colspan="15">共&nbsp;<span class="z-text-red">'+detailList.length+'</span>&nbsp;条数据&nbsp;&nbsp;</td>';
        detailHtml += '</tr>';
    }
    else
        detailHtml += commNorecod;
    detailHtml += ' </table>';
    detailHtml += '</div>'
    detailHtml += '</table>';
    detailHtml += '</div>';
    
    var title ='<span class="zi-text-red zi-bold">['+getProblemName(afterModule.afterBlamer)+']</span>售后订单详情统';
    if (Z("#detailHtml").length == 0)
        Z.dialog({id:'detailDialog',title: '<span id="detailDialogTile"><span>',  text: '<div id="detailHtml"></div>', width:1300, height:780, shadow:true})
    Z("#detailDialogTile").htmlc(title); 
    Z("#detailHtml").htmlc(detailHtml); 
}


function getAfterStatusHtml(status)
{//获取售后状态
    <#for item : AfterConstants.getStatusList()>
        if (''+status == ''+'${item.value()}')
        {
            var status${item_index} = "${AfterConstants.statusHtml(item.value())}";
            return status${item_index};
        }
    </#for>
    
    return '';
}


</script>
${zhiqim_manager_breadcrumb("售后统计")}
${zhiqim_manager_content()}
<#-- 导航栏 -->
<div class="z-tabnav-main z-blue z-mg-b20">
<nav>
<ul>
   
    <#if ZmrPathRule.check(request, "/designAfterStatistics.htm")><li onclick="Z.L.href('designAfterStatistics.htm')">售后订单统计</li></#if>
    <li class="z-active">售后原因统计</li>
     <!--<li onclick="Z.Location.href('personalAfterStatistics.htm');">个人售后统计</li>
    <#if ZmrPathRule.check(request, "/designAfterCreateStatistics.htm")><li onclick="Z.L.href('designAfterCreateStatistics.htm')">售后创建统计</li></#if>
    <#if ZmrPathRule.check(request, "/designAfterOrgStatistics.htm")><li onclick="Z.L.href('designAfterOrgStatistics.htm')">售后组织统计</li></#if>-->
</ul>
</nav>
</div>

<#-- 查询条件 -->
${zhiqim_manager_title("查询条件")}
<form name="theForm">
<table class="z-table z-bordered z-pd6">
<tr class="z-h40 z-bg-white">
    <td>售后日期：
        <input name="beginDate" class="z-input z-w100 ${zmr_color_class}" readonly="true" onfocus="Z.date(this);" value="${beginDate}">&nbsp;-
        <input name="endDate" class="z-input z-w100 ${zmr_color_class}" readonly="true" onfocus="Z.date(this);" value="${endDate}">
        <button type="button" class="z-mg-l10 z-button ${zmr_color_class}" onclick="this.form.action='#?t='+ new Date().getTime();this.form.submit()">查询</button>
    </td>
</tr>
</table>
</form>
<br>

<#-- 分页列表-->
<table class="z-table z-bordered z-pd6 z-bg-white">
<tr>
    <td width="52%"><div id="container" class="z-bg-white" style="min-width:400px;height:600px"></div></td>
    <td width="*" valign="top">
        <div id="chartTable_panal" class="z-overflow-y-auto" style="max-height:750px">
            <table class="z-table z-bordered-line z-pd10 z-bg-white z-text-left">
                <tr class="z-bg-gray">
                    <td width="200">售后原因</td>
                    <td width="80">单量</td>
                    <td width="100">单量占比</td>
                    <td width="80">损失金额</td>
                    <td width="80">订单金额</td>
                    <td width="*">损失&订单金额占比</td>
                </tr>
                <tr class="z-bold">
                    <td>总计</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
            </table>
        </div>
    </td>
</tr>
</table>
${zhiqim_manager_content_end()}