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

闫增涛

2024-05-29 53c1b899eda759f171761b2831ee37af7e919b2b

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

 src/App.vue

@@ -63,7 +63,9 @@
    } else {
      this.activeBook = await this.config.getBookConfig(
        // childHealth
        this.config.resourceCtx + "english"
        // lifeCare
        // sportsAndHealth
        this.config.resourceCtx + "sportsAndHealth"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/lifeCare/index.vue

@@ -135,6 +135,7 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      renderSignMap: {}
    };
  },
  computed: {
@@ -301,7 +302,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
            this.catalogLength
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -322,6 +323,14 @@
      }
    },

    // 处理标记数据
    handelSignData(type, data) {
      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
      if (!this.renderSignMap[type][data.page])
        this.renderSignMap[type][data.page] = [];
      this.renderSignMap[type][data.page].push(data);
    },

    // 渲染标记
    renderSign(type, data) {
      const existence = (
@@ -332,29 +341,48 @@
        const pageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
          allTextNodes.push(currentNode);
          currentNode = treeWalker.nextNode();
        }
        for (let i = 0; i < allTextNodes.length; i++) {
          const textDom = allTextNodes[i];
          if (textDom.textContent.indexOf(data.txt) > -1) {
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // 高亮
            pageDom.innerHTML = pageDom.innerHTML.replace(
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
              reg,
              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Dashing":
            // 划线
            pageDom.innerHTML = pageDom.innerHTML.replace(
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
              reg,
              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Note":
            // 笔记
            pageDom.innerHTML = pageDom.innerHTML.replace(
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
            );
            break;
            }
          }
        }
      }
    },
@@ -536,7 +564,7 @@
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
          if (this.loadPageList.indexOf(Number(page)) == -1) {
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
@@ -565,7 +593,16 @@
                }
              }
            }
            // 添加页码
            this.loadPageList.push(Number(page));
            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
                this.renderSignMap[key][page].forEach((item) => {
                  this.renderSign(key, item);
                });
              }
            }
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();

 src/books/sportsAndHealth/css/default.less

