<?xml version="1.0" encoding="UTF-8"?>
<!--
$Author:wjw
$Date: 2018/9/4
$Revision: 1.0
CSH 回款/放款金额 折线图
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
<a:init-procedure/>
<a:view template="default" package="leaf.ui.std">
<!--Page Related Scripts-->
<!--<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>-->
<!-- Morris.js charts -->
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.8-beta.5/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
<style>
html,body{
width:673px;
height:261px;
margin: 0;
padding: 0;
}
.widget_payback_loan_csh{
box-sizing:border-box;
width:673px;
height:261px;
background-color:#fff;
position:relative;
border:1px solid #F0F0F3;
padding:0 88px 0 33px;
user-select:none;
cursor:default;
}
.widget_payback_loan_csh #payback-money-chart{
width: 610px;
height: 180px;
clear: left;
padding-top: 26px;
}
.widget_payback_loan_csh #loan-money-chart{
width: 610px;
height: 180px;
clear: left;
padding-top: 26px;
}
.widget_payback_loan_csh .payback-loan-name{
padding-top: 32px;
font-family: NotoSansHans-Thin;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #cccccc;
float: left;
}
.widget_payback_loan_csh .payback-loan-name .active{
color: #333333;
/*border-bottom: 2px solid #657efe;*/
font-family: NotoSansHans-Medium;
}
.widget_payback_loan_csh .payback-loan-name #payback-money-bottom-line{
position: absolute;
width: 29px;
height: 4px;
background: #657efe;
margin-top: 25px;
margin-left: 3px;
}
.widget_payback_loan_csh .payback-loan-name #loan-money-bottom-line{
position: absolute;
width: 29px;
height: 4px;
background: #657efe;
margin-top: 25px;
margin-left: 16px;
}
.widget_payback_loan_csh .payback-loan-name .payback-money{
float: left;
/*width: 60px;*/
text-align: center;
margin-left: 3px;
margin-right: 16px;
/*padding-bottom: 5px;*/
}
.widget_payback_loan_csh .payback-loan-name .loan-money{
float: left;
/*width: 60px;*/
text-align: center;
margin-left: 16px;
/*padding-bottom: 5px;*/
}
.widget_payback_loan_csh .payback-loan-name .line{
width: 2px;
height: 16px;
background: #ccc;
display: inline-block;
}
</style>
<script><![CDATA[
function paybackMoney(ds){
document.getElementById("payback-money").classList.add("active")
document.getElementById("loan-money").classList.remove("active")
document.getElementById("payback-money-bottom-line").style.display="block"
document.getElementById("loan-money-bottom-line").style.display="none"
document.getElementById("payback-money-chart").style.display="block"
document.getElementById("loan-money-chart").style.display="none"
var payback_data=[
{ month: "", value: '' },
{ month: "", value: '' },
{ month: "", value: ''},
{ month: "", value: ''},
{ month: "", value: '' },
{ month: "", value:'' },
{ month: "", value: '' },
{ month: "", value: ''},
{ month: "", value: ''},
{ month: "", value: '' },
{ month: "", value: '' },
{ month: "", value: '' }
]
var myDate = new Date();
var month=[];
month.push(myDate.getMonth()-11);
month.push(myDate.getMonth()-10);
month.push(myDate.getMonth()-9);
month.push(myDate.getMonth()-8);
month.push(myDate.getMonth()-7);
month.push(myDate.getMonth()-6);
month.push(myDate.getMonth()-5);
month.push(myDate.getMonth()-4);
month.push(myDate.getMonth()-3);
month.push(myDate.getMonth()-2);
month.push(myDate.getMonth()-1);
month.push(myDate.getMonth());
for(var i=0;i<=month.length;i++){
if(month[i]<=0){
month[i]=month[i]+12
}
}
var records=ds.data;
for(var j=0;j<month.length;j++) {
var flag='true'
var flag1='true'
if (records !== null && records.length > 0) {
for (var i = 0; i < records.length; i++) {
if (records[i].data.transaction_type == 'PAYMENT') {
if (month[j] == records[i].data.month) {
payback_data[j].month = month[j]+'月'
payback_data[j].value = records[i].data.amount
flag='false'
}
}
}
}
if(flag=='true') {
payback_data[j].month = month[j]+'月'
payback_data[j].value = 0
}
}
var chart = new G2.Chart({
container: 'payback-money-chart',
forceFit: true,
width : 600, // 指定图表宽度
height : 180, // 指定图表高度
padding:'auto'
});
chart.source(payback_data);
chart.scale('value', {
min: 0
});
chart.scale('month', {
range: [0, 1]
});
chart.tooltip({
crosshairs: {
type: 'line'
}
});
chart.line().position('month*value').color('#79c6fa') ;
chart.point().position('month*value').size(4).color('#79c6fa').shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
}
function loanMoney(ds){
var loan_data=[
{ month: "", value: '' },
{ month: "", value: '' },
{ month: "", value: ''},
{ month: "", value: ''},
{ month: "", value: '' },
{ month: "", value:'' },
{ month: "", value: '' },
{ month: "", value: ''},
{ month: "", value: ''},
{ month: "", value: '' },
{ month: "", value: '' },
{ month: "", value: '' }
]
var myDate = new Date();
var month=[];
month.push(myDate.getMonth()-11);
month.push(myDate.getMonth()-10);
month.push(myDate.getMonth()-9);
month.push(myDate.getMonth()-8);
month.push(myDate.getMonth()-7);
month.push(myDate.getMonth()-6);
month.push(myDate.getMonth()-5);
month.push(myDate.getMonth()-4);
month.push(myDate.getMonth()-3);
month.push(myDate.getMonth()-2);
month.push(myDate.getMonth()-1);
month.push(myDate.getMonth());
for(var i=0;i<=month.length;i++){
if(month[i]<=0){
month[i]=month[i]+12
}
}
var records=ds.data;
for(var j=0;j<month.length;j++) {
var flag='true'
var flag1='true'
if (records !== null && records.length > 0) {
for (var i = 0; i < records.length; i++) {
if (records[i].data.transaction_type == 'RECEIPT') {
if (month[j] == records[i].data.month) {
loan_data[j].month = month[j]+'月'
loan_data[j].value = records[i].data.amount
flag='false'
}
}
}
}
if(flag=='true') {
loan_data[j].month = month[j]+'月'
loan_data[j].value = 0
}
}
var chart = new G2.Chart({
container: 'loan-money-chart',
forceFit: true,
width : 600, // 指定图表宽度
height : 180, // 指定图表高度
padding:'auto'
});
chart.source(loan_data);
chart.scale('value', {
min: 0
});
chart.scale('month', {
range: [0, 1]
});
chart.tooltip({
crosshairs: {
type: 'line'
}
});
chart.line().position('month*value').color('#79c6fa') ;
chart.point().position('month*value').size(4).color('#79c6fa').shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
}
//展示回款金额
function showPayback(){
document.getElementById("payback-money").classList.add("active")
document.getElementById("loan-money").classList.remove("active")
document.getElementById("payback-money-chart").style.display="block"
document.getElementById("loan-money-chart").style.display="none"
document.getElementById("payback-money-bottom-line").style.display="block"
document.getElementById("loan-money-bottom-line").style.display="none"
}
//展示放款金额
function showLoan(){
document.getElementById("loan-money").classList.add("active")
document.getElementById("payback-money").classList.remove("active")
document.getElementById("payback-money-chart").style.display="none"
document.getElementById("loan-money-chart").style.display="block"
document.getElementById("payback-money-bottom-line").style.display="none"
document.getElementById("loan-money-bottom-line").style.display="block"
}
]]></script>
<a:dataSets>
<a:dataSet id="payback_csh_count_ds" autoQuery="true" model="csh.CSH911.csh_count">
<a:fields>
<a:field name="year"/>
<a:field name="month"/>
<a:field name="transaction_type"/>
<a:field name="amount"/>
<a:field name="payment_year_per"/>
</a:fields>
<a:events>
<a:event name="load" handler="paybackMoney"/>
</a:events>
</a:dataSet>
<a:dataSet id="loan_csh_count_ds" autoQuery="true" model="csh.CSH911.csh_count">
<a:fields>
<a:field name="year"/>
<a:field name="month"/>
<a:field name="transaction_type"/>
<a:field name="amount"/>
<a:field name="payment_year_per"/>
</a:fields>
<a:events>
<a:event name="load" handler="loanMoney"/>
</a:events>
</a:dataSet>
</a:dataSets>
<div class="widget_payback_loan_csh">
<div class="payback-loan-name">
<div style="display: inline-block">
<div id="payback-money" onclick="showPayback()" class="payback-money">回款金额</div>
<div id="payback-money-bottom-line"></div>
</div>
<div class="line"></div>
<div style="display: inline-block">
<div id="loan-money" onclick="showLoan()" class="loan-money">放款金额</div>
<div id="loan-money-bottom-line"></div>
</div>
</div>
<div id="payback-money-chart"></div>
<div id="loan-money-chart" style="clear: left"></div>
</div>
<a:screenBody style="display:none"> </a:screenBody>
</a:view>
</a:screen>