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">
                <a href="javascript:void(0)" title="全屏显示" id="showFull" style="font-size: 16px" class="float-left text-dark mr-3"><i class="fa fa-arrows-alt"></i></a>
                <div class="dropdown d-flex float-left mt-1 mr-2">
                    <!--<button id="showFull" class="btn btn-sm btn-outline-dark mr-2">全屏</button>-->
                    <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-12" data-toggle="modal" data-target="#bd-set-12" 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" id="big-data">
        <div style="height: 70px;display: none;<% if (ctx.tender.info.display.dayMode) { %> background-color: #fff;<% } else { %> background-color: #2c3237 !important;<% } %>" id="exitfull-div">
            <div class="title-main d-flex">
                <div class="ml-auto">
                    <div class="dropdown d-flex float-left mt-1 mr-2">
                        <button id="exitFull" class="btn btn-sm btn-secondary ml-auto">退出全屏</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-body <% if (ctx.tender.info.display.dayMode) { %>c-body-white<% } %>" <% if (!ctx.tender.info.display.dayMode) { %>style="background-color: #2c3237 !important;"<% } %>>
            <div class="sjs-height-0">
            <!--<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-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>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-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.change_tp) %></h5>
                                                <p class="card-text text-muted">已批复变更金额</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.sum) %></h5>
                                                <p class="card-text text-muted">变更后金额</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                            <div class="card-body">
                                                <h5 class="card-title card-big-title"><%- ctx.helper.formatMoney(tender.end_qc_tp) %> <small class="text-danger"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占合同比例"><%- tender.qc_ratio %>%</small></h5>
                                                <p class="card-text text-muted">截止本期变更</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>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-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>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-auto pl-0">-->
                                        <!--<div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>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-auto pl-0">
                                        <div class="card text-center <% if (!ctx.tender.info.display.dayMode) { %>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 <% if (!ctx.tender.info.display.dayMode) { %>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 <% if (!ctx.tender.info.display.dayMode) { %>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 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                    <% if (hadMap === 1) { %>
                                        <div class="card-body" id="map" style="height: 388px; width: 100%;"></div>
                                    <% } else if (hadMap === 2) { %>
                                        <div style="position:relative;height: 388px; width: 100%;">
                                            <% if (map_pic) { %>
                                            <% if (!ctx.tender.info.display.dayMode) { %>
                                            <div style="position:absolute;top:0;left:0;width:100%;height: 388px;background-color: rgba(44, 50, 55, 0.2);z-index: 10"></div>
                                            <% } %>
                                            <img style="display:block;width:100%;height: 388px;margin:0 auto;" src="<%- fujianOssPath + map_pic %>">
                                            <% } else { %>
                                            <div class="p-5 text-center text-muted">
                                                <img src="/public/images/nulllogo.png" />
                                                <div class="pt-3">请上传你的静态图片</div>
                                            </div>
                                            <% } %>
                                        </div>
                                    <% } else  { %>
                                        <div class="card-header"><h6 class="mb-0">章节计量情况图</h6></div>
                                        <div class="card-body">
                                            <div id="jlchart3" style="height: 304px; width: 100%;">
                                            </div>
                                        </div>
                                    <% } %>
                                </div>
                            </div>
                            <div class="col-3 pl-0">
                                <!--台账审批进度-->
                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>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-1 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>
                                                <% } else { %>
                                                        <div class="col-7 mb-1">
                                                            &nbsp;
                                                        </div>
                                                        <div class="col-5 text-right  mb-1">
                                                            &nbsp;
                                                        </div>
                                                        <div class="col-7">
                                                            &nbsp;
                                                        </div>
                                                        <div class="col-5 text-right">
                                                            &nbsp;
                                                        </div>
                                                <% } %>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                    <div class="card-header">
                                        <ul class="nav nav-tabs card-header-tabs panel-card-tabs <% if (ctx.tender.info.display.dayMode) { %>nav-white-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 <% if (!ctx.tender.info.display.dayMode) { %>table-dark<% } %>">
                                                            <% if (materialData) { %>
                                                                <tr><th width="60%">含税(信息价/指数法)</th><td width="20%"><%= materialData.m_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.m_tp, 1+materialData.rate/100), 2) : '0' %></td><td width="20%"><%= materialData.ex_tp !== null ? ctx.helper.round(ctx.helper.mul(materialData.ex_tp, 1+materialData.rate/100), 2) : '0' %></td></tr>
                                                                <tr><th>不含税(信息价/指数法)</th><td><%= materialData.m_tp !== null ? ctx.helper.round(materialData.m_tp, 2) : '0' %></td><td><%= materialData.ex_tp !== null ? ctx.helper.round(materialData.ex_tp, 2) : '0' %></td></tr>
                                                            <% } else { %>
                                                                <tr><th width="60%">含税(信息价/指数法)</th><td width="20%">0</td><td width="20%">0</td></tr>
                                                                <tr><th>不含税(信息价/指数法)</th><td>0</td><td>0</td></tr>
                                                            <% } %>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--期进度表-->
                            <div class="col-6">
                                <div class="card mb-3 <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %> bottom-height">
                                    <% if (hadMap === 1 || hadMap === 2) { %>
                                        <div class="card-header"><h6 class="mb-0">章节计量情况表</h6></div>
                                        <div class="card-body">
                                            <div id="jlchart3" style="height: 300px; 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 bottom-height <% if (!ctx.tender.info.display.dayMode) { %>bg-dark text-white<% } %>">
                                    <% if (hadMap === 1 || hadMap === 2) { %>
                                        <div class="card-header">
                                            <ul class="nav nav-tabs card-header-tabs panel-card-tabs <% if (ctx.tender.info.display.dayMode) { %>nav-white-tabs<% } %>" id="change-echarts">
                                                <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: 100%;"></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>
</div>
</div>
<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 %>');
    const dayMode = <%- ctx.tender.info.display.dayMode %>;
    //计量完成概况//
    var myChart = echarts.init(document.getElementById('jlchart1')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option = {
        <% if (ctx.tender.info.display.dayMode) { %>
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        <% } else { %>
        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: '0%',
            orient:'vertical'
        },
        series: [
            {
                name: '金额',
                type: 'pie',
                top:'0%',
                left:'50%',
                radius: ['100%'],
                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 myChart1 = echarts.init(document.getElementById('jlchart2')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option1 = {
        <% if (!ctx.tender.info.display.dayMode) { %>backgroundColor: '#343a40 ',<% } %>
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '18%',
            top:'5%',
            bottom: '0%',
            containLabel: true
        },
        yAxis: {
            type: 'category',
            data: ['总价', '截止应付', '截止实付']
        },
        xAxis: {
            type: 'value',
            name : '金额',
            position:'left',
            axisLabel : {
                interval: 0,//横轴信息全部显示
                rotate: 35,// 倾斜角度
                formatter: function (value, index) {
                    if (value < 0) {
                        let newValue = Math.abs(value);
                        if (newValue >= 10000 && newValue < 10000000) {
                            newValue = newValue / 10000 + "万";
                        } else if (newValue >= 10000000) {
                            newValue = newValue / 10000000 + "千万";
                        }
                        value = '-' + newValue;
                    }
                    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){
                        <% if (ctx.tender.info.display.dayMode) { %>
                        var colorlist = ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
                            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
                            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
                            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'];
                        <% } else { %>
                        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对象加载数据
    myChart1.setOption(option1);
    //计量支付概况 结束//
    //章节计量情况图//
    var myChart2 = echarts.init(document.getElementById('jlchart3')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option2 = {
        <% if (ctx.tender.info.display.dayMode) { %>
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        <% } else { %>
        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.######') + ' 元'
                // }
                formatter: function (value, index) {
                    if (value < 0) {
                        let newValue = Math.abs(value);
                        if (newValue >= 10000 && newValue < 10000000) {
                            newValue = newValue / 10000 + "万";
                        } else if (newValue >= 10000000) {
                            newValue = newValue / 10000000 + "千万";
                        }
                        value = '-' + newValue;
                    }
                    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) { %>
                <% if (parseInt(gcl.code) <= 900 || (parseInt(gcl.code) > 900 && (gcl.total_price !== 0 || gcl.end_gather_tp !== 0))) { %>
                '<%- gcl.code %>章',
                <% } %>
                <% } %>
            ]

        },
        series: [
            {
                name: '台账金额',
                type: 'bar',
                data: [
                    <% for (const gcl of gclChapter) { %>
                    <% if (parseInt(gcl.code) <= 900 || (parseInt(gcl.code) > 900 && (gcl.total_price !== 0 || gcl.end_gather_tp !== 0))) { %>
                    <%- gcl.total_price %>,
                    <% } %>
                    <% } %>
                ]
            },
            {
                name: '截止本期计量',
                type: 'bar',
                data: [
                    <% for (const gcl of gclChapter) { %>
                    <% if (parseInt(gcl.code) <= 900 || (parseInt(gcl.code) > 900 && (gcl.total_price !== 0 || gcl.end_gather_tp !== 0))) { %>
                    <%- gcl.end_gather_tp %>,
                    <% } %>
                    <% } %>
                ]
            }
        ]
    };

    // 为echarts对象加载数据
    myChart2.setOption(option2);

    //4 标段期数计量进度//
    var myChart3 = echarts.init(document.getElementById('chartContainer4')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option3 = {
        <% if (ctx.tender.info.display.dayMode) { %>
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        <% } else { %>
        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: {
            itemWidth:15,
            data:['本期合同计量','本期数量变更计量','截止上期完成','本期完成计量','完成度']
        },
        dataZoom: [
            {show: true, start: 0, end: 100,height:10,bottom:30}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : [
                    <% for (const s of stages) {%>
                    '第<%- s.order %>期',
                    <% } %>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: function (value, index) {
                        if (value < 0) {
                            let newValue = Math.abs(value);
                            if (newValue >= 10000 && newValue < 10000000) {
                                newValue = newValue / 10000 + "万";
                            } else if (newValue >= 10000000) {
                                newValue = newValue / 10000000 + "千万";
                            }
                            value = '-' + newValue;
                        }
                        if (value >= 10000 && value < 10000000) {
                            value = value / 10000 + "万";
                        } else if (value >= 10000000) {
                            value = value / 10000000 + "千万";
                        }
                        return 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对象加载数据
    myChart3.setOption(option3);
    //4 标段期数计量进度//
    //3 标段月进度//
    // 基于准备好的dom，初始化echarts图表
    var myChart4 = echarts.init(document.getElementById('chartContainer3')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option4 = {
        <% if (ctx.tender.info.display.dayMode) { %>
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        <% } else { %>
        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,
            height:10,
            bottom:30
        },
        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对象加载数据
    myChart4.setOption(option4);
    //3 标段月进度//

    //变更审批进度//
    var myChart5 = echarts.init(document.getElementById('bgchart')<% if (!ctx.tender.info.display.dayMode) { %>, 'dark'<% } %>);
    var option5 = {
        <% if (ctx.tender.info.display.dayMode) { %>
        color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
            '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
            '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
        <% } else {%>
        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: '0%',
        //     orient:'vertical',
        //     itemWidth:15,
        //     data: ['一般变更', '较大变更', '重大变更', '待上报', '审批中', '已完成']
        // },
        legend:[{
            top: '0%',
            right: '0%',
            orient:'vertical',
            itemWidth:15,
            data:['一般变更','较大变更','重大变更']
        },{
            top: '0%',
            right: '35%',
            orient:'vertical',
            itemWidth:15,
            data:['待上报','审批中','已完成']
        }],
        series: [
            {
                name: '数量',
                type: 'pie',
                top:'0%',
                right:'65%',
                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:'0%',
                right:'65%',
                radius: ['70%', '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对象加载数据
    myChart5.setOption(option5);

    function echartsReset() {
        myChart.resize();
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
    }

    $(function () {
        $('#change-echarts a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            myChart3.resize();
            myChart4.resize();
        });

        $('#showFull').click(function () {
            const full=document.getElementById("big-data");
            launchIntoFullscreen(full);
            // $('#exitFull').show();
            // $('#showFull').hide();
        });
        $('#exitFull').click(function () {
            exitFullscreen();
            // $('#exitFull').hide();
            // $('#showFull').show();
        })
    })

    $(window).resize(echartsReset);
    // 数据全屏
    function launchIntoFullscreen(element) {
        if(element.requestFullscreen){
            element.requestFullscreen();
        }
        else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
        else if(element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }
        else if(element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
    function exitFullscreen() {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    document.addEventListener("fullscreenchange", function (event) {
        if (document.fullscreenElement) {
            $('#exitfull-div').show();
            $('#showFull').hide();
        } else {
            $('#exitfull-div').hide();
            $('#showFull').show();
        }
    });
</script>
<script src="/public/js/sub_menu.js"></script>
<script>
    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
            echartsReset();
        }
    });
</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;
                const darkHTML = !dayMode ? 'bg-dark border-secondary text-white' : '';
                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, !dayMode)}
                            </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 ${darkHTML}">
                                    <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, !dayMode)}
                            </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 ${darkHTML}">
                                    <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, !dayMode)}
                        </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 ${darkHTML}">
                            <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, dayMode) {
            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="${dayMode ? 'text-light' : ''}">${mon}-${day}</span><span class="${dayMode ? 'text-light' : ''}">${hour}:${minute}:${scond}</span>`;
        };
    })
</script>
<% if (hadMap === 1 || ctx.session.sessionUser.is_admin) { %>
    <script src="/public/js/map/turf.min.js"></script>
    <script src="/public/js/map/gcoord.js"></script>
    <script>
        const tenderMapList = JSON.parse(unescape('<%- escape(JSON.stringify(tenderMapList)) %>'));
    </script>
<% } %>
<% if (hadMap === 1) { %>
    <!--<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: <%- map_json.lng %>, lat: <%- map_json.lat %> };
            let level = <%- map_json.level %>;
            const pointList = [];
            const centerList = [];
            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) {
                        const result = gcoord.transform([mj.lng, mj.lat], gcoord.WGS84, gcoord.BD09);
                        lngLatList.push(new BMapGL.Point(result[0], result[1]));
                    }
                    polyLineList.push({
                        map: lngLatList,
                        color: tm.color,
                    });
                    const center = JSON.parse(tm.center);
                    pointList.push(turf.point([center.lng, center.lat]));
                    if (tm.tips) {
                        const centerResult = gcoord.transform([map_json[Math.floor(map_json.length/2)].lng, map_json[Math.floor(map_json.length/2)].lat], gcoord.WGS84, gcoord.BD09);
                        centerList.push({ map: new BMapGL.Point(centerResult[0], centerResult[1]), color: tm.color, tips: tm.tips });
                    }
                }
            }
            if (pointList.length > 0) {
                let maxDistance = 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);
                }
                // 地图级别计算
                if (pointList.length === 1) {
                    // 只有一条路线
                    const map_json = JSON.parse(unescape(escape(tenderMapList[0].map_json)));
                    for (const mj of map_json) {
                        const distance = turf.distance(turf.point([mj.lng, mj.lat]), turf.point([centerPoint.lng, centerPoint.lat]));
                        if (distance > maxDistance) {
                            maxDistance = distance;
                        }
                    }
                } else {
                    for (const c of pointList) {
                        const distance = turf.distance(c, turf.point([centerPoint.lng, centerPoint.lat]));
                        if (distance > maxDistance) {
                            maxDistance = distance;
                        }
                    }
                }
                if (maxDistance === 0) {
                    level = 15;
                } else {
                    // 级别区间
                    // const range = [0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000, 2000, 5000, 10000];
                    const range = [10000, 5000, 2000, 1000, 500, 200, 100, 50, 25, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05, 0.02];
                    level = _.findIndex(range, function (item) {
                        return item <= maxDistance;
                    })
                    level = level + 1;
                }
                const result = gcoord.transform([centerPoint.lng, centerPoint.lat], gcoord.WGS84, gcoord.BD09);
                centerPoint.lng = result[0];
                centerPoint.lat = result[1];

            }
            // 初始化地图，设置中心点坐标和地图级别
            const point = new BMapGL.Point(centerPoint.lng, centerPoint.lat);
            map.centerAndZoom(point, level);
            // const LocationControl = new BMapGL.LocationControl();  // 添加比例尺控件
            // map.addControl(LocationControl);
            map.enableScrollWheelZoom(true);
            <% if (!ctx.tender.info.display.dayMode) { %>
            map.setMapStyleV2({styleId: '20d4aea41cf71387395f2dc835f1c4b6'});
            <% } %>
            if (polyLineList.length > 0) {
                for (const pl of polyLineList) {
                    const polyline = new BMapGL.Polyline(pl.map, {strokeColor: pl.color, strokeWeight:10, strokeOpacity:1});
                    map.addOverlay(polyline);
                }
            }
            if (centerList.length > 0) {
                for (const cl of centerList) {
                    const opts = {
                        position : cl.map,    // 指定文本标注所在的地理位置
                        offset   : new BMapGL.Size(5, 0)    //设置文本偏移量
                    }
                    const label = new BMapGL.Label(cl.tips, opts);  // 创建文本标注对象
                    label.setStyle({
                        height: '18px',
                        lineHeight : '18px',
                        color : cl.color,
                        borderRadius: '5px',
                        borderColor: cl.color,
                        padding: '0px 5px',
                        fontSize : '12px',
                        // fontFamily: '微软雅黑',
                    });
                    map.addOverlay(label);
                    // const opts = {
                    //     width: 0,
                    //     height: 0,
                    //     maxwidth: 220,
                    //     title: '路线标注：',
                    // };
                    // const infoWindow = new BMapGL.InfoWindow(cl.tips, opts);
                    // map.openInfoWindow(infoWindow, cl.map);
                }
            }
        })

    </script>
<% } %>