123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640 |
- <!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"></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"></i>添加报警
- </button>
- </form>
- </div>
- <div class="layui-card-body ">
- <table class="layui-table layui-form">
- <thead>
- <tr>
- <th style="width: 20px;">选择</th>
- <th style="width: 70px;">报警类型</th>
- <th style="width: 80px;">主机</th>
- <th style="width: 50px;">设备</th>
- <th style="width: 150px;">采集内容</th>
- <th style="width: 70px;">状态</th>
- <th style="width: 130px;">采集时间</th>
- <th style="width: 120px;">操作</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 style="width: 5px"><input style="width: 5px" 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_sn" sn="{{$elem.T_sn}}">{{$elem.T_sn}}</td>
- <td name="t_id" t_id="{{$elem.T_id}}">{{$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"></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>
- <div>
- <div class="siftWarning" style="width: 100px; margin-left: 260px; margin-top: -45px;">
- <select>
- <option value="">类型筛选</option>
- </select>
- </div>
- </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}}"><<</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}}">>></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') || 100;
- 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);
- });
- document.getElementById('pageSizeSelector').addEventListener('change', function (event) {
- var newPageSize = event.target.value;
- localStorage.setItem('pageSize', newPageSize); // 更新localStorage中的pageSize
- console.log("更改:", newPageSize);
- // 调用函数更新分页链接
- sendPageSizeToBackend(newPageSize);
- updatePageLinks(newPageSize);
- });
- // 更新所有分页链接的函数
- function updatePageLinks(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;
- }
- }
- // 新增函数:向后端发送pageSize
- function sendPageSizeToBackend(pageSize) {
- // 获取开始日的值
- var startTime = document.getElementById('Time_start').value;
- // 获取截止日的值
- var endTime = document.getElementById('Time_end').value;
- // 获取Sn的值
- var snValue = document.getElementsByName('T_sn')[0].value;
- const url = `?page=1&T_sn=${encodeURIComponent(snValue)}&Time_start=${encodeURIComponent(startTime)}&Time_end=${encodeURIComponent(endTime)}&pageSize=${encodeURIComponent(pageSize)}`; // 将pageSize作为查询参数添加到URL
- window.location.href = url;
- }
- 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);
- selectedIds.push({
- id: this.value,
- ut: seventhColumnValue.trim() // 去除前后空白
- });
- });
- if (selectedIds.length === 0) {
- layer.msg('请至少选择一项进行删除!', {icon: 5, time: 2000});
- return;
- }
- 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();
- var sn = row.find('td[sn]');
- var attr = sn.attr('sn');
- // 检查是否是第一列或第五列
- if (columnName === 'T_tp_name' || columnName === 't__state' || columnName === 't_sn'|| columnName === 't_id') {
- cell.html('<select style="display:block;"></select>');
- cell.append('<button class="confirm-btn">确认</button>');
- var selectBox = cell.find('select');
- console.log(selectBox);
- // 调用方法动态填充下拉选项
- populateSelectOptions(selectBox, columnName,attr);
- selectBox.val(originalText);
- selectBox.focus();
- selectBox.change(function () {
- var newValue = $(this).val();
- if (newValue !== '') {
- cell.html(newValue);
- submitUpdate(rowId, columnName, newValue, T_Ut_value,attr);
- selectBox.off('change'); // 清理事件监听
- } else {
- cell.text(originalText);
- }
- });
- // 给确认按钮绑定点击事件
- cell.find('.confirm-btn').on('click', function() {
- var newValue = selectBox.val();
- if (newValue !== '') {
- cell.html(newValue);
- submitUpdate(rowId, columnName, newValue, T_Ut_value, attr);
- // 清理,比如移除确认按钮和selectBox
- $(this).remove();
- selectBox.off('change').remove();
- } 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,attr);
- } else {
- // 如果用户清空了输入框,则恢复原始内容
- cell.text(originalText);
- }
- });
- }
- });
- $('.siftWarning').on('click', function () {
- $.ajax({
- type: "GET",
- url: "/Device/DeviceWarning_waraning",
- contentType: "application/json;charset=utf-8",
- dataType: "json",
- success: function (response) {
- if (response.Code === 200) {
- const data = response.Data;
- // 获取select元素
- const selectElement = document.querySelector('select');
- // 清空原有的选项(除了第一个默认选项)
- for (let i = selectElement.options.length - 1; i >= 1; i--) {
- selectElement.remove(i);
- }
- // 遍历数据并添加新的选项
- data.forEach(item => {
- const option = document.createElement('option');
- option.value = item.Key;
- option.textContent = item.Value;
- selectElement.appendChild(option);
- });
- } else {
- layer.msg('获取类型失败', {icon: 5, time: 2000});
- }
- },
- error: function (xhr, status, error) {
- layer.msg('请求错误,请检查网络连接!', {icon: 5, time: 2000});
- }
- });
- const selectElement = document.querySelector('select');
- // 添加change事件监听器
- selectElement.addEventListener('change', function() {
- // 在这里写你需要执行的方法或逻辑
- console.log('选中的值:', this.value); // 打印选中的值
- // 可以在这里调用其他方法或执行其他操作
- const t_tp=this.value;
- getWarningType(t_tp)
- });
- })
- function getWarningType (t_tp) {
- var pageSize = localStorage.getItem('pageSize') || 100;
- // 获取输入框的值
- const startTime = document.getElementById('Time_start').value;
- const endTime = document.getElementById('Time_end').value;
- const sn = document.querySelector('input[name="T_sn"]').value;
- // 在这里处理这些值,例如发送到服务器或进行其他操作
- console.log('开始时间:', startTime);
- console.log('结束时间:', endTime);
- console.log('SN:', sn);
- console.log('page:', pageSize);
- console.log('t_tp:', t_tp);
- const url = `?page=1&T_sn=${encodeURIComponent(sn)}&Time_start=${encodeURIComponent(startTime)}&Time_end=${encodeURIComponent(endTime)}&pageSize=${encodeURIComponent(pageSize)}&t_tp=${encodeURIComponent(t_tp)}`;
- window.location.href = url;
- }
- // 定义提交更新到后端的函数
- function submitUpdate(rowId, columnName, newValue, T_Ut_value,attr) {
- var dataToSubmit = {
- rowId: rowId,
- columnName: columnName,
- newValue: newValue,
- T_Ut: T_Ut_value,
- sn: attr,
- };
- // 发起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,attr) {
- switch (columnName) {
- case 'T_tp_name':
- fetch("/Device/DeviceWarning_waraning")
- .then(response => {
- if (!response.ok) {
- throw new Error('网络连接失败');
- }
- return response.json();
- })
- .then(data => {
- data.Data.forEach(item => {
- console.log(item.Key);
- selectBox.append(`<option value='${item.Key}'>${item.Value}</option>`);
- });
- })
- .catch(error => {
- console.error( 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;
- case 't_sn':
- fetch("/Device/DeviceWarning_ALL_SN")
- .then(response => {
- if (!response.ok) {
- throw new Error('网络连接失败');
- }
- return response.json();
- })
- .then(data => {
- data.Data.forEach(item => {
- selectBox.append(`<option value='${item.T_sn}'>${item.T_sn}</option>`);
- });
- })
- .catch(error => {
- console.error(error);
- });
- break;
- case 't_id':
- console.log(attr);
- const url = `/Device/DeviceWarning_ALL_TID?sn=${encodeURIComponent(attr)}`;
- fetch(url)
- .then(response => {
- if (!response.ok) {
- throw new Error('连接失败');
- }
- return response.json();
- })
- .then(data => {
- data.Data.forEach(item => {
- console.log(data.Data);
- selectBox.append(`<option value='${item.T_id}'>${item.T_id}</option>`);
- });
- })
- .catch(error => {
- console.error(error);
- });
- 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>
|