bzdadmin
/
ColdP_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
							<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
    <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a><cite>宝智达</cite></a>
            </span>
    <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="Time_start"
                                   id="Time_start" lay-key="1"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="Time_end"
                                   id="Time_end" lay-key="2"></div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <input value="{{.T_sn}}" type="text" name="T_sn" style="width: 200px"
                                   placeholder="请输入 Sn (支持模糊搜索)" autocomplete="off" class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                        <button type="button" style="float: right" class="layui-btn layui-btn-normal layui-btn-xs"
                                onclick="xadmin.open('添加','/Device/DeviceWarning_',400,450)"><i class="layui-icon">&#xe61f;</i>添加报警
                        </button>

                    </form>

                </div>

                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>报警类型</th>
                            <th>主机</th>
                            <th>设备</th>
                            <th>采集内容</th>
                            <th>状态</th>
                            <th>采集时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{range $index, $elem := .List}}
                        <tr {{if eq $elem.T_State 0 }} style="background-color: rgba(0,0,0,0.26)" {{end}}>
                            <td><input type="checkbox" class="layui-checkbox" name="checkbox" lay-skin="primary"
                                       value="{{$elem.Id}}"></td>

                            <td type="text" name="T_tp_name">{{$elem.T_tp_name}}
                            </td>
                            <td name="t__d_name,t_sn" sn="{{$elem.T_sn}}">{{$elem.T_D_name}}，{{$elem.T_sn}}</td>
                            <td name="t__d_s_name,t_id" t_id="{{$elem.T_id}}">{{$elem.T_DS_name}}，{{$elem.T_id}}</td>
                            <td name="t__remark">{{$elem.T_Remark}}</td>

                            <td name="t__state">
                                {{if eq $elem.T_State 1}}
                                不处理
                                {{else if eq $elem.T_State 2}}
                                已处理
                                {{else if eq $elem.T_State 3}}
                                未处理
                                {{else}}
                                删除
                                {{end}}

                            </td>
                            <td name="t__ut">{{$elem.T_Ut}}</td>
                            <td>
                                <button class="layui-btn-danger layui-btn layui-btn-xs"
                                        onclick="member_del(this,'{{$elem.Id}}','{{$elem.T_Ut}}')" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>删除
                                </button>
                                <button class="layui-btn-normal layui-btn layui-btn-xs copy-add-btn" id="copy-add-btn"
                                        data-id="{{$elem.Id}},{{$elem.T_Ut}}" >复制添加
                                </button>


                            </td>
                        </tr>

                        {{end}}


                                </tbody>
                        <div class="layui-form layui-border-box layui-row layui-col-space10 layui-form-item">
                            <button class="layui-btn layui-btn-sm" id="selectAll">全选</button>
                            <button class="layui-btn layui-btn-sm" id="unselectAll">全不选</button>
                            <button class="layui-btn layui-btn-sm" id="invertSelect">反选</button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger" id="batchDelete">批量删除</button>
                        </div>
                            </table>
                        </div>
                        <div class="layui-card-body ">
                            <select id="pageSizeSelector">
                                <option value="100">100 条/页</option>
                                <option value="200">200 条/页</option>
                                <option value="500">500 条/页</option>
                                <option value="1000">1000 条/页</option>
                            </select>
                            <div class="page">
                                <div>

                                    {{range $index, $elem := .Pages}}
                                        {{if eq $elem.A 1}}
                                        <a class="prev" href="?page={{$elem.V}}&T_sn={{$.T_sn}}&Time_start={{$.Time_start}}&Time_end={{$.Time_end}}">&lt;&lt;</a>
                                        {{end}}
                                        {{if eq $elem.A 2}}
                                        <a class="num" href="?page={{$elem.V}}&T_sn={{$.T_sn}}&Time_start={{$.Time_start}}&Time_end={{$.Time_end}}">{{$elem.V}}</a>
                                        {{end}}
                                        {{if eq $elem.A 3}}
                                        <span class="current">{{$elem.V}}</span>
                                        {{end}}
                                        {{if eq $elem.A 4}}
                                        <a class="num" href="?page={{$elem.V}}&T_sn={{$.T_sn}}&Time_start={{$.Time_start}}&Time_end={{$.Time_end}}">{{$elem.V}}</a>
                                        {{end}}
                                        {{if eq $elem.A 5}}
                                        <a class="next" href="?page={{$elem.V}}&T_sn={{$.T_sn}}&Time_start={{$.Time_start}}&Time_end={{$.Time_end}}">&gt;&gt;</a>
                                        {{end}}


                                    {{end}}


                                </div>
                                当前页:{{.Page}}-
                                总页数:{{.Page_size}}-
                                总条数:{{.cnt}}
                            </div>
                        </div>


            </div>
        </div>
    </div>
