优化

unknown

2024-06-07 11506e97dfbb3c49754b8570f5328a6b17d22ed0

 src/books/childHealth/view/index.vue

@@ -1,389 +1,21 @@
<template>
  <div class="temp-book" @mouseup="handleMouseUp">
    <pageHeader></pageHeader>
    <pageContent></pageContent>
  </div>
</template>

<script>
import examinations from "./components/examinations/index.vue";
import { getPublicImage } from "@/assets/js/middleGround/tool";
import pageHeader from "./header/index.vue";
import pageContent from "./content/index.vue";
import { mapState } from "vuex";
export default {
  name: "child-health",
  components: {
    pageHeader,
    pageContent,
    examinations,
  },
  data() {
    return {
      type: "option",
      idPathList: [],
      cardList: [],
      isMouseDown:false,
      showToolBox:false,
      move:false
    };
    return {};
  },
  mounted() {
    this.getBookInfo();
    console.log(this.$store.state.qiankun, "this.$store.state.qiankun");
  },
  // computed: {
  //   ...mapState(['lineHeightList'])
  // },
  // wathch: {
  //   lineHeightList:{
  //     handler(){
  //       console.log('监听到lineHeightList变化');
  //       this.handleDom()
  //     },
  //     deep:true
  //   }
  // },

  mounted() {},
  methods: {
    getBookInfo() {
      let query = {
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        favoriteTypes: "FavoriteBookCity",
        itemFields: {
          "SysType=": "CmsFolder",
        },
        coverSize: {
          height: 300,
        },
        fields: {
          seriesName: [],
          author: [],
          isbn: [],
          publicationDate: [],
          bookClassification: [],
          paperPrice: [],
          JDLink: [],
          tmallLink: [],
          dangdangLink: [],
          weidianLink: [],
          content: [],
          authorIntroduction: [],
          // isApplyPaperBook: [],
          // isApplyEBook: [],
          isApplyBook: [],
          isSell: [],
          pdf: [],
          protectedEpub: [],
          probationPage: [], //pdf试读页数
          freeEpubPage: [], //epub试读百分比
        },
      };
      this.MG.store.getProductDetail(query).then((res) => {
        console.log("图书信息", res.datas.cmsDatas[0].datas);
        const testData = res.datas.cmsDatas[0].datas.find(
          (item) => item.refCode == "questionBank"
        );
        this.getResourceData(testData);
      });
    },
    getResourceData(type) {
      let query = {
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        cmsPath: type.productLinkPath,
        itemFields: {
          SysType: "CmsFolder",
          // 资源类型，试读文件，是否允许下载等参数
          selectType: [],
          freeFile: [],
          file: [],
          protectedFile: [],
          resourcesClassification: [],
          isDownload: [],
          jsek_resourceBrief: [],
          jsek_link: [],
          jsek_questionBank: [],
        },
        pading: {
          start: 0,
          size: 999,
        },
      };
      this.MG.store
        .getProductDetail(query)
        .then(async (res) => {
          if (type.refCode == "questionBank") {
            const data = res.datas.cmsDatas[0].datas.filter(
              (item) => item.refCode == "jsek_questionBank"
            );
            if (data.length) return this.getResourceData(data[0]);
          }
          if (type.refCode == "jsek_questionBank") {
            const testDataList = res.datas.cmsDatas[0].datas;
            if (testDataList.length > 0) {
              // console.log("题目列表", testDataList);
              this.$store.commit("setTestList", testDataList);
              // this.getIdPathList(testDataList[1])
            } else {
              console.log("暂无资源");
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getIdPathList(data) {
      let query = {
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        cmsPath: data.productLinkPath,
        pading: {
          start: 0,
          size: 999,
        },
      };
      this.MG.store.getProductDetail(query).then((res) => {
        console.log("题目", res.datas.cmsDatas[0].datas);
        this.$data.idPathList = res.datas.cmsDatas[0].datas;
        this.getQuestionList();
      });
    },
    // 获取题库题目
    getQuestionList(oldData) {
      // 清空正确题数记录
      let flag = 0;
      for (let index = 0; index < this.$data.idPathList.length; index++) {
        const pathitem = this.$data.idPathList[index];
        const pathList = this.$data.cardList;
        pathList.push({
          path: pathitem.productLinkPath,
          catalogName: pathitem.name,
          infoList: [],
        });
        this.$data.cardList = pathList;
        // 获取题目
        let query = {
          path: "*",
          queryType: "*",
          productId: this.config.bookId,
          cmsPath: pathitem.productLinkPath,
          itemFields: {
            Embedded_QuestionBank_Stem: [],
            Embedded_QuestionBank_AnalysisCon: [],
            Embedded_QuestionBank_Answer: [],
            Embedded_QuestionBank_Option: [],
            Embedded_QuestionBank_QuestionType: [],
            Embedded_QuestionBank_StemStyle: [],
            Embedded_QuestionBank_OptionStyle: [],
            Embedded_QuestionBank_KnowledgePoint: [],
            Embedded_QuestionBank_Difficulty: [],
          },
          pading: {
            start: 0,
            size: 999,
          },
        };
        this.MG.store.getProductDetail(query).then((res) => {
          let oldList;
          if (oldData) {
            // 提交过，存在答题记录
            oldList = oldData.find(
              (item) => item.path == pathitem.productLinkPath
            ).infoList;
            this.setData({
              submitStatus: true,
            });
          }
          res.datas.cmsDatas[0].datas.forEach((item, index) => {
            let oldObj = "";
            if (oldList)
              oldObj = oldList.find((oldItem) => oldItem.id == item.id);
            let questionObj = {
              // num: index, // 题号
              id: item.id,
              type: pathitem.name,
              stem:
                item.Embedded_QuestionBank_QuestionType == "completion"
                  ? JSON.parse(item.Embedded_QuestionBank_Stem)
                      .stemTxt.replaceAll("<vacancy>", ",input,")
                      .split(",")
                  : JSON.parse(item.Embedded_QuestionBank_Stem), // 题干
              answer: item.Embedded_QuestionBank_Answer, // 答案
              option: item.Embedded_QuestionBank_Option
                ? JSON.parse(item.Embedded_QuestionBank_Option)
                : "", // 选择题选项
              analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 解析
              questionType: item.Embedded_QuestionBank_QuestionType, // 题型
              optionStyle: item.Embedded_QuestionBank_OptionStyle, // 选项显示类型
              stemStyle: item.Embedded_QuestionBank_StemStyle, // 题干显示类型
              difficulty: item.Embedded_QuestionBank_Difficulty
                ? 4 - item.Embedded_QuestionBank_Difficulty
                : 0, // 难度等级
              userAnswer: oldObj
                ? oldObj.userAnswer
                : item.Embedded_QuestionBank_QuestionType == "completion" ||
                  item.Embedded_QuestionBank_QuestionType == "multipleChoice"
                ? []
                : "",
              isUserAnswer: oldObj
                ? this.isHaveAnswer(oldObj.userAnswer)
                : false,
              isRight: oldObj ? oldObj.isRight : null,
              isComplete: oldObj ? oldObj.isComplete : false,
              isCollect: false,
              isUnfold: "", // 控制解析的折叠面板是否展开
            };
            // 多选和填空答案肯为数组，要转换JSON格式
            if (
              questionObj.questionType == "completion" ||
              questionObj.questionType == "multipleChoice"
            ) {
              try {
                questionObj.answer = JSON.parse(questionObj.answer).toString();
              } catch (error) {
                questionObj.answer = item.Embedded_QuestionBank_Answer;
              }
            }
            // 填空题改造
            if (questionObj.questionType == "completion") {
              let index = 0;
              for (let i = 0; i < questionObj.stem.length; i++) {
                const item = questionObj.stem[i];
                if (item == "input") {
                  questionObj.stem[i] = {
                    num: index,
                    data: "input",
                  };
                  if (!oldObj) questionObj.userAnswer[index] = "";
                  index++;
                }
              }
            }
            // 题干富文本处理
            if (questionObj.stemStyle == "RichText") {
              // questionObj.option.txt = ''
              questionObj.stem.stemTxt = questionObj.stem.stemTxt
                .replace(
                  /\<img/gi,
                  '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
                )
                .replace(/\<p/gi, '<p class="stem-rich-p"')
                .replace("../file", app.config.requestCtx + "/file");
            }
            // 选项富文本处理
            if (
              questionObj.optionStyle == "RichText" &&
              (questionObj.questionType == "singleChoice" ||
                questionObj.questionType == "judge" ||
                questionObj.questionType == "multipleChoice")
            ) {
              questionObj.option.forEach((item) => {
                if (item.txt)
                  item.txt = item.txt
                    .replace(/\<img/gi, '<img class="option-rich-img"')
                    .replace(/\<p/gi, '<p class="stem-rich-p"')
                    .replace("../file", app.config.requestCtx + "/file");
              });
            }
            // 解析富文本处理
            if (
              questionObj.analysisCon &&
              typeof questionObj.analysisCon == "string"
            ) {
              questionObj.analysisCon = questionObj.analysisCon.replace(
                /\<img/gi,
                '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
              );
            }
            // 听力题修改
            // if (questionObj.questionType == 'singleChoice') {
            //   const src = this.extractSourceSrc(questionObj.stem.stemTxt)
            //   if (src) {
            //     questionObj.src = src
            //     questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt)
            //   }
            // }
            // 获取图片
            if (
              questionObj.stemStyle == "Image" ||
              questionObj.stemStyle == "TxtAndImage"
            ) {
              questionObj.stem.stemImage = getPublicImage(
                questionObj.stem.stemImage,
                150
              );
            }
            if (
              questionObj.optionStyle == "Image" ||
              questionObj.optionStyle == "TxtAndImage"
            ) {
              questionObj.option.forEach((optionItem) => {
                if (optionItem.img)
                  optionItem.img = getPublicImage(optionItem.img, 150);
              });
            }
            // 客观题总分赋值
            if (questionObj.questionType !== "shortAnswer") {
              // this.setData({
              //   subjectiveGrade: this.data.subjectiveGrade + 2,
              // });
            }
            // 旧数据里 题目正确 记录正确数量
            if (questionObj.isRight) {
              // this.setData({
              //   correctNum: this.data.correctNum + 1,
              // });
            }
            if (
              pathitem.name == "判断题" ||
              pathitem.name == "填空题" ||
              pathitem.name == "多选题" ||
              pathitem.name == "单选题" ||
              pathitem.name == "听力题"
            ) {
              if (oldObj) {
                // this.setData({
                //   subjectiveTotal: this.data.subjectiveTotal + 1,
                // });
              }
            }
            // cardList赋值
            let cardIndex = this.$data.cardList.findIndex(
              (item) => item.path == pathitem.productLinkPath
            );
            let infoList = this.$data.cardList[cardIndex].infoList;
            infoList.push(questionObj);
            // this.setData({
            //   [`cardList[${cardIndex}].infoList`]: infoList,
            // });
            this.$data.cardList[cardIndex].infoList = infoList;
            flag++;
            let questionList = [];
            let grade = 0;
            const cardUpdatedList = this.$data.cardList;
            // if (flag == this.data.idPathList.length) {
            cardUpdatedList.forEach((aitem) => {
              aitem.infoList.forEach((bitem, bindex) => {
                questionList.push(bitem);
                bitem.number = bindex + 1;
                bitem.score = 2;
              });
            });
            // this.setData({
            //   questionDataList: questionList,
            //   cardList: cardUpdatedList,
            // });
            this.$data.cardList = cardUpdatedList;
            console.log("题目呢", this.$data.cardList);
          });
        });
      }
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
@@ -392,81 +24,53 @@
        }
      }
    },
    
    handleMouseUp(e) {
      const txt = window.getSelection()?.toString();
      const selection = window.getSelection();
      if (selection.type != "none") {
      const selection = (
        this.container ? this.container : window
      ).getSelection();
      const txt = selection.toString();
      if (selection.type != "none" && txt) {
        let node = selection.anchorNode.parentNode;
        let pageHtml = this.getParentWithClass(
          selection.anchorNode,
          "page-box"
        );
        console.log("子项", selection.anchorNode);
        let chapterDom = this.getParentWithClass(
          selection.anchorNode,
          "chapter"
        );
        let chapterNum;
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        console.log("第一处判断", txt, pageHtml);
        if (txt && pageHtml) {
        if (pageHtml) {
          const page = pageHtml.getAttribute("page");
          console.log(
            {
              chapterNum,
              txt,
              selection,
              node,
              page,
              x: e.x,
              y: e.y,
            },
            "sendData"
          );
          // 监听选中文本事件，并触发父层方法
          console.log("第二处判断", this.$store.state.qiankun);
          if (this.$store.state.qiankun.windowSelection) {
            this.$store.state.qiankun.windowSelection({
              chapterNum,
              txt,
              selection,
              node,
              page,
              x: e.x,
              y: e.y,
            });
          }
        }
      }
    },
    
    handleMouseDown() {
      this.$data.isMouseDown = true;
      this.$data.showToolBox = false;
    },
    handleMousemove() {
      if (this.$data.isMouseDown) {
        this.$data.move= true;
      }
    },

    handleMouseUp(e) {
      if (move.value) {
        const txt = window.getSelection()?.toString();
        selectText.value = txt;
        const node = window.getSelection();
        let html = node.anchorNode.parentNode.parentNode;
        dialogToolData.chapter = html.firstChild.innerHTML;
        if (txt) {
          showToolBox.value = true;
          dialogToolData.top = e.y;
          dialogToolData.left = e.x;
      } else {
        if (this.$store.state.qiankun.windowSelection) {
          this.$store.state.qiankun.windowSelection({
            chapterNum: "",
            txt: "",
            page: "",
            x: e.x,
            y: e.y,
          });
        }
        isMouseDown.value = false;
      }
      move.value = false;
    },
  },
};
</script>

<style lang="less" scoped></style>
<style lang="less">
@import "../assets/main.less";
</style>