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 active" href="#tp" id="tp-tab" data-toggle="tab" role="tab" aria-controls="tp" aria-selected="true">金额模式</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link px-5 py-2" href="#gcl" id="gcl-tab" data-toggle="tab" role="tab" aria-controls="gcl" aria-selected="false">工程量模式</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="占设计比例">20%</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="占设计比例">15%</small></h5>
                                    <p class="card-text text-muted">实际完成金额</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content">
                        <div id="tp" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tp-tab">
                            <!--进度条-->
                            <div class="mb-3">
                                计划金额进度（元）
                                <div class="progress">
                                    <div class="progress-bar bg-success" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成金额：￥300.00">24%</div>
                                    <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：￥930.00">66%</div>
                                </div>
                                <p class="mt-2 mb-0">实际金额进度哦（元）</p>
                                <div class="progress">
                                    <div class="progress-bar bg-success" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成金额：￥400.00">18%</div>
                                    <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：￥930.00">72%</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 id="gcl" class="tab-pane fade" role="tabpanel" aria-labelledby="gcl-tab">
                            <div class="mb-3">
                                计划工程量进度
                                <div class="progress">
                                    <div class="progress-bar bg-info" style="width:24%;" data-placement="bottom" data-toggle="tooltip" data-original-title="计划完成工程量：30,000.00">24%</div>
                                    <div class="progress-bar bg-gray" style="width:76%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未计划：930,00.00">66%</div>
                                </div>
                                <p class="mt-2 mb-0">实际工程量进度</p>
                                <div class="progress">
                                    <div class="progress-bar bg-info" style="width: 18%;" data-placement="bottom" data-toggle="tooltip" data-original-title="实际完成工程量：40,000.00">18%</div>
                                    <div class="progress-bar bg-gray" style="width:82%;" data-placement="bottom" data-toggle="tooltip" data-original-title="合同未完成：930,00.00">72%</div>
                                </div>
                            </div>
                            <!--图表-->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">工程量进度表</h5>
                                    <div id="chartContainer3" style="height: 300px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/echarts/echarts.min.js"></script>
<script type="text/javascript">
    var charts = new Array();
    //计划进度//
    // 基于准备好的dom，初始化echarts图表
    var myChart2 = echarts.init(document.getElementById('chartContainer3'));
    var option2 = {
        color: ['#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#17a2b8','#28a745','#e4575a','#959eac','#6699FF',
            '#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_gcl  %>',
                    <% } %>
                    <% } %>]
            },
            {
                name:'实际完成工程量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}"},
                stack: '实际',
                data:[<% if (scheduleMonth.length > 0) { %>
                    <% for (const sm of scheduleMonth) { %>
                    '<%- sm.sj_gcl  %>',
                    <% } %>
                    <% } %>]
            },
            {
                name:'实际占设计比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[10, 15, 20, 13, 11,]
            },
        ]
    };
    // 为echarts对象加载数据
    myChart2.setOption(option2);
    charts.push(myChart2);
    //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:[10, 15, 20, 13, 11,]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    charts.push(myChart);
</script>
<!--sjs-->
<script>
    $(document).ready(function () {
        const data = [
            {
                单位:'稍等',
                精度:3,
            },{
                单位:'km',
                精度:3,
            },{
                单位:'m',
                精度:3,
            },{
                单位:'m2',
                精度:3,
            },{
                单位:'m3',
                精度:3,
            },{
                单位:'kg',
                精度:3,
            },{
                单位:'个',
                精度:3,
            },{
                单位:'台',
                精度:3,
            },{
                单位:'套',
                精度:3,
            },{
                单位:'棵',
                精度:3,
            },{
                单位:'组',
                精度:3,
            },{
                单位:'总额',
                精度:3,
            },{
                单位:'系统',
                精度:3,
            },{
                单位:'其他未列单位',
                精度:3,
            }
        ];

        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            for(var i = 0; i < charts.length; i++) {
                charts[i].resize();
            }
        });
        // const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
        //     sheetCount: 1
        // });
        // spread.getActiveSheet().setDataSource(data);
        // spread.options.tabStripVisible = false;
    })
</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>