<?xml version="1.0" encoding="UTF-8"?>
<!--
$Author:wjw
$Date: 2018/8/2
$Revision: 1.0
4.客户数量统计
-->
<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>-->
<script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/raphael-2.0.2.min.js"></script>
<script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/morris.js"></script>
<script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/morris-init.js"></script>
<style>
html,body{
width:240px;
height:491px;
margin: 0;
padding: 0;
color:#000;
}
.widget_bp_master_count{
width:240px;
height:491px;
background-color:#fff;
position:relative;
/*border:1px solid #F0F0F3;*/
cursor:default;
}
.widget_bp_master_count .clearFloat{
clear:both;
height:0;
line-height:0;
font-size:0
}
.widget_bp_master_count .header{
position:relative;
width:100%;
height:47px;
/*border-bottom:1px solid #F0F0F3;*/
}
.widget_bp_master_count .header .widget_label{
position:absolute;
width:28px;
height:4px;
margin-top: 40px;
left:20px;
background-color:#5A7FFF;
}
.widget_bp_master_count .header .title{
position:absolute;
top:19px;
left:20px;
/*width: 97px;*/
height: 14px;
font-family: NotoSansHans-Medium;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #333333;
}
.widget_bp_master_count .body{
width:100%;
height:406px;
text-align:center;
}
.widget_bp_master_count .body .row1{
display: inline-block;
margin-top:16px;
width: 50%;
color: rgba(75,80,90,0.75);
letter-spacing: 0;
font-family: NotoSansHans-Light;
font-size: 10px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #333333;
}
.widget_bp_master_count .body .row1 .row1-child{
display: inline-block;
width: 9px;
height: 9px;
background-color: #7d7d7d;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-right: 5px;
}
.widget_bp_master_count .body .row1 #bpMasterCount{
font-family: NotoSansHans-Bold;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #333333;
}
.widget_bp_master_count .body .row1 #bpMonthCount{
font-family: NotoSansHans-Bold;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #333333;
}
.widget_bp_master_count .body .row1 #contMonthCount{
font-family: Baskerville-SemiBoldItalic;
font-size: 12px;
color: #4866CC;
letter-spacing: 0;
text-align: left;
font-style:italic;
}
.widget_bp_master_count .body #contPie{
width: 153px;;
height:157px;
/*margin:10px auto 0 auto;*/
margin-left: 29px;
text-align:center;
}
.widget_bp_master_count .body .row3{
margin-top:20px;
}
.widget_bp_master_count .body .row3 .contInfoRow{
margin-bottom:9px;
}
.widget_bp_master_count .body .row3 .contInfoRow i{
line-height: 16px;
position:relative;
top:-2px;
}
.widget_bp_master_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 76px 0 7px;
}
.widget_bp_master_count .body .row3 .contInfoRow .item+span{
color:#D9D9D9;
}
.widget_bp_master_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_bp_master_count .body .row3 .contInfoRow .count{
font-family: HelveticaNeue;
font-size: 12px;
color: rgba(0,0,0,0.65);
line-height: 16px;
}
.widget_bp_master_count i{
display:inline-block;
width:10px;
height: 10px;
margin-right:3px;
/*border-radius: 100%;*/
}
</style>
<script><![CDATA[
function bpMasterCountLoader(ds){
var records=ds.data;
var donutData=[];
var colors=['#7386FF','#5A7FFF','#A5BAFF','#4866CC'];
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){
donutData.push({
label:i.data.category,
value:i.data.count,
});
});
}
var html='';
var j=-1;
donutData.forEach(function(i){
//colors.push(i.color);
var colors=[{value:'#7386FF'},{value:'#5A7FFF'},{value:'#A5BAFF'},{value:'#4866CC'},{value:'#4866CC'}];
j=j+1;
html+='<li class="contInfoRow"><i style="background-color:'+colors[j].value+'"></i>';
html+='<span class="item">'+i.label+'</span>';
html+='<span class="count">'+i.value +'</span></li>';
});
jQuery("#contTable").html(html);
// 关闭 G2 的体验改进计划打点请求
Morris.Donut({
element: 'contPie',
data:donutData,
colors:colors
});
}
function bpMasterSum(ds){
var total=ds.data[0].data['total'];
var this_month_total=ds.data[0].data['this_month_total'];
jQuery("#bpMasterCount").text(total);
jQuery("#bpMonthCount").text(this_month_total);
}
]]></script>
<a:dataSets>
<a:dataSet id="bp_master_count_ds" autoQuery="true" model="bp.bp_category_count">
<a:fields>
<a:field name="category"/>
<a:field name="count"/>
</a:fields>
<a:events>
<a:event name="load" handler="bpMasterCountLoader"/>
</a:events>
</a:dataSet>
<a:dataSet id="bp_master_sum_ds" autoQuery="true" model="bp.bp_total_count">
<a:fields>
<a:field name="total"/>
<a:field name="this_month_total"/>
</a:fields>
<a:events>
<a:event name="load" handler="bpMasterSum"/>
</a:events>
</a:dataSet>
</a:dataSets>
<div class="widget_bp_master_count">
<div class="header">
<span class="widget_label"> </span>
<span class="title">客户数量统计图</span>
</div>
<div class="body">
<div class="row2" id="contPie"> </div>
<div class="row1">
<div class="row1-child"></div>
<span>客户总计：</span>
<span id="bpMasterCount"> </span>
</div>
<div class="row1">
<div class="row1-child"></div>
<span>本月新增：</span>
<span id="bpMonthCount"> </span>
</div>
<ul class="row3" id="contTable">
</ul>
</div>
</div>
<a:screenBody style="display:none"> </a:screenBody>
</a:view>
</a:screen>