refactor(qms): 重构趋势图展示逻辑

baoshiwei

2025-05-20 e181f04c642204e79749af93fa921875ff6c21ba

 src/views/qms/trend/index.vue

@@ -384,15 +384,50 @@

  // 使用Map替代Object更高效
  const seriesMap = new Map<string, [string, number][]>();
  testResultList.value.forEach(item => {
  testResultList.value.forEach((item) => {
    const key = item.testItem;
    const xValue = `${item.batchCode}-${item.testNum}`;
    if (!seriesMap.has(key)) {
      seriesMap.set(key, []);
    }
    seriesMap.get(key)?.push([item.createTime, item.testValue]);

    const seriesArray = seriesMap.get(key)!;

    // 移除已有相同 xValue 的条目
    const filtered = seriesArray.filter(entry => entry[0] !== xValue);
    filtered.push([xValue, item.testValue]);

    seriesMap.set(key, filtered);
  });

// 对每个 testItem 下的数据进行统一排序：先按 batchCode 再按 testNum
seriesMap.forEach((value, key) => {
  value.sort((a, b) => {
    const [batchA, testNumA] = a[0].split('-');
    const [batchB, testNumB] = b[0].split('-');

    // 先比较 batchCode（字符串比较）
    if (batchA !== batchB) {
      return batchA.localeCompare(batchB);
    }

    // 再比较 testNum（转换为数字比较）
    return Number(testNumA) - Number(testNumB);
  });

  seriesMap.set(key, value);
});


  const option = {
  tooltip: {
    trigger: 'item', // 触发类型：'item' 表示数据项触发
    formatter: (params: any) => {
      return `<strong>${params.seriesName}</strong><br/>` +
             `编号: ${params.name}<br/>` +
             `测试数据: ${params.value[1]}`;
    }
  },
    grid: {
      top: '15%',
      left: '5%',
@@ -400,8 +435,8 @@
      containLabel: true
    },
    xAxis: {
      type: 'time',
      name: '时间'
    type: 'category',
    name: '序号'
    },
    yAxis: {
      type: 'value',
@@ -417,35 +452,34 @@
      animationDuration: 1000,
      lineStyle: {
        color: colorPool[index % colorPool.length],
        width: 3 // 增加线条宽度
      width: 3
      },
      itemStyle: {
        color: colorPool[index % colorPool.length],
        opacity: 0.8 // 添加透明度
      opacity: 0.8
      }
    })),
    // 新增 dataZoom 配置
    dataZoom: [
      {
        type: 'slider', // X轴滑动条
        xAxisIndex: 0,
        start: 0, // 初始范围起点百分比
        end: 100 // 初始范围终点百分比
      },
      {
        type: 'slider', // Y轴滑动条
        yAxisIndex: 0,
        start: 0, // 初始范围起点百分比
        end: 100 // 初始范围终点百分比
      },
      {
        type: 'inside', // X轴内置拖动和框选
      type: 'slider',
        xAxisIndex: 0,
        start: 0,
        end: 100
      },
      {
        type: 'inside', // Y轴内置拖动和框选
      type: 'slider',
      yAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'inside',
      xAxisIndex: 0,
      start: 0,
      end: 100
    },
    {
      type: 'inside',
        yAxisIndex: 0,
        start: 0,
        end: 100
@@ -453,6 +487,7 @@
    ]
  };


  chart.setOption(option, true);
  window.addEventListener('resize', () => {
    chart.resize();