<?xml version="1.0" encoding="UTF-8"?> <!-- 微件-项目资金流动情况-美元 widget_cont_cf_usd --> <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:264px; height:456px; margin: 0; padding: 0; color:#000; } .widget_cont_cf_usd{ box-sizing:border-box; width:264px; height:456px; background-color:#fff; position:relative; border:1px solid #F0F0F3; cursor:default; } .widget_cont_cf_usd .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color:#5A7FFF; } .widget_cont_cf_usd .icon{ height:16px; margin-right:8px; } .widget_cont_cf_usd .row1{ width:100%; height:20px; line-height:20px; padding:16px 0 8px 16px; border-bottom:1px solid #F0F0F3; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75,80,90,0.85); } .widget_cont_cf_usd .row2{ box-sizing:border-box; width:100%; height:133px; padding:0 32px 0 32px; border-bottom:1px solid #F0F0F3; } .widget_cont_cf_usd .row2 .title{ position:relative; margin:8px 0 16px 0; height:17px; line-height:17px; font-family: PingFangSC-Medium; font-size: 12px; color: #535D7F; } .widget_cont_cf_usd .row2 .title .icon{ position:relative; top:4px; } .widget_cont_cf_usd .list{ height:20px; margin-bottom:8px; } .widget_cont_cf_usd .list .left{ display:inline-block; width:68px; height:20px; line-height:20px; border-right:1px solid #F0F0F3; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); } .widget_cont_cf_usd .list .right{ display:inline-block; height:20px; margin-left:30px; line-height:20px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); } .widget_cont_cf_usd .row3{ box-sizing:border-box; width:100%; height:112px; padding:16px 32px 0 32px; border-bottom:1px solid #F0F0F3; } .widget_cont_cf_usd .row3 #overdue_per{ background: rgba(90,127,255,0.20); border-radius: 2px; padding: 0 10px; font-family: PingFangSC-Regular; font-size: 12px; color:#5A7FFF; } .widget_cont_cf_usd .row4{ box-sizing:border-box; width:100%; height:156px; padding:0 0 0 32px; } .widget_cont_cf_usd .row4 .left{ box-sizing:border-box; height:100%; float:left; padding-top:32px; } .widget_cont_cf_usd .row4 .left p{ font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); line-height: 20px; margin:0; } .widget_cont_cf_usd .row4 .left p:nth-child(2){ margin-bottom:8px; } .widget_cont_cf_usd .row4 .right{ box-sizing:border-box; height:100%; float:left; width:164px; height:156px; text-align:center; } .widget_cont_cf_usd .row4 .clearFloat{ clear:both; height:0; line-height:0; font-size:0 } </style> <script><![CDATA[ function cont_cf_usd_loader(ds){ var record=ds.data[0], contract_count=record.data["contract_count"], contract_amount=record.data["contract_amount"], overdue_amount=record.data["overdue_amount"], pay_amount=record.data["pay_amount"], rec_amount=record.data["rec_amount"]; overdue_amount=1000; var overdue_per = contract_amount == 0 ? '0.00%' : Math.round(overdue_amount/contract_amount*10000)/100+'%'; var rec_pay_per = pay_amount == 0 ? '0.00%' : Math.round(rec_amount/pay_amount*10000)/100+'%'; jQuery(".widget_cont_cf_usd #contract_count").text(contract_count); jQuery(".widget_cont_cf_usd #contract_amount").text(contract_amount); jQuery(".widget_cont_cf_usd #overdue_amount").text(overdue_amount); jQuery(".widget_cont_cf_usd #overdue_per").text(overdue_per); jQuery(".widget_cont_cf_usd #pay_amount").text(pay_amount); jQuery(".widget_cont_cf_usd #rec_amount").text(rec_amount); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var chart = new G2.Chart({ container: 'pay_rec_pie', width:164, height:156, animate: false, padding:10 }); chart.source([{ item:'投放金额', amount:pay_amount },{ item:'回笼金额', amount:rec_amount }]); chart.coord('theta', { radius: 0.75, innerRadius: 0.72 }); chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); chart.guide().html({ position: ['50%', '50%'], html: '<div style="font-family: Baskerville;font-size: 14px;color: rgba(75,80,90,0.85);text-align:center;width: 10em;">' + rec_pay_per + '</div>', alignX: 'middle', alignY: 'middle' }); chart.legend(false); var interval = chart.intervalStack() .position('amount') .color('item',['#5A7FFF','#F0F2F5']) .tooltip('item*amount', function(item, amount) { return { name: item, value: amount }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.render(); } ]]></script> <a:dataSets> <a:dataSet id="cont_cf_usd_ds" autoQuery="true" pageSize="5" model="cont.CON1003.cont_cf_usd" > <a:fields> <a:field name="contract_count"/> <a:field name="contract_amount"/> <a:field name="overdue_amount"/> <a:field name="pay_amount"/> <a:field name="rec_amount"/> </a:fields> <a:events> <a:event name="load" handler="cont_cf_usd_loader"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_cont_cf_usd"> <span class="widget_label"> </span> <div class="row1">项目资金流动情况</div> <div class="row2"> <div class="title"> <img src="${/request/@context_path}/leafresource/images/widget/usd.png" class="icon"/> <span>美元($)</span> </div> <div class="list"> <span class="left">项目总数</span> <span class="right" id="contract_count"> </span> </div> <div class="list"> <span class="left">双名单</span> <span class="right" > </span> </div> <div class="list"> <span class="left">转化率</span> <span class="right" > </span> </div> </div> <div class="row3"> <div class="list"> <span class="left">未收金额</span> <span class="right" id="contract_amount"> </span> </div> <div class="list"> <span class="left">逾期金额</span> <span class="right" id="overdue_amount"> </span> </div> <div class="list"> <span class="left">逾期比例</span> <span class="right" id="overdue_per"> </span> </div> </div> <div class="row4"> <div class="left"> <p>投放金额</p> <p id="pay_amount"></p> <p>回笼金额</p> <p id="rec_amount"></p> </div> <div class="right" id="pay_rec_pie"> </div> <div class="clearFloat"> </div> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>