1

litian

2024-05-30 e881af358017042209a076554c333bd5e58d1b68

 src/views/home.vue

@@ -182,10 +182,21 @@
            <div v-if="scribeData.noteList.length > 0">
              <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem">
                <div class="chapterName">
                  <el-icon @click="noteClose(index)" v-if="scribeData.isShow && scribeData.openIndex == index" class="hover"><ArrowDown /></el-icon>
                  <el-icon
                    @click="noteClose(index)"
                    v-if="scribeData.isShow && scribeData.openIndex == index"
                    class="hover"
                    ><ArrowDown
                  /></el-icon>
                  <el-icon @click="noteOpen(index)" v-else class="hover"><ArrowRight /></el-icon>
                  <span>{{ noteItem.chapterName }}</span></div>
                <div v-for="(item, index1) in noteItem.noteList" :key="item.key" class="listItem" v-show="scribeData.isShow && scribeData.openIndex == index">
                  <span>{{ noteItem.chapterName }}</span>
                </div>
                <div
                  v-for="(item, index1) in noteItem.noteList"
                  :key="item.key"
                  class="listItem"
                  v-show="scribeData.isShow && scribeData.openIndex == index"
                >
                  <div class="textBox">
                    <div class="title">
                      <div class="title-con">
@@ -302,8 +313,9 @@
                      @mouseover="showHandle = index"
                      @mouseleave="showHandle = null"
                    >
                      <img :src="item.icon" mode="" v-if="item.icon" />
                      <el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon>
                      <img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'"/>
                      <img :src="item.icon" mode="" v-else-if="item.icon && activeClassify != 'image'" />
                      <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> -->
                      <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon>
                      <el-icon v-else-if="activeClassify == 'video'" size="30"
                        ><VideoCamera
@@ -407,7 +419,9 @@
          <div class="list-box">
            <div v-if="reMarkList.length > 0">
              <div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem">
                <div class="reMarkCon">{{ item.chapterName }} P{{ item.page }}</div>
                <div class="reMarkCon">
                  <span class="con">{{ item.content }}</span> <span>P{{ item.page }}</span>
                </div>
                <div class="deleteReMarkImg">
                  <img :src="shanchu" class="icon hover" @click="deleteReMark(item)" />
                </div>
@@ -715,7 +729,10 @@
            </li>
          </ul>
        </div>
        <div :class="['openBox', toolState.open ? 'right' : '']">
        <div
          :class="['openBox', toolState.open ? 'right' : '']"
          v-if="teachToolsMenuData.length > 0"
        >
          <!-- <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> -->
          <!-- <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> -->
          <svg
@@ -841,7 +858,17 @@
                </div>
              </template>
            </el-popover>
            <div
            <div class="floatToolItem mark"
              v-if="floatingToolData.activeToolData == '书签'"
            >
              <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right">
                <div class="imgBox">
                  <img :src="tagW" alt="" v-if="floatingToolData.activeToolData == item.name"/>
                  <img :src="item.icon" alt="" v-else/>
                </div>
              </el-tooltip>
            </div>
              <div
              :class="
                floatingToolData.activeToolData == item.name
                  ? 'floatToolActive floatToolItem'
@@ -851,7 +878,7 @@
            >
              <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right">
                <div class="imgBox">
                  <img :src="item.icon" alt="" />
                  <img :src="item.icon" alt=""/>
                </div>
              </el-tooltip>
              <!-- <div class="text">{{ item.name }}</div> -->
@@ -932,14 +959,23 @@
    :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
  >
    <div class="content">
      <div class="word">{{ dictionaryData.data.word }}</div>
      <div class="phone_con">
        <div class="per-phone">
          英 /<span>{{ dictionaryData.data.ukPhone }}</span
          >/
          英 <span>/{{ dictionaryData.data.ukPhone }}/</span
          ><img
            :src="sound"
            class="soundBtn hover"
            @click="soundWord(dictionaryData.data.word, 'en-UK')"
          />
        </div>
        <div class="per-phone">
          美 /<span>{{ dictionaryData.data.usPhone }}</span
          >/
          美 <span>/{{ dictionaryData.data.usPhone }}/</span
          ><img
            :src="sound"
            class="soundBtn hover"
            @click="soundWord(dictionaryData.data.word, 'en-US')"
          />
        </div>
      </div>
      <div class="trans">
@@ -1100,6 +1136,7 @@
import setting from '@/assets/images/operation/setting.png'
import search from '@/assets/images/operation/search.png'
import search1 from '@/assets/images/operation/search1.png'
import sound from '@/assets/images/operation/sound.png'

