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

let currentPage = 1;
const rowsPerPage = 10;
let modelData = [];
let modelData_bak = []; //用于关键字检索
let currentEditingRow = null;



//页面加载初始化
document.addEventListener('DOMContentLoaded', function () {
    fetchModelData(); //初始化通道管理页面元素数据
    //新增算法模态框---保存按钮
    document.getElementById('saveButton_model').addEventListener('click',function () {
        addModel();
    });

    //配置算法模态框--保存按钮
    document.getElementById('saveButton_config_model').addEventListener('click',function () {
        post_configureModel();
    });

    //升级算法模态框--保存按钮
    document.getElementById('saveButton_upmodel').addEventListener('click',function () {
        post_modifyModel();
    });

    //查询按钮
    document.getElementById('searchMButton').addEventListener('click',function () {
        searchModel();
    });
});

//获取算法列表数据，并更新页面
async function fetchModelData() {
    try{
        let response = await fetch('/api/model/list');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        modelData = await response.json();
        modelData_bak = modelData;
        currentPage = 1; // 重置当前页为第一页
        renderTable();          //刷新表格
        renderPagination();
    }catch (error) {
        console.error('Error fetching model data:', error);
    }
}

//刷新表单页面数据
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);
  }
}

//显示升级算法模态框
function modifyModel(row){
    currentEditingRow = row;
    model_name = row.cells[1].innerText;
    version_name = row.cells[2].innerText;

    document.getElementById('update_mname_label').innerText = `算法名称:    ${model_name}`;
    document.getElementById('update_mversion_label').innerText = `当前版本:   ${version_name}`;
    $('#updateMM').modal('show');
}

//升级算法模态框--点击保存按钮
function post_modifyModel(){
    mid = currentEditingRow.cells[0].innerText;
    const btn = document.getElementById('saveButton_upmodel');
    const fileInput = document.getElementById('updateModelFile');
    const file = fileInput.files[0];
    if(file){
        btn.disabled = true;    //不可点击
        const formData = new FormData();
        formData.append('file', file);
        formData.append('mid', mid);

        fetch('/api/model/upgrade', {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            const istatus = data.status;
            alert(data.msg);
            btn.disabled = false;
            if(istatus == 1 ){
                fetchModelData();
                $('#updateMM').modal('hide');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('升级失败，请重试。');
            btn.disabled = false;
        });
    }
    else{
        alert('请选择升级包进行上传。');
        btn.disabled = false;
    }
}

//显示配置算法模态框
function configureModel(row){
    currentEditingRow = row;
    model_name = row.cells[1].innerText;
    duration_time = row.cells[3].innerText;
    proportion = row.cells[4].innerText;
    //设置模态框控件遍历
    document.getElementById('config_mname_label').innerText = `算法名称:    ${model_name}`;
    document.getElementById('duration_timeInput').value = duration_time;
    document.getElementById('proportionInput').value = proportion;
    $('#configMM').modal('show');
}

//配置算法模态框--点击保存按钮
function post_configureModel(){
    mid = currentEditingRow.cells[0].innerText;
    duration_time = parseInt(document.getElementById('duration_timeInput').value);
    proportion = parseFloat(document.getElementById('proportionInput').value);
    if(isNaN(duration_time) || isNaN(proportion) ){
        alert("请输入数字！");
        return;
    }
    if(proportion<=0 || proportion>=1){
        alert("占比阈值需要大于0，且小于1");
        return;
    }
    //提交数据
    const url = '/api/model/changecnf';
    const data = {"mid":mid,"duration_time":duration_time,"proportion":proportion};
    // 发送 POST 请求
    fetch(url, {
        method: 'POST', // 指定请求方法为 POST
        headers: {
            'Content-Type': 'application/json' // 设置请求头，告诉服务器请求体的数据类型为 JSON
        },
        body: JSON.stringify(data) // 将 JavaScript 对象转换为 JSON 字符串
    })
    .then(response => response.json()) // 将响应解析为 JSON
    .then(data => {
        const istatus = data.status;
        if(istatus === 0){
            alert(data.msg);
            return;
        }
        else{
            //刷新列表
            fetchModelData();
            alert(data.msg);
            $('#configMM').modal('hide');
        }
    })
    .catch((error) => {
        alert(`Error: ${error.message}`);
        return;
    });
}

//删除算法记录
function deleteModel(row){
    if (confirm('确定删除此算法吗？')) {
        mid = row.cells[0].innerText;
        const url = '/api/model/del';
        const data = {"mid":mid};
        // 发送 POST 请求
        fetch(url, {
            method: 'POST', // 指定请求方法为 POST
            headers: {
                'Content-Type': 'application/json' // 设置请求头，告诉服务器请求体的数据类型为 JSON
            },
            body: JSON.stringify(data) // 将 JavaScript 对象转换为 JSON 字符串
        })
        .then(response => response.json()) // 将响应解析为 JSON
        .then(data => {
            const istatus = data.status;
            if(istatus === 0){
                alert(data.msg);
                return;
            }
            else{
                //刷新列表
                row.remove();
                alert("删除算法成功！");
            }
        })
        .catch((error) => {
            alert(`Error: ${error.message}`);
            return;
        });

    }
}

//新增算法--保存按钮
function addModel(){
    const btn = document.getElementById('saveButton_model');
    const fileInput = document.getElementById('uploadModelFile');
    const file = fileInput.files[0];
    const mName = document.getElementById('MNameInput').value;

    if (file && mName) {
        btn.disabled = true;    //不可点击
        const formData = new FormData();
        formData.append('file', file);
        formData.append('mName', mName);

        fetch('/api/model/add', {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            const istatus = data.status;
            alert(data.msg);
            btn.disabled = false;
            if(istatus == 1 ){
                fetchModelData();
                $('#addMM').modal('hide');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('上传失败，请重试。');
            btn.disabled = false;
        });
    } else {
        alert('请填写算法名称并选择一个升级包进行上传。');
        btn.disabled = false;
    }
}

//关键字检索
function searchModel(){
    try {
        const modelName = document.getElementById('modelNameInput').value;
        if(modelName===""){
            modelData  =  modelData_bak;
        }
        else{
            modelData = [];
            modelData_bak.forEach((model) => {
                if(model.name.includes(modelName)){
                    modelData.push(model);
                }
            });
        }
        // 渲染表格和分页控件
        currentPage = 1; // 重置当前页为第一页
        renderTable();
        renderPagination();
      } catch (error) {
        console.error('Error performing search:', error);
    }
}