评分

src/views/bookShelf/components/HistoryRecordList.vue

@@ -1,120 +1,165 @@
 <template>
   <div class="history-record-list" v-if="list">
     <template v-if="!showItem">
-        <div class="list-top">
-            <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>
-        <ul>
-            <li v-for="(item,index) in showList" :key="index" :class="[index%2===1?'odd':'']">
-                <b>{{index+1}}.</b>
-                <span>{{item.create_time.substring(0,16)}}</span>
-                <i class="el-icon-delete" @click="deleteRecord(item.id,index)"></i>
-                <i class="el-icon-arrow-right" @click="recordDetail(index)"></i>
-            </li>
-        </ul>
-        <div class="nodata" v-if="showList.length===0">
-            <img src="../../../assets/nodata.png" />
-            <p>还没有记录</p>
-        </div>
+      <div class="list-top">
+        <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>
+      <ul>
+        <li
+          v-for="(item, index) in showList"
+          :key="index"
+          :class="[index % 2 === 1 ? 'odd' : '']"
+        >
+          <b>{{ index + 1 }}.</b>
+          <span>{{ item.create_time.substring(0, 16) }}</span>
+          <i class="el-icon-delete" @click="deleteRecord(item.id, index)"></i>
+          <i class="el-icon-arrow-right" @click="recordDetail(index)"></i>
+        </li>
+      </ul>
+      <div class="nodata" v-if="showList.length === 0">
+        <img src="../../../assets/nodata.png" />
+        <p>还没有记录</p>
+      </div>
     </template>
     <template v-else>
-        <div class="list-item">
-            <div class="item-top">
-                <h4><svg-icon icon-class="History"></svg-icon>历史记录 {{showList[activeIndex].create_time.substring(0,16)}}</h4>
-                <i class="el-icon-close" @click="closeItemHistory"></i>
+      <div class="list-item">
+        <div class="item-top">
+          <h4>
+            <svg-icon icon-class="History"></svg-icon>历史记录
+            {{ showList[activeIndex].create_time.substring(0, 16) }}
+          </h4>
+          <i class="el-icon-close" @click="closeItemHistory"></i>
+        </div>
+        <div class="item-center">
+          <div class="item-sent">
+            <div class="nnpe-sentence-box">
+              <div
+                v-for="(pItem, pIndex) in sentData"
+                :key="'wordsList' + pIndex"
+              >
+                <template v-if="pItem.isShow">
+                  <div
+                    :class="['NNPE-words']"
+                    @click="
+                      handleChangeTime(timeData && timeData && timeData.s)
+                    "
+                  >
+                    <span
+                      class="NNPE-chs"
+                      :class="[
+                        timeData &&
+                        timeData &&
+                        timeData.e &&
+                        timeData.tokens &&
+                        timeData.tokens[pItem.wIndex] &&
+                        curTime >= timeData.tokens[pItem.wIndex].s &&
+                        curTime <= timeData.e
+                          ? 'wordActive'
+                          : '',
+                        pItem.tokens[9] === '' ? 'marginRight' : '',
+                        pItem.marginRight ? 'marginSingleRight' : '',
+                      ]"
+                      :style="{ fontSize: wordFontsize + 'px' }"
+                      >{{ pItem.tokens[2] }}</span
+                    >
+                    <span
+                      class="NNPE-chs NNPE-chs-both"
+                      v-if="
+                        sentData[pIndex + 1] &&
+                        sentData[pIndex + 1].tokens[2] &&
+                        enFhList.indexOf(sentData[pIndex + 1].tokens[2]) > -1
+                      "
+                      :class="[
+                        timeData &&
+                        timeData &&
+                        timeData.tokens[pItem.wIndex] &&
+                        curTime >= timeData.tokens[pItem.wIndex].s &&
+                        curTime <= timeData.e
+                          ? 'wordActive'
+                          : '',
+                        sentData[pIndex + 1].tokens[8] === ''
+                          ? 'marginLeft'
+                          : '',
+                        sentData[pIndex + 1].marginRight
+                          ? 'marginSingleRight'
+                          : '',
+                      ]"
+                      :style="{ fontSize: wordFontsize + 'px' }"
+                      >{{ sentData[pIndex + 1].tokens[2] }}</span
+                    >
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <label>{{ activeIndex + 1 }}/{{ showList.length }}</label>
+        </div>
+        <div class="item-bottom">
+          <div class="operate-box-inner-content">
+            <div class="operate-item" @click="changePlaySent('-')">
+              <svg-icon
+                icon-class="Go-start"
+                :style="{ color: '#000' }"
+              ></svg-icon>
+              <span
+                :style="{
+                  color: colorObj.type === 'armyGreen' ? '#7C8983' : '',
+                }"
+                >上一句</span
+              >
+            </div>
+            <div class="operate-item" @click="compare">
+              <svg-icon
+                icon-class="Type-drive"
+                :style="{ color: '#000' }"
+              ></svg-icon>
+              <span
+                :style="{
+                  color: colorObj.type === 'armyGreen' ? '#7C8983' : '',
+                }"
+                >听对比</span
+              >
+            </div>
+            <div class="operate-item">
+              <b class="luyin-btn" @click="playSent">
+                <svg-icon
+                  icon-class="voice"
+                  :style="{ color: '#fff' }"
+                ></svg-icon>
+              </b>
             </div>
