涂色题组件

闫增涛

2024-06-25 eeaffede2e5e3976e9f8a45b79cefa021281832c

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

@@ -156,7 +156,7 @@
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectImg ? collectCheck : collectImg"
                :src="collectResourceList.findIndex(item => item.id == '722FE833') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('img')"
@@ -184,7 +184,7 @@
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                :src="collectResourceList.findIndex(item => item.id == 'a28cd862d61b5df2201406b76e9f01b0') > -1 ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
@@ -239,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"
@@ -537,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"
@@ -565,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>
@@ -573,14 +575,43 @@
        </div>
      </div>
    </div>

    <div class="page-box padding-116" page="10">
      <!-- <drag :question="dragQuestion" :page="10"/> -->
       <graffiti style="width:100%" />
    </div>
    <!-- 函数控件弹窗 -->
    <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"
@@ -589,16 +620,46 @@
    </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" style="display: flex">
            <span class="step-num">
              <span class="step-num-box">{{ index + 1 }}</span>
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</span
              >
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
@@ -616,8 +677,20 @@
          </div>
        </li>
      </ul>
      <div class="bottom-btn" @click="showNext(thinkIndex)">
        <img src="../../assets/images/icon/mouse.png" alt="" v-if="thinkIndex != 3" />
      <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"
@@ -644,16 +717,50 @@
    </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" style="display: flex">
            <span class="step-num">
              <span class="step-num-box">{{ index + 1 }}</span>
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</span
              >
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
@@ -671,8 +778,20 @@
          </div>
        </li>
      </ul>
      <div class="bottom-btn" @click="showNextChange(stepIndex)">
        <img src="../../assets/images/icon/mouse.png" alt="" v-if="stepIndex != 2" />
      <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"
@@ -703,23 +822,28 @@
<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";
import drag from '@/components/dragQuestion/index.vue'
import graffiti from "@/components/graffiti/index.vue"
export default {
  name: "chapter-one",
  components: { examinations },
  components: { examinations,drag,graffiti },
  props: {
    showPageList: {
      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 {
@@ -734,9 +858,9 @@
      thinkingDialog: false,
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex:1,
      thinkIndex: 1,
      collectResourceList:[],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -767,6 +891,80 @@
          isShow: false,
        },
      ],
      dragQuestion:[
          {
          analysisCon: null,
          answer: ['A','B','C'],
          difficulty: 0,
          id: "7BC7B760",
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          option: [
            {
              img: "",
              index: "010311",
              txt: "胆小的",
              value: "A",
              isShow:true
            },
            {
              img: "",
              index: "010312",
              txt: "善良的",
              value: "B",
              isShow:true
            },
            {
              img: "",
              index: "010313",
              txt: "沉稳的",
              value: "C",
              isShow:true
            },
          ],
          optionStyle: "Txt",
          questionType: "drag",
          score: 2,
          stem: {
            0: "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只(",
            1:{
              data: "span",
              num: 0
            },
            2: ")蚂蚁;小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只(",
            3:{
              data:"span",
              num:1
            },
            4:")蚂蚁;蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只(",
            5:{
              data:"span",
              num:2,
            },
            6:" )蚂蚁"
          },
          stemStyle: "RichTxt",
          type: "拖拽题",
          userAnswer:[
            {
              vlaue:'',
              txt:''
            },
            {
              vlaue:'',
              txt:''
            },
            {
              vlaue:'',
              txt:''
            },
          ]
        },
      ]
    };
  },
  methods: {
@@ -781,45 +979,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();
    },
@@ -833,17 +1032,36 @@
      const number = this.thinkOne.findIndex((item, index) => index == num);
      console.log(number);
      this.thinkOne[number].isShow = true;
      if(this.thinkIndex <= 2) {
        this.thinkIndex ++
      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 ++ 
      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>
@@ -881,4 +1099,6 @@
    color: #fff;
  }
}
.stepDialog {
}
</style>