vue3 流式并行请求 渲染到ehcarts中，及取消流式请求

const getRtspEcharts = async () => {

  try {

    const formattedDate = new Date().toLocaleString();

    const videoArr = videosList.split(',');

    const roomIdArr = roomIdList.split(',');    

    // 参数校验

    if (videoArr.length !== roomIdArr.length) {

      throw new Error('视频列表与房间ID数量不匹配');

    }

    // 初始化全局数据存储（按房间ID索引）

    const globalData = roomIdArr.reduce((acc, roomId) => {

      acc[roomId] = { time: [], score_cur: [],score_acc:[] };

      return acc;

    }, {});

    // 创建处理单个流的函数

    const processStream = async (response, index) => {

      const roomId = roomIdArr[index];

      const reader = response.body.getReader();

      const decoder = new TextDecoder();

      while (true) {

        const { done, value } = await reader.read();

        if (done) break;

        const chunk = decoder.decode(value);

        try {

          const jsonString = chunk.trimEnd().replace(/^data:\s*/, '');

          const dataObj = JSON.parse(jsonString);

          // 更新全局数据并截断至50条

          const updateAndTruncate = (arr, value) => {

            arr.push(value);

            return arr.length > 50 ? arr.slice(-50) : arr;

          };

          globalData[roomId].time = updateAndTruncate(globalData[roomId].time, dataObj.time);

          globalData[roomId].score_cur = updateAndTruncate(globalData[roomId].score_cur, dataObj.score_cur);

          globalData[roomId].score_acc = updateAndTruncate(globalData[roomId].score_acc, dataObj.score_acc);

         

          // 合并所有流数据（时间轴自动保持最新50点）

          const allTimes = [...new Set(

            Object.values(globalData).flatMap(d => d.time)

          )].sort().slice(-50); // 新增排序和截取最新50个时间点

          console.log(globalData)  

         

     

          // 生成系列数据

          const barList = Object.entries(globalData).map(([id, data]) => ({

            name: `id`,

            data: allTimes.map(t => {

              const idx = data.time.indexOf(t);

              return idx !== -1 ? data.score_cur[idx] : null;

            })

          }));

          const lineList = Object.entries(globalData).map(([id, data]) => ({

            name: `房间${id}累计`,

            data: allTimes.map(t => {

              const idx = data.time.indexOf(t);

              return idx !== -1 ? data.score_acc[idx] : null;

            })

          }));

          const xAxisData = allTimes; // 直接使用已截取的时间轴

          const legendData = [

            ...barList.map(item => item.name),

            ...lineList.map(item => item.name)

          ];

          initEcharts(xAxisData, barList, lineList, legendData);

        } catch (error) {

          console.error(`房间${roomId}数据解析错误:`, error);

          if (error.name === 'AbortError') {

            reader?.cancel()

            console.log('Fetch aborted'); // 处理取消的情况

            return;

          } else {

            console.error('Fetch error:', error);

          }

        }

      }

    };

    // 发起请求

    const requests = videoArr.map((video, index) =>

      fetch('/rtsp/process', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify({

          videos: [video],

          room_ids: [roomIdArr[index]],

          start_time: [formattedDate],

          stream: true,

        }),

        signal: controller.signal

      })

    );

    console.log(requests,9998)

    const responses = await Promise.all(requests);

    await Promise.all(responses.map((res, index) => processStream(res, index)));

  } catch (error) {

    // console.error('初始化失败:', error);

  }

};

const stopStreaming = ()=>{

  // 1. 终止 Fetch 请求

  if (controller && !controller.signal.aborted) {

    controller.abort(); // 终止关联的流操作

  }

}

onBeforeUnmount(() => {

  stopStreaming()

});