GCLS_Page_Book_Component_NPC/src/components/Adult/preview/DialogueArticleViewChs/index.vue

<!--  -->
<template>
  <div
    class="NPC-ArticleView NPC-ArticleView-container"
    id="articleBoby"
    v-if="curQue && curQue.Bookanswer"
  >
    <div class="ArticleView-header">
      <!-- <a :class="['ArticleView-full']" v-if="showPractice" @click="goFullscreen"
        >全屏模式</a
      > -->
      <div>
        <div
          class="left"
          @click="submit"
          :style="{ marginLeft: showPractice ? '97px' : '' }"
          v-if="tokenData.popedom_code_list.indexOf(2000001) != -1&&1==2"
        >
          <img src="../../../../assets/NPC/wbfx-icon.png" alt="" />
          文本分析
        </div>
      </div>

      <div class="right">
        <template v-if="curQue.checkList.indexOf(1) > -1">
          <el-switch
            style="display: block"
            v-model="showPhrases"
            :active-color="activeColor"
            inactive-color="rgba(0,0,0,0.1)"
            active-text=""
            inactive-text="本课生词"
            @change="handleSwitchChange('showPractice', 'showWord')"
          >
          </el-switch>
        </template>
        <template v-if="curQue.checkList.indexOf(2) > -1">
          <el-switch
            style="display: block"
            v-model="showPractice"
            :active-color="activeColor"
            inactive-color="rgba(0,0,0,0.1)"
            active-text=""
            inactive-text="语音练习"
            @change="handleSwitchChange('showPhrases', 'showWord')"
          >
          </el-switch>
        </template>
        <template v-if="curQue.checkList.indexOf(3) > -1">
          <el-switch
            style="display: block"
            v-model="showWord"
            :active-color="activeColor"
            inactive-color="rgba(0,0,0,0.1)"
            active-text=""
            inactive-text="取词"
            @change="handleSwitchChange('showPhrases', 'showPractice')"
          >
          </el-switch>
        </template>
      </div>

      <!-- <div class="setting-fontsize">
        <a @click="handleFontsize('-')"
          ><img src="../../../../assets/newImage/common/btn-reduce.png"
        /></a>
        <img src="../../../../assets/newImage/common/font-size.png" />
        <a @click="handleFontsize('+')"
          ><img src="../../../../assets/newImage/common/btn-increase.png"
        /></a>
      </div> -->
    </div>
    <div class="ArticleView-body" ref="ArticleViewbody">
      <NormalModelChs
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :colorBox="colorBox"
        :NNPEAnnotationList="NNPEAnnotationList"
        :themeColor="themeColor"
        :noFont="noFont"
        :config="config"
        :TaskModel="TaskModel"
        @changeConfig="changeConfig"
        v-if="!showPhrases && !showPractice && !showWord"
      />
      <PhraseModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :NNPENewWordList="NNPENewWordList"
        :NNPEAnnotationList="NNPEAnnotationList"
        :colorBox="colorBox"
        :themeColor="themeColor"
        :noFont="noFont"
        :currentTreeID="currentTreeID"
        :bodyLeft="bodyLeft"
        :config="config"
        :TaskModel="TaskModel"
        @changeConfig="changeConfig"
        v-if="showPhrases"
      />
      <Practice
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :colorBox="colorBox"
        :themeColor="themeColor"
        :noFont="noFont"
        :currentTreeID="currentTreeID"
        :NNPENewWordList="NNPENewWordList"
        :config="config"
        :TaskModel="TaskModel"
        @changeConfig="changeConfig"
        v-if="showPractice"
      />
      <WordModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :NNPENewWordList="NNPENewWordList"
        :colorBox="colorBox"
        :themeColor="themeColor"
        :noFont="noFont"
        :currentTreeID="currentTreeID"
        :config="config"
        :TaskModel="TaskModel"
        @changeConfig="changeConfig"
        v-if="showWord"
      />
    </div>
  </div>
</template>

