Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

user1

2024-07-02 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 .env.product

@@ -1,6 +1,6 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/english'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/mathBook'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook"
VUE_APP_BOOK_ID = 'english'
VUE_APP_BOOK_ID = 'mathBook'

 src/books/artAndDrama/view/components/chapter004.vue

@@ -66,6 +66,7 @@
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                     <graffiti  :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="800" />
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -222,6 +223,7 @@
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import graffiti from '@/components/graffiti/index.vue'
export default {
    name: "chapterFour",
    props: {
@@ -229,6 +231,7 @@
            type: Array,
        },
    },
    components:{graffiti},
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();

 src/books/artAndDrama/view/components/index.vue

@@ -159,8 +159,8 @@
    }, 500);

    // 测试页面跳转
      setTimeout(() => {
      this.gotoPage(5,36);
    //  setTimeout(() => {
    //  this.gotoPage(4,32);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -188,7 +188,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
      }, 500);
    // }, 500);
  },
  methods: {
    // setZoom1() {

 src/books/childHealth/view/content/components/chapter008.vue

@@ -1521,12 +1521,12 @@
          <div class="fl fl-around openImgBox">
            <div class="left" style="width: 40%">
              <p class="center">
                <img src="../../../assets/images/chapterEight/0238-3.jpg" class="w100">
                <img src="../../../assets/images/chapterEight/0238-3.jpg" style="height: 178px;">
              </p>
              <p class="img">图8-6 单手胸外按压</p>
            </div>
            <div class="right" style="width: 40%">
              <div class="banshi openImgBox" style="height:214px">
              <div class="banshi openImgBox" style="height:188px">
                  <div class="swiper-container swiper-img">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">

 src/books/childHealth/view/content/index.vue

@@ -229,7 +229,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    // this.gotoPage(8,175);
    // this.gotoPage(8,233);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

 src/books/mathBook/assets/main.less

@@ -771,6 +771,11 @@
      }
    }
  }
  .gr-title {
    font-size: 16px;
    color:#00aeef;
    margin-top: 40px;
  }
}

/* 媒体查询做基础响应式布局 */

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

@@ -571,6 +571,11 @@
              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>
@@ -817,11 +822,12 @@

