规划进度条中进度百分比的计算

Question

我需要根据从后端收到的这个对象来计划和实施进度条的计算：

到期的： { 核心：1， 摘录：4， 关键概念：1， 问题文本 cmas：1， 问题文本fibq：1， 问题文本-mcq：1， 排名：1， 摘要-1：1， 文本1， 主题：1 }

我已经构建了进度条组件，现在我需要考虑这个实现。

这是我开始实现的功能：

const propertiesRef = useRef({
    extract: { curr: 0, max: 15 },
    keyconcepts: { curr: 0, max: 20 },
    question: {
        cmas: { curr: 0, max: 10 },
        fibq: { crr: 0, max: 10 },
        mcq: { curr: 0, max: 10 },
    },
    rank: { curr: 0, max: 5 },
    summary: { curr: 0, max: 15 },
    text: { curr: 0, max: 10 },
    topic: { curr: 0, max: 5 },
    allOver: 0,
}); // In this object i'll save the progress

const getProcess = async () => {
    let conditionLoop = true;
    do {
        setTimeout(async () => {
            await axios
                .get(`Route`, { withCredentials: true }) //From here i get the due object
                .then((res) => {
                    conditionLoop = res.data.due;
                    if (res?.data?.due) {
                        for (let key in propertiesRef.current) {
                            if (res.data.due.hasOwn(key)) {
                                console.log(key, res.data.due[key]);
                            }
                            if (res.data.due.hasOwn("question-text-cmas")) {
                                console.log(res.data.due);
                            }
                            if (res.data.due.hasOwn("question-text-fibq")) {
                                console.log(res.data.due);
                            }
                            if (res.data.due.hasOwn("question-text-mcq")) {
                                console.log(res.data.due);
                            }
                        }
                    } else {
                        propertiesRef.current.allOver = 1;
                        conditionloop=false;
                    }
                    console.log(propertiesRef.current);
                });
        }, 2000);
    } while (conditionLoop);
};

当我生成一些单元摘要时，这发生在我的应用程序中。

重要的是：当每个属性完成时，它会被后端从到期对象中删除，每个值为 1 的属性表示它仍在等待中，当它大于 1 时表示它正在进行中。

提前致谢。

Answer 1

一个简单的解决方案是只记住第一个到期计数，并将其与当前计数进行比较。

是这样的：

let totalProgress = useRef(null);
let progressFraction = useRef(null);

const progressFetchInterval = 2000;

const getProgress = async () => {
  setTimeout(async () => {
    await axios.get(`Route`, { withCredentials: true }).then((res) => {
      fraction = getFraction(res);
      getFraction.current = fraction;
      if (fraction === 1) totalProgress.current = null;
      else getProgress();
    });
  }, progressFetchInterval);
};

const getFraction = async (res) => {
  // ... request validation code ...
  const dueMap = res.data.due;
  const dueCount = Object.values(dueMap).reduce((a, b) => a + b, 0);
  if (totalProgress.current === null) totalProgress.current = dueCount;
  return (totalProgress.current - dueCount) / totalProgress.current;
};