local_alert/SScode.md

分批请求函数

• 入参方式
  • 1. （页码 + 页面大小）
  • 2. （偏移量 + 页面大小）

1》页码 + 页面大小

const fetchCameras = async () => {
    try {
        const token = localStorage.getItem('alertToken');
        const limit = 20; // 每次请求 20 条数据
        let offset = 0; // 从 0 开始
        let allCameras = [];

        // 第一次请求，用于获取总数
        const firstResponse = await apiInstance.getCameras(limit, offset, token);
        cameraCount.value = firstResponse.count;
        allCameras = firstResponse.results;

        // 根据总数继续请求剩余的数据
        const total = cameraCount.value;
        while (offset + limit < total) {
            offset += limit;
            const response = await apiInstance.getCameras(limit, offset, token);
            allCameras = allCameras.concat(response.results);
        }
        cameras.value = allCameras;
    } catch (error) {
        console.error('Error fetching cameras:', error);
    }
};

2》 偏移量 + 页面大小

• .length

const fetchEvents = async () => {
  try {
    const token = localStorage.getItem('alertToken');
    const limit = 2;
    let currentPage = 1;
    let allEvents = [];
    let total = 0;

    // 先请求一次以获取总条数
    const firstResponse = await apiInstance.getEvents(token, limit, currentPage);
    total = firstResponse.totalItems; // 总条数
    allEvents = firstResponse.tableData; // 第一次请求的数据

    // 使用 while 循环来请求后续的数据
    while (allEvents.length < total) {
      currentPage += 1;
      const offset = (currentPage - 1) * limit;
      const response = await apiInstance.getEvents(token, limit, currentPage);
      
      allEvents = allEvents.concat(response.tableData); // 追加数据
    }

    tableData.value = allEvents; // 将所有数据赋值给 tableData
  } catch (error) {
    console.error("Error fetching events data:", error);
  }
};

• offset + limit计算(初稿备份)

const fetchEvents = async () => {
  try {
    const token = localStorage.getItem('alertToken');
    const limit = 2000;
    let currentPage = 1;
    let allEvents = [];
    let total = 0;
    let offset = (currentPage - 1) * limit;

    // 先请求一次以获取总条数
    const firstResponse = await apiInstance.getEvents(token, limit, currentPage);
    total = firstResponse.totalItems; // 总条数
    allEvents = firstResponse.tableData; // 第一次请求的数据

    // 使用 while 循环来请求后续的数据
    while (offset+limit < total) {
      currentPage += 1;
      offset = (currentPage - 1) * limit;
      const response = await apiInstance.getEvents(token, limit, currentPage);
      
      allEvents = allEvents.concat(response.tableData); // 追加数据
    }

    tableData.value = allEvents; // 将所有数据赋值给 tableData
  } catch (error) {
    console.error("Error fetching events data:", error);
  }
};

数组并行处理和排序

• 更改前（分两个数组直接存）

const fetchCameras = async () => {
  try {
    // 获取摄像头数据
    const token = localStorage.getItem('alertToken');
    const limit = 20;
    let offset = 0;
    let allCameras = [];

    // 获取所有摄像头信息
    const firstResponse = await apiInstance.getCameras(limit, offset, token);
    const cameraCount = firstResponse.count;
    allCameras = firstResponse.results;

    while (offset + limit < cameraCount) {
      offset += limit;
      const response = await apiInstance.getCameras(limit, offset, token);
      allCameras = allCameras.concat(response.results);
    }

    // 提取摄像头名称和对应的告警数量
    const cameraNames = [];
    const cameraCounts = [];

    for (const camera of allCameras) {
      cameraNames.push(camera.name);

      // 获取该摄像头的告警数量
      const eventsResponse = await apiInstance.getEventsByParams(token, 20, 1, null, null, null, camera.id);
      const count = eventsResponse.count || 0; // 确保即使没有事件也返回 0
      cameraCounts.push(count);
    }

    // 更新图表的 Y 轴标签和系列数据
    option.value.yAxis[0].data = cameraNames;
    option.value.yAxis[1].data = cameraCounts.map(count => `${count}`);
    option.value.series[0].data = cameraCounts;
    option.value.series[1].data = cameraCounts;

    // 设置图表选项并启动轮播
    myChart.setOption(option.value);
    startMoveDataZoom(); // 重新启动轮播效果
  } catch (error) {
    console.error("Error fetching cameras or events:", error);
  }
};

• 更改后

const fetchCameras = async () => {
  try {
    // 获取摄像头数据
    const token = localStorage.getItem('alertToken');
    const limit = 20;
    let offset = 0;
    let allCameras = [];

    // 获取所有摄像头信息
    const firstResponse = await apiInstance.getCameras(limit, offset, token);
    const cameraCount = firstResponse.count;
    allCameras = firstResponse.results;

    while (offset + limit < cameraCount) {
      offset += limit;
      const response = await apiInstance.getCameras(limit, offset, token);
      allCameras = allCameras.concat(response.results);
    }

    // 提取摄像头名称和对应的告警数量并存储在对象数组中
    const cameraData = [];

    for (const camera of allCameras) {
      // 获取该摄像头的告警数量
      const eventsResponse = await apiInstance.getEventsByParams(token, 20, 1, null, null, null, camera.id);
      const count = eventsResponse.count || 0; // 确保即使没有事件也返回 0
      cameraData.push({ name: camera.name, count }); // 将数据存储为对象以便排序
    }

    // 按照告警数量降序排序
    cameraData.sort((a, b) => b.count - a.count);

    // 提取排序后的名称和数量
    const cameraNames = cameraData.map(item => item.name);
    const cameraCounts = cameraData.map(item => item.count);

    // 更新图表的 Y 轴标签和系列数据
    option.value.yAxis[0].data = cameraNames;
    option.value.yAxis[1].data = cameraCounts.map(count => `${count}`);
    option.value.series[0].data = cameraCounts;
    option.value.series[1].data = cameraCounts;

    // 设置图表选项并启动轮播
    myChart.setOption(option.value);
    startMoveDataZoom(); // 重新启动轮播效果
  } catch (error) {
    console.error("Error fetching cameras or events:", error);
  }
};