Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

unknown

2024-06-04 e466f6eb8ba044755318ba7db654772fb7a8fa2b

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 .env.product

@@ -1,3 +1,4 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
PUBLIC_PATH = 'http://182.92.203.7:3007/books/book'
# PUBLIC_PATH = 'https://jsek.bnuic.com/books/book'

 src/App.vue

@@ -40,6 +40,8 @@
        initTestBook: async (bookId, tryPageCount) => {
          // this.activeBook = await this.config.getBookConfig(this.config.resourceCtx + bookId);
          if (
            // "http://182.92.203.7:3007/books/resource/"
            // "https://jsek.bnuic.com/books/resource/"
            this.config.resourceCtx ==
            "http://182.92.203.7:3007/books/resource/"
          ) {

 src/assets/js/config.js

@@ -1,5 +1,7 @@
import axios from "axios";
export const resourceCtx = "http://182.92.203.7:3007/books/resource/"; // 资源请求地址
// export const resourceCtx = "https://jsek.bnuic.com/books/resource/"; // 资源请求地址

export let activeBook = {}; // 资源请求地址
export let goodsStore = "";
// 请求教材配置信息

 src/books/English/assets/images/matching-one.png

 src/books/English/assets/main.less

@@ -725,7 +725,9 @@
  .wh-nr {
    white-space: nowrap;
  }

  .tl-le {
    text-align: left;
  }
  .pb-104 {
    padding-bottom: 104px;
  }

 src/books/English/view/components/chapter001.vue

@@ -517,9 +517,13 @@
            <p class="center">
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
            </p>
            <!-- <div>
              <matching :rawData="rawData" :item="question" :value="value"></matching>
            </div> -->
            <div>
              <ul class="fl ju-bt">
                <li>Speakers　Chinese Cultural Symbols</li>
                <li style="width:40%;text-align:center">Descriptions</li>
              </ul>   
              <matching :rawData="rawData" :item="question"></matching>
            </div>
            <h3 id="c003" class="fl al-cn">
              <span class="bjh3">Reading</span>
              <audio :src="resource.readingOne" controls></audio>
@@ -2331,19 +2335,19 @@
        left: [
          {
            oldId: "FB34",
            txt: "Silk",
            txt: "Martin　　　　Silk",
          },
          {
            oldId: "64D6",
            txt: "The Great Wall",
            txt: "Jessica　　The Great Wall",
          },
          {
            oldId: "2ED4",
            txt: "Chinese Food",
            txt: "Soren　　Chinese Food",
          },
          {
            oldId: "44DE",
            txt: "Chinese Tea",
            txt: "Chinese　　　　Tea",
          },
        ],
        right: [
@@ -2382,12 +2386,12 @@
          },
          {
            id: "2ED4",
            linkValue: "C",
            linkValue: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
            value: "Chinese Food",
          },
          {
            id: "44DE",
            linkValue: "D",
            linkValue: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
            value: "Chinese Tea",
          },
        ],
@@ -2400,6 +2404,10 @@
              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
            },
            {
              oldId: "44DE",
              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
            },
            {
              oldId: "FB34",
              txt: "The clothing material is quite popular among Roman women inancient times.",
            },