</div>

</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化pageSize，先从localStorage读取，如果没有则使用默认值
        var pageSize = localStorage.getItem('pageSize') || 10;
        document.getElementById('pageSizeSelector').value = pageSize; // 设置选择框的默认选中项
        // 监听选择框变化
        document.getElementById('pageSizeSelector').addEventListener('change', function(event) {
            var newPageSize = event.target.value;
            localStorage.setItem('pageSize', newPageSize); // 更新localStorage中的pageSize

            // 调用函数更新分页链接
            updatePageLinks(newPageSize);
            sendPageSizeToBackend(newPageSize);
        });
        // 页面加载时执行一次，确保初始状态正确
        updatePageLinks(pageSize);
    });

    // 更新所有分页链接的函数
    function updatePageLinks(pageSize) {
        console.log("Updating page links with pageSize:", pageSize);
        var links = document.querySelectorAll('.num');
        for (var i = 0; i < links.length; i++) {
            var href = links[i].getAttribute('href');
            href = href.replace(/pageSize\s*=\s*\d+/, 'pageSize=' + encodeURIComponent(pageSize)); // 替换pageSize参数
            links[i].setAttribute('href', href+"&pageSize="+pageSize);
            // window.location.href = links[0].href;

        }
        console.log("Updated link:", links[0].href);
    }
    // 新增函数：向后端发送pageSize
    function sendPageSizeToBackend(pageSize) {
        fetch('/Device/DeviceWarning_page', { // 替换为你的后端接口地址
            method: 'POST', // 或者根据你的后端接口要求使用'PUT'、'PATCH'等
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ pageSize: pageSize }), // 将pageSize作为JSON对象发送
        })
            .then(response => {
                console.log('Sending pageSize to the server:', response);
                if (!response.ok) {
                    throw new Error(`Network response was not ok: ${response.statusText}`);
                }
            })
    }

    layui.use(['layer', 'laydate', 'form'],
        function () {
            var laydate = layui.laydate;
            var $ = layui.jquery,
                layer = layui.layer; //独立版的layer无需执行这一句
            $("#selectAll").on("click", function () {
                $(":checkbox[name='checkbox']").prop("checked", true);
                $(".layui-form-checkbox").addClass("layui-form-checked"); // 通过类名设置全选
                // form.render('checkbox'); // 渲染以显示变化
            });
            $("#unselectAll").on("click", function () {
                $(":checkbox[name='checkbox']").prop("checked", false);
                $(".layui-form-checkbox").removeClass("layui-form-checked"); // 通过类名设置全不选
                // form.render('checkbox');
            });
            $("#invertSelect").on("click", function () {
                $(":checkbox[name='checkbox']").each(function () {
                    this.checked = !this.checked; // 切换每个复选框的选中状态
                });
                $(".layui-form-checkbox").each(function () {
                    if ($(this).hasClass("layui-form-checked")) {
                        $(this).removeClass("layui-form-checked");
                    } else {
                        $(this).addClass("layui-form-checked");
                    }
                });
                // form.render('checkbox'); // 渲染以显示变化
            });
            $("#batchDelete").on("click", function () {
                var selectedIds = [];

                $("input[name='checkbox']:checked").each(function () {
                    var checkbox = $(this);
                    // selectedIds.push(this.value); // 'this.value'直接获取当前选中复选框的值
                    var row = checkbox.closest('tr');

                    var seventhColumnValue = row.find('td:eq(6)').text();
                    console.log(seventhColumnValue);
                    // 现在您可以根据需要使用 seventhColumnValue，例如将其与ID一起存储

                    selectedIds.push({
                        id: this.value,
                        ut: seventhColumnValue.trim() // 去除前后空白
                    });
                });

                if (selectedIds.length === 0) {
                    layer.msg('请至少选择一项进行删除!', {icon: 5, time: 2000});
                    return;
                }
                console.log(selectedIds);
                layer.confirm('您确定要删除选定的 ' + selectedIds.length + ' 条数据吗？', {
                    icon: 3,
                    title: '确认删除',
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);

                    $.ajax({
                        type: "POST",
                        url: "/Device/DeviceWarning_dels",
                        data: JSON.stringify({selectedIds}),
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            if (response.Code === 200) {
                                layer.msg('删除成功! 已删除 ' + selectedIds.length + ' 条数据', {icon: 1, time: 2000});
                                // location.reload();
                            } else {
                                layer.msg('删除失败，请重试!', {icon: 5, time: 2000});
                            }
                        },
                        error: function (xhr, status, error) {
                            console.error("Error occurred: " + error);
                            layer.msg('请求错误，请检查网络连接!', {icon: 5, time: 2000});
                        }
                    });
                }, function () {
                    layer.msg('已取消删除操作', {icon: 1, time: 1000});
                });
            });
            // 绑定复制添加按钮的点击事件
            $('body').on('click', '.copy-add-btn', function(){
                var btn = $(this);
                var row = btn.parents('tr'); // 获取当前按钮所在行
                var checkbox = row.find('input[type="checkbox"]'); // 找到本行的复选框
                var rowId = checkbox.val(); // 获取当前行的ID（即复选框的value）
                var sn = row.find('td[sn]');
                var attr = sn.attr('sn');
                var t_id = row.find('td[t_id]');
                var t_idV = t_id.attr('t_id');
                console.log(attr);
                // 复制当前行并在其下方插入
                var newRow = row.clone(true);
                newRow.insertAfter(row);

                // 改变复制行的背景色
                newRow.css("background-color", "#07c5ea"); // 示例颜色，您可以自定义

                // 提取数据并准备发送到后端的逻辑，排除第一列（ID列）和最后一列的按钮
                var rowData = {
                    rowId: rowId,
                    sn: attr,
                    t_id: t_idV
                };
                newRow.find("td:not(:first):not(:last)").each(function(index, cell){
                    // 假设除了第一列和最后一列外，其他列的数据都需要提交
                    rowData[`column${index + 1}`] = $(cell).text().trim(); // 动态生成键名以避免覆盖
                });

                // 发送POST请求到后端
                $.ajax({
                    type: "POST",
                    url: "/Device/DeviceWarningAdd", // 替换为您的后端接口地址
                    data: JSON.stringify(rowData),
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(response){
                        if(response.Code === 200){
                            layer.msg('复制并添加成功!', {icon: 1, time: 2000});
                        } else {
                            layer.msg('添加失败，请重试!', {icon: 5, time: 2000});
                            newRow.remove(); // 如果后端返回失败，移除新行
                        }
                    },
                    error: function(xhr, status, error){
                        layer.msg('请求错误，请检查网络连接!', {icon: 5, time: 2000});
                        newRow.remove(); // 发生错误时移除新行
                    }
                });
            });
            // 绑定所有可编辑列的双击事件
            $('tbody').on('dblclick', 'td:not(:last-child)', function(e){ // 排除最后一列的按钮
                var cell = $(this);
                var row = cell.closest('tr'); // 获取当前行
                var checkbox = row.find('input[type="checkbox"]'); // 找到本行的复选框
                var rowId = checkbox.val(); // 获取当前行的ID（即复选框的value）
                var columnName = cell.attr('name'); // 获取当前列的名称
                var originalText = cell.text().trim(); // 保存原始文本内容
                var T_Ut_cell = row.find('td[name="t__ut"]');
                var T_Ut_value = T_Ut_cell.text().trim();

                // 检查是否是第一列或第五列
                if (columnName === 'T_tp_name' || columnName === 't__state') {
                    cell.html('<select style="display:block;"></select>');
                    var selectBox = cell.find('select');
                    console.log(selectBox);
                    // 调用方法动态填充下拉选项
                    populateSelectOptions(selectBox, columnName);

                    selectBox.val(originalText);
                    selectBox.focus();

                    selectBox.change(function() {
                        var newValue = $(this).val();
                        if (newValue !== '') {
                            cell.html(newValue);
                            submitUpdate(rowId, columnName, newValue,T_Ut_value);
                            selectBox.off('change'); // 清理事件监听
                        } else {
                            cell.text(originalText);
                        }
                    });
                }else{
                    // 将当前单元格内容替换为<input>元素
                    cell.html('<input type="text" class="layui-input inline-edit-input" value="' + originalText + '">');
                    // 自动聚焦到新创建的输入框
                    cell.find('.inline-edit-input').focus();
                    // 监听输入框的失焦事件，以便在用户完成编辑后保存更改
                    cell.find('.inline-edit-input').blur(function(){
                        var newValue = $(this).val().trim();
                        if(newValue !== ''){ // 确保输入不为空
                            cell.html(newValue); // 用新值替换输入框

                            // 提交更改到后端，包含列名
                            submitUpdate(rowId, columnName, newValue,T_Ut_value);

                        } else {
                            // 如果用户清空了输入框，则恢复原始内容
                            cell.text(originalText);
                        }
                    });
                }

            });

            // 定义提交更新到后端的函数
            function submitUpdate(rowId, columnName, newValue,T_Ut_value) {
                var dataToSubmit = {
                    rowId: rowId,
                    columnName: columnName,
                    newValue: newValue,
                    T_Ut: T_Ut_value
                };

                // 发起POST请求到后端
                $.ajax({
                    type: "POST",
                    url: "/Device/DeviceWarningUpdate", // 替换为您的后端更新接口地址
                    data: JSON.stringify(dataToSubmit),
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(response){
                        console.log(response);
                        if(response.Code === 200){
                            layer.msg('更新成功!', {icon: 1, time: 2000});
                            // location.reload()
                        } else {
                            layer.msg('更新失败，请重试!', {icon: 5, time: 2000});
                        }
                    },
                    error: function(xhr, status, error){
                        layer.msg('请求错误，请检查网络连接!', {icon: 5, time: 2000});
                    }
                });
            }
            function populateSelectOptions(selectBox, columnName) {
                // 这里只是一个示例逻辑，根据实际情况动态生成或从服务端获取选项
                switch(columnName) {
                    case 'T_tp_name':
                        fetch("/Device/DeviceWarning_waraning")
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok');
                                }
                                return response.json(); // 假设后端返回的是JSON格式的数据
                            })
                            .then(data => {
                                // const selectBox = document.getElementById('selectBox');
                                console.log(data.Data);
                                // 假设data是一个对象数组，每个对象有Key和Value属性
                                data.Data.forEach(item => {
                                    console.log(item.Key);
                                    selectBox.append(`<option value='${item.Key}'>${item.Value}</option>`);                                });
                            })
                            .catch(error => {
                                console.error('There has been a problem with your fetch operation:', error);
                            });
                        break;
                    case 't__state':
                        selectBox.append('<option value=0>删除</option>');
                        selectBox.append('<option value=1>不处理</option>');
                        selectBox.append('<option value=2>已处理</option>');
                        selectBox.append('<option value=3>未处理</option>');
                        break;
                    default:
                        // 万一其他列也需要处理，可以在这里扩展
                        break;
                }
            }
            //执行一个laydate实例
                laydate.render({
                    elem: '#Time_start', //指定元素
                    value:{{.Time_start}}
                ,type: 'datetime'
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#Time_end', //指定元素
                    value:{{.Time_end}}
                ,type: 'datetime'
            });
        });
    /*用户-删除*/
    function member_del(obj, id, t_ut) {
        layer.confirm('确认要删除吗？',
            function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();

                $.ajax({
                    type: 'POST',
                    url: 'DeviceWarning_Del',//发送请求
                    data: {Id: id, Ut: t_ut},
                    success: function (result) {
                        console.log(result)
                        if (result.Code == 200) {
                            layer.msg('已删除!', {
                                icon: 1,
                                time: 2000
                            });
                            window.location.reload();
                        } else {
                            layer.msg('删除失败!', {
                                time: 2000
                            });
                        }

                    }
                });


            });
    }


</script>

</html>