DK-MES-2.0
/
HEGII.ss.mes.dashboard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="../common/StyleSheet.css" />-->
    <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/Plugins/xrequest/xrequest.min.js"></script>
    <title>东科软件</title>
    <style>
        tbody .bold-large-text {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            color: red;
            vertical-align: middle;
        }
        a {
            color: lightgray;
        }
    </style>
</head>
<body class="bg-light">
    <!--自动缩放-->
    <!--<script src="../common/setting.js"></script>-->
    <!--导航菜单-->
    <script src="../common/navbar.js"></script>

    <div class="container-fluid pt-3">
        <div class="p-4 rounded shadow-sm bg-white">
            <div class="position-absolute d-none d-lg-block">
                <img src="/Img/dongke.png" style="width:100px;" />
            </div>
            <div class="position-relative pull-right d-none d-lg-block">
                <a class="nav-link" href="javascript:void(0)" onclick="fullScreen(); $('#navbar').toggle();">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                </a>
            </div>
            <!--报表名称-->
            <h4 class="text-center pb-2">包装单一览表</h4>
            <!--工具条-->
            <div id="toolbar" class="pb-4">
                <form id="formSearch" class="form-inline">
                    <div class="form-group pr-2">
                        <div>线号：</div>
                        <select id="线号" name="线号" class="custom-select" style="width:120px;">
                            <option value="">请选择...</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>

                    <div class="form-group pull-right">
                        <button id="清空按钮" type="button" onclick="resetForm()" class="btn btn-secondary">清空</button>
                        <div class="pl-2"></div>
                        <button id="搜索按钮" type="button" onclick="loadData()" class="btn btn-danger">搜索</button>
                    </div>
                </form>
            </div>
            <!--报表数据-->
            <table id="table" class="table table-bordered table-hover" data-toolbar="#toolbar" style="font-size: 24px;">
                <thead>
                    <tr>
                        <th scope="col" data-field="出水距" data-sortable="true">水距</th>
                        <th scope="col" data-field="产品型号" data-sortable="true">产品型号</th>
                        <!--<th scope="col" data-field="商标" data-sortable="true">商标</th>
                        <th scope="col" data-field="商标物料描述" data-sortable="true">物料描述</th>-->
                        <th scope="col" data-field="商标变更" data-sortable="true">商标变更</th>
                        <th scope="col" data-field="商标变更物料描述" data-sortable="true">物料描述</th>
                        <th scope="col" data-field="出库数量" data-sortable="true">数量</th>
                        <th scope="col" data-field="已出数量" data-sortable="true">已出</th>
                        <th scope="col" data-field="状态" data-sortable="true">状态</th>
                        <th scope="col" data-field="下单时间" data-sortable="true">下单时间</th>
                        <th scope="col" data-field="线号" data-sortable="true">线号</th>
                    </tr>
                </thead>
            </table>
            <div class="pb-4"></div>
        </div>
    </div>

    <!--版权信息-->
    <script src="../common/footer.js"></script>

    <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
    <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
    <script src="../Common/xuwell.js"></script>

    <script>

        $(document).ready(function () {
            loadData();
            setInterval(function () { loadData(); }, 30000);
        });

         function loadData() {
            const select = document.getElementById('线号');
            //await xuwell.loadTable({
            //    id: '#table',
            //    url: 'index.ashx?linenumber=' + select.value + '&r=' + Math.random()
            //});
             //将原有方法提取出来 新加uptable方法
            var $table = $('#table');
            $table.bootstrapTable('destroy').bootstrapTable({
                toggle: "table",
                boolbar: '#toolbar',
                url: 'index.ashx?linenumber=' + select.value + '&r=' + Math.random(),
                locale: "zh-CN",
                sortable: false,
                sortOrder: "asc",
                pagination: true,
                pageNumber: 1,
                pageSize: 10,
                pageList: "[10, 100, 500, 1000, 2000, 5000, ALL]",
                striped: true,
                sidePagination: 'server',
                columns: [
                    {
                        field: '出水距', // 列的字段名
                        title: '水距', // 列的标题
                        class: 'bold-large-text' // 为该列添加 CSS 类
                        // 其他列选项...
                    }],
                responseHandler: function (res) {
                    return res;
                },
                onLoadSuccess: function (data) {
                  
                    uptable(data.rows); 
                }
            }); 
        };

        function resetForm() {
            $('#formSearch')[0].reset();
        };
        /**合并单元格*/
        const uptable = (data) => {
           /**出水距*/
            let dataValue = null;
            /**起始单元格 */
            let startIndex = 0;
            /**合并行数 */
            let rowspan = 1;
            data.forEach((value, index) => {
                // 初始化
                if (dataValue === null) {
                    dataValue = value.出水距;
                    startIndex = index;
                }
                //检测到变化点
                else if (value.出水距 !== dataValue) {
                    //合并前一个组并且只合并数量大于1的组
                    if (rowspan > 1) {
                        $('#table').bootstrapTable('mergeCells', { index: startIndex, field: '出水距', rowspan: rowspan }) 
                    }
                    // 更新状态
                    dataValue = value.出水距;
                    startIndex = index;
                    rowspan = 1;
                }
                else {
                    // 同一组，增加计数
                    rowspan++;
                }
            });

            // 处理最后一个组（如果数组以同一组结束且数量大于1）
            if (dataValue !== null && rowspan > 1) {
                $('#table').bootstrapTable('mergeCells', { index: startIndex, field: '出水距', rowspan: rowspan })
            }
             
        } 
    </script>

</body>
</html>