数学资源收藏

闫增涛

2024-06-21 a08108139526214a36aba424de99ab2a50825798

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

@@ -149,13 +149,18 @@
          </p>
          <p class="img fl fl-cn ju-cn">
            <span>图3-15</span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectImg ? '点击取消' : '点击收藏'" placement="top-start">
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectImg ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
              :src="chapterData.isCollectImg ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('img')"
            />
                :src="collectResourceList.findIndex(item => item.id == '722FE833') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('img')"
              />
            </el-tooltip>
          </p>
          <video
@@ -172,19 +177,24 @@
          ></video>
          <p class="img fl fl-cn ju-cn">
            <span>视频：判数函数奇偶性的方法和步骤 </span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
              :src="chapterData.isCollectVideo ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('video')"
            />
                :src="collectResourceList.findIndex(item => item.id == 'a28cd862d61b5df2201406b76e9f01b0') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </p>
          <p  class="fl">
          <p class="fl">
            <span>
              <span class="zt-ls"><b>例1</b></span
                >　根据图3-16中函数的图像，判断哪些函数是偶函数.
              >　根据图3-16中函数的图像，判断哪些函数是偶函数.
            </span>
            <span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
              <svg
@@ -229,10 +239,9 @@
        <div class="padding-116">
          <p class="fl">
            <span>
              <span class="zt-ls"><b>例2</b></span
                >　已知<i>f</i>（<i>x</i>）=|<i>x</i>|+1图像在<i>y</i>轴右边的部分如图3-17所示.试画出这个函数图像在<i>y</i>轴左边的部分.
              <span class="zt-ls"><b>例2</b></span>
              　已知<i>f</i>（<i>x</i>）=|<i>x</i>|+1图像在<i>y</i>轴右边的部分如图3-17所示.试画出这个函数图像在<i>y</i>轴左边的部分.
            </span>
            
            <span class="btn-box" @click="isShowExampleTwo = !isShowExampleTwo">
              <svg
                xmlns="http://www.w3.org/2000/svg"
@@ -385,7 +394,7 @@
                class="btn-box"
                @click="isShowExampleFour = !isShowExampleFour"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16.501"
                  height="16.501"
@@ -432,7 +441,7 @@
                class="btn-box"
                @click="isShowExampleFive = !isShowExampleFive"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16.501"
                  height="16.501"
@@ -527,7 +536,7 @@
                />
              </p>
            </div>
            <p class="block">
            <p class="block tl">
              如果<i>f</i>（<i>x</i>），<i>g</i>（<i>x</i>）都是定义域为<i>D</i>的偶函数，那么<i>f</i>（<i>x</i>）+<i>g</i>（<i>x</i>）和<i>f</i>（<i>x</i>）<i>g</i>（<i>x</i>）仍是偶函数吗？
              <textarea
                cols="30"
@@ -555,7 +564,10 @@
          </p>
          <div class="bj">
            <examinations
              :cardList="questionData"
              :cardList="questionData[9]"
              :hideCollect="true"
              sourceType="json"
              inputBc="#d3edfa"
              v-if="questionData"
              :isReal="false"
            ></examinations>
