优化

unknown

2024-06-07 8931112f050759dfd31649ce04a48ca1aa99263c

优化

 src/App.vue

@@ -72,7 +72,7 @@
        // embedded
        // english
        // artAndDance
        this.config.resourceCtx + "childHealth"
        this.config.resourceCtx + "lifeCare"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/lifeCare/css/default.less

@@ -4,7 +4,7 @@
  overflow: auto;
}

.public-lifeCare {
.public-bookInnerContent {
  max-width: 816px;
  min-width: 375px;
  margin: 0 auto;
@@ -13,7 +13,7 @@

  .swiper-button-prev,
  .swiper-button-next {
    color: #F49A4C;
    color: #f49a4c;
  }

  textarea:focus,
@@ -29,6 +29,20 @@
    // max-width: 652px;
    // min-height: 100px;
    font-size: 16px;
  }

  /* 针对Firefox */
  textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* 针对IE, Edge和Chrome */
  textarea {
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .coverImg {
@@ -67,7 +81,6 @@
    padding-top: 20px !important;
    border: 2px dotted #00aeef !important;


    .bj3 {
      display: flex;
      justify-content: flex-start;
@@ -90,7 +103,7 @@
        border-radius: 50%;
        position: absolute;
        left: -38px;
        background: url('../image/xxfs.png');
        background: url("../image/xxfs.png");
        background-position: center;
        background-size: 70% 70%;
        background-repeat: no-repeat;
@@ -254,7 +267,7 @@
        }

        .content {
          background-color: #F49A4C;
          background-color: #f49a4c;
          width: 91%;
          height: 32%;
          display: flex;
@@ -298,7 +311,6 @@
          border-left-color: #a5c24f;
          border-bottom-color: #a5c24f;
        }


        @media (max-width: 756px) {
          .content {
@@ -388,7 +400,6 @@
        }

        @media (max-width: 1024px) {

          .second-con {
            right: 20px;
            top: 75px;
@@ -406,8 +417,6 @@
          background-color: #a5c24f;
        }
      }


    }

    .textareaInput {
@@ -453,13 +462,18 @@
        padding: 8px;
        overflow: hidden;
        white-space: pre-line;
        font-family: 'FZLTXIHJW';
        font-family: "FZLTXIHJW";
        font-weight: normal;
        font-size: 14px;
        line-height: 23px;

        input {
          font-size: 14px;
        div {
          width: 100%;
          min-height: 23px;
        }

        div:focus {
          outline: none;
        }

        textarea {
@@ -467,6 +481,10 @@
          min-height: 20px;
          min-width: 80px;
          border: 0;
          font-size: 14px;
          text-indent: 0em;
          min-width: 200px;
          max-width: 330px;
        }
      }
    }
@@ -563,7 +581,7 @@
      background-color: #fff;

      svg {
        fill: #F49A4C;
        fill: #f49a4c;
      }
    }

@@ -686,9 +704,8 @@
      padding: 12px 10px;
      box-sizing: border-box;
      padding-top: 30px;
      font-family: '仿宋';
      font-family: "仿宋";
      font-weight: 700;


      p {
        margin-top: 0px;
@@ -696,8 +713,8 @@

      .p-text {
        padding: 5px 10px;
        p {

        p {
          line-height: 22px;
          font-weight: 700;
          color: #666;
@@ -917,7 +934,7 @@
      text-align: justify;
      padding: 10% 10%;
      box-sizing: border-box;
      font-family: '宋体';
      font-family: "宋体";
    }

    div.bj {
@@ -1543,7 +1560,7 @@
    }

    div.bk-qjms {
      font-family: 'FZLTXIHJW';
      font-family: "FZLTXIHJW";
      border: 3px dotted #f49a4c;
      padding: 15px;
      margin-bottom: 2em;
@@ -1576,14 +1593,13 @@
  }

  @media screen and (max-width:800px) {
    .public-lifeCare .coverImg {
    .public-bookInnerContent .coverImg {
      position: absolute;
      top: 25%;
      left: 0;
    }

    .chapter {

      .prefaceImg {
        width: 100% !important;
        position: absolute;
@@ -1606,7 +1622,7 @@
        margin-top: 0;
        line-height: 25px;
        font-size: 16px;
        font-family: 'FZLTXIHJW'
        font-family: "FZLTXIHJW";
      }

      .header .pageHeader-second .second-con .second-right img {
@@ -1650,7 +1666,6 @@
        .fontsz1 {
          width: auto;
        }

      }

      .bj-tip {
@@ -1658,7 +1673,7 @@
        left: 10px;
        font-size: 16px;
        font-weight: normal;
        font-family: 'FZLTZHJW';
        font-family: "FZLTZHJW";

        div {
          width: 30px;
@@ -1680,12 +1695,9 @@
        }
      }


      .drawContent_wall {
        margin-bottom: 2em;
      }

      
    }
  }
}

 src/books/lifeCare/index.vue

@@ -1,7 +1,10 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div
      class="public-lifeCare"
      class="public-bookInnerContent"
      @mouseup="handleMouseUp"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
@@ -151,8 +154,9 @@
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      isSearch: false,
    };
  },
@@ -215,11 +219,21 @@
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
          // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        // 全文检索
        searchBookByKeyword: (keyword) => {
          return this.searchTextByPage(keyword);
        },
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
      });
    }