-            <div class="item-center">
-                <div class="item-sent">
-                    <div class="nnpe-sentence-box">
-                        <div v-for="(pItem, pIndex) in sentData" :key="'wordsList' + pIndex">
-                            <template v-if="pItem.isShow">
-                                <div
-                                    :class="[
-                                    'NNPE-words',
-                                    ]"
-                                    @click="
-                                    handleChangeTime(
-                                        timeData &&
-                                        timeData &&
-                                        timeData.s
-                                    )
-                                    "
-                                >
-                                        <span
-                                            class="NNPE-chs"
-                                            :class="[
-                                                timeData &&
-                                                timeData &&
-                                                timeData.e &&
-                                                timeData.tokens &&
-                                                timeData.tokens[pItem.wIndex]&&
-                                                curTime >=
-                                                    timeData.tokens[pItem.wIndex].s &&
-                                                curTime <= timeData.e
-                                                    ? 'wordActive'
-                                                    : '',
-                                                pItem.tokens[9]===''?'marginRight':'',pItem.marginRight?'marginSingleRight':''
-                                            ]"
-                                            :style="{fontSize:wordFontsize + 'px'}"
-                                            >{{ pItem.tokens[2] }}</span
-                                        >
-                                        <span
-                                        class="NNPE-chs NNPE-chs-both"
-                                        v-if="sentData[pIndex + 1] &&
-                                        sentData[pIndex + 1].tokens[2] &&
-                                        enFhList.indexOf(sentData[pIndex + 1].tokens[2]) > -1"
-                                        :class="[
-                                                timeData &&
-                                                timeData &&
-                                                timeData.tokens[pItem.wIndex]&&
-                                                curTime >=
-                                                    timeData.tokens[pItem.wIndex].s &&
-                                                curTime <= timeData.e
-                                                    ? 'wordActive'
-                                                    : '',
-                                                sentData[pIndex + 1].tokens[8]===''?'marginLeft':'',sentData[pIndex + 1].marginRight?'marginSingleRight':''
-                                            ]"
-                                            :style="{fontSize:wordFontsize + 'px'}"
-                                        >{{ sentData[pIndex + 1].tokens[2] }}</span
-                                    >
-                                </div>
-                            </template>
-                        </div>
-                        </div>
-                </div>
-                <label>{{activeIndex+1}}/{{showList.length}}</label>
+            <div class="operate-item" @click="playmicrophone()">
+              <svg-icon
+                icon-class="Headphone-sound"
+                :style="{ color: '#000' }"
+              ></svg-icon>
+              <span
+                :style="{
+                  color: colorObj.type === 'armyGreen' ? '#7C8983' : '',
+                }"
+                >我读的</span
+              >
             </div>
