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

let modelMap = [];      //model_name model_id
let channelMap = [];    //channel_name  channel_id

//页面加载初始化
document.addEventListener('DOMContentLoaded', function () {
    perWarnHtml()
});

//搜索按钮点击
document.getElementById('searchMButton').addEventListener('click', function() {
    const startTime = document.getElementById('startTime').value;
    const endTime = document.getElementById('endTime').value;

    if (startTime && endTime) {
        console.log(`开始时间: ${startTime}, 结束时间: ${endTime}`);
        // 在这里执行其他逻辑，例如根据时间范围查询数据
    } else {
        alert('请选择完整的时间区间');
    }
});

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);

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

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

        // 构造请求体
        const requestData = {
            model_name: modelName || "",  // 如果为空，则传空字符串
            channel_id: channelId || "",
            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) {
                const data = await response.json();
                console.log('查询结果:', data);
                // 在这里处理查询结果，比如更新表格显示数据
                //updateTableWithData(data);
            } else {
                console.error('查询失败:', response.status);
            }
        } catch (error) {
            console.error('请求出错:', error);
        }

    }catch (error) {
        console.error('Error fetching model data:', error);
    }

    //读取报警数据并进行显示--要分页显示
    // modelData_bak = modelData;
    // currentPage = 1; // 重置当前页为第一页
    // renderTable();          //刷新表格
    // renderPagination();
    //操作-删除，图片，视频，审核（灰）
}

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

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


  pageData.forEach((model) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${model.ID}</td>
      <td>${model.name}</td>
      <td>${model.version}</td>
      <td>${model.duration_time}</td>
      <td>${model.proportion}</td>
      <td>
          <button class="btn btn-primary btn-sm modify-btn">升级</button>
          <button class="btn btn-secondary btn-sm algorithm-btn">配置</button>
          <button class="btn btn-danger btn-sm delete-btn">删除</button>
      </td>
    `;
    tableBody.appendChild(row);
    row.querySelector('.modify-btn').addEventListener('click', () => modifyModel(row));
    row.querySelector('.algorithm-btn').addEventListener('click', () => configureModel(row));
    row.querySelector('.delete-btn').addEventListener('click', () => deleteModel(row));
    });
}

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

  const totalPages = Math.ceil(modelData.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);
  }
}