@@ -42,13 +42,13 @@
      justify-content: center;

      table {
        border: 1px solid #0aa2e9;
        border: 1px solid #95b2dc;
        border-collapse: collapse;
        padding: 0;
        margin: 0;

        tr th {
          border: 1px solid #0aa2e9;
          border: 1px solid #95b2dc;
          background-color: #b0a3cf;
          color: #f49a4c;
          text-align: center;
@@ -57,10 +57,11 @@
        }

        tr td {
          border: 1px solid #0aa2e9;
          border: 1px solid #95b2dc;
          text-align: center;
          padding: 3px 10px;
          font-size: 14px;
          line-height: 25px;

          input {
            cursor: pointer;

 src/books/sportsAndHealth/index.vue

@@ -73,6 +73,7 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      renderSignMap: {}
    };
  },
  computed: {

 src/books/sportsAndHealth/view/chapter002.vue

@@ -94,49 +94,235 @@
                </thead>
                <tbody>
                  <tr>
                    <td>1. 我感觉快乐，心情舒畅</td>
                    <td><input :value="chapter002.tablexyx1.text1" type="checkbox" />5</td>
                    <td><input :value="chapter002.tablexyx1.text2" type="checkbox" />4</td>
                    <td><input :value="chapter002.tablexyx1.text3" type="checkbox" />3</td>
                    <td><input :value="chapter002.tablexyx1.text4" type="checkbox" />2</td>
                    <td><input :value="chapter002.tablexyx1.text5" type="checkbox" />1</td>
                    <td><input :value="chapter002.tablexyx1.text6" type="checkbox" />0</td>
                    <td style="text-align: left">1. 我感觉快乐，心情舒畅</td>
                    <td>
                      <input
                        @change="changeBox($event, 'text1')"
                        :checked="chapter002.tablexyx1.text1"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text2')"
                        :checked="chapter002.tablexyx1.text2"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text3')"
                        :checked="chapter002.tablexyx1.text3"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text4')"
                        :checked="chapter002.tablexyx1.text4"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text5')"
                        :checked="chapter002.tablexyx1.text5"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text6')"
                        :checked="chapter002.tablexyx1.text6"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>2. 我感觉宁静和放松</td>
                    <td><input :value="chapter002.tablexyx1.text7" type="checkbox" />5</td>
                    <td><input :value="chapter002.tablexyx1.text8" type="checkbox" />4</td>
                    <td><input :value="chapter002.tablexyx1.text9" type="checkbox" />3</td>
                    <td><input :value="chapter002.tablexyx1.text10" type="checkbox" />2</td>
                    <td><input :value="chapter002.tablexyx1.text11" type="checkbox" />1</td>
                    <td><input :value="chapter002.tablexyx1.text12" type="checkbox" />0</td>
                    <td style="text-align: left">2. 我感觉宁静和放松</td>
                    <td>
                      <input
                        @change="changeBox($event, 'text7')"
                        :checked="chapter002.tablexyx1.text7"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text8')"
                        :checked="chapter002.tablexyx1.text8"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text9')"
                        :checked="chapter002.tablexyx1.text9"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text10')"
                        :checked="chapter002.tablexyx1.text10"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text11')"
                        :checked="chapter002.tablexyx1.text11"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text12')"
                        :checked="chapter002.tablexyx1.text12"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>3. 我感觉充满活力，精力充沛</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      3. 我感觉充满活力，精力充沛
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text13')"
                        :checked="chapter002.tablexyx1.text13"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text14')"
                        :checked="chapter002.tablexyx1.text14"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text15')"
                        :checked="chapter002.tablexyx1.text15"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text16')"
                        :checked="chapter002.tablexyx1.text16"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text17')"
                        :checked="chapter002.tablexyx1.text17"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text18')"
                        :checked="chapter002.tablexyx1.text18"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>4. 我睡醒时感到清醒，得到了足够休息</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      4. 我睡醒时感到清醒，得到了足够休息
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text19')"
                        :checked="chapter002.tablexyx1.text19"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text20')"
                        :checked="chapter002.tablexyx1.text20"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text21')"
                        :checked="chapter002.tablexyx1.text21"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text22')"
                        :checked="chapter002.tablexyx1.text22"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text23')"
                        :checked="chapter002.tablexyx1.text23"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text24')"
                        :checked="chapter002.tablexyx1.text24"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>5. 我每天的生活充满了有趣的事情</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      5. 我每天的生活充满了有趣的事情
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text25')"
                        :checked="chapter002.tablexyx1.text25"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text26')"
                        :checked="chapter002.tablexyx1.text26"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text27')"
                        :checked="chapter002.tablexyx1.text27"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text28')"
                        :checked="chapter002.tablexyx1.text28"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text29')"
                        :checked="chapter002.tablexyx1.text29"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text30')"
                        :checked="chapter002.tablexyx1.text30"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                </tbody>
              </table>
@@ -200,59 +386,59 @@
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>正常健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text1')" type="checkbox" :checked="chapter002.tablebyb1.text1" />正常健康</td>
                      <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />健康</td>
                      <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />健康</td>
                      <td><input @change="changeByb($event,'text4')" type="checkbox" :checked="chapter002.tablebyb1.text4" />健康</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>悲观</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text5')" type="checkbox" :checked="chapter002.tablebyb1.text5" />悲观</td>
                      <td><input @change="changeByb($event,'text6')" type="checkbox" :checked="chapter002.tablebyb1.text6" />不健康</td>
                      <td><input @change="changeByb($event,'text7')" type="checkbox" :checked="chapter002.tablebyb1.text7" />健康</td>
                      <td><input @change="changeByb($event,'text8')" type="checkbox" :checked="chapter002.tablebyb1.text8" />健康</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>社会方面不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td><input @change="changeByb($event,'text9')" type="checkbox" :checked="chapter002.tablebyb1.text9" />社会方面不健康</td>
                      <td><input @change="changeByb($event,'text10')" type="checkbox" :checked="chapter002.tablebyb1.text10" />健康</td>
                      <td><input @change="changeByb($event,'text11')" type="checkbox" :checked="chapter002.tablebyb1.text11" />健康</td>
                      <td><input @change="changeByb($event,'text12')" type="checkbox" :checked="chapter002.tablebyb1.text12" />不健康</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>患疑病症</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text13')" type="checkbox" :checked="chapter002.tablebyb1.text13" />患疑病症</td>
                      <td><input @change="changeByb($event,'text14')" type="checkbox" :checked="chapter002.tablebyb1.text14" />不健康</td>
                      <td><input @change="changeByb($event,'text15')" type="checkbox" :checked="chapter002.tablebyb1.text15" />健康</td>
                      <td><input @change="changeByb($event,'text16')" type="checkbox" :checked="chapter002.tablebyb1.text16" />健康</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>身体不健康</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text17')" type="checkbox" :checked="chapter002.tablebyb1.text17" />身体不健康</td>
                      <td><input @change="changeByb($event,'text18')" type="checkbox" :checked="chapter002.tablebyb1.text18" />健康</td>
                      <td><input @change="changeByb($event,'text19')" type="checkbox" :checked="chapter002.tablebyb1.text19" />不健康</td>
                      <td><input @change="changeByb($event,'text20')" type="checkbox" :checked="chapter002.tablebyb1.text20" />健康</td>
                    </tr>
                    <tr>
                      <td>6</td>
                      <td>长期受病折磨</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text21')" type="checkbox" :checked="chapter002.tablebyb1.text21" />长期受病折磨</td>
                      <td><input @change="changeByb($event,'text22')" type="checkbox" :checked="chapter002.tablebyb1.text22" />不健康</td>
                      <td><input @change="changeByb($event,'text23')" type="checkbox" :checked="chapter002.tablebyb1.text23" />不健康</td>
                      <td><input @change="changeByb($event,'text24')" type="checkbox" :checked="chapter002.tablebyb1.text24" />健康</td>
                    </tr>
                    <tr>
                      <td>7</td>
                      <td>乐观</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text25')" type="checkbox" :checked="chapter002.tablebyb1.text25" />乐观</td>
                      <td><input @change="changeByb($event,'text26')" type="checkbox" :checked="chapter002.tablebyb1.text26" />健康</td>
                      <td><input @change="changeByb($event,'text27')" type="checkbox" :checked="chapter002.tablebyb1.text27" />不健康</td>
                      <td><input @change="changeByb($event,'text28')" type="checkbox" :checked="chapter002.tablebyb1.text28" />健康</td>
                    </tr>
                    <tr>
                      <td>8</td>
                      <td>患病严重</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td><input @change="changeByb($event,'text29')" type="checkbox" :checked="chapter002.tablebyb1.text29" />患病严重</td>
                      <td><input @change="changeByb($event,'text30')" type="checkbox" :checked="chapter002.tablebyb1.text30" />不健康</td>
                      <td><input @change="changeByb($event,'text31')" type="checkbox" :checked="chapter002.tablebyb1.text31" />不健康</td>
                      <td><input @change="changeByb($event,'text32')" type="checkbox" :checked="chapter002.tablebyb1.text32" />不健康</td>
                    </tr>
                  </tbody>
                </table>
@@ -1022,11 +1208,26 @@
    return {
      chapter002:{
        tablexyx1:{},

      }
        tablebyb1:{}
      },
    };
  },
  created() {
    const localData = JSON.parse(localStorage.getItem("chapter002"));
    if (localData) {
      this.chapter002 = { ...Object.assign(this.chapter002, localData) };
      console.log(this.chapter002);
    }
  },
  methods: {
    changeBox(e, val) {
      this.chapter002.tablexyx1[val] = e.target.checked;
      localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
    },
    changeByb(e, val) {
      this.chapter002.tablebyb1[val] = e.target.checked;
      localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
    },
  },
};
</script>