student-client/src/features/OnlineExam/Examing/OverallProgress.vue

<template>
  <div class="progress-container">
    <i-progress :percent="progressNum" :stroke-width="20" status="active" hide-info>
    </i-progress>
    <span>{{progress}}</span>
  </div>
</template>

<script>
export default {
  name: "OverallProgress",
  data() {
    return {};
  },
  props: {
    examQuestionList: Array
  },
  async mounted() {},
  computed: {
    progressNum() {
      return (
        100 *
        this.examQuestionList.filter(q => q.stuAnswer).length /
        this.examQuestionList.length
      );
    },
    progress: function() {
      return `${this.examQuestionList.filter(q => q.stuAnswer).length} / ${
        this.examQuestionList.length
      }`;
    }
  }
};
</script>

<style scoped>
.progress-container {
  display: grid;
  justify-self: flex-start;

  place-items: center;
  grid-template-columns: 200px 50px;
  width: 250px;
}
</style>