记Perfeye自定义项实现对比需求

背景

Perfyeye平台很早就支持对比功能了，但是支持的模块不全，需求方现在想要支持自定义列的需求对比功能，用来显示多份报告之间的差异以及性能趋势。

刚接到这个需求的时候，我想，这不就是简简单单CV复制一下老代码的逻辑，改改相应字段就可以了，30分钟也就差不多能搞定了。

后来一看代码，之前对比的模块 字段图表都是固定的，但是自定义列经过多次迭代，数据结构大概有3种。再一想想，如果手动粘贴 二三十个字段，粘贴完的代码至少2000行以上，非常不方便维护，也不利于以后修改，那么肯定要封装了。

数据结构

原型图

需求实现

规范数据

根据上面的三个数据结构，我的想法是要导出一个统计的数据结构，那么该有哪些内容呢

[{
    name: 'card标题',
    chartField: '图表所用字段',
    tableKeys: '图表label展示字段',// [`Avg(${i.key})`, `Max(${i.key})`, `Min(${i.key})`]
    multiTrendChart: '是否是新格式图表', // 旧格式 false
    unit: '图表单位',
}, {
    name: 'card标题',
    multiTrendChart: true, // 新格式 true
    chartConfig: {
        SetPass: [图表label展示字段],// ['Avg(SetPass)', 'Max(SetPass)', ...]
				...
    },
    unit: '图表单位',
}]

基本上这样的格式就够用了，然后根据旧数据格式，编写了转换的方法

import { customization } from "@/pages/CaseReport/modules/Custom/useChartList";
import { customizationmuti } from "@/pages/CaseReport/modules/Custom/const";

export const getCustomCompareFieldsConfig = () => {
  const customizationConfig = customization.map(i => {
    const tableKeys = [`Avg(${i.key})`, `Max(${i.key})`, `Min(${i.key})`]
    return {
      name: i.name,
      chartField: i.key,
      tableKeys: tableKeys,
      multiTrendChart: false,
      unit: i.unit,
    }
  })

  const getFieldNum = (key: string) => {
    // 如果是以下字段，显示 Avg、Max、Min、Tp90，不然显示Avg、Tp90
    const fields4 = ['SetPass', 'TextureCount', 'MeshCount', 'VulkanMemory']
    return fields4.includes(key) ? ['Avg', 'Max', 'Min', 'Tp90'] : ['Avg', 'Tp90']
  }

  const customizationmutiConfig = customizationmuti.map(i => {

    const chartConfig = i.childrenKeys.reduce((acc, cur) => {
      cur.optionKeys.forEach(j => {
        acc[j] = getFieldNum(j).map(k => `${k}(${j})`)
      })
      return acc
    }, {})
    return {
      name: i.name,
      multiTrendChart: true,
      chartConfig: chartConfig,
      unit: i.childrenKeys?.[0].unit || '',
    }
  })
  return [...customizationConfig, ...customizationmutiConfig]
}
// 获取自定义列所有字段
export const getAllCustomCompareFields = () => {
  const customCompareFieldsConfig = getCustomCompareFieldsConfig()
  const fieldsArr: string[] = []
  customCompareFieldsConfig.forEach(i => {
    // 多字段
    if (i.multiTrendChart) {
      Object.keys(i?.chartConfig || []).forEach(j => {
        fieldsArr.push(j)
      })
    } else {
      fieldsArr.push(i.chartField)
    }
  })
  return fieldsArr
}

页面渲染

接下来来到页面渲染的部分了，无非就是通过遍历方式把数据渲染出来

这里代码进行了判断，如果是 字段数大于1，那么加上单选逻辑

getTableColumns ，getChartOptions这两个方法都是根据 field字段信息拿到相关的配置项，这里就不多解释了

checkIsEmpty这个方法，因为字段太多了，空字段就不需要展示数据，这里进行判断报告是否含有相关字段

其他一点坑踩在如何绑定图表事件上面，之前代码是通过ref来实现的，但是我尝试了绑定不上，后来发现可以放在onChartReady中注册，真方便

实现效果

最终实现代码，不到300行

总结

一个需求下来，还是先拆分需求，从逻辑让能跑通，之后想用什么办法实现最好，最后根据相关Bug进行修复就可以了