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" style="background:#2c3237 !important">
            <div class="sjs-height-0">
                <div class="m-3">
                    <!--金额概况-->
                    <div class="row mx-0">
                        <div class="col-1 pl-0">
                            <div class="card text-center mb-2 bg-dark text-white">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">
                                        <div class="dropdown">
                                            <a class="btn btn-sm btn-outline-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                标段
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                <a href="#bd-set-1" data-toggle="modal" data-target="#bd-set-1"  class="dropdown-item" >标段属性</a>
                                                <a href="#bd-set-2" data-toggle="modal" data-target="#bd-set-2" class="dropdown-item" >小数位数</a>
                                                <a href="#bd-set-3" data-toggle="modal" data-target="#bd-set-3" class="dropdown-item" >数量精度</a>
                                                <a href="#bd-set-4" data-toggle="modal" data-target="#bd-set-4" class="dropdown-item" >合同参数</a>
                                                <a href="#bd-set-5" data-toggle="modal" data-target="#bd-set-5" class="dropdown-item" >显示设置</a>
                                                <a href="#bd-set-6" data-toggle="modal" data-target="#bd-set-6" class="dropdown-item" >章节设置</a>
                                                <a href="#bd-set-7" data-toggle="modal" data-target="#bd-set-7" class="dropdown-item" >付款账号</a>
                                                <a class="dropdown-item" href="javascript: void(0);" id="copyBtn">拷贝设置</a>
                                            </div>
                                        </div>
                                        <% if (ctx.session.sessionUser.is_admin) { %>
                                        <div class="dropdown mt-1">
                                            <a class="btn btn-sm btn-outline-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                管理员
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                <% if (ctx.session.sessionProject.page_show !== null && parseInt(ctx.session.sessionProject.page_show.xxjd) === 1) { %>
                                                <a href="#xxjd-set" data-toggle="modal" data-target="#xxjd-set" class="dropdown-item">投资进度</a>
                                                <% } %>
                                                <a href="/tender/<%- tender.id %>/shenpi" class="dropdown-item">审批流程</a>
                                                <a href="#bd-set-9" data-toggle="modal" data-target="#bd-set-9" class="dropdown-item">游客账号 <span id="tourist-num" <% if (tourists.length !== 0) { %>class="badge badge-secondary"<% } %>><% if (tourists.length !== 0) { %><%- tourists.length %><% } %></span></a>
                                                <a href="#bd-set-10" data-toggle="modal" data-target="#bd-set-10" class="dropdown-item">上报限制</a>
                                            </div>
                                        </div>
                                        <% } %>
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-10">
                            <div class="row">
                                <div class="col-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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-2 pl-0">
                                    <div class="card text-center py-2 pb-2 mb-3 bg-dark text-white">
                                        <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>
                        <div class="col-1 pl-0">
                            <div class="card mb-3 bg-dark text-white">
                                <div class="card-header"><h6 class="mb-0">台帐修订</h6></div>
                                <div class="card-body pt-3 pb-2">
                                    <div class="circle-box">
                                        <div class="circle"></div>
                                        <span class="circle-num"><%- reviseNum %></span>
                                    </div>
                                    <div class="circle-text">次</div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-auto pl-0"></div> -->
                        <!-- <div class="col-auto pl-0"></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>
                    <!--图表1-->
                    <div class="row">
                        <div class="col-3">
                            <!--计量完成概况-->
                            <div class="card mb-3 bg-dark text-white">
                                <div class="card-header"><h6 class="mb-0">计量完成概况</h6></div>
                                <div class="card-body">
                                    <div id="jlchart1" style="height: 113px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                            <!--支付情况-->
                            <div class="card mb-3 bg-dark text-white">
                                <div class="card-header"><h6 class="mb-0">支付情况</h6></div>
                                <div class="card-body">
                                    <div id="jlchart2" style="height: 159px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--章节计量情况图-->
                        <div class="col-6 pl-0">
                            <div class="card mb-3 bg-dark text-white">
                                <% if (hadMap) { %>
                                <div class="card-body" id="map" style="height: 453px; width: 100%;">
                                </div>
                                <% } else  { %>
                                <div class="card-header"><h6 class="mb-0">章节计量情况图</h6></div>
                                <div class="card-body">
                                    <div id="jlchart3" style="height: 372px; width: 100%;">
                                    </div>
                                </div>
                                <% } %>
                            </div>
                        </div>
                        <div class="col-3 pl-0">
                            <!--台帐审批进度-->
                            <div class="card mb-3 bg-dark text-white">
                                <div class="card-header"><h6 class="mb-0"><% if (lastStage) { %>计量审批进度<% } else { %>台帐审批进度<% } %></h6></div>
                                <div class="card-body">
                                    <div style="">
                                        <div class="btn-group btn-group-sm btn-block my-1">
                                            <% if (lastStage) { %>
                                            <% if (lastStage.auditors && lastStage.auditors.length > 0) { %>
                                                <% for (const [i,sa] of lastStage.auditors.entries()) { %>
                                                    <button class="btn <% if (sa.status === audit.stage.status.checked) { %>btn-success<% } else if (sa.status === audit.stage.status.checking) { %>btn-warning<% } else if (sa.status === audit.stage.status.checkNo) { %>btn-danger<% } else { %>btn-info<% } %>" data-toggle="tooltip"
                                                            data-placement="top" data-original-title="<%- sa.name %> <% if (sa.status === audit.stage.status.checked) { %>审批完成<% } else if (sa.status === audit.stage.status.checking) { %>审批中<% } else if (sa.status === audit.stage.status.checkNo || sa.status === audit.stage.status.checkNoPre) { %>审批退回<% } else if (sa.status === audit.stage.status.checkAgain) { %>重新审批<% } %> <% if (sa.end_time) { %><%- ctx.helper.dateTran(sa.end_time, 'YYYY-MM-DD') %><% } %>"><%- (i+1) %></button>
                                                <% } %>
                                            <% } else { %>
                                                <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-original-title="">&nbsp;</button>
                                            <% } %>
                                            <% } else { %>
                                            <%if (tender.auditors && tender.auditors.length > 0) { %>
                                                <% for (const [i, la] of tender.auditors.entries()) { %>
                                                    <button class="btn <% if (la.status === audit.ledger.status.checked) { %>btn-success<% } else if (la.status === audit.ledger.status.checking) { %>btn-warning<% } else if (la.status === audit.ledger.status.checkNo) { %>btn-danger<% } else { %>btn-info<% } %>" data-toggle="tooltip"
                                                            data-placement="top" data-original-title="<%- la.name %> <% if (la.status === audit.ledger.status.checked) { %>审批完成<% } else if (la.status === audit.ledger.status.checking) { %>审批中<% } else if (la.status === audit.ledger.status.checkNo || la.status === audit.ledger.status.checkNoPre) { %>审批退回<% } %> <% if (la.end_time) { %><%- ctx.helper.dateTran(la.end_time, 'YYYY-MM-DD') %><% } %>"><%- (i+1) %></button>
                                                <% } %>
                                            <% } else { %>
                                                <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-original-title="">&nbsp;</button>
                                            <% } %>
                                            <% } %>
                                        </div>
                                        <div class="row">
                                            <div class="col-2">
                                            </div>
                                            <div class="col-8 text-center">
                                                <% if (lastStage) { %>
                                                    第<%- lastStage.order %>期
                                                    <% if (lastStage.status === audit.stage.status.uncheck) { %>
                                                    <span class="text-info"><%- lastStage.status_users %></span>
                                                    <% } else { %>
                                                    <a href="#sp-list" data-toggle="modal" data-target="#sp-list"  data-type="stage" data-order="<%- lastStage.order %>"><%- lastStage.status_users %></a>
                                                    <% } %>
                                                    <span class="<%- audit.stage.statusClass[lastStage.status] %>"><%- audit.stage.statusString[lastStage.status] %></span>
                                                <% } else { %>
                                                    <% if (tender.ledger_status === audit.ledger.status.uncheck) { %>
                                                    <span class="text-info"><%- tender.status_users %></span> <span>待上报</span>
                                                    <% } else { %>
                                                    <a href="#sp-list" data-toggle="modal" data-target="#sp-list"  data-type="ledger" data-order="<%- tender.order %>"><%- tender.status_users %></a> <span class="<%- audit.ledger.auditStringClass[tender.ledger_status] %> %>"><%- audit.ledger.auditString[tender.ledger_status] %></span>
                                                    <% } %>
                                                <% } %>
                                            </div>
                                        </div>
                                        <div class="row mt-1 border-top border-secondary pt-3 mt-2">
                                            <% if (lastStage) { %>
                                            <div class="col-7 mb-1">
                                                本期合同计量金额：
                                            </div>
                                            <div class="col-5 text-right  mb-1">
                                                <%- lastStage.contract_tp %>
                                            </div>
                                            <div class="col-7">
                                                本期变更计量金额：
                                            </div>
                                            <div class="col-5 text-right">
                                                <%- lastStage.qc_tp %>
                                            </div>
                                            <% } %>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-3 bg-dark text-white">
                                <div class="card-header">
                                    <ul class="nav nav-tabs card-header-tabs panel-card-tabs">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#taizhangshenpi" role="tab" aria-selected="true">工程变更进度</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#taizhangxiuding" role="tab" aria-selected="true">材料调差进度</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="taizhangshenpi">
                                            <div id="bgchart" style="height: 157px; width: 100%;"></div>
                                        </div>
                                        <div class="tab-pane" id="taizhangxiuding" >
                                            <div class="card-body p-3">
                                                <div style="height:125px">
                                                    <div class="btn-group btn-group-sm btn-block my-1">
                                                        <% if (materialData && materialData.auditors.length > 0) { %>
                                                        <% for (const [i, ma] of materialData.auditors.entries()) { %>
                                                        <button class="btn <% if (ma.status === audit.material.status.checked) { %>btn-success<% } else if (ma.status === audit.material.status.checking) { %>btn-warning<% } else if(ma.status === audit.material.status.checkNo) { %>btn-danger<% } else { %>btn-info<% } %>" data-toggle="tooltip"
                                                                data-placement="top" data-original-title="<%- ma.name %> <% if (ma.status === audit.material.status.checked) { %>审批完成<% } else if (ma.status === audit.material.status.checking) { %>审批中<% } else if (ma.status === audit.material.status.checkNo || ma.status === audit.material.status.checkNoPre) { %>审批退回<% } %> <% if (ma.end_time) { %><%- ctx.helper.dateTran(ma.end_time, 'YYYY-MM-DD') %><% } %>"><%- (i+1) %></button>
                                                        <% } %>
                                                        <% } else { %>
                                                        <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-original-title="">&nbsp;</button>
                                                        <% } %>
                                                        <!--<button class="btn btn-warning" data-toggle="tooltip" data-placement="top" data-original-title="温仁书 审批中">2</button>-->
                                                        <!--<button class="btn btn-info" data-toggle="tooltip" data-placement="top" data-original-title="玉安然">3</button>-->
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-2">

                                                        </div>
                                                        <div class="col-8 text-center">
                                                            第 <%- (materialData ? materialData.order : '0') %> 期
                                                            <% if (materialData) { %>
                                                            <% if (materialData.curAuditor) { %>
                                                                <a href="#sp-list" data-toggle="modal" data-target="#sp-list" data-type="material" data-order="<%- materialData.order %>"><%- materialData.curAuditor.name %></a>
                                                            <% } %>
                                                                <span class="<%- audit.material.auditProgressClass[materialData.status] %>"><%- audit.material.auditProgress[materialData.status] %></span>
                                                            <% } %>
                                                        </div>
                                                    </div>
                                                    <table class="table table-bordered table-2sm mb-0 mt-2 table-dark">
                                                        <thead><tr><th></th><th>信息价</th><th>指数法</th></tr></thead>
                                                        <% if (materialData) { %>
                                                        <tr><th>含税</th><td><%= materialData.m_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.m_tp, 1+materialData.rate/100), 2) : null %></td><td><%= materialData.ex_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.ex_tp, 1+materialData.rate/100), 2) : null %></td></tr>
                                                        <tr><th>不含税</th><td><%= materialData.m_tp !== null ? ctx.helper.round(materialData.m_tp, 2) : null %></td><td><%= materialData.ex_tp !== null ? ctx.helper.round(materialData.ex_tp, 2) : null %></td></tr>
                                                        <% } else { %>
                                                        <tr><th>含税</th><td></td><td></td></tr>
                                                        <tr><th>不含税</th><td></td><td></td></tr>
                                                        <% } %>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--期进度表-->
                        <div class="col-6">
                            <div class="card mb-3 bg-dark text-white">
                                <% if (hadMap) { %>
                                    <div class="card-header"><h6 class="mb-0">章节计量情况表</h6></div>
                                <div class="card-body">
                                    <div id="jlchart3" style="height: 338px; width: 100%;"></div>
                                </div>
                                <% } else { %>
                                    <div class="card-header"><h6 class="mb-0">期进度表</h6></div>
                                    <div class="card-body">
                                        <div id="chartContainer4" style="height: 300px; width: 100%;"></div>
                                    </div>
                                <% } %>
                            </div>
                        </div>
                        <!--月进度表-->
                        <div class="col-6 pl-0">
                            <div class="card mb-3 bg-dark text-white">
                                <% if (hadMap) { %>
                                <div class="card-header">
                                    <ul class="nav nav-tabs card-header-tabs panel-card-tabs">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#qijindubiao" role="tab" aria-selected="true">期进度表</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#yuejindbiao" role="tab" aria-selected="true">月进度表</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="qijindubiao">
                                            <div id="chartContainer4" style="height: 338px; width: 100%;"></div>
                                        </div>
                                        <div class="tab-pane" id="yuejindbiao" >
                                            <div id="chartContainer3" style="height: 338px; width: 800px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <% } else { %>
                                <div class="card-header"><h6 class="mb-0">月进度表</h6></div>
                                <div class="card-body">
                                    <div id="chartContainer3" style="height: 300px; width: 100%;"></div>
                                </div>
                                <% } %>
                            </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">
    const tenders = JSON.parse(unescape('<%- escape(JSON.stringify(tenders)) %>'));
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    const tender = JSON.parse('<%- JSON.stringify(tender) %>');
    const cur_uid = parseInt('<%- ctx.session.sessionUser.accountId %>');
    //计量完成概况//
    var myChart = echarts.init(document.getElementById('jlchart1'), 'dark');
    var option = {
        color: ['#2ba850','#d7b014','#cf4058','#177ddc','#13a8a8',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '0%',
            left: 'center'
        },
        series: [
            {
                name: '金额',
                type: 'pie',
                top:'20%',
                radius: ['70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    <% for (const s of stage_total) { %>
                    {value: <%- s.num %>, name: '<%- s.name %>'},
                    <% } %>
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //计量完成概况 结束//
    //计量支付概况//
    var myChart = echarts.init(document.getElementById('jlchart2'), 'dark');
    var option = {
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            top:'5%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: ['总价', '截止应付', '截止实付']
        },
        xAxis: {
            type: 'value',
            name : '金额',
            position:'left',
            axisLabel : {
                <% if (ctx.tender.info.display.thousandth) { %>
                formatter: function (value, index) {
                    return value.format2Str('#,##0.######') + ' 元'
                }
                <% } else { %>
                formatter: function (value, index) {
                    if (value >= 10000 && value < 10000000) {
                        value = value / 10000 + "万";
                    } else if (value >= 10000000) {
                        value = value / 10000000 + "千万";
                    }
                    return value;
                }
                <% } %>
            },
            splitArea : {show : true}
        },
        series: [{
            data: [<%- tender.total_price ? tender.total_price : 0 %>, <%- tender.end_yf_tp ? tender.end_yf_tp : 0 %>, <%- tender.end_sf_tp ? tender.end_sf_tp : 0 %>,],
            type: 'bar',
            itemStyle:{
                normal:{
                    color:function(params){
                        var colorlist = ['#2ba850','#177ddc','#cf4058','#177ddc','#13a8a8'];
                        return colorlist[params.dataIndex];
                    }
                }
            }
        }]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //计量支付概况 结束//
    //章节计量情况图//
    var myChart = echarts.init(document.getElementById('jlchart3'), 'dark');
    var option = {
        color: ['#2ba850','#d7b014','#cf4058','#177ddc','#13a8a8',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['台帐金额','截止本期计量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type : 'value',
            name : '金额',
            position:'left',
            axisLabel : {
                <% if (ctx.tender.info.display.thousandth) { %>
                formatter: function (value, index) {
                    return value.format2Str('#,##0.######') + ' 元'
                }
                <% } else { %>
                formatter: '{value} 元'
                <% } %>
                // formatter: function (value, index) {
                //     if (value >= 10000 && value < 10000000) {
                //         value = value / 10000 + "万";
                //     } else if (value >= 10000000) {
                //         value = value / 10000000 + "千万";
                //     }
                //     return value;
                // }
            },
            splitArea : {show : true}
        },
        xAxis: {
            type: 'category',
            data: ['100章', '200章', '300章', '400章', '500章', '600章', '700章', '800章', '900章']
        },
        series: [
            {
                name: '台帐金额',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230, 104970, 131744, 630230]
            },
            {
                name: '截止本期计量',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807, 121594, 134141, 681807]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);

    //4 标段期数计量进度//
    var myChart = echarts.init(document.getElementById('chartContainer4'), 'dark');
    var option = {
        color: ['#2ba850','#d7b014','#cf4058','#177ddc','#13a8a8',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        backgroundColor: '#343a40 ',
        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 : {
                    <% if (ctx.tender.info.display.thousandth) { %>
                    formatter: function (value, index) {
                        return value.format2Str('#,##0.######') + ' 元'
                    }
                    <% } else { %>
                    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',
                    <% if (ctx.tender.info.display.thousandth) { %>
                    formatter: function (params, ticket, callback) {
                        return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
                    }
                    <% } else { %>
                    tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                    <% } %>
                },
                stack: '合同',
                data:[
                    <% for (const s of stages) {%>
                    <%- s.contract_tp %>,
                    <% } %>
                ]
            },
            {
                name:'本期数量变更计量',
                type:'bar',
                tooltip : {
                    trigger: 'item',
                    <% if (ctx.tender.info.display.thousandth) { %>
                    formatter: function (params, ticket, callback) {
                        return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
                    }
                    <% } else { %>
                    tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
                    <% } %>
                },
                stack: '变更',
                data:[
                    <% for (const s of stages) {%>
                    <%- s.qc_tp %>,
                    <% } %>
                ]
            },
            {
                name:'截至上期累计完成',
                type:'bar',
                tooltip : {
                    trigger: 'item',
                    <% if (ctx.tender.info.display.thousandth) { %>
                    formatter: function (params, ticket, callback) {
                        return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
                    }
                    <% } else { %>
                    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',
                    <% if (ctx.tender.info.display.thousandth) { %>
                    formatter: function (params, ticket, callback) {
                        return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
                    }
                    <% } else { %>
                    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'), 'dark');
    var option = {
        color:["#17a2b8","#28a745"],
        backgroundColor: '#343a40 ',
        title : {
            text: '标段月进度'
        },
        tooltip : {
            trigger: 'axis',
            formatter: function (params, ticket, callback) {
                let sHint = '';
                for (const param of params) {
                    if (sHint !== '') {
                        sHint += '<br>';
                    }
                    if (sHint === '' && param.name !== '') {
                        sHint = param.name + '<br>';
                    }
                    sHint += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + param.color +'"></span>';
                    if (param.data) {
                        sHint += param.seriesName + ': ' + param.data + ' %';
                    } else {
                        sHint += param.seriesName + ': -';
                    }
                }
                return sHint;
            },
        },
        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 标段月进度//

    //变更审批进度//
    var myChart = echarts.init(document.getElementById('bgchart'), 'dark');
    var option = {
        color: ['#cf4058','#2ba850','#d7b014','#177ddc','#13a8a8',
            '#5470C6','#d38b70','#8fb7cf','#ffa500','#40e0d0',
            '#7b68ee','#1e90ff','#ff6347','#00fa9a','#ffd700',
            '#3cb371','#5c616b','#ff6666','#b8860b','#30e0e0'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '0%',
            right: 'right',
            orient:'vertical',
            data: ['一般变更', '较大变更', '重大变更', '待上报', '审批中', '已完成']
        },
        series: [
            {
                name: '数量',
                type: 'pie',
                top:'2%',
                right:'40%',
                selectedMode: 'single',
                radius:  '50%',
                avoidLabelOverlap: false,
                label: {
                    show:false,
                    //position: 'inner',
                    //fontSize: 14,
                },
                labelLine: {
                    show: false
                },
                data: [
                    <% for (const cs of change_status_total) { %>
                    {value: <%- cs.num %>, name: '<%- cs.name %>'},
                    <% } %>
                ]
            },
            {
                name: '数量',
                type: 'pie',
                top:'2%',
                right:'40%',
                radius: ['80%', '100%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        //fontSize: '14',
                        //fontWeight: 'bold'
                    }
                },
                labelLine: {
                    //show: false,
                    length: 20,
                },
                data: [
                    <% for (const cq of change_quality_total) { %>
                    {value: <%- cq.num %>, name: '<%- cq.name %>'},
                    <% } %>
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
<script>
    const tenderId = parseInt('<%- tender.id %>');
    $(document).ready(function () {
        // 获取审批流程
        $('a[data-target="#sp-list" ]').on('click', function () {
            const type = $(this).attr('data-type');
            const data = {
                order: $(this).attr('data-order'),
            };
            let url = '';
            let auditConst = '';
            if (type === 'stage') {
                url = '/tender/' + tenderId + '/measure/stage/auditors';
                auditConst = JSON.parse('<%- JSON.stringify(audit.stage) %>');
            } else if (type === 'ledger') {
                url = '/tender/' + tenderId + '/measure/ledger/auditors';
                auditConst = JSON.parse('<%- JSON.stringify(audit.ledger) %>');
            } else if (type === 'material') {
                url = '/tender/' + tenderId + '/measure/material/auditors';
                auditConst = JSON.parse('<%- JSON.stringify(audit.material) %>');
            }
            postData(url, data, function (result) {
                const { auditHistory, auditors, user } = result
                let historyHTML = ''
                const leftAuditors = auditors;
                auditHistory.forEach((auditors, idx) => {
                    if(idx === auditHistory.length - 1 && auditHistory.length !== 1) {
                        historyHTML += `<div class="text-right"><a href="javascript: void(0);" id="fold-btn" data-target="show"
                    >展开历史审批流程</a></div>`
                    }
                    historyHTML += `<div class="${idx < auditHistory.length - 1 ? 'fold-card' : ''}">
                <div class="text-center text-muted">${idx + 1}#</div>
                <ul class="timeline-list list-unstyled mt-2">`
                    auditors.forEach((auditor, index) => {
                        if (index === 0) {
                            historyHTML += `<li class="timeline-list-item pb-2">
                            <div class="timeline-item-date">
                                ${formatDate(auditor.begin_time)}
                            </div>
                            <div class="timeline-item-tail"></div>
                            <div class="timeline-item-icon bg-success text-light">
                                <i class="fa fa-caret-down"></i>
                            </div>
                            <div class="timeline-item-content">
                                <div class="card bg-dark border-secondary text-white">
                                    <div class="card-body p-3">
                                        <div class="card-text">
                                            <p class="mb-1"><span
                                                    class="h5">${user.name}</span><span
                                                    class="pull-right text-success">${idx !== 0 ? '重新' : ''}上报审批</span>
                                            </p>
                                            <p class="text-muted mb-0">${user.role}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="timeline-list-item pb-2">
                            <div class="timeline-item-date">
                                ${formatDate(auditor.end_time)}
                            </div>`

                            if(index < auditors.length - 1) {
                                historyHTML += `<div class="timeline-item-tail"></div>`
                            }
                            if(auditor.status === auditConst.status.checked) {
                                historyHTML += `<div class="timeline-item-icon bg-success text-light">
                                    <i class="fa fa-check"></i>
                                </div>`

                            } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {
                                historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                    <i class="fa fa-level-up"></i>
                                </div>`
                            } else if(auditor.status === auditConst.status.checking) {
                                historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                    <i class="fa fa-ellipsis-h"></i>
                                </div>`
                            } else {
                                historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`

                            }
                            historyHTML += `<div class="timeline-item-content">
                                <div class="card bg-dark border-secondary text-white">
                                    <div class="card-body p-3">
                                        <div class="card-text">
                                            <p class="mb-1"><span class="h5">${auditor.name}</span><span
                                                    class="pull-right ${auditConst.statusClass[auditor.status]}">${auditConst.statusString[auditor.status]}</span>
                                            </p>
                                            <p class="text-muted mb-0">${auditor.role}</p>
                                        </div>
                                    </div>`
                            if (auditor.opinion) {
                                historyHTML += `<div class="card-body p-3 border-top">
                                    <p style="margin: 0;">${auditor.opinion}</p>
                                </div>`
                            }
                            historyHTML += `</div></div></li>`
                        } else {
                            historyHTML += `<li class="timeline-list-item pb-2">
                        <div class="timeline-item-date">
                            ${formatDate(auditor.end_time)}
                        </div>`

                            if(index < auditors.length - 1) {
                                historyHTML += `<div class="timeline-item-tail"></div>`
                            }
                            if(auditor.status === auditConst.status.checked) {
                                historyHTML += `<div class="timeline-item-icon bg-success text-light">
                                <i class="fa fa-check"></i>
                            </div>`
                            } else if(auditor.status === auditConst.status.checkNo || auditor.status === auditConst.status.checkNoPre) {
                                historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                <i class="fa fa-level-up"></i>
                            </div>`

                            } else if(auditor.status === auditConst.status.checking) {
                                historyHTML += `<div class="timeline-item-icon bg-warning text-light">
                                <i class="fa fa-ellipsis-h"></i>
                            </div>`
                            } else {
                                historyHTML += `<div class="timeline-item-icon bg-secondary text-light"></div>`
                            }
                            historyHTML += `<div class="timeline-item-content">
                        <div class="card bg-dark border-secondary text-white">
                            <div class="card-body p-3">
                                <div class="card-text">
                                    <p class="mb-1"><span class="h5">${auditor.name}</span>
                                        <span
                                            class="pull-right
                                                            ${auditConst.statusClass[auditor.status]}">${auditor.status !== auditConst.status.uncheck ? auditConst.statusString[auditor.status] : ''}
                                            ${auditor.status === auditConst.status.checkNo ? user.name : ''}
                                            ${auditor.status === auditConst.status.checkNoPre ? (leftAuditors.find(item => item.order === auditor.sort-1) ? leftAuditors.find(item => item.order === auditor.sort-1).name : '') : ''}
                                        </span>
                                    </p>
                                    <p class="text-muted mb-0">${auditor.role}</p>
                                </div>
                            </div>`

                            if (auditor.opinion) {
                                historyHTML += `<div class="card-body p-3 border-top">
                            <p style="margin: 0;">${auditor.opinion} </p>
                        </div>`
                            }
                            historyHTML += `</div></div></li>`
                        }
                    })
                    historyHTML += '</ul></div>'

                })
                $('#audit-list').empty()
                $('#audit-list').append(historyHTML)
            });
        });

        // 展开/收起历史审核记录
        $('#audit-list').on('click', 'a', function() {
            const type = $(this).data('target')
            const auditCard = $(this).parent().parent()
            console.log('auditCard', auditCard)
            if (type === 'show') {
                $(this).data('target', 'hide')
                auditCard.find('.fold-card').slideDown('swing', () => {
                    auditCard.find('#end-target').text($(this).data('idx') + '#')
                    auditCard.find('#fold-btn').text('收起历史审核记录')
                })
            } else {
                $(this).data('target', 'show')
                auditCard.find('.fold-card').slideUp('swing', () => {
                    auditCard.find('#end-target').text('1#')
                    auditCard.find('#fold-btn').text('展开历史审核记录')
                })
            }
        });

        function formatDate(date) {
            if (!date) return '';
            date = new Date(date)
            const year = date.getFullYear();
            let mon = date.getMonth() + 1;
            let day = date.getDate();
            let hour = date.getHours();
            let minute = date.getMinutes();
            let scond = date.getSeconds();
            if (mon < 10) {
                mon = '0' + mon.toString();
            }
            if (day < 10) {
                day = '0' + day.toString();
            }
            if (hour < 10) {
                hour = '0' + hour.toString();
            }
            if (minute < 10) {
                minute = '0' + minute.toString();
            }
            if (scond < 10) {
                scond = '0' + scond.toString();
            }
            return `${year}<span class="text-light">${mon}-${day}</span><span class="text-light">${hour}:${minute}:${scond}</span>`;
        };
    })
</script>
<% if (hadMap) { %>
<!--<script src="//bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=C3hLZAjuWTaCdwnwoYY83APrwlPEj4v7"></script>
<script type="text/javascript">
    var map = new BMapGL.Map("map");
    // 创建地图实例
    var point = new BMapGL.Point(113.462, 22.2245);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);
    // map.setMapStyleV2({styleJson: styleJson2});
    // 画线
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(113.352, 22.166),
        new BMapGL.Point(113.572, 22.283),
        // new BMapGL.Point(116.425, 39.900)
    ], {strokeColor:"red", strokeWeight:5, strokeOpacity:1});
    map.addOverlay(polyline);
</script>
<% } %>