-            <div class="item-bottom">
-                <div class="operate-box-inner-content">
-                    <div class="operate-item" @click="changePlaySent('-')">
-                        <svg-icon icon-class="Go-start" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
-                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">上一句</span>
-                    </div>
-                    <div class="operate-item" @click="compare">
-                        <svg-icon icon-class="Type-drive" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
-                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">听对比</span>
-                    </div>
-                    <div class="operate-item">
-                        <b class="luyin-btn" @click="playSent">
-                            <svg-icon icon-class="voice" :style="{color:'#fff'}"></svg-icon>
-                        </b>
-                    </div>
-                    <div class="operate-item" @click="playmicrophone()">
-                        <svg-icon icon-class="Headphone-sound" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
-                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">我读的</span>
-                    </div>
-                    <div class="operate-item" @click="changePlaySent('+')">
-                        <svg-icon icon-class="Go-end" :style="{color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#000':'#fff'}"></svg-icon>
-                        <span :style="{color:colorObj.type==='armyGreen'?'#7C8983':''}">下一句</span>
-                    </div>
-                </div>
+            <div class="operate-item" @click="changePlaySent('+')">
+              <svg-icon
+                icon-class="Go-end"
+                :style="{ color: '#000' }"
+              ></svg-icon>
+              <span
+                :style="{
+                  color: colorObj.type === 'armyGreen' ? '#7C8983' : '',
+                }"
+                >下一句</span
+              >
             </div>
+          </div>
         </div>
+      </div>
     </template>
   </div>
 </template>
@@ -125,13 +170,22 @@
 import { getLogin } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
