HM21St_Page_User/src/views/bookShelf/components/NormalModel.vue

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="articleInfo">
    <template v-if="resArr[0]&&resArr[0].wordsList[0].pno===0">
        <h2 @click="
                handleChangeTime(
                    resArr[0].timeList &&
                    resArr[0].timeList[0] &&
                    resArr[0].timeList[0].s
                )
                "
                @mouseover="handleMouseover(resArr[0])"
                @mouseleave="handleMouseleave"
                :class="[
                    'NNPE-words',
                    isPlaying &&
                    resArr[0].timeList &&
                    resArr[0].timeList[0] &&
                    curTime >= resArr[0].timeList[0].s &&
                    curTime <= resArr[0].timeList[0].e
                        ? 'sentActive'
                        : '',
                    resArr[0].wordsList[0].pno == paraIndex && resArr[0].wordsList[0].sno == sentIndex
                        ? 'overActive'
                        : '',
                ]">
            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'8px',fontWeight:'700',cursor:'pointer'}" 
            :class="[
                    isPlaying &&
                    resArr[0].timeList &&
                    resArr[0].timeList[0] &&
                    curTime >=
                        resArr[0].timeList[0].tokens[indexR].s &&
                    curTime <= resArr[0].timeList[0].e
                        ? 'wordActive'
                        : '',
                    itemR.tokens[9]===' '?'marginRight':''
                ]">
                {{itemR.tokens[2]}}</span>
        </h2>
    </template>
    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
        {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
    </h6>
    <div class="audio-box">
        <div
            class="aduioLine-content aduioLine-box"
            v-if="
                articleInfo.art_sound_url
            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
        >
            <AudioLine
                audioId="artNormalAudio"
                :mp3="articleInfo.art_sound_url"
                :getCurTime="getCurTime"
                ref="audioLine"
                :mp3Source="'mp3'"
            />
            <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
        </div>
    </div>
    <template v-if="resArr.length > 0">
      <div class="table-box">
        <div
          :class="['NNPE-detail']"
          v-for="(item, index) in resArr"
          :key="'detail' + index"
        >
          <div class="wordsList-box">
            <div class="nnpe-sentence-box">
              <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex">
                <template v-if="pItem.pno!==0">
                    <template v-if="pItem.isShow">
                        <div
                            :class="[
                            'NNPE-words',
                            isPlaying &&
                            item.timeList &&
                            item.timeList[pItem.sno] &&
                            curTime >= item.timeList[pItem.sno].s &&
                            curTime <= item.timeList[pItem.sno].e
                                ? 'sentActive'
                                : '',
                            pItem.pno == paraIndex && pItem.sno == sentIndex
                                ? 'overActive'
                                : '',
                            ]"
                            @click="
                            handleChangeTime(
                                item.timeList &&
                                item.timeList[pItem.sno] &&
                                item.timeList[pItem.sno].s
                            )
                            "
                            @mouseover="handleMouseover(pItem)"
                            @mouseleave="handleMouseleave"
                        >
                                <span
                                    class="NNPE-chs"
                                    :class="[
                                        isPlaying &&
                                        item.timeList &&
                                        item.timeList[pItem.sno] &&
                                        item.timeList[pItem.sno].tokens[pIndex]&&
                                        curTime >=
                                            item.timeList[pItem.sno].tokens[pIndex].s &&
                                        curTime <= item.timeList[pItem.sno].e
                                            ? 'wordActive'
                                            : '',
                                        pItem.tokens[9]===' '?'marginRight':''
                                    ]"
                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                            item.timeList &&
                                            item.timeList[pItem.sno] &&
                                            item.timeList[pItem.sno].tokens[pIndex]&&
                                            curTime >=
                                                item.timeList[pItem.sno].tokens[pIndex].s &&
                                            curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
                                    >{{ pItem.tokens[2] }}</span
                                >
                                <span
                                class="NNPE-chs NNPE-chs-both"
                                v-if="item.wordsList[pIndex + 1] &&
                                item.wordsList[pIndex + 1].tokens[2] &&
                                enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
                                :class="[
                                        isPlaying &&
                                        item.timeList &&
                                        item.timeList[pItem.sno] &&
                                        item.timeList[pItem.sno].tokens[pIndex]&&
                                        curTime >=
                                            item.timeList[pItem.sno].tokens[pIndex].s &&
                                        curTime <= item.timeList[pItem.sno].e
                                            ? 'wordActive'
                                            : '',
                                        item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':''
                                    ]"
                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
                                            item.timeList &&
                                            item.timeList[pItem.sno] &&
                                            item.timeList[pItem.sno].tokens[pIndex]&&
                                            curTime >=
                                                item.timeList[pItem.sno].tokens[pIndex].s &&
                                            curTime <= item.timeList[pItem.sno].tokens[pIndex].e?colorObj.statisticValue:colorObj.contentColor}"
                                >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                            >
                        </div>
                    </template>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
  </div>
