<!DOCTYPE html>
<html lang=zh-cn>
<head>
    <meta charset=utf-8>
    <title>纵横计量支付系统</title>
    <meta name=description content=计量支付>
    <meta name=copyright content=smartcost.com.cn>
    <link rel=stylesheet href={{rootUrl}}global/css/bootstrap.css>
    <link rel=stylesheet href={{rootUrl}}global/css/style.css>
    <script src={{rootUrl}}global/js/jquery-1.9.1.min.js></script>
    <script src={{rootUrl}}global/js/bootstrap.js></script>
    <script src={{rootUrl}}global/js/jl.js></script>
    <script src={{rootUrl}}global/js/echarts.min.js></script>
</head>
<body style="overflow:auto">
<div class="wrapHeader"><h1 title="纵横计量支付" class="mainLogo"></h1></div>
<div class="mainContent">
    <div class="row-fluid">
        <div class="span7"><h2>{{secname}}</h2>
            <p><span data-icon="n"></span> <a href="{{rootUrl}}share/section/{{hashcode}}">{{rootUrl}}share/section/{{hashcode}}</a>
            </p>
        </div>
        <div class="span5">
            <div class="detail">
                <h5>总价：￥{{st.bcontracttotal}}元</h5>
                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width:{{st.progress}};" data-placement="bottom" data-toggle="tooltip"
                         data-original-title="累计完成：￥{{st.nprogress}}">{{st.progress}}
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width:{{st.otherprogress}};" data-placement="bottom" data-toggle="tooltip"
                         data-original-title="未完成：￥{{st.notherprogress}}">{{st.otherprogress}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--标段信息-->
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="javascript:void(0);">标段信息</a>
        </li>
    </ul>
    <div class="project">
        <div class="proSection clearfix">
            <!--图表5-->
            <div class="fL" style="width:30%">
                <div id="chartContainer6" style="height: 300px; width: 100%;">
                </div>
            </div>
            <!--图表5-->
            <div class="fL" style="width:70%;height:300px;overflow:hide">
                <div id="chartContainer7" style="height: 300px; width: 100%;">
                </div>
            </div>
        </div>
        <div class="proSection clearfix">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th width="15%">标段名</th>
                    <th width="16%" class="taC">总价/期数</th>
                    <th width="40%" class="taC">截止上期累计完成/本期完成/未完成</th>
                </tr>
                <!-- loop stidArray -->
                <tr>
                    <td width="15%"><a href="/share/section/tender/{{stidArray' value.pmid}}/{{hashcode}}" target="_blank">{{stidArray' value.pmname}}</a><br>共 {{stidArray' value.qi}} 期（本期 {{stidArray' value.statusStr}}）
                    </td>
                    <td width="16%" class="taR">￥<b>{{stidArray' value.totalmoney}}</b><br>
                    </td>
                    <td width="40%" class="taR">
                        <div class="progress">
                            <div data-original-title="截止本期累计完成：{{stidArray' value.nTotalProgress}}" data-toggle="tooltip"
                                 data-placement="bottom" style="width: {{stidArray' value.displayPercentSnTotalProgress}};" class="progress-bar progress-bar-success">{{stidArray' value.displayPercentSnTotalProgress}}
                            </div>
                            <div data-original-title="本期完成：{{stidArray' value.ncurrTotalProgress}}" data-toggle="tooltip" data-placement="bottom"
                                 style="width:{{stidArray' value.displayPercentCurrTotalProgress}};" class="progress-bar">{{stidArray' value.displayPercentCurrTotalProgress}}
                            </div>
                            <div data-original-title="未完成：{{stidArray' value.nlessTotalProgress}}" data-toggle="tooltip" data-placement="bottom"
                                 style="width:{{stidArray' value.displayPercentLessTotalProgress}};" class="progress-bar progress-bar-gary">{{stidArray' value.displayPercentLessTotalProgress}}
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- endloop -->
            </table>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">
    //5 期数组成//
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chartContainer6'));
    var option = {
        color: ['#e9af68', '#57b7b6', '#e4575a', '#959eac', '#6699FF',
            '#d38b70', '#8fb7cf', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#5c616b', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
        title: {
            text: '',
            x: 'left'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}：<br>{c} 元<br>占标段：{d} %"
        },
        calculable: true,
        series: [
            {
                name: '标段计量分布',
                type: 'pie',
                radius: '40%',
                center: ['50%', 155],
                data: [
                    <!-- loop stidArray -->
                    {value: {{stidArray' value.contracttotal}}, name: '{{stidArray' value.pmname}}'},
                    <!-- endloop -->
                ]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //5 期数组成//
    //6 标段计量分布//
    var myChart2 = echarts.init(document.getElementById('chartContainer7'));
    var option = {
        color: ['#ff6666', '#3cb371'],
        title: {
            text: '项目按月进度'
        },
        tooltip: {
            trigger: 'axis',
            formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
        },
        legend: {
            data: ['累计完成', '本月完成']
        },
        dataZoom: {
            show: true,
            start: 50,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: [
                    {{projectDate}}
                ]
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                },
                splitArea: {show: true},
            }
        ],
        series: [
            {
                name: '累计完成',
                type: 'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor: 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data: [
                    {{t1}}
                ]
            },
            {
                name: '本月完成',
                type: 'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor: 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data: [
                    {{t2}}
                ]
            }
        ]
    };


    // 为echarts对象加载数据
    myChart2.setOption(option);
    //6 标段计量分布//

</script>

</body>