-  props: ["list","sentData","timeData","mp3Url","colorObj","wordFontsize","parentCurtimt","parentPlay"],
+  components: {},
+  props: [
+    "list",
+    "sentData",
+    "timeData",
+    "mp3Url",
+    "colorObj",
+    "wordFontsize",
+    "parentCurtimt",
+    "parentPlay",
+  ],
   data() {
     //这里存放数据
     return {
       showItem: false,
-      rangeStr: '',
+      rangeStr: "",
       showList: JSON.parse(JSON.stringify(this.list)),
       activeIndex: -1,
       curTime: this.timeData.s,
@@ -179,19 +233,19 @@ export default {
       timeCur: null,
       isPlay: false,
       oldIndex: null,
-      timeC: null
-    }
+      timeC: null,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-     list:{
+    list: {
       handler(val, oldVal) {
         const _this = this;
         if (val) {
-          this.showList = JSON.parse(JSON.stringify(this.list))
-          this.handleData()
+          this.showList = JSON.parse(JSON.stringify(this.list));
+          this.handleData();
         }
       },
       // 深度观察监听
@@ -201,378 +255,383 @@ export default {
   //方法集合
   methods: {
     // 关闭
-    closeHistory(){
-        this.$emit('closeHistory')
+    closeHistory() {
+      this.$emit("closeHistory");
     },
-    handleData(){
-        if(this.showList.length>0){
-            this.rangeStr = this.showList[0].create_time.substring(0,10)+'～'+this.showList[this.showList.length-1].create_time.substring(0,10)
-        }
+    handleData() {
+      if (this.showList.length > 0) {
+        this.rangeStr =
+          this.showList[0].create_time.substring(0, 10) +
+          "～" +
+          this.showList[this.showList.length - 1].create_time.substring(0, 10);
+      }
     },
     // 删除一条录音记录
-    deleteRecord(id,index){
-        let MethodName = "/PaperServer/Client/UserSentRec/DeleteById";
-        let data = {
-            id: id
+    deleteRecord(id, index) {
+      let MethodName = "/PaperServer/Client/UserSentRec/DeleteById";
+      let data = {
+        id: id,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.showList.splice(index, 1);
         }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                this.showList.splice(index,1)
-            }
-        })
+      });
     },
     // 查看一条录音详情
-    recordDetail(index){
-        this.activeIndex = index
-        this.showItem = true
-        let MethodName = "/PaperServer/Client/UserSentRec/FindById";
-        let data = {
-            id: this.showList[this.activeIndex].id,
-            got_rec_data_flag: true
+    recordDetail(index) {
+      this.activeIndex = index;
+      this.showItem = true;
+      let MethodName = "/PaperServer/Client/UserSentRec/FindById";
+      let data = {
+        id: this.showList[this.activeIndex].id,
+        got_rec_data_flag: true,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.showList[this.activeIndex].rec_sound_data =
+            res.data.rec_sound_data;
         }
-        getLogin(MethodName, data)
-        .then((res) => {
-            if(res.status===1){
-                this.showList[this.activeIndex].rec_sound_data = res.data.rec_sound_data
-            }
-        })
+      });
     },
-    changePlaySent(type){
-        if (!this.audio.paused) {
-            this.audio.pause();
-        } 
-        if (!this.audioc.paused) {
-            this.audioc.pause();
-        } 
-        if(type==='-'){
-            if(this.activeIndex>0){
-                this.activeIndex--
-            }else{
-                this.activeIndex=0
-            }
-        }else{
-            if(this.activeIndex<this.showList.length-1){
-                this.activeIndex++
-            }else{
-                
-            }
-        }
-    },
-    playmicrophone() {
-        let _this = this;
-        this.audioc.pause()
-        if(this.parentPlay){
-            this.$emit("handleChangeTime",this.curTime,this.timeData.e,true)
+    changePlaySent(type) {
+      if (!this.audio.paused) {
+        this.audio.pause();
+      }
+      if (!this.audioc.paused) {
+        this.audioc.pause();
+      }
+      if (type === "-") {
+        if (this.activeIndex > 0) {
+          this.activeIndex--;
+        } else {
+          this.activeIndex = 0;
         }
-        if (!this.audio.paused) {
-            this.audio.pause();
-        } else if (this.audio.paused && _this.oldIndex == _this.activeIndex) {
-            _this.audio.play();
+      } else {
+        if (this.activeIndex < this.showList.length - 1) {
+          this.activeIndex++;
         } else {
-            _this.audio.pause();
-            _this.audio.load();
-            _this.audio.src = _this.showList[_this.activeIndex].rec_sound_data;
-            _this.oldIndex = _this.activeIndex;
-            _this.audio.play();
         }
+      }
     },
-    // 播放句子
-    playSent(){
-        let _this = this
+    playmicrophone() {
+      let _this = this;
+      this.audioc.pause();
+      if (this.parentPlay) {
+        this.$emit("handleChangeTime", this.curTime, this.timeData.e, true);
+      }
+      if (!this.audio.paused) {
+        this.audio.pause();
+      } else if (this.audio.paused && _this.oldIndex == _this.activeIndex) {
+        _this.audio.play();
+      } else {
         _this.audio.pause();
-        _this.audioc.pause();
-        if(_this.curTime>=_this.timeData.e){
-            _this.curTime = _this.timeData.s
-        }
-        if(_this.parentPlay){
-            _this.$emit("handleChangeTime",_this.curTime,_this.timeData.e,true)
-            clearInterval(_this.timeCur)
-        }else{
-            _this.$emit("handleChangeTime",_this.curTime,_this.timeData.e)
-            _this.timeCur = setInterval(() => {
-                _this.curTime = _this.parentCurtimt
-            }, 1000);
-        }
+        _this.audio.load();
+        _this.audio.src = _this.showList[_this.activeIndex].rec_sound_data;
+        _this.oldIndex = _this.activeIndex;
+        _this.audio.play();
+      }
     },
-    handleChangeTime(time){
-        if (time>=0) {
-            this.curTime = time;
-        }
+    // 播放句子
+    playSent() {
+      let _this = this;
+      _this.audio.pause();
+      _this.audioc.pause();
+      if (_this.curTime >= _this.timeData.e) {
+        _this.curTime = _this.timeData.s;
+      }
+      if (_this.parentPlay) {
+        _this.$emit("handleChangeTime", _this.curTime, _this.timeData.e, true);
+        clearInterval(_this.timeCur);
+      } else {
+        _this.$emit("handleChangeTime", _this.curTime, _this.timeData.e);
+        _this.timeCur = setInterval(() => {
+          _this.curTime = _this.parentCurtimt;
+        }, 1000);
+      }
+    },
+    handleChangeTime(time) {
+      if (time >= 0) {
+        this.curTime = time;
+      }
     },
     // 对比
-    compare(){
-        let _this = this;
-        this.audio.pause()
-        if (!this.audioc.paused) {
-            this.audioc.pause();
-        } else {
-            _this.audioc.pause();
-            _this.audioc.load();
-            _this.curTime = _this.timeData.s
-            _this.$emit("handleChangeTime",_this.timeData.s,_this.timeData.e)
-            _this.timeC = setInterval(() => {
-                if(_this.curTime>=_this.timeData.e){
-                    clearInterval(_this.timeC)
-                    _this.playWavdata()
-                }
-            }, 500);
-        }
-
+    compare() {
+      let _this = this;
+      this.audio.pause();
+      if (!this.audioc.paused) {
+        this.audioc.pause();
+      } else {
+        _this.audioc.pause();
+        _this.audioc.load();
+        _this.curTime = _this.timeData.s;
+        _this.$emit("handleChangeTime", _this.timeData.s, _this.timeData.e);
+        _this.timeC = setInterval(() => {
+          if (_this.curTime >= _this.timeData.e) {
+            clearInterval(_this.timeC);
+            _this.playWavdata();
+          }
+        }, 500);
+      }
     },
-    playWavdata(){
-        let _this = this;
-        _this.audioc.src = _this.showList[_this.activeIndex].rec_sound_data;
-        _this.audioc.play();
+    playWavdata() {
+      let _this = this;
+      _this.audioc.src = _this.showList[_this.activeIndex].rec_sound_data;
+      _this.audioc.play();
+    },
+    closeItemHistory() {
+      this.showItem = !this.showItem;
+      this.audio.pause();
+      this.audioc.pause();
+      if (this.parentPlay) {
+        this.$emit("handleChangeTime", this.curTime, this.timeData.e, true);
+      }
+      clearInterval(this.timeCur);
+      clearInterval(this.timeC);
     },
-    closeItemHistory(){
-        this.showItem = !this.showItem
-        this.audio.pause();
-        this.audioc.pause();
-        if(this.parentPlay){
-            this.$emit("handleChangeTime",this.curTime,this.timeData.e,true)
-        }
-        clearInterval(this.timeCur)
-        clearInterval(this.timeC)
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.handleData()
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { 
-    clearInterval(this.timeCur)
-    clearInterval(this.timeC)
+  beforeMount() {
+    clearInterval(this.timeCur);
+    clearInterval(this.timeC);
   },
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.history-record-list{
-    padding: 24px;
-    background: #FFF;
+.history-record-list {
+  padding: 24px;
+  background: #fff;
 }
-.list-top{
-    display: flex;
-    justify-content: space-between;
-    h4{
-        color: #2F3742;
-        font-size: 24px;
-        font-weight: 400;
-        line-height: 32px;
-        margin: 0;
-        .svg-icon{
-            margin-right: 8px;
-        }
-    }
-    .el-icon-close{
-        font-size: 24px;
-        cursor: pointer;
+.list-top {
+  display: flex;
+  justify-content: space-between;
+  h4 {
+    color: #2f3742;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 32px;
+    margin: 0;
+    .svg-icon {
+      margin-right: 8px;
     }
+  }
+  .el-icon-close {
+    font-size: 24px;
+    cursor: pointer;
+  }
+}
+.list-center {
+  border-radius: 4px;
+  background: #f7f8fa;
+  padding: 8px 12px;
+  margin: 24px 0;
+  p {
+    color: #2f3742;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    margin: 0;
+  }
+  span {
+    color: #929ca8;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 4px;
+  }
 }
-.list-center{
+ul {
+  margin: 0;
+  padding: 0;
+  li {
+    padding: 8px;
     border-radius: 4px;
-    background:#F7F8FA;
-    padding: 8px 12px;
-    margin: 24px 0;
-    p{
-        color: #2F3742;
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 24px;
-        margin: 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    &.odd {
+      background: #f7f8fa;
     }
-    span{
-        color:#929CA8;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 20px;
-        margin-top: 4px;
+    b {
+      width: 28px;
+      color: #929ca8;
     }
-}
-ul{
-    margin: 0;
-    padding: 0;
-    li{
-        padding: 8px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        &.odd{
-            background: #F7F8FA;
-        }
-        b{
-            width: 28px;
-            color: #929CA8;
-        }
-        span{
-            flex: 1;
-            color: #2F3742;
-        }
-        .el-icon-delete,.el-icon-arrow-right{
-            cursor: pointer;
-            color: #929CA8;
-            font-size: 16px;
-            padding: 3px;
-        }
+    span {
+      flex: 1;
+      color: #2f3742;
+    }
+    .el-icon-delete,
+    .el-icon-arrow-right {
+      cursor: pointer;
+      color: #929ca8;
+      font-size: 16px;
+      padding: 3px;
     }
+  }
 }
-.list-item{
-    padding: 16px;
-    .item-top{
-        padding: 8px 16px;
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        background: #0081F1;
-        box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
-        display: flex;
-        justify-content: space-between;
-        h4{
-            color: #FFF;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 24px;
-            margin: 0;
-            .svg-icon{
-                margin-right: 8px;
-            }
-        }
-        .el-icon-close{
-            font-size: 16px;
-            padding: 4px;
-            cursor: pointer;
-            color: #FFF;
-        }
+.list-item {
+  padding: 16px;
+  .item-top {
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: #0081f1;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08),
+      0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+      0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+    display: flex;
+    justify-content: space-between;
+    h4 {
+      color: #fff;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      margin: 0;
+      .svg-icon {
+        margin-right: 8px;
+      }
     }
-    .item-center{
-        min-height: 300px;
-        padding: 40px 0;
-        position: relative;
-        display: flex;
-        align-items: center;
-        >label{
-            position: absolute;
-            bottom: 0px;
-            left: 50%;
-            margin-left: -27px;
-            padding: 1px 8px;
-            min-width: 54px;
-            border-radius: 2px;
-            background: #F2F3F5;
-            text-align: center;
-        }
+    .el-icon-close {
+      font-size: 16px;
+      padding: 4px;
+      cursor: pointer;
+      color: #fff;
     }
-    .item-bottom{
-        border-top: 1px solid #EBEBEB;
-        padding-top: 40px;
-        .operate-box-inner-content{
-            width: 600px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-        }
-        .operate-item{
-            text-align: center;
-            cursor: pointer;
-            .luyin-btn{
-                display: block;
-                width: 64px;
-                height: 64px;
-                padding: 10px;
-                border-radius: 60px;
-                background: #175DFF;
-                box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
-            }
-            .luyin-gif{
-               display: block;
-                width: 64px;
-                height: 64px; 
-                border-radius: 60px;
-                box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
-            }
-            .svg-icon{
-                display: block;
-                width: 44px;
-                height: 44px;
-                margin: 0 auto;
-                padding: 6px;
-            }
-            span{
-                color: #929CA8;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 20px;
-            }
-        }
+  }
+  .item-center {
+    min-height: 300px;
+    padding: 40px 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    > label {
+      position: absolute;
+      bottom: 0px;
+      left: 50%;
+      margin-left: -27px;
+      padding: 1px 8px;
+      min-width: 54px;
+      border-radius: 2px;
+      background: #f2f3f5;
+      text-align: center;
+    }
+  }
+  .item-bottom {
+    border-top: 1px solid #ebebeb;
+    padding-top: 40px;
+    .operate-box-inner-content {
+      width: 600px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+    }
+    .operate-item {
+      text-align: center;
+      cursor: pointer;
+      .luyin-btn {
+        display: block;
+        width: 64px;
+        height: 64px;
+        padding: 10px;
+        border-radius: 60px;
+        background: #175dff;
+        box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08),
+          0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+          0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+      }
+      .luyin-gif {
+        display: block;
+        width: 64px;
+        height: 64px;
+        border-radius: 60px;
+        box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08),
+          0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+          0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+      }
+      .svg-icon {
+        display: block;
+        width: 44px;
+        height: 44px;
+        margin: 0 auto;
+        padding: 6px;
+      }
+      span {
+        color: #929ca8;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
+  }
 }
-.item-sent{
-    width: 100%;
+.item-sent {
+  width: 100%;
 }
 .NNPE-words {
-    float: left;
+  float: left;
+  padding: 0;
+  &.noPadding {
     padding: 0;
-    &.noPadding{
-        padding:0;
-    }
-    &.sentActive {
-        background: rgba(24, 144, 255, 0.1);
-    }
-    &.overActive {
-        background: rgba(0, 0, 0, 0.06);
-    }
-    &.textLeft {
-        text-align: left;
-    }
-    &.textCenter {
-        text-align: center;
+  }
+  &.sentActive {
+    background: rgba(24, 144, 255, 0.1);
+  }
+  &.overActive {
+    background: rgba(0, 0, 0, 0.06);
+  }
+  &.textLeft {
+    text-align: left;
+  }
+  &.textCenter {
+    text-align: center;
+  }
+  > span {
+    float: left;
+    cursor: pointer;
+    &.NNPE-chs {
+      //   font-size: 24px;
+      font-family: "Smartisan";
+      line-height: 150%;
+      color: #000000;
+      padding: 0 3px;
+      &.wordActive {
+        color: #175dff;
+      }
+      &.marginRight {
+        padding-right: 0;
+      }
+      &.marginLeft {
+        padding-left: 0;
+      }
+      &.marginSingleRight {
+        padding-right: 3px;
+      }
     }
-    > span {
-        float: left;
-        cursor: pointer;
-        &.NNPE-chs {
-            //   font-size: 24px;
-            font-family: 'Smartisan';
-            line-height: 150%;
-            color: #000000;
-            padding: 0 3px;
-            &.wordActive {
-            color: #175DFF;
-            }
-            &.marginRight{
-            padding-right: 0;
-            }
-            &.marginLeft{
-            padding-left: 0;
-            }
-            &.marginSingleRight{
-            padding-right: 3px;
-            }
-        }
-        &.padding {
-            padding: 0 3px;
-            cursor: pointer;
-        }
+    &.padding {
+      padding: 0 3px;
+      cursor: pointer;
     }
+  }
 }
-</style>
+</style>

src/views/bookShelf/components/PracticeModel.vue

@@ -294,6 +294,19 @@
               </div>
             </div>
           </div>
+          <div
+            class="score-box"
+            v-if="
+              activeSentId === articleInfo.art_corpus_data.sentList[index].id &&
+              score !== null
+            "
+          >
+            <div class="score">
+              <span>朗读评分</span>
+              <b :style="wordStyle()">{{ score }}</b>
+            </div>
+            <a @click="lookMoreInfo">查看详细</a>
+          </div>
         </div>
         <div class="operate-box" :style="{ background: colorObj.contentBg }">
           <div
@@ -488,6 +501,22 @@
         @changeIsFull="changeIsFull"
       />
     </div>
+    <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="resArr.wordsList[playSentIndex]"
+        :scoreInfo="scoreInfo"
+        @closeScoreInfo="closeScoreInfo"
+        :wordFontsize="wordFontsize"
+      ></RecordsScoreInfo>
+    </el-dialog>
   </div>
 </template>
 
@@ -497,6 +526,7 @@ import HistoryRecordList from "./HistoryRecordList.vue";
 import Recorder from "js-audio-recorder"; // 录音插件
 import { getLogin } from "@/api/ajax";
 import Voicefullscreen from "./Voicefullscreen.vue";
+import RecordsScoreInfo from "./RecordsScoreInfo.vue";
 export default {
   name: "ArticleView",
   props: [
@@ -513,6 +543,7 @@ export default {
     AudioLine,
     HistoryRecordList,
     Voicefullscreen,
+    RecordsScoreInfo,
   },
   data() {
     return {
@@ -590,6 +621,10 @@ export default {
       isCompare: false,
       isFull: false,
       mathNum: Math.random().toString(36).substr(2),
+      score: null,
+      activeSentId: "",
+      recordsScoreInfoFlag: false,
+      scoreInfo: null,
     };
   },
   computed: {
@@ -607,6 +642,23 @@ export default {
       }
       return playing;
     },
+    wordStyle() {
+      return function () {
+        let color = "";
+        if (this.score < 60) {
+          color = "#F2555A";
+        } else if (60 <= this.score && this.score < 80) {
+          color = "#929CA8";
+        } else if (80 <= this.score && this.score < 90) {
+          color = "#0081F1";
+        } else if (this.score >= 90) {
+          color = "#1CCDA7";
+        }
+        return {
+          color: color,
+        };
+      };
+    },
   },
   watch: {},
   //方法集合
@@ -792,6 +844,8 @@ export default {
     // 开始录音
     microphone() {
       let _this = this;
+      this.score = null;
+      this.scoreInfo = null;
       this.audio.pause();
       this.audioc.pause();
       if (_this.$refs.audioLine && _this.$refs.audioLine.audio.playing) {
@@ -959,6 +1013,9 @@ export default {
       if (this.playSentIndex === -1) {
         return;
       }
+
+      this.activeSentId =
+        this.articleInfo.art_corpus_data.sentList[this.playSentIndex].id;
       let MethodName = "/PaperServer/Client/UserSentRec/AddUserSentRec";
       let data = {
         sent_id:
@@ -967,6 +1024,10 @@ export default {
         toltime: toltime,
       };
       getLogin(MethodName, data).then((res) => {
+        this.score = JSON.parse(
+          res.data.current.rec_rate_info
+        ).score_result.average_score;
+        this.scoreInfo = JSON.parse(res.data.current.rec_rate_info);
         if (this.repeatAfter) {
           if (
             this.autoNextSent &&
@@ -1078,6 +1139,12 @@ export default {
     changeIsFull() {
       this.isFull = false;
     },
+    lookMoreInfo() {
+      this.recordsScoreInfoFlag = true;
+    },
+    closeScoreInfo() {
+      this.recordsScoreInfoFlag = false;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -1162,6 +1229,42 @@ export default {
       line-height: 22px;
       cursor: pointer;
     }
+    .score-box {
+      position: absolute;
+      right: -110px;
+      top: 50%;
+      margin-top: -55px;
+      z-index: 1;
+      padding: 8px;
+      border-radius: 4px;
+      background: #f2f3f5;
+      color: #4e5969;
+      font-size: 14px;
+      line-height: 22px;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      width: 96px;
+      text-align: center;
+      .score {
+        border-radius: 4px;
+        background: #fff;
+        text-align: center;
+        padding: 8px 12px;
+        color: #929ca8;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        b {
+          font-size: 20px;
+          line-height: 28px;
+        }
+      }
+      a {
+        color: #929ca8;
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 8px;
+      }
+    }
     .para-index {
       color: #d0d3d9;
       font-size: 18px;

src/views/bookShelf/components/RecordsScoreInfo.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="record-score-info">
+    <div class="list-top">
+      <h4>详细信息</h4>
+      <i class="el-icon-close" @click="closeScoreInfo"></i>
+    </div>
+    <div class="info-box">
+      <div class="info-item">
+        <label>朗读评分</label>
+        <p :style="wordStyle(scoreInfo.score_result.average_score)">
+          {{ scoreInfo.score_result.average_score }}
+        </p>
+      </div>
+      <div class="info-item">
+        <label>语速</label>
+        <p>{{ speed }}<span>词/分</span></p>
+      </div>
+      <div class="info-item">
+        <label>流利度</label>
+        <p>{{ scoreInfo.score_result.fluency }}</p>
+      </div>
+    </div>
+    <div class="info-detail">
+      <p class="title">评分明细</p>
+      <div class="word-score">
+        <div
+          class="word-score-item"
+          v-for="(item, index) in sentDataList"
+          :key="index"
+          :class="[item.tokens[9] === '' ? 'marginRight' : '']"
+        >
+          <label v-if="item.score !== null" :style="bgStyle(item.score)">{{
+            item.score
+          }}</label>
+          <p :style="wordStyle(item.score)">{{ item.tokens[2] }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: ["sentData", "scoreInfo", "wordFontsize"],
+  data() {
+    //这里存放数据
+    return {
+      speed: 0,
+      sentDataList: JSON.parse(JSON.stringify(this.sentData)),
+    };
+  },
+  //计算属性 类似于data概念
+  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,
+          };
+        }
+      };
+    },
+    bgStyle() {
+      return function (score) {
+        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 {
+          background: color,
+        };
+      };
+    },
+  },
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    closeScoreInfo() {
+      this.$emit("closeScoreInfo");
+    },
+    handleData() {
+      // console.log(this.scoreInfo);
+      // console.log(this.sentDataList);
+      let lemmerIndex = 0;
+      let json_result = this.scoreInfo.json_result;
+      this.speed = Math.floor(
+        (this.scoreInfo.json_result.length / this.scoreInfo.audio_time) * 60
+      );
+      this.sentDataList.forEach((item) => {
+        if (
+          json_result[lemmerIndex] &&
+          (item.tokens[3] === json_result[lemmerIndex].word ||
+            item.tokens[4] === json_result[lemmerIndex].word ||
+            item.tokens[5] === json_result[lemmerIndex].word)
+        ) {
+          item.score = json_result[lemmerIndex].score;
+          lemmerIndex += 1;
+        } else {
+          item.score = null;
+        }
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleData();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.record-score-info {
+  background: #f7f8fa;
+  padding: 24px 0;
+  border-radius: 4px;
+  .list-top {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24px;
+    h4 {
+      color: #2f3742;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+      margin: 0;
+    }
+    .el-icon-close {
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+  .info-box {
+    border-bottom: 1px solid #e5e6eb;
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    .info-item {
+      width: 205px;
+      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;
+        }
+      }
+    }
+  }
+  .info-detail {
+    padding: 24px;
+    .title {
+      margin: 0 0 8px 0;
+      color: #929ca8;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    .word-score {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: end;
+      row-gap: 8px;
+      .word-score-item {
+        text-align: center;
+        padding: 0 3px;
+
+        &.marginRight {
+          padding-right: 0;
+        }
+        > label {
+          color: #fff;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 16px;
+          padding: 0px 4px;
+          border-radius: 2px;
+        }
+        p {
+          color: #2f3742;
+          font-size: 24px;
+          font-weight: 700;
+          line-height: 36px;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>