<?xml version="1.0" encoding="UTF-8"?> <!-- 微件-项目资金流动情况 --> <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:240px; height:552px; margin: 0; padding: 0; color:#000; } .widget_prj_funds_flow{ box-sizing:border-box; width:240px; height:552px; background-color:#fff; position:relative; border:1px solid #F0F0F3; cursor:default; } .widget_prj_funds_flow .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color: #FFD95B; } .widget_prj_funds_flow .icon{ height:16px; margin-right:8px; position: relative; top: 4px; } .widget_prj_funds_flow .row1{ /*width:100%;*/ padding:15px 0 14px 16px; /*border-bottom:1px solid #F0F0F3;*/ font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75,80,90,0.85); } .widget_prj_funds_flow .row2{ box-sizing:border-box; width:90%; margin-left: 5%; /*height:133px;*/ /*padding:0 32px 0 32px;*/ border-bottom:1px solid #F0F0F3; } .widget_prj_funds_flow .row2 .title{ position:relative; margin:8px 0 16px 0; height:17px; line-height:17px; font-family: PingFangSC-Medium; font-size: 12px; color: #535D7F; } .widget_prj_funds_flow .row2 .title .icon{ position:relative; top:4px; } .widget_prj_funds_flow .list{ /*height:20px;*/ margin-bottom:8px; } .widget_prj_funds_flow .list div{ /*height:20px;*/ /*margin-bottom:8px;*/ width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 10px; } .widget_prj_funds_flow .list:first-child{ /*height:20px;*/ /*margin-bottom:8px;*/ margin-top: 26px; } .widget_prj_funds_flow .list:last-child{ /*height:20px;*/ /*margin-bottom:8px;*/ margin-bottom: 22px; } .widget_prj_funds_flow .list .left{ display:inline-block; width:68px; border-right:1px solid #ccc; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); } .widget_prj_funds_flow .list .right{ display:inline-block; margin-left:30px; line-height:20px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); } .widget_prj_funds_flow .row3{ box-sizing:border-box; width:90%; margin-left: 5%; /*height:112px;*/ /*padding:0px 32px 0 32px;*/ /*border-bottom:1px solid #F0F0F3;*/ } .widget_prj_funds_flow .row3 #leaf_overdue_per{ /*background: rgba(255,217,91,0.20);*/ border-radius: 2px; /*padding: 0 10px;*/ font-family: PingFangSC-Regular; font-size: 12px; /*color: #CC8134;*/ } .widget_prj_funds_flow .row4{ box-sizing:border-box; width:100%; height:156px; padding:0 0 0 32px; } .widget_prj_funds_flow .row4 .left{ box-sizing:border-box; height:100%; float:left; padding-top:32px; } .widget_prj_funds_flow .row4 .left p{ font-family: PingFangSC-Regular; font-size: 12px; color: rgba(0,0,0,0.65); line-height: 20px; margin:0; } .widget_prj_funds_flow .row4 .left p:nth-child(2){ margin-bottom:8px; } .widget_prj_funds_flow .row4 .right{ box-sizing:border-box; height:100%; float:left; width:164px; height:156px; text-align:center; } .widget_prj_funds_flow .row4 .clearFloat{ clear:both; height:0; line-height:0; font-size:0 } .widget_prj_funds_flow .row5{ } .widget_prj_funds_flow .row5 .row5-child{ display: inline-block; text-align: center; width: 98px; height: 23px; line-height: 23px; border: solid 1px #eeeeee; cursor: pointer; } .widget_prj_funds_flow .row5 .row5-child:first-child{ margin-left: 12px; border-right: 0px; } /*.widget_prj_funds_flow .row5 .row5-child:last-child{*/ /*!*margin-left: 12px;*!*/ /*border-left: 0px;*/ /*}*/ .widget_prj_funds_flow .row6 .row5-pie-desc{ width: 90%; margin-left: 5%; padding-bottom: 14px; } .widget_prj_funds_flow .row6 .row5-pie-desc:last-child{ border-bottom: 1px solid #ccc; padding-bottom: 19px; } .widget_prj_funds_flow .row6 .row5-pie-desc p{ display: inline-block; padding: 0px; margin: 0px; } .widget_prj_funds_flow .row6 .row5-pie-desc div:first-child{ width: 8px; height: 8px; border-radius: 50%; background: #85a8e0; display: inline-block; margin-right: 10px; } </style> <script><![CDATA[ function leaf_cont_cf_cny_loader(ds){ var record=ds.data[0], leaf_contract_count=record.data["contract_count"], leaf_contract_amount=record.data["contract_amount"], leaf_overdue_amount=record.data["overdue_amount"], leaf_pay_amount=record.data["pay_amount"], leaf_rec_amount=record.data["rec_amount"]; leaf_overdue_amount=1000; var leaf_overdue_per = leaf_contract_amount == 0 ? '0.00%' : Math.round(leaf_overdue_amount/leaf_contract_amount*10000)/100+'%'; var leaf_pay_per = leaf_pay_amount == 0 ? '0.00%' : Math.round(leaf_pay_amount/(leaf_pay_amount+leaf_rec_amount)*10000)/100+'%'; jQuery(".widget_prj_funds_flow #leaf_contract_count").text(leaf_contract_count); jQuery(".widget_prj_funds_flow #leaf_contract_amount").text(leaf_contract_amount); jQuery(".widget_prj_funds_flow #leaf_overdue_amount").text(leaf_overdue_amount); jQuery(".widget_prj_funds_flow #leaf_overdue_per").text(leaf_overdue_per); jQuery(".widget_prj_funds_flow #leaf_pay_amount").text("¥"+leaf_pay_amount); jQuery(".widget_prj_funds_flow #leaf_rec_amount").text("¥"+leaf_rec_amount); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var chart = new G2.Chart({ container: 'leaf_pay_rec_cny_pic', width:164, height:156, animate: false, padding:10 }); chart.source([{ item:'投放金额', amount:leaf_pay_amount },{ item:'回笼金额', amount:leaf_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;">' + leaf_pay_per + '</div>', alignX: 'middle', alignY: 'middle' }); chart.legend(false); var interval = chart.intervalStack() .position('amount') .color('item',['#85a8e0','#f8cc64']) .tooltip('item*amount', function(item, amount) { return { name: item, value: amount }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.render(); } function leaf_cont_cf_usd_loader(ds){ var record=ds.data[0], leaf_contract_count=record.data["contract_count"], leaf_contract_amount=record.data["contract_amount"], leaf_overdue_amount=record.data["overdue_amount"], leaf_pay_amount=record.data["pay_amount"], leaf_rec_amount=record.data["rec_amount"]; overdue_amount=1000; var overdue_per = leaf_contract_amount == 0 ? '0.00%' : Math.round(leaf_overdue_amount/leaf_contract_amount*10000)/100+'%'; var rec_pay_per = leaf_pay_amount == 0 ? '0.00%' : Math.round(leaf_rec_amount/leaf_pay_amount*10000)/100+'%'; jQuery(".widget_prj_funds_flow #leaf_usd_contract_count").text(leaf_contract_count); jQuery(".widget_prj_funds_flow #leaf_usd_contract_amount").text(leaf_contract_amount); jQuery(".widget_prj_funds_flow #leaf_usd_overdue_amount").text(leaf_overdue_amount); jQuery(".widget_prj_funds_flow #leaf_usd_overdue_per").text(overdue_per); jQuery(".widget_prj_funds_flow #leaf_usd_pay_amount").text("$"+leaf_pay_amount); jQuery(".widget_prj_funds_flow #leaf_usd_rec_amount").text("$"+leaf_rec_amount); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var chart = new G2.Chart({ container: 'leaf_pay_rec_usd_pic', width:164, height:156, animate: false, padding:10 }); chart.source([{ item:'投放金额', amount:leaf_pay_amount },{ item:'回笼金额', amount:leaf_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',['#85a8e0','#F0F2F5']) .tooltip('item*amount', function(item, amount) { return { name: item, value: amount }; }).style({ lineWidth: 1, stroke: '#fff' }); chart.render(); } function leaf_cny(){ document.getElementById('leaf-show-cny').style.display='block' document.getElementById('leaf-show-usd').style.display='none' document.getElementById("leaf_cny_img").src='${/request/@context_path}/leafresource/images/widget/choose-cny@2x.png' document.getElementById("leaf_usd_img").src='${/request/@context_path}/leafresource/images/widget/usd@2x.png' jQuery(".leaf-cny").css("color","#657efe") jQuery(".leaf-usd").css("color","#999999") }; function leaf_usd(){ document.getElementById('leaf-show-cny').style.display='none' document.getElementById('leaf-show-usd').style.display='block' document.getElementById("leaf_cny_img").src='${/request/@context_path}/leafresource/images/widget/cny@2x.png' document.getElementById("leaf_usd_img").src='${/request/@context_path}/leafresource/images/widget/choose-usd@2x.png' jQuery(".leaf-cny").css("color","#999999") jQuery(".leaf-usd").css("color","#657efe") }; ]]></script> <a:dataSets> <a:dataSet id="leaf_funds_flow_ds" autoQuery="true" pageSize="5" model="cont.CON1003.cont_cf_cny" > <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="leaf_cont_cf_cny_loader"/> </a:events> </a:dataSet> <a:dataSet id="leaf_funds_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="leaf_cont_cf_usd_loader"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_prj_funds_flow"> <!--<span class="widget_label"> </span>--> <div class="row1">项目资金流动情况</div> <div class="row5"> <div class="row5-child" onclick="leaf_cny()"> <img id="leaf_cny_img" src="${/request/@context_path}/leafresource/images/widget/choose-cny@2x.png" class="icon"/> <span style="color: #657efe" class="leaf-cny">人民币(¥)</span> </div> <div style="display: inline-block;position: relative;width: 2px;height: 14px;background: #333333;top: 4px;"></div> <div class="row5-child" onclick="leaf_usd()" style="border-left: 0px"> <img id="leaf_usd_img" src="${/request/@context_path}/leafresource/images/widget/usd@2x.png" class="icon"/> <span style="color: #999999" class="leaf-usd">美元($)</span> </div> </div> <div id="leaf-show-cny"> <div class="row6"> <div class="right" id="leaf_pay_rec_cny_pic"> </div> <div class="row5-pie-desc"> <div></div> <p style="margin-right: 30px;">投放金额</p> <p id="leaf_pay_amount"></p> </div> <div class="row5-pie-desc"> <div style="background: #f8cc64"></div> <p style="margin-right: 30px;">回笼金额</p> <p id="leaf_rec_amount"></p> </div> </div> <div class="row2"> <div class="list"> <div style="background: #7d7d7d"></div> <span class="left">项目总数</span> <span class="right" id="leaf_contract_count"> </span> </div> <div class="list"> <div></div> <span class="left">双名单</span> <span class="right" > </span> </div> <div class="list"> <div></div> <span class="left">转化率</span> <span class="right" > </span> </div> </div> <div class="row3"> <div class="list"> <div style="background: #7d7d7d"></div> <span class="left">未收金额</span> <span class="right" id="leaf_contract_amount"> </span> </div> <div class="list"> <div></div> <span class="left">逾期金额</span> <span class="right" id="leaf_overdue_amount"> </span> </div> <div class="list"> <div></div> <span class="left">逾期比例</span> <span class="right" id="leaf_overdue_per"> </span> </div> </div> </div> <div id="leaf-show-usd" style="display: none"> <div class="row6"> <div class="right" id="leaf_pay_rec_usd_pic"> </div> <div class="row5-pie-desc"> <div></div> <p style="margin-right: 30px;">投放金额</p> <p id="leaf_usd_pay_amount"></p> </div> <div class="row5-pie-desc"> <div style="background: #f8cc64"></div> <p style="margin-right: 30px;">回笼金额</p> <p id="leaf_usd_rec_amount"></p> </div> </div> <div class="row2"> <div class="list"> <div style="background: #7d7d7d"></div> <span class="left">项目总数</span> <span class="right" id="leaf_usd_contract_count"> </span> </div> <div class="list"> <div></div> <span class="left">双名单</span> <span class="right" > </span> </div> <div class="list"> <div></div> <span class="left">转化率</span> <span class="right" > </span> </div> </div> <div class="row3"> <div class="list"> <div style="background: #7d7d7d"></div> <span class="left">未收金额</span> <span class="right" id="leaf_usd_contract_amount"> </span> </div> <div class="list"> <div></div> <span class="left">逾期金额</span> <span class="right" id="leaf_usd_overdue_amount"> </span> </div> <div class="list"> <div></div> <span class="left">逾期比例</span> <span class="right" id="leaf_usd_overdue_per"> </span> </div> </div> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>