<?xml version="1.0" encoding="UTF-8"?> <!-- $Date: 2018/9/7 CSH 投放金额/回笼金额 WIDGET-LEAF-CSH-COUNT-LINE --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <!--单独微件测试用--> <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>--> <style> html,body{ width:928px; height:553px; margin: 0; padding: 0; } .widget_leaf_csh_count_line{ box-sizing:border-box; width:928px; height:553px; background-color:#fff; position:relative; user-select:none; cursor:default; } .widget_leaf_csh_count_line .chart-img{ width: 39px; padding: 59px 0 0 56px; display: inline-block; } .widget_leaf_csh_count_line .year-pay-loan-money{ font-family: NotoSansHans-Medium; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #333333; display: inline-block; position: absolute; /* position: relative; */ top: 70px; margin-left: 19px; } .widget_leaf_csh_count_line .title{ display:inline-block; position:relative; height:22px; margin:37px 0 0 56px; font-family: NotoSansHans-Thin; letter-spacing: 2px; cursor:pointer; } .widget_leaf_csh_count_line .title .tab_btn{ display:inline-block; height:14px; font-size: 16px; line-height:14px; } .widget_leaf_csh_count_line .title input{ display:none; } .widget_leaf_csh_count_line .title #widget_leaf_csh_count_line_payment{ color: #333333; padding-right:15px; border-right:2px solid #e7e7e7; font-family: NotoSansHans-Medium; } .widget_leaf_csh_count_line .title #widget_leaf_csh_count_line_receipt{ color:#ccc; padding-left:15px; } .widget_leaf_csh_count_line .title .widget_border{ position:absolute; left:0; bottom:0; width:30px; height:4px; background-color: #657efe; transition:0.2s ease; } .widget_leaf_csh_count_line .title input:checked~#widget_leaf_csh_count_line_payment { color:#ccc; } .widget_leaf_csh_count_line .title input:checked~#widget_leaf_csh_count_line_receipt{ color: #333333; font-family: NotoSansHans-Medium; } .widget_leaf_csh_count_line .title input:checked~.widget_border { left:105px; } .widget_leaf_csh_count_line .row2{ position:relative; box-sizing:border-box; margin:45px 0px 0px 56px; height:194px; } .widget_leaf_csh_count_line .row2 .g2-tooltip{ height:65px; min-width:124px; } .widget_leaf_csh_count_line .row2 .g2-tooltip div{ height:17px; line-height:17px; letter-spacing: 0; } </style> <script><![CDATA[ function cshCountLoader(ds){ var records=ds.data, recArr=[], payArr=[], recData=[], payData=[], curDate=new Date(), curYear=curDate.getFullYear(), curMonth=curDate.getMonth()+1; if(records!==null && records.length>0){ records.forEach(function(r){ if(r.data["transaction_type"].toLowerCase()=='receipt'){ recArr[r.data["month"]]=new Array(); if(r.data["currency_code"]=='cny'){ recArr[r.data["month"]][0]=r.data["amount"]; }else if(r.data["currency_code"]=='usd'){ recArr[r.data["month"]][1]=r.data["amount"]; } }else{ payArr[r.data["month"]]=new Array(); if(r.data["currency_code"]=='cny'){ payArr[r.data["month"]][0]=r.data["amount"]; }else if(r.data["currency_code"]=='usd'){ payArr[r.data["month"]][1]=r.data["amount"]; } } }); } //去年月份 for(var i=curMonth+1;i<=12;i++){ if(recArr[i]){ if(recArr[i][0]){ recData.push({ year:curYear-1, month:i, amount:recArr[i][0], currency:'人民币', time:curYear-1+'年'+i+'月' }); }else{ recData.push({ year:curYear-1, month:i, amount:0, currency:'人民币', time:curYear-1+'年'+i+'月' }); } if(recArr[i][1]){ recData.push({ year:curYear-1, month:i, amount:recArr[i][1], currency:'美元', time:curYear-1+'年'+i+'月' }); }else{ recData.push({ year:curYear-1, month:i, amount:0, currency:'美元', time:curYear-1+'年'+i+'月' }); } }else{ recData.push({ year:curYear-1, month:i, amount:0, currency:'人民币', time:curYear-1+'年'+i+'月' }); recData.push({ year:curYear-1, month:i, amount:0, currency:'美元', time:curYear-1+'年'+i+'月' }); }; if(payArr[i]){ if(payArr[i][0]){ payData.push({ year:curYear-1, month:i, amount:payArr[i][0], currency:'人民币', time:curYear-1+'年'+i+'月' }); }else{ payData.push({ year:curYear-1, month:i, amount:0, currency:'人民币', time:curYear-1+'年'+i+'月' }); } if(payArr[i][1]){ payData.push({ year:curYear-1, month:i, amount:payArr[i][1], currency:'美元', time:curYear-1+'年'+i+'月' }); }else{ payData.push({ year:curYear-1, month:i, amount:0, currency:'美元', time:curYear-1+'年'+i+'月' }); } }else{ payData.push({ year:curYear-1, month:i, amount:0, currency:'人民币', time:curYear-1+'年'+i+'月' }); payData.push({ year:curYear-1, month:i, amount:0, currency:'美元', time:curYear-1+'年'+i+'月' }); }; } //今年月份 for(var i=1;i<=curMonth;i++){ if(recArr[i]){ if(recArr[i][0]){ recData.push({ year:curYear, month:i, amount:recArr[i][0], currency:'人民币', time:curYear+'年'+i+'月' }); }else{ recData.push({ year:curYear, month:i, amount:0, currency:'人民币', time:curYear+'年'+i+'月' }); } if(recArr[i][1]){ recData.push({ year:curYear, month:i, amount:recArr[i][1], currency:'美元', time:curYear+'年'+i+'月' }); }else{ recData.push({ year:curYear, month:i, amount:0, currency:'美元', time:curYear+'年'+i+'月' }); } }else{ recData.push({ year:curYear, month:i, amount:0, currency:'人民币', time:curYear+'年'+i+'月' }); recData.push({ year:curYear, month:i, amount:0, currency:'美元', time:curYear+'年'+i+'月' }); }; if(payArr[i]){ if(payArr[i][0]){ payData.push({ year:curYear, month:i, amount:payArr[i][0], currency:'人民币', time:curYear+'年'+i+'月' }); }else{ payData.push({ year:curYear, month:i, amount:0, currency:'人民币', time:curYear+'年'+i+'月' }); } if(payArr[i][1]){ payData.push({ year:curYear, month:i, amount:payArr[i][1], currency:'美元', time:curYear+'年'+i+'月' }); }else{ payData.push({ year:curYear, month:i, amount:0, currency:'美元', time:curYear+'年'+i+'月' }); } }else{ payData.push({ year:curYear, month:i, amount:0, currency:'人民币', time:curYear+'年'+i+'月' }); payData.push({ year:curYear, month:i, amount:0, currency:'美元', time:curYear+'年'+i+'月' }); }; } jQuery(".widget_leaf_csh_count_line #widget_leaf_csh_count_line_tab").on('change',function(e){ //checked==true 对应 receipt //checked==false 对应 payment if(e.target.checked==true){ widget_leaf_csh_count_line_chart.changeData(payData); }else{ widget_leaf_csh_count_line_chart.changeData(recData); } }); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var widget_leaf_csh_count_line_chart = new G2.Chart({ container: 'widget_leaf_csh_count_line_chart', forceFit: false, width:810, height: 303, padding:'auto' }); widget_leaf_csh_count_line_chart.tooltip({ showTitle: true, crosshairs: { type: 'line' } , itemTpl: '<li data-index={index}>' + '<span style="color:{color}">{name} :{value}</span>' + '</li>' }); widget_leaf_csh_count_line_chart.axis('amount', { label: { formatter: function formatter(val) { return $L.formatMoney(val,2); } } }); widget_leaf_csh_count_line_chart.axis('time',{ label:{ formatter:function(text,item,index){ return text.substring(text.indexOf("年")+1); } } }); widget_leaf_csh_count_line_chart.legend('currency',{ itemGap:50 }); widget_leaf_csh_count_line_chart.source(recData); widget_leaf_csh_count_line_chart.line() .position(['time','amount']) .color('currency',['#79c6fa','#ffc53b']) .size(2) .style({ shadowColor:'rgba(0, 0, 0, 0.15)', shadowBlur:7, shadowOffsetX:0, shadowOffsetY:6 }) .tooltip('month*amount*year*currency',function(month,amount,year,currency){ amount=$L.formatMoney(amount,2); return { title:year+'年'+month+'月', name:currency, value:amount } }); widget_leaf_csh_count_line_chart.point() .position(['time','amount']) .color('currency',['#79c6fa','#ffc53b']) .shape('circle') .style({ stroke: '#fff', lineWidth: 1 }) .tooltip('month*amount*year*currency',function(month,amount,year,currency){ amount=$L.formatMoney(amount,2); return { title:year+'年'+month+'月', name:currency, value:amount } }); widget_leaf_csh_count_line_chart.render(); } ]]></script> <a:dataSets> <a:dataSet id="leaf_csh_count_line_ds" autoQuery="true" model="csh.CSH911.csh_count"> <a:fields> <a:field name="year"/> <a:field name="month"/> <a:field name="transaction_type"/> <a:field name="currency_code"/> <a:field name="amount"/> </a:fields> <a:events> <a:event name="load" handler="cshCountLoader"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_leaf_csh_count_line"> <div> <img class="chart-img" src="${/request/@context_path}/leafresource/images/widget/leaf-csh-count-chart.png"/> <div class="year-pay-loan-money">本年投放回笼金额</div> </div> <label class="title" for="widget_leaf_csh_count_line_tab"> <!--用:check伪类做toggle tab的状态类转换,checked对应payment--> <input type="checkbox" id="widget_leaf_csh_count_line_tab"/> <span id="widget_leaf_csh_count_line_payment" class="tab_btn">投放金额</span> <span id="widget_leaf_csh_count_line_receipt" class="tab_btn">回笼金额</span> <span class="widget_border"> </span> </label> <div class="row2" id="widget_leaf_csh_count_line_chart"> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>