Calculation/app/view/schedule/index.ejs

<% include ../tender/tender_sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex">
            <% include ../tender/tender_sub_mini_menu.ejs %>
            <h2>
                <% if (planMonth) { %>计划至 <%- planMonth.split('-')[0] %>年<%- parseInt(planMonth.split('-')[1]) %>月 <% } %>
            </h2>
            <div class="ml-auto">
                <a href="/tender/<%- ctx.tender.id %>/schedule/ledger" class="btn btn-sm btn-outline-primary">进度台帐</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="m-3">
                    <!--模式切换-->
                    <div class="col-12 mb-4">
                        <ul class="nav nav-tabs justify-content-center">
                            <li class="nav-item">
                                <a class="nav-link px-5 py-2" href="#tp" id="tp-tab" data-toggle="tab" role="tab" aria-controls="tp" aria-selected="false">金额模式</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link px-5 py-2 active" href="#gcl" id="gcl-tab" data-toggle="tab" role="tab" aria-controls="gcl" aria-selected="true">工程量模式</a>
                            </li>
                        </ul>
                    </div>
                    <!--金额概况-->
                    <div class="row mx-0 mb-3 justify-content-center">
                        <div class="col-auto p-0">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title"><%- scheduleInfo ? ctx.helper.formatNum(scheduleInfo.plan_tp, '#,##0.######') : '' %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占设计比例"><%- scheduleInfo && scheduleInfo.total_tp !== 0 && scheduleInfo.plan_tp ? ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100 !== 0 ? ctx.helper.round(ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100, 0) + '%': '0%' : '0%' %></small></h5>
                                    <p class="card-text text-muted">计划完成金额</p>
                                </div>
                            </div>
                        </div>
                        <!--<div class="col-auto pr-0">-->
                            <!--<div class="card text-center">-->
                                <!--<div class="card-body">-->
                                    <!--<h5 class="card-title">50,000.00 <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占计划比例">5%</small></h5>-->
                                    <!--<p class="card-text text-muted">已完成计划金额</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="col-auto pr-0">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title"><%- scheduleInfo ? ctx.helper.formatNum(scheduleInfo.sj_tp, '#,##0.######') : '' %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占设计比例"><%- scheduleInfo && scheduleInfo.total_tp !== 0 && scheduleInfo.sj_tp ? ctx.helper.round(ctx.helper.div(scheduleInfo.sj_tp, scheduleInfo.total_tp)*100, 0) + '%' : '0%' %></small></h5>
                                    <p class="card-text text-muted">实际完成金额</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div id="gcl" class="tab-pane fade show active" role="tabpanel" aria-labelledby="gcl-tab">
                            <!--进度条-->
                            <div class="mb-3">
                                <% if (scheduleInfo && scheduleInfo.total_tp !== 0) { %>
                                计划金额进度（元）
                                <div class="progress">
                                    <div class="progress-bar bg-success" style="width:<%- ctx.helper.round(ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成金额：￥<%- ctx.helper.formatNum(scheduleInfo.plan_tp, '#,##0.######') %>"><%- ctx.helper.round(ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100, 0) %>%</div>
                                    <div class="progress-bar bg-gray" style="width:<%- 100 - ctx.helper.round(ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：￥<%- ctx.helper.formatNum(ctx.helper.sub(scheduleInfo.total_tp, scheduleInfo.plan_tp), '#,##0.######') %>"><%- 100 - ctx.helper.round(ctx.helper.div(scheduleInfo.plan_tp, scheduleInfo.total_tp)*100, 0) %>%</div>
                                </div>
                                <p class="mt-2 mb-0">实际金额进度哦（元）</p>
                                <div class="progress">
                                    <div class="progress-bar bg-success" style="width:<%- ctx.helper.round(ctx.helper.div(scheduleInfo.sj_tp, scheduleInfo.total_tp)*100, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成金额：￥<%- ctx.helper.formatNum(scheduleInfo.sj_tp, '#,##0.######') %>"><%- ctx.helper.round(ctx.helper.div(scheduleInfo.sj_tp, scheduleInfo.total_tp)*100, 0) %>%</div>
                                    <div class="progress-bar bg-gray" style="width:<%- 100 - ctx.helper.round(ctx.helper.div(scheduleInfo.sj_tp, scheduleInfo.total_tp)*100, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：￥<%- ctx.helper.formatNum(ctx.helper.sub(scheduleInfo.total_tp, scheduleInfo.sj_tp), '#,##0.######') %>"><%- 100 - ctx.helper.round(ctx.helper.div(scheduleInfo.sj_tp, scheduleInfo.total_tp)*100, 0) %>%</div>
                                </div>
                                <% } %>
                            </div>
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">完成金额进度表</h5>
                                    <div id="chartContainer4" style="height: 300px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/echarts/echarts.min.js"></script>
<% if (scheduleInfo && scheduleInfo.total_tp !== 0) { %>
<script type="text/javascript">
    var charts = new Array();
    //4 完成金额进度进度//
    var myChart = echarts.init(document.getElementById('chartContainer4'));
    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: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['计划完成金额','实际完成金额','实际占设计比例']
        },
        dataZoom: [
            {show: true,start: 0, end: 100}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : [<% if (scheduleMonth.length > 0) { %>
                <% for (const sm of scheduleMonth) { %>
                    '<%- sm.yearmonth.split('-')[0] %>年<%- parseInt(sm.yearmonth.split('-')[1]) %>月',
                <% } %>
            <% } %>]
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'完成度',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'计划完成金额',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}元"},
                stack: '计划',
                data:[<% if (scheduleMonth.length > 0) { %>
                    <% for (const sm of scheduleMonth) { %>
                    '<%- sm.plan_tp  %>',
                    <% } %>
                    <% } %>]
            },
            {
                name:'实际完成金额',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}元"},
                stack: '实际',
                data:[<% if (scheduleMonth.length > 0) { %>
                    <% for (const sm of scheduleMonth) { %>
                    '<%- sm.sj_tp  %>',
                    <% } %>
                    <% } %>]
            },
            {
                name:'实际占合同比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[<% if (scheduleMonth.length > 0) { %>
                    <% for (const sm of scheduleMonth) { %>
                    '<%- ctx.helper.round(ctx.helper.div(sm.sj_tp, scheduleInfo.total_tp)*100, 2)  %>',
                    <% } %>
                    <% } %>]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    charts.push(myChart);
</script>
<!--sjs-->
<script>
    $(document).ready(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            for(var i = 0; i < charts.length; i++) {
                charts[i].resize();
            }
        });
    })
</script>
<% } %>
<script src="/public/js/sub_menu.js"></script>
<script>
    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
</script>