<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 CSH 年度回款/放款金额 按统计 --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <!--单独微件测试用--> <!--<meta name="_csrf" content="${/session/@_csrf.token}"/> <meta name="_csrf_header" content="X-CSRF-TOKEN" /> <script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>--> <style> html,body{ width:840px; height:456px; margin: 0; padding: 0; } .widget_csh_count_line{ box-sizing:border-box; width:840px; height:456px; background-color:#fff; position:relative; border:1px solid #F0F0F3; padding:0 88px 0 16px; user-select:none; cursor:default; } .widget_csh_count_line .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color:#5A7FFF; } .widget_csh_count_line .row1{ position:relative; height:20px; margin:16px 0 0 0; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75,80,90,0.85); letter-spacing: 0; line-height: 20px; } .widget_csh_count_line .row2{ display:inline-block; position:relative; height:24px; margin:8px 0 0 0; font-family: PingFangSC-Regular; font-size: 12px; color: #5A7FFF; letter-spacing: 0; } .widget_csh_count_line .row2 span{ display:inline-block; width:64px; height:24px; line-height:24px; font-family: PingFangSC-Regular; font-size: 12px; letter-spacing: 0; text-align: center; cursor:pointer; } .widget_csh_count_line .row2 input{ display:none; } .widget_csh_count_line .row2 #widget_csh_count_line_payment{ border-radius: 4px 0 0 4px; border: 1px solid #5A7FFF; color: #5A7FFF; } .widget_csh_count_line .row2 #widget_csh_count_line_receipt{ border-radius:0 4px 4px 0; position:relative; left:-1px; border: 1px solid rgba(75,80,90,0.15); color: rgba(75,80,90,0.75); } .widget_csh_count_line .row2 input:checked~#widget_csh_count_line_payment { border-color:rgba(75,80,90,0.15); color:rgba(75,80,90,0.75); } .widget_csh_count_line .row2 input:checked~#widget_csh_count_line_receipt{ border: 1px solid #5A7FFF; color: #5A7FFF; } .widget_csh_count_line .row3{ position:relative; box-sizing:border-box; margin:16px 0 55px 0; width:100%; height:314px; border-top:1px solid #F0F0F3; padding-top:28px; } .widget_csh_count_line .row3 .tooltip{ height:34px; } .widget_csh_count_line .row3 .tooltip div{ height:17px; line-height:17px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(75,80,90,0.85); 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_csh_count_line #widget_csh_count_line_transaction_type").on('change',function(e){ //checked==true 对应 transaction_type=receipt //checked==false 对应 transaction_type=payment if(e.target.checked==true){ jQuery(".widget_csh_count_line .row1").text("本年回笼金额"); //切换数据源 widget_csh_count_line_chart.changeData(payData); }else{ jQuery(".widget_csh_count_line .row1").text("本年投放金额"); //切换数据源 widget_csh_count_line_chart.changeData(recData); } }); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var widget_csh_count_line_chart = new G2.Chart({ container: 'cshLineChart', forceFit: false, width:718, height: 300, padding:'auto' }); widget_csh_count_line_chart.tooltip({ showTitle: true, crosshairs: { type: 'line' } <!--,--> <!--containerTpl: '<div class="g2-tooltip">'--> <!--+ '<div class="g2-tooltip-title" style="margin:10px 0;">{title}</div>'--> <!--+ '<ul class="g2-tooltip-list"></ul></div>',--> <!--itemTpl: function(name,value){--> <!--console.log(name);--> <!--return '<li>{name}kkk{value}</li>'--> <!--}()--> }); widget_csh_count_line_chart.axis('amount', { label: { formatter: function formatter(val) { return $L.formatMoney(val,2); } } }); widget_csh_count_line_chart.axis('time',{ label:{ formatter:function(text,item,index){ return text.substring(text.indexOf("年")+1); } } }); widget_csh_count_line_chart.source(recData); widget_csh_count_line_chart.line() .position(['time','amount']) .color('currency',['#5A7FFF','#FFD95B']) .size(2) .tooltip('month*amount*year*currency',function(month,amount,year,currency){ amount=$L.formatMoney(amount,2); return { title:year+'年'+month+'月', name:currency, value:amount } }); widget_csh_count_line_chart.point() .position(['time','amount']) .color('currency',['#5A7FFF','#FFD95B']) .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_csh_count_line_chart.render(); } ]]></script> <a:dataSets> <a:dataSet id="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_csh_count_line"> <span class="widget_label"> </span> <div class="row1">本年投放金额</div> <label class="row2" for="widget_csh_count_line_transaction_type"> <!--用:check伪类做toggle tab的状态类转换,checked表示transaction_type=payment--> <input type="checkbox" id="widget_csh_count_line_transaction_type"/> <span id="widget_csh_count_line_payment">投放金额</span> <span id="widget_csh_count_line_receipt">回笼金额</span> </label> <div class="row3" id="cshLineChart"> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>