Calculation/app/view/tender/detail.ejs

<% include ./tender_sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex">
            <% include ./tender_sub_mini_menu.ejs %>
            <% if (tender.ledger_status !== audit.ledger.status.uncheck) { %>
            <h2>进行至
                <% if (lastStage) { %>
                第<%- lastStage.order %>期<small class="<%- audit.stage.statusClass[lastStage.status] %>">（<%- audit.stage.statusString[lastStage.status] %>）</small>
                <% } else { %>
                台账<small class="<%- audit.ledger.auditStringClass[tender.ledger_status] %>">（<%- audit.ledger.auditString[tender.ledger_status] %>）</small>
                <% } %>
            </h2>
            <% } %>
            <% if (cooperation) { %>
            <div>
                <a href="/tender/<%= tender.id %>/cooperation" class="btn btn-sm btn-light" ><i class="fa fa-users"></i> 协作办公</a>
            </div>
            <% } %>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="m-3">
                    <!--金额概况-->
                    <div class="row mx-0 mb-3">
                        <div class="col-auto p-0">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title"><%- ctx.helper.formatMoney(tender.total_price) %></h5>
                                    <p class="card-text text-muted">0号台帐合同</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto pr-0">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h5 class="card-title"><%- ctx.helper.formatMoney(tender.gather_tp) %></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"><%- ctx.helper.formatMoney(tender.end_qc_tp) %><small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占合同比例"><%- tender.qc_ratio %>%</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"><%- ctx.helper.formatMoney(tender.end_gather_tp) %></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"><%- ctx.helper.formatMoney(tender.pre_gather_tp) %></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"><%- ctx.helper.formatMoney(tender.yf_tp) %></h5>
                                    <p class="card-text text-muted">本期应付</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--进度条-->
                    <div class="mb-3">
                        <div class="progress">
                            <% if (tender.pre_ratio > 0) { %>
                            <div class="progress-bar bg-success" style="width: <%- tender.pre_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥<%- ctx.helper.formatMoney(tender.pre_gather_tp) %>"><%- tender.pre_ratio %>%</div>
                            <% } %>
                            <% if (tender.cur_ratio > 0) { %>
                            <div class="progress-bar bg-info" style="width: <%- tender.cur_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥<%- ctx.helper.formatMoney(tender.gather_tp) %>"><%- tender.cur_ratio %>%</div>
                            <% } %>
                            <% if (tender.other_ratio > 0) { %>
                            <div class="progress-bar bg-gray" style="width: <%- tender.other_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥<%- ctx.helper.formatMoney(tender.other_tp) %>"><%- tender.other_ratio %>%</div>
                            <% } %>
                        </div>
                    </div>
                    <!--标段设置-->
                    <div class="col-6 p-0 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">标段设置</h5>
                                <a href="#bd-set-1" data-toggle="modal" data-target="#bd-set-1" class="btn btn-sm btn-outline-primary">标段属性</a>
                                <a href="#bd-set-2" data-toggle="modal" data-target="#bd-set-2" class="btn btn-sm btn-outline-primary">小数位数</a>
                                <a href="#bd-set-3" data-toggle="modal" data-target="#bd-set-3" class="btn btn-sm btn-outline-primary">数量精度</a>
                                <a href="#bd-set-4" data-toggle="modal" data-target="#bd-set-4" class="btn btn-sm btn-outline-primary">合同参数</a>
                                <a href="#bd-set-5" data-toggle="modal" data-target="#bd-set-5" class="btn btn-sm btn-outline-primary">显示设置</a>
                                <a href="#bd-set-6" data-toggle="modal" data-target="#bd-set-6" class="btn btn-sm btn-outline-primary">章节设置</a>
                            </div>
                        </div>
                    </div>
                    <!--图表-->
                    <div class="card mb-3 mr-1">
                        <div class="card-body">
                            <h5 class="card-title">期进度表</h5>
                            <div id="chartContainer4" style="height: 300px; width: 100%;">
                            </div>
                        </div>
                    </div>
                    <div class="card mb-3 mr-1">
                        <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>

<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>
<script type="text/javascript">
    //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 : [
                    <% for (const s of stages) {%>
                    '第<%- s.order %>期',
                    <% } %>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true},
                splitLine : {show : true},
            },
            {
                type : 'value',
                name:'完成度',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : false},
                splitLine : {show : false},
            }
        ],
        series : [
            {
                name:'本期合同计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '合同',
                data:[
                    <% for (const s of stages) {%>
                    <%- s.contract_tp %>,
                    <% } %>
                ]
            },
            {
                name:'本期数量变更计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '变更',
                data:[
                    <% for (const s of stages) {%>
                    <%- s.qc_tp %>,
                    <% } %>
                ]
            },
            {
                name:'截至上期累计完成',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[
                    <% for (const s of stages) {%>
                    <%- ctx.helper.add(s.pre_contract_tp, s.pre_qc_tp) %>,
                    <% } %>
                ]
            },
            {
                name:'本期完成计量',
                type:'bar',
                tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                stack: '完成',
                data:[
                    <% for (const s of stages) {%>
                    <%- ctx.helper.add(s.contract_tp, s.qc_tp) %>,
                    <% } %>
                ]
            },
            {
                name:'完成度',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data:[
                    <% for (const s of stages) {%>
                    <%- ctx.helper.mul(ctx.helper.div(ctx.helper.add(s.contract_tp, s.qc_tp), tender.sum, 2), 100) %>,
                    <% } %>
                ]
            },
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //4 标段期数计量进度//
    //3 标段月进度//
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chartContainer3'));
    var option = {
        color:["#e9af68","#57b7b6"],
        title : {
            text: '标段月进度'
        },
        tooltip : {
            trigger: 'axis',
            <% if (monthProgress && monthProgress.length > 0) { %>
            formatter: "{b} <br/>{a0}：{c0} %<br/>{a1}：{c1} %",
            <% } else { %>
            formatter: "{a0}：-<br/>{a1}：-",
            <% } %>
        },
        legend: {
            data:['累计完成','本月完成']
        },
        toolbox: {
            show : true,
            feature : {
                magicType : {show: true, type: ['line', 'bar']}
            }
        },
        dataZoom : {
            show : true,
            start : 50,
            end : 100
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                data : [
                    <% for (const mp of monthProgress) { %>
                    '<%- mp.month %>',
                    <% } %>
                ]
            }
        ],
        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:[
                    <% for (const mp of monthProgress) { %>
                    <%- mp.end_ratio %>,
                    <% } %>
                ]
            },
            {
                name:'本月完成',
                type:'line',
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.4)',
                            shadowBlur: 5,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        }
                    }
                },
                data:[
                    <% for (const mp of monthProgress) { %>
                    <%- mp.ratio %>,
                    <% } %>
                ]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //3 标段月进度//
</script>
<script>
</script>