Calculation/app/view/datacollect/index.ejs

<link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
<div class="panel-content" style="background:#2c3237 !important">
    <div class="panel-title fluid border-top-0" style="background:#2c3237 !important">
        <div class="title-main d-flex justify-content-between">
            <div class="d-inline-block mr-2">
                <div class="btn-group" id="first-category">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                        <% if (categoryData.length > 0 && categoryData[0].value.length > 0) { %>
                        <% for (const c of categoryData[0].value) { %>
                        <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                        <% } %>
                        <% } %>
                    </div>
                </div>
                <% if (categoryData[1] && categoryData[1].value.length > 0) { %>
                <div class="btn-group" id="second-category" style="display: none">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                        <% for (const c of categoryData[1].value) { %>
                            <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                        <% } %>
                    </div>
                </div>
                <% } %>
                <% if (categoryData[2] && categoryData[2].value.length > 0) { %>
                <div class="btn-group" id="third-category" style="display: none">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
                        <% for (const c of categoryData[2].value) { %>
                            <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
                        <% } %>
                    </div>
                </div>
                <% } %>
            </div>
            <div>
                <a href="javascript:void(0)"  title="全屏显示" id="showFull" class="text-white"><i class="fa fa-arrows-alt"></i></a>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">决策大屏<span><%- ctx.subProject.data_collect %></span></button>
                    <div class="dropdown-menu" aria-labelledby="zhankai">
                        <% for (const i of ctx.subProject.data_collect_pages) { %>
                        <% if (i === '6') { %>
                            <a class="dropdown-item" href="/sp/<%- ctx.subProject.id %>/datacollect/index/<%- i %>">决策大屏<%- i %></a>
                        <% } else { %>
                            <a class="dropdown-item change-collect" href="javascript:void(0)" data-collect="<%- i %>">决策大屏<%- i %></a>
                        <% } %>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrap" id="big-data">
        <div style="height: 30px;background-color: #2c3237; display: none" 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" style="background:#2c3237 !important">
            <div class="flex-content" data-content="1" <% if (ctx.subProject.data_collect !== 1 && ctx.subProject.data_collect !== 3) { %>style="display: none"<% } %>>
                <div class="row">
                    <div class="col-3 pr-0">
                        <div class="left-content">
                            <div class="left-card-content">
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-1 height-100">
                                        <div class="card-body card-per-body">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5 class="card-title card-case-title data_tender_num">0</h5>
                                                    <p class="card-text card-case-text text-muted">标段个数</p>
                                                </div>
                                                <div class="col-6">
                                                    <h5 class="card-title card-case-title data_tender_rate">0%</h5>
                                                    <p class="card-text card-case-text text-muted">计量进度</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_price">0.00</h5>
                                            <p class="card-text card-case-text text-muted">台账金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body" data-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title="">
                                            <h5 class="card-title card-case-title data_total_checked_change_price">0.00</h5>
                                            <p class="card-text text-muted">已批复变更金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_after_change_price">0.00</h5>
                                            <p class="card-text text-muted">变更后金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_stage_price">0.00</h5>
                                            <p class="card-text text-muted">累计完成金额</p>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="height-20">-->
                                    <!--<div class="card text-center bg-dark text-white ml-2 mr-2 height-100">-->
                                        <!--<div class="card-body card-per-body">-->
                                            <!--<h5 class="card-title card-case-title data_total_material_price">0.00</h5>-->
                                            <!--<p class="card-text text-muted">材料调差</p>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                            <!--饼图-->
                            <div class="left-chart">
                                <div class="card height-100 bg-dark mt-2 ml-2 mr-2">
                                    <div id="jechart" class="jechart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 pl-0 pr-0">
                        <div class="center-content mr-2">
                            <div class="center-chart-content">
                                <div class="center-di">
                                    <div class="card bg-dark height-100">
                                        <div class="jlchart" data-chart-num="1" id="jlchart" style="height: 100%; width: 100%; <% if (ctx.subProject.data_collect === 3) { %>display:none;<% } %>"></div>
                                        <div class="di-content mb-2" id="map1" style="background: #343A40; width: 100%; <% if (ctx.subProject.data_collect === 1) { %>display:none;<% } %>">
                                        </div>
                                    </div>
                                </div>
                                <div class="center-chart">
                                    <div class="card height-100 bg-dark mt-2">
                                        <div class="jlchart" data-chart-num="2" id="jlchart" style="height: 100%; width: 100%; <% if (ctx.subProject.data_collect === 1) { %>display:none;<% } %>"></div>
                                        <div class="di-content mb-2" <% if (ctx.subProject.data_collect === 3) { %>style="display:none;"<% } %>>
                                            <div class="jldbchart" data-chart-num="1" id="jldbchart" style="height: 100%; width: 100%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="center-table">
                                <div class="card height-100 bg-dark mt-2">
                                    <h6 class="bg-dark text-center text-white m-0 py-3">标段明细数据</h6>
                                    <div class="tablebox">
                                        <table id="tableId">
                                            <thead>
                                            <tr>
                                                <th>标段</th>
                                                <th>期数</th>
                                                <th>0号台账</th>
                                                <th>本期完成</th>
                                                <th>截止本期完成</th>
                                                <th>本期应付</th>
                                                <th>截止本期应付</th>
                                            </tr>
                                            </thead>
                                            <tbody class="stage-data">
                                            </tbody>
                                        </table>
                                        <table id="tableId1"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 pl-0">
                        <div class="right-content">
                            <div class="right-chart-content">
                                <div class="right-month">
                                    <h6 class="card bg-dark text-center text-white m-0 pt-2 pb-3">本月审批统计</h6>
                                    <div class="row right-month-height">
                                        <div class="col-6 pr-0 height-50">
                                            <div class="card text-center bg-dark text-white border-right-0 border-botton-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_stage_num">0</span><small class="small-text">期</small></h5>
                                                    <p class="card-text text-muted height-50">计量期</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pl-0 height-50">
                                            <div class="card text-center bg-dark text-white border-botton-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_change_num">0</span><small  class="small-text">条</small></h5>
                                                    <p class="card-text text-muted height-50">变更令</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pr-0 height-50">
                                            <div class="card text-center bg-dark text-white border-right-0 border-top-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_revise_num">0</span><small  class="small-text">次</small></h5>
                                                    <p class="card-text text-muted height-50">台账修订</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 pl-0 height-50">
                                            <div class="card text-center bg-dark text-white border-top-0 height-100">
                                                <div class="card-body card-small-body height-100">
                                                    <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_material_num">0</span><small  class="small-text">期</small></h5>
                                                    <p class="card-text text-muted height-50">材料调差</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right-chart">
                                    <div class="card height-100 bg-dark">
                                        <div class="jlwcdchart" id="jlwcdchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-biaoduan">
                                <div class="card height-100 bg-dark mt-2">
                                    <h6 class="bg-dark text-center text-white m-0 py-3">标段审批信息</h6>
                                    <div id="review_box" class="review_box m-0 p-3 mb-2">
                                        <ul class="list-unstyled list-comment" id="comment1">
                                            <% for (const notice of noticeList) { %>
                                                <% if(notice.type === pushType.stage) { %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-success">计量审批</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                    <a href="/tender/<%- notice.tid %>/measure/stage/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                    <span class="<%- acStage.statusClass[notice.status] %>"><%- acStage.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } else if(notice.type === pushType.material) { %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-secondary">材料调差</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                    <a href="/tender/<%- notice.tid %>/measure/material/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                    <span class="<%- acMaterial.statusClass[notice.status] %>"><%- acMaterial.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } else if(notice.type === pushType.ledger) { %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-info">台账审批</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a data-id="<%- notice.id %>"href="/tender/<%- notice.tid %>/ledger" class="text-white"><%- notice.name %></a> <span class="<%- acLedger.statusClass[notice.status] %>"><%- acLedger.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } else if(notice.type === pushType.revise) { %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-info">台账修订</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                    <a href="/tender/<%- notice.tid %>/revise/info" class="text-white">台账修订(第<%- notice.corder %>次)</a>
                                                                    <span class="<%- acRevise.statusClass[notice.status] %>"><%- acRevise.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } else if(notice.type === pushType.change){ %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-danger">变更审批</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                    <a href="/tender/<%- notice.tid %>/change/<%- notice.cid %>/information" class="text-white"><%- notice.c_code %> </a>
                                                                    <span class="<%- acChange.statusClass[notice.status] %>"><%- acChange.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } else if(notice.type === pushType.advance) { %>
                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                        <div class="media-body">
                                                            <div class="row">
                                                                <div class="col-2"><span class="badge badge-warning">预付款</span></div>
                                                                <div class="col-10 text-white">
                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                    <a href="/tender/<%- notice.tid %>/advance/<%- notice.vid %>/detail" class="text-white">第<%- notice.order %>期</a>
                                                                    <span class="<%- acAdvance.statusClass[notice.status] %>"><%- acAdvance.statusString[notice.status]%></span>
                                                                </div>
                                                            </div>
                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                            </p>
                                                        </div>
                                                    </li>
                                                <% } %>
                                            <% } %>
                                        </ul>
                                        <ul id="comment2" class="list-comment"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-content" data-content="2" <% if (ctx.subProject.data_collect !== 2 && ctx.subProject.data_collect !== 4) { %>style="display: none"<% } %>>
                <div class="mx-3">
                    <div class="row">
                        <div class="col-6 pr-1">
                            <div class="left-content">
                                <div class="left-small-card-content ml-3">
                                    <div class="row height-100">
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white ml-0 mr-0 height-100">
                                                <div class="card-body card-per-body">
                                                    <div class="row height-100">
                                                        <div class="col-6">
                                                            <h5 class="card-title card-case-title data_tender_num">0</h5>
                                                            <p class="card-text card-case-text text-muted">标段个数</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <h5 class="card-title card-case-title data_tender_rate">0%</h5>
                                                            <p class="card-text card-case-text text-muted">计量进度</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white height-100">
                                                <div class="card-body card-per-body">
                                                    <h5 class="card-title card-case-title data_total_price">0.00</h5>
                                                    <p class="card-text card-case-text text-muted">台账金额</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white height-100">
                                                <div class="card-body card-per-body" data-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title="">
                                                    <h5 class="card-title card-case-title data_total_checked_change_price">0.00</h5>
                                                    <p class="card-text text-muted">已批复变更金额</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="left-big-chart-content">
                                    <div class="card height-60 bg-dark mt-2 mb-2">
                                        <div class="jlchart" id="jlchart" style="height: 100%; width: 100%;"></div>
                                    </div>
                                    <div class="height-36">
                                        <div class="row height-100">
                                            <div class="col-6 pr-2">
                                                <div class="left-bottom-chart height-100">
                                                    <div class="card height-100 bg-dark">
                                                        <div class="jlwcdchart" id="jlwcdchart" style="height: 100%; width: 100%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6 pl-0">
                                                <div class="left-bottom-chart height-100">
                                                    <div class="card height-100 bg-dark">
                                                        <div id="tztjchart" style="height: 100%; width: 100%;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 pl-1 pr-0">
                            <div class="right-content">
                                <div class="right-small-card-content mx-3">
                                    <div class="row height-100">
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white mb-2 height-100">
                                                <div class="card-body card-per-body">
                                                    <h5 class="card-title card-case-title data_total_after_change_price">0.00</h5>
                                                    <p class="card-text text-muted">变更后金额</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white height-100">
                                                <div class="card-body card-per-body">
                                                    <h5 class="card-title card-case-title data_total_stage_price">0.00</h5>
                                                    <p class="card-text card-case-text text-muted">累计完成金额</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 pl-0">
                                            <div class="card text-center bg-dark text-white height-100">
                                                <div class="card-body card-per-body">
                                                    <h5 class="card-title card-case-title data_total_advance_price">0.00</h5>
                                                    <p class="card-text card-case-text text-muted">预付款</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="col-4 pl-0">-->
                                            <!--<div class="card text-center bg-dark text-white height-100">-->
                                                <!--<div class="card-body card-per-body">-->
                                                    <!--<h5 class="card-title card-case-title data_total_material_price">0.00</h5>-->
                                                    <!--<p class="card-text card-case-text text-muted">材料调差</p>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                                <div class="right-big-chart-content mr-3">
                                    <div class="height-60 mt-2">
                                        <div class="card height-100 bg-dark">
                                            <div class="jldbchart" data-chart-num="2" id="jldbchart" style="height: 100%; width: 100%; <% if (ctx.subProject.data_collect === 4) { %>display:none;<% } %>"></div>
                                            <div class="di-content mb-2" id="map2" style="height: 100%; width: 100%; <% if (ctx.subProject.data_collect === 2) { %>display:none;<% } %>"></div>
                                        </div>
                                    </div>
                                    <div class="height-36 mt-2">
                                        <div class="height-100 right-bottom-50-fl">
                                            <div class="left-bd-scroll height-100 mr-1">
                                                <div class="card bg-dark height-100">
                                                    <h6 class="bg-dark text-center text-white m-0 py-3">标段审批信息</h6>
                                                    <div id="review_box2" class="review_box m-0 p-3 mb-2 height-100">
                                                        <ul class="list-unstyled list-comment" id="comment3">
                                                            <% for (const notice of noticeList) { %>
                                                                <% if(notice.type === pushType.stage) { %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-success">计量审批</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                                    <a href="/tender/<%- notice.tid %>/measure/stage/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                                    <span class="<%- acStage.statusClass[notice.status] %>"><%- acStage.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } else if(notice.type === pushType.material) { %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-secondary">材料调差</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                                    <a href="/tender/<%- notice.tid %>/measure/material/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                                    <span class="<%- acMaterial.statusClass[notice.status] %>"><%- acMaterial.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } else if(notice.type === pushType.ledger) { %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-info">台账审批</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a data-id="<%- notice.id %>"href="/tender/<%- notice.tid %>/ledger" class="text-white"><%- notice.name %></a> <span class="<%- acLedger.statusClass[notice.status] %>"><%- acLedger.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } else if(notice.type === pushType.revise) { %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-info">台账修订</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                                    <a href="/tender/<%- notice.tid %>/revise/info" class="text-white">台账修订(第<%- notice.corder %>次)</a>
                                                                                    <span class="<%- acRevise.statusClass[notice.status] %>"><%- acRevise.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } else if(notice.type === pushType.change){ %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-danger">变更审批</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                                    <a href="/tender/<%- notice.tid %>/change/<%- notice.cid %>/information" class="text-white"><%- notice.c_code %> </a>
                                                                                    <span class="<%- acChange.statusClass[notice.status] %>"><%- acChange.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } else if(notice.type === pushType.advance) { %>
                                                                    <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                                        <div class="media-body">
                                                                            <div class="row">
                                                                                <div class="col-2"><span class="badge badge-warning">预付款</span></div>
                                                                                <div class="col-10 text-white">
                                                                                    <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                                    <a href="/tender/<%- notice.tid %>/advance/<%- notice.vid %>/detail" class="text-white">第<%- notice.order %>期</a>
                                                                                    <span class="<%- acAdvance.statusClass[notice.status] %>"><%- acAdvance.statusString[notice.status]%></span>
                                                                                </div>
                                                                            </div>
                                                                            <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                                <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                            </p>
                                                                        </div>
                                                                    </li>
                                                                <% } %>
                                                            <% } %>
                                                        </ul>
                                                        <ul id="comment4" class="list-comment"></ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="height-100 right-bottom-50-fl">
                                            <div class="right-month height-100 ml-1">
                                                <h6 class="card bg-dark text-center text-white m-0 py-3">本月审批统计</h6>
                                                <div class="row right-month-height">
                                                    <div class="col-6 pr-0">
                                                        <div class="card text-center bg-dark text-white border-right-0 border-botton-0 height-100">
                                                            <div class="card-body card-small-body">
                                                                <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_stage_num">0</span><small class="small-text">期</small></h5>
                                                                <p class="card-text text-muted height-50">计量期</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 pl-0">
                                                        <div class="card text-center bg-dark text-white border-botton-0 height-100">
                                                            <div class="card-body card-small-body">
                                                                <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_change_num">0</span><small class="small-text">条</small></h5>
                                                                <p class="card-text text-muted height-50">变更令</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 pr-0">
                                                        <div class="card text-center bg-dark text-white border-right-0 border-top-0 height-100">
                                                            <div class="card-body card-small-body">
                                                                <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_revise_num">0</span><small class="small-text">次</small></h5>
                                                                <p class="card-text text-muted height-50">台账修订</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-6 pl-0">
                                                        <div class="card text-center bg-dark text-white border-top-0 height-100">
                                                            <div class="card-body card-small-body">
                                                                <h5 class="card-title card-approve-title height-50"><span class="card-approve-big month_material_num">0</span><small class="small-text">期</small></h5>
                                                                <p class="card-text text-muted height-50">材料调差</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <% if (ctx.helper._.includes(ctx.subProject.data_collect_pages, '5')) { %>
            <div class="flex-content" data-content="5" <% if (ctx.subProject.data_collect !== 5) { %>style="display: none"<% } %>>
                <div class="row">
                    <div class="col-3 pr-0">
                        <div class="left-content">
                            <div class="left-card-content">
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-1 height-100">
                                        <div class="card-body card-per-body">
                                            <div class="row">
                                                <div class="col-6">
                                                    <h5 class="card-title card-case-title data_tender_num">0</h5>
                                                    <p class="card-text card-case-text text-muted">工区个数</p>
                                                </div>
                                                <div class="col-6">
                                                    <h5 class="card-title card-case-title data_tender_rate">0%</h5>
                                                    <p class="card-text card-case-text text-muted">计量进度</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_price">0.00</h5>
                                            <p class="card-text card-case-text text-muted">台账金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body" data-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title="">
                                            <h5 class="card-title card-case-title data_total_checked_change_price">0.00</h5>
                                            <p class="card-text text-muted">已批复变更金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_after_change_price">0.00</h5>
                                            <p class="card-text text-muted">变更后金额</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="height-20 mb-2">
                                    <div class="card text-center bg-dark text-white ml-2 mr-2 py-2 height-100">
                                        <div class="card-body card-per-body">
                                            <h5 class="card-title card-case-title data_total_stage_price">0.00</h5>
                                            <p class="card-text text-muted">累计完成金额</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--饼图-->
                            <div class="left-chart">
                                <div class="card height-100 bg-dark mt-2 ml-2 mr-2">
                                    <div id="jechart5" class="jechart" style="height: 100%; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-9 pl-0">
                        <div class="center-content">
                            <div class="center-chart-content">
                                <div class="height-100">
                                    <div class="row pl-0 pr-0 center-di">
                                        <div class="col-12">
                                            <div class="card bg-dark height-100">
                                                <div class="jlchart" style="height: 100%; width: 100%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row pl-3 pr-0 center-chart">
                                        <div class="col-8 pl-0 pr-0 height-100">
                                            <div class="card height-100 bg-dark mt-2 mr-2">
                                                <div class="di-content mb-2">
                                                    <div class="jldbchart" id="jldbchart5" style="height: 100%; width: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4 pl-0 pr-0 height-100">
                                            <div class="card height-100 bg-dark mt-2 mb-2">
                                                <div class="jlwcdchart" id="jlwcdchart5" style="height: 100%; width: 100%;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row pl-3 pr-0 center-table">
                                <div class="col-8 pl-0 pr-0 height-100">
                                    <div class="mr-2 height-100">
                                        <div class="card height-100 bg-dark mt-2">
                                            <h6 class="bg-dark text-center text-white m-0 py-3">各工区明细数据</h6>
                                            <div class="tablebox">
                                                <table id="tableId2">
                                                    <thead>
                                                    <tr>
                                                        <th>标段</th>
                                                        <th>期数</th>
                                                        <th>0号台账</th>
                                                        <th>本期完成</th>
                                                        <th>截止本期完成</th>
                                                        <th>本期应付</th>
                                                        <th>截止本期应付</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody class="stage-data">
                                                    </tbody>
                                                </table>
                                                <table id="tableId3"></table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 pl-0 pr-0 height-100">
                                    <div class="card height-100 bg-dark mt-2 pr-3">
                                        <h6 class="bg-dark text-center text-white m-0 py-3">各工区审批信息</h6>
                                        <div id="review_box3" class="review_box m-0 p-3 mb-2">
                                            <ul class="list-unstyled list-comment" id="comment5">
                                                <% for (const notice of noticeList) { %>
                                                    <% if(notice.type === pushType.stage) { %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-success">计量审批</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/measure/stage/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                        <span class="<%- acStage.statusClass[notice.status] %>"><%- acStage.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } else if(notice.type === pushType.material) { %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-secondary">材料调差</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/measure/material/<%- notice.order %>" class="text-white">第<%- notice.order %>期 </a>
                                                                        <span class="<%- acMaterial.statusClass[notice.status] %>"><%- acMaterial.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } else if(notice.type === pushType.ledger) { %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-info">台账审批</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a data-id="<%- notice.id %>"href="/tender/<%- notice.tid %>/ledger" class="text-white"><%- notice.name %></a> <span class="<%- acLedger.statusClass[notice.status] %>"><%- acLedger.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } else if(notice.type === pushType.revise) { %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-info">台账修订</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/revise/info" class="text-white">台账修订(第<%- notice.corder %>次)</a>
                                                                        <span class="<%- acRevise.statusClass[notice.status] %>"><%- acRevise.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } else if(notice.type === pushType.change){ %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-danger">变更审批</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/change/<%- notice.cid %>/information" class="text-white"><%- notice.c_code %> </a>
                                                                        <span class="<%- acChange.statusClass[notice.status] %>"><%- acChange.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } else if(notice.type === pushType.advance) { %>
                                                        <li class="media pb-3 mb-3 border-bottom-grey-1">
                                                            <div class="media-body">
                                                                <div class="row">
                                                                    <div class="col-2"><span class="badge badge-warning">预付款</span></div>
                                                                    <div class="col-10 text-white">
                                                                        <a href="/tender/<%- notice.tid %>" class="text-white"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/advance/<%- notice.vid %>/detail" class="text-white">第<%- notice.order %>期</a>
                                                                        <span class="<%- acAdvance.statusClass[notice.status] %>"><%- acAdvance.statusString[notice.status]%></span>
                                                                    </div>
                                                                </div>
                                                                <p class="mt-1 mb-0 text-white"><%- notice.su_name %><small class="ml-1 text-muted"><%- (notice.su_role ? '- ' + notice.su_role : '') %></small>
                                                                    <span class="pull-right text-muted"><%- ctx.helper.formatFullDate(notice.create_time) %></span>
                                                                </p>
                                                            </div>
                                                        </li>
                                                    <% } %>
                                                <% } %>
                                            </ul>
                                            <ul id="comment6" class="list-comment"></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <% } %>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/datacollect_scroll.js"></script>
<script type="text/javascript">  autoFlashHeight();</script>
<script type="text/javascript">
    const is_dz = <%- ctx.helper._.includes(ctx.subProject.data_collect_pages, '5') %>;
    // 分类金额饼图表
    var chart1 = document.getElementsByClassName('jechart');
    // var myChart1 = echarts.init(document.getElementById('jechart'), 'dark');
    option1 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            // 当前鼠标位置
            position: 'right',
        },
        title: {
            text: '金额统计图',
            left: 'center',
            top:'7%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        // tooltip: {
        //     trigger: 'item'
        // },
        // legend: {
        //     orient: 'vertical',
        //     left: 'center',
        // },
        series: [
            {
                name: '台账金额',
                type: 'pie',
                radius: '60%',
                top:'15%',
                formatter: function(name){
                    return name.length>10?name.substr(0,10)+"...":name;
                },
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var myChart1_1 = echarts.init(chart1[0], 'dark');
    myChart1_1.setOption(option1);
    if (is_dz) {
        var myChart1_2 = echarts.init(chart1[1], 'dark');
        myChart1_2.setOption(option1);
    }
    // 计量情况柱状图表
    // var myChart2 = echarts.init(document.getElementsByClassName('jlchart')[0], 'dark');
    option2 = {
        title: {
            text: '计量情况',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },

        dataZoom: [
            {
                brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                show: true,
                realtime: true,
                showdetail: false,
                showDataShadow: false,
                // dataZoomIndex: 10,
                start: 0,
                end: 8,
                handleSize: 0,
                height: 10,
                bottom: '10%',
            },
            // {
            //     // realtime: true,
            //     type: 'slider',
            //     show: true,
            //     realtime: true,
            //     showdetail: false,
            //     showDataShadow: false,
            //     // dataZoomIndex: 10,
            //     start: 0,
            //     end: 8,
            //     handleSize: 0,
            //     bottom:30,
            //     height:10,
            // }
        ],
        legend: {
            data: ['台账', '截止合同计量', '截止变更计量'],
            top:'17%'
        },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    },
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 6) {
                            res = res.substring(0, 5) + "..";
                        }
                        return res;
                    }
                }
            }
        ],
        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}
            },
            // {
            //     type: 'value',
            //     name:'完成度',
            //     position: 'right',
            //     min:0,
            //     max:100,
            //     axisLabel : {
            //         formatter: '{value} %'
            //     },
            //     splitArea : {show : true}
            // }
        ],
        series: [
            {
                name: '台账',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '截止合同计量',
                type: 'bar',
                stack: '计量',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '截止变更计量',
                type: 'bar',
                stack: '计量',
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    var chart2 = document.getElementsByClassName('jlchart');
    var myChart2_1 = echarts.init(chart2[0], 'dark');
    var myChart2_2 = echarts.init(chart2[1], 'dark');
    var myChart2_3 = echarts.init(chart2[2], 'dark');
    myChart2_1.setOption(option2);
    myChart2_2.setOption(option2);
    myChart2_3.setOption(option2);
    if (is_dz) {
        var myChart2_4 = echarts.init(chart2[3], 'dark');
        const option2_4 = _.cloneDeep(option2);
        option2_4.title.text = '各工区计量情况';
        myChart2_4.setOption(option2_4);
    }
    // myChart2.setOption(option);
    // 计量完成度统计柱状图表
    // var myChart3 = echarts.init(document.getElementsByClassName('jlwcdchart')[0], 'dark');
    option3 = {
        title: {
            text: '计量完成度统计',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                interval: 0,
                // textStyle: {
                //     color: "#fff",
                //     fontSize: 14
                // },
                formatter: function(value) {
                    var res = value;
                    if(res.length > 6) {
                        res = res.substring(0, 5) + "..";
                    }
                    return res;
                }
            }
        },
        dataZoom: [
            {
                brushSelect:false,
                start: 0,
                end: 10,
                type: 'slider',
                show: true,
                handleSize: 0,
                realtime: true,
                showDetail: false,
                // filterMode: 'empty',
                yAxisIndex: [0,1],
                width: 10,
                height: '80%',
                right: '5%',
                bottom:'2%'
            },
        ],
        series: [
            {
                name: '完成度',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    var chart3 = document.getElementsByClassName('jlwcdchart');
    var myChart3_1 = echarts.init(chart3[0], 'dark');
    var myChart3_2 = echarts.init(chart3[1], 'dark');
    myChart3_1.setOption(option3);
    myChart3_2.setOption(option3);
    if (is_dz) {
        var myChart3_3 = echarts.init(chart3[2], 'dark');
        const option3_3 = _.cloneDeep(option3);
        option3_3.title.text = '各工区计量完成百分比统计';
        myChart3_3.setOption(option3_3);
    }
    // 计量对比线形图表
    option4 = {
        title: {
            text: '计量对比',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['本月计量', '累计计量'],
            top:'15%'
        },
        grid: {
            top:'25%',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                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;
                    }
                },
            }
        ],
        dataZoom: [
            {
                brushSelect: false,
                showdetail: false,
                show: true,
                realtime: true,
                dataZoomIndex: 10,
                start: 0,
                end: 5,
                handleSize: 0,
                height: 10,
                bottom: '10%'
            },
        ],
        series: [
            {
                name: '本月计量',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '累计计量',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    var chart4 = document.getElementsByClassName('jldbchart');
    var myChart4_1 = echarts.init(chart4[0], 'dark');
    var myChart4_2 = echarts.init(chart4[1], 'dark');
    myChart4_1.setOption(option4);
    myChart4_2.setOption(option4);
    if (is_dz) {
        var myChart4_3 = echarts.init(chart4[2], 'dark');
        const option4_3 = _.cloneDeep(option4);
        option4_3.title.text = '全线计量对比';
        myChart4_3.setOption(option4_3);
    }
    // for (var i = 0; i < chart4.length; i++) {
    //     var myChart4 = echarts.init(chart4[i], 'dark');
    //     myChart4.setOption(option);
    // }
    // 投资统计分析圆饼图表
    var myChart5 = echarts.init(document.getElementById('tztjchart'), 'dark');
    option5 = {
        title: {
            text: '投资统计分析',
            left: 'center',
            top:'7%'
        },
        color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
            'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
            'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
            'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
            'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
            'rgba(242, 179, 82, 0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item',
        },
        series: [
            {
                name: '数据来源',
                type: 'pie',
                top:'15%',
                bottom:'10%',
                radius: <% if (categoryData && categoryData[2] && categoryData[2].value.length > 0) { %>['0%', '30%']<% } else if (categoryData && categoryData[1] && categoryData[1].value.length > 0) { %>['0%', '50%']<% } else { %>['0%', '85%']<% } %>,
                // label: {
                //     position: 'inner',
                //     fontSize: 14
                // },
                label:{
                    show:false
                },
                labelLine: {
                    show: true
                },
                formatter: function(name){
                    return name.length>10?name.substr(0,10)+"...":name;
                },
                data: [
                ]
            },
            {
                name: '数据来源',
                type: 'pie',
                top:'15%',
                bottom:'10%',
                radius: <% if (categoryData && categoryData[2] && categoryData[2].value.length > 0) { %>['30%', '60%']<% } else { %>['50%', '85%']<% } %>,
                // label: {
                //     position: 'inner',
                //     fontSize: 14
                // },
                label:{
                    show:false
                },
                labelLine: {
                    show: true,
                },
                formatter: function(name){
                    return name.length>10?name.substr(0,10)+"...":name;
                },
                data: [
                ]
            },
            {
                name: '数据来源',
                type: 'pie',
                top:'15%',
                bottom:'10%',
                radius: ['60%', '85%'],
                // label: {
                //     position: 'inner',
                //     fontSize: 14
                // },
                label:{
                    show:false
                },
                labelLine: {
                    show: true
                },
                formatter: function(name){
                    return name.length>10?name.substr(0,10)+"...":name;
                },
                data: [
                ]
            }
        ]
    };
    myChart5.setOption(option5);

    function echartsReset() {
        myChart1_1.resize();
        myChart2_1.resize();
        myChart2_2.resize();
        myChart2_3.resize();
        myChart3_1.resize();
        myChart3_2.resize();
        myChart4_1.resize();
        myChart4_2.resize();
        myChart5.resize();
        if (is_dz) {
            myChart1_2.resize();
            myChart2_4.resize();
            myChart3_3.resize();
            myChart4_3.resize();
        }
    }
    $(function () {
        $('#showFull').click(function () {
            const full=document.getElementById("big-data");
            launchIntoFullscreen(full);
        });
        $('#exitFull').click(function () {
            exitFullscreen();
        })
    })
    let resizeTimer = null;
    $(window).bind('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            echartsReset();
            $(".tableid_").find('th').each(function(i) {
                $(this).css('width', $('#tableId').find('th:eq(' + i + ')').innerWidth());
                $(this).css('width', $('#tableId2').find('th:eq(' + i + ')').innerWidth());
            });
        }, 500);
    })

    // 数据全屏
    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>

    const originDataCollect = parseInt('<%- ctx.subProject.data_collect %>');
    const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
    let tenders = '';
    // let noticeList = '';
    $(function () {
        postData(`/sp/${spid}/datacollect/load`, {}, function (result) {
            tenders = result.tenderList;
            const chart_option5_data = {
                data1: [],
                data2: [],
                data3: [],
            }
            const chart_category_data = {
                data1: [],
                data2: [],
                data3: [],
            }
            let option5_is_tender = false;
            // 设置圆环图5数据，还要设置圆环图大小
            if (category && category.length > 0) {
                if (category[0] && category[0].value.length > 0) {
                    for (const c of category[0].value) {
                        chart_category_data.data1.push([{
                            cid: category[0].id,
                            value: c.id,
                        }]);
                        chart_option5_data.data1.push({
                            value: 0,
                            name: c.value,
                        });
                    }
                }
                if (category[1] && category[1].value.length > 0) {
                    for (const cc1 of chart_category_data.data1) {
                        for (const c of category[1].value) {
                            chart_category_data.data2.push([...cc1, {
                                cid: category[1].id,
                                value: c.id,
                            }]);
                        }
                    }
                    for (const cd1 of chart_option5_data.data1) {
                        for (const c of category[1].value) {
                            chart_option5_data.data2.push({
                                value: 0,
                                name: cd1.name + ' ' + c.value,
                            });
                        }
                    }
                }
                if (category[2] && category[2].value.length > 0) {
                    for (const cc2 of chart_category_data.data2) {
                        for (const c of category[2].value) {
                            chart_category_data.data3.push([...cc2, {
                                cid: category[2].id,
                                value: c.id,
                            }]);
                        }
                    }
                    for (const cd2 of chart_option5_data.data2) {
                        for (const c of category[2].value) {
                            chart_option5_data.data3.push({
                                value: 0,
                                name: cd2.name + ' ' + c.value,
                            });
                        }
                    }
                }
            } else {
                option5_is_tender = true;
            }
            for (const t of tenders) {
                calculateTender(t);
                if (option5_is_tender) {
                    if (t.total_price) chart_option5_data.data1.push({ value: t.total_price, name: t.name});
                } else {
                    for (const cc1 of chart_category_data.data1) {
                        const sameObject = _.intersectionWith(t.category, cc1, _.isEqual);
                        if(sameObject.length === 1) {
                            const index = _.findIndex(chart_category_data.data1, function (item) {
                                return _.isEqual(_.sortBy(item, 'cid'), _.sortBy(sameObject, 'cid'));
                            });
                            if (index !== -1) {
                                chart_option5_data.data1[index].value = ZhCalc.add(chart_option5_data.data1[index].value, (t.total_price ? t.total_price : 0));
                            }
                        }
                        // const index = sameObject[0] ? _.findIndex(cc1, { cid: sameObject[0].cid, value: sameObject[0].value }) : -1;
                        // console.log(cc1, chart_category_data.data1, index);
                        // if (index !== -1) {
                        //     chart_option5_data.data1[index].value = ZhCalc.add(chart_option5_data.data1[index].value, (t.total_price ? t.total_price : 0));
                        // }
                    }
                    for (const cc2 of chart_category_data.data2) {
                        const sameObject = _.intersectionWith(t.category, cc2, _.isEqual);
                        if(sameObject.length === 2) {
                            const index = _.findIndex(chart_category_data.data2, function (item) {
                                return _.isEqual(_.sortBy(item, 'cid'), _.sortBy(sameObject, 'cid'));
                            })
                            if (index !== -1) {
                                chart_option5_data.data2[index].value = ZhCalc.add(chart_option5_data.data2[index].value, (t.total_price ? t.total_price : 0));
                            }
                        }
                    }
                    for (const cc3 of chart_category_data.data3) {
                        const sameObject = _.intersectionWith(t.category, cc3, _.isEqual);
                        if(sameObject.length === 3) {
                            const index = _.findIndex(chart_category_data.data3, function (item) {
                                return _.isEqual(_.sortBy(item, 'cid'), _.sortBy(sameObject, 'cid'));
                            })
                            if (index !== -1) {
                                chart_option5_data.data3[index].value = ZhCalc.add(chart_option5_data.data3[index].value, (t.total_price ? t.total_price : 0));
                            }
                        }
                    }
                }
            }
            const option5 = myChart5.getOption();
            option5.series[0].data = _.filter(chart_option5_data.data1, function (item) {
                return item.value !== 0;
            });
            option5.series[1].data = _.filter(chart_option5_data.data2, function (item) {
                return item.value !== 0;
            });
            option5.series[2].data = _.filter(chart_option5_data.data3, function (item) {
                return item.value !== 0;
            });
            myChart5.setOption(option5);
            // const selectCategory = {
            //     cid: category && category[0].value ? category[0].id : ,
            // }
            // const categoryName =
            if (category && category.length > 0) {
                if (category[0] && category[0].value.length > 0) {
                    for (const [i, fc] of category[0].value.entries()) {
                        const fcCategory = {cid: fc.cid, value: fc.id};
                        if (_.findIndex(tenders, function (item) {
                            return _.findIndex(item.category, fcCategory) !== -1;
                        }) === -1) {
                            $('#first-category .select-cate').eq(i + 1).hide();
                        } else {
                            $('#first-category .select-cate').eq(i + 1).show();
                        }
                    }
                }
            }
            setData(tenders, 0);
        })

        function calculateTender(tender) {
            if (tender.stage_tp) {
                tender.gather_tp = ZhCalc.sum([tender.stage_tp.contract_tp, tender.stage_tp.qc_tp, tender.stage_tp.pc_tp]);
                tender.end_contract_tp = ZhCalc.sum([tender.stage_tp.pre_contract_tp, tender.stage_tp.contract_tp, tender.stage_tp.contract_pc_tp]);
                tender.end_qc_tp = ZhCalc.sum([tender.stage_tp.pre_qc_tp, tender.stage_tp.qc_tp, tender.stage_tp.qc_pc_tp]);
                tender.end_gather_tp = ZhCalc.add(tender.end_contract_tp, tender.end_qc_tp);
                tender.pre_gather_tp = ZhCalc.add(tender.stage_tp.pre_contract_tp, tender.stage_tp.pre_qc_tp);
                tender.yf_tp = ZhCalc.add(tender.stage_tp.yf_tp);
                tender.end_yf_tp = ZhCalc.add(tender.stage_tp.pre_yf_tp, tender.yf_tp);
            }
        }

        function setData(tenderList, categoryIndex = 0) {
            let total_price = 0;
            // let total_change_price = 0;
            let total_checked_change_price = 0;
            // let total_checked_change_positive_price = 0;
            // let total_checked_change_negative_price = 0;
            let total_after_change_price = 0;
            let total_stage_price = 0;
            let total_advance_price = 0;
            // let total_material_price = 0;
            let month_stage_num = 0;
            let month_change_num = 0;
            let month_revise_num = 0;
            let month_material_num = 0;
            let html = '';
            const chart_option_name = [];
            const chart_option2_data = {
                total_price: [],
                contract_tp:[],
                qc_tp:[],
            };
            const chart_option3_data = [];

            const chart_option1_data = [];
            let option1_is_tender = false;
            const chart_category_data = [];
            if (category && category.length > 0 && category[categoryIndex] && category[categoryIndex].value.length > 0) {
                for (const c of category[categoryIndex].value) {
                    chart_category_data.push({
                        cid: category[categoryIndex].id,
                        value: c.id,
                    });
                    chart_option1_data.push({
                        value: 0,
                        name: c.value,
                    });
                }
            } else {
                option1_is_tender = true;
            }
            const chart_option4_data = [];
            for(const t of tenderList) {
                total_price = ZhCalc.add(total_price, t.total_price);
                // total_change_price = ZhCalc.add(total_change_price, t.end_qc_tp);
                total_checked_change_price = ZhCalc.add(total_checked_change_price, t.change_tp);
                // total_checked_change_positive_price = ZhCalc.add(total_checked_change_positive_price, t.change_p_tp);
                // total_checked_change_negative_price = ZhCalc.add(total_checked_change_negative_price, t.change_n_tp);
                total_after_change_price = ZhCalc.add(total_after_change_price, ZhCalc.add(t.total_price, t.change_tp));
                total_stage_price = ZhCalc.add(total_stage_price, t.end_gather_tp);
                // total_material_price = ZhCalc.add(total_material_price, t.material_tp);
                total_advance_price = ZhCalc.add(total_advance_price, t.advance_tp);
                month_stage_num = ZhCalc.add(month_stage_num, t.month_stage_num);
                month_change_num = ZhCalc.add(month_change_num, t.month_change_num);
                month_revise_num = ZhCalc.add(month_revise_num, t.month_revise_num);
                month_material_num = ZhCalc.add(month_material_num, t.month_material_num);
                html += '<tr>\n' +
                    '                                                    <td><span data-toggle="tooltip" data-placement="right" data-original-title="'+ t.name +'">'+ (t.name.length > 15 ? t.name.substring(0, 15) + '...' : t.name) +'</span></td>\n' +
                    '                                                    <td>'+ (t.progress ? t.progress.title : (t.cur_flow ? t.cur_flow.title : '')) + '</td>\n' +
                    '                                                    <td>'+ (t.total_price ? t.total_price : 0) +'</td>\n' +
                    '                                                    <td>'+ (t.gather_tp ? t.gather_tp : 0) +'</td>\n' +
                    '                                                    <td>'+ (t.end_gather_tp ? t.end_gather_tp : 0) +'</td>\n' +
                    '                                                    <td>'+ (t.yf_tp ? t.yf_tp : 0) +'</td>\n' +
                    '                                                    <td>'+ (t.end_yf_tp ? t.end_yf_tp : 0) +'</td>\n' +
                    '                                                </tr>\n';
                chart_option_name.push(t.name);
                chart_option2_data.total_price.push(t.total_price ? t.total_price : 0);
                chart_option2_data.contract_tp.push(t.end_contract_tp ? t.end_contract_tp : 0);
                chart_option2_data.qc_tp.push(t.end_qc_tp ? t.end_qc_tp : 0);
                const rate = ZhCalc.mul(ZhCalc.div(ZhCalc.add(t.pre_gather_tp, t.gather_tp), ZhCalc.add(t.total_price, t.end_qc_tp), 2), 100, 0);
                chart_option3_data.push(rate ? rate : '');
                if (option1_is_tender) {
                    if(t.total_price) chart_option1_data.push({ value: t.total_price, name: t.name});
                } else {
                    const sameObject = _.intersectionWith(t.category, chart_category_data, _.isEqual);
                    const index = sameObject[0] ? _.findIndex(chart_category_data, { cid: sameObject[0].cid, value: sameObject[0].value }) : -1;
                    if (index !== -1) {
                        chart_option1_data[index].value = ZhCalc.add(chart_option1_data[index].value, (t.total_price ? t.total_price : 0));
                    }
                }
                for (const s of t.month_stage) {
                    const index = _.findIndex(chart_option4_data, { yearmonth: s.yearmonth });
                    if (index === -1) {
                        chart_option4_data.push({
                            yearmonth: s.yearmonth,
                            tp: s.tp,
                            end_tp: s.end_tp,
                        })
                        // chart_option4_data.yearmonth.push(s.yearmonth);
                        // chart_option4_data.tp.push(s.tp);
                        // chart_option4_data.end_tp.push(s.end_tp);
                    } else {
                        // chart_option4_data.tp[index].tp = ZhCalc.add(chart_option4_data.tp[index].tp, s.tp);
                        // chart_option4_data.tp[index].end_tp = ZhCalc.add(chart_option4_data.tp[index].end_tp, s.end_tp);
                        chart_option4_data[index].tp = ZhCalc.add(chart_option4_data[index].tp, s.tp);
                        chart_option4_data[index].end_tp = ZhCalc.add(chart_option4_data[index].end_tp, s.end_tp);
                    }
                }
            }
            // console.log(tenderList);
            $('.data_tender_num').text(tenderList.length);
            // const rate = total_price && total_change_price ? ZhCalc.round(ZhCalc.div(total_stage_price, ZhCalc.add(total_price, total_change_price)) * 100, 2) : 0;
            const rate = total_stage_price && total_after_change_price ? ZhCalc.round(ZhCalc.div(total_stage_price, total_after_change_price) * 100, 2) : 0;
            $('.data_tender_rate').text(rate ? rate + '%' : '0%');
            $('.data_total_price').text(formatMoney(total_price));
            // $('.data_total_change_price').text(formatMoney(total_change_price));
            $('.data_total_checked_change_price').text(formatMoney(total_checked_change_price));
            // $('.data_total_checked_change_price').parents('div').attr('data-original-title', "<p style='text-align:left;'>批复正变更：" + formatMoney(total_checked_change_positive_price) + "</p>批复负变更：" + formatMoney(total_checked_change_negative_price));
            $('.data_total_after_change_price').text(formatMoney(total_after_change_price));
            $('.data_total_stage_price').text(formatMoney(total_stage_price));
            $('.data_total_advance_price').text(formatMoney(total_advance_price));
            // $('.data_total_material_price').text(formatMoney(total_material_price));
            $('.month_stage_num').text(month_stage_num);
            $('.month_change_num').text(month_change_num);
            $('.month_revise_num').text(month_revise_num);
            $('.month_material_num').text(month_material_num);

            // 滚动数据
            $('.stage-data').eq(0).html(html);
            // if (originDataCollect === 1 || originDataCollect === 2) {
            tableScroll('tableId', '100%', 30, 7);
            if (is_dz) {
                $('.stage-data').eq(1).html(html);
                tableScroll('tableId2', '100%', 30, 7);
            }

            // }
            $('[data-toggle="tooltip"]').tooltip();

            // 图表数据赋值
            const option2 = myChart2_1.getOption();
            option2.dataZoom[0].start = 0;
            option2.dataZoom[0].end = computedPosition(tenderList.length);
            option2.xAxis[0].data = chart_option_name;
            option2.series[0].data = chart_option2_data.total_price;
            option2.series[1].data = chart_option2_data.contract_tp;
            option2.series[2].data = chart_option2_data.qc_tp;
            option2.series[2].data = chart_option2_data.qc_tp;
            if (tenderList.length >= 8) {
                option2.dataZoom[0].show = true;
            } else {
                option2.dataZoom[0].show = false;
            }
            myChart2_1.setOption(option2);
            myChart2_2.setOption(option2);
            myChart2_3.setOption(option2);
            if (is_dz) {
                const option2_4 = _.cloneDeep(option2);
                option2_4.title[0].text = '各工区计量情况';
                myChart2_4.setOption(option2_4);
            }

            const option3 = myChart3_1.getOption();
            option3.dataZoom[0].start = 0;
            option3.dataZoom[0].end = computedPosition(tenderList.length);
            option3.yAxis[0].data = chart_option_name;
            option3.series[0].data = chart_option3_data;
            if (tenderList.length >= 8) {
                option3.dataZoom[0].show = true;
                // option3.dataZoom[0].bottom = '10%';
                // option3.grid.bottom = '15%';
            } else {
                option3.dataZoom[0].show = false;
                // option3.dataZoom[0].bottom = '0%';
                // option3.grid.bottom = '3%';
            }
            myChart3_1.setOption(option3);
            myChart3_2.setOption(option3);
            if (is_dz) {
                const option3_3 = _.cloneDeep(option3);
                option3_3.title[0].text = '各工区计量完成百分比统计';
                myChart3_3.setOption(option3_3);
            }

            const option1 = myChart1_1.getOption();
            option1.series[0].data = _.filter(chart_option1_data, function (item) {
                return item.value !== 0;
            });
            myChart1_1.setOption(option1);
            if (is_dz) {
                myChart1_2.setOption(option1);
            }

            const option4_data = {
                yearmonth: [],
                tp: [],
                end_tp: [],
            }
            if (chart_option4_data.length > 0) {
                // chart_option4_data 排序
                const new_chart_option4_data = _.sortBy(chart_option4_data, 'yearmonth');
                for (const [i,c4] of new_chart_option4_data.entries()) {
                    option4_data.yearmonth.push(c4.yearmonth);
                    option4_data.tp.push(c4.tp);
                    if(i !== 0) {
                        option4_data.end_tp.push(ZhCalc.add(c4.tp, option4_data.end_tp[i-1]));
                    } else {
                        option4_data.end_tp.push(c4.tp);
                    }
                }
            }
            const option4 = myChart4_1.getOption();
            option4.dataZoom[0].start = 0;
            option4.dataZoom[0].end = computedPosition(option4_data.yearmonth.length);
            option4.xAxis[0].data = option4_data.yearmonth;
            option4.series[0].data = option4_data.tp;
            option4.series[1].data = option4_data.end_tp;
            if (option4_data.yearmonth.length >= 8) {
                option4.dataZoom[0].show = true;
                // option4.dataZoom[0].bottom = '10%';
                // option4.grid.bottom = '15%';
            } else {
                option4.dataZoom[0].show = false;
                // option4.dataZoom[0].bottom = '0%';
                // option4.grid.bottom = '3%';
            }
            myChart4_1.setOption(option4);
            myChart4_2.setOption(option4);
            if (is_dz) {
                const option4_3 = _.cloneDeep(option4);
                option4_3.title[0].text = '全线计量对比';
                myChart4_3.setOption(option4_3);
            }

            $('#tableId').css({'margin-top': 0});
            if (is_dz) {
                $('#tableId2').css({'margin-top': 0});
            }
        }

        $('.change-collect').on('click', function () {
            const num = parseInt($(this).data('collect'));
            $('#zhankai span').text(num);
            if (num === 1 || num === 3) {
                $('.flex-content[data-content="1"]').show();
                $('.flex-content[data-content="2"]').hide();
                $('.flex-content[data-content="5"]').hide();
                if (originDataCollect !== 1 && originDataCollect !== 3) {
                    tableScroll('tableId', '100%', 30, 7);
                }
                if (num === 3) {
                    $('.jlchart[data-chart-num="1"]').hide();
                    $('.jlchart[data-chart-num="1"]').siblings().show();
                    $('.jlchart[data-chart-num="2"]').show();
                    $('.jlchart[data-chart-num="2"]').siblings().hide();
                } else {
                    $('.jlchart[data-chart-num="1"]').show();
                    $('.jlchart[data-chart-num="1"]').siblings().hide();
                    $('.jlchart[data-chart-num="2"]').hide();
                    $('.jlchart[data-chart-num="2"]').siblings().show();
                }
                // roll(50);
            } else if (num === 2 || num === 4) {
                $('.flex-content[data-content="2"]').show();
                $('.flex-content[data-content="1"]').hide();
                $('.flex-content[data-content="5"]').hide();
                // roll2(50);
                if (num === 4) {
                    $('.jldbchart[data-chart-num="2"]').hide();
                    $('.jldbchart[data-chart-num="2"]').siblings().show();
                } else {
                    $('.jldbchart[data-chart-num="2"]').show();
                    $('.jldbchart[data-chart-num="2"]').siblings().hide();
                }
            } else if (num === 5) {
                $('.flex-content[data-content="5"]').show();
                $('.flex-content[data-content="1"]').hide();
                $('.flex-content[data-content="2"]').hide();
                tableScroll('tableId2', '100%', 30, 7);
                // $('.jlchart[data-chart-num="1"]').show();
                // $('.jlchart[data-chart-num="2"]').siblings().show();
            }
            echartsReset();
        });

        // 第一层分类选择
        $("body").on('click', '#first-category .select-cate', function () {
            const id = $(this).data('value');
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            let newTenderList = tenders;
            let categoryIndex = 0;
            if (!id) {
                $('#second-category').hide();
                $('#third-category').hide();
                $('#first-category').children('button').attr('data-cid', '').attr('data-value', '');
            } else {
                // 获取第一层已选类别
                const firstCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
                $('#first-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                newTenderList = _.filter(tenders, function (item) {
                    return _.findIndex(item.category, firstCategory) !== -1;
                })
                categoryIndex = 1;
                if (category[1] && category[1].value.length > 0) {
                    $('#second-category').show();
                    $('#third-category').hide();
                    $('#second-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
                    for (const [i,sc] of category[1].value.entries()) {
                        const scCategory = { cid: sc.cid, value: sc.id };
                        if (_.findIndex(newTenderList, function (item) {
                            return _.findIndex(item.category, scCategory) !== -1;}) === -1) {
                            $('#second-category .select-cate').eq(i+1).hide();
                        } else {
                            $('#second-category .select-cate').eq(i+1).show();
                        }
                    }
                }

                // categoryList.push(firstCategory);
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        });
        // 第二层分类选择
        $("body").on('click', '#second-category .select-cate', function () {
            const id = $(this).data('value');
            // 获取第一层已选类别
            const first_cid = $('#first-category').children('button').attr('data-cid');
            const first_value = $('#first-category').children('button').attr('data-value');
            const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
            let newTenderList = _.filter(tenders, function (item) {
                return _.findIndex(item.category, firstCategory) !== -1;
            });
            // let categoryList = [firstCategory];
            let categoryIndex = 1;
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            if (!id) {
                $('#third-category').hide();
            } else {
                // 获取第二层已选类别
                const secondCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
                $('#second-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                newTenderList = _.filter(newTenderList, function (item) {
                    return _.findIndex(item.category, secondCategory) !== -1;
                });
                categoryIndex = 2;
                if (category[2] && category[2].value.length > 0) {
                    $('#third-category').show();
                    $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
                    for (const [i,sc] of category[2].value.entries()) {
                        const tcCategory = { cid: sc.cid, value: sc.id };
                        if (_.findIndex(newTenderList, function (item) {
                            return _.findIndex(item.category, tcCategory) !== -1;}) === -1) {
                            $('#third-category .select-cate').eq(i+1).hide();
                        } else {
                            $('#third-category .select-cate').eq(i+1).show();
                        }
                    }
                }
                // categoryList.push(secondCategory);
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        });
        // 第三层分类选择（至多三层）
        $("body").on('click', '#third-category .select-cate', function () {
            const id = $(this).data('value');
            // 获取第一层已选类别
            const first_cid = $('#first-category').children('button').attr('data-cid');
            const first_value = $('#first-category').children('button').attr('data-value');
            const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
            let newTenderList = _.filter(tenders, function (item) {
                return _.findIndex(item.category, firstCategory) !== -1;
            });
            // 获取第二层已选类别
            const second_cid = $('#second-category').children('button').attr('data-cid');
            const second_value = $('#second-category').children('button').attr('data-value');
            const secondCategory = { cid: parseInt(second_cid), value: parseInt(second_value) };
            newTenderList = _.filter(newTenderList, function (item) {
                return _.findIndex(item.category, secondCategory) !== -1;
            });
            // let categoryList = [firstCategory, secondCategory];
            let categoryIndex = 2;
            $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
            if (!id) {
                $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
            } else {
                $('#third-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
                categoryIndex = 3;
                const third_cid = $('#third-category').children('button').attr('data-cid');
                const third_value = $('#third-category').children('button').attr('data-value');
                const thirdCategory = { cid: parseInt(third_cid), value: parseInt(third_value) };
                newTenderList = _.filter(newTenderList, function (item) {
                    return _.findIndex(item.category, thirdCategory) !== -1;
                });
                // categoryList.push({ cid: parseInt($(this).data('cid')), value: parseInt($(this).data('value')) });
            }
            setData(newTenderList, categoryIndex);
            // 获取新的tenderList及categoryList
        })
    })
    function formatMoney(s, dot = ',', decimal = 2) {
        if (!s) {
            s = 0;
            return s.toFixed(decimal);
        }
        s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(decimal) + '';
        if (!decimal) {
            s += '.';
        }
        const l = s.split('.')[0].split('').reverse(),
            r = s.split('.')[1];
        let t = '';
        for (let i = 0; i < l.length; i++) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? dot : '');
        }
        const num = t.split('').reverse().join('') + (decimal === 0 ? '' : '.' + r);
        return num.replace('-,', '-');
    }
    // 计算显示滚动条长度
    function computedPosition(xArrayLength) {
        if (xArrayLength >= 8) {
            return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
            // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
        } else {
            return 100;
        }
    }
</script>