@@ -435,6 +449,7 @@
        }
      }
    },

    initObservation() {
      const sections = (
        this.container ? this.container : document
@@ -463,6 +478,7 @@
        }
      });
    },

    initThemeColor() {
      // 获取各种需要主题色的节点
      const colorDom = (
@@ -542,6 +558,7 @@
        }
      });
    },

    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
@@ -550,6 +567,7 @@
        }
      }
    },

    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
@@ -581,6 +599,7 @@
        }
      });
    },

    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
@@ -592,11 +611,11 @@
              "chapter"
            );
            const catalog = catalogDom.getAttribute("num");
            if (!this.questionData[page]) {
            if (!this.questionDataMap[page]) {
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {
                    this.questionData[page] = await getQuestionList(
                    this.questionDataMap[page] = await getQuestionList(
                      page,
                      testData[catalog][page],
                      this.config.activeBook
@@ -610,8 +629,9 @@
                        this.config.activeBook
                      );
                    }
                    this.questionData[page] = obj;
                    this.questionDataMap[page] = obj;
                  }
                  // console.log("题目", this.questionDataMap);
                }
              }
            }
@@ -625,6 +645,36 @@
                });
              }
            }
            // 处理高亮
            if (this.highlightData) {
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
                while (currentNode) {
                  allPageTextNodes.push(currentNode);
                  currentNode = pageTextList.nextNode();
                }
                for (let i = 0; i < allPageTextNodes.length; i++) {
                  const textDom = allPageTextNodes[i];
                  let txtIndex = textDom.textContent.indexOf(
                    this.highlightData.txt
                  );
                  if (txtIndex > -1) {
                    textDom.parentNode.style.transition =
                      "background-color 0.8s";
                    textDom.parentNode.scrollIntoView();
                    textDom.parentNode.style.backgroundColor = "#79bbf0";
                    setTimeout(() => {
                      textDom.parentNode.style.backgroundColor = "";
                    }, 1000);
                  }
                }
              }, 100);
            }
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();
@@ -633,6 +683,7 @@
        }
      });
    },

    initSwiper() {
      const doms = (
        this.container ? this.container : document
@@ -712,6 +763,7 @@
        });
      }
    },

    initViewer() {
      const doms = (
        this.container ? this.container : document
@@ -728,15 +780,7 @@
        });
      }
    },
    // eslint-disable-next-line
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },

    handleMouseUp(e) {
      const selection = (
        this.container ? this.container : window
@@ -779,6 +823,7 @@
        }
      }
    },

    swdtChange(data) {
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
@@ -786,6 +831,132 @@
        });
      }
    },

    // 根据关键字全文检索
    searchTextByPage(keyword) {
      const searchResult = [];
      let catalogIndex = 0;
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        front001,
        ChapterOne,
        ChapterTwo,
        ChapterThree,
        ChapterFour,
        ChapterFive,
        chapterSix,
        chapterSeven,
        chapterEight,
        chapterNine,
        chapter010,
        chapter011,
        chapter012,
        chapter013,
        chapter014,
        chapter015,
        chapter016,
        chapter017,
        chapter018,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
        catalogIndex++;
        let pageComponent, pageExample;
        // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息
        pageComponent = Vue.extend(pageData[key]);
        pageExample = new pageComponent({
          propsData: {
            showPageList: [],
            questionData: {},
          },
        });
        pageExample.$mount(
          (this.container ? this.container : document).querySelector(
            "#searchContent"
          )
        );
        // 获取页码
        const pageDom = (this.container ? this.container : document)
          .querySelector("#searchDomBox")
          .querySelectorAll(".page-box");
        const pages = [];
        for (let i = 0; i < pageDom.length; i++) {
          const pageDomItem = pageDom[i];
          pages.push(Number(pageDomItem.getAttribute("page")));
        }
        // 获取页面结束，卸载销毁
        pageExample.$destroy();
        (this.container ? this.container : document).querySelector(
          "#searchDomBox"
        ).innerHTML = '<div id="searchContent"></div>';
        // 遍历页码
        if (pages.length) {
          for (let i = 0; i < pages.length; i++) {
            const pageNum = pages[i];
            // 动态渲染对应章节的页码
            pageComponent = Vue.extend(pageData[key]);
            pageExample = new pageComponent({
              propsData: {
                showPageList: [pageNum],
                questionData: {},
              },
            });
            pageExample.$mount(
              (this.container ? this.container : document).querySelector(
                "#searchContent"
              )
            );
            // 获取对应页面dom
            const thisPageDom = (this.container ? this.container : document)
              .querySelector("#searchDomBox")
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
              while (currentNode) {
                allPageTextNodes.push(currentNode);
                currentNode = pageTextList.nextNode();
              }
              for (let i = 0; i < allPageTextNodes.length; i++) {
                const textDom = allPageTextNodes[i];
                let txtIndex = textDom.textContent.indexOf(keyword);
                if (txtIndex > -1) {
                  // 记录关键字所在页码、章节以及匹配到的段落
                  searchResult.push({
                    page: pageNum,
                    catalog: catalogIndex,
                    txt: textDom.textContent,
                    txtIndex: txtIndex,
                  });
                }
              }
              // 结束，卸载销毁
              pageExample.$destroy();
              (this.container ? this.container : document).querySelector(
                "#searchDomBox"
              ).innerHTML = '<div id="searchContent"></div>';
            }
          }
        }
      }
      // 输出搜索结果
      console.log(searchResult);
      return searchResult;
    },
    
    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
  },
  components: {
    front001,

 src/books/lifeCare/view/chapter001.vue

@@ -218,85 +218,105 @@
            <table class="table111">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>保育机构的名称</th>
                  <th>特点</th>
                  <th style="width: 120px">时间</th>
                  <th style="width: 200px">保育机构的名称</th>
                  <th style="width: 200px">特点</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1949年</td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText1"
                      @blur="onBlurChangeTable('tbText1')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText1')"
                    >
                      {{ chapter001.table111.tbText1 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText2"
                      @blur="onBlurChangeTable('tbText2')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText2')"
                    >
                      {{ chapter001.table111.tbText2 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>1949-1980年</td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText3"
                      @blur="onBlurChangeTable('tbText3')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText3')"
                    >
                      {{ chapter001.table111.tbText3 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText4"
                      @blur="onBlurChangeTable('tbText4')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText4')"
                    >
                      {{ chapter001.table111.tbText4 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>1980-1990年</td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText5"
                      @blur="onBlurChangeTable('tbText5')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText5')"
                    >
                      {{ chapter001.table111.tbText5 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText6"
                      @blur="onBlurChangeTable('tbText6')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText6')"
                    >
                      {{ chapter001.table111.tbText6 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>1990-2000年</td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText7"
                      @blur="onBlurChangeTable('tbText7')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText7')"
                    >
                      {{ chapter001.table111.tbText7 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText8"
                      @blur="onBlurChangeTable('tbText8')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText8')"
                    >
                      {{ chapter001.table111.tbText8 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>2000年至今</td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText9"
                      @blur="onBlurChangeTable('tbText9')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText9')"
                    >
                      {{ chapter001.table111.tbText9 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table111.tbText10"
                      @blur="onBlurChangeTable('tbText10')"
                    />
                    <div
                      contenteditable
                      @blur="onBlurChangeTable($event, 'tbText10')"
                    >
                      {{ chapter001.table111.tbText10 }}
                    </div>
                  </td>
                </tr>
              </tbody>
@@ -637,534 +657,450 @@
              <tbody>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell1"
                      @blur="onBlurChangeTable112('cell1')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell1')">
                      {{ chapter001.table112.cell1 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell2"
                      @blur="onBlurChangeTable112('cell2')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell2')">
                      {{ chapter001.table112.cell2 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell3"
                      @blur="onBlurChangeTable112('cell3')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell3')">
                      {{ chapter001.table112.cell3 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell4"
                      @blur="onBlurChangeTable112('cell4')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell4')">
                      {{ chapter001.table112.cell4 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell5"
                      @blur="onBlurChangeTable112('cell5')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell5')">
                      {{ chapter001.table112.cell5 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell6"
                      @blur="onBlurChangeTable112('cell6')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell6')">
                      {{ chapter001.table112.cell6 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell7"
                      @blur="onBlurChangeTable112('cell7')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell7')">
                      {{ chapter001.table112.cell7 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell8"
                      @blur="onBlurChangeTable112('cell8')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell8')">
                      {{ chapter001.table112.cell8 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell9"
                      @blur="onBlurChangeTable112('cell9')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell9')">
                      {{ chapter001.table112.cell9 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell10"
                      @blur="onBlurChangeTable112('cell10')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell10')">
                      {{ chapter001.table112.cell10 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell11"
                      @blur="onBlurChangeTable112('cell11')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell11')">
                      {{ chapter001.table112.cell11 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell12"
                      @blur="onBlurChangeTable112('cell12')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell12')">
                      {{ chapter001.table112.cell12 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell13"
                      @blur="onBlurChangeTable112('cell13')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell13')">
                      {{ chapter001.table112.cell13 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell14"
                      @blur="onBlurChangeTable112('cell14')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell14')">
                      {{ chapter001.table112.cell14 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell15"
                      @blur="onBlurChangeTable112('cell15')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell15')">
                      {{ chapter001.table112.cell15 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell16"
                      @blur="onBlurChangeTable112('cell16')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell16')">
                      {{ chapter001.table112.cell16 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell17"
                      @blur="onBlurChangeTable112('cell17')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell17')">
                      {{ chapter001.table112.cell17 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell18"
                      @blur="onBlurChangeTable112('cell18')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell18')">
                      {{ chapter001.table112.cell18 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell19"
                      @blur="onBlurChangeTable112('cell19')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell19')">
                      {{ chapter001.table112.cell19 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell20"
                      @blur="onBlurChangeTable112('cell20')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell20')">
                      {{ chapter001.table112.cell20 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell21"
                      @blur="onBlurChangeTable112('cell21')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell21')">
                      {{ chapter001.table112.cell21 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell22"
                      @blur="onBlurChangeTable112('cell22')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell22')">
                      {{ chapter001.table112.cell22 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell23"
                      @blur="onBlurChangeTable112('cell23')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell23')">
                      {{ chapter001.table112.cell23 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell24"
                      @blur="onBlurChangeTable112('cell24')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell24')">
                      {{ chapter001.table112.cell24 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell25"
                      @blur="onBlurChangeTable112('cell25')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell25')">
                      {{ chapter001.table112.cell25 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell26"
                      @blur="onBlurChangeTable112('cell26')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell26')">
                      {{ chapter001.table112.cell26 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell27"
                      @blur="onBlurChangeTable112('cell27')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell27')">
                      {{ chapter001.table112.cell27 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell28"
                      @blur="onBlurChangeTable112('cell28')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell28')">
                      {{ chapter001.table112.cell28 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell29"
                      @blur="onBlurChangeTable112('cell29')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell29')">
                      {{ chapter001.table112.cell29 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell30"
                      @blur="onBlurChangeTable112('cell30')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell30')">
                      {{ chapter001.table112.cell30 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell31"
                      @blur="onBlurChangeTable112('cell31')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell31')">
                      {{ chapter001.table112.cell31 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell32"
                      @blur="onBlurChangeTable112('cell32')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell32')">
                      {{ chapter001.table112.cell32 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell33"
                      @blur="onBlurChangeTable112('cell33')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell33')">
                      {{ chapter001.table112.cell33 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell34"
                      @blur="onBlurChangeTable112('cell34')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell34')">
                      {{ chapter001.table112.cell34 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell35"
                      @blur="onBlurChangeTable112('cell35')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell35')">
                      {{ chapter001.table112.cell35 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell36"
                      @blur="onBlurChangeTable112('cell36')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell36')">
                      {{ chapter001.table112.cell36 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell37"
                      @blur="onBlurChangeTable112('cell37')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell37')">
                      {{ chapter001.table112.cell37 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell38"
                      @blur="onBlurChangeTable112('cell38')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell38')">
                      {{ chapter001.table112.cell38 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell39"
                      @blur="onBlurChangeTable112('cell39')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell39')">
                      {{ chapter001.table112.cell39 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell40"
                      @blur="onBlurChangeTable112('cell40')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell40')">
                      {{ chapter001.table112.cell40 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell41"
                      @blur="onBlurChangeTable112('cell41')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell41')">
                      {{ chapter001.table112.cell41 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell42"
                      @blur="onBlurChangeTable112('cell42')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell42')">
                      {{ chapter001.table112.cell42 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell43"
                      @blur="onBlurChangeTable112('cell43')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell43')">
                      {{ chapter001.table112.cell43 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell44"
                      @blur="onBlurChangeTable112('cell44')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell44')">
                      {{ chapter001.table112.cell44 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell45"
                      @blur="onBlurChangeTable112('cell45')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell45')">
                      {{ chapter001.table112.cell45 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell46"
                      @blur="onBlurChangeTable112('cell46')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell46')">
                      {{ chapter001.table112.cell46 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell47"
                      @blur="onBlurChangeTable112('cell47')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell47')">
                      {{ chapter001.table112.cell47 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell48"
                      @blur="onBlurChangeTable112('cell48')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell48')">
                      {{ chapter001.table112.cell48 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell49"
                      @blur="onBlurChangeTable112('cell49')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell49')">
                      {{ chapter001.table112.cell49 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell50"
                      @blur="onBlurChangeTable112('cell50')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell50')">
                      {{ chapter001.table112.cell50 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell51"
                      @blur="onBlurChangeTable112('cell51')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell51')">
                      {{ chapter001.table112.cell51 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell52"
                      @blur="onBlurChangeTable112('cell52')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell52')">
                      {{ chapter001.table112.cell52 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell53"
                      @blur="onBlurChangeTable112('cell53')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell53')">
                      {{ chapter001.table112.cell53 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell54"
                      @blur="onBlurChangeTable112('cell54')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell54')">
                      {{ chapter001.table112.cell54 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell55"
                      @blur="onBlurChangeTable112('cell55')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell55')">
                      {{ chapter001.table112.cell55 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell56"
                      @blur="onBlurChangeTable112('cell56')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell56')">
                      {{ chapter001.table112.cell56 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell57"
                      @blur="onBlurChangeTable112('cell57')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell57')">
                      {{ chapter001.table112.cell57 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell58"
                      @blur="onBlurChangeTable112('cell58')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell58')">
                      {{ chapter001.table112.cell58 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell58"
                      @blur="onBlurChangeTable112('cell581')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell581')">
                      {{ chapter001.table112.cell58 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell60"
                      @blur="onBlurChangeTable112('cell60')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell60')">
                      {{ chapter001.table112.cell60 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell61"
                      @blur="onBlurChangeTable112('cell61')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell61')">
                      {{ chapter001.table112.cell61 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell62"
                      @blur="onBlurChangeTable112('cell62')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell62')">
                      {{ chapter001.table112.cell62 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell63"
                      @blur="onBlurChangeTable112('cell63')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell63')">
                      {{ chapter001.table112.cell63 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell64"
                      @blur="onBlurChangeTable112('cell64')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell64')">
                      {{ chapter001.table112.cell64 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell65"
                      @blur="onBlurChangeTable112('cell65')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell65')">
                      {{ chapter001.table112.cell65 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell66"
                      @blur="onBlurChangeTable112('cell66')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell66')">
                      {{ chapter001.table112.cell66 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell67"
                      @blur="onBlurChangeTable112('cell67')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell67')">
                      {{ chapter001.table112.cell67 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell68"
                      @blur="onBlurChangeTable112('cell68')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell68')">
                      {{ chapter001.table112.cell68 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell69"
                      @blur="onBlurChangeTable112('cell69')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell69')">
                      {{ chapter001.table112.cell69 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell70"
                      @blur="onBlurChangeTable112('cell70')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell70')">
                      {{ chapter001.table112.cell70 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell72"
                      @blur="onBlurChangeTable112('cell72')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell72')">
                      {{ chapter001.table112.cell72 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell73"
                      @blur="onBlurChangeTable112('cell73')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell73')">
                      {{ chapter001.table112.cell73 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell74"
                      @blur="onBlurChangeTable112('cell74')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell74')">
                      {{ chapter001.table112.cell74 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell75"
                      @blur="onBlurChangeTable112('cell75')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell75')">
                      {{ chapter001.table112.cell75 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell76"
                      @blur="onBlurChangeTable112('cell76')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell76')">
                      {{ chapter001.table112.cell76 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell77"
                      @blur="onBlurChangeTable112('cell77')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell77')">
                      {{ chapter001.table112.cell77 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell78"
                      @blur="onBlurChangeTable112('cell78')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell78')">
                      {{ chapter001.table112.cell78 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell79"
                      @blur="onBlurChangeTable112('cell79')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell79')">
                      {{ chapter001.table112.cell79 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table112.cell80"
                      @blur="onBlurChangeTable112('cell80')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell80')">
                      {{ chapter001.table112.cell80 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell81"
                      @blur="onBlurChangeTable112('cell81')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell81')">
                      {{ chapter001.table112.cell81 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell82"
                      @blur="onBlurChangeTable112('cell82')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell82')">
                      {{ chapter001.table112.cell82 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell83"
                      @blur="onBlurChangeTable112('cell83')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell83')">
                      {{ chapter001.table112.cell83 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell84"
                      @blur="onBlurChangeTable112('cell84')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell84')">
                      {{ chapter001.table112.cell84 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table112.cell85"
                      @blur="onBlurChangeTable112('cell85')"
                    />
                    <div contenteditable @blur="onBlurChangeTable112($event, 'cell85')">
                      {{ chapter001.table112.cell85 }}
                    </div>
                  </td>
                </tr>
              </tbody>
@@ -1211,102 +1147,87 @@
              <tbody>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table113.name1"
                      @blur="onBlurChangeTable113('name1')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'name1')">
                      {{ chapter001.table113.name1 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.demand1"
                      @blur="onBlurChangeTable113('demand1')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'demand1')">
                      {{ chapter001.table113.demand1 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.content1"
                      @blur="onBlurChangeTable113('content1')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'content1')">
                      {{ chapter001.table113.content1 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table113.name2"
                      @blur="onBlurChangeTable113('name2')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'name2')">
                      {{ chapter001.table113.name2 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.demand2"
                      @blur="onBlurChangeTable113('demand2')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'demand2')">
                      {{ chapter001.table113.demand2 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.content2"
                      @blur="onBlurChangeTable113('content2')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'content2')">
                      {{ chapter001.table113.content2 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table113.name3"
                      @blur="onBlurChangeTable113('name3')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'name3')">
                      {{ chapter001.table113.name3 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.demand3"
                      @blur="onBlurChangeTable113('demand3')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'demand3')">
                      {{ chapter001.table113.demand3 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.content3"
                      @blur="onBlurChangeTable113('content3')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'content3')">
                      {{ chapter001.table113.content3 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table113.name4"
                      @blur="onBlurChangeTable113('name4')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'name4')">
                      {{ chapter001.table113.name4 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.demand4"
                      @blur="onBlurChangeTable113('demand4')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'demand4')">
                      {{ chapter001.table113.demand4 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.content4"
                      @blur="onBlurChangeTable113('content4')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'content4')">
                      {{ chapter001.table113.content4 }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <input
                      v-model="chapter001.table113.name5"
                      @blur="onBlurChangeTable113('name5')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'name5')">
                      {{ chapter001.table113.name5 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.demand5"
                      @blur="onBlurChangeTable113('demand5')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'demand5')">
                      {{ chapter001.table113.demand5 }}
                    </div>
                  </td>
                  <td>
                    <input
                      v-model="chapter001.table113.content5"
                      @blur="onBlurChangeTable113('content5')"
                    />
                    <div contenteditable @blur="onBlurChangeTable113($event,'content5')">
                      {{ chapter001.table113.content5 }}
                    </div>
                  </td>
                </tr>
              </tbody>
@@ -1462,19 +1383,21 @@
      this.chapter001.idOpenThree = !this.chapter001.idOpenThree;
    },
    onBlurChange() {
      console.log(this.chapter001, "local");
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeTable() {
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeTable112() {
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeText112() {
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeTable113() {
    onBlurChangeTable(e, val) {
      this.chapter001.table111[val] = e.target.innerText;
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeTable112(e, val) {
      this.chapter001.table112[val] = e.target.innerText;
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
    onBlurChangeTable113(e, val) {
      this.chapter001.table113[val] = e.target.innerText;
      localStorage.setItem("chapter001", JSON.stringify(this.chapter001));
    },
  },