zfsafe/web/main/static/resources/scripts/warn_manager.js

let modelMap = [];      //model_name model_id
let channelMap = [];    //channel_name  channel_id
let warn_data = [];     //查询到的报警数据
let page_data = [];
let currentEditingRow = null;
let currentPage = 1;
const rowsPerPage = 30;
//页面加载初始化
document.addEventListener('DOMContentLoaded', function () {
    perWarnHtml()

    document.getElementById('delPageButton').addEventListener('click', function () {
        delpageWarn();
      });
});

//搜索按钮点击
document.getElementById('searchMButton').addEventListener('click', function() {
    shearchWarn();
});

//查询数据
async function  shearchWarn(){
    //查询告警数据
    let modelName = document.getElementById('modelSelect').value;
    let channelName  = document.getElementById('channelSelect').value;
    const startTime = document.getElementById('startTime').value;
    const endTime = document.getElementById('endTime').value;
    const sCount = 0;   // 起始记录数从0开始
    const eCount = 5000;  // 每页显示10条记录

    if(modelName == "请选择"){
       modelName = "";
    }
    if(channelName == "请选择"){
       channelName = "";
    }

    // 构造请求体
    const requestData = {
        model_name: modelName || "",  // 如果为空，则传空字符串
        channel_name: channelName || "",
        start_time: startTime || "",
        end_time: endTime || "",
        s_count: sCount,
        e_count: eCount
    };
    try{
        // 发送POST请求到后端
        const response = await fetch('/api/warn/search_warn', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)  // 将数据转为JSON字符串
        });

        // 检查响应是否成功
        if (response.ok) {
            warn_data = await response.json();
            // 在这里处理查询结果，比如更新表格显示数据
            currentPage = 1; // 重置当前页为第一页
            renderTable();          //刷新表格
            renderPagination();
        } else {
            console.error('查询失败:', response.status);
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}

async function perWarnHtml() {
    //获取算法和通道列表，在下拉框显示
    try{
        //算法名称下拉框
        let response = await fetch('/api/model/list');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        model_datas = await response.json();
        model_select_datas = ["请选择"];
        model_datas.forEach(option => {
            model_select_datas.push(option.name);
            modelMap[option.name] = option.ID;
        });
        set_select_data("modelSelect",model_select_datas);

        //视频通道下拉框
        response = await fetch('/api/channel/tree');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        channel_datas = await response.json();
        channel_select_datas = ["请选择"];
        channel_datas.forEach(option => {
            channel_select_datas.push(option.channel_name);
            channelMap[option.channel_name] = option.ID;
        });
        set_select_data("channelSelect",channel_select_datas);
        //查询数据
        shearchWarn()
    }catch (error) {
        console.error('Error fetching model data:', error);
    }
}

//刷新表单页面数据
function renderTable() {
  const tableBody = document.getElementById('table-body-warn');
  tableBody.innerHTML = ''; //清空

  const start = (currentPage - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  pageData = warn_data.slice(start, end);
  const surplus_count = rowsPerPage - pageData.length;


  pageData.forEach((warn) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${warn.ID}</td>
      <td>${warn.model_name}</td>
      <td>${warn.channel_name}</td>
      <td>${warn.creat_time}</td>
      <td>
          <button class="btn btn-primary btn-sm warn-show-btn">查看</button>
          <button class="btn btn-secondary btn-sm warn-video-btn">视频</button>
          <button class="btn btn-danger btn-sm warn-delete-btn">删除</button>
      </td>
    `;
    tableBody.appendChild(row);
    row.querySelector('.warn-show-btn').addEventListener('click', () => showWarn(row));
    row.querySelector('.warn-video-btn').addEventListener('click', () => videoWarn(row));
    row.querySelector('.warn-delete-btn').addEventListener('click', () => deleteWarn(row));
    });
}

//刷新分页标签
function renderPagination() {
  const pagination = document.getElementById('pagination-warn');
  pagination.innerHTML = '';

  const totalPages = Math.ceil(warn_data.length / rowsPerPage);
  for (let i = 1; i <= totalPages; i++) {
    const pageItem = document.createElement('li');
    pageItem.className = 'page-item' + (i === currentPage ? ' active' : '');
    pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
    pageItem.addEventListener('click', (event) => {
      event.preventDefault();
      currentPage = i;
      renderTable();
      renderPagination();
    });
    pagination.appendChild(pageItem);
  }
}

//显示报警信息详情
function showWarn(row){
    currentEditingRow = row;
    model_name = row.cells[1].innerText;
    channel_name = row.cells[2].innerText;
    create_time = row.cells[3].innerText;
    img_path = pageData[row.rowIndex-1].img_path;

    document.getElementById('modelName').innerText = `${model_name}`;
    document.getElementById('channleName').innerText = `${channel_name}`;
    document.getElementById('warnTime').innerText = `${create_time}`;
    document.getElementById('warnImg').src = `/api/warn/warn_img?path=${img_path}`; // 设置图片的 src

    $('#showWarn').modal('show');
}

//下载视频按钮
function videoWarn(row){
    video_path = pageData[row.rowIndex-1].video_path;
    // const videoPlayer = document.getElementById('videoPlayer');
    // videoPlayer.src = `/api/warn/warn_video?path=${encodeURIComponent(video_path)}`;
    // videoPlayer.load(); // 确保重新加载视频
    // $('#showVideo').modal('show');
     // 创建下载链接
    const downloadUrl = `/api/warn/warn_video?path=${encodeURIComponent(video_path)}`;
    const a = document.createElement('a');
    a.href = downloadUrl;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

//删除一条报警数据
function deleteWarn(row){
    if (confirm('确定删除此报警吗？')) {
        let alarmIds=[];
        warn_id = row.cells[0].innerText;
        alarmIds.push(warn_id);
        // 发送POST请求到后端
        fetch('/api/warn/warn_del', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ alarmIds: alarmIds })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('删除成功');
            } else {
                alert('删除失败');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}

//删除当前页的报警数据
function delpageWarn(){
    if (confirm('确定删除此页报警吗？')) {
        let alarmIds=[];
        pageData.forEach((warn) => {
            alarmIds.push(warn.ID)
        });
        // 发送POST请求到后端
        fetch('/api/warn/warn_del', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ alarmIds: alarmIds })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('删除成功');
            } else {
                alert('删除失败');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}