WIDGET-ASSET-COUNT.lview 6.78 KB
<?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">
        <!--单独微件测试用-->
        <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>-->
        <style>
            html, body {
                width: 840px;
                height: 264px;
                margin: 0;
                padding: 0;
                color: #000;
            }

            .widget_asset_count {
                box-sizing: border-box;
                width: 840px;
                height: 264px;
                padding: 0;
                background-color: #fff;
                position: relative;
                border: 1px solid #F0F0F3;
                cursor: default;
            }

            .widget_asset_count .widget_label {
                position: absolute;
                width: 40px;
                height: 4px;
                top: 0;
                left: 16px;
                background-color: #5A7FFF;
            }

            .widget_asset_count .row1 {
                position: relative;
                padding: 16px 0 8px 16px;
                font-family: PingFangSC-Medium;
                font-size: 14px;
                color: rgba(75, 80, 90, 0.85);
                letter-spacing: 0;
                border-bottom: 1px solid #F0F0F3;
            }

            .widget_asset_count .row2 {
                box-sizing: border-box;
                height: 218px;
            }

            .widget_asset_count .row2 .left {
                float: left;
            }

            .widget_asset_count .row2 .right {
                float: left;
                padding-top: 48px;
                width: 594px;
            }

            .widget_asset_count .row2 .right .title {
                height: 42px;
                line-height: 42px;
                border-bottom: 1px solid #D8D8D8;
                font-family: PingFangSC-Regular;
                font-size: 17px;
                color: rgba(0, 0, 0, 0.45);
            }

            .widget_asset_count .row2 .right .title span {
                margin-right: 60px;
            }

            .widget_asset_count .row2 .right .bodyList {
                margin-top: 40px;
            }

            .widget_asset_count .row2 .right .bodyList .li {
                font-family: PingFangSC-Regular;
                font-size: 17px;
                color: rgba(0, 0, 0, 0.45);
                height: 24px;
                line-height: 24px;
            }

            .widget_asset_count .row2 .right .bodyList .li i {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 4px;
                margin-right: 15px;
            }

            .widget_asset_count .row2 .right .bodyList .li span {
                margin-right: 30px;
            }

            .widget_asset_count .row2 .right .bodyList .li span:last-child {
                margin-right: 40px;
            }

            .widget_asset_count .row2 .clearFloat {
                clear: both;
                height: 0;
                line-height: 0;
                font-size: 0
            }
        </style>
        <script><![CDATA[
        jQuery(document).ready(function () {
            var chartData = [{
                item: '融资租赁',
                per: 78
            }, {
                item: '经营租赁',
                per: 22
            }];
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var widget_asset_count_chart = new G2.Chart({
                container: 'widget_asset_count_chart',
                width: 206,
                height: 218,
                animate: false,
                padding: 10
            });
            widget_asset_count_chart.source(chartData);
            widget_asset_count_chart.coord('theta', {
                radius: 0.75,
                innerRadius: 0.72
            });
            widget_asset_count_chart.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            widget_asset_count_chart.guide().html({
                position: ['50%', '50%'],
                html: '<div style="font-size: 14px;color: rgba(75,80,90,0.85);text-align:center;width: 10em;"><p>融资租赁</p><p>' + chartData[0]['per'] + '</p></div>',
                alignX: 'middle',
                alignY: 'middle'
            });
            widget_asset_count_chart.legend(false);
            var interval = widget_asset_count_chart.intervalStack()
                .position('per')
                .color('item', ['#5A7FFF', '#FF8665'])
                .tooltip('item*per', function (item, per) {
                    return {
                        name: item,
                        value: per
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
            widget_asset_count_chart.render();
        });

        ]]></script>
        <a:dataSets>
            <a:dataSet id="con_asset_count_ds" autoQuery="true" pageSize="5" model="ast.AST511.con_asset_count">
                <a:fields>
                    <a:field name="contract_number"/>
                </a:fields>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_asset_count">
            <span class="widget_label"> </span>
            <div class="row1">资产统计</div>
            <div class="row2">
                <div class="left" id="widget_asset_count_chart"></div>
                <div class="right">
                    <div class="title">
                        <span>租赁性质</span>
                        <span>占比</span>
                        <span>币种</span>
                    </div>
                    <div class="bodyList">
                        <span class="li">
                            <i style="background: #7292FF"/>
                            <span>融资租赁</span>
                            <span>99.90%</span>
                            <span>人民币</span>
                        </span>
                        <span class="li">
                            <i style="background: #FF8665;"/>
                            <span>经营租赁</span>
                            <span>0.01%</span>
                            <span>人民币</span>
                        </span>
                    </div>
                </div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <a:screenBody style="display:none"></a:screenBody>
    </a:view>
</a:screen>