@@ -566,116 +578,240 @@

    <!-- 函数控件弹窗 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :append-to-body="true"
      :show-close="false"
    >
    <div slot="title" style="padding: 0 0 15px 0;position: relative;">
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="dialogVisible = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <iframe
        src="https://www.geogebra.org/calculator"
        frameborder="0"
        style="  width: 100%;min-height: 800px;"
        style="width: 100%; min-height: 800px"
      ></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 解题思路弹窗 -->
    <el-dialog
      title="解题思路"
      :visible.sync="thinkingDialog"
      width="40%"
      :append-to-body="true"
      :show-close="false"
    >
      <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
        <span style=""> 解题思路 </span>
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="thinkingDialog = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <ul>
        <li v-for="(item, index) in thinkOne" :key="index">
          <div v-if="item.isShow">
            <p class="txt-p">{{ item.txt }}</p>
            <div style="text-align: center">
              <svg
                @click="showNext(index + 1)"
                v-if="index != thinkOne.length - 1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                t="1710234570135"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                p-id="5067"
                width="15"
                height="15"
          <div v-if="item.isShow" style="display: flex">
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</span
              >
                <path
                  d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
                  fill="#1296db"
                  p-id="5068"
                />
                <path
                  d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
                  fill="#1296db"
                  p-id="5069"
                />
              </svg>
            </div>
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
                style="margin-right: 10px"
                v-if="index < thinkOne.length - 1"
              />
              <img
                src="../../assets/images/icon/blue.png"
                alt=""
                v-if="index == thinkOne.length - 1"
                style="margin-right: 10px"
              />
            </span>
            <p class="txt-p">{{ item.txt }}</p>
          </div>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="thinkingDialog = false">取 消</el-button>
        <el-button type="primary" @click="thinkingDialog = false"
          >确 定</el-button
      <div
        @click="showNext(thinkIndex)"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <img
          src="../../assets/images/icon/mouse.png"
          alt=""
          v-if="thinkIndex != 3"
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          t="1710234570135"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="5067"
          width="15"
          height="15"
        >
      </span>
          <path
            d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
            fill="#1296db"
            p-id="5068"
          />
          <path
            d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
            fill="#1296db"
            p-id="5069"
          />
        </svg>
      </div>
    </el-dialog>
    <!-- 解题步骤弹窗 -->
    <el-dialog
      class="stepDialog"
      title="解题步骤"
      :visible.sync="stepDialog"
      width="40%"
      :append-to-body="true"
      :show-close="false"
    >
      <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
        <span>
          解题步骤
        </span>
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="stepDialog = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <ul>
        <li v-for="(item, index) in stepOne" :key="index">
          <div v-if="item.isShow">
            <p class="txt-p">{{ item.txt }}</p>
            <div style="text-align: center">
              <svg
                @click="showNextChange(index + 1)"
                v-if="index != thinkOne.length - 1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                t="1710234570135"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                p-id="5067"
                width="15"
                height="15"
          <div v-if="item.isShow" style="display: flex">
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</span
              >
                <path
                  d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
                  fill="#1296db"
                  p-id="5068"
                />
                <path
                  d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
                  fill="#1296db"
                  p-id="5069"
                />
              </svg>
            </div>
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
                style="margin-right: 10px"
                v-if="index < stepOne.length - 1"
              />
              <img
                src="../../assets/images/icon/blue.png"
                alt=""
                v-if="index == stepOne.length - 1"
                style="margin-right: 10px"
              />
            </span>
            <p class="txt-p">{{ item.txt }}</p>
          </div>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="stepDialog = false">取 消</el-button>
        <el-button type="primary" @click="stepDialog = false">确 定</el-button>
      </span>
      <div
        @click="showNextChange(stepIndex)"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <img
          src="../../assets/images/icon/mouse.png"
          alt=""
          v-if="stepIndex != 2"
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          t="1710234570135"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="5067"
          width="15"
          height="15"
        >
          <path
            d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
            fill="#1296db"
            p-id="5068"
          />
          <path
            d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
            fill="#1296db"
            p-id="5069"
          />
        </svg>
      </div>
    </el-dialog>
  </div>
