<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 微件-资产统计-租赁性质 --> <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>--> <!--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> <!--Beyond Scripts--> <!--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 { width: 673px; height: 553px; margin: 0; padding: 0; background-color: #fff; } .widget_leaf_asset_count { box-sizing: border-box; width: 673px; height: 553px; padding: 0; background-color: #fff; position: relative; cursor: default; /*margin-left:35px;*/ /*margin-top:24px;*/ } .widget_leaf_asset_count .asset_count_head{ /*width:100%;*/ height:38px; padding: 40px 0 0 46px; } .widget_leaf_asset_count .asset_count_head .asset_count_img{ width:20px; height:22px; float:left; } .widget_leaf_asset_count .widget_label { position: absolute; width: 40px; height: 4px; top: 66px; left: 84px; background-color: #5A7FFF; } .widget_leaf_asset_count .title_font { float:left; margin-left:18px; margin-top:1px; font-family: NotoSansHans-Bold; font-size: 17px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #333333; } <!-- 进度条css --> .widget_leaf_asset_count .asset_count_progress_bar{ float:right; width: 135px; height: 46px; margin-right: 52px; } .widget_leaf_asset_count .asset_count_progress_bar .progress-description{ text-align:right; margin-top:6px; margin-right:2px; } .widget_leaf_asset_count .asset_count_progress_bar .description_font{ font-family: NotoSansHans-Bold; font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; letter-spacing: 1px; color: #333333; text-align:right; margin-right:0px; } .widget_leaf_asset_count .progress-title{ font-family: NotoSansHans-Thin; font-size: 12px; font-weight: normal; font-style: italic; font-stretch: normal; letter-spacing: 1px; color: #333333; margin-top:5px; } .widget_leaf_asset_count .progress{ width: 134px; height: 8px; background-color: #eeeeee; border-radius: 4px; margin-top:5px; } .widget_leaf_asset_count .progress:before{ width:0; } .widget_leaf_asset_count .progress-bar{ width: 19px; height: 8px; background-color: #535353; border-radius: 4px; font-size:10px; height:100%; color:#535353; 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_leaf_asset_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_leaf_asset_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_leaf_asset_count .row2{ width:100%; height:318px; } .widget_leaf_asset_count #row2Donut{ width:189px; height:187px; float:left; } .widget_leaf_asset_count #widget-leaf-asset-row2Donut{ width:189px; height:187px; margin-left:189px; float:left; } .widget_leaf_asset_count .row2-r{ width:100%; max-height:190px; margin-left:30px; margin-top:51px; float:left; } .widget_leaf_asset_count #row2Table{ width:554px; border-collapse: collapse; } .widget_leaf_asset_count #widget-leaf-asset-row2Table{ width:554px; border-collapse: collapse; } .widget_leaf_asset_count #widget-leaf-asset-row2Table tr{ height:35px; border-bottom:2px solid rgba(153,153,153,0.1); font-family: NotoSansHans-Light; font-size: 12px; font-weight: normal; font-stretch: normal; letter-spacing: 1px; color: #666666; } .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:first-child{ height:35px; border-bottom: 6px solid rgba(153,153,153,.1); font-family: NotoSansHans-Regular; font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 1px; color: #333333 !important; } .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:last-child{ height:35px; border: none; } .widget_leaf_asset_count #widget-leaf-asset-row2Table td{ border:none; text-align:center; } .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:hover{ background-color: #eeeeee; opacity: 0.32; } .widget_leaf_asset_count #row2Table tr{ height:25px; border-bottom:1px solid #ccc; } .widget_leaf_asset_count #row2Table tr:first-child{ height:25px; border-bottom: 4px solid rgba(153,153,153,.1); } .widget_leaf_asset_count #row2Table tr:last-child{ height:25px; border: none; } .widget_leaf_asset_count #row2Table td{ border:none; } .widget_leaf_asset_count #row2Table tr:hover{ background-color:#e8e8e8; } .widget_leaf_asset_count i{ display:inline-block; width: 10px; height: 10px; margin-right:6px; border-radius: 100%; } </style> <script><![CDATA[ //数据初始化 jQuery(document).ready(function () { //金额千分位展示 jQuery(".description_font").html(String(jQuery(".description_font").html().split('.')[0]).replace(/(\d)(?=(\d{3})+$)/g, "$1,")+'.'+jQuery(".description_font").html().split('.')[1]); conStatusCountLoader(); }); //初始化合同数据 function conStatusCountLoader(){ //var records=ds.data; console.log(records); var donutData=[]; var colors=[]; $row2Table=jQuery("#widget-leaf-asset-row2Table"); var records = [ { leaseType: "融资租赁", percent: "99.90%", currencyType:"人民币", restAsset:"1983977357.64" }, { leaseType: "经营租赁", percent: "0.10%", currencyType:"人民币", restAsset:"1982115.11" } ]; var assetInfo = [ { leaseType: "融资租赁", color:"#2ec3e8", currencyType:"人民币", }, { leaseType: "经营租赁", color:"yellow", currencyType:"人民币", } ]; if(records!==null && records.length>0){ records.forEach(function(record){ assetInfo.forEach(function(assetInfo){ if(record.leaseType==assetInfo.leaseType){ assetInfo.value=record.restAsset; assetInfo.per=record.percent; } }); }); } 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>"; assetInfo.forEach(function(i){ if(i.value==undefined){ i.value=0; } if(i.per==undefined){ i.per='0.00%'; } donutData.push({ label:i.leaseType, value:i.value, color:i.color }); colors.push(i.color); html+="<tr><td><i style='background-color:"+i.color+";'></i></td>"; html+="<td>"+i.leaseType+"</td>"; html+="<td>"+i.per+"</td>"; html+="<td>"+i.currencyType+"</td>"; html+="<td>"+String(i.value.split('.')[0]).replace(/(\d)(?=(\d{3})+$)/g, "$1,")+"."+i.value.split('.')[1]+"</td></tr>"; }); $row2Table.html("</tbody>"+html); Morris.Donut({ element: 'widget-leaf-asset-row2Donut', data:donutData, colors:colors }); } ]]></script> <div class="widget_leaf_asset_count"> <div class="asset_count_head"> <img class="asset_count_img" src="${/request/@context_path}/leafresource/images/widget/task-list.png"></img> <div class="title_font">资产统计</div> <span class="widget_label"> </span> </div> <div class="asset_count_progress_bar"> <div class="progress-description"> <span class="description_font">1985959472.75</span> </div> <div class="progress"> <div data-description="本月新增项目" class="progress-bar" width="300px;"></div> </div> <div class="progress-title"> <span style="float:right;margin-right:3px;">资产余额</span> </div> </div> <div class="row2" style="margin-top: 76px;"> <div class="row2-l" id="widget-leaf-asset-row2Donut"></div> <div class="row2-r"> <table id="widget-leaf-asset-row2Table" cellspacing="0"></table> </div> <div class="clearFloat"></div> </div> </div> <a:screenBody style="display:none"></a:screenBody> </a:view> </a:screen>