|
|
@@ -5,9 +5,19 @@
|
|
|
<h4><svg-icon icon-class="History"></svg-icon>历史记录</h4>
|
|
|
<i class="el-icon-close" @click="closeHistory"></i>
|
|
|
</div>
|
|
|
- <div class="list-center">
|
|
|
- <p>共{{ showList.length }}条记录</p>
|
|
|
- <span v-if="rangeStr">{{ rangeStr }}</span>
|
|
|
+ <div class="list-center-box">
|
|
|
+ <div class="list-center">
|
|
|
+ <p>共{{ showList.length }}条记录</p>
|
|
|
+ <span v-if="rangeStr">{{ rangeStr }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-center">
|
|
|
+ <p>最高分 {{ HScore }}</p>
|
|
|
+ <span>{{ Htime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-center">
|
|
|
+ <p>最低分 {{ LScore }}</p>
|
|
|
+ <span>{{ Ltime }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<ul>
|
|
|
<li
|
|
|
@@ -17,6 +27,12 @@
|
|
|
>
|
|
|
<b>{{ index + 1 }}.</b>
|
|
|
<span>{{ item.create_time.substring(0, 16) }}</span>
|
|
|
+ <span style="text-align: center">{{ item.average_score }}分</span>
|
|
|
+ <i :class="['score-change', item.lift]"
|
|
|
+ ><svg-icon :icon-class="item.lift"></svg-icon>
|
|
|
+ <span>{{ item.changeScore }}</span></i
|
|
|
+ >
|
|
|
+
|
|
|
<i class="el-icon-delete" @click="deleteRecord(item.id, index)"></i>
|
|
|
<i class="el-icon-arrow-right" @click="recordDetail(index)"></i>
|
|
|
</li>
|
|
|
@@ -99,6 +115,30 @@
|
|
|
</div>
|
|
|
<label>{{ activeIndex + 1 }}/{{ showList.length }}</label>
|
|
|
</div>
|
|
|
+ <div class="item-score">
|
|
|
+ <div class="item-score-top">
|
|
|
+ <span>AI评分</span>
|
|
|
+ <a @click="lookMoreInfo"
|
|
|
+ >详细信息<i class="el-icon-arrow-right"></i
|
|
|
+ ></a>
|
|
|
+ </div>
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>总体得分</label>
|
|
|
+ <p :style="wordStyle(showList[activeIndex].average_score)">
|
|
|
+ {{ showList[activeIndex].average_score }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>语速</label>
|
|
|
+ <p>{{ speed }}<span>词/分</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <label>流利度</label>
|
|
|
+ <p>{{ showList[activeIndex].fluency }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="item-bottom">
|
|
|
<div class="operate-box-inner-content">
|
|
|
<div class="operate-item" @click="changePlaySent('-')">
|
|
|
@@ -161,6 +201,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="recordsScoreInfoFlag"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="680px"
|
|
|
+ :modal="false"
|
|
|
+ class="login-dialog"
|
|
|
+ v-if="recordsScoreInfoFlag"
|
|
|
+ >
|
|
|
+ <RecordsScoreInfo
|
|
|
+ :sentData="sentData"
|
|
|
+ :scoreAllInfo="scoreInfo"
|
|
|
+ @closeScoreInfo="closeScoreInfo"
|
|
|
+ :wordFontsize="wordFontsize"
|
|
|
+ ></RecordsScoreInfo>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -168,9 +224,12 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
+import RecordsScoreInfo from "./RecordsScoreInfo.vue";
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ RecordsScoreInfo,
|
|
|
+ },
|
|
|
props: [
|
|
|
"list",
|
|
|
"sentData",
|
|
|
@@ -234,10 +293,37 @@ export default {
|
|
|
isPlay: false,
|
|
|
oldIndex: null,
|
|
|
timeC: null,
|
|
|
+ HScore: "-",
|
|
|
+ Htime: "-",
|
|
|
+ LScore: "-",
|
|
|
+ Ltime: "-",
|
|
|
+ speed: 0,
|
|
|
+ recordsScoreInfoFlag: false,
|
|
|
+ scoreInfo: null,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+ wordStyle() {
|
|
|
+ return function (score) {
|
|
|
+ if (score !== null) {
|
|
|
+ let color = "";
|
|
|
+ if (score < 60) {
|
|
|
+ color = "#F2555A";
|
|
|
+ } else if (60 <= score && score < 80) {
|
|
|
+ color = "#929CA8";
|
|
|
+ } else if (80 <= score && score < 90) {
|
|
|
+ color = "#0081F1";
|
|
|
+ } else if (score >= 90) {
|
|
|
+ color = "#1CCDA7";
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ color: color,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
//监控data中数据变化
|
|
|
watch: {
|
|
|
list: {
|
|
|
@@ -260,10 +346,39 @@ export default {
|
|
|
},
|
|
|
handleData() {
|
|
|
if (this.showList.length > 0) {
|
|
|
+ let list = JSON.parse(JSON.stringify(this.showList)).reverse();
|
|
|
this.rangeStr =
|
|
|
this.showList[0].create_time.substring(0, 10) +
|
|
|
"～" +
|
|
|
this.showList[this.showList.length - 1].create_time.substring(0, 10);
|
|
|
+ list.forEach((item, index) => {
|
|
|
+ if (this.HScore === "-" || this.HScore < item.average_score) {
|
|
|
+ this.HScore = JSON.parse(JSON.stringify(item.average_score));
|
|
|
+ this.Htime = item.create_time.substring(0, 10);
|
|
|
+ }
|
|
|
+ if (this.LScore === "-" || this.LScore > item.average_score) {
|
|
|
+ this.LScore = JSON.parse(JSON.stringify(item.average_score));
|
|
|
+ this.Ltime = item.create_time.substring(0, 10);
|
|
|
+ }
|
|
|
+ if (list[index - 1]) {
|
|
|
+ item.lift =
|
|
|
+ list[index - 1].average_score > item.average_score
|
|
|
+ ? "downScore"
|
|
|
+ : list[index - 1].average_score < item.average_score
|
|
|
+ ? "upScore"
|
|
|
+ : "flat";
|
|
|
+ item.changeScore =
|
|
|
+ list[index - 1].average_score > item.average_score
|
|
|
+ ? list[index - 1].average_score - item.average_score
|
|
|
+ : list[index - 1].average_score < item.average_score
|
|
|
+ ? item.average_score - list[index - 1].average_score
|
|
|
+ : 0;
|
|
|
+ } else {
|
|
|
+ item.lift = "flat";
|
|
|
+ item.changeScore = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.showList = JSON.parse(JSON.stringify(list)).reverse();
|
|
|
}
|
|
|
},
|
|
|
// 删除一条录音记录
|
|
|
@@ -282,6 +397,8 @@ export default {
|
|
|
recordDetail(index) {
|
|
|
this.activeIndex = index;
|
|
|
this.showItem = true;
|
|
|
+ this.scoreInfo = null;
|
|
|
+ this.speed = 0;
|
|
|
let MethodName = "/PaperServer/Client/UserSentRec/FindById";
|
|
|
let data = {
|
|
|
id: this.showList[this.activeIndex].id,
|
|
|
@@ -291,6 +408,20 @@ export default {
|
|
|
if (res.status === 1) {
|
|
|
this.showList[this.activeIndex].rec_sound_data =
|
|
|
res.data.rec_sound_data;
|
|
|
+ this.speed = Math.floor(
|
|
|
+ (JSON.parse(res.data.rec_rate_info).json_result.length /
|
|
|
+ JSON.parse(res.data.rec_rate_info).audio_time) *
|
|
|
+ 60
|
|
|
+ );
|
|
|
+ this.scoreInfo = {
|
|
|
+ score_result: {
|
|
|
+ average_score: res.data.average_score,
|
|
|
+ fluency: res.data.fluency,
|
|
|
+ },
|
|
|
+ current: {
|
|
|
+ rec_rate_info: res.data.rec_rate_info,
|
|
|
+ },
|
|
|
+ };
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -313,6 +444,13 @@ export default {
|
|
|
} else {
|
|
|
}
|
|
|
}
|
|
|
+ this.speed = Math.floor(
|
|
|
+ (JSON.parse(this.showList[this.activeIndex].rec_rate_info).json_result
|
|
|
+ .length /
|
|
|
+ JSON.parse(this.showList[this.activeIndex].rec_rate_info)
|
|
|
+ .audio_time) *
|
|
|
+ 60
|
|
|
+ );
|
|
|
},
|
|
|
playmicrophone() {
|
|
|
let _this = this;
|
|
|
@@ -389,6 +527,21 @@ export default {
|
|
|
clearInterval(this.timeCur);
|
|
|
clearInterval(this.timeC);
|
|
|
},
|
|
|
+ lookMoreInfo() {
|
|
|
+ this.recordsScoreInfoFlag = true;
|
|
|
+ this.scoreInfo = {
|
|
|
+ score_result: {
|
|
|
+ average_score: this.showList[this.activeIndex].average_score,
|
|
|
+ fluency: this.showList[this.activeIndex].fluency,
|
|
|
+ },
|
|
|
+ current: {
|
|
|
+ rec_rate_info: this.showList[this.activeIndex].rec_rate_info,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ closeScoreInfo() {
|
|
|
+ this.recordsScoreInfoFlag = false;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
@@ -439,11 +592,16 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+.list-center-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
.list-center {
|
|
|
border-radius: 4px;
|
|
|
background: #f7f8fa;
|
|
|
padding: 8px 12px;
|
|
|
margin: 24px 0;
|
|
|
+ width: 205px;
|
|
|
p {
|
|
|
color: #2f3742;
|
|
|
font-size: 16px;
|
|
|
@@ -488,6 +646,36 @@ ul {
|
|
|
font-size: 16px;
|
|
|
padding: 3px;
|
|
|
}
|
|
|
+ .score-change {
|
|
|
+ font-style: normal;
|
|
|
+ width: 44px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16px;
|
|
|
+ .svg-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #5373e7;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.downScore {
|
|
|
+ span {
|
|
|
+ color: #f2555a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.upScore {
|
|
|
+ span {
|
|
|
+ color: #10b3a3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.list-item {
|
|
|
@@ -520,11 +708,12 @@ ul {
|
|
|
}
|
|
|
}
|
|
|
.item-center {
|
|
|
- min-height: 300px;
|
|
|
+ min-height: 243px;
|
|
|
padding: 40px 0;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
> label {
|
|
|
position: absolute;
|
|
|
bottom: 0px;
|
|
|
@@ -537,8 +726,52 @@ ul {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+ .item-score {
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ margin-top: 40px;
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #2f3742;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ a {
|
|
|
+ color: #929ca8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 8px;
|
|
|
+ .info-item {
|
|
|
+ width: 190px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ label {
|
|
|
+ color: #929ca8;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ color: #2f3742;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 28px;
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.item-bottom {
|
|
|
- border-top: 1px solid #ebebeb;
|
|
|
padding-top: 40px;
|
|
|
.operate-box-inner-content {
|
|
|
width: 600px;
|
natasha