</template>
@@ -683,7 +819,7 @@
<script>
import examinations from "@/components/examinations/index.vue";
import { getResourcePath } from "@/assets/methods/resources";
import axios from "axios";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  components: { examinations },
@@ -692,14 +828,17 @@
      type: Array,
      default: [],
    },
    questionData:{
      type:Object
    }
  },
  mounted() {
  async mounted() {
    const data = localStorage.getItem("math-chapterData");
    if (data) {
      this.chapterData = JSON.parse(data);
    }
    this.getPath();
    this.getQuestionData();
    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
  },
  data() {
    return {
@@ -714,12 +853,14 @@
      thinkingDialog: false,
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex: 1,
      collectResourceList:[],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo:"",
        txtTwo: "",
      },
      thinkOne: [
        {
@@ -759,45 +900,46 @@
        "a28cd862d61b5df2201406b76e9f01b0"
      );
    },
    getQuestionData() {
      axios
        .get(this.config.activeBook.resourceUrl + "/question.json")
        .then((res) => {
          let oldAnswer = localStorage.getItem(
            this.config.activeBook.name + "oldAnswerData"
          );
          if (oldAnswer) {
            oldAnswer = JSON.parse(oldAnswer);
            console.log("旧数据", oldAnswer);
            if (oldAnswer[9]) {
              for (let index = 0; index < res.data.data.length; index++) {
                const item = res.data.data[index];
                if (item.infoList.length) {
                  for (
                    let cindex = 0;
                    cindex < item.infoList.length;
                    cindex++
                  ) {
                    const citem = item.infoList[cindex];
                    const question = oldAnswer[9].find(
                      (ditem) => ditem.id == citem.id
                    );
                    if (question) {
                      citem.userAnswer = question.userAnswer;
                    }
                  }
                }
              }
            }
          }
          this.questionData = res.data.data;
        });
    },
    // getQuestionData() {
    //   axios
    //     .get(this.config.activeBook.resourceUrl + "/question.json")
    //     .then((res) => {
    //       let oldAnswer = localStorage.getItem(
    //         this.config.activeBook.name + "oldAnswerData"
    //       );
    //       if (oldAnswer) {
    //         oldAnswer = JSON.parse(oldAnswer);
    //         console.log("旧数据", oldAnswer);
    //         if (oldAnswer[9]) {
    //           for (let index = 0; index < res.data.data.length; index++) {
    //             const item = res.data.data[index];
    //             if (item.infoList.length) {
    //               for (
    //                 let cindex = 0;
    //                 cindex < item.infoList.length;
    //                 cindex++
    //               ) {
    //                 const citem = item.infoList[cindex];
    //                 const question = oldAnswer[9].find(
    //                   (ditem) => ditem.id == citem.id
    //                 );
    //                 if (question) {
    //                   citem.userAnswer = question.userAnswer;
    //                 }
    //               }
    //             }
    //           }
    //         }
    //       }
    //       this.questionData = res.data.data;
    //     });
    // },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
        this.handleCollectResource("722FE833","",'images/0101-1.jpg',"图片","json",'图3-15')
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
        this.handleCollectResource("a28cd862d61b5df2201406b76e9f01b0","a28cd862d61b5df2201406b76e9f01b0",'',"视频","bits",'视频：判数函数奇偶性的方法和步骤')
        // setCollectResource(this.config.activeBook.bookId,[])
      }
      this.handleChapterData();
    },
@@ -811,11 +953,36 @@
      const number = this.thinkOne.findIndex((item, index) => index == num);
      console.log(number);
      this.thinkOne[number].isShow = true;
      if (this.thinkIndex <= 2) {
        this.thinkIndex++;
      }
    },
    showNextChange(num) {
      const number = this.stepOne.findIndex((item, index) => index == num);
      this.stepOne[number].isShow = true;
      if (this.stepIndex < 2) {
        this.stepIndex++;
      }
    },
    //资源收藏事件
    handleCollectResource(id,md5,resourcePath,resourceType,source,resourceName){
      console.log(this.collectResourceList);
      let list = this.collectResourceList
      if(list.findIndex(item => item.id == id) > -1) {
        list = list.filter(item => item.id != id)
      } else {
        list.push({
          id,
          md5,
          resourcePath,
          resourceType,
          source,
          resourceName,
        })
      }
      this.collectResourceList = list
      setCollectResource(this.config.activeBook.bookId,this.collectResourceList)
    }
  },
};
</script>
@@ -829,14 +996,30 @@
  width: 100%;
  min-height: 800px;
  border: 1px solid #00a1e9;
  border-radius:10px
  border-radius: 10px;
}
li {
  list-style: none;
}
.txt-p {
  margin-top: 0;
  border-bottom: 1px dashed #000;
  padding: 10px 0;
}
.bottom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.step-num {
  position: relative;
  .step-num-box {
    position: absolute;
    top: 16px;
    left: 13px;
    color: #fff;
  }
}
.stepDialog {
}
</style>