pbl-student-table/src/components/checkEnglishVoice/data/index.vue

<template>
  <el-dialog title="学生报告" :visible.sync="dataDialog" :append-to-body="true" :before-close="handleClose"
    class="dialog_diy">
    <div>
      <div class="whiteBox">
        <div>{{ title }}</div>
        <div class="data_progress">
          <div class="depth">
              <div>
                <el-progress :width="80" type="circle" :percentage="score.Pronunciation" :stroke-width="15" :format="format" color="#40b640"></el-progress>
              </div>
              <span>Pronunciation score</span>
          </div>
          <div class="depth">
              <div>
                <el-progress :width="80" type="circle" :percentage="score.Accuracy" :stroke-width="15" :format="format" color="#bc66c3"></el-progress>
              </div>
              <span>Accuracy score</span>
          </div>
          <div class="depth">
              <div>
                <el-progress :width="80" type="circle" :percentage="score.Fluency" :stroke-width="15" :format="format" color="#e871bc"></el-progress>
              </div>
              <span>Fluency score</span>
          </div>
          <div class="depth">
              <div>
                <el-progress :width="80" type="circle" :percentage="score.Completeness" :stroke-width="15" :format="format" color="#697bda"></el-progress>
              </div>
              <span>Completeness score</span>
          </div>
        </div>
      </div>
      <div class="whiteBox" v-if="wordArray.length">
        <div class="word_box" v-for="(item, index) in wordArray" :key="index">
          <div class="word"><span>{{ index + 1 }}.</span><span>{{ item.content }}</span></div>
          <div class="star_box" v-if="item.work && item.work.score">
            <div class="star" v-for="index2 in 5" :key="'star' + index2" :class="{ starA: item.work.score >= (index2) }">
            </div>
          </div>
        </div>
      </div>
      <div class="whiteBox" v-if="sentenceArray.length">
        <div class="setenceBox" v-for="(item, index) in sentenceArray" :key="index">
          <div class="setence">
            <div class="title">{{ index+1 }}.原文:</div>
            <div class="content">{{ item.content }}</div>
          </div>
          <div class="star_box" style="margin: 10px 0;" v-if="item.work && item.work.score">
            <div class="star" v-for="index2 in 5" :key="'star' + index2" :class="{ starA: item.work.score >= (index2) }">
            </div>
          </div>
          <div class="setence">
            <div class="title">录音译文:</div>
            <span>{{ (item.work && item.work.text) ? item.work.text : '无' }}</span>
          </div>
        </div>
      </div>
      <div class="whiteBox" v-if="QAArray.length">
        <div class="setenceBox" v-for="(item, index) in QAArray" :key="index">
          <div class="setence">
            <div class="title">{{ index+1 }}.问题:</div>
            <div class="content">{{ item.content }}</div>
          </div>
          <!-- <div class="star_box" style="margin: 10px 0;">
            <div class="star" v-for="index2 in 5" :key="'star' + index2" :class="{ starA: 3 >= (index2) }">
            </div>
          </div> -->
          <div class="setence">
            <div class="title">录音回答译文:</div>
            <span>{{ (item.work && item.work.text) ? item.work.text : '无' }}</span>
          </div>
        </div>
      </div>
      <div class="whiteBox" v-if="themeArray.length">
        <div class="setenceBox" v-for="(item, index) in themeArray" :key="index">
          <div class="setence">
            <div class="title">{{ index+1 }}.要点:</div>
            <div class="content2">
              <span>{{ item.content }}</span>
              <span>{{ item.content2 }}</span>
            </div>
          </div>
          <!-- <div class="star_box" style="margin: 10px 0;">
            <div class="star" v-for="index2 in 5" :key="'star' + index2" :class="{ starA: 3 >= (index2) }">
            </div>
          </div> -->
          <div class="setence">
            <div class="title">录音回答译文:</div>
            <div class="content2">
              <!-- <span>{{ item.content }}</span> -->
              <span>{{ (item.work && item.work.text) ? item.work.text : '无' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="whiteBox" v-if="createRoleArray.length">
        <div class="setenceBox" v-for="(item, index) in createRoleArray" :key="index">
          <div class="setence">
            <div class="title">{{ index+1 }}.对话:</div>
            <div class="content2" v-if="item.work && item.work.length">
              <testRole :checkJson="item.work"></testRole>
            </div>
            <div class="content2" v-else>
              暂未对话
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  
<script>
import testRole from "../component/testRole.vue";
export default {
  components: {
    testRole
  },
  props: {
    dataDialog: {
      type: Boolean,
      default: false
    },
    englishVoiceJson: {
      type: Object,
      default: () => { }
    },
    commentDetail: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      checkJson: [],
      title: "",
      detail: "",
      checkType: 0,
      work: [],
      wScore2: 0,
      scoreDetail2: "",
      wordArray: [],
      sentenceArray: [],
      QAArray: [],
      themeArray: [],
      createRoleArray: [],
      score:{
        Pronunciation: 0,
        Accuracy: 0,
        Fluency: 0,
        Completeness: 0,
      }
    };
  },
  methods: {
    handleClose(done) {
      this.close();
      done();
    },
    close() {
      this.$emit("update:dataDialog", false);
    },
    close2() {
      this.$emit("update:dataDialog", false);
    },
    confirm() {
      this.close2();
    },
    setVoiceJson(val) {
      let score = {
        Pronunciation: 0,
        Accuracy: 0,
        Fluency: 0,
        Completeness: 0,
      }
      let scoreCont = 0
      let a = JSON.parse(JSON.stringify(val));
      this.title = a.title;
      this.detail = a.detail;
      this.checkJson = a.array;
      this.checkType = 0;
      this.work.length = a.array.length;
      let works = JSON.parse(
        JSON.parse(JSON.stringify(this.commentDetail.works))
      );
      for(var i = 0; i < works.length; i++){
        if (i > (this.checkJson.length - 1)) {
          break
        }
        if(works[i] && works[i].star){
          scoreCont++
          score.Pronunciation += works[i].star.PronScore
          score.Accuracy += works[i].star.AccuracyScore
          score.Fluency += works[i].star.FluencyScore
          score.Completeness += works[i].star.CompletenessScore
        }
      }
      this.score = {
        Pronunciation: parseInt((score.Pronunciation / scoreCont).toFixed(0)),
        Accuracy: parseInt((score.Accuracy / scoreCont).toFixed(0)),
        Fluency: parseInt((score.Fluency / scoreCont).toFixed(0)),
        Completeness: parseInt((score.Completeness / scoreCont).toFixed(0)),
      }
      for (var i = 0; i < this.checkJson.length; i++) {
        this.checkJson[i].work = ''
        if (i > (works.length - 1)) {
          break
        }
        this.checkJson[i].work = works[i];
      }

      let wordArray = []
      let sentenceArray = []
      let QAArray = []
      let themeArray = []
      let createRoleArray = []

      for (var i = 0; i < this.checkJson.length; i++) {
        if (this.checkJson[i].type == 'word') {
          wordArray.push(this.checkJson[i])
        } else if (this.checkJson[i].type == 'sentence') {
          sentenceArray.push(this.checkJson[i])
        } else if (this.checkJson[i].type == 'QA') {
          QAArray.push(this.checkJson[i])
        } else if (this.checkJson[i].type == 'theme') {
          themeArray.push(this.checkJson[i])
        } else if (this.checkJson[i].type == 'createRole') {
          createRoleArray.push(this.checkJson[i])
        }
      }

      this.wordArray = wordArray
      this.sentenceArray = sentenceArray
      this.QAArray = QAArray
      this.themeArray = themeArray
      this.createRoleArray = createRoleArray
      this.$forceUpdate()
    },
    format(percentage) {
      return percentage;
    },
  },
  watch: {
    dataDialog: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.setVoiceJson(this.englishVoiceJson);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.setVoiceJson(this.englishVoiceJson);
  }
};
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0vh auto !important;
}

