<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 4.CONT统计 --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <style> html,body{ width:264px; height:456px; margin: 0; padding: 0; color:#000; } .widget_cont_count{ width:264px; height:456px; background-color:#fff; position:relative; border:1px solid #F0F0F3; cursor:default; } .widget_cont_count .clearFloat{ clear:both; height:0; line-height:0; font-size:0 } .widget_cont_count .header{ position:relative; width:100%; height:47px; border-bottom:1px solid #F0F0F3; } .widget_cont_count .header .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color:#5A7FFF; } .widget_cont_count .header .title{ position:absolute; top:16px; left:16px; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(93,97,103,0.85); line-height: 22px; } .widget_cont_count .body{ width:100%; height:406px; text-align:center; } .widget_cont_count .body .row1{ margin-top:16px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(75,80,90,0.75); letter-spacing: 0; } .widget_cont_count .body .row1 #contMonthCount{ font-family: Baskerville-SemiBoldItalic; font-size: 12px; color: #4866CC; letter-spacing: 0; text-align: left; font-style:italic; } .widget_cont_count .body #contPie{ width:100%; height:150px; margin:10px auto 0 auto; text-align:center; } .widget_cont_count .body .row3{ margin-top:20px; } .widget_cont_count .body .row3 .contInfoRow{ margin-bottom:9px; } .widget_cont_count .body .row3 .contInfoRow i{ line-height: 16px; position:relative; top:-2px; } .widget_cont_count .body .row3 .contInfoRow .item{ display:inline-block; width:78px; text-align:left; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(0,0,0,0.65); line-height: 16px; margin:0 16px 0 7px; } .widget_cont_count .body .row3 .contInfoRow .item+span{ color:#D9D9D9; } .widget_cont_count .body .row3 .contInfoRow .per{ display:inline-block; width:35px; text-align:right; font-family: HelveticaNeue; font-size: 12px; color: rgba(0,0,0,0.45); line-height: 16px; margin:0 9px 0 0px; } .widget_cont_count .body .row3 .contInfoRow .count{ font-family: HelveticaNeue; font-size: 12px; color: rgba(0,0,0,0.65); line-height: 16px; } .widget_cont_count i{ display:inline-block; width:6px; height: 6px; margin-right:3px; border-radius: 100%; } </style> <script><![CDATA[ function contCountLoader(ds){ var records=ds.data; var chartData=[]; var colors=[]; var cont_count=ds.data[0].data['cont_count']; var cont_month_count=ds.data[0].data['cont_month_count']; jQuery("#contMonthCount").text(cont_month_count); var statusInfo = [ { statusValue: "新建", status: "NEW", color:"#7386FF" }, { statusValue: "签约", status: "SIGN", color:"#5A7FFF" }, { statusValue: "起租", status: "INCEPT", color:"#A5BAFF" }, { statusValue: "正常结清", status: "TERMINATE", color:"#4866CC" }, { statusValue: "提前结清", status: "ET", color:"#FFDA9A" }, { statusValue: "回购", status: "REPUR", color:"#535D7F" }, { statusValue: "取消", status: "CANCEL", color:"#FF8665" } ]; if(records!==null && records.length>0){ records.forEach(function(i){ statusInfo.forEach(function(j){ if(i.data['cont_status']==j.status){ j.value=i.data['cont_status_count']; j.per=i.data['cont_status_per']; } }); }); } var html=''; statusInfo.forEach(function(i){ if(i.value==undefined){ i.value=0; } if(i.per==undefined){ i.per='0%'; } chartData.push({ item:i.statusValue, count:i.value, }); colors.push(i.color); html+='<li class="contInfoRow"><i style="background-color:'+i.color+'"></i>'; html+='<span class="item">'+i.statusValue+'合同</span>'; html+='<span>|</span><span class="per">'+i.per+'</span>'; html+='<span class="count">'+i.value+'</span></li>'; }); jQuery("#contTable").html(html); // 关闭 G2 的体验改进计划打点请求 G2.track(false); var chart = new G2.Chart({ container: 'contPie', animate: false, forceFit: true, width:264, height:160, padding:10 }); chart.source(chartData); chart.coord('theta', { innerRadius: 0.75 }); chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); chart.legend(false); <!--// 辅助文本--> chart.guide().html({ position: ['50%', '50%'], html: '<div style="color:#262626;font-size: 11.73px;text-align: center;width: 10em;line-height:14px;margin-bottom:5px;">合同总数<br><span style="color:rgba(0,0,0,0.85);font-size:17px;font-family:font-family: HelveticaNeue;line-height:20px;display:inline-block;margin-top:5px;">'+records[0].data['cont_count']+'</span></div>', alignX: 'middle', alignY: 'middle' }); var interval=chart.intervalStack() .position('count') .color('item',colors) .style({ lineWidth: 2, stroke: '#fff' }); chart.render(); } ]]></script> <a:dataSets> <a:dataSet id="cont_count_ds" autoQuery="true" model="cont.CON1003.cont_count"> <a:fields> <a:field name="cont_count"/> <a:field name="cont_month_count"/> <a:field name="cont_status"/> <a:field name="cont_status_count"/> <a:field name="cont_status_per"/> </a:fields> <a:events> <a:event name="load" handler="contCountLoader"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_cont_count"> <div class="header"> <span class="widget_label"> </span> <span class="title">合同类别占比</span> </div> <div class="body"> <div class="row1"> <span>本月新增合同:</span> <span id="contMonthCount"> </span> </div> <div class="row2" id="contPie"> </div> <ul class="row3" id="contTable"> </ul> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>