| | |
| | | "qiankun": "^2.10.16", |
| | | "spark-md5": "^3.0.2", |
| | | "swiper": "^6.8.1", |
| | | "viewerjs": "^1.11.6", |
| | | "vue": "^2.6.14", |
| | | "vuex": "^3.6.2" |
| | | }, |
| | |
| | | "node": ">= 0.8" |
| | | } |
| | | }, |
| | | "node_modules/viewerjs": { |
| | | "version": "1.11.6", |
| | | "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz", |
| | | "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==" |
| | | }, |
| | | "node_modules/vue": { |
| | | "version": "2.7.16", |
| | | "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz", |
| | |
| | | "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", |
| | | "dev": true |
| | | }, |
| | | "viewerjs": { |
| | | "version": "1.11.6", |
| | | "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz", |
| | | "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==" |
| | | }, |
| | | "vue": { |
| | | "version": "2.7.16", |
| | | "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz", |
| | |
| | | "qiankun": "^2.10.16", |
| | | "spark-md5": "^3.0.2", |
| | | "swiper": "^6.8.1", |
| | | "viewerjs": "^1.11.6", |
| | | "vue": "^2.6.14", |
| | | "vuex": "^3.6.2" |
| | | }, |
| | |
| | | <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> |
| | | <meta http-equiv="expires" content="0"> |
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
| | | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.css"> |
| | | <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script> |
| | | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/css/swiper.css"> |
| | | <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/js/swiper.js"></script> |
| | | <title>数字教材</title> |
| | | </head> |
| | | <body> |
| | |
| | | } else { |
| | | this.activeBook = await this.config.getBookConfig( |
| | | // childHealth |
| | | this.config.resourceCtx + "sportsAndHealth" |
| | | this.config.resourceCtx + "childHealth" |
| | | ); |
| | | // 测试试读30页 |
| | | // this.activeBook.tryPageCount = 10; |
| | |
| | | border-bottom: 2px solid; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | /* swiper */ |
| | | .swiper-container{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .imgBox{ |
| | | position: relative; |
| | | } |
| | | |
| | | .imgBox img{ |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | | width: auto; |
| | | height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | margin: auto; |
| | | } |
| | | </style> |
| | |
| | | import MG from "@/assets/js/middleGround/WebMiddleGroundApi"; |
| | | import getPublicImage from "@/assets/js/middleGround/tool"; |
| | | const getQuestionList = async (page, questionList,activeBook) => { |
| | | console.log('page',page); |
| | | const oldAnswerData = localStorage.getItem(activeBook.name + 'oldAnswerData') |
| | | let oldData = null |
| | | let oldList = [] |
| | | console.log("page", page); |
| | | const oldAnswerData = localStorage.getItem(activeBook.name + "oldAnswerData"); |
| | | let oldData = null; |
| | | let oldList = []; |
| | | if(oldAnswerData) { |
| | | oldData = JSON.parse(oldAnswerData) |
| | | oldData = JSON.parse(oldAnswerData); |
| | | } |
| | | if(oldData && oldData[page]) { |
| | | oldList = oldData[page] |
| | | oldList = oldData[page]; |
| | | } |
| | | let cardList = [ |
| | | { |
| | | catalogName: "单选题", |
| | | infoList: [] |
| | | infoList: [], |
| | | }, |
| | | { |
| | | catalogName: "判断题", |
| | | infoList: [] |
| | | infoList: [], |
| | | }, |
| | | { |
| | | catalogName: "多选题", |
| | | infoList: [] |
| | | infoList: [], |
| | | }, |
| | | { |
| | | catalogName: "填空题", |
| | | infoList: [] |
| | | infoList: [], |
| | | }, |
| | | { |
| | | catalogName: "简答题", |
| | | infoList: [] |
| | | } |
| | | infoList: [], |
| | | }, |
| | | ]; |
| | | let singleChoiceArr = []; // 单选 |
| | | let judgeArr = []; // 判断 |
| | | let shortArr = []; // 简答 |
| | | let multipleChoiceArr = []; // 多选 |
| | | let completionArr = []; // 填空 |
| | | // 11 |
| | | for (let qindex = 0; qindex < questionList.length; qindex++) { |
| | | const qitem = questionList[qindex]; |
| | | let query = { |
| | |
| | | Embedded_QuestionBank_StemStyle: [], |
| | | Embedded_QuestionBank_OptionStyle: [], |
| | | Embedded_QuestionBank_KnowledgePoint: [], |
| | | Embedded_QuestionBank_Difficulty: [] |
| | | } |
| | | Embedded_QuestionBank_Difficulty: [], |
| | | }, |
| | | }; |
| | | const res = await MG.store.getProductDetail(query); |
| | | if(!res.datas) return false |
| | | if (!res.datas) return false; |
| | | res.datas.cmsDatas[0].datas.forEach((item, index) => { |
| | | let oldObj = {}; |
| | | if (oldList) { |
| | |
| | | isRight: null, // 是否正确 |
| | | isComplete: false, |
| | | isCollect: true, |
| | | isUnfold: "" |
| | | isUnfold: "", |
| | | }; |
| | | // 多选和填空答案肯为数组,要转换JSON格式 |
| | | if ( |
| | |
| | | if (item == "input") { |
| | | questionObj.stem[i] = { |
| | | num: index, |
| | | data: "input" |
| | | data: "input", |
| | | }; |
| | | questionObj.userAnswer[index] = ""; |
| | | index++; |
| | |
| | | } |
| | | }); |
| | | } |
| | | // 22 |
| | | cardList[0].infoList = singleChoiceArr; |
| | | cardList[1].infoList = judgeArr; |
| | | cardList[2].infoList = multipleChoiceArr; |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 4 --> |
| | | <div class="page-box"> |
| | | <div class="page-box" page="4"> |
| | | <div class="mb-20" style="padding-right: 20px;"> |
| | | <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;"> |
| | | <div class="preface-header-box y-bc"> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 5 --> |
| | | <div class="page-box"> |
| | | <div class="page-box" page="5"> |
| | | <ul class="preface-odd-header w100 fl ju-bt"> |
| | | <li class="left primary-bc "></li> |
| | | <li> |
| | |
| | | class="mb-20 open-image" |
| | | /> --> |
| | | <span id="open-image" @click="openImage"> |
| | | <img src="../../../assets/images/chapterOne/0014-1.jpg" data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg" class="w100 mt-20"> |
| | | <img |
| | | src="../../../assets/images/chapterOne/0014-1.jpg" |
| | | data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg" |
| | | class="w100 mt-20" |
| | | /> |
| | | </span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | <!-- 2 --> |
| | | <div class="page-box" page="10"> |
| | | <div class="page-box" page="10" :show="showPageList.indexOf(10) > -1"> |
| | | <div v-if="showPageList.indexOf(10) > -1"> |
| | | <div class="header-box"> |
| | | <div class="header-border-box"></div> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 3 --> |
| | | <div class="page-box" page="11"> |
| | | <div class="page-box" page="11" :show="showPageList.indexOf(11) > -1"> |
| | | <div v-if="showPageList.indexOf(11) > -1"> |
| | | <div class="page-header-box"> |
| | | <span class="page-header-text" |
| | |
| | | </div> |
| | | <div class="bottom-right" style="width: 35%"> |
| | | <div class="mt-40"> |
| | | <div class="banshi"> |
| | | <div class="banshi openImgBox"> |
| | | <div class="swiper-container"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="swiper-slide"> |
| | | <div |
| | | v-for="(item, index) in bonesList" |
| | | :key="index" |
| | | class="swiper-slide" |
| | | :style="`background-image:url(${item})`" |
| | | ></div> |
| | | class="imgBox" |
| | | style="width: 100%; height: 100%" |
| | | > |
| | | <img |
| | | src="../../../assets/images/chapterOne/bones1.png" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="swiper-slide"> |
| | | <div |
| | | class="imgBox" |
| | | style="width: 100%; height: 100%" |
| | | > |
| | | <img |
| | | src="../../../assets/images/chapterOne/bones2.png" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="swiper-slide"> |
| | | <div |
| | | class="imgBox" |
| | | style="width: 100%; height: 100%" |
| | | > |
| | | <img |
| | | src="../../../assets/images/chapterOne/bones3.png" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="swiper-pagination"></div> |
| | | <div class="swiper-button-next"></div> |
| | |
| | | </div> |
| | | <div class="right" style="width: 60%"> |
| | | <video |
| | | :src="pathFive" |
| | | :src="getResourcePath('163c06871b763954952d1cd74373c618')" |
| | | poster="../../../assets/images/chapterOne/people-video-img.jpg" |
| | | webkit-playsinline="true" |
| | | x-webkit-airplay="true" |
| | |
| | | <script> |
| | | import examinations from "@/components/examinations/index.vue"; |
| | | import getResourcePath from "@/assets/methods/resources"; |
| | | import Swiper from "swiper/bundle"; |
| | | import "swiper/swiper-bundle.css"; |
| | | |
| | | export default { |
| | | name: "chapter-one", |
| | | components: { examinations }, |
| | | props: { |
| | | showPageList: { |
| | | type: Array, |
| | | default: [], |
| | | default: [] |
| | | }, |
| | | questionData: { |
| | | type: Object, |
| | | }, |
| | | type: Object |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | jointImg: require("../../../assets/images/chapterOne/0017-1.jpg"), |
| | | footImg: require("../../../assets/images/chapterOne/0017-2.jpg"), |
| | | sitImg: require("../../../assets/images/chapterOne/0018-1.jpg"), |
| | | bonesList: [ |
| | | require("../../../assets/images/chapterOne/bones1.png"), |
| | | require("../../../assets/images/chapterOne/bones2.png"), |
| | | require("../../../assets/images/chapterOne/bones3.png"), |
| | | ], |
| | | bonesList: [], |
| | | footList: [ |
| | | require("../../../assets/images/chapterOne/foot-01.png"), |
| | | require("../../../assets/images/chapterOne/foot-02.png"), |
| | | require("../../../assets/images/chapterOne/foot-02.png") |
| | | ], |
| | | posureList: [ |
| | | require("../../../assets/images/chapterOne/posture-01.png"), |
| | | require("../../../assets/images/chapterOne/posture-02.png"), |
| | | require("../../../assets/images/chapterOne/posture-03.png"), |
| | | require("../../../assets/images/chapterOne/posture-03.png") |
| | | ], |
| | | resourceState: "", |
| | | type: "option", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableTwo: { |
| | | qOne: "", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableThree: { |
| | | qOne: "", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableFour: { |
| | | qOne: "", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableFive: { |
| | | qOne: "", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableSix: { |
| | | qOne: "", |
| | | qTwo: "", |
| | | qThree: "", |
| | | qFour: "", |
| | | qFive: "", |
| | | qFive: "" |
| | | }, |
| | | learnTableSeven: { |
| | | qOne: "", |
| | |
| | | qFour: "", |
| | | qFive: "", |
| | | qSix: "", |
| | | qSeven: "", |
| | | qSeven: "" |
| | | }, |
| | | learnTableEnight: { |
| | | qOne: "", |
| | |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qNine: "", |
| | | qNine: "" |
| | | }, |
| | | learnTableNine: { |
| | | qOne: "", |
| | |
| | | qFive: "", |
| | | qSix: "", |
| | | qSeven: "", |
| | | qEight: "", |
| | | qEight: "" |
| | | }, |
| | | question: { |
| | | judge: { |
| | | qOne: "", |
| | | qTwo: "", |
| | | qThree: "", |
| | | qFour: "", |
| | | qFour: "" |
| | | }, |
| | | fill: { |
| | | qOne: { |
| | | one: "", |
| | | two: "", |
| | | two: "" |
| | | }, |
| | | qTwo: { |
| | | oen: "", |
| | | two: "", |
| | | two: "" |
| | | }, |
| | | qThree: { |
| | | one: "", |
| | | two: "", |
| | | two: "" |
| | | }, |
| | | qFour: { |
| | | one: "", |
| | | two: "", |
| | | two: "" |
| | | }, |
| | | qFive: { |
| | | one: "", |
| | | two: "", |
| | | }, |
| | | two: "" |
| | | } |
| | | }, |
| | | short: { |
| | | qOne: "", |
| | |
| | | qFour: "", |
| | | qFive: "", |
| | | qSix: "", |
| | | qSeven: "", |
| | | qSeven: "" |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }, |
| | | swiper: null, |
| | | swiper: null |
| | | }; |
| | | }, |
| | | async mounted() { |
| | | this.getSwiper(); |
| | | this.getResourcePath = getResourcePath; |
| | | this.getVideoPath(); |
| | | const localData = localStorage.getItem("chapterOneData"); |
| | | if (localData) { |
| | |
| | | clearInterval(window.timerOne); |
| | | } |
| | | localStorage.setItem("chapterOneData", JSON.stringify(this.chapterOneData)); |
| | | }, |
| | | watch: { |
| | | showPageList: { |
| | | handler(newVal, oldVal) { |
| | | console.log(newVal, "章节接收内容"); |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | changeResources(type) { |
| | |
| | | }, |
| | | saveChapterOneData() { |
| | | // 记录第一张输入数据 |
| | | console.log("20miao"); |
| | | this.saveTime = 20; |
| | | console.log(this.chapterOneData); |
| | | localStorage.setItem( |
| | | "chapterOneData", |
| | | JSON.stringify(this.chapterOneData) |
| | | ); |
| | | }, |
| | | getSwiper() { |
| | | this.swiper = new Swiper(".swiper-container", { |
| | | loop: true, // 无缝 |
| | | autoplay: { |
| | | //自动开始 |
| | | delay: 3000, //时间间隔 |
| | | disableOnInteraction: false, //*手动操作轮播图后不会暂停* |
| | | }, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: ".swiper-button-next", |
| | | prevEl: ".swiper-button-prev", |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | // 如果需要分页器 |
| | | pagination: { |
| | | el: ".swiper-pagination", |
| | | clickable: true, // 分页器可以点击 |
| | | }, |
| | | }); |
| | | }, |
| | | |
| | | openImage() { |
| | | let container = document.getElementById("open-image"); |
| | | let viewr = new Viewer(container, { |
| | | inline: false, // 是否以内联方式显示预览 |
| | | url:'data-imgurl', |
| | | url: "data-imgurl", |
| | | toolbar: { |
| | | zoomIn: 1, // 是否显示放大按钮 |
| | | zoomOut: 1, // 是否显示缩小按钮 |
| | |
| | | rotateLeft: 0, // 是否显示向左旋转按钮 |
| | | rotateRight: 0, // 是否显示向右旋转按钮 |
| | | flipHorizontal: 0, // 是否显示水平翻转按钮 |
| | | flipVertical: 0, // 是否显示垂直翻转按钮 |
| | | }, |
| | | flipVertical: 0 // 是否显示垂直翻转按钮 |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | |
| | | justify-content: space-evenly; |
| | | } |
| | | |
| | | // |
| | | .banshi { |
| | | margin-top: 40px; |
| | | width: 100%; |
| | | margin: 0 auto; |
| | | .swiper-slide { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 250px; |
| | | background-repeat: no-repeat; |
| | | background-size: contain; |
| | | background-position-x: center; |
| | | } |
| | | margin: 0 auto; |
| | | } |
| | | </style> |
| | |
| | | import _ from "lodash"; |
| | | import getQuestionList from "@/assets/methods/examination"; |
| | | import testData from "../../assets/examinationList"; |
| | | import Swiper from "swiper/bundle"; |
| | | import "swiper/swiper-bundle.css"; |
| | | import Viewer from "viewerjs"; |
| | | import "viewerjs/dist/viewer.css"; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | this.initObservation(); |
| | | this.initThemeColor(); |
| | | }, 500); |
| | | } |
| | | }, |
| | | }, |
| | | loadPageList: { |
| | | handler(newVal, oldVal) { |
| | | console.log(newVal, "this.loadPageList"); |
| | | setTimeout(() => { |
| | | this.initSwiper(); |
| | | this.initViewer(); |
| | | }, 200); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | |
| | | |
| | | // 测试页面跳转 |
| | | // setTimeout(() => { |
| | | // this.gotoPage(5, 100); |
| | | // this.gotoPage(1, 15); |
| | | // setTimeout(() => { |
| | | // this.renderSign("Note", { |
| | | // id: "2ACA9359", |
| | |
| | | // }); |
| | | // }, 2000); |
| | | // }, 1000); |
| | | // }, 3000); |
| | | // }, 1000); |
| | | }, |
| | | methods: { |
| | | // 滚动监听 |
| | |
| | | "chapter" |
| | | ); |
| | | const catalog = catalogDom.getAttribute("num"); |
| | | console.log(page, "page", catalog, "catalog",); |
| | | let text = null |
| | | if(target.querySelector('p')) { |
| | | console.log(target.querySelector('p').textContent.substring(0, 20)); |
| | | text = target.querySelector('p').textContent.substring(0, 20) |
| | | let text = null; |
| | | if (target.querySelector("p")) { |
| | | text = target.querySelector("p").textContent.substring(0, 20); |
| | | } |
| | | // 返回页码和章节信息 |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) |
| | | this.$store.state.qiankun.pageChange({ |
| | | page: page, |
| | | catalog: catalog, |
| | | text, |
| | | text |
| | | }); |
| | | // const sections = Array.from(document.querySelectorAll(".section")); |
| | | //sections:获取所有具有 .section 类名的元素,并转换为数组。 |
| | |
| | | const target = entry.target; |
| | | const page = target.getAttribute("page"); |
| | | if (this.loadPageList.indexOf(page) == -1) { |
| | | // |
| | | const catalogDom = this.tool.getParentNodeByClassName( |
| | | target, |
| | | "chapter" |
| | |
| | | } |
| | | }); |
| | | }, |
| | | initSwiper() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper-container"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Swiper(dom, { |
| | | loop: false, // 无缝 |
| | | autoplay: { |
| | | //自动开始 |
| | | delay: 3000, //时间间隔 |
| | | disableOnInteraction: false //*手动操作轮播图后不会暂停* |
| | | }, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: ".swiper-button-next", |
| | | prevEl: ".swiper-button-prev" |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | // 如果需要分页器 |
| | | pagination: { |
| | | el: ".swiper-pagination", |
| | | clickable: true // 分页器可以点击 |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | initViewer() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".openImgBox"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Viewer(dom, { |
| | | navbar: true, // 显示导航栏 |
| | | toolbar: true, // 显示工具栏 |
| | | title: true // 显示标题 |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | components: { |
| | | pageHeader, |
| | |
| | | 能,有效帮助用户建造从嵌入式设备、现场监控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1~图1-4所示为嵌入式组态软件系统应用于各个行业的情况。 |
| | | </p> |
| | | <div class="qrbodyPic"> |
| | | <el-image |
| | | :src="imgOne" |
| | | :preview-src-list="[imgOne]" |
| | | class="w100" |
| | | /> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00014001.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-1 嵌入式组态软件系统应用于电力行业</p> |
| | | </div> |
| | | <div class="qrbodyPic"> |
| | | <el-image :src="imgTwo" :preview-src-list="[imgTwo]" /> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00014002.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-2 嵌入式组态软件系统应用于铁路行业</p> |
| | | </div> |
| | | <div class="qrbodyPic"> |
| | | <el-image :src="imgThree" :preview-src-list="[imgThree]" /> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00014003.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-3 嵌入式组态软件系统应用于橡胶行业</p> |
| | | </div> |
| | | <div class="qrbodyPic"> |
| | | <el-image :src="imgFour" :preview-src-list="[imgFour]" /> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00014004.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-4 嵌入式组态软件系统应用于纺织行业</p> |
| | | </div> |
| | | </div> |
| | |
| | | MCGS嵌入版组态软件生成的用户应用系统,由主控窗口、设备窗口、用户窗口、实时数据库和运行策略五部分构成,如图1-5所示。 |
| | | </p> |
| | | <div class="qrbodyPic"> |
| | | <el-image :src="imgFive" :preview-src-list="[imgFive]" /> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00015001.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-5 用户应用系统组成</p> |
| | | </div> |
| | | <p class="content"> |
| | |
| | | </div> |
| | | <div class="fl"> |
| | | <div class=""> |
| | | <el-image |
| | | <!-- <el-image |
| | | :src="imgSix" |
| | | active="true" |
| | | :preview-src-list="[imgSix]" |
| | | /> |
| | | /> --> |
| | | <div class="openImgBox"> |
| | | <img src="../../assets/images/img00017001.jpg" alt="" class="w100"> |
| | | </div> |
| | | <p class="imgdescript">图1-6 正视图</p> |
| | | </div> |
| | | <div class=""> |
| | |
| | | <script> |
| | | export default { |
| | | name: "headerPage", |
| | | props:{ |
| | | showPageList:{ |
| | | type:Array |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped lang="less"> |
| | |
| | | <template> |
| | | <div class="page-main" @scroll="throttledScrollHandler"> |
| | | <div class="page-content"> |
| | | <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader> |
| | | <chapterOne v-if="showCatalogList.indexOf(1) > -1" /> |
| | | <div class="page-content" :style="{ |
| | | fontSize: fontSize ? fontSize + 'px' : '16px', |
| | | transform: `scale(${pageZoom ? pageZoom : 1})`, |
| | | transformOrigin: 'center top', |
| | | }"> |
| | | <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> |
| | | <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import chapterOne from "./chapter001.vue"; |
| | | import NoteIcon from "@/assets/images/biji.png"; |
| | | import _ from "lodash"; |
| | | import Swiper from "swiper/bundle"; |
| | | import "swiper/swiper-bundle.css"; |
| | | import Viewer from "viewerjs"; |
| | | import "viewerjs/dist/viewer.css"; |
| | | export default { |
| | | name: "pageContent", |
| | | components: { pageHeader, chapterOne }, |
| | | computed: { |
| | | fontSize() { |
| | | return this.$store.state.qiankun.fontSize; |
| | | }, |
| | | pageZoom() { |
| | | return this.$store.state.qiankun.scale / 100; |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | catalogLength: 2, // 总章节数 |
| | |
| | | previousScrollTop: 0, |
| | | throttledScrollHandler: null, |
| | | observer: null, |
| | | loadPageObserver: null, |
| | | loadPageList: [], |
| | | questionData: {}, |
| | | testData:{} |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | // 启动页码观察 |
| | | setTimeout(() => { |
| | | this.initObservation(); |
| | | this.initThemeColor(); |
| | | }, 500); |
| | | } |
| | | }, |
| | | }, |
| | | loadPageList: { |
| | | handler(newVal, oldVal) { |
| | | setTimeout(() => { |
| | | this.initSwiper(); |
| | | this.initViewer(); |
| | | }, 200); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | // 默认加载章节 |
| | | this.showCatalogList = [0,1]; |
| | | this.showCatalogList = [1]; |
| | | // 滚动监听节流 |
| | | this.throttledScrollHandler = _.throttle( |
| | | this.scrollFun, |
| | |
| | | threshold: 0.5, // 指定交叉比例,这里设为 0.5,表示当目标元素一半或更多显示在视窗中时触发回调函数。 |
| | | }); |
| | | |
| | | this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { |
| | | root: null, // 指定根元素,这里设为 null,表示选取整个视窗作为根元素。 |
| | | rootMargin: "0px", // 指定根元素的边界,这里设为 "0px",表示根元素的边界和视窗的边界重合 |
| | | threshold: 0, // 指定交叉比例,这里设为 0.5,表示当目标元素一半或更多显示在视窗中时触发回调函数。 |
| | | }); |
| | | |
| | | // 启动页码观察 |
| | | setTimeout(() => { |
| | | this.initObservation(); |
| | | this.initThemeColor(); |
| | | }, 500); |
| | | |
| | | // 测试页面跳转 |
| | | // setTimeout(() => { |
| | | // this.gotoPage(5, 100); |
| | | // setTimeout(() => { |
| | | // this.renderSign("Note", { |
| | | // id: "2ACA9359", |
| | | // txt: "营养素和热量,才能", |
| | | // page: "100", |
| | | // type: "Highlight", |
| | | // color: "#F5E12A" |
| | | // }); |
| | | // setTimeout(() => { |
| | | // this.delSign({ |
| | | // ids: ["2ACA9359"] |
| | | // }); |
| | | // }, 2000); |
| | | // this.gotoPage(1, 11); |
| | | // // setTimeout(() => { |
| | | // // this.renderSign("Note", { |
| | | // // id: "2ACA9359", |
| | | // // txt: "营养素和热量,才能", |
| | | // // page: "100", |
| | | // // type: "Highlight", |
| | | // // color: "#F5E12A" |
| | | // // }); |
| | | // // setTimeout(() => { |
| | | // // this.delSign({ |
| | | // // ids: ["2ACA9359"] |
| | | // // }); |
| | | // // }, 2000); |
| | | // // }, 1000); |
| | | // }, 1000); |
| | | // }, 3000); |
| | | }, |
| | | methods: { |
| | | // 滚动监听 |
| | |
| | | console.log("章节错误!"); |
| | | } |
| | | }, |
| | | |
| | | // 渲染标记 |
| | | renderSign(type, data) { |
| | | const existence = ( |
| | |
| | | // 笔记 |
| | | pageDom.innerHTML = pageDom.innerHTML.replace( |
| | | reg, |
| | | `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` |
| | | `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` |
| | | ); |
| | | break; |
| | | } |
| | |
| | | const sections = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".page-box"); |
| | | //observer 观察每个元素,以便在它们进入或离开视窗时触发回调函数。 |
| | | sections.forEach((section) => { |
| | | if (this.config.activeBook && this.config.activeBook.tryPageCount) { |
| | | const page = section.getAttribute("page"); |
| | | if (Number(page) > this.config.activeBook.tryPageCount) { |
| | | let chapterDom = this.getParentWithClass(section, "chapter"); |
| | | const chapterNum = chapterDom.getAttribute("num"); |
| | | this.catalogLength = Number(chapterNum) - 1; |
| | | section.remove(); |
| | | return false; |
| | | } |
| | | } |
| | | //observer 观察每个元素,以便在它们进入或离开视窗时触发回调函数。 |
| | | const isObserver = section.getAttribute("observer"); |
| | | const isLoadObserver = section.getAttribute("loadObserver"); |
| | | if (!isObserver) { |
| | | this.observer.observe(section); |
| | | section.setAttribute("observer", "1"); |
| | | } |
| | | if (!isLoadObserver) { |
| | | this.loadPageObserver.observe(section); |
| | | section.setAttribute("loadObserver", "1"); |
| | | } |
| | | }); |
| | | }, |
| | | initThemeColor() { |
| | | // 获取各种需要主题色的节点 |
| | | const colorDom = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".theme-color"); |
| | | const backgroundColorDom = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".theme-back"); |
| | | const borderColorDom = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".theme-border"); |
| | | // 获取配置的主题色 |
| | | const bookThemeColor = |
| | | this.config.activeBook && this.config.activeBook.bookThemeColor |
| | | ? this.config.activeBook.bookThemeColor |
| | | : null; |
| | | const chapterThemeColor = |
| | | this.config.activeBook && this.config.activeBook.chapterThemeColor |
| | | ? this.config.activeBook.chapterThemeColor |
| | | : null; |
| | | const pageThemeColor = |
| | | this.config.activeBook && this.config.activeBook.pageThemeColor |
| | | ? this.config.activeBook.pageThemeColor |
| | | : null; |
| | | colorDom.forEach((domItem) => { |
| | | // 获取章节、页码 |
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
| | | let page, chapterNum; |
| | | if (pageDom) page = pageDom.getAttribute("page"); |
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
| | | // 向上匹配主题色 |
| | | const themeColor = |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.color = themeColor; |
| | | } |
| | | }); |
| | | backgroundColorDom.forEach((domItem) => { |
| | | // 获取章节、页码 |
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
| | | let page, chapterNum; |
| | | if (pageDom) page = pageDom.getAttribute("page"); |
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
| | | // 向上匹配主题色 |
| | | const themeColor = |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.backgroundColor = themeColor; |
| | | } |
| | | }); |
| | | borderColorDom.forEach((domItem) => { |
| | | // 获取章节、页码 |
| | | let pageDom = this.getParentWithClass(domItem, "page-box"); |
| | | let chapterDom = this.getParentWithClass(domItem, "chapter"); |
| | | let page, chapterNum; |
| | | if (pageDom) page = pageDom.getAttribute("page"); |
| | | if (chapterDom) chapterNum = chapterDom.getAttribute("num"); |
| | | // 向上匹配主题色 |
| | | const themeColor = |
| | | page && pageThemeColor && pageThemeColor[page] |
| | | ? pageThemeColor[page] |
| | | : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] |
| | | ? chapterThemeColor[chapterNum] |
| | | : bookThemeColor; |
| | | if (themeColor) { |
| | | domItem.style.borderColor = themeColor; |
| | | } |
| | | }); |
| | | }, |
| | | getParentWithClass(element, className) { |
| | | while (element.parentElement) { |
| | | element = element.parentElement; |
| | | if (element.classList.contains(className)) { |
| | | return element; |
| | | } |
| | | } |
| | | }, |
| | | pageChangeCallback(entries, observer) { |
| | | //entries:代表观察到的目标元素的集合。 observer:代表观察者对象。 |
| | |
| | | "chapter" |
| | | ); |
| | | const catalog = catalogDom.getAttribute("num"); |
| | | console.log("page", page, catalog); |
| | | console.log(page, "page", catalog, "catalog"); |
| | | let text = null; |
| | | if (target.querySelector("p")) { |
| | | console.log(target.querySelector("p").textContent.substring(0, 20)); |
| | | text = target.querySelector("p").textContent.substring(0, 20); |
| | | } |
| | | // 返回页码和章节信息 |
| | | if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) |
| | | this.$store.state.qiankun.pageChange({ |
| | | page: page, |
| | | catalog: catalog, |
| | | text |
| | | }); |
| | | // const sections = Array.from(document.querySelectorAll(".section")); |
| | | //sections:获取所有具有 .section 类名的元素,并转换为数组。 |
| | |
| | | } |
| | | }); |
| | | }, |
| | | loadPageCallback(entries, observer) { |
| | | entries.forEach(async (entry) => { |
| | | if (entry.isIntersecting) { |
| | | const target = entry.target; |
| | | const page = target.getAttribute("page"); |
| | | if (this.loadPageList.indexOf(page) == -1) { |
| | | // |
| | | const catalogDom = this.tool.getParentNodeByClassName( |
| | | target, |
| | | "chapter" |
| | | ); |
| | | const catalog = catalogDom.getAttribute("num"); |
| | | // if (!this.questionData[page]) { |
| | | // if (testData && testData[catalog]) { |
| | | // if (testData[catalog][page]) { |
| | | // if (Array.isArray(testData[catalog][page])) { |
| | | // this.questionData[page] = await getQuestionList( |
| | | // page, |
| | | // testData[catalog][page], |
| | | // this.config.activeBook |
| | | // ); |
| | | // } else { |
| | | // const obj = {}; |
| | | // for (let key in testData[catalog][page]) { |
| | | // obj[key] = await getQuestionList( |
| | | // [], |
| | | // testData[catalog][page][key], |
| | | // this.config.activeBook |
| | | // ); |
| | | // } |
| | | // this.questionData[page] = obj; |
| | | // } |
| | | // } |
| | | // } |
| | | // } |
| | | this.loadPageList.push(Number(page)); |
| | | if (this.loadPageList.length > 5) { |
| | | // 超过5页 |
| | | this.loadPageList.shift(); |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | initSwiper() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".swiper-container"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Swiper(dom, { |
| | | loop: false, // 无缝 |
| | | autoplay: { |
| | | //自动开始 |
| | | delay: 3000, //时间间隔 |
| | | disableOnInteraction: false //*手动操作轮播图后不会暂停* |
| | | }, |
| | | paginationClickable: true, |
| | | slidesPerView: 1, // 一组三个 |
| | | spaceBetween: 30, // 间隔 |
| | | // 如果需要前进后退按钮 |
| | | navigation: { |
| | | nextEl: ".swiper-button-next", |
| | | prevEl: ".swiper-button-prev" |
| | | }, |
| | | // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 |
| | | observer: true, |
| | | observeParents: true, |
| | | // 如果需要分页器 |
| | | pagination: { |
| | | el: ".swiper-pagination", |
| | | clickable: true // 分页器可以点击 |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | initViewer() { |
| | | const doms = ( |
| | | this.container ? this.container : document |
| | | ).querySelectorAll(".openImgBox"); |
| | | for (let i = 0; i < doms.length; i++) { |
| | | const dom = doms[i]; |
| | | new Viewer(dom, { |
| | | navbar: true, // 显示导航栏 |
| | | toolbar: true, // 显示工具栏 |
| | | title: true // 显示标题 |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | "resolved" "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz" |
| | | "version" "1.1.2" |
| | | |
| | | "viewerjs@^1.11.6": |
| | | "integrity" "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==" |
| | | "resolved" "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz" |
| | | "version" "1.11.6" |
| | | |
| | | "vue-eslint-parser@^8.0.1": |
| | | "integrity" "sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==" |
| | | "resolved" "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz" |