@@ -2407,15 +2415,12 @@
              oldId: "2ED4",
              txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
            },
            {
              oldId: "44DE",
              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
            },

          ],
          values: [
            {
              oldId: "FB34",
              txt: "Silk",
              txt: "Martin  Silk",
            },
            {
              oldId: "64D6",
@@ -2439,6 +2444,7 @@
        titleDescription: "1",
        userChoise: [],
        value: [],
        answerImg:require("@/books/English/assets/images/matching-one.png")
      },
      questionData: {
        warnUp: {
@@ -2794,4 +2800,5 @@
select {
  height: 24px;
}

</style>

 src/books/childHealth/assets/images/chapterOne/0036-1.png

 src/books/childHealth/view/content/components/chapter001.vue

@@ -2641,7 +2641,7 @@
          <div class="fl">
            <div class="left" style="width: 50%">
              <p class="center openImgBox">
                <img src="../../../assets/images/chapterOne/0036-1.jpg" alt="" class="w100">
                <img src="../../../assets/images/chapterOne/0036-1.png" alt="" class="w100">
              </p>
              <p class="img">图1-11 男性生殖系统示意图</p>
            </div>

 src/books/childHealth/view/content/index.vue

@@ -171,7 +171,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    this.showCatalogList = [3];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,

 src/components/matching/matching.vue

@@ -1,5 +1,12 @@
<template>
  <div class="connect" id="connect" ref="connect"  @mousemove="mousemove" @mouseup="(e) => touchend(e)">
  <div class="matching">
    <div
      class="connect"
      id="connect"
      ref="connect"
      @mousemove="mousemove"
      @mouseup="(e) => touchend(e)"
    >
    <div class="answer"    >
      <div class="answer-box">
        <div
@@ -8,17 +15,18 @@
          :key="index"
          ref="left"
          @mousedown="(e) => touchstart(e, item, index)"
          
            :style="{backgroundColor:bc}"
        >
          {{ item.label.txt }}
        </div>
      </div>
      <div class="answer-box">
        <div
          class="answer-box-item"
            class="answer-box-item tl-le"
          v-for="(item, index) in rightArr"
          :key="index"
          ref="right"
            :style="{backgroundColor:bc}"
        >
          {{ item.label.txt }}
        </div>
@@ -36,6 +44,24 @@
      :height="clientHeight"
      ref="canvasB"
    ></canvas>
    </div>
    <!-- 按钮 -->
    <div class="btn-bottom">
      <el-button @click="submitData">提交</el-button>
      <el-button @click="saveData">保存</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="handleAnswer">查看答案</el-button>
    </div>
    <!-- 解析 -->
    <ul class="show-answer" v-if="isShowAnswer">
      <li>答案结果：</li>
      <li class="show-answer-box">
        <div>答案:</div>
        <div>
          <img :src="item.answerImg" alt="" class="w100">
        </div>
      </li>
    </ul>
  </div>
</template>

@@ -56,7 +82,11 @@
      scrollTop: 0,
      debounce: false,
      checkItem: null,
      checkItemIndex:null
      checkItemIndex: null,
      isShowAnswer: false,
      isRight: null,
      value:[{left:0,right:0}],
      pageNum:null
    };
  },
  props: {
@@ -69,18 +99,16 @@
        };
      },
    },
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    item: {
      type: Object,
      default: () => {
        return [];
      },
    },
    bc:{
      type:String,
      default:"#0bab87"
    }
  },
  watch: {
    rawData: {
@@ -91,6 +119,8 @@
    },
  },
  mounted() {
    // 获取当前页码，用于匹配本次存储题目数据
    this.pageNum = this.handlePage()
    // 添加滚动事件 监听 解决因为滚动引起的拖动线不对的问题
    window.addEventListener(
      "scroll",
@@ -112,6 +142,7 @@
    this.$nextTick(() => {
      this.drawing();
    });
    this.getAnswer()
  },
  methods: {
    init() {
@@ -187,16 +218,16 @@
          };
        })
        .filter((r) => r.right !== undefined);
      // this.$emit("input", model);
      this.$emit("input", model);
      this.item.userChoise = model;
      // console.log(JSON.stringify(model));
      console.log(JSON.stringify(model));
    },
    // 触摸开始
    touchstart(e, item,index) {
      this.isDragging = true;
      console.log("按下", e);
      this.checkItem = item
      this.checkItemIndex = index
      this.checkItem = item;
      this.checkItemIndex = index;
      e.stopPropagation();
      // let event = e.targetTouches[0];
      item.line = [
@@ -223,7 +254,7 @@
      if (this.item.showAnswer) {
        return false;
      }
      console.log('移动',e);
      // console.log('移动',e);
      this.checkItem.line[2] = e.pageX;
      this.checkItem.line[3] =
        e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -272,10 +303,98 @@
      let rightY = rightEvent.offsetTop + rightEvent.clientHeight / 2;
      return [leftX, leftY, rightX, rightY];
    },
    mouseup() {
      console.log("大盒子抬起", this.isDragging);
      this.isDragging = false;
    areArraysEqual(array1, array2) {
      // 如果两个数组长度不同，则它们不等
      if (array1.length !== array2.length) {
        return false;
      }

      // 遍历数组并比较每个对象的属性
      for (let i = 0; i < array1.length; i++) {
        const obj1 = array1[i];
        const obj2 = array2[i];

        // 如果对象的left或right属性不相等，则数组不等
        if (obj1.left !== obj2.left || obj1.right !== obj2.right) {
          return false;
        }
      }

      // 如果所有对象都匹配，则数组相等
      return true;
    },
    // 查看答案
    handleAnswer() {
      this.isShowAnswer = !this.isShowAnswer;
    },
    // 提交
    submitData() {
      const answerArr = [];
      const values = this.item.options.values;
      for (let index = 0; index < values.length; index++) {
        const item = values[index];
        const rightIndex = this.item.options.linkValues.findIndex(
          (citem) => citem.oldId == item.oldId
        );
        debugger;
        answerArr.push({
          left: index,
          right: rightIndex,
        });
      }
      this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
      console.log(
        "答案",
        answerArr,
        this.item.userChoise,
        this.isRight 
      );
    },
    // 获取当前页码
    handlePage() {
      let pageNum = null
      const element = document.getElementsByClassName("matching")[0];
      if (element) {
        pageNum = this.getParentWithClass(
          element,
          "page-box"
        ).getAttribute("page");
      }
      return pageNum
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    // 获取本地存储题目答案
    getAnswer() {
      const data =  localStorage.getItem(this.config.activeBook.name + '-matching-' + this.pageNum)
      if(data) {
       this.value = JSON.parse(data)
      }
    },
    // 保存
    saveData() {
      if(this.item.userChoise.length)
      localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
      console.log('保存成功',this.config.activeBook.name,this.pageNum);
    },
    // 重做
    redo() {
      localStorage.removeItem(this.config.activeBook.name + '-matching-' + this.pageNum)
      this.value = []
      for (let index = 0; index < this.leftArr.length; index++) {
        const item = this.leftArr[index];
        item.value = []
        item.line = []
      }
      this.leftArr
      this.drawing()
    }
  },
};
</script>
@@ -313,14 +432,14 @@
    text-align: center;

    &-item {
      cursor: pointer;
      z-index: 2;
      // display: inline-flex;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      line-height: 40px;
      padding: 20px 0;
      padding: 6px;
    }

    &-item:last-child {
@@ -328,11 +447,34 @@
    }
  }
}

.tl-le {
  text-align: left;
}
.connect {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* 标准语法 */
}
.show-answer {
  margin: 30px auto;
  width: 100%;
  height: min-content;
  // background-color: pink;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .show-answer-box {
    padding: 10px;
  }
}
.btn-bottom {
  width: 70%;
  margin: 70px auto 0 auto;
  display: flex;
  justify-content: space-evenly;
}
.el-button {
  height:30px;
  padding:9px;
  min-width: 78px
}
</style>