<script>
import examinations from "@/components/examinations/index.vue";
import graffiti from '@/components/graffiti/index.vue'
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  components: { examinations },
  components: { examinations,graffiti },
  props: {
    showPageList: {
      type: Array,

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

@@ -163,7 +163,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(2, 10);
    //   this.gotoPage(1, 9);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -866,8 +866,16 @@
          if (!res.data.data) return [];
          for (let index = 0; index < res.data.data.length; index++) {
            const item = res.data.data[index];
            // 数学公式加类名去修改样式
            if(item.type && item.type == 'material') {
              if(!item.infoList.length) return false
              item.infoList.forEach(citem => {
                if(citem.answer) citem.answer = citem.answer.replace(/\<math/gi, '<math class="examination-math"')
              })
            } else {
              if(item.answer) item.answer = item.answer.replace(/\<math/gi, '<math class="examination-math"')
            }
              item.isCollect = this.collectId.indexOf(item.id) > -1 ? true :false
            console.log(item.id ,this.collectId.indexOf(item.id));
            if (this.questionId[num][page].indexOf(item.id) > -1) {
              if (item.type && item.type == "material") {
                cardList.push(item);

 src/components/examinations/index.vue

@@ -371,14 +371,14 @@
                  </template>
                  <div class="referBox">
                    <span>参考答案：</span>
                    <p
                      v-html="arrayToString(value.answer)"
                    <span
                      v-html="value.answer"
                      class="ti-2"
                      :class="[
                        'subjectiveBox',
                        value.isUnfold ? 'showText' : 'hideText',
                      ]"
                    ></p>
                    ></span>
                  </div>
                  <!-- 解析 -->
                  <div class="referBox" v-if="value.analysisCon">
@@ -464,20 +464,24 @@
        >保存</el-button
      >
      <el-button
        @click="(e) =>{
          handleQuestion()
          saveAnswer(e)
        }"
        @click="
          (e) => {
            handleQuestion();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="(e) => {
          openAnswers()
          saveAnswer(e)
        }"
        @click="
          (e) => {
            openAnswers();
            saveAnswer(e);
          }
        "
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
@@ -1373,4 +1377,9 @@
  width: 18px;
  object-fit: contain;
}
/deep/ .examination-math {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>

 src/components/graffiti/components/brushSize.vue

@@ -1,15 +1,23 @@
<template>
  <div class="wrap-range">
  <div class="brushSize">
    <!-- 为了不在子组件中变更值，不用v-model -->
    <input
     <div class="wrap-range">
      <input
      type="range"
      :value="brushSize"
      min="1"
      max="30"
      title="调整笔刷粗细"
      class="input-brush"
      @change="(event) => $emit('change-size', +event.target.value)"
    />
    <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
     </div>

    <!-- <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> -->
     <div>
       <input type="color" v-model="checkColor" @input="onChangeColor">
     </div>
    
  </div>
</template>

@@ -32,8 +40,8 @@
    }
  },
  methods:{
    onChangeColor(color) {
      this.$emit("change-color", color);
    onChangeColor(e) {
      this.$emit("change-color", e.srcElement.value);
    },
  }
};
@@ -41,9 +49,13 @@
// const brushSize = computed(() => props.size);
</script>
<style lang="less" scoped>
.brushSize {
  display: flex;
}
.wrap-range {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .el-color-picker {
    margin-left: 20px;
  }

 src/components/graffiti/index.vue

@@ -1,6 +1,6 @@
<!-- 涂色连线题控件 -->
<template>
  <div class="page">
  <div class="page" :style="{height:imgHeight + 120 + 'px'}">
    <div class="main">
      <div id="canvas_panel">
        <canvas
@@ -13,7 +13,7 @@
        >
      </div>
    </div>
    <div class="footer">
    <div class="footer" :style="{backgroundColor:bcColor}">
      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
      <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
    </div>
@@ -32,6 +32,16 @@
    },
    bcImg:{
      type:String
    },
    imgWidth:{
      type:Number
    },
    imgHeight:{
      type:Number
    },
    bcColor:{
      type:String,
      default:'#fff'
    }
  },
  data() {
@@ -53,12 +63,14 @@
  },
  mounted() {
    this.backgroundImage = this.bcImg
    this.canvas = document.getElementById("canvas");
    this.canvas = (this.container ? this.container : document).getElementById("canvas");
    if (this.canvas.getContext) {
      this.context = this.canvas.getContext("2d", { willReadFrequently: true });
      this.initCanvas();
      // window.addEventListener('resize', updateCanvasPosition);
      window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      (
        this.container ? this.container : document
      ).addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      this.getCanvasOffset();
      this.context.lineGap = "round";
      this.context.lineJoin = "round";
@@ -101,7 +113,9 @@
    initCanvas() {
      const that = this
      const resetCanvas = () => {
        const elPanel = document.getElementById("canvas_panel");
        const elPanel = (
        this.container ? this.container : document
      ).getElementById("canvas_panel");
        that.canvas.width = elPanel.clientWidth;
        that.canvas.height = elPanel.clientHeight;
        that.context = that.canvas.getContext("2d", {
@@ -122,7 +136,7 @@
          imgData.setAttribute('crossOrigin', '');
        }
        imgData.onload = () => {
          this.context.drawImage(imgData,0,0)
          this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
        }
      }
      resetCanvas();
@@ -218,7 +232,7 @@
        imgData.setAttribute('crossOrigin', '');
      }
      imgData.onload = () => {
        this.context.drawImage(imgData,0,0)
        this.context.drawImage(imgData,0,0,this.imgWidth,this.imgHeight)
      }
    },
    // 保存画布背景和划线到本地方法
@@ -228,7 +242,9 @@
    },
    // 保存为一张图片并下载的方法
    saveImgData() {
      var link = document.createElement("a");
      var link = (
        this.container ? this.container : document
      ).createElement("a");
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
@@ -263,7 +279,6 @@
    saveData(data) {
      this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
      this.historyData.push(data);
      console.log('数据',this.historyData);
    },
    // 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
    resetToolActive() {
@@ -280,7 +295,6 @@
  display: flex;
  flex-direction: column;
  width:100%;
  height: 866px;
}

.main {
@@ -292,7 +306,6 @@
  justify-content: space-around;
  align-items: center;
  height: 88px;
  background-color: #fff;
}

#canvas_panel {