.dialog_diy>>>.el-dialog__header {
  background: #454545 !important;
  padding: 15px;
}

.dialog_diy>>>.el-dialog__body {
  height: calc(100% - 54px);
  box-sizing: border-box;
  padding: 15px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
  background: #f0f4fa;
  overflow: auto;
}

.whiteBox {
  background: #fff;
  /* margin-bottom: 15px; */
  padding: 15px 30px;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}
.whiteBox +.whiteBox {
  margin-top: 15px;
}
.word_box {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  color: #000;
}

.word_box+.word_box {
  margin-top: 10px;
}

.word_box>.word {
  width: 250px;
}

.star_box {
  display: flex;
  align-items: center;
}

.star_box>.star {
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('../../../assets/icon/englishVoice/star-no.png');
  background-size: 100% 100%;
}

.star_box>.star+.star {
  margin-left: 5px;
}

.star_box>.starA {
  background-image: url('../../../assets/icon/englishVoice/star.png');
}


.setenceBox{}
.setenceBox + .setenceBox{
  margin-top: 15px;
}
.setenceBox > .setence{
  color: #000;
}
.setenceBox > .setence > .title{
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
.setenceBox > .setence > .content{
  word-break: break-word;
  white-space: pre-line;
  font-size: 14px;
}

.setenceBox > .setence > .content2{
  font-size: 14px;
}
.setenceBox > .setence > .content2 > span{
  display: block;
}
.setenceBox > .setence > .content2 > span:nth-child(1){
  font-size: 14px;
}

.setenceBox > .setence > .content2 > span:nth-child(2){
  word-break: break-word;
  white-space: pre-line;
  font-size: 14px;
  margin-top: 10px;
}

.data_progress{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.data_progress > .depth{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% / 4);
}
.data_progress > .depth > div{
  display: flex;
  justify-content: center;
}
.data_progress > .depth > span{
  font-size: 14px;
  font-weight: bold;
  color: #000;
  margin-top: 5px;
}
</style>