Calculation/app/view/datacollect/index.ejs

<link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
<div class="panel-content">
    <div class="panel-content" style="background:#2c3237 !important">
        <div class="panel-title fluid" style="background:#2c3237 !important">
            <div class="title-main d-flex justify-content-between">
                <div class="d-inline-block mr-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">分类一</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item" href="#">分类一1</a>
                            <a class="dropdown-item" href="#">分类一2</a>
                        </div>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">分类二</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item" href="#">分类二1</a>
                            <a class="dropdown-item" href="#">分类二2</a>
                        </div>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">分类三</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item" href="#">分类三1</a>
                            <a class="dropdown-item" href="#">分类三2</a>
                        </div>
                    </div>
                </div>
                <div>
                    <a href="" 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">决策大屏1</button>
                        <div class="dropdown-menu" aria-labelledby="zhankai">
                            <a class="dropdown-item" href="shujudaping-panel-1.html">决策大屏1</a>
                            <a class="dropdown-item" href="shujudaping-panel-2.html">决策大屏2</a>
                            <a class="dropdown-item" href="shujudaping-panel-3.html">决策大屏3</a>
                            <a class="dropdown-item" href="shujudaping-panel-4.html">决策大屏4</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-wrap">
            <div class="c-body" style="background:#2c3237 !important">
                <div class="flex-content">
                    <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">12</h5>
                                                        <p class="card-text card-case-text text-muted">标段个数</p>
                                                    </div>
                                                    <div class="col-6">
                                                        <h5 class="card-title card-case-title">63.25%</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">123,456,789.36</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">
                                                <h5 class="card-title card-case-title">163,000.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">123,456,789.36</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">163,000.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" 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="di-content mb-2" style="background: #343A40;"></div>
                                        </div>
                                    </div>
                                    <div class="center-chart">
                                        <div class="card height-100 bg-dark mt-2">
                                            <div id="jlchart" style="height: 100%; width: 100%;"></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>
                                                <tr>
                                                    <td>隧道工程一标段</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>隧道工程二标段</td>
                                                    <td>第2期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>第二工地试验室</td>
                                                    <td>第0期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>桥梁工程二标段</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>标段5</td>
                                                    <td>第2期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>标段6</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>隧道工程一标段</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>隧道工程二标段</td>
                                                    <td>第2期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>第二工地试验室</td>
                                                    <td>第0期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>桥梁工程二标段</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>标段5</td>
                                                    <td>第2期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                <tr>
                                                    <td>标段6</td>
                                                    <td>第1期</td>
                                                    <td>1000000</td>
                                                    <td>80000</td>
                                                    <td>95000</td>
                                                    <td>75000</td>
                                                    <td>85000</td>
                                                </tr>
                                                </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">
                                                <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">5<small>期</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 height-100">
                                                        <h5 class="card-title card-approve-title height-50">25<small class="">条</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 height-100">
                                                        <h5 class="card-title card-approve-title height-50">3<small class="">次</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 height-100">
                                                        <h5 class="card-title card-approve-title height-50">0<small class="">期</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 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="m-0 p-3 mb-2">
                                            <ul class="list-unstyled" 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-success"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/measure/stage/<%- notice.order %>" class="text-success">第<%- notice.order %>期 </a>
                                                                        <%- acStage.statusString[notice.status]%>
                                                                    </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-success"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/measure/material/<%- notice.order %>" class="text-success">第<%- notice.order %>期 </a>
                                                                        <%- acMaterial.statusString[notice.status]%>
                                                                    </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-success"><%- notice.name %></a> <%- acLedger.statusString[notice.status]%>
                                                                    </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-success"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/revise/info" class="text-success">台账修订(第<%- notice.corder %>次)</a>
                                                                        <%- acRevise.statusString[notice.status]%>
                                                                    </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-success"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/change/<%- notice.cid %>/information" class="text-success"><%- notice.c_code %> </a>
                                                                        <%- acChange.statusString[notice.status]%>
                                                                    </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-success"><%- notice.name %></a>
                                                                        <a href="/tender/<%- notice.tid %>/advance/<%- notice.vid %>/detail" class="text-success">第<%- notice.order %>期</a>
                                                                        <%- acAdvance.statusString[notice.status]%>
                                                                    </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"></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">
    var myChart1 = echarts.init(document.getElementById('jechart'), 'dark');
    option = {
        title: {
            text: '金额统计图',
            left: 'center',
            top:'7%'
        },
        color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'center',
        // },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '60%',
                top:'15%',
                data: [
                    {value: 1048, name: '2021'},
                    {value: 735, name: '2020'},
                    {value: 580, name: '2019'},
                    {value: 484, name: '2018'},
                    {value: 300, name: '2017'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart1.setOption(option);

    var myChart2 = echarts.init(document.getElementById('jlchart'), 'dark');
    option = {
        title: {
            text: '计量情况',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['台帐', '合同计量', '变更计量'],
            top:'17%'
        },
        grid: {
            top:'35%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1标', '2标', '3标', '4标', '5标', '6标', '7标']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name:'金额',
                position: 'left',
                axisLabel : {
                    formatter: '{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: [1220, 732, 601, 934, 1590, 730, 1020]
            },
            {
                name: '合同计量',
                type: 'bar',
                stack: '计量',
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '变更计量',
                type: 'bar',
                stack: '计量',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };
    myChart2.setOption(option);

    var myChart3 = echarts.init(document.getElementById('jlwcdchart'), 'dark');
    option = {
        title: {
            text: '计量完成度统计',
            left: 'center',
            top:'5%'
        },
        color: ['rgba(24,144,255,0.7)','rgba(69,183,149,0.7)','rgba(250,204,20,0.7)','rgba(145,82,225,0.7)','rgba(58,207,221,0.7)','rgba(204,73,80,0.7)','rgba(255,255,225,0.7)'],
        backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['隧道工程一标段', '隧道工程二标段', '第二工地试验室', '桥梁工程二标段', '标段5', '标段6', '第三工地试验室']
        },
        series: [
            {
                name: '完成度',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            }
        ]
    };
    myChart3.setOption(option);
    function echartsReset() {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    }
</script>