Calculation/app/view/tender/detail.ejs

<link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
<% 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 class="ml-auto">
                <div class="dropdown d-flex float-left mt-1 mr-2">
                    <a class="btn btn-sm btn-outline-dark dropdown-toggle dropdown-wd" 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 d-flex mt-1">
                        <a class="btn btn-sm btn-outline-dark dropdown-toggle dropdown-wd" 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>
                            <a href="#bd-set-11" data-toggle="modal" data-target="#bd-set-11" class="dropdown-item">概况设置</a>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body" style="background:#2c3237 !important">
            <div class="auto-main-height">
                <div class="main-height-one">
                    <div class="m-3">
                        <!--金额概况-->
                        <div class="row ml-1 mb-3">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-2 pl-0">
                                        <div class="card text-center bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-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 bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.end_qc_tp) %> <small class="float-right 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 bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-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 bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-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 bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-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 bg-dark text-white">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.yf_tp) %></h5>
                                                <p class="card-text text-muted">本期应付</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--进度条-->
                        <div class="">
                            <div class="progress">
                                <% if (tender.pre_ratio > 0) { %>
                                    <div class="progress-bar bg-success bg-green" 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 bg-blue" 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-danger bg-red" 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>
                </div>
                <!--图表1-->
                <div class="main-height-two">
                    <div class="m-3">
                        <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: 100%; 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: 100%; 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: 387px; width: 100%;">
                                        </div>
                                    <% } else  { %>
                                        <div class="card-header"><h6 class="mb-0">章节计量情况图</h6></div>
                                        <div class="card-body">
                                            <div id="jlchart3" style="height: 303px; 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-green<% } else if (sa.status === audit.stage.status.checking) { %>btn-yellow<% } else if (sa.status === audit.stage.status.checkNo) { %>btn-red<% } else { %>btn-blueOne<% } %><% if (i+1 !== lastStage.auditors.length) { %> btn-relative<% } %>" 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') %><% } %>">
                                                                <% if (lastStage.auditors.length > 1 && i !== 0) { %><i class="fa <% if (lastStage.auditors[i-1].status === audit.stage.status.checked) { %>text-green<% } else if (lastStage.auditors[i-1].status === audit.stage.status.checking) { %>text-yellow<% } else if (lastStage.auditors[i-1].status === audit.stage.status.checkNo) { %>text-red<% } else { %>text-blueOne<% } %> fa-caret-right icon-absolute icon-size"></i><% } %><%- (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-green<% } else if (la.status === audit.ledger.status.checking) { %>btn-yellow<% } else if (la.status === audit.ledger.status.checkNo) { %>btn-red<% } else { %>btn-blueOne<% } %><% if (i+1 !== tender.auditors.length) { %> btn-relative<% } %>" 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') %><% } %>">
                                                            <% if (tender.auditors.length > 1 && i !== 0) { %><i class="fa <% if (tender.auditors[i-1].status === audit.ledger.status.checked) { %>text-green<% } else if (tender.auditors[i-1].status === audit.ledger.status.checking) { %>text-yellow<% } else if (tender.auditors[i-1].status === audit.ledger.status.checkNo) { %>text-red<% } else { %>text-blueOne<% } %> fa-caret-right icon-absolute icon-size"></i><% } %><%- (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: 100%; width: 100%;"></div>
                                            </div>
                                            <div class="tab-pane" id="taizhangxiuding" >
                                                <div class="card-body p-0">
                                                    <div>
                                                        <div class="btn-group btn-group-sm btn-block">
                                                            <% 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-green<% } else if (ma.status === audit.material.status.checking) { %>btn-yellow<% } else if(ma.status === audit.material.status.checkNo) { %>btn-red<% } else { %>btn-blueOne<% } %><% if (i+1 !== materialData.auditors.length) { %> btn-relative<% } %>" 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') %><% } %>">
                                                                        <% if (materialData.auditors.length > 1 && i !== 0) { %><i class="fa <% if (materialData.auditors[i-1].status === audit.material.status.checked) { %>text-green<% } else if (materialData.auditors[i-1].status === audit.material.status.checking) { %>text-yellow<% } else if (materialData.auditors[i-1].status === audit.material.status.checkNo) { %>text-red<% } else { %>text-blueOne<% } %> fa-caret-right icon-absolute icon-size"></i><% } %><%- (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-1 table-dark">
                                                            <% 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 bottom-height">
                                    <% if (hadMap) { %>
                                        <div class="card-header"><h6 class="mb-0">章节计量情况表</h6></div>
                                        <div class="card-body">
                                            <div id="jlchart3" style="height: 100%; width: 100%;"></div>
                                        </div>
                                    <% } else { %>
                                        <div class="card-header"><h6 class="mb-0">期进度表</h6></div>
                                        <div class="card-body">
                                            <div id="chartContainer4" style="height: 100%; width: 100%;"></div>
                                        </div>
                                    <% } %>
                                </div>
                            </div>
                            <!--月进度表-->
                            <div class="col-6 pl-0">
                                <div class="card mb-3 bg-dark text-white bottom-height">
                                    <% 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" class="bottom-height-two" style="width: 100%;"></div>
                                                </div>
                                                <div class="tab-pane" id="yuejindbiao" >
                                                    <div id="chartContainer3" class="bottom-height-two" style="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: 100%; width: 100%;"></div>
                                        </div>
                                    <% } %>
                                </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: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
        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: '18%',
            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 = ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'];
                        return colorlist[params.dataIndex];
                    }
                }
            }
        }]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
    //计量支付概况 结束//
    //章节计量情况图//
    var myChart = echarts.init(document.getElementById('jlchart3'), 'dark');
    var option = {
        color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
        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: [
                <% for (const gcl of gclChapter) { %>
                '<%- gcl.code %>章',
                <% } %>
            ]

        },
        series: [
            {
                name: '台帐金额',
                type: 'bar',
                data: [
                    <% for (const gcl of gclChapter) { %>
                    <%- gcl.total_price %>,
                    <% } %>
                ]
            },
            {
                name: '截止本期计量',
                type: 'bar',
                data: [
                    <% for (const gcl of gclChapter) { %>
                    <%- gcl.end_gather_tp %>,
                    <% } %>
                ]
            }
        ]
    };

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

    //4 标段期数计量进度//
    var myChart = echarts.init(document.getElementById('chartContainer4'), 'dark');
    var option = {
        color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(204,73,80,0.7)','rgba(58,207,221,0.7)','rgba(255,255,225,0.7)'],
        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,
            right:'3%',
            feature : {
                magicType : {
                    show: true,
                    type: ['line', 'bar'],
                    title:{
                        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
                        }
                    }
                },
                areaStyle: { // 区域填充样式
                    color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(37,234,255,0.7)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(37,234,255,0.7)' // 100% 处的颜色
                            }
                        ],
                        global: false, // 缺省为 false
                    }
                },
                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
                        }
                    }
                },
                areaStyle: { // 区域填充样式
                    color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(40,167,69,0.7)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(40,167,69,0.7)' // 100% 处的颜色
                            }
                        ],
                        global: false, // 缺省为 false
                    }
                },
                data:[
                    <% for (const mp of monthProgress) { %>
                    <%- mp.ratio %>,
                    <% } %>
                ]
            }
        ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    //3 标段月进度//

    //变更审批进度//
    var myChart = echarts.init(document.getElementById('bgchart'), 'dark');
    var option = {
        color: ['rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(255,255,225,0.7)'],
        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 || ctx.session.sessionUser.is_admin) { %>
    <script src="/public/js/map/turf.min.js"></script>
    <script>
        const tenderMapList = JSON.parse(unescape('<%- escape(JSON.stringify(tenderMapList)) %>'));
    </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">
        // 画线
        $(function () {
            const map = new BMapGL.Map("map");
            // 创建地图实例

            const polyLineList = [];
            const centerPoint = { lng: 116.404, lat: 39.915 };
            const pointList = [];
            for (const tm of tenderMapList) {
                if (tm.map_json) {
                    const map_json = JSON.parse(unescape(escape(tm.map_json)));
                    const lngLatList = [];
                    for (const mj of map_json) {
                        lngLatList.push(new BMapGL.Point(mj.lng, mj.lat));
                    }
                    polyLineList.push({
                        map: lngLatList,
                        color: tm.color,
                    });
                    const center = JSON.parse(tm.center);
                    pointList.push(turf.point([center.lng, center.lat]));
                }
            }
            if (pointList.length > 0) {
                const features = turf.featureCollection(pointList);
                const center = turf.center(features);
                if (center && center.geometry && center.geometry.coordinates && center.geometry.coordinates.length === 2) {
                    centerPoint.lng = _.round(center.geometry.coordinates[0], 4);
                    centerPoint.lat = _.round(center.geometry.coordinates[1], 4);
                }
            }
            // 初始化地图，设置中心点坐标和地图级别
            const point = new BMapGL.Point(centerPoint.lng, centerPoint.lat);
            map.centerAndZoom(point, 14);
            map.enableScrollWheelZoom(true);
            map.setMapStyleV2({styleId: '20d4aea41cf71387395f2dc835f1c4b6'});
            if (polyLineList.length > 0) {
                for (const pl of polyLineList) {
                    const polyline = new BMapGL.Polyline(pl.map, {strokeColor: pl.color, strokeWeight:5, strokeOpacity:1});
                    map.addOverlay(polyline);
                }
            }
        })

    </script>
<% } %>