<?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>