数据质量动态探查及相关前端实现-51CTO.COM

// 计算卡片中点坐标 index是卡片序号，adsorbSider表示是否吸边
getCardCenter(index: number, adsorbSider?: boolean) {
    ...
    // 获取卡片信息
    const cardBox: IBaseBox = this.cardList[index];
    // 获取列信息
    const colBox: IBaseBox = this.colList[index];
    const clientWidth = getClientWidth();
    if(adsorbSider) {
      // 吸边处理
      if(cardBox.offset < this.cardScroll) {
        return cardBox.offset;
      }
      if(cardBox.offset + cardBox.width - this.cardScroll > clientWidth) {
        return cardBox.offset + cardBox.width - clientWidth;
      }
      return this.cardScroll;
    }
    return getTargetPosition(colBox, this.tableScroll, cardBox);
}

// 获取滚动目标位置
// originBox: 滚动起始对象
// originScroll: 滚动起始左侧scroll
// targetBox: 滚动结束对象
const getTargetPosition = (originBox: IBaseBox, originScroll: number, targetBox: IBaseBox) => {
  const clientWidth = getClientWidth();
  if(!originBox || !targetBox) return 0;

  let offsetLeftSider = Math.max(originBox?.offset - originScroll, 0);
  if(offsetLeftSider + targetBox.width >= clientWidth) {
    if(targetBox.offset + targetBox.width > clientWidth) {
      // 此处容易出现吸边
      return targetBox.offset + targetBox.width - clientWidth;
    } else {
      return 0;
    }
  }
  const scroll = targetBox?.offset - offsetLeftSider + (targetBox.width - originBox.width) / 2;
  return Math.max(
    Math.min(targetBox.offset, scroll),
    0
  );
}

class ColDelOpt {
  run = (params: IOptEngineMetaInfo) => {
    // 操作Input部分
    const {
      columns = [],
      dataSourceMap = {}
    } = params;
    const {
      fields = []
    } = this.params;

    // 操作Logic部分
    const nextColumns = columns.filter((item) => !fields.includes(item.name));

    // 操作的Output
    return {
      columns: nextColumns,
      dataSourceMap
    }
  }
}

// 操作引擎
class OptEngine {

  // 操作列表
  private optList: IOptEngineItem[] = [];

  // 原始数据
  private metaData: IOptEngineMetaInfo = {
    columns: [],
    dataSourceMap: {},
  };

  // 执行算子
  optRun = () => {
    let {
      columns = [],
      dataSourceMap = {}
    } = this.metaData;

    if(!this.optList.length) return {
      columns,
      dataSourceMap
    };

    for(let index = 0; index < this.optList.length; index++) {
      // 读取操作算子
      const optItem = this.optList[index];
      let startTime = performance.now();

      try {
        // 执行算子计算
        const result = optItem.run({
          columns,
          dataSourceMap
        });

        // 更新算子结果
        columns = result.columns || [];
        dataSourceMap = result.dataSourceMap || {};
      } catch(e) {
        // 报错后直接直接返回
        return {
          columns,
          dataSourceMap,
          // 装填报错信息
          errorInfo: {
            key: optItem.key || '',
            message: e.message
          }
        }
      }
    }

    return {
      columns,
      dataSourceMap,
    }
  }

  autoRun = (
    metaInfo: IOptEngineMetaInfo,
    optList: IOptItem[],
    callback: (params: IAutoRunResult) => void
  ) => {
    // 装填数据
    this.setupMetaData(metaInfo);
    // 装填操作栈
    this.setupOptList(optList.map((item) => {
      // 行过滤
      if(item.type === OPT_TYPE.FILTER) {
        return new FilterOpt({
          key: item.key,
          params: item.params
        })
      }
      // 其余类型操作
      ...
      // 默认原值返回
      return new IdentityOpt({
        key: item.key,
      })
    }));

    // 执行操作计算
    const result = this.optRun();

    // 返回数据
    return {
      // 计算列
      columns: result.columns,
      // 执行结果
      dataSource: Object.entries(result.dataSourceMap).map(([key, value]) => ({
        field: key,
        value
      })),
      // 操作栈执行异常信息
      errorInfo: result.errorInfo
    };
  }
}