import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'
import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'
@@ -1118,15 +1155,16 @@
import daiban from '@/assets/images/menu/daiban.png'
import shouqiR from '@/assets/images/menu/shouqi-R.png'
import shouqiL from '@/assets/images/menu/shouqi-L.png'
import charuziyuan from '../assets/images/operation/charuziyuan.png'
import charuziyuan_blue from '../assets/images/operation/charuziyuan_blue.png'
import dati_charu from '../assets/images/operation/dati_charu.png'
import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png'
import xiake from '../assets/images/operation/xiake.png'
import charuziyuan from '@/assets/images/operation/charuziyuan.png'
import charuziyuan_blue from '@/assets/images/operation/charuziyuan_blue.png'
import dati_charu from '@/assets/images/operation/dati_charu.png'
import dati_charu_blue from '@/assets/images/operation/dati_charu_blue.png'
import xiake from '@/assets/images/operation/xiake.png'

import huabi from '../assets/images/operation/huabi-w.png'
import wenzi2 from '../assets/images/operation/wenzi.png'
import biaoqianw from '../assets/images/operation/biaoqian-w.png'
import tagW from '../assets/images/operation/tag-w.svg'
import baiban from '../assets/images/operation/baiban-w.png'
import biaozhu from '../assets/images/operation/pencil-minus.svg'
import jieping from '../assets/images/operation/screenshot-w.png'
@@ -1223,7 +1261,10 @@
    console.log('父层state变化', state)
    window.qiankunState = state
    if (window.qiankunState && window.qiankunState.initTestBook) {
      window.qiankunState.initTestBook(localStorage.getItem('bookId') + '',localStorage.getItem('tryPageCount'))
      window.qiankunState.initTestBook(
        localStorage.getItem('bookId') + '',
        localStorage.getItem('tryPageCount')
      )
    }
  })

