From 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期二, 02 七月 2024 09:31:04 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/mathBook/view/components/chapter001.vue | 542 ++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 402 insertions(+), 140 deletions(-) diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue index 74934e8..a31cf36 100644 --- a/src/books/mathBook/view/components/chapter001.vue +++ b/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,151 +564,286 @@ </p> <div class="bj"> <examinations - :cardList="questionData" + :cardList="questionData[9]" + :hideCollect="true" + sourceType="json" + inputBc="#d3edfa" v-if="questionData" :isReal="false" ></examinations> + <p class="gr-title">鍥涖�佸嚱鏁� f(x)=x鈥�-3 鐨勫浘鍍忓湪 杞村乏杈圭殑閮ㄥ垎濡傚浘鎵�绀猴紝璇蜂綘鐢诲嚭杩欎釜鍑芥暟鍥惧儚鍦� y杞村彸杈圭殑閮ㄥ垎.</p> + <div style="margin:0 auto;width:330px"> + <graffiti :page="9" :bcImg="this.config.activeBook.resourceUrl + '/images/0103-2.jpg'" :imgHeight="300" :imgWidth="300" :bcColor="'#d3edfa'" /> + </div> + </div> </div> </div> </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" - 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> <!-- 瑙i鎬濊矾寮圭獥 --> <el-dialog - title="瑙i鎬濊矾" :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=""> 瑙i鎬濊矾 </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> <!-- 瑙i姝ラ寮圭獥 --> <el-dialog + class="stepDialog" title="瑙i姝ラ" :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> + 瑙i姝ラ + </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> <script> import examinations from "@/components/examinations/index.vue"; +import graffiti from '@/components/graffiti/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 }, + components: { examinations,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 { @@ -714,12 +858,14 @@ thinkingDialog: false, stepDialog: false, videoPath: "", - questionData: [], + stepIndex: 1, + thinkIndex: 1, + collectResourceList:[], chapterData: { isCollectImg: false, isCollectVideo: false, txtOne: "", - txtTwo:"", + txtTwo: "", }, thinkOne: [ { @@ -745,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: { @@ -759,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(); }, @@ -811,11 +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++; + } }, 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 +1075,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> -- Gitblit v1.9.1