loan_withdraw_home.lview

<?xml version="1.0" encoding="UTF-8"?>

<!--
    $Author: huangtianyang
    $Date: 2018/7/12 下午1:54
    $Revision: 1.0 
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <a:link id="withdraw_query_link" model="lon.lon130.tre_loan_withdrawal_plan_lv" modelaction="query"/>
        <link rel="stylesheet" href="${/request/@context_path}/leafresource/leaf.ui.std/default/hlscomponent/hls-all.css"
              type="text/css"/>
        <link href="${/request/@context_path}/resource/leaf.ui.std/hap/hlscomponent/beyond.min.css" rel="stylesheet"
              type="text/css"/>
        <link href="${/request/@context_path}/css/hap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="${/request/@context_path}/css/lon/gld-home-style.css" rel="stylesheet" type="text/css"/>
        <script src="${/request/@context_path}/javascripts/calculate.js" type="text/javascript"/>

        <style>
            html {
                height: 100%
            }

            /*查询条件*/
            .queryOptions {
                margin-left: 5px;
            }

            /*通知栏部分*/
            .notice_row {
                width: 250px;
                min-height: 65px;
                margin: 0 auto;
                padding: 10px 10px;
            }

            .notice_row strong {
                font-size: 13px;
                font-weight: lighter;
                display: block;

            }

            .iremove {
                position: absolute;
                right: -16px;
                top: 24px;
                z-index: 999;
                cursor: pointer;
            }

            .notice-font {
                font-size: 12px;
                height: 40px;
                line-height: 40px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /*审批状态*/
            .status_new, .status_approving, .status_approved, .status_rejected {
                width: 60px;
                height: 20px;
                line-height: 20px;
                border-radius: 2px;
                max-height: 32px;
                text-align: center;
                color: #fff;
                display: inline-block;
                overflow: hidden;
            }

            .status_new {
                background-color: #00b3b3;
            }

            .status_approving {
                background-color: #FFCD55;
            }

            .status_approved {
                background-color: #8cc375;
            }

            .status_rejected {
                background-color: rgb(245, 123, 105);
            }

            /*查询框*/
            .conInfoInput {
                border: 1px solid #cccccc;
                width: 230px;
                height: 35px;
                margin-top: 10px;
                border-radius: 2px;
            }

            .conInfoInput > img {
                width: 15px;
                height: 15px;
                display: inline-block;
                margin-left: 2px;
            }

            .conInfoInput input {
                background: #fff;
                border: none;
                width: 205px;
                height: 27px;
            }

            /*投放统计图表*/
            .con-overdue-title {
                height: 40px;
                width: inherit;
                background-color: #FA6A4D;
                color: #FFF;
                line-height: 40px;
                vertical-align: middle;
            }

            .con-overdue-title-img {
                display: block;
                float: left;
                margin-left: 10px;
                width: 20px;
                height: 20px;
                margin-top: 10px;
                margin-right: 6px;

            }

            .con-overdue-title-content {
                float: left;
                color: #ffffff;
            }

            .co-body-title1-amt {
                margin-top: 5px;
                height: 25px;
                width: inherit;
                color: rgb(249, 112, 100);
                line-height: 25px;
                vertical-align: middle;
                margin-left: 20px;
            }

            .co-body-title1-name {
                font-size: 12px;
                height: 25px;
                width: inherit;
                color: #2cc2e3;
                line-height: 25px;
                vertical-align: middle;
                margin-left: 20px;
                margin-bottom: 25px;
            }

            /*提款统计环形图*/
            #circularChart_chart {
                margin-top: 10px;
                margin-bottom: 20px;
            }

            .hls-analyse-count-chart .other-orange-bgcolor {
                background-color: #FFCD55;
            }

            .hls-analyse-count-chart .new-blue-bgcolor {
                background-color: #8cc375;
            }

            .hls-analyse-count-chart .igreen {
                color: #8cc375;
            }

            .border-bottom-green {
                border-bottom: 4px solid #8cc375;
            }

            .nav-boxShadow-fontColor {
                box-shadow: 0px 3px 0px rgb(204, 204, 204);
            }

            .nav-no-boxShadow-fontColor {
                box-shadow: 0px 0px 0px rgb(204, 204, 204);
            }

            /*控制表格样式*/
            #contractInfoTable tr td:nth-child(1) {
                width: 11%
            }

            #contractInfoTable tr td:nth-child(2) {
                width: 10%
            }

            #contractInfoTable tr td:nth-child(3) {
                width: 23%
            }
        </style>
        <div></div>
        <script type="text/javascript"></script>
        <a:dataSets/>
        <div style="width: 1200px;margin: auto;">
            <!--融资提款查询-->
            <div class="section hls-block-x1 hls-block-y4 hls-block-margin-top"
                 style="position:relative;">
                <div class="section-title global-font-size13 border-bottom-blue">
                    <span>融资提款查询</span>
                    <img id="giveInfoQuery" class="right-img" onclick="ComprehensiveQueryFunc()"
                         src="${/request/@context_path}/images/lon/search_flag.png"/>
                </div>

                <div class="option_row border-bottom-1">
                    <strong class="global-font-size13">时间跨度</strong>
                    <span id="week" class="queryOptions  query-option-size-normal global-font-size12">1周内</span>
                    <span id="month" class="queryOptions  query-option-size-normal global-font-size12">1个月内</span>
                    <span id="quarter" class="queryOptions query-option-size-normal global-font-size12">3个月内</span>
                </div>

                <div class="option_row border-bottom-1">
                    <strong class="global-font-size13">合同信息</strong>
                    <div class="conInfoInput">
                        <img src="${/request/@context_path}/images/search.png" style="position: relative;top: 5px;"/>
                        <input id="contractInfoCondition" style="border:none;background-color:white"
                               class="global-font-size12" type="text" placeholder="请输入合同编号、名称、债权人等相关信息"/>
                    </div>
                </div>
                <div class="option_row border-bottom-1">
                    <strong class="global-font-size13">提款金额</strong>
                    <div>
                        <input id="amountFromCondition"
                               style="width:100px;height:30px;border-radius: 5px;background-color:white;display: inline-block;margin-right:10px;"
                               class="global-font-size12" type="text" placeholder="金额从"/>
                        <span>-</span>
                        <input id="amountToCondition"
                               style="background-color:white;margin-left:10px;width:105px;height:30px;border-radius: 5px;display: inline-block"
                               class="global-font-size12" type="text" placeholder="金额到"/>
                    </div>
                </div>
                <div class="option_row" style=" position:absolute;bottom:0;">
                    <span id="throwSearchBtn" class="throw_search global-font-size12">查询</span>
                </div>
            </div>
            <script type="text/javascript"><![CDATA[
            //=========================融资提款查询=======================================================
            $jq('.queryOptions').click(function () {
                if ($jq(this).css('background-color') === 'rgb(0, 179, 179)') {
                    $jq(this).css('background-color', '');
                    $jq(this).css('color', '#000');
                } else {
                    $jq(this).css('background-color', 'rgb(0, 179, 179)');
                    $jq(this).css('color', '#fff');
                }
            })

            $jq('#throwSearchBtn').click(function () {
                //todo
            })
            ]]></script>

            <!--提款统计chart-->
            <div class="hls-block-x2 hls-block-y4 hls-block-bg hls-block-margin-top hls-block-margin-left"
                 style="float:left;border-radius:5px;">
                <div class="con-overdue-title">
                    <img class="con-overdue-title-img" src="${/request/@context_path}/images/lon/zhuzi.png"/>
                    <div class="con-overdue-title-content global-font-size13" style="font-weight:600;">
                        提款统计
                    </div>
                    <div id="sysData" class="con-overdue-title-content global-font-size13" style="margin-left:360px;">

                    </div>
                </div>

                <div class="co-body-title">
                    <div class="co-body-title1">
                        <div id="withdraw-total" class="co-body-title1-amt global-font-size18">
                        </div>
                        <div class="co-body-title1-name global-font-size12">
                            提款总额
                        </div>
                    </div>
                </div>

                <div id="withdraw-chart" style="height:150px;width: inherit;">
                        <span style="padding-left:10px;" id="withdraw-chart-span" data-sparkline="line2"
                              data-height="185px" data-width="96%" data-fillcolor="#37c2e2" data-linecolor="#37c2e2"
                              data-spotcolor="#fafafa" data-minspotcolor="#fafafa" data-maxspotcolor="#ffce55"
                              data-highlightspotcolor="#f5f5f5 " data-highlightlinecolor="#f5f5f5"
                              data-linewidth="2" data-spotradius="0">21312312,123213,123123
                        </span>
                    <div class="databox databox-xxlg databox-vertical databox-inverted ">
                        <div id="outDiv" class="databox-bottom bg-sky no-padding">
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <script src="${/request/@context_path}/javascripts/lon/loan-withdraw-plan.js" type="text/javascript"/>
        <script type="text/javascript"><![CDATA[
        var renderer = new RenderWithDrawChart({
            days: 30,
            dateField: 'cdate',
            totalDom: '#withdraw-total',
            canvasDom: '#withdraw-chart-span',
            amountField: 'amount',
            queryUrl: $('withdraw_query_link').getUrl()
        });
        renderer.init();
        ]]></script>
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/sparkline/jquery.sparkline.js"
                type="text/javascript"/>
        <script src="${/request/@context_path}/javascripts/lon/sparklineInitor.js" type="text/javascript"/>
        <script type="text/javascript"><![CDATA[
        /*提款统计chart绘制*/
        // var contextPath = '${/request/@context_path}';
        // var chartInit = function () {
        //     graphExam = new sparklineGraph({
        //         graphSelector: "#withdraw-chart-span",                        //传入控件选择器
        //         topContBlock: {
        //             topContSelector: "#withdraw-total",
        //             dataSouceUrl: contextPath + "/lon/contract/withdraw/lineChart"
        //         },                                                              //传入总金额选择器和url ?timeCondition=month
        //         xValue: 30,                                                     //传入横轴的天数
        //         mainContDataSourceUrl: contextPath + "/lon/contract/withdraw/lineChart",  //传入中间图形那查询的url, ?timeCondition=month
        //         bottomContSelector: "#outDiv"
        //     });
        // };
        // chartInit();
        ]]></script>
        <a:screenBody/>

    </a:view>
</a:screen>