@@ -1247,22 +1288,20 @@
    },
    chooseWords: (data) => {
      console.log(data, '英语生词')
      if(data){
      if (data) {
        dialogToolData.txt = data.word
        dialogToolData.left = data.x
        dialogToolData.top = data.y + 20
        getSearchResult()
      }
      
      
    },
    getBookConfig: (data) => {
      console.log(data.bookConfig, '图书配置')
      bookConfig.value = data.bookConfig
      getCatalogueData()
      getResourceData()
      // getResourceData()
      getTextbookComponents()
      getReMarkList()
      // getReMarkList()
    },
    catalogChange: (data) => {
      activeCatalog.value = data.showCatalogList
@@ -1272,7 +1311,6 @@
    pageChange: (data) => {
      headerData.process = Number(data.page)
      currentChapter.value = data.catalog
      // catalogTree.value.filter(Number(data.start))
      console.log(data, '页面切换：目前显示页面和对应的章节信息')
      if (catalogTree.value) {
        catalogTree.value.setCurrentKey(Number(data.page))
@@ -1280,6 +1318,8 @@
      showToolBox.value = false
      lineDelete.showLineDelete = false
      dictionaryData.showContent = false

      reMarkCon.value = data.text
      reMarResult.value = reMarkData.value.find((item) => {
        return item.chapterNum == data.catalog && item.page == data.page
      })
@@ -1544,7 +1584,7 @@
const defaultProps = {
  children: 'children',
  label: 'label',
  page: 'page'
  start: 'start'
}

const filterNode = (value, data) => {
@@ -1587,6 +1627,11 @@
        teacherResourceList.value = []
        // 获取数组中所有对象的age属性的数量
        json.forEach((item) => {
          if(item.iconPath){
            item.icon = bookConfig.value.resourceUrl + '/' + item.iconPath
          }else{
            item.icon = ''
          }
          if (resourceType.value == 'default') {
            if (item.isTeacherResource == '否') {
              defaultResourceList.value.push(item)
@@ -1606,6 +1651,13 @@
          resourceDataList.value = []
          defaultResourceList.value.forEach((resItem) => {
            if (resItem.resourceType == '图片') {
              if(resItem.resourcePath){
                resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
              }else{
                resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
              }
              
              imgPreviewList.value.push(resItem.resourcePath)
              if (activeClassify.value == 'image') {
                resourceDataList.value.push(resItem)
              }
@@ -1639,7 +1691,7 @@
              count: imgCount,
              key: 'image'
            })
            imgPreviewList.value = resourceDataList.value
            
          }
          if (audioCount > 0) {
            classifySelectList.value.push({
@@ -1677,6 +1729,26 @@
              }
            })
          }
          console.log(resourceDataList.value,"图片")
          // if(activeClassify.value == "video"){
          //   resourceDataList.value.forEach((item,index)=>{
          //     console.log(item,"item")
          //     let video = document.createElement("video");
          //     video.src = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + item.md5;
          //     const canvas = document.createElement('canvas')
          //     canvas.width = 130
          //     canvas.height = 80
          //     const ctx:any = canvas.getContext('2d');
          //     video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
          //     video.currentTime = 1 // 第一帧

          //     video.oncanplay = () => {  //视频准备播放
          //       ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
          //       item.icon = canvas.toDataURL("image/png");  //获取base64格式的图片
          //     }
          //   })

          // }
        } else {
          let imgCount = 0
          let audioCount = 0
@@ -1686,6 +1758,12 @@
          resourceDataList.value = []
          teacherResourceList.value.forEach((resItem) => {
            if (resItem.resourceType == '图片') {
              if(resItem.resourcePath){
                resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
              }else{
                resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
              }
              imgPreviewList.value.push(resItem.resourcePath)
              if (activeClassify.value == 'image') {
                resourceDataList.value.push(resItem)
              }
@@ -1719,7 +1797,6 @@
              count: imgCount,
              key: 'image'
            })
            imgPreviewList.value = resourceDataList.value
          }
          if (audioCount > 0) {
            classifySelectList.value.push({
@@ -1789,6 +1866,7 @@

//资源跳转到指定位置
const JumpPosition = (data) => {
  console.log(data,"跳转")
  if (window.qiankunState && window.qiankunState.gotoPage) {
    window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
  }
@@ -1834,6 +1912,7 @@
      getNotesList()
      break
    case '资源':
    getResourceData()
      break
    case '知识图谱':
      break
@@ -1937,13 +2016,13 @@
  getNotesList()
}
//笔记章节收起
const noteOpen =(index)=>{
  console.log(scribeData.isShow,index)
const noteOpen = (index) => {
  console.log(scribeData.isShow, index)
  scribeData.isShow = true
  scribeData.openIndex = index
}
//笔记章节打开
const noteClose =(index)=>{
const noteClose = (index) => {
  scribeData.isShow = false
  scribeData.openIndex = index
}
@@ -2184,17 +2263,26 @@
const reMarkList = ref([])
const reMarkData = ref([])
const reMarkId = ref([])
const reMarkCon = ref('')

const reMark = () => {
  let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value))
  console.log(chapterData)
  if (catalogueData.value.length > 0) {
    catalogueData.value.forEach((item1) => {
      if (item1.chapter == Number(currentChapter.value) && item1.start == headerData.process) {
        chapterData.label = item1.label
      }
    })
  }

  if (chapterData) {
    reMarkData.value.push({
      id: toolClass.uuid(8),
      createDate: new Date(),
      page: headerData.process,
      chapterNum: currentChapter.value,
      chapterName: chapterData.label
      chapterName: chapterData.label,
      content: reMarkCon.value || chapterData.label
    })
    MG.identity
      .setUserKey({
@@ -2207,7 +2295,7 @@
        ]
      })
      .then((res) => {
        floatingToolData.activeToolData = ''
        // floatingToolData.activeToolData = ''
        ElMessage({
          message: '添加书签成功!',
          type: 'success'
@@ -2312,7 +2400,7 @@
    if (isUpdateImg.value) {
      screenshotData.value = []
      screenshotList.value.forEach((itemNote) => {
        if ((itemNote.id = screenshotId.value)) {
        if ((itemNote.id == screenshotId.value)) {
          itemNote.name = nameData.value
        }
      })
@@ -2523,7 +2611,10 @@
  colorActive.value = ''
  switch (item.name) {
    case 'AI阅读':
      window.speechSynthesis.cancel()
      const synth = window.speechSynthesis
      const utterance = new SpeechSynthesisUtterance(dialogToolData.txt)
      console.log(utterance, 1)
      utterance.lang = 'zh-CN' // 设置语言为中文
      synth.speak(utterance)
      showToolBox.value = false
@@ -2668,10 +2759,12 @@
          // 储值
          dialogToolData.lineHeight[item.key] = data
          // 渲染
          for (let j = 0; j < data.length; j++) {
            const citem = data[j]
            if (window.qiankunState && window.qiankunState.renderSign)
              window.qiankunState.renderSign(citem.type, citem)
          if (data.length > 0) {
            for (let j = 0; j < data.length; j++) {
              const citem = data[j]
              if (window.qiankunState && window.qiankunState.renderSign)
                window.qiankunState.renderSign(citem.type, citem)
            }
          }
        }
      }
@@ -2690,10 +2783,12 @@
          dialogToolData.scribeList[item.key] = data

          // 渲染
          for (let j = 0; j < data.length; j++) {
            const citem = data[j]
            if (window.qiankunState && window.qiankunState.renderSign)
              window.qiankunState.renderSign(citem.type, citem)
          if (data.length > 0) {
            for (let j = 0; j < data.length; j++) {
              const citem = data[j]
              if (window.qiankunState && window.qiankunState.renderSign)
                window.qiankunState.renderSign(citem.type, citem)
            }
          }
        }
      }
@@ -2711,10 +2806,12 @@
          // 储值
          dialogToolData.notesList[item.key] = data
          // 渲染
          for (let j = 0; j < data.length; j++) {
            const citem = data[j]
            if (window.qiankunState && window.qiankunState.renderSign)
              window.qiankunState.renderSign(citem.type, citem)
          if (data.length > 0) {
            for (let j = 0; j < data.length; j++) {
              const citem = data[j]
              if (window.qiankunState && window.qiankunState.renderSign)
                window.qiankunState.renderSign(citem.type, citem)
            }
          }
        }
      }
@@ -2742,17 +2839,16 @@
          let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key))
          // console.log(data,'666')
          let dataList = []
          if(catalogueData.value.length > 0 ){
            catalogueData.value.forEach(item1 =>{
              if(item1.chapter == Number(item.key)){
          if (catalogueData.value.length > 0) {
            catalogueData.value.forEach((item1) => {
              if (item1.chapter == Number(item.key)) {
                dataList.push(item1)
              }
            })
          }
          let labels = ""
          if(dataList.length > 1)
          labels = dataList.map(item => item.label).join('/');
          
          let labels = ''
          if (dataList.length > 1) labels = dataList.map((item) => item.label).join('/')

          let list = JSON.parse(item.value)
          let itemList = []
          if (list.length > 0) {
@@ -2805,6 +2901,7 @@
  lineDelete.id = id
  lineDelete.showLineDelete = true
  if (type == 'Note') {
    noteContent.show = false
    let list = dialogToolData.notesList[chapterNum]
    let data = list.find((item) => item.id == id)
    formData.id = id
@@ -2834,17 +2931,17 @@
  let data = list.find((item) => item.id == id)
  noteContent.note = data.note
  noteContent.color = data.color
  noteContent.show = true
  document.addEventListener('mousemove', function (event) {
    var x = event.offsetX
    var y = event.offsetY
    // console.log('鼠标坐标位置：', x, y)
    noteContent.top = event.clientY + 10
    noteContent.top = event.clientY + 20
    noteContent.left = event.clientX
    noteContent.show = true
  })
}
window.noteOut = () => {
  console.log(123)
window.noteOut = (type) => {
  console.log(type, 123)
  noteContent.show = false
}

@@ -2981,17 +3078,26 @@
        }
      ])
      .then((res) => {
        console.log(res[0][0],"cid")
        console.log(res[0][0], 'cid')
        if (res.length > 0 && res[0].length > 0) {
          res[0].map((item) => {
            item.trans = JSON.parse(item.trans)
          })
          dictionaryData.data = res[0][0]
          console.log(dictionaryData.data,"14")
          console.log(dictionaryData.data, '14')
          dictionaryData.showContent = true
        }
      })
  }
}

//单词阅读
const soundWord = (word, en) => {
  window.speechSynthesis.cancel()
  const synth = window.speechSynthesis
  const utterances = new SpeechSynthesisUtterance(word)
  // utterances.lang = en // 设置语言为中文
  synth.speak(utterances)
}
//内容区域顶部显示

@@ -3131,11 +3237,11 @@
          display: inline-block;
          width: 32px;
          height: 32px;
          .name {
            text-align: center;
            line-height: 1;
            color: #2c3e50;
          }
        }
        .name {
          text-align: center;
          line-height: 1;
          color: #2c3e50;
        }
      }
      .reload {
@@ -3493,8 +3599,8 @@
          margin: 15px;
          display: flex;
          align-items: center;
          span{
            margin-left:5px;
          span {
            margin-left: 5px;
          }
        }
        .reMarkItem {
@@ -3503,12 +3609,21 @@
          border-radius: 10px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          .reMarkCon {
            width: 240px;
            // width: 240px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            margin-right: 8px;
            // margin-right: 8px;
            display: flex;
            .con {
              width: 200px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-right: 8px;
            }
          }
          .deleteReMarkImg {
            display: flex;
@@ -3923,6 +4038,7 @@
  }
}
.noteContentBox {
  max-width: 240px;
  position: fixed;
  z-index: 2;
  padding: 10px;
@@ -3935,10 +4051,14 @@
  padding: 5px 20px;
  background: #fff;
  border-radius: 5px;
  .word {
    font-weight: bold;
  }
  .phone_con {
    .per-phone {
      width: 150px;
      min-width: 150px;
      align-items: center;
      // justify-content: space-between;
      background: #f4f5f7;
      border-radius: 15px;
      box-sizing: border-box;
@@ -3950,7 +4070,12 @@
      padding: 8px 10px;
      span {
        margin: 0 10px;
        flex: 1;
      }
    }
    .soundBtn {
      width: 16px;
      height: 14px;
    }
  }
  .trans {
@@ -4045,7 +4170,7 @@
  video {
    width: 100%;
  }
  audio{
  audio {
    width: 100%;
  }
}