</template>

<script>
import AudioLine from "@/components/common/AudioLine.vue"
import MagazineVideo from "./MagazineVideo.vue"
export default {
  name: "ArticleView",
  props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
  components: {
    AudioLine,
    MagazineVideo
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      enFhList: [
        ",",
        ".",
        ";",
        "?",
        "!",
        ":",
        ">",
        "<",
        "'",
        "’",
        "n't",
        "n’t",
        "n’ts",
        "n‘t",
        "'t",
        "’t",
        "‘t",
        "'s",
        "’s",
        "‘s",
        "'m",
        "’m",
        "‘m",
        "'re",
        "’re",
        "‘re",
        "'d",
        "’d",
        "‘d",
        "'ve",
        "’ve",
        "‘ve",
        ")",
        "'ll",
        "’ll",
        "‘ll",
        "”",
      ],
      articleImg: {}, // 文章图片
      paraIndex: -1, //段落索引
      sentIndex: -1, // 句子索引
    };
  },
  computed: {
    isPlaying: function () {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.isPlaying;
      }
      return playing;
    },
  },
  watch: {},
  //方法集合
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleData() {
      let resArr = [];
      let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
      let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
      for(let i=0;i<leg+1;i++){
        let obj = {
            wordsList: [],
            timeList: [],
        }
        resArr.push(obj)
      }
      articleInfo.art_corpus_data.sentList.forEach((item,index) => {
        item.tokens.forEach((items,indexs)=>{
            let obj = {
                sent_id:item.id,
                sno: item.sno-1,
                pno: item.pno,
                text: item.text,
                tokens: items,
                isShow: this.enFhList.indexOf(items[2])==-1
            }
            resArr[item.pno].wordsList.push(obj)
        })
        resArr[item.pno].timeList.push(articleInfo.art_sound_srt_data.sents[index])
      });
      this.resArr = resArr;
    },
    handleChangeTime(time) {
      if (time>=0) {
        this.curTime = time;
        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      }
    },
    //经过每个词，高亮句子
    handleMouseover(pItem) {
      this.paraIndex = pItem.pno;
      this.sentIndex = pItem.sno;
    },
    handleMouseleave() {
      this.paraIndex = -1;
      this.sentIndex = -1;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.articleInfo) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .nnpe-article-author{
      margin: 24px 0;
  }
  h2{
    &.sentActive {
        background: rgba(24, 144, 255, 0.1);
    }
    &.overActive {
        background: rgba(0, 0, 0, 0.06);
    }
    .wordActive {
        color: #175DFF !important;
    }
  }
  .table-box {
    // background: #f7f7f7;
    // border-top: 1px solid rgba(0, 0, 0, 0.1);
    :last-child {
      :last-child.wordsList-box {
        padding-bottom: 40px;
      }
    }
    .wordsList-box {
      flex: 1;
      padding: 6px 0 12px 0;
      .nnpe-sentence-box {
        display: flex;
        flex-flow: wrap;
      }
      > img {
        max-width: 50%;
        display: block;
        padding: 16px 0;
        margin: 0 auto;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    display: flex;
    .NNPE-words {
      float: left;
      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;
      }
      > span {
        float: left;
        cursor: pointer;
        &.NNPE-chs {
          //   font-size: 24px;
          font-family: 'Smartisan';
          line-height: 150%;
          color: #000000;
          &.wordActive {
            color: #175DFF !important;
          }
          &.marginRight{
            padding: 0 6px 0 0;
          }
        }
        &.padding {
          padding: 0 3px;
          cursor: pointer;
        }
      }
    }
  }
}
.audio-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aduioLine-box{
    width: 516px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    .wrapper{
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: #175DFF;
        margin-left: 8px;
    }
    .Audio{
        width: 430px;
    }
}
</style>