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>
                计划至至 2020年12月
            </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="#">金额模式</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link px-5 py-2" href="#">工程量模式</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">163,000.00 <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">50,000.00 <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="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>
                        <p class="mt-2 mb-0">计划金额进度（万元）</p>
                        <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="chartContainer3" style="height: 300px; width: 100%;">
                            </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>
<script src="/public/js/echarts/echarts.min.js"></script>
<script type="text/javascript">
    //计划进度//
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chartContainer3'));
    var option = {
        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 : ['2020年1月','2020年2月','2020年3月','2020年4月','2020年5月','2020年6月','2020年7月']
            }
        ],
        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:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'实际完成工程量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}"},
                stack: '实际',
                data:[310, 330, 301, 334, 390, 330, 320]
            },
            {
                name:'实际占设计比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[10, 15, 20, 13, 11, 9, 5]
            },
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //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 : ['2020年1月','2020年2月','2020年3月','2020年4月','2020年5月','2020年6月','2020年7月']
            }
        ],
        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:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'实际完成金额',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}<br/>{a}：{c}万元"},
                stack: '实际',
                data:[310, 330, 301, 334, 390, 330, 320]
            },
            {
                name:'实际占合同比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占合同比例<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[10, 15, 20, 13, 11, 9, 5]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</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,
            }
        ];
        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>