<script>
import PhraseModel from "./PhraseModelChs.vue";
import NormalModelChs from "./NormalModelChs.vue";
import Practice from "./Practicechs.vue"; // 语音练习模式
import WordModel from "./WordModelChs.vue"; // 语音练习模式
import { analysSubmit } from "@/api/ajax";
import { getToken } from "@/utils/auth";
export default {
  name: "DialogueArticleViewChs",
  props: [
    "curQue",
    "NNPENewWordList",
    "NNPEAnnotationList",
    "colorBox",
    "themeColor",
    "currentTreeID",
    "TaskModel"
  ],
  components: { NormalModelChs, Practice, WordModel, PhraseModel },
  data() {
    return {
      showPreview: true, // 全文预览
      showPhrases: false, // 显示单词和短语
      showPractice: false, // 语音练习

      showWord: false, // 取词
      titleFontsize: 20, // 标题字号初始值
      wordFontsize: 16, // 文章内容字号初始值
      bodyLeft: 0,
      bodyWidth: 0,
      resColorArr: [],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      config: {
        isShowEN: false,
        isHasEN: false,
        isShowPY: false,
        isHasPY: false
      },
      userAnswer: {
        normalModel: {
          recordList: []
        },
        writeModel: {}, //生词/取词模式
        practiceModel: {}, //练习模式
        wordModel: {
          recordList: []
        }
      },
      tokenData: null
    };
  },
  computed: {
    activeColor: function() {
      let color = "";
      if (this.themeColor == "red") {
        color = "#DE4444";
      } else if (this.themeColor == "green") {
        color = "#24B99E";
      } else if (this.themeColor == "brown") {
        color = "#BD8865";
      }

      return color;
    }
  },
  watch: {},
  //方法集合
  methods: {
    submit() {
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      console.log(this.curQue);
      analysSubmit({
        tenantId: "",
        text: this.curQue.article
      })
        .then(res => {
          window.open(
            process.env.VUE_APP_BASE_API +
              `/GCLS-TC/#/textanalysis/Result?partitionKey=${res.data.result.partitionKey}&subjectWords=${res.data.result.subjectWords}&wordTextCount=${res.data.result.textCount}&wordCount=${res.data.result.wordCount}&vocabularyTextCount=${res.data.result.vocabularyTextCount}&vocabularyCount=${res.data.result.vocabularyCount}&pinyinCount=${res.data.result.pinyinCount}&pinyinTextCount=${res.data.result.pinyinTextCount}&pinyinDifficulty=${res.data.result.pinyinDifficulty}&wordDifficulty=${res.data.result.wordDifficulty}&vocabularyDifficulty=${res.data.result.vocabularyDifficulty}&type=文本分析`
          );
          loading.close();
        })
        .catch(res => {
          loading.close();
        });
    },
    goFullscreen() {
      var element = document.getElementById("articleBoby");
      if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
    },
    changeConfig(obj) {
      this.config[obj] = !this.config[obj];
    },
    // 英文的显示和隐藏
    changeEN() {
      this.isShowEN = !this.isShowEN;
    },
    changePY() {
      this.isShowPY = !this.isShowPY;
    },
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol == "+") {
        if (this.wordFontsize < 24) {
          this.titleFontsize = this.titleFontsize + 2;
          this.wordFontsize = this.wordFontsize + 2;
        }
      } else if (symbol == "-") {
        if (this.wordFontsize > 12) {
          this.titleFontsize = this.titleFontsize - 2;
          this.wordFontsize = this.wordFontsize - 2;
        }
      }
    },
    // 切换开关
    handleSwitchChange(obj1, obj2) {
      this[obj1] = false;
      this[obj2] = false;
      this.showPreview = false;
    },
    articleFullScreen() {},
    handleObj(list) {
      let pinyin = "";
      list.forEach(item => {
        pinyin += item.pinyin;
      });
      return pinyin;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let data = JSON.parse(getToken());
    this.tokenData = data;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    if (!_this.curQue.Bookanswer) {
      let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
      _this.$set(this.curQue, "Bookanswer", userAnswer);
    }
    if (_this.curQue) {
      _this.$nextTick(() => {
        _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;
      });
      for (let i = 0; i < _this.curQue.detail.length; i++) {
        let enStr = this.curQue.detail[i].sentencesEn.join("");
        if (enStr) {
          this.config.isShowEN = true;
          this.config.isHasEN = true;
        }
        let pinyin = this.handleObj(this.curQue.detail[i].wordsList);
        if (pinyin) {
          this.config.isShowPY = true;
          this.config.isHasPY = true;
        }
        if (enStr && pinyin) {
          break;
        }
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.NPC-ArticleView {
  width: 100%;
  &:-webkit-full-screen {
    width: 100%;
    height: 100%;
  }

  &:-moz-full-screen {
    width: 100%;
    height: 100%;
  }
  .ArticleView-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 104px;
      height: 32px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.25);
      box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
      border-radius: 4px;
      cursor: pointer;
      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
    .right {
      display: flex;
    }
    .setting-fontsize {
      display: flex;
      margin-left: 24px;
      a {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 4px;
        display: block;
        height: 24px;
        width: 24px;
      }
      img {
        width: 100%;
      }
      > img {
        margin: 0 8px;
        width: 24px;
      }
    }
  }
  .ArticleView-body {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    .aduioLine-box {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.NNPE-tableList-item-noMargin {
  .NPC-ArticleView {
    background: #fff;
  }
}
.NPC-ArticleView {
  &.NPC-ArticleView-container {
    margin-bottom: 24px;
  }
  .notice {
    font-weight: normal;
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 24px;
    color: #000000;
    padding: 0 24px 8px;
    margin: 0;
    &.hasRemark {
      width: 553px;
      box-sizing: border-box;
      border-right: 1px rgba(0, 0, 0, 0.1) solid;
    }
  }
  .ArticleView-header {
    .el-switch {
      margin-left: 24px;
    }
    .el-switch__core {
      width: 44px !important;
      height: 24px;
      border-radius: 20px;
    }
    .el-switch__core:after {
      top: 3px;
      left: 3px;
    }
    .el-switch.is-checked .el-switch__core::after {
      left: 100%;
      margin-left: -19px;
    }
    .el-switch__label {
      color: #000000;
    }
    .el-switch__label.is-active {
      color: rgba($color: #000000, $alpha: 0.3);
    }
    .el-switch__label--left {
      margin-right: 8px;
    }
  }
}
</style>