<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 4.PRJ统计 --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <!--Beyond styles--> <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/beyond.min.css" rel="stylesheet" /> <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/demo.min.css" rel="stylesheet" /> <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/typicons.min.css" rel="stylesheet" /> <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/animate.min.css" rel="stylesheet" /> <!--Basic Scripts--> <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/skins.min.js"></script> <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/bootstrap.min.js"></script> <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/slimscroll/jquery.slimscroll.min.js"></script> <!--Beyond Scripts--> <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/beyond.min.js"></script> <!--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> <style> html,body{ background-color:#eee; width:870px; height:280px; margin: 0; padding: 0; color:#758697; } .widget_cont_count{ width:870px; height:280px; background-color:#fff; position:relative; } .widget_cont_count .clearFloat{ clear:both; height:0; line-height:0; font-size:0 } .widget_cont_count i{ display:inline-block; width:12px; height: 12px; margin-right:6px; border-radius: 100%; } .widget_cont_count .row1{ width:870px; height:70px; } .widget_cont_count .row1-l{ width:72px; height:70px; margin:0 40px 0 20px; float:left; text-align:center; font-size:18px; color:#2b425b; font-family:'Open Sans','Segoe UI'; } .widget_cont_count .row1-r{ width:680px; height:50px; margin-top:20px; float:left; } .widget_cont_count .progress-title{ height:18px; line-height:18px; } .widget_cont_count .progress{ background-color:#FA800A; } .widget_cont_count .progress:before{ width:0; } .widget_cont_count .progress-bar{ background-color:#FA800A; width:2em; min-width: 2em; background-color: rgb(46, 195, 232); font-size:10px; height:100%; color:#fff; text-align:center; background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size:40px 40px; background-size:40px 40px; transition:width .6s ease; animation:progress-bar-stripes 2s linear infinite; -o-animation:progress-bar-stripes 2s linear infinite; -webkit-animation:progress-bar-stripes 2s linear infinite; } .widget_cont_count .progress-bar-label{ position:absolute; display: none; z-index:1000; padding:6px 10px; color:#fff; background: rgb(0,0,0); border-radius: 3px; } .widget_cont_count .progress-bar-label p{ margin:0; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .widget_cont_count .row2{ width:870px; height:200px; } .widget_cont_count #row2Donut{ width:270px; height:200px; margin-left:30px; float:left; } .widget_cont_count .row2-r{ width:400px; max-height:200px; margin-left:30px; float:left; } .widget_cont_count #row2Table{ width:400px; border-collapse: collapse; } .widget_cont_count #row2Table tr{ height:25px; border-bottom:1px solid #ccc; } .widget_cont_count #row2Table td{ border:none; } .widget_cont_count #row2Table tr:hover{ background-color:#e8e8e8; } </style> <script><![CDATA[ jQuery(document).on('mouseover mouseout mousemove', '.progress-bar', function (event) { if(window.$pop){ $pop=window.$pop; }else{ window.$pop=jQuery("<div>", { "class": "progress-bar-label" }); $pop=window.$pop; $pop.html(jQuery("<p>本月新增合同</p><p>"+jQuery(".progress-bar")[0].innerText+"</p>")); } if (event.type === 'mouseover') { $pop.appendTo(".widget_cont_count"); $pop.show().css({ left: (event.pageX + 10) + 'px', top: (event.pageY + 10) + 'px' }); } if (event.type === 'mouseout') { $pop.hide(); } if (event.type === 'mousemove') { if ($pop.is(":visible")) { $pop.css({ left: (event.pageX + 10) + 'px', top: (event.pageY + 10) + 'px' }) } } event.preventDefault(); }); function progressBarLoader(ds){ var per=ds.data[0].data['cont_month_per']; jQuery(".progress-bar").text(per); jQuery(".progress-bar").css("width",per); } function statusCountLoader(ds){ var records=ds.data; var donutData=[]; var colors=[]; $row2Table=jQuery("#row2Table"); var statusInfo = [ { statusValue: "新建", status: "NEW", color:"#2EC3E8" }, { statusValue: "签约", status: "SIGN", color:"#14A9CC" }, { statusValue: "起租", status: "INCEPT", color:"#A0D469" }, { statusValue: "正常结清", status: "TERMINATE", color:"#31B995" }, { statusValue: "提前结清", status: "ET", color:"#FFCD55" }, { statusValue: "回购", status: "REPUR", color:"#E75B8D" }, { statusValue: "取消", status: "CANCEL", color:"#FA6A4D" } ]; 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']; j.overdue=i.data['cont_overdue_count']; } }); }); } var html="<tbody><tr style='color:#000;'><td><span></span></td><td><span>项目状态</span></td><td><span>占比</span></td><td><span>数量</span></td><td><span>逾期</span></td></tr>"; statusInfo.forEach(function(i){ if(i.value==undefined){ i.value=0; } if(i.per==undefined){ i.per='0.00%'; } if(i.overdue==undefined){ i.overdue=0; } donutData.push({ label:i.statusValue, value:i.value }); colors.push(i.color); html+="<tr><td><i style='background-color:"+i.color+";'></i></td>"; html+="<td>"+i.statusValue+"</td>"; html+="<td>"+i.per+"</td>"; html+="<td>"+i.value+"</td>"; html+="<td>"+i.overdue+"</td></tr>"; }); $row2Table.html("</tbody>"+html); Morris.Donut({ element: 'row2Donut', data:donutData, colors:colors }); } ]]></script> <a:dataSets> <a:dataSet id="cont_status_count_ds" autoQuery="true" model="cont.CON1003.cont_status_count"> <a:fields> <a:field name="cont_status"/> <a:field name="cont_status_count"/> <a:field name="cont_status_per"/> <a:field name="cont_overdue_count"/> </a:fields> <a:events> <a:event name="load" handler="statusCountLoader"/> </a:events> </a:dataSet> <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_month_per"/> </a:fields> <a:events> <a:event name="load" handler="progressBarLoader"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_cont_count"> <div class="row1"> <div class="row1-l"> <a:label className="cont_count_num" bindTarget="cont_count_ds" name="cont_count" style="width:70px;margin:10px 0;font-size:22px;color:#000;"/> <div>合同总数</div> </div> <div class="row1-r"> <div class="progress-title"> <i style="background-color:#2EC3E8;"> </i><span style="font-size:13px">本月新增合同</span> </div> <div class="progress"> <div data-description="本月新增项目" class="progress-bar">0%</div> </div> </div> <div class="clearFloat"> </div> </div> <div class="row2"> <div class="row2-l" id="row2Donut"></div> <div class="row2-r"> <table id="row2Table" cellspacing="0"></table> </div> <div class